/* Parcours guidé des portes (public/parcours.js) puis question de la page du choix (public/parcours-choix.js). Ces
   règles ne touchent que les éléments que les scripts posent : sans script, la porte garde le formulaire d'une page.
   Cartes blanches au contour bleu pâle, contour bleu du site quand elles sont choisies, comme les pastilles des
   formulaires (formulaires.css) ; cibles d'au moins 2,75 rem. */

/* Page du choix : la question, ses deux réponses, l'aperçu des étapes sous chaque porte. */
.choix-question { margin: var(--e-4) 0 0; }
.choix-question-texte { margin: 0 0 var(--e-2); font-weight: 600; font-size: 1.1rem; color: var(--encre); }
.choix-reponses { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin: 0; padding: 0; list-style: none; }
.choix-reponse { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.1rem; border: 2px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--accent); font: inherit; font-weight: 600; font-size: 1.02rem; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--duree-rapide) var(--courbe-sortie), color var(--duree-rapide) var(--courbe-sortie); }
.choix-reponse:hover { background: var(--accent-pale); }
.choix-reponse[aria-pressed="true"] { background: var(--accent); color: #fff; }
.choix-reponse:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.apercu-parcours { padding: var(--e-3) var(--e-4); border-radius: var(--rayon-petit); background: var(--fond); }
.porte .apercu-parcours .apercu-titre { margin: 0 0 var(--e-2); font-size: 0.95rem; font-weight: 600; color: var(--gris); }
.apercu-parcours ol { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.apercu-parcours li { counter-increment: etape; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; color: var(--encre); }
.apercu-parcours li::before { content: counter(etape); display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent-pale); color: var(--accent); font-size: 0.8rem; font-weight: 700; }
.porte { transition: background-color var(--duree-rapide) var(--courbe-sortie), border-color var(--duree-rapide) var(--courbe-sortie), box-shadow var(--duree-rapide) var(--courbe-sortie); }
.porte-choisie { border-color: var(--accent); box-shadow: 0 10px 28px rgba(0, 104, 179, 0.16); }
/* La porte écartée garde ses couleurs, donc son contraste : seul son filet passe au bleu pâle. */
.porte-ecartee { border-top-color: var(--filet); background: var(--fond); }

/* Parcours d'une porte */
.parcours { margin-top: var(--e-6); scroll-margin-top: calc(var(--hauteur-bandeau) + var(--e-3)); }
.parcours .formulaire { margin-top: 0; }
.parcours-tete { margin: 0 0 var(--e-4); }
.parcours-compte { margin: 0 0 var(--e-2); font-size: 0.95rem; font-weight: 600; color: var(--gris); }
.parcours-progression { height: 0.5rem; border-radius: 999px; background: var(--accent-pale); overflow: hidden; }
.parcours-barre { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left center; transform: scaleX(0); }
.parcours-jalons { display: none; margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.parcours-jalons li { flex: 1 1 0; min-width: 0; font-size: 0.88rem; color: var(--gris); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parcours-jalons li.fait { color: var(--accent); }
.parcours-jalons li.courant { color: var(--encre); font-weight: 700; }
@media (min-width: 48rem) { .parcours-jalons { display: flex; gap: var(--e-2); } }

.parcours-etape { padding: var(--e-5); border: 2px solid var(--filet); border-radius: var(--rayon-grand); background: var(--surface); }
.parcours-etape[hidden] { display: none; }
.parcours-titre { margin: 0 0 var(--e-3); font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.6rem); line-height: 1.25; color: var(--encre); }
.parcours-titre:focus { outline: none; }
.parcours-titre:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.parcours-duree { margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); border-left: 4px solid var(--accent); border-radius: 0 var(--rayon-petit) var(--rayon-petit) 0; background: var(--accent-pale); font-size: 1rem; line-height: 1.5; }
.parcours-corps > .champ:last-child { margin-bottom: 0; }
.parcours-erreur { margin: var(--e-3) 0 0; }

.parcours-cartes { display: grid; gap: var(--e-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 36rem) { .parcours-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.parcours-carte { position: relative; display: flex; align-items: flex-start; gap: var(--e-3); min-height: 3rem; padding: 0.75rem 1rem; border: 2px solid var(--filet); border-radius: var(--rayon); background: var(--surface); cursor: pointer; transition: border-color var(--duree-rapide) var(--courbe-sortie), background-color var(--duree-rapide) var(--courbe-sortie); }
.parcours-carte:hover { border-color: var(--accent); }
/* 24 pixels au moins, le minimum des cibles tactiles (WCAG 2.2, 2.5.8), relevé par axe-core quand une visite guidée montre cette étape. */
.parcours-carte input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--accent); }
.parcours-carte input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.parcours-carte-texte { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--encre); overflow-wrap: anywhere; }
.parcours-carte:has(input:checked) { border-color: var(--accent); background: var(--accent-pale); }
.parcours-en-erreur .parcours-carte { border-color: var(--erreur); }
.parcours-badge { align-self: flex-start; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700; }
.parcours-badge[hidden], .parcours-accroche[hidden] { display: none; }
.parcours-accroche { display: block; overflow: hidden; font-weight: 400; font-size: 0.97rem; line-height: 1.45; color: var(--gris); }

.parcours-guide { margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--rayon-petit); background: var(--fond); }
.parcours-guide-titre { margin: 0 0 var(--e-1); font-size: 0.95rem; font-weight: 600; color: var(--gris); }
.parcours-guide-sujet { margin: var(--e-1) 0 0; line-height: 1.5; }
.parcours-pistes { margin: var(--e-4) 0 0; border: 2px solid var(--filet); border-radius: var(--rayon); background: var(--surface); }
.parcours-pistes > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 3rem; padding: var(--e-2) var(--e-4); cursor: pointer; font-weight: 600; color: var(--encre); list-style: none; }
.parcours-pistes > summary::-webkit-details-marker { display: none; }
.parcours-pistes > summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); }
.parcours-pistes[open] > summary::after { content: "−"; }
.parcours-pistes ul { margin: 0 var(--e-4) var(--e-3); padding-left: 1.2em; }
.parcours-pistes ul:empty { display: none; }
.parcours-pistes li + li { margin-top: var(--e-2); }
.parcours-conseils { color: var(--gris); }

.parcours-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-5); }
.parcours-nav .parcours-continuer, .parcours-nav [type="submit"] { margin-left: auto; }
@media (max-width: 30rem) { .parcours-nav { flex-direction: column-reverse; align-items: stretch; } .parcours-nav .bouton { width: 100%; margin-left: 0; } }
.parcours-statut { margin: var(--e-3) 0 0; font-weight: 600; color: var(--accent); }
.parcours-statut:empty { display: none; }

.parcours-relecture { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--e-4); border-top: 1px solid var(--filet); }
.parcours-relecture dt { margin: var(--e-3) 0 0; font-size: 0.92rem; font-weight: 600; color: var(--gris); }
.parcours-relecture dd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); margin: 0; padding: 0 0 var(--e-3); border-bottom: 1px solid var(--filet); }
.parcours-valeur { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.parcours-modifier { min-height: 2.75rem; padding: 0 0.25rem; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.parcours-modifier:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.parcours-autres[hidden] { display: none; }
.parcours-confirmation { margin: var(--e-3) 0 0; font-weight: 600; color: var(--succes); }
.parcours-confirmation:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .choix-reponse, .porte, .parcours-carte { transition: none; } }

/* Remerciement d'un envoi par le parcours (public/parcours-merci.js) : la coche qui confirme l'envoi, les autres sujets. */
.merci-coche { display: block; width: 3.5rem; height: 3.5rem; margin: 0 0 var(--e-3); }
.merci-coche circle { fill: var(--fond-succes); stroke: var(--succes); stroke-width: 2.5; }
.merci-coche path { fill: none; stroke: var(--succes); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.merci-autres-sujets .actions-merci { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.parcours-donnees { margin: var(--e-2) 0 var(--e-4); }
.parcours-donnees .mention-donnees { margin: 0; padding: 0 var(--e-4) var(--e-3); border-top: 0; }
.parcours-corps .champ[hidden] { display: none; }
/* Sur un téléphone ou une tablette debout, les exemples de la page se retirent quand le parcours est posé : l'étape du
   message en garde la copie, la première question remonte d'autant (audit de forme, D9). Sans script, rien ne change. */
@media (max-width: 63.99rem) { .page-porte:has(> .parcours) > .exemples-porte { display: none; } }

/* Entrée de la sous-porte des professionnels du droit, sous la carte de la porte des citoyens (page du choix), puis
   sa ligne dans les chiffres de participation, comptée dans la porte qui la précède. */
.porte-sous-porte { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--filet); }
.porte-sous-porte h4 { margin: 0 0 var(--e-2); font-size: 1.05rem; }
.porte-sous-porte p { margin: 0 0 var(--e-3); }
.participation-sous-ligne dt { padding-left: var(--e-4); }