/* Gabarit « La course contre toi-même » (1er nov. 2026) : compléments de sandbox.css. Uniquement ses variables : le jeu
   reste juste dans les trois designs (Autocollants / Studio / Affiche, blocs en fin de fichier). Deux couloirs : le camion
   de l'élève et le « fantôme » (même camion en pointillé) de sa meilleure course. */
.petit { font-size: .95rem; margin: 0; opacity: .85; }
.grand { font-family: var(--police-titre); font-size: 1.3rem; font-weight: 700; }
.choix-parties { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.liste-parties { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 460px; }
.partie-bouton { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; text-align: left; }
.partie-num { font-family: var(--police-titre); white-space: nowrap; }
.partie-etoiles { display: inline-flex; gap: 2px; }
.partie-etoiles svg { width: 18px; height: 18px; }
.partie-titre { font-size: 1.3rem; }

/* La piste */
.piste { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 620px; padding: 10px 12px; border: var(--trait) solid var(--encre); border-radius: 16px;
  background: repeating-linear-gradient(90deg, var(--creme) 0 40px, var(--papier) 40px 80px); }
.piste.secoue { animation: secoue .3s; }
@keyframes secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.couloir { position: relative; height: 44px; border-bottom: 3px dashed var(--encre); }
.couloir:last-of-type { border-bottom: 0; }
.couloir-nom { position: absolute; right: 22px; top: -2px; font-size: .75rem; font-weight: 800; opacity: .7; }
.vehicule { position: absolute; bottom: 2px; left: 0; width: 70px; height: 38px; transition: left .35s ease-out; }
.vehicule svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arrivee { position: absolute; top: 6px; bottom: 6px; right: 12px; width: 10px; background: repeating-conic-gradient(var(--encre) 0 25%, var(--papier) 0 50%) 0 0 / 10px 10px; border-radius: 2px; }
.cam-corps { fill: var(--corail); stroke: var(--encre); stroke-width: 2.5; }
.cam-cabine { fill: var(--corail); stroke: var(--encre); stroke-width: 2.5; stroke-linejoin: round; }
.cam-vitre { fill: var(--ciel); stroke: var(--encre); stroke-width: 1.5; }
.cam-echelle { fill: var(--gris); stroke: var(--encre); stroke-width: 2; }
.cam-gyro { fill: var(--bleu); stroke: var(--encre); stroke-width: 1.5; }
.cam-roue { fill: var(--encre); stroke: var(--gris); stroke-width: 2; }
.fantome { opacity: .55; }
.fantome .cam-corps, .fantome .cam-cabine, .fantome .cam-echelle, .fantome .cam-gyro { fill: var(--papier); stroke-dasharray: 4 3; }
.fantome .cam-vitre { fill: var(--papier); }
.fantome .cam-roue { fill: var(--papier); stroke: var(--encre); stroke-dasharray: 3 2; }
@media (prefers-reduced-motion: reduce) { .vehicule { transition: none; } .piste.secoue { animation: none; } }

.tableau-bord { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 18px; }
.chrono { margin: 0; font-family: var(--police-titre); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.record { margin: 0; font-weight: 700; opacity: .8; }
.depart { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 90px; }
.decompte { margin: 0; font-family: var(--police-titre); font-size: 2.6rem; font-weight: 700; min-height: 1.2em; }

/* La question */
.question-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 560px; }
.question { margin: 0; font-family: var(--police-titre); font-size: 1.6rem; font-weight: 700; }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.choix-bouton { width: 100%; min-height: 54px; font-size: 1.15rem; white-space: normal; touch-action: manipulation; }
.saisie { display: flex; gap: 8px; width: 100%; max-width: 360px; }
.saisie input { flex: 1; min-width: 0; padding: 10px 12px; border: 2px solid var(--encre); border-radius: 12px; font-family: var(--police-titre); font-size: 1.4rem; text-align: center; background: var(--papier); color: var(--encre); }
.saisie input:focus { outline: 3px solid var(--bleu); outline-offset: 2px; }

.resultat { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.explications { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 560px; text-align: left; }
.explications li { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 2px solid var(--encre); border-left: 7px solid var(--pc); border-radius: 14px; background: var(--creme); }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.bilan-parties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 480px; }
.bilan-parties li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; text-align: left; border: 2px solid var(--encre); border-radius: 12px; background: var(--creme); }

@media (max-width: 480px) {
  .vehicule { width: 54px; height: 30px; }
  .couloir { height: 36px; }
  .question { font-size: 1.35rem; }
  .chrono { font-size: 1.6rem; }
  .partie-bouton { grid-template-columns: 1fr auto; }
  .partie-num { grid-column: 1 / -1; }
}

/* --- Studio : traits fins, piste discrète ---------------------------------------------------------------- */
html[data-theme^="studio"] .piste { border-width: 1px; border-color: var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); background: var(--papier); }
html[data-theme^="studio"] .couloir { border-bottom: 1px dashed var(--ligne); }
html[data-theme^="studio"] :is(.cam-corps, .cam-cabine) { stroke-width: 1.5; }
html[data-theme^="studio"] .saisie input { border-width: 1px; font-weight: 600; }
html[data-theme^="studio"] :is(.explications li, .bilan-parties li) { border-width: 1px; }

/* --- Affiche : camion en encre riso ---------------------------------------------------------------------- */
html[data-theme="affiche"] .piste { border-width: 2px; border-radius: 10px; background: var(--papier); }
html[data-theme="affiche"] .cam-corps, html[data-theme="affiche"] .cam-cabine { fill: var(--rose-fluo); }
html[data-theme="affiche"] .cam-gyro { fill: var(--bleu-riso); }
html[data-theme="affiche"] .fantome .cam-corps, html[data-theme="affiche"] .fantome .cam-cabine { fill: var(--papier); stroke: var(--graphite); }
html[data-theme="affiche"] .saisie input { border-radius: var(--rayon); }
html[data-theme="affiche"] .explications li { border-width: 2px; border-left-width: 6px; }