/* ══════════════════════════════════════════════════════════════
   GDN — Test d'eligibilite (/fr/eligibilite)
   ──────────────────────────────────────────────────────────────
   Source : « GDN Eligibilite v2.dc.html » (projet Claude Design
   « Hero GDN moderne »). La maquette etait deja aux couleurs GDN,
   la transposition porte surtout sur la structure : styles inline
   et sc-if / sc-for deviennent du BEM .gdn-elig* et des gabarits
   remplis par src/js/eligibilite.js.

   Feuille chargee par la seule route `eligibilite` (router_fr.php).

   CONTRASTE : CETTE PAGE NE PREND PAS L'ENCRE DU SITE.
   Le gris-bleu --gdn-text-sec (#4a5565) tenait le seuil AA sur le
   papier -- 6,44:1 sur le pire pixel du mesh, compose sur blanc --
   mais servi en graisse 300 sur un fond teinte il a ete lu comme
   illisible par des utilisateurs. La mesure ne dit pas tout : un
   jambage Light delave ce qu'un ratio declare conforme.
   D'ou deux tokens locaux poses sur .gdn-elig, et rien entre eux :
     --gdn-elig-titre (#000) : titres, questions, chiffres du forfait
     --gdn-elig-texte (#111) : tout le texte de lecture, 16,09:1
   La hierarchie se fait desormais a la taille et a la graisse, pas
   au degrade de gris, et toute la copie passe de 300 a 400.
   Le fragment vert du verdict prend --gdn-green-hover (#146c43,
   5,50:1) et non --gdn-green, qui ne donnait que 3,86:1 : c'etait
   le texte le moins lisible de la page de resultat. Meme raison
   pour les libelles verts du recapitulatif, deja au vert fonce.
   Ces valeurs restent locales : le reste du site garde son encre.
   ══════════════════════════════════════════════════════════════ */

.gdn-elig {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* Meme fond mesh que tous les heros et bandeaux CTA du site : un seul
     token, un seul point de changement (cf. style.css). */
  background: var(--gdn-hero-fill);

  /* Encre de la page. Deux niveaux seulement, tous deux quasi noirs :
     la hierarchie se fait a la taille et a la graisse, plus au degrade de
     gris. Voir l'en-tete de la feuille pour le pourquoi. */
  --gdn-elig-texte: #111111;
  --gdn-elig-titre: #000000;
}

/* ─── En-tete reduit ─────────────────────────────────────────────
   Le logo seul, sans navigation : la page est un entonnoir, elle
   n'offre pas de sortie laterale. Le logo reste cliquable, c'est la
   seule porte, et elle est volontaire. */
.gdn-elig__head {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 28px 0;
}

.gdn-elig__logo {
  display: block;
  height: 30px;
  width: auto;
}

.gdn-elig__main {
  display: flex;
  flex-direction: column;
  gap: 44px;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 70px 28px 80px;
}

.gdn-elig__title {
  margin: 0;
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--gdn-elig-titre);
}

.gdn-elig__noscript {
  margin: 0;
  padding: 18px 22px;
  border: 1px dashed var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  background: rgba(255, 255, 255, .6);
  font-weight: 400;
  color: var(--gdn-elig-texte);
}

.gdn-elig__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ─── Progression ────────────────────────────────────────────── */
.gdn-elig__progress {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.gdn-elig__progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gdn-elig-texte);
}

.gdn-elig__bar {
  height: 6px;
  border-radius: 50px;
  background: rgba(24, 21, 21, .1);
  overflow: hidden;
}

.gdn-elig__bar-fill {
  height: 6px;
  width: 0;
  border-radius: 50px;
  background: var(--gdn-green);
  transition: width var(--gdn-transition-slow);
}

/* ─── Une etape : question ou resultat ──────────────────────────
   L'animation marque le changement d'ecran, qui se fait sans
   navigation : sans elle, le remplacement du contenu passe
   inapercu. Neutralisee plus bas si l'utilisateur demande moins
   de mouvement. */
.gdn-elig__step {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 12px;
  animation: gdnEligRise .38s ease both;
}

@keyframes gdnEligRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.gdn-elig__q-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gdn-elig__q-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--gdn-elig-titre);
  text-wrap: pretty;
}

.gdn-elig__q-help {
  margin: 0;
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--gdn-elig-texte);
}

/* ─── Les reponses ───────────────────────────────────────────── */
.gdn-elig__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gdn-elig__option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 19px 22px;
  border: 1.5px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  background: rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--gdn-transition),
              background-color var(--gdn-transition),
              transform var(--gdn-transition),
              box-shadow var(--gdn-transition);
}

.gdn-elig__option:hover {
  border-color: var(--gdn-green);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
}

/* Le focus clavier doit se voir : le hover seul laisserait la
   navigation au clavier sans repere. */
.gdn-elig__option:focus-visible {
  outline: 2px solid var(--gdn-green);
  outline-offset: 3px;
}

.gdn-elig__option:active { transform: translateY(0); }

.gdn-elig__option.is-selected {
  border-color: var(--gdn-green);
  background: rgba(233, 247, 240, .88);
}

.gdn-elig__option-dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1.5px solid rgba(119, 119, 119, .4);
  border-radius: 50%;
  background: transparent;
  transition: background-color var(--gdn-transition), border-color var(--gdn-transition);
}

/* La coche est l'icone du site, pas un glyphe unicode (html-conventions §10). */
.gdn-elig__option.is-selected .gdn-elig__option-dot {
  border-color: var(--gdn-green);
  background: var(--gdn-green) url("../images/icones_svg/icon_ok.svg") no-repeat center / 16px 16px;
}

.gdn-elig__option-label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gdn-elig-texte);
}

/* ─── Boutons-liens discrets (retour, recommencer) ───────────── */
.gdn-elig__link {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 400;
  color: var(--gdn-elig-texte);
  transition: color var(--gdn-transition);
}

.gdn-elig__link:hover { color: var(--gdn-green-hover, #146c43); }

.gdn-elig__link:focus-visible {
  outline: 2px solid var(--gdn-green);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Le verdict ─────────────────────────────────────────────── */
.gdn-elig__verdict {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gdn-elig__chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 17px;
  border: 1px solid rgba(24, 21, 21, .14);
  border-radius: 50px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gdn-elig-texte);
}

.gdn-elig__chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gdn-green);
}

.gdn-elig__verdict-title {
  margin: 0;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.02em;
  color: var(--gdn-elig-titre);
  text-wrap: pretty;
}

/* Le format ne doit pas se couper : « au format 3 / semaines / 5 000 € »
   se lisait comme trois fragments au lieu d'un seul. */
.gdn-elig__verdict-title strong {
  font-weight: 500;
  color: var(--gdn-green-hover, #146c43);
  white-space: nowrap;
}

.gdn-elig__verdict-text p {
  margin: 0 0 14px;
  max-width: 620px;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--gdn-elig-texte);
}

.gdn-elig__verdict-text p:last-child { margin-bottom: 0; }

/* ─── Le rappel du forfait ───────────────────────────────────── */
.gdn-elig__format {
  display: grid;
  /* TROIS colonnes explicites, jamais auto-fit : a trois elements, un
     auto-fit qui retombe sur deux colonnes laisse une cellule vide, et
     le fond de la grille (qui sert de filets) y transparait en gris.
     Trois, ou une seule ; jamais deux. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  background: var(--gdn-border);
  overflow: hidden;
}

.gdn-elig__format li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, .75);
}

.gdn-elig__format-val {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gdn-elig-titre);
  white-space: nowrap;
}

/* Le prix est le seul chiffre en gras, et en chasse fixe pour que
   les milliers ne dansent pas. */
.gdn-elig__format li:first-child .gdn-elig__format-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gdn-elig__format-lib {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdn-elig-texte);
}

/* ─── L'appel a l'action ─────────────────────────────────────── */
.gdn-elig__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding-top: 2px;
}

.gdn-elig__btn {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 50px;
  background: var(--gdn-green);
  color: #fff;
  font-size: .99rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(25, 135, 84, .3);
  transition: background-color var(--gdn-transition), transform var(--gdn-transition);
}

.gdn-elig__btn:hover,
.gdn-elig__btn:focus-visible {
  background: var(--gdn-green-hover, #146c43);
  color: #fff;
  transform: translateY(-2px);
}

.gdn-elig__btn:active { transform: translateY(0); }

.gdn-elig__micro {
  font-size: .85rem;
  font-weight: 400;
  color: var(--gdn-elig-texte);
}

/* ─── Le recapitulatif ───────────────────────────────────────── */
.gdn-elig__recap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--gdn-border);
}

.gdn-elig__recap-label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gdn-elig-texte);
}

.gdn-elig__recap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px 36px;
}

.gdn-elig__recap-grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gdn-elig__recap-cle {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Vert fonce du DS : --gdn-green ne donne que 4,3:1 sur ce fond,
     sous le seuil AA de 4,5:1 pour du texte de cette taille. */
  color: var(--gdn-green-hover, #146c43);
}

.gdn-elig__recap-val {
  font-size: .93rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--gdn-elig-texte);
}

/* ─── Les autres formats (profil C) ──────────────────────────── */
.gdn-elig__autres {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--gdn-border);
}

.gdn-elig__autres-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gdn-elig__autres-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 17px;
  border: 1px solid rgba(24, 21, 21, .18);
  border-radius: 40px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
  font-size: .88rem;
  font-weight: 400;
  color: var(--gdn-elig-texte);
  transition: border-color var(--gdn-transition);
}

.gdn-elig__autres-liens a:hover,
.gdn-elig__autres-liens a:focus-visible {
  border-color: var(--gdn-green);
  color: var(--gdn-elig-titre);
}

/* ─── Reprise ────────────────────────────────────────────────── */
.gdn-elig__reprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--gdn-border);
}

.gdn-elig__reprise .gdn-elig__link { align-self: auto; }

/* ─── Bandeau de confiance et pied ───────────────────────────── */
.gdn-elig__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
  font-weight: 400;
  text-align: center;
  color: var(--gdn-elig-texte);
}

.gdn-elig__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gdn-elig__trust img { width: 16px; height: 16px; }

.gdn-elig__foot {
  margin-top: auto;
  padding: 22px 28px 30px;
  text-align: center;
  font-size: .8rem;
  font-weight: 400;
  color: var(--gdn-elig-texte);
}

.gdn-elig__foot a {
  color: var(--gdn-elig-texte);
  text-decoration: underline;
}

.gdn-elig__foot a:hover { color: var(--gdn-green-hover, #146c43); }

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .gdn-elig__head { padding: 24px 20px 0; }
  .gdn-elig__main { gap: 32px; padding: 44px 20px 56px; }
  .gdn-elig__option { padding: 16px 18px; gap: 12px; }
  .gdn-elig__q-title { font-size: 1.25rem; }
  .gdn-elig__recap { margin-top: 32px; padding-top: 26px; }

  /* Le bouton prend toute la largeur : a cote de la micro-copie il
     tombait sous 220px utiles et coupait son libelle. */
  .gdn-elig__cta { gap: 12px; }
  .gdn-elig__btn { width: 100%; justify-content: center; text-align: center; }
}

/* Sous 640px, trois colonnes de chiffres ne tiennent plus : on empile. */
@media (max-width: 639.98px) {
  .gdn-elig__format { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Accessibilite : respecter le reglage systeme ───────────── */
@media (prefers-reduced-motion: reduce) {
  .gdn-elig__step { animation: none; }
  .gdn-elig__bar-fill { transition: none; }

  .gdn-elig__option,
  .gdn-elig__option:hover,
  .gdn-elig__btn,
  .gdn-elig__btn:hover {
    transform: none;
    transition: none;
  }
}