/* BEM About Page Modern - v1.0.0
   Habillage moderne et dynamique de la page CMS "A propos" (id_cms 6).
   N'affecte que .bem-about-modern.
*/
.bem-about-modern {
  --ba-green: var(--bem-green, #65bc46);
  --ba-green-dark: var(--bem-green-dark, #4a9433);
  --ba-green-light: var(--bem-green-light, #eaf6e4);
  --ba-black: var(--bem-black, #1b1f1a);
  --ba-gray: #6b7280;
  max-width: 1140px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  box-sizing: border-box;
}
.bem-about-modern *,
.bem-about-modern *::before,
.bem-about-modern *::after {
  box-sizing: border-box;
}

/* ---------- Intro ---------- */
.bem-intro-hero {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
  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: 27px;
  font-weight: 800;
  color: var(--ba-black);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.bem-intro-subtitle {
  display: inline-block;
  font-size: 17px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--ba-green-dark), var(--ba-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ba-green-dark);
  -webkit-text-fill-color: transparent;
  margin: 0 0 16px;
}
.bem-intro-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ba-gray);
  margin: 0 0 12px;
}
.bem-stat-strip {
  margin: 18px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ba-green-dark);
  background: var(--ba-green-light);
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  letter-spacing: .01em;
}

/* ---------- Photos ---------- */
.bem-about-photo {
  margin: 0 auto 48px;
  max-width: 900px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.bem-about-photo.is-visible { opacity: 1; transform: translateY(0); }
.bem-about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(27, 31, 26, .14);
}

/* ---------- Section titles ---------- */
.bem-section-title {
  text-align: center;
  font-size: 21px;
  font-weight: 800;
  color: var(--ba-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(--ba-green), var(--ba-green-dark));
}
.bem-features-section,
.bem-steps-section,
.bem-faq-section { margin-bottom: 56px; }

/* ---------- Value cards (reuses homepage's feature-card look) ---------- */
.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(--ba-green), var(--ba-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: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(--ba-green), var(--ba-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-pin::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxMGMwIDctOSAxMy05IDEzcy05LTYtOS0xM2E5IDkgMCAwIDEgMTggMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSAxMGMwIDctOSAxMy05IDEzcy05LTYtOS0xM2E5IDkgMCAwIDEgMTggMHoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzIi8+PC9zdmc+");
}
.bem-icon-shield::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAyMnM4LTQgOC0xMFY1bC04LTMtOCAzdjdjMCA2IDggMTAgOCAxMHoiLz48cGF0aCBkPSJNOSAxMmwyIDIgNC00Ii8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xMiAyMnM4LTQgOC0xMFY1bC04LTMtOCAzdjdjMCA2IDggMTAgOCAxMHoiLz48cGF0aCBkPSJNOSAxMmwyIDIgNC00Ii8+PC9zdmc+");
}
.bem-icon-bolt::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5Z29uIHBvaW50cz0iMTMgMiAzIDE0IDEyIDE0IDExIDIyIDIxIDEwIDEyIDEwIDEzIDIiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5Z29uIHBvaW50cz0iMTMgMiAzIDE0IDEyIDE0IDExIDIyIDIxIDEwIDEyIDEwIDEzIDIiLz48L3N2Zz4=");
}
.bem-icon-doc::after {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNCAySDZhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWOHoiLz48cG9seWxpbmUgcG9pbnRzPSIxNCAyIDE0IDggMjAgOCIvPjxsaW5lIHgxPSI5IiB5MT0iMTMiIHgyPSIxNSIgeTI9IjEzIi8+PGxpbmUgeDE9IjkiIHkxPSIxNyIgeDI9IjE1IiB5Mj0iMTciLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNCAySDZhMiAyIDAgMCAwLTIgMnYxNmEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWOHoiLz48cG9seWxpbmUgcG9pbnRzPSIxNCAyIDE0IDggMjAgOCIvPjxsaW5lIHgxPSI5IiB5MT0iMTMiIHgyPSIxNSIgeTI9IjEzIi8+PGxpbmUgeDE9IjkiIHkxPSIxNyIgeDI9IjE1IiB5Mj0iMTciLz48L3N2Zz4=");
}
.bem-feature-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ba-black);
  margin: 0 0 8px;
}
.bem-feature-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ba-gray);
  margin: 0;
}

/* ---------- Steps (reuses homepage's step-flow look) ---------- */
.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(--ba-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(--ba-green);
  color: var(--ba-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(--ba-green), var(--ba-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(--ba-black);
  margin: 0 0 6px;
}
.bem-step p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ba-gray);
  margin: 0;
  padding: 0 6px;
}

/* ---------- FAQ accordion ---------- */
.bem-faq {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bem-faq-item {
  background: #fff;
  border: 1px solid rgba(27, 31, 26, .08);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease, border-color .25s ease, box-shadow .25s ease;
}
.bem-faq-item.is-visible { opacity: 1; transform: translateY(0); }
.bem-faq .bem-faq-item:nth-child(1) { transition-delay: 0ms; }
.bem-faq .bem-faq-item:nth-child(2) { transition-delay: 80ms; }
.bem-faq .bem-faq-item:nth-child(3) { transition-delay: 160ms; }
.bem-faq .bem-faq-item:nth-child(4) { transition-delay: 240ms; }
.bem-faq-item.is-open {
  border-color: rgba(101, 188, 70, .35);
  box-shadow: 0 10px 26px rgba(101, 188, 70, .12);
}
.bem-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 18px 20px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ba-black);
  font-family: inherit;
}
.bem-faq-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ba-green-light);
  position: relative;
  transition: background .25s ease, transform .3s ease;
}
.bem-faq-icon::before,
.bem-faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ba-green-dark);
  transition: transform .3s ease, background .25s ease;
}
.bem-faq-icon::before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.bem-faq-icon::after { width: 2px; height: 10px; transform: translate(-50%, -50%); }
.bem-faq-item.is-open .bem-faq-icon { background: var(--ba-green); }
.bem-faq-item.is-open .bem-faq-icon::before,
.bem-faq-item.is-open .bem-faq-icon::after { background: #fff; }
.bem-faq-item.is-open .bem-faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.bem-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.bem-faq-answer p {
  margin: 0;
  padding: 0 20px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ba-gray);
}

/* ---------- 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: 22px; }
  .bem-about-modern { padding: 16px 16px 48px; }
}

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