/* T101 Oral — direction ROADBOOK
   Signalisation routière et carnet de route : panneaux à plat, aucun dégradé,
   aucune ombre. La couleur est un CODE, pas une décoration :
   ambre = j'écoute · vert = juste · rouge = faux · bleu = châssis. */

:root {
  --bleu:       #0E3467;
  --bleu-2:     #0A2850;
  --bleu-3:     #17406F;
  --trait:      #2C5A96;
  --panneau:    #F5F2EB;
  --panneau-2:  #DCD6C7;
  --encre:      #12181F;
  --encre-2:    #5C6470;
  --ambre:      #F0A21A;
  --ambre-sur:  #12181F;
  --vert:       #147A4A;
  --vert-clair: #3FA86F;
  --rouge:      #C02B36;
  --rouge-clair:#E0505A;
  --texte:      #F5F2EB;
  --texte-2:    #A9BCD4;
  --texte-3:    #5E82B0;

  --r: 6px;
  --gouttiere: 16px;
  --bandeau-h: 34px;
  --voie-h: 14px;

  color-scheme: dark;
}

/* Mode nuit : panneaux rétroréfléchissants vus aux phares, pas du papier blanc.
   Un panneau en blanc pur éblouit dans un habitacle sombre, et l'éblouissement
   est exactement ce qu'on ne peut pas se permettre au volant. */
:root[data-theme="nuit"] {
  --bleu:       #06172E;
  --bleu-2:     #04101F;
  --bleu-3:     #0D2A4C;
  --trait:      #1C3E68;
  --panneau:    #C9C3B4;
  --panneau-2:  #B0AA9C;
  --encre:      #0A0F16;
  --encre-2:    #4A5159;
  --ambre:      #D08D12;
  --vert:       #14653C;
  --vert-clair: #2F9160;
  --rouge:      #A32A33;
  --rouge-clair:#C4454E;
  --texte:      #C6D2E0;
  --texte-2:    #8299B5;
  --texte-3:    #46648C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) {
    --bleu:       #06172E;
    --bleu-2:     #04101F;
    --bleu-3:     #0D2A4C;
    --trait:      #1C3E68;
    --panneau:    #C9C3B4;
    --panneau-2:  #B0AA9C;
    --encre:      #0A0F16;
    --encre-2:    #4A5159;
    --ambre:      #D08D12;
    --vert:       #14653C;
    --vert-clair: #2F9160;
    --rouge:      #A32A33;
    --rouge-clair:#C4454E;
    --texte:      #C6D2E0;
    --texte-2:    #8299B5;
    --texte-3:    #46648C;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bleu);
  color: var(--texte);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
  /* Encoche et barre de gestes : l'application occupe l'écran entier. */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

::selection { background: var(--ambre); color: var(--ambre-sur); }

:focus-visible { outline: 3px solid var(--ambre); outline-offset: 3px; }

.cond {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.etiquette {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-2);
  margin: 0 0 8px;
}

/* ------------------------------------------------------------- bandeau d'état */

#bandeau {
  flex: 0 0 auto;
  height: var(--bandeau-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--gouttiere);
  background: var(--bleu-2);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-2);
  white-space: nowrap;
  overflow: hidden;
}

#bandeau .lampe {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--vert-clair);
  flex: 0 0 auto;
}
#bandeau[data-reseau="hors"] .lampe { background: var(--ambre); }
#bandeau .separe { color: var(--trait); }
#bandeau .pousse { margin-left: auto; }

#bandeau button {
  height: 26px;
  padding: 0 9px;
  border: 1.5px solid var(--trait);
  background: transparent;
  color: var(--texte-2);
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}

/* ---------------------------------------------------------------- structure */

main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ecran {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px var(--gouttiere) 0;
  min-height: 0;
}
.ecran.actif { display: flex; }

.pousseur { flex: 1 1 auto; min-height: 8px; }

/* ------------------------------------------------------------------ panneaux */

.panneau {
  background: var(--panneau);
  color: var(--encre);
  border-radius: var(--r);
  padding: 18px;
}

.panneau .source {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--encre-2);
}

.chip {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 3px 8px;
  display: inline-block;
}
.chip.maj { background: var(--ambre); color: var(--ambre-sur); }
.chip.hc  { background: var(--panneau-2); color: var(--encre); }
.chip.sec { background: var(--panneau-2); color: var(--encre); }

/* ------------------------------------------------------------------ contrôles */

button, select, a.bouton {
  font-family: inherit;
  font-size: inherit;
}

.barre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  border: 0;
  border-radius: var(--r);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}
.barre.vert  { background: var(--vert);  color: #fff; }
.barre.rouge { background: var(--rouge); color: #fff; }
.barre.creux {
  background: transparent;
  border: 1.5px solid var(--trait);
  color: var(--texte);
  min-height: 52px;
  font-size: 18px;
}

.segments { display: flex; gap: 6px; }
.segments button {
  flex: 1 1 0;
  min-height: 50px;
  border: 1.5px solid var(--trait);
  background: transparent;
  color: var(--texte);
  border-radius: var(--r);
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  cursor: pointer;
}
.segments button[aria-pressed="true"] {
  background: var(--panneau);
  color: var(--encre);
  border-color: var(--panneau);
}

select.panneau-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 70px;
  border: 0;
  border-radius: var(--r);
  background: var(--panneau);
  color: var(--encre);
  padding: 0 52px 0 18px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .005em;
}
.champ-select { position: relative; }
.champ-select svg {
  position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Modes : la ligne choisie devient un panneau ambre plein. */
.modes { display: flex; flex-direction: column; gap: 8px; }
.modes label {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 64px;
  padding: 10px 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--trait);
  cursor: pointer;
}
.modes label:focus-within { outline: 3px solid var(--ambre); outline-offset: 3px; }
.modes input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.modes label:has(input:checked) {
  background: var(--ambre);
  border-color: var(--ambre);
  color: var(--ambre-sur);
}
.modes label:has(input:checked) .sous { color: #6B4A00; }
.modes .nom  { font-weight: 600; font-size: 16.5px; line-height: 1.15; }
.modes .sous { font-size: 12.5px; line-height: 1.15; color: var(--texte-2); }

/* --------------------------------------------------------------- session QCM */

#compteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#compteur .boite {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  border: 1.5px solid var(--trait);
  border-radius: 4px;
  padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}

#avancement {
  height: 5px;
  background: var(--bleu-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
#avancement div {
  height: 100%;
  background: var(--ambre);
  width: 0;
  transition: width .35s cubic-bezier(.16, 1, .3, 1);
}

#enonce { font-size: 22px; line-height: 1.26; font-weight: 600; margin: 10px 0 0; }

#options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

.option {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 62px;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  background: var(--panneau);
  color: var(--encre);
  transition: background-color .22s ease, color .22s ease;
}
.option .tab {
  width: 54px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--bleu);
  color: var(--texte);
  transition: background-color .22s ease;
}
.option .tab b {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: .9;
}
.option .tab i {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .12em;
  opacity: .75;
}
.option .texte {
  flex: 1 1 auto;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 500;
}

.option[data-etat="juste"] { background: var(--vert); color: #fff; }
.option[data-etat="juste"] .tab { background: color-mix(in srgb, var(--vert) 78%, #000); color: #fff; }
.option[data-etat="faux"]  { background: var(--rouge); color: #fff; }
.option[data-etat="faux"] .tab  { background: color-mix(in srgb, var(--rouge) 78%, #000); color: #fff; }
.option[data-etat="eteint"] { background: var(--bleu-3); color: var(--texte-2); }
.option[data-etat="eteint"] .tab { background: var(--bleu); color: var(--texte-2); }

#pourquoi {
  background: var(--bleu-2);
  border-radius: var(--r);
  padding: 13px 15px;
  margin-top: 12px;
  animation: monte .28s ease-out both;
}
#pourquoi p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--texte); }
#pourquoi .titre {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: 4px;
}

#commandes {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 14px 0 10px;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-3);
}
#commandes button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 8px 4px;
  min-height: 44px;
  cursor: pointer;
}

/* ------------------------------------------------------------------- bilan */

#score {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
#score .note {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 78px;
  line-height: .82;
  letter-spacing: -.01em;
}
#score .sur {
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.6;
  color: var(--encre-2);
}
#score .cent { margin-left: auto; text-align: right; }
#score .cent b {
  display: block;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}
#score .cent span { display: block; font-size: 13px; color: var(--encre-2); margin-top: 3px; }

.regle { height: 1.5px; background: var(--panneau-2); margin: 16px 0 14px; }

#compte { display: flex; gap: 9px; }
#compte > div { flex: 1 1 0; text-align: center; }
#compte b {
  display: block;
  font-family: 'Barlow Condensed', 'Barlow', sans-serif;
  font-weight: 700;
  font-size: 25px;
}
#compte span { display: block; font-size: 12px; letter-spacing: .06em; color: var(--encre-2); }
#compte .trait { flex: 0 0 1.5px; background: var(--panneau-2); }

/* --------------------------------------------------------- bande d'écoute */

#voie {
  flex: 0 0 auto;
  height: var(--voie-h);
  background-color: var(--bleu-2);
  background-image: repeating-linear-gradient(
    90deg, var(--ambre) 0 30px, transparent 30px 48px);
  background-position: 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
#voie[data-etat="ecoute"] { opacity: 1; animation: voie 1.1s linear infinite; }
#voie[data-etat="juste"]  { opacity: 1; background-image: repeating-linear-gradient(90deg, var(--vert-clair) 0 30px, transparent 30px 48px); }
#voie[data-etat="faux"]   { opacity: 1; background-image: repeating-linear-gradient(90deg, var(--rouge) 0 30px, transparent 30px 48px); }

@keyframes voie { from { background-position: 0 0; } to { background-position: -48px 0; } }
@keyframes monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blip { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.blip { animation: blip 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #voie[data-etat="ecoute"] { opacity: 1; }
}

/* Écrans très courts (iPhone SE en paysage, téléphone dans un support) */
@media (max-height: 620px) {
  #enonce { font-size: 19px; }
  .option { min-height: 54px; }
  .barre { min-height: 56px; font-size: 20px; }
}