/* =====================================================================
   Aston GTLA — la campagne des jeux à dossiers
   Le personnage qui confie le dossier, la patience, la série, le fantôme du record, la correction pas à pas,
   le coup de tampon et la fin de dossier ; la carte des arrêts (une voie de maquette HO sur son socle),
   la fiche d'un arrêt et l'étagère des jeux de l'onglet Cours.
   ===================================================================== */

/* ---------- Petits éléments communs ---------- */
.etoiles{display:inline-flex; align-items:center; gap:1px; vertical-align:-2px; flex:none}
.etoile{width:18px; height:18px; flex:none; overflow:visible}
.etoile path{stroke-width:1.6}
.etoile.pleine path{fill:var(--jaune); stroke:var(--encre)}
.etoile.vide path{fill:rgba(29,27,22,.07); stroke:rgba(29,27,22,.35); stroke-dasharray:2.2 1.6}
.etoiles.mini .etoile{width:12px; height:12px}
.etoiles.mini .etoile path{stroke-width:1.9}
.jeton{width:22px; height:22px; flex:none; overflow:visible}
.jeton circle:first-child{fill:#E2B23A; stroke:var(--encre); stroke-width:1.5}
.jeton .filet{fill:none; stroke:rgba(29,27,22,.4); stroke-width:1.1}
.jeton .losange{fill:#FBEFCB; stroke:var(--encre); stroke-width:1.2; stroke-linejoin:round}
.etincelles{position:fixed; z-index:45; width:0; height:0; pointer-events:none}
.etincelles i{position:absolute; left:-3.5px; top:-3.5px; width:7px; height:7px; border-radius:1.5px; box-shadow:0 0 0 1px rgba(29,27,22,.25)}

/* ======================================================================
   Dans la partie
   ====================================================================== */
.dossier-grille .interlocuteur{order:1} .dossier-grille .hud-dossier{order:3}

/* Le personnage et sa bulle (le brief est sa réplique) */
.interlocuteur{display:grid; grid-template-columns:56px minmax(0, 1fr); gap:12px; align-items:start}
.perso-portrait{position:relative; width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid var(--encre); box-shadow:0 3px 0 var(--encre); background:var(--tapis)}
.perso-portrait canvas,.perso-portrait img{display:block; width:100%; height:100%}
.perso-bulle{position:relative; min-width:0; padding:11px 15px 13px; border-radius:4px 16px 16px 16px; background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:3px 4px 0 rgba(29,27,22,.13)}
.perso-bulle::before{content:""; position:absolute; left:-8px; top:16px; width:13px; height:13px; background:var(--papier-3); border-left:1.5px solid var(--encre); border-bottom:1.5px solid var(--encre); transform:rotate(45deg); border-radius:0 0 0 3px}
.perso-nom{display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; margin-bottom:5px}
.perso-nom b{font-size:14px; font-weight:800; letter-spacing:-.005em}
.perso-nom span{font-family:var(--f-chiffre); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-3)}
.perso-dit{font-family:var(--f-titre); font-style:italic; font-weight:800; font-stretch:106%; font-size:16.5px; line-height:1.22; color:var(--encre); margin-bottom:9px; text-wrap:balance}
.perso-dit::before{content:"« "} .perso-dit::after{content:" »"}
.perso-bulle .brief{padding:9px 0 0; border:0; border-top:1.5px dashed var(--trait-moyen); border-radius:0; background:none; box-shadow:none; font-size:15.5px}
.dossier.examen .perso-bulle{border-color:var(--brique)}
.dossier.examen .perso-bulle::before{border-color:var(--brique)}

/* Le tableau de bord de la partie : étapes, fantôme du record, patience (ou chrono d'examen), série */
.hud-dossier{position:sticky; top:0; z-index:4; display:flex; flex-direction:column; gap:7px; margin:0; padding:9px 12px 9px; border-radius:12px;
  background:color-mix(in srgb, var(--papier) 90%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--trait-doux); box-shadow:0 10px 18px -16px rgba(0,0,0,.55)}
.hud-piste{position:relative; padding:7px 0}
.hud-piste .pistes{margin:0}
.hud-piste .pistes i{height:8px; border-radius:4px}
.pistes i.note{background:var(--encre-2)}
.fantome-rival{position:absolute; top:50%; left:0; z-index:1; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; overflow:hidden; background:var(--papier-3);
  box-shadow:0 0 0 2px var(--papier), 0 0 0 3.5px rgba(29,27,22,.55), 0 4px 8px -2px rgba(0,0,0,.35); opacity:.8; filter:grayscale(.35) contrast(.95); transition:left .25s linear, opacity .4s}
.fantome-rival canvas,.fantome-rival img{display:block; width:100%; height:100%}
.fantome-rival.arrive{opacity:.55}
.hud-ligne{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap}
.patience{flex:1 1 180px; min-width:0; display:grid; grid-template-columns:auto minmax(56px, 1fr) auto; align-items:center; gap:9px}
.pa-label{font-family:var(--f-chiffre); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-2); white-space:nowrap}
.pa-barre{position:relative; height:10px; border-radius:5px; background:rgba(29,27,22,.1); overflow:hidden; box-shadow:inset 0 1px 1px rgba(0,0,0,.14)}
.pa-barre i{position:absolute; inset:0; transform-origin:0 50%; background:linear-gradient(90deg, #2F7A58, #5FAE84); transition:transform .25s linear}
.pa-barre::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(29,27,22,.22) 0 1px, transparent 1px 10%); pointer-events:none}
.patience.mi .pa-barre i{background:linear-gradient(90deg, #C98F12, #E9B020)}
.patience.bas .pa-barre i{background:linear-gradient(90deg, #B23F27, #E07B26)}
.patience.vide .pa-label{color:var(--encre-3)}
.pa-temps{font-size:15px; font-weight:700; min-width:48px; text-align:right; letter-spacing:-.02em}
.chrono-examen .pa-label{color:var(--brique); font-weight:700}
.chrono-examen.vide .pa-temps{color:var(--brique)}
.hud-record{display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 9px 0 7px; border-radius:999px; border:1.5px dashed var(--trait-moyen); font-size:11px; color:var(--encre-2); white-space:nowrap}
.combo-dossier{display:inline-flex; align-items:center; gap:5px; height:28px; padding:0 11px; border-radius:999px; background:var(--encre); color:var(--papier); white-space:nowrap}
.combo-dossier:empty{display:none}
.combo-dossier .etiquette{font-size:9px; opacity:.75}
.combo-dossier b{font-size:15px; font-weight:700; color:var(--jaune)}
.combo-dossier svg{width:17px; height:17px; margin-left:-3px}
.combo-dossier.chaud{background:linear-gradient(180deg, #E07B26, #C2492F); box-shadow:0 0 0 2px var(--encre), 0 6px 16px -4px rgba(194,73,47,.75)}
.combo-dossier.chaud b{color:#FFF3C8}
.combo-dossier.feu{animation:camp-braise 1.1s ease-in-out infinite}
@keyframes camp-braise{50%{box-shadow:0 0 0 2px var(--encre), 0 0 24px 3px rgba(233,176,32,.8)}}
.dossier .etape,.dossier .etape-retour,.dossier .correction-copie{scroll-margin-top:96px}
@container dossier (max-width: 520px){
  .pa-de{display:none}
  .patience{flex:1 1 120px; gap:7px}
  .hud-record{flex:none; padding:0 8px 0 6px}
  .combo-dossier{flex:none; padding:0 9px}
  .combo-dossier .etiquette{display:none}
}
.hud-bulle{margin:0; font-size:13px; font-style:italic; color:var(--encre-2); line-height:1.35}

/* L'étape : bouton indice, encore un essai, copie d'examen */
.dossier-sous .sur-n{margin-left:-5px; opacity:.6}
.dossier .etape-tete{display:flex; align-items:center; justify-content:space-between; gap:8px 10px; flex-wrap:wrap}
.btn-indice{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px 0 9px; border-radius:999px; border:1.5px dashed #2C6A50; color:#245A43; background:#EEF5F0; font-weight:700; font-size:13px; white-space:nowrap}
.btn-indice svg{width:15px; height:15px}
.btn-indice small{font-family:var(--f-chiffre); font-size:9.5px; font-weight:500; color:var(--encre-3); letter-spacing:.02em}
.btn-indice:hover:not(:disabled){background:#E1EEE6; border-style:solid}
.btn-indice:disabled{opacity:.45; cursor:default}
.zone-indice:empty{display:none}
.encore{margin-top:12px; padding:8px 12px; border-radius:8px; background:var(--jaune-pale); font-weight:700; font-size:14.5px}
.copie-notee{display:flex; justify-content:center; margin-top:14px}
.copie-notee span{padding:6px 14px; border:2.5px solid var(--encre); border-radius:6px; font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:115%; text-transform:uppercase; letter-spacing:.04em; font-size:14px; transform:rotate(-4deg); opacity:.85}
.dossier.examen::after{content:""; position:absolute; top:0; bottom:0; left:9px; width:2px; background:rgba(194,73,47,.32); pointer-events:none}
.dossier.examen .ref > span:last-child{color:var(--brique); font-weight:700}
.dossier.examen .dossier-art{background:var(--brique); color:var(--papier-3)}
/* En examen, la copie ne dit pas tout de suite ce qui est juste */
.dossier.examen .etape-widget .bon,.dossier.examen .etape-widget .faux,.dossier.examen .etape-widget .manque{background:var(--papier-3)!important; border-color:var(--encre)!important; box-shadow:0 3px 0 var(--encre)!important; border-style:solid!important}
.dossier.examen .etape-widget .bon .lettre,.dossier.examen .etape-widget .faux .lettre{background:none!important; color:inherit!important; border-color:currentColor!important}
.dossier.examen .calc-ecran.bon,.dossier.examen .calc-ecran.faux{background:#BFD0B4}
.dossier.examen .champ.bon,.dossier.examen .champ.faux{border-color:var(--encre)}

/* La correction d'une étape : verdict, réplique, comparaison, méthode pas à pas */
.etape-retour .retour-tete{display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap}
.replique{display:inline-flex; align-items:center; gap:8px; max-width:100%; min-width:0; padding:3px 13px 3px 3px; border-radius:22px; background:var(--papier-2); font-size:13.5px; font-weight:600; color:var(--encre-2); line-height:1.3}
.replique .rp-portrait{width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; box-shadow:0 0 0 1.5px var(--encre); background:var(--tapis)}
.replique .rp-portrait canvas,.replique .rp-portrait img{display:block; width:100%; height:100%}
.replique q{min-width:0; quotes:"« " " »"}
.comparatif{display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:8px}
.cmp{display:flex; flex-direction:column; gap:2px; min-width:0; padding:8px 12px; border-radius:8px}
.cmp .etiquette{font-size:9.5px; color:var(--encre-2)}
.cmp b{font-family:var(--f-chiffre); font-size:15px; font-weight:600; line-height:1.3; overflow-wrap:anywhere}
.cmp.mien{background:var(--ko-pale)}
.cmp.mien b{color:var(--ko); text-decoration:line-through; text-decoration-thickness:1.5px}
.cmp.attendu-v{background:var(--ok-pale)}
.cmp.attendu-v b{color:var(--ok)}
.comparatif.colonne{display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:8px; background:var(--ok-pale)}
.comparatif.colonne .etiquette{color:var(--ok)}
.ordre-attendu{padding-left:22px; display:flex; flex-direction:column; gap:3px; font-size:14.5px; line-height:1.35}
.tri-attendu{list-style:none; display:flex; flex-direction:column; gap:5px}
.tri-attendu li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:14px; line-height:1.3}
.tri-attendu li span{min-width:0}
.tri-attendu li b{color:var(--ok); text-align:right; flex:none; max-width:55%}
.methode-bloc{display:flex; flex-direction:column; gap:7px}
.methode-bloc > .etiquette{color:var(--encre-2)}
.methode{list-style:none; counter-reset:m; display:flex; flex-direction:column; gap:6px; padding:0}
.methode li{counter-increment:m; position:relative; padding:8px 11px 8px 40px; border-radius:8px; background:var(--papier-2); font-size:14.5px; line-height:1.45; min-width:0; overflow-wrap:break-word}
.methode li::before{content:counter(m); position:absolute; left:9px; top:8px; width:21px; height:21px; border-radius:50%; background:var(--encre); color:var(--papier); font-family:var(--f-chiffre); font-size:11px; font-weight:600; display:grid; place-items:center}
.methode .m-tag{display:block; font-family:var(--f-chiffre); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--encre-3); margin-bottom:1px}
.methode .m-formule{background:var(--jaune-pale)}
.methode .m-formule .chiffre{font-size:13px}
.methode .m-cle{background:#E8F0EC}
.methode li p{display:inline}
.retour-actions{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:2px}
.etape-retour .retour-actions .btn{margin-left:auto}
.lien-notion{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:0 14px 0 11px; border-radius:999px; border:1.5px solid var(--encre); background:var(--papier-3); font-weight:700; font-size:13.5px; color:var(--encre); text-align:left}
.lien-notion svg{width:15px; height:15px; flex:none}
.lien-notion:hover{background:var(--jaune-pale)}

/* Examen : la copie se corrige d'un coup */
.correction-copie{padding:14px 16px 10px; border-radius:var(--r-s); background:#FFFDF7 repeating-linear-gradient(transparent 0 37px, rgba(63,81,100,.13) 37px 38px); border:1.5px solid var(--trait-moyen); border-left:3px solid rgba(194,73,47,.55)}
.correction-copie > .etiquette{color:var(--brique); font-weight:700}
.correction-copie ol{list-style:none; padding:0; margin-top:6px; display:flex; flex-direction:column}
.correction-copie li{display:grid; grid-template-columns:24px minmax(0, 1fr) 26px; align-items:center; gap:8px; min-height:38px; font-size:14px}
.cc-num{color:var(--encre-3); font-size:12px}
.cc-q{min-width:0; line-height:1.3; padding:4px 0; overflow-wrap:break-word}
.cc-marque{display:grid; place-items:center}
.cc-marque svg{width:22px; height:22px}
.correction-copie li.ok .cc-marque{color:var(--ok)}
.correction-copie li.ko .cc-marque,.correction-copie li.moyen .cc-marque{color:var(--brique)}

/* ---------- La fin du dossier ---------- */
.dossier.fini .interlocuteur,.dossier.fini .hud-dossier,.dossier.fini .pieces,.dossier.fini .phases{display:none}
.dossier.fini .dossier-grille .doc-jeu{order:0}
@container dossier (max-width: 779px){ .dossier.fini .doc-lignes{max-height:190px} }
.doc-tampon{font-size:16px; padding:7px 14px; z-index:2}
.doc-tampon.reussi{color:#2A7348; border-color:#2A7348}
.doc-tampon.rate{color:var(--brique); border-color:var(--brique); border-style:dashed}
.doc-tampon.parfait{color:#9A6B06; border:3.5px double #B8860B; background:rgba(255,236,160,.55); box-shadow:0 0 0 2px rgba(255,236,160,.6)}
.doc-note::before{background:#7A5B34}
.doc-chemise{min-height:140px; background:#E9D2A6; border:1.5px solid #B8975E; border-radius:4px 16px 4px 4px}
.doc-chemise::before{background:#B8975E}
.fin-dossier{display:flex; flex-direction:column; gap:14px}
.fin-tete{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 14px 16px; border-radius:var(--r); text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, #FFF4D2 0%, var(--papier-3) 62%); border:1.5px solid var(--encre); box-shadow:0 4px 0 var(--encre)}
.fin-dossier.parfait .fin-tete{background:radial-gradient(120% 140% at 50% 0%, #FFE59A, #FBEFCB 55%, var(--papier-3))}
.fin-dossier.rate .fin-tete{background:var(--papier-2)}
.fin-tete > .etiquette{font-size:11.5px; color:var(--encre-2)}
.fin-etoiles{display:flex; align-items:flex-end; justify-content:center; gap:4px; min-height:70px}
.fin-etoiles .fe{display:grid; place-items:center}
.fin-etoiles .etoile{width:52px; height:52px}
.fin-etoiles .fe:nth-child(2) .etoile{width:66px; height:66px; margin-bottom:10px}
.fin-etoiles .etoile path{stroke-width:1.2}
.fin-dossier.parfait .fin-etoiles .etoile.pleine{filter:drop-shadow(0 0 9px rgba(233,176,32,.85))}
.fin-criteres{list-style:none; display:flex; flex-direction:column; gap:7px; width:100%; max-width:460px; text-align:left}
.fin-criteres li{display:grid; grid-template-columns:20px minmax(0, 1fr) auto; align-items:center; gap:4px 9px; font-size:14px; line-height:1.3; color:var(--encre-3)}
.fin-criteres li.ok{color:var(--encre); font-weight:600}
.fc-case{width:18px; height:18px; border-radius:5px; border:1.5px solid var(--trait-moyen)}
.fin-criteres li.ok .fc-case{border-color:var(--ok); background:var(--ok) 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='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}
.fin-criteres small{font-family:var(--f-chiffre); font-size:10.5px; font-weight:500; color:var(--encre-3); text-align:right}
.fin-gain{display:flex; align-items:center; gap:13px; padding:12px 16px; border-radius:var(--r-s); background:var(--encre); color:var(--papier)}
.fin-gain .jeton{width:42px; height:42px}
.fin-gain > div{display:flex; flex-direction:column; min-width:0}
.fin-gain .etiquette{color:var(--jaune-clair)}
.fg-montant{font-size:28px; font-weight:700; line-height:1.1; color:var(--jaune); letter-spacing:-.02em}
.fin-gain small{font-size:12px; opacity:.75}
.fin-carriere{position:relative; display:flex; flex-direction:column; gap:7px; padding:12px 16px 14px; border-radius:var(--r-s); background:var(--papier-3); border:1.5px solid var(--trait-moyen)}
.fcar-tete{display:flex; align-items:baseline; justify-content:space-between; gap:4px 10px; flex-wrap:wrap}
.fcar-titre{display:inline-block; font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:115%; font-size:19px; line-height:1.05; text-transform:uppercase; transform-origin:50% 60%}
.fin-carriere .metre i{transition:width 1.5s var(--ease-sortie)}
.fin-carriere small{font-size:11.5px; color:var(--encre-2)}
.fin-carriere.promo{border-color:var(--encre); box-shadow:0 0 0 3px var(--jaune), 0 3px 0 3px var(--encre)}
.promo-ruban{position:absolute; top:-12px; right:14px; padding:3px 10px; background:var(--brique); color:var(--papier-3); font-family:var(--f-titre); font-style:italic; font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.04em; border:1.5px solid var(--encre); border-radius:4px; transform:rotate(3deg)}
.fin-debloque{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:#245A43}
.fin-debloque svg{width:16px; height:16px}
.fin-rival{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-s); border:1.5px dashed var(--encre-3); background:rgba(255,250,241,.7)}
.fin-rival .fr-portrait{width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none; filter:grayscale(.45); opacity:.85; box-shadow:0 0 0 1.5px var(--encre); background:var(--tapis)}
.fin-rival .fr-portrait canvas,.fin-rival .fr-portrait img{display:block; width:100%; height:100%}
.fin-rival > div{min-width:0}
.fin-rival b{display:block; font-size:15.5px; line-height:1.25}
.fin-rival small{display:flex; flex-wrap:wrap; align-items:center; gap:2px 5px; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--encre-2)}
.fin-rival.battu{border-style:solid; border-color:var(--encre); background:var(--jaune-pale); box-shadow:0 3px 0 var(--encre)}
.fin-rival.battu .fr-portrait{filter:none; opacity:1}
.fin-rival.premier{border-color:#2C6A50; background:#EEF5F0}
.fin-replique{display:grid; grid-template-columns:40px minmax(0, 1fr); gap:10px; align-items:start}
.fin-replique .rp-portrait{width:40px; height:40px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1.5px var(--encre); background:var(--tapis)}
.fin-replique .rp-portrait canvas,.fin-replique .rp-portrait img{display:block; width:100%; height:100%}
.fin-replique p{position:relative; padding:9px 13px; border-radius:4px 14px 14px 14px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); font-size:15px; line-height:1.4}
.fin-replique p b{margin-right:4px}
.fin-retenir{display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:4px; background:var(--jaune-pale); box-shadow:2px 3px 0 var(--trait-doux); font-size:15px; line-height:1.5}
.fin-retenir .source{font-family:var(--f-chiffre); font-size:10.5px; color:var(--encre-3)}
.fin-detail{display:flex; flex-direction:column; gap:7px}
.fin-detail > .etiquette{color:var(--encre-2)}
.fd-liste{list-style:none; display:flex; flex-direction:column; gap:6px}
.fd-liste li{display:grid; grid-template-columns:24px minmax(0, 1fr); gap:2px 8px; padding:8px 10px; border-radius:8px; background:var(--papier-2); font-size:14px; line-height:1.35}
.fd-liste li > .chiffre{grid-row:span 2; color:var(--brique); font-weight:600}
.fd-liste li b{font-family:var(--f-chiffre); font-size:12.5px; font-weight:600; color:var(--ok); overflow-wrap:anywhere}
.fd-liste li b:empty{display:none}
.fd-etape{border-radius:8px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); border-left-width:4px}
.fd-etape.ok{border-left-color:var(--ok)} .fd-etape.moyen{border-left-color:#D9A23A} .fd-etape.ko{border-left-color:var(--ko)}
.fd-etape summary{display:grid; grid-template-columns:22px minmax(0, 1fr); gap:8px; padding:9px 12px; cursor:pointer; list-style:none; font-size:14px; font-weight:600; line-height:1.35}
.fd-etape summary::-webkit-details-marker{display:none}
.fd-etape[open] summary{border-bottom:1px dashed var(--trait-moyen)}
.fd-etape > .comparatif,.fd-etape > .methode{margin:9px 12px}
.fin-notion{align-self:flex-start}
.fin-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding-top:4px}
.fin-actions .btn{flex:1 1 200px}
@media (min-width: 900px){ .fin-actions .btn{flex:0 1 auto} }

/* ---------- « Revoir la notion » et « À revoir » ---------- */
.fiche-notion{z-index:32}
.fiche-notion .carte{width:min(660px, 100%); max-height:min(86dvh, 820px); display:flex; flex-direction:column; gap:10px; padding:16px 16px 14px}
.fn-tete{display:flex; justify-content:space-between; align-items:center; gap:12px}
.fn-corps{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:4px}
.fn-corps .memo{margin-bottom:6px}
.a-revoir{margin-top:16px; padding:12px 14px; border-radius:var(--r-s); background:var(--papier-2); text-align:left}
.a-revoir ul{list-style:none; display:flex; flex-direction:column; gap:7px; margin-top:8px}
.a-revoir .lien-notion{width:100%; min-height:44px; border-radius:10px}
.a-revoir .lien-notion span{min-width:0; line-height:1.25; padding:6px 0}

/* ======================================================================
   La carte de campagne
   ====================================================================== */
.camp-tete{display:flex; align-items:center; gap:14px; margin:2px 0 16px}
.camp-art{width:58px; height:58px}
.camp-perso{display:grid; grid-template-columns:64px minmax(0, 1fr); gap:12px; align-items:start}
.camp-portrait{width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid var(--encre); box-shadow:0 3px 0 var(--encre); background:var(--tapis)}
.camp-portrait canvas,.camp-portrait img{display:block; width:100%; height:100%}
.camp-bulle{position:relative; min-width:0; padding:10px 14px 12px; border-radius:4px 16px 16px 16px; background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:3px 4px 0 rgba(29,27,22,.13)}
.camp-bulle::before{content:""; position:absolute; left:-8px; top:18px; width:13px; height:13px; background:var(--papier-3); border-left:1.5px solid var(--encre); border-bottom:1.5px solid var(--encre); transform:rotate(45deg); border-radius:0 0 0 3px}
.camp-bulle p{font-size:15px; line-height:1.42}

/* La carrière : une plaque de laiton vissée sur le socle */
.camp-carriere{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; align-items:center; margin-top:16px; padding:14px 18px 14px; border-radius:10px; color:#3A2614;
  background:linear-gradient(175deg, #F4DC92 0%, #DDB24A 48%, #C79A31 100%); border:1.5px solid #6B4A1E;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(90,60,10,.25), 0 4px 0 #6B4A1E, 0 12px 22px -14px rgba(0,0,0,.55)}
.camp-carriere::before,.camp-carriere::after{content:""; position:absolute; top:7px; width:7px; height:7px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFF2C2, #8A6420 70%); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.4)}
.camp-carriere::before{left:7px} .camp-carriere::after{right:7px}
.cc-gauche{display:flex; flex-direction:column; gap:6px; min-width:0}
.cc-gauche .etiquette{color:rgba(58,38,20,.75)}
.cc-titre{font-family:var(--f-titre); font-style:italic; font-weight:900; font-stretch:118%; font-size:clamp(19px, 5.4vw, 24px); line-height:1; text-transform:uppercase; text-shadow:0 1px 0 rgba(255,255,255,.5); overflow-wrap:break-word}
.cc-gauche .metre{background:linear-gradient(#FBF4E2, #E9DCC0)}
.cc-gauche small{display:flex; align-items:center; gap:6px; font-size:11px; line-height:1.3; color:#4A3220}
.cc-gauche small .jeton{width:16px; height:16px}
.cc-etoiles{display:flex; flex-direction:column; align-items:center; gap:0; padding:6px 10px; border-radius:10px; background:rgba(255,250,235,.55); box-shadow:inset 0 1px 2px rgba(90,60,10,.25)}
.cc-etoiles .etoile{width:26px; height:26px}
.cc-etoiles b{font-size:20px; font-weight:700; line-height:1.1}
.cc-etoiles small{font-size:10px; opacity:.75}

/* Les lignes (cotation : maritime, aérien, fer, fluvial) */
.camp-lignes{display:flex; gap:5px; margin-top:16px; padding:4px; border-radius:14px; background:var(--papier-2); border:1px solid var(--trait-doux); overflow-x:auto; scrollbar-width:none}
.camp-lignes::-webkit-scrollbar{display:none}
.camp-lignes button{flex:1 0 auto}
.camp-lignes button{display:grid; grid-template-columns:22px auto auto; align-items:center; gap:7px; min-height:44px; padding:0 11px; white-space:nowrap; border-radius:10px; font-weight:700; font-size:13.5px; color:var(--encre-2); text-align:left}
.camp-lignes button svg{width:22px; height:22px}
.camp-lignes button small{font-size:10.5px; font-weight:500; color:var(--encre-3)}
.camp-lignes button[aria-selected="true"]{background:var(--papier-3); color:var(--encre); box-shadow:0 0 0 1.5px var(--encre), 0 3px 0 var(--encre)}

/* La classe sur la ligne */
.camp-classe{margin-top:16px}
.cl-liste{display:flex; gap:8px; overflow-x:auto; padding:8px 2px 4px; scrollbar-width:none}
.cl-liste::-webkit-scrollbar{display:none}
.cl-joueur{flex:none; display:flex; align-items:center; gap:7px; padding:3px 11px 3px 3px; border-radius:999px; background:var(--papier-3); border:1.5px solid var(--trait-moyen)}
.cl-portrait{width:30px; height:30px; border-radius:50%; overflow:hidden; flex:none; background:var(--tapis)}
.cl-portrait canvas,.cl-portrait img{display:block; width:100%; height:100%}
.cl-joueur > span:last-child{display:flex; flex-direction:column; line-height:1.15}
.cl-joueur b{font-size:13px}
.cl-joueur small{font-size:9.5px; color:var(--encre-3); white-space:nowrap}

/* Le socle : bois, terrain peint, voie HO */
.plateau{position:relative; margin-top:16px; border-radius:16px; overflow:hidden; background:#7FA66A; border:7px solid #9C7550;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.18), inset 0 10px 18px -12px rgba(0,0,0,.45), 0 0 0 1.5px #5F4630, 0 3px 0 1.5px #5F4630, 0 16px 30px -18px rgba(0,0,0,.6);
  --pw:min(300px, calc(76% - 46px))}
.voie{position:absolute; inset:0; display:block; width:100%; height:100%}
.voie .bande.n1{fill:#86AC72} .voie .bande.n2{fill:#C7B46C} .voie .bande.n3{fill:#9EA59B}
.voie .texture{pointer-events:none}
.voie .lisiere{stroke:rgba(29,27,22,.28); stroke-width:2; stroke-dasharray:2 6; fill:none}
.voie .ballast-bord{fill:none; stroke:rgba(70,50,28,.38); stroke-width:29; stroke-linecap:round}
.voie .ballast{fill:none; stroke:#D7CBB1; stroke-width:25; stroke-linecap:round}
.voie .ballast.a-poser{stroke:rgba(255,250,241,.32); stroke-width:21}
.voie .ballast-bord.a-poser{stroke:none}
.voie .trace{fill:none; stroke:rgba(29,27,22,.5); stroke-width:2; stroke-dasharray:7 6; stroke-linecap:round}
.voie .traverses{fill:none; stroke:#7A5638; stroke-width:19; stroke-dasharray:3.6 6.4}
.voie .rail{fill:none; stroke:#4F575E; stroke-width:14}
.voie .rail.or{stroke:#C9962B}
.voie .d-ombre{fill:rgba(20,30,10,.2)}
.voie .d-tronc{stroke:#5F4630; stroke-width:3; stroke-linecap:round; fill:none}
.voie .d-feuille{fill:#3E6B57; stroke:#1D1B16; stroke-width:1.3}
.voie .d-feuille.f2{fill:#557C4E} .voie .d-feuille.f3{fill:#2E5A4C}
.voie .d-mur{fill:#F4EBDD; stroke:#1D1B16; stroke-width:1.3}
.voie .d-toit{fill:#C2492F; stroke:#1D1B16; stroke-width:1.3; stroke-linejoin:round}
.voie .d-porte{fill:#3F5164}
.voie .d-horloge{fill:#FFF9EF; stroke:#1D1B16; stroke-width:1.3}
.panneau-niveau{position:absolute; left:10px; z-index:1; padding:3px 9px; border-radius:4px; background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:0 2px 0 var(--encre); font-family:var(--f-chiffre); font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-2deg); pointer-events:none}
.panneau-niveau.n2{background:var(--jaune-clair)}
.panneau-niveau.droite{left:auto; right:10px; transform:rotate(2deg)}
.panneau-niveau.n3{background:var(--brique); color:var(--papier-3)}

/* Les arrêts */
.plateau .station{position:absolute; z-index:2; width:0; height:0; padding:0; border:0; background:none; color:var(--encre)}
.st-noeud{position:absolute; left:-23px; top:-23px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--papier-3); border:2.5px solid var(--encre);
  box-shadow:0 4px 0 var(--encre), 0 12px 14px -8px rgba(0,0,0,.55); transition:transform .2s var(--ease-ressort)}
.st-noeud b{font-size:16px; font-weight:700}
.st-noeud svg{width:18px; height:18px}
.plateau .station.fait .st-noeud{background:var(--jaune)}
.plateau .station.parfait .st-noeud{background:radial-gradient(circle at 35% 30%, #FFF2BE, #E9B020 58%, #C2901F)}
.plateau .station.ferme .st-noeud{background:#D2CBBD; color:#7A6E5C; border-color:#6A6152; box-shadow:0 3px 0 #6A6152}
.plateau .station.terminus .st-noeud{left:-30px; top:-30px; width:60px; height:60px; background:var(--brique); color:var(--papier-3); box-shadow:0 5px 0 var(--encre), 0 14px 16px -8px rgba(0,0,0,.55)}
.plateau .station.terminus .st-noeud svg{width:25px; height:25px}
.plateau .station.terminus.ferme .st-noeud{background:#B98A7E; color:#F4EBDD}
.plateau .station.terminus.parfait .st-noeud{background:radial-gradient(circle at 35% 30%, #FFF2BE, #E9B020 58%, #C2901F); color:var(--encre)}
.plateau .station.courant .st-noeud{animation:camp-pouls 1.7s ease-out infinite}
@keyframes camp-pouls{0%{box-shadow:0 4px 0 var(--encre), 0 0 0 0 rgba(233,176,32,.95)} 70%{box-shadow:0 4px 0 var(--encre), 0 0 0 15px rgba(233,176,32,0)} 100%{box-shadow:0 4px 0 var(--encre), 0 0 0 0 rgba(233,176,32,0)}}
.plateau .station:hover .st-noeud{transform:translateY(-2px) scale(1.05)}
.plateau .station:active .st-noeud{transform:translateY(2px)}
.plateau .station:focus-visible{outline:none}
.plateau .station:focus-visible .st-noeud{outline:3px solid var(--jaune); outline-offset:3px}
.st-etoiles{position:absolute; left:-30px; top:28px; width:60px; display:flex; justify-content:center; pointer-events:none}
.terminus .st-etoiles{top:36px}
.st-etoiles .etoiles{padding:2px 4px; border-radius:999px; background:rgba(255,250,241,.85)}
.st-etoiles .etoiles:empty{display:none}
.st-etoiles .etoile{width:13px; height:13px}
.st-panneau{position:absolute; top:-30px; width:var(--pw); display:flex; flex-direction:column; gap:2px; padding:7px 10px 8px; border-radius:7px; background:var(--papier-3); border:1.5px solid var(--encre); box-shadow:0 3px 0 var(--encre); text-align:left}
.a-gauche .st-panneau{left:38px}
.a-droite .st-panneau{right:38px}
.terminus.a-gauche .st-panneau{left:44px} .terminus.a-droite .st-panneau{right:44px}
.st-sur{font-size:9px; color:var(--encre-3)}
.st-titre{font-size:13.5px; font-weight:700; line-height:1.22; overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto}
.st-record{display:flex; align-items:center; flex-wrap:wrap; gap:3px 5px; margin-top:3px; font-size:10.5px; color:var(--encre-2)}
.st-record.vide{font-family:var(--f-chiffre); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:#2C6A50}
.plateau .station.ferme .st-panneau{background:rgba(255,250,241,.78); border-color:rgba(29,27,22,.35); box-shadow:none}
.plateau .station.ferme .st-titre{color:var(--encre-2); font-weight:600}
.terminus .st-panneau{border-color:var(--brique); box-shadow:0 3px 0 var(--brique)}
.terminus .st-sur{color:var(--brique); font-weight:600}
.plateau .station:hover .st-panneau{transform:translateY(-1px)}
.st-rivaux{position:absolute; top:-13px; display:flex; pointer-events:none}
.a-gauche .st-rivaux{right:30px; flex-direction:row-reverse}
.a-droite .st-rivaux{left:30px}
.terminus .st-rivaux{top:-13px}
.pion-rival{width:26px; height:26px; border-radius:50%; overflow:hidden; flex:none; margin:0 -5px; border:2px solid var(--papier-3); box-shadow:0 2px 5px rgba(0,0,0,.35); background:var(--tapis)}
.pion-rival canvas,.pion-rival img{display:block; width:100%; height:100%}
.pion-plus{align-self:center; margin:0 7px; font-size:10px; font-weight:700; color:var(--papier-3); text-shadow:0 1px 2px rgba(0,0,0,.6)}
.pion-moi{position:absolute; z-index:3; width:54px; height:54px; margin:-27px 0 0 -27px; pointer-events:none}
.pm-portrait{position:absolute; inset:0; border-radius:50%; overflow:hidden; border:3px solid var(--jaune); box-shadow:0 0 0 2.5px var(--encre), 0 10px 14px -4px rgba(0,0,0,.5); background:var(--tapis)}
.pm-portrait canvas,.pm-portrait img{display:block; width:100%; height:100%}
.pm-nom{position:absolute; left:50%; top:-15px; transform:translateX(-50%); padding:1px 7px; border-radius:4px; background:var(--encre); color:var(--jaune); font-size:9px; line-height:1.4; box-shadow:0 0 0 1.5px var(--jaune)}
.camp-legende{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; font-size:11.5px; color:var(--encre-2)}
.camp-legende span{display:inline-flex; align-items:center; gap:6px}
.camp-legende .etoile{width:12px; height:12px}

/* La fiche d'un arrêt */
.fiche-arret .carte{width:min(470px, 100%); display:flex; flex-direction:column; gap:12px; max-height:calc(100dvh - 32px); overflow-y:auto}
.fiche-arret .carte.terminus{border-color:var(--brique); box-shadow:0 3px 0 var(--brique)}
.fa-tete{display:flex; justify-content:space-between; align-items:center; gap:12px}
.terminus .fa-tete .etiquette{color:var(--brique); font-weight:700}
.fa-perso{display:grid; grid-template-columns:40px minmax(0, 1fr); gap:10px; align-items:start}
.fa-portrait{width:40px; height:40px; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1.5px var(--encre); background:var(--tapis)}
.fa-portrait canvas,.fa-portrait img{display:block; width:100%; height:100%}
.fa-perso p{padding:8px 12px; border-radius:4px 14px 14px 14px; background:var(--papier-2); font-size:14.5px; line-height:1.4}
.fa-perso p b{margin-right:4px}
.fa-infos{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:0}
.fa-infos div{padding:9px 10px; border-radius:var(--r-s); background:var(--papier-2); min-width:0}
.fa-infos dt{font-size:9.5px; color:var(--encre-2); white-space:nowrap; overflow:hidden; text-overflow:clip}
.fa-infos dd{margin:3px 0 0; font-size:15px; font-weight:600; display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.fa-record{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-s); border:1.5px dashed var(--encre-3)}
.fa-record.vide{border-color:#2C6A50; background:#EEF5F0}
.fa-rp{width:36px; height:36px; border-radius:50%; overflow:hidden; flex:none; box-shadow:0 0 0 1.5px var(--encre); filter:grayscale(.3)}
.fa-rp canvas,.fa-rp img{display:block; width:100%; height:100%}
.fa-record > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.fa-record b{font-size:14.5px; line-height:1.3}
.fa-objectifs{list-style:none; display:flex; flex-direction:column; gap:6px}
.fa-objectifs li{display:flex; align-items:center; gap:9px; font-size:14px; line-height:1.3; color:var(--encre-2)}
.fa-objectifs li.ok{color:var(--encre); font-weight:600}
.fa-objectifs .etoile{width:17px; height:17px}
.fiche-arret #jouerCas svg:not(.fleche){width:16px; height:16px}

/* ---------- L'étagère des jeux (onglet Cours) ---------- */
.etagere-tete{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px}
.etagere-total{display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 12px; border-radius:999px; background:var(--encre); color:var(--papier); white-space:nowrap}
.etagere-total .etoile{width:16px; height:16px}
.etagere-total b{font-size:14px}
.etagere-total small{font-size:11px; opacity:.7}
.etagere{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x proximity; padding:8px 6px 18px; scrollbar-width:none}
.etagere::-webkit-scrollbar{display:none}
@media (hover: hover) and (pointer: fine){ .etagere{cursor:grab} .etagere.glisse{cursor:grabbing; scroll-snap-type:none} .etagere.glisse .boite-jeu{pointer-events:none} }
.boite-jeu{flex:none; width:150px; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:8px; background:var(--papier-3); border:2px solid var(--encre); box-shadow:4px 5px 0 var(--encre);
  text-decoration:none; color:var(--encre); transform:rotate(var(--tilt, 0deg)); transition:transform .25s var(--ease-ressort), box-shadow .2s}
.boite-jeu:hover{transform:rotate(0deg) translateY(-3px); box-shadow:5px 7px 0 var(--encre)}
.boite-jeu:active{transform:rotate(0deg) translateY(1px); box-shadow:2px 3px 0 var(--encre)}
.bj-couvercle{position:relative; height:86px; display:grid; place-items:center; border-bottom:2px solid var(--encre); border-radius:6px 6px 0 0; background:var(--jaune);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 8px, transparent 8px 16px)}
.bj-art{width:54px; height:54px; display:grid; place-items:center; color:var(--encre)}
.bj-art svg{width:100%; height:100%}
.bj-kit{position:absolute; top:6px; left:7px; padding:1px 5px; border:1.5px solid var(--encre); border-radius:3px; background:var(--papier-3); font-size:9.5px; font-weight:600}
.bj-corps{display:flex; flex-direction:column; gap:3px; padding:9px 10px 10px; flex:1}
.bj-nom{font-family:var(--f-titre); font-style:italic; font-weight:850; font-stretch:112%; text-transform:uppercase; font-size:13.5px; line-height:1.05}
.bj-titre{font-size:11.5px; line-height:1.25; color:var(--encre-2); min-height:2.5em}
.bj-pied{display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:4px}
.bj-barre{flex:1; height:6px; border-radius:3px; background:var(--trait-doux); overflow:hidden}
.bj-barre i{display:block; height:100%; background:var(--jaune); box-shadow:inset -1.5px 0 0 var(--encre)}
.bj-etoiles{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; white-space:nowrap}
.bj-etoiles .etoile{width:12px; height:12px}
.boite-jeu.neuve .bj-art{opacity:.85}
.boite-jeu.jeu-patron .bj-couvercle{background-color:#E07B26}
.boite-jeu.jeu-dossier_import .bj-couvercle,.boite-jeu.jeu-tour .bj-couvercle{background-color:#B9D2E0}
.boite-jeu.jeu-tribunal .bj-couvercle{background-color:#C9B48C}
.boite-jeu.jeu-coffre .bj-couvercle{background-color:#9FC2B3}
.boite-jeu.jeu-tableau_de_bord .bj-couvercle{background-color:#E3C9A6}
.boite-jeu.jeu-carte .bj-couvercle{background-color:#B5D1A8}
.boite-jeu.jeu-entrepot .bj-couvercle{background-color:#D7B98A}
.boite-jeu.jeu-conseil .bj-couvercle{background-color:var(--papier-2)}
.boite-jeu.jeu-atelier .bj-couvercle{background-color:#F0C9BB}
.boite-jeu.jeu-bureau .bj-couvercle{background-color:#C9D7E3}
.boite-jeu.jeu-quai .bj-couvercle{background-color:#3F5164}
.boite-jeu.jeu-quai .bj-art{color:var(--papier-3)}
.boite-jeu.jeu-chargement .bj-couvercle{background-color:#C8A27A}

@media (prefers-reduced-motion: reduce){
  .plateau .station.courant .st-noeud,.combo-dossier.feu{animation:none}
}
@media (max-width: 380px){
  .perso-dit{font-size:15.5px}
  .interlocuteur{grid-template-columns:46px minmax(0, 1fr); gap:10px}
  .perso-portrait{width:46px; height:46px}
  .fa-infos dt{font-size:8.5px}
}

/* Téléphone : la carte prend toute la hauteur, l'en-tête se fait plus compact */
@media (max-width: 899px){
  .campagne .camp-tete{margin-bottom:12px}
  .campagne .camp-art{width:48px; height:48px}
  .camp-perso{grid-template-columns:52px minmax(0, 1fr)}
  .camp-portrait{width:52px; height:52px}
  .camp-carriere{margin-top:12px; padding:12px 14px}
  .camp-lignes{margin-top:12px}
}