/* ==========================================================================
   VTCPass — moteur : onboarding, questions, corrections, Jour J, verdict, radar
   ========================================================================== */
.etape-compteur { margin: 0; font-weight: 700; color: var(--texte-doux); }
.etapes-barre { display: flex; gap: var(--e-2); list-style: none; padding: 0; margin: 0; max-width: none; }
.etapes-barre li { flex: 1; height: 6px; border-radius: 3px; background: var(--ligne); margin: 0; }
.etapes-barre li.faite { background: var(--marque); }
.legende-question { font-family: var(--police-titre); font-weight: 800; font-size: var(--t-2); line-height: 1.2; margin-bottom: var(--e-4); }
:lang(ar) .legende-question { font-family: var(--police-arabe); font-weight: 700; line-height: 1.5; }
.champ-indente { margin: var(--e-2) 0; padding-inline-start: var(--e-6); }
.h-petit { font-size: var(--t-0); font-weight: 700; font-family: var(--police-titre); margin-bottom: var(--e-2); }

.serie-entete { display: grid; gap: var(--e-3); }
.progression { display: grid; gap: var(--e-1); }
.progression-texte { margin: 0; font-weight: 700; color: var(--texte-doux); }
.progression-route { width: 100%; height: 12px; display: block; }
.route-fond { fill: var(--ligne); }
.route-faite { fill: var(--marque); }
.route-ligne { stroke: var(--surface); stroke-width: 1; stroke-dasharray: 3 3; }

.chrono {
  display: flex; align-items: center; gap: var(--e-2); margin: 0;
  padding: var(--e-2) var(--e-4); border-radius: var(--r-panneau);
  background: var(--asphalte); color: var(--bitume-clair); font-weight: 700;
}
.chrono .chrono-valeur { margin-inline-start: auto; font-size: var(--t-2); }
.chrono-fin { background: var(--rouge-interdiction); color: var(--blanc-panneau); }

.question { display: grid; gap: var(--e-4); }
.question fieldset { margin: 0; }
.enonce { font-size: var(--t-1); font-weight: 700; line-height: 1.4; margin: 0 0 var(--e-3); max-width: none; }
.consigne { color: var(--texte-doux); margin-bottom: var(--e-3); }

.propositions { display: grid; gap: var(--e-3); list-style: none; padding: 0; margin: 0; max-width: none; }
.proposition {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cible-confort);
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--ligne);
  border-radius: var(--r-bouton);
  background: var(--surface);
  margin: 0;
}
label.proposition { cursor: pointer; }
.proposition input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.proposition-lettre {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 2px solid var(--gris-glissiere); border-radius: 6px;
  font-family: var(--police-titre); font-weight: 800;
}
label.proposition:hover { border-color: var(--marque); }
.proposition:has(input:checked) { border-color: var(--marque); box-shadow: inset 0 0 0 2px var(--marque); }
.proposition:has(input:checked) .proposition-lettre { background: var(--marque); border-color: var(--marque); color: var(--sur-marque); }
.proposition:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.proposition .icon { width: 1.5rem; height: 1.5rem; }

.propositions-corrigees .juste { border-color: var(--succes); }
.propositions-corrigees .juste .proposition-lettre { background: var(--succes); border-color: var(--succes); color: var(--blanc-panneau); }
.propositions-corrigees .juste .icon { color: var(--succes); }
.propositions-corrigees .choisie-fausse { border-color: var(--danger); }
.propositions-corrigees .choisie-fausse .proposition-lettre { border-color: var(--danger); color: var(--danger); }
.propositions-corrigees .choisie-fausse .icon { color: var(--danger); }
.pourquoi {
  grid-column: 1 / -1; margin: 0; padding: var(--e-3) var(--e-4);
  border-radius: var(--r-panneau); background: var(--fond); border-inline-start: 4px solid var(--danger);
  transform-origin: top;
}
.pourquoi.deplie { animation: deplie 260ms ease-out both; }
@keyframes deplie { from { opacity: 0; transform: scaleY(.6); } to { opacity: 1; transform: none; } }

.resultat { display: flex; align-items: center; gap: var(--e-3); margin: 0; font-size: var(--t-1); }
.resultat .icon { width: 2rem; height: 2rem; }
.correction.est-juste { border-color: var(--succes); }
.correction.est-juste.anime { animation: bordure-verte 700ms ease-out; }
@keyframes bordure-verte { 0% { box-shadow: 0 0 0 0 rgba(15, 122, 80, .55); } 100% { box-shadow: 0 0 0 14px rgba(15, 122, 80, 0); } }

.regle { padding: var(--e-4); border-radius: var(--r-panneau); background: var(--fond); border-inline-start: 6px solid var(--marque); }
.regle p { margin: 0; }
.regle p + p { margin-top: var(--e-2); }
.regle-titre { font-weight: 700; font-family: var(--police-titre); }
.explication { display: grid; gap: var(--e-3); }
.explication-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.explication-entete h2 { margin: 0; }
.bascule-explication { display: inline-flex; border: 2px solid var(--marque); border-radius: var(--r-bouton); overflow: hidden; }
.bascule-explication button {
  min-width: var(--cible); min-height: 40px; padding: 0 var(--e-3);
  border: 0; background: transparent; color: var(--texte); font: inherit; font-weight: 700; cursor: pointer;
}
.bascule-explication button[aria-pressed="true"] { background: var(--marque); color: var(--sur-marque); }
.bascule-explication button:lang(ar) { font-family: var(--police-arabe); }
.explication-texte p { margin: 0; }
.source { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; color: var(--texte-doux); }
.source .icon { margin-top: .2em; }
.apercu { padding: var(--e-4); border-radius: var(--r-panneau); border: 2px dashed var(--ligne); }
.apercu p { margin: 0; }
.apercu p + p { margin-top: var(--e-2); }
.signaler { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center; margin: 0; }

.mots-cles-titre { font-weight: 700; margin-bottom: var(--e-2); }
.mots-cles ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); max-width: none; }
.mots-cles li { margin: 0; }
.mot > summary {
  list-style: none; display: inline-flex; align-items: center; min-height: var(--cible);
  padding: 0 var(--e-3); border-radius: 999px; border: 2px solid var(--ligne);
  background: var(--surface); cursor: pointer; font-weight: 700;
}
.mot > summary::-webkit-details-marker { display: none; }
.mot[open] > summary { border-color: var(--marque); }
.mot-traduction { display: block; padding: var(--e-1) var(--e-3); font-size: var(--t-1); }

.qrc-comparaison { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .qrc-comparaison { grid-template-columns: 1fr 1fr; } }
.qrc-texte { margin: 0; padding: var(--e-3); border-radius: var(--r-panneau); background: var(--fond); min-height: 4rem; }
.qrc-modele { border-inline-start: 4px solid var(--succes); }
.qrc-bloc { display: grid; gap: var(--e-3); }
.qrc-bloc legend { margin-bottom: var(--e-2); }

.bilan-score { font-size: var(--t-1); }
.bilan-score .chiffre { font-size: var(--t-4); margin-inline-end: var(--e-2); }
.bilan-liste { padding: 0; list-style: none; display: grid; gap: var(--e-2); max-width: none; }
.bilan-liste li { display: flex; gap: var(--e-3); align-items: flex-start; margin: 0; padding: var(--e-3); background: var(--surface); border-radius: var(--r-bouton); border: 1px solid var(--ligne); }
.bilan-liste .icon { width: 1.5rem; height: 1.5rem; margin-top: .1em; }

@media (min-width: 48rem) { .liste-panneaux.liste-panneaux-simple { grid-template-columns: 1fr; } }
.panneau-detail { display: block; font-family: var(--police-texte); font-weight: 400; font-size: var(--t-moins-1); opacity: .9; }

/* Verdict : les 7 panneaux se retournent un par un, puis le verdict s'affiche */
.verdict-tete { padding: var(--e-5); border-radius: var(--r-feuille); background: var(--surface); border: 2px solid var(--ligne); animation: apparait 400ms ease-out 1800ms both; }
.verdict-tete h1 { margin: 0; font-size: var(--t-3); }
.verdict-tete .signal svg { width: 2.5rem; height: 2.5rem; }
.verdict-admissible { border-color: var(--succes); }
.verdict-elimine { border-color: var(--danger); }
.verdict-moyenne { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-3); margin: 0; }
.verdict-moyenne .chiffre { font-size: var(--t-4); }
.verdict-moyenne small { font-size: var(--t-1); }
.verdict-panneaux { list-style: none; padding: 0; display: grid; gap: var(--e-3); max-width: none; perspective: 900px; }
.verdict-panneaux li { margin: 0; animation: retourne 520ms cubic-bezier(.2, .7, .3, 1) both; }
.verdict-panneaux li:nth-child(1) { animation-delay: 100ms; }
.verdict-panneaux li:nth-child(2) { animation-delay: 300ms; }
.verdict-panneaux li:nth-child(3) { animation-delay: 500ms; }
.verdict-panneaux li:nth-child(4) { animation-delay: 700ms; }
.verdict-panneaux li:nth-child(5) { animation-delay: 900ms; }
.verdict-panneaux li:nth-child(6) { animation-delay: 1100ms; }
.verdict-panneaux li:nth-child(7) { animation-delay: 1300ms; }
@keyframes retourne { from { opacity: 0; transform: rotateX(-90deg); } to { opacity: 1; transform: none; } }
@keyframes apparait { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bandeau-risque ul { margin: var(--e-2) 0 0; padding-inline-start: var(--e-5); }
.bandeau-risque p { margin: 0; }

.radar { margin: 0; padding: var(--e-4); background: var(--surface); border-radius: var(--r-feuille); border: 1px solid var(--ligne); }
.radar svg { width: 100%; height: auto; display: block; }
.radar figcaption { margin-top: var(--e-2); }
.radar-cartouche { fill: var(--bleu-autoroute); }
.radar-lettre { fill: var(--blanc-panneau); font-family: var(--police-titre); font-weight: 800; font-size: 16px; }
.radar-piste { fill: var(--fond); stroke: var(--ligne); }
.radar-valide { fill: var(--vert-direction); }
.radar-risque { fill: var(--ambre-chantier); }
.radar-elimine { fill: var(--rouge-interdiction); }
.radar-seuil { stroke: var(--texte); stroke-width: 2.5; }
.radar-note { fill: var(--texte); font-family: var(--police-titre); font-weight: 800; font-size: 17px; }

.carte-verdict { width: 100%; max-width: 360px; height: auto; border-radius: var(--r-feuille); display: block; margin-inline: auto; background: var(--asphalte); }
.carte-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }