/* Parcours en étapes : page contact, test d'accessibilité, choix de l'accueil. Jetons et courbe de style.css. */

/* ---------- Mise en page ---------- */
.parcours{position:relative;z-index:1;padding-block:clamp(32px,5vw,64px) clamp(80px,9vw,128px)}
.parcours .tete{max-width:720px;margin:20px 0 40px}
.parcours h1{font-size:clamp(36px,4.4vw,56px);margin:0 0 14px}
.parcours-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,72px);align-items:start}
.parcours-grille.seule{grid-template-columns:minmax(0,1fr);max-width:860px}
.cote{position:sticky;top:calc(var(--entete) + 24px);display:grid;gap:20px;padding:24px;border-radius:16px;background:var(--fond-2)}
.cote h2{font:600 17px/1.3 "Funnel Display",sans-serif;letter-spacing:-.01em;margin:0}
.cote p{margin:0;color:var(--texte-2);font-size:15px}
.cote .coord div{grid-template-columns:88px 1fr}

/* ---------- Barre d'étapes (N étapes) ---------- */
.parcours .chemin{grid-template-columns:repeat(var(--n),1fr)}
.parcours .chemin::before,.parcours .chemin::after{right:calc(100% / var(--n) - 13px)}

/* ---------- Étapes ---------- */
.etape h2{font:500 clamp(24px,2.4vw,30px)/1.15 "Funnel Display",sans-serif;letter-spacing:-.02em;margin:0 0 24px;scroll-margin-top:calc(var(--entete) + 24px)}
.etape h2:focus,.etape h3:focus{outline:0}
/* « Étape k sur N » lu au focus du titre ; la barre d'étapes le montre à l'œil */
.etape h2 .num{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.etape legend{margin:0;padding:0}
.etape .groupe{margin-bottom:24px}
.etape .groupe>legend{font:500 14.5px/1.4 "Funnel Sans",sans-serif;margin-bottom:10px}
:root:not(.js) .etape+.etape{margin-top:40px;padding-top:36px;box-shadow:0 -1px 0 var(--filet)}
:root:not(.js) .etape h2 .num{display:none}
.js .sans-js{display:none!important}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.champ .facultatif{font-weight:400;color:var(--texte-3)}

/* ---------- Choix en cartes : vrais boutons radio habillés ---------- */
.options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.options.court{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.option{position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 44px 12px 12px;border-radius:12px;background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet-fort);font-size:15px;line-height:1.3;color:var(--texte);cursor:pointer;transition:box-shadow var(--t1) var(--courbe),background-color var(--t1) var(--courbe),transform .15s var(--courbe)}
.court .option{min-height:52px;padding-left:16px}
.option input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.option .ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--fond-2);color:var(--texte-2);transition:background-color var(--t1) var(--courbe),color var(--t1) var(--courbe)}
.option .ico svg{width:20px;height:20px}
.option::after{content:"";position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--fond);box-shadow:inset 0 0 0 1.5px var(--filet-fort);transition:box-shadow var(--t1) var(--courbe)}
.option:hover,a.option:focus-visible{box-shadow:inset 0 0 0 1px var(--texte-3);background:var(--fond-2)}
.option:hover .ico,a.option:focus-visible .ico{background:var(--fond);color:var(--texte)}
.option:active{transform:scale(.99)}
.option:has(input:checked){background:var(--fond);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-voile)}
.option:has(input:checked)::after{box-shadow:inset 0 0 0 5px var(--accent)}
.option:has(input:checked) .ico{background:var(--accent-voile);color:var(--accent-fonce)}
.option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.option:has(input[aria-invalid="true"]){box-shadow:inset 0 0 0 1.5px var(--erreur);background:var(--erreur-fond)}
.option:has(input:disabled){cursor:not-allowed;color:var(--texte-3);background:transparent;box-shadow:inset 0 0 0 1px var(--filet);text-decoration:line-through}
.option:has(input:disabled)::after{opacity:0}
.groupe .erreur{margin-top:10px}

/* Cartes-liens de l'accueil : même carte, flèche à la place du rond */
a.option::after{content:none}
a.option .fl{position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--accent)}
a.option .fl .tige{opacity:0;transition:opacity var(--t1) var(--courbe),transform var(--t1) var(--courbe)}
a.option .fl .pointe{transition:transform var(--t1) var(--courbe)}
a.option:is(:hover,:focus-visible) .fl .tige{opacity:1;transform:translateX(4px)}
a.option:is(:hover,:focus-visible) .fl .pointe{transform:translateX(4px)}
.panneau{position:relative;border-radius:16px;background:var(--fond);box-shadow:var(--ombre-fenetre);padding:32px}
.panneau .options{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.contact .options-titre{font:600 20px/1.2 "Funnel Display",sans-serif;margin:0 0 6px}
.contact .options-aide{margin:0 0 20px;color:var(--texte-2);font-size:15px}

/* Proposition du test quand « Audit RGAA » est choisi */
.astuce{display:none;gap:12px;align-items:flex-start;margin:20px 0 0;padding:14px 16px;border-radius:12px;background:var(--accent-voile);color:var(--texte);font-size:15px}
.astuce svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--accent-fonce)}
.formulaire:has(input[data-slug="rgaa"]:checked) .astuce{display:flex}

/* ---------- « Autre » : champ « Précisez » dévoilé par la CSS seule (:has), juste sous le groupe ---------- */
.precisez{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;margin-top:0;transition:grid-template-rows var(--t1) var(--courbe),opacity var(--t1) var(--courbe),margin-top var(--t1) var(--courbe),visibility 0s var(--t1)}
.precisez>div{min-height:0;overflow:hidden;padding:6px;margin:-6px}
.precisez .champ{margin:0}
fieldset:has(input[data-precision]:checked)>.precisez{grid-template-rows:1fr;opacity:1;visibility:visible;margin-top:14px;transition-delay:0s,0s,0s,0s}
@media (prefers-reduced-motion:reduce){.precisez{transition:none}}

/* ---------- Récapitulatif : chaque ligne a son « Modifier » ---------- */
.parcours .recap-form div{grid-template-columns:150px minmax(0,1fr);align-items:baseline}
.parcours .recap-form dd{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.parcours .recap-form dd span[data-recap]{min-width:0}
.parcours .recap-form .btn-texte{flex:none}

/* ---------- Confirmation ---------- */
.ok h2{font:500 26px/1.15 "Funnel Display",sans-serif;letter-spacing:-.02em;margin:0 0 8px}
.ok h2:focus{outline:0}
.ok .actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

/* ---------- Test : fenêtre de navigateur dessinée ---------- */
.navigateur .barre{height:40px;gap:8px}
.navigateur .adresse{flex:1;min-width:0;display:flex;align-items:center;gap:8px;margin-left:10px;padding:6px 12px;border-radius:999px;line-height:1.2;background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet);color:var(--texte-2);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.navigateur .adresse svg{flex:none;width:12px;height:12px;color:var(--texte-3)}
.navigateur .adresse span{margin:0;overflow:hidden;text-overflow:ellipsis}
.apercu{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--fond)}
.apercu iframe{position:absolute;inset:0 auto auto 0;width:200%;height:200%;border:0;transform:scale(.5);transform-origin:0 0;background:var(--fond);transition:opacity var(--t2) var(--courbe)}
.apercu[data-etat="charge"] iframe{opacity:0}
.apercu[data-etat="repli"] iframe{visibility:hidden}
.apercu .esquisse{position:absolute;inset:0;display:grid;grid-template-rows:auto auto 1fr;gap:14px;padding:18px;transition:opacity var(--t2) var(--courbe)}
.apercu[data-etat="ok"] .esquisse{opacity:0;pointer-events:none}
.esquisse i{display:block;border-radius:6px;background:var(--fond-2)}
.esquisse .l1{height:14px;width:100%}
.esquisse .l2{height:72px;width:68%}
.esquisse .l3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:none}
.esquisse .l3 i{height:100%;min-height:60px}
.apercu[data-etat="charge"] .esquisse i{animation:respire 1.6s var(--courbe) infinite alternate}
@keyframes respire{to{background:var(--fond-3)}}
.apercu .message{position:absolute;left:50%;top:50%;width:min(420px,calc(100% - 32px));transform:translate(-50%,-50%);display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:12px;background:var(--fond);box-shadow:var(--ombre-fenetre);font-size:14.5px;color:var(--texte)}
.apercu .message svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--accent-fonce)}
.apercu:not([data-etat="repli"]) .message{display:none}
.etat-apercu{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;margin:12px 0 0;font-size:14px;color:var(--texte-2)}
.etat-apercu p{margin:0}

/* ---------- Test : connexion Google ---------- */
.btn-google{gap:10px;padding:0 20px;background:var(--fond);color:var(--texte);box-shadow:inset 0 0 0 1px var(--filet-fort)}
.btn-google:hover,.btn-google:focus-visible{box-shadow:inset 0 0 0 1px var(--texte);background:var(--fond-2)}
.btn-google svg{width:18px;height:18px;flex:none}
.google{display:grid;gap:8px;justify-items:start;margin-bottom:8px}
.google p{margin:0;font-size:13.5px;color:var(--texte-3)}
.ou{margin:16px 0;font-size:13.5px;color:var(--texte-3)}
.statut{margin:0 0 16px;font-size:14px;color:var(--texte-2)}
.statut:empty{display:none}

/* ---------- Test : note ---------- */
.resultat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 40px;align-items:center;margin-bottom:28px}
.jauge{position:relative;width:168px;height:168px}
.jauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.jauge circle{fill:none;stroke-width:10}
.jauge .fond-jauge{stroke:var(--fond-3)}
.jauge .arc{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray 1.2s var(--courbe)}
.jauge .valeur{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:500 44px/1 "Funnel Display",sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.jauge .valeur small{display:block;margin-top:4px;font:400 14px/1 "Funnel Sans",sans-serif;letter-spacing:0;color:var(--texte-3)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#FFF4DC;color:#7A4A00;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px rgba(122,74,0,.25)}
.familles{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px}
.familles li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:15px}
.familles b{font-weight:600;font-variant-numeric:tabular-nums}
.familles .piste-note{grid-column:1/-1;height:8px;border-radius:8px;background:var(--fond-3);overflow:hidden}
.familles .piste-note i{display:block;height:100%;width:calc(var(--v,0) * 1%);border-radius:8px;background:var(--accent);transition:width 1.2s var(--courbe)}
.note-exemple{margin:0 0 24px;font-size:16px;color:var(--texte-2)}
.suite-audit{margin:0 0 20px;font-size:16px}

/* ---------- Test : créneaux de rendez-vous (style de la scène CHU) ---------- */
.rdv-bloc{margin-top:28px;padding-top:28px;box-shadow:0 -1px 0 var(--filet)}
.rdv-bloc h3{margin:0 0 18px;scroll-margin-top:calc(var(--entete) + 24px)}
.rdv-bloc>legend{float:left;width:100%}
.rdv-bloc>legend+*{clear:both}
.jours{grid-template-columns:repeat(5,minmax(0,1fr))}
.jours .option{flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;padding:10px 12px}
.jours .option::after{top:14px;right:10px;margin:0;width:14px;height:14px}
.jours .option:has(input:checked)::after{box-shadow:inset 0 0 0 4px var(--accent)}
.jours .j{font-size:13px;color:var(--texte-3)}
.jours .option b{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums}
.heures{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.heures .option{justify-content:center;min-height:44px;padding:8px;font-variant-numeric:tabular-nums}
.heures .option::after{content:none}
.heures .option:has(input:checked){background:var(--accent);color:var(--accent-contraste);box-shadow:none}
.coordonnees-rdv{margin:0 0 20px}
.indicatif{margin:-8px 0 20px;font-size:13.5px;color:var(--texte-3)}

/* ---------- Petits écrans ---------- */
@media (max-width:960px){
  .parcours-grille{grid-template-columns:minmax(0,1fr)}
  .cote{position:static}
}
@media (max-width:640px){
  .parcours .chemin li{font-size:0;gap:0}
  .parcours .chemin li span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .deux,.resultat{grid-template-columns:1fr}
  .panneau{padding:22px 18px}
  .jauge{width:144px;height:144px}
  .jours{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .etat-apercu{flex-direction:column;align-items:flex-start}
  .parcours .recap-form div{grid-template-columns:1fr}
}
@media print{
  .cote{position:static;background:none;padding:0}
}