/* Page de garde - inscription (jauge, pot de miel, étapes 2-4, navigation).
   Porté de la maquette A (a.css). Chargé après garde.css. */

/* ── Jauge de force ────────────────────────────────────────────────── */
.ga-gauge{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-top:10px; }
.ga-gauge span{ height:3px; background:var(--ard-ink-4); transition:background-color var(--ard-tr); }
.ga-gauge[data-level="1"] span:nth-child(-n+1){ background:var(--ga-err); }
.ga-gauge[data-level="2"] span:nth-child(-n+2){ background:var(--ard-gold-text); }
.ga-gauge[data-level="3"] span:nth-child(-n+3),
.ga-gauge[data-level="4"] span{ background:var(--ard-accent); }
.ga-gauge-lbl{ margin-top:6px; font-size:13px; color:var(--ard-ink-3); }
/* Rien à juger tant que le champ est vide : la ligne garde sa place, sans texte. */
.ga-gauge-lbl[data-level="0"]{ visibility:hidden; }
.ga-gauge-lbl strong{ font-weight:700; color:var(--ard-ink-2); }
.ga-gauge-lbl[data-level="1"] strong{ color:var(--ga-err); }
.ga-gauge-lbl[data-level="2"] strong{ color:var(--ard-gold-text); }
.ga-gauge-lbl[data-level="3"] strong,
.ga-gauge-lbl[data-level="4"] strong{ color:var(--ard-accent-text); }
/* La règle des 8 caractères et la force partagent une ligne sous la jauge. */
.ga-help--row .ga-gauge-lbl{ margin-top:0; }

/* Étapes 2 à 4 sans chapeau (spec §5.2) : le titre garde l'écart qu'aurait laissé le chapeau. */
.ga-step > .ga-h1 + :not(.ga-lead){ margin-top:16px; }
@media (max-width:959px){
  .ga-step > .ga-h1 + :not(.ga-lead){ margin-top:12px; }
}

/* Parcours Google : « Ton compte » est franchi mais on n'y revient pas. */
.ga-som-row.is-done:disabled{ cursor:default; }
.ga-som-row.is-done:disabled:hover .ga-som-nom{ color:inherit; text-decoration:none; }

/* ── Emplacement du widget Cloudflare Turnstile (300 x 65) : réservé avant son chargement ── */
.ga-ts-slot{ min-height:65px; }

/* Champ piège */
.ga-hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ── Étape 2 : avatar et pseudo ────────────────────────────────────── */
.ga-avatar{ display:flex; align-items:center; gap:18px; }
.ga-avatar-cadre{
  position:relative; width:96px; height:96px; flex:none;
  display:grid; place-items:center; overflow:hidden;
  border:1px dashed var(--ard-rule-strong); border-radius:2px;
  background:var(--ard-bg-2); color:var(--ard-ink-2); cursor:pointer;
  transition:border-color var(--ard-tr),color var(--ard-tr);
}
.ga-avatar-cadre:hover{ border-color:var(--ard-ink-2); color:var(--ard-ink); }
.ga-avatar-cadre.has-img{ border-style:solid; }
#avatar:focus-visible + .ga-avatar-cadre{ outline:2px solid var(--ard-accent); outline-offset:3px; }
/* Photo refusée : le cadre prend la bordure d'erreur des champs texte (garde.css). */
#avatar[aria-invalid="true"] + .ga-avatar-cadre{ border-color:var(--ga-err); }
#avatar[aria-invalid="true"]:focus-visible + .ga-avatar-cadre{ outline-color:var(--ga-err); }
.ga-avatar-cadre:hover .ga-avatar-pastille{ color:var(--ard-ink); border-color:var(--ard-ink-2); }
/* L'initiale du pseudo occupe le cadre ; une photo choisie la remplace. */
.ga-avatar-cadre.has-img .ini{ display:none; }
/* L'appareil photo, en pastille dans le coin : le signe « clique ici ». */
.ga-avatar-pastille{
  position:absolute; right:4px; bottom:4px; width:28px; height:28px;
  display:grid; place-items:center;
  background:var(--ard-bg); border:1px solid var(--ard-rule-strong); border-radius:2px;
  color:var(--ard-ink-2); transition:color var(--ard-tr),border-color var(--ard-tr);
}
.ga-avatar-pastille .ga-ic{ width:16px; height:16px; }
.ga-avatar-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ga-avatar-txt{ min-width:0; }

.ga-prefix{
  display:flex; align-items:stretch; height:50px;
  background:var(--ard-bg-2); border:1px solid var(--ard-rule-strong); border-radius:2px;
  transition:border-color var(--ard-tr),background-color var(--ard-tr);
}
.ga-prefix:hover{ border-color:var(--ard-ink-2); }
.ga-prefix:focus-within{ outline:2px solid var(--ard-accent); outline-offset:2px; border-color:var(--ard-accent); background:var(--ard-bg-3); }
.ga-prefix.is-invalid{ border-color:var(--ga-err); }
.ga-prefix.is-invalid:focus-within{ outline-color:var(--ga-err); }
.ga-prefix-at{
  width:44px; flex:none; display:grid; place-items:center;
  border-right:1px solid var(--ard-rule); color:var(--ard-ink-2);
  font-family:var(--ard-serif); font-size:19px;
}
.ga-input--bare{ height:auto; border:0; background:transparent; min-width:0; flex:1 1 auto; }
.ga-input--bare:focus{ outline:none; background:transparent; }

/* ── Étape 3 : choix ───────────────────────────────────────────────── */
.ga-choices{ display:grid; gap:8px; }
.ga-choices--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.ga-choices--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ga-choice{ display:block; position:relative; cursor:pointer; }
.ga-choice-in{
  display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px 12px;
  border:1px solid var(--ard-rule-strong); border-radius:2px; background:transparent;
  font-weight:600; color:var(--ard-ink-2); text-align:center;
  transition:border-color var(--ard-tr),background-color var(--ard-tr),color var(--ard-tr);
}
.ga-choice:hover .ga-choice-in{ border-color:var(--ard-ink-2); color:var(--ard-ink); }
.ga-choice input:checked + .ga-choice-in{
  border-color:var(--ard-accent); background:var(--ard-bg-2); color:var(--ard-ink);
  box-shadow:inset 0 0 0 1px var(--ard-accent);
}
.ga-choice input:focus-visible + .ga-choice-in{ outline:2px solid var(--ard-accent); outline-offset:3px; }
.ga-fieldset.is-invalid .ga-choice-in{ border-color:var(--ga-err); }
.ga-choice-in--age{ flex-direction:column; gap:2px; min-height:72px; }
.ga-age-num{
  font-family:var(--ard-serif); font-variation-settings:'SOFT' 34,'WONK' 1;
  font-size:22px; font-weight:600; line-height:1.1; color:var(--ard-ink);
  font-variant-numeric:lining-nums;
}
.ga-age-nom{ font-size:14px; font-weight:500; color:var(--ard-ink-2); }

/* ── Étape 4 : stepper et récapitulatif ────────────────────────────── */
.ga-stepper-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ga-stepper{ display:flex; align-items:stretch; border:1px solid var(--ard-rule-strong); border-radius:2px; }
.ga-step-btn{
  width:52px; height:56px; display:grid; place-items:center;
  border:0; background:transparent; color:var(--ard-ink); cursor:pointer;
  transition:background-color var(--ard-tr);
}
.ga-step-btn:hover{ background:var(--ard-bg-2); }
.ga-step-btn:disabled{ color:var(--ard-ink-3); opacity:.5; cursor:not-allowed; background:transparent; }
.ga-step-val{
  min-width:76px; display:grid; place-items:center;
  border-left:1px solid var(--ard-rule); border-right:1px solid var(--ard-rule);
  font-family:var(--ard-serif); font-variation-settings:'SOFT' 34,'WONK' 1;
  font-size:30px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums lining-nums;
  color:var(--ard-ink); user-select:none;
}
.ga-step-unit{ font-size:16px; color:var(--ard-ink-2); }

/* 32 px au-dessus du filet comme sous le dernier poste : les marges voisines (22 et 30) fusionnent avec celles-ci. */
.ga-recap{ margin:32px 0; padding-top:18px; border-top:1px solid var(--ard-rule-strong); }
.ga-recap .ga-kick{ margin-bottom:6px; }
.ga-recap-liste{ margin:0; }
.ga-recap-row{ display:flex; align-items:baseline; gap:10px; padding:8px 0; min-width:0; }
.ga-recap-row dt{ display:flex; align-items:baseline; gap:8px; flex:1; color:var(--ard-ink-2); font-size:15px; }
/* Points de suite en pseudo-élément : un élément entre dt et dd serait du HTML invalide. */
.ga-recap-row dt::after{ content:""; flex:1; border-bottom:1px dotted var(--ard-rule-strong); }
.ga-recap-row dd{
  margin:0; flex:0 1 auto; min-width:0; text-align:right;
  font-weight:600; color:var(--ard-ink); overflow-wrap:anywhere;
}

/* ── Navigation entre étapes ───────────────────────────────────────── */
.ga-nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:30px; padding-top:20px; border-top:1px solid var(--ard-rule);
}
.ga-nav #ga-next{ margin-left:auto; }
.ga-btn[hidden]{ display:none; }
/* Le lien vers la connexion, sur la ligne de Suivant à l'étape 1 (cible 44 px partagée avec .ga-foot dans garde.css). */
.ga-deja{ font-size:15px; color:var(--ard-ink-2); }
.ga-deja[hidden]{ display:none; }
/* « Rejoindre la brigade » ne tient pas sur une ligne à côté de Retour :
   l'action passe en pleine largeur, Retour dessous. */
@media (max-width:479px){
  .ga-nav{ flex-direction:column-reverse; align-items:stretch; gap:8px; }
  .ga-nav #ga-next{ margin-left:0; width:100%; }
  .ga-nav #ga-prev{ align-self:flex-start; }
}
@media (max-width:359px){
  .ga-choices--3{ grid-template-columns:minmax(0,1fr); }
}