/* BEM Text Block Modern - v1.0.0
   Habillage moderne et dynamique du bloc "Bloc de texte personnalisé" (page d'accueil).
   N'affecte que .bem-textblock-modern, injecté sans toucher au theme ni aux fichiers natifs.
*/
.bem-textblock-modern {
  --btm-green: var(--bem-green, #65bc46);
  --btm-green-dark: var(--bem-green-dark, #4a9433);
  --btm-green-light: var(--bem-green-light, #eaf6e4);
  --btm-black: var(--bem-black, #1b1f1a);
  --btm-gray: #6b7280;
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 16px 64px;
  box-sizing: border-box;
}
.bem-textblock-modern *,
.bem-textblock-modern *::before,
.bem-textblock-modern *::after {
  box-sizing: border-box;
}

/* ---------- Intro ---------- */
.bem-intro-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.bem-intro-hero.is-visible { opacity: 1; transform: translateY(0); }
.bem-intro-title {
  font-size: 30px;
  font-weight: 800;
  color: var(--btm-black);
  margin: 0 0 8px;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.bem-intro-subtitle {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--btm-green-dark), var(--btm-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--btm-green-dark);
  -webkit-text-fill-color: transparent;
  margin: 0 0 16px;
}
.bem-intro-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--btm-gray);
  margin: 0;
  font-weight: 400;
}

/* ---------- Section titles ---------- */
.bem-section-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--btm-black);
  margin: 0 0 32px;
  position: relative;
  padding-bottom: 14px;
}
.bem-section-title::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--btm-green), var(--btm-green-dark));
}

.bem-features-section,
.bem-steps-section { margin-bottom: 56px; }

/* ---------- Feature cards ---------- */
.bem-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}
.bem-feature-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 30px 22px 26px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(27, 31, 26, .06);
  border: 1px solid rgba(27, 31, 26, .06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease, box-shadow .3s ease, border-color .3s ease;
}
.bem-feature-card.is-visible { opacity: 1; transform: translateY(0); }
.bem-features-grid .bem-feature-card:nth-child(1) { transition-delay: 0ms; }
.bem-features-grid .bem-feature-card:nth-child(2) { transition-delay: 90ms; }
.bem-features-grid .bem-feature-card:nth-child(3) { transition-delay: 180ms; }
.bem-features-grid .bem-feature-card:nth-child(4) { transition-delay: 270ms; }
.bem-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--btm-green), var(--btm-green-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.bem-feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 34px rgba(101, 188, 70, .18);
  border-color: rgba(101, 188, 70, .25);
}
.bem-feature-card.is-visible:hover { transform: translateY(-8px); }
.bem-feature-card:hover::before { transform: scaleX(1); }

.bem-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--btm-green), var(--btm-green-dark));
  box-shadow: 0 8px 18px rgba(101, 188, 70, .32);
  transition: transform .35s ease, box-shadow .35s ease;
}
.bem-feature-card:hover .bem-feature-icon {
  transform: scale(1.08) rotate(-6deg);
  box-shadow: 0 12px 24px rgba(101, 188, 70, .4);
}
.bem-feature-icon::after {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.bem-icon-cart::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjkiIGN5PSIyMSIgcj0iMSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjEiIHI9IjEiLz48cGF0aCBkPSJNMSAxaDRsMi42OCAxMy4zOWEyIDIgMCAwIDAgMiAxLjYxaDkuNzJhMiAyIDAgMCAwIDItMS42MUwyMyA2SDYiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjkiIGN5PSIyMSIgcj0iMSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjEiIHI9IjEiLz48cGF0aCBkPSJNMSAxaDRsMi42OCAxMy4zOWEyIDIgMCAwIDAgMiAxLjYxaDkuNzJhMiAyIDAgMCAwIDItMS42MUwyMyA2SDYiLz48L3N2Zz4=");
}
.bem-icon-truck::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjEiIHk9IjciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMCIvPjxwYXRoIGQ9Ik0xNiAxMGg0bDMgM3Y0aC03eiIvPjxjaXJjbGUgY3g9IjUuNSIgY3k9IjE5LjUiIHI9IjEuNSIvPjxjaXJjbGUgY3g9IjE3LjUiIGN5PSIxOS41IiByPSIxLjUiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjEiIHk9IjciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMCIvPjxwYXRoIGQ9Ik0xNiAxMGg0bDMgM3Y0aC03eiIvPjxjaXJjbGUgY3g9IjUuNSIgY3k9IjE5LjUiIHI9IjEuNSIvPjxjaXJjbGUgY3g9IjE3LjUiIGN5PSIxOS41IiByPSIxLjUiLz48L3N2Zz4=");
}
.bem-icon-chat::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxMS41YTguMzggOC4zOCAwIDAgMS0uOSAzLjggOC41IDguNSAwIDAgMS03LjYgNC43IDguMzggOC4zOCAwIDAgMS0zLjgtLjlMMyAyMWwxLjktNS43YTguMzggOC4zOCAwIDAgMS0uOS0zLjggOC41IDguNSAwIDAgMSA0LjctNy42IDguMzggOC4zOCAwIDAgMSAzLjgtLjloLjVhOC40OCA4LjQ4IDAgMCAxIDggOHYuNXoiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxMS41YTguMzggOC4zOCAwIDAgMS0uOSAzLjggOC41IDguNSAwIDAgMS03LjYgNC43IDguMzggOC4zOCAwIDAgMS0zLjgtLjlMMyAyMWwxLjktNS43YTguMzggOC4zOCAwIDAgMS0uOS0zLjggOC41IDguNSAwIDAgMSA0LjctNy42IDguMzggOC4zOCAwIDAgMSAzLjgtLjloLjVhOC40OCA4LjQ4IDAgMCAxIDggOHYuNXoiLz48L3N2Zz4=");
}
.bem-icon-tool::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNC43IDYuM2E0IDQgMCAwIDAtNS40IDUuNEwyIDE5bDMgMyA3LjMtNy4zYTQgNCAwIDAgMCA1LjQtNS40bC0yLjggMi44LTMtM3oiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNC43IDYuM2E0IDQgMCAwIDAtNS40IDUuNEwyIDE5bDMgMyA3LjMtNy4zYTQgNCAwIDAgMCA1LjQtNS40bC0yLjggMi44LTMtM3oiLz48L3N2Zz4=");
}

.bem-feature-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--btm-black);
  margin: 0 0 8px;
}
.bem-feature-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--btm-gray);
  margin: 0;
}

/* ---------- Steps ---------- */
.bem-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.bem-steps-grid::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--btm-green) 0 10px, transparent 10px 18px);
  z-index: 0;
}
.bem-step {
  position: relative;
  z-index: 1;
  text-align: center;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.bem-step.is-visible { opacity: 1; transform: translateY(0); }
.bem-steps-grid .bem-step:nth-child(1) { transition-delay: 0ms; }
.bem-steps-grid .bem-step:nth-child(2) { transition-delay: 90ms; }
.bem-steps-grid .bem-step:nth-child(3) { transition-delay: 180ms; }
.bem-steps-grid .bem-step:nth-child(4) { transition-delay: 270ms; }
.bem-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--btm-green);
  color: var(--btm-green-dark);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 14px;
  transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bem-step:hover .bem-step-number {
  background: linear-gradient(135deg, var(--btm-green), var(--btm-green-dark));
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 8px 18px rgba(101, 188, 70, .35);
}
.bem-step h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--btm-black);
  margin: 0 0 6px;
}
.bem-step p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--btm-gray);
  margin: 0;
  padding: 0 6px;
}

/* ---------- CTA banner ---------- */
.bem-cta-banner {
  margin-top: 8px;
  text-align: center;
  background: linear-gradient(135deg, var(--btm-green-light), #fff);
  border: 1px solid rgba(101, 188, 70, .25);
  border-radius: 20px;
  padding: 32px 24px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}
.bem-cta-banner.is-visible { opacity: 1; transform: translateY(0); }
.bem-cta-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--btm-black);
  margin: 0 0 16px;
}
.bem-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--btm-green), var(--btm-green-dark));
  color: #fff !important;
  font-weight: 700;
  font-size: 14.5px;
  padding: 13px 28px;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(101, 188, 70, .32);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bem-cta-button::after {
  content: '\2192';
  transition: transform .25s ease;
}
.bem-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(101, 188, 70, .42);
  color: #fff !important;
}
.bem-cta-button:hover::after { transform: translateX(4px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bem-steps-grid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .bem-steps-grid::before { display: none; }
}
@media (max-width: 560px) {
  .bem-features-grid { grid-template-columns: 1fr; }
  .bem-steps-grid { grid-template-columns: 1fr; }
  .bem-intro-title { font-size: 24px; }
  .bem-textblock-modern { padding: 40px 16px 48px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bem-intro-hero,
  .bem-feature-card,
  .bem-step,
  .bem-cta-banner {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}