/* =====================================================================
   Aston GTLA — système visuel « Maquette HO » (v2)
   Le monde 3D est le héros : la table du maquettiste occupe tout l'écran.
   L'interface se pose dessus comme des feuilles de notice : une barre de jeu compacte en haut,
   une feuille qu'on tire du doigt en bas (téléphone) ou un panneau à droite (ordinateur),
   et un réglet d'acier pour naviguer. Mobile d'abord, ordinateur à partir de 900 px.
   ===================================================================== */
@import url("../fonts/fonts.css");

:root{
  --tapis:#2E5A4C; --tapis-fonce:#1F3F35; --tapis-nuit:#173029;
  --papier:#F6EEDF; --papier-2:#EDE3D0; --papier-3:#FFFAF1; --resine:#F4EBDD; --resine-2:#E9DCC6; --resine-3:#FFF9EF;
  --encre:#1D1B16; --encre-2:#4C4438; --encre-3:#857661; --trait-doux:rgba(29,27,22,.12); --trait-moyen:rgba(29,27,22,.24);
  --jaune:#E9B020; --jaune-clair:#F7DD93; --jaune-pale:#FBEFCB; --brique:#C2492F; --brique-pale:#F5DED5;
  --ok:#2E7D4F; --ok-pale:#DCEDDF; --ko:#C2492F; --ko-pale:#F6E0D8;
  --vendeur:#E9B020; --acheteur:#3F8A6B;

  --f-titre:'Archivo', 'Arial Black', system-ui, sans-serif;
  --f-texte:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-chiffre:'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r:14px; --r-s:10px; --r-xs:7px; --r-feuille:24px;
  --ombre-feuille:0 -1px 0 rgba(255,255,255,.6) inset, 0 -18px 50px -18px rgba(6,18,14,.55);
  --ombre-carte:0 1px 0 rgba(29,27,22,.08), 0 10px 24px -14px rgba(8,22,17,.45);
  --ombre-pastille:0 1px 0 rgba(29,27,22,.12), 0 6px 16px -8px rgba(8,22,17,.55);
  --grain:none;

  --haut:env(safe-area-inset-top,0px); --bas:env(safe-area-inset-bottom,0px);
  --gouttiere:max(16px, env(safe-area-inset-left,0px));
  --barre:66px; --hud:58px;
  --ease-ressort:cubic-bezier(.34,1.56,.64,1);
  --ease-sortie:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%; background:var(--tapis-nuit)}
body{margin:0; font-family:var(--f-texte); font-size:16px; line-height:1.5; color:var(--encre); background:var(--tapis-nuit);
  overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0; text-align:inherit}
a{color:inherit}
img,svg,canvas{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:inherit}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0}
:focus-visible{outline:3px solid var(--jaune); outline-offset:2px; border-radius:6px}
::selection{background:var(--jaune-clair); color:var(--encre)}
[hidden]{display:none!important}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- Le monde 3D ---------- */
#monde{position:fixed; inset:0; width:100%; height:100%; z-index:0; touch-action:none; outline:none}
#voile{position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(130% 95% at 50% 38%, transparent 58%, rgba(12,24,20,.5) 100%)}
#ecran{position:fixed; inset:0; z-index:2; pointer-events:none}
#ecran > *, #vue > *{pointer-events:auto}
#vue{pointer-events:none}

/* ---------- Typographie ---------- */
.titre{font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:122%; text-transform:uppercase; letter-spacing:-.01em; line-height:.95}
.titre-xl{font-size:clamp(32px, 9vw, 58px)}
.titre-l{font-size:clamp(25px, 6.6vw, 34px)}
.titre-m{font-size:clamp(19px, 5vw, 23px)}
.titre-s{font-size:14px; letter-spacing:.01em}
.surligne{background:linear-gradient(transparent 60%, var(--jaune) 60%, var(--jaune) 90%, transparent 90%); padding:0 .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.etiquette{font-family:var(--f-chiffre); font-size:10.5px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; font-weight:500}
.chiffre{font-family:var(--f-chiffre); font-variant-numeric:tabular-nums}
.muet{color:var(--encre-2)}
.discret{color:var(--encre-3)}
.texte{font-size:15.5px; line-height:1.5}
.num{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid currentColor; font-family:var(--f-chiffre); font-size:11px; font-weight:600; flex:none; line-height:1}
.num.plein{background:var(--encre); color:var(--papier); border-color:var(--encre)}

/* ---------- Boutons en plastique moulé ---------- */
.btn{--fond:var(--jaune); --texte:var(--encre); --relief:#1D1B16;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--fond) 88%, white) 0%, var(--fond) 55%, color-mix(in srgb, var(--fond) 92%, black) 100%);
  color:var(--texte); border:2px solid var(--encre); border-radius:var(--r-s);
  box-shadow:0 4px 0 var(--relief), 0 10px 18px -10px rgba(0,0,0,.5);
  font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:112%; text-transform:uppercase; font-size:15px; letter-spacing:.01em; white-space:nowrap;
  transition:transform .12s var(--ease-sortie), box-shadow .12s var(--ease-sortie), filter .2s; user-select:none; -webkit-user-select:none; text-decoration:none}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--relief), 0 4px 10px -8px rgba(0,0,0,.5)}
.btn:disabled{filter:grayscale(.5) opacity(.55); cursor:not-allowed}
.btn.brique{--fond:var(--brique); --texte:var(--papier-3)}
.btn.clair{--fond:var(--papier-3)}
.btn.vert{--fond:var(--acheteur); --texte:var(--papier-3)}
.btn.large{width:100%}
.btn.petit{min-height:42px; padding:0 16px; font-size:13px; box-shadow:0 3px 0 var(--relief)}
.btn .fleche{width:18px; height:18px; transition:transform .25s var(--ease-ressort)}
.btn:hover .fleche{transform:translateX(4px)}
.btn-texte{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-chiffre); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; padding:10px 4px; color:inherit}
.icone-btn{display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:var(--papier-3); color:var(--encre); border:2px solid var(--encre); box-shadow:0 3px 0 var(--encre)}
.icone-btn svg{width:18px; height:18px}
.icone-btn:active{transform:translateY(2px); box-shadow:0 1px 0 var(--encre)}

/* ---------- Puces, jauges ---------- */
.puce{display:inline-flex; align-items:center; gap:6px; min-height:26px; padding:3px 10px; border-radius:999px; background:var(--papier-3); border:1px solid var(--trait-moyen); font-family:var(--f-chiffre); font-size:10.5px; font-weight:500; white-space:nowrap; letter-spacing:.02em}
.puce.jaune{background:var(--jaune-clair); border-color:rgba(29,27,22,.3)}
.puce.sombre{background:var(--encre); color:var(--papier); border-color:var(--encre)}
.puces{display:flex; flex-wrap:wrap; gap:6px}
.metre{position:relative; height:14px; border-radius:4px; background:linear-gradient(#EFE6D4, #DCCFB6); border:1px solid rgba(29,27,22,.3); overflow:hidden}
.metre::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(29,27,22,.6) 0 1px, transparent 1px 10%) 0 0/100% 55% no-repeat, repeating-linear-gradient(90deg, rgba(29,27,22,.35) 0 1px, transparent 1px 2%) 0 0/100% 30% no-repeat}
.metre i{position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(#F2C24A, #D9A015); border-right:2px solid var(--encre); transition:width 1.1s var(--ease-sortie)}

/* ---------- Barre de jeu (haut) ---------- */
.haut{position:fixed; top:0; left:0; right:0; z-index:5; height:calc(var(--haut) + var(--hud)); padding:calc(var(--haut) + 9px) var(--gouttiere) 0; display:flex; align-items:center; gap:8px; pointer-events:none}
.haut > *{pointer-events:auto}
.joueur{display:flex; align-items:center; gap:9px; height:46px; padding:0 14px 0 4px; border-radius:999px; background:var(--papier) var(--grain); box-shadow:var(--ombre-pastille); min-width:0; max-width:58vw}
.joueur .avatar{position:relative; width:38px; height:38px; border-radius:50%; background:var(--tapis); flex:none; border:2px solid var(--encre)}
.joueur .avatar canvas{width:100%; height:100%; border-radius:50%}
.joueur .avatar .couronne{position:absolute; left:50%; top:-13px; width:24px; height:15px; margin-left:-12px}
.joueur .txt{min-width:0; display:flex; flex-direction:column; line-height:1.15}
.joueur b{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.joueur small{font-family:var(--f-chiffre); font-size:10px; color:var(--encre-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.02em}
.haut .espace{flex:1}
.compteur{display:flex; align-items:baseline; gap:6px; height:46px; padding:0 14px; border-radius:999px; background:var(--encre); color:var(--papier); box-shadow:var(--ombre-pastille); white-space:nowrap}
.compteur{align-items:center}
.compteur .chiffre{font-size:17px; font-weight:600}
.compteur .etiquette{font-size:9.5px; opacity:.7}
.btn-son{width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--papier) var(--grain); box-shadow:var(--ombre-pastille); color:var(--encre)}
.btn-son svg{width:20px; height:20px}
.btn-son[aria-pressed="false"]{color:var(--encre-3)}

/* Cible : la personne juste devant toi */
.rival{position:fixed; z-index:4; left:var(--gouttiere); top:calc(var(--haut) + var(--hud) + 6px); max-width:calc(100% - 2 * var(--gouttiere));
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 14px 0 5px; border-radius:999px;
  background:var(--jaune); border:2px solid var(--encre); box-shadow:0 3px 0 var(--encre); font-weight:600; font-size:13.5px; white-space:nowrap}
.rival .fl{display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--encre); color:var(--jaune); flex:none}
.rival .fl svg{width:14px; height:14px}
.rival span:last-child{overflow:hidden; text-overflow:ellipsis}
.rival.flash{animation:rival-flash .9s var(--ease-sortie)}
@keyframes rival-flash{0%{transform:scale(1)}25%{transform:scale(1.05) rotate(-1deg)}60%{transform:scale(.99)}100%{transform:none}}

/* ---------- Le réglet d'acier (navigation) ---------- */
.onglets{position:fixed; left:0; right:0; bottom:0; z-index:6; height:calc(var(--barre) + var(--bas)); padding:0 var(--gouttiere) var(--bas);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); align-items:stretch;
  background:linear-gradient(180deg, #E7E2D8 0%, #D6D0C4 100%); border-top:1.5px solid #8F897E;
  box-shadow:0 -12px 30px -14px rgba(6,18,14,.65), inset 0 1px 0 rgba(255,255,255,.75)}
.onglets::before{content:""; position:absolute; left:0; right:0; top:0; height:10px; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 7px) 0 0/100% 4px no-repeat, repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 35px) 0 0/100% 9px no-repeat}
.onglet{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:2px 0 13px; color:var(--encre-3); text-decoration:none; transition:color .2s; min-width:0}
.onglet svg{width:25px; height:25px; transition:transform .35s var(--ease-ressort)}
.onglet span{font-family:var(--f-titre); font-style:italic; font-weight:800; font-stretch:105%; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}
.onglet::after{content:""; position:absolute; left:50%; bottom:4px; width:30px; height:5px; margin-left:-15px; border-radius:3px; background:var(--jaune); border:1.5px solid var(--encre); transform:scaleX(0); transition:transform .35s var(--ease-ressort)}
.onglet[aria-current="page"]{color:var(--encre)}
.onglet[aria-current="page"] svg{transform:translateY(-2px) scale(1.06)}
.onglet[aria-current="page"]::after{transform:scaleX(1)}
.onglet .pastille{position:absolute; top:8px; left:calc(50% + 7px); min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--brique); color:#fff; font-family:var(--f-chiffre); font-size:9.5px; display:grid; place-items:center; border:1.5px solid var(--encre)}

/* ---------- La feuille : panneau principal de chaque écran ---------- */
.panneau{position:fixed; left:0; right:0; bottom:calc(var(--barre) + var(--bas)); z-index:3;
  height:var(--h-feuille, 47dvh); max-height:calc(100dvh - var(--barre) - var(--bas) - var(--haut) - var(--hud) - 8px);
  display:flex; flex-direction:column; background:var(--papier) var(--grain); border-radius:var(--r-feuille) var(--r-feuille) 0 0; box-shadow:var(--ombre-feuille);
  transition:height .45s var(--ease-sortie)}
.panneau.glisse{transition:none}
.panneau.plein{--h-feuille:100dvh}
.poignee{flex:none; display:flex; justify-content:center; align-items:center; height:24px; cursor:grab; touch-action:none}
.poignee i{width:42px; height:5px; border-radius:3px; background:var(--trait-moyen)}
.defil{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 var(--gouttiere) 24px; scrollbar-width:thin; scrollbar-color:var(--trait-moyen) transparent}
.pile{display:flex; flex-direction:column}
.pile > * + *{border-top:1px solid var(--trait-doux)}
.section{padding:18px 0}
.pile > .section:first-child{padding-top:4px}
.entete-feuille{display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.entete-feuille .titre{margin-top:4px}

/* Carte mise en avant à l'intérieur de la feuille */
.carte{position:relative; padding:16px; border-radius:var(--r); background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:0 3px 0 var(--encre)}
.carte.repere::before,.carte.repere::after{content:""; position:absolute; width:12px; height:12px; opacity:.4; pointer-events:none;
  background:linear-gradient(var(--encre),var(--encre)) center/100% 1px no-repeat, linear-gradient(var(--encre),var(--encre)) center/1px 100% no-repeat}
.carte.repere::before{top:7px; left:7px}
.carte.repere::after{bottom:7px; right:7px}

/* Ordinateur : rail d'onglets à gauche, feuille flottante à droite */
@media (min-width: 900px){
  :root{--barre:0px; --rail:104px; --colonne:430px; --hud:64px}
  .onglets{top:0; bottom:0; right:auto; width:var(--rail); height:auto; padding:calc(var(--haut) + 92px) 0 24px; grid-template-columns:1fr; grid-auto-rows:84px; align-content:start;
    border-top:0; border-right:1.5px solid #8F897E; background:linear-gradient(90deg, #E7E2D8, #D6D0C4); box-shadow:12px 0 30px -14px rgba(6,18,14,.6), inset -1px 0 0 rgba(255,255,255,.6)}
  .onglets::before{left:auto; right:0; top:0; bottom:0; width:10px; height:auto;
    background:repeating-linear-gradient(0deg, var(--encre) 0 1px, transparent 1px 7px) 100% 0/4px 100% no-repeat, repeating-linear-gradient(0deg, var(--encre) 0 1px, transparent 1px 35px) 100% 0/9px 100% no-repeat}
  .onglet{padding:0; gap:5px}
  .onglet::after{left:8px; bottom:auto; top:50%; width:5px; height:32px; margin:-16px 0 0; transform:scaleY(0)}
  .onglet[aria-current="page"]::after{transform:scaleY(1)}
  .haut{left:var(--rail); padding-left:24px; padding-right:24px}
  .rival{left:calc(var(--rail) + 24px)}
  .panneau{left:auto; right:20px; top:calc(var(--haut) + var(--hud) + 14px); bottom:20px; width:var(--colonne); height:auto; max-height:none; border-radius:var(--r-feuille); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 60px -24px rgba(6,18,14,.65)}
  .panneau.large{width:min(720px, calc(100% - var(--rail) - 48px))}
  .poignee{height:14px; cursor:default}
  .poignee i{display:none}
  .defil{padding:4px 26px 26px}
  .marque{left:calc(var(--rail) + 24px)!important}
}

/* ---------- Mission du jour ---------- */
.ordre .trajet{list-style:none; display:flex; align-items:center; margin:16px 0 4px}
.trajet li{flex:1; display:flex; align-items:center; min-width:0}
.trajet .arret{position:relative; width:14px; height:14px; border-radius:50%; border:2px solid var(--encre); background:var(--papier-3); flex:none}
.trajet .route{flex:1; height:2px; background:repeating-linear-gradient(90deg, var(--encre) 0 5px, transparent 5px 9px); opacity:.45}
.trajet li.arret-jeu .arret{width:20px; height:20px; border-radius:5px; background:var(--jaune); transform:rotate(45deg)}
.trajet li:last-child .route{display:none}
.ordre .bas-carte{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px}
.ordre .actions{margin-top:16px}
.ordre{container-type:inline-size}
.titre-ordre{margin-top:8px; white-space:nowrap; font-size:clamp(18px, 8.1cqi, 32px)}
.prof{display:flex; gap:12px; align-items:flex-start}
.prof .visage{width:44px; height:44px; border-radius:50%; overflow:hidden; border:2px solid var(--encre); flex:none}
.prof .visage canvas{width:100%; height:100%}
.bulle-prof{position:relative; padding:12px 14px; border-radius:4px 16px 16px 16px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); font-size:15px; line-height:1.42}
.stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.stat{padding:12px 10px; border-radius:var(--r-s); background:var(--papier-2); display:flex; flex-direction:column; gap:4px; min-width:0}
.stat b{font-family:var(--f-chiffre); font-size:17px; font-weight:600; line-height:1.15; overflow-wrap:anywhere}
.stat b.mot{font-family:var(--f-texte); font-size:14.5px; font-weight:700}
.stat .etiquette{font-size:9.5px; color:var(--encre-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat svg{width:22px; height:22px}
.fil{list-style:none; display:flex; flex-direction:column}
.fil li{display:flex; gap:10px; align-items:baseline; padding:9px 0; font-size:14px; line-height:1.35}
.fil li + li{border-top:1px dashed var(--trait-doux)}
.fil li::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--jaune); border:1.5px solid var(--encre); flex:none; transform:translateY(-1px)}
.fil time{font-family:var(--f-chiffre); font-size:10px; color:var(--encre-3); margin-left:auto; white-space:nowrap; padding-left:8px}

/* ---------- Partie en cours (plein écran) ---------- */
.jeu{position:fixed; inset:0; z-index:8; display:flex; flex-direction:column; color:var(--papier);
  background-color:var(--tapis);
  background-image:var(--grain), linear-gradient(rgba(244,235,221,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(244,235,221,.07) 1px, transparent 1px),
    radial-gradient(120% 90% at 50% 40%, rgba(30,56,47,.55), rgba(20,38,32,.92)), var(--fond-jeu, linear-gradient(var(--tapis), var(--tapis)));
  background-size:96px 96px, 48px 48px, 48px 48px, cover, cover; background-position:center}
.jeu-haut{flex:none; display:flex; align-items:center; gap:12px; padding:calc(var(--haut) + 12px) var(--gouttiere) 12px; max-width:760px; width:100%; margin:0 auto}
.avancement{flex:1; display:flex; gap:4px; min-width:0}
.avancement i{flex:1; height:8px; border-radius:4px; background:rgba(244,235,221,.16); transition:background .35s}
.avancement i.ok{background:var(--jaune)}
.avancement i.ko{background:var(--brique)}
.avancement i.encours{background:rgba(244,235,221,.55)}
.combo{font-family:var(--f-chiffre); font-size:12px; font-weight:600; color:var(--jaune); min-width:56px; text-align:right; white-space:nowrap}
.jeu-corps{flex:1; min-height:0; overflow-y:auto; padding:6px var(--gouttiere) calc(28px + var(--bas)); display:flex; flex-direction:column}
.jeu-corps > div{width:100%; margin:auto}
.jeu-corps.avec-retour{padding-bottom:calc(230px + var(--bas))}

/* La feuille d'exercice */
.exo{position:relative; width:100%; padding:20px 18px 18px; border-radius:var(--r); background:var(--papier) var(--grain); color:var(--encre); box-shadow:0 2px 0 rgba(0,0,0,.25), 0 30px 60px -30px rgba(0,0,0,.6)}
.exo .ref{display:flex; align-items:center; gap:8px; color:var(--encre-2); margin-bottom:12px}
.exo .ref .trait{flex:1; height:1px; background:currentColor; opacity:.22}
.sujet-q{font-size:clamp(19px, 5.2vw, 23px); line-height:1.28; font-weight:700; margin:0 0 18px; letter-spacing:-.005em}
.consigne{font-size:16.5px; line-height:1.35; font-weight:600; margin:0 0 14px}

/* Flash */
.choix{display:flex; flex-direction:column; gap:10px}
.choix button{display:flex; align-items:center; gap:12px; min-height:58px; padding:12px 16px 12px 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); font-size:16.5px; font-weight:500; line-height:1.3;
  transition:transform .15s var(--ease-sortie), box-shadow .15s, border-color .2s, background .2s}
.choix button:hover:not(:disabled){border-color:var(--encre); box-shadow:0 3px 0 var(--encre)}
.choix button:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 var(--encre)}
.choix .lettre{display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:8px; border:1.5px solid currentColor; font-family:var(--f-chiffre); font-size:12px; font-weight:600}
.choix button.bon{background:var(--ok-pale); border-color:var(--ok); box-shadow:0 3px 0 var(--ok)}
.choix button.bon .lettre{background:var(--ok); color:#fff; border-color:var(--ok)}
.choix button.faux{background:var(--ko-pale); border-color:var(--ko); box-shadow:0 3px 0 var(--ko)}
.choix button.faux .lettre{background:var(--ko); color:#fff; border-color:var(--ko)}
.choix button:disabled{cursor:default}

/* Tampon */
.tampon-zone{position:relative; padding:28px 20px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px dashed var(--trait-moyen); min-height:150px; display:grid; place-items:center; text-align:center; font-size:19px; font-weight:600; line-height:1.38; overflow:hidden}
.tampons{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px}
.tampon{position:relative; height:86px; border-radius:var(--r-s); border:2px solid var(--encre); background:linear-gradient(#5C4B3B, #3B3027); box-shadow:0 5px 0 var(--encre); color:var(--papier); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px}
.tampon b{font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:118%; font-size:17px; letter-spacing:.05em}
.tampon .etiquette{opacity:.7; font-size:9.5px}
.tampon:active{transform:translateY(4px); box-shadow:0 1px 0 var(--encre)}
.marque-tampon{position:absolute; left:50%; top:50%; padding:4px 16px; border:4px double currentColor; border-radius:7px; font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:122%; font-size:28px; letter-spacing:.06em; text-transform:uppercase; transform:translate(-50%,-50%) rotate(-11deg); pointer-events:none; mix-blend-mode:multiply; white-space:nowrap}
.marque-tampon.ok{color:var(--ok)}
.marque-tampon.ko{color:var(--ko)}

/* Trou */
.champ{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 16px; border-radius:var(--r-s); border:2px solid var(--encre); background:var(--papier-3); transition:border-color .2s}
.champ:focus-within{box-shadow:0 0 0 4px rgba(233,176,32,.35)}
.champ input{flex:1; min-width:0; border:0; background:transparent; font-size:19px; font-weight:600; padding:10px 0; outline:none}
.champ.bon{border-color:var(--ok); background:var(--ok-pale)}
.champ.faux{border-color:var(--ko); background:var(--ko-pale)}
.trou{display:inline-block; min-width:4.5em; border-bottom:3px solid var(--encre); margin:0 .15em; transform:translateY(-.1em)}

/* Calculette */
.calculette{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:6px; padding:14px; border-radius:var(--r); background:linear-gradient(#3B3732, #2A2723); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 0 #14120F}
.calculette .ecran{grid-column:1/-1; min-height:58px; padding:8px 14px; border-radius:8px; background:linear-gradient(#C3CDAA, #AEBB94); box-shadow:inset 0 2px 6px rgba(0,0,0,.35); font-family:var(--f-chiffre); font-size:26px; text-align:right; color:#1D2414; overflow:hidden; white-space:nowrap; display:flex; align-items:center; justify-content:flex-end}
.calculette button{height:50px; border-radius:8px; background:linear-gradient(#5D5850, #47433C); color:var(--papier); font-family:var(--f-chiffre); font-size:18px; box-shadow:0 3px 0 #1B1916, inset 0 1px 0 rgba(255,255,255,.15)}
.calculette button{text-align:center}   /* le reset des boutons hérite l'alignement : les touches seraient calées à gauche */
.calculette button:active{transform:translateY(2px); box-shadow:0 1px 0 #1B1916}
.calculette button.op{background:linear-gradient(#E9BF45, #CC9C1E); color:var(--encre)}
.calculette button.ok{background:linear-gradient(#56A57A, #2E7D4F); font-family:var(--f-titre); font-style:italic; font-weight:800; font-size:13px; text-transform:uppercase}

/* Paires */
.paires{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 26px}
.paires svg.liens{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.paires button{min-height:54px; padding:10px 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); font-size:14.5px; font-weight:600; line-height:1.25; text-align:left; transition:transform .2s var(--ease-ressort), background .2s, border-color .2s; overflow-wrap:anywhere}
.paires button.choisi{border-color:var(--encre); background:var(--jaune-clair); transform:scale(1.03)}
.paires button.lie{background:var(--papier-2)}
.paires button.bon{background:var(--ok-pale); border-color:var(--ok)}
.paires button.faux{background:var(--ko-pale); border-color:var(--ko)}
.ligne-actions{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px}

/* Ordre */
.tickets{list-style:none; display:flex; flex-direction:column; gap:8px}
.tickets li{position:relative; display:flex; align-items:center; gap:12px; min-height:54px; padding:10px 14px 10px 18px; 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-weight:600; line-height:1.3; touch-action:none; user-select:none; cursor:grab}
.tickets li::before{content:""; position:absolute; left:6px; top:9px; bottom:9px; width:2px; background:radial-gradient(circle, var(--trait-moyen) 1px, transparent 1.5px) 0 0/2px 6px repeat-y}
.tickets li.saisi{cursor:grabbing; box-shadow:0 16px 28px -10px rgba(0,0,0,.45); z-index:2; background:var(--jaune-clair); border-color:var(--encre)}
.tickets li .poignee-t{margin-left:auto; opacity:.4; font-size:18px; letter-spacing:-2px}
.tickets li.bon{border-color:var(--ok); background:var(--ok-pale)}
.tickets li.faux{border-color:var(--ko); background:var(--ko-pale)}

/* Retour (correction) : il monte du bas de l'écran */
.retour{position:fixed; left:0; right:0; bottom:0; z-index:9; padding:18px var(--gouttiere) calc(18px + var(--bas)); background:var(--papier) var(--grain); color:var(--encre);
  border-top:5px solid var(--ok); border-radius:var(--r-feuille) var(--r-feuille) 0 0; box-shadow:0 -20px 50px -20px rgba(0,0,0,.6)}
.retour.ko{border-top-color:var(--ko)}
.retour .contenu{max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:10px; max-height:52dvh; overflow-y:auto}
.retour .tete-retour{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.retour .coach{display:flex; align-items:center; gap:8px; padding:3px 12px 3px 3px; border-radius:22px; background:var(--papier-2); font-size:13.5px; font-weight:600; color:var(--encre-2)}
.retour .coach .portrait.mini{width:34px; height:34px; border-radius:50%; overflow:hidden; display:block; flex:none; box-shadow:0 0 0 1.5px var(--encre)}
.retour .coach .portrait.mini > *{width:100%; height:100%; display:block}
.retour .verdict{display:flex; align-items:center; gap:10px; font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:115%; text-transform:uppercase; font-size:19px}
.retour.ok .verdict{color:var(--ok)}
.retour.ko .verdict{color:var(--ko)}
.retour .verdict .pastille-v{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:currentColor}
.retour .verdict .pastille-v svg{width:16px; height:16px; color:#fff}
.retour .explication{font-size:15.5px; line-height:1.5}
.retour .explication p + p{margin-top:6px}
.retour .attendu{padding:10px 12px; border-radius:var(--r-xs); background:var(--papier-2); font-size:14.5px}
.retour .source{font-family:var(--f-chiffre); font-size:10.5px; color:var(--encre-3); letter-spacing:.02em}
.retour .btn{margin-top:4px}

/* ---------- Le relais ---------- */
.exo.relais{container:relais / inline-size}
.relais-tete{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:2px 0 6px}
.code-incoterm{display:flex; align-items:center; gap:12px; min-width:0}
.code-incoterm b{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:125%; font-size:46px; line-height:1; color:var(--jaune); -webkit-text-stroke:1.5px var(--encre); text-shadow:0 3px 0 var(--encre)}
.code-incoterm span{font-size:14px; line-height:1.3}
.relais-legende{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
.relais-legende .puce i{width:12px; height:12px; border-radius:3px; border:1.5px solid var(--encre)}
.piste{display:flex; flex-direction:column; align-items:stretch; margin:8px 0 16px}
.frontiere{position:relative; height:30px; display:grid; place-items:center; border-radius:6px}
.frontiere i{display:block; width:100%; height:0; border-top:2px dashed var(--trait-moyen); transition:border-color .2s}
.frontiere:hover i{border-top-color:var(--brique)}
.frontiere.choisie i{border-top:3px solid var(--brique)}
.frontiere.choisie::before{content:"le risque passe ici"; position:absolute; left:18px; top:50%; transform:translateY(-50%); padding:2px 8px; border-radius:4px; background:var(--brique); color:var(--papier-3); font-family:var(--f-chiffre); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; z-index:2; white-space:nowrap}
.drapeau-pose,.drapeau-juste{position:absolute; left:-12px; top:-27px; width:24px; z-index:3; pointer-events:none}
.drapeau-juste{left:auto; right:8px}
.etape-relais{position:relative; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:54px; padding:8px 12px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--trait-moyen); overflow:hidden; transition:box-shadow .3s, outline-color .3s; outline:2.5px solid transparent; outline-offset:1px}
.etape-relais > *:not(.peinture){position:relative; z-index:1}
.etape-relais .ico svg{width:32px; height:32px}
.etape-relais .lib{font-weight:600; font-size:14px; line-height:1.2; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; min-width:0; max-width:100%}
.etape-relais .payeur{font-size:10px}
.etape-relais .peinture{position:absolute; inset:0; z-index:0; transform-origin:0 50%; transform:scaleX(0)}
.etape-relais[data-payeur="vendeur"] .peinture{background:var(--vendeur); transform:scaleX(1)}
.etape-relais[data-payeur="acheteur"] .peinture{background:var(--acheteur); transform:scaleX(1)}
.etape-relais[data-payeur="acheteur"]{color:var(--papier-3)}
.etape-relais.peignable{cursor:pointer}
.etape-relais.peignable:active{transform:scale(.985)}
.etape-relais.risque-vendeur{box-shadow:inset 5px 0 0 var(--vendeur)}
.etape-relais.risque-acheteur{box-shadow:inset 5px 0 0 var(--acheteur)}
.etape-relais.juste{outline-color:var(--ok)}
.etape-relais.fausse{outline-color:var(--ko)}
.relais-actions{display:flex; justify-content:flex-end}
.contrat{font-size:16px; line-height:1.55; padding:16px 18px; background:var(--papier-3); border:1px solid var(--trait-moyen); border-radius:5px; box-shadow:3px 3px 0 var(--trait-doux)}
.contrat::before{content:"Extrait du contrat de vente"; display:block; font-family:var(--f-chiffre); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3); margin-bottom:8px}
.tuiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:8px}
.tuiles button{min-height:72px; padding:8px 4px; display:flex; flex-direction:column; align-items:center; justify-content:center; 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-titre); font-style:italic; font-weight:900; font-stretch:122%; font-size:20px; text-align:center}
.tuiles button small{display:block; margin-top:4px; font-family:var(--f-chiffre); font-style:normal; font-weight:400; font-size:8.5px; line-height:1.25; letter-spacing:.02em; color:var(--encre-3); white-space:normal; overflow-wrap:break-word; padding:0 2px}
.tuiles button.bon{background:var(--ok-pale); border-color:var(--ok)}
.tuiles button.faux{background:var(--ko-pale); border-color:var(--ko)}
/* Trajet horizontal seulement s'il y a la place : chaque étape garde au moins ~86 px */
@container relais (min-width: 960px){
  .piste{flex-direction:row; align-items:stretch; margin-top:44px}
  .frontiere{height:auto; width:20px; flex:none}
  .frontiere i{width:0; height:100%; border-top:0; border-left:2px dashed var(--trait-moyen)}
  .frontiere:hover i{border-left-color:var(--brique)}
  .frontiere.choisie i{border-top:0; border-left:3px solid var(--brique)}
  .frontiere.choisie::before{left:50%; top:auto; bottom:-26px; transform:translateX(-50%); font-size:8.5px}
  .drapeau-pose,.drapeau-juste{left:50%; margin-left:-8px; top:-42px}
  .drapeau-juste{margin-left:4px}
  .etape-relais{flex:1; min-width:0; grid-template-columns:1fr; justify-items:center; text-align:center; gap:6px; padding:12px 5px; min-height:140px}
  .etape-relais .lib{font-size:12.5px}
  .etape-relais.risque-vendeur{box-shadow:inset 0 5px 0 var(--vendeur)}
  .etape-relais.risque-acheteur{box-shadow:inset 0 5px 0 var(--acheteur)}
}

/* ---------- Bilan de mission ---------- */
.bilan{text-align:center; padding:28px 20px 22px}
.bilan .gros{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:125%; font-size:72px; line-height:1}
.bilan .stats{margin:20px 0 6px}

/* ---------- Garage ---------- */
.etapes-montage{list-style:none; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:14px}
.etapes-montage li{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:74px; padding:10px 4px; border-radius:var(--r-s); background:var(--papier-2); text-align:center; font-size:11.5px; font-weight:600; line-height:1.15; position:relative; min-width:0}
.etapes-montage li span:last-child{max-width:100%; overflow-wrap:anywhere}
.etapes-montage li.obtenue{background:var(--papier-3); box-shadow:inset 0 0 0 1.5px var(--encre)}
.etapes-montage li.obtenue .num{background:var(--encre); color:var(--papier); border-color:var(--encre)}
.etapes-montage li.prochaine{background:var(--jaune-pale); box-shadow:inset 0 0 0 1.5px var(--encre)}
.etapes-montage li.verrou{color:var(--encre-3)}
.vehicules{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; margin-top:10px}
.vehicules::-webkit-scrollbar{display:none}
.vehicules button{flex:none; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); font-weight:600; font-size:13.5px; white-space:nowrap}
.vehicules button[aria-pressed="true"]{background:var(--encre); color:var(--papier); border-color:var(--encre)}
.vehicules button:disabled{color:var(--encre-3); background:transparent; border-style:dashed}
.options{display:flex; flex-wrap:wrap; gap:8px}
.options button{min-width:44px; height:44px; padding:0 14px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--trait-moyen); font-size:13.5px; font-weight:600; white-space:nowrap}
.options button[aria-pressed="true"]{border-color:var(--encre); box-shadow:inset 0 0 0 2px var(--encre); background:var(--jaune-pale)}
.options button.pastille-couleur{width:40px; min-width:40px; height:40px; padding:0; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.options button.pastille-couleur[aria-pressed="true"]{box-shadow:0 0 0 3px var(--papier), 0 0 0 5px var(--encre)}

/* ---------- Classement : tickets perforés ---------- */
.classement{list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:14px}
.classement li{position:relative; display:grid; grid-template-columns:46px 38px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:60px; padding:8px 14px 8px 0; border-radius:8px;
  background:radial-gradient(circle at 46px 0, transparent 6px, var(--papier-3) 6.5px) top/100% 51% no-repeat, radial-gradient(circle at 46px 100%, transparent 6px, var(--papier-3) 6.5px) bottom/100% 51% no-repeat;
  filter:drop-shadow(0 1px 0 rgba(29,27,22,.18)) drop-shadow(0 6px 10px rgba(8,22,17,.12))}
.classement li::after{content:""; position:absolute; left:46px; top:9px; bottom:9px; border-left:1.5px dashed var(--trait-moyen)}
.classement li.moi{background:radial-gradient(circle at 46px 0, transparent 6px, var(--jaune-pale) 6.5px) top/100% 51% no-repeat, radial-gradient(circle at 46px 100%, transparent 6px, var(--jaune-pale) 6.5px) bottom/100% 51% no-repeat}
.classement .rang{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:122%; font-size:22px; text-align:center}
.classement li.premier .rang{color:var(--brique)}
.classement .mini{width:38px; height:38px; border-radius:50%; background:var(--tapis); border:1.5px solid var(--encre); overflow:hidden}
.classement .mini canvas{width:100%; height:100%}
.classement .nom{min-width:0}
.classement .nom b{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.classement .nom b svg{width:20px; height:13px; flex:none}
.classement .nom small{display:block; font-family:var(--f-chiffre); font-size:10px; color:var(--encre-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.classement .pts{font-family:var(--f-chiffre); font-size:15.5px; font-weight:600; text-align:right; white-space:nowrap}
.badge-moi{font-family:var(--f-chiffre); font-size:9px; padding:2px 6px; border-radius:5px; background:var(--encre); color:var(--papier); font-weight:500; flex:none}
.couronnes-semaine{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:12px}
.couronnes-semaine div{padding:12px 6px; border-radius:var(--r-s); background:var(--papier-2); text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0}
.couronnes-semaine svg{width:30px; height:19px}
.couronnes-semaine b{font-size:13.5px}
.couronnes-semaine .etiquette{font-size:9px; color:var(--encre-2)}

/* ---------- Cours : la notice ---------- */
.chapitres{display:flex; flex-direction:column; gap:10px}
.chapitre-carte{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 12px 12px 12px; width:100%; text-align:left; text-decoration:none; color:var(--encre);
  background:var(--papier-3); border:1.5px solid var(--trait-moyen); border-radius:var(--r); transition:transform .25s var(--ease-ressort), border-color .2s}
.chapitre-carte:hover{border-color:var(--encre); transform:translateX(-3px)}
.chapitre-carte:active{transform:scale(.985)}
.chapitre-carte .boite{width:52px; height:52px; border-radius:9px; border:2px solid var(--encre); display:grid; place-items:center; background:var(--jaune); box-shadow:3px 3px 0 var(--encre); transform:rotate(-3deg)}
.chapitre-carte .boite svg{width:30px; height:30px}
.chapitre-carte b{display:block; font-size:16px; line-height:1.25; font-weight:700}
.chapitre-carte small{display:block; font-size:13px; line-height:1.35; color:var(--encre-2); margin-top:2px}
.anneau{width:44px; height:44px; flex:none}
.bloc-titre{display:flex; align-items:center; gap:10px; margin:18px 0 8px; color:var(--encre-2)}
.notice-bloc{display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; padding:14px 0}
.notice-bloc + .notice-bloc{border-top:1.5px dashed var(--trait-doux)}
.notice-bloc .corps{min-width:0; font-size:15.5px; line-height:1.55}
.notice-bloc .corps p + p{margin-top:8px}
.notice-bloc .corps ul,.notice-bloc .corps ol{padding-left:20px; margin-top:6px}
.notice-bloc table{width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.35}
.notice-bloc th,.notice-bloc td{border:1px solid var(--trait-moyen); padding:7px 9px; text-align:left; vertical-align:top}
.notice-bloc th{background:var(--papier-2); font-weight:700}
.table-defil{overflow-x:auto; margin-top:6px}
.comparaison{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-top:8px}
.comparaison > div{padding:12px; border-radius:var(--r-s); background:var(--papier-2)}
.piege{background:var(--ko-pale); border-left:4px solid var(--ko); padding:10px 12px; border-radius:4px}
.memo{display:block; background:var(--jaune-pale); padding:12px 14px; border-radius:4px; box-shadow:2px 3px 0 var(--trait-doux); font-weight:600; line-height:1.45}
.a-retenir{list-style:none; display:flex; flex-direction:column; gap:8px}
.a-retenir li{display:flex; gap:10px; line-height:1.45}
.a-retenir li::before{content:""; width:16px; height:16px; margin-top:3px; flex:none; border-radius:50%; background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.lien-retour{display:inline-flex; align-items:center; gap:6px; padding:6px 0 10px; font-family:var(--f-chiffre); font-size:11px; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--encre-2)}

/* ---------- Tutoriel à projecteur ---------- */
.tuto{position:fixed; inset:0; z-index:20}
.tuto svg.masque{position:absolute; inset:0; width:100%; height:100%}
.tuto .bulle{position:absolute; width:min(340px, calc(100% - 32px)); padding:16px; background:var(--papier) var(--grain); border-radius:var(--r); box-shadow:0 30px 60px -20px rgba(0,0,0,.6); color:var(--encre)}
.tuto .bulle .etape{display:flex; align-items:center; gap:8px; color:var(--encre-2); margin-bottom:8px}
.tuto .bulle p{font-size:16px; line-height:1.42; font-weight:500}
.tuto .bulle .actions{display:flex; justify-content:space-between; align-items:center; margin-top:12px}
.modale{position:fixed; inset:0; z-index:20; display:grid; place-items:end center; padding:16px; background:rgba(10,20,16,.55)}
.modale .carte{width:min(440px, 100%); margin-bottom:calc(var(--bas) + 8px)}
@media (min-width: 900px){ .modale{place-items:center} }

/* ---------- Étiquettes (toasts) ---------- */
.toasts{position:fixed; left:0; right:0; top:calc(var(--haut) + 10px); z-index:30; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; padding:0 var(--gouttiere)}
.toast{display:flex; align-items:center; gap:10px; max-width:100%; padding:11px 18px 11px 12px; background:var(--encre); color:var(--papier); border-radius:12px; font-weight:600; font-size:14.5px; line-height:1.3; box-shadow:0 16px 34px -12px rgba(0,0,0,.6)}
.toast::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--tapis-nuit); box-shadow:inset 0 0 0 2px var(--papier); flex:none}
.toast.or{background:var(--jaune); color:var(--encre)}
.toast.or::before{box-shadow:inset 0 0 0 2px var(--encre); background:var(--jaune-clair)}

/* ---------- Accueil, connexion, inscription ---------- */
.plein-ecran{position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--haut) + 20px) var(--gouttiere) calc(var(--bas) + 20px); pointer-events:none}
.plein-ecran > *{pointer-events:auto}
.marque{position:fixed; top:calc(var(--haut) + 16px); left:var(--gouttiere); z-index:9; color:var(--papier); display:flex; align-items:center; gap:10px; pointer-events:none; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.marque svg{width:34px; height:34px}
.marque b{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:122%; font-size:16px; letter-spacing:.03em; text-transform:uppercase}
.intro-carte{width:min(480px, 100%); margin:0 auto; padding:22px 20px 18px; border-radius:var(--r-feuille); background:var(--papier) var(--grain); box-shadow:0 30px 70px -24px rgba(0,0,0,.7)}
.intro-carte .accroche{font-size:16.5px; line-height:1.48; margin:12px 0 18px; color:var(--encre-2)}
.intro-carte .ref{display:flex; align-items:center; gap:8px; color:var(--encre-2)}
.intro-carte .ref .trait{flex:1; height:1px; background:currentColor; opacity:.22}
.google svg{width:20px; height:20px}
.pile-form{display:flex; flex-direction:column; gap:10px}
.apercu-perso{display:flex; gap:14px; align-items:center; margin:12px 0 6px}
.apercu-perso .portrait{width:76px; height:76px; border-radius:50%; overflow:hidden; border:2.5px solid var(--encre); flex:none}
.apercu-perso .portrait canvas{width:100%; height:100%}
@media (min-width: 900px){ .plein-ecran{justify-content:center; align-items:flex-end; padding-right:48px} .intro-carte{margin:0} }

/* ---------- Chargement ---------- */
#chargement{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px var(--gouttiere); color:var(--encre); overflow:hidden;
  background:
    radial-gradient(80% 60% at 28% 18%, rgba(255,220,160,.42), transparent 62%),
    radial-gradient(120% 90% at 50% 120%, rgba(40,20,8,.45), transparent 60%),
    repeating-linear-gradient(93deg, rgba(92,54,22,.07) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(91deg, rgba(255,235,200,.05) 0 1px, transparent 1px 23px),
    linear-gradient(160deg, #CDA06C, #AD7C4B 55%, #8C5F37);
  transition:clip-path .9s .25s cubic-bezier(.7,0,.2,1), opacity .4s .9s; clip-path:inset(0 0 0 0)}
#chargement.fini{clip-path:inset(0 0 100% 0)}
.ch-lumiere{position:absolute; inset:-20%; pointer-events:none; opacity:.55;
  background:linear-gradient(115deg, transparent 38%, rgba(255,226,170,.35) 42%, transparent 50%, transparent 54%, rgba(255,226,170,.28) 58%, transparent 66%);
  animation:ch-lumiere 9s ease-in-out infinite alternate}
.ch-centre{position:relative; display:flex; flex-direction:column; align-items:center; width:min(360px, 100%)}
.ch-couv{position:relative; width:100%; aspect-ratio:1.42; border-radius:10px; background:#F3E7D2 var(--grain); overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1.5px rgba(29,27,22,.85), 0 3px 0 #D9C6A2, 0 6px 0 #C8B28B, 0 28px 40px -12px rgba(50,25,8,.55);
  transform:rotate(-2.5deg) translateY(30px); opacity:0; animation:ch-pose .9s .1s cubic-bezier(.2,1.2,.4,1) forwards;
  transition:transform .75s cubic-bezier(.6,-.3,.4,1), opacity .5s .2s}
#chargement.fini .ch-couv{transform:rotate(-9deg) translateY(-70vh)}
.ch-bande{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px 8px; background:var(--encre); color:var(--papier)}
.ch-marque{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:125%; font-size:26px; text-transform:uppercase; letter-spacing:.01em; line-height:1}
.ch-marque span{margin-left:.35em; font-size:.56em; color:var(--jaune)}
.ch-echelle{display:grid; place-items:center; width:46px; height:46px; margin:-4px -2px; border-radius:50%; background:var(--jaune); color:var(--encre); font-family:var(--f-chiffre); font-size:9.5px; line-height:1.05; text-align:center; box-shadow:0 0 0 2px var(--encre)}
.ch-echelle b{display:block; font-family:var(--f-titre); font-style:italic; font-weight:900; font-size:16px}
.ch-art{flex:1; position:relative; min-height:0; display:grid; place-items:center;
  background:repeating-conic-gradient(from -90deg at 50% 118%, #F2C07C 0 5deg, #F7DBAE 5deg 10deg);
  border-bottom:1.5px solid rgba(29,27,22,.8)}
.ch-art::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 100%, transparent 40%, rgba(243,231,210,.6)); pointer-events:none}
.ch-camion{position:relative; z-index:1; width:86%; height:auto; overflow:visible}
.ch-camion [data-k]{opacity:0; transform:translateY(-18px); transform-box:fill-box; transition:opacity .35s, transform .55s cubic-bezier(.34,1.56,.64,1)}
.ch-camion [data-k].vu{opacity:1; transform:none}
.ch-camion .ch-ombre{fill:rgba(60,30,10,.22)}
.ch-camion .noir,.ch-camion .roue circle{fill:var(--encre)}
.ch-camion .roue .moyeu{fill:#D9D2C4}
.ch-camion .jaune{fill:var(--jaune); stroke:var(--encre); stroke-width:4; stroke-linejoin:round}
.ch-camion .brique{fill:var(--brique); stroke:var(--encre); stroke-width:4; stroke-linejoin:round}
.ch-camion .brique.fonce{fill:#9E3A24}
.ch-camion .vitre{fill:#3B5157; stroke:var(--encre); stroke-width:2.5; stroke-linejoin:round}
.ch-camion .feu{fill:#F6E7B8; stroke:var(--encre); stroke-width:2}
.ch-camion .nervure{fill:none; stroke:rgba(29,27,22,.45); stroke-width:3; stroke-linecap:round}
.ch-camion .logo{font-family:var(--f-titre); font-style:italic; font-weight:900; font-size:15px; fill:var(--papier); letter-spacing:.06em; text-anchor:middle}
.ch-bas-couv{display:flex; justify-content:space-between; gap:10px; padding:8px 14px 9px; font-family:var(--f-chiffre); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2)}
.ch-metre{position:relative; width:100%; height:24px; margin-top:34px; border-radius:4px; overflow:hidden; background:linear-gradient(#F3EADA, #DCCFB6); box-shadow:0 0 0 1.5px rgba(29,27,22,.7), 0 3px 0 rgba(60,32,12,.35); opacity:0; animation:ch-apparition .5s .5s forwards}
.ch-metre i{position:absolute; inset:0; transform-origin:0 50%; transform:scaleX(.02); background:linear-gradient(#F2C24A, #D9A015); transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ch-graduations{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, rgba(29,27,22,.75) 0 1px, transparent 1px 10%) 0 0/100% 55% no-repeat, repeating-linear-gradient(90deg, rgba(29,27,22,.45) 0 1px, transparent 1px 2%) 0 0/100% 30% no-repeat}
.ch-etat{display:flex; justify-content:space-between; gap:12px; width:100%; margin-top:12px; font-family:var(--f-chiffre); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#3A2614; opacity:0; animation:ch-apparition .5s .6s forwards}
.ch-etat span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-etat b{font-weight:700; white-space:nowrap}
.ch-etat b::after{content:" mm"; opacity:.6; font-weight:400}
.ch-pied{position:absolute; bottom:calc(var(--bas) + 22px); font-family:var(--f-chiffre); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#3A2614; opacity:.6}
#chargement.fini .ch-metre,#chargement.fini .ch-etat,#chargement.fini .ch-pied{opacity:0 !important; transition:opacity .25s}
@media (min-width: 900px){ .ch-centre{width:min(500px, 100%)} .ch-marque{font-size:34px} .ch-echelle{width:58px; height:58px; font-size:11px} .ch-echelle b{font-size:20px} .ch-bas-couv{font-size:11px} }
@keyframes ch-pose{to{transform:rotate(-2.5deg); opacity:1}}
@keyframes ch-lumiere{to{transform:translateX(6%)}}
@keyframes ch-apparition{to{opacity:1}}
@media (prefers-reduced-motion: reduce){ .ch-couv,.ch-metre,.ch-etat{animation:none; opacity:1; transform:rotate(-2.5deg)} .ch-metre,.ch-etat{transform:none} .ch-lumiere{animation:none} }

/* ---------- Effets ---------- */
.secoue{animation:secoue .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes secoue{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.confettis{position:fixed; inset:0; z-index:40; pointer-events:none; overflow:hidden}
.confettis i{position:absolute; top:-20px; width:10px; height:6px; border-radius:1px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
}

/* Parties sur grand écran : la feuille grandit avec l'écran */
@media (min-width: 900px) {
  .jeu-corps{padding-top:18px}
  .jeu .exo{padding:28px 30px 26px}
  .jeu .sujet-q{font-size:26px; margin-bottom:22px}
  .jeu .consigne{font-size:18px}
  .jeu .choix{gap:12px}
  .jeu .choix button{min-height:64px; font-size:18px; padding:14px 18px 14px 14px}
  .jeu .choix .lettre{width:34px; height:34px; font-size:13px}
  .jeu .tampon-zone{font-size:22px; min-height:190px}
  .jeu .tampon{height:96px}
  .jeu .paires button{min-height:62px; font-size:16px}
  .retour .contenu{max-width:720px}
  .retour .explication{font-size:16.5px}
}

/* Petits téléphones (≤ 380 px) : rien ne doit être coupé */
@media (max-width: 380px) {
  .sauf-etroit{display:none}
  .joueur{padding-right:12px; max-width:62vw}
  .joueur small{font-family:var(--f-texte, inherit); font-size:10.5px; letter-spacing:0}
  .compteur{padding:0 12px}
  .onglet span{font-size:9.5px; font-stretch:100%; letter-spacing:0}
}

/* ---------- Atelier de figurine (inscription et profil) ---------- */
.atelier{display:flex; flex-direction:column; gap:12px; min-width:0; container:atelier / inline-size}
.ap-silhouette{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.ap-silhouette [data-sil]{height:38px; padding:0 16px; border-radius:999px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); font-weight:700; font-size:14px}
.ap-silhouette [data-sil][aria-checked="true"]{background:var(--encre); color:var(--papier); border-color:var(--encre)}
.ap-hasard{margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:999px; border:1.5px dashed var(--encre-3); font-family:var(--f-chiffre); font-size:11px; letter-spacing:.03em; color:var(--encre-2)}
.ap-hasard svg{width:18px; height:18px}
.ap-hasard:active{transform:rotate(-4deg) scale(.97)}
.ap-onglets{display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; padding:3px; border-radius:12px; background:var(--papier-2); border:1px solid var(--trait-doux)}
.ap-onglets::-webkit-scrollbar{display:none}
.ap-onglets button{min-width:0; height:36px; padding:0 6px; text-align:center; border-radius:9px; font-family:var(--f-chiffre); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--encre-2); white-space:nowrap}
.ap-onglets button[aria-selected="true"]{background:var(--papier-3); color:var(--encre); box-shadow:0 1px 0 var(--trait-moyen), 0 3px 8px -4px rgba(0,0,0,.25)}
.ap-panneau{min-height:120px}
.ap-grille{display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px}
.ap-tuile{position:relative; display:flex; flex-direction:column; align-items:stretch; padding:5px 5px 8px; border-radius:12px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); text-align:center; transition:transform .15s var(--ease-ressort), border-color .2s, box-shadow .2s}
.ap-tuile:hover{transform:translateY(-2px)}
.ap-tuile[aria-pressed="true"]{border-color:var(--encre); box-shadow:0 0 0 3px var(--jaune), 0 3px 0 var(--encre)}
.ap-photo{display:block; aspect-ratio:1; border-radius:8px; overflow:hidden; background:radial-gradient(circle at 50% 38%, #4A7C6B, #22463B 72%)}
.ap-photo canvas{display:block; width:100%; height:100%}
.ap-attente{display:block; width:100%; height:100%; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%) 0 0/250% 100%; animation:ap-reflet 1.2s linear infinite}
@keyframes ap-reflet{to{background-position:-250% 0}}
.ap-nom{display:block; margin-top:6px; font-size:12.5px; font-weight:600; line-height:1.2; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word}
.ap-tuile.verrou .ap-photo{filter:grayscale(.85) brightness(.75)}
.ap-tuile.verrou .ap-nom{color:var(--encre-3)}
.ap-cadenas{position:absolute; left:5px; right:5px; top:5px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--papier-3); pointer-events:none}
.ap-cadenas svg{width:22px; height:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.ap-cadenas small{font-family:var(--f-chiffre); font-size:8.5px; letter-spacing:.03em; text-transform:uppercase; padding:2px 5px; border-radius:4px; background:rgba(29,27,22,.75); max-width:100%; overflow-wrap:anywhere}
.ap-ligne{display:flex; flex-direction:column; gap:8px}
.pastille-couleur.origine{display:grid; place-items:center; background:repeating-linear-gradient(45deg, var(--papier-3) 0 5px, var(--papier-2) 5px 10px)}
.pastille-couleur.origine span{font-family:var(--f-chiffre); font-size:8px; letter-spacing:.02em; color:var(--encre-2)}
.intro-carte.large{width:min(560px, 100%); max-height:64dvh; overflow-y:auto; overscroll-behavior:contain}
@media (min-width: 900px){ .intro-carte.large{max-height:calc(100dvh - 140px)} .ap-grille{grid-template-columns:repeat(auto-fill, minmax(104px, 1fr))} }
@container atelier (min-width: 560px){ .ap-onglets{grid-template-columns:repeat(6, 1fr)} }

/* ======================================================================
   Le dossier à étapes : moteur commun des jeux sur mesure
   ====================================================================== */
.dossier{container:dossier / inline-size}
.dossier-tete{display:flex; align-items:center; gap:14px; margin:4px 0 12px}
.dossier-art{flex:none; display:grid; place-items:center; width:clamp(44px, 12vw, 58px); height:clamp(44px, 12vw, 58px); border-radius:16px; background:var(--jaune); color:var(--encre); border:2px solid var(--encre); box-shadow:0 4px 0 var(--encre)}
.dossier-art svg{width:62%; height:62%}
.dossier-titre{min-width:0; flex:1}
.dossier-tete .titre{font-size:clamp(19px, 5.4vw, 26px); line-height:1.1; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
.dossier-sous{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:6px}
.dossier-sous:empty{display:none}
.lien-aide{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px; border:1.5px solid var(--encre); background:var(--papier-3); font-family:var(--f-chiffre); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase}
.lien-aide svg{width:14px; height:14px}
.jeu-tribunal .dossier-art{background:#C9B48C}
.jeu-coffre .dossier-art,.jeu-fiche_de_paie .dossier-art,.jeu-tableau_de_bord .dossier-art{background:#BFD3CB}
.jeu-dossier_import .dossier-art,.jeu-tour .dossier-art{background:#CFE0EA}
.jeu-controle .dossier-art{background:var(--brique); color:var(--papier-3)}
.jeu-conseil .dossier-art,.jeu-atelier .dossier-art,.jeu-bureau .dossier-art{background:var(--papier-3)}
.dossier-grille{display:grid; grid-template-columns:minmax(0, 1fr); gap:12px}
/* Téléphone : une seule colonne, dans l'ordre brief → pièces → étape → document */
.dossier-main,.dossier-cote{display:contents}
.dossier-grille .brief{order:1} .dossier-grille .pieces{order:2} .dossier-grille .pistes{order:3} .dossier-grille .etape{order:4} .dossier-grille .doc-jeu{order:5}
.brief{font-size:16px; line-height:1.5; padding:14px 16px; border-radius:var(--r-s); background:var(--papier-3); border-left:4px solid var(--jaune); box-shadow:var(--ombre-carte)}
.brief p + p{margin-top:8px}
.pieces{border-radius:var(--r-s); background:var(--papier-2); border:1px dashed var(--trait-moyen)}
.pieces summary{cursor:pointer; padding:10px 14px; list-style:none; display:flex; align-items:center; gap:8px}
.pieces summary::-webkit-details-marker{display:none}
.pieces summary::before{content:"▸"; transition:transform .2s; font-size:12px}
.pieces[open] summary::before{transform:rotate(90deg)}
.pieces-corps{display:flex; flex-direction:column; gap:10px; padding:0 12px 12px}
.piece{padding:12px 14px; border-radius:8px; background:var(--papier-3); box-shadow:2px 3px 0 var(--trait-doux); font-size:14.5px; line-height:1.45; min-width:0}
.piece table{border-collapse:collapse; width:100%; font-size:13px}
.piece th,.piece td{padding:6px 8px; border-bottom:1px solid var(--trait-doux); text-align:left; vertical-align:top}
.piece th{font-family:var(--f-chiffre); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--encre-2); white-space:nowrap}
.piece b{display:inline-block; margin-bottom:4px}
.pistes{display:flex; gap:4px}
.pistes i{flex:1; height:6px; border-radius:3px; background:var(--trait-doux); transition:background .3s}
.pistes i.encours{background:var(--jaune)}
.pistes i.ok{background:var(--ok)} .pistes i.moyen{background:#D9A23A} .pistes i.ko{background:var(--ko)}
.etape{min-width:0}
.etape-tete{margin-bottom:6px; color:var(--encre-2)}
.etape .sujet-q{margin-bottom:12px}
.formule{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin:-4px 0 12px; padding:8px 12px; border-radius:8px; background:var(--jaune-pale); font-family:var(--f-chiffre); font-size:13px}
.indice{margin:-4px 0 12px; padding:8px 12px; border-radius:8px; background:#E8F0EC; border-left:3px solid var(--acheteur); font-size:14.5px}
.etape-retour{margin-top:14px; padding:14px 16px; border-radius:var(--r-s); display:flex; flex-direction:column; gap:8px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); border-left-width:5px}
.etape-retour.ok{border-left-color:var(--ok)} .etape-retour.moyen{border-left-color:#D9A23A} .etape-retour.ko{border-left-color:var(--ko)}
.etape-retour .verdict-etape{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:115%; font-size:19px}
.etape-retour.ok .verdict-etape{color:var(--ok)} .etape-retour.ko .verdict-etape{color:var(--ko)}
.etape-retour .attendu{padding:8px 10px; border-radius:6px; background:var(--papier-2); font-size:14.5px}
.etape-retour .explication{font-size:15px; line-height:1.45}
.etape-retour .source{font-family:var(--f-chiffre); font-size:10.5px; color:var(--encre-3)}
.etape-retour .btn{align-self:flex-end}
.phases{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin:-4px 0 12px}
.phases span{flex:1 0 auto; padding:6px 10px; border-radius:999px; background:var(--papier-2); font-family:var(--f-chiffre); font-size:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--encre-3); text-align:center; transition:background .3s, color .3s}
.phases span.active{background:var(--encre); color:var(--papier)}

/* Calculatrice du dossier */
.calc-dossier{display:flex; flex-direction:column; gap:10px; max-width:420px}
.calc-ecran{display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding:12px 16px; border-radius:12px; background:#BFD0B4; border:2px solid var(--encre); box-shadow:inset 0 3px 0 rgba(0,0,0,.12); font-family:var(--f-chiffre); min-height:72px; transition:background .3s}
.calc-ecran.bon{background:#A9D3A0} .calc-ecran.faux{background:#E8B8A8}
.calc-expr{font-size:13px; color:rgba(29,27,22,.6); min-height:16px; word-break:break-all; text-align:right}
.calc-res{display:flex; align-items:baseline; gap:6px}
.calc-res b{font-size:28px; font-weight:600; letter-spacing:-.02em}
.calc-res small{font-size:13px; color:var(--encre-2)}
.calc-touches{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:6px; padding:10px; border-radius:14px; background:linear-gradient(#3B3732, #2A2723); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 5px 0 #14120F}
.calc-touches button{display:grid; place-items:center; text-align:center; height:48px; border-radius:9px; background:#EFE6D4; color:var(--encre); font-family:var(--f-chiffre); font-size:18px; font-weight:600; box-shadow:0 3px 0 #9C9180}
.calc-touches button:active{transform:translateY(2px); box-shadow:0 1px 0 #9C9180}
.calc-touches .op{background:var(--jaune)} .calc-touches .fn{background:#C9BFAD; font-size:15px} .calc-touches .eg{background:var(--acheteur); color:#fff}

/* Choix multiples */
.choix.multi .case{flex:none; width:22px; height:22px; border-radius:6px; border:2px solid var(--encre); background:var(--papier-3)}
.choix.multi button[aria-pressed="true"]{border-color:var(--encre); background:var(--jaune-pale)}
.choix.multi button[aria-pressed="true"] .case{background:var(--encre) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23FFFAF1' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat}
.choix button.manque{border-style:dashed; border-color:var(--ok)}
.tickets li .fleches{margin-left:auto; display:flex; gap:4px}
.tickets li .fleches button{width:32px; height:32px; border-radius:8px; border:1.5px solid var(--trait-moyen); background:var(--papier); font-size:15px}
.tickets li .fleches button:disabled{opacity:.3}

/* Tri en bacs */
.tri-reserve{display:flex; flex-wrap:wrap; gap:8px; min-height:48px; padding:10px; border-radius:var(--r-s); background:var(--papier-2); border:1.5px dashed var(--trait-moyen); margin-bottom:10px}
.tri-el{display:inline-flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border-radius:9px; background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:0 3px 0 var(--encre); font-size:14px; font-weight:600; line-height:1.25; text-align:left; touch-action:none; user-select:none; max-width:100%}
.tri-el small{font-family:var(--f-chiffre); font-size:11px; font-weight:500; color:var(--encre-2)}
.tri-el.choisi{background:var(--jaune); transform:translateY(-2px)}
.tri-el.saisi{position:relative; z-index:5; box-shadow:0 18px 30px -10px rgba(0,0,0,.45); background:var(--jaune-clair)}
.tri-el.bon{border-color:var(--ok); box-shadow:0 3px 0 var(--ok); background:var(--ok-pale)}
.tri-el.faux{border-color:var(--ko); box-shadow:0 3px 0 var(--ko); background:var(--ko-pale)}
.tri-bacs{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px}
.tri-bac{display:flex; flex-direction:column; gap:8px; min-height:110px; padding:10px; border-radius:var(--r-s); background:var(--papier-3); border:2px solid var(--trait-moyen); transition:border-color .15s, background .15s; cursor:pointer}
.tri-bac.survol{border-color:var(--encre); background:var(--jaune-pale)}
.tri-bac-tete{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13.5px; padding-bottom:6px; border-bottom:1px solid var(--trait-doux)}
.tri-total{font-size:12px; color:var(--encre-2)}
.tri-contenu{display:flex; flex-direction:column; align-items:stretch; gap:6px}

/* Le document qui se construit */
.doc-jeu{position:relative; align-self:stretch; min-width:0; padding:16px 16px 18px; background:#FFFDF7; color:var(--encre); border-radius:4px; box-shadow:0 1px 0 rgba(0,0,0,.08), 0 14px 30px -16px rgba(0,0,0,.45); font-size:13.5px}
.doc-jeu::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:var(--jaune); border-radius:4px 4px 0 0}
.doc-tete{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:8px; border-bottom:2px solid var(--encre)}
.doc-titre{font-family:var(--f-titre); font-weight:900; font-stretch:115%; font-size:15px; text-transform:uppercase; letter-spacing:.02em}
.doc-ref{font-size:9.5px; color:var(--encre-3)}
.doc-objet{margin:8px 0 10px; font-weight:600; color:var(--encre-2)}
.doc-lignes{list-style:none; display:flex; flex-direction:column; gap:7px; max-height:min(52vh, 460px); overflow-y:auto}
.doc-lignes li{display:flex; align-items:baseline; gap:6px; min-width:0}
.doc-lignes .lib{min-width:0; overflow-wrap:break-word}
.doc-lignes .pointilles{flex:1; min-width:12px; border-bottom:1.5px dotted var(--trait-moyen); transform:translateY(-3px)}
.doc-lignes .val{flex:none; font-weight:600; text-align:right; max-width:55%; overflow-wrap:anywhere}
.doc-lignes li.total{margin-top:4px; padding-top:7px; border-top:2px solid var(--encre); font-weight:700}
.doc-lignes li.total .val{font-size:15px}
.doc-lignes li.corrigee .val{color:var(--brique)}
.doc-lignes li.corrigee .val::after{content:" ✎"; font-size:11px}
.doc-vide{color:var(--encre-3); font-style:italic; font-size:12.5px}
.doc-tampon{position:absolute; right:14px; bottom:14px; padding:6px 12px; border:3px solid var(--brique); border-radius:6px; color:var(--brique); font-family:var(--f-titre); font-weight:900; font-stretch:120%; font-size:14px; text-transform:uppercase; letter-spacing:.04em; transform:rotate(-9deg); opacity:.9; mix-blend-mode:multiply; pointer-events:none; background:rgba(255,253,247,.4)}
/* Variantes de document */
.doc-ticket{max-width:360px; justify-self:center; width:100%; font-family:var(--f-chiffre); font-size:12px; background:#FBFAF5; border-radius:2px; padding-bottom:26px; -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) bottom/14px 10px repeat-x; mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 100%, transparent 6px, #000 6.5px) bottom/14px 10px repeat-x}
.doc-ticket::before{background:repeating-linear-gradient(90deg, var(--encre) 0 6px, transparent 6px 10px); height:3px}
.doc-ticket .doc-titre{font-family:var(--f-chiffre); font-weight:700; font-size:13px}
.doc-verdict{background:#F3EAD4; border:1px solid #C9B48C}
.doc-verdict::before{background:#7A5B34}
.doc-verdict .doc-titre{font-family:Georgia, 'Times New Roman', serif; font-style:italic; text-transform:none; font-size:18px}
.doc-bilan::before,.doc-bulletin::before,.doc-tableau::before{background:var(--acheteur)}
.doc-facture::before,.doc-lta::before{background:#3F5164}
.doc-pv::before{background:var(--brique)}
.doc-mail{border-radius:10px}
.doc-mail::before{background:#6E8BA3}
.doc-copie{background:#FFFDF7 repeating-linear-gradient(transparent 0 25px, rgba(63,81,100,.18) 25px 26px); border-left:3px solid rgba(194,73,47,.4)}
.balance{margin:-2px 0 10px; text-align:center}
.balance svg{width:min(240px, 100%); height:auto; overflow:visible}
.balance-totaux{display:flex; justify-content:space-between; gap:10px; font-family:var(--f-chiffre); font-size:11.5px; color:var(--encre-2)}
.balance-totaux b{color:var(--encre)}
.balance.equilibre .balance-totaux{color:var(--ok)}
.balance.equilibre svg{filter:drop-shadow(0 0 10px rgba(46,125,79,.45))}
/* Fin de cas : trajet, négociation */
.trajet ol{list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:6px 0}
.trajet li{display:flex; align-items:center; gap:8px}
.trajet .noeud{width:14px; height:14px; border-radius:50%; background:var(--jaune); border:2.5px solid var(--encre)}
.trajet .mode{margin:0 8px; padding:2px 10px; border-radius:999px; background:var(--encre); color:var(--papier); font-family:var(--f-chiffre); font-size:10px; text-transform:uppercase; letter-spacing:.04em}
.trajet .mode-mer{background:#3F5164} .trajet .mode-fer{background:#6B4A2E} .trajet .mode-air{background:#6E8BA3} .trajet .mode-fluvial{background:#3F8A6B}
.nego{margin-top:12px; padding:14px 16px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:0 3px 0 var(--encre); display:flex; flex-direction:column; gap:8px}
.nego-ligne{display:flex; justify-content:space-between; gap:12px; font-size:14.5px}
.nego-ligne b.neg{color:var(--ko)}
.jauge-marge{position:relative; height:14px; border-radius:7px; overflow:hidden; display:flex}
.jauge-marge .z-rouge{flex:1; background:linear-gradient(90deg, #C2492F, #E9B020)} .jauge-marge .z-vert{flex:1; background:linear-gradient(90deg, #E9B020, #2E7D4F)}
.jauge-marge i{position:absolute; top:-3px; bottom:-3px; width:4px; margin-left:-2px; background:var(--encre); border-radius:2px; z-index:1}
.aide-memoire{max-height:82dvh; overflow-y:auto; width:min(640px, calc(100vw - 32px))}
.aide-memoire .piece + .piece{margin-top:10px}

/* Grand écran : le document à droite, qui reste visible */
@container dossier (min-width: 780px){
  .dossier-grille{grid-template-columns:minmax(0, 1.4fr) minmax(260px, 1fr); align-items:start; gap:18px}
  .dossier-main{display:flex; flex-direction:column; gap:12px; min-width:0}
  .dossier-cote{display:flex; flex-direction:column; gap:12px; min-width:0; position:sticky; top:8px; max-height:calc(100dvh - 120px); overflow-y:auto; padding:2px 4px 8px 2px; scrollbar-width:thin}
  .doc-jeu{position:relative; align-self:stretch}
  .doc-lignes{max-height:none}
  .doc-ticket{justify-self:stretch}
}

/* ---------- Lexicargo ---------- */
.cargo{position:relative; margin:4px 0 12px}
.cargo svg{display:block; width:100%; height:auto}
.cargo-compte{position:absolute; left:10px; top:0; font-size:12px; padding:2px 8px; border-radius:999px; background:var(--encre); color:var(--papier)}
.lex-mot{font-family:var(--f-titre); font-weight:900; font-style:italic; font-stretch:115%; font-size:clamp(26px, 7vw, 38px); line-height:1.1; margin:6px 0 14px}
.lex-mot small{font-family:var(--f-texte); font-style:normal; font-weight:500; font-size:15px; color:var(--encre-2)}
.lex-temps{height:6px; border-radius:3px; background:var(--trait-doux); overflow:hidden; margin:-6px 0 14px}
.lex-temps i{display:block; height:100%; background:var(--brique); transform-origin:0 50%}

/* ---------- Plan de chargement ---------- */
.plan-outils{display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; margin:6px 0 12px}
.plan-types{display:flex; flex-wrap:wrap; gap:8px; flex:1; min-width:0}
.plan-types button{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:8px 12px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--trait-moyen); text-align:left; font-size:13.5px}
.plan-types button small{font-family:var(--f-chiffre); font-size:10.5px; color:var(--encre-2)}
.plan-types button[aria-pressed="true"]{border-color:var(--encre); box-shadow:inset 0 0 0 2px var(--encre); background:var(--jaune-pale)}
#pivoter.actif{background:var(--jaune)}
.plancher-cadre{position:relative; display:flex; align-items:stretch; padding:10px 10px 26px 0}
.cabine{flex:none; width:28px; margin-right:4px; border-radius:10px 4px 4px 10px; background:#3F5164; color:var(--papier); writing-mode:vertical-rl; transform:rotate(180deg); display:grid; place-items:center; font-family:var(--f-chiffre); font-size:9px; letter-spacing:.08em; text-transform:uppercase}
.plancher{position:relative; flex:1; min-width:0; background:repeating-linear-gradient(90deg, #A47C55 0 18px, #9A7350 18px 19px), #A47C55; border:3px solid var(--encre); border-radius:3px; box-shadow:inset 0 0 0 4px rgba(0,0,0,.12); cursor:crosshair; touch-action:manipulation}
.cote{position:absolute; bottom:2px; left:32px; right:10px; text-align:center; font-family:var(--f-chiffre); font-size:10.5px; color:var(--encre-2); border-top:1px solid var(--encre-3); padding-top:2px}
.palette-posee,.fantome{position:absolute; border-radius:2px; display:grid; place-items:center}
.palette-posee{background:#D7B98A repeating-linear-gradient(0deg, transparent 0 22%, rgba(0,0,0,.14) 22% 26%); border:1.5px solid #6B4A2E; box-shadow:0 2px 0 rgba(0,0,0,.25); cursor:pointer}
.palette-posee span{font-family:var(--f-chiffre); font-size:clamp(7px, 1.6vw, 11px); font-weight:700; color:#4A3220}
.palette-posee.type-1{background-color:#C8D6CF} .palette-posee.type-2{background-color:#E3C9A6} .palette-posee.type-3{background-color:#D5C6DD}
.fantome{background:rgba(233,176,32,.45); border:2px dashed var(--encre); pointer-events:none}
.fantome.bloque{background:rgba(194,73,47,.35); border-color:var(--brique)}
.plancher-cadre.vertical{flex-direction:column; align-items:center; padding:0 26px 0 0}
.plancher-cadre.vertical .cabine{width:min(46vw, 210px); height:24px; margin:0 0 4px; writing-mode:horizontal-tb; transform:none; border-radius:10px 10px 4px 4px}
.plancher-cadre.vertical .plancher{flex:none; width:min(46vw, 210px); background:repeating-linear-gradient(0deg, #A47C55 0 18px, #9A7350 18px 19px), #A47C55}
.plancher-cadre.vertical .cote{left:auto; right:0; top:28px; bottom:0; width:auto; border-top:0; border-left:1px solid var(--encre-3); padding:0 0 0 4px; writing-mode:vertical-rl; display:grid; place-items:center}
.plan-stats{display:flex; flex-wrap:wrap; gap:8px 16px; font-family:var(--f-chiffre); font-size:12px; color:var(--encre-2)}
.plan-stats b{color:var(--encre)} .plan-stats b.trop{color:var(--ko)}
.vehicules button small{font-family:var(--f-chiffre); font-size:10px; opacity:.7}