/* Voltige : décalcomanies de modélisme sur une aube de canyon. Encre presque noire, jaune signal, damier ; lettres
   Kanit italiques (OFL). Plaques penchées (coupes en biais), jamais d'arrondi de bonbon. Images peintes par Codex :
   illustration, titre, engins, icônes (blanches). Pensé téléphone d'abord : 740 × 360 en paysage. */
@font-face { font-family: 'Kanit'; src: url(polices/kanit-mediumitalic.woff2) format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Kanit'; src: url(polices/kanit-semibolditalic.woff2) format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Kanit'; src: url(polices/kanit-bolditalic.woff2) format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Kanit'; src: url(polices/kanit-medium.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
:root {
  --encre: #14121c; --encre2: #221e2c; --jaune: #ffc21a; --jaune2: #ffdd66; --orange: #ff7a2f; --blanc: #fff7ea;
  --doux: rgba(255, 247, 234, .66); --vert: #6fe39a; --rouge: #ff5d5d; --plaque: rgba(20, 18, 28, .86);
  --marge: 12px; --biais: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--encre); color: var(--blanc);
  font: italic 500 16px/1.25 'Kanit', system-ui, sans-serif; font-synthesis: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none; }
img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; padding: 0; border: 0; background: none; }
[hidden] { display: none !important; }
#jeu { position: fixed; inset: 0; touch-action: none; }
#jeu canvas { display: block; touch-action: none; }
body:not(.en-partie) #jeu { visibility: hidden; }

/* Fond des menus : l'illustration (Codex), floutée et voilée derrière les écrans. */
#fond-menus { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
#fond-menus .illustration, #titre .illustration { position: absolute; inset: 0; background: url(img/illustration.webp) 70% center / cover no-repeat; }
#fond-menus .illustration { inset: -20px; filter: blur(7px) saturate(1.1); }
#fond-menus .voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 28, .72), rgba(20, 18, 28, .45) 45%, rgba(20, 18, 28, .8)); }
body.en-partie #fond-menus { display: none; }

/* ---------- Boutons : plaques penchées ---------- */
.bouton-vif, .bouton-filet { --c: var(--biais); clip-path: polygon(var(--c) 0, 100% 0, calc(100% - var(--c)) 100%, 0 100%); }
.bouton-vif { position: relative; min-height: 48px; padding: 0 34px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, var(--jaune2), var(--jaune) 55%, #e6a400); color: var(--encre);
  font-weight: 700; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); transition: transform .08s, filter .08s; }
.bouton-vif.grand { min-height: 60px; padding: 0 64px; font-size: 26px; --c: 18px; }
.bouton-vif.petit { min-height: 38px; padding: 0 18px; font-size: 15px; --c: 8px; }
.bouton-vif:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.bouton-filet { min-height: 44px; padding: 0 22px; background: rgba(255, 247, 234, .12); color: var(--blanc);
  font-weight: 600; font-size: 16px; letter-spacing: .03em; transition: transform .08s, background .08s;
  box-shadow: inset 0 0 0 1.5px rgba(255, 247, 234, .35); }
.bouton-filet.petit { min-height: 36px; font-size: 14px; padding: 0 14px; --c: 7px; }
.lien-texte { color: var(--doux); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
button.appuye, button:active { transform: scale(.97); filter: brightness(1.15); }
.rond { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: var(--plaque);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.rond .ic { width: 26px; height: 26px; object-fit: contain; }
.rond.reglages { top: var(--marge); right: var(--marge); }
.ic { display: block; }
.ic.retourne { transform: scaleX(-1); }

/* ---------- Panneaux : encre avec un filet jaune penché en haut ---------- */
.panneau { position: relative; background: var(--plaque); padding: 18px 20px 16px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  box-shadow: inset 0 3px 0 var(--jaune); }
.panneau h3 { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jaune); }
.pile { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.centre { margin: auto; }
.texte-centre { text-align: center; }
.regle { margin: 4px 0; color: var(--doux); font-size: 15px; text-align: center; font-style: normal; }
.petit { margin: 6px 0; color: var(--doux); font-size: 13px; line-height: 1.3; font-style: normal; }
.ligne-boutons { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- Écrans ---------- */
.ecran { position: fixed; inset: 0; z-index: 10; }
.ecran.voile { z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(12, 10, 18, .62); }
.barre-haut { position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 var(--marge); }
.barre-haut h2 { margin: 0; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.retour { width: 48px; height: 46px; display: grid; place-items: center; padding: 0; background: var(--plaque); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.retour .ic { width: 24px; height: 24px; object-fit: contain; }
.compte-etoiles, .compte-ecrous { margin-left: auto; margin-right: 64px; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 20px; color: var(--jaune);
  background: var(--plaque); padding: 6px 16px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); font-variant-numeric: tabular-nums; }
.compte-etoiles::before { content: ''; width: 18px; height: 18px; background: url(img/ic-etoile.webp) center / contain no-repeat; filter: sepia(1) saturate(6) hue-rotate(5deg) brightness(1.1); }
.compte-ecrous::before { content: ''; width: 20px; height: 20px; background: url(img/ic-ecrou.webp) center / contain no-repeat; }
.contenu { position: absolute; top: 64px; left: var(--marge); right: var(--marge); bottom: var(--marge); display: flex; gap: 14px; justify-content: center; align-items: flex-start; }
.contenu.centre-col { flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.contenu.deux { align-items: center; }
.contenu.deux > * { flex: 1 1 0; max-width: 430px; }
.etoile { display: inline-block; width: 18px; height: 18px; background: url(img/ic-etoile.webp) center / contain no-repeat; opacity: .28; }
.etoile.oui { opacity: 1; filter: sepia(1) saturate(6) hue-rotate(5deg) brightness(1.1); }

/* Premier écran */
#titre { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 7vh; opacity: 0; transition: opacity .45s; }
#titre.ouvert { opacity: 1; }
#titre.sortie { opacity: 0; pointer-events: none; }
#titre .illustration::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(20, 18, 28, 0) 55%, rgba(20, 18, 28, .7)); }
#titre .titre-jeu { display: none; }
#titre .bas { position: relative; }
@media (orientation: portrait) {
  #titre { justify-content: center; gap: 6vh; }
  #titre .illustration { background-position: 82% center; }
  #titre .titre-jeu { display: block; position: relative; width: 86vw; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
}

/* Menu */
#menu .titre-menu { position: absolute; top: 4vh; left: 50%; transform: translateX(-50%); width: min(46vw, 470px); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.modes { position: absolute; left: 50%; bottom: calc(var(--marge) + 64px); transform: translateX(-50%); display: flex; gap: 14px; align-items: stretch; }
.mode { width: clamp(150px, 21vw, 230px); min-height: 150px; padding: 16px 16px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--plaque); clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); box-shadow: inset 0 3px 0 rgba(255, 247, 234, .25); transition: transform .08s; }
.mode.principal { box-shadow: inset 0 4px 0 var(--jaune); }
.mode .ic { width: 38px; height: 38px; object-fit: contain; margin-bottom: 4px; }
.mode b { font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
.mode small { font-size: 13px; font-style: normal; color: var(--doux); line-height: 1.25; }
.mode em { margin-top: auto; font-style: italic; font-weight: 600; font-size: 15px; color: var(--jaune); display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.coin-gauche { position: absolute; top: var(--marge); left: var(--marge); display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 10px; background: var(--plaque);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); }
.coin-gauche .txt { display: flex; flex-direction: column; align-items: flex-start; }
.coin-gauche b { font-size: 18px; font-weight: 700; text-transform: uppercase; }
.coin-gauche small { font-size: 13px; color: var(--jaune); font-variant-numeric: tabular-nums; }
#liens-plateforme { position: absolute; left: var(--marge); bottom: var(--marge); display: flex; gap: 8px; align-items: center; }
#liens-plateforme .lien { font-style: normal; font-size: 12px; color: var(--doux); padding: 4px 8px; background: rgba(0, 0, 0, .55); border-radius: 3px; }

/* Vitrine d'un engin : carrosserie + deux roues posées à leurs moyeux (positions en % calculées par le jeu). */
.vitrine { position: relative; width: 100%; aspect-ratio: 2.3; }
.vitrine img { position: absolute; }
.vitrine.petite { width: 84px; aspect-ratio: 2.2; margin-bottom: 2px; }
.mode .ecrous-menu::before { content: ''; width: 16px; height: 16px; background: url(img/ic-ecrou.webp) center / contain no-repeat; }
.carte-engin .acheter { display: inline-flex; align-items: center; gap: 8px; }
.carte-engin .acheter img { width: 18px; filter: brightness(0); }
.carte-engin .manque { font-size: 11px; color: var(--doux); font-style: normal; text-align: center; }

/* Campagne */
.deux-campagne { align-items: stretch; }
#mondes { display: flex; flex-direction: column; gap: 8px; width: 210px; flex: none; }
.monde { position: relative; height: 62px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 14px 0 18px; text-align: left;
  background: var(--plaque) var(--fond) center / cover no-repeat; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); overflow: hidden; }
.monde::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 18, 28, .85), rgba(20, 18, 28, .25)); }
.monde > * { position: relative; }
.monde b { font-size: 18px; font-weight: 700; text-transform: uppercase; }
.monde small { font-size: 13px; color: var(--jaune); display: flex; align-items: center; gap: 4px; }
.monde.choisi { box-shadow: inset 4px 0 0 var(--jaune), inset 0 0 0 2px var(--jaune); }
.monde.verrou { filter: grayscale(.8) brightness(.7); }
.monde .cadenas { position: absolute; right: 18px; top: 50%; width: 24px; transform: translateY(-50%); }
#grille-pistes { flex: 1; max-width: 640px; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(64px, 1fr); gap: 8px; align-content: start; overflow-y: auto; }
.tuile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--plaque);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 6px 4px; }
.tuile .n { font-size: 24px; font-weight: 700; line-height: 1; }
.tuile .etoiles .etoile { width: 13px; height: 13px; }
.tuile small { font-size: 11px; color: var(--doux); font-style: normal; font-variant-numeric: tabular-nums; }
.tuile.verrou { opacity: .5; }
.tuile.verrou img { width: 22px; }
.tuile.tuto { box-shadow: inset 0 3px 0 var(--jaune); }

/* Garage */
#liste-engins { display: flex; gap: 10px; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; align-items: stretch; padding-bottom: 6px; touch-action: pan-x; }
#garage .contenu { align-items: stretch; }
.carte-engin { flex: 0 0 clamp(210px, 30%, 280px); justify-content: center; display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px; background: var(--plaque); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); }
.carte-engin.choisi { box-shadow: inset 0 3px 0 var(--jaune); }
.carte-engin .vitrine { aspect-ratio: 3; }
.carte-engin .tete { display: flex; align-items: baseline; justify-content: space-between; }
.carte-engin b { font-size: 18px; font-weight: 700; text-transform: uppercase; }
.carte-engin .stats { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; font-size: 11px; font-style: normal; color: var(--doux); align-items: center; }
.carte-engin .barre { height: 5px; background: rgba(255, 247, 234, .15); }
.carte-engin .barre i { display: block; height: 100%; background: var(--jaune); }
.carte-engin .bouton-vif, .carte-engin .bouton-filet { min-height: 34px; font-size: 14px; margin-top: 4px; }
.carte-engin .prix { display: inline-flex; align-items: center; gap: 4px; }
.carte-engin .prix img { width: 16px; }
.achat { width: min(420px, 92vw); max-height: 94vh; align-items: center; text-align: center; gap: 6px; }
.achat .vitrine { width: min(260px, 50vw); }
.achat h2 { margin: 0; font-size: 22px; }
.prix-gros { margin: 0; font-size: 20px; font-weight: 700; color: var(--jaune); }

/* Réglages */
.reglage { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 300px; min-height: 44px; font-size: 18px; }
.interrupteur { width: 54px; height: 30px; border-radius: 15px; background: rgba(255, 247, 234, .2); position: relative; transition: background .15s; }
.interrupteur i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--blanc); transition: transform .15s; }
.interrupteur[aria-checked="true"] { background: var(--jaune); }
.interrupteur[aria-checked="true"] i { transform: translateX(24px); background: var(--encre); }
.choix-langue { display: flex; gap: 6px; }
.choix-langue button { padding: 6px 12px; background: rgba(255, 247, 234, .12); font-size: 15px; }
.choix-langue button.actif { background: var(--jaune); color: var(--encre); font-weight: 700; }
.version-jeu { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--doux); font-style: normal; }

/* Multijoueur */
.pile-multi { display: flex; flex-direction: column; gap: 12px; }
.pile-multi .bouton-vif { width: 100%; }
.sous-bouton { margin: 8px 0 0; font-size: 13px; color: var(--doux); font-style: normal; text-align: center; }
.liste #liste-amis { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ami { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px; width: 100%; text-align: left; background: rgba(255, 247, 234, .06); }
.ami-av { width: 32px; height: 32px; border-radius: 50%; background: #3a3446 center / cover; flex: none; }
.ami-nom { display: flex; flex-direction: column; flex: 1; }
.ami-nom small { font-size: 12px; color: var(--doux); font-style: normal; }
.ami-inviter { font-weight: 700; color: var(--jaune); font-size: 14px; }
.ami.hors-ligne { opacity: .5; }
.vide { color: var(--doux); font-size: 14px; font-style: normal; }
#places { display: flex; flex-direction: column; gap: 6px; }
.place { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; background: rgba(255, 247, 234, .06); }
.place b { flex: 1; }
.place small { color: var(--jaune); font-size: 13px; }
.place.libre { opacity: .45; }
.place i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.choix-piste { align-items: center; }
.selecteur { display: flex; align-items: center; gap: 14px; }
.selecteur span { font-size: 26px; font-weight: 700; min-width: 140px; text-align: center; font-variant-numeric: tabular-nums; }
.fleche { width: 46px; height: 46px; display: grid; place-items: center; background: rgba(255, 247, 234, .12); }
.fleche .ic { width: 22px; }
.fleche:disabled { opacity: .3; }
.bouton-app { min-height: 52px; padding: 0 24px; font-weight: 700; font-size: 18px; font-style: normal; color: #fff; border-radius: 6px; }
.bouton-app.whatsapp { background: #25d366; }
.bouton-app.telegram { background: #29a9eb; }

/* ---------- En partie ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#hud > * { pointer-events: auto; }
.cmd-haut { position: absolute; top: var(--marge); width: 48px; height: 48px; display: grid; place-items: center; padding: 0; background: rgba(0, 0, 0, .18); border-radius: 50%; }
.cmd-haut .ic { width: 26px; height: 26px; object-fit: contain; opacity: .92; }
#b-pause { left: var(--marge); }
#hud-droite { position: absolute; top: var(--marge); right: var(--marge); display: flex; align-items: center; gap: 10px; }
#hud-droite .cmd-haut { position: static; }
#hud-ecrous { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 18px; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums; pointer-events: none; }
#hud-ecrous img { width: 20px; }
#progres { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: min(40vw, 360px); height: 4px; background: rgba(255, 255, 255, .22); pointer-events: none; }
#progres i { position: absolute; top: -3px; width: 10px; height: 10px; border-radius: 50%; margin-left: -5px; }
#progres-moi { background: var(--jaune); box-shadow: 0 0 0 2px var(--encre); }
#progres-fantome { background: rgba(255, 255, 255, .6); }
#chrono { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
#chrono-t { min-width: 5.4em; text-align: center; font-weight: 700; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px rgba(0, 0, 0, .65); }
#ecart { font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); min-height: 1.2em; }
#ecart.avance { color: var(--vert); }
#ecart.retard { color: var(--rouge); }
#commandes { position: absolute; inset: auto 0 0 0; height: 0; pointer-events: none; }
.cmd { position: absolute; bottom: calc(var(--marge) + env(safe-area-inset-bottom)); width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); pointer-events: auto; touch-action: none; transition: background .06s; }
.cmd img { width: 40px; height: 40px; object-fit: contain; opacity: .9; }
.cmd.tenu { background: rgba(255, 255, 255, .24); }
#c-arriere { left: var(--marge); }
#c-avant { left: calc(var(--marge) + 88px); }
#c-frein { right: calc(var(--marge) + 92px); }
#c-gaz { right: var(--marge); width: 82px; height: 150px; border-radius: 41px; align-content: end; padding-bottom: 18px; overflow: hidden; }
#c-gaz .jauge { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--g, 0) * 100%); background: rgba(255, 255, 255, .18); }
#c-gaz img { position: relative; }
.cmd.eclaire { background: rgba(255, 194, 26, .35); box-shadow: inset 0 0 0 3px var(--jaune), 0 0 18px rgba(255, 194, 26, .7); }
body:not(.tactile) .cmd { display: none; }
#compte { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; font-weight: 700; font-size: 92px; color: var(--jaune);
  text-shadow: 0 4px 0 var(--encre), 0 0 18px rgba(0, 0, 0, .5); pointer-events: none; }
#compte.on { animation: compte .7s ease-out; }
@keyframes compte { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } }
#message { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); padding: 8px 26px; background: var(--plaque); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  font-weight: 700; font-size: 26px; text-transform: uppercase; opacity: 0; transition: opacity .2s; pointer-events: none; text-align: center; }
#message small { display: block; font-size: 18px; color: var(--jaune); }
#message.on { opacity: 1; }
#aide { position: absolute; bottom: calc(var(--marge) + 160px); left: 50%; transform: translateX(-50%); margin: 0; max-width: 70vw; padding: 6px 14px; background: rgba(0, 0, 0, .6);
  font-style: normal; font-size: 15px; text-align: center; opacity: 0; transition: opacity .3s; pointer-events: none; }
body:not(.tactile) #aide { bottom: 40px; }
#aide.on { opacity: 1; }

/* Fin */
.fin { display: flex; gap: 22px; align-items: center; max-width: 92vw; }
.fin-gauche { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 220px; }
.fin-droite { display: flex; flex-direction: column; gap: 12px; min-width: 240px; }
#titre-fin { margin: 0; font-size: 24px; text-transform: uppercase; text-align: center; }
#etoiles-fin { display: flex; gap: 6px; }
#etoiles-fin .etoile { width: 38px; height: 38px; }
#gros-fin { font-size: 46px; font-weight: 700; color: var(--jaune); font-variant-numeric: tabular-nums; line-height: 1; }
#detail-fin { display: flex; flex-direction: column; align-items: center; font-size: 14px; color: var(--doux); font-style: normal; }
#detail-fin b { color: var(--vert); font-weight: 600; }
#liste-fin { display: flex; flex-direction: column; gap: 4px; font-size: 15px; font-style: normal; }
#liste-fin .ligne { display: flex; justify-content: space-between; gap: 18px; padding: 4px 8px; background: rgba(255, 247, 234, .06); font-variant-numeric: tabular-nums; }
#liste-fin .ligne.moi { box-shadow: inset 3px 0 0 var(--jaune); }

/* Tutoriel */
#tuto { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 25; width: min(520px, 62vw); padding: 8px 16px 10px; background: var(--plaque);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); box-shadow: inset 0 3px 0 var(--jaune); text-align: center; transition: opacity .2s; }
#tuto small { font-size: 12px; color: var(--jaune); font-style: normal; letter-spacing: .1em; }
#tuto p { margin: 4px 0 8px; font-size: 17px; font-style: normal; }
#tuto em { display: block; margin: -2px 0 8px; color: var(--rouge); font-weight: 600; }
#tuto em.secoue { animation: secoue .3s; }
@keyframes secoue { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Toasts */
#toasts { position: fixed; left: var(--marge); bottom: calc(var(--marge) + 32px); z-index: 60; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--plaque); font-style: normal; font-size: 14px; animation: toast 2.9s forwards;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.toast i { width: 10px; height: 10px; border-radius: 50%; background: var(--jaune); flex: none; }
.toast.erreur i { background: var(--rouge); }
.toast.reussite i { background: var(--vert); }
@keyframes toast { 0% { opacity: 0; transform: translateY(8px); } 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Tourne ton téléphone */
#tourner { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; background: var(--encre) url(img/illustration.webp) 75% center / cover; }
#tourner::before { content: ''; position: absolute; inset: 0; background: rgba(20, 18, 28, .72); }
#tourner .centre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 20px; }
#tourner img { width: min(70vw, 360px); }
#tourner p { margin: 0; font-size: 18px; }
#tourner .aide { font-size: 13px; color: var(--doux); font-style: normal; }

/* Petits écrans (téléphone en paysage, ~740 × 360) */
@media (max-height: 420px) {
  .barre-haut { height: 54px; }
  .barre-haut h2 { font-size: 21px; }
  .contenu { top: 54px; }
  #menu .titre-menu { top: 3vh; width: min(40vw, 330px); }
  .modes { bottom: calc(var(--marge) + 38px); gap: 10px; }
  .mode { width: clamp(150px, 22vw, 200px); min-height: 128px; padding: 12px 12px 10px; }
  .mode b { font-size: 19px; }
  .mode .ic { width: 30px; height: 30px; }
  .mode small { font-size: 12px; }
  #mondes { width: 170px; gap: 6px; }
  .monde { height: 52px; }
  #grille-pistes { grid-auto-rows: 54px; gap: 6px; }
  .tuile .n { font-size: 20px; }
  .carte-engin { padding: 6px 10px 8px; }
  .carte-engin .vitrine { aspect-ratio: 3.4; }
  .carte-engin .stats { font-size: 10px; }
  #chrono-t { font-size: 28px; }
  .cmd { width: 70px; height: 70px; }
  #c-avant { left: calc(var(--marge) + 80px); }
  #c-frein { right: calc(var(--marge) + 86px); }
  #c-gaz { width: 76px; height: 136px; }
  #tuto { top: 6px; }
  #tuto p { font-size: 14px; margin: 2px 0 4px; }
  .reglage { min-height: 40px; font-size: 16px; }
  .panneau { padding: 14px 16px 12px; }
  #gros-fin { font-size: 38px; }
}