/* Charte MAEF v3 : ajustements propres aux pages « a-propos-contact ».
 * Portée : uniquement /a-propos et /contact, repérées par la classe de leur héros
 * (.hero-section.a-propos / .hero-section.contact) via :has() sur <body class="maef-v3">.
 * Aucun changement de HTML, de texte ni d'animation : seulement l'habillage.
 */

/* ---- En-tête (rendu sur ces deux pages) ---- */

/* La règle globale « une seule famille » écrase la police d'icônes Webflow :
   la flèche du menu « Accompagnement » s'affichait en carré vide. On rend sa police à l'icône. */
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) [class*="w-icon-"] {
  font-family: 'webflow-icons' !important;
}

/* Les interactions Webflow posent une couleur en ligne (anthracite bleuté au repos, bleu #0083fa au survol)
   sur le titre et la flèche du menu. On garde le même effet de survol, aux couleurs de la charte. */
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-item-title,
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown-icon {
  color: var(--v3-ink) !important;
  transition: color .2s ease;
}
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown:hover .nav-item-title,
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown:hover .nav-dropdown-icon,
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown-toggle.w--open .nav-item-title,
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown-toggle.w--open .nav-dropdown-icon {
  color: var(--v3-green) !important;
}

/* Liste déroulante : carte blanche arrondie, filet et ombre douce verte (au lieu du cadre gris à angles droits) */
@media (min-width: 992px) {
  .maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown-list {
    border: 1px solid var(--v3-line);
    border-radius: 18px;
    margin-top: 6px;
    box-shadow: 0 24px 50px -30px rgba(16, 65, 59, 0.45);
    overflow: hidden;
  }
}
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .nav-dropdown-link:hover {
  color: var(--v3-green);
}

/* ---- Témoignages (les deux pages) : points du carrousel lisibles sur le fond crème ---- */
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .testimonial-slider .w-slider-dot {
  background-color: rgba(16, 65, 59, 0.18);
}
.maef-v3:is(:has(.hero-section.a-propos), :has(.hero-section.contact)) .testimonial-slider .w-slider-dot.w-active {
  background-color: var(--v3-green);
}

/* ---- À propos ---- */

/* « Comment on fait valoir vos droits » : l'interaction au défilement fait passer les icônes d'étape
   du bleu pâle (231,239,255) au bleu #0083fa, en couleur en ligne. On convertit cette couleur à la volée :
   même animation, mais du sauge (#EBF3E7) au vert de la charte (#10413B).
   Correspondance linéaire sur le canal rouge : r=231 → sauge, r=0 → vert. */
.maef-v3:has(.hero-section.a-propos) .process-block .block-icon.step-icon svg {
  color: var(--v3-green);
  color: rgb(from currentColor calc(16 + r * 0.948) calc(65 + r * 0.7706) calc(59 + r * 0.7446));
}

/* « Vérifier vos droits / Contester » : les deux cartes débordaient de 6 px sur mobile (défilement horizontal) */
.maef-v3:has(.hero-section.a-propos) .box-wrapper {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.maef-v3:has(.hero-section.a-propos) .box-wrapper .single-box { min-width: 0; }
@media (max-width: 479px) {
  .maef-v3:has(.hero-section.a-propos) .box-wrapper { grid-column-gap: 10px; }
  .maef-v3:has(.hero-section.a-propos) .box-wrapper .single-box { padding-left: 14px; padding-right: 14px; }
  .maef-v3:has(.hero-section.a-propos) .box-wrapper .h4 { overflow-wrap: anywhere; hyphens: auto; }
}