/* ── COMMON.CSS — ESF SERVICES ── */

:root{
  --ink:#0B2430;--teal:#008090;--sea:#00b698;--coral:#C85A1E;
  --sand:#F5EDE2;--cream:#FDFAF7;--slate:#334D5C;--muted:#4E6E80;
  --logement:#008090;--budget:#00b698;--droits:#516878;--insertion:#7530B0;
  --nav-h:76px;--r:16px;--max:1240px;
  --sh:0 2px 16px rgba(11,36,48,.08);--sh2:0 10px 48px rgba(11,36,48,.16);
  --ink-fixed:#0B2430;--cream-fixed:#FDFAF7;
  /* Accents en TEXTE — AA dans les 2 thèmes SANS @media : color-mix avec --ink
     (qui s'inverse) → assombrit l'accent en clair, l'éclaircit en sombre. P calé
     par couleur pour ≥4.5:1 sur cream ET sand, clair ET sombre. Voir DESIGN.md §2 #4.
     Routent : --dc-ink (cartes data-d), liens/labels d'accent. PAS pour fond fixe blanc. */
  --teal-ink:color-mix(in srgb,var(--teal) 66%,var(--ink));
  --sea-ink:color-mix(in srgb,var(--sea) 55%,var(--ink));
  --coral-ink:color-mix(in srgb,var(--coral) 70%,var(--ink));
  --droits-ink:color-mix(in srgb,var(--droits) 58%,var(--ink));
  --insertion-ink:color-mix(in srgb,var(--insertion) 50%,var(--ink));

  /* ── VARIANTES FIXES ──
     Les tokens `-ink` ci-dessus sont mélangés avec --ink, qui S'INVERSE avec
     le thème : ils s'éclaircissent donc en mode sombre. C'est exactement ce
     qu'il faut sur un fond qui s'inverse aussi — et exactement ce qu'il ne
     faut PAS sur un fond `-fixed`, qui reste clair dans les deux thèmes.
     Ces variantes-ci sont mélangées avec --ink-fixed : elles ne bougent
     jamais. À utiliser dès que le FOND ne bouge pas. */
  --teal-ink-fixed:color-mix(in srgb,var(--teal) 66%,var(--ink-fixed));
  --sea-ink-fixed:color-mix(in srgb,var(--sea) 55%,var(--ink-fixed));
  --coral-ink-fixed:color-mix(in srgb,var(--coral) 70%,var(--ink-fixed));
  --droits-ink-fixed:color-mix(in srgb,var(--droits) 58%,var(--ink-fixed));
  --insertion-ink-fixed:color-mix(in srgb,var(--insertion) 50%,var(--ink-fixed));
  /* Sea/budget approfondi pour porter du TEXTE BLANC en AA (bande/panneau/bouton budget) :
     le sea brut #00b698 ne donne que 2.48–2.58:1 avec du blanc → échec, même en grand.
     Constant (--ink-fixed) car ces surfaces restent colorées dans les 2 thèmes. blanc = 4.66:1. */
  --budget-deep:color-mix(in srgb,var(--budget) 65%,var(--ink-fixed));
  /* Même principe que --budget-deep : le coral brut sous du blanc ne donne que
     4,25:1. Assombri, il passe à 5,06:1 sans perdre son identité. */
  --coral-deep:color-mix(in srgb,var(--coral) 88%,var(--ink-fixed));
  /* Survols des boutons pleins, dérivés des tokens (remplacent #a83d10 et #006673
     écrits en dur) : un cran plus sombre que le fond au repos ; texte blanc à
     6,2:1 (corail) et 8,8:1 (teal). */
  --coral-hover:color-mix(in srgb,var(--coral) 74%,var(--ink-fixed));
  --teal-hover:color-mix(in srgb,var(--teal) 50%,var(--ink-fixed));
  --z-back-to-top:80;--z-mobile-menu:190;--z-nav:200;--z-dropdown:300;--z-skip:1000;
  --ease:cubic-bezier(0.32,0.72,0,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  /* Pas de tokens centralisés radius/shadow/spacing/type-scale : les composants
     emploient des littéraux + l'accent (--ac/--dc → --dc-ink) + --ease/--ink. Un jeu
     « SYSTÈME UNIFIÉ » avait été défini mais JAMAIS consommé (0×) → retiré (code mort,
     2026-06-02). Cf. DESIGN.md §1. Couleurs/espacements vivent dans chaque composant. */
  /* Contrôles natifs (case à cocher, listes, barres de défilement) accordés au thème :
     sans cette déclaration ils restaient clairs sur les cartes sombres. */
  color-scheme:light;
}

/* ── HIGH-END TEXTURE (global) ── */
body{position:relative;}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}
@media(prefers-reduced-motion:reduce){
  body::before{display:none;}
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E0D8D0;--sand:#1A1A2E;--cream:#252540;
    --slate:#B8B0A8;--muted:#9499A8;
    --sh:0 2px 16px rgba(0,0,0,.25);--sh2:0 10px 48px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E0D8D0;--sand:#1A1A2E;--cream:#252540;
  --slate:#B8B0A8;--muted:#9499A8;
  --sh:0 2px 16px rgba(0,0,0,.25);--sh2:0 10px 48px rgba(0,0,0,.35);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:120px;}
body{font-family:'Outfit',sans-serif;background:var(--sand);color:var(--slate);line-height:1.6;font-size:1rem;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:'Fraunces',serif;line-height:1.15;text-wrap:balance;}
/* Pas de mot seul en dernière ligne (« ? » orphelin des questions de FAQ, fins de paragraphe). */
p,li,summary{text-wrap:pretty;}
/* Sigles glosés via <abbr title> : on retire le souligné pointillé par défaut
   (aucun changement visuel) ; le curseur « help » signale la définition au survol. */
abbr[title]{text-decoration:none;cursor:help;}
/* Exposants (« 13<sup>e</sup> ») : sans interligne propre, ils agrandissaient la
   ligne de 3 à 4 px et les cartes partenaires de 3 à 8 px. Mesuré : hauteurs
   identiques à celles du caractère « ᵉ » qu'ils remplacent. */
sup{line-height:0;}

/* ── FOCUS / ACCESSIBILITY ── */
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.skip-link{position:absolute;top:-100%;left:16px;background:var(--teal);color:white;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:var(--z-skip);transition:top .2s;}
.skip-link:focus{top:0;}

/* ── NAV — Floating Island Pill (global) ── */
body{padding-top:108px;}
@media(max-width:600px){body{padding-top:88px;}html{scroll-padding-top:96px;}}

header{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:var(--z-nav);
  /* max-content : en `auto`, la pilule (left:50%) prenait sa largeur minimale,
     calculée avec « ESF SERVICES » replié, et le bouton thème en débordait de 24 px. */
  width:max-content;max-width:calc(100% - 32px);height:auto;
  background:color-mix(in srgb,var(--cream-fixed) 78%,transparent);
  backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);
  border:1px solid color-mix(in srgb,var(--ink-fixed) 6%,transparent);
  border-radius:999px;
  box-shadow:0 1px 0 0 rgba(255,255,255,.5) inset, 0 12px 32px color-mix(in srgb,var(--ink-fixed) 10%,transparent);
  padding:7px 10px 7px 18px;
  display:flex;align-items:center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),padding .45s var(--ease),top .45s var(--ease);
}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:16px;}
.nav-logo-text{font-family:'Fraunces',serif;color:var(--ink-fixed);font-style:italic;font-weight:600;font-size:1.05rem;line-height:1;white-space:nowrap;transition:font-size .45s var(--ease);}
.nav-logo-text span{display:none;}
nav{display:flex;align-items:center;gap:0;margin-left:auto;}
nav a.nav-link,.nav-dropdown-btn{color:color-mix(in srgb,var(--ink-fixed) 70%,transparent);font-size:1.05rem;font-weight:500;padding:10px 16px;border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease),padding .45s var(--ease),font-size .45s var(--ease);white-space:nowrap;background:none;border:none;cursor:pointer;font-family:'Outfit',sans-serif;}
nav a.nav-link:hover,.nav-dropdown-btn:hover{background:color-mix(in srgb,var(--ink-fixed) 5%,transparent);color:var(--ink-fixed);}
nav a.nav-link.active{color:var(--ink-fixed);font-weight:600;background:color-mix(in srgb,var(--teal) 12%,transparent);box-shadow:inset 0 -2px 0 0 var(--teal);}
.nav-dropdown-btn.active{color:var(--ink-fixed);font-weight:600;background:color-mix(in srgb,var(--teal) 12%,transparent);box-shadow:inset 0 -2px 0 0 var(--teal);}
.nav-cta{
  background:var(--coral-deep)!important;color:white!important;
  font-weight:600;font-size:.98rem;
  border-radius:999px!important;
  padding:10px 20px;margin-left:8px;
  display:inline-flex;align-items:center;gap:6px;
  flex-shrink:0;white-space:nowrap;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .35s var(--ease),padding .45s var(--ease),font-size .45s var(--ease);
  box-shadow:0 4px 12px color-mix(in srgb,var(--coral) 28%,transparent);
}
.nav-cta:hover{background:var(--coral-hover)!important;transform:translateY(-1px);box-shadow:0 8px 20px color-mix(in srgb,var(--coral) 36%,transparent);}

/* Lien utilitaire « Espace salarié » — hors de la nav publique, à côté du toggle thème.
   Volontairement discret (audience = salariés) et non animé au scroll (cf. lessons 2026-06-01 :
   ne pas entasser d'item dans la nav flex, ne pas animer une cible tactile). */
.nav-espace{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;white-space:nowrap;font-family:'Outfit',sans-serif;font-weight:600;font-size:.86rem;color:var(--teal-ink);text-decoration:none;padding:9px 15px;margin-left:8px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--teal) 32%,transparent);background:color-mix(in srgb,var(--teal) 7%,transparent);transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),color .25s var(--ease);}
.nav-espace:hover{background:color-mix(in srgb,var(--teal) 14%,transparent);border-color:var(--teal);transform:translateY(-1px);}
.nav-espace.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.nav-espace svg{width:15px;height:15px;flex-shrink:0;}

/* ── NAV COMPACTE AU SCROLL ──
   Moderne : animation pilotée par le scroll (progressive, scrubbée au pixel, hors thread principal).
   Repli   : la classe .scrolled posée par js/main.js (tween au seuil de 60px).
   NB : le bouton thème est volontairement EXCLU du rétrécissement — il doit
        rester à 44px (cible tactile WCAG 2.5.5 AAA, cf. Phase 11). */
@supports (animation-timeline:scroll()){
  header,
  header .nav-logo-text,
  header nav a.nav-link,
  header .nav-dropdown-btn,
  header .nav-cta{
    animation-timeline:scroll(root block);
    animation-range:0 150px;
    animation-fill-mode:both;
    animation-timing-function:linear;
  }
  header{animation-name:navShrinkHeader;}
  header .nav-logo-text{animation-name:navShrinkLogoText;}
  header nav a.nav-link,header .nav-dropdown-btn{animation-name:navShrinkLink;}
  header .nav-cta{animation-name:navShrinkCta;}
}
@keyframes navShrinkHeader{
  from{top:18px;padding:7px 10px 7px 18px;background:color-mix(in srgb,var(--cream-fixed) 78%,transparent);box-shadow:0 1px 0 0 rgba(255,255,255,.5) inset,0 12px 32px color-mix(in srgb,var(--ink-fixed) 10%,transparent);}
  to{top:7px;padding:4px 7px 4px 13px;background:color-mix(in srgb,var(--cream-fixed) 90%,transparent);box-shadow:0 1px 0 0 rgba(255,255,255,.65) inset,0 16px 44px color-mix(in srgb,var(--ink-fixed) 20%,transparent);}
}
@keyframes navShrinkLogoText{from{font-size:1.05rem;}to{font-size:.9rem;}}
@keyframes navShrinkLink{from{font-size:1.05rem;padding:10px 16px;}to{font-size:.95rem;padding:7px 13px;}}
@keyframes navShrinkCta{from{font-size:.98rem;padding:10px 20px;}to{font-size:.9rem;padding:8px 15px;}}

@supports not (animation-timeline:scroll()){
  header.scrolled{top:7px;padding:4px 7px 4px 13px;background:color-mix(in srgb,var(--cream-fixed) 90%,transparent);box-shadow:0 1px 0 0 rgba(255,255,255,.65) inset,0 16px 44px color-mix(in srgb,var(--ink-fixed) 20%,transparent);}
  header.scrolled .nav-logo-text{font-size:.9rem;}
  header.scrolled nav a.nav-link,header.scrolled .nav-dropdown-btn{font-size:.95rem;padding:7px 13px;}
  header.scrolled .nav-cta{font-size:.9rem;padding:8px 15px;}
}
.nav-dropdown{position:relative;}
.nav-dropdown::after{content:'';position:absolute;left:0;right:0;top:100%;height:12px;}
/* Fond clair FIXE, comme la pilule à laquelle il est accroché : en `--cream`, le
   menu devenait sombre sous une pilule claire et le survol teal tombait à 3:1.
   Le texte suit donc des tokens fixes (survol 6,4:1 dans les deux thèmes). */
.nav-dropdown-menu{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .12s var(--ease),transform .12s var(--ease),visibility .12s var(--ease);position:absolute;top:calc(100% + 8px);left:0;background:var(--cream-fixed);border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.14);min-width:230px;overflow:hidden;z-index:var(--z-dropdown);border:1px solid color-mix(in srgb,var(--teal) 8%,transparent);}
/* Avec JS, seule la classe .open (posée avec aria-expanded) affiche le menu :
   l'état annoncé et l'état visible ne peuvent plus diverger. Sans JS, le
   survol et le focus clavier gardent le menu atteignable. */
html:not(.js) .nav-dropdown:hover .nav-dropdown-menu,html:not(.js) .nav-dropdown:focus-within .nav-dropdown-menu,.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:none;transition-duration:.18s;}
.nav-dropdown-menu a{display:block;padding:13px 22px;font-size:1rem;color:var(--ink-fixed);transition:background .15s;font-family:'Outfit',sans-serif;}
.nav-dropdown-menu a:hover{background:color-mix(in srgb,var(--teal) 6%,transparent);color:var(--teal-ink-fixed);}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:1px solid color-mix(in srgb,var(--ink-fixed) 8%,transparent);border-radius:999px;cursor:pointer;width:38px;height:38px;align-items:center;margin-left:8px;padding:0;}
.hamburger span{display:block;width:18px;height:1.5px;background:var(--ink-fixed);border-radius:2px;transition:transform .35s var(--ease),opacity .25s var(--ease);}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* Fullscreen glass mobile menu */
.mobile-menu{
  display:none;flex-direction:column;
  position:fixed;inset:0;top:0;
  background:color-mix(in srgb,var(--cream-fixed) 92%,transparent);
  backdrop-filter:saturate(180%) blur(40px);-webkit-backdrop-filter:saturate(180%) blur(40px);
  padding:120px 32px 40px;gap:0;
  z-index:var(--z-mobile-menu);
  /* Sous-menu ouvert, le contenu dépasse la hauteur d'un téléphone : sans
     défilement, Contact, l'appel et le thème restaient hors d'atteinte. */
  overflow-y:auto;overscroll-behavior:contain;
}
.mobile-menu.open{display:flex;}
/* En colonne flex à hauteur fixe, les enfants rétrécissaient au lieu de faire
   défiler le menu : sous-menu ouvert, le bouton de thème tombait à 44×18 px. */
.mobile-menu > *{flex-shrink:0;}
.mobile-menu a,.mobile-sub-toggle{
  color:var(--ink-fixed);padding:14px 18px;border-radius:14px;
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:1.4rem;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background .25s var(--ease);
}
.mobile-menu.open a,.mobile-menu.open .mobile-sub-toggle{opacity:1;transform:translateY(0);}
.mobile-menu.open a:nth-child(1){transition-delay:.05s;}
.mobile-menu.open a:nth-child(2),.mobile-menu.open .mobile-sub-toggle{transition-delay:.1s;}
.mobile-menu.open a:nth-child(4){transition-delay:.2s;}
.mobile-menu.open a:nth-child(5){transition-delay:.25s;}
.mobile-menu.open a:nth-child(6){transition-delay:.3s;}
.mobile-menu.open a:nth-child(7){transition-delay:.35s;}
.mobile-menu.open a:nth-child(8){transition-delay:.4s;}
.mobile-menu.open a:nth-child(9){transition-delay:.45s;}
.mobile-menu a:hover,.mobile-sub-toggle:hover{background:color-mix(in srgb,var(--teal) 8%,transparent);color:var(--teal-ink-fixed);}
.mobile-menu .sub-links{padding-left:20px;border-left:2px solid color-mix(in srgb,var(--teal) 22%,transparent);margin:4px 0 4px 18px;}
/* block : en ligne, les liens s'enchaînaient comme un paragraphe et leurs zones de toucher se chevauchaient. */
.mobile-menu .sub-links a{display:block;font-size:1.05rem;padding:10px 14px;}
.mobile-menu .nav-cta{margin:18px 0 0;text-align:center;background:var(--coral-deep)!important;border-radius:999px!important;font-weight:600;color:white!important;font-style:normal;font-family:'Outfit',sans-serif!important;font-size:1rem!important;padding:14px 24px!important;}
.mobile-sub-toggle{background:none;border:none;cursor:pointer;width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;}
.mobile-sub-content{display:none;}
.mobile-sub-content.open{display:block;}

/* ── EYEBROW ── */
/* Libellé de section en casse normale, sans interlettrage : la petite capitale
   espacée au-dessus de chaque titre faisait gabarit (7 sur la Présentation).
   Seul l'eyebrow du héros (`.page-hero .eyebrow`, plus spécifique) garde la
   pastille en capitales. --teal-ink : AA sur sable et crème dans les 2 thèmes
   (6,2 et 5,5:1 sur sable), sans @media. */
.eyebrow{font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:0;color:var(--teal-ink);margin-bottom:10px;display:block;}

/* ── FOOTER ── */
footer{background:var(--ink-fixed);color:rgba(255,255,255,.55);}
.footer-main{max-width:var(--max);margin:0 auto;padding:64px clamp(16px,4vw,56px) 52px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px;}
.footer-brand .footer-logo{height:44px;width:auto;margin-bottom:20px;}
/* .62 et non .4 : à 40 % le texte tombait à 3,69:1 sur le fond du pied de
   page, en échec AA sur les seize pages. À 62 % il est à 6,7:1. */
.footer-brand p{font-size:.84rem;line-height:1.7;color:rgba(255,255,255,.62);max-width:260px;}
.footer-col h3{font-family:'Outfit',sans-serif;font-weight:700;font-size:.67rem;text-transform:uppercase;letter-spacing:1.8px;color:color-mix(in srgb,var(--sea) 78%,white);margin-bottom:18px;}
.footer-col a{display:block;font-size:.84rem;color:rgba(255,255,255,.48);margin-bottom:10px;transition:color .2s;}
.footer-col a:hover{color:var(--sea);}
.footer-contact p{font-size:.84rem;line-height:1.7;}
.footer-contact a{display:inline;color:var(--sea);}
.footer-partners-strip{background:var(--cream-fixed);padding:22px clamp(16px,4vw,56px);}
.footer-partners-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;}
/* Ce bandeau a un fond `--cream-fixed`, CLAIR dans les deux thèmes. Le token
   --teal-ink s'éclaircit en thème sombre : il donnait 2,99:1 ici. On fige la
   couleur sur --ink-fixed, comme le fond. */
.footer-partners-label{font-family:'Outfit',sans-serif;font-weight:700;font-size:.66rem;text-transform:uppercase;letter-spacing:1.8px;color:var(--teal-ink-fixed);flex-shrink:0;}
.footer-logos-row{display:flex;gap:36px;align-items:center;flex-wrap:wrap;justify-content:center;}
.footer-logos-row picture{display:inline-flex;align-items:center;transition:opacity .2s,transform .2s;}
.footer-logos-row picture:hover{opacity:.7;transform:translateY(-1px);}
.footer-logos-row img{height:42px;width:auto;display:block;}
.footer-bottom{border-top:1px solid color-mix(in srgb,var(--teal) 22%,transparent);}
.footer-bottom-inner{max-width:var(--max);margin:0 auto;padding:22px clamp(16px,4vw,56px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:.79rem;}
.footer-legal-links{display:inline-flex;gap:8px;flex-wrap:wrap;}
.footer-legal-links a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s;}
.footer-legal-links a:hover{color:var(--sea);text-decoration:underline;}

/* ── BACK TO TOP ── */
/* visibility en plus de l'opacité : invisible, le bouton ne doit pas recevoir le focus clavier. */
.back-to-top{position:fixed;bottom:28px;right:28px;z-index:var(--z-back-to-top);background:var(--teal);color:white;border:none;border-radius:50%;width:48px;height:48px;font-size:1rem;cursor:pointer;box-shadow:0 4px 20px color-mix(in srgb,var(--teal) 40%,transparent);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,transform .3s;display:flex;align-items:center;justify-content:center;}
.back-to-top.visible{opacity:1;visibility:visible;pointer-events:auto;}
.back-to-top:hover{transform:translateY(-2px);}
.back-to-top:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 8px var(--ink-fixed);}

/* ── RESPONSIVE ── */
/* Menu burger jusqu'à 1140 px : la barre complète mesure 1 098 px (1 130 px
   avec ses marges), elle sortait de l'écran entre 961 et 1 100 px. Au-delà,
   header.compact (posée par js/main.js) prend le relais si le texte s'élargit. */
@media(max-width:1140px){
  nav{display:none;}
  .hamburger{display:flex;}
  header .nav-cta,header .nav-espace{display:none;}
  header{padding:7px 6px 7px 14px;}
}
header.compact nav,header.compact .nav-espace{display:none;}
/* Bouton « Appeler » de l'en-tête (décision N11, 20/10/2026) : sous 1 140 px, le
   numéro n'était visible qu'en ouvrant le menu. Corail = « appeler » (DESIGN.md §2).
   Hors des animations de l'en-tête : sa cible de 44 px ne doit jamais rétrécir. */
.nav-appel{display:none;align-items:center;justify-content:center;gap:7px;flex-shrink:0;white-space:nowrap;min-width:44px;min-height:44px;padding:0 16px;margin-left:8px;border-radius:999px;background:var(--coral-deep);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:0 4px 12px color-mix(in srgb,var(--coral) 28%,transparent);transition:background .25s var(--ease),transform .2s var(--ease);}
.nav-appel svg{width:18px;height:18px;stroke-width:1.75;flex-shrink:0;}
.nav-appel:hover{background:var(--coral-hover);}
.nav-appel:active{transform:scale(.97);}
.nav-appel:focus-visible{outline:3px solid var(--ink-fixed);outline-offset:3px;}
@media(max-width:1140px){.nav-appel{display:inline-flex;}}
header.compact .nav-appel{display:inline-flex;}
/* Sans JavaScript (plan 3.2) : le bouton menu et la bascule de thème ne peuvent
   rien faire. Ils disparaissent, et un lien « Menu » mène au plan du site du
   pied de page (#plan-du-site), présent sur les 16 pages. */
.menu-sans-js{display:none;}
html:not(.js) header .theme-toggle{display:none;}
@media(max-width:1140px){
  html:not(.js) .hamburger{display:none;}
  html:not(.js) .menu-sans-js{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;margin-left:8px;flex-shrink:0;border-radius:999px;border:1px solid color-mix(in srgb,var(--ink-fixed) 14%,transparent);color:var(--ink-fixed);font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;text-decoration:none;}
  html:not(.js) .menu-sans-js:focus-visible{outline:3px solid var(--ink-fixed);outline-offset:3px;}
}
/* Très petits écrans : l'icône seule, le mot reste lu par les lecteurs d'écran. */
@media(max-width:374px){.nav-appel{padding:0;width:44px;}.nav-appel-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}}

header.compact .hamburger{display:flex;}
header.compact{padding:7px 6px 7px 14px;}
@media(max-width:960px){
  .footer-main{grid-template-columns:1fr 1fr;}
  .footer-bottom-inner{padding-bottom:88px;}  /* place du bouton « Retour en haut » (48 + 28 + 12 px) */
}
@media(max-width:600px){
  .footer-main{grid-template-columns:1fr;gap:32px;}
  /* Liens au doigt : zones de toucher de 44 px de haut (20-22 px auparavant). */
  .footer-col > a{padding:12px 0;margin-bottom:0;}
  .footer-legal-links{align-items:center;}
  .footer-legal-links a{padding:12px 0;}
  .footer-bottom-inner{flex-direction:column;text-align:center;}
  .footer-partners-inner{flex-direction:column;gap:18px;}
  .footer-logos-row{gap:24px;}
  .footer-logos-row img{height:34px;}
}

/* ── THEME TOGGLE — compact pill ── */
header .theme-toggle{background:none;border:1px solid color-mix(in srgb,var(--ink-fixed) 8%,transparent);border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-fixed);transition:border-color .25s var(--ease),background .25s var(--ease),width .45s var(--ease),height .45s var(--ease);flex-shrink:0;margin-left:6px;padding:0;}
header .theme-toggle:hover{border-color:color-mix(in srgb,var(--ink-fixed) 18%,transparent);background:color-mix(in srgb,var(--ink-fixed) 4%,transparent);}
.theme-toggle .theme-icon{display:inline-flex;width:16px;height:16px;}
.theme-toggle .theme-icon svg{width:100%;height:100%;}
/* Mobile menu version (separate, full-size) */
.mobile-menu .theme-toggle{background:none;border:1px solid color-mix(in srgb,var(--ink-fixed) 14%,transparent);border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-fixed);margin-top:18px;align-self:flex-start;}
/* Téléphones (après les règles du bouton, qu'elle doit surcharger) : la place manque pour quatre éléments. Le bouton de thème quitte la
   barre (il reste dans le menu) pour garder « Appeler » écrit en toutes lettres. */
@media(max-width:414px){header .theme-toggle{display:none;}}

/* ── SCROLL REVEAL : entrée sobre, 16 px, sans flou, 0,5 s ──
   (64 px + flou de 8 px en 0,9 s auparavant : trop appuyé pour ce public, et
   un flou animé coûte cher sur les téléphones d'entrée de gamme.)
   Le masquage est conditionné à la classe `js`, posée sur <html> par le script
   d'amorçage des 16 pages. Sans elle — JavaScript coupé, bloqué, ou en erreur
   avant l'IntersectionObserver — le contenu s'affiche normalement.
   Filet : la classe `js` arrive avec le script du <head>, mais si js/main.js
   ne suit pas (fichier bloqué, erreur, réseau lent), --reveal-filet passe de
   0 à 1 au bout de 3 s et tout s'affiche. main.js pose `reveal-pret` sur
   <html> juste après avoir lancé l'IntersectionObserver : la classe fige le
   filet s'il n'a pas encore joué (s'il a joué, le contenu reste affiché).
   L'animation vit sur <html>, jamais sur les blocs : une animation posée sur
   le bloc lui-même fausse le LCP que mesure Chrome. Les blocs déjà dans la
   fenêtre au chargement sont révélés par main.js sans transition. */
@property --reveal-filet{syntax:'<number>';inherits:true;initial-value:0;}
@keyframes reveal-filet{to{--reveal-filet:1;}}
.js{animation:reveal-filet 0s 3s forwards;}
.js.reveal-pret{animation-play-state:paused;}
.js .reveal{
  opacity:var(--reveal-filet,0);
  transform:translateY(calc(16px - var(--reveal-filet,0) * 16px));
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.reveal.revealed{opacity:1;transform:none;}
.reveal-d1{transition-delay:.1s;}

/* ── REVEAL EN CASCADE — conteneur observé par l'IO, enfants révélés en stagger ──
   Même entrée que .reveal (16 px, 0,5 s) pour grilles/listes de contenu.
   Delay plafonné : au-delà de 6 enfants, tout entre ensemble (≤.34s) pour ne
   jamais faire attendre une grille de 7-9 cartes/visages. Dégrade à 1 enfant. */
.js .reveal-cascade > *{opacity:var(--reveal-filet,0);transform:translateY(calc(16px - var(--reveal-filet,0) * 16px));transition:opacity .5s var(--ease),transform .5s var(--ease);}
.reveal-cascade.revealed > *{opacity:1;transform:none;}
.reveal-cascade.revealed > *:nth-child(1){transition-delay:.04s;}
.reveal-cascade.revealed > *:nth-child(2){transition-delay:.10s;}
.reveal-cascade.revealed > *:nth-child(3){transition-delay:.16s;}
.reveal-cascade.revealed > *:nth-child(4){transition-delay:.22s;}
.reveal-cascade.revealed > *:nth-child(5){transition-delay:.27s;}
.reveal-cascade.revealed > *:nth-child(6){transition-delay:.31s;}
.reveal-cascade.revealed > *:nth-child(n+7){transition-delay:.34s;}

/* ── ENTRÉE SÉQUENCÉE (heros) — mutualisé depuis index.css pour servir TOUTES les pages ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.fade{animation:fadeUp .7s ease both;}
.fade-1{animation-delay:.08s;}.fade-2{animation-delay:.18s;}.fade-3{animation-delay:.28s;}

@media(prefers-reduced-motion:reduce){
  /* Même poids que la règle qui masque : avec `.reveal` seul, elle l'emportait
     et le contenu restait caché jusqu'au défilement, ou pour toujours sans main.js. */
  .js .reveal{opacity:1;transform:none;transition:none;}
  .reveal-cascade > *{opacity:1!important;transform:none!important;transition:none!important;}
  .fade{animation:none!important;opacity:1;transform:none;}
  .nav-dropdown-menu{transition:none!important;}
  .form-feedback{transition:none!important;}
  .hamburger span{transition:none!important;}
  /* Hovers de cartes : neutralisés sous reduce (corrige l'oubli .person-card & co) */
  .card,.value-card,.figure-card,.person-card,.partner-card,.domain-block,.reason-card,.type-card,.info-block,.hv-bezel,.hv-card,.hv-kpi-card,.hv-sig{transition:none!important;}
  .card:hover,.value-card:hover,.figure-card:hover,.person-card:hover,.partner-card:hover,.domain-block:hover,.reason-card:hover,.type-card:hover,.info-block:hover,.hv-bezel:hover,.hv-card:hover,.hv-kpi-card:hover,.hv-sig:hover{transform:none!important;}
  /* Éléments internes animés au survol (icônes / avatars / numéros / liseré info-block) : aucun mouvement sous reduce */
  .card-icon,.value-icon,.figure-num,.person-card .avatar,.domain-block-title .icon,.hv-card-icon,.info-block::before{transition:none!important;}
  .card:hover .card-icon,.value-card:hover .value-icon,.figure-card:hover .figure-num,.person-card:hover .avatar,.domain-block:hover .domain-block-title .icon,.hv-card:hover .hv-card-icon{transform:none!important;}
  .info-block:hover::before{transform:translateX(-50%) scaleX(0)!important;}
  header,header .nav-logo-text,header nav a.nav-link,header .nav-dropdown-btn,header .nav-cta,header .theme-toggle{transition:none!important;animation:none!important;}
}

/* ── PRINT ── */
@media print{
  header,.back-to-top,.hamburger,.mobile-menu,.skip-link,.cta-bottom,.cta-equipe,.hv-cta{display:none!important;}
  /* Noir sur blanc partout : héros, fil d'Ariane et pied de page portent du
     texte blanc, qui disparaissait avec leur fond sur le papier. */
  *,*::before,*::after{color:#1a1a1a!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;}
  /* Les blocs que le défilement n'a pas encore révélés s'imprimaient vides. */
  .js .reveal,.js .reveal-cascade>*{opacity:1!important;transform:none!important;}
  body{font-size:11pt;padding-top:0!important;}
  body::before{display:none!important;}
  main{padding:20px 0;}
  footer{border-top:2px solid #333;}
  .footer-partners-strip{padding:14px 0;}
  [class*="card"],.info-block,.form-wrap,.types-section,.hv-bezel{break-inside:avoid;}
  .hv-hero,.page-hero,.hero-page,.legal-hero{padding:20px 0;}
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;}
  main a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:.8em;}
  img{max-width:100%!important;}
}

/* ── Phase 11 Wave 2 EMP-C — Tap targets ≥ 44×44 (WCAG 2.5.5 AAA) ── */
.hamburger{
  min-width:44px;min-height:44px;
  width:44px;height:44px;
}
header .theme-toggle{
  min-width:44px;min-height:44px;
  width:44px;height:44px;
}
@media(max-width:600px){
  .hamburger,header .theme-toggle{width:44px;height:44px;}
}

/* ── Focus visible enrichi (offset ≥ 3-4px sur cartes interactives) ──
   Pas de border-radius:inherit : la carte prenait le rayon nul de sa grille. */
.hv-card:focus-visible,
.reason-card:focus-visible,
.type-card:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:4px;
}
/* Couleur de l'anneau choisie selon le FOND qui l'entoure, jamais selon le
   thème (≥ 3:1 contre ce fond) : île claire fixe → --ink-fixed ; fond coloré
   ou sombre fixe → blanc ; carte qui s'inverse → --ink, qui s'inverse aussi. */
.hv-btn:focus-visible,
.nav-cta:focus-visible{outline:3px solid var(--ink-fixed);outline-offset:3px;}
.hv-about .hv-btn:focus-visible,
.hv-cta .hv-btn:focus-visible,
.cta-bottom a:focus-visible{outline:3px solid #fff;outline-offset:3px;}
.btn-submit:focus-visible,
.map-link:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
/* Pilule d'en-tête (fond clair fixe). Le sous-menu garde l'anneau teal. */
header > :focus-visible,
header nav > a:focus-visible,
.nav-dropdown-btn:focus-visible{outline-color:var(--ink-fixed);}
.cal-day.has-events:focus-visible{
  outline:3px solid var(--teal);
  outline-offset:3px;
}

/* ── Erreurs inline par champ (form a11y) ── */
.error-msg{
  display:block;
  font-size:.9rem;
  color:#c0392b;
  margin-top:4px;
  font-weight:500;
  line-height:1.4;
}
/* Rouge d'erreur thémé : #c0392b échoue l'AA sur fond sombre (2.72:1) → variante claire en sombre (5.30:1). */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .error-msg{color:#ff6b5e;}}
:root[data-theme="dark"] .error-msg{color:#ff6b5e;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .field-error{border-color:#ff6b5e!important;}:root:not([data-theme="light"]) .consent-label input.field-error{outline-color:#ff6b5e;}}
:root[data-theme="dark"] .field-error{border-color:#ff6b5e!important;}
:root[data-theme="dark"] .consent-label input.field-error{outline-color:#ff6b5e;}
/* L'attribut hidden doit masquer partout : un `display` de composant
   (.es-card flex, note d'orientation block…) l'emportait sur la règle du navigateur. */
[hidden]{display:none!important;}

/* ── Entrée douce du retour de formulaire (succès/erreur) — l'annonce ARIA reste immédiate ──
   @starting-style : progressive enhancement (navigateurs non-compatibles = apparition instantanée). */
.form-feedback{transition:opacity .2s var(--ease),transform .2s var(--ease);}
.form-feedback:not([hidden]){opacity:1;transform:none;}
@starting-style{.form-feedback:not([hidden]){opacity:0;transform:translateY(6px);}}

/* ── Visually-hidden utility (radio cards adhésion) ── */
.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── Back-to-top fade ── (visibility bascule en fin de fondu : la disparition reste progressive) */
.back-to-top{transition:opacity .3s ease,transform .3s ease,visibility .3s;}

/* ── Phase 11 Wave 3 EMP-G — Mobile menu stagger plus rapide ── */
.mobile-menu.open a:nth-child(1){transition-delay:.03s;}
.mobile-menu.open a:nth-child(2){transition-delay:.06s;}
.mobile-menu.open a:nth-child(3){transition-delay:.09s;}
.mobile-menu.open a:nth-child(4){transition-delay:.12s;}
.mobile-menu.open a:nth-child(5){transition-delay:.15s;}
.mobile-menu.open a:nth-child(6){transition-delay:.18s;}
.mobile-menu.open a:nth-child(7){transition-delay:.21s;}
.mobile-menu.open a:nth-child(8){transition-delay:.24s;}

/* Footer RGPD badge style */
.footer-rgpd-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  color:var(--sea);
  background:color-mix(in srgb,var(--teal) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--sea) 28%,transparent);
  padding:3px 10px;
  border-radius:999px;
  margin-right:8px;
}
.footer-rgpd-badge svg{flex-shrink:0;color:var(--sea);}

/* Mission conviction (presentation.html) */
.mission-conviction{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  line-height:1.5;
  color:var(--ink);
  text-wrap:balance;
  letter-spacing:-.01em;
  margin:0 0 28px;
  padding:18px 22px;
  background:color-mix(in srgb,var(--teal) 6%,transparent);
  border-left:4px solid var(--teal);
  border-radius:0 12px 12px 0;
}

@media (prefers-reduced-motion: reduce){
  .mobile-menu.open a{transition-delay:0s!important;}
}

/* ── FAQ accordion (COMPOSANT PARTAGÉ — rendu visible miroir du FAQPage JSON-LD) ──
   Utilisé sur l'accueil et 6 pages internes. Accent teal : le corail est réservé
   aux actions « appeler » et « adhérer » (DESIGN.md §2). */
.faq-section{max-width:820px;margin:72px auto 0;}
/* Accueil et Présentation : ces blocs sont enfants directs d'un <main> sans
   padding (ailleurs, .main-inner les borde). Ils touchaient les bords de
   l'écran et le pied de page. */
main > .faq-section,main > .cta-simple{width:calc(100% - 32px);margin-bottom:clamp(64px,9vw,120px);}
.faq-section h2{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:-.02em;color:var(--ink);margin-bottom:32px;text-wrap:balance;}
.faq-list{display:flex;flex-direction:column;gap:14px;}
.faq-item{
  background:var(--cream);
  border:1px solid color-mix(in srgb,var(--ink-fixed) 8%,transparent);
  border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px color-mix(in srgb,var(--ink-fixed) 6%,transparent);
  overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.faq-item[open]{
  border-color:color-mix(in srgb,var(--teal) 40%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 30px color-mix(in srgb,var(--teal) 12%,transparent);
}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  cursor:pointer;list-style:none;
  padding:22px 26px;
  font-family:'Outfit',sans-serif;font-size:1rem;font-weight:600;
  color:var(--ink);line-height:1.4;
  transition:color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'';flex:0 0 auto;
  width:11px;height:11px;
  border-right:2px solid var(--teal);
  border-bottom:2px solid var(--teal);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg);}
.faq-item summary:hover{color:var(--teal-ink);}
.faq-item summary:focus-visible{outline:3px solid var(--teal);outline-offset:-3px;border-radius:16px;}
.faq-answer{padding:0 26px 24px;}
.faq-answer p{font-size:1rem;color:var(--muted);line-height:1.7;margin:0;max-width:68ch;}
.faq-answer a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:2px;}
@media(prefers-reduced-motion:reduce){.faq-item,.faq-item summary,.faq-item summary::after{transition:none;}}


/* ── BANDEAU DE RÉASSURANCE DES FORMULAIRES ──
   Partagé par adherer.html et contact.html. Même colonne centrée de 820 px
   que le formulaire et la FAQ : un seul axe de lecture sous les cartes. */
.form-trust-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:820px;margin:0 auto 32px;
  padding:20px 24px;
  background:var(--sand);
  border:1px solid color-mix(in srgb,var(--ink-fixed) 8%,transparent);
  border-radius:18px;
}
.form-trust-item{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.form-trust-item svg{color:var(--teal-ink);margin-bottom:6px;}
.form-trust-item strong{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);}
.form-trust-item span{font-size:.9rem;color:var(--muted);line-height:1.5;}
@media(max-width:680px){.form-trust-grid{grid-template-columns:1fr;gap:12px;}}

/* ── CHAMPS FACULTATIFS ET AIDES DE SAISIE ── */
.field-opt{font-weight:400;color:var(--muted);font-size:.85em;}
.field-hint{display:block;font-size:.9rem;color:var(--muted);line-height:1.45;margin-top:5px;}

/* ── MOUVEMENT RÉDUIT — FILET GLOBAL ──
   Six feuilles (adherer, contact, domain, equipe, nos-actions, page-hero)
   n'avaient aucun bloc `prefers-reduced-motion` : les boutons continuaient de
   se soulever et de glisser pour une personne qui a demandé l'inverse au
   niveau du système. Les blocs ciblés qui précèdent restent utiles (ils
   neutralisent des transformations précises) ; celui-ci rattrape tout le
   reste, y compris les règles qui seront écrites plus tard.
   `.01ms` plutôt que `0` : l'événement `transitionend` continue de se
   déclencher, donc rien de ce qui en dépend ne reste bloqué. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── APPEL DE FIN DE PAGE (pages sans bande CTA de domaine) ──
   equipe, nos-actions, presentation et partenaires se terminaient sans aucune
   issue vers le contact : la personne arrivait au bout et devait remonter
   chercher le menu. Volontairement sobre, pour ne pas concurrencer les bandes
   colorées des pages domaine. */
.cta-simple{
  max-width:1280px;margin:72px auto 0;
  padding:36px clamp(24px,4vw,44px);
  background:var(--sand);
  border:1px solid color-mix(in srgb,var(--ink-fixed) 8%,transparent);
  border-radius:22px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
}
.cta-simple-text{flex:1 1 320px;min-width:0;}
.cta-simple h2{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.02em;
  color:var(--ink);margin:0 0 8px;line-height:1.15;
}
.cta-simple p{font-size:1rem;color:var(--muted);line-height:1.55;margin:0;}
.cta-simple-actions{display:flex;flex-wrap:wrap;gap:12px;}
.cta-simple-actions a{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 24px;border-radius:999px;
  font-family:'Outfit',sans-serif;font-weight:600;font-size:.95rem;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s;
  white-space:nowrap;
}
.cta-simple-actions a:first-child{background:var(--teal-ink-fixed);color:var(--cream-fixed);}
.cta-simple-actions a:first-child:hover{background:var(--teal-hover);transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--ink-fixed) 18%,transparent);}
.cta-simple-actions a.cta-simple-tel{
  background:transparent;color:var(--teal-ink);
  border:1.5px solid color-mix(in srgb,var(--teal-ink) 45%,transparent);
}
.cta-simple-actions a.cta-simple-tel:hover{border-color:var(--teal-ink);background:color-mix(in srgb,var(--teal-ink) 8%,transparent);}
@media(max-width:640px){
  .cta-simple{margin-top:52px;padding:28px 22px;}
  .cta-simple-actions{width:100%;}
  .cta-simple-actions a{flex:1 1 auto;justify-content:center;}
}

/* Note d'orientation sous un champ de choix (ex. sujet « Adhésion »). */
.field-hint--orientation{
  margin-top:8px;padding:9px 13px;border-radius:9px;
  background:color-mix(in srgb,var(--teal) 8%,var(--cream));
  border:1px solid color-mix(in srgb,var(--teal) 20%,transparent);
  color:var(--slate);
}
/* Un cran plus contrasté que --teal-ink : sur ce fond teinté, le token
   standard ne donnait que 4,45:1. */
.field-hint--orientation a{color:color-mix(in srgb,var(--teal) 52%,var(--ink));font-weight:600;text-decoration:underline;text-underline-offset:2px;}