/* ---------------------------------------------------------------------------
 * Parcours d'éligibilité à l'adhésion — habillage.
 *
 * Le parcours ne réinvente rien : `.field`, `.label`, `.input`, `.select`,
 * `.btn`, `.btn-accent`, `.btn-ghost` et `.eyebrow` viennent du design system
 * (`mist-ds.css`). Ce fichier ne pose QUE ce que le design system n'a pas :
 * la carte du parcours, le fil 1-2-3, les secteurs en cases cliquables et les
 * quatre formes de réponse.
 *
 * ⚠️ NOMS DE VARIABLES — toutes préfixées `--mist-elig-`. Le projet a payé le
 * jour où le design system a déclaré `--display`, un nom qu'Elementor emploie
 * pour le `display` de ses conteneurs : la police est partie en serif sur
 * 42 éléments de l'accueil, sans une erreur. Deux verrous tiennent la règle
 * (`test_collision_variables_css.py`, `test_eligibilite.py`).
 *
 * ⚠️ SPÉCIFICITÉ — la base atomique d'Elementor porte ses règles en (0,2,0)
 * (`.elementor .e-*-base`). Toute règle de mise en page qui doit gagner sur
 * elle est donc écrite en `.elementor .mist-elig …`, à (0,3,0) au minimum.
 *
 * Le parcours est posé sur le bandeau dégradé `.cta-band` de la page
 * /employeurs/adhesion/ : la carte est BLANCHE, comme l'était le formulaire
 * qu'elle remplace. Elle reste lisible sur fond clair (shortcode ailleurs).
 * --------------------------------------------------------------------------- */

.mist-elig {
  --mist-elig-espace: 18px;
  --mist-elig-cran-taille: 26px;

  position: relative;
  background: var(--grad-card, #fff);
  border: 1px solid var(--line, #E7E6F2);
  border-radius: var(--r-l, 30px);
  padding: clamp(22px, 3vw, 32px);
  box-shadow: var(--shadow-soft);
  color: var(--ink, #1F2444);
  text-align: left;
}

/* Le conteneur Elementor impose `display:block` et un `padding:10px` à ses
   enfants : sans cette reprise, la carte hérite d'un décalage de 10 px que
   rien n'explique à la lecture. */
.elementor .mist-elig { display: block; width: auto; max-width: none; }

/* ⚠️ LA CARTE EST BLANCHE, MAIS ELLE VIT DANS UN BANDEAU FONCÉ.
   `mist-ds.css:173` pose `.cta-band .eyebrow{color:#ffd9b0}` — un orange très
   clair, fait pour du texte sur fond bleu. Notre sur-titre en hérite et
   devient illisible sur le blanc de la carte : contraste ~1,3:1. Aucune sonde
   ne le voit (ce n'est ni une erreur, ni un débordement, ni une image cassée),
   seule la capture l'a montré, le 07/09.
   Sélecteur en (0,3,0) pour battre le (0,2,0) de `.cta-band .eyebrow` par la
   SPÉCIFICITÉ et non par l'ordre de chargement — l'ordre se réarrange, la
   spécificité non. */
.mist-elig .eyebrow.mist-elig-eyebrow { color: var(--orange, #E94E1B); }
.mist-elig .eyebrow.mist-elig-eyebrow::before { background: var(--orange, #E94E1B); }

.mist-elig-titre {
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.22;
  margin: 10px 0 8px;
  color: var(--ink, #1F2444);
  /* La carte fait 492 px dans la colonne de droite : sans équilibrage, « Votre
     entreprise peut-elle adhérer ? » laissait le « ? » seul sur sa ligne.
     `balance` répartit au lieu de remplir — et les navigateurs qui l'ignorent
     retombent simplement sur le comportement d'avant. */
  text-wrap: balance;
}
.mist-elig-accroche {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #4A5076);
  margin: 0 0 var(--mist-elig-espace);
}

/* ------------------------------------------ la colonne de gauche qui suit */

/* Depuis que le formulaire de demande est revenu SOUS le parcours (07/09), la
   colonne droite de `/employeurs/adhesion/` fait 2 031 px contre 393 à gauche :
   **1 638 px d'aplat bleu vide**, mesurés. La colonne de texte suit donc le
   défilement au lieu de rester en haut.

   ⚠️ CETTE RÈGLE EST DANS *CETTE* FEUILLE ET PAS DANS `mist-formulaires.css`,
   et c'est tout l'intérêt : `.mist-form-grid` sert sur CINQ pages publiées
   (340, 342, 345, 349, 354). Or `mist-eligibilite.css` n'est mis en file que
   par le widget et le shortcode — la règle ne peut donc atteindre que les
   pages qui portent le parcours. Le périmètre est tenu par le chargement, pas
   par un sélecteur qu'on espère assez étroit.

   (Le header est `position:static`, mesuré : rien à compenser en haut.) */
@media (min-width: 901px) {
  /* ⚠️ SANS CETTE LIGNE, LE `sticky` CI-DESSOUS EST INERTE — et silencieusement.
     `.cta-band` porte `overflow:hidden` (mist-ds.css:171) pour que son dégradé
     radial reste dans le `border-radius`. Or un ancêtre en `overflow:hidden`
     crée un conteneur de défilement, ce qui neutralise le `position:sticky` de
     tous ses descendants. Mesuré : la propriété était bien calculée à
     « sticky », et la colonne partait quand même hors écran.
     `clip` découpe exactement pareil SANS créer ce conteneur. Les navigateurs
     qui l'ignoreraient retombent sur `hidden` : le sticky redevient inerte,
     donc on retrouve le comportement d'avant — jamais un affichage cassé. */
  .elementor .e-con.mist-form-band { overflow: clip; }

  .elementor .e-con.mist-form-grid > .mist-form-col:first-child {
    position: sticky;
    top: 40px;
  }
}

/* ------------------------------------------------------------- le fil 1-2-3 */

.mist-elig-fil {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line, #E7E6F2);
}
/* Les crans ne sont PAS étirés (`flex:1`) : en 1440 chacun occupait un tiers
   de la carte et son libellé se retrouvait à 400 px de son numéro, comme trois
   étiquettes flottant sans lien. Serrés à gauche, ils se lisent comme un fil. */
.mist-elig-cran {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  min-width: 0;
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-muted, #8B91AE);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mist-elig-cran b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--mist-elig-cran-taille);
  height: var(--mist-elig-cran-taille);
  border-radius: 50%;
  background: var(--blue-pale, #E4E1F2);
  color: var(--ink-soft, #4A5076);
  font-size: 12.5px;
  font-weight: 800;
}
.mist-elig-cran.is-active { color: var(--ink, #1F2444); }
.mist-elig-cran.is-active b { background: var(--orange, #E94E1B); color: #fff; }
.mist-elig-cran.is-fait b { background: var(--green, #6FBF8A); color: #0f3322; }

/* ------------------------------------------------------------- les panneaux */

.mist-elig-panneau { display: flex; flex-direction: column; gap: 14px; }
.mist-elig-question {
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 800;
  font-size: 16.5px;
  line-height: 1.3;
  margin: 0;
  color: var(--ink, #1F2444);
  /* Même raison que le titre : en 390 la carte ne fait plus que 274 px, et
     « Où se situe votre établissement ? » y laissait le « ? » seul sur sa
     ligne. */
  text-wrap: balance;
}
/* Le focus est posé par le script à chaque changement d'étape : sans anneau
   visible, un utilisateur au clavier ne sait pas où il vient d'atterrir.
   ⚠️ `fit-content` sur le titre : un `h4` est un bloc, et l'anneau traçait
   sinon un cadre sur TOUTE la largeur de la carte — on aurait juré une zone de
   saisie. Le `legend` de l'étape 2 est exclu : le contraindre en largeur
   déforme le cadre du `fieldset`. */
h4.mist-elig-question { width: fit-content; max-width: 100%; }
.mist-elig-question:focus-visible {
  outline: 2px solid var(--blue, #3E4982);
  outline-offset: 4px;
  border-radius: 4px;
}

.mist-elig-aide {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft, #4A5076);
  min-height: 1em; /* réserve la place : sinon le bouton saute à l'apparition du message */
}
.mist-elig-aide.is-alerte { color: var(--orange, #E94E1B); font-weight: 600; }

.mist-elig-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mist-elig-actions .btn { flex: 0 0 auto; }
.mist-elig .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* -------------------------------------------------- étape 2 : les secteurs */

.mist-elig-secteurs { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mist-elig-secteur {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid var(--line, #E7E6F2);
  border-radius: var(--r-s, 14px);
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.4;
  transition: border-color .18s, background .18s;
}
.mist-elig-secteur:hover { border-color: var(--blue-soft, #A69DCD); }
/* La bordure suit le bouton radio natif : on garde le contrôle du système
   (donc son comportement clavier et son rendu à fort contraste) au lieu de le
   masquer pour en redessiner un. */
.mist-elig-secteur:has(input:checked) {
  border-color: var(--orange, #E94E1B);
  background: var(--orange-pale, #FDEEE9);
}
.mist-elig-secteur input { margin-top: 2px; flex-shrink: 0; accent-color: var(--orange, #E94E1B); }
.mist-elig-secteur:focus-within { outline: 2px solid var(--blue, #3E4982); outline-offset: 2px; }

/* -------------------------------------------------- étape 3 : les réponses */

.mist-elig-reponse {
  border: 1.5px solid var(--line, #E7E6F2);
  border-left-width: 5px;
  border-radius: var(--r-s, 14px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mist-elig-verdict {
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  margin: 0;
  color: var(--ink, #1F2444);
}
.mist-elig-precision, .mist-elig-centre {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft, #4A5076);
}
.mist-elig-centre-label { font-weight: 700; color: var(--ink, #1F2444); }
.mist-elig-centre-lien { font-weight: 700; color: var(--orange, #E94E1B); text-underline-offset: 3px; }

/* Éligible : vert. Orienté ailleurs : bleu, PAS rouge — un employeur qui relève
   d'un autre service n'a rien fait de mal, et une bordure d'alerte le lui
   dirait. Hors territoire : ambre, c'est le seul cas qui appelle une action. */
.mist-elig-eligible,
.mist-elig-eligible-centre-indetermine { border-color: var(--green, #6FBF8A); background: var(--green-pale, #E5F4EB); }
.mist-elig-pst,
.mist-elig-sante-btp,
.mist-elig-sist { border-color: var(--blue-soft, #A69DCD); background: var(--blue-mist, #F2F0F9); }
.mist-elig-cp-inconnu { border-color: var(--yellow, #F6A124); background: var(--yellow-pale, #FEF3DF); }
.mist-elig-cp-invalide,
.mist-elig-commune-requise,
.mist-elig-secteur-requis,
.mist-elig-secteur-inconnu,
.mist-elig-donnees-absentes { border-color: var(--orange-soft, #EE6F5F); background: var(--orange-pale, #FDEEE9); }

/* ------------------------------------------ la case, les documents, le CTA */

.mist-elig-engagement { display: flex; flex-direction: column; gap: 10px; }
.mist-elig-case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #1F2444);
  cursor: pointer;
}
.mist-elig-case input { margin-top: 3px; flex-shrink: 0; accent-color: var(--orange, #E94E1B); }
.mist-elig-case:focus-within { outline: 2px solid var(--blue, #3E4982); outline-offset: 3px; border-radius: 4px; }
/* Le lien vers les statuts précède la case : on ne demande pas de certifier
   avoir lu un document avant de l'avoir proposé. Il porte le libellé complet
   (« … de MIST Normandie (PDF) »), donc il se lit comme une phrase et non
   comme une mention de bas de page — d'où la taille du corps de texte. */
.mist-elig-liens { margin: 0; font-size: 14px; line-height: 1.5; }
.mist-elig-doc { font-weight: 600; color: var(--blue, #3E4982); text-underline-offset: 3px; }

/* ⚠️ AUCUNE règle ne « grise » le bouton : il n'existe pas tant que la case
   n'est pas cochée (attribut `hidden`, posé par le script). Une règle
   d'apparence ici redeviendrait le verrou apparent d'un bouton bien réel. */
.mist-elig-cta { align-self: flex-start; }

.mist-elig-contact { display: flex; flex-direction: column; gap: 6px; }
.mist-elig-contact-intro {
  margin: 0;
  font-family: var(--mist-font-display, 'Mulish', 'Century Gothic', 'AppleGothic', sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-soft, #4A5076);
}
.mist-elig-contact-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mist-elig-contact-liste li { display: flex; align-items: baseline; gap: 8px; font-size: 14.5px; }
.mist-elig-contact-liste a { color: var(--blue, #3E4982); font-weight: 600; text-underline-offset: 3px; }
.mist-elig-dept {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-muted, #8B91AE);
  min-width: 62px;
}

.mist-elig-noscript { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-soft, #4A5076); }

/* --------------------------------------------------------------- 390 et en dessous */

@media (max-width: 600px) {
  .mist-elig { padding: 20px 16px; border-radius: var(--r-m, 22px); }
  /* Trois crans côte à côte tiennent en 390 UNIQUEMENT sans leur libellé :
     à 358 px utiles, « Commune / Secteur / Réponse » débordait. Le numéro et
     l'état colorié suffisent à situer, le titre de l'étape dit le reste. */
  .mist-elig-cran { font-size: 0; gap: 0; justify-content: center; }
  .mist-elig-cran b { font-size: 12.5px; }
  .mist-elig-fil { gap: 10px; justify-content: flex-start; }
  /* ⚠️ AUCUNE surcharge de la largeur des boutons ici, et c'est délibéré.
     Le design system pose `.btn{width:100%}` sous 700 px (mist-ds.css:293) et
     prévoit `.btn-auto` pour en sortir : les boutons du site sont pleine
     largeur en mobile. Les contraindre ici ferait du parcours la seule
     exception de la page — un écart qu'aucune maquette ne demande. */
  .mist-elig-actions { flex-direction: column; align-items: stretch; }
  .mist-elig-cta { align-self: stretch; }
  .mist-elig-reponse { padding: 15px 16px; }
  .mist-elig-contact-liste li { flex-direction: column; gap: 1px; }
  .mist-elig-dept { min-width: 0; }
}