/* =====================================================================
   La tournée — la route en maquette, le chronotachygraphe, le contrôle, la relecture du disque.
   Toutes les classes commencent par .tn- (jeu : app/js/jeux/tournee.js).
   ===================================================================== */

/* ---------- Mise en page ---------- */
.jeu-corps > div:has(> .tn){margin:0 auto auto}
.tn{display:grid; gap:10px; grid-template-columns:minmax(0,1fr); grid-template-areas:"scene" "tachy" "console"; color:var(--encre)}
.tn-journal{display:none}

/* ---------- La maquette ---------- */
.tn-scene{grid-area:scene; position:relative; height:clamp(184px, 27dvh, 250px); border-radius:18px 18px 12px 12px; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg, var(--ciel-haut, #D7E4DA) 0%, var(--ciel-bas, #F4EBDD) 62%);
  box-shadow:0 0 0 2px var(--encre), 0 14px 30px -14px rgba(0,0,0,.6)}
.tn-monde{position:absolute; inset:0; width:100%; height:100%; display:block}
.tn-socle{position:absolute; left:0; right:0; bottom:0; height:9px; background:linear-gradient(#7A5634, #4E3521); box-shadow:inset 0 2px 0 #E9DCC6, inset 0 3px 0 rgba(0,0,0,.25); z-index:2}
.tn-logo{font:italic 900 6.4px var(--f-titre); fill:#F4EBDD; letter-spacing:.4px; font-stretch:115%}
.tn-panneau{font:700 6px var(--f-texte); fill:var(--encre); text-anchor:middle}
.tn-p{font:800 8px var(--f-texte); fill:#fff; text-anchor:middle}
.tn-soleil{fill:#F6D57E; filter:drop-shadow(0 0 6px rgba(246,213,126,.8))}
.tn-lune{fill:#EDE7D6}
.tn-gyro{animation:tnClign .38s steps(2, jump-none) infinite}
@keyframes tnClign{0%{fill:#2F5FA8}100%{fill:#9CC2FF}}

.tn-hud{position:absolute; top:9px; left:9px; right:9px; z-index:3; display:flex; justify-content:space-between; align-items:flex-start; gap:8px; pointer-events:none}
.tn-hud > *{pointer-events:auto}
.tn-heure{display:flex; align-items:baseline; gap:8px; padding:5px 11px 6px; border-radius:10px; background:rgba(29,27,22,.88); color:var(--papier); box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.tn-heure span{font-family:var(--f-chiffre); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#C9BEA9}
.tn-heure b{font-size:19px; font-weight:600; color:var(--jaune); letter-spacing:.02em}
.tn-vitesse{display:flex; gap:2px; padding:3px; border-radius:999px; background:rgba(29,27,22,.88); box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.tn-vitesse span{display:grid; place-items:center; min-width:38px; height:30px; padding:0 8px; border-radius:999px; font-family:var(--f-chiffre); font-size:12px; font-weight:600; color:#C9BEA9; transition:background .2s, color .2s}
.tn-vitesse[data-etat="1"] [data-v="1"], .tn-vitesse[data-etat="3"] [data-v="3"]{background:var(--jaune); color:var(--encre)}
.tn-bandeau{position:absolute; left:9px; right:9px; top:52px; z-index:3; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:12px; background:var(--jaune); border:2px solid var(--encre); box-shadow:0 4px 0 var(--encre); font-size:13.5px; font-weight:600; line-height:1.3}
.tn-band-picto{flex:none; display:grid; place-items:center}
.tn-band-picto svg{width:22px; height:22px}
.tn-scene.gyro::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; animation:tnGyroEcran .5s steps(2, jump-none) infinite}
@keyframes tnGyroEcran{0%{box-shadow:inset 46px 0 46px -26px rgba(47,95,168,.85)}100%{box-shadow:inset -46px 0 46px -26px rgba(47,95,168,.85)}}

/* ---------- Le chronotachygraphe ---------- */
.tn-tachy{grid-area:tachy; position:relative; padding:9px 11px 11px; border-radius:16px; background:linear-gradient(180deg, #37332D, #211E1A); color:#E9E0CF; border:2px solid #14120F;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 5px 0 #14120F, 0 18px 30px -16px rgba(0,0,0,.6)}
.tn-tachy header{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px; color:#B9AE9A}
.tn-rec{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-chiffre); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em}
.tn-rec i{width:7px; height:7px; border-radius:50%; background:#E04A2F; box-shadow:0 0 6px #E04A2F; animation:tnRec 1.4s ease-in-out infinite}
@keyframes tnRec{50%{opacity:.35}}
.tn-lcd{padding:9px 11px 10px; border-radius:10px; background:linear-gradient(#C6D0AC, #ADBA93); color:#1D2414; box-shadow:inset 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25)}
.tn-lcd-haut{display:flex; align-items:center; gap:10px; padding-bottom:7px; border-bottom:1px dashed rgba(29,36,20,.35)}
.tn-lcd-picto{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:#1D2414; color:#C6D0AC}
.tn-lcd-picto svg{width:24px; height:24px}
.tn-lcd-act{display:flex; flex-direction:column; line-height:1.15; min-width:0; flex:1}
.tn-lcd-act b{font-family:var(--f-chiffre); font-size:13.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tn-lcd-act small{font-family:var(--f-chiffre); font-size:10.5px; opacity:.72}
.tn-lcd-h{font-size:20px; font-weight:600; letter-spacing:.02em}
.tn-cpts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 14px; padding-top:8px}
.tn-cpt{display:flex; flex-direction:column; gap:2px; min-width:0}
.tn-cpt-nom{font-family:var(--f-chiffre); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tn-cpt-val{display:flex; align-items:baseline; gap:2px; white-space:nowrap}
.tn-cpt-val b{font-size:17px; font-weight:600; line-height:1.1; padding:0 2px; border-radius:4px}
.tn-cpt-val small{font-size:10.5px; opacity:.68}
.tn-seg{display:grid; grid-template-columns:repeat(18, 1fr); gap:2px; height:7px; margin-top:2px}
.tn-seg i{background:rgba(29,36,20,.13); border-radius:1px}
.tn-seg i.on{background:#1D2414}
.tn-cpt[data-etat="limite"] .tn-cpt-val b{background:#E9B020}
.tn-cpt[data-etat="limite"] .tn-seg i.on:nth-last-child(-n+18){animation:tnSeg .7s steps(2, jump-none) infinite}
.tn-cpt[data-etat="depasse"] .tn-cpt-val b{background:#C2492F; color:#FFF6EA}
.tn-cpt[data-etat="depasse"] .tn-seg i.on{background:#9E2E18}
@keyframes tnSeg{0%{opacity:1}100%{opacity:.35}}
.tn-lcd-pause{margin-top:8px; padding-top:7px; border-top:1px dashed rgba(29,36,20,.35); font-family:var(--f-chiffre); font-size:10px; line-height:1.4; opacity:.86; min-height:2.8em}
.tn-modes{display:none; justify-content:center; gap:10px; margin-top:10px}
.tn-modes span{display:grid; place-items:center; width:44px; height:30px; border-radius:8px; background:#2B2723; color:#6E665A; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #0F0E0C}
.tn-modes span svg{width:18px; height:18px}
.tn-modes span.actif{background:linear-gradient(#F2C24A, #D9A015); color:var(--encre); box-shadow:0 0 12px rgba(233,176,32,.55), 0 2px 0 #7A5A00}

/* ---------- La console : prochain arrêt, décisions, activités ---------- */
.tn-console{grid-area:console; min-width:0; scroll-margin-bottom:16px}
.tn-cap, .tn-dec, .tn-act, .tn-journal{background:var(--papier) var(--grain); color:var(--encre); border-radius:16px; box-shadow:0 2px 0 rgba(0,0,0,.25), 0 22px 40px -26px rgba(0,0,0,.6)}
.tn-cap{padding:12px 14px 14px}
.tn-cap-tete{display:flex; justify-content:space-between; align-items:baseline; gap:8px; color:var(--encre-2)}
.tn-eta{font-size:10.5px; color:var(--encre-2); white-space:nowrap}
.tn-eta[data-retard="true"]{color:var(--ko); font-weight:600}
.tn-cap-lieu{display:block; margin-top:3px; font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:115%; text-transform:uppercase; font-size:21px; line-height:1.05; overflow-wrap:anywhere}
.tn-cap-detail{margin-top:4px; font-size:13.5px; line-height:1.35; color:var(--encre-2)}
.tn-ligne{position:relative; height:14px; margin:12px 6px 2px}
.tn-ligne::before{content:""; position:absolute; left:0; right:0; top:6px; height:2px; background:repeating-linear-gradient(90deg, var(--encre-3) 0 5px, transparent 5px 9px)}
.tn-ligne i{position:absolute; top:2px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--papier-3); border:2px solid var(--encre); z-index:1}
.tn-ligne i.fait{background:var(--jaune)}
.tn-ligne-fait{position:absolute; left:0; top:5px; height:4px; width:0; border-radius:2px; background:var(--jaune); box-shadow:0 0 0 1px var(--encre)}
.tn-ligne-camion{position:absolute; top:-1px; width:16px; height:16px; margin-left:-8px; border-radius:5px; background:var(--brique); border:2px solid var(--encre); z-index:2}
.tn-actions{display:flex; gap:10px; margin-top:12px}
.tn-actions .btn{flex:1}
.tn-actions .btn svg{width:22px; height:22px}
.tn[data-alerte] #tnStop{animation:tnPulse 1s ease-in-out infinite}
@keyframes tnPulse{50%{box-shadow:0 4px 0 var(--relief), 0 0 0 6px rgba(233,176,32,.55)}}

.tn-dec{padding:14px 14px 14px}
.tn-dec-tete{display:flex; align-items:center; gap:12px}
.tn-dec-picto{flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--jaune); color:var(--encre); border:2px solid var(--encre); box-shadow:0 3px 0 var(--encre)}
.tn-dec-picto svg{width:26px; height:26px}
.tn-dec-tete .etiquette{display:block; color:var(--encre-2)}
.tn-dec-tete .titre{margin-top:3px; line-height:1.05}
.tn-dec-texte{margin-top:10px; font-size:15px; line-height:1.45}
.tn-dec-texte p + p{margin-top:6px}
.tn-options{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.tn-opt{display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:9px 12px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--trait-moyen); box-shadow:0 3px 0 var(--trait-moyen); text-align:left; transition:transform .15s var(--ease-sortie), box-shadow .15s, border-color .2s}
.tn-opt:hover:not(:disabled){border-color:var(--encre); box-shadow:0 3px 0 var(--encre)}
.tn-opt:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 var(--encre)}
.tn-opt:disabled{opacity:.6}
.tn-opt.primaire{background:var(--jaune-clair); border-color:var(--encre); box-shadow:0 3px 0 var(--encre)}
.tn-opt-picto{flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--papier-2); border:1.5px solid var(--encre)}
.tn-opt-picto svg{width:21px; height:21px}
.tn-opt-txt{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25}
.tn-opt-txt b{font-size:15.5px; font-weight:700}
.tn-opt-txt small{font-size:12.5px; color:var(--encre-2); margin-top:2px}
.tn-conseil{flex:none; align-self:flex-start; padding:3px 8px; border-radius:999px; background:var(--ok); color:#fff; font-size:9px}
.tn[data-niveau="1"] .tn-opt[data-conseil]:not(:disabled){border-color:var(--ok); box-shadow:0 3px 0 var(--ok)}

.tn-act{display:grid; grid-template-columns:auto 1fr; gap:6px 12px; align-items:center; padding:14px}
.tn-act-picto{display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--papier-2); border:2px solid var(--encre)}
.tn-act-picto svg{width:26px; height:26px}
.tn-act-txt{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.tn-act-txt .etiquette{color:var(--encre-2)}
.tn-act-txt b{font-size:16.5px}
.tn-act-txt span:last-child{font-size:12.5px; color:var(--encre-2)}
.tn-act-barre{grid-column:1/-1; height:8px; border-radius:4px; background:var(--papier-2); overflow:hidden; box-shadow:inset 0 0 0 1px var(--trait-moyen)}
.tn-act-barre i{display:block; height:100%; background:var(--jaune); transform:scaleX(0); transform-origin:left}
.tn-act.nuit{background:#1F3A33; color:var(--papier)}
.tn-act.nuit .tn-act-picto{background:#2E5A4C; border-color:var(--papier); color:var(--papier)}
.tn-act.nuit .etiquette, .tn-act.nuit .tn-act-txt span:last-child{color:#C9D6CC}
.tn-act.nuit .tn-act-barre{background:#173029}

.tn-journal{grid-area:journal; padding:12px 14px}
.tn-journal > .etiquette{color:var(--encre-2); margin-bottom:6px}
.tn-journal ol{list-style:none}
.tn-journal li{display:flex; gap:10px; align-items:baseline; padding:6px 0; font-size:13.5px; line-height:1.3}
.tn-journal li + li{border-top:1px dashed var(--trait-doux)}
.tn-journal time{flex:none; font-size:10.5px; color:var(--encre-3)}
.tn-journal li.ko span{color:var(--ko); font-weight:600}
.tn-journal li.ok span{color:var(--ok)}

/* ---------- Ordre de mission ---------- */
.tn-ordre-tete{position:relative; margin:2px 0 8px}
.tn-tampon-ordre{display:inline-block; margin-bottom:8px; padding:3px 9px; border:2px solid var(--brique); color:var(--brique); border-radius:5px; transform:rotate(-2deg); font-weight:600}
.tn-ordre-ctx{font-size:15.5px; line-height:1.5}
.tn-ordre-ctx p + p{margin-top:6px}
.tn-ordre-grille{display:grid; gap:16px; margin-top:16px}
.tn-sous{margin-bottom:8px}
.tn-feuille{list-style:none; position:relative}
.tn-feuille li{position:relative; padding:0 0 13px 24px; font-size:14.5px; line-height:1.35}
.tn-feuille li::before{content:""; position:absolute; left:5px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--jaune); border:2px solid var(--encre); z-index:1}
.tn-feuille li::after{content:""; position:absolute; left:10px; top:12px; bottom:-4px; width:0; border-left:2px dashed var(--encre-3)}
.tn-feuille li.dernier{padding-bottom:0}
.tn-feuille li.dernier::after{display:none}
.tn-feuille b{font-weight:700}
.tn-type{font-family:var(--f-chiffre); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--encre-3)}
.tn-feuille small{display:block; color:var(--encre-2); font-size:12.5px}
.tn-feuille .tn-fen{color:var(--brique); font-weight:600}
.tn-troncon{display:block; height:17px; line-height:17px; margin:-3px 0 1px; font-size:10px; color:var(--encre-3)}
.tn-feuille li:not(:first-child)::before{top:20px}
.tn-note{margin-top:6px; font-size:12.5px; color:var(--encre-2); font-style:italic}
.tn-regles{list-style:none}
.tn-regles li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; border-bottom:1px dashed var(--trait-doux); font-size:13.5px; line-height:1.3}
.tn-regles li span{color:var(--encre-2)}
.tn-regles li b{text-align:right; font-weight:700}
.tn-histo li b{font-family:var(--f-chiffre); font-size:12.5px; font-weight:600}
.tn-choix-heure{margin-top:16px}
.tn-segments{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.tn-segments button{min-height:48px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--trait-moyen); box-shadow:0 3px 0 var(--trait-moyen); font-family:var(--f-chiffre); font-size:14px; font-weight:600}
.tn-segments button[aria-checked="true"]{background:var(--encre); color:var(--jaune); border-color:var(--encre); box-shadow:0 3px 0 #000}
.tn-source{display:block; margin:14px 0 12px; font-family:var(--f-chiffre); font-size:10px; letter-spacing:.02em; color:var(--encre-3); line-height:1.4}

/* Aperçu horizontal de la route (ordinateur seulement) */
.tn-apercu{display:none}
@media (min-width: 900px){
  .tn-apercu{display:block; position:relative; margin:18px 4px 6px; padding:58px 50px 54px; border-radius:14px; background:var(--tapis); background-image:linear-gradient(rgba(244,235,221,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(244,235,221,.08) 1px, transparent 1px); background-size:24px 24px; box-shadow:inset 0 0 0 2px var(--encre), inset 0 -8px 0 rgba(0,0,0,.18)}
  .tn-apercu-ligne{position:relative; height:12px; border-radius:6px; background:#3A3631; box-shadow:0 0 0 2px var(--encre)}
  .tn-apercu-ligne::after{content:""; position:absolute; left:8px; right:8px; top:5px; height:2px; background:repeating-linear-gradient(90deg, #F1E6CE 0 9px, transparent 9px 17px)}
  .tn-apercu-arret{position:absolute; top:6px; z-index:1; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); white-space:nowrap; color:var(--papier)}
  .tn-apercu-arret i{position:absolute; top:-9px; width:18px; height:18px; border-radius:5px; background:var(--papier-3); border:2px solid var(--encre)}
  .tn-apercu-arret i.depot{background:var(--jaune)}
  .tn-apercu-arret i.chargement, .tn-apercu-arret i.usine{background:var(--acheteur)}
  .tn-apercu-arret i.station, .tn-apercu-arret i.client{background:var(--brique)}
  .tn-apercu-arret b{font-size:12.5px; font-weight:700; line-height:1.2}
  .tn-apercu-arret small{font-family:var(--f-chiffre); font-size:9.5px; color:#C9D6CC}
  .tn-apercu-arret.bas b{margin-top:16px}
  .tn-apercu-arret.haut{top:auto; bottom:6px; flex-direction:column-reverse}
  .tn-apercu-arret.haut b{margin-bottom:16px}
  .tn-apercu-arret.haut i{top:auto; bottom:-9px}
  .tn-apercu-arret.premier{transform:none; align-items:flex-start}
  .tn-apercu-arret.premier i{left:0}
  .tn-apercu-arret.dernier{transform:translateX(-100%); align-items:flex-end}
  .tn-apercu-arret.dernier i{right:0}
  .tn-apercu-camion{position:absolute; left:-30px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--jaune); border:2px solid var(--encre); color:var(--encre)}
  .tn-apercu-camion svg{width:18px; height:18px}
}

/* ---------- Fenêtres : contrôle routier, questions ---------- */
.tn-modale{position:fixed; inset:0; z-index:7; display:flex; padding:calc(var(--haut) + 14px) var(--gouttiere) calc(var(--bas) + 14px); background:rgba(10,22,18,.66); overflow-y:auto; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.tn-modale > div{margin:auto; width:100%}
.jeu:has(.retour) .tn-q-modale{padding-bottom:calc(52dvh + 24px)}
.tn-ctrl{max-width:560px; padding:18px 16px 16px; border-radius:var(--r); background:var(--papier) var(--grain); color:var(--encre); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); border-top:6px solid #2F5FA8}
.tn-ctrl-tete{display:flex; align-items:center; gap:12px}
.tn-ctrl-tete .etiquette{color:var(--encre-2)}
.tn-ctrl-gyro{flex:none; display:flex; gap:4px; padding:6px; border-radius:12px; background:var(--encre)}
.tn-ctrl-gyro i{width:16px; height:16px; border-radius:50%; background:#2F5FA8; animation:tnClignCss .5s steps(2, jump-none) infinite}
.tn-ctrl-gyro i + i{animation-delay:-.25s}
@keyframes tnClignCss{0%{background:#2F5FA8; box-shadow:none}100%{background:#9CC2FF; box-shadow:0 0 12px #6FA2F0}}
.tn-ctrl-txt{margin-top:10px; font-size:15px; line-height:1.45}
.tn-ticket{position:relative; max-width:290px; margin:14px auto 6px; padding:10px 12px 14px; background:#FFFDF6; border:1px solid var(--trait-moyen); box-shadow:0 10px 18px -12px rgba(0,0,0,.5); font-size:11.5px; transform:rotate(-1deg)}
.tn-ticket::after{content:""; position:absolute; left:-1px; right:-1px; bottom:-7px; height:8px; background:linear-gradient(135deg, #FFFDF6 50%, transparent 50%) 0 0/10px 8px repeat-x, linear-gradient(225deg, #FFFDF6 50%, transparent 50%) 5px 0/10px 8px repeat-x}
.tn-ticket-tete{text-align:center; padding-bottom:6px; margin-bottom:4px; border-bottom:1px dashed var(--trait-moyen); letter-spacing:.06em}
.tn-ticket-l{display:grid; grid-template-columns:auto 16px 1fr auto; align-items:center; gap:8px; padding:2px 0; overflow:hidden}
.tn-tk{display:grid; place-items:center}
.tn-tk svg{width:14px; height:14px}
.tn-verifs{list-style:none; margin-top:12px}
.tn-verifs li{display:grid; grid-template-columns:minmax(0,1fr) auto 22px; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--trait-doux); font-size:14px}
.tn-v-val{font-size:12px; white-space:nowrap}
.tn-v-marque svg{width:20px; height:20px}
.tn-verifs li[data-ok="true"] .tn-v-marque{color:var(--ok)}
.tn-verifs li[data-ok="false"]{color:var(--ko); font-weight:600}
.tn-ctrl-verdict{position:relative; height:74px; margin:6px 0 4px}
.tn-ctrl-infr{display:flex; flex-direction:column; gap:10px; margin-bottom:14px}
.tn-ctrl-infr .tn-carte{box-shadow:none; background:var(--papier-3); border:1px solid var(--trait-doux); border-left:6px solid var(--ko)}
.tn-q{max-width:680px}
.tn-q .calculette button{text-align:center}
.tn-q-tete{display:flex; align-items:center; gap:12px; margin-bottom:10px; color:var(--papier)}
.tn-q-tete .etiquette{display:block; color:#C9D6CC}
.tn-q-tete b{font-size:16px}

/* ---------- La relecture du disque ---------- */
.tn-bilan{display:flex; flex-direction:column; gap:12px; max-width:760px; margin:0 auto; width:100%}
.tn-verdict{text-align:center}
.tn-verdict .ref{text-align:left}
.tn-etoiles{display:flex; justify-content:center; gap:10px; margin:4px 0 10px}
.tn-etoiles span{display:grid; width:56px; height:56px}
.tn-etoiles svg{width:100%; height:100%; fill:var(--papier-2); stroke:var(--encre); stroke-width:1.4; stroke-linejoin:round}
.tn-etoiles .pleine svg{fill:var(--jaune); filter:drop-shadow(0 3px 0 var(--encre))}
.tn-etoiles span:nth-child(2){transform:translateY(-8px)}
.tn-verdict-sous{margin:8px 0 14px; color:var(--encre-2); font-size:14px}
.tn-verdict .stat{padding:12px 6px; align-items:center}
.tn-verdict .stat .etiquette{letter-spacing:.03em}
.tn-legende-etoiles{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-top:12px; font-family:var(--f-chiffre); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--encre-3)}
.tn-legende-etoiles span{display:inline-flex; align-items:center; gap:5px}
.tn-legende-etoiles i{display:inline-flex}
.tn-legende-etoiles svg{width:11px; height:11px; fill:var(--jaune); stroke:var(--encre-2); stroke-width:1.5}
.tn-legende{display:flex; flex-wrap:wrap; gap:6px 14px; margin-bottom:12px; font-size:12.5px; color:var(--encre-2)}
.tn-legende span{display:inline-flex; align-items:center; gap:6px}
.tn-legende span::before{content:""; width:14px; height:10px; border-radius:2px}
.tn-legende .c::before{background:var(--brique)}
.tn-legende .t::before{background:var(--jaune)}
.tn-legende .r::before{background:var(--acheteur)}
.tn-legende .x::before{background:repeating-linear-gradient(45deg, var(--ko) 0 2px, #fff 2px 4px); border:1px solid var(--ko)}
.tn-ruban + .tn-ruban{margin-top:18px; padding-top:14px; border-top:1px dashed var(--trait-moyen)}
.tn-ruban-tete{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:2px 10px; margin-bottom:6px}
.tn-ruban-tete b{font-family:var(--f-titre); font-style:italic; font-weight:850; text-transform:uppercase; font-size:15px}
.tn-ruban-tete span{font-size:10px; color:var(--encre-2)}
.tn-pistes{position:relative; display:grid; gap:4px}
.tn-piste{position:relative; height:15px; border-radius:3px; background-color:var(--papier-2); background-image:linear-gradient(90deg, rgba(29,27,22,.09) 0 1px, transparent 1px); background-size:var(--pas, 10%) 100%}
.tn-piste i{position:absolute; top:0; bottom:0; border-radius:2px; box-shadow:inset 0 0 0 1px rgba(29,27,22,.35)}
.tn-piste.c i{background:var(--brique)}
.tn-piste.t i{background:var(--jaune)}
.tn-piste.r i{background:var(--acheteur)}
.tn-exces{position:absolute; top:-3px; bottom:-3px; z-index:1; border-radius:2px; border:1.5px solid var(--ko); background:repeating-linear-gradient(45deg, var(--ko) 0 3px, #FFF6EA 3px 6px)}
.tn-marque{position:absolute; top:-7px; z-index:2; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; border:2px solid var(--encre); background:var(--ko)}
.tn-marque.presque{background:var(--jaune)}
.tn-lecteur{position:absolute; top:-5px; bottom:-5px; left:0; z-index:3; width:2px; margin-left:-1px; background:var(--encre); opacity:0; box-shadow:0 0 0 2px rgba(233,176,32,.6)}
.tn-heures{position:relative; height:16px; margin-top:4px; font-size:9.5px; color:var(--encre-3)}
.tn-heures span{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap}
.tn-heures span:first-child{transform:none}
.tn-section{margin:8px 2px -2px; font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:115%; text-transform:uppercase; font-size:16px; color:var(--papier); letter-spacing:.01em}
.tn-cartes{display:flex; flex-direction:column; gap:10px}
.tn-carte{padding:14px 16px; border-radius:14px; background:var(--papier) var(--grain); color:var(--encre); border-left:6px solid var(--ko); box-shadow:0 2px 0 rgba(0,0,0,.25), 0 22px 40px -28px rgba(0,0,0,.6)}
.tn-carte.frolement, .tn-carte.bon-info{border-left-color:var(--jaune)}
.tn-carte.bon{border-left-color:var(--ok)}
.tn-carte-tete{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
.tn-carte-tete b{font-size:16px}
.tn-puce-sorte{padding:3px 9px; border-radius:999px; background:var(--ko); color:#fff; font-family:var(--f-chiffre); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase}
.tn-carte.frolement .tn-puce-sorte, .tn-carte.bon-info .tn-puce-sorte{background:var(--jaune); color:var(--encre)}
.tn-carte.bon .tn-puce-sorte{background:var(--ok)}
.tn-carte-txt{margin-top:8px; font-size:15px; line-height:1.45}
.tn-carte-txt p + p{margin-top:6px}
.tn-regle{margin:10px 0 0; padding:10px 12px; border-radius:9px; background:var(--papier-2); font-size:14px; line-height:1.45}
.tn-regle .etiquette{display:block; margin-bottom:3px; color:var(--encre-2)}
.tn-carte .tn-source{margin:8px 0 0}
.tn-plan summary{display:flex; justify-content:space-between; align-items:baseline; gap:10px; cursor:pointer; list-style:none; min-height:28px}
.tn-plan summary::-webkit-details-marker{display:none}
.tn-plan summary .titre::before{content:"+ "; font-style:normal}
.tn-plan[open] summary .titre::before{content:"− "}
.tn-plan .defil-x{overflow-x:auto; margin-top:12px; -webkit-overflow-scrolling:touch}
.tn-table{border-collapse:collapse; width:100%; min-width:640px; font-size:11px}
.tn-table th{padding:6px 7px; background:var(--encre); color:var(--papier); font-weight:500; text-align:left; white-space:nowrap}
.tn-table td{padding:5px 7px; border-bottom:1px solid var(--trait-doux); white-space:nowrap}
.tn-table td:nth-child(2){white-space:normal; min-width:150px; font-family:var(--f-texte); font-size:12.5px}
.tn-table td small{color:var(--encre-3)}
.tn-table td:nth-child(6){background:rgba(110,139,163,.12)}
.tn-table td:nth-child(7){background:rgba(63,138,107,.1)}
.tn-table tr.ko td{background:var(--ko-pale); color:var(--ko); font-weight:600}
.tn-table tr.repos td{font-style:italic; color:var(--encre-2)}
#tnFin{margin-top:4px}

/* ---------- Petits écrans ---------- */
@media (max-width: 380px){
  .tn-cap-lieu{font-size:19px}
  .tn-cpt-val b{font-size:15.5px}
  .tn-heure b{font-size:17px}
  .tn-opt-txt b{font-size:14.5px}
  .tn-etoiles span{width:48px; height:48px}
  .tn-verdict .stat .etiquette{font-size:9px; letter-spacing:.01em}
}

/* ---------- Ordinateur ---------- */
@media (min-width: 900px){
  .tn{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); grid-template-areas:"scene tachy" "console journal"; gap:14px; align-items:start}
  .tn-scene{height:clamp(300px, 44dvh, 400px); border-radius:22px 22px 14px 14px}
  .tn-socle{height:12px}
  .tn-heure{padding:7px 14px 8px}
  .tn-heure b{font-size:24px}
  .tn-bandeau{top:62px; left:14px; right:auto; max-width:min(520px, 80%); font-size:14.5px}
  .tn-tachy{padding:12px 14px 14px}
  .tn-lcd-h{font-size:24px}
  .tn-modes{display:flex}
  .tn-journal{display:block; min-height:180px}
  .tn-cap-lieu{font-size:26px}
  .tn-dec-texte{font-size:16px}
  .tn-ordre-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start}
  .tn-ordre-grille > section:last-child{position:sticky; top:8px}
  .tn-ctrl{padding:24px 26px 22px}
  .tn-piste{height:18px}
  .tn-table{font-size:12px}
}

@media (prefers-reduced-motion: reduce){
  .tn-gyro, .tn-rec i, .tn-ctrl-gyro i, .tn-scene.gyro::after, .tn[data-alerte] #tnStop, .tn-cpt .tn-seg i{animation:none!important}
  .tn-scene.gyro::after{box-shadow:inset 0 0 0 4px #2F5FA8}
}