/* MétroPif — tout le style du site (sources/css/ : le même, module par module) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* ============================================================================
   MÉTROPIF — DESIGN SYSTEM
   Tokens → primitives → composants → jeux.
   Aucune couleur n'est écrite en dur hors de ce bloc (sauf couleurs de lignes,
   qui viennent de la base de données réseau : elles sont fonctionnelles).
   ========================================================================== */
:root{
  /* — Palette ————————————————————————————— */
  --nuit:#0B0E13;          /* tunnel */
  --nuit-2:#141922;        /* quai */
  --nuit-3:#1E2733;
  --faience:#E8E9E4;       /* carrelage biseauté */
  --faience-2:#D5D7CF;
  --bleu:#0064B0;          /* bleu signalétique */
  --bleu-clair:#3E8FD4;
  --vert-sortie:#00814F;
  --rouge:#E3051C;
  --jaune:#FFCE00;
  --gris:#8A93A0;
  --gris-2:#5A626E;

  /* — Typo ————————————————————————————————— */
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* — Motion tokens ————————————————————————— */
  --dur-fast:130ms;
  --dur:240ms;
  --dur-slow:520ms;
  --dur-xslow:900ms;
  --ease-std:cubic-bezier(.2,.8,.2,1);
  --ease-emph:cubic-bezier(.16,1,.3,1);
  --ease-out-expo:cubic-bezier(.19,1,.22,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  /* — Espace / rayon —————————————————————— */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:112px;
  --r-s:6px; --r-m:12px; --r-l:20px; --r-xl:28px;
  --line-w:14px;           /* épaisseur d'un trait de ligne */
  --hdr:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--nuit);
  color:var(--faience);
  font-family:var(--body);
  font-size:16px;
  line-height:1.45;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--jaune);color:var(--nuit)}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px;border-radius:4px}

/* Grain + vignette : la couche « tunnel » */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:900;
  background:radial-gradient(135% 105% at 50% 38%,transparent 66%,rgba(0,0,0,.38) 100%);
}

/* ============================ TYPOGRAPHIE ================================ */
.h-mega{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.2rem,13.5vw,10.5rem);
  line-height:.86;letter-spacing:-.045em;margin:0;
  text-transform:uppercase;
}
.h1{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:-.03em;line-height:1;margin:0;text-transform:uppercase}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.75rem);letter-spacing:-.02em;margin:0}
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gris);margin:0 0 var(--sp-3);
}
.lede{color:#B9BFC7;max-width:56ch;margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Plaque émaillée de station — ÉLÉMENT SIGNATURE du site */
.plaque{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  background:var(--bleu);color:#fff;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(1rem,2.4vw,1.5rem);
  padding:.55em 1.1em;border-radius:999px;
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 6px var(--bleu),
             0 10px 30px rgba(0,0,0,.45);
  position:relative;
}
.plaque--sm{font-size:.9rem;padding:.45em .95em;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--bleu),0 6px 18px rgba(0,0,0,.4)}

/* ============================ CHROME / HEADER ============================ */
#ambient{position:fixed;inset:0;z-index:0;pointer-events:none}
.shell{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}

header.top{
  position:sticky;top:0;z-index:60;height:var(--hdr);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(var(--sp-4),4vw,var(--sp-7));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(to bottom,rgba(11,14,19,.92),rgba(11,14,19,.55));
  border-bottom:1px solid rgba(232,233,228,.08);
}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;
  font-size:1.15rem;letter-spacing:-.02em;text-transform:uppercase;padding:6px 8px;margin-left:-8px;border-radius:var(--r-m)}
.logo svg{display:block;overflow:visible}
.logo:hover .lg-train{animation:lgRun .9s var(--ease-out-expo)}
@keyframes lgRun{0%{transform:translateX(0)}100%{transform:translateX(26px)}}
.top-actions{display:flex;gap:var(--sp-2);align-items:center}

/* ============================ BOUTONS ==================================== */
.btn{
  --bg:transparent;--fg:var(--faience);--bd:rgba(232,233,228,.28);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:700;font-size:.9rem;letter-spacing:.02em;
  padding:.72em 1.25em;border-radius:999px;color:var(--fg);background:var(--bg);
  box-shadow:inset 0 0 0 1.5px var(--bd);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std),
             background var(--dur) var(--ease-std),color var(--dur) var(--ease-std);
  will-change:transform;white-space:nowrap;
}
.btn:hover{background:rgba(232,233,228,.09)}
.btn:active{transform:scale(.96)}
.btn--solid{--bg:var(--faience);--fg:var(--nuit);--bd:transparent}
.btn--solid:hover{background:var(--cr-blanc)}
.btn--blue{--bg:var(--bleu);--fg:#fff;--bd:transparent}
.btn--blue:hover{background:var(--bleu-clair)}
.btn--danger{--fg:#FF8A93;--bd:rgba(227,5,28,.5)}
.btn--lg{font-size:1.05rem;padding:.85em 1.7em}
.btn--ghost{--bd:transparent}
.btn[disabled]{opacity:.4;pointer-events:none}
/* halo magnétique */
.btn--magnet::after{
  content:"";position:absolute;inset:-30%;border-radius:inherit;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,206,0,.35),transparent 70%);
  opacity:0;transition:opacity var(--dur) var(--ease-std);
}
.btn--magnet:hover::after{opacity:1}

/* ============================ LAYOUT ===================================== */
main{flex:1;position:relative}
.view{padding:0 clamp(var(--sp-4),4vw,var(--sp-7)) var(--sp-9)}
/* La largeur du contenu passe par une variable : le mode large n'a qu'à la
   redéfinir, sans se battre avec la cascade. */
:root{--wrapMax:1180px;--viewPad:clamp(var(--sp-4),4vw,var(--sp-7))}
.wrap{max-width:var(--wrapMax);margin:0 auto;transition:max-width .35s var(--ease-std)}

/* — Mode large : on récupère la place prise par les marges et le décor —— */
.btn--icone{display:inline-grid;place-items:center;width:38px;height:38px;padding:0}
/* 97 vw jusqu'à 1815 px de large, puis on plafonne à 1760 px. C'est le
   min(1760px,97vw) d'origine, écrit sans min() : tous les moteurs le
   comprennent, y compris ceux qui rejettent la fonction. */
html.mp-large .wrap{max-width:97vw !important}
@media (min-width:1815px){ html.mp-large .wrap{max-width:1760px !important} }
html.mp-large .view{padding-inline:var(--sp-4)}
html.mp-large header.top{padding-inline:var(--sp-4)}
html.mp-large footer.foot{display:none}
html.mp-large #ambient{opacity:.45}
html.mp-large .section{padding-top:clamp(var(--sp-5),4vw,var(--sp-7))}
html.mp-large .mc-mapwrap{height:clamp(420px,76vh,860px)}
html.mp-large .playfield canvas{max-height:82vh}
html.mp-large #btnEcran{background:var(--jaune) !important;color:#0B0E13 !important}
/* en vrai plein écran, le fond ne doit pas laisser de bande */
html:fullscreen body,html:-webkit-full-screen body{background:var(--nuit)}
.section{padding-top:clamp(var(--sp-7),8vw,var(--sp-9))}
.stack{display:flex;flex-direction:column;gap:var(--sp-4)}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* transition de route : un train balaie l'écran */
#sweep{position:fixed;inset:0;z-index:800;pointer-events:none;display:none}
#sweep.on{display:block}
.sweep-bar{position:absolute;left:-40%;top:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,var(--bar,#0064B0) 22%,var(--bar,#0064B0) 78%,transparent);
  filter:blur(.5px);animation:sweep var(--dur-slow) var(--ease-out-expo) forwards}
@keyframes sweep{to{left:110%}}
.view-in{animation:viewIn var(--dur-slow) var(--ease-emph) both}
@keyframes viewIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Transition de vue : la page entrante grandit depuis le point cliqué,
   la sortante recule. Uniquement transform/opacity → composité GPU. */
.view-enter{opacity:0;transform:scale(.93);will-change:transform,opacity}
.view-enter.in{opacity:1;transform:none;
  transition:opacity .34s var(--ease-emph),transform .56s var(--ease-emph)}
.view-out{opacity:0;transform:scale(1.05);pointer-events:none;
  transition:opacity .2s ease-in,transform .2s ease-in}

/* ============================ HERO ======================================= */
.hero{min-height:calc(100vh - var(--hdr));display:flex;flex-direction:column;justify-content:center;
  padding-top:var(--sp-7);position:relative}
.hero .h-mega{position:relative}
.hero-sub{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.hero-cta{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.hero-strip{display:flex;gap:6px;margin-top:var(--sp-7);flex-wrap:wrap}
.strip-dot{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.85rem;color:#000;
  transition:transform var(--dur) var(--ease-back);cursor:default}
.strip-dot:hover{transform:translateY(-6px) scale(1.15)}
.scroll-hint{position:absolute;bottom:var(--sp-5);left:0;font-family:var(--mono);font-size:.65rem;
  letter-spacing:.2em;color:var(--gris);text-transform:uppercase;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* ============================ CARTES ===================================== */
.cards{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:var(--sp-5)}
.card{
  position:relative;overflow:hidden;border-radius:var(--r-l);padding:var(--sp-5);
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.09);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std);
  will-change:transform;text-align:left;display:block;width:100%;
}
.card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(232,233,228,.22),0 24px 50px rgba(0,0,0,.5)}
.card:active{transform:scale(.975);transition-duration:var(--dur-fast)}
.card .card-line{position:absolute;left:0;bottom:0;height:5px;width:0;background:var(--accent,var(--bleu));
  transition:width var(--dur-slow) var(--ease-out-expo)}
.card:hover .card-line{width:100%}
.card h3{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:.2em 0 .35em;text-transform:uppercase;letter-spacing:-.01em}
.card p{margin:0;color:#A8B0BA;font-size:.92rem}
.card .card-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--gris);text-transform:uppercase}
.card--locked{opacity:.55}
.card--locked:hover{transform:none;box-shadow:inset 0 0 0 1px rgba(232,233,228,.09)}

/* Deux grands boutons verticaux : Débutant / Avancé */
.bigstack{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5);max-width:860px}
.bigbtn{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--sp-4);
  padding:clamp(var(--sp-4),3vw,var(--sp-5)) clamp(var(--sp-4),3vw,var(--sp-6));
  border-radius:var(--r-l);text-align:left;width:100%;
  background:linear-gradient(120deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std);
  will-change:transform;
}
.bigbtn:hover{transform:translateX(10px);box-shadow:inset 0 0 0 1px rgba(232,233,228,.24),0 20px 44px rgba(0,0,0,.5)}
.bigbtn:active{transform:scale(.985);transition-duration:var(--dur-fast)}
.bigbtn i.rail{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);transform:scaleY(.25);
  transform-origin:center;transition:transform var(--dur-slow) var(--ease-out-expo)}
.bigbtn:hover i.rail{transform:scaleY(1)}
.bigbtn b{display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,3.4vw,2rem);letter-spacing:-.02em;line-height:1}
.bigbtn small{display:block;color:#A8B0BA;font-size:.9rem;margin-top:.35em}
.bigbtn .go{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;color:var(--gris);
  transition:transform var(--dur) var(--ease-back),color var(--dur) var(--ease-std)}
.bigbtn:hover .go{transform:translateX(6px);color:var(--faience)}

/* Section Jeux : panneau bleu clair, comme un panneau de quai */
.bluepanel{
  border-radius:var(--r-xl);padding:clamp(var(--sp-5),5vw,var(--sp-8));margin-top:var(--sp-5);
  background:linear-gradient(150deg,#DCE9F5,#B9D4EC);color:var(--nuit);position:relative;overflow:hidden;
}
.bluepanel .h1,.bluepanel .h2{color:var(--nuit)}
.bluepanel p{color:#2B3846}
.bluepanel .rails{position:absolute;inset:0;opacity:.25;pointer-events:none}

/* Jeux disposés comme un réseau */
.network{position:relative;margin-top:var(--sp-6)}
.network .net-rail{position:absolute;left:22px;top:0;bottom:0;width:4px;background:rgba(232,233,228,.12);border-radius:2px}
.net-item{position:relative;padding-left:60px;padding-block:var(--sp-3);display:block;width:100%;text-align:left;
  transition:transform var(--dur) var(--ease-emph)}
.net-item:hover{transform:translateX(8px)}
.net-item .net-dot{position:absolute;left:12px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:999px;
  background:var(--nuit);box-shadow:inset 0 0 0 4px var(--accent,var(--bleu));
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.net-item:hover .net-dot{transform:scale(1.35);box-shadow:inset 0 0 0 5px var(--accent,var(--bleu)),0 0 0 8px rgba(255,255,255,.06)}
.net-item h4{margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:.01em}
.net-item span{color:#98A0AB;font-size:.85rem}
.net-item[disabled]{opacity:.4}

/* ============================ PASTILLES DE LIGNE ========================= */
.bullet{
  display:inline-grid;place-items:center;width:2em;height:2em;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:1rem;line-height:1;flex:none;
  letter-spacing:-.02em;
}
.bullet--sq{border-radius:.35em}
.bullet--lg{font-size:1.5rem}
.bullet--xs{font-size:.72rem}

/* ============================ HUD / JEUX ================================= */
.gamebar{
  display:flex;align-items:center;flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-l);margin-bottom:var(--sp-5);gap:var(--sp-5);
  background:rgba(16,21,29,.94);box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);
  backdrop-filter:blur(10px);
}
.hudlabel{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--gris);text-transform:uppercase;display:block}
.hudval{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1}
.hudval.bump{animation:bump .45s var(--ease-back)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.32);color:var(--jaune)}100%{transform:scale(1)}}
.hearts{display:flex;gap:6px}
.heart{width:16px;height:16px;border-radius:3px;background:var(--rouge);transform:rotate(45deg);
  transition:opacity var(--dur) var(--ease-std),transform var(--dur) var(--ease-back)}
.heart.gone{opacity:.16;transform:rotate(45deg) scale(.6)}
.heart.losing{animation:lifeLost .55s var(--ease-out-expo)}
@keyframes lifeLost{0%{transform:rotate(45deg) scale(1)}30%{transform:rotate(45deg) scale(1.9);box-shadow:0 0 24px var(--rouge)}100%{transform:rotate(45deg) scale(.6);opacity:.16}}

.progress{height:6px;border-radius:3px;background:rgba(232,233,228,.14);overflow:hidden;min-width:120px;flex:1}
.progress i{display:block;height:100%;width:0;background:var(--accent,var(--jaune));border-radius:3px;
  transition:width var(--dur-slow) var(--ease-out-expo)}

.stage{position:relative;border-radius:var(--r-xl);padding:clamp(var(--sp-4),3vw,var(--sp-6));
  background:linear-gradient(170deg,rgba(26,34,45,.97),rgba(11,14,19,.98));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.09);min-height:340px}
.stage-title{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.1rem,2.4vw,1.5rem);margin:0 0 var(--sp-2)}
.hint{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--gris);text-transform:uppercase}

/* — drag & drop premium — */
.drag-src{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
.chip{
  position:relative;touch-action:none;user-select:none;-webkit-user-select:none;
  display:inline-flex;align-items:center;gap:10px;padding:.6em 1em;border-radius:999px;
  background:var(--nuit-3);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18),0 4px 12px rgba(0,0,0,.35);
  font-weight:600;font-size:.92rem;cursor:grab;
  transition:box-shadow var(--dur) var(--ease-std),opacity var(--dur) var(--ease-std);
  will-change:transform;
}
.chip:active{cursor:grabbing}
.chip.lifted{z-index:500;box-shadow:0 24px 44px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.4);cursor:grabbing}
.chip.placed{opacity:0;pointer-events:none}
.chip.wrong,.shake{animation:shake .42s var(--ease-std)}
@keyframes shake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(6px)}30%,50%,70%{transform:translateX(-9px)}40%,60%{transform:translateX(9px)}}

.slots{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--sp-6)}
.slot{
  position:relative;min-height:76px;border-radius:var(--r-m);padding:var(--sp-3);
  display:flex;align-items:center;gap:10px;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14);
  background:rgba(232,233,228,.03);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std),background var(--dur) var(--ease-std);
}
.slot.hot{transform:scale(1.04);box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.09)}
.slot.ok{box-shadow:inset 0 0 0 2px var(--accent,var(--vert-sortie));background:rgba(0,129,79,.12)}
.slot.ok::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 var(--accent,var(--vert-sortie));animation:pulseOk .6s var(--ease-out-expo)}
@keyframes pulseOk{from{box-shadow:0 0 0 0 rgba(255,255,255,.5)}to{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.slot-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--gris);
  text-transform:uppercase;margin-bottom:2px}
.slot-fill{display:block;font-weight:600;font-size:.92rem}

/* — réponses cliquables (QCM / lignes) — */
.opts{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.opt{
  text-align:left;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-m);font-weight:600;font-size:.95rem;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.16);background:rgba(232,233,228,.03);
  transition:transform var(--dur-fast) var(--ease-back),box-shadow var(--dur) var(--ease-std),background var(--dur) var(--ease-std);
  display:flex;align-items:center;gap:10px;
}
.opt:hover{transform:translateY(-3px);background:rgba(232,233,228,.09)}
.opt.sel{box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.1)}
.opt.good{box-shadow:inset 0 0 0 2px var(--vert-sortie);background:rgba(0,129,79,.18)}
.opt.bad{box-shadow:inset 0 0 0 2px var(--rouge);background:rgba(227,5,28,.16);animation:shake .42s var(--ease-std)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:700;
  padding:.7em 1.2em;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.9rem;
  background:var(--faience);color:var(--nuit);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease-std),transform var(--dur) var(--ease-back);
  box-shadow:0 18px 40px rgba(0,0,0,.5);max-width:90vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--rouge);color:#fff}

/* — écran de fin — */
.endcard{text-align:center;padding:var(--sp-7) var(--sp-4);animation:viewIn var(--dur-slow) var(--ease-emph) both}
.stats{display:flex;gap:var(--sp-5);justify-content:center;flex-wrap:wrap;margin:var(--sp-5) 0}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:2rem;line-height:1}
.stat span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--gris);text-transform:uppercase}

/* ============================ ITINÉRAIRE ================================= */
.routemap{width:100%;overflow-x:auto;padding:var(--sp-4) 0}
.routemap svg{display:block}
.rm-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw var(--dur-xslow) var(--ease-out-expo) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.rm-pop{opacity:0;animation:popIn .4s var(--ease-back) forwards}
@keyframes popIn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

/* ============================ LISTE ORDONNABLE =========================== */
.sortlist{display:flex;flex-direction:column;gap:6px;max-width:520px;margin:0 auto}
.sortrow{
  display:flex;align-items:center;gap:12px;padding:.6em .9em;border-radius:var(--r-s);
  background:var(--nuit-3);box-shadow:inset 0 0 0 1px rgba(232,233,228,.12);
  font-weight:600;font-size:.9rem;touch-action:none;user-select:none;cursor:grab;
  transition:box-shadow var(--dur) var(--ease-std),background var(--dur) var(--ease-std);
  will-change:transform;
}
.sortrow.dragging{z-index:400;box-shadow:0 20px 40px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.4);cursor:grabbing}
.sortrow .idx{font-family:var(--mono);font-size:.7rem;color:var(--gris);width:2ch;text-align:right}
.sortrow.ok{background:rgba(0,129,79,.16);box-shadow:inset 0 0 0 1.5px var(--vert-sortie)}
.sortrow.ko{background:rgba(227,5,28,.12);box-shadow:inset 0 0 0 1.5px rgba(227,5,28,.55)}

/* ============================ AUTOCOMPLÉTION ============================= */
.ac{position:relative;max-width:460px}
.ac input{
  width:100%;padding:.8em 1em;border-radius:var(--r-m);border:0;
  background:rgba(232,233,228,.06);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2);
  font-weight:600;
}
.ac input::placeholder{color:var(--gris-2)}
.ac ul{position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;
  background:var(--nuit-2);border-radius:var(--r-m);box-shadow:0 20px 44px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,233,228,.14);
  max-height:230px;overflow:auto}
.ac li{padding:.5em .7em;border-radius:var(--r-s);font-size:.88rem;cursor:pointer}
.ac li[aria-selected="true"],.ac li:hover{background:rgba(255,206,0,.16)}

/* ============================ JEU PRINCIPAL ============================== */
.playfield{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#070a0e;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);touch-action:none}
.playfield canvas{display:block;width:100%;height:auto}
.overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:var(--sp-5);
  background:rgba(7,10,14,.86);backdrop-filter:blur(6px);z-index:5}
.overlay[hidden]{display:none}

/* ============================ MODALE / AUTH ============================== */
#authModal{position:fixed;inset:0;z-index:850;display:grid;place-items:center;padding:var(--sp-4);
  background:rgba(5,7,10,.74);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#authModal[hidden]{display:none}
#authModal .modal-in{max-width:min(440px,92vw);width:100%}
.modal-in{background:var(--nuit-2);border-radius:var(--r-xl);padding:var(--sp-6);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12),0 40px 80px rgba(0,0,0,.6);
  animation:viewIn var(--dur) var(--ease-emph) both}
.field{display:block;margin-bottom:var(--sp-3)}
.field span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--gris);text-transform:uppercase;display:block;margin-bottom:6px}
.field input{width:100%;padding:.75em .9em;border-radius:var(--r-m);border:0;background:rgba(232,233,228,.06);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2)}
.msg{font-size:.82rem;color:#FF8A93;min-height:1.2em;margin:0 0 var(--sp-2)}
.tabs{display:flex;gap:4px;margin-bottom:var(--sp-5);background:rgba(232,233,228,.06);padding:4px;border-radius:999px}
.tabs button{flex:1;padding:.5em;border-radius:999px;font-weight:700;font-size:.85rem;color:var(--gris)}
.tabs button[aria-selected="true"]{background:var(--faience);color:var(--nuit)}

/* ============================ DIVERS ===================================== */
.notice{border-radius:var(--r-m);padding:var(--sp-3) var(--sp-4);font-size:.85rem;color:#B9BFC7;
  background:rgba(0,100,176,.12);box-shadow:inset 0 0 0 1px rgba(62,143,212,.3)}
footer.foot{padding:var(--sp-6) clamp(var(--sp-4),4vw,var(--sp-7));border-top:1px solid rgba(232,233,228,.08);
  font-size:.78rem;color:var(--gris-2);display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.35em .7em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(232,233,228,.2);color:var(--gris)}

@media (max-width:640px){
  :root{--hdr:56px}
  .hero{min-height:auto;padding-block:var(--sp-7) var(--sp-6)}
  .slots{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .stats{gap:var(--sp-4)}
}

/* ==========================================================================
   LOT 2 — mise en scène, tickets, cartes de réponse, plan des arrondissements
   ========================================================================== */

/* — Scène de jeu : une affiche de quai plutôt qu'un cadre vide — */
.scene{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#1B2635,#0A0D12 70%);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12);
}
.scene{aspect-ratio:640/340;max-height:min(66vh,620px)}
.scene-art{position:absolute;inset:0}
.scene-art svg,.scene-art img{display:block;width:100%;height:100%;object-fit:cover}
.scene-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 42%,rgba(255,206,0,.10),transparent 70%);
  animation:lampBreath 5.5s ease-in-out infinite}
@keyframes lampBreath{0%,100%{opacity:.55}50%{opacity:1}}
.scene-caption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4);
  background:linear-gradient(to top,rgba(7,10,14,.92),transparent);
  display:flex;align-items:flex-end;gap:var(--sp-3);flex-wrap:wrap}
.credit{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--gris-2);
  text-transform:uppercase;margin:var(--sp-3) 0 0}

/* Traitement « illustration » appliqué aux photos importées */
.cartoon{filter:saturate(1.35) contrast(1.18) brightness(1.04) url(#mpPoster);border-radius:var(--r-l)}

/* — Deux grandes cartes de réponse — */
.answer-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
.acard{
  position:relative;overflow:hidden;padding:var(--sp-5);border-radius:var(--r-l);text-align:left;
  background:linear-gradient(150deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 2px var(--tint);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std);
  will-change:transform;
}
.acard::before{content:"";position:absolute;inset:0;background:var(--tint);opacity:0;
  transition:opacity var(--dur) var(--ease-std)}
.acard:hover{transform:translateY(-8px) scale(1.015);box-shadow:inset 0 0 0 2px var(--tint),0 26px 54px rgba(0,0,0,.55)}
.acard:hover::before{opacity:.14}
.acard:active{transform:scale(.98)}
.acard b{position:relative;display:block;font-family:var(--display);font-weight:800;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.05}
.acard small{position:relative;display:block;color:#9AA3AE;font-size:.82rem;margin-top:.4em}
.acard .mark{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:999px;
  background:var(--tint);color:#080B0F;font-weight:800;margin-bottom:var(--sp-3);
  transition:transform var(--dur) var(--ease-back)}
.acard:hover .mark{transform:rotate(-8deg) scale(1.12)}
.acard[disabled]{pointer-events:none;opacity:.35}
.acard.chosen{box-shadow:inset 0 0 0 3px var(--tint),0 0 44px -6px var(--tint)}

/* — Tickets statistiques — */
.ticket{
  position:relative;touch-action:none;user-select:none;cursor:grab;
  padding:.55em 1.1em .55em 1.5em;border-radius:8px;font-family:var(--mono);font-weight:600;
  background:linear-gradient(100deg,#F0EDE2,#DAD6C8);color:#14171C;
  box-shadow:0 6px 16px rgba(0,0,0,.45);will-change:transform;
  transition:box-shadow var(--dur) var(--ease-std),opacity var(--dur) var(--ease-std);
}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:12px;height:12px;border-radius:999px;
  background:var(--nuit);transform:translateY(-50%)}
.ticket::before{left:-6px} .ticket::after{right:-6px}
.ticket .mag{position:absolute;left:0;top:0;bottom:0;width:7px;background:#6A6357;border-radius:8px 0 0 8px}
.ticket.lifted{box-shadow:0 26px 46px rgba(0,0,0,.6);cursor:grabbing}
.ticket.placed{opacity:0;pointer-events:none}

.quai{
  position:relative;overflow:hidden;border-radius:var(--r-m);padding:var(--sp-4);
  background:linear-gradient(160deg,rgba(232,233,228,.05),rgba(232,233,228,.02));
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std);
}
.quai .edge{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--accent,var(--bleu));
  transform:scaleX(.15);transform-origin:left;transition:transform var(--dur-slow) var(--ease-out-expo)}
.quai.hot{transform:translateY(-4px) scale(1.03);box-shadow:inset 0 0 0 2px var(--jaune)}
.quai.ok{box-shadow:inset 0 0 0 2px var(--accent,var(--vert-sortie))}
.quai.ok .edge{transform:scaleX(1)}
.quai .val{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;margin-top:.25em;
  opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease-std),transform var(--dur) var(--ease-back)}
.quai.ok .val{opacity:1;transform:none}

/* — Plan des arrondissements — */
.paris{position:relative;border-radius:var(--r-l);overflow:hidden;background:#0A0E14;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1)}
.paris svg{display:block;width:100%;height:auto}
.ar-slot{fill:rgba(232,233,228,.05);stroke:rgba(232,233,228,.18);stroke-width:1.5;
  transition:fill var(--dur) var(--ease-std),stroke var(--dur) var(--ease-std)}
.ar-slot.hot{fill:rgba(255,206,0,.18);stroke:var(--jaune);stroke-width:2.5}
.ar-slot.ok{fill:rgba(0,129,79,.3);stroke:#00814F;stroke-width:2}
.ar-num{fill:#8A93A0;font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;
  text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(6,10,16,.7);stroke-width:3px}
/* — Paris en vraies formes — */
.ar-paris{fill:rgba(20,32,46,.55);stroke:rgba(120,160,200,.35);stroke-width:2.5;
  stroke-linejoin:round;pointer-events:none}
.ar-seine{fill:none;stroke:#0F3A56;stroke-width:11;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none}
.ar-seine2{fill:none;stroke:#5AA9DA;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.75;pointer-events:none}
.ar-slot.choisi{fill:rgba(255,206,0,.26);stroke:var(--jaune);stroke-width:3}
/* — La fiche d'un arrondissement — */
.ar-fiche{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);z-index:14;
  border-radius:16px;padding:var(--sp-4);opacity:0;transform:translateY(14px);pointer-events:none;
  background:linear-gradient(155deg,rgba(23,34,47,.97),rgba(11,18,28,.97));
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.4),0 18px 40px -16px rgba(0,0,0,.9);
  transition:opacity .35s var(--ease-std),transform .4s var(--ease-back);
  max-height:56%;overflow-y:auto}
.ar-fiche.on{opacity:1;transform:none;pointer-events:auto}
.ar-fiche-tete{display:flex;align-items:center;gap:var(--sp-3)}
.ar-fiche-tete>div{flex:1}
.ar-fiche-tete b{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:none;
  background:var(--jaune);color:#0B0E13;font-family:var(--display);font-weight:800;font-size:1rem}
.ar-fiche-tete strong{display:block;font-family:var(--display);font-size:.95rem;color:#F5F2E8}
.ar-fiche-tete small{display:block;font-size:.76rem;color:#9AA3AE;margin-top:2px;line-height:1.35}
.ar-fiche-x{background:none;border:0;color:#9AA3AE;font-size:1rem;cursor:pointer;padding:6px}
.ar-fiche-x:hover{color:var(--jaune)}
.ar-fiche-lieux{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:8px;margin-top:var(--sp-3)}
.ar-lieu{border-radius:12px;padding:9px;background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.ar-lieu-ico{display:block;width:30px;height:30px}
.ar-lieu-ico svg{width:30px;height:30px}
.ar-lieu b{display:block;margin-top:5px;font-family:var(--display);font-size:.78rem;
  line-height:1.25;color:#F5F2E8}
.ar-lieu small{display:block;margin-top:3px;font-size:.66rem;color:#9AA3AE}
@media (max-width:620px){ .ar-fiche{max-height:62%} }
.ar-slot.ok + .ar-num{fill:#E8E9E4;font-weight:600}
.seine{fill:none;stroke:#2C6E9B;stroke-width:16;stroke-linecap:round;opacity:.55}

/* — Nœud de correspondance qui se construit — */
.node-stage{position:relative;border-radius:var(--r-l);background:#080B10;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1)}
.node-stage svg{display:block;width:100%;height:auto}
.nd-line{stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw .55s var(--ease-out-expo) forwards}
.nd-fail{animation:failLine .5s var(--ease-std) forwards}
@keyframes failLine{0%{opacity:1;transform:translateX(0)}25%{transform:translateX(-5px)}
  50%{transform:translateX(5px)}100%{opacity:0;transform:translateX(0)}}

/* — Zone d'import de données — */
.dropzone{border-radius:var(--r-l);padding:var(--sp-6);text-align:center;
  box-shadow:inset 0 0 0 2px dashed rgba(232,233,228,.2);background:rgba(232,233,228,.03)}
.dropzone.over{background:rgba(255,206,0,.1);box-shadow:inset 0 0 0 2px var(--jaune)}
.url{font-family:var(--mono);font-size:.72rem;color:var(--bleu-clair);word-break:break-all;user-select:all}

/* — Bouton continuer (le joueur garde la main) — */
.continue{display:flex;justify-content:center;margin-top:var(--sp-5)}

/* — Petite mascotte : le wagon Pif — */
.pif{position:absolute;pointer-events:none;z-index:6}
@keyframes pifRun{0%{opacity:0;transform:translateX(-30px)}
  15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(30px)}}

/* — Écran de victoire — */
.trophy{display:flex;justify-content:center;margin-bottom:var(--sp-4);
  animation:trophyIn .7s var(--ease-back) both}
@keyframes trophyIn{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}
.conf{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;
  animation:confFall 2.2s cubic-bezier(.3,.5,.4,1) forwards;pointer-events:none}
@keyframes confFall{to{transform:translateY(360px) rotate(540deg);opacity:0}}
.hoprow{display:flex;gap:var(--sp-3);justify-content:center;margin:var(--sp-4) 0 var(--sp-5);flex-wrap:wrap}
.hopcar{animation:hop 1.1s var(--ease-back) infinite}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14px)}55%{transform:translateY(0)}}
.loopcar{position:absolute;z-index:8;pointer-events:none}
.looptrail{position:absolute;pointer-events:none;border-radius:var(--r-m);
  box-shadow:0 0 0 2px var(--c),0 0 26px -2px var(--c);animation:trailFade 1.2s var(--ease-out-expo) forwards}
@keyframes trailFade{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.floatpts{position:absolute;transform:translate(-50%,0);font-family:var(--display);font-weight:800;
  font-size:1.1rem;pointer-events:none;z-index:9;animation:ptsUp .95s var(--ease-out-expo) forwards}
@keyframes ptsUp{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-8px) scale(1.15)}
  100%{opacity:0;transform:translate(-50%,-52px) scale(1)}}

/* — Terminus : une seule plaque, deux extrémités — */
.lineplate{
  position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(160deg,rgba(26,34,45,.96),rgba(11,14,19,.98));
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.12);
  transition:box-shadow var(--dur) var(--ease-std),transform var(--dur) var(--ease-emph);
}
.lineplate.done{box-shadow:inset 0 0 0 3px var(--accent),0 18px 44px rgba(0,0,0,.5)}
.lp-rail{position:absolute;left:12%;right:12%;top:50%;height:10px;margin-top:-5px;border-radius:6px;
  background:rgba(232,233,228,.12)}
.lineplate.done .lp-rail{background:var(--accent);animation:railGrow .6s var(--ease-out-expo)}
@keyframes railGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lp-end{position:relative;min-height:66px;border-radius:var(--r-m);display:grid;place-items:center;
  padding:var(--sp-3);text-align:center;background:rgba(232,233,228,.03);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std),background var(--dur) var(--ease-std)}
.lp-end.hot{transform:scale(1.04);box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.09)}
.lp-end.full{box-shadow:inset 0 0 0 2px var(--accent);background:rgba(232,233,228,.06)}
.lp-ph{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--gris-2);text-transform:uppercase}
.lp-term{font-family:var(--display);font-weight:700;font-size:1rem;line-height:1.15}
.lp-mid{position:relative;display:grid;justify-items:center;gap:4px;padding:0 var(--sp-3)}
.lp-name{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--gris);text-transform:uppercase}
@media (max-width:620px){ .lineplate{grid-template-columns:1fr;text-align:center} .lp-rail{display:none} }


/* — Lot 3 : collision, quiz mis en scène, chantier de ligne — */
.bang{position:absolute;transform:translate(-50%,-50%);font-family:var(--display);font-weight:800;
  font-size:1.4rem;color:var(--jaune);text-shadow:0 3px 0 #B45309;pointer-events:none;z-index:10;
  animation:bangPop .6s var(--ease-back) forwards}
@keyframes bangPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-12deg)}
  35%{opacity:1;transform:translate(-50%,-70%) scale(1.25) rotate(6deg)}
  100%{opacity:0;transform:translate(-50%,-120%) scale(1) rotate(-4deg)}}
.lifeflash{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:7;
  background:radial-gradient(120% 100% at 50% 100%,rgba(227,5,28,.45),transparent 70%);
  animation:lifeF .5s ease-out forwards}
@keyframes lifeF{from{opacity:1}to{opacity:0}}

.scene--quiz{aspect-ratio:640/300;max-height:min(42vh,340px)}
.quizboard{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-5);
  background:linear-gradient(to top,rgba(7,10,14,.95) 55%,transparent)}
.quizq{margin:.3em 0 0;font-family:var(--display);font-weight:700;line-height:1.2;
  font-size:clamp(1.05rem,2.6vw,1.55rem);max-width:46ch}

.builder{margin-top:var(--sp-4);border-radius:var(--r-l);overflow:hidden;background:#080B10;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1)}
.builder-scroll{position:relative;overflow-x:auto;overflow-y:hidden;padding:var(--sp-3) 0}
.builder-svg{display:block}
.builder-car{position:absolute;left:0;top:104px;pointer-events:none;z-index:3}
.bd-rail{animation:railIn .4s var(--ease-out-expo) both}
@keyframes railIn{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}

/* — Fréquentation intégrée à l'interface — */
.rider{display:flex;align-items:center;gap:10px;padding:5px 0}
.rider-bar{flex:1;height:8px;border-radius:5px;background:rgba(232,233,228,.12);overflow:hidden;min-width:60px}
.rider-bar i{display:block;height:100%;border-radius:5px;width:0;
  transition:width .9s var(--ease-out-expo)}
.rider-val{font-size:.78rem;color:#A8B0BA;min-width:56px;text-align:right}
.rider--sm .rider-val{font-size:.7rem;min-width:46px}
.rankpanel{display:grid;gap:2px;margin-top:var(--sp-4);max-width:520px}
.rankrow{display:flex;align-items:center;gap:10px;padding:4px 8px;border-radius:8px;
  transition:background var(--dur) var(--ease-std)}
.rankrow:hover{background:rgba(232,233,228,.06)}
.rankrow .pos{font-family:var(--mono);font-size:.68rem;color:var(--gris);width:2ch}

/* — Carte de Paris : lisibilité et retours — */
.ar-slot.ko{fill:rgba(227,5,28,.25);stroke:#E3051C;stroke-width:2.5;animation:arKo .5s var(--ease-std)}
@keyframes arKo{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ar-cell{cursor:default}
.artip{position:absolute;pointer-events:none;transform:translate(-50%,-115%);z-index:12;
  background:var(--nuit-2);border-radius:var(--r-m);padding:.6em .8em;max-width:260px;
  box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,233,228,.16);
  opacity:0;transition:opacity var(--dur) var(--ease-std)}
.artip.on{opacity:1}
.artip b{display:block;font-family:var(--display);font-size:.9rem;margin-bottom:2px}
.artip span{display:block;font-size:.78rem;color:#A8B0BA;line-height:1.3}
.artip-l{margin-top:4px;font-family:var(--mono);font-size:.62rem;color:var(--gris)!important}
.chip--arr{flex-direction:column;align-items:flex-start;gap:2px;padding:.5em .9em;max-width:230px}
/* La puce « numéro seul » : compacte, lisible, sans indice */
.chip--num{flex-direction:row;align-items:center;padding:.45em 1em;max-width:none}
.chip--num b{font-size:1.05rem}
.chip--arr b{font-family:var(--display);font-size:1.05rem}
.chip--arr span{font-size:.74rem;color:#A8B0BA;line-height:1.25}

.bluepanel--alt{margin-top:var(--sp-4);background:linear-gradient(150deg,#E7DFF2,#C9D9EE)}
.legend{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:var(--sp-4)}
.lg-chip{display:inline-flex;align-items:center;gap:6px;padding:.3em .7em;border-radius:999px;font-size:.72rem;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18);transition:all var(--dur) var(--ease-std)}
.lg-chip i{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--gris)}
.lg-ok{box-shadow:inset 0 0 0 2px var(--vert-sortie);background:rgba(0,129,79,.16)}
.lg-ok i{color:#8FE0B4}
.lg-no{opacity:.5;box-shadow:inset 0 0 0 2px rgba(227,5,28,.6);text-decoration:line-through}
.j-rainbow{background:conic-gradient(#E3051C,#FFCE00,#00814F,#0064B0,#662483,#E3051C)!important;color:#fff!important;
  box-shadow:inset 0 0 0 3px #fff;animation:autoPulse 1.1s ease-in-out infinite}
.j-auto{box-shadow:inset 0 0 0 3px #FFCE00;animation:autoPulse 1.2s ease-in-out infinite}
.j-auto .jbolt{position:absolute;inset:0;border-radius:12px;box-shadow:0 0 18px -2px #FFCE00}
.j-corr{box-shadow:inset 0 0 0 3px #fff}
.j-corr .jcross{position:absolute;left:50%;top:6px;bottom:6px;width:3px;margin-left:-1.5px;background:var(--cr-blanc);opacity:.85}
.j-corr .jcross::after{content:"";position:absolute;top:50%;left:-14px;right:-14px;height:3px;margin-top:-1.5px;
  background:var(--cr-blanc);opacity:.85}
.hudval.warn{color:#FF8A93;animation:bump .5s var(--ease-back) infinite}
.dropmenu{text-align:center;padding:var(--sp-6) var(--sp-4)}
.objgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--sp-3);max-width:640px;margin:0 auto}
.objcell{padding:var(--sp-4);border-radius:var(--r-m);background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12)}
.objcell b{display:block;font-family:var(--display);font-size:1.15rem}
.objcell span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;color:var(--gris);text-transform:uppercase}
.stars{display:flex;gap:10px;justify-content:center;margin-bottom:var(--sp-4)}
.star{font-size:2.6rem;color:rgba(232,233,228,.18);animation:starIn .6s var(--ease-back) both}
.star.on{color:var(--jaune);text-shadow:0 0 22px rgba(255,206,0,.6)}
@keyframes starIn{from{opacity:0;transform:scale(.2) rotate(-40deg)}to{opacity:1;transform:none}}

/* — Classement — */
.lbtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-5)}
.lbtab{padding:.45em .9em;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--gris);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18);transition:all var(--dur) var(--ease-std)}
.lbtab:hover{color:var(--faience);background:rgba(232,233,228,.07)}
.lbtab.on{background:var(--faience);color:var(--nuit);box-shadow:none}
.lblist{margin-top:var(--sp-5)}
.lbhead,.lbrow{display:grid;grid-template-columns:56px 1fr 82px 110px auto;gap:10px;align-items:center;
  padding:.55em .8em;border-radius:10px}
.lbhead{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gris)}
.lbrow{background:rgba(232,233,228,.04);margin-bottom:4px;
  animation:viewIn .4s var(--ease-emph) both;transition:background var(--dur) var(--ease-std)}
.lbrow:hover{background:rgba(232,233,228,.09)}
.lbrow.me{box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.1)}
.lbrank{font-family:var(--display);font-weight:800;font-size:1rem}
.lbscore{font-weight:700}
.lbup{color:#8FE0B4;font-size:.7rem;font-family:var(--mono)}
.codebig{display:inline-block;font-family:var(--mono);font-weight:600;font-size:1.6rem;letter-spacing:.35em;
  color:var(--jaune);margin-top:4px}
@media (max-width:620px){ .lbhead,.lbrow{grid-template-columns:40px 1fr 74px} .lbhead span:nth-child(4),
  .lbrow span:nth-child(4){grid-column:2/4;font-size:.85rem} }

/* — Logo, panneaux doux, menu des jeux, animation de ligne — */
.logo-mark{display:block;width:32px;height:32px;border-radius:9px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,.4);transition:transform var(--dur) var(--ease-back)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.08)}
.logo-mark svg{display:block;width:100%;height:100%}

.panneau{display:inline-flex;align-items:center;gap:10px;padding:.5em 1.1em;border-radius:14px;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(.95rem,2.2vw,1.3rem);color:#DCE3EA;
  background:linear-gradient(160deg,rgba(50,66,86,.65),rgba(26,34,45,.75));
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18), 0 6px 20px rgba(0,0,0,.3);
  transition:box-shadow var(--dur) var(--ease-std)}
.panneau::before{content:"";width:9px;height:9px;border-radius:9px;background:#8FA6C0;flex:none}

.gmenu{position:absolute;z-index:820;min-width:280px;padding:var(--sp-3) 0;border-radius:var(--r-l);
  background:var(--nuit-2);box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 1px rgba(232,233,228,.14);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top left;
  transition:opacity var(--dur) var(--ease-std),transform var(--dur) var(--ease-back)}
.gmenu.on{opacity:1;transform:none}
.gmenu-row{display:flex;align-items:center;gap:10px;width:100%;padding:.6em var(--sp-4);text-align:left;
  transition:background var(--dur-fast) var(--ease-std)}
.gmenu-row:hover{background:rgba(232,233,228,.08)}
.gmenu-row i{width:10px;height:10px;border-radius:10px;flex:none}
.gmenu-row span{font-weight:600;font-size:.92rem}
.gmenu-row small{margin-left:auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}

.lineshow{position:fixed;inset:0;z-index:840;display:flex;flex-direction:column;padding:var(--sp-4);
  background:rgba(6,9,13,.94);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s var(--ease-std)}
.lineshow.on{opacity:1}
.ls-head{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-3) var(--sp-4)}
.ls-head b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.6vw,1.4rem)}
.ls-head span{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--gris);text-transform:uppercase}
.ls-close{margin-left:auto}
.ls-stage{flex:1;display:grid;place-items:center;min-height:0}
.ls-stage svg{width:100%;height:100%;max-height:78vh}
.ls-pop{animation:lsPop .45s var(--ease-back) both}
@keyframes lsPop{from{opacity:0;transform:scale(.3)}to{opacity:1}}

/* — Metro Runner Paris — */
.runner{position:relative;background:#070A0E}
.rbanner{position:absolute;left:0;right:0;top:12%;text-align:center;pointer-events:none;z-index:6;
  font-family:var(--display);font-weight:800;letter-spacing:.02em;text-shadow:0 3px 12px rgba(0,0,0,.8);
  opacity:0;transform:scale(.8)}
.rbanner.on{animation:rban 1.25s var(--ease-out-expo) forwards}
@keyframes rban{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.08)}
  30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:scale(1) translateY(-16px)}}
.rsound{position:absolute;right:10px;top:10px;z-index:7;padding:.4em .7em;font-size:1rem}
.bluepanel--run{margin-top:var(--sp-4);background:linear-gradient(150deg,#F3DCDF,#E4C3CE)}

/* ============================ ACCESSIBILITÉ ============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  #ambient{display:none}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ==========================================================================
   LOT 9 — METRO CITY : mode gestion / construction
   Palette « plan cartoon » : le fond de carte est clair, le reste du site
   reste sombre. Les couleurs de lignes viennent toujours de la base réseau.
   ========================================================================== */
:root{
  --mc-com:#B9C2CC;   /* commun     */
  --mc-rar:#3E8FD4;   /* rare       */
  --mc-epi:#A55BD8;   /* épique     */
  --mc-leg:#FFCE00;   /* légendaire */
  --mc-pap:#EFEBE1;   /* papier du plan */
  --mc-eau:#A8D8EA;
  --mc-parc:#BFE0B2;
}

/* — Bandeau de ressources ————————————————————————————————————————— */
.mc-hud{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0 var(--sp-3)}
.mc-chip{display:inline-flex;align-items:center;gap:8px;padding:.5em .9em;border-radius:999px;
  background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12);font-size:.86rem;font-weight:700}
.mc-chip b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.mc-chip small{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.mc-chip--gold{box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.55)}
.mc-chip--gold b{color:var(--jaune)}
.mc-chip.bump{animation:mcBump .5s var(--ease-back)}
@keyframes mcBump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}
.mc-gain{position:absolute;pointer-events:none;font-family:var(--mono);font-weight:600;
  font-size:.9rem;color:var(--jaune);text-shadow:0 2px 10px rgba(0,0,0,.7);z-index:60;
  animation:mcGain 1.1s var(--ease-out-expo) forwards}
@keyframes mcGain{0%{opacity:0;transform:translateY(0) scale(.8)}
  18%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-46px) scale(1)}}

/* — La carte ————————————————————————————————————————————————————— */
.mc-mapwrap{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--mc-pap);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14),0 30px 70px rgba(0,0,0,.5);
  height:clamp(360px,62vh,700px);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.mc-mapwrap.grabbing{cursor:grabbing}
.mc-mapwrap svg{display:block;width:100%;height:100%}
.mc-sky{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.55),transparent 60%),
             radial-gradient(90% 60% at 80% 110%,rgba(0,100,176,.12),transparent 60%)}
.mc-vig{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(11,14,19,.16)}

.mc-tools{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:9}
.mc-tool{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:rgba(11,14,19,.82);color:var(--faience);font-size:1.05rem;font-weight:800;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.2);transition:transform var(--dur) var(--ease-back)}
.mc-tool:hover{transform:scale(1.1);background:rgba(11,14,19,.95)}
.mc-ext{position:relative;overflow:hidden;border-radius:16px;padding:var(--sp-4);
  background:linear-gradient(155deg,#16202C,#0D1520);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12);transition:box-shadow var(--dur) var(--ease-std)}
.mc-ext h4{margin:6px 0 0;font-family:var(--display);font-size:1.05rem;color:#F5F2E8}
.mc-ext p{margin:6px 0 0;font-size:.84rem;color:#9AA3AE;line-height:1.45}
.mc-ext.pret{box-shadow:inset 0 0 0 2px var(--jaune),0 0 26px -8px var(--jaune)}
.mc-ext.ouvert{background:linear-gradient(155deg,#12291F,#0C1A14);
  box-shadow:inset 0 0 0 2px rgba(131,196,145,.55)}
.mc-jauge{position:relative;height:8px;border-radius:5px;margin-top:var(--sp-3);
  background:rgba(232,233,228,.10);overflow:hidden}
.mc-jauge i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#3E8FD4,#FFCE00);transition:width .8s var(--ease-std)}

/* — Incidents — */
.mc-inc{position:relative;border-radius:16px;padding:var(--sp-4);margin-bottom:var(--sp-3);
  background:linear-gradient(155deg,#17222F,#0D1520);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10),inset 4px 0 0 var(--g)}
.mc-inc-tete{display:flex;align-items:center;gap:var(--sp-3)}
.mc-inc-tete>div{flex:1}
.mc-inc-tete b{display:block;font-family:var(--display);font-size:1rem;color:#F5F2E8}
.mc-inc-tete small{display:block;font-size:.72rem;color:#9AA3AE;margin-top:2px}
.mc-inc-ico{font-size:1.6rem;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.mc-inc-grav{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g);padding:4px 9px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--g)}
.mc-inc p{margin:var(--sp-3) 0 0;font-size:.86rem;color:#A9B4C0;line-height:1.5}
.mc-inc-eff{color:var(--g)!important;font-size:.8rem!important}
.mc-inc-attente{font-family:var(--mono);font-size:.68rem;color:#9AA3AE}
.mc-inc-attente b{color:var(--jaune)}
.mc-inc-attente.grave{color:#E3051C}
.mc-dtab.grave i{background:#E3051C}
.mc-dtab.alert i{animation:mcAlerte 1.6s ease-in-out infinite}

/* — Roue quotidienne ————————————————————————————————————————————
   Le SVG a un viewBox centré sur (0,0) : le plateau tourne autour de son
   propre axe, il ne peut pas dériver quand le cadre change de taille. */
.rw{position:relative;width:min(330px,78vw);aspect-ratio:1;margin:var(--sp-5) auto 0;
  display:grid;place-items:center;transition:filter .5s var(--ease-std)}
.rw-svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 18px 32px rgba(0,0,0,.66))}
.rw-plateau{transform-origin:0 0;transform-box:view-box;will-change:transform}
.rw-part{transition:filter .3s var(--ease-std)}
.rw-jante{transform-origin:0 0;transform-box:view-box}
.rw-fleche{transform-origin:0 0;transform-box:view-box}
.rw.tourne .rw-fleche{animation:rwFleche .16s ease-in-out infinite}
@keyframes rwFleche{0%,100%{transform:rotate(0)}50%{transform:rotate(2.4deg)}}
.rw.tourne{filter:saturate(1.15)}
.rw.arret .rw-jante{animation:rwPulse 1.1s var(--ease-back) 2}
@keyframes rwPulse{0%,100%{opacity:1}50%{opacity:.55}}
.rw.arret::after{content:"";position:absolute;inset:-6%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 60px -6px var(--gain,#FFCE00);animation:rwHalo 1.4s var(--ease-std)}
@keyframes rwHalo{0%{opacity:0;transform:scale(.82)}40%{opacity:1}100%{opacity:.35;transform:scale(1)}}
.rw-moyeu{transform-origin:0 0;transform-box:view-box}
.rw.arret .rw-moyeu{animation:rwMoyeu .8s var(--ease-back)}
@keyframes rwMoyeu{0%{transform:scale(.6) rotate(-30deg)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.rw-nom{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:800;font-size:1.3rem;margin:var(--sp-4) 0 0;color:#9AA3AE}
.rw-nom-tk{display:inline-flex}
.rw-nom.gagne{animation:rwGagne .7s var(--ease-back)}
@keyframes rwGagne{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.14)}100%{transform:scale(1);opacity:1}}
.mc-ticket{display:block}
@media (prefers-reduced-motion:reduce){
  .rw-plateau{transition:none!important}
  .rw.tourne .rw-fleche,.rw.arret .rw-jante,.rw.arret::after,.rw.arret .rw-moyeu,
  .rw-nom.gagne{animation:none}
}
.mc-tuile-roue.pret{box-shadow:inset 0 0 0 2px var(--jaune),0 0 26px -10px var(--jaune)}

/* — Monuments d'une ligne, sous le tracé — */
.ls-monus{margin-top:var(--sp-4);padding:0 var(--sp-4) var(--sp-4)}
.ls-lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin:0 0 var(--sp-3)}
.ls-vide{font-size:.82rem;color:var(--gris);margin:0}
.ls-rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;scroll-snap-type:x proximity}
.ls-monu{flex:none;width:130px;scroll-snap-align:start;border-radius:13px;padding:10px;
  background:linear-gradient(155deg,#17222F,#0D1520);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10),inset 0 3px 0 var(--c);
  transition:transform var(--dur) var(--ease-back)}
.ls-monu:hover{transform:translateY(-3px)}
.ls-monu-ico{display:block;width:34px;height:34px}
.ls-monu-ico svg{width:34px;height:34px}
.ls-monu b{display:block;margin-top:6px;font-family:var(--display);font-size:.78rem;
  line-height:1.25;color:#F5F2E8}
.ls-monu small{display:block;margin-top:3px;font-size:.66rem;color:#9AA3AE;line-height:1.3}

/* La carte spéciale d'un booster : ligne bis ou station joker */
.mc-sp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;height:100%;padding:12px;text-align:center;border-radius:12px;
  background:linear-gradient(160deg,#1B2634,#0D1520);
  box-shadow:inset 0 0 0 2px var(--c)}
.mc-sp-past{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--c);color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem}
.mc-sp b{font-family:var(--display);font-size:.9rem;color:#F5F2E8;line-height:1.2}
.mc-sp small{font-size:.66rem;color:#9AA3AE;line-height:1.3}

/* ==========================================================================
   ATELIER « CRÉER » — la tier list et la ligne à tracer
   ========================================================================== */
.btn--creer{--bd:#C04191;box-shadow:inset 0 0 0 1.5px #C04191;color:#F2A8D4}
.btn--creer:hover{background:rgba(192,65,145,.14)}
.cr-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-6)}
.cr-carte{position:relative;overflow:hidden;text-align:left;border-radius:20px;padding:var(--sp-5);
  background:linear-gradient(155deg,#17222F,#0C1420);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10);cursor:pointer;
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.cr-carte:hover{transform:translateY(-5px)}
.cr-carte--tier:hover{box-shadow:inset 0 0 0 2px #C04191,0 22px 42px -22px #C04191}
.cr-carte--ligne:hover{box-shadow:inset 0 0 0 2px #00A88F,0 22px 42px -22px #00A88F}
.cr-carte h3{margin:8px 0 0;font-family:var(--display);font-size:1.25rem;color:#F5F2E8}
.cr-carte p{margin:8px 0 0;font-size:.88rem;color:#9AA3AE;line-height:1.5}
.cr-vis{height:104px;margin-bottom:var(--sp-4);display:flex;flex-direction:column;
  justify-content:center;gap:5px;overflow:hidden}
.cr-tier-row{display:flex;align-items:center;gap:6px;
  animation:crGlisse .7s var(--ease-back) both;animation-delay:calc(var(--i)*.09s)}
@keyframes crGlisse{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.cr-tier-lab{display:grid;place-items:center;width:22px;height:20px;border-radius:5px;flex:none;
  font-family:var(--display);font-weight:800;font-size:.7rem;color:#0B0E13;
  background:linear-gradient(180deg,#FF8A80,#FFD93D)}
.cr-tier-bd{display:flex;gap:4px}
.cr-pas{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:.62rem}
.cr-mini{width:100%;height:100%;overflow:visible}
.cr-mini-tr{stroke-dasharray:6 5;animation:crFile 2.2s linear infinite}
@keyframes crFile{to{stroke-dashoffset:-11}}
@media (prefers-reduced-motion:reduce){
  .cr-tier-row,.cr-mini-tr{animation:none}
}

/* — La tier list — */
.tl{margin-top:var(--sp-5);display:flex;flex-direction:column;gap:6px}
.tl-row{display:flex;align-items:stretch;gap:6px;min-height:62px}
.tl-lab{display:grid;place-items:center;width:66px;flex:none;border-radius:12px;
  background:var(--c);color:#0B0E13;font-family:var(--display);font-weight:800;font-size:1.35rem}
.tl-zone{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;padding:8px;
  border-radius:12px;background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.08);transition:box-shadow .2s var(--ease-std)}
.tl-zone.tl-vise{box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.08)}
.tl-banc{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-radius:14px;margin-top:var(--sp-3);
  background:rgba(232,233,228,.04);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.08);
  min-height:58px;transition:box-shadow .2s var(--ease-std)}
.tl-banc.tl-vise{box-shadow:inset 0 0 0 2px var(--jaune)}
.tl-p{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;
  font-family:var(--display);font-weight:800;font-size:.9rem;cursor:grab;touch-action:none;
  user-select:none;box-shadow:0 3px 9px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease-back)}
.tl-p:hover{transform:scale(1.1)}
.tl-p--rer{border-radius:11px}
.tl-p--tram{border-radius:11px;width:46px;height:34px;font-size:.78rem}
.tl-src{opacity:.28}
.tl-fant{position:fixed;z-index:9999;pointer-events:none;transform:scale(1.15) rotate(-5deg);
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}

/* — L'atelier de ligne — */
.lp-ident{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5);align-items:flex-end}
.lp-ident label{display:flex;flex-direction:column;gap:5px}
.lp-ident span{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.lp-nom,.lp-num{background:#0F1926;color:#F5F2E8;border:0;border-radius:10px;
  padding:9px 12px;font-family:var(--display);font-size:.95rem;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.14)}
.lp-nom{width:min(260px,60vw)} .lp-num{width:74px;text-align:center}
.lp-pal{display:flex;gap:6px;flex-wrap:wrap}
.lp-pal-c{width:24px;height:24px;border-radius:50%;padding:0;background:var(--c);cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(11,14,19,.5);transition:transform var(--dur) var(--ease-back)}
.lp-pal-c:hover{transform:scale(1.16)}
.lp-pal-c.on{box-shadow:inset 0 0 0 2px #0B0E13,0 0 0 2.5px #E8E9E4;transform:scale(1.1)}
/* Le pupitre de composition, à côté du plan */
.lp-duo{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:var(--sp-4);
  margin-top:var(--sp-4);align-items:start}
@media (max-width:860px){ .lp-duo{grid-template-columns:1fr} }
.lp-pupitre{border-radius:16px;padding:var(--sp-4);background:#0F1926;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.lp-cherche{width:100%;background:#16222F;color:#F5F2E8;border:0;border-radius:10px;
  padding:10px 12px;font-size:.9rem;margin-top:6px;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.14)}
.lp-liste{margin-top:var(--sp-3);max-height:min(52vh,460px);overflow-y:auto;
  display:flex;flex-direction:column;gap:5px}
.lp-row{align-items:flex-start;gap:9px;padding:8px 10px}
.lp-row-c{flex:1;min-width:0}
.lp-row-c b{display:block;font-size:.86rem;color:#F5F2E8;line-height:1.25}
.lp-corr{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px}
.lp-corr small{font-size:.6rem;color:#8B95A1;margin-right:2px}
.lp-corr-non{display:block;margin-top:4px;font-size:.62rem;color:#6B7480;font-style:italic}
.lp-row-mon{display:block;margin-top:3px;font-size:.64rem;color:#C9A227}
.lp-x{background:none;border:0;color:#7E8894;cursor:pointer;font-size:.8rem;padding:2px 4px;flex:none}
.lp-x:hover{color:#E3051C}
/* Les classements enregistrés */
.tl-sauv{margin-top:var(--sp-5)}
.tl-sauv-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:var(--sp-3);margin-top:var(--sp-3)}
.tl-sauv-c{border-radius:13px;padding:var(--sp-3);background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.tl-sauv-c b{display:block;font-family:var(--display);font-size:.9rem;color:#F5F2E8}
.tl-sauv-c small{display:block;margin:3px 0 8px;font-size:.68rem;color:#9AA3AE}
.lp-o--t.on{background:#E8E9E4;color:#0B0E13}
.lp-plan{position:relative;margin-top:var(--sp-4);border-radius:18px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#1B2836,#0A121B 78%);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10);touch-action:none;cursor:grab;
  aspect-ratio:10/7;min-height:400px}
.lp-plan:active{cursor:grabbing}
.lp-plan svg{width:100%;height:100%;display:block}
.lp-st{cursor:pointer}
.lp-st .lp-pt{transition:r var(--dur) var(--ease-back),fill var(--dur) var(--ease-std)}
.lp-st:hover .lp-pt{r:2.9;fill:#FFCE00}
.lp-st.on{cursor:pointer}
.lp-fond-lab{font-family:var(--display);font-weight:700;letter-spacing:.04em;opacity:.9}
/* les noms de stations : halo sombre pour rester lisibles sur le réseau */
.lp-nom-st{font-family:var(--display);font-weight:800;fill:#F5F2E8;
  paint-order:stroke;stroke:#080D14;stroke-linejoin:round;pointer-events:none}
.lp-nom-role{font-family:var(--mono);fill:#8B95A1;letter-spacing:.14em;
  paint-order:stroke;stroke:#080D14;stroke-linejoin:round;pointer-events:none}
/* l'infobulle de survol */
.lp-tip{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,-124%);
  min-width:120px;max-width:230px;padding:7px 10px;border-radius:11px;
  background:rgba(8,13,20,.95);box-shadow:0 12px 26px rgba(0,0,0,.6),
    inset 0 0 0 1.2px rgba(232,233,228,.18);
  opacity:0;transition:opacity var(--dur) var(--ease-std)}
.lp-tip.on{opacity:1}
.lp-tip b{display:block;font-family:var(--display);font-size:.82rem;color:#F5F2E8;line-height:1.2}
.lp-tip small{display:block;margin-top:3px;font-size:.62rem;color:#8B95A1;line-height:1.3}
.lp-tip-bl{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px}
/* la légende des repères */
.lp-legende{position:absolute;right:12px;bottom:12px;z-index:3;display:flex;gap:10px;
  flex-wrap:wrap;justify-content:flex-end;max-width:60%;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:#8B95A1;
  pointer-events:none}
.lp-legende span{display:inline-flex;align-items:center;gap:5px;
  background:rgba(8,13,20,.72);padding:4px 8px;border-radius:7px}
.lp-legende i{display:block;flex:none}
.lp-lg-seine{width:14px;height:4px;border-radius:2px;background:#3B86AE}
.lp-lg-paris{width:14px;height:0;border-top:1.6px dashed rgba(232,233,228,.5)}
.lp-lg-pt{width:6px;height:6px;border-radius:50%;background:#8C97A6}
@media (max-width:620px){ .lp-legende{display:none} .lp-plan{min-height:320px} }
.lp-trait{animation:lpPousse .8s var(--ease-std)}
@keyframes lpPousse{from{stroke-dasharray:0 4000}to{stroke-dasharray:4000 0}}
.lp-mon{opacity:.95}
.lp-outils{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:3}
.lp-o{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(11,14,19,.86);color:#E8E9E4;font-size:.9rem;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.16)}
.lp-o:hover{background:var(--jaune);color:#0B0E13}
.lp-compteur{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:.66rem;
  color:#9AA3AE;background:rgba(11,14,19,.72);padding:5px 10px;border-radius:8px}
.lp-res{margin-top:var(--sp-5);border-radius:20px;padding:var(--sp-5);
  background:linear-gradient(155deg,#17222F,#0C1420);
  box-shadow:inset 0 0 0 2px var(--c),0 20px 44px -24px var(--c);position:relative}
.lp-res-tete{display:flex;align-items:center;gap:var(--sp-3)}
.lp-res-tete>div{flex:1}
.lp-res-tete b{display:block;font-family:var(--display);font-size:1.15rem;color:#F5F2E8}
.lp-res-tete small{display:block;font-size:.76rem;color:#9AA3AE;margin-top:2px}
.lp-res-past{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;flex:none;
  font-family:var(--display);font-weight:800;font-size:1rem;color:#0B0E13}
.lp-note{display:grid;place-items:center;width:54px;height:54px;border-radius:14px;flex:none;
  background:var(--c);color:#0B0E13;font-family:var(--display);font-weight:800;font-size:1.6rem}
.lp-res-note{text-align:center;font-family:var(--display);font-weight:800;font-size:2rem;
  color:var(--c);margin:var(--sp-4) 0 0}
.lp-jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-4)}
.lp-jauge-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.lp-jauge-t span{font-size:.84rem;color:#E8E9E4}
.lp-jauge-t b{font-family:var(--mono);font-size:.76rem;color:var(--c)}
.lp-jauge-b{height:7px;border-radius:4px;margin-top:6px;background:rgba(232,233,228,.10);
  overflow:hidden}
.lp-jauge-b i{display:block;height:100%;border-radius:4px;background:var(--c);
  transition:width .8s var(--ease-std)}
.lp-jauge small{display:block;margin-top:5px;font-size:.7rem;color:#8B95A1;line-height:1.35}
.lp-tr{display:flex;justify-content:space-between;gap:var(--sp-3);padding:8px 11px;
  border-radius:10px;margin-bottom:5px;font-size:.8rem;background:rgba(232,233,228,.04)}
.lp-tr span{color:#E8E9E4}
.lp-tr b{font-family:var(--mono);font-size:.72rem;white-space:nowrap}
.lp-tr.bon{box-shadow:inset 3px 0 0 #83C491} .lp-tr.bon b{color:#83C491}
.lp-tr.mou{box-shadow:inset 3px 0 0 #E3051C} .lp-tr.mou b{color:#F2A0A6}
@media (prefers-reduced-motion:reduce){ .lp-trait{animation:none} }

/* — LE CHANTIER : la ligne se construit sous les yeux, façon
   « Reconstituer une ligne · difficile », mais pilotée par le joueur.
   Toutes les animations d'entrée sont en `backwards` et jamais en `both` :
   une animation qui garde son état final écrase le transform en ligne, et
   les rangs de la liste ne se laisseraient plus glisser. — */
.lp-saisie{margin-top:var(--sp-5);border-radius:18px;padding:var(--sp-4) var(--sp-4) var(--sp-3);
  background:linear-gradient(160deg,#16222F,#0C1420);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10);
  animation:lpMonte .5s var(--ease-emph) backwards}
.lp-saisie-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:var(--sp-3)}
.lp-saisie-t b{font-family:var(--display);font-size:1rem;color:#F5F2E8}
.lp-saisie-t small{font-size:.72rem;color:#8B95A1}
.lp-saisie-r{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.lp-saisie-ac{position:relative;flex:1;min-width:220px;max-width:none}
.lp-saisie .lp-champ{width:100%;background:#0B131D;color:#F5F2E8;border:0;border-radius:12px;
  padding:13px 15px;font-family:var(--display);font-weight:600;font-size:1rem;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.16);
  transition:box-shadow var(--dur) var(--ease-std)}
.lp-saisie .lp-champ:focus{outline:none;
  box-shadow:inset 0 0 0 2px var(--c,#00A88F),0 0 0 4px rgba(0,168,143,.16)}
.lp-saisie .lp-champ::placeholder{color:#65707D;font-weight:500}
.lp-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.lp-sug-t{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gris);align-self:center;margin-right:2px}
.lp-sug-b{padding:5px 11px;border-radius:999px;background:rgba(232,233,228,.06);color:#CBD3DC;
  font-size:.74rem;cursor:pointer;border:0;
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.12);
  transition:transform var(--dur) var(--ease-back),background var(--dur) var(--ease-std),
    color var(--dur) var(--ease-std);
  animation:lpPop .38s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*40ms)}
.lp-sug-b:hover{transform:translateY(-2px) scale(1.05);background:var(--c,#00A88F);color:#0B0E13}

.lp-chantier{position:relative;margin-top:var(--sp-4);
  background:linear-gradient(180deg,#0A1018 0%,#070A0F 62%,#0B1119 100%)}
.lp-chantier .builder-scroll{padding:0}
.lp-ch-car{top:136px;left:0;z-index:5;will-change:transform}
.lp-ch-fond{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.28}
.lp-ch-fond i{position:absolute;left:0;display:block;animation:lpDerive linear infinite}
@keyframes lpDerive{from{transform:translateX(-130px)}to{transform:translateX(1900px)}}
.lp-ch-vide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:var(--sp-4);z-index:4;
  pointer-events:none}
.lp-ch-vide b{font-family:var(--display);font-size:1.05rem;color:#E8E9E4}
.lp-ch-vide small{font-size:.78rem;color:#8B95A1;max-width:40ch;line-height:1.45}
.lp-ch-vide .lp-rame-svg{animation:lpAttente 2.4s var(--ease-std) infinite}
@keyframes lpAttente{0%,100%{transform:translateX(-9px)}50%{transform:translateX(9px)}}

/* La station qui vient d'être posée : tout arrive en cascade */
.lp-ch-neuf .lp-ch-quai{animation:lpQuai .46s var(--ease-back) backwards}
.lp-ch-neuf .lp-ch-abri{animation:lpQuai .46s var(--ease-back) backwards;animation-delay:60ms}
.lp-ch-neuf .lp-ch-rond{animation:lpRond .5s var(--ease-back) backwards;animation-delay:150ms}
.lp-ch-neuf .lp-ch-nom{animation:lpNom .42s var(--ease-emph) backwards;animation-delay:240ms}
.lp-ch-neuf .lp-ch-plaque{animation:lpPlaque .5s var(--ease-back) backwards;animation-delay:300ms}
.lp-ch-neuf .lp-ch-bul{animation:lpPop .4s var(--ease-back) backwards;
  animation-delay:calc(320ms + var(--j,0)*70ms)}
.lp-ch-neuf .lp-ch-mon{animation:lpMon .55s var(--ease-back) backwards;animation-delay:380ms}
@keyframes lpQuai{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes lpRond{from{opacity:0;transform:scale(.2)}60%{transform:scale(1.28)}to{opacity:1;transform:scale(1)}}
@keyframes lpNom{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lpPlaque{from{opacity:0;transform:translateY(-22px) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes lpMon{from{opacity:0;transform:translateY(14px) scale(.6)}to{opacity:1;transform:none}}
@keyframes lpPop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes lpMonte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lp-ch-rond,.lp-ch-quai,.lp-ch-abri,.lp-ch-nom,.lp-ch-bul,.lp-ch-mon{
  transform-box:fill-box;transform-origin:center}
.lp-ch-plaque{transform-box:fill-box;transform-origin:center bottom}
.lp-ch-seg{stroke-linecap:round}
.lp-ch-neuf-seg{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw .5s var(--ease-out-expo) forwards}
.lp-ch-neuf-rail{animation:railIn .38s var(--ease-out-expo) backwards}
/* pulsation permanente des deux bouts de la ligne */
.lp-ch-bout{animation:lpBout 2s var(--ease-std) infinite;transform-box:fill-box;transform-origin:center}
@keyframes lpBout{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
/* démontage : les stations s'envolent avant la remise à zéro */
.lp-ch-part{animation:lpPart .5s var(--ease-std) forwards}
@keyframes lpPart{to{opacity:0;transform:translateY(-46px) rotate(9deg)}}

/* La rame cartoon, partout où elle passe */
.lp-rame-svg{overflow:visible;display:block}
.lp-roue{transform-box:fill-box;transform-origin:center;animation:lpRoue .55s linear infinite}
@keyframes lpRoue{to{transform:rotate(360deg)}}
.lp-corps{transform-box:fill-box;transform-origin:center bottom;
  animation:lpTangue 1.1s var(--ease-std) infinite}
@keyframes lpTangue{0%,100%{transform:translateY(0) rotate(-.7deg)}
  50%{transform:translateY(-1.6px) rotate(.7deg)}}
.lp-oeil{transform-box:fill-box;transform-origin:center;animation:lpCligne 4.2s steps(1,end) infinite}
@keyframes lpCligne{0%,94%{transform:scaleY(1)}95%,98%{transform:scaleY(.12)}99%,100%{transform:scaleY(1)}}
.lp-phare{animation:lpPhare 1.8s var(--ease-std) infinite}
@keyframes lpPhare{0%,100%{opacity:.55}50%{opacity:1}}

/* Le pupitre, remis en scène */
.lp-pupitre{position:relative}
.lp-row{animation:lpRang .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*32ms)}
@keyframes lpRang{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.lp-row.lp-neuf{box-shadow:inset 0 0 0 1.6px var(--c,#00A88F),0 0 20px -8px var(--c,#00A88F)}
.lp-bout{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;
  color:#0B0E13;background:var(--c,#00A88F);padding:1px 6px;border-radius:5px;margin-left:6px;
  vertical-align:middle}
.lp-vide-astuce{display:flex;gap:10px;align-items:flex-start;
  padding:10px 12px;border-radius:12px;background:rgba(0,168,143,.08);
  box-shadow:inset 0 0 0 1.2px rgba(0,168,143,.25);font-size:.76rem;color:#A9B4BF;line-height:1.45}

/* La barre d'actions de l'atelier */
.lp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-5);align-items:center}
.lp-actions .lp-esp{flex:1;min-width:0}

/* — MÉTRO DROP : le hub, la cabine, l'arrivée ————————————————————— */
.mdx-hub{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.mdx-lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin:0}
.mdx-titre{font-family:var(--display);font-size:1.7rem;margin:.1em 0 0;color:#F5F2E8;line-height:1.1}
.mdx-esp{flex:1}

.mdx-bandeau{position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;
  background:linear-gradient(150deg,#141C26,#0C131B);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10),inset 4px 0 0 var(--c)}
.mdx-bandeau b{display:block;font-family:var(--display);font-size:1rem;color:#F5F2E8}
.mdx-bandeau small{display:block;font-size:.74rem;color:#8B95A1;margin-top:2px}
.mdx-xp{min-width:170px}
.mdx-xp>i{display:block;height:6px;border-radius:99px;background:var(--c);transition:width .5s var(--ease-emph)}
.mdx-xp{position:relative;padding-top:2px}
.mdx-xp::before{content:"";position:absolute;left:0;right:0;top:2px;height:6px;border-radius:99px;
  background:rgba(232,233,228,.12)}
.mdx-xp>i{position:relative}
.mdx-xp small{display:block;margin-top:5px;font-size:.62rem;color:#7E8894;text-align:right}

.mdx-quai{text-align:center;padding:var(--sp-5) var(--sp-4);border-radius:18px;
  background:linear-gradient(180deg,#111A24,#0A1017);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.08)}
.mdx-gare{font-family:var(--display);font-size:1.9rem;margin:.1em 0;color:#F5F2E8;line-height:1.05}
.mdx-gare--next{color:#9FB0C0;font-size:1.5rem}
.mdx-fleche{display:flex;flex-direction:column;align-items:center;gap:4px;margin:var(--sp-3) 0}
.mdx-fleche i{display:block;width:2px;height:26px;border-radius:2px;
  background:linear-gradient(rgba(232,233,228,.05),rgba(232,233,228,.35))}
.mdx-fleche span{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6C7783}

/* — Le tracé de la ligne, à la manière du diagramme au-dessus des portes — */
.mdx-trace{position:relative;display:flex;align-items:flex-start;gap:0;
  overflow-x:auto;overflow-y:hidden;padding:var(--sp-4) 22px var(--sp-2);
  scrollbar-width:thin;scrollbar-color:rgba(232,233,228,.22) transparent;
  border-radius:16px;background:linear-gradient(180deg,rgba(232,233,228,.04),transparent)}
.mdx-trace::before{content:"";position:absolute;left:22px;right:22px;
  top:calc(var(--sp-4) + 11px);height:5px;border-radius:99px;
  background:rgba(232,233,228,.12)}
.mdx-trace-fait{position:absolute;top:calc(var(--sp-4) + 11px);height:5px;width:0;
  border-radius:99px;background:var(--c);box-shadow:0 0 14px -2px var(--c);
  transition:width .6s var(--ease-emph)}
.mdx-pt{position:relative;flex:0 0 46px;display:flex;flex-direction:column;
  align-items:center;gap:6px}
.mdx-pt i{width:11px;height:11px;border-radius:99px;background:#0D141C;flex:none;
  box-shadow:inset 0 0 0 2.5px rgba(232,233,228,.32);margin-top:8px}
.mdx-pt.fait i{background:var(--c);box-shadow:inset 0 0 0 2px rgba(11,14,19,.55)}
.mdx-pt.suivante i{box-shadow:inset 0 0 0 2.5px var(--c)}
.mdx-pt.ici i{width:19px;height:19px;margin-top:4px;background:#F5F2E8;
  box-shadow:0 0 0 3px var(--c),0 0 18px -2px var(--c)}
.mdx-pt span{font-size:.58rem;line-height:1.1;color:#8E97A3;white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);
  max-height:92px;overflow:hidden;text-overflow:ellipsis}
.mdx-pt.ici span{color:#F5F2E8;font-weight:700}
.mdx-pt.suivante span{color:#C9D2DC}
.mdx-prog{display:flex;flex-direction:column;gap:6px}
.mdx-barre{height:10px;border-radius:99px;background:rgba(232,233,228,.10);overflow:hidden}
.mdx-barre i{display:block;height:100%;border-radius:99px;transition:width .6s var(--ease-emph)}

.mdx-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.mdx-chif{padding:10px 12px;border-radius:12px;background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.08)}
.mdx-chif b{display:block;font-family:var(--display);font-size:1.05rem;color:#F5F2E8}
.mdx-chif span{display:block;font-size:.68rem;color:#8B95A1;margin-top:2px}

.mdx-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;margin-top:var(--sp-3)}
.mdx-actions .btn{align-self:center}
.mdx-note{padding:12px 14px;border-radius:14px;font-size:.84rem;line-height:1.5;color:#A9B4BF;
  background:rgba(0,100,176,.10);box-shadow:inset 0 0 0 1.2px rgba(0,100,176,.28)}
.mdx-pret{padding:12px 14px;border-radius:14px;background:rgba(62,208,122,.10);
  box-shadow:inset 0 0 0 1.2px rgba(62,208,122,.30)}
.mdx-pret b{display:block;font-family:var(--display);color:#F5F2E8}
.mdx-pret span{display:block;font-size:.8rem;color:#A9B4BF;margin-top:3px}

.mdx-carte{display:flex;flex-wrap:wrap;gap:4px 14px}
.mdx-etape{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#6C7783}
.mdx-etape i{width:9px;height:9px;border-radius:50%;background:rgba(232,233,228,.18);flex:none}
.mdx-etape.faite{color:#A9B4BF}
.mdx-etape.ici{color:#F5F2E8;font-weight:600}
.mdx-etape.ici i{box-shadow:0 0 0 3px rgba(255,206,0,.30)}
.mdx-etape.verrou{opacity:.42}

.mdx-cmds{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mdx-cmd{padding:9px 11px;border-radius:12px;background:rgba(232,233,228,.04);opacity:.45;
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.07)}
.mdx-cmd.on{opacity:1;background:rgba(0,168,143,.10);box-shadow:inset 0 0 0 1.2px rgba(0,168,143,.28)}
.mdx-cmd b{font-size:1.05rem}
.mdx-cmd span{display:block;font-size:.76rem;color:#E8E9E4;margin-top:2px}
.mdx-cmd small{display:block;font-size:.64rem;color:#8B95A1;margin-top:2px;line-height:1.35}

.mdx-rames{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.mdx-rame{text-align:left;padding:12px 14px;border-radius:16px;border:0;cursor:pointer;
  background:linear-gradient(160deg,#131B25,#0A1016);color:inherit;
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.09);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.mdx-rame:hover{transform:translateY(-2px)}
.mdx-rame.on{box-shadow:inset 0 0 0 2px var(--c),0 0 24px -12px var(--c)}
.mdx-rame.lock{opacity:.62}
.mdx-rame b{display:block;font-family:var(--display);font-size:1rem;color:#F5F2E8}
.mdx-rame small{display:block;font-size:.74rem;color:#8B95A1;margin-top:3px;line-height:1.4}
.mdx-stats{display:flex;flex-direction:column;gap:1px;margin-top:8px}
.mdx-stats span{font-size:.68rem;color:#A9B4BF;font-family:var(--mono);letter-spacing:.04em}
.mdx-rame em{display:block;margin-top:8px;font-style:normal;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}

.mdx-pied{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--sp-6)}
.mdx-aide{padding:12px 14px;border-radius:14px;background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.08);margin-bottom:8px}
.mdx-aide b{font-family:var(--display);color:#F5F2E8}
.mdx-aide p{margin:.35em 0 0;font-size:.84rem;color:#A9B4BF;line-height:1.55}

.mdx-gains{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.mdx-gain{padding:12px;border-radius:14px;text-align:center;background:rgba(255,206,0,.08);
  box-shadow:inset 0 0 0 1.2px rgba(255,206,0,.24)}
.mdx-gain b{display:block;font-family:var(--display);font-size:1.25rem;color:#FFCE00}
.mdx-gain span{display:block;font-size:.7rem;color:#A9B4BF;margin-top:2px}

/* — LA CABINE ————————————————————————————————————————————————— */
.mdx-cab{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
/* La verrière prend toute la place qu'elle peut : c'est elle qu'on regarde
   pendant une minute, pas le tableau de bord. */
.mdx-vue{position:relative;border-radius:20px;overflow:hidden;
  height:min(60vh,620px);min-height:260px;
  background:#05080D;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.10),
             0 30px 66px -26px #000, 0 0 0 1px rgba(0,0,0,.55)}
.mdx-cv{display:block;width:100%;height:100%}

/* — la verrière : reflets, vignette, poussière de tunnel — */
.mdx-glace{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(126% 94% at 50% 46%,transparent 54%,rgba(3,6,11,.52) 100%),
    linear-gradient(112deg,transparent 33%,rgba(206,228,255,.055) 39%,transparent 45%),
    linear-gradient(112deg,transparent 53%,rgba(206,228,255,.032) 57%,transparent 61%)}

/* — le cadre de la cabine : montants, pavillon, pupitre — */
.mdx-cadre-cab{position:absolute;inset:0;pointer-events:none;z-index:3}
.mdx-mont{position:absolute;top:0;bottom:0;width:6.2%;
  background:
    linear-gradient(90deg,#2B3846 0 14%,#1A242F 42%,#0C1219 78%,#070B10 100%);
  box-shadow:inset -1px 0 0 rgba(232,233,228,.22),
             8px 0 26px -10px rgba(0,0,0,.9)}
.mdx-mont::after{                       /* la rangée de rivets du montant */
  content:"";position:absolute;left:30%;top:8%;bottom:8%;width:3px;border-radius:99px;
  background:repeating-linear-gradient(180deg,
    rgba(232,233,228,.30) 0 3px,transparent 3px 22px)}
.mdx-mont--g{left:0;clip-path:polygon(0 0,100% 4%,100% 96%,0 100%)}
.mdx-mont--d{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 4%,100% 96%,0 100%)}
.mdx-toit{position:absolute;left:0;right:0;top:0;height:8%;
  background:linear-gradient(180deg,#141E29,#0A1017 62%,rgba(10,16,23,0));
  box-shadow:inset 0 -1px 0 rgba(232,233,228,.12)}
.mdx-toit::after{content:"";position:absolute;left:16%;right:16%;top:38%;height:14%;
  border-radius:99px;background:rgba(255,238,190,.26);filter:blur(2.5px)}
.mdx-pupitre{position:absolute;left:-5%;right:-5%;bottom:0;height:17%;
  border-radius:48% 48% 0 0 / 78% 78% 0 0;
  background:linear-gradient(180deg,#16202B,#070B10 64%);
  box-shadow:inset 0 2px 0 rgba(232,233,228,.16),0 -22px 40px -20px rgba(0,0,0,.95)}
.mdx-pupitre::before{content:"";position:absolute;left:24%;right:24%;top:30%;height:5px;
  border-radius:99px;opacity:.6;
  background:linear-gradient(90deg,transparent,var(--c,#0064B0),transparent)}
.mdx-lueur{position:absolute;left:12%;right:12%;bottom:14%;height:12%;pointer-events:none;
  z-index:2;border-radius:99px;filter:blur(14px);opacity:.30;
  background:linear-gradient(90deg,transparent,var(--c,#0064B0),transparent)}
@media (max-width:820px){
  .mdx-vue{height:min(46vh,400px)}
  .mdx-mont{width:4.6%}
}
/* sur un écran bas, la verrière ne doit pas repousser les commandes
   hors de vue : conduire sans voir le frein n'a pas de sens */
@media (max-height:800px){ .mdx-vue{height:min(52vh,440px)} }
.mdx-vue.shake{animation:mdxShake .34s var(--ease-std)}
@keyframes mdxShake{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(calc(var(--sh,1)*-3px),calc(var(--sh,1)*2px))}
  60%{transform:translate(calc(var(--sh,1)*3px),calc(var(--sh,1)*-2px))}}
.mdx-flash{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:5}
.mdx-flash.on{animation:mdxFlash .5s ease-out}
@keyframes mdxFlash{from{opacity:.9}to{opacity:0}}
/* l'afficheur de conduite, accroché sous le pavillon */
.mdx-route{position:absolute;left:50%;transform:translateX(-50%);top:9.5%;z-index:4;
  max-width:80%;padding:6px 18px;border-radius:11px;text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:#CBD3DC;
  background:rgba(5,9,14,.74);
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.16),0 8px 22px -12px #000;
  pointer-events:none}
.mdx-route.proche{color:#FFCE00;box-shadow:inset 0 0 0 1.4px rgba(255,206,0,.55),
  0 0 22px -6px rgba(255,206,0,.5)}
.mdx-sur{position:absolute;left:0;right:0;bottom:20%;display:flex;justify-content:center;
  pointer-events:none;padding:0 10px;z-index:4}
.mdx-alerte{max-width:min(420px,92%);padding:8px 14px;border-radius:12px;text-align:center;
  background:rgba(8,11,16,.86);box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.16);
  animation:mdxPop .3s var(--ease-back) backwards}
@keyframes mdxPop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.mdx-alerte b{display:block;font-family:var(--display);font-size:.94rem;color:#F5F2E8}
.mdx-alerte span{display:block;font-size:.76rem;color:#A9B4BF;margin-top:2px;line-height:1.4}
.mdx-alerte--ok{box-shadow:inset 0 0 0 1.4px rgba(62,208,122,.55)}
.mdx-alerte--ok b{color:#3ED07A}
.mdx-alerte--warn{box-shadow:inset 0 0 0 1.4px rgba(242,142,66,.55)}
.mdx-alerte--warn b{color:#F28E42}
.mdx-alerte--bad{box-shadow:inset 0 0 0 1.4px rgba(227,5,28,.6)}
.mdx-alerte--bad b{color:#FF6B6B}

.mdx-tb{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.mdx-cadran{position:relative;padding:9px 12px;border-radius:13px;text-align:center;
  background:linear-gradient(180deg,#111A24,#0A1017);
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.10)}
.mdx-cl{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8894}
.mdx-cadran b{display:block;font-family:var(--display);font-size:1.75rem;line-height:1.05;
  color:#F5F2E8;font-variant-numeric:tabular-nums}
.mdx-cadran i{display:block;font-style:normal;font-size:.6rem;color:#7E8894}
.mdx-cadran.cri b{color:#FF6B6B;animation:mdxCri .5s steps(2,end) infinite}
@keyframes mdxCri{0%,100%{opacity:1}50%{opacity:.35}}
.mdx-cadran--lim b{color:#FFCE00}
.mdx-cadran--lim.cri{box-shadow:inset 0 0 0 2px rgba(227,5,28,.7)}
.mdx-sig-val{font-size:1.1rem!important;letter-spacing:.08em}
.mdx-sig-val.rouge{color:#FF6B6B!important}
.mdx-sig-val.vert{color:#3ED07A!important}

.mdx-jauges{display:flex;gap:8px;flex-wrap:wrap}
.mdx-jauge{flex:1;min-width:110px}
.mdx-jauge--large{flex:2.4;min-width:180px}
.mdx-jauge span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8894;margin-bottom:4px}
.mdx-j{height:9px;border-radius:99px;background:rgba(232,233,228,.10);overflow:hidden}
.mdx-j i{display:block;height:100%;width:0;border-radius:99px;background:#0064B0;
  transition:width .12s linear}
.mdx-j-frein{background:#E3051C!important}
.mdx-j-av{background:var(--c,#0064B0)!important}

.mdx-manche{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:8px}
.mdx-b{position:relative;padding:12px 6px;border-radius:14px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#1A2632,#0D141C);color:#E8E9E4;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12),0 5px 0 -1px rgba(0,0,0,.5);
  touch-action:none;user-select:none;
  transition:transform .09s var(--ease-std),box-shadow .09s var(--ease-std)}
.mdx-b b{display:block;font-size:1.4rem;line-height:1}
.mdx-b span{display:block;font-size:.66rem;color:#9FAAB6;margin-top:3px}
.mdx-b.press{transform:translateY(3px);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2),0 1px 0 rgba(0,0,0,.5)}
.mdx-b--acc.press{box-shadow:inset 0 0 0 2px #3ED07A,0 1px 0 rgba(0,0,0,.5)}
.mdx-b--frein.press{box-shadow:inset 0 0 0 2px #F28E42,0 1px 0 rgba(0,0,0,.5)}
.mdx-b--urg{background:linear-gradient(180deg,#3A1116,#1A0A0D)}
.mdx-b--urg.press{box-shadow:inset 0 0 0 2px #E3051C,0 1px 0 rgba(0,0,0,.5)}
.mdx-b.vide{opacity:.5}
.mdx-b.cri{animation:mdxBtnCri .8s var(--ease-std) infinite}
@keyframes mdxBtnCri{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12),0 5px 0 -1px rgba(0,0,0,.5)}
  50%{box-shadow:inset 0 0 0 2.5px #FFCE00,0 0 20px -4px #FFCE00,0 5px 0 -1px rgba(0,0,0,.5)}}
.mdx-sortie{display:flex;justify-content:center;margin-top:4px}

/* — ARRIVÉE ————————————————————————————————————————————————— */
.mdx-grade{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px;
  border-radius:14px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1.6px var(--g);animation:mdxPop .4s var(--ease-back) backwards}
.mdx-grade b{font-family:var(--display);font-size:1.25rem;color:var(--g)}
.mdx-grade span{font-size:.78rem;color:#A9B4BF}

.mdx-scene{position:relative;height:130px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0F1720,#080C12);
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.08)}
.mdx-rame-vue{position:absolute;left:6%;right:6%;top:14px;bottom:34px;border-radius:10px;
  overflow:hidden;background:linear-gradient(180deg,#2C3A4B,#151F2A);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14)}
.mdx-bande{position:absolute;left:0;right:0;top:26%;height:7px;background:var(--c,#FFCE00);opacity:.85}
.mdx-hublot{position:absolute;top:34%;height:34%;width:8%;border-radius:4px;
  background:linear-gradient(180deg,#9FD3EA,#4E7C96);opacity:.55;
  box-shadow:inset 0 0 0 1.5px rgba(10,14,20,.5)}
.mdx-quaisol{position:absolute;left:0;right:0;bottom:0;height:34px;
  background:repeating-linear-gradient(90deg,rgba(232,233,228,.06) 0 12px,transparent 12px 24px),
    linear-gradient(180deg,#151D26,#0B1017);
  box-shadow:inset 0 2px 0 rgba(232,233,228,.10)}
.mdx-porte{position:absolute;top:12%;bottom:12%;width:26%;background:#0A1017;
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.18);
  transition:transform .5s var(--ease-emph)}
.mdx-porte.g{left:24%}
.mdx-porte.d{right:24%}
.mdx-scene.ouvre .mdx-porte.g{transform:translateX(-96%)}
.mdx-scene.ouvre .mdx-porte.d{transform:translateX(96%)}
.mdx-scene.ferme .mdx-porte.g,.mdx-scene.ferme .mdx-porte.d{transform:none}
.mdx-foule{position:absolute;left:0;right:0;bottom:8px;height:26px}
.mdx-pax{position:absolute;bottom:0;left:50%;width:7px;height:16px;border-radius:3px 3px 1px 1px;
  background:#8FA3B5;opacity:0;transform:translateX(var(--x))}
.mdx-pax::before{content:"";position:absolute;left:1px;top:-6px;width:5px;height:5px;
  border-radius:50%;background:#B8C6D2}
.mdx-scene.monte .mdx-pax{animation:mdxPax .9s var(--ease-emph) forwards;
  animation-delay:calc(var(--i)*70ms)}
@keyframes mdxPax{
  from{opacity:0;transform:translateX(calc(var(--x) * 2.4))}
  60%{opacity:1}
  to{opacity:0;transform:translateX(calc(var(--x) * .12))}}

.mdx-detail{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.09)}
.mdx-dl{display:flex;justify-content:space-between;gap:12px;padding:8px 13px;font-size:.82rem}
.mdx-dl:nth-child(odd){background:rgba(232,233,228,.03)}
.mdx-dl span{color:#A9B4BF}
.mdx-dl b{color:#F5F2E8;font-variant-numeric:tabular-nums}
.mdx-dl--tot{background:rgba(255,206,0,.10)!important}
.mdx-dl--tot b{color:#FFCE00;font-size:1rem}
.mdx-detail-txt{font-size:.84rem;color:#CBD3DC;margin:0}

.mdx-niveau{padding:12px 14px;border-radius:14px;background:rgba(102,36,131,.16);
  box-shadow:inset 0 0 0 1.4px rgba(154,111,212,.45);
  animation:mdxPop .45s var(--ease-back) backwards}
.mdx-niveau b{display:block;font-family:var(--display);font-size:1.05rem;color:#D8C4F0}
.mdx-niveau span{display:block;font-size:.8rem;color:#A9B4BF;margin:3px 0 8px}

@media (max-width:620px){
  .mdx-gare{font-size:1.5rem}
  .mdx-cadran b{font-size:1.4rem}
  .mdx-vue{aspect-ratio:4/3}
  .mdx-xp{min-width:120px}
}
@media (prefers-reduced-motion:reduce){
  .mdx-vue.shake,.mdx-flash.on,.mdx-alerte,.mdx-grade,.mdx-niveau,.mdx-b.cri,
  .mdx-cadran.cri b,.mdx-scene.monte .mdx-pax{animation:none}
  .mdx-scene.monte .mdx-pax{opacity:1}
}
.lp-plan{animation:lpMonte .5s var(--ease-emph) backwards}
.lp-st circle:first-child{transition:r var(--dur) var(--ease-back),stroke var(--dur) var(--ease-std)}
.lp-st-neuve{animation:lpOnde .9s var(--ease-out-expo) forwards;
  transform-box:fill-box;transform-origin:center}
@keyframes lpOnde{from{opacity:.9;transform:scale(.3)}to{opacity:0;transform:scale(4.5)}}
.lp-trait-anim{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:draw .9s var(--ease-out-expo) forwards}

@media (max-width:620px){
  .lp-ch-vide small{max-width:26ch}
  .lp-saisie-r .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .lp-saisie,.lp-plan,.lp-row,.lp-sug-b,.lp-ch-vide .lp-rame-svg,.lp-ch-fond i,
  .lp-roue,.lp-corps,.lp-oeil,.lp-phare,.lp-ch-bout,
  .lp-ch-neuf .lp-ch-quai,.lp-ch-neuf .lp-ch-abri,.lp-ch-neuf .lp-ch-rond,
  .lp-ch-neuf .lp-ch-nom,.lp-ch-neuf .lp-ch-plaque,.lp-ch-neuf .lp-ch-bul,
  .lp-ch-neuf .lp-ch-mon,.lp-ch-neuf-seg,.lp-ch-neuf-rail,.lp-trait-anim,
  .lp-st-neuve{animation:none}
}


/* — Mes lignes : celles que le joueur trace ————————————————————— */
.mc-bis{position:relative;overflow:hidden;border-radius:16px;padding:var(--sp-4);
  background:linear-gradient(155deg,#16202C,#0D1520);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10),inset 4px 0 0 var(--c);
  transition:box-shadow var(--dur) var(--ease-std)}
.mc-bis h4{margin:6px 0 0;font-family:var(--display);font-size:1.05rem;color:#F5F2E8}
.mc-bis p{margin:6px 0 0;font-size:.84rem;color:#9AA3AE;line-height:1.45}
.mc-bis.ouvert{box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.16),inset 4px 0 0 var(--c)}
.mc-bis.trace{box-shadow:inset 0 0 0 2px var(--jaune),0 0 26px -10px var(--jaune)}
.mc-line-rev{min-width:6.4em;text-align:right;font-family:var(--mono);font-size:.72rem;
  color:#83C491;white-space:nowrap}
.mc-line-max{min-width:6.2em;text-align:right;font-family:var(--mono);font-size:.66rem;
  color:#7E8894;white-space:nowrap}
.mc-line-max.atteint{color:#FFCE00}
@media (max-width:620px){ .mc-line-rev{min-width:5em;font-size:.66rem} }
.mc-pal{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mc-pal-c{width:22px;height:22px;border-radius:50%;padding:0;background:var(--c);
  box-shadow:inset 0 0 0 2px rgba(11,14,19,.55);cursor:pointer;
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.mc-pal-c:hover{transform:scale(1.18)}
.mc-pal-c.on{box-shadow:inset 0 0 0 2px #0B0E13,0 0 0 2.5px #E8E9E4;transform:scale(1.12)}
.mc-bis-rev{display:inline-block;margin-top:var(--sp-3);font-family:var(--mono);font-size:.68rem;
  color:var(--c);padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--c)}
.mc-bis-suite{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--sp-3);
  max-height:118px;overflow-y:auto}
.mc-bis-st{font-family:var(--mono);font-size:.6rem;color:#9AA3AE;padding:3px 7px;
  border-radius:6px;background:rgba(232,233,228,.06)}
/* le tracé sur le plan : seules les cibles bougent, le trait est un vrai trait */
.mc-bis-cible{animation:mcBisCible 1.8s ease-in-out infinite}
@keyframes mcBisCible{0%,100%{opacity:.30}50%{opacity:.75}}
/* le bandeau de tracé */
.mc-trace{position:fixed;left:50%;bottom:18px;transform:translate(-50%,20px);z-index:70;
  display:flex;align-items:center;gap:var(--sp-3);padding:10px 14px;border-radius:16px;
  background:linear-gradient(155deg,rgba(23,34,47,.98),rgba(11,18,28,.98));
  box-shadow:inset 0 0 0 2px var(--c),0 18px 40px -14px rgba(0,0,0,.9);
  opacity:0;transition:opacity .3s var(--ease-std),transform .35s var(--ease-back);
  max-width:min(660px,94vw)}
.mc-trace.on{opacity:1;transform:translate(-50%,0)}
.mc-trace>div{flex:1;min-width:0}
.mc-trace b{display:block;font-family:var(--display);font-size:.9rem;color:#F5F2E8}
.mc-trace small{display:block;font-size:.7rem;color:#9AA3AE;margin-top:2px;line-height:1.35}
.mc-trace-pastille{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  flex:none;background:var(--c);color:#fff;font-family:var(--display);font-weight:800;font-size:.8rem}
@media (prefers-reduced-motion:reduce){
  .mc-bis-cible{animation:none}
}

/* — Quêtes du jour — */
.mc-quete{position:relative;border-radius:16px;padding:var(--sp-4);margin-bottom:var(--sp-3);
  background:linear-gradient(155deg,#17222F,#0D1520);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10),inset 4px 0 0 var(--c)}
.mc-quete.fait{box-shadow:inset 0 0 0 2px var(--jaune),inset 4px 0 0 var(--c),
  0 0 26px -12px var(--jaune)}
.mc-quete.clos{opacity:.6}
.mc-quete-tete{display:flex;align-items:center;gap:var(--sp-3)}
.mc-quete-tete>div{flex:1}
.mc-quete-tete b{display:block;font-family:var(--display);font-size:1rem;color:#F5F2E8}
.mc-quete-tete small{display:block;font-size:.74rem;color:#9AA3AE;margin-top:2px;line-height:1.35}
.mc-quete-eta{font-size:1.35rem}
.mc-quete-cat{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c);padding:4px 9px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--c)}
.mc-quete-obt{font-family:var(--mono);font-size:.7rem;color:var(--c);
  padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--c)}
.mc-quete-flash{margin:var(--sp-5) auto 0;max-width:34rem;padding:var(--sp-4);border-radius:16px;
  text-align:center;background:linear-gradient(155deg,#2A2210,#171208);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.6);position:relative}
.mc-quete-flash.rate{background:linear-gradient(155deg,#2A1416,#180C0E);
  box-shadow:inset 0 0 0 2px rgba(227,5,28,.5)}
.mc-quete-flash.rate b{color:#F2A0A6}
.mc-quete-flash b{display:block;font-family:var(--display);font-size:1.1rem;color:#FFE47A}
.mc-quete-flash p{margin:8px 0 var(--sp-4);font-size:.85rem;color:#C9B99A;line-height:1.45}

/* — La rame-cadeau ————————————————————————————————————————————————
   Une rame sur un quai carrelé. On la tapote, elle tressaute, elle monte de
   palier, puis les portes s'ouvrent sur la récompense. */
.mc-mtr{position:relative;width:min(360px,84vw);margin:var(--sp-5) auto 0;padding:38px var(--sp-4) var(--sp-4);
  border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,#101A26 0%,#0A121C 100%);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10);
  transition:box-shadow .5s var(--ease-std)}
.mc-mtr.halo{box-shadow:0 0 46px -8px var(--halo),inset 0 0 0 2px var(--halo)}
.mc-mtr.choc{animation:mcChoc .3s var(--ease-std)}
@keyframes mcChoc{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}65%{transform:translateX(3px)}}
/* le quai : carrelage blanc biseauté et plaque émaillée */
.mc-mtr-quai{position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(236,238,232,.055) 0 26px,transparent 26px 28px),
    repeating-linear-gradient(0deg,rgba(236,238,232,.055) 0 18px,transparent 18px 20px);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 78%)}
.mc-mtr-plaque{position:absolute;left:50%;top:10px;transform:translateX(-50%);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.34em;color:#0B0E13;
  background:#F5F2E8;padding:5px 16px;border-radius:3px;
  box-shadow:0 0 0 3px #1F5F8B, 0 6px 14px rgba(0,0,0,.5)}
.mc-mtr-plus{display:inline-block;margin-left:6px;font-size:1.1rem;vertical-align:middle}
.mc-mtr-boite{position:relative;display:block;width:100%;background:none;border:0;cursor:pointer;padding:0;z-index:2}
.mc-mtr-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6))}
.mc-mtr-halo{animation:mcHaloPulse 2.6s ease-in-out infinite}
@keyframes mcHaloPulse{0%,100%{opacity:.5}50%{opacity:1}}
.mc-mtr-etoiles{animation:mcScint 1.6s ease-in-out infinite}
@keyframes mcScint{0%,100%{opacity:.35}50%{opacity:1}}
/* la rame respire tant qu'on ne l'a pas ouverte */
.mc-mtr-boite:not([disabled]) .mc-mtr-svg{animation:mcRespire 2.4s ease-in-out infinite}
@keyframes mcRespire{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.mc-mtr-boite:hover .mc-mtr-svg{filter:drop-shadow(0 20px 30px rgba(0,0,0,.7)) brightness(1.06)}
.mc-mtr-boite.secoue .mc-mtr-svg{animation:mcSecoue .42s var(--ease-std)}
@keyframes mcSecoue{0%,100%{transform:translateX(0) rotate(0)}
  18%{transform:translateX(-8px) rotate(-2.2deg)}42%{transform:translateX(7px) rotate(2.2deg)}
  68%{transform:translateX(-4px) rotate(-1deg)}}
.mc-mtr-boite.monte .mc-mtr-svg{animation:mcMonteRame .6s var(--ease-back)}
@keyframes mcMonteRame{0%{transform:scale(.86) translateY(10px)}55%{transform:scale(1.08)}100%{transform:scale(1)}}
/* les cinq jetons */
.mc-mtr-jetons{display:flex;justify-content:center;gap:9px;margin-top:var(--sp-4)}
.mc-mtr-jetons i{width:11px;height:11px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.32);transition:all .3s var(--ease-back)}
.mc-mtr-jetons i.on{background:var(--jaune);box-shadow:0 0 12px -1px var(--jaune);transform:scale(1.22)}
.mc-mtr-rar{text-align:center;font-family:var(--display);font-weight:800;font-size:1.35rem;
  margin:var(--sp-3) 0 0;letter-spacing:.01em}
.mc-mtr-rar.pop{animation:mcMonte .55s var(--ease-back)}
@keyframes mcMonte{0%{transform:scale(.6);opacity:.2}60%{transform:scale(1.2)}100%{transform:scale(1)}}
/* l'ouverture : les portes coulissent, la caisse s'écarte, la lumière sort */
.mc-mtr.ouvre .mc-mtr-portes{animation:mcPortes .85s var(--ease-back) forwards}
@keyframes mcPortes{to{opacity:0;transform:scaleX(2.6)}}
.mc-mtr.ouvre .mc-mtr-haut{animation:mcOuvreHaut .95s var(--ease-back) forwards}
.mc-mtr.ouvre .mc-mtr-bas{animation:mcOuvreBas .95s var(--ease-back) forwards}
@keyframes mcOuvreHaut{to{transform:translateY(-120px) rotate(-8deg);opacity:0}}
@keyframes mcOuvreBas{to{transform:translateY(70px);opacity:0}}
.mc-mtr.ouvre::before{content:"";position:absolute;left:50%;top:46%;width:14px;height:14px;
  margin:-7px 0 0 -7px;border-radius:50%;background:#FFF6C2;
  box-shadow:0 0 40px 22px rgba(255,246,194,.55);animation:mcEclair 1s var(--ease-std) forwards}
@keyframes mcEclair{0%{transform:scale(0);opacity:0}35%{transform:scale(9);opacity:1}
  100%{transform:scale(16);opacity:0}}
.mc-mtr-gain{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  text-align:center;gap:8px;padding:var(--sp-4);animation:mcMonte .7s var(--ease-back);z-index:3}
.mc-mtr-gain-ico{font-size:2.6rem;line-height:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.mc-mtr-gain b{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--c)}
.mc-mtr-gain small{font-size:.8rem;color:#9AA3AE;max-width:24ch;line-height:1.4}
@media (prefers-reduced-motion:reduce){
  .mc-mtr-boite .mc-mtr-svg,.mc-mtr-halo,.mc-mtr-etoiles,.mc-mtr-rar.pop,.mc-mtr-gain,
  .mc-mtr.choc,.mc-mtr.ouvre::before{animation:none}
  .mc-mtr.ouvre .mc-mtr-haut,.mc-mtr.ouvre .mc-mtr-bas,.mc-mtr.ouvre .mc-mtr-portes{
    animation:none;opacity:0}
}

/* — Monuments d'or — */
.mc-or{position:relative;overflow:hidden}
.mc-or.pret{box-shadow:inset 0 0 0 2px #FFCE00,0 0 30px -10px #FFCE00}
.mc-or.brille{background:linear-gradient(155deg,#2A2210,#171208);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.75),0 0 34px -12px rgba(255,206,0,.9)}
.mc-or.brille::after{content:"";position:absolute;top:-60%;left:-70%;width:55%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,246,194,.30),transparent);
  transform:rotate(18deg);animation:mcOrEclat 3.6s ease-in-out infinite}
@keyframes mcOrEclat{0%{left:-70%}55%,100%{left:130%}}
.mc-or.brille h4{color:#FFE47A}
.mc-or-pax{display:inline-block;margin-top:var(--sp-3);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;color:#FFCE00;padding:4px 9px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.45)}
.mc-or-vue{position:relative;width:min(420px,82vw);aspect-ratio:1;margin:var(--sp-4) auto 0;
  border-radius:18px;overflow:hidden;box-shadow:0 18px 38px -16px rgba(0,0,0,.85),
  inset 0 0 0 2px rgba(255,206,0,.5)}
.mc-or-vue canvas{display:block;width:100%;height:100%}
.mc-or-eclat{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 30% 20%,rgba(255,246,194,.22),transparent 55%)}
/* l'étoile d'or sur le plan */
/* Marqueurs fixes : le clignotement faisait « respirer » tout le plan dès
   que le réseau grossissait, et l'animation du rayon forçait un recalcul de
   mise en page à chaque image. */
.mc-or-marque{transform-origin:center}
/* Le monument d'or sur le plan : la maquette elle-même, posée sur son
   piédestal, avec son faisceau et son étoile. Deux éléments animés, en
   opacité et en rotation — jamais de géométrie, la carte ne doit pas
   trembler. */
.mc-or-monu{filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))
  drop-shadow(0 0 10px rgba(255,206,0,.40))}
.mc-or-m3d{overflow:visible}
.mc-or-rayon{animation:mcOrRayon 3.6s ease-in-out infinite;transform-origin:20px 37px}
@keyframes mcOrRayon{0%,100%{opacity:.55}50%{opacity:1}}
.mc-or-etoile{animation:mcOrEtoile 4.2s var(--ease-std) infinite;
  transform-box:fill-box;transform-origin:center}
@keyframes mcOrEtoile{0%,100%{transform:rotate(0) scale(1);opacity:.9}
  50%{transform:rotate(180deg) scale(1.18);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .mc-or-rayon,.mc-or-etoile{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .mc-or.brille::after{animation:none}
}
@keyframes mcAlerte{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.mc-eq{position:relative}
.mc-eq::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  border-radius:16px 16px 0 0;background:var(--r)}
.mc-eq.acquis{opacity:.62}
/* Les boosters de banlieue portent la couleur de leur réseau */
.mc-tile--mode{position:relative;overflow:hidden;
  background:linear-gradient(155deg,color-mix(in srgb,var(--t) 22%,#16202C),#0C1420)}
.mc-tile--mode::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(90deg,var(--t),var(--a))}
.mc-tile--mode::after{content:"";position:absolute;right:-28px;top:-28px;width:110px;height:110px;
  border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--a) 40%,transparent),transparent 70%);
  pointer-events:none}
.mc-tile--mode h4{color:var(--a)}
.mc-tile--mode:hover{box-shadow:inset 0 0 0 2px var(--a),0 20px 40px -22px var(--t)}
.mc-echelle{display:block;margin-top:6px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.06em;color:#7E8894}
.mc-red{display:inline-block;margin-top:var(--sp-3);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;color:#83C491;padding:4px 9px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(131,196,145,.45)}
/* la station en incident clignote sur le plan */
.mc-incident-marque{transform-origin:center;opacity:.9}
.mc-tool{position:relative}
.mc-tool::after{content:attr(data-nom);position:absolute;right:calc(100% + 8px);top:50%;
  transform:translateY(-50%) translateX(6px);transform-origin:right center;
  background:rgba(11,14,19,.96);color:#E8E9E4;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.05em;white-space:nowrap;padding:6px 10px;border-radius:9px;
  box-shadow:0 6px 16px rgba(0,0,0,.45);opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease-std),transform var(--dur) var(--ease-back)}
.mc-tool:hover::after,.mc-tool:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
.mc-tool.on{background:var(--jaune);color:var(--nuit)}
.mc-legend{position:absolute;left:12px;bottom:12px;z-index:9;display:flex;gap:6px;flex-wrap:wrap;
  max-width:calc(100% - 90px)}
.mc-legend span{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35em .6em;border-radius:999px;background:rgba(11,14,19,.78);color:#D8DCE2}
.mc-scale{position:absolute;right:12px;bottom:12px;z-index:9;font-family:var(--mono);font-size:.6rem;
  color:#3A4553;background:rgba(255,255,255,.7);padding:.3em .6em;border-radius:8px}

/* Éléments SVG de la carte */
.mc-ghost{stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.17}
.mc-built{stroke-linecap:round;stroke-linejoin:round;fill:none;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.16))}
.mc-build-anim{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:mcDraw 1.1s var(--ease-out-expo) forwards}
@keyframes mcDraw{to{stroke-dashoffset:0}}
.mc-dot{fill:#6B7686;opacity:.28}
.mc-st{cursor:pointer}
.mc-st circle.ring{fill:#fff;stroke-width:3.4}
.mc-st:hover circle.ring{stroke-width:5}
.mc-st text{font-family:var(--display);font-weight:800;fill:#22303F;paint-order:stroke;
  stroke:#EFEBE1;stroke-width:3.4;stroke-linejoin:round;pointer-events:none}
.mc-st.sel circle.ring{stroke:#0B0E13;stroke-width:5.5}
/* Halo et voyageurs restent DESSINÉS mais FIXES. Animer leur rayon faisait
   recalculer la géométrie de centaines de cercles à chaque image : c'est ce
   qui donnait l'impression que tout le plan bougeait dès qu'il grossissait. */
.mc-pulse{opacity:.22}
.mc-train{filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.mc-pax{fill:#F4A11E;opacity:.75}
.mc-bldg{opacity:.85}
.mc-newbuild{animation:mcPop .7s var(--ease-back) both}
@keyframes mcPop{0%{transform:scale(0) translateY(14px);opacity:0}
  60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}

/* — Onglets du dock ——————————————————————————————————————————————— */
.mc-dock{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-4)}
.mc-dtab{display:inline-flex;align-items:center;gap:8px;padding:.6em 1em;border-radius:999px;
  font-weight:700;font-size:.86rem;color:var(--gris);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12);transition:all var(--dur) var(--ease-std)}
.mc-dtab:hover{color:var(--faience);background:rgba(232,233,228,.07)}
.mc-dtab.on{background:var(--faience);color:var(--nuit);box-shadow:none}
.mc-dtab i{width:8px;height:8px;border-radius:99px;background:var(--rouge);display:none}
.mc-dtab.alert i{display:block;animation:mcBlink 1.2s ease-in-out infinite}
@keyframes mcBlink{0%,100%{opacity:1}50%{opacity:.25}}
.mc-pane{margin-top:var(--sp-4)}

/* — Grilles génériques ————————————————————————————————————————————— */
.mc-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mc-tile{position:relative;overflow:hidden;text-align:left;border-radius:var(--r-l);padding:var(--sp-4);
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std);width:100%}
.mc-tile:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(232,233,228,.24),0 18px 40px rgba(0,0,0,.5)}
.mc-tile[disabled]{opacity:.42;pointer-events:none}
.mc-tile h4{margin:.15em 0 .3em;font-family:var(--display);font-weight:800;font-size:1.02rem}
.mc-tile p{margin:0;font-size:.82rem;color:#9AA3AE;line-height:1.45}
.mc-tile .price{margin-top:var(--sp-3);display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--jaune)}
.mc-tile .price.no{color:#FF8A93}
.mc-kv{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:.8rem;
  padding:.3em 0;border-bottom:1px dashed rgba(232,233,228,.1)}
.mc-kv:last-child{border:0}
.mc-kv b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
/* — Détail des recettes : la ligne de calcul, poste par poste — */
.mc-kv--tot{border-bottom:0;margin-top:.2em;padding:.5em .7em;border-radius:9px;
  background:rgba(255,206,0,.10);box-shadow:inset 0 0 0 1.2px rgba(255,206,0,.28)}
.mc-kv--tot b{color:var(--jaune)}
.mc-sous{margin:.15em 0 .7em;font-size:.74rem;line-height:1.5;color:#8B95A1}
.mc-h4{margin:var(--sp-4) 0 var(--sp-2);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
/* la puce du bandeau qui ouvre le détail : elle doit se voir cliquable */
.mc-chip--clic{cursor:pointer;border:0;text-align:left;font:inherit;color:inherit;
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.mc-chip--clic:hover{transform:translateY(-2px)}
.mc-chip--clic::after{content:"?";position:absolute;top:5px;right:7px;
  font-family:var(--mono);font-size:.56rem;color:#7E8894;
  width:12px;height:12px;line-height:12px;text-align:center;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.28)}
.mc-chip--clic{position:relative}

/* — Cartes de station ————————————————————————————————————————————— */
.mc-card{position:relative;border-radius:16px;padding:12px 12px 10px;overflow:hidden;text-align:left;
  background:linear-gradient(165deg,#1B2430,#10151C);
  box-shadow:inset 0 0 0 2px var(--rc,#B9C2CC),0 10px 24px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease-back)}
.mc-card:hover{transform:translateY(-5px) rotate(-.6deg)}
.mc-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.16),transparent 42%)}
.mc-card .rn{font-family:var(--mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rc,#B9C2CC)}
.mc-card .nm{display:block;font-family:var(--display);font-weight:800;font-size:.94rem;
  line-height:1.15;margin:.3em 0 .45em;min-height:2.2em}
.mc-card .bl{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:.4em}
.mc-card .ft{display:flex;justify-content:space-between;align-items:center;gap:6px;
  font-family:var(--mono);font-size:.68rem;color:#9AA3AE}
.mc-card--leg{box-shadow:inset 0 0 0 2px var(--mc-leg),0 0 26px rgba(255,206,0,.35),0 10px 24px rgba(0,0,0,.5)}
.mc-card--epi{box-shadow:inset 0 0 0 2px var(--mc-epi),0 0 18px rgba(165,91,216,.3),0 10px 24px rgba(0,0,0,.5)}
.mc-card--dup{opacity:.92}
.mc-card .dupn{position:absolute;right:8px;top:8px;font-family:var(--mono);font-size:.62rem;
  padding:.2em .45em;border-radius:6px;background:rgba(11,14,19,.8);color:var(--jaune)}
.mc-card .lock{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,14,19,.62);
  font-size:1.4rem}

/* — Ouverture de booster : la scène ————————————————————————————————— */
.mc-open{position:fixed;inset:0;z-index:900;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 40%,#141C27,#05070A 70%)}
.mc-open canvas{position:absolute;inset:0;width:100%;height:100%}
.mc-open .beam{position:absolute;left:50%;top:50%;width:220vmax;height:220vmax;translate:-50% -50%;
  pointer-events:none;opacity:0;
  background:conic-gradient(from 0deg,transparent 0 6deg,var(--gl,#FFCE00) 6deg 8deg,transparent 8deg 20deg);
  mask:radial-gradient(closest-side,transparent 8%,#000 22%,#000 46%,transparent 62%);
  -webkit-mask:radial-gradient(closest-side,transparent 8%,#000 22%,#000 46%,transparent 62%)}
.mc-open .beam.on{opacity:.5;animation:mcSpin 9s linear infinite}
@keyframes mcSpin{to{rotate:360deg}}
.mc-open .halo{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;translate:-50% -50%;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,var(--gl,#FFCE00),transparent 70%);
  filter:blur(12px);transition:opacity .5s ease}
.mc-open .halo.on{opacity:.55;animation:mcBreathe 2.4s ease-in-out infinite}
@keyframes mcBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.mc-open .stagewrap{position:relative;z-index:3;display:grid;place-items:center;gap:var(--sp-5);
  padding:var(--sp-5);text-align:center;max-width:min(960px,94vw)}
.mc-open .pack{width:min(230px,62vw);aspect-ratio:.68;border-radius:20px;position:relative;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 3px rgba(255,255,255,.22);cursor:pointer}
.mc-open .pack .sheen{position:absolute;inset:-40%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  animation:mcSheen 2.6s linear infinite}
@keyframes mcSheen{0%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
.mc-open .pack.shake{animation:mcShake .5s ease-in-out infinite}
@keyframes mcShake{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.mc-open .pack.burst{animation:mcBurst .55s var(--ease-back) forwards}
@keyframes mcBurst{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(0);opacity:0}}
.mc-open .tip{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gris)}
.mc-open .rev{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.mc-open .slot{width:clamp(128px,22vw,168px);perspective:1200px}
.mc-open .flip{position:relative;width:100%;aspect-ratio:.7;transform-style:preserve-3d;
  transition:transform .75s var(--ease-emph)}
.mc-open .flip.done{transform:rotateY(180deg)}
.mc-open .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:16px;overflow:hidden}
.mc-open .back{background:linear-gradient(160deg,#233042,#111820);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.2);display:grid;place-items:center;font-size:1.8rem}
.mc-open .front{transform:rotateY(180deg)}
.mc-open .slot.pop{animation:mcSlotPop .6s var(--ease-back) both}
@keyframes mcSlotPop{0%{transform:scale(.6) translateY(30px);opacity:0}100%{transform:none;opacity:1}}
.mc-open .rname{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,7vw,3.4rem);
  letter-spacing:-.02em;text-transform:uppercase;margin:0;line-height:1}
.mc-open .rname.leg{color:var(--mc-leg);text-shadow:0 0 30px rgba(255,206,0,.8)}
.mc-flash{position:fixed;inset:0;z-index:901;background:var(--cr-blanc);pointer-events:none;opacity:0}
.mc-flash.on{animation:mcFlash .5s ease-out forwards}
@keyframes mcFlash{0%{opacity:.92}100%{opacity:0}}
.mc-quake{animation:mcQuake .6s ease-in-out}
@keyframes mcQuake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}
  30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}

/* — Panneau de station ————————————————————————————————————————————— */
.mc-modal{position:fixed;inset:0;z-index:880;display:grid;place-items:center;padding:var(--sp-4);
  background:rgba(5,7,10,.76);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.mc-modal .box{width:min(620px,94vw);max-height:88vh;overflow:auto;background:var(--nuit-2);
  border-radius:var(--r-xl);padding:var(--sp-5);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.13),0 40px 90px rgba(0,0,0,.65);
  animation:viewIn var(--dur) var(--ease-emph) both}
.mc-modal .box.wide{width:min(920px,95vw)}
.mc-modal h3{margin:0 0 var(--sp-2);font-family:var(--display);font-weight:800;font-size:1.3rem}
.mc-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.mc-head .bl{display:flex;gap:4px;flex-wrap:wrap}
.mc-danger{color:#FF8A93}

/* — Barres de progression de ligne ————————————————————————————————— */
.mc-line{display:flex;align-items:center;gap:var(--sp-3);padding:.55em 0;
  border-bottom:1px dashed rgba(232,233,228,.09)}
.mc-line:last-child{border:0}
.mc-bar{flex:1;height:9px;border-radius:99px;background:rgba(232,233,228,.09);overflow:hidden;position:relative}
.mc-bar i{display:block;height:100%;border-radius:99px;background:var(--c,#0064B0);width:0;
  transition:width var(--dur-slow) var(--ease-out-expo)}
.mc-bar .step{position:absolute;top:-3px;width:1.5px;height:15px;background:rgba(232,233,228,.35)}
.mc-line .pc{font-family:var(--mono);font-size:.78rem;width:3.6em;text-align:right;font-variant-numeric:tabular-nums}
.mc-line .mult{font-family:var(--mono);font-size:.68rem;color:var(--jaune);width:4.2em;text-align:right}
.mc-full{box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.5);border-radius:10px;padding:.4em .6em}

/* — Divers ————————————————————————————————————————————————————————— */
.mc-note{font-size:.78rem;color:var(--gris);line-height:1.5}
.mc-empty{padding:var(--sp-5);text-align:center;color:var(--gris);font-size:.88rem;
  border-radius:var(--r-l);box-shadow:inset 0 0 0 1px rgba(232,233,228,.1)}
.mc-seg{display:flex;gap:4px;background:rgba(232,233,228,.06);padding:4px;border-radius:999px;
  margin-bottom:var(--sp-4);flex-wrap:wrap}
.mc-seg button{padding:.45em .9em;border-radius:999px;font-weight:700;font-size:.8rem;color:var(--gris)}
.mc-seg button.on{background:var(--faience);color:var(--nuit)}
.mc-rar{display:inline-block;padding:.18em .5em;border-radius:6px;font-family:var(--mono);
  font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#0B0E13;font-weight:700}
.mc-cap{height:8px;border-radius:99px;background:rgba(232,233,228,.09);overflow:hidden;margin-top:6px}
.mc-cap i{display:block;height:100%;background:linear-gradient(90deg,#83C491,#FFCE00);
  transition:width var(--dur) var(--ease-std)}
.mc-reb{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:var(--sp-5);
  background:linear-gradient(150deg,#2A1B3D,#140C1F);box-shadow:inset 0 0 0 1px rgba(165,91,216,.35)}
.mc-reb .halo{position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(165,91,216,.5),transparent 70%);pointer-events:none}
@media (max-width:640px){
  .mc-mapwrap{height:clamp(320px,54vh,520px)}
  .mc-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

.bluepanel--mc{background:linear-gradient(150deg,#DFEFDA,#BEDFCB)}
.bluepanel--sol{margin-top:var(--sp-4);background:linear-gradient(150deg,#DCE7F5,#BFD2E8)}
.bluepanel--snk{margin-top:var(--sp-4);background:linear-gradient(150deg,#E4D6F2,#C6AEE2)}

/* — Périmètre de jeu : métro seul, ou métro + RER + tramway —————————— */
.rx{position:relative;overflow:hidden;border-radius:22px;margin-top:var(--sp-5);
  padding:var(--sp-5) var(--sp-5) 96px;
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-5);align-items:center;
  background:linear-gradient(150deg,#17222F,#0D1520);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.10),0 18px 40px -24px rgba(0,0,0,.9);
  transition:background .6s var(--ease-std),box-shadow .6s var(--ease-std)}
.rx[data-on="true"]{background:linear-gradient(150deg,#1B2C40,#2A1A26 52%,#31200F);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.32),0 20px 46px -22px rgba(227,5,28,.45)}
.rx-eyebrow{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--jaune);margin:0}
.rx-titre{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.1;
  margin:6px 0 0;color:#F5F2E8}
.rx-desc{margin:8px 0 0;max-width:52ch;color:#A9B4C0;font-size:.92rem;line-height:1.45}
.rx-pastilles{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:var(--sp-4);min-height:28px}
.rx-plus{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  opacity:0;transform:translateY(8px) scale(.72);transform-origin:left center;
  transition:opacity .5s var(--ease-std),transform .6s var(--ease-back)}
.rx[data-on="true"] .rx-plus{opacity:1;transform:none}
.rx-sep{width:2px;height:18px;border-radius:2px;background:rgba(232,233,228,.22);flex:none}

/* l'interrupteur : une pastille qui roule sur sa voie */
.rx-switch{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;background:none;
  border:0;cursor:pointer}
.rx-piste{position:relative;display:block;width:108px;height:48px;border-radius:999px;background:#0A121C;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.18),inset 0 3px 12px rgba(0,0,0,.7);
  transition:background .5s var(--ease-std),box-shadow .5s var(--ease-std)}
.rx-piste::before{content:"";position:absolute;left:16px;right:16px;top:50%;height:2px;margin-top:-1px;
  border-radius:2px;background:repeating-linear-gradient(90deg,rgba(232,233,228,.32) 0 5px,transparent 5px 11px)}
.rx-curseur{position:absolute;top:5px;left:5px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:1.05rem;background:#E8E9E4;
  box-shadow:0 5px 14px rgba(0,0,0,.6),inset 0 0 0 2px rgba(0,0,0,.12);
  transition:left .55s var(--ease-back),transform .55s var(--ease-back),background .5s var(--ease-std)}
.rx[data-on="true"] .rx-piste{background:#2C1219;
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.55),inset 0 3px 12px rgba(0,0,0,.7)}
.rx[data-on="true"] .rx-curseur{left:65px;transform:rotate(360deg);background:var(--jaune)}
.rx-etat{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);transition:color .4s var(--ease-std)}
.rx[data-on="true"] .rx-etat{color:var(--jaune)}
.rx-switch:hover .rx-piste{box-shadow:inset 0 0 0 2px rgba(255,206,0,.55),inset 0 3px 12px rgba(0,0,0,.7)}
.rx-switch:focus-visible{outline:3px solid var(--jaune);outline-offset:6px;border-radius:16px}

/* la voie cartoon, en bas de la carte */
.rx-scene{position:absolute;left:0;right:0;bottom:0;height:84px;pointer-events:none}
.rx-rail{position:absolute;left:0;right:0;bottom:26px;height:4px;border-radius:3px;
  background:linear-gradient(180deg,#4A5A6B,#2E3B49)}
.rx-rail--bas{bottom:16px;opacity:.5}
.rx-traverse{position:absolute;bottom:14px;width:5px;height:17px;border-radius:2px;background:#26313D}
.rx-train{position:absolute;bottom:28px;display:flex;align-items:flex-end;gap:4px;
  animation:rxRoule linear infinite;will-change:left}
.rx-train i{position:relative;width:36px;height:24px;border-radius:9px 11px 5px 5px;background:var(--c);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.2),0 4px 9px rgba(0,0,0,.55)}
.rx-train i::before{content:"";position:absolute;left:6px;right:6px;top:6px;height:8px;border-radius:3px;
  background:rgba(255,255,255,.85)}
.rx-train i:first-child{width:42px;border-radius:17px 11px 5px 5px}
.rx-train i:first-child::after{content:"";position:absolute;left:4px;bottom:5px;width:7px;height:7px;
  border-radius:50%;background:#FFF6C2;box-shadow:0 0 10px 3px rgba(255,246,194,.75)}
.rx-train b{position:absolute;left:-2px;top:-19px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;background:var(--c);color:var(--i,#fff);
  font-family:var(--display);font-weight:800;font-size:.62rem;
  box-shadow:0 3px 8px rgba(0,0,0,.55)}
@keyframes rxRoule{from{left:-210px}to{left:102%}}
.rx-train--r,.rx-train--t{opacity:0;animation-play-state:paused;
  transition:opacity .55s var(--ease-std)}
.rx[data-on="true"] .rx-train--r,.rx[data-on="true"] .rx-train--t{opacity:1;animation-play-state:running}
.rx[data-on="true"] .rx-train--t{transition-delay:.2s}
.rx-etincelle{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--jaune);
  opacity:0;pointer-events:none}
.rx-etincelle.part{animation:rxEtincelle .75s var(--ease-std) forwards}
@keyframes rxEtincelle{0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* le bandeau des modes suit le périmètre choisi */
.hero-strip--modes .strip-mode{transition:opacity .5s var(--ease-std),
  max-height .55s var(--ease-std),transform .55s var(--ease-back),margin .5s var(--ease-std)}
.hero-strip--modes[data-etendu="false"] .strip-mode[data-extra="1"],
.hero-strip--modes[data-gpe="false"] .strip-mode[data-extra="2"]{
  opacity:0;max-height:0;transform:translateY(-10px) scale(.94);margin:0;
  overflow:hidden;pointer-events:none}
/* les deux cartes de périmètre, côte à côte */
.rx-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-5)}
.rx-duo .rx{margin-top:0;height:100%}
.rx--gpe[data-on="true"]{background:linear-gradient(150deg,#2A1220,#12303A 52%,#0E2A24);
  box-shadow:inset 0 0 0 2px rgba(0,168,143,.4),0 20px 46px -22px rgba(185,8,69,.45)}
.rx--gpe .rx-eyebrow{color:#00A88F}
.rx--gpe[data-on="true"] .rx-piste{background:#12262A;
  box-shadow:inset 0 0 0 2px rgba(0,168,143,.6),inset 0 3px 12px rgba(0,0,0,.7)}
.rx--gpe[data-on="true"] .rx-curseur{background:#00A88F}
.rx--gpe[data-on="true"] .rx-etat{color:#00A88F}
.rx--gpe .rx-switch:hover .rx-piste{box-shadow:inset 0 0 0 2px rgba(0,168,143,.6),
  inset 0 3px 12px rgba(0,0,0,.7)}

@media (max-width:760px){
  .rx{grid-template-columns:1fr;justify-items:start;padding-bottom:92px}
  .rx-titre{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .rx-train{animation:none;left:-999px}
  .rx-curseur,.rx-plus,.rx,.rx-piste{transition:none}
}

/* ==========================================================================
   MÉTRODROP — habillage
   Le plateau est un mur de carrelage de quai ; chaque pièce est une pastille
   de ligne en relief. La POSITION vit sur .md-tile (transform posé par le
   moteur), le RELIEF et les animations sur .md-face : sans cette séparation
   une animation CSS écraserait la position calculée.
   ========================================================================== */
.md-titre{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(1.7rem,5.5vw,2.6rem);margin:.15em 0;text-align:center}

/* — Parcours dans Paris ————————————————————————————————————————————— */
/* — Le parcours : une ligne de métro, une station par niveau — */
.md-ligne{position:relative;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
  padding:var(--sp-5) var(--sp-2) var(--sp-3);margin-top:var(--sp-3);
  scrollbar-width:thin;scrollbar-color:rgba(232,233,228,.22) transparent}
.md-rail{position:absolute;left:62px;right:62px;top:calc(var(--sp-5) + 18px);height:6px;
  border-radius:99px;background:rgba(232,233,228,.13);pointer-events:none}
.md-rail-fait{display:block;height:100%;border-radius:99px;background:var(--jaune);
  box-shadow:0 0 14px -3px var(--jaune);transition:width .6s var(--ease-emph)}
.md-arret{position:relative;flex:0 0 124px;display:flex;flex-direction:column;align-items:center;
  gap:7px;padding:0 4px;background:none;border:0;cursor:pointer;color:inherit}
.md-arret b{width:38px;height:38px;border-radius:99px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1;
  background:#111A24;color:#7E8894;box-shadow:inset 0 0 0 2.5px rgba(232,233,228,.20);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.md-arret.fait b{background:var(--jaune);color:#0B0E13;
  box-shadow:inset 0 0 0 2.5px #0B0E13,0 6px 16px -6px var(--jaune)}
.md-arret.on b{background:var(--faience);color:#0B0E13;
  box-shadow:inset 0 0 0 2.5px #0B0E13,0 0 0 3px var(--jaune),0 8px 20px -8px var(--jaune);
  transform:scale(1.12)}
.md-arret:hover:not(.lock) b{transform:translateY(-3px) scale(1.06)}
.md-arret.lock{opacity:.4;cursor:not-allowed}
.md-arret span{font-size:.68rem;color:#A8B0BA;text-align:center;line-height:1.25;
  min-height:2.5em;max-width:112px}
.md-arret em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  color:var(--jaune)}
.md-arret.lock em{color:var(--gris)}
/* — Le tableau des défis relevés — */
.md-defis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:var(--sp-2);margin-top:var(--sp-3)}
.md-defi-t{border-radius:12px;padding:var(--sp-2) var(--sp-3);
  background:rgba(232,233,228,.04);box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.09);
  opacity:.55}
.md-defi-t.fait{opacity:1;background:rgba(255,206,0,.08);
  box-shadow:inset 0 0 0 1.4px rgba(255,206,0,.45)}
.md-defi-t b{display:block;font-family:var(--display);font-weight:700;font-size:.84rem}
.md-defi-t small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin-top:2px}
.md-defi-t.fait small{color:var(--jaune)}
/* ==================== METRO CITY — BOUTIQUE ILLUSTRÉE ==================== */
.mc-seg--boutique{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;
  background:none;padding:0;border-radius:0}
.mc-seg--boutique button{display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:.7em .5em;border-radius:16px;font-size:.78rem;color:#C9D1DA;
  background:linear-gradient(170deg,rgba(232,233,228,.07),rgba(232,233,228,.02));
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std),
             background var(--dur) var(--ease-std)}
.mc-seg--boutique button i{font-style:normal;font-size:1.5rem;line-height:1;
  transition:transform var(--dur) var(--ease-back)}
.mc-seg--boutique button:hover{transform:translateY(-3px)}
.mc-seg--boutique button:hover i{transform:scale(1.15) rotate(-6deg)}
.mc-seg--boutique button.on{color:#fff;
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 55%,#16202C),color-mix(in srgb,var(--c) 20%,#0C1420));
  box-shadow:inset 0 0 0 2px var(--c),0 10px 26px -12px var(--c)}
.mc-seg--boutique button.on i{animation:mcSegIco .6s var(--ease-back)}
@keyframes mcSegIco{0%{transform:scale(.6) rotate(-20deg)}60%{transform:scale(1.3) rotate(8deg)}100%{transform:none}}
/* la bannière de rayon, et son gros métro qui entre en scène */
.mc-banniere{position:relative;display:flex;align-items:center;gap:var(--sp-4);overflow:hidden;
  margin:var(--sp-4) 0;padding:var(--sp-4) var(--sp-5);border-radius:22px;min-height:150px;
  background:radial-gradient(120% 140% at 88% 50%,color-mix(in srgb,var(--c) 42%,transparent),transparent 62%),
             linear-gradient(160deg,#172230,#0C131B);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent),0 18px 40px -24px var(--c)}
.mc-banniere-txt{position:relative;z-index:2;flex:1;min-width:0}
.mc-banniere-txt h3{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,3.2vw,2rem);letter-spacing:-.02em;margin:.2em 0 .15em;color:#fff}
.mc-banniere-txt p{margin:0;color:#B9C3CE;font-size:.9rem;max-width:36ch}
.mc-banniere-rame{position:relative;z-index:1;width:min(260px,42%);flex:none;
  animation:mcBanRame .9s var(--ease-emph) both}
.mc-banniere-rame svg{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55))}
@keyframes mcBanRame{from{opacity:0;transform:translateX(70%) scale(.8)}to{opacity:1;transform:none}}
.mc-banniere-rail{position:absolute;left:0;right:0;bottom:16px;height:6px;opacity:.7;
  background:repeating-linear-gradient(90deg,#39424F 0 18px,transparent 18px 26px)}
/* les sachets de boosters */
.mc-booster-vis{display:flex;justify-content:center;margin:-4px 0 var(--sp-2)}
.mc-booster-svg{width:96px;height:auto;filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
  transition:transform var(--dur) var(--ease-back)}
.mc-tile:hover .mc-booster-svg{transform:translateY(-6px) rotate(-3deg) scale(1.05)}
.mc-booster-reflet{animation:mcReflet 3.2s ease-in-out infinite}
@keyframes mcReflet{0%,55%{transform:translateX(0)}100%{transform:translateX(200px)}}
.mc-booster-cartes{transition:transform var(--dur) var(--ease-back)}
.mc-tile:hover .mc-booster-cartes{transform:translateY(-7px)}
/* les scènes des améliorations et des équipements */
.mc-scene{margin:0 0 var(--sp-4);border-radius:20px;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12),0 20px 44px -26px #000}
.mc-scene-svg{display:block;width:100%;height:auto}
.mc-sc-el{animation:mcScEl .5s var(--ease-back) both;animation-delay:var(--d,0ms);
  transform-box:fill-box;transform-origin:center bottom}
@keyframes mcScEl{from{opacity:0;transform:translateY(8px) scale(.7)}to{opacity:1;transform:none}}
.mc-sc-new{animation:mcScNew 1s var(--ease-back) both;transform-box:fill-box;transform-origin:center bottom}
@keyframes mcScNew{0%{opacity:0;transform:scale(.2) rotate(-14deg)}
  55%{opacity:1;transform:scale(1.25) rotate(4deg)}100%{transform:none}}
.mc-sc-train{animation:mcScTrain 1.4s var(--ease-emph) both}
@keyframes mcScTrain{from{transform:translateX(-640px)}to{transform:none}}
.mc-sc-metro{animation:mcScMetro 1.1s var(--ease-emph) both;transform-box:fill-box;transform-origin:center}
@keyframes mcScMetro{from{opacity:0;transform:scale(.4) translateY(-20px)}to{opacity:1;transform:none}}
.mc-sc-vide{font-family:var(--mono);font-size:12px;letter-spacing:.08em;fill:#8A93A0}
/* l'incident en image */
.mc-inc-scene{margin:0 0 var(--sp-3);border-radius:14px;overflow:hidden}
.mc-inc-scene.calme{margin-top:var(--sp-4)}
.mc-inc-svg{display:block;width:100%;height:auto}
.mc-inc-titre{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.06em}
.mc-inc-gyro{animation:mcIncGyro .7s steps(2,end) infinite}
@keyframes mcIncGyro{0%,100%{opacity:1}50%{opacity:.15}}
.mc-inc-bob{animation:mcIncBob 1.8s ease-in-out infinite}
@keyframes mcIncBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.mc-inc-doux{animation:mcIncBob 3s ease-in-out infinite}
.mc-inc-bulle{animation:mcIncBob 1.4s ease-in-out infinite}
.mc-inc-cloche{animation:mcIncCloche .5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes mcIncCloche{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
.mc-inc-ondes{animation:mcIncGyro .5s steps(2,end) infinite}
.mc-inc-fumee circle{animation:mcIncFumee 2.4s ease-out infinite;animation-delay:var(--d,0ms);
  transform-box:fill-box;transform-origin:center}
@keyframes mcIncFumee{0%{opacity:.85;transform:translateY(0) scale(.7)}100%{opacity:0;transform:translateY(-34px) scale(1.5)}}
.mc-inc-gouttes path{animation:mcIncGoutte 1s linear infinite;animation-delay:var(--d,0ms)}
@keyframes mcIncGoutte{0%{opacity:0;transform:translateY(-10px)}20%{opacity:1}100%{opacity:0;transform:translateY(60px)}}
.mc-inc-flammes{animation:mcIncFlamme .35s steps(2,end) infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mcIncFlamme{0%{transform:scaleY(1)}100%{transform:scaleY(1.12) skewX(3deg)}}
.mc-inc-vagues{animation:mcIncVague 2.2s ease-in-out infinite}
@keyframes mcIncVague{0%,100%{transform:translateX(0)}50%{transform:translateX(-20px)}}
.mc-inc-rat{animation:mcIncRat .9s ease-in-out infinite}
@keyframes mcIncRat{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}
.mc-inc-aiguille{animation:mcIncAig 3s linear infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mcIncAig{to{transform:rotate(360deg)}}
/* les monuments en volume dans les tuiles et la fiche de station */
.mc-or-vis{display:flex;justify-content:center;margin:-6px 0 var(--sp-2)}
.mc-or-vis svg{filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));transition:transform var(--dur) var(--ease-back)}
.mc-or-vis:not(.erige) svg{filter:grayscale(.6) brightness(.78) drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.mc-tile:hover .mc-or-vis svg{transform:translateY(-4px) scale(1.04)}
.mc-mon-vis{display:flex;justify-content:center;align-items:flex-end;height:68px}
/* ce que la renaissance emporte et ce qu'elle laisse */
.mc-reb-bilan{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-3);
  margin:0 0 var(--sp-5)}
.mc-reb-col{border-radius:16px;padding:var(--sp-3) var(--sp-4);background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.1);text-align:left}
.mc-reb-col.garde{box-shadow:inset 0 0 0 1.5px rgba(62,208,122,.45)}
.mc-reb-col.perd{box-shadow:inset 0 0 0 1.5px rgba(227,5,28,.4)}
.mc-reb-col b{display:block;font-family:var(--display);margin-bottom:var(--sp-2)}
.mc-reb-col small{display:block;color:#9AA3AE;font-size:.76rem;margin-top:var(--sp-2);line-height:1.4}
.mc-reb-trains{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.mc-reb-trains svg{width:100%;height:auto}
.mc-reb-mons{display:flex;flex-wrap:wrap;gap:4px;min-height:44px;align-items:flex-end}
/* mes lignes : les trains en circulation */
.mc-circ-grille{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.mc-circ{border-radius:18px;overflow:hidden;background:#101821;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 60%,transparent),0 14px 30px -20px var(--c);
  animation:viewIn .5s var(--ease-emph) both;animation-delay:calc(var(--i,0)*90ms)}
.mc-circ.vide{--c:#5A6572;margin-top:var(--sp-4)}
.mc-circ-svg{display:block;width:100%;height:auto}
.mc-circ-train{animation:mcCircRoule 8s linear infinite}
@keyframes mcCircRoule{from{transform:translateX(-480px)}to{transform:translateX(660px)}}
.mc-circ.vide .mc-circ-train{animation:none;opacity:.35}
.mc-circ-pied{display:flex;flex-wrap:wrap;gap:6px var(--sp-3);align-items:baseline;padding:var(--sp-3) var(--sp-4)}
.mc-circ-pied b{font-family:var(--display);font-size:1rem;color:#fff}
.mc-circ-pied span{font-size:.8rem;color:#9AA3AE}
.mc-circ-rev{margin-left:auto;font-family:var(--mono);color:var(--jaune)!important}
/* runner : les deux nouveaux compteurs de bonus */
.rn-b.b-lent{background:rgba(0,168,143,.22);box-shadow:inset 0 0 0 1.5px #00A88F}
.rn-b.b-plan{background:rgba(0,100,176,.24);box-shadow:inset 0 0 0 1.5px #3E8FD4}
@media (prefers-reduced-motion:reduce){
  .mc-inc-svg *,.mc-sc-el,.mc-sc-new,.mc-sc-train,.mc-sc-metro,.mc-banniere-rame,
  .mc-booster-reflet,.mc-circ-train,.mc-seg--boutique button.on i{animation:none!important}
}
/* — Les maquettes dorées du plan — */
.mc-m3d-h{filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
  transition:transform var(--dur) var(--ease-back)}
.mc-m3d{overflow:visible}
/* — Un objet spécial posé sur une pièce — */
.md-objet{position:absolute;right:2px;top:1px;font-size:.92rem;line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));pointer-events:none;
  animation:mdObjet 2.4s ease-in-out infinite}
@keyframes mdObjet{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-2px) rotate(6deg)}}
.md-porte-objet .md-face{box-shadow:inset 0 0 0 2.5px rgba(255,206,0,.9),
  inset 0 -5px 0 rgba(0,0,0,.26),0 0 16px -3px var(--jaune),0 5px 12px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){ .md-objet{animation:none} }
.md-parcours{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:var(--sp-3)}
.md-etape{display:flex;align-items:center;gap:8px;padding:.45em .9em;border-radius:999px;
  font-size:.8rem;font-weight:700;color:var(--gris);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18);
  transition:all var(--dur) var(--ease-std)}
.md-etape i{width:9px;height:9px;border-radius:99px;background:var(--gris-2);flex:none}
.md-etape:hover{color:var(--faience);background:rgba(232,233,228,.07)}
.md-etape.on{background:var(--faience);color:var(--nuit);box-shadow:none}
.md-etape.on i{background:var(--bleu)}
.md-etape.lock{opacity:.4}

/* — Plaque de mission : émail de quai, volet qui bascule ————————————— */
.md-plaque{position:relative;overflow:hidden;border-radius:var(--r-xl);text-align:center;
  padding:calc(var(--sp-5) + 5px) var(--sp-5) var(--sp-5);margin-top:var(--sp-4);
  background:linear-gradient(155deg,#16324C,#0B1420);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.16),0 18px 44px rgba(0,0,0,.45)}
.md-bande{position:absolute;left:0;right:0;top:0;height:5px;display:flex}
.md-bande i{flex:1}
.md-plaque.flip{animation:mdFlip .6s var(--ease-emph) both;transform-origin:top center}
@keyframes mdFlip{0%{transform:perspective(760px) rotateX(-88deg);opacity:0}
  62%{transform:perspective(760px) rotateX(9deg);opacity:1}100%{transform:none}}
.md-haut{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.md-mode{color:var(--jaune)}
.md-nom{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.3rem,4.8vw,2.3rem);line-height:1.05;margin:.28em 0 .12em}
.md-sous{font-size:.88rem;color:#A8B0BA;margin:0}
.md-jauge{height:6px;border-radius:4px;background:rgba(232,233,228,.14);margin-top:var(--sp-4);overflow:hidden}
.md-jauge i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#83C491,var(--jaune));
  transition:width .55s var(--ease-out-expo);box-shadow:0 0 14px -2px var(--jaune)}
.md-chg{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--gris);align-self:center}
.lg-now{box-shadow:inset 0 0 0 2px var(--jaune)!important;background:rgba(255,206,0,.14);
  animation:mdNow 1.7s ease-in-out infinite}
@keyframes mdNow{0%,100%{box-shadow:inset 0 0 0 2px var(--jaune)}
  50%{box-shadow:inset 0 0 0 2px var(--jaune),0 0 18px -3px var(--jaune)}}
.lg-now i{color:var(--jaune)}
.lg-wait{opacity:.55}
.lg-off{opacity:.4}

/* — Message de refus ————————————————————————————————————————————————— */
.md-msg{min-height:1.7em;margin:var(--sp-3) 0 0;text-align:center;font-size:.94rem;font-weight:700;
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease-std),transform var(--dur) var(--ease-back)}
.md-msg.on{opacity:1;transform:none}
.md-msg.ko{color:#FF8A93}
.md-msg.ok{color:#8FE0B4}

/* — Le plateau ————————————————————————————————————————————————————— */
/* — Chantiers, rames à récolter et annonce du défi ————————————————— */
.md-travaux{position:absolute;left:0;top:0;z-index:4;pointer-events:none;
  transition:transform var(--dur) var(--ease-std),opacity .3s var(--ease-std)}
/* Le panneau occupe EXACTEMENT la case, aux mêmes 2 px et au même rayon que
   les tuiles : plus de cadre qui déborde ni de hachures qui mangent tout. */
.md-travaux i{position:absolute;inset:2px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#2A3038,#171C23);
  box-shadow:inset 0 0 0 2px #FFCE00, inset 0 2px 0 rgba(255,255,255,.16),
             0 5px 12px rgba(0,0,0,.45);
  display:grid;place-items:center}
/* Le blindage se lit d'un coup d'œil : un liseré de plus par épaisseur. */
.md-travaux[data-n="2"] i{box-shadow:inset 0 0 0 2px #E3051C,
  inset 0 0 0 4px #FFCE00, inset 0 2px 0 rgba(255,255,255,.16),0 5px 12px rgba(0,0,0,.5)}
.md-travaux[data-n="3"] i{box-shadow:inset 0 0 0 2px #E3051C,inset 0 0 0 4px #FFCE00,
  inset 0 0 0 6px #E3051C, inset 0 2px 0 rgba(255,255,255,.16),0 5px 12px rgba(0,0,0,.55)}
.md-travaux[data-n="4"] i{box-shadow:inset 0 0 0 2px #E3051C,inset 0 0 0 4px #FFCE00,
  inset 0 0 0 6px #E3051C,inset 0 0 0 8px #FFCE00,
  inset 0 2px 0 rgba(255,255,255,.16),0 7px 16px rgba(0,0,0,.6)}
.md-travaux[data-n="3"] svg,.md-travaux[data-n="4"] svg{width:54%;height:54%}
.md-travaux svg{width:62%;height:62%;display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
/* le bandeau rayé, discret, en bas de la case */
.md-travaux i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:repeating-linear-gradient(115deg,#FFCE00 0 7px,#0B0E13 7px 14px);
  opacity:.9}
/* ======================= LE MOBILIER DU SOUTERRAIN =======================
   Feux, tourniquets, distributeurs, écran SIEL, barrières. Même grammaire
   que le panneau de chantier : la case exacte, un cadre épais, un dessin
   cartoon au centre. Tout est animé — apparition, choc, disparition. */
.md-obs{position:absolute;left:0;top:0;z-index:5;pointer-events:none;
  transition:transform var(--dur) var(--ease-std),opacity .3s var(--ease-std)}
.md-obs i{position:absolute;inset:2px;border-radius:14px;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#2A3038,#151A21);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14),0 5px 12px rgba(0,0,0,.45)}
.md-obs svg{width:74%;height:74%;display:block;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.6))}
/* le feu : un halo rouge qui bat */
.md-feu i{box-shadow:inset 0 0 0 2.4px #E3051C,inset 0 2px 0 rgba(255,255,255,.14),
  0 0 18px -6px #E3051C,0 5px 12px rgba(0,0,0,.45)}
.md-feu svg{animation:mdFeuBat 1.5s ease-in-out infinite}
@keyframes mdFeuBat{0%,100%{filter:drop-shadow(0 0 0 rgba(227,5,28,0)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
  50%{filter:drop-shadow(0 0 8px rgba(227,5,28,.95)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}}
.md-feu-vert i{box-shadow:inset 0 0 0 2.4px #3ED07A,0 0 26px -4px #3ED07A,
  0 5px 12px rgba(0,0,0,.45)!important}
.md-feu-vert svg{animation:none}
/* le tourniquet : il tressaille, comme un tripode qu'on force */
.md-verrou i{box-shadow:inset 0 0 0 2.4px #A8B2BE,inset 0 2px 0 rgba(255,255,255,.14),
  0 5px 12px rgba(0,0,0,.45)}
.md-verrou svg{animation:mdVerrouTire 3.4s var(--ease-std) infinite}
@keyframes mdVerrouTire{0%,86%,100%{transform:rotate(0)}
  90%{transform:rotate(-9deg)}94%{transform:rotate(7deg)}}
/* le distributeur : son écran clignote rouge */
.md-distrib i{box-shadow:inset 0 0 0 2.4px #00814F,inset 0 2px 0 rgba(255,255,255,.14),
  0 5px 12px rgba(0,0,0,.45)}
.md-distrib i::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,rgba(227,5,28,.30),transparent 62%);
  animation:mdDistribCri 1.1s steps(2,end) infinite}
@keyframes mdDistribCri{0%,100%{opacity:.2}50%{opacity:.9}}
/* l'écran SIEL : le compte à rebours */
.md-siel i{background:linear-gradient(180deg,#1A2029,#0A0E14);
  box-shadow:inset 0 0 0 2.4px #F28E42,inset 0 2px 0 rgba(255,255,255,.12),
  0 0 20px -6px #F28E42,0 5px 12px rgba(0,0,0,.5)}
.md-siel svg{width:88%;height:88%}
.md-siel.cri i{box-shadow:inset 0 0 0 3px #E3051C,0 0 26px -4px #E3051C,
  0 5px 12px rgba(0,0,0,.5)}
.md-siel.cri i{animation:mdSielCri .62s var(--ease-std) infinite}
@keyframes mdSielCri{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.md-siel-mort i{box-shadow:inset 0 0 0 3px #E3051C!important;filter:grayscale(1) brightness(.5)}
/* apparition et disparition, communes */
.md-obs-in i{animation:mdObsIn .6s var(--ease-back) both}
@keyframes mdObsIn{from{opacity:0;transform:scale(.3) rotate(-18deg)}}
.md-obs-out{opacity:0;transition:opacity .34s var(--ease-std)}
.md-obs-out i{animation:mdObsOut .38s var(--ease-out-expo) forwards}
@keyframes mdObsOut{to{transform:scale(1.45) rotate(10deg);opacity:0;filter:brightness(2.4)}}
/* la barrière de chantier : une clôture plantée entre deux colonnes */
.md-barriere{position:absolute;left:0;top:0;z-index:6;pointer-events:none;
  transition:transform var(--dur) var(--ease-std)}
.md-barriere i{position:absolute;inset:0;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.65))}
.md-barriere svg{width:100%;height:100%;display:block}
.md-bar-choc i{animation:mdBarChoc .46s var(--ease-back)}
@keyframes mdBarChoc{0%,100%{filter:drop-shadow(0 3px 6px rgba(0,0,0,.65))}
  30%{filter:drop-shadow(0 0 14px rgba(255,206,0,.95)) brightness(1.5)}}
/* la station qui s'éteint : le noir total */
.md-noir{filter:brightness(.28) saturate(.4);transition:filter .9s var(--ease-std)}
@media (prefers-reduced-motion:reduce){
  .md-feu svg,.md-verrou svg,.md-distrib i::after,.md-siel.cri i,.md-obs-in i{animation:none}
}
.md-tv-choc{animation:mdTvChoc .42s var(--ease-back)}
@keyframes mdTvChoc{0%{filter:none}40%{filter:brightness(2.4)}100%{filter:none}}
.md-tv-out{animation:mdTvOut .38s var(--ease-out-expo) forwards}
@keyframes mdTvOut{to{opacity:0}}
.md-tv-out i{animation:mdTvOutIn .38s var(--ease-out-expo) forwards}
@keyframes mdTvOutIn{to{transform:scale(.6) rotate(-12deg);opacity:0}}
.md-rec .md-face{background:transparent !important;box-shadow:none !important;padding:2px}
.md-rec{animation:mdRecPulse 2.4s ease-in-out infinite}
@keyframes mdRecPulse{0%,100%{filter:drop-shadow(0 0 3px rgba(255,206,0,.5))}
  50%{filter:drop-shadow(0 0 12px rgba(255,206,0,.95))}}
.md-rec-out{animation:mdRecOut .42s var(--ease-out-expo) forwards}
@keyframes mdRecOut{to{opacity:0;transform:translateY(26px) scale(.5)}}

.md-defi{position:absolute;inset:0;z-index:30;display:grid;place-items:center;
  background:rgba(6,9,13,.72);backdrop-filter:blur(6px);opacity:0;
  transition:opacity .34s var(--ease-std);cursor:pointer}
.md-defi.on{opacity:1}
.md-defi-c{max-width:420px;text-align:center;padding:var(--sp-6) var(--sp-5);
  border-radius:var(--r-xl);background:linear-gradient(165deg,#16222F,#0A121B);
  box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.35),0 30px 60px rgba(0,0,0,.6);
  transform:scale(.9);transition:transform .42s var(--ease-back)}
.md-defi.on .md-defi-c{transform:none}
.md-defi-eyebrow{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--jaune)}
.md-defi-ico{font-size:2.8rem;line-height:1;margin:var(--sp-3) 0}
.md-defi-c b{display:block;font-family:var(--display);font-weight:800;
  text-transform:uppercase;font-size:1.35rem;letter-spacing:-.01em}
.md-defi-c p{margin:.6em 0 0;color:#B9BFC7;font-size:.95rem;line-height:1.5}
.md-defi-coups{display:inline-block;margin-top:var(--sp-4);font-family:var(--mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
@media (prefers-reduced-motion:reduce){ .md-rec,.md-tv-choc{animation:none} }
/* ============================ SNAKE MÉTRO ================================ */
.snk-perso{max-width:940px;margin:0 auto}
.snk-eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--jaune);margin:0}
.snk-titre{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:-.02em;margin:.15em 0 var(--sp-4)}
.snk-apercu{position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12),0 22px 44px rgba(0,0,0,.45);
  background:#0A121B}
.snk-cv-apercu{display:block;width:100%;height:clamp(150px,26vw,240px)}
.snk-recs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--sp-3);margin-top:var(--sp-4)}
.snk-rec{border-radius:14px;padding:var(--sp-3);text-align:center;
  background:rgba(232,233,228,.05);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.snk-rec b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem}
.snk-rec span{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris)}
.snk-bloc{margin-top:var(--sp-6)}
.snk-lab{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gris);margin:0 0 var(--sp-3)}
.snk-note{font-size:.82rem;color:#98A0AB;margin:-6px 0 var(--sp-3)}
.snk-lignes{display:flex;flex-wrap:wrap;gap:8px}
.snk-l{width:44px;height:44px;border-radius:999px;background:var(--c);color:var(--i);
  font-family:var(--display);font-weight:800;font-size:1rem;flex:none;
  box-shadow:0 4px 12px rgba(0,0,0,.4);opacity:.55;
  transition:transform var(--dur) var(--ease-back),opacity var(--dur) var(--ease-std),
             box-shadow var(--dur) var(--ease-std)}
.snk-l:hover{transform:translateY(-4px) scale(1.06);opacity:.85}
.snk-l.on{opacity:1;transform:scale(1.12);
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--c),0 8px 20px rgba(0,0,0,.5)}
.snk-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.snk-c{text-align:left;border-radius:14px;padding:var(--sp-3) var(--sp-4);
  background:rgba(232,233,228,.04);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std),
             background var(--dur) var(--ease-std)}
.snk-c:hover:not([disabled]){transform:translateY(-3px);background:rgba(232,233,228,.09)}
.snk-c.on{box-shadow:inset 0 0 0 2.5px var(--jaune);background:rgba(255,206,0,.10)}
.snk-c.lock{opacity:.45;cursor:not-allowed}
.snk-c b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem}
.snk-c small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);margin-top:3px}
.snk-succes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-3)}
.snk-s{border-radius:13px;padding:var(--sp-3);background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.09);opacity:.55}
.snk-s.on{opacity:1;box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.5);background:rgba(255,206,0,.08)}
.snk-s b{display:block;font-family:var(--display);font-weight:700;font-size:.9rem}
.snk-s small{display:block;font-size:.72rem;color:#98A0AB;margin-top:2px}
.snk-go{display:flex;justify-content:center;margin-top:var(--sp-7)}
.snk-lancer{font-size:1.15rem;padding:1em 2.4em}

.snk-jeu{max-width:1080px;margin:0 auto}
.snk-hud{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-2);margin-bottom:var(--sp-3)}
.snk-h{border-radius:13px;padding:var(--sp-2) var(--sp-3);text-align:center;
  background:rgba(16,21,29,.92);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.snk-h b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.6vw,1.4rem);
  line-height:1.1;font-variant-numeric:tabular-nums}
.snk-h span{font-family:var(--mono);font-size:.55rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);white-space:nowrap}
.snk-h.chaud b{color:var(--jaune);animation:snkChaud .5s var(--ease-back)}
#snkh-ligne b{color:var(--c,#E8E9E4)}
#snkh-ligne{box-shadow:inset 0 0 0 2px var(--c,rgba(232,233,228,.10))}
#snkh-ligne.bascule{animation:snkChaud .48s var(--ease-back)}
#snkh-tick b{color:var(--jaune)}
#snkh-tick.vide b{color:#5B6572}
#snkh-tick.bascule{animation:snkChaud .48s var(--ease-back)}
/* l'objectif du moment */
.snk-obj{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  border-radius:13px;padding:var(--sp-2) var(--sp-4);margin-bottom:var(--sp-3);
  background:rgba(0,129,79,.14);box-shadow:inset 0 0 0 1.5px rgba(0,129,79,.45)}
.snk-obj.neuf{animation:snkChaud .6s var(--ease-back)}
.snk-obj-t{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:#7FD3AE;white-space:nowrap}
.snk-obj-x{font-family:var(--display);font-weight:700;font-size:.95rem;flex:none}
.snk-obj-j{flex:1 1 110px;min-width:80px;height:8px;border-radius:999px;overflow:hidden;
  background:rgba(232,233,228,.12)}
.snk-obj-j i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#00814F,#7FD3AE);transition:width .28s var(--ease-std)}
.snk-obj-p{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--gris);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.snk-regle{font-size:.86rem;color:#B9BFC7;text-align:center;max-width:60ch;
  margin:var(--sp-4) auto 0;line-height:1.5}
@keyframes snkChaud{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.snk-cadre{position:relative;border-radius:var(--r-l);overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14),0 26px 52px rgba(0,0,0,.5);
  background:#0A121B;touch-action:none}
.snk-cv{display:block;width:100%;height:min(62vh,560px);cursor:crosshair}
.snk-voile{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,transparent 40%,rgba(227,5,28,.30) 100%);
  transition:opacity .25s var(--ease-std)}
.snk-voile.on{opacity:1;animation:snkAlerte .28s steps(2) infinite}
@keyframes snkAlerte{0%{filter:none}100%{filter:brightness(1.5)}}
/* le ticket de secours : le cadre s'allume en jaune */
.snk-cadre.secours{animation:snkSecours .9s var(--ease-std)}
@keyframes snkSecours{
  0%{box-shadow:inset 0 0 0 7px rgba(255,206,0,.95),0 26px 52px rgba(0,0,0,.5)}
  100%{box-shadow:inset 0 0 0 2px rgba(232,233,228,.14),0 26px 52px rgba(0,0,0,.5)}}
/* la pause */
.snk-pausebtn{position:absolute;top:10px;right:10px;width:40px;height:40px;
  border-radius:12px;font-size:1rem;color:#E8E9E4;background:rgba(11,14,19,.72);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.22);z-index:2}
.snk-pausebtn:hover{background:rgba(11,14,19,.94)}
.snk-pause{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  background:rgba(6,9,14,.80);z-index:3;text-align:center}
.snk-pause.on{display:flex;animation:viewIn var(--dur) var(--ease-emph) both}
.snk-pause-in{padding:var(--sp-5);max-width:420px}
.snk-pause-t{font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,3.4vw,1.7rem);margin:0 0 .3em}
.snk-pause-d{color:#A8B0BA;margin:0 0 var(--sp-4);font-size:.88rem}
.snk-pad{display:none;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,64px);
  justify-content:center;gap:8px;margin-top:var(--sp-4)}
.snk-p{border-radius:16px;font-size:1.4rem;background:rgba(232,233,228,.08);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18);touch-action:none;user-select:none}
.snk-p:active{background:var(--jaune);color:#0B0E13;transform:scale(.94)}
.snk-p--haut{grid-column:2;grid-row:1}
.snk-p--gauche{grid-column:1;grid-row:2}
.snk-p--bas{grid-column:2;grid-row:2}
.snk-p--droite{grid-column:3;grid-row:2}
.snk-aide{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);text-align:center;margin-top:var(--sp-3)}
@media (max-width:820px), (pointer:coarse){
  .snk-pad{display:grid}
  .snk-cv{height:min(52vh,440px)}
  .snk-hud{grid-template-columns:repeat(3,1fr)}
}
.snk-fin{max-width:660px;margin:0 auto;text-align:center;
  animation:viewIn var(--dur-slow) var(--ease-emph) both}
.snk-fin-plaque{display:inline-flex;align-items:center;gap:var(--sp-3);
  background:#662483;color:#fff;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.2rem,3.4vw,1.9rem);
  padding:.5em 1.2em;border-radius:999px;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 6px #662483,0 12px 34px rgba(0,0,0,.5)}
.snk-fin-mode{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris);margin-top:var(--sp-3)}
.snk-cause{color:#A8B0BA;margin-top:var(--sp-4)}
.snk-record{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--jaune);
  margin-top:var(--sp-4);animation:snkChaud .8s var(--ease-back)}
.snk-fin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:var(--sp-3);margin-top:var(--sp-5)}
.snk-fs{border-radius:14px;padding:var(--sp-4) var(--sp-3);
  background:rgba(232,233,228,.05);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.snk-fs b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1}
.snk-fs span{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
@media (prefers-reduced-motion:reduce){
  .snk-voile.on{animation:none} .snk-record,.snk-h.chaud b{animation:none}
  .snk-cadre.secours,.snk-obj.neuf,.snk-pause.on{animation:none}
}
.md-board{position:relative;margin:var(--sp-4) auto 0;max-width:540px;width:100%;
  border-radius:var(--r-l);overflow:hidden;touch-action:none;--step:48px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px var(--step)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px var(--step)),
    radial-gradient(120% 80% at 50% -20%,#18222E,transparent 60%),
    linear-gradient(180deg,#0D131B,#070A0F);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.14),inset 0 26px 60px rgba(0,0,0,.6),
             inset 0 -18px 40px rgba(0,0,0,.5),0 26px 60px rgba(0,0,0,.45)}
.md-board::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.05) 50%,transparent 58%);
  animation:mdSweep 7s linear infinite}
@keyframes mdSweep{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.md-shuffle{animation:mdShuffle .46s var(--ease-back)}
@keyframes mdShuffle{0%{transform:scale(1)}45%{transform:scale(.94) rotate(-1deg)}100%{transform:scale(1)}}

.md-tile{position:absolute;left:0;top:0;cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:transform .26s var(--ease-emph);will-change:transform;z-index:1}
.md-face{position:absolute;inset:2px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;overflow:hidden;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.42),inset 0 -5px 0 rgba(0,0,0,.26),
             0 5px 12px rgba(0,0,0,.45);
  transition:transform .28s var(--ease-back),opacity .24s linear,
             box-shadow var(--dur) var(--ease-std),filter var(--dur) var(--ease-std)}
.md-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.4),rgba(255,255,255,.06) 46%,transparent 64%)}
.md-face span{position:relative;z-index:1;font-size:clamp(.8rem,2.9vw,1.15rem);
  pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.md-tile:hover{z-index:4}
.md-tile:hover .md-face{filter:brightness(1.12) saturate(1.06);transform:translateY(-2px) scale(1.04)}
.md-tile.md-sel{z-index:6}
.md-tile.md-sel .md-face{transform:scale(1.09);
  box-shadow:0 0 0 3px #fff,0 0 28px -2px #fff,inset 0 -5px 0 rgba(0,0,0,.26)}
.md-tile.md-sel::before{content:"";position:absolute;inset:-5px;border-radius:19px;pointer-events:none;
  border:2px dashed rgba(255,255,255,.9);animation:mdSpin 3.6s linear infinite}
@keyframes mdSpin{to{transform:rotate(360deg)}}
.md-tile.md-gone .md-face{transform:scale(.12) rotate(26deg);opacity:0}
.md-tile.md-ko .md-face{animation:mdKo .45s var(--ease-std);
  box-shadow:0 0 0 3px #FF8A93,inset 0 -5px 0 rgba(0,0,0,.26)}
@keyframes mdKo{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(5px)}
  30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.md-tile.md-pop .md-face{animation:mdPop .64s var(--ease-back) both}
@keyframes mdPop{0%{transform:scale(0) rotate(-90deg)}60%{transform:scale(1.22) rotate(8deg)}100%{transform:none}}

/* — Jokers ————————————————————————————————————————————————————————— */
.md-rame .md-face{box-shadow:inset 0 0 0 3px #fff,inset 0 -5px 0 rgba(0,0,0,.26),0 5px 14px rgba(0,0,0,.5)}
.md-bar{position:absolute;left:10%;right:10%;height:4px;bottom:15%;border-radius:3px;
  background:var(--cr-blanc);opacity:.92;animation:mdBar 1.3s var(--ease-std) infinite}
.md-bar.v{left:50%;right:auto;top:10%;bottom:10%;width:4px;height:auto;margin-left:-2px;
  animation:mdBarV 1.3s var(--ease-std) infinite}
@keyframes mdBar{0%,100%{transform:translateX(-26%)}50%{transform:translateX(26%)}}
@keyframes mdBarV{0%,100%{transform:translateY(-26%)}50%{transform:translateY(26%)}}
.md-auto .md-face{background:linear-gradient(135deg,#662483,#0064B0)!important;color:#fff!important;
  box-shadow:inset 0 0 0 3px #FFCE00,inset 0 -5px 0 rgba(0,0,0,.3),0 0 22px -4px #FFCE00;
  animation:mdAutoPulse 1.15s ease-in-out infinite}
@keyframes mdAutoPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4)}}
.md-corr .md-face{box-shadow:inset 0 0 0 3px #fff,inset 0 -5px 0 rgba(0,0,0,.26)}
.md-cross{position:absolute;left:50%;top:12%;bottom:12%;width:3px;margin-left:-1.5px;
  background:var(--cr-blanc);opacity:.92;border-radius:2px}
.md-cross::after{content:"";position:absolute;top:50%;left:-13px;right:-13px;height:3px;
  margin-top:-1.5px;background:var(--cr-blanc);opacity:.92;border-radius:2px}

/* — Étincelles, onde, points, rame express ————————————————————————— */
.md-part{position:absolute;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:7;
  margin:-3.5px 0 0 -3.5px;animation:mdPart .64s var(--ease-out-expo) forwards}
@keyframes mdPart{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.25) rotate(200deg)}}
.md-onde{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid;
  pointer-events:none;z-index:6;margin:-6px 0 0 -6px;animation:mdOnde .58s var(--ease-out-expo) forwards}
@keyframes mdOnde{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(6.5)}}
.md-gain{position:absolute;z-index:9;pointer-events:none;
  font-family:var(--mono);font-weight:600;font-size:1.05rem;color:#fff;white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 18px rgba(255,206,0,.8);
  animation:mdGain 1s var(--ease-out-expo) forwards}
@keyframes mdGain{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  22%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.md-express{position:absolute;left:0;width:40px;border-radius:10px;z-index:8;pointer-events:none;
  box-shadow:0 0 30px -2px #fff,inset 0 0 0 2px rgba(255,255,255,.9);opacity:.95}
.md-express.go{animation:mdExpress .74s var(--ease-std) forwards}
@keyframes mdExpress{0%{transform:translateX(-60px)}100%{transform:translateX(100%)}}

/* — Badge de cascade : plus la chaîne est longue, plus il crie ————————— */
.md-combo{position:absolute;left:50%;top:13%;transform:translateX(-50%);z-index:10;pointer-events:none;
  font-family:var(--display);font-weight:800;white-space:nowrap;
  padding:.3em .85em;border-radius:999px;background:rgba(11,14,19,.84);
  animation:mdCombo .96s var(--ease-back) forwards}
@keyframes mdCombo{0%{opacity:0;transform:translateX(-50%) scale(.4)}
  30%{opacity:1;transform:translateX(-50%) scale(1.15)}
  70%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(1)}}
.md-combo.n2{color:#8FE0B4;font-size:1.15rem}
.md-combo.n3{color:#FFCE00;font-size:1.35rem;box-shadow:0 0 26px -4px #FFCE00}
.md-combo.n4{color:#FFB300;font-size:1.6rem;box-shadow:0 0 34px -4px #FFB300}
.md-combo.n5{color:#fff;font-size:1.85rem;background:linear-gradient(90deg,#E3051C,#662483);
  box-shadow:0 0 44px -4px #C04191}

/* — Avancement chiffré (aucune ligne nommée) et perte de vie —————————— */
.md-avance{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--jaune);margin:var(--sp-3) 0 0}
.md-degat{animation:mdDegat .5s var(--ease-std)}
@keyframes mdDegat{0%,100%{box-shadow:inset 0 0 0 1px rgba(232,233,228,.14),inset 0 26px 60px rgba(0,0,0,.6),
    inset 0 -18px 40px rgba(0,0,0,.5),0 26px 60px rgba(0,0,0,.45)}
  40%{box-shadow:inset 0 0 0 3px #E3051C,inset 0 0 70px rgba(227,5,28,.5),0 26px 60px rgba(0,0,0,.45)}}
.md-cause{text-align:center;color:#FF8A93;font-weight:700;font-size:.95rem;margin:0 0 var(--sp-4)}

/* — Bandeau des lignes, groupé par mode de transport —————————————————— */
.hero-strip--modes{display:flex;flex-wrap:wrap;gap:var(--sp-5);justify-content:center;align-items:flex-start}
.strip-mode{display:flex;flex-direction:column;gap:8px;align-items:center}
.strip-lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris)}
.strip-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:min(520px,90vw)}

/* ==========================================================================
   LOT 10 — MODE AVANCÉ : paliers, incidents, feuille de route
   ========================================================================== */
.av-menu{text-align:center;padding:var(--sp-5) var(--sp-3)}
.av-titre{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.6rem,5vw,2.4rem);margin:.15em 0}
.av-paliers{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.av-palier{position:relative;overflow:hidden;text-align:left;border-radius:var(--r-l);
  padding:var(--sp-4) var(--sp-4) var(--sp-4) 58px;
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std)}
.av-palier::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c)}
.av-palier:hover{transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.26),0 20px 44px rgba(0,0,0,.5)}
.av-palier.on{box-shadow:inset 0 0 0 2px var(--c),0 16px 36px rgba(0,0,0,.45)}
.av-palier.lock{opacity:.5}
.av-num{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:999px;
  display:grid;place-items:center;background:var(--c);color:#0B0E13;
  font-family:var(--display);font-weight:800;font-size:.95rem}
.av-palier b{display:block;font-family:var(--display);font-weight:800;font-size:1.15rem}
.av-palier small{display:block;color:#9AA3AE;font-size:.8rem;line-height:1.45;margin-top:.3em}
.av-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.av-tags i{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);padding:.25em .55em;border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.18)}
.av-need{display:block;margin-top:var(--sp-3);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--jaune)}

/* — Le trajet demandé — */
.av-mission{margin-top:var(--sp-4);border-radius:var(--r-xl);padding:var(--sp-5);
  background:linear-gradient(150deg,#16324C,#0B1420);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.16)}
.av-od{display:flex;align-items:center;justify-content:center;gap:var(--sp-5);flex-wrap:wrap}
.av-pt{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.av-pt span{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.av-pt b{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,3.4vw,1.5rem);
  text-transform:uppercase;letter-spacing:-.01em}
.av-dot{width:14px;height:14px;border-radius:999px;display:block}
.av-dot.dep{background:#83C491;box-shadow:0 0 0 4px rgba(131,196,145,.25)}
.av-dot.arr{background:#E3051C;box-shadow:0 0 0 4px rgba(227,5,28,.25)}
.av-fleche{font-size:1.6rem;color:var(--gris)}

/* — L'agent et sa bulle — */
.av-alerte{display:flex;align-items:flex-end;gap:var(--sp-3);margin-top:var(--sp-4);
  animation:avEntre .5s var(--ease-back) both}
@keyframes avEntre{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.av-agent svg{display:block;animation:avDodeline 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes avDodeline{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.av-bulle{position:relative;flex:1;background:var(--faience);color:var(--nuit);
  border-radius:16px;padding:.85em 1.1em;font-family:var(--display);font-weight:700;font-size:1rem;
  box-shadow:0 12px 26px rgba(0,0,0,.4)}
.av-bulle::after{content:"";position:absolute;left:-9px;bottom:14px;width:0;height:0;
  border:9px solid transparent;border-right-color:var(--faience);border-left:0}
.av-incidents{display:grid;gap:var(--sp-2);margin-top:var(--sp-3)}
.av-incident{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-m);background:rgba(227,5,28,.1);
  box-shadow:inset 0 0 0 1px rgba(227,5,28,.35);animation:avEntre .5s var(--ease-back) both}
.av-ico{font-size:1.5rem;line-height:1}
.av-incident b{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:#FF8A93}
.av-incident p{margin:.2em 0 0;font-weight:700;font-size:.95rem}
.av-incident small{display:block;margin-top:.25em;color:#9AA3AE;font-size:.78rem;line-height:1.45}

/* — Feuille de route — */
.av-feuille{margin-top:var(--sp-5)}
.av-suite{margin-top:var(--sp-3);position:relative}
.av-etape{display:flex;align-items:center;gap:10px;padding:.5em .8em;border-radius:12px;
  background:rgba(232,233,228,.045);margin-bottom:6px;
  animation:avEntre .35s var(--ease-back) both}
.av-etape b{font-family:var(--display);font-weight:800;font-size:.98rem}
.av-txt{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.av-etape--dep{box-shadow:inset 0 0 0 1.5px rgba(131,196,145,.45)}
.av-etape--todo{opacity:.55;box-shadow:inset 0 0 0 1.5px rgba(227,5,28,.3)}
.av-undo{margin-left:auto;padding:.3em .7em}
.av-pied{font-size:1.05rem}

/* — Sélection de ligne puis d'arrêt — */
.av-choix{margin-top:var(--sp-5)}
.av-lignes{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.av-ligne{display:inline-flex;align-items:center;gap:8px;padding:.5em .9em;border-radius:999px;
  font-size:.85rem;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2);
  transition:transform var(--dur) var(--ease-back),background var(--dur) var(--ease-std)}
.av-ligne:hover{transform:translateY(-2px);background:rgba(232,233,228,.09)}
.av-ligne.ko{opacity:.32;text-decoration:line-through;pointer-events:none}
.av-ligne--pied{box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.5);color:var(--jaune)}
.av-ruban{display:flex;gap:4px;overflow-x:auto;padding:var(--sp-3) 2px;margin-top:var(--sp-3);
  scrollbar-width:thin}
.av-ruban::before{content:"";position:absolute}
.av-arret{flex:none;padding:.45em .8em;border-radius:10px;font-size:.78rem;white-space:nowrap;
  background:rgba(232,233,228,.06);box-shadow:inset 0 0 0 1px rgba(232,233,228,.14);
  transition:all var(--dur) var(--ease-std)}
.av-arret:hover{background:var(--c);color:#fff;transform:translateY(-2px)}
.av-arret.ici{background:var(--faience);color:var(--nuit);font-weight:800}
.av-arret.ferme{opacity:.4;text-decoration:line-through;
  box-shadow:inset 0 0 0 1.5px rgba(227,5,28,.5)}
.av-arret.hors{opacity:.3;pointer-events:none}
.av-arrive{padding:var(--sp-4);border-radius:var(--r-m);text-align:center;font-weight:700;
  background:rgba(0,129,79,.16);box-shadow:inset 0 0 0 1px rgba(131,196,145,.4)}

/* — Résultat — */
.av-resultat{display:flex;align-items:flex-end;gap:var(--sp-3);margin-top:var(--sp-5);
  animation:avEntre .5s var(--ease-back) both;position:relative}
.av-resultat.gagne .av-bulle{background:#CFF0DA}
.av-ref{margin-top:var(--sp-5);padding:var(--sp-4);border-radius:var(--r-l);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12)}
@media (max-width:640px){
  .av-od{gap:var(--sp-3)} .av-fleche{transform:rotate(90deg)}
}

/* ==========================================================================
   LOT 11 — Progression, badges, classement cartoon
   ========================================================================== */
.pr-fanfare{position:fixed;left:50%;top:18%;translate:-50% 0;z-index:920;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:1em 1.6em;border-radius:20px;
  background:linear-gradient(150deg,rgba(11,14,19,.96),rgba(20,25,34,.96));
  box-shadow:inset 0 0 0 2px var(--c),0 0 50px -8px var(--c),0 26px 60px rgba(0,0,0,.6);
  animation:prFan 2.6s var(--ease-out-expo) forwards}
.pr-fanfare b{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--c)}
.pr-fanfare span{font-size:.85rem;color:#C6CCD4}
@keyframes prFan{0%{opacity:0;transform:scale(.7) translateY(14px)}
  12%{opacity:1;transform:scale(1.06)}20%{transform:scale(1)}
  80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1) translateY(-22px)}}

/* — Carte du joueur — */
.lb-moi{margin-bottom:var(--sp-5)}
.lb-carte{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-l);margin-bottom:8px;background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.09);
  animation:viewIn .45s var(--ease-emph) both;
  transition:transform var(--dur) var(--ease-std),background var(--dur) var(--ease-std)}
.lb-carte:hover{transform:translateX(4px);background:rgba(232,233,228,.08)}
.lb-carte--moi{flex-wrap:wrap;padding:var(--sp-5);
  background:linear-gradient(150deg,#182231,#0C1119);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.35),0 18px 44px rgba(0,0,0,.45)}
.lb-carte.moi{box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.1)}
.lb-av{width:46px;height:46px;border-radius:999px;display:grid;place-items:center;font-size:1.5rem;
  background:rgba(232,233,228,.08);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2);flex:none}
.lb-av--pod{width:54px;height:54px;font-size:1.7rem}
.lb-info{flex:1;min-width:180px}
.lb-info b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem}
.lb-titre{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--jaune)}
.lb-niv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);
  margin-top:var(--sp-3);font-family:var(--mono);font-size:.72rem}
.lb-niv small{color:var(--gris)}
.lb-xp{height:10px;border-radius:99px;background:rgba(232,233,228,.1);overflow:hidden;margin-top:6px}
.lb-xp i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#83C491,var(--jaune));
  transition:width .8s var(--ease-out-expo);box-shadow:0 0 16px -2px var(--jaune)}
.lb-next{margin:var(--sp-3) 0 0;font-size:.8rem;color:#9AA3AE}
.lb-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--sp-3);
  width:100%;margin-top:var(--sp-4)}
.lb-chiffres div{padding:var(--sp-3);border-radius:var(--r-m);background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);text-align:center}
.lb-chiffres b{display:block;font-family:var(--mono);font-size:1.05rem}
.lb-chiffres span{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.lb-rang{font-family:var(--display);font-weight:800;font-size:1.05rem;width:2em;text-align:center;color:var(--gris)}
.lb-pts{font-family:var(--mono);font-weight:600;font-size:1rem;margin-left:auto}
.lb-up{color:#8FE0B4;font-family:var(--mono);font-size:.7rem}

/* — Invité — */
.lb-invite{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-5);
  border-radius:var(--r-l);background:rgba(0,100,176,.14);
  box-shadow:inset 0 0 0 1px rgba(62,143,212,.35)}
.lb-inv-ico{font-size:2rem}
.lb-invite b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.lb-invite p{margin:.2em 0 0;font-size:.85rem;color:#B9BFC7}
.lb-invite .btn{margin-left:auto}

/* — Badges — */
.lb-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-3)}
.lb-badge{display:flex;flex-direction:column;align-items:center;gap:3px;width:82px;padding:.6em .3em;
  border-radius:14px;background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);opacity:.45;
  transition:transform var(--dur) var(--ease-back),opacity var(--dur) var(--ease-std)}
.lb-badge i{font-style:normal;font-size:1.5rem;filter:grayscale(1)}
.lb-badge small{font-size:.58rem;text-align:center;line-height:1.2;color:var(--gris)}
.lb-badge.eu{opacity:1;box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.5);background:rgba(255,206,0,.08)}
.lb-badge.eu i{filter:none}
.lb-badge.eu small{color:var(--faience)}
.lb-badge:hover{transform:translateY(-4px) scale(1.06)}

/* — Sélecteurs — */
.lb-choix{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-4)}
.lb-pick{padding:.45em .9em;border-radius:999px;font-size:.8rem;font-weight:700;color:var(--gris);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.18);transition:all var(--dur) var(--ease-std)}
.lb-pick:hover{color:var(--faience);background:rgba(232,233,228,.07)}
.lb-pick.on{background:var(--faience);color:var(--nuit);box-shadow:none}

/* — Podium — */
.lb-podium{display:flex;align-items:flex-end;justify-content:center;gap:var(--sp-3);
  margin:var(--sp-6) 0 var(--sp-5);flex-wrap:wrap}
.lb-marche{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(180px,29vw);
  animation:lbMonte .7s var(--ease-back) both}
@keyframes lbMonte{from{opacity:0;transform:translateY(40px) scale(.85)}to{opacity:1;transform:none}}
.lb-marche b{font-family:var(--display);font-weight:800;font-size:.98rem;text-align:center;
  line-height:1.15;max-width:100%;overflow-wrap:anywhere}
.lb-marche .lb-pts{margin:0;font-size:.9rem;color:var(--jaune)}
.lb-marche small{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--gris)}
.lb-tro{animation:lbFlotte 3.2s ease-in-out infinite}
@keyframes lbFlotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.lb-socle{width:100%;display:grid;place-items:center;font-family:var(--display);font-weight:800;
  font-size:1.5rem;color:rgba(11,14,19,.45);border-radius:14px 14px 0 0;margin-top:6px}
.lb-marche.r1 .lb-socle{height:96px;background:linear-gradient(180deg,#FFCE00,#B98900)}
.lb-marche.r2 .lb-socle{height:70px;background:linear-gradient(180deg,#D8DEE6,#8A93A0)}
.lb-marche.r3 .lb-socle{height:54px;background:linear-gradient(180deg,#E0A46A,#9C6B3C)}
.lb-marche.moi b{color:var(--jaune)}
.lb-marche.r1{order:2}.lb-marche.r2{order:1}.lb-marche.r3{order:3}
.lb-cartes{margin-top:var(--sp-4)}
.lb-conseil{margin-top:var(--sp-4);padding:var(--sp-4);border-radius:var(--r-l);
  background:rgba(255,206,0,.09);box-shadow:inset 0 0 0 1px rgba(255,206,0,.35)}
.lb-conseil b{font-family:var(--display);font-weight:800;font-size:1rem}
.lb-conseil p{margin:.25em 0 0;font-size:.86rem;color:#C6CCD4}
@media (max-width:560px){
  .lb-marche{width:31vw} .lb-av--pod{width:42px;height:42px;font-size:1.3rem}
  .lb-marche b{font-size:.82rem}
}
.hd-niv{font-family:var(--mono);font-size:.7rem;padding:.15em .5em;border-radius:8px;
  background:rgba(255,206,0,.18);color:var(--jaune);margin-right:6px}

/* ==========================================================================
   LOT 8 — METRO RUNNER PARIS : scène et interface
   ========================================================================== */
.rn-accueil{text-align:center;padding:var(--sp-5) var(--sp-3)}
.rn-titre{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(2rem,7vw,3.6rem);line-height:.95;margin:.1em 0;
  background:linear-gradient(100deg,var(--cr-blanc),#FFCE00 40%,#E3051C 78%,var(--cr-blanc));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 22px rgba(227,5,28,.35))}
.rn-regles{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.rn-regle{padding:var(--sp-4);border-radius:var(--r-l);text-align:left;
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1)}
.rn-regle span{font-size:1.6rem;display:block}
.rn-regle b{display:block;font-family:var(--display);font-weight:800;margin-top:.25em}
.rn-regle small{display:block;color:#9AA3AE;font-size:.8rem;line-height:1.45;margin-top:.2em}
.rn-lignes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--sp-3)}
.rn-lchoix{width:46px;height:46px;border-radius:999px;background:var(--c);color:var(--i);
  font-family:var(--display);font-weight:800;font-size:1rem;
  box-shadow:0 6px 16px rgba(0,0,0,.45),inset 0 -3px 0 rgba(0,0,0,.22);
  transition:transform var(--dur) var(--ease-back)}
.rn-lchoix:hover{transform:translateY(-5px) scale(1.12)}

/* — La scène — */
.rn-scene{position:relative;margin-top:var(--sp-4);border-radius:var(--r-xl);overflow:hidden;
  background:#05070A;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer;
  height:clamp(400px,68vh,760px);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14),0 30px 70px rgba(0,0,0,.55)}
.rn-cv{display:block;width:100%;height:100%}

/* — Interface par-dessus — */
.rn-hud{position:absolute;inset:0;pointer-events:none;padding:var(--sp-4);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.rn-haut{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.rn-coeurs{display:flex;gap:6px}
.rn-coeur{width:24px;height:22px;position:relative;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  transition:transform var(--dur) var(--ease-back),opacity var(--dur)}
.rn-coeur::before,.rn-coeur::after{content:"";position:absolute;width:12px;height:19px;
  border-radius:12px 12px 0 0;background:#E3051C;top:0}
.rn-coeur::before{left:12px;transform:rotate(-45deg);transform-origin:0 100%}
.rn-coeur::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
.rn-coeur.vide{opacity:.30;filter:grayscale(1) brightness(1.7)}
.rn-coeur.neuf{animation:rnCoeur .7s var(--ease-back)}
@keyframes rnCoeur{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
.rn-chip{display:inline-flex;align-items:center;gap:7px;padding:.4em .8em;border-radius:999px;
  background:rgba(11,14,19,.72);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.4);font-family:var(--mono);font-weight:600}
.rn-chip.bump{animation:rnBump .45s var(--ease-back)}
@keyframes rnBump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}
.rn-score{margin-left:auto;text-align:right;line-height:1}
.rn-score b{display:block;font-family:var(--mono);font-weight:600;font-size:clamp(1.3rem,4vw,2rem);
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.9);font-variant-numeric:tabular-nums}
.rn-score small{font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;color:#9AA3AE}

.rn-ligne{display:flex;align-items:center;gap:10px;padding:.3em .8em .3em .3em;flex:none;
  border-radius:999px;background:rgba(11,14,19,.72);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 2px var(--c);transition:box-shadow var(--dur)}
.rn-ligne b{font-family:var(--display);font-weight:800;font-size:.92rem}
.rn-past{width:30px;height:30px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1rem}
.rn-ligne.change{animation:rnLigne 1s var(--ease-back)}
@keyframes rnLigne{0%{transform:scale(.6) rotate(-12deg);box-shadow:0 0 0 0 var(--c)}
  40%{transform:scale(1.25) rotate(4deg);box-shadow:0 0 44px 6px var(--c)}
  100%{transform:scale(1);box-shadow:inset 0 0 0 2px var(--c)}}

.rn-combo{position:absolute;left:50%;top:22%;translate:-50% 0;opacity:0;
  font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,3.6vw,1.7rem);
  color:#FFCE00;text-shadow:0 3px 0 #7A5A00,0 0 30px rgba(255,206,0,.7);
  transition:opacity var(--dur) var(--ease-std)}
.rn-combo.on{opacity:1;animation:rnCombo .5s var(--ease-back)}
@keyframes rnCombo{0%{transform:translateX(-50%) scale(.6)}55%{transform:translateX(-50%) scale(1.2)}
  100%{transform:translateX(-50%) scale(1)}}
.rn-bonus{position:absolute;left:var(--sp-4);bottom:var(--sp-4);display:flex;gap:6px;flex-wrap:wrap}
.rn-b{padding:.3em .7em;border-radius:999px;font-family:var(--mono);font-size:.7rem;font-weight:600;
  background:rgba(11,14,19,.75);backdrop-filter:blur(6px)}
.b-prot{box-shadow:inset 0 0 0 1.5px #83C491;color:#8FE0B4}
.b-mult{box-shadow:inset 0 0 0 1.5px #A55BD8;color:#C98BEE}
.b-vit{box-shadow:inset 0 0 0 1.5px #3E8FD4;color:#8FC4EE}

.rn-flottant{position:absolute;left:50%;top:56%;translate:-50% 0;pointer-events:none;z-index:6;
  font-family:var(--display);font-weight:800;font-size:1rem;color:var(--c);white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 22px var(--c);
  animation:rnVole 1.1s var(--ease-out-expo) forwards}
.rn-flottant.gros{font-size:1.45rem}
@keyframes rnVole{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}
  20%{opacity:1;transform:translate(-50%,-6px) scale(1.08)}
  100%{opacity:0;transform:translate(-50%,-90px) scale(1)}}

.rn-bandeau{position:absolute;left:50%;top:38%;translate:-50% 0;pointer-events:none;z-index:7;
  font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1rem,3.2vw,1.5rem);color:var(--c);opacity:0;
  /* un nom de station long doit se replier plutôt que déborder de la scène */
  max-width:min(90%,42ch);text-align:center;text-wrap:balance;line-height:1.15;
  text-shadow:0 3px 0 rgba(0,0,0,.65),0 0 34px var(--c)}
.rn-bandeau.on{animation:rnBan 1.4s var(--ease-out-expo) forwards}
.rn-bandeau.gros{font-size:clamp(1.6rem,6vw,3rem)}
@keyframes rnBan{0%{opacity:0;transform:translateX(-50%) scale(.6)}
  18%{opacity:1;transform:translateX(-50%) scale(1.1)}
  30%{transform:translateX(-50%) scale(1)}
  75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-24px)}}

.rn-flash{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;background:var(--c)}
.rn-flash.on{animation:rnFlash .45s ease-out forwards}
@keyframes rnFlash{0%{opacity:.42}100%{opacity:0}}

@media (max-width:640px){
  .rn-scene{height:clamp(360px,62vh,560px)}
  .rn-hud{padding:var(--sp-3)}
  .rn-coeur{width:20px;height:18px}
  .rn-coeur::before,.rn-coeur::after{width:10px;height:16px}
  .rn-coeur::before{left:10px}
}

/* — But du parcours et aimant — */
.rn-but{align-self:flex-start;min-width:min(300px,62vw);padding:.35em .7em;border-radius:12px;
  background:rgba(11,14,19,.66);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.16)}
.rn-but-j{height:6px;border-radius:99px;background:rgba(232,233,228,.14);overflow:hidden}
.rn-but-j i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#83C491,#FFCE00);
  transition:width .45s var(--ease-out-expo);box-shadow:0 0 12px -2px #FFCE00}
.rn-but small{display:block;margin-top:4px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:#C6CCD4}
.b-aim{box-shadow:inset 0 0 0 1.5px #E0433A;color:#FF9A92}

/* ==========================================================================
   LOT 15 — LE LOGOTYPE « MÉTROPIF »
   Chaque lettre prend une couleur de ligne et reçoit un décor parisien posé
   en calque. Le mot reste insécable : comme chaque lettre est un élément,
   un retour à la ligne le transformait en colonne verticale.
   ========================================================================== */
.mp-marque{position:relative;display:inline-block;max-width:100%}
.mp-marque::before{content:"";position:absolute;inset:-14% -8% -30%;pointer-events:none;
  background:radial-gradient(60% 62% at 42% 46%,rgba(6,9,14,.72),rgba(6,9,14,0) 72%)}
.mp-titre{position:relative;display:block;white-space:nowrap;line-height:.9;
  letter-spacing:0;font-size:clamp(1.7rem,9.4vw,7.6rem);margin:0}
.mp-l{position:relative;display:inline-block;vertical-align:baseline;margin-right:.03em;
  color:var(--c);
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.7),0 14px 34px rgba(0,0,0,.6);
  animation:mpLettre 6s ease-in-out infinite;
  animation-delay:calc(var(--i) * .18s);will-change:transform}
@keyframes mpLettre{0%,100%{transform:translateY(0)}50%{transform:translateY(-.022em)}}
.mp-deco{position:absolute;left:0;right:0;top:-26%;bottom:0;
  pointer-events:none;display:block;z-index:2}
.mp-deco svg{width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}

.mp-voie{position:relative;height:34px;margin-top:10px;overflow:hidden}
.mp-rail{position:absolute;left:0;right:0;top:20px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(232,233,228,.42) 12%,
    rgba(232,233,228,.42) 88%,transparent)}
.mp-rail--bas{top:26px;opacity:.5}
.mp-gare{position:absolute;top:14px;width:9px;height:9px;border-radius:99px;
  background:var(--nuit);box-shadow:inset 0 0 0 2.5px rgba(232,233,228,.75);
  transform:translateX(-50%)}
.mp-gare::after{content:"";position:absolute;left:50%;top:-9px;width:2px;height:8px;
  translate:-50% 0;background:rgba(232,233,228,.35)}
.mp-rame{position:absolute;top:8px;left:0;display:flex;gap:2px;
  animation-name:mpRame;animation-timing-function:linear;animation-iteration-count:infinite}
.mp-rame i{display:block;width:26px;height:12px;border-radius:5px;background:var(--c);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.45),
             0 3px 8px rgba(0,0,0,.45)}
.mp-rame i:first-child{border-radius:8px 5px 5px 8px}
.mp-rame i:last-child{border-radius:5px 8px 8px 5px;position:relative}
.mp-rame i:last-child::after{content:"";position:absolute;right:3px;top:4px;width:4px;height:4px;
  border-radius:99px;background:#FFF3C4;box-shadow:0 0 6px 1px rgba(255,243,196,.9)}
@keyframes mpRame{from{transform:translateX(-110px)}to{transform:translateX(calc(100vw + 40px))}}
@media (prefers-reduced-motion:reduce){ .mp-l,.mp-rame{animation:none} .mp-rame{opacity:.55} }
@media (max-width:640px){ .mp-voie{height:26px} .mp-rame i{width:20px;height:10px}
  .mp-deco{top:-22%} }

/* ==========================================================================
   LOT 14 — Reconnaître une station
   ========================================================================== */
.im-menu{text-align:center;padding:var(--sp-5) var(--sp-3)}
.im-titre{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.7rem,5.5vw,2.6rem);margin:.12em 0}
.im-niveaux{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.im-niv{position:relative;overflow:hidden;text-align:left;border-radius:var(--r-l);padding:var(--sp-4);
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std)}
.im-niv::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.im-niv:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px rgba(232,233,228,.26),0 18px 40px rgba(0,0,0,.5)}
.im-niv.on{box-shadow:inset 0 0 0 2px var(--c),0 14px 34px rgba(0,0,0,.45)}
.im-niv b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;padding-left:8px}
.im-niv small{display:block;color:#9AA3AE;font-size:.8rem;line-height:1.45;margin-top:.25em;padding-left:8px}
.im-compte{display:inline-block;margin:var(--sp-3) 0 0 8px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--c)}

.im-cadre{position:relative;margin-top:var(--sp-4);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.16),0 26px 60px rgba(0,0,0,.5);background:#0B0E13}
.im-cv{display:block;width:100%}
.im-etiquette{position:absolute;left:14px;top:14px;padding:.3em .8em;border-radius:999px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(11,14,19,.75);backdrop-filter:blur(6px);color:#D8DCE2}

.im-zone{margin-top:var(--sp-5)}
.im-question{font-family:var(--display);font-weight:800;font-size:1.15rem;text-align:center;margin:0 0 var(--sp-4)}
.im-choix{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.im-opt{padding:.9em 1.1em;border-radius:var(--r-m);font-family:var(--display);font-weight:700;
  font-size:.98rem;text-align:left;background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.16);
  transition:transform var(--dur) var(--ease-back),background var(--dur) var(--ease-std)}
.im-opt:hover:not([disabled]){transform:translateY(-3px);background:rgba(232,233,228,.11)}
.im-opt[disabled]{opacity:.55}
.im-opt.juste{background:rgba(0,129,79,.35);box-shadow:inset 0 0 0 2px #83C491;opacity:1;
  animation:imJuste .5s var(--ease-back)}
@keyframes imJuste{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}}
.im-opt.faux{background:rgba(227,5,28,.28);box-shadow:inset 0 0 0 2px #E3051C;opacity:1;
  animation:imFaux .45s var(--ease-std)}
@keyframes imFaux{10%,90%{transform:translateX(-3px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-6px)}}
.im-saisie{display:flex;gap:var(--sp-3);align-items:flex-start;max-width:560px;margin:0 auto}
.im-saisie .ac{flex:1}
.im-saisie input{width:100%;padding:.8em 1em;border-radius:var(--r-m);border:0;
  background:rgba(232,233,228,.06);box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2);
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--faience)}

.im-bas{margin-top:var(--sp-4);text-align:center}
.im-indice{font-size:.85rem}
.im-indicetxt{font-size:.9rem;color:var(--jaune);max-width:60ch;margin:0 auto;line-height:1.5}
.im-reveal{display:flex;flex-direction:column;align-items:center;gap:6px;padding:var(--sp-4);
  border-radius:var(--r-l);animation:viewIn .4s var(--ease-emph) both}
.im-reveal.bon{background:rgba(0,129,79,.16);box-shadow:inset 0 0 0 1px rgba(131,196,145,.45)}
.im-reveal.mauvais{background:rgba(227,5,28,.13);box-shadow:inset 0 0 0 1px rgba(227,5,28,.4)}
.im-verdict{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris)}
.im-reveal b{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,4vw,1.7rem);
  text-transform:uppercase;letter-spacing:-.01em;text-align:center}
.im-bl{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.im-reveal p{margin:.3em 0 0;font-size:.88rem;color:#B9BFC7;max-width:56ch;text-align:center;line-height:1.5}
@media (max-width:640px){ .im-saisie{flex-direction:column} .im-saisie .btn{width:100%} }

/* — Le format carré demandé pour les maquettes — */
.im-carre{aspect-ratio:1/1;max-width:560px;margin-left:auto;margin-right:auto}
.im-carre .im-cv{width:100%;height:100%;display:block}

/* ==========================================================================
   LOT 17 — MÉTRO SOLITAIRE
   Cartes de station : la ligne se lit d'abord, le nom ensuite. Palette
   sobre, contrastée, lisible jusqu'en petite taille.
   ========================================================================== */
.so-menu{text-align:center;padding:var(--sp-5) var(--sp-3)}
.so-titre{font-family:var(--display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(1.7rem,5.4vw,2.6rem);margin:.12em 0}
.so-reprise{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;justify-content:center;
  margin-top:var(--sp-5);padding:var(--sp-4);border-radius:var(--r-l);text-align:left;
  background:rgba(255,206,0,.10);box-shadow:inset 0 0 0 1px rgba(255,206,0,.4)}
.so-reprise b{font-family:var(--display);font-weight:800}
.so-reprise p{margin:.2em 0 0;font-size:.84rem;color:#C6CCD4}
.so-modes{display:grid;gap:var(--sp-3);margin-top:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.so-mode{position:relative;overflow:hidden;text-align:left;border-radius:var(--r-l);padding:var(--sp-4);
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std)}
.so-mode::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.so-mode:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(232,233,228,.26),0 16px 36px rgba(0,0,0,.5)}
.so-mode.on{box-shadow:inset 0 0 0 2px var(--c)}
.so-mode b{display:block;font-family:var(--display);font-weight:800;font-size:1.06rem;padding-left:8px}
.so-mode small{display:block;color:#9AA3AE;font-size:.79rem;line-height:1.45;margin-top:.25em;padding-left:8px}
.so-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:var(--sp-3);padding-left:8px}
.so-tags i{font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);padding:.22em .5em;border-radius:99px;
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.18)}
.so-lignes{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:var(--sp-3)}
.so-l{width:42px;height:42px;border-radius:999px;background:rgba(232,233,228,.08);color:var(--gris);
  font-family:var(--display);font-weight:800;font-size:.95rem;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.2);
  transition:transform var(--dur) var(--ease-back)}
.so-l:hover{transform:translateY(-4px)}
.so-l.on{background:var(--c);color:var(--i);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.so-chiffres{display:grid;gap:var(--sp-3);margin-top:var(--sp-4);
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.so-chiffres div{padding:var(--sp-4);border-radius:var(--r-m);background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1)}
.so-chiffres b{display:block;font-family:var(--mono);font-size:1.15rem}
.so-chiffres span{font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gris)}
.so-paris{margin-top:var(--sp-3);display:grid;gap:6px}
.so-progres{display:flex;align-items:center;gap:10px}
.so-jauge{flex:1;height:9px;border-radius:99px;background:rgba(232,233,228,.1);overflow:hidden}
.so-jauge i{display:block;height:100%;width:0;border-radius:99px;background:var(--c);
  transition:width .7s var(--ease-out-expo)}
.so-progres small{font-family:var(--mono);font-size:.7rem;width:3.4em;text-align:right}

/* — Le plateau — */
.so-jeu{margin-top:var(--sp-4)}
.so-barre{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-l);background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12)}
.so-marque{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin-right:auto}
.so-stat{text-align:right;line-height:1.05}
.so-stat b{display:block;font-family:var(--mono);font-weight:600;font-size:1.1rem;
  font-variant-numeric:tabular-nums}
.so-stat span{font-family:var(--mono);font-size:.52rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris)}
.so-stat--combo.chaud b{color:var(--jaune);text-shadow:0 0 16px rgba(255,206,0,.6)}

.so-evt{margin-top:var(--sp-3)}
.so-evt-carte{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-m);background:rgba(227,5,28,.12);
  box-shadow:inset 0 0 0 1px rgba(227,5,28,.4);animation:viewIn .4s var(--ease-emph) both}
.so-evt-ico{font-size:1.5rem}
.so-evt-carte b{font-family:var(--display);font-weight:800;font-size:.95rem}
.so-evt-carte p{margin:.15em 0 0;font-size:.82rem;color:#C6CCD4}
.so-evt-reste{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:#FF8A93}

.so-fondations{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.so-fond{display:flex;flex-direction:column;align-items:center;gap:4px;padding:var(--sp-3);
  border-radius:var(--r-m);background:rgba(232,233,228,.05);
  box-shadow:inset 0 0 0 2px var(--c);transition:transform var(--dur) var(--ease-back)}
.so-fond:hover{transform:translateY(-3px)}
.so-fond b{font-family:var(--mono);font-size:.95rem}
.so-fond small{font-size:.68rem;color:#9AA3AE;text-align:center;line-height:1.2;
  overflow-wrap:anywhere;min-height:2.2em}
.so-fond.complete{background:rgba(0,129,79,.2);box-shadow:inset 0 0 0 2px #83C491}
.so-past{display:grid;place-items:center;width:28px;height:28px;border-radius:999px;
  background:var(--c);color:var(--i,#fff);font-family:var(--display);font-weight:800;font-size:.82rem;flex:none}

.so-haut{display:flex;gap:var(--sp-5);flex-wrap:wrap;align-items:flex-start;margin-top:var(--sp-4)}
.so-zone{display:flex;flex-direction:column;gap:6px}
.so-lab{font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gris);margin:0}
.so-defausse{display:flex;min-height:132px;align-items:flex-start}
.so-defausse .so-carte{width:92px;flex:none}
.so-carte.so-dessous{opacity:.66;transform:scale(.93);transform-origin:bottom left;
  filter:saturate(.65);cursor:default}
.so-carte.so-dessous:hover{transform:scale(.93)}
.so-carte.so-dessous::after{content:"";position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(90deg,transparent 48%,rgba(11,14,19,.34))}
.so-carte.so-dessus{z-index:3;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18),0 8px 18px rgba(0,0,0,.5)}
.so-defausse-vide{width:92px;height:132px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);box-shadow:inset 0 0 0 2px rgba(232,233,228,.12)}

/* — Glisser-déposer — */
.so-carte{touch-action:none}
.so-fantome{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  transform:rotate(-3.5deg);filter:drop-shadow(0 20px 26px rgba(0,0,0,.6))}
.so-fantome .so-carte{width:100%;opacity:.97}
.so-carte.so-source{opacity:.28;filter:grayscale(.5)}
.so-carte.so-source:hover{transform:none}
.so-col.so-vise{box-shadow:inset 0 0 0 2px var(--jaune);background:rgba(255,206,0,.08)}
.so-fond.so-vise,.so-garage-vide.so-vise,.so-carte.so-vise{
  box-shadow:inset 0 0 0 3px var(--jaune),0 0 22px -6px var(--jaune);transform:translateY(-4px)}
.so-fond small.mystere{color:#C9A227;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em}
.so-garages{display:flex;gap:6px;flex-wrap:wrap}
.so-pioche{width:92px;height:132px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(150deg,#16324C,#0B1420);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.2);transition:transform var(--dur) var(--ease-back)}
.so-pioche:hover{transform:translateY(-3px)}
.so-pioche.vide{opacity:.45}
.so-pioche small{font-family:var(--mono);font-size:.6rem;color:#9AA3AE}
.so-garage-vide{width:92px;height:132px;border-radius:12px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gris);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.16)}
.so-garage-vide:hover{box-shadow:inset 0 0 0 2px var(--jaune);color:var(--jaune)}

/* — Les cartes — */
.so-plateau{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:var(--sp-5);
  align-items:start;min-height:340px}
.so-col{display:flex;flex-direction:column;min-height:150px;border-radius:12px;padding-bottom:40px}
.so-vide{height:132px;border-radius:12px;font-family:var(--mono);font-size:.56rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.14)}
.so-carte{position:relative;width:100%;min-height:132px;border-radius:12px;padding:9px;
  display:flex;flex-direction:column;gap:5px;text-align:left;
  background:linear-gradient(160deg,#F5F2E8,#E2DDCE);color:#16202C;
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.45);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.so-carte::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;
  border-radius:12px 12px 0 0;background:var(--c)}
.so-carte:hover:not([disabled]){transform:translateY(-5px);z-index:5}
.so-carte.sel{box-shadow:inset 0 0 0 3px var(--jaune),0 0 26px -4px var(--jaune);transform:translateY(-8px);z-index:6}
.so-carte.indice{animation:soIndice 1.1s ease-in-out 3}
@keyframes soIndice{0%,100%{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.45)}
  50%{box-shadow:inset 0 0 0 3px #83C491,0 0 30px -2px #83C491}}
.so-carte.majeure::after{content:"★";position:absolute;right:6px;bottom:6px;top:auto;display:grid;place-items:center;
  width:19px;height:19px;border-radius:50%;color:#7A4A00;background:#FFD23E;font-size:.66rem;line-height:1;
  box-shadow:0 0 0 2px #0B0E13}
.so-carte[disabled]{cursor:default}
.so-carte.dos{background:linear-gradient(150deg,#16324C,#0B1420);
  align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.16),0 4px 12px rgba(0,0,0,.45)}
.so-carte.dos::before{display:none}
.so-dos{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;
  background:#FFCE00;color:#0B0E13;font-family:var(--display);font-weight:800;font-size:1.1rem}
.so-tete{display:flex;align-items:center;gap:6px;margin-top:4px}
.so-tete small{font-family:var(--mono);font-size:.58rem;color:#5A6270;margin-left:auto}
.so-nom{font-family:var(--display);font-weight:800;font-size:.82rem;line-height:1.12;
  overflow-wrap:anywhere}
.so-type{font-family:var(--mono);font-size:.52rem;letter-spacing:.06em;color:#6E7684;margin-top:auto}

.so-reseau{margin-top:var(--sp-5);display:grid;gap:7px}
.so-ligne{display:flex;align-items:center;gap:10px}
.so-trace{flex:1;display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.so-pt{width:9px;height:9px;border-radius:99px;background:rgba(232,233,228,.16);
  transition:background var(--dur) var(--ease-std),transform var(--dur) var(--ease-back)}
.so-pt.ok{background:var(--c);transform:scale(1.25);box-shadow:0 0 10px -1px var(--c)}
.so-ligne small{font-family:var(--mono);font-size:.66rem;color:var(--gris);width:5.6em;text-align:right}
.so-ligne.complete small{color:var(--c)}

.so-msg{min-height:1.6em;text-align:center;font-weight:700;font-size:.9rem;margin:var(--sp-4) 0 0;
  opacity:0;transform:translateY(-5px);transition:opacity var(--dur),transform var(--dur) var(--ease-back)}
.so-msg.on{opacity:1;transform:none}
.so-msg.bon{color:#8FE0B4} .so-msg.non{color:#FF8A93}
.so-msg.corr{color:var(--jaune)} .so-msg.neutre{color:#B9BFC7}
.so-pied{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;justify-content:center;
  margin-top:var(--sp-4)}
.so-fete{position:fixed;left:50%;top:34%;translate:-50% 0;z-index:800;pointer-events:none;
  font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,5vw,2.6rem);color:var(--jaune);
  text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 40px rgba(255,206,0,.8);
  animation:soFete 1.6s var(--ease-out-expo) forwards}
@keyframes soFete{0%{opacity:0;transform:translateX(-50%) scale(.5)}
  20%{opacity:1;transform:translateX(-50%) scale(1.12)}
  32%{transform:translateX(-50%) scale(1)}
  78%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-30px)}}
.so-bloque{position:fixed;inset:auto 0 var(--sp-6);margin:0 auto;width:min(460px,92vw);z-index:700;
  padding:var(--sp-5);border-radius:var(--r-xl);text-align:center;
  background:var(--nuit-2);box-shadow:inset 0 0 0 2px rgba(227,5,28,.5),0 30px 70px rgba(0,0,0,.6)}
.so-bloque b{font-family:var(--display);font-weight:800;font-size:1.1rem}
.so-bloque p{margin:.3em 0 var(--sp-4);font-size:.86rem;color:#C6CCD4}
.so-bloque .row{justify-content:center}

@media (max-width:820px){
  .so-plateau{grid-template-columns:repeat(7,minmax(74px,1fr));overflow-x:auto;padding-bottom:8px}
  .so-carte{min-height:112px;padding:7px}
  .so-nom{font-size:.7rem}
  .so-fondations{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .so-carte,.so-pt,.so-fond{transition:none}
  .so-fete,.so-carte.indice{animation:none}
}

/* — FRANCE : la section géographie ————————————————————————————————
   Bleu, blanc, rouge par touches, jamais en aplat : le drapeau se devine,
   il ne s'impose pas. Le reste emprunte au design system du site. */
.fr-view{--fr-bleu:#1B4E9B;--fr-rouge:#E3051C;--fr-creme:#F5F2E8}

.fr-hero{position:relative;padding:var(--sp-6) var(--sp-5) var(--sp-5);border-radius:22px;
  overflow:hidden;background:linear-gradient(150deg,#14202E,#0A1017 60%);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.fr-tricolore{position:absolute;left:0;top:0;bottom:0;width:9px;display:flex;flex-direction:column}
.fr-tricolore i{flex:1}
.fr-tricolore i:nth-child(1){background:var(--fr-bleu)}
.fr-tricolore i:nth-child(2){background:var(--fr-creme)}
.fr-tricolore i:nth-child(3){background:var(--fr-rouge)}
.fr-h1{font-family:var(--display);font-size:clamp(1.9rem,5vw,2.9rem);margin:0;color:#F5F2E8;
  line-height:1.02;letter-spacing:-.01em}
.fr-sub{margin-top:var(--sp-3);max-width:56ch}
.fr-mini{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(300px,38%);opacity:.30;pointer-events:none}
.fr-mini svg{width:100%;height:auto;display:block}
.fr-mini-r{fill:var(--c);stroke:#0A1017;stroke-width:3;
  animation:frRespire 6s var(--ease-std) infinite;animation-delay:calc(var(--i)*260ms)}
@keyframes frRespire{0%,100%{opacity:.55}50%{opacity:1}}

.fr-lab{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);margin:0 0 var(--sp-2)}

.fr-prog{margin-top:var(--sp-5);padding:var(--sp-4);border-radius:18px;
  background:rgba(27,78,155,.10);box-shadow:inset 0 0 0 1.3px rgba(27,78,155,.32)}
.fr-prog-h{display:flex;justify-content:space-between;align-items:baseline;
  font-size:.84rem;color:#A9B4BF}
.fr-prog-h b{font-family:var(--display);font-size:1.3rem;color:#F5F2E8}
.fr-prog-b{height:12px;border-radius:99px;background:rgba(232,233,228,.10);overflow:hidden;
  margin-top:8px}
.fr-prog-b i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--fr-bleu),#F5F2E8 55%,var(--fr-rouge));
  transition:width .8s var(--ease-emph)}
.fr-prog-d{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:8px;
  margin-top:var(--sp-4)}
.fr-prog-c{padding:8px 10px;border-radius:11px;background:rgba(232,233,228,.05);text-align:center}
.fr-prog-c b{display:block;font-family:var(--mono);font-size:.95rem;color:#F5F2E8}
.fr-prog-c span{display:block;font-size:.65rem;color:#8B95A1;margin-top:2px}
.fr-prog-s{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-3);
  font-size:.78rem;color:#A9B4BF}

.fr-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px}
.fr-carte-jeu{position:relative;text-align:left;border:0;cursor:pointer;padding:var(--sp-4);
  border-radius:20px;color:inherit;overflow:hidden;
  background:linear-gradient(160deg,#151E29,#0B1119);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.09);
  animation:frMonte .5s var(--ease-back) backwards;animation-delay:calc(var(--i)*70ms);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
@keyframes frMonte{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fr-carte-jeu:hover{transform:translateY(-4px);
  box-shadow:inset 0 0 0 2px var(--c),0 18px 34px -22px var(--c)}
.fr-carte-jeu::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  border-radius:50%;background:var(--c);opacity:.10;pointer-events:none}
.fr-vis{display:flex;align-items:center;justify-content:center;height:82px;margin-bottom:var(--sp-2)}
.fr-vis svg{filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
  transition:transform var(--dur) var(--ease-back)}
.fr-carte-jeu:hover .fr-vis svg{transform:translateY(-3px) rotate(-3deg) scale(1.06)}
.fr-carte-jeu h3{font-family:var(--display);font-size:1.15rem;margin:.2em 0 0;color:#F5F2E8}
.fr-carte-jeu p{margin:.4em 0 0;font-size:.82rem;line-height:1.5;color:#9AA3AE}
.fr-carte-p{display:flex;align-items:center;gap:8px;margin-top:var(--sp-3);flex-wrap:wrap}
.fr-diff{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;box-shadow:inset 0 0 0 1.2px currentColor}
.fr-diff[data-d="Facile"]{color:#83C491}
.fr-diff[data-d="Moyen"]{color:#E3B32A}
.fr-diff[data-d="Difficile"]{color:#FF8A93}
.fr-best{font-size:.68rem;color:#7E8894}
.fr-play{margin-left:auto;font-family:var(--mono);font-size:.66rem;color:var(--c)}

.fr-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.fr-badge{padding:10px 12px;border-radius:14px;opacity:.42;text-align:center;
  background:rgba(232,233,228,.04);box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.08)}
.fr-badge.on{opacity:1;background:rgba(255,206,0,.10);
  box-shadow:inset 0 0 0 1.4px rgba(255,206,0,.36)}
.fr-badge b{display:block;font-size:1.5rem}
.fr-badge span{display:block;font-family:var(--display);font-size:.86rem;color:#F5F2E8;margin-top:2px}
.fr-badge small{display:block;font-size:.66rem;color:#8B95A1;margin-top:2px;line-height:1.4}

/* — Le bandeau de jeu — */
.fr-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;
  border-radius:14px;background:linear-gradient(180deg,#141E29,#0B1017);
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.10);position:relative}
.fr-bar-g{display:flex;align-items:center;gap:10px;min-width:0}
.fr-bar-t{font-family:var(--display);font-size:.98rem;color:#F5F2E8;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.fr-bar-d{display:flex;gap:14px;margin-left:auto;flex-wrap:wrap}
.fr-stat{text-align:right}
.fr-stat span{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8894}
.fr-stat b{display:block;font-family:var(--display);font-size:1.05rem;color:#F5F2E8}
.fr-piste{position:absolute;left:12px;right:12px;bottom:4px;height:3px;border-radius:99px;
  background:rgba(232,233,228,.10);overflow:hidden}
.fr-piste i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--fr-bleu,#1B4E9B),#F5F2E8,var(--fr-rouge,#E3051C));
  width:0;transition:width .5s var(--ease-emph)}

/* — La carte — */
.fr-zone{position:relative;margin-top:var(--sp-4);border-radius:18px;overflow:hidden;
  background:#0A1A28;box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10)}
.fr-zone--mini{max-width:340px;margin:var(--sp-3) auto 0}
.fr-carte{position:relative}
.fr-svg{display:block;width:100%;height:auto;touch-action:none;cursor:grab}
.fr-svg:active{cursor:grabbing}
.fr-vague{pointer-events:none}
.fr-reg{fill:url(#frTerre);stroke:#0A1A28;stroke-width:2.4;cursor:pointer;
  transition:fill .35s var(--ease-std),stroke .2s var(--ease-std)}
.fr-reg:hover,.fr-reg.survol{fill:#243528;stroke:#E8E9E4;stroke-width:3}
.fr-reg.on{fill:var(--c);stroke:#0A1A28;stroke-width:2.4;
  animation:frPose .55s var(--ease-back)}
.fr-reg.faux{fill:#5A1218;stroke:#E3051C;animation:frNon .4s var(--ease-std)}
@keyframes frPose{0%{transform:scale(.94);transform-origin:center}
  60%{transform:scale(1.03)}100%{transform:none}}
@keyframes frNon{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}}
.fr-om-cadre{fill:rgba(10,26,40,.9);stroke:rgba(232,233,228,.22);stroke-width:2}
.fr-om{cursor:pointer}
.fr-om:hover .fr-om-cadre,.fr-om.survol .fr-om-cadre{stroke:#E8E9E4;stroke-width:3}
.fr-om-forme{fill:#22323A;stroke:rgba(232,233,228,.3);stroke-width:2}
.fr-om.on .fr-om-forme{fill:var(--c);stroke:#0A1A28}
.fr-om.faux .fr-om-forme{fill:#5A1218;stroke:#E3051C}
.fr-om-lab{fill:#7E8894;font-family:var(--mono);font-size:9px;opacity:0;
  transition:opacity .3s var(--ease-std)}
.fr-om.on .fr-om-lab,.fr-om.nomme .fr-om-lab{opacity:1;fill:#CBD3DC}
.fr-marque{animation:frPop .5s var(--ease-back) backwards}
@keyframes frPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.fr-marque-nom{fill:#F5F2E8;font-family:var(--display);font-weight:700;font-size:13px;
  paint-order:stroke;stroke:#0A1A28;stroke-width:3.4}
.fr-pt-lab{fill:#F5F2E8;font-family:var(--mono);font-size:11px;
  paint-order:stroke;stroke:#0A1A28;stroke-width:3}
.fr-pt.juste circle:nth-child(2){fill:#3ED07A}
.fr-pt.faux circle:nth-child(2){fill:#E3051C}
.fr-onde{animation:frOnde .9s var(--ease-out-expo) forwards;transform-box:fill-box;
  transform-origin:center}
@keyframes frOnde{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(6)}}
.fr-fleuve{opacity:.95}
.fr-fleuve.anim{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:frCoule 1.1s var(--ease-out-expo) forwards}
@keyframes frCoule{to{stroke-dashoffset:0}}
.fr-fleuve.montre{opacity:.6;stroke-dasharray:9 7}
.fr-cmd{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:5px}
.fr-cmd-b{width:30px;height:30px;border:0;border-radius:9px;cursor:pointer;
  background:rgba(8,14,20,.82);color:#CBD3DC;font-size:1rem;line-height:1;
  box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.18)}
.fr-cmd-b:hover{background:rgba(8,14,20,.95);color:#fff}

/* — Le tiroir des régions à poser — */
.fr-consigne{margin:var(--sp-3) 0 var(--sp-2);font-size:.82rem;color:#A9B4BF}
.fr-tiroir{display:flex;flex-wrap:wrap;gap:7px}
.fr-jeton{display:flex;align-items:center;gap:7px;padding:7px 11px 7px 8px;border:0;
  border-radius:13px;cursor:grab;color:#E8E9E4;font-size:.8rem;touch-action:none;
  background:linear-gradient(170deg,#1A2531,#0E151D);
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.12);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.fr-jeton:hover{transform:translateY(-2px)}
.fr-jeton.sel{box-shadow:inset 0 0 0 2px var(--c),0 0 20px -8px var(--c)}
.fr-jeton svg{flex:none}
.fr-fantome{position:fixed;z-index:90;pointer-events:none;transform:translate(-50%,-140%);
  box-shadow:inset 0 0 0 2px var(--c),0 12px 28px rgba(0,0,0,.6);opacity:.95}

/* — Questions — */
.fr-scene{margin-top:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);
  align-items:stretch}
.fr-scene--large{max-width:720px;margin-left:auto;margin-right:auto}
.fr-scene>.btn{align-self:center}
.fr-q-t{font-family:var(--display);font-size:1.12rem;color:#F5F2E8;margin:0;line-height:1.35}
.fr-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.fr-choix-b{padding:13px 15px;border:0;border-radius:14px;cursor:pointer;text-align:left;
  font-size:.9rem;color:#E8E9E4;background:linear-gradient(170deg,#1A2531,#0E151D);
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.12);
  animation:frMonte .34s var(--ease-back) backwards;animation-delay:calc(var(--i)*55ms);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.fr-choix-b:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px rgba(232,233,228,.3)}
.fr-choix-b.juste{box-shadow:inset 0 0 0 2px #3ED07A;background:rgba(62,208,122,.14);color:#fff}
.fr-choix-b.faux{box-shadow:inset 0 0 0 2px #E3051C;background:rgba(227,5,28,.14);
  animation:frNon .38s var(--ease-std)}
.fr-pourquoi{margin:0;font-size:.8rem;line-height:1.5;color:#A9B4BF;
  padding:9px 12px;border-radius:11px;background:rgba(232,233,228,.05)}
.fr-aide{margin:0;font-size:.76rem;color:#8B95A1}
.fr-indice-b{align-self:flex-start;padding:8px 13px;border:0;border-radius:11px;cursor:pointer;
  font-size:.78rem;color:#E3B32A;background:rgba(227,179,42,.10);
  box-shadow:inset 0 0 0 1.2px rgba(227,179,42,.34)}
.fr-indice-b[disabled]{opacity:.4;cursor:default}
.fr-indices{display:flex;flex-direction:column;gap:6px}
.fr-indice{margin:0;font-size:.82rem;color:#CBD3DC;padding:8px 12px;border-radius:11px;
  background:rgba(232,233,228,.05);animation:frMonte .3s var(--ease-back) backwards}

/* — Silhouettes et tableaux — */
.fr-silhouette{width:min(280px,74vw);aspect-ratio:1;margin:0 auto;border-radius:18px;
  background:radial-gradient(circle at 50% 40%,#16222E,#0A1017);
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.10);display:flex;
  animation:frMonte .45s var(--ease-back) backwards}
.fr-silhouette svg{width:100%;height:100%}
.fr-silhouette--petit{width:120px;margin:0}
.fr-sil-p{fill:#E8E9E4;stroke:#0A1017;stroke-width:1.5;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.fr-sil-p.on{fill:#FFCE00}
.fr-tableau{position:relative;display:flex;align-items:center;justify-content:center;
  width:min(320px,80vw);aspect-ratio:4/3;margin:0 auto;border-radius:20px;
  background:radial-gradient(circle at 50% 35%,#1B2836,#0A1017 70%);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.12),0 18px 40px -26px #000;
  animation:frMonte .45s var(--ease-back) backwards}
.fr-tableau::after{content:"";position:absolute;inset:0;border-radius:20px;
  background:radial-gradient(circle at 50% 30%,var(--c),transparent 62%);opacity:.16}
.fr-tableau svg{position:relative;z-index:1;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.6))}
.fr-tableau-t{position:absolute;left:12px;bottom:10px;z-index:2;font-family:var(--mono);
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#8B95A1}
.fr-tableau--petit{width:120px;aspect-ratio:1;margin:0}

/* — Fiches — */
.fr-fiche{padding:var(--sp-4);border-radius:16px;background:rgba(232,233,228,.04);
  box-shadow:inset 0 0 0 1.3px rgba(232,233,228,.10);
  animation:frMonte .4s var(--ease-back) backwards}
.fr-fiche b{display:block;font-family:var(--display);font-size:1.2rem;color:#F5F2E8}
.fr-fiche>span{display:block;font-size:.8rem;color:#8B95A1;margin-top:3px}
.fr-fiche p{margin:.6em 0 0;font-size:.86rem;line-height:1.55;color:#A9B4BF}
.fr-fiche--lieu,.fr-fiche--om{display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:4px}
.fr-syms{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3);justify-content:center}
.fr-syms i{font-style:normal;font-size:.72rem;padding:4px 10px;border-radius:99px;
  color:#CBD3DC;background:rgba(232,233,228,.06);
  box-shadow:inset 0 0 0 1.1px rgba(232,233,228,.12)}
.fr-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;
  margin-top:var(--sp-3);width:100%;text-align:left}
.fr-kv>div{padding:9px 11px;border-radius:11px;background:rgba(232,233,228,.04)}
.fr-kv i{display:block;font-style:normal;font-family:var(--mono);font-size:.54rem;
  letter-spacing:.14em;text-transform:uppercase;color:#7E8894}
.fr-kv p{margin:.25em 0 0;font-size:.8rem;color:#CBD3DC;line-height:1.45}

/* — Modes — */
.fr-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;
  max-width:660px;margin:0 auto}
.fr-modes>.fr-lab{grid-column:1/-1;text-align:center}
.fr-mode{padding:var(--sp-4);border:0;border-radius:18px;cursor:pointer;text-align:left;
  color:inherit;background:linear-gradient(160deg,#151E29,#0B1119);
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.10);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.fr-mode:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--c)}
.fr-mode b{display:block;font-family:var(--display);font-size:1.1rem;color:#F5F2E8}
.fr-mode span{display:block;margin-top:.4em;font-size:.82rem;line-height:1.5;color:#9AA3AE}

/* — Planisphère — */
.fr-monde{width:min(560px,94vw);margin:0 auto;border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 1.4px rgba(232,233,228,.10)}
.fr-monde svg{display:block;width:100%;height:auto}
.fr-monde-mer{fill:#0C1D2C}
.fr-monde-t{fill:#1E2E24;stroke:#0A1017;stroke-width:.7}
.fr-zoneo{cursor:pointer}
.fr-zoneo circle{fill:rgba(27,78,155,.35);stroke:rgba(232,233,228,.35);stroke-width:1;
  transition:fill .2s var(--ease-std)}
.fr-zoneo:hover circle{fill:rgba(27,78,155,.7);stroke:#E8E9E4}
.fr-zoneo text{fill:#9AA3AE;font-family:var(--mono);font-size:3.6px;pointer-events:none}
.fr-zoneo.juste circle{fill:#3ED07A;stroke:#3ED07A}
.fr-zoneo.faux circle{fill:#E3051C;stroke:#E3051C}

/* — Écran de fin — */
.fr-fin{max-width:560px;margin:0 auto;text-align:center;display:flex;flex-direction:column;
  gap:var(--sp-3);animation:frMonte .5s var(--ease-back) backwards}
.fr-fin-t{font-family:var(--display);font-size:1.7rem;margin:0;color:#F5F2E8}
.fr-etoiles{display:flex;justify-content:center;gap:10px;font-size:2.1rem}
.fr-et{color:rgba(232,233,228,.16)}
.fr-et.on{color:#FFCE00;animation:frEt .55s var(--ease-back) backwards;
  text-shadow:0 0 22px rgba(255,206,0,.6)}
@keyframes frEt{from{opacity:0;transform:scale(0) rotate(-70deg)}
  60%{transform:scale(1.3) rotate(10deg)}to{opacity:1;transform:none}}
.fr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.fr-stat-c{padding:10px;border-radius:12px;background:rgba(232,233,228,.05)}
.fr-stat-c b{display:block;font-family:var(--display);font-size:1.1rem;color:#F5F2E8}
.fr-stat-c span{display:block;font-size:.66rem;color:#8B95A1;margin-top:2px}
.fr-explo{display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:13px;
  background:rgba(27,78,155,.12);box-shadow:inset 0 0 0 1.2px rgba(27,78,155,.3)}
.fr-explo>span{font-size:.76rem;color:#A9B4BF;white-space:nowrap}
.fr-explo-b{flex:1;height:9px;border-radius:99px;background:rgba(232,233,228,.10);overflow:hidden}
.fr-explo-b i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#1B4E9B,#F5F2E8,#E3051C);transition:width .8s var(--ease-emph)}
.fr-explo b{font-family:var(--mono);color:#F5F2E8}
.fr-fin-a{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:var(--sp-2)}

/* — Le bouton France dans la barre d'accueil — */
.btn--france{position:relative;overflow:hidden}
.btn--france::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(#1B4E9B 33%,#F5F2E8 33% 66%,#E3051C 66%)}

@media (max-width:760px){
  .fr-mini{display:none}
  .fr-bar-d{width:100%;margin-left:0;justify-content:space-between;gap:8px}
  .fr-stat{text-align:left}
  /* Cibles tactiles : au moins 40 px de haut, sinon on rate l'étiquette
     qu'on visait et le jeu paraît injuste alors qu'il ne l'est pas. */
  .fr-jeton{font-size:.76rem;padding:9px 11px;min-height:42px}
  .fr-jeton svg{width:20px;height:19px}
  .fr-choix{grid-template-columns:1fr}
  .fr-choix-b{padding:15px;min-height:50px}
  .fr-cmd{gap:7px}
  .fr-cmd-b{width:40px;height:40px;font-size:1.15rem}
  .fr-h1{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  .fr-mini-r,.fr-carte-jeu,.fr-choix-b,.fr-silhouette,.fr-tableau,.fr-fiche,.fr-fin,
  .fr-et.on,.fr-onde,.fr-marque,.fr-indice,.fr-reg.on,.fr-fleuve.anim{animation:none}
  .fr-fleuve.anim{stroke-dashoffset:0}
}

/* — FRANCE : carte de deuxième génération et tableaux ——————————————
   Tout bouge un peu, rien ne s'agite : vagues qui glissent, nuages qui
   dérivent, voilier qui traverse, neige qui brille, fleuves qui coulent. */

/* la mer */
.fr-m-v0{animation:frVag 13s linear infinite}
.fr-m-v1{animation:frVag 19s linear infinite reverse}
.fr-m-v2{animation:frVag 26s linear infinite}
@keyframes frVag{to{transform:translateX(88px)}}
.fr-m-n1{animation:frDerive 70s linear infinite}
.fr-m-n2{animation:frDerive 96s linear infinite reverse}
.fr-m-n3{animation:frDerive 120s linear infinite}
@keyframes frDerive{from{transform:translateX(-260px)}to{transform:translateX(1000px)}}
.fr-m-voilier{animation:frVoile 54s linear infinite;offset-path:none}
@keyframes frVoile{
  0%{transform:translate(90px,760px) rotate(-4deg);opacity:0}
  8%{opacity:.9}
  50%{transform:translate(300px,120px) rotate(3deg)}
  92%{opacity:.9}
  100%{transform:translate(820px,60px) rotate(-2deg);opacity:0}}

/* la terre, les régions */
.fr-reg{fill:transparent;stroke:rgba(232,233,228,.16);stroke-width:1.6;cursor:pointer;
  transition:fill .3s var(--ease-std),stroke .2s var(--ease-std),filter .3s var(--ease-std)}
.fr-reg:hover,.fr-reg.survol{fill:rgba(255,255,255,.10);stroke:#F5F2E8;stroke-width:2.6;
  filter:drop-shadow(0 0 12px rgba(245,242,232,.5))}
.fr-reg.on{fill:var(--c);stroke:#0A1E2E;stroke-width:2;opacity:.92;
  animation:frPose2 .6s var(--ease-back)}
.fr-reg.faux{fill:#7A1620;stroke:#E3051C;stroke-width:2.6;animation:frNon .42s var(--ease-std)}
@keyframes frPose2{0%{transform:scale(.96);transform-origin:center}
  55%{transform:scale(1.02)}100%{transform:none}}

/* les départements */
.fr-dep{fill:rgba(255,255,255,.03);stroke:rgba(232,233,228,.20);stroke-width:1.1;cursor:pointer;
  transition:fill .25s var(--ease-std),stroke .2s var(--ease-std)}
.fr-dep:hover,.fr-dep.survol{fill:rgba(255,255,255,.14);stroke:#F5F2E8;stroke-width:2}
.fr-dep.on{fill:var(--c);opacity:.9;stroke:#0A1E2E;animation:frPose2 .5s var(--ease-back)}
.fr-dep.faux{fill:#7A1620;stroke:#E3051C;animation:frNon .4s var(--ease-std)}
.fr-dep-num{fill:#0A1E2E;font-family:var(--mono);font-weight:700;font-size:12px;
  paint-order:stroke;stroke:#F5F2E8;stroke-width:3.4}

/* décor : relief, forêts, villes */
.fr-d-mont{filter:drop-shadow(0 2px 3px rgba(4,16,26,.6))}
.fr-d-neige{animation:frBrille 4.5s var(--ease-std) infinite}
@keyframes frBrille{0%,100%{opacity:.85}50%{opacity:1}}
.fr-d-foret{filter:drop-shadow(0 1px 2px rgba(4,16,26,.5))}
.fr-v-lab{fill:#DCE4EC;font-family:var(--display);font-weight:600;font-size:11px;
  paint-order:stroke;stroke:#0A1E2E;stroke-width:3.2;opacity:0;
  transition:opacity .3s var(--ease-std)}
.fr-carte[data-zoom="moyen"] .fr-v-lab,.fr-carte[data-zoom="fort"] .fr-v-lab{opacity:.9}
.fr-carte--regions .fr-v-lab{opacity:.75}
.fr-v circle:nth-child(2){animation:frPulse 3.4s var(--ease-std) infinite}
@keyframes frPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.fr-v{transform-box:fill-box;transform-origin:center}

/* rose des vents, échelle */
.fr-rose{opacity:.65;transition:opacity .3s var(--ease-std)}
.fr-carte:hover .fr-rose{opacity:.95}
.fr-rose-n{fill:#E8E9E4;font-family:var(--mono);font-size:10px}
.fr-ech-lab{fill:#9AA3AE;font-family:var(--mono);font-size:9px}

/* hydrographie */
.fr-e-fond{stroke-linecap:round}
.fr-carte--fleuves .fr-e-fond{animation:frCoule2 9s linear infinite;
  stroke-dasharray:16 9}
@keyframes frCoule2{to{stroke-dashoffset:-50}}
.fr-fleuve{filter:drop-shadow(0 0 8px rgba(127,212,232,.45))}
.fr-fleuve.anim{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:frTrace 1.3s var(--ease-out-expo) forwards}
@keyframes frTrace{to{stroke-dashoffset:0}}

/* marques et points */
.fr-marque{animation:frPop2 .6s var(--ease-back) backwards}
@keyframes frPop2{from{opacity:0;transform:scale(.3) translateY(14px)}
  60%{transform:scale(1.14)}to{opacity:1;transform:none}}
.fr-marque-ico{animation:frFlotte 3.2s var(--ease-std) infinite}
@keyframes frFlotte{0%,100%{transform:translate(-19px,-40px)}50%{transform:translate(-19px,-46px)}}
.fr-marque-nom{fill:#F5F2E8;font-family:var(--display);font-weight:700;font-size:14px;
  paint-order:stroke;stroke:#0A1E2E;stroke-width:4}
.fr-pt-halo{animation:frHalo 2.4s var(--ease-std) infinite}
@keyframes frHalo{0%,100%{transform:scale(1);opacity:.22}50%{transform:scale(1.5);opacity:.06}}
.fr-pt{transform-box:view-box}
.fr-pt-halo{transform-box:fill-box;transform-origin:center}

/* les tableaux */
.fr-tb{display:block;width:100%;height:100%;border-radius:18px}
.fr-tableau{position:relative;width:min(420px,92vw);aspect-ratio:10/7;margin:0 auto;
  border-radius:20px;overflow:hidden;background:#16222E;
  box-shadow:inset 0 0 0 2.5px rgba(232,233,228,.16),0 22px 46px -26px #000;
  animation:frMonte .5s var(--ease-back) backwards}
.fr-tableau::after{content:none}
.fr-tableau--petit{width:200px;aspect-ratio:10/7;margin:0 auto}
.fr-tableau-t{position:absolute;left:11px;bottom:9px;z-index:2;font-family:var(--mono);
  font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#F5F2E8;
  padding:3px 8px;border-radius:99px;background:rgba(8,16,24,.62)}

/* animations internes des tableaux */
.fr-sc-mer{animation:frVag 11s linear infinite}
.fr-sc-nu1{animation:frDeriveP 34s linear infinite}
.fr-sc-nu2{animation:frDeriveP 48s linear infinite reverse}
@keyframes frDeriveP{from{transform:translateX(-70px)}to{transform:translateX(240px)}}
.fr-sc-ois{animation:frOis 26s linear infinite}
@keyframes frOis{from{transform:translate(-40px,6px)}to{transform:translate(220px,-14px)}}
.fr-sc-sol{animation:frBrille 5s var(--ease-std) infinite}
.fr-sc-ecume{animation:frEcume 3.4s var(--ease-std) infinite}
.fr-sc-ecume2{animation:frEcume 4.6s var(--ease-std) infinite reverse}
@keyframes frEcume{0%,100%{transform:translateX(0) scaleX(1);opacity:.75}
  50%{transform:translateX(5px) scaleX(1.1);opacity:.45}}
.fr-sc-bateau{animation:frBat 16s linear infinite}
.fr-sc-bateau2{animation:frBat 22s linear infinite reverse}
@keyframes frBat{from{transform:translateX(-60px)}to{transform:translateX(210px)}}
.fr-sc-reflet{animation:frReflet 5s var(--ease-std) infinite}
@keyframes frReflet{0%,100%{opacity:.3;transform:scaleY(1)}50%{opacity:.16;transform:scaleY(.86)}}
.fr-sc-lave{animation:frLave 2.6s var(--ease-std) infinite}
@keyframes frLave{0%,100%{opacity:.9;transform:translateY(0)}50%{opacity:1;transform:translateY(2px)}}
.fr-sc-fumee{animation:frFumee 8s var(--ease-std) infinite}
@keyframes frFumee{0%{opacity:.2;transform:translate(0,4px) scale(.9)}
  50%{opacity:.55;transform:translate(6px,-6px) scale(1.1)}
  100%{opacity:.2;transform:translate(12px,-14px) scale(1.3)}}
.fr-sc-faisceau{animation:frPhare 5s linear infinite;transform-box:fill-box;
  transform-origin:0% 50%}
@keyframes frPhare{0%{transform:rotate(-8deg);opacity:.15}
  50%{transform:rotate(6deg);opacity:.5}100%{transform:rotate(-8deg);opacity:.15}}
.fr-sc-cascade{animation:frCasc 1.6s linear infinite}
@keyframes frCasc{0%{opacity:.75}50%{opacity:1}100%{opacity:.75}}
.fr-sc-jet{animation:frJet 2.6s var(--ease-std) infinite}
@keyframes frJet{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.25)}}
.fr-sc-flam{animation:frFlotte2 4.6s var(--ease-std) infinite}
@keyframes frFlotte2{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.fr-sc-lav{animation:frVent 3.8s var(--ease-std) infinite}
@keyframes frVent{0%,100%{transform:skewX(0deg)}50%{transform:skewX(-3.5deg)}}
.fr-sc-feu{animation:frFeu .28s steps(2,end) infinite}
@keyframes frFeu{0%{transform:scaleY(1)}100%{transform:scaleY(1.22)}}
.fr-sc-neon{animation:frNeon 2.4s var(--ease-std) infinite}
@keyframes frNeon{0%,100%{opacity:.9}50%{opacity:.35}}
.fr-sc-torche{animation:frTorche 4s var(--ease-std) infinite}
@keyframes frTorche{0%,100%{opacity:.18}50%{opacity:.3}}
.fr-sc-or{animation:frBrille 3.6s var(--ease-std) infinite}
.fr-sc-vague-surf{animation:frVag 6s linear infinite}
.fr-sc-sujet{animation:frSujet .7s var(--ease-back) backwards}
@keyframes frSujet{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* le planisphère */
.fr-w-terres path{filter:drop-shadow(0 2px 3px rgba(4,16,26,.5))}
.fr-zoneo circle{fill:rgba(127,212,232,.20);stroke:rgba(232,233,228,.42);stroke-width:1;
  transition:fill .2s var(--ease-std),transform .2s var(--ease-back)}
.fr-zoneo{transform-box:fill-box;transform-origin:center}
.fr-zoneo:hover circle{fill:rgba(127,212,232,.6);stroke:#F5F2E8}
.fr-zoneo text{fill:#CBD3DC;font-family:var(--mono);font-size:5px;pointer-events:none;
  paint-order:stroke;stroke:#0A1E2E;stroke-width:1.6}
.fr-zoneo.juste circle{fill:#3ED07A;stroke:#3ED07A}
.fr-zoneo.faux circle{fill:#E3051C;stroke:#E3051C}
.fr-monde{width:min(620px,96vw)}

/* sélecteur de mode : une vignette dessinée par mode */
.fr-mode{animation:frMonte .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*90ms)}
.fr-mode-vis{display:flex;justify-content:center;margin-bottom:var(--sp-2)}
.fr-mode-vis svg{filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));
  transition:transform var(--dur) var(--ease-back)}
.fr-mode:hover .fr-mode-vis svg{transform:translateY(-3px) scale(1.08) rotate(-4deg)}

/* silhouettes plus lisibles */
.fr-silhouette{background:radial-gradient(circle at 50% 38%,#1B2A38,#0A1017)}
.fr-sil-p{fill:#F0EDE2;stroke:#0A1017;stroke-width:1.2;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));
  animation:frSujet .6s var(--ease-back) backwards}
.fr-sil-p.on{fill:#FFCE00}

/* jetons : apparition en cascade */
.fr-jeton{animation:frMonte .38s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*28ms)}

@media (max-width:760px){
  .fr-tableau{width:96vw}
  .fr-v-lab{display:none}
  .fr-carte[data-zoom="fort"] .fr-v-lab{display:block}
}
@media (prefers-reduced-motion:reduce){
  .fr-m-v0,.fr-m-v1,.fr-m-v2,.fr-m-n1,.fr-m-n2,.fr-m-n3,.fr-m-voilier,.fr-d-neige,
  .fr-v circle:nth-child(2),.fr-e-fond,.fr-marque,.fr-marque-ico,.fr-pt-halo,
  .fr-sc-mer,.fr-sc-nu1,.fr-sc-nu2,.fr-sc-ois,.fr-sc-sol,.fr-sc-ecume,.fr-sc-ecume2,
  .fr-sc-bateau,.fr-sc-bateau2,.fr-sc-reflet,.fr-sc-lave,.fr-sc-fumee,.fr-sc-faisceau,
  .fr-sc-cascade,.fr-sc-jet,.fr-sc-flam,.fr-sc-lav,.fr-sc-feu,.fr-sc-neon,.fr-sc-torche,
  .fr-sc-or,.fr-sc-vague-surf,.fr-sc-sujet,.fr-sil-p,.fr-mode,.fr-jeton,.fr-tableau,
  .fr-reg.on,.fr-dep.on,.fr-fleuve.anim{animation:none}
  .fr-carte--fleuves .fr-e-fond{stroke-dasharray:none}
  .fr-fleuve.anim{stroke-dashoffset:0}
  .fr-m-voilier{display:none}
}

/* — FRANCE v3 : carte fixe, emblèmes, confettis, secousses ————————— */

/* Sans zoom, la carte doit tenir en entier à l'écran : on la borne en
   hauteur et elle se met à l'échelle toute seule. */
.fr-zone{display:flex;justify-content:center}
/* La carte est presque carrée : on borne sa LARGEUR par la hauteur
   disponible, et le SVG garde son ratio tout seul. */
.fr-carte{width:100%;max-width:min(70vh,640px);margin:0 auto}
.fr-svg{width:100%;height:auto;display:block}
/* la carte ne se saisit plus : elle est fixe, le curseur le dit */
.fr-svg{cursor:default;touch-action:auto}
.fr-svg:active{cursor:default}
.fr-cmd{display:none}                     /* plus de commandes de zoom */

/* plus aucune pastille de ville qui pulse */
.fr-v circle:nth-child(2){animation:none!important}
.fr-v-lab{opacity:.8!important;display:block!important}
@media (max-width:620px){ .fr-v-lab{opacity:0!important} }

/* la zone visée : un liseré qui respire quand on a une région en main */
.fr-zone{transition:box-shadow .25s var(--ease-std)}
.fr-zone--vise{box-shadow:inset 0 0 0 2.5px rgba(255,206,0,.75),
  0 0 34px -10px rgba(255,206,0,.4)}
.fr-zone--vise .fr-svg{cursor:crosshair}
.fr-zone.fr-shake{animation:frShake .42s var(--ease-std)}
@keyframes frShake{0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.fr-eclair{position:absolute;inset:0;pointer-events:none;border-radius:18px;
  animation:frEclair .5s ease-out forwards;z-index:3}
@keyframes frEclair{from{opacity:1}to{opacity:0}}

/* le tiroir au-dessus : on glisse vers le bas */
.fr-tiroir--haut{margin-bottom:var(--sp-3);padding:10px;border-radius:16px;
  background:linear-gradient(180deg,rgba(27,78,155,.14),rgba(27,78,155,.05));
  box-shadow:inset 0 0 0 1.3px rgba(27,78,155,.3)}

/* emblèmes cartoon sur la carte */
.fr-e-emb{pointer-events:none;transition:opacity .3s var(--ease-std)}
.fr-e-pastille{transition:fill .3s var(--ease-std),stroke-width .2s var(--ease-std)}
.fr-e-emb.on .fr-e-pastille{fill:rgba(255,255,255,.20);stroke-width:3.4}
.fr-e-emb.on{animation:frEmb .7s var(--ease-back)}
@keyframes frEmb{0%{transform-box:fill-box;transform-origin:center}
  40%{scale:1.28}70%{scale:.94}100%{scale:1}}
.fr-carte--depts .fr-e-emb,.fr-carte--fleuves .fr-e-emb{display:none}

/* les fleuves cliquables */
.fr-e-riv{cursor:pointer}
.fr-e-prise{pointer-events:stroke}
.fr-e-fond{pointer-events:none;transition:stroke .25s var(--ease-std),
  stroke-width .2s var(--ease-std),filter .25s var(--ease-std)}
.fr-e-riv:hover .fr-e-fond{stroke:#BFE8FA!important;stroke-width:8!important;
  filter:drop-shadow(0 0 10px rgba(191,232,250,.7))}
.fr-e-riv.on .fr-e-fond{filter:drop-shadow(0 0 12px rgba(127,212,232,.8))}
.fr-e-riv.faux .fr-e-fond{stroke:#E3051C!important;stroke-width:8!important}
.fr-carte--fleuves .fr-e-fond{stroke-dasharray:18 10;
  animation:frCoule3 10s linear infinite}
@keyframes frCoule3{to{stroke-dashoffset:-56}}
.fr-e-fond.anim{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  animation:frTrace2 1.4s var(--ease-out-expo) forwards}
@keyframes frTrace2{to{stroke-dashoffset:0}}

/* mouette et voilier : décor, jamais cible */
.fr-m-mouette{animation:frMouette 30s linear infinite;pointer-events:none}
@keyframes frMouette{0%{transform:translate(60px,700px)}100%{transform:translate(760px,120px)}}

/* étincelles de réussite */
.fr-etincelle{animation:frEtinc .85s var(--ease-out-expo) forwards;
  animation-delay:var(--d,0ms);transform-box:fill-box;transform-origin:center}
@keyframes frEtinc{from{opacity:1;transform:translate(0,0) scale(1)}
  to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* confettis */
.fr-fin{position:relative}
.fr-conf{position:absolute;left:50%;top:55%;pointer-events:none;z-index:6}
.fr-conf i{position:absolute;border-radius:2px;
  animation:frConf 1.5s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d)}
@keyframes frConf{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* bannière de victoire */
.fr-banniere{position:absolute;left:50%;top:22px;transform:translateX(-50%);
  z-index:7;padding:10px 20px;border-radius:14px;text-align:center;pointer-events:none;
  background:rgba(8,20,30,.9);box-shadow:inset 0 0 0 2px var(--c),0 14px 30px -14px #000;
  animation:frBan .5s var(--ease-back) backwards}
.fr-banniere b{display:block;font-family:var(--display);font-size:1.14rem;color:var(--c)}
.fr-banniere span{display:block;font-size:.76rem;color:#CBD3DC;margin-top:2px}
.fr-banniere.part{animation:frBanOut .45s var(--ease-std) forwards}
@keyframes frBan{from{opacity:0;transform:translate(-50%,-22px) scale(.9)}
  60%{transform:translate(-50%,4px) scale(1.04)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes frBanOut{to{opacity:0;transform:translate(-50%,-18px) scale(.94)}}

/* les numéros de département à choisir */
.fr-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(94px,1fr));gap:9px}
.fr-num-b{position:relative;padding:16px 10px;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:1.6rem;color:#F5F2E8;
  background:linear-gradient(170deg,#1E2A38,#0F1720);
  box-shadow:inset 0 0 0 1.6px rgba(232,233,228,.14);
  animation:frMonte .36s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.fr-num-b::after{content:"";position:absolute;left:12px;right:12px;bottom:8px;height:3px;
  border-radius:2px;background:rgba(232,233,228,.14)}
.fr-num-b:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:inset 0 0 0 2px rgba(232,233,228,.36)}
.fr-num-b.juste{box-shadow:inset 0 0 0 2.6px #3ED07A;background:rgba(62,208,122,.16);
  animation:frJuste .5s var(--ease-back)}
.fr-num-b.faux{box-shadow:inset 0 0 0 2.6px #E3051C;background:rgba(227,5,28,.16);
  animation:frShake .4s var(--ease-std)}
@keyframes frJuste{0%{scale:1}45%{scale:1.14}100%{scale:1}}

/* fiches illustrées */
.fr-fiche--reg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.fr-fiche-vis{display:flex;justify-content:center;margin-bottom:4px}
.fr-fiche-vis svg{filter:drop-shadow(0 5px 16px rgba(0,0,0,.55));
  animation:frFlotteI 3.4s var(--ease-std) infinite}
@keyframes frFlotteI{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* la carte du hub : emblèmes visibles */
.fr-mini{opacity:.42}

/* réponses : un peu plus vivantes */
.fr-choix-b{position:relative;overflow:hidden}
.fr-choix-b::before{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .5s var(--ease-std)}
.fr-choix-b:hover::before{transform:translateX(100%)}
.fr-choix-b.juste{animation:frJuste .5s var(--ease-back)}

@media (max-width:760px){
  .fr-tiroir--haut{padding:8px}
  .fr-num-b{font-size:1.35rem;padding:18px 8px}
  .fr-banniere{top:10px;padding:8px 14px}
  .fr-banniere b{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .fr-e-emb.on,.fr-etincelle,.fr-conf i,.fr-banniere,.fr-num-b,.fr-num-b.juste,
  .fr-num-b.faux,.fr-fiche-vis svg,.fr-m-mouette,.fr-zone.fr-shake,.fr-eclair,
  .fr-choix-b.juste,.fr-carte--fleuves .fr-e-fond{animation:none}
  .fr-carte--fleuves .fr-e-fond{stroke-dasharray:none}
  .fr-m-mouette{display:none}
}

/* ==========================================================================
   METRO CITY — GRANDE MISE À JOUR : incidents, trains, satisfaction
   Préfixes : .mc-pin/.mc-alerte (plan), .mc-ix (alerte d'incident),
   .mc-tr (onglet Trains), .mc-lx (interface de ligne), .mc-st-* (fiche).
   Animations en transform/opacity uniquement.
   ========================================================================== */

/* — Le plan : lignes cliquables, incidents, tronçons en crise — */
.mc-hit{fill:none;stroke:transparent;pointer-events:stroke;cursor:pointer;stroke-linecap:round;
  transition:stroke var(--dur) var(--ease-std)}
.mc-hit:hover{stroke:rgba(255,255,255,.38)}
.mc-alerte-fond{fill:none;stroke:#0B0E13;stroke-opacity:.35;stroke-linecap:round;stroke-linejoin:round}
.mc-alerte-trait{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 10;
  animation:mcIncClign 1s steps(2,jump-none) infinite, mcIncDefile 1.2s linear infinite}
.mc-alerte-trait.g5{stroke-dasharray:18 8;animation:mcIncClign .55s steps(2,jump-none) infinite, mcIncDefile .7s linear infinite}
@keyframes mcIncClign{0%{stroke-opacity:1}100%{stroke-opacity:.3}}
@keyframes mcIncDefile{to{stroke-dashoffset:-48}}
.mc-surligne{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:.5;
  animation:mcIncClign 1.1s ease-in-out infinite alternate}
.mc-pin{cursor:pointer}
.mc-pin-corps{transform-box:fill-box;transform-origin:50% 100%;
  animation:mcPinPose .5s var(--ease-back) both;transition:transform var(--dur) var(--ease-back)}
.mc-pin:hover .mc-pin-corps{transform:scale(1.18)}
.mc-pin-onde{transform-box:fill-box;transform-origin:center;animation:mcIncOnde 2.2s ease-out infinite}
.mc-pin.g1 .mc-pin-onde{animation-duration:3s}
.mc-pin.g4 .mc-pin-onde{animation-duration:1.1s}
.mc-pin.g5 .mc-pin-onde{animation-duration:.8s}
.mc-pin.g4 .mc-pin-corps,.mc-pin.g5 .mc-pin-corps{animation:mcPinPose .5s var(--ease-back) both, mcPinSaut 1.4s .5s ease-in-out infinite}
.mc-pin.equipe .mc-pin-onde{animation:none;opacity:.5}
.mc-pin-ico{pointer-events:none;dominant-baseline:auto}
@keyframes mcIncOnde{0%{transform:scale(.7);opacity:.95}100%{transform:scale(2.3);opacity:0}}
@keyframes mcPinPose{0%{transform:translateY(-12px) scale(.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes mcPinSaut{0%,100%{transform:none}50%{transform:translateY(-4px)}}
.mc-train--arret{animation:mcIncClign .7s steps(2,jump-none) infinite alternate}

/* — Dock et bandeau — */
.mc-dtab.grave i{background:#FF8A00}
.mc-dtab.critique i{background:#FF3D2E;width:10px;height:10px;animation:mcIncClign .45s steps(2,jump-none) infinite alternate}
.mc-dtab.critique{box-shadow:inset 0 0 0 1.5px rgba(255,61,46,.6)}
.mc-dtab.exceptionnel{box-shadow:inset 0 0 0 2px #FF7A00,0 0 18px -4px #FF7A00;animation:mcDockAlerte 1s ease-in-out infinite}
.mc-dtab.exceptionnel i{background:#FF7A00;width:10px;height:10px}
@keyframes mcDockAlerte{50%{box-shadow:inset 0 0 0 2px #FF3D2E,0 0 26px -2px #FF3D2E}}
.mc-dtab:active,.mc-tool:active,.mc-chip--clic:active{transform:scale(.94)}
.mc-dtab:focus-visible,.mc-tool:focus-visible{outline:2px solid var(--jaune);outline-offset:2px}
.mc-chip--sat{box-shadow:inset 0 0 0 1.5px rgba(62,208,122,.5)}
.mc-chip--sat b{color:#6FE3A0}

/* — Grande alerte d'incident — */
.mc-ix-scene{position:relative;overflow:hidden;display:flex;align-items:center;gap:var(--sp-4);
  padding:var(--sp-5);border-radius:var(--r-l);
  background:radial-gradient(120% 140% at 0% 50%,color-mix(in srgb,var(--g) 36%,transparent),transparent 62%),
    linear-gradient(155deg,#1A1216,#0D1119);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g) 60%,transparent)}
.mc-ix-ico{font-size:3.2rem;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7));animation:mcPinSaut 1.6s ease-in-out infinite}
.mc-ix-titre small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--g)}
.mc-ix-titre b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:#F5F2E8;margin:.1em 0}
.mc-ix-titre span{font-size:.84rem;color:#A9B4C0}
.mc-ix-gyro{display:none;position:absolute;top:-60px;width:180px;height:180px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--g) 70%,transparent) 80%,transparent 90%);
  animation:mcIxGyro 1s linear infinite;pointer-events:none;opacity:.7}
.mc-ix-gyro{right:-50px}.mc-ix-gyro.d{right:auto;left:-60px;animation-direction:reverse}
.mc-ix-scene.g4 .mc-ix-gyro,.mc-ix-scene.g5 .mc-ix-gyro{display:block}
@keyframes mcIxGyro{to{transform:rotate(360deg)}}
.mc-modal .box.mc-ix.rare{box-shadow:inset 0 0 0 2px #FF3D2E,0 0 60px -10px #FF3D2E,0 40px 90px rgba(0,0,0,.65)}
.mc-modal .box.mc-ix.g5{box-shadow:inset 0 0 0 2.5px #FF7A00,0 0 80px -6px #FF7A00,0 40px 90px rgba(0,0,0,.65);
  animation:viewIn var(--dur) var(--ease-emph) both, mcIxPouls 1.2s ease-in-out infinite}
@keyframes mcIxPouls{50%{box-shadow:inset 0 0 0 2.5px #FF3D2E,0 0 110px 0 #FF3D2E,0 40px 90px rgba(0,0,0,.65)}}
.mc-ix-choix{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.mc-ix-opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:var(--sp-4);border-radius:var(--r-l);background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2));
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.14);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.mc-ix-opt:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px var(--a,#FFCE00),0 18px 36px -18px var(--a,#FFCE00)}
.mc-ix-opt:active{transform:scale(.97)}
.mc-ix-opt[disabled]{opacity:.5;pointer-events:none}
.mc-ix-opt.rep{--a:#FFCE00}.mc-ix-opt.eq{--a:#3E8FD4}.mc-ix-opt.rien{--a:#8A93A0}
.mc-ix-opt-ico{font-size:1.7rem}
.mc-ix-opt b{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#F5F2E8}
.mc-ix-opt small{font-size:.76rem;color:#9AA3AE;line-height:1.45}
.mc-ix-opt .price{margin-top:6px;font-family:var(--mono);font-weight:600;color:var(--jaune)}
.mc-ix-opt .price.no{color:#FF8A93}
.mc-inc.rare{animation:mcIncCarte 1.6s ease-in-out infinite}
.mc-inc.rare.g5{animation-duration:.9s}
@keyframes mcIncCarte{50%{box-shadow:inset 0 0 0 2px var(--g),inset 4px 0 0 var(--g),0 0 30px -8px var(--g)}}

/* — Onglet Trains — */
.mc-tr-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mc-tr-tile{position:relative;overflow:hidden;text-align:left;border-radius:var(--r-l);padding:var(--sp-3) var(--sp-4) var(--sp-4);
  background:linear-gradient(160deg,var(--nuit-2),var(--nuit));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.1),inset 0 4px 0 var(--c);
  animation:mcTrEntre .5s var(--ease-emph) both;animation-delay:calc(var(--i,0)*40ms);
  transition:transform var(--dur) var(--ease-emph),box-shadow var(--dur) var(--ease-std)}
.mc-tr-tile:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1.5px var(--c),inset 0 4px 0 var(--c),0 20px 40px rgba(0,0,0,.5)}
.mc-tr-tile:active{transform:scale(.98)}
/* entrée en transform seul : si l'animation est suspendue (onglet en
   arrière-plan), la tuile reste lisible au lieu de rester transparente */
@keyframes mcTrEntre{from{transform:translateY(12px)}}
.mc-tr-vis{height:86px;margin:0 -8px 6px;display:flex;align-items:flex-end}
.mc-tr-vis svg{width:100%;height:100%;transition:transform .6s var(--ease-emph)}
.mc-tr-tile:hover .mc-tr-vis svg{transform:translateX(-10px)}
.mc-tr-tete{display:flex;align-items:center;gap:8px}
.mc-tr-tete b{font-family:var(--display);font-weight:800;font-size:1rem;color:#F5F2E8}
.mc-tr-mat{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:#8B95A1}
.mc-tr-sat{height:8px;border-radius:99px;background:rgba(232,233,228,.1);overflow:hidden;margin:10px 0 8px}
.mc-tr-sat i{display:block;height:100%;border-radius:99px;transition:width .8s var(--ease-out-expo)}
.mc-tr-pied{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.74rem;color:#A9B4C0}
.mc-tr-prod{color:#6FE3A0;font-family:var(--mono)}
.mc-tr-alerte{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:.6rem;padding:3px 8px;border-radius:99px;
  background:#2A0F12;color:#FF8A93;box-shadow:inset 0 0 0 1px #FF3D2E;animation:mcIncClign .8s steps(2,jump-none) infinite alternate}
.mc-tr-tile.inc.g5 .mc-tr-alerte{background:#2E1604;color:#FFB36B;box-shadow:inset 0 0 0 1px #FF7A00}
.mc-tr-reste{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-2);opacity:.6}
.mc-tr-cm{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:var(--sp-4)}
@media (max-width:760px){.mc-tr-cm{grid-template-columns:1fr}}
.mc-tr-courbe{width:100%;height:auto;display:block}
.mc-tr-courbe text{font-family:var(--mono);font-size:8px;fill:#7E8894}
.mc-tr-courbe .trait{fill:none;stroke:#6FE3A0;stroke-width:2.4;stroke-linejoin:round}
.mc-tr-courbe .ref{stroke:rgba(232,233,228,.25);stroke-dasharray:3 4}

/* — Le train dessiné — */
.mc-train-svg{display:block;overflow:visible}
.mc-vantail{transform-box:fill-box;transition:transform .55s cubic-bezier(.3,.7,.3,1)}
.portes .mc-vantail.g{transform:translateX(-94%)}
.portes .mc-vantail.d{transform:translateX(94%)}
.geant .mc-phare{filter:drop-shadow(0 0 6px #FFF3C4)}
.geant .mc-ecran-txt{animation:mcIncClign 1.4s steps(2,jump-none) infinite alternate}
.geant .mc-led{filter:drop-shadow(0 0 4px currentColor)}

/* — Interface de ligne — */
.mc-modal .box.xl{width:min(1240px,96vw);max-height:94vh}
.mc-lx .mc-head h3{margin:0}
.mc-lx-niv{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;
  border-radius:99px;color:var(--jaune);box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.45)}
.mc-lx-sous{margin:-8px 0 var(--sp-4);font-size:.8rem;color:#9AA3AE}
.mc-lx-hero{margin:0 calc(-1*var(--sp-5)) var(--sp-5)}
.mc-lx-cols{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:880px){.mc-lx-cols{grid-template-columns:1fr}}
.mc-lx-jauge .tete{display:flex;align-items:center;gap:var(--sp-3)}
.mc-lx-jauge .emo{font-size:2.6rem;line-height:1}
.mc-lx-jauge small,.mc-lx-prod small,.mc-lx-puces small{display:block;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}
.mc-lx-jauge b{font-family:var(--display);font-weight:800;font-size:2.4rem;color:#F5F2E8;font-variant-numeric:tabular-nums}
.mc-lx-barre{position:relative;height:14px;border-radius:99px;background:rgba(232,233,228,.1);margin:10px 0 4px;overflow:hidden}
.mc-lx-barre i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;transition:width .9s var(--ease-out-expo),background .9s}
.mc-lx-barre u{position:absolute;top:-2px;bottom:-2px;width:2px;background:#F5F2E8;opacity:.7}
.mc-lx-barre s{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,#E3051C 0 5px,#7A0610 5px 10px);opacity:.85}
.mc-lx-prod{margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-l);
  background:rgba(62,208,122,.08);box-shadow:inset 0 0 0 1.2px rgba(62,208,122,.3)}
.mc-lx-prod b{display:block;font-family:var(--mono);font-size:1.15rem;color:#6FE3A0}
.mc-lx-prod span{font-size:.72rem;color:#8B95A1}
.mc-lx-palier{margin-bottom:var(--sp-4)}
.mc-lx-palier b{font-family:var(--display);font-size:.95rem}
.mc-lx-palier .mc-bar{margin-top:8px}
.mc-lx-profil .mc-kv b{color:var(--jaune);letter-spacing:.08em}
.mc-lx-profil .mc-kv b.sat{color:#FF8A93}
.mc-lx-puces{margin-top:var(--sp-3);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mc-lx-puces small{width:100%}
.mc-lx-puces span{font-size:.72rem;padding:3px 9px;border-radius:99px}
.mc-lx-puces .pb{background:rgba(227,5,28,.12);color:#FF8A93}
.mc-lx-puces .ok{background:rgba(62,208,122,.12);color:#6FE3A0}
.mc-lx-puces .prio{background:rgba(255,206,0,.12);color:var(--jaune)}
.mc-lx-ups-tete{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-3)}
.mc-lx-ups-tete b{font-family:var(--display);font-weight:800;font-size:1.1rem}
.mc-lx-ups-tete span{font-family:var(--mono);color:var(--jaune)}
.mc-lx-upgrid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mc-lx-up{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:4px 10px;
  align-items:center;text-align:left;padding:10px 12px;border-radius:14px;
  background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2));box-shadow:inset 0 0 0 1px rgba(232,233,228,.12);
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.mc-lx-up:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--jaune),0 14px 30px -16px var(--jaune)}
.mc-lx-up:active{transform:scale(.97)}
.mc-lx-up[aria-disabled="true"]{opacity:.62}
.mc-lx-up[aria-disabled="true"]:hover{box-shadow:inset 0 0 0 1px rgba(232,233,228,.2);transform:none}
.mc-lx-up.prio{box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.4)}
.mc-lx-up.max{opacity:.8;background:linear-gradient(160deg,#12291F,#0C1A14)}
.mc-lx-up.refus{animation:mcLxRefus .4s ease-in-out}
@keyframes mcLxRefus{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.mc-lx-up .ico{grid-row:1 / 3;font-size:1.6rem}
.mc-lx-up .txt b{display:block;font-size:.86rem;color:#F5F2E8}
.mc-lx-up .txt small{display:block;font-size:.68rem;color:#8B95A1;line-height:1.35}
.mc-lx-up .price{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--jaune);white-space:nowrap}
.mc-lx-up .price.no{color:#FF8A93}
.mc-lx-up .pips{display:flex;gap:3px}
.mc-lx-up .pips i{width:9px;height:5px;border-radius:2px;background:rgba(232,233,228,.16)}
.mc-lx-up .pips i.on{background:#6FE3A0}
.mc-lx-up .eff{font-family:var(--mono);font-size:.66rem;color:#6FE3A0}
.mc-lx-up .badge{position:absolute;top:-7px;right:10px;font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;
  text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--jaune);color:var(--nuit)}
.mc-lx-up .badge.faible{background:#3A4553;color:#C9D0D8}

/* — La scène du quai — */
.mc-lx-scene{position:relative;height:clamp(280px,42vh,430px);overflow:hidden;background:#0B0E13;contain:layout paint;
  border-top:1px solid rgba(232,233,228,.08);border-bottom:1px solid rgba(232,233,228,.08)}
.mc-lx-mur{position:absolute;inset:0 0 18% 0;z-index:1;background-color:#ECE9E1;
  background-image:linear-gradient(180deg,#1A1F27 0,#39414D 9%,transparent 22%),
    linear-gradient(rgba(60,50,40,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(60,50,40,.10) 1px,transparent 1px),
    radial-gradient(ellipse at 50% 30%,rgba(255,244,214,.55),transparent 70%);
  background-size:auto,30px 15px,30px 15px,auto;transition:filter .8s}
.mc-lx-scene.h0 .mc-lx-mur{filter:saturate(.6) brightness(.8)}
.mc-lx-scene.h2 .mc-lx-mur{filter:saturate(1.1) brightness(1.06)}
.mc-lx-plaque{position:absolute;z-index:2;top:17%;left:50%;transform:translateX(-50%);padding:.35em 1.4em;border-radius:9px;
  background:#1F3E8C;color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(.9rem,2vw,1.35rem);
  white-space:nowrap;box-shadow:0 0 0 3px #F2F0E8,0 0 0 4.5px #1F3E8C,0 10px 20px rgba(0,0,0,.35)}
.mc-lx-affiche{position:absolute;z-index:2;top:12%;width:clamp(48px,7%,86px);aspect-ratio:3/4;border-radius:4px;
  box-shadow:0 0 0 4px #CFC8B6,0 8px 16px rgba(0,0,0,.3);overflow:hidden;display:grid;place-items:end center;padding-bottom:6px}
.mc-lx-affiche b{font-family:var(--display);font-size:.62rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mc-lx-affiche.a1{left:20%;background:linear-gradient(160deg,var(--c),#0B0E13)}
.mc-lx-affiche.a2{right:22%;background:linear-gradient(160deg,#FFCE00,#E3051C)}
.mc-lx-ecran{position:absolute;z-index:2;top:8%;right:17%;min-width:118px;padding:6px 10px;border-radius:8px;
  background:#0A1018;box-shadow:inset 0 0 0 2px #2A323E,0 6px 14px rgba(0,0,0,.4);font-family:var(--mono);color:#FFB43E}
.mc-lx-ecran small{display:block;font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:#7E8894}
.mc-lx-ecran b{display:block;font-size:.8rem}
.mc-lx-ecran span{font-size:.66rem;color:#FFD48A}
.mc-lx-scene.ig2 .mc-lx-ecran b,.mc-lx-scene.ig3 .mc-lx-ecran b,.mc-lx-scene.ig4 .mc-lx-ecran b,.mc-lx-scene.ig5 .mc-lx-ecran b{
  color:#FF6B5E;animation:mcIncClign .7s steps(2,jump-none) infinite alternate}
.mc-lx-voie{position:absolute;z-index:1;left:0;right:0;bottom:18%;height:12%;
  background:linear-gradient(180deg,#252A31,#0E1115);box-shadow:inset 0 3px 0 #545B64}
.mc-lx-train{position:absolute;z-index:3;bottom:13%;will-change:transform}
.mc-lx-rame,.mc-lx-rame svg{width:100%;height:100%}
.mc-lx-train.roule .mc-lx-rame{animation:mcLxRoule .16s linear infinite}
@keyframes mcLxRoule{50%{transform:translateY(.8px)}}
.mc-lx-train.panne .mc-phare{fill:#FF9A2E;animation:mcIncClign .5s steps(2,jump-none) infinite alternate}
.mc-lx-train.ameliore .mc-lx-rame{animation:mcLxBrille 1.2s var(--ease-out-expo)}
@keyframes mcLxBrille{0%{filter:brightness(2.2) saturate(1.4);transform:scale(1.035)}100%{filter:none;transform:none}}
.mc-lx-scene::before{content:"";position:absolute;z-index:4;right:0;bottom:18%;width:15%;height:76%;
  background:radial-gradient(120% 90% at 100% 60%,#05070A 55%,#1A1F27 72%,transparent 74%);pointer-events:none}
.mc-lx-quai{position:absolute;z-index:5;left:0;right:0;bottom:0;height:19%;
  background:linear-gradient(180deg,#B9B2A4,#8C8577);box-shadow:inset 0 -12px 24px rgba(0,0,0,.25)}
.mc-lx-quai i{position:absolute;left:0;right:0;top:0;height:7px;background:#E8C24A;
  background-image:radial-gradient(circle,#B8922A 1.2px,transparent 1.6px);background-size:8px 7px}
.mc-lx-banc{position:absolute;z-index:6;left:4%;bottom:13%;width:11%;height:5%;border-radius:6px 6px 2px 2px;
  background:linear-gradient(180deg,#C4563E,#8E3A28);box-shadow:0 6px 0 -2px #3A2A22}
.mc-lx-foule{position:absolute;inset:0;z-index:7;pointer-events:none}
.mc-lx-pax{position:absolute;left:-16px;bottom:calc(3% + (1 - var(--mclxP,.5))*9%);width:30px;height:56px;will-change:transform}
.mc-lx-pax .corps{width:100%;height:100%;transform-origin:50% 100%;transform:scale(calc(.8 + var(--mclxP,.5)*.36))}
.mc-lx-pax svg{width:100%;height:100%;display:block;overflow:visible;transform-origin:50% 100%}
.mc-lx-pax.gauche svg{scale:-1 1}
.mc-lx-scene.h1 .mc-lx-pax.attend svg{animation:mcLxSway 3.4s ease-in-out infinite;animation-delay:calc(-1*var(--d,0s))}
.mc-lx-scene.h2 .mc-lx-pax.attend svg{animation:mcLxHop 2.2s ease-in-out infinite;animation-delay:calc(-1*var(--d,0s))}
.mc-lx-scene.h0 .mc-lx-pax.attend svg{animation:mcLxLas 5s ease-in-out infinite;animation-delay:calc(-1*var(--d,0s))}
.mc-lx-pax.regarde svg{rotate:-7deg}
.mc-lx-pax.marche svg{animation:mcLxBob .42s linear infinite}
.mc-lx-pax.assis .corps{transform:translateY(-14%) scale(.86,.74)}
.mc-lx-pax.monte{opacity:0;transition:opacity .45s,transform .45s!important}
.mc-lx-pax.descend .corps{animation:mcLxSort .35s ease-out both}
@keyframes mcLxSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@keyframes mcLxHop{0%,70%,100%{transform:none}80%{transform:translateY(-8%)}}
@keyframes mcLxLas{0%,100%{transform:rotate(4deg) translateY(2%)}50%{transform:rotate(7deg) translateY(4%)}}
@keyframes mcLxBob{50%{transform:translateY(-5%)}}
@keyframes mcLxSort{from{opacity:0;transform:scale(.6)}}
.mc-lx-pax .bulle{position:absolute;left:50%;top:-20px;font-size:16px;font-style:normal;opacity:0;
  transform:translate(-50%,6px) scale(.5);transition:opacity .3s,transform .3s var(--ease-back)}
.mc-lx-pax.parle .bulle{opacity:1;transform:translate(-50%,0) scale(1)}
.mc-lx-bandeau{position:absolute;z-index:9;top:4%;left:50%;transform:translateX(-50%);padding:.4em 1.1em;border-radius:99px;
  background:rgba(90,8,14,.92);color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;white-space:nowrap;
  box-shadow:inset 0 0 0 1.5px #FF3D2E;animation:mcIncClign .8s steps(2,jump-none) infinite alternate}
.mc-lx-bandeau:empty{display:none}
.mc-lx-scene.ig5 .mc-lx-bandeau{background:rgba(110,40,0,.94);box-shadow:inset 0 0 0 1.5px #FF7A00;font-size:.86rem}
.mc-lx-gyro{display:none;position:absolute;z-index:8;top:-80px;width:220px;height:220px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,61,46,.55) 82%,transparent 92%);animation:mcIxGyro 1.1s linear infinite}
.mc-lx-gyro.g{left:-70px}.mc-lx-gyro.d{right:-70px;animation-direction:reverse}
.mc-lx-scene.ig4 .mc-lx-gyro,.mc-lx-scene.ig5 .mc-lx-gyro{display:block}
.mc-lx-scene.ig5 .mc-lx-gyro{background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,122,0,.6) 82%,transparent 92%)}
.mc-lx-scene.ig5::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(circle at 50% 40%,rgba(255,122,0,.18),rgba(227,5,28,.28));animation:mcIncClign 1.2s ease-in-out infinite alternate}
.mc-lx-scene.palier::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,rgba(255,206,0,.5),transparent 60%);animation:mcLxPalier 1.8s ease-out forwards}
@keyframes mcLxPalier{0%{opacity:0;transform:scale(.6)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}
/* Téléphone : l'en-tête passe sur deux lignes, le décor se simplifie pour
   que la plaque reste lisible, la scène est un peu plus basse. */
@media (max-width:620px){
  .mc-lx .mc-head{flex-wrap:wrap}
  .mc-lx .mc-head h3{font-size:1.1rem}
  .mc-lx-niv{order:5}
  .mc-lx-affiche{display:none}
  .mc-lx-ecran{right:auto;left:3%;top:4%;min-width:0;padding:4px 8px}
  .mc-lx-plaque{top:27%;font-size:.8rem;max-width:88%;overflow:hidden;text-overflow:ellipsis}
  .mc-lx-bandeau{top:auto;bottom:21%;font-size:.6rem;max-width:94%;white-space:normal;text-align:center}
  .mc-lx-scene{height:clamp(240px,40vh,320px)}
}
/* — Correctifs de relecture — */
.toast{z-index:960}
body:has(.mc-modal,.mc-open)::after{opacity:0}
.mc-pin-onde{pointer-events:none}
.mc-alerte-rouge{fill:none;stroke:#E3051C;stroke-opacity:.85;stroke-linecap:round;stroke-linejoin:round}
.mc-gele *{animation-play-state:paused!important}
@keyframes mcClignOp{0%{opacity:1}100%{opacity:.35}}
.mc-dtab.critique i,.mc-tr-alerte,.mc-lx-bandeau,.mc-lx-scene.ig5::after,.mc-train--arret,
.geant .mc-ecran-txt,.mc-lx-train.panne .mc-phare,
.mc-lx-scene.ig2 .mc-lx-ecran b,.mc-lx-scene.ig3 .mc-lx-ecran b,
.mc-lx-scene.ig4 .mc-lx-ecran b,.mc-lx-scene.ig5 .mc-lx-ecran b{animation-name:mcClignOp}
.mc-lx-scene.bonde .mc-lx-pax .corps{scale:.92 1}
.mc-tuile-up{display:inline-block;margin-top:var(--sp-3);font-family:var(--mono);font-size:.7rem;padding:5px 10px;
  border-radius:99px;color:#9AA3AE;box-shadow:inset 0 0 0 1.2px rgba(232,233,228,.2);
  transition:transform var(--dur) var(--ease-back),background var(--dur) var(--ease-std)}
.mc-tuile-up.ok{color:var(--nuit);background:var(--jaune);box-shadow:none}
.mc-tuile-up:hover{transform:scale(1.05)}
.mc-tuile-up:active{transform:scale(.95)}
/* halos : l'ombre est fixe, seule son opacité pulse (bien moins coûteux) */
.mc-modal .box.mc-ix.g5{position:relative;animation:viewIn var(--dur) var(--ease-emph) both}
.mc-modal .box.mc-ix.g5::after,.mc-inc.rare::after,.mc-dtab.exceptionnel::after{content:"";position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;opacity:0;animation:mcHaloOp 1.2s ease-in-out infinite}
.mc-modal .box.mc-ix.g5::after{box-shadow:0 0 110px 0 #FF3D2E}
.mc-inc.rare{animation:none}
.mc-inc.rare::after{box-shadow:inset 0 0 0 2px var(--g),0 0 30px -8px var(--g)}
.mc-inc.rare.g5::after{animation-duration:.9s}
.mc-dtab.exceptionnel{position:relative;animation:none}
.mc-dtab.exceptionnel::after{box-shadow:inset 0 0 0 2px #FF3D2E,0 0 26px -2px #FF3D2E;animation-duration:1s}
@keyframes mcHaloOp{50%{opacity:1}}
/* — Quai : le tunnel de gauche, où le train qui repart disparaît — */
.mc-lx-tunnel{position:absolute;z-index:4;left:0;bottom:18%;width:9%;height:76%;pointer-events:none;
  background:radial-gradient(120% 90% at 0% 60%,#05070A 55%,#1A1F27 72%,transparent 74%)}
@media (max-width:620px){ .mc-lx-tunnel{width:7%} }
.geant .mc-feu-ar{filter:drop-shadow(0 0 5px #FF3D2E)}
/* — France : zoom de la carte — */
.fr-zoom{position:absolute;right:10px;top:10px;z-index:6;display:flex;flex-direction:column;gap:6px}
.fr-zoom-b{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;font-weight:800;
  background:rgba(8,26,38,.86);color:#F5F2E8;
  box-shadow:inset 0 0 0 1.5px rgba(232,233,228,.25),0 6px 14px rgba(0,0,0,.35);
  transition:transform var(--dur) var(--ease-back),background var(--dur) var(--ease-std)}
.fr-zoom-b:hover{transform:scale(1.08);background:rgba(8,26,38,.96)}
.fr-zoom-b:active{transform:scale(.92)}
.fr-svg{touch-action:pan-y}
.fr-carte--zoom .fr-svg{touch-action:none;cursor:grab}
.fr-carte--zoom .fr-svg:active{cursor:grabbing}
/* — France : jeu des villes — */
.fr-ecart{fill:none;stroke:#F5F2E8;stroke-width:2.4;stroke-dasharray:6 5;stroke-linecap:round;opacity:.85;pointer-events:none}
.fr-pt--vous circle:last-child{fill:#F5F2E8}
/* — Reconnaître une station : les tableaux dessinés — */
.im-paysage{aspect-ratio:10/7;max-width:640px;margin-left:auto;margin-right:auto}
.im-tableau{position:absolute;inset:0}
.im-tableau svg{display:block;width:100%;height:100%}

/* — Fiche de station : ce qu'elle rapporte — */
.mc-st-hero{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:var(--sp-3)}
.mc-st-hero>div{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-l);background:linear-gradient(160deg,var(--nuit-3),var(--nuit-2));
  box-shadow:inset 0 0 0 1px rgba(232,233,228,.12)}
.mc-st-hero>div:first-child{box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.45),0 0 26px -12px var(--jaune)}
.mc-st-hero small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.mc-st-hero b{display:block;font-family:var(--display);font-weight:800;font-size:1.45rem;color:#F5F2E8;font-variant-numeric:tabular-nums}
.mc-st-hero>div:first-child b{color:var(--jaune)}
.mc-st-hero span{font-size:.7rem;color:#8B95A1}
.mc-st-up{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-l);margin-top:var(--sp-3);background:rgba(62,143,212,.07);
  box-shadow:inset 0 0 0 1.2px rgba(62,143,212,.3)}

/* Mouvement réduit : tout reste lisible à l'arrêt */
@media (prefers-reduced-motion:reduce){
  .mc-alerte-trait,.mc-surligne,.mc-train--arret,.mc-lx-bandeau,.mc-tr-alerte{animation:none!important;stroke-opacity:1}
  .mc-lx-gyro,.mc-ix-gyro{display:none!important}
}


/* ==================== APPRENDRE LE MÉTRO — HABILLAGE CARTOON ==================== */
/* — Scènes et rame cartoon (animations sur des groupes sans transform) — */
.ap-scene,.ap-ban-fond,.ap-ban-voie{display:block;width:100%;height:100%}
.ap-soleil{animation:apTourne 30s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes apTourne{to{transform:rotate(360deg)}}
.ap-nuage{animation:apNuage 34s linear infinite;animation-delay:var(--d,0s)}
@keyframes apNuage{from{transform:translateX(-200px)}to{transform:translateX(900px)}}
.ap-rame{animation:apRame var(--t,12s) linear infinite}
@keyframes apRame{from{transform:translateX(var(--de,-700px))}to{transform:translateX(var(--a,1700px))}}
.ap-roue{animation:apRoue .55s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes apRoue{to{transform:rotate(360deg)}}
.ap-caisse{animation:apCahot .42s ease-in-out infinite alternate}
@keyframes apCahot{to{transform:translateY(-1.6px)}}
.ap-etoile{animation:apScintille 2.4s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes apScintille{0%,100%{opacity:.25}50%{opacity:1}}
.ap-phare{animation:apPhare 4.8s linear infinite;transform-box:fill-box;transform-origin:0% 50%}
@keyframes apPhare{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.ap-lampe{animation:apLampe 2s ease-in-out infinite alternate}
@keyframes apLampe{from{opacity:.75}to{opacity:1;filter:drop-shadow(0 0 6px #FF9A3E)}}
.ap-clig{animation:apClig 1s steps(2) infinite}
@keyframes apClig{50%{opacity:.25}}

/* — Accueil : les deux niveaux — */
.ap-duo{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  margin-top:var(--sp-5);max-width:1080px}
.ap-niv{position:relative;display:flex;flex-direction:column;text-align:left;border-radius:28px;overflow:hidden;
  padding:0;color:#fff;isolation:isolate;background:linear-gradient(165deg,var(--c),var(--f));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--c) 45%,transparent),0 26px 50px -24px var(--c);
  transition:transform .28s var(--ease-back),box-shadow .28s var(--ease-std)}
.ap-niv:hover{transform:translateY(-6px) rotate(-.4deg);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 8px color-mix(in srgb,var(--c) 70%,transparent),0 34px 60px -24px var(--c)}
.ap-niv:active{transform:scale(.985)}
.ap-niv-art{position:relative;height:clamp(150px,19vw,196px);border-bottom:3px solid #0B0E13;background:#0B0E13}
.ap-niv-txt{padding:var(--sp-4) var(--sp-5) 0}
.ap-niv-n,.ap-hero-n,.ap-ban-sur{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.35em .8em;border-radius:999px;color:#fff;
  background:rgba(11,14,19,.34);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.ap-niv-t,.ap-hero-t,.ap-ban-t{display:block;margin:.22em 0 0;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.95;color:#fff;
  text-shadow:2px 2px 0 #0B0E13,-1.5px -1.5px 0 #0B0E13,1.5px -1.5px 0 #0B0E13,-1.5px 1.5px 0 #0B0E13,0 5px 0 #0B0E13}
.ap-niv-t{font-size:clamp(2rem,5vw,2.9rem)}
.ap-niv-txt small{display:block;margin-top:.45em;font-size:.98rem;font-weight:700;color:rgba(255,255,255,.95)}
.ap-niv-ico{display:flex;flex-wrap:wrap;gap:7px;padding:var(--sp-3) var(--sp-5) 0}
.ap-niv-ico span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.ap-niv-ico .ap-emb{width:36px;height:36px;display:block}
.ap-niv:hover .ap-niv-ico span{animation:apSaute .6s var(--ease-back);animation-delay:calc(var(--i)*60ms)}
@keyframes apSaute{40%{transform:translateY(-9px) rotate(-7deg)}}
.ap-niv-go{align-self:flex-end;margin:var(--sp-4) var(--sp-5) var(--sp-5);padding:.62em 1.15em;border-radius:999px;
  background:var(--cr-blanc);color:#0B0E13;font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;transition:transform .2s var(--ease-back)}
.ap-niv:hover .ap-niv-go{transform:translateX(5px)}

/* — Page d'un niveau — */
.ap-chip{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding:.42em .9em;border-radius:999px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1.5px var(--g,var(--c))}
.ap-hero{display:grid;grid-template-columns:minmax(0,1fr);border-radius:30px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--c),var(--f));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 8px color-mix(in srgb,var(--c) 40%,transparent),0 30px 60px -30px var(--c)}
.ap-hero-art{position:relative;min-height:200px;background:#0B0E13;border-top:3px solid #0B0E13}
.ap-hero-txt{padding:var(--sp-5) clamp(var(--sp-4),4vw,var(--sp-6))}
.ap-hero-t{font-size:clamp(2.4rem,7vw,4.2rem)}
.ap-hero-d{margin:.8em 0 0;max-width:52ch;color:rgba(255,255,255,.95);font-weight:600;line-height:1.5}
.ap-hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-4)}
.ap-hero-chips span{padding:.45em .85em;border-radius:999px;font-size:.8rem;font-weight:700;color:#0B0E13;
  background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
@media (min-width:820px){
  .ap-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .ap-hero-art{border-top:0;border-left:3px solid #0B0E13;min-height:300px}
  .ap-hero-txt{align-self:center}
}
.ap-ligne-tete{display:flex;align-items:center;gap:var(--sp-3);margin:var(--sp-7) 0 var(--sp-6)}
.ap-ligne-past{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;background:var(--c);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #fff}
.ap-ligne-tete b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase}
.ap-ligne-tete small{display:block;color:#A9B4C0;font-size:.86rem}
.ap-jeux{display:grid;gap:var(--sp-7) var(--sp-5);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));padding-top:6px}
.ap-jeu{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border-radius:22px;
  background:linear-gradient(180deg,#17202C,#10161F);color:#F5F2E8;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--g) 50%,transparent),0 18px 32px -20px var(--g);
  animation:apMonte .5s var(--ease-back) backwards;animation-delay:calc(var(--i)*70ms);
  transition:transform .25s var(--ease-back),box-shadow .25s var(--ease-std)}
.ap-jeu:hover{transform:translateY(-7px) rotate(-.6deg);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--g),0 26px 44px -20px var(--g)}
.ap-jeu.lock{opacity:.6}
@keyframes apMonte{from{opacity:0;transform:translateY(18px) scale(.96)}}
.ap-jeu-rail{position:absolute;left:-16px;right:-16px;top:-22px;height:9px;border-radius:9px;background:var(--c);
  box-shadow:0 0 0 2px #0B0E13;z-index:2}
.ap-jeu-arret{position:absolute;left:50%;top:50%;translate:-50% -50%;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--cr-blanc);color:#0B0E13;font-style:normal;font-family:var(--display);
  font-weight:800;font-size:.85rem;box-shadow:0 0 0 4px var(--c),0 0 0 6px #0B0E13}
.ap-jeu-vis{position:relative;height:132px;border-radius:20px 20px 0 0;overflow:hidden;display:grid;place-items:center;
  border-bottom:2.5px solid #0B0E13;
  background:radial-gradient(90% 90% at 50% 120%,rgba(255,255,255,.35) 0 34%,transparent 35%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px),
    linear-gradient(160deg,color-mix(in srgb,var(--g) 80%,var(--cr-blanc)),var(--g) 55%,color-mix(in srgb,var(--g) 70%,#000))}
.ap-jeu-vis .ap-emb,.ap-ban-em .ap-emb,.ap-pick-em .ap-emb{display:block;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff)
    drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.ap-jeu-vis .ap-emb{width:104px;height:104px;transition:transform .3s var(--ease-back)}
.ap-jeu:hover .ap-jeu-vis .ap-emb{transform:scale(1.1) rotate(-6deg)}
.ap-jeu-txt{padding:var(--sp-3) var(--sp-4) 0;flex:1}
.ap-jeu-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--g) 60%,#fff)}
.ap-jeu-txt b{display:block;margin:.2em 0 .3em;font-family:var(--display);font-weight:800;font-size:1.12rem;
  text-transform:uppercase;line-height:1.1}
.ap-jeu-txt p{margin:0;font-size:.86rem;color:#A9B4C0;line-height:1.45}
.ap-jeu-pied{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:var(--sp-3) var(--sp-4) var(--sp-4)}
.ap-jeu-rec{font-family:var(--mono);font-size:.7rem;color:#8A93A0}
.ap-jeu-rec.on{color:#FFCE00}
.ap-jeu-go{padding:.5em .95em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.8rem;
  text-transform:uppercase;background:var(--g);color:var(--gi);box-shadow:0 0 0 2px #0B0E13,0 4px 0 #0B0E13;
  transition:transform .2s var(--ease-back)}
.ap-jeu:hover .ap-jeu-go{transform:translateX(4px)}

/* — Bandeau d'une partie — */
.ap-ban{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--sp-4);
  padding:var(--sp-5) clamp(var(--sp-4),4vw,var(--sp-6)) 96px;border-radius:28px;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--g) 50%,transparent),0 28px 54px -28px var(--g)}
.ap-ban-art{position:absolute;inset:0;z-index:-1;background:var(--g)}
.ap-ban-art .ap-ban-fond{position:absolute;inset:0}
.ap-ban-art .ap-ban-voie{position:absolute;left:0;right:0;bottom:0;height:90px}
.ap-ban-t{font-size:clamp(1.9rem,5.4vw,3.2rem)}
.ap-ban-r{margin:.8em 0 0;max-width:62ch;color:#fff;font-weight:600;line-height:1.5;font-size:.95rem;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}
.ap-ban-rec{display:inline-block;margin-top:var(--sp-3);padding:.4em .85em;border-radius:999px;font-weight:800;
  font-size:.8rem;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap-ban-em .ap-emb{width:clamp(84px,13vw,132px);height:auto;animation:apBalance 3.4s ease-in-out infinite}
@keyframes apBalance{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(4deg) translateY(-6px)}}
@media (max-width:560px){ .ap-ban{grid-template-columns:1fr} .ap-ban-em{display:none} }

/* — La scène de jeu, son cadre et sa mascotte — */
.ap-cadre{position:relative;margin-top:var(--sp-5)}
.ap-stage{border-radius:26px;padding-top:calc(clamp(var(--sp-4),3vw,var(--sp-6)) + 12px);
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 18%,transparent),transparent 220px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 56px),
    linear-gradient(170deg,#1B2533,#0C1118);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--g) 55%,transparent),
    0 30px 60px -30px color-mix(in srgb,var(--g) 70%,transparent)}
.ap-stage::before{content:"";position:absolute;left:24px;right:24px;top:12px;height:6px;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--g) 0 22px,color-mix(in srgb,var(--g) 45%,var(--cr-blanc)) 22px 27px)}
.ap-mascotte{position:absolute;right:26px;bottom:-30px;width:104px;pointer-events:none;z-index:3;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));animation:apPeek 4s ease-in-out infinite}
.ap-mascotte svg{display:block;width:100%;height:auto}
@keyframes apPeek{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@media (max-width:560px){ .ap-mascotte{width:78px;right:14px;bottom:-24px} }

/* — Bandeau de score — */
.hud-ico{display:none}
.ap .gamebar{border-radius:18px;gap:var(--sp-3) var(--sp-4);
  background:linear-gradient(120deg,color-mix(in srgb,var(--g) 30%,#101722),#101722 72%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g) 45%,transparent),0 12px 26px -16px var(--g)}
.ap .gamebar>div:not(.spacer):not(.progress){display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;
  padding:.35em .85em .35em .4em;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ap .hud-ico{display:grid;place-items:center;grid-row:span 2;width:34px;height:34px;border-radius:11px;font-style:normal;
  font-size:1.02rem;background:var(--g);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 2px #0B0E13}
.ap .gamebar .hudlabel{color:color-mix(in srgb,var(--g) 50%,#fff)}
.ap .gamebar .progress{min-width:140px;height:10px;border-radius:6px;background:rgba(255,255,255,.1)}
.ap .gamebar .progress i{background:repeating-linear-gradient(90deg,var(--g) 0 14px,color-mix(in srgb,var(--g) 55%,var(--cr-blanc)) 14px 18px)}

/* — Éléments de jeu, aux couleurs du jeu — */
.ap .stage-title{font-size:clamp(1.25rem,2.8vw,1.8rem);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.ap .hint{color:color-mix(in srgb,var(--g) 45%,#fff);font-weight:600}
.ap .hint::before{content:"● ";color:var(--g)}
.ap .opt{border-radius:16px;padding:.8em 1em;font-size:1rem;
  background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 5px 0 rgba(0,0,0,.4)}
.ap .opts{counter-reset:apopt}
.ap .opt:not(:has(.bullet)):not(:has(.mark)){counter-increment:apopt}
.ap .opt:not(:has(.bullet)):not(:has(.mark))::before{content:counter(apopt,upper-alpha);flex:none;display:grid;place-items:center;
  width:30px;height:30px;border-radius:10px;font-family:var(--display);font-weight:800;font-size:.9rem;
  color:var(--gi);background:var(--g);box-shadow:0 0 0 2px #0B0E13}
.ap .opt:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g) 70%,transparent),0 8px 0 rgba(0,0,0,.4)}
.ap .opt.sel{background:rgba(255,206,0,.14);box-shadow:inset 0 0 0 2.5px var(--jaune),0 5px 0 rgba(0,0,0,.4)}
.ap .opt.good{background:linear-gradient(170deg,rgba(62,208,122,.32),rgba(0,129,79,.14));box-shadow:inset 0 0 0 2.5px #3ED07A,0 5px 0 rgba(0,0,0,.4)}
.ap .opt.bad{background:linear-gradient(170deg,rgba(255,90,110,.3),rgba(196,16,42,.14));box-shadow:inset 0 0 0 2.5px #FF5A6E,0 5px 0 rgba(0,0,0,.4)}
.ap .opt.good::before{content:"✓"!important;background:#3ED07A!important;color:#0B0E13!important}
.ap .opt.bad::before{content:"✗"!important;background:#FF5A6E!important;color:#fff!important}
.ap .chip{border-radius:14px;padding:.65em 1.05em;background:linear-gradient(170deg,#28333F,#18212C);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 5px 0 #0B0E13,0 10px 18px rgba(0,0,0,.35)}
.ap .chip.lifted{box-shadow:inset 0 0 0 2.5px var(--g),0 26px 44px rgba(0,0,0,.6)}
.ap .slot{border-radius:16px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 0 -5px 0 color-mix(in srgb,var(--g) 55%,transparent)}
.ap .slot.hot{box-shadow:inset 0 0 0 2.5px var(--jaune),inset 0 -5px 0 var(--jaune);background:rgba(255,206,0,.1)}
.ap .slot.ok{box-shadow:inset 0 0 0 2.5px var(--accent,#3ED07A),inset 0 -5px 0 var(--accent,#3ED07A);background:rgba(62,208,122,.12)}
.ap .slot-label{color:color-mix(in srgb,var(--g) 50%,#fff)}
.ap .sortrow{border-radius:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--g) 16%,#1E2733),#1E2733 60%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),inset 4px 0 0 var(--g)}
.ap .sortrow .idx{width:26px;height:26px;flex:none;display:grid;place-items:center;text-align:center;border-radius:50%;
  background:#F5F2E8;color:#0B0E13;font-weight:700;box-shadow:0 0 0 3px var(--g)}
.ap .ac input{border-radius:14px;padding:.9em 1.1em;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g) 50%,transparent)}
.ap .ac input:focus{outline:none;box-shadow:inset 0 0 0 2.5px var(--g),0 0 0 4px color-mix(in srgb,var(--g) 25%,transparent)}
.ap .notice{position:relative;border-radius:16px;padding:var(--sp-4) var(--sp-4) var(--sp-4) 3.2em;color:#D6DEE8;
  background:linear-gradient(170deg,color-mix(in srgb,var(--g) 18%,#15202C),#111923);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--g) 40%,transparent)}
.ap .notice::before{content:"💡";position:absolute;left:.9em;top:.8em;font-size:1.2rem}
.ap .node-stage,.ap .paris,.ap .builder,.ap .scene{box-shadow:0 0 0 3px #0B0E13,0 0 0 5px color-mix(in srgb,var(--g) 45%,transparent)}
.ap .endcard{border-radius:24px;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--g) 36%,transparent),transparent 65%)}
.ap .endcard .stats{gap:var(--sp-3)}
.ap .endcard .stat{min-width:118px;padding:var(--sp-3) var(--sp-4);border-radius:18px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 6px 0 rgba(0,0,0,.35)}
.ap .endcard .stat:nth-child(3n+1) b{color:#FFCE00}
.ap .endcard .stat:nth-child(3n+2) b{color:#3ED07A}
.ap .endcard .stat:nth-child(3n) b{color:#7CC4FF}

/* — Sélecteur de niveau illustré (utilisé aussi hors du niveau Apprendre) — */
.ap-pick{padding:var(--sp-5) 0 var(--sp-4);text-align:center}
.ap-pick-tete{display:inline-flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-6);text-align:left}
.ap-pick-em .ap-emb{width:66px;height:66px;animation:apBalance 3.4s ease-in-out infinite}
.ap-pick-sur{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--g) 55%,#fff)}
.ap-pick-t{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.4vw,1.8rem);text-transform:uppercase}
.ap-pick-grille{display:grid;gap:var(--sp-5) var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  max-width:880px;margin:0 auto}
.ap-diff{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius:22px;color:#F5F2E8;background:linear-gradient(170deg,color-mix(in srgb,var(--d) 32%,#172130),#0F151E 78%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--d) 55%,transparent),0 7px 0 5px #0B0E13;
  animation:apMonte .5s var(--ease-back) backwards;animation-delay:calc(var(--i)*90ms);
  transition:transform .22s var(--ease-back),box-shadow .22s var(--ease-std)}
.ap-diff:hover{transform:translateY(-6px) rotate(-1deg);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--d),0 12px 0 5px #0B0E13}
.ap-diff.conseil{background:linear-gradient(170deg,color-mix(in srgb,var(--d) 46%,#172130),#0F151E 78%)}
.ap-diff.choisi{animation:apChoisi .26s ease forwards}
@keyframes apChoisi{50%{transform:scale(1.07)}100%{transform:scale(.97);opacity:.7}}
.ap-diff-vis svg{display:block;width:120px;height:84px;transition:transform .3s var(--ease-back)}
.ap-diff:hover .ap-diff-vis svg{transform:scale(1.08)}
.ap-diff b{font-family:var(--display);font-weight:800;font-size:1.3rem;text-transform:uppercase;color:#fff}
.ap-diff small{color:#C3CCD6;font-size:.84rem;line-height:1.35}
.ap-diff-et{letter-spacing:.15em;color:var(--d);font-size:1.15rem;text-shadow:0 2px 0 #0B0E13}
.ap-diff-badge{position:absolute;top:-13px;right:14px;padding:.32em .75em;border-radius:999px;background:#FFCE00;color:#0B0E13;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 0 2px #0B0E13;rotate:5deg}
.ap-pick-note{margin-top:var(--sp-5)}
@media (prefers-reduced-motion:reduce){
  .ap-soleil,.ap-nuage,.ap-rame,.ap-roue,.ap-caisse,.ap-etoile,.ap-phare,.ap-lampe,.ap-clig,.ap-mascotte,
  .ap-ban-em .ap-emb,.ap-pick-em .ap-emb,.ap-jeu,.ap-diff{animation:none}
}


/* ==================== METRO CITY — CASES D'INFO, EXTENSIONS, AVANCEMENT ==================== */
.mc-info{display:flex;flex-direction:column;gap:2px;min-height:172px;padding:var(--sp-4);isolation:isolate;
  background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--a) 50%,transparent),transparent 60%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 42%,#131B26),#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--a) 40%,transparent),0 16px 30px -20px var(--a);
  animation:mcInfoIn .5s var(--ease-back) backwards;animation-delay:calc(var(--k,0)*50ms)}
.mc-grid>.mc-info:nth-child(2){animation-delay:70ms}
.mc-grid>.mc-info:nth-child(3){animation-delay:140ms}
.mc-grid>.mc-info:nth-child(4){animation-delay:210ms}
.mc-grid>.mc-info:nth-child(5){animation-delay:280ms}
.mc-grid>.mc-info:nth-child(n+6){animation-delay:340ms}
@keyframes mcInfoIn{from{opacity:0;transform:translateY(14px) scale(.97)}}
.mc-info::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;z-index:-1;pointer-events:none;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/200px 30px}
.mc-info:hover{transform:translateY(-4px);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--a),0 22px 38px -20px var(--a)}
.mc-info-art{position:absolute;right:-4px;top:-2px;width:100px;height:80px;pointer-events:none;z-index:-1;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.45));transition:transform .3s var(--ease-back)}
.mc-info-art svg{display:block;width:100%;height:100%;overflow:visible}
.mc-info:hover .mc-info-art{transform:translateY(-4px) rotate(-5deg) scale(1.07)}
.mc-info-lab{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:calc(100% - 90px);
  font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:#fff;line-height:1.2;
  padding:.3em .7em .3em .3em;border-radius:999px;background:color-mix(in srgb,var(--b) 75%,#0B0E13);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 65%,transparent)}
.mc-info-lab i{font-style:normal;flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--a);font-size:.7rem;letter-spacing:0}
.mc-info-val{display:block;margin-top:12px;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.4vw,1.62rem);
  line-height:1.08;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.45);max-width:calc(100% - 64px)}
.mc-info p{margin:6px 0 0;font-size:.8rem;color:#B9C4D0;line-height:1.45}
.mc-info-plus{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--a)}
.mc-info--action .price{margin-top:auto;padding-top:10px}
.mc-info--guide{min-height:0}
.mc-info--guide .mc-info-art{width:80px;height:64px}
.mc-info--guide .mc-info-val{font-size:1.12rem;max-width:calc(100% - 72px)}
.mc-info-tourne{animation:apTourne 14s linear infinite;transform-box:fill-box;transform-origin:center}
.mc-pane>.panneau:first-child+.mc-note{position:relative;padding:var(--sp-3) var(--sp-4) var(--sp-3) 3.4em;border-radius:16px;
  background:linear-gradient(160deg,rgba(62,143,212,.18),rgba(62,143,212,.05));box-shadow:inset 0 0 0 1.5px rgba(62,143,212,.35);color:#C9D6E4}
.mc-pane>.panneau:first-child+.mc-note::before{content:"🗼";position:absolute;left:.9em;top:.65em;font-size:1.3rem}

/* — Extensions du réseau : la vitrine de chaque mode — */
.mc-ext-grille{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--sp-4)}
.mc-ext2{padding:0;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#17202C,#0F151E);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c) 45%,transparent),0 18px 32px -20px var(--c);
  animation:mcInfoIn .5s var(--ease-back) backwards;animation-delay:calc(var(--i)*90ms)}
.mc-ext2.pret{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--jaune),0 0 34px -6px var(--jaune)}
.mc-ext2.ouvert{background:linear-gradient(180deg,#14281F,#0C1A14);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #3ED07A,0 18px 32px -20px #3ED07A}
.mc-ext-vit{position:relative;height:156px;overflow:hidden;border-bottom:2.5px solid #0B0E13}
.mc-ext-decor{position:absolute;inset:0;width:100%;height:100%;display:block}
.mc-ext-train{position:absolute;left:-4%;width:135%;bottom:4px}
.mc-ext-train svg{display:block;width:100%;height:auto}
.mc-ext2.ouvert .mc-ext-train{animation:mcExtEntre 1.5s var(--ease-emph) both}
@keyframes mcExtEntre{from{transform:translateX(75%)}}
.mc-ext2.verrou .mc-ext-train,.mc-ext2.attente .mc-ext-train{filter:grayscale(.85) brightness(.72)}
.mc-ext2.pret .mc-ext-train{animation:mcExtPret 1.8s ease-in-out infinite}
@keyframes mcExtPret{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
.mc-ext-barriere{position:absolute;left:50%;bottom:2px;width:64%;translate:-50% 0;filter:drop-shadow(0 6px 6px rgba(0,0,0,.4))}
.mc-ext-barriere svg{display:block;width:100%;height:auto}
.mc-ext-ruban{position:absolute;left:10px;top:10px;padding:.35em .8em;border-radius:999px;font-family:var(--display);font-weight:800;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mc-ext2.ouvert .mc-ext-ruban{background:#3ED07A}
.mc-ext2.pret .mc-ext-ruban{background:#FFCE00;animation:mcPulse 1.2s ease-in-out infinite}
@keyframes mcPulse{50%{transform:scale(1.07)}}
.mc-ext2.verrou .mc-ext-ruban{background:#FF8A93}
.mc-ext-corps{padding:var(--sp-4);display:flex;flex-direction:column;flex:1}
.mc-ext-mode{align-self:flex-start;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.3em .7em;border-radius:999px;color:#fff;background:color-mix(in srgb,var(--c) 70%,#0B0E13);box-shadow:inset 0 0 0 1.5px var(--c)}
.mc-ext2 h4{margin:8px 0 0;font-family:var(--display);font-size:1.15rem;color:#F5F2E8}
.mc-ext2 .btn{align-self:flex-start;margin-top:auto}
.mc-ext-piste{position:relative;height:14px;margin:var(--sp-5) 12px 0 6px;border-radius:8px;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.mc-ext-piste>i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;
  background:repeating-linear-gradient(90deg,var(--c) 0 12px,color-mix(in srgb,var(--c) 55%,var(--cr-blanc)) 12px 16px);
  transition:width 1.2s var(--ease-out-expo)}
.mc-ext-mini{position:absolute;left:0;top:50%;translate:-50% -64%;width:46px;transition:left 1.2s var(--ease-out-expo);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.mc-ext-mini svg{display:block;width:100%;height:auto}
.mc-ext-piste>em{position:absolute;right:-12px;top:50%;translate:0 -50%;font-style:normal;font-size:1rem}
.mc-ext-leg{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-family:var(--mono);font-size:.66rem;color:#9AA3AE}
.mc-ext-leg b{color:#fff;font-weight:600}

/* — Avancement des lignes — */
.mc-av-resume{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp-4)}
.mc-av-resume span{padding:.45em .9em;border-radius:999px;font-weight:700;font-size:.82rem;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.mc-av-resume .or{color:#FFCE00;box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.45)}
.mc-av-resume .vert{color:#83E0A4;box-shadow:inset 0 0 0 1.5px rgba(62,208,122,.45)}
.mc-av-liste{display:grid;gap:10px;margin-top:var(--sp-4)}
.mc-av{position:relative;display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr) auto;align-items:center;
  gap:var(--sp-4);padding:10px 16px;border-radius:18px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 15%,#141B25),#10161F 45%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08),inset 5px 0 0 var(--c);
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*40ms)}
.mc-av.complete{background:linear-gradient(90deg,rgba(255,206,0,.17),#141B25 55%);
  box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.5),inset 5px 0 0 #FFCE00}
.mc-av-id{display:flex;align-items:center;gap:10px;min-width:0}
.mc-av-id>div{min-width:0}
.mc-av-id b{display:block;font-family:var(--display);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-av-id small{display:block;font-family:var(--mono);font-size:.66rem;color:#9AA3AE}
.mc-av-piste{padding:16px 14px 20px 10px}
.mc-av-rail{position:relative;height:10px;border-radius:6px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mc-av-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:6px;background:var(--c);
  box-shadow:0 0 12px -2px var(--c);transition:width 1.4s var(--ease-out-expo)}
.mc-av-pal{position:absolute;top:50%;width:14px;height:14px;translate:-50% -50%;z-index:1}
.mc-av-pal::before{content:"";position:absolute;inset:1px;rotate:45deg;border-radius:3px;background:#0E141D;
  box-shadow:0 0 0 2px rgba(255,255,255,.3)}
.mc-av-pal.on::before{background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 0 10px #FFCE00}
.mc-av-pal em{position:absolute;left:50%;top:15px;translate:-50% 0;font-style:normal;font-family:var(--mono);
  font-size:.55rem;color:#7E8894;white-space:nowrap}
.mc-av-pal.on em{color:#FFCE00}
.mc-av-train{position:absolute;left:0;top:50%;translate:-50% -80%;width:40px;z-index:2;transition:left 1.4s var(--ease-out-expo);
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.mc-av-train svg{display:block;width:100%;height:auto}
.mc-av-ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mc-av-pc{font-family:var(--display);font-weight:800;font-size:1.15rem;min-width:3.2em;text-align:right;font-variant-numeric:tabular-nums}
.mc-av-mult,.mc-av-rev,.mc-av-max{font-family:var(--mono);font-size:.7rem;padding:.3em .6em;border-radius:999px;white-space:nowrap}
.mc-av-mult{color:#FFCE00;background:rgba(255,206,0,.1);box-shadow:inset 0 0 0 1px rgba(255,206,0,.35)}
.mc-av-rev{color:#83E0A4;background:rgba(62,208,122,.1);box-shadow:inset 0 0 0 1px rgba(62,208,122,.35)}
.mc-av-max{color:#A9B4C0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.mc-av-max.atteint{color:#0B0E13;background:#FFCE00;font-weight:700}
@media (max-width:760px){ .mc-av{grid-template-columns:1fr;gap:4px} .mc-av-ch{justify-content:flex-start} }
.mc-av-aide{margin-top:var(--sp-3);border-radius:14px;padding:.7em 1em;background:rgba(0,100,176,.1);
  box-shadow:inset 0 0 0 1px rgba(62,143,212,.3)}
.mc-av-aide summary{cursor:pointer;font-weight:700;font-size:.85rem;color:#B9D4EC}
.mc-av-aide p{margin:.6em 0 0;font-size:.8rem;color:#A9B4C0;line-height:1.5}
@media (prefers-reduced-motion:reduce){
  .mc-info,.mc-ext2,.mc-av,.mc-ext2 .mc-ext-train,.mc-ext-ruban,.mc-info-tourne{animation:none}
}

/* — Ouverture de booster, deuxième version — */
.mc-open2{background:radial-gradient(120% 90% at 50% 30%,#1B2740,#070A12 72%)}
.mc-open2.sort{animation:mcOpSort .32s ease forwards}
@keyframes mcOpSort{to{opacity:0;transform:scale(1.03)}}
.mc-op-decor{position:absolute;inset:0;pointer-events:none;z-index:0}
.mc-op-decor svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:48%}
.mc-open2 canvas{z-index:1}
.mc-open2 .beam,.mc-open2 .halo{z-index:2}
.mc-op-titre{display:grid;justify-items:center;gap:2px;animation:mcOpTitre .6s var(--ease-back) both;
  transition:transform .4s var(--ease-back)}
@keyframes mcOpTitre{from{opacity:0;transform:translateY(-16px) scale(.9)}}
.mc-op-titre small{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gl)}
.mc-op-titre b{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,4.5vw,2.2rem);text-transform:uppercase;color:#fff;
  text-shadow:0 3px 0 #0B0E13,0 0 24px color-mix(in srgb,var(--gl) 60%,transparent)}
.mc-op-titre.petit{transform:scale(.78)}
.mc-op-pack{position:relative;width:min(230px,56vw);aspect-ratio:120/152;cursor:pointer;
  animation:mcOpEntre .95s var(--ease-back) both}
@keyframes mcOpEntre{0%{transform:translateY(-70vh) rotate(-24deg) scale(.6)}60%{transform:translateY(12px) rotate(6deg) scale(1.04)}
  80%{transform:translateY(-6px) rotate(-3deg)}100%{transform:none}}
.mc-op-flotte{position:absolute;inset:0;animation:mcOpFlotte 2.6s ease-in-out .95s infinite}
@keyframes mcOpFlotte{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}
.mc-op-pack.tremble .mc-op-flotte{animation:mcOpTremble .12s linear infinite}
.mc-op-pack.tremble.fort .mc-op-flotte{animation-duration:.075s}
@keyframes mcOpTremble{0%{transform:translate(-2px,1px) rotate(-2deg)}25%{transform:translate(2px,-1px) rotate(2deg)}
  50%{transform:translate(-3px,-1px) rotate(-1deg)}75%{transform:translate(3px,1px) rotate(1.5deg)}100%{transform:translate(-2px,1px) rotate(-2deg)}}
.mc-op-pack.dechire .mc-op-flotte{animation:none}
.mc-op-haut,.mc-op-bas{position:absolute;inset:0}
.mc-op-pack svg{display:block;width:100%;height:100%;overflow:visible}
.mc-op-pack .mc-booster-cartes{display:none}
.mc-op-haut{clip-path:inset(0 0 78% 0);z-index:2}
.mc-op-bas{clip-path:inset(22% 0 0 0);z-index:1}
.mc-op-lueur{position:absolute;left:50%;top:48%;width:170%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--gl) 70%,var(--cr-blanc)),transparent 70%);opacity:.22;filter:blur(8px);
  transition:opacity .6s ease,transform .6s ease}
.mc-op-pack.tremble .mc-op-lueur{opacity:.55;transform:scale(1.12)}
.mc-op-pack.fort .mc-op-lueur{opacity:.8;transform:scale(1.25)}
.mc-op-pointilles{position:absolute;left:13%;right:13%;top:22%;border-top:2.5px dashed rgba(255,255,255,.9);z-index:3;
  animation:mcOpPointilles 1.2s ease-in-out infinite}
.mc-op-pointilles::before{content:"✂";position:absolute;left:-18px;top:-13px;font-size:1rem;color:#fff}
@keyframes mcOpPointilles{50%{opacity:.35}}
.mc-op-pack.dechire .mc-op-pointilles{display:none}
.mc-op-pack.dechire .mc-op-haut{animation:mcOpArrache .6s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes mcOpArrache{0%{transform:none}30%{transform:translate(6px,-14px) rotate(6deg)}100%{transform:translate(110px,-280px) rotate(62deg);opacity:0}}
.mc-op-pack.dechire .mc-op-bas{animation:mcOpTombe .7s ease-in .3s forwards}
@keyframes mcOpTombe{0%{transform:none}30%{transform:translateY(-8px) scale(1.03)}100%{transform:translateY(60vh) rotate(8deg);opacity:0}}
.mc-op-pack.dechire .mc-op-lueur{opacity:1;transform:scale(1.5)}
.mc-op-eclat{position:absolute;left:50%;top:22%;width:0;height:0;z-index:4;pointer-events:none}
.mc-op-eclat i{position:absolute;left:-3px;top:0;width:6px;height:130px;border-radius:6px;transform-origin:50% 0;
  background:linear-gradient(to bottom,var(--cr-blanc),color-mix(in srgb,var(--gl) 80%,transparent),transparent);
  transform:rotate(var(--r)) scaleY(0);animation:mcOpRayon .75s ease-out forwards}
@keyframes mcOpRayon{0%{transform:rotate(var(--r)) scaleY(0);opacity:1}60%{opacity:1}100%{transform:rotate(var(--r)) scaleY(1.7);opacity:0}}
/* les cartes */
.mc-open2 .rev{gap:var(--sp-4)}
.mc-open2 .slot{position:relative}
.mc-open2 .slot::before{content:"";position:absolute;inset:5%;border-radius:18px;box-shadow:0 0 30px 8px var(--rc);opacity:0;
  transition:opacity .4s ease;pointer-events:none}
.mc-open2 .slot.revele.r1::before{opacity:.55}
.mc-open2 .slot.revele.r2::before{opacity:.8}
.mc-open2 .slot.revele.r3::before{opacity:1;animation:mcOpLeg 1.4s ease-in-out infinite}
@keyframes mcOpLeg{50%{box-shadow:0 0 46px 14px var(--rc)}}
.mc-open2 .slot.attente .flip{animation:mcOpAttente .14s linear infinite}
@keyframes mcOpAttente{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.mc-open2 .back{font-size:0;
  background:radial-gradient(circle at 50% 44%,#1E3A6E 0 23%,transparent 24%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 8px,transparent 8px 16px),
    linear-gradient(160deg,#243449,#0F1722)}
.mc-open2 .back::before{content:"";position:absolute;left:8px;right:8px;top:8px;bottom:8px;border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.55)}
.mc-open2 .back::after{content:"M";position:absolute;left:50%;top:44%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:#F5F2E8;color:#1E3A6E;font-family:var(--display);font-weight:800;font-size:1.7rem;
  box-shadow:0 0 0 4px #1E3A6E,0 0 0 7px #F5F2E8}
.mc-op-rar{position:absolute;left:50%;bottom:-13px;translate:-50% 0;z-index:4;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.3em .8em;border-radius:999px;color:#0B0E13;background:var(--rc);box-shadow:0 0 0 2px #0B0E13,0 6px 14px rgba(0,0,0,.5);
  opacity:0;transform:scale(.4)}
.mc-open2 .slot.revele .mc-op-rar{animation:mcOpRar .5s var(--ease-back) forwards}
@keyframes mcOpRar{to{opacity:1;transform:scale(1)}}
.mc-op-etin{position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none}
.mc-op-etin i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:2px;background:var(--rc);rotate:45deg;
  box-shadow:0 0 10px var(--rc);animation:mcOpEtin .85s ease-out forwards}
@keyframes mcOpEtin{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.mc-op-bilan{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:var(--sp-3);animation:mcOpTitre .5s var(--ease-back) both}
.mc-op-bilan span{padding:.45em .9em;border-radius:999px;font-weight:700;font-size:.85rem;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mc-op-bilan .n{background:#3ED07A}
.mc-op-bilan .d{background:#9ED0EA}
.mc-op-bilan .s{background:#C98BEE}
@media (prefers-reduced-motion:reduce){
  .mc-op-pack,.mc-op-flotte,.mc-op-pointilles,.mc-op-titre,.mc-op-bilan,.mc-open2 .slot.revele.r3::before{animation:none}
}


/* ==================== HABILLAGE CARTOON UNIVERSEL — CHROME ==================== */
body{background:radial-gradient(1200px 620px at 8% -8%,rgba(62,143,212,.16),transparent 62%),
  radial-gradient(900px 520px at 108% 6%,rgba(208,72,158,.12),transparent 60%),var(--nuit)}
/* — En-tête : une frise aux couleurs des lignes — */
header.top{border-bottom:0;box-shadow:0 3px 0 #0B0E13}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,#FFCD00 0 12.5%,#0064B0 0 25%,#9F9825 0 37.5%,#C04191 0 50%,#F28E42 0 62.5%,
    #6ECA97 0 75%,#FA9ABA 0 87.5%,#62259D 0)}
/* — Boutons : trait noir et ombre portée, comme des autocollants — */
.btn{font-weight:800;box-shadow:inset 0 0 0 1.5px var(--bd),0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--bd),0 0 0 2.5px #0B0E13,0 6px 0 #0B0E13}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1.5px var(--bd),0 0 0 2.5px #0B0E13,0 1px 0 #0B0E13}
.btn--ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.btn--ghost:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.btn--ghost:active{transform:scale(.97);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.btn--solid{--bg:var(--cr-plat)}
.btn--solid:hover{background:#FFE9A8}
/* — Titres de section : une plaque de quai cartoon — */
.panneau{color:#fff;border-radius:16px;background:linear-gradient(160deg,#2E4560,#172230);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(255,255,255,.1),0 5px 0 #0B0E13}
.panneau::before{width:14px;height:14px;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.tag{color:#DCE3EA;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
.strip-dot{box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
/* — Règles présentées en étapes — */
.ap-regles{max-width:none}
.ap-regles-l{list-style:none;counter-reset:rg;margin:.9em 0 0;padding:0;display:grid;gap:6px;max-width:68ch}
.ap-regles-l li{counter-increment:rg;position:relative;padding:.5em .8em .5em 2.7em;border-radius:12px;color:#fff;
  font-weight:600;font-size:.9rem;line-height:1.45;background:rgba(11,14,19,.3);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);
  animation:apMonte .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*60ms)}
.ap-regles-l li::before{content:counter(rg);position:absolute;left:.55em;top:.45em;width:1.65em;height:1.65em;border-radius:50%;
  display:grid;place-items:center;background:var(--cr-blanc);color:#0B0E13;font-family:var(--display);font-weight:800;font-size:.78rem;
  box-shadow:0 0 0 2px #0B0E13}
.ap-regles:not(.ouvert) li.plus{display:none}
.ap-regles-b{margin-top:8px;padding:.4em .9em;border-radius:999px;font-weight:800;font-size:.78rem;color:#0B0E13;
  background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
/* — Écran de fin : les petites rames sont les rames cartoon — */
.hopcar .ap-metro-svg{display:block;width:84px;height:auto}
.ap .endcard .plaque{box-shadow:0 0 0 3px #fff,0 0 0 6px #0B0E13,0 8px 0 6px #0B0E13!important}
/* — Accueil : cartes des jeux principaux — */
.ap-pj-grille{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));margin-top:var(--sp-5)}
.ap-pj{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:var(--sp-3);
  text-align:left;color:#fff;padding:var(--sp-5) var(--sp-5) 100px;border-radius:28px;overflow:hidden;isolation:isolate;min-height:280px;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--g) 45%,transparent),0 26px 50px -26px var(--g);
  animation:apMonte .5s var(--ease-back) backwards;animation-delay:calc(var(--i)*80ms);
  transition:transform .28s var(--ease-back),box-shadow .28s var(--ease-std)}
.ap-pj:hover{transform:translateY(-6px) rotate(-.4deg);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 8px var(--g),0 34px 60px -26px var(--g)}
.ap-pj--grand{grid-column:1/-1}
.ap-pj-art{position:absolute;inset:0;z-index:-1;background:var(--g)}
.ap-pj-art .ap-ban-fond{position:absolute;inset:0}
.ap-pj-art .ap-ban-voie{position:absolute;left:0;right:0;bottom:0;height:90px}
.ap-pj-t{display:block;margin:.2em 0 0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.8rem,4.2vw,2.6rem);line-height:.95;
  text-shadow:2px 2px 0 #0B0E13,-1.5px -1.5px 0 #0B0E13,1.5px -1.5px 0 #0B0E13,-1.5px 1.5px 0 #0B0E13,0 5px 0 #0B0E13}
.ap-pj-txt p{margin:.7em 0 0;max-width:54ch;font-weight:600;font-size:.92rem;line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ap-pj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-3)}
.ap-pj-tags span{padding:.35em .75em;border-radius:999px;font-size:.72rem;font-weight:800;color:#0B0E13;background:var(--cr-blanc);
  box-shadow:0 0 0 2px #0B0E13}
.ap-pj-em .ap-emb{display:block;width:clamp(80px,11vw,118px);height:auto;animation:apBalance 3.4s ease-in-out infinite;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 10px rgba(0,0,0,.35))}
.ap-pj-pied{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:var(--sp-2)}
.ap-pj-rec{font-family:var(--mono);font-size:.72rem;padding:.4em .75em;border-radius:999px;background:rgba(11,14,19,.4);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.ap-pj-go{padding:.6em 1.15em;border-radius:999px;background:var(--cr-blanc);color:#0B0E13;font-family:var(--display);font-weight:800;
  font-size:.88rem;text-transform:uppercase;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;transition:transform .2s var(--ease-back)}
.ap-pj:hover .ap-pj-go{transform:translateX(5px)}
@media (max-width:560px){ .ap-pj{grid-template-columns:1fr;padding-inline:var(--sp-4)} .ap-pj-em{display:none} }
@media (prefers-reduced-motion:reduce){ .ap-regles-l li,.ap-pj,.ap-pj-em .ap-emb{animation:none} }

/* ==================== HABILLAGE CARTOON — ONGLET FRANCE ==================== */
.fr-hero{background:radial-gradient(110% 120% at 100% 0%,rgba(227,5,28,.28),transparent 55%),
    radial-gradient(100% 120% at 0% 100%,rgba(62,143,212,.4),transparent 60%),linear-gradient(150deg,#1B4E9B,#0E2140 70%);
  border-radius:28px;box-shadow:0 0 0 3px #0B0E13,0 0 0 7px rgba(62,143,212,.4),0 26px 50px -26px #3E8FD4}
.fr-tricolore{width:14px}
.fr-h1{color:#fff;text-transform:uppercase;letter-spacing:-.02em;
  text-shadow:2px 2px 0 #0B0E13,-1.5px -1.5px 0 #0B0E13,1.5px -1.5px 0 #0B0E13,-1.5px 1.5px 0 #0B0E13,0 5px 0 #0B0E13}
.fr-sub{color:#E6EEF8;font-weight:600}
.fr-mini{opacity:.55}
.fr-mini-r{stroke:#0B0E13;stroke-width:4}
.fr-prog{border-radius:22px;background:linear-gradient(160deg,#17263A,#0E1826);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(62,143,212,.3)}
.fr-prog-b{height:16px;box-shadow:inset 0 0 0 2px #0B0E13}
.fr-prog-b i{background:repeating-linear-gradient(90deg,#1B4E9B 0 14px,#F5F2E8 14px 28px,#E3051C 28px 42px)}
.fr-prog-c{border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.fr-prog-s span{padding:.35em .75em;border-radius:999px;font-weight:700;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
/* les cartes de jeu : une vitrine colorée et un autocollant */
.fr-grille{gap:var(--sp-5) var(--sp-4)}
.fr-carte-jeu{border-radius:22px;background:linear-gradient(180deg,#17202C,#10161F);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c) 50%,transparent),0 18px 32px -20px var(--c)}
.fr-carte-jeu:hover{transform:translateY(-7px) rotate(-.6deg);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 26px 44px -20px var(--c)}
.fr-carte-jeu::before{display:none}
.fr-vis{position:relative;height:118px;margin:calc(-1*var(--sp-4)) calc(-1*var(--sp-4)) var(--sp-3);border-bottom:2.5px solid #0B0E13;
  background:radial-gradient(90% 90% at 50% 120%,rgba(255,255,255,.3) 0 34%,transparent 35%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px),
    linear-gradient(160deg,color-mix(in srgb,var(--c) 80%,var(--cr-blanc)),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000))}
.fr-vis::before{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;translate:-50% -50%;border-radius:50%;
  background:rgba(11,14,19,.28);box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(255,255,255,.6)}
.fr-vis svg{position:relative;stroke:#fff;stroke-width:2.6}
.fr-carte-jeu h3{text-transform:uppercase;font-weight:800}
.fr-play{padding:.45em .9em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.75rem;text-transform:uppercase;
  color:#fff;background:var(--c);box-shadow:0 0 0 2px #0B0E13,0 4px 0 #0B0E13}
.fr-badge{border-radius:16px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,255,255,.1)}
.fr-badge.on{background:linear-gradient(160deg,rgba(255,206,0,.25),rgba(255,206,0,.06));box-shadow:0 0 0 2px #0B0E13,0 0 0 4px rgba(255,206,0,.5)}
/* en partie : bandeau, questions, fiches, modes */
.ap .fr-bar{border-radius:18px;background:linear-gradient(120deg,color-mix(in srgb,var(--g) 30%,#101722),#101722 72%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g) 45%,transparent),0 12px 26px -16px var(--g)}
.ap .fr-stat{padding:.3em .7em;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ap .fr-stat span{color:color-mix(in srgb,var(--g) 50%,#fff)}
.fr-q-t{font-size:clamp(1.15rem,2.6vw,1.45rem);font-weight:800}
.fr-choix{gap:10px}
.fr-choix-b{border-radius:16px;font-weight:700;font-size:.95rem;background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),inset 5px 0 0 var(--g,#3E8FD4),0 5px 0 rgba(0,0,0,.4)}
.fr-choix-b:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g,#3E8FD4) 70%,transparent),inset 5px 0 0 var(--g,#3E8FD4),0 8px 0 rgba(0,0,0,.4)}
.fr-choix-b.juste{background:linear-gradient(170deg,rgba(62,208,122,.32),rgba(0,129,79,.14));box-shadow:inset 0 0 0 2.5px #3ED07A,inset 5px 0 0 #3ED07A,0 5px 0 rgba(0,0,0,.4)}
.fr-choix-b.faux{background:linear-gradient(170deg,rgba(255,90,110,.3),rgba(196,16,42,.14));box-shadow:inset 0 0 0 2.5px #FF5A6E,inset 5px 0 0 #FF5A6E,0 5px 0 rgba(0,0,0,.4)}
.fr-fiche{border-radius:20px;background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--g,#3E8FD4) 40%,transparent)}
.fr-syms i{font-weight:700;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.fr-silhouette,.fr-tableau,.fr-monde{box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--g,#3E8FD4) 45%,transparent)}
.fr-modes{gap:var(--sp-4);max-width:760px}
.fr-mode{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:var(--sp-5) var(--sp-4);border-radius:22px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 32%,#172130),#0F151E 78%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c) 55%,transparent),0 7px 0 5px #0B0E13}
.fr-mode:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 12px 0 5px #0B0E13}
.fr-mode b{font-size:1.3rem;font-weight:800;text-transform:uppercase;color:#fff}
.fr-mode span{color:#C3CCD6}
.fr-mode-vis{width:84px;height:84px;display:grid;place-items:center;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(255,255,255,.55);margin-bottom:var(--sp-2)}
.fr-mode-vis svg{stroke:#fff}
.fr-indice-b{font-weight:800;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13;color:#0B0E13;background:#FFCE00}
/* l'écran de fin */
.fr-fin{padding:var(--sp-5);border-radius:26px;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--g,#3E8FD4) 38%,transparent),transparent 65%),
    linear-gradient(170deg,#17202C,#0F151E);box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--g,#3E8FD4) 45%,transparent)}
.fr-fin-t{text-transform:uppercase;font-weight:800;color:#fff;text-shadow:0 3px 0 #0B0E13}
.fr-etoiles{font-size:2.8rem}
.fr-et.on{-webkit-text-stroke:2px #0B0E13}
.fr-stat-c{border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 5px 0 rgba(0,0,0,.35)}
.fr-stat-c:nth-child(3n+1) b{color:#FFCE00}.fr-stat-c:nth-child(3n+2) b{color:#3ED07A}.fr-stat-c:nth-child(3n) b{color:#7CC4FF}
.fr-explo{border-radius:16px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(62,143,212,.4)}

/* ==================== HABILLAGE CARTOON — CLASSEMENT, CRÉER, ACCUEIL ==================== */
.lb-carte{border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,255,255,.1),0 4px 0 #0B0E13}
.lb-carte:hover{transform:translateX(4px) translateY(-1px)}
.lb-carte--moi{border-radius:26px;background:radial-gradient(110% 120% at 100% 0%,rgba(255,206,0,.22),transparent 55%),
    linear-gradient(150deg,#1F2E44,#0E1622);box-shadow:0 0 0 3px #0B0E13,0 0 0 7px rgba(255,206,0,.45),0 22px 44px -22px #FFCE00}
.lb-carte.moi{background:linear-gradient(90deg,rgba(255,206,0,.22),rgba(255,206,0,.05));box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 2px #FFCE00,0 4px 0 #0B0E13}
.lb-av{background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 #0B0E13}
.lb-rang{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;color:#0B0E13;background:#9ED0EA;
  box-shadow:0 0 0 2px #0B0E13}
.lb-pts{padding:.35em .75em;border-radius:999px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.lb-xp{height:14px;box-shadow:inset 0 0 0 2px #0B0E13}
.lb-xp i{background:repeating-linear-gradient(90deg,#3ED07A 0 14px,#FFCE00 14px 28px)}
.lb-chiffres div{border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 4px 0 rgba(0,0,0,.35)}
.lb-chiffres div:nth-child(4n+1) b{color:#FFCE00}.lb-chiffres div:nth-child(4n+2) b{color:#3ED07A}
.lb-chiffres div:nth-child(4n+3) b{color:#7CC4FF}.lb-chiffres div:nth-child(4n) b{color:#FF9ACD}
.lb-invite{border-radius:22px;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(62,143,212,.4)}
.lb-badge{border-radius:16px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,255,255,.1)}
.lb-badge.eu{background:linear-gradient(160deg,rgba(255,206,0,.28),rgba(255,206,0,.06));box-shadow:0 0 0 2px #0B0E13,0 0 0 4px rgba(255,206,0,.5)}
.lb-pick{font-weight:800;color:#DCE3EA;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
.lb-pick:hover{transform:translateY(-2px)}
.lb-pick.on{background:#FFCE00;color:#0B0E13;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.lb-podium{gap:var(--sp-4)}
.lb-marche b{color:#fff;text-shadow:0 2px 0 #0B0E13}
.lb-marche .lb-pts{color:#0B0E13}
.lb-socle{border-radius:16px 16px 4px 4px;color:rgba(11,14,19,.6);box-shadow:0 0 0 3px #0B0E13,inset 0 6px 0 rgba(255,255,255,.35)}
.lb-conseil{border-radius:18px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,206,0,.45)}
/* — Créer — */
.cr-duo{gap:var(--sp-5)}
.cr-carte{--cc:#C04191;border-radius:26px;padding-top:0;background:linear-gradient(180deg,#17202C,#10161F);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--cc) 45%,transparent),0 22px 40px -22px var(--cc)}
.cr-carte--ligne{--cc:#00A88F}
.cr-carte:hover,.cr-carte--tier:hover,.cr-carte--ligne:hover{transform:translateY(-7px) rotate(-.5deg);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 8px var(--cc),0 30px 50px -22px var(--cc)}
.cr-vis{height:150px;margin:0 calc(-1*var(--sp-5)) var(--sp-4);padding:var(--sp-4) var(--sp-5);border-bottom:3px solid #0B0E13;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 10px,transparent 10px 20px),
    linear-gradient(160deg,color-mix(in srgb,var(--cc) 80%,var(--cr-blanc)),var(--cc) 55%,color-mix(in srgb,var(--cc) 65%,#000))}
.cr-carte h3{text-transform:uppercase;font-weight:800;font-size:1.4rem}
.cr-tier-lab{box-shadow:0 0 0 2px #0B0E13;width:28px;height:26px;font-size:.85rem}
.cr-pas{width:26px;height:26px;font-size:.72rem;box-shadow:0 0 0 2px #0B0E13}
.cr-mini path{stroke:#fff;stroke-width:9}
.cr-mini circle{stroke:#0B0E13}
/* — Accueil : la fréquentation des lignes — */
.rankpanel{max-width:620px;padding:var(--sp-4);border-radius:22px;background:linear-gradient(170deg,#17202C,#0F151E);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(62,143,212,.3)}
.rankrow .pos{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#F5F2E8;color:#0B0E13;
  font-weight:700;box-shadow:0 0 0 2px #0B0E13}


/* ==================== HABILLAGE CARTOON — MENUS DES JEUX PRINCIPAUX ==================== */
.snk-titre,.rn-titre,.so-titre,.md-titre,.mdx-titre,.av-titre{color:#fff;
  text-shadow:2px 2px 0 #0B0E13,-1.5px -1.5px 0 #0B0E13,1.5px -1.5px 0 #0B0E13,-1.5px 1.5px 0 #0B0E13,0 5px 0 #0B0E13}
.rn-titre{background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none}
/* — Snake — */
.snk-apercu,.rn-scene{border-radius:24px;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--g,#662483) 50%,transparent),0 22px 44px rgba(0,0,0,.45)}
.snk-rec{border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 5px 0 rgba(0,0,0,.35)}
.snk-rec:nth-child(4n+1) b{color:#FFCE00}.snk-rec:nth-child(4n+2) b{color:#3ED07A}
.snk-rec:nth-child(4n+3) b{color:#7CC4FF}.snk-rec:nth-child(4n) b{color:#FF9ACD}
.snk-lab{display:inline-block;padding:.4em .85em;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--g,#662483) 60%,#0B0E13);box-shadow:inset 0 0 0 1.5px var(--g,#662483),0 3px 0 #0B0E13}
.snk-l,.rn-lchoix{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.snk-l{opacity:.72}
.snk-l.on{box-shadow:0 0 0 3px #fff,0 0 0 6px #0B0E13,0 9px 0 6px #0B0E13}
.snk-c,.snk-s{border-radius:16px;background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 5px 0 rgba(0,0,0,.4)}
.snk-c:hover:not([disabled]){transform:translateY(-3px);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--g,#662483) 70%,transparent),0 8px 0 rgba(0,0,0,.4)}
.snk-c.on{background:linear-gradient(170deg,rgba(255,206,0,.28),rgba(255,206,0,.08));box-shadow:inset 0 0 0 2.5px #FFCE00,0 5px 0 rgba(0,0,0,.4)}
.snk-c b,.snk-s b{text-transform:uppercase;font-weight:800}
.snk-s.on{background:linear-gradient(160deg,rgba(255,206,0,.25),rgba(255,206,0,.06));box-shadow:inset 0 0 0 2px rgba(255,206,0,.6),0 5px 0 rgba(0,0,0,.4)}
.snk-fin-plaque{box-shadow:0 0 0 3px #fff,0 0 0 6px #0B0E13,0 8px 0 6px #0B0E13}
.snk-fin-stats>*{border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1),0 5px 0 rgba(0,0,0,.35)}
/* — Runner — */
.rn-regle{border-radius:20px;background:linear-gradient(170deg,color-mix(in srgb,var(--g,#E3051C) 24%,#172130),#0F151E 80%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--g,#E3051C) 40%,transparent),0 6px 0 5px #0B0E13}
.rn-regle span{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:var(--cr-blanc);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.rn-regle b{text-transform:uppercase;color:#fff}
.rn-lchoix:hover{transform:translateY(-6px) scale(1.12) rotate(-6deg)}
/* — Solitaire, reconnaître une station, itinéraire avancé : les cartes de mode — */
.so-mode,.im-niv,.av-palier{border-radius:22px;background:linear-gradient(170deg,color-mix(in srgb,var(--c) 26%,#172130),#0F151E 80%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c) 45%,transparent),0 6px 0 5px #0B0E13}
.so-mode::before,.im-niv::before,.av-palier::before{width:9px;box-shadow:2px 0 0 #0B0E13}
.so-mode:hover,.im-niv:hover,.av-palier:hover{transform:translateY(-6px) rotate(-.6deg);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 11px 0 5px #0B0E13}
.so-mode.on,.av-palier.on{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 0 26px -4px var(--c),0 6px 0 5px #0B0E13}
.so-mode b,.im-niv b,.av-palier b{text-transform:uppercase;color:#fff}
.av-num{box-shadow:0 0 0 2.5px #0B0E13}
.so-reprise{border-radius:22px;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(255,206,0,.45)}
.mdx-niveau{border-radius:18px;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(165,91,216,.4),0 5px 0 5px #0B0E13}

/* — MétroDrop : le hub, en cartes cartoon — */
.mdx-bandeau{border-radius:20px;background:linear-gradient(150deg,color-mix(in srgb,var(--c,#0064B0) 26%,#172130),#0F151E 80%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#0064B0) 45%,transparent),0 5px 0 5px #0B0E13}
.mdx-bandeau b{text-transform:uppercase;font-weight:800}
.mdx-xp>i{height:10px;background:repeating-linear-gradient(90deg,var(--c,#0064B0) 0 12px,color-mix(in srgb,var(--c,#0064B0) 55%,var(--cr-blanc)) 12px 16px)}
.mdx-xp::before{height:10px;box-shadow:inset 0 0 0 1.5px #0B0E13}
.mdx-note{border-radius:16px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(62,143,212,.4)}
.mdx-pret{border-radius:16px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(62,208,122,.5)}
.mdx-lab{display:inline-block;align-self:flex-start;padding:.35em .8em;border-radius:999px;color:#fff;
  background:color-mix(in srgb,var(--g,#0064B0) 60%,#0B0E13);box-shadow:inset 0 0 0 1.5px var(--g,#0064B0)}
.mdx-etape i{box-shadow:0 0 0 2px #0B0E13}
.mdx-etape.faite i{background:#3ED07A}
.mdx-etape.ici i{background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 0 0 5px rgba(255,206,0,.35)}
.mdx-cmds>*{border-radius:16px}

/* ==================== HABILLAGE CARTOON — FENÊTRES, MENU, PROFIL, ATELIERS ==================== */
.gmenu{border-radius:22px;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(255,206,0,.35),0 30px 60px rgba(0,0,0,.6)}
.modal-in,.mc-modal .box{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px rgba(255,255,255,.1),0 40px 90px rgba(0,0,0,.65)}
.mc-modal .box{border-radius:26px}
.toast{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13,0 18px 40px rgba(0,0,0,.5)}
.tabs{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.tabs button[aria-selected="true"]{background:#FFCE00;color:#0B0E13;box-shadow:0 0 0 2px #0B0E13}
.field input,.ac input{border-radius:14px}
.field input:focus{outline:none;box-shadow:inset 0 0 0 2.5px #FFCE00,0 0 0 4px rgba(255,206,0,.25)}
/* le profil : ses lignes de record deviennent des cartes */
.ap--profil .plaque{box-shadow:0 0 0 3px #fff,0 0 0 6px #0B0E13,0 8px 0 6px #0B0E13}
.ap--profil .gamebar{border-radius:18px;background:linear-gradient(120deg,rgba(255,206,0,.16),#101722 70%);
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,206,0,.3),0 4px 0 #0B0E13}
.ap--profil .gamebar .hudval{color:#FFCE00}
/* les ateliers : cadre cartoon autour des grands panneaux */
.ap--atelier .stage,.ap--atelier .notice{border-radius:22px}


/* — MétroDrop : les compteurs et cadrans du hub — */
.mdx-chif,.mdx-dl,.mdx-cadran{border-radius:16px;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,255,255,.1),0 4px 0 #0B0E13}


/* — Icônes cartoon à la place des emojis — */
.ci{display:inline-block;position:relative;width:1.22em;height:1.22em;vertical-align:-.26em;line-height:1;font-style:normal;
  pointer-events:none;flex:none}
.ci-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.ci-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}


/* ==========================================================================
   SNAKE — l'intérieur du jeu en cartoon
   ========================================================================== */
.snk-hud{gap:10px;margin-bottom:14px;animation:snkHudIn .55s var(--ease-back) both}
@keyframes snkHudIn{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
.snk-h{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;text-align:left;
  padding:8px 12px 8px 8px;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border:2.5px solid #0B0E13;box-shadow:0 5px 0 #0B0E13}
.snk-h::after{content:"";position:absolute;left:6px;right:6px;top:3px;height:36%;border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.snk-h-ico{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-style:normal;font-size:1.35rem;line-height:1;background:var(--hc,#FFCE00);border:2.5px solid #0B0E13;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),inset 0 3px 0 rgba(255,255,255,.45)}
.snk-h-ico .ci{width:1.15em;height:1.15em;vertical-align:0}
.snk-h-v{position:relative;z-index:1;min-width:0}
.snk-h b{color:#0B0E13;font-size:clamp(1.05rem,2.4vw,1.45rem)}
.snk-h span{color:#5A5F68;font-weight:700}
#snkh-ligne{--hc:#FFFFFF;box-shadow:0 5px 0 #0B0E13}
#snkh-score{--hc:#FFCE00} #snkh-st{--hc:#8FD3F5} #snkh-combo{--hc:#FF9A52}
#snkh-tick{--hc:#FFE6A0} #snkh-rec{--hc:#D5B8FF}
#snkh-ligne b{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;padding:0 .3em;border-radius:999px;
  font-size:1.02rem;background:var(--c,#FFCE00);color:var(--i,#fff);border:2.5px solid #0B0E13;box-shadow:0 2px 0 #0B0E13}
#snkh-tick b{color:#0B0E13}
#snkh-tick.vide b{color:#9AA1AB}
#snkh-tick.vide .snk-h-ico{filter:grayscale(1);opacity:.55}
.snk-h.chaud{background:linear-gradient(180deg,#FFF0B8,#FFC24A)}
.snk-h.chaud b{color:#C2410C}
.snk-h.chaud .snk-h-ico{animation:snkFlamme .42s ease-in-out infinite alternate}
@keyframes snkFlamme{from{transform:rotate(-9deg) scale(1)}to{transform:rotate(9deg) scale(1.13)}}

/* l'objectif : un rail qui se remplit, un bouton-station au bout */
.snk-obj{position:relative;padding:8px 16px 8px 8px;margin-bottom:18px;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,#F3FFF6,#D3F2DF);border:2.5px solid #0B0E13;box-shadow:0 5px 0 #0B0E13}
.snk-obj-t{display:inline-flex;align-items:center;gap:.45em;padding:.45em .9em;border-radius:999px;
  background:#00814F;color:#fff;font-weight:700;border:2px solid #0B0E13;box-shadow:0 2px 0 #0B0E13}
.snk-obj-x{color:#0B0E13}
.snk-obj-j{position:relative;height:18px;overflow:visible;background:var(--cr-blanc);border:2.5px solid #0B0E13;
  box-shadow:inset 0 3px 0 rgba(0,0,0,.08)}
.snk-obj-j i{position:relative;background:repeating-linear-gradient(-45deg,#22C47F 0 8px,#00955A 8px 16px);
  animation:snkRails .9s linear infinite;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.snk-obj-j i::after{content:"";position:absolute;right:-11px;top:50%;width:22px;height:22px;margin-top:-11px;
  border-radius:50%;box-sizing:border-box;border:3px solid #0B0E13;
  background:radial-gradient(circle at 36% 34%,var(--cr-blanc) 0 28%,#FFCE00 31%)}
@keyframes snkRails{to{background-position:22.63px 0}}
.snk-obj-p{color:#1F5A3E;font-weight:700}

/* le plateau : un cadre épais à la couleur de la ligne */
.snk-cadre{margin:14px 12px 26px;border-radius:24px;background:#0A121B;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 10px var(--c,#FFCE00),0 0 0 13px #0B0E13,0 22px 0 10px rgba(0,0,0,.32);
  transition:box-shadow .4s var(--ease-std)}
@keyframes snkSecours{
  0%{box-shadow:0 0 0 3px #0B0E13,0 0 0 13px #FFCE00,0 0 0 16px #0B0E13,0 0 50px 24px rgba(255,206,0,.75)}
  100%{box-shadow:0 0 0 3px #0B0E13,0 0 0 10px var(--c,#FFCE00),0 0 0 13px #0B0E13,0 22px 0 10px rgba(0,0,0,.32)}}
.snk-pausebtn{top:10px;right:10px;width:52px;height:52px;padding:0;display:grid;place-items:center;border-radius:50%;
  font-size:2.3rem;line-height:1;background:transparent;box-shadow:none;border:0;
  transition:transform .16s var(--ease-back)}
.snk-pausebtn:hover{background:transparent;transform:scale(1.1) rotate(-7deg)}
.snk-pausebtn:active{transform:scale(.9)}
.snk-pausebtn .ci{width:1.2em;height:1.2em;vertical-align:0}
.snk-pausebtn .ci-svg{filter:drop-shadow(0 3px 0 #0B0E13)}

/* la pause : une carte crème, la rame fait la sieste */
.snk-pause{background:rgba(6,9,14,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.snk-pause-in{position:relative;margin:16px;max-width:440px;padding:18px 24px 24px;border-radius:26px;color:#0B0E13;
  background:linear-gradient(180deg,#FFFBEF,#F1E6CB);border:3px solid #0B0E13;box-shadow:0 8px 0 #0B0E13}
.snk-pause-t{color:#0B0E13}
.snk-pause-d{color:#4A4F57}
.snk-pause-in .btn{--bg:#FFFFFF;--fg:#0B0E13;color:#0B0E13}
.snk-pause-in .btn--solid{--bg:#FFCE00}
.snk-pause-in .btn--ghost{--bg:#E9E1CC;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.snk-pause-train{position:relative;width:min(210px,56vw);margin:-2px auto 8px;animation:snkDort 2.8s ease-in-out infinite}
.snk-pause-train svg{display:block;width:100%;height:auto}
.snk-zzz{position:absolute;right:6%;top:-4%;font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff;
  -webkit-text-stroke:1.4px #0B0E13;paint-order:stroke fill}
.snk-zzz i{position:absolute;right:0;top:0;font-style:normal;opacity:0;animation:snkZ 2.4s ease-in infinite}
.snk-zzz i:nth-child(2){animation-delay:.8s;font-size:1.3em}
.snk-zzz i:nth-child(3){animation-delay:1.6s;font-size:1.65em}
@keyframes snkZ{0%{opacity:0;transform:translate(0,0) rotate(-12deg) scale(.6)}25%{opacity:1}
  100%{opacity:0;transform:translate(26px,-46px) rotate(14deg) scale(1)}}
@keyframes snkDort{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}

/* la croix tactile : de grosses touches jaunes */
.snk-pad{grid-template-columns:repeat(3,66px);grid-template-rows:repeat(2,66px);gap:10px;margin-top:6px}
.snk-p{border-radius:20px;font-size:1.5rem;color:#0B0E13;background:linear-gradient(180deg,#FFE680,#FFC400);
  border:3px solid #0B0E13;box-shadow:0 6px 0 #0B0E13,inset 0 3px 0 rgba(255,255,255,.55);transition:transform .08s}
.snk-p:active{transform:translateY(5px);box-shadow:0 1px 0 #0B0E13;background:var(--cr-blanc);color:#0B0E13}

/* la règle : une note de quai */
.snk-regle{position:relative;max-width:68ch;margin:18px auto 0;padding:14px 18px 14px 62px;text-align:left;color:#2A2F36;
  background:var(--cr-plat);border:2.5px solid #0B0E13;border-radius:18px;box-shadow:0 5px 0 #0B0E13}
.snk-regle::before{content:"i";position:absolute;left:14px;top:14px;width:34px;height:34px;display:grid;place-items:center;
  border-radius:50%;background:#0064B0;color:#fff;font-family:Georgia,serif;font-style:italic;font-weight:800;font-size:1.2rem;
  border:2.5px solid #0B0E13;box-shadow:0 3px 0 #0B0E13}
.snk-aide{display:table;margin:16px auto 0;padding:.55em 1.1em;border-radius:999px;color:#C9CED6;
  background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.28)}

/* le terminus */
.snk-fin-scene{max-width:420px;margin:0 auto 4px}
.snk-fin-svg{display:block;width:100%;height:auto;overflow:visible}
.snk-fin-rame{animation:snkArrivee 1.15s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes snkArrivee{0%{transform:translateX(-360px)}72%{transform:translateX(5px)}86%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.snk-fin-choc{transform-box:fill-box;transform-origin:center;animation:snkChoc .9s .78s ease-out both}
@keyframes snkChoc{0%{opacity:0;transform:scale(.2) rotate(-30deg)}35%{opacity:1;transform:scale(1.25) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}}
.snk-fin-lampe{animation:snkLampe 1s steps(2) infinite}
@keyframes snkLampe{50%{opacity:.25}}
.snk-fin-plaque{display:inline-block;padding:.45em 1.3em;border-radius:14px;background:#153E8C;color:#fff;
  font-family:var(--display);font-weight:800;letter-spacing:.08em;font-size:clamp(1.4rem,4vw,2.2rem);
  border:3px solid #0B0E13;box-shadow:inset 0 0 0 3px #153E8C,inset 0 0 0 5px #fff,0 7px 0 #0B0E13;
  animation:snkPlaque .7s .2s var(--ease-back) both}
@keyframes snkPlaque{from{transform:translateY(-26px) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.snk-fin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.snk-fs{border-radius:18px;color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  border:2.5px solid #0B0E13;box-shadow:0 5px 0 #0B0E13}
.snk-fs:first-child{background:linear-gradient(180deg,#FFF1B0,#FFCE00)}
.snk-fs b{color:#0B0E13}
.snk-fs span{color:#5A5F68;font-weight:700}
.snk-record{display:inline-block;padding:.4em 1.1em;border-radius:999px;background:#FFCE00;color:#0B0E13;
  border:2.5px solid #0B0E13;box-shadow:0 4px 0 #0B0E13;animation:snkChaud .9s var(--ease-back) infinite alternate}
.snk-cause{display:inline-block;padding:.5em 1.1em;border-radius:14px;color:#FFD5D9;
  background:rgba(227,5,28,.16);border:2px solid #E3051C}

@media (max-width:820px),(pointer:coarse){ .snk-cadre{margin:12px 10px 22px} }
@media (max-width:1150px){
  .snk-h{flex-direction:column;text-align:center;gap:4px;padding:8px 4px 7px}
  .snk-h-ico{width:30px;height:30px;font-size:1.05rem}
  .snk-h span{font-size:.5rem;letter-spacing:.08em}
  .snk-regle{padding:12px 14px 12px 56px}
}
@media (prefers-reduced-motion:reduce){
  .snk-hud,.snk-obj-j i,.snk-pause-train,.snk-zzz i,.snk-fin-rame,.snk-fin-choc,.snk-fin-lampe,.snk-record,.snk-h.chaud .snk-h-ico{animation:none}
}


/* ==========================================================================
   MÉTRODROP — cabine, pupitre, arrivée et plateau en cartoon
   ========================================================================== */
/* — la verrière : un cadre épais à la couleur de la ligne — */
.mdx-cab{gap:14px}
.mdx-vue{margin:14px 12px 8px;border-radius:26px;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 10px var(--c,#0064B0),0 0 0 13px #0B0E13,0 22px 0 10px rgba(0,0,0,.32)}
.mdx-mont{background:linear-gradient(90deg,color-mix(in srgb,var(--c,#0064B0) 55%,var(--cr-blanc)) 0 14%,var(--c,#0064B0) 38%,
    color-mix(in srgb,var(--c,#0064B0) 55%,#0B0E13) 100%);
  box-shadow:inset -3.5px 0 0 #0B0E13,10px 0 22px -10px rgba(0,0,0,.85)}
.mdx-mont::after{width:6px;left:34%;background:radial-gradient(circle,#0B0E13 0 2.4px,transparent 2.8px) 50% 0/6px 26px repeat-y;opacity:.6}
.mdx-toit{background:linear-gradient(180deg,#22304C,#141D33 70%,rgba(20,29,51,0));box-shadow:inset 0 -3px 0 rgba(11,14,19,.8)}
.mdx-pupitre{background:linear-gradient(180deg,#34486E,#1B2745 62%);
  box-shadow:inset 0 3.5px 0 #0B0E13,inset 0 7px 0 rgba(255,255,255,.14),0 -22px 40px -20px rgba(0,0,0,.95)}
.mdx-pupitre::before{height:7px;opacity:1;top:26%;box-shadow:0 0 0 2px #0B0E13;
  background:linear-gradient(90deg,var(--c,#0064B0),color-mix(in srgb,var(--c,#0064B0) 60%,var(--cr-blanc)),var(--c,#0064B0))}
.mdx-pupitre::after{content:"";position:absolute;left:36%;right:36%;top:54%;height:10px;
  background:radial-gradient(circle,#3EE07A 0 3.4px,#0B0E13 3.6px 4.6px,transparent 5px) 0 50%/20px 10px repeat-x;
  animation:mdxVoyants 1.4s steps(2,end) infinite}
@keyframes mdxVoyants{50%{filter:hue-rotate(-100deg) brightness(1.2)}}

/* — l'afficheur de conduite : une plaque émaillée — */
.mdx-route{padding:7px 18px;border-radius:12px;font-family:var(--display);font-weight:800;font-size:.74rem;
  letter-spacing:.07em;color:#fff;background:#153E8C;
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 2.5px #153E8C,inset 0 0 0 4px #fff,0 5px 0 #0B0E13}
.mdx-route.proche{color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 2.5px #FFCE00,inset 0 0 0 4px #0B0E13,0 5px 0 #0B0E13,0 0 26px -4px #FFCE00;
  animation:mdxProche .7s ease-in-out infinite alternate}
@keyframes mdxProche{to{transform:translateX(-50%) scale(1.06)}}

/* — les messages : des bulles crème — */
.mdx-alerte{padding:10px 16px 10px 24px;border-radius:16px;text-align:left;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13,inset 9px 0 0 #6FBCEB}
.mdx-alerte b{color:#0B0E13}
.mdx-alerte span{color:#4A4F57}
.mdx-alerte--ok{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13,inset 9px 0 0 #3ED07A}
.mdx-alerte--ok b{color:#0F7A3E}
.mdx-alerte--warn{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13,inset 9px 0 0 #FF9A3D}
.mdx-alerte--warn b{color:#B4531A}
.mdx-alerte--bad{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13,inset 9px 0 0 #E3051C}
.mdx-alerte--bad b{color:#C00018}

/* — le tableau de bord : un pupitre riveté, des cadrans crème — */
.mdx-tb{position:relative;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:0 12px;
  padding:16px;border-radius:24px;background:linear-gradient(180deg,#2E3F5E,#1B2740);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,inset 0 3px 0 rgba(255,255,255,.14)}
.mdx-tb::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle at 9px 9px,#AFC0D6 0 2.4px,#0B0E13 2.6px 3.8px,transparent 4.2px),
    radial-gradient(circle at calc(100% - 9px) 9px,#AFC0D6 0 2.4px,#0B0E13 2.6px 3.8px,transparent 4.2px),
    radial-gradient(circle at 9px calc(100% - 9px),#AFC0D6 0 2.4px,#0B0E13 2.6px 3.8px,transparent 4.2px),
    radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#AFC0D6 0 2.4px,#0B0E13 2.6px 3.8px,transparent 4.2px)}
.mdx-cadran{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px 10px;
  border-radius:18px;color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),#EFE6CF);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,inset 0 3px 0 #fff}
.mdx-cl{margin-bottom:5px;padding:.25em .7em;border-radius:999px;color:#2A2F36;font-weight:700;background:var(--cr-blanc);
  box-shadow:0 0 0 1.5px #0B0E13}
.mdx-cadran b{color:#0B0E13}
.mdx-cadran i{color:#5A5F68;font-weight:700}
.mdx-cadran.cri{background:linear-gradient(180deg,#FFE3E3,#FFB3B3);animation:mdxCadCri .5s steps(2,end) infinite}
.mdx-cadran.cri b{color:#C00018}
@keyframes mdxCadCri{50%{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 0 8px rgba(227,5,28,.5)}}
/* le compteur à aiguille */
.mdx-dial{width:100%;max-width:170px;margin:-2px auto -2px}
.mdx-dial-svg{display:block;width:100%;height:auto;overflow:visible}
.mdx-aig,.mdx-limk{transform-box:view-box;transform-origin:60px 60px;transition:transform .16s linear}
.mdx-aig{transform:rotate(var(--a,-90deg))}
.mdx-limk{transform:rotate(var(--la,-90deg))}
.mdx-cadran.cri .mdx-aig{animation:mdxAig .1s steps(2,end) infinite}
@keyframes mdxAig{50%{translate:.8px 0}}
.mdx-cadran--vit b{font-size:1.4rem;margin-top:2px}
/* la limitation : un vrai panneau routier */
.mdx-cadran--lim b.mdx-lim-val{display:grid;place-items:center;width:2.4em;height:2.4em;margin:2px auto 4px;border-radius:50%;
  font-size:1.4rem;color:#0B0E13;background:var(--cr-blanc);border:.25em solid #E3051C;
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13}
/* la distance : un afficheur à cristaux */
.mdx-dist-val{min-width:4.4ch;padding:.1em .45em;border-radius:10px;letter-spacing:.06em;
  font-family:var(--mono)!important;font-size:1.5rem!important;color:#8CFFB4!important;background:#12301D;
  text-shadow:0 0 8px rgba(124,255,168,.65);box-shadow:0 0 0 2.5px #0B0E13,inset 0 3px 0 rgba(0,0,0,.4)}
/* le signal : deux feux, celui qui compte s'allume */
.mdx-cadran--sig::before{content:"";display:block;width:58px;height:26px;margin:0 auto 5px;border-radius:14px;
  background:
    radial-gradient(circle at 16px 50%,var(--sr,#5A1B1B) 0 7px,#0B0E13 7.4px 9px,transparent 9.4px),
    radial-gradient(circle at 42px 50%,var(--sv,#1B4A2A) 0 7px,#0B0E13 7.4px 9px,transparent 9.4px),#2A3140;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mdx-cadran--sig:has(.mdx-sig-val.rouge)::before{--sr:#FF3B3B;filter:drop-shadow(0 0 7px rgba(255,59,59,.85))}
.mdx-cadran--sig:has(.mdx-sig-val.vert)::before{--sv:#3EE07A;filter:drop-shadow(0 0 7px rgba(62,224,122,.75))}
.mdx-sig-val.rouge{color:#C00018!important}
.mdx-sig-val.vert{color:#0F7A3E!important}

/* — les jauges : des tubes cernés, la rame qui avance sur le trajet — */
.mdx-jauges{gap:14px;margin:0 12px;padding:12px 16px 14px;border-radius:18px;background:#1B2740;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mdx-jauge span{color:#DCE5F0;font-weight:700}
.mdx-j{position:relative;height:16px;overflow:visible;background:#0E1526;
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 3px 0 rgba(0,0,0,.45)}
.mdx-j i{position:relative;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.35)}
.mdx-j-frein{background:repeating-linear-gradient(-45deg,#FF4B3E 0 7px,#C8102E 7px 14px)!important}
.mdx-j-av{background:repeating-linear-gradient(90deg,var(--c,#0064B0) 0 14px,color-mix(in srgb,var(--c,#0064B0) 62%,var(--cr-blanc)) 14px 18px)!important}
.mdx-j-av::after{content:"";position:absolute;right:-17px;top:50%;width:32px;height:24px;margin-top:-13px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'%3E%3Crect x='1.5' y='2' width='26' height='15' rx='6' fill='%23FFF8E6' stroke='%230B0E13' stroke-width='2'/%3E%3Crect x='5' y='5' width='7' height='5' rx='1.5' fill='%23BDE6F7' stroke='%230B0E13' stroke-width='1.4'/%3E%3Crect x='14' y='5' width='7' height='5' rx='1.5' fill='%23BDE6F7' stroke='%230B0E13' stroke-width='1.4'/%3E%3Ccircle cx='25' cy='12' r='1.8' fill='%23FFCE00' stroke='%230B0E13'/%3E%3Ccircle cx='8' cy='19' r='2.4' fill='%230B0E13'/%3E%3Ccircle cx='20' cy='19' r='2.4' fill='%230B0E13'/%3E%3C/svg%3E") center/contain no-repeat}

/* — les commandes : de gros boutons d'arcade — */
.mdx-manche{grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px;margin:6px 12px 0}
.mdx-b{padding:10px 6px 12px;border-radius:20px;color:#0B0E13;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bt,#8FD3F5) 55%,var(--cr-blanc)),var(--bt,#8FD3F5));
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,inset 0 3px 0 rgba(255,255,255,.6),inset 0 -5px 0 rgba(0,0,0,.14)}
.mdx-b b{font-size:2rem;margin-bottom:3px;transition:transform .2s var(--ease-back)}
.mdx-b b .ci{width:1.15em;height:1.15em;vertical-align:0}
.mdx-b span{color:#0B0E13;font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.mdx-b:hover{filter:brightness(1.06)}
.mdx-b:hover b{transform:scale(1.12) rotate(-6deg)}
.mdx-b.press,.mdx-b--acc.press,.mdx-b--frein.press,.mdx-b--urg.press{transform:translateY(6px);
  box-shadow:0 0 0 3px #0B0E13,0 1px 0 3px #0B0E13,inset 0 3px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.14)}
.mdx-b--acc{--bt:#3ED07A}
.mdx-b--frein{--bt:#FF9A3D}
.mdx-b--urg{--bt:#FF4B3E;background:radial-gradient(circle at 50% 36%,#FF9C94 0 16%,#FF4B3E 42%,#C8102E 100%)}
.mdx-b--urg span{color:#fff}
.mdx-b--por{--bt:#6FBCEB}
.mdx-b--kla{--bt:#FFCE00}
.mdx-b--feu{--bt:#FFE680}
.mdx-b--vig{--bt:#C8A2FF}
.mdx-b.vide{opacity:.55;filter:grayscale(.6)}
.mdx-b.cri{animation:mdxBtnCri2 .7s ease-in-out infinite}
@keyframes mdxBtnCri2{50%{transform:translateY(-2px) rotate(-2deg);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,0 0 0 9px rgba(255,206,0,.6),0 0 30px 8px rgba(255,206,0,.5)}}

/* — l'arrivée : la rame à quai, en couleurs — */
.mdx-grade{position:relative;padding:14px 20px;border-radius:20px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,inset 0 0 0 6px var(--g)}
.mdx-grade b{color:#0B0E13;font-size:1.45rem;text-transform:uppercase}
.mdx-grade b::before,.mdx-grade b::after{content:"★";margin:0 .3em;color:var(--g);-webkit-text-stroke:1.5px #0B0E13}
.mdx-grade span{color:#4A4F57;font-weight:700}
.mdx-scene{height:150px;border-radius:20px;background-color:#EDE7D6;
  background-image:linear-gradient(rgba(150,140,120,.45) 2px,transparent 2px),linear-gradient(90deg,rgba(150,140,120,.45) 2px,transparent 2px);
  background-size:28px 16px;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mdx-rame-vue{left:5%;right:5%;top:16px;bottom:38px;border-radius:24px 24px 12px 12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,#FFCE00) 55%,var(--cr-blanc)),var(--c,#FFCE00) 45%,color-mix(in srgb,var(--c,#FFCE00) 70%,#000));
  box-shadow:0 0 0 3px #0B0E13,inset 0 4px 0 rgba(255,255,255,.4)}
.mdx-bande{top:auto;bottom:12%;height:8px;opacity:1;background:var(--cr-blanc);box-shadow:0 2px 0 #0B0E13,0 -2px 0 #0B0E13}
.mdx-hublot{top:20%;height:38%;width:8%;border-radius:9px;opacity:1;background:#BDE6F7;
  box-shadow:0 0 0 2.5px #0B0E13,inset 4px 4px 0 rgba(255,255,255,.75)}
.mdx-porte{top:12%;bottom:6%;width:25%;background:linear-gradient(180deg,#F3F0E6,#D6D0BE);box-shadow:0 0 0 2.5px #0B0E13}
.mdx-porte::before{content:"";position:absolute;left:18%;right:18%;top:12%;height:36%;border-radius:6px;
  background:#BDE6F7;box-shadow:0 0 0 2px #0B0E13,inset 3px 3px 0 rgba(255,255,255,.7)}
.mdx-quaisol{height:38px;background:linear-gradient(180deg,#FFCE00 0 6px,#0B0E13 6px 8px,#9A9EA6 8px);box-shadow:none}
.mdx-foule{bottom:10px;height:30px}
.mdx-pax{width:12px;height:19px;border-radius:6px 6px 3px 3px;background:var(--pc,#E3051C);box-shadow:0 0 0 2px #0B0E13}
.mdx-pax::before{left:1px;top:-11px;width:10px;height:10px;background:#F6C9A0;box-shadow:0 0 0 2px #0B0E13}
.mdx-pax:nth-child(5n+1){--pc:#E3051C}
.mdx-pax:nth-child(5n+2){--pc:#0064B0}
.mdx-pax:nth-child(5n+3){--pc:#3ED07A}
.mdx-pax:nth-child(5n+4){--pc:#FFCE00}
.mdx-pax:nth-child(5n){--pc:#C04191}
.mdx-gain{border-radius:18px;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mdx-gain:first-child{background:linear-gradient(180deg,#FFF1B0,#FFCE00)}
.mdx-gain b{color:#0B0E13;font-size:1.4rem}
.mdx-gain span{color:#5A5F68;font-weight:700}
.mdx-detail{border-radius:18px;overflow:hidden;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mdx-dl{border-bottom:1.5px dashed rgba(11,14,19,.22)}
.mdx-dl:nth-child(odd){background:rgba(11,14,19,.035)}
.mdx-dl span{color:#4A4F57}
.mdx-dl b{color:#0B0E13}
.mdx-dl--tot{border-bottom:0;background:#FFCE00!important}
.mdx-dl--tot b{color:#0B0E13;font-size:1.1rem}
.mdx-detail-txt{color:#E8EDF3}
.mdx-niveau{border-radius:18px;color:#0B0E13;background:linear-gradient(180deg,#F1E6FF,#D9C2FF);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mdx-niveau b{color:#3D1466}
.mdx-niveau span{color:#4A3A5E}
.mdx-niveau .mdx-cmd{opacity:1;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.mdx-niveau .mdx-cmd span{color:#0B0E13}
.mdx-niveau .mdx-cmd small{color:#4A4F57}
.mdx-echec .mdx-titre{color:#FF8A80}

/* — le plateau : des pièces cernées, un cadre de quai — */
.md-board{border-radius:22px;margin-top:24px;
  background:radial-gradient(circle,rgba(255,255,255,.07) 0 1.6px,transparent 2px) 0 0/var(--step) var(--step),
    linear-gradient(180deg,#22304D,#131B2E);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 9px #FFCE00,0 0 0 12px #0B0E13,0 20px 0 10px rgba(0,0,0,.3)}
.md-face{inset:3px;box-shadow:0 0 0 2.5px #0B0E13,inset 0 3px 0 rgba(255,255,255,.5),inset 0 -5px 0 rgba(0,0,0,.22),0 4px 0 2px #0B0E13}
.md-face span{font-size:clamp(.85rem,3vw,1.2rem);text-shadow:0 2px 0 rgba(0,0,0,.16)}
.md-tile.md-sel .md-face{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #fff,0 0 0 10px #0B0E13,0 0 30px 4px rgba(255,255,255,.55)}
.md-tile.md-ko .md-face{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FF6B6B,0 4px 0 6px #0B0E13}
.md-rame .md-face,.md-corr .md-face{box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 3px #fff,inset 0 -5px 0 rgba(0,0,0,.22),0 4px 0 2px #0B0E13}
.md-auto .md-face{box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 3px #FFCE00,0 4px 0 2px #0B0E13,0 0 22px -2px #FFCE00}
.md-porte-objet .md-face{box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 3px #FFCE00,0 4px 0 2px #0B0E13,0 0 16px -2px #FFCE00}
.md-objet .ci{width:1.25em;height:1.25em}
.md-plaque{border-radius:22px;background:linear-gradient(180deg,#1A4A9E,#123A80);
  box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 4px #1A4A9E,inset 0 0 0 6px #fff,0 7px 0 3px #0B0E13}
.md-nom{color:#fff;text-shadow:0 3px 0 #0B0E13}
.md-sous{color:#D6E2F5}
.md-haut{color:#BFD0EA}
.md-mode{color:#FFCE00}
.md-jauge{height:14px;border-radius:99px;background:#0B1F45;box-shadow:0 0 0 2px #0B0E13}
.md-jauge i{border-radius:99px;background:repeating-linear-gradient(-45deg,#FFE066 0 8px,#FFCE00 8px 16px);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.md-defi-c{border-radius:26px;color:#0B0E13;background:linear-gradient(180deg,#FFFBEF,#F1E6CB);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.md-defi-c b{color:#0B0E13}
.md-defi-c p{color:#4A4F57}
.md-defi-eyebrow{display:inline-block;padding:.4em .9em;border-radius:999px;color:#fff;background:#E3051C;box-shadow:0 0 0 2px #0B0E13}
.md-defi-ico{font-size:3.4rem;animation:mdxDefiIco 1.1s var(--ease-back) infinite alternate}
@keyframes mdxDefiIco{from{transform:rotate(-8deg) scale(1)}to{transform:rotate(8deg) scale(1.12)}}
.md-defi-coups{padding:.45em 1em;border-radius:999px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
@media (max-width:620px){ .mdx-tb,.mdx-jauges,.mdx-manche{margin-left:4px;margin-right:4px} .mdx-vue{margin:14px 6px 8px} }
@media (prefers-reduced-motion:reduce){
  .mdx-pupitre::after,.mdx-route.proche,.mdx-cadran.cri,.mdx-cadran.cri .mdx-aig,.mdx-b.cri,.md-defi-ico{animation:none}
}


/* ==========================================================================
   METRO RUNNER — la scène et le bandeau en cartoon
   ========================================================================== */
.rn-scene{margin:18px 12px 12px;border-radius:26px;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 10px var(--g,#E3051C),0 0 0 13px #0B0E13,0 22px 0 10px rgba(0,0,0,.32)}
.rn-chip,.rn-ligne,.rn-but{color:#0B0E13;background:var(--cr-plat);-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.rn-chip{font-family:var(--display);font-weight:800}
.rn-chip b{color:#0B0E13}
.rn-chip .ci{width:1.4em;height:1.4em}
.rn-ligne{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13,inset 0 0 0 3px var(--c)}
.rn-ligne b{color:#0B0E13}
.rn-past{box-shadow:0 0 0 2px #0B0E13}
@keyframes rnLigne{0%{transform:scale(.6) rotate(-12deg)}40%{transform:scale(1.25) rotate(4deg)}100%{transform:scale(1)}}
.rn-score{padding:.35em .75em .3em;border-radius:14px;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.rn-score b{color:#0B0E13;text-shadow:none;font-family:var(--display);font-weight:800}
.rn-score small{color:#5A4300;font-weight:700}
.rn-coeur{filter:drop-shadow(1.6px 0 0 #0B0E13) drop-shadow(-1.6px 0 0 #0B0E13) drop-shadow(0 1.6px 0 #0B0E13)
  drop-shadow(0 -1.6px 0 #0B0E13) drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.rn-coeur::before,.rn-coeur::after{background:linear-gradient(180deg,#FF5A4E,#E3051C)}
.rn-coeur.vide{opacity:.55;filter:grayscale(1) brightness(1.5) drop-shadow(1.6px 0 0 #0B0E13) drop-shadow(-1.6px 0 0 #0B0E13)
  drop-shadow(0 1.6px 0 #0B0E13) drop-shadow(0 -1.6px 0 #0B0E13)}
.rn-but{padding:.45em .8em;border-radius:14px}
.rn-but-j{height:12px;background:#E8DFC6;box-shadow:0 0 0 2px #0B0E13}
.rn-but-j i{background:repeating-linear-gradient(-45deg,#3ED07A 0 8px,#22A862 8px 16px);box-shadow:none;
  animation:rnRails .9s linear infinite}
@keyframes rnRails{to{background-position:22.63px 0}}
.rn-but small{color:#2A2F36;font-weight:700}
.rn-b,.rn-b.b-lent,.rn-b.b-plan,.rn-b.b-prot,.rn-b.b-mult,.rn-b.b-vit,.rn-b.b-aim{color:#0B0E13;background:var(--cr-plat);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13,inset 0 -4px 0 var(--bc,#FFCE00)}
.b-prot{--bc:#3ED07A} .b-mult{--bc:#A55BD8} .b-vit{--bc:#3E8FD4} .b-aim{--bc:#E0433A}
.rn-b.b-lent{--bc:#00A88F} .rn-b.b-plan{--bc:#3E8FD4}
/* les textes qui surgissent : lettres cernées de noir */
.rn-combo{color:#FFCE00;text-shadow:3px 0 #0B0E13,-3px 0 #0B0E13,0 3px #0B0E13,0 -3px #0B0E13,2px 2px #0B0E13,
  -2px -2px #0B0E13,2px -2px #0B0E13,-2px 2px #0B0E13,0 6px 0 #0B0E13}
.rn-flottant{text-shadow:2.5px 0 #0B0E13,-2.5px 0 #0B0E13,0 2.5px #0B0E13,0 -2.5px #0B0E13,2px 2px #0B0E13,
  -2px -2px #0B0E13,2px -2px #0B0E13,-2px 2px #0B0E13,0 5px 0 #0B0E13}
.rn-bandeau{padding:.25em .8em;border-radius:16px;color:#fff;background:var(--c);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  text-shadow:2px 0 #0B0E13,-2px 0 #0B0E13,0 2px #0B0E13,0 -2px #0B0E13,0 4px 0 #0B0E13}
@media (max-width:640px){ .rn-scene{margin:14px 6px 10px} }
@media (prefers-reduced-motion:reduce){ .rn-but-j i{animation:none} }


/* ==========================================================================
   SOLITAIRE — les cartes, les fondations, la pioche en cartoon
   ========================================================================== */
.so-barre{border-radius:20px;color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.so-marque{color:#0B0E13}
.so-stat b{color:#0B0E13;font-family:var(--display);font-weight:800}
.so-stat span{color:#5A5F68;font-weight:700}
.so-stat--combo.chaud b{color:#C2410C;text-shadow:none}
.so-evt-carte{padding-left:26px;border-radius:18px;color:#0B0E13;background:#FFF1F1;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,inset 10px 0 0 #E3051C}
.so-evt-carte p{color:#4A4F57}
.so-evt-reste{color:#C00018;font-weight:700}
.so-fond{border-radius:18px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,inset 0 0 0 4px var(--c)}
.so-fond b{color:#0B0E13}
.so-fond small{color:#4A4F57}
.so-fond small.mystere{color:#8A6A00}
.so-fond.complete{background:#DDF7E6;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,inset 0 0 0 4px #3ED07A}
.so-past{box-shadow:0 0 0 2px #0B0E13}
.so-lab{color:#DCE5F0;font-weight:700}
.so-carte{border-radius:14px;color:#0B0E13;background:linear-gradient(170deg,var(--cr-haut),#EFE7D2);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.so-carte::before{height:10px;border-radius:12px 12px 0 0;border-bottom:2px solid #0B0E13}
.so-carte.sel{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13,0 0 26px 2px rgba(255,206,0,.6)}
@keyframes soIndice{0%,100%{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
  50%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #3ED07A,0 0 0 8.5px #0B0E13,0 0 26px 2px rgba(62,208,122,.6)}}
.so-carte.majeure::after{color:#7A4A00;-webkit-text-stroke:0;font-size:.72rem;top:auto;bottom:6px;
  background:linear-gradient(180deg,#FFE88A,#FFC400);box-shadow:0 0 0 2px #0B0E13,0 2px 0 #0B0E13}
.so-carte.so-dessus{box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13,0 12px 20px rgba(0,0,0,.4)}
.so-carte.dos,.so-pioche{background:repeating-linear-gradient(45deg,#1A4A9E 0 8px,#153E8C 8px 16px);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,inset 0 0 0 4px #153E8C,inset 0 0 0 5.5px #fff}
.so-pioche{border-radius:14px}
.so-pioche small{color:#fff;font-weight:700}
.so-dos{box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2px #0B0E13}
.so-tete small{color:#4A4F57}
.so-type{color:#5A5F68;font-weight:700}
.so-vide,.so-garage-vide,.so-defausse-vide{border-radius:14px;color:#C9D3E0;background:rgba(255,255,255,.04);
  box-shadow:none;outline:2.5px dashed rgba(255,255,255,.3);outline-offset:-3px}
.so-garage-vide:hover{outline-color:#FFCE00;color:#FFCE00;box-shadow:none}
.so-col.so-vise{box-shadow:0 0 0 3px #FFCE00;background:rgba(255,206,0,.12)}
.so-fond.so-vise,.so-garage-vide.so-vise,.so-carte.so-vise{
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 22px 2px rgba(255,206,0,.6)}
.so-reseau{padding:12px 16px;border-radius:18px;background:#1B2740;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.so-pt{box-shadow:0 0 0 1.5px rgba(11,14,19,.8)}
.so-pt.ok{box-shadow:0 0 0 1.5px #0B0E13,0 0 10px -1px var(--c)}
.so-msg.on{display:table;margin-left:auto;margin-right:auto;padding:.4em 1.1em;border-radius:999px;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.so-msg.bon{color:#0F7A3E}
.so-msg.non{color:#C00018}
.so-msg.corr{color:#8A6A00}
.so-msg.neutre{color:#4A4F57}
.so-fete{color:#FFCE00;text-shadow:3px 0 #0B0E13,-3px 0 #0B0E13,0 3px #0B0E13,0 -3px #0B0E13,2px 2px #0B0E13,
  -2px -2px #0B0E13,2px -2px #0B0E13,-2px 2px #0B0E13,0 7px 0 #0B0E13}
.so-bloque{color:#0B0E13;background:linear-gradient(180deg,#FFFBEF,#F1E6CB);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,inset 10px 0 0 #E3051C}
.so-bloque p{color:#4A4F57}

/* — Le Défilé : un cadre épais autour du terrain — */
.playfield{margin:16px 12px 10px;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 10px var(--g,#FFCE00),0 0 0 13px #0B0E13,0 20px 0 10px rgba(0,0,0,.3)}
.playfield canvas{display:block}


/* ==========================================================================
   CRÉER VOTRE LIGNE — rame du plan et fiche d'analyse en cartoon
   ========================================================================== */
.lp-rame--c .lp-faisceau{animation:lpFaisceau 1.2s ease-in-out infinite alternate}
@keyframes lpFaisceau{from{opacity:.55}to{opacity:1}}
.lpx{margin-top:var(--sp-5);padding:18px;border-radius:26px;color:#0B0E13;
  background:linear-gradient(180deg,#FFFBEF,#F2E8D0);box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13;
  animation:viewIn .5s var(--ease-emph) both}
.lpx-tete{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.lpx-scene{grid-column:1/-1;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#9FD4F2,#DDF1FB 70%);box-shadow:0 0 0 2.5px #0B0E13}
.lpx-scene-svg{display:block;width:100%;height:auto;max-height:190px}
.lpx-scene-rame{animation:lpxRoule 3.2s cubic-bezier(.3,.9,.3,1) both}
@keyframes lpxRoule{from{transform:translateX(-420px)}to{transform:translateX(110px)}}
.lpx-med{position:absolute;right:14px;top:10px;width:118px;height:118px;filter:drop-shadow(0 6px 0 rgba(11,14,19,.35));
  animation:lpxMed .8s .5s var(--ease-back) both}
.lpx-med svg{width:100%;height:100%;overflow:visible}
.lpx-med-rayons{transform-box:view-box;transform-origin:60px 60px;animation:lpxRay 9s linear infinite}
@keyframes lpxRay{to{transform:rotate(360deg)}}
@keyframes lpxMed{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.lpx-titre{display:flex;align-items:center;gap:12px;min-width:0}
.lpx-titre b{display:block;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.1}
.lpx-titre small{display:block;color:#4A4F57;font-weight:700;margin-top:3px}
.lpx-past{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1.05rem;box-shadow:0 0 0 3px #fff,0 0 0 5.5px #0B0E13}
.lpx-note{margin-left:auto;padding:.35em .8em;border-radius:14px;font-family:var(--display);font-weight:800;
  font-size:1.2rem;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;white-space:nowrap}
.lpx-bulle{grid-column:1/-1;position:relative;margin:4px 0 0;padding:12px 16px;border-radius:16px;font-weight:700;
  background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.lpx-bulle::before{content:"";position:absolute;left:34px;top:-11px;width:18px;height:18px;background:var(--cr-blanc);
  transform:rotate(45deg);box-shadow:-2.5px -2.5px 0 0 #0B0E13}
.lpx-lab{display:inline-block;margin:20px 0 8px;padding:.35em .9em;border-radius:999px;color:#fff;font-weight:800;
  background:var(--c);box-shadow:0 0 0 2px #0B0E13;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.lpx-plan{overflow-x:auto;border-radius:16px;background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,inset 0 -6px 0 rgba(0,0,0,.05)}
.lpx-plan svg{display:block}
.lpx-plan-trait{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.6s var(--ease-out-expo) .2s forwards}
.lpx-plan-st{animation:lpxSt .45s var(--ease-back) both;animation-delay:calc(.25s + var(--i)*45ms)}
@keyframes lpxSt{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.lpx-jauges{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.lpx-j{padding:12px 14px;border-radius:18px;background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;
  animation:lpxSt .5s var(--ease-back) both;animation-delay:calc(.4s + var(--i)*90ms)}
.lpx-j-t{display:flex;align-items:center;gap:8px}
.lpx-j-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:1.1rem;
  background:var(--v);box-shadow:0 0 0 2px #0B0E13}
.lpx-j-t b{font-weight:800;font-size:.9rem;flex:1}
.lpx-j-t em{font-style:normal;font-weight:800;font-size:.75rem;padding:.2em .6em;border-radius:999px;
  background:var(--v);box-shadow:0 0 0 1.5px #0B0E13}
.lpx-j-b{height:16px;margin:10px 0 6px;border-radius:999px;background:#EDE5CF;box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.lpx-j-b i{display:block;height:100%;width:0;border-radius:999px;
  background:repeating-linear-gradient(-45deg,var(--v) 0 8px,color-mix(in srgb,var(--v) 70%,#000) 8px 16px);
  animation:lpxBarre 1.1s var(--ease-out-expo) forwards;animation-delay:calc(.6s + var(--i)*90ms)}
@keyframes lpxBarre{to{width:var(--u)}}
.lpx-j-p{display:flex;gap:10px;align-items:flex-end;justify-content:space-between}
.lpx-j-p small{color:#4A4F57;line-height:1.35}
.lpx-j-p b{font-family:var(--display);font-weight:800;white-space:nowrap}
.lpx-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.lpx-col{padding:12px;border-radius:18px;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.lpx-col.bon{background:#DDF7E6}
.lpx-col.mou{background:#EEE9DD}
.lpx-col-t{font-family:var(--display);font-weight:800;margin-bottom:8px}
.lpx-tr{padding:8px 10px;border-radius:12px;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13;margin-top:8px}
.lpx-tr b{display:block;font-size:.86rem}
.lpx-tr small{color:#4A4F57}
.lpx-pied{margin:16px 0 0;color:#4A4F57;font-size:.84rem}
@media (max-width:560px){ .lpx-med{width:84px;height:84px;right:8px;top:6px} .lpx-note{font-size:1rem} }
@media (prefers-reduced-motion:reduce){
  .lpx,.lpx-scene-rame,.lpx-med,.lpx-med-rayons,.lpx-plan-st,.lpx-j,.lp-rame--c .lp-faisceau{animation:none}
  .lpx-plan-trait{animation:none;stroke-dashoffset:0}
  .lpx-j-b i{animation:none;width:var(--u)}
}


/* ==========================================================================
   METRO CITY — LES VILLES DE BANLIEUE
   ========================================================================== */
.vl{display:flex;flex-direction:column;gap:16px}
.vl-hero{position:relative;overflow:hidden;border-radius:26px;min-height:210px;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.vl-hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vl-hero-txt{position:relative;z-index:1;max-width:min(580px,72%);padding:18px 20px 20px}
.vl-hero-eyebrow{display:inline-block;padding:.35em .85em;border-radius:999px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#0B0E13}
.vl-hero h3{margin:.3em 0 .2em;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:1;
  font-size:clamp(1.6rem,4.4vw,2.5rem);color:#fff;
  text-shadow:3px 0 #0B0E13,-3px 0 #0B0E13,0 3px #0B0E13,0 -3px #0B0E13,2px 2px #0B0E13,-2px -2px #0B0E13,2px -2px #0B0E13,-2px 2px #0B0E13,0 6px 0 #0B0E13}
.vl-hero p{display:inline-block;margin:0 0 12px;max-width:46ch;padding:6px 10px;border-radius:12px;font-weight:700;
  color:#0B0E13;background:color-mix(in srgb,var(--cr-plat) 92%,transparent);box-shadow:0 0 0 2px #0B0E13}
.vl-hero-chips{display:flex;flex-wrap:wrap;gap:8px}
.vl-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;color:#0B0E13;
  background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 #0B0E13}
.vl-chip i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-style:normal;font-size:1rem;
  background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-chip b{font-family:var(--display);font-weight:800}
.vl-chip small{font-weight:700;color:#5A5F68}
.vl-chip--sat{background:#FFE58A}
/* les sous-onglets */
.vl-nav{display:flex;flex-wrap:wrap;gap:8px}
.vl-nav-b{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 7px;border:0;border-radius:999px;cursor:pointer;
  font-weight:800;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;transition:transform .12s}
.vl-nav-b i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-size:1.05rem;
  background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-nav-b:hover{transform:translateY(-2px)}
.vl-nav-b.on{background:#FFCE00;transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 #0B0E13}
.vl-nav-b.lock{background:#E9E3D4}
.vl-nav-b em{font-style:normal;font-size:.8rem}
.vl-corps{display:flex;flex-direction:column;gap:16px}
/* l'aide */
.vl-aide{padding:10px 14px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.vl-aide summary{cursor:pointer;font-family:var(--display);font-weight:800}
.vl-aide-c{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}
.vl-aide-l{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:14px;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-aide-l>span{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font-size:1.2rem;
  background:#FFE58A;box-shadow:0 0 0 2px #0B0E13}
.vl-aide-l b{display:block}
.vl-aide-l p{margin:.2em 0 0;font-size:.82rem;line-height:1.4;color:#4A4F57}
.vl-titre{align-self:flex-start;margin-top:4px;padding:.4em 1em;border-radius:999px;font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;color:#fff;background:#00814F;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
/* le plan des emplacements */
.vl-carte{position:relative;overflow:hidden;border-radius:22px;background:#EAF5DE;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.vl-carte-svg{display:block;width:100%;height:auto;max-height:540px}
.vl-cs,.vl-cs-ville{cursor:pointer}
.vl-cs:hover>circle:not(.vl-cs-onde){filter:brightness(1.12)}
.vl-cs-onde{transform-box:fill-box;transform-origin:center;animation:vlOnde 1.8s ease-out infinite}
@keyframes vlOnde{from{transform:scale(.6);opacity:.9}to{transform:scale(1.7);opacity:0}}
.vl-cs.non{cursor:not-allowed;opacity:.75}
.vl-carte-leg{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:6px}
.vl-carte-leg span{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:.72rem;
  font-weight:700;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-carte-leg i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px #0B0E13}
.vl-leg-site{background:#E3051C}.vl-leg-non{background:#AAAAAA}.vl-leg-ville{background:#FFCE00}
/* les cartes de ligne */
.vl-lignes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.vl-lc{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,var(--cr-haut)),#F2EAD6);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.vl-lc-tete{display:flex;align-items:center;gap:12px}
.vl-lc-tete b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.1}
.vl-lc-tete small{font-weight:700;color:#5A5F68}
.vl-rer{position:relative;flex:none;display:grid;place-items:center;align-content:center;width:50px;height:50px;border-radius:50%;
  line-height:1;background:var(--cr-blanc);box-shadow:0 0 0 3px #0064B0,0 0 0 5.5px #0B0E13}
.vl-rer small{font-family:var(--display);font-weight:900;font-size:.52rem;color:#0064B0}
.vl-rer b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-family:var(--display);font-weight:900;
  font-size:.8rem;color:#fff;background:var(--c);box-shadow:0 0 0 1.5px #0B0E13}
.vl-lc-mini{padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:none;box-shadow:0 0 0 2.5px #0B0E13;
  transition:transform .15s}
.vl-lc-mini:hover{transform:scale(1.02)}
.vl-lc-mini svg{display:block;width:100%;height:auto;max-height:200px}
.vl-lc-stats{display:flex;flex-wrap:wrap;gap:8px}
.vl-lc-stats span{padding:.3em .7em;border-radius:999px;font-weight:700;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-lc-spec{display:flex;flex-wrap:wrap;gap:6px}
.vl-lc-spec span{padding:.25em .6em;border-radius:999px;font-size:.78rem;font-weight:800;background:#FFE58A;box-shadow:0 0 0 1.5px #0B0E13}
.vl-lc .btn{align-self:flex-start}
.vl-lc-sites{display:flex;flex-direction:column;gap:8px}
.vl-site{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border:0;border-radius:14px;cursor:pointer;
  text-align:left;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;transition:transform .12s}
.vl-site:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c) 20%,var(--cr-blanc))}
.vl-site b{font-weight:800}
.vl-site small{font-weight:700;color:#5A5F68;white-space:nowrap}
.vl-site.non{opacity:.55;cursor:not-allowed}
.vl-lc-prix{font-weight:700;color:#4A4F57}
.vl-fonder-apercu{overflow:hidden;border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13}
.vl-fonder-apercu svg{display:block;width:100%;height:auto;max-height:320px}
/* la vue d'une ville */
.vl-vtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.vl-vtop-t b{display:block;font-family:var(--display);font-weight:900;font-size:1.45rem;line-height:1.05;color:#fff;text-shadow:0 2px 0 #0B0E13}
.vl-vtop-t small{font-weight:700;color:#C9D3E0}
.vl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.vl-st{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-st-i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font-size:1.2rem;
  background:var(--k);box-shadow:0 0 0 2px #0B0E13}
.vl-st>div{flex:1;min-width:0}
.vl-st small{display:block;font-size:.72rem;font-weight:700;color:#5A5F68}
.vl-st b{font-family:var(--display);font-weight:800;font-size:1.15rem}
.vl-st-b{display:block;height:8px;margin-top:4px;overflow:hidden;border-radius:99px;background:#E6DCC4;box-shadow:0 0 0 1.5px #0B0E13}
.vl-st-b i{display:block;height:100%;width:var(--u);border-radius:99px;background:var(--k);transition:width .6s var(--ease-emph)}
.vl-st em{display:block;margin-top:2px;font-style:normal;font-size:.68rem;color:#5A5F68}
.vl-duo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(290px,1fr);gap:18px;align-items:start}
@media (max-width:920px){ .vl-duo{grid-template-columns:1fr} }
.vl-stage{position:relative;margin:12px;overflow:hidden;border-radius:24px;background:#CDEBFA;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 9px var(--c),0 0 0 12px #0B0E13,0 18px 0 8px rgba(0,0,0,.3)}
.vl-scene{display:block;width:100%;height:auto}
.vl-stage .vl-case,.vl-stage .vl-bat,.vl-stage .vl-plus{cursor:pointer}
.vl-stage .vl-case{transition:fill .15s}
.vl-stage .vl-case.vide:hover{fill:#CBF2AA}
.vl-stage .vl-case.sel{stroke:#FFCE00;stroke-width:3.6}
.vl-stage .vl-bat:hover .vl-bat-in{filter:brightness(1.08)}
.vl-plus{opacity:.62;transition:opacity .15s}
.vl-plus:hover{opacity:1}
.vl-stage-aide{position:absolute;left:12px;bottom:10px;padding:.35em .85em;border-radius:999px;font-size:.74rem;font-weight:800;
  color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13;pointer-events:none}
.vl-bat--neuf .vl-bat-in{animation:vlPose .8s var(--ease-back) both}
@keyframes vlPose{0%{transform:translateY(-70px) scale(.5);opacity:0}55%{transform:translateY(4px) scale(1.08,.9);opacity:1}100%{transform:none}}
.vl-fleche-in{animation:vlFleche .8s ease-in-out infinite alternate}
@keyframes vlFleche{from{transform:translateY(-7px)}to{transform:translateY(2px)}}
/* le décor vivant des scènes */
.vl-nuage{animation:vlNuage 22s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-7s)}
@keyframes vlNuage{from{transform:translateX(-40px)}to{transform:translateX(46px)}}
.vl-soleil{transform-box:fill-box;transform-origin:center;animation:vlSoleil 3.5s ease-in-out infinite alternate}
@keyframes vlSoleil{to{transform:scale(1.08)}}
.vl-rer-passe{animation:vlRerPasse 12s linear infinite}
@keyframes vlRerPasse{0%{transform:translateX(0)}58%,100%{transform:translateX(var(--w))}}
.vl-rer-train{animation:vlRerQuai 8s ease-in-out infinite}
@keyframes vlRerQuai{0%{transform:translate(-34px,17px);opacity:0}14%{opacity:1}38%,62%{transform:none;opacity:1}86%{opacity:1}100%{transform:translate(34px,-17px);opacity:0}}
.vl-fumee circle{transform-box:fill-box;transform-origin:center;animation:vlFumee 2.6s ease-out infinite}
.vl-fumee circle:nth-child(2){animation-delay:1.3s}
@keyframes vlFumee{0%{transform:translateY(5px) scale(.6);opacity:0}30%{opacity:.85}100%{transform:translateY(-12px) scale(1.5);opacity:0}}
.vl-drapeau{transform-box:fill-box;transform-origin:left center;animation:vlDrapeau 1.1s ease-in-out infinite alternate}
@keyframes vlDrapeau{from{transform:skewY(-7deg) scaleX(.92)}to{transform:skewY(5deg) scaleX(1)}}
.vl-clign{animation:vlClign 1.2s steps(2,end) infinite}
@keyframes vlClign{50%{opacity:.2}}
.vl-clign-vert{animation:vlClignV 1.6s ease-in-out infinite}
@keyframes vlClignV{50%{opacity:.4}}
.vl-lueur{animation:vlLueur 2s ease-in-out infinite alternate}
@keyframes vlLueur{from{opacity:.12}to{opacity:.42}}
.vl-lueur-rouge{animation:vlCarotte 1.6s ease-in-out infinite}
@keyframes vlCarotte{50%{filter:drop-shadow(0 0 5px #FF3B3B) brightness(1.25)}}
.vl-jet{transform-box:fill-box;transform-origin:bottom center;animation:vlJet .9s ease-in-out infinite alternate}
@keyframes vlJet{from{transform:scaleY(.7)}to{transform:scaleY(1.2)}}
.vl-bus{animation:vlBus 3s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-1s)}
@keyframes vlBus{to{transform:translate(4px,-2px)}}
.vl-neon{animation:vlNeon 2.4s steps(1,end) infinite}
.vl-neon--b{animation-delay:-1.2s}
@keyframes vlNeon{0%,100%{opacity:1}46%{opacity:.3}50%{opacity:1}53%{opacity:.4}56%{opacity:1}}
.vl-boule{transform-box:fill-box;transform-origin:center;animation:vlBoule 3s linear infinite}
@keyframes vlBoule{to{transform:rotate(360deg)}}
.vl-faisceaux{transform-box:fill-box;transform-origin:50% 100%;animation:vlFaisceaux 3s ease-in-out infinite alternate}
@keyframes vlFaisceaux{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.vl-ampoule{animation:vlAmpoule 1s steps(2,end) infinite;animation-delay:calc(var(--i)*-.11s)}
@keyframes vlAmpoule{50%{fill:#FF4B3E}}
.vl-arbre{transform-box:fill-box;transform-origin:50% 100%;animation:vlArbre 3.4s ease-in-out infinite alternate}
@keyframes vlArbre{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
/* le panneau de construction */
.vl-panel{margin-top:12px;padding:14px;border-radius:22px;color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.vl-p-t{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--display);font-weight:900;font-size:1.1rem}
.vl-niv{margin-left:auto;font-size:1.1rem;letter-spacing:.06em;color:#FFCE00;-webkit-text-stroke:1px #0B0E13}
.vl-p-d{margin:0 0 10px;font-size:.86rem;line-height:1.45;color:#4A4F57}
.vl-p-vign{display:flex;justify-content:center;margin:-4px 0 4px}
.vl-p-vign svg{width:150px;height:auto}
.vl-p-vign.spec{filter:drop-shadow(0 0 16px rgba(255,206,0,.65))}
.vl-ef{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.vl-ef span{padding:.28em .6em;border-radius:999px;font-size:.74rem;font-weight:700;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.vl-p-acts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.vl-p-acts .btn{align-self:stretch}
.vl-p-next{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:8px;border-radius:12px;background:#EAF7E0;box-shadow:0 0 0 1.5px #0B0E13}
.vl-p-next small{width:100%;font-weight:800}
.vl-p-next span{font-size:.74rem;font-weight:700}
.vl-p-note{padding:8px 10px;border-radius:12px;font-size:.82rem;font-weight:700;background:#FFF1F1;box-shadow:0 0 0 1.5px #0B0E13}
.vl-p-note.ok{background:#DDF7E6}
.vl-conseil{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;padding:8px 10px;border-radius:14px;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-conseil span{font-size:1.2rem}
.vl-conseil p{margin:0;font-size:.84rem;font-weight:600}
.vl-sp{display:flex;gap:10px;align-items:center;margin-bottom:6px;padding:7px 10px;border-radius:14px;opacity:.85;background:#EEE9DD;box-shadow:0 0 0 1.5px #0B0E13}
.vl-sp>span{font-size:1.3rem}
.vl-sp b{display:block;font-size:.88rem}
.vl-sp small{font-size:.74rem;color:#5A5F68}
.vl-sp.pret{opacity:1;background:#FFF1B0;box-shadow:0 0 0 2px #0B0E13,0 0 0 5px rgba(255,206,0,.5)}
.vl-sp.fait{opacity:1;background:#DDF7E6}
.vl-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.vl-cat{padding:.4em .8em;border:0;border-radius:999px;cursor:pointer;font-size:.78rem;font-weight:800;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-cat.on{color:#FFCE00;background:#0B0E13}
.vl-cat-liste{display:flex;flex-direction:column;gap:10px;max-height:600px;overflow:auto;padding:4px}
.vl-bc{display:flex;gap:10px;padding:10px;border-radius:16px;background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-bc.spec{background:linear-gradient(180deg,#FFF6D2,#FFE9A0)}
.vl-bc.lock{background:#F2EEE6}
.vl-bc.lock .vl-bc-v{filter:grayscale(.7) opacity(.75)}
.vl-bc-v{flex:none;width:92px}
.vl-bc-v svg{width:100%;height:auto}
.vl-bc-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.vl-bc-c b{font-family:var(--display);font-weight:800}
.vl-bc-c p{margin:0;font-size:.78rem;line-height:1.35;color:#4A4F57}
.vl-bc-req{font-size:.74rem;font-weight:700;color:#A5142A}
.vl-bc-c .btn{align-self:flex-start;margin-top:4px}
/* les besoins */
.vl-bes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.vl-be{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;color:#0B0E13;background:#FFF1F1;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-be.ok{background:#DDF7E6}
.vl-be-i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font-size:1.1rem;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-be>div{flex:1;min-width:0}
.vl-be b{font-weight:800}
.vl-be-b{display:block;height:9px;margin:4px 0;overflow:hidden;border-radius:99px;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.vl-be-b i{display:block;height:100%;width:var(--u);background:repeating-linear-gradient(-45deg,#3ED07A 0 6px,#22A862 6px 12px)}
.vl-be:not(.ok) .vl-be-b i{background:repeating-linear-gradient(-45deg,#FF9A3D 0 6px,#E3051C 6px 12px)}
.vl-be small{font-size:.74rem;color:#4A4F57}
/* un bâtiment spécial pas encore construit */
.vl-verrou{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px;border-radius:24px;text-align:center;color:#0B0E13;
  background:linear-gradient(180deg,#FFFBEF,#F1E6CB);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.vl-verrou-v svg{width:180px;height:auto;filter:grayscale(.25)}
.vl-verrou b{font-family:var(--display);font-weight:900;font-size:1.3rem}
.vl-verrou p{margin:0;max-width:52ch;color:#4A4F57}
.vl-verrou-req{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.vl-verrou-req small{width:100%;font-weight:800}
.vl-verrou-req span{padding:.3em .7em;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
/* les villes sur le plan du réseau */
.mc-villes{pointer-events:none}
.mc-ville-l{cursor:pointer}
.mc-ville-l:hover rect{fill:#FFE58A}
@media (max-width:560px){ .vl-hero-txt{max-width:100%} .vl-bc-v{width:72px} }
@media (prefers-reduced-motion:reduce){
  .vl-cs-onde,.vl-nuage,.vl-soleil,.vl-rer-passe,.vl-rer-train,.vl-fumee circle,.vl-drapeau,.vl-clign,.vl-clign-vert,.vl-lueur,
  .vl-lueur-rouge,.vl-jet,.vl-bus,.vl-neon,.vl-boule,.vl-faisceaux,.vl-ampoule,.vl-arbre,.vl-bat--neuf .vl-bat-in,.vl-fleche-in{animation:none}
}


/* ==========================================================================
   LE CASINO « LE TERMINUS »
   ========================================================================== */
.vl-casino-hall{position:relative;overflow:hidden;min-height:220px;border-radius:26px;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.vl-hall-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.vl-hall-chips{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:8px}
.vl-lustre .vl-cristal{animation:vlCristal 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.28s)}
@keyframes vlCristal{50%{fill:#FFFFFF;filter:drop-shadow(0 0 5px #FFF6C8)}}
.vl-casino-note{margin:0;padding:10px 14px;border-radius:16px;font-weight:700;color:#0B0E13;background:#FFE58A;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-jeux{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.vl-jeu-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border:0;border-radius:18px;cursor:pointer;text-align:left;
  color:#fff;background:linear-gradient(170deg,#A5142A,#5A0E1C);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;transition:transform .12s}
.vl-jeu-b i{font-style:normal;font-size:1.6rem}
.vl-jeu-b b{font-family:var(--display);font-weight:800}
.vl-jeu-b small{color:#FFD9DF;line-height:1.3}
.vl-jeu-b:hover{transform:translateY(-3px)}
.vl-jeu-b.on{background:linear-gradient(170deg,#FFCE00,#E8A800);color:#0B0E13;transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 #0B0E13}
.vl-jeu-b.on small{color:#4A3A00}
.vl-table{position:relative;padding:16px;border-radius:24px;background:radial-gradient(120% 90% at 50% 0,#1F7A4E,#0E4B2E);
  box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 8px #6B3F1D,inset 0 0 0 10px #0B0E13,0 7px 0 3px #0B0E13}
.vl-bandit-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:16px;align-items:start}
@media (max-width:820px){ .vl-bandit-duo{grid-template-columns:1fr} }
/* la mise */
.vl-cmd{display:flex;flex-direction:column;gap:10px}
.vl-mise{padding:12px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-mise-t{font-family:var(--display);font-weight:800}
.vl-mise-r{display:flex;align-items:center;gap:8px;margin:6px 0}
.vl-mise-ico{font-size:1.5rem}
.vl-mise-in{flex:1;min-width:0;padding:.45em .7em;border:0;border-radius:12px;font-family:var(--display);font-weight:800;font-size:1.3rem;
  color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13}
.vl-mise.trop .vl-mise-in{box-shadow:0 0 0 2.5px #E3051C;color:#C00018}
.vl-mise-bs{display:flex;flex-wrap:wrap;gap:6px}
.vl-mise-b{padding:.35em .7em;border:0;border-radius:999px;cursor:pointer;font-weight:800;font-size:.8rem;color:#0B0E13;background:var(--cr-blanc);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.vl-mise-b:active{transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13}
.vl-mise-solde{display:block;margin-top:6px;font-weight:700;color:#5A5F68}
.vl-go{align-self:stretch}
/* le bandit manchot */
.vl-bandit{position:relative;padding:14px 58px 14px 14px;border-radius:26px;background:linear-gradient(180deg,#E3051C,#A5142A);
  box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 6px #F4C000,inset 0 0 0 8px #0B0E13,0 7px 0 3px #0B0E13}
.vl-bandit-haut{position:relative;display:flex;justify-content:center;align-items:center;min-height:44px;margin-bottom:10px;border-radius:14px;
  background:#1A0710;box-shadow:0 0 0 2.5px #0B0E13}
.vl-bandit-haut span{font-family:var(--display);font-weight:900;font-size:1.2rem;letter-spacing:.06em;color:#FFE58A;text-shadow:0 0 10px rgba(255,206,0,.6)}
.vl-bulbe{position:absolute;top:-6px;width:10px;height:10px;border-radius:50%;background:#FFF6C8;box-shadow:0 0 0 1.5px #0B0E13;
  left:calc(4% + var(--i)*6.9%);animation:vlBulbe 1s steps(2,end) infinite;animation-delay:calc(var(--i)*-.14s)}
@keyframes vlBulbe{50%{background:#FF4B3E;box-shadow:0 0 0 1.5px #0B0E13,0 0 8px #FF4B3E}}
.vl-bandit-fen{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border-radius:16px;background:#0B0E13}
.vl-rou{height:192px;overflow:hidden;border-radius:10px;background:linear-gradient(180deg,#CFCFCF,var(--cr-blanc) 22%,var(--cr-blanc) 78%,#CFCFCF);box-shadow:inset 0 0 0 2px #0B0E13}
.vl-rou-b{will-change:transform}
.vl-sym{height:64px;display:grid;place-items:center}
.vl-sym svg{width:52px;height:52px}
.vl-rou.tourne .vl-sym svg{filter:blur(1.4px)}
.vl-ligne-gain{position:absolute;left:4px;right:4px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#E3051C;box-shadow:0 0 8px #E3051C;opacity:.75;pointer-events:none}
.vl-bandit-ecran{margin-top:10px;padding:9px 12px;border-radius:12px;text-align:center;font-family:var(--display);font-weight:800;
  color:#8CFFB4;background:#12301D;box-shadow:0 0 0 2.5px #0B0E13;text-shadow:0 0 8px rgba(124,255,168,.6)}
.vl-bandit-ecran.gagne{color:#FFE58A;background:#3A2A00;text-shadow:0 0 10px rgba(255,206,0,.8);animation:vlEcran .5s steps(2,end) 4}
.vl-bandit-ecran.jackpot{color:#fff;background:#E3051C;text-shadow:0 0 12px #FFCE00;animation:vlEcran .35s steps(2,end) 10}
.vl-bandit-ecran.perdu{color:#FF9AA2;background:#2A0A10}
.vl-bandit-ecran.paire{color:#BDE6F7;background:#0B1F45}
@keyframes vlEcran{50%{filter:brightness(1.6)}}
.vl-bandit-bac{height:26px;margin-top:10px;border-radius:0 0 18px 18px;background:#1A0710;box-shadow:0 0 0 2.5px #0B0E13,inset 0 6px 0 rgba(255,255,255,.08)}
.vl-levier{position:absolute;right:6px;top:40px;width:44px;height:170px;padding:0;border:0;background:none;cursor:pointer}
.vl-levier svg{width:100%;height:100%;overflow:visible}
.vl-levier-bras{transform-box:view-box;transform-origin:20px 110px}
.vl-levier.tire .vl-levier-bras{animation:vlLevier .7s var(--ease-back)}
@keyframes vlLevier{0%{transform:none}35%{transform:scaleY(-.2) translateY(-40px)}100%{transform:none}}
.vl-bareme{margin-top:12px;padding:12px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-bareme>b{display:block;margin-bottom:6px;font-family:var(--display);font-weight:800}
.vl-bareme-l{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1.5px dashed rgba(11,14,19,.2)}
.vl-bareme-s{display:flex;gap:2px}
.vl-bareme-s svg{width:26px;height:26px}
.vl-bareme-txt{font-size:.82rem;font-weight:700}
.vl-bareme-l em{font-style:normal;font-family:var(--display);font-weight:900;color:#A5142A}
/* le bandeau de gain et la pluie de tickets */
.vl-gagne{position:absolute;left:50%;top:40%;z-index:20;padding:.3em .9em;border-radius:18px;pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,4vw,2.2rem);color:#0B0E13;background:var(--c);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;animation:vlGagne 1.8s var(--ease-back) forwards;white-space:nowrap}
.vl-gagne.gros{font-size:clamp(2rem,7vw,3.6rem);animation-duration:2.6s}
@keyframes vlGagne{0%{transform:translate(-50%,-50%) scale(.2) rotate(-12deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg);opacity:1}
  30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
.vl-pluie{position:fixed;z-index:9999;width:22px;height:13px;border-radius:3px;pointer-events:none;background:var(--c);
  box-shadow:0 0 0 1.5px #0B0E13,inset 0 -3px 0 #E3051C;animation:vlPluie 1.6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes vlPluie{0%{transform:translate(0,0) rotate(0);opacity:1}40%{transform:translate(calc(var(--dx)*.6),var(--dy)) rotate(calc(var(--r)*.5))}
  100%{transform:translate(var(--dx),60vh) rotate(var(--r));opacity:0}}
/* le blackjack */
.vl-bj{display:flex;flex-direction:column;gap:12px;align-items:center;margin-bottom:12px}
.vl-bj-zone{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:170px}
.vl-bj-zone small{padding:.2em .7em;border-radius:999px;font-weight:800;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.vl-bj-tot{min-height:1.4em;font-family:var(--display);font-weight:900;font-size:1.3rem;color:#fff;text-shadow:0 2px 0 #0B0E13}
.vl-bj-main{display:flex;justify-content:center;min-height:128px}
.vl-bj-regle{padding:.4em 1em;border-radius:999px;text-align:center;font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.06em;
  color:#FFE58A;border:2px solid #FFE58A}
.vl-carte-bj{position:relative;width:90px;height:126px;margin-left:-26px;perspective:600px;animation:vlDonne .45s var(--ease-back) both;animation-delay:calc(var(--i)*.08s)}
.vl-carte-bj:first-child{margin-left:0}
@keyframes vlDonne{from{transform:translate(160px,-120px) rotate(30deg);opacity:0}to{transform:none;opacity:1}}
.vl-cf{position:absolute;inset:0;backface-visibility:hidden;transition:transform .5s var(--ease-emph);filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.vl-cf svg{width:100%;height:100%}
.vl-cf--ar{transform:rotateY(180deg)}
.vl-carte-bj.dos .vl-cf--av{transform:rotateY(-180deg)}
.vl-carte-bj.dos .vl-cf--ar{transform:rotateY(0)}
.vl-bj-msg{min-height:2.4em;padding:.5em 1em;border-radius:14px;text-align:center;font-family:var(--display);font-weight:800;color:#0B0E13;
  background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-bj-msg.gagne{background:#FFE58A;animation:vlEcran .4s steps(2,end) 4}
.vl-bj-msg.perdu{background:#FFD0D5}
.vl-bj-msg.nul{background:#DCE8F7}
.vl-bj-msg.terminus{background:#0B0E13;color:#FFCE00}
.vl-bj-acts{display:flex;flex-wrap:wrap;gap:8px}
/* le pousse-tickets */
.vl-pousse{position:relative}
.vl-pousse-svg{display:block;width:100%;height:auto}
.vl-pousseur{animation:vlPousseur 2.2s ease-in-out infinite alternate}
@keyframes vlPousseur{from{transform:translateY(-14px)}to{transform:translateY(6px)}}
.vl-chute{animation:vlChute .75s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes vlChute{from{transform:translateY(0) rotate(0)}to{transform:translateY(100px) rotate(40deg)}}
.vl-tombe{animation:vlTombe 1.2s cubic-bezier(.4,0,.8,.7) forwards;animation-delay:calc(var(--i)*40ms)}
@keyframes vlTombe{0%{transform:translate(0,0)}30%{transform:translate(var(--x),-6px)}100%{transform:translate(var(--x),62px) rotate(60deg);opacity:0}}
/* la roulette */
.vl-roue{position:relative}
.vl-roue-svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.vl-roue-g{transform-box:view-box;transform-origin:150px 150px}
.vl-paris{display:flex;flex-wrap:wrap;gap:6px}
.vl-pari{display:flex;flex-direction:column;align-items:flex-start;padding:7px 11px;border:0;border-radius:14px;cursor:pointer;color:#0B0E13;
  background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.vl-pari b{font-size:.84rem} .vl-pari em{font-style:normal;font-weight:900;color:#A5142A}
.vl-pari.on{background:#FFCE00;transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13}
.vl-paris-l{display:flex;flex-wrap:wrap;gap:6px}
.vl-pl{width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;font-family:var(--display);font-weight:900;font-size:.8rem;
  color:var(--i);background:var(--c);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13;transition:transform .12s}
.vl-pl.on{transform:scale(1.15);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7px #0B0E13}
@media (prefers-reduced-motion:reduce){
  .vl-lustre .vl-cristal,.vl-bulbe,.vl-pousseur,.vl-carte-bj,.vl-gagne,.vl-pluie,.vl-bandit-ecran{animation:none}
}

/* ==========================================================================
   LE TABAC — tickets à gratter
   ========================================================================== */
.vl-tabac-scene{position:relative;overflow:hidden;min-height:220px;border-radius:26px;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.vl-carotte{animation:vlCarotte 1.8s ease-in-out infinite}
.vl-grattoir{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;border-radius:24px;
  background:radial-gradient(120% 90% at 50% 0,#3A7A6F,#16463F);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.vl-grattoir-info{text-align:center;color:#fff}
.vl-grattoir-info b{display:block;font-family:var(--display);font-weight:900;font-size:1.2rem;text-shadow:0 2px 0 #0B0E13}
.vl-grattoir-info small{color:#CFE9E3;font-weight:700}
.vl-grattoir-suite{display:flex;flex-direction:column;align-items:center;gap:8px}
.vl-grattoir-res{margin:0;padding:.5em 1em;border-radius:14px;font-family:var(--display);font-weight:800;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-grattoir-res.gagne{background:#FFE58A;animation:vlEcran .4s steps(2,end) 5}
/* le ticket */
.vl-ticket{position:relative;width:min(520px,100%);padding:14px 16px 12px;border-radius:14px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),#F4EBD3);box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13;
  animation:vlTicketIn .55s var(--ease-back) both}
.vl-ticket::before,.vl-ticket::after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;
  background:#16463F;box-shadow:inset 0 0 0 3px #0B0E13}
.vl-ticket::before{left:-11px}.vl-ticket::after{right:-11px}
@keyframes vlTicketIn{from{transform:translateY(40px) rotate(-6deg) scale(.8);opacity:0}to{transform:none;opacity:1}}
.vl-ticket-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-14px -16px 10px;padding:12px 16px;border-radius:12px 12px 0 0;
  color:var(--e);background:repeating-linear-gradient(-45deg,var(--c) 0 14px,color-mix(in srgb,var(--c) 80%,var(--cr-blanc)) 14px 28px);border-bottom:3px solid #0B0E13}
.vl-ticket-tete b{font-family:var(--display);font-weight:900;font-size:1.35rem;text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 2px 0 rgba(11,14,19,.35)}
.vl-ticket-prix{padding:.25em .7em;border-radius:999px;font-weight:900;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-ticket-regle{margin:0 0 10px;font-size:.84rem;font-weight:700;color:#4A4F57}
.vl-ticket-jeu{display:flex;flex-direction:column;gap:10px}
.vl-ticket-zone{position:relative;border-radius:12px;padding:8px;background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13;touch-action:none;user-select:none;-webkit-user-select:none}
.vl-z6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vl-z9{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vl-tc{display:grid;place-items:center;min-height:74px;padding:6px;border-radius:10px;background:#F6F1E2;box-shadow:0 0 0 1.5px #0B0E13}
.vl-tc svg{width:54px;height:54px}
.vl-tc--st{align-content:center;gap:4px;text-align:center}
.vl-tc--st b{font-size:.78rem;line-height:1.15}
.vl-tc--st small,.vl-tc--l small{font-weight:900;color:#A5142A}
.vl-ticket.gratte .vl-tc.gag{background:#FFE58A;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00;animation:vlGag .6s steps(2,end) 5}
@keyframes vlGag{50%{filter:brightness(1.3)}}
.vl-ticket-table{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.vl-ticket-table span{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 2px;border-radius:999px;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.vl-ticket-table svg{width:26px;height:26px}
.vl-ticket-table b{font-size:.78rem}
.vl-ticket-ligne{display:flex;align-items:center;gap:8px;justify-content:center;font-weight:700}
.vl-tpast{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--display);font-weight:900;font-size:.8rem;
  box-shadow:0 0 0 2px #0B0E13}
.vl-tpast.gros{width:44px;height:44px;font-size:1.05rem;margin:0 4px}
.vl-zc{display:flex;flex-direction:column;gap:10px}
.vl-zc small{display:block;margin-bottom:4px;font-weight:800;color:#5A5F68}
.vl-zc-g{text-align:center}
.vl-zc-v>div{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.vl-tc--l{gap:4px;min-height:70px}
.vl-zr{display:flex;flex-direction:column;gap:6px}
.vl-tr{display:grid;grid-template-columns:auto 70px 1fr auto;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#F6F1E2;box-shadow:0 0 0 1.5px #0B0E13}
.vl-tr.moi{background:#FFF1B0}
.vl-tr-rame{width:70px;height:auto}
.vl-tr b{font-family:var(--mono);font-size:.84rem}
.vl-tr em{font-style:normal;font-size:.7rem;font-weight:800;color:#A5142A}
.vl-ticket.gratte .vl-tr.best{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #3ED07A}
.vl-ticket-pied{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:8px;border-top:2px dashed rgba(11,14,19,.3)}
.vl-ticket-pied small{font-weight:700;color:#5A5F68}
/* la feuille d'argent */
.vl-grat{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;cursor:crosshair;touch-action:none;transition:opacity .6s}
.vl-grat.fin{opacity:0;pointer-events:none}
.vl-grat.balaye{animation:vlBalaye .42s ease-in forwards}
@keyframes vlBalaye{to{clip-path:inset(0 0 0 100%)}}
.vl-flocon{position:absolute;width:6px;height:4px;border-radius:1px;pointer-events:none;background:#B9C0CA;box-shadow:0 0 0 1px rgba(11,14,19,.4);
  animation:vlFlocon .6s ease-out forwards}
@keyframes vlFlocon{to{transform:translate(var(--dx),30px) rotate(160deg);opacity:0}}
/* la vitrine */
.vl-vitrine{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.vl-vt{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;animation:vlTicketIn .5s var(--ease-back) both;animation-delay:calc(var(--i)*70ms)}
.vl-vt-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:12px;color:var(--e);
  background:repeating-linear-gradient(-45deg,var(--c) 0 12px,color-mix(in srgb,var(--c) 80%,var(--cr-blanc)) 12px 24px);box-shadow:0 0 0 2.5px #0B0E13;transition:transform .2s var(--ease-back)}
.vl-vt:hover .vl-vt-art{transform:rotate(-3deg) scale(1.03)}
.vl-vt-art b{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:1.05rem;text-shadow:0 2px 0 rgba(11,14,19,.3)}
.vl-vt-grat{padding:.3em .9em;border-radius:8px;font-weight:900;font-size:.72rem;color:#0B0E13;
  background:linear-gradient(135deg,#A9B1BC,#F1F4F8 50%,#98A1AC);box-shadow:0 0 0 1.5px #0B0E13}
.vl-vt-art em{font-style:normal;font-weight:800;font-size:.76rem}
.vl-vt p{margin:0;font-size:.78rem;color:#4A4F57;line-height:1.35;flex:1}
.vl-vt-prix{font-family:var(--display);font-weight:900;font-size:1.2rem}
.vl-vt-acts{display:flex;gap:6px}
.vl-vt-acts .btn{flex:1}
@media (prefers-reduced-motion:reduce){ .vl-ticket,.vl-vt,.vl-carotte,.vl-flocon,.vl-ticket.gratte .vl-tc.gag{animation:none} }

/* ==========================================================================
   LA BOÎTE DE NUIT
   ========================================================================== */
.vl-club{position:relative;overflow:hidden;border-radius:26px;background:#1B0F33;box-shadow:0 0 0 3px #0B0E13,0 0 0 9px var(--b),0 0 0 12px #0B0E13,0 18px 0 8px rgba(0,0,0,.3);margin:12px}
.vl-club-svg{display:block;width:100%;height:auto}
.vl-club .vl-hall-chips{top:12px;bottom:auto}
.vl-danse{transform-box:fill-box;transform-origin:50% 100%;animation:vlDanse var(--beat) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s)}
@keyframes vlDanse{0%{transform:translateY(0) rotate(-7deg) scaleY(1)}50%{transform:translateY(-12px) rotate(0) scaleY(1.05)}100%{transform:translateY(0) rotate(7deg) scaleY(.94)}}
.vl-bras{transform-box:fill-box;animation:vlBras calc(var(--beat)*2) ease-in-out infinite}
.vl-bras--g{transform-origin:100% 100%}.vl-bras--d{transform-origin:0 100%;animation-delay:calc(var(--beat)*-1)}
@keyframes vlBras{0%,100%{transform:rotate(0)}50%{transform:rotate(-40deg)}}
.vl-foule{transform-box:fill-box;transform-origin:50% 100%;animation:vlFoule var(--beat) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.09s)}
@keyframes vlFoule{from{transform:translateY(0)}to{transform:translateY(-6px) rotate(3deg)}}
.vl-dj{transform-box:fill-box;transform-origin:50% 100%;animation:vlFoule var(--beat) ease-in-out infinite alternate}
.vl-dj-bras{transform-box:fill-box;transform-origin:0 100%;animation:vlBras var(--beat) ease-in-out infinite}
.vl-vinyle{transform-box:fill-box;transform-origin:center;animation:vlBoule 1.2s linear infinite}
.vl-hp{transform-box:fill-box;transform-origin:center;animation:vlHp var(--beat) ease-in-out infinite alternate}
@keyframes vlHp{to{transform:scale(1.14)}}
.vl-dalle{animation:vlDalle calc(var(--beat)*4) steps(1,end) infinite;animation-delay:calc(var(--i)*var(--beat)*-.5)}
@keyframes vlDalle{0%{fill:var(--a)}25%{fill:var(--b)}50%{fill:#1B0F33}75%{fill:var(--c)}}
.vl-brume{animation:vlBrume 9s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-2.2s)}
@keyframes vlBrume{from{transform:translateX(-40px)}to{transform:translateX(50px)}}
.vl-boule-club{transform-box:fill-box;transform-origin:center;animation:vlBoule 4s linear infinite}
.vl-eclat{animation:vlEclat 2.6s linear infinite;animation-delay:calc(var(--i)*-.19s)}
@keyframes vlEclat{0%{transform:translate(0,0);opacity:0}20%{opacity:.9}100%{transform:translate(60px,20px);opacity:0}}
.vl-laser{animation:vlLaser calc(var(--beat)*6) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.7s)}
@keyframes vlLaser{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.vl-ecran-ligne{stroke-dasharray:240;animation:vlEcranLigne 3s linear infinite}
@keyframes vlEcranLigne{from{stroke-dashoffset:480}to{stroke-dashoffset:0}}
.vl-ecran-st{animation:vlClign var(--beat) steps(2,end) infinite;animation-delay:calc(var(--i)*-.2s)}
.vl-playlists{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 14px;border-radius:18px;color:#fff;background:#241444;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-pl-b{padding:.45em .9em;border:0;border-radius:999px;cursor:pointer;font-weight:800;color:#fff;background:linear-gradient(90deg,var(--a),var(--b));
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13;opacity:.7}
.vl-pl-b.on{opacity:1;transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13,0 0 16px var(--b)}
.vl-amb{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:center;padding:10px 14px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.vl-amb span{font-weight:800}.vl-amb b{font-family:var(--display);font-weight:900}
.vl-amb small{grid-column:1/-1;font-weight:700;color:#5A5F68}
.vl-amb-b{display:block;height:14px;overflow:hidden;border-radius:99px;background:#E6DCC4;box-shadow:0 0 0 2px #0B0E13}
.vl-amb-b i{display:block;height:100%;width:var(--u);background:linear-gradient(90deg,#FF4FD8,#FFCE00,#3EE07A);background-size:200% 100%;animation:vlAmbB 2s linear infinite}
@keyframes vlAmbB{to{background-position:200% 0}}
/* les achats, communs à la boîte, à l'exposition et au magasin */
.vl-achats{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.vl-ach{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:18px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;animation:vlTicketIn .45s var(--ease-back) both;animation-delay:calc(var(--i)*45ms)}
.vl-ach.plein{background:#DDF7E6}
.vl-ach-i{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;font-size:1.5rem;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.vl-ach-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.vl-ach-c b{font-family:var(--display);font-weight:800}
.vl-ach-c p{margin:0;font-size:.78rem;line-height:1.35;color:#4A4F57}
.vl-ach-c small{font-weight:700;color:#5A5F68;font-size:.72rem}
.vl-ach-niv{display:flex;gap:4px}
.vl-ach-niv i{width:14px;height:14px;border-radius:50%;background:#E6DCC4;box-shadow:0 0 0 1.5px #0B0E13}
.vl-ach-niv i.on{background:#FFCE00}
.vl-ach .btn{align-self:center;white-space:nowrap}
@media (max-width:560px){ .vl-ach{flex-wrap:wrap} .vl-ach .btn{width:100%} }
@media (prefers-reduced-motion:reduce){
  .vl-danse,.vl-bras,.vl-foule,.vl-dj,.vl-dj-bras,.vl-vinyle,.vl-hp,.vl-dalle,.vl-brume,.vl-boule-club,.vl-eclat,.vl-laser,.vl-ecran-ligne,.vl-ecran-st,.vl-amb-b i,.vl-ach{animation:none}
}


/* ==========================================================================
   LA GALERIE « MÉMOIRES DU MÉTRO »
   ========================================================================== */
.vl-expo-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,#6B4A2B,#3A2A1C);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.vl-expo-tete b{display:block;font-family:var(--display);font-weight:900;font-size:1.3rem;text-shadow:0 2px 0 #0B0E13}
.vl-expo-tete small{color:#E9D9B4;font-weight:700}
.vl-galerie{display:flex;gap:14px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x mandatory}
.vl-salle{flex:0 0 min(700px,92%);scroll-snap-align:start;overflow:hidden;border-radius:20px;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.vl-expo-svg{display:block;width:100%;height:auto}
.vl-slot{cursor:pointer}
.vl-slot.vide:hover circle{fill:#FFE58A}
.vl-slot.plein:hover{filter:brightness(1.06)}
.vl-slot.sel{animation:vlSel .7s steps(2,end) infinite}
@keyframes vlSel{50%{filter:drop-shadow(0 0 8px #FFCE00) brightness(1.15)}}
.vl-salle--neuve{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center;color:#0B0E13;
  background:repeating-linear-gradient(-45deg,var(--cr-plat) 0 16px,#F2EAD6 16px 32px)}
.vl-salle--neuve b{font-family:var(--display);font-weight:900;font-size:1.3rem}
.vl-salle--neuve p{margin:0;color:#4A4F57}
.vl-visiteur{animation:vlVisite var(--d) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-3.1s)}
@keyframes vlVisite{0%{transform:translateX(0)}18%,26%{transform:translateX(150px)}44%,52%{transform:translateX(320px)}70%,78%{transform:translateX(480px)}100%{transform:translateX(610px)}}
.vl-gardien{transform-box:fill-box;transform-origin:50% 100%;animation:vlGardien 4s ease-in-out infinite}
@keyframes vlGardien{0%,70%,100%{transform:none}80%{transform:rotate(-8deg)}90%{transform:rotate(6deg)}}
.vl-collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vl-piece{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:16px;color:#0B0E13;background:#EEE9DD;opacity:.8;
  box-shadow:0 0 0 2px #0B0E13,0 4px 0 #0B0E13;animation:vlTicketIn .4s var(--ease-back) both;animation-delay:calc(var(--i)*30ms)}
.vl-piece.pos{opacity:1;background:var(--cr-plat)}
.vl-piece.expo{background:#DDF7E6}
.vl-piece-art{width:100%;height:auto}
.vl-piece b{font-size:.84rem;line-height:1.15}
.vl-piece small{color:#5A5F68;font-weight:700;font-size:.7rem}
.vl-piece em{font-style:normal;font-weight:800;font-size:.76rem}
.vl-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:12px}
.vl-choix-c{display:flex;flex-direction:column;gap:5px;padding:10px;border-radius:14px;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.vl-choix-c b{font-family:var(--display);font-weight:800}
.vl-choix-c p{margin:0;font-size:.78rem;line-height:1.35;color:#4A4F57}
.vl-choix-c small{font-weight:700;color:#5A5F68}
.vl-fiche-art{max-width:360px;margin:0 auto;padding:10px;border-radius:14px;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13}
.vl-fiche-art svg{display:block;width:100%;height:auto}
.vl-fiche-txt{font-size:1rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){ .vl-visiteur,.vl-gardien,.vl-slot.sel,.vl-piece{animation:none} }

/* ==========================================================================
   LE GRAND MAGASIN « GALERIES DU RAIL »
   ========================================================================== */
.vl-mag-tete{background:linear-gradient(135deg,#C04191,#6B1F55)}
.vl-mag{margin:12px;overflow:hidden;border-radius:24px;background:#DDF1FB;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 9px #C9A227,0 0 0 12px #0B0E13,0 18px 0 8px rgba(0,0,0,.3)}
.vl-mag-svg{display:block;width:100%;height:auto;max-height:78vh}
.vl-mslot{cursor:pointer}
.vl-mslot.vide:hover circle{fill:#FFE58A}
.vl-mslot.plein:hover{filter:brightness(1.05)}
.vl-marches{animation:vlMarches .8s linear infinite}
@keyframes vlMarches{to{stroke-dashoffset:-18}}
.vl-cabine{animation:vlCabine 9s ease-in-out infinite}
@keyframes vlCabine{0%,12%{transform:translateY(0)}45%,58%{transform:translateY(var(--h))}92%,100%{transform:translateY(0)}}
.vl-porteur{animation:vlPorteur var(--d) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-2.3s)}
@keyframes vlPorteur{0%,8%{transform:translateX(0)}46%,54%{transform:translateX(230px)}92%,100%{transform:translateX(470px)}}
.vl-client{animation:vlClient var(--d) ease-in-out infinite alternate;animation-delay:calc(var(--i)*-1.7s)}
@keyframes vlClient{0%{transform:translateX(-40px)}30%,40%{transform:translateX(60px)}70%,78%{transform:translateX(140px)}100%{transform:translateX(200px)}}
.vl-vendeur{transform-box:fill-box;transform-origin:50% 100%;animation:vlFoule 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.4s)}
.vl-vitrine-rame{animation:vlVitrineRame 4s ease-in-out infinite alternate}
@keyframes vlVitrineRame{from{transform:translateX(-24px)}to{transform:translateX(24px)}}
.vl-mag-info{padding:.4em .9em;border-radius:999px;font-weight:800;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.vl-alerte-mag{background:#FFD0D5}
@media (prefers-reduced-motion:reduce){ .vl-marches,.vl-cabine,.vl-porteur,.vl-client,.vl-vendeur,.vl-vitrine-rame{animation:none} }
/* un bouton marqué « hidden » disparaît vraiment (le style des boutons l'emportait) */
.vl [hidden]{display:none!important}
/* les compteurs de la boîte de nuit passent sous la salle, l'enseigne reste visible */
.vl-club .vl-hall-chips{position:static;padding:10px 12px;background:#12081F;border-top:3px solid #0B0E13}


/* ==========================================================================
   METRO CITY — LE STYLE DES VILLES PARTOUT (sauf l'onglet Trains)
   Cartes crème cernées de noir, pastilles rondes, titres en plaque verte,
   bandeaux illustrés, et un plan en papier de ville.
   ========================================================================== */
/* — bandeau de ressources — */
.mc-hud{gap:10px}
.mc-hud .mc-chip{color:#0B0E13;background:var(--cr-plat);padding:.3em 1.05em .3em .35em;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-hud .mc-chip>span:first-child{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  font-size:1.05rem;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.mc-hud .mc-chip small{color:#5A5F68;font-weight:700}
.mc-hud .mc-chip b{color:#0B0E13;font-family:var(--display);font-weight:800}
.mc-hud .mc-chip--gold{background:#FFE58A}
.mc-hud .mc-chip--sat{background:#CDEFD5}
.mc-hud .mc-chip--clic:hover{transform:translateY(-2px);box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 #0B0E13}
.mc-hud .mc-chip--clic::after{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13;font-weight:800}
/* — onglets du dock — */
.mc-dock{gap:8px}
.mc-dock .mc-dtab{color:#0B0E13;background:var(--cr-plat);font-weight:800;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;
  transition:transform .12s,background .12s}
.mc-dock .mc-dtab:hover{color:#0B0E13;background:var(--cr-blanc);transform:translateY(-2px)}
.mc-dock .mc-dtab.on{color:#0B0E13;background:#FFCE00;transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 #0B0E13}
.mc-dock .mc-dtab i{box-shadow:0 0 0 1.5px #0B0E13}
.mc-dock .mc-dtab.critique{background:#FFD6D0}
.mc-dock .mc-dtab.exceptionnel{background:#FFD9B8}

/* — le plan — */
.mc-mapwrap{background:var(--cr-bas);border-radius:24px;
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 50px -26px rgba(0,0,0,.6)}
.mc-sky{background:radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.4),transparent 58%)}
.mc-vig{box-shadow:inset 0 0 0 4px rgba(255,255,255,.4),inset 0 0 70px rgba(110,80,30,.16)}
.mc-tools{gap:8px}
.mc-tool{color:#0B0E13;background:var(--cr-plat);border-radius:14px;font-family:var(--display);font-weight:900;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;transition:transform .12s,background .12s}
.mc-tool:hover{background:var(--cr-blanc);transform:translateY(-2px)}
.mc-tool:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 #0B0E13}
.mc-tool.on{background:#FFCE00;color:#0B0E13}
.mc-tool::after{color:#0B0E13;background:var(--cr-plat);font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:0;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mc-legend{gap:7px}
.mc-legend span{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.01em;text-transform:none;
  padding:.35em .8em;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mc-scale{font-family:var(--display);font-weight:800;font-size:.72rem;color:#0B0E13;background:var(--cr-plat);border-radius:999px;
  padding:.35em .8em;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mc-ghost{opacity:.3;stroke-dasharray:none;stroke-linecap:round}
.mc-dot{fill:var(--cr-haut);stroke:#8C7B5E;stroke-width:1.1;opacity:.95}
.mc-built{filter:none}
.mc-st circle.ring{fill:#fff;stroke-width:3.2}
.mc-st:hover circle.ring{stroke-width:4.2}
.mc-st.sel circle.ring{fill:#FFCE00;stroke-width:3.4}
.mc-pulse{opacity:.25}
.mc-bldg{opacity:1}
.mc-bldg.mc-newbuild{transform-box:fill-box;transform-origin:50% 100%}
.mc-train{filter:drop-shadow(0 2.5px 0 rgba(11,14,19,.28))}
.mc-hit:hover{stroke:rgba(255,206,0,.45)}
.mc-lab rect{fill:var(--cr-haut);stroke:#0B0E13}
.mc-lab text{font-family:var(--display);font-weight:800;fill:#0B0E13;text-anchor:middle}
.mc-lab.sel rect{fill:#FFCE00}
.mc-deco-lab{font-family:var(--display);font-weight:900;font-size:26px;fill:#2F6B2A;text-anchor:middle;paint-order:stroke;
  stroke:#fff;stroke-width:6px;stroke-linejoin:round}
.mc-deco-lab--eau{fill:#1F6E99;font-size:20px}
.mc-nuages{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.mc-nuage{position:absolute;left:-140px;opacity:.7;filter:drop-shadow(0 16px 0 rgba(11,14,19,.1));
  animation:mcNuage calc(90s + var(--i)*30s) linear infinite;animation-delay:calc(var(--i)*-41s)}
.mc-mapwrap .mc-nuage svg{display:block;height:auto}
@keyframes mcNuage{from{left:-140px}to{left:calc(100% + 20px)}}
.mc-mapwrap .mc-rose{position:absolute;left:12px;top:12px;width:52px;height:52px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 3px 0 rgba(11,14,19,.3))}
/* le bandeau de tracé d'une ligne */
.mc-trace{background:var(--cr-plat);box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 18px 40px -14px rgba(0,0,0,.6)}
.mc-trace b{color:#0B0E13}
.mc-trace small{color:#4A4F57}
.mc-trace-pastille{box-shadow:0 0 0 2px #0B0E13}

/* — les bandeaux d'onglet — */
.mcx>.mcx-hero{margin-bottom:var(--sp-5);min-height:178px}
.mcx-hero .vl-hero-txt{max-width:min(560px,70%)}
.mcx-balance{animation:mcxBalance 2.8s ease-in-out infinite alternate}
@keyframes mcxBalance{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* — titres de section : la plaque verte des villes — */
.mcx .panneau,.mcx-boite .panneau{color:#fff;background:#00814F;border-radius:999px;font-weight:800;
  font-size:clamp(.9rem,2vw,1.1rem);padding:.45em 1.15em .45em .8em;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mcx .panneau::before,.mcx-boite .panneau::before{content:"M";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:var(--display);font-weight:900;font-size:.72rem;letter-spacing:0;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}

/* — toutes les cases deviennent des cartes crème cernées — */
.mcx :is(.mc-tile,.mc-bis,.mc-quete,.mc-inc,.mc-av,.mc-ext2,.mc-circ,.mc-card,.mcx-carte),
.mcx-boite :is(.mc-tile,.mc-inc){
  color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:20px;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx>div:has(>.mc-kv){padding:8px 16px;border-radius:20px;color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mcx-carte{padding:8px 16px}
.mcx .mc-tile:hover,.mcx-boite .mc-tile:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.mcx .mc-tile[disabled],.mcx-boite .mc-tile[disabled]{opacity:.6;filter:saturate(.55)}
.mcx :is(.mc-tile,.mc-bis,.mc-ext2,.mcx-carte) h4,.mcx-boite .mc-tile h4{color:#0B0E13}
.mcx :is(.mc-tile,.mc-bis,.mc-ext2,.mc-ext) p,.mcx-boite .mc-tile p{color:#4A4F57}
.mcx .price,.mcx-boite .price{align-self:flex-start;padding:.3em .85em;border-radius:999px;color:#0B0E13;background:#FFCE00;
  font-weight:700;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mcx .price.no,.mcx-boite .price.no{color:#8A0014;background:#FFD5D9}
.mcx .card-tag,.mcx-boite .card-tag,.mcx .mc-echelle,.mcx-boite .mc-echelle{color:#5A5F68}
/* lignes de calcul */
.mcx :is(.mc-tile,.mc-bis,.mc-quete,.mc-inc,.mc-av,.mc-ext2,.mc-card,.mcx-carte,.mcr-col) .mc-kv,.mcx-boite .mc-kv{
  color:#0B0E13;border-bottom:2px dotted rgba(11,14,19,.16)}
.mcx>div:has(>.mc-kv) .mc-kv{color:#0B0E13;border-bottom:2px dotted rgba(11,14,19,.16)}
.mcx :is(.mc-tile,.mc-bis,.mc-quete,.mc-inc,.mc-av,.mc-ext2,.mc-card,.mcx-carte,.mcr-col) .mc-kv:last-child,
.mcx-boite .mc-kv:last-child{border-bottom:0}
.mcx>div:has(>.mc-kv) .mc-kv:last-child{border-bottom:0}
.mcx .mc-kv--tot,.mcx-boite .mc-kv--tot{background:#FFE58A;box-shadow:0 0 0 2px #0B0E13;border-bottom:0}
.mcx .mc-kv--tot b,.mcx-boite .mc-kv--tot b{color:#0B0E13}
.mcx :is(.mc-tile,.mc-bis,.mc-quete,.mc-inc,.mc-av,.mc-ext2,.mc-card,.mcx-carte,.mcr-col) :is(.mc-note,.mc-sous,.mc-h4),
.mcx-boite :is(.mc-note,.mc-sous,.mc-h4){color:#4A4F57}
.mcx .notice,.mcx-boite .notice{color:#5A3E00;background:#FFF1C4;border-radius:14px;box-shadow:0 0 0 2px #0B0E13}
.mcx .tag,.mcx-boite .tag{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
/* les notes posées entre les cartes : une bulle d'information */
.mcx>.mc-note{position:relative;padding:12px 16px 12px 48px;border-radius:18px;color:#C9D6E4;font-weight:600;
  background:radial-gradient(120% 160% at 0% 0%,rgba(62,143,212,.3),transparent 60%),linear-gradient(165deg,#17202C,#0E141D);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(62,143,212,.42),0 14px 26px -18px #3E8FD4}
.mcx>.mc-note::before{content:"i";position:absolute;left:12px;top:9px;display:grid;place-items:center;width:24px;height:24px;
  border-radius:50%;font-family:Georgia,serif;font-style:italic;font-weight:900;font-size:.9rem;color:#fff;background:#0064B0;
  box-shadow:0 0 0 2px #0B0E13}
.mcx .mc-empty{color:#5A5F68;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;border-radius:20px;
  outline:2.5px dashed rgba(11,14,19,.22);outline-offset:-10px}
/* boutons */
.mcx .btn--ghost,.mcx-boite .btn--ghost,.mc-trace .btn--ghost{--fg:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mcx .btn--ghost:hover,.mcx-boite .btn--ghost:hover,.mc-trace .btn--ghost:hover{background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 #0B0E13}
.mcx .btn--ghost:active,.mcx-boite .btn--ghost:active,.mc-trace .btn--ghost:active{box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 #0B0E13}
.mcx .btn--solid,.mcx-boite .btn--solid{--bg:#FFCE00;--fg:#0B0E13}
.mcx .btn--solid:hover,.mcx-boite .btn--solid:hover{background:#FFE14D}
.mcx .btn--danger,.mcx-boite .btn--danger{--bg:#E3051C;--fg:#fff;--bd:transparent}
.mcx .btn--danger:hover,.mcx-boite .btn--danger:hover{background:#FF2A3F}
/* jauges */
.mcx :is(.mc-jauge,.mc-cap,.mc-bar),.mcx-boite :is(.mc-jauge,.mc-cap,.mc-bar){height:12px;background:#E6DCC4;box-shadow:inset 0 0 0 2px #0B0E13}
.mcx :is(.mc-jauge,.mc-cap,.mc-bar) i,.mcx-boite :is(.mc-jauge,.mc-cap,.mc-bar) i{box-shadow:inset 0 0 0 2px #0B0E13}
.mcx .mc-line,.mcx-boite .mc-line{border-bottom:2px dotted rgba(11,14,19,.16)}

/* — les cases d'information restent sombres, comme dans l'onglet Trains :
     le sombre explique et chiffre, le crème se manipule — */

/* — Réseau : extensions et avancement des lignes — */
.mcx .mc-ext2.pret{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13,0 0 30px -4px #FFCE00}
.mcx .mc-ext2.ouvert{background:linear-gradient(180deg,#F2FFF4,#D7F2DC);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #3ED07A,0 0 0 8.5px #0B0E13}
.mcx .mc-ext-mode{color:#fff;background:var(--c);box-shadow:0 0 0 2px #0B0E13;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.mcx .mc-ext-piste{background:#E6DCC4;box-shadow:inset 0 0 0 2px #0B0E13}
.mcx .mc-ext-leg{color:#5A5F68}
.mcx .mc-ext-leg b{color:#0B0E13}
.mcx .mc-av-resume span{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 #0B0E13}
.mcx .mc-av-resume .or{background:#FFE58A;color:#0B0E13}
.mcx .mc-av-resume .vert{background:#CDEFD5;color:#0B0E13}
.mcx .mc-av{background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,var(--cr-haut)),var(--cr-haut) 50%,var(--cr-bas));
  box-shadow:inset 7px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcx .mc-av.complete{background:linear-gradient(90deg,#FFE58A,#FFF6CC 55%,var(--cr-bas));box-shadow:inset 7px 0 0 #FFCE00,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcx .mc-av-id small{color:#5A5F68}
.mcx .mc-av-rail{height:12px;background:#E6DCC4;box-shadow:inset 0 0 0 2px #0B0E13}
.mcx .mc-av-fill{box-shadow:inset 0 0 0 2px #0B0E13}
.mcx .mc-av-pal::before{background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.mcx .mc-av-pal.on::before{background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mcx .mc-av-pal em{color:#5A5F68;font-weight:700}
.mcx .mc-av-pal.on em{color:#8A6400}
.mcx .mc-av-train{filter:drop-shadow(0 2px 0 rgba(11,14,19,.35))}
.mcx .mc-av-mult{color:#0B0E13;background:#FFE58A;box-shadow:0 0 0 1.5px #0B0E13}
.mcx .mc-av-rev{color:#0B0E13;background:#CDEFD5;box-shadow:0 0 0 1.5px #0B0E13}
.mcx .mc-av-max{color:#3A3F47;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.mcx .mc-av-max.atteint{color:#0B0E13;background:#FFCE00}
.mcx .mc-av-aide{background:radial-gradient(120% 160% at 0% 0%,rgba(62,143,212,.28),transparent 60%),linear-gradient(165deg,#17202C,#0E141D);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(62,143,212,.4)}
.mcx .mc-av-aide summary{color:#fff}
.mcx .mc-av-aide p{color:#B9C4D0}

/* — Quêtes — */
.mcx .mc-quete{box-shadow:inset 7px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mc-quete.fait{background:linear-gradient(180deg,#FFF6CC,#FBE3A0);box-shadow:inset 7px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13}
.mcx .mc-quete-tete b{color:#0B0E13}
.mcx .mc-quete-tete small{color:#4A4F57}
.mcx :is(.mc-quete-cat,.mc-quete-obt){color:#fff;background:var(--c);box-shadow:0 0 0 2px #0B0E13;
  text-shadow:1px 0 #0B0E13,-1px 0 #0B0E13,0 1px #0B0E13,0 -1px #0B0E13}
.mcx .mc-quete-flash{background:linear-gradient(180deg,#FFF6CC,#FBE3A0);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mc-quete-flash b{color:#0B0E13}
.mcx .mc-quete-flash p{color:#5A4A1E}
.mcx .mc-quete-flash.rate{background:linear-gradient(180deg,#FFE3E3,#F8C4C4)}
.mcx .mc-quete-flash.rate b{color:#8A0014}

/* — Cartes de station — */
.mcx .mc-card{box-shadow:inset 0 0 0 4px var(--rc,#B9C2CC),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mc-card--leg{box-shadow:inset 0 0 0 4px var(--mc-leg),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 0 26px rgba(255,206,0,.6)}
.mcx .mc-card--epi{box-shadow:inset 0 0 0 4px var(--mc-epi),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 0 20px rgba(165,91,216,.45)}
.mcx .mc-card:hover{transform:translateY(-4px) rotate(-.8deg)}
.mcx .mc-card .rn{display:inline-block;padding:.2em .55em;border-radius:999px;color:#0B0E13;background:var(--rc,#B9C2CC);
  box-shadow:0 0 0 1.5px #0B0E13;font-weight:700}
.mcx .mc-card .nm{color:#0B0E13}
.mcx .mc-card .ft{color:#4A4F57}

/* — Mes lignes — */
.mcx .mc-bis{box-shadow:inset 7px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mc-bis.trace{box-shadow:inset 7px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13}
.mcx .mc-bis-st{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.mcx .mc-bis-rev{color:#0B0E13;background:var(--cr-blanc);padding-left:16px;box-shadow:inset 8px 0 0 var(--c),0 0 0 2px #0B0E13}
.mcx .mc-pal-c{box-shadow:0 0 0 2px #0B0E13}
.mcx .mc-pal-c.on{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7px #0B0E13}
.mcx .mc-line-rev{color:#00814F;font-weight:700}
.mcx .mc-line-max{color:#5A5F68}
.mcx .mc-line-max.atteint{color:#8A6400}
.mcx .mc-circ{background:var(--cr-haut)}
.mcx .mc-circ-pied b{color:#0B0E13}
.mcx .mc-circ-pied span{color:#4A4F57}
.mcx .mc-circ-rev{color:#8A6400!important;font-weight:700}

/* — Boutique — */
.mcx .mc-seg{background:transparent;gap:8px;padding:2px}
.mcx .mc-seg button{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;transition:transform .12s}
.mcx .mc-seg button:hover{transform:translateY(-2px)}
.mcx .mc-seg button.on{color:#0B0E13;background:#FFCE00;transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 #0B0E13}
.mcx .mc-seg--boutique button{border-radius:18px}
.mcx .mc-seg--boutique button.on{background:color-mix(in srgb,var(--c) 42%,var(--cr-plat))}
.mcx .mc-banniere{background:radial-gradient(120% 140% at 88% 50%,color-mix(in srgb,var(--c) 38%,transparent),transparent 62%),
  linear-gradient(180deg,#8FD0F5,#E4F4FC);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.mcx .mc-banniere-txt h3{color:#fff;text-shadow:3px 0 #0B0E13,-3px 0 #0B0E13,0 3px #0B0E13,0 -3px #0B0E13,2px 2px #0B0E13,-2px -2px #0B0E13,2px -2px #0B0E13,-2px 2px #0B0E13,0 5px 0 #0B0E13}
.mcx .mc-banniere-txt p{display:inline-block;padding:6px 10px;border-radius:12px;color:#0B0E13;font-weight:700;
  background:rgba(255,255,255,.86);box-shadow:0 0 0 2px #0B0E13}
.mcx .mc-banniere-rame svg{filter:drop-shadow(0 6px 0 rgba(11,14,19,.25))}
.mcx .mc-banniere-rail{opacity:1;background:repeating-linear-gradient(90deg,#9A8A74 0 18px,transparent 18px 26px)}
.mcx .mc-booster-svg{filter:drop-shadow(0 5px 0 rgba(11,14,19,.25))}
.mcx .mc-scene,.mcx .mc-inc-scene{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}

/* — Incidents — */
.mcx .mc-inc,.mcx-boite .mc-inc{box-shadow:inset 7px 0 0 var(--g),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mc-inc-tete b,.mcx-boite .mc-inc-tete b{color:#0B0E13}
.mcx .mc-inc-tete small,.mcx-boite .mc-inc-tete small{color:#4A4F57}
.mcx .mc-inc p{color:#3A3F47}
.mcx .mc-inc-grav{color:#fff;background:var(--g);box-shadow:0 0 0 2px #0B0E13;text-shadow:1px 0 #0B0E13,-1px 0 #0B0E13,0 1px #0B0E13,0 -1px #0B0E13}
.mcx .mc-inc-eff{color:color-mix(in srgb,var(--g) 65%,#0B0E13)!important;font-weight:700}
.mcx .mc-inc-attente{color:#5A5F68}
.mcx .mc-inc-attente b{color:#8A6400}
.mcx .mc-inc-ico{filter:none}

/* — Monuments — */
.mcx .mc-or{background:linear-gradient(180deg,#FFF8DC,#F6E3A4)}
.mcx .mc-or-pax{color:#0B0E13;background:#FFE58A;box-shadow:0 0 0 2px #0B0E13}
.mcx .mc-tuile-up,.mcx-boite .mc-tuile-up{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mcx .mc-tuile-up.ok,.mcx-boite .mc-tuile-up.ok{background:#FFCE00}
.mcx .mc-or-vis svg,.mcx-boite .mc-or-vis svg{filter:drop-shadow(0 5px 0 rgba(11,14,19,.25))}

/* — les fenêtres de Metro City (fiche de station, confirmations, détails) — */
.mc-modal .box.mcx-boite{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 40px 90px rgba(0,0,0,.55)}
.mcx-boite .mc-head{padding-bottom:10px;border-bottom:2.5px dashed rgba(11,14,19,.18)}
.mcx-boite .mc-head h3{color:#0B0E13}
.mcx-boite p{color:#3A3F47}
.mcx-boite .mc-danger{color:#C4001A}
.mcx-boite .mc-st-hero>div{background:var(--cr-blanc);border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mcx-boite .mc-st-hero>div:first-child{background:#FFE58A;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mcx-boite .mc-st-hero small,.mcx-boite .mc-st-hero span{color:#5A5F68}
.mcx-boite .mc-st-hero b,.mcx-boite .mc-st-hero>div:first-child b{color:#0B0E13}
.mcx-boite .mc-st-up{background:#EAF4FB;border-radius:16px;box-shadow:0 0 0 2px #0B0E13}

/* ==========================================================================
   RENAISSANCE
   ========================================================================== */
.mcr-boucle{animation:mcrTourne 16s linear infinite}
@keyframes mcrTourne{to{transform:rotate(360deg)}}
.mcr-hero .vl-hero-eyebrow{background:#A55BD8;box-shadow:0 0 0 2px #0B0E13}
.mcr-buts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:14px}
.mcr-but{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*60ms)}
.mcr-but.ok{background:linear-gradient(180deg,#F2FFF4,#CDEFD5)}
.mcr-but-ico{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;font-size:1.35rem;
  background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13}
.mcr-but.ok .mcr-but-ico{background:#9FE3B4}
.mcr-but-c{flex:1;min-width:0}
.mcr-but-c b{display:block;font-family:var(--display);font-weight:800;line-height:1.15}
.mcr-but-c small{display:block;margin-top:5px;font-size:.78rem;font-weight:700;color:#4A4F57}
.mcr-jauge{position:relative;height:12px;margin-top:7px;border-radius:8px;overflow:hidden;background:#E6DCC4;box-shadow:inset 0 0 0 2px #0B0E13}
.mcr-jauge i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;box-shadow:inset 0 0 0 2px #0B0E13;
  background:repeating-linear-gradient(135deg,#A55BD8 0 8px,#BE82E8 8px 14px);transition:width .9s var(--ease-out-expo)}
.mcr-but.ok .mcr-jauge i{background:#3ED07A}
.mcr-but-eta{flex:none;font-family:var(--display);font-weight:900;font-size:.9rem;padding:.3em .7em;border-radius:999px;
  background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.mcr-but.ok .mcr-but-eta{color:#fff;background:#00814F}
.mcr-bilan{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:26px}
.mcr-col{position:relative;padding:30px 16px 14px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcr-col-t{position:absolute;left:14px;top:-14px;padding:.4em 1em;border-radius:999px;font-family:var(--display);font-weight:800;
  font-size:.85rem;text-transform:uppercase;color:#fff;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mcr-col.garde .mcr-col-t{background:#00814F}
.mcr-col.perd .mcr-col-t{background:#E3051C}
.mcr-col small{display:block;margin-top:10px;font-size:.8rem;line-height:1.45;font-weight:600;color:#4A4F57}
.mcr-col .mc-sous{color:#5A5F68}
.mcr-col.perd .mc-reb-mons{padding:6px 8px;border-radius:14px;background:rgba(227,5,28,.07);box-shadow:inset 0 0 0 2px rgba(227,5,28,.25)}
.mcr-gains{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:14px}
.mcr-gain{padding:12px 10px;border-radius:18px;text-align:center;color:#fff;
  background:radial-gradient(110% 100% at 100% 0%,rgba(255,206,0,.3),transparent 60%),linear-gradient(165deg,#1B2533,#0E141D);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(255,206,0,.38),0 16px 26px -18px #FFCE00;animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*70ms)}
.mcr-gain i{display:grid;place-items:center;margin:0 auto 6px;width:44px;height:44px;border-radius:50%;font-style:normal;font-size:1.3rem;
  background:#FFE58A;box-shadow:0 0 0 2px #0B0E13}
.mcr-gain b{display:block;font-family:var(--display);font-weight:900;font-size:1.3rem}
.mcr-gain small{display:block;margin-top:2px;font-size:.74rem;font-weight:700;color:#B9C4D0}
.mcr-cta{display:flex;flex-direction:column;align-items:center;gap:10px;margin:28px 0 8px;text-align:center}
.mcr-cta small{color:#C9D2DC;font-size:.8rem}
.mcr-btn{font-family:var(--display);font-weight:900;font-size:clamp(1rem,2.6vw,1.25rem);text-transform:uppercase;letter-spacing:.02em;
  padding:.8em 1.8em;border:0;border-radius:999px;cursor:pointer;color:#5A5F68;background:#E9E3D4;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .12s}
.mcr-btn:hover{transform:translateY(-2px)}
.mcr-btn:active{transform:translateY(4px);box-shadow:0 0 0 3px #0B0E13,0 2px 0 3px #0B0E13}
.mcr-btn.ok{color:#0B0E13;background:linear-gradient(180deg,#FFE14D,#FFB800);animation:mcrPulse 1.6s ease-in-out infinite}
@keyframes mcrPulse{50%{box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 0 0 14px rgba(255,206,0,.3)}}
.mcr-ligne{margin-top:14px;padding:18px 14px 16px;border-radius:22px;overflow-x:auto;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcr-piste{display:grid;grid-template-columns:repeat(var(--n),minmax(120px,1fr));gap:8px;min-width:calc(var(--n)*128px)}
.mcr-arret{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;color:#0B0E13}
.mcr-arret::before{content:"";position:absolute;left:50%;top:18px;width:calc(100% + 8px);height:12px;background:#DCCFEA;
  box-shadow:0 0 0 2.5px #0B0E13}
.mcr-arret:last-child::before{display:none}
.mcr-arret.fait::before{background:#A55BD8}
.mcr-pastille{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  font-family:var(--display);font-weight:900;font-size:1.1rem;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13}
.mcr-arret.fait .mcr-pastille{color:#fff;background:#A55BD8}
.mcr-arret.cur .mcr-pastille{background:#FFCE00;animation:mcrPulse 1.6s ease-in-out infinite}
.mcr-arret b{margin-top:12px;font-family:var(--display);font-weight:800;font-size:.9rem}
.mcr-arret em{margin-top:4px;padding:.15em .6em;border-radius:999px;font-style:normal;font-weight:800;font-size:.74rem;
  background:#FFE58A;box-shadow:0 0 0 1.5px #0B0E13}
.mcr-arret small{margin-top:6px;max-width:16ch;font-size:.7rem;line-height:1.35;font-weight:600;color:#4A4F57}
.mcr-vies{margin-top:14px}
@media (max-width:560px){ .mcx-hero .vl-hero-txt{max-width:100%} }
@media (prefers-reduced-motion:reduce){
  .mcx-balance,.mcr-boucle,.mc-nuage,.mcr-btn.ok,.mcr-arret.cur .mcr-pastille,.mcr-but,.mcr-gain{animation:none}
}


/* ==========================================================================
   METRO CITY — DEUXIÈME PASSE : alternance sombre / crème, cartes partout,
   booster en fête, métro-cadeau, scènes de la boutique, accessoires
   ========================================================================== */
/* — les cartes de station, crème partout (booster, fenêtres, cadeaux) — */
.mc-card{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:18px;
  box-shadow:inset 0 0 0 4px var(--rc,#B9C2CC),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mc-card--leg{box-shadow:inset 0 0 0 4px var(--mc-leg),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 0 26px rgba(255,206,0,.6)}
.mc-card--epi{box-shadow:inset 0 0 0 4px var(--mc-epi),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 0 20px rgba(165,91,216,.45)}
.mc-card .rn{display:inline-block;padding:.2em .55em;border-radius:999px;color:#0B0E13;background:var(--rc,#B9C2CC);
  box-shadow:0 0 0 1.5px #0B0E13;font-weight:700}
.mc-card .nm{color:#0B0E13}
.mc-card .ft{color:#4A4F57}
.mc-card .dupn{color:#FFCE00;background:#0B0E13}
.mc-sp{background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:inset 0 0 0 2.5px #0B0E13,inset 0 0 0 6.5px var(--c)}
.mc-sp b{color:#0B0E13}
.mc-sp small{color:#4A4F57}
.mc-sp-past{box-shadow:0 0 0 2.5px #0B0E13}
.mc-quete-flash{background:linear-gradient(180deg,#FFF6CC,#FBE3A0);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mc-quete-flash b{color:#0B0E13}
.mc-quete-flash p{color:#5A4A1E}
.mc-quete-flash.rate{background:linear-gradient(180deg,#FFE3E3,#F8C4C4)}
.mc-quete-flash.rate b{color:#8A0014}

/* — l'ouverture du booster : rayons, ruban, cartes crème, dos de carte ticket — */
.mc-open2 .mc-op-titre small{padding:.35em 1em;border-radius:999px;color:#0B0E13;background:var(--gl);box-shadow:0 0 0 2px #0B0E13;letter-spacing:.2em;font-weight:700}
.mc-open2 .mc-op-titre b{text-shadow:3px 0 #0B0E13,-3px 0 #0B0E13,0 3px #0B0E13,0 -3px #0B0E13,2px 2px #0B0E13,-2px -2px #0B0E13,2px -2px #0B0E13,-2px 2px #0B0E13,0 6px 0 #0B0E13}
.mc-open2 .tip{padding:.45em 1em;border-radius:999px;color:#fff;background:rgba(11,14,19,.62);box-shadow:0 0 0 1.5px rgba(255,255,255,.28)}
.mc-op-pack{isolation:isolate}
.mc-op-rayons{position:absolute;left:50%;top:50%;width:330%;aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gl) 60%,transparent) 0 9deg,transparent 9deg 18deg);
  -webkit-mask:radial-gradient(closest-side,#000 16%,rgba(0,0,0,.55) 42%,transparent 70%);mask:radial-gradient(closest-side,#000 16%,rgba(0,0,0,.55) 42%,transparent 70%);
  animation:mcOpRayons 16s linear infinite;opacity:.75;transition:opacity .4s}
@keyframes mcOpRayons{to{rotate:360deg}}
.mc-op-pack.tremble .mc-op-rayons{animation-duration:4s;opacity:1}
.mc-op-pack.fort .mc-op-rayons{animation-duration:1.4s}
.mc-op-pack.dechire .mc-op-rayons{animation:mcOpRayonsBoum .7s ease-out forwards}
@keyframes mcOpRayonsBoum{to{scale:1.9;opacity:0;rotate:70deg}}
.mc-op-ruban{position:absolute;inset:0;z-index:3;pointer-events:none}
.mc-op-ruban svg{display:block;width:100%;height:100%;overflow:visible}
.mc-op-noeud{transform-box:fill-box;transform-origin:50% 90%;animation:mcOpNoeud 1.8s ease-in-out infinite}
@keyframes mcOpNoeud{0%,100%{transform:rotate(-7deg) scale(1)}50%{transform:rotate(7deg) scale(1.06)}}
.mc-op-pack.tremble .mc-op-noeud{animation-duration:.5s}
.mc-op-pack.dechire .mc-op-ruban{animation:mcOpRubanFin .55s ease-in forwards}
@keyframes mcOpRubanFin{to{opacity:0}}
.mc-op-pack.dechire .mc-op-noeud{animation:mcOpNoeudVole .6s var(--ease-back) forwards}
@keyframes mcOpNoeudVole{to{transform:translateY(-130px) rotate(-40deg) scale(1.5);opacity:0}}
.mc-op-pointilles{z-index:4}
.mc-open2 .face{box-shadow:0 6px 0 rgba(0,0,0,.35)}
.mc-open2 .front .mc-card{height:100%;border-radius:16px;box-shadow:inset 0 0 0 2.5px #0B0E13,inset 0 0 0 7px var(--rc,#B9C2CC)}
.mc-open2 .front .mc-card.mc-card--leg{box-shadow:inset 0 0 0 2.5px #0B0E13,inset 0 0 0 7px var(--mc-leg)}
.mc-open2 .front .mc-card.mc-card--epi{box-shadow:inset 0 0 0 2.5px #0B0E13,inset 0 0 0 7px var(--mc-epi)}
.mc-open2 .back{background:radial-gradient(circle at 50% 44%,var(--cr-plat) 0 25%,transparent 26%),repeating-linear-gradient(135deg,#0064B0 0 12px,#0B70C2 12px 24px);
  box-shadow:inset 0 0 0 2.5px #0B0E13,inset 0 0 0 7px #FFCE00,inset 0 0 0 9px #0B0E13}
.mc-open2 .back::before{box-shadow:none}
.mc-open2 .back::after{color:#0B0E13;background:#FFCE00;font-weight:900;box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.mc-open2 .mc-op-rar{border-radius:8px;font-weight:900;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-open2 .slot.revele .flip{animation:mcOpSaute .5s var(--ease-back)}
@keyframes mcOpSaute{0%{scale:1}40%{scale:1.13}100%{scale:1}}

/* — le métro-cadeau : un podium à rayons, une rame emballée — */
.mc-mtr{isolation:isolate;border-radius:24px;background:var(--cr-plat);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mc-mtr::after{content:"";position:absolute;left:50%;top:56%;width:190%;aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--halo,#FFCE00) 40%,#FFF3C4) 0 10deg,var(--cr-plat) 10deg 20deg);
  animation:mcOpRayons 24s linear infinite}
.mc-mtr.halo{box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 0 42px -6px var(--halo)}
.mc-mtr-quai{background:none;-webkit-mask-image:none;mask-image:none}
.mc-mtr-plaque{font-family:var(--display);font-weight:900;letter-spacing:.2em;color:#fff;background:#0B3D74;padding:5px 16px;border-radius:6px;
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 1.5px #fff}
.mc-mtr-svg{filter:drop-shadow(0 8px 0 rgba(11,14,19,.22))}
.mc-mtr-boite:hover .mc-mtr-svg{filter:drop-shadow(0 10px 0 rgba(11,14,19,.22)) brightness(1.05)}
.mc-mtr-jetons{gap:10px}
.mc-mtr-jetons i{position:relative;width:24px;height:15px;border-radius:3px;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.mc-mtr-jetons i::after{content:"";position:absolute;left:8px;top:2px;bottom:2px;border-left:1.5px dashed #0B0E13;opacity:.45}
.mc-mtr-jetons i.on{background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13;transform:rotate(-10deg) scale(1.18)}
.mc-mtr-rar{display:table;margin:12px auto 0;padding:.25em 1.2em;border-radius:10px;background:currentColor;-webkit-text-fill-color:#fff;
  text-shadow:0 2px 0 #0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-mtr-noeud{transform-box:fill-box;transform-origin:50% 80%}
.mc-mtr.ouvre .mc-mtr-noeud{animation:mcMtrNoeud .7s var(--ease-back) forwards}
@keyframes mcMtrNoeud{30%{transform:scale(1.15) rotate(-6deg)}100%{transform:translateY(-140px) rotate(-38deg) scale(1.3);opacity:0}}
.mc-mtr-gain{background:radial-gradient(circle,rgba(255,248,230,.97) 0 52%,rgba(255,248,230,0) 72%)}
.mc-mtr-gain b{color:var(--c);text-shadow:2px 0 #0B0E13,-2px 0 #0B0E13,0 2px #0B0E13,0 -2px #0B0E13,0 4px 0 #0B0E13}
.mc-mtr-gain small{color:#4A4F57}

/* — les scènes de la boutique — */
.mcx .mc-scene{background:var(--cr-haut)}
.mcx-sc-rame{animation:mcxRame 12s cubic-bezier(.45,0,.35,1) infinite}
@keyframes mcxRame{0%{transform:translateX(-1000px)}22%,62%{transform:translateX(0)}100%{transform:translateX(780px)}}
.mcx-sc-lampe{animation:mcxLampe 3.4s ease-in-out infinite alternate}
@keyframes mcxLampe{from{opacity:.3}to{opacity:.65}}
.mcx-sc-cam{transform-box:fill-box;transform-origin:0% 50%;animation:mcxCam 4.2s ease-in-out infinite alternate}
@keyframes mcxCam{from{transform:rotate(-10deg)}to{transform:rotate(14deg)}}
.mcx-sc-clig{animation:mcxClig 1s steps(2,jump-none) infinite}
@keyframes mcxClig{from{opacity:1}to{opacity:.15}}
.mcx-sc-phare{animation:mcxPhare 2.4s ease-in-out infinite}
@keyframes mcxPhare{0%,100%{opacity:.4}50%{opacity:.85}}
.mcx-sc-fantome{opacity:.6}

/* — accessoires de métro : états vides, titres de section, fenêtres — */
.mcx .mc-empty::before{content:"";display:block;width:120px;height:64px;margin:0 auto 8px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M4 60 H116' stroke='%238A7B66' stroke-width='4'/%3E%3Crect x='10' y='16' width='92' height='34' rx='13' fill='%23FFCE00' stroke='%230B0E13' stroke-width='3'/%3E%3Crect x='20' y='23' width='24' height='14' rx='5' fill='%23E4F4FC' stroke='%230B0E13' stroke-width='2.4'/%3E%3Crect x='52' y='23' width='24' height='14' rx='5' fill='%23E4F4FC' stroke='%230B0E13' stroke-width='2.4'/%3E%3Cpath d='M25 31 q7 5 14 0 M57 31 q7 5 14 0' fill='none' stroke='%230B0E13' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='10' y='40' width='92' height='5' fill='%230064B0'/%3E%3Ccircle cx='30' cy='53' r='6' fill='%232A3440' stroke='%230B0E13' stroke-width='2.4'/%3E%3Ccircle cx='82' cy='53' r='6' fill='%232A3440' stroke='%230B0E13' stroke-width='2.4'/%3E%3Ctext x='98' y='14' font-family='Arial' font-weight='900' font-size='12' fill='%230B0E13'%3Ez%3C/text%3E%3Ctext x='108' y='7' font-family='Arial' font-weight='900' font-size='9' fill='%230B0E13'%3Ez%3C/text%3E%3C/svg%3E") center/contain no-repeat}
.mcx-boite .mc-head{position:relative}
.mcx-boite .mc-head::after{content:"";position:absolute;left:0;bottom:-13px;width:70px;height:23px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 26'%3E%3Crect x='6' y='2.5' width='58' height='6' rx='3' fill='%23C9CFD6' stroke='%230B0E13' stroke-width='2'/%3E%3Cpath d='M3 20 V11 Q3 5 11 5 H58 Q66 5 68 11 L70 20 Z' fill='%23FFFDF4' stroke='%230B0E13' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M3.6 16 H69.4' stroke='%230064B0' stroke-width='4'/%3E%3Crect x='8' y='8' width='11' height='6' rx='2' fill='%23BDE6F7' stroke='%230B0E13' stroke-width='1.5'/%3E%3Crect x='23' y='8' width='11' height='6' rx='2' fill='%23BDE6F7' stroke='%230B0E13' stroke-width='1.5'/%3E%3Crect x='38' y='8' width='11' height='6' rx='2' fill='%23BDE6F7' stroke='%230B0E13' stroke-width='1.5'/%3E%3Cpath d='M54 8 H62 Q64.5 8 65.5 11 L66.5 14 H54 Z' fill='%23BDE6F7' stroke='%230B0E13' stroke-width='1.5' stroke-linejoin='round'/%3E%3Ccircle cx='66' cy='17.5' r='2' fill='%23FFF6C2' stroke='%230B0E13' stroke-width='1.2'/%3E%3Ccircle cx='15' cy='21' r='3.2' fill='%232A3440' stroke='%230B0E13' stroke-width='1.8'/%3E%3Ccircle cx='55' cy='21' r='3.2' fill='%232A3440' stroke='%230B0E13' stroke-width='1.8'/%3E%3Ccircle cx='11' cy='10.5' r='1.6' fill='%23FFCE00' stroke='%230B0E13' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;animation:mcxTeteTrain 13s linear infinite}
@keyframes mcxTeteTrain{from{left:-72px}to{left:100%}}

@media (prefers-reduced-motion:reduce){
  .mc-op-rayons,.mc-op-noeud,.mc-mtr::after,.mcx-sc-rame,.mcx-sc-lampe,.mcx-sc-cam,.mcx-sc-clig,.mcx-sc-phare,
  .mcx-boite .mc-head::after,.mc-open2 .slot.revele .flip{animation:none}
}


/* ==========================================================================
   METRO CITY — les cases d'information restent sombres (correctif)
   ========================================================================== */
.mcx .mc-info{color:#fff;background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--a) 50%,transparent),transparent 60%),
  linear-gradient(165deg,color-mix(in srgb,var(--b) 42%,#131B26),#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--a) 40%,transparent),0 16px 30px -20px var(--a)}
.mcx .mc-info:hover{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--a),0 22px 38px -20px var(--a)}
.mcx .mc-info p{color:#B9C4D0}

/* ==========================================================================
   APPRENDRE LE MÉTRO — LES TROIS JEUX DÉBUTANT, EN CARTOON
   ========================================================================== */
/* — 1. Couleurs des lignes : mur de faïence, plaques émaillées, pots de peinture — */
.ap--debutant .ap-mur{position:relative;padding:16px 16px 18px;border-radius:22px;
  background:linear-gradient(180deg,#0064B0 0 10px,#0B0E13 10px 12.5px,transparent 12.5px),
    repeating-linear-gradient(0deg,#DCD3BF 0 1.5px,transparent 1.5px 24px),
    repeating-linear-gradient(90deg,#DCD3BF 0 1.5px,transparent 1.5px 40px),linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ap--debutant .ap-mur::before{content:"Atelier des couleurs";grid-column:1/-1;justify-self:center;margin:6px 0 4px;padding:.35em 1.2em;border-radius:6px;
  font-family:var(--display);font-weight:900;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#0B3D74;
  box-shadow:inset 0 0 0 2px #0B3D74,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13}
.ap--debutant .ap-mur .slot{min-height:80px;border-radius:14px;color:#fff;background:#0B3D74;
  box-shadow:inset 0 0 0 3px #0B3D74,inset 0 0 0 5px #fff,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .ap-mur .slot .bullet{width:42px;height:42px;font-size:1.05rem;flex:none;box-shadow:0 0 0 2.5px #0B0E13}
.ap--debutant .ap-mur .slot-label{color:#BFD6F0;font-weight:700}
.ap--debutant .ap-mur .slot-fill{color:#fff;font-family:var(--display);font-weight:800;font-size:1rem}
.ap--debutant .ap-mur .slot.hot{transform:scale(1.05) rotate(-1deg);
  box-shadow:inset 0 0 0 3px #0B3D74,inset 0 0 0 5px #FFCE00,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 0 26px #FFCE00}
.ap--debutant .ap-mur .slot.ok{background:linear-gradient(180deg,#0B3D74 0 70%,var(--accent) 70%)}
.ap--debutant .ap-etagere{position:relative;gap:22px;padding:6px 16px 14px;margin-top:6px}
.ap--debutant .ap-etagere::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:16px;border-radius:7px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#C98A4B,#A86F3A);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .ap-etagere .chip{position:relative;z-index:1;padding:0!important;background:none;box-shadow:none;border-radius:12px}
.ap--debutant .ap-etagere .chip.lifted{box-shadow:none}
.ap--debutant .chip--pot svg{display:block;width:78px;height:86px;filter:drop-shadow(0 4px 0 rgba(11,14,19,.3));transition:transform .2s var(--ease-back)}
.ap--debutant .chip--pot:hover svg{transform:translateY(-4px) rotate(-4deg)}
.ap--debutant .chip--pot.lifted svg{transform:rotate(-12deg) scale(1.12)}

/* — 2. Les terminus : chaque ligne est un paysage avec ses deux gares — */
.ap--debutant .ap-quais .lineplate{overflow:visible;padding:20px 20px 16px;border-radius:22px;
  background:linear-gradient(180deg,var(--cr-haut) 0,var(--cr-haut) 60%,color-mix(in srgb,var(--cr-bas) 72%,#7E9A6A) 60%,color-mix(in srgb,var(--cr-bas) 62%,#6F8C5C) 100%);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.ap--debutant .ap-quais .lineplate.done{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px var(--accent),0 0 0 10px #0B0E13,0 8px 0 10px #0B0E13}
.ap--debutant .ap-quais .lp-rail{top:60%;height:12px;margin-top:-6px;border-radius:6px;
  background:repeating-linear-gradient(90deg,#8A7B66 0 14px,#C9BFA8 14px 22px);box-shadow:0 0 0 2.5px #0B0E13}
.ap--debutant .ap-quais .lineplate.done .lp-rail{background:var(--accent)}
.ap--debutant .ap-quais .lp-end{min-height:74px;border-radius:12px;background:color-mix(in srgb,var(--cr-blanc) 70%,transparent);
  box-shadow:0 0 0 2.5px rgba(11,14,19,.35);outline:2.5px dashed rgba(11,14,19,.32);outline-offset:-8px}
.ap--debutant .ap-quais .lp-end::before{content:"M";position:absolute;top:-14px;left:50%;translate:-50% 0;z-index:2;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:.8rem;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13}
.ap--debutant .ap-quais .lp-end.hot{transform:scale(1.05);background:#FFF3C4;outline-color:#0B0E13}
.ap--debutant .ap-quais .lp-end.full{background:#0B3D74;outline:0;
  box-shadow:inset 0 0 0 3px #0B3D74,inset 0 0 0 5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--debutant .ap-quais .lp-ph{color:#3A3F47;font-weight:700}
.ap--debutant .ap-quais .lp-term{color:#fff;font-weight:800}
.ap--debutant .ap-quais .lp-mid{z-index:1;padding:8px 12px;border-radius:16px;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--debutant .ap-quais .lp-name{color:#0B0E13;font-weight:800}
.ap--debutant .ap-plaques .chip{color:#fff;background:#0B3D74;border-radius:10px;font-family:var(--display);font-weight:800;letter-spacing:.02em;
  box-shadow:inset 0 0 0 2px #0B3D74,inset 0 0 0 4px #fff,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .ap-plaques .chip.lifted{box-shadow:inset 0 0 0 2px #0B3D74,inset 0 0 0 4px #FFCE00,0 0 0 2.5px #0B0E13,0 16px 24px rgba(0,0,0,.5)}

/* — 3. Les arrondissements : le plan cartoon, les plaques de rue — */
.ap--debutant .paris{background:var(--cr-bas);border-radius:22px;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ap--debutant .ar-paris{fill:var(--cr-plat);stroke:#0B0E13;stroke-width:6;stroke-linejoin:round}
.ap--debutant .ar-paris-ombre{fill:rgba(11,14,19,.16)}
.ap--debutant .ar-slot{fill:var(--cr-haut);stroke:#B9AE98;stroke-width:1.6;stroke-dasharray:6 5}
.ap--debutant .ar-slot.hot{fill:#FFE58A;stroke:#0B0E13;stroke-width:3;stroke-dasharray:none}
.ap--debutant .ar-slot.ok{stroke:#0B0E13;stroke-width:2.4;stroke-dasharray:none}
.ap--debutant .ar-slot.ok[data-n="1"]{fill:#FFD6A5}.ap--debutant .ar-slot.ok[data-n="2"]{fill:#FDF6A8}
.ap--debutant .ar-slot.ok[data-n="3"]{fill:#CAF5BF}.ap--debutant .ar-slot.ok[data-n="4"]{fill:#A8EEF5}
.ap--debutant .ar-slot.ok[data-n="5"]{fill:#B2CDFF}.ap--debutant .ar-slot.ok[data-n="6"]{fill:#C9C0FF}
.ap--debutant .ar-slot.ok[data-n="7"]{fill:#FFCCF5}.ap--debutant .ar-slot.ok[data-n="8"]{fill:#FFB8B8}
.ap--debutant .ar-slot.ok[data-n="9"]{fill:#FFE5A0}.ap--debutant .ar-slot.ok[data-n="10"]{fill:#C6F0C6}
.ap--debutant .ar-slot.ok[data-n="11"]{fill:#B5EAD7}.ap--debutant .ar-slot.ok[data-n="12"]{fill:#C7CEEA}
.ap--debutant .ar-slot.ok[data-n="13"]{fill:#F7C6D9}.ap--debutant .ar-slot.ok[data-n="14"]{fill:#FFDAC1}
.ap--debutant .ar-slot.ok[data-n="15"]{fill:#E2F0CB}.ap--debutant .ar-slot.ok[data-n="16"]{fill:#B5D8EB}
.ap--debutant .ar-slot.ok[data-n="17"]{fill:#F3D1F4}.ap--debutant .ar-slot.ok[data-n="18"]{fill:#FCE1A8}
.ap--debutant .ar-slot.ok[data-n="19"]{fill:#D0F4DE}.ap--debutant .ar-slot.ok[data-n="20"]{fill:#E4C8F9}
.ap--debutant .ar-slot.ko{fill:#FFB3B8;stroke:#E3051C;stroke-width:3;stroke-dasharray:none}
.ap--debutant .ar-slot.choisi{stroke:#0B0E13;stroke-width:5}
.ap--debutant .ar-num{fill:#9A8F78;font-family:var(--display);font-weight:900;font-size:17px;paint-order:stroke;stroke:#FFF8E6;stroke-width:4px;
  stroke-linejoin:round;text-anchor:middle}
.ap--debutant .ar-slot.ok + .ar-num{fill:#0B0E13;stroke:#fff}
.ap--debutant .ar-seine{stroke:#0B0E13;stroke-width:15}
.ap--debutant .ar-seine2{stroke:#6FBCEB;stroke-width:10}
.ap--debutant .ar-seine3{fill:none;stroke:#fff;stroke-width:2.4;stroke-dasharray:6 16;stroke-linecap:round;opacity:.85;pointer-events:none}
.ar-seine3{fill:none;stroke:none}
.ar-deco,.ar-monu{pointer-events:none}
.ar-monu{opacity:0;transition:opacity .3s ease}
.ar-slot.ok ~ .ar-monu{opacity:1}
.ar-monu-in{transform-box:fill-box;transform-origin:50% 100%}
.ar-slot.ok ~ .ar-monu .ar-monu-in{animation:arMonuPop .6s var(--ease-back) both}
@keyframes arMonuPop{from{transform:translateY(8px) scale(.3)}to{transform:none}}
.ap--debutant .artip{color:#0B0E13;background:var(--cr-plat);border-radius:14px;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--debutant .artip span{color:#4A4F57}
.ap--debutant .artip-l{color:#5A5F68!important}
.ap--debutant .ar-fiche{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:18px;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.ap--debutant .ar-fiche-tete b{color:#0B0E13;background:#83C491;box-shadow:0 0 0 2.5px #0B0E13}
.ap--debutant .ar-fiche-tete strong{color:#0B0E13}
.ap--debutant .ar-fiche-tete small{color:#4A4F57}
.ap--debutant .ar-fiche-x{color:#0B0E13}
.ap--debutant .ar-lieu{background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap--debutant .ar-lieu b{color:#0B0E13}
.ap--debutant .ar-lieu small{color:#4A4F57}
.ap--debutant .chip--num,.ap--debutant .chip--arr{color:#fff;background:#1E4E8C;border-radius:10px;
  box-shadow:inset 0 0 0 4px #2E8B57,inset 0 0 0 5.5px #fff,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .chip--num b,.ap--debutant .chip--arr b{color:#fff;font-family:var(--display);font-weight:900}
.ap--debutant .chip--arr span{color:#CFE4FA}
@media (prefers-reduced-motion:reduce){ .ar-slot.ok ~ .ar-monu .ar-monu-in{animation:none} }


/* ==========================================================================
   APPRENDRE LE MÉTRO — AVANCÉ : L'INTÉRIEUR DES SEPT JEUX EN CARTOON
   Le cadre sombre reste ; ce qu'on touche devient clair, cerné, illustré.
   ========================================================================== */
/* — éléments communs : réponses, saisies, notes, plans de trajet, résultats — */
.ap .opt{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:16px;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap .opt:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 #0B0E13}
.ap .opt.sel{background:#FFE58A;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13}
.ap .opt.good{background:linear-gradient(180deg,#E6FAEA,#BDEBC9);box-shadow:inset 7px 0 0 #00814F,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap .opt.bad{background:linear-gradient(180deg,#FFE7E9,#FFC4CA);box-shadow:inset 7px 0 0 #E3051C,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap .opt .tag{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.ap .ac input{color:#0B0E13;background:var(--cr-plat);font-family:var(--display);font-weight:700;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap .ac input::placeholder{color:#8A7B66}
.ap .ac ul{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 14px 26px rgba(0,0,0,.45)}
.ap .ac li[aria-selected="true"],.ap .ac li:hover{background:#FFE58A}
.ap .notice{color:#3A3F47;background:var(--cr-plat);border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap .routemap{padding:14px 16px;border-radius:20px;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap .routemap text{fill:#0B0E13}
.ap .routemap text[font-size="13"]{fill:#4A4F57}
.ap .routemap text[font-size="10"]{fill:#6B5E48}
.ap .routemap circle{fill:#fff}
.ap .stat{min-width:118px;padding:.65em 1em;border-radius:16px;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap .stat span{color:#5A5F68}
.ap .sortrow{color:#0B0E13;background:var(--cr-plat);border-radius:12px;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap .sortrow .idx{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;text-align:center;
  font-weight:700;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13}
.ap .sortrow.ok{background:#CDEFD5;box-shadow:inset 6px 0 0 #00814F,0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap .sortrow.ko{background:#FFD5D9;box-shadow:inset 6px 0 0 #E3051C,0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap .sortrow.dragging{box-shadow:0 0 0 2px #0B0E13,0 16px 26px rgba(0,0,0,.5)}

/* — 1. Lignes d'une station : la correspondance en plein jour — */
.ap--avance .node-stage{border-radius:22px;background:var(--cr-bas);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ap--avance #nd-lines{filter:drop-shadow(2px 0 0 #0B0E13) drop-shadow(-2px 0 0 #0B0E13) drop-shadow(0 2px 0 #0B0E13) drop-shadow(0 -2px 0 #0B0E13)}
.ap--avance #nd-lines circle{fill:#fff}
.ap--avance #nd-core{fill:var(--cr-plat);stroke:#0B0E13}

/* — 2. Quiz : le quai cartoon, le panneau d'affichage, les deux grandes cartes — */
.ap--avance .scene{border-radius:22px;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ap--avance .quizboard{left:14px;right:14px;bottom:14px;padding:14px 18px;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .quizboard .hudlabel{display:inline-block;padding:.3em .8em;border-radius:6px;color:#fff;background:#0B3D74;letter-spacing:.14em;
  box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2px #0B0E13}
.ap--avance .quizq{color:#0B0E13}
.ap--avance .acard{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:22px;
  box-shadow:inset 0 9px 0 var(--tint),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.ap--avance .acard:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:inset 0 9px 0 var(--tint),0 0 0 3px #0B0E13,0 10px 0 3px #0B0E13}
.ap--avance .acard .mark{width:48px;height:48px;font-size:1.3rem;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:0 0 0 3px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .acard small{color:#4A4F57}
.ap--avance .acard[disabled]{opacity:.6}
.ap--avance .acard.chosen{opacity:1;background:linear-gradient(180deg,#E6FAEA,#BDEBC9);
  box-shadow:inset 0 9px 0 var(--tint),0 0 0 3px #0B0E13,0 0 0 7px var(--tint),0 0 0 10px #0B0E13}
.ap--avance .acard.bad{opacity:1;background:linear-gradient(180deg,#FFE7E9,#FFC4CA)}

/* — 4. Reconnaître une station : le tableau dans son cadre doré — */
.ap--avance .im-niv{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:20px;
  box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--avance .im-niv::before{display:none}
.ap--avance .im-niv:hover{box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 9px 0 2.5px #0B0E13}
.ap--avance .im-niv.on{background:linear-gradient(180deg,#FFF6CC,#FBE3A0);box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 0 0 8.5px #0B0E13}
.ap--avance .im-niv small{color:#4A4F57}
.ap--avance .im-compte{padding:.25em .7em;border-radius:999px;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.ap--avance .im-cadre{margin:28px auto 0;border-radius:6px;background:#0B0E13;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 13px #D9A93A,0 0 0 16px #0B0E13,0 20px 0 14px rgba(0,0,0,.3)}
.ap--avance .im-cadre::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:6px;box-shadow:inset 0 0 0 4px #FFE58A,inset 0 0 0 6px #0B0E13}
.ap--avance .im-etiquette{left:auto;right:16px;top:auto;bottom:16px;padding:.45em 1em;border-radius:6px;font-family:var(--display);font-weight:800;
  letter-spacing:.08em;color:#0B0E13;background:var(--cr-plat);backdrop-filter:none;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13;z-index:2}
.ap--avance .im-opt{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .im-opt:hover:not([disabled]){background:var(--cr-blanc);box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 #0B0E13}
.ap--avance .im-opt.juste{background:linear-gradient(180deg,#E6FAEA,#BDEBC9);box-shadow:inset 7px 0 0 #00814F,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .im-opt.faux{background:linear-gradient(180deg,#FFE7E9,#FFC4CA);box-shadow:inset 7px 0 0 #E3051C,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .im-saisie input{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .im-reveal{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:20px;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .im-reveal.bon{box-shadow:inset 0 9px 0 #3ED07A,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .im-reveal.mauvais{box-shadow:inset 0 9px 0 #E3051C,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .im-verdict{padding:.3em .8em;border-radius:999px;font-weight:700;color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.ap--avance .im-reveal p{color:#4A4F57}

/* — 5. Nombre de voyageurs : quais à foule, tickets jaunes, compteurs — */
.ap--avance .quai{color:#0B0E13;border-radius:18px;padding:16px 16px 24px;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--avance .quai::after{content:"";position:absolute;right:10px;bottom:16px;width:58px;height:24px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26'%3E%3Cpath d='M2 26 q0 -10 9 -10 q9 0 9 10z' fill='%23E3051C' stroke='%230B0E13' stroke-width='1.6'/%3E%3Ccircle cx='11' cy='10' r='5' fill='%23E8B98C' stroke='%230B0E13' stroke-width='1.6'/%3E%3Cpath d='M16 26 q0 -12 10 -12 q10 0 10 12z' fill='%233E8FD4' stroke='%230B0E13' stroke-width='1.6'/%3E%3Ccircle cx='26' cy='8' r='5.5' fill='%23C98A5A' stroke='%230B0E13' stroke-width='1.6'/%3E%3Cpath d='M32 26 q0 -9 8 -9 q8 0 8 9z' fill='%23FFCE00' stroke='%230B0E13' stroke-width='1.6'/%3E%3Ccircle cx='40' cy='12' r='4.5' fill='%23E8B98C' stroke='%230B0E13' stroke-width='1.6'/%3E%3Cpath d='M44 26 q0 -11 8 -11 q8 0 8 11z' fill='%233ED07A' stroke='%230B0E13' stroke-width='1.6'/%3E%3Ccircle cx='52' cy='10' r='5' fill='%23F1C9A0' stroke='%230B0E13' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.ap--avance .quai .edge{height:12px;background:var(--accent);box-shadow:inset 0 2.5px 0 #0B0E13}
.ap--avance .quai.hot{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13}
.ap--avance .quai.ok{background:linear-gradient(180deg,var(--cr-haut),color-mix(in srgb,var(--accent) 22%,var(--cr-bas)))}
.ap--avance .quai .slot-fill{color:#0B0E13;font-weight:800}
.ap--avance .quai .val{display:inline-block;padding:.15em .6em;border-radius:10px;font-family:var(--mono);font-size:1.15rem;color:#FFCE00;background:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px #3A4553}
.ap--avance .ticket{color:#0B0E13;background:linear-gradient(100deg,#FFE58A,#FFD24A);border-radius:8px;font-weight:700;
  box-shadow:0 0 0 2px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .ticket .mag{width:9px;background:#8A5A2B}
.ap--avance .ticket.lifted{box-shadow:0 0 0 2px #0B0E13,0 18px 26px rgba(0,0,0,.5)}

/* — 6. Itinéraire Avancé : plaques de départ, bulle d'agent, feuille de route, ruban de ligne — */
.ap--avance .av-palier{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:20px;
  box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--avance .av-palier::before{display:none}
.ap--avance .av-palier:hover{box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 9px 0 2.5px #0B0E13}
.ap--avance .av-palier.on{background:linear-gradient(180deg,#FFF6CC,#FBE3A0);box-shadow:inset 8px 0 0 var(--c),0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 0 0 8.5px #0B0E13}
.ap--avance .av-palier.lock{opacity:.6;filter:grayscale(.4)}
.ap--avance .av-num{box-shadow:0 0 0 2.5px #0B0E13}
.ap--avance .av-palier small{color:#4A4F57}
/* les titres des paliers et des niveaux étaient blancs sur crème */
.ap--avance .im-niv b,.ap--avance .av-palier b{color:#0B0E13}
.ap--avance .av-tags i{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 1.5px #0B0E13}
.ap--avance .av-need{color:#8A6400}
.ap--avance .av-mission{color:#0B0E13;border-radius:22px;background:linear-gradient(180deg,var(--cr-haut),var(--cr-haut) 72%,color-mix(in srgb,var(--cr-bas) 72%,#7E9A6A) 72%);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ap--avance .av-pt span{color:#0B0E13;font-weight:700}
.ap--avance .av-pt b{display:inline-block;padding:.4em 1em;border-radius:8px;color:#fff;background:#0B3D74;
  box-shadow:inset 0 0 0 2px #0B3D74,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--avance .av-dot{width:20px;height:20px;box-shadow:0 0 0 2.5px #0B0E13}
.ap--avance .av-fleche{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:900;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .av-bulle{background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.ap--avance .av-bulle::after{border-right-color:#0B0E13}
.ap--avance .av-incident{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:16px;
  box-shadow:inset 7px 0 0 #E3051C,0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .av-incident b{color:#C4001A}
.ap--avance .av-incident small{color:#4A4F57}
.ap--avance .av-ico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font-size:1.2rem;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13}
.ap--avance .av-feuille{padding:14px 16px;border-radius:20px;color:#0B0E13;
  background:repeating-linear-gradient(180deg,var(--cr-haut) 0 27px,#ECE4D1 27px 28px);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--avance .av-feuille .hint,.ap--avance .av-ref .hint{color:#3A3F47}
.ap--avance .av-etape{color:#0B0E13;background:var(--cr-blanc);box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap--avance .av-txt{color:#5A5F68}
.ap--avance .av-etape--dep{box-shadow:inset 6px 0 0 #3ED07A,0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap--avance .av-etape--todo{opacity:.8;background:var(--cr-plat);box-shadow:inset 6px 0 0 #E3051C,0 0 0 2px rgba(11,14,19,.4)}
.ap--avance .av-ligne{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .av-ligne:hover{background:var(--cr-blanc)}
.ap--avance .av-ligne--pied{color:#0B0E13;background:#FFE58A}
.ap--avance .av-ruban{position:relative;gap:10px;padding:18px 10px;border-radius:18px;background-color:var(--cr-plat);
  background-image:linear-gradient(var(--c),var(--c)),linear-gradient(#0B0E13,#0B0E13);background-repeat:no-repeat;
  background-size:100% 8px,100% 14px;background-position:0 50%,0 50%;background-attachment:local;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .av-arret{position:relative;z-index:1;color:#0B0E13;background:var(--cr-blanc);border-radius:999px;font-weight:700;box-shadow:0 0 0 2.5px #0B0E13}
.ap--avance .av-arret:hover{color:#fff;background:var(--c)}
.ap--avance .av-arret.ici{color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #fff,0 0 0 7px #0B0E13}
.ap--avance .av-arret.ferme{background:#FFD5D9;box-shadow:0 0 0 2.5px #E3051C}
.ap--avance .av-arrive{color:#0B0E13;background:#CDEFD5;border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.ap--avance .av-resultat.gagne .av-bulle{background:#CDEFD5}
.ap--avance .av-ref{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:20px;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}

/* — 7. Reconstituer une ligne : le chantier en plein jour — */
.ap--avance .builder{border-radius:22px;
  background:linear-gradient(180deg,var(--cr-haut) 0,var(--cr-haut) 150px,var(--cr-bas) 150px,var(--cr-bas) 100%);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}


/* ==========================================================================
   COULEURS PLUS DOUCES
   Le crème des cartes s'assombrit en sable dans Metro City ; dans les jeux,
   il prend la teinte du jeu, en plus sourd. Les surfaces vives ne piquent
   plus les yeux et chaque jeu garde sa couleur.
   ========================================================================== */
:root{--cr-haut:#E6DBC1;--cr-bas:#D4C6A6;--cr-plat:#DED1B4;--cr-blanc:#ECE3CF}
.ap{--cr-haut:color-mix(in srgb,var(--g,#8A93A0) 28%,#DBD2BF);--cr-bas:color-mix(in srgb,var(--g,#8A93A0) 38%,#C2B79F);
  --cr-plat:color-mix(in srgb,var(--g,#8A93A0) 30%,#D3C9B5);--cr-blanc:color-mix(in srgb,var(--g,#8A93A0) 14%,#E5DDCC)}
/* le nœud de correspondance : un aplat et un halo */
.av-hub-fond{fill:var(--cr-bas)}
.av-hub-halo{fill:var(--cr-haut);opacity:.5}
.av-hub-sol{fill:none;stroke:rgba(11,14,19,.18);stroke-width:2}


/* ==========================================================================
   RETOUCHES : la roue, les extensions, la fiche de ligne, les jeux débutant
   ========================================================================== */
/* — La roue du jour — */
.rw-svg{filter:drop-shadow(0 10px 0 rgba(11,14,19,.28))}
.rw-ampoule{animation:rwAmp 1.3s ease-in-out infinite;animation-delay:calc(var(--i,0)*90ms)}
@keyframes rwAmp{0%,100%{opacity:.5}50%{opacity:1}}
.rw.tourne .rw-ampoule{animation-duration:.4s}
.rw.tourne{filter:none}
.rw-nom{color:#C9D2DC}
.rw-lots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:var(--sp-4)}
.rw-lot{display:inline-flex;align-items:center;gap:6px;padding:.3em .8em;border-radius:999px;font-size:.74rem;font-weight:700;
  color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.rw-lot i{width:12px;height:12px;border-radius:50%;font-style:normal;box-shadow:0 0 0 1.5px #0B0E13}

/* — Extensions du réseau : la vitrine s'accorde aux cartes — */
.mcx .mc-ext-vit{border-bottom:3px solid #0B0E13}
.mcx .mc-ext-decor{filter:saturate(.72)}
.mcx .mc-ext-ruban{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mcx .mc-ext2.ouvert .mc-ext-ruban{background:#9FE3B4}
.mcx .mc-ext2.pret .mc-ext-ruban{background:#FFD24A}
.mcx .mc-ext2.verrou .mc-ext-ruban{background:#F3B3B8}
.mcx .mc-ext-mini svg{filter:drop-shadow(0 3px 0 rgba(11,14,19,.35))}
.mcx .mc-ext-train svg{filter:drop-shadow(0 6px 0 rgba(11,14,19,.25))}

/* — La fiche d'une ligne (le trajet) : même sable que le reste — */
.mc-modal .box.mc-lx{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 40px 90px rgba(0,0,0,.55)}
.mc-lx .mc-head{padding-bottom:10px;border-bottom:2.5px dashed rgba(11,14,19,.18)}
.mc-lx .mc-head h3{color:#0B0E13}
.mc-lx .mc-lx-niv{color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.mc-lx .mc-lx-sous{color:#4A4F57}
.mc-lx .mc-lx-hero{border-radius:16px;overflow:hidden;box-shadow:0 0 0 3px #0B0E13}
.mc-lx .mc-lx-jauge{padding:12px 14px;border-radius:18px;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-lx .mc-lx-jauge b{color:#0B0E13}
.mc-lx .mc-lx-jauge small,.mc-lx .mc-lx-prod small,.mc-lx .mc-lx-puces small{color:#5A5F68}
.mc-lx .mc-lx-barre{background:#C3B79C;box-shadow:inset 0 0 0 2px #0B0E13}
.mc-lx .mc-lx-barre u{background:#0B0E13;opacity:.5}
.mc-lx .mc-lx-prod{color:#0B0E13;background:#CDEFD5;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-lx .mc-lx-prod b{color:#00814F}
.mc-lx .mc-lx-prod span{color:#4A4F57}
.mc-lx .mc-sous,.mc-lx .mc-lx-palier small{color:#4A4F57}
.mc-lx .mc-lx-palier{padding:10px 14px;border-radius:16px;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13}
.mc-lx .mc-bar{background:#C3B79C;box-shadow:inset 0 0 0 2px #0B0E13}
.mc-lx .mc-lx-profil{margin-top:var(--sp-3);padding:8px 14px;border-radius:16px;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13}
.mc-lx .mc-kv{color:#0B0E13;border-bottom:2px dotted rgba(11,14,19,.16)}
.mc-lx .mc-lx-profil .mc-kv b{color:#8A6400}
.mc-lx .mc-lx-profil .mc-kv b.sat{color:#C4001A}
.mc-lx .mc-lx-puces span{font-weight:700;box-shadow:0 0 0 1.5px #0B0E13}
.mc-lx .mc-lx-puces .pb{color:#8A0014;background:#FFD5D9}
.mc-lx .mc-lx-puces .ok{color:#00552F;background:#CDEFD5}
.mc-lx .mc-lx-puces .prio{color:#6B4E00;background:#FFE58A}
.mc-lx .mc-lx-ups-tete b{color:#0B0E13}
.mc-lx .mc-lx-ups-tete span{color:#8A6400}
.mc-lx .mc-lx-up{color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));border-radius:16px;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-lx .mc-lx-up:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 7px 0 #0B0E13}
.mc-lx .mc-lx-up.prio{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13}
.mc-lx .mc-lx-up.max{background:linear-gradient(180deg,#D8ECDC,#BFDCC6)}
.mc-lx .mc-lx-up .txt b{color:#0B0E13}
.mc-lx .mc-lx-up .txt small{color:#4A4F57}
.mc-lx .mc-lx-up .price{color:#8A6400}
.mc-lx .mc-lx-up .price.no{color:#C4001A}
.mc-lx .mc-lx-up .eff{color:#00734A}
.mc-lx .mc-lx-up .pips i{background:#BCAF93;box-shadow:0 0 0 1px rgba(11,14,19,.35)}
.mc-lx .mc-lx-up .pips i.on{background:#00814F}
.mc-lx .mc-lx-up .badge{color:#0B0E13;box-shadow:0 0 0 2px #0B0E13}
.mc-lx .notice{color:#5A3E00;background:#FFF1C4;border-radius:14px;box-shadow:0 0 0 2px #0B0E13}
.mc-lx .btn--ghost{--fg:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-lx .btn--solid{--bg:#FFCE00;--fg:#0B0E13}

/* — Mode débutant : la couleur du jeu plutôt que le beige seul — */
.ap--debutant .ap-mur{background:linear-gradient(180deg,var(--g,#0064B0) 0 10px,#0B0E13 10px 12.5px,transparent 12.5px),
  repeating-linear-gradient(0deg,rgba(11,14,19,.1) 0 1.5px,transparent 1.5px 24px),
  repeating-linear-gradient(90deg,rgba(11,14,19,.1) 0 1.5px,transparent 1.5px 40px),
  linear-gradient(180deg,var(--cr-haut),var(--cr-bas))}
.ap--debutant .ap-mur::before{color:#0B0E13;background:var(--g,#FFCE00);
  box-shadow:inset 0 0 0 2px var(--g,#FFCE00),inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13}
.ap--debutant .ap-etagere::after{background:linear-gradient(180deg,color-mix(in srgb,var(--g,#C98A4B) 26%,#C98A4B),color-mix(in srgb,var(--g,#A86F3A) 26%,#A86F3A))}
.ap--debutant .ap-quais .lp-end::before{background:var(--g,#FFCE00)}
/* le jeu des terminus : la rame et le numéro de ligne */
.ap--debutant .lp-rame{display:block;width:clamp(72px,12vw,96px);height:auto;filter:drop-shadow(0 4px 0 rgba(11,14,19,.28))}
.ap--debutant .lp-bul{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;margin-top:2px;
  font-family:var(--display);font-weight:900;font-size:1rem;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 #0B0E13}
.ap--debutant .lp-name{font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.14em;color:#3A3F47}
/* l'enquête des arrondissements */
.ap--debutant .stage>.hint{display:inline-block;padding:.4em 1em .4em .5em;border-radius:999px;color:#0B0E13;background:var(--cr-plat);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 #0B0E13}
.ap--debutant .stage>.hint::before{content:"●";margin-right:.5em;color:var(--g,#83C491)}
.ap--debutant .plaque{color:#fff;background:#0B3D74;border-radius:10px;
  box-shadow:inset 0 0 0 2px #0B3D74,inset 0 0 0 4px #fff,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .lede{position:relative;max-width:60ch;margin:var(--sp-3) 0 0;padding:14px 16px 14px 62px;border-radius:20px;
  color:#3A3F47;font-weight:600;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .lede::before{content:"🔍";position:absolute;left:12px;top:50%;translate:0 -50%;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;font-size:1.2rem;background:var(--g,#83C491);box-shadow:0 0 0 2.5px #0B0E13}
.ap--debutant .continue .btn--solid{--bg:#FFCE00;--fg:#0B0E13}

/* — Reconstituer une ligne : les numéros prennent la couleur de la ligne — */
.ap--avance .sortrow .idx{color:var(--ci,#0B0E13);background:var(--c,#FFCE00);box-shadow:0 0 0 1.5px #0B0E13}

/* — Le nœud de correspondance : trois ondes, rien de plus — */
.av-hub-ondes circle{fill:none;stroke:rgba(11,14,19,.13);stroke-width:2}
.av-hub-sol{fill:none;stroke:rgba(11,14,19,.16);stroke-width:2}
@media (prefers-reduced-motion:reduce){ .rw-ampoule{animation:none} }


/* ==========================================================================
   RETOUCHES 2 : la fenêtre de la roue, les extensions, la fiche de ligne,
   les jeux débutant (couleur du jeu), le nœud de correspondance
   ========================================================================== */
/* — La roue : une fenêtre de fête foraine, plus de fond beige — */
.mc-modal .box.mcx-roue{position:relative;color:#F1ECE0;
  background:radial-gradient(120% 80% at 50% 0%,#34285F,#1B1442 55%,#100C2B);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 40px 90px rgba(0,0,0,.6)}
.mcx-roue::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;pointer-events:none;border-top:2px solid rgba(255,229,138,.45);
  background:radial-gradient(circle 4.5px at 17px 14px,#FFE58A 0 4.5px,transparent 5.5px) repeat-x;background-size:34px 26px}
.mcx-roue .mc-head{border-bottom:2.5px dashed rgba(255,255,255,.26)}
.mcx-roue .mc-head h3{color:#fff}
.mcx-roue p,.mcx-roue .mc-note{color:#CFC7EE}
.mcx-roue .rw-nom{color:#fff}
.mcx-roue .btn--ghost{--fg:#0B0E13}

/* — Extensions du réseau : la vitrine s'aligne sur les cartes — */
.mcx .mc-ext-decor{filter:none}
.mcx .mc-ext-vit{height:150px}
.mcx .mc-ext2{overflow:visible;border-radius:22px}
.mcx .mc-ext-vit{border-radius:19px 19px 0 0;overflow:hidden}

/* — La fiche d'une ligne : des sections annoncées, des cases plus nettes — */
.mc-lx .mc-lx-etat::before{content:"État de la ligne";display:inline-block;margin-bottom:12px;padding:.4em 1.1em;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:#00814F;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-lx .mc-lx-ups-tete{align-items:center;margin-bottom:12px}
.mc-lx .mc-lx-ups-tete b{padding:.4em 1.1em;border-radius:999px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:#0064B0;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mc-lx .mc-lx-ups-tete span{padding:.3em .8em;border-radius:999px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mc-lx .mc-lx-up .ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:1.2rem;
  background:var(--cr-plat);box-shadow:0 0 0 2.5px #0B0E13}
.mc-lx .mc-lx-up .price{padding:.2em .7em;border-radius:999px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mc-lx .mc-lx-up .price.no{color:#8A0014;background:#FFD5D9}
.mc-lx .mc-lx-up .pips i{border-radius:3px;box-shadow:0 0 0 1.5px #0B0E13}
.mc-lx .mc-lx-jauge .emo{filter:drop-shadow(0 3px 0 rgba(11,14,19,.2))}

/* — Mode débutant : la couleur du jeu prend le dessus sur le beige — */
.ap--debutant .stage-title{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.45)}
.ap--debutant .ap-mur .slot .bullet{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--g,#FFCE00) 60%,transparent)}
.ap--debutant .ap-quais .lineplate{box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--g,#F28E42) 45%,transparent),0 7px 0 3px #0B0E13}
/* le jeu des terminus : pastille de ligne plus grande, quais plus lisibles */
.ap--debutant .lp-bul{width:46px;height:46px;font-size:1.25rem}
.ap--debutant .ap-quais .lp-end .lp-ph{display:inline-flex;align-items:center;gap:7px;padding:.35em .9em;border-radius:8px;color:#3A3F47;
  background:color-mix(in srgb,var(--cr-blanc) 78%,transparent);box-shadow:0 0 0 2px rgba(11,14,19,.4)}
.ap--debutant .ap-quais .lp-end .lp-ph::before{content:"";width:14px;height:14px;border-radius:3px;background:#0B3D74;box-shadow:0 0 0 1.5px #0B0E13}
.ap--debutant .ap-quais .lineplate.done .lp-rame{animation:apRameRoule 2.4s var(--ease-emph)}
@keyframes apRameRoule{from{transform:translateX(-130px)}to{transform:none}}
/* l'enquête des arrondissements : l'inspecteur et sa bulle */
.ap--debutant .ar-enq{display:flex;align-items:flex-end;gap:14px;margin-bottom:var(--sp-4)}
.ap--debutant .ar-enq-perso{flex:none;width:clamp(74px,12vw,108px)}
.ap--debutant .ar-enq-perso svg{display:block;width:100%;height:auto;transform-origin:50% 92%;animation:avDodeline 3.2s ease-in-out infinite}
.ap--debutant .ar-enq-txt{flex:1;min-width:0}
.ap--debutant .ar-enq-etape{display:inline-block;margin-bottom:10px;padding:.35em .9em;border-radius:999px;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#0B0E13;background:var(--cr-plat);box-shadow:0 0 0 2px #0B0E13}
.ap--debutant .ar-enq .plaque{display:inline-flex}
.ap--debutant .ar-enq-bulle{position:relative;margin:12px 0 0;padding:12px 16px;border-radius:18px;font-weight:600;color:#3A3F47;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--debutant .ar-enq-bulle::after{content:"";position:absolute;left:-10px;bottom:16px;border:10px solid transparent;
  border-right-color:#0B0E13;border-left:0}
.ap--debutant .opt.good,.ap--debutant .opt.bad{position:relative;padding-right:46px}
.ap--debutant .opt.good::after,.ap--debutant .opt.bad::after{position:absolute;right:10px;top:50%;translate:0 -50%;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;font-weight:900;color:#fff;box-shadow:0 0 0 2px #0B0E13}
.ap--debutant .opt.good::after{content:"✓";background:#00814F}
.ap--debutant .opt.bad::after{content:"✕";background:#E3051C}

/* — Le nœud de correspondance : un ciel, un quai — */
.av-hub-ciel{fill:var(--cr-haut)}
.av-hub-quai{fill:color-mix(in srgb,var(--cr-bas) 84%,#0B0E13)}
.av-hub-sol{fill:none;stroke:rgba(11,14,19,.28);stroke-width:2.5}


/* — Le nœud de correspondance : ciel, quai, bande jaune — */
.av-hub-ciel{fill:var(--cr-haut)}
.av-hub-quai{fill:color-mix(in srgb,var(--cr-bas) 84%,#0B0E13)}
.av-hub-bord{fill:#FFCE00}
.av-hub-sol{fill:none;stroke:#0B0E13;stroke-width:2.2;opacity:.75}


/* ==========================================================================
   L'ÉCRAN D'ACCUEIL, ENFIN EN CARTOON
   --------------------------------------------------------------------------
   L'accueil n'avait jamais été repris : un titre lumineux sur fond noir,
   deux réglages en carte sombre, des pastilles nues. Il alterne maintenant
   comme le reste du site — une grande affiche de quai en sable cerclée de
   noir pour le hero, l'en-tête et le pied de page en émail sombre autour.
   Rien n'est ajouté au DOM : tout se joue sur les classes existantes, donc
   les réglages, le menu et le tracé animé gardent exactement leur code.
   ========================================================================== */
:root{
  --ac-haut:#DFD3B7;   /* haut de l'affiche */
  --ac-bas:#C7B896;    /* bas de l'affiche, plus terreux */
  --ac-plat:#D5C8AB;   /* aplats : plaques, cartes, réglages */
  --ac-blanc:#EBE2CE;  /* le plus clair — jamais du blanc pur */
  --ac-encre:#0B0E13;  /* le trait */
  --ac-lire:#2E2A20;   /* texte courant sur le sable */
  --ac-lire2:#5C5237;  /* texte secondaire sur le sable */
}

/* — L'EN-TÊTE : une plaque émaillée posée sur le tunnel ——————————————— */
header.top{
  background:linear-gradient(180deg,#151C26,#0C1017);
  border-bottom:0;
  box-shadow:0 3px 0 0 var(--ac-encre),0 10px 20px -12px rgba(0,0,0,.9);
}
.logo{
  margin-left:0;padding:6px 14px 6px 8px;border-radius:999px;
  background:#0064B0;color:#fff;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px #0064B0,
             0 0 0 2.5px var(--ac-encre),0 3px 0 2.5px var(--ac-encre);
  transition:transform var(--dur) var(--ease-back);
}
.logo:hover{transform:translateY(-2px)}
.logo:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px #0064B0,
             0 0 0 2.5px var(--ac-encre),0 1px 0 2.5px var(--ac-encre)}
header.top .btn{
  font-weight:800;background:var(--ac-blanc);color:var(--ac-encre);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 3px 0 2.5px var(--ac-encre);
}
header.top .btn:hover{background:#F6EFDE;transform:translateY(-2px)}
header.top .btn:active{transform:translateY(2px);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 1px 0 2.5px var(--ac-encre)}
header.top .btn--solid{background:var(--jaune)}
header.top .btn--danger{background:#E3051C;color:#fff}
header.top .btn--magnet::after{display:none}

/* — LE HERO : une affiche de quai, sable cerclé de noir —————————————— */
.hero{
  padding:clamp(var(--sp-5),4vw,var(--sp-7));
  margin-top:var(--sp-5);
  min-height:calc(100vh - var(--hdr) - var(--sp-6));
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:34px;
  background:linear-gradient(180deg,var(--ac-haut),var(--ac-bas));
  box-shadow:0 0 0 3px var(--ac-encre),0 12px 0 3px var(--ac-encre),
             0 40px 64px -34px rgba(0,0,0,.95);
}
/* L'horizon : une silhouette de ville très pâle, posée au bas de l'affiche.
   Volontairement discrète — le fond ne doit pas manger le contenu. */
.hero::after{
  content:"";position:absolute;left:3px;right:3px;bottom:0;height:min(32%,250px);
  z-index:0;pointer-events:none;border-radius:0 0 31px 31px;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 170' preserveAspectRatio='xMidYMax meet'%3E%3Cg fill='%230B0E13' opacity='.17'%3E%3Crect x='26' y='98' width='96' height='72' rx='5'/%3E%3Crect x='136' y='68' width='56' height='102' rx='5'/%3E%3Cpath d='M300 26 L286 90 L266 170 L334 170 L314 90 Z'/%3E%3Crect x='276' y='86' width='48' height='9' rx='4'/%3E%3Crect x='372' y='106' width='124' height='64' rx='5'/%3E%3Cpath d='M528 170 v-38 a34 34 0 0 1 68 0 v38 z'/%3E%3Crect x='559' y='82' width='6' height='16' rx='3'/%3E%3Crect x='636' y='84' width='68' height='86' rx='5'/%3E%3Cpath d='M786 170 v-30 a26 26 0 0 1 52 0 v30 z'/%3E%3Cpath d='M746 170 v-20 a18 18 0 0 1 36 0 v20 z'/%3E%3Cpath d='M842 170 v-20 a18 18 0 0 1 36 0 v20 z'/%3E%3Crect x='944' y='102' width='112' height='68' rx='5'/%3E%3Crect x='1086' y='74' width='68' height='96' rx='5'/%3E%3C/g%3E%3C/svg%3E") bottom center / 1280px auto repeat-x;
}
.hero>*{position:relative;z-index:1}
.hero .eyebrow{color:var(--ac-lire2)}
.hero .lede{color:var(--ac-lire);max-width:60ch;font-weight:500}
.hero .hint{color:var(--ac-lire2)}
/* Le rappel « ↓ Apprendre le métro » chevauchait le bandeau des lignes :
   il repasse dans le flux, sous les pastilles, plutôt qu'en absolu. */
.hero .scroll-hint{color:var(--ac-lire2);position:static;
  margin-top:var(--sp-5);align-self:flex-start}

/* — LE LOGOTYPE : des lettres cernées, comme dans un album ——————————— */
.hero .mp-marque::before{display:none}
.hero .mp-titre{font-size:clamp(1.55rem,8.4vw,6.9rem)}
.hero .mp-l{
  text-shadow:
    2.5px 0 0 var(--ac-encre),-2.5px 0 0 var(--ac-encre),
    0 2.5px 0 var(--ac-encre),0 -2.5px 0 var(--ac-encre),
    1.8px 1.8px 0 var(--ac-encre),-1.8px 1.8px 0 var(--ac-encre),
    1.8px -1.8px 0 var(--ac-encre),-1.8px -1.8px 0 var(--ac-encre),
    0 10px 0 rgba(11,14,19,.16);
}
.hero .mp-deco svg{filter:drop-shadow(0 2px 0 rgba(11,14,19,.35))}
.hero .mp-rail{background:linear-gradient(90deg,transparent,rgba(11,14,19,.5) 12%,
  rgba(11,14,19,.5) 88%,transparent)}
.hero .mp-gare{background:var(--ac-blanc);box-shadow:0 0 0 2.5px var(--ac-encre)}
.hero .mp-gare::after{background:rgba(11,14,19,.4)}
.hero .mp-rame i{box-shadow:inset 0 -3px 0 rgba(0,0,0,.24),
  inset 0 2px 0 rgba(255,255,255,.5),0 0 0 2px var(--ac-encre)}

/* — LES QUATRE BOUTONS : des jetons épais qui s'enfoncent ——————————— */
.hero-cta .btn{
  font-weight:800;background:var(--ac-blanc);color:var(--ac-encre);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 5px 0 2.5px var(--ac-encre);
}
.hero-cta .btn:hover{background:#F6EFDE;transform:translateY(-2px);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 7px 0 2.5px var(--ac-encre)}
.hero-cta .btn:active{transform:translateY(3px);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 2px 0 2.5px var(--ac-encre)}
.hero-cta .btn--solid{background:var(--jaune)}
.hero-cta .btn--creer{background:#EEA8CE}
.hero-cta .btn--france{background:#8FB8E8}
.hero-cta .btn--magnet::after{display:none}

/* — LES PASTILLES DE LIGNE : un panneau par mode ————————————————————— */
.hero .hero-strip--modes{gap:var(--sp-4);justify-content:flex-start}
.hero .strip-mode{
  padding:12px 16px 14px;border-radius:20px;background:var(--ac-plat);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 4px 0 2.5px var(--ac-encre);
}
.hero .strip-lab{
  color:#fff;background:#0064B0;padding:.34em .85em;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px #fff,inset 0 0 0 2.5px #0064B0,0 0 0 2px var(--ac-encre);
}
.hero .strip-dot{
  cursor:pointer;
  box-shadow:0 0 0 2.5px var(--ac-encre),0 3px 0 2.5px var(--ac-encre);
}
.hero .strip-dot:hover{transform:translateY(-5px) scale(1.12)}
.hero .strip-dot:active{transform:translateY(2px);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 1px 0 2.5px var(--ac-encre)}

/* — LES DEUX RÉGLAGES (banlieue d'aujourd'hui, réseau de demain) ————————
     Ils juraient : cartes bleu nuit au milieu d'une affiche en sable. Ils
     deviennent deux cartons cartoon, l'interrupteur compris. */
.rx{
  border-radius:26px;
  background:linear-gradient(170deg,var(--ac-plat),var(--ac-bas));
  box-shadow:0 0 0 3px var(--ac-encre),0 7px 0 3px var(--ac-encre);
}
.rx[data-on="true"]{
  background:linear-gradient(170deg,#EADCA6,#D9C079);
  box-shadow:0 0 0 3px var(--ac-encre),0 7px 0 3px var(--ac-encre);
}
.rx--gpe[data-on="true"]{
  background:linear-gradient(170deg,#BEE6D3,#8FCFB4);
  box-shadow:0 0 0 3px var(--ac-encre),0 7px 0 3px var(--ac-encre);
}
.rx-eyebrow{
  display:inline-block;color:#fff;background:#00814F;
  padding:.4em .9em;border-radius:999px;font-weight:700;
  box-shadow:0 0 0 2px var(--ac-encre);
}
.rx--gpe .rx-eyebrow{background:#0064B0}
.rx-titre{color:var(--ac-encre)}
.rx-desc{color:#3E3729}
.rx-sep{background:rgba(11,14,19,.32)}
.rx .bullet{box-shadow:0 0 0 2px var(--ac-encre)}
/* l'interrupteur : une glissière blanche, un jeton qui roule */
.rx-piste{background:var(--ac-blanc);
  box-shadow:0 0 0 2.5px var(--ac-encre),inset 0 3px 0 rgba(11,14,19,.12)}
.rx-piste::before{background:rgba(11,14,19,.2)}
.rx-curseur{background:#fff;box-shadow:0 0 0 2.5px var(--ac-encre)}
.rx[data-on="true"] .rx-piste,.rx--gpe[data-on="true"] .rx-piste{background:#9FD9B4;
  box-shadow:0 0 0 2.5px var(--ac-encre),inset 0 3px 0 rgba(11,14,19,.12)}
.rx[data-on="true"] .rx-curseur{background:var(--jaune)}
.rx--gpe[data-on="true"] .rx-curseur{background:#00A88F}
.rx-etat{color:var(--ac-lire2)}
.rx[data-on="true"] .rx-etat,.rx--gpe[data-on="true"] .rx-etat{color:#0B5E38}
.rx-switch:hover .rx-piste,.rx--gpe .rx-switch:hover .rx-piste{
  box-shadow:0 0 0 3px var(--ac-encre),inset 0 3px 0 rgba(11,14,19,.12)}
/* la voie animée sous le texte */
.rx-rail{background:rgba(11,14,19,.5)}
.rx-traverse{background:rgba(11,14,19,.3)}
.rx-train i{box-shadow:inset 0 -3px 0 rgba(0,0,0,.24),
  inset 0 2px 0 rgba(255,255,255,.45),0 0 0 2px var(--ac-encre)}
.rx-train b{box-shadow:0 0 0 2px var(--ac-encre)}

/* — LE MENU « JOUER » ——————————————————————————————————————————————— */
.gmenu{
  border-radius:22px;background:var(--ac-blanc);
  box-shadow:0 0 0 3px var(--ac-encre),0 8px 0 3px var(--ac-encre),
             0 30px 60px rgba(0,0,0,.5);
}
.gmenu .hint{color:var(--ac-lire2)}
.gmenu-row{color:var(--ac-encre);font-weight:700}
.gmenu-row:hover{background:rgba(11,14,19,.08)}
.gmenu-row small{color:var(--ac-lire2)}
.gmenu-row i{box-shadow:0 0 0 2px var(--ac-encre)}

/* — LE TRAJET D'UNE LIGNE (clic sur une pastille) ————————————————————
     Le tracé se déroulait sur du noir. Il se déroule maintenant sur une
     affiche en sable, cerclée de noir, et le tracé fantôme déjà présent
     sert de contour cartoon à la ligne : rien à ajouter au dessin. */
.ls-stage{
  border-radius:28px;padding:var(--sp-4);
  background:linear-gradient(180deg,var(--ac-haut),var(--ac-bas));
  box-shadow:0 0 0 3px var(--ac-encre),0 10px 0 3px var(--ac-encre);
}
#ls-ghost{stroke:var(--ac-encre);stroke-width:22}
/* Le plan était posté au centre d'une affiche presque vide : il prend
   maintenant toute la largeur, la hauteur suit le rapport du tracé. */
.ls-stage svg{width:100%;height:auto;max-height:100%}
.ls-pop circle{fill:#FFF8EC}
.ls-pop text[font-weight="700"]{fill:var(--ac-encre)}
.ls-pop text[font-weight="500"]{fill:#5B5140}
#ls-car rect{stroke:var(--ac-encre);stroke-width:2}
#ls-car text{fill:var(--ac-encre)}
.ls-monu{
  border-radius:16px;background:var(--ac-plat);
  box-shadow:0 0 0 2.5px var(--ac-encre),0 4px 0 2.5px var(--ac-encre),
             inset 0 4px 0 var(--c);
}
.ls-monu:hover{transform:translateY(-3px)}
.ls-monu b{color:var(--ac-encre)}
.ls-monu small{color:#5B5140}
.ls-head .bullet{box-shadow:0 0 0 2.5px var(--ac-encre)}
.ls-close{background:var(--ac-blanc);color:var(--ac-encre);font-weight:800;
  box-shadow:0 0 0 2.5px var(--ac-encre),0 3px 0 2.5px var(--ac-encre)}
.ls-close:hover{background:#F6EFDE}

/* — LE PIED DE PAGE : le tunnel refermé ——————————————————————————————— */
footer.foot{
  background:linear-gradient(180deg,#0C1017,#151C26);
  border-top:0;box-shadow:0 -3px 0 0 var(--ac-encre);
}
footer.foot .tag{
  background:var(--ac-blanc);color:var(--ac-encre);font-weight:700;
  box-shadow:0 0 0 2px var(--ac-encre);
}

@media (max-width:640px){
  .hero{margin-top:var(--sp-4);padding:var(--sp-5) var(--sp-4);min-height:auto}
  .hero::before{border-radius:26px;box-shadow:0 0 0 3px var(--ac-encre),0 8px 0 3px var(--ac-encre)}
  .hero::after{border-radius:0 0 23px 23px;height:min(26%,170px)}
  .hero .strip-mode{padding:10px 12px 12px}
  .ls-stage{border-radius:22px;padding:var(--sp-3)}
}


/* ==========================================================================
   V47 — LES DEUX ATELIERS, LES CARTES DE METRO CITY, SNAKE, ET L'ACCUEIL
   --------------------------------------------------------------------------
   Cinq chantiers d'un coup. Le fil commun : chaque jeu porte SA couleur, et
   les surfaces mélangent les deux registres du site — le crème cartoon et
   l'émail sombre des cases d'information.
   ========================================================================== */

/* la frise de toits des cases d'information : reprise telle quelle pour
   pouvoir la greffer ailleurs sans la réécrire à chaque fois */
:root{--v47-toits:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E")}

/* ——————————————————————————————————————————————————————————————————————
   1. L'ACCUEIL — la grande affiche crème s'en va
   La demande est nette : le fond crème qui englobait À LA FOIS le titre et
   les pastilles disparaît ; les fonds qui entourent CHAQUE bloc restent ;
   seul MétroPif reçoit un contour.
   —————————————————————————————————————————————————————————————————————— */
.hero::before,.hero::after{display:none}
.hero{padding:var(--sp-5) 0 var(--sp-6);margin-top:0}
.hero .eyebrow,.hero .hint,.hero .scroll-hint{color:var(--gris)}
.hero .lede{color:#B9BFC7}
/* le seul contour de l'écran d'accueil */
.hero .mp-marque{display:inline-block;max-width:100%;
  padding:clamp(10px,1.8vw,20px) clamp(12px,2.4vw,26px) clamp(6px,1.2vw,12px);
  border-radius:clamp(18px,2.6vw,32px);
  background:linear-gradient(170deg,rgba(19,26,37,.62),rgba(8,11,16,.62));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--ac-blanc,#EBE2CE),0 9px 0 6px #0B0E13}
.hero .mp-titre{font-size:clamp(1.42rem,7.4vw,6.1rem)}
/* les rails sous le mot redeviennent clairs : le fond est sombre à nouveau */
.hero .mp-rail{background:linear-gradient(90deg,transparent,rgba(232,233,228,.42) 12%,
  rgba(232,233,228,.42) 88%,transparent)}
.hero .mp-gare{background:var(--nuit);box-shadow:inset 0 0 0 2.5px rgba(232,233,228,.78)}
.hero .mp-gare::after{background:rgba(232,233,228,.35)}
@media (max-width:640px){ .hero{padding:var(--sp-4) 0 var(--sp-5)} }

/* ——————————————————————————————————————————————————————————————————————
   2. LA TIER LIST — sa couleur propre : le rose de l'atelier
   —————————————————————————————————————————————————————————————————————— */
.ap--tier{--jeu:#C04191}
.ap--tier .panneau{color:#fff;border-radius:999px;font-weight:800;
  background:var(--jeu);
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--jeu),
             0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--tier .panneau::before{background:#fff}
.ap--tier .lede{color:#C4CBD4}
.ap--tier .tag{color:#0B0E13;background:var(--cr-blanc);
  box-shadow:0 0 0 2px #0B0E13;font-weight:700}

/* les rangs : une plaque épaisse, une zone crème */
.ap--tier .tl{gap:8px}
.ap--tier .tl-row{min-height:68px;gap:8px}
.ap--tier .tl-lab{width:72px;border-radius:16px;font-size:1.55rem;color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--tier .tl-zone,.ap--tier .tl-banc{border-radius:16px;padding:10px;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--tier .tl-zone.tl-vise,.ap--tier .tl-banc.tl-vise{
  background:linear-gradient(180deg,#FFF0BE,#FFE08A);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--jaune),0 4px 0 3px #0B0E13}
.ap--tier .tl-p{box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.ap--tier .tl-p:hover{transform:translateY(-3px) scale(1.12)}
.ap--tier .tl-p:active{transform:translateY(2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}

/* les boutons des deux ateliers : des jetons épais qui s'enfoncent */
.ap--tier .btn{font-weight:800;color:#0B0E13;background:var(--cr-blanc);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--tier .btn:hover{transform:translateY(-2px);background:#FBF4E4;
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.ap--tier .btn:active{transform:translateY(2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13}
.ap--tier .btn--solid{color:#fff;background:var(--jeu)}
.ap--tier .btn--solid:hover{
  background:color-mix(in srgb,var(--jeu) 82%,#fff)}
.ap--tier .btn--ghost{background:var(--cr-plat)}
.ap--tier .btn--magnet::after{display:none}

/* L'ENREGISTREMENT : un vrai pupitre, plus trois boutons perdus dans le noir */
.ap--tier .tl-barre{margin-top:var(--sp-6);padding:var(--sp-4);border-radius:22px;gap:10px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--jeu) 24%,#18202B),#0E141D 78%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--jeu) 45%,transparent),
             0 6px 0 5px #0B0E13}
.ap--tier .tl-barre .lp-nom{flex:1;min-width:190px;color:#0B0E13;background:var(--cr-blanc);
  border-radius:13px;box-shadow:0 0 0 2.5px #0B0E13,inset 0 2px 0 rgba(11,14,19,.12)}
.ap--tier .tl-barre .lp-nom::placeholder{color:#7C7059}
.ap--tier .tl-barre .lp-nom:focus{outline:none;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--jeu) 55%,transparent)}
/* les classements gardés : des fiches cartonnées à en-tête émaillé */
.ap--tier .tl-sauv-g{gap:var(--sp-4)}
.ap--tier .tl-sauv-c{position:relative;overflow:hidden;padding:32px var(--sp-4) var(--sp-4);
  border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--tier .tl-sauv-c::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;
  background:radial-gradient(130% 240% at 100% 0%,color-mix(in srgb,var(--jeu) 60%,transparent),transparent 62%),
    linear-gradient(165deg,#1C2634,#0E141D);
  border-bottom:2.5px solid #0B0E13}
.ap--tier .tl-sauv-c::after{content:"Classement";position:absolute;left:12px;top:5px;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.ap--tier .tl-sauv-c b{color:#0B0E13}
.ap--tier .tl-sauv-c small{color:#585042}
.ap--tier .tl-sauv-c .btn{font-size:.8rem;padding:.5em .9em}
.ap--tier .mc-note{color:#B9C4D0}

/* ——————————————————————————————————————————————————————————————————————
   4. METRO CITY — les cartes et les monuments empruntent aux cases d'info
   Le corps reste crème ; il reçoit ce qui faisait la force des cases du
   haut de l'onglet Réseau : un bandeau émaillé sombre, le halo coloré
   autour du trait, et la frise de toits en bas.
   —————————————————————————————————————————————————————————————————————— */
.mc-card{padding-top:32px}
.mc-card,.mcx .mc-card{
  box-shadow:0 0 0 2.5px #0B0E13,
             0 0 0 5.5px color-mix(in srgb,var(--rc,#B9C2CC) 55%,transparent),
             0 5px 0 2.5px #0B0E13}
.mc-card--leg,.mcx .mc-card--leg{
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--mc-leg),0 5px 0 2.5px #0B0E13,
             0 0 26px rgba(255,206,0,.55)}
.mc-card--epi,.mcx .mc-card--epi{
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--mc-epi),0 5px 0 2.5px #0B0E13,
             0 0 20px rgba(165,91,216,.45)}
/* le bandeau émaillé du haut */
.mc-card::before{content:"";position:absolute;left:0;right:0;top:0;bottom:auto;height:26px;
  z-index:0;opacity:1;pointer-events:none;
  background:radial-gradient(130% 240% at 100% 0%,color-mix(in srgb,var(--rc,#B9C2CC) 58%,transparent),transparent 62%),
    linear-gradient(165deg,#1C2634,#0E141D);
  border-bottom:2.5px solid #0B0E13}
/* la frise de toits du bas */
.mc-card::after{content:"";position:absolute;left:0;right:0;bottom:0;top:auto;height:26px;
  z-index:0;pointer-events:none;opacity:.12;
  background:var(--v47-toits) repeat-x left bottom/200px 26px}
.mc-card>*{position:relative;z-index:1}
.mc-card .rn{position:absolute;left:10px;top:6px;z-index:2;padding:0;color:#fff;
  background:none;box-shadow:none;font-weight:600}
.mc-card .dupn{z-index:2}
/* dans un booster, la carte est plus grande : le bandeau suit */
.mc-open2 .front .mc-card{padding-top:34px}

/* les monuments : même greffe sur les tuiles de l'onglet */
.mcx[data-tab="monuments"] .mc-tile{position:relative;overflow:hidden;padding-top:36px;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px rgba(255,206,0,.4),0 5px 0 2.5px #0B0E13}
.mcx[data-tab="monuments"] .mc-tile:hover{
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6.5px rgba(255,206,0,.75),0 8px 0 2.5px #0B0E13}
.mcx[data-tab="monuments"] .mc-tile>*:not(.card-tag){position:relative;z-index:1}
.mcx[data-tab="monuments"] .mc-tile::before{content:"";position:absolute;left:0;right:0;top:0;
  height:28px;z-index:0;pointer-events:none;
  background:radial-gradient(130% 240% at 100% 0%,rgba(255,206,0,.5),transparent 62%),
    linear-gradient(165deg,#1C2634,#0E141D);
  border-bottom:2.5px solid #0B0E13}
.mcx[data-tab="monuments"] .mc-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:28px;z-index:0;pointer-events:none;opacity:.12;
  background:var(--v47-toits) repeat-x left bottom/200px 28px}
.mcx[data-tab="monuments"] .mc-tile>.card-tag{position:absolute;left:12px;top:7px;z-index:2;
  color:#fff;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase}

/* ——————————————————————————————————————————————————————————————————————
   5. SNAKE MÉTRO — l'écran d'accueil prend la couleur du jeu
   —————————————————————————————————————————————————————————————————————— */
.snk-perso{--jeu:#662483}
.snk-eyebrow{display:inline-block;padding:.42em .95em;border-radius:999px;color:#fff;
  background:var(--jeu);letter-spacing:.18em;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.snk-titre{color:#fff;text-shadow:0 3px 0 rgba(11,14,19,.55)}
/* la frise de rames, sous le titre */
.snk-deco{margin:var(--sp-4) 0 var(--sp-5)}
.snk-deco svg{display:block;width:100%;height:auto}
/* les compteurs deviennent des cartons */
.snk-recs{gap:10px}
.snk-rec{border-radius:18px;padding:12px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.snk-rec b,.snk-rec:nth-child(4n+1) b,.snk-rec:nth-child(4n+2) b,
.snk-rec:nth-child(4n+3) b,.snk-rec:nth-child(4n) b{color:#0B0E13}
.snk-rec span{color:#585042}
/* chaque bloc de choix sur son propre panneau violet */
.snk-bloc{margin-top:var(--sp-5);padding:var(--sp-4);border-radius:24px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--jeu) 28%,#191426),#0E0C16 78%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--jeu) 48%,transparent),
             0 6px 0 5px #0B0E13}
.snk-lab{background:var(--jeu);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.snk-note{color:#C6B7D6}
.snk-l{opacity:1;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.snk-l:hover{transform:translateY(-3px) scale(1.06)}
.snk-l.on{transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--jaune),0 4px 0 5.5px #0B0E13}
.snk-c,.snk-s{border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.snk-c b,.snk-s b{color:#0B0E13}
.snk-c small,.snk-s small{color:#585042}
.snk-c:hover:not([disabled]){transform:translateY(-3px);
  box-shadow:0 0 0 2.5px #0B0E13,0 7px 0 2.5px #0B0E13}
.snk-c.on,.snk-s.on{background:linear-gradient(180deg,#FFF0BE,#FFE08A);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--jaune),0 4px 0 5.5px #0B0E13}
.snk-c.lock{filter:saturate(.35);opacity:.72}
.snk-apercu{box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--jeu),0 8px 0 6px #0B0E13}
.snk-go .btn{font-weight:800;color:#fff;background:var(--jeu);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.snk-go .btn:hover{transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 7px 0 2.5px #0B0E13}
.snk-go .btn:active{transform:translateY(3px);
  box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13}


/* ==========================================================================
   V49 — TROIS REFONTES : LE TRAJET D'UNE LIGNE, L'ATELIER, L'ACCUEIL DU SNAKE
   --------------------------------------------------------------------------
   Un principe commun aux trois : une SEULE couleur vive par écran, celle de
   la ligne concernée, posée sur un papier neutre. Le sable jaune se battait
   avec les lignes jaunes, le vert d'eau bavait sur tout l'atelier : les
   surfaces redeviennent neutres et la couleur reprend son rôle de signal.
   ========================================================================== */

/* ——————————————————————————————————————————————————————————————————————
   A. LE TRAJET D'UNE LIGNE (clic sur une pastille de l'accueil)
   Le fond sable jurait avec les écritures et avec les vignettes de
   monuments. Tout l'écran devient une affiche : plaque de ligne en tête,
   plan sur papier, lieux desservis sur le même papier.
   —————————————————————————————————————————————————————————————————————— */
.lineshow{background:rgba(6,9,13,.93);padding:clamp(10px,2vw,20px)}
/* l'en-tête est la plaque de la ligne */
.ls-head{align-items:center;gap:14px;padding:12px 16px;margin-bottom:12px;border-radius:20px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--c,#0064B0) 34%,#141C27),#0C1219 78%);
  box-shadow:0 0 0 2.5px #0B0E13,
             0 0 0 5px color-mix(in srgb,var(--c,#0064B0) 55%,transparent)}
.ls-head b{color:#fff}
.ls-head span{color:color-mix(in srgb,var(--c,#0064B0) 38%,#D7DBE0)}
.ls-head .bullet{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(255,255,255,.2)}
.ls-close{background:#F5F3EC;color:#0B0E13;font-weight:800;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.ls-close:hover{background:#fff;transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
/* le plan : un papier neutre, pour que TOUTES les couleurs de ligne tiennent
   dessus — y compris le jaune de la 1, qui disparaissait sur le sable */
.ls-stage{border-radius:24px;padding:clamp(8px,1.6vw,18px);
  background:
    repeating-linear-gradient(0deg,rgba(11,14,19,.045) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(90deg,rgba(11,14,19,.045) 0 1px,transparent 1px 32px),
    linear-gradient(180deg,#F5F3EC,#E7E3D8);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
#ls-ghost{stroke:#0B0E13;stroke-width:24}
.ls-pop circle{fill:#FFFFFF}
.ls-pop text[font-weight="700"]{fill:#0B0E13}
.ls-pop text[font-weight="500"]{fill:#525C66}
#ls-car rect{stroke:#0B0E13;stroke-width:2}
#ls-car text{fill:#0B0E13}
/* les lieux desservis : même papier, bandeau à la couleur de la ligne */
.ls-monus{margin-top:14px;padding:0}
.ls-lab{display:inline-block;margin:0 0 10px;padding:.44em 1em;border-radius:999px;color:#fff;
  letter-spacing:.16em;background:color-mix(in srgb,var(--c,#0064B0) 72%,#0B0E13);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.ls-rail{gap:11px;padding-bottom:11px}
.ls-monu{position:relative;overflow:hidden;width:152px;padding:32px 12px 12px;border-radius:17px;
  color:#0B0E13;background:linear-gradient(180deg,#F5F3EC,#E7E3D8);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std)}
.ls-monu::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;
  background:var(--c);border-bottom:2.5px solid #0B0E13}
.ls-monu:hover{transform:translateY(-4px);
  box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.ls-monu-ico{width:44px;height:44px}
.ls-monu-ico svg{width:44px;height:44px}
.ls-monu b{color:#0B0E13;font-size:.84rem;margin-top:8px}
.ls-monu small{color:#5C646D}
.ls-vide{color:#C2C8CF}

/* ——————————————————————————————————————————————————————————————————————
   C. SNAKE MÉTRO — l'accueil refondu
   Plus un seul emoji : des pictogrammes dessinés. Des compteurs qui
   arrivent en cascade, des cases qui réagissent, un bouton qui respire.
   —————————————————————————————————————————————————————————————————————— */
.snk-perso{--jeu:#7B33A8;--cr-haut:#F3EFE6;--cr-bas:#E4DED1;--cr-blanc:#F9F7F1}
.snk-eyebrow{display:inline-block;margin:0;padding:.44em 1em;border-radius:999px;color:#fff;
  letter-spacing:.2em;background:var(--jeu);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.snk-titre{color:#fff;text-shadow:0 3px 0 rgba(11,14,19,.5);margin:.45em 0 0}
/* la frise : une bande, pas un panneau de plus */
.snk-deco{margin:var(--sp-4) 0;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.snk-deco svg{display:block;width:100%;height:auto}
/* l'aperçu : la vitrine du jeu */
.snk-apercu{position:relative;border-radius:24px;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--jeu),0 8px 0 6px #0B0E13}
.snk-apercu::after{content:"Aperçu de votre rame";position:absolute;left:14px;bottom:12px;
  padding:.42em .95em;border-radius:999px;color:#fff;background:rgba(11,14,19,.72);
  font-family:var(--mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 0 0 2px #0B0E13;pointer-events:none}
/* les compteurs : pictogramme, gros chiffre, libellé — et une arrivée en cascade */
.snk-recs{grid-template-columns:repeat(auto-fit,minmax(134px,1fr));gap:12px;margin-top:var(--sp-5)}
.snk-rec{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:18px 10px 14px;border-radius:20px;color:#0B0E13;text-align:center;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transition:transform var(--dur) var(--ease-back),box-shadow var(--dur) var(--ease-std);
  animation:snkMonte .52s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*80ms)}
.snk-rec::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;
  background:var(--rc,#FFCE00);border-bottom:2.5px solid #0B0E13}
.snk-rec:hover{transform:translateY(-4px);
  box-shadow:0 0 0 2.5px #0B0E13,0 9px 0 2.5px #0B0E13}
.snk-rec-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--rc,#FFCE00);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;margin-top:4px}
.snk-rec-ico svg{display:block;width:26px;height:26px}
.snk-rec b,.snk-rec:nth-child(4n+1) b,.snk-rec:nth-child(4n+2) b,
.snk-rec:nth-child(4n+3) b,.snk-rec:nth-child(4n) b{color:#0B0E13;font-size:1.5rem;line-height:1}
.snk-rec span{color:#585042}
@keyframes snkMonte{from{opacity:0;transform:translateY(18px) scale(.94)}}
/* les blocs de choix, chacun sur son panneau */
.snk-bloc{margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-4) var(--sp-5);border-radius:24px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--jeu) 30%,#1A1327),#0E0C16 78%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--jeu) 50%,transparent),
             0 6px 0 5px #0B0E13}
.snk-lab{display:inline-block;margin:0 0 var(--sp-3);padding:.42em 1em;border-radius:999px;color:#fff;
  background:var(--jeu);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.snk-note{color:#CEBFDC;margin:0 0 var(--sp-3)}
/* les pastilles de ligne : elles rebondissent quand on les choisit */
.snk-l{opacity:1;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.snk-l:hover{transform:translateY(-4px) scale(1.08);opacity:1}
.snk-l.on{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--jaune),0 4px 0 5.5px #0B0E13;
  animation:snkRebond .5s var(--ease-back)}
@keyframes snkRebond{0%{transform:translateY(0) scale(1)}
  45%{transform:translateY(-9px) scale(1.2)}100%{transform:translateY(-2px) scale(1.08)}}
.snk-l.on{transform:translateY(-2px) scale(1.08)}
/* les cases : du papier qui se soulève, et une coche quand c'est choisi */
.snk-c,.snk-s{position:relative;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  animation:snkMonte .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*55ms)}
.snk-c b,.snk-s b{color:#0B0E13}
.snk-c small,.snk-s small{color:#585042}
.snk-c:hover:not([disabled]){transform:translateY(-4px) rotate(-.5deg);
  box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.snk-c.on,.snk-s.on{background:linear-gradient(180deg,#FFF1C2,#FFE08A);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--jaune),0 4px 0 5.5px #0B0E13}
.snk-c.on::after{content:"";position:absolute;right:11px;top:11px;width:21px;height:21px;
  border-radius:50%;background:#0B0E13}
.snk-c.on::before{content:"";position:absolute;right:17.5px;top:15px;z-index:1;width:6px;height:11px;
  border:solid var(--jaune);border-width:0 2.8px 2.8px 0;transform:rotate(42deg)}
.snk-c.lock{filter:saturate(.3);opacity:.7}
.snk-c.lock small{color:#7A7263}
/* les succès : pastille dessinée à gauche, texte à droite */
.snk-succes{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.snk-s{display:flex;align-items:flex-start;gap:11px;padding:13px;opacity:1}
.snk-s-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:#CFC8B8;box-shadow:0 0 0 2.5px #0B0E13}
.snk-s.on .snk-s-ico{background:var(--jaune)}
.snk-s-ico svg{display:block;width:23px;height:23px}
/* le bouton : il respire */
.snk-go{margin-top:var(--sp-7)}
.snk-go .btn{position:relative;font-weight:800;font-size:1.18rem;padding:.95em 2.5em;
  color:#fff;background:var(--jeu);
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.snk-go .btn:hover{transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.snk-go .btn:active{transform:translateY(4px);
  box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13}
.snk-go .btn::after{content:"";position:absolute;inset:-6px;border-radius:999px;pointer-events:none;
  background:none;opacity:1;animation:snkHalo 2.4s var(--ease-std) infinite}
@keyframes snkHalo{0%{box-shadow:0 0 0 0 rgba(155,95,192,.5)}
  70%{box-shadow:0 0 0 20px rgba(155,95,192,0)}100%{box-shadow:0 0 0 0 rgba(155,95,192,0)}}
/* le bandeau de la partie : les pictogrammes y remplacent aussi les emojis */
.snk-h-ico svg{display:block;width:21px;height:21px;margin:0 auto 2px}
@media (prefers-reduced-motion:reduce){
  .snk-rec,.snk-c,.snk-s{animation:none}
  .snk-l.on{animation:none}
  .snk-go .btn::after{animation:none}
}

/* Un bouton d'en-tete qui porte un dessin, pas un caractere */
.btn--picto{padding:.5em .8em}
.btn--picto svg{display:block;width:21px;height:21px}

/* ==========================================================================
   V52 — LE DÉPÔT DU SNAKE ET L'ATELIER DE LIGNE, EN VERSION NETTE
   --------------------------------------------------------------------------
   Les versions précédentes bavaient : anneaux lumineux semi-transparents,
   dégradés teintés, contours épais empilés. Ici, une règle stricte :
     · deux surfaces seulement — le papier (#F5F2EA) et la nuit (#141B25) ;
     · un trait noir de 2 px, une ombre dure de 3 à 5 px, rien d'autre ;
     · une seule couleur vive par zone, jamais en halo.
   ========================================================================== */

/* ——————————————————————————————————————————————————————————————————————
   1. SNAKE — LE DÉPÔT
   —————————————————————————————————————————————————————————————————————— */
.sk{--sk:#FF7A2F;--pap:#F5F2EA;--nuit2:#141B25;--nuit3:#0F151D;--k:#0B0E13;
  max-width:1100px;margin:0 auto;color:var(--pap)}
.sk button{font:inherit;cursor:pointer}

/* l'en-tête */
.sk-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;
  flex-wrap:wrap;margin:4px 0 18px}
.sk-sur{display:inline-block;padding:.42em .9em;border-radius:999px;border:2px solid var(--k);
  background:var(--sk);color:var(--k);font-family:var(--mono);font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}
.sk-titre{margin:.4em 0 0;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.8rem,4.2vw,2.7rem);letter-spacing:-.02em;line-height:1;color:#fff}
.sk-intro{margin:0;max-width:36ch;font-size:.9rem;line-height:1.45;color:#A7AFB9}

/* la scène et la colonne de droite */
.sk-haut{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(250px,1fr);gap:16px}
.sk-scene{position:relative;min-height:260px;aspect-ratio:16/10;border-radius:20px;overflow:hidden;
  background:#1A2330;border:2px solid var(--k);box-shadow:0 5px 0 var(--k)}
.sk-cv{display:block;width:100%;height:100%}
.sk-legende{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;
  padding:4px 14px 4px 4px;border-radius:999px;border:2px solid var(--k);background:var(--pap);
  color:var(--k);font-weight:700;font-size:.84rem}
.sk-puce{display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;border-radius:999px;
  border:2px solid var(--k);font-family:var(--display);font-weight:800;font-size:.84rem}
.sk-cote{display:flex;flex-direction:column;gap:14px;min-width:0}
.sk-stats{flex:1;padding:4px 16px;border-radius:20px;background:var(--nuit2);
  border:2px solid var(--k);box-shadow:0 5px 0 var(--k)}
.sk-stat{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(245,242,234,.08);
  animation:skEntre .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms)}
.sk-stat:last-child{border-bottom:0}
.sk-stat-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--nuit3);border:2px solid var(--k)}
.sk-stat-ico svg{display:block;width:24px;height:24px}
.sk-stat-l{font-size:.88rem;color:#B6BEC7}
.sk-stat-v{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;
  font-variant-numeric:tabular-nums}

/* le bouton de départ : un gros jeton qui s'enfonce, et un reflet qui passe */
.sk-jouer{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  min-height:74px;border-radius:18px;border:2px solid var(--k);background:var(--sk);color:var(--k);
  box-shadow:0 6px 0 var(--k);transition:transform .12s var(--ease-std),box-shadow .12s var(--ease-std)}
.sk-jouer-t{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-weight:800;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em}
.sk-jouer-t::before{content:"";width:0;height:0;border-style:solid;
  border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--k)}
.sk-jouer::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:28%;
  background:rgba(255,255,255,.42);transform:skewX(-20deg);animation:skReflet 3.6s ease-in-out infinite}
.sk-jouer:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--k)}
.sk-jouer:active{transform:translateY(5px);box-shadow:0 1px 0 var(--k)}
@keyframes skReflet{0%,62%{left:-45%}100%{left:130%}}

/* les réglages */
.sk-reglages{margin-top:18px;border-radius:20px;overflow:hidden;background:var(--pap);
  border:2px solid var(--k);box-shadow:0 5px 0 var(--k)}
.sk-onglets{display:flex;overflow-x:auto;background:var(--nuit2);border-bottom:2px solid var(--k);
  scrollbar-width:none}
.sk-onglets::-webkit-scrollbar{display:none}
.sk-onglet{position:relative;flex:1 0 132px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:13px 16px 14px;text-align:left;color:#8E97A2;background:none;border:0;
  border-right:2px solid var(--k);transition:background .18s,color .18s}
.sk-onglet:last-child{border-right:0}
.sk-onglet-n{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase}
.sk-onglet-v{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--display);font-weight:800;font-size:.98rem;color:#E4E8EC}
.sk-onglet:hover{background:#1B2431}
.sk-onglet.on{background:var(--pap);color:#6B6456}
.sk-onglet.on .sk-onglet-v{color:var(--k)}
.sk-onglet.on::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--sk)}
.sk-panneau{padding:18px;color:var(--k)}

/* les pastilles de ligne */
.sk-lignes{display:flex;flex-wrap:wrap;gap:10px}
.sk-l{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;padding:0;
  background:var(--c);color:var(--t);border:2px solid var(--k);box-shadow:0 3px 0 var(--k);
  font-family:var(--display);font-weight:800;font-size:.95rem;
  transition:transform .16s var(--ease-back),box-shadow .16s;
  animation:skEntre .32s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*16ms)}
.sk-l:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--k)}
.sk-l.on{transform:translateY(-2px);box-shadow:0 0 0 3px var(--pap),0 0 0 5px var(--k),0 5px 0 5px var(--k)}
.sk-aide{margin:16px 0 0;font-size:.9rem;color:#5E5748}
.sk-aide b{color:var(--k);margin-right:6px}

/* les tuiles dessinées */
.sk-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.sk-tuiles--mode{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sk-t{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;
  border-radius:14px;background:#fff;color:var(--k);border:2px solid var(--k);box-shadow:0 4px 0 var(--k);
  transition:transform .16s var(--ease-back),box-shadow .16s;
  animation:skEntre .36s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*45ms)}
.sk-t:hover:not([disabled]){transform:translateY(-3px);box-shadow:0 7px 0 var(--k)}
.sk-t-vis{line-height:0;border-bottom:2px solid var(--k);background:#DDE6EC}
.sk-t-vis canvas,.sk-t-vis svg{display:block;width:100%;height:auto}
.sk-t-txt{padding:10px 12px 12px}
.sk-t-txt b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.15}
.sk-t-txt small{display:block;margin-top:4px;font-size:.74rem;line-height:1.35;color:#6B6456}
.sk-t.on{box-shadow:0 0 0 3px var(--sk),0 4px 0 3px var(--k)}
.sk-t.on::after{content:"";position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--k);
  background:var(--sk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%230B0E13' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.sk-t.lock{cursor:not-allowed;background:#EEEAE0;box-shadow:0 4px 0 var(--k)}
.sk-t.lock .sk-t-vis{filter:grayscale(1) brightness(.72)}
.sk-t.lock .sk-t-txt b{color:#7A7263}
.sk-verrou{position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px 3px 4px;border-radius:999px;background:var(--k);color:var(--pap);
  font-size:.7rem;font-weight:700}
.sk-verrou svg{display:block;width:17px;height:17px}
.sk-calme .sk-t,.sk-calme .sk-l{animation:none}

/* les succès */
.sk-succes{margin-top:18px;padding:14px 16px 16px;border-radius:20px;background:var(--nuit2);
  border:2px solid var(--k);box-shadow:0 5px 0 var(--k)}
.sk-succes-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.sk-succes-t b{font-family:var(--display);font-weight:800;font-size:1.02rem;text-transform:uppercase;color:#fff}
.sk-succes-t span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#8E97A2}
.sk-medailles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.sk-m{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:13px;
  background:var(--nuit3);border:2px solid var(--k);
  animation:skEntre .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*40ms)}
.sk-m-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#1D2632;border:2px solid var(--k)}
.sk-m-ico svg{display:block;width:23px;height:23px}
.sk-m b{display:block;font-size:.86rem;color:#D5DAE0}
.sk-m small{display:block;margin-top:1px;font-size:.72rem;color:#7D8691}
.sk-m.on{background:var(--pap)}
.sk-m.on b{color:var(--k)}
.sk-m.on small{color:#6B6456}
.sk-m.on .sk-m-ico{background:#FFF1C2}

@keyframes skEntre{from{opacity:0;transform:translateY(10px)}}
@media (max-width:860px){
  .sk-haut{grid-template-columns:1fr}
  .sk-scene{aspect-ratio:16/11}
}
@media (max-width:520px){
  .sk-tuiles,.sk-tuiles--mode{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sk-panneau{padding:14px}
  .sk-medailles{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .sk-stat,.sk-l,.sk-t,.sk-m{animation:none}
  .sk-jouer::after{animation:none;display:none}
}

/* ——————————————————————————————————————————————————————————————————————
   2. CRÉEZ VOTRE LIGNE — L'ATELIER
   Une seule carte papier pour chaque bloc, le même trait partout ; la seule
   couleur vive est celle de la ligne dessinée (--c).
   —————————————————————————————————————————————————————————————————————— */
.ap--ligne{--pap:#F5F2EA;--k:#0B0E13;--gr:#6B6456;
  --cr-haut:#F5F2EA;--cr-bas:#F5F2EA;--cr-plat:#F5F2EA;--cr-blanc:#FFFFFF}

/* titre et chapeau */
.ap--ligne .panneau{color:var(--k);background:var(--pap);border-radius:999px;font-weight:800;
  box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.ap--ligne .panneau::before{width:12px;height:12px;border-radius:50%;background:var(--c,#3E8FD4);
  box-shadow:0 0 0 2px var(--k)}
.ap--ligne .lede{color:#B0B8C1;max-width:64ch}
.ap--ligne .tag{color:var(--k);background:var(--pap);box-shadow:0 0 0 1.5px var(--k)}

/* les boutons : blancs cernés, le principal en noir */
.ap--ligne .btn{color:var(--k);background:#fff;border-radius:12px;font-weight:800;
  box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k);transform:none}
.ap--ligne .btn:hover{background:var(--pap);transform:translateY(-1px);
  box-shadow:0 0 0 2px var(--k),0 4px 0 2px var(--k)}
.ap--ligne .btn:active{transform:translateY(2px);box-shadow:0 0 0 2px var(--k),0 1px 0 2px var(--k)}
.ap--ligne .btn--solid{color:#fff;background:var(--k)}
.ap--ligne .btn--solid:hover{color:#fff;background:#253043}
.ap--ligne .btn--ghost{background:var(--pap)}
.ap--ligne .btn--magnet::after{display:none}

/* les blocs : tous la même carte */
.ap--ligne .lp-ident,.ap--ligne .lp-saisie,.ap--ligne .lp-pupitre{
  color:var(--k);background:var(--pap);border-radius:18px;
  box-shadow:0 0 0 2px var(--k),0 4px 0 2px var(--k)}

/* l'identité : la pastille en direct, le nom, le numéro, la couleur */
.ap--ligne .lp-ident{display:grid;grid-template-columns:auto minmax(150px,250px) 88px minmax(0,1fr);
  align-items:end;gap:18px;margin-top:var(--sp-5);padding:18px 20px}
.ap--ligne .lp-ident label{display:flex;flex-direction:column;gap:7px;min-width:0}
.ap--ligne .lp-ident label>span{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gr)}
.ap--ligne .lp-badge{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  background:var(--c,#3E8FD4);border:2px solid var(--k);box-shadow:0 3px 0 var(--k);
  font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;
  transition:background .25s var(--ease-std)}
.ap--ligne .lp-nom,.ap--ligne .lp-num,.ap--ligne .ac .lp-champ{width:100%;margin:0;color:var(--k);
  background:#fff;border:0;border-radius:11px;padding:11px 13px;font-family:var(--display);
  font-weight:700;font-size:1rem;box-shadow:0 0 0 2px var(--k)}
.ap--ligne .lp-num{text-align:center}
.ap--ligne .lp-nom:focus,.ap--ligne .lp-num:focus,.ap--ligne .ac .lp-champ:focus{outline:none;
  box-shadow:0 0 0 2px var(--k),0 0 0 5px var(--c,#3E8FD4)}
.ap--ligne .ac .lp-champ::placeholder{color:#9A927F}
.ap--ligne .lp-pal{display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.ap--ligne .lp-pal-c{width:26px;height:26px;border-radius:50%;padding:0;transform:none;
  box-shadow:0 0 0 2px var(--k);transition:transform .14s var(--ease-back)}
.ap--ligne .lp-pal-c:hover{transform:scale(1.14);box-shadow:0 0 0 2px var(--k)}
.ap--ligne .lp-pal-c.on{transform:none;box-shadow:0 0 0 2px var(--k),0 0 0 4px var(--pap),0 0 0 6px var(--k)}
@media (max-width:820px){
  .ap--ligne .lp-ident{grid-template-columns:auto minmax(0,1fr) 80px}
  .ap--ligne .lp-ident .lp-ident-coul{grid-column:1/-1}
}

/* la saisie */
.ap--ligne .lp-saisie{margin-top:14px;padding:16px 20px 14px}
.ap--ligne .lp-saisie-t{margin-bottom:12px}
.ap--ligne .lp-saisie-t b{font-family:var(--display);font-weight:800;font-size:1.05rem;color:var(--k)}
.ap--ligne .lp-saisie-t small{font-size:.76rem;color:var(--gr)}
.ap--ligne .lp-saisie-r{gap:10px}
.ap--ligne .lp-sug{gap:8px;margin-top:12px;align-items:center}
.ap--ligne .lp-sug-t{color:var(--gr)}
.ap--ligne .lp-sug-b{color:var(--k);background:#fff;border-radius:999px;padding:5px 12px;
  font-size:.8rem;font-weight:600;box-shadow:0 0 0 1.5px var(--k);transform:none}
.ap--ligne .lp-sug-b:hover{color:var(--k);background:var(--pap);transform:translateY(-1px);
  box-shadow:0 0 0 1.5px var(--k),0 2px 0 1.5px var(--k)}
.ap--ligne .ac ul{color:var(--k);background:#fff;border-radius:12px;box-shadow:0 0 0 2px var(--k),0 4px 0 2px var(--k)}
.ap--ligne .ac li[aria-selected="true"],.ap--ligne .ac li:hover{background:var(--pap)}

/* le chantier : la seule carte sombre, sans halo */
.ap--ligne .lp-chantier{margin-top:14px;border-radius:18px;background:#141B25;
  box-shadow:0 0 0 2px var(--k),0 4px 0 2px var(--k)}
.ap--ligne .lp-ch-vide b{color:var(--pap)}
.ap--ligne .lp-ch-vide small{color:#98A1AC}

/* le pupitre et la carte, côte à côte */
.ap--ligne .lp-duo{margin-top:16px;gap:16px;grid-template-columns:minmax(280px,340px) minmax(0,1fr)}
.ap--ligne .lp-pupitre{padding:14px}
.ap--ligne .lp-pupitre .hint{display:block;margin:2px 2px 10px;padding:0;background:none;box-shadow:none;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gr)}
.ap--ligne .lp-liste{gap:7px}
.ap--ligne .sortrow,.ap--ligne .lp-row{color:var(--k);background:#fff;border-radius:11px;
  box-shadow:0 0 0 1.5px rgba(11,14,19,.22)}
.ap--ligne .sortrow:hover{box-shadow:0 0 0 1.5px var(--k)}
.ap--ligne .sortrow.dragging{box-shadow:0 0 0 2px var(--k),0 10px 18px rgba(0,0,0,.25)}
.ap--ligne .lp-row.lp-neuf{box-shadow:0 0 0 2px var(--c,#3E8FD4)}
.ap--ligne .sortrow .idx{width:26px;height:26px;display:grid;place-items:center;flex:none;border-radius:50%;
  color:var(--k);background:#fff;font-family:var(--display);font-weight:800;font-size:.78rem;
  box-shadow:inset 0 0 0 3.5px var(--c,#3E8FD4),0 0 0 1.5px var(--k)}
.ap--ligne .lp-row-c b{color:var(--k)}
.ap--ligne .lp-bout{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  color:#fff;background:var(--k);vertical-align:1px}
.ap--ligne .lp-corr small,.ap--ligne .lp-corr-non{color:#827A69}
.ap--ligne .lp-row-mon{color:#8A6A10}
.ap--ligne .lp-x{color:#827A69}
.ap--ligne .lp-x:hover{color:#E3051C}
.ap--ligne .lp-vide-astuce{color:#5E5748;background:#fff;box-shadow:0 0 0 1.5px rgba(11,14,19,.22)}
.ap--ligne .lp-vide-ico svg{display:block;width:28px;height:28px}

/* la carte : un plan de transport, fin et net */
.ap--ligne .lp-plan{margin-top:0;border-radius:18px;background:#E8E4D8;
  box-shadow:0 0 0 2px var(--k),0 4px 0 2px var(--k)}
.ap--ligne .lp-nom-st{fill:var(--k);paint-order:stroke;stroke:#FBFAF6;stroke-width:3px;stroke-linejoin:round}
.ap--ligne .lp-nom-role{fill:var(--gr)}
.ap--ligne .lp-pt{fill:#A29C8F}
.ap--ligne .lp-o{color:var(--k);background:#fff;border:0;border-radius:10px;
  box-shadow:0 0 0 1.5px var(--k),0 2px 0 1.5px var(--k);transform:none}
.ap--ligne .lp-o:hover{background:var(--pap);transform:none}
.ap--ligne .lp-o--t.on{color:#fff;background:var(--k)}
.ap--ligne .lp-compteur,.ap--ligne .lp-legende span{color:var(--k);background:#fff;border-radius:999px;
  padding:.3em .75em;box-shadow:0 0 0 1.5px var(--k)}
.ap--ligne .lp-legende{gap:6px}
.ap--ligne .lp-lg-seine{height:5px;background:#9ACBEA}
.ap--ligne .lp-lg-paris{height:0;border-top:1.6px solid var(--k)}
.ap--ligne .lp-lg-pt{background:#A29C8F}
.ap--ligne .lp-tip{color:var(--k);background:#fff;border-radius:12px;
  box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.ap--ligne .lp-tip b{color:var(--k)}
.ap--ligne .lp-tip small{color:var(--gr)}

/* la barre d'actions : elle est posée sur la page sombre, le bouton principal
   passe donc en jaune métro — en noir, il disparaissait */
.ap--ligne .lp-actions{margin-top:20px;gap:10px}
.ap--ligne .lp-actions .btn--solid,.ap--ligne .lp-actions .btn--solid:hover{color:var(--k);background:#FFCE00}


/* ==========================================================================
   METRO CITY — BOUTIQUE ET QUÊTES DESSINÉES
   Même famille que les cases d'information de l'onglet Réseau.
   ========================================================================== */
/* — les onglets de la boutique — */
.mcx .mcb-onglets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:var(--sp-4)}
.mcx .mcb-onglet{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 8px 12px;border:0;border-radius:18px;color:#E4E9EE;cursor:pointer;
  background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--a) 42%,transparent),transparent 60%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 42%,#131B26),#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  transition:transform .18s var(--ease-back),box-shadow .18s var(--ease-std);
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*50ms)}
.mcx .mcb-onglet:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 7px 0 2.5px #0B0E13}
.mcx .mcb-onglet.on{color:#0B0E13;
  background:linear-gradient(170deg,var(--a),color-mix(in srgb,var(--a) 62%,var(--b)));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcx .mcb-onglet-art{display:block;width:70px;height:56px;pointer-events:none}
.mcx .mcb-onglet-art svg{display:block;width:100%;height:100%;overflow:visible}
.mcx .mcb-onglet:hover .mcb-onglet-art,.mcx .mcb-onglet.on .mcb-onglet-art{animation:mcbHop .55s var(--ease-back)}
.mcx .mcb-onglet-t{font-family:var(--display);font-weight:800;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.02em;line-height:1.1;text-align:center}
@keyframes mcbHop{40%{transform:translateY(-6px) rotate(-5deg)}}
@media (max-width:760px){ .mcx .mcb-onglets{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* — les cases d'article — */
.mcx .mcb-grille{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-4)}
.mcx .mcb-t{text-align:left;cursor:pointer;min-height:206px}
.mcx .mcb-t .mc-info-art{width:106px;height:86px}
.mcx .mcb-t .mc-info-val{max-width:calc(100% - 92px)}
.mcx .mcb-t .mc-info-lab i svg{display:block;width:13px;height:13px}
.mcx .mcb-pied{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
/* trop cher : la case reste opaque — c'est l'illustration qui pâlit */
.mcx .mcb-t[disabled],.mcx .mcb-t.mcb-off{opacity:1;filter:none;cursor:default}
.mcx .mcb-t.mcb-off:hover{transform:none}
.mcx .mcb-t.mcb-off .mcb-art{filter:saturate(.45) brightness(.82)}
.mcx .mcb-t.mcb-acquis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--a),0 16px 30px -20px var(--a)}
.mcx .mcb-t.mcb-acquis .mcb-art{filter:none}
.mcx .mcb-note{display:block;margin-top:6px;font-family:var(--mono);font-size:.64rem;color:#9FB0C2}
.mcx .mcb-reduc{padding:.3em .75em;border-radius:999px;font-family:var(--mono);font-size:.66rem;font-weight:600;
  color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 70%,transparent)}
.mcx .mcb-ok{padding:.3em .9em;border-radius:999px;font-weight:800;font-size:.82rem;color:#0B0E13;background:#3ED07A;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mcx .mcb-puces{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.mcx .mcb-puces i{width:15px;height:8px;border-radius:3px;background:rgba(255,255,255,.12)}
.mcx .mcb-puces i.on{background:var(--a);box-shadow:0 0 0 1.5px #0B0E13}
.mcx .mcb-tete{min-height:0;margin-bottom:var(--sp-4);cursor:default}
.mcx .mcb-tete .mc-jauge{margin-top:10px}
/* les cartes du jour : la carte crème posée sur la case sombre */
.mcx .mcb-carte{gap:10px;cursor:default}
.mcx .mcb-carte .mc-card{margin-top:4px}
.mcx .mcb-achat{width:100%;margin-top:auto}
/* les notes des rayons : elles étaient gris foncé sur fond sombre, illisibles */
.mcx .mcb-rayon>.mc-note{position:relative;padding:12px 16px 12px 48px;border-radius:18px;color:#C9D6E4;font-weight:600;
  background:radial-gradient(120% 160% at 0% 0%,rgba(62,143,212,.3),transparent 60%),linear-gradient(165deg,#17202C,#0E141D);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(62,143,212,.42),0 14px 26px -18px #3E8FD4}
.mcx .mcb-rayon>.mc-note::before{content:"i";position:absolute;left:12px;top:9px;display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;font-family:Georgia,serif;font-style:italic;font-weight:900;font-size:.9rem;
  color:#fff;background:#0064B0;box-shadow:0 0 0 2px #0B0E13}

/* — les quêtes — */
.mcx .mcq-liste{display:grid;gap:14px;margin-top:var(--sp-4)}
.mcx .mcq{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;
  padding:14px 18px 14px 16px;border-radius:20px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  animation:mcInfoIn .5s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*70ms)}
.mcx .mcq--fait{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 5px 0 5.5px #0B0E13}
.mcx .mcq--clos{filter:saturate(.72)}
.mcx .mcq-emb{display:grid;place-items:center;width:92px;height:92px;border-radius:24px;
  background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 58%,#1B2430));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcx .mcq-emb svg{display:block;width:80px;height:80px}
.mcx .mcq:hover .mcq-emb svg{animation:mcbHop .6s var(--ease-back)}
.mcx .mcq-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mcx .mcq-etat{display:inline-flex;align-items:center;gap:5px;padding:.3em .75em .3em .4em;border-radius:999px;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mcx .mcq-etat svg{display:block;width:14px;height:14px}
.mcx .mcq--fait .mcq-etat{background:#3ED07A}
.mcx .mcq--clos .mcq-etat{background:#C9D1DA}
.mcx .mcq-cat{padding:.28em .65em;border-radius:999px;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:#4A4F57;box-shadow:inset 0 0 0 1.5px rgba(11,14,19,.35)}
.mcx .mcq-titre{display:block;margin-top:7px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:#0B0E13}
.mcx .mcq-desc{display:block;margin-top:2px;font-size:.8rem;line-height:1.4;color:#4A4F57}
.mcx .mcq-act{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:11px}
.mcx .mcq-btn{display:inline-flex;align-items:center;gap:8px}
.mcx .mcq-btn svg{display:block;width:15px;height:15px}
.mcx .mcq-aide{font-size:.74rem;color:#5A5F68}
.mcx .mcq-obt{display:inline-flex;align-items:center;gap:6px;padding:.38em .85em .38em .5em;border-radius:999px;
  font-weight:800;font-size:.8rem;color:#0B0E13;background:var(--r);box-shadow:0 0 0 2px #0B0E13}
.mcx .mcq-obt svg{display:block;width:15px;height:15px}
@media (max-width:560px){
  .mcx .mcq{grid-template-columns:66px minmax(0,1fr);gap:12px}
  .mcx .mcq-emb{width:66px;height:66px;border-radius:18px}
  .mcx .mcq-emb svg{width:58px;height:58px}
}
/* les paliers du métro-cadeau */
.mcx .mcq-paliers{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:var(--sp-3)}
.mcx .mcq-palier{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:8px 12px 8px 8px;border-radius:16px;color:#fff;
  background:linear-gradient(165deg,color-mix(in srgb,var(--r) 24%,#131B26),#0E141D 78%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 4.5px color-mix(in srgb,var(--r) 40%,transparent)}
.mcx .mcq-palier-rame{display:block;width:64px}
.mcx .mcq-palier-rame svg{display:block;width:64px;height:auto}
.mcx .mcq-palier b{display:block;font-family:var(--display);font-weight:800;color:var(--r)}
.mcx .mcq-palier small{display:block;margin-top:2px;font-size:.7rem;line-height:1.35;color:#B9C4D0}
.mcx .mcq-palier-p{font-family:var(--mono);font-size:.8rem;font-weight:700;color:#fff}
@media (prefers-reduced-motion:reduce){ .mcx .mcb-onglet,.mcx .mcq{animation:none} }


.rn-regle span svg{display:block;width:34px;height:34px}


/* ==========================================================================
   LE HALL DES TROPHÉES
   ========================================================================== */
.lbx-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,1fr);
  align-items:center;gap:12px;padding:26px 26px 92px;border-radius:28px;
  background:radial-gradient(90% 120% at 78% 30%,rgba(255,206,0,.28),transparent 60%),
    linear-gradient(165deg,#2A1E46,#141A2A 70%);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.lbx-hero-txt{position:relative;z-index:2}
.lbx-sur{display:inline-block;padding:.42em .95em;border-radius:999px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.lbx-titre{margin:.35em 0 0;font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);
  line-height:.98;text-transform:uppercase;color:#fff;text-shadow:0 4px 0 #0B0E13}
.lbx-hero-txt p{max-width:44ch;margin:12px 0 0;color:#C9C2DD;font-size:.95rem;line-height:1.45}
.lbx-hero-coupes{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:4px}
.lbx-hc{display:block;line-height:0}
.lbx-hc--1{animation:lbxFlotte 3.4s ease-in-out infinite}
.lbx-hc--2{transform:rotate(-12deg);margin-right:-10px;animation:lbxBalance 4s ease-in-out infinite}
.lbx-hc--3{transform:rotate(12deg);margin-left:-10px;animation:lbxBalance 4s ease-in-out infinite reverse}
.lbx-rayons{transform-origin:60px 48px;animation:lbxTourne 14s linear infinite}
@keyframes lbxFlotte{50%{transform:translateY(-10px)}}
@keyframes lbxBalance{0%,100%{rotate:0deg}50%{rotate:6deg}}
@keyframes lbxTourne{to{transform:rotate(360deg)}}
.lbx-parade{position:absolute;left:0;right:0;bottom:0;height:74px;overflow:hidden;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));border-top:3px solid #0B0E13}
.lbx-parade::before{content:"";position:absolute;left:0;right:0;bottom:12px;height:4px;background:#FFCE00;box-shadow:0 2px 0 #0B0E13}
.lbx-parade-piste{position:absolute;left:0;bottom:14px;display:flex;gap:10px;width:max-content;animation:lbxParade 26s linear infinite}
.lbx-parade-piste span{display:block;width:92px;line-height:0}
.lbx-parade-piste svg{display:block;width:100%;height:auto}
@keyframes lbxParade{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* les confettis */
.lbx-confettis{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.lbx-confettis i{position:absolute;top:-16px;width:9px;height:15px;border-radius:2px;background:var(--c);
  box-shadow:0 0 0 1.5px #0B0E13;animation:lbxTombe linear infinite}
.lbx-confettis i:nth-child(3n){width:11px;height:11px;border-radius:50%}
@keyframes lbxTombe{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(420px) rotate(var(--r))}}
@media (max-width:760px){
  .lbx-hero{grid-template-columns:1fr;padding:22px 18px 88px}
  .lbx-hero-coupes svg.lbx-coupe{width:130px;height:auto}
}

/* la carte du joueur */
.lbx-moi{margin-top:18px}
.lbx-invite,.lbx-carte-moi{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:16px 20px;border-radius:22px;
  color:#0B0E13;background:linear-gradient(180deg,#F5F0E4,#E6DECB);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.lbx-invite>div{flex:1;min-width:220px}
.lbx-invite b,.lbx-moi-info b{font-family:var(--display);font-weight:800;font-size:1.15rem}
.lbx-invite p{margin:4px 0 0;font-size:.86rem;color:#5E5748}
.lbx-moi-ico{line-height:0}
.lbx-moi-info{flex:1;min-width:220px;display:flex;flex-direction:column;gap:5px}
.lbx-moi-titre{font-size:.82rem;font-weight:700;color:#6B6456}
.lbx-moi-info small{font-size:.74rem;color:#6B6456}
.lbx-xp{height:12px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.lbx-xp i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#FFCE00 0 14px,#FFB800 14px 20px);
  transition:width 1s var(--ease-out-expo)}
.lbx-chiffres{display:grid;grid-template-columns:repeat(4,minmax(86px,1fr));gap:8px}
.lbx-chiffres>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;border-radius:14px;
  background:#fff;box-shadow:0 0 0 2px #0B0E13}
.lbx-ch-ico svg{display:block;width:26px;height:26px}
.lbx-chiffres b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.lbx-chiffres span{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;color:#6B6456}
.lbx-av{position:relative;display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:#0B0E13;background:var(--c);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.lbx-av small{position:absolute;right:-6px;bottom:-4px;min-width:22px;height:22px;padding:0 5px;display:grid;place-items:center;
  border-radius:999px;font-size:.68rem;color:#fff;background:#0B0E13;box-shadow:0 0 0 2px #fff}
.lbx-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.lbx-badge{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  padding:8px 10px;border-radius:14px;color:#D5DAE0;background:#151C27;box-shadow:0 0 0 2px #0B0E13;
  animation:skEntre .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*30ms)}
.lbx-badge-ico{grid-row:1/3;display:grid;place-items:center;line-height:0}
.lbx-badge-ico svg{max-width:44px;height:auto}
.lbx-badge b{font-size:.82rem}
.lbx-badge small{font-size:.68rem;color:#7F8893;line-height:1.3}
.lbx-badge.eu{color:#0B0E13;background:#F5F0E4}
.lbx-badge.eu small{color:#6B6456}

/* les sélecteurs */
.lbx-bloc-t{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:22px 0 10px}
.lbx-bloc-t>b{font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;color:#fff}
.lbx-periodes{display:flex;flex-wrap:wrap;gap:6px}
.lbx-periodes button{padding:.45em .95em;border:0;border-radius:999px;font-weight:800;font-size:.8rem;color:#DDE3E9;
  background:#222B38;cursor:pointer;box-shadow:0 0 0 2px #0B0E13}
.lbx-periodes button.on{color:#0B0E13;background:#FFCE00}
.lbx-jeux{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lbx-jeu{display:flex;align-items:center;gap:9px;padding:7px 12px 7px 7px;border:0;border-radius:16px;text-align:left;
  color:#E4E9EE;background:#171F2B;cursor:pointer;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  transition:transform .15s var(--ease-back);animation:skEntre .35s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*25ms)}
.lbx-jeu:hover{transform:translateY(-2px)}
.lbx-jeu.on{color:#0B0E13;background:#FFCE00}
.lbx-jeu-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#F5F0E4;
  box-shadow:0 0 0 2px #0B0E13;line-height:0}
.lbx-jeu-ico svg{display:block;width:32px;height:32px}
.lbx-jeu-t{font-size:.8rem;font-weight:800;line-height:1.15}

/* le podium */
.lbx-podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;
  max-width:760px;margin:30px auto 10px}
.lbx-marche{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  animation:skEntre .6s var(--ease-back) backwards;animation-delay:var(--d,0ms)}
.lbx-marche-coupe{line-height:0;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))}
.lbx-marche.r1 .lbx-marche-coupe{animation:lbxFlotte 3s ease-in-out infinite}
.lbx-marche.libre .lbx-marche-coupe{opacity:.55;filter:grayscale(.3)}
.lbx-marche .lbx-av{width:46px;height:46px;font-size:1.25rem}
.lbx-nom{font-family:var(--display);font-weight:800;font-size:.98rem;color:#fff}
.lbx-marche .lbx-pts{font-family:var(--mono);font-size:.78rem;color:#FFCE00}
.lbx-marche.libre .lbx-nom{color:#AEB6C0}
.lbx-marche.libre .lbx-pts{color:#7F8893}
.lbx-socle{display:grid;place-items:center;align-self:stretch;margin-top:6px;border-radius:14px 14px 4px 4px;
  font-family:var(--display);font-weight:800;font-size:2.4rem;color:#0B0E13;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.lbx-marche.r1 .lbx-socle{height:118px;background:linear-gradient(180deg,#FFE27A,#E6B53A)}
.lbx-marche.r2 .lbx-socle{height:88px;background:linear-gradient(180deg,#F0F3F7,#B9C2CC)}
.lbx-marche.r3 .lbx-socle{height:64px;background:linear-gradient(180deg,#F2C29A,#C98A4E)}
.lbx-marche.moi .lbx-socle{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #3ED07A,0 6px 0 7px #0B0E13}

/* la liste et les messages */
.lbx-liste{display:grid;gap:8px;max-width:760px;margin:18px auto 0}
.lbx-ligne{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:16px;color:#0B0E13;
  background:#F5F0E4;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  animation:skEntre .35s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*35ms)}
.lbx-ligne.moi{background:#DDF5E4}
.lbx-rang{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-family:var(--display);font-weight:800;
  color:#fff;background:#0B0E13}
.lbx-ligne .lbx-av{width:38px;height:38px;font-size:1rem}
.lbx-ligne-info{flex:1;min-width:0}
.lbx-ligne-info b{display:block;font-weight:800}
.lbx-ligne-info small{font-size:.72rem;color:#6B6456}
.lbx-ligne .lbx-pts{font-family:var(--display);font-weight:800}
.lbx-up{font-family:var(--mono);font-size:.7rem;color:#00814F}
.lbx-vide,.lbx-conseil{padding:14px 18px;border-radius:18px;text-align:center;color:#0B0E13;background:#F5F0E4;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.lbx-vide b,.lbx-conseil b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.lbx-vide p,.lbx-conseil p{margin:4px 0 0;font-size:.86rem;color:#5E5748}

/* l'écran de fin */
.lbx-fin-scene{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:0;height:200px;margin:0 auto 10px;max-width:420px}
.lbx-fin-scene .lbx-confettis{inset:-20px -40px}
.lbx-fin-coupe{position:relative;z-index:2;line-height:0;animation:lbxArrive .8s var(--ease-back) backwards,lbxFlotte 3.2s ease-in-out .8s infinite}
.lbx-fin-med{position:relative;z-index:2;line-height:0;margin-bottom:10px}
.lbx-fin-med--g{transform:rotate(-14deg);margin-right:-14px;animation:lbxArrive .8s var(--ease-back) .15s backwards}
.lbx-fin-med--d{transform:rotate(14deg);margin-left:-14px;animation:lbxArrive .8s var(--ease-back) .3s backwards}
@keyframes lbxArrive{from{opacity:0;translate:0 40px;scale:.4}}
.lbx-fin-plaque{margin-top:6px}
.lbx-fin-stats .stat{padding:10px 14px;border-radius:14px;background:#F5F0E4;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;animation:skEntre .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms)}
.lbx-fin-stats .stat span{color:#6B6456}
@media (max-width:560px){ .lbx-podium{gap:6px} .lbx-socle{font-size:1.8rem} .lbx-chiffres{grid-template-columns:repeat(2,1fr)} }
@media (prefers-reduced-motion:reduce){
  .lbx-confettis,.lbx-parade-piste,.lbx-rayons,.lbx-hc,.lbx-fin-coupe,.lbx-marche-coupe{animation:none}
}


/* ==========================================================================
   MÉTRODROP — POSTE DE CONDUITE, JOKERS, CABINE
   ========================================================================== */
.mdh{--md:#0FA3B1;--md2:#5FD6E0;--k:#0B0E13;--pap:#F5F0E4;max-width:1100px;margin:0 auto;color:var(--pap)}
.mdh button{font:inherit}
.mdh-tete{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px;margin:4px 0 16px}
.mdh-sur{display:inline-block;padding:.42em .95em;border-radius:999px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--md);box-shadow:0 0 0 2px var(--k)}
.mdh-titre{margin:.4em 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,4vw,2.5rem);
  line-height:1;text-transform:uppercase;color:#fff}
.mdh-xp{min-width:250px;display:flex;flex-direction:column;gap:5px;padding:10px 14px;border-radius:16px;
  background:#151C27;box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.mdh-xp span{font-weight:800;font-size:.86rem}
.mdh-xp-j{height:10px;overflow:hidden;border-radius:999px;background:#0B0E13;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.mdh-xp-j i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--md) 0 12px,var(--md2) 12px 18px)}
.mdh-xp small{font-size:.7rem;color:#9AA3AE}
.mdh-haut{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:16px}
/* le quai : carrelage, plaques émaillées, la rame, le tracé */
.mdh-quai{position:relative;overflow:hidden;border-radius:22px;color:var(--k);
  background:repeating-linear-gradient(0deg,rgba(11,14,19,.06) 0 1px,transparent 1px 20px),
    repeating-linear-gradient(90deg,rgba(11,14,19,.05) 0 1px,transparent 1px 34px),
    linear-gradient(180deg,#F2EADB,#E3D8C1);
  box-shadow:0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)}
.mdh-quai::before{content:"";display:block;height:12px;background:var(--lc);border-bottom:2.5px solid var(--k)}
.mdh-plaques{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;padding:16px 16px 4px}
.mdh-plaque{padding:9px 12px 10px;border-radius:12px;text-align:center;color:#fff;background:#0E3A6B;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px #0E3A6B,0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.mdh-plaque small{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:#BFD3EA}
.mdh-plaque b{display:block;margin-top:3px;font-family:var(--display);font-weight:800;font-size:clamp(.9rem,2.1vw,1.2rem);
  line-height:1.1;text-transform:uppercase}
.mdh-plaque--next{background:var(--md);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--md),0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.mdh-plaque--next small{color:#FFE0EC}
.mdh-fleche{width:36px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Cpath d='M3 12 H30 M20 3 L31 12 L20 21' fill='none' stroke='%230B0E13' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 12 H30 M20 3 L31 12 L20 21' fill='none' stroke='%23FFCE00' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mdh-rame-vis{width:min(300px,64%);margin:6px auto 0;line-height:0;animation:mdhRoule 3.2s ease-in-out infinite}
.mdh-rame-vis svg{display:block;width:100%;height:auto}
@keyframes mdhRoule{50%{transform:translateX(12px)}}
.mdh-trace{position:relative;display:flex;overflow-x:auto;padding:16px 16px 8px;background:#2B2530;border-top:2.5px solid var(--k);scrollbar-width:thin}
.mdh-trace-fait{position:absolute;top:22px;height:6px;border-radius:3px;background:var(--lc);z-index:1}
.mdh-pt{position:relative;z-index:2;flex:0 0 76px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.mdh-pt i{width:14px;height:14px;border-radius:50%;background:#2B2530;box-shadow:0 0 0 2.5px #9C9384}
.mdh-pt.fait i{background:var(--lc);box-shadow:0 0 0 2.5px #fff}
.mdh-pt.ici i{width:20px;height:20px;margin-top:-3px;background:#FFCE00;box-shadow:0 0 0 3px var(--k),0 0 0 6px #FFCE00;
  animation:mdhPulse 1.6s ease-in-out infinite}
.mdh-pt.suivante i{box-shadow:0 0 0 2.5px var(--md2)}
.mdh-pt span{max-width:72px;font-size:.62rem;line-height:1.15;color:#C9C2B4}
.mdh-pt.ici span{font-weight:800;color:#fff}
@keyframes mdhPulse{50%{box-shadow:0 0 0 3px var(--k),0 0 0 11px rgba(255,206,0,.3)}}
.mdh-lab{margin:0;padding:4px 16px 12px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:#C9C2B4;background:#2B2530}
/* la colonne de droite */
.mdh-cote{display:flex;flex-direction:column;gap:14px;min-width:0}
.mdh-chiffres{padding:4px 16px;border-radius:20px;background:#151C27;box-shadow:0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)}
.mdh-ch{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);animation:skEntre .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms)}
.mdh-ch:last-child{border-bottom:0}
.mdh-ch-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#0F151D;box-shadow:0 0 0 2px var(--k)}
.mdh-ch-ico svg{display:block;width:26px;height:26px}
.mdh-ch span{font-size:.88rem;color:#B6BEC7}
.mdh-ch b{font-family:var(--display);font-weight:800;font-size:1.25rem;color:#fff;font-variant-numeric:tabular-nums}
.mdh-action{display:flex;flex-direction:column;gap:10px}
.mdh-note{margin:0;padding:10px 14px;border-radius:14px;font-size:.84rem;line-height:1.45;color:#C9D0D8;background:#151C27;box-shadow:0 0 0 2px var(--k)}
.mdh-note--ok{color:var(--k);background:#BDEFCF}
.mdh-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:12px;min-height:70px;
  border:0;border-radius:18px;cursor:pointer;font-family:var(--display);font-weight:800;font-size:1.2rem;text-transform:uppercase;
  color:#fff;background:var(--md);box-shadow:0 0 0 2.5px var(--k),0 6px 0 2.5px var(--k);transition:transform .12s,box-shadow .12s}
.mdh-go:hover{transform:translateY(-2px);box-shadow:0 0 0 2.5px var(--k),0 8px 0 2.5px var(--k)}
.mdh-go:active{transform:translateY(5px);box-shadow:0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}
.mdh-go::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:26%;background:rgba(255,255,255,.35);
  transform:skewX(-20deg);animation:skReflet 3.6s ease-in-out infinite}
.mdh-go>span{position:relative;z-index:1}
.mdh-go-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--k)}
.mdh-go-ico svg{display:block;width:28px;height:28px}
.mdh-lien{align-self:center;border:0;background:none;cursor:pointer;font-size:.8rem;color:#9AA3AE;text-decoration:underline}
/* le tableau de bord et le dépôt */
.mdh-bloc{margin-top:24px}
.mdh-bloc-t{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;color:#fff}
.mdh-cmds{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.mdh-cmd{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;
  padding:9px 11px;border-radius:14px;color:#8E97A2;background:#141B25;box-shadow:0 0 0 2px var(--k);
  animation:skEntre .35s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*30ms)}
.mdh-cmd-ico{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#0F151D;box-shadow:0 0 0 2px var(--k)}
.mdh-cmd-ico svg{display:block;width:26px;height:26px}
.mdh-cmd:not(.on) .mdh-cmd-ico svg{filter:grayscale(1) opacity(.45)}
.mdh-cmd b{font-size:.84rem;color:#C9D0D8}
.mdh-cmd small{font-size:.68rem}
.mdh-cmd.on{color:#6B6456;background:var(--pap)}
.mdh-cmd.on b{color:var(--k)}
.mdh-cmd.on .mdh-cmd-ico{background:#fff}
.mdh-rames{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.mdh-rame{display:flex;flex-direction:column;gap:6px;padding:0 0 12px;overflow:hidden;text-align:left;border:0;border-radius:18px;
  cursor:pointer;color:var(--k);background:var(--pap);box-shadow:0 0 0 2.5px var(--k),0 4px 0 2.5px var(--k);
  transition:transform .15s var(--ease-back),box-shadow .15s;animation:skEntre .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms)}
.mdh-rame:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px var(--k),0 7px 0 2.5px var(--k)}
.mdh-rame.on{box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--md),0 4px 0 5.5px var(--k)}
.mdh-rame-img{padding:14px 18px 8px;line-height:0;background:linear-gradient(180deg,#DDE6EC 0 72%,#C3CED6 72%);border-bottom:2.5px solid var(--k)}
.mdh-rame-img svg{display:block;width:100%;height:auto}
.mdh-rame.lock .mdh-rame-img{filter:grayscale(.7) brightness(.86)}
.mdh-rame>b,.mdh-rame>small,.mdh-note-r,.mdh-rame-etat{margin-left:12px;margin-right:12px}
.mdh-rame>b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.mdh-rame>small{font-size:.74rem;line-height:1.35;color:#5E5748}
.mdh-note-r{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.72rem;font-weight:700;color:#5E5748}
.mdh-note-r i{display:flex;gap:3px}
.mdh-note-r em{width:13px;height:8px;border-radius:2px;background:#D8D0BF}
.mdh-note-r em.on{background:var(--c);box-shadow:0 0 0 1.2px var(--k)}
.mdh-rame-etat{align-self:flex-start;margin-top:4px;padding:.3em .85em;border-radius:999px;font-size:.76rem;font-weight:800;
  background:#fff;box-shadow:0 0 0 1.5px var(--k)}
.mdh-rame.on .mdh-rame-etat{background:#3ED07A}
.mdh-rame.lock .mdh-rame-etat{background:#FFCE00}
.mdh-pied{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
@media (max-width:860px){ .mdh-haut{grid-template-columns:1fr} }
@media (max-width:520px){ .mdh-plaques{grid-template-columns:1fr} .mdh-fleche{transform:rotate(90deg);justify-self:center} }

/* — les jokers du plateau : on reconnaît toujours la ligne — */
.md-tile.md-auto .md-face{background:var(--lc,#0064B0)!important;color:var(--li,#fff)!important}
.md-tile.md-auto::after{content:"";position:absolute;inset:-1px;border-radius:17px;z-index:-1;pointer-events:none;
  background:conic-gradient(#E3051C,#FFCE00,#3ED07A,#3E8FD4,#A55BD8,#E3051C);animation:mdArcEnCiel 1.8s linear infinite}
@keyframes mdArcEnCiel{to{filter:hue-rotate(360deg)}}
.md-tile.md-auto .md-face::before{content:"";position:absolute;right:1%;top:1%;width:46%;height:46%;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23E3051C'/%3E%3Cstop offset='.35' stop-color='%23FFCE00'/%3E%3Cstop offset='.7' stop-color='%233ED07A'/%3E%3Cstop offset='1' stop-color='%23A55BD8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='14' fill='url(%23g)' stroke='%230B0E13' stroke-width='2.6'/%3E%3Ccircle cx='16' cy='16' r='10' fill='%23FFFDF4' stroke='%230B0E13' stroke-width='2'/%3E%3Cpath d='M11 21 V11 L16 17 L21 11 V21' fill='none' stroke='%230B0E13' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:mdBadge 1.6s ease-in-out infinite}
@keyframes mdBadge{50%{transform:scale(1.12) rotate(-6deg)}}
.md-tile .md-bar{left:6%;right:6%;top:auto;bottom:6%;width:auto;height:38%;margin:0;border-radius:0;z-index:3;box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 26'%3E%3Cg stroke='%230B0E13' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M2 8 H12 M0 14 H9 M2 20 H12' stroke='%23FFFFFF' stroke-width='2.6' opacity='.85'/%3E%3Cpath d='M14 21 V10 Q14 4 21 4 H49 Q57 4 59 11 L61 21 Z' fill='%23FFFFFF'/%3E%3Cpath d='M14.6 17 H60.4' stroke='%230B0E13' stroke-width='3.4'/%3E%3Crect x='18' y='7.5' width='9' height='6' rx='2' fill='%23BDE6F7' stroke-width='1.8'/%3E%3Crect x='30' y='7.5' width='9' height='6' rx='2' fill='%23BDE6F7' stroke-width='1.8'/%3E%3Cpath d='M43 7.5 H50 Q54 7.5 55.5 11 L56.5 13.5 H43 Z' fill='%23BDE6F7' stroke-width='1.8'/%3E%3Ccircle cx='57' cy='18.5' r='2.1' fill='%23FFE27A' stroke-width='1.6'/%3E%3Ccircle cx='23' cy='22.5' r='2.6' fill='%232A3440' stroke-width='1.8'/%3E%3Ccircle cx='48' cy='22.5' r='2.6' fill='%232A3440' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  animation:mdRameFile 1.9s ease-in-out infinite alternate}
.md-tile .md-bar.v{left:auto;right:6%;top:6%;bottom:6%;width:38%;height:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 64'%3E%3Cg stroke='%230B0E13' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8 62 V52 M14 64 V55 M20 62 V52' stroke='%23FFFFFF' stroke-width='2.6' opacity='.85'/%3E%3Cpath d='M5 50 H16 Q22 50 22 43 V15 Q22 7 15 5 L5 3 Z' fill='%23FFFFFF'/%3E%3Cpath d='M9 49.4 V4' stroke='%230B0E13' stroke-width='3.4'/%3E%3Crect x='12.5' y='37' width='6' height='9' rx='2' fill='%23BDE6F7' stroke-width='1.8'/%3E%3Crect x='12.5' y='25' width='6' height='9' rx='2' fill='%23BDE6F7' stroke-width='1.8'/%3E%3Cpath d='M12.5 21 V14 Q12.5 10 16 8.5 L18.5 7.5 V21 Z' fill='%23BDE6F7' stroke-width='1.8'/%3E%3Ccircle cx='17' cy='7' r='2.1' fill='%23FFE27A' stroke-width='1.6'/%3E%3Ccircle cx='4' cy='41' r='2.6' fill='%232A3440' stroke-width='1.8'/%3E%3Ccircle cx='4' cy='16' r='2.6' fill='%232A3440' stroke-width='1.8'/%3E%3C/g%3E%3C/svg%3E");animation-name:mdRameFileV}
@keyframes mdRameFile{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
@keyframes mdRameFileV{from{transform:translateY(9%)}to{transform:translateY(-9%)}}
.md-tile .md-cross{left:auto;right:2%;top:2%;bottom:auto;width:46%;height:46%;margin:0;border-radius:0;z-index:3;box-shadow:none;opacity:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23FFFDF4' stroke='%230B0E13' stroke-width='2.8'/%3E%3Cpath d='M9 12 H20 M17 8.5 L21 12 L17 15.5' fill='none' stroke='%230B0E13' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 20 H12 M15 16.5 L11 20 L15 23.5' fill='none' stroke='%230B0E13' stroke-width='5.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12 H20 M17 8.5 L21 12 L17 15.5' fill='none' stroke='%23E3051C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23 20 H12 M15 16.5 L11 20 L15 23.5' fill='none' stroke='%233E8FD4' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;animation:mdCorrTourne 3.4s ease-in-out infinite}
@keyframes mdCorrTourne{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg) scale(1.06)}}
.md-tile .md-cross::after{display:none}
.md-tile.md-rame .md-face span,.md-tile.md-corr .md-face span,.md-tile.md-auto .md-face span{
  text-shadow:-1.5px 0 0 rgba(0,0,0,.35),1.5px 0 0 rgba(0,0,0,.35),0 1.5px 0 rgba(0,0,0,.35),0 -1.5px 0 rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){ .md-tile.md-auto::after,.md-tile.md-auto .md-face::before,
  .md-tile .md-bar,.md-tile .md-cross{animation:none} }

/* — la cabine : un vrai poste de pilotage — */
.mdx-vue .mdx-mont{width:7.2%;background:linear-gradient(90deg,#5A6270 0 8%,#353B45 40%,#1C2027 100%);
  box-shadow:inset -3px 0 0 #0B0E13,8px 0 20px -8px rgba(0,0,0,.9)}
.mdx-vue .mdx-mont::after{left:34%;width:8px;top:9%;bottom:18%;border-radius:0;
  background:radial-gradient(circle,#D8DEE6 0 2.2px,#0B0E13 2.5px 3.4px,transparent 3.6px) 0 0/8px 30px repeat-y}
.mdx-vue .mdx-mont::before{content:"";position:absolute;left:0;right:0;bottom:4%;height:12%;
  background:repeating-linear-gradient(135deg,#FFCE00 0 8px,#0B0E13 8px 16px);box-shadow:inset 0 2px 0 #0B0E13,inset 0 -2px 0 #0B0E13}
.mdx-vue .mdx-toit{height:9%;background:linear-gradient(180deg,#3A404A,#1F242B 70%,rgba(20,24,30,0));box-shadow:inset 0 -3px 0 #0B0E13}
.mdx-vue .mdx-glace{background:
  linear-gradient(112deg,transparent 0 16%,rgba(255,255,255,.08) 16% 21%,transparent 21% 25%,rgba(255,255,255,.05) 25% 27%,transparent 27%),
  linear-gradient(112deg,transparent 0 70%,rgba(255,255,255,.05) 70% 73%,transparent 73%),
  radial-gradient(140% 100% at 50% 120%,rgba(0,0,0,.35),transparent 55%)}
.mdx-vue .mdx-cadre-cab::after{content:"";position:absolute;left:10%;bottom:17%;width:36%;height:6px;border-radius:3px;
  background:#15181D;box-shadow:0 0 0 1.5px #3A404A;transform-origin:0 50%;transform:rotate(-14deg)}
.mdx-vue .mdx-pupitre{background:linear-gradient(180deg,#3A404A,#1B1F25 70%);box-shadow:inset 0 3px 0 #5A6270,0 -3px 0 #0B0E13}
.mdx-vue .mdx-pupitre::before{left:14%;right:14%;top:34%;height:10px;border-radius:5px;background:
  radial-gradient(circle at 8% 50%,#3ED07A 0 4px,transparent 4.5px),
  radial-gradient(circle at 20% 50%,#FFCE00 0 4px,transparent 4.5px),
  radial-gradient(circle at 32% 50%,#E3051C 0 4px,transparent 4.5px),
  linear-gradient(90deg,transparent 0 44%,#0B0E13 44% 96%,transparent 96%);opacity:.95}
.mdx-cab .mdx-tb{padding:10px;border-radius:18px;background:linear-gradient(180deg,#2E343D,#171B21);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mdx-cab .mdx-jauges{padding:10px 12px;border-radius:16px;background:#1B1F25;box-shadow:0 0 0 2.5px #0B0E13}
.mdx-cab .mdx-manche{padding:10px;border-radius:18px;background:linear-gradient(180deg,#2E343D,#171B21);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mdx-cab .mdx-b{display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#F5F0E4,#DDD3BF);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transition:transform .08s,box-shadow .08s}
.mdx-cab .mdx-b b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mdx-cab .mdx-b b svg{display:block;width:30px;height:30px}
.mdx-cab .mdx-b span{font-weight:800;font-size:.76rem}
.mdx-cab .mdx-b:active,.mdx-cab .mdx-b.on{transform:translateY(4px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mdx-cab .mdx-b--acc{background:linear-gradient(180deg,#B8F0CB,#6FDC98)}
.mdx-cab .mdx-b--frein{background:linear-gradient(180deg,#FFD2A8,#FFA04F)}
.mdx-cab .mdx-b--urg{background:linear-gradient(180deg,#FFB0B6,#FF5A66)}


/* ==========================================================================
   MÉTRO SOLITAIRE — VOIES DE GARAGE COMPACTES, FIN AUTOMATIQUE
   Les voies de garage prenaient une rangée entière de cartes pleine
   taille. Elles deviennent de petites cases, sur deux colonnes : la carte
   garée n'y montre que sa pastille et son nom.
   ========================================================================== */
.so-garages{display:grid;grid-template-columns:repeat(2,78px);gap:6px}
.so-garages .so-garage-vide{width:78px;height:54px;border-radius:10px;font-size:.48rem;letter-spacing:.08em;line-height:1.2;padding:0 4px}
.so-garages .so-carte{width:78px;min-height:0;height:54px;padding:4px 6px;border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;gap:2px}
.so-garages .so-carte .so-tete{margin:0}
.so-garages .so-carte .so-tete small,.so-garages .so-carte .so-type{display:none}
.so-garages .so-carte .so-past{width:18px;height:18px;margin:0;font-size:.58rem;flex:none}
.so-garages .so-carte{padding-top:6px}
.so-garages .so-carte .so-tete{display:flex;align-items:center;min-height:19px;transform:none}
.so-garages .so-carte .so-nom{font-size:.58rem;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.so-auto .so-carte,.so-auto .so-pioche,.so-auto .so-fond,.so-auto .so-garage-vide,.so-auto .so-vide{pointer-events:none}
.so-fond.so-vol{animation:soVol .42s var(--ease-back)}
@keyframes soVol{40%{transform:translateY(-8px) scale(1.06);box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00}}


/* ==========================================================================
   CORRECTIONS — LOT 1
   ========================================================================== */
/* — Plus court chemin : la correction remplit son cadre — */
/* le tracé garde toute sa largeur (son dessin occupe la gauche) : le bilan
   animé se pose dans la moitié droite, restée vide */
.itx-cadre{display:grid;align-items:start}
.itx-cadre>*{grid-area:1/1}
.itx-cadre .itx{justify-self:end;width:min(62%,560px);position:relative;z-index:2}
@media (max-width:780px){ .itx-cadre>*{grid-area:auto} .itx-cadre .itx{width:100%;margin-top:12px} }
.itx{display:flex;flex-direction:column;gap:12px;animation:skEntre .5s var(--ease-back) backwards}
.itx-scene-box{overflow:hidden;border-radius:18px;line-height:0;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.itx-scene{display:block;width:100%;height:auto}
.itx-soleil{animation:lbxTourne 16s linear infinite}
.itx-nuage{animation:itxNuage 18s linear infinite}
.itx-nuage--2{animation-duration:26s;animation-delay:-9s}
@keyframes itxNuage{from{transform:translateX(-200px)}to{transform:translateX(720px)}}
.itx-rame{animation:itxRoule 6.5s cubic-bezier(.55,0,.35,1) infinite}
@keyframes itxRoule{0%,8%{transform:translateX(0)}82%,100%{transform:translateX(var(--dist))}}
.itx-plaque{animation:skEntre .5s var(--ease-back) backwards}
.itx-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.itx-case{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border-radius:16px;color:#0B0E13;
  background:#F5F0E4;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  animation:skEntre .45s var(--ease-back) backwards;animation-delay:calc(.2s + var(--i,0)*90ms)}
.itx-case-ico svg{display:block;width:34px;height:34px}
.itx-case b{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1}
.itx-case span:last-child{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#6B6456}
.itx-aiguille{transform-origin:16px 16px;animation:lbxTourne 3s linear infinite}
.itx-etapes{display:flex;flex-direction:column;gap:8px}
.itx-etape{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:14px;color:#0B0E13;background:#fff;
  box-shadow:0 0 0 2px #0B0E13,inset 6px 0 0 var(--c);animation:skEntre .45s var(--ease-back) backwards;animation-delay:calc(.45s + var(--i,0)*110ms)}
.itx-puce{display:grid;place-items:center;flex:none;min-width:34px;height:34px;padding:0 6px;border-radius:999px;
  font-family:var(--display);font-weight:800;box-shadow:0 0 0 2px #0B0E13}
.itx-etape b{display:block;font-size:.9rem}
.itx-etape small{display:block;font-size:.74rem;color:#6B6456}

/* — Reconstituer une ligne : la fête de fin — */
.builder{position:relative}
.rc-fete{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  pointer-events:none;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 35%,transparent),rgba(11,14,19,.55) 70%);
  animation:rcFeteIn .45s ease-out}
.rc-fete.fini{animation:rcFeteOut .45s ease-in forwards}
@keyframes rcFeteIn{from{opacity:0}}
@keyframes rcFeteOut{to{opacity:0}}
.rc-fete-plaque{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;border-radius:999px;
  color:#fff;background:#0E3A6B;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #0E3A6B,0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;
  animation:rcPlaque .7s var(--ease-back) backwards}
@keyframes rcPlaque{from{transform:scale(.3) rotate(-8deg);opacity:0}}
.rc-fete-puce{display:grid;place-items:center;min-width:58px;height:58px;padding:0 8px;border-radius:999px;font-family:var(--display);
  font-weight:800;font-size:1.6rem;color:var(--i);background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 5.5px #0B0E13}
.rc-fete-plaque small{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#BFD3EA}
.rc-fete-plaque b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.6vw,1.5rem);text-transform:uppercase}
.rc-fete-defile{position:relative;z-index:2;width:min(92%,760px);overflow:hidden;padding:8px 0;border-radius:999px;background:#F5F0E4;
  box-shadow:0 0 0 3px #0B0E13}
.rc-fete-piste{display:flex;gap:10px;width:max-content;animation:lbxParade 14s linear infinite reverse}
.rc-fete-piste span{padding:.3em .8em;border-radius:999px;font-weight:800;font-size:.84rem;color:#0B0E13;white-space:nowrap;
  box-shadow:inset 0 0 0 2px var(--c)}

/* — Réponses justes ou fausses : une vraie pastille, plus un petit carré — */
.ap .opt:is(.good,.bad)::before{content:""!important;order:9;margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;animation:optBadge .5s var(--ease-back);
  background:#3ED07A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%230B0E13' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat!important}
.ap .opt.bad::before{background:#FF5A6E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") center/15px no-repeat!important}
@keyframes optBadge{from{transform:scale(0) rotate(-45deg)}}

/* — Metro City, jeu des villes : plus de texte jaune pâle illisible — */
[class*="vl-"] text:is([fill="#FFE58A"],[fill="#F0DDB5"],[fill="#FFCE00"],[fill="#FFD23E"],[fill="#FFE14D"]){
  paint-order:stroke;stroke:#0B0E13;stroke-width:.16em;stroke-linejoin:round}
.vl-niv{-webkit-text-stroke:0;text-shadow:-1.5px 0 #0B0E13,1.5px 0 #0B0E13,0 -1.5px #0B0E13,0 1.5px #0B0E13,0 2.5px 0 #0B0E13}


/* ==========================================================================
   LE TRAJET D'UNE LIGNE — UN VRAI QUAI DE STATION
   --------------------------------------------------------------------------
   Le fond sombre et translucide laissait voir la page à travers et jurait
   avec le plan clair. Tout l'écran devient un quai : mur de carrelage
   crème, bandeau de la ligne en haut, plaque émaillée pour le titre, plan
   encadré comme une affiche, cartes des lieux comme des affiches de quai,
   et la bande jaune de sécurité au pied.
   ========================================================================== */
.lineshow{padding:26px clamp(12px,3vw,34px) 44px;overflow-y:auto;backdrop-filter:none;
  background:
    repeating-linear-gradient(0deg,rgba(11,14,19,.07) 0 1.5px,transparent 1.5px 28px),
    repeating-linear-gradient(90deg,rgba(11,14,19,.055) 0 1.5px,transparent 1.5px 48px),
    linear-gradient(180deg,#F3EBDC,#E0D3B8)}
.lineshow::before{content:"";position:fixed;left:0;right:0;top:0;height:16px;z-index:1;
  background:var(--c,#0064B0);box-shadow:0 3px 0 #0B0E13}
.lineshow::after{content:"";position:fixed;left:0;right:0;bottom:0;height:22px;z-index:1;
  background:repeating-linear-gradient(90deg,#FFCE00 0 46px,#E8B800 46px 50px);box-shadow:0 -3px 0 #0B0E13}
/* le titre : la plaque émaillée de la station */
.ls-head{position:relative;z-index:2;align-items:center;gap:16px;margin:4px auto 18px;max-width:1100px;width:100%;
  padding:12px 14px 12px 12px;border-radius:22px;color:#fff;background:#0E3A6B;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5.5px #0E3A6B,0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ls-head .bullet{width:62px;height:62px;font-size:1.7rem;box-shadow:0 0 0 3px #fff,0 0 0 5.5px #0B0E13}
.ls-head b{color:#fff;font-size:clamp(1.05rem,2.8vw,1.6rem);text-transform:uppercase;letter-spacing:.01em}
.ls-head span{display:inline-block;margin-top:5px;padding:.25em .7em;border-radius:999px;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2px #0B0E13;font-weight:700}
.ls-close{width:46px;height:46px;padding:0;border-radius:50%;font-size:0;color:#0B0E13;
  background:#F5F0E4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%230B0E13' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13}
.ls-close:hover{background-color:#fff;transform:translateY(-2px) rotate(8deg)}
/* le plan : une affiche encadrée à la couleur de la ligne */
.ls-stage{position:relative;z-index:2;max-width:1100px;width:100%;margin:0 auto;padding:clamp(10px,2vw,22px);border-radius:18px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.7),transparent 40%),
    linear-gradient(180deg,#FFFDF7,#F4EDDC);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 11px var(--c,#0064B0),0 0 0 14px #0B0E13,0 20px 0 14px rgba(11,14,19,.18)}
.ls-stage svg{filter:drop-shadow(0 3px 0 rgba(11,14,19,.12))}
#ls-ghost{stroke:#0B0E13;stroke-width:26}
.ls-pop circle{fill:#FFFFFF}
/* les lieux desservis : des affiches de quai */
.ls-monus{position:relative;z-index:2;max-width:1100px;width:100%;margin:30px auto 0;padding:0}
.ls-lab{display:inline-block;margin:0 0 12px;padding:.46em 1.05em;border-radius:999px;color:#fff;letter-spacing:.14em;
  background:#0E3A6B;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px #0E3A6B,0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.ls-rail{gap:14px;padding:4px 4px 14px}
.ls-monu{width:160px;padding:34px 12px 12px;border-radius:14px;color:#0B0E13;background:#FFFDF7;
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;transform:rotate(calc((var(--r,0) * 1deg)))}
.ls-monu:nth-child(3n+1){--r:-1.2}.ls-monu:nth-child(3n+2){--r:.8}.ls-monu:nth-child(3n){--r:-.4}
.ls-monu::before{height:24px;background:var(--c);border-bottom:3px solid #0B0E13}
.ls-monu::after{content:"";position:absolute;left:50%;top:-6px;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:#E3051C;box-shadow:0 0 0 2px #0B0E13}
.ls-monu:hover{transform:translateY(-5px) rotate(0deg);box-shadow:0 0 0 3px #0B0E13,0 10px 0 3px #0B0E13}
.ls-monu-ico{width:48px;height:48px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--c) 18%,#fff);box-shadow:0 0 0 2px #0B0E13}
.ls-monu-ico svg{width:40px;height:40px}
.ls-monu b{font-size:.86rem}
.ls-vide{color:#5E5748}

/* v61 — le plan remplit l'affiche */
.lineshow .ls-stage{display:block}
.lineshow .ls-stage svg{display:block;width:100%;height:auto;max-height:none}
.lineshow .ls-pop text{paint-order:stroke;stroke:#FFFDF7;stroke-width:5px;stroke-linejoin:round}

/* ==========================================================================
   METRO RUNNER — LE GRAND VESTIAIRE
   Même famille que les cases de Metro City : tuiles sombres éclairées par
   leur couleur, dessins cernés, ombres franches. Et tout bouge.
   ========================================================================== */
.rvx{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--sp-6);padding:22px clamp(14px,2.4vw,26px) 26px;
  border-radius:28px;text-align:left;color:#fff;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 3px,transparent 3px 132px),
    linear-gradient(172deg,#1E2636,#10151D 70%);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.rvx>*{position:relative;z-index:1}
.rvx .rvx-vols{position:absolute;inset:0;z-index:0;pointer-events:none}
.rvx-vol{position:absolute;left:calc(var(--i) * 14.5% + 2%);top:100%;width:58px;opacity:.14;
  animation:rvxVol 16s linear infinite;animation-delay:calc(var(--i) * -2.3s)}
.rvx-vol svg{display:block;width:100%;height:auto}
@keyframes rvxVol{from{transform:translateY(0) rotate(-20deg)}to{transform:translateY(-1500px) rotate(340deg)}}

/* — l'en-tête — */
.rvx-tete{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 22px;align-items:center}
.rvx-emb{position:relative;width:112px;height:112px;border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#FF5A5A,#C8102E 70%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 8px #FFCE00,0 0 0 11px #0B0E13,0 9px 0 11px #0B0E13;animation:rvxFlotte 4s ease-in-out infinite}
.rvx-emb svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.rvx-emb-veste{transform-origin:47px 36px;animation:rvxBalance 2.8s ease-in-out infinite}
.rvx-emb-ticket{animation:rvxTicket 2.2s ease-in-out infinite}
@keyframes rvxFlotte{50%{transform:translateY(-5px) rotate(-3deg)}}
@keyframes rvxBalance{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes rvxTicket{0%,100%{transform:translate(0,0)}50%{transform:translate(-4px,-9px)}}
.rvx-sur{display:inline-block;padding:.42em .95em;border-radius:999px;font-family:var(--mono);font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;background:#E3051C;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.rvx-titre{margin:.34em 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.01em;color:#FFCE00;text-shadow:0 3px 0 #0B0E13}
.rvx-intro{max-width:62ch;margin:8px 0 0;font-size:.86rem;line-height:1.45;color:#B7C1CC}
.rvx-collec{display:flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:#DDE3E9}
.rvx-collec-j{flex:0 1 220px;height:12px;border-radius:999px;background:#0B0E13;box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.rvx-collec-j i{display:block;height:100%;border-radius:999px;
  background:repeating-linear-gradient(135deg,#FFCE00 0 8px,#F2B600 8px 16px);background-size:23px 23px;animation:rvxRayures 1s linear infinite}
@keyframes rvxRayures{to{background-position:23px 0}}
.rvx-collec b{font-family:var(--display);font-size:.9rem;letter-spacing:0;color:#FFCE00}
.rvx-bourse{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:8px 22px 8px 8px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,#FFE04A,#FFC400);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.rvx-bourse::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 48%,transparent 60%);
  background-size:260% 100%;animation:rvxBrille 3.4s ease-in-out infinite;pointer-events:none}
.rvx-bourse.bump{animation:rvxBump .5s var(--ease-back)}
@keyframes rvxBump{40%{transform:scale(1.08) rotate(-2deg)}}
.rvx-bourse-ico{display:block;width:74px;height:54px;animation:rvxBalance 3.2s ease-in-out infinite}
.rvx-bourse-ico svg{display:block;width:100%;height:100%}
.rvx-bourse-txt{display:flex;flex-direction:column;line-height:1}
.rvx-bourse b{font-family:var(--display);font-weight:800;font-size:2rem;font-variant-numeric:tabular-nums}
.rvx-bourse small{margin-top:4px;font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
@keyframes rvxBrille{0%{background-position:130% 0}60%,100%{background-position:-30% 0}}
@media (max-width:760px){
  .rvx-tete{grid-template-columns:auto minmax(0,1fr)}
  .rvx-emb{width:84px;height:84px}
  .rvx-bourse{grid-column:1/-1;justify-self:start}
}

/* — la cabine d'essayage : la course en direct — */
.rvx-cabine{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;margin:22px 0 20px}
.rvx-scene{position:relative;border-radius:22px;overflow:hidden;line-height:0;background:#221C28;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.rvx-scene-cv{display:block;width:100%;height:clamp(220px,30vw,330px)}
.rvx-direct{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:7px;padding:.42em .85em;border-radius:999px;
  line-height:1;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  background:#0B0E13;box-shadow:0 0 0 2px #fff}
.rvx-direct i{width:9px;height:9px;border-radius:50%;background:#E3051C;animation:rvxPouls 1.1s ease-in-out infinite}
@keyframes rvxPouls{50%{transform:scale(.55);opacity:.5}}
.rvx-essai{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;line-height:1.05;
  padding:.5em .9em;border-radius:14px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  opacity:0;transform:translateY(-30px) scale(.8);transition:transform .3s var(--ease-back),opacity .2s}
.rvx-essai.on{opacity:1;transform:none}
.rvx-essai small{font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.rvx-essai b{font-family:var(--display);font-weight:800;font-size:.95rem}
.rvx-porte{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:22px;
  background:radial-gradient(120% 80% at 100% 0%,rgba(62,143,212,.28),transparent 60%),linear-gradient(165deg,#18212D,#0E141D);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.rvx-porte-t{align-self:flex-start;padding:.36em .8em;border-radius:999px;font-family:var(--mono);font-size:.58rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#0B0E13;background:#F5F2EA;box-shadow:0 0 0 2px #0B0E13}
.rvx-porte-l{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;padding:6px 8px 6px 6px;border-radius:14px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08);animation:mcInfoIn .45s var(--ease-back) backwards;
  animation-delay:calc(var(--i)*60ms)}
.rvx-porte-ico{display:grid;place-items:center;width:48px;height:40px;border-radius:10px;background:#F5F2EA;box-shadow:0 0 0 2px #0B0E13}
.rvx-porte-ico svg{width:40px;height:32px}
.rvx-porte-l:nth-child(odd) .rvx-porte-ico svg{animation:rvxFlotte 3s ease-in-out infinite}
.rvx-porte-l:nth-child(even) .rvx-porte-ico svg{animation:rvxFlotte 3s ease-in-out infinite .8s}
.rvx-porte-l small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:#8FA0B3}
.rvx-porte-l b{display:block;font-size:.84rem;line-height:1.25;color:#fff}
@media (max-width:860px){ .rvx-cabine{grid-template-columns:1fr} }

/* — les onglets dessinés — */
.rvx-onglets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.rvx-onglet{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px 12px;border:0;border-radius:18px;
  color:#E4E9EE;cursor:pointer;
  background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,var(--a) 40%,transparent),transparent 60%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 42%,#131B26),#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transition:transform .18s var(--ease-back),box-shadow .18s;
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*50ms)}
.rvx-onglet:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 7px 0 2.5px #0B0E13}
.rvx-onglet.on{color:#0B0E13;background:linear-gradient(170deg,var(--a),color-mix(in srgb,var(--a) 60%,var(--b)));
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.rvx-onglet-art{display:block;width:70px;height:56px;pointer-events:none}
.rvx-onglet-art svg{display:block;width:100%;height:100%;overflow:visible}
.rvx-onglet.on .rvx-onglet-art{animation:rvxFlotte 2.4s ease-in-out infinite}
.rvx-onglet:hover .rvx-onglet-art{animation:mcbHop .55s var(--ease-back)}
.rvx-onglet-t{font-family:var(--display);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;text-align:center;line-height:1.1}
.rvx-onglet-n{padding:.2em .6em;border-radius:999px;font-family:var(--mono);font-size:.6rem;font-weight:600;
  background:rgba(11,14,19,.55);color:#fff}
@media (max-width:640px){ .rvx-onglets{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* — les cases — */
.rvx-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(222px,1fr));gap:18px}
.rvx-groupe{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:6px;font-family:var(--display);font-weight:800;
  font-size:1rem;text-transform:uppercase;color:#fff}
.rvx-groupe::after{content:"";flex:1;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 10px,transparent 10px 18px)}
.rvx-groupe-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#F5F2EA;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.rvx-groupe-ico canvas{width:38px;height:38px}
.rvx-c{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:20px;cursor:pointer;outline:none;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--a) 38%,transparent),transparent 60%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 45%,#131B26),#0E141D 76%);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transition:transform .2s var(--ease-back),box-shadow .2s;
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(min(var(--i),14)*40ms)}
.rvx-c:hover,.rvx-c:focus-visible{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 0 0 2.5px #0B0E13,0 9px 0 2.5px #0B0E13}
.rvx-c:focus-visible{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #fff,0 9px 0 6px #0B0E13}
.rvx-vis{position:relative;margin:10px 10px 0;border-radius:14px;overflow:hidden;line-height:0;background:#0E141D;
  box-shadow:0 0 0 2.5px #0B0E13}
.rvx-cv{display:block;width:100%;height:auto}
.rvx-rar{position:absolute;left:8px;top:8px;padding:.34em .7em;border-radius:999px;line-height:1;font-family:var(--mono);font-size:.56rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0B0E13;background:var(--a);box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.rvx-on{position:absolute;right:8px;top:8px;padding:.34em .7em .34em 1.7em;border-radius:999px;line-height:1;font-size:.66rem;font-weight:800;
  color:#0B0E13;background:#3ED07A 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-7' fill='none' stroke='%230B0E13' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") .45em center/.95em no-repeat;
  box-shadow:0 0 0 2px #0B0E13}
.rvx-corps{display:flex;flex-direction:column;flex:1;padding:10px 14px 14px}
.rvx-nom{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15;color:#fff}
.rvx-desc{margin-top:4px;font-size:.74rem;line-height:1.4;color:#AFBBC8}
.rvx-pied{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.rvx-prix{display:inline-flex;align-items:center;gap:6px;padding:.2em .85em .2em .25em;border-radius:999px;font-family:var(--display);
  font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.rvx-prix-ico{display:block;width:34px;height:25px}
.rvx-prix-ico svg{display:block;width:100%;height:100%}
.rvx-prix.non{color:#C9D2DC;background:#2A3442}
.rvx-c:hover .rvx-prix:not(.non) .rvx-prix-ico{animation:rvxBalance .8s ease-in-out infinite}
.rvx-etat{display:inline-block;padding:.36em .95em;border-radius:999px;font-size:.76rem;font-weight:800;color:#0B0E13;background:#F5F2EA;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.rvx-etat--on{background:#3ED07A}
.rvx-acheter{display:inline-flex;align-items:center;gap:6px;padding:.3em .4em .3em 1em;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:.9rem;color:#fff;background:#E3051C;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:rvxAppel 1.2s ease-in-out infinite}
.rvx-acheter .rvx-prix{box-shadow:0 0 0 2px #0B0E13}
.rvx-acheter:hover{transform:translateY(-2px)}
@keyframes rvxAppel{50%{transform:scale(1.05)}}
.rvx-manque{flex:1;min-width:0}
.rvx-manque small{display:block;margin-bottom:5px;font-size:.72rem;font-weight:700;color:#FF8A8A}
.rvx-manque-j{height:10px;border-radius:999px;background:#0B0E13;box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.rvx-manque-j i{display:block;height:100%;border-radius:999px;background:var(--a)}
.rvx-c.on{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #3ED07A,0 5px 0 6px #0B0E13}
.rvx-c.sel{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 5px 0 6px #0B0E13;transform:translateY(-4px)}

/* — les raretés — */
.rvx-c--rare .rvx-vis,.rvx-c--epique .rvx-vis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--a),0 0 0 7px #0B0E13}
.rvx-c--rare .rvx-vis,.rvx-c--epique .rvx-vis,.rvx-c--legendaire .rvx-vis,.rvx-c--mythique .rvx-vis{margin:13px 13px 0}
.rvx-c--epique .rvx-vis::before{content:"";position:absolute;right:12px;bottom:12px;z-index:2;width:18px;height:18px;background:#fff;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:rvxScintille 2s ease-in-out infinite}
@keyframes rvxScintille{0%,100%{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1) rotate(90deg);opacity:1}}
.rvx-c--legendaire{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFD23E,0 0 0 8.5px #0B0E13,0 7px 0 8.5px #0B0E13}
.rvx-c--legendaire .rvx-vis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFD23E,0 0 0 7px #0B0E13}
.rvx-vis::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.rvx-c--legendaire .rvx-vis::after,.rvx-c--mythique .rvx-vis::after{
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 48%,transparent 58%);background-size:260% 100%;
  animation:rvxBrille 3s ease-in-out infinite}
.rvx-c--legendaire .rvx-nom{color:#FFD23E}
/* la pièce mythique : cadre mystique qui tourne, runes en orbite */
.rvx-c--mythique{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch;
  overflow:hidden;background:#0C0826;
  box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.rvx-c--mythique::before{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:200%;aspect-ratio:1;
  background:conic-gradient(#FF5FD2,#7B61FF,#29D8F0,#FFD23E,#FF5FD2,#7B61FF,#29D8F0,#FFD23E,#FF5FD2);
  transform:translate(-50%,-50%);animation:rvxTourne 5s linear infinite}
.rvx-c--mythique::after{content:"";position:absolute;inset:6px;z-index:-1;border-radius:15px;
  background:radial-gradient(90% 70% at 50% 0%,rgba(123,97,255,.45),transparent 65%),
    radial-gradient(circle,rgba(255,255,255,.75) 0 1px,transparent 1.6px) 0 0/38px 38px,
    radial-gradient(circle,rgba(255,210,62,.7) 0 1.2px,transparent 1.8px) 17px 23px/61px 61px,
    linear-gradient(170deg,#241457,#0C0826 70%);box-shadow:0 0 0 2.5px #0B0E13}
.rvx-c--mythique .rvx-vis{margin:16px}
.rvx-c--mythique .rvx-corps{justify-content:center;padding:22px 24px 22px 6px}
.rvx-c--mythique .rvx-pied{margin-top:16px}
.rvx-c--mythique .rvx-prix{font-size:1.25rem}
@keyframes rvxTourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
.rvx-c--mythique:hover{transform:translateY(-6px)}
.rvx-c--mythique .rvx-vis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFD23E,0 0 0 7px #0B0E13}
.rvx-c--mythique .rvx-rar{color:#fff;background:linear-gradient(90deg,#FF5FD2,#7B61FF,#29D8F0);background-size:200% 100%;animation:rvxRayures 2s linear infinite}
.rvx-c--mythique .rvx-nom{font-size:1.35rem;background:linear-gradient(90deg,#FFD23E,#FF5FD2,#29D8F0,#FFD23E);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:rvxArc 4s linear infinite;
  filter:drop-shadow(0 2px 0 #0B0E13)}
@keyframes rvxArc{to{background-position:300% 0}}
.rvx-c--mythique .rvx-desc{color:#D6CCFF;font-size:.8rem}
.rvx-runes{position:absolute;left:50%;top:50%;z-index:3;width:0;height:0;pointer-events:none;transform:scaleY(.6)}
.rvx-runes i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:#FFD23E;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:rvxRune 9s linear infinite;animation-delay:calc(var(--k) * -1.125s)}
.rvx-runes i:nth-child(even){background:#29D8F0}
@keyframes rvxRune{
  from{transform:rotate(0deg) translateX(46cqw) rotate(0deg) scale(.7)}
  50%{transform:rotate(180deg) translateX(46cqw) rotate(-180deg) scale(1.2)}
  to{transform:rotate(360deg) translateX(46cqw) rotate(-360deg) scale(.7)}}
.rvx-c--mythique .rvx-vis{container-type:inline-size}
@media (max-width:640px){ .rvx-c--mythique{grid-template-columns:1fr} .rvx-c--mythique .rvx-corps{padding:4px 18px 18px} }

/* l'achat : la section entière saute */
.rvx.rvx-fete{animation:rvxFete .7s var(--ease-back)}
@keyframes rvxFete{30%{transform:translateY(-6px) scale(1.01)}}
@media (prefers-reduced-motion:reduce){
  .rvx *,.rvx::before,.rvx::after,.rvx *::before,.rvx *::after{animation:none!important}
}

/* ==========================================================================
   TÉLÉPHONE — l'écran suit la résolution de l'appareil
   --------------------------------------------------------------------------
   On pouvait attraper la page et la faire glisser sur le côté : un élément
   plus large que l'écran suffisait. La page est désormais figée
   horizontalement (le défilement vertical, lui, ne change pas), et les
   terrains de jeu se mesurent en dvh, la hauteur réellement visible une fois
   les barres du navigateur déduites.
   ========================================================================== */
html{overflow-x:clip}
body{overflow-x:clip;max-width:100%;overscroll-behavior-x:none}
.view,.wrap,.stage,main{max-width:100%}
img,canvas{max-width:100%}
.snk-cv{height:min(62dvh,560px)}
.rn-scene{height:clamp(360px,62dvh,560px)}
@media (max-width:760px){
  /* l'en-tête tient dans l'écran : il passe à la ligne au lieu de déborder */
  .top{flex-wrap:wrap;row-gap:8px}
  .top-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;min-width:0}
  .top-actions .btn{padding:.45em .85em;font-size:.8rem;gap:6px}
  .snk-cv{height:min(56dvh,520px)}
  .rn-scene{height:clamp(320px,56dvh,520px)}
  /* le terrain du défilé prend toute la largeur de l'écran */
  .playfield{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;border-radius:0}
}
@media (max-width:420px){ .top-actions .btn{font-size:.74rem;padding:.42em .72em} }
/* la carte de Metro City garde sa teinte de terre jusqu'au bord */
.mc-mapwrap{background:#C5B791}
.mc-mapwrap .mc-sky{background:radial-gradient(120% 70% at 50% -12%,rgba(255,255,255,.12),transparent 58%)}
/* — « D'où viennent vos recettes » : en-tête de gare — */
.mcrx-tete{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;margin:2px 0 14px;padding:14px 16px;
  border-radius:20px;color:#0B0E13;background:linear-gradient(180deg,#FFE9A8,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcrx-tete-ico{display:block;width:70px;height:50px}
.mcrx-tete-ico svg{display:block;width:100%;height:100%}
.mcrx-tete-t small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.mcrx-tete-t b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.05;font-variant-numeric:tabular-nums}
.mcrx-tete-t em{display:block;margin-top:2px;font-style:normal;font-size:.76rem;font-weight:700;color:#5A4A12}
.mcrx-tete-c{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mcrx-tete-c>div{padding:6px 10px;border-radius:12px;background:#FFFDF4;box-shadow:0 0 0 2px #0B0E13}
.mcrx-tete-c small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#5A5F68}
.mcrx-tete-c b{font-family:var(--display);font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums}
.mcx-boite .panneau.mcrx-sec{margin:20px 0 10px;font-size:.95rem}
/* — MétroDrop : le quai d'accueil — */
.mdh-hero{position:relative;height:clamp(130px,20vw,210px);margin:0 0 16px;border-radius:24px;overflow:hidden;line-height:0;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.mdh-hero svg{display:block;width:100%;height:100%}
.mdh-hero-rame{animation:mdhHeroRame 11s linear infinite}
@keyframes mdhHeroRame{from{transform:translateX(-560px)}to{transform:translateX(1220px)}}
.mdh-hero-pax{animation:mdhHeroPax 2.6s ease-in-out infinite;animation-delay:var(--d,0s);transform-box:fill-box;transform-origin:50% 100%}
@keyframes mdhHeroPax{50%{transform:translateY(-6px)}}
.mdh-hero-lampes{animation:mdhHeroLampe 3.2s ease-in-out infinite}
@keyframes mdhHeroLampe{50%{opacity:.82}}
@media (prefers-reduced-motion:reduce){ .mdh-hero-rame,.mdh-hero-pax,.mdh-hero-lampes{animation:none} }
/* — Snake : la bourse du dépôt — */
.sk-bourse{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 7px;border-radius:999px;color:#0B0E13;
  background:linear-gradient(180deg,#FFE04A,#FFC400);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.sk-bourse-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0B0E13}
.sk-bourse-ico svg{display:block;width:24px;height:24px}
.sk-bourse b{font-family:var(--display);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.sk-bourse small{font-family:var(--mono);font-size:.58rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.sk-verrou.sk-achat{color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.sk-t.lock{opacity:1;filter:none}
.sk-t.lock .sk-t-vis{filter:saturate(.35) brightness(.86)}
.snk-jetons{margin:10px 0 0;text-align:center;font-family:var(--display);font-weight:800;color:#FFCE00}
/* — Snake : le bandeau du dépôt — */
.snk-hero{position:relative;height:clamp(120px,18vw,200px);margin:0 0 16px;border-radius:24px;overflow:hidden;line-height:0;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.snk-hero svg{display:block;width:100%;height:100%}
.snk-hero-rame1{animation:snkHeroA 16s linear infinite}
.snk-hero-rame2{animation:snkHeroB 13s linear infinite}
@keyframes snkHeroA{from{transform:translateX(-380px)}to{transform:translateX(1240px)}}
@keyframes snkHeroB{from{transform:translateX(1240px)}to{transform:translateX(-380px)}}
.snk-hero-pont{animation:snkHeroPont 9s ease-in-out infinite alternate}
@keyframes snkHeroPont{from{transform:translateX(-160px)}to{transform:translateX(200px)}}
.snk-hero-lampes{animation:snkHeroLampe 3.6s ease-in-out infinite}
@keyframes snkHeroLampe{50%{opacity:.78}}
@media (prefers-reduced-motion:reduce){ .snk-hero-rame1,.snk-hero-rame2,.snk-hero-pont,.snk-hero-lampes{animation:none} }
/* — Metro City : les améliorations de train, façon cases d'information — */
.mc-lx .mc-lx-ups-tete{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:var(--sp-5) 0 var(--sp-4);padding:10px 16px;border-radius:18px;color:#fff;
  background:linear-gradient(170deg,var(--c,#0064B0),color-mix(in srgb,var(--c,#0064B0) 55%,#0B0E13));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mc-lx .mc-lx-ups-tete b{font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase;letter-spacing:.01em}
.mc-lx .mc-lx-ups-tete span{padding:.34em .9em;border-radius:999px;font-family:var(--display);font-weight:800;color:#0B0E13;
  background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.mc-lx .mc-lx-upgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--sp-4)}
.mc-lx .mc-lx-up2{min-height:250px}
.mc-lx .mc-lx-up2 .mc-info-art{width:126px;height:100px}
.mc-lx .mc-lx-up2:hover .mc-info-art{animation:mcbHop .55s var(--ease-back)}
.mc-lx .mc-lx-up2 .mc-info-val{font-size:1.1rem}
.mc-lx .mc-lx-up2 .mcb-note{color:#FFD23E}
.mc-lx .mc-lx-up2.mcb-acquis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #3ED07A,0 5px 0 5.5px #0B0E13}
/* — Metro City : la révélation d'un monument d'or — */
.mc-or-vis2{display:block;padding:0;overflow:hidden;border-radius:16px;line-height:0;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFD23E,0 4px 0 5px #0B0E13}
.mc-or-vis2 .mc-or-cv{display:block;width:100%;height:auto}
.mc-or-vis2:not(.erige) .mc-or-cv{filter:grayscale(.55) brightness(.78) contrast(1.05)}
.mc-orx-modal .box{max-width:min(760px,96vw);padding:0;overflow:hidden;border:0;
  background:radial-gradient(120% 90% at 50% -10%,#4A2FA0 0%,#2A1660 42%,#120B28 78%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 9px #FFD23E,0 0 0 12px #0B0E13,
    0 0 90px -10px rgba(255,210,62,.6),0 50px 110px rgba(0,0,0,.75)}
.mcorx{position:relative;isolation:isolate;overflow:hidden;padding:26px 22px 24px;text-align:center;color:#F6EFD8;
  opacity:0;transform:scale(.92);transition:opacity .45s var(--ease-std),transform .6s var(--ease-back)}
.mcorx.on{opacity:1;transform:none}
/* l'éclat du dévoilement : un flash unique, à l'ouverture */
.mcorx-eclat{position:absolute;left:50%;top:38%;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:#FFF6C8;box-shadow:0 0 60px 30px rgba(255,246,200,.85);pointer-events:none;
  animation:mcorxEclat 1.1s var(--ease-out,ease-out) forwards}
@keyframes mcorxEclat{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(26)}}
.mcorx-ciel{position:absolute;inset:-30%;z-index:-1;pointer-events:none}
.mcorx-rayons{position:absolute;left:50%;top:6%;width:170%;aspect-ratio:1;transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(255,210,62,.26) 0 5deg,transparent 5deg 22deg);
  animation:mcorxTourne 30s linear infinite;mask-image:radial-gradient(circle,#000 30%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%)}
@keyframes mcorxTourne{to{transform:translateX(-50%) rotate(360deg)}}
.mcorx-poussiere{position:absolute;left:var(--x);bottom:-10px;width:6px;height:6px;border-radius:50%;background:#FFD23E;
  box-shadow:0 0 10px 2px rgba(255,210,62,.7);opacity:.85;animation:mcorxMonte 8s linear infinite;animation-delay:var(--d)}
@keyframes mcorxMonte{to{transform:translateY(-760px) scale(.25);opacity:0}}
.mcorx-rang{display:inline-block;padding:.45em 1.3em;border-radius:999px;font-family:var(--mono);font-size:.62rem;
  font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:#2A1C00;
  background:linear-gradient(90deg,#FFE88A,#FFD23E,#E6B53A,#FFE88A);background-size:220% 100%;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:rvxArc 5s linear infinite}
.mcorx-cadre{position:relative;margin:20px auto 0;width:min(520px,88%);padding:16px;border-radius:26px;
  background:linear-gradient(145deg,#FFF3C0,#E6B53A 38%,#8A6200 62%,#FFE88A 88%);
  box-shadow:0 0 0 3px #0B0E13,0 14px 0 3px #0B0E13,0 40px 80px -24px rgba(255,210,62,.65);
  animation:mcorxPose .9s var(--ease-back) both .12s}
@keyframes mcorxPose{from{transform:translateY(-26px) scale(.9) rotate(-2deg)}to{transform:none}}
.mcorx-coin{position:absolute;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#FFF3C0,#C99A17);
  box-shadow:0 0 0 2.5px #0B0E13}
.mcorx-coin--hg{left:-9px;top:-9px}.mcorx-coin--hd{right:-9px;top:-9px}
.mcorx-coin--bg{left:-9px;bottom:-9px}.mcorx-coin--bd{right:-9px;bottom:-9px}
.mcorx-vis{position:relative;overflow:hidden;border-radius:16px;line-height:0;box-shadow:0 0 0 3px #0B0E13}
.mcorx-cv{display:block;width:100%;height:auto}
.mcorx-brille{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.6) 47%,transparent 58%);
  background-size:280% 100%;animation:rvxBrille 3.4s ease-in-out infinite}
.mcorx-nom{margin:22px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.05;
  background:linear-gradient(90deg,#FFE88A,#FFD23E,#FFF6C8,#E6B53A,#FFE88A);background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #0B0E13);
  animation:rvxArc 6s linear infinite}
.mcorx-desc{max-width:52ch;margin:10px auto 0;font-size:.92rem;line-height:1.55;color:#DCD2B8}
.mcorx-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:20px auto 0;max-width:640px}
.mcorx-chip{padding:9px 13px;border-radius:15px;text-align:left;
  background:linear-gradient(170deg,rgba(255,210,62,.16),rgba(255,210,62,.05));
  box-shadow:inset 0 0 0 1.5px rgba(255,210,62,.55),0 4px 0 rgba(0,0,0,.35)}
.mcorx-chip small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:#C9B27A}
.mcorx-chip b{display:block;margin-top:3px;font-size:.95rem;color:#FFF6E0}
.mcorx-plaque{display:inline-block;margin:20px auto 0;padding:11px 20px;border-radius:14px;color:#2A1C00;
  background:linear-gradient(180deg,#FFF3C0,#E6B53A);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcorx-plaque span{display:block;font-family:var(--mono);font-size:.54rem;letter-spacing:.2em;text-transform:uppercase}
.mcorx-plaque b{display:block;margin-top:3px;font-family:var(--display);font-size:1rem}
.mcorx-actions{justify-content:center;margin-top:var(--sp-5)}
@media (prefers-reduced-motion:reduce){ .mcorx-rayons,.mcorx-poussiere,.mcorx-brille,.mcorx-nom{animation:none} }
/* — Solitaire : la carte qui s'envole vers sa ligne — */
.so-envol{box-shadow:0 0 0 2.5px #0B0E13,0 14px 26px rgba(0,0,0,.45)!important;will-change:transform}
.so-etincelle{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;
  background:#FFE27A;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:soEtinc .5s var(--ease-back) forwards}
@keyframes soEtinc{from{transform:scale(.2) rotate(0);opacity:1}to{transform:scale(2.4) rotate(140deg);opacity:0}}
.so-stat-ico{display:block;width:22px;height:22px;margin:0 auto 2px}
.so-stat-ico svg{display:block;width:100%;height:100%}
.so-stat--combo.chaud .so-stat-ico{animation:mcbHop .6s var(--ease-back) infinite}
/* ==========================================================================
   ONGLET FRANCE — LES CARTES PASSENT EN CARTOON
   Mer claire, terres en aplat, contours noirs francs, noms cernés de blanc :
   la même facture que le reste du site, sans tomber dans l'enfantin.
   ========================================================================== */
.fr-carte{border-radius:24px;overflow:hidden;background:#8FD4EA;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.fr-svg .fr-reg{stroke:#0B0E13;stroke-width:2.6;stroke-linejoin:round}
.fr-svg .fr-reg:hover{filter:brightness(1.08)}
.fr-svg .fr-deps path,.fr-svg .fr-dep{stroke:rgba(11,14,19,.5);stroke-width:1.1;stroke-linejoin:round}
.fr-svg text{font-family:var(--display);font-weight:800;fill:#0B0E13;
  paint-order:stroke;stroke:#FFFDF4;stroke-width:4px;stroke-linejoin:round}
.fr-svg .fr-v circle:first-child{fill:#0B0E13}
.fr-svg .fr-e-fond{stroke:#2E86B8}
.fr-svg .fr-e-riv:hover .fr-e-fond{stroke:#1B5E86}
.fr-svg .fr-rose circle{fill:#FFFDF4;stroke:#0B0E13;stroke-width:2.6}
.fr-svg .fr-rose-n{fill:#0B0E13;stroke:none}
.fr-svg .fr-echelle rect{fill:#0B0E13;opacity:1}
.fr-svg .fr-m-vagues path,.fr-svg .fr-w-vagues path{stroke:#FFFFFF;opacity:.5}
.fr-svg .fr-m-nuages ellipse{fill:#FFFFFF;opacity:.5}
.fr-svg .fr-e-pastille{fill:#FFFDF4;stroke:#0B0E13;stroke-width:2.6}
.fr-svg .fr-d-foret path,.fr-svg .fr-d-mont path{stroke:#0B0E13;stroke-width:1.6;stroke-linejoin:round}
/* — Accueil : le classement de fréquentation, en voies ferrées — */
.rkx{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:var(--sp-4);max-width:none}
.rkx-l{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:10px 14px 10px 10px;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut,#FBF6E9),var(--cr-bas,#EFE7D4));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(min(var(--n),12)*45ms)}
.rkx-l:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.rkx-pos{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-family:var(--mono);
  font-size:.72rem;font-weight:700;color:#5A5F68;background:#FFFDF4;box-shadow:0 0 0 2px #0B0E13}
.rkx-l--1 .rkx-pos{color:#7A4A00;background:linear-gradient(180deg,#FFE88A,#FFC400)}
.rkx-l--2 .rkx-pos{color:#3A4250;background:linear-gradient(180deg,#F2F4F7,#C9CFD6)}
.rkx-l--3 .rkx-pos{color:#5A3218;background:linear-gradient(180deg,#F0BC8A,#CE8A4E)}
.rkx-l--top{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c),0 5px 0 5px #0B0E13}
.rkx-past{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1rem;box-shadow:0 0 0 2.5px #0B0E13}
.rkx-corps{min-width:0}
.rkx-corps b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.1}
.rkx-corps small{display:block;margin-top:4px;font-size:.68rem;color:#5A5F68;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rkx-voie{position:relative;height:16px;margin:8px 0 2px;border-radius:8px;background:#D5CBB4;
  box-shadow:inset 0 0 0 2px #0B0E13;
  background-image:repeating-linear-gradient(90deg,rgba(11,14,19,.18) 0 3px,transparent 3px 12px)}
.rkx-rempli{display:block;height:100%;border-radius:8px;background:var(--c);
  box-shadow:inset 0 0 0 2px #0B0E13;transition:width 1.1s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.rkx-rame{position:absolute;top:-12px;width:44px;margin-left:-30px;transition:left 1.1s var(--ease-out,cubic-bezier(.2,.8,.2,1));
  animation:rkxBob 2.4s ease-in-out infinite}
.rkx-rame svg{display:block;width:100%;height:auto}
@keyframes rkxBob{50%{transform:translateY(-2px)}}
.rkx-val{text-align:right}
.rkx-val b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem;font-variant-numeric:tabular-nums}
.rkx-val small{display:block;font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#5A5F68}
@media (prefers-reduced-motion:reduce){ .rkx-rame{animation:none} .rkx-rempli,.rkx-rame{transition:none} }
/* ==========================================================================
   CRÉEZ VOTRE LIGNE — L'ATELIER, REFAIT
   Bandeau dessiné, panneaux de quai pour les étapes, cartes crème cernées
   de noir, plan encadré comme une affiche : la facture de Metro City et de
   la fiche « analyser sa ligne ».
   ========================================================================== */
.ap--ligne .lph{position:relative;isolation:isolate;overflow:hidden;margin:0 0 18px;border-radius:26px;
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.ap--ligne .lph-fond{position:absolute;inset:0;z-index:-1;line-height:0}
.ap--ligne .lph-fond svg{display:block;width:100%;height:100%}
.ap--ligne .lph-txt{position:relative;padding:22px 24px 26px;max-width:min(640px,72%)}
.ap--ligne .lph-txt::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(251,246,233,.94) 0 62%,rgba(251,246,233,0))}
.ap--ligne .lph-sur{display:inline-block;padding:.42em .95em;border-radius:999px;font-family:var(--mono);font-size:.58rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:#1B4E9B;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.ap--ligne .lph-tete{display:flex;align-items:center;gap:12px;margin:12px 0 8px}
.ap--ligne .lph-past{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:#fff;background:var(--c,#1B4E9B);
  box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13}
.ap--ligne .lph-nom{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.4vw,2rem);color:#0B0E13;
  text-shadow:0 2px 0 rgba(255,255,255,.7)}
.ap--ligne .lph-txt p{margin:0;max-width:56ch;font-size:.86rem;line-height:1.5;color:#3A4450}
.ap--ligne .lph-rame{animation:lphRame 6s ease-in-out infinite}
@keyframes lphRame{50%{transform:translate(846px,90px)}}
.ap--ligne .lph-pont{animation:lphPont 7s ease-in-out infinite alternate}
@keyframes lphPont{from{transform:translate(860px,18px)}to{transform:translate(900px,18px)}}
.ap--ligne .lph-e{animation:lphEt 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*.18s);transform-origin:center}
@keyframes lphEt{0%,100%{opacity:0;transform:translateY(0) scale(.4)}40%{opacity:1;transform:translateY(-10px) scale(1)}}
.ap--ligne .lph-trace{stroke-dasharray:1400;stroke-dashoffset:1400;animation:lphTrace 3.2s var(--ease-out,ease) .2s forwards}
@keyframes lphTrace{to{stroke-dashoffset:0}}
@media (max-width:760px){ .ap--ligne .lph-txt{max-width:100%;padding:16px} }
@media (prefers-reduced-motion:reduce){
  .ap--ligne .lph-rame,.ap--ligne .lph-pont,.ap--ligne .lph-e,.ap--ligne .lph-trace{animation:none}
  .ap--ligne .lph-trace{stroke-dashoffset:0}
}
/* les étapes : des panneaux de quai */
.ap--ligne .panneau.lp-sec{margin:22px 0 12px}
/* les blocs : cartes crème cernées */
.ap--ligne :is(.lp-ident,.lp-saisie,.lp-pupitre,.lp-chantier){padding:14px 16px;border-radius:20px;color:#0B0E13;
  background:linear-gradient(180deg,var(--cr-haut,#FBF6E9),var(--cr-bas,#EFE7D4));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ap--ligne .lp-ident{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ap--ligne .lp-ident label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:#5A5F68}
.ap--ligne :is(.lp-nom,.lp-num,.lp-champ){padding:.5em .8em;border:0;border-radius:12px;font-family:var(--display);
  font-weight:800;color:#0B0E13;background:#FFFDF4;box-shadow:0 0 0 2.5px #0B0E13}
.ap--ligne .lp-champ{width:100%;font-size:1rem}
.ap--ligne .lp-pal-c{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2.5px #0B0E13}
.ap--ligne .lp-pal-c.on{transform:scale(1.14);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00}
.ap--ligne .lp-saisie-t b{font-family:var(--display);font-size:1.05rem}
.ap--ligne .lp-saisie-t small{color:#5A5F68}
.ap--ligne .lp-plan{border-radius:22px;overflow:hidden;background:#F7F2E4;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 8px var(--c,#1B4E9B),0 0 0 11px #0B0E13,0 10px 0 11px rgba(11,14,19,.25)}
.ap--ligne .lp-o{color:#0B0E13;background:#FFFDF4;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 #0B0E13}
.ap--ligne .lp-o.on{background:#FFCE00}
.ap--ligne :is(.lp-compteur,.lp-legende span){color:#0B0E13;background:#FFFDF4;border-radius:999px;
  box-shadow:0 0 0 2px #0B0E13}
.ap--ligne .lp-liste .sortrow{border-radius:14px;color:#0B0E13;background:#FFFDF4;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.ap--ligne .lp-liste .sortrow:hover{transform:translateY(-2px)}
.ap--ligne .lp-pupitre .hint{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#5A5F68}
/* — Pousse-tickets : la carte du jeton mystère — */
.pt-carte{position:absolute;left:50%;top:46%;z-index:5;width:min(64%,190px);aspect-ratio:3/4;margin-left:min(-32%,-95px);
  perspective:900px;pointer-events:none;opacity:0;transform:translateY(16px) scale(.86);
  transition:opacity .25s var(--ease-std),transform .45s var(--ease-back)}
.pt-carte.on{opacity:1;transform:translateY(-6%) scale(1)}
.pt-carte.sort{opacity:0;transform:translateY(-26%) scale(.9)}
.pt-carte-f{position:absolute;inset:0;display:grid;place-content:center;gap:6px;text-align:center;border-radius:18px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 0 0 3px #0B0E13,0 10px 0 3px #0B0E13,0 24px 40px -18px rgba(0,0,0,.8);
  transition:transform .55s var(--ease-back)}
.pt-carte-dos{background:linear-gradient(150deg,#5A2FA0,#2A1660);color:#FFD23E;
  font-family:var(--display);font-weight:900;font-size:3.2rem;transform:rotateY(0deg)}
.pt-carte.on .pt-carte-dos{transform:rotateY(180deg)}
.pt-carte-face{transform:rotateY(-180deg);color:#0B0E13;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--a) 75%,#fff),var(--a))}
.pt-carte.on .pt-carte-face{transform:rotateY(0deg)}
.pt-rar{font-family:var(--mono);font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.pt-mult{font-family:var(--display);font-weight:900;font-size:2.4rem;line-height:1;
  text-shadow:0 3px 0 rgba(255,255,255,.55)}
.pt-gain{font-family:var(--display);font-weight:800;font-size:1rem}
.pt-carte--legendaire .pt-carte-face,.pt-carte--mythique .pt-carte-face{
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFD23E,0 10px 0 7px #0B0E13,0 0 60px -6px rgba(255,210,62,.8)}
.pt-carte--mythique .pt-carte-face{color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#FF5FD2,#2A0F5C 75%)}
.pt-carte--mythique .pt-mult{text-shadow:0 3px 0 rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){ .pt-carte,.pt-carte-f{transition:none} }
/* — Casino : le choix de la caisse — */
.vl-devise{display:inline-flex;gap:6px;margin:6px 0 4px}
.vl-devise-b{display:inline-flex;align-items:center;gap:6px;padding:.32em .85em;border:0;border-radius:999px;cursor:pointer;
  font-weight:800;font-size:.8rem;color:#0B0E13;background:#EFE7D4;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.vl-devise-b.on{color:#0B0E13;background:#FFCE00;transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13,0 1px 0 #0B0E13}
.vl-devise-b i{font-style:normal}
/* — Le pousse-tickets refait — */
.vl-pousse2{display:flex;flex-direction:column;gap:10px}
.vl-pousse2-scene{position:relative;width:100%;max-width:360px;margin:0 auto;line-height:0}
.vl-pousse2-cv{display:block;width:100%;border-radius:20px;cursor:pointer;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.vl-pousse2-lab{margin:8px 0 10px;font-size:.78rem;line-height:1.45;color:#5A5F68}
.vl-pousse2-voies{display:flex;gap:6px;margin:4px 0 8px}
.vl-pv{flex:1;padding:.42em 0;border:0;border-radius:12px;cursor:pointer;font-family:var(--display);font-weight:800;
  color:#0B0E13;background:#EFE7D4;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.vl-pv.on{background:#FFCE00;transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13,0 1px 0 #0B0E13}
/* — Tabac : les nouvelles formes de tickets et la vitrine dessinée — */
.vl-ticket .vl-zb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.vl-ticket .vl-tc--mt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.vl-ticket .vl-tc--mt b{font-family:var(--display);font-weight:800;font-size:1rem}
.vl-ticket .vl-ze{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;min-height:190px}
.vl-ticket .vl-ze-cle{grid-area:2/2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-radius:12px;background:#FFE58A;box-shadow:0 0 0 2.5px #0B0E13}
.vl-ticket .vl-ze-cle small{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase}
.vl-ticket .vl-ze-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.vl-ticket .vl-ze-b1{grid-area:1/2}.vl-ticket .vl-ze-b2{grid-area:2/3}.vl-ticket .vl-ze-b3{grid-area:3/3}
.vl-ticket .vl-ze-b4{grid-area:3/1}.vl-ticket .vl-ze-b5{grid-area:2/1}
.vl-vt-svg{display:block;width:100%;max-width:170px;height:auto;margin:0 auto 8px;
  filter:drop-shadow(0 4px 0 rgba(11,14,19,.25))}
.vl-vt:hover .vl-vt-svg{animation:mcbHop .55s var(--ease-back)}

/* ==========================================================================
   V95 — LE DÉPÔT DU SNAKE, DANS LA DIRECTION DE METRO CITY
   --------------------------------------------------------------------------
   L'écran empilait des panneaux crème : il passe aux tuiles sombres de la
   ville. Une règle par tuile : fond teinté par la couleur du rayon, cerne
   noir de 2,5 px, anneau de couleur de 5 px, ombre dure, et un dessin qui
   déborde du cadre plutôt qu'une icône posée dedans.
   ========================================================================== */
.skx{--pap:#F5F2EA;--k:#0B0E13;--nuit:#131B26;--nuit2:#0E141D;
  max-width:1160px;margin:0 auto;color:var(--pap)}
.skx button{font:inherit;cursor:pointer}
.skx-hero{border-radius:22px;overflow:hidden;border:2.5px solid var(--k);
  box-shadow:0 6px 0 var(--k),0 26px 44px -28px rgba(0,0,0,.9)}
.skx-hero svg{display:block;width:100%;height:auto}

/* l'en-tête */
.skx-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 28px;
  flex-wrap:wrap;margin:18px 0}
.skx-tete-g{min-width:0;flex:1 1 320px}
.skx-sur{display:inline-block;padding:.42em .95em;border-radius:999px;border:2.5px solid var(--k);
  background:#FF7A2F;color:var(--k);font-family:var(--mono);font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;box-shadow:0 3px 0 var(--k)}
.skx-titre{margin:.34em 0 .3em;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.7rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1;color:#fff;
  text-shadow:0 3px 0 rgba(0,0,0,.45)}
.skx-intro{margin:0;max-width:62ch;font-size:.88rem;line-height:1.5;color:#A7B2BE}
.skx-bourse{flex:none;display:inline-flex;align-items:center;gap:9px;padding:7px 18px 7px 7px;
  border-radius:999px;background:linear-gradient(160deg,#FFD23E,#E09800);color:#0B0E13;
  border:2.5px solid var(--k);box-shadow:0 5px 0 var(--k)}
.skx-bourse-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:#0B0E13}
.skx-bourse-ico svg{display:block;width:25px;height:25px}
.skx-bourse b{font-family:var(--display);font-weight:800;font-size:1.3rem;font-variant-numeric:tabular-nums}
.skx-bourse small{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;opacity:.8}

/* la scène et la colonne de droite */
.skx-haut{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(244px,1fr);gap:16px}
.skx-scene{position:relative;width:100%;min-height:250px;aspect-ratio:16/10;border-radius:20px;overflow:hidden;
  background:#101822;border:2.5px solid var(--k);
  box-shadow:0 6px 0 var(--k),0 0 0 8px rgba(255,122,47,.18)}
.skx-cv{display:block;width:100%;height:100%}
.skx-legende{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;
  max-width:calc(100% - 24px);padding:4px 14px 4px 4px;border-radius:999px;
  border:2.5px solid var(--k);background:var(--pap);color:var(--k);font-weight:700;font-size:.8rem;
  box-shadow:0 3px 0 var(--k)}
.skx-legende>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skx-puce{flex:none;display:grid;place-items:center;min-width:30px;height:30px;padding:0 7px;
  border-radius:999px;border:2.5px solid var(--k);font-family:var(--display);font-weight:800;font-size:.84rem}
.skx-cote{display:flex;flex-direction:column;gap:12px;min-width:0}
.skx-fiches{flex:1;display:grid;gap:10px;align-content:start}
.skx-fiche{position:relative;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;
  padding:10px 14px;border-radius:16px;isolation:isolate;
  background:radial-gradient(130% 120% at 100% 0%,color-mix(in srgb,var(--a) 42%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 46%,#131B26),#0E141D 74%);
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 34%,transparent),
    0 12px 22px -16px var(--a);
  animation:skxEntre .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms)}
.skx-fiche-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:#0B121A;border:2px solid var(--k)}
.skx-fiche-ico svg{display:block;width:26px;height:26px}
.skx-fiche-l{font-size:.84rem;color:#B6C0CB;line-height:1.2}
.skx-fiche b{font-family:var(--display);font-weight:800;font-size:1.28rem;color:#fff;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.4)}

/* le bouton de départ */
.skx-jouer{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;min-height:82px;padding:10px 14px;border-radius:18px;
  border:2.5px solid var(--k);background:linear-gradient(165deg,#FF9A4A,#E3600F);color:var(--k);
  box-shadow:0 7px 0 var(--k),0 0 0 10px rgba(255,122,47,.16);
  transition:transform .12s var(--ease-std),box-shadow .12s var(--ease-std)}
.skx-jouer-t{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;
  font-family:var(--display);font-weight:800;font-size:1.22rem;text-transform:uppercase;letter-spacing:.01em}
.skx-jouer-t::before{content:"";width:0;height:0;border-style:solid;
  border-width:10px 0 10px 16px;border-color:transparent transparent transparent var(--k)}
.skx-jouer small{position:relative;z-index:1;font-family:var(--mono);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.skx-jouer::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-45%;width:26%;
  background:rgba(255,255,255,.4);transform:skewX(-20deg);animation:skxReflet 3.8s ease-in-out infinite}
.skx-jouer:hover{transform:translateY(-2px);box-shadow:0 9px 0 var(--k),0 0 0 10px rgba(255,122,47,.24)}
.skx-jouer:active{transform:translateY(5px);box-shadow:0 2px 0 var(--k)}
@keyframes skxReflet{0%,64%{left:-45%}100%{left:130%}}

/* l'atelier : la barre d'onglets dessinés */
.skx-atelier{margin-top:18px;border-radius:22px;overflow:hidden;background:#0E141D;
  border:2.5px solid var(--k);box-shadow:0 6px 0 var(--k)}
.skx-onglets{display:flex;overflow-x:auto;background:#0A0F16;border-bottom:2.5px solid var(--k);
  scrollbar-width:none}
.skx-onglets::-webkit-scrollbar{display:none}
.skx-onglet{position:relative;flex:1 0 124px;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;padding:11px 14px 13px;text-align:left;color:#8A94A0;background:none;border:0;
  border-right:2px solid rgba(11,14,19,.9);transition:background .18s,color .18s}
.skx-onglet:last-child{border-right:0}
.skx-onglet-ico{display:grid;place-items:center;width:30px;height:30px;margin-bottom:3px;
  border-radius:9px;background:#131C26;border:2px solid var(--k);transition:transform .22s var(--ease-back)}
.skx-onglet-ico svg{display:block;width:21px;height:21px}
.skx-onglet-n{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
.skx-onglet-v{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:var(--display);font-weight:800;font-size:.92rem;color:#D9E0E7}
.skx-onglet:hover{background:#131C26;color:#B6C0CB}
.skx-onglet:hover .skx-onglet-ico{transform:translateY(-2px) rotate(-5deg)}
.skx-onglet.on{background:linear-gradient(180deg,color-mix(in srgb,var(--b) 55%,#0E141D),#0E141D);
  color:var(--a)}
.skx-onglet.on .skx-onglet-v{color:#fff}
.skx-onglet.on .skx-onglet-ico{background:color-mix(in srgb,var(--a) 22%,#0B121A)}
.skx-onglet.on::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--a)}

/* la bannière du rayon */
.skx-rayon{padding:16px}
.skx-ban{display:flex;align-items:center;gap:14px;padding:12px 16px;margin-bottom:14px;
  border-radius:16px;isolation:isolate;
  background:radial-gradient(120% 130% at 100% 0%,color-mix(in srgb,var(--a) 34%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 44%,#131B26),#0E141D 74%);
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 28%,transparent)}
.skx-ban-ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:#0B121A;border:2.5px solid var(--k)}
.skx-ban-ico svg{display:block;width:30px;height:30px}
.skx-ban b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;
  text-transform:uppercase;letter-spacing:.01em}
.skx-ban p{margin:2px 0 0;font-size:.8rem;line-height:1.4;color:#A7B2BE}
.skx-ban-n{flex:none;padding:.4em .9em;border-radius:999px;background:#0B121A;color:var(--a);
  border:2px solid var(--k);font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;white-space:nowrap}

/* les pastilles de ligne */
.skx-lignes{display:flex;flex-wrap:wrap;gap:10px}
.skx-l{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;padding:0;
  background:var(--c);color:var(--t);border:2.5px solid var(--k);box-shadow:0 4px 0 var(--k);
  font-family:var(--display);font-weight:800;font-size:.95rem;
  transition:transform .16s var(--ease-back),box-shadow .16s;
  animation:skxEntre .32s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*16ms)}
.skx-l:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--k)}
.skx-l.on{transform:translateY(-2px);
  box-shadow:0 0 0 3px #0E141D,0 0 0 6px #fff,0 6px 0 6px var(--k)}
.skx-aide{margin:16px 0 0;font-size:.88rem;color:#A7B2BE}
.skx-aide b{color:#fff;margin-right:6px}

/* les tuiles du catalogue */
.skx-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.skx-c{position:relative;display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;
  border-radius:18px;isolation:isolate;color:var(--pap);
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--a) 34%,transparent),transparent 60%),
    linear-gradient(170deg,color-mix(in srgb,var(--b) 46%,#131B26),#0B1119 76%);
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 28%,transparent),
    0 16px 28px -20px var(--a);
  transition:transform .18s var(--ease-back),box-shadow .18s;
  animation:skxEntre .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*42ms)}
.skx-c:hover{transform:translateY(-4px);
  box-shadow:0 0 0 2.5px var(--k),0 0 0 6px var(--a),0 24px 36px -22px var(--a)}
.skx-vis{line-height:0;border-bottom:2.5px solid var(--k);background:#0B1119}
.skx-vis canvas{display:block;width:100%;height:auto}
.skx-c-txt{padding:11px 14px 8px;display:flex;flex-direction:column;gap:2px;flex:1}
.skx-lab{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  padding:.28em .74em .28em .28em;border-radius:999px;
  background:color-mix(in srgb,var(--b) 74%,#0B0E13);color:#fff;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 62%,transparent);
  font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.skx-lab i{font-style:normal;flex:none;display:grid;place-items:center;width:19px;height:19px;
  border-radius:50%;background:#0B121A}
.skx-lab i svg{display:block;width:15px;height:15px}
.skx-c-txt b{margin-top:8px;font-family:var(--display);font-weight:800;font-size:1.02rem;
  line-height:1.15;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.skx-c-txt p{margin:5px 0 0;font-size:.79rem;line-height:1.42;color:#A7B2BE}
.skx-c-note{display:block;margin-top:6px;font-family:var(--mono);font-size:.66rem;color:var(--a)}
.skx-pied{padding:0 14px 13px}
.skx-prix{display:inline-flex;align-items:center;gap:6px;padding:.4em .9em .4em .4em;border-radius:999px;
  background:#0B121A;border:2px solid var(--k);font-family:var(--mono);font-size:.7rem;font-weight:700}
.skx-prix i{font-style:normal;display:grid;place-items:center;width:20px;height:20px}
.skx-prix i svg{display:block;width:18px;height:18px}
.skx-prix.ok{color:#8FE9B4}
.skx-prix.no{color:#FF9AA2}
.skx-c.on{box-shadow:0 0 0 2.5px var(--k),0 0 0 6px var(--a),0 18px 30px -20px var(--a)}
.skx-c.on::after{content:"";position:absolute;right:10px;top:10px;width:28px;height:28px;border-radius:50%;
  border:2.5px solid var(--k);background:var(--a)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%230B0E13' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow:0 3px 0 var(--k)}
.skx-c.lock .skx-vis{filter:saturate(.3) brightness(.72)}
.skx-c.lock .skx-c-txt b{color:#B4BDC6}
.skx-c.dispo .skx-prix{animation:skxPulse 2.4s ease-in-out infinite}
@keyframes skxPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,206,0,0)}50%{box-shadow:0 0 0 4px rgba(255,206,0,.22)}}

/* les succès */
.skx-succes{margin-top:18px;padding:14px 16px 16px;border-radius:22px;background:#0E141D;
  border:2.5px solid var(--k);box-shadow:0 6px 0 var(--k)}
.skx-succes-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.skx-succes-t b{font-family:var(--display);font-weight:800;font-size:1.02rem;text-transform:uppercase;color:#fff}
.skx-succes-t span{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:#8A94A0}
.skx-medailles{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.skx-m{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:14px;
  background:#0A0F16;border:2px solid var(--k);
  animation:skxEntre .4s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*36ms)}
.skx-m-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#131C26;border:2px solid var(--k)}
.skx-m-ico svg{display:block;width:24px;height:24px}
.skx-m b{display:block;font-size:.86rem;color:#C9D2DA}
.skx-m small{display:block;margin-top:1px;font-size:.72rem;color:#7D8791}
.skx-m.on{background:linear-gradient(165deg,#3A2E08,#0E141D);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.45)}
.skx-m.on b{color:#FFE27A}

@keyframes skxEntre{from{opacity:0;transform:translateY(12px)}}
@media (max-width:880px){
  .skx-haut{grid-template-columns:1fr}
  .skx-scene{aspect-ratio:16/11;min-height:0}
  .skx-fiches{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .skx-grille{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .skx-rayon{padding:12px}
  .skx-c-txt{padding:9px 11px 6px}
  .skx-pied{padding:0 11px 11px}
  .skx-medailles{grid-template-columns:1fr}
  .skx-fiches{grid-template-columns:1fr}
  .skx-onglet{flex:1 0 108px;padding:10px 11px 12px}
}
@media (prefers-reduced-motion:reduce){
  .skx-fiche,.skx-l,.skx-c,.skx-m{animation:none}
  .skx-jouer::after{display:none}
  .skx-c.dispo .skx-prix{animation:none}
}


/* ==========================================================================
   V99 — LES DEUX RARETÉS DU SOMMET
   --------------------------------------------------------------------------
   Le mythique occupait toute la largeur : il redevient une case normale, au
   cadre rose. Au-dessus viennent l'ULTRA-LÉGENDAIRE, cerclé de braise, et le
   MYSTIQUE, qui hérite du grand cadre tournant — une seule pièce par rayon.
   ========================================================================== */
.rvx-c--mythique{grid-column:auto;display:flex;flex-direction:column;background:#111826;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FF5FD2,0 0 0 8.5px #0B0E13,0 7px 0 8.5px #0B0E13}
.rvx-c--mythique::before,.rvx-c--mythique::after{display:none}
.rvx-c--mythique .rvx-vis{margin:13px 13px 0;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FF5FD2,0 0 0 7px #0B0E13;
  container-type:normal}
.rvx-c--mythique .rvx-corps{justify-content:flex-start;padding:10px 14px 14px}
.rvx-c--mythique .rvx-pied{margin-top:auto}
.rvx-c--mythique .rvx-prix{font-size:.95rem}
.rvx-c--mythique .rvx-nom{font-size:1rem;color:#FF9AE4;background:none;-webkit-background-clip:border-box;
  background-clip:border-box;animation:none;filter:none}
.rvx-c--mythique .rvx-desc{color:#AFBBC8;font-size:.74rem}

/* l'ultra-légendaire : la braise */
.rvx-c--ultra{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FF7A2F,0 0 0 8.5px #0B0E13,0 7px 0 8.5px #0B0E13;
  background:linear-gradient(170deg,#2A1408,#0E0A0A 72%)}
.rvx-c--ultra .rvx-vis{margin:13px 13px 0;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FF7A2F,0 0 0 7px #0B0E13}
.rvx-c--ultra .rvx-vis::after{background:linear-gradient(105deg,transparent 38%,rgba(255,196,120,.55) 48%,transparent 58%);
  background-size:260% 100%;animation:rvxBrille 3s ease-in-out infinite}
.rvx-c--ultra .rvx-nom{color:#FFB37A}
.rvx-c--ultra .rvx-rar{color:#0B0E13;background:linear-gradient(90deg,#FFD23E,#FF7A2F,#FFD23E);
  background-size:200% 100%;animation:rvxRayures 2s linear infinite}

/* le mystique : le grand cadre, une seule pièce par rayon */
.rvx-c--mystique{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:stretch;overflow:hidden;background:#04121F;
  box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.rvx-c--mystique::before{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:200%;aspect-ratio:1;
  background:conic-gradient(#8FF4FF,#2E7EDB,#FFD23E,#8FF4FF,#2E7EDB,#FFD23E,#8FF4FF);
  transform:translate(-50%,-50%);animation:rvxTourne 6s linear infinite}
.rvx-c--mystique::after{content:"";position:absolute;inset:6px;z-index:-1;border-radius:15px;
  background:radial-gradient(90% 70% at 50% 0%,rgba(46,126,219,.45),transparent 65%),
    radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.6px) 0 0/38px 38px,
    radial-gradient(circle,rgba(143,244,255,.7) 0 1.2px,transparent 1.8px) 17px 23px/61px 61px,
    linear-gradient(170deg,#0A2A5E,#04121F 70%);box-shadow:0 0 0 2.5px #0B0E13}
.rvx-c--mystique .rvx-vis{margin:16px;container-type:inline-size;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #8FF4FF,0 0 0 7px #0B0E13}
.rvx-c--mystique .rvx-vis::after{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 48%,transparent 58%);
  background-size:260% 100%;animation:rvxBrille 3s ease-in-out infinite}
.rvx-c--mystique .rvx-corps{justify-content:center;padding:22px 24px 22px 6px}
.rvx-c--mystique .rvx-pied{margin-top:16px}
.rvx-c--mystique .rvx-prix{font-size:1.25rem}
.rvx-c--mystique .rvx-rar{color:#0B0E13;background:linear-gradient(90deg,#8FF4FF,#FFFFFF,#8FF4FF);
  background-size:200% 100%;animation:rvxRayures 2s linear infinite}
.rvx-c--mystique .rvx-nom{font-size:1.35rem;background:linear-gradient(90deg,#8FF4FF,#FFFFFF,#FFD23E,#8FF4FF);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rvxArc 4s linear infinite;filter:drop-shadow(0 2px 0 #0B0E13)}
.rvx-c--mystique .rvx-desc{color:#CFE9FF;font-size:.8rem}
.rvx-c--mystique:hover{transform:translateY(-6px)}
.rvx-c--ultra .rvx-runes i{background:#FFD23E}
.rvx-c--ultra .rvx-runes i:nth-child(even){background:#FF7A2F}
.rvx-c--mystique .rvx-runes i{background:#8FF4FF}
.rvx-c--mystique .rvx-runes i:nth-child(even){background:#FFD23E}
@media (max-width:640px){ .rvx-c--mystique{grid-template-columns:1fr} .rvx-c--mystique .rvx-corps{padding:4px 18px 18px} }
@media (prefers-reduced-motion:reduce){
  .rvx-c--mystique::before,.rvx-c--ultra .rvx-vis::after,.rvx-c--mystique .rvx-vis::after,
  .rvx-c--ultra .rvx-rar,.rvx-c--mystique .rvx-rar,.rvx-c--mystique .rvx-nom{animation:none}
}


/* ==========================================================================
   V103 — LA RARETÉ COSMIQUE
   Au-dessus du mystique : fond noir absolu, anneau d'accrétion qui tourne,
   poussière d'étoiles. Une seule pièce du jeu la porte.
   ========================================================================== */
.rvx-c--cosmique{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:stretch;overflow:hidden;background:#04030A;
  box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.rvx-c--cosmique::before{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:210%;aspect-ratio:1;
  background:conic-gradient(#05030F,#B08CFF,#05030F,#8FF4FF,#05030F,#FF5FD2,#05030F);
  transform:translate(-50%,-50%);animation:rvxTourne 9s linear infinite}
.rvx-c--cosmique::after{content:"";position:absolute;inset:6px;z-index:-1;border-radius:15px;
  background:radial-gradient(60% 46% at 50% 46%,rgba(0,0,0,1) 0 42%,rgba(5,3,15,.88) 62%,rgba(5,3,15,0) 100%),
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.7px) 0 0/34px 34px,
    radial-gradient(circle,rgba(176,140,255,.8) 0 1.2px,transparent 1.9px) 13px 19px/53px 53px,
    radial-gradient(circle,rgba(143,244,255,.7) 0 1px,transparent 1.6px) 29px 7px/71px 71px,
    #05030F;box-shadow:0 0 0 2.5px #0B0E13}
.rvx-c--cosmique .rvx-vis{margin:16px;container-type:inline-size;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #B08CFF,0 0 0 7px #0B0E13,0 0 34px -6px #B08CFF}
.rvx-c--cosmique .rvx-vis::after{background:linear-gradient(105deg,transparent 40%,rgba(176,140,255,.5) 48%,transparent 56%);
  background-size:260% 100%;animation:rvxBrille 3.4s ease-in-out infinite}
.rvx-c--cosmique .rvx-corps{justify-content:center;padding:22px 24px 22px 6px}
.rvx-c--cosmique .rvx-pied{margin-top:16px}
.rvx-c--cosmique .rvx-prix{font-size:1.35rem;background:#B08CFF}
.rvx-c--cosmique .rvx-rar{color:#05030F;background:linear-gradient(90deg,#B08CFF,#8FF4FF,#FFFFFF,#B08CFF);
  background-size:220% 100%;animation:rvxRayures 2.4s linear infinite}
.rvx-c--cosmique .rvx-nom{font-size:1.5rem;background:linear-gradient(90deg,#FFFFFF,#B08CFF,#8FF4FF,#FFFFFF);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rvxArc 5s linear infinite;filter:drop-shadow(0 2px 0 #0B0E13)}
.rvx-c--cosmique .rvx-desc{color:#D9CFFF;font-size:.82rem}
.rvx-c--cosmique .rvx-runes i{background:#B08CFF}
.rvx-c--cosmique .rvx-runes i:nth-child(even){background:#8FF4FF}
.rvx-c--cosmique:hover{transform:translateY(-6px)}
@media (max-width:640px){ .rvx-c--cosmique{grid-template-columns:1fr} .rvx-c--cosmique .rvx-corps{padding:4px 18px 18px} }
@media (prefers-reduced-motion:reduce){
  .rvx-c--cosmique::before,.rvx-c--cosmique .rvx-vis::after,.rvx-c--cosmique .rvx-rar,
  .rvx-c--cosmique .rvx-nom{animation:none}
}


/* le solde peut atteindre dix chiffres : la bourse s'adapte au lieu de déborder */
.rvx-bourse b{font-size:clamp(1rem,2.4vw,1.5rem);line-height:1.05}
.rvx-bourse-txt{min-width:0}
.rvx-prix{max-width:100%}


/* ==========================================================================
   V110 — LA CABINE : ESSUIE-GLACE DISCRET, STATION D'ARRIVÉE DESSINÉE
   ========================================================================== */
/* L'essuie-glace faisait 36 % de la largeur sur 6 px de haut, d'un noir
   franc : il barrait la vitre. Il devient un vrai balai — bras fin, lame
   segmentée, pivot — et il tient dans un coin. */
.mdx-vue .mdx-cadre-cab::after{left:7%;bottom:18.5%;width:23%;height:3px;border-radius:2px;
  background:linear-gradient(180deg,#4A515C,#1A1E25);
  box-shadow:0 0 0 1px rgba(11,14,19,.9),0 1px 0 rgba(255,255,255,.14);
  transform-origin:0 50%;transform:rotate(-11deg);opacity:.85}
.mdx-vue .mdx-cadre-cab::before{content:"";position:absolute;left:6.4%;bottom:17.6%;
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#6A727E,#23272E 62%,#12151A);
  box-shadow:0 0 0 1.5px rgba(11,14,19,.9),0 2px 4px rgba(0,0,0,.6)}
.mdx-vue .mdx-balai{position:absolute;left:7%;bottom:18.5%;width:23%;height:7px;
  transform-origin:0 50%;transform:rotate(-11deg);pointer-events:none;z-index:4;opacity:.9}
.mdx-vue .mdx-balai i{position:absolute;right:0;top:0;width:62%;height:100%;border-radius:3px;
  background:linear-gradient(180deg,#333941 0 42%,#15181D 42%);
  box-shadow:0 0 0 1px rgba(11,14,19,.85)}
.mdx-vue .mdx-balai i::after{content:"";position:absolute;inset:1px 3px auto 3px;height:1px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 6px,transparent 6px 12px)}

/* la station d'arrivée, peinte à chaque image */
.mdx-scene2{position:relative;border-radius:18px;overflow:hidden;
  background:#171320;box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.mdx-scene2-cv{display:block;width:100%;height:clamp(175px,27vw,265px)}

/* le bandeau du runner : petit, doux, au ras du bas — il gênait la lecture
   de la voie en plein milieu de l'écran */
.rn-bandeau{top:auto;bottom:7%;font-size:clamp(.68rem,1.7vw,.9rem);letter-spacing:.06em;
  max-width:min(76%,34ch);text-shadow:none;opacity:0}
.rn-bandeau.gros{font-size:clamp(.86rem,2.2vw,1.12rem)}
.rn-bandeau.on{animation:rnBan2 1.05s var(--ease-out-expo) forwards}
@keyframes rnBan2{0%{opacity:0;transform:translateX(-50%) translateY(6px)}
  20%{opacity:.92;transform:translateX(-50%) translateY(0)}
  72%{opacity:.92}100%{opacity:0;transform:translateX(-50%) translateY(-6px)}}
@media (prefers-reduced-motion:reduce){ .rn-bandeau.on{animation:none;opacity:.9} }


/* ==========================================================================
   V114 — LE DÉPÔT DU SNAKE EN CARTOON, ET SES SIX RARETÉS
   --------------------------------------------------------------------------
   Les tuiles sombres se ressemblaient toutes : une rame gratuite avait le
   même cadre que la pièce du fond. Les cases deviennent des cartes de
   papier crème cernées de noir, posées sur le dépôt de nuit, et chaque
   rareté a son cadre — jusqu'au céleste, qui tourne.
   ========================================================================== */
.skx-c{background:linear-gradient(178deg,#FFFDF6,#F0EADA 68%,#E5DDC9);
  color:#0B0E13;border-radius:18px;overflow:hidden;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  transition:transform .16s var(--ease-back),box-shadow .16s}
.skx-c:hover{transform:translateY(-5px) rotate(-.6deg);
  box-shadow:0 0 0 3px #0B0E13,0 11px 0 3px #0B0E13}
.skx-c:active{transform:translateY(2px);box-shadow:0 0 0 3px #0B0E13,0 3px 0 3px #0B0E13}
.skx-vis{position:relative;margin:11px 11px 0;border-radius:13px;overflow:hidden;line-height:0;
  background:#0E141D;box-shadow:0 0 0 2.5px #0B0E13}
.skx-c-txt{padding:11px 13px 6px}
.skx-c-txt b{margin-top:7px;color:#0B0E13;text-shadow:none;font-size:1.02rem}
.skx-c-txt p{color:#5E5748;font-size:.78rem}
.skx-c-note{color:#8A7A4A}
.skx-lab{background:#0B0E13;color:#FFFDF6;box-shadow:none;
  padding:.3em .8em .3em .3em}
.skx-lab i{background:#FFFDF6}
.skx-lab i svg{width:14px;height:14px}
.skx-pied{padding:0 13px 13px}
.skx-prix{background:#FFCE00;color:#0B0E13;border:2.5px solid #0B0E13;
  box-shadow:0 3px 0 #0B0E13;font-weight:800;font-family:var(--display);font-size:.84rem}
.skx-prix.no{background:#E7E1D2;color:#6B6456}
.skx-prix.ok{background:#3ED07A}
.skx-c.on{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #3ED07A,0 6px 0 7px #0B0E13}
.skx-c.on::after{background:#3ED07A
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%230B0E13' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.skx-c.lock{background:linear-gradient(178deg,#EFEADD,#E0D9C8)}
.skx-c.lock .skx-vis{filter:saturate(.4) brightness(.8)}
.skx-c.lock .skx-c-txt b{color:#6B6456}

/* le bandeau de rareté, en haut à gauche de la vignette */
.skx-rar{position:absolute;left:7px;top:7px;z-index:2;padding:.3em .7em;border-radius:999px;
  font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#0B0E13;background:var(--ra);
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.skx-c--rare .skx-vis,.skx-c--epique .skx-vis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--ra),0 0 0 7px #0B0E13}
.skx-c--legendaire{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFD23E,0 6px 0 7px #0B0E13}
.skx-c--legendaire .skx-vis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFD23E,0 0 0 7px #0B0E13}
.skx-c--legendaire .skx-c-txt b{color:#8A6000}
.skx-c--mythique{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FF5FD2,0 6px 0 7px #0B0E13}
.skx-c--mythique .skx-vis{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FF5FD2,0 0 0 7px #0B0E13}
.skx-c--mythique .skx-c-txt b{color:#8A1C6A}
.skx-c--legendaire .skx-vis::after,.skx-c--mythique .skx-vis::after,
.skx-c--celeste .skx-vis::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 48%,transparent 58%);
  background-size:260% 100%;animation:skxBrille 3.2s ease-in-out infinite}
@keyframes skxBrille{0%{background-position:160% 0}55%,100%{background-position:-60% 0}}

/* la pièce céleste : une par rayon, et elle se voit */
.skx-c--celeste{grid-column:1/-1;position:relative;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch;
  background:#070B22;color:#E9F4FF;
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.skx-c--celeste::before{content:"";position:absolute;left:50%;top:50%;z-index:-2;width:210%;aspect-ratio:1;
  background:conic-gradient(#8FF4FF,#2E6BDB,#FFD23E,#8FF4FF,#2E6BDB,#FFD23E,#8FF4FF);
  transform:translate(-50%,-50%);animation:skxTourne 7s linear infinite}
@keyframes skxTourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
.skx-c--celeste::after{content:"";position:absolute;inset:6px;z-index:-1;border-radius:14px;
  background:radial-gradient(90% 70% at 50% 0%,rgba(46,107,219,.5),transparent 66%),
    radial-gradient(circle,rgba(255,255,255,.85) 0 1px,transparent 1.7px) 0 0/34px 34px,
    radial-gradient(circle,rgba(143,244,255,.7) 0 1.2px,transparent 1.9px) 15px 21px/57px 57px,
    linear-gradient(170deg,#132A6B,#070B22 72%);box-shadow:0 0 0 2.5px #0B0E13}
.skx-c--celeste{grid-template-rows:1fr auto}
.skx-c--celeste .skx-vis{grid-column:1;grid-row:1/3;align-self:center;
  margin:15px;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #8FF4FF,0 0 0 7px #0B0E13}
.skx-c--celeste .skx-c-txt{grid-column:2;grid-row:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding:18px 20px 6px 4px}
.skx-c--celeste .skx-c-txt b{font-size:1.3rem;color:#8FF4FF;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.skx-c--celeste .skx-c-txt p{color:#BFD8F5;font-size:.82rem}
.skx-c--celeste .skx-lab{background:#8FF4FF;color:#07142E}
.skx-c--celeste .skx-lab i{background:#07142E}
.skx-c--celeste .skx-pied{grid-column:2;grid-row:2;padding:0 20px 18px 4px}
.skx-c--celeste .skx-prix{font-size:1rem}
.skx-c--celeste.on{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #3ED07A,0 8px 0 7px #0B0E13}
@media (max-width:640px){
  .skx-c--celeste{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .skx-c--celeste .skx-vis{grid-column:1;grid-row:1}
  .skx-c--celeste .skx-c-txt{grid-column:1;grid-row:2;padding:4px 16px 8px}
  .skx-c--celeste .skx-pied{grid-column:1;grid-row:3;padding:0 16px 16px}
}

/* les onglets, en carton */
.skx-onglets{background:#0A0F16}
.skx-onglet.on{background:linear-gradient(180deg,#FFFDF6,#EFE9D9);color:#6B6456}
.skx-onglet.on .skx-onglet-v{color:#0B0E13}
.skx-onglet.on .skx-onglet-ico{background:#0B0E13}
.skx-onglet.on::after{height:6px}

/* la bannière du rayon : une plaque émaillée */
.skx-ban{background:linear-gradient(170deg,#132033,#0A121C);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--a) 34%,transparent),0 5px 0 5px rgba(0,0,0,.35)}

/* les pastilles de ligne : un vrai bouton cartoon */
.skx-l{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;border:0}
.skx-l:hover{box-shadow:0 0 0 2.5px #0B0E13,0 7px 0 2.5px #0B0E13}
.skx-l.on{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 6px 0 6px #0B0E13}

@media (prefers-reduced-motion:reduce){
  .skx-c--celeste::before,.skx-c--legendaire .skx-vis::after,
  .skx-c--mythique .skx-vis::after,.skx-c--celeste .skx-vis::after{animation:none}
}


/* ==========================================================================
   V117 — LE DÉFILÉ À LA TAILLE DE L'ÉCRAN, LE SOLITAIRE PLUS SÛR
   ========================================================================== */
/* Chaque colonne offre la même surface de dépôt, qu'elle porte une carte ou
   sept : une colonne courte était une cible minuscule, et un lâcher à côté
   ne donnait aucun message — d'où l'impression qu'une carte seule ne
   pouvait pas bouger. */
.so-col{min-height:clamp(210px,40vh,430px);touch-action:none}
.so-carte{touch-action:none}
.so-garage-vide,.so-fond{touch-action:none}

/* la fête : une plaque, et les messages s'empilent au lieu de se superposer */
.so-fete{top:calc(28% + var(--k,0) * 3.1em);translate:none;
  padding:.34em 1em;border-radius:14px;
  font-size:clamp(1.05rem,3.4vw,1.8rem);color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  text-shadow:none;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
@keyframes soFete{0%{opacity:0;transform:translateX(-50%) scale(.6)}
  18%{opacity:1;transform:translateX(-50%) scale(1.08)}
  30%{transform:translateX(-50%) scale(1)}
  76%{opacity:1;transform:translateX(-50%) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-26px) scale(1)}}


/* ==========================================================================
   À VUE D'ŒIL — le jeu d'échelle
   Cartes crème cernées de noir pour ce qu'on manipule, tuiles sombres de
   Metro City pour ce qui informe : la même alternance que le reste du site.
   ========================================================================== */
.ekx-lab{margin:0 0 14px;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#9AA3AE;text-align:center}
.ekx-modes{padding:var(--sp-4) 0 var(--sp-2)}
.ekx-modes-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.ekx-mode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:16px 16px 14px;border:0;border-radius:22px;cursor:pointer;text-align:left;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE7D4);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;
  transition:transform .18s var(--ease-back),box-shadow .18s var(--ease-back);
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*70ms)}
.ekx-mode:hover{transform:translateY(-4px);box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 11px 0 3px #0B0E13}
.ekx-mode-vis{width:60px;height:44px;margin-bottom:2px}
.ekx-mode-vis svg{display:block;width:100%;height:100%}
.ekx-mode b{font-family:var(--display);font-weight:800;font-size:1.08rem}
.ekx-mode span{font-size:.8rem;line-height:1.4;color:#4A5460}
.ekx-mode-go{margin-top:10px;padding:.42em 1.1em;border-radius:999px;font-style:normal;
  font-family:var(--display);font-size:.88rem;font-weight:900;color:#fff;background:var(--c);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.ekx-mode:hover .ekx-mode-go{transform:translateX(5px)}
.ekx-mode:hover .ekx-mode-vis{animation:ekxSaute .45s cubic-bezier(.3,1.6,.5,1)}
.ekx-mode:active{transform:translateY(4px);box-shadow:0 0 0 3px #0B0E13,0 2px 0 3px #0B0E13}
.ekx-regle{margin-top:16px;padding:14px 18px;border-radius:20px;color:#C3CDD8;
  background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(122,74,158,.34)}
.ekx-regle b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;color:#fff}
.ekx-regle p{margin:.4em 0 0;font-size:.82rem;line-height:1.55}

/* — La scène — */
.ekx{display:flex;flex-direction:column;gap:18px;padding:var(--sp-3) 0 var(--sp-2)}
.ekx-scene{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;
  height:clamp(300px,52vh,520px);touch-action:none;cursor:ns-resize;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.ekx-scene.saisi{cursor:grabbing}
.ekx-fond{position:absolute;inset:0;z-index:-2;line-height:0}
.ekx-fond svg{display:block;width:100%;height:100%}
.ekx-sol{position:absolute;left:0;right:0;bottom:17%;height:4px;background:#0B0E13;z-index:-1}
.ekx-sol::after{content:"";position:absolute;left:0;right:0;top:4px;height:14px;
  background:repeating-linear-gradient(105deg,rgba(11,14,19,.55) 0 5px,transparent 5px 13px)}
.ekx-aide{position:absolute;left:10px;top:10px;z-index:1;padding:.36em .8em;border-radius:999px;
  font-family:var(--display);font-size:.74rem;font-weight:700;color:#0B0E13;
  background:rgba(251,246,233,.92);box-shadow:0 0 0 2px #0B0E13;pointer-events:none;
  transition:opacity .3s}
.ekx-scene.saisi .ekx-aide,.ekx-scene.revele .ekx-aide{opacity:0}
/* l'assise est remontée : le dessin respire au-dessus du bord du cadre */
.ekx-piste{position:absolute;left:14px;right:14px;bottom:17%;display:flex;align-items:flex-end;
  justify-content:center;gap:var(--gap,28px)}
.ekx-obj{position:relative;flex:none;line-height:0;filter:drop-shadow(0 6px 0 rgba(11,14,19,.45))}
.ekx-obj .ekx-d{width:100%;height:100%}
.ekx-obj svg{display:block;width:100%;height:100%;overflow:visible}
.ekx-obj--b{transition:none}
.ekx-obj.minuscule{filter:drop-shadow(0 0 0 2px #0B0E13)}
.ekx-obj.minuscule::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,206,0,.55);pointer-events:none}
.ekx-scene.revele .ekx-obj--a{animation:ekxTap .5s var(--ease-back)}
@keyframes ekxTap{40%{transform:translateY(-6px)}}

/* — Les étiquettes : le nom, et rien d'autre — */
.ekx-noms{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ekx-nom{display:flex;flex-direction:column;gap:2px;padding:9px 13px;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE7D4);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.ekx-nom i{font-style:normal;font-family:var(--display);font-size:.72rem;font-weight:700;color:#6B747C}
.ekx-nom b{font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.15}
.ekx-nom--a{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #3E8FD4,0 5px 0 5px #0B0E13}
.ekx-nom--b{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 5px 0 5px #0B0E13}

/* — La commande : deux gros boutons ronds et une glissière à crans — */
.ekx-cmd{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:999px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EDE3CC);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:opacity .3s,filter .3s}
.ekx-cmd.off{opacity:.5;filter:saturate(.4);pointer-events:none}
.ekx-pas{flex:none;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1;color:#0B0E13;
  background:radial-gradient(circle at 35% 30%,#FFE88A,#FFCE00 60%);box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;
  transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .12s}
.ekx-pas:hover{transform:translateY(-3px) rotate(-8deg) scale(1.06)}
.ekx-pas:active{transform:translateY(4px) scale(.94);box-shadow:0 0 0 3px #0B0E13,0 1px 0 3px #0B0E13}
.ekx-range{flex:1;min-width:0;height:36px;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.ekx-range::-webkit-slider-runnable-track{height:18px;border-radius:12px;
  background:repeating-linear-gradient(90deg,rgba(11,14,19,.22) 0 2px,transparent 2px 16px),linear-gradient(90deg,#BFE3F5,#FFE08A 50%,#FFB3A6);
  box-shadow:inset 0 0 0 2.5px #0B0E13,inset 0 4px 0 rgba(255,255,255,.5)}
.ekx-range::-moz-range-track{height:18px;border-radius:12px;background:linear-gradient(90deg,#BFE3F5,#FFE08A 50%,#FFB3A6);
  box-shadow:inset 0 0 0 2.5px #0B0E13}
.ekx-range::-webkit-slider-thumb{-webkit-appearance:none;width:38px;height:38px;margin-top:-10px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#FBF6E9 55%,#E7DDC6);box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13,inset 0 0 0 7px #7A4A9E;
  transition:transform .15s}
.ekx-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.ekx-range::-moz-range-thumb{width:38px;height:38px;border:0;border-radius:50%;
  background:#FBF6E9;box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13,inset 0 0 0 7px #7A4A9E}
.ekx-bas{display:flex;justify-content:center}
.ekx .ekx-ok{position:relative;overflow:hidden;min-width:min(300px,86%);padding:.85em 1.6em;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:1.12rem;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .12s}
.ekx .ekx-ok::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:ekxReflet 3s ease-in-out 1s infinite}
.ekx .ekx-ok:hover{transform:translateY(-3px)}
.ekx .ekx-ok:active{transform:translateY(5px);box-shadow:0 0 0 3px #0B0E13,0 1px 0 3px #0B0E13}
@keyframes ekxReflet{0%,60%{left:-40%}100%{left:130%}}

/* — Le verdict : un cadran qui se remplit, un mot tamponné, les points qui sautent — */
.ekx-verdict{display:none}
.ekx-verdict.on{display:flex;align-items:center;justify-content:center;gap:16px 22px;flex-wrap:wrap;
  padding:16px 20px;border-radius:26px;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#EFE7D4);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px var(--c),0 9px 0 7px #0B0E13;
  animation:ekxSurgit .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes ekxSurgit{0%{opacity:0;transform:translateY(24px) scale(.88)}100%{opacity:1;transform:none}}
.ekx-anneau{position:relative;flex:none;width:104px;height:104px}
.ekx-anneau svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ekx-anneau .f{fill:#FFFFFF;stroke:rgba(11,14,19,.12);stroke-width:12}
.ekx-anneau .v{fill:none;stroke:var(--c);stroke-width:12;stroke-linecap:round;stroke-dasharray:314.2;
  stroke-dashoffset:calc(314.2 - 314.2 * var(--p) / 100);animation:ekxRemplit 1.1s cubic-bezier(.2,.8,.2,1) both}
.ekx-anneau .b{fill:none;stroke:#0B0E13;stroke-width:3}
@keyframes ekxRemplit{from{stroke-dashoffset:314.2}}
.ekx-pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.ekx-pct i{position:absolute;bottom:24px;font-style:normal;font-size:.8rem;opacity:.6}
.ekx-pct span{transform:translateY(-4px)}
.ekx-v-txt{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ekx-mot{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,4vw,1.9rem);line-height:1;color:var(--c);
  text-shadow:0 2px 0 #0B0E13;-webkit-text-stroke:1px #0B0E13;animation:ekxTampon .6s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes ekxTampon{0%{opacity:0;transform:scale(2.2) rotate(-12deg)}100%{opacity:1;transform:rotate(-3deg)}}
.ekx-gain{display:inline-flex;align-items:center;gap:6px;padding:.4em 1em;border-radius:999px;font-family:var(--display);font-size:.95rem;
  font-weight:900;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;animation:ekxSaute .5s cubic-bezier(.3,1.6,.5,1) .9s both}
@keyframes ekxSaute{0%{opacity:0;transform:translateY(12px) scale(.6)}100%{opacity:1;transform:none}}
.ekx-fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ekx-fi{position:relative;padding:14px 14px 12px;border-radius:18px;color:#0B0E13;overflow:hidden;
  background:linear-gradient(180deg,#FBF6E9,#EFE7D4);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  animation:ekxSaute .45s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:1s}
.ekx-fi::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:#3E8FD4;border-bottom:2.5px solid #0B0E13}
.ekx-fi:nth-child(2){animation-delay:1.1s}.ekx-fi:nth-child(2)::before{background:#FFCE00}
.ekx-fi:nth-child(3){animation-delay:1.2s}
.ekx-fi b{display:block;margin-top:4px;font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.2}
.ekx-fi span{display:block;margin-top:4px;font-family:var(--display);font-weight:700;font-size:.85rem;color:#4A5460}
.ekx-fi--r::before{background:#7A4A9E}
.ekx-fi--r b{font-size:1.1rem;color:#7A4A9E}

@media (max-width:640px){
  .ekx-scene{height:clamp(240px,42vh,360px)}
  .ekx-noms{grid-template-columns:1fr}
  .ekx-nom b{font-size:.88rem}
  .ekx-anneau{width:90px;height:90px}
  .ekx-pct{font-size:1.6rem}
  .ekx-pas{width:44px;height:44px;font-size:1.6rem}
  .ekx-cmd{gap:10px;padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .ekx-mode,.ekx-verdict.on,.ekx-fi,.ekx-mot,.ekx-gain,.ekx-anneau .v{animation:none}
  .ekx-scene.revele .ekx-obj--a{animation:none}
}


/* ==========================================================================
   ONGLET FRANCE — REFONTE COMPLÈTE
   --------------------------------------------------------------------------
   Une seule règle de composition, tenue partout :
     · ce qu'on MANIPULE est une carte crème cernée de noir, avec son ombre
       dure — la facture cartoon du reste du site ;
     · ce qui INFORME est une tuile sombre de Metro City, cernée de la couleur
       du jeu — exactement les cases d'info du haut de l'onglet réseau.
   L'alternance des deux donne le rythme ; rien n'est laissé en verre fumé.
   ========================================================================== */
.fr-view,.ap--france,.fr-carte-jeu{--cr-haut:#FBF6E9;--cr-bas:#EFE7D4;--enc:#0B0E13}
/* les deux briques, écrites une fois */
.fr-view .fr-hero,.fr-carte-jeu,.fr-view .fr-badge,
.ap--france .fr-mode,.ap--france .fr-jeton,.ap--france .fr-choix-b,
.ap--france .fr-indice-b,.ap--france .fr-zone,.ap--france .fr-tableau,
.ap--france .fr-silhouette,.ap--france .fr-zoom-b{
  color:#0B0E13;background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.fr-view .fr-prog,.fr-view .fr-prog-c,.ap--france .fr-bar,
.ap--france .fr-consigne,.ap--france .fr-fiche,.ap--france .fr-aide{
  color:#C3CDD8;background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 34%,transparent)}

/* ——————————————————————— LE HUB ——————————————————————— */
.fr-view .fr-hero{position:relative;overflow:visible;border-radius:26px;
  padding:var(--sp-6) min(300px,38%) var(--sp-5) calc(var(--sp-5) + 16px);
  background:
    repeating-linear-gradient(90deg,rgba(11,14,19,.05) 0 2px,transparent 2px 22px),
    linear-gradient(180deg,var(--cr-haut),var(--cr-bas))}
.fr-view .fr-hero::after{content:"";position:absolute;left:3px;right:3px;bottom:0;height:26px;opacity:.16;
  border-radius:0 0 23px 23px;overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='%230B0E13' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/200px 26px}
.fr-view .fr-tricolore{width:14px;box-shadow:2px 0 0 3px #0B0E13}
.fr-view .fr-h1{color:#0B0E13;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;
  text-shadow:0 3px 0 rgba(255,255,255,.65)}
.fr-view .fr-sub{color:#3A4450;max-width:54ch}
.fr-view .fr-mini{right:-18px;width:min(286px,40%);opacity:1;z-index:1;
  filter:drop-shadow(0 7px 0 rgba(11,14,19,.30))}
.fr-view .fr-mini-r{stroke:#0B0E13;stroke-width:6;stroke-linejoin:round}
.fr-view .fr-lab{color:#8B95A1}

.fr-view .fr-prog{--c:#3ED07A;border-radius:22px;padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.fr-view .fr-prog-h span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:#9AA3AE}
.fr-view .fr-prog-h b{font-family:var(--display);font-weight:800;color:#fff}
.fr-view .fr-prog-b{height:16px;border-radius:9px;background:#D5CBB4;box-shadow:inset 0 0 0 2.5px #0B0E13;
  background-image:repeating-linear-gradient(90deg,rgba(11,14,19,.16) 0 3px,transparent 3px 14px)}
.fr-view .fr-prog-b i{background:linear-gradient(180deg,#5BE28F,#2FAF63);box-shadow:inset 0 0 0 2.5px #0B0E13}
.fr-view .fr-prog-c{--c:#7FD4E8;border-radius:14px;padding:9px 10px;
  box-shadow:0 0 0 2px #0B0E13,0 0 0 4px rgba(127,212,232,.24)}
.fr-view .fr-prog-c b{color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem}
.fr-view .fr-prog-c span{color:#8FA0AE}
.fr-view .fr-prog-s span{padding:.34em .9em;border-radius:999px;font-family:var(--mono);font-size:.68rem;
  font-weight:700;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}

/* les six jeux : des cartes crème, une couleur d'identité par jeu */
.fr-grille{gap:16px}
.fr-carte-jeu{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;
  padding:0 0 14px;transform:none;
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*60ms)}
.fr-carte-jeu:hover{transform:translateY(-5px) rotate(-.5deg);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 12px 0 3px #0B0E13}
.fr-carte-jeu::before{display:none}
.fr-vis{height:104px;margin:0 0 14px;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,rgba(255,253,244,.20) 0 9px,transparent 9px 20px),
    linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 60%,#0B0E13));
  box-shadow:inset 0 -3px 0 #0B0E13}
.fr-vis svg{width:74px;height:74px;padding:9px;border-radius:50%;filter:none;
  background:linear-gradient(180deg,#FFFDF4,#EFE7D4);box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13}
.fr-carte-jeu .card-tag{align-self:flex-start;margin:0 18px;padding:.3em .8em;border-radius:999px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:#0B0E13}
.fr-carte-jeu h3{margin:8px 18px 0;color:#0B0E13;font-weight:800;text-transform:uppercase;
  font-size:1.16rem;line-height:1.1}
.fr-carte-jeu p{margin:6px 18px 0;color:#4A5460;font-size:.82rem;line-height:1.45}
.fr-carte-p{margin:auto 18px 0;padding-top:12px}
.fr-diff{padding:.3em .8em;border-radius:999px;color:#0B0E13;font-weight:700;
  box-shadow:0 0 0 2px #0B0E13}
.fr-diff[data-d="Facile"]{color:#0B0E13;background:#8FE3A8}
.fr-diff[data-d="Moyen"]{color:#0B0E13;background:#FFD36A}
.fr-diff[data-d="Difficile"]{color:#0B0E13;background:#FF9AA3}
.fr-best{color:#6B747C;font-family:var(--mono);font-size:.64rem}
.fr-play{padding:.36em 1em;border-radius:999px;font-family:var(--mono);font-size:.64rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--c);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}

/* les badges : des jetons de collection, éteints tant qu'on ne les a pas */
.fr-view .fr-badges{gap:12px}
.fr-view .fr-badge{border-radius:18px;padding:12px 10px;opacity:1;
  background:linear-gradient(180deg,#2A3341,#1B222C);color:#7E8894;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.fr-view .fr-badge b{filter:grayscale(1) opacity(.5)}
.fr-view .fr-badge.on{background:linear-gradient(180deg,#FBF6E9,#EFE7D4);color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 5px 0 5px #0B0E13}
.fr-view .fr-badge.on b{filter:none}
.fr-view .fr-badge span{font-family:var(--display);font-weight:800}
.fr-view .fr-badge.on small{color:#5A5F68}

/* ——————————————————————— LA COQUILLE D'UN JEU ———————————————————————
   Le bandeau passe en panneau crème : le dessin coloré ne garde que la bande
   du bas, comme une ville vue depuis le quai, et le texte redevient noir. */
.ap--france .ap-ban{padding-bottom:116px;
  background:
    repeating-linear-gradient(90deg,rgba(11,14,19,.045) 0 2px,transparent 2px 22px),
    linear-gradient(180deg,var(--cr-haut),var(--cr-bas));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--g) 55%,transparent),0 9px 0 7px #0B0E13}
.ap--france .ap-ban-art{top:auto;bottom:0;height:104px;background:var(--g);
  box-shadow:inset 0 3px 0 #0B0E13}
.ap--france .ap-ban-art .ap-ban-fond{display:none}
.ap--france .ap-ban-art .ap-ban-voie{height:104px}
.ap--france .ap-ban-txt::before{display:none}
.ap--france .ap-ban-sur{background:var(--g);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.ap--france .ap-ban-t{color:#0B0E13;text-shadow:0 3px 0 rgba(255,255,255,.6)}
.ap--france .ap-ban-r{color:#3A4450;text-shadow:none}
.ap--france .ap-regles-l li{color:#3A4450;background:rgba(255,253,244,.72);
  box-shadow:0 0 0 2px #0B0E13}
.ap--france .ap-regles-l li::before{background:var(--g);color:#fff}
.ap--france .ap-regles-b{background:var(--g);color:#fff;box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13}
.ap--france .ap-ban-em .ap-emb{filter:drop-shadow(0 5px 0 rgba(11,14,19,.35))}

/* le choix du mode */
.ap--france .fr-modes{padding:var(--sp-4) 0 var(--sp-2)}
.ap--france .fr-mode{border-radius:24px;transition:transform .18s var(--ease-back),box-shadow .18s var(--ease-back)}
.ap--france .fr-mode:hover{transform:translateY(-5px);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 12px 0 3px #0B0E13}
.ap--france .fr-mode b{color:#0B0E13;font-weight:800;text-transform:uppercase}
.ap--france .fr-mode span{color:#4A5460}
.ap--france .fr-mode-vis{width:78px;height:78px;display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(180deg,#FFFDF4,#EFE7D4);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 5px 0 6px #0B0E13}
.ap--france .fr-mode::after{content:"Jouer →";margin-top:10px;padding:.34em 1em;border-radius:999px;
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--c);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}

/* le bandeau de partie : une tuile d'info, pas une barre de verre */
.ap--france .fr-bar,.ap .fr-bar{--c:var(--g);border-radius:18px;padding:11px 14px;
  background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--g) 40%,transparent),transparent 62%),
    linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--g) 36%,transparent)}
.ap--france .fr-bar-t{font-family:var(--display);font-weight:800;color:#fff}
.ap--france .fr-bar-g,.ap--france .fr-bar-d{gap:10px}
.ap--france .fr-stat{display:inline-flex;align-items:baseline;gap:7px;padding:.36em .9em;
  border-radius:999px;text-align:left;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.ap--france .fr-stat span{display:inline;font-size:.54rem;letter-spacing:.14em;color:#6B747C}
.ap--france .fr-stat b{display:inline;font-size:.95rem;font-weight:800;color:#0B0E13;
  font-variant-numeric:tabular-nums}
.ap--france .fr-bar-d{gap:9px;align-items:center}
.ap--france .fr-piste{left:14px;right:14px;bottom:5px;height:7px;border-radius:99px;background:#D5CBB4;
  box-shadow:inset 0 0 0 2px #0B0E13;overflow:hidden}
.ap--france .fr-piste i{box-shadow:inset 0 0 0 2px #0B0E13}
.ap--france .fr-consigne{--c:var(--g);margin:var(--sp-3) 0;padding:11px 15px;border-radius:16px;
  font-size:.86rem;color:#C3CDD8}
.ap--france .fr-consigne b{color:#fff}
.ap--france .fr-aide{--c:#7FD4E8;padding:9px 14px;border-radius:14px;font-size:.76rem}

/* la carte, son cadre et ses boutons */
.ap--france .fr-zone{border-radius:26px;padding:10px;overflow:visible}
.ap--france .fr-zone .fr-carte{box-shadow:0 0 0 3px #0B0E13}
.ap--france .fr-zoom{gap:8px}
.ap--france .fr-zoom-b{border-radius:14px;width:40px;height:40px;color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--france .fr-zoom-b:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.ap--france .fr-retour{padding:.4em 1em;border-radius:999px;font-family:var(--mono);font-size:.66rem;
  font-weight:700;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}

/* le tiroir des régions : des étiquettes émaillées */
.ap--france .fr-tiroir{gap:9px}
.ap--france .fr-jeton{border-radius:999px;padding:8px 14px 8px 9px;font-weight:700;
  transition:transform .16s var(--ease-back),box-shadow .16s var(--ease-back)}
.ap--france .fr-jeton:hover{transform:translateY(-3px);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 10px 0 3px #0B0E13}
.ap--france .fr-jeton.pris,.ap--france .fr-jeton.on{
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFCE00,0 7px 0 6px #0B0E13}
.ap--france .fr-jeton i{box-shadow:0 0 0 2px #0B0E13}

/* les questions et leurs réponses */
.ap--france .fr-q-t{color:#F5F2E8;font-weight:800}
.ap--france .fr-lab{color:#9FB0BE;font-size:.64rem}
.ap--france .fr-scene>.fr-lab{align-self:center;padding:.36em 1em;border-radius:999px;
  color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:0 0 0 2px #0B0E13}
.ap--france .fr-choix{gap:10px}
.ap--france .fr-choix-b{border-radius:18px;padding:14px 16px;font-weight:700;
  transition:transform .16s var(--ease-back),box-shadow .16s var(--ease-back)}
.ap--france .fr-choix-b:hover{transform:translateY(-3px);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--g),0 10px 0 3px #0B0E13}
.ap--france .fr-choix-b.juste{background:linear-gradient(180deg,#8FE3A8,#4FC47A);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #3ED07A,0 7px 0 6px #0B0E13}
.ap--france .fr-choix-b.faux{background:linear-gradient(180deg,#FFA2AA,#E8646F);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #E3051C,0 7px 0 6px #0B0E13}
.ap--france .fr-indice-b{border-radius:999px;padding:9px 16px;font-family:var(--mono);font-size:.7rem;
  font-weight:700;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--france .fr-indice-b[disabled]{opacity:.45;box-shadow:0 0 0 2.5px #0B0E13}
.ap--france .fr-pourquoi{margin-top:10px;padding:10px 14px;border-radius:14px;font-size:.82rem;
  color:#C3CDD8;background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2px #0B0E13,0 0 0 4px rgba(127,212,232,.28)}

/* le tableau des lieux et la silhouette des outre-mer : des cadres accrochés */
.ap--france .fr-tableau{border-radius:22px;padding:10px;overflow:hidden}
.ap--france .fr-tableau-t{left:14px;bottom:12px;padding:.3em .8em;border-radius:999px;color:#0B0E13;
  background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.ap--france .fr-silhouette{border-radius:24px;background:linear-gradient(180deg,#FBF6E9,#EFE7D4)}
.ap--france .fr-sil-p{fill:#D9C894;stroke:#0B0E13;stroke-width:5;stroke-linejoin:round}
.ap--france .fr-sil-p.on{fill:#FFCE00}
.ap--france .fr-fiche{--c:#FFCE00;border-radius:20px;padding:var(--sp-4)}
.ap--france .fr-fiche b,.ap--france .fr-fiche h3{color:#fff}

/* l'écran de fin : une tuile sombre, des jetons crème */
.ap--france .fr-fin{--c:var(--g);border-radius:26px;padding:var(--sp-5);
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--g) 34%,transparent),transparent 62%),
    linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--g) 46%,transparent),0 9px 0 6px #0B0E13}
.ap--france .fr-fin-t{text-transform:uppercase;font-weight:800;color:#fff;text-shadow:0 3px 0 #0B0E13}
.ap--france .fr-et{color:rgba(232,233,228,.14)}
.ap--france .fr-stat-c{border-radius:14px;padding:10px 12px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.ap--france .fr-stat-c b{color:#0B0E13;font-weight:800}
.ap--france .fr-stat-c span{color:#5A5F68}
.ap--france .fr-explo{border-radius:16px;padding:11px 14px;color:#C3CDD8;
  background:rgba(127,212,232,.10);box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(127,212,232,.28)}
.ap--france .fr-fin-a .btn{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}

/* la fiche d'un territoire : sombre, mais ses lignes sont lisibles */
.ap--france .fr-fiche h3,.ap--france .fr-fiche b{color:#fff}
.ap--france .fr-fiche li,.ap--france .fr-fiche p{color:#C3CDD8}

/* la bannière de réussite */
.fr-banniere{color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#EFE7D4);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 10px 0 6px #0B0E13}
.fr-banniere b{font-family:var(--display);font-weight:800;text-transform:uppercase}
.fr-banniere span{color:#4A5460}

/* ——————————————————————— LA CARTE ELLE-MÊME ——————————————————————— */
.fr-carte{border-radius:26px;overflow:hidden;background:#7FC9E4;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.fr-svg .fr-reg{stroke:#0B0E13;stroke-width:4.4;stroke-linejoin:round;fill:transparent;
  transition:fill .2s,stroke-width .2s}
.fr-svg .fr-reg:hover,.fr-svg .fr-reg.survol{fill:rgba(11,14,19,.14);stroke-width:6}
.fr-svg .fr-reg.on{fill:var(--c);stroke-width:4.4;opacity:1}
.fr-svg .fr-reg.faux{fill:#E3051C}
.fr-svg .fr-deps path,.fr-svg .fr-dep{stroke:#0B0E13;stroke-width:2.2;stroke-linejoin:round}
.fr-svg .fr-dep{fill:transparent}
.fr-svg .fr-dep:hover,.fr-svg .fr-dep.survol{fill:rgba(11,14,19,.16)}
.fr-svg .fr-dep.on{fill:var(--c);opacity:1}
.fr-svg text{font-family:var(--display);font-weight:800;fill:#0B0E13;
  paint-order:stroke;stroke:#FFFDF4;stroke-width:5px;stroke-linejoin:round}
.fr-svg .fr-v circle:first-child{fill:#0B0E13}
.fr-svg .fr-e-fond{stroke:#2E86B8;stroke-linecap:round}
.fr-svg .fr-e-riv:hover .fr-e-fond{stroke:#12557E}
.fr-svg .fr-rose circle{fill:#FFFDF4;stroke:#0B0E13;stroke-width:3.4}
.fr-svg .fr-echelle rect{fill:#0B0E13}
.fr-svg .fr-m-vagues path{stroke:#FFFFFF;opacity:.55;stroke-width:3.4}
.fr-svg .fr-m-nuages ellipse{fill:#FFFFFF;opacity:.6}
.fr-svg .fr-e-pastille{fill:#FFFDF4;stroke:#0B0E13;stroke-width:3.4}
.fr-svg .fr-d-foret path,.fr-svg .fr-d-mont path{stroke:#0B0E13;stroke-width:2.2;stroke-linejoin:round}
/* les vignettes d'outre-mer, posées sur le bord de la carte */
.fr-om-cadre{fill:#FBF6E9;stroke:#0B0E13;stroke-width:3.4}
.fr-om-forme{fill:#D9C894;stroke:#0B0E13;stroke-width:2.6;stroke-linejoin:round}
.fr-om:hover .fr-om-forme{fill:#FFCE00}
.fr-om-lab{fill:#0B0E13;font-family:var(--mono);font-weight:700}
.fr-om-rail{stroke:#0B0E13;stroke-width:3}

@media (max-width:760px){
  .fr-view .fr-mini{display:none}
  .fr-view .fr-hero{padding:var(--sp-5) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 16px)}
  .fr-vis{height:84px}
  .fr-vis svg{width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){
  .fr-view .fr-carte-jeu{animation:none}
  .fr-view .fr-carte-jeu:hover,.ap--france .fr-mode:hover,
  .ap--france .fr-jeton:hover,.ap--france .fr-choix-b:hover{transform:none}
}


/* les pictogrammes de France portent désormais leur propre cerne */
.fr-vis svg,.fr-mode-vis svg,.fr-e-emb svg{stroke:#0B0E13}
.fr-vis svg{filter:none}

/* — Le planisphère et les pastilles d'océan, en cartoon — */
.ap--france .fr-monde{width:100%;max-width:620px;margin:0 auto;border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.fr-monde-mer{fill:#7FC9E4}
.fr-monde-t{fill:#E7D9AE;stroke:#0B0E13;stroke-width:1.6;stroke-linejoin:round}
.ap--france .fr-zoneo circle{fill:#FBF6E9;stroke:#0B0E13;stroke-width:2;
  transition:fill .18s var(--ease-std),transform .18s var(--ease-back)}
.ap--france .fr-zoneo:hover circle{fill:#FFCE00}
.ap--france .fr-zoneo text{fill:#0B0E13;font-family:var(--mono);font-size:4.4px;font-weight:700;
  paint-order:stroke;stroke:#FFFDF4;stroke-width:2.6px;stroke-linejoin:round;pointer-events:none}
.ap--france .fr-zoneo.juste circle{fill:#3ED07A;stroke:#0B0E13}
.ap--france .fr-zoneo.faux circle{fill:#E3051C;stroke:#0B0E13}
/* les silhouettes d'îles portent du détail : un trait moins gras */
.ap--france .fr-sil-p{stroke-width:3.2}
.ap--france .fr-silhouette--petit .fr-sil-p{stroke-width:4}

/* ==========================================================================
   CRÉEZ VOTRE LIGNE — LE PLAN PASSE AU SOMBRE
   Le grand rectangle crème était la seule surface pâle du site. Il devient
   une table de nuit à la Metro City : fond profond, cernes noirs, et les
   commandes restent des jetons crème par-dessus.
   ========================================================================== */
.ap--ligne .lp-plan{background:#0F1720;
  background-image:
    radial-gradient(120% 90% at 50% -10%,rgba(62,143,212,.14),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 42px);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
/* les noms de station : encre claire, halo noir — l'inverse de la version papier */
.ap--ligne .lp-nom-st{fill:#FFFDF4;paint-order:stroke;stroke:#0B0E13;stroke-width:4px;
  stroke-linejoin:round;font-weight:800}
.ap--ligne .lp-nom-role{fill:#8FA3B8;paint-order:stroke;stroke:#0B0E13;stroke-width:3px}
/* les 522 pastilles libres : visibles sans éblouir */
.ap--ligne .lp-pt{fill:#7E8EA0;stroke:#0B0E13;stroke-width:1.2}
.ap--ligne .lp-pt:hover{fill:#FFCE00}
/* la légende et le compteur restent des jetons crème posés sur le plan */
.ap--ligne .lp-lg-seine{height:5px;background:#2D86B8;box-shadow:0 0 0 1.5px #0B0E13}
.ap--ligne .lp-lg-paris{background:#27364A;box-shadow:0 0 0 1.5px #0B0E13}
.ap--ligne .lp-lg-pt{background:#7E8EA0;box-shadow:0 0 0 1.5px #0B0E13}

/* — Solitaire : une colonne d'une seule carte est figée — */
.so-carte.so-seule{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #B9803A,0 4px 0 5px #0B0E13}
.so-carte.so-seule::after{content:"seule";position:absolute;right:6px;bottom:6px;z-index:3;
  padding:.2em .5em;border-radius:999px;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#0B0E13;background:#E8A54A;
  box-shadow:0 0 0 1.5px #0B0E13;pointer-events:none}

/* le combo ne s'affiche plus pendant la course */
.rn-combo{display:none!important}

/* les tableaux dessinés remplacent les maquettes : ils remplissent leur cadre */
.mc-or-vis2 svg,.mcorx-vis svg{display:block;width:100%;height:100%}
.mcorx-vis{position:relative;overflow:hidden}

/* ==========================================================================
   METRO RUNNER — LE PLEIN ÉCRAN
   ========================================================================== */
.rn-plein{position:relative;z-index:30;flex:none;margin-left:auto;display:grid;place-items:center;width:38px;height:38px;
  padding:0;border:0;border-radius:12px;cursor:pointer;pointer-events:auto;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  transition:transform .14s var(--ease-back)}
.rn-plein svg{display:block;width:20px;height:20px}
.rn-plein:hover{transform:translateY(-2px)}
.rn-plein:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13}
.rn-plein.on{color:#FFCE00;background:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 4px #FFCE00}
/* l'API du navigateur : la scène occupe la dalle entière */
.rn-scene:fullscreen,.rn-scene:-webkit-full-screen{
  width:100vw;height:100vh;max-width:none;margin:0;border-radius:0;box-shadow:none}
.rn-scene:fullscreen .rn-cv,.rn-scene:-webkit-full-screen .rn-cv{width:100%;height:100%}
/* le filet, quand le navigateur refuse : plein écran en CSS */
.rn-scene.rn-plein-css{position:fixed;inset:0;z-index:9000;
  width:100vw;height:100dvh;max-width:none;margin:0;border-radius:0;box-shadow:none}
@media (max-width:760px){ .rn-plein{width:34px;height:34px} .rn-plein svg{width:17px;height:17px} }

/* ==========================================================================
   CRÉEZ VOTRE LIGNE — 2 · POSEZ VOS STATIONS
   --------------------------------------------------------------------------
   C'était le dernier grand bloc crème de l'atelier, et le plus encombré :
   le champ, deux boutons et les suggestions se serraient sur une seule
   ligne. Il passe en pupitre sombre — la facture des cases d'info de Metro
   City — et tout ce qu'on manipule y reste en jetons crème cernés de noir.
   La disposition devient une grille lisible : le champ sur sa ligne, l'action
   principale à sa droite, les suggestions en dessous avec leur intitulé.
   ========================================================================== */
.ap--ligne .lp-saisie{margin-top:var(--sp-5);border-radius:22px;
  padding:var(--sp-4) var(--sp-4) var(--sp-4);
  background:
    radial-gradient(130% 120% at 100% 0%,color-mix(in srgb,var(--c,#3E8FD4) 26%,transparent),transparent 62%),
    linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 34%,transparent),
    0 8px 0 5px #0B0E13}
.ap--ligne .lp-saisie-t{gap:12px;margin-bottom:var(--sp-4);align-items:center}
.ap--ligne .lp-saisie-t b{color:#fff;font-weight:800;font-size:1.06rem;text-transform:uppercase;
  letter-spacing:.01em}
.ap--ligne .lp-saisie-t small{padding:.3em .8em;border-radius:999px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.08em;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13}
/* la grille : le champ prend toute la largeur utile, l'action reste à droite */
.ap--ligne .lp-saisie-r{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:stretch}
.ap--ligne .lp-saisie-ac{min-width:0;max-width:none}
.ap--ligne .lp-saisie .lp-champ{width:100%;border-radius:14px;padding:.95em 1.1em;font-weight:700;
  color:#0B0E13;background:linear-gradient(180deg,#FFFDF4,#F2EAD6);
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 3px 0 rgba(11,14,19,.10)}
.ap--ligne .lp-saisie .lp-champ::placeholder{color:#8A8272;font-weight:600}
.ap--ligne .lp-saisie .lp-champ:focus{outline:none;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c,#3E8FD4),inset 0 3px 0 rgba(11,14,19,.10)}
/* les deux boutons : le principal porte la couleur de la ligne */
.ap--ligne .lp-saisie .btn{border-radius:14px;padding:.9em 1.2em;white-space:nowrap}
.ap--ligne .lp-saisie .btn--solid{color:#fff;background:var(--c,#3E8FD4);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--ligne .lp-saisie .btn--solid:hover{transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.ap--ligne .lp-saisie .btn--solid:active{transform:translateY(3px);
  box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
/* …et il respire tant que le champ attend une station */
.ap--ligne .lp-saisie .btn--solid{animation:lpPret 2.6s ease-in-out infinite}
@keyframes lpPret{0%,100%{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
  50%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 45%,transparent),0 4px 0 5px #0B0E13}}

/* les suggestions : leur propre rang, avec un intitulé qui se lit */
.ap--ligne .lp-sug{margin-top:var(--sp-4);gap:8px;align-items:center}
.ap--ligne .lp-sug-t{width:100%;margin:0 0 2px;color:#8FA3B8;font-size:.6rem}
.ap--ligne .lp-sug-b{border-radius:999px;padding:.5em 1em;font-weight:700;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  animation:mcInfoIn .38s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*45ms)}
.ap--ligne .lp-sug-b:hover{transform:translateY(-3px);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c,#3E8FD4),0 6px 0 5px #0B0E13}

/* — LE CHANTIER — la voie se construit sous les yeux — */
.ap--ligne .lp-chantier{margin-top:var(--sp-4);border-radius:22px;padding:var(--sp-4) var(--sp-3);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 38px),
    linear-gradient(170deg,#1B2533,#0C1118);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 26%,transparent),
    0 8px 0 5px #0B0E13}
.ap--ligne .lp-ch-fond{opacity:.5}
.ap--ligne .lp-ch-quai{fill:#2A3644;stroke:#0B0E13;stroke-width:2}
.ap--ligne .lp-ch-seg{stroke:var(--c,#3E8FD4);stroke-linecap:round}
.ap--ligne .lp-ch-rond{fill:#FFFDF4;stroke:#0B0E13;stroke-width:2.6}
.ap--ligne .lp-ch-nom{fill:#E8EEF5;paint-order:stroke;stroke:#0B0E13;stroke-width:3.4px;
  stroke-linejoin:round;font-weight:700}
.ap--ligne .lp-ch-plaque{fill:#123A63;stroke:#0B0E13;stroke-width:2}
.ap--ligne .lp-ch-bout{fill:#FFCE00;stroke:#0B0E13;stroke-width:2.4}
.ap--ligne .lp-ch-abri{fill:#25323F;stroke:#0B0E13;stroke-width:2}
/* chaque station arrive à son tour : la ligne se pose au lieu d'apparaître */
.ap--ligne .lp-ch-car{animation:lpPose .42s var(--ease-back) backwards;
  animation-delay:calc(min(var(--i,0),16)*55ms);transform-box:fill-box;transform-origin:bottom center}
@keyframes lpPose{from{opacity:0;transform:translateY(12px) scale(.86)}}
.ap--ligne .lp-ch-vide{color:#8FA3B8}
.ap--ligne .lp-ch-vide b{color:#fff}
/* la rame du chantier glisse le long de la voie */
.ap--ligne .lp-chantier .builder-car{animation:lpGlisse 9s ease-in-out infinite alternate}
@keyframes lpGlisse{from{transform:translateX(0)}to{transform:translateX(14px)}}

@media (max-width:640px){
  .ap--ligne .lp-saisie-r{grid-template-columns:1fr;gap:8px}
  .ap--ligne .lp-saisie .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ap--ligne .lp-saisie .btn--solid,.ap--ligne .lp-sug-b,
  .ap--ligne .lp-ch-car,.ap--ligne .lp-chantier .builder-car{animation:none}
}

/* ==========================================================================
   CRÉEZ VOTRE LIGNE — LA REFONTE COMPLÈTE
   --------------------------------------------------------------------------
   L'atelier était la dernière page en papier crème du site : trois grands
   panneaux pâles à la suite, une palette de vingt-quatre pastilles serrées
   sur un seul rang, et un plan qui ne servait que de fond.
   Il devient un ATELIER : des pupitres sombres à la façon des cases d'info
   de Metro City, et sur ces pupitres, en crème cerné de noir, tout ce que
   la main touche — champs, pastilles de couleur, étiquettes de station,
   boutons. Une seule couleur d'accent : celle de la ligne qu'on dessine.
   ========================================================================== */

/* — 1 · L'IDENTITÉ — le pupitre, puis la palette sur son propre rang — */
.ap--ligne .lp-ident{
  display:grid;grid-template-columns:auto minmax(0,1fr) 108px;
  gap:16px 18px;align-items:end;margin-top:var(--sp-5);padding:20px 22px 22px;
  border-radius:22px;color:#C3CDD8;
  background:
    radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--c,#3E8FD4) 24%,transparent),transparent 60%),
    linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 34%,transparent),
    0 8px 0 5px #0B0E13}
.ap--ligne .lp-ident label>span{color:#8FA3B8}
.ap--ligne .lp-ident .lp-ident-coul{grid-column:1/-1;gap:10px}
/* la pastille de la ligne : plus grosse, elle est le sujet */
.ap--ligne .lp-badge{width:74px;height:74px;font-size:1.5rem;border:0;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(255,253,244,.9),0 5px 0 6px #0B0E13;
  animation:lpBadge 3.6s ease-in-out infinite}
@keyframes lpBadge{50%{transform:translateY(-3px) rotate(-3deg)}}
/* les champs : des plaques crème */
.ap--ligne .lp-nom,.ap--ligne .lp-num{border-radius:14px;padding:.86em 1em;font-size:1.02rem;
  background:linear-gradient(180deg,#FFFDF4,#F2EAD6);
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 3px 0 rgba(11,14,19,.10)}
.ap--ligne .lp-nom:focus,.ap--ligne .lp-num:focus{
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c,#3E8FD4),inset 0 3px 0 rgba(11,14,19,.10)}
/* la palette : une grille de vraies cibles, plus un rang de vingt-quatre puces */
.ap--ligne .lp-pal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:9px;max-width:none}
@media (max-width:900px){ .ap--ligne .lp-pal{grid-template-columns:repeat(8,minmax(0,1fr))} }
.ap--ligne .lp-pal-c{width:100%;height:auto;aspect-ratio:1;border-radius:13px;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  transition:transform .14s var(--ease-back),box-shadow .14s var(--ease-back)}
.ap--ligne .lp-pal-c:hover{transform:translateY(-3px);
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.ap--ligne .lp-pal-c.on{transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFFDF4,0 5px 0 5px #0B0E13}
.ap--ligne .lp-pal-c.on::after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:7px;
  border:0 solid #0B0E13;border-width:0 0 3px 3px;transform:rotate(-45deg) translateY(-2px)}
.ap--ligne .lp-pal-c{position:relative}

/* — LE BANDEAU — il annonce la ligne, il doit vivre — */
.ap--ligne .lph{box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--c,#3E8FD4) 40%,transparent),
  0 9px 0 6px #0B0E13}
.ap--ligne .lph-past{width:64px;height:64px;font-size:1.7rem;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(255,253,244,.85),0 4px 0 6px #0B0E13}
.ap--ligne .lph-nom{letter-spacing:-.01em}

/* — LES TITRES DE SECTION — ils cadencent la page — */
.ap--ligne .lp-sec{animation:lpSec .5s var(--ease-back) backwards}
@keyframes lpSec{from{opacity:0;transform:translateX(-18px)}}
.ap--ligne .lp-sec::before{background:var(--c,#3E8FD4);box-shadow:0 0 0 2px #0B0E13}

/* — 3 · LE PUPITRE ET LE PLAN — deux colonnes mieux équilibrées — */
.ap--ligne .lp-duo{margin-top:18px;gap:18px;
  grid-template-columns:minmax(260px,32%) minmax(0,1fr);align-items:start}
.ap--ligne .lp-pupitre{padding:16px;border-radius:22px;color:#C3CDD8;
  background:
    radial-gradient(130% 110% at 100% 0%,color-mix(in srgb,var(--c,#3E8FD4) 20%,transparent),transparent 60%),
    linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 30%,transparent),
    0 8px 0 5px #0B0E13}
.ap--ligne .lp-pupitre>.hint{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#8FA3B8}
.ap--ligne .lp-pupitre>.hint::before{content:"";width:10px;height:10px;border-radius:50%;
  background:var(--c,#3E8FD4);box-shadow:0 0 0 2px #0B0E13}
.ap--ligne .lp-liste{max-height:min(58vh,520px);padding-right:4px}
/* chaque station arrive à son tour */
.ap--ligne .lp-row{animation:lpRow .4s var(--ease-back) backwards;
  animation-delay:calc(min(var(--i,0),14)*40ms)}
@keyframes lpRow{from{opacity:0;transform:translateX(-14px)}}
.ap--ligne .lp-row:hover{transform:translateY(-2px);
  box-shadow:0 0 0 2px #0B0E13,0 5px 0 2px #0B0E13}
.ap--ligne .sortrow .idx{color:#fff;background:var(--c,#3E8FD4);box-shadow:0 0 0 2px #0B0E13}
.ap--ligne .lp-bout{padding:.2em .6em;border-radius:999px;font-family:var(--mono);font-size:.5rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:#0B0E13}
.ap--ligne .lp-x{width:28px;height:28px;border-radius:9px;color:#0B0E13;
  background:linear-gradient(180deg,#FFE0E2,#F6C6CA);box-shadow:0 0 0 2px #0B0E13}
.ap--ligne .lp-x:hover{color:#fff;background:#E3051C;box-shadow:0 0 0 2px #0B0E13}

/* — LE PLAN — un plateau, pas un fond — */
.ap--ligne .lp-plan{border-radius:22px;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px color-mix(in srgb,var(--c,#3E8FD4) 30%,transparent),
    0 9px 0 6px #0B0E13}
.ap--ligne .lp-plan::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  border-radius:19px;
  background:radial-gradient(120% 95% at 50% 42%,transparent 52%,rgba(5,9,14,.42) 100%)}
.ap--ligne .lp-outils,.ap--ligne .lp-compteur,.ap--ligne .lp-legende,.ap--ligne .lp-tip{z-index:2}
.ap--ligne .lp-compteur{padding:.4em .95em;border-radius:999px;font-family:var(--mono);font-size:.66rem;
  font-weight:700;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.ap--ligne .lp-legende span{padding:.34em .8em;border-radius:999px;font-family:var(--mono);
  font-size:.58rem;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13}
/* le tracé se dessine, puis respire */
.ap--ligne .lp-trait{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c,#3E8FD4) 55%,transparent))}
.ap--ligne .lp-st-neuve{animation:lpOnde .9s var(--ease-out,ease-out) forwards}
@keyframes lpOnde{to{r:46;opacity:0;stroke-width:1}}

/* — LES ACTIONS DU BAS — la principale porte la couleur de la ligne — */
.ap--ligne .lp-actions{gap:10px;margin-top:20px;flex-wrap:wrap}
.ap--ligne .lp-actions .btn{border-radius:14px}
.ap--ligne .lp-actions .btn--solid,.ap--ligne .lp-actions .btn--solid:hover{
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.ap--ligne .lp-actions .btn--solid:active{transform:translateY(3px);
  box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}

@media (max-width:900px){
  .ap--ligne .lp-duo{grid-template-columns:minmax(0,1fr)}
  .ap--ligne .lp-liste{max-height:min(42vh,360px)}
}
@media (max-width:640px){
  .ap--ligne .lp-ident{grid-template-columns:auto minmax(0,1fr);padding:16px}
  .ap--ligne .lp-ident label:nth-of-type(2){grid-column:1/-1}
  .ap--ligne .lp-badge{width:60px;height:60px;font-size:1.25rem}
  .ap--ligne .lp-pal{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .ap--ligne .lp-badge,.ap--ligne .lp-sec,.ap--ligne .lp-row{animation:none}
}

/* ==========================================================================
   CRÉEZ VOTRE LIGNE — LA TEINTE CAFÉ CRÈME DE METRO CITY
   --------------------------------------------------------------------------
   L'atelier tirait sur un crème froid, presque blanc (#F5F2EA) : à côté de
   Metro City, qui travaille un beige chaud, il paraissait éteint. Il reprend
   exactement les crèmes de Metro City, et les pupitres sombres se réchauffent
   d'autant — un brun de café au lieu d'un gris bleuté — pour que la page
   tienne d'un seul ton.
   ========================================================================== */
.ap--ligne{--pap:#E6DBC1;--cr-haut:#E6DBC1;--cr-bas:#D4C6A6;--cr-plat:#DED1B4;
  --cr-blanc:#ECE3CF;--gr:#6B6152;--k:#0B0E13;
  /* les deux bruns des pupitres */
  --pup-haut:#241D16;--pup-bas:#15100B}

/* les surfaces crème : un vrai café crème, en dégradé comme les tuiles de MC */
.ap--ligne .sortrow,.ap--ligne .lp-row,.ap--ligne .btn,.ap--ligne .lp-o,
.ap--ligne .lp-sug-b,.ap--ligne .lp-compteur,.ap--ligne .lp-legende span,
.ap--ligne .lp-tip,.ap--ligne .ac ul,.ap--ligne .lp-vide-astuce{
  background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas));color:var(--k)}
.ap--ligne .btn:hover,.ap--ligne .lp-o:hover,.ap--ligne .lp-sug-b:hover{
  background:linear-gradient(180deg,#F0E7D2,#DCCFB2)}
.ap--ligne .lp-nom,.ap--ligne .lp-num,.ap--ligne .lp-saisie .lp-champ,
.ap--ligne .ac .lp-champ{
  background:linear-gradient(180deg,var(--cr-blanc),var(--cr-plat));color:var(--k)}
.ap--ligne .lp-nom::placeholder,.ap--ligne .lp-num::placeholder,
.ap--ligne .lp-saisie .lp-champ::placeholder{color:#8A7F6C}
.ap--ligne .ac li[aria-selected="true"],.ap--ligne .ac li:hover{background:var(--cr-plat)}

/* les pupitres : le même brun chaud partout */
.ap--ligne .lp-ident,.ap--ligne .lp-saisie,.ap--ligne .lp-pupitre{
  color:#D8CCB6;
  background:
    radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--c,#3E8FD4) 22%,transparent),transparent 62%),
    linear-gradient(165deg,var(--pup-haut),var(--pup-bas) 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 32%,transparent),
    0 8px 0 5px #0B0E13}
.ap--ligne .lp-ident label>span,.ap--ligne .lp-pupitre>.hint,
.ap--ligne .lp-sug-t,.ap--ligne .lp-ch-vide{color:#A2947C}
.ap--ligne .lp-saisie-t b{color:#FBF6E9}
.ap--ligne .lp-chantier{
  background:
    repeating-linear-gradient(90deg,rgba(255,244,220,.030) 0 1px,transparent 1px 38px),
    linear-gradient(170deg,#2A2219,#140F0A);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 24%,transparent),
    0 8px 0 5px #0B0E13}
.ap--ligne .lp-ch-quai{fill:#3A3025;stroke:#0B0E13}
.ap--ligne .lp-ch-abri{fill:#332A20;stroke:#0B0E13}
.ap--ligne .lp-ch-nom{fill:#F0E6D2}

/* le bandeau de tête suit la même crème */
.ap--ligne .lph-txt::before{
  background:linear-gradient(90deg,rgba(230,219,193,.95) 0 60%,rgba(230,219,193,0))}
.ap--ligne .lph{background:linear-gradient(180deg,var(--cr-haut),var(--cr-bas))}

/* le plan : une table de café, pas une table de nuit bleue */
.ap--ligne .lp-plan{background:#191309;
  background-image:
    radial-gradient(120% 90% at 50% -10%,rgba(232,196,110,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,244,220,.028) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(255,244,220,.028) 0 1px,transparent 1px 42px)}
.ap--ligne .lp-nom-role{fill:#A2947C}
.ap--ligne .lp-pt{fill:#8E8064;stroke:#0B0E13}
.ap--ligne .lp-lg-paris{background:#43372A;box-shadow:0 0 0 1.5px #0B0E13}
.ap--ligne .lp-lg-pt{background:#8E8064;box-shadow:0 0 0 1.5px #0B0E13}

/* — la couleur de la ligne baigne toute la page de l'atelier — */
.ap--ligne{position:relative;isolation:isolate}
.ap--ligne::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--c,#3E8FD4) 20%,transparent),transparent 58%),
    radial-gradient(90% 60% at 100% 100%,color-mix(in srgb,var(--c,#3E8FD4) 12%,transparent),transparent 60%),
    linear-gradient(180deg,color-mix(in srgb,var(--c,#3E8FD4) 7%,transparent),transparent 40%);
  transition:background .4s var(--ease-std)}
/* le tracé ne bave plus : le halo est parti */
.ap--ligne .lp-trait{filter:none}

/* ==========================================================================
   LE PLAN DE L'ATELIER — REFAIT, ET TEINTÉ PAR LA LIGNE
   --------------------------------------------------------------------------
   Tout ce qui se voyait sur la carte vivait dans le repère de la carte :
   les traits, les points, la rame. Zoomer sur sa ligne les gonflait tous
   ensemble. Ils sont désormais figés à l'écran — les traits par
   non-scaling-stroke, les points par le même moyen (un segment nul à bout
   rond : c'est l'épaisseur qui fait le diamètre), la rame par une
   contre-échelle en 1/zoom.
   Et la couleur choisie ne borde plus le cadre : elle EST le fond du plan,
   la teinte de la ville, celle du réseau et celle des bois.
   ========================================================================== */
.ap--ligne .lp-plan{
  background:
    radial-gradient(120% 85% at 50% -12%,color-mix(in srgb,var(--c,#3E8FD4) 30%,transparent),transparent 62%),
    radial-gradient(85% 70% at 105% 112%,color-mix(in srgb,var(--c,#3E8FD4) 18%,transparent),transparent 62%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,transparent 1px 46px),
    linear-gradient(170deg,color-mix(in srgb,var(--c,#3E8FD4) 12%,#141119),
                            color-mix(in srgb,var(--c,#3E8FD4) 6%,#0A0810));
  transition:background .4s var(--ease-std)}
/* la ville : un plateau qui prend une pointe de la couleur */
.ap--ligne .lp-paris{fill:color-mix(in srgb,var(--c,#3E8FD4) 16%,#2F2B26)}
.ap--ligne .lp-paris-rim{stroke:color-mix(in srgb,var(--c,#3E8FD4) 34%,#6B6155);
  stroke-width:1.2;opacity:.55}
.ap--ligne .lp-bois{fill:color-mix(in srgb,var(--c,#3E8FD4) 10%,#24402B)}
/* le réseau existant : présent, jamais bavard */
.ap--ligne .lp-res-b{stroke:color-mix(in srgb,var(--c,#3E8FD4) 22%,#3A342B);stroke-opacity:.6}
.ap--ligne .lp-res-h{stroke:color-mix(in srgb,var(--c,#3E8FD4) 30%,#7A7263);stroke-opacity:.55}
/* les stations libres : des têtes d'épingle, pas des pastilles */
.ap--ligne .lp-pt{stroke:color-mix(in srgb,var(--c,#3E8FD4) 30%,#8E8778);stroke-opacity:.85}
.ap--ligne .lp-st:hover .lp-pt{stroke:#FFCE00;stroke-opacity:1}
/* les jetons posés sur le plan suivent la teinte */
.ap--ligne .lp-lg-paris{background:color-mix(in srgb,var(--c,#3E8FD4) 16%,#2F2B26)}
.ap--ligne .lp-lg-pt{background:color-mix(in srgb,var(--c,#3E8FD4) 30%,#8E8778)}

/* ==========================================================================
   CRÉEZ VOTRE LIGNE — LA PALETTE, ET LA TEINTE PARTOUT
   --------------------------------------------------------------------------
   La palette était une grille de carrés : vingt-quatre tuiles alignées, sans
   rapport avec ce qu'elles désignent. Ce sont maintenant des PASTILLES DE
   LIGNE, rondes comme celles du réseau, qui se soulèvent au survol et se
   couronnent quand on les choisit.
   Et la couleur retenue ne teinte plus seulement le plan : elle passe dans
   les pupitres, les titres, le chantier et les pictogrammes.
   ========================================================================== */
.ap--ligne .lp-pal{display:flex;flex-wrap:wrap;gap:11px;max-width:none;padding:2px 0 4px}
.ap--ligne .lp-pal-c{position:relative;width:38px;height:38px;flex:none;aspect-ratio:auto;
  border-radius:50%;padding:0;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  transition:transform .2s var(--ease-back),box-shadow .2s var(--ease-back);
  animation:lpPalIn .4s var(--ease-back) backwards;
  animation-delay:calc(var(--n,0)*22ms)}
@keyframes lpPalIn{from{opacity:0;transform:translateY(10px) scale(.6)}}
/* une lueur intérieure : la pastille a du relief, pas un aplat */
.ap--ligne .lp-pal-c::before{content:"";position:absolute;left:18%;top:14%;width:44%;height:32%;
  border-radius:50%;background:rgba(255,255,255,.34);pointer-events:none}
.ap--ligne .lp-pal-c:hover{transform:translateY(-6px) rotate(-6deg);
  box-shadow:0 0 0 2.5px #0B0E13,0 10px 0 2.5px #0B0E13}
.ap--ligne .lp-pal-c:active{transform:translateY(2px) scale(.94);
  box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13}
/* la couronne de la couleur retenue, et sa coche */
.ap--ligne .lp-pal-c.on{transform:translateY(-5px) scale(1.1);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFFDF4,0 0 0 8.5px #0B0E13,0 9px 0 8.5px #0B0E13;
  animation:lpPalPick .45s var(--ease-back)}
@keyframes lpPalPick{0%{transform:translateY(-5px) scale(.8) rotate(-14deg)}
  55%{transform:translateY(-9px) scale(1.22) rotate(6deg)}
  100%{transform:translateY(-5px) scale(1.1) rotate(0)}}
.ap--ligne .lp-pal-c.on::after{content:"";position:absolute;inset:0;margin:auto;
  width:13px;height:8px;border:0 solid #FFFDF4;border-width:0 0 3.2px 3.2px;
  transform:rotate(-45deg) translate(1px,-2px);
  filter:drop-shadow(0 1px 0 rgba(11,14,19,.55))}

/* — la teinte choisie irrigue toute la page — */
.ap--ligne .lp-ident,.ap--ligne .lp-saisie,.ap--ligne .lp-pupitre{
  background:
    radial-gradient(130% 120% at 0% 0%,color-mix(in srgb,var(--c,#3E8FD4) 34%,transparent),transparent 64%),
    linear-gradient(165deg,color-mix(in srgb,var(--c,#3E8FD4) 9%,var(--pup-haut)),
                           color-mix(in srgb,var(--c,#3E8FD4) 4%,var(--pup-bas)) 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 46%,transparent),
    0 8px 0 5px #0B0E13;
  transition:background .4s var(--ease-std),box-shadow .4s var(--ease-std)}
.ap--ligne .lp-chantier{
  background:
    repeating-linear-gradient(90deg,rgba(255,244,220,.030) 0 1px,transparent 1px 38px),
    linear-gradient(170deg,color-mix(in srgb,var(--c,#3E8FD4) 11%,#2A2219),
                           color-mix(in srgb,var(--c,#3E8FD4) 5%,#140F0A));
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 36%,transparent),
    0 8px 0 5px #0B0E13;transition:background .4s var(--ease-std)}
.ap--ligne .lp-ch-quai{fill:color-mix(in srgb,var(--c,#3E8FD4) 14%,#3A3025)}
.ap--ligne .lp-ch-abri{fill:color-mix(in srgb,var(--c,#3E8FD4) 10%,#332A20)}
/* les titres de section portent la couleur */
.ap--ligne .lp-sec{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px color-mix(in srgb,var(--c,#3E8FD4) 34%,transparent),
  0 5px 0 5px #0B0E13;transition:box-shadow .4s var(--ease-std)}
/* les jetons crème prennent une pointe de la teinte */
.ap--ligne .lp-sug-b,.ap--ligne .lp-compteur,.ap--ligne .lp-legende span{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c,#3E8FD4) 7%,var(--cr-haut)),
    color-mix(in srgb,var(--c,#3E8FD4) 12%,var(--cr-bas)))}
.ap--ligne .sortrow,.ap--ligne .lp-row{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c,#3E8FD4) 5%,var(--cr-haut)),
    color-mix(in srgb,var(--c,#3E8FD4) 9%,var(--cr-bas)))}
/* et le bandeau de tête */
.ap--ligne .lph{background:linear-gradient(180deg,
  color-mix(in srgb,var(--c,#3E8FD4) 8%,var(--cr-haut)),
  color-mix(in srgb,var(--c,#3E8FD4) 14%,var(--cr-bas)))}

/* — du mouvement : rien ne doit paraître figé — */
.ap--ligne .lp-vide-ico svg{animation:lpFlotte 3s ease-in-out infinite}
@keyframes lpFlotte{50%{transform:translateY(-5px) rotate(-3deg)}}
.ap--ligne .lp-ch-bout{animation:lpClign 2.4s ease-in-out infinite}
@keyframes lpClign{50%{opacity:.55}}
.ap--ligne .lp-o:hover{transform:translateY(-2px) rotate(-4deg)}
.ap--ligne .lp-x:hover{transform:rotate(90deg) scale(1.1)}
.ap--ligne .lp-x{transition:transform .2s var(--ease-back),background .2s,color .2s}
@media (prefers-reduced-motion:reduce){
  .ap--ligne .lp-pal-c,.ap--ligne .lp-pal-c.on,.ap--ligne .lp-vide-ico svg,
  .ap--ligne .lp-ch-bout{animation:none}
  .ap--ligne .lp-pal-c:hover,.ap--ligne .lp-o:hover,.ap--ligne .lp-x:hover{transform:none}
}

/* — Solitaire : la carte posée sur un quai de correspondance est amarrée — */
.so-carte.so-verrou{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #5B8FD6,0 4px 0 5px #0B0E13}
.so-carte.so-verrou::before{content:"";position:absolute;left:6px;bottom:6px;z-index:3;
  width:15px;height:15px;border-radius:4px;background:#5B8FD6;
  box-shadow:0 0 0 1.5px #0B0E13;pointer-events:none;
  -webkit-mask:radial-gradient(circle at 50% 38%,transparent 2.6px,#000 2.7px);
  mask:radial-gradient(circle at 50% 38%,transparent 2.6px,#000 2.7px)}
.so-carte.so-verrou::after{content:"quai";position:absolute;right:6px;bottom:6px;z-index:3;
  padding:.18em .48em;border-radius:999px;font-family:var(--mono);font-size:.48rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#3E6FB0;
  box-shadow:0 0 0 1.5px #0B0E13;pointer-events:none}

/* — les libellés du plan : des plaques, plus des textes cernés — */
.ap--ligne .lp-nom-plaque{fill:#0B0E13;stroke:color-mix(in srgb,var(--c,#3E8FD4) 62%,#0B0E13);
  stroke-width:1.4;vector-effect:non-scaling-stroke}
.ap--ligne .lp-nom-rpl{fill:var(--c,#3E8FD4);stroke:#0B0E13;stroke-width:1.2;
  vector-effect:non-scaling-stroke}
.ap--ligne .lp-nom-st{fill:#FFFDF4;stroke:none;font-weight:800;paint-order:normal}
.ap--ligne .lp-nom-role{fill:#0B0E13;stroke:none;font-family:var(--mono);font-weight:700;
  text-transform:uppercase;paint-order:normal}

/* — la liste des stations prend franchement la couleur choisie — */
.ap--ligne .sortrow,.ap--ligne .lp-row{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--c,#3E8FD4) 16%,var(--cr-haut)),
    color-mix(in srgb,var(--c,#3E8FD4) 26%,var(--cr-bas)));
  transition:background .4s var(--ease-std)}
.ap--ligne .lp-row:hover{background:linear-gradient(180deg,
  color-mix(in srgb,var(--c,#3E8FD4) 22%,var(--cr-haut)),
  color-mix(in srgb,var(--c,#3E8FD4) 32%,var(--cr-bas)))}
.ap--ligne .lp-row-c small,.ap--ligne .lp-corr small{color:color-mix(in srgb,var(--c,#3E8FD4) 34%,#5A5142)}

/* — À vue d'œil : le sol se lit comme un quai, pas comme le bord du cadre — */
.ekx-sol::after{top:4px;height:11px;opacity:.55}
.ekx-scene{padding-bottom:0}
.ekx-piste{padding-bottom:6px}
/* les deux étiquettes s'écartent du cadre et l'une de l'autre */
.ekx-noms{gap:14px;margin-top:2px}
.ekx-nom{padding:10px 14px}
@media (max-width:640px){
  .ekx-sol,.ekx-piste{bottom:15%}
  .ekx{gap:14px}
}

/* ==========================================================================
   MÉTRO BELOTE — l'habillage
   Cartes crème cernées de noir, tapis sombre de Metro City : la même
   alternance que partout ailleurs.
   ========================================================================== */
.blt-lab{margin:0 0 14px;font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:#9AA3AE;text-align:center}
.blt-menu{padding:var(--sp-4) 0 var(--sp-2)}
.blt-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.blt-mode{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;
  border:0;border-radius:22px;cursor:pointer;text-align:left;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE7D4);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;
  transition:transform .18s var(--ease-back),box-shadow .18s var(--ease-back);
  animation:mcInfoIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*70ms)}
.blt-mode:hover{transform:translateY(-4px);box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 11px 0 3px #0B0E13}
.blt-mode--off{opacity:.55;cursor:not-allowed}
.blt-mode--off:hover{transform:none;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13}
.blt-mode-vis{width:58px;height:82px;margin-bottom:6px}
.blt-mode-vis svg{display:block;width:100%;height:100%;border-radius:8px}
.blt-mode b{font-family:var(--display);font-weight:800;font-size:1.06rem}
.blt-mode span{font-size:.8rem;line-height:1.4;color:#4A5460}
.blt-mode-go{margin-top:8px;padding:.32em .9em;border-radius:999px;font-style:normal;
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--c);box-shadow:0 0 0 2px #0B0E13}
.blt-regle{margin-top:16px;padding:14px 18px;border-radius:20px;color:#C3CDD8;
  background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(27,122,78,.34)}
.blt-regle b{display:block;font-family:var(--display);font-weight:800;color:#fff}
.blt-regle p{margin:.4em 0 0;font-size:.82rem;line-height:1.55}

/* — la table — */
.blt{display:flex;flex-direction:column;gap:12px;position:relative}
.blt-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:18px;
  background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(27,122,78,.30)}
.blt-sco,.blt-pl{display:flex;flex-direction:column;align-items:center;padding:.3em .8em;border-radius:12px;
  color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:0 0 0 2px #0B0E13}
.blt-sco b,.blt-pl b{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1}
.blt-sco span,.blt-pl span{font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6B747C}
.blt-atout{display:flex;align-items:center;gap:8px;margin-left:auto;padding:.32em .8em;border-radius:999px;
  color:#8FA3B8;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.blt-atout.on{color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.blt-past{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  font-family:var(--display);font-weight:800;font-size:.72rem;
  color:var(--i,#fff);background:var(--c,#7A8794);box-shadow:0 0 0 2px #0B0E13}
.blt-carnet{padding:.4em .9em;border-radius:999px;border:0;cursor:pointer;font-family:var(--mono);
  font-size:.66rem;font-weight:700;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}

.blt-table{position:relative;min-height:clamp(250px,36vh,360px);border-radius:24px;padding:12px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(27,122,78,.28),transparent 62%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 16px),
    linear-gradient(170deg,#152A20,#0A1410);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(27,122,78,.34),0 8px 0 6px #0B0E13}
.blt-siege{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:.4em .8em;border-radius:14px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.blt-siege.actif{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 3px 0 5px #0B0E13}
.blt-siege--haut{top:10px;left:50%;transform:translateX(-50%)}
.blt-siege--gauche{left:10px;top:50%;transform:translateY(-50%)}
.blt-siege--droite{right:10px;top:50%;transform:translateY(-50%)}
.blt-nom{font-family:var(--display);font-weight:800;font-size:.78rem}
.blt-dosn{font-family:var(--mono);font-size:.6rem;color:#6B747C}
.blt-tapis{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.blt-pose{position:absolute;pointer-events:none;animation:bltPose .3s var(--ease-back)}
@keyframes bltPose{from{opacity:0;transform:scale(.7)}}
.blt-pose--0{transform:translateY(46px) rotate(2deg)}
.blt-pose--1{transform:translateX(-64px) rotate(-7deg)}
.blt-pose--2{transform:translateY(-46px) rotate(-2deg)}
.blt-pose--3{transform:translateX(64px) rotate(7deg)}
.blt-pose.maitre{box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFCE00,0 6px 0 6px #0B0E13;z-index:3}
.blt-pose.blt-viaCorr::after{content:"↔";position:absolute;top:-10px;right:-8px;z-index:4;
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-weight:800;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.blt-retournee{transform:rotate(-6deg)}

/* — une carte — */
.blt-c{position:relative;display:flex;flex-direction:column;width:112px;flex:none;padding:0;border:0;
  border-radius:14px;overflow:hidden;cursor:default;text-align:left;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE7D4);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  transition:transform .16s var(--ease-back),box-shadow .16s var(--ease-back)}
.blt-c.mini{width:84px;border-radius:11px}
.blt-c.ok{cursor:pointer}
.blt-c.ok:hover{transform:translateY(-10px);box-shadow:0 0 0 2.5px #0B0E13,0 12px 0 2.5px #0B0E13}
.blt-c:disabled{opacity:.62;filter:saturate(.7)}
.blt-c.ok:disabled{opacity:1;filter:none}
.blt-haut{display:flex;align-items:center;gap:6px;padding:5px 7px 4px}
.blt-val{font-family:var(--display);font-weight:800;font-size:.86rem;text-transform:uppercase;
  letter-spacing:.01em}
.blt-c.mini .blt-val{font-size:.72rem}
.blt-sc-h{display:block;line-height:0;box-shadow:inset 0 0 0 2px #0B0E13}
.blt-sc{display:block;width:100%;height:76px}
.blt-c.mini .blt-sc{height:58px}
.blt-bas{display:block;padding:5px 7px 7px}
.blt-bas b{display:block;font-family:var(--display);font-weight:800;font-size:.68rem;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blt-bas small{display:block;margin-top:1px;font-family:var(--mono);font-size:.46rem;
  letter-spacing:.06em;text-transform:uppercase;color:#6B747C}
.blt-c.mini .blt-bas small{display:none}
/* l'atout : cadre doré et bandeau EXPRESS */
.blt-c.atout{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 4px 0 5px #0B0E13}
.blt-express{position:absolute;top:26px;left:-22px;z-index:3;padding:.16em 2em;
  font-family:var(--mono);font-size:.46rem;font-weight:700;letter-spacing:.14em;
  color:#0B0E13;background:#FFCE00;transform:rotate(-38deg);box-shadow:0 0 0 1.5px #0B0E13}
.blt-corr{position:absolute;top:5px;right:5px;z-index:3;display:grid;place-items:center;
  width:17px;height:17px;border-radius:50%;font-family:var(--mono);font-size:.52rem;font-weight:700;
  color:#fff;background:#0B0E13;box-shadow:0 0 0 1.5px #FFFDF4}
.blt-c.dos{background:#10161F}
.blt-dos{display:block;line-height:0}
.blt-dos svg{display:block;width:100%;height:auto}

.blt-main{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:6px 0 2px}
.blt-annonces{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 14px;border-radius:16px;
  background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2px #0B0E13,0 0 0 4px rgba(255,206,0,.30)}
.blt-annonces .blt-lab{margin:0;text-align:left}
.blt-annonces i{font-style:normal;padding:.28em .8em;border-radius:999px;font-family:var(--mono);
  font-size:.62rem;font-weight:700;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13}

.blt-enchere{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;border-radius:18px;
  color:#C3CDD8;background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(27,122,78,.34)}
.blt-enchere p{margin:0;font-family:var(--display);font-weight:800;color:#fff}
.blt-ench-b{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.blt-ench-l{color:var(--i,#fff)!important;background:var(--c)!important}

.blt-msg{position:absolute;left:50%;top:76px;z-index:20;transform:translate(-50%,-8px);
  padding:.5em 1.1em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.9rem;
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease-back)}
.blt-msg.on{opacity:1;transform:translate(-50%,0)}

.blt-bilan{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:22px;border-radius:24px;text-align:center;color:#0B0E13;
  background:linear-gradient(180deg,rgba(251,246,233,.97),rgba(239,231,212,.97));
  box-shadow:0 0 0 3px #0B0E13;animation:mcInfoIn .35s var(--ease-back)}
.blt-bilan b{font-family:var(--display);font-weight:800;font-size:1.6rem;text-transform:uppercase}
.blt-bilan p{margin:0;font-size:.9rem;color:#4A5460}
.blt-tot{font-family:var(--mono);font-weight:700}

.blt-modal{position:fixed;inset:0;z-index:600;display:grid;place-items:center;padding:18px;
  background:rgba(5,9,14,.72)}
.blt-carnet-b{max-width:640px;max-height:82vh;overflow:auto;display:flex;flex-direction:column;gap:12px;
  padding:20px;border-radius:24px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE7D4);box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.blt-carnet-b h3{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase}
.blt-cl{padding:10px 12px;border-radius:16px;background:rgba(11,14,19,.05);
  box-shadow:inset 0 0 0 2px #0B0E13}
.blt-cl>b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800}
.blt-cl-st{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.blt-cl-s{display:flex;align-items:center;gap:8px;padding:.24em .6em;border-radius:8px;
  font-size:.8rem;background:rgba(255,253,244,.7);box-shadow:0 0 0 1.5px rgba(11,14,19,.25)}
.blt-cl-s em{font-style:normal;font-family:var(--mono);font-size:.56rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;min-width:4.4em;color:#6B747C}
.blt-cl-s.bout{box-shadow:0 0 0 1.5px #0B0E13,inset 3px 0 0 var(--c)}
.blt-cl-s small{margin-left:auto;font-family:var(--mono);font-size:.56rem;color:#6B747C}

@media (max-width:760px){
  .blt-c{width:92px}
  .blt-c.mini{width:70px}
  .blt-sc{height:62px}
  .blt-c.mini .blt-sc{height:46px}
  .blt-table{min-height:clamp(210px,30vh,300px)}
  .blt-siege--gauche,.blt-siege--droite{padding:.3em .55em}
  .blt-main{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .blt-mode,.blt-pose,.blt-bilan{animation:none}
  .blt-c.ok:hover,.blt-mode:hover{transform:none}
}


/* ==========================================================================
   MÉTRO BELOTE — LE MOUVEMENT ET LES VISAGES
   ========================================================================== */
/* le bandeau EXPRESS descend sous la vignette : il masquait la ligne */
.blt-express{position:absolute;left:0;right:0;top:auto;bottom:30px;z-index:3;
  padding:.18em 0;text-align:center;transform:none;
  font-family:var(--mono);font-size:.46rem;font-weight:700;letter-spacing:.2em;
  color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 1.5px #0B0E13}
.blt-c.mini .blt-express{bottom:22px;font-size:.4rem}

/* — les sièges : un portrait, un nom, un rôle — */
.blt-siege{gap:2px;padding:.45em .7em;min-width:96px}
.blt-av{display:block;width:44px;height:48px;line-height:0}
.blt-av svg{display:block;width:100%;height:100%}
.blt-siege--bas{bottom:10px;left:50%;transform:translateX(-50%)}
.blt-role{font-family:var(--mono);font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8A8272}
.blt-siege.actif{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px var(--c,#FFCE00),0 3px 0 5px #0B0E13;
  animation:bltTour 1.6s ease-in-out infinite}
@keyframes bltTour{50%{transform:translate(var(--tx,0),var(--ty,0)) scale(1.04)}}
.blt-siege--haut.actif{--tx:-50%}
.blt-siege--bas.actif{--tx:-50%}
.blt-siege--gauche.actif,.blt-siege--droite.actif{--ty:-50%}
.blt-siege.preneur .blt-av{filter:drop-shadow(0 0 6px rgba(255,206,0,.8))}
.blt-preneur{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;
  width:26px;height:26px;border-radius:50%;font-style:normal;font-size:.84rem;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13;
  animation:bltEclair 2.2s ease-in-out infinite}
@keyframes bltEclair{0%,100%{transform:scale(1) rotate(-6deg)}50%{transform:scale(1.14) rotate(6deg)}}
.blt-siege.gagne{box-shadow:0 0 0 2px #0B0E13,0 0 0 6px #3ED07A,0 3px 0 6px #0B0E13;
  animation:bltGagne .5s var(--ease-back)}
@keyframes bltGagne{40%{transform:translate(var(--tx,0),var(--ty,0)) scale(1.14)}}

/* — le tapis : quatre cartes en grand, chacune signée — */
.blt-tapis{pointer-events:none}
.blt-slot{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:transform .45s var(--ease-out,cubic-bezier(.2,.8,.2,1)),opacity .35s;
  animation:bltPose .34s var(--ease-back) backwards}
.blt-slot--0{transform:translateY(96px)}
.blt-slot--1{transform:translate(-152px,-6px)}
.blt-slot--2{transform:translateY(-96px)}
.blt-slot--3{transform:translate(152px,-6px)}
.blt-slot.maitre .blt-c{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #3ED07A,0 6px 0 6px #0B0E13}
.blt-slot.maitre::after{content:"pli";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  z-index:4;padding:.14em .6em;border-radius:999px;font-family:var(--mono);font-size:.48rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0B0E13;background:#3ED07A;
  box-shadow:0 0 0 1.5px #0B0E13}
.blt-slot.part{transform:translate(var(--dx),var(--dy)) scale(.34) rotate(12deg);opacity:0}
.blt-qui{display:flex;align-items:center;gap:5px;padding:.22em .6em .22em .22em;border-radius:999px;
  color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13,0 0 0 4px var(--c,#7A8794)}
.blt-qui i{display:block;width:20px;height:22px;line-height:0}
.blt-qui i svg{display:block;width:100%;height:100%}
.blt-qui b{font-family:var(--display);font-weight:800;font-size:.64rem}
.blt-retournee{transform:rotate(-5deg)}
.blt-viaCorr::after{content:"↔";position:absolute;top:-10px;right:-8px;z-index:5;
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  font-weight:800;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13;
  animation:bltCorr .6s var(--ease-back)}
@keyframes bltCorr{from{transform:scale(0) rotate(-90deg)}}

/* — la distribution : des dos qui filent vers chaque siège — */
.blt-vol{position:absolute;width:52px;height:74px;line-height:0;pointer-events:none;z-index:6;
  transition:transform .42s cubic-bezier(.3,.7,.3,1),opacity .42s}
.blt-vol svg{display:block;width:100%;height:100%;border-radius:6px;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.blt-vol.part{transform:translate(var(--dx,0),var(--dy,0)) scale(.42) rotate(14deg);opacity:0}

/* — la table a besoin de place pour tout ça — */
.blt-table{min-height:clamp(330px,46vh,470px)}
/* — la main : elle respire, et la carte jouable appelle — */
.blt-c.ok{animation:bltDispo 2.8s ease-in-out infinite;animation-delay:calc(var(--n,0)*90ms)}
@keyframes bltDispo{50%{transform:translateY(-4px)}}
.blt-c.ok:hover{animation:none}
.blt-main .blt-c{animation:bltEntre .4s var(--ease-back) backwards;
  animation-delay:calc(var(--n,0)*38ms)}
@keyframes bltEntre{from{opacity:0;transform:translateY(26px) rotate(-6deg)}}
/* le bandeau et l'atout qui bascule */
.blt-atout.on .blt-past{animation:bltEclair 2.6s ease-in-out infinite}
.blt-sco b,.blt-pl b{transition:transform .2s var(--ease-back)}
.blt-sco.bump b,.blt-pl.bump b{transform:scale(1.3)}

@media (max-width:760px){
  .blt-slot--0{transform:translateY(74px)}
  .blt-slot--1{transform:translate(-104px,-4px)}
  .blt-slot--2{transform:translateY(-74px)}
  .blt-slot--3{transform:translate(104px,-4px)}
  .blt-av{width:34px;height:38px}
  .blt-siege{min-width:76px}
  .blt-table{min-height:clamp(280px,40vh,380px)}
}
@media (prefers-reduced-motion:reduce){
  .blt-siege.actif,.blt-preneur,.blt-c.ok,.blt-main .blt-c,.blt-slot,
  .blt-atout.on .blt-past,.blt-viaCorr::after{animation:none}
}

/* — le siège du bas devient une barre : il ne mange plus le centre — */
.blt-siege--bas{flex-direction:row;align-items:center;gap:9px;bottom:8px;padding:.35em .9em .35em .4em}
.blt-siege--bas .blt-av{width:34px;height:38px}
.blt-siege--bas .blt-nom{font-size:.82rem}
.blt-siege--bas .blt-role{margin-left:4px}
.blt-siege--bas .blt-preneur{top:-9px;right:-9px}
/* le tapis remonte d'autant, et la carte du bas avec lui */
.blt-tapis{padding-bottom:78px}
.blt-slot--0{transform:translateY(70px)}
@media (max-width:760px){
  .blt-tapis{padding-bottom:64px}
  .blt-slot--0{transform:translateY(56px)}
  .blt-siege--bas .blt-role{display:none}
}

/* — les quatre cartes du pli s'écartent : elles se chevauchaient — */
.blt-slot .blt-c{width:96px}
.blt-slot .blt-sc{height:64px}
.blt-slot--0{transform:translateY(58px)}
.blt-slot--1{transform:translate(-172px,-8px)}
.blt-slot--2{transform:translateY(-104px)}
.blt-slot--3{transform:translate(172px,-8px)}
/* l'étiquette du joueur du bas passe au-dessus de sa carte : en dessous,
   elle tombait sur son propre siège */
.blt-slot--0{flex-direction:column-reverse}
.blt-table{min-height:clamp(360px,50vh,500px)}
@media (max-width:760px){
  .blt-slot .blt-c{width:78px}
  .blt-slot .blt-sc{height:52px}
  .blt-slot--0{transform:translateY(46px)}
  .blt-slot--1{transform:translate(-112px,-6px)}
  .blt-slot--2{transform:translateY(-82px)}
  .blt-slot--3{transform:translate(112px,-6px)}
  .blt-table{min-height:clamp(300px,44vh,420px)}
}

/* ==========================================================================
   MÉTRO BELOTE — LE TAPIS, LES JETONS, LA DONNE QUI SE VOIT
   ========================================================================== */
/* — le tapis : un vrai feutre, avec son plan de métro en filigrane — */
.blt-table{min-height:clamp(420px,58vh,600px);padding:16px;
  background:
    radial-gradient(60% 46% at 50% 44%,rgba(255,255,255,.055),transparent 70%),
    radial-gradient(130% 92% at 50% 0%,rgba(27,122,78,.34),transparent 64%),
    repeating-linear-gradient(38deg,rgba(255,255,255,.016) 0 3px,transparent 3px 20px),
    repeating-linear-gradient(-38deg,rgba(255,255,255,.016) 0 3px,transparent 3px 20px),
    linear-gradient(170deg,#18382A,#08160F);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #6B4A2A,0 0 0 10px #0B0E13,
    inset 0 0 90px rgba(0,0,0,.55),0 10px 0 10px #0B0E13}
/* les quatre lignes en filigrane, comme un plan gravé dans le feutre */
.blt-table::before{content:"";position:absolute;inset:16px;border-radius:18px;pointer-events:none;
  opacity:.14;
  background:
    linear-gradient(90deg,transparent 8%,#7FD4E8 8% 8.6%,transparent 8.6%),
    linear-gradient(0deg,transparent 22%,#FFCE00 22% 22.5%,transparent 22.5%),
    linear-gradient(56deg,transparent 46%,#FF6B4A 46% 46.5%,transparent 46.5%),
    linear-gradient(-56deg,transparent 64%,#9BD24E 64% 64.5%,transparent 64.5%)}
.blt-table::after{content:"";position:absolute;inset:16px;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.07)}

/* — le paquet qui fond — */
.blt-paquet{position:absolute;left:50%;top:50%;width:62px;height:88px;
  transform:translate(-50%,-50%) translateY(-6px);z-index:5;
  transition:transform .4s var(--ease-back),opacity .4s}
.blt-paquet.part{transform:translate(-50%,-50%) translateY(-40px) scale(.5);opacity:0}
.blt-feuille{position:absolute;inset:0;line-height:0;
  transform:translate(calc(var(--k)*-0.7px),calc(var(--k)*-0.9px)) rotate(calc(var(--k)*-0.4deg));
  transition:opacity .2s,transform .2s}
.blt-feuille svg{display:block;width:100%;height:100%;border-radius:7px;
  box-shadow:0 0 0 2px #0B0E13}
.blt-feuille.off{opacity:0;transform:translateY(-16px) scale(.9)}
.blt-paquet-n{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);z-index:6;
  padding:.18em .7em;border-radius:999px;font-family:var(--mono);font-size:.62rem;font-weight:700;
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.blt-vol{width:56px;height:80px;z-index:7}
.blt-vol.part{transform:translate(var(--dx,0),var(--dy,0)) scale(.4) rotate(var(--rot,12deg));opacity:0}

/* — la retournée se retourne pour de bon — */
.blt-flip{position:relative;width:96px;height:152px;perspective:800px}
.blt-flip-dos,.blt-flip-face{position:absolute;inset:0;backface-visibility:hidden;
  transition:transform .62s cubic-bezier(.35,.9,.35,1);line-height:0}
.blt-flip-dos svg{display:block;width:100%;height:100%;border-radius:12px;box-shadow:0 0 0 2.5px #0B0E13}
.blt-flip-face{transform:rotateY(180deg)}
.blt-flip-face .blt-c{width:100%}
.blt-retournee.flip .blt-flip-dos{transform:rotateY(0)}
.blt-retournee.flip.on .blt-flip-dos{transform:rotateY(-180deg)}
.blt-retournee.flip.on .blt-flip-face{transform:rotateY(0)}
.blt-retournee:not(.flip) .blt-flip-dos{display:none}
.blt-retournee:not(.flip) .blt-flip-face{transform:none}

/* — les jetons devant chaque joueur — */
.blt-jetons{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;max-width:190px}
.blt-siege--haut .blt-jetons{top:calc(100% + 7px)}
.blt-siege--bas .blt-jetons{top:auto;bottom:calc(100% + 7px)}
.blt-siege--gauche .blt-jetons,.blt-siege--droite .blt-jetons{left:50%;top:calc(100% + 7px)}
.blt-jeton{display:block;padding:.24em .7em;border-radius:999px;font-style:normal;
  font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13;
  animation:bltJeton .34s var(--ease-back) backwards}
@keyframes bltJeton{from{opacity:0;transform:translateY(-8px) scale(.6)}}
.blt-jeton--passe{background:linear-gradient(180deg,#D8D2C4,#BCB4A2);color:#4A4436}
.blt-jeton--prend{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.blt-jeton--ann{background:linear-gradient(180deg,#B9E8FF,#7FD4E8)}
.blt-jeton--bel{background:linear-gradient(180deg,#FFC2DC,#F28EB8)}

/* — le décompte en direct — */
.blt-live{display:flex;align-items:center;gap:6px;padding:.3em .85em;border-radius:12px;
  color:#0B0E13;background:linear-gradient(180deg,#B9E8FF,#7FD4E8);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.blt-live span{font-family:var(--mono);font-size:.48rem;letter-spacing:.12em;text-transform:uppercase}
.blt-live b{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1;
  transition:transform .2s var(--ease-back)}
.blt-live i{font-style:normal;opacity:.5}

/* — le panneau d'annonce — */
.blt-annonce-p{display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px;
  border-radius:20px;text-align:center;color:#C3CDD8;
  background:linear-gradient(165deg,#17202C,#0E141D 72%);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(127,212,232,.34)}
.blt-annonce-p p{margin:0;font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff}
.blt-annonce-p small{max-width:62ch;font-size:.78rem;line-height:1.5}
.blt-ann-faites{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.blt-c.selectionnable{cursor:pointer;animation:none}
.blt-c.choisie{transform:translateY(-12px);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #7FD4E8,0 14px 0 6px #0B0E13}
.blt-c.choisie::after{content:"✓";position:absolute;top:5px;right:5px;z-index:4;display:grid;
  place-items:center;width:20px;height:20px;border-radius:50%;font-weight:800;font-size:.7rem;
  color:#0B0E13;background:#7FD4E8;box-shadow:0 0 0 2px #0B0E13}

/* — le ramassage : les cartes se rangent d'abord, puis filent — */
.blt-slot{transition:transform .5s var(--ease-out,cubic-bezier(.2,.8,.2,1)),opacity .4s}
.blt-slot.part .blt-qui{opacity:0}
.blt-slot .blt-qui{transition:opacity .2s}

@media (max-width:760px){
  .blt-table{min-height:clamp(360px,52vh,470px);padding:12px}
  .blt-flip{width:78px;height:124px}
  .blt-jeton{font-size:.46rem;padding:.2em .55em}
  .blt-jetons{max-width:128px}
  .blt-live{display:none}
}
@media (prefers-reduced-motion:reduce){
  .blt-jeton,.blt-paquet,.blt-feuille,.blt-flip-dos,.blt-flip-face{animation:none;transition:none}
}

/* ==========================================================================
   MÉTRO BELOTE — ON DÉGAGE LE CENTRE
   La carte jouée par le partenaire recouvrait son siège : le siège du haut
   devient une plaque horizontale, ses jetons passent sur le côté, et le
   tapis gagne la hauteur qui manquait à la croix des quatre cartes.
   ========================================================================== */
.blt-siege--haut{flex-direction:row;align-items:center;gap:9px;top:8px;
  padding:.35em .9em .35em .4em}
.blt-siege--haut .blt-av{width:32px;height:36px}
.blt-siege--haut .blt-nom{font-size:.82rem}
.blt-siege--haut .blt-role{margin-left:4px}
.blt-siege--haut .blt-preneur{top:-9px;right:-9px}
.blt-siege--haut .blt-jetons{top:50%;bottom:auto;left:auto;right:calc(100% + 10px);
  transform:translateY(-50%);align-items:flex-end;text-align:right;max-width:150px}

.blt-table{min-height:clamp(470px,60vh,620px)}
.blt-slot .blt-c{width:90px}
.blt-slot .blt-sc{height:60px}
.blt-slot--0{transform:translateY(58px)}
.blt-slot--1{transform:translate(-176px,-10px)}
.blt-slot--2{transform:translateY(-100px)}
.blt-slot--3{transform:translate(176px,-10px)}
@media (max-width:760px){
  .blt-table{min-height:clamp(376px,52vh,470px)}
  .blt-slot .blt-c{width:74px}
  .blt-slot .blt-sc{height:50px}
  .blt-slot--0{transform:translateY(46px)}
  .blt-slot--1{transform:translate(-114px,-8px)}
  .blt-slot--2{transform:translateY(-80px)}
  .blt-slot--3{transform:translate(114px,-8px)}
  .blt-siege--haut .blt-jetons{max-width:104px;right:calc(100% + 6px)}
  .blt-siege--haut .blt-role{display:none}
}

/* la main tient sur une seule rangée : la huitième carte passait à la ligne */
.blt-main{flex-wrap:nowrap;gap:clamp(4px,.9vw,9px);max-width:100%}
.blt-main .blt-c{flex:0 1 108px;width:auto;min-width:0}
@media (max-width:760px){ .blt-main .blt-c{flex-basis:88px} }

/* ==========================================================================
   MÉTRO BELOTE — DE LA PROFONDEUR, DE VRAIS JETONS, DES MAINS QUI SE VOIENT
   Le tapis s'incline, les cartes grandissent, la carte jouée arrive de
   devant son joueur au lieu de surgir au centre, et chacun tient enfin
   son éventail de dos.
   ========================================================================== */

/* — 1. la profondeur : le feutre est une surface, pas un fond — */
.blt-table{min-height:clamp(560px,66vh,700px);
  perspective:1500px;perspective-origin:50% 38%}
.blt-tapis{transform:rotateX(11deg);transform-style:preserve-3d;z-index:2}
.blt-siege{z-index:4}
.blt-slot .blt-c{box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,
  0 20px 26px -12px rgba(0,0,0,.72)}

/* — 2. la croix du pli : des cartes qu'on voit, bien écartées — */
.blt-slot .blt-c{width:118px}
.blt-slot .blt-sc{height:78px}
.blt-slot--0{--sx:0px;--sy:64px}
.blt-slot--1{--sx:-200px;--sy:-18px}
.blt-slot--2{--sx:0px;--sy:-100px}
.blt-slot--3{--sx:200px;--sy:-18px}

/* — 3. plus de zoom : la carte arrive de devant son joueur — */
.blt-slot{animation:none;transform:translate(var(--sx,0px),var(--sy,0px))}
.blt-slot.vient{animation:bltVient .52s cubic-bezier(.2,.85,.3,1) backwards}
@keyframes bltVient{
  from{transform:translate(calc(var(--sx,0px) + var(--fx,0px)),
                           calc(var(--sy,0px) + var(--fy,0px)))
                 rotate(var(--fr,0deg))}
}
.blt-slot--0.vient{--fx:0px;--fy:250px;--fr:-9deg}
.blt-slot--1.vient{--fx:-260px;--fy:40px;--fr:15deg}
.blt-slot--2.vient{--fx:0px;--fy:-250px;--fr:8deg}
.blt-slot--3.vient{--fx:260px;--fy:40px;--fr:-15deg}
.blt-slot.vient .blt-qui{animation:bltQui .5s .24s backwards}
@keyframes bltQui{from{opacity:0;transform:scale(.6)}}

/* — 4. l'éventail de dos devant chaque adversaire — */
.blt-evt{display:flex;justify-content:center;align-items:flex-end;height:44px;margin:2px 0 1px}
.blt-evt-c{display:block;width:30px;height:42px;line-height:0;margin-inline:-11px;
  transform-origin:50% 168%;
  transform:rotate(calc((var(--k,0) - (var(--m,1) - 1)/2) * 8deg));
  transition:transform .32s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.blt-evt-c svg{display:block;width:100%;height:100%;border-radius:4px;
  box-shadow:0 0 0 1.6px #0B0E13,0 2px 0 1.6px #0B0E13}
.blt-evt-c--neuf{animation:bltRecu .4s var(--ease-back) backwards}
@keyframes bltRecu{from{opacity:0;transform:scale(.35) translateY(-18px)}}
.blt-siege--bas .blt-evt{display:none}      /* vous, vous voyez vos cartes */
.blt-dosn{font-family:var(--mono);font-size:.5rem;letter-spacing:.08em;opacity:.7}

/* — 5. les jetons sont des jetons : des ronds, pas des étiquettes — */
.blt-jetons{flex-direction:row;flex-wrap:wrap;gap:7px;justify-content:center;max-width:172px}
.blt-siege--haut .blt-jetons{justify-content:flex-end;max-width:124px}
.blt-j{position:relative;display:grid;place-items:center;width:52px;height:52px;
  border-radius:50%;font-style:normal;color:#0B0E13;
  background:radial-gradient(circle at 34% 26%,rgba(255,255,255,.9),transparent 54%),
             var(--jf,#E8E1D2);
  box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13,0 13px 16px -9px rgba(0,0,0,.75);
  transform:rotate(var(--jr,-4deg));
  animation:bltJetonP .44s var(--ease-back) backwards}
.blt-j::before{content:"";position:absolute;inset:3px;border-radius:50%;opacity:.45;
  background:repeating-conic-gradient(#0B0E13 0 9deg,transparent 9deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 63%,#000 64%);
  mask:radial-gradient(circle,transparent 63%,#000 64%)}
.blt-j::after{content:"";position:absolute;inset:10px;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(11,14,19,.3)}
.blt-j-p{position:absolute;width:27px;height:27px;line-height:0;opacity:.3}
.blt-j-p svg{display:block;width:100%;height:100%}
.blt-j b{position:relative;z-index:2;font-family:var(--display);font-weight:800;
  font-size:.95rem;line-height:1}
.blt-j s{display:none}
.blt-j--passe{--jf:#CFC8B8;--jr:6deg}
.blt-j--passe .blt-j-p{opacity:.85;width:25px;height:25px}
.blt-j--prend{--jf:#FFCE00;--jr:-7deg}
.blt-j--ann{--jf:#7FD4E8;--jr:5deg}
.blt-j--bel{--jf:#F28EB8;--jr:-5deg}
@keyframes bltJetonP{from{opacity:0;transform:rotate(var(--jr,-4deg)) scale(.25) translateY(-16px)}}

/* — 6. ma main : un éventail, des cartes enfin grandes — */
.blt-main{--cw:clamp(98px,12.6vw,138px);
  align-items:flex-end;padding:34px 0 12px;perspective:900px}
.blt-main .blt-c{flex:0 0 auto;width:var(--cw);margin-inline:calc(var(--cw) * -0.115);
  transform-origin:50% 190%;
  transform:translateY(var(--arc,0px)) rotate(var(--rot,0deg));
  transition:transform .22s var(--ease-out,cubic-bezier(.2,.8,.2,1)),box-shadow .2s;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 16px 20px -12px rgba(0,0,0,.8)}
.blt-main .blt-c:hover{z-index:8}
.blt-main .blt-c.ok:hover,.blt-main .blt-c.selectionnable:hover{
  transform:translateY(calc(var(--arc,0px) - 20px)) rotate(var(--rot,0deg)) scale(1.03)}
.blt-main .blt-c.choisie{z-index:7;
  transform:translateY(calc(var(--arc,0px) - 28px)) rotate(var(--rot,0deg))}
/* la carte jouable n'a plus besoin de sautiller : elle brille */
.blt-c.ok{animation:none}
.blt-main .blt-c.ok{animation:bltHalo 2.4s ease-in-out infinite;
  animation-delay:calc(var(--n,0)*110ms)}
@keyframes bltHalo{
  0%,100%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px rgba(255,206,0,.85),
          0 8px 0 5px #0B0E13,0 18px 22px -12px rgba(0,0,0,.8)}
  50%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 8px rgba(255,206,0,1),
      0 8px 0 8px #0B0E13,0 22px 28px -12px rgba(0,0,0,.85)}
}
.blt-main .blt-c.choisie{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #7FD4E8,
  0 12px 0 6px #0B0E13,0 22px 26px -12px rgba(0,0,0,.8)}

/* — 7. le paquet se pose devant le donneur — */
.blt-paquet--d0{transform:translate(-50%,-50%) translateY(126px)}
.blt-paquet--d1{transform:translate(-50%,-50%) translate(-196px,6px)}
.blt-paquet--d2{transform:translate(-50%,-50%) translateY(-126px)}
.blt-paquet--d3{transform:translate(-50%,-50%) translate(196px,6px)}
.blt-paquet.part{transform:translate(-50%,-50%) translateY(-54px) scale(.45) rotate(9deg);opacity:0}
.blt-vol{width:60px;height:84px;
  transition:transform .58s cubic-bezier(.3,.7,.3,1),opacity .58s}
.blt-vol.part{transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,12deg)) scale(.5);opacity:0}

/* — 8. le chrono des annonces — */
.blt-chrono{position:relative;width:52px;height:52px;flex:none}
.blt-chrono svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.blt-ch-f{fill:none;stroke:rgba(255,255,255,.14);stroke-width:5}
.blt-ch-j{fill:none;stroke:#FFCE00;stroke-width:5;stroke-linecap:round;
  stroke-dasharray:125.6;animation:bltCh linear forwards}
@keyframes bltCh{from{stroke-dashoffset:0}to{stroke-dashoffset:125.6}}
.blt-chrono b{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.02rem;color:#fff}
.blt-chrono.presse .blt-ch-j{stroke:#E3051C}
.blt-chrono.presse b{color:#FF8D8D;animation:bltPresse .5s ease-in-out infinite}
@keyframes bltPresse{50%{transform:scale(1.2)}}

@media (max-width:760px){
  .blt-table{min-height:clamp(428px,56vh,540px)}
  .blt-slot .blt-c{width:84px}
  .blt-slot .blt-sc{height:56px}
  .blt-slot--0{--sx:0px;--sy:48px}
  .blt-slot--1{--sx:-130px;--sy:-14px}
  .blt-slot--2{--sx:0px;--sy:-74px}
  .blt-slot--3{--sx:130px;--sy:-14px}
  .blt-slot--1.vient{--fx:-170px}
  .blt-slot--3.vient{--fx:170px}
  .blt-evt{height:32px}
  .blt-evt-c{width:22px;height:31px;margin-inline:-8px}
  .blt-j{width:42px;height:42px}
  .blt-j b{font-size:.78rem}
  .blt-j-p{width:21px;height:21px}
  .blt-jetons{max-width:124px;gap:5px}
  .blt-main{--cw:clamp(72px,19vw,104px);padding-top:26px}
  .blt-paquet--d1{transform:translate(-50%,-50%) translate(-128px,6px)}
  .blt-paquet--d3{transform:translate(-50%,-50%) translate(128px,6px)}
  .blt-paquet--d0{transform:translate(-50%,-50%) translateY(94px)}
  .blt-paquet--d2{transform:translate(-50%,-50%) translateY(-94px)}
}
@media (prefers-reduced-motion:reduce){
  .blt-slot.vient,.blt-j,.blt-evt-c--neuf,.blt-main .blt-c.ok,.blt-ch-j,
  .blt-chrono.presse b{animation:none}
}

/* l'éventail respirait mal : des dos plus lisibles, mieux étalés, et qui
   ne mordent plus sur le nom du joueur */
.blt-evt{height:40px;padding:0 4px}
.blt-evt-c{width:28px;height:39px;margin-inline:0 -16px}
.blt-evt-c:last-child{margin-right:0}
/* les jetons du partenaire se rangent à gauche de sa plaque, dans le feutre */
.blt-siege--haut .blt-jetons{top:0;bottom:auto;left:auto;right:calc(100% + 10px);
  transform:none;justify-content:flex-end;align-items:flex-end;max-width:122px}
@media (max-width:760px){
  .blt-evt{height:30px}
  .blt-evt-c{width:21px;height:29px;margin-inline:0 -12px}
  .blt-siege--haut .blt-jetons{max-width:92px;right:calc(100% + 5px)}
}

/* les dos pivotent autour d'un point bas : sans marge, les cartes des bords
   débordaient sur le nom du joueur */
.blt-evt{padding:0 15px;flex:none}
.blt-evt-c{transform-origin:50% 145%;
  transform:rotate(calc((var(--k,0) - (var(--m,1) - 1)/2) * 6.5deg))}
.blt-siege--haut .blt-nom,.blt-siege--bas .blt-nom{flex:none}
@media (max-width:760px){ .blt-evt{padding:0 10px} }

/* le jeton ne surgit qu'à sa première apparition : dessiner() reconstruit
   la table à chaque coup, l'animation repartait sans fin */
.blt-j{animation:none}
.blt-j.neuf{animation:bltJetonP .44s var(--ease-back) backwards}
/* même chose pour la main : elle se redessinait en entier à chaque tour */
.blt-main .blt-c{animation:none}
.blt-main .blt-c.ok{animation:bltHalo 2.4s ease-in-out infinite;
  animation-delay:calc(var(--n,0)*110ms)}

/* la carte quitte le paquet : elle partait du centre du tapis, ce qui
   donnait l'impression qu'elle sortait de nulle part */
.blt-vol{transform:translate(var(--bx,0px),var(--by,0px))}
.blt-vol.part{transform:translate(calc(var(--bx,0px) + var(--dx,0px)),
                                  calc(var(--by,0px) + var(--dy,0px)))
              rotate(var(--rot,12deg)) scale(.5)}
.blt-vol--d0{--bx:0px;--by:126px}
.blt-vol--d1{--bx:-196px;--by:6px}
.blt-vol--d2{--bx:0px;--by:-126px}
.blt-vol--d3{--bx:196px;--by:6px}
@media (max-width:760px){
  .blt-vol--d0{--by:94px}
  .blt-vol--d1{--bx:-128px}
  .blt-vol--d2{--by:-94px}
  .blt-vol--d3{--bx:128px}
}

/* le chrono se lisait mal sur le panneau sombre */
.blt-chrono{width:58px;height:58px}
.blt-ch-f{stroke:rgba(255,255,255,.1);stroke-width:7}
.blt-ch-j{stroke-width:7;filter:drop-shadow(0 0 5px rgba(255,206,0,.6))}
.blt-chrono::before{content:"";position:absolute;inset:8px;border-radius:50%;
  background:rgba(11,14,19,.55)}
.blt-chrono b{font-size:1.16rem}

/* ==========================================================================
   MÉTRO BELOTE — LE SALON : UN CADRE, UN FOND VIVANT, DU MOUVEMENT
   ========================================================================== */
/* — le décor : la table est posée dans une salle, pas sur une page — */
.blt{position:relative;isolation:isolate;max-width:1180px;margin:0 auto;
  padding:16px clamp(10px,2vw,22px) 22px;border-radius:28px;
  background:
    radial-gradient(130% 90% at 50% -14%,rgba(62,143,212,.18),transparent 62%),
    radial-gradient(90% 60% at 50% 115%,rgba(255,206,0,.09),transparent 60%),
    linear-gradient(176deg,#151E2A,#090E15 72%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(255,255,255,.055),
             0 26px 64px -24px rgba(0,0,0,.92)}
.blt::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:28px;
  opacity:.85;pointer-events:none;
  background-image:
    repeating-linear-gradient(58deg,rgba(62,143,212,.11) 0 3px,transparent 3px 48px),
    repeating-linear-gradient(-58deg,rgba(227,5,28,.09) 0 3px,transparent 3px 60px),
    repeating-linear-gradient(0deg,rgba(255,206,0,.07) 0 3px,transparent 3px 74px);
  background-size:320px 320px,360px 360px,280px 280px;
  animation:bltDerive 54s linear infinite}
@keyframes bltDerive{to{background-position:320px 320px,-360px 360px,280px -280px}}
/* quelques lumières qui passent, comme une rame au loin */
.blt::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:28px;
  pointer-events:none;opacity:.5;
  background:radial-gradient(18px 3px at 0% 22%,rgba(255,236,170,.7),transparent 70%),
             radial-gradient(14px 3px at 0% 74%,rgba(160,215,255,.6),transparent 70%);
  background-repeat:no-repeat;animation:bltPhares 13s linear infinite}
@keyframes bltPhares{
  0%{background-position:-10% 0,-30% 0;opacity:0}
  12%{opacity:.5} 88%{opacity:.5}
  100%{background-position:115% 0,135% 0;opacity:0}}

/* — plein écran — */
.blt:fullscreen,.blt.blt-plein-css{max-width:none;border-radius:0;margin:0;
  padding:14px clamp(12px,3vw,40px) 18px;overflow:auto;
  display:flex;flex-direction:column;justify-content:center;background:#090E15}
.blt.blt-plein-css{position:fixed;inset:0;z-index:900}
.blt:fullscreen::before,.blt:fullscreen::after,
.blt.blt-plein-css::before,.blt.blt-plein-css::after{border-radius:0}

/* — les boutons du bandeau : des pictogrammes dessinés, plus d'emoji — */
.blt-ico-b{display:inline-flex;align-items:center;gap:6px;padding:.34em .8em;border:0;
  border-radius:14px;cursor:pointer;color:#0B0E13;font-family:var(--mono);font-size:.5rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  transition:transform .16s var(--ease-back),box-shadow .16s}
.blt-ico-b svg{width:17px;height:17px;display:block}
.blt-ico-b:hover{transform:translateY(-2px);box-shadow:0 0 0 2px #0B0E13,0 5px 0 2px #0B0E13}
.blt-ico-b:active{transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13,0 1px 0 2px #0B0E13}
.blt-ico-b.on{background:linear-gradient(180deg,#FFE88A,#FFCE00)}

/* — le brassard du preneur : qui a pris, et à quelle ligne — */
.blt-brassard{position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:5px;padding:.16em .55em .16em .2em;
  border-radius:999px;font-style:normal;white-space:nowrap;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  animation:bltBras 2.6s ease-in-out infinite}
.blt-brassard b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:.62rem;
  color:var(--i,#fff);background:var(--c,#0B0E13);box-shadow:0 0 0 1.6px #0B0E13}
.blt-brassard span{font-family:var(--mono);font-size:.46rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
@keyframes bltBras{50%{transform:translateX(-50%) translateY(-3px)}}
.blt-siege--haut .blt-brassard,.blt-siege--bas .blt-brassard{top:-15px}
.blt-preneur{display:none}

/* — le sablier du tour — */
.blt-chrono--mini{width:40px;height:40px}
.blt-chrono--mini b{font-size:.82rem}
.blt-amoi{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:10px}
.blt-amoi b{font-family:var(--display);font-weight:800;font-size:.9rem;color:#FFCE00;
  text-transform:uppercase;letter-spacing:.04em}

/* — le bandeau EXPRESS tient dans la vignette — */
.blt-sc-h{position:relative}
.blt-express{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:3;
  padding:.2em 0;text-align:center;
  font-family:var(--mono);font-size:.44rem;font-weight:700;letter-spacing:.24em;
  color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 -1.5px 0 #0B0E13}
.blt-express::before{content:"";display:inline-block;width:.5em;height:.78em;margin-right:.45em;
  vertical-align:-.08em;background:#0B0E13;
  clip-path:polygon(62% 0,18% 56%,46% 56%,34% 100%,82% 40%,52% 40%)}
.blt-c.mini .blt-express{font-size:.38rem}
.blt-slot .blt-express{font-size:.46rem}

/* — la carte d'atout laisse passer un éclat, la belote bat — */
.blt-main .blt-c.atout::before{content:"";position:absolute;inset:0;z-index:4;
  pointer-events:none;border-radius:inherit;
  background:linear-gradient(104deg,transparent 40%,rgba(255,240,178,.8) 48%,transparent 57%);
  background-size:280% 100%;background-position:130% 0;
  animation:bltEclat 4.6s ease-in-out infinite;
  animation-delay:calc(var(--n,0)*280ms)}
@keyframes bltEclat{0%,64%{background-position:132% 0}100%{background-position:-44% 0}}
.blt-c.blt-paire{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #F28EB8,
  0 6px 0 5px #0B0E13,0 18px 22px -12px rgba(0,0,0,.8);
  animation:bltPaire 2.2s ease-in-out infinite}
@keyframes bltPaire{
  0%,100%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #F28EB8,0 6px 0 5px #0B0E13,
          0 18px 22px -12px rgba(0,0,0,.8)}
  50%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 8px #FFB3D2,0 6px 0 8px #0B0E13,
      0 22px 26px -12px rgba(0,0,0,.85)}}
.blt-c.blt-paire::after{content:"";position:absolute;top:5px;right:5px;z-index:5;
  width:18px;height:18px;border-radius:50%;background:#F28EB8;
  box-shadow:0 0 0 2px #0B0E13;
  -webkit-mask:radial-gradient(circle at 32% 34%,#000 22%,transparent 23%) ,none;
  mask:none}
.blt-c.blt-paire::after{background:
  radial-gradient(circle at 50% 62%,#0B0E13 0 12%,transparent 13%),
  linear-gradient(180deg,#FFC2DC,#F28EB8)}

/* — la légende des pastilles — */
.blt-legende{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;
  margin-top:10px;padding:8px 14px;border-radius:14px;
  background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.07)}
.blt-legende span{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.06em;color:#9FAEBE;
  text-transform:uppercase}
.blt-legende i{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;
  font-style:normal;font-family:var(--display);font-weight:800;font-size:.6rem;color:#0B0E13}
.blt-lg-g{background:#7FD4E8;box-shadow:0 0 0 1.6px #0B0E13}
.blt-lg-d{background:#F5F2E8;box-shadow:0 0 0 1.6px #0B0E13}

/* — le bilan de donne : il était blanc et muet — */
.blt-bilan{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:clamp(14px,3vw,26px);
  border-radius:26px;text-align:center;color:#E6EDF5;overflow:hidden;
  background:linear-gradient(170deg,#182231,#0A1017 74%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--bc,#3ED07A),0 26px 60px -20px rgba(0,0,0,.95);
  animation:bltBilanIn .42s var(--ease-back)}
@keyframes bltBilanIn{from{opacity:0;transform:scale(.92) translateY(18px)}}
.blt-bilan--reussi{--bc:#3ED07A}
.blt-bilan--dedans{--bc:#E3051C}
.blt-bilan--capot{--bc:#FFCE00}
.blt-bil-fond{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-conic-gradient(from 0deg at 50% 38%,
      color-mix(in srgb,var(--bc) 22%,transparent) 0 6deg,transparent 6deg 22deg);
  -webkit-mask:radial-gradient(circle at 50% 38%,#000 0,transparent 68%);
  mask:radial-gradient(circle at 50% 38%,#000 0,transparent 68%);
  animation:bltRayons 24s linear infinite}
@keyframes bltRayons{to{transform:rotate(360deg)}}
.blt-bil-ban{position:relative;padding:.24em 1.1em;border-radius:14px;
  font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,4.6vw,2rem);
  letter-spacing:.05em;color:#0B0E13;background:var(--bc);
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;
  animation:bltBan .5s var(--ease-back) .1s backwards}
@keyframes bltBan{from{opacity:0;transform:scale(.5) rotate(-8deg)}}
.blt-bil-sous{position:relative;margin:0;font-size:.86rem;color:#9FB0C2}
.blt-bil-duo{position:relative;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.blt-bil-c{min-width:132px;padding:9px 14px;border-radius:18px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 2px rgba(255,255,255,.09)}
.blt-bil-c.gagne{background:color-mix(in srgb,var(--bc) 20%,transparent);
  box-shadow:inset 0 0 0 2px var(--bc)}
.blt-bil-c small{display:block;font-family:var(--mono);font-size:.46rem;letter-spacing:.1em;
  text-transform:uppercase;color:#93A5B8}
.blt-bil-c b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,5vw,2.1rem);line-height:1.1}
.blt-bil-c u{font-family:var(--mono);font-size:.44rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:#7E90A4}
.blt-bil-det{position:relative;width:min(420px,94%);display:flex;flex-direction:column;gap:2px;
  padding:8px 10px;border-radius:16px;background:rgba(255,255,255,.04)}
.blt-bil-l{display:grid;grid-template-columns:1fr 54px 54px;align-items:center;gap:6px;
  padding:.24em .3em;font-size:.78rem}
.blt-bil-l span{text-align:left;color:#B7C5D4}
.blt-bil-l b{font-family:var(--mono);font-weight:700;text-align:right}
.blt-bil-l--t{border-bottom:1.5px solid rgba(255,255,255,.12)}
.blt-bil-l--t span,.blt-bil-l--t b{font-family:var(--mono);font-size:.46rem;letter-spacing:.1em;
  text-transform:uppercase;color:#7E90A4;font-weight:700}
.blt-bil-but{position:relative;margin:2px 0 0;font-family:var(--mono);font-size:.46rem;
  letter-spacing:.12em;text-transform:uppercase;color:#7E90A4}
.blt-bil-j{position:relative;width:min(420px,94%);display:flex;flex-direction:column;gap:5px}
.blt-bil-jl{display:grid;grid-template-columns:44px 1fr 48px;align-items:center;gap:8px}
.blt-bil-jl small{font-family:var(--mono);font-size:.46rem;letter-spacing:.1em;
  text-transform:uppercase;color:#93A5B8;text-align:left}
.blt-bil-jl i{display:block;height:10px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1)}
.blt-bil-jl u{display:block;height:100%;border-radius:999px;text-decoration:none;
  background:linear-gradient(90deg,#3ED07A,#FFCE00);
  transition:width .8s var(--ease-out,cubic-bezier(.2,.8,.2,1))}
.blt-bil-jl b{font-family:var(--mono);font-weight:700;font-size:.9rem;text-align:right}
.blt-bil-go{position:relative;margin-top:4px}

/* — le panneau d'annonce, remis d'aplomb — */
.blt-annonce-p{gap:11px;padding:16px 18px;border-radius:24px;
  background:
    radial-gradient(120% 90% at 50% -10%,rgba(127,212,232,.18),transparent 62%),
    linear-gradient(168deg,#18222E,#0D141C 74%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(127,212,232,.4),
             0 18px 44px -18px rgba(0,0,0,.9)}
.blt-annonce-p p{font-size:1.06rem}
.blt-annonce-p small{color:#93A5B8}
.blt-ann-faites:empty{display:none}
.blt-ann-faites{gap:9px;margin-top:2px}

@media (max-width:760px){
  .blt{padding:12px 10px 16px;border-radius:20px}
  .blt::before,.blt::after{border-radius:20px}
  .blt-legende{gap:6px 12px;padding:7px 10px}
  .blt-legende span{font-size:.44rem}
  .blt-ico-b span{display:none}
  .blt-ico-b{padding:.34em .5em}
  .blt-bil-l{grid-template-columns:1fr 44px 44px;font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .blt::before,.blt::after,.blt-brassard,.blt-main .blt-c.atout::before,
  .blt-c.blt-paire,.blt-bil-fond,.blt-bil-ban{animation:none}
}

/* la donne se jouait trop loin : le paquet et les cartes qui filent
   passent à l'échelle du tapis */
.blt-paquet{width:88px;height:124px}
.blt-paquet-n{bottom:-28px;font-size:.72rem}
.blt-feuille{transform:translate(calc(var(--k)*-0.95px),calc(var(--k)*-1.2px))
  rotate(calc(var(--k)*-0.5deg))}
.blt-vol{width:78px;height:110px}
@media (max-width:760px){
  .blt-paquet{width:64px;height:90px}
  .blt-vol{width:58px;height:82px}
}

/* le brassard du preneur et les jetons se disputaient la même bande
   au-dessus de la plaque : les jetons passent sur le côté */
.blt-siege--bas .blt-jetons{top:50%;bottom:auto;left:calc(100% + 12px);right:auto;
  transform:translateY(-50%);justify-content:flex-start;max-width:132px}
.blt-siege--bas .blt-brassard{top:-21px}
@media (max-width:760px){
  .blt-siege--bas .blt-jetons{max-width:96px;left:calc(100% + 6px)}
}

/* ==========================================================================
   MÉTRO BELOTE — DE VRAIS JETONS, UN ATOUT QUI BRILLE, UN BILAN QUI CLAQUE
   ========================================================================== */

/* — 1. LES JETONS : une tranche, une face, un vernis — */
.blt-j{position:relative;display:grid;place-items:center;width:58px;height:58px;
  border-radius:50%;font-style:normal;color:#0B0E13;background:none;box-shadow:none;
  transform:rotate(var(--jr,-4deg));animation:none;filter:drop-shadow(0 9px 10px rgba(0,0,0,.6))}
.blt-j.neuf{animation:bltJetonP .5s var(--ease-back) backwards}
.blt-j::before,.blt-j::after{content:none}
/* la tranche : l'anneau cranté */
.blt-j-tranche{position:absolute;inset:0;border-radius:50%;
  background:
    repeating-conic-gradient(var(--jc2,#B9B0A0) 0 11deg,var(--jc1,#E8E1D2) 11deg 22deg);
  box-shadow:0 0 0 2.6px #0B0E13,inset 0 -3px 0 rgba(0,0,0,.28)}
/* la face : le disque central */
.blt-j s.blt-j-face,.blt-j-face{position:absolute;inset:8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;border-radius:50%;text-decoration:none;
  background:radial-gradient(circle at 36% 26%,rgba(255,255,255,.92),transparent 56%),
             var(--jc1,#E8E1D2);
  box-shadow:0 0 0 2.2px #0B0E13,inset 0 2px 0 rgba(255,255,255,.55),
             inset 0 -3px 0 rgba(0,0,0,.14)}
.blt-j-face b{font-family:var(--display);font-weight:800;font-size:1.22rem;line-height:.98;
  letter-spacing:-.01em}
.blt-j-face b.long{font-family:var(--mono);font-size:.56rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.blt-j-face em{font-style:normal;font-family:var(--mono);font-size:.38rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;opacity:.72;margin-top:1px}
.blt-j--passe{--jc1:#D6CFC0;--jc2:#ABA394;--jr:6deg}
.blt-j--prend{--jc1:#FFD42E;--jc2:#D19A00;--jr:-7deg}
.blt-j--ann  {--jc1:#7FD4E8;--jc2:#3F9FBA;--jr:5deg}
.blt-j--bel  {--jc1:#F79CC2;--jc2:#C4567F;--jr:-5deg}
.blt-j--prend .blt-j-face{animation:bltJprend 2.6s ease-in-out infinite}
@keyframes bltJprend{50%{transform:scale(1.05)}}
@keyframes bltJetonP{
  0%{opacity:0;transform:rotate(var(--jr,-4deg)) scale(.2) translateY(-26px)}
  62%{opacity:1;transform:rotate(var(--jr,-4deg)) scale(1.14) translateY(3px)}
  100%{opacity:1;transform:rotate(var(--jr,-4deg)) scale(1) translateY(0)}}
.blt-jetons{gap:9px;max-width:196px}
@media (max-width:760px){
  .blt-j{width:46px;height:46px}
  .blt-j-face{inset:6px}
  .blt-j-face b{font-size:.98rem}
  .blt-j-face b.long{font-size:.44rem}
  .blt-j-face em{font-size:.32rem}
  .blt-jetons{max-width:140px;gap:6px}
}

/* — 2. L'ATOUT : la vignette vit — */
.blt-rayons{transform-origin:100px 72px;animation:bltRayonsT 22s linear infinite}
@keyframes bltRayonsT{to{transform:rotate(360deg)}}
.blt-etinc path{transform-box:fill-box;transform-origin:50% 50%;
  animation:bltScint 2.6s ease-in-out infinite}
.blt-etinc path:nth-child(2n){animation-delay:.45s}
.blt-etinc path:nth-child(3n){animation-delay:.95s}
.blt-etinc path:nth-child(5n){animation-delay:1.5s}
@keyframes bltScint{0%,100%{opacity:.15;transform:scale(.45)}
  45%{opacity:1;transform:scale(1.25)}}
/* le corps de la carte passe à l'or, pas seulement son cadre */
.blt-c.atout{background:linear-gradient(180deg,#FFF9E4,#F7E7B4)}
.blt-c.atout .blt-haut{background:linear-gradient(180deg,#FFE79A,#FFD23E)}
.blt-c.atout .blt-bas{background:linear-gradient(180deg,#FFF6D8,#F3E3AE)}
.blt-c.atout .blt-val{color:#5A3E00}
.blt-main .blt-c.atout{animation:bltFlotte 3.4s ease-in-out infinite;
  animation-delay:calc(var(--n,0)*220ms)}
@keyframes bltFlotte{
  0%,100%{transform:translateY(var(--arc,0px)) rotate(var(--rot,0deg))}
  50%{transform:translateY(calc(var(--arc,0px) - 7px)) rotate(calc(var(--rot,0deg) + .8deg))}}
.blt-main .blt-c.atout.ok{animation:bltFlotte 3.4s ease-in-out infinite,
  bltHalo 2.4s ease-in-out infinite}
.blt-slot .blt-c.atout{animation:bltAtoutBat 2.8s ease-in-out infinite}
@keyframes bltAtoutBat{
  0%,100%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 5px 0 5px #0B0E13,
          0 20px 26px -12px rgba(0,0,0,.72)}
  50%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 8px #FFE372,0 5px 0 8px #0B0E13,
      0 24px 30px -12px rgba(0,0,0,.78)}}
/* le bandeau EXPRESS devient une bande roulante */
.blt-express{background:
  repeating-linear-gradient(115deg,#FFCE00 0 9px,#FFE88A 9px 18px);
  background-size:200% 100%;animation:bltBande 1.6s linear infinite}
@keyframes bltBande{to{background-position:-36px 0}}

/* — 3. LE BILAN QUI CLAQUE — */
.blt-secousse{animation:bltSecousse .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes bltSecousse{
  10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)}}
.blt-bil-onde{position:absolute;left:50%;top:32%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 4px var(--bc,#3ED07A);opacity:.9;
  animation:bltOnde 1.1s cubic-bezier(.16,.8,.3,1) .12s backwards}
@keyframes bltOnde{to{transform:scale(34);opacity:0}}
.blt-bil-conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:26px}
.blt-bil-conf u{position:absolute;top:-8%;left:var(--x);width:var(--w);height:var(--h);
  border-radius:2px;background:var(--c);box-shadow:0 0 0 1.2px rgba(11,14,19,.55);
  animation:bltConf var(--t) linear var(--d) forwards}
@keyframes bltConf{
  0%{transform:translate(0,-20px) rotate(0);opacity:0}
  8%{opacity:1}
  100%{transform:translate(var(--dx),115vh) rotate(var(--r));opacity:1}}
.blt-bil-ban{display:inline-flex;gap:.02em;perspective:600px}
.blt-bil-ban em{display:inline-block;font-style:normal;
  animation:bltLettre .5s var(--ease-back) backwards;
  animation-delay:calc(.24s + var(--i)*.045s)}
@keyframes bltLettre{
  from{opacity:0;transform:translateY(-34px) rotateX(-90deg) scale(1.6)}}
.blt-bil-c b{transition:none}
.blt-bil-c b.fini{animation:bltChiffre .4s var(--ease-back)}
@keyframes bltChiffre{40%{transform:scale(1.22)}}
.blt-bil-c.gagne{animation:bltColGagne 2.4s ease-in-out infinite}
@keyframes bltColGagne{50%{transform:translateY(-4px)}}
.blt-bilan--capot .blt-bil-ban{text-shadow:0 0 22px rgba(255,206,0,.9)}
.blt-bil-go{animation:bltGo 2.2s ease-in-out 1.4s infinite backwards}
@keyframes bltGo{50%{transform:translateY(-3px)}}

/* — 4. LE CARNET DES ANNONCES ET LA MODALE — */
.blt-carnetA{max-width:560px}
.blt-carnetA h4{margin:0;font-family:var(--display);font-weight:800;font-size:1.2rem}
.blt-ca-i{margin:0;font-size:.82rem;color:#4A5460}
.blt-ca-t{display:flex;flex-direction:column;gap:7px}
.blt-ca-r{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px;
  padding:9px 12px;border-radius:16px;background:rgba(11,14,19,.05);
  box-shadow:inset 0 0 0 1.6px rgba(11,14,19,.12)}
.blt-ca-r i{display:grid;place-items:center;height:36px;border-radius:12px;font-style:normal;
  font-family:var(--display);font-weight:800;font-size:1rem;color:#0B0E13;
  background:linear-gradient(180deg,#B9E8FF,#7FD4E8);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.blt-ca-r b{display:block;font-family:var(--display);font-weight:800;font-size:.92rem}
.blt-ca-r small{display:block;font-size:.76rem;color:#4A5460;line-height:1.4}
.blt-ca-r--bel i{background:linear-gradient(180deg,#FFC2DC,#F28EB8)}
.blt-annmod{max-width:min(940px,96vw);max-height:88vh;overflow:auto;display:flex;
  flex-direction:column;gap:12px;padding:20px;border-radius:26px;text-align:center;
  color:#E6EDF5;
  background:radial-gradient(120% 90% at 50% -10%,rgba(127,212,232,.2),transparent 62%),
             linear-gradient(168deg,#18222E,#0C131B 74%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px rgba(127,212,232,.42),
             0 22px 54px -20px rgba(0,0,0,.92)}
.blt-annmod h4{margin:0;font-family:var(--display);font-weight:800;font-size:1.24rem;color:#fff}
.blt-annmod-i{margin:0 auto;max-width:60ch;font-size:.82rem;color:#93A5B8}
.blt-annmod-main{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:4px 0}
.blt-annmod-main .blt-c{width:104px;transform:none}
.blt-annmod-main .blt-c.choisie{transform:translateY(-12px)}
.blt-ico-b--ann{background:linear-gradient(180deg,#CFF1FA,#9FE0F0)}

@media (max-width:760px){
  .blt-annmod-main .blt-c{width:80px}
  .blt-ca-r{grid-template-columns:52px 1fr;gap:9px}
}
@media (prefers-reduced-motion:reduce){
  .blt-rayons,.blt-etinc path,.blt-main .blt-c.atout,.blt-slot .blt-c.atout,
  .blt-express,.blt-bil-conf u,.blt-bil-ban em,.blt-bil-onde,.blt-secousse,
  .blt-j--prend .blt-j-face,.blt-bil-go,.blt-bil-c.gagne{animation:none}
}

/* ==========================================================================
   MÉTRO BELOTE — LA CORRESPONDANCE SE VOIT
   ========================================================================== */
/* le bandeau du duel, posé en travers du tapis */
.blt-duel{position:absolute;left:50%;top:6%;transform:translateX(-50%) rotate(-2deg);
  z-index:7;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:.3em 1.1em;border-radius:14px;pointer-events:none;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  animation:bltDuelIn .4s var(--ease-back)}
.blt-duel b{font-family:var(--display);font-weight:800;font-size:.86rem;letter-spacing:.08em}
.blt-duel span{font-family:var(--mono);font-size:.42rem;letter-spacing:.08em;
  text-transform:uppercase;opacity:.78}
@keyframes bltDuelIn{from{opacity:0;transform:translateX(-50%) rotate(-2deg) scale(.5)}}

/* la carte de la main qui ouvre une correspondance porte son signe */
.blt-c.blt-corrOk::after{content:"↔";position:absolute;top:5px;right:5px;z-index:6;
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;
  font-weight:800;font-size:.8rem;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2px #0B0E13;animation:bltCorrBat 1.7s ease-in-out infinite}
@keyframes bltCorrBat{50%{transform:scale(1.18) rotate(8deg)}}
.blt-main .blt-c.blt-corrOk{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,
  0 8px 0 5px #0B0E13,0 18px 22px -12px rgba(0,0,0,.8)}

/* la carte posée en correspondance garde son repère sur le tapis */
.blt-slot .blt-viaCorr::after{width:26px;height:26px;font-size:.95rem}

/* — l'étiquette du joueur passe devant, et le siège du partenaire aussi :
     le nom se retrouvait sous la plaque — */
.blt-qui{position:relative;z-index:7}
.blt-siege{z-index:8}
.blt-slot--2{--sy:-84px}
@media (max-width:760px){ .blt-slot--2{--sy:-60px} }

/* La plaque du partenaire s'assoit SUR le bord du feutre : sa carte jouée
   passait sous elle, et le nom du joueur s'y perdait. */
.blt-siege--haut{top:-20px}
.blt-siege--haut .blt-jetons{top:30px}
@media (max-width:760px){
  .blt-siege--haut{top:-14px}
  .blt-siege--haut .blt-jetons{top:22px}
}

/* ==========================================================================
   MÉTRO BELOTE — LE BILAN PASSE EN CARTOON, L'ANNONCE DESCEND À LA MAIN
   ========================================================================== */

/* — le bouton d'annonce, contre le jeu de cartes — */
.blt-zone-main{display:flex;align-items:flex-end;justify-content:center;gap:14px;
  flex-wrap:wrap}
.blt-zone-main .blt-main{flex:0 1 auto}
.blt-annoncer{display:flex;flex-direction:column;align-items:center;gap:2px;
  flex:none;margin-bottom:14px;padding:.7em .95em .6em;border:0;border-radius:20px;
  cursor:pointer;color:#0B0E13;
  background:linear-gradient(180deg,#CFF3FB,#8FDCEE);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 16px 22px -12px rgba(0,0,0,.75);
  transition:transform .16s var(--ease-back),box-shadow .16s;
  animation:bltAnnBat 3s ease-in-out infinite}
.blt-annoncer i{display:block;width:34px;height:34px;line-height:0}
.blt-annoncer i svg{display:block;width:100%;height:100%}
.blt-annoncer b{font-family:var(--display);font-weight:800;font-size:.84rem;
  letter-spacing:.02em}
.blt-annoncer small{font-family:var(--mono);font-size:.4rem;letter-spacing:.09em;
  text-transform:uppercase;opacity:.72}
.blt-annoncer:hover{transform:translateY(-3px);
  box-shadow:0 0 0 3px #0B0E13,0 9px 0 3px #0B0E13,0 20px 26px -12px rgba(0,0,0,.8)}
.blt-annoncer:active{transform:translateY(3px);
  box-shadow:0 0 0 3px #0B0E13,0 2px 0 3px #0B0E13}
@keyframes bltAnnBat{50%{transform:translateY(-4px) rotate(-1.4deg)}}
@media (max-width:760px){
  .blt-zone-main{gap:8px}
  .blt-annoncer{flex-direction:row;margin-bottom:6px;padding:.5em .8em;gap:8px}
  .blt-annoncer i{width:24px;height:24px}
  .blt-annoncer small{display:none}
}

/* — LE BILAN EN CARTOON : crème, cerné de noir, ombre dure — */
.blt-bilan{color:#0B0E13;border-radius:28px;gap:11px;
  background:
    radial-gradient(120% 80% at 50% -8%,color-mix(in srgb,var(--bc) 26%,transparent),transparent 62%),
    linear-gradient(180deg,#FBF6E9,#EFE5CE);
  box-shadow:0 0 0 4px #0B0E13,0 10px 0 4px #0B0E13,0 0 0 9px var(--bc,#3ED07A),
             0 28px 60px -22px rgba(0,0,0,.9)}
.blt-bil-fond{opacity:.38;
  background:repeating-conic-gradient(from 0deg at 50% 36%,
    color-mix(in srgb,var(--bc) 38%,transparent) 0 6deg,transparent 6deg 22deg)}
.blt-bil-ban{padding:.2em .9em .26em;border-radius:18px;
  transform:rotate(-1.6deg);
  box-shadow:0 0 0 4px #0B0E13,0 7px 0 4px #0B0E13}
.blt-bil-sous{color:#5A6472;font-weight:600}
/* les deux colonnes deviennent des plaques cartoon */
.blt-bil-c{min-width:146px;padding:10px 16px;border-radius:20px;
  background:linear-gradient(180deg,#FFFDF6,#F0E7D2);
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.blt-bil-c.gagne{background:linear-gradient(180deg,
  color-mix(in srgb,var(--bc) 45%,#FFFDF6),color-mix(in srgb,var(--bc) 70%,#FFFDF6));
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--bc) 55%,transparent)}
.blt-bil-c small{color:#6A7484}
.blt-bil-c u{color:#7B8494}
/* le détail : une ardoise crème cernée */
.blt-bil-det{padding:10px 12px;border-radius:20px;
  background:linear-gradient(180deg,#FFFDF6,#F3EADA);
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.blt-bil-l span{color:#3D4652;font-weight:600}
.blt-bil-l b{color:#0B0E13}
.blt-bil-l--t{border-bottom:2.4px solid #0B0E13}
.blt-bil-l--t span,.blt-bil-l--t b{color:#6A7484}
.blt-bil-l:not(.blt-bil-l--t){border-bottom:1.6px dashed rgba(11,14,19,.16)}
.blt-bil-l:last-child{border-bottom:0}
/* les jauges : des tubes cernés */
.blt-bil-but{color:#6A7484}
.blt-bil-jl small{color:#5A6472}
.blt-bil-jl i{height:15px;background:#E2D7C0;
  box-shadow:0 0 0 2.4px #0B0E13;overflow:hidden}
.blt-bil-jl u{background:repeating-linear-gradient(115deg,#3ED07A 0 11px,#7BE6A6 11px 22px)}
.blt-bil-jl b{color:#0B0E13}
/* le bouton de sortie, en gros bouton cartoon */
.blt-bil-go{padding:.62em 1.5em;border-radius:18px;font-size:1rem;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);color:#0B0E13;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.blt-bil-go:hover{box-shadow:0 0 0 3px #0B0E13,0 9px 0 3px #0B0E13}
.blt-bil-conf u{box-shadow:0 0 0 1.6px #0B0E13}
@media (max-width:760px){
  .blt-bil-c{min-width:120px;padding:8px 12px}
}

.blt-duel u{font-family:var(--mono);font-size:.4rem;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;opacity:.68}

/* ==========================================================================
   Le nom du partenaire passait SOUS son éventail : dans une plaque
   horizontale, les dos pivotés débordaient sur le texte qui les suivait.
   L'éventail part en bout de plaque — il n'a plus rien à recouvrir.
   ========================================================================== */
.blt-siege--haut .blt-av   {order:1}
.blt-siege--haut .blt-nom  {order:2}
.blt-siege--haut .blt-dosn {order:3}
.blt-siege--haut .blt-role {order:4}
.blt-siege--haut .blt-evt  {order:5;margin-left:10px;margin-right:2px}
.blt-siege--bas .blt-av    {order:1}
.blt-siege--bas .blt-nom   {order:2}
.blt-siege--bas .blt-dosn  {order:3}
.blt-siege--bas .blt-role  {order:4}
/* et le nom ne se laisse plus écraser */
.blt-siege--haut .blt-nom,.blt-siege--bas .blt-nom{flex:none;white-space:nowrap}
.blt-siege--haut .blt-role,.blt-siege--bas .blt-role{flex:none;white-space:nowrap}
.blt-siege--haut .blt-dosn{flex:none;white-space:nowrap}

/* Le message se posait à 76 px du haut : exactement sur la plaque du
   partenaire. Il descend dans le bas du feutre, où il n'y a rien. */
.blt-msg{top:auto;bottom:88px;max-width:min(88%,560px);text-align:center;
  line-height:1.25;font-size:.86rem}
.blt-msg.on{transform:translate(-50%,0)}
@media (max-width:760px){ .blt-msg{bottom:74px;font-size:.76rem} }

/* ==========================================================================
   MÉTRO BELOTE — DES CARTES DE VRAI JEU, UN SCORE LISIBLE, UNE ENSEIGNE
   ========================================================================== */

/* — 1. LA FORME DES CARTES : la vignette devient carrée, la carte s'allonge
     et retrouve la proportion d'un vrai jeu (environ 1 : 1,45) — */
.blt-sc{height:auto;aspect-ratio:1/1}
.blt-c.mini .blt-sc{height:auto;aspect-ratio:1/1}
.blt-slot .blt-sc{height:auto;aspect-ratio:1/1}
.blt-main{--cw:clamp(94px,12.2vw,132px);padding:38px calc(var(--cw)*.14) 14px}
.blt-slot .blt-c{width:112px}
.blt-annmod-main .blt-c{width:116px}
@media (max-width:760px){
  .blt-main{--cw:clamp(70px,18.5vw,100px);padding-top:26px}
  .blt-slot .blt-c{width:80px}
  .blt-annmod-main .blt-c{width:84px}
}

/* — 2. LE BOUTON ANNONCER NE MORD PLUS SUR LA MAIN — */
.blt-zone-main{gap:20px;align-items:center}
.blt-annoncer{margin-bottom:0;flex:none}

/* — 3. LE BANDEAU DES SCORES, EN PLAQUES CARTOON — */
.blt-bar{gap:10px;flex-wrap:wrap;align-items:stretch}
.blt-sco{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:64px;padding:.36em .8em;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC8);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.blt-sco b{font-family:var(--display);font-weight:800;font-size:1.36rem;line-height:1}
.blt-sco span{font-family:var(--mono);font-size:.42rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.7}
.blt-live{display:flex;align-items:center;gap:10px;padding:.34em 1em;border-radius:16px;
  color:#0B0E13;background:linear-gradient(180deg,#B9E8FF,#7FD4E8);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.blt-live>span{font-family:var(--mono);font-size:.42rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.72;max-width:52px;line-height:1.1}
.blt-live em{display:flex;flex-direction:column;align-items:center;font-style:normal}
.blt-live em u{font-family:var(--mono);font-size:.4rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;opacity:.66}
.blt-live em b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1;
  transition:transform .2s var(--ease-back)}
.blt-live i{font-style:normal;opacity:.45;font-size:1rem}
.blt-atout,.blt-pl{border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}

/* — 4. LA PLAQUE DES ANNONCES — */
.blt-annonces{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-top:12px;padding:9px 16px;border-radius:20px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EDE3CC);
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.blt-annonces .blt-lab{margin:0;font-family:var(--mono);font-size:.44rem;letter-spacing:.14em;
  text-transform:uppercase;opacity:.66}
.blt-ann-l{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.blt-ann-l i{display:flex;align-items:center;gap:7px;padding:.24em .7em .24em .28em;
  border-radius:999px;font-style:normal;
  background:linear-gradient(180deg,#CFF3FB,#8FDCEE);
  box-shadow:0 0 0 2px #0B0E13,0 2.5px 0 2px #0B0E13;
  animation:bltAnnPop .38s var(--ease-back) backwards}
.blt-ann-l i.bel{background:linear-gradient(180deg,#FFC2DC,#F28EB8)}
.blt-ann-l i b{display:grid;place-items:center;min-width:30px;height:22px;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.76rem;
  background:#FFFDF4;box-shadow:0 0 0 1.8px #0B0E13}
.blt-ann-l i span{font-family:var(--display);font-weight:700;font-size:.72rem}
@keyframes bltAnnPop{from{opacity:0;transform:scale(.6) translateY(-6px)}}
.blt-ann-t{display:grid;place-items:center;min-width:54px;padding:.2em .6em;border-radius:14px;
  font-family:var(--display);font-weight:800;font-size:1.06rem;text-decoration:none;
  color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2.4px #0B0E13,0 3px 0 2.4px #0B0E13}

/* — 5. L'ENSEIGNE DU MENU — */
.blt-menu{position:relative}
.blt-enseigne{position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;min-height:clamp(190px,26vh,260px);
  margin-bottom:18px;padding:26px 18px 22px;border-radius:26px;text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.1),transparent 62%),
    repeating-linear-gradient(38deg,rgba(255,255,255,.02) 0 3px,transparent 3px 22px),
    linear-gradient(170deg,#1E7A52,#0A3B28 78%);
  box-shadow:0 0 0 4px #0B0E13,0 9px 0 4px #0B0E13,inset 0 0 90px rgba(0,0,0,.55)}
.blt-enseigne-vol{position:absolute;inset:0;pointer-events:none}
.blt-enseigne-vol u{position:absolute;top:50%;left:-16%;width:58px;height:82px;
  line-height:0;opacity:.55;
  animation:bltVole 13s linear infinite;animation-delay:calc(var(--i)*-2.1s)}
.blt-enseigne-vol u svg{width:100%;height:100%;border-radius:6px;
  box-shadow:0 0 0 2px #0B0E13}
@keyframes bltVole{
  0%{transform:translate(0,-140%) rotate(-24deg)}
  100%{transform:translate(1050%,120%) rotate(320deg)}}
.blt-enseigne-t{position:relative;display:flex;gap:.01em;justify-content:center;flex-wrap:wrap;
  perspective:700px}
.blt-enseigne-t em{display:inline-block;font-style:normal;
  font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,6.4vw,3.3rem);
  line-height:1;letter-spacing:.01em;color:#FFFDF4;
  text-shadow:0 3px 0 #0B0E13,0 6px 0 rgba(11,14,19,.45);
  animation:bltEnsL .6s var(--ease-back) backwards, bltEnsB 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i)*.05s), calc(var(--i)*.09s)}
@keyframes bltEnsL{from{opacity:0;transform:translateY(-46px) rotateX(-90deg)}}
@keyframes bltEnsB{50%{transform:translateY(-5px)}}
.blt-enseigne-s{position:relative;margin:0;font-size:.9rem;color:rgba(255,253,244,.8)}
.blt-lab--gros{font-size:.56rem;letter-spacing:.2em}

/* — 6. LES TABLES — */
.blt-modes{gap:16px}
.blt-mode{position:relative;overflow:hidden;padding:18px 16px 16px;border-radius:24px;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,0 20px 30px -18px rgba(0,0,0,.8);
  transition:transform .2s var(--ease-back),box-shadow .2s;
  animation:bltModeIn .5s var(--ease-back) backwards;
  animation-delay:calc(var(--i)*.09s)}
@keyframes bltModeIn{from{opacity:0;transform:translateY(24px) scale(.94)}}
.blt-mode:not(:disabled):hover{transform:translateY(-6px) rotate(-.6deg);
  box-shadow:0 0 0 3px #0B0E13,0 13px 0 3px #0B0E13,0 26px 36px -18px rgba(0,0,0,.85)}
.blt-mode:not(:disabled):active{transform:translateY(3px);
  box-shadow:0 0 0 3px #0B0E13,0 3px 0 3px #0B0E13}
.blt-mode::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-conic-gradient(from 0deg at 50% 0%,
    color-mix(in srgb,var(--c) 70%,transparent) 0 7deg,transparent 7deg 24deg);
  animation:bltRayons 30s linear infinite}
.blt-mode-vis{position:relative;display:flex;align-items:center;justify-content:center;
  gap:10px;height:76px;margin-bottom:8px}
.blt-mode-av{display:flex;flex:none}
.blt-mode-av i{display:block;width:44px;height:48px;line-height:0;margin-left:-13px;
  transform:rotate(calc((var(--k) - 1) * 8deg)) translateY(calc(var(--k) * -1px));
  transform-origin:50% 120%;
  animation:bltTete 3.2s ease-in-out infinite;
  animation-delay:calc(var(--k)*.26s)}
.blt-mode-av i:first-child{margin-left:0}
.blt-mode-av i svg{width:100%;height:100%;
  filter:drop-shadow(0 3px 0 rgba(11,14,19,.5))}
@keyframes bltTete{50%{transform:rotate(calc((var(--k) - 1) * 8deg)) translateY(-6px)}}
.blt-mode-dos{display:block;flex:none;width:52px;height:74px;line-height:0;
  transform:rotate(8deg);animation:bltDosB 4s ease-in-out infinite}
.blt-mode-dos svg{width:100%;height:100%;border-radius:7px;
  box-shadow:0 0 0 2.4px #0B0E13,0 4px 0 2.4px #0B0E13}
@keyframes bltDosB{50%{transform:rotate(-6deg) translateY(-5px)}}
.blt-mode-s{display:block;min-height:2.6em}
.blt-mode-et{display:block;margin:4px 0 2px;font-size:.9rem;letter-spacing:.14em;
  color:#FFCE00;text-shadow:0 1.5px 0 #0B0E13}
.blt-mode--off{filter:grayscale(.55);opacity:.7}
.blt-mode--off::before{animation:none}

@media (prefers-reduced-motion:reduce){
  .blt-enseigne-vol u,.blt-enseigne-t em,.blt-mode,.blt-mode::before,
  .blt-mode-av i,.blt-mode-dos,.blt-ann-l i{animation:none}
}

/* L'éventail fait pivoter les cartes : la dernière débordait de sa boîte et
   passait sous le bouton. On rapproche le pivot et on réserve la marge. */
.blt-main .blt-c{transform-origin:50% 125%}
.blt-main{padding-inline:calc(var(--cw) * .14 + 42px)}
.blt-zone-main{gap:6px}
@media (max-width:760px){
  .blt-main{padding-inline:calc(var(--cw) * .14 + 22px)}
}

/* ==========================================================================
   MÉTRODROP — LE QUAI D'ACCUEIL : LA RAME S'ARRÊTE, ON MONTE
   --------------------------------------------------------------------------
   Les voyageurs se contentaient de flotter sur place pendant que la rame
   passait derrière eux : ils avaient l'air de s'envoler. Maintenant la rame
   entre, s'arrête, ouvre ses portes, chacun marche jusqu'à la sienne et y
   monte, puis la rame repart.
   ========================================================================== */
.mdh-hero-rame{animation:mdhRame 14s cubic-bezier(.42,0,.22,1) infinite}
@keyframes mdhRame{
  0%{transform:translateX(-700px)}
  16%,68%{transform:translateX(400px)}
  100%{transform:translateX(1340px)}
}
.mdh-porte{transform-box:fill-box;transform-origin:50% 50%;
  animation:mdhPorte 14s ease-in-out infinite}
@keyframes mdhPorte{
  0%,17%{transform:translateX(0)}
  24%,58%{transform:translateX(var(--o,0px))}
  65%,100%{transform:translateX(0)}
}
.mdh-pax{animation:mdhPaxMonte 14s cubic-bezier(.4,0,.35,1) infinite;
  animation-delay:var(--d,0s)}
@keyframes mdhPaxMonte{
  0%,26%{transform:translateX(0);opacity:1}
  47%{transform:translateX(var(--dx,0px));opacity:1}
  52%{transform:translateX(var(--dx,0px)) scale(.9);opacity:0}
  90%{transform:translateX(var(--dx,0px)) scale(.9);opacity:0}
  94%,97%{transform:translateX(0) scale(1);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
/* le pas : un petit balancement, seulement pendant la marche */
.mdh-pax-b{transform-box:fill-box;transform-origin:50% 100%;
  animation:mdhPaxPas .48s ease-in-out infinite}
@keyframes mdhPaxPas{50%{transform:translateY(-2px) rotate(1.4deg)}}
.mdh-hero-pax{animation:none}
@media (prefers-reduced-motion:reduce){
  .mdh-hero-rame,.mdh-porte,.mdh-pax,.mdh-pax-b{animation:none}
}

/* ==========================================================================
   MÉTRO BELOTE — TOUT SUR UN SEUL ÉCRAN
   --------------------------------------------------------------------------
   La main descend DANS le tapis, à la place de la plaque « Vous » : le
   bandeau, la table et les cartes tiennent ensemble dans la fenêtre, sans
   ascenseur. Les panneaux (enchère, annonces) se posent par-dessus le
   feutre au lieu de rallonger la page.
   ========================================================================== */
.blt{display:flex;flex-direction:column;gap:8px;
  height:calc(100dvh - 92px);min-height:500px;max-height:1000px;
  padding:10px clamp(8px,1.6vw,20px) 12px}
.blt-bar{flex:none;margin:0}
.blt-table{flex:1 1 auto;min-height:0;margin:0}
.blt-siege--bas{display:none}

/* — ma place : un badge, mes jetons, ma main — */
.blt-zone-main{position:absolute;left:10px;right:10px;bottom:8px;z-index:9;
  display:flex;align-items:flex-end;justify-content:center;gap:10px;flex-wrap:nowrap}
.blt-moi{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:.4em .7em .35em;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC8);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.blt-moi.actif{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 4px 0 5px #0B0E13}
.blt-moi .blt-av{width:34px;height:38px}
.blt-moi b{font-family:var(--display);font-weight:800;font-size:.76rem;line-height:1}
.blt-moi small{font-family:var(--mono);font-size:.44rem;letter-spacing:.08em;opacity:.65}
.blt-moi .blt-jetons{top:auto;bottom:calc(100% + 9px);left:50%;right:auto;
  transform:translateX(-50%);flex-direction:row;max-width:190px;justify-content:center}
.blt-moi .blt-brassard{top:-19px}
.blt-moi .blt-chrono{position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%)}
.blt-main{flex:0 1 auto;padding:16px calc(var(--cw) * .14 + 30px) 2px}
.blt-annoncer{flex:none;padding:.5em .7em .45em}
.blt-annoncer i{width:26px;height:26px}
.blt-annoncer b{font-size:.74rem}
.blt-annoncer small{display:none}

/* la main se dimensionne sur la HAUTEUR : c'est elle qui est comptée */
.blt-main{--cw:clamp(62px,min(11.5vh,10.4vw),116px)}

/* — les panneaux passent en surimpression — */
.blt-enchere,.blt-annonce-p{position:absolute;left:50%;top:46%;z-index:24;
  transform:translate(-50%,-50%);width:min(620px,92%);max-height:82%;overflow:auto;margin:0}
.blt-annonces--sur{position:absolute;left:12px;top:64px;z-index:10;margin:0;
  max-width:min(300px,38%);padding:7px 11px}
.blt-annonces--sur .blt-ann-l i{padding:.18em .55em .18em .22em}
.blt-annonces--sur .blt-ann-l i span{font-size:.62rem;max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blt-annonces--sur .blt-ann-t{min-width:44px;font-size:.92rem}
.blt-legende{display:none}

/* — la croix du pli remonte pour laisser la place à la main — */
.blt-tapis{padding-bottom:132px}
.blt-slot .blt-c{width:clamp(74px,min(10.4vh,9vw),104px)}
.blt-slot--0{--sx:0px;--sy:34px}
.blt-slot--1{--sx:-184px;--sy:-24px}
.blt-slot--2{--sx:0px;--sy:-96px}
.blt-slot--3{--sx:184px;--sy:-24px}

/* — l'étiquette de la carte retournée se pose AU-DESSUS — */
.blt-retournee{flex-direction:column}
.blt-ret-lab{order:-1;margin-bottom:6px;padding:.2em .8em;border-radius:999px;
  font-family:var(--mono);font-size:.46rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2px #0B0E13,0 2.5px 0 2px #0B0E13}

@media (max-height:780px){
  .blt-tapis{padding-bottom:112px}
  .blt-slot--2{--sy:-74px}
  .blt-slot--0{--sy:26px}
  .blt-slot--1{--sx:-158px;--sy:-18px}
  .blt-slot--3{--sx:158px;--sy:-18px}
  .blt-siege--haut .blt-evt,.blt-siege--gauche .blt-evt,.blt-siege--droite .blt-evt{height:30px}
  .blt-evt-c{width:22px;height:30px}
}
@media (max-width:760px){
  .blt{height:calc(100dvh - 76px);padding:8px 6px 10px}
  .blt-zone-main{left:4px;right:4px;bottom:4px;gap:5px}
  .blt-moi .blt-av{width:26px;height:30px}
  .blt-moi b{font-size:.62rem}
  .blt-main{--cw:clamp(50px,min(9.5vh,15vw),86px);padding:12px 16px 2px}
  .blt-annonces--sur{max-width:46%;left:6px;top:54px}
  .blt-slot--1{--sx:-112px}
  .blt-slot--3{--sx:112px}
}

/* Pendant la partie, la carte de présentation se replie : elle prenait plus
   de cinq cents pixels et repoussait la table hors de l'écran. */
.view.blt-joue .ap-ban{display:none}
.view.blt-joue > .wrap > .section:first-child{padding-top:8px;padding-bottom:0}
.view.blt-joue .ap-mascotte{display:none}
.view.blt-joue .ap-cadre{padding:0;background:none;box-shadow:none}

/* On serre encore : la table doit tenir SOUS l'en-tête, pas déborder. */
.view.blt-joue > .wrap > .section:first-child{padding:6px 0 0}
.view.blt-joue > .wrap > .section:first-child .row{margin-bottom:6px!important}
.view.blt-joue > .wrap{padding-top:0}
.blt{height:calc(100dvh - 156px);min-height:440px;padding-top:6px;padding-bottom:8px}
@media (max-width:760px){ .blt{height:calc(100dvh - 128px)} }

/* Ce qui mangeait le haut de l'écran, mesuré : 64 d'en-tête, 74 de section,
   24 de marge et 44 de remplissage de scène. On rend les trois derniers. */
.view.blt-joue > .wrap > .section{padding-top:8px!important;padding-bottom:0!important}
.view.blt-joue .ap-cadre{margin-top:6px!important}
.view.blt-joue .ap-stage{padding:0!important}
.blt{height:calc(100dvh - 140px)}
@media (max-width:760px){ .blt{height:calc(100dvh - 118px)} }

/* le message se posait sur les cartes de la main : il remonte au-dessus */
.blt-msg{bottom:172px}
@media (max-height:780px){ .blt-msg{bottom:144px} }
@media (max-width:760px){ .blt-msg{bottom:126px} }

/* ==========================================================================
   LE BILAN : les quatre joueurs réagissent
   ========================================================================== */
.blt-bil-gens{position:relative;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.blt-bil-g{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 10px 5px;border-radius:16px;font-style:normal;
  background:linear-gradient(180deg,#FFFDF6,#F0E7D2);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  animation:bltGensIn .46s var(--ease-back) backwards;
  animation-delay:calc(.35s + var(--k)*.08s)}
@keyframes bltGensIn{from{opacity:0;transform:translateY(20px) scale(.7)}}
.blt-bil-g span{display:block;width:40px;height:44px;line-height:0}
.blt-bil-g span svg{width:100%;height:100%}
.blt-bil-g b{font-family:var(--display);font-weight:800;font-size:.64rem;color:#0B0E13}
.blt-bil-g u{position:absolute;top:-13px;right:-10px;padding:.1em .5em;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.66rem;text-decoration:none;
  color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2px #0B0E13}
.blt-bil-g.gagne{animation:bltGensIn .46s var(--ease-back) backwards,
  bltGensSaute 1.1s ease-in-out infinite;
  animation-delay:calc(.35s + var(--k)*.08s), calc(.9s + var(--k)*.12s)}
@keyframes bltGensSaute{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-10px) rotate(-4deg)}
  70%{transform:translateY(0) rotate(3deg)}}
.blt-bil-g.perd{filter:saturate(.5) brightness(.94)}
.blt-bil-g.perd span{transform:rotate(6deg) translateY(3px)}

/* ==========================================================================
   MOBILE — L'EN-TÊTE TIENT SUR UNE SEULE LIGNE
   --------------------------------------------------------------------------
   L'en-tête a une hauteur fixe et on lui avait demandé de passer à la ligne :
   les boutons débordaient donc PAR-DESSUS le contenu. On ne renvoie plus à la
   ligne, on rétrécit.
   ========================================================================== */
@media (max-width:760px){
  header.top{height:auto;min-height:54px;flex-wrap:nowrap;gap:8px;
    padding:6px clamp(8px,2.6vw,14px)}
  .logo{flex:none;font-size:.95rem;padding:4px 11px 4px 5px;gap:7px;margin-left:0}
  .logo .logo-mark svg{width:26px;height:26px}
  .top-actions{flex:0 1 auto;flex-wrap:nowrap;gap:5px;min-width:0}
  .top-actions .btn{padding:.4em .66em;font-size:.74rem;gap:5px;white-space:nowrap}
  .top-actions .btn--icone,.top-actions .btn--picto{padding:.4em;width:34px;height:34px}
}
@media (max-width:520px){
  .logo > span:not(.logo-mark){display:none}   /* le pictogramme suffit */
  .logo{padding:4px 6px}
  .top-actions .btn{font-size:.68rem;padding:.38em .55em}
  .top-actions .btn--icone,.top-actions .btn--picto{width:31px;height:31px;padding:.32em}
}
@media (max-width:380px){
  .top-actions .btn{font-size:.62rem;padding:.34em .46em}
}
/* en paysage sur un téléphone, l'en-tête se fait tout petit */
@media (max-height:520px) and (orientation:landscape){
  header.top{min-height:44px;padding:4px 10px}
  .logo{font-size:.86rem}
  .logo .logo-mark svg{width:22px;height:22px}
  .top-actions .btn{font-size:.66rem;padding:.32em .5em}
}

/* sur un téléphone, le plan de la ligne est vertical : il lui faut de la
   hauteur, pas une bande écrasée */
@media (max-width:760px){
  .ls-stage svg{width:100%;height:auto;max-height:none}
  .ls-stage{min-height:auto;padding:12px 8px}
  .lineshow{padding:14px 10px 30px}
  .ls-head{gap:8px;padding:10px 12px}
  .ls-head b{font-size:.92rem;line-height:1.2}
}

/* ==========================================================================
   MOBILE — LE BOUTON DE PLEIN ÉCRAN, LE MODE PLEIN, L'INVITATION À TOURNER
   ========================================================================== */
.mob-fs{position:absolute;right:10px;top:10px;z-index:60;
  display:inline-flex;align-items:center;gap:6px;padding:.4em .7em;border:0;border-radius:14px;
  cursor:pointer;color:#0B0E13;font-family:var(--mono);font-size:.5rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 2.4px #0B0E13,0 3px 0 2.4px #0B0E13;
  transition:transform .16s var(--ease-back)}
.mob-fs svg{width:16px;height:16px;display:block}
.mob-fs:active{transform:translateY(2px);box-shadow:0 0 0 2.4px #0B0E13,0 1px 0 2.4px #0B0E13}
.mob-fs.on{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
@media (max-width:520px){ .mob-fs span{display:none} .mob-fs{padding:.42em} }

/* le repli quand le navigateur refuse le vrai plein écran (iOS) */
.mob-plein{position:fixed!important;inset:0!important;z-index:9000!important;
  width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;
  margin:0!important;border-radius:0!important;overflow:auto;background:#090E15}
body:has(.mob-plein){overflow:hidden}

/* l'invitation à tourner : seulement en portrait sur un écran tactile */
.mob-tourne{display:none}
@media (orientation:portrait) and (pointer:coarse){
  .mob-jeu .mob-tourne,.blt .mob-tourne{display:flex}
  .mob-tourne{position:absolute;inset:0;z-index:400;flex-direction:column;
    align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;
    border-radius:inherit;color:#E6EDF5;
    background:radial-gradient(120% 90% at 50% 0%,rgba(62,143,212,.2),transparent 62%),
               linear-gradient(170deg,#141C27,#080C12 74%)}
  .mob-tourne svg{width:110px;height:110px;animation:mobTourne 2.6s ease-in-out infinite}
  @keyframes mobTourne{0%,100%{transform:rotate(0)}45%,65%{transform:rotate(-90deg)}}
  .mob-tourne b{font-family:var(--display);font-weight:800;font-size:1.2rem;color:#fff}
  .mob-tourne p{margin:0;max-width:30ch;font-size:.86rem;color:#9FB0C2}
}

/* ==========================================================================
   MOBILE — LA BELOTE EN PLEIN ÉCRAN ET EN PAYSAGE
   ========================================================================== */
.blt.mob-plein,.blt:fullscreen{height:100dvh;max-height:none;padding:6px 8px 8px}
@media (max-height:560px){
  .blt{height:100dvh;padding:4px 6px 6px;gap:4px}
  .blt-bar{padding:.24em .5em;gap:6px}
  .blt-sco{min-width:48px;padding:.24em .5em}
  .blt-sco b{font-size:1rem}
  .blt-live{padding:.22em .6em;gap:6px}
  .blt-live em b{font-size:1rem}
  .blt-live>span{display:none}
  .blt-main{--cw:clamp(44px,13vh,74px);padding:8px 26px 2px}
  .blt-slot .blt-c{width:clamp(46px,12vh,72px)}
  .blt-tapis{padding-bottom:88px}
  .blt-slot--0{--sy:18px} .blt-slot--2{--sy:-56px}
  .blt-slot--1{--sx:-128px;--sy:-14px} .blt-slot--3{--sx:128px;--sy:-14px}
  .blt-evt{height:22px} .blt-evt-c{width:16px;height:22px;margin-inline:0 -9px}
  .blt-siege{min-width:60px;padding:.24em .44em}
  .blt-siege .blt-nom{font-size:.6rem}
  .blt-siege .blt-role{display:none}
  .blt-j{width:34px;height:34px}
  .blt-j-face{inset:5px}
  .blt-j-face b{font-size:.66rem}
  .blt-j-face em{display:none}
  .blt-moi .blt-av{width:22px;height:26px}
  .blt-moi b{font-size:.56rem}
  .blt-moi small{display:none}
  .blt-annoncer i{width:20px;height:20px}
  .blt-annoncer b{font-size:.62rem}
  .blt-msg{bottom:96px;font-size:.7rem;padding:.35em .8em}
  .blt-annonces--sur{top:44px;max-width:32%;padding:4px 7px}
  .blt-bilan{gap:5px;padding:10px}
  .blt-bil-ban{font-size:clamp(1rem,3.4vw,1.5rem)}
  .blt-bil-c{min-width:92px;padding:5px 9px}
  .blt-bil-c b{font-size:1.2rem}
  .blt-bil-gens{gap:6px}
  .blt-bil-g span{width:28px;height:30px}
  .blt-bil-det{padding:5px 8px}
  .blt-bil-l{font-size:.64rem;padding:.12em .2em}
  .blt-bil-j,.blt-bil-but{display:none}
}
/* en portrait tactile, la table reste en place derrière l'invitation */
@media (pointer:coarse) and (orientation:portrait){
  .blt{height:calc(100dvh - 150px);min-height:380px}
}

/* en paysage sur un téléphone, il ne reste que trois cent soixante-quinze
   pixels de haut : on rend tout ce qu'on peut, et le plein écran fait le
   reste */
@media (max-height:560px){
  .blt{height:calc(100dvh - 96px);min-height:0}
  .blt.mob-plein,.blt:fullscreen{height:100dvh}
  .view.blt-joue > .wrap > .section{padding-top:4px!important}
  .view.blt-joue > .wrap > .section .row{margin-bottom:4px!important}
  .view.blt-joue .ap-cadre{margin-top:2px!important}
  .blt-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .blt-bar::-webkit-scrollbar{display:none}
  .blt-ico-b span{display:none}
  .blt-ico-b{padding:.34em .44em}
  .blt-sco span{display:none}
  .blt-pl span{display:none}
  .blt-atout span{display:none}
}

/* une carte en plein écran occupe tout, et se laisse pincer pour zoomer */
.paris.mob-plein,.mc-mapwrap.mob-plein,.fr-carte.mob-plein,.ls-stage.mob-plein,
.paris:fullscreen,.mc-mapwrap:fullscreen,.fr-carte:fullscreen,.ls-stage:fullscreen{
  display:grid;place-items:center;padding:8px;background:#0A0E14}
.paris.mob-plein svg,.mc-mapwrap.mob-plein svg,.fr-carte.mob-plein svg,
.ls-stage.mob-plein svg,.paris:fullscreen svg,.fr-carte:fullscreen svg,
.ls-stage:fullscreen svg{max-width:100%;max-height:100dvh;width:auto;height:auto}
.paris,.mc-mapwrap,.fr-carte,.ls-stage{touch-action:pan-x pan-y pinch-zoom}
.blt{height:calc(100dvh - 140px)}
@media (max-height:560px){ .blt{height:calc(100dvh - 120px)} }
/* une rangée ne se saisit qu'à sa poignée au doigt : le reste fait défiler */
.sortrow{touch-action:pan-y}

/* la pastille du numéro sert de poignée au doigt */
.sortrow .idx{cursor:grab;touch-action:none}
.sortrow.prise{box-shadow:0 0 0 3px #FFCE00,0 14px 26px rgba(0,0,0,.5)}
@media (pointer:coarse){
  .sortrow .idx{position:relative}
  .sortrow .idx::after{content:"";position:absolute;inset:-10px;border-radius:50%}
}

/* ==========================================================================
   Le bouton de plein écran est un enfant de la carte : la règle
   « .ls-stage svg { width:100% } » le prenait pour le plan et l'étalait sur
   tout l'écran. On vise le SVG DU PLAN, et on verrouille l'icône.
   ========================================================================== */
.mob-fs svg{width:16px!important;height:16px!important;flex:none}
@media (max-width:760px){
  .ls-stage > svg{width:100%;height:auto;max-height:none}
  .ls-stage .mob-fs svg{width:16px!important;height:16px!important}
}
.paris.mob-plein > svg,.mc-mapwrap.mob-plein > svg,.fr-carte.mob-plein > svg,
.ls-stage.mob-plein > svg,.paris:fullscreen > svg,.fr-carte:fullscreen > svg,
.ls-stage:fullscreen > svg{max-width:100%;max-height:100dvh;width:auto;height:auto}

/* ==========================================================================
   METRO RUNNER SUR TÉLÉPHONE — l'objectif ne mange plus la voie
   ========================================================================== */
@media (max-width:760px){
  .rn-but{min-width:0;max-width:56vw;padding:.26em .5em;border-radius:10px;
    font-size:.62rem;line-height:1.15}
  .rn-but small{display:none}
  .rn-but-j{height:7px}
  .rn-haut{gap:5px;flex-wrap:wrap}
  .rn-chip,.rn-ligne{font-size:.6rem;padding:.24em .5em}
  .rn-scene{height:clamp(300px,52dvh,460px)}
}
@media (max-height:560px){
  .rn-but{max-width:40vw;font-size:.58rem;padding:.2em .44em}
  .rn-but-j{height:6px}
  .rn-haut{gap:4px}
  .rn-scene{height:calc(100dvh - 150px)}
}
/* en plein écran, l'objectif passe en tout petit dans un coin */
.rn-scene:fullscreen .rn-but,.rn-scene.rn-plein-css .rn-but{
  position:absolute;left:10px;top:52px;max-width:38vw;opacity:.92}
.rn-scene:fullscreen .rn-cv,.rn-scene.rn-plein-css .rn-cv{width:100%;height:100%}

/* ==========================================================================
   MÉTRODROP — LE POSTE DE CONDUITE TIENT SUR UN ÉCRAN
   --------------------------------------------------------------------------
   Mesuré avant : 827 px de cabine dans une fenêtre de 768, posés 630 px plus
   bas à cause de la carte de présentation. On replie ce qui est au-dessus et
   on fait flotter le pare-brise sur la place qui reste.
   ========================================================================== */
.view.md-conduit .ap-ban{display:none}
.view.md-conduit > .wrap > .section{padding-top:8px!important;padding-bottom:0!important}
.view.md-conduit > .wrap > .section .row{margin-bottom:6px!important}
.view.md-conduit .ap-cadre{margin-top:6px!important;padding:0!important;
  background:none;box-shadow:none}
.view.md-conduit .ap-stage{padding:0!important}
.view.md-conduit .ap-mascotte{display:none}

.md-conduit .mdx-cab{height:calc(100dvh - 140px);min-height:420px;gap:7px}
.md-conduit .mdx-vue{flex:1 1 auto;min-height:0;height:auto}
.md-conduit .mdx-tb,.md-conduit .mdx-jauges,
.md-conduit .mdx-manche,.md-conduit .mdx-sortie{flex:none}
/* le tableau de bord se resserre : quatre cadrans sur une seule rangée */
.md-conduit .mdx-tb{grid-template-columns:repeat(4,1fr);gap:6px}
@media (max-height:900px){
  .md-conduit .mdx-cab{gap:5px}
  .md-conduit .mdx-tb{gap:5px}
  .md-conduit .mdx-cad{padding:6px 8px}
  .md-conduit .mdx-cv-val{font-size:1.5rem}
  .md-conduit .mdx-manche{gap:6px}
  .md-conduit .mdx-b{padding:.42em .5em}
  .md-conduit .mdx-b b{width:24px;height:24px}
  .md-conduit .mdx-b span{font-size:.56rem}
}
@media (max-height:740px){
  .md-conduit .mdx-tb .mdx-cad-sous,.md-conduit .mdx-cad small{display:none}
  .md-conduit .mdx-sortie{display:none}
}
@media (max-width:760px){
  .view.md-conduit .mdx-cab{height:calc(100dvh - 116px);min-height:360px}
  .md-conduit .mdx-tb{grid-template-columns:repeat(4,1fr);gap:4px}
  .md-conduit .mdx-cad{padding:5px 4px;border-radius:12px}
  .md-conduit .mdx-cv-val{font-size:1.1rem}
  .md-conduit .mdx-manche{grid-template-columns:repeat(4,1fr);gap:5px}
  .md-conduit .mdx-b span{display:none}
  .md-conduit .mdx-b{padding:.5em .3em}
  .md-conduit .mdx-jauges{gap:5px}
}
@media (max-height:560px){
  .view.md-conduit .mdx-cab{height:calc(100dvh - 96px)}
  .md-conduit .mdx-tb{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
  .md-conduit .mdx-tb::-webkit-scrollbar{display:none}
  .md-conduit .mdx-tb .mdx-cad{flex:none;min-width:74px}
  .md-conduit .mdx-jauges{display:none}
}

/* le quatrième cadran débordait : les colonnes d'une grille ne rétrécissent
   pas sous la taille de leur contenu sans qu'on le leur dise */
.md-conduit .mdx-tb > *{min-width:0;overflow:hidden}
.md-conduit .mdx-cad{text-align:center}
@media (max-width:760px){
  .md-conduit .mdx-cad{padding:5px 3px}
  .md-conduit .mdx-sig-val{font-size:.72rem;line-height:1.1}
  .md-conduit .mdx-sig-sub,.md-conduit .mdx-cad .mdx-lab{font-size:.44rem;letter-spacing:.04em}
  .md-conduit .mdx-dist-val,.md-conduit .mdx-lim-val{font-size:1.05rem}
  .md-conduit .mdx-cv-val{font-size:1rem}
  .md-conduit .mdx-tb .mdx-cad svg{max-width:100%;height:auto}
}

/* ==========================================================================
   MÉTRO SOLITAIRE — TOUT SUR UNE PAGE
   --------------------------------------------------------------------------
   Le plateau descendait sous la fenêtre : on replie la carte de
   présentation, on cale le jeu sur la hauteur disponible, et la carte se
   dimensionne sur ce qui reste plutôt que sur 132 pixels en dur.
   ========================================================================== */
.view.so-partie .ap-ban{display:none}
.view.so-partie > .wrap > .section{padding-top:8px!important;padding-bottom:0!important}
.view.so-partie > .wrap > .section .row{margin-bottom:6px!important}
.view.so-partie .ap-cadre{margin-top:6px!important;padding:0!important;
  background:none;box-shadow:none}
.view.so-partie .ap-stage{padding:0!important}
.view.so-partie .ap-mascotte{display:none}

.so-partie .so-jeu{display:flex;flex-direction:column;gap:8px;
  height:calc(100dvh - 132px);min-height:420px}
.so-partie .so-jeu > *{flex:none}
.so-partie .so-plateau{flex:1 1 auto;min-height:0;margin-top:0;
  overflow-y:auto;align-content:start;scrollbar-width:thin}
.so-partie{--soH:clamp(64px,13.5dvh,120px)}
.so-partie .so-carte{min-height:var(--soH);padding:6px;gap:3px}
.so-partie .so-vide,.so-partie .so-garage-vide{height:var(--soH)}
.so-partie .so-garage-vide{width:calc(var(--soH)*0.70)}
.so-partie .so-defausse .so-carte{width:calc(var(--soH)*0.70)}
.so-partie .so-col{min-height:calc(var(--soH)*0.9);padding-bottom:14px}
@media (max-width:760px){
  .so-partie .so-jeu{height:calc(100dvh - 108px);gap:6px}
  .so-partie{--soH:clamp(52px,11dvh,88px)}
  .so-partie .so-plateau{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
    overflow-x:hidden}
  .so-partie .so-carte{padding:4px;border-radius:9px;font-size:.6rem}
  .so-partie .so-garages{gap:4px}
  .so-partie .so-reseau,.so-partie .so-pied{font-size:.64rem}
}
@media (max-height:560px){
  .so-partie .so-jeu{height:calc(100dvh - 92px)}
  .so-partie{--soH:clamp(46px,17dvh,80px)}
}

/* Mesuré sur un écran de 375 : barre 159, lignes 224, talon 374, réseau 157
   — il ne restait 8 px pour les sept colonnes. On dégraisse le mobilier. */
@media (max-width:760px){
  .so-partie .so-barre{gap:5px;padding:5px 7px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none}
  .so-partie .so-barre::-webkit-scrollbar{display:none}
  .so-partie .so-barre > *{flex:none}
  .so-partie .so-stat b{font-size:.92rem}
  .so-partie .so-stat span,.so-partie .so-stat small{font-size:.42rem}
  .so-partie .so-titre{font-size:.86rem}
  /* les quatre lignes à reconstituer : une seule rangée de plaquettes */
  .so-partie .so-fondations{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}
  .so-partie .so-fondations::-webkit-scrollbar{display:none}
  .so-partie .so-fondations > *{flex:none;min-width:78px;padding:5px 7px}
  .so-partie .so-fondations .so-fond-nom,
  .so-partie .so-fondations small{display:none}
  .so-partie .so-fondations b{font-size:.8rem}
  /* talon, défausse et voies de garage sur une seule ligne */
  .so-partie .so-haut{display:flex;gap:6px;align-items:flex-start;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none}
  .so-partie .so-haut::-webkit-scrollbar{display:none}
  .so-partie .so-haut > *{flex:none}
  .so-partie .so-garages{flex-wrap:nowrap}
  .so-partie .so-garage-vide{font-size:.4rem}
  /* le rappel du réseau se consulte, il n'a pas à tenir la moitié de l'écran */
  .so-partie .so-reseau{max-height:74px;overflow-y:auto;scrollbar-width:thin;
    font-size:.6rem;padding:6px 8px}
  .so-partie .so-pied{font-size:.6rem;padding:4px 6px}
  .so-partie{--soH:clamp(50px,10.5dvh,84px)}
}
@media (max-height:700px){
  .so-partie .so-reseau{max-height:56px}
}

/* le plateau ne prenait pas la place libre : les marges des voisins la
   mangeaient et une base « auto » le laissait à la taille de son contenu */
.so-partie .so-jeu > *{margin-top:0!important;margin-bottom:0!important}
.so-partie .so-plateau{flex:1 1 0%!important;min-height:120px}
.so-partie .so-reseau{flex:none}

/* ==========================================================================
   SNAKE — UN PLATEAU CARRÉ SUR TÉLÉPHONE
   --------------------------------------------------------------------------
   Sur un écran étroit, « largeur 100 %, hauteur 56 dvh » donnait un
   rectangle en portrait. Le terrain redevient carré, borné par la place
   disponible.
   ========================================================================== */
@media (max-width:760px){
  .snk-cv{width:100%;height:auto;aspect-ratio:1/1;max-height:min(60dvh,520px)}
  .snk-cadre{display:grid;place-items:center}
}
@media (max-height:560px) and (orientation:landscape){
  .snk-cv{height:min(72dvh,420px);width:auto;aspect-ratio:1/1;max-width:100%}
}

/* ==========================================================================
   LE PLEIN ÉCRAN DES CARTES ET DES TERRAINS
   --------------------------------------------------------------------------
   Passer en plein écran ne suffit pas : il faut que le contenu reprenne la
   place. On force les scènes à remplir, et l'outil envoie un « resize » que
   les jeux écoutent déjà pour se redessiner.
   ========================================================================== */
.playfield.mob-plein,.playfield:fullscreen,
.snk-cadre.mob-plein,.snk-cadre:fullscreen{
  width:100vw!important;height:100dvh!important;max-width:none!important;
  border-radius:0!important;padding:0!important;display:grid;place-items:center}
/* la carte de Metro City : pas de plein écran (ses calques ne le supportent
   pas), mais beaucoup plus de hauteur sur un téléphone, et ses propres
   boutons de zoom pour le reste */
@media (max-width:760px){
  .mc-mapwrap{height:min(68dvh,600px)!important}
}
.playfield.mob-plein canvas,.playfield:fullscreen canvas,
.snk-cadre.mob-plein canvas,.snk-cadre:fullscreen canvas{
  max-width:100vw;max-height:100dvh}
.snk-cadre.mob-plein .snk-cv,.snk-cadre:fullscreen .snk-cv{
  width:min(100vw,100dvh);height:min(100vw,100dvh);aspect-ratio:1/1;max-height:100dvh}
/* le bouton reste au-dessus de la scène, jamais dessous */
.mob-fs{z-index:400}

/* ==========================================================================
   MÉTRO BELOTE SUR TÉLÉPHONE — LA MAIN NE MANGE PLUS LA TABLE
   --------------------------------------------------------------------------
   Mesuré avant, en portrait sur 375 px : la rangée du bas débordait des deux
   côtés (le badge à −61, le bouton jusqu'à 437 pour une table qui s'arrête à
   353) et la carte faisait 72 × 131, soit un rapport de 1,82 — beaucoup trop
   allongée pour un petit écran.
   ========================================================================== */
@media (max-width:760px){
  /* la carte se tasse : la vignette n'a pas besoin d'être carrée ici */
  .blt-sc{aspect-ratio:4/3}
  .blt-c.mini .blt-sc,.blt-slot .blt-sc{aspect-ratio:4/3}
  .blt-haut{padding:3px 5px 2px}
  .blt-bas{padding:3px 5px 4px}
  .blt-bas b{font-size:.56rem;line-height:1.05}
  .blt-bas small{font-size:.4rem}
  .blt-val{font-size:.62rem}
  .blt-past{width:16px;height:16px;font-size:.52rem}

  /* le badge et le bouton se rangent DANS les coins : la main a toute la
     largeur entre les deux */
  .blt-zone-main{position:absolute;left:0;right:0;bottom:2px;display:block;gap:0}
  .blt-moi{position:absolute;left:4px;bottom:2px;z-index:12;
    padding:.28em .4em;border-radius:12px;gap:0}
  .blt-moi .blt-av{width:22px;height:25px}
  .blt-moi b{font-size:.52rem}
  .blt-moi small{display:none}
  .blt-moi .blt-jetons{max-width:120px;gap:4px}
  .blt-moi .blt-chrono{left:auto;right:calc(100% + 4px)}
  .blt-annoncer{position:absolute;right:4px;bottom:2px;z-index:12;
    flex-direction:column;gap:1px;padding:.34em .4em}
  .blt-annoncer i{width:20px;height:20px}
  .blt-annoncer b{font-size:.54rem}
  .blt-main{padding:8px 68px 2px;justify-content:center;--cw:clamp(46px,min(9dvh,14.5vw),78px)}
  /* on rapproche les cartes : on doit toutes les voir, pas les étaler */
  .blt-main .blt-c{margin-inline:calc(var(--cw) * -0.345);transform-origin:50% 150%}
  .blt-main .blt-c.ok:hover,.blt-main .blt-c.selectionnable:hover,
  .blt-main .blt-c.choisie{z-index:9}

  /* les jetons et les boutons du bandeau à l'échelle de l'écran */
  .blt-j{width:36px;height:36px}
  .blt-j-face{inset:5px}
  .blt-j-face b{font-size:.68rem}
  .blt-j-face em{display:none}
  .blt-ico-b{padding:.3em .42em}
  .blt-ico-b svg{width:14px;height:14px}
  .blt-sco{min-width:42px;padding:.22em .44em}
  .blt-sco b{font-size:.95rem}
  .blt-live{padding:.2em .5em;gap:6px}
  .blt-live em b{font-size:.95rem}
  .blt-live > span{display:none}
  /* la croix du pli se resserre elle aussi */
  .blt-slot .blt-c{width:clamp(48px,min(9.5dvh,17vw),78px)}
  .blt-slot--0{--sy:26px} .blt-slot--2{--sy:-52px}
  .blt-slot--1{--sx:-92px;--sy:-14px} .blt-slot--3{--sx:92px;--sy:-14px}
  .blt-tapis{padding-bottom:96px}
  .blt-msg{bottom:104px;font-size:.64rem;padding:.3em .7em;max-width:84%}
}
@media (max-width:760px) and (orientation:landscape){
  .blt-main{padding:6px 46px 2px;--cw:clamp(40px,12.5dvh,66px)}
  .blt-slot .blt-c{width:clamp(42px,12dvh,66px)}
  .blt-tapis{padding-bottom:74px}
  .blt-slot--0{--sy:16px} .blt-slot--2{--sy:-46px}
  .blt-slot--1{--sx:-104px} .blt-slot--3{--sx:104px}
  .blt-msg{bottom:80px}
}

/* ==========================================================================
   SUR TÉLÉPHONE — LE LOGO DE LA LIGNE, PAS LE MOT « LIGNE »
   --------------------------------------------------------------------------
   « Lignes d'une station » et « Le plus court chemin » affichaient huit
   grandes rangées « 5  Ligne 5 » qui remplissaient l'écran. Sur un petit
   écran on ne garde que la pastille, en grille, comme un clavier.
   ========================================================================== */
.rm-lig-pas{display:none}
@media (max-width:760px){
  .opts--lignes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:9px}
  .opts--lignes .opt{justify-content:center;align-items:center;padding:10px 4px;min-height:0;
    border-radius:16px}
  .opts--lignes .opt > span:not(.bullet){display:none}
  .opts--lignes .opt .bullet{width:38px;height:38px;font-size:1rem;margin:0}
  .rm-lig-txt{display:none}
  .rm-lig-pas{display:inline}
  /* le ✓ / ✕ des niveaux débutants était calé à droite d'un bouton large,
     avec 46 px de marge réservée : dans une case de 70 px il poussait le
     logo hors du bouton. Il devient un badge posé sur le coin. */
  .opts--lignes .opt{position:relative}
  .ap--debutant .opts--lignes .opt.good,.ap--debutant .opts--lignes .opt.bad{padding-right:4px}
  .ap--debutant .opts--lignes .opt.good::after,.ap--debutant .opts--lignes .opt.bad::after{
    right:-7px;top:-7px;translate:none;width:22px;height:22px;font-size:.78rem;z-index:2}
  .ap .opts--lignes .opt:is(.good,.bad)::before{position:absolute;top:-8px;right:-8px;margin:0;
    width:24px;height:24px;z-index:2;background-size:12px!important}
}

/* ==========================================================================
   MÉTRO SOLITAIRE SUR TÉLÉPHONE — DES CARTES QU'ON LIT
   --------------------------------------------------------------------------
   Mesuré avant, à 375 px : sept colonnes de 46 px de large, des noms
   coupés lettre par lettre (« Défen / se / (Gran / de »), une carte de
   158 px de haut, et les colonnes rognées par le haut. La cause de ce
   dernier défaut : le code empile les cartes avec des marges écrites pour
   des cartes de 132 px (−96 et −116 px) ; sur une carte de 84 px, chaque
   carte remontait AU-DESSUS de la précédente.
   Ici tout part d'une seule mesure, la largeur d'une colonne : la carte a
   une hauteur fixe qui en découle, l'empilement montre la tête de chaque
   carte (pastille + numéro) et 9 px de chaque dos. Le rappel des lignes du
   bas disparaît : les quatre plaques du haut disent déjà 0 / 13.
   ========================================================================== */
@media (max-width:760px){
  .view.so-partie{padding-left:6px!important;padding-right:6px!important}
  /* à la racine : la carte qu'on fait glisser est posée hors du plateau */
  :root{--soW:calc((100vw - 36px) / 7);--soCH:calc(var(--soW) * 1.42);
    --soPas:27px;--soPasDos:9px}
  .so-partie .so-jeu{position:relative;gap:6px;height:calc(100dvh - 126px)}
  .so-partie .so-reseau{display:none!important}

  /* — la barre des scores, en une rangée basse — */
  .so-partie .so-barre{padding:4px 8px;gap:8px;min-height:0}
  .so-partie .so-marque{font-size:.78rem;line-height:1.05;max-width:5.2em}
  .so-partie .so-stat-ico{width:15px;height:15px;margin-bottom:1px}
  .so-partie .so-stat b{font-size:.84rem}

  /* — les quatre lignes à reconstituer : quatre plaques sur une rangée — */
  .so-partie .so-fondations{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;overflow:visible}
  .so-partie .so-fondations > .so-fond{min-width:0!important;flex-direction:row;justify-content:center;
    gap:5px;padding:4px 4px!important;border-radius:12px}
  .so-partie .so-fond .so-past{width:21px;height:21px;font-size:.66rem}
  .so-partie .so-fondations b{font-size:.74rem!important;white-space:nowrap}

  /* — une carte — */
  :is(.so-partie,.so-fantome) .so-carte{width:100%;height:var(--soCH);min-height:0!important;flex:none;
    padding:3px!important;gap:1px!important;border-radius:8px;overflow:hidden;
    box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
  :is(.so-partie,.so-fantome) .so-carte::before{height:5px;border-bottom-width:1.5px;border-radius:7px 7px 0 0}
  :is(.so-partie,.so-fantome) .so-carte .so-tete{margin:4px 0 0!important;gap:2px;min-height:18px;
    display:flex;align-items:center}
  :is(.so-partie,.so-fantome) .so-carte .so-past{width:18px;height:18px;font-size:.58rem;box-shadow:0 0 0 1.5px #0B0E13}
  :is(.so-partie,.so-fantome) .so-carte .so-tete small{display:block!important;margin-left:auto;
    font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:-.03em;color:#0B0E13}
  :is(.so-partie,.so-fantome) .so-carte .so-nom{font-size:.54rem;line-height:1.08;letter-spacing:-.01em;
    overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto;
    display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  :is(.so-partie,.so-fantome) .so-carte .so-type{display:none}
  :is(.so-partie,.so-fantome) .so-carte.dos .so-dos{width:20px;height:20px;font-size:.66rem;box-shadow:0 0 0 1.5px #0B0E13}
  :is(.so-partie,.so-fantome) .so-carte.sel{transform:translateY(-4px);
    box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #FFCE00,0 0 0 6.5px #0B0E13}
  :is(.so-partie,.so-fantome) .so-carte:hover:not([disabled]){transform:none}
  /* les badges « seule », « quai », ★ : réduits à la taille de la carte */
  :is(.so-partie,.so-fantome) .so-carte.so-seule::after,:is(.so-partie,.so-fantome) .so-carte.so-verrou::after{
    right:2px;bottom:2px;padding:.08em .3em;font-size:.34rem;letter-spacing:.02em}
  :is(.so-partie,.so-fantome) .so-carte.so-verrou::before{left:2px;bottom:2px;width:10px;height:10px}
  :is(.so-partie,.so-fantome) .so-carte.majeure::after{right:2px;bottom:2px;width:12px;height:12px;font-size:.42rem}

  /* — l'empilement : la tête de chaque carte, 9 px de chaque dos —
     (les marges en ligne posées par le code sont remplacées) */
  .so-partie .so-col > .so-carte + .so-carte,
  .so-fantome .so-carte + .so-carte{margin-top:calc(var(--soPas) - var(--soCH))!important}
  .so-partie .so-col > .so-carte.dos + .so-carte{margin-top:calc(var(--soPasDos) - var(--soCH))!important}
  .so-partie .so-col{min-height:var(--soCH);padding-bottom:8px}
  .so-partie .so-vide{height:var(--soCH);font-size:.36rem;letter-spacing:.04em;padding:0 2px}
  .so-partie .so-plateau{gap:4px;padding-top:4px}

  /* — pioche, défausse et garages : des cartes de la même taille — */
  .so-partie .so-haut{gap:8px;justify-content:flex-start;overflow:visible}
  .so-partie .so-lab{font-size:.4rem;letter-spacing:.08em;white-space:nowrap}
  .so-partie .so-zone{gap:3px}
  .so-partie .so-pioche{width:var(--soW);height:var(--soCH);gap:3px;border-radius:8px}
  .so-partie .so-pioche .so-dos{width:22px;height:22px;font-size:.72rem}
  .so-partie .so-pioche small{font-size:.44rem}
  .so-partie .so-defausse{min-height:0}
  .so-partie .so-defausse .so-carte{width:var(--soW)!important}
  .so-partie .so-defausse .so-carte + .so-carte{margin-left:calc(15px - var(--soW))!important}
  .so-partie .so-defausse-vide{width:var(--soW);height:var(--soCH);font-size:.4rem;letter-spacing:.06em}
  .so-partie .so-garages{display:grid;grid-template-columns:none;grid-auto-flow:column;
    grid-auto-columns:var(--soW);gap:4px}
  .so-partie .so-garages .so-garage-vide{width:var(--soW);height:var(--soCH);font-size:.36rem;
    letter-spacing:.04em;padding:0 2px}
  .so-partie .so-garages .so-carte{width:var(--soW);height:var(--soCH);padding:3px!important}
  .so-partie .so-garages .so-carte .so-nom{-webkit-line-clamp:4}

  /* — le bas : une seule rangée de boutons, le message flotte au-dessus — */
  .so-partie .so-pied{flex-wrap:nowrap;gap:6px;padding:0}
  .so-partie .so-pied .btn{font-size:.74rem;padding:.5em .8em;white-space:nowrap}
  .so-partie .so-pied .tag{display:none}
  .so-partie .so-msg{position:absolute;left:0;right:0;bottom:52px;z-index:30;margin:0 auto!important;
    width:max-content;max-width:92%;min-height:0;pointer-events:none;font-size:.78rem;
    box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
  .so-partie .so-msg:not(.on){display:none}
}

/* ==========================================================================
   LE PLEIN ÉCRAN DE SECOURS TIENT VRAIMENT L'ÉCRAN
   --------------------------------------------------------------------------
   Les parents marqués par MOB.porteurs perdent le temps du plein écran ce
   qui faisait d'eux le cadre de la position fixe. La page derrière ne
   défile plus, et la piste du Runner ne laisse passer ni défilement ni zoom.
   ========================================================================== */
.mob-porteur{will-change:auto!important;transform:none!important;filter:none!important;
  contain:none!important;perspective:none!important;animation:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.view:has(.mob-plein,.rn-plein-css){will-change:auto!important;transform:none!important;
  filter:none!important;animation:none!important}
html:has(.mob-plein,.rn-plein-css),html:has(.mob-plein,.rn-plein-css) body{
  overflow:hidden!important;overscroll-behavior:none}
.rn-scene{touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.rn-scene.rn-plein-css{top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100vw!important;height:100dvh!important;max-height:none!important;border-radius:0!important;
  box-shadow:none!important;margin:0!important}
.mob-plein{touch-action:manipulation;overscroll-behavior:contain}

/* ==========================================================================
   LE PLAN D'UNE LIGNE SUR TÉLÉPHONE — UNE CARTE, À L'HORIZONTALE, FIXE
   --------------------------------------------------------------------------
   Avant : un écran entier, un tracé vertical et 1 700 px à faire défiler.
   Maintenant : le même plan horizontal que sur ordinateur, dans une carte
   posée au milieu de l'écran, la page derrière assombrie. Rien ne défile,
   sauf la rangée des lieux desservis, de gauche à droite.
   ========================================================================== */
@media (max-width:760px){
  .lineshow.lineshow--mob{display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:14px 10px!important;overflow:hidden!important;touch-action:none;overscroll-behavior:contain;
    background:rgba(6,9,13,.78)!important}
  .lineshow--mob::before,.lineshow--mob::after{display:none}
  .ls-carte{position:relative;width:100%;max-width:460px;max-height:calc(100dvh - 28px);overflow:hidden;
    display:flex;flex-direction:column;gap:10px;padding:18px 10px 16px;border-radius:24px;
    background:
      repeating-linear-gradient(0deg,rgba(11,14,19,.07) 0 1.5px,transparent 1.5px 24px),
      repeating-linear-gradient(90deg,rgba(11,14,19,.055) 0 1.5px,transparent 1.5px 40px),
      linear-gradient(180deg,#F3EBDC,#E0D3B8);
    box-shadow:inset 0 9px 0 var(--c,#0064B0),inset 0 11.5px 0 #0B0E13,
      0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 26px 50px rgba(0,0,0,.55);
    animation:lsCarte .42s var(--ease-back) both}
  @keyframes lsCarte{from{transform:translateY(24px) scale(.94);opacity:0}}
  .ls-carte .ls-head{margin:0!important;padding:8px 8px 8px 8px!important;gap:10px!important;border-radius:16px;
    box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 4.5px #0E3A6B,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
  .ls-carte .ls-head .bullet{width:40px;height:40px;font-size:1.1rem;flex:none;
    box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #0B0E13}
  .ls-carte .ls-head > div{min-width:0;flex:1}
  .ls-carte .ls-head b{font-size:.74rem!important;line-height:1.2}
  .ls-carte .ls-head span{font-size:.5rem;margin-top:4px}
  .ls-carte .ls-close{width:34px;height:34px;flex:none;background-size:15px}
  .ls-carte .ls-stage{margin:4px 4px 0;padding:6px!important;border-radius:12px;
    box-shadow:0 0 0 2.5px #0B0E13,0 0 0 7px var(--c,#0064B0),0 0 0 9.5px #0B0E13}
  .ls-carte .ls-stage > svg{display:block;width:100%;height:auto;max-height:none}
  .ls-carte #ls-ghost{stroke-width:36}
  .ls-carte .ls-monus{margin:6px 0 0!important;min-width:0}
  .ls-carte .ls-lab{font-size:.5rem;margin:0 0 7px;padding:.4em .9em}
  .ls-carte .ls-rail{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:9px;
    padding:4px 4px 8px;touch-action:pan-x;scrollbar-width:none}
  .ls-carte .ls-rail::-webkit-scrollbar{display:none}
  .ls-carte .ls-monu{flex:none;width:108px;padding:26px 8px 8px;border-radius:12px}
  .ls-carte .ls-monu::before{height:18px}
  .ls-carte .ls-monu-ico{width:32px;height:32px;padding:2px}
  .ls-carte .ls-monu-ico svg{width:28px;height:28px}
  .ls-carte .ls-monu b{font-size:.68rem;line-height:1.15}
  .ls-carte .ls-monu small{font-size:.56rem}
}
html:has(.lineshow.on),html:has(.lineshow.on) body{overflow:hidden}

/* ==========================================================================
   MÉTRODROP — LES BOUTONS DU PUPITRE
   --------------------------------------------------------------------------
   Le pictogramme était dessiné en 30 px dans un rond de 24 px : il débordait
   à droite et en bas. Il prend maintenant les trois quarts de son rond, au
   centre. Et plus aucun bouton du site ne se laisse sélectionner ni copier
   par un appui long.
   ========================================================================== */
button,button *,.mdx-cab,.mdx-cab *,.mdh,.mdh *{-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none}
.mdx-b{touch-action:none;-webkit-tap-highlight-color:transparent}
.mdx-cab .mdx-b{justify-content:center}
.mdx-cab .mdx-b b{flex:none;display:grid!important;place-items:center;margin:0 auto!important;padding:0;
  line-height:0}
.mdx-cab .mdx-b b svg,.mdx-cab .mdx-b b .ci{display:block;width:74%!important;height:74%!important;margin:0!important}
@media (max-width:760px){
  .md-conduit .mdx-b b{width:32px!important;height:32px!important}
  .md-conduit .mdx-b{padding:.4em .3em!important;min-height:48px}
  /* trois cadrans au lieu de quatre quand les signaux ne sont pas encore
     débloqués : ils se partagent la largeur au lieu de laisser un trou */
  .md-conduit .mdx-tb{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
}

/* ==========================================================================
   SNAKE SUR TÉLÉPHONE — LE PLATEAU PREND LA PLACE
   --------------------------------------------------------------------------
   Mesuré avant, à 375 px : un plateau de 271 px, coincé par deux marges de
   16 px, la carte de présentation (440 px) au-dessus et un bandeau de six
   compteurs sur deux rangées (186 px). Pendant la partie on replie la
   présentation, on met les compteurs sur une rangée, et le plateau carré
   prend toute la largeur. Plus de bouton de plein écran.
   ========================================================================== */
@media (max-width:760px){
  .view:has(.snk-jeu){padding-left:4px!important;padding-right:4px!important}
  .view:has(.snk-jeu) .ap-ban,.view:has(.snk-jeu) .ap-mascotte{display:none!important}
  .view:has(.snk-jeu) > .wrap > .section{padding-top:6px!important;padding-bottom:0!important}
  .view:has(.snk-jeu) > .wrap > .section .row{margin-bottom:4px!important}
  .view:has(.snk-jeu) .ap-cadre{margin-top:4px!important;padding:0!important;background:none!important;
    box-shadow:none!important}
  .view:has(.snk-jeu) .ap-stage{padding:0!important}

  .snk-jeu .snk-hud{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:4px;margin-bottom:6px}
  .snk-jeu .snk-h{flex-direction:column;justify-content:center;gap:1px;padding:4px 2px;border-radius:10px;
    text-align:center;min-width:0}
  .snk-jeu .snk-h-ico{width:20px;height:20px}
  .snk-jeu .snk-h-ico svg{width:13px;height:13px;margin:0}
  .snk-jeu .snk-h-v{width:100%}
  .snk-jeu .snk-h b{font-size:.8rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .snk-jeu .snk-h span{display:block;font-size:.36rem;letter-spacing:.02em;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}

  .snk-jeu .snk-obj{padding:4px 8px 4px 4px;margin-bottom:4px;gap:6px;flex-wrap:nowrap;border-radius:14px}
  .snk-jeu .snk-obj-t{flex:none;font-size:.45rem;padding:.35em .6em;letter-spacing:.06em}
  .snk-jeu .snk-obj-x{flex:0 1 auto;min-width:0;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .snk-jeu .snk-obj-j{flex:1 1 40px;min-width:36px;height:12px}
  .snk-jeu .snk-obj-p{flex:none;font-size:.5rem}

  /* le cadre épais (13 px) déborde de sa boîte : on lui laisse juste sa place */
  .snk-jeu .snk-cadre{margin:15px 13px 17px!important;display:block}
  .snk-jeu .snk-cv{width:100%!important;height:auto!important;aspect-ratio:1/1;max-height:none!important}
  .snk-jeu .snk-pausebtn{width:40px;height:40px;top:8px;right:8px}
  .snk-jeu .snk-pad{grid-template-columns:repeat(3,62px);grid-template-rows:repeat(2,50px);gap:8px;
    margin:0 auto}
  .snk-jeu .snk-aide{display:none}
  .snk-jeu .snk-regle{margin-top:14px;font-size:.78rem}
}

/* ==========================================================================
   MÉTRO SOLITAIRE — « PERDU » : PLUS AUCUN COUP POSSIBLE
   --------------------------------------------------------------------------
   0,1 s   la carte monte du bas en rebondissant
   0,25 s  la rame arrive et bute sur le heurtoir à 1,05 s : la carte tremble,
           une étoile jaune éclate, un peu de fumée s'élève
   0,55 s  la plaque « Réseau bloqué » tombe et se balance
   1,6 s   le tampon « PERDU » s'écrase en tournant, projette sa poussière,
           la carte tremble une seconde fois
   ========================================================================== */
.so-perdu{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 38%,rgba(227,5,28,.32),rgba(6,9,13,.9) 72%);
  animation:soPdVoile .35s ease both}
@keyframes soPdVoile{from{opacity:0}}
.so-perdu-carte{position:relative;width:min(420px,100%);padding:14px 16px 16px;border-radius:26px;text-align:center;
  color:#0B0E13;background:
    repeating-linear-gradient(0deg,rgba(11,14,19,.05) 0 1.5px,transparent 1.5px 24px),
    linear-gradient(180deg,#FFFBEF,#F1E6CB);
  box-shadow:inset 0 9px 0 #E3051C,inset 0 11.5px 0 #0B0E13,
    0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.55);
  animation:soPdCarte .6s var(--ease-back) .1s both,soPdChoc .42s ease 1.05s,soPdChoc2 .5s ease 1.72s}
@keyframes soPdCarte{from{transform:translateY(70px) scale(.72) rotate(5deg);opacity:0}}
@keyframes soPdChoc{0%,100%{transform:none}25%{transform:translate(-8px,2px) rotate(-1.4deg)}
  55%{transform:translate(6px,-1px) rotate(1deg)}80%{transform:translate(-2px,0)}}
@keyframes soPdChoc2{0%,100%{transform:none}20%{transform:translateY(7px) scale(.985)}
  50%{transform:translate(-5px,-2px) rotate(-.8deg)}75%{transform:translate(3px,1px)}}

.so-perdu-scene{margin:12px -4px 0;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#26303D,#141A22);box-shadow:0 0 0 2.5px #0B0E13}
.so-perdu-scene svg{display:block;width:100%;height:auto}
.so-pd-rame{animation:soPdRame 1.05s cubic-bezier(.35,.02,.75,1) .25s both}
@keyframes soPdRame{0%{transform:translateX(-300px)}80%{transform:translateX(6px)}
  90%{transform:translateX(-10px)}100%{transform:translateX(0)}}
.so-pd-heurtoir{transform-box:fill-box;transform-origin:100% 100%;animation:soPdHeurt .4s ease 1.05s}
@keyframes soPdHeurt{40%{transform:translateX(4px) rotate(2deg)}}
.so-pd-feu{animation:soPdFeu .5s steps(2) infinite}
@keyframes soPdFeu{50%{fill:#5A1A1F}}
.so-pd-boum{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:soPdBoum .6s var(--ease-back) 1.05s both}
@keyframes soPdBoum{0%{opacity:0;transform:scale(.2) rotate(-40deg)}40%{opacity:1;transform:scale(1.25) rotate(8deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}}
.so-pd-fumee circle{opacity:0;animation:soPdFumee 1.6s ease-out 1.15s infinite}
.so-pd-fumee circle:nth-child(2){animation-delay:1.35s}
.so-pd-fumee circle:nth-child(3){animation-delay:1.55s}
@keyframes soPdFumee{0%{opacity:0;transform:translateY(6px) scale(.6)}25%{opacity:.95}
  100%{opacity:0;transform:translateY(-22px) scale(1.4)}}

.so-perdu-plaque{display:inline-block;margin:14px auto 0;padding:.5em 1.2em;border-radius:14px;
  font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:#0E3A6B;
  box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 4.5px #0E3A6B,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transform-origin:50% -30px;animation:soPdPlaque 1s var(--ease-back) .55s both}
@keyframes soPdPlaque{0%{transform:translateY(-60px) rotate(-10deg);opacity:0}
  45%{transform:translateY(0) rotate(6deg);opacity:1}70%{transform:rotate(-3deg)}100%{transform:none}}

.so-perdu-tampon{position:relative;display:block;width:max-content;margin:12px auto 4px;
  animation:soPdTampon .5s cubic-bezier(.2,1.5,.45,1) 1.6s both}
.so-perdu-tampon span{position:relative;z-index:1;display:block;padding:.02em .45em .06em;border-radius:12px;
  font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,13vw,3.6rem);line-height:1;letter-spacing:.06em;
  text-transform:uppercase;color:#E3051C;background:rgba(255,255,255,.35);
  border:5px solid #E3051C;box-shadow:inset 0 0 0 3px #FFFBEF,inset 0 0 0 5.5px #E3051C;
  transform:rotate(-9deg);text-shadow:2px 2px 0 rgba(227,5,28,.18)}
@keyframes soPdTampon{0%{opacity:0;transform:scale(3.4) rotate(-26deg)}70%{opacity:1;transform:scale(.92) rotate(2deg)}
  100%{opacity:1;transform:none}}
.so-perdu-tampon i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;
  background:#E7E1D3;box-shadow:0 0 0 2px #0B0E13;opacity:0;
  animation:soPdPoussiere .7s ease-out 1.92s both}
.so-perdu-tampon i:nth-child(even){width:6px;height:6px;margin:-3px;background:#E3051C}
@keyframes soPdPoussiere{0%{opacity:1;transform:rotate(var(--a)) translateX(20px) scale(1)}
  100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.4)}}

.so-perdu-txt{margin:8px auto 0;max-width:34ch;font-size:.86rem;line-height:1.4;color:#4A4F57;
  animation:soPdMonte .4s ease 2s both}
.so-perdu-chips{display:flex;justify-content:center;gap:8px;margin-top:12px;animation:soPdMonte .4s ease 2.1s both}
.so-perdu-chip{min-width:74px;padding:6px 10px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.so-perdu-chip b{display:block;font-family:var(--display);font-weight:800;font-size:1.1rem}
.so-perdu-chip small{display:block;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
  text-transform:uppercase;color:#5A5F68}
.so-perdu-btns{display:flex;flex-direction:column;gap:8px;margin-top:16px;animation:soPdMonte .4s ease 2.2s both}
.so-perdu-btns .btn{width:100%;justify-content:center}
.so-perdu-btns .btn--solid{color:#fff;font-weight:800;border:0;
  background:linear-gradient(180deg,#FF5E5E,#E3051C);text-shadow:0 2px 0 rgba(11,14,19,.35);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.so-perdu-btns .btn--ghost{color:#0B0E13;font-weight:700;border:0;background:#fff;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.so-perdu-btns .btn:active{transform:translateY(3px)}
@keyframes soPdMonte{from{opacity:0;transform:translateY(12px)}}
.so-fige .so-plateau,.so-fige .so-haut,.so-fige .so-fondations{filter:grayscale(.75) brightness(.8);
  transition:filter .8s ease}
@media (prefers-reduced-motion:reduce){
  .so-perdu,.so-perdu *{animation:none!important}
  .so-pd-boum{opacity:1}
}

/* ==========================================================================
   MÉTRODROP SUR TÉLÉPHONE — LE PLATEAU TIENT DANS L'ÉCRAN
   --------------------------------------------------------------------------
   Mesuré avant, à 375 × 812 : la carte de présentation, puis un bandeau de
   206 px, puis la mission (177 px) — la grille commençait à 1 036 px, sous
   l'écran. En « grand écran » on ne voyait jamais la mission et la grille
   ensemble. Pendant la partie : la présentation se replie, les compteurs
   tiennent sur une rangée, la mission se resserre, et la grille prend la
   place qui reste — sa largeur est bornée par la hauteur disponible, avec
   son cadre jaune entier (il déborde de 12 px, on lui laisse 13 px).
   ========================================================================== */
@media (max-width:760px){
  .view:has(.md-board){padding-left:6px!important;padding-right:6px!important}
  .view:has(.md-board) .ap-ban,.view:has(.md-board) .ap-mascotte{display:none!important}
  .view:has(.md-board) > .wrap > .section{padding-top:6px!important;padding-bottom:0!important}
  .view:has(.md-board) > .wrap > .section .row{margin-bottom:4px!important}
  .view:has(.md-board) .ap-cadre{margin-top:4px!important;padding:0!important;background:none!important;
    box-shadow:none!important;overflow:visible!important}
  .view:has(.md-board) .ap-stage{padding:0!important;overflow:visible!important}

  .view:has(.md-board) .gamebar{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;padding:5px!important;margin:0!important;border-radius:14px}
  .view:has(.md-board) .gamebar>div:not(.spacer):not(.progress){display:flex!important;flex-direction:column;
    align-items:center;justify-content:center;gap:1px;padding:4px 2px!important;min-width:0;border-radius:10px}
  .view:has(.md-board) .gamebar .hud-ico{width:20px;height:20px;border-radius:7px;font-size:.7rem}
  .view:has(.md-board) .gamebar .hud-ico .ci{width:14px;height:14px}
  .view:has(.md-board) .gamebar .hudlabel{font-size:.38rem;letter-spacing:.04em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .view:has(.md-board) .gamebar .hudval{font-size:.9rem}
  .view:has(.md-board) .gamebar .hearts{gap:2px}
  .view:has(.md-board) .gamebar .heart{width:12px;height:12px}
  .view:has(.md-board) .gamebar .progress{grid-column:1/-1;min-width:0!important;height:6px}

  .view:has(.md-board) .md-plaque{margin-top:8px!important;padding:12px 10px 10px!important;border-radius:18px}
  .view:has(.md-board) .md-haut{font-size:.48rem;letter-spacing:.12em;gap:6px}
  .view:has(.md-board) .md-nom{font-size:1.12rem!important;margin:.18em 0 .06em}
  .view:has(.md-board) .md-sous{font-size:.74rem;line-height:1.25}
  .view:has(.md-board) .md-avance{font-size:.52rem;margin:.35em 0 0}
  .view:has(.md-board) .md-jauge{margin-top:6px}

  .view:has(.md-board) .md-board{
    width:min(calc(100% - 26px), max(250px, calc(100dvh - 330px)))!important;
    max-width:540px;margin:22px auto 14px!important}
  .view:has(.md-board) .md-msg{margin-top:0;min-height:1.3em;font-size:.8rem}
}
/* en grand écran, la barre du navigateur disparaît : un peu plus de place */
@media (max-width:760px){
  html.mp-large .view:has(.md-board) .md-board{width:min(calc(100% - 26px), max(250px, calc(100dvh - 300px)))!important}
}

/* ==========================================================================
   MÉTRO BELOTE — LA TABLE, REFAITE
   --------------------------------------------------------------------------
   Un plateau de 920 × 470 unités, mis à l'échelle de l'écran par --k.
   Trois plans pour la profondeur :
     · au fond, la salle : un mur de station flou et des lumières ;
     · au milieu, le tapis, incliné en perspective, avec son rebord de bois ;
     · devant, les joueurs, les panneaux et votre main, bien droits.
   Toutes les tailles ci-dessous sont en unités du plateau.
   ========================================================================== */
.bt{position:relative;isolation:isolate;width:100%;height:calc(100dvh - 150px);min-height:320px;max-height:980px;
  margin:0 auto;overflow:hidden;border-radius:24px;background:#070A10;touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 26px 50px rgba(0,0,0,.45)}
@media (max-width:760px){ .bt{height:calc(100dvh - 118px)} }
@media (max-height:560px){ .bt{height:calc(100dvh - 64px);min-height:0} }
.bt.mob-plein,.bt:fullscreen,.bt.blt-plein-css{height:100dvh!important;max-height:none;border-radius:0;box-shadow:none}
.bt.blt-plein-css{position:fixed;inset:0;z-index:9000}
@media (orientation:portrait) and (pointer:coarse){ .bt .mob-tourne{display:flex} }

.bt-board{position:absolute;left:50%;top:50%;width:920px;height:470px;
  transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:50% 50%;
  font-family:var(--display);color:#0B0E13}
.bt-board *{box-sizing:border-box}

/* — le fond : la salle, floue, avec ses lumières qui dérivent — */
.bt-salle{position:absolute;inset:-60px -80px;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% 12%,rgba(62,143,212,.22),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 26px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 44px),
    linear-gradient(180deg,#1C2940 0%,#111A2A 45%,#080B12 100%);
  transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-9px));transition:transform .5s ease-out}
.bt-salle i{position:absolute;left:calc(var(--i)*12.5% + 4%);top:calc(12% + (var(--i) * 37 % 5) * 5%);
  width:calc(38px + var(--i) * 6px);height:calc(38px + var(--i) * 6px);border-radius:50%;filter:blur(10px);opacity:.34;
  background:radial-gradient(circle,#FFE9A8,transparent 65%);animation:btBokeh calc(9s + var(--i)*1.3s) ease-in-out infinite alternate}
.bt-salle i:nth-child(3n){background:radial-gradient(circle,#7FB2F0,transparent 65%)}
.bt-salle i:nth-child(4n){background:radial-gradient(circle,#F28EB8,transparent 65%)}
@keyframes btBokeh{to{transform:translate(26px,14px) scale(1.25);opacity:.18}}

/* — la table : le tapis incliné, le bois, l'ombre — */
.bt-table3d{position:absolute;left:30px;top:58px;width:860px;height:292px;z-index:1;
  perspective:1150px;perspective-origin:50% -30%;
  transform:translate(calc(var(--px,0)*-5px),calc(var(--py,0)*-3px));transition:transform .5s ease-out}
.bt-feutre{position:absolute;inset:0;border-radius:46px;transform:rotateX(17deg);transform-origin:50% 100%;
  background:
    radial-gradient(60% 70% at 50% 42%,rgba(255,255,255,.13),transparent 70%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 7px),
    linear-gradient(180deg,#22935E,#146B42 70%,#0F5A37);
  box-shadow:
    inset 0 0 0 9px rgba(0,0,0,.16),inset 0 0 0 11px rgba(255,236,190,.42),
    inset 0 0 70px rgba(0,0,0,.38),
    0 0 0 3px #0B0E13,0 0 0 13px #7A4520,0 0 0 15px #A8652F,0 0 0 18px #0B0E13,
    0 34px 44px rgba(0,0,0,.55);
  transition:box-shadow .6s ease}
/* l'atout teinte le liseré du tapis */
.bt-a-atout .bt-feutre{box-shadow:
    inset 0 0 0 9px rgba(0,0,0,.16),inset 0 0 0 11px var(--at),inset 0 0 36px color-mix(in srgb,var(--at) 45%,transparent),
    inset 0 0 70px rgba(0,0,0,.34),
    0 0 0 3px #0B0E13,0 0 0 13px #7A4520,0 0 0 15px #A8652F,0 0 0 18px #0B0E13,
    0 34px 44px rgba(0,0,0,.55)}
.bt-feutre-logo{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  opacity:.16;box-shadow:inset 0 0 0 9px #F3EAD6;pointer-events:none;
  background:
    linear-gradient(#F3EAD6,#F3EAD6) 50% 50%/78% 15px no-repeat,
    radial-gradient(circle,transparent 58%,transparent 59%)}
.bt-feutre-logo::after{content:"M";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:80px;color:#F3EAD6;transform:translateY(-4px)}
.bt-rebord{position:absolute;left:-18px;right:-18px;top:300px;height:18px;border-radius:0 0 30px 30px;
  background:linear-gradient(180deg,#8A5028,#4A2812 70%,#2E170A);
  box-shadow:0 0 0 3px #0B0E13,0 18px 30px rgba(0,0,0,.55);pointer-events:none}

/* — le bandeau — */
.bt-hud{position:absolute;left:10px;right:10px;top:6px;height:42px;z-index:20;display:flex;align-items:center;gap:7px}
.bt-hud-sp{flex:1}
.bt-eq{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;
  height:40px;padding:3px 12px 7px 10px;border-radius:14px;background:#FBF6E9;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.bt-eq small{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4A4F57;white-space:nowrap}
.bt-eq b{font-size:20px;line-height:1}
.bt-eq-j{position:absolute;left:10px;right:12px;bottom:5px;height:4px;border-radius:3px;background:rgba(11,14,19,.12);overflow:hidden}
.bt-eq-j u{display:block;height:100%;border-radius:3px;background:#3ED07A;transition:width .8s ease}
.bt-eq--1 .bt-eq-j u{background:#FF6B6B}
.bt-eq--0{background:linear-gradient(180deg,#E9FBEF,#C9F1D6)}
.bt-eq--1{background:linear-gradient(180deg,#FFEDEE,#FFD2D6)}
.bt-donne{display:flex;flex-direction:column;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:14px;
  color:#fff;background:#10161F;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.bt-donne small{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#9FB0C2}
.bt-donne span{display:flex;align-items:baseline;gap:5px}
.bt-donne b{font-size:17px;line-height:1}
.bt-donne em{font-style:normal;font-size:10px;color:#9FB0C2}
.bt-v0{color:#6EE7A0}.bt-v1{color:#FF9A9A}
.bt-at{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px 0 6px;border-radius:14px;background:#FBF6E9;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.bt-at i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-style:normal;font-weight:800;font-size:14px;
  color:var(--i,#fff);background:var(--c,#7A8794);box-shadow:0 0 0 2.5px #0B0E13}
.bt-at span{display:flex;flex-direction:column;line-height:1.05}
.bt-at small{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:#6B5E48}
.bt-at b{font-size:13px}
.bt-at.on{background:linear-gradient(180deg,#FFF3C4,#FFD54A);animation:btAtoutPop .6s var(--ease-back)}
.bt-at.on i{animation:btTourne 6s linear infinite}
@keyframes btAtoutPop{0%{transform:scale(.6)}60%{transform:scale(1.12)}}
@keyframes btTourne{0%,85%{transform:rotate(0)}95%{transform:rotate(20deg)}100%{transform:rotate(0)}}
.bt-dots{display:flex;gap:4px;height:40px;align-items:center;padding:0 9px;border-radius:14px;background:#10161F;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.bt-dots i{width:10px;height:10px;border-radius:50%;background:#2A3442;box-shadow:inset 0 0 0 1.5px #3E4A5A}
.bt-dots i.nous{background:#3ED07A;box-shadow:0 0 0 1.5px #0B0E13}
.bt-dots i.eux{background:#FF6B6B;box-shadow:0 0 0 1.5px #0B0E13}
.bt-dots i.cours{background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13;animation:btPulse 1s ease-in-out infinite}
.bt-hud .blt-ico-b{height:40px;padding:0 11px;border-radius:14px;font-size:12px}
.bt-hud .blt-ico-b svg{width:18px;height:18px}
.bt-hud .blt-ico-b span{font-size:11px}
@keyframes btPulse{50%{transform:scale(1.35)}}

/* — un siège — */
.bt-siege,.bt-moi{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:8px 8px 7px;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC6);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 18px 26px rgba(0,0,0,.45);
  translate:calc(var(--px,0)*-2px) calc(var(--py,0)*-1px);transition:translate .5s ease-out,box-shadow .3s}
.bt-siege--1{left:24px;top:124px;width:136px}
.bt-siege--3{left:760px;top:124px;width:136px}
.bt-siege--2{left:330px;top:52px;width:260px;height:64px;flex-direction:row;gap:10px;padding:6px 12px 6px 8px;align-items:center}
.bt-av{display:block;width:50px;height:54px;flex:none;border-radius:50%;overflow:hidden;
  background:color-mix(in srgb,var(--c) 30%,#fff);box-shadow:0 0 0 2.5px #0B0E13}
.bt-av svg{display:block;width:100%;height:100%}
.bt-siege--2 .bt-av{width:46px;height:50px}
.bt-id{display:flex;flex-direction:column;align-items:center;line-height:1.05}
.bt-siege--2 .bt-id{align-items:flex-start}
.bt-nom{font-size:14px;font-weight:800}
.bt-role{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c) 55%,#3A3F48)}
.bt-fan{position:relative;display:block;width:108px;height:34px;margin-top:3px}
.bt-siege--2 .bt-fan{width:96px;height:44px;margin:0}
.bt-fan-c{position:absolute;left:calc(50% - 12px + (var(--k) - (var(--m) - 1) / 2) * 10px);top:2px;width:24px;height:33px;
  transform:rotate(calc((var(--k) - (var(--m) - 1) / 2) * 7deg));transform-origin:50% 130%;
  filter:drop-shadow(0 2px 0 #0B0E13)}
.bt-fan-c svg{display:block;width:100%;height:100%}
.bt-cpt{position:absolute;right:7px;top:7px;font-family:var(--mono);font-size:9px;font-weight:700;color:#6B5E48}
.bt-siege--2 .bt-cpt{right:10px;top:5px}
.bt-voile{visibility:hidden}
.bt-revele{animation:btRevele .42s var(--ease-back) both}
@keyframes btRevele{from{transform:rotateY(90deg) scale(.7);opacity:.2}}
.bt-fan-c.bt-revele{animation:btReveleDos .3s var(--ease-back) both}
@keyframes btReveleDos{from{opacity:0;translate:0 -10px}}
/* à qui de jouer : un halo qui respire et une bulle qui réfléchit */
.bt-siege.actif,.bt-moi.actif{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 0 0 8.5px #0B0E13,
  0 5px 0 8.5px #0B0E13,0 0 34px 10px color-mix(in srgb,var(--c) 55%,transparent);animation:btActif 1.3s ease-in-out infinite}
@keyframes btActif{50%{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 0 0 8.5px #0B0E13,
  0 5px 0 8.5px #0B0E13,0 0 16px 4px color-mix(in srgb,var(--c) 40%,transparent)}}
.bt-pense{position:absolute;right:-16px;top:-14px;display:flex;gap:3px;padding:6px 8px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.bt-pense i{width:6px;height:6px;border-radius:50%;background:#0B0E13;animation:btPoint 1s ease-in-out infinite}
.bt-pense i:nth-child(2){animation-delay:.15s}.bt-pense i:nth-child(3){animation-delay:.3s}
@keyframes btPoint{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-4px);opacity:1}}
.bt-plis{position:absolute;left:-10px;top:-10px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;
  border-radius:12px;font-size:12px;font-weight:800;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.bt-plis::before{content:"";position:absolute;left:-7px;top:6px;width:9px;height:12px;border-radius:2px;background:#1A4A9E;
  box-shadow:0 0 0 1.5px #0B0E13,2px -2px 0 -.5px #1A4A9E,2px -2px 0 1px #0B0E13}
.bt-siege.bt-recoit,.bt-moi.bt-recoit{animation:btRecoit .6s var(--ease-back) .5s}
@keyframes btRecoit{40%{transform:scale(1.12) rotate(-2deg)}}
/* le preneur : son brassard, à la ligne d'atout */
.bt-board .blt-brassard{top:-15px;z-index:3}
.bt-siege--2 .blt-brassard{left:23px}
/* les jetons, devant chaque place */
.bt-board .blt-jetons{position:absolute;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;max-width:none;
  transform:none;z-index:7;pointer-events:auto}
.bt-siege--1 .blt-jetons,.bt-siege--3 .blt-jetons{left:0;right:0;top:calc(100% + 9px);justify-content:center}
.bt-siege--2 .blt-jetons{left:calc(100% + 12px);top:10px;width:150px;justify-content:flex-start}
.bt-moi .blt-jetons{left:0;bottom:calc(100% + 10px);top:auto;width:150px;justify-content:flex-start}
.bt-board .blt-j{width:32px;height:32px}
.bt-board .blt-j-face{inset:5px}
.bt-board .blt-j-face b{font-size:12px}
.bt-board .blt-j-face b.long{font-size:7px}
.bt-board .blt-j-face em{font-size:5px}

/* — ma place — */
.bt-moi{left:14px;top:356px;width:104px;height:104px;justify-content:center;gap:2px;z-index:9}
.bt-moi .bt-nom{font-size:15px}
.bt-moi .blt-chrono{position:absolute;right:3px;top:3px;width:36px;height:36px}
.bt-moi .blt-chrono b{font-size:13px}

/* — une carte — */
.bt-c{--cw:78px;position:absolute;display:block;width:var(--cw);height:calc(var(--cw) * 1.44);padding:0;border:0;
  border-radius:calc(var(--cw) * .12);overflow:hidden;text-align:left;color:#0B0E13;cursor:default;
  font-size:calc(var(--cw) * .135);background:linear-gradient(180deg,#FFFBF0,#F1E6CD);
  box-shadow:0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13;-webkit-user-select:none;user-select:none}
.bt-c::before{content:"";position:absolute;left:0;right:0;top:0;height:6%;z-index:1;background:var(--c);
  border-bottom:1.5px solid #0B0E13}
.bt-c-art{position:absolute;left:7%;right:7%;top:10%;height:52%;overflow:hidden;border-radius:calc(var(--cw) * .07);
  box-shadow:0 0 0 1.6px #0B0E13;background:#E4D9BE}
.bt-c-art svg{display:block;width:100%;height:100%}
.bt-c-idx{position:absolute;left:0;top:6%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.08em;
  padding:.16em .26em .28em .22em;border-radius:0 0 .7em 0;background:#FFFBF0;
  box-shadow:1.6px 1.6px 0 #0B0E13}
.bt-c-idx b{font-size:1.52em;font-weight:800;line-height:.95;letter-spacing:-.04em}
.bt-c-idx i{display:grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;font-style:normal;
  font-size:.8em;font-weight:800;color:var(--i);background:var(--c);box-shadow:0 0 0 1.4px #0B0E13}
.bt-c-nom{position:absolute;left:5%;right:5%;top:65%;bottom:4%;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;overflow:hidden;text-align:center;font-size:.86em;font-weight:800;line-height:1.08;
  letter-spacing:-.01em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:normal}
/* à l'atout : cadre d'or, étoile, et un reflet qui passe */
.bt-c--atout{background:linear-gradient(180deg,#FFF7D6,#FFE38A);
  box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #FFCE00,0 0 0 6.5px #0B0E13,0 4px 0 6.5px #0B0E13}
.bt-c--atout .bt-c-idx{background:#FFF7D6}
.bt-c--atout::after{content:"";position:absolute;inset:-40%;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  transform:translateX(-80%);animation:btReflet 3.2s ease-in-out infinite}
@keyframes btReflet{0%,55%{transform:translateX(-80%)}85%,100%{transform:translateX(80%)}}
.bt-c-etoile{position:absolute;right:5%;top:10%;z-index:2;width:1.5em;height:1.5em;
  background:#FFCE00;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 1px #0B0E13) drop-shadow(0 0 1px #0B0E13);animation:btEtoile 2.4s ease-in-out infinite}
@keyframes btEtoile{50%{transform:rotate(18deg) scale(1.15)}}
/* la belote en main : un cœur discret sur le Roi et la Dame */
.bt-c--belote .bt-c-nom::before{content:"♥ ";color:#E3051C}

/* — ma main : huit cartes côte à côte, jamais l'une sur l'autre — */
.bt-main{position:absolute;left:0;top:346px;width:920px;height:124px;z-index:8;perspective:900px}
.bt-main .bt-c{top:0;transform:translateY(var(--a)) rotate(var(--r));transform-origin:50% 120%;
  transition:transform .22s var(--ease-back),filter .2s,box-shadow .2s;
  animation:btMainIn .45s var(--ease-back) backwards;animation-delay:calc(var(--n) * 30ms)}
@keyframes btMainIn{from{opacity:0;transform:translateY(40px) rotate(var(--r))}}
.bt-main--tour .bt-c:not(.bt-c--ok){filter:saturate(.35) brightness(.72)}
.bt-main .bt-c--ok{cursor:pointer;transform:translateY(calc(var(--a) - 13px)) rotate(var(--r))}
.bt-main .bt-c--ok:not(.bt-c--atout){box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #FFFFFF,0 0 0 6.5px #0B0E13,0 4px 0 6.5px #0B0E13}
.bt-main .bt-c--ok:hover{transform:translateY(calc(var(--a) - 18px)) rotate(0deg) scale(1.04);z-index:3}
.bt-main .bt-c--ok:active{transform:translateY(calc(var(--a) - 8px)) scale(.97)}
.bt-main--choix .bt-c{cursor:pointer}
.bt-main--choix .bt-c.choisie{transform:translateY(calc(var(--a) - 16px)) rotate(var(--r));
  box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #7FD4E8,0 0 0 7.5px #0B0E13,0 4px 0 7.5px #0B0E13}
.bt-c-corr{position:absolute;right:4%;top:10%;z-index:4;display:flex;align-items:center;gap:.15em;padding:.1em .25em .1em .35em;
  border-radius:1em;background:#fff;box-shadow:0 0 0 1.5px #0B0E13;animation:btCorrTag 1.2s ease-in-out infinite}
.bt-c-corr b{font-size:.95em;line-height:1}
.bt-c-corr i{display:grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;font-style:normal;font-size:.72em;font-weight:800;
  color:var(--i);background:var(--c);box-shadow:0 0 0 1.2px #0B0E13}
@keyframes btCorrTag{50%{transform:scale(1.14)}}

/* — le pli — */
.bt-slot{position:absolute;width:70px;height:101px;margin:-50px 0 0 -35px;z-index:2;
  transform:rotate(var(--sr,0deg));transition:transform .45s cubic-bezier(.3,.7,.3,1),opacity .45s,filter .3s}
.bt-slot--0{--sr:-2deg}.bt-slot--1{--sr:5deg}.bt-slot--2{--sr:1.5deg}.bt-slot--3{--sr:-5deg}
.bt-slot::before{content:"";position:absolute;inset:4px -2px -6px 6px;border-radius:12px;background:rgba(0,0,0,.42);filter:blur(4px)}
.bt-slot .bt-c{--cw:70px;left:0;top:0}
.bt-slot.bt-vient{animation:btPose .5s cubic-bezier(.25,.8,.35,1.15) both}
@keyframes btPose{
  0%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(1.3);opacity:.4}
  65%{transform:translate(0,-10px) rotate(var(--sr)) scale(1.08);opacity:1}
  100%{transform:rotate(var(--sr)) scale(1)}}
.bt-slot.bt-vient::after{content:"";position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px;border-radius:50%;
  border:3px solid rgba(255,255,255,.7);animation:btOnde .55s ease-out .38s both;pointer-events:none}
@keyframes btOnde{from{transform:scale(.3);opacity:1}to{transform:scale(1.25);opacity:0}}
.bt-slot--atout.bt-vient::after{border-color:#FFCE00;border-width:5px;box-shadow:0 0 22px #FFCE00}
.bt-slot.bt-maitre .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #3ED07A,0 0 0 7.5px #0B0E13,0 4px 0 7.5px #0B0E13}
.bt-slot.bt-maitre.bt-slot--atout .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7.5px #0B0E13,0 4px 0 7.5px #0B0E13}
.bt-slot.bt-gagne{z-index:4;animation:btGagne .7s var(--ease-back) both}
.bt-slot.bt-gagne .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13,0 0 40px 12px rgba(255,206,0,.75)}
@keyframes btGagne{50%{transform:rotate(0) scale(1.22)}100%{transform:rotate(0) scale(1.12)}}
.bt-slot.bt-efface{filter:brightness(.6) saturate(.5)}
.bt-slot.bt-rassemble{animation:none;transform:translate(var(--gx),var(--gy)) rotate(var(--gr)) scale(.95);filter:none}
.bt-slot.bt-part{transform:translate(var(--tx),var(--ty)) rotate(var(--gr)) scale(.3);opacity:0;
  transition:transform .55s cubic-bezier(.55,0,.7,.4),opacity .5s ease-in}
.bt-corr-badge{position:absolute;left:50%;bottom:-17px;z-index:3;display:flex;align-items:center;gap:3px;padding:2px 6px;
  transform:translateX(-50%);border-radius:12px;background:#fff;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  animation:btCorrPop .6s var(--ease-back) .3s both}
.bt-corr-badge i{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;font-style:normal;font-size:9px;font-weight:800;
  color:var(--i);background:var(--c);box-shadow:0 0 0 1.4px #0B0E13}
.bt-corr-badge b{font-size:12px}
@keyframes btCorrPop{from{transform:translateX(-50%) scale(0) rotate(-20deg)}}

/* — la retournée, le paquet, les vols — */
.bt-ret{position:absolute;width:84px;height:121px;margin:-60px 0 0 -42px;z-index:3;animation:btRetFlotte 3s ease-in-out infinite}
.bt-ret .bt-c{--cw:84px;left:0;top:0;box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFFFFF,0 0 0 7px #0B0E13,0 0 36px 8px rgba(255,255,255,.35)}
.bt-ret-lab{position:absolute;left:50%;top:-24px;transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:10px;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2px #0B0E13}
@keyframes btRetFlotte{50%{translate:0 -4px}}
.bt-paquet{position:absolute;z-index:5;width:52px;height:74px;margin:-37px 0 0 -26px;
  box-shadow:calc(var(--h,10) * .1px) calc(var(--h,10) * .14px) 0 #E8DDC4,calc(var(--h,10) * .1px + 2px) calc(var(--h,10) * .14px + 2px) 0 #0B0E13;
  border-radius:8px}
.bt-paquet-d{display:block;width:100%;height:100%;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px #0B0E13}
.bt-paquet-d svg,.bt-vol svg{display:block;width:100%;height:100%}
.bt-paquet-n{position:absolute;right:-12px;top:-12px;display:grid;place-items:center;min-width:24px;height:24px;padding:0 5px;border-radius:12px;
  font-size:12px;font-weight:800;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.bt-paquet.bt-melange .bt-paquet-d{animation:btMelange .5s ease-in-out 2}
@keyframes btMelange{25%{transform:translateX(-18px) rotate(-8deg)}50%{transform:translateY(-6px)}75%{transform:translateX(18px) rotate(8deg)}}
.bt-paquet.part{transition:transform .4s ease-in,opacity .4s;transform:scale(.4);opacity:0}
.bt-vols{position:absolute;inset:0;z-index:30;pointer-events:none}
.bt-vol{position:absolute;display:block;width:52px;height:74px;margin:-37px 0 0 -26px;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 2px #0B0E13;transform:rotate(var(--r0));filter:drop-shadow(0 6px 5px rgba(0,0,0,.45))}
.bt-vol.go{animation:btVol var(--t) cubic-bezier(.3,.55,.35,1) forwards}
@keyframes btVol{
  0%{transform:translate(0,0) rotate(var(--r0)) scale(1)}
  55%{transform:translate(calc(var(--dx) * .55),calc(var(--dy) * .55 - 44px)) rotate(calc(var(--r1) * .6)) scale(1.22);
    filter:drop-shadow(0 22px 12px rgba(0,0,0,.35))}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r1)) scale(var(--s1))}}
.bt-vol--face{width:84px;height:121px;margin:-60px 0 0 -42px;overflow:visible;box-shadow:none;border-radius:0}
.bt-vol--face .bt-c{--cw:84px;left:0;top:0}
.bt-flip3d{position:absolute;z-index:31;width:84px;height:121px;margin:-60px 0 0 -42px;perspective:700px;
  transition:transform .55s cubic-bezier(.3,.6,.35,1.1)}
.bt-flip3d.go{transform:translate(var(--dx),var(--dy))}
.bt-flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s var(--ease-back)}
.bt-flip3d.tourne .bt-flip-in{transform:rotateY(180deg)}
.bt-flip-dos,.bt-flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px}
.bt-flip-dos{display:block;overflow:hidden;box-shadow:0 0 0 2px #0B0E13}
.bt-flip-dos svg{display:block;width:100%;height:100%}
.bt-flip-face{transform:rotateY(180deg)}
.bt-flip-face .bt-c{--cw:84px;left:0;top:0}
.bt-flip3d.tourne::after{content:"";position:absolute;inset:-30px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,238,160,.8),transparent 65%);animation:btHalo .9s ease-out .25s both}
@keyframes btHalo{from{transform:scale(.3);opacity:0}40%{opacity:1}to{transform:scale(1.4);opacity:0}}
.bt-flotte{position:absolute;z-index:35;transform:translate(-50%,-50%);white-space:nowrap;padding:4px 12px;border-radius:14px;
  font-size:20px;font-weight:800;color:#0B0E13;background:var(--c);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  pointer-events:none;animation:btFlotteUp 1.45s cubic-bezier(.2,.8,.3,1) both}
@keyframes btFlotteUp{0%{opacity:0;transform:translate(-50%,-10%) scale(.4)}18%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}
  70%{opacity:1;transform:translate(-50%,-110%) scale(1)}100%{opacity:0;transform:translate(-50%,-150%) scale(.9)}}

/* — les deux panneaux du tapis — */
.bt-plaque{position:absolute;top:140px;width:164px;min-height:146px;max-height:196px;overflow:hidden;z-index:4;padding:9px 10px;border-radius:16px;
  translate:calc(var(--px,0)*-3px) calc(var(--py,0)*-2px);transition:translate .5s ease-out;animation:btPlaque .45s var(--ease-back) both}
@keyframes btPlaque{from{opacity:0;transform:scale(.85)}}
.bt-plaque--pli{left:172px;color:#fff;background:#0E3A6B;
  box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 4.5px #0E3A6B,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 16px 24px rgba(0,0,0,.4)}
.bt-pl-t,.bt-aff-t{display:block;margin-bottom:6px;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.8}
.bt-pl-r{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:5px;font-size:11px}
.bt-pl-r span{font-weight:600;opacity:.85}
.bt-pl-past{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;
  color:var(--i);background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3.5px #0B0E13;flex:none}
.bt-pl-qui{padding:2px 8px;border-radius:9px;font-size:11px;color:#0B0E13;background:var(--c);box-shadow:0 0 0 1.5px #0B0E13}
.bt-pl-aide{font-size:9.5px;line-height:1.35;opacity:.85}
.bt-pl-duel{margin:2px -2px 5px;padding:5px 6px;border-radius:10px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13;
  animation:btDuel .6s var(--ease-back)}
.bt-pl-duel b{display:block;font-size:11px}
.bt-pl-duel span{display:block;font-size:9px;line-height:1.2}
@keyframes btDuel{from{transform:scale(.6) rotate(-6deg)}}
.bt-pl-ordre,.bt-pl-rang span{display:flex;gap:2px}
.bt-pl-ordre i,.bt-pl-rang span i{display:grid;place-items:center;flex:1;height:17px;border-radius:5px;font-style:normal;font-size:9.5px;font-weight:800;
  color:#0B0E13;background:#F3EAD6}
.bt-pl-ordre i:first-child{background:#FFCE00}
.bt-pl-rang{display:flex;align-items:center;gap:5px;margin-top:6px}
.bt-pl-rang .bt-pl-past{width:20px;height:20px;font-size:9px}
.bt-pl-rang--x em{flex:none;width:20px;font-style:normal;font-size:7px;font-weight:700;text-transform:uppercase;opacity:.75}
.bt-plaque--pli.duel{background:#5A2A0E}
.bt-affiche{left:584px;color:#FFCE00;background:#10151D;
  box-shadow:inset 0 0 0 2.5px #3A4250,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 16px 24px rgba(0,0,0,.4)}
.bt-affiche::before{content:"";position:absolute;inset:4px;border-radius:12px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.bt-aff-t{color:#9FB0C2}
.bt-affiche-t{margin:0;font-family:var(--mono);font-size:11.5px;font-weight:700;line-height:1.38;text-shadow:0 0 8px rgba(255,206,0,.45)}
.bt-affiche.msg .bt-affiche-t{color:#FFE680}
.bt-affiche.flash{animation:btFlash .5s ease}
@keyframes btFlash{0%{box-shadow:inset 0 0 0 2.5px #FFCE00,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 0 30px 8px rgba(255,206,0,.6)}}

/* — les panneaux d'enchère et d'annonce, posés sur le tapis — */
.bt-board .blt-enchere,.bt-board .blt-annonce-p{transform:none;max-height:none;overflow:visible;margin:0}
.bt-board .blt-enchere{position:absolute;left:240px;width:440px;top:284px;z-index:12;padding:8px 12px 9px 30px;gap:6px;border-radius:18px;
  color:#fff;background:linear-gradient(180deg,#1A2432,#10161F);
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13,0 18px 30px rgba(0,0,0,.5);animation:btPanneau .45s var(--ease-back) both}
.bt-board .blt-enchere p{font-size:15px}
.bt-board .blt-enchere .blt-chrono{position:absolute;left:-18px;top:-18px}
.bt-board .blt-enchere .btn,.bt-board .blt-annonce-p .btn{font-size:13px;padding:.55em 1em}
@keyframes btPanneau{from{opacity:0;transform:translateY(22px) scale(.92)}}
.bt-board .blt-annonce-p{position:absolute;left:215px;width:490px;top:128px;z-index:12;padding:14px 16px;gap:8px;border-radius:20px;
  color:#fff;background:linear-gradient(180deg,#1A2432,#10161F);
  box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13,0 18px 30px rgba(0,0,0,.5);animation:btPanneau .45s var(--ease-back) both}
.bt-board .blt-annonce-p p{font-size:16px}
.bt-board .blt-annonce-p small{font-size:11px;line-height:1.45}
.bt-board .blt-annonce-p .blt-chrono{width:46px;height:46px}
.bt-board .blt-annoncer{position:absolute;left:810px;top:372px;width:96px;z-index:9;padding:8px 6px}
.bt-board .blt-annoncer b{font-size:13px}
.bt-board .blt-annoncer small{font-size:7px}

/* — bandeau de début de donne, messages — */
.bt-ban{position:absolute;left:50%;top:176px;z-index:32;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 26px 12px;border-radius:18px;transform:translateX(-50%);color:#fff;background:#E3051C;white-space:nowrap;
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,0 20px 36px rgba(0,0,0,.5);animation:btBan .6s var(--ease-back) both}
.bt-ban small{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.bt-ban b{font-size:22px;text-shadow:0 3px 0 #0B0E13}
.bt-ban.fin{animation:btBanFin .4s ease-in both}
@keyframes btBan{from{opacity:0;transform:translateX(-50%) translateY(-40px) rotate(-6deg) scale(.6)}}
@keyframes btBanFin{to{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.8)}}
.bt-toast{position:absolute;left:50%;top:126px;z-index:25;max-width:560px;padding:7px 14px;border-radius:14px;
  transform:translate(-50%,-10px);opacity:0;text-align:center;font-size:13px;font-weight:700;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transition:opacity .25s,transform .35s var(--ease-back);pointer-events:none}
.bt-toast.on{opacity:1;transform:translate(-50%,0)}

/* — la prise : la pastille jaillit du preneur — */
.bt-prise{position:absolute;left:460px;top:222px;z-index:40;width:0;height:0;pointer-events:none}
.bt-prise-rayons{position:absolute;left:-190px;top:-190px;width:380px;height:380px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--c) 70%,#fff) 0 10deg,transparent 10deg 22deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 68%);mask:radial-gradient(circle,#000 20%,transparent 68%);
  animation:btRayons 2.2s linear both}
@keyframes btRayons{0%{opacity:0;transform:scale(.2) rotate(0)}20%{opacity:1}80%{opacity:.9}100%{opacity:0;transform:scale(1.2) rotate(80deg)}}
.bt-prise-past{position:absolute;left:-60px;top:-60px;display:grid;place-items:center;width:120px;height:120px;border-radius:50%;
  font-size:58px;font-weight:800;color:var(--i);background:var(--c);
  box-shadow:0 0 0 5px #fff,0 0 0 9px #0B0E13,0 9px 0 9px #0B0E13,0 0 60px 20px color-mix(in srgb,var(--c) 70%,transparent);
  text-shadow:0 3px 0 rgba(11,14,19,.35);animation:btPriseIn .75s cubic-bezier(.2,1.4,.4,1) both}
@keyframes btPriseIn{0%{transform:translate(var(--sx),var(--sy)) scale(.2) rotate(-180deg)}100%{transform:none}}
.bt-prise-t{position:absolute;left:0;top:74px;display:flex;flex-direction:column;align-items:center;white-space:nowrap;
  padding:6px 18px 8px;border-radius:14px;transform:translateX(-50%);color:#0B0E13;background:#FBF6E9;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;animation:btPriseT .5s var(--ease-back) .45s both}
.bt-prise-t small{font-size:13px;font-weight:800;color:#4A4F57}
.bt-prise-t b{font-size:22px;text-transform:uppercase}
@keyframes btPriseT{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.7)}}
.bt-prise-eclats u{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:3px;background:var(--c);
  box-shadow:0 0 0 2px #0B0E13;animation:btEclat .9s ease-out .55s both}
.bt-prise-eclats u:nth-child(odd){background:#FFCE00;border-radius:50%}
@keyframes btEclat{from{transform:rotate(var(--a)) translateX(40px) scale(1);opacity:1}
  to{transform:rotate(var(--a)) translateX(190px) scale(.3);opacity:0}}
.bt-prise.fin .bt-prise-past{transition:transform .5s cubic-bezier(.5,0,.7,.4),opacity .5s;transform:translate(250px,-200px) scale(.22);opacity:.2}
.bt-prise.fin .bt-prise-t{transition:opacity .3s;opacity:0}
.bt-board.bt-choc .bt-table3d{animation:btChoc .5s ease .55s}
@keyframes btChoc{25%{transform:translateY(6px)}55%{transform:translateY(-3px)}}

/* — l'explication de la correspondance — */
.bt-explic{position:absolute;left:190px;top:66px;width:540px;z-index:45;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 18px 14px;border-radius:22px;text-align:center;color:#0B0E13;background:linear-gradient(180deg,#FFFBEF,#F1E6CB);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 0 0 2000px rgba(6,9,13,.55);animation:btPanneau .5s var(--ease-back) both}
.bt-explic.fin{transition:opacity .25s,transform .25s;opacity:0;transform:scale(.9)}
.bt-ex-titre{padding:4px 16px;border-radius:12px;font-size:20px;text-transform:uppercase;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transform:rotate(-2deg)}
.bt-ex-schema{display:flex;align-items:center;gap:10px;margin:4px 0 2px}
.bt-ex-schema .bt-c{--cw:58px;position:relative}
.bt-ex-l{display:flex;flex-direction:column;align-items:center;gap:3px}
.bt-ex-l i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-style:normal;font-size:17px;font-weight:800;
  color:var(--i);background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 5.5px #0B0E13}
.bt-ex-l small,.bt-ex-rail small{font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4A4F57}
.bt-ex-rail{display:flex;flex-direction:column;align-items:center}
.bt-ex-rail b{font-size:28px;line-height:1;animation:btRail 1s ease-in-out infinite}
@keyframes btRail{50%{transform:scale(1.25)}}
.bt-explic p{margin:0;max-width:52ch;font-size:12.5px;line-height:1.4;font-family:system-ui,-apple-system,sans-serif;font-weight:500}
.bt-explic .bt-ex-fort{font-family:var(--display);font-weight:800;font-size:13.5px}
.bt-ex-rangs{display:flex;gap:4px}
.bt-ex-rangs i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-style:normal;font-size:14px;font-weight:800;
  background:#fff;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;animation:btRang .4s var(--ease-back) both;
  animation-delay:calc(.3s + var(--k) * 70ms)}
.bt-ex-rangs i:first-child{background:#FFCE00}
@keyframes btRang{from{opacity:0;transform:translateY(12px) scale(.5)}}
.bt-explic .bt-ex-at{font-size:11.5px;color:#8A6A00;font-weight:700}
.bt-ex-ok{margin-top:4px;font-size:13px!important}

/* — les fenêtres (annonces, carnets) : posées DANS la table — */
.bt > .blt-modal{position:absolute;inset:0;z-index:600;overflow-y:auto}
.bt > .blt-bilan{z-index:500;overflow-y:auto}
.bt.blt-secousse .bt-board{animation:btSecousse .5s ease}
@keyframes btSecousse{20%{margin-left:-7px}40%{margin-left:6px}60%{margin-left:-4px}80%{margin-left:2px}}

@media (prefers-reduced-motion:reduce){
  .bt *,.bt *::before,.bt *::after{animation:none!important;transition:none!important}
}

/* l'enchère : une seule bande basse, sous la retournée, au-dessus de la main */
.bt-board .blt-enchere{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
.bt-board .blt-enchere p{flex:0 1 auto;text-align:center;font-size:14px!important;margin-right:6px!important}
.bt-board .blt-enchere:has(.blt-ench-l) p{flex:1 1 100%;margin-right:0!important}
.bt-board .blt-enchere .blt-ench-b{gap:7px}
.bt-board .blt-enchere .btn{padding:.45em .95em!important}
.bt-board .blt-enchere .blt-chrono{left:-20px;top:50%;margin-top:-20px;width:40px;height:40px}
.bt-board .blt-enchere .blt-ench-l{min-width:0;padding:.45em .8em!important;color:var(--i)!important;background:var(--c)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;font-weight:800}
.bt-board .blt-enchere:has(.blt-ench-l){top:272px}

/* ==========================================================================
   LE BILAN DE LA DONNE, DANS LE PLATEAU
   --------------------------------------------------------------------------
   Il était dimensionné pour l'ancienne table : en paysage, le titre sortait
   par le haut et le bouton par le bas. Posé dans le plateau, il suit la
   même échelle, sur deux colonnes : les points à gauche, le détail à droite.
   ========================================================================== */
.bt-board > .blt-bilan{position:absolute;inset:8px;z-index:60;display:grid!important;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"ban ban" "sous sous" "duo det" "gens but" "gens jauge" "go go";
  grid-template-rows:auto auto auto auto auto 1fr;
  column-gap:22px;row-gap:7px;align-items:center;justify-items:center;
  padding:16px 26px 14px!important;border-radius:26px;overflow:hidden;gap:7px 22px}
.bt-board .blt-bil-ban{grid-area:ban;font-size:38px!important;padding:4px 22px 6px!important}
.bt-board .blt-bil-ban em{font-size:38px}
.bt-board .blt-bil-sous{grid-area:sous;font-size:13px!important}
.bt-board .blt-bil-duo{grid-area:duo;gap:12px}
.bt-board .blt-bil-c{min-width:150px;padding:8px 14px}
.bt-board .blt-bil-c small{font-size:9px}
.bt-board .blt-bil-c b{font-size:36px!important;line-height:1}
.bt-board .blt-bil-c u{font-size:8px}
.bt-board .blt-bil-gens{grid-area:gens;gap:12px;align-self:center}
.bt-board .blt-bil-g span{width:40px;height:44px}
.bt-board .blt-bil-g b{font-size:10px!important;text-transform:none}
.bt-board .blt-bil-g u{font-size:10px}
.bt-board .blt-bil-det{grid-area:det;width:100%!important;padding:8px 12px}
.bt-board .blt-bil-l{grid-template-columns:1fr 54px 54px;font-size:13px;padding:4px 0}
.bt-board .blt-bil-l span{font-size:12px}
.bt-board .blt-bil-l b{font-size:15px!important;text-transform:none}
.bt-board .blt-bil-l--t span,.bt-board .blt-bil-l--t b{font-size:9px!important}
.bt-board .blt-bil-but{grid-area:but;display:block!important;font-size:9px!important;margin:0}
.bt-board .blt-bil-j{grid-area:jauge;display:flex!important;width:100%!important;gap:5px}
.bt-board .blt-bil-onde{display:none}
.bt-board .blt-bil-jl{grid-template-columns:40px 1fr 52px}
.bt-board .blt-bil-jl small{font-size:9px}
.bt-board .blt-bil-jl b{font-size:14px!important}
.bt-board .blt-bil-jl i{height:12px}
.bt-board .blt-bil-go{grid-area:go;align-self:end;font-size:16px!important;padding:.55em 1.6em!important;margin:0}

.bt-pl-sous{display:flex;align-items:center;gap:5px;margin:5px 0 3px;font-size:10px;font-weight:700;opacity:.9}
.bt-pl-sous .bt-pl-past{width:18px;height:18px;font-size:8.5px;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #0B0E13}
.bt-pl-ordre{gap:2px}
.bt-pl-ordre i{height:18px;font-size:10px;letter-spacing:-.04em}
.bt-pl-ordre--at i{background:#FFE58A}
.bt-pl-ordre--at i:first-child{background:#FFCE00}

/* ==========================================================================
   MÉTRO SOLITAIRE — LES CARTES, REFAITES, ET UN EMPILEMENT QUI SE LIT
   --------------------------------------------------------------------------
   Sur ordinateur aussi, les cartes empilées cachaient leur numéro : le code
   les chevauche de −96 / −116 px, prévus pour des cartes de 132 px, alors
   qu'elles en faisaient 100 — chaque carte remontait AU-DESSUS de la
   précédente. Tout part maintenant d'une hauteur de carte (--soCH) et d'un
   pas d'empilement (--soPas) qui laisse voir l'en-tête entier : la pastille
   de la ligne et le numéro de la station.
   La carte : un en-tête à la couleur de la ligne, le nom au centre, et en
   bas un petit tracé où un point situe la station sur sa ligne.
   ========================================================================== */
@media (min-width:761px){
  .so-partie,.so-fantome{--soCH:clamp(92px,15.5dvh,150px);--soCW:calc(var(--soCH) / 1.34);
    --soPas:calc(var(--soCH) * .26);--soPasDos:12px}
}
@media (max-width:760px){ :root{--soCW:100%} }
.so-partie,.so-fantome{--soTete:calc(var(--soPas) - 3px)}

/* — la carte, face visible — */
:is(.so-partie,.so-fantome) .so-carte{width:min(100%,var(--soCW,100%));height:var(--soCH);min-height:0!important;
  margin-left:auto;margin-right:auto;flex:none;
  padding:calc(var(--soTete) + 3px) 5px 11px!important;gap:0!important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:calc(var(--soCH) * .085);overflow:hidden;color:#0B0E13;
  background:
    radial-gradient(130% 70% at 50% 110%,rgba(255,255,255,.7),transparent 62%),
    repeating-linear-gradient(0deg,rgba(11,14,19,.035) 0 1px,transparent 1px 7px),
    linear-gradient(180deg,#FFFBF0,#EFE2C4);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
:is(.so-partie,.so-fantome) .so-carte::before{display:none}
:is(.so-partie,.so-fantome) .so-carte .so-tete{position:absolute;left:0;right:0;top:0;z-index:1;
  height:var(--soTete);min-height:0;margin:0!important;padding:0 6px 0 4px;display:flex;align-items:center;gap:4px;
  background:var(--c);border-bottom:2px solid #0B0E13;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.12)}
:is(.so-partie,.so-fantome) .so-carte .so-past{width:calc(var(--soTete) - 7px);height:calc(var(--soTete) - 7px);
  flex:none;font-size:calc(var(--soTete) * .4);color:#0B0E13;background:#fff;box-shadow:0 0 0 1.6px #0B0E13}
:is(.so-partie,.so-fantome) .so-carte .so-num{display:flex!important;align-items:baseline;gap:1px;margin-left:auto;
  font-family:var(--display);font-weight:800;line-height:1;color:var(--i,#fff);letter-spacing:-.03em;
  text-shadow:0 1px 0 rgba(11,14,19,.25)}
:is(.so-partie,.so-fantome) .so-carte .so-num em{font-style:normal;font-size:calc(var(--soTete) * .36);opacity:.85}
:is(.so-partie,.so-fantome) .so-carte .so-num b{font-size:calc(var(--soTete) * .64)}
:is(.so-partie,.so-fantome) .so-carte .so-nom{position:relative;z-index:1;width:100%;text-align:center;
  font-size:clamp(.52rem,calc(var(--soCH) * .105),.9rem);font-weight:800;line-height:1.08;letter-spacing:-.01em;
  overflow-wrap:normal;word-break:normal;-webkit-hyphens:auto;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:is(.so-partie,.so-fantome) .so-carte .so-type{display:none}
.so-trajet{position:absolute;left:12%;right:12%;bottom:6px;height:4px;border-radius:3px;
  background:var(--c);box-shadow:0 0 0 1.4px #0B0E13}
.so-trajet i{position:absolute;left:var(--p);top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1.6px #0B0E13}
/* les badges passent au-dessus du petit tracé */
:is(.so-partie,.so-fantome) .so-carte.so-seule::after,:is(.so-partie,.so-fantome) .so-carte.so-verrou::after{bottom:13px;right:3px;top:auto}
:is(.so-partie,.so-fantome) .so-carte.so-verrou::before{bottom:13px;left:3px;top:auto}
:is(.so-partie,.so-fantome) .so-carte.majeure::after{bottom:13px;right:3px;top:auto}

/* — le dos : le bleu du métro, trois lignes et la pastille M — */
:is(.so-partie,.so-fantome) .so-carte.dos{padding:0!important;
  background:
    linear-gradient(35deg,transparent 46%,#FFCE00 46% 49%,transparent 49%),
    linear-gradient(-35deg,transparent 58%,#E3051C 58% 61%,transparent 61%),
    linear-gradient(90deg,transparent 30%,#3ED07A 30% 33%,transparent 33%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 5px,transparent 5px 10px),
    linear-gradient(165deg,#1C4FA5,#0E2B63);
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 3px #0E2B63,inset 0 0 0 4.5px rgba(255,255,255,.8),0 3px 0 2px #0B0E13}
:is(.so-partie,.so-fantome) .so-carte.dos .so-dos{width:calc(var(--soCH) * .32);height:calc(var(--soCH) * .32);
  font-size:calc(var(--soCH) * .17);box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}

/* — l'empilement, partout — */
.so-partie .so-col > .so-carte + .so-carte,
.so-fantome .so-carte + .so-carte{margin-top:calc(var(--soPas) - var(--soCH))!important}
.so-partie .so-col > .so-carte.dos + .so-carte{margin-top:calc(var(--soPasDos) - var(--soCH))!important}
.so-partie .so-col{min-height:var(--soCH);padding-bottom:10px;align-items:center}
.so-partie .so-vide{width:min(100%,var(--soCW,100%));height:var(--soCH);margin:0 auto}

/* — pioche, défausse, voies de garage : des cartes de la même taille — */
.so-partie .so-pioche{width:var(--soCW,56px);height:var(--soCH);border-radius:calc(var(--soCH) * .085);
  background:
    linear-gradient(35deg,transparent 46%,#FFCE00 46% 49%,transparent 49%),
    linear-gradient(-35deg,transparent 58%,#E3051C 58% 61%,transparent 61%),
    linear-gradient(165deg,#1C4FA5,#0E2B63);
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 3px #0E2B63,inset 0 0 0 4.5px rgba(255,255,255,.8),
    3px 3px 0 0 #E8DDC4,3px 3px 0 2px #0B0E13,6px 6px 0 0 #E8DDC4,6px 6px 0 2px #0B0E13}
.so-partie .so-pioche:active{transform:translateY(2px) scale(.97)}
.so-partie .so-pioche .so-dos{width:calc(var(--soCH) * .32);height:calc(var(--soCH) * .32);font-size:calc(var(--soCH) * .17)}
@media (min-width:761px){
  .so-partie .so-defausse{min-height:0}
  .so-partie .so-defausse .so-carte{width:var(--soCW)!important}
  .so-partie .so-defausse .so-carte + .so-carte{margin-left:calc(22px - var(--soCW))!important}
  .so-partie .so-defausse-vide{width:var(--soCW);height:var(--soCH)}
  .so-partie .so-garages{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:var(--soCW);gap:8px}
  .so-partie .so-garages .so-garage-vide{width:var(--soCW);height:var(--soCH)}
  .so-partie .so-garages .so-carte{width:var(--soCW);height:var(--soCH);padding-top:calc(var(--soTete) + 3px)!important}
  .so-partie .so-garages .so-carte .so-tete{padding:0 6px 0 4px}
  .so-partie .so-garages .so-carte .so-tete small{display:flex!important}
  .so-partie .so-garages .so-carte .so-past{width:calc(var(--soTete) - 7px);height:calc(var(--soTete) - 7px);font-size:calc(var(--soTete) * .4)}
  .so-partie .so-garages .so-carte .so-nom{font-size:clamp(.52rem,calc(var(--soCH) * .105),.9rem);-webkit-line-clamp:3}
  /* le rappel du réseau : les plaques du haut disent déjà « 3 / 13 » */
  .so-partie .so-reseau{display:none!important}
}
.so-partie .so-garages .so-carte{padding-top:calc(var(--soTete) + 3px)!important}

/* — le mouvement — */
.so-bouge{position:relative;z-index:30!important}
.so-partie .so-carte.sel{z-index:20}
.so-partie .so-carte:not(.dos):not([disabled]):hover{transform:translateY(-4px)}
.so-partie .so-carte.indice{animation:soIndice2 1s ease-in-out 3}
@keyframes soIndice2{50%{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #3ED07A,0 0 0 7px #0B0E13,0 0 26px 6px rgba(62,208,122,.7)}}
.so-partie .so-fond.so-vol{animation:soVol2 .5s var(--ease-back)}
@keyframes soVol2{35%{transform:scale(1.14) rotate(-2deg)}70%{transform:scale(.97)}}

/* — Abandonner — */
.so-abandon{color:#FF8A93!important}
.so-abandon.arme{color:#fff!important;background:#E3051C!important;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important;
  animation:soArme .5s ease-in-out infinite alternate}
@keyframes soArme{to{transform:scale(1.05)}}

@media (max-width:760px){
  :is(.so-partie,.so-fantome) .so-carte .so-num em{display:none}
  :is(.so-partie,.so-fantome) .so-carte .so-num b{font-size:14px}
  :is(.so-partie,.so-fantome) .so-carte .so-tete{padding:0 4px 0 3px;gap:2px}
  /* « seule », « quai » : une pastille, plus une étiquette qui couvre le nom */
  :is(.so-partie,.so-fantome) .so-carte.so-seule::after,:is(.so-partie,.so-fantome) .so-carte.so-verrou::after{
    content:"";width:9px;height:9px;padding:0;border-radius:50%;bottom:12px;right:3px}
  :is(.so-partie,.so-fantome) .so-carte.so-verrou::before{width:9px;height:9px;bottom:12px;left:3px}
  :is(.so-partie,.so-fantome) .so-carte.majeure::after{width:12px;height:12px;font-size:.4rem;bottom:12px}
}

/* ==========================================================================
   MÉTRO BELOTE — RETOUCHES : LE HAUT DÉGAGÉ, DES SIÈGES PLUS SOBRES,
   DES JETONS QUI NE DISENT QUE LEUR NOMBRE, PLUS DE ZOOM EN JEU
   ========================================================================== */
/* le décor remplit tout l'écran, bords compris */
.bt{background:
    radial-gradient(90% 60% at 50% 12%,rgba(62,143,212,.22),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px),
    linear-gradient(180deg,#1C2940 0%,#111A2A 45%,#080B12 100%)}

/* — le bandeau : deux coins — */
.bt-hud{left:0;right:0;top:0;height:0;display:block}
.bt-scores{position:absolute;left:8px;top:6px;width:252px;padding:5px 8px 6px;border-radius:14px;
  background:linear-gradient(180deg,#FBF6E9,#EDE3CB);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.bt-sc-t{display:block;margin:0 0 3px 2px;font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#6B5E48}
.bt-sc{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:6px;
  height:22px;padding:0 6px 3px 2px;margin-bottom:3px;border-radius:9px}
.bt-sc:last-child{margin-bottom:0}
.bt-sc--0{background:linear-gradient(90deg,rgba(62,208,122,.28),rgba(62,208,122,.06))}
.bt-sc--1{background:linear-gradient(90deg,rgba(255,107,107,.28),rgba(255,107,107,.06))}
.bt-sc-tetes{display:flex}
.bt-sc-tetes i{display:block;width:19px;height:21px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1.6px #0B0E13}
.bt-sc-tetes i + i{margin-left:-6px}
.bt-sc-tetes svg{display:block;width:100%;height:100%}
.bt-sc-nom{font-size:10.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-sc-don{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;padding:1px 5px;border-radius:7px;
  background:#fff;box-shadow:0 0 0 1.4px #0B0E13}
.bt-sc--0 .bt-sc-don{color:#0F7A3E}.bt-sc--1 .bt-sc-don{color:#C00018}
.bt-sc-tot{font-size:17px;font-weight:800;min-width:34px;text-align:right}
.bt-sc-j{position:absolute;left:30px;right:6px;bottom:1px;height:3px;border-radius:2px;background:rgba(11,14,19,.1);overflow:hidden}
.bt-sc-j u{display:block;height:100%;background:#3ED07A;transition:width .8s ease}
.bt-sc--1 .bt-sc-j u{background:#FF6B6B}
.bt-hud-d{position:absolute;right:8px;top:6px;display:flex;align-items:center;gap:6px}
.bt-at{height:36px;padding:0 9px 0 4px;gap:5px}
.bt-at i{width:27px;height:27px;font-size:13px}
.bt-at small{font-size:8px}
.bt-dots{height:36px;gap:3px;padding:0 7px}
.bt-dots i{width:8px;height:8px}
.bt-hud .blt-ico-b{width:36px;height:36px;padding:0;justify-content:center;border-radius:12px}
.bt-hud .blt-ico-b span{display:none}
.bt-hud .blt-ico-b svg{width:19px;height:19px}
.bt-aide-b.on{background:linear-gradient(180deg,#CFF1FA,#7FD4E8)!important}

/* — les sièges : plus petits, le partenaire tout en haut — */
.bt-siege{padding:6px 6px 5px;border-radius:15px;gap:0}
.bt-siege--1{left:14px;top:116px;width:112px}
.bt-siege--3{left:794px;top:116px;width:112px}
.bt-siege--2{left:350px;top:6px;width:220px;height:54px;padding:4px 10px 4px 6px;gap:8px}
.bt-av{width:40px;height:44px}
.bt-siege--2 .bt-av{width:38px;height:42px}
.bt-nom{font-size:12.5px}
.bt-role{font-size:7px}
.bt-fan{width:84px;height:28px;margin-top:2px}
.bt-siege--2 .bt-fan{width:84px;height:34px}
.bt-fan-c{left:calc(50% - 10px + (var(--k) - (var(--m) - 1) / 2) * 8px);width:20px;height:28px}
.bt-cpt{right:5px;top:5px;font-size:8px}
.bt-siege--2 .blt-jetons{left:0;top:calc(100% + 6px);width:220px;justify-content:flex-start}
.bt-siege--1 .blt-jetons,.bt-siege--3 .blt-jetons{top:calc(100% + 7px)}
.bt-pense{right:-12px;top:-12px;padding:5px 7px}
.bt-pense i{width:5px;height:5px}
.bt-plis{min-width:21px;height:21px;font-size:11px;left:-9px;top:-9px}

/* — les jetons : un rond cranté, le nombre au centre, rien d'autre — */
.bt-board .blt-j{width:34px;height:34px;transform:none!important;filter:drop-shadow(0 3px 0 #0B0E13)}
.bt-board .blt-j.neuf{animation:btJeton .45s var(--ease-back) backwards}
@keyframes btJeton{from{opacity:0;translate:0 -14px}}
.bt-board .blt-j-tranche{background:repeating-conic-gradient(var(--jc2,#B9B0A0) 0 15deg,#FFFFFF 15deg 22deg,var(--jc2,#B9B0A0) 22deg 30deg);
  box-shadow:0 0 0 2px #0B0E13}
.bt-board .blt-j-face{inset:5px!important;display:grid!important;place-items:center;
  background:radial-gradient(circle at 38% 30%,rgba(255,255,255,.85),transparent 58%),var(--jc1,#E8E1D2);
  box-shadow:0 0 0 1.8px #0B0E13,inset 0 0 0 2px rgba(255,255,255,.5)}
.bt-board .blt-j-face em{display:none!important}
.bt-board .blt-j-face b{display:block;margin:0;font-size:13px!important;line-height:1;text-align:center;letter-spacing:-.03em;
  transform:translateY(.5px)}
.bt-board .blt-j-face b.long{font-family:var(--display)!important;font-size:6.5px!important;letter-spacing:.02em}
.bt-board .blt-j--prend .blt-j-face{animation:none}

/* — plus de zoom pendant le jeu : les cartes glissent, elles ne gonflent pas — */
@keyframes btPose{
  0%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:.6}
  70%{transform:translate(0,-6px) rotate(var(--sr));opacity:1}
  100%{transform:rotate(var(--sr))}}
.bt-slot.bt-vient::after{display:none}
@keyframes btGagne{from{transform:rotate(var(--sr))}to{transform:rotate(0) translateY(-6px)}}
.bt-slot.bt-rassemble{transform:translate(var(--gx),var(--gy)) rotate(var(--gr))}
.bt-slot.bt-part{transform:translate(var(--tx),var(--ty)) rotate(var(--gr));opacity:0}
@keyframes btRecoit{40%{transform:translateY(-6px)}}
.bt-main .bt-c--ok:hover{transform:translateY(calc(var(--a) - 18px)) rotate(0deg)}
.bt-main .bt-c--ok:active{transform:translateY(calc(var(--a) - 8px)) rotate(0deg)}
@keyframes btVol{
  0%{transform:translate(0,0) rotate(var(--r0)) scale(1)}
  55%{transform:translate(calc(var(--dx) * .55),calc(var(--dy) * .55 - 38px)) rotate(calc(var(--r1) * .6)) scale(calc((1 + var(--s1)) / 2))}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r1)) scale(var(--s1))}}

/* — les panneaux d'aide, quand on les allume : plus discrets, dans les marges — */
.bt-plaque{top:128px;width:150px;min-height:0;max-height:210px;padding:7px 9px;opacity:.94}
.bt-plaque--pli{left:180px}
.bt-affiche{left:590px}
.bt-pl-aide{font-size:9px}
.bt-affiche-t{font-size:10.5px}
/* sans panneau, un message passe en bulle dans la marge droite, puis s'efface */
.bt-toast{left:588px;top:132px;width:156px;max-width:none;transform:translateY(-8px);text-align:left;font-size:11.5px;
  line-height:1.3;padding:7px 10px;border-radius:14px 14px 14px 4px}
.bt-toast.on{transform:none}
/* @@ debut retouches.css @@ */
/* ——————————————————————————————————————————————————————————————————————
   LA TIER LIST QUITTE LE ROSE
   Le magenta de la ligne 4 teintait tout l'atelier : titre, cases, boutons.
   Il cède la place à un bleu ardoise, et les cases deviennent d'un gris
   bleuté très clair : les pastilles des lignes, elles, gardent leurs
   vraies couleurs et ressortent mieux.
   —————————————————————————————————————————————————————————————————————— */
.ap--tier{--jeu:#5A7BA0;
  --cr-haut:#E6EBF0;--cr-bas:#CFD8E1;--cr-plat:#D9E0E7;--cr-blanc:#EEF1F4}
.ap--tier .btn:hover{background:#F6F8FA}
.ap--tier .tl-barre .lp-nom::placeholder{color:#6B7784}
.ap--tier .tl-sauv-c small{color:#4F5B68}
.cr-carte--tier{--cc:#5A7BA0}

/* ==========================================================================
   LE PROFIL — LE PASSE DU VOYAGEUR
   ========================================================================== */
.pf-haut{margin-bottom:var(--sp-4);align-items:center}
.pf-haut .spacer{flex:1}
.pf-hall{display:inline-flex;align-items:center;gap:8px}
.pf-hall svg{display:block;width:22px;height:22px}

/* — le haut : le passe à gauche, le niveau à droite — */
.pf-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;align-items:stretch}

/* le passe : une carte de transport, crème, bordée de noir */
.pf-passe{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  padding:0 22px 18px;border-radius:24px;color:#0B0E13;
  background:linear-gradient(160deg,#FBF6E9,#E9E0CB);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;
  transform:rotate(-1.2deg);transition:transform .35s var(--ease-back);
  animation:pfArrive .6s var(--ease-back) both}
.pf-passe:hover{transform:rotate(0) translateY(-3px)}
.pf-passe::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%);
  transform:translateX(-120%);animation:pfReflet 1.4s .5s var(--ease-std) both}
@keyframes pfArrive{from{opacity:0;transform:translateY(18px) rotate(-5deg)}}
@keyframes pfReflet{to{transform:translateX(120%)}}
.pf-passe-bande{height:12px;margin:0 -22px;border-bottom:3px solid #0B0E13;
  background:linear-gradient(90deg,#FFCD00 0 12.5%,#0064B0 0 25%,#9F9825 0 37.5%,#5A7BA0 0 50%,
    #F28E42 0 62.5%,#77C695 0 75%,#E3051C 0 87.5%,#6E1E78 0)}
.pf-passe-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pf-passe-sur{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6B6456}
.pf-puce{line-height:0}
.pf-puce svg{display:block;width:44px;height:34px}
.pf-passe-corps{display:flex;align-items:center;gap:18px}
.pf-photo{flex:none;display:grid;place-items:center;width:96px;height:112px;border-radius:16px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.22) 0 8px,transparent 8px 16px),var(--c);
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.pf-photo b{font-family:var(--display);font-weight:800;font-size:3.2rem;line-height:1;color:#0B0E13;
  text-shadow:0 3px 0 rgba(255,255,255,.5)}
.pf-passe-id{min-width:0;display:flex;flex-direction:column;gap:5px}
.pf-pseudo{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.02;
  overflow-wrap:anywhere}
.pf-titre{align-self:flex-start;padding:.3em .8em;border-radius:999px;font-size:.8rem;font-weight:800;color:#fff;
  background:#0B0E13}
.pf-passe-id small{font-size:.78rem;color:#6B6456}
.pf-passe-pied{margin-top:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:12px;border-top:2px dashed rgba(11,14,19,.25)}
.pf-num{font-family:var(--mono);font-size:.9rem;font-weight:700;letter-spacing:.14em;color:#3A352C;
  font-variant-numeric:tabular-nums}
.pf-niv{padding:.35em .85em;border-radius:10px;font-family:var(--display);font-weight:800;font-size:.9rem;
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13}
.pf-passe-pied .btn{font-weight:800;color:#0B0E13;background:transparent;box-shadow:0 0 0 2.5px #0B0E13}
.pf-passe-pied .btn:hover{background:rgba(11,14,19,.08)}
.pf-passe-pied .btn--solid{color:#fff;background:#0B0E13}
.pf-passe-pied .btn--solid:hover{background:#26303D}
.pf-passe-pied .btn--magnet::after{display:none}

/* le niveau : l'anneau, la barre, puis la ligne des titres */
.pf-niveau{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:20px 22px 18px;border-radius:24px;
  color:#fff;background:radial-gradient(80% 120% at 0% 0%,rgba(255,206,0,.18),transparent 60%),
    linear-gradient(165deg,#1E2A3B,#121925 75%);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;animation:pfArrive .6s .1s var(--ease-back) both}
.pf-niveau-l{display:flex;align-items:center;gap:20px}
.pf-anneau{position:relative;flex:none;width:128px;height:128px}
.pf-anneau svg{display:block;width:100%;height:100%}
.pf-anneau-v{transition:stroke-dashoffset 1.3s var(--ease-out-expo)}
.pf-anneau-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pf-anneau-t small{font-family:var(--mono);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#B9C4D0}
.pf-anneau-t b{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:#FFCE00;
  font-variant-numeric:tabular-nums}
.pf-niveau-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.pf-sur{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#FFCE00}
.pf-niveau-txt>b{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1.1}
.pf-niveau-txt small{font-size:.8rem;color:#B9C4D0;font-variant-numeric:tabular-nums}
.pf-niveau-txt .pf-prochain{color:#E6EBF0;font-weight:700}

.pf-ligne{padding:4px 6px 0}
.pf-ligne-rail{position:relative;height:74px;margin:0 38px}
.pf-ligne-rail::before,.pf-ligne-fait{content:"";position:absolute;left:0;top:13px;height:8px;border-radius:999px}
.pf-ligne-rail::before{right:0;background:#2E3A4B;box-shadow:0 0 0 2px #0B0E13}
.pf-ligne-fait{display:block;width:0;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13;
  animation:pfTrace 1.2s .3s var(--ease-out-expo) forwards}
@keyframes pfTrace{to{width:var(--p)}}
.pf-st{position:absolute;top:0;left:var(--x);width:0;display:flex;flex-direction:column;align-items:center}
.pf-st-pt{display:block;flex:none;width:22px;height:22px;margin-top:6px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px #0B0E13}
.pf-st--avenir .pf-st-pt{background:#5B6776}
.pf-st--ici .pf-st-pt{width:30px;height:30px;margin-top:2px;background:#FFCE00;
  box-shadow:0 0 0 3.5px #0B0E13,0 0 0 8px rgba(255,206,0,.28);animation:pfPouls 1.8s ease-in-out infinite}
@keyframes pfPouls{50%{box-shadow:0 0 0 3.5px #0B0E13,0 0 0 13px rgba(255,206,0,0)}}
.pf-st-nom{width:76px;margin-top:8px;font-size:.66rem;font-weight:700;line-height:1.2;text-align:center;
  color:#8D98A6;text-wrap:balance}
.pf-st--passe .pf-st-nom{color:#C9D1DA}
.pf-st--ici .pf-st-nom{margin-top:4px;color:#FFCE00;font-weight:800}

/* — les chiffres — */
.pf-chiffres{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:22px}
.pf-ch{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 10px 12px;border:0;
  border-radius:18px;font:inherit;text-align:center;color:#0B0E13;background:#F5F0E4;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:skEntre .45s var(--ease-back) backwards}
.pf-ch:nth-child(2){animation-delay:.05s}.pf-ch:nth-child(3){animation-delay:.1s}
.pf-ch:nth-child(4){animation-delay:.15s}.pf-ch:nth-child(5){animation-delay:.2s}
.pf-ch-ico{line-height:0}
.pf-ch-ico svg{display:block;width:30px;height:30px}
.pf-ch b{font-family:var(--display);font-weight:800;font-size:1.45rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pf-ch-val{display:flex;align-items:baseline;gap:5px}
.pf-ch-sur{font-style:normal;font-size:.74rem;font-weight:700;color:#6B6456}
.pf-ch-lab{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#6B6456}
.pf-ch small{font-size:.66rem;font-weight:700;color:#0064B0}
.pf-ch--go{cursor:pointer;background:linear-gradient(180deg,#FFF3C4,#FFE08A);
  transition:transform .18s var(--ease-back),box-shadow .18s var(--ease-std)}
.pf-ch--go:hover{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.pf-ch--go:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13}

/* — les titres de bloc — */
.pf-bloc{margin-top:34px}
.pf-bloc--petit{margin-top:26px}
.pf-compte{padding:.35em .85em;border-radius:999px;font-size:.76rem;font-weight:800;color:#DDE3E9;background:#222B38;
  box-shadow:0 0 0 2px #0B0E13}

/* — les fiches de record — */
.pf-fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.pf-fiche{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 16px 14px;border:0;
  border-radius:20px;overflow:hidden;font:inherit;text-align:left;color:#0B0E13;cursor:pointer;
  background:linear-gradient(180deg,#FBF6E9,#ECE3CF);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transition:transform .2s var(--ease-back),box-shadow .2s var(--ease-std);
  animation:skEntre .45s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*40ms)}
.pf-fiche:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 0 0 2.5px #0B0E13,0 9px 0 2.5px #0B0E13}
.pf-fiche-tete{align-self:stretch;display:flex;align-items:flex-start;height:56px;margin:0 -16px;padding:9px 14px;
  border-bottom:2.5px solid #0B0E13;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 9px,transparent 9px 18px),var(--c)}
.pf-fiche-tete small{padding:.25em .65em;border-radius:999px;font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:#0B0E13;background:rgba(255,255,255,.85);box-shadow:0 0 0 1.5px #0B0E13}
.pf-fiche-em{position:absolute;right:14px;top:18px;display:grid;place-items:center;width:66px;height:66px;
  border-radius:50%;background:#FBF6E9;box-shadow:0 0 0 2.5px #0B0E13;line-height:0;
  transition:transform .3s var(--ease-back)}
.pf-fiche:hover .pf-fiche-em{transform:rotate(-8deg) scale(1.06)}
.pf-fiche-em svg{display:block;width:56px;height:56px}
.pf-fiche-t{max-width:calc(100% - 64px);min-height:2.3em;margin-top:10px;font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15}
.pf-fiche-rec{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.pf-fiche-rec b{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.pf-fiche-rec small{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#6B6456}
.pf-fiche-pied{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;
  font-size:.74rem;font-weight:700;color:#6B6456}
.pf-fiche-go{padding:.3em .8em;border-radius:999px;font-weight:800;color:var(--k);background:var(--c);
  box-shadow:0 0 0 2px #0B0E13}

/* — le palmarès vide — */
.pf-vide{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:20px;color:#fff;
  background:linear-gradient(165deg,#1E2A3B,#121925 75%);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.pf-vide-ico{flex:none;line-height:0;filter:grayscale(.2)}
.pf-vide b{font-family:var(--display);font-weight:800;font-size:1.1rem}
.pf-vide p{max-width:60ch;margin:4px 0 0;font-size:.88rem;line-height:1.45;color:#B9C4D0}

/* — les jeux à découvrir — */
.pf-decs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pf-dec{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 7px;border:0;border-radius:16px;font:inherit;
  text-align:left;color:#E4E9EE;background:#171F2B;cursor:pointer;
  box-shadow:0 0 0 2px #0B0E13,inset 4px 0 0 var(--c),0 3px 0 2px #0B0E13;
  transition:transform .15s var(--ease-back),background .15s var(--ease-std);
  animation:skEntre .35s var(--ease-back) backwards;animation-delay:calc(var(--i,0)*25ms)}
.pf-dec:hover{transform:translateY(-2px);background:#1F2937}
.pf-dec-em{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#F5F0E4;
  box-shadow:0 0 0 2px #0B0E13;line-height:0}
.pf-dec-em svg{display:block;width:34px;height:34px}
.pf-dec-t{min-width:0;display:flex;flex-direction:column;gap:1px}
.pf-dec-t b{font-size:.82rem;font-weight:800;line-height:1.15}
.pf-dec-t small{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:#8D98A6}

.pf-badges{margin-bottom:var(--sp-6)}

@media (max-width:900px){
  .pf-hero{grid-template-columns:1fr}
  .pf-chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .pf-hall span{display:none}
  .pf-passe{padding:0 16px 16px}
  .pf-passe-bande{margin:0 -16px}
  .pf-photo{width:78px;height:92px}
  .pf-photo b{font-size:2.6rem}
  .pf-niveau{padding:18px 16px 16px}
  .pf-niveau-l{gap:14px}
  .pf-anneau{width:104px;height:104px}
  .pf-anneau-t b{font-size:2.1rem}
  .pf-ligne-rail{height:38px;margin:0 16px}
  .pf-st-nom{display:none}
  .pf-chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-chiffres .pf-ch--go{grid-column:1/-1}
  .pf-fiches{grid-template-columns:1fr}
  .pf-fiche-t{min-height:0}
  .pf-decs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pf-passe,.pf-niveau,.pf-ch,.pf-fiche,.pf-dec{animation:none}
  .pf-passe::after{display:none}
  .pf-ligne-fait{animation:none;width:var(--p)}
  .pf-st--ici .pf-st-pt{animation:none}
}

/* @@ fin retouches.css @@ */
/* @@ debut metrocity_anims.css @@ */
/* ==========================================================================
   METRO CITY — CASINO, PINCE, TABAC ET ANIMATIONS DU RÉSEAU
   ========================================================================== */
.cz-cv{position:fixed;inset:0;width:100vw;height:100vh;z-index:9998;pointer-events:none}
.cz-vole{position:fixed;z-index:9999;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,#FFF6C8,#FFCE00 55%,#C99400);box-shadow:0 0 0 2px #0B0E13;
  animation:czVole 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes czVole{0%{transform:translate(0,0) scale(.6)}35%{transform:translate(calc(var(--dx)*.25),calc(var(--dy)*.25 - 60px)) scale(1.2)}
  100%{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:.2}}
.cz-pulse{animation:czPulse .6s var(--ease-back)}
@keyframes czPulse{40%{transform:scale(1.35);color:#1F9E55}}
.cz-rayons{position:absolute!important;left:50%;top:50%;z-index:-1;width:160%;aspect-ratio:1;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(var(--c) 0 10deg,transparent 10deg 24deg);
  -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);
  animation:czRayons 2.6s linear forwards}
@keyframes czRayons{0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(-50%,-50%) rotate(120deg) scale(1.1);opacity:0}}

.vl-pousse2-scene>.cz-rayons{z-index:2}
/* — le bandit — */
.cz-bandit,.cz-bj,.cz-roue,.cz-ticket{isolation:isolate}
.cz-bandit{overflow:visible}
.cz-bandit.roule .vl-bulbe{animation-duration:.3s}
.cz-bandit.fete .vl-bulbe{animation-duration:.18s}
.cz-bandit.fete{animation:czFete .5s steps(2,end) 4}
.cz-bandit.jackpot{animation:czJackpot .35s steps(2,end) 10;box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 6px #FFF6C8,inset 0 0 0 8px #0B0E13,0 7px 0 3px #0B0E13,0 0 60px #FFCE00}
@keyframes czFete{50%{filter:brightness(1.18) saturate(1.2)}}
@keyframes czJackpot{50%{filter:brightness(1.4) hue-rotate(-12deg)}}
.cz-rou-reflet{position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 22%,transparent 78%,rgba(0,0,0,.35)),linear-gradient(100deg,transparent 20%,rgba(255,255,255,.35) 32%,transparent 40%)}
.vl-rou{position:relative}
.vl-rou.tourne .vl-sym svg{filter:blur(2.2px) brightness(1.05)}
.vl-rou.suspense{box-shadow:inset 0 0 0 2px #0B0E13,0 0 0 4px #FFCE00,0 0 22px #FFCE00;animation:czSuspense .22s steps(2,end) infinite}
@keyframes czSuspense{50%{box-shadow:inset 0 0 0 2px #0B0E13,0 0 0 4px #FF4B3E,0 0 30px #FF4B3E}}
.vl-rou.cz-stop{animation:czStop .42s var(--ease-back)}
@keyframes czStop{30%{transform:translateY(5px)}60%{transform:translateY(-2px)}}
.cz-secoue{animation:czSecoue .26s linear}
@keyframes czSecoue{25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}
.vl-sym.cz-gagne svg{animation:czSaut .5s var(--ease-back) 4;filter:drop-shadow(0 0 8px #FFCE00)}
@keyframes czSaut{40%{transform:translateY(-10px) scale(1.18) rotate(-6deg)}}
.cz-bandit.fete .vl-ligne-gain{animation:czLigne .25s steps(2,end) 8;opacity:1;height:6px;margin-top:-3px}
@keyframes czLigne{50%{background:#FFCE00;box-shadow:0 0 14px #FFCE00}}
.vl-bareme-l.on{margin:0 -8px;padding:3px 8px;border-radius:10px;background:#FFE58A;animation:czFete .4s steps(2,end) 5}
.vl-bandit-fen.cz-rate{animation:czRate .5s ease-out}
@keyframes czRate{30%{filter:grayscale(.8) brightness(.8)}}
.cz-bac{position:relative;overflow:visible}
.cz-boule{transform-box:fill-box;transform-origin:center}
.vl-levier.tire .cz-boule{animation:czBoule .7s var(--ease-back)}
@keyframes czBoule{35%{transform:scale(1.25,.8)}}

/* — le blackjack — */
.cz-bj{position:relative;padding-top:10px}
.cz-sabot{position:absolute;right:4px;top:0;width:86px;z-index:2;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.cz-sabot svg{display:block;width:100%;height:auto}
.cz-banque{position:absolute;left:8px;top:6px;width:44px;height:70px}
.cz-banque .cz-jeton{position:absolute;left:0;bottom:calc(var(--i)*5px)}
.cz-carte{animation:czDonne .48s cubic-bezier(.2,.8,.25,1.05) both!important;animation-delay:0s!important}
@keyframes czDonne{from{transform:translate(var(--dx,160px),var(--dy,-120px)) rotate(-40deg) scale(.55);opacity:.4}to{transform:none;opacity:1}}
.cz-carte.cz-souleve{transform:translateY(-16px) scale(1.06);transition:transform .25s var(--ease-back);z-index:3}
.cz-carte.cz-travers{rotate:90deg;margin-left:6px;margin-right:18px}
.vl-bj-tot.cz-pop{animation:czPop .4s var(--ease-back)}
@keyframes czPop{40%{transform:scale(1.5)}}
.vl-bj-main.cz-saute{animation:czSaute .6s ease-out}
@keyframes czSaute{15%,45%{transform:translateX(-6px)}30%,60%{transform:translateX(6px)}20%{filter:drop-shadow(0 0 12px #E3051C)}}
.cz-cercle{position:relative;display:grid;place-items:center;width:110px;height:84px;border-radius:50%;
  border:3px dashed rgba(255,229,138,.7);box-shadow:inset 0 0 18px rgba(0,0,0,.25)}
.cz-cercle>small{position:absolute;top:-10px;padding:.1em .6em;border-radius:999px;font-weight:800;font-size:.7rem;color:#0B0E13;background:#FFE58A;box-shadow:0 0 0 2px #0B0E13}
.cz-pile{position:relative;width:40px;height:58px}
.cz-pile--banque{position:absolute;left:calc(50% + 14px);top:14px}
.cz-jeton{position:absolute;left:0;bottom:calc(var(--i)*5px);width:40px;height:40px;line-height:0;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.cz-jeton svg{width:100%;height:100%}
.cz-pile.cz-pose .cz-jeton{animation:czJeton .45s var(--ease-back) both;animation-delay:calc(var(--i)*45ms)}
@keyframes czJeton{from{transform:translateY(-70px) rotate(-30deg);opacity:0}}
.cz-pile.cz-part{animation:czPart .8s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes czPart{to{transform:translateY(140px) scale(.5);opacity:0}}
.cz-pile.cz-rentre{animation:czRentre .8s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes czRentre{to{transform:translate(-120px,-200px) scale(.5);opacity:0}}
.cz-bj.cz-gagne{box-shadow:inset 0 0 60px rgba(255,214,90,.35);border-radius:18px}
.cz-bj.cz-perd .vl-bj-main:last-of-type{filter:saturate(.6)}
.cz-rame{position:absolute;left:0;top:44%;z-index:4;width:220px;pointer-events:none;animation:czRame 2.4s linear forwards}
.cz-rame svg{display:block;width:100%;height:auto}
@keyframes czRame{from{transform:translateX(-240px)}to{transform:translateX(calc(100vw))}}

/* — la roulette — */
.cz-roue .vl-roue-svg{max-width:420px}
.cz-roue svg.tourne .cz-lampe{animation:czLampe .5s steps(2,end) infinite;animation-delay:calc(var(--i)*-.04s)}
@keyframes czLampe{50%{fill:#FF4B3E}}
.cz-roue.gagne .cz-lampe{animation:czLampe .2s steps(2,end) 12}
.cz-halo{animation:czHalo .6s ease-in-out infinite alternate}
@keyframes czHalo{to{stroke:#FFCE00;stroke-width:9}}
.cz-bille{filter:drop-shadow(0 2px 1px rgba(0,0,0,.5))}
.cz-roue.perd .vl-roue-svg{animation:czRate .5s ease-out}

/* — le pousse-tickets — */
.vl-pousse2-scene.cz-bac-gagne{animation:czBac .7s ease-out}
@keyframes czBac{30%{filter:brightness(1.25) drop-shadow(0 0 18px #FFCE00)}}

/* — la Pince du métro — */
.pl-machine{position:relative;display:flex;flex-direction:column;gap:10px}
.pl-scene{position:relative;overflow:hidden;border-radius:22px}
.pl-cv{display:block;width:100%;touch-action:none;outline:none}
.pl-cv:focus-visible{box-shadow:0 0 0 3px #FFCE00}
.pl-ctrl{display:grid;grid-template-columns:64px 1fr 64px;gap:10px}
.pl-fleche,.pl-bouton{border:0;border-radius:18px;cursor:pointer;font-family:var(--display);font-weight:900;color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .1s}
.pl-fleche{display:grid;place-items:center;min-height:58px;background:linear-gradient(180deg,#FFF6C8,#FFCE00)}
.pl-fleche svg{width:26px;height:26px}
.pl-fleche.on,.pl-fleche:active{transform:translateY(4px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.pl-bouton{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;color:#fff;
  background:radial-gradient(circle at 40% 30%,#FF7A8A,#E3051C 60%,#A5142A)}
.pl-bouton b{font-size:1.15rem;letter-spacing:.06em}
.pl-bouton small{font-size:.66rem;font-weight:700;opacity:.85}
.pl-bouton:active{transform:translateY(4px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.pl-machine.joue .pl-bouton{animation:czFete .6s steps(2,end) infinite}
.pl-bar-n{display:flex;align-items:center;gap:8px;min-width:0}
.pl-bar-n>span{display:flex;flex-direction:column;line-height:1.15}
.pl-bar-n small{align-self:flex-start;margin-top:2px;padding:0 .5em;border-radius:999px;font-size:.62rem;font-weight:800;background:var(--c);box-shadow:0 0 0 1.5px #0B0E13}
.pl-mini{flex:none;width:52px;height:40px}
.pl-note{margin:8px 0 0;font-size:.78rem;font-weight:700;color:#5A5F68;line-height:1.35}
.pl-carte{position:absolute;left:50%;top:44%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:2px;width:min(240px,70%);
  padding:12px 12px 14px;border-radius:20px;text-align:center;color:#0B0E13;background:radial-gradient(circle at 50% 30%,#fff,var(--c));
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 0 60px var(--c);transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0;
  transition:transform .55s var(--ease-back),opacity .3s}
.pl-carte.on{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}
.pl-carte.sort{transform:translate(-50%,-160%) scale(.6);opacity:0}
.pl-carte canvas{width:170px;height:auto}
.pl-carte small{padding:.1em .7em;border-radius:999px;font-weight:900;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.pl-carte b{font-family:var(--display);font-weight:900;font-size:1.25rem}
.pl-carte span{font-family:var(--display);font-weight:900;font-size:1.4rem;color:#0E6B3E}

/* — la salle — */
.cz-projo{transform-box:view-box}
.cz-projo--g{transform-origin:40px 0;animation:czProjo 6s ease-in-out infinite alternate}
.cz-projo--d{transform-origin:660px 0;animation:czProjo 6s ease-in-out infinite alternate-reverse}
@keyframes czProjo{from{transform:rotate(-14deg)}to{transform:rotate(22deg)}}
.cz-lustre{transform-box:view-box;transform-origin:350px 0;animation:czLustre 5s ease-in-out infinite}
@keyframes czLustre{50%{transform:rotate(2.5deg)}}
.cz-ecran{animation:czEcran 1.8s steps(3,end) infinite;animation-delay:calc(var(--i)*-.45s)}
@keyframes czEcran{0%{fill:#fff}33%{fill:#FFE58A}66%{fill:#8CFFB4}}
.cz-client{animation:czClient 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
@keyframes czClient{50%{translate:0 -3px}}
.cz-paillette{transform-box:fill-box;transform-origin:center;animation:czPaillette 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s);opacity:0}
@keyframes czPaillette{0%,70%,100%{opacity:0;scale:.3}82%{opacity:1;scale:1.2}}
.cz-jeux{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cz-jeux .vl-jeu-b{position:relative;animation:czJeuIn .45s var(--ease-back) backwards;animation-delay:calc(var(--i)*60ms)}
@keyframes czJeuIn{from{transform:translateY(14px) scale(.94);opacity:0}}
.cz-jeu-ico{line-height:0}
.cz-jeu-ico svg{display:block;width:36px;height:36px;transition:transform .3s var(--ease-back)}
.vl-jeu-b:hover .cz-jeu-ico svg{transform:rotate(-10deg) scale(1.15)}
.cz-nouveau::after{content:"NOUVEAU";position:absolute;right:10px;top:10px;padding:.15em .55em;border-radius:999px;font-family:var(--display);
  font-weight:900;font-size:.6rem;letter-spacing:.08em;color:#0B0E13;background:#8CFFB4;box-shadow:0 0 0 2px #0B0E13;animation:czFete .9s steps(2,end) infinite}
.cz-table{animation:czTable .4s var(--ease-back)}
@keyframes czTable{from{transform:translateY(10px);opacity:.3}}

/* — le tabac — */
.cz-grat{cursor:none}
.cz-piece{position:absolute;left:0;top:0;z-index:4;width:34px;height:34px;pointer-events:none;opacity:0;transition:opacity .15s;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.35))}
.cz-piece svg{width:100%;height:100%}
.cz-piece.on{opacity:1}
.cz-piece.appui svg{transform:scale(.9) rotate(12deg)}
.cz-copeau{position:absolute;z-index:5;pointer-events:none;border-radius:1px;background:linear-gradient(135deg,#F1F4F8,#9EA7B3);box-shadow:0 0 0 .8px rgba(11,14,19,.35)}
.cz-ticket{overflow:visible}
/* la perforation : une rangée de trous le long des deux bords */
.cz-perfo{position:absolute;left:14px;right:14px;height:10px;pointer-events:none;
  background:radial-gradient(circle 4px at 7px 5px,#16463F 92%,transparent) 0 0/14px 10px repeat-x}
.cz-perfo--h{top:-5px}.cz-perfo--b{bottom:-5px}
.cz-bande{position:absolute;left:5px;top:8px;bottom:8px;width:7px;border-radius:4px;pointer-events:none;opacity:.6;
  background:linear-gradient(180deg,#FF7AC8,#7AC8FF,#8CFFB4,#FFE58A,#FF7AC8);background-size:100% 300%;animation:czHolo 4s linear infinite}
@keyframes czHolo{to{background-position:0 300%}}
.cz-code{display:inline-block;width:92px;height:22px;margin-right:auto}
.cz-code svg{display:block;width:100%;height:100%}
.vl-ticket-pied{align-items:center}
.cz-fente{position:relative;width:min(560px,104%);height:18px;margin-bottom:-20px;z-index:3;border-radius:10px;background:#0B0E13;
  box-shadow:0 0 0 3px #3A4250,0 6px 0 3px #0B0E13}
.cz-fente i{position:absolute;left:8%;right:8%;top:6px;height:5px;border-radius:3px;background:#1E2A3A;box-shadow:inset 0 2px 3px #000}
.cz-fente.sort{animation:czFente .5s ease-in forwards}
@keyframes czFente{to{transform:translateY(-14px);opacity:0}}
.cz-ticket.cz-imprime{animation:czImprime 1.4s cubic-bezier(.3,.7,.3,1) both!important}
@keyframes czImprime{0%{clip-path:inset(0 0 100% 0);transform:translateY(-40%)}70%{clip-path:inset(0 0 0 0);transform:translateY(0)}
  80%{transform:translateY(-6px) rotate(-1deg)}100%{clip-path:inset(0 0 0 0);transform:none}}
.cz-tampon{position:absolute;left:50%;top:48%;z-index:6;padding:.15em .6em;border:5px solid #E3051C;border-radius:14px;pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,6vw,2.6rem);letter-spacing:.04em;color:#E3051C;background:rgba(255,253,246,.8);
  animation:czTampon .55s cubic-bezier(.3,1.4,.4,1) both;mix-blend-mode:multiply}
@keyframes czTampon{from{transform:translate(-50%,-50%) scale(3) rotate(-30deg);opacity:0}to{transform:translate(-50%,-50%) scale(1) rotate(-14deg);opacity:1}}
.cz-ticket.cz-gagnant{box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 0 40px rgba(255,206,0,.8)}
.cz-ticket.cz-gagnant .vl-tc.gag{animation:czGag .5s var(--ease-back) 6}
@keyframes czGag{40%{transform:scale(1.12) rotate(-3deg);filter:brightness(1.3)}}
.cz-ticket.cz-perdant{filter:saturate(.8)}
.vl-vt-art{overflow:hidden}
.vl-vt-art::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
.vl-vt:hover .vl-vt-art::after{animation:czReflet .8s ease-out}
@keyframes czReflet{to{left:130%}}

/* — Metro City : gains, onglets, chantiers, compteur — */
.cz-gain{animation:czGain 1.3s cubic-bezier(.2,.8,.2,1) forwards!important;text-shadow:0 2px 0 #0B0E13,0 0 12px rgba(255,206,0,.6)}
@keyframes czGain{0%{transform:translate(-50%,0) scale(.4);opacity:0}20%{transform:translate(calc(-50% + var(--dx)*.3),-30px) scale(1.35);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),-90px) scale(1);opacity:0}}
.cz-etin{position:absolute;z-index:40;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;background:var(--c,#FFCE00);
  box-shadow:0 0 6px var(--c,#FFCE00);animation:czEtin .7s ease-out forwards}
@keyframes czEtin{to{transform:rotate(var(--a)) translateX(46px) scale(.2);opacity:0}}
.cz-etin--fixe{position:fixed;z-index:9001;width:8px;height:8px;margin:-4px 0 0 -4px}
.cz-anneau{position:fixed;z-index:9000;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;pointer-events:none;
  border:4px solid var(--c,#FFCE00);box-shadow:0 0 14px var(--c,#FFCE00),inset 0 0 10px var(--c,#FFCE00);animation:czAnneau .75s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes czAnneau{0%{transform:scale(.2);opacity:1}100%{transform:scale(7);opacity:0;border-width:1px}}
.cz-monte{position:fixed;z-index:9001;width:30px;height:34px;margin:-17px 0 0 -15px;pointer-events:none;background:#FFCE00;
  clip-path:polygon(50% 0,100% 50%,70% 50%,70% 100%,30% 100%,30% 50%,0 50%);filter:drop-shadow(0 0 6px rgba(255,206,0,.8));
  animation:czMonte 1.05s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes czMonte{0%{transform:translateY(10px) scale(.3);opacity:0}25%{transform:translateY(-12px) scale(1.15);opacity:1}100%{transform:translateY(-70px) scale(.8);opacity:0}}
.mc-pane.cz-entre>*{animation:czEntre .5s var(--ease-back) backwards;animation-delay:calc(var(--n,0)*55ms)}
@keyframes czEntre{from{transform:translateY(18px) scale(.985);opacity:0}}
.cz-poussiere{position:fixed;z-index:9000;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,#F3E9D6,#C9B99A);box-shadow:0 0 0 1.5px rgba(11,14,19,.35);animation:czPoussiere 1s ease-out forwards}
@keyframes czPoussiere{0%{transform:translate(0,0) scale(.2);opacity:.9}100%{transform:translate(var(--dx),-26px) scale(calc(var(--s)*1.6));opacity:0}}
.cz-etoile{position:fixed;z-index:9001;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;background:#FFCE00;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:czEtoile 1s ease-out both}
@keyframes czEtoile{0%{transform:rotate(var(--a)) translateX(0) scale(.2);opacity:0}30%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) rotate(180deg) scale(1);opacity:0}}
.cz-plus{position:fixed;z-index:9000;pointer-events:none;font-family:var(--display);font-weight:900;font-size:1rem;color:#FFCE00;
  -webkit-text-stroke:1.2px #0B0E13;paint-order:stroke fill;text-shadow:0 2px 0 #0B0E13;animation:czPlus 1.2s ease-out forwards}
@keyframes czPlus{0%{transform:translateY(0) scale(.5);opacity:0}25%{transform:translateY(-14px) scale(1.2);opacity:1}100%{transform:translateY(-44px);opacity:0}}
.mc-chip.bump{animation:czPulse .6s var(--ease-back)}

/* sur téléphone, une colonne qui ne dépasse jamais la table */
.cz-table .vl-bandit-duo>*{min-width:0}
@media (max-width:820px){ .cz-table .vl-bandit-duo{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .cz-sabot{width:64px}
  .cz-banque{display:none}
  .pl-ctrl{grid-template-columns:58px 1fr 58px}
}
@media (prefers-reduced-motion:reduce){
  .cz-projo--g,.cz-projo--d,.cz-lustre,.cz-ecran,.cz-client,.cz-paillette,.cz-nouveau::after,.cz-bande,.pl-machine.joue .pl-bouton,
  .cz-jeux .vl-jeu-b,.cz-table,.mc-pane.cz-entre>*,.cz-bandit.fete,.cz-bandit.jackpot,.vl-rou.suspense,.cz-halo,.cz-roue svg.tourne .cz-lampe{animation:none}
  .cz-paillette{opacity:.6}
}

/* @@ fin metrocity_anims.css @@ */
/* @@ debut metroking.css @@ */
/* ==========================================================================
   MÉTRO KING — LES CARTES
   --------------------------------------------------------------------------
   Toutes les mesures intérieures sont en cqw : la carte est un conteneur,
   son dessin suit sa largeur, de la vignette du carnet à la carte zoomée.
   ========================================================================== */
.mk-c{--cw:100px;position:relative;display:block;flex:none;width:var(--cw);aspect-ratio:100/144;
  padding:0;margin:0;border:0;background:none;font:inherit;color:#0B0E13;text-align:left;
  border-radius:calc(var(--cw)*.085);container-type:inline-size;cursor:default;
  -webkit-tap-highlight-color:transparent;transform-style:preserve-3d;
  transition:transform .22s var(--ease-back),filter .2s ease,opacity .2s ease}
.mk-c-in{position:absolute;inset:0;display:block;overflow:hidden;border-radius:8.5cqw;
  box-shadow:0 0 0 2px #0B0E13,0 1.6cqw 0 2px #0B0E13,0 5cqw 9cqw rgba(0,0,0,.42)}
.mk-c-in > *{position:absolute}
.mk-c svg{display:block;width:100%;height:100%}

/* — la pastille de ligne, partout la même — */
.mk-pas{display:inline-grid;place-items:center;flex:none;width:1.55em;height:1.55em;border-radius:50%;
  font-style:normal;font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.04em;
  background:var(--c);color:var(--i);box-shadow:0 0 0 .12em #0B0E13}

/* ============================ STATION ==================================== */
.mk-c--num .mk-c-in{background:#FBF6E9;
  box-shadow:inset 0 0 0 2.6cqw var(--c),inset 0 0 0 3.8cqw #FBF6E9,
    0 0 0 2px #0B0E13,0 1.6cqw 0 2px #0B0E13,0 5cqw 9cqw rgba(0,0,0,.42);
  transition:box-shadow .5s ease}
.mk-c-bande{left:0;right:0;top:0;height:22%;display:flex;align-items:center;gap:2.4cqw;
  padding:0 6cqw 0 5cqw;background:var(--c);color:var(--i);transition:background .5s ease,color .5s ease;
  box-shadow:inset 0 -1.2cqw 0 rgba(0,0,0,.18)}
.mk-c-val{font-family:var(--display);font-weight:800;font-size:19cqw;line-height:1;letter-spacing:-.06em;
  display:grid;place-items:center;min-width:25cqw;height:22cqw;padding:0 2.2cqw;border-radius:5.4cqw;
  background:#FFFDF6;color:#0B0E13;box-shadow:0 0 0 1.2cqw #0B0E13,0 1.4cqw 0 1.2cqw #0B0E13;
  transform:translateY(2.2cqw)}
.mk-c-m{margin-left:auto;display:grid;place-items:center;width:13cqw;height:13cqw;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:9cqw;background:#FFFDF6;color:#0B0E13;
  box-shadow:0 0 0 1cqw #0B0E13}
.mk-pas--l{font-size:8.6cqw}
.mk-c-art{left:3.8cqw;right:3.8cqw;top:22%;height:48%;overflow:hidden;background:#EDE7D8;
  border-bottom:1cqw solid #0B0E13}
.mk-c-plaque{left:10cqw;right:10cqw;top:28.5%;display:grid;place-items:center;min-height:17cqw;
  padding:1.6cqw 2.4cqw;border-radius:2.6cqw;background:#18336B;color:#FFFFFF;text-align:center;
  box-shadow:inset 0 0 0 1cqw #F4F1E8,0 0 0 .9cqw #0B0E13,0 1.4cqw 0 .9cqw rgba(11,14,19,.55)}
.mk-c-plaque b{font-family:"Archivo Narrow",var(--display);font-weight:700;font-size:9cqw;line-height:1.02;
  letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  overflow-wrap:anywhere;hyphens:auto}
.mk-c-pied{left:5cqw;right:5cqw;top:71.5%;height:12%;display:flex;align-items:center;justify-content:center}
.mk-c-corrs{display:flex;align-items:center;gap:1.8cqw;font-family:var(--display);font-weight:800;
  font-size:7.4cqw;color:#0B0E13}
.mk-c-corrs .mk-pas{font-size:7.4cqw;opacity:.42;filter:saturate(.6)}
.mk-c-corrs .mk-pas.jeu{opacity:1;filter:none;font-size:8.6cqw;box-shadow:0 0 0 .12em #0B0E13,0 0 0 .3em #FFCE00}
.mk-c-seule{font-family:var(--mono);font-size:5.2cqw;letter-spacing:.06em;text-transform:uppercase;color:#6A6458}
.mk-c-contre{left:4cqw;right:4cqw;bottom:4cqw;height:11%;display:flex;align-items:center;justify-content:center;
  padding:0 3cqw;border-radius:3cqw;font-family:var(--display);font-weight:800;font-size:6.4cqw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#3B2600;
  background:linear-gradient(180deg,#FFE79A,#E8B13A);box-shadow:0 0 0 .9cqw #0B0E13}
.mk-c-val--bas{right:5cqw;bottom:3.4cqw;left:auto;top:auto;min-width:0;height:auto;padding:0;border-radius:0;
  font-size:9cqw;background:none;box-shadow:none;transform:rotate(180deg);opacity:.5}
.mk-c-contre ~ .mk-c-val--bas{display:none}

/* — jouée en correspondance : la carte prend la couleur de la ligne demandée — */
.mk-c--corr .mk-c-in{box-shadow:inset 0 0 0 2.6cqw var(--c2),inset 0 0 0 3.8cqw #FBF6E9,
  0 0 0 2px #0B0E13,0 1.6cqw 0 2px #0B0E13,0 0 0 2.4cqw var(--c2),0 5cqw 9cqw rgba(0,0,0,.42)}
.mk-c--corr .mk-c-bande{background:linear-gradient(100deg,var(--c) 0 38%,var(--c2) 62%);color:var(--i2)}
.mk-c-ruban{left:-2cqw;right:-2cqw;bottom:13%;padding:1.6cqw 0;text-align:center;z-index:3;
  font-family:var(--display);font-weight:800;font-size:8cqw;letter-spacing:.02em;
  background:var(--c2,#FFCE00);color:var(--i2,#0B0E13);transform:rotate(-6deg);
  box-shadow:0 0 0 1cqw #0B0E13,0 1.6cqw 0 1cqw #0B0E13}
.mk-c-ruban--filou{background:#E3051C;color:#fff}
.mk-c-ruban--fuite{background:#F4F7FA;color:#0B0E13}

/* ============================ ATOUT (monument) =========================== */
.mk-c--atout .mk-c-in{background:radial-gradient(130% 80% at 50% 26%,#2C2A33,#08080C 72%);
  box-shadow:inset 0 0 0 1.8cqw #D8A33A,inset 0 0 0 2.6cqw #08080C,inset 0 0 0 3.3cqw #FFE08A,
    0 0 0 2px #0B0E13,0 1.6cqw 0 2px #0B0E13,0 5cqw 9cqw rgba(0,0,0,.5)}
.mk-c-bande--or{background:none;box-shadow:none;color:#FFE08A;height:20%}
.mk-c-bande--or .mk-c-val{background:linear-gradient(180deg,#FFF1BF,#E7B23E);color:#2A1A00}
.mk-c-at{font-family:var(--mono);font-weight:700;font-size:5.6cqw;letter-spacing:.2em;color:#FFE08A}
.mk-c-couronne{margin-left:auto;width:14cqw!important;height:14cqw!important;filter:drop-shadow(0 0 2cqw rgba(255,206,0,.55))}
.mk-c-arche{left:10cqw;right:10cqw;top:20%;height:45%;overflow:hidden;background:#11151D;
  border-radius:40cqw 40cqw 3cqw 3cqw;box-shadow:0 0 0 1.4cqw #E0B040,0 0 0 2.4cqw #0B0E13,0 0 8cqw rgba(255,200,80,.25)}
.mk-c-tab{position:absolute;inset:0}
.mk-c-tab svg{width:100%;height:100%}
.mk-c-reflet{position:absolute;inset:-20% -60%;background:linear-gradient(105deg,transparent 42%,rgba(255,244,210,.45) 50%,transparent 58%);
  transform:translateX(-60%);animation:mkReflet 5.2s ease-in-out infinite}
@keyframes mkReflet{0%,55%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
.mk-c-nomat{left:5cqw;right:5cqw;top:67%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6cqw}
.mk-c-nomat b{font-family:var(--display);font-weight:800;font-size:8.4cqw;line-height:1.02;color:#FFF1C4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-c-nomat small{font-family:var(--mono);font-size:4.8cqw;letter-spacing:.14em;color:#C9A55A}
.mk-c-stat{left:6cqw;right:6cqw;bottom:5cqw;display:flex;align-items:center;justify-content:center;gap:1.6cqw;
  padding:1.4cqw 2cqw;border-radius:2.4cqw;background:#18336B;color:#fff;
  box-shadow:inset 0 0 0 .8cqw #F4F1E8,0 0 0 .8cqw #0B0E13}
.mk-c-stat-n{font-family:"Archivo Narrow",var(--display);font-weight:700;font-size:6cqw;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mk-c-stat-p{display:flex;gap:.8cqw;flex:none}
.mk-c-stat-p .mk-pas{font-size:5.2cqw}
.mk-c-stat.jeu{background:#8A2A00;box-shadow:inset 0 0 0 .8cqw #FFD27A,0 0 0 .8cqw #0B0E13,0 0 4cqw rgba(255,140,40,.6)}
.mk-c--atout .mk-c-val--bas{color:#FFE08A;bottom:21%}

/* — le monument annulé par sa station — */
.mk-c--annule{filter:grayscale(.9) brightness(.72)}
.mk-c--annule .mk-c-in::after{content:"ANNULÉ";position:absolute;left:50%;top:44%;z-index:5;
  transform:translate(-50%,-50%) rotate(-18deg);padding:1.6cqw 4cqw;border-radius:2cqw;
  font-family:var(--display);font-weight:800;font-size:12cqw;letter-spacing:.04em;color:#E3051C;
  background:rgba(255,253,246,.92);box-shadow:0 0 0 1.4cqw #E3051C,0 0 0 2.4cqw #0B0E13}

/* ============================ SPÉCIALES ================================== */
.mk-c--sp .mk-c-in{background:var(--f);color:var(--t);
  box-shadow:inset 0 0 0 2cqw var(--l),inset 0 0 0 3cqw var(--f),inset 0 0 0 3.6cqw rgba(255,255,255,.35),
    0 0 0 2px #0B0E13,0 1.6cqw 0 2px #0B0E13,0 5cqw 9cqw rgba(0,0,0,.45)}
.mk-c-bande--sp{height:17%;background:none;box-shadow:none;color:var(--t);gap:2.4cqw;padding:0 5cqw}
.mk-c-pic{display:grid;place-items:center;width:15cqw;height:15cqw;border-radius:50%;background:var(--l);
  box-shadow:0 0 0 1cqw #0B0E13;flex:none}
.mk-c-pic svg{width:74%;height:74%}
.mk-c-cat{font-family:var(--mono);font-weight:700;font-size:5.4cqw;letter-spacing:.14em;white-space:nowrap}
.mk-c-art--sp{left:6cqw;right:6cqw;top:17%;height:50%;border-radius:4cqw;border:0;
  box-shadow:0 0 0 1.2cqw #0B0E13}
.mk-c-nomsp{left:4cqw;right:4cqw;top:69%;bottom:15%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2cqw;text-align:center}
.mk-c-nomsp i{font-family:var(--body);font-style:italic;font-weight:500;font-size:5.6cqw;line-height:1.1;opacity:.82;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-c-nomsp b{font-family:var(--display);font-weight:800;font-size:8.6cqw;line-height:1.02;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mk-c-bref{left:8cqw;right:8cqw;bottom:5cqw;text-align:center;padding:1.2cqw 2cqw;border-radius:99px;
  font-family:var(--display);font-weight:700;font-size:5.8cqw;line-height:1.1;color:#0B0E13;
  background:var(--l);box-shadow:0 0 0 .8cqw #0B0E13;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* les personnages : un liseré doré, des coins Guimard */
.mk-cat--perso .mk-c-in::before{content:"";position:absolute;inset:4.6cqw;border-radius:5cqw;
  border:.7cqw solid rgba(255,230,160,.55);pointer-events:none;z-index:2}
/* le contrôle : une perforation de ticket */
.mk-cat--controle .mk-c-in::before{content:"";position:absolute;inset:4.4cqw;border-radius:5cqw;
  border:.9cqw dashed #FFCE00;pointer-events:none;z-index:2;opacity:.8}
/* les incidents : le bandeau d'info trafic */
.mk-c--greve .mk-c-bande--sp{background:#1C3F77;color:#fff;left:3cqw;right:3cqw;top:3cqw;height:14%;border-radius:4cqw 4cqw 0 0}
.mk-c--greve .mk-c-art--sp{top:18%}
/* les BÊTES DE PARIS : un cadre de fonte riveté, comme une plaque d'égout */
.mk-cat--bete .mk-c-in{box-shadow:inset 0 0 0 3.4cqw #2E3439,inset 0 0 0 4.2cqw #7CD65A,
  0 0 0 2px #0B0E13,0 1.6cqw 0 2px #0B0E13,0 0 0 1cqw rgba(124,214,90,.25),0 5cqw 9cqw rgba(0,0,0,.5)}
.mk-cat--bete .mk-c-in::before{content:"";position:absolute;inset:.9cqw;border-radius:8cqw;pointer-events:none;z-index:2;
  background:radial-gradient(circle,#9AA3AA 0 .7cqw,transparent .8cqw) 0 0/7cqw 7cqw;
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:1.8cqw}
.mk-cat--bete .mk-c-bande--sp .mk-c-cat{color:#B8F59E}
.mk-cat--bete .mk-c-pic{background:#7CD65A}
.mk-cat--bete .mk-c-bref{background:#B8F59E}

/* ============================ DOS ======================================== */
.mk-c--dos .mk-c-in{background:#0B111B}

/* ============================ ÉTATS ====================================== */
.mk-c--ok{cursor:pointer}
.mk-c--ok:hover,.mk-c--ok:focus-visible{transform:translateY(-9%) rotateX(10deg) scale(1.05);z-index:5;outline:none}
.mk-c--ok:hover .mk-c-in,.mk-c--ok:focus-visible .mk-c-in{filter:brightness(1.05)}
.mk-c--ok::after{content:"";position:absolute;inset:-3px;border-radius:calc(var(--cw)*.1);pointer-events:none;
  box-shadow:0 0 0 2.5px #FFCE00,0 0 16px rgba(255,206,0,.55);opacity:0;transition:opacity .2s}
.mk-c--ok:hover::after,.mk-c--ok:focus-visible::after{opacity:1}
.mk-c--non{filter:saturate(.45) brightness(.62)}

/* — les petites animations des dessins — */
.mk-c .mk-flamme{transform-box:fill-box;transform-origin:50% 100%;animation:mkFlamme 1.2s ease-in-out infinite alternate}
@keyframes mkFlamme{from{transform:scale(1,1) skewX(0)}to{transform:scale(.86,1.12) skewX(6deg)}}
.mk-c .mk-lueur{animation:mkLueur 2.2s ease-in-out infinite}
@keyframes mkLueur{0%,100%{opacity:.5}50%{opacity:1}}
.mk-c .mk-pulse{transform-box:fill-box;transform-origin:center;animation:mkPulse 3s ease-in-out infinite}
@keyframes mkPulse{0%,100%{transform:scale(.92);opacity:.22}50%{transform:scale(1.05);opacity:.4}}
.mk-c .mk-clignote{animation:mkLueur .9s steps(2) infinite}
.mk-c .mk-drapeau path:last-child{transform-box:fill-box;transform-origin:0 50%;animation:mkDrapeau 1.6s ease-in-out infinite alternate}
@keyframes mkDrapeau{from{transform:skewY(0) scaleX(1)}to{transform:skewY(-5deg) scaleX(.93)}}
.mk-c .mk-bulles circle{animation:mkBulle 3s ease-in infinite}
.mk-c .mk-bulles circle:nth-child(2){animation-delay:-1s}.mk-c .mk-bulles circle:nth-child(3){animation-delay:-2s}
@keyframes mkBulle{from{transform:translateY(6px);opacity:0}30%{opacity:.8}to{transform:translateY(-14px);opacity:0}}
.mk-c .mk-rame{animation:mkRame 7s ease-in-out infinite}
@keyframes mkRame{0%,30%{transform:translateX(0)}45%{transform:translateX(-5px)}60%,100%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){ .mk-c *,.mk-c-reflet{animation:none!important} }

/* ==========================================================================
   MÉTRO KING — LA TABLE
   --------------------------------------------------------------------------
   Plan : un bandeau, les adversaires en rangée, le tapis au centre, votre
   place et votre main en bas. Le tapis est un feutre vert Guimard cerclé de
   laiton, sous une voûte carrelée ; tout le reste reste droit, lisible.
   ========================================================================== */
:is(.mk-jeu,.mk-menu,.mk-modal,.mk-salon,.mk-intro){
  --mk-nuit:#0B0E13; --mk-voute:#161C26; --mk-creme:#FBF6E9; --mk-creme2:#EFE6D2;
  --mk-or:#FFCE00; --mk-or2:#E8B13A; --mk-guimard:#1E5A42; --mk-guimard2:#10362A;
  --mk-roi:#2A1740; --mk-roi2:#6B2FA0; --mk-ok:#3ED07A; --mk-ko:#FF6B6B;
  --mk-ombre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}

/* pendant la partie, la carte de présentation se replie */
.view.mk-joue .ap-ban,.view.mk-joue .ap-mascotte{display:none}
.view.mk-joue > .wrap > .section{padding-top:6px!important;padding-bottom:0!important}
.view.mk-joue > .wrap > .section .row{margin-bottom:6px!important}
.view.mk-joue .ap-cadre{margin-top:4px!important;padding:0!important;background:none;box-shadow:none}
.view.mk-joue .ap-stage{padding:0!important;background:none;box-shadow:none}
.view.mk-joue .ap-stage::before{display:none}

.mk-jeu{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(170px,1fr) auto auto;gap:8px;width:100%;
  height:calc(100dvh - 128px);min-height:560px;padding:8px clamp(6px,1.2vw,14px) 10px;border-radius:26px;
  overflow:hidden;isolation:isolate;color:var(--mk-creme);font-family:var(--body);
  background:
    radial-gradient(120% 60% at 50% -8%,rgba(255,226,150,.16),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 30px),
    linear-gradient(180deg,#1C2330,#0E131B 70%);
  box-shadow:inset 0 0 0 3px #0B0E13,inset 0 0 0 6px rgba(232,177,58,.35),0 18px 40px rgba(0,0,0,.45)}
.mk-jeu.mk-plein-css,.mk-jeu:fullscreen,.mk-jeu.mob-plein{position:fixed;inset:0;z-index:9000;height:100dvh;border-radius:0;max-height:none}
.mk-jeu:fullscreen{position:relative}

/* — le bandeau — */
.mk-hud{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.mk-hud::-webkit-scrollbar{display:none}
.mk-hud-sp{flex:1 1 auto}
.mk-manche{flex:none;display:grid;grid-template-columns:auto auto auto;align-items:baseline;column-gap:5px;
  padding:.3em .75em .4em;border-radius:14px;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:var(--mk-ombre)}
.mk-manche small{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase}
.mk-manche b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1}
.mk-manche span{font-family:var(--display);font-weight:700;font-size:.72rem}
.mk-dots{grid-column:1/-1;display:flex;gap:3px;margin-top:2px}
.mk-dots i{width:7px;height:7px;border-radius:50%;background:rgba(11,14,19,.25)}
.mk-dots i.fait{background:#0B0E13}
.mk-dots i.cours{background:#E3051C;box-shadow:0 0 0 1.5px #0B0E13}
.mk-legende{display:flex;gap:6px;flex:none}
.mk-leg{display:inline-flex;align-items:center;gap:6px;padding:.28em .7em .28em .3em;border-radius:999px;
  background:rgba(251,246,233,.08);box-shadow:inset 0 0 0 1.5px rgba(251,246,233,.18);font-size:.72rem}
.mk-leg .mk-pas{font-size:.8rem}
.mk-leg em{font-style:normal;font-family:var(--display);font-weight:700;white-space:nowrap}
.mk-leg--at svg{width:22px;height:22px}
.mk-b{flex:none;display:inline-flex;align-items:center;gap:6px;padding:.42em .7em;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:var(--mk-ombre);transition:transform .16s var(--ease-back)}
.mk-b svg{width:17px;height:17px;flex:none}
.mk-b:hover{transform:translateY(-2px)}
.mk-b:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mk-b:focus-visible{outline:3px solid var(--mk-or);outline-offset:2px}
.mk-b--quitter{background:linear-gradient(180deg,#FFD9D9,#F5A9A9)}
.mk-b--vite.on{background:linear-gradient(180deg,#FFE88A,#FFCE00)}

/* — les adversaires — */
.mk-adv{display:flex;justify-content:center;gap:8px;flex-wrap:nowrap;min-width:0;padding:8px 2px 4px}
.mk-siege{position:relative;flex:0 1 190px;min-width:0;display:grid;grid-template-columns:auto 1fr auto;
  grid-template-areas:"av t pari" "av fan jet";align-items:center;column-gap:8px;row-gap:3px;
  padding:6px 9px 7px;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC8);box-shadow:var(--mk-ombre);
  transition:box-shadow .25s ease,transform .25s var(--ease-back)}
.mk-siege.actif{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--c),0 4px 0 5.5px #0B0E13,0 0 22px var(--c);transform:translateY(-2px)}
.mk-siege.parti{filter:grayscale(.6)}
.mk-av{grid-area:av;display:block;width:42px;height:46px;flex:none}
.mk-av svg{width:100%;height:100%;display:block}
.mk-siege-t{grid-area:t;min-width:0;display:flex;flex-direction:column;line-height:1.05}
.mk-siege-t b{font-family:var(--display);font-weight:800;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-siege-t small{font-family:var(--mono);font-size:.54rem;letter-spacing:.04em;opacity:.7;white-space:nowrap}
.mk-pari{grid-area:pari;display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1rem;line-height:1;color:#0B0E13;background:#D9D2BE;
  box-shadow:0 0 0 2.2px #0B0E13,0 2.5px 0 2.2px #0B0E13;perspective:200px}
.mk-pari.ok{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mk-pari.pret{background:#BFF0CF;color:#0E6B3E}
.mk-pari.moi{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mk-pari.attend{animation:mkAttend 1.2s ease-in-out infinite}
@keyframes mkAttend{50%{background:#FFF3C0}}
.mk-jetons{grid-area:jet;display:flex;gap:3px;justify-content:flex-end;flex-wrap:wrap;max-width:88px}
.mk-jetons i{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 1.8px #0B0E13;font-style:normal}
.mk-jetons i.plein{background:var(--mk-ok)}
.mk-jetons i.vide{background:#FBF6E9;box-shadow:inset 0 0 0 1.8px #0B0E13}
.mk-jetons i.trop{background:var(--mk-ko)}
.mk-jetons i.zero{width:auto;height:auto;padding:0 5px;border-radius:6px;font-family:var(--display);font-weight:800;font-size:.6rem;background:#BFE3F5}
.mk-fan{grid-area:fan;position:relative;height:24px;min-width:0}
.mk-fan i{position:absolute;left:calc(var(--k)*9px);top:0;width:16px;height:24px;border-radius:3px;
  background:linear-gradient(135deg,#23304A,#0B111B);box-shadow:0 0 0 1.5px #0B0E13,inset 0 0 0 2px rgba(255,206,0,.5);
  transform:rotate(calc((var(--k) - var(--m)/2)*4deg));transform-origin:50% 120%}
.mk-cpt{position:absolute;right:8px;bottom:-9px;padding:0 6px;border-radius:999px;font-family:var(--mono);font-size:.54rem;font-weight:700;
  color:#FBF6E9;background:#0B0E13;box-shadow:0 0 0 1.5px var(--mk-or)}
.mk-pense{position:absolute;right:-6px;top:-10px;display:flex;gap:3px;padding:4px 6px;border-radius:12px;background:#FBF6E9;box-shadow:0 0 0 2px #0B0E13}
.mk-pense i{width:5px;height:5px;border-radius:50%;background:#0B0E13;animation:mkPense 1s ease-in-out infinite}
.mk-pense i:nth-child(2){animation-delay:.15s}.mk-pense i:nth-child(3){animation-delay:.3s}
@keyframes mkPense{50%{transform:translateY(-3px);opacity:.4}}

/* — le tapis — */
.mk-tapis{position:relative;min-height:0;border-radius:24px;perspective:1100px}
.mk-feutre{position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  transform:rotateX(calc(9deg + var(--py,0)*1.5deg)) rotateY(calc(var(--px,0)*1.6deg));transform-origin:50% 60%;
  transition:transform .6s var(--ease-std);
  background:radial-gradient(90% 80% at 50% 45%,#2A7458,#1E5A42 55%,#10362A);
  box-shadow:inset 0 0 0 5px #0B0E13,inset 0 0 0 10px #C8952E,inset 0 0 0 12px #0B0E13,inset 0 0 0 14px rgba(255,226,150,.35),
    inset 0 20px 60px rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.45)}
.mk-feutre svg{position:absolute;inset:0;width:100%;height:100%}
.mk-feutre::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at calc(50% + var(--px,0)*20%) 30%,rgba(255,240,200,.14),transparent 70%)}
.mk-pli{position:absolute;left:8px;right:8px;top:48px;bottom:42px;z-index:2;display:grid;
  grid-template-columns:repeat(var(--cols,4),var(--cwp,80px));justify-content:center;align-content:center;gap:8px 12px}
.mk-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.mk-slot-place{position:relative;width:var(--cwp,80px);aspect-ratio:100/144;border-radius:calc(var(--cwp,80px)*.085)}
.mk-slot.vide .mk-slot-place,.mk-slot.attente .mk-slot-place{box-shadow:inset 0 0 0 2px rgba(251,246,233,.25);
  background:repeating-linear-gradient(45deg,rgba(251,246,233,.04) 0 6px,transparent 6px 12px)}
.mk-slot .mk-c{--cw:var(--cwp,80px)}
.mk-slot-n{position:absolute;left:-7px;top:-7px;z-index:3;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:.66rem;color:#0B0E13;background:#FBF6E9;box-shadow:0 0 0 2px #0B0E13}
.mk-slot.vide .mk-slot-n{opacity:.35}
.mk-slot-lab{display:flex;align-items:center;gap:4px;max-width:calc(var(--cwp,80px) + 20px);padding:.14em .55em .14em .2em;border-radius:999px;
  background:rgba(11,14,19,.55);font-size:.66rem}
.mk-slot.vide .mk-slot-lab{opacity:.4;padding-left:.55em}
.mk-slot-lab b{font-family:var(--display);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-slot-av{display:block;width:18px;height:20px;flex:none}
.mk-slot-av svg{width:100%;height:100%}
.mk-slot.gagnant .mk-c{transform:translateY(-6px) scale(1.06);z-index:4}
.mk-slot.gagnant .mk-slot-place::after{content:"";position:absolute;inset:-6px;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px #FFCE00,0 0 28px 6px rgba(255,206,0,.6);animation:mkGagne 1s ease-in-out infinite alternate}
@keyframes mkGagne{to{box-shadow:0 0 0 3px #FFF3B0,0 0 40px 12px rgba(255,206,0,.8)}}
.mk-slot.gagnant .mk-slot-lab{background:#FFCE00;color:#0B0E13}
.mk-slot.perd .mk-c{filter:saturate(.6) brightness(.72)}
.mk-slot.noye .mk-c{filter:grayscale(1) brightness(.6) blur(.4px)}
/* une Bête capturée : derrière les barreaux d'une cage légère, encore lisible */
.mk-slot.capture .mk-c{filter:grayscale(.35) brightness(.85)}
.mk-slot.capture .mk-slot-place::before{content:"";position:absolute;inset:-4px;z-index:6;border-radius:10px;
  border:2px solid rgba(242,224,74,.75);
  background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(242,224,74,.6) 11px 13px)}
.mk-slot.avale .mk-c{transition:transform .5s ease-in,opacity .5s ease-in;transform:scale(.2) rotate(40deg);opacity:0}
.mk-slot.parti .mk-c,.mk-slot.vide-vol .mk-c{visibility:hidden}
.mk-info{position:absolute;left:12px;right:12px;top:10px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;pointer-events:none}
.mk-info.vide{display:none}
.mk-info-b{display:inline-flex;align-items:center;gap:6px;padding:.22em .7em;border-radius:999px;
  background:rgba(11,14,19,.62);box-shadow:inset 0 0 0 1.5px rgba(251,246,233,.2);font-size:.72rem}
.mk-info-b small{font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.mk-info-b b{display:inline-flex;align-items:center;gap:4px;font-family:var(--display);font-weight:800}
.mk-info-b b.doux{font-weight:600;opacity:.7}
.mk-info-b .mk-pas{font-size:.72rem}
.mk-info-at svg{width:18px;height:18px}
.mk-info-eff{padding:.22em .7em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.7rem;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13;animation:mkEff .5s var(--ease-back)}
@keyframes mkEff{from{transform:scale(.4);opacity:0}}
.mk-msg{position:absolute;left:50%;bottom:10px;z-index:3;transform:translateX(-50%);max-width:min(92%,640px);
  padding:.36em 1em;border-radius:999px;text-align:center;font-family:var(--display);font-weight:700;font-size:.8rem;
  color:#0B0E13;background:#FBF6E9;box-shadow:var(--mk-ombre);opacity:0;transition:opacity .25s ease}
.mk-msg.on{opacity:1}
.mk-msg.mk-fort{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mk-jeu:has(.mk-panneau) .mk-msg{opacity:0}
/* une rame passe de temps en temps sur le plan du tapis */
.mk-feutre::before{content:"";position:absolute;left:-18%;top:34%;width:16%;height:11px;border-radius:6px;z-index:1;opacity:.5;
  background:repeating-linear-gradient(90deg,#FFCE00 0 22%,#0B0E13 22% 25%);box-shadow:0 0 0 2px rgba(11,14,19,.6);
  animation:mkRameTapis 16s linear infinite}
@keyframes mkRameTapis{0%,62%{transform:translateX(0)}100%{transform:translateX(780%)}}

/* — votre place et votre main — */
.mk-moi{display:flex;align-items:center;gap:10px;min-width:0;padding:5px 12px 5px 6px;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC8);box-shadow:var(--mk-ombre);transition:box-shadow .25s ease}
.mk-moi.actif{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px var(--c,#FFCE00),0 4px 0 5.5px #0B0E13,0 0 26px rgba(255,206,0,.55)}
.mk-moi .mk-av{width:34px;height:38px}
.mk-moi .mk-siege-t{flex:none}
.mk-moi .mk-jetons{max-width:none}
.mk-moi-etat{font-family:var(--display);font-weight:800;font-size:.86rem;white-space:nowrap}
.mk-moi.actif .mk-moi-etat{color:#B8420F;animation:mkClin 1s ease-in-out infinite}
@keyframes mkClin{50%{opacity:.55}}
.mk-main{min-width:0;display:grid;grid-template-columns:repeat(var(--cols,10),var(--cwm,86px));justify-content:center;gap:8px 10px;
  padding:14px 4px 4px;perspective:900px;min-height:calc(var(--cwm,86px)*1.44 + 18px)}
/* la main reste immobile : pas d'entrée animée à chaque coup, pas de
   pulsation ; seule la distribution retourne les cartes (mk-revele) */
.mk-main .mk-c{--cw:var(--cwm,86px)}
.mk-main .mk-c.mk-voile{visibility:hidden;animation:none}
.mk-main .mk-c.mk-revele{animation:mkRevele .45s var(--ease-back)}
@keyframes mkRevele{from{transform:rotateY(90deg) scale(.9)}to{transform:rotateY(0) scale(1)}}
.mk-main .mk-c--ok::after{opacity:.6}
.mk-main .mk-c--ok:hover::after,.mk-main .mk-c--ok:focus-visible::after{opacity:1}
.mk-badge{position:absolute;z-index:6;left:50%;top:-10px;transform:translateX(-50%);padding:.1em .5em;border-radius:999px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:clamp(.54rem,calc(var(--cw)*.11),.74rem);box-shadow:0 0 0 2px #0B0E13}
.mk-badge--corr{background:var(--c);color:var(--i)}
.mk-badge--contre{background:linear-gradient(180deg,#FFE88A,#E8B13A);color:#3B2600;top:auto;bottom:-10px}

/* ==========================================================================
   LES EFFETS
   ========================================================================== */
.mk-fx{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.mk-fx-o{position:absolute}
.mk-fx-o svg{display:block;width:100%;height:auto}
.mk-vol{position:absolute!important;margin:0;z-index:5;transform-origin:0 0;pointer-events:none;filter:drop-shadow(0 12px 16px rgba(0,0,0,.45))}
.mk-fx-titre{left:50%;top:44%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;width:max-content;max-width:92%}
.mk-fx-titre b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,5vw,3.4rem);line-height:.95;letter-spacing:-.02em;
  color:var(--c);-webkit-text-stroke:2px #0B0E13;paint-order:stroke fill;text-shadow:0 5px 0 #0B0E13,0 0 30px rgba(0,0,0,.6)}
.mk-fx-titre small{padding:.25em .8em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:clamp(.72rem,1.6vw,.95rem);
  color:var(--i);background:var(--c);box-shadow:var(--mk-ombre)}
.mk-fx-bulle{z-index:9;max-width:min(78vw,320px);padding:.5em .9em;border-radius:16px;font-family:var(--display);font-weight:800;
  font-size:.82rem;line-height:1.2;text-align:center;color:var(--i);background:var(--c);box-shadow:var(--mk-ombre);transform-origin:50% 100%}
.mk-fx-bulle::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;background:var(--c);
  transform:translateX(-50%) rotate(45deg);box-shadow:2.5px 2.5px 0 #0B0E13}
.mk-fx-flotte{z-index:9;font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--c);
  -webkit-text-stroke:1.5px #0B0E13;paint-order:stroke fill;text-shadow:0 3px 0 #0B0E13;white-space:nowrap}
.mk-fx-p{z-index:7;box-shadow:0 0 0 1px rgba(11,14,19,.5)}
.mk-fx-voile{z-index:1}
.mk-fx-eau{z-index:2;background:linear-gradient(180deg,rgba(111,227,232,.55),rgba(14,138,154,.85));
  -webkit-mask:radial-gradient(28px 14px at 28px 0,transparent 98%,#000) 0 0/56px 100% repeat-x;mask:radial-gradient(28px 14px at 28px 0,transparent 98%,#000) 0 0/56px 100% repeat-x}
.mk-fx-bulle-eau{z-index:3;border-radius:50%;background:rgba(207,246,248,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8)}
.mk-fx-rubalise{z-index:4;background:repeating-linear-gradient(90deg,#E3051C 0 26px,#FFFFFF 26px 52px);box-shadow:0 0 0 3px #0B0E13;transform-origin:0 50%}
.mk-fx-gyro{z-index:5;transform:translate(-50%,0);animation:mkGyro .35s steps(2) infinite}
@keyframes mkGyro{50%{filter:hue-rotate(160deg) brightness(1.4)}}
.mk-fx-feu{z-index:4;filter:drop-shadow(0 0 12px rgba(255,59,48,.8))}
.mk-fx-mur{z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;transform-origin:50% 100%}
.mk-fx-rayons{z-index:0}
.mk-fx-tampon{padding:.2em .6em;border-radius:10px;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.2vw,2rem);
  color:#E3051C;background:rgba(255,253,246,.94);box-shadow:0 0 0 4px #E3051C,0 0 0 6.5px #0B0E13}
.mk-fx-mach{z-index:8}
.mk-fx-mach svg{height:100%}
.mk-fx-ban{left:50%;top:40%;z-index:9;display:flex;flex-direction:column;align-items:center;gap:4px;padding:.6em 1.4em;border-radius:20px;
  color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:var(--mk-ombre);text-align:center}
.mk-fx-ban small{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.mk-fx-ban b{font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,3vw,1.6rem)}
.mk-fx-paquet{z-index:6;width:62px;height:90px}
.mk-fx-paquet i{position:absolute;inset:0;border-radius:6px;overflow:hidden;box-shadow:0 0 0 2px #0B0E13}
.mk-fx-paquet i svg{width:100%;height:100%}
.mk-fx-paquet i:nth-child(1){transform:translate(-3px,3px)}.mk-fx-paquet i:nth-child(2){transform:translate(-1.5px,1.5px)}
.mk-fx-paquet.melange i:nth-child(1){animation:mkMelG .32s ease-in-out 2 alternate}
.mk-fx-paquet.melange i:nth-child(3){animation:mkMelD .32s ease-in-out 2 alternate}
@keyframes mkMelG{to{transform:translate(-44px,-6px) rotate(-14deg)}}
@keyframes mkMelD{to{transform:translate(44px,-6px) rotate(14deg)}}
.mk-fx-mot{left:50%;top:44%;z-index:9;font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,6vw,3.6rem);color:#FBF6E9;
  -webkit-text-stroke:2px #0B0E13;paint-order:stroke fill;text-shadow:0 5px 0 #0B0E13;white-space:nowrap}
.mk-fx-mot.mk-fort{color:#FFCE00;font-size:clamp(2.4rem,8vw,5rem)}

/* ==========================================================================
   LES PANNEAUX
   ========================================================================== */
.mk-modaux{position:absolute;inset:0;z-index:40;pointer-events:none}
.mk-modaux > *{pointer-events:auto}
.mk-panneau{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,94%);max-height:92%;overflow:auto;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 20px;border-radius:24px;text-align:center;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE6D2);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.5);
  animation:mkPanIn .45s var(--ease-back)}
@keyframes mkPanIn{from{transform:translate(-50%,-40%) scale(.85);opacity:0}}
.mk-pan-sur{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.mk-pan-t{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,3vw,1.6rem);line-height:1.1;text-wrap:balance}
.mk-pan-t.ok{color:#0E6B3E}.mk-pan-t.ko{color:#B8122A}
.mk-pan-aide{margin:0;max-width:52ch;font-size:.78rem;line-height:1.4;color:#4A4436}
.mk-pan-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.mk-panneau--pari{top:46%}
.mk-paris{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mk-jeton-pari{width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;font-family:var(--display);font-weight:800;font-size:1.3rem;
  color:#0B0E13;background:radial-gradient(circle at 35% 30%,#FFF6C8,#FFCE00 60%,#E0A800);box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;
  transition:transform .15s var(--ease-back);animation:mkJetonIn .4s var(--ease-back) backwards;animation-delay:calc(var(--k)*40ms)}
@keyframes mkJetonIn{from{transform:scale(0) rotate(-90deg)}}
.mk-jeton-pari:hover,.mk-jeton-pari:focus-visible{transform:translateY(-4px) scale(1.08);outline:none}
.mk-jeton-pari:active{transform:translateY(3px)}
.mk-pan-go{margin-top:4px}
.mk-choix{position:absolute;z-index:45;width:300px;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:18px;
  background:#FBF6E9;box-shadow:var(--mk-ombre),0 20px 40px rgba(0,0,0,.4);animation:mkPanIn2 .3s var(--ease-back)}
@keyframes mkPanIn2{from{transform:scale(.8) translateY(10px);opacity:0}}
.mk-choix-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:.55em .8em;border:0;border-radius:12px;cursor:pointer;
  text-align:left;color:#0B0E13;background:#EFE6D2;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mk-choix-b b{font-family:var(--display);font-weight:800;font-size:.86rem}
.mk-choix-b small{font-size:.7rem;line-height:1.25;color:#4A4436}
.mk-choix-b:hover{transform:translateY(-1px)}
.mk-choix-b.corr{background:linear-gradient(180deg,#D9F1FF,#A9DDF7)}
.mk-choix-b.rouge{background:linear-gradient(180deg,#FFD9D9,#F5A9A9)}
.mk-choix-b.blanc{background:#FFFFFF}
.mk-choix-x{position:absolute;right:-8px;top:-8px;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;font-weight:800;
  color:#FBF6E9;background:#0B0E13}
.mk-astuce{position:absolute;right:12px;bottom:12px;z-index:46;width:min(300px,86%);display:flex;flex-direction:column;gap:4px;
  padding:12px 14px;border-radius:16px;color:#0B0E13;background:linear-gradient(180deg,#E3F6FF,#BFE3F5);box-shadow:var(--mk-ombre);
  animation:mkPanIn2 .35s var(--ease-back)}
.mk-astuce small{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.mk-astuce b{font-family:var(--display);font-weight:800;font-size:.95rem}
.mk-astuce p{margin:0;font-size:.76rem;line-height:1.4}
.mk-astuce-x{align-self:flex-end;border:0;border-radius:10px;padding:.3em .8em;cursor:pointer;font-family:var(--display);font-weight:800;
  font-size:.72rem;color:#FBF6E9;background:#0B0E13}

/* — le bilan d'une manche — */
.mk-panneau--bilan{width:min(700px,96%)}
.mk-bil{width:100%;display:flex;flex-direction:column;gap:5px;font-size:.78rem}
.mk-bil-l{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(6,minmax(0,.8fr));align-items:center;gap:4px;padding:5px 8px;border-radius:12px;
  background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13;font-variant-numeric:tabular-nums;animation:mkLigne .45s var(--ease-back) backwards;animation-delay:calc(var(--k)*90ms)}
@keyframes mkLigne{from{transform:translateX(-24px);opacity:0}}
.mk-bil-l--t{background:none;box-shadow:none;font-family:var(--mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;animation:none}
.mk-bil-l.ok{background:#E3F8EA}.mk-bil-l.ko{background:#FDE7E7}
.mk-bil-l.moi{box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #FFCE00}
.mk-bil-nom{display:flex;align-items:center;gap:6px;min-width:0;text-align:left}
.mk-bil-nom b{font-family:var(--display);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-bil-av{display:block;width:24px;height:26px;flex:none}
.mk-bil-av svg{width:100%;height:100%}
.mk-pos{color:#0E6B3E}.mk-neg{color:#B8122A}.mk-fort{font-family:var(--display);font-weight:800}
.mk-bil-tot{font-family:var(--display);font-weight:800;font-size:.95rem}
.mk-nuage{position:absolute;right:14px;top:10px;width:110px;height:120px;pointer-events:none}
.mk-nuage svg{width:110px;animation:mkNuage 3s ease-in-out infinite alternate}
@keyframes mkNuage{to{transform:translateX(-10px)}}
.mk-nuage i{position:absolute;top:52px;left:calc(14px + var(--i)*9px);width:3px;height:14px;border-radius:2px;background:#5AA7E0;
  animation:mkPluie .8s linear infinite;animation-delay:calc(var(--i)*-.09s)}
@keyframes mkPluie{from{transform:translateY(0);opacity:1}to{transform:translateY(56px);opacity:0}}

/* — la fin — */
.mk-panneau--fin{width:min(620px,96%)}
.mk-panneau--fin.gagne{background:radial-gradient(120% 90% at 50% 0%,#FFF6C8,#FBF6E9 60%)}
.mk-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-top:6px}
.mk-pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:110px;padding:8px 6px 0;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#FFFDF6,#E9DFC8);box-shadow:0 0 0 2.5px #0B0E13}
.mk-pod--1{height:170px;background:linear-gradient(180deg,#FFF3B0,#FFCE00)}
.mk-pod--2{height:138px}.mk-pod--3{height:116px}
.mk-pod-av{display:block;width:52px;height:58px}
.mk-pod--1 .mk-pod-av{animation:bltGensSaute 1.1s ease-in-out infinite}
.mk-pod-av svg{width:100%;height:100%}
.mk-pod b{font-family:var(--display);font-weight:800;font-size:.84rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-pod span{font-family:var(--mono);font-size:.62rem}
.mk-pod u{position:absolute;bottom:6px;font-family:var(--display);font-weight:800;font-size:1.6rem;text-decoration:none;opacity:.35}
.mk-pod-reste{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:center;font-size:.74rem}
.mk-perdu{position:relative;width:100%;height:120px;margin-top:4px;overflow:hidden;border-radius:14px;
  background:linear-gradient(180deg,#3A4658,#1A212C);box-shadow:inset 0 0 0 2.5px #0B0E13}
.mk-perdu-rame{position:absolute;left:0;bottom:18px;width:260px;animation:mkRamePart 3.2s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes mkRamePart{from{transform:translateX(30%)}to{transform:translateX(260%)}}
.mk-perdu-mot{position:absolute;left:50%;top:24px;transform:translateX(-50%) rotate(-4deg);font-family:var(--display);font-weight:800;
  font-size:2rem;letter-spacing:.06em;color:#FF6B6B;-webkit-text-stroke:1.5px #0B0E13;paint-order:stroke fill;
  animation:mkMot 3s ease-in-out infinite}
@keyframes mkMot{50%{transform:translateX(-50%) rotate(3deg) scale(1.06)}}
.mk-perdu-pluie i{position:absolute;top:-16px;left:var(--x);width:2px;height:16px;background:rgba(127,178,240,.7);
  animation:mkPluie2 .9s linear infinite;animation-delay:calc(var(--i)*-.07s)}
@keyframes mkPluie2{to{transform:translateY(150px)}}
.mk-perdu-pigeon{position:absolute;right:12px;bottom:6px;width:74px;animation:mkPigeon 2.4s ease-in-out infinite}
@keyframes mkPigeon{50%{transform:rotate(-6deg) translateY(2px)}}
.mk-rideau{position:absolute;inset:0;z-index:35;pointer-events:none;
  background:repeating-linear-gradient(180deg,#8A939E 0 10px,#6B737D 10px 12px,#9AA3AE 12px 22px);
  box-shadow:inset 0 -8px 0 #3A3F48;animation:mkRideau 1.6s cubic-bezier(.6,0,.4,1) forwards}
@keyframes mkRideau{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* — les fenêtres — */
.mk-modal{inset:0;z-index:600;display:grid;place-items:center;padding:14px;background:rgba(5,9,14,.74);animation:mkFondIn .25s ease}
.mk-modal--page{position:fixed;z-index:8500}
.mk-modal--dans{position:absolute;z-index:60}
.mk-modal.part{opacity:0;transition:opacity .25s ease}
@keyframes mkFondIn{from{opacity:0}}
.mk-modal-b{position:relative;width:min(760px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:24px;
  color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#EFE6D2);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;animation:mkPanIn2 .35s var(--ease-back)}
.mk-modal-b h3{margin:0;font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase}
.mk-sc-wrap{overflow-x:auto}
.mk-sc-t{display:grid;grid-template-columns:auto repeat(var(--n),minmax(78px,1fr));gap:4px;font-variant-numeric:tabular-nums;min-width:max-content}
.mk-sc-h{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:800;font-size:.74rem}
.mk-sc-m{display:grid;place-items:center;font-family:var(--display);font-weight:800}
.mk-sc-c{display:grid;grid-template-columns:1fr auto;padding:4px 6px;border-radius:8px;font-size:.7rem;box-shadow:0 0 0 1.5px #0B0E13}
.mk-sc-c.ok{background:#E3F8EA}.mk-sc-c.ko{background:#FDE7E7}
.mk-sc-c small{grid-column:1/-1;opacity:.6}
.mk-sc-c em{font-style:normal;font-weight:800}

/* ==========================================================================
   LE MENU
   ========================================================================== */
.mk-menu{display:flex;flex-direction:column;gap:18px}
.mk-enseigne{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px clamp(12px,20vw,250px) 26px;border-radius:26px;overflow:hidden;
  background:radial-gradient(90% 90% at 50% 20%,#4A2A72,#2A1740 60%,#150B22);box-shadow:inset 0 0 0 3px #0B0E13,inset 0 0 0 7px rgba(255,206,0,.35)}
.mk-orbite{position:absolute;inset:0;pointer-events:none}
.mk-orbite .mk-c{--cw:clamp(64px,8.4vw,104px);position:absolute;top:50%;opacity:.95;
  animation:mkFlotte 5s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.mk-orbite .mk-c:nth-child(1){left:3%;--r:-14deg;margin-top:-70px}
.mk-orbite .mk-c:nth-child(2){left:calc(3% + clamp(50px,6vw,84px));--r:-4deg;margin-top:-40px}
.mk-orbite .mk-c:nth-child(3){right:calc(3% + clamp(50px,6vw,84px));--r:5deg;margin-top:-44px}
.mk-orbite .mk-c:nth-child(4){right:3%;--r:15deg;margin-top:-72px}
.mk-orbite .mk-c:nth-child(5){display:none}
@keyframes mkFlotte{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-12px) rotate(calc(var(--r) * 1.3))}}
@media (max-width:820px){
  .mk-enseigne{padding-top:120px}
  .mk-orbite .mk-c{top:18px;margin-top:0!important;--cw:64px}
  .mk-orbite .mk-c:nth-child(1){left:6%}.mk-orbite .mk-c:nth-child(2){left:calc(6% + 48px)}
  .mk-orbite .mk-c:nth-child(3){right:calc(6% + 48px)}.mk-orbite .mk-c:nth-child(4){right:6%}
}
.mk-titre{position:relative;z-index:2;margin:0;display:flex;flex-wrap:wrap;justify-content:center;font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,9vw,5.6rem);line-height:.9;letter-spacing:-.02em}
.mk-titre span{position:relative;display:inline-block;color:var(--c);-webkit-text-stroke:3px #0B0E13;paint-order:stroke fill;
  text-shadow:0 6px 0 #0B0E13;animation:mkLettre 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes mkLettre{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
.mk-titre-mot{display:inline-flex;white-space:nowrap;font-weight:inherit}
.mk-titre-cour{position:absolute;left:50%;top:-.55em;width:.8em;transform:translateX(-50%) rotate(-10deg)}
.mk-titre-cour svg{width:100%;height:auto;display:block}
.mk-sous{position:relative;z-index:2;margin:0;max-width:56ch;text-align:center;font-size:.95rem;color:#E9DDF7;text-wrap:balance}
.mk-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.mk-mode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE6D2);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mk-mode--ligne{background:linear-gradient(180deg,#E3F6EC,#C6E8D4)}
.mk-mode-sur{padding:.2em .8em;border-radius:999px;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#FBF6E9;background:#2A1740}
.mk-mode--ligne .mk-mode-sur{background:#0E6B3E}
.mk-mode-t{margin:0;font-size:.88rem;line-height:1.45}
.mk-tetes{display:flex;min-height:50px}
.mk-tetes i{display:block;width:44px;height:48px;margin-right:-10px;animation:mkTete .4s var(--ease-back) backwards;animation-delay:calc(var(--k)*60ms)}
@keyframes mkTete{from{transform:translateY(12px) scale(.6);opacity:0}}
.mk-tetes i svg{width:100%;height:100%}
.mk-lab{margin:0;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.mk-choix-nb{display:flex;flex-wrap:wrap;gap:6px}
.mk-nb{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:.35em .5em;border:0;border-radius:12px;cursor:pointer;color:#0B0E13;
  background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mk-nb b{font-family:var(--display);font-weight:800;font-size:1.2rem;line-height:1}
.mk-nb small{font-size:.56rem}
.mk-nb.on{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mk-niv{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.mk-niv-b{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:.55em .7em;border:0;border-radius:12px;cursor:pointer;text-align:left;
  color:#0B0E13;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mk-niv-b b{font-family:var(--display);font-weight:800;font-size:.9rem}
.mk-niv-b small{font-size:.66rem;line-height:1.25;color:#4A4436}
.mk-niv-b.on{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px var(--c),0 3px 0 5px #0B0E13}
.mk-go{margin-top:4px}
.mk-globe{width:84px;height:84px}
.mk-globe svg{width:100%;height:100%}
.mk-ondes path{animation:mkLueur 1.4s ease-in-out infinite}
.mk-ondes path:nth-child(2){animation-delay:.3s}
.mk-livres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.mk-livre{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 16px;border:0;border-radius:18px;
  cursor:pointer;text-align:left;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#EFE6D2);box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;
  transition:transform .18s var(--ease-back)}
.mk-livre:hover{transform:translateY(-3px) rotate(-.5deg)}
.mk-livre-ico{grid-row:1/3;width:48px;height:48px}
.mk-livre-ico svg{width:100%;height:100%}
.mk-livre b{font-family:var(--display);font-weight:800;font-size:1rem}
.mk-livre small{font-size:.74rem;color:#4A4436}
.mk-regle-b{padding:16px 18px;border-radius:18px;background:rgba(251,246,233,.06);box-shadow:inset 0 0 0 1.5px rgba(251,246,233,.16)}
.mk-regle-b > b{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.mk-regle{margin:8px 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-size:.88rem;line-height:1.45;max-width:78ch}

/* — l'ouverture d'une partie — */
.mk-intro{position:absolute;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px;
  text-align:center;border-radius:26px;background:radial-gradient(80% 70% at 50% 40%,rgba(74,42,114,.96),rgba(11,14,19,.97));animation:mkFondIn .3s ease}
.mk-intro.part{opacity:0;transform:scale(1.04);transition:opacity .4s ease,transform .4s ease}
.mk-intro-s{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#E9DDF7}
.mk-intro-l{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.mk-intro-b{display:flex;flex-direction:column;align-items:center;gap:6px;animation:mkIntroB .6s var(--ease-back) backwards;animation-delay:calc(.25s + var(--k)*.28s)}
@keyframes mkIntroB{from{transform:translateY(-60px) scale(.4) rotate(-20deg);opacity:0}}
.mk-intro-b b{display:grid;place-items:center;width:clamp(64px,14vw,96px);height:clamp(64px,14vw,96px);border-radius:50%;font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,6vw,3rem);background:var(--c);color:var(--i);box-shadow:0 0 0 4px #0B0E13,0 7px 0 4px #0B0E13}
.mk-intro-b span{font-family:var(--display);font-weight:800;color:#FBF6E9}
.mk-intro-at svg{width:clamp(64px,14vw,96px);height:clamp(64px,14vw,96px);filter:drop-shadow(0 0 16px rgba(255,206,0,.6))}
.mk-intro-p{margin:0;max-width:46ch;color:#E9DDF7;font-size:.92rem}
.mk-intro-go{animation:mkIntroB .5s var(--ease-back) 1.4s backwards}

/* ==========================================================================
   LE CARNET, LE ZOOM, LE MANUEL
   ========================================================================== */
.mk-carnet,.mk-manuel{width:min(980px,100%);height:min(88vh,860px)}
.mk-carnet-tete{display:flex;align-items:center;gap:12px}
.mk-carnet-tete p{margin:2px 0 0;font-size:.8rem;color:#4A4436}
.mk-carnet-ico{width:44px;height:44px;flex:none}
.mk-carnet-ico svg{width:100%;height:100%}
.mk-onglets{display:flex;gap:6px;flex-wrap:wrap}
.mk-onglet{padding:.45em .9em;border:0;border-radius:12px;cursor:pointer;font-family:var(--display);font-weight:800;font-size:.8rem;color:#0B0E13;
  background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mk-onglet[aria-selected="true"]{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mk-carnet-c{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:4px 4px 14px}
.mk-carnet-c.tourne{animation:mkTourne .45s var(--ease-std)}
@keyframes mkTourne{from{transform:perspective(900px) rotateY(-16deg) translateX(24px);opacity:0}}
.mk-note{margin:0;padding:10px 12px;border-radius:12px;font-size:.84rem;line-height:1.45;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13}
.mk-note--bete{background:#E3F6DA}
.mk-sec-t{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:var(--c,#2A1740);color:var(--i,#FBF6E9);box-shadow:0 0 0 2px #0B0E13}
.mk-sec-t b{font-family:var(--display);font-weight:800}
.mk-sec-t small{margin-left:auto;font-size:.7rem;opacity:.85}
.mk-sec-t .mk-pas{box-shadow:0 0 0 2px #0B0E13,0 0 0 4px #FBF6E9}
.mk-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cw),1fr));gap:12px;justify-items:center}
.mk-grille .mk-c{--cw:inherit}
.mk-c--zoom{cursor:zoom-in}
.mk-c--zoom:hover{transform:translateY(-4px) rotate(-1deg)}
.mk-spe{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:center;padding:10px;border-radius:14px;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13}
.mk-spe .mk-grille{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.mk-spe-t b{font-family:var(--display);font-weight:800;font-size:1rem}
.mk-spe-t small{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.mk-spe-t p{margin:6px 0 0;font-size:.82rem;line-height:1.45}
@media (max-width:640px){ .mk-spe{grid-template-columns:1fr} }
.mk-echelle{display:flex;flex-direction:column;gap:6px}
.mk-marche{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13}
.mk-marche-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-family:var(--display);font-weight:800;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13}
.mk-marche-vide{display:block;width:58px;aspect-ratio:100/144;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(11,14,19,.25)}
.mk-marche > div > b{font-family:var(--display);font-weight:800;font-size:.9rem}
.mk-marche > div > small{display:block;font-size:.76rem;line-height:1.35;color:#4A4436}
.mk-boucle{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;color:#FBF6E9;background:#2A1740;box-shadow:0 0 0 2px #0B0E13}
.mk-boucle b{font-family:var(--display);font-weight:800}
.mk-bareme{display:flex;flex-direction:column;gap:5px}
.mk-bar-l{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;border-radius:10px;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13;font-size:.84rem}
.mk-bar-l b{font-family:var(--display);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.mk-carnet-f{align-self:center}
.mk-zoom{width:min(640px,100%)}
.mk-zoom-in{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center}
.mk-zoom-t{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:6px}
.mk-zoom-t small{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.mk-zoom-t b{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.15}
.mk-zoom-t p{margin:0;font-size:.86rem;line-height:1.45}
.mk-zoom-mon{padding:8px 10px;border-radius:10px;background:linear-gradient(180deg,#FFF3C8,#FFE08A);box-shadow:0 0 0 2px #0B0E13}
.mk-livre-p{flex:1 1 auto;min-height:0;overflow:auto;perspective:1200px;padding:4px}
.mk-page{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:16px;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13,6px 6px 0 #D8CDB2;
  transform-origin:0 50%}
.mk-page.vole{animation:mkPage .5s var(--ease-std)}
@keyframes mkPage{from{transform:rotateY(calc(var(--sens,1)*-24deg)) translateX(calc(var(--sens,1)*30px));opacity:0}}
.mk-page h4{margin:0;font-family:var(--display);font-weight:800;font-size:1.2rem;text-transform:uppercase}
.mk-page p{margin:0;font-size:.9rem;line-height:1.5;max-width:70ch}
.mk-page > p .mk-pas{font-size:.76rem;vertical-align:-.2em}
.mk-ex{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;
  background:radial-gradient(90% 80% at 50% 45%,#2A7458,#1E5A42 60%,#10362A);box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 5px #C8952E,inset 0 0 0 7px #0B0E13}
.mk-ex-pli{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:6px 4px}
.mk-ex-c{display:flex;flex-direction:column;align-items:center;gap:4px}
.mk-ex-c > small{padding:.1em .6em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.7rem;color:#FBF6E9;background:rgba(11,14,19,.6)}
.mk-ex-c.gagne .mk-c{box-shadow:0 0 0 3px #FFCE00,0 0 22px rgba(255,206,0,.7);border-radius:8px;transform:translateY(-4px)}
.mk-ex-c.gagne > small{background:#FFCE00;color:#0B0E13}
.mk-ex-c.vole .mk-c{opacity:.35;filter:grayscale(1)}
.mk-ex-r{margin:0;align-self:center;padding:.4em 1em;border-radius:999px;text-align:center;font-family:var(--display);font-weight:800;font-size:.84rem;
  color:#0B0E13;background:#FBF6E9;box-shadow:0 0 0 2px #0B0E13}
.mk-livre-nav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mk-livre-n{font-family:var(--mono);font-size:.72rem;font-weight:700}

/* ==========================================================================
   EN LIGNE
   ========================================================================== */
.mk-salon{display:flex;flex-direction:column;gap:14px;max-width:820px;margin:0 auto}
.mk-salon-tete{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mk-salon-tete h3{margin:0;font-family:var(--display);font-weight:800;font-size:1.3rem;text-transform:uppercase}
.mk-salon-etat{margin:0;padding:.5em .9em;border-radius:12px;font-size:.86rem;background:rgba(251,246,233,.08);box-shadow:inset 0 0 0 1.5px rgba(251,246,233,.18)}
.mk-salon-etat.ok{background:rgba(62,208,122,.14)}
.mk-salon-etat.ko{background:rgba(255,107,107,.14)}
.mk-salon-aide{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:14px;border-radius:16px;background:rgba(251,246,233,.06)}
.mk-salon-aide p{margin:0;max-width:64ch;line-height:1.5}
.mk-champ{display:flex;flex-direction:column;gap:6px;max-width:360px}
.mk-champ span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.mk-input{padding:.6em .8em;border:0;border-radius:12px;font:inherit;font-size:1rem;color:#0B0E13;background:#FBF6E9;box-shadow:0 0 0 2.5px #0B0E13}
.mk-input:focus-visible{outline:3px solid #FFCE00;outline-offset:2px}
.mk-input--code{width:7.5ch;font-family:var(--display);font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.mk-salon-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.mk-salon-b{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:20px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE6D2);box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.mk-salon-b > b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.mk-salon-b p{margin:0;font-size:.84rem;line-height:1.45}
.mk-code-l{display:flex;gap:8px}
.mk-tables{display:flex;flex-direction:column;gap:6px;width:100%}
.mk-vide{margin:0;font-size:.8rem;opacity:.7}
.mk-table-l{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:.5em .8em;border:0;border-radius:12px;cursor:pointer;text-align:left;
  color:#0B0E13;background:#FFFDF6;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mk-table-l b{font-family:var(--display);font-weight:800;letter-spacing:.14em}
.mk-table-l small{font-size:.7rem;opacity:.7}
.mk-code-grand{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px;border-radius:20px;text-align:center;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mk-code-grand small{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.mk-code-grand b{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,10vw,4rem);letter-spacing:.24em;line-height:1}
.mk-code-grand span{font-size:.8rem}
.mk-places{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mk-place{display:flex;flex-direction:column;align-items:center;gap:2px;width:108px;padding:10px 6px;border-radius:16px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC8);box-shadow:var(--mk-ombre);animation:mkTete .4s var(--ease-back)}
.mk-place.moi{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 4px 0 5px #0B0E13}
.mk-place-av{display:block;width:48px;height:52px}
.mk-place-av svg{width:100%;height:100%}
.mk-place b{font-family:var(--display);font-weight:800;font-size:.84rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-place small{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7}

/* ==========================================================================
   SUR UN TÉLÉPHONE
   ========================================================================== */
/* — les boutons, dessinés comme le reste de la table — */
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn{border:0;border-radius:14px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;font-weight:800}
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn--solid{background:linear-gradient(180deg,#FFE88A,#FFCE00);color:#0B0E13}
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn--danger{background:linear-gradient(180deg,#FF8A8A,#E3051C);color:#fff}
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn--ghost{background:rgba(251,246,233,.1);color:#FBF6E9;box-shadow:inset 0 0 0 2px rgba(251,246,233,.35)}
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn:hover{transform:translateY(-2px)}
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
:is(.mk-menu,.mk-panneau,.mk-modal,.mk-salon,.mk-intro) .btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.mk-mode--ligne .mk-go{background:linear-gradient(180deg,#9BE8BC,#3ED07A)}
.mk-panneau .btn--ghost,.mk-modal .btn--ghost{color:#0B0E13;background:#FFFDF6;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}

@media (max-width:760px){
  .mk-jeu{height:calc(100dvh - 104px);min-height:520px;gap:6px;padding:6px 6px 8px;border-radius:18px}
  .mk-b span,.mk-leg em{display:none}
  .mk-hud{gap:4px}
  .mk-b{padding:.3em;border-radius:10px}
  .mk-b svg{width:16px;height:16px}
  .mk-leg{padding:0;background:none;box-shadow:none}
  .mk-legende{gap:3px}
  .mk-leg .mk-pas{font-size:.7rem}
  .mk-leg--at svg{width:18px;height:18px}
  .mk-manche{padding:.2em .5em .3em;column-gap:3px}
  .mk-manche small{display:none}
  .mk-manche b{font-size:1rem}
  .mk-dots i{width:5px;height:5px}
  .mk-adv{gap:5px}
  .mk-siege{grid-template-columns:auto 1fr auto;grid-template-areas:"av t pari" "jet jet jet";padding:4px 5px 5px;column-gap:4px;border-radius:12px}
  .mk-siege .mk-av{width:26px;height:29px}
  .mk-siege-t b{font-size:.66rem}
  .mk-siege-t small{font-size:.46rem}
  .mk-fan{display:none}
  .mk-cpt{bottom:auto;top:-8px;right:4px}
  .mk-adv[style*="--n:4"] .mk-siege-t small,.mk-adv[style*="--n:5"] .mk-siege-t small{display:none}
  .mk-adv[style*="--n:4"] .mk-av,.mk-adv[style*="--n:5"] .mk-av{display:none}
  .mk-pari{min-width:24px;height:24px;font-size:.8rem}
  .mk-jetons{justify-content:flex-start;max-width:none}
  .mk-jetons i{width:8px;height:8px}
  .mk-moi{padding:4px 8px 4px 4px;gap:6px}
  .mk-moi .mk-av{width:26px;height:29px}
  .mk-moi-etat{font-size:.72rem}
  .mk-info-b{font-size:.62rem;padding:.16em .5em}
  .mk-info-b small{display:none}
  .mk-msg{font-size:.68rem;bottom:6px}
  .mk-slot-lab{font-size:.56rem}
  .mk-slot-av{display:none}
  .mk-bil-l{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr)) 0 0 minmax(0,.8fr);font-size:.7rem}
  .mk-bil-l > :nth-child(5),.mk-bil-l > :nth-child(6){display:none}
  .mk-choix{width:260px}
}
@media (max-height:560px){
  .mk-jeu{height:calc(100dvh - 60px);min-height:0;grid-template-rows:auto auto minmax(120px,1fr) auto auto}
  .mk-siege .mk-av{width:24px;height:26px}
  .mk-fan{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mk-feutre{transition:none;transform:none}
  .mk-main .mk-c,.mk-titre span,.mk-orbite .mk-c,.mk-pari.attend,.mk-pense i,.mk-slot.gagnant .mk-slot-place::after{animation:none!important}
}
@media (max-width:420px){ .mk-leg--at{display:none} .mk-manche span{display:none} }

/* ==========================================================================
   RETOUCHES — bandeau, chrono du pari, pouvoirs des Filous, victoires
   ========================================================================== */
.mk-hud-b{flex:none;display:flex;align-items:center;gap:8px}
.mk-c--neuve::before{content:"";position:absolute;inset:-4px;z-index:6;border-radius:calc(var(--cw)*.1);pointer-events:none;
  box-shadow:0 0 0 3px #FF8A8A,0 0 18px rgba(255,138,138,.7)}
.mk-badge--neuve{background:#FF8A8A;color:#3A0610;top:auto;bottom:-10px}
.mk-mise{flex:none;padding:.12em .5em;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.66rem;white-space:nowrap;
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mk-siege .mk-mise{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:3}

/* — le chrono du pari — */
.mk-pan-tete{display:flex;align-items:center;gap:14px;text-align:left;width:100%}
.mk-pan-tete>div:not(.mk-chrono){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mk-chrono{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:84px}
.mk-chrono-s{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}
.mk-chrono-r{display:block;width:100%;height:10px;border-radius:999px;overflow:hidden;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mk-chrono-j{display:block;height:100%;transform-origin:0 50%;background:repeating-linear-gradient(90deg,#3ED07A 0 10px,#2FB866 10px 14px)}
.mk-chrono.urgent .mk-chrono-s{color:#E3051C;animation:mkClin .5s ease-in-out infinite}
.mk-chrono.urgent .mk-chrono-j{background:repeating-linear-gradient(90deg,#FF6B6B 0 10px,#E3051C 10px 14px)}

/* — le panneau des pouvoirs — */
.mk-panneau--pouvoir{width:min(640px,96%);background:radial-gradient(120% 80% at 50% 0%,#FFE3E3,#FBF6E9 55%,#EFE6D2)}
.mk-pv-tete{align-items:flex-start}
.mk-pv-carte{flex:none;line-height:0}
.mk-pv-carte .mk-c{--cw:78px}
.mk-pv-choix{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}
.mk-pv-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:104px;min-height:58px;padding:8px 14px;
  border:0;border-radius:16px;cursor:pointer;font:inherit;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transition:transform .15s var(--ease-back)}
.mk-pv-b b{font-family:var(--display);font-weight:800;font-size:1rem}
.mk-pv-b small{font-size:.68rem;color:#4A4436}
.mk-pv-b:hover{transform:translateY(-3px)}
.mk-pv-b:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mk-pv-b:disabled{opacity:.45;cursor:not-allowed;transform:none}
.mk-pv-b.doux{background:#FFFDF6}
.mk-pv-b.moi{background:linear-gradient(180deg,#C6F2D8,#7EE3A8)}
.mk-pv-b.plein{width:100%;min-height:48px}
.mk-pv-av{display:block;width:34px;height:37px;line-height:0}
.mk-pv-av svg{width:100%;height:100%}
.mk-pv-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;width:100%;max-height:min(40vh,300px);
  overflow:auto;padding:12px 6px;border-radius:14px;background:rgba(11,14,19,.06);box-shadow:inset 0 0 0 2px rgba(11,14,19,.12)}
.mk-pv-cartes .mk-c{--cw:100%;width:100%}
.mk-pv-cartes--main{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.mk-pv-cartes--main .mk-c{cursor:pointer;transition:transform .15s var(--ease-back)}
.mk-c--def{transform:translateY(-6px) rotate(-3deg)}
.mk-c--def::after{content:"✕";position:absolute;inset:0;z-index:7;display:grid;place-items:center;border-radius:calc(var(--cw)*.1);
  font-family:var(--display);font-weight:800;font-size:2rem;color:#fff;background:rgba(227,5,28,.55);box-shadow:0 0 0 3px #E3051C}

/* — l'avis de recherche d'un Filou — */
.mk-fx-avis{z-index:12;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(250px,70%);padding:14px 16px 16px;border-radius:14px;
  text-align:center;color:#3A2A18;background:linear-gradient(180deg,#F6E7C1,#E9D29B);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.55)}
.mk-fx-avis small{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#8E0C1E}
.mk-fx-avis-c{line-height:0;margin:4px 0}
.mk-fx-avis-c .mk-c{--cw:92px}
.mk-fx-avis b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.05}
.mk-fx-avis em{font-style:normal;font-weight:800;color:#8E0C1E}
.mk-fx-avis span:last-child{font-size:.76rem}

/* — le crâne du Roi — */
.mk-fx-tete{z-index:6;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6))}
.mk-fx-tete>div{position:absolute;left:0;width:100%;line-height:0}
.mk-fx-tete svg{display:block;width:100%;height:auto}
.mk-fx-tete-c{top:-22%;left:24%!important;width:52%!important}
.mk-fx-tete-h{top:0;z-index:2}
.mk-fx-tete-b{top:68%;z-index:1;transform-origin:50% 0}
.mk-fx-oeil{animation:mkOeil .9s ease-in-out infinite alternate}
@keyframes mkOeil{from{fill:#C79BFF}to{fill:#FF4FD8}}
.mk-fx-eau--forte{z-index:4;background:linear-gradient(180deg,rgba(127,227,220,.75),rgba(14,110,130,.95))}
.mk-fx-amende .mk-fx-tampon{font-size:clamp(1.1rem,3vw,1.7rem)}
.mk-fx-titre--haut{top:18%}

@media (max-width:760px){
  .mk-hud{flex-wrap:wrap;overflow:visible;row-gap:6px}
  .mk-hud-sp{display:none}
  .mk-hud-b{order:3;width:100%;justify-content:space-between;gap:6px}
  .mk-hud-b .mk-b{flex:1 1 0;justify-content:center;min-height:38px;padding:.35em .2em}
  .mk-hud-b .mk-b svg{width:21px;height:21px}
  .mk-chrono{width:66px}
  .mk-chrono-s{font-size:1.5rem}
  .mk-pv-b{min-width:88px}
  .mk-pv-carte .mk-c{--cw:60px}
}
.mk-pouvoirs{margin:6px 0 10px;padding:0;list-style:none;display:grid;gap:8px;text-align:left}
.mk-pouvoirs li{display:grid;gap:2px;padding:8px 12px;border-radius:12px;background:#FFF1EF;box-shadow:inset 4px 0 0 #E3051C,0 0 0 2px #0B0E13}
.mk-pouvoirs b{font-family:var(--display);font-weight:800;color:#9E0F22}
.mk-pouvoirs span{font-size:.84rem;line-height:1.4;color:#2A2520}

/* @@ fin metroking.css @@ */
/* @@ debut runner_skins.css @@ */
/* ==========================================================================
   METRO RUNNER — tenues, vestiaire, course : les styles
   ========================================================================== */
/* le badge des nouveautés du vestiaire */
.rnx-neuf{position:absolute;right:8px;top:8px;z-index:3;padding:.34em .7em;border-radius:999px;line-height:1;
  font-family:var(--mono);font-size:.56rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#0B0E13;background:linear-gradient(90deg,#C6FF3D,#3ED0F0,#C6FF3D);background-size:200% 100%;
  box-shadow:0 0 0 2px #0B0E13;animation:rnxNeuf 2.4s linear infinite}
.rnx-neuf.refaite{background:linear-gradient(90deg,#B08CFF,#8FF4FF,#FFFFFF,#B08CFF);background-size:200% 100%}
@keyframes rnxNeuf{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .rnx-neuf{animation:none} }

/* — pendant une course, la bannière se replie et la scène prend l'écran — */
.view.rnx-course .ap-ban,.view.rnx-course .ap-mascotte{display:none}
.view.rnx-course > .wrap > .section{padding-top:6px!important;padding-bottom:0!important}
.view.rnx-course .ap-cadre{margin-top:4px!important}
.view.rnx-course .rn-scene:not(.rn-plein-css):not(:fullscreen){height:min(calc(100dvh - 104px),860px)!important;min-height:320px}

/* — le départ : les portes de la rame s'ouvrent — */
.rnx-portes{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.rnx-porte{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(180deg,#E9EEF3,#C3CCD6);
  box-shadow:inset 0 0 0 4px #0B0E13;animation:rnxPorte 1.1s cubic-bezier(.7,0,.3,1) .45s forwards}
.rnx-porte--g{left:0;border-right:6px solid #0B0E13}
.rnx-porte--d{right:0;border-left:6px solid #0B0E13;--sens:1}
.rnx-porte--g{--sens:-1}
.rnx-vitre{position:absolute;left:18%;right:18%;top:14%;height:40%;border-radius:18px;background:linear-gradient(160deg,#9FD4F5,#3E6E96);
  box-shadow:0 0 0 5px #0B0E13,inset 0 -18px 30px rgba(11,14,19,.25)}
.rnx-poignee{position:absolute;top:58%;width:10px;height:22%;border-radius:6px;background:#FFCE00;box-shadow:0 0 0 3px #0B0E13}
.rnx-porte--g .rnx-poignee{right:12px}.rnx-porte--d .rnx-poignee{left:12px}
.rnx-depart{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%);z-index:2;white-space:nowrap;
  padding:.5em 1em;border-radius:999px;background:#0B0E13;color:#FFCE00;font-family:var(--display);font-weight:900;
  font-size:clamp(.8rem,2.4vw,1.2rem);letter-spacing:.04em;animation:rnxDepart 1.5s ease forwards}
@keyframes rnxPorte{to{transform:translateX(calc(var(--sens) * 104%))}}
@keyframes rnxDepart{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(-50%,-90%)}}

/* — les tickets qui volent jusqu'au compteur — */
.rnx-vole{position:absolute;z-index:25;width:30px;height:22px;margin:-11px 0 0 -15px;pointer-events:none;
  animation:rnxVole .8s cubic-bezier(.5,0,.3,1) both}
.rnx-vole svg{width:100%;height:100%;display:block}
@keyframes rnxVole{0%{transform:translate(0,0) scale(.4) rotate(0);opacity:0}
  15%{transform:translate(calc(var(--bx)*.5),-30px) scale(1.2) rotate(-20deg);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.5) rotate(20deg);opacity:.2}}

/* — un cœur perdu se brise en deux — */
.rnx-demi{position:absolute;z-index:26;width:13px;height:24px;margin:-12px 0 0 -6px;pointer-events:none;background:#E3051C;
  box-shadow:0 0 0 2px #0B0E13;animation:rnxDemi .85s ease-in forwards}
.rnx-demi--g{border-radius:12px 0 0 12px;--r:-40deg;--x:-26px}
.rnx-demi--d{border-radius:0 12px 12px 0;margin-left:1px;--r:40deg;--x:26px}
@keyframes rnxDemi{0%{transform:none}30%{transform:translate(calc(var(--x)*.4),-14px) rotate(calc(var(--r)*.5))}
  100%{transform:translate(var(--x),60px) rotate(var(--r));opacity:0}}

/* — les compteurs qui sautent — */
.rn-score.rnx-pop{animation:rnxPop .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes rnxPop{40%{transform:scale(1.18)}}

/* — la fin de service — */
.rnx-fin{position:absolute;inset:0;z-index:40;display:grid;place-content:center;justify-items:center;gap:6px;pointer-events:none;
  background:radial-gradient(circle,rgba(11,14,19,.35),rgba(11,14,19,.8));animation:rnxFinFond .8s ease both}
.rnx-fin b{padding:.25em .7em;border:6px solid #E3051C;border-radius:14px;color:#E3051C;background:#FFF6E6;
  font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,6vw,3.2rem);text-transform:uppercase;letter-spacing:.04em;
  transform:rotate(-8deg);box-shadow:0 0 0 4px #0B0E13;animation:rnxTampon .5s cubic-bezier(.3,1.6,.5,1) .1s both}
.rnx-fin small{color:#fff;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;animation:rnxFinFond .6s ease .35s both}
@keyframes rnxFinFond{from{opacity:0}}
@keyframes rnxTampon{from{transform:rotate(-8deg) scale(2.6);opacity:0}}

/* — la phase de vitesse qui change — */
.rnx-phase{position:absolute;left:50%;bottom:16px;z-index:24;display:flex;align-items:center;gap:8px;padding:.45em .9em .45em .5em;
  border-radius:999px;background:#0B0E13;color:#fff;box-shadow:0 0 0 3px #FFCE00;pointer-events:none;
  animation:rnxPhase 2.6s cubic-bezier(.3,1.3,.5,1) forwards}
.rnx-phase i{width:22px;height:22px;display:grid}.rnx-phase i svg{width:100%;height:100%}
.rnx-phase b{font-family:var(--display);font-weight:900;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em}
.rnx-phase small{font-family:var(--mono);font-size:.6rem;color:#FFCE00;text-transform:uppercase;letter-spacing:.1em}
@keyframes rnxPhase{0%{transform:translate(-50%,160%)}12%{transform:translate(-50%,0)}85%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,40%);opacity:0}}

/* — téléphone : consigne, onde sous le doigt, panneau des stations — */
.rnx-aide{position:absolute;left:50%;bottom:22px;z-index:24;transform:translateX(-50%);display:flex;align-items:center;gap:10px;
  padding:.5em .8em;border-radius:999px;background:rgba(11,14,19,.86);color:#fff;pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-size:.78rem;box-shadow:0 0 0 2px rgba(255,255,255,.35);animation:rnxAide 4.2s ease forwards}
.rnx-aide span{width:20px;height:20px;color:#FFCE00;display:grid}.rnx-aide span svg{width:100%;height:100%}
.rnx-aide-g{animation:rnxFlecheG .8s ease-in-out infinite alternate}.rnx-aide-d{animation:rnxFlecheD .8s ease-in-out infinite alternate}
@keyframes rnxAide{0%{opacity:0;transform:translate(-50%,20px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@keyframes rnxFlecheG{to{transform:translateX(-5px)}}@keyframes rnxFlecheD{to{transform:translateX(5px)}}
.rnx-onde{position:absolute;z-index:23;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;
  border:4px solid rgba(255,255,255,.85);animation:rnxOnde .5s ease-out forwards}
@keyframes rnxOnde{from{transform:scale(.25);opacity:1}to{transform:scale(1.4);opacity:0}}
.rnx-panneau{position:absolute;left:8px;right:8px;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:22;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:5px;border-radius:14px;background:rgba(11,14,19,.82);
  box-shadow:0 0 0 2px #0B0E13,0 6px 18px rgba(0,0,0,.35);pointer-events:none;opacity:0;transform:translateY(-8px);
  transition:opacity .2s,transform .2s}
.rnx-panneau.on{opacity:calc(.55 + var(--proche,0) * .45);transform:none}
.rnx-panneau::after{content:"";position:absolute;left:10px;bottom:2px;height:3px;border-radius:2px;background:#FFCE00;
  width:calc((100% - 20px) * var(--proche,0))}
.rnx-pan-c{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;padding:.42em .3em .5em;border-radius:9px;
  background:#153E8C;border-bottom:4px solid var(--c);color:#fff;text-align:center;min-height:2.6em}
.rnx-pan-c b{font-family:var(--display);font-weight:800;font-size:clamp(.66rem,3.3vw,.9rem);line-height:1.08;overflow-wrap:anywhere}
.rnx-pan-c.bon{background:#6A4A00;box-shadow:inset 0 0 0 2px #FFCE00}
.rnx-pan-c.spec{background:#4A1F78}
.rnx-pan-past{width:1.7em;height:1.7em;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-family:var(--display);font-weight:900;font-size:.72rem;box-shadow:0 0 0 2px #fff}
.rn-scene.rn-plein-css .rnx-panneau,.rn-scene:fullscreen .rnx-panneau{top:calc(env(safe-area-inset-top,0px) + 66px)}
@media (prefers-reduced-motion:reduce){
  .rnx-porte,.rnx-depart,.rnx-vole,.rnx-demi,.rn-score.rnx-pop,.rnx-phase,.rnx-aide,.rnx-onde,.rnx-fin,.rnx-fin b{animation:none}
  .rnx-portes{display:none}
}
/* en plein écran sur téléphone, la jauge du terminus passe sous le panneau */
.rn-scene.rn-plein-css:has(.rnx-panneau.on) .rn-but,.rn-scene:fullscreen:has(.rnx-panneau.on) .rn-but{top:calc(env(safe-area-inset-top,0px) + 140px)}

/* @@ fin runner_skins.css @@ */

/* ==========================================================================
   MÉTRODROP — LES BONUS : DES PICTOGRAMMES, ET DU SPECTACLE
   ========================================================================== */
/* — sur la pièce : le pictogramme au centre, le numéro dans le coin — */
.md-tile .md-bonus{position:absolute;inset:9%;z-index:3;display:block;pointer-events:none;
  filter:drop-shadow(0 2px 0 rgba(11,14,19,.6))}
.md-tile .md-bonus svg{display:block;width:100%;height:100%;overflow:visible}
.md-tile .md-bonus.v svg{transform:rotate(-90deg)}
/* le numéro de la ligne devient une petite pastille, en bas à droite */
.md-tile.md-rame .md-face span,.md-tile.md-corr .md-face span,.md-tile.md-auto .md-face span{
  position:absolute;right:-6%;bottom:-6%;z-index:4;display:grid;place-items:center;width:44%;height:44%;
  border-radius:50%;font-size:.46em;line-height:1;color:var(--li,#fff);background:var(--lc,#0064B0);
  box-shadow:0 0 0 1.6px #0B0E13;text-shadow:none!important}
.md-tile .md-bonus{inset:4%}
.md-tile.md-auto .md-face::before{display:none!important}
.md-tile.md-auto::after{background:conic-gradient(#FFB800,#FFF3B0,#FFB800,#FF8A00,#FFB800);animation:mdOrTourne 2.4s linear infinite}
@keyframes mdOrTourne{to{transform:rotate(360deg)}}
.md-bonus--rame svg{animation:mdBnRoule .9s ease-in-out infinite alternate}
.md-bonus--rame .md-bn-vit{animation:mdBnVit .45s steps(2) infinite}
@keyframes mdBnRoule{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
.md-tile .md-bonus--rame.v svg{animation:mdBnRouleV .9s ease-in-out infinite alternate}
@keyframes mdBnRouleV{from{transform:rotate(-90deg) translateX(-5%)}to{transform:rotate(-90deg) translateX(5%)}}
@keyframes mdBnVit{50%{opacity:.35}}
.md-bonus--corr svg{animation:mdBnCorr 2.2s ease-in-out infinite}
@keyframes mdBnCorr{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(45deg)}}
.md-bonus--auto .md-bn-soleil{transform-box:fill-box;transform-origin:center;animation:mdBnSoleil 5s linear infinite}
@keyframes mdBnSoleil{to{transform:rotate(360deg)}}
.md-bonus--auto svg{animation:mdBnPulse 1.4s ease-in-out infinite}
@keyframes mdBnPulse{50%{transform:scale(1.07)}}
/* un bonus qui naît : il arrive en tournant, dans un éclat */
.md-tile.md-pop .md-bonus{animation:mdBonusNe .7s cubic-bezier(.2,1.5,.4,1) both}
@keyframes mdBonusNe{0%{transform:scale(0) rotate(-200deg);opacity:0}100%{transform:none;opacity:1}}
.md-tile.md-pop .md-face::after{content:"";position:absolute;inset:-30%;border-radius:50%;z-index:5;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,230,120,.6) 35%,transparent 70%);
  animation:mdBonusEclat .6s ease-out both}
@keyframes mdBonusEclat{from{transform:scale(.2);opacity:1}to{transform:scale(1.4);opacity:0}}

/* — les objets : dans le coin, qui se balancent — */
.md-tile .md-objet{right:-8%;top:-10%;width:56%;height:56%;font-size:0;z-index:5;
  filter:drop-shadow(0 2px 0 rgba(11,14,19,.55))}
.md-tile .md-objet svg{display:block;width:100%;height:100%;overflow:visible}
.md-objet--lampe .md-bn-halo{animation:mdHalo 1.5s ease-in-out infinite}
@keyframes mdHalo{50%{opacity:.15;transform:scale(1.2)}}
.md-objet--lampe .md-bn-halo{transform-box:fill-box;transform-origin:center}

/* — la couche des effets — */
.md-fxb{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:inherit}
.md-fx-rayon{position:absolute;border-radius:999px;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c) 75%,transparent) 20%,#FFFFFF 50%,
    color-mix(in srgb,var(--c) 75%,transparent) 80%,transparent);
  box-shadow:0 0 22px 8px color-mix(in srgb,var(--c) 55%,transparent)}
.md-fx-rayon.v{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 75%,transparent) 20%,#FFFFFF 50%,
    color-mix(in srgb,var(--c) 75%,transparent) 80%,transparent)}
.md-fx-rame{position:absolute;z-index:2;filter:drop-shadow(0 0 10px #FFFFFF) drop-shadow(0 3px 0 #0B0E13)}
.md-fx-rame svg{display:block;width:100%;height:100%;overflow:visible}
.md-fx-rame.g svg{transform:scaleX(-1)}
.md-fx-rame.v svg{transform:rotate(90deg)}
.md-fx-rame.v.g svg{transform:rotate(-90deg)}
.md-fx-flash{position:absolute;inset:0;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(circle at 50% 50%,#FFFFFF 0,color-mix(in srgb,var(--c) 70%,transparent) 38%,transparent 75%)}
.md-fx-flash.fort{background:radial-gradient(circle at 50% 50%,#FFFFFF 0,#FFE27A 20%,var(--c) 50%,transparent 85%)}
.md-fx-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3}
.md-fx-svg path{stroke-dasharray:900;stroke-dashoffset:900;animation:mdEclairTrace .75s ease-out forwards}
@keyframes mdEclairTrace{0%{stroke-dashoffset:900;opacity:1}40%{stroke-dashoffset:0;opacity:1}70%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.md-fx-soleil{position:absolute;width:170px;height:170px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#FFE27A 0 10deg,transparent 10deg 26deg);
  -webkit-mask:radial-gradient(circle,#000 22%,transparent 70%);mask:radial-gradient(circle,#000 22%,transparent 70%)}
.md-fx-anneau{position:absolute;width:48px;height:48px;border-radius:50%;border:5px solid var(--c);
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 2.5px #0B0E13,0 0 22px 4px var(--c)}
.md-fx-sym{position:absolute;z-index:4;font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:#FFFFFF;
  -webkit-text-stroke:2.5px #0B0E13;paint-order:stroke;text-shadow:0 4px 0 #0B0E13}
.md-fx-ban{position:absolute;left:50%;top:50%;z-index:5;padding:.28em .9em .34em;border-radius:14px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:clamp(1rem,5vw,1.5rem);text-transform:uppercase;color:#FFFFFF;
  background:var(--c);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 0 40px 10px rgba(255,226,122,.7);
  text-shadow:0 2px 0 #0B0E13}
.md-fx-objet{position:absolute;z-index:9;filter:drop-shadow(0 0 12px #FFE27A) drop-shadow(0 3px 0 #0B0E13)}
.md-fx-objet svg{display:block;width:100%;height:100%;overflow:visible}
.md-tile.md-touche .md-face{filter:brightness(1.9) saturate(.3);transition:filter .12s}
.md-tile.md-charge .md-face{animation:mdCharge .22s ease-in-out 3}
@keyframes mdCharge{50%{transform:scale(1.18) rotate(-6deg);filter:brightness(1.6)}}
.md-board.md-secoue{animation:mdSecoue .45s ease}
.md-board.md-secoue-fort{animation:mdSecoueFort .7s ease}
@keyframes mdSecoue{20%{translate:-4px 2px}40%{translate:4px -2px}60%{translate:-2px 1px}80%{translate:2px 0}}
@keyframes mdSecoueFort{10%{translate:-8px 4px;scale:1.02}25%{translate:7px -5px}40%{translate:-6px 3px}55%{translate:5px -2px}
  70%{translate:-3px 1px;scale:1}85%{translate:2px 0}}

/* — la rame express de l'automatique : une vraie rame et sa traînée — */
.md-express{left:0!important;right:0;width:auto!important;border-radius:0!important;background:none!important;overflow:visible;z-index:9;
  box-shadow:none!important;opacity:1!important}
.md-express::before{content:"";position:absolute;left:0;top:28%;height:44%;width:0;border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--c) 40%,#FFFFFF);box-shadow:0 0 18px 6px color-mix(in srgb,var(--c) 60%,transparent)}
.md-express-train{position:absolute;left:0;top:-18%;height:136%;aspect-ratio:1/1;display:block;transform:translateX(-120%);
  filter:drop-shadow(0 0 12px #FFFFFF) drop-shadow(0 3px 0 #0B0E13)}
.md-express-train svg{display:block;width:100%;height:100%;overflow:visible}
.md-express.go{animation:none!important}
.md-express.go::before{animation:mdExpressTrainee .85s cubic-bezier(.45,0,.6,1) forwards}
.md-express.go .md-express-train{animation:mdExpressTrain .85s cubic-bezier(.45,0,.6,1) forwards}
@keyframes mdExpressTrain{to{left:100%;transform:translateX(20%)}}
@keyframes mdExpressTrainee{0%{width:0;opacity:1}75%{width:100%;opacity:1}100%{width:100%;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .md-bonus svg,.md-bonus .md-bn-soleil,.md-bonus .md-bn-vit,.md-objet--lampe .md-bn-halo{animation:none!important}
}

/* ==========================================================================
   MÉTRODROP — LA MONTÉE EN CABINE, ET LE PUPITRE QUI S'ALLUME
   ========================================================================== */
.mdx-embarque{position:absolute;inset:0;z-index:30;overflow:hidden;background:#0B0E13;pointer-events:none}
.mdx-embarque svg{display:block;width:100%;height:100%;transform-origin:66% 55%;
  transition:transform .75s cubic-bezier(.5,0,.8,.4),filter .75s ease}
.mdx-embarque .mdx-emb-cond{transform:translateX(90px);animation:mdxEmbMarche 1.5s cubic-bezier(.3,.1,.4,1) forwards}
@keyframes mdxEmbMarche{to{transform:translateX(266px)}}
.mdx-embarque .mdx-emb-porte{transition:transform .55s cubic-bezier(.4,0,.2,1)}
.mdx-embarque.porte .mdx-emb-porte{transform:translateX(-56px)}
.mdx-embarque.porte .mdx-emb-cond{animation:mdxEmbMarche 1.5s cubic-bezier(.3,.1,.4,1) forwards,mdxEmbEntre .5s ease-in .55s forwards}
@keyframes mdxEmbEntre{to{opacity:0;filter:brightness(.3)}}
.mdx-embarque.entre svg{transform:scale(5.5);filter:brightness(.15)}
.mdx-embarque.fin{transition:opacity .6s ease;opacity:0}
.mdx-embarque .mdx-emb-rame{animation:mdxEmbRespire 2.4s ease-in-out infinite}
@keyframes mdxEmbRespire{50%{transform:translateY(.8px)}}
/* le pupitre, éteint pendant la montée, puis qui s'allume voyant par voyant */
.mdx-cab.mdx-allumage .mdx-tb,.mdx-cab.mdx-allumage .mdx-jauges,.mdx-cab.mdx-allumage .mdx-manche{filter:brightness(.3) saturate(.2)}
.mdx-cab.mdx-allume .mdx-tb > *,.mdx-cab.mdx-allume .mdx-jauges,.mdx-cab.mdx-allume .mdx-manche > *{
  animation:mdxAllume .8s steps(1,end) backwards}
.mdx-cab.mdx-allume .mdx-tb > :nth-child(2){animation-delay:.12s}
.mdx-cab.mdx-allume .mdx-tb > :nth-child(3){animation-delay:.24s}
.mdx-cab.mdx-allume .mdx-tb > :nth-child(4){animation-delay:.36s}
.mdx-cab.mdx-allume .mdx-jauges{animation-delay:.3s}
.mdx-cab.mdx-allume .mdx-manche > :nth-child(1){animation-delay:.4s}
.mdx-cab.mdx-allume .mdx-manche > :nth-child(2){animation-delay:.48s}
.mdx-cab.mdx-allume .mdx-manche > :nth-child(3){animation-delay:.56s}
.mdx-cab.mdx-allume .mdx-manche > :nth-child(4){animation-delay:.64s}
@keyframes mdxAllume{0%{filter:brightness(.3) saturate(.2)}20%{filter:brightness(1.4)}35%{filter:brightness(.4)}
  55%{filter:brightness(1.2)}100%{filter:none}}
.mdx-cab.mdx-allume .mdx-aig{animation:mdxBalaye .95s cubic-bezier(.4,0,.3,1) .2s backwards}
@keyframes mdxBalaye{0%{transform:rotate(-90deg)}55%{transform:rotate(90deg)}100%{transform:rotate(var(--a,-90deg))}}
/* le bandeau du pare-brise : discret, et absent quand il n'a rien à dire */
.mdx-route{transition:opacity .45s ease,translate .45s ease;font-size:.66rem!important;padding:5px 13px!important;opacity:.94}
.mdx-route.cache{opacity:0;translate:0 -8px}
@media (prefers-reduced-motion:reduce){ .mdx-embarque{display:none} }

/* ==========================================================================
   MÉTRODROP — LE PLATEAU PREND VIE
   ========================================================================== */
/* une pièce qui saute : elle gonfle, flashe, puis s'éteint en tournant */
.md-tile.md-gone .md-face{transition:none;animation:mdSaute .3s ease-in forwards}
@keyframes mdSaute{0%{transform:scale(1)}35%{transform:scale(1.28) rotate(-8deg);filter:brightness(2.2) saturate(.4)}
  100%{transform:scale(0) rotate(120deg);opacity:0;filter:brightness(2.6)}}
/* les pièces tombent et rebondissent en se posant */
.md-tile{transition:transform .34s cubic-bezier(.34,1.42,.64,1)}
/* les éclats : cernés, de trois formes, et ils retombent */
.md-part{width:8px;height:8px;margin:-4px 0 0 -4px;box-shadow:0 0 0 1.4px #0B0E13;
  animation:mdPartGrav .8s cubic-bezier(.2,.7,.4,1) forwards}
.md-part--1{border-radius:50%}
.md-part--2{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:0;box-shadow:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  filter:drop-shadow(0 0 1px #0B0E13)}
@keyframes mdPartGrav{0%{opacity:1;transform:translate(0,0) scale(1.2) rotate(0)}
  55%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg)}
  100%{opacity:0;transform:translate(calc(var(--dx) * 1.15),calc(var(--dy) + 26px)) scale(.4) rotate(300deg)}}
/* l'onde : deux anneaux cernés */
.md-onde{border-width:3px;box-shadow:0 0 0 1.5px #0B0E13,inset 0 0 0 1.5px #0B0E13;animation:mdOnde2 .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes mdOnde2{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(6)}}
/* les points : de gros chiffres cartoon qui montent */
.md-gain{font-family:var(--display);font-weight:800;font-size:1.35rem;color:#FFCE00;
  -webkit-text-stroke:2.4px #0B0E13;paint-order:stroke;text-shadow:0 3px 0 #0B0E13;
  animation:mdGain2 1.05s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes mdGain2{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-10deg)}
  20%{opacity:1;transform:translate(-50%,-80%) scale(1.25) rotate(4deg)}
  45%{transform:translate(-50%,-110%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-210%) scale(.9)}}
/* le badge de cascade : un vrai badge, qui crie plus fort à chaque palier */
.md-combo{padding:.32em .95em .38em;color:#0B0E13!important;background:#FFFFFF!important;border-radius:14px!important;
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13!important;text-transform:uppercase;letter-spacing:.02em;
  animation:mdComboPop .95s cubic-bezier(.2,1.4,.4,1) forwards!important}
.md-combo.n2{background:#8FE0B4!important}
.md-combo.n3{background:#FFCE00!important;font-size:1.35rem}
.md-combo.n4{background:#FF9A3D!important;font-size:1.6rem}
.md-combo.n5{color:#FFFFFF!important;background:linear-gradient(90deg,#E3051C,#662483)!important;font-size:1.85rem;
  text-shadow:0 2px 0 #0B0E13}
@keyframes mdComboPop{0%{opacity:0;transform:translateX(-50%) scale(.2) rotate(-14deg)}
  25%{opacity:1;transform:translateX(-50%) scale(1.18) rotate(4deg)}
  40%{transform:translateX(-50%) scale(1) rotate(-2deg)}
  80%{opacity:1;transform:translateX(-50%) scale(1) rotate(-2deg)}
  100%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.9)}}
@media (prefers-reduced-motion:reduce){ .md-tile{transition:none} .md-gain,.md-combo{animation:none!important} }

/* ==========================================================================
   LISTES À RÉORDONNER — l'appui long ne sélectionne plus le texte
   ========================================================================== */
.sortrow,.sortrow *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sortrow{-webkit-tap-highlight-color:transparent}
.sortrow.dragging{touch-action:none}

/* ==========================================================================
   LES TERMINUS — SUR TÉLÉPHONE, TOUT LE JEU TIENT SUR UN ÉCRAN
   --------------------------------------------------------------------------
   Chaque ligne faisait 331 px de haut (les deux quais empilés sous la rame) :
   quatre lignes et le présentoir des plaques demandaient 2 400 px. Sur
   téléphone, pendant la partie, la carte de présentation s'efface, la barre
   de score tient sur une rangée et chaque ligne devient une seule bande :
   [ terminus ]  (pastille)  [ terminus ].
   ========================================================================== */
@media (max-width:760px){
  .view:has(.ap-quais) .ap-ban,.view:has(.ap-quais) .ap-mascotte{display:none!important}
  .view:has(.ap-quais) > .wrap > .section{padding-top:8px!important}
  .view:has(.ap-quais) > .wrap > .section .row{margin-bottom:6px!important}
  .view:has(.ap-quais) .ap-cadre{margin-top:6px!important}
  .view:has(.ap-quais) .ap-stage{padding:12px 10px 14px!important;min-height:0}

  .view:has(.ap-quais) .gamebar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;padding:5px!important;margin:0 0 8px!important;border-radius:14px}
  .view:has(.ap-quais) .gamebar>.spacer{display:none}
  .view:has(.ap-quais) .gamebar>div:not(.spacer):not(.progress){display:flex!important;align-items:center;justify-content:center;
    gap:6px;padding:4px 2px!important;min-width:0;border-radius:10px}
  .view:has(.ap-quais) .gamebar .hud-ico{width:22px;height:22px;border-radius:7px;font-size:.7rem}
  .view:has(.ap-quais) .gamebar .hud-ico .ci{width:15px;height:15px}
  .view:has(.ap-quais) .gamebar .hudlabel{display:none}
  .view:has(.ap-quais) .gamebar .hudval{font-size:1rem}
  .view:has(.ap-quais) .gamebar .progress{grid-column:1/-1;min-width:0!important;height:6px}

  .view:has(.ap-quais) .ap-stage > .stage-title{font-size:.95rem;margin:0 0 2px;text-align:center}
  .view:has(.ap-quais) .ap-stage > .hint{display:none!important}

  .ap--debutant .ap-quais{gap:12px!important;margin-top:10px!important}
  .ap--debutant .ap-quais .lineplate{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:6px;
    padding:8px 7px;border-radius:16px;text-align:center;
    box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
  .ap--debutant .ap-quais .lineplate.done{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--accent),0 0 0 7.5px #0B0E13,0 5px 0 7.5px #0B0E13}
  .ap--debutant .ap-quais .lp-rail{display:block;left:6%;right:6%;top:50%;height:8px;margin-top:-4px}
  .ap--debutant .ap-quais .lp-mid{padding:0;background:none;box-shadow:none}
  .ap--debutant .ap-quais .lp-mid .lp-rame,.ap--debutant .ap-quais .lp-mid .lp-name{display:none}
  .ap--debutant .ap-quais .lp-bul{width:42px;height:42px;margin:0;font-size:1rem}
  .ap--debutant .ap-quais .lp-end{min-height:62px;padding:5px 6px;border-radius:10px;outline-offset:-5px}
  .ap--debutant .ap-quais .lp-end::before{display:none}
  .ap--debutant .ap-quais .lp-end .lp-ph{padding:.3em .55em;gap:5px;font-size:.5rem;letter-spacing:.1em}
  .ap--debutant .ap-quais .lp-end .lp-ph::before{width:10px;height:10px}
  .ap--debutant .ap-quais .lp-term{font-size:.76rem;line-height:1.12;overflow-wrap:anywhere}

  .ap--debutant .ap-plaques{margin-top:14px!important;gap:7px!important}
  .ap--debutant .ap-plaques .chip{padding:.55em .8em;font-size:.78rem;line-height:1.15;border-radius:9px}
}

/* ==========================================================================
   LES ARRONDISSEMENTS — UN ÉCRAN DE TÉLÉPHONE, ET UN VRAI PLEIN ÉCRAN
   --------------------------------------------------------------------------
   Le bouton de plein écran agrandissait le plan seul : un bandeau de 240 px
   au milieu d'un écran noir, et plus aucun numéro à poser. Il agrandit
   maintenant tout le cadre du jeu : la barre de score, le plan qui prend
   toute la place libre, et les numéros dessous (à droite, à l'horizontale).
   Hors plein écran, sur téléphone, la carte de présentation s'efface pendant
   la partie et les vingt numéros tiennent en quatre rangées.
   ========================================================================== */
@media (max-width:760px){
  .view:has(.ap-stage .paris){padding-left:8px!important;padding-right:8px!important}
  .view:has(.ap-stage .paris) .ap-ban,.view:has(.ap-stage .paris) .ap-mascotte{display:none!important}
  .view:has(.ap-stage .paris) > .wrap > .section{padding-top:8px!important}
  .view:has(.ap-stage .paris) > .wrap > .section .row{margin-bottom:6px!important}
  .view:has(.ap-stage .paris) .ap-cadre:not(.mob-plein){margin-top:6px!important}
  .view:has(.ap-stage .paris) .ap-stage{padding:12px 10px 14px!important;min-height:0}
  .view:has(.ap-stage .paris) .gamebar{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;padding:5px!important;margin:0 0 8px!important;border-radius:14px}
  .view:has(.ap-stage .paris) .gamebar>.spacer{display:none}
  .view:has(.ap-stage .paris) .gamebar>div:not(.spacer):not(.progress){display:flex!important;align-items:center;justify-content:center;
    gap:6px;padding:4px 2px!important;min-width:0;border-radius:10px}
  .view:has(.ap-stage .paris) .gamebar .hud-ico{width:22px;height:22px;border-radius:7px;font-size:.7rem}
  .view:has(.ap-stage .paris) .gamebar .hud-ico .ci{width:15px;height:15px}
  .view:has(.ap-stage .paris) .gamebar .hudlabel{display:none}
  .view:has(.ap-stage .paris) .gamebar .hudval{font-size:1rem}
  .view:has(.ap-stage .paris) .gamebar .progress{grid-column:1/-1;min-width:0!important;height:6px}
  .view:has(.ap-stage .paris) .ap-stage > .stage-title{font-size:.95rem;margin:0 0 2px;text-align:center}
  .view:has(.ap-stage .paris) .ap-stage > .stage-title + .hint{display:none!important}
  .view:has(.ap-stage .paris) .ap-stage > .paris{margin-top:8px!important}
  .view:has(.ap-stage .paris) .ap-stage > .drag-src:has(.chip--num){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px 6px;margin-top:12px!important}
  .view:has(.ap-stage .paris) .drag-src .chip--num{justify-content:center;min-width:0;padding:.5em 0}
  .view:has(.ap-stage .paris) .drag-src .chip--num b{font-size:.92rem}
  .view:has(.ap-stage .paris) .ar-enq{margin-bottom:6px!important;gap:10px!important}
  .view:has(.ap-stage .paris) .ar-enq-perso{width:62px!important}
  .view:has(.ap-stage .paris) .ap-stage > .hint{margin-top:8px!important;font-size:.56rem}
}

/* — le plein écran : le cadre du jeu entier — */
.ap-cadre:is(.mob-plein,:fullscreen){display:flex!important;flex-direction:column;gap:6px;overflow:hidden!important;
  padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(env(safe-area-inset-bottom,0px) + 8px)!important;
  background:linear-gradient(170deg,#1B2533,#0C1118)!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-mascotte{display:none!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .gamebar{flex:none;margin:0!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0!important;
  padding:10px 8px!important;overflow-y:auto;overscroll-behavior:contain;border-radius:18px}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage::before{display:none}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > *{flex:none}
/* debout : le bloc titre + plan + numéros se centre dans la hauteur (le plan
   de Paris est plus large que haut : l'étirer laisserait des bandes vides) */
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > :first-child{margin-top:auto!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > :last-child{margin-bottom:auto!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .paris{margin:10px 0 0!important;background:transparent;box-shadow:0 0 0 3px #0B0E13;border-radius:14px}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .paris > svg{width:100%;height:auto;max-width:100%;max-height:none}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src{margin-top:18px!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src:has(.chip--num){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 7px}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src .chip--num{justify-content:center;min-width:0;padding:.8em 0}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src .chip--num b{font-size:1.05rem}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .stage-title{font-size:1rem;margin:0;text-align:center}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .stage-title + .hint{display:none}
@media (orientation:landscape) and (max-height:600px){
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,33%);
    grid-template-rows:auto auto auto auto 1fr;column-gap:12px;align-content:stretch}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > *{grid-column:2}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .paris{grid-column:1;grid-row:1/-1;height:100%;min-height:0;margin:0!important;
    display:grid;place-items:center;box-shadow:none;border-radius:0}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .paris > svg{width:100%;height:100%;max-height:100%}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > :first-child,.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > :last-child{margin-top:0!important;margin-bottom:0!important}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src .chip--num{padding:.6em 0}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src .chip--num b{font-size:.95rem}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .drag-src:has(.chip--num){grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ==========================================================================
   JEUX DE FRANCE — UN ÉCRAN DE TÉLÉPHONE, UN VRAI PLEIN ÉCRAN, ET DE L'AIR
   --------------------------------------------------------------------------
   · Pendant la partie, sur téléphone : la carte de présentation s'efface, la
     barre de score tient sur une rangée, les étiquettes des régions sont plus
     petites, la carte prend toute la largeur.
   · Le plein écran prend tout le jeu (barre, étiquettes, carte) : la carte
     seule laissait un grand rectangle noir et plus rien à poser.
   · Le bouton de plein écran rejoint la colonne du zoom (il couvrait le « + »).
   · Le tableau des lieux célèbres ne déborde plus : il prend la largeur de la
     scène, centré, au lieu de 96 % de l'écran.
   · Aux départements, les frontières des régions ne barrent plus la carte.
   · Au téléphone, la mer ne bouge plus : chaque vague redessinait toute la
     carte à chaque image.
   ========================================================================== */
.fr-fantome{z-index:9500}
.fr-carte--depts .fr-svg .fr-reg{stroke:transparent!important;stroke-width:0!important}
.fr-tableau{max-width:100%}
.fr-zoom .mob-fs--outil{position:static!important;order:-1;display:grid;place-items:center;width:38px;height:38px;
  padding:0!important;border-radius:12px;margin:0}
.ap--france .fr-zoom .mob-fs--outil{width:40px;height:40px;border-radius:14px}
.fr-zoom .mob-fs--outil svg{width:18px!important;height:18px!important}
.fr-zoom .mob-fs--outil span{display:none}

@media (max-width:760px){
  .fr-carte .fr-m-vagues path,.fr-carte .fr-m-nuages ellipse,.fr-carte .fr-m-voilier,
  .fr-carte .fr-m-mouette{animation:none!important}
  .fr-carte .fr-m-voilier,.fr-carte .fr-m-mouette{display:none}
  .fr-tableau{width:100%!important;max-width:420px}

  .view.ap--france:has(.fr-bar){padding-left:8px!important;padding-right:8px!important}
  .view.ap--france:has(.fr-bar) .ap-ban,.view.ap--france:has(.fr-bar) .ap-mascotte{display:none!important}
  .view.ap--france:has(.fr-bar) > .wrap > .section{padding-top:8px!important}
  .view.ap--france:has(.fr-bar) > .wrap > .section .row{margin-bottom:6px!important}
  .view.ap--france:has(.fr-bar) .ap-cadre:not(.mob-plein){margin-top:6px!important}
  .view.ap--france:has(.fr-bar) .ap-stage{padding:10px 8px 12px!important;min-height:0}
  .view.ap--france:has(.fr-bar) .ap-stage::before{display:none}

  .view.ap--france:has(.fr-bar) .fr-bar{display:flex!important;flex-wrap:nowrap!important;align-items:stretch;gap:5px!important;
    padding:6px 6px 13px!important;border-radius:16px!important}
  .view.ap--france:has(.fr-bar) .fr-bar-g{flex:none;gap:0!important}
  .view.ap--france:has(.fr-bar) .fr-bar-t{display:none!important}
  .view.ap--france:has(.fr-bar) .fr-retour{display:grid;place-items:center;padding:0 .7em!important;font-size:.6rem!important;height:100%}
  .view.ap--france:has(.fr-bar) .fr-bar-d{flex:1;min-width:0;display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    gap:5px!important;margin:0!important}
  .view.ap--france:has(.fr-bar) .fr-stat{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:1px!important;
    min-width:0;padding:.28em .3em!important;border-radius:12px!important;text-align:center!important}
  .view.ap--france:has(.fr-bar) .fr-stat span{display:block!important;max-width:100%;font-size:.44rem!important;letter-spacing:.08em!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .view.ap--france:has(.fr-bar) .fr-stat b{font-size:.88rem!important;line-height:1.05}
  .view.ap--france:has(.fr-bar) .fr-piste{left:10px!important;right:10px!important;bottom:4px!important;height:5px!important}

  .view.ap--france:has(.fr-bar) .fr-consigne{display:none!important}
  .view.ap--france:has(.fr-bar) .fr-tiroir{gap:5px!important;padding:6px!important;margin:8px 0 0!important;border-radius:14px!important}
  .view.ap--france:has(.fr-bar) .fr-jeton{gap:4px!important;padding:4px 9px 4px 5px!important;min-height:0!important;
    font-size:.66rem!important;line-height:1.1}
  .view.ap--france:has(.fr-bar) .fr-jeton svg{width:16px!important;height:16px!important}

  .view.ap--france:has(.fr-bar) .fr-zone{margin-top:8px!important;padding:4px!important;border-radius:18px!important}
  .view.ap--france:has(.fr-bar) .fr-zone .fr-carte{border-radius:14px!important}
  .view.ap--france:has(.fr-bar) .fr-zoom{right:6px!important;top:6px!important;gap:5px!important}
  .view.ap--france:has(.fr-bar) .fr-zoom-b,.view.ap--france:has(.fr-bar) .fr-zoom .mob-fs--outil{width:32px!important;height:32px!important;border-radius:10px!important;font-size:.95rem}
  .view.ap--france:has(.fr-bar) .fr-zoom .mob-fs--outil svg{width:15px!important;height:15px!important}

  .view.ap--france:has(.fr-bar) .fr-scene{margin-top:8px!important;gap:8px!important}
  .view.ap--france:has(.fr-bar) .fr-q-t{font-size:.95rem!important}
  .view.ap--france:has(.fr-bar) .fr-lab{font-size:.56rem!important}
  .view.ap--france:has(.fr-bar) .fr-choix{gap:7px!important}
  .view.ap--france:has(.fr-bar) .fr-choix-b{padding:10px 12px!important;font-size:.84rem!important;border-radius:14px!important}
  .view.ap--france:has(.fr-bar) .fr-indice-b{padding:7px 12px!important;font-size:.62rem!important}
}

/* — le plein écran : le cadre entier, la carte prend la place qui reste — */
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-bar{flex:none}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-consigne{display:none}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-zone{flex:1 1 0;min-height:220px;display:flex;margin:8px 0 0!important;padding:4px!important}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-zone > .fr-carte{flex:1;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-zone > .fr-carte > .fr-svg{width:100%;height:100%;max-height:100%}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-tiroir{flex:none;max-height:34dvh;overflow-y:auto}
.ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-scene{flex:none}
@media (orientation:landscape) and (max-height:600px){
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage:has(> .fr-zone){display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,38%);
    grid-template-rows:auto auto auto auto 1fr;column-gap:12px}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage:has(> .fr-zone) > *{grid-column:2;margin-top:0!important;margin-bottom:0!important}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage:has(> .fr-zone) > * + *{margin-top:8px!important}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-zone{grid-column:1!important;grid-row:1/-1;margin:0!important;height:100%;min-height:0}
  .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .fr-tiroir{max-height:none}
}

/* ==========================================================================
   METRO CITY — LE PLAN EN PLEIN ÉCRAN
   --------------------------------------------------------------------------
   Le bouton rejoint la colonne des outils du plan. En plein écran, le plan
   occupe tout l'écran (il se recadre seul sur le réseau), et la fiche d'une
   station s'ouvre par-dessus au lieu de rester derrière.
   ========================================================================== */
.mc-tools .mob-fs--outil{position:static!important;display:grid;place-items:center;width:38px;height:38px;
  padding:0!important;margin:0;border-radius:14px}
.mc-tools .mob-fs--outil svg{width:17px!important;height:17px!important}
.mc-tools .mob-fs--outil span{display:none}
.mc-mapwrap:is(.mob-plein,:fullscreen){display:block!important;padding:0!important;
  width:100vw!important;height:100dvh!important;max-height:none!important;border-radius:0!important;overflow:hidden!important}
.mc-mapwrap:is(.mob-plein,:fullscreen) > svg{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}
.mc-mapwrap:is(.mob-plein,:fullscreen) .mc-tools{top:calc(env(safe-area-inset-top,0px) + 12px)}
.mc-mapwrap:is(.mob-plein,:fullscreen) svg.mc-rose{width:52px!important;height:52px!important;max-width:none!important;
  max-height:none!important;top:calc(env(safe-area-inset-top,0px) + 12px)}
html:has(.mob-plein) :is(.mc-modal,.mc-flash,.toast){z-index:9600!important}

/* ==========================================================================
   METRO CITY — LES RANGÉES D'ONGLETS SE CENTRENT
   --------------------------------------------------------------------------
   Les compteurs (tickets, voyageurs, recettes…), les onglets du jeu
   (réseau, quêtes, boutique, villes…) et ceux de la boutique (boosters,
   cartes du jour, améliorations…) se calaient à gauche : la dernière rangée
   laissait un vide d'un seul côté. Sur ordinateur, les rangées se centrent ;
   sur téléphone, chaque rangée remplit la largeur.
   ========================================================================== */
.mc-hud,.mc-dock{justify-content:center}
.mcx .mcb-onglets{display:flex!important;flex-wrap:wrap;justify-content:center}
.mcx .mcb-onglets > .mcb-onglet{flex:0 0 calc((100% - 40px) / 5);min-width:0;justify-content:center}
@media (max-width:760px){
  .mcx .mcb-onglets > .mcb-onglet{flex-basis:calc((100% - 20px) / 3)}
  .mc-hud{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-hud > .mc-chip{min-width:0}
  .mc-hud > .mc-chip > :not(:first-child){min-width:0}
  .mc-hud .mc-chip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:.5rem!important;letter-spacing:.08em!important}
  .mc-hud > .mc-chip:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;min-width:55%}
  .mc-dock .mc-dtab{flex:1 1 auto;justify-content:center}
}

/* ==========================================================================
   COULEURS DES LIGNES — LES NUMÉROS À COLORIER AU CENTRE (ORDINATEUR)
   --------------------------------------------------------------------------
   Le mur des numéros était une grille « autant de colonnes que possible » :
   en grand écran, huit colonnes pour quatre numéros, tous serrés à gauche.
   Les numéros se rangent maintenant en rangée centrée, comme les pots.
   ========================================================================== */
@media (min-width:761px){
  .slots.ap-mur{display:flex!important;flex-wrap:wrap;justify-content:center;gap:14px}
  .slots.ap-mur > .slot{flex:0 1 190px;min-width:150px}
  /* l'enseigne « Atelier des couleurs » garde sa rangée à elle, au centre */
  .slots.ap-mur::before{flex:0 0 auto;margin:6px 0 4px!important;order:-1}
  .slots.ap-mur::after{content:"";flex:0 0 100%;order:-1;height:0}
}

/* ==========================================================================
   LE PLUS COURT CHEMIN — LES LIGNES AU MILIEU DE L'ÉCRAN
   --------------------------------------------------------------------------
   · Les lignes à choisir étaient une grille calée à gauche : la dernière
     rangée restait collée au bord. Elles se rangent en rangées centrées, le
     bouton « Valider » aussi.
   · Dans la correction, le tracé vertical de la solution restait collé au
     bord gauche d'un grand panneau vide (la fiche du trajet le recouvrait à
     droite). Sur ordinateur, le panneau et la fiche se partagent la largeur,
     et le tracé se centre dans son panneau ; sur téléphone aussi.
   ========================================================================== */
.opts--lignes{display:flex!important;flex-wrap:wrap;justify-content:center}
.opts--lignes > .opt{flex:0 1 210px;min-width:0}
.opts--lignes + .btn{display:flex;margin-left:auto;margin-right:auto}
@media (max-width:760px){
  .opts--lignes > .opt{flex:0 0 62px}
}
.routemap > svg{margin-left:auto;margin-right:auto}
@media (min-width:781px){
  .itx-cadre{grid-template-columns:minmax(0,1fr) min(58%,560px);column-gap:16px;align-items:stretch}
  .itx-cadre > *{grid-area:auto}
  .itx-cadre > .routemap{grid-column:1;display:flex;align-items:center;justify-content:center}
  .itx-cadre > .itx{grid-column:2;width:auto;justify-self:stretch}
}

/* ==========================================================================
   MÉTRO SOLITAIRE — CHAQUE PICTOGRAMME AU-DESSUS DE SON CHIFFRE
   Le pictogramme était centré dans sa colonne, le chiffre et son nom calés à
   droite : ils ne tombaient jamais l'un sous l'autre. Tout se centre.
   ========================================================================== */
.so-stat{display:flex;flex-direction:column;align-items:center;text-align:center!important}
.so-stat .so-stat-ico{margin-left:auto;margin-right:auto}
.so-stat b,.so-stat span,.so-stat small{text-align:center!important}

/* ==========================================================================
   MÉTRO BELOTE — LE PLEIN ÉCRAN DE SECOURS PREND VRAIMENT TOUT L'ÉCRAN
   ========================================================================== */
.view:has(.blt-plein-css){will-change:auto!important;transform:none!important;filter:none!important;animation:none!important}
html:has(.blt-plein-css),html:has(.blt-plein-css) body{overflow:hidden!important;overscroll-behavior:none}
.bt.blt-plein-css{top:0!important;left:0!important;right:0!important;bottom:0!important;
  width:100vw!important;height:100dvh!important;margin:0!important}
html:has(.blt-plein-css) :is(.mc-modal,.toast){z-index:9600!important}

/* ==========================================================================
   MÉTRO BELOTE — LE HAUT LIBRE, DES VRAIS VISAGES, « NOUS » ET « EUX »
   --------------------------------------------------------------------------
   · Les points quittent le haut de la table : un tableau « Nous / Eux » se
     range en bas à droite, en face de votre place. En haut, il ne reste que
     le partenaire au centre, l'atout et les boutons dans le coin droit.
   · Les adversaires rapetissent : un portrait plus net, un éventail plus fin.
   · Le jeton « passe » ne dit plus rien : une croix.
   · Plus rien ne gonfle ni ne dégonfle pendant la partie : les pulsations
     deviennent des clignements, la table ne suit plus la souris.
   ========================================================================== */
/* le tableau des points, en bas à droite (repère du plateau : 920 × 470) */
.bt-scores{left:802px!important;top:350px!important;right:auto!important;width:106px!important;z-index:9;
  padding:5px 6px 6px!important;border-radius:14px}
.bt-sc-t{margin:0 0 4px!important;font-size:7px!important;letter-spacing:.08em!important;text-align:center;white-space:nowrap}
.bt-sc{grid-template-columns:auto 1fr!important;grid-template-areas:"tetes tot" "nom don";row-gap:1px;column-gap:4px!important;
  height:auto!important;padding:4px 6px 7px 5px!important;margin-bottom:4px!important;border-radius:10px!important;
  box-shadow:0 0 0 1.6px #0B0E13}
.bt-sc--0{background:linear-gradient(180deg,#CFF3DC,#9EE3B8)!important}
.bt-sc--1{background:linear-gradient(180deg,#FFD9D9,#FFB3B3)!important}
.bt-sc-tetes{grid-area:tetes;align-self:center}
.bt-sc-tetes i{width:18px!important;height:20px!important}
.bt-sc-tot{grid-area:tot;align-self:center;min-width:0!important;font-size:19px!important;line-height:1;text-align:right}
.bt-sc-nom{grid-area:nom;align-self:center;font-family:var(--mono);font-size:8px!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.bt-sc-don{grid-area:don;justify-self:end;align-self:center;padding:0 4px!important;font-size:8px!important;line-height:12px}
.bt-sc-j{left:5px!important;right:5px!important;bottom:2px!important;height:3px}

/* les sièges : plus petits */
.bt-siege{padding:5px 5px 4px!important}
.bt-siege--1{left:18px!important;top:122px!important;width:96px!important}
.bt-siege--3{left:806px!important;top:122px!important;width:96px!important}
.bt-siege--2{left:365px!important;width:190px!important;height:48px!important;padding:3px 9px 3px 5px!important}
.bt-av{width:34px!important;height:37px!important}
.bt-nom{font-size:11.5px!important}
.bt-role{font-size:6.5px!important}
.bt-fan{width:70px!important;height:22px!important;margin-top:1px!important}
.bt-siege--2 .bt-fan{width:70px!important;height:26px!important}
.bt-fan-c{left:calc(50% - 8px + (var(--k) - (var(--m) - 1) / 2) * 6.5px)!important;width:16px!important;height:22px!important}
.bt-siege--2 .blt-jetons{width:190px!important}

/* le jeton « passe » : une croix, sur un rond gris */
.bt-board .blt-j--passe{--jc1:#DCE1E8;--jc2:#8C96A4}
.bt-board .blt-j-picto{display:grid;place-items:center;width:100%;height:100%}
.bt-board .blt-j-picto svg{display:block;width:13px;height:13px}

/* plus de zoom pendant la partie */
.bt-dots i.cours{animation:btClignote 1s ease-in-out infinite!important}
@keyframes btClignote{50%{opacity:.35}}
.bt-c-corr{animation:btClignote 1.2s ease-in-out infinite!important}
.bt-c-etoile{animation:none!important}
.bt-at.on{animation:none!important}
.bt-slot.bt-vient::after{display:none!important}
.bt-flip3d.tourne::after{animation:btLueur .9s ease-out .25s both!important}
@keyframes btLueur{from{opacity:0}40%{opacity:1}to{opacity:0}}
.bt-pl-duel{animation:none!important}
/* la table ne suit plus la souris : elle reste posée */
.bt{--px:0!important;--py:0!important}

/* ==========================================================================
   L'ACCUEIL ALLÉGÉ
   --------------------------------------------------------------------------
   La présentation (le réseau, l'accroche, le détail des deux périmètres)
   se cache derrière le petit « i » de la rangée des boutons. Sous chaque
   jeu, une accroche de quelques mots au lieu d'un paragraphe.
   ========================================================================== */
.hero:not(.hero--infos) > .eyebrow,
.hero:not(.hero--infos) > .hero-sub,
.hero:not(.hero--infos) .rx-desc{display:none!important}
.hero.hero--infos > .eyebrow,.hero.hero--infos > .hero-sub,.hero.hero--infos .rx-desc{animation:heroInfo .35s var(--ease-emph) both}
@keyframes heroInfo{from{opacity:0;translate:0 -6px}}
.hero-info-b{flex:none;align-self:center;display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:1.25rem;line-height:1;color:#0B0E13;
  background:linear-gradient(180deg,#FFFDF4,#E8DDC4);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  transition:transform .15s var(--ease-back),background .2s}
.hero-info-b:hover{transform:translateY(-2px)}
.hero-info-b:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.hero-info-b[aria-expanded="true"]{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
/* une accroche, bien posée sous le titre */
.jeu-court{margin-top:.3em!important;margin-bottom:0!important;font-size:.9rem!important;font-weight:700;line-height:1.3!important;
  color:inherit;opacity:.78;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ap-pj .jeu-court{font-size:.95rem!important}
footer.foot:empty{display:none}

/* ==========================================================================
   MÉTRO BELOTE — UNE MAIN IMMOBILE, DES CARTES QUI BRILLENT
   --------------------------------------------------------------------------
   · La main ne bouge plus : chaque coup redessinait la table, et les huit
     cartes rejouaient leur entrée (elles remontaient de 40 px) — la main
     « tremblait » à chaque carte posée par les autres. Les cartes jouables
     ne se soulèvent plus d'office : un liseré blanc suffit à les montrer.
   · Pendant la donne, les cartes arrivées se serrent au centre et
     glissent pour faire place à chaque nouvelle : plus de trous.
   · La secousse de fin de donne ne touche plus que le tapis.
   ========================================================================== */
.bt-main .bt-c:not(.bt-revele){animation:none!important}
.bt-main .bt-c{transition:left .3s var(--ease-emph),transform .22s var(--ease-back),filter .2s,box-shadow .2s!important}
.bt-main .bt-c--ok{transform:translateY(var(--a)) rotate(var(--r))!important}
@media (hover:hover){
  .bt-main .bt-c--ok:hover{transform:translateY(calc(var(--a) - 12px)) rotate(0deg)!important}
}
.bt-main .bt-c--ok:active{transform:translateY(var(--a)) rotate(var(--r))!important}
.bt.blt-secousse .bt-board{animation:none!important}
.bt.blt-secousse .bt-table3d{animation:btChoc .5s ease}

/* — les effets dans la carte — */
@property --btAng{syntax:"<angle>";inherits:false;initial-value:0deg}
.bt-c-fx{position:absolute;inset:0;z-index:3;border-radius:inherit;overflow:hidden;pointer-events:none}
.bt-c-fx i{position:absolute;display:block;pointer-events:none}
.bt-c-fx svg{display:block;width:100%;height:100%;overflow:visible}
.bt-c-fx .fx-lueur{inset:0;border-radius:inherit;animation:btFxLueur 3s ease-in-out infinite;animation-delay:var(--ph)}
@keyframes btFxLueur{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,206,0,0)}50%{box-shadow:inset 0 0 14px 3px rgba(255,206,0,.8)}}
.bt-c-fx .fx-reflet{top:-30%;bottom:-30%;left:-60%;width:70%;
  background:linear-gradient(105deg,transparent 30%,rgba(255,247,210,.95) 50%,transparent 70%);mix-blend-mode:screen;
  transform:translateX(-40%) skewX(-12deg);animation:btFxReflet 3s ease-in-out infinite;animation-delay:var(--ph)}
@keyframes btFxReflet{0%,48%{transform:translateX(-40%) skewX(-12deg);opacity:0}52%{opacity:1}82%{transform:translateX(260%) skewX(-12deg);opacity:1}88%,100%{transform:translateX(260%) skewX(-12deg);opacity:0}}
.bt-c-fx .fx-etin{width:13%;aspect-ratio:1;background:#FFF6C8;opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 2px #FFCE00);
  animation:btFxEtin 1.5s ease-in-out infinite}
.bt-c-fx .fx-etin:nth-of-type(3){left:12%;top:26%;animation-delay:var(--ph)}
.bt-c-fx .fx-etin:nth-of-type(4){right:12%;top:42%;animation-delay:calc(var(--ph) + 500ms)}
.bt-c-fx .fx-etin:nth-of-type(5){left:40%;top:10%;animation-delay:calc(var(--ph) + 1000ms)}
@keyframes btFxEtin{0%,100%{opacity:0;transform:rotate(0) scale(.4)}35%{opacity:1;transform:rotate(45deg) scale(1)}65%{opacity:0;transform:rotate(90deg) scale(.5)}}
/* l'As : un liseré d'or */
.bt-c--fx-as{box-shadow:0 0 0 2px #0B0E13,0 0 0 3.5px #FFCE00,0 0 0 5px #0B0E13,0 3px 0 5px #0B0E13}
/* le Valet d'atout : le cadre d'or qui tourne, la couronne */
.bt-c-fx .fx-cadre{inset:0;border-radius:inherit;padding:3.5px;
  background:conic-gradient(from var(--btAng),#FFCE00,#FFF7D0,#FF9F1C,#FFCE00,#FFFFFF,#FFCE00);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:btFxTourne 2.4s linear infinite;animation-delay:var(--ph)}
@keyframes btFxTourne{to{--btAng:360deg}}
.bt-c-fx .fx-couronne{left:50%;top:1%;width:34%;aspect-ratio:24/16;translate:-50% 0;
  filter:drop-shadow(0 0 4px rgba(255,206,0,.9)) drop-shadow(0 2px 0 rgba(11,14,19,.35));
  animation:btFxCouronne 2s ease-in-out infinite;animation-delay:var(--ph)}
@keyframes btFxCouronne{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(2px) rotate(4deg)}}
.bt-c-fx--valet .fx-lueur{animation-duration:2s}
/* le 9 d'atout : l'électricité */
.bt-c-fx--neuf .fx-cadre{background:conic-gradient(from var(--btAng),#7FE3FF,#FFFFFF,#2FA8FF,#0B5ED7,#7FE3FF,#FFFFFF,#7FE3FF);animation-duration:1.2s}
.bt-c-fx--neuf .fx-lueur{animation-name:btFxLueurBleue}
@keyframes btFxLueurBleue{0%,100%{box-shadow:inset 0 0 0 0 rgba(127,227,255,0)}50%{box-shadow:inset 0 0 14px 3px rgba(127,227,255,.85)}}
.bt-c-fx .fx-flash{inset:0;background:radial-gradient(circle at 72% 38%,rgba(190,240,255,.7),transparent 62%);opacity:0;
  animation:btFxFlash 3s linear infinite;animation-delay:var(--ph)}
@keyframes btFxFlash{0%,82%,100%{opacity:0}84%{opacity:1}87%{opacity:.15}90%{opacity:.85}94%{opacity:0}}
.bt-c-fx .fx-eclair{right:7%;top:30%;width:20%;aspect-ratio:16/22;filter:drop-shadow(0 0 4px #7FE3FF);
  animation:btFxCrepite 1.5s steps(1) infinite;animation-delay:var(--ph)}
@keyframes btFxCrepite{0%,100%{opacity:1}12%{opacity:.25}16%{opacity:1}54%{opacity:.4}58%{opacity:1}70%{opacity:.6}72%{opacity:1}}
/* la belote : des cœurs qui montent */
.bt-c-fx--belote .fx-lueur{animation-name:btFxLueurRose}
@keyframes btFxLueurRose{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,77,109,0)}50%{box-shadow:inset 0 0 14px 3px rgba(255,77,109,.7)}}
.bt-c-fx .fx-coeur{bottom:22%;width:17%;aspect-ratio:16/14;opacity:0;animation:btFxCoeur 3s ease-out infinite}
.bt-c-fx .fx-coeur:nth-of-type(2){left:14%;animation-delay:var(--ph)}
.bt-c-fx .fx-coeur:nth-of-type(3){left:44%;animation-delay:calc(var(--ph) + 1000ms)}
.bt-c-fx .fx-coeur:nth-of-type(4){left:70%;animation-delay:calc(var(--ph) + 2000ms)}
@keyframes btFxCoeur{0%{opacity:0;transform:translateY(0) rotate(-8deg)}15%{opacity:1}70%{opacity:.9}100%{opacity:0;transform:translateY(-190%) rotate(10deg)}}

/* — l'éclat sur le tapis — */
.bt-fxl{position:absolute;left:50%;top:50%;width:920px;height:470px;z-index:40;pointer-events:none;
  transform:translate(-50%,-50%) scale(var(--k,1));transform-origin:50% 50%}
.bt-eclat{position:absolute;width:0;height:0;--ce:#FFCE00}
.bt-eclat--neuf{--ce:#7FE3FF}.bt-eclat--belote{--ce:#FF4D6D}.bt-eclat--as{--ce:#FFE58A}
.bt-eclat .ecl-rayons{position:absolute;left:-120px;top:-120px;width:240px;height:240px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--ce) 70%,transparent) 0 7deg,transparent 7deg 22deg);
  -webkit-mask:radial-gradient(circle,transparent 22%,#000 30%,#000 52%,transparent 70%);mask:radial-gradient(circle,transparent 22%,#000 30%,#000 52%,transparent 70%);
  animation:btEclRayons 1.6s ease-out both}
@keyframes btEclRayons{0%{opacity:0;transform:rotate(0)}20%{opacity:1}100%{opacity:0;transform:rotate(70deg)}}
.bt-eclat .ecl-anneau{position:absolute;left:-60px;top:-60px;width:120px;height:120px;border-radius:50%;
  box-shadow:0 0 0 4px var(--ce),0 0 26px 6px var(--ce);animation:btEclAnneau .9s ease-out both}
@keyframes btEclAnneau{from{opacity:1}to{opacity:0;box-shadow:0 0 0 1px var(--ce),0 0 40px 18px transparent}}
.bt-eclat u{position:absolute;left:-6px;top:-6px;width:12px;height:12px;background:var(--ce);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px var(--ce));
  animation:btEclEtin 1.1s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--k) * 18ms)}
.bt-eclat--belote u{clip-path:path("M6 11C1.5 8 .8 5.6.8 4.1a2.6 2.6 0 0 1 5.2-1 2.6 2.6 0 0 1 5.2 1C11.2 5.6 10.5 8 6 11Z")}
@keyframes btEclEtin{from{opacity:1;transform:rotate(var(--a)) translateY(-20px)}to{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1.6))}}
.bt-eclat b{position:absolute;left:0;top:-92px;translate:-50% 0;white-space:nowrap;padding:.28em .8em;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:#0B0E13;
  background:var(--ce);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 24px 4px color-mix(in srgb,var(--ce) 60%,transparent);
  animation:btEclTexte 2s ease both}
@keyframes btEclTexte{0%{opacity:0;transform:translateY(14px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1;transform:translateY(-4px)}100%{opacity:0;transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){ .bt-c-fx i{animation:none!important} .bt-eclat{display:none} }
/* — le calque des crochets BLTFX : par-dessus toute la table, en pixels d'écran — */
.bltfx{position:absolute;inset:0;z-index:50;pointer-events:none;overflow:hidden;font-family:var(--display);color:#0B0E13}
.bltfx *{box-sizing:border-box}
.bltfx-c{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.bltfx-c > .bt-c{left:0;top:0}
.bltfx-dos{overflow:hidden;border-radius:12%/8.3%;box-shadow:0 0 0 2px #0B0E13}
.bltfx-dos svg{display:block;width:100%;height:100%}
.bt-slot.bltfx-cache{visibility:hidden}

/* ==========================================================================
   L'ACCUEIL, ENCORE PLUS SOBRE — le record, seulement s'il existe
   ========================================================================== */
.rec-discret{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:6px;padding:.16em .6em .16em .35em;
  border-radius:999px;font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.02em;line-height:1.3;
  color:#0B0E13;background:rgba(255,253,244,.78);box-shadow:0 0 0 1.5px rgba(11,14,19,.55)}
.rec-discret .ci,.rec-discret svg{width:13px!important;height:13px!important}
.fr-carte-jeu .rec-discret{margin-left:auto;margin-right:auto}
.ap-pj-pied{justify-content:flex-end}
/* moins de texte, des vitrines moins hautes : le titre, le bouton, la voie */
.ap-pj{min-height:220px!important;padding-bottom:98px!important}
@media (max-width:560px){ .ap-pj{min-height:0!important;padding-bottom:94px!important} }

/* ==========================================================================
   L'ACCUEIL SANS VIDES
   --------------------------------------------------------------------------
   · Le mot MÉTROPIF s'étire sur toute la largeur de son cadre (sa taille
     suit la largeur du cadre, les lettres se répartissent d'un bord à
     l'autre).
   · Les boutons, les pastilles de lignes et les titres de section se
     centrent ; le bandeau des lignes prend toute la largeur.
   · Débutant / Avancé occupent toute la largeur.
   · Les grilles de jeux (jeux, France, lignes les plus chargées) ne
     laissent plus de case vide : une rangée incomplète s'élargit pour
     remplir l'écran — Métro King ne reste plus seul dans un coin.
   ========================================================================== */
.hero .mp-marque{display:block!important;width:100%;box-sizing:border-box;container-type:inline-size}
.hero .mp-titre{display:flex!important;justify-content:space-between;align-items:baseline;
  font-size:clamp(1.9rem,15cqw,11rem)!important}
.hero .mp-l{margin-right:0!important}
.hero .hero-cta{justify-content:center}
.hero .rx-pastilles{justify-content:center}
.hero .hero-strip--modes{justify-content:center!important;width:100%}
.hero .strip-mode{flex:1 1 auto}
.hero .strip-row{max-width:none!important;justify-content:center}
/* un mode désactivé ne garde plus sa largeur : le métro prend toute la rangée */
.hero .hero-strip--modes[data-etendu="false"] .strip-mode[data-extra="1"],
.hero .hero-strip--modes[data-gpe="false"] .strip-mode[data-extra="2"]{
  flex:0 0 0!important;width:0!important;min-width:0!important;padding:0!important;box-shadow:none!important}
.hero .hero-strip--modes:has(.strip-mode[data-extra="1"]) {column-gap:0}
.hero .hero-strip--modes .strip-mode + .strip-mode{margin-left:var(--sp-4)}
/* sur grand écran, des pastilles plus grandes pour habiter la rangée */
@media (min-width:900px){
  .hero .strip-row{gap:10px}
  .hero .strip-row .strip-dot{width:clamp(34px,3.9vw,60px)!important;height:clamp(34px,3.9vw,60px)!important;
    font-size:clamp(.85rem,1.25vw,1.3rem)!important}
}
.hero .hero-strip--modes[data-etendu="false"] .strip-mode[data-extra="1"],
.hero .hero-strip--modes[data-gpe="false"] .strip-mode[data-extra="2"]{margin-left:0!important}
.view:has(> .wrap > .hero) .section > .panneau{display:flex;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.ap-duo{max-width:none!important}
#secFrance > .btn{display:flex;width:max-content;margin-left:auto;margin-right:auto}

.ap-pj-grille{display:flex!important;flex-wrap:wrap;gap:var(--sp-5)}
.ap-pj-grille > .ap-pj{flex:1 1 calc((100% - 2 * var(--sp-5)) / 3);min-width:min(100%,300px)}
.ap-pj-grille > .ap-pj--grand{flex:2 1 calc((100% - 2 * var(--sp-5)) * 2 / 3 + var(--sp-5))}
.fr-grille{display:flex!important;flex-wrap:wrap;gap:16px!important}
.fr-grille > .fr-carte-jeu{flex:1 1 calc((100% - 32px) / 3);min-width:min(100%,240px)}
.rkx{display:flex!important;flex-wrap:wrap}
.rkx > .rkx-l{flex:1 1 300px}

/* ==========================================================================
   LES TITRES DE L'ACCUEIL : DES PLAQUES DE STATION
   --------------------------------------------------------------------------
   Plaque émaillée bleue, liseré blanc, lettres blanches serrées, deux
   rivets ; elle est posée au milieu d'un bandeau de faïence blanche, comme
   le nom d'une station sur le mur du quai.
   ========================================================================== */
.pl-rangee{display:flex;align-items:center;gap:0;margin:0 0 var(--sp-5)}
.pl-mur{flex:1;min-width:14px;height:30px;border-radius:8px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 45%),
    repeating-linear-gradient(90deg,rgba(11,14,19,.16) 0 1.5px,transparent 1.5px 26px),
    linear-gradient(180deg,transparent 0 13.5px,rgba(11,14,19,.16) 13.5px 15px,transparent 15px),
    linear-gradient(180deg,#F6F2E6,#E2D9C2);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.pl-rangee > .pl-mur:first-child{margin-right:-6px;border-top-right-radius:0;border-bottom-right-radius:0}
.pl-rangee > .pl-mur:last-child{margin-left:-6px;border-top-left-radius:0;border-bottom-left-radius:0}
.pl-plaque{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.55em;flex:none;max-width:calc(100% - 40px);
  margin:0;padding:.42em 1.25em .42em .55em;border-radius:12px;
  font-family:"Archivo Narrow","Archivo",sans-serif;font-weight:700;font-size:clamp(1.15rem,3.2vw,1.9rem);
  line-height:1;letter-spacing:.045em;text-transform:uppercase;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#2464C4 0%,#0A4AA6 48%,#083C8C 100%);
  box-shadow:inset 0 0 0 3px #083C8C,inset 0 0 0 5px #FFFFFF,inset 0 3px 8px 5px rgba(255,255,255,.18),
    0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
/* les rivets et le reflet de l'émail */
.pl-plaque::before,.pl-plaque::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFFFFF,#9AA6B4 60%,#5A626E);box-shadow:0 0 0 1px #0B0E13}
.pl-plaque::before{left:-15px;display:none}
.pl-plaque::after{right:9px;opacity:.9}
.pl-nom{position:relative;text-shadow:0 2px 0 rgba(0,0,0,.28)}
.pl-rond{display:grid;place-items:center;flex:none;width:1.45em;height:1.45em;border-radius:50%;
  font-family:"Archivo",sans-serif;font-weight:900;font-size:.82em;letter-spacing:0;color:#0B0E13;
  background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,inset 0 -3px 0 rgba(0,0,0,.14)}
.pl-rond--fr{background:linear-gradient(90deg,#1B4E9B 0 33.4%,#FFFFFF 33.4% 66.6%,#E3051C 66.6%)}
.pl-plaque{animation:plPose .6s var(--ease-back) both}
@keyframes plPose{from{opacity:0;transform:translateY(-10px) rotate(-2deg)}}
@media (max-width:560px){
  .pl-plaque{font-size:1.05rem;padding:.44em .95em .44em .45em}
  .pl-mur{height:22px}
}

/* ==========================================================================
   LES DEUX RÉGLAGES DE L'ACCUEIL : DEUX QUAIS DE STATION
   --------------------------------------------------------------------------
   Fermé : le quai est dans la pénombre, lampes éteintes, feu rouge.
   Ouvert : les lampes s'allument l'une après l'autre, le feu passe au vert,
   les rames du RER et du tram (ou du Grand Paris Express) circulent.
   Au clic : l'éclair de lumière, et à l'ouverture une rame express qui
   traverse le quai.
   ========================================================================== */
.rx{padding:40px var(--sp-5) 100px!important;isolation:isolate;
  background:#E9E1CD!important;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13!important}
.rx > :not(.rx-fond):not(.rx-scene):not(.rx-express):not(.rx-etincelle){position:relative;z-index:2}
.rx-fond{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.rx-fond > i{position:absolute;display:block}
.rx-carreaux{inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.5),transparent 55%),
    repeating-linear-gradient(0deg,rgba(11,14,19,.09) 0 1.5px,transparent 1.5px 17px),
    repeating-linear-gradient(90deg,rgba(11,14,19,.09) 0 1.5px,transparent 1.5px 34px),
    linear-gradient(180deg,#F7F3E7,#E6DCC3)}
.rx-voute{left:-8%;right:-8%;top:-150%;height:188%;border-radius:50%;
  box-shadow:inset 0 -10px 0 -4px rgba(11,14,19,.07),inset 0 -22px 30px -18px rgba(11,14,19,.18)}
.rx-lampes{left:7%;right:7%;top:0;height:12px;display:flex;justify-content:space-between}
.rx-lampes i{position:relative;width:30px;height:11px;border-radius:0 0 14px 14px;background:#7A808A;
  box-shadow:0 0 0 2px #0B0E13;transition:background .25s,box-shadow .25s;transition-delay:calc(var(--i) * 90ms)}
.rx-lampes i::after{content:"";position:absolute;left:50%;top:100%;width:170px;height:150px;translate:-50% 0;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,226,140,.55),transparent 66%);opacity:0;
  transition:opacity .35s;transition-delay:calc(var(--i) * 90ms)}
.rx-nuit{inset:0;background:linear-gradient(180deg,rgba(30,38,52,.34),rgba(30,38,52,.18));transition:opacity .7s var(--ease-std)}
.rx[data-on="true"] .rx-nuit{opacity:0}
.rx[data-on="true"] .rx-lampes i{background:#FFF1B8;box-shadow:0 0 0 2px #0B0E13,0 0 16px 5px rgba(255,214,90,.75);
  animation:rxLampe 5s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s)}
.rx[data-on="true"] .rx-lampes i::after{opacity:1}
@keyframes rxLampe{0%,100%{filter:brightness(1)}47%{filter:brightness(1)}50%{filter:brightness(.8)}53%{filter:brightness(1.05)}}
.rx--gpe[data-on="true"] .rx-lampes i{background:#C9FFF1;box-shadow:0 0 0 2px #0B0E13,0 0 16px 5px rgba(0,200,170,.6)}
.rx--gpe[data-on="true"] .rx-lampes i::after{background:radial-gradient(ellipse at 50% 0%,rgba(120,240,215,.45),transparent 66%)}

/* le titre : une plaque émaillée */
.rx-eyebrow{display:table!important;margin:0!important;background:#0B0E13!important;color:#FFCE00!important;font-size:.52rem!important;letter-spacing:.18em!important}
.rx--gpe .rx-eyebrow{color:#5FE0C8!important}
.rx-titre{display:inline-block;margin:10px 0 0!important;padding:.34em .8em .36em;border-radius:10px;
  font-family:"Archivo Narrow","Archivo",sans-serif!important;font-weight:700!important;font-size:clamp(1.05rem,2.2vw,1.45rem)!important;
  letter-spacing:.04em;text-transform:uppercase;color:#fff!important;line-height:1.1!important;
  background:linear-gradient(180deg,#2464C4,#0A4AA6 50%,#083C8C);
  box-shadow:inset 0 0 0 2.5px #083C8C,inset 0 0 0 4px #FFFFFF,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.rx--gpe .rx-titre{background:linear-gradient(180deg,#2A3A4E,#1A2636 55%,#121B27);
  box-shadow:inset 0 0 0 2.5px #121B27,inset 0 0 0 4px #5FE0C8,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.rx .rx-pastilles{margin-top:14px}

/* l'interrupteur : le feu de voie et le levier */
.rx-switch{display:grid!important;grid-template-columns:auto auto;grid-template-areas:"feu piste" "feu etat";
  align-items:center;column-gap:12px;row-gap:8px}
.rx-feu{grid-area:feu;display:flex;flex-direction:column;gap:6px;padding:7px 6px;border-radius:12px;background:#1A1F27;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,inset 0 2px 0 rgba(255,255,255,.08)}
.rx-feu i{display:block;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(0,0,0,.45);transition:background .25s,box-shadow .25s}
.rx-feu-r{background:#FF3B3B;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 0 10px 3px rgba(255,59,59,.75)!important}
.rx-feu-v{background:#1E3A2A}
.rx[data-on="true"] .rx-feu-r{background:#4A1C1C;box-shadow:inset 0 0 0 2px rgba(0,0,0,.45)!important}
.rx[data-on="true"] .rx-feu-v{background:#3EF08A;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2),0 0 12px 4px rgba(62,240,138,.8)}
.rx-piste{grid-area:piste}
.rx-etat{grid-area:etat;justify-self:center;padding:.3em .7em;border-radius:6px;font-weight:700;
  color:#FFB0A8!important;background:#141920;box-shadow:0 0 0 2px #0B0E13}
.rx[data-on="true"] .rx-etat{color:#7DFFB0!important}

/* le clic : un éclair de lumière qui balaie le quai, le levier qui claque */
.rx-fond::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-40%;width:35%;z-index:3;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,250,220,.95),transparent);transform:skewX(-14deg)}
.rx.rx-clic--on .rx-fond::after{animation:rxEclair .8s ease-out}
.rx.rx-clic--off .rx-fond::after{animation:rxEclair .8s ease-out;background:linear-gradient(100deg,transparent,rgba(160,175,200,.7),transparent)}
@keyframes rxEclair{0%{opacity:0;left:-40%}15%{opacity:1}100%{opacity:0;left:110%}}
.rx.rx-clic .rx-curseur{animation:rxClac .45s var(--ease-back)}
@keyframes rxClac{30%{transform:translateY(3px) rotate(0)}}
.rx.rx-clic--off .rx-feu{animation:rxFeu .5s ease}
@keyframes rxFeu{20%,60%{transform:translateX(-2px)}40%,80%{transform:translateX(2px)}}
/* la rame express qui traverse le quai à l'ouverture */
.rx-express{position:absolute;left:0;bottom:30px;z-index:1;display:flex;gap:4px;pointer-events:none;
  animation:rxExpress 1.25s cubic-bezier(.55,.05,.35,1) forwards}
.rx-express i{width:64px;height:30px;border-radius:10px 10px 5px 5px;background:var(--c);
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 -4px 0 rgba(0,0,0,.2),inset 0 3px 0 rgba(255,255,255,.4)}
.rx-express i:first-child{border-radius:10px 22px 5px 5px}
.rx-express i::before{content:"";display:block;margin:6px 8px 0;height:9px;border-radius:3px;background:#BDE6F7;box-shadow:0 0 0 1.6px #0B0E13}
.rx-express u{position:absolute;right:100%;top:6px;width:180px;height:18px;border-radius:9px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7));filter:blur(2px)}
@keyframes rxExpress{from{transform:translateX(-120%)}to{transform:translateX(calc(100vw))}}
@media (prefers-reduced-motion:reduce){ .rx-lampes i{animation:none!important} .rx-express{display:none} }
@media (max-width:620px){
  .rx{padding:36px var(--sp-4) 96px!important}
  .rx-switch{justify-self:start}
}

/* ==========================================================================
   LES RAMES DES QUAIS DE L'ACCUEIL
   --------------------------------------------------------------------------
   Deux voies et un quai central. La voie du fond porte les rames du RER et
   du tram (ou du Grand Paris Express), un peu plus petites ; la voie de
   devant, le métro. Chaque rame freine en entrant en station, s'arrête au
   quai, ouvre ses portes, repart en accélérant ; ses roues tournent tant
   qu'elle roule, ses phares brillent.
   ========================================================================== */
.rx{padding-bottom:124px!important}
.rx-scene{height:108px!important;container-type:inline-size;overflow:hidden;border-radius:0 0 22px 22px}
.rx-rail,.rx-traverse,.rx-train{display:none!important}
.rx-voie{position:absolute;left:0;right:0;height:10px;
  background:
    linear-gradient(180deg,#56606E,#3A4452) top/100% 3px no-repeat,
    repeating-linear-gradient(90deg,#7A6147 0 6px,transparent 6px 15px) 0 3px/100% 4px no-repeat,
    linear-gradient(180deg,#BDB29B,#9C9078) bottom/100% 3px no-repeat}
.rx-voie--haut{bottom:52px;opacity:.9}
.rx-voie--bas{bottom:12px}
.rx-quai{position:absolute;left:30%;right:30%;bottom:25px;height:24px;z-index:2;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#D8D0BD,#BFB59E);box-shadow:0 0 0 2px #0B0E13}
.rx-quai-bord{position:absolute;left:0;right:0;top:0;height:4px;background:repeating-linear-gradient(90deg,#FFCE00 0 10px,#E8B800 10px 20px);
  box-shadow:0 2px 0 rgba(11,14,19,.35)}
.rx-quai-mat{position:absolute;left:8%;bottom:22px;width:3px;height:26px;margin-left:-1.5px;background:#48505E;box-shadow:0 0 0 1px #0B0E13}
.rx-quai-mat b{position:absolute;left:50%;top:-14px;width:18px;height:18px;margin-left:-9px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:11px;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.rx--gpe .rx-quai-mat b{background:#5FE0C8}

.rx-rame{position:absolute;left:0;display:block;will-change:transform;
  animation:rxDroite var(--d) linear infinite;animation-delay:var(--dl)}
.rx-rame--g{animation-name:rxGauche}
.rx-rame--haut{bottom:60px;z-index:1}
.rx-rame--bas{bottom:20px;z-index:3}
.rx-rame svg{display:block;overflow:visible;filter:drop-shadow(0 3px 0 rgba(11,14,19,.22))}
.rx-rame--extra{opacity:0;transition:opacity .6s var(--ease-std)}
.rx[data-on="true"] .rx-rame--extra{opacity:1}
.rx[data-on="true"] .rx-rame--extra + .rx-rame--extra{transition-delay:.25s}
@keyframes rxDroite{
  0%{transform:translateX(calc(-1 * var(--w) - 40px));animation-timing-function:cubic-bezier(.25,.55,.3,1)}
  40%{transform:translateX(calc(50cqw - var(--w) / 2));animation-timing-function:linear}
  56%{transform:translateX(calc(50cqw - var(--w) / 2));animation-timing-function:cubic-bezier(.65,0,.75,.45)}
  100%{transform:translateX(calc(100cqw + 40px))}}
@keyframes rxGauche{
  0%{transform:translateX(calc(100cqw + 40px));animation-timing-function:cubic-bezier(.25,.55,.3,1)}
  40%{transform:translateX(calc(50cqw - var(--w) / 2));animation-timing-function:linear}
  56%{transform:translateX(calc(50cqw - var(--w) / 2));animation-timing-function:cubic-bezier(.65,0,.75,.45)}
  100%{transform:translateX(calc(-1 * var(--w) - 40px))}}
/* les roues tournent au rythme du trajet et s'arrêtent en station */
.rx-rame .rx-roue{transform-box:fill-box;transform-origin:center;animation:rxRoue var(--d) linear infinite;animation-delay:var(--dl)}
@keyframes rxRoue{
  0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.25,.55,.3,1)}
  40%{transform:rotate(1080deg);animation-timing-function:linear}
  56%{transform:rotate(1080deg);animation-timing-function:cubic-bezier(.65,0,.75,.45)}
  100%{transform:rotate(2160deg)}}
/* les portes s'ouvrent au quai */
.rx-rame .rx-pg,.rx-rame .rx-pd{transform-box:fill-box;animation:rxPorteG var(--d) linear infinite;animation-delay:var(--dl)}
.rx-rame .rx-pd{animation-name:rxPorteD}
@keyframes rxPorteG{0%,42.5%,53.5%,100%{transform:translateX(0)}45%,51%{transform:translateX(-3.6px)}}
@keyframes rxPorteD{0%,42.5%,53.5%,100%{transform:translateX(0)}45%,51%{transform:translateX(3.6px)}}
/* les phares */
.rx-halo{opacity:.55;animation:rxHalo 2.2s ease-in-out infinite}
@keyframes rxHalo{50%{opacity:.15}}
/* la rame express du clic : le même dessin, qui passe en trombe */
.rx-express{bottom:20px!important;display:block!important;gap:0!important}
.rx-express svg{display:block;overflow:visible}
@media (prefers-reduced-motion:reduce){
  .rx-rame,.rx-rame .rx-roue,.rx-rame .rx-pg,.rx-rame .rx-pd,.rx-halo{animation:none!important}
  .rx-rame{transform:translateX(calc(50cqw - var(--w) / 2))}
}
@media (max-width:620px){ .rx{padding-bottom:120px!important} }

/* ==========================================================================
   MÉTRO KING — LE 16, JOKER DES TROIS LIGNES
   Une carte nuit à bord tricolore (les trois lignes de la partie), le
   macaron doré du 16 au cœur d'un carrefour, deux étincelles qui brillent.
   ========================================================================== */
.mk-cat--joker .mk-c-in{background:linear-gradient(160deg,#1C2636,#0E141D)!important}
.mk-cat--joker .mk-c-in::before{content:"";position:absolute;inset:2.4cqw;border-radius:6cqw;pointer-events:none;z-index:2;
  padding:1.6cqw;background:linear-gradient(135deg,var(--j1) 0 33%,var(--j2) 33% 66%,var(--j3) 66%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mk-c-pic--16{font-family:var(--display);font-weight:900;font-size:7.6cqw;color:#0B0E13;background:#FFCE00!important}
.mk-cat--joker .mk-c-cat{color:#FFCE00}
.mk-cat--joker .mk-c-nomsp b{color:#FFF6D6}
.mk-cat--joker .mk-j-eclat path{transform-box:fill-box;transform-origin:center;animation:mkJEclat 2s ease-in-out infinite}
.mk-cat--joker .mk-j-eclat path + path{animation-delay:-1s}
@keyframes mkJEclat{0%,100%{opacity:.2;transform:scale(.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){ .mk-cat--joker .mk-j-eclat path{animation:none} }

/* ==========================================================================
   LES RAMES DES VITRINES DE JEUX — chacune son passage
   La rame traverse la voie pendant un peu plus de la moitié du cycle, puis
   la voie reste vide ; durée, sens et moment sont tirés au hasard.
   ========================================================================== */
.ap-rame2{animation:apRame2 var(--t,14s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes apRame2{
  0%{transform:translateX(var(--x0))}
  58%{transform:translateX(var(--x1))}
  58.01%,100%{transform:translateX(var(--x1))}}
.ap-rame2 .rx-roue{transform-box:fill-box;transform-origin:center;animation:apRoue2 .55s linear infinite}
@keyframes apRoue2{to{transform:rotate(360deg)}}
.ap-rame2 svg{overflow:visible}
@media (prefers-reduced-motion:reduce){ .ap-rame2,.ap-rame2 .rx-roue{animation:none} .ap-rame2{transform:translateX(380px)} }
.rx .rx-titre{margin-top:0!important}
/* ==========================================================================
   MÉTRO SOLITAIRE — UNE CARTE, UNE COUCHE
   --------------------------------------------------------------------------
   Le bandeau et le nom portent un z-index 1, mais la carte ne formait pas
   sa propre couche : dans une colonne empilée, le nom de la carte du
   dessous passait AU-DESSUS du corps de la carte posée devant. Chaque carte
   isole maintenant son contenu ; les z-index des cartes entre elles
   (sélection 20, carte qui bouge 30) restent valables.
   ========================================================================== */
.so-carte{isolation:isolate}

/* ==========================================================================
   MÉTRO SOLITAIRE — LA VICTOIRE
   --------------------------------------------------------------------------
   Le pendant de « Réseau bloqué » : une carte crème coiffée des couleurs
   des lignes de la partie, sur un soleil qui tourne.
   0,1 s  la carte monte          0,35 → 1,6 s  le plan se trace
   0,6 s  la plaque tombe         1,5 s  le tampon « GAGNÉ » + tickets
   1,8 s  les étoiles             2,4 s  le score défile, les boutons
   ========================================================================== */
.so-fete-fin .so-fond{animation:soGgSaut .6s var(--ease-back) calc(var(--n,0) * .12s) 2 both}
@keyframes soGgSaut{0%,100%{transform:none}45%{transform:translateY(-14px) scale(1.07) rotate(-2deg)}}

.so-gagne{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;overflow-y:auto;
  background:radial-gradient(120% 80% at 50% 36%,rgba(255,206,0,.4),rgba(6,9,13,.9) 72%);
  animation:soPdVoile .35s ease both}
.so-gg-rayons{position:fixed;left:50%;top:38%;width:220vmax;height:220vmax;margin:-110vmax 0 0 -110vmax;
  pointer-events:none;background:repeating-conic-gradient(rgba(255,236,150,.15) 0 8deg,transparent 8deg 16deg);
  -webkit-mask:radial-gradient(closest-side,#000 8%,transparent 42%);mask:radial-gradient(closest-side,#000 8%,transparent 42%);
  animation:soGgTourne 40s linear infinite}
@keyframes soGgTourne{to{transform:rotate(360deg)}}
.so-gg-pluie{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.so-gg-pluie i{position:absolute;left:var(--x);top:-26px;width:9px;height:13px;border-radius:2px;
  background:var(--c);box-shadow:0 0 0 1.5px #0B0E13;
  animation:soGgChute var(--t) cubic-bezier(.35,.1,.65,1) var(--d) both}
/* les tickets ne tournoient pas (de profil, un ticket n'est qu'un bâton) : ils descendent en se balançant */
.so-gg-pluie i.ticket{width:26px;height:15px;border-radius:2.5px;
  background:linear-gradient(180deg,#FFF6D8 0 56%,#7B5A33 56% 76%,#FFF6D8 76%);
  animation-name:soGgTicket;animation-timing-function:linear}
@keyframes soGgTicket{0%{transform:translate(0,0) rotate(-18deg)}
  25%{transform:translate(var(--dx),25vh) rotate(22deg)}50%{transform:translate(0,50vh) rotate(-20deg)}
  75%{transform:translate(var(--dx),75vh) rotate(18deg)}100%{transform:translate(0,calc(100vh + 60px)) rotate(-15deg)}}
@keyframes soGgChute{0%{transform:translate(0,0) rotate(0) rotateX(0)}
  100%{transform:translate(var(--dx),calc(100vh + 60px)) rotate(var(--r)) rotateX(900deg)}}

.so-gagne-carte{position:relative;z-index:1;width:min(420px,100%);padding:18px 16px 16px;border-radius:26px;text-align:center;
  color:#0B0E13;background:
    linear-gradient(#0B0E13,#0B0E13) 0 10px/100% 2.5px no-repeat,
    linear-gradient(90deg,var(--l1,#FFCE00) 0 25%,var(--l2,#E3051C) 25% 50%,var(--l3,#3ED07A) 50% 75%,var(--l4,#0064B0) 75%) 0 0/100% 10px no-repeat,
    repeating-linear-gradient(0deg,rgba(11,14,19,.05) 0 1.5px,transparent 1.5px 24px),
    linear-gradient(180deg,#FFFBEF,#F1E6CB);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.55);
  animation:soPdCarte .6s var(--ease-back) .1s both,soGgBond .5s ease 1.52s}
@keyframes soGgBond{30%{transform:translateY(6px) scale(1.015,.975)}65%{transform:translateY(-7px) scale(.99,1.02)}}

.so-gagne-scene{margin:6px -4px 0;border-radius:16px;overflow:hidden;box-shadow:0 0 0 2.5px #0B0E13}
.so-gagne-scene svg{display:block;width:100%;height:auto}
.so-gg-trace path{stroke-dasharray:100;animation:soGgTrace .55s cubic-bezier(.5,0,.3,1) var(--d) both}
@keyframes soGgTrace{0%{stroke-dashoffset:100;opacity:0}4%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.so-gg-st,.so-gg-corr,.so-gg-eclat{transform-box:fill-box;transform-origin:50% 50%}
.so-gg-st{animation:soGgPop .4s var(--ease-back) var(--d) both}
.so-gg-corr{animation:soGgPop .5s cubic-bezier(.2,1.8,.4,1) var(--d) both}
@keyframes soGgPop{from{transform:scale(0)}}
.so-gg-eclat{animation:soGgEclat 1.8s ease-in-out var(--d) infinite both}
@keyframes soGgEclat{0%{transform:scale(0) rotate(0)}22%{transform:scale(1.1) rotate(40deg)}45%,100%{transform:scale(0) rotate(90deg)}}

.so-gagne-plaque{display:inline-block;margin:14px auto 0;padding:.5em 1.2em;border-radius:14px;
  font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:#0E3A6B;
  box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 4.5px #0E3A6B,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transform-origin:50% -30px;animation:soPdPlaque 1s var(--ease-back) .6s both}

.so-gagne-tampon{position:relative;display:block;width:max-content;margin:16px auto 4px;
  animation:soPdTampon .5s cubic-bezier(.2,1.5,.45,1) 1.5s both}
.so-gagne-tampon span{position:relative;z-index:1;display:block;padding:.02em .45em .06em;border-radius:12px;
  font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,12vw,3.2rem);line-height:1;letter-spacing:.05em;
  text-transform:uppercase;color:#129A4A;background:rgba(255,255,255,.4);
  border:5px solid #129A4A;box-shadow:inset 0 0 0 3px #FFFBEF,inset 0 0 0 5.5px #129A4A;
  transform:rotate(-7deg);text-shadow:2px 2px 0 rgba(18,154,74,.18)}
.so-gagne-tampon i{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:3px;
  background:var(--c);box-shadow:0 0 0 2px #0B0E13;opacity:0;animation:soPdPoussiere .75s ease-out 1.8s both}
.so-gagne-tampon i:nth-child(odd){border-radius:50%}

.so-gagne-record{display:inline-block;margin:4px auto 0;padding:.28em .9em;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:#FF4F9A;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  animation:soPdTampon .5s cubic-bezier(.2,1.5,.45,1) 2.5s both,soGgBalance 1.6s ease-in-out 3s infinite}
@keyframes soGgBalance{50%{transform:rotate(-4deg) scale(1.05)}}

.so-gagne-etoiles{display:flex;justify-content:center;gap:6px;margin-top:10px}
.so-gg-etoile{flex:1 1 0;max-width:104px;display:flex;flex-direction:column;align-items:center;gap:3px}
.so-gg-etoile svg{width:44px;height:44px;overflow:visible;
  animation:soGgEtoile .55s cubic-bezier(.2,1.7,.4,1) var(--d) both}
.so-gg-etoile svg path:first-child{fill:#E4DCC8}
.so-gg-etoile .reflet{opacity:0}
.so-gg-etoile.on svg path:first-child{fill:#FFCE00}
.so-gg-etoile.on .reflet{opacity:.9}
.so-gg-etoile:not(.on) svg{opacity:.55}
.so-gg-etoile.on svg{filter:drop-shadow(0 3px 0 #0B0E13)}
@keyframes soGgEtoile{0%{transform:scale(0) rotate(-120deg)}100%{transform:none}}
.so-gg-etoile small{font-family:var(--mono);font-size:.5rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;
  color:#5A5F68;animation:soPdMonte .35s ease var(--d) both}
.so-gg-etoile.on small{color:#0B0E13}

.so-gagne-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;animation:soPdMonte .4s ease 2.3s both}
.so-gagne-chips .so-perdu-chip{min-width:0;padding:6px 4px}
.so-gagne-chips .so-perdu-chip:first-child{background:#FFCE00}
.so-gagne-btns{display:flex;flex-direction:column;gap:8px;margin-top:14px;animation:soPdMonte .4s ease 2.45s both}
.so-gagne-btns .btn{width:100%;justify-content:center}
.so-gagne-btns .btn--solid{color:#fff;font-weight:800;border:0;
  background:linear-gradient(180deg,#4FD98A,#129A4A);text-shadow:0 2px 0 rgba(11,14,19,.35);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.so-gagne-btns .btn--ghost{color:#0B0E13;font-weight:700;border:0;background:#fff;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.so-gagne-btns .btn:active{transform:translateY(3px)}
@media (min-width:761px){ .so-gagne-btns{flex-direction:row} }
@media (prefers-reduced-motion:reduce){
  .so-gagne,.so-gagne *,.so-fete-fin .so-fond{animation:none!important}
}
/* @@ debut metropoker.css @@ */
/* ==========================================================================
   MÉTRO POKER
   --------------------------------------------------------------------------
   Une couleur à lui : le cerise. Cartes illustrées, plaques émaillées de
   quai, table d'émail sombre ceinte d'un rail où roule le métro de la
   donne. Trait noir de 2 px, ombre dure et courte, aucun émoji.
   ========================================================================== */
.view.mpk-joue .ap-ban,.view.mpk-joue .ap-mascotte{display:none}
.view.mpk-joue > .wrap > .section{padding-top:6px!important;padding-bottom:0!important}
.view.mpk-joue > .wrap > .section .row{margin-bottom:6px!important}
.view.mpk-joue .ap-cadre{margin-top:4px!important;padding:0!important;background:none;box-shadow:none}
.view.mpk-joue .ap-stage{padding:0!important;background:none;box-shadow:none;min-height:0}
.view.mpk-joue .ap-stage::before{display:none}

.mpk-tk{display:block;width:22px;height:14px;flex:none}
.mpk-pile{display:block;width:100%;height:100%}

/* ============================== LES CARTES ============================== */
/* — la carte station : l'image, le rond de ligne, la plaque émaillée — */
.mpk-carte{position:relative;display:flex;flex-direction:column;aspect-ratio:5/7;width:100%;margin:0;padding:0;border:0;
  border-radius:9%/6.4%;overflow:hidden;isolation:isolate;container-type:inline-size;font:inherit;text-align:center;color:#0B0E13;cursor:default;
  background:linear-gradient(180deg,#FFFBF0,#F1E4C6);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
button.mpk-carte{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.mpk-c-img{display:block;flex:1 1 auto;min-height:0;margin:5cqw 5cqw 0;border-radius:7cqw;overflow:hidden;background:#8FD3F4;
  box-shadow:0 0 0 1.6px #0B0E13}
.mpk-c-img svg{display:block;width:100%;height:100%}
.mpk-c-rond{position:absolute;left:1.5cqw;top:1.5cqw;z-index:2;display:grid;place-items:center;width:28cqw;height:28cqw;border-radius:50%;
  font-family:var(--display);font-style:normal;font-weight:900;font-size:13.5cqw;line-height:1;letter-spacing:-.05em;
  color:var(--i);background:var(--c);box-shadow:0 0 0 1.8px #0B0E13,0 1.5px 0 1.8px #0B0E13}
/* la plaque du quai : émail bleu nuit, filet blanc, lettres blanches */
.mpk-c-plaque{position:relative;flex:none;display:grid;place-items:center;min-height:30%;margin:4cqw 5cqw 5cqw;padding:3.5cqw 4cqw;border-radius:5cqw;
  background:linear-gradient(180deg,#1E438C,#153377);box-shadow:0 0 0 1.6px #0B0E13,inset 0 0 0 1.4cqw #153377,inset 0 0 0 2.4cqw #FFFFFF,inset 0 0 0 3.2cqw #153377}
.mpk-c-plaque::after{content:"";position:absolute;left:6%;right:40%;top:10%;height:18%;border-radius:4cqw;background:rgba(255,255,255,.14)}
.mpk-c-plaque b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 1.5cqw;
  font-family:var(--display);font-weight:800;font-size:12.5cqw;line-height:1.02;letter-spacing:.01em;color:#FFFFFF;
  overflow-wrap:normal;word-break:keep-all;-webkit-hyphens:none;hyphens:none;text-wrap:balance}
.mpk-c-plaque.long b{font-size:10cqw}
.mpk-c-plaque.tres-long b{font-size:8.2cqw;-webkit-line-clamp:3}

/* — le dos : le plan du métro et le M — */
.mpk-dos{display:block;aspect-ratio:5/7;width:100%;border-radius:9%/6.4%;overflow:hidden;
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 3px #0E1E52,0 3px 0 2px #0B0E13}
.mpk-dos svg{display:block;width:100%;height:100%}
.mpk-dos::after{content:"";position:absolute}
.mpk-dos--bonus{aspect-ratio:16/9;border-radius:9%/16%;box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 2.5px #E9B949,0 3px 0 2px #0B0E13}

/* — la carte bonus : couchée, bordée d'or, avec son image — */
.mpk-bonus{position:relative;display:flex;align-items:stretch;gap:0;aspect-ratio:16/9;width:100%;margin:0;padding:0;border:0;
  border-radius:9%/16%;container-type:inline-size;font:inherit;text-align:left;color:#fff;cursor:default;
  background:linear-gradient(170deg,#22324A,#131C28);
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 2.5px #E9B949,inset 0 0 0 4px #131C28,0 3px 0 2px #0B0E13}
button.mpk-bonus{cursor:pointer;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.mpk-bonus::before{content:"Bonus";position:absolute;bottom:0;right:9cqw;padding:.3em .55em .2em;border-radius:5px 5px 0 0;
  font-family:var(--mono);font-size:max(6px,6cqw);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#0B0E13;background:#E9B949;box-shadow:0 0 0 1.5px #0B0E13}
.mpk-b-fig{flex:none;width:40%;margin:5cqw 0 5cqw 5cqw;border-radius:7cqw;overflow:hidden;box-shadow:0 0 0 1.6px #0B0E13;background:#fff}
.mpk-b-fig svg{display:block;width:100%;height:100%}
.mpk-b-txt{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.5cqw;min-width:0;padding:4cqw 5cqw 9cqw 5cqw}
.mpk-b-txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:max(6px,6cqw);
  letter-spacing:.06em;text-transform:uppercase;color:#E9B949}
.mpk-b-txt b{font-family:var(--display);font-weight:800;font-size:max(8px,10.5cqw);line-height:1.05;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* — les versions miniatures (annonces, abattage) — */
.mpk-carte.mini{width:44px;flex:none;box-shadow:0 0 0 1.5px #0B0E13,0 2px 0 1.5px #0B0E13}
.mpk-bonus.mini{width:78px;flex:none;box-shadow:0 0 0 1.5px #0B0E13,inset 0 0 0 2px #E9B949,0 2px 0 1.5px #0B0E13}
.mpk-bonus.mini::before{display:none}
.mpk-bonus.mini .mpk-b-txt{padding-bottom:4cqw}

/* — la carte qui se retourne, en 3D — */
.mpk-flip{position:relative;width:100%;aspect-ratio:5/7;perspective:600px}
.mpk-flip--b{aspect-ratio:16/9}
.mpk-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.3,1.35,.5,1)}
.mpk-face > *{height:100%}
.mpk-face--dos{transform:rotateY(0)}
.mpk-face--avant{transform:rotateY(-180deg)}
.mpk-flip.ouvert .mpk-face--dos{transform:rotateY(180deg)}
.mpk-flip.ouvert .mpk-face--avant{transform:rotateY(0)}
.mpk-flip.ouvert .mpk-face--avant::after{content:"";position:absolute;inset:0;border-radius:9%/6.4%;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 48%,transparent 60%);background-size:260% 100%;
  animation:mpkReflet .9s ease .35s both}
@keyframes mpkReflet{from{background-position:120% 0}to{background-position:-60% 0}}
.mpk-flip.mini{width:44px;flex:none}

/* ============================== LE MENU ================================ */
.mpk-menu{display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto;padding:4px 0 10px}
.mpk-enseigne{position:relative;height:250px;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 110%,rgba(176,36,63,.55),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),
    #14212C;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mpk-eventail{position:absolute;left:50%;top:34px;width:0;height:0}
.mpk-eventail > *{position:absolute;left:0;top:0;width:86px;transform-origin:50% 160%;
  transform:translate(-50%,0) rotate(calc((var(--k) - 2) * 11deg));animation:mpkEventail .7s cubic-bezier(.3,1.4,.5,1) calc(var(--k) * 70ms) both}
@keyframes mpkEventail{from{transform:translate(-50%,40px) rotate(0) scale(.6);opacity:0}}
.mpk-plaque{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:3;display:flex;align-items:baseline;gap:.35em;
  margin:0;padding:.28em .8em .34em;border-radius:14px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,7.4vw,2.2rem);letter-spacing:.02em;text-transform:uppercase;
  color:#fff;background:#B0243F;
  box-shadow:inset 0 0 0 2.5px #fff,inset 0 0 0 4.5px #B0243F,0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  animation:mpkPlaque .8s var(--ease-back) .35s both}
.mpk-plaque span{font-size:.62em;color:#FFD9E0}
@keyframes mpkPlaque{from{transform:translateY(-50px) rotate(-8deg);opacity:0}}
.mpk-enseigne-pile{position:absolute;right:16px;top:14px;width:62px;height:48px;animation:mpkFlotte 3s ease-in-out infinite}
@keyframes mpkFlotte{50%{transform:translateY(-5px) rotate(4deg)}}

.mpk-reglages{display:grid;gap:12px;padding:14px;border-radius:22px;background:#FFF8E6;color:#0B0E13;
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.mpk-reglage-t{margin:0 0 6px;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6A5A48}
.mpk-vignettes{display:flex;gap:7px}
.mpk-vig{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 4px 7px;border:0;border-radius:14px;font:inherit;color:#0B0E13;background:#fff;cursor:pointer;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;transition:transform .15s}
.mpk-vig:active{transform:translateY(2px)}
.mpk-vig b{font-family:var(--display);font-weight:800;font-size:1.25rem;line-height:1}
.mpk-vig small,.mpk-vig > span:not([class]){font-size:.72rem;font-weight:700}
.mpk-vig.on{color:#fff;background:#B0243F}
.mpk-vig-tetes{display:flex;justify-content:center;flex-wrap:wrap;max-width:100%}
.mpk-vig-tetes i{width:15px;height:16px;margin:0 -2px}
.mpk-vig-tetes svg{display:block;width:100%;height:100%}
.mpk-barres{display:flex;align-items:flex-end;gap:3px;height:20px}
.mpk-barres i{width:7px;border-radius:2px;background:#E4DCC8;box-shadow:0 0 0 1.5px #0B0E13}
.mpk-barres i:nth-child(1){height:8px}.mpk-barres i:nth-child(2){height:13px}.mpk-barres i:nth-child(3){height:19px}
.mpk-barres i.on{background:#FFCE00}
.mpk-points{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:60px}
.mpk-points i{width:7px;height:7px;border-radius:50%;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13}

.mpk-go{display:flex;align-items:center;justify-content:center;gap:12px;padding:15px 20px;border:0;border-radius:18px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:.02em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#D23A57,#B0243F);text-shadow:0 2px 0 rgba(11,14,19,.35);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mpk-go:active{transform:translateY(4px);box-shadow:0 0 0 3px #0B0E13,0 2px 0 3px #0B0E13}
.mpk-go .mpk-tk{width:32px;height:20px;animation:mpkFlotte 2.4s ease-in-out infinite}

.mpk-regles{border-radius:18px;background:#14212C;color:#E7ECF2;box-shadow:0 0 0 3px #0B0E13}
.mpk-regles-bt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 16px;border:0;background:none;
  font:inherit;font-weight:800;color:inherit;cursor:pointer}
.mpk-regles-bt::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);transition:transform .2s}
.mpk-regles.on .mpk-regles-bt::after{transform:rotate(-135deg)}
.mpk-regles-corps{display:none;padding:0 16px 16px}
.mpk-regles.on .mpk-regles-corps{display:block}
.mpk-etapes{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.mpk-etapes li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.35}
.mpk-etapes b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  font-family:var(--display);font-size:.8rem;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 1.6px #0B0E13}
.mpk-regles-p{margin:10px 0 0;font-size:.84rem;line-height:1.45;color:#C9D2DC}
.mpk-regles-t{margin:14px 0 6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#E9B949}
.mpk-bareme{display:grid;grid-template-columns:1fr auto;gap:3px 12px;font-size:.84rem}
.mpk-bareme span{padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.mpk-bareme b{padding:3px 0;text-align:right;font-family:var(--display);color:#FFCE00;border-bottom:1px dashed rgba(255,255,255,.12)}
.mpk-regles-n{margin:8px 0 0;font-size:.76rem;color:#9AA7B5}
.mpk-carnet{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mpk-carnet span{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:14px;background:#FFF8E6;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mpk-carnet b{font-family:var(--display);font-size:1.1rem}
.mpk-carnet small{font-size:.58rem;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#6A5A48;text-align:center}

/* le barème illustré */
.mpk-bar{display:grid;gap:5px}
.mpk-bar-l{position:relative;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:10px;padding:5px 10px 5px 6px;border-radius:10px;
  background:linear-gradient(90deg,rgba(255,206,0,.16) var(--p),rgba(255,255,255,.04) var(--p));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  animation:mpkBarre .35s ease calc(var(--i) * 30ms) both}
@keyframes mpkBarre{from{opacity:0;transform:translateX(-10px)}}
.mpk-bar-l > b{font-family:var(--display);font-size:1rem;color:#FFCE00;text-align:right;min-width:34px}
.mpk-bar-n{font-size:.8rem;line-height:1.2}
.mpk-bar-sch{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.mpk-bar-suite{position:relative;display:flex;gap:2px;padding:0 1px}
.mpk-bar-suite::before{content:"";position:absolute;left:3px;right:3px;top:50%;height:3px;margin-top:-1.5px;background:var(--c);box-shadow:0 0 0 1px #0B0E13}
.mpk-bar-suite > i{position:relative;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.4px #0B0E13}
.mpk-bar-corr{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #E9B949,0 0 0 3px #0B0E13}

/* ============================== LA TABLE =============================== */
.mpk-jeu{position:relative;display:flex;flex-direction:column;gap:7px;max-width:900px;margin:0 auto;padding:8px;
  border-radius:22px;background:radial-gradient(90% 60% at 50% 30%,#18283A,#0C141D);color:#E7ECF2;box-shadow:0 0 0 3px #0B0E13;isolation:isolate}
.mpk-jeu:is(.mob-plein,:fullscreen){max-width:none;border-radius:0;overflow-y:auto;justify-content:flex-start}
.mpk-barre{display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 6px 4px 12px;border-radius:14px;
  background:#B0243F;color:#fff;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mpk-marque{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--display);font-weight:800;font-size:.9rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.mpk-manche{flex:none;display:flex;align-items:baseline;gap:5px;margin-left:auto;white-space:nowrap}
.mpk-manche small{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.mpk-manche b{font-family:var(--display);font-size:.95rem}
.mpk-mes-t{flex:none;display:flex;align-items:center;gap:5px;padding:3px 8px 3px 5px;border-radius:999px;background:#0B0E13}
.mpk-mes-t b{font-family:var(--display);font-size:.95rem}
.mpk-quitter{flex:none;padding:6px 10px;border:0;border-radius:10px;font:inherit;font-size:.78rem;font-weight:800;color:#0B0E13;background:#FFF8E6;
  box-shadow:0 0 0 2px #0B0E13;cursor:pointer}
.mpk-quitter.arme{color:#fff;background:#E3051C}
.mpk-barre .mob-fs{flex:none;z-index:auto!important;position:static!important;margin:0!important;padding:6px!important;min-width:0!important;border-radius:10px!important}
.mpk-barre .mob-fs span{display:none}
.mpk-barre .mob-fs svg{width:18px;height:18px}

/* — les sièges : visage, tickets, pile de mise, bulle — */
.mpk-sieges{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.mpk-siege,.mpk-moi-tete-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
  padding:6px 3px 5px;border-radius:14px;background:#1A2733;box-shadow:0 0 0 2px #0B0E13;transition:opacity .3s,filter .3s,box-shadow .25s}
.mpk-siege.parle,.mpk-moi-tete-in.parle{box-shadow:0 0 0 2px #0B0E13,0 0 0 4px #FFCE00;animation:mpkParle 1s ease-in-out infinite}
@keyframes mpkParle{50%{transform:translateY(-2px)}}
.mpk-siege.gagne,.mpk-moi-tete-in.gagne{animation:mpkGagneSiege .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes mpkGagneSiege{35%{transform:scale(1.12) rotate(-3deg);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #3ED07A,0 0 24px 6px rgba(62,208,122,.6)}}
.mpk-av{position:relative;width:36px;height:38px;border-radius:50%;background:#FFF8E6;box-shadow:0 0 0 2px #0B0E13}
.mpk-av svg{display:block;width:100%;height:100%;border-radius:50%;clip-path:circle(50% at 50% 47%);transform:translateY(3px)}
.donneur .mpk-av::after{content:"D";position:absolute;right:-3px;top:-3px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;
  font:800 .55rem var(--display);color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13}
.mpk-nom{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:800}
.mpk-t{display:flex;align-items:center;gap:3px}
.mpk-t .mpk-tk{width:15px;height:10px}
.mpk-t b{font-family:var(--display);font-size:.78rem}
/* la pile de mise du tour, devant le joueur */
.mpk-mise{position:absolute;left:3px;top:3px;display:none;align-items:center;height:18px;padding-right:4px}
.mpk-mise.on{display:flex}
.mpk-mise.pop{animation:mpkPop .35s cubic-bezier(.3,1.7,.5,1)}
.mpk-mise i{display:block;width:17px;height:11px;margin-left:-11px;transform:rotate(calc((var(--k) - 1) * 8deg)) translateY(calc(var(--k) * -1.5px))}
.mpk-mise i:first-child{margin-left:0}
.mpk-mise i .mpk-tk{width:17px;height:11px}
.mpk-mise b{margin-left:3px;padding:0 4px;border-radius:999px;font:800 .6rem var(--display);color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 1.4px #0B0E13}
.mpk-etat{min-height:10px;font-family:var(--mono);font-size:.5rem;letter-spacing:.04em;text-transform:uppercase;color:#9AA7B5;white-space:nowrap}
.mpk-etat.relance{color:#FFCE00;font-weight:800}
.mpk-etat.couche{color:#FF8A93}
.mpk-etat.pense{color:#7CC4FF}
.mpk-bulle{position:absolute;left:50%;top:-8px;z-index:5;translate:-50% -100%;padding:4px 8px;border-radius:10px;white-space:nowrap;pointer-events:none;
  font-size:.66rem;font-weight:800;color:#0B0E13;background:#fff;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;opacity:0}
.mpk-bulle::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;margin-left:-4px;background:#fff;box-shadow:2px 2px 0 0 #0B0E13;transform:rotate(45deg)}
.mpk-bulle.on{animation:mpkBulle 1.9s ease both}
.mpk-bulle.ok{background:#3ED07A}.mpk-bulle.ok::after{background:#3ED07A}
.mpk-bulle.ko{background:#FF8A93}.mpk-bulle.ko::after{background:#FF8A93}
.mpk-bulle.relance{background:#FFCE00}.mpk-bulle.relance::after{background:#FFCE00}
.mpk-bulle.gris{background:#C9D2DC}.mpk-bulle.gris::after{background:#C9D2DC}
@keyframes mpkBulle{0%{opacity:0;transform:translateY(8px) scale(.6)}12%{opacity:1;transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.mpk-dos-mini{display:flex;height:11px}
.mpk-dos-mini i{width:8px;height:11px;margin-left:-3px;border-radius:1.5px;background:#1E3A8A;box-shadow:0 0 0 1px #0B0E13;transform:rotate(calc((var(--k) - 2) * 7deg))}
.mpk-dos-mini i:first-child{margin-left:0}
.mpk-jeu .couche{opacity:.5;filter:grayscale(.8)}
.mpk-jeu .out{opacity:.28;filter:grayscale(1)}
@keyframes mpkPop{from{transform:scale(.3)}}

/* — la table : émail sombre, liseré cerise, le rail tout autour — */
.mpk-tapis{position:relative;display:flex;flex-direction:column;gap:7px;padding:12px 14px 16px;border-radius:40px/34px;
  background:
    radial-gradient(80% 90% at 50% 45%,rgba(176,36,63,.26),transparent 75%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 18px),
    #1B2A36;
  box-shadow:inset 0 0 0 3px #B0243F,inset 0 0 0 5px #0B0E13,0 0 0 2px #0B0E13,0 6px 0 2px #0B0E13}
.mpk-rail{position:absolute;inset:4px;pointer-events:none;z-index:0;opacity:.8}
.mpk-rail svg{display:block;width:100%;height:100%}
.mpk-train{position:absolute;left:0;top:0;z-index:25;width:66px;height:17px;opacity:0;pointer-events:none;transition:opacity .35s;
  filter:drop-shadow(0 3px 0 rgba(11,14,19,.6))}
.mpk-train.on{opacity:1}
.mpk-train svg{display:block;width:100%;height:100%}
.mpk-tapis > :not(.mpk-rail):not(.mpk-train){position:relative;z-index:1}
.mpk-tapis-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
/* le paquet, avec son épaisseur ; il se mélange en deux moitiés */
.mpk-paquets{display:flex;align-items:center;gap:8px}
.mpk-paquet{position:relative;width:30px;height:42px}
.mpk-paquet-c{position:absolute;inset:0;transform:translate(calc(var(--k) * -.8px),calc(var(--k) * -.8px))}
.mpk-paquet.melange .mpk-paquet-c{animation:mpkMelange .56s ease-in-out calc(var(--k) * 30ms) 2}
.mpk-paquet.melange .mpk-paquet-c:nth-child(odd){animation-name:mpkMelange2}
@keyframes mpkMelange{0%,100%{transform:none}35%{transform:translate(-22px,-4px) rotate(-14deg)}65%{transform:translate(-4px,-10px) rotate(-3deg)}}
@keyframes mpkMelange2{0%,100%{transform:none}35%{transform:translate(22px,-4px) rotate(14deg)}65%{transform:translate(4px,-12px) rotate(3deg)}}
.mpk-paquet-b{width:44px}
/* le pot : une vraie pile de tickets */
.mpk-pot{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 6px;border-radius:999px;background:rgba(11,14,19,.75);box-shadow:0 0 0 2px #E9B949}
.mpk-tas{position:relative;width:62px;height:40px}
.mpk-tas-t{position:absolute;left:50%;bottom:4px;width:28px;height:18px;margin-left:-14px;
  transform:translate(var(--x),var(--y)) rotate(var(--r));animation:mpkPose .25s cubic-bezier(.3,1.6,.5,1)}
.mpk-tas-t .mpk-tk{width:28px;height:18px}
@keyframes mpkPose{from{transform:translate(var(--x),calc(var(--y) - 10px)) rotate(var(--r)) scale(1.2)}}
.mpk-pot-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.mpk-pot-txt b{font-family:var(--display);font-size:1.35rem;color:#FFCE00}
.mpk-pot-txt small{font-family:var(--mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#9AA7B5}
.mpk-pot.choc{animation:mpkChoc .3s ease}
@keyframes mpkChoc{40%{transform:scale(1.08)}}
.mpk-corbeille{width:30px;aspect-ratio:5/7;border-radius:5px;border:2px dashed rgba(255,255,255,.25)}
.mpk-corbeille.choc{animation:mpkChoc .3s ease}
.mpk-centre{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mpk-rang-bonus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 2%}
.mpk-slot{position:relative;aspect-ratio:5/7;border-radius:9px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.mpk-slot--b{aspect-ratio:16/9}
.mpk-slot:has(.mpk-flip){background:none;box-shadow:none}
.mpk-slot > .mpk-flip{position:absolute;inset:0;height:100%}
.mpk-slot.eclat::after{content:"";position:absolute;inset:-6px;border-radius:12px;pointer-events:none;box-shadow:0 0 0 3px #FFCE00;opacity:0;animation:mpkEclat .6s ease .3s}
@keyframes mpkEclat{30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}
/* le bonus monte dans un éclat d'or */
.mpk-slot--b.monte > .mpk-flip{animation:mpkMonte .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes mpkMonte{from{transform:translateY(24px) scale(.7);opacity:0}}
.mpk-rayons{position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,210,62,.35) 0 8deg,transparent 8deg 20deg);
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 70%);mask:radial-gradient(closest-side,#000 20%,transparent 70%);
  opacity:0;animation:mpkRayons 1.3s ease-out both}
@keyframes mpkRayons{0%{opacity:0;transform:rotate(0) scale(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(60deg) scale(1)}}

/* — les deux boutons toujours là — */
.mpk-outils{display:flex;align-items:stretch;gap:6px}
.mpk-outils .mpk-phase{flex:1;min-width:0}
.mpk-outil{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 4px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-size:.6rem;line-height:1.05;font-weight:800;text-align:center;color:#FFF6DC;background:#233546;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mpk-outil svg{width:22px;height:22px;flex:none}
.mpk-outil:active{transform:translateY(2px)}
.mpk-outil[disabled]{opacity:.45;cursor:default}
.mpk-outil--eclair:not([disabled]){color:#0B0E13;background:#FFCE00}
.mpk-outil--eclair.vif{animation:mpkVif 1.1s ease-in-out infinite}
@keyframes mpkVif{50%{box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13,0 0 0 6px rgba(255,206,0,.45)}}

/* — la phase, le joueur — */
.mpk-phase{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 8px;border-radius:14px;text-align:center;
  color:#0B0E13;background:#FFF8E6;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mpk-phase b{font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.1}
.mpk-phase span{font-size:.72rem;color:#5A5048}
.mpk-phase.bouge{animation:mpkPhase .35s cubic-bezier(.3,1.5,.5,1)}
@keyframes mpkPhase{from{transform:scale(.94);opacity:.4}}
.mpk-moi{display:flex;flex-direction:column;gap:6px}
.mpk-moi-tete{align-self:center}
.mpk-moi-tete-in{flex-direction:row;gap:8px;padding:3px 12px 3px 4px;border-radius:999px}
.mpk-moi-tete-in .mpk-av{width:30px;height:32px}
.mpk-moi-tete-in .mpk-mise{position:static}
.mpk-moi-tete-in .mpk-etat{min-height:0}
.mpk-moi-tete-in .mpk-bulle{top:-6px}
.mpk-main{min-width:0;display:flex;justify-content:center;gap:6px;padding-top:10px;min-height:60px}
.mpk-main > *{width:min(92px,calc((100% - (var(--n,5) - 1) * 6px) / var(--n,5)));flex:none}
.mpk-main.couche > *{filter:grayscale(.85) brightness(.75)}
.mpk-main .mpk-carte.vise{transform:translateY(-14px) rotate(-3deg);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #E3051C,0 3px 0 5px #0B0E13}
.mpk-main .mpk-carte.vise::after{content:"Jeter";position:absolute;left:50%;top:40%;translate:-50% 0;padding:.15em .5em;border-radius:6px;z-index:3;
  font:800 max(8px,11cqw) var(--display);text-transform:uppercase;color:#fff;background:#E3051C;box-shadow:0 0 0 1.5px #0B0E13;rotate:-10deg}

/* — les boutons d'action — */
.mpk-actions{display:flex;gap:7px;min-height:50px}
.mpk-bt{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;padding:10px 8px;border:0;border-radius:14px;
  font:inherit;font-weight:800;font-size:.88rem;color:#0B0E13;background:#FFF8E6;cursor:pointer;
  box-shadow:0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13;touch-action:manipulation}
.mpk-bt:active{transform:translateY(3px);box-shadow:0 0 0 2px #0B0E13,0 1px 0 2px #0B0E13}
.mpk-bt[disabled]{opacity:.5;cursor:default;transform:none}
.mpk-bt svg{width:30px;height:15px;flex:none}
.mpk-bt em{display:flex;align-items:center;gap:3px;font-style:normal;font-family:var(--display);font-size:.8rem}
.mpk-bt em .mpk-tk{width:17px;height:11px}
.mpk-bt--suivre{background:#FFCE00}
.mpk-bt--relance{color:#fff;background:#B0243F;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.mpk-bt--couche{flex:.8 1 0;color:#E7ECF2;background:#2A3744}
.mpk-bt--jeter{color:#fff;background:#E3051C}
.mpk-bt--jeter[disabled]{color:#0B0E13;background:#FFF8E6}
.mpk-bt--doux{flex:.7 1 0;color:#E7ECF2;background:#2A3744}
.mpk-bt--ok{color:#fff;background:linear-gradient(180deg,#D23A57,#B0243F);text-shadow:0 2px 0 rgba(11,14,19,.3)}
.mpk-bt--grand{padding:13px 10px;font-size:1rem}
.mpk-bt--suite{background:#FFCE00}
.mpk-bt--corr{color:#0B0E13;background:#8FF4FF}
.mpk-attente{flex:1;display:flex;align-items:center;justify-content:center;margin:0;font-size:.8rem;color:#9AA7B5;font-style:italic}

/* — ce qui vole — */
.mpk-vol{position:absolute;inset:0;pointer-events:none;z-index:60;overflow:visible}
.mpk-volant{position:absolute;pointer-events:none;will-change:transform}
.mpk-vol-tk .mpk-tk{width:28px;height:18px}
.mpk-vol-tk--or .mpk-tk{filter:drop-shadow(0 0 6px #FFCE00)}
.mpk-vol-dos{width:44px}
.mpk-vol-carte{width:64px}
.mpk-vol-clone{width:60px}
.mpk-vol-clone.mpk-bonus{width:96px}

/* ============================ LES PANNEAUX ============================= */
.mpk-panneau-hote{position:absolute;inset:0;z-index:40;display:none;justify-content:center;align-items:flex-start;
  padding:10px 8px;border-radius:inherit;overflow-y:auto;overscroll-behavior:contain}
.mpk-jeu.mpk-voile .mpk-panneau-hote{display:flex;background:rgba(6,9,13,.8)}
.mpk-surcouche-hote{position:absolute;inset:0;z-index:70;pointer-events:none}
.mpk-surcouche{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:14px 8px;overflow-y:auto;
  pointer-events:auto;background:rgba(6,9,13,.82);border-radius:inherit;animation:mpkFondu .2s ease both}
.mpk-surcouche.sort{animation:mpkFonduSort .2s ease both}
.mpk-surcouche--loupe{align-items:center}
@keyframes mpkFondu{from{opacity:0}}
@keyframes mpkFonduSort{to{opacity:0}}
.mpk-panneau{position:relative;width:min(580px,100%);padding:12px;border-radius:20px;color:#0B0E13;background:#FFF8E6;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;animation:mpkPanneau .38s cubic-bezier(.3,1.4,.5,1) both}
.mpk-panneau.secoue{animation:mpkSecoue .4s ease}
@keyframes mpkPanneau{from{transform:translateY(26px) scale(.95);opacity:0}}
@keyframes mpkSecoue{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.mpk-panneau-t{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.mpk-panneau-t > b{font-family:var(--display);font-weight:800;font-size:1.12rem;text-transform:uppercase;letter-spacing:.02em}
.mpk-panneau-s{margin:6px 0;font-size:.8rem;color:#5A5048;text-align:center}
.mpk-panneau-bts{display:flex;gap:8px;margin-top:12px}
.mpk-legende{display:flex;align-items:center;gap:6px;margin:10px 0 5px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#6A5A48}
.mpk-pastille-moi{width:10px;height:10px;border-radius:50%;background:#B0243F;box-shadow:0 0 0 1.5px #0B0E13}
.mpk-regles-n{margin:8px 0 0;font-size:.74rem;color:#6A5A48}
.mpk-bareme-p{background:#14212C;color:#E7ECF2}
.mpk-bareme-p .mpk-regles-n{color:#9AA7B5}
/* la loupe */
.mpk-loupe{display:flex;flex-direction:column;align-items:center;gap:14px;animation:mpkLoupe .35s cubic-bezier(.3,1.5,.5,1) both}
@keyframes mpkLoupe{from{transform:scale(.4) rotate(-6deg);opacity:0}}
.mpk-loupe-c{width:min(62vw,240px)}
.mpk-loupe-b{width:min(86vw,380px)}
.mpk-loupe .mpk-bt{flex:none;min-width:160px}
/* l'annonce éclair */
.mpk-eclair-main{display:flex;justify-content:center;gap:8px;padding-top:10px}
.mpk-eclair-main .mpk-carte{width:min(88px,30%)}
.mpk-eclair-bonus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:10px}
.mpk-eclair-verdict{display:none;margin-top:10px;padding:10px;border-radius:12px;text-align:center;box-shadow:0 0 0 2px #0B0E13}
.mpk-eclair-verdict.on{display:grid;gap:3px;animation:mpkLoupe .35s cubic-bezier(.3,1.5,.5,1) both}
.mpk-eclair-verdict.ok{background:#C9F2D6}
.mpk-eclair-verdict.ko{background:#FFD2D6}
.mpk-eclair-verdict b{font-family:var(--display);font-size:1rem}
.mpk-eclair-verdict span{font-size:.8rem}
/* une carte choisie : elle se lève, cernée */
.mpk-jeu .choisie{transform:translateY(-8px);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 4px 0 5px #0B0E13!important}
.mpk-bonus.deja{opacity:.4;filter:grayscale(.7)}

/* — le temps des annonces — */
.mpk-ann{width:min(640px,100%)}
.mpk-ann-compte{display:flex;flex-direction:column;align-items:center;line-height:1}
.mpk-ann-compte small{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:#6A5A48}
.mpk-compteur{padding:3px 10px;border-radius:999px;font-family:var(--display);color:#fff;background:#5A626E;box-shadow:0 0 0 2px #0B0E13}
.mpk-compteur.plein{background:#129A4A}
.mpk-ann-vaut{font-family:var(--display);font-size:1.3rem;color:#B0243F}
.mpk-ann-rang{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px 2px 0}
.mpk-ann-rang--moi{grid-template-columns:repeat(5,minmax(0,1fr))}
.mpk-ann-rang--b{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mpk-ann-rang .utilisee::before{content:attr(data-n);position:absolute;right:4%;top:3%;z-index:4;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  font:800 .62rem var(--display);color:#fff;background:#129A4A;box-shadow:0 0 0 1.5px #0B0E13}
.mpk-carte.a-moi{box-shadow:0 0 0 2px #0B0E13,0 0 0 4px #B0243F,0 3px 0 4px #0B0E13}
.mpk-ann-aide{min-height:1.2em;margin:10px 0 0;text-align:center;font-size:.8rem;font-weight:700;color:#B0243F}
.mpk-ann-bts{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.mpk-ann-bts .mpk-bt{flex:1 1 40%}
.mpk-ann-plateau{display:flex;flex-direction:column;gap:8px}
.mpk-ann-vide{margin:0;padding:12px;border-radius:12px;text-align:center;font-size:.78rem;color:#8A7A68;border:2px dashed rgba(11,14,19,.2)}
/* une annonce : son nom, ses cartes, un lien */
.mpk-puce-ann{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t x" "c c" "p p";align-items:center;gap:6px 8px;padding:8px 10px;border-radius:14px;
  background:#fff;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mpk-puce-ann.arrive{animation:mpkArrive .45s cubic-bezier(.3,1.5,.5,1) both}
.mpk-puce-ann.sort{animation:mpkFonduSort .2s ease both}
@keyframes mpkArrive{from{transform:scale(.6);opacity:0}}
.mpk-puce-ann--suite{background:#FFF4C4}
.mpk-puce-ann--corr{background:#DDF9FF}
.mpk-puce-t{grid-area:t;font-family:var(--display);font-weight:800;font-size:.86rem;white-space:nowrap}
.mpk-puce-cartes{grid-area:c;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;overflow-x:auto;padding:2px 2px 4px}
.mpk-puce-ann--suite .mpk-puce-cartes{position:relative}
.mpk-puce-ann--suite .mpk-puce-cartes .mpk-carte + .mpk-carte{margin-left:-4px}
.mpk-lien{width:18px;height:4px;border-radius:2px;background:#0B0E13;position:relative}
.mpk-lien::before,.mpk-lien::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mpk-lien::before{left:-5px}.mpk-lien::after{right:-5px}
.mpk-puce-x{grid-area:x;width:28px;height:28px;border:0;border-radius:50%;cursor:pointer;font:800 1rem var(--display);color:#fff;background:#5A626E;box-shadow:0 0 0 2px #0B0E13}
/* à l'abattage : le tampon et l'explication */
.mpk-tampon{grid-area:x;padding:3px 8px;border-radius:8px;font:800 .7rem var(--display);text-transform:uppercase;letter-spacing:.04em;opacity:0}
.mpk-pourquoi{grid-area:p;font-size:.74rem;color:#4A4F57;opacity:0}
.mpk-puce-ann.attente{opacity:.55}
.mpk-puce-ann.ok,.mpk-puce-ann.ko{animation:mpkVerifie .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes mpkVerifie{35%{transform:scale(1.04)}}
.mpk-puce-ann.ok{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #3ED07A,0 3px 0 5px #0B0E13}
.mpk-puce-ann.ko{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #E3051C,0 3px 0 5px #0B0E13;background:#FFE6E8}
.mpk-puce-ann.ok .mpk-tampon,.mpk-puce-ann.ko .mpk-tampon{opacity:1;animation:mpkTampon .35s cubic-bezier(.2,1.6,.45,1) both}
.mpk-puce-ann.ok .mpk-tampon{color:#fff;background:#129A4A;box-shadow:0 0 0 2px #0B0E13;rotate:-6deg}
.mpk-puce-ann.ko .mpk-tampon{color:#fff;background:#E3051C;box-shadow:0 0 0 2px #0B0E13;rotate:5deg}
.mpk-puce-ann.ok .mpk-pourquoi,.mpk-puce-ann.ko .mpk-pourquoi{opacity:1;transition:opacity .4s .2s}
@keyframes mpkTampon{0%{transform:scale(2.4);opacity:0}70%{transform:scale(.92);opacity:1}100%{transform:none}}
.mpk-rien{font-size:.78rem;font-style:italic;color:#6A5A48}
.mpk-abat{width:min(640px,100%)}
.mpk-abat-pot{display:flex;align-items:baseline;gap:5px;padding:3px 10px;border-radius:999px;background:#0B0E13;color:#FFCE00}
.mpk-abat-pot b{font-family:var(--display)}
.mpk-abat-pot small{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:#9AA7B5}
.mpk-compo-bonus{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:8px}
.mpk-abat-l{position:relative;display:grid;gap:8px;margin-top:10px;padding:10px;border-radius:16px;background:#fff;
  box-shadow:0 0 0 2px #0B0E13;transition:box-shadow .25s,transform .25s}
.mpk-abat-l.moi{background:#FFF1F3}
.mpk-abat-l.vise{transform:scale(1.01);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00}
.mpk-abat-l.gagne{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #3ED07A;animation:mpkGagne .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes mpkGagne{40%{transform:scale(1.03)}}
.mpk-abat-tete{display:flex;align-items:center;gap:8px}
.mpk-abat-tete > b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.mpk-abat-av{display:block;width:34px;height:36px;border-radius:50%;background:#FFF8E6;box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.mpk-abat-av svg{display:block;width:100%;height:100%;transform:translateY(3px)}
.mpk-abat-av--grand{width:72px;height:76px;margin:6px auto 0}
.mpk-abat-total{display:flex;align-items:baseline;gap:3px}
.mpk-abat-pts{font-family:var(--display);font-size:1.4rem;line-height:1}
.mpk-abat-total small{font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;color:#6A5A48}
.mpk-abat-cartes{display:grid;grid-template-columns:repeat(5,minmax(0,64px));gap:6px}
.mpk-abat-cartes .mpk-flip{width:100%}
.mpk-abat-puces{display:grid;gap:8px}
.mpk-penalite{position:absolute;right:10px;top:10px;padding:2px 7px;border-radius:999px;font:800 .64rem var(--display);
  color:#fff;background:#E3051C;box-shadow:0 0 0 1.5px #0B0E13;animation:mpkPop .3s cubic-bezier(.3,1.7,.5,1)}
.mpk-verdict{display:none;margin-top:12px;padding:10px 12px;border-radius:14px;text-align:center;color:#fff;background:#0E3A6B;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #0E3A6B,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mpk-verdict.on{display:block;animation:mpkPanneau .45s cubic-bezier(.3,1.4,.5,1) both}
.mpk-verdict b{font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}
.mpk-abat--court{text-align:center}
.mpk-apres{margin-top:10px;border-radius:14px;background:#14212C;color:#E7ECF2;box-shadow:0 0 0 2px #0B0E13}
.mpk-apres-bt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:0;background:none;
  font:inherit;font-size:.84rem;font-weight:800;color:inherit;cursor:pointer}
.mpk-apres-bt::after{content:"";width:8px;height:8px;border-right:2.4px solid currentColor;border-bottom:2.4px solid currentColor;transform:rotate(45deg)}
.mpk-apres.on .mpk-apres-bt::after{transform:rotate(-135deg)}
.mpk-apres-corps{display:none;padding:0 12px 12px;font-size:.8rem;line-height:1.45}
.mpk-apres.on .mpk-apres-corps{display:block}
.mpk-apres-corps ul{margin:0;padding-left:16px}
.mpk-apres-corps b{color:#FFCE00}
.mpk-apres-corps p{margin:8px 0 0;color:#C9D2DC}

/* ============================ SUR ORDINATEUR ============================ */
@media (min-width:761px){
  .mpk-enseigne{height:290px}
  .mpk-eventail > *{width:104px}
  .mpk-jeu{padding:10px 12px;gap:8px}
  .mpk-sieges{grid-template-columns:repeat(var(--n),minmax(0,118px));justify-content:center;gap:10px}
  .mpk-av{width:44px;height:46px}
  .mpk-nom{font-size:.8rem}
  .mpk-tapis{padding:16px 40px 20px}
  .mpk-centre{grid-template-columns:repeat(5,90px);justify-content:center;gap:10px}
  .mpk-rang-bonus{grid-template-columns:repeat(3,150px);justify-content:center;gap:14px}
  .mpk-outils{max-width:640px;width:100%;margin:0 auto}
  .mpk-outil{width:92px;font-size:.66rem}
  .mpk-train{width:92px;height:23px}
  .mpk-main > *{width:min(100px,calc((100% - (var(--n,5) - 1) * 8px) / var(--n,5)))}
  .mpk-main{gap:8px;padding-top:10px}
  .mpk-phase{padding:4px 10px}
  .mpk-actions{max-width:560px;width:100%;margin:0 auto}
  .mpk-panneau{padding:16px}
  .mpk-ann-rang--moi{grid-template-columns:repeat(5,minmax(0,1fr))}
  .mpk-carte.mini{width:52px}
  .mpk-bonus.mini{width:92px}
}
@media (prefers-reduced-motion:reduce){
  .mpk-jeu *,.mpk-menu *{animation:none!important;transition:none!important}
  .mpk-vol,.mpk-train{display:none}
}
/* @@ fin metropoker.css @@ */
/* @@ debut runner_divin.css @@ */
/* ==========================================================================
   METRO RUNNER — LE SANCTUAIRE DU DIVIN
   Une case à part, en tête du rayon des tenues : l'affiche à gauche (en
   haut sur téléphone), le panneau à droite. Nuit profonde, or, émail.
   ========================================================================== */
.rdv-sanct{grid-column:1/-1;position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:22px;align-items:center;padding:20px;border-radius:24px;overflow:hidden;color:#FFF6DC;
  background:#03040E;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFD86B,0 0 0 9px #0B0E13,0 12px 0 9px #0B0E13}
.rdv-fond{position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 70% at 25% 40%,rgba(255,216,107,.22),transparent 70%),
    radial-gradient(50% 60% at 80% 70%,rgba(143,244,255,.14),transparent 70%),
    repeating-conic-gradient(from 0deg at 25% 40%,rgba(255,233,160,.07) 0 6deg,transparent 6deg 12deg),
    linear-gradient(170deg,#0B1B4D,#03040E 60%,#1A0E33)}
.rdv-fond::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,246,220,.12) 48%,transparent 56%);
  background-size:260% 100%;animation:rdvLustre 5s linear infinite}
@keyframes rdvLustre{from{background-position:120% 0}to{background-position:-120% 0}}

/* — l'affiche — */
.rdv-affiche{position:relative;display:flex;flex-direction:column;align-items:center;padding:10px 10px 12px;border-radius:12px;
  background:#F2E6C4;color:#0B1B4D;box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 5px #F2E6C4,inset 0 0 0 7px #B98900,0 8px 0 3px #0B0E13}
.rdv-aff-bandeau,.rdv-aff-pied{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;white-space:nowrap;
  font-family:var(--mono);font-size:.56rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.rdv-aff-bandeau{padding:0 4px 8px}
.rdv-aff-bandeau b{font-family:var(--display);font-size:.66rem;letter-spacing:.06em;color:#8A6A10}
@media (max-width:420px){ .rdv-aff-bandeau,.rdv-aff-pied{font-size:.5rem;letter-spacing:.08em} .rdv-aff-bandeau b{font-size:.6rem} }
.rdv-aff-cadre{position:relative;width:100%;aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:#020308;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #B98900,0 0 0 7px #0B0E13}
.rdv-affiche-cv{display:block;width:100%;height:100%}
.rdv-coin{position:absolute;width:26px;height:26px;border:3px solid #FFD86B;pointer-events:none}
.rdv-coin--hg{left:7px;top:7px;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.rdv-coin--hd{right:7px;top:7px;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.rdv-coin--bg{left:7px;bottom:7px;border-right:0;border-top:0;border-radius:0 0 0 10px}
.rdv-coin--bd{right:7px;bottom:7px;border-left:0;border-top:0;border-radius:0 0 10px 0}
.rdv-titre{display:flex;justify-content:center;gap:.04em;margin:10px 0 0;font-family:var(--display);font-weight:900;
  font-size:clamp(2.4rem,9vw,3.4rem);line-height:1;letter-spacing:.14em;text-transform:uppercase}
.rdv-titre span{display:inline-block;background:linear-gradient(180deg,#FFF6DC 0%,#FFD86B 45%,#B98900 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #0B0E13) drop-shadow(0 0 10px rgba(255,216,107,.55))}
.rdv-joue .rdv-titre span{opacity:0;transform:translateY(24px) scale(.6)}
.rdv-fini .rdv-titre span{animation:rdvLettre .7s cubic-bezier(.2,1.6,.4,1) calc(var(--i) * 110ms) both}
@keyframes rdvLettre{0%{opacity:0;transform:translateY(24px) scale(.6);filter:blur(6px)}100%{opacity:1;transform:none}}
.rdv-aff-sous{margin:4px 0 8px;font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:#1C3A8E}
.rdv-aff-pied{padding:6px 4px 0;border-top:2px solid #0B1B4D}
.rdv-aff-pied b{font-family:var(--display);letter-spacing:.08em;color:#8A6A10}
.rdv-joue .rdv-aff-sous,.rdv-joue .rdv-cote{opacity:.25;transition:opacity .4s}
.rdv-fini .rdv-cote,.rdv-fini .rdv-aff-sous{opacity:1;transition:opacity .8s}

/* — le panneau — */
.rdv-cote{display:flex;flex-direction:column;gap:10px;min-width:0}
.rdv-rar{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:.9rem;letter-spacing:.3em;text-transform:uppercase;color:#0B0E13;
  background:linear-gradient(90deg,#FFD86B,#FFF6DC,#8FF4FF,#FFF6DC,#FFD86B);background-size:300% 100%;animation:rdvRar 3s linear infinite;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 18px rgba(255,216,107,.6)}
.rdv-rar i{width:7px;height:7px;border-radius:50%;background:#0B0E13}
@keyframes rdvRar{to{background-position:300% 0}}
.rdv-unique{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#FFD86B}
.rdv-nom{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1;color:#FFF6DC;
  text-shadow:0 3px 0 #0B0E13,0 0 22px rgba(255,216,107,.45)}
.rdv-desc{margin:0;font-size:.86rem;line-height:1.5;color:#D8DEF0}
.rdv-traits{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rdv-traits li{position:relative;padding-left:22px;font-size:.78rem;line-height:1.4;color:#AEB8D6}
.rdv-traits b{color:#FFF6DC}
.rdv-trait-ico{position:absolute;left:0;top:3px;width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #FFF6DC,0 0 0 3.5px #0B0E13}
.rdv-prix{display:flex;align-items:center;gap:10px;margin-top:4px}
.rdv-prix-ico{width:52px;height:38px;flex:none}
.rdv-prix-ico svg{width:100%;height:100%}
.rdv-prix b{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,4.6vw,2.2rem);letter-spacing:.02em;
  background:linear-gradient(180deg,#FFF6DC,#FFD86B 50%,#B98900);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #0B0E13)}
.rdv-prix small{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#FFD86B}
.rdv-jauge{display:grid;gap:5px}
.rdv-jauge-j{height:10px;border-radius:999px;background:#0B1B4D;box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.rdv-jauge-j i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8FF4FF,#FFD86B)}
.rdv-jauge small{font-size:.72rem;color:#AEB8D6}
.rdv-bts{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.rdv-bt{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-weight:800;font-size:.84rem;color:#FFF6DC;background:#12276A;box-shadow:0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13}
.rdv-bt:active{transform:translateY(3px);box-shadow:0 0 0 2px #0B0E13,0 1px 0 2px #0B0E13}
.rdv-bt--or{color:#0B0E13;background:linear-gradient(180deg,#FFF1B8,#FFD86B 50%,#E0A82E)}
.rdv-bt--or[disabled]{cursor:default;color:#6A6F86;background:#1A2340;transform:none}
.rdv-bt--on{color:#0B0E13;background:#8FF4FF;cursor:default}
.rdv-essai .rdv-affiche{animation:rdvEssai .9s ease}
@keyframes rdvEssai{30%{transform:scale(1.03) rotate(-1deg)}}

/* — l'écran entier réagit à la révélation — */
.rdv-ecran{position:fixed;inset:0;z-index:9400;pointer-events:none;
  background:radial-gradient(60% 60% at var(--x) var(--y),transparent 0,rgba(2,3,8,.55) 55%,rgba(2,3,8,.85) 100%);
  animation:rdvEcran 7.4s ease both}
@keyframes rdvEcran{0%{opacity:0}8%{opacity:1}82%{opacity:1}100%{opacity:0}}
.rdv-ecran i{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;border-radius:50%}
.rdv-ecran-rayons{width:260vmax;height:260vmax;
  background:repeating-conic-gradient(rgba(255,233,160,.14) 0 5deg,transparent 5deg 10deg);
  -webkit-mask:radial-gradient(closest-side,#000 10%,transparent 60%);mask:radial-gradient(closest-side,#000 10%,transparent 60%);
  animation:rdvRayons 7s linear both}
@keyframes rdvRayons{0%{opacity:0;transform:rotate(0) scale(.4)}30%{opacity:1}100%{opacity:.7;transform:rotate(40deg) scale(1)}}
.rdv-ecran-anneau{width:20px;height:20px;box-shadow:0 0 0 3px rgba(255,216,107,.9),0 0 30px 6px rgba(143,244,255,.6);
  animation:rdvAnneau 2.2s ease-out .5s 3 both}
@keyframes rdvAnneau{0%{opacity:1;width:20px;height:20px}100%{opacity:0;width:140vmax;height:140vmax}}
.rdv-ecran-flash{width:100vmax;height:100vmax;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,233,160,.5) 40%,transparent 70%);
  opacity:0;animation:rdvFlash 1.1s ease-out 5.8s both}
@keyframes rdvFlash{0%{opacity:0;transform:scale(.3)}25%{opacity:1}100%{opacity:0;transform:scale(1.4)}}

/* — la cinématique d'achat — */
.rdv-cine{position:fixed;inset:0;z-index:9600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;
  overflow-y:auto;animation:rdvCine .5s ease both}
.rdv-cine.sort{animation:rdvCineSort .45s ease both}
@keyframes rdvCine{from{opacity:0}}
@keyframes rdvCineSort{to{opacity:0}}
.rdv-cine-voile{position:fixed;inset:0;z-index:-1;background:radial-gradient(70% 70% at 50% 45%,#0B1B4D,#020308 75%)}
.rdv-cine-cv{max-width:92vw;height:auto!important;border-radius:14px;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFD86B,0 0 0 9px #0B0E13,0 0 80px rgba(255,216,107,.35)}
.rdv-titre--cine{margin:6px 0 0;font-size:clamp(3rem,12vw,5rem)}
.rdv-cine .rdv-titre span{opacity:0}
.rdv-cine.fini .rdv-titre span{animation:rdvLettre .8s cubic-bezier(.2,1.6,.4,1) calc(var(--i) * 130ms) both}
.rdv-cine-sous{margin:0;max-width:40ch;text-align:center;color:#D8DEF0;font-size:.9rem;opacity:0;transition:opacity .8s .9s}
.rdv-cine-bt{opacity:0;transition:opacity .6s 1.3s}
.rdv-cine.fini .rdv-cine-sous,.rdv-cine.fini .rdv-cine-bt{opacity:1}

/* — l'apparition au départ de la course — */
.rdv-apparition{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}

/* — le rayon des rames, et les nouveautés dans les onglets — */
.rvx-onglet.rdv-neuf::after{content:"";position:absolute;right:8px;top:8px;width:10px;height:10px;border-radius:50%;
  background:#FF4FA0;box-shadow:0 0 0 2px #0B0E13;animation:rdvPoint 1.4s ease-in-out infinite}
@keyframes rdvPoint{50%{transform:scale(1.35)}}
.rvx-porte-l--divin b{background:linear-gradient(90deg,#FFD86B,#FFF6DC,#8FF4FF);-webkit-background-clip:text;background-clip:text;color:transparent}

@media (max-width:760px){
  .rdv-sanct{grid-template-columns:1fr;padding:14px;gap:16px}
  .rdv-affiche{max-width:380px;justify-self:center;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .rdv-fond::after,.rdv-rar,.rdv-ecran,.rdv-ecran i{animation:none!important}
  .rdv-joue .rdv-titre span{opacity:1;transform:none}
}
/* @@ fin runner_divin.css @@ */
/* @@ debut snake_refonte.css @@ */
/* ==========================================================================
   SNAKE MÉTRO — LA REFONTE
   Une couleur à lui : l'orange. Surfaces plates, trait noir de 2 px, ombre
   dure et courte ; les panneaux crème alternent avec l'émail sombre. Le
   jeu passe en plein écran, le plateau toujours centré.
   ========================================================================== */
.sk3,.sk3-jeu,.sk3-fiche-fond{--k:#0B0E13;--or:#FF7A2F;--or2:#E3600F;--cr:#FBF4E4;--cr2:#EFE4CB;--sa:#E2D3B0;
  --em:#17212D;--em2:#0F1720;--gr:#8E97A2;--ok:#3ED07A}
.sk3 button,.sk3-jeu button,.sk3-fiche-fond button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sk3-pic{display:inline-grid;place-items:center;flex:none;width:1.4em;height:1.4em}
.sk3-pic svg{display:block;width:100%;height:100%;overflow:visible}
.sk3{max-width:1160px;margin:0 auto;display:flex;flex-direction:column;gap:14px;color:var(--cr)}

/* ————————————————————————— la scène d'accueil ————————————————————————— */
.sk3-tete{position:relative;display:flex;flex-direction:column;gap:10px}
.sk3-hero{position:relative;height:clamp(230px,62vw,380px);border-radius:20px;overflow:hidden;background:var(--em2);
  border:2px solid var(--k);box-shadow:0 5px 0 var(--k);animation:sk3Monte .5s cubic-bezier(.2,.9,.3,1.1) both}
.sk3-hero-scene,.sk3-hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk3-hero-haut{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sk3-marque{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.sk3-marque-sur{padding:4px 10px;border-radius:999px;background:var(--or);color:var(--k);border:2px solid var(--k);box-shadow:0 3px 0 var(--k);
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.sk3-marque-t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,6vw,2.4rem);line-height:1;
  color:#fff;letter-spacing:-.01em;text-shadow:0 3px 0 var(--k),2px 0 0 var(--k),-2px 0 0 var(--k),0 -2px 0 var(--k)}
.sk3-bourse{display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 4px;border-radius:999px;background:#FFD23E;color:var(--k);
  border:2px solid var(--k);box-shadow:0 3px 0 var(--k)}
.sk3-bourse.bouge{animation:sk3Tape .5s cubic-bezier(.3,1.6,.5,1)}
.sk3-bourse-ico{width:30px;height:30px;border-radius:50%;background:var(--k);padding:3px}
.sk3-bourse-v{display:flex;flex-direction:column;line-height:1}
.sk3-bourse-v b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.sk3-bourse-v small{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sk3-hero-bas{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sk3-hero-ligne{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;padding:4px 12px 4px 4px;border-radius:999px;
  background:var(--cr);color:var(--k);border:2px solid var(--k);box-shadow:0 3px 0 var(--k)}
.sk3-puce{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--k);
  font-family:var(--display);font-weight:800;font-size:.9rem}
.sk3-hero-term{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:.8rem}
.sk3-go{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:9px 18px 9px 10px;border-radius:16px;
  background:var(--or);color:var(--k);border:2px solid var(--k);box-shadow:0 5px 0 var(--k);overflow:hidden;
  transition:transform .12s,box-shadow .12s;animation:sk3Appel 2.6s ease-in-out 1s infinite}
.sk3-go::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:22%;background:rgba(255,255,255,.45);transform:skewX(-20deg);
  animation:sk3Reflet 3.4s ease-in-out infinite}
.sk3-go:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--k)}
.sk3-go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--k)}
.sk3-go-ico{width:38px;height:38px;border-radius:50%;background:#FFD23E;border:2px solid var(--k);padding:5px 4px 5px 7px}
.sk3-go-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.sk3-go-txt b{font-family:var(--display);font-weight:800;font-size:1.08rem;text-transform:uppercase}
.sk3-go-s{font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.8}

/* ————————————————————————— la ligne et le service ————————————————————————— */
.sk3-regl{display:grid;gap:12px}
.sk3-bloc{min-width:0;padding:12px;border-radius:18px;background:var(--cr);color:var(--k);border:2px solid var(--k);box-shadow:0 4px 0 var(--k);
  animation:sk3Monte .5s .08s cubic-bezier(.2,.9,.3,1.1) both}
.sk3-bloc--modes{animation-delay:.14s}
.sk3-h{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:.95rem;text-transform:uppercase}
.sk3-lignes{display:flex;gap:7px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin}
.sk3-l{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:var(--c);color:var(--t);
  border:2px solid var(--k);box-shadow:0 3px 0 var(--k);font-family:var(--display);font-weight:800;font-size:.95rem;scroll-snap-align:center;
  transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}
.sk3-l:hover{transform:translateY(-2px)}
.sk3-l.on{transform:scale(1.14);box-shadow:0 3px 0 var(--k),0 0 0 3px var(--cr),0 0 0 5px var(--k)}
.sk3-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sk3-mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 3px 9px;border-radius:14px;
  background:#fff;color:var(--k);border:2px solid var(--k);box-shadow:0 3px 0 var(--k);text-align:center;transition:transform .14s,background .14s}
.sk3-mode:hover{transform:translateY(-2px)}
.sk3-mode.on{background:#FFD23E;transform:translateY(-2px);box-shadow:0 5px 0 var(--k)}
.sk3-mode.lock{opacity:.55}
.sk3-mode-j{display:block;width:64px}
.sk3-mode-j svg{display:block;width:100%;height:auto}
.sk3-mode.on .sk3-aiguille{animation:sk3Aiguille .8s cubic-bezier(.3,1.7,.5,1)}
.sk3-aiguille{transform-origin:30px 31px}
.sk3-mode-t{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.sk3-mode-t{min-width:0;max-width:100%}
.sk3-mode-t b{font-family:var(--display);font-weight:800;font-size:clamp(.56rem,2.5vw,.78rem);letter-spacing:-.01em;text-transform:uppercase;overflow-wrap:anywhere}
.sk3-mode-t small{font-size:.66rem;font-weight:600;opacity:.75}
.sk3-mode-t em{font-style:normal;font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.06em;opacity:.6}

/* ————————————————————————— le carnet ————————————————————————— */
.sk3-carnet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sk3-fiche-s{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:14px;background:var(--em);border:2px solid var(--k);
  box-shadow:0 3px 0 var(--k);animation:sk3Monte .45s calc(.2s + var(--i)*.06s) cubic-bezier(.2,.9,.3,1.1) both}
.sk3-fiche-s .sk3-pic{width:32px;height:32px;padding:4px;border-radius:10px;background:var(--em2);border:2px solid var(--k)}
.sk3-fs-t{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.sk3-fs-t b{font-family:var(--display);font-weight:800;font-size:1.1rem;color:#fff}
.sk3-fs-t small{font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--a)}

/* ————————————————————————— l'atelier ————————————————————————— */
.sk3-atelier,.sk3-succes{padding:14px 12px;border-radius:20px;background:var(--cr2);color:var(--k);border:2px solid var(--k);box-shadow:0 5px 0 var(--k)}
.sk3-succes{background:var(--em);color:var(--cr)}
.sk3-at-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}
.sk3-sur{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--a,var(--or));border:2px solid var(--k);color:var(--k);
  font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:background .2s}
.sk3-sur--or{background:#FFD23E}
.sk3-at-t{margin:6px 0 0;font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,4.4vw,1.55rem);text-transform:uppercase;line-height:1}
.sk3-at-n{flex:none;padding:4px 9px;border-radius:999px;background:var(--k);color:#fff;font-family:var(--mono);font-size:.6rem;font-weight:700}
.sk3-cats{display:flex;gap:7px;overflow-x:auto;padding:3px 2px 9px;margin:0 -2px;scrollbar-width:thin}
.sk3-cat{flex:none;display:flex;align-items:center;gap:6px;padding:5px 11px 5px 5px;border-radius:999px;background:#fff;color:var(--k);
  border:2px solid var(--k);box-shadow:0 3px 0 var(--k);transition:transform .14s,background .14s}
.sk3-cat .sk3-pic{width:28px;height:28px;padding:3px;border-radius:50%;background:var(--em);border:2px solid var(--k)}
.sk3-cat-n{font-family:var(--display);font-weight:800;font-size:.8rem;text-transform:uppercase}
.sk3-cat-c{font-style:normal;font-family:var(--mono);font-size:.56rem;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--cr2)}
.sk3-cat:hover{transform:translateY(-2px)}
.sk3-cat.on{background:var(--a);transform:translateY(-2px);box-shadow:0 5px 0 var(--k)}
.sk3-cat.on .sk3-cat-c{background:var(--k);color:#fff}
.sk3-cat-dit{margin:2px 2px 12px;font-size:.84rem;line-height:1.4;font-weight:500;opacity:.8}
.sk3-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sk3-carte{position:relative;display:flex;flex-direction:column;padding:0;border-radius:14px;overflow:hidden;background:#fff;color:var(--k);
  border:2px solid var(--k);box-shadow:0 4px 0 var(--k);text-align:left;transition:transform .15s,box-shadow .15s}
.sk3-grille.entre .sk3-carte{animation:sk3Carte .42s calc(var(--i)*.035s) cubic-bezier(.2,.9,.3,1.2) both}
.sk3-carte:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--k)}
.sk3-carte:active{transform:translateY(2px);box-shadow:0 2px 0 var(--k)}
.sk3-carte.on{box-shadow:0 4px 0 var(--k),0 0 0 3px var(--ok)}
.sk3-carte-vis{position:relative;aspect-ratio:16/10;background:var(--em2);border-bottom:2px solid var(--k)}
.sk3-carte-vis canvas{display:block;width:100%;height:100%}
.sk3-carte.lock .sk3-carte-vis canvas{filter:saturate(.55) brightness(.86)}
.sk3-carte.lock.dispo .sk3-carte-vis canvas{filter:none}
.sk3-rar{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:999px;background:var(--ra);color:var(--k);border:2px solid var(--k);
  font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sk3-r--mythique .sk3-rar,.sk3-r--celeste .sk3-rar{background:var(--rb);color:var(--ra)}
.sk3-neuf{position:absolute;right:6px;top:6px;padding:2px 7px;border-radius:999px;background:#E3051C;color:#fff;border:2px solid var(--k);
  font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;animation:sk3Clin 1.6s ease-in-out infinite}
.sk3-carte-on{position:absolute;right:6px;bottom:6px;width:28px;height:28px;animation:sk3Tampon .4s cubic-bezier(.3,1.7,.5,1) both}
.sk3-carte-lock{position:absolute;right:6px;bottom:6px;width:30px;height:30px;filter:drop-shadow(0 2px 0 var(--k))}
.sk3-carte.dispo .sk3-carte-lock{animation:sk3Balance 1.8s ease-in-out infinite}
.sk3-carte-txt{display:flex;flex-direction:column;gap:5px;padding:8px 9px 9px;border-top:4px solid var(--ra)}
.sk3-carte-txt b{font-family:var(--display);font-weight:800;font-size:.8rem;line-height:1.12;text-transform:uppercase;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sk3-carte-pied em{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;background:var(--cr2);
  font-style:normal;font-family:var(--mono);font-size:.62rem;font-weight:700}
.sk3-carte-pied em:not(.prix){padding-left:8px}
.sk3-carte-pied em.ok{background:var(--ok)}
.sk3-carte-pied em.prix{background:#FFD23E}
.sk3-carte-pied em.prix.non{background:var(--cr2);color:#6B6452}
.sk3-carte-pied .sk3-pic{width:16px;height:16px}

/* ————————————————————————— les succès ————————————————————————— */
.sk3-medailles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sk3-med{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:var(--em2);border:2px solid var(--k);color:var(--gr);
  animation:sk3Monte .4s calc(var(--i)*.05s) both}
.sk3-med .sk3-pic{width:34px;height:34px}
.sk3-med b{display:block;font-family:var(--display);font-weight:800;font-size:.74rem;text-transform:uppercase;line-height:1.1}
.sk3-med small{display:block;font-size:.66rem;line-height:1.25;margin-top:2px}
.sk3-med.on{background:#FFD23E;color:var(--k);box-shadow:0 3px 0 var(--k)}
.sk3-med.on .sk3-pic{animation:sk3Brille 2.6s calc(var(--i)*.3s) ease-in-out infinite}

/* ————————————————————————— la fiche d'une pièce ————————————————————————— */
.sk3-fiche-fond{position:fixed;inset:0;z-index:950;display:flex;align-items:flex-end;justify-content:center;background:rgba(6,9,14,0);
  transition:background .25s}
.sk3-fiche-fond.on{background:rgba(6,9,14,.66)}
.sk3-fiche{position:relative;width:min(560px,100%);max-height:94dvh;overflow:auto;border-radius:22px 22px 0 0;background:var(--cr);color:var(--k);
  border:2px solid var(--k);border-bottom:0;transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.9,.3,1.05)}
.sk3-fiche-fond.on .sk3-fiche{transform:none}
.sk3-fiche-fond.sort .sk3-fiche{transform:translateY(105%);transition-duration:.22s}
.sk3-fiche-vis{position:relative;aspect-ratio:16/10;background:var(--em2);border-bottom:2px solid var(--k);overflow:hidden}
.sk3-fiche-vis canvas{position:relative;z-index:1;display:block;width:100%;height:100%}
.sk3-fiche-rayons{position:absolute;inset:-60%;z-index:2;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.5) 0 8deg,transparent 8deg 22deg)}
.sk3-fiche.revele .sk3-fiche-rayons{animation:sk3Rayons 1.6s ease-out both}
.sk3-tampon{position:absolute;left:50%;top:50%;z-index:3;padding:6px 18px;border-radius:10px;background:var(--ra);color:var(--k);
  border:3px solid var(--k);box-shadow:0 5px 0 var(--k);font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase;
  opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(-14deg);pointer-events:none}
.sk3-fiche.revele .sk3-tampon{animation:sk3Frappe 1.7s cubic-bezier(.3,1.5,.5,1) both}
.sk3-fiche.equipe .sk3-fiche-vis{animation:sk3Tape .45s cubic-bezier(.3,1.6,.5,1)}
.sk3-fiche-x{position:absolute;right:10px;top:10px;z-index:4;display:grid;place-items:center;width:40px;height:40px;padding:8px;border-radius:50%;
  background:var(--k);border:2px solid var(--k);box-shadow:0 3px 0 rgba(0,0,0,.4)}
.sk3-fiche-x .sk3-pic{width:100%;height:100%}
.sk3-fiche-txt{padding:14px 16px 4px}
.sk3-fiche-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sk3-rar--plat,.sk3-neuf--plat{position:static}
.sk3-fiche-cat{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;background:var(--em);color:#fff;
  font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.sk3-fiche-cat .sk3-pic{width:18px;height:18px}
.sk3-fiche-n{margin:10px 0 6px;font-family:var(--display);font-weight:800;font-size:1.5rem;text-transform:uppercase;line-height:1}
.sk3-fiche-d{margin:0;font-size:.92rem;line-height:1.45}
.sk3-fiche-act{padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
.sk3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 16px;border-radius:14px;
  background:#fff;color:var(--k);border:2px solid var(--k);box-shadow:0 4px 0 var(--k);font-family:var(--display);font-weight:800;
  font-size:.92rem;text-transform:uppercase;transition:transform .12s,box-shadow .12s}
.sk3-btn .sk3-pic{width:24px;height:24px}
.sk3-btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--k)}
.sk3-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--k)}
.sk3-fiche-act .sk3-btn{width:100%}
.sk3-btn--go{background:var(--or)}
.sk3-btn--ok{background:var(--ok);cursor:default}
.sk3-btn--ok:hover{transform:none;box-shadow:0 4px 0 var(--k)}
.sk3-btn--achat{justify-content:space-between;background:#FFD23E;padding-left:20px}
.sk3-btn--achat em{display:inline-flex;align-items:center;gap:5px;padding:4px 12px 4px 5px;border-radius:999px;background:var(--k);color:#FFD23E;font-style:normal}
.sk3-btn--achat em .sk3-pic{width:22px;height:22px}
.sk3-manque{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:14px;background:var(--cr2);border:2px solid var(--k)}
.sk3-manque-t{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600}
.sk3-manque-t .sk3-pic{width:26px;height:26px}
.sk3-manque-j{height:12px;border-radius:999px;background:#fff;border:2px solid var(--k);overflow:hidden}
.sk3-manque-j i{display:block;height:100%;background:#FFD23E;border-right:2px solid var(--k);animation:sk3Jauge .8s .2s cubic-bezier(.2,.9,.3,1) both}
.sk3-manque small{font-family:var(--mono);font-size:.62rem;font-weight:700;text-align:right}

@media (min-width:900px){
  .sk3-go{position:absolute;right:18px;bottom:18px;width:auto}
  .sk3-hero-bas{right:320px}
}
@media (min-width:640px){
  .sk3-regl{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  .sk3-lignes{flex-wrap:wrap;overflow:visible}
  .sk3-carnet{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sk3-grille{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sk3-medailles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sk3-atelier,.sk3-succes{padding:18px}
  .sk3-hero-haut{left:18px;right:18px;top:18px}.sk3-hero-bas{left:18px;right:18px;bottom:18px}
  .sk3-fiche-fond{align-items:center}
  .sk3-fiche{border-radius:22px;border-bottom:2px solid var(--k);box-shadow:0 6px 0 var(--k);transform:translateY(30px) scale(.94);opacity:0;
    transition:transform .3s cubic-bezier(.2,.9,.3,1.15),opacity .2s}
  .sk3-fiche-fond.on .sk3-fiche{opacity:1}
  .sk3-fiche-fond.sort .sk3-fiche{transform:translateY(30px) scale(.94);opacity:0}
}
@media (min-width:1000px){ .sk3-grille{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ————————————————————————— la partie, en plein écran ————————————————————————— */
html.sk3-verrou,html.sk3-verrou body{overflow:hidden!important;overscroll-behavior:none}
.sk3-attente{padding:40px 0;text-align:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gr,#8E97A2)}
.sk3-jeu{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;gap:6px;
  padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 44px),var(--em2);color:var(--cr);
  touch-action:none;user-select:none;-webkit-user-select:none;animation:sk3Entre .35s ease-out both}
.sk3-hud{display:flex;align-items:center;gap:8px;min-height:52px;padding:5px 6px;border-radius:16px;background:var(--em);
  border:2px solid var(--k);box-shadow:0 3px 0 var(--k)}
.sk3-h-ligne{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--k);
  box-shadow:0 2px 0 var(--k),0 0 0 2px #fff inset;font-family:var(--display);font-weight:800;font-size:1rem}
.sk3-h-ligne.bascule{animation:sk3Bascule .55s cubic-bezier(.3,1.4,.5,1)}
.sk3-h-score{display:flex;flex-direction:column;min-width:0;line-height:1}
.sk3-h-score small{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gr)}
.sk3-h-score b{font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff;font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center}
.sk3-h-score.gain b{animation:sk3Gain .35s cubic-bezier(.3,1.6,.5,1)}
.sk3-h-mid{display:flex;align-items:center;gap:8px;margin-left:auto}
.sk3-h-mini{display:flex;align-items:center;gap:3px;font-family:var(--display);font-weight:800;font-size:.95rem;color:#fff}
.sk3-h-mini .sk3-pic{width:22px;height:22px}
.sk3-h-combo{position:relative;width:40px;height:40px;flex:none}
.sk3-h-combo svg{position:absolute;inset:0;width:100%;height:100%}
.sk3-combo-arc{transition:stroke-dashoffset .12s linear}
.sk3-h-combo b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:.8rem;color:#fff}
.sk3-h-combo.chaud b{color:#FFB43E}
.sk3-h-combo.feu b{color:#FFCE00}
.sk3-h-combo.saut{animation:sk3Tape .4s cubic-bezier(.3,1.7,.5,1)}
.sk3-h-tick{display:flex;align-items:center;gap:1px}
.sk3-tk{width:24px;height:24px;transition:opacity .3s,filter .3s}
.sk3-tk.use{opacity:.3;filter:grayscale(1);animation:sk3Perdu .6s ease-out}
.sk3-h-sans{font-family:var(--mono);font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FF8A8A;max-width:44px;line-height:1.1}
.sk3-h-btns{display:flex;gap:6px}
.sk3-rond{display:grid;place-items:center;width:40px;height:40px;padding:7px;border-radius:12px;background:var(--em2);border:2px solid var(--k);
  box-shadow:0 3px 0 var(--k);transition:transform .1s,box-shadow .1s}
.sk3-rond .sk3-pic{width:100%;height:100%}
.sk3-rond:active{transform:translateY(3px);box-shadow:0 0 0 var(--k)}
.sk3-obj{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"i t p" "i j j";column-gap:8px;row-gap:4px;
  align-items:center;padding:6px 10px 7px 7px;border-radius:14px;background:var(--cr);color:var(--k);border:2px solid var(--k);box-shadow:0 3px 0 var(--k);overflow:hidden}
.sk3-obj-ico{grid-area:i;width:30px;height:30px}
.sk3-obj-t{grid-area:t;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:.78rem;text-transform:uppercase}
.sk3-obj-p{grid-area:p;font-style:normal;font-family:var(--mono);font-size:.6rem;font-weight:700;white-space:nowrap}
.sk3-obj-j{grid-area:j;height:9px;border-radius:999px;background:#fff;border:2px solid var(--k);overflow:hidden}
.sk3-obj-j i{display:block;height:100%;width:0;background:var(--c,#FF7A2F);transition:width .3s cubic-bezier(.2,.9,.3,1)}
.sk3-obj.neuf{animation:sk3Obj .5s cubic-bezier(.3,1.5,.5,1)}
.sk3-obj-ok{position:absolute;right:10px;top:50%;padding:3px 12px;border-radius:8px;background:var(--ok);border:2px solid var(--k);
  font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;opacity:0;transform:translateY(-50%) scale(2) rotate(-10deg);pointer-events:none}
.sk3-obj.fait .sk3-obj-ok{animation:sk3Frappe 1.3s cubic-bezier(.3,1.5,.5,1) both}
.sk3-zone{position:relative;flex:1 1 auto;min-height:0;display:grid;place-items:center}
.sk3-plateau{position:relative;border-radius:16px;overflow:hidden;background:var(--em2);border:2px solid var(--k);box-shadow:0 4px 0 var(--k);touch-action:none}
.sk3-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.sk3-flash{position:absolute;inset:0;pointer-events:none;opacity:0}
.sk3-flash.rouge{background:#E3051C}
.sk3-flash.or{background:#FFCE00}
.sk3-flash.on{animation:sk3Flash .5s ease-out both}
.sk3-bas{flex:none;display:flex;justify-content:center;align-items:center}
.sk3-pad{position:relative;width:min(172px,46vw);aspect-ratio:1;border-radius:50%;background:var(--em);border:2px solid var(--k);box-shadow:0 4px 0 var(--k)}
.sk3-p{position:absolute;display:grid;place-items:center;width:36%;height:36%;padding:6px;border-radius:14px;background:var(--or);
  border:2px solid var(--k);box-shadow:0 4px 0 var(--k);touch-action:none;transition:transform .08s,box-shadow .08s}
.sk3-p .sk3-pic{width:100%;height:100%}
.sk3-p--haut{left:32%;top:3%}.sk3-p--bas{left:32%;bottom:5%}.sk3-p--gauche{left:3%;top:30%}.sk3-p--droite{right:3%;top:30%}
.sk3-p.appui,.sk3-p:active{transform:translateY(3px);box-shadow:0 1px 0 var(--k);background:#FFD23E}
.sk3-pad-c{position:absolute;left:50%;top:48%;display:grid;place-items:center;width:22%;height:22%;margin:-11% 0 0 -11%;border-radius:50%;
  border:2px solid var(--k);font-family:var(--display);font-weight:800;font-size:.8rem}
.sk3-touches{display:none;align-items:center;gap:10px 18px;flex-wrap:wrap;justify-content:center;font-size:.78rem;color:#C9CFD6}
.sk3-touches>.sk3-pic{width:30px;height:30px}
.sk3-touches kbd{display:inline-block;padding:1px 7px;border-radius:6px;background:var(--cr);color:var(--k);border:2px solid var(--k);box-shadow:0 2px 0 var(--k);
  font-family:var(--mono);font-size:.64rem;font-weight:700}
.sk3-jeu:not(.tactile) .sk3-pad{display:none}
.sk3-jeu:not(.tactile) .sk3-touches{display:flex}
/* téléphone couché : la croix passe à droite du plateau */
@media (orientation:landscape) and (max-height:560px){
  .sk3-jeu{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"h h" "z b";gap:6px 8px}
  .sk3-hud{grid-area:h;min-height:44px;padding:3px 6px}
  .sk3-obj{display:none}
  .sk3-zone{grid-area:z}
  .sk3-bas{grid-area:b}
  .sk3-jeu.tactile .sk3-pad{width:min(150px,40vh)}
  .sk3-h-ligne,.sk3-rond,.sk3-h-combo{width:34px;height:34px}
}
@media (min-width:900px) and (min-height:600px){
  .sk3-jeu{padding:14px 20px 16px;gap:10px;max-width:none}
  .sk3-hud,.sk3-obj{width:min(100%,1100px);margin:0 auto}
  .sk3-hud{min-height:60px;padding:6px 10px;gap:14px}
  .sk3-h-score b{font-size:1.6rem}
  .sk3-obj-t{font-size:.9rem}
}

/* — les calques : pause, aide, terminus — */
.sk3-calque{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(6,9,14,.72);overflow:auto}
.sk3-calque.on{display:flex;animation:sk3Fondu .25s ease-out both}
.sk3-panneau{position:relative;width:min(430px,100%);max-height:100%;overflow:auto;padding:18px 16px 16px;border-radius:22px;background:var(--cr);color:var(--k);
  border:2px solid var(--k);box-shadow:0 6px 0 var(--k);text-align:center;animation:sk3Pan .42s cubic-bezier(.2,.9,.3,1.2) both}
.sk3-pan-t{margin:4px 0 4px;font-family:var(--display);font-weight:800;font-size:1.35rem;text-transform:uppercase}
.sk3-pan-d{margin:0 0 14px;font-size:.88rem;opacity:.75}
.sk3-pan-btns{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.sk3-pan-btns .sk3-btn{width:100%}
.sk3-panneau--aide{text-align:left;width:min(520px,100%)}
.sk3-aide-tete{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sk3-aide-tete>.sk3-pic{width:30px;height:30px}
.sk3-aide-tete b{font-family:var(--display);font-weight:800;font-size:1.2rem;text-transform:uppercase}
.sk3-rond--x{margin-left:auto;background:var(--k)}
.sk3-aide-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.sk3-aide-l li{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:12px;background:#fff;border:2px solid var(--k);
  animation:sk3Monte .35s calc(var(--i)*.04s) both}
.sk3-aide-l li b{display:block;font-family:var(--display);font-weight:800;font-size:.76rem;text-transform:uppercase}
.sk3-aide-l li span{display:block;font-size:.76rem;line-height:1.3}
.sk3-aide-rond{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--k)}
.sk3-aide-rond::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--c);border:1.5px solid var(--k)}
.sk3-aide-rond>*{position:relative;z-index:1}
.sk3-aide-rond svg{width:22px;height:22px}
.sk3-aide-rond b{font-family:var(--display);font-weight:800;font-size:.8rem}
.sk3-aide-rond.neutre::before{inset:9px;background:#fff;border:4px solid #2B3340}
.sk3-aide-rond.corr{box-shadow:0 0 0 3px var(--c),0 0 0 5px var(--k)}
.sk3-aide-pic{width:36px;height:36px}
.sk3-aide-cmd{display:flex;flex-wrap:wrap;gap:8px 14px;margin:12px 0 4px;font-size:.78rem;font-weight:600}
.sk3-aide-cmd span{display:inline-flex;align-items:center;gap:6px}
.sk3-aide-cmd .sk3-pic{width:26px;height:26px}
.sk3-panneau--aide>.sk3-btn{width:100%;margin-top:10px}
/* le bilan */
.sk3-fin{background:rgba(6,9,14,.6)}
.sk3-panneau--fin{width:min(460px,100%);padding-top:14px}
.sk3-fin-plaque{display:inline-block;margin:0 auto 6px;padding:4px;border-radius:10px;background:#153E8C;border:2px solid var(--k);box-shadow:0 4px 0 var(--k);
  animation:snkPlaque .5s .5s cubic-bezier(.3,1.5,.5,1) both}
.sk3-fin-plaque span{display:block;padding:4px 22px;border-radius:7px;border:2px solid #fff;color:#fff;font-family:var(--display);font-weight:800;
  font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase}
.sk3-fin-cause{margin:6px 0 2px;font-size:.84rem;font-weight:600;color:#8A2A1E}
.sk3-fin-score{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px;animation:sk3Monte .4s .3s both}
.sk3-fin-score small{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.sk3-fin-score b{font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.sk3-fin-record{display:inline-flex;align-items:center;gap:6px;margin:2px auto 8px;padding:4px 14px 4px 6px;border-radius:999px;background:#FFD23E;
  border:2px solid var(--k);box-shadow:0 3px 0 var(--k);font-family:var(--display);font-weight:800;font-size:.86rem;text-transform:uppercase;
  animation:sk3Frappe2 .6s 1.3s cubic-bezier(.3,1.6,.5,1) both}
.sk3-fin-record .sk3-pic{width:26px;height:26px}
.sk3-fin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0}
.sk3-fin-s{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 3px;border-radius:12px;background:#fff;border:2px solid var(--k);
  animation:sk3Monte .35s calc(.55s + var(--i)*.08s) both}
.sk3-fin-s .sk3-pic{width:24px;height:24px}
.sk3-fin-s b{font-family:var(--display);font-weight:800;font-size:1rem}
.sk3-fin-s small{font-size:.56rem;font-weight:700;line-height:1.1;opacity:.7}
.sk3-fin-jetons{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border-radius:14px;background:var(--em);color:#fff;border:2px solid var(--k);
  text-align:left;animation:sk3Monte .4s .85s both}
.sk3-fin-jetons>.sk3-pic{width:40px;height:40px;animation:sk3Piece 1.4s 1s ease-in-out both}
.sk3-fin-jetons>span{display:flex;flex-direction:column;line-height:1.05}
.sk3-fin-jetons b{font-family:var(--display);font-weight:800;font-size:1.4rem;color:#FFD23E}
.sk3-fin-jetons small{font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.sk3-fin-caisse{margin-left:auto;align-items:flex-end}
.sk3-fin-caisse em{font-style:normal;font-family:var(--display);font-weight:800;font-size:1rem}
.sk3-fin-lab{margin:12px 0 6px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.sk3-fin-succes{display:grid;gap:6px;text-align:left}
.sk3-fin-succes .sk3-med{animation:sk3Carte .45s calc(1.2s + var(--i)*.12s) cubic-bezier(.2,.9,.3,1.3) both}
@media (orientation:landscape) and (max-height:560px){
  .sk3-calque{padding:8px}
  .sk3-panneau--fin{width:min(760px,100%);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4px 16px;align-items:center;padding:10px 14px}
  .sk3-panneau--fin .snk-fin-scene{max-width:260px}
  .sk3-fin-score b{font-size:2rem}
  .sk3-panneau--fin .sk3-pan-btns{margin-top:8px}
  .sk3-panneau--fin .sk3-btn{min-height:40px}
  .sk3-panneau--aide{width:min(720px,100%)}
  .sk3-aide-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:520px){ .sk3-pan-btns{flex-direction:row;flex-wrap:wrap}.sk3-pan-btns .sk3-btn{flex:1 1 0;width:auto;font-size:.8rem;padding:8px 10px} }

@keyframes sk3Monte{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sk3Carte{from{opacity:0;transform:translateY(18px) scale(.9)}to{opacity:1;transform:none}}
@keyframes sk3Entre{from{opacity:0}to{opacity:1}}
@keyframes sk3Fondu{from{opacity:0}to{opacity:1}}
@keyframes sk3Pan{from{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:none}}
@keyframes sk3Tape{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes sk3Gain{0%{transform:scale(1)}40%{transform:scale(1.18);color:#FFD23E}100%{transform:scale(1)}}
@keyframes sk3Appel{0%,86%,100%{transform:none}90%{transform:translateY(-4px) rotate(-1.5deg)}95%{transform:translateY(0) rotate(1deg)}}
@keyframes sk3Reflet{0%,60%{left:-40%}100%{left:130%}}
@keyframes sk3Aiguille{from{transform:rotate(-90deg)}}
@keyframes sk3Clin{50%{transform:scale(1.08)}}
@keyframes sk3Balance{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes sk3Tampon{from{opacity:0;transform:scale(2.2) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes sk3Brille{0%,80%,100%{transform:none}88%{transform:scale(1.15) rotate(-8deg)}}
@keyframes sk3Rayons{0%{opacity:0;transform:rotate(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:rotate(90deg) scale(1)}}
@keyframes sk3Frappe{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(-14deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(-8deg)}}
@keyframes sk3Frappe2{from{opacity:0;transform:scale(2) rotate(-10deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes sk3Jauge{from{width:0}}
@keyframes sk3Bascule{0%{transform:rotateY(0)}50%{transform:rotateY(90deg) scale(1.2)}100%{transform:rotateY(0)}}
@keyframes sk3Obj{0%{transform:translateY(-8px);opacity:.3}100%{transform:none;opacity:1}}
@keyframes sk3Perdu{0%{transform:scale(1.5) rotate(-20deg);opacity:1;filter:none}100%{transform:none;opacity:.3}}
@keyframes sk3Flash{0%{opacity:.5}100%{opacity:0}}
@keyframes sk3Piece{0%{transform:rotateY(0)}100%{transform:rotateY(720deg)}}
@media (prefers-reduced-motion:reduce){
  .sk3 *,.sk3-jeu *,.sk3-fiche-fond *{animation-duration:.01s!important;animation-iteration-count:1!important}
}
/* @@ fin snake_refonte.css @@ */

/* @@ debut metropoker3.css @@ */
/* ==========================================================================
   MÉTRO POKER — LA TABLE DE CASINO
   Dans la famille de Métro King : cadre sombre à filet d'or, plaques crème
   bordées de la couleur du joueur, bannières jaunes, trait noir et ombre
   dure. La table est un stade : rail de bois, filet d'or, feutre vert.
   ========================================================================== */
.mpk3,.mpk3-menu,.mpk3-surcouche--menu{--k:#0B0E13;--cr:#FBF6E9;--cr2:#E9DFC8;--jaune:#FFCE00;--cerise:#B0243F;
  --ombre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mpk3{--cc:90px;--cm:100px;--mini:34px;--cmax:110px;
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px;width:100%;
  height:calc(100dvh - 112px);min-height:540px;padding:8px clamp(6px,1.2vw,14px) 10px;border-radius:26px;overflow:hidden;isolation:isolate;
  color:var(--cr);font-family:var(--body,inherit);
  background:
    radial-gradient(120% 60% at 50% -10%,rgba(255,170,120,.16),transparent 60%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 30px),
    linear-gradient(180deg,#2B1520,#120A10 72%);
  box-shadow:inset 0 0 0 3px #0B0E13,inset 0 0 0 6px rgba(232,177,58,.38),0 18px 40px rgba(0,0,0,.45)}
.mpk3.mob-plein,.mpk3:fullscreen{position:fixed;inset:0;z-index:9000;height:100dvh;border-radius:0;max-height:none}
.mpk3:fullscreen{position:relative}
.mpk3 button{font:inherit;-webkit-tap-highlight-color:transparent}
.mpk3-ico{display:inline-grid;place-items:center;flex:none;width:1.3em;height:1.3em}
.mpk3-ico svg,.mpk3-bt svg,.mpk3-go svg,.mpk3-m-lien svg,.mpk3-x svg{display:block;width:100%;height:100%}

/* ————————————————————————— le bandeau ————————————————————————— */
.mpk3-barre{display:flex;align-items:center;gap:8px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px}
.mpk3-barre::-webkit-scrollbar{display:none}
.mpk3-manche{flex:none;display:grid;grid-template-columns:auto auto auto;align-items:baseline;column-gap:5px;padding:.3em .75em .4em;
  border-radius:14px;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:var(--ombre)}
.mpk3-manche small{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase}
.mpk3-manche b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1}
.mpk3-manche>span{font-family:var(--display);font-weight:700;font-size:.72rem}
.mpk3-dots{grid-column:1/-1;display:flex;gap:3px;margin-top:2px}
.mpk3-dots i{width:7px;height:7px;border-radius:50%;background:rgba(11,14,19,.25)}
.mpk3-dots i.fait{background:#0B0E13}
.mpk3-dots i.cours{background:#E3051C;box-shadow:0 0 0 1.5px #0B0E13}
.mpk3-lignes{display:flex;gap:5px;flex:none}
.mpk3-pas{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:var(--i);
  font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:-.04em;box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.mpk3-sp{flex:1 1 auto}
.mpk3-b{flex:none;display:inline-flex;align-items:center;gap:6px;padding:.45em .75em;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);box-shadow:var(--ombre);transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.mpk3-b .mpk3-ico{width:18px;height:18px}
.mpk3-b:hover{transform:translateY(-2px)}
.mpk3-b:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mpk3-b:disabled{opacity:.45;cursor:default;transform:none}
.mpk3-b--eclair{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mpk3-b--eclair.vif{animation:mpk3Vif 1.1s ease-in-out infinite}
.mpk3-b--vite.on{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mpk3-b--quitter{background:linear-gradient(180deg,#FFD9D9,#F5A9A9)}
.mpk3-b--quitter.arme{background:#E3051C;color:#fff}
.mpk3-barre .mob-fs{position:static!important;z-index:auto!important;inset:auto!important;transform:none!important;width:auto!important;height:auto!important;margin:0!important;opacity:1!important}
.mpk3-barre .mob-fs svg{display:block;width:17px;height:17px}

/* ————————————————————————— la salle et la table ————————————————————————— */
.mpk3-salle{position:relative;min-height:0}
.mpk3-table{position:absolute;--rail:16px}
.mpk3.secoue .mpk3-table{animation:mpk3Secoue .38s ease-out}
.mpk3-rail{position:absolute;inset:0;border-radius:9999px;background:linear-gradient(180deg,#83482A,#55291A 60%,#40200F);
  box-shadow:0 0 0 3px #0B0E13,0 9px 0 3px #0B0E13,0 30px 50px rgba(0,0,0,.55),inset 0 3px 0 rgba(255,214,160,.28)}
.mpk3-rail::after{content:"";position:absolute;inset:calc(var(--rail)*.5 - 2px);border-radius:9999px;
  border:2px dashed rgba(255,221,170,.32)}
.mpk3-feutre{position:absolute;inset:var(--rail);border-radius:9999px;overflow:hidden;
  background:radial-gradient(75% 70% at 50% 42%,#2E8D60,#1F6B48 58%,#154D34);
  box-shadow:inset 0 0 0 3px #0B0E13,inset 0 0 0 7px #C8952E,inset 0 0 0 9px #0B0E13,inset 0 0 0 11px rgba(255,226,150,.28),inset 0 18px 44px rgba(0,0,0,.34)}
.mpk3-motif{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mpk3-logo{position:absolute;left:50%;top:calc(var(--zt,40%) - 2px);transform:translate(-50%,-100%);pointer-events:none;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:clamp(.9rem,2.6vw,2.2rem);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.07)}
.mpk3.etroit .mpk3-logo{display:none}
.mpk3-train{position:absolute;left:0;top:0;z-index:5;width:78px;opacity:0;pointer-events:none;transition:opacity .3s;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.mpk3-train.on{opacity:1}
.mpk3-train svg{display:block;width:100%;height:auto}
.mpk3.etroit .mpk3-train{width:54px}

/* ————————————————————————— le centre ————————————————————————— */
.mpk3-centre{position:absolute;left:50%;top:30%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(var(--cc)*.1);transform:translateX(-50%)}
.mpk3-pot{position:relative;display:flex;align-items:center;gap:8px;height:30px;padding:0 14px 0 8px;border-radius:999px;background:rgba(11,14,19,.62);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.55)}
.mpk3-pot.choc{animation:mpk3Choc .38s cubic-bezier(.3,1.6,.5,1)}
.mpk3-tas{position:relative;width:52px;height:26px}
.mpk3-tas-t{position:absolute;left:50%;bottom:-2px;width:32px;transform:translate(calc(-50% + var(--x)),var(--y)) rotate(var(--r));animation:mpk3Tombe .3s ease-out}
.mpk3-tas-t svg,.mpk3-vol-tk svg,.mpk3-mise i svg{display:block;width:100%;height:auto}
.mpk3-pot-n{display:flex;align-items:baseline;gap:5px}
.mpk3-pot-n b{font-family:var(--display);font-weight:800;font-size:1.35rem;color:#FFE08A;font-variant-numeric:tabular-nums}
.mpk3-pot-n small{font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cr2)}
.mpk3-ligne-c{position:relative;display:flex;align-items:center;gap:calc(var(--cc)*.12)}
.mpk3-sabots{display:flex;flex-direction:column;align-items:center;gap:calc(var(--cc)*.1);width:calc(var(--cc)*.78)}
.mpk3-sabot{position:relative;width:100%;aspect-ratio:5/7}
.mpk3-sabot-c{position:absolute;inset:0;transform:translate(calc(var(--k)*-1px),calc(var(--k)*-1.4px))}
.mpk3-sabot.melange .mpk3-sabot-c:nth-child(odd){animation:mpk3CoupeG 1.15s ease-in-out}
.mpk3-sabot.melange .mpk3-sabot-c:nth-child(even){animation:mpk3CoupeD 1.15s ease-in-out}
.mpk3-sabot-b{width:100%}
.mpk3-rangee{display:flex;gap:calc(var(--cc)*.1)}
.mpk3-rangee--b{gap:calc(var(--cc)*.16)}
.mpk3-slot{position:relative;flex:none;width:var(--cc);aspect-ratio:5/7;border-radius:9%/6.4%;
  box-shadow:inset 0 0 0 2px rgba(251,246,233,.3);background:repeating-linear-gradient(45deg,rgba(251,246,233,.06) 0 6px,transparent 6px 12px);
  transition:transform .22s cubic-bezier(.3,1.6,.5,1),filter .2s}
.mpk3-slot--b{width:calc(var(--cc)*1.3);aspect-ratio:16/9;border-radius:9%/16%}
.mpk3-slot.plein{background:none;box-shadow:none}
.mpk3-slot .mpk-flip{width:100%}
.mpk3-slot.choc{animation:mpk3Pose .45s cubic-bezier(.3,1.6,.5,1)}
.mpk3-slot.eclat::before{content:"";position:absolute;inset:-10%;z-index:3;border-radius:14px;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,244,190,.9) 0 8deg,transparent 8deg 30deg);
  -webkit-mask:radial-gradient(closest-side,transparent 55%,#000 56%,transparent 100%);mask:radial-gradient(closest-side,transparent 55%,#000 56%,transparent 100%);
  animation:mpk3Eclair .6s ease-out both}
.mpk3-rayons{position:absolute;left:50%;top:50%;z-index:-1;width:220%;aspect-ratio:1;border-radius:50%;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%);background:repeating-conic-gradient(rgba(255,226,122,.55) 0 10deg,transparent 10deg 24deg)}
.mpk3-slot--b.monte .mpk3-rayons{animation:mpk3Rayons 1.9s ease-out both}
.mpk3-slot--b.monte .mpk-flip{animation:mpk3Monte .6s cubic-bezier(.2,.9,.3,1.35) both}
.mpk3-corbeille{position:relative;width:calc(var(--cc)*.78);aspect-ratio:5/7;border-radius:9%/6.4%;box-shadow:inset 0 0 0 2px rgba(251,246,233,.2)}
.mpk3-corbeille>small{position:absolute;left:50%;top:100%;margin-top:5px;transform:translateX(-50%);font-family:var(--mono);font-size:.5rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(251,246,233,.5);white-space:nowrap}
.mpk3-corbeille.choc{animation:mpk3Pose .4s ease-out}
.mpk3-jet{position:absolute;inset:0;transform:translateX(var(--x)) rotate(var(--r));filter:brightness(.8)}
.mpk3.etroit .mpk3-ligne-c{position:static}
.mpk3.etroit .mpk3-sabots{position:absolute;left:0;top:100%;margin-top:6px;width:calc(var(--cc)*.5);gap:4px}
.mpk3.etroit .mpk3-corbeille{position:absolute;right:0;top:100%;margin-top:6px;width:calc(var(--cc)*.5)}
.mpk3.etroit .mpk3-corbeille>small{display:none}

/* — choisir ses 5 cartes, directement sur la table — */
.mpk3.choix5 .mpk3-slot.choix{cursor:pointer}
.mpk3.choix5 .mpk3-slot.choix:not(.pris){filter:brightness(.78) saturate(.8)}
.mpk3-slot.pris{transform:translateY(-9%) scale(1.04)}
.mpk3-slot.pris::after,.mpk3-mc.pris::after{content:"";position:absolute;inset:-4px;z-index:2;border-radius:12%/8.6%;pointer-events:none;
  box-shadow:0 0 0 3px #FFCE00,0 0 0 5.5px #0B0E13}
.mpk3-pris{position:absolute;right:-9px;top:-9px;z-index:4;width:26px;height:26px;animation:mpk3Tampon .35s cubic-bezier(.3,1.7,.5,1) both}
.mpk3-pris .mpk3-ico{width:100%;height:100%}

/* — la bannière de phase — */
.mpk3-banniere{position:absolute;left:50%;top:calc(var(--zt,30%) + (100% - var(--zt,30%) - var(--zb,30%))/2);z-index:7;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 26px 12px;border-radius:18px;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);opacity:0;pointer-events:none;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 22px 40px rgba(0,0,0,.4);transform:translate(-50%,-50%) scale(.4)}
.mpk3-banniere.on{animation:mpk3Ban .55s cubic-bezier(.2,1.5,.4,1) both}
.mpk3-banniere.sort{animation:mpk3BanSort .3s ease-in both}
.mpk3-banniere b{font-family:var(--display);font-weight:800;font-size:clamp(1.15rem,2.8vw,2rem);text-transform:uppercase;line-height:1;white-space:nowrap}
.mpk3-banniere.gros b{font-size:clamp(1.4rem,4vw,2.9rem)}
.mpk3-banniere small{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mpk3-banniere.or{background:linear-gradient(180deg,#FFF1BF,#E7B23E)}

/* ————————————————————————— les joueurs ————————————————————————— */
.mpk3-plaque{position:absolute;z-index:4;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:7px;
  width:max-content;min-width:126px;max-width:170px;padding:4px 10px 4px 4px;border-radius:14px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E9DFC8);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c),0 4px 0 5px #0B0E13;
  transform:translate(-50%,-50%);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s,filter .3s,opacity .3s}
.mpk3-av{display:block;width:40px;height:44px}
.mpk3-av svg{display:block;width:100%;height:100%}
.mpk3-plaque-t{display:flex;flex-direction:column;min-width:0;line-height:1.05}
.mpk3-plaque-t>b{font-family:var(--display);font-weight:800;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpk3-tk{display:inline-flex;align-items:center;gap:4px;margin-top:3px}
.mpk3-tk svg{width:22px;height:auto}
.mpk3-tk b{font-family:var(--display);font-weight:800;font-size:.92rem;font-variant-numeric:tabular-nums}
.mpk3-plaque.parle{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px var(--c),0 5px 0 6px #0B0E13,0 0 24px var(--c)}
.mpk3-plaque.couche{filter:grayscale(.85) brightness(.78)}
.mpk3-plaque.out{filter:grayscale(1);opacity:.5}
.mpk3-plaque.gagne{animation:mpk3Gagne .8s cubic-bezier(.3,1.6,.5,1)}
.mpk3-couronne{position:absolute;left:10px;top:-24px;width:32px;height:32px;opacity:0;pointer-events:none;transform:translateY(10px) scale(.3) rotate(-25deg)}
.mpk3-plaque.roi .mpk3-couronne{animation:mpk3Couronne .6s .5s cubic-bezier(.3,1.7,.5,1) both}
.mpk3-donneur{position:absolute;right:-9px;top:-9px;display:none;place-items:center;width:21px;height:21px;border-radius:50%;background:#fff;color:#0B0E13;
  font-family:var(--display);font-weight:800;font-size:.66rem;box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.mpk3-plaque.donne .mpk3-donneur{display:grid}
.mpk3-etat{position:absolute;left:50%;top:calc(100% + 5px);z-index:2;padding:1px 8px;border-radius:999px;background:#0B0E13;color:#FBF6E9;
  font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transform:translateX(-50%) scale(0);transition:transform .22s cubic-bezier(.3,1.6,.5,1)}
.mpk3-etat.on{transform:translateX(-50%) scale(1)}
.mpk3-etat.pense::after{content:"";display:inline-block;width:1.4em;text-align:left;animation:mpk3Points 1s steps(4) infinite}
.mpk3-etat.suit{background:#3ED07A;color:#0B0E13;box-shadow:0 0 0 1.5px #0B0E13}
.mpk3-etat.relance{background:#FFCE00;color:#0B0E13;box-shadow:0 0 0 1.5px #0B0E13}
.mpk3-etat.couche{background:#8E97A2;color:#0B0E13}
.mpk3-etat.fait{background:#2A3440}
.mpk3-bulle{position:absolute;left:50%;bottom:calc(100% + 12px);z-index:9;max-width:220px;padding:5px 11px;border-radius:12px;background:#fff;color:#0B0E13;
  font-family:var(--display);font-weight:800;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transform:translateX(-50%) scale(0);transform-origin:50% 130%}
.mpk3-plaque[data-cote="h"] .mpk3-bulle{bottom:auto;top:calc(100% + 26px);transform-origin:50% -30%}
.mpk3-bulle.on{animation:mpk3Bulle 1.9s cubic-bezier(.3,1.6,.5,1) both}
.mpk3-bulle.ok{background:#BFF0CF}.mpk3-bulle.ko{background:#FFD0D0}.mpk3-bulle.gris{background:#E4E1D8}
.mpk3-boum{position:absolute;left:50%;top:50%;z-index:10;display:grid;place-items:center;width:140px;height:116px;pointer-events:none;
  animation:mpk3Boum 1.3s cubic-bezier(.3,1.6,.5,1) both}
.mpk3-boum svg{position:absolute;inset:0;width:100%;height:100%}
.mpk3-boum b{position:relative;font-family:var(--display);font-weight:800;font-size:1.05rem;text-transform:uppercase;transform:rotate(-8deg)}

/* — la place de chacun sur le feutre — */
.mpk3-devant{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;transform:translate(-50%,-50%);pointer-events:none}
.mpk3-dos{display:flex;align-items:center;transition:opacity .3s,transform .3s}
.mpk3-dos>*{flex:none;width:var(--mini);margin-left:calc(var(--mini)*-.62);transform:rotate(calc((var(--k) - (var(--n) - 1)/2)*7deg));transform-origin:50% 130%}
.mpk3-dos>:first-child{margin-left:0}
.mpk3-dos .mpk-flip{width:var(--mini)}
.mpk3-dos.range{opacity:0;transform:scale(.5)}
.mpk3-devant.couche .mpk3-dos{opacity:0;transform:translateY(-10px) scale(.6)}
.mpk3-mise{display:flex;align-items:flex-end}
.mpk3-mise i{display:block;width:24px;margin-left:-16px;transform:translateY(calc(var(--k)*-3px)) rotate(calc(var(--k)*8deg - 12deg))}
.mpk3-mise i:first-child{margin-left:0}
.mpk3-mise b{margin-left:5px;padding:0 7px;border-radius:999px;background:#0B0E13;color:#FFE08A;font-family:var(--display);font-weight:800;font-size:.74rem;
  box-shadow:0 0 0 1.5px #FFCE00}
.mpk3-mise.pop,.mpk3-mise.choc{animation:mpk3Choc .38s cubic-bezier(.3,1.6,.5,1)}
.mpk3-abat{display:none;flex-direction:column;align-items:center;gap:5px}
.mpk3-abat.on{display:flex}
.mpk3-abat.arrive{animation:mpk3Pose .5s cubic-bezier(.3,1.6,.5,1)}
.mpk3-fan{display:flex;align-items:flex-end}
.mpk3-fan-c{flex:none;width:calc(var(--mini)*1.12);margin-left:calc(var(--mini)*-.42);transform:rotate(calc((var(--k) - 2)*7deg));transform-origin:50% 140%}
.mpk3-fan-c:first-child{margin-left:0}
.mpk3-devant.moi{transform:translate(-50%,-100%)}
.mpk3-abat-pts{display:inline-flex;align-items:baseline;gap:3px;padding:1px 10px;border-radius:999px;background:#FBF6E9;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.mpk3-abat-pts b{font-family:var(--display);font-weight:800;font-size:.95rem}
.mpk3-abat-pts small{font-family:var(--mono);font-size:.52rem;font-weight:700}
.mpk3-abat.gagne .mpk3-abat-pts{background:linear-gradient(180deg,#FFE88A,#FFCE00);animation:mpk3Gagne .8s .3s cubic-bezier(.3,1.6,.5,1) both}
.mpk3-abat.gagne .mpk3-fan{animation:mpk3Saute .7s .2s cubic-bezier(.3,1.6,.5,1) both}
.mpk3-devant[data-cote="g"],.mpk3-devant[data-cote="d"]{flex-direction:column}

/* ————————————————————————— votre place ————————————————————————— */
.mpk3-moi{position:absolute;left:50%;bottom:0;z-index:6;display:flex;align-items:flex-end;gap:12px;transform:translateX(-50%);max-width:100%}
.mpk3-plaque.moi{position:relative;left:auto;top:auto;transform:none;margin-bottom:8px;min-width:0;align-self:flex-end}
.mpk3-plaque.moi.parle{transform:scale(1.06)}
.mpk3-main{display:flex;align-items:flex-end;gap:10px}
.mpk3-mc{position:relative;flex:none;width:var(--cm);transform:translateY(0) rotate(calc((var(--k) - (var(--n) - 1)/2)*2.5deg));
  transition:transform .22s cubic-bezier(.3,1.6,.5,1),width .3s;animation:mpk3Main .4s calc(var(--k)*.05s) cubic-bezier(.2,.9,.3,1.3) both}
.mpk3-mc .mpk-carte,.mpk3-mc .mpk-flip{box-shadow:0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13,0 16px 26px rgba(0,0,0,.4)}
.mpk3-mc.choix{cursor:pointer}
.mpk3-mc.choix:hover,.mpk3-mc.vise{transform:translateY(-12px) rotate(0deg)}
.mpk3-mc.vise::after{content:"";position:absolute;inset:-4px;border-radius:12%/8.6%;pointer-events:none;box-shadow:0 0 0 3px #FF5A5A,0 0 0 5.5px #0B0E13}
.mpk3-mc.pris{transform:translateY(-14px) rotate(0deg)}
.mpk3-main.couche{filter:grayscale(.8) brightness(.7);transform:translateY(20%)}

/* ————————————————————————— la rangée des actions ————————————————————————— */
.mpk3-bas{display:flex;align-items:center;gap:10px;min-height:52px;flex-wrap:wrap}
.mpk3-invite{display:flex;flex-direction:column;min-width:0;padding:5px 14px;border-radius:14px;background:rgba(251,246,233,.08);box-shadow:inset 0 0 0 1.5px rgba(251,246,233,.18)}
.mpk3-invite.vide{visibility:hidden}
.mpk3-invite.bouge{animation:mpk3Invite .45s cubic-bezier(.3,1.6,.5,1)}
.mpk3-invite b{font-family:var(--display);font-weight:800;font-size:1rem;text-transform:uppercase;color:#FFE08A;line-height:1.1}
.mpk3-invite span{font-size:.76rem;color:var(--cr2);opacity:.85}
.mpk3-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.mpk3-bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:6px 18px;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:var(--ombre);transition:transform .14s cubic-bezier(.3,1.6,.5,1),box-shadow .14s;animation:mpk3Bt .35s cubic-bezier(.3,1.6,.5,1) both}
.mpk3-bt svg{width:20px;height:20px;flex:none}
.mpk3-bt em{display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 5px;border-radius:999px;background:#0B0E13;color:#FFE08A;font-style:normal;
  font-size:.8rem;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpk3-bt em svg{width:20px;height:auto}
.mpk3-bt:hover{transform:translateY(-2px)}
.mpk3-bt:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mpk3-bt:disabled{opacity:.5;cursor:default;transform:none;filter:grayscale(.4)}
.mpk3-bt--couche{background:linear-gradient(180deg,#FFB3B3,#F07878)}
.mpk3-bt--suivre{background:linear-gradient(180deg,#B8F2CD,#5ED68E)}
.mpk3-bt--relance,.mpk3-bt--or{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mpk3-bt--jeter{background:linear-gradient(180deg,#FFB3B3,#F07878)}
.mpk3-bt--doux{background:linear-gradient(180deg,#FBF6E9,#E7DDC6)}
.mpk3-bt--ok{background:linear-gradient(180deg,#B8F2CD,#5ED68E)}
.mpk3-bt--grand{min-height:52px;padding:6px 24px;font-size:1rem}
.mpk3-compte{display:inline-flex;align-items:baseline;gap:4px;padding:6px 14px;border-radius:14px;background:#0B0E13;color:#FBF6E9;box-shadow:0 0 0 2px rgba(255,206,0,.5)}
.mpk3-compte b{font-family:var(--display);font-weight:800;font-size:1.4rem;color:#FFE08A}
.mpk3-compte small{font-family:var(--display);font-weight:700;font-size:.9rem}
.mpk3-compte.plein{background:#1F6B48;box-shadow:0 0 0 2px #3ED07A}
.mpk3-compte.non{animation:mpk3Non .4s}

/* ————————————————————————— les objets qui volent ————————————————————————— */
.mpk3-vol{position:absolute;inset:0;z-index:30;pointer-events:none;overflow:visible}
.mpk3-volant{position:absolute;will-change:transform}
.mpk3-vol-dos{width:calc(var(--cc)*.7)}
.mpk3-vol-tk{width:30px}
.mpk3-vol-tk.or{filter:drop-shadow(0 0 6px #FFCE00)}
.mpk3-vol-carte,.mpk3-vol-clone{width:var(--cc)}

/* ————————————————————————— le projecteur de l'abattage ————————————————————————— */
.mpk3-scene{position:absolute;left:15%;right:15%;top:5%;bottom:var(--zb,16%);z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:10px;border-radius:22px;background:rgba(10,38,26,.96);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:inset 0 0 0 2px rgba(255,206,0,.5),0 0 0 3px #0B0E13,0 18px 40px rgba(0,0,0,.45);animation:mpk3Scene .35s ease-out both}
.mpk3-scene-t{display:flex;align-items:center;gap:10px;padding:3px 14px 3px 4px;border-radius:999px;background:linear-gradient(180deg,#FBF6E9,#E9DFC8);color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c),0 4px 0 5px #0B0E13}
.mpk3-scene-t .mpk3-av{width:34px;height:37px}
.mpk3-scene-n{font-family:var(--display);font-weight:800;font-size:1rem;text-transform:uppercase}
.mpk3-scene-pts{display:inline-flex;align-items:baseline;gap:3px;padding:1px 10px;border-radius:999px;background:#0B0E13;color:#FFE08A}
.mpk3-scene-pts b{font-family:var(--display);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums}
.mpk3-scene-pts small{font-family:var(--mono);font-size:.55rem}
.mpk3-scene-t.brille{animation:mpk3Gagne .7s cubic-bezier(.3,1.6,.5,1)}
.mpk3-scene-c{display:flex;gap:calc(var(--cc)*.1)}
.mpk3-scene-k{position:relative;flex:none;width:min(calc(var(--cc)*.95),13vw);transition:transform .25s cubic-bezier(.3,1.6,.5,1),filter .25s}
.mpk3-scene-k.vise{transform:translateY(-10px) scale(1.05)}
.mpk3-scene-k.bon::after,.mpk3-scene-k.faux::after{content:"";position:absolute;inset:-4px;border-radius:12%/8.6%;box-shadow:0 0 0 3px #3ED07A,0 0 0 5.5px #0B0E13}
.mpk3-scene-k.faux::after{box-shadow:0 0 0 3px #FF5A5A,0 0 0 5.5px #0B0E13}
.mpk3-scene-k.faux{animation:mpk3Non .4s}
.mpk3-scene-p{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:100%}
.mpk3-rien{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--cr2);opacity:.75}
.mpk3-penalite{position:absolute;right:14px;top:12px;padding:3px 10px;border-radius:999px;background:#E3051C;color:#fff;font-family:var(--display);font-weight:800;
  font-size:.8rem;box-shadow:0 0 0 2px #0B0E13;animation:mpk3Tampon .4s cubic-bezier(.3,1.7,.5,1) both}

/* — une annonce : son nom, ses cartes, son tampon — */
.mpk3-puce{position:relative;display:flex;flex-direction:column;gap:5px;padding:7px 9px 8px;border-radius:12px;background:#FBF6E9;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;transition:filter .2s}
.mpk3-puce.arrive{animation:mpk3Tampon .4s .3s cubic-bezier(.3,1.7,.5,1) both}
.mpk3-puce.sort{animation:mpk3Sort .2s ease-in both}
.mpk3-puce.attente{filter:brightness(.8)}
.mpk3-puce-t{display:flex;align-items:center;gap:5px;font-family:var(--display);font-weight:800;font-size:.72rem;text-transform:uppercase}
.mpk3-puce-t .mpk3-ico{width:18px;height:18px}
.mpk3-puce-c{display:flex;align-items:center;gap:3px}
.mpk3-puce-c .mpk-carte.mini{width:36px}
.mpk3-puce-c .mpk-bonus.mini{width:64px}
.mpk3-lien{display:block;width:10px;height:3px;background:#0B0E13;border-radius:2px}
.mpk3-puce-x{position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:22px;height:22px;padding:3px;border:0;border-radius:50%;background:#0B0E13;cursor:pointer}
.mpk3-tampon{position:absolute;right:-10px;top:-12px;padding:2px 8px;border-radius:7px;font-family:var(--display);font-weight:800;font-size:.66rem;text-transform:uppercase;
  border:2.5px solid currentColor;background:#FBF6E9;opacity:0;transform:scale(2.2) rotate(-14deg)}
.mpk3-puce.ok .mpk3-tampon{color:#11813F;animation:mpk3Frappe .45s cubic-bezier(.3,1.5,.5,1) both}
.mpk3-puce.ko .mpk3-tampon{color:#C8102E;animation:mpk3Frappe .45s cubic-bezier(.3,1.5,.5,1) both}
.mpk3-puce.ok{background:#E6F8EC}
.mpk3-puce.ko{background:#FDE3E3;animation:mpk3Non .4s}
.mpk3-pourquoi{max-width:220px;font-size:.62rem;line-height:1.25;opacity:.75;display:none}
.mpk3-puce.ok .mpk3-pourquoi,.mpk3-puce.ko .mpk3-pourquoi{display:block}

/* ————————————————————————— les panneaux ————————————————————————— */
.mpk3-surcouche-hote{position:absolute;inset:0;z-index:40;pointer-events:none}
.mpk3-surcouche{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(8,6,10,.62);pointer-events:auto;
  animation:mpk3Fondu .22s ease-out both}
.mpk3-surcouche.sort{animation:mpk3Fondu .2s ease-in reverse both}
.mpk3-surcouche--menu{position:fixed;z-index:950}
.mpk3-surcouche--ann{align-items:flex-end;background:rgba(8,6,10,.45)}
.mpk3-panneau{position:relative;width:min(640px,100%);max-height:100%;overflow:auto;padding:14px 16px 16px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#EFE6D0);box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.5);
  animation:mpk3Pan .4s cubic-bezier(.2,.9,.3,1.25) both}
.mpk3-panneau--ann{width:min(820px,100%);max-height:calc(100% - 4px)}
.mpk3-pan-t{display:flex;justify-content:center;margin:-2px 0 10px}
.mpk3-pan-t b{display:inline-block;padding:5px 18px;border-radius:12px;background:linear-gradient(180deg,#FFE88A,#FFCE00);font-family:var(--display);font-weight:800;
  font-size:1.05rem;text-transform:uppercase;box-shadow:var(--ombre);transform:rotate(-1.5deg)}
.mpk3-x{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:36px;height:36px;padding:7px;border:0;border-radius:50%;background:#0B0E13;cursor:pointer}
.mpk3-pan-s{margin:0 0 10px;font-size:.85rem;text-align:center;opacity:.8}
.mpk3-pan-note{margin:10px 0 0;font-size:.72rem;text-align:center;opacity:.65}
.mpk3-pan-bts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}
.mpk3-leg{display:flex;align-items:center;gap:6px;margin:12px 0 12px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.mpk3-leg-moi{width:10px;height:10px;border-radius:50%;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mpk3-ec-rang{display:flex;gap:8px;flex-wrap:wrap}
.mpk3-ec-c{position:relative;width:clamp(58px,13vw,96px);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.mpk3-ec-b{position:relative;width:clamp(110px,24vw,170px);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.mpk3-ec-c.moi::before{content:"";position:absolute;left:50%;bottom:-7px;z-index:3;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mpk3-ec-c.pris,.mpk3-ec-b.pris{transform:translateY(-6px)}
.mpk3-ec-c.pris::after,.mpk3-ec-b.pris::after{content:"";position:absolute;inset:-4px;z-index:2;border-radius:12%/9%;pointer-events:none;box-shadow:0 0 0 3px #FFCE00,0 0 0 5.5px #0B0E13}
.mpk3-ec-b.pris::after{border-radius:10%/18%}
.mpk3-ec-b.deja{opacity:.4}
.mpk3-usage{position:absolute;right:-6px;bottom:-6px;z-index:3;padding:0 6px;border-radius:999px;background:#0B0E13;color:#FFE08A;font-family:var(--display);font-weight:800;font-size:.7rem}
.mpk3-usage:empty{display:none}
.mpk3-ann-tete{display:flex;justify-content:center;margin-bottom:4px}
.mpk3-ann-vaut{display:inline-flex;align-items:baseline;gap:6px;padding:4px 14px;border-radius:999px;background:#0B0E13;color:#FBF6E9}
.mpk3-ann-vaut b{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#FFE08A}
.mpk3-ann-vaut small{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase}
.mpk3-ann-aide{min-height:1.3em;margin:10px 0 6px;font-weight:600;font-size:.85rem;text-align:center}
.mpk3-ann-bts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mpk3-ann-liste{display:flex;flex-wrap:wrap;gap:12px;min-height:10px;padding-top:6px}
.mpk3-ann-vide{margin:0;font-size:.8rem;opacity:.55}
.mpk3-bareme-flot{margin-top:12px;padding:10px;border-radius:14px;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mpk3-bareme-flot .mpk3-bt{margin-top:8px}
.mpk3-verdict-ec{display:none;margin-top:10px;padding:8px 12px;border-radius:12px;box-shadow:0 0 0 2px #0B0E13}
.mpk3-verdict-ec.on{display:flex;flex-direction:column;gap:2px;animation:mpk3Tampon .35s cubic-bezier(.3,1.7,.5,1) both}
.mpk3-verdict-ec.ok{background:#CFF3DA}.mpk3-verdict-ec.ko{background:#FFD6D6}
.mpk3-verdict-ec b{font-family:var(--display);font-weight:800}
.mpk3-verdict-ec span{font-size:.8rem}
.mpk3-loupe{display:flex;justify-content:center}
.mpk3-loupe-c{width:min(300px,70vw);cursor:zoom-out;animation:mpk3Pan .35s cubic-bezier(.2,.9,.3,1.3) both}
.mpk3-loupe-b{width:min(440px,86vw);cursor:zoom-out;animation:mpk3Pan .35s cubic-bezier(.2,.9,.3,1.3) both}
.mpk3-panneau--apres .mpk-apres-bt{display:none}

/* ————————————————————————— le téléphone ————————————————————————— */
.mpk3.etroit{height:calc(100dvh - 96px);min-height:0;gap:6px;padding:6px 6px 8px;border-radius:18px}
.mpk3.etroit .mpk3-b span:last-child{display:none}
.mpk3.etroit .mpk3-b{padding:.45em .5em}
.mpk3.etroit .mpk3-lignes{display:none}
.mpk3.etroit .mpk3-plaque{min-width:0;max-width:96px;grid-template-columns:auto;justify-items:center;row-gap:1px;padding:3px 7px 4px;border-radius:12px;
  box-shadow:0 0 0 2px #0B0E13,0 0 0 4px var(--c),0 3px 0 4px #0B0E13}
.mpk3.etroit .mpk3-av{width:26px;height:28px}
.mpk3.etroit .mpk3-plaque-t{align-items:center}
.mpk3.etroit .mpk3-plaque-t>b{font-size:.64rem;max-width:80px}
.mpk3.etroit .mpk3-tk{margin-top:0}
.mpk3.etroit .mpk3-tk svg{width:16px}
.mpk3.etroit .mpk3-tk b{font-size:.72rem}
.mpk3.etroit .mpk3-couronne{left:50%;top:-20px;width:24px;height:24px;margin-left:-12px}
.mpk3.etroit .mpk3-plaque.moi{grid-template-columns:auto;margin-bottom:4px}
.mpk3.etroit .mpk3-moi{gap:6px}
.mpk3.etroit .mpk3-main{gap:5px}
.mpk3.etroit .mpk3-mise i{width:18px;margin-left:-13px}
.mpk3.etroit .mpk3-bulle{font-size:.66rem;padding:3px 8px;max-width:150px}
.mpk3.etroit .mpk3-etat{font-size:.44rem;padding:1px 5px;top:calc(100% + 3px)}
.mpk3.etroit .mpk3-etat.pense{font-size:0;padding:0 6px}
.mpk3.etroit .mpk3-etat.pense::after{font-size:.62rem;line-height:1.2;width:1.2em}
.mpk3.etroit .mpk3-tk{gap:2px}
.mpk3.etroit .mpk3-boum{width:110px;height:92px}
.mpk3.etroit .mpk3-boum b{font-size:.85rem}
.mpk3.etroit .mpk3-pot{height:26px;padding:0 10px 0 4px}
.mpk3.etroit .mpk3-tas{width:36px}
.mpk3.etroit .mpk3-tas-t{width:24px}
.mpk3.etroit .mpk3-pot-n b{font-size:1.1rem}
.mpk3.etroit .mpk3-bas{gap:6px}
.mpk3.etroit .mpk3-invite{flex:1 1 100%;padding:3px 10px;flex-direction:row;align-items:baseline;gap:8px}
.mpk3.etroit .mpk3-invite b{font-size:.86rem;white-space:nowrap}
.mpk3.etroit .mpk3-invite span{font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpk3.etroit .mpk3-actions{flex:1 1 100%;justify-content:stretch}
.mpk3.etroit .mpk3-actions .mpk3-bt{flex:1 1 0;padding:6px 8px;font-size:.8rem}
.mpk3.etroit .mpk3-actions .mpk3-compte{flex:none}
.mpk3.etroit .mpk3-scene{left:4%;right:4%;top:8%;gap:6px;padding:6px}
.mpk3.etroit .mpk3-scene-k{width:min(calc(var(--cc)*1.05),17vw)}
.mpk3.etroit .mpk3-puce-c .mpk-carte.mini{width:26px}
.mpk3.etroit .mpk3-puce-c .mpk-bonus.mini{width:48px}
.mpk3.etroit .mpk3-puce{padding:5px 6px 6px}
.mpk3.etroit .mpk3-banniere{padding:8px 18px 10px}

/* ————————————————————————— le menu ————————————————————————— */
.mpk3-menu{display:flex;flex-direction:column;gap:14px;max-width:1160px;margin:0 auto;padding:4px 0 10px}
.mpk3-enseigne{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;min-height:230px;padding:18px clamp(10px,3vw,30px);
  border-radius:22px;overflow:hidden;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),
    radial-gradient(90% 90% at 50% 120%,#8A1A33,#3A0E1A 70%);
  box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 6px #C8952E,inset 0 0 0 8px #0B0E13,0 7px 0 3px #0B0E13}
.mpk3-ens-g,.mpk3-ens-d{position:relative;height:180px}
.mpk3-ens-c{position:absolute;top:18px;width:clamp(64px,8vw,104px);animation:mpk3Flotte 4s calc(var(--k)*.4s) ease-in-out infinite}
.mpk3-ens-g .mpk3-ens-c{right:calc(var(--k)*clamp(34px,4.6vw,62px));transform:rotate(calc(-14deg + var(--k)*-7deg))}
.mpk3-ens-d .mpk3-ens-c{left:calc(var(--k)*clamp(34px,4.6vw,62px));transform:rotate(calc(10deg + var(--k)*8deg))}
.mpk3-ens-c .mpk-carte{box-shadow:0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13,0 18px 30px rgba(0,0,0,.5)}
.mpk3-ens-bonus{position:absolute;right:0;bottom:-4px;width:clamp(130px,15vw,184px);transform:rotate(5deg)}
.mpk3-ens-m{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:520px}
.mpk3-ens-m p{margin:0;max-width:440px;font-size:.9rem;line-height:1.45;color:#F3E3E7}
.mpk3-ens-titre{display:flex;align-items:center;margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,6.4vw,4.4rem);line-height:1;letter-spacing:-.01em}
.mpk3-ens-titre span{display:inline-block;color:var(--c);-webkit-text-stroke:2.5px #0B0E13;paint-order:stroke fill;text-shadow:0 5px 0 #0B0E13;
  animation:mpk3Lettre 3.2s calc(var(--i)*.09s) ease-in-out infinite}
.mpk3-ens-titre i{display:inline-block;width:.32em}
.mpk3-ens-pile{display:block;width:70px;height:44px}
.mpk3-m-grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px}
.mpk3-m-pan{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:20px;color:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13;
  animation:mpk3Pan .45s cubic-bezier(.2,.9,.3,1.2) both}
.mpk3-m-pan--creme{background:linear-gradient(180deg,#FBF6E9,#EFE6D0)}
.mpk3-m-pan--cerise{background:linear-gradient(180deg,#F9DDE3,#EFC2CC);animation-delay:.08s}
.mpk3-m-sur{align-self:flex-start;padding:3px 10px;border-radius:999px;background:#0B0E13;color:#FBF6E9;font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mpk3-m-sur--or{background:#B0243F}
.mpk3-m-tetes{display:flex;gap:4px}
.mpk3-m-tetes i{display:block;width:40px;height:44px;border-radius:12px;background:#fff;box-shadow:0 0 0 2px #0B0E13,0 0 0 4px var(--c);animation:mpk3Tampon .35s calc(var(--i)*.05s) cubic-bezier(.3,1.7,.5,1) both}
.mpk3-m-tetes svg{width:100%;height:100%;display:block}
.mpk3-m-q{margin:4px 0 0;font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.mpk3-tuiles{display:flex;gap:7px;flex-wrap:wrap}
.mpk3-tuiles:not(.mpk3-tuiles--niv) .mpk3-tuile{flex:1 1 0;min-width:0;max-width:86px}
.mpk3-tuile{display:flex;flex-direction:column;align-items:center;min-width:62px;padding:6px 10px;border:0;border-radius:12px;cursor:pointer;background:#fff;color:#0B0E13;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.mpk3-tuile b{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1}
.mpk3-tuile small{font-size:.62rem;font-weight:600}
.mpk3-tuile:hover{transform:translateY(-2px)}
.mpk3-tuile.on{background:linear-gradient(180deg,#FFE88A,#FFCE00);transform:translateY(-2px);box-shadow:0 0 0 2px #0B0E13,0 5px 0 2px #0B0E13}
.mpk3-tuile--large{flex-direction:row;gap:10px;flex:1 1 150px;align-items:center;text-align:left}
.mpk3-tuile--large b{font-size:.95rem}
.mpk3-tuile--large span{display:flex;flex-direction:column}
.mpk3-barres{display:flex;align-items:flex-end;gap:2px;height:20px}
.mpk3-barres i{width:5px;border-radius:2px;background:rgba(11,14,19,.2)}
.mpk3-barres i:nth-child(1){height:8px}.mpk3-barres i:nth-child(2){height:14px}.mpk3-barres i:nth-child(3){height:20px}
.mpk3-barres i.on{background:#B0243F}
.mpk3-go{display:inline-flex;align-items:center;justify-content:center;gap:10px;align-self:flex-start;margin-top:10px;padding:12px 22px;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:1.15rem;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  transition:transform .15s cubic-bezier(.3,1.6,.5,1)}
.mpk3-go svg{width:24px;height:24px}
.mpk3-go:hover{transform:translateY(-3px)}
.mpk3-go:active{transform:translateY(3px);box-shadow:0 0 0 3px #0B0E13,0 2px 0 3px #0B0E13}
.mpk3-m-top{display:flex;flex-direction:column;gap:6px}
.mpk3-m-top-l{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-radius:12px;background:#fff;box-shadow:0 0 0 2px #0B0E13;
  animation:mpk3Monte2 .4s calc(.2s + var(--i)*.07s) both}
.mpk3-m-top-l span{font-weight:700;font-size:.86rem}
.mpk3-m-top-l b{font-family:var(--display);font-weight:800;font-size:1.1rem;padding:0 9px;border-radius:999px;background:#0B0E13;color:#FFE08A}
.mpk3-m-liens{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.mpk3-m-lien{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:0;border-radius:12px;cursor:pointer;background:#fff;color:#0B0E13;
  font-family:var(--display);font-weight:800;font-size:.82rem;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mpk3-m-lien svg{width:20px;height:20px}
.mpk3-m-carnet{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.mpk3-m-carnet span{display:flex;flex-direction:column;align-items:center;padding:6px 4px;border-radius:10px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1.5px #0B0E13}
.mpk3-m-carnet b{font-family:var(--display);font-weight:800;font-size:1.1rem}
.mpk3-m-carnet small{font-size:.58rem;text-align:center}
.mpk3-surcouche--menu .mpk3-panneau{max-height:88vh}
@media (max-width:760px){
  .mpk3-enseigne{grid-template-columns:1fr;min-height:0;padding:14px 12px 16px}
  .mpk3-ens-g,.mpk3-ens-d{display:none}
  .mpk3-m-grille{grid-template-columns:minmax(0,1fr)}
  .mpk3-go{align-self:stretch}
}

@keyframes mpk3Ban{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1.5deg)}}
@keyframes mpk3BanSort{from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1.5deg)}to{opacity:0;transform:translate(-50%,-50%) scale(.7) translateY(-20px)}}
@keyframes mpk3Vif{50%{transform:translateY(-2px) scale(1.06);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 18px #FFCE00}}
@keyframes mpk3Secoue{20%{transform:translateX(-5px) rotate(-.3deg)}40%{transform:translateX(5px) rotate(.3deg)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes mpk3Choc{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes mpk3Tombe{from{opacity:0;margin-bottom:12px}to{opacity:1;margin-bottom:0}}
@keyframes mpk3CoupeG{0%,100%{transform:translate(calc(var(--k)*-1px),calc(var(--k)*-1.4px))}25%{transform:translate(-70%,-8%) rotate(-12deg)}
  50%{transform:translate(-8%,-4%) rotate(-2deg)}75%{transform:translate(-60%,-6%) rotate(-10deg)}}
@keyframes mpk3CoupeD{0%,100%{transform:translate(calc(var(--k)*-1px),calc(var(--k)*-1.4px))}25%{transform:translate(70%,-8%) rotate(12deg)}
  50%{transform:translate(8%,-4%) rotate(2deg)}75%{transform:translate(60%,-6%) rotate(10deg)}}
@keyframes mpk3Pose{0%{transform:scale(1)}35%{transform:scale(1.1) translateY(-4px)}100%{transform:scale(1)}}
@keyframes mpk3Eclair{0%{opacity:0;transform:scale(.6) rotate(0)}30%{opacity:1}100%{opacity:0;transform:scale(1.5) rotate(40deg)}}
@keyframes mpk3Rayons{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(120deg) scale(1.1)}}
@keyframes mpk3Monte{0%{transform:translateY(40%) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes mpk3Tampon{from{opacity:0;transform:scale(2.2) rotate(-18deg)}to{opacity:1;transform:none}}
@keyframes mpk3Frappe{from{opacity:0;transform:scale(2.4) rotate(-20deg)}to{opacity:1;transform:rotate(-8deg)}}
@keyframes mpk3Gagne{0%{transform:translate(-50%,-50%) scale(1)}35%{transform:translate(-50%,-50%) scale(1.2) rotate(-3deg)}70%{transform:translate(-50%,-50%) scale(.96) rotate(2deg)}100%{transform:translate(-50%,-50%) scale(1)}}
.mpk3-plaque.moi.gagne,.mpk3-abat.gagne .mpk3-abat-pts,.mpk3-scene-t.brille{animation-name:mpk3Gagne2}
@keyframes mpk3Gagne2{0%{transform:scale(1)}35%{transform:scale(1.2) rotate(-3deg)}70%{transform:scale(.96) rotate(2deg)}100%{transform:scale(1)}}
@keyframes mpk3Couronne{from{opacity:0;transform:translateY(12px) scale(.3) rotate(-25deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-12deg)}}
@keyframes mpk3Bulle{0%{transform:translateX(-50%) scale(0)}12%{transform:translateX(-50%) scale(1.1)}20%{transform:translateX(-50%) scale(1)}85%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(.9);opacity:0}}
@keyframes mpk3Boum{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-30deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(6deg)}
  40%{transform:translate(-50%,-50%) scale(1) rotate(0)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-80%) scale(1.1)}}
@keyframes mpk3Points{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
@keyframes mpk3Main{from{opacity:0;transform:translateY(40px) rotate(calc((var(--k) - (var(--n) - 1)/2)*2.5deg))}}
@keyframes mpk3Invite{from{transform:translateY(8px);opacity:.3}to{transform:none;opacity:1}}
@keyframes mpk3Bt{from{transform:translateY(10px) scale(.9);opacity:0}}
@keyframes mpk3Non{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes mpk3Scene{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes mpk3Sort{to{opacity:0;transform:scale(.7)}}
@keyframes mpk3Saute{0%{transform:none}40%{transform:translateY(-10px) scale(1.08)}100%{transform:none}}
@keyframes mpk3Fondu{from{opacity:0}to{opacity:1}}
@keyframes mpk3Pan{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
@keyframes mpk3Flotte{50%{margin-top:-8px}}
@keyframes mpk3Lettre{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-8px) rotate(-4deg)}90%{transform:translateY(0) rotate(2deg)}}
@keyframes mpk3Monte2{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .mpk3 *,.mpk3-menu *{animation-duration:.01s!important;animation-iteration-count:1!important} }
/* @@ fin metropoker3.css @@ */

/* @@ debut textes_propres.css @@ */
/* ==========================================================================
   LES TEXTES AU PROPRE — plaques émaillées, livre des règles, pages de
   niveau centrées. Le bleu des plaques est celui des quais parisiens.
   ========================================================================== */
/* — les plaques émaillées (chiffres, records) — */
.px-plaques{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-4)}
.px-plaque,.px-rec{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:88px;padding:5px 14px 7px;border-radius:10px;
  background:#153E8C;color:#fff;box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #FFFFFF,0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13}
.px-plaque small,.px-rec small{font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.82}
.px-plaque b,.px-rec b{font-family:var(--display);font-weight:800;font-size:1.15rem;line-height:1.05;letter-spacing:.01em;white-space:nowrap}
.px-rec{min-width:0}
.px-rec--petit{flex-direction:row;align-items:baseline;gap:6px;padding:4px 11px 5px;border-radius:8px}
.px-rec--petit b{font-size:.95rem}
.px-rec--vide{background:#FBF6E9;color:#0B0E13;box-shadow:inset 0 0 0 2px #FBF6E9,inset 0 0 0 3.5px rgba(11,14,19,.35),0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13}
.px-rec--vide b{font-family:var(--display);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.px-hero .ap-hero-t{margin-top:0}

/* — la page d'un niveau : les jeux centrés — */
.px-ligne-tete b{display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;text-transform:uppercase}
.px-jeux{grid-template-columns:repeat(auto-fit,minmax(230px,268px));justify-content:center}
.px-jeu .ap-jeu-txt{min-height:0;padding-bottom:4px}
.px-jeu .ap-jeu-txt b{font-size:1.02rem}
.px-jeu .ap-jeu-pied{align-items:center}

/* — le bandeau d'un jeu : le livre et le record — */
.px-ban-pied{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:var(--sp-4)}
.px-livre{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 7px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,#FBF6E9,#EDE3CC);color:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.02em;
  transition:transform .16s cubic-bezier(.3,1.6,.5,1),box-shadow .16s}
.px-livre-ico{display:block;width:44px;height:37px;transform-origin:50% 100%;animation:pxFeuillette 5s 1.2s ease-in-out infinite}
.px-livre-ico svg{display:block;width:100%;height:100%;overflow:visible}
.px-livre:hover{transform:translateY(-2px) rotate(-1deg)}
.px-livre:hover .px-livre-ico{animation:pxOuvre .5s cubic-bezier(.3,1.6,.5,1)}
.px-livre:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.px-ban .px-rec{padding:5px 16px 7px}

/* — le livre ouvert : toutes les règles — */
.px-regles-fond{position:fixed;inset:0;z-index:955;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(6,9,14,0);transition:background .25s}
.px-regles-fond.on{background:rgba(6,9,14,.68)}
.px-regles{position:relative;width:min(620px,100%);max-height:88vh;overflow:auto;padding:0 0 18px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,#FFFBF0,#F3EAD3);box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 70px rgba(0,0,0,.55);
  opacity:0;transform:perspective(900px) rotateX(16deg) translateY(30px) scale(.94);transform-origin:50% 0;
  transition:opacity .25s,transform .4s cubic-bezier(.2,.9,.3,1.2)}
.px-regles-fond.on .px-regles{opacity:1;transform:none}
.px-regles-fond.sort .px-regles{opacity:0;transform:translateY(20px) scale(.96)}
.px-regles-tete{display:flex;align-items:center;gap:12px;padding:16px 56px 14px 18px;border-radius:22px 22px 0 0;background:var(--g);color:var(--gi);
  border-bottom:3px solid #0B0E13}
.px-regles-ico{flex:none;width:58px;height:48px;padding:4px;border-radius:12px;background:#FFFBF0;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.px-regles-ico svg{display:block;width:100%;height:100%}
.px-regles-tete small{display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.px-regles-tete b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,4vw,1.8rem);line-height:1.05;text-transform:uppercase}
.px-regles-x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;
  background:#0B0E13;color:#fff;font-size:1.3rem;font-weight:800;line-height:1}
.px-regles-l{list-style:none;counter-reset:px;margin:16px 18px 0;padding:0;display:grid;gap:8px}
.px-regles-l li{counter-increment:px;position:relative;padding:9px 12px 10px 48px;border-radius:12px;background:#fff;font-size:.95rem;line-height:1.45;
  box-shadow:0 0 0 2px #0B0E13;opacity:0;animation:pxLigne .38s calc(.1s + var(--i)*.05s) cubic-bezier(.2,.9,.3,1.2) forwards}
.px-regles-l li::before{content:counter(px);position:absolute;left:10px;top:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--g);color:var(--gi);font-family:var(--display);font-weight:800;font-size:.9rem;box-shadow:0 0 0 2px #0B0E13}

/* — une question posée dans une partie (arrondissement mystère…) — */
.px-question{margin-top:var(--sp-5)}

@keyframes pxFeuillette{0%,88%,100%{transform:none}92%{transform:rotate(-8deg) scale(1.08)}96%{transform:rotate(5deg)}}
@keyframes pxOuvre{0%{transform:none}50%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(1.05)}}
@keyframes pxLigne{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .px-plaque{min-width:0;flex:1 1 0;padding:5px 8px 7px}
  .px-plaque b{font-size:1rem}
  .px-livre{font-size:.8rem}
}

/* — les consignes de partie : une vraie phrase, pas des capitales de machine à écrire — */
.ap-stage .hint{font-family:var(--display);font-weight:700;font-size:clamp(.95rem,2.1vw,1.12rem);letter-spacing:0;text-transform:none;line-height:1.35;
  color:#F3EEE2}
.ap-stage .hint::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.55em;border-radius:50%;background:var(--g);
  box-shadow:0 0 0 2px #0B0E13;vertical-align:.06em}
.ap--avance .av-feuille .hint,.ap--avance .av-ref .hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.ap--avance .av-feuille .hint::before,.ap--avance .av-ref .hint::before{display:none}
.px-q{margin:var(--sp-4) 0 var(--sp-3);font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,2.6vw,1.45rem);line-height:1.2;color:#FFFFFF;
  text-shadow:0 2px 0 rgba(0,0,0,.35)}
.px-station{display:inline-flex;align-items:center;padding:4px 12px 5px;border-radius:8px;background:#153E8C;color:#fff;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.01em;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.px-station--grand{padding:7px 16px 8px;font-size:clamp(1rem,2.6vw,1.35rem);white-space:normal;text-align:center}
.px-consigne{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:var(--sp-4) 0 var(--sp-3)}
.px-consigne-a{font-family:var(--display);font-weight:800;font-size:1.2rem;color:#fff}
.px-consigne b{font-family:var(--display);font-weight:800;font-size:clamp(1.05rem,2.4vw,1.35rem);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35)}

/* — le billet d'un trajet : départ, arrivée, temps à battre — */
.px-billet{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px 14px;margin:var(--sp-2) 0 var(--sp-5);
  padding:16px 18px 18px;border-radius:18px;background:linear-gradient(180deg,#FBF6E9,#EEE4CC);color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:pxLigne .4s cubic-bezier(.2,.9,.3,1.2) both}
.px-billet::before,.px-billet::after{content:"";position:absolute;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--fond-stage,#141B25);
  box-shadow:inset 0 0 0 2.5px #0B0E13}
.px-billet::before{left:-9px}.px-billet::after{right:-9px}
.px-billet-bout{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.px-billet-bout small{font-family:var(--display);font-size:.8rem;font-weight:800;opacity:.7}
.px-billet-fl{display:block;width:clamp(56px,10vw,96px)}
.px-billet-fl svg{display:block;width:100%;height:auto;overflow:visible}
.px-billet-rame{animation:pxRoule 2.4s ease-in-out infinite}
.px-chrono{grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;gap:7px;padding:4px 12px 4px 6px;border-radius:999px;background:#0B0E13;color:#FFE08A}
.px-chrono i{display:block;width:22px;height:22px}
.px-chrono i svg{display:block;width:100%;height:100%}
.px-chrono small{font-family:var(--display);font-size:.8rem;font-weight:700;color:#FBF6E9}
.px-chrono b{font-family:var(--display);font-weight:800;font-size:1rem}
@keyframes pxRoule{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}

/* — les paliers de l'itinéraire avancé : une rangée, des pictogrammes dessinés — */
@media (min-width:980px){ .ap--avance .av-paliers{grid-template-columns:repeat(5,minmax(0,1fr))!important} }
.ap--avance .av-palier small{min-height:3.2em}
.av-palier .av-tags{display:none}
.px-pictos{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px}
.px-picto{display:inline-flex;align-items:center;gap:3px;padding:3px 6px;border-radius:10px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1.5px rgba(11,14,19,.4)}
.px-picto i{display:block;height:22px}
.px-mode svg,.px-cone svg{display:block;height:100%;width:auto}
.px-mode--rer{height:22px}
.px-picto--corr b{font-family:var(--display);font-weight:800;font-size:.85rem;padding-right:2px}
.av-palier .av-num svg{display:block;width:70%;height:70%;margin:auto}

/* — Reconnaître une station : l'accueil en tableaux, la partie dans l'axe — */
.px-im{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);padding:var(--sp-5) var(--sp-2) var(--sp-4)}
.px-im-titre{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.6vw,2.8rem);text-transform:uppercase;letter-spacing:-.01em;
  color:#fff;text-shadow:0 4px 0 #0B0E13}
.px-im-niveaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,380px));justify-content:center;gap:var(--sp-5);width:100%}
.px-im-niv{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 18px 16px;border:0;border-radius:24px;cursor:pointer;
  background:linear-gradient(180deg,#FBF6E9,#EEE4CC);color:#0B0E13;box-shadow:0 0 0 3px #0B0E13,0 0 0 7px var(--c),0 10px 0 7px #0B0E13;
  transition:transform .2s cubic-bezier(.3,1.6,.5,1);animation:pxLigne .45s calc(var(--i)*.1s) cubic-bezier(.2,.9,.3,1.2) both}
.px-im-niv:hover{transform:translateY(-6px) rotate(-.6deg)}
.px-im-niv:active{transform:translateY(3px)}
.px-im-eventail{position:relative;width:100%;height:170px}
.px-im-photo{position:absolute;left:50%;top:10px;width:62%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#fff;
  box-shadow:0 0 0 6px #fff,0 0 0 8.5px #0B0E13,0 6px 0 8.5px #0B0E13;
  transform:translateX(-50%) rotate(calc((var(--k) - 1)*9deg)) translateY(calc(var(--k) * 4px - 4px)) translateX(calc((var(--k) - 1)*36%));
  transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.px-im-photo:nth-child(2){z-index:2}
.px-im-photo svg{display:block;width:100%;height:100%}
.px-im-niv:hover .px-im-photo{transform:translateX(-50%) rotate(calc((var(--k) - 1)*13deg)) translateY(calc(var(--k) * 2px - 10px)) translateX(calc((var(--k) - 1)*48%))}
.px-im-tampon{position:absolute;right:14px;top:14px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;
  background:var(--c);color:#0B0E13;box-shadow:0 0 0 3px #0B0E13,inset 0 0 0 4px rgba(255,255,255,.55),0 4px 0 3px #0B0E13;transform:rotate(12deg)}
.px-im-tampon b{font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:1}
.px-im-tampon small{font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.px-im-nom{padding:6px 22px 7px;border-radius:10px;background:#153E8C;color:#fff;font-family:var(--display);font-weight:800;font-size:1.3rem;text-transform:uppercase;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 4px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.px-im-go{font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;padding:6px 16px;border-radius:999px;background:var(--c);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.px-im-jeu{display:flex;flex-direction:column;align-items:center;width:100%}
.px-im-cadre{width:min(760px,100%);margin-left:auto;margin-right:auto}
.px-im-cadre .im-tableau.px-arrive{animation:pxPhoto .5s cubic-bezier(.2,.9,.3,1.2)}
.px-im-zone,.px-im-bas{display:flex;flex-direction:column;align-items:center;width:min(760px,100%);text-align:center}
.px-im-choix{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:center}
.px-im-choix .im-opt{animation:pxLigne .35s calc(var(--i)*.05s) both}
.px-im-bas .btn{margin:var(--sp-4) auto 0}
.px-im-reveal{width:100%}
.px-im-verdict{font-family:var(--display);font-weight:800;font-size:1.3rem;text-transform:uppercase}
.px-im-reveal.bon .px-im-verdict{color:#83E6A4}.px-im-reveal.mauvais .px-im-verdict{color:#FF8A8A}
.px-im-reveal .px-station{margin:4px 0}
@keyframes pxPhoto{from{opacity:0;transform:scale(.94) rotate(-1.5deg)}to{opacity:1;transform:none}}
@media (max-width:560px){ .px-im-choix{grid-template-columns:minmax(0,1fr)!important} .px-im-eventail{height:140px} }

.px-im-reveal.bon .px-im-verdict{color:#0E7A3E!important}.px-im-reveal.mauvais .px-im-verdict{color:#C8102E!important}
.px-im-eventail{height:186px}

/* — Reconstituer : les cartes de ligne — */
.px-lc-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:var(--sp-5)}
.px-lc{position:relative;display:flex;flex-direction:column;gap:12px;padding:12px 14px 13px;border:0;border-radius:16px;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,#FBF6E9,#EEE4CC);color:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s;animation:pxLigne .35s calc(var(--i)*.025s) both}
.px-lc:hover{transform:translateY(-4px);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px var(--c),0 7px 0 5px #0B0E13}
.px-lc:active{transform:translateY(2px)}
.px-lc-tete{display:flex;align-items:center;gap:10px}
.px-lc-rond{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--c);color:var(--t);
  font-family:var(--display);font-weight:900;font-size:1.3rem;letter-spacing:-.04em;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.px-lc-rond.long{font-size:.95rem}
.px-lc-n{display:flex;align-items:baseline;gap:5px;margin-left:auto}
.px-lc-n b{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1}
.px-lc-n small{font-family:var(--display);font-weight:700;font-size:.78rem;opacity:.65}
.px-lc-trace{position:relative;display:block;height:10px;margin:4px 6px;border-radius:6px;background:var(--c);box-shadow:0 0 0 2.5px #0B0E13}
.px-lc-trace i{position:absolute;left:var(--p);top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.px-lc-trace i:first-child,.px-lc-trace i:nth-last-child(2){width:15px;height:15px;margin:-7.5px 0 0 -7.5px;box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 3px var(--c)}
.px-lc-trace em{position:absolute;left:0;top:50%;width:22px;height:12px;margin:-6px 0 0 -11px;border-radius:5px;background:#FBF6E9;box-shadow:0 0 0 2px #0B0E13;opacity:0}
.px-lc:hover .px-lc-trace em{animation:pxTraverse 1.6s ease-in-out infinite}
.px-lc-term{display:flex;justify-content:space-between;gap:12px;font-family:var(--display);font-weight:700;font-size:.76rem;line-height:1.2}
.px-lc-term span{max-width:48%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.px-lc-term span:last-child{text-align:right}
.px-lc--seule{cursor:default;max-width:640px;margin:0 auto var(--sp-4);padding:16px 20px 18px}
.px-lc--seule:hover{transform:none;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.px-lc--seule .px-lc-rond{width:58px;height:58px;font-size:1.6rem}
.px-lc--seule .px-lc-term{font-size:.95rem}
.px-lc--seule .px-lc-trace em{animation:pxTraverse 2.6s ease-in-out infinite}
@keyframes pxTraverse{0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}

/* — Metro City : les compteurs en plaques de quai, les onglets pictographiés — */
.mc-hud.px-mc-hud{gap:10px}
.mc-hud .mc-chip.px-mc{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 6px 6px;border-radius:10px;background:#153E8C!important;color:#fff;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #FFFFFF,0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13!important}
.mc-hud .mc-chip.px-mc.mc-chip--gold{background:#0F2F6E!important}
.mc-hud .mc-chip.px-mc .px-mc-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:3px;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 0 2px #0B0E13}
.px-mc-ico svg{display:block;width:100%;height:100%}
.mc-hud .mc-chip.px-mc small{display:block;color:rgba(255,255,255,.82)!important;font-family:var(--mono);font-size:.54rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mc-hud .mc-chip.px-mc b{color:#FFFFFF!important;font-family:var(--display);font-weight:800;font-size:1.08rem}
.mc-hud .mc-chip.px-mc.mc-chip--gold b{color:#FFE08A!important}
.mc-hud .mc-chip.px-mc>div>div{display:flex;align-items:baseline;gap:5px}
.px-mc-u{font-style:normal;font-family:var(--display);font-weight:700;font-size:.66rem;color:rgba(255,255,255,.7)}
.mc-hud .mc-chip.px-mc.mc-chip--clic::after{background:#FFCE00!important;color:#0B0E13}
.mc-dtab .px-mc-tab-ico{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:-3px 6px -3px -4px;padding:2px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1.8px #0B0E13;vertical-align:middle}
.px-mc-tab-ico svg{display:block;width:100%;height:100%}
.mc-dtab[data-px]{display:inline-flex;align-items:center}
.mc-hud .mc-chip.px-mc>div{min-width:max-content}
.mc-hud .mc-chip.px-mc small{overflow:visible!important;text-overflow:clip!important;white-space:nowrap}
/* sur le plan, ces pastilles répétaient les compteurs posés juste au-dessus */
.mc-legend{display:none!important}
/* @@ fin textes_propres.css @@ */

/* @@ debut metropoker4.css @@ */
/* ==========================================================================
   MÉTRO POKER — BOUTON BONUS, INVITE, MAIN IMMOBILE, BARÈME, PODIUM
   ========================================================================== */
/* — l'annonce bonus : un gros bouton doré posé sur la table — */
.mpk3 .mpk3-b--eclair{display:none}
.mpk3-bonus-bt{position:absolute;right:10px;bottom:10px;z-index:8;display:flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);color:#0B0E13;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 14px 30px rgba(0,0,0,.45);
  transition:transform .16s cubic-bezier(.3,1.6,.5,1),filter .2s}
.mpk3-bonus-ico{display:grid;place-items:center;width:46px;height:46px;padding:9px;border-radius:50%;background:#0B0E13}
.mpk3-bonus-ico svg{display:block;width:100%;height:100%}
.mpk3-bonus-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.mpk3-bonus-t b{font-family:var(--display);font-weight:900;font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em}
.mpk3-bonus-t small{font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:2px}
.mpk3-bonus-bt:hover{transform:translateY(-3px) rotate(-2deg)}
.mpk3-bonus-bt:active{transform:translateY(3px);box-shadow:0 0 0 3px #0B0E13,0 2px 0 3px #0B0E13}
.mpk3-bonus-bt:disabled{cursor:default;filter:grayscale(1) brightness(.7);transform:none;opacity:.75}
.mpk3-bonus-bt.vif{animation:mpk4Appel 1.3s ease-in-out infinite}
.mpk3-bonus-bt.vif .mpk3-bonus-ico{animation:mpk4Eclair 1.3s ease-in-out infinite}
.mpk3.etroit .mpk3-bonus-bt{display:none}
.mpk3.etroit .mpk3-b--eclair{display:inline-flex;padding:.45em .8em}
.mpk3.etroit .mpk3-b--eclair span:last-child{display:inline!important}
.mpk3.etroit .mpk3-b--eclair:not(:disabled){animation:mpk4Appel 1.3s ease-in-out infinite}
.mpk3-bt--bonus{background:linear-gradient(180deg,#FFE88A,#FFCE00)}

/* — l'invite, en bas à gauche : ce qu'on attend de vous, en grand — */
.mpk3-invite{position:relative;padding:8px 18px 9px 52px;border-radius:14px;background:linear-gradient(180deg,#FFE88A,#FFCE00);color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mpk3-invite::before{content:"";position:absolute;left:10px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:#0B0E13 center/18px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h10M10 5l5 5-5 5' fill='none' stroke='%23FFCE00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mpk3-invite b{color:#0B0E13!important;font-size:1.12rem!important}
.mpk3-invite span{color:#3B2A00!important;opacity:1!important;font-weight:600}
.mpk3-invite:not(.vide){animation:mpk4Invite 2.4s ease-in-out infinite}
.mpk3-invite.bouge{animation:mpk3Invite .45s cubic-bezier(.3,1.6,.5,1),mpk4Invite 2.4s .45s ease-in-out infinite}
.mpk3.etroit .mpk3-invite{padding:6px 12px 7px 44px}
.mpk3.etroit .mpk3-invite::before{width:26px;height:26px;margin-top:-13px;left:8px;background-size:15px}
.mpk3.etroit .mpk3-invite b{font-size:.95rem!important}

/* — votre main reste immobile : seule une carte qui arrive s'anime — */
.mpk3-mc{animation:none;transform:none}
.mpk3-mc.neuve{animation:mpk4Arrive .42s calc(var(--k)*.05s) cubic-bezier(.2,.9,.3,1.25) both}
.mpk3-mc.choix:hover,.mpk3-mc.vise{transform:translateY(-12px)}
.mpk3-mc.pris{transform:translateY(-14px)}

/* ————————————————————————— le barème ————————————————————————— */
.mpk4-bar{display:flex;flex-direction:column;gap:14px;color:#0B0E13}
.mpk4-defs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mpk4-def{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mpk4-def--suite{background:linear-gradient(180deg,#FFF6D0,#FFE88A)}
.mpk4-def--corr{background:linear-gradient(180deg,#E5F2FF,#BFE0FF)}
.mpk4-def-sch{flex:none;display:grid;place-items:center;width:64px;height:48px;border-radius:12px;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mpk4-def b{display:block;font-family:var(--display);font-weight:900;font-size:1.05rem;text-transform:uppercase}
.mpk4-def p{margin:3px 0 4px;font-size:.84rem;line-height:1.3;font-weight:600}
.mpk4-def small{display:block;font-size:.72rem;font-weight:700;opacity:.7}
.mpk4-echelle{display:flex;flex-direction:column;gap:7px}
.mpk4-l{display:grid;grid-template-columns:30px 122px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 8px 6px 7px;border-radius:14px;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;opacity:0;animation:mpk4Ligne .35s calc(var(--i)*.03s) cubic-bezier(.2,.9,.3,1.2) forwards}
.mpk4-l--or{background:linear-gradient(90deg,#FFE88A,#FFF6D0)}
.mpk4-l--violet{background:linear-gradient(90deg,#E4CCFA,#F6EEFF)}
.mpk4-l--bleu{background:linear-gradient(90deg,#CFE6FF,#EFF6FF)}
.mpk4-l--vert{background:linear-gradient(90deg,#CDF2D9,#F0FBF3)}
.mpk4-rang{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0B0E13;color:#fff;font-family:var(--display);font-weight:800;font-size:.76rem}
.mpk4-l--or .mpk4-rang{background:#B8860B}
.mpk4-nom{font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.15}
.mpk4-pts{display:inline-flex;align-items:baseline;gap:3px;padding:3px 13px 4px;border-radius:999px;background:#0B0E13;color:#FFE08A;
  font-family:var(--display);font-weight:900;font-size:1.2rem;font-variant-numeric:tabular-nums}
.mpk4-pts small{font-size:.56rem;font-weight:700;color:#fff}
.mpk4-sch{display:flex;align-items:center;gap:6px}
.mpk4-suite{position:relative;display:flex;padding-left:3px}
.mpk4-suite::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#0B0E13}
.mpk4-suite i{position:relative;width:13px;height:19px;margin-left:-2px;border-radius:3px;background:var(--c);box-shadow:0 0 0 1.6px #0B0E13}
.mpk4-suite i:first-child{margin-left:0}
.mpk4-corr{display:inline-flex}
.mpk4-corr i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mpk4-l .mpk4-sch{gap:4px;flex-wrap:nowrap;overflow:hidden}
.mpk4-corr i+i{margin-left:-4px;background:#4FA3F0}
.mpk4-def-sch .mpk4-suite i{width:15px;height:22px}
.mpk4-def-sch .mpk4-corr i{width:18px;height:18px}
.mpk4-cumul{padding:12px 14px;border-radius:16px;background:#0B0E13;color:#FBF6E9}
.mpk4-cumul>b{display:block;font-family:var(--display);font-weight:800;font-size:.9rem;text-transform:uppercase;color:#FFE08A}
.mpk4-cumul-r{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.mpk4-cumul-r span{display:inline-flex;align-items:baseline;gap:4px;padding:3px 10px;border-radius:999px;background:#FBF6E9;color:#0B0E13}
.mpk4-cumul-r small{font-family:var(--mono);font-size:.62rem;font-weight:700}
.mpk4-cumul-r b{font-family:var(--display);font-weight:900;font-size:.95rem}
.mpk4-cumul p{margin:0;font-size:.78rem;line-height:1.4;opacity:.85}
@media (max-width:560px){
  .mpk4-defs{grid-template-columns:minmax(0,1fr)}
  .mpk4-l{grid-template-columns:26px minmax(0,1fr) auto}
  .mpk4-l .mpk4-sch{display:none}
}

/* ————————————————————————— le podium ————————————————————————— */
.mpk4-fin{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;gap:18px;padding:26px 14px 28px;border-radius:26px;color:#FBF6E9;
  background:radial-gradient(90% 60% at 50% 0%,rgba(255,206,0,.22),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 30px),linear-gradient(180deg,#2B1520,#120A10 72%);
  box-shadow:inset 0 0 0 3px #0B0E13,inset 0 0 0 6px rgba(232,177,58,.38)}
.mpk4-fin-ban{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 30px 14px;border-radius:18px;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;animation:mpk4Ban .6s cubic-bezier(.2,1.5,.4,1) both}
.mpk4-fin-ban small{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mpk4-fin-ban b{font-family:var(--display);font-weight:900;font-size:clamp(1.4rem,4.4vw,2.4rem);text-transform:uppercase;line-height:1}
.mpk4-podium{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2vw,18px);width:100%;padding-top:30px}
.mpk4-col{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:clamp(96px,24vw,180px)}
.mpk4-av{display:block;width:78px;height:86px;border-radius:20px;background:#FBF6E9;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px var(--c),0 6px 0 6px #0B0E13;
  opacity:0;animation:mpk4Tombe .55s calc(var(--d) + .5s) cubic-bezier(.3,1.5,.5,1) forwards}
.mpk4-av svg{display:block;width:100%;height:100%}
.mpk4-col--1 .mpk4-av{width:96px;height:106px}
.mpk4-nom-j{font-family:var(--display);font-weight:800;font-size:1rem;opacity:0;animation:mpk4Fondu .3s calc(var(--d) + .8s) forwards}
.mpk4-tk{display:inline-flex;align-items:center;gap:5px;padding:3px 11px 3px 6px;border-radius:999px;background:#0B0E13;color:#FFE08A;box-shadow:0 0 0 2px #FFCE00;
  font-family:var(--display);font-weight:900;opacity:0;animation:mpk4Fondu .3s calc(var(--d) + .8s) forwards}
.mpk4-tk svg{display:block;width:24px;height:auto}
.mpk4-marche{width:100%;display:flex;justify-content:center;padding-top:10px;border-radius:14px 14px 0 0;box-shadow:0 0 0 3px #0B0E13;
  transform-origin:50% 100%;transform:scaleY(0);animation:mpk4Monte .6s var(--d) cubic-bezier(.3,1.4,.5,1) forwards}
.mpk4-marche span{font-family:var(--display);font-weight:900;font-size:2.6rem;color:#0B0E13;text-shadow:0 3px 0 rgba(255,255,255,.5)}
.mpk4-col--1 .mpk4-marche{height:160px;background:linear-gradient(180deg,#FFE88A,#E7B23E)}
.mpk4-col--2 .mpk4-marche{height:116px;background:linear-gradient(180deg,#F2F4F7,#AEB6C2)}
.mpk4-col--3 .mpk4-marche{height:84px;background:linear-gradient(180deg,#F7C9A2,#C77A45)}
.mpk4-col.moi .mpk4-nom-j{color:#FFE08A}
.mpk4-couronne{position:absolute;top:-34px;z-index:3;width:58px;height:58px;opacity:0;animation:mpk4Couronne .7s calc(var(--d) + 1.3s) cubic-bezier(.3,1.7,.5,1) forwards}
.mpk4-couronne svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 #0B0E13)}
.mpk4-reste{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;width:min(420px,100%)}
.mpk4-reste-l{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 6px;border-radius:14px;background:#FBF6E9;color:#0B0E13;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  opacity:0;animation:mpk4Ligne .35s calc(1.6s + var(--i)*.1s) forwards}
.mpk4-reste-l.moi{background:#FFE88A}
.mpk4-reste-r{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0B0E13;color:#fff;font-family:var(--display);font-weight:800;font-size:.8rem}
.mpk4-av--petit{width:34px;height:38px;border-radius:10px;opacity:1;animation:none;box-shadow:0 0 0 2px #0B0E13}
.mpk4-reste-l>b{flex:1;font-family:var(--display);font-weight:800}
.mpk4-reste-l .mpk4-tk{opacity:1;animation:none}
.mpk4-carnet{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;opacity:0;animation:mpk4Fondu .4s 1.9s forwards}
.mpk4-carnet span{display:flex;flex-direction:column;align-items:center;min-width:92px;padding:5px 12px 7px;border-radius:10px;background:#153E8C;color:#fff;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13}
.mpk4-carnet b{font-family:var(--display);font-weight:800;font-size:1.2rem}
.mpk4-carnet small{font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.mpk4-bts{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;opacity:0;animation:mpk4Fondu .4s 2.1s forwards}
.mpk4-pluie{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.mpk4-pluie i{position:absolute;top:-50px;left:var(--x);width:34px;opacity:.9;animation:mpk4Pluie var(--t) var(--d) linear infinite}
.mpk4-pluie svg{display:block;width:100%;height:auto}

@keyframes mpk4Appel{0%,100%{transform:none}50%{transform:translateY(-3px) scale(1.04);box-shadow:0 0 0 3px #0B0E13,0 9px 0 3px #0B0E13,0 0 30px rgba(255,206,0,.7)}}
@keyframes mpk4Eclair{0%,100%{transform:none}40%{transform:rotate(-14deg) scale(1.12)}60%{transform:rotate(10deg)}}
@keyframes mpk4Invite{0%,100%{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}50%{box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 0 7px rgba(255,206,0,.28)}}
@keyframes mpk4Arrive{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes mpk4Ligne{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes mpk4Ban{from{opacity:0;transform:translateY(-30px) scale(.6) rotate(-6deg)}to{opacity:1;transform:rotate(-1.5deg)}}
@keyframes mpk4Monte{to{transform:scaleY(1)}}
@keyframes mpk4Tombe{from{opacity:0;transform:translateY(-80px) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes mpk4Fondu{to{opacity:1}}
@keyframes mpk4Couronne{from{opacity:0;transform:translateY(-40px) scale(.3) rotate(-30deg)}to{opacity:1;transform:rotate(-10deg)}}
@keyframes mpk4Pluie{from{transform:translateY(0) rotate(0)}to{transform:translateY(900px) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){ .mpk4-fin *,.mpk4-bar *{animation-duration:.01s!important;animation-iteration-count:1!important} }
/* @@ fin metropoker4.css @@ */

/* @@ debut snake_da.css @@ */
/* ==========================================================================
   SNAKE MÉTRO — LA DIRECTION ARTISTIQUE « METRO CITY »
   Le jeu rejoint la famille de Metro City : un fond bleu roi, des cases de
   couleur cernées de noir avec leur dessin (comme celles du haut de l'onglet
   Réseau), des plaques émaillées pour les titres, des pastilles de ligne,
   des boutons jaunes qui s'enfoncent. Chaque onglet, chaque service, chaque
   catégorie a sa couleur ; tout entre en rebondissant.
   ========================================================================== */
.sk4,.sk4-jeu,.sk4-sheet-fond,.sk4-debloque{--k:#0B0E13;--bl:#153E8C;--j:#FFCE00;--o:#FF7A2F;--ok:#3ED07A;--tx:#FFFFFF;--mu:#CFDBF2;
  --res:cubic-bezier(.3,1.5,.5,1);--doux:cubic-bezier(.2,.8,.2,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --cont2:2.6px 0 #0B0E13,-2.6px 0 #0B0E13,0 2.6px #0B0E13,0 -2.6px #0B0E13,1.8px 1.8px #0B0E13,-1.8px -1.8px #0B0E13,1.8px -1.8px #0B0E13,-1.8px 1.8px #0B0E13,0 5px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35)}
:where(.sk4,.sk4-jeu,.sk4-sheet-fond) button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;background:none;padding:0}
.sk4 :focus-visible,.sk4-jeu :focus-visible,.sk4-sheet-fond :focus-visible{outline:3px solid var(--j);outline-offset:4px}
.sk4-ico{display:inline-grid;place-items:center;flex:none;width:1.25em;height:1.25em}
.sk4-ico svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.3))}
.sk4-ico--d{transform:scaleX(-1)}
.sk4-art{display:block;flex:none;pointer-events:none}
.sk4-art svg{display:block;width:100%;height:100%;overflow:visible}

/* — l'enveloppe du site s'efface : le jeu a sa propre barre — */
.sk4-racine .ap-ban,.sk4-racine .ap-mascotte{display:none!important}
.sk4-racine .ap-cadre{margin-top:6px!important}
.sk4-racine .ap-stage{padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.sk4-racine .ap-stage::before{display:none!important}
.sk4-racine .section{padding-bottom:0!important}

/* — le fond commun : bleu roi, un plan de métro en filigrane qui dérive, la ville en bas — */
.sk4,.sk4-jeu{background:radial-gradient(90% 38% at 50% 0,rgba(110,170,255,.32),transparent 70%),linear-gradient(180deg,#2453A8,#163A80 42%,#102B63)}
.sk4::before,.sk4-jeu::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M-10 60H70l40 40h140' stroke='%23FFCE00'/%3E%3Cpath d='M60-10v70l30 30v160' stroke='%23FF7FB6'/%3E%3Cpath d='M-10 190h90l40-40h130' stroke='%2362DE98'/%3E%3Cpath d='M180-10v80l-40 40v130' stroke='%238FF4FF'/%3E%3C/g%3E%3Cg fill='white' stroke='%230B0E13' stroke-width='3'%3E%3Ccircle cx='70' cy='60' r='7'/%3E%3Ccircle cx='90' cy='90' r='7'/%3E%3Ccircle cx='120' cy='150' r='7'/%3E%3Ccircle cx='160' cy='110' r='7'/%3E%3C/g%3E%3C/svg%3E") 0 0/240px 240px;
  animation:sk4Derive 60s linear infinite}
@keyframes sk4Derive{to{background-position:240px 240px}}
.sk4::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;z-index:-1;opacity:.16;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/300px 46px}

/* ————————————————————————————————— l'application ———————————————————————————————— */
.sk4{position:relative;max-width:1180px;margin:0 auto;color:var(--tx);border-radius:28px;overflow:clip;font-family:var(--body);isolation:isolate;
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k)}
.sk4-top{display:flex;align-items:center;gap:10px;padding:14px 14px 8px}
.sk4-logo{position:relative;flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#FFF0A0,#FFCE00 55%,#F2A900);box-shadow:var(--cadre);animation:sk4Logo 4.5s ease-in-out infinite}
.sk4-logo svg{width:42px;height:42px;overflow:visible}
.sk4-langue{transform-box:fill-box;transform-origin:50% 0;animation:sk4Langue 3.2s ease-in-out infinite}
.sk4-yeux{transform-box:fill-box;transform-origin:50% 50%;animation:sk4Cligne 4s ease-in-out infinite}
@keyframes sk4Logo{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-2px)}}
@keyframes sk4Langue{0%,62%,100%{transform:scaleY(0)}68%,74%{transform:scaleY(1)}71%{transform:scaleY(.6)}80%{transform:scaleY(0)}}
@keyframes sk4Cligne{0%,90%,100%{transform:none}94%{transform:scaleY(.1)}}
.sk4-top-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.sk4-marque{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,5vw,1.55rem);line-height:.98;text-transform:uppercase;letter-spacing:.02em;
  color:#fff;text-shadow:var(--cont);white-space:nowrap;animation:sk4Titre .55s var(--res) both}
.sk4-marque em{display:block;font-style:normal;color:var(--j)}
@keyframes sk4Titre{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}
/* les boutons ronds et la bourse : émaillés, comme les pastilles du haut de Metro City */
.sk4-rond{flex:none;width:44px;height:44px;border-radius:50%;display:grid!important;place-items:center;color:#fff;
  background:var(--bl)!important;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.92),var(--cadre);
  transition:transform .25s var(--res)}
.sk4-rond .sk4-ico{width:26px;height:26px}
.sk4-rond:hover{transform:translateY(-2px) rotate(-6deg)}
.sk4-rond:active{transform:translateY(3px)!important;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.92),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}
.sk4-bourse{flex:none;display:inline-flex!important;align-items:center;gap:7px;height:44px;padding:0 14px 0 5px!important;border-radius:14px;color:#fff;
  background:var(--bl)!important;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.92),var(--cadre);transition:transform .25s var(--res)}
.sk4-bourse .sk4-ico{width:32px;height:32px}
.sk4-bourse b{font-family:var(--display);font-weight:900;font-size:1.08rem;font-variant-numeric:tabular-nums;text-shadow:var(--doucement)}
.sk4-bourse:hover{transform:translateY(-2px)}
.sk4-bourse:active{transform:translateY(3px)!important}
.sk4-bourse.bat{animation:sk4Bat .7s var(--res)}
.sk4-bourse.bat .sk4-ico{animation:sk4Tour .7s var(--doux)}
@keyframes sk4Bat{30%{transform:scale(1.16) rotate(-4deg)}}
@keyframes sk4Tour{to{transform:rotateY(360deg)}}

/* — les onglets : quatre cases illustrées, chacune sa couleur — */
.sk4-nav{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 10px 20px}
.sk4-nav-b{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;gap:1px;margin:0 4px;padding:6px 2px 8px!important;
  border-radius:16px;color:#fff;min-width:0;
  background:radial-gradient(120% 110% at 100% 0,color-mix(in srgb,var(--a) 48%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 55%,#132A5E),#0F2152 78%)!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 42%,transparent),0 5px 0 2.5px var(--k);
  transition:transform .35s var(--res),box-shadow .25s;animation:sk4Pop .5s var(--res) both;animation-delay:calc(var(--i)*70ms)}
.sk4-nav-b .sk4-art{width:100%;max-width:64px;height:46px;transition:transform .35s var(--res)}
.sk4-nav-b:not(.on) .sk4-art{filter:saturate(.8)}
.sk4-nav-b span{font-family:var(--display);font-weight:900;font-size:.8rem;line-height:1.1;text-shadow:var(--doucement);white-space:nowrap}
.sk4-nav-b:hover{transform:translateY(-3px)}
.sk4-nav-b:hover .sk4-art{transform:rotate(-6deg) scale(1.06)}
.sk4-nav-b.on{transform:translateY(-4px);background:linear-gradient(165deg,var(--a),var(--b))!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 7px 0 7.5px var(--k)}
.sk4-nav-b.on span{text-shadow:var(--cont)}
.sk4-nav-b.on .sk4-art{animation:sk4Saut .6s var(--res),sk4Flotte 2.6s ease-in-out .6s infinite}
@keyframes sk4Saut{35%{transform:translateY(-9px) rotate(-8deg) scale(1.12)}70%{transform:translateY(1px) rotate(3deg)}}
@keyframes sk4Flotte{0%,100%{transform:none}50%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes sk4Pop{from{opacity:0;transform:scale(.55) translateY(10px)}}
/* le curseur : une petite barre jaune qui glisse sous la case choisie */
.sk4-nav-ind{position:absolute;left:10px;bottom:2px;width:calc((100% - 20px)/4);height:8px;transition:transform .55s var(--res);pointer-events:none}
.sk4-nav-ind::before{content:"";position:absolute;left:50%;top:0;width:30px;height:8px;margin-left:-15px;border-radius:8px;background:var(--j);box-shadow:0 0 0 2px var(--k)}

.sk4-vue{padding:4px 14px 30px;min-height:420px}
.sk4-page{animation:sk4Page .5s var(--res) both}
@keyframes sk4Page{from{opacity:0;transform:translateX(var(--dx,0)) translateY(var(--dy,14px)) scale(.97)}}
.sk4-bloc{margin-top:24px}
/* les titres : une plaque émaillée de station, centrée, avec ses deux rivets */
.sk4-h{position:relative;display:table;margin:0 auto 16px;padding:6px 28px 7px;border-radius:10px;background:var(--bl);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1rem;line-height:1.2;text-align:center;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);animation:sk4Plaque .5s var(--res) both}
.sk4-h::before,.sk4-h::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.sk4-h::before{left:10px}.sk4-h::after{right:10px}
@keyframes sk4Plaque{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}
/* une pastille émaillée : un rond jaune, un chiffre, une étiquette */
.sk4-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 4px;border-radius:999px;background:var(--bl);color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.9),0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);animation:sk4Pop .5s var(--res) both}
.sk4-chip .sk4-ico{width:28px;height:28px;padding:3px;box-sizing:border-box;border-radius:50%;background:var(--j);box-shadow:0 0 0 2px var(--k)}
.sk4-chip b{font-family:var(--display);font-weight:900;font-size:1rem;font-variant-numeric:tabular-nums}
.sk4-chip small{font-weight:700;font-size:.72rem;opacity:.85}

/* ————————————————————————————————— JOUER ————————————————————————————————— */
.sk4-hero{position:relative;height:clamp(240px,66vw,430px);border-radius:24px;overflow:hidden;background:#2C5BB0;
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k);animation:sk4Zoom .6s var(--res) both}
@keyframes sk4Zoom{from{opacity:0;transform:scale(.92) rotate(-1deg)}}
.sk4-hero-sc,.sk4-hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk4-hero-bas{position:absolute;left:12px;right:12px;top:12px;display:flex}
.sk4-hero-l{display:flex;align-items:flex-start;gap:10px;min-width:0}
.sk4-hero-l>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.sk4-hero-l b{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,7vw,2.2rem);line-height:1;text-transform:uppercase;color:#fff;
  text-shadow:var(--cont2);margin-top:4px;animation:sk4Titre .55s var(--res) .1s both}
.sk4-hero-l small{max-width:100%;padding:4px 10px;border-radius:10px;font-family:var(--display);font-weight:800;font-size:.74rem;line-height:1.25;color:#fff;
  background:color-mix(in srgb,var(--bl) 92%,transparent);box-shadow:0 0 0 2px var(--k);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:sk4Pop .5s var(--res) .2s both}
.sk4-puce{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--c);color:var(--t,#fff);
  font-family:var(--display);font-weight:900;font-size:1.15rem;box-shadow:0 0 0 2.5px var(--k),0 0 0 5px #fff,0 0 0 7.5px var(--k),0 4px 0 7.5px var(--k);
  animation:sk4Pop .55s var(--res) both}
.sk4-hero-chips{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:8px}
.sk4-hero-chips .sk4-chip:nth-child(2){animation-delay:.1s}

.sk4-lignes{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 12px 16px;margin:0 -12px;scrollbar-width:none}
.sk4-lignes::-webkit-scrollbar{display:none}
.sk4-l{flex:none;scroll-snap-align:center;width:44px;height:44px;border-radius:50%!important;background:var(--c)!important;color:var(--t)!important;
  font-family:var(--display);font-weight:900;font-size:1rem;transform:scale(.9);box-shadow:0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);
  transition:transform .35s var(--res),box-shadow .2s;animation:sk4Pop .45s var(--res) both;animation-delay:calc(var(--i)*25ms)}
.sk4-l:hover{transform:scale(1) translateY(-2px)}
.sk4-l.on{transform:scale(1.12) translateY(-2px);box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 5px 0 7.5px var(--k)}

.sk4-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sk4-mode{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:8px 6px 11px!important;border-radius:18px;
  color:#fff;text-align:center;
  background:radial-gradient(120% 110% at 100% 0,color-mix(in srgb,var(--a) 50%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 55%,#132A5E),#0F2152 78%)!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 42%,transparent),0 5px 0 2.5px var(--k);
  transition:transform .35s var(--res),box-shadow .25s;animation:sk4Pop .5s var(--res) both;animation-delay:calc(80ms + var(--i)*80ms)}
.sk4-mode .sk4-art{width:68px;height:52px;transition:transform .35s var(--res)}
.sk4-mode b{font-family:var(--display);font-weight:900;font-size:.92rem;line-height:1.08;text-shadow:var(--doucement)}
.sk4-mode small{font-size:.66rem;font-weight:700;line-height:1.25;color:var(--mu);overflow-wrap:anywhere}
.sk4-mode em{display:inline-flex;align-items:center;gap:3px;margin-top:auto;padding:2px 9px 2px 3px;border-radius:999px;font-style:normal;font-family:var(--display);
  font-weight:900;font-size:.72rem;font-variant-numeric:tabular-nums;background:color-mix(in srgb,var(--b) 70%,var(--k));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 70%,transparent)}
.sk4-mode em .sk4-ico{width:18px;height:18px}
.sk4-mode:hover{transform:translateY(-3px)}
.sk4-mode:hover .sk4-art{transform:rotate(-6deg) scale(1.06)}
.sk4-mode.on{transform:translateY(-4px);background:linear-gradient(165deg,var(--a),var(--b))!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 7px 0 7.5px var(--k)}
.sk4-mode.on b{text-shadow:var(--cont)}
.sk4-mode.on small{color:#fff}
.sk4-mode.on .sk4-art{animation:sk4Saut .6s var(--res)}
.sk4-mode-ok{position:absolute;top:-11px;right:-9px;width:28px;height:28px;transform:scale(0) rotate(-90deg);transition:transform .45s var(--res)}
.sk4-mode-ok .sk4-ico{width:100%;height:100%}
.sk4-mode.on .sk4-mode-ok{transform:none}

/* le bouton Jouer : jaune métro, épais, qui s'enfonce et qui brille */
.sk4-go{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;gap:14px;width:100%;height:70px;margin-top:26px;
  border-radius:20px;background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:var(--k)!important;
  font-family:var(--display);font-weight:900;font-size:1.55rem;text-transform:uppercase;letter-spacing:.03em;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 8px 0 3px var(--k);
  transition:transform .2s var(--res),box-shadow .12s;animation:sk4Pop .55s var(--res) .3s both}
.sk4-go .sk4-ico{width:46px;height:46px;padding:11px 9px 11px 13px;border-radius:50%;background:var(--k);box-sizing:border-box;animation:sk4Battre 1.6s ease-in-out 1s infinite}
.sk4-go::after{content:"";position:absolute;inset:0 auto 0 -40%;width:32%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:sk4Reflet 3s ease-in-out 1.2s infinite}
@keyframes sk4Reflet{0%,55%{left:-40%}100%{left:135%}}
@keyframes sk4Battre{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.sk4-go:hover{transform:translateY(-3px)}
.sk4-go:active{transform:translateY(6px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 2px 0 3px var(--k)}

/* ————————————————————————————————— GARAGE / BOUTIQUE ————————————————————————————————— */
.sk4-cats{display:flex;gap:10px;overflow-x:auto;padding:6px 10px 16px;margin:0 -10px;scrollbar-width:none}
.sk4-cats::-webkit-scrollbar{display:none}
.sk4-cat{flex:none;display:inline-flex!important;align-items:center;gap:7px;height:42px;padding:0 15px 0 5px!important;border-radius:999px;color:#fff;
  font-family:var(--display);font-weight:900;font-size:.84rem;
  background:linear-gradient(165deg,color-mix(in srgb,var(--a) 34%,#173470),#11275A)!important;box-shadow:var(--cadre);
  transition:transform .3s var(--res),background .2s;animation:sk4Pop .45s var(--res) both;animation-delay:calc(var(--i)*40ms)}
.sk4-cat .sk4-ico{width:32px;height:32px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--a);box-shadow:0 0 0 2px var(--k)}
.sk4-cat:hover{transform:translateY(-2px)}
.sk4-cat.on{background:var(--j)!important;color:var(--k);transform:translateY(-2px);box-shadow:0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)}
.sk4-cat.on .sk4-ico{animation:sk4Saut .6s var(--res)}

.sk4-scene{position:relative;border-radius:22px;overflow:hidden;background:#2C5BB0;aspect-ratio:640/330;
  box-shadow:0 0 0 3px var(--k),0 0 0 6.5px var(--a,#5AB0FF),0 0 0 9px var(--k),0 9px 0 9px var(--k);margin:6px 6px 0;animation:sk4Zoom .55s var(--res) both}
.sk4-scene-c,.sk4-scene-c canvas,.sk4-une-v canvas,.sk4-sheet-v canvas,.sk4-carte-v canvas{display:block;width:100%;height:100%}
.sk4-scene-c{position:absolute;inset:0}
.sk4-scene-t{position:absolute;z-index:1;left:12px;right:12px;top:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none}
.sk4-scene-t .sk4-rar{margin-top:auto}
.sk4-scene-t small{padding:3px 10px;border-radius:999px;background:var(--ok);color:var(--k);font-family:var(--display);font-weight:900;font-size:.7rem;box-shadow:0 0 0 2px var(--k)}
.sk4-scene-t b{font-family:var(--display);font-weight:900;font-size:clamp(1.25rem,5.4vw,1.8rem);line-height:1.05;color:#fff;text-shadow:var(--cont)}
.sk4-scene.swap .sk4-scene-c{animation:sk4Swap .6s var(--doux)}
.sk4-scene.swap .sk4-scene-t b{animation:sk4Titre .5s var(--res)}
@keyframes sk4Swap{0%{filter:brightness(1.8) saturate(.6);transform:scale(1.08)}100%{filter:none;transform:none}}
.sk4-rar{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;font-family:var(--display);font-size:.72rem;font-weight:900;
  color:#fff;background:color-mix(in srgb,var(--r) 30%,#0F2152);box-shadow:0 0 0 2px var(--k)}
.sk4-rar::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--r);box-shadow:0 0 0 2px var(--k)}

.sk4-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin-top:22px}
.sk4-carte{position:relative;display:flex!important;flex-direction:column;padding:6px 6px 0!important;border-radius:18px;color:#fff;text-align:center;
  background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--r) 55%,transparent),transparent 65%),
    linear-gradient(165deg,color-mix(in srgb,var(--r2,#1E5AA8) 60%,#132A5E),#0F2152 80%)!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--r) 45%,transparent),0 5px 0 2.5px var(--k);
  transition:transform .35s var(--res),box-shadow .25s;animation:sk4Pop .5s var(--res) both;animation-delay:calc(min(var(--i),14)*45ms)}
.sk4-carte:hover{transform:translateY(-4px) rotate(-.6deg)}
.sk4-carte:active{transform:translateY(3px)}
.sk4-carte-v{aspect-ratio:320/190;border-radius:12px;overflow:hidden;background:#2C5BB0;box-shadow:0 0 0 2px var(--k)}
.sk4-carte-t{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 4px 10px;min-width:0}
.sk4-carte-t b{font-family:var(--display);font-weight:900;font-size:.84rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:var(--doucement)}
.sk4-pt{flex:none;width:12px;height:12px;border-radius:50%;background:var(--r);box-shadow:0 0 0 2px var(--k)}
.sk4-carte-on{position:absolute;top:-10px;right:-9px;width:30px;height:30px;transform:scale(0) rotate(-90deg);transition:transform .45s var(--res)}
.sk4-carte-on .sk4-ico{width:100%;height:100%}
.sk4-carte.on{box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 6px 0 7.5px var(--k)}
.sk4-carte.on .sk4-carte-on{transform:none}
.sk4-carte.pop{animation:sk4Choisi .5s var(--res)}
@keyframes sk4Choisi{40%{transform:scale(1.07) rotate(-2deg)}}
.sk4-carte--prix .sk4-carte-t{position:relative;padding:12px 4px 10px}
.sk4-carte--prix .sk4-prix{position:absolute;right:4px;top:-17px}
.sk4-carte--prix:not(.dispo) .sk4-carte-v{filter:saturate(.7) brightness(.85)}
.sk4-prix{flex:none;display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 9px 0 3px;border-radius:999px;font-family:var(--display);font-weight:900;
  font-size:.78rem;font-variant-numeric:tabular-nums;color:#fff;background:#2A4580;box-shadow:0 0 0 2px var(--k)}
.sk4-prix .sk4-ico{width:20px;height:20px}
.sk4-prix.ok{background:var(--j);color:var(--k);box-shadow:0 0 0 2px var(--k),0 2px 0 2px var(--k)}
.sk4-neuf{position:absolute;top:-8px;left:-6px;padding:3px 10px;border-radius:999px;background:linear-gradient(180deg,#FF5A78,#C8102E);color:#fff;font-family:var(--display);font-size:.7rem;font-weight:900;
  transform:rotate(-8deg);box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k);animation:sk4Battre 1.8s ease-in-out infinite}
.sk4-lien{display:flex!important;align-items:center;gap:10px;width:100%;margin-top:22px;padding:8px 14px 8px 8px!important;border-radius:18px;color:#fff;
  font-family:var(--display);font-weight:900;font-size:.92rem;background:linear-gradient(165deg,#FF4D6D,#C8102E 50%,#7A0020)!important;box-shadow:var(--cadre);transition:transform .25s var(--res)}
.sk4-lien span:not(.sk4-ico){flex:1;text-align:left;text-shadow:var(--doucement)}
.sk4-lien>.sk4-ico:first-child{width:38px;height:38px;padding:6px;box-sizing:border-box;border-radius:50%;background:var(--j);box-shadow:0 0 0 2px var(--k)}
.sk4-lien>.sk4-ico:last-child{width:22px;height:22px}
.sk4-lien:hover{transform:translateY(-2px)}
.sk4-lien:hover .sk4-ico--d{transform:scaleX(-1) translateX(-4px)}
.sk4-lien:active{transform:translateY(3px);box-shadow:0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}

/* la pièce à la une : une grande case, son autocollant jaune */
.sk4-une{position:relative;display:flex;flex-direction:column;margin:10px 4px 26px;padding:8px;border-radius:22px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--r) 60%,transparent),transparent 65%),
    linear-gradient(165deg,color-mix(in srgb,var(--r2,#1E5AA8) 70%,#132A5E),#0F2152 85%);
  box-shadow:0 0 0 3px var(--k),0 0 0 6.5px var(--r),0 0 0 9px var(--k),0 9px 0 9px var(--k);animation:sk4Zoom .6s var(--res) both}
.sk4-une-v{aspect-ratio:640/330;border-radius:15px;overflow:hidden;box-shadow:0 0 0 2.5px var(--k)}
.sk4-une-t{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px 6px;text-align:center}
.sk4-une-sur{position:absolute;z-index:2;top:-12px;left:14px;padding:5px 14px;border-radius:10px;background:var(--j);color:var(--k);
  font-family:var(--display);font-weight:900;font-size:.82rem;text-transform:uppercase;letter-spacing:.02em;transform:rotate(-5deg);
  box-shadow:0 0 0 2.5px var(--k),0 4px 0 2.5px var(--k);animation:sk4Tampon .7s var(--res) .3s both}
.sk4-une-t>b{font-family:var(--display);font-weight:900;font-size:1.55rem;line-height:1.05;text-shadow:var(--cont)}
.sk4-une-t .sk4-acheter,.sk4-une-t .sk4-manque{margin-top:4px}
.sk4-acheter{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;height:56px;
  padding:0 7px 0 20px!important;border-radius:16px;background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:var(--k)!important;
  font-family:var(--display);font-weight:900;font-size:1.1rem;text-transform:uppercase;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 2.5px var(--k),0 6px 0 2.5px var(--k);transition:transform .2s var(--res),box-shadow .12s}
.sk4-acheter::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);animation:sk4Reflet 2.8s ease-in-out .6s infinite}
.sk4-acheter em{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 13px 0 7px;border-radius:12px;background:var(--k);color:var(--j);
  font-style:normal;font-variant-numeric:tabular-nums;text-transform:none}
.sk4-acheter em .sk4-ico{width:26px;height:26px}
.sk4-acheter:hover{transform:translateY(-2px)}
.sk4-acheter:active{transform:translateY(5px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}
.sk4-manque{width:100%;display:flex;flex-direction:column;gap:8px;font-family:var(--display);font-weight:800;font-size:.88rem;color:#fff}
.sk4-manque b{color:var(--j)}
.sk4-manque-j{display:block;height:14px;border-radius:14px;background:#0E1E48;box-shadow:0 0 0 2.5px var(--k);overflow:hidden}
.sk4-manque-j i{display:block;height:100%;border-radius:14px;background:repeating-linear-gradient(-45deg,#FFCE00 0 10px,#FFB300 10px 20px);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);animation:sk4Remplit 1s var(--doux) both}
@keyframes sk4Remplit{from{width:0!important}}
.sk4-vide{display:flex;flex-direction:column;align-items:center;gap:10px;padding:50px 20px;text-align:center}
.sk4-vide .sk4-ico{width:64px;height:64px;animation:sk4Logo 3s ease-in-out infinite}
.sk4-vide b{font-family:var(--display);font-weight:900;font-size:1.4rem;text-shadow:var(--cont)}
.sk4-vide p,.sk4-rien{margin:0;color:var(--mu);font-weight:700}
.sk4-rien{grid-column:1/-1;padding:20px 0;text-align:center}

/* — la fiche d'une pièce : elle monte du bas — */
.sk4-sheet-fond{position:fixed;inset:0;z-index:940;display:flex;align-items:flex-end;justify-content:center;background:rgba(6,14,40,0);transition:background .3s}
.sk4-sheet-fond.on{background:rgba(6,14,40,.72)}
.sk4-sheet{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;padding:10px 10px calc(14px + env(safe-area-inset-bottom));color:#fff;font-family:var(--body);
  border-radius:26px 26px 0 0;transform:translateY(105%);transition:transform .5s var(--res);
  background:radial-gradient(120% 70% at 100% 0,color-mix(in srgb,var(--r) 55%,transparent),transparent 65%),
    linear-gradient(170deg,color-mix(in srgb,var(--r2,#1E5AA8) 65%,#163A80),#102B63 70%);
  box-shadow:0 0 0 3px var(--k),0 -12px 40px rgba(0,0,0,.4)}
.sk4-sheet-fond.on .sk4-sheet{transform:none}
.sk4-sheet-fond.sort .sk4-sheet{transform:translateY(105%);transition-duration:.25s;transition-timing-function:ease-in}
.sk4-sheet-v{aspect-ratio:640/330;border-radius:17px;overflow:hidden;box-shadow:0 0 0 2.5px var(--k)}
.sk4-sheet-x{position:absolute;top:20px;right:20px}
.sk4-sheet-t{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 10px 22px;text-align:center}
.sk4-sheet-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sk4-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 3px;border-radius:999px;font-family:var(--display);font-size:.72rem;font-weight:900;
  background:color-mix(in srgb,var(--a) 30%,#0F2152);box-shadow:0 0 0 2px var(--k)}
.sk4-tag .sk4-ico{width:22px;height:22px;padding:2px;box-sizing:border-box;border-radius:50%;background:var(--a);box-shadow:0 0 0 1.5px var(--k)}
.sk4-sheet h3{margin:2px 0 0;font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1.05;text-shadow:var(--cont)}
.sk4-sheet p{margin:0 0 6px;color:var(--mu);font-size:.92rem;font-weight:600;line-height:1.45;max-width:40ch}

/* — l'achat : les jetons volent, puis la pièce s'allume — */
.sk4-vol{position:fixed;z-index:955;width:26px;height:26px;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.sk4-vol svg{width:100%;height:100%;display:block}
.sk4-debloque{position:fixed;left:50%;top:50%;z-index:950;width:min(300px,calc(100% - 40px));display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 20px 22px;border-radius:24px;color:#fff;font-family:var(--body);text-align:center;pointer-events:none;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,#62DE98,#0B7A45);transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 12px 0 9.5px var(--k);animation:sk4Debloque .6s var(--res) both}
.sk4-debloque-r{position:absolute;left:50%;top:38%;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:-1;opacity:.22;
  background:repeating-conic-gradient(#fff 0 10deg,transparent 10deg 30deg);border-radius:50%;animation:sk4Tourne 9s linear infinite}
@keyframes sk4Tourne{to{transform:rotate(360deg)}}
.sk4-debloque>.sk4-ico{width:84px;height:84px;animation:sk4Tampon .7s var(--res) .1s both}
@keyframes sk4Tampon{0%{opacity:0;transform:scale(2.2) rotate(-25deg)}60%{opacity:1;transform:scale(.9) rotate(6deg)}100%{transform:none}}
.sk4-debloque b{font-family:var(--display);font-weight:900;font-size:1.7rem;margin-top:4px;text-shadow:var(--cont)}
.sk4-debloque span:not(.sk4-ico):not(.sk4-debloque-r){font-weight:800;font-size:.9rem}
.sk4-debloque.sort{animation:sk4DebloqueSort .35s ease-in both}
@keyframes sk4Debloque{from{opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-8deg)}}
@keyframes sk4DebloqueSort{to{opacity:0;transform:translate(-50%,-40%) scale(.9)}}

/* ————————————————————————————————— PROFIL ————————————————————————————————— */
.sk4-record{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:12px;margin:6px 4px 0;padding:14px 16px 16px;border-radius:22px;color:#fff;
  background:linear-gradient(165deg,#FFC93E,#E8590C);box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k);animation:sk4Zoom .55s var(--res) both}
.sk4-record-r{position:absolute;left:58px;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;z-index:-1;opacity:.2;border-radius:50%;
  background:repeating-conic-gradient(#fff 0 9deg,transparent 9deg 24deg);animation:sk4Tourne 14s linear infinite}
.sk4-record-art{flex:none;width:86px;animation:sk4Flotte 3s ease-in-out infinite}
.sk4-record-art svg{display:block;width:100%;height:auto;overflow:visible}
.sk4-record-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.sk4-record small{padding:3px 10px;border-radius:999px;background:rgba(11,14,19,.55);font-family:var(--display);font-weight:900;font-size:.74rem}
.sk4-record b{font-family:var(--display);font-weight:900;font-size:clamp(2.3rem,11vw,3.4rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;text-shadow:var(--cont2)}
.sk4-record span{font-family:var(--display);font-weight:800;font-size:.84rem;text-shadow:var(--doucement)}
.sk4-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.sk4-stat{--a:#4C8EEC;--b:#153E8C;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 6px 10px;border-radius:18px;text-align:center;
  background:linear-gradient(165deg,var(--a),var(--b));box-shadow:var(--cadre);animation:sk4Pop .5s var(--res) both;animation-delay:calc(var(--i)*60ms)}
.sk4-stat:nth-child(6n+2){--a:#4FD68A;--b:#0B6B3F}.sk4-stat:nth-child(6n+3){--a:#C98BEE;--b:#5A2590}
.sk4-stat:nth-child(6n+4){--a:#FFB25E;--b:#B8560F}.sk4-stat:nth-child(6n+5){--a:#FF3D5E;--b:#8A0A28}.sk4-stat:nth-child(6n){--a:#5FD8E8;--b:#0E6F80}
.sk4-stat .sk4-art{width:58px;height:44px}
.sk4-stat b{font-family:var(--display);font-weight:900;font-size:1.2rem;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:var(--cont)}
.sk4-stat small{font-family:var(--display);font-size:.7rem;font-weight:800;line-height:1.15;text-shadow:var(--doucement)}
.sk4-rls{display:grid;gap:10px}
.sk4-rl{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:16px;background:linear-gradient(100deg,var(--a),var(--b));box-shadow:var(--cadre);
  animation:sk4Pop .5s var(--res) both;animation-delay:calc(var(--i)*70ms)}
.sk4-rl .sk4-art{width:56px;height:44px}
.sk4-rl b{flex:1;font-family:var(--display);font-weight:900;font-size:.95rem;text-shadow:var(--doucement)}
.sk4-rl em{font-style:normal;font-family:var(--display);font-weight:900;font-size:1rem;font-variant-numeric:tabular-nums;padding:4px 12px;border-radius:999px;
  background:var(--k);color:var(--j)}
.sk4-succes{display:grid;gap:10px}
.sk4-s{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:16px;color:#fff;text-align:left;
  background:linear-gradient(100deg,#21407F,#152E66);box-shadow:var(--cadre);animation:sk4Pop .45s var(--res) both;animation-delay:calc(min(var(--i),12)*40ms)}
.sk4-s>.sk4-ico{width:42px;height:42px;padding:6px;box-sizing:border-box;border-radius:50%;background:#0E1E48;box-shadow:0 0 0 2px var(--k)}
.sk4-s>div{display:flex;flex-direction:column;min-width:0}
.sk4-s b{font-family:var(--display);font-weight:900;font-size:.9rem}
.sk4-s small{font-size:.74rem;font-weight:600;color:var(--mu);line-height:1.3}
.sk4-s.ok{background:linear-gradient(100deg,#FFD23E,#F29A00);color:var(--k)}
.sk4-s.ok small{color:#3A2A00}
.sk4-s.ok>.sk4-ico{background:#fff;animation:sk4Flotte 2.8s ease-in-out infinite}

/* ————————————————————————————————— LA PARTIE ————————————————————————————————— */
.sk4-jeu{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;gap:8px;color:#fff;font-family:var(--body);isolation:isolate;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);overscroll-behavior:none;touch-action:none;
  -webkit-user-select:none;user-select:none;animation:sk4Entre .45s var(--doux) both}
.sk4-jeu::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(70% 40% at 50% 0,color-mix(in srgb,var(--c) 40%,transparent),transparent 72%);transition:background .6s}
@keyframes sk4Entre{from{opacity:0;transform:scale(1.04)}}
.sk4-hud{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;padding:10px 12px 0}
.sk4-h-g,.sk4-h-d{display:flex;align-items:center;gap:7px;min-width:0}
.sk4-h-d{justify-content:flex-end}
.sk4-hud>.sk4-rond:first-child{background:var(--j)!important;color:var(--k);box-shadow:var(--cadre)}
.sk4-jeu .sk4-rond{width:42px;height:42px}
.sk4-jeu .sk4-rond .sk4-ico{width:24px;height:24px}
.sk4-h-score{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1;min-width:92px;padding:5px 16px 6px;border-radius:12px;background:var(--bl);
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre)}
.sk4-h-score small{font-family:var(--display);font-size:.62rem;font-weight:900;color:var(--j);text-transform:uppercase;letter-spacing:.06em}
.sk4-h-score b{font-family:var(--display);font-weight:900;font-size:1.6rem;font-variant-numeric:tabular-nums;margin-top:2px;text-shadow:var(--cont)}
.sk4-h-score.gain b{animation:sk4Gain .45s var(--res)}
@keyframes sk4Gain{30%{transform:scale(1.25);color:var(--j)}}
.sk4-h-ligne{width:36px;height:36px;font-size:.95rem;box-shadow:0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);animation:none}
.sk4-h-ligne.bascule{animation:sk4Bascule .6s var(--res)}
@keyframes sk4Bascule{0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.3)}100%{transform:rotateY(360deg) scale(1)}}
.sk4-h-st{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 11px 0 4px;border-radius:999px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:.9rem;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k)}
.sk4-h-st .sk4-ico{width:24px;height:24px}
.sk4-h-tick{display:inline-flex;gap:2px}
.sk4-h-tick:empty{display:none}
.sk4-tk{width:26px;height:26px;transition:opacity .3s,transform .4s var(--res)}
.sk4-tk.use{opacity:.3;transform:translateY(4px) rotate(-14deg) scale(.85);filter:grayscale(1)}
.sk4-h-combo{position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;box-shadow:0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k)}
.sk4-h-combo svg{position:absolute;inset:0;width:100%;height:100%}
.sk4-h-combo b{position:relative;font-family:var(--display);font-weight:900;font-size:.82rem;color:#fff;transition:color .2s}
.sk4-h-combo.chaud b{color:var(--j)}
.sk4-h-combo.chaud{animation:sk4Battre .8s ease-in-out infinite}
.sk4-h-combo.saut{animation:sk4Choisi .4s var(--res)}

.sk4-obj{position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;margin:4px 12px 0;padding:6px 12px 12px 6px;border-radius:15px;min-height:44px;
  background:linear-gradient(100deg,#FFB25E,#E0560F);box-shadow:var(--cadre)}
.sk4-obj>.sk4-ico{width:30px;height:30px}
.sk4-obj-t{flex:1;min-width:0;font-family:var(--display);font-size:.86rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--doucement)}
.sk4-obj-p{flex:none;font-style:normal;font-family:var(--display);font-size:.74rem;font-weight:900;padding:3px 9px;border-radius:999px;background:rgba(11,14,19,.5);font-variant-numeric:tabular-nums}
.sk4-obj-j{position:absolute;left:44px;right:12px;bottom:5px;height:5px;border-radius:5px;background:rgba(11,14,19,.4)}
.sk4-obj-j i{display:block;height:100%;width:0;border-radius:5px;background:var(--j);box-shadow:0 0 0 1px var(--k);transition:width .35s var(--doux)}
.sk4-obj-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(100deg,#62DE98,#0B7A45);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.05rem;text-transform:uppercase;text-shadow:var(--cont);transform:translateY(105%)}
.sk4-obj-ok .sk4-ico{width:26px;height:26px}
.sk4-obj.fait .sk4-obj-ok{animation:sk4Valide 1.5s var(--doux) both}
@keyframes sk4Valide{0%{transform:translateY(105%)}15%,80%{transform:none}100%{transform:translateY(-105%)}}
.sk4-obj.neuf .sk4-obj-t{animation:sk4Glisse .5s var(--res)}
@keyframes sk4Glisse{from{opacity:0;transform:translateX(16px)}}

.sk4-zone{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:12px 14px 14px}
.sk4-plateau{position:relative;border-radius:18px;overflow:hidden;background:#2C5BB0;
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--c),0 0 0 9.5px var(--k),0 8px 0 9.5px var(--k);transition:box-shadow .6s}
.sk4-cv{display:block;width:100%;height:100%;touch-action:none}
.sk4-flash{position:absolute;inset:0;pointer-events:none;opacity:0}
.sk4-flash.or{background:radial-gradient(circle,rgba(255,206,0,.4),rgba(255,206,0,0) 70%)}
.sk4-flash.rouge{background:radial-gradient(circle,rgba(255,90,78,0) 30%,rgba(255,60,40,.5))}
.sk4-flash.on{animation:sk4Flash .6s ease-out}
@keyframes sk4Flash{0%{opacity:1}100%{opacity:0}}

/* la croix : quatre gros boutons de couleur qui s'enfoncent */
.sk4-bas{position:relative;display:flex;justify-content:center;align-items:center;padding:2px 12px calc(14px + env(safe-area-inset-bottom))}
.sk4-pad{display:grid;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,48px);gap:5px 8px;grid-template-areas:". h ." "g . d" ". b ."}
.sk4-p{--a:#5AB0FF;display:grid!important;place-items:center;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--a) 75%,#fff),var(--a) 45%,color-mix(in srgb,var(--a) 75%,#000))!important;
  box-shadow:0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);transition:transform .15s var(--res),box-shadow .1s;touch-action:none}
.sk4-p .sk4-ico{width:28px;height:28px}
.sk4-p--haut{grid-area:h;--a:#5AB0FF}.sk4-p--bas{grid-area:b;--a:#FFB25E}.sk4-p--gauche{grid-area:g;--a:#E0113F}.sk4-p--droite{grid-area:d;--a:#62DE98}
.sk4-p:active,.sk4-p.appui{transform:translateY(4px);box-shadow:0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}
.sk4-p.appui{animation:sk4Appui .3s var(--doux)}
@keyframes sk4Appui{0%{filter:brightness(1.35)}100%{filter:none}}
.sk4-touches{display:none;align-items:center;gap:14px;font-family:var(--display);font-size:.84rem;font-weight:800;padding:6px 0 4px}
.sk4-touches .sk4-ico{width:26px;height:26px}
.sk4-touches kbd{font-family:var(--display);font-weight:900;font-size:.76rem;color:#fff;padding:3px 9px;border-radius:8px;background:var(--bl);box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.sk4-jeu:not(.tactile) .sk4-pad{display:none}
.sk4-jeu:not(.tactile) .sk4-touches{display:flex}

/* — les calques : pause, aide, terminus — */
.sk4-calque{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(8,18,48,.62);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
.sk4-calque.on{opacity:1;pointer-events:auto}
.sk4-pan{position:relative;width:min(380px,100%);max-height:calc(100% - 8px);overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 18px 20px;
  border-radius:24px;color:#fff;text-align:center;background:linear-gradient(170deg,#2B62C2,#163A80 60%,#102B63);
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k);transform:translateY(30px) scale(.9);transition:transform .5s var(--res)}
.sk4-calque.on .sk4-pan{transform:none}
.sk4-pan-ico{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--j);box-shadow:var(--cadre)}
.sk4-pan-ico .sk4-ico{width:34px;height:34px}
.sk4-calque.on .sk4-pan-ico{animation:sk4Tampon .6s var(--res) .1s both}
.sk4-pan-t{position:relative;display:inline-block;padding:6px 30px 8px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.35rem;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre)}
.sk4-pan-bts{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px}
.sk4-btn{--a:#5AB0FF;--b:#0B57B0;display:flex!important;align-items:center;justify-content:center;gap:10px;height:54px;border-radius:16px;color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.05rem;background:linear-gradient(180deg,var(--a),var(--b))!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);transition:transform .2s var(--res),box-shadow .1s}
.sk4-btn span{text-shadow:var(--cont)}
.sk4-btn .sk4-ico{width:28px;height:28px}
.sk4-btn:hover{transform:translateY(-2px)}
.sk4-btn:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}
.sk4-btn--o{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:var(--k)}
.sk4-btn--o span{text-shadow:none}
.sk4-btn--r{--a:#FF3D5E;--b:#8A0A28}
.sk4-btn--b{--a:#5AB0FF;--b:#0B57B0}
.sk4-pan--aide{width:min(460px,100%);align-items:stretch;text-align:left;padding-top:18px}
.sk4-pan-tete{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;padding:0 50px}
.sk4-pan-tete b{position:relative;display:inline-block;padding:6px 24px 7px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.1rem;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);white-space:nowrap}
.sk4-pan-tete .sk4-rond{position:absolute;right:0;top:50%;margin-top:-22px}
.sk4-aide-l{list-style:none;margin:8px 0 4px;padding:0;display:flex;flex-direction:column;gap:9px}
.sk4-aide-l li{display:flex;align-items:center;gap:12px;padding:7px 10px 7px 7px;border-radius:15px;background:linear-gradient(100deg,#2552A8,#183D86);box-shadow:var(--cadre);
  animation:sk4Pop .45s var(--res) both;animation-delay:calc(var(--i)*55ms)}
.sk4-aide-l li>div{display:flex;flex-direction:column;min-width:0}
.sk4-aide-l li b{font-family:var(--display);font-weight:900;font-size:.9rem}
.sk4-aide-l li span{font-size:.76rem;font-weight:600;color:var(--mu);line-height:1.35}
.sk4-aide-r{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 0 0 2.5px var(--k),0 0 0 4.5px #fff,0 0 0 6.5px var(--k)}
.sk4-aide-r b{font-family:var(--display);font-weight:900;font-size:.9rem}
.sk4-aide-r svg{width:62%;height:62%}

/* — le terminus : la rame vient taper le heurtoir — */
.sk4-fin{z-index:6}
.sk4-pan--fin{width:min(420px,100%);gap:10px;padding-top:12px}
.sk4-calque.on .sk4-pan--fin{animation:sk4FinMonte .7s var(--res) both}
@keyframes sk4FinMonte{from{opacity:0;transform:translateY(60px) scale(.9)}}
.sk4-fin-scene{position:relative;width:100%;height:112px;margin:0 0 2px;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#7EC4FF,#BFE3FF 75%);box-shadow:0 0 0 2.5px var(--k)}
.sk4-fin-scene>svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.sk4-fin-rame{animation:sk4FinRame 1.05s cubic-bezier(.3,.75,.35,1) both}
@keyframes sk4FinRame{0%{transform:translateX(-360px)}78%{transform:translateX(7px)}88%{transform:translateX(-4px)}100%{transform:none}}
.sk4-fin-heurtoir{animation:sk4FinChoc .45s ease-out .82s both}
@keyframes sk4FinChoc{30%{transform:translateX(5px) rotate(2deg)}60%{transform:translateX(-2px)}}
.sk4-fin-heurtoir{transform-origin:336px 94px}
.sk4-fin-feu{animation:sk4FinFeu .7s steps(1) 1s infinite}
@keyframes sk4FinFeu{50%{fill:#FFE14D}}
.sk4-fin-boum{transform-origin:308px 70px;animation:sk4FinBoum .55s var(--res) .8s both}
@keyframes sk4FinBoum{0%{opacity:0;transform:scale(0) rotate(-40deg)}50%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(.9) rotate(20deg)}}
.sk4-fin-rayons{position:absolute;left:12%;top:42%;width:420px;height:420px;margin:-210px 0 0 -210px;z-index:-1;opacity:.35;border-radius:50%;
  background:repeating-conic-gradient(#fff 0 9deg,transparent 9deg 24deg);animation:sk4Tourne 12s linear infinite}
.sk4-fin-coupe{position:absolute;left:12%;top:6px;width:58px;margin-left:-29px;animation:sk4FinCoupe .8s var(--res) 1.1s both}
.sk4-fin-coupe svg{display:block;width:100%;height:auto}
@keyframes sk4FinCoupe{0%{opacity:0;transform:translateY(-120px) rotate(-20deg)}60%{opacity:1;transform:translateY(6px) rotate(6deg)}100%{transform:none}}
.sk4-pan--fin.record .sk4-fin-scene{background:linear-gradient(180deg,#FFD23E,#FFF0A8 75%)}
.sk4-fin-plaque{display:flex;justify-content:center}
.sk4-fin-plaque span{position:relative;padding:7px 30px 9px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.3rem;color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);animation:sk4Plaque .55s var(--res) .5s both}
.sk4-fin-plaque span::before,.sk4-fin-plaque span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.sk4-fin-plaque span::before{left:11px}.sk4-fin-plaque span::after{right:11px}
.sk4-pan--fin.record .sk4-fin-plaque span{background:var(--j);color:var(--k);box-shadow:inset 0 0 0 2px var(--j),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)}
.sk4-fin-score{font-family:var(--display);font-weight:900;font-size:clamp(3rem,15vw,4.2rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--j);
  text-shadow:var(--cont2);margin-top:4px}
.sk4-fin-cause{margin:0;font-weight:700;font-size:.86rem;color:var(--mu);line-height:1.4}
.sk4-fin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin-top:6px}
.sk4-fin-s{--a:#4C8EEC;--b:#153E8C;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px 9px;border-radius:15px;background:linear-gradient(165deg,var(--a),var(--b));
  box-shadow:var(--cadre);animation:sk4Pop .5s var(--res) both;animation-delay:calc(.9s + var(--i)*100ms)}
.sk4-fin-s:nth-child(2){--a:#C98BEE;--b:#5A2590}.sk4-fin-s:nth-child(3){--a:#FF3D5E;--b:#8A0A28}
.sk4-fin-s .sk4-ico{width:30px;height:30px;margin-bottom:2px}
.sk4-fin-s b{font-family:var(--display);font-weight:900;font-size:1.2rem;text-shadow:var(--cont)}
.sk4-fin-s small{font-family:var(--display);font-weight:800;font-size:.7rem}
.sk4-fin-j{display:flex;align-items:center;gap:10px;width:100%;margin-top:4px;padding:7px 14px 7px 7px;border-radius:15px;color:var(--k);text-align:left;
  background:linear-gradient(100deg,#FFE45C,#FFB300);box-shadow:var(--cadre);animation:sk4Pop .5s var(--res) 1.25s both}
.sk4-fin-j>.sk4-ico{width:40px;height:40px;animation:sk4Tour 1.1s var(--doux) 1.4s}
.sk4-fin-j>span{display:flex;flex-direction:column;line-height:1.1}
.sk4-fin-j>span b{font-family:var(--display);font-weight:900;font-size:1.35rem;font-variant-numeric:tabular-nums}
.sk4-fin-j small{font-family:var(--display);font-size:.7rem;font-weight:800}
.sk4-fin-c{margin-left:auto;align-items:flex-end}
.sk4-fin-c em{font-style:normal;font-family:var(--display);font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums}
.sk4-fin-suc{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:4px;text-align:left}
.sk4-fin-suc .sk4-s{animation-delay:calc(1.5s + var(--i)*100ms)}
.sk4-pan-bts--fin{flex-direction:row}
.sk4-pan-bts--fin .sk4-btn{flex:1}

/* l'étoile qui éclate sous le doigt */
.sk4-eclat{position:fixed;z-index:990;width:0;height:0;pointer-events:none}
.sk4-eclat i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:var(--c);box-shadow:0 0 0 1.5px #0B0E13;
  transform:rotate(var(--a)) translateX(4px) rotate(45deg);animation:sk4Rayon .55s cubic-bezier(.15,.8,.3,1) forwards}
.sk4-eclat i:nth-child(even){background:#FFCE00}
.sk4-eclat b{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:3px solid var(--c);box-sizing:border-box;animation:sk4Onde .45s ease-out forwards}
.sk4-eclat.petit i{left:-3px;top:-3px;width:6px;height:6px}
.sk4-eclat.petit b{left:-11px;top:-11px;width:22px;height:22px;border-width:2px}
@keyframes sk4Rayon{0%{opacity:1}100%{transform:rotate(var(--a)) translateX(var(--d)) rotate(225deg) scale(.2);opacity:0}}
@keyframes sk4Onde{from{transform:scale(.3);opacity:1}to{transform:scale(1.7);opacity:0}}

/* ————————————————————————————————— le rubis mythique —————————————————————————————————
   Tout ce qui était rose passe en rouge rubis : un dégradé profond, un filet
   d'or à l'intérieur, un reflet qui balaie la pierre et deux étoiles qui
   scintillent. */
:is(.sk4-nav-b[data-k=boutique],.sk4-lien,.sk4-neuf,.sk4-btn--r,.sk4-p--gauche,.sk4-mode:nth-child(3),.sk4-fin-s:nth-child(3),.sk4-stat:nth-child(6n+5),.sk4-cat[style*="FF3D5E"]){position:relative;isolation:isolate}
:is(.sk4-nav-b[data-k=boutique],.sk4-lien,.sk4-btn--r,.sk4-p--gauche,.sk4-mode:nth-child(3),.sk4-fin-s:nth-child(3),.sk4-stat:nth-child(6n+5))::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 2px rgba(255,214,120,.6),inset 0 6px 10px -6px rgba(255,255,255,.45);
  background:linear-gradient(105deg,transparent 38%,rgba(255,235,240,.5) 48%,rgba(255,255,255,.75) 50%,rgba(255,235,240,.5) 52%,transparent 62%) 0 0/300% 100% no-repeat;
  animation:sk4Reflet2 3.6s ease-in-out infinite}
@keyframes sk4Reflet2{0%,45%{background-position:100% 0}100%{background-position:-50% 0}}
:is(.sk4-nav-b[data-k=boutique],.sk4-lien,.sk4-mode:nth-child(3),.sk4-fin-s:nth-child(3),.sk4-stat:nth-child(6n+5),.sk4-neuf)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23FFF4C2'/%3E%3C/svg%3E") no-repeat right 9% top 10%/12px 12px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0l2.2 7.8L20 10l-7.8 2.2L10 20l-2.2-7.8L0 10l7.8-2.2z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat left 10% bottom 14%/8px 8px;
  animation:sk4Scintille 2.2s ease-in-out infinite}
.sk4-neuf::after{background-size:8px 8px,0 0;background-position:right -2px top -3px,0 0}
.sk4-nav-b[data-k=boutique]::after{background-position:right 8% top 7%,left 9% top 10%}
@keyframes sk4Scintille{0%,100%{opacity:.25;filter:drop-shadow(0 0 0 rgba(255,220,140,0))}50%{opacity:1;filter:drop-shadow(0 0 4px rgba(255,220,140,.9))}}
.sk4-nav-b.on[data-k=boutique]{background:radial-gradient(120% 90% at 100% 0,rgba(255,140,160,.6),transparent 60%),linear-gradient(165deg,#FF4D6D,#C8102E 50%,#6E0420)!important}
.sk4-mode.on:nth-child(3){background:radial-gradient(120% 90% at 100% 0,rgba(255,140,160,.6),transparent 60%),linear-gradient(165deg,#FF4D6D,#C8102E 50%,#6E0420)!important}
.sk4-p--gauche{background:linear-gradient(180deg,#FF6A85,#D0103A 50%,#7A0020)!important}
.sk4-neuf{box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k),0 0 12px rgba(255,61,94,.7)}

/* ————————————————————————————————— grands écrans ————————————————————————————————— */
@media (min-width:560px){
  .sk4-grille{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .sk4-stats{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (min-width:900px){
  .sk4-top{padding:18px 24px 10px}
  .sk4-logo{width:58px;height:58px}
  .sk4-logo svg{width:48px;height:48px}
  .sk4-nav{width:min(760px,100%);margin:0 auto;padding:10px 24px 24px}
  .sk4-nav-ind{left:24px;width:calc((100% - 48px)/4)}
  .sk4-nav-b{flex-direction:row;justify-content:center;gap:8px;margin:0 7px;padding:6px 12px 6px 6px!important}
  .sk4-nav-b .sk4-art{width:62px;height:48px}
  .sk4-nav-b span{font-size:1rem}
  .sk4-vue{padding:6px 24px 36px}
  .sk4-page--jouer{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 26px;align-items:start}
  .sk4-page--jouer .sk4-hero{grid-row:1/span 3;height:480px}
  .sk4-page--jouer .sk4-hero+.sk4-bloc{margin-top:0}
  .sk4-page--jouer .sk4-lignes{flex-wrap:wrap;overflow:visible;justify-content:center}
  .sk4-page--jouer .sk4-l{width:42px;height:42px}
  .sk4-page--garage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 26px;align-items:start}
  .sk4-page--garage .sk4-cats{grid-column:1/-1;justify-content:center;flex-wrap:wrap}
  .sk4-page--garage .sk4-scene{position:sticky;top:20px;grid-row:2/span 2}
  .sk4-page--garage .sk4-grille{margin-top:6px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .sk4-page--boutique .sk4-cats{justify-content:center;flex-wrap:wrap}
  .sk4-une{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0 10px}
  .sk4-une-v{aspect-ratio:auto;min-height:290px}
  .sk4-une-t{justify-content:center;padding:24px}
  .sk4-une-t>b{font-size:2rem}
  .sk4-grille{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .sk4-page--profil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;align-items:start}
  .sk4-page--profil .sk4-record,.sk4-page--profil .sk4-stats{grid-column:1/-1}
  .sk4-record{justify-content:center}
  .sk4-record-art{width:110px}
  .sk4-sheet-fond{align-items:center}
  .sk4-sheet{border-radius:26px;transform:translateY(40px) scale(.94);opacity:0;transition:transform .5s var(--res),opacity .3s}
  .sk4-sheet-fond.on .sk4-sheet{opacity:1}
  .sk4-sheet-fond.sort .sk4-sheet{transform:translateY(30px) scale(.96);opacity:0}
  .sk4-hud{padding:14px 22px 0}
  .sk4-obj{margin:4px auto 0;width:min(620px,calc(100% - 44px))}
  .sk4-zone{padding:14px 24px 16px}
}
@media (max-width:380px){
  .sk4-vue{padding-left:12px;padding-right:12px}
  .sk4-nav{padding-left:6px;padding-right:6px}
  .sk4-nav-ind{left:6px;width:calc((100% - 12px)/4)}
  .sk4-nav-b{margin:0 3px}
  .sk4-nav-b span{font-size:.72rem}
  .sk4-modes{gap:8px}
  .sk4-mode{padding:7px 4px 10px!important}
  .sk4-mode .sk4-art{width:58px;height:44px}
  .sk4-h-st{display:none}
  .sk4-h-score{min-width:78px;padding:5px 10px 6px}
  .sk4-bourse{padding-right:10px!important}
}
@media (max-height:640px){
  .sk4-pad{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,40px)}
  .sk4-obj{min-height:38px;padding-top:4px;padding-bottom:10px}
}
/* le téléphone couché : la croix passe à droite du plateau */
@media (orientation:landscape) and (max-height:500px){
  .sk4-jeu{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr);gap:4px 8px}
  .sk4-hud{grid-column:1/-1;padding-top:6px}
  .sk4-obj{grid-column:1/-1;min-height:34px;padding-top:4px;padding-bottom:10px}
  .sk4-zone{grid-column:1;grid-row:3;padding:10px 4px 16px 14px}
  .sk4-bas{grid-column:2;grid-row:3;padding:0 14px 12px 0}
  .sk4-h-score b{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){
  .sk4 *::before,.sk4 *::after,.sk4-jeu *::before,.sk4-jeu *::after{animation:none!important}
  .sk4 *,.sk4-jeu *,.sk4-sheet-fond *,.sk4-debloque,.sk4::before,.sk4-jeu::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* @@ fin snake_da.css @@ */
/* @@ debut jeux_finitions.css @@ */
/* ==========================================================================
   LES JEUX DÉBUTANT ET AVANCÉ — FINITIONS
   Le style de Métro King : crème cernée de noir, ombre dure, couleurs
   franches ; tout est centré, et tout bouge.
   ========================================================================== */
:root{--pxj-k:#0B0E13;--pxj-cr:#FBF6E9;--pxj-cr2:#EDE3CC;--pxj-res:cubic-bezier(.3,1.5,.5,1);--pxj-doux:cubic-bezier(.2,.8,.2,1)}

/* — ce qui entre dans la scène arrive l'un après l'autre — */
.ap-stage>.pxj-entre{animation:pxjEntre .5s var(--pxj-res) backwards;animation-delay:calc(var(--pxj-i,0)*70ms)}
@keyframes pxjEntre{from{opacity:0;transform:translateY(18px) scale(.97)}}

/* — les titres de scène qui restent (couleurs, terminus…) prennent l'allure du bandeau — */
:is(.ap--debutant,.ap--avance) .ap-stage h3.stage-title{display:table;max-width:100%;margin:8px auto 18px!important;padding:11px 24px;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:clamp(1.05rem,2.6vw,1.4rem)!important;line-height:1.2;letter-spacing:0!important;text-transform:none!important;
  text-align:center;color:#0B0E13!important;-webkit-text-fill-color:#0B0E13;text-shadow:none!important;background:linear-gradient(180deg,#FBF6E9,#EDE3CC);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;animation:pxjTombe .6s var(--pxj-res) both}
:is(.ap--debutant,.ap--avance) .ap-stage h3.stage-title::before,:is(.ap--debutant,.ap--avance) .ap-stage h3.stage-title::after{display:none!important}
/* — le bandeau de consigne — */
.pxj-qw{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;margin:6px auto 18px;max-width:680px;text-align:center}
.pxj-q{display:inline-flex;align-items:center;gap:12px;max-width:100%;padding:7px 22px 7px 7px;border-radius:999px;color:var(--pxj-k);
  background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k);
  animation:pxjTombe .6s var(--pxj-res) both}
@keyframes pxjTombe{0%{opacity:0;transform:translateY(-22px) scale(.9) rotate(-2deg)}100%{opacity:1;transform:none}}
.pxj-q-ico{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--g,#FFCE00);
  box-shadow:0 0 0 3px var(--pxj-k),inset 0 -5px 0 rgba(0,0,0,.14);animation:pxjBalance 3.2s ease-in-out 1s infinite}
.pxj-q-ico svg{display:block;width:76%;height:76%;overflow:visible}
.pxj-q-ico .pxj-rond{width:44px;height:44px;font-size:1.25rem;box-shadow:0 0 0 2.5px var(--pxj-k)}
@keyframes pxjBalance{0%,80%,100%{transform:none}86%{transform:rotate(-12deg) scale(1.08)}93%{transform:rotate(8deg)}}
.pxj-q-t{font-family:var(--display);font-weight:900;font-size:clamp(1.08rem,2.8vw,1.45rem);line-height:1.15;text-align:left;text-wrap:balance}
.pxj-q-tag{align-self:center;margin-bottom:-6px;padding:3px 12px;border-radius:8px;background:#FFCE00;color:var(--pxj-k);font-family:var(--display);font-weight:900;
  font-size:.8rem;box-shadow:0 0 0 2px var(--pxj-k);transform:rotate(-3deg)}
.pxj-aide{font-family:var(--display);font-weight:700;font-size:.88rem;color:rgba(255,255,255,.72);animation:pxjEntre .5s var(--pxj-res) .25s backwards}
.pxj-qw .px-station{animation:pxjPop .55s var(--pxj-res) .2s backwards}
@media (max-width:560px){
  .pxj-q{border-radius:24px;padding:7px 16px 7px 7px;gap:10px}
  .pxj-q-ico{width:46px;height:46px}
}

/* — les pastilles de ligne — */
.pxj-rond{display:inline-grid;place-items:center;flex:none;width:2.1em;height:2.1em;border-radius:50%;background:var(--c);color:var(--t);
  font-family:var(--display);font-weight:900;font-size:1rem;line-height:1;letter-spacing:-.04em;box-shadow:0 0 0 2.5px var(--pxj-k)}
.pxj-rond.long{font-size:.72rem}
.pxj-rond.petit{width:30px;height:30px;font-size:.9rem;box-shadow:0 0 0 2px var(--pxj-k)}
.pxj-rond.petit.long{font-size:.66rem}
.pxj-rond.grand{width:62px;height:62px;font-size:1.65rem;box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k)}
.pxj-rond.grand.long{font-size:1.05rem}

/* — le bouton « logo de ligne » : la pastille seule, en grand — */
.pxj-lg{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 18px;max-width:760px;margin:8px auto 4px;padding:6px 4px 10px}
.pxj-l{position:relative;flex:none;width:70px;height:70px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;animation:pxjPop .5s var(--pxj-res) backwards;animation-delay:calc(var(--i,0)*45ms + .1s)}
@keyframes pxjPop{0%{opacity:0;transform:scale(.3) rotate(-20deg)}100%{opacity:1;transform:none}}
.pxj-l .pxj-rond{width:100%;height:100%;font-size:1.75rem;box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k),inset 0 -6px 0 rgba(0,0,0,.14);
  transition:transform .25s var(--pxj-res),box-shadow .15s,filter .3s}
.pxj-l .pxj-rond.long{font-size:1.15rem}
.pxj-l:hover .pxj-rond{transform:translateY(-5px) rotate(-6deg)}
.pxj-l:active .pxj-rond{transform:translateY(4px);box-shadow:0 0 0 3px var(--pxj-k),0 1px 0 3px var(--pxj-k),inset 0 -4px 0 rgba(0,0,0,.14)}
.pxj-l-badge{position:absolute;right:-6px;top:-6px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:#FFCE00;box-shadow:0 0 0 2.5px var(--pxj-k),0 2px 0 2.5px var(--pxj-k);transform:scale(0) rotate(-90deg);transition:transform .4s var(--pxj-res)}
.pxj-l-badge svg{width:70%;height:70%}
.pxj-l-badge path{fill:none;stroke:var(--pxj-k);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pxj-l-badge .x{display:none}
.pxj-l.sel .pxj-rond{transform:translateY(-7px);box-shadow:0 0 0 3px var(--pxj-k),0 0 0 8px #FFFFFF,0 0 0 11px var(--pxj-k),0 9px 0 11px var(--pxj-k)}
.pxj-l.sel .pxj-l-badge,.pxj-l.good .pxj-l-badge,.pxj-l.bad .pxj-l-badge,.pxj-l.manque .pxj-l-badge{transform:none}
.pxj-l.sel{animation:pxjChoisi .45s var(--pxj-res)}
@keyframes pxjChoisi{40%{transform:scale(1.15)}}
.pxj-l.good .pxj-l-badge{background:#3ED07A}
.pxj-l.good .pxj-rond{box-shadow:0 0 0 3px var(--pxj-k),0 0 0 8px #3ED07A,0 0 0 11px var(--pxj-k),0 6px 0 11px var(--pxj-k);animation:pxjJuste .6s var(--pxj-res)}
@keyframes pxjJuste{30%{transform:scale(1.2) rotate(8deg)}60%{transform:scale(.95) rotate(-4deg)}}
.pxj-l.bad .pxj-l-badge{background:#E3051C}
.pxj-l.bad .pxj-l-badge path{stroke:#fff}
.pxj-l.bad .pxj-l-badge .v{display:none}.pxj-l.bad .pxj-l-badge .x{display:block}
.pxj-l.bad .pxj-rond{filter:saturate(.35) brightness(.75);animation:pxjNon .45s}
@keyframes pxjNon{20%{transform:translateX(-8px) rotate(-6deg)}45%{transform:translateX(8px) rotate(5deg)}70%{transform:translateX(-4px)}}
.pxj-l.manque .pxj-l-badge{background:#FBF6E9}
.pxj-l.manque .pxj-rond{opacity:.85;box-shadow:0 0 0 3px var(--pxj-k),0 0 0 6px transparent,0 0 0 8px #3ED07A;outline:3px dashed #3ED07A;outline-offset:6px}
.pxj-l.eteint .pxj-rond{filter:grayscale(.85) brightness(.6);transform:scale(.88)}
.pxj-l.ko,.pxj-l:disabled{cursor:default}
.pxj-l.ko .pxj-rond{filter:grayscale(1) brightness(.55);box-shadow:0 0 0 3px var(--pxj-k)}
.pxj-l.ko::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;background:#E3051C;
  box-shadow:0 0 0 2px var(--pxj-k);transform:rotate(-38deg)}
.pxj-l:disabled:not(.ko):hover .pxj-rond{transform:none}
.pxj-lg.petit{gap:12px;margin-top:4px}
.pxj-lg.petit .pxj-l{width:48px;height:48px}
.pxj-lg.petit .pxj-rond{font-size:1.2rem}
.pxj-lg.petit .pxj-l-badge{width:22px;height:22px}
@media (max-width:560px){
  .pxj-lg{gap:14px 14px}
  .pxj-l{width:60px;height:60px}
  .pxj-l .pxj-rond{font-size:1.5rem}
}

/* — les boutons — */
.pxj-barre{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:20px auto 4px}
.pxj-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:.7em 1.6em;border:0;
  border-radius:999px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:1.02rem;color:var(--pxj-k);
  background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k);
  transition:transform .2s var(--pxj-res),box-shadow .12s,opacity .2s}
.pxj-btn:hover{transform:translateY(-3px)}
.pxj-btn:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--pxj-k),0 1px 0 3px var(--pxj-k)}
.pxj-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pxj-btn--go{min-width:min(260px,80vw);background:linear-gradient(180deg,#FFE88A,#FFCE00);font-size:1.1rem}
.pxj-btn--go::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-20deg);animation:pxjReflet 3s ease-in-out 1.2s infinite}
.pxj-btn--go:disabled::after{display:none}
.pxj-btn--go.pret{animation:pxjAppel 1.4s ease-in-out infinite}
@keyframes pxjReflet{0%,60%{left:-40%}100%{left:130%}}
@keyframes pxjAppel{0%,100%{transform:none}50%{transform:translateY(-4px) scale(1.04)}}
.pxj-btn--doux{min-height:42px;padding:.5em 1.2em;font-size:.9rem;color:#FBF6E9;background:rgba(255,255,255,.08);box-shadow:0 0 0 2.5px rgba(255,255,255,.4),0 4px 0 2.5px rgba(0,0,0,.45)}
.pxj-btn--doux:active{box-shadow:0 0 0 2.5px rgba(255,255,255,.4),0 1px 0 2.5px rgba(0,0,0,.45)}
.pxj-btn--petit{min-height:40px;min-width:0;padding:.45em 1.1em;font-size:.88rem}

/* — la carte de verdict — */
.pxj-v{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;max-width:640px;margin:6px auto 16px;
  padding:16px 18px;border-radius:24px;color:var(--pxj-k);background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));
  box-shadow:0 0 0 3px var(--pxj-k),0 0 0 8px var(--vc,#3ED07A),0 11px 0 8px var(--pxj-k);animation:pxjSurgit .6s var(--pxj-res) both}
@keyframes pxjSurgit{0%{opacity:0;transform:translateY(26px) scale(.9)}100%{opacity:1;transform:none}}
.pxj-v--ok{--vc:#3ED07A}.pxj-v--alt{--vc:#FFCE00}.pxj-v--ko{--vc:#FF5A4E}
.pxj-v-tampon{width:64px;height:64px;animation:pxjTampon .7s var(--pxj-res) .15s both}
.pxj-v-tampon svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes pxjTampon{0%{opacity:0;transform:scale(2.4) rotate(-30deg)}60%{opacity:1;transform:scale(.9) rotate(6deg)}100%{transform:rotate(-4deg)}}
.pxj-v-txt{display:flex;flex-direction:column;gap:4px;text-align:left;min-width:0}
.pxj-v-txt b{font-family:var(--display);font-weight:900;font-size:clamp(1.35rem,4vw,1.75rem);line-height:1}
.pxj-v-txt p{margin:0;font-size:.95rem;line-height:1.4;color:#3B4048}
.pxj-v-chips{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px}
.pxj-chip{display:inline-flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:999px;background:#FFFFFF;color:var(--pxj-k);
  box-shadow:0 0 0 2px var(--pxj-k),0 3px 0 2px var(--pxj-k);animation:pxjPop .45s var(--pxj-res) backwards;animation-delay:calc(.45s + var(--i,0)*80ms)}
.pxj-chip small{font-family:var(--display);font-weight:700;font-size:.74rem;opacity:.7}
.pxj-chip b{font-family:var(--display);font-weight:900;font-size:.95rem}
.pxj-chip.or{background:#FFCE00}.pxj-chip.vert{background:#9BE3B4}

/* — les zones centrées, les champs — */
.pxj-zone{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}
.pxj-zone>*{max-width:100%}
.pxj-champ{width:min(440px,100%);margin:4px auto 0}
.pxj-champ input{width:100%;text-align:center;font-family:var(--display);font-weight:800;font-size:1.05rem;border-radius:999px!important;
  background:#FFFFFF!important;color:#0B0E13!important;border:0!important;
  box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k)!important}
.pxj-saisie{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:min(560px,100%)}
.pxj-saisie .pxj-champ{flex:1 1 260px;margin:0}
.pxj-construit{width:min(760px,100%);margin-top:18px}

/* — une carte crème : le meilleur trajet, votre trajet — */
.pxj-carte{width:min(760px,100%);margin:6px auto 0;padding:12px;border-radius:22px;background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));
  color:var(--pxj-k);box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k);animation:pxjSurgit .55s var(--pxj-res) backwards;animation-delay:.25s}
.pxj-carte-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px;padding:2px 4px 10px}
.pxj-carte-tete>b{font-family:var(--display);font-weight:900;font-size:1.12rem}
.pxj-construit .pxj-carte-tete>b{color:#FBF6E9}
.pxj-carte-l{display:inline-flex;gap:6px}
.pxj-carte .itx-cadre{margin:0}
.pxj-recap{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto 6px}
.pxj-recap>small{font-family:var(--display);font-weight:800;font-size:.85rem;color:rgba(255,255,255,.75)}

/* — intermédiaire : chaque correspondance entre ses deux lignes — */
.pxj-corrs{display:flex;flex-direction:column;gap:14px;width:min(620px,100%)}
.pxj-corr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.06);
  box-shadow:0 0 0 2.5px rgba(255,255,255,.18);animation:pxjEntre .5s var(--pxj-res) backwards;animation-delay:calc(.2s + var(--i,0)*90ms)}
.pxj-corr .pxj-rond{width:48px;height:48px;font-size:1.3rem;box-shadow:0 0 0 3px var(--pxj-k),0 4px 0 3px var(--pxj-k)}
.pxj-corr .pxj-champ{flex:1;margin:0;min-width:0}
.pxj-corr-fl{flex:none;width:18px;height:4px;border-radius:2px;background:#FBF6E9;opacity:.55}
@media (max-width:560px){ .pxj-corr{gap:6px;padding:8px} .pxj-corr .pxj-rond{width:40px;height:40px;font-size:1.05rem} .pxj-corr-fl{width:8px} .pxj-champ input{font-size:.95rem} }

/* — Lignes d'une station — */
.ap--avance .node-stage{max-width:640px;margin-left:auto!important;margin-right:auto!important}
.pxj-faisceau{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.pxj-faisceau .pxj-rond{animation:pxjPop .5s var(--pxj-res) backwards}
.pxj-faisceau .pxj-rond:nth-child(2){animation-delay:.1s}.pxj-faisceau .pxj-rond:nth-child(3){animation-delay:.2s}.pxj-faisceau .pxj-rond:nth-child(4){animation-delay:.3s}
.pxj-stations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:640px;margin:14px auto 0}
.pxj-st{min-height:58px;padding:10px 16px;border:0;border-radius:18px;cursor:pointer;font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.15;
  color:var(--pxj-k);background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k);
  transition:transform .2s var(--pxj-res),box-shadow .12s;animation:pxjEntre .45s var(--pxj-res) backwards;animation-delay:calc(.15s + var(--i,0)*60ms)}
.pxj-st:hover{transform:translateY(-4px) rotate(-1deg)}
.pxj-st:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--pxj-k),0 2px 0 3px var(--pxj-k)}
.pxj-st.good{background:linear-gradient(180deg,#B8F0C9,#7ED89E);animation:pxjJuste .6s var(--pxj-res)}
.pxj-st.bad{background:linear-gradient(180deg,#FFC2BB,#FF8A80);animation:pxjNon .45s}
@media (max-width:560px){ .pxj-stations{grid-template-columns:minmax(0,1fr)} }

/* — Reconstituer : les deux bouts de la ligne — */
.pxj-bouts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.pxj-bouts>i{display:block;width:44px;height:8px;border-radius:4px;background:var(--c);box-shadow:0 0 0 2.5px var(--pxj-k)}
@media (max-width:560px){ .pxj-bouts{flex-direction:column;gap:6px} .pxj-bouts>i{width:8px;height:16px} }
/* le chantier n'apparaît qu'à la première station posée */
.ap-stage .builder:has(#bd-st:empty){display:none}
.ap-stage .builder{animation:pxjSurgit .55s var(--pxj-res) both}
/* — Reconnaître : la réponse — */
.pxj-im-rep{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:-4px auto 6px}

/* — QUIZ DU RÉSEAU — */
.pxj-quiz-scene{position:relative;width:min(760px,100%);aspect-ratio:640/330;margin:4px auto 0;border-radius:24px;overflow:hidden;
  box-shadow:0 0 0 3px var(--pxj-k),0 8px 0 3px var(--pxj-k)}
.pxj-quiz-art,.pxj-quiz-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.pxj-quiz-rame{position:absolute;left:0;top:47%;width:22%;animation:pxjQuai 7s ease-in-out infinite}
.pxj-quiz-rame svg{display:block;width:100%;height:auto}
@keyframes pxjQuai{0%{transform:translateX(-120%)}35%,55%{transform:translateX(70%)}100%{transform:translateX(560%)}}
.pxj-quiz-pan{position:absolute;left:4%;right:4%;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 18px 14px;
  border-radius:20px;text-align:center;color:var(--pxj-k);background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));
  box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k);animation:pxjSurgit .55s var(--pxj-res) .1s backwards}
.pxj-quiz-n{position:absolute;left:16px;top:-12px;padding:3px 12px;border-radius:8px;background:#153E8C;color:#fff;font-family:var(--display);font-weight:800;
  font-size:.78rem;box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2px var(--pxj-k);transform:rotate(-2deg)}
.pxj-quiz-ico{position:absolute;right:14px;top:-26px;width:52px;height:52px;animation:pxjBalance 3s ease-in-out 1s infinite}
.pxj-quiz-ico svg{display:block;width:100%;height:100%}
.pxj-quiz-q{margin:0;font-family:var(--display);font-weight:900;font-size:clamp(1.05rem,2.8vw,1.5rem);line-height:1.2;text-wrap:balance}
.pxj-quiz-sous{font-family:var(--display);font-weight:700;font-size:.82rem;color:#5B6370}
.pxj-quiz-temps{display:block;width:100%;height:10px;margin-top:6px;border-radius:6px;background:#fff;box-shadow:0 0 0 2px var(--pxj-k);overflow:hidden}
.pxj-quiz-temps>i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3ED07A,#FFCE00);transition:width .1s linear}
.pxj-quiz-temps.urgent>i{background:linear-gradient(90deg,#FF5A4E,#FF7A2F);animation:pxjClignote .5s steps(2) infinite}
@keyframes pxjClignote{50%{opacity:.5}}
.pxj-quiz-scene.juste{animation:pxjJuste .6s var(--pxj-res)}
.pxj-quiz-scene.faux{animation:pxjNon .45s}
@media (max-width:560px){
  .pxj-quiz-scene{aspect-ratio:auto;min-height:260px;display:flex;align-items:flex-end;padding:72px 10px 10px}
  .pxj-quiz-pan{position:relative;left:auto;right:auto;bottom:auto;width:100%}
}
.pxj-vf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:620px;margin:22px auto 0}
.pxj-vf-b{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px 16px;border:0;border-radius:24px;cursor:pointer;
  color:var(--pxj-k);background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));
  box-shadow:inset 0 10px 0 var(--vc),inset 0 13px 0 var(--pxj-k),0 0 0 3px var(--pxj-k),0 7px 0 3px var(--pxj-k);
  transition:transform .22s var(--pxj-res),box-shadow .12s;animation:pxjEntre .5s var(--pxj-res) backwards;animation-delay:calc(.2s + var(--i,0)*90ms)}
.pxj-vf-b--v{--vc:#3ED07A}.pxj-vf-b--f{--vc:#FF5A4E}
.pxj-vf-ico{width:60px;height:60px;margin-top:8px;transition:transform .3s var(--pxj-res)}
.pxj-vf-ico svg{display:block;width:100%;height:100%}
.pxj-vf-b b{font-family:var(--display);font-weight:900;font-size:1.25rem}
.pxj-vf-b:hover{transform:translateY(-5px) rotate(-1deg)}
.pxj-vf-b:hover .pxj-vf-ico{transform:scale(1.15) rotate(-8deg)}
.pxj-vf-b:active{transform:translateY(4px)}
.pxj-qcm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px;margin:22px auto 0}
.pxj-qcm-b{display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 16px 10px 10px;border:0;border-radius:20px;cursor:pointer;text-align:left;
  color:var(--pxj-k);background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k);
  transition:transform .22s var(--pxj-res),box-shadow .12s;animation:pxjEntre .45s var(--pxj-res) backwards;animation-delay:calc(.2s + var(--i,0)*70ms)}
.pxj-qcm-b b{font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.2}
.pxj-qcm-lignes{display:flex;flex-wrap:wrap;gap:8px}
.pxj-qcm-lignes .pxj-rond.petit{width:36px;height:36px;font-size:1.05rem;box-shadow:0 0 0 2.5px var(--pxj-k),0 3px 0 2.5px var(--pxj-k)}
.pxj-qcm-l{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-family:var(--display);font-weight:900;font-size:1.15rem;
  color:var(--pxj-k);background:#FFCE00;box-shadow:0 0 0 2.5px var(--pxj-k);transition:transform .3s var(--pxj-res)}
.pxj-qcm-b:nth-child(2) .pxj-qcm-l{background:#7CC4FF}.pxj-qcm-b:nth-child(3) .pxj-qcm-l{background:#FF9AC8}.pxj-qcm-b:nth-child(4) .pxj-qcm-l{background:#9BE3B4}
.pxj-qcm-b:hover{transform:translateY(-4px)}
.pxj-qcm-b:hover .pxj-qcm-l{transform:rotate(-10deg) scale(1.1)}
.pxj-qcm-b:active{transform:translateY(4px);box-shadow:0 0 0 3px var(--pxj-k),0 2px 0 3px var(--pxj-k)}
:is(.pxj-qcm,.pxj-vf).fini>button{cursor:default}
:is(.pxj-qcm,.pxj-vf).fini>button:not(.good):not(.bad){opacity:.45;transform:scale(.97)}
:is(.pxj-qcm-b,.pxj-vf-b).good{background:linear-gradient(180deg,#B8F0C9,#7ED89E);animation:pxjJuste .6s var(--pxj-res)}
:is(.pxj-qcm-b,.pxj-vf-b).bad{background:linear-gradient(180deg,#FFC2BB,#FF8A80);animation:pxjNon .45s}
@media (max-width:560px){ .pxj-qcm{grid-template-columns:minmax(0,1fr);gap:12px} }
.pxj-quiz-bas{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:20px}
.pxj-quiz-why{display:flex;align-items:flex-end;gap:10px;max-width:640px;animation:pxjSurgit .5s var(--pxj-res) both}
.pxj-quiz-agent{flex:none;width:64px}
.pxj-quiz-agent svg{display:block;width:100%;height:auto}
.pxj-quiz-bulle{position:relative;padding:12px 16px;border-radius:18px 18px 18px 6px;text-align:left;color:var(--pxj-k);background:#FFFFFF;
  box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k)}
.pxj-quiz-bulle b{display:block;font-family:var(--display);font-weight:900;font-size:1.05rem}
.pxj-quiz-why.ok .pxj-quiz-bulle b{color:#0E7A3E}.pxj-quiz-why.ko .pxj-quiz-bulle b{color:#C8102E}
.pxj-quiz-bulle p{margin:4px 0 0;font-size:.92rem;line-height:1.4;color:#3B4048}

/* — NOMBRE DE VOYAGEURS — */
.pxj-fq-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:900px;margin:8px auto 0}
.pxj-fq{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border-radius:24px;color:var(--pxj-k);
  background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));box-shadow:inset 0 9px 0 var(--c),inset 0 12px 0 var(--pxj-k),0 0 0 3px var(--pxj-k),0 7px 0 3px var(--pxj-k);
  transition:transform .25s var(--pxj-res),box-shadow .2s;animation:pxjEntre .5s var(--pxj-res) backwards;animation-delay:calc(.15s + var(--i,0)*90ms)}
.pxj-fq-tete{margin-top:10px}
.pxj-fq-tete .pxj-rond.grand{width:70px;height:70px;font-size:1.9rem;animation:pxjFlotte 3s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.6s)}
@keyframes pxjFlotte{0%,100%{translate:0 0}50%{translate:0 -5px}}
.pxj-fq-foule{width:100%;height:64px}
.pxj-fq-foule svg{display:block;width:100%;height:100%;overflow:visible}
.pxj-perso{animation:pxjPerso 1.6s ease-in-out infinite;animation-delay:var(--d)}
.pxj-fq.ok .pxj-perso{animation:pxjHourra .7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes pxjPerso{0%,100%{translate:0 0}50%{translate:0 -1.5px}}
@keyframes pxjHourra{0%,100%{translate:0 0}50%{translate:0 -5px}}
.pxj-fq-fente{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:64px;padding:6px;border-radius:16px;
  background:repeating-linear-gradient(-45deg,rgba(11,14,19,.05) 0 8px,transparent 8px 16px),#FFFFFF;box-shadow:inset 0 0 0 2.5px var(--pxj-k);
  outline:3px dashed rgba(11,14,19,.35);outline-offset:-9px;transition:background .3s,outline-color .3s}
.pxj-fq-vide{font-family:var(--display);font-weight:800;font-size:.78rem;color:#7A8290}
.pxj-fq-val{display:none;font-family:var(--display);font-weight:900;font-size:1.3rem;line-height:1;font-variant-numeric:tabular-nums}
.pxj-fq-u{display:none;font-family:var(--display);font-weight:700;font-size:.72rem;color:#4A5460}
.pxj-fq.ok .pxj-fq-fente{background:linear-gradient(180deg,#FFF4C2,#FFE07A);outline-color:transparent;animation:pxjJuste .6s var(--pxj-res)}
.pxj-fq.ok .pxj-fq-vide{display:none}
.pxj-fq.ok :is(.pxj-fq-val,.pxj-fq-u){display:block}
.pxj-fq.ok{box-shadow:inset 0 9px 0 var(--c),inset 0 12px 0 var(--pxj-k),0 0 0 3px var(--pxj-k),0 0 0 8px var(--c),0 10px 0 8px var(--pxj-k)}
.pxj-fq.non{animation:pxjNon .45s}
.pxj-fq.drop-hot,.pxj-fq.hot{transform:translateY(-6px) scale(1.03)}
.pxj-fq-rack{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:26px auto 6px;max-width:900px}
.pxj-tk{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:150px;padding:10px 18px 10px 26px;border-radius:10px;cursor:grab;
  color:var(--pxj-k);background:linear-gradient(180deg,#FBF6E9,#F0E4C8);touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 0 2.5px var(--pxj-k),0 5px 0 2.5px var(--pxj-k);transform:rotate(var(--r,0deg));
  animation:pxjTicket .55s var(--pxj-res) backwards;animation-delay:calc(.5s + var(--i,0)*90ms)}
@keyframes pxjTicket{0%{opacity:0;transform:translateY(30px) rotate(20deg)}100%{opacity:1;transform:rotate(var(--r,0deg))}}
.pxj-tk::before,.pxj-tk::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--fond-stage,#141B25);box-shadow:inset 0 0 0 2.5px var(--pxj-k)}
.pxj-tk::before{left:-7px}.pxj-tk::after{right:-7px}
.pxj-tk-bande{position:absolute;left:10px;top:6px;bottom:6px;width:6px;border-radius:3px;background:#8C5E2A}
.pxj-tk b{font-family:var(--display);font-weight:900;font-size:1.3rem;line-height:1.05;font-variant-numeric:tabular-nums}
.pxj-tk small{font-family:var(--display);font-weight:700;font-size:.74rem;color:#5B6370}
/* le frisson s'AJOUTE à l'animation d'entrée : la remplacer la faisait repartir
   au départ de la souris, et le billet redevenait invisible le temps de son délai */
.pxj-tk:hover{animation:pxjTicket .55s var(--pxj-res) backwards,pxjFrisson .4s;animation-delay:calc(.5s + var(--i,0)*90ms),0s}
@keyframes pxjFrisson{30%{rotate:-3deg}60%{rotate:3deg}}
.pxj-tk.wrong{animation:pxjTicket .55s var(--pxj-res) backwards,pxjNon .45s;animation-delay:calc(.5s + var(--i,0)*90ms),0s}
@media (max-width:760px){ .pxj-fq-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} }
@media (max-width:560px){ .pxj-tk{min-width:136px;padding:8px 14px 8px 24px} .pxj-tk b{font-size:1.12rem} .pxj-fq-val{font-size:1.1rem} }

/* — ITINÉRAIRE AVANCÉ : la ligne des paliers — */
.pxj-av-menu{display:flex;flex-direction:column;align-items:center;padding:6px 0 4px}
.pxj-av-ligne{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));width:min(820px,100%);margin:10px auto 6px;padding:34px 0 4px}
.pxj-av-rail{position:absolute;left:10%;right:10%;top:62px;height:14px;border-radius:8px;background:#3A4250;box-shadow:0 0 0 3px var(--pxj-k)}
.pxj-av-rail-fait{position:absolute;left:0;top:0;bottom:0;width:calc(var(--k)*100%);border-radius:8px;
  background:linear-gradient(90deg,#83C491,#FFCE00,#F28E42,#C04191,#662483);background-size:calc(100%/max(var(--k),.001)) 100%;
  animation:pxjRail 1s var(--pxj-doux) .2s backwards}
@keyframes pxjRail{from{width:0}}
.pxj-av-st{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;color:#FBF6E9;
  animation:pxjPop .5s var(--pxj-res) backwards;animation-delay:calc(.15s + var(--i)*90ms)}
.pxj-av-rond{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--c);color:var(--pxj-k);font-family:var(--display);font-weight:900;font-size:1.5rem;
  box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k),inset 0 -5px 0 rgba(0,0,0,.15);transition:transform .25s var(--pxj-res)}
.pxj-av-rond svg{width:66%;height:66%}
.pxj-av-st b{font-family:var(--display);font-weight:800;font-size:.86rem}
.pxj-av-st:hover .pxj-av-rond{transform:translateY(-5px) rotate(-6deg)}
.pxj-av-st.lock .pxj-av-rond{background:#5B6370;filter:saturate(.3)}
.pxj-av-st.lock b{opacity:.6}
.pxj-av-st.on .pxj-av-rond{transform:scale(1.18);box-shadow:0 0 0 3px var(--pxj-k),0 0 0 8px #FFFFFF,0 0 0 11px var(--pxj-k),0 8px 0 11px var(--pxj-k)}
.pxj-av-st.on b{color:#FFE08A;margin-top:12px}
.pxj-av-st.fait .pxj-av-rond::after{content:"";position:absolute}
.pxj-av-rame{position:absolute;top:-36px;left:50%;width:60px;margin-left:-30px;animation:pxjRame .7s var(--pxj-res) both}
.pxj-av-rame svg{display:block;width:100%;height:auto}
@keyframes pxjRame{0%{opacity:0;transform:translateX(-40px)}100%{opacity:1;transform:none}}
.pxj-av-fiche{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:min(560px,100%);margin:22px auto 0;padding:18px 18px 20px;border-radius:26px;
  color:var(--pxj-k);background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));text-align:center;
  box-shadow:inset 0 10px 0 var(--c),inset 0 13px 0 var(--pxj-k),0 0 0 3px var(--pxj-k),0 8px 0 3px var(--pxj-k);animation:pxjSurgit .55s var(--pxj-res) both}
.pxj-av-fiche-t{display:flex;align-items:center;gap:12px;margin-top:8px}
.pxj-av-num{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);font-family:var(--display);font-weight:900;font-size:1.3rem;box-shadow:0 0 0 3px var(--pxj-k)}
.pxj-av-fiche-t div{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.pxj-av-fiche-t small{font-family:var(--display);font-weight:700;font-size:.8rem;color:#5B6370}
.pxj-av-fiche-t b{font-family:var(--display);font-weight:900;font-size:1.6rem;line-height:1}
.pxj-av-desc{margin:0;font-size:.98rem;line-height:1.4;color:#3B4048}
.pxj-av-infos{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pxj-av-info{display:inline-flex;flex-direction:column;align-items:center;gap:4px;min-width:96px;padding:8px 12px;border-radius:16px;background:#FFFFFF;box-shadow:0 0 0 2px var(--pxj-k)}
.pxj-av-info small{font-family:var(--display);font-weight:700;font-size:.72rem;color:#5B6370}
.pxj-av-info b{font-family:var(--display);font-weight:900;font-size:1rem}
.pxj-av-modes,.pxj-av-cones{display:flex;align-items:center;gap:4px;height:26px}
.pxj-av-mode{display:block;height:24px}
.pxj-av-mode svg{display:block;height:100%;width:auto}
.pxj-av-cones .pxj-picto{width:22px;height:22px}
.pxj-picto{display:inline-block;flex:none;width:28px;height:28px}
.pxj-picto svg{display:block;width:100%;height:100%;overflow:visible}
.pxj-av-verrou{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#FFFFFF;font-family:var(--display);font-weight:800;box-shadow:0 0 0 2px var(--pxj-k)}
.pxj-av-fiche.lock{filter:saturate(.6)}
@media (max-width:560px){
  .pxj-av-rond{width:44px;height:44px;font-size:1.15rem}
  .pxj-av-rail{top:56px;height:10px}
  .pxj-av-st b{font-size:.68rem}
  .pxj-av-rame{width:46px;margin-left:-23px;top:-30px}
}

/* — ITINÉRAIRE AVANCÉ : la partie — */
.pxj-av-alerte{display:flex;align-items:flex-end;justify-content:center;gap:10px;max-width:640px;margin:4px auto 10px;animation:pxjSurgit .5s var(--pxj-res) both}
.pxj-av-agent{flex:none;width:68px}
.pxj-av-agent svg{display:block;width:100%;height:auto}
.pxj-av-bulle{padding:12px 16px;border-radius:18px 18px 18px 6px;background:#FFFFFF;color:var(--pxj-k);font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.3;
  box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k);animation:pxjBulle .5s var(--pxj-res) .2s backwards}
@keyframes pxjBulle{0%{opacity:0;transform:scale(.4);transform-origin:0 100%}100%{opacity:1;transform:none}}
.pxj-av-incs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;max-width:820px;margin:0 auto 16px}
.pxj-av-inc{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:18px;text-align:left;color:var(--pxj-k);
  background:repeating-linear-gradient(-45deg,rgba(255,122,47,.08) 0 10px,transparent 10px 20px),linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));
  box-shadow:inset 6px 0 0 #FF7A2F,0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k);animation:pxjEntre .5s var(--pxj-res) backwards;animation-delay:calc(.35s + var(--i,0)*120ms)}
.pxj-av-inc .pxj-picto{width:40px;height:40px;animation:pxjBalance 2.6s ease-in-out infinite}
.pxj-av-inc b{font-family:var(--display);font-weight:900;font-size:1.02rem}
.pxj-av-inc p{margin:2px 0;font-size:.9rem;line-height:1.35;font-weight:600}
.pxj-av-inc small{font-size:.78rem;line-height:1.35;color:#5B6370}
.pxj-av-feuille{margin-bottom:16px}
.pxj-frise{display:flex;flex-direction:column;align-items:center;padding:4px 0 6px}
.pxj-fr-st{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:34px}
.pxj-fr-pt{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 3px var(--pxj-k);z-index:0;display:none}
.pxj-fr-st .px-station{position:relative;z-index:1}
.pxj-fr-st small{position:absolute;left:calc(50% + 10px);transform:translateX(var(--dx,0));display:none}
.pxj-fr-st.dep .px-station{box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2px var(--pxj-k),0 3px 0 2px var(--pxj-k),0 0 0 6px #3ED07A}
.pxj-fr-st.arr .px-station{box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2px var(--pxj-k),0 3px 0 2px var(--pxj-k),0 0 0 6px #FF5A4E}
.pxj-fr-st.todo .px-station{opacity:.55;filter:saturate(.4)}
.pxj-fr-st.neuf .px-station{animation:pxjPop .5s var(--pxj-res)}
.pxj-fr-seg{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px}
.pxj-fr-seg::before{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:12px;margin-left:-6px;border-radius:6px;background:var(--c,#B9B2A6);
  box-shadow:0 0 0 2.5px var(--pxj-k);transform-origin:50% 0;animation:pxjTrace .45s var(--pxj-doux) backwards}
@keyframes pxjTrace{from{transform:scaleY(0)}}
.pxj-fr-seg.pied::before{background:repeating-linear-gradient(180deg,#FBF6E9 0 6px,#B9B2A6 6px 12px)}
.pxj-fr-seg.todo::before{background:transparent;box-shadow:none;border-left:4px dashed rgba(11,14,19,.35);width:0;margin-left:-2px;border-radius:0}
.pxj-fr-l{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-left:72px;padding:3px 10px 3px 3px;border-radius:999px;background:#FFFFFF;
  box-shadow:0 0 0 2px var(--pxj-k)}
.pxj-fr-l small{font-family:var(--display);font-weight:800;font-size:.76rem}
.pxj-fr-l .pxj-picto{width:24px;height:24px}
.pxj-fr-seg>.pxj-fr-l:only-child:has(.pxj-rond){padding:3px}
.pxj-fr-undo{position:absolute;left:calc(100% + 8px);top:50%;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border:0;border-radius:50%;cursor:pointer;
  background:#FFCE00;box-shadow:0 0 0 2.5px var(--pxj-k),0 3px 0 2.5px var(--pxj-k);transition:transform .2s var(--pxj-res)}
.pxj-fr-undo svg{width:20px;height:20px}
.pxj-fr-undo:hover{transform:rotate(-20deg) scale(1.08)}
.pxj-fr-undo:active{transform:translateY(3px)}
.pxj-av-arrive{display:flex;align-items:center;gap:14px;padding:14px 22px;border-radius:999px;color:var(--pxj-k);background:linear-gradient(180deg,#B8F0C9,#7ED89E);
  box-shadow:0 0 0 3px var(--pxj-k),0 6px 0 3px var(--pxj-k);text-align:left;animation:pxjSurgit .55s var(--pxj-res) both}
.pxj-av-arrive .pxj-picto{width:46px;height:46px;animation:pxjBalance 1.8s ease-in-out infinite}
.pxj-av-arrive b{display:block;font-family:var(--display);font-weight:900;font-size:1.3rem}
.pxj-av-arrive span{font-family:var(--display);font-weight:700;font-size:.9rem}
.pxj-depuis{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1rem;color:#FBF6E9}
.pxj-pieds{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px}
.pxj-pied{display:flex;align-items:center;gap:10px;padding:8px 18px 8px 10px;border:0;border-radius:999px;cursor:pointer;text-align:left;color:var(--pxj-k);
  background:linear-gradient(180deg,var(--pxj-cr),var(--pxj-cr2));box-shadow:0 0 0 3px var(--pxj-k),0 5px 0 3px var(--pxj-k);
  transition:transform .2s var(--pxj-res);animation:pxjEntre .45s var(--pxj-res) backwards;animation-delay:calc(.3s + var(--i,0)*70ms)}
.pxj-pied .pxj-picto{width:34px;height:34px}
.pxj-pied small{display:block;font-family:var(--display);font-weight:700;font-size:.74rem;color:#5B6370}
.pxj-pied b{font-family:var(--display);font-weight:900;font-size:.98rem}
.pxj-pied:hover{transform:translateY(-3px)}
.pxj-pied:active{transform:translateY(4px)}
.pxj-ruban{width:min(820px,100%);margin:8px auto 4px;padding:14px 12px;border-radius:22px;background:rgba(255,255,255,.05);box-shadow:0 0 0 2.5px rgba(255,255,255,.15)}
.pxj-ruban-t{display:block;margin-bottom:10px;font-family:var(--display);font-weight:800;font-size:.85rem;color:rgba(255,255,255,.75)}
.pxj-arrets{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px}
.pxj-arret{position:relative;display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 8px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:.88rem;color:var(--pxj-k);background:#FFFFFF;box-shadow:0 0 0 2.5px var(--pxj-k),0 4px 0 2.5px var(--pxj-k);
  transition:transform .2s var(--pxj-res),box-shadow .12s;animation:pxjPop .4s var(--pxj-res) backwards;animation-delay:calc(var(--i,0)*18ms)}
.pxj-arret-pt{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--pxj-k)}
.pxj-arret:hover:not(:disabled){transform:translateY(-4px) rotate(-2deg);box-shadow:0 0 0 2.5px var(--pxj-k),0 0 0 5px var(--c),0 7px 0 5px var(--pxj-k)}
.pxj-arret:active:not(:disabled){transform:translateY(3px)}
.pxj-arret.ici{background:var(--c);color:var(--t);cursor:default}
.pxj-arret.ici .pxj-arret-pt{background:#FFFFFF}
.pxj-arret em{position:absolute;left:50%;top:-22px;transform:translateX(-50%);white-space:nowrap;padding:1px 8px;border-radius:6px;font-style:normal;font-size:.68rem;
  background:#FFCE00;color:var(--pxj-k);box-shadow:0 0 0 2px var(--pxj-k);animation:pxjSaute 1.2s ease-in-out infinite}
@keyframes pxjSaute{0%,100%{translate:0 0}50%{translate:0 -3px}}
.pxj-arret.but:not(:disabled){background:#FFE07A}
.pxj-arret.hors{opacity:.4;cursor:default;box-shadow:0 0 0 2px var(--pxj-k)}
.pxj-arret.ici.hors{opacity:1}
.pxj-arret.ferme{opacity:.75;background:repeating-linear-gradient(-45deg,#FFD9C2 0 8px,#FFFFFF 8px 16px);text-decoration:line-through}
.pxj-arret-cone{width:20px;height:20px}

/* — les pages Débutant et Avancé : les cartes de jeux s'animent — */
.px-jeux .px-jeu{animation:pxjCarte .65s var(--pxj-res) backwards;animation-delay:calc(.15s + var(--i,0)*90ms)}
@keyframes pxjCarte{0%{opacity:0;transform:translateY(40px) rotate(-3deg) scale(.92)}100%{opacity:1;transform:none}}
.px-jeux .px-jeu .ap-emb{animation:pxjFlotte 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.8s)}
.px-jeux .px-jeu:hover .ap-jeu-arret{animation:pxjArret .5s var(--pxj-res)}
@keyframes pxjArret{50%{scale:1.3}}
.px-jeux .px-jeu .ap-jeu-rail::after{content:"";position:absolute;left:0;top:-8px;width:34px;height:20px;border-radius:7px;opacity:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 4px,#9ED0EA 4px 12px,transparent 12px 15px,#9ED0EA 15px 23px,transparent 23px),#FBF6E9;
  background-size:100% 8px,100% 100%;background-position:0 4px,0 0;background-repeat:no-repeat;box-shadow:0 0 0 2.5px var(--pxj-k)}
.px-jeux .px-jeu:hover .ap-jeu-rail::after{animation:pxjRameRail 1.1s ease-in-out}
@keyframes pxjRameRail{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 34px);opacity:0}}
.px-jeux .px-jeu .ap-jeu-go{transition:transform .25s var(--pxj-res)}
.px-jeux .px-jeu:hover .ap-jeu-go{transform:translateX(6px) scale(1.06)}
.px-jeux .px-jeu:active{transform:translateY(4px) scale(.98)}

@media (prefers-reduced-motion:reduce){
  .ap-stage>.pxj-entre,.pxj-q,.pxj-q-ico,.pxj-l,.pxj-v,.pxj-v-tampon,.pxj-chip,.pxj-btn--go::after,.pxj-quiz-rame,.pxj-fq,.pxj-perso,.pxj-tk,.pxj-av-st,.pxj-av-fiche,
  .px-jeux .px-jeu,.px-jeux .px-jeu .ap-emb,.pxj-arret,.pxj-fr-seg::before,.pxj-av-inc,.pxj-av-inc .pxj-picto{animation:none!important}
}
/* @@ fin jeux_finitions.css @@ */
/* @@ debut metrocity_finitions.css @@ */
/* ==========================================================================
   METRO CITY — FINITIONS : tout au centre, le reste derrière un « i »
   ========================================================================== */
:root{--mcf-k:#0B0E13;--mcf-cr:#FBF6E9;--mcf-cr2:#EDE3CC;--mcf-bleu:#153E8C;--mcf-res:cubic-bezier(.3,1.5,.5,1);--mcf-doux:cubic-bezier(.2,.8,.2,1)}

/* — les onglets : des rectangles aux coins arrondis — */
.mc-dock{justify-content:center}
.mc-dock .mc-dtab{border-radius:12px!important}
.mc-pane p:empty{display:none}

/* — plus de petites capitales de machine à écrire dans Metro City — */
.mc-info-lab{font-family:var(--display)!important;letter-spacing:.01em!important;text-transform:none!important;font-weight:800!important;font-size:.78rem!important}
:is(.mc-pane,.mc-modal) :is(.price,.mcb-note,.mcb-reduc,.mcb-ok,.mc-info-plus){font-family:var(--display)!important;letter-spacing:0!important;text-transform:none!important}
.mc-lx :is(.mc-lx-jauge small,.mc-lx-prod small,.mc-lx-niv){font-family:var(--display)!important;letter-spacing:0!important;text-transform:none!important;font-size:.82rem!important;font-weight:800}
.mc-lx .mc-lx-prod b{font-family:var(--display)!important;font-weight:900}
.mc-lx .mc-lx-prod{display:flex;flex-direction:column;align-items:center;text-align:center}
/* — le « i » et sa bulle — */
.mcf-i{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin-left:6px;border-radius:50%;cursor:pointer;vertical-align:middle;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:900;font-size:.95rem;line-height:1;color:var(--mcf-k);background:#FFFFFF;
  box-shadow:0 0 0 2px var(--mcf-k),0 2px 0 2px var(--mcf-k);transition:transform .25s var(--mcf-res),background .2s;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;text-transform:none;letter-spacing:0}
.mcf-i:hover{transform:scale(1.12) rotate(-8deg)}
.mcf-i.on{background:#FFCE00;transform:scale(1.1)}
.mcf-i:focus-visible{outline:3px solid #FFCE00;outline-offset:2px}
.mcf-pop{position:fixed;z-index:1200;padding:14px 16px 12px;border-radius:16px;color:var(--mcf-k);text-align:left;
  background:linear-gradient(180deg,#FFFDF6,var(--mcf-cr));box-shadow:0 0 0 2.5px var(--mcf-k),0 6px 0 2.5px var(--mcf-k),0 20px 40px rgba(0,0,0,.35);
  animation:mcfPop .32s var(--mcf-res) both;font-family:var(--body)}
.mcf-pop::before{content:"";position:absolute;left:calc(var(--fx) - 8px);width:16px;height:16px;background:#FFFDF6;transform:rotate(45deg);
  box-shadow:-2.5px -2.5px 0 0 var(--mcf-k)}
.mcf-pop.bas::before{top:-8px}
.mcf-pop.haut::before{bottom:-8px;box-shadow:2.5px 2.5px 0 0 var(--mcf-k);background:var(--mcf-cr)}
.mcf-pop.sort{animation:mcfPopSort .18s ease-in forwards}
.mcf-pop-t{display:block;margin-bottom:6px;font-family:var(--display);font-weight:900;font-size:1rem}
.mcf-pop p{position:relative;margin:0 0 6px;font-size:.88rem;line-height:1.45;color:#2A2F38}
.mcf-pop p:last-child{margin-bottom:0}
@keyframes mcfPop{from{opacity:0;transform:translateY(-8px) scale(.9)}}
@keyframes mcfPopSort{to{opacity:0;transform:scale(.94)}}

/* — les titres : une plaque émaillée, centrée, avec son « i » — */
.mcf-titre{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin:26px auto 14px;text-align:center;
  font-family:var(--display);font-weight:900;font-size:1.15rem;color:#fff}
.mcf-titre--plaque>span:first-child{display:inline-block;padding:7px 20px 8px;border-radius:10px;background:var(--mcf-bleu);color:#fff;font-size:1.05rem;
  box-shadow:inset 0 0 0 2px var(--mcf-bleu),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k);animation:mcfPlaque .5s var(--mcf-res) both}
@keyframes mcfPlaque{from{opacity:0;transform:translateY(-10px) rotate(-2deg)}}
.mcf-titre--petit{margin:18px auto 10px;font-size:1rem;color:inherit}
.mcf-titre--ext{justify-content:center;margin:6px 0 8px;font-size:1.15rem;color:var(--mcf-k)}
.mcf-quai{display:flex;justify-content:center;margin:26px auto 16px}
.mcf-quai>span{position:relative;padding:10px 34px 12px;border-radius:12px;background:var(--mcf-bleu);color:#fff;font-family:var(--display);font-weight:900;
  font-size:clamp(1.25rem,3.6vw,1.6rem);letter-spacing:.01em;box-shadow:inset 0 0 0 3px var(--mcf-bleu),inset 0 0 0 5px #fff,0 0 0 3px var(--mcf-k),0 6px 0 3px var(--mcf-k);
  animation:mcfPlaque .55s var(--mcf-res) both}
.mcf-quai>span::before,.mcf-quai>span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--mcf-k)}
.mcf-quai>span::before{left:12px}.mcf-quai>span::after{right:12px}
.mcf-vide,.mcf-aide{margin:8px auto 14px;text-align:center;font-family:var(--display);font-weight:700;font-size:.92rem;color:rgba(255,255,255,.72)}
.mcx .mcf-vide,.mcx .mcf-aide{color:rgba(255,255,255,.72)}
.mc-modal .mcf-vide,.mc-modal .mcf-aide{color:#5B6370}

/* — les grilles, toujours centrées — */
.mcf-grille{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:0 auto}
.mcf-grille>*{flex:0 1 auto}
.mcf-grille--cases>*{flex:1 1 200px;max-width:280px}
.mcf-grille--ext>*{flex:1 1 300px;max-width:440px}
.mcf-grille--cartes>*{flex:0 0 172px}
.mcf-grille--or>*{flex:1 1 180px;max-width:240px}
.mcf-grille--stations>*{flex:1 1 200px;max-width:260px}
.mcf-grille--bis>*{flex:1 1 260px;max-width:360px}
.mcf-grille--circ>*{flex:1 1 280px;max-width:460px}
.mcf-grille--bareme>*{flex:1 1 140px;max-width:190px}
.mcf-grille--niveaux>*{flex:1 1 150px;max-width:190px}
.mcf-grille--regles>*{flex:0 0 170px}
.mcf-grille--stats>*{flex:1 1 140px;max-width:200px}
.mcf-grille--portions>*{flex:1 1 260px;max-width:380px}
.mc-pane .mcb-grille,.mc-pane .mcf-grille-boutique{display:flex!important;flex-wrap:wrap;justify-content:center}
.mc-pane .mcb-grille>*{flex:1 1 220px;max-width:300px}
.mc-pane .mcb-onglets{justify-content:center}
@media (max-width:560px){
  .mcf-grille{gap:10px}
  .mcf-grille--cases>*{flex:1 1 140px}
  .mcf-grille--cartes>*{flex:0 0 calc(50% - 6px);max-width:180px}
  .mcf-grille--regles>*{flex:0 0 calc(50% - 6px)}
  .mcf-grille--niveaux>*,.mcf-grille--stats>*,.mcf-grille--bareme>*{flex:1 1 calc(50% - 6px)}
  .mc-pane .mcb-grille>*{flex:1 1 calc(50% - 6px)}
}

/* — les cases d'information, centrées : image, étiquette, chiffre — */
.mcf-stat{align-items:center!important;text-align:center!important;min-height:0!important;padding-top:12px!important}
.mcf-stat .mc-info-art{position:relative!important;right:auto!important;top:auto!important;width:84px!important;height:64px!important;margin:0 auto -2px;z-index:0!important}
.mcf-stat .mc-info-lab{align-self:center!important;max-width:100%!important;justify-content:center}
.mcf-stat .mc-info-val{margin-top:4px!important;text-align:center}
.mcf-stat .price,.mcf-stat .mc-info-plus{align-self:center;font-family:var(--display)!important;font-weight:800}
.mc-pane .mc-info-plus{font-family:var(--display)!important;font-weight:800}

/* — les boutons — */
.mcf-boutons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px auto 2px}
.mcf-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:.55em 1.3em;border:0;border-radius:14px;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1.1;color:var(--mcf-k);background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));
  box-shadow:0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k);transition:transform .2s var(--mcf-res),box-shadow .1s}
.mcf-btn svg{width:20px;height:20px;flex:none}
.mcf-btn:hover:not(:disabled){transform:translateY(-2px)}
.mcf-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 2.5px var(--mcf-k),0 1px 0 2.5px var(--mcf-k)}
.mcf-btn:disabled{opacity:.55;cursor:not-allowed}
.mcf-btn--or{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mcf-btn--rouge{background:linear-gradient(180deg,#FF8A80,#E3051C);color:#fff}
.mcf-btn--bleu{background:linear-gradient(180deg,#7CC4FF,#3E8FD4)}
.mcf-btn--doux{background:linear-gradient(180deg,#FFFFFF,#EEF0F3)}
.mcf-btn--petit{min-height:36px;padding:.4em .95em;font-size:.85rem;border-radius:12px}
.mcf-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.78rem;
  color:var(--mcf-k);background:#fff;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-tag[style*="--c"]{background:var(--c)}

/* — la revente — */
.mcf-vente{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.mcf-vente-carte{width:160px;animation:mcfCarteSurgit .6s var(--mcf-res) both}
.mcf-vente-intro{margin:0;font-family:var(--display);font-weight:700;font-size:.95rem;color:#3B4048}
.mcf-vente-gain{display:flex;flex-direction:column;align-items:center;padding:10px 22px;border-radius:18px;background:#FFF4C2;box-shadow:0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k)}
.mcf-vente-gain small{font-family:var(--display);font-weight:700;font-size:.8rem;color:#5B6370}
.mcf-vente-gain b{font-family:var(--display);font-weight:900;font-size:1.7rem}
.mcf-vente-gain .mcf-i{position:absolute;margin:0;transform:translate(70px,-8px)}
.mcf-vente-gain{position:relative}
.mcf-vente-lignes{display:grid;gap:6px;width:min(340px,100%)}
.mcf-vente-lignes>div{display:flex;justify-content:space-between;gap:10px;padding:6px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 2px var(--mcf-k);font-family:var(--display);font-weight:700}
@keyframes mcfCarteSurgit{from{opacity:0;transform:translateY(20px) rotate(-6deg) scale(.85)}}

/* — « D'où viennent vos recettes » — */
.mcf-rx{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.mcf-rx-tete{display:flex;align-items:center;gap:14px;padding:12px 20px;border-radius:20px;background:#FFF4C2;box-shadow:0 0 0 2.5px var(--mcf-k),0 5px 0 2.5px var(--mcf-k);animation:mcfCarteSurgit .55s var(--mcf-res) both}
.mcf-rx-ticket{width:62px;flex:none;animation:mcfBalance 3s ease-in-out infinite}
.mcf-rx-ticket svg{display:block;width:100%;height:auto}
.mcf-rx-tete small{display:block;font-family:var(--display);font-weight:700;font-size:.82rem;color:#5B6370}
.mcf-rx-tete b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,5vw,2rem);font-variant-numeric:tabular-nums}
.mcf-rx-sec{font-family:var(--display);font-weight:700;font-size:.8rem;color:#00814F}
.mcf-rx-src{display:grid;gap:12px;width:min(460px,100%)}
.mcf-rx-l{display:flex;flex-direction:column;gap:4px;text-align:left;animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(.2s + var(--i)*.1s)}
.mcf-rx-n{display:flex;justify-content:space-between;font-family:var(--display);font-weight:900;font-size:1rem}
.mcf-rx-b{height:14px;border-radius:8px;background:#fff;box-shadow:0 0 0 2px var(--mcf-k);overflow:hidden}
.mcf-rx-b i{display:block;height:100%;width:0;border-radius:8px;background:var(--c);transition:width 1s var(--mcf-doux)}
.mcf-rx-l small{font-family:var(--display);font-weight:600;font-size:.78rem;color:#5B6370}
.mcf-rx-malus,.mcf-rx-bonus{padding:6px 14px;border-radius:999px;font-family:var(--display);font-weight:800;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-rx-malus{background:#FFD0CA}.mcf-rx-bonus{background:#B8F0C9}
.mcf-rx-pied,.mcf-abs-pied{display:flex;align-items:center;justify-content:center;gap:2px;font-family:var(--display);font-weight:800;font-size:.9rem;color:#3B4048}
@keyframes mcfEntre{from{opacity:0;transform:translateY(14px)}}
@keyframes mcfBalance{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-3px)}}

/* — pendant votre absence — */
.mcf-absence{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mcf-abs-scene{width:100%;max-width:440px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 2.5px var(--mcf-k),0 5px 0 2.5px var(--mcf-k)}
.mcf-abs-scene svg{display:block;width:100%;height:auto}
.mcf-abs-rame{animation:mcfRameAbs 6s linear infinite}
@keyframes mcfRameAbs{from{transform:translateX(-120px)}to{transform:translateX(440px)}}
.mcf-fen{animation:mcfFenetre 3.6s steps(2) infinite;animation-delay:var(--d)}
@keyframes mcfFenetre{50%{opacity:.25}}
.mcf-abs-lune{animation:mcfBalance 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.mcf-abs-t{margin:4px 0 0;font-family:var(--display);font-weight:800;font-size:1.02rem;color:#3B4048}
.mcf-abs-val{font-family:var(--display);font-weight:900;font-size:clamp(2rem,8vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums;color:#00814F;
  text-shadow:0 3px 0 rgba(0,0,0,.12);animation:mcfSaute .7s var(--mcf-res) .3s both}
@keyframes mcfSaute{from{opacity:0;transform:scale(.5)}}

/* — le journal du réseau — */
.mcf-journal{display:flex;flex-direction:column;gap:6px;width:min(560px,100%);margin:0 auto}
.mcf-j{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;text-align:left;background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));color:var(--mcf-k);
  box-shadow:0 0 0 2px var(--mcf-k),0 3px 0 2px var(--mcf-k);animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*50ms)}
.mcf-j-ico{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--mcf-k);font-size:1rem}
.mcf-j-m{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:.9rem;line-height:1.25}
.mcf-j small{flex:none;font-family:var(--display);font-weight:700;font-size:.74rem;color:#6B7380}

/* — les extensions — */
.mc-ext-corps{text-align:center}
.mc-ext-corps .mc-ext-mode{margin-left:auto;margin-right:auto}
.mc-ext-corps .btn{margin-left:auto;margin-right:auto;display:flex}

/* — les quêtes — */
.mcf-quetes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.mcf-q{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;flex:1 1 240px;max-width:320px;padding:14px 14px 16px;border-radius:22px;text-align:center;
  color:var(--mcf-k);background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));box-shadow:inset 0 9px 0 var(--c),inset 0 12px 0 var(--mcf-k),0 0 0 3px var(--mcf-k),0 6px 0 3px var(--mcf-k);
  animation:mcfEntre .5s var(--mcf-res) backwards;animation-delay:calc(.1s + var(--i)*.1s)}
.mcf-q-etat{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:3px 12px 3px 6px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.8rem;background:#fff;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-q-etat svg{width:18px;height:18px}
.mcf-q--fait .mcf-q-etat{background:#FFE07A}.mcf-q--clos .mcf-q-etat{background:#B8F0C9}
.mcf-q-emb{width:84px;height:84px;animation:mcfBalance 4s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
.mcf-q-emb svg{display:block;width:100%;height:100%}
.mcf-q-titre{font-family:var(--display);font-weight:900;font-size:1.15rem}
.mcf-q-dit{margin:0;font-size:.9rem;line-height:1.35;color:#3B4048}
.mcf-q-act{margin-top:6px}
.mcf-q--fait .mcf-btn{animation:mcfAppel 1.4s ease-in-out infinite}
@keyframes mcfAppel{50%{transform:translateY(-3px) scale(1.05)}}
.mcf-q-obt{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.85rem;background:var(--r);box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-q-obt svg{width:22px;height:22px}
.mcf-paliers{display:flex;flex-direction:column;gap:8px;width:min(560px,100%);margin:0 auto}
.mcf-palier{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"r b p" "r l p";align-items:center;gap:0 12px;padding:8px 14px 8px 8px;border-radius:16px;
  color:var(--mcf-k);text-align:left;background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));box-shadow:inset 6px 0 0 var(--r),0 0 0 2.5px var(--mcf-k),0 3px 0 2.5px var(--mcf-k);
  animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*70ms)}
.mcf-palier-rame{grid-area:r;width:64px}
.mcf-palier-rame svg{display:block;width:100%;height:auto}
.mcf-palier b{grid-area:b;font-family:var(--display);font-weight:900;font-size:1rem}
.mcf-palier-lot{grid-area:l;font-family:var(--display);font-weight:600;font-size:.8rem;color:#5B6370}
.mcf-palier-p{grid-area:p;padding:4px 10px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.9rem;background:var(--r);box-shadow:0 0 0 2px var(--mcf-k)}

/* — LES CARTES : l'image de la station, comme dans Métro Poker — */
.mcf-carte{position:relative;display:block;width:100%;aspect-ratio:100/140;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:default;color:var(--mcf-k);
  background:var(--mcf-cr);box-shadow:inset 0 0 0 5px var(--rc),inset 0 0 0 7px var(--mcf-k),0 0 0 2.5px var(--mcf-k),0 5px 0 2.5px var(--mcf-k);font-family:var(--display);
  container-type:inline-size;isolation:isolate}
button.mcf-carte{cursor:pointer}
.mcf-carte-img{position:absolute;left:7px;right:7px;top:7px;height:62%;overflow:hidden;background:#DDE6EE;border-bottom:2.5px solid var(--mcf-k)}
.mcf-carte-img svg{display:block;width:100%;height:100%}
.mcf-carte-rar{position:absolute;left:12px;top:12px;z-index:2;padding:2px 8px;border-radius:7px;font-weight:900;font-size:7cqw;color:var(--mcf-k);background:var(--rc);box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-carte-l{position:absolute;right:11px;top:11px;z-index:2;display:flex;flex-direction:column;gap:4px}
.mcf-carte-l .pxj-rond.petit{width:16cqw;height:16cqw;font-size:7.5cqw;box-shadow:0 0 0 2px var(--mcf-k),0 2px 0 2px var(--mcf-k)}
.mcf-carte-plaque{position:absolute;left:9%;right:9%;top:calc(62% - 10cqw);z-index:2;display:grid;place-items:center;min-height:20cqw;padding:2cqw 3cqw;border-radius:2.6cqw;
  background:var(--mcf-bleu);color:#fff;text-align:center;box-shadow:inset 0 0 0 1cqw var(--mcf-bleu),inset 0 0 0 1.9cqw #fff,0 0 0 2px var(--mcf-k),0 1.6cqw 0 2px var(--mcf-k)}
.mcf-carte-plaque b{font-weight:800;font-size:8.6cqw;line-height:1.05;overflow-wrap:anywhere}
.mcf-carte-plaque.long b{font-size:7.2cqw}.mcf-carte-plaque.tres-long b{font-size:6cqw}
.mcf-carte-pied{position:absolute;left:10px;right:10px;bottom:9px;display:flex;justify-content:space-between;gap:4px;font-weight:800;font-size:7.6cqw}
.mcf-carte-dup,.mcf-carte-badge{position:absolute;z-index:3;padding:2px 8px;border-radius:999px;font-weight:900;font-size:7.4cqw;background:#FFCE00;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-carte-dup{right:8px;bottom:26%}
.mcf-carte-badge{left:50%;bottom:-2px;transform:translateX(-50%);background:#fff}
.mcf-carte.r1{--rc:#4FA3F0}.mcf-carte.r2{--rc:#C98BEE}.mcf-carte.r3{--rc:#FFD23E}
.mcf-carte-reflet{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);
  background-size:300% 100%;animation:mcfReflet 3.2s ease-in-out infinite}
.mcf-carte.r3{animation:mcfLeg 2.4s ease-in-out infinite}
@keyframes mcfReflet{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
@keyframes mcfLeg{50%{box-shadow:inset 0 0 0 5px var(--rc),inset 0 0 0 7px var(--mcf-k),0 0 0 2.5px var(--mcf-k),0 5px 0 2.5px var(--mcf-k),0 0 22px 4px rgba(255,210,62,.55)}}
.face .mcf-carte{height:100%;width:100%}
.mcf-case-carte{display:flex;flex-direction:column;align-items:center;gap:8px;animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(var(--i)*40ms)}
.mcf-case-carte>.mcf-carte{transition:transform .3s var(--mcf-res)}
.mcf-case-carte:hover>.mcf-carte{transform:translateY(-6px) rotate(-2deg)}
.mcf-via{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;font-family:var(--display);font-weight:700;font-size:.78rem;color:rgba(255,255,255,.8)}
.mcf-via,.mcf-besoin,.mcx .mcf-via,.mcx .mcf-besoin{color:#E8E4DA!important}
.mcf-ligne-btn{display:flex;align-items:center;justify-content:center;gap:2px}
.mcf-ligne-btn .mcf-btn{font-size:.82rem;min-height:38px;padding:.4em .9em}
.mcf-besoin{font-family:var(--display);font-weight:700;font-size:.78rem;color:rgba(255,255,255,.8);text-align:center}
.mcf-portion{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border-radius:20px;color:var(--mcf-k);background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));
  box-shadow:inset 0 8px 0 var(--c),inset 0 11px 0 var(--mcf-k),0 0 0 3px var(--mcf-k),0 6px 0 3px var(--mcf-k)}
.mcf-portion-t{display:flex;align-items:center;gap:10px;margin-top:8px;font-family:var(--display);font-weight:900;font-size:1.05rem}
.mcf-portion-suite{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mcf-portion-suite span{padding:3px 10px;border-radius:8px;font-family:var(--display);font-weight:800;font-size:.8rem;background:var(--mcf-bleu);color:#fff;box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2px var(--mcf-k)}

/* — TRAINS — */
.mcf-tr-grid{justify-content:center}
.mcf-tr-tile{text-align:center!important}
.mcf-tr-tete{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 4px;font-family:var(--display);font-weight:900;font-size:.95rem}
.mcf-tr-pied{display:flex;justify-content:center;gap:12px;margin-top:6px;font-family:var(--display);font-weight:800;font-size:.85rem}
.mcf-reste{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 auto 6px}
.mcf-courbe{display:flex;justify-content:center;margin:0 auto}
.mcf-courbe svg{width:min(420px,100%);height:auto}
.mcf-profil{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 6px}
.mcf-profil-c{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;border-radius:14px;text-align:center;color:var(--mcf-k);
  background:linear-gradient(180deg,#FFFFFF,var(--mcf-cr));box-shadow:0 0 0 2px var(--mcf-k),0 3px 0 2px var(--mcf-k);animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*60ms)}
.mcf-profil-ico{font-size:1.25rem}
.mcf-profil-c b{font-family:var(--display);font-weight:900;font-size:.85rem}
.mcf-etoiles{display:flex;gap:2px}
.mcf-etoiles i{width:13px;height:13px;background:#D5D9DF;clip-path:polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 78%,20% 100%,30% 60%,0 38%,38% 35%);
  transition:transform .3s var(--mcf-res)}
.mcf-etoiles i.on{background:#FFC21A;animation:mcfEtoile .5s var(--mcf-res) backwards;animation-delay:calc(.3s + var(--i)*80ms)}
.mcf-profil-c.sat .mcf-etoiles i.on{background:#FF6A4E}
@keyframes mcfEtoile{from{transform:scale(0) rotate(-90deg)}}
.mcf-puces{margin-top:10px;text-align:center}
.mcf-puces-t{display:inline-flex;align-items:center;gap:6px;margin-bottom:7px;font-family:var(--display);font-weight:900;font-size:.95rem}
.mcf-puces>div{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mcf-puces>div>span{padding:5px 12px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.82rem;color:var(--mcf-k);box-shadow:0 0 0 2px var(--mcf-k),0 2px 0 2px var(--mcf-k);
  animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*60ms)}
.mcf-puces--ok>div>span{background:#B8F0C9}.mcf-puces--pb>div>span{background:#FFD0CA}.mcf-puces--prio>div>span{background:#FFE88A}
.mc-lx-prod .mcf-i{margin-left:8px}
.mc-lx-ups-tete{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.mc-lx-ups-tete>span:last-child{margin-left:auto}
.mcf-ecran{display:flex!important;align-items:center;gap:8px;padding:6px 12px 6px 6px!important;border-radius:12px!important;background:#0B0E13!important;
  box-shadow:0 0 0 2px #39424F,0 4px 0 2px rgba(0,0,0,.5)!important}
.mcf-ecran-l{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;font-style:normal;font-family:var(--display);font-weight:900;font-size:.85rem;box-shadow:0 0 0 2px #fff}
.mcf-ecran b{display:block;font-family:var(--display)!important;font-weight:900;font-size:.85rem!important;color:#FFC94A!important;letter-spacing:.02em}
.mcf-ecran span{display:block;font-family:var(--display);font-weight:700;font-size:.7rem!important;color:#9ED0EA!important}
.mcf-ecran b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:#FFC94A;vertical-align:middle;animation:mcfFenetre 1s steps(2) infinite}

/* — MES LIGNES — */
.mcf-bis{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 14px;border-radius:22px;text-align:center;color:var(--mcf-k);
  background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));box-shadow:inset 0 10px 0 var(--c),inset 0 13px 0 var(--mcf-k),0 0 0 3px var(--mcf-k),0 6px 0 3px var(--mcf-k);
  animation:mcfEntre .5s var(--mcf-res) backwards;animation-delay:calc(var(--i)*.1s)}
.mcf-bis.ferme{filter:saturate(.5)}
.mcf-bis.trace{box-shadow:inset 0 10px 0 var(--c),inset 0 13px 0 var(--mcf-k),0 0 0 3px var(--mcf-k),0 0 0 8px #FFCE00,0 10px 0 8px var(--mcf-k)}
.mcf-bis-tete{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;max-width:100%}
.mcf-bis-num{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;font-family:var(--display);font-weight:900;font-size:1.1rem;color:#fff;
  background:var(--c,var(--rc));box-shadow:0 0 0 2.5px var(--mcf-k),0 3px 0 2.5px var(--mcf-k)}
.mcf-bareme .mcf-bis-num{background:var(--rc);color:var(--mcf-k)}
.mcf-bis-nom{font-family:var(--display);font-weight:900;font-size:1.2rem;line-height:1.1;overflow-wrap:anywhere}
.mcf-crayon{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;cursor:pointer;background:#fff;font-size:1rem;
  box-shadow:0 0 0 2px var(--mcf-k),0 3px 0 2px var(--mcf-k);transition:transform .2s var(--mcf-res)}
.mcf-crayon:hover{transform:rotate(-12deg) scale(1.08)}
.mcf-bis-rar{padding:2px 10px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.76rem;background:var(--rc);box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-bis-verrou{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:var(--display);font-weight:700;color:#5B6370}
.mcf-bis-verrou span{font-size:1.6rem}
.mcf-pal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mcf-pal-c{width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;background:var(--c);box-shadow:0 0 0 2px var(--mcf-k);transition:transform .2s var(--mcf-res)}
.mcf-pal-c.on{transform:scale(1.25);box-shadow:0 0 0 2px var(--mcf-k),0 0 0 5px #fff,0 0 0 7px var(--mcf-k)}
.mcf-jauge{width:100%;height:12px;border-radius:8px;background:#fff;box-shadow:0 0 0 2px var(--mcf-k);overflow:hidden}
.mcf-jauge i{display:block;height:100%;background:var(--c);border-radius:8px;animation:mcfRemplit 1s var(--mcf-doux) both}
@keyframes mcfRemplit{from{width:0!important}}
.mcf-bis-chiffres{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;font-family:var(--display);font-weight:800;font-size:.9rem}
.mcf-bis-chiffres b{padding:3px 10px;border-radius:999px;background:#FFE88A;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-bis-suite{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-height:120px;overflow:auto}
.mcf-bis-suite span{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 3px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.74rem;background:#fff;box-shadow:0 0 0 1.5px var(--mcf-k)}
.mcf-bis-suite i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;font-style:normal;font-size:.62rem;font-weight:900;color:#fff;background:var(--c)}
.mcf-nom{display:flex;flex-direction:column;align-items:center;gap:8px}
.mcf-nom-champ{width:min(340px,100%);padding:12px 16px;border:0;border-radius:14px;text-align:center;font-family:var(--display);font-weight:900;font-size:1.2rem;color:var(--mcf-k);
  background:#fff;box-shadow:0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k)}
.mcf-circ.vide{max-width:560px;margin:0 auto}
.mcf-circ-pied{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px;text-align:center;font-family:var(--display)}
.mcf-circ-pied b{font-weight:900;font-size:1.05rem}
.mcf-circ-pied span{font-weight:700;font-size:.8rem;opacity:.75}
.mcf-circ-pied em{font-style:normal;font-weight:900;color:#00814F}
.mcf-bareme{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:18px;text-align:center;color:var(--mcf-k);
  background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));box-shadow:inset 0 7px 0 var(--rc),inset 0 9.5px 0 var(--mcf-k),0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k);
  animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(var(--i)*80ms)}
.mcf-bareme .mcf-bis-num{margin-top:6px}
.mcf-bareme b{font-family:var(--display);font-weight:900;font-size:.98rem}
.mcf-bareme small{font-family:var(--display);font-weight:700;font-size:.78rem;color:#5B6370}

/* — INCIDENTS — */
.mcf-incs{display:flex;flex-direction:column;align-items:center;gap:16px;margin:0 auto}
.mcf-inc{width:min(680px,100%);text-align:center;animation:mcfEntre .5s var(--mcf-res) backwards;animation-delay:calc(var(--i)*.1s)}
.mcf-inc-tete{display:flex;flex-direction:column;align-items:center;gap:2px;margin:10px 0 4px}
.mcf-inc-tete>b{font-family:var(--display);font-weight:900;font-size:1.2rem;display:inline-flex;align-items:center}
.mcf-inc-tete>small{font-family:var(--display);font-weight:700;font-size:.85rem;opacity:.8}
.mcf-inc-tete .mcf-i{margin-top:4px}
.mcf-inc-grav{padding:3px 12px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.8rem;color:#fff;background:var(--g);box-shadow:0 0 0 2px var(--mcf-k);
  animation:mcfAppel 1.6s ease-in-out infinite}
.mcf-inc-etat{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.88rem;background:#fff;color:var(--mcf-k);box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-inc-etat.grave{background:#FFD0CA;animation:mcfAppel 1.2s ease-in-out infinite}
.mcf-inc-calme{max-width:680px;margin:0 auto}
.mcf-niv{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px 12px;border-radius:18px;text-align:center;color:var(--mcf-k);
  background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));box-shadow:inset 0 7px 0 var(--g),inset 0 9.5px 0 var(--mcf-k),0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k);
  animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(var(--i)*80ms)}
.mcf-niv-n{display:grid;place-items:center;width:34px;height:34px;margin-top:6px;border-radius:50%;font-family:var(--display);font-weight:900;color:#fff;background:var(--g);box-shadow:0 0 0 2.5px var(--mcf-k)}
.mcf-niv b{font-family:var(--display);font-weight:900;font-size:1.05rem}
.mcf-niv-p{font-family:var(--display);font-weight:700;font-size:.78rem;color:#5B6370}
.mcf-niv-m{padding:2px 10px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.9rem;background:#FFD0CA;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-niv small{font-family:var(--display);font-weight:800;font-size:.78rem}
.mcf-niv.action small{color:#C8102E}

/* — MONUMENTS — */
.mcf-or{display:flex!important;flex-direction:column;align-items:center;gap:6px;text-align:center!important;animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(var(--i)*70ms)}
.mcf-or-nom{font-family:var(--display);font-weight:900;font-size:1rem}
.mcf-or-pax{padding:2px 10px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.82rem;background:#FFE88A;color:var(--mcf-k);box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-st{display:flex!important;flex-direction:column;align-items:center;gap:6px;text-align:center!important;animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*40ms)}
.mcf-st-l{display:flex;justify-content:center;gap:4px}
.mcf-st-nom{font-family:var(--display);font-weight:900;font-size:1rem;line-height:1.15}
.mcf-st-mons{display:flex;justify-content:center;align-items:flex-end;gap:4px;min-height:44px}
.mcf-st-libre{display:block;width:26px;height:26px;border-radius:8px;border:2px dashed rgba(127,137,150,.6)}
.mcf-st-chiffres{display:flex;justify-content:center;gap:10px;font-family:var(--display);font-weight:800;font-size:.8rem}
.mcf-st-up{align-self:center}
.mcorx-chips,.mcorx-actions{justify-content:center!important}
.mcorx{text-align:center}
.mcf-fiche{display:flex;flex-direction:column;align-items:center;text-align:center}
.mcf-fiche-l{display:flex;gap:4px}
.mcf-fiche-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:12px}
.mcf-fiche-inc{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:8px 10px 8px 14px;border-radius:14px;font-family:var(--display);background:#FFE4E0;box-shadow:inset 6px 0 0 var(--g),0 0 0 2px var(--mcf-k)}
.mcf-fiche-hero{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:10px 22px;padding:14px 22px;border-radius:20px;background:#FFF4C2;
  box-shadow:0 0 0 2.5px var(--mcf-k),0 5px 0 2.5px var(--mcf-k);animation:mcfCarteSurgit .5s var(--mcf-res) both}
.mcf-fiche-hero>div{display:flex;flex-direction:column;align-items:center}
.mcf-fiche-hero small{font-family:var(--display);font-weight:700;font-size:.78rem;color:#5B6370}
.mcf-fiche-hero b{font-family:var(--display);font-weight:900;font-size:1.25rem;font-variant-numeric:tabular-nums}
.mcf-fiche-hero .gros b{font-size:1.7rem;color:#00814F}
.mcf-fiche-hero>.mcf-i{position:absolute;right:-6px;top:-6px;margin:0}
.mcf-up{position:relative;display:flex;justify-content:center;gap:12px}
.mcf-up>div{display:flex;flex-direction:column;align-items:center;padding:8px 14px;border-radius:14px;background:#fff;box-shadow:0 0 0 2px var(--mcf-k)}
.mcf-up small{font-family:var(--display);font-weight:700;font-size:.74rem;color:#5B6370}
.mcf-up b{font-family:var(--display);font-weight:900;font-size:1.05rem}
.mcf-up b.ok{color:#00814F}.mcf-up b.ko{color:#C8102E}
.mcf-up>.mcf-i{align-self:center}
.mcf-mons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%}
.mcf-mon{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 1 190px;padding:12px 10px;border:0;border-radius:18px;text-align:center;color:var(--mcf-k);font:inherit;
  background:linear-gradient(180deg,#FFFFFF,var(--mcf-cr));box-shadow:0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k);animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*60ms)}
.mcf-mon--neuf{cursor:pointer;opacity:.92;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.03) 0 8px,transparent 8px 16px),linear-gradient(180deg,#FFFFFF,var(--mcf-cr))}
.mcf-mon--neuf:hover:not(:disabled){transform:translateY(-4px)}
.mcf-mon b{font-family:var(--display);font-weight:900;font-size:.95rem}
.mcf-mon-vis{display:block;width:64px;height:64px}
.mcf-mon-vis svg{width:100%;height:100%}
.mcf-mon-l{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:.85rem}
.mcf-fiche-vente{margin-top:20px}
.mcf-fiche .mcf-titre{color:var(--mcf-k)}

/* — RENAISSANCE : un monument par sorte — */
.mcf-mon-groupe{position:relative;display:inline-block}
.mcf-mon-x{position:absolute;right:-6px;bottom:-4px;padding:1px 6px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.72rem;background:#FFCE00;color:var(--mcf-k);box-shadow:0 0 0 1.5px var(--mcf-k)}
.mc-reb-mons{justify-content:center}

/* — RÈGLES : des cartes à retourner — */
.mcf-regle{position:relative;height:190px;padding:0;border:0;background:none;cursor:pointer;perspective:900px;animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(var(--i)*50ms)}
.mcf-regle-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--mcf-res)}
.mcf-regle.retourne .mcf-regle-in{transform:rotateY(180deg)}
.mcf-regle-f{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:20px;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;color:var(--mcf-k);box-shadow:0 0 0 3px var(--mcf-k),0 6px 0 3px var(--mcf-k);text-align:center}
.mcf-regle-recto{background:linear-gradient(160deg,var(--a),var(--b))}
.mcf-regle-recto b{font-family:var(--display);font-weight:900;font-size:1.05rem;color:#fff;text-shadow:0 2px 0 var(--mcf-k),1.5px 0 0 var(--mcf-k),-1.5px 0 0 var(--mcf-k),0 -1.5px 0 var(--mcf-k)}
.mcf-regle-recto small{padding:2px 10px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.72rem;background:#fff;box-shadow:0 0 0 1.5px var(--mcf-k)}
.mcf-regle-art{width:88px;height:68px;transition:transform .3s var(--mcf-res)}
.mcf-regle-art svg{display:block;width:100%;height:100%;overflow:visible}
.mcf-regle:hover .mcf-regle-art{transform:rotate(-6deg) scale(1.08)}
.mcf-regle-verso{transform:rotateY(180deg);background:linear-gradient(180deg,#FFFDF6,var(--mcf-cr));justify-content:flex-start;overflow:auto}
.mcf-regle-verso b{font-family:var(--display);font-weight:900;font-size:.95rem}
.mcf-regle-verso span{font-size:.8rem;line-height:1.4;color:#2A2F38}
.mcf-stat2{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 10px 12px;border-radius:18px;text-align:center;color:var(--mcf-k);
  background:linear-gradient(180deg,var(--mcf-cr),var(--mcf-cr2));box-shadow:0 0 0 2.5px var(--mcf-k),0 4px 0 2.5px var(--mcf-k);animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(var(--i)*60ms)}
.mcf-stat2-ico{font-size:1.4rem}
.mcf-stat2 b{font-family:var(--display);font-weight:900;font-size:1.35rem;font-variant-numeric:tabular-nums}
.mcf-stat2.gros{flex-basis:100%!important;max-width:420px!important}
.mcf-stat2.gros b{font-size:1.9rem;color:#00814F}
.mcf-stat2 small{font-family:var(--display);font-weight:700;font-size:.78rem;color:#5B6370}
@media (max-width:560px){ .mcf-regle{height:170px} }

/* — VILLES — */
.mcf-statique .vl *{transition:none!important}
.vl-nav{justify-content:center!important}
.vl-hall-chips,.vl-playlists,.vl-achats,.vl-vitrine,.vl-jeux{justify-content:center!important}
.vl-titre{text-align:center}
.vl-ach{text-align:center}
.mcf-danseur{animation:mcfDanse var(--beat,.6s) ease-in-out infinite;animation-delay:calc(var(--i)*-.13s);transform-box:fill-box;transform-origin:50% 100%}
.mcf-bras{transform-box:fill-box}
.mcf-bras--g{transform-origin:100% 100%;animation:mcfBrasG var(--beat,.6s) ease-in-out infinite;animation-delay:calc(var(--i)*-.21s)}
.mcf-bras--d{transform-origin:0 100%;animation:mcfBrasD var(--beat,.6s) ease-in-out infinite;animation-delay:calc(var(--i)*-.17s)}
.mcf-tete{transform-box:fill-box;transform-origin:50% 100%;animation:mcfTete calc(var(--beat,.6s)*2) ease-in-out infinite;animation-delay:calc(var(--i)*-.3s)}
.mcf-jambe{transform-box:fill-box;transform-origin:50% 0}
.mcf-jambe--g{animation:mcfJambe var(--beat,.6s) ease-in-out infinite}
.mcf-jambe--d{animation:mcfJambe var(--beat,.6s) ease-in-out infinite reverse}
.mcf-baton{animation:mcfBaton calc(var(--beat,.6s)*.5) ease-in-out infinite alternate}
@keyframes mcfDanse{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes mcfBrasG{0%,100%{transform:rotate(0)}50%{transform:rotate(-38deg)}}
@keyframes mcfBrasD{0%,100%{transform:rotate(0)}50%{transform:rotate(34deg)}}
@keyframes mcfTete{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes mcfJambe{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg)}}
@keyframes mcfBaton{to{opacity:.5}}
.mcf-grattoir .vl-ticket-tete{display:flex;align-items:center;gap:6px}
.mcf-decision{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.mcf-decision-q{font-family:var(--display);font-weight:900;font-size:1.1rem;animation:mcfSaute .5s var(--mcf-res) both}
.mcf-verdict{font-family:var(--display)!important;font-weight:900!important;font-size:1.1rem!important;padding:8px 18px;border-radius:14px;box-shadow:0 0 0 2.5px var(--mcf-k);animation:mcfSaute .5s var(--mcf-res) both}
.mcf-verdict.gagne{background:#B8F0C9}.mcf-verdict.perd{background:#FFD0CA}.mcf-verdict.rate{background:#FFE88A}.mcf-verdict.neutre{background:#fff}
.vl-vt-art .mcf-i{position:relative;z-index:3}
.pl-note,.vl-casino-note{display:none!important}

/* — LES SCÈNES QUI BOUGENT — */
.mcf-passant{animation:mcfMarche var(--dur) linear infinite;animation-delay:var(--d)}
.mcf-passant.gauche{animation-direction:reverse}
@keyframes mcfMarche{from{translate:var(--x0) 0}to{translate:var(--x1) 0}}
.mcf-pas-j{transform-box:fill-box;transform-origin:50% 0;animation:mcfPas .5s ease-in-out infinite alternate}
.mcf-pas-b{transform-box:fill-box;transform-origin:0 0;animation:mcfPas .5s ease-in-out infinite alternate-reverse}
@keyframes mcfPas{from{transform:skewX(-12deg)}to{transform:skewX(12deg)}}
.mcf-pigeon-c{animation:mcfPigeon 4s ease-in-out infinite}
.mcf-pigeon-t{transform-box:fill-box;transform-origin:0 100%;animation:mcfPicore 1.2s ease-in-out infinite}
@keyframes mcfPigeon{0%,100%{transform:translateX(0)}45%{transform:translateX(18px)}50%{transform:translateX(18px) scaleX(-1)}95%{transform:translateX(0) scaleX(-1)}}
@keyframes mcfPicore{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(35deg)}80%{transform:rotate(0)}90%{transform:rotate(30deg)}}
.mcf-defile{animation:mcfDefile 12s linear infinite}
@keyframes mcfDefile{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--w)*2))}}
.mcf-poussiere{animation:mcfPoussiere 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.37s)}
@keyframes mcfPoussiere{0%{opacity:0;transform:translate(0,0)}30%{opacity:.85}100%{opacity:0;transform:translate(14px,-40px)}}
.mcf-robot{animation:mcfRobot 9s ease-in-out infinite}
@keyframes mcfRobot{0%,100%{transform:translateX(0)}50%{transform:translateX(320px)}}
.mcf-etincelle{animation:mcfEtincelle .9s steps(2) infinite;animation-delay:calc(var(--i)*-.2s)}
@keyframes mcfEtincelle{50%{opacity:0}}
.mcf-paillette{animation:mcfPaillette 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*-.4s);transform-box:fill-box;transform-origin:center}
@keyframes mcfPaillette{0%,100%{opacity:.2;transform:scale(.5)}50%{opacity:1;transform:scale(1.4)}}
.mcf-alerte{animation:mcfAlerteBord 1.2s ease-in-out infinite}
@keyframes mcfAlerteBord{50%{opacity:.15}}
.mcf-scene--inc.g1 .mcf-alerte,.mcf-scene--inc.g2 .mcf-alerte{animation-duration:2.4s;opacity:.5}
.mcf-gyro{animation:mcfGyro .6s steps(2) infinite;animation-delay:calc(var(--i)*.3s)}
@keyframes mcfGyro{50%{opacity:.25}}
.mcf-etin{animation:mcfEtin 1.6s ease-out infinite;animation-delay:calc(var(--i)*-.27s)}
@keyframes mcfEtin{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(calc((var(--i) - 6)*4px),-36px)}}
.mcf-marteau{transform-box:fill-box;transform-origin:0 100%;animation:mcfMarteau .5s ease-in-out infinite alternate}
@keyframes mcfMarteau{to{transform:rotate(-40deg)}}
.mcf-scene--equip .mc-sc-metro{transform-box:fill-box;transform-origin:50% 60%;animation:mcfApproche 7s ease-in-out infinite}
@keyframes mcfApproche{0%,100%{transform:scale(.86) translateY(-6px)}40%,70%{transform:scale(1) translateY(0)}}
.mcf-scene--amelio .mcx-sc-rame{animation:mcfRameQuai 9s ease-in-out infinite}
@keyframes mcfRameQuai{0%{transform:translateX(-760px)}25%,62%{transform:translateX(0)}100%{transform:translateX(760px)}}
.mc-scene,.mc-inc-scene{text-align:center}

@media (prefers-reduced-motion:reduce){
  .mcf-pop,.mcf-titre--plaque>span,.mcf-quai>span,.mcf-j,.mcf-q,.mcf-palier,.mcf-case-carte,.mcf-carte-reflet,.mcf-carte.r3,.mcf-bis,.mcf-niv,.mcf-or,.mcf-st,.mcf-mon,.mcf-regle,.mcf-stat2,
  .mcf-danseur,.mcf-bras,.mcf-tete,.mcf-jambe,.mcf-passant,.mcf-pigeon-c,.mcf-pigeon-t,.mcf-defile,.mcf-poussiere,.mcf-robot,.mcf-abs-rame,.mcf-fen,.mcf-alerte,.mcf-gyro,.mcf-etin,
  .mcf-scene--equip .mc-sc-metro,.mcf-scene--amelio .mcx-sc-rame,.mcf-etoiles i.on,.mcf-q-emb,.mcf-rx-ticket{animation:none!important}
}
/* @@ fin metrocity_finitions.css @@ */
/* @@ debut metrocity_couleurs.css @@ */
/* ==========================================================================
   METRO CITY — DE LA COULEUR, ET DES SCÈNES QUI VIVENT
   ========================================================================== */
:root{--mcg-k:#0B0E13;--mcg-bleu:linear-gradient(160deg,#4C8EEC 0%,#2B62C4 48%,#153E8C 100%);
  --mcg-or:linear-gradient(170deg,#FFE680 0%,#FFC21A 60%,#E89A00 100%);
  --mcg-contour:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13}

/* — 1. LE « i » ET SA BULLE BLEUE — */
.mcf-i{background:linear-gradient(180deg,#FFE680,#FFC21A)!important;pointer-events:auto!important}
.mcf-i.on{background:linear-gradient(180deg,#7CC4FF,#2B62C4)!important;color:#fff}
.mcf-pop{color:#fff;background:var(--mcg-bleu);
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px rgba(255,255,255,.85),0 0 0 2.5px var(--mcg-k),0 6px 0 2.5px var(--mcg-k),0 20px 40px rgba(0,0,0,.35)}
.mcf-pop::before{background:#4C8EEC}
.mcf-pop.haut::before{background:#153E8C}
.mcf-pop-t{color:#FFCE00;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.mcf-pop p{color:#EAF2FF}
.mcg-h3{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.mcg-h3 .mcf-i{font-size:1rem;text-shadow:none}
.mcf-i{text-shadow:none!important;-webkit-text-stroke:0!important}
.mcf-bis-num{font-weight:800!important;text-shadow:0 1.5px 0 rgba(11,14,19,.35)}

/* — 2. TOUT CE QUI ÉTAIT BLANC OU CRÈME PREND DE LA COULEUR — */
/* boutons et étiquettes */
.mcf-btn{background:linear-gradient(180deg,#9AD4FF,#4C9BE6)}
.mcf-btn--doux{background:linear-gradient(180deg,#D8C6FF,#A98BEE)}
.mcf-btn--or{background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.mcf-btn--rouge{background:linear-gradient(180deg,#FF8A80,#E3051C)}
.mcf-btn--bleu{background:linear-gradient(180deg,#7CC4FF,#3E8FD4)}
.mcf-tag{background:linear-gradient(180deg,#FFE680,#FFC21A)}
.mcf-tag[style*="--c"]{background:var(--c)}
/* la revente */
.mcf-vente-gain,.mcf-rx-tete,.mcf-fiche-hero{background:var(--mcg-or)}
.mcf-vente-gain small,.mcf-rx-tete small,.mcf-fiche-hero small{color:#5A3A00}
.mcf-fiche-hero .gros b{color:#0B6B3F}
.mcf-vente-lignes>div{background:var(--mcg-bleu);color:#fff}
/* d'où viennent les recettes, le journal */
.mcf-rx-b,.mcf-jauge{background:#1D2B45}
.mcf-rx-l small{color:#3B4048}
.mcf-j{background:var(--mcg-bleu);color:#fff}
.mcf-j-ico{background:linear-gradient(180deg,#FFE680,#FFC21A)}
.mcf-j small{color:#CFE0FF}
/* les cartes de couleur : la teinte de ce qu'elles montrent */
.mcf-q,.mcf-bis,.mcf-portion{color:#fff;background-color:var(--c);
  background-image:linear-gradient(175deg,color-mix(in srgb,var(--c) 70%,#fff) 0%,var(--c) 34%,color-mix(in srgb,var(--c) 58%,#0B0E13) 100%)}
.mcf-palier{color:#fff;background-color:var(--r);
  background-image:linear-gradient(100deg,color-mix(in srgb,var(--r) 62%,#0B0E13) 0%,var(--r) 70%,color-mix(in srgb,var(--r) 72%,#fff) 100%)}
.mcf-bareme{color:#fff;background-color:var(--rc);
  background-image:linear-gradient(175deg,color-mix(in srgb,var(--rc) 70%,#fff) 0%,var(--rc) 34%,color-mix(in srgb,var(--rc) 55%,#0B0E13) 100%)}
.mcf-niv{color:#fff;background-color:var(--g);
  background-image:linear-gradient(175deg,color-mix(in srgb,var(--g) 70%,#fff) 0%,var(--g) 34%,color-mix(in srgb,var(--g) 55%,#0B0E13) 100%)}
:is(.mcf-q-titre,.mcf-bis-nom,.mcf-portion-t,.mcf-palier b,.mcf-bareme b,.mcf-niv b){color:#fff;font-weight:800!important;text-shadow:0 2px 0 rgba(11,14,19,.38)}
:is(.mcf-q-dit,.mcf-palier-lot,.mcf-bareme small,.mcf-niv-p,.mcf-niv small){display:inline-block;padding:4px 10px;border-radius:10px;color:#fff!important;background:rgba(11,14,19,.34)}
.mcf-q-dit{margin-top:2px}
.mcf-niv.action small{color:#FFE14D!important}
.mcf-niv-m{color:var(--mcg-k)!important;background:linear-gradient(180deg,#FFE680,#FFC21A)!important}
.mcf-palier-p{color:var(--mcg-k)}
.mcf-q-etat,.mcf-inc-etat,.mcf-crayon,.mcf-regle-recto small{background:linear-gradient(180deg,#FFE680,#FFC21A);color:var(--mcg-k)}
.mcf-q--fait .mcf-q-etat{background:linear-gradient(180deg,#FFB3E8,#FF4FD8)}
.mcf-q--clos .mcf-q-etat{background:linear-gradient(180deg,#B8F0C9,#3ED07A)}
.mcf-bis-suite span{color:#fff;background:rgba(11,14,19,.34);box-shadow:0 0 0 1.5px rgba(255,255,255,.4)}
.mcf-bis-verrou{color:#fff}
.mcf-bis-chiffres{color:#fff;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.mcf-bis-chiffres b{text-shadow:none;color:var(--mcg-k)}
.mcf-bis.ferme{filter:saturate(.75) brightness(.92)}
.mcf-nom-champ{background:linear-gradient(180deg,#FFF6C8,#FFE680)}
/* la palette des lignes : la pastille choisie garde sa taille */
.mcf-pal{gap:8px}
.mcf-pal-c.on{transform:none!important;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 4.5px var(--mcg-k),0 0 0 2.5px var(--mcg-k)!important;position:relative}
.mcf-pal-c.on::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:10px;margin:-7px 0 0 -3px;border:solid #fff;border-width:0 2.6px 2.6px 0;transform:rotate(45deg);filter:drop-shadow(0 0 1px #0B0E13)}
/* trains : le profil d'une ligne */
.mcf-profil-c{color:#fff;background:var(--mcg-bleu)}
.mcf-profil-c b{text-shadow:0 2px 0 rgba(11,14,19,.35)}
.mcf-etoiles i{background:rgba(255,255,255,.3)}
/* incidents : la carte prend la couleur de sa gravité */
.mcx .mc-inc.mcf-inc{color:#fff;background-color:var(--g);
  background-image:linear-gradient(175deg,color-mix(in srgb,var(--g) 55%,#2B62C4) 0%,color-mix(in srgb,var(--g) 40%,#153E8C) 55%,color-mix(in srgb,var(--g) 35%,#0B1A3A) 100%)}
.mcf-inc-tete>b{text-shadow:0 2px 0 rgba(11,14,19,.4)}
.mcf-inc-tete>small{color:#EAF2FF;opacity:1}
.mcf-fiche-inc{color:#fff;background:linear-gradient(170deg,#FF8A80,#C8102E)}
/* monuments : de l'or */
.mcf-mon{background:var(--mcg-or)}
.mcf-mon--neuf{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 8px,transparent 8px 16px),linear-gradient(170deg,#9AD4FF,#4C9BE6)}
.mcf-mon-l{color:#3B2A00}
.mcf-up>div{color:#fff;background:var(--mcg-bleu)}
.mcf-up small{color:#CFE0FF}
.mcf-up b.ok{color:#7CFFB0}.mcf-up b.ko{color:#FFB3A8}
.mcf-verdict.neutre{background:linear-gradient(180deg,#9AD4FF,#4C9BE6)}
/* les statistiques des règles : une couleur par tuile */
.mcf-stat2{color:#fff;--a:#4C8EEC;--b:#153E8C;background:linear-gradient(165deg,var(--a),var(--b))}
.mcf-stat2:nth-child(6n+2){--a:#4FD68A;--b:#0B6B3F}.mcf-stat2:nth-child(6n+3){--a:#C98BEE;--b:#5A2590}
.mcf-stat2:nth-child(6n+4){--a:#FFB25E;--b:#B8560F}.mcf-stat2:nth-child(6n+5){--a:#FF7A8E;--b:#A3121F}.mcf-stat2:nth-child(6n){--a:#5FD8E8;--b:#0E6F80}
.mcf-stat2 b{text-shadow:var(--mcg-contour)}
.mcf-stat2.gros b{color:#FFE14D}
.mcf-stat2 small{color:#fff;opacity:.92}
/* les cartes : le corps prend la couleur de la rareté */
.mcf-carte{--rc:#A9BDD1;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 45%,#fff),var(--rc))}
.mcf-carte-badge{background:linear-gradient(180deg,#B8F0C9,#3ED07A)}

/* — 3. LES RÈGLES : des cartes en couleur des deux côtés — */
.mcf-regle-recto{background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.35),transparent 55%),linear-gradient(160deg,var(--a),var(--b));overflow:hidden}
.mcf-regle-recto::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 48%,transparent 60%);background-size:280% 100%;animation:mcgReflet 4.5s ease-in-out infinite;animation-delay:calc(var(--i)*.35s)}
@keyframes mcgReflet{0%{background-position:130% 0}55%,100%{background-position:-60% 0}}
.mcf-regle-recto b{font-size:1.1rem}
.mcf-regle-verso{color:#fff;justify-content:flex-start;gap:6px;padding:12px 12px 14px;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px),linear-gradient(200deg,var(--a),var(--b))}
.mcf-regle-verso b{display:flex;align-items:center;gap:6px;font-size:1rem;color:#fff;text-shadow:var(--mcg-contour)}
.mcf-regle-verso span{padding:8px 10px;border-radius:12px;font-size:.82rem;line-height:1.42;color:#fff!important;background:rgba(11,14,19,.36);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25)}
.mcg-regle-mini{display:inline-block;width:30px;height:24px;flex:none}
.mcg-regle-mini svg{display:block;width:100%;height:100%;overflow:visible}
.mcf-regle.retourne .mcf-regle-verso{animation:mcgVerso .6s var(--mcf-res,ease) both}
@keyframes mcgVerso{0%{filter:brightness(1.6)}100%{filter:none}}
.mcf-regle .mcg-etincelle{position:absolute;left:50%;top:50%;z-index:5;width:10px;height:10px;margin:-5px;pointer-events:none;background:#FFE14D;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:mcgEtincelle .6s ease-out forwards}
@keyframes mcgEtincelle{from{transform:rotate(var(--a)) translateY(0) scale(.4);opacity:1}to{transform:rotate(var(--a)) translateY(-70px) scale(1.2);opacity:0}}
.mcf-regle{height:200px}
@media (max-width:560px){ .mcf-regle{height:190px} }

/* — 4. LE MONUMENT D'OR : tout au centre, sans machine à écrire — */
.mcorx-chip{text-align:center!important}
.mcorx-chip small,.mcorx-plaque span,.mcorx-rang{font-family:var(--display)!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:800!important}
.mcorx-chip small{font-size:.76rem!important}
.mcorx-plaque span{font-size:.78rem!important}
.mcorx-rang{font-size:.82rem!important}
.mcorx-chips{display:flex!important;flex-wrap:wrap;justify-content:center}
.mcorx-chip{flex:1 1 150px;max-width:200px}
.mcorx-desc,.mcorx-nom{text-align:center}

/* — 5. LA STATION VUE DE PROFIL — */
.mcg-quai{display:block;width:100%;height:auto}
.mcg-quai .mcg-p{animation:mcgBob 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.37s)}
@keyframes mcgBob{50%{transform:translateY(-1.8px)}}
.mcg-quai :is(.mcg-tt,.mcg-bg,.mcg-bd,.mcg-jg,.mcg-jd){transform-box:view-box}
.mcg-quai .mcg-tt{transform-origin:0 -46px;animation:mcgTete 3.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.53s)}
@keyframes mcgTete{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
.mcg-quai .mcg-bg{transform-origin:-7.5px -41px;animation:mcgBras 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.29s)}
.mcg-quai .mcg-bd{transform-origin:7.5px -41px;animation:mcgBras 2.6s ease-in-out infinite reverse;animation-delay:calc(var(--i,0)*-.41s)}
@keyframes mcgBras{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(7deg)}}
.mcg-quai .mcg-jg{transform-origin:-3.6px -21px}
.mcg-quai .mcg-jd{transform-origin:3.6px -21px;animation:mcgPied 2.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.6s)}
@keyframes mcgPied{0%,62%,100%{transform:rotate(0)}72%{transform:rotate(-12deg)}84%{transform:rotate(5deg)}}
.mcg-quai .mcg-oeil{transform-box:fill-box;transform-origin:center;animation:mcgCligne 4.2s infinite}
@keyframes mcgCligne{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
/* marcher */
.mcg-quai .mcg-p--marche{animation-duration:.52s}
.mcg-quai .mcg-p--marche .mcg-jg{animation:mcgPas .52s ease-in-out infinite alternate}
.mcg-quai .mcg-p--marche .mcg-jd{animation:mcgPas .52s ease-in-out infinite alternate-reverse}
@keyframes mcgPas{from{transform:rotate(-24deg)}to{transform:rotate(24deg)}}
.mcg-quai .mcg-p--marche .mcg-bg{animation:mcgBalance .52s ease-in-out infinite alternate}
.mcg-quai .mcg-p--marche .mcg-bd{animation:mcgBalance .52s ease-in-out infinite alternate-reverse}
@keyframes mcgBalance{from{transform:rotate(26deg)}to{transform:rotate(-26deg)}}
/* les gestes de chacun */
.mcg-quai .mcg-p .mcg-bd--geste{animation:mcgGeste 1.3s ease-in-out infinite}
@keyframes mcgGeste{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(22deg)}}
.mcg-quai .mcg-p .mcg-bd--balai{animation:mcgBalai .9s ease-in-out infinite alternate}
@keyframes mcgBalai{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
.mcg-quai .mcg-p .mcg-bd--pancarte{animation:mcgPancarte 1.3s ease-in-out infinite}
@keyframes mcgPancarte{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(-4px)}}
.mcg-quai .mcg-p .mcg-bd--montre{animation:mcgMontre 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.8s)}
@keyframes mcgMontre{0%,55%,100%{transform:rotate(0)}65%,85%{transform:rotate(-115deg)}}
.mcg-quai .mcg-p--montre .mcg-tt{animation:mcgTeteMontre 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.8s)}
@keyframes mcgTeteMontre{0%,55%,100%{transform:rotate(-4deg)}65%,85%{transform:rotate(14deg)}}
.mcg-quai .mcg-p--tel .mcg-tt{animation:mcgTeteTel 4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.6s)}
@keyframes mcgTeteTel{0%,100%{transform:rotate(10deg)}45%{transform:rotate(13deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(11deg)}}
.mcg-quai .mcg-p .mcg-bd--tel{animation:mcgTelBras 4s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.6s)}
@keyframes mcgTelBras{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
.mcg-tel{animation:mcgClig 1.8s steps(2) infinite}
.mcg-quai .mcg-p .mcg-bd--lampe{animation:mcgLampe 3s ease-in-out infinite}
@keyframes mcgLampe{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}}
.mcg-faisceau{animation:mcgGresille 2.4s steps(1) infinite}
.mcg-quai .mcg-p .mcg-bd--outil{animation:mcgOutil .38s ease-in-out infinite alternate}
@keyframes mcgOutil{from{transform:rotate(-34deg)}to{transform:rotate(12deg)}}
.mcg-quai .mcg-p .mcg-bd--parapluie{animation:mcgParapluie 2.4s ease-in-out infinite}
@keyframes mcgParapluie{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.mcg-quai .mcg-p .mcg-bd--lance{animation:mcgLance 1.6s ease-in-out infinite}
@keyframes mcgLance{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(4deg)}}
.mcg-jet circle{animation:mcgJet .7s linear infinite;animation-delay:calc(var(--k)*-.12s)}
@keyframes mcgJet{from{transform:translate(-14px,2px);opacity:0}30%{opacity:1}to{transform:translate(18px,-2px);opacity:0}}
.mcg-ondes,.mcg-ondes-r path{animation:mcgOndes 1s ease-out infinite;animation-delay:calc(var(--k,0)*.25s)}
@keyframes mcgOndes{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
.mcg-quai .mcg-respire .mcg-tt{animation:none}
.mcg-quai .mcg-respire{animation:mcgRespire 2.6s ease-in-out infinite}
@keyframes mcgRespire{50%{transform:translateX(-1.6px)}}
/* passer, monter, descendre */
.mcg-va{animation:mcgVa var(--d,17s) linear infinite;animation-delay:var(--de,0s)}
@keyframes mcgVa{from{transform:translateX(var(--x0))}to{transform:translateX(var(--x1))}}
.mcg-monte,.mcg-descend{transform-box:fill-box;transform-origin:50% 100%}
.mcg-t-cycle .mcg-monte,.mcg-t-lent .mcg-monte{animation:mcgMonte var(--cyc) linear infinite}
@keyframes mcgMonte{0%,32%{transform:translate(0,0) scale(1);opacity:1}43%{transform:translate(0,-20px) scale(.9);opacity:1}47%{transform:translate(0,-24px) scale(.86);opacity:0}
  74%{transform:translate(-40px,0) scale(1);opacity:0}84%,100%{transform:translate(0,0) scale(1);opacity:1}}
.mcg-descend{opacity:0}
.mcg-t-cycle .mcg-descend,.mcg-t-lent .mcg-descend{animation:mcgDescend var(--cyc) linear infinite}
@keyframes mcgDescend{0%,35%{transform:translate(0,-34px) scale(.84);opacity:0}39%{opacity:1}47%{transform:translate(0,0) scale(1);opacity:1}
  64%{transform:translate(var(--dx),0) scale(1);opacity:1}68%,100%{transform:translate(var(--dx),0) scale(1);opacity:0}}
/* la rame : elle entre, freine, s'arrête, ouvre, referme et repart */
.mcg-t-cycle .mcg-rame,.mcg-t-lent .mcg-rame{animation:mcgRame var(--cyc) linear infinite}
@keyframes mcgRame{0%{transform:translateX(-720px);animation-timing-function:cubic-bezier(.2,.62,.34,1)}24%,66%{transform:translateX(0)}
  66%{animation-timing-function:cubic-bezier(.62,0,.86,.42)}90%,100%{transform:translateX(760px)}}
.mcg-t-attente .mcg-rame{transform:translateX(-470px)}
.mcg-t-cycle .mcg-pg,.mcg-t-lent .mcg-pg{animation:mcgPg var(--cyc) ease-in-out infinite}
.mcg-t-cycle .mcg-pd,.mcg-t-lent .mcg-pd{animation:mcgPd var(--cyc) ease-in-out infinite}
@keyframes mcgPg{0%,29%{transform:translateX(0)}34%,58%{transform:translateX(-12px)}63%,100%{transform:translateX(0)}}
@keyframes mcgPd{0%,29%{transform:translateX(0)}34%,58%{transform:translateX(12px)}63%,100%{transform:translateX(0)}}
.mcg-t-ouvert .mcg-pg{transform:translateX(-12px)}.mcg-t-ouvert .mcg-pd{transform:translateX(12px)}
.mcg-t-cycle .mcg-ppg,.mcg-t-lent .mcg-ppg{animation:mcgPpg var(--cyc) ease-in-out infinite}
.mcg-t-cycle .mcg-ppd,.mcg-t-lent .mcg-ppd{animation:mcgPpd var(--cyc) ease-in-out infinite}
@keyframes mcgPpg{0%,28%{transform:translateX(0)}33%,59%{transform:translateX(-14px)}64%,100%{transform:translateX(0)}}
@keyframes mcgPpd{0%,28%{transform:translateX(0)}33%,59%{transform:translateX(14px)}64%,100%{transform:translateX(0)}}
.mcg-t-ouvert .mcg-ppg{transform:translateX(-14px)}.mcg-t-ouvert .mcg-ppd{transform:translateX(14px)}
.mcg-voyant{opacity:.25}
.mcg-t-cycle .mcg-voyant,.mcg-t-lent .mcg-voyant{animation:mcgVoyant var(--cyc) steps(1) infinite}
@keyframes mcgVoyant{0%,28%{opacity:.25}29%,62%{opacity:1}63%,100%{opacity:.25}}
.mcg-t-ouvert .mcg-voyant{opacity:1}
.mcg-t-cycle .mcg-roue,.mcg-t-lent .mcg-roue{animation:mcgRoue var(--cyc) linear infinite}
@keyframes mcgRoue{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.2,.62,.34,1)}24%,66%{transform:rotate(1440deg)}
  66%{animation-timing-function:cubic-bezier(.62,0,.86,.42)}90%,100%{transform:rotate(2880deg)}}
.mcg-phare{opacity:.3}
.mcg-t-cycle .mcg-phare,.mcg-t-lent .mcg-phare{animation:mcgPhare var(--cyc) linear infinite}
.mcg-t-attente .mcg-phare{opacity:.85;animation:mcgHalo 2s ease-in-out infinite}
@keyframes mcgPhare{0%,20%{opacity:.9}26%,62%{opacity:.15}68%,100%{opacity:.9}}
.mcg-frein{opacity:0}
.mcg-t-cycle .mcg-frein,.mcg-t-lent .mcg-frein{animation:mcgFrein var(--cyc) steps(1) infinite}
@keyframes mcgFrein{0%,14%{opacity:0}15%,23%{opacity:1}24%,100%{opacity:0}}
.mcg-etin{animation:mcgClig .2s steps(2) infinite;animation-delay:calc(var(--k,0)*-.06s)}
.mcg-vpass{animation:mcgBob 1.9s ease-in-out infinite;animation-delay:calc(var(--i,0)*-.31s)}
.mcg-led{animation:mcgLed 1.6s ease-in-out infinite}
@keyframes mcgLed{50%{opacity:.45}}
.mcg-t-cycle .mcg-feu{animation:mcgPhare var(--cyc) linear infinite}
/* l'écran : à l'approche, à quai, prochain train */
.mcg-ta,.mcg-tb,.mcg-tc{opacity:0}
.mcg-t-cycle .mcg-ta,.mcg-t-lent .mcg-ta{animation:mcgTa var(--cyc) linear infinite}
.mcg-t-cycle .mcg-tb,.mcg-t-lent .mcg-tb{animation:mcgTb var(--cyc) linear infinite}
.mcg-t-cycle .mcg-tc,.mcg-t-lent .mcg-tc{animation:mcgTc var(--cyc) linear infinite}
@keyframes mcgTa{0%,22%{opacity:1}24%,96%{opacity:0}98%,100%{opacity:1}}
@keyframes mcgTb{0%,22%{opacity:0}24%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes mcgTc{0%,64%{opacity:0}66%,96%{opacity:1}98%,100%{opacity:0}}
/* le décor qui vit */
.mcg-halo{animation:mcgHalo 4s ease-in-out infinite;animation-delay:calc(var(--k,0)*-.7s)}
@keyframes mcgHalo{0%,100%{opacity:.22}50%{opacity:.38}}
.mcg-halo[style*="--k:4"]{animation:mcgGresille 3.4s steps(1) infinite}
@keyframes mcgGresille{0%,8%,14%,100%{opacity:.3}10%,12%{opacity:.04}}
.mcg-soleil{transform-box:fill-box;transform-origin:center;animation:mcgSoleil 3s ease-in-out infinite}
@keyframes mcgSoleil{50%{transform:scale(1.12)}}
.mcg-vague{animation:mcgVague 2.2s ease-in-out infinite}
@keyframes mcgVague{50%{transform:translateY(2px)}}
.mcg-vapeur path{animation:mcgVapeur 2.2s ease-out infinite;animation-delay:calc(var(--k,0)*-1.1s)}
@keyframes mcgVapeur{0%{opacity:0;transform:translateY(4px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-8px)}}
.mcg-aig-m{transform-origin:320px 50px;animation:mcgTourne 10s linear infinite}
.mcg-aig-h{transform-origin:320px 50px;animation:mcgTourne 120s linear infinite}
.mcg-vite .mcg-aig-m{animation-duration:1.2s}.mcg-vite .mcg-aig-h{animation-duration:14s}
@keyframes mcgTourne{to{transform:rotate(360deg)}}
.mcg-lueur{transform-origin:420px 18px;animation:mcgPendule 6s ease-in-out infinite}
@keyframes mcgPendule{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.mcg-cam{transform-origin:0 12px;animation:mcgCam 5s ease-in-out infinite}
@keyframes mcgCam{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(18deg)}}
.mcg-led-r{animation:mcgClig 1s steps(2) infinite}
.mcg-led-v{animation:mcgClig 1.4s steps(2) infinite;animation-delay:calc(var(--k,0)*-.45s)}
@keyframes mcgClig{50%{opacity:.2}}
.mcg-clig{animation:mcgClig .9s steps(2) infinite;animation-delay:calc(var(--k,0)*-.45s)}
.mcg-courant{animation:mcgCourant .7s linear infinite}
@keyframes mcgCourant{to{stroke-dashoffset:-18}}
.mcg-coeur{transform-origin:612px 290px;animation:mcgCoeur 1s ease-in-out infinite}
@keyframes mcgCoeur{0%,100%{transform:scale(1)}20%{transform:scale(1.3)}40%{transform:scale(1)}60%{transform:scale(1.2)}}
.mcg-gyro{animation:mcgClig .6s steps(2) infinite;animation-delay:calc(var(--k,0)*-.3s)}
.mcg-gyro-f{animation:mcgTourne 1.2s linear infinite;animation-delay:calc(var(--k,0)*-.6s)}
.mcg-robot{animation:mcgRobot 13s ease-in-out infinite}
@keyframes mcgRobot{0%,100%{transform:translateX(0)}50%{transform:translateX(230px)}}
.mcg-brosse{transform-origin:-13px 0;animation:mcgTourne .5s linear infinite}
.mcg-bulles circle{animation:mcgBulle 1.6s ease-out infinite;animation-delay:calc(var(--k,0)*-.5s)}
@keyframes mcgBulle{from{transform:translate(0,0);opacity:.9}to{transform:translate(-6px,-12px);opacity:0}}
.mcg-pigeon{animation:mcgPigeon 6s ease-in-out infinite;animation-delay:calc(var(--i,0)*-2s)}
@keyframes mcgPigeon{0%,100%{transform:translate(0,0)}8%{transform:translate(7px,-5px)}12%{transform:translate(14px,0)}46%{transform:translate(14px,0)}
  50%{transform:translate(14px,0) scaleX(-1)}58%{transform:translate(7px,-5px) scaleX(-1)}62%,96%{transform:translate(0,0) scaleX(-1)}}
.mcg-pigeon-t{transform-origin:6px -8px;animation:mcgPicore 1.3s ease-in-out infinite}
@keyframes mcgPicore{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(38deg)}75%{transform:rotate(0)}85%{transform:rotate(32deg)}}
/* les incidents */
.mcg-bulle{transform-box:fill-box;transform-origin:50% 100%;animation:mcgAppel 1.2s ease-in-out infinite}
@keyframes mcgAppel{50%{transform:translateY(-5px) scale(1.08)}}
.mcg-tremble{animation:mcgTremble .5s steps(3) infinite}
@keyframes mcgTremble{33%{transform:translateX(-1px)}66%{transform:translateX(1px)}}
.mcg-ruban{animation:mcgRuban 2s ease-in-out infinite}
@keyframes mcgRuban{50%{transform:translateY(2px)}}
.mcg-cloche{transform-origin:0 -16px;animation:mcgCloche .22s ease-in-out infinite alternate}
@keyframes mcgCloche{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.mcg-flash-r{animation:mcgFlash .8s steps(2) infinite}
@keyframes mcgFlash{50%{opacity:.4}}
.mcg-rat-va{animation:mcgRat 7s ease-in-out infinite}
@keyframes mcgRat{0%,100%{transform:translateX(220px)}45%{transform:translateX(520px)}50%{transform:translateX(520px) scaleX(-1)}95%{transform:translateX(220px) scaleX(-1)}}
.mcg-rat{animation:mcgBob .3s ease-in-out infinite}
.mcg-fumee{transform-box:fill-box;transform-origin:center;animation:mcgFumee 2.6s ease-out infinite;animation-delay:calc(var(--k,0)*-.43s)}
@keyframes mcgFumee{0%{transform:translateY(0) scale(.5);opacity:0}25%{opacity:.85}100%{transform:translateY(-70px) scale(1.5);opacity:0}}
.mcg-flammes{transform-origin:0 80px;animation:mcgFlamme .35s ease-in-out infinite alternate}
@keyframes mcgFlamme{from{transform:scaleY(.86) skewX(-4deg)}to{transform:scaleY(1.08) skewX(4deg)}}
.mcg-goutte{animation:mcgGoutte 1.4s ease-in infinite;animation-delay:calc(var(--k,0)*-.37s)}
@keyframes mcgGoutte{0%{transform:translateY(0);opacity:0}10%{opacity:1}100%{transform:translateY(250px);opacity:.6}}
.mcg-rond{transform-box:fill-box;transform-origin:center;animation:mcgRond 1.4s ease-out infinite}
@keyframes mcgRond{from{transform:scale(.4);opacity:1}to{transform:scale(2.6);opacity:0}}
.mcg-vagues{animation:mcgVagues 2.4s linear infinite}
@keyframes mcgVagues{to{transform:translateX(40px)}}
.mcg-eau{animation:mcgMonteEau 5s ease-in-out infinite}
@keyframes mcgMonteEau{50%{transform:translateY(-4px)}}
.mcg-canard{animation:mcgCanard 2.4s ease-in-out infinite}
@keyframes mcgCanard{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(10px,-2px) rotate(6deg)}}
.mcg-gresille{animation:mcgEclair 4s steps(1) infinite}
@keyframes mcgEclair{0%,40%,44%,100%{opacity:0}41%,43%{opacity:.18}}
.mcg-banniere{transform-box:fill-box;transform-origin:center;animation:mcgBanniere 1.6s ease-in-out infinite}
@keyframes mcgBanniere{50%{transform:scale(1.04)}}
.mcg-alerte{animation:mcgAlerte 1.2s ease-in-out infinite}
@keyframes mcgAlerte{50%{opacity:.2}}
.mcg-teinte{animation:mcgTeinte 1.6s ease-in-out infinite}
@keyframes mcgTeinte{50%{opacity:.14}}
.mcg-etincelles .mcg-etin{animation:mcgClig .16s steps(2) infinite}
.mc-inc-scene .mcg-quai{border-radius:14px}

/* — 6. LA BOÎTE DE NUIT — */
.mcg-club .mcg-vig{animation:mcgVigRespire 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
@keyframes mcgVigRespire{50%{transform:translateY(-1.4px)}}
.mcg-club .mcg-vig-buste{transform-box:fill-box;transform-origin:50% 100%;animation:mcgVigBuste 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}
@keyframes mcgVigBuste{50%{transform:scale(1.035,1.02)}}
.mcg-club .mcg-vig-tete{transform-box:fill-box;transform-origin:50% 100%;animation:mcgVigTete 6s ease-in-out infinite;animation-delay:calc(var(--i)*-2s)}
@keyframes mcgVigTete{0%,30%,100%{transform:rotate(0)}40%,55%{transform:rotate(-9deg)}65%,80%{transform:rotate(7deg)}}
.mcg-vig-reflet{animation:mcgVigReflet 3s ease-in-out infinite}
@keyframes mcgVigReflet{0%,70%,100%{transform:translateX(0);opacity:0}80%{opacity:1}95%{transform:translateX(16px);opacity:0}}
.mcg-club .mcg-dj{animation:mcgDJ var(--beat,.6s) ease-in-out infinite}
@keyframes mcgDJ{50%{transform:translateY(3px)}}
.mcg-club .mcg-dj-tete{transform-box:fill-box;transform-origin:50% 100%;animation:mcgDJTete calc(var(--beat,.6s)*2) ease-in-out infinite}
@keyframes mcgDJTete{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.mcg-club .mcg-dj-bd{transform-origin:22px -34px;animation:mcgScratch calc(var(--beat,.6s)*.5) ease-in-out infinite alternate}
@keyframes mcgScratch{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.mcg-club .mcg-dj-bg{transform-origin:-22px -34px;animation:mcgCasque calc(var(--beat,.6s)*4) ease-in-out infinite}
@keyframes mcgCasque{0%,40%,100%{transform:rotate(0)}55%,85%{transform:rotate(14deg)}}
.mcg-eq{transform-box:fill-box;transform-origin:50% 100%;animation:mcgEq calc(var(--beat,.6s)*.5) ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.07s)}
@keyframes mcgEq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.mcg-bouton{animation:mcgClig var(--beat,.6s) steps(2) infinite;animation-delay:calc(var(--k)*-.15s)}
.mcg-lavis{animation:mcgLavis calc(var(--beat,.6s)*8) ease-in-out infinite}
.mcg-lavis--b{animation-delay:calc(var(--beat,.6s)*-4)}
@keyframes mcgLavis{0%,100%{opacity:.55;transform:translateX(0)}50%{opacity:1;transform:translateX(40px)}}
.mcg-retro{animation:mcgRetro calc(var(--beat,.6s)*2) ease-in-out infinite}
@keyframes mcgRetro{50%{opacity:.75}}
.mcg-bouteille{animation:mcgBouteille calc(var(--beat,.6s)*4) ease-in-out infinite;animation-delay:calc(var(--k)*-.3s)}
@keyframes mcgBouteille{0%,100%{filter:none}50%{filter:brightness(1.35)}}
.mcg-club .mcg-barman{animation:mcgDJ var(--beat,.6s) ease-in-out infinite}
.mcg-club .mcg-shaker{transform-origin:0 -26px;animation:mcgShaker .26s ease-in-out infinite alternate}
@keyframes mcgShaker{from{transform:translateY(0) rotate(-6deg)}to{transform:translateY(-7px) rotate(6deg)}}
.mcg-club .mcg-barman-tete{transform-box:fill-box;transform-origin:50% 100%;animation:mcgDJTete calc(var(--beat,.6s)*2) ease-in-out infinite}
.mcg-club .mcg-client{animation:mcgDJ var(--beat,.6s) ease-in-out infinite;animation-delay:calc(var(--k)*-.2s)}
.mcg-club .mcg-client-j{transform-box:fill-box;transform-origin:50% 0;animation:mcgJambeTab calc(var(--beat,.6s)*2) ease-in-out infinite}
@keyframes mcgJambeTab{50%{transform:rotate(14deg)}}
.mcg-club .mcg-client-b{transform-origin:6px -18px;animation:mcgSirote 3s ease-in-out infinite;animation-delay:calc(var(--k)*-1.4s)}
@keyframes mcgSirote{0%,60%,100%{transform:rotate(0)}70%,85%{transform:rotate(-40deg)}}
.mcg-bulle-v{animation:mcgBulle 1.2s ease-out infinite;animation-delay:calc(var(--k)*-.4s)}
.mcg-club .mcg-vip{animation:mcgDJ calc(var(--beat,.6s)*2) ease-in-out infinite;animation-delay:calc(var(--k)*-.3s)}
.mcg-cordon{animation:mcgRuban 3s ease-in-out infinite}
.mcg-porte-lum{animation:mcgRetro calc(var(--beat,.6s)*2) ease-in-out infinite}

/* — 7. LE PLAN — */
.mcg-flot{animation:mcgFlot 3s linear infinite}
.mcg-flot--2{animation-duration:4.4s}
.mcg-flot--canal{animation-duration:2.2s}
@keyframes mcgFlot{to{stroke-dashoffset:-54}}
.mcg-faisceau-t{animation:mcgHalo 1.8s ease-in-out infinite}
.mcg-sillage{animation:mcgSillage 1.4s ease-in-out infinite}
@keyframes mcgSillage{50%{opacity:.35}}
.mcq-pouls .mcg-bat,.mc-pulse.mcg-bat{transform-box:fill-box;transform-origin:center;animation:mcgBat 2.4s ease-out infinite;animation-delay:calc(var(--k,0)*-.37s)}
@keyframes mcgBat{0%{transform:scale(.7);opacity:.45}100%{transform:scale(1.9);opacity:0}}
.mc-mapwrap.mc-gele :is(.mcg-flot,.mcg-faisceau-t,.mcg-bat,.mcg-sillage,.mcg-ombre,.mcg-oiseaux,.mcg-avion,.mcg-ballon,.mcg-aile,.mcg-helice){animation-play-state:paused!important}
.mcg-ciel{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mcg-ombre{position:absolute;top:calc(8% + var(--k)*30%);left:0;width:46%;aspect-ratio:2/1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,40,70,.16),rgba(20,40,70,.07) 60%,transparent);
  animation:mcgOmbre calc(70s + var(--k)*22s) linear infinite;animation-delay:calc(var(--k)*-31s)}
@keyframes mcgOmbre{from{transform:translateX(-60%)}to{transform:translateX(260%)}}
.mc-mapwrap .mc-nuages svg.mcg-oiseaux{position:absolute;left:0;top:18%;width:58px!important;height:auto!important;animation:mcgOiseaux 26s linear infinite}
@keyframes mcgOiseaux{0%{transform:translate(-80px,40px)}55%{transform:translate(calc(100vw + 60px),-60px)}100%{transform:translate(calc(100vw + 60px),-60px)}}
.mcg-aile{transform-box:fill-box;transform-origin:center;animation:mcgAile .5s ease-in-out infinite alternate;animation-delay:calc(var(--k)*-.1s)}
@keyframes mcgAile{to{transform:scaleY(-.6)}}
.mc-mapwrap .mc-nuages svg.mcg-avion{position:absolute;right:0;top:62%;width:150px!important;height:auto!important;animation:mcgAvion 44s linear infinite;animation-delay:-12s}
@keyframes mcgAvion{0%{transform:translate(calc(-100vw - 200px),20px)}40%{transform:translate(220px,-40px)}100%{transform:translate(220px,-40px)}}
.mcg-avion{filter:drop-shadow(0 8px 0 rgba(11,14,19,.18))}
.mcg-helice{transform-box:fill-box;transform-origin:center;animation:mcgHelice .12s linear infinite}
@keyframes mcgHelice{50%{transform:scaleY(.15)}}
.mc-mapwrap .mc-nuages svg.mcg-ballon{position:absolute;left:8%;bottom:-90px;width:42px!important;height:auto!important;animation:mcgBallon 90s linear infinite;animation-delay:-20s}
@keyframes mcgBallon{0%{transform:translate(0,0)}100%{transform:translate(60vw,-130vh)}}
.mcg-ballon{filter:drop-shadow(0 10px 0 rgba(11,14,19,.16))}

@media (prefers-reduced-motion:reduce){
  .mcg-quai *,.mcg-club *,.mcg-flot,.mcg-faisceau-t,.mcg-bat,.mcg-sillage,.mcg-ciel,.mcg-ciel *,.mcf-regle-recto::after{animation:none!important}
  .mcg-ciel{display:none}
}
/* — 8. LE PLAN EN CALQUES, NET À TOUS LES ZOOMS — */
.mc-mapwrap>svg.mcq-calque{position:absolute!important;inset:0;width:100%!important;height:100%!important;display:block;pointer-events:none;z-index:0}
.mc-mapwrap>svg.mcq-reseau{position:relative;z-index:1}
.mc-mapwrap>svg.mcq-rames{z-index:1}
.mc-mapwrap .mc-vig{z-index:3}
/* plus de filtres d'ombre sur le plan : ils étaient peints en image, donc flous au zoom */
.mc-mapwrap :is(.mc-m3d-h,.mc-or-monu,.mc-train,.mc-bldg,.mc-st){filter:none!important}
.mc-mapwrap .mc-pax{display:none}
.mc-mapwrap .mc-st circle.ring{stroke-width:3.4}
/* sur téléphone, la hauteur du plan ne suit plus la barre du navigateur */
@media (max-width:760px){ .mc-mapwrap{height:min(68svh,600px)!important} }

/* le niveau de détail suit le zoom : de loin, le réseau seul, lisible */
.mc-mapwrap.mcq-loin .mcq-fond .mc-dot{display:none}
/* les petits immeubles n'apparaissent qu'au plus près : de plus loin, ils brouillaient le plan */
.mc-mapwrap:not(.mcq-proche) .mcq-fond .mc-bldg{display:none}
.mc-mapwrap.mcq-loin .mc-m3d-h{display:none}
.mc-mapwrap .mc-ghost{opacity:.38}
.mc-mapwrap .mcq-filet{pointer-events:none}
/* — 9. LE DÉTAIL D'UN INCIDENT — */
.box.mcg-ix-boite{color:#fff;max-width:min(640px,96vw);
  background:linear-gradient(170deg,color-mix(in srgb,var(--g,#3ED07A) 45%,#2B62C4) 0%,#1B3A7A 55%,#132A5E 100%)!important;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px color-mix(in srgb,var(--g,#3ED07A) 70%,transparent),0 40px 90px rgba(0,0,0,.65)!important}
.box.mcg-ix-boite .mc-head h3{margin:0 auto 0 0;font-family:var(--display);font-weight:900;color:#FFCE00;text-shadow:0 2px 0 rgba(11,14,19,.5)}
.box.mcg-ix-boite .mc-head .btn{color:#0B0E13;background:linear-gradient(180deg,#FFE680,#FFC21A);border:0;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.box.mcg-ix-boite .mc-head .mcf-inc-grav{margin-right:8px}
.mcg-ix{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.mcg-ix-scene{width:100%;margin:0!important;border-radius:16px;overflow:hidden;box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mcg-ix-ou{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(11,14,19,.32)}
.mcg-ix-ou b{font-family:var(--display);font-weight:900;font-size:1.05rem}
.mcg-ix-tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
@media (max-width:520px){ .mcg-ix-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mcg-ix-t{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px 8px;border-radius:14px;background:linear-gradient(170deg,var(--a),var(--b));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:mcfEntre .4s var(--mcf-res) backwards;animation-delay:calc(var(--i)*70ms)}
.mcg-ix-t.rouge{--a:#FF7A8E;--b:#C4102A}.mcg-ix-t.orange{--a:#FFB25E;--b:#C4561B}.mcg-ix-t.violet{--a:#C98BEE;--b:#5A2590}.mcg-ix-t.bleu{--a:#7CC4FF;--b:#2B62C4}
.mcg-ix-t small{font-family:var(--display);font-weight:800;font-size:.74rem;opacity:.95}
.mcg-ix-t b{font-family:var(--display);font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.mcg-ix .mcf-titre{margin:10px auto 2px}
.mcg-ix-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;width:100%}
.mcg-ix-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border:0;border-radius:18px;cursor:pointer;color:#0B0E13;font:inherit;
  background:linear-gradient(180deg,var(--a),var(--b));box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;transition:transform .2s var(--mcf-res);
  animation:mcfEntre .45s var(--mcf-res) backwards;animation-delay:calc(.2s + var(--i)*90ms)}
.mcg-ix-opt:hover:not(:disabled){transform:translateY(-3px)}
.mcg-ix-opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mcg-ix-opt:disabled{opacity:.55;cursor:not-allowed}
.mcg-ix-opt.or{--a:#FFE88A;--b:#FFC21A}.mcg-ix-opt.bleu{--a:#9AD4FF;--b:#4C9BE6}.mcg-ix-opt.doux{--a:#D8C6FF;--b:#A98BEE}
.mcg-ix-ico{font-size:1.6rem;line-height:1}
.mcg-ix-opt b{font-family:var(--display);font-weight:900;font-size:1.05rem}
.mcg-ix-opt small{font-family:var(--display);font-weight:700;font-size:.8rem;opacity:.85}
.mcg-ix-prix{margin-top:4px;padding:3px 12px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.88rem;color:#fff;background:#0B0E13}
.mcg-ix-prix.no{background:#C8102E}
/* @@ fin metrocity_couleurs.css @@ */
/* @@ debut metrocity_quais.css @@ */
/* — la scène du quai des lignes — */
.mcg-lx .mc-lx-mur{background:#14213B!important;background-image:none!important;overflow:hidden}
.mcg-lx .mc-lx-mur>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mcg-lx::before{display:none!important}
.mcg-lx .mc-lx-tunnel{background:none!important;width:10%;height:80%;bottom:15%}
.mcg-lx .mcg-lx-tunnel-d{position:absolute;z-index:4;right:0;bottom:15%;width:15%;height:80%;pointer-events:none}
.mcg-lx :is(.mc-lx-tunnel,.mcg-lx-tunnel-d) svg{display:block;width:100%;height:100%}
@media (max-width:620px){ .mcg-lx .mc-lx-tunnel{width:8%} .mcg-lx .mcg-lx-tunnel-d{width:13%} }
.mcg-lx .mc-lx-voie{bottom:16%;height:12%;box-shadow:inset 0 3px 0 #3A4453;background:
  linear-gradient(180deg,#2A3140 0 24%,transparent 24%),
  linear-gradient(180deg,transparent 56%,#C9D2DC 56% 61%,#7E8A98 61% 68%,#2A3040 68% 72%,transparent 72%),
  repeating-linear-gradient(90deg,#6B4E32 0 15px,#20262F 15px 27px)}
.mcg-lx .mc-lx-quai{height:19%;box-shadow:inset 0 4px 0 #EDE5D2,inset 0 6.5px 0 #0B0E13,inset 0 -16px 26px rgba(0,0,0,.18);background:
  repeating-linear-gradient(90deg,transparent 0 62px,rgba(11,14,19,.11) 62px 64px),
  linear-gradient(180deg,transparent 0 58%,rgba(11,14,19,.1) 58% 60%,transparent 60%),
  linear-gradient(180deg,#D4C4A2,#A39478)}
.mcg-lx .mc-lx-quai i{top:7px;height:10px;background:#FFCE00;background-image:radial-gradient(circle,#D9A800 1.5px,transparent 1.9px);background-size:9px 10px;box-shadow:0 2px 0 rgba(11,14,19,.2)}
.mcg-lx .mc-lx-banc{left:2%;bottom:5%;width:clamp(86px,17%,190px);height:auto;aspect-ratio:170/104;background:none!important;box-shadow:none!important;border-radius:0}
.mcg-lx .mc-lx-banc svg{display:block;width:100%;height:100%;overflow:visible}
.mcg-lx .mc-lx-pax{width:44px;height:78px;left:-22px;bottom:calc(2% + (1 - var(--mclxP,.5))*8%)}
.mcg-lx .mc-lx-pax svg.mcg-quai{width:100%;height:100%;overflow:visible}
@media (max-width:620px){ .mcg-lx .mc-lx-pax{width:34px;height:60px;left:-17px} }
.mcg-lx .mc-lx-pax.marche .mcg-p{animation-duration:.5s}
.mcg-lx .mc-lx-pax.marche .mcg-p .mcg-jg{animation:mcgPas .5s ease-in-out infinite alternate}
.mcg-lx .mc-lx-pax.marche .mcg-p .mcg-jd{animation:mcgPas .5s ease-in-out infinite alternate-reverse}
.mcg-lx .mc-lx-pax.marche .mcg-p .mcg-bg{animation:mcgBalance .5s ease-in-out infinite alternate}
.mcg-lx .mc-lx-pax.marche .mcg-p .mcg-bd{animation:mcgBalance .5s ease-in-out infinite alternate-reverse}
.mcg-lx .mc-lx-plaque{top:5%;z-index:5;border-radius:8px;background:#153E8C;font-weight:800;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
@media (max-width:620px){ .mcg-lx .mc-lx-plaque{top:4%;left:auto;right:3%;transform:none;max-width:56%;font-size:.74rem} }
.mcg-lx-m{transform-origin:880px 62px;animation:mcgTourne 10s linear infinite}
.mcg-lx-h{transform-origin:880px 62px;animation:mcgTourne 120s linear infinite}
.mcg-feu-r{animation:mcgFeuR 7s steps(1) infinite}
.mcg-feu-v{animation:mcgFeuV 7s steps(1) infinite}
@keyframes mcgFeuR{0%,60%{opacity:.25}61%,100%{opacity:1}}
@keyframes mcgFeuV{0%,60%{opacity:1}61%,100%{opacity:.25}}

/* — le monument d'or — */
.box.mcg-or-boite{max-width:min(560px,96vw)!important;padding:0!important;overflow:auto!important;border:0!important;
  background:radial-gradient(130% 70% at 50% 0%,#6247D8 0%,#2E1C86 46%,#170D45 100%)!important;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 9px #FFD23E,0 0 0 12px #0B0E13,0 0 90px -10px rgba(255,210,62,.6),0 50px 110px rgba(0,0,0,.75)!important}
.mcg-or{padding:20px 16px 22px!important;color:#fff}
.mcg-or .mcorx-rayons{background:conic-gradient(from 0deg,rgba(255,210,62,.3) 0 5deg,transparent 5deg 20deg)}
.mcg-or-x{position:absolute;right:12px;top:12px;z-index:6;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;font:900 1rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFE680,#FFC21A);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .2s}
.mcg-or-x:hover{transform:rotate(90deg)}
.mcg-or-ruban{position:relative;z-index:2;display:inline-block;margin:2px auto 0;filter:drop-shadow(0 3px 0 #0B0E13) drop-shadow(0 0 1.4px #0B0E13);animation:mcgRuban2 .6s var(--mcf-res,ease) both}
.mcg-or-ruban span{display:inline-block;padding:9px 30px;font-family:var(--display);font-weight:900;font-size:1rem;color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFC21A);clip-path:polygon(0 0,100% 0,93% 50%,100% 100%,0 100%,7% 50%)}
@keyframes mcgRuban2{from{opacity:0;transform:translateY(-14px) scale(.8)}}
.mcg-or .mcorx-cadre{margin-top:14px}
.mcg-or-nom{margin-top:16px!important;font-size:clamp(1.5rem,6vw,2.3rem)!important}
.mcg-or-desc{display:inline-block;max-width:44ch;margin:10px auto 0;padding:8px 14px;border-radius:14px;font-size:.92rem;line-height:1.45;color:#F3ECFF;
  background:rgba(11,14,19,.35);box-shadow:inset 0 0 0 1.5px rgba(255,210,62,.4)}
.mcg-or-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px auto 0;max-width:440px}
.mcg-or-t{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 10px;border-radius:16px;color:#fff;text-align:center;
  background:linear-gradient(165deg,var(--a),var(--b));box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:mcfEntre .45s var(--mcf-res,ease) backwards;animation-delay:calc(.5s + var(--i)*90ms)}
.mcg-or-t.bleu{--a:#4C8EEC;--b:#153E8C}.mcg-or-t.vert{--a:#4FD68A;--b:#0B6B3F}.mcg-or-t.or{--a:#FFD23E;--b:#B8800A}.mcg-or-t.violet{--a:#D79BFF;--b:#5A2590}
.mcg-or-ico{display:flex;justify-content:center;align-items:center;gap:3px;height:34px}
.mcg-or-ico>svg{height:32px;width:auto}
.mcg-or-ronds{display:flex;gap:3px}
.mcg-or-t small{font-family:var(--display);font-weight:800;font-size:.74rem;opacity:.95}
.mcg-or-t b{font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1.15;text-shadow:var(--mcg-contour)}
.mcg-or-sceau{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:16px auto 0;padding:9px 18px 9px 9px;border-radius:18px;text-align:left;color:#2A1C00;
  background:linear-gradient(180deg,#FFF0B8,#FFD23E);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:mcfEntre .5s var(--mcf-res,ease) .9s backwards}
.mcg-or-sceau-v{flex:none;width:58px;height:58px}
.mcg-or-sceau-v svg{display:block;width:100%;height:100%}
.mcg-sceau-r{transform-origin:40px 40px;animation:mcgTourne 16s linear infinite}
.mcg-or-sceau small{display:block;font-family:var(--display);font-weight:800;font-size:.74rem}
.mcg-or-sceau b{display:block;font-family:var(--display);font-weight:900;font-size:1.15rem}
.mcg-or-sceau span{display:block;font-family:var(--display);font-weight:700;font-size:.8rem}
.mcg-or-btns{margin-top:16px}

/* — Doublon requis — */
.box.mcg-dbl-boite{color:#fff;background:linear-gradient(170deg,#4C8EEC 0%,#2B62C4 46%,#153E8C 100%)!important;max-width:min(460px,94vw)}
.box.mcg-dbl-boite .mc-head h3{margin:0 auto 0 0;font-family:var(--display);font-weight:900;color:#FFCE00;text-shadow:var(--mcg-contour)}
.box.mcg-dbl-boite .mc-head .btn{color:#0B0E13;background:linear-gradient(180deg,#FFE680,#FFC21A);border:0;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mcg-dbl{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 0 6px;text-align:center}
.mcg-dbl-pour{padding:5px 14px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.9rem;background:rgba(11,14,19,.3)}
.mcg-dbl-duo{display:flex;align-items:center;justify-content:center;gap:10px}
.mcg-dbl .mcg-dbl-c1{width:128px!important;flex:none;transform:rotate(-5deg);animation:mcgDblC1 .6s var(--mcf-res,ease) both}
@keyframes mcgDblC1{from{opacity:0;transform:translateY(20px) rotate(-12deg) scale(.85)}}
.mcg-dbl-c1.absente{filter:grayscale(1) brightness(.75)}
.mcg-dbl-plus{font-family:var(--display);font-weight:900;font-size:2.2rem;color:#FFCE00;text-shadow:var(--mcg-contour)}
.mcg-dbl-c2{flex:none;width:128px;aspect-ratio:100/140;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:14px;
  border:3px dashed #FFE680;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.09) 0 10px,transparent 10px 20px),rgba(11,14,19,.3);
  transform:rotate(5deg);animation:mcgDblC2 1.8s ease-in-out infinite}
.mcg-dbl-c2 b{font-family:var(--display);font-weight:900;font-size:3.2rem;line-height:1;color:#FFCE00;text-shadow:var(--mcg-contour)}
.mcg-dbl-c2 small{font-family:var(--display);font-weight:800;font-size:.82rem}
@keyframes mcgDblC2{50%{transform:rotate(5deg) translateY(-7px)}}
.mcg-dbl-compte{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:16px;font-family:var(--display);font-weight:800;color:#0B0E13;
  background:linear-gradient(180deg,#FFE680,#FFC21A);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcg-dbl-compte b{font-weight:900;font-size:1.15rem}.mcg-dbl-compte b.ko{color:#C8102E}.mcg-dbl-compte b.ok{color:#0B6B3F}
@media (max-width:420px){ .mcg-dbl .mcg-dbl-c1,.mcg-dbl-c2{width:108px!important} }
@media (prefers-reduced-motion:reduce){ .mcg-lx-m,.mcg-lx-h,.mcg-feu-r,.mcg-feu-v,.mcg-sceau-r,.mcg-dbl-c2,.mcg-or-t,.mcg-or-sceau,.mcg-or-ruban{animation:none!important} }
/* @@ fin metrocity_quais.css @@ */
/* @@ debut jeux_plaques.css @@ */
/* ==========================================================================
   PLAQUES ÉMAILLÉES, ANALYSE DE LIGNE, DÉGRADÉS DES JEUX
   ========================================================================== */
:root{--pxp-k:#0B0E13;--pxp-bleu:#153E8C;--pxp-res:cubic-bezier(.3,1.5,.5,1);
  --pxp-contour:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13}

/* — 1. la plaque émaillée : bleu, filet blanc, deux rivets — */
.pxp-plaque,
.ap--tier .section>.panneau,.ap--tier .section>.hint,.ap--tier .tl-sauv>.hint,
.ap--ligne .panneau.lp-sec{position:relative;display:block;width:max-content;max-width:calc(100% - 12px);margin:30px auto 16px!important;
  padding:10px 38px 12px!important;border-radius:12px!important;text-align:center;
  font-family:var(--display)!important;font-weight:900!important;font-size:clamp(1.15rem,3.6vw,1.5rem)!important;letter-spacing:.01em!important;
  text-transform:none!important;line-height:1.15!important;color:#fff!important;-webkit-text-fill-color:#fff;background:var(--pxp-bleu)!important;
  box-shadow:inset 0 0 0 3px var(--pxp-bleu),inset 0 0 0 5px #fff,0 0 0 3px var(--pxp-k),0 6px 0 3px var(--pxp-k)!important;
  animation:pxpPlaque .55s var(--pxp-res) both}
.pxp-plaque>span{display:block}
.pxp-plaque::before,.pxp-plaque::after,
.ap--tier .section>.panneau::before,.ap--tier .section>.panneau::after,.ap--tier .section>.hint::before,.ap--tier .section>.hint::after,
.ap--tier .tl-sauv>.hint::before,.ap--tier .tl-sauv>.hint::after,
.ap--ligne .panneau.lp-sec::before,.ap--ligne .panneau.lp-sec::after{content:""!important;position:absolute!important;top:50%!important;left:auto;right:auto;
  width:8px!important;height:8px!important;margin:-4px 0 0!important;border-radius:50%!important;background:#C9D1DA!important;
  box-shadow:0 0 0 1.6px var(--pxp-k)!important;display:block!important;transform:none!important;animation:none!important}
.pxp-plaque::before,.ap--tier .section>.panneau::before,.ap--tier .section>.hint::before,.ap--tier .tl-sauv>.hint::before,.ap--ligne .panneau.lp-sec::before{left:13px!important}
.pxp-plaque::after,.ap--tier .section>.panneau::after,.ap--tier .section>.hint::after,.ap--tier .tl-sauv>.hint::after,.ap--ligne .panneau.lp-sec::after{right:13px!important}
.ap--tier .section>.hint,.ap--tier .tl-sauv>.hint{font-size:clamp(1rem,3vw,1.2rem)!important;padding:8px 34px 9px!important}
@keyframes pxpPlaque{from{opacity:0;transform:translateY(-12px) rotate(-2.5deg) scale(.92)}}
/* la tier list : les sauvegardes et la barre centrées */
.ap--tier .tl-barre{justify-content:center}
.ap--tier .tl-sauv{text-align:center}
.ap--tier .tl-sauv>.mc-note{text-align:center}
.ap--tier .tl-sauv-g{justify-content:center}
.ap--tier .tl-sauv-c{text-align:center}
.ap--tier .tl-sauv-c .row{justify-content:center}

/* — 2. « Créez votre ligne » : la plaque accrochée au cadre, comme à l'accueil — */
.ap--ligne .panneau.lp-sec{z-index:3;margin:34px auto -22px!important}
.ap--ligne .panneau.lp-sec+*{padding-top:34px!important}
.ap--ligne .panneau.lp-sec+.lp-duo{padding-top:0!important;margin-top:34px}
.ap--ligne .panneau.lp-sec+.lp-duo>*:first-child{padding-top:30px!important}
/* les étiquettes : plus de petites capitales de machine à écrire */
.ap--ligne .lp-ident label>span,.ap--ligne .lp-sug-t,.ap--ligne .lp-pupitre>.hint,.ap--ligne .lp-saisie-t b{
  display:inline-flex!important;align-items:center;gap:6px;align-self:flex-start;width:max-content;margin:0 0 2px!important;padding:4px 12px 5px!important;border-radius:10px 10px 10px 3px!important;
  font-family:var(--display)!important;font-weight:900!important;font-size:.88rem!important;letter-spacing:0!important;text-transform:none!important;line-height:1.1!important;
  color:#0B0E13!important;background:linear-gradient(180deg,#FFE680,#FFC21A)!important;box-shadow:0 0 0 2px var(--pxp-k),0 3px 0 2px var(--pxp-k)!important}
.ap--ligne .lp-ident label>span::before,.ap--ligne .lp-sug-t::before,.ap--ligne .lp-pupitre>.hint::before,.ap--ligne .lp-saisie-t b::before{content:none!important;display:none!important}
.ap--ligne .lp-ident label:nth-of-type(2)>span{background:linear-gradient(180deg,#9AD4FF,#4C9BE6)!important}
.ap--ligne .lp-ident label.lp-ident-coul>span{background:linear-gradient(180deg,#FFB3E8,#FF4FD8)!important}
.ap--ligne .lp-sug-t{background:linear-gradient(180deg,#B8F0C9,#3ED07A)!important;margin:0 4px 0 0!important;align-self:center}
.ap--ligne .lp-pupitre>.hint{background:linear-gradient(180deg,#D8C6FF,#A98BEE)!important}
.ap--ligne .lp-saisie-t{justify-content:center}
.ap--ligne .lp-sug{justify-content:center}

/* — 3. l'analyse d'une ligne inventée — */
.pxp-fiche{margin-top:var(--sp-5);color:#fff;text-align:center}
.pxp-fiche>.pxp-plaque:first-child{margin-top:10px!important}
.pxp-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px 18px;border-radius:26px;
  background:radial-gradient(90% 60% at 50% 38%,color-mix(in srgb,var(--r) 70%,transparent),transparent 70%),linear-gradient(175deg,color-mix(in srgb,var(--r) 55%,#2B62C4),#132A5E 75%);
  box-shadow:0 0 0 3px var(--pxp-k),0 7px 0 3px var(--pxp-k);animation:pxpEntre .5s var(--pxp-res) both}
.pxp-rayons{position:absolute;left:50%;top:44%;z-index:-1;width:160%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,rgba(255,255,255,.12) 0 6deg,transparent 6deg 22deg);animation:pxpTourne 26s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 25%,transparent 66%);mask-image:radial-gradient(circle,#000 25%,transparent 66%)}
@keyframes pxpTourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
.pxp-scene{width:calc(100% + 32px);margin:0 -16px;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent)}
.pxp-scene svg{display:block;width:100%;height:auto;max-height:150px}
.pxp-rame{animation:pxpRoule 2.8s cubic-bezier(.25,.9,.3,1) both}
@keyframes pxpRoule{from{transform:translateX(-420px)}}
.pxp-med{width:118px;height:118px;margin-top:-34px;filter:drop-shadow(0 6px 0 rgba(11,14,19,.4));animation:pxpMed .7s var(--pxp-res) .5s both}
.pxp-med svg{display:block;width:100%;height:100%;overflow:visible}
.pxp-med-rayons{transform-origin:60px 60px;animation:pxpTourneSvg 9s linear infinite}
@keyframes pxpTourneSvg{to{transform:rotate(360deg)}}
@keyframes pxpMed{from{opacity:0;transform:scale(.2) rotate(-90deg)}}
.pxp-note{display:inline-flex;align-items:baseline;gap:6px;padding:6px 20px 8px;border-radius:18px;color:var(--pxp-k);
  background:linear-gradient(180deg,#FFE680,#FFC21A);box-shadow:0 0 0 3px var(--pxp-k),0 5px 0 3px var(--pxp-k);animation:pxpEntre .5s var(--pxp-res) .7s both}
.pxp-note b{font-family:var(--display);font-weight:900;font-size:clamp(2rem,8vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.pxp-note small{font-family:var(--display);font-weight:900;font-size:1.15rem}
.pxp-nom{display:flex;align-items:center;justify-content:center;gap:10px;max-width:100%}
.pxp-nom b{font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,4.4vw,1.6rem);line-height:1.1;text-shadow:var(--pxp-contour);overflow-wrap:anywhere}
.pxp-past{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:var(--display);font-weight:900;font-size:1.05rem;
  box-shadow:0 0 0 3px var(--pxp-k),0 3px 0 3px var(--pxp-k)}
.pxp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pxp-chips span{padding:5px 12px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.85rem;color:var(--pxp-k);background:var(--k);
  box-shadow:0 0 0 2px var(--pxp-k),0 3px 0 2px var(--pxp-k);animation:pxpEntre .45s var(--pxp-res) backwards;animation-delay:calc(.9s + var(--i)*.1s)}
.pxp-bulle{position:relative;max-width:46ch;margin:6px auto 0;padding:10px 16px;border-radius:16px;font-family:var(--display);font-weight:800;font-size:.98rem;line-height:1.35;
  color:var(--pxp-k);background:linear-gradient(180deg,#FFF6D0,#FFE680);box-shadow:0 0 0 2.5px var(--pxp-k),0 4px 0 2.5px var(--pxp-k);animation:pxpEntre .5s var(--pxp-res) 1.1s both}
.pxp-bulle::before{content:"";position:absolute;left:50%;top:-9px;width:16px;height:16px;margin-left:-8px;background:#FFF6D0;transform:rotate(45deg);box-shadow:-2.5px -2.5px 0 0 var(--pxp-k)}
.pxp-plan{overflow-x:auto;border-radius:18px;background:linear-gradient(180deg,#2B62C4,#153E8C);
  box-shadow:inset 0 0 0 3px #153E8C,inset 0 0 0 5px rgba(255,255,255,.85),0 0 0 3px var(--pxp-k),0 6px 0 3px var(--pxp-k)}
.pxp-plan svg{display:block}
.pxp-plan-trait{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:pxpTrait 1.6s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes pxpTrait{to{stroke-dashoffset:0}}
.pxp-plan-st{animation:pxpEntre .45s var(--pxp-res) backwards;animation-delay:calc(.25s + var(--i)*45ms)}
.pxp-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:860px){ .pxp-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pxp-t{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:14px 14px 12px;border-radius:20px;
  color:#fff;text-align:left;background:radial-gradient(120% 110% at 100% 0%,color-mix(in srgb,#fff 26%,transparent),transparent 55%),linear-gradient(165deg,var(--a),var(--b));
  box-shadow:0 0 0 2.5px var(--pxp-k),0 5px 0 2.5px var(--pxp-k);animation:pxpEntre .5s var(--pxp-res) backwards;animation-delay:calc(.2s + var(--i)*.1s)}
.pxp-t{align-items:center;text-align:center}
.pxp-t .mc-info-art{position:relative!important;right:auto!important;top:auto!important;width:88px;height:64px;margin:-2px auto 0;z-index:0}
.pxp-t:hover .mc-info-art{transform:translateY(-4px) rotate(-6deg) scale(1.08)}
.pxp-t-lab{display:inline-flex;align-items:center;justify-content:center;gap:4px;max-width:100%;padding:4px 6px 4px 11px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.85rem;
  background:rgba(11,14,19,.36);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.pxp-t-lab .mcf-i{width:22px;height:22px;margin-left:2px;font-size:.85rem}
.pxp-t-ligne{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:auto}
.pxp-tr{text-align:left}
@media (max-width:420px){ .pxp-t-lab{font-size:.78rem;padding:4px 5px 4px 9px} .pxp-t-val{font-size:1.75rem} }
.pxp-t-val{font-family:var(--display);font-weight:900;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums;text-shadow:var(--pxp-contour)}
.pxp-t-ligne small{font-family:var(--display);font-weight:900;font-size:1rem;opacity:.9}
.pxp-t-barre{width:100%;height:12px;border-radius:8px;overflow:hidden;background:rgba(11,14,19,.4);box-shadow:inset 0 0 0 1.5px rgba(11,14,19,.5)}
.pxp-t-barre i{display:block;height:100%;width:var(--u);border-radius:8px;background:repeating-linear-gradient(-45deg,var(--v) 0 8px,color-mix(in srgb,var(--v) 75%,#fff) 8px 16px);
  animation:pxpBarre 1.2s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.5s + var(--i)*.12s)}
@keyframes pxpBarre{from{width:0}}
.pxp-t-v{padding:3px 11px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.8rem;color:var(--pxp-k);background:var(--v);box-shadow:0 0 0 2px var(--pxp-k)}
.pxp-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.pxp-col{min-height:0;gap:8px}
.pxp-col .pxp-t-lab{margin-bottom:4px}
.pxp-tr{display:flex;flex-direction:column;gap:2px;width:100%;padding:8px 12px;border-radius:14px;background:rgba(11,14,19,.32);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);
  animation:pxpEntre .4s var(--pxp-res) backwards;animation-delay:calc(.5s + var(--k)*.08s)}
.pxp-tr b{font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1.2}
.pxp-tr small{font-family:var(--display);font-weight:700;font-size:.8rem;opacity:.9}
@keyframes pxpEntre{from{opacity:0;transform:translateY(16px) scale(.96)}}

/* — 4. Débutant et Avancé : la liste ne monte plus sur l'image — */
:is(.ap--debutant,.ap--avance) .ap-jeux{padding-top:44px!important}

/* — 5. les bandeaux de consigne prennent le dégradé de leur jeu — */
:is(.ap--debutant,.ap--avance) .ap-stage h3.stage-title,
:is(.ap--debutant,.ap--avance) .pxj-q{
  background:linear-gradient(180deg,color-mix(in srgb,var(--g,#FFCE00) 32%,#FFF8E6) 0%,color-mix(in srgb,var(--g,#FFCE00) 62%,#FFF8E6) 55%,color-mix(in srgb,var(--g,#FFCE00) 86%,#FFF8E6) 100%)!important}
:is(.ap--debutant,.ap--avance) .pxj-q-ico{background:color-mix(in srgb,var(--g,#FFCE00) 80%,#fff)!important}
/* l'image du haut : départ et arrivée */
:is(.ap--debutant,.ap--avance) .px-billet{background:linear-gradient(170deg,color-mix(in srgb,var(--g) 30%,#FFF8E6),color-mix(in srgb,var(--g) 70%,#FFF8E6))!important}
/* « Votre trajet » */
.ap--avance .pxj-av-feuille{background:linear-gradient(175deg,color-mix(in srgb,var(--g) 26%,#FFF8E6),color-mix(in srgb,var(--g) 58%,#FFF8E6))!important}
/* À vue d'œil : chaque niveau dans sa couleur */
.ekx-mode{background:linear-gradient(170deg,color-mix(in srgb,var(--c) 30%,#FFF8E6) 0%,color-mix(in srgb,var(--c) 72%,#FFF8E6) 100%)!important}

/* — 6. l'écran de victoire des jeux Débutant et Avancé — */
.pxp-fin{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:0 0 10px!important;background:none!important;box-shadow:none!important}
.pxp-fin-scene{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:560px;height:250px;border-radius:24px;
  background:radial-gradient(70% 70% at 50% 45%,color-mix(in srgb,var(--fc) 75%,#fff),color-mix(in srgb,var(--fc) 70%,#132A5E) 70%,#132A5E);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;animation:pxpEntre .5s var(--pxp-res) both}
.pxp-fin-rayons{position:absolute;left:50%;top:42%;z-index:-1;width:170%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,rgba(255,255,255,.22) 0 7deg,transparent 7deg 22deg);animation:pxpTourne 18s linear infinite;
  -webkit-mask-image:radial-gradient(circle,#000 22%,transparent 64%);mask-image:radial-gradient(circle,#000 22%,transparent 64%)}
.pxp-feu{position:absolute;width:0;height:0;z-index:0}
.pxp-feu i{position:absolute;left:-3px;top:-3px;width:6px;height:16px;border-radius:3px;background:var(--fcol);box-shadow:0 0 0 1.5px #0B0E13;
  transform:rotate(var(--a)) translateY(0) scaleY(.2);opacity:0;animation:pxpFeu 2.4s ease-out infinite;animation-delay:calc(.6s + var(--k)*.55s)}
@keyframes pxpFeu{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scaleY(.2)}12%{opacity:1}60%{opacity:1;transform:rotate(var(--a)) translateY(-46px) scaleY(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-60px) scaleY(.4)}}
.pxp-fin-coupe{position:absolute;left:50%;top:16px;z-index:2;width:118px;margin-left:-59px;animation:pxpCoupe .9s cubic-bezier(.3,1.6,.5,1) 1.1s both}
.pxp-fin-coupe svg{display:block;width:100%;height:auto}
@keyframes pxpCoupe{0%{opacity:0;transform:translateY(-160px) rotate(-12deg)}60%{opacity:1}100%{transform:none}}
.pxp-fin-med{position:absolute;top:44px;z-index:1;width:62px}
.pxp-fin-med svg{display:block;width:100%;height:auto}
.pxp-fin-med.g{left:calc(50% - 128px);transform-origin:50% 0;animation:pxpMedG .6s var(--pxp-res) 1.5s both,pxpBalance 3s ease-in-out 2.2s infinite}
.pxp-fin-med.d{right:calc(50% - 124px);transform-origin:50% 0;animation:pxpMedG .6s var(--pxp-res) 1.7s both,pxpBalance 3s ease-in-out 2.6s infinite reverse}
@keyframes pxpMedG{from{opacity:0;transform:scale(.2)}}
@keyframes pxpBalance{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.pxp-fin-voie{position:absolute;left:0;right:0;bottom:0;z-index:3}
.pxp-fin-voie svg{display:block;width:100%;height:auto}
.pxp-fin-rame{animation:pxpFinRame 1.2s cubic-bezier(.2,.7,.3,1) both}
@keyframes pxpFinRame{from{transform:translateX(-430px)}}
.pxp-fin-ruban-g{transform-origin:262px 18px;animation:pxpRubanG .7s ease-in .95s forwards}
.pxp-fin-ruban-d{transform-origin:330px 18px;animation:pxpRubanD .7s ease-in .95s forwards}
@keyframes pxpRubanG{to{transform:rotate(70deg)}}
@keyframes pxpRubanD{to{transform:rotate(-70deg)}}
.pxp-fin .pxp-fin-titre{margin:18px auto 10px!important;font-size:clamp(1.4rem,5vw,1.9rem)!important;animation:pxpPlaque .6s var(--pxp-res) 1.3s both}
.pxp-fin.perdu .pxp-fin-titre{animation-delay:0s}
.pxp-fin-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(560px,100%)}
.pxp-fin-t{flex:1 1 130px;max-width:180px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px 10px;border-radius:18px;color:#fff;
  background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(165deg,var(--a),var(--b));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:pxpEntre .5s var(--pxp-res) backwards;animation-delay:calc(1.5s + var(--i)*.12s)}
.pxp-fin.perdu .pxp-fin-t{animation-delay:calc(.2s + var(--i)*.1s)}
.pxp-fin-t b{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1.05;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.pxp-fin-t small{font-family:var(--display);font-weight:800;font-size:.82rem;opacity:.95}
.pxp-fin-btns{margin-top:14px}

/* — 7. le Quiz : la correction en grande carte de couleur, avec le contrôleur — */
.ap--avance .pxj-quiz-pan,.ap--debutant .pxj-quiz-pan{background:linear-gradient(180deg,color-mix(in srgb,var(--g,#C04191) 16%,#FFF8E6),color-mix(in srgb,var(--g,#C04191) 38%,#FFF8E6))!important}
.pxj-quiz-why{position:relative;display:grid!important;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:12px;width:min(640px,100%);margin:4px auto 0;
  padding:12px 16px 12px 10px;border-radius:22px;color:#fff;background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(170deg,var(--a),var(--b));
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.pxj-quiz-why.ok{--a:#5BE08C;--b:#0E8A4A}.pxj-quiz-why.ko{--a:#FF8A7A;--b:#C8102E}
.pxj-quiz-why::after{content:"";position:absolute;right:-10px;top:-14px;width:46px;height:46px;border-radius:50%;
  background:#fff center/62% no-repeat;box-shadow:0 0 0 3px #0B0E13,0 4px 0 3px #0B0E13;animation:pxjTampon .6s var(--pxj-res,ease) .2s both}
.pxj-quiz-why.ok::after{background-color:#FFCE00;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%230B0E13' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pxj-quiz-why.ko::after{background-color:#FFCE00;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10M17 7L7 17' fill='none' stroke='%230B0E13' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.pxj-quiz-agent{width:100px!important;align-self:end;transform-origin:50% 100%}
.pxj-quiz-why.ok .pxj-quiz-agent{animation:pxpAgentOk 1s cubic-bezier(.3,1.6,.5,1) .1s both,pxpAgentSaute 1.6s ease-in-out 1.2s infinite}
.pxj-quiz-why.ko .pxj-quiz-agent{animation:pxpAgentKo .8s ease-in-out .1s both}
@keyframes pxpAgentOk{from{opacity:0;transform:translateY(30px) scale(.7)}}
@keyframes pxpAgentSaute{0%,60%,100%{transform:none}75%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes pxpAgentKo{0%{opacity:0;transform:translateY(20px)}30%{opacity:1;transform:none}45%{transform:rotate(-7deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}100%{transform:none}}
.pxj-quiz-bulle{padding:0!important;background:none!important;box-shadow:none!important;text-align:left;color:#fff!important}
.pxj-quiz-bulle::before,.pxj-quiz-bulle::after{display:none!important}
.pxj-quiz-why .pxj-quiz-bulle b{font-size:clamp(1.15rem,4vw,1.4rem)!important;color:#fff!important;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.pxj-quiz-why .pxj-quiz-bulle p{margin-top:6px!important;padding:8px 12px;border-radius:12px;color:#fff!important;background:rgba(11,14,19,.28);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
@media (max-width:420px){ .pxj-quiz-why{grid-template-columns:76px minmax(0,1fr)} .pxj-quiz-agent{width:76px!important} }

/* — 8. les cartes de verdict prennent leur couleur ; « Reconnaître » ne se chevauche plus — */
.pxj-v{background:linear-gradient(180deg,color-mix(in srgb,var(--vc) 22%,#FFF8E6),color-mix(in srgb,var(--vc) 50%,#FFF8E6))!important}
.pxj-v-txt p{color:#2A2F38!important}
.pxj-im-rep{margin:18px auto 8px!important}

/* — 9. les en-têtes des jeux, centrés — */
:is(.ap--debutant,.ap--avance) .ap-ban-txt{text-align:center}
:is(.ap--debutant,.ap--avance) .ap-ban-txt .px-ban-pied{justify-content:center}
:is(.ap--debutant,.ap--avance) .gamebar{justify-content:center;flex-wrap:wrap}
/* le choix du niveau : la carte seule sur sa ligne reste au centre */
.ap-pick-grille{display:flex!important;flex-wrap:wrap;justify-content:center!important}
.ap-pick-grille>.ap-diff{flex:1 1 200px;max-width:260px}
@media (max-width:560px){ .ap-pick-grille>.ap-diff{flex:1 1 100%;max-width:300px} }
.ap-pick-tete{justify-content:center}

/* — 10. « Créez votre ligne » : N° et Couleur prennent la couleur choisie — */
.ap--ligne .lp-ident label:nth-of-type(2)>span,.ap--ligne .lp-ident label.lp-ident-coul>span{
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,#3E8FD4) 45%,#fff),color-mix(in srgb,var(--c,#3E8FD4) 72%,#fff))!important}

@media (prefers-reduced-motion:reduce){
  .pxp-fin-rayons,.pxp-feu i,.pxp-fin-coupe,.pxp-fin-med,.pxp-fin-rame,.pxp-fin-ruban-g,.pxp-fin-ruban-d,.pxp-fin-t,.pxj-quiz-agent,.pxj-quiz-why::after{animation:none!important}
  .pxp-plaque,.ap--tier .section>.panneau,.ap--tier .section>.hint,.ap--tier .tl-sauv>.hint,.ap--ligne .panneau.lp-sec,
  .pxp-hero,.pxp-rayons,.pxp-rame,.pxp-med,.pxp-med-rayons,.pxp-note,.pxp-chips span,.pxp-bulle,.pxp-plan-trait,.pxp-plan-st,.pxp-t,.pxp-t-barre i,.pxp-tr{animation:none!important}
  .pxp-plan-trait{stroke-dashoffset:0}
}
/* @@ fin jeux_plaques.css @@ */
/* @@ debut runner_refonte.css @@ */
/* ==========================================================================
   METRO RUNNER — LA REFONTE (accueil, vestiaire, fin de course)
   Fond rouge vif du jeu, cases de couleur cernées de noir avec leur dessin,
   plaques émaillées, gros boutons jaunes qui s'enfoncent.
   ========================================================================== */
.rnr-racine{--k:#0B0E13;--bl:#153E8C;--j:#FFCE00;--res:cubic-bezier(.3,1.5,.5,1);--doux:cubic-bezier(.2,.8,.2,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --cont2:2.6px 0 #0B0E13,-2.6px 0 #0B0E13,0 2.6px #0B0E13,0 -2.6px #0B0E13,1.8px 1.8px #0B0E13,-1.8px -1.8px #0B0E13,1.8px -1.8px #0B0E13,-1.8px 1.8px #0B0E13,0 5px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35)}
/* l'enveloppe du site s'efface : chaque écran apporte sa propre carte */
.rnr-racine .ap-ban,.rnr-racine .ap-mascotte{display:none!important}
.rnr-racine .ap-cadre{margin-top:6px!important}
.rnr-racine .ap-stage{padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.rnr-racine .ap-stage::before{display:none!important}
.rnr-racine .section{padding-bottom:0!important}

/* ————————————————————————————————— l'accueil ————————————————————————————————— */
.rnr-racine .rn-accueil.rnr{position:relative;isolation:isolate;overflow:clip;text-align:center;padding:14px 14px 30px;border-radius:28px;color:#fff;
  background:radial-gradient(90% 30% at 50% 0,rgba(255,214,90,.42),transparent 70%),
    linear-gradient(180deg,#F23A45,#C8162F 34%,#951034 70%,#62102F);
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k)}
/* en filigrane : des portails et des tickets qui défilent doucement */
.rnr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M30 96V60q0-26 26-26t26 26v36'/%3E%3Cpath d='M140 206v-36q0-26 26-26t26 26v36'/%3E%3C/g%3E%3Cg fill='white'%3E%3Crect x='130' y='40' width='54' height='32' rx='5' transform='rotate(-14 157 56)'/%3E%3Crect x='24' y='150' width='54' height='32' rx='5' transform='rotate(10 51 166)'/%3E%3Ccircle cx='110' cy='120' r='6'/%3E%3Ccircle cx='200' cy='110' r='4'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px;
  animation:rnrDerive 50s linear infinite}
@keyframes rnrDerive{to{background-position:220px 440px}}
.rnr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;z-index:-1;pointer-events:none;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/300px 50px}
.rnr-svg{display:inline-grid;place-items:center}
.rnr-svg svg,.rnr-chip-i svg,.rnr-r-art svg,.rnr-o-art svg,.rnr-porte-i svg,.rnr-go-i svg,.rnr-bt-i svg,.rnr-bourse-i svg,.rnr-collec-i svg,.rnr-aff-jouer svg,.rnr-fin-coeur svg{display:block;width:100%;height:100%;overflow:visible}

/* — la grande scène — */
.rnr-hero{position:relative;height:clamp(270px,78vw,470px);border-radius:24px;overflow:hidden;background:#1A1626;
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);margin:8px 8px 0;animation:rnrZoom .6s var(--res) both}
@keyframes rnrZoom{from{opacity:0;transform:scale(.92) rotate(-1deg)}}
.rnr-hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.rnr-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,8,30,.55),transparent 34%,transparent 74%,rgba(40,8,30,.45))}
.rnr-hero-haut{position:absolute;z-index:1;left:12px;right:12px;top:10px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rnr-titre{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;
  font-size:clamp(2rem,10vw,3.6rem);letter-spacing:.01em;color:#fff;text-shadow:var(--cont2);text-align:left}
.rnr-titre span{animation:rnrTitre .6s var(--res) both}
.rnr-titre span:nth-child(2){color:var(--j);animation-delay:.1s}
.rnr-titre em{margin-top:8px;padding:3px 12px 4px;border-radius:9px;font-style:normal;font-size:.32em;letter-spacing:.06em;color:#fff;background:var(--bl);text-shadow:none;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);transform:rotate(-4deg);animation:rnrTampon .7s var(--res) .35s both}
@keyframes rnrTitre{from{opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.8)}}
@keyframes rnrTampon{0%{opacity:0;transform:scale(2) rotate(-20deg)}60%{opacity:1;transform:scale(.9) rotate(-2deg)}100%{transform:rotate(-4deg)}}
.rnr-regles{flex:none;display:grid!important;place-items:center;width:54px;height:54px;padding:9px!important;border:0;border-radius:16px;cursor:pointer;
  background:var(--j)!important;box-shadow:var(--cadre);transition:transform .25s var(--res);animation:rnrPop .5s var(--res) .4s both}
.rnr-regles:hover{transform:translateY(-3px) rotate(-6deg)}
.rnr-regles:active{transform:translateY(3px)}
.rnr-hero-bas{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:8px}
.rnr-chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 4px;border-radius:999px;background:var(--bl);color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.9),0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);animation:rnrPop .5s var(--res) .5s both}
.rnr-chip+.rnr-chip{animation-delay:.6s}
.rnr-chip-i{width:30px;height:30px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--j);box-shadow:0 0 0 2px var(--k)}
.rnr-chip-i--t{padding:3px 2px}
.rnr-chip b{font-family:var(--display);font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums}
@keyframes rnrPop{from{opacity:0;transform:scale(.5) translateY(10px)}}

/* — les plaques émaillées des sections — */
.rnr-plaque{display:flex;justify-content:center;margin:30px auto 16px}
.rnr-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:var(--bl);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.05rem;line-height:1.2;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);animation:rnrPlaque .5s var(--res) both}
.rnr-plaque span::before,.rnr-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.rnr-plaque span::before{left:11px}.rnr-plaque span::after{right:11px}
@keyframes rnrPlaque{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}

/* — la règle en quatre cases — */
.rnr-regles-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 4px}
.rnr-r{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 12px;border-radius:18px;
  background:linear-gradient(165deg,var(--a),var(--b));box-shadow:var(--cadre);animation:rnrPop .5s var(--res) both;animation-delay:calc(.15s + var(--n)*80ms)}
.rnr-r-art{display:block;width:64px;height:64px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25));animation:rnrFlotte 3s ease-in-out infinite;animation-delay:calc(var(--n)*.4s)}
.rnr-r-art--l{width:96px;height:64px}
.rnr-r b{font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1.1;text-shadow:var(--cont)}
@keyframes rnrFlotte{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-3deg)}}

/* — les pastilles de ligne — */
.rnr-lignes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:4px 6px 6px}
.rnr-l{flex:none;display:grid!important;place-items:center;width:48px;height:48px;padding:0!important;border:0;border-radius:50%;cursor:pointer;
  background:var(--c)!important;color:var(--i,#fff)!important;font-family:var(--display);font-weight:900;font-size:1.05rem;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px #fff,0 0 0 7.5px var(--k),0 4px 0 7.5px var(--k);
  transition:transform .3s var(--res);animation:rnrPop .45s var(--res) both;animation-delay:calc(.2s + var(--n)*30ms)}
.rnr-l--long{font-size:.78rem}
.rnr-l:hover{transform:translateY(-4px) scale(1.08) rotate(-6deg)}
.rnr-l:active{transform:translateY(3px) scale(.95)}

/* — le bouton Départ — */
.rnr-go{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;gap:14px;width:min(520px,calc(100% - 16px));
  height:78px;margin:32px auto 6px;padding:0 20px!important;border:0;border-radius:22px;cursor:pointer;color:var(--k)!important;
  background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 8px 0 3px var(--k);transition:transform .2s var(--res),box-shadow .12s;
  animation:rnrPop .55s var(--res) .45s both}
.rnr-go::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:rnrReflet 3s ease-in-out 1.2s infinite}
@keyframes rnrReflet{0%,55%{left:-40%}100%{left:135%}}
.rnr-go-i{width:50px;height:50px;padding:12px 10px 12px 14px;box-sizing:border-box;border-radius:50%;background:var(--k);animation:rnrBat 1.6s ease-in-out 1s infinite}
@keyframes rnrBat{50%{transform:scale(1.12)}}
.rnr-go-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.rnr-go-t b{font-family:var(--display);font-weight:900;font-size:1.7rem;text-transform:uppercase;letter-spacing:.02em}
.rnr-go-t small{font-family:var(--display);font-weight:800;font-size:.8rem;margin-top:4px}
.rnr-go:hover{transform:translateY(-3px)}
.rnr-go:active{transform:translateY(6px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 2px 0 3px var(--k)}

/* — la voie où passent les rames — */
.rnr-defile{position:relative;height:74px;margin:26px -14px 0;overflow:hidden}
.rnr-defile::before{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;
  background:repeating-linear-gradient(90deg,#3A2C1E 0 12px,transparent 12px 22px) 0 5px/100% 7px no-repeat,#5E4630;
  box-shadow:inset 0 3px 0 #0B0E13}
.rnr-defile::after{content:"";position:absolute;left:0;right:0;bottom:15px;height:3px;background:#C9D2DC;box-shadow:0 -1.5px 0 #0B0E13}
.rnr-rame{position:absolute;bottom:13px;left:-180px;width:170px;animation:rnrRame 11s linear infinite;animation-delay:calc(var(--n)*-3.7s)}
.rnr-rame svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes rnrRame{from{left:-180px}to{left:calc(100% + 20px)}}

/* ————————————————————————————————— le vestiaire ————————————————————————————————— */
.rnr-racine .rvx.rnr-vest{margin-top:10px;padding:0 4px;background:none!important;box-shadow:none!important;border:0!important;color:#fff;text-align:left}
.rnr-racine .rvx.rnr-vest::before,.rnr-racine .rvx.rnr-vest::after{display:none!important}
.rnr-vest-tete{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.rnr-bourse{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 18px 0 6px;border-radius:999px;background:linear-gradient(180deg,#FFE45C,#FFB300);color:var(--k);
  box-shadow:var(--cadre)}
.rnr-bourse.bump{animation:rnrBump .6s var(--res)}
@keyframes rnrBump{30%{transform:scale(1.12) rotate(-3deg)}}
.rnr-bourse-i{width:46px;height:34px}
.rnr-bourse b{font-family:var(--display);font-weight:900;font-size:1.25rem;font-variant-numeric:tabular-nums}
.rnr-collec{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 5px;border-radius:999px;background:var(--bl);
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.9),var(--cadre)}
.rnr-collec-i{width:30px;height:30px}
.rnr-collec-j{width:70px;height:10px;border-radius:10px;background:#0B1A40;box-shadow:0 0 0 2px var(--k);overflow:hidden}
.rnr-collec-j i{display:block;height:100%;border-radius:10px;background:var(--j);transition:width .6s var(--doux)}
.rnr-collec b{font-family:var(--display);font-weight:900;font-size:.9rem;font-variant-numeric:tabular-nums}
.rnr-cabine{display:grid;gap:14px;margin-bottom:22px}
.rnr-scene{position:relative;height:clamp(200px,52vw,330px);border-radius:20px;overflow:hidden;background:#1A1626;
  box-shadow:0 0 0 3px var(--k),0 0 0 6.5px #5AB0FF,0 0 0 9px var(--k),0 8px 0 9px var(--k);margin:6px}
.rnr-scene .rvx-scene-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.rnr-scene .rvx-essai{position:absolute;left:10px;bottom:10px;z-index:1;display:none;align-items:center;gap:7px;padding:4px 12px 5px 5px;border-radius:999px;
  background:var(--bl);box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre)}
.rnr-scene .rvx-essai.on{display:inline-flex;animation:rnrPop .35s var(--res)}
.rnr-scene .rvx-essai small{padding:2px 8px;border-radius:999px;background:var(--j);color:var(--k);font-family:var(--display);font-weight:900;font-size:.7rem}
.rnr-scene .rvx-essai b{font-family:var(--display);font-weight:900;font-size:.88rem;color:#fff}
.rnr-porte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rnr-porte-l{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 10px 4px 4px;border-radius:14px;background:linear-gradient(100deg,var(--a),var(--b));box-shadow:var(--cadre)}
.rnr-porte-i{flex:none;width:40px;height:32px;padding:2px;border-radius:10px;background:rgba(255,255,255,.85);box-shadow:0 0 0 2px var(--k)}
.rnr-porte-l b{min-width:0;font-family:var(--display);font-weight:900;font-size:.8rem;line-height:1.15;color:#fff;text-shadow:var(--doucement);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rnr-porte-l--divin{background:linear-gradient(100deg,#FFE27A,#B98900)}
/* les rayons : six cases illustrées */
.rnr-onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 4px 22px}
.rnr-o{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px!important;border:0;border-radius:16px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 110% at 100% 0,color-mix(in srgb,var(--a) 48%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 60%,#2A0F1E),#250A18 80%)!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 45%,transparent),0 5px 0 2.5px var(--k);
  transition:transform .3s var(--res);animation:rnrPop .45s var(--res) both;animation-delay:calc(var(--n)*50ms)}
.rnr-o-art{width:62px;height:48px;transition:transform .3s var(--res)}
.rnr-o-t{font-family:var(--display);font-weight:900;font-size:.82rem;line-height:1.1;text-align:center;text-shadow:var(--doucement)}
.rnr-o-n{padding:1px 8px;border-radius:999px;background:rgba(11,14,19,.45);font-family:var(--display);font-weight:800;font-size:.68rem;font-variant-numeric:tabular-nums}
.rnr-o:hover{transform:translateY(-3px)}
.rnr-o:hover .rnr-o-art{transform:rotate(-6deg) scale(1.06)}
.rnr-o.on{transform:translateY(-4px);background:linear-gradient(165deg,var(--a),var(--b))!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 7px 0 7.5px var(--k)}
.rnr-o.on .rnr-o-t{text-shadow:var(--cont)}
.rnr-o.on .rnr-o-art{animation:rnrSaut .6s var(--res)}
.rnr-o.neuf::after{content:"";position:absolute;top:-5px;right:-5px;width:14px;height:14px;border-radius:50%;background:#FF5FD2;box-shadow:0 0 0 2.5px var(--k);animation:rnrBat 1.4s ease-in-out infinite}
@keyframes rnrSaut{35%{transform:translateY(-8px) rotate(-8deg) scale(1.12)}70%{transform:translateY(1px) rotate(3deg)}}
/* les cases : plus de description, un nom, une image, un prix */
.rnr-grille{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 14px!important}
.rnr-vest .rvx-desc{display:none!important}
.rnr-vest .rvx-c{background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--a) 55%,transparent),transparent 62%),
    linear-gradient(165deg,color-mix(in srgb,var(--b) 70%,#2A1030),#1E0C22 80%)}
.rnr-vest .rvx-vis{margin:8px 8px 0}
.rnr-vest .rvx-rar{font-family:var(--display);letter-spacing:0;text-transform:none;font-size:.66rem;font-weight:900}
.rnr-vest .rvx-corps{padding:8px 10px 12px;align-items:center;text-align:center}
.rnr-vest .rvx-nom{font-weight:900;font-size:.9rem;text-shadow:var(--doucement)}
.rnr-vest .rvx-pied{justify-content:center;padding-top:9px}
.rnr-vest .rvx-etat{font-family:var(--display);font-weight:900;background:#5AB0FF;color:#fff;text-shadow:var(--doucement)}
.rnr-vest .rvx-etat--on{background:#3ED07A;color:var(--k);text-shadow:none}
.rnr-acheter{background:linear-gradient(180deg,#FF5A4E,#C8162F)!important;animation:none!important}
.rnr-acheter:hover{transform:translateY(-2px)}
.rnr-manque{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%}
.rnr-manque .rvx-manque-j{width:100%}
.rnr-badge{position:absolute;top:8px;right:8px;z-index:3;display:none;padding:3px 10px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.68rem;line-height:1.2;
  box-shadow:0 0 0 2px var(--k),0 2px 0 2px var(--k)}
.rnr-badge.on{display:block;background:#3ED07A;color:var(--k)}
.rnr-badge.neuf{display:block;background:#FF5FD2;color:#fff;transform:rotate(6deg)}
/* la petite fête d'un achat, en surimpression */
.rnr-vol{position:fixed;z-index:980;width:40px;height:30px;pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.rnr-vol svg{display:block;width:100%;height:100%}
.rnr-conf{position:fixed;z-index:981;width:9px;height:9px;border-radius:2px;pointer-events:none;box-shadow:0 0 0 1.5px var(--k,#0B0E13)}
.rnr-tampon{position:absolute;left:50%;top:50%;z-index:5;padding:6px 16px 7px;border-radius:12px;pointer-events:none;white-space:nowrap;line-height:1;
  font-family:var(--display);font-weight:900;font-size:1.25rem;text-transform:uppercase;color:#fff;background:#3ED07A;
  text-shadow:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13;
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;animation:rnrTamponAchat 1.8s cubic-bezier(.3,1.5,.5,1) both}
@keyframes rnrTamponAchat{0%{opacity:0;transform:translate(-50%,-50%) scale(2.4) rotate(-24deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(.92) rotate(-8deg)}
  28%{transform:translate(-50%,-50%) scale(1) rotate(-8deg)}80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-8deg)}100%{opacity:0;transform:translate(-50%,-60%) scale(.9) rotate(-8deg)}}
.rnr-equipe{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);
  animation:rnrEquipe .7s ease-out both}
@keyframes rnrEquipe{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.4)}}
/* le Divin : en bas du rayon, son apparition au toucher */
.rnr-sanct{margin-top:10px}
.rnr-affiche{cursor:pointer;transition:transform .3s var(--res)}
.rnr-affiche:hover{transform:translateY(-4px) rotate(-.6deg)}
.rnr-affiche:focus-visible{outline:3px solid var(--j);outline-offset:4px}
.rnr-aff-jouer{position:absolute;right:10px;bottom:10px;z-index:4;width:48px;height:48px;padding:12px 10px 12px 14px;box-sizing:border-box;border-radius:50%;
  background:var(--j);box-shadow:var(--cadre);animation:rnrBat 1.6s ease-in-out infinite;pointer-events:none}
.rdv-joue .rnr-aff-jouer{display:none}
.rnr-sanct .rdv-cote{align-items:center;text-align:center}
.rnr-sanct .rdv-bts{justify-content:center}
.rnr-sanct .rdv-prix small{font-family:var(--display);letter-spacing:0;text-transform:none;font-weight:800}
@media (max-width:420px){ .rnr-bt{font-size:.95rem} }

/* ————————————————————————————————— la fin de course ————————————————————————————————— */
.rnr-racine .endcard.rnr-fin{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:560px;margin:0 auto;padding:12px 14px 22px;border-radius:28px;color:#fff;text-align:center;
  background:radial-gradient(90% 30% at 50% 0,rgba(255,214,90,.4),transparent 70%),linear-gradient(180deg,#F23A45,#C8162F 40%,#8A0F30);
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k);animation:rnrFinMonte .6s var(--res) both}
.rnr-racine .endcard.rnr-fin.perdu{background:radial-gradient(90% 30% at 50% 0,rgba(140,180,255,.3),transparent 70%),linear-gradient(180deg,#3A4C8C,#25306A 45%,#1A1F4A)}
@keyframes rnrFinMonte{from{opacity:0;transform:translateY(40px) scale(.94)}}
.rnr-fin-scene{position:relative;width:100%;height:clamp(190px,52vw,280px);border-radius:20px;overflow:hidden;isolation:isolate;background:#1A1626;
  box-shadow:0 0 0 3px var(--k),0 0 0 6.5px var(--j),0 0 0 9px var(--k),0 8px 0 9px var(--k);margin:6px 0 12px}
.rnr-fin.perdu .rnr-fin-scene{box-shadow:0 0 0 3px var(--k),0 0 0 6.5px #FF5A4E,0 0 0 9px var(--k),0 8px 0 9px var(--k)}
.rnr-fin-cv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .5s}
.rnr-fin-scene.fige{animation:rnrSecoue .45s ease-out}
.rnr-fin-scene.fige .rnr-fin-cv{filter:grayscale(.75) brightness(.7) sepia(.3) hue-rotate(-20deg)}
@keyframes rnrSecoue{20%{transform:translate(-6px,2px) rotate(-1deg)}40%{transform:translate(5px,-2px) rotate(1deg)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}
.rnr-fin-rayons{position:absolute;left:50%;top:44%;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:1;opacity:.28;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(#FFE27A 0 9deg,transparent 9deg 24deg);animation:rnrTourne 12s linear infinite}
@keyframes rnrTourne{to{transform:rotate(360deg)}}
.rnr-fin-coupe{position:absolute;left:50%;top:10px;z-index:2;width:92px;margin-left:-46px;animation:rnrCoupe .8s var(--res) .5s both}
.rnr-fin-coupe svg{display:block;width:100%;height:auto}
@keyframes rnrCoupe{0%{opacity:0;transform:translateY(-160px) rotate(-20deg)}60%{opacity:1;transform:translateY(8px) rotate(6deg)}100%{transform:none}}
.rnr-fin-tampon{position:absolute;left:50%;bottom:14px;z-index:3;padding:7px 18px 8px;border-radius:12px;white-space:nowrap;line-height:1;
  font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,6vw,1.8rem);text-transform:uppercase;color:#fff;background:#E3051C;text-shadow:var(--cont);
  box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--k),0 6px 0 3px var(--k);animation:rnrFinTampon .6s var(--res) .75s both}
.rnr-fin-tampon--or{background:var(--j);color:var(--k);text-shadow:none;animation-delay:1.1s}
@keyframes rnrFinTampon{0%{opacity:0;transform:translateX(-50%) scale(2.6) rotate(-25deg)}65%{opacity:1;transform:translateX(-50%) scale(.92) rotate(-7deg)}100%{transform:translateX(-50%) rotate(-6deg)}}
.rnr-fin-coeurs{position:absolute;left:0;right:0;top:12px;z-index:2;display:flex;justify-content:center;gap:12px;pointer-events:none}
.rnr-fin-coeur{width:40px;height:40px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));animation:rnrCoeur 1.2s ease-in both}
.rnr-fin-coeur:nth-child(2){animation-delay:.15s}.rnr-fin-coeur:nth-child(3){animation-delay:.3s}
@keyframes rnrCoeur{0%{opacity:0;transform:translateY(-30px) scale(.6)}30%{opacity:1;transform:none}70%{opacity:1;transform:translateY(10px) rotate(-14deg);filter:grayscale(0)}
  100%{opacity:.8;transform:translateY(14px) rotate(-18deg);filter:grayscale(1) drop-shadow(0 3px 0 rgba(0,0,0,.35))}}
.rnr-fin-plaque{display:flex;justify-content:center}
.rnr-fin-plaque span{position:relative;padding:7px 30px 9px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.25rem;color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);animation:rnrPlaque .55s var(--res) .4s both}
.rnr-fin-plaque span::before,.rnr-fin-plaque span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.rnr-fin-plaque span::before{left:11px}.rnr-fin-plaque span::after{right:11px}
.rnr-fin.gagne .rnr-fin-plaque span{background:var(--j);color:var(--k);box-shadow:inset 0 0 0 2px var(--j),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)}
.rnr-fin-score{display:block;margin-top:6px;font-family:var(--display);font-weight:900;font-size:clamp(3rem,15vw,4.4rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--j);text-shadow:var(--cont2);animation:rnrPop .5s var(--res) .6s both}
.rnr-fin-pts{margin-top:-4px;font-family:var(--display);font-weight:900;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.rnr-fin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:10px}
.rnr-fin-s{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 6px 9px;border-radius:16px;background:linear-gradient(165deg,var(--a),var(--b));
  box-shadow:var(--cadre);animation:rnrPop .5s var(--res) both;animation-delay:calc(1.2s + var(--n)*110ms)}
.rnr-fin-art{display:block;width:62px;height:46px}
.rnr-fin-art svg{display:block;width:100%;height:100%;overflow:visible}
.rnr-fin-s b{font-family:var(--display);font-weight:900;font-size:1.3rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:var(--cont)}
.rnr-fin-s small{font-family:var(--display);font-weight:800;font-size:.72rem;line-height:1.15;text-shadow:var(--doucement)}
.rnr-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-top:14px}
.rnr-bt{flex:1 1 140px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 10px!important;white-space:nowrap;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:1.05rem;color:#fff;background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);text-shadow:var(--cont);transition:transform .2s var(--res),box-shadow .1s}
.rnr-bt-i{width:28px;height:28px}
.rnr-bt:hover{transform:translateY(-2px)}
.rnr-bt:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}
.rnr-bt--or{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:var(--k);text-shadow:none}
.rnr-bt--rose{background:linear-gradient(180deg,#FF8CC0,#B8247A)!important}
.rnr-rang{flex:1 1 100%;display:flex;justify-content:center;align-items:center;height:40px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.95rem;
  color:var(--k);background:var(--j);box-shadow:var(--cadre)}

/* ————————————————————————————————— grands écrans ————————————————————————————————— */
@media (min-width:760px){
  .rnr-racine .rn-accueil.rnr{padding:20px 24px 36px}
  .rnr-regles-g{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .rnr-onglets{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rnr-grille{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important}
  .rnr-cabine{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
  .rnr-porte{grid-template-columns:1fr}
  .rnr-fin-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rnr-racine .endcard.rnr-fin{max-width:780px}
  .rnr-hero{margin:10px 10px 0}
}
@media (max-width:380px){
  .rnr-racine .rn-accueil.rnr{padding:12px 10px 26px}
  .rnr-regles-g{gap:10px}
  .rnr-l{width:44px;height:44px}
  .rnr-onglets{gap:9px}
  .rnr-grille{gap:12px 10px!important}
}
@media (prefers-reduced-motion:reduce){
  .rnr *,.rnr::before,.rnr-fin *,.rnr-tampon{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* @@ fin runner_refonte.css @@ */
/* @@ debut metrodrop_refonte.css @@ */
/* ==========================================================================
   MÉTRODROP — LE NOUVEL ACCUEIL, dans la famille de Snake et de Runner
   ========================================================================== */
.mdr{--k:#0B0E13;--bl:#153E8C;--j:#FFCE00;--res:cubic-bezier(.3,1.5,.5,1);--doux:cubic-bezier(.2,.8,.2,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --cont2:2.6px 0 #0B0E13,-2.6px 0 #0B0E13,0 2.6px #0B0E13,0 -2.6px #0B0E13,1.8px 1.8px #0B0E13,-1.8px -1.8px #0B0E13,1.8px -1.8px #0B0E13,-1.8px 1.8px #0B0E13,0 5px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35);
  position:relative;isolation:isolate;overflow:clip;padding:14px 14px 30px;border-radius:28px;color:#fff;text-align:center;font-family:var(--body);
  background:radial-gradient(90% 30% at 50% 0,rgba(255,236,120,.38),transparent 70%),
    linear-gradient(180deg,#22CDD3,#0FA3B1 34%,#0B7F95 70%,#0A5873);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
/* l'enveloppe du site s'efface quand l'accueil est là */
.ap:has(.ap-stage>.mdr) .ap-ban,.ap:has(.ap-stage>.mdr) .ap-mascotte{display:none!important}
.ap:has(.ap-stage>.mdr) .ap-cadre{margin-top:6px!important}
.ap-stage:has(>.mdr){padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.ap-stage:has(>.mdr)::before{display:none!important}
/* en filigrane : des voies et des pastilles qui défilent */
.mdr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M-10 50h80l30 30h130'/%3E%3Cpath d='M-10 170h60l40-40h140'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='70' cy='50' r='9'/%3E%3Ccircle cx='100' cy='80' r='9'/%3E%3Ccircle cx='90' cy='130' r='9'/%3E%3Crect x='150' y='150' width='40' height='26' rx='6'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px;
  animation:mdrDerive 55s linear infinite}
@keyframes mdrDerive{to{background-position:440px 220px}}
.mdr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;z-index:-1;pointer-events:none;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/300px 50px}
.mdr-svg,.mdr span[class$="-i"]{display:inline-grid;place-items:center}
.mdr :is(.mdr-svg,.mdr-fleche,.mdr-niv-i,.mdr-go-i,.mdr-st-i,.mdr-cmd-i,.mdr-cad,.mdr-prix-i,.mdr-bt-i,.mdr-bandeau-i) svg{display:block;width:100%;height:100%;overflow:visible}

/* — la grande scène — */
.mdr-hero{position:relative;height:clamp(230px,64vw,400px);margin:8px 8px 0;border-radius:24px;overflow:hidden;background:#D9CFB8;
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);animation:mdrZoom .6s var(--res) both}
@keyframes mdrZoom{from{opacity:0;transform:scale(.92) rotate(-1deg)}}
.mdr-hero .mdh-hero{position:absolute;inset:0;height:100%;margin:0;border-radius:0;box-shadow:none}
.mdr-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,40,60,.5),transparent 38%,transparent 72%,rgba(6,40,60,.35))}
.mdr-hero-haut{position:absolute;z-index:1;left:12px;right:12px;top:10px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mdr-titre{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;
  font-size:clamp(2rem,10vw,3.5rem);color:#fff;text-shadow:var(--cont2);text-align:left}
.mdr-titre span{animation:mdrTitre .6s var(--res) both}
.mdr-titre span:nth-child(2){color:var(--j);animation-delay:.1s}
@keyframes mdrTitre{from{opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.8)}}
.mdr-rond{flex:none;display:grid!important;place-items:center;width:54px;height:54px;padding:9px!important;border:0;border-radius:16px;cursor:pointer;
  background:var(--j)!important;box-shadow:var(--cadre);transition:transform .25s var(--res);animation:mdrPop .5s var(--res) .4s both}
.mdr-rond:hover{transform:translateY(-3px) rotate(-6deg)}
.mdr-rond:active{transform:translateY(3px)}
.mdr-hero-bas{position:absolute;z-index:1;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.mdr-puce{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--c);color:var(--t,#fff);font-family:var(--display);font-weight:900;font-size:1.15rem;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px #fff,0 0 0 7.5px var(--k),0 4px 0 7.5px var(--k);animation:mdrPop .5s var(--res) .45s both}
.mdr-niv{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 5px;border-radius:999px;background:var(--bl);
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.9),0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);animation:mdrPop .5s var(--res) .55s both}
.mdr-niv-i{width:30px;height:30px;padding:3px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--k)}
.mdr-niv b{font-family:var(--display);font-weight:900;font-size:.95rem}
.mdr-niv-j{display:block;width:62px;height:9px;border-radius:9px;background:#0B1A40;box-shadow:0 0 0 2px var(--k);overflow:hidden}
.mdr-niv-j i{display:block;height:100%;border-radius:9px;background:var(--j)}
@keyframes mdrPop{from{opacity:0;transform:scale(.5) translateY(10px)}}

/* — les plaques émaillées — */
.mdr-plaque{display:flex;justify-content:center;margin:30px auto 16px}
.mdr-plaque span{position:relative;display:inline-block;max-width:calc(100% - 20px);padding:7px 30px 8px;border-radius:10px;background:var(--bl);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.05rem;line-height:1.2;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);animation:mdrPlaque .5s var(--res) both}
.mdr-plaque span::before,.mdr-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.mdr-plaque span::before{left:11px}.mdr-plaque span::after{right:11px}
@keyframes mdrPlaque{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}

/* — le trajet — */
.mdr-trajet{position:relative;margin:0 4px;padding:14px 10px 12px;border-radius:22px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--lc) 40%,#1C6E8C),#0C4A66 80%);box-shadow:var(--cadre);animation:mdrPop .5s var(--res) .1s both}
.mdr-gares{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);align-items:center;gap:6px}
.mdr-gare{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:62px;padding:7px 8px 8px;border-radius:10px;background:var(--bl);
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre)}
.mdr-gare small{padding:1px 9px;border-radius:999px;background:rgba(255,255,255,.18);font-family:var(--display);font-weight:800;font-size:.66rem}
.mdr-gare b{font-family:var(--display);font-weight:900;font-size:.9rem;line-height:1.12}
.mdr-gare--next{background:var(--lc);color:var(--li);box-shadow:inset 0 0 0 2px var(--lc),inset 0 0 0 3.5px #fff,var(--cadre)}
.mdr-gare--next small{background:rgba(11,14,19,.25)}
.mdr-fleche{width:36px;height:36px;animation:mdrFleche 1.4s ease-in-out infinite}
@keyframes mdrFleche{50%{transform:translateX(4px)}}
.mdr-voie{position:relative;height:66px;margin:12px -10px 0;overflow:hidden}
.mdr-voie::before{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:repeating-linear-gradient(90deg,#3A2C1E 0 12px,transparent 12px 22px) 0 4px/100% 6px no-repeat,#5E4630;box-shadow:inset 0 3px 0 #0B0E13}
.mdr-voie::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:3px;background:#C9D2DC;box-shadow:0 -1.5px 0 #0B0E13}
.mdr-rame-vis{position:absolute;left:50%;bottom:11px;width:180px;margin-left:-90px;animation:mdrRameArrive 1.2s var(--doux) .2s both,mdrRameBerce 1.8s ease-in-out 1.4s infinite}
.mdr-rame-vis svg{display:block;width:100%;height:auto;overflow:visible}
@keyframes mdrRameArrive{from{transform:translateX(-120%)}}
@keyframes mdrRameBerce{50%{transform:translateY(-1.5px)}}
.mdr-trace{position:relative;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;margin:12px -4px 0;padding:10px 4px 4px}
.mdr-trace::-webkit-scrollbar{display:none}
.mdr-trace::before{content:"";position:absolute;left:0;right:0;top:19px;height:8px;border-radius:8px;background:rgba(11,14,19,.45)}
.mdr-trace-fait{position:absolute;top:19px;height:8px;border-radius:8px;background:var(--lc);box-shadow:0 0 0 2px var(--k);z-index:1}
.mdr-pt{position:relative;z-index:2;flex:none;width:78px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mdr-pt i{display:block;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--k)}
.mdr-pt.fait i{background:var(--lc)}
.mdr-pt.ici i{width:24px;height:24px;margin-top:-3px;background:var(--j);box-shadow:0 0 0 2.5px var(--k),0 0 0 6px rgba(255,206,0,.45);animation:mdrBat 1.4s ease-in-out infinite}
.mdr-pt.suivante i{box-shadow:0 0 0 2.5px var(--k),0 0 0 5px var(--lc)}
.mdr-pt span{font-family:var(--display);font-weight:800;font-size:.66rem;line-height:1.15;color:#fff;opacity:.85;text-shadow:var(--doucement)}
.mdr-pt.ici span{opacity:1;font-weight:900}
@keyframes mdrBat{50%{transform:scale(1.15)}}
.mdr-avance{display:inline-block;margin-top:8px;padding:3px 12px;border-radius:999px;background:rgba(11,14,19,.4);font-family:var(--display);font-weight:900;font-size:.76rem}

/* — le bouton du moment — */
.mdr-action{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:24px}
.mdr-bandeau{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:6px 16px 7px 6px;border-radius:999px;color:var(--k);
  background:linear-gradient(180deg,#7CF0AE,#3ED07A);box-shadow:var(--cadre);animation:mdrPop .5s var(--res) .2s both}
.mdr-bandeau-i{width:30px;height:30px;padding:3px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--k)}
.mdr-bandeau b{font-family:var(--display);font-weight:900;font-size:.95rem}
.mdr-bandeau small{font-family:var(--display);font-weight:800;font-size:.75rem}
.mdr-go{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;gap:14px;width:min(520px,calc(100% - 16px));height:78px;
  padding:0 20px!important;border:0;border-radius:22px;cursor:pointer;color:var(--k)!important;background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 8px 0 3px var(--k);transition:transform .2s var(--res),box-shadow .12s;animation:mdrPop .55s var(--res) .3s both}
.mdr-go::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:mdrReflet 3s ease-in-out 1.2s infinite}
@keyframes mdrReflet{0%,55%{left:-40%}100%{left:135%}}
.mdr-go-i{flex:none;width:50px;height:50px;padding:9px;box-sizing:border-box;border-radius:50%;background:var(--k);animation:mdrBat 1.6s ease-in-out 1s infinite}
.mdr-go-t{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1;text-align:left}
.mdr-go-t b{font-family:var(--display);font-weight:900;font-size:clamp(1.15rem,5.4vw,1.5rem);text-transform:uppercase;letter-spacing:.01em}
.mdr-go-t small{max-width:100%;margin-top:4px;font-family:var(--display);font-weight:800;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdr-go:hover{transform:translateY(-3px)}
.mdr-go:active{transform:translateY(6px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 2px 0 3px var(--k)}
.mdr-lien{border:0;background:rgba(11,14,19,.35);color:#fff;cursor:pointer;padding:6px 14px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.8rem}

/* — les chiffres — */
.mdr-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:26px 4px 0}
.mdr-st{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px 10px;border-radius:18px;background:linear-gradient(165deg,var(--a),var(--b));
  box-shadow:var(--cadre);animation:mdrPop .5s var(--res) both;animation-delay:calc(.2s + var(--n)*70ms)}
.mdr-st-i{width:42px;height:42px;padding:6px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--k)}
.mdr-st b{font-family:var(--display);font-weight:900;font-size:1.45rem;font-variant-numeric:tabular-nums;text-shadow:var(--cont);margin-top:4px}
.mdr-st small{font-family:var(--display);font-weight:800;font-size:.74rem;text-shadow:var(--doucement)}

/* — le tableau de bord — */
.mdr-cmds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 4px}
.mdr-cmd{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px 9px;border-radius:16px;color:#fff;
  background:linear-gradient(165deg,#2C5F7A,#173C55);box-shadow:var(--cadre);animation:mdrPop .45s var(--res) both;animation-delay:calc(var(--n)*35ms)}
.mdr-cmd-i{width:40px;height:40px;padding:5px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.18);box-shadow:0 0 0 2px var(--k)}
.mdr-cmd b{font-family:var(--display);font-weight:900;font-size:.74rem;line-height:1.12;text-shadow:var(--doucement)}
.mdr-cmd small{display:inline-flex;align-items:center;gap:3px;padding:1px 8px 1px 3px;border-radius:999px;background:rgba(11,14,19,.5);font-family:var(--display);font-weight:900;font-size:.66rem}
.mdr-cad{width:16px;height:16px}
.mdr-cmd:not(.on) .mdr-cmd-i{filter:grayscale(.8) brightness(.85)}
.mdr-cmd.on{background:linear-gradient(165deg,var(--a),var(--b))}
.mdr-cmd.on .mdr-cmd-i{background:#fff}

/* — le dépôt — */
.mdr-rames{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;margin:0 4px}
.mdr-rame{position:relative;display:flex!important;flex-direction:column;align-items:center;gap:5px;padding:8px 8px 10px!important;border:0;border-radius:18px;cursor:pointer;color:#fff;
  background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--c) 55%,transparent),transparent 62%),linear-gradient(165deg,#1E5F7C,#0E3A52 80%)!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--c) 45%,transparent),0 5px 0 2.5px var(--k);
  transition:transform .3s var(--res);animation:mdrPop .5s var(--res) both;animation-delay:calc(var(--n)*70ms)}
.mdr-rame:hover{transform:translateY(-4px) rotate(-.6deg)}
.mdr-rame:active{transform:translateY(3px)}
.mdr-rame.on{box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 6px 0 7.5px var(--k)}
.mdr-rame.non{animation:mdrNon .4s ease}
@keyframes mdrNon{25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.mdr-rame-img{width:100%;padding:14px 6px 8px;border-radius:12px;background:linear-gradient(180deg,#9ED8F0,#DDF2FA 70%);box-shadow:0 0 0 2px var(--k);overflow:hidden}
.mdr-rame-img svg{display:block;width:100%;height:auto;overflow:visible}
.mdr-rame.lock .mdr-rame-img svg{filter:saturate(.55) brightness(.9)}
.mdr-rame.on .mdr-rame-img svg{animation:mdrRameBerce 1.6s ease-in-out infinite}
.mdr-rame-nom{font-family:var(--display);font-weight:900;font-size:1rem;text-shadow:var(--cont)}
.mdr-note{display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;font-family:var(--display);font-weight:800;font-size:.68rem}
.mdr-note i{display:flex;gap:3px}
.mdr-note em{display:block;width:9px;height:9px;border-radius:3px;background:rgba(11,14,19,.45)}
.mdr-note em.on{background:var(--j);box-shadow:0 0 0 1.5px var(--k)}
.mdr-rame-etat{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:4px 12px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.8rem;
  background:#5AB0FF;color:#fff;text-shadow:var(--doucement);box-shadow:0 0 0 2px var(--k),0 3px 0 2px var(--k)}
.mdr-rame-etat.on{background:#3ED07A;color:var(--k);text-shadow:none}
.mdr-rame-etat.prix{background:#2A4566;padding-left:4px}
.mdr-rame-etat.prix.ok{background:var(--j);color:var(--k);text-shadow:none}
.mdr-prix-i{width:20px;height:20px}
.mdr-flash{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,255,255,0) 70%);animation:mdrFlash .7s ease-out both}
@keyframes mdrFlash{from{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.3)}}

/* — le pied — */
.mdr-pied{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:30px 4px 4px}
.mdr-bt{flex:1 1 150px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 12px!important;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:.92rem;color:#fff;white-space:nowrap;text-shadow:var(--cont);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);transition:transform .2s var(--res),box-shadow .1s}
.mdr-bt-i{width:28px;height:28px}
.mdr-bt--bleu{background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
.mdr-bt--rose{background:linear-gradient(180deg,#FF8CC0,#B8247A)!important}
.mdr-bt--vert{background:linear-gradient(180deg,#62DE98,#0B7A45)!important}
.mdr-bt:hover{transform:translateY(-2px)}
.mdr-bt:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)}

/* — l'arrivée en station — */
.mdr-arr{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:760px;margin:0 auto}
.mdr-arr-plaque{display:flex;justify-content:center;margin:6px 6px 16px}
.mdr-arr-plaque span{position:relative;max-width:100%;padding:10px 34px 12px;border-radius:12px;background:var(--bl);font-family:var(--display);font-weight:900;
  font-size:clamp(1.25rem,5.6vw,1.7rem);line-height:1.1;color:#fff;
  box-shadow:inset 0 0 0 3px var(--bl),inset 0 0 0 5px #fff,0 0 0 3px var(--k),0 6px 0 3px var(--k);animation:mdrPlaque .55s var(--res) both}
.mdr-arr-plaque span::before,.mdr-arr-plaque span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.mdr-arr-plaque span::before{left:12px}.mdr-arr-plaque span::after{right:12px}
.mdr-arr-scene{position:relative;margin:6px 8px 0;border-radius:22px;overflow:hidden;box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--lc),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);
  animation:mdrZoom .6s var(--res) .1s both}
.mdr-arr-scene .mdx-scene2{margin:0!important;border-radius:0!important;box-shadow:none!important}
.mdr-arr-tampon{position:absolute;left:10px;top:10px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 12px 6px;border-radius:12px;
  background:var(--g);color:var(--k);box-shadow:0 0 0 2.5px var(--k),0 4px 0 2.5px var(--k);transform:rotate(-5deg);transform-origin:0 0;
  animation:mdrTamponArr .6s var(--res) .5s both}
@keyframes mdrTamponArr{0%{opacity:0;transform:scale(2.2) rotate(-22deg)}65%{opacity:1;transform:scale(.92) rotate(-6deg)}100%{transform:rotate(-5deg)}}
.mdr-arr-etoiles{display:flex;gap:2px}
.mdr-arr-et{width:18px;height:18px}
.mdr-arr-et.on{animation:mdrPop .4s var(--res) both}
.mdr-arr-et.on:nth-child(2){animation-delay:.9s}.mdr-arr-et.on:nth-child(1){animation-delay:.75s}.mdr-arr-et.on:nth-child(3){animation-delay:1.05s}
.mdr-arr-tampon b{font-family:var(--display);font-weight:900;font-size:.88rem;text-transform:uppercase;line-height:1;white-space:nowrap}
.mdr-arr-tampon small{font-family:var(--display);font-weight:800;font-size:.62rem;white-space:nowrap}
.mdr-arr-gains{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin-top:22px}
.mdr-arr-gains .mdr-st b{font-size:1.2rem}
.mdr-det-bt{display:inline-flex;align-items:center;gap:6px;align-self:center;margin-top:18px;padding:6px 10px 6px 16px;border:0;border-radius:999px;cursor:pointer;
  background:var(--bl);color:#fff;font-family:var(--display);font-weight:900;font-size:.85rem;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.9),var(--cadre)}
.mdr-det-i{width:22px;height:22px;transform:rotate(90deg);transition:transform .3s var(--res)}
.mdr-det-bt.ouvert .mdr-det-i{transform:rotate(-90deg)}
.mdr-det{display:none;flex-direction:column;gap:6px;margin:12px 6px 0;padding:10px 12px;border-radius:16px;background:rgba(11,14,19,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.mdr-det.ouvert{display:flex;animation:mdrPop .35s var(--res)}
.mdr-dl{display:flex;justify-content:space-between;gap:10px;font-family:var(--display);font-weight:800;font-size:.85rem}
.mdr-dl.tot{margin-top:4px;padding-top:6px;border-top:2px dashed rgba(255,255,255,.35);font-size:1rem;color:var(--j)}
.mdr-arr-niv{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:20px}
.mdr-arr .mdr-action{margin-top:26px}
.mdr-arr .mdr-action .mdr-bt{flex:none;width:min(320px,calc(100% - 40px))}

/* — grands écrans — */
@media (min-width:760px){
  .mdr{padding:20px 24px 36px}
  .mdr-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mdr-cmds{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mdr-rames{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mdr-gares{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}
  .mdr-gare b{font-size:1.05rem}
  .mdr-trajet{padding:16px 18px 14px}
  .mdr-pied .mdr-bt{flex:0 1 240px}
}
@media (max-width:380px){
  .mdr{padding:12px 10px 26px}
  .mdr-cmds{gap:8px}
  .mdr-rames{gap:12px 10px}
}
@media (prefers-reduced-motion:reduce){
  .mdr *,.mdr::before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* @@ fin metrodrop_refonte.css @@ */
/* @@ debut defile_refonte.css @@ */
/* ==========================================================================
   DÉFILÉ LIGNE MÉTRO — L'ACCUEIL ET LA FIN, dans la famille des jeux principaux
   ========================================================================== */
.dfr,.dfr-fin{--k:#0B0E13;--bl:#153E8C;--j:#FFCE00;--res:cubic-bezier(.3,1.5,.5,1);--doux:cubic-bezier(.2,.8,.2,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --cont2:2.6px 0 #0B0E13,-2.6px 0 #0B0E13,0 2.6px #0B0E13,0 -2.6px #0B0E13,1.8px 1.8px #0B0E13,-1.8px -1.8px #0B0E13,1.8px -1.8px #0B0E13,-1.8px 1.8px #0B0E13,0 5px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35)}
.dfr{position:relative;isolation:isolate;overflow:clip;padding:14px 14px 30px;border-radius:28px;color:#fff;text-align:center;font-family:var(--body);
  background:radial-gradient(90% 30% at 50% 0,rgba(255,250,200,.5),transparent 70%),
    linear-gradient(180deg,#FFD84A,#F5B21C 36%,#E5871A 72%,#C4600F);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
/* l'enveloppe du site s'efface quand l'accueil est là */
.ap:has(.ap-stage>.dfr) .ap-ban,.ap:has(.ap-stage>.dfr) .ap-mascotte,
.ap:has(.ap-stage>.dfr-fin) .ap-ban,.ap:has(.ap-stage>.dfr-fin) .ap-mascotte{display:none!important}
.ap:has(.ap-stage>.dfr) .ap-cadre,.ap:has(.ap-stage>.dfr-fin) .ap-cadre{margin-top:6px!important}
.ap-stage:has(>.dfr),.ap-stage:has(>.dfr-fin){padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.ap-stage:has(>.dfr)::before,.ap-stage:has(>.dfr-fin)::before{display:none!important}
/* pendant la partie : plus de voyageurs à côté de la ligne */
.dfr-racine .rider-val{display:none!important}
/* en filigrane : des plaques de station qui défilent */
.dfr::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='white'%3E%3Crect x='20' y='30' width='74' height='26' rx='7'/%3E%3Crect x='130' y='96' width='64' height='24' rx='7'/%3E%3Crect x='40' y='160' width='80' height='26' rx='7'/%3E%3Ccircle cx='170' cy='40' r='9'/%3E%3Ccircle cx='110' cy='70' r='5'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px;
  animation:dfrPluie 40s linear infinite}
@keyframes dfrPluie{to{background-position:0 440px}}
.dfr::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;z-index:-1;pointer-events:none;opacity:.22;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/300px 50px}
.dfr-svg{display:inline-grid;place-items:center}
:is(.dfr,.dfr-fin) :is(.dfr-svg,.dfr-chip-i,.dfr-v-i,.dfr-go-i,.dfr-bt-i,.dfr-fin-coeur,.dfr-fin-art) svg{display:block;width:100%;height:100%;overflow:visible}

/* — la scène — */
.dfr-hero{position:relative;height:clamp(270px,80vw,440px);margin:8px 8px 0;border-radius:24px;overflow:hidden;background:#FBF8EE;
  box-shadow:0 0 0 3px var(--k),0 0 0 7px #fff,0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);animation:dfrZoom .6s var(--res) both}
@keyframes dfrZoom{from{opacity:0;transform:scale(.92) rotate(-1deg)}}
.dfr-hero-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.dfr-hero-haut{position:absolute;z-index:1;left:12px;right:12px;top:10px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.dfr-titre{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;
  font-size:clamp(2.1rem,11vw,3.7rem);color:#fff;text-shadow:var(--cont2);text-align:left}
.dfr-titre span{color:var(--j);animation:dfrTitre .6s var(--res) both}
.dfr-titre em{margin-top:8px;padding:4px 12px 5px;border-radius:9px;font-style:normal;font-size:.36em;letter-spacing:.03em;color:#fff;background:var(--bl);text-shadow:none;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);transform:rotate(-3deg);animation:dfrTampon .7s var(--res) .3s both}
@keyframes dfrTitre{from{opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.8)}}
@keyframes dfrTampon{0%{opacity:0;transform:scale(2) rotate(-20deg)}60%{opacity:1;transform:scale(.9) rotate(-2deg)}100%{transform:rotate(-3deg)}}
.dfr-rond{flex:none;display:grid!important;place-items:center;width:54px;height:54px;padding:9px!important;border:0;border-radius:16px;cursor:pointer;
  background:var(--j)!important;box-shadow:var(--cadre);transition:transform .25s var(--res);animation:dfrPop .5s var(--res) .4s both}
.dfr-rond:hover{transform:translateY(-3px) rotate(-6deg)}
.dfr-rond:active{transform:translateY(3px)}
.dfr-hero-bas{position:absolute;z-index:1;right:12px;top:76px;display:flex}
.dfr-chip{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 4px;border-radius:999px;background:var(--bl);color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px rgba(255,255,255,.9),0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);animation:dfrPop .5s var(--res) .5s both}
.dfr-chip-i{width:30px;height:30px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--j);box-shadow:0 0 0 2px var(--k)}
.dfr-chip b{font-family:var(--display);font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums}
@keyframes dfrPop{from{opacity:0;transform:scale(.5) translateY(10px)}}

/* — les plaques émaillées — */
.dfr-plaque{display:flex;justify-content:center;margin:30px auto 16px}
.dfr-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:var(--bl);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.05rem;line-height:1.2;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);animation:dfrPlaque .5s var(--res) both}
.dfr-plaque span::before,.dfr-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.dfr-plaque span::before{left:11px}.dfr-plaque span::after{right:11px}
@keyframes dfrPlaque{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}

/* — la vitesse — */
.dfr .dfr-vitesses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:0 4px}
.dfr .dfr-v{display:flex!important;flex-direction:column;align-items:center;gap:4px;height:auto!important;min-height:0!important;margin:0!important;padding:10px 4px 11px!important;
  border:0!important;border-radius:18px!important;cursor:pointer;color:#fff!important;font-family:var(--display);
  background:radial-gradient(120% 110% at 100% 0,color-mix(in srgb,var(--a) 48%,transparent),transparent 62%),linear-gradient(165deg,color-mix(in srgb,var(--b) 70%,#5A2A08),#4A2206 80%)!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--a) 45%,transparent),0 5px 0 2.5px var(--k)!important;
  transition:transform .3s var(--res);animation:dfrPop .45s var(--res) both;animation-delay:calc(.1s + var(--n)*70ms)}
.dfr .dfr-v-i{width:64px;height:45px;transition:transform .3s var(--res)}
.dfr .dfr-v b{font-weight:900;font-size:.95rem;text-shadow:var(--doucement)}
.dfr .dfr-v:hover{transform:translateY(-3px)}
.dfr .dfr-v.btn--solid{transform:translateY(-4px);background:linear-gradient(165deg,var(--a),var(--b))!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px #fff,0 0 0 7.5px var(--k),0 7px 0 7.5px var(--k)!important}
.dfr .dfr-v.btn--solid b{text-shadow:var(--cont)}
.dfr .dfr-v.btn--solid .dfr-v-i{animation:dfrSaut .6s var(--res)}
@keyframes dfrSaut{35%{transform:translateY(-8px) rotate(-8deg) scale(1.12)}70%{transform:translateY(1px) rotate(3deg)}}

/* — le gros bouton — */
.dfr .dfr-go{position:relative;overflow:hidden;display:flex!important;align-items:center;justify-content:center;gap:14px;width:min(520px,calc(100% - 16px));height:82px;
  margin:30px auto 0;padding:0 20px!important;border:0;border-radius:22px;cursor:pointer;color:#fff!important;
  background:linear-gradient(180deg,#FF5A4E,#E3051C 55%,#B3001A)!important;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 0 0 3px var(--k),0 8px 0 3px var(--k);transition:transform .2s var(--res),box-shadow .12s;animation:dfrPop .55s var(--res) .3s both}
.dfr .dfr-go::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);animation:dfrReflet 3s ease-in-out 1.2s infinite}
@keyframes dfrReflet{0%,55%{left:-40%}100%{left:135%}}
.dfr-go-i{flex:none;width:72px;height:58px;animation:dfrDe 2.4s ease-in-out 1s infinite}
@keyframes dfrDe{0%,70%,100%{transform:none}78%{transform:rotate(-14deg) scale(1.08)}88%{transform:rotate(10deg)}}
.dfr-go-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-align:left}
.dfr-go-t b{font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,5.6vw,1.6rem);text-transform:uppercase;text-shadow:var(--cont)}
.dfr-go-t small{margin-top:5px;font-family:var(--display);font-weight:800;font-size:.8rem;text-shadow:var(--doucement)}
.dfr .dfr-go:hover{transform:translateY(-3px)}
.dfr .dfr-go:active{transform:translateY(6px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 0 0 3px var(--k),0 2px 0 3px var(--k)}

/* — les pastilles de ligne — */
.dfr .dfr-lignes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:4px 6px 6px}
.dfr .dfr-l{flex:none;display:grid!important;place-items:center;width:48px;height:48px;padding:0!important;border:0!important;border-radius:50%!important;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:1.05rem;box-shadow:0 0 0 2.5px var(--k),0 0 0 5px #fff,0 0 0 7.5px var(--k),0 4px 0 7.5px var(--k);
  transition:transform .3s var(--res);animation:dfrPop .45s var(--res) both;animation-delay:calc(.2s + var(--n)*30ms)}
.dfr .dfr-l:hover{transform:translateY(-4px) scale(1.08) rotate(-6deg)}
.dfr .dfr-l:active{transform:translateY(3px) scale(.95)}

/* ————————————————————————————————— la fin de partie ————————————————————————————————— */
.endcard.dfr-fin{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:560px;margin:0 auto;padding:12px 14px 22px;border-radius:28px;color:#fff;text-align:center;font-family:var(--body);
  background:radial-gradient(90% 30% at 50% 0,rgba(255,250,200,.5),transparent 70%),linear-gradient(180deg,#FFD84A,#F5B21C 40%,#D9741A);
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k);animation:dfrFin .6s var(--res) both}
.endcard.dfr-fin.perdu{background:radial-gradient(90% 30% at 50% 0,rgba(140,180,255,.3),transparent 70%),linear-gradient(180deg,#3A4C8C,#25306A 45%,#1A1F4A)}
@keyframes dfrFin{from{opacity:0;transform:translateY(40px) scale(.94)}}
.dfr-fin-scene{position:relative;width:100%;height:clamp(200px,56vw,290px);border-radius:20px;overflow:hidden;isolation:isolate;background:#FBF8EE;margin:6px 0 12px;
  box-shadow:0 0 0 3px var(--k),0 0 0 6.5px var(--lc),0 0 0 9px var(--k),0 8px 0 9px var(--k)}
.dfr-fin.perdu .dfr-fin-scene{box-shadow:0 0 0 3px var(--k),0 0 0 6.5px #FF5A4E,0 0 0 9px var(--k),0 8px 0 9px var(--k)}
.dfr-fin-cv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .5s}
.dfr-fin-scene.fige{animation:dfrSecoue .45s ease-out}
.dfr-fin-scene.fige .dfr-fin-cv{filter:grayscale(.75) brightness(.75) sepia(.3) hue-rotate(-20deg)}
@keyframes dfrSecoue{20%{transform:translate(-6px,2px) rotate(-1deg)}40%{transform:translate(5px,-2px) rotate(1deg)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}
.dfr-fin-rayons{position:absolute;left:50%;top:40%;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:1;opacity:.3;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(#FFE27A 0 9deg,transparent 9deg 24deg);animation:dfrTourne 12s linear infinite}
@keyframes dfrTourne{to{transform:rotate(360deg)}}
.dfr-fin-coupe{position:absolute;left:50%;top:10px;z-index:2;width:86px;margin-left:-43px;animation:dfrCoupe .8s var(--res) .5s both}
.dfr-fin-coupe svg{display:block;width:100%;height:auto}
@keyframes dfrCoupe{0%{opacity:0;transform:translateY(-160px) rotate(-20deg)}60%{opacity:1;transform:translateY(8px) rotate(6deg)}100%{transform:none}}
.dfr-fin-tampon{position:absolute;left:50%;bottom:66px;z-index:3;padding:7px 18px 8px;border-radius:12px;white-space:nowrap;line-height:1;
  font-family:var(--display);font-weight:900;font-size:clamp(1.15rem,5.2vw,1.6rem);text-transform:uppercase;color:#fff;background:#E3051C;text-shadow:var(--cont);
  box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--k),0 6px 0 3px var(--k);animation:dfrFinTampon .6s var(--res) .9s both}
.dfr-fin-tampon--or{background:var(--j);color:var(--k);text-shadow:none;animation-delay:1.1s}
@keyframes dfrFinTampon{0%{opacity:0;transform:translateX(-50%) scale(2.6) rotate(-25deg)}65%{opacity:1;transform:translateX(-50%) scale(.92) rotate(-7deg)}100%{transform:translateX(-50%) rotate(-6deg)}}
.dfr-fin-coeurs{position:absolute;left:0;right:0;top:12px;z-index:2;display:flex;justify-content:center;gap:12px;pointer-events:none}
.dfr-fin-coeur{width:40px;height:40px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));animation:dfrCoeur 1.2s ease-in both}
.dfr-fin-coeur:nth-child(2){animation-delay:.15s}.dfr-fin-coeur:nth-child(3){animation-delay:.3s}
@keyframes dfrCoeur{0%{opacity:0;transform:translateY(-30px) scale(.6)}30%{opacity:1;transform:none}70%{opacity:1;transform:translateY(10px) rotate(-14deg)}
  100%{opacity:.8;transform:translateY(14px) rotate(-18deg);filter:grayscale(1) drop-shadow(0 3px 0 rgba(0,0,0,.35))}}
.dfr-fin-plaque{display:flex;justify-content:center}
.dfr-fin-plaque span{position:relative;padding:7px 30px 9px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.25rem;color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);animation:dfrPlaque .55s var(--res) .4s both}
.dfr-fin-plaque span::before,.dfr-fin-plaque span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.dfr-fin-plaque span::before{left:11px}.dfr-fin-plaque span::after{right:11px}
.dfr-fin-score{display:block;margin-top:6px;font-family:var(--display);font-weight:900;font-size:clamp(3rem,15vw,4.4rem);line-height:1;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:var(--cont2);animation:dfrPop .5s var(--res) .6s both}
.dfr-fin.perdu .dfr-fin-score{color:var(--j)}
.dfr-fin-pts{margin-top:-4px;font-family:var(--display);font-weight:900;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;text-shadow:var(--doucement)}
.dfr-fin-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:10px}
.dfr-fin-s{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 6px 9px;border-radius:16px;background:linear-gradient(165deg,var(--a),var(--b));
  box-shadow:var(--cadre);animation:dfrPop .5s var(--res) both;animation-delay:calc(1.1s + var(--n)*110ms)}
.dfr-fin-art{display:block;width:62px;height:46px}
.dfr-fin-s b{font-family:var(--display);font-weight:900;font-size:1.3rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:var(--cont)}
.dfr-fin-s small{font-family:var(--display);font-weight:800;font-size:.74rem;text-shadow:var(--doucement)}
.dfr-fin-trace{width:100%;max-height:260px;margin-top:16px;padding:8px;border-radius:18px;background:#FBF8EE;box-shadow:var(--cadre);overflow:auto;animation:dfrPop .5s var(--res) 1.6s both}
.dfr-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-top:14px}
.dfr-bt{flex:1 1 140px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 12px!important;border:0!important;border-radius:16px!important;
  cursor:pointer;font-family:var(--display);font-weight:900;font-size:1rem;color:#fff!important;white-space:nowrap;text-shadow:var(--cont);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)!important;transition:transform .2s var(--res),box-shadow .1s}
.dfr-bt-i{width:28px;height:28px}
.dfr-bt--or{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:var(--k)!important;text-shadow:none;flex-basis:100%}
.dfr-bt--bleu{background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
.dfr-bt--rose{background:linear-gradient(180deg,#FF8CC0,#B8247A)!important}
.dfr-bt:hover{transform:translateY(-2px)}
.dfr-bt:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)!important}

/* — grands écrans — */
@media (min-width:760px){
  .dfr{padding:20px 24px 36px}
  .dfr .dfr-vitesses{width:min(640px,100%);margin:0 auto}
  .dfr-fin-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .endcard.dfr-fin{max-width:760px}
  .dfr-bt--or{flex-basis:140px}
  .dfr-hero-bas{top:auto;bottom:14px;left:14px;right:auto}
}
@media (max-width:380px){
  .dfr{padding:12px 10px 26px}
  .dfr .dfr-l{width:44px;height:44px}
  .dfr .dfr-v-i{width:54px;height:38px}
  .dfr-bt{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .dfr *,.dfr::before,.dfr-fin *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* @@ fin defile_refonte.css @@ */
/* @@ debut solitaire_refonte.css @@ */
/* ==========================================================================
   MÉTRO SOLITAIRE — ACCUEIL, STATISTIQUES, FIN, ET LE PLATEAU SUR TÉLÉPHONE
   ========================================================================== */
.sor,.sor-fin{--k:#0B0E13;--bl:#153E8C;--j:#FFCE00;--res:cubic-bezier(.3,1.5,.5,1);--doux:cubic-bezier(.2,.8,.2,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --cont2:2.6px 0 #0B0E13,-2.6px 0 #0B0E13,0 2.6px #0B0E13,0 -2.6px #0B0E13,1.8px 1.8px #0B0E13,-1.8px -1.8px #0B0E13,1.8px -1.8px #0B0E13,-1.8px 1.8px #0B0E13,0 5px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35)}
.sor{position:relative;isolation:isolate;overflow:clip;padding:14px 14px 30px;border-radius:28px;color:#fff;text-align:center;font-family:var(--body);
  background:radial-gradient(90% 28% at 50% 0,rgba(140,220,255,.45),transparent 70%),
    linear-gradient(180deg,#3E9BF0,#1F64CC 32%,#4A3FC0 68%,#3A1E8C);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.ap:has(.ap-stage>.sor) .ap-ban,.ap:has(.ap-stage>.sor) .ap-mascotte,
.ap:has(.ap-stage>.sor-fin) .ap-ban,.ap:has(.ap-stage>.sor-fin) .ap-mascotte{display:none!important}
.ap:has(.ap-stage>.sor) .ap-cadre,.ap:has(.ap-stage>.sor-fin) .ap-cadre{margin-top:6px!important}
.ap-stage:has(>.sor),.ap-stage:has(>.sor-fin){padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.ap-stage:has(>.sor)::before,.ap-stage:has(>.sor-fin)::before{display:none!important}
.sor::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='white' stroke-width='5'%3E%3Crect x='24' y='26' width='48' height='66' rx='8' transform='rotate(-12 48 59)'/%3E%3Crect x='140' y='120' width='48' height='66' rx='8' transform='rotate(10 164 153)'/%3E%3C/g%3E%3Cg fill='white'%3E%3Ccircle cx='160' cy='50' r='10'/%3E%3Ccircle cx='60' cy='170' r='7'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px;
  animation:sorDerive 60s linear infinite}
@keyframes sorDerive{to{background-position:220px 440px}}
.sor::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;z-index:-1;pointer-events:none;opacity:.2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'%3E%3Cpath fill='white' d='M0 30V18h12v-5h10v5h8V9h14v9h10v-6h12v18zM66 30V14l8-6 8 6v16zM86 30V16h16v-4h10v4h8v14zM150 30l4-26 4 26zM142 30l12-12 12 12zM168 30V20h10v-6h12v6h10v10z'/%3E%3C/svg%3E") repeat-x left bottom/300px 50px}
.sor-svg{display:inline-grid;place-items:center}
:is(.sor,.sor-fin) :is(.sor-svg,.sor-hero-table,.sor-st-table,.sor-fin-table,.sor-reprise-i,.sor-mode-art,.sor-mode-ok,.sor-bt-art,.sor-bt-i,.sor-go-i,.sor-tuile-art) svg{display:block;width:100%;height:100%;overflow:visible}
/* le menu se redessine à chaque choix : après la première ouverture, plus d'entrée animée */
.sor-calme :is(.sor-hero,.sor-tc,.sor-titre span,.sor-rond,.sor-plaque span,.sor-mode,.sor-l,.sor-go,.sor-reprise){animation:none!important}

/* — la table — */
.sor-hero{position:relative;height:clamp(240px,70vw,400px);margin:8px 8px 0;border-radius:24px;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 100%,#2FB36B,#13804A 55%,#0B5A34);
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);animation:sorZoom .6s var(--res) both}
.sor-hero::before{content:"";position:absolute;inset:10px;border-radius:16px;border:3px dashed rgba(255,255,255,.22);pointer-events:none}
@keyframes sorZoom{from{opacity:0;transform:scale(.92) rotate(-1deg)}}
.sor-hero-table{position:absolute;left:0;right:0;bottom:0;height:78%}
.sor-tc-in{transform-box:fill-box;transform-origin:50% 100%;animation:sorCarte 3.4s ease-in-out infinite;animation-delay:calc(var(--n,0)*-.5s)}
@keyframes sorCarte{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-2deg)}}
.sor-tc{animation:sorDonne .7s var(--res) both;animation-delay:calc(.15s + var(--n,0)*.1s)}
@keyframes sorDonne{from{opacity:0;transform:translate(300px,260px) rotate(40deg) scale(.4)}}
.sor-hero-haut{position:absolute;z-index:1;left:12px;right:12px;top:10px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sor-titre{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;
  font-size:clamp(1.9rem,9.6vw,3.4rem);color:#fff;text-shadow:var(--cont2);text-align:left}
.sor-titre span{animation:sorTitre .6s var(--res) both}
.sor-titre span:nth-child(2){color:var(--j);animation-delay:.1s}
.sor-titre--c{align-items:center;text-align:center}
@keyframes sorTitre{from{opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.8)}}
.sor-rond{flex:none;display:grid!important;place-items:center;width:54px;height:54px;padding:9px!important;border:0;border-radius:16px;cursor:pointer;
  background:var(--j)!important;box-shadow:var(--cadre);transition:transform .25s var(--res);animation:sorPop .5s var(--res) .4s both}
.sor-rond:hover{transform:translateY(-3px) rotate(-6deg)}
.sor-rond:active{transform:translateY(3px)}
@keyframes sorPop{from{opacity:0;transform:scale(.5) translateY(10px)}}

/* — la partie en cours — */
.sor-reprise{display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px 4px 0;padding:12px;border-radius:20px;
  background:linear-gradient(165deg,#FFB25E,#E0560F);box-shadow:var(--cadre);animation:sorPop .5s var(--res) .2s both}
.sor-reprise-t{display:flex;flex-direction:column;align-items:center;gap:2px}
.sor-reprise-i{width:40px;height:40px;padding:5px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--k)}
.sor-reprise b{font-family:var(--display);font-weight:900;font-size:1.1rem;text-shadow:var(--cont)}
.sor-reprise small{font-family:var(--display);font-weight:800;font-size:.8rem;text-shadow:var(--doucement)}
.sor-reprise-b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* — les plaques — */
.sor-plaque{display:flex;justify-content:center;margin:30px auto 16px}
.sor-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:var(--bl);color:#fff;
  font-family:var(--display);font-weight:900;font-size:1.05rem;line-height:1.2;box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);animation:sorPlaque .5s var(--res) both}
.sor-plaque span::before,.sor-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px var(--k)}
.sor-plaque span::before{left:11px}.sor-plaque span::after{right:11px}
@keyframes sorPlaque{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}

/* — les modes — */
.sor-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 4px}
.sor .sor-mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:8px 6px 10px;border:0;border-radius:18px;cursor:pointer;
  color:#fff;text-align:center;font-family:var(--display);
  background:radial-gradient(120% 110% at 100% 0,color-mix(in srgb,var(--c) 55%,transparent),transparent 62%),linear-gradient(165deg,color-mix(in srgb,var(--c) 40%,#1E2A6E),#1A1650 80%);
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5px color-mix(in srgb,var(--c) 45%,transparent),0 5px 0 2.5px var(--k);
  transition:transform .3s var(--res);animation:sorPop .45s var(--res) both;animation-delay:calc(.1s + var(--n)*70ms)}
.sor-mode-art{width:70px;height:54px;transition:transform .3s var(--res)}
.sor .sor-mode > b{font-weight:900;font-size:1.05rem;text-transform:uppercase;text-shadow:var(--doucement)}
.sor-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.sor-tags i{font-style:normal;font-family:var(--display);font-weight:800;font-size:.62rem;padding:2px 7px;border-radius:999px;background:rgba(11,14,19,.4);white-space:nowrap}
.sor .sor-mode:hover{transform:translateY(-3px)}
.sor .sor-mode:hover .sor-mode-art{transform:rotate(-6deg) scale(1.06)}
.sor .sor-mode.on{transform:translateY(-4px);background:linear-gradient(165deg,color-mix(in srgb,var(--c) 100%,#fff 10%),color-mix(in srgb,var(--c) 60%,#0B0E13))!important;
  box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px #fff,0 0 0 7.5px var(--k),0 7px 0 7.5px var(--k)}
.sor .sor-mode.on > b{text-shadow:var(--cont)}
.sor .sor-mode.on .sor-mode-art{animation:sorSaut .6s var(--res)}
.sor-mode-ok{position:absolute;top:-10px;right:-8px;width:28px;height:28px;transform:scale(0);transition:transform .4s var(--res)}
.sor .sor-mode.on .sor-mode-ok{transform:none}
@keyframes sorSaut{35%{transform:translateY(-8px) rotate(-8deg) scale(1.12)}70%{transform:translateY(1px) rotate(3deg)}}

/* — les lignes — */
.sor-lignes{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:4px 6px 6px}
.sor .sor-l{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--c);color:var(--i,#fff);font-family:var(--display);font-weight:900;font-size:1rem;
  box-shadow:0 0 0 2.5px var(--k),0 3px 0 2.5px var(--k);opacity:.55;transform:scale(.88);filter:saturate(.7);
  transition:transform .3s var(--res),opacity .2s,filter .2s;animation:sorPop .45s var(--res) both;animation-delay:calc(.2s + var(--n)*25ms)}
.sor .sor-l--long{font-size:.74rem}
.sor .sor-l:hover{opacity:.9;transform:scale(.98)}
.sor .sor-l.on{opacity:1;filter:none;transform:scale(1.08);box-shadow:0 0 0 2.5px var(--k),0 0 0 5.5px var(--j),0 0 0 7.5px var(--k),0 5px 0 7.5px var(--k)}
.sor-lignes-pied{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.sor-compte{display:inline-flex;align-items:baseline;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(11,14,19,.4);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.sor-compte b{font-family:var(--display);font-weight:900;font-size:1.1rem}
.sor-compte small{font-family:var(--display);font-weight:800;font-size:.75rem}
.sor-compte.ok{background:#3ED07A;color:var(--k);box-shadow:var(--cadre)}

/* — les boutons — */
.sor .sor-go{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:14px;width:min(520px,calc(100% - 16px));height:78px;
  margin:30px auto 0;padding:0 20px;border:0;border-radius:22px;cursor:pointer;color:var(--k);
  background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 8px 0 3px var(--k);transition:transform .2s var(--res),box-shadow .12s;animation:sorPop .55s var(--res) .3s both}
.sor .sor-go::after{content:"";position:absolute;inset:0 auto 0 -40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:sorReflet 3s ease-in-out 1.2s infinite}
@keyframes sorReflet{0%,55%{left:-40%}100%{left:135%}}
.sor-go-i{flex:none;width:50px;height:50px;padding:12px 10px 12px 14px;box-sizing:border-box;border-radius:50%;background:var(--k);animation:sorBat 1.6s ease-in-out 1s infinite}
@keyframes sorBat{50%{transform:scale(1.12)}}
.sor-go-t{display:flex;flex-direction:column;align-items:flex-start;line-height:1;text-align:left}
.sor-go-t b{font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,5.6vw,1.6rem);text-transform:uppercase}
.sor-go-t small{margin-top:4px;font-family:var(--display);font-weight:800;font-size:.8rem}
.sor .sor-go:hover{transform:translateY(-3px)}
.sor .sor-go:active{transform:translateY(6px)!important;box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 3px var(--k),0 2px 0 3px var(--k)}
.sor .sor-go.off,.sor .sor-go[disabled]{cursor:not-allowed;background:linear-gradient(180deg,#9AA9C4,#6E7FA0);color:#1A2238}
.sor .sor-go.off::after,.sor .sor-go[disabled]::after,.sor .sor-go.off .sor-go-i{animation:none}
.sor .sor-go--court{width:min(320px,calc(100% - 16px));height:62px}
.sor-bas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.sor-bt{flex:1 1 150px;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;height:54px;padding:0 12px!important;border:0!important;border-radius:16px!important;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:.95rem;color:#fff!important;white-space:nowrap;text-shadow:var(--cont);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)!important;transition:transform .2s var(--res),box-shadow .1s}
.sor-bt-art{width:44px;height:36px;flex:none}
.sor-bt-i{width:28px;height:28px;flex:none}
.sor-bt--or{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:var(--k)!important;text-shadow:none}
.sor-bt--bleu{background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
.sor-bt--rose{background:linear-gradient(180deg,#FF8CC0,#B8247A)!important;flex:0 1 auto;padding:0 16px 0 8px!important}
.sor-bt--vert{background:linear-gradient(180deg,#62DE98,#0B7A45)!important}
.sor-bt--sombre{background:linear-gradient(180deg,#4A5A80,#2A3456)!important}
.sor-bt--large{flex-basis:100%}
.sor-bt:hover{transform:translateY(-2px)}
.sor-bt:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px var(--k),0 1px 0 2.5px var(--k)!important}

/* — les statistiques — */
.sor-st-tete{position:relative;height:150px;margin:6px 8px 0;border-radius:22px;overflow:hidden;
  background:radial-gradient(80% 70% at 50% 100%,#2FB36B,#13804A 55%,#0B5A34);box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);
  display:flex;align-items:center;justify-content:center;animation:sorZoom .6s var(--res) both}
.sor-st-table{position:absolute;left:0;right:0;bottom:-30px;height:100%;opacity:.55}
.sor-st-tete .sor-titre{position:relative;z-index:1;font-size:clamp(1.7rem,8.4vw,2.8rem)}
.sor-tuiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 4px 0}
.sor-tuile{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;padding:6px 6px 10px;border-radius:18px;background:linear-gradient(165deg,var(--a),var(--b));
  box-shadow:var(--cadre);animation:sorPop .5s var(--res) both;animation-delay:calc(.2s + var(--n)*80ms)}
.sor-tuile.large{grid-column:1/-1}
.sor-tuile-art{display:block;width:64px;height:48px}
.sor-tuile b{font-family:var(--display);font-weight:900;font-size:1.5rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:var(--cont)}
.sor-tuile.large b{font-size:2rem}
.sor-tuile small{font-family:var(--display);font-weight:800;font-size:.76rem;text-shadow:var(--doucement)}
.sor-paris{display:grid;gap:9px;margin:0 4px}
.sor-pr{display:flex;align-items:center;gap:10px;padding:5px 10px 5px 5px;border-radius:999px;background:rgba(11,14,19,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);
  animation:sorPop .45s var(--res) both;animation-delay:calc(.3s + var(--n)*40ms)}
.sor-pr-past{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c);font-style:normal;font-family:var(--display);font-weight:900;font-size:.85rem;
  box-shadow:0 0 0 2.5px var(--k)}
.sor-pr-j{flex:1;height:14px;border-radius:14px;background:rgba(11,14,19,.55);box-shadow:0 0 0 2px var(--k);overflow:hidden}
.sor-pr-j i{display:block;height:100%;width:0;border-radius:14px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);transition:width 1.1s var(--doux)}
.sor-pr em{flex:none;min-width:48px;font-style:normal;font-family:var(--display);font-weight:900;font-size:.85rem;text-align:right;font-variant-numeric:tabular-nums}
.sor-pr.fini{background:linear-gradient(90deg,rgba(255,206,0,.45),rgba(255,206,0,.15))}

/* — la fin de partie — */
.endcard.sor-fin{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:10px;
  max-width:560px;margin:0 auto;padding:12px 14px 22px;border-radius:28px;color:#fff;text-align:center;font-family:var(--body);
  background:radial-gradient(90% 28% at 50% 0,rgba(140,220,255,.45),transparent 70%),linear-gradient(180deg,#3E9BF0,#1F64CC 40%,#4A3FC0);
  box-shadow:0 0 0 3px var(--k),0 8px 0 3px var(--k);animation:sorZoom .6s var(--res) both}
.endcard.sor-fin.perdu{background:linear-gradient(180deg,#3A4C8C,#25306A 45%,#1A1F4A)}
.sor-fin-scene{position:relative;width:100%;height:clamp(190px,52vw,270px);border-radius:20px;overflow:hidden;isolation:isolate;margin:6px 0 12px;
  background:radial-gradient(80% 70% at 50% 100%,#2FB36B,#13804A 55%,#0B5A34);box-shadow:0 0 0 3px var(--k),0 0 0 6.5px var(--j),0 0 0 9px var(--k),0 8px 0 9px var(--k)}
.sor-fin.perdu .sor-fin-scene{filter:grayscale(.6) brightness(.85);box-shadow:0 0 0 3px var(--k),0 0 0 6.5px #FF5A4E,0 0 0 9px var(--k),0 8px 0 9px var(--k)}
.sor-fin-table{position:absolute;left:0;right:0;bottom:0;height:80%}
.sor-fin-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.sor-fin.perdu .sor-fin-scene{filter:none!important}
.sor-fin-rayons{position:absolute;left:50%;top:40%;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:1;opacity:0;animation:sorRayonsIn .8s ease 2.3s forwards,sorTourne 12s linear infinite!important;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(#FFE27A 0 9deg,transparent 9deg 24deg);animation:sorTourne 12s linear infinite}
@keyframes sorTourne{to{transform:rotate(360deg)}}
@keyframes sorRayonsIn{to{opacity:.3}}
.sor-fin-coupe{position:absolute;left:50%;top:22%;z-index:2;width:84px;margin-left:-42px;animation:sorCoupe .8s var(--res) 2.4s both}
.sor-fin-coupe svg{display:block;width:100%;height:auto}
@keyframes sorCoupe{0%{opacity:0;transform:translateY(-160px) rotate(-20deg)}60%{opacity:1;transform:translateY(8px) rotate(6deg)}100%{transform:none}}
.sor-fin-tampon{position:absolute;left:50%;bottom:16px;z-index:3;padding:7px 18px 8px;border-radius:12px;white-space:nowrap;line-height:1;
  font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,5vw,1.6rem);text-transform:uppercase;color:#fff;background:#E3051C;text-shadow:var(--cont);
  box-shadow:inset 0 0 0 3px #fff,0 0 0 3px var(--k),0 6px 0 3px var(--k);animation:sorFinTampon .6s var(--res) .8s both}
.sor-fin-tampon--or{background:var(--j);color:var(--k);text-shadow:none;animation-delay:2.9s}
@keyframes sorFinTampon{0%{opacity:0;transform:translateX(-50%) scale(2.6) rotate(-25deg)}65%{opacity:1;transform:translateX(-50%) scale(.92) rotate(-7deg)}100%{transform:translateX(-50%) rotate(-6deg)}}
.sor-fin-plaque{display:flex;justify-content:center}
.sor-fin-plaque span{position:relative;padding:7px 30px 9px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.2rem;color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k);animation:sorPlaque .55s var(--res) .4s both}
.sor-fin.gagne .sor-fin-plaque span{background:var(--j);color:var(--k);box-shadow:inset 0 0 0 2px var(--j),inset 0 0 0 3.5px #fff,0 0 0 2.5px var(--k),0 5px 0 2.5px var(--k)}
.sor-fin-score{display:block;margin-top:6px;font-family:var(--display);font-weight:900;font-size:clamp(3rem,15vw,4.4rem);line-height:1;font-variant-numeric:tabular-nums;
  color:var(--j);text-shadow:var(--cont2);animation:sorPop .5s var(--res) .6s both}
.sor-fin-pts{margin-top:-4px;font-family:var(--display);font-weight:900;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;text-shadow:var(--doucement)}
.sor-fin .stars{margin:6px 0 0}
.sor-fin .sor-fin-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:10px 0 0;padding:0;background:none;box-shadow:none}
.sor-fin .sor-fin-stats .sor-tuile b{font-size:1.3rem}
@media (max-width:759px){ .sor-fin .sor-fin-stats .sor-tuile:last-child:nth-child(odd){grid-column:1/-1} }
.sor-fin-bts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:100%;margin-top:14px}

/* ==========================================================================
   LE PLATEAU SUR TÉLÉPHONE, EN PORTRAIT COMME EN PAYSAGE
   La taille des cartes vient du code (--soW, --soCH…), calculée sur la place
   réelle ; la rangée du haut (pioche, défausse, garages) a sa propre mesure.
   ========================================================================== */
@media (max-width:760px),(orientation:landscape) and (max-height:520px){
  :is(.so-partie,.so-fantome) .so-carte{width:100%;height:var(--soCH);min-height:0!important;flex:none;padding:3px!important;gap:1px!important;border-radius:8px;overflow:hidden;
    box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
  :is(.so-partie,.so-fantome) .so-carte .so-tete{margin:4px 0 0!important;gap:2px;min-height:18px;display:flex;align-items:center}
  :is(.so-partie,.so-fantome) .so-carte .so-past{width:18px;height:18px;font-size:.58rem;box-shadow:0 0 0 1.5px #0B0E13}
  :is(.so-partie,.so-fantome) .so-carte .so-tete small{display:block!important;margin-left:auto;font-family:var(--display);font-weight:800;font-size:.7rem;color:#0B0E13}
  :is(.so-partie,.so-fantome) .so-carte .so-nom{font-size:.56rem;line-height:1.1;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  :is(.so-partie,.so-fantome) .so-carte .so-type{display:none}
  .so-partie .so-col > .so-carte + .so-carte,.so-fantome .so-carte + .so-carte{margin-top:calc(var(--soPas) - var(--soCH))!important}
  .so-partie .so-col > .so-carte.dos + .so-carte{margin-top:calc(var(--soPasDos) - var(--soCH))!important}
  .so-partie .so-col{min-height:var(--soCH);padding-bottom:8px}
  .so-partie .so-vide{height:var(--soCH)}
  /* la rangée du haut a sa propre mesure */
  .so-partie .so-pioche{width:var(--soWh,var(--soW));height:var(--soCHh,calc(var(--soW)*1.42))}
  .so-partie .so-defausse .so-carte{width:var(--soWh,var(--soW))!important;height:var(--soCHh,calc(var(--soW)*1.42))}
  .so-partie .so-defausse .so-carte + .so-carte{margin-left:calc(15px - var(--soWh,var(--soW)))!important}
  .so-partie .so-defausse-vide{width:var(--soWh,var(--soW));height:var(--soCHh,calc(var(--soW)*1.42))}
  .so-partie .so-garages{display:grid;grid-auto-flow:column;grid-auto-columns:var(--soWh,var(--soW));gap:4px}
  .so-partie .so-garages .so-garage-vide{width:var(--soWh,var(--soW));height:var(--soCHh,calc(var(--soW)*1.42))}
  .so-partie .so-garages .so-carte{width:var(--soWh,var(--soW));height:var(--soCHh,calc(var(--soW)*1.42))}
  .so-partie .so-garages .so-carte .so-nom,.so-partie .so-defausse .so-carte .so-nom{-webkit-line-clamp:4}
}
/* — la défausse en éventail : sous la carte du dessus, plus de nom qui dépasse — */
.so-partie .so-defausse .so-carte:not(:last-child) :is(.so-nom,.so-trajet,.so-type,.so-tete small){visibility:hidden}
.so-partie .so-defausse .so-carte:not(:last-child){background:linear-gradient(90deg,var(--c) 0 38%,color-mix(in srgb,var(--c) 40%,#FFFDF4) 38%)!important}
/* — en paysage : le tableau de bord à gauche, les sept colonnes à droite — */
@media (orientation:landscape) and (max-height:520px){
  html:has(.view.so-partie) header.top{display:none}
  .view.so-partie > .wrap > .section{display:none!important}
  .view.so-partie{padding-left:8px!important;padding-right:8px!important}
  .view.so-partie > .wrap > .section{padding-top:4px!important}
  .view.so-partie > .wrap > .section .row{margin-bottom:2px!important}
  .so-partie .so-jeu{position:relative;display:grid!important;grid-template-columns:minmax(210px,33%) minmax(0,1fr);
    grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:6px 10px;height:calc(100dvh - 14px)!important;min-height:0!important}
  .so-partie .so-barre{grid-column:1;grid-row:1;padding:4px 8px!important;gap:6px!important;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .so-partie .so-barre::-webkit-scrollbar{display:none}
  .so-partie .so-marque{display:none}
  .so-partie .so-stat b{font-size:.84rem}
  .so-partie .so-stat span,.so-partie .so-stat small{font-size:.42rem}
  .so-partie .so-stat-ico{width:15px;height:15px}
  .so-partie .so-evt{grid-column:1;grid-row:2}
  .so-partie .so-fondations{grid-column:1;grid-row:3;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important;margin:0!important}
  .so-partie .so-fondations > .so-fond{min-width:0!important;flex-direction:row;justify-content:center;gap:5px;padding:3px 4px!important;border-radius:12px}
  .so-partie .so-fondations .so-fond-nom,.so-partie .so-fondations small{display:none}
  .so-partie .so-fond .so-past{width:20px;height:20px;font-size:.62rem}
  .so-partie .so-fondations b{font-size:.74rem!important;white-space:nowrap}
  .so-partie .so-haut{grid-column:1;grid-row:4;display:flex!important;flex-wrap:wrap!important;align-content:flex-start;gap:6px!important;overflow:visible!important;margin:0!important}
  .so-partie .so-lab{font-size:.4rem;letter-spacing:.06em;white-space:nowrap}
  .so-partie .so-pied{grid-column:1;grid-row:5;display:flex;flex-wrap:wrap!important;justify-content:flex-start;gap:5px!important;padding:0!important}
  .so-partie .so-pied .btn{font-size:.7rem;padding:.45em .7em;white-space:nowrap}
  .so-partie .so-pied .tag{display:none}
  .so-partie .so-plateau{grid-column:2;grid-row:1/-1;grid-template-columns:repeat(7,minmax(0,1fr))!important;min-width:0;min-height:0!important;height:100%;
    margin:0!important;gap:5px!important;padding-top:2px;overflow-x:hidden!important;overflow-y:auto}
  .so-partie .so-col{min-width:0}
  .so-partie .so-reseau{display:none!important}
  .so-partie .so-msg{position:absolute;left:0;right:0;bottom:6px;z-index:30;margin:0 auto!important;width:max-content;max-width:92%;pointer-events:none;font-size:.78rem}
  .so-partie .so-msg:not(.on){display:none}
}

/* — grands écrans — */
@media (min-width:760px){
  .sor{padding:20px 24px 36px}
  .sor-modes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sor-tuiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sor-tuile.large{grid-column:span 2}
  .sor-paris{grid-template-columns:repeat(2,minmax(0,1fr))}
  .endcard.sor-fin{max-width:760px}
  .sor-fin .sor-fin-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sor-bt--large{flex-basis:160px}
}
@media (max-width:380px){
  .sor{padding:12px 10px 26px}
  .sor .sor-l{width:42px;height:42px}
  .sor-bt{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .sor *,.sor::before,.sor-fin *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* @@ fin solitaire_refonte.css @@ */
/* @@ debut metroking_couleurs.css @@ */
/* ==========================================================================
   MÉTRO KING — LES COULEURS
   Plus de cases blanches ni crème : chaque carte d'interface prend sa couleur
   en dégradé, cernée de noir, avec ses titres blancs ; les plaques émaillées
   pour les titres ; des petites animations partout.
   ========================================================================== */
.ap:has(.ap-stage>.mk-menu){--mkc-k:#0B0E13}
:root{--mkc-cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --mkc-cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --mkc-doux:0 1px 0 rgba(0,0,0,.35);--mkc-res:cubic-bezier(.3,1.5,.5,1)}

/* ————————————————————————————————— l'accueil ————————————————————————————————— */
.ap:has(.ap-stage>.mk-menu) .ap-ban,.ap:has(.ap-stage>.mk-menu) .ap-mascotte{display:none!important}
.ap:has(.ap-stage>.mk-menu) .ap-cadre{margin-top:6px!important}
.ap-stage:has(>.mk-menu){padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.ap-stage:has(>.mk-menu)::before{display:none!important}
.mk-menu{position:relative;isolation:isolate;overflow:clip;padding:14px 14px 28px;border-radius:28px;
  background:radial-gradient(90% 26% at 50% 0,rgba(255,190,255,.4),transparent 70%),linear-gradient(180deg,#C25AE8,#8A34D0 32%,#5A22A8 70%,#36126E);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.mk-menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.13;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220'%3E%3Cg fill='white'%3E%3Cpath d='M40 30l8 14 14-10-4 18H22l-4-18 14 10z'/%3E%3Cpath d='M160 120l7 12 12-8-3 15h-32l-3-15 12 8z'/%3E%3Ccircle cx='170' cy='40' r='8'/%3E%3Ccircle cx='60' cy='170' r='6'/%3E%3Crect x='110' y='60' width='26' height='36' rx='5' transform='rotate(14 123 78)'/%3E%3C/g%3E%3C/svg%3E") 0 0/220px 220px;
  animation:mkcDerive 55s linear infinite}
@keyframes mkcDerive{to{background-position:440px 220px}}
.mk-menu .mk-enseigne{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 9px 0 9.5px #0B0E13!important;margin:8px 8px 0}
/* les deux façons de jouer : deux grandes cases de couleur */
.mk-menu .mk-modes{gap:18px;margin-top:12px}
.mk-menu .mk-mode{color:#fff;align-items:center;text-align:center;box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13!important;animation:mkcPop .5s var(--mkc-res) both}
.mk-menu .mk-mode--solo{background:radial-gradient(120% 80% at 100% 0,rgba(140,210,255,.55),transparent 62%),linear-gradient(170deg,#4C95EA,#1D56B4 70%)!important}
.mk-menu .mk-mode--ligne{background:radial-gradient(120% 80% at 100% 0,rgba(150,255,200,.5),transparent 62%),linear-gradient(170deg,#3ED07A,#0B7A45 70%)!important;animation-delay:.1s}
.mk-menu .mk-mode-sur{position:relative;padding:6px 26px 7px;border-radius:10px;background:#153E8C!important;color:#fff;font-family:var(--display)!important;
  font-size:.95rem!important;font-weight:900;letter-spacing:.01em!important;text-transform:none!important;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,var(--mkc-cadre)}
.mk-menu .mk-mode-sur::before,.mk-menu .mk-mode-sur::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.mk-menu .mk-mode-sur::before{left:10px}.mk-menu .mk-mode-sur::after{right:10px}
.mk-menu .mk-mode--ligne .mk-mode-sur{background:#0E6B3E!important;box-shadow:inset 0 0 0 2px #0E6B3E,inset 0 0 0 3.5px #fff,var(--mkc-cadre)}
.mk-menu .mk-tetes{justify-content:center}
.mk-menu .mk-lab{font-family:var(--display)!important;font-weight:900!important;font-size:.88rem!important;letter-spacing:.01em!important;text-transform:none!important;
  opacity:1!important;color:#fff;text-shadow:var(--mkc-doux)}
.mk-menu .mk-choix-nb{justify-content:center}
.mk-menu .mk-nb{color:#fff;min-width:56px;box-shadow:var(--mkc-cadre)!important;transition:transform .25s var(--mkc-res)}
.mk-menu .mk-nb:nth-child(1){background:linear-gradient(180deg,#62DE98,#0B7A45)}
.mk-menu .mk-nb:nth-child(2){background:linear-gradient(180deg,#FF8CC0,#B8247A)}
.mk-menu .mk-nb:nth-child(3){background:linear-gradient(180deg,#FFA45E,#B8560F)}
.mk-menu .mk-nb:nth-child(4){background:linear-gradient(180deg,#C98BEE,#5A2590)}
.mk-menu .mk-nb:nth-child(5){background:linear-gradient(180deg,#5FD8E8,#0E6F80)}
.mk-menu .mk-nb b{text-shadow:var(--mkc-cont)}
.mk-menu .mk-nb small{font-family:var(--display);font-weight:800;text-shadow:var(--mkc-doux)}
.mk-menu .mk-nb:hover{transform:translateY(-3px)}
.mk-menu .mk-nb.on{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:#0B0E13;transform:translateY(-3px) scale(1.06);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #fff,0 0 0 7.5px #0B0E13,0 5px 0 7.5px #0B0E13!important}
.mk-menu .mk-nb.on b,.mk-menu .mk-nb.on small{text-shadow:none}
.mk-menu .mk-niv-b{color:#fff;align-items:center;text-align:center;
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 85%,#fff),color-mix(in srgb,var(--c) 70%,#0B0E13))!important;box-shadow:var(--mkc-cadre)!important;
  transition:transform .25s var(--mkc-res)}
.mk-menu .mk-niv-b b{font-weight:900;font-size:1rem;text-shadow:var(--mkc-cont)}
.mk-menu .mk-niv-b small{color:#fff!important;font-weight:700;text-shadow:var(--mkc-doux)}
.mk-menu .mk-niv-b:not(.on){filter:saturate(.7) brightness(.9)}
.mk-menu .mk-niv-b.on{transform:translateY(-3px);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #fff,0 0 0 7.5px #0B0E13,0 5px 0 7.5px #0B0E13!important}
.mk-menu .mk-go{align-self:stretch;height:62px;font-size:1.15rem!important;border-radius:18px!important}
.mk-menu .mk-mode--ligne .mk-go{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:#0B0E13!important}
.mk-menu .mk-globe{animation:mkcFlotte 3s ease-in-out infinite}
.mk-menu .mk-mode--ligne{justify-content:center}
@media (min-width:760px){ .mk-menu .mk-mode--ligne .mk-globe{width:120px;height:120px} .mk-menu .mk-mode--ligne .mk-globe svg{width:100%;height:100%} }
@keyframes mkcFlotte{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes mkcPop{from{opacity:0;transform:scale(.6) translateY(12px)}}
/* les deux livres : rouge et turquoise */
.mk-menu .mk-livres{gap:16px}
.mk-menu .mk-livre{grid-template-rows:auto;color:#fff;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13!important;animation:mkcPop .5s var(--mkc-res) both}
.mk-menu .mk-livre--carnet{background:radial-gradient(120% 90% at 100% 0,rgba(255,180,180,.5),transparent 62%),linear-gradient(170deg,#FF6B6B,#C8162F 75%)!important;animation-delay:.2s}
.mk-menu .mk-livre--manuel{background:radial-gradient(120% 90% at 100% 0,rgba(180,250,255,.5),transparent 62%),linear-gradient(170deg,#5FD8E8,#0E6F80 75%)!important;animation-delay:.28s}
.mk-menu .mk-livre b{font-weight:900;font-size:1.05rem;text-shadow:var(--mkc-cont)}
.mk-menu .mk-livre-ico{grid-row:auto;padding:5px;border-radius:14px;background:#fff;box-shadow:var(--mkc-cadre);box-sizing:border-box;width:54px;height:54px}
.mk-menu .mk-livre:hover .mk-livre-ico{animation:mkcSaut .6s var(--mkc-res)}
@keyframes mkcSaut{35%{transform:translateY(-6px) rotate(-8deg) scale(1.08)}70%{transform:translateY(1px) rotate(3deg)}}

/* ————————————————————————————————— à la table ————————————————————————————————— */
/* la barre d'outils : chaque bouton sa couleur, son picto dans un rond blanc */
.mk-hud-b .mk-b{color:#fff;font-family:var(--display)!important;font-size:.68rem!important;font-weight:900!important;letter-spacing:0!important;text-transform:none!important;
  text-shadow:var(--mkc-doux);box-shadow:var(--mkc-cadre)!important}
.mk-hud-b .mk-b svg{width:22px!important;height:22px!important;padding:2px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #0B0E13}
.mk-hud-b .mk-b:nth-child(1){background:linear-gradient(180deg,#FF6B6B,#C8162F)!important}
.mk-hud-b .mk-b:nth-child(2){background:linear-gradient(180deg,#5FD8E8,#0E6F80)!important}
.mk-hud-b .mk-b:nth-child(3){background:linear-gradient(180deg,#C98BEE,#5A2590)!important}
.mk-hud-b .mk-b--vite{background:linear-gradient(180deg,#FFA45E,#B8560F)!important}
.mk-hud-b .mk-b--vite.on{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13;text-shadow:none}
.mk-hud-b .mk-b--plein{background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
.mk-hud-b .mk-b--plein svg{color:#0B57B0}
.mk-hud-b .mk-b--quitter{background:linear-gradient(180deg,#FF8CC0,#B8247A)!important}
.mk-hud-b .mk-b:hover svg{animation:mkcSaut .6s var(--mkc-res)}
/* les joueurs : une carte à leur couleur */
.mk-siege,.mk-moi{color:#fff!important;background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--c,#FFCE00) 45%,#fff),transparent 60%),
  linear-gradient(170deg,color-mix(in srgb,var(--c,#FFCE00) 88%,#fff),color-mix(in srgb,var(--c,#FFCE00) 72%,#0B0E13))!important}
.mk-siege .mk-siege-t b,.mk-moi .mk-siege-t b{text-shadow:var(--mkc-cont)}
.mk-siege .mk-siege-t small,.mk-moi .mk-siege-t small{font-family:var(--display)!important;font-weight:800;letter-spacing:0!important;opacity:1!important;text-shadow:var(--mkc-doux)}
.mk-moi .mk-moi-etat{padding:3px 10px;border-radius:999px;background:#0B0E13;color:#FFCE00;text-shadow:none}
.mk-moi .mk-moi-etat:empty{display:none}
.mk-moi.actif .mk-moi-etat{animation:mkcBat 1.2s ease-in-out infinite}
@keyframes mkcBat{50%{transform:scale(1.08)}}
.mk-cpt{font-family:var(--display)!important;font-weight:900!important;letter-spacing:0!important;background:#0B0E13!important;color:#FFCE00!important}

/* ————————————————————————————————— les panneaux ————————————————————————————————— */
.mk-panneau{color:#fff!important;box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.5)!important;
  background:radial-gradient(110% 60% at 50% 0,rgba(190,170,255,.45),transparent 70%),linear-gradient(175deg,#7B4FE0,#4A2BB0 55%,#2E1878)!important}
.mk-panneau .mk-pan-sur{display:inline-block;padding:4px 14px;border-radius:999px;background:rgba(11,14,19,.4);font-family:var(--display)!important;font-weight:900;
  font-size:.74rem!important;letter-spacing:.02em!important;text-transform:none!important;opacity:1!important}
.mk-panneau .mk-pan-t{color:#fff!important;text-shadow:var(--mkc-cont)}
.mk-panneau .mk-pan-aide{color:#E9DDF7!important;font-weight:700}
/* le pari : des jetons de toutes les couleurs */
.mk-panneau--pari{background:radial-gradient(110% 60% at 50% 0,rgba(140,210,255,.5),transparent 70%),linear-gradient(175deg,#4C95EA,#1D56B4 60%,#163A80)!important}
.mk-panneau--pari .mk-chrono-r{background:#0B1A40!important}
.mk-panneau--pari .mk-chrono-s{color:#fff;text-shadow:var(--mkc-cont)}
.mk-jeton-pari{color:#fff!important;text-shadow:var(--mkc-cont);box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13!important}
.mk-jeton-pari:nth-child(6n+1){background:radial-gradient(circle at 35% 30%,#FFF6C8,#FFCE00 55%,#E0A800)!important;color:#0B0E13!important;text-shadow:none}
.mk-jeton-pari:nth-child(6n+2){background:radial-gradient(circle at 35% 30%,#B8FFD6,#3ED07A 55%,#0B7A45)!important}
.mk-jeton-pari:nth-child(6n+3){background:radial-gradient(circle at 35% 30%,#FFC2DE,#FF5FA2 55%,#B8247A)!important}
.mk-jeton-pari:nth-child(6n+4){background:radial-gradient(circle at 35% 30%,#FFD6B0,#FF8A3D 55%,#B8560F)!important}
.mk-jeton-pari:nth-child(6n+5){background:radial-gradient(circle at 35% 30%,#E6CCFF,#A55BD8 55%,#5A2590)!important}
.mk-jeton-pari:nth-child(6n){background:radial-gradient(circle at 35% 30%,#C6F4FF,#3FC5E0 55%,#0E6F80)!important}
/* le bilan de manche : un titre illustré, un tableau en couleurs */
.mk-panneau--bilan:has(.mk-pan-t.ok){background:radial-gradient(110% 60% at 50% 0,rgba(180,255,210,.5),transparent 70%),linear-gradient(175deg,#3ED07A,#0B7A45 55%,#0A5A35)!important}
.mk-panneau--bilan:has(.mk-pan-t.ko){background:radial-gradient(110% 60% at 50% 0,rgba(255,200,170,.45),transparent 70%),linear-gradient(175deg,#FF8A5E,#C8402F 55%,#8A1F2A)!important}
.mkc-emb{display:block;width:74px;height:74px;margin:-2px 0 -4px}
.mkc-emb svg{display:block;width:100%;height:100%;overflow:visible}
.mkc-emb.ok{animation:mkcCoupe .8s var(--mkc-res) both}
@keyframes mkcCoupe{0%{opacity:0;transform:translateY(-40px) rotate(-20deg) scale(.5)}60%{opacity:1;transform:translateY(4px) rotate(6deg)}100%{transform:none}}
.mkc-emb.ko .mkc-nuage{animation:mkcFlotte 2.4s ease-in-out infinite}
.mkc-emb.ko .mkc-gouttes path{animation:mkcGoutte 1s linear infinite}
.mkc-emb.ko .mkc-gouttes path:nth-child(2){animation-delay:.33s}.mkc-emb.ko .mkc-gouttes path:nth-child(3){animation-delay:.66s}
@keyframes mkcGoutte{0%{transform:translateY(-6px);opacity:0}30%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.mk-panneau--bilan .mk-pan-t{display:inline-block;padding:6px 22px 8px;border-radius:12px;font-size:clamp(1.3rem,5.4vw,1.8rem)!important;transform:rotate(-2deg);
  box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;animation:mkcTampon .6s var(--mkc-res) .2s both}
.mk-panneau--bilan .mk-pan-t.ok{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400);color:#0B0E13!important;text-shadow:none}
.mk-panneau--bilan .mk-pan-t.ko{background:linear-gradient(180deg,#5A6E9C,#2E3A66)}
@keyframes mkcTampon{0%{opacity:0;transform:scale(2.2) rotate(-18deg)}65%{opacity:1;transform:scale(.94) rotate(-3deg)}100%{transform:rotate(-2deg)}}
.mk-bil{gap:7px!important;font-size:.82rem!important}
.mk-bil-l--t{opacity:1!important;font-family:var(--display)!important;font-weight:900!important;font-size:.62rem!important;letter-spacing:0!important;text-transform:none!important}
.mk-bil-l--t span{padding:3px 2px;border-radius:999px;background:#0B0E13;color:#FFCE00;text-align:center}
.mk-bil-l--t span:first-child{background:#153E8C;color:#fff}
.mk-bil-l:not(.mk-bil-l--t){color:#fff;background:linear-gradient(100deg,color-mix(in srgb,var(--c,#5AB0FF) 85%,#fff),color-mix(in srgb,var(--c,#5AB0FF) 70%,#0B0E13))!important;
  box-shadow:var(--mkc-cadre)!important}
.mk-bil-l:not(.mk-bil-l--t) > span{text-shadow:var(--mkc-doux);font-weight:800}
.mk-bil-l:not(.mk-bil-l--t) .mk-bil-nom b{text-shadow:var(--mkc-cont)}
.mk-bil-l .mk-bil-av{padding:1px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #0B0E13}
.mk-bil-l .mk-pos,.mk-bil-l .mk-neg{justify-self:center;min-width:2.4em;padding:1px 6px;border-radius:999px;text-shadow:none!important;text-align:center}
.mk-bil-l .mk-pos{background:#B8FFD6;color:#0A5A35}
.mk-bil-l .mk-neg{background:#FFD0D0;color:#8A1F2A}
.mk-bil-l .mk-bil-tot{justify-self:center;min-width:2.4em;padding:2px 8px;border-radius:10px;background:#0B0E13;color:#FFCE00;text-shadow:none;text-align:center}
.mk-bil-l.moi{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 0 0 7.5px #0B0E13,0 4px 0 7.5px #0B0E13!important;animation:mkLigne .45s var(--ease-back) backwards,mkcBrille 2.4s ease-in-out 1s infinite}
@keyframes mkcBrille{50%{filter:brightness(1.12)}}
/* sur téléphone, deux colonnes sont masquées : la grille n'en garde que cinq
   (avant, « Total » tombait dans une colonne de largeur nulle) */
@media (max-width:760px){
  .mk-bil-l{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.62fr)) minmax(0,.85fr)!important;gap:5px!important;padding:5px 7px!important}
  .mk-bil-l .mk-pos,.mk-bil-l .mk-neg{min-width:0;padding:1px 4px}
  .mk-bil-l .mk-bil-tot{min-width:0;padding:2px 6px}
}
.mk-bil-l.ko:not(.moi){filter:saturate(.75)}
/* la fin : le podium en couleurs */
.mk-panneau--fin.gagne{background:radial-gradient(110% 60% at 50% 0,rgba(255,240,170,.6),transparent 70%),linear-gradient(175deg,#FFC93E,#E8590C 70%)!important}
.mk-pod{color:#fff;box-shadow:var(--mkc-cadre)!important;background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
.mk-pod--1{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13}
.mk-pod--3{background:linear-gradient(180deg,#FFA45E,#B8560F)!important}
.mk-pod:not(.mk-pod--1) b{text-shadow:var(--mkc-cont)}
.mk-pod span{font-family:var(--display)!important;font-weight:800}
.mk-pod u{opacity:.6!important}
/* le tableau de toutes les manches */
.mk-sc-c{color:#0B0E13}
.mk-sc-c.ok{background:linear-gradient(180deg,#B8FFD6,#62DE98)!important}
.mk-sc-c.ko{background:linear-gradient(180deg,#FFD0D0,#FF8A8A)!important}
.mk-sc-m{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#153E8C;color:#fff;box-shadow:0 0 0 2px #0B0E13}
/* les choix d'un pouvoir : plus de bouton blanc */
.mk-pv-b{color:#fff!important;text-shadow:var(--mkc-doux);background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important;box-shadow:var(--mkc-cadre)!important}
.mk-pv-b:first-child{background:linear-gradient(180deg,#FF8CC0,#B8247A)!important}
.mk-pv-b:last-child{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;text-shadow:none}
.mk-pv-b[disabled]{filter:grayscale(.7) brightness(.85)}
.mk-pv-b small{opacity:.95!important;color:inherit!important}
.mk-pv-b.moi{background:linear-gradient(180deg,#62DE98,#0B7A45)!important;color:#fff!important}
.mk-pv-b.doux{background:linear-gradient(180deg,#8A9AC4,#4A5A8C)!important}
/* le premier conseil */
.mk-astuce{color:#fff!important;background:linear-gradient(170deg,#4C95EA,#1D56B4)!important;box-shadow:var(--mkc-cadre)!important}
.mk-astuce b{text-shadow:var(--mkc-doux)}
.mk-astuce small{font-family:var(--display)!important;font-weight:900;letter-spacing:0!important;text-transform:none!important;opacity:1!important;color:#FFCE00}

/* ————————————————————————————————— le carnet et le manuel ————————————————————————————————— */
.mk-modal-b{color:#fff!important;box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13!important;
  background:radial-gradient(110% 40% at 50% 0,rgba(190,170,255,.45),transparent 70%),linear-gradient(175deg,#7B4FE0,#4A2BB0 55%,#2E1878)!important}
.mk-modal-b h3{color:#fff;text-shadow:var(--mkc-cont)}
.mk-carnet-tete p{color:#E9DDF7!important;font-weight:700}
.mk-carnet-ico{padding:4px;border-radius:12px;background:#fff;box-shadow:var(--mkc-cadre);box-sizing:border-box}
.mk-onglet{color:#fff!important;box-shadow:var(--mkc-cadre)!important;transition:transform .25s var(--mkc-res)}
.mk-onglet:nth-child(5n+1){background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
.mk-onglet:nth-child(5n+2){background:linear-gradient(180deg,#FFA45E,#B8560F)!important}
.mk-onglet:nth-child(5n+3){background:linear-gradient(180deg,#FF8CC0,#B8247A)!important}
.mk-onglet:nth-child(5n+4){background:linear-gradient(180deg,#62DE98,#0B7A45)!important}
.mk-onglet:nth-child(5n){background:linear-gradient(180deg,#5FD8E8,#0E6F80)!important}
.mk-onglet{text-shadow:var(--mkc-doux)}
.mk-onglet:hover{transform:translateY(-2px)}
.mk-onglet[aria-selected="true"]{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400)!important;color:#0B0E13!important;text-shadow:none;transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #fff,0 0 0 7px #0B0E13,0 4px 0 7px #0B0E13!important}
.mk-note{color:#fff;background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.06))!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)!important;font-weight:600}
.mk-note--bete{background:linear-gradient(170deg,rgba(98,222,152,.35),rgba(11,122,69,.25))!important}
.mk-spe{color:#fff;background:linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)!important}
.mk-spe-t b{text-shadow:var(--mkc-cont)}
.mk-spe-t small{font-family:var(--display)!important;font-weight:800;letter-spacing:0!important;text-transform:none!important;opacity:1!important;color:#FFCE00}
.mk-sec-t--sp{background:#153E8C!important;color:#fff!important;box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,var(--mkc-cadre)!important;justify-content:center}
.mk-marche,.mk-bar-l{color:#fff;background:linear-gradient(100deg,rgba(255,255,255,.18),rgba(255,255,255,.06))!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)!important}
.mk-marche:nth-child(5n+1){background:linear-gradient(100deg,#4C95EA,#1D56B4)!important}
.mk-marche:nth-child(5n+2){background:linear-gradient(100deg,#C98BEE,#5A2590)!important}
.mk-marche:nth-child(5n+3){background:linear-gradient(100deg,#FF8CC0,#B8247A)!important}
.mk-marche:nth-child(5n+4){background:linear-gradient(100deg,#FFA45E,#B8560F)!important}
.mk-marche:nth-child(5n){background:linear-gradient(100deg,#3ED07A,#0B7A45)!important}
.mk-marche,.mk-bar-l{box-shadow:var(--mkc-cadre)!important}
.mk-marche > div > small{color:#fff!important;opacity:.92}
.mk-boucle{background:linear-gradient(170deg,#FFC93E,#E8590C)!important;color:#0B0E13!important;box-shadow:var(--mkc-cadre)!important}
/* le manuel : chaque page une carte de couleur, son titre sur une plaque */
.mk-page{color:#fff;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13!important;
  background:radial-gradient(110% 60% at 100% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(170deg,#4C95EA,#1D56B4 75%)!important}
.mk-page h4{align-self:center;position:relative;padding:6px 26px 7px;border-radius:10px;background:#153E8C;color:#fff;text-align:center;font-size:1.05rem!important;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,var(--mkc-cadre);animation:mkcTampon .55s var(--mkc-res) both}
.mk-page p{font-weight:600;text-shadow:var(--mkc-doux)}
.mk-page p b{color:#FFE45C}
.mk-ex{background:linear-gradient(170deg,#1C7A4A,#0E5233)!important;box-shadow:inset 0 0 0 3px #FFCE00,0 0 0 2.5px #0B0E13!important}
.mk-ex-r{background:#FFCE00!important;color:#0B0E13!important;box-shadow:var(--mkc-cadre)!important}
.mk-livre-n{font-family:var(--display)!important;font-weight:900!important;padding:4px 10px;border-radius:999px;background:#0B0E13;color:#FFCE00}
.mk-livre-nav{gap:8px!important}
.mk-livre-nav .btn{flex:1 1 0;min-width:0;padding-left:.6em!important;padding-right:.6em!important;border-radius:14px!important;white-space:nowrap;font-size:.86rem!important}
.mk-livre-n{flex:none;white-space:nowrap}
.mk-livre-nav .btn:not(.btn--solid){color:#fff!important;background:linear-gradient(180deg,#FF8CC0,#B8247A)!important;box-shadow:var(--mkc-cadre)!important;text-shadow:var(--mkc-doux)}

/* l'ouverture de partie : les pastilles et le bouton, rien d'autre */
.mk-intro{gap:22px!important}

@media (prefers-reduced-motion:reduce){
  .mk-menu::before,.mk-menu *,.mk-panneau *,.mk-page h4{animation:none!important}
}
/* @@ fin metroking_couleurs.css @@ */
/* @@ debut cartes_avatar.css @@ */
/* ==========================================================================
   MON AVATAR — l'éditeur et la carte des menus
   ========================================================================== */
.pav-fond,.pav-carte{--k:#0B0E13;--bl:#153E8C;--j:#FFCE00;--res:cubic-bezier(.3,1.5,.5,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35)}
/* — la carte des menus — */
.pav-carte{display:flex!important;align-items:center;gap:12px;width:min(420px,calc(100% - 16px));margin:14px auto 4px;padding:6px 14px 6px 6px!important;border:0;
  border-radius:20px;cursor:pointer;color:#fff;font-family:var(--display);text-align:left;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,220,140,.5),transparent 62%),linear-gradient(165deg,#FF8A3D,#D9480F 75%);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .25s var(--res);animation:pavPop .5s var(--res) both}
.pav-carte:hover{transform:translateY(-3px) rotate(-.6deg)}
.pav-carte:active{transform:translateY(4px)}
.pav-carte-v{flex:none;width:62px;height:66px;border-radius:16px;background:radial-gradient(circle at 50% 40%,#FFF6DC,#FFD27A);box-shadow:0 0 0 2.5px #0B0E13;overflow:hidden}
.pav-carte-v svg{display:block;width:100%;height:100%}
.pav-carte-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.pav-carte-t small{font-weight:800;font-size:.76rem;opacity:.95;text-shadow:var(--doucement)}
.pav-carte-t b{font-weight:900;font-size:1.25rem;text-shadow:var(--cont);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pav-carte-cr{flex:none;width:38px;height:38px;padding:6px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px #0B0E13;animation:pavCrayon 2.4s ease-in-out infinite}
.pav-carte-cr svg{display:block;width:100%;height:100%}
@keyframes pavCrayon{0%,70%,100%{transform:none}80%{transform:rotate(-14deg)}90%{transform:rotate(8deg)}}
@keyframes pavPop{from{opacity:0;transform:scale(.6) translateY(10px)}}

/* — l'éditeur — */
.pav-fond{position:fixed;inset:0;z-index:9200;display:grid;place-items:center;padding:12px;background:rgba(8,14,40,.66);animation:pavFond .25s ease both}
.pav-fond.sort{opacity:0;transition:opacity .2s}
@keyframes pavFond{from{opacity:0}}
.pav{position:relative;width:min(560px,100%);max-height:calc(100dvh - 24px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:26px;color:#fff;
  font-family:var(--body);background:radial-gradient(110% 40% at 50% 0,rgba(255,200,140,.4),transparent 70%),linear-gradient(175deg,#4C95EA,#1D56B4 50%,#163A80);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 60px rgba(0,0,0,.45);animation:pavBoite .45s var(--res) both}
@keyframes pavBoite{from{opacity:0;transform:translateY(30px) scale(.9)}}
.pav > *{flex-shrink:0}
.bltl > *{flex-shrink:0}
.pav-tete{display:flex;align-items:center;justify-content:center;position:relative}
.pav-plaque{margin:0}
.pav-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.1rem;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre)}
.pav-plaque span::before,.pav-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.pav-plaque span::before{left:11px}.pav-plaque span::after{right:11px}
.pav-x{position:absolute;right:0;top:50%;margin-top:-20px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;font-size:1.6rem;font-weight:900;line-height:1;
  color:#fff;background:linear-gradient(180deg,#FF5A78,#C8102E);box-shadow:var(--cadre)}
.pav-haut{display:flex;align-items:center;gap:14px;justify-content:center}
.pav-apercu{flex:none;width:clamp(120px,34vw,170px);aspect-ratio:60/66;border-radius:24px;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#FFF6DC,#FFD27A 60%,#F5A623);box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 8px 0 9.5px #0B0E13}
.pav-apercu svg{display:block;width:100%;height:100%}
.pav-apercu.pop svg{animation:pavHop .45s var(--res)}
@keyframes pavHop{35%{transform:translateY(-6px) scale(1.04)}}
.pav-nom{flex:1;min-width:0;max-width:220px;display:flex;flex-direction:column;gap:6px}
.pav-nom small{font-family:var(--display);font-weight:900;font-size:.85rem;text-shadow:var(--doucement)}
.pav-prenom{width:100%;height:46px;padding:0 14px;border:0;border-radius:14px;font-family:var(--display);font-weight:900;font-size:1.15rem;color:#0B0E13;
  background:#FFFDF4;box-shadow:var(--cadre);outline:none}
.pav-prenom:focus{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 4px 0 5px #0B0E13}
/* les onglets : une pastille de couleur chacun */
.pav-onglets{display:flex;gap:8px;overflow-x:auto;padding:6px 4px 10px;scrollbar-width:none}
.pav-onglets::-webkit-scrollbar{display:none}
.pav-o{flex:none;height:38px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:.86rem;color:#fff;
  background:linear-gradient(180deg,var(--a),var(--b));text-shadow:var(--doucement);box-shadow:var(--cadre);transition:transform .25s var(--res)}
.pav-o:hover{transform:translateY(-2px)}
.pav-o.on{background:linear-gradient(180deg,#FFE45C,#F5B400);color:#0B0E13;text-shadow:none;transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #fff,0 0 0 7px #0B0E13,0 4px 0 7px #0B0E13}
.pav-corps{display:flex;flex-direction:column;gap:10px}
.pav-t{font-family:var(--display);font-weight:900;font-size:.95rem;text-shadow:var(--doucement)}
.pav-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.pav-c{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 4px 6px;border:0;border-radius:16px;cursor:pointer;color:#fff;
  background:linear-gradient(170deg,rgba(255,255,255,.2),rgba(255,255,255,.06));box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);
  transition:transform .25s var(--res);animation:pavPop .35s var(--res) both;animation-delay:calc(var(--n)*25ms)}
.pav-c-v{display:block;width:62px;height:66px;border-radius:12px;background:radial-gradient(circle at 50% 40%,#FFF6DC,#FFD27A);box-shadow:0 0 0 2px #0B0E13;overflow:hidden}
.pav-c-v svg{display:block;width:100%;height:100%}
.pav-c small{font-family:var(--display);font-weight:800;font-size:.7rem;line-height:1.1;text-align:center;text-shadow:var(--doucement)}
.pav-c:hover{transform:translateY(-3px)}
.pav-c.on{background:linear-gradient(170deg,#FFE45C,#F5B400);color:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.pav-c.on small{text-shadow:none}
.pav-teintes{display:flex;flex-wrap:wrap;gap:9px}
.pav-teinte{width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;background:var(--c);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .2s var(--res)}
.pav-teinte:hover{transform:scale(1.1)}
.pav-teinte.on{transform:scale(1.15);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #fff,0 0 0 7.5px #0B0E13}
.pav-pied{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:sticky;bottom:-14px;margin:4px -14px -14px;padding:12px 14px 14px;
  background:linear-gradient(180deg,rgba(22,58,128,0),#163A80 30%)}
.pav-b{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:1.05rem;color:#fff;text-shadow:var(--cont);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;transition:transform .2s var(--res)}
.pav-b:active{transform:translateY(4px)}
.pav-b-i{width:46px;height:38px}
.pav-b-i svg{display:block;width:100%;height:100%;overflow:visible}
.pav-b--rose{background:linear-gradient(180deg,#FF5A78,#C8102E 55%,#7A0020)}
.pav-b--or{background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400);color:#0B0E13;text-shadow:none}
@media (max-width:420px){
  .pav{padding:12px}
  .pav-haut{flex-direction:column;gap:10px}
  .pav-nom{max-width:none;width:100%}
  .pav-choix{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .pav-c-v{width:100%;height:auto;aspect-ratio:60/66}
}
@media (prefers-reduced-motion:reduce){ .pav-fond *,.pav-carte,.pav-carte *{animation:none!important} }
/* @@ fin cartes_avatar.css @@ */
/* @@ debut belote_annonces.css @@ */
/* ==========================================================================
   MÉTRO BELOTE — LE LIVRE DES ANNONCES ET SES BOUTONS
   ========================================================================== */
.bltl-fond,.bltl-bouton,.bltl-menu-b{--k:#0B0E13;--bl:#153E8C;--res:cubic-bezier(.3,1.5,.5,1);
  --cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  --cont:0 2px 0 #0B0E13,1.6px 0 0 #0B0E13,-1.6px 0 0 #0B0E13,0 -1.6px 0 #0B0E13,1.2px 1.2px 0 #0B0E13,-1.2px 1.2px 0 #0B0E13;
  --doucement:0 1px 0 rgba(0,0,0,.35)}
.bltl-menu-b{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:16px auto 26px;width:min(860px,100%)}
.bltl-menu-b .pav-carte{margin:0;flex:1 1 280px;width:auto;max-width:420px}
.bltl-bouton{flex:1 1 280px;max-width:420px;display:flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border:0;border-radius:20px;cursor:pointer;color:#fff;text-align:left;
  font-family:var(--display);background:radial-gradient(120% 90% at 100% 0,rgba(180,220,255,.5),transparent 62%),linear-gradient(165deg,#5AB0FF,#0B57B0 75%);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .25s var(--res);animation:bltlPop .5s var(--res) .1s both}
.bltl-bouton:hover{transform:translateY(-3px) rotate(-.6deg)}
.bltl-bouton:active{transform:translateY(4px)}
.bltl-bouton-i{flex:none;width:62px;height:62px;padding:8px;box-sizing:border-box;border-radius:16px;background:#FFFDF4;box-shadow:0 0 0 2.5px #0B0E13}
.bltl-bouton-i svg{display:block;width:100%;height:100%}
.bltl-bouton:hover .bltl-bouton-i svg{animation:bltlSaut .6s var(--res)}
.bltl-bouton-t{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bltl-bouton-t small{font-weight:800;font-size:.76rem;text-shadow:var(--doucement)}
.bltl-bouton-t b{font-weight:900;font-size:1.15rem;text-shadow:var(--cont)}
@keyframes bltlPop{from{opacity:0;transform:scale(.6) translateY(10px)}}
@keyframes bltlSaut{35%{transform:translateY(-5px) rotate(-8deg) scale(1.08)}70%{transform:translateY(1px) rotate(3deg)}}
/* le bouton du livre dans la barre de la table */
.blt-ico-b--livre{background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important;color:#fff!important}
.blt-ico-b--ann{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;animation:bltlAppel 2.4s ease-in-out infinite}
@keyframes bltlAppel{0%,80%,100%{transform:none}88%{transform:scale(1.08) rotate(-3deg)}}

/* — le livre — */
.bltl-fond{position:fixed;inset:0;z-index:9300;display:grid;place-items:center;padding:12px;background:rgba(8,14,40,.66);animation:bltlFond .25s ease both}
.bltl-fond.sort{opacity:0;transition:opacity .2s}
@keyframes bltlFond{from{opacity:0}}
.bltl{position:relative;width:min(760px,100%);max-height:calc(100dvh - 24px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:26px;color:#fff;
  font-family:var(--body);background:radial-gradient(110% 40% at 50% 0,rgba(140,230,170,.4),transparent 70%),linear-gradient(175deg,#1FA463,#0E7C4A 50%,#0A5A35);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 10px 0 9.5px #0B0E13,0 30px 60px rgba(0,0,0,.45);animation:bltlBoite .45s var(--res) both}
@keyframes bltlBoite{from{opacity:0;transform:translateY(30px) scale(.9)}}
.bltl-tete{position:relative;display:flex;justify-content:center;align-items:center}
.bltl-plaque{display:flex;justify-content:center;margin:6px 0 2px}
.bltl-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:var(--bl);font-family:var(--display);font-weight:900;font-size:1.05rem;color:#fff;
  box-shadow:inset 0 0 0 2px var(--bl),inset 0 0 0 3.5px #fff,var(--cadre);animation:bltlPlaque .5s var(--res) both}
.bltl-plaque span::before,.bltl-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.bltl-plaque span::before{left:11px}.bltl-plaque span::after{right:11px}
@keyframes bltlPlaque{from{opacity:0;transform:translateY(-10px) rotate(-3deg)}}
.bltl-x{position:absolute;right:0;top:50%;margin-top:-20px;width:40px;height:40px;border:0;border-radius:50%;cursor:pointer;font-size:1.6rem;font-weight:900;line-height:1;
  color:#fff;background:linear-gradient(180deg,#FF5A78,#C8102E);box-shadow:var(--cadre)}
.bltl-info{align-self:center;margin:0;padding:5px 14px;border-radius:999px;background:#FFCE00;color:#0B0E13;font-family:var(--display);font-weight:900;font-size:.82rem;text-align:center;box-shadow:var(--cadre)}
.bltl-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.bltl-t{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 12px;border-radius:18px;text-align:center;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.3),transparent 60%),linear-gradient(165deg,var(--a),var(--b));box-shadow:var(--cadre);
  animation:bltlPop .45s var(--res) both;animation-delay:calc(var(--n)*55ms)}
.bltl-art{display:block;width:100%;max-width:150px;height:62px}
.bltl-art svg{display:block;width:100%;height:100%;overflow:visible}
.bltl-t:hover .bltl-art svg{animation:bltlSaut .6s var(--res)}
.bltl-t b{font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1.1;text-shadow:var(--cont)}
.bltl-t small{font-weight:700;font-size:.74rem;line-height:1.3;text-shadow:var(--doucement)}
.bltl-pts{position:absolute;top:-10px;right:-8px;min-width:44px;padding:3px 9px;border-radius:999px;font-style:normal;font-family:var(--display);font-weight:900;font-size:.92rem;
  color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:var(--cadre);transform:rotate(6deg)}
.bltl-ok{align-self:center;width:min(320px,100%);height:56px;margin-top:6px;border:0;border-radius:16px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:1.1rem;
  color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#FFCE00 55%,#F5B400);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.bltl-ok:active{transform:translateY(4px)}
@media (min-width:640px){ .bltl-g{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .bltl-fond *,.bltl-bouton,.blt-ico-b--ann{animation:none!important} }
/* @@ fin belote_annonces.css @@ */
/* @@ debut metropoker5.css @@ */
/* ==========================================================================
   MÉTRO POKER — MINUTEURS, « i » DES BONUS, MENU ET BARÈME À JOUR
   ========================================================================== */
/* les règles en cinq temps : leur corps était masqué (reste d'un ancien accordéon) */
.mpk3-panneau .mpk-regles-corps{display:block!important;padding:0 4px 4px}
.mpk5-regles .mpk-regles-p{margin:8px 0 0!important;padding:8px 12px;border-radius:14px;color:#fff!important;font-family:var(--display);font-weight:800;font-size:.86rem;line-height:1.35;
  background:linear-gradient(165deg,#5AB0FF,#0B57B0);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;text-shadow:0 1px 0 rgba(0,0,0,.35);opacity:1!important}
.mpk5-regles .mpk-regles-p:nth-of-type(2){background:linear-gradient(165deg,#3ED07A,#0B7A45)}
.mpk5-regles .mpk-regles-p:nth-of-type(3){background:linear-gradient(165deg,#C98BEE,#5A2590)}
.mpk5-regles .mpk-regles-p:nth-of-type(4){background:linear-gradient(165deg,#FF5A78,#C8102E)}
/* les bulles « i » passent devant les surcouches du jeu */
.mcf-pop{z-index:9600!important}

/* — le minuteur : un anneau qui se vide — */
.mpk5-chrono{position:relative;flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:conic-gradient(#3ED07A var(--mpk5p,100%),#0B1A40 0);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;animation:mpk5Vide var(--d) linear forwards}
@property --mpk5p{syntax:"<percentage>";inherits:false;initial-value:100%}
@keyframes mpk5Vide{from{--mpk5p:100%}to{--mpk5p:0%}}
.mpk5-chrono-r{position:absolute;inset:6px;border-radius:50%;background:#FFFDF4;box-shadow:inset 0 0 0 2px #0B0E13}
.mpk5-chrono b{position:relative;font-family:var(--display);font-weight:900;font-size:.95rem;color:#0B0E13;font-variant-numeric:tabular-nums}
.mpk5-chrono.presse{background:conic-gradient(#FF3D5E var(--mpk5p,100%),#0B1A40 0);animation:mpk5Vide var(--d) linear forwards,mpk5Bat .5s ease-in-out infinite}
@keyframes mpk5Bat{50%{transform:scale(1.1)}}
.mpk3-panneau--ann > .mpk5-chrono{position:absolute;top:10px;left:10px;z-index:3}

/* — le « i » des bonus — */
.mpk5-loupe-i{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:6px 16px 6px 6px;border-radius:999px;
  background:linear-gradient(180deg,#5AB0FF,#0B57B0);color:#fff;font-family:var(--display);font-weight:900;font-size:.95rem;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.mpk3-loupe{flex-direction:column;align-items:center}
.mpk3-loupe .mpk-b-txt b,.mpk3-loupe .mpk-b-txt small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.05}
.mpk5-loupe-i .mcf-i{margin:0;width:32px;height:32px;font-size:1.15rem}
.mpk3-ec-b .mpk5-i{position:absolute;top:-8px;right:-8px;z-index:3;margin:0;width:28px;height:28px}

/* — le menu : des titres en plaques, des questions lisibles — */
.mpk5-plaque{align-self:center!important;margin:0 0 6px!important;padding:0!important;background:none!important;letter-spacing:0!important;text-transform:none!important}
.mpk5-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:#153E8C;color:#fff;font-family:var(--display);font-weight:900;font-size:1.02rem;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mpk5-plaque span::before,.mpk5-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.mpk5-plaque span::before{left:11px}.mpk5-plaque span::after{right:11px}
.mpk5-plaque--or span{background:#B0243F;box-shadow:inset 0 0 0 2px #B0243F,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mpk5-q{display:flex!important;align-items:center;gap:8px;margin:12px 0 2px!important;font-family:var(--display)!important;font-size:1rem!important;font-weight:900!important;
  letter-spacing:0!important;text-transform:none!important;color:#0B0E13}
.mpk5-q-i{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:5px;box-sizing:border-box;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.mpk5-q-i span,.mpk5-q-i svg{display:block;width:100%;height:100%}

/* — les lignes de la manche : elles arrivent quand elles changent — */
.mpk3-lignes.neuf .mpk3-pas{animation:mpk5Ligne .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--k,0)*90ms)}
@keyframes mpk5Ligne{0%{transform:scale(0) rotate(-120deg)}100%{transform:none}}

/* — le barème : la correspondance bonus a sa pastille, et sa propre échelle — */
.mpk5-cb{display:inline-flex;align-items:center;gap:2px}
.mpk5-cb i{display:block;width:10px;height:14px;border-radius:3px;background:#C98BEE;box-shadow:0 0 0 1.5px #0B0E13}
.mpk5-cb i + i{width:12px;height:12px;border-radius:50%;background:#FFCE00}
.mpk4-def--bonus{background:linear-gradient(165deg,#C98BEE,#5A2590)!important;color:#fff}
.mpk5-cumul{margin-top:10px}
.mpk5-cumul--cc{background:linear-gradient(165deg,#5AB0FF,#0B57B0)!important;color:#fff}
.mpk5-cumul--cb{background:linear-gradient(165deg,#C98BEE,#5A2590)!important;color:#fff}
.mpk5-note{margin:10px 0 0;padding:6px 12px;border-radius:12px;background:#FFCE00;color:#0B0E13;font-family:var(--display);font-weight:900;font-size:.82rem;text-align:center;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
@media (prefers-reduced-motion:reduce){ .mpk5-chrono{animation:none} .mpk3-lignes.neuf .mpk3-pas{animation:none} }
/* @@ fin metropoker5.css @@ */
/* @@ debut metrocity_maquette.css @@ */
/* ==========================================================================
   METRO CITY — LE PLAN EN MAQUETTE
   Sol peint en canevas sous les calques, monuments en relief, lignes en tubes,
   outils ronds sur un rail crème, rose des vents, échelle, flou des lointains.
   ========================================================================== */
.mc-mapwrap.mcd{background:#E9E1CC}
.mc-mapwrap>canvas.mcd-sol{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
/* plus de voile en haut du plan : il brouillait les monuments ; plus d'avion publicitaire ni de montgolfière */
.mc-mapwrap.mcd .mc-sky{display:none}
.mc-mapwrap.mcd :is(.mcg-avion,.mcg-ballon){display:none!important}
.mc-mapwrap.mcd .mc-vig{box-shadow:inset 0 0 0 3px rgba(255,255,255,.32),inset 0 0 70px rgba(96,74,34,.20)}
/* le flou des lointains : en haut et en bas, comme une maquette photographiée */
.mcd-flou{position:absolute;left:0;right:0;z-index:2;pointer-events:none;-webkit-backdrop-filter:blur(1.4px);backdrop-filter:blur(1.4px)}
.mcd-flou--h{top:0;height:14%;-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent)}
.mcd-flou--b{bottom:0;height:11%;-webkit-mask-image:linear-gradient(transparent,#000 80%);mask-image:linear-gradient(transparent,#000 80%)}

/* — les lignes en tubes — */
/* les lignes pas encore construites : visibles, mais en retrait, transparentes */
.mc-mapwrap.mcd .mcd-fant{opacity:.22}
/* plus de pastilles blanches : les arrêts sont posés sur la voie de chaque ligne */
.mc-mapwrap.mcd .mcq-fond .mc-dot{display:none!important}
.mc-mapwrap.mcd .mcd-stop{pointer-events:none}
.mc-mapwrap.mcd .mc-ghost{opacity:1}
.mc-mapwrap.mcd :is(.mcd-f-ombre,.mcd-f-halo,.mcd-f-bord,.mcd-f-reflet,.mcd-reflet,.mcd-halo){fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mc-mapwrap.mcd :is(.mcd-f-halo,.mcd-halo){opacity:.92}
.mc-mapwrap.mcd .mcd-reflet{opacity:.9}
.mc-mapwrap.mcd .mcd-f-reflet{opacity:.85}
.mc-mapwrap.mcd .mcd-liseret{opacity:.95}
.mc-mapwrap.mcd :is(.mcd-cerne,.mcd-lustre,.mcd-f-liseret){fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mc-mapwrap.mcd .mcd-lustre{opacity:.4}
/* les stations du joueur : sobres, un disque de la couleur de sa ligne */
.mc-mapwrap.mcd .mc-st circle.ring{stroke-width:2.7px!important}
.mc-mapwrap.mcd .mc-st.mcd-st-corr circle.ring{stroke-width:2px!important}
.mc-mapwrap.mcd .mc-st:hover circle.ring{stroke-width:3.3px!important}
.mc-mapwrap.mcd .mc-st.sel circle.ring{fill:#FFCE00!important;stroke:#2B2620!important}
.mc-mapwrap.mcd .mc-st path{display:none}
/* le halo reste pour le toucher, mais invisible */
.mc-mapwrap.mcd .mc-pulse{opacity:0!important}
/* plus d'ondes autour des grandes stations : le plan reste sobre */
.mc-mapwrap.mcd .mcq-pouls{display:none}
/* les noms, comme sur le plan : du texte sombre détouré de crème, sans étiquette */
.mc-mapwrap.mcd .mc-lab rect{fill:none!important;stroke:none!important}
.mc-mapwrap.mcd .mc-lab text{fill:#1F1F1F;font-weight:800;paint-order:stroke;stroke:#FFF8E8;stroke-width:.34em;stroke-linejoin:round}
.mc-mapwrap.mcd .mc-lab.sel text{fill:#000;stroke:#FFCE00}
/* les petits immeubles des stations et l'ancien monument d'or : la maquette les remplace */
.mc-mapwrap.mcd .mc-bldg,.mc-mapwrap.mcd .mc-or-monu{display:none}

/* — les monuments — */
.mcd-reperes{pointer-events:none}
/* le bouton « monuments » : masqués, sauf les monuments d'or */
.mc-mapwrap.mcd-sans-monu .mcd-rep:not(.mcd-rep--or):not(.mcd-rep--hors){display:none}
.mc-mapwrap.mcd-sans-or .mcd-rep--or{display:none}
/* le bouton des monuments d'or : une étoile dorée quand il est allumé */
.mc-mapwrap.mcd .mc-tool.mcd-b-or.on{color:#7A4E00;background:radial-gradient(120% 95% at 50% 12%,#FFF8D6,#FFD84E 46%,#E0A20A)}
.mcd-phare{animation:mcdPhare 2.2s ease-in-out infinite}
@keyframes mcdPhare{50%{opacity:.2}}
.mcd-ailes{transform-box:fill-box;transform-origin:center;animation:mcdAiles 8s linear infinite}
@keyframes mcdAiles{to{transform:rotate(360deg)}}
.mcd-jet{animation:mcdJet 1.6s ease-in-out infinite}
@keyframes mcdJet{50%{opacity:.35}}
.mcd-rayon{animation:mcdRayon 3.2s ease-in-out infinite}
@keyframes mcdRayon{50%{opacity:.5}}
.mcd-etoile path{transform-box:fill-box;transform-origin:center;animation:mcdEtoile 2.6s ease-in-out infinite}
@keyframes mcdEtoile{50%{transform:scale(1.25) rotate(18deg)}}
.mcd-scint{transform-box:fill-box;transform-origin:center;animation:mcdScint 1.8s ease-in-out infinite;animation-delay:calc(var(--k,0)*-.6s)}
@keyframes mcdScint{0%,100%{transform:scale(.3);opacity:.15}50%{transform:scale(1.2);opacity:1}}
.mcd-drapeau{transform-box:fill-box;transform-origin:left center;animation:mcdDrapeau 1.4s ease-in-out infinite}
@keyframes mcdDrapeau{50%{transform:skewY(7deg) scaleX(.9)}}
/* les aéroports : radar qui tourne, balise qui clignote, feux d'approche qui filent */
.mcd-radar{transform-box:fill-box;transform-origin:center;animation:mcdAiles 3s linear infinite}
.mcd-balise{animation:mcdPhare 1.1s steps(2) infinite}
.mcd-feux{animation:mcdFeux 1.2s linear infinite}
@keyframes mcdFeux{to{stroke-dashoffset:-10.4}}
.mc-mapwrap.mc-gele :is(.mcd-phare,.mcd-ailes,.mcd-jet,.mcd-rayon,.mcd-etoile path,.mcd-scint,.mcd-drapeau,.mcd-radar,.mcd-balise,.mcd-feux){animation-play-state:paused}

/* — les outils : des pastilles rondes et bombées sur un rail crème — */
.mc-mapwrap.mcd .mc-tools{top:12px;right:12px;gap:8px;padding:6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(252,247,234,.84),rgba(234,223,199,.80));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(138,114,74,.5),0 8px 18px rgba(70,50,20,.28);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.mc-mapwrap.mcd .mc-tool,.mc-mapwrap.mcd .mc-tools .mob-fs--outil{width:42px;height:42px;padding:0!important;border:0;border-radius:50%!important;display:grid;place-items:center;color:#2D2820;
  background:radial-gradient(120% 95% at 50% 12%,#FFFFFF,#F7F0E0 46%,#E0D2B4);
  box-shadow:inset 0 -2px 0 rgba(150,124,80,.32),inset 0 1px 0 #FFFFFF,0 0 0 1px rgba(128,105,66,.6),0 3px 0 rgba(128,105,66,.55),0 6px 9px rgba(60,40,10,.24);
  transition:transform .15s,box-shadow .15s}
.mc-mapwrap.mcd .mc-tool svg{display:block;width:22px!important;height:22px!important;margin:0}
.mc-mapwrap.mcd .mc-tools .mob-fs--outil svg{width:19px!important;height:19px!important}
.mc-mapwrap.mcd .mc-tool:hover{transform:translateY(-1px);background:radial-gradient(120% 95% at 50% 12%,#FFFFFF,#FBF6EA 46%,#E8DCC1)}
.mc-mapwrap.mcd .mc-tool:active,.mc-mapwrap.mcd .mc-tools .mob-fs--outil:active{transform:translateY(2px);
  box-shadow:inset 0 -1px 0 rgba(150,124,80,.32),0 0 0 1px rgba(128,105,66,.6),0 1px 0 rgba(128,105,66,.55),0 2px 4px rgba(60,40,10,.2)}
.mc-mapwrap.mcd .mc-tool.on{color:#2A1E04;background:radial-gradient(120% 95% at 50% 12%,#FFF6C2,#FFD63E 48%,#EEA900);
  box-shadow:inset 0 -2px 0 rgba(160,100,0,.35),inset 0 1px 0 #FFF8D8,0 0 0 1px rgba(150,98,0,.7),0 3px 0 rgba(150,98,0,.6),0 6px 9px rgba(90,60,0,.26)}
.mc-mapwrap.mcd .mc-tool::after{color:#2D2820;background:#FBF5E6;font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:0;border-radius:10px;
  box-shadow:0 0 0 1px rgba(128,105,66,.55),0 4px 10px rgba(60,40,10,.22)}
/* la rose des vents */
.mc-mapwrap.mcd .mc-rose{left:12px;top:12px;width:58px;height:58px;filter:none}
/* l'échelle : une barre et sa distance */
.mc-mapwrap.mcd .mc-scale{right:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:7px 13px 7px 12px;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.8rem;color:#2D2820;letter-spacing:0;
  background:linear-gradient(180deg,#FFFDF6,#EEE3CB);
  box-shadow:inset 0 1px 0 #FFFFFF,0 0 0 1px rgba(128,105,66,.55),0 3px 0 rgba(128,105,66,.45),0 6px 10px rgba(60,40,10,.22)}
.mc-mapwrap.mcd .mc-scale b{font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.mcd-barre{position:relative;display:block;height:9px;flex:none;border-left:2px solid #2D2820;border-right:2px solid #2D2820;box-sizing:border-box}
.mcd-barre::before{content:"";position:absolute;left:0;right:0;top:3.5px;height:2px;background:#2D2820}
@media (max-width:520px){
  .mc-mapwrap.mcd .mc-tools{gap:5px;padding:4px}
  .mc-mapwrap.mcd .mc-tool,.mc-mapwrap.mcd .mc-tools .mob-fs--outil{width:34px;height:34px}
  .mc-mapwrap.mcd .mc-tool svg{width:18px!important;height:18px!important}
  .mc-mapwrap.mcd .mc-rose{width:50px;height:50px}
  .mcd-flou--h{height:11%}
}
@media (prefers-reduced-motion:reduce){
  .mcd-reperes *{animation:none!important}
}
/* @@ fin metrocity_maquette.css @@ */
/* @@ debut accueil_lot1.css @@ */
/* ==========================================================================
   RETOUCHES DU 07/10 — LOT 1
   ========================================================================== */
/* plus d'ovale « Jeu principal » à côté du bouton Accueil, dans aucun jeu */
.ap-chip{display:none!important}

/* — Snake : le bandeau de titre en haut de l'accueil — */
.sk4-ban{position:relative;height:clamp(190px,50vw,290px);margin:12px 12px 4px;border-radius:24px;overflow:hidden;background:#1B4396;
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k);animation:sk4BanZoom .6s var(--res) both}
@keyframes sk4BanZoom{from{opacity:0;transform:scale(.92) rotate(-1deg)}}
.sk4-ban-fond,.sk4-ban-fond svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sk4-ban::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,20,60,.5),transparent 38%,transparent 72%,rgba(8,20,60,.4))}
.sk4-ban-flot{animation:sk4BanFlot 3s linear infinite}
@keyframes sk4BanFlot{to{stroke-dashoffset:-48}}
.sk4-ban-haut{position:absolute;z-index:1;left:14px;right:14px;top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sk4-ban-t{margin:0;display:flex;flex-direction:column;align-items:flex-start;font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;
  font-size:clamp(2rem,10vw,3.4rem);letter-spacing:.01em;color:#fff;text-shadow:var(--cont2)}
.sk4-ban-t span{animation:sk4BanTitre .6s var(--res) both}
.sk4-ban-t span:nth-child(2){color:var(--j);animation-delay:.1s}
@keyframes sk4BanTitre{from{opacity:0;transform:translateY(-14px) rotate(-4deg) scale(.8)}}
.sk4-ban .sk4-ban-livre{width:54px;height:54px;padding:9px!important;border-radius:16px;background:var(--j)!important;box-shadow:var(--cadre);transition:transform .25s var(--res)}
.sk4-ban .sk4-ban-livre:hover{transform:translateY(-3px) rotate(-6deg)}
.sk4-ban .sk4-ban-livre:active{transform:translateY(3px)}
.sk4-ban .sk4-ban-livre .rnr-svg,.sk4-ban .sk4-ban-livre svg{display:block;width:100%;height:100%;overflow:visible}
.sk4-ban-bas{position:absolute;z-index:1;left:14px;right:14px;bottom:12px;display:flex;gap:8px}
@media (min-width:760px){ .sk4-ban{margin:18px 22px 6px} }
@media (prefers-reduced-motion:reduce){ .sk4-ban,.sk4-ban *{animation:none!important} }

/* — La page d'une ligne : un fond de la couleur de la ligne, plus de quadrillage crème — */
.lineshow{background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1.4px,transparent 1.6px) 0 0/26px 26px,
    radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--c,#0064B0) 55%,#2B62C4),transparent 70%),
    linear-gradient(180deg,#1C3F86,#102654)!important}
.ls-stage{background:
    radial-gradient(60% 80% at 15% 20%,rgba(255,255,255,.55),transparent 60%),
    linear-gradient(180deg,color-mix(in srgb,var(--c,#0064B0) 12%,#EAF4FC),color-mix(in srgb,var(--c,#0064B0) 26%,#CFE4F5))!important}
#ls-ghost{stroke:rgba(11,14,19,.85)}
.ls-lab{background:var(--c,#0064B0)!important;color:var(--ci,#fff)!important;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13!important}
/* les lieux desservis : des cartes de la couleur de la ligne */
.ls-monu{background:linear-gradient(165deg,color-mix(in srgb,var(--c) 45%,#fff),var(--c))!important;color:var(--ci,#fff)!important}
.ls-monu::before{background:color-mix(in srgb,var(--c) 70%,#0B0E13)!important}
.ls-monu b{color:var(--ci,#fff)!important;text-shadow:none}
.ls-monu small{color:var(--ci,#fff)!important;opacity:.85}
.ls-monu-ico{background:rgba(255,255,255,.88)!important}
@media (max-width:759px){
  .lineshow.lineshow--mob{background:rgba(8,18,48,.82)!important}
  .ls-carte{padding:14px 10px 14px!important;gap:12px!important;background:
      radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1.4px,transparent 1.6px) 0 0/22px 22px,
      radial-gradient(120% 60% at 50% 0,color-mix(in srgb,var(--c,#0064B0) 60%,#2B62C4),transparent 75%),
      linear-gradient(180deg,#1F468F,#122C5E)!important}
  .ls-carte .ls-head{padding:10px!important}
  .ls-carte .ls-head b{font-size:.8rem!important}
  .ls-carte .ls-stage{margin:6px 6px 0!important}
  .ls-carte .ls-monus{padding:0 2px}
  .ls-carte .ls-lab{margin:0 0 9px 4px!important}
  .ls-carte .ls-monu{width:120px!important}
}
/* @@ fin accueil_lot1.css @@ */
/* @@ debut metrodrop_lot2.css @@ */
/* ==========================================================================
   MÉTRODROP — LOT 2 : le plateau, sa plaque de mission, et les écrans
   ========================================================================== */
/* plus de rose : le rubis du site */
.mdr-bt--rose{background:linear-gradient(180deg,#FF5A78,#C8102E 60%,#7A0020)!important}
.mdr .mdr-st[style*="#FF8CC0"]{--a:#FF5A78!important;--b:#C8102E!important}

/* — les écrans (Plateau seul, Règles, Comment on conduit, fins) — */
.ap:has(.ap-stage>.mdl) .ap-ban,.ap:has(.ap-stage>.mdl) .ap-mascotte{display:none!important}
.mdl{max-width:880px;margin:0 auto}
.mdl-retour{display:flex;justify-content:flex-start;margin:0 0 4px}
.mdl-retour-b{display:inline-flex!important;align-items:center;gap:6px;height:40px;padding:0 16px 0 6px!important;border:0;border-radius:999px;cursor:pointer;color:#fff;
  font-family:var(--display);font-weight:900;font-size:.9rem;background:rgba(11,14,19,.35)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.mdl-retour-i{width:28px;height:28px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--j)}
.mdl-retour-i svg{display:block;width:100%;height:100%}
.mdl .mdr-plaque{margin:18px auto 12px}
.mdl-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:16px 4px 0!important}
.mdl .mdr-st{animation:mdlPop .45s var(--res) both;animation-delay:calc(var(--n,0)*60ms)}
.mdl .mdr-st b{font-size:clamp(1rem,4.6vw,1.45rem)}
@keyframes mdlPop{from{opacity:0;transform:scale(.7) translateY(10px)}}
/* les dix niveaux */
.mdl-niveaux{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:4px 4px 0}
.mdl-niv{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1/1;border:0;border-radius:18px;cursor:pointer;
  color:#fff;background:linear-gradient(170deg,#5FD8E8,#0E6F80)!important;box-shadow:var(--cadre);animation:mdlPop .4s var(--res) both;animation-delay:calc(var(--n)*40ms);transition:transform .2s var(--res)}
.mdl-niv b{font-family:var(--display);font-weight:900;font-size:clamp(1.2rem,6vw,1.7rem);text-shadow:var(--cont)}
.mdl-niv:hover{transform:translateY(-3px)}
.mdl-niv.on{background:linear-gradient(170deg,#FFE45C,#F5B400)!important;color:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #fff,0 0 0 7px #0B0E13,0 5px 0 7px #0B0E13;transform:translateY(-2px)}
.mdl-niv.on b{text-shadow:none}
.mdl-niv.lock{background:linear-gradient(170deg,#7D8A9A,#4A5563)!important;cursor:default}
.mdl-niv-c{width:24px;height:24px}
.mdl-niv-e{display:flex;gap:2px}
.mdl-niv-e i{width:8px;height:8px;border-radius:50%;background:rgba(11,14,19,.35);box-shadow:0 0 0 1.2px #0B0E13}
.mdl-niv-e i.on{background:#FFCE00}
/* le niveau choisi */
.mdl-carte{margin:16px 4px 0;padding:14px 10px 14px;border-radius:24px;background:linear-gradient(170deg,rgba(255,255,255,.18),rgba(255,255,255,.04));box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.mdl-gare{display:flex;justify-content:center}
.mdl-gare span{position:relative;display:inline-block;max-width:100%;padding:8px 30px 9px;border-radius:10px;background:#153E8C;color:#fff;font-family:var(--display);font-weight:900;
  font-size:clamp(1.1rem,5.4vw,1.6rem);box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,var(--cadre)}
.mdl-lignes{display:flex;justify-content:center;gap:8px;margin-top:12px}
.mdl-puce{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--c);color:var(--t);font-family:var(--display);font-weight:900;font-size:1.05rem;box-shadow:var(--cadre)}
/* les défis */
.mdl-defis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 4px}
.mdl-defi{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 6px 10px;border-radius:18px;color:#fff;
  background:linear-gradient(170deg,#8C97A6,#4E5967);box-shadow:var(--cadre);animation:mdlPop .45s var(--res) both;animation-delay:calc(var(--n,0)*50ms)}
.mdl-defi.fait{background:linear-gradient(170deg,var(--a),var(--b))}
.mdl-defi:not(.fait) .mdl-defi-art{filter:grayscale(.7) opacity(.75)}
.mdl-defi-art{width:100%;max-width:110px;height:58px}
.mdl-defi-art{overflow:hidden}
.mdl-defi-art svg{display:block;width:100%;height:100%}
.mdl-defi b{font-family:var(--display);font-weight:900;font-size:.82rem;line-height:1.1;text-shadow:var(--doucement)}
.mdl-defi-n{position:absolute;top:-8px;right:-6px;display:grid;place-items:center;min-width:30px;height:26px;padding:0 7px;border-radius:999px;font-family:var(--display);font-weight:900;
  font-size:.82rem;color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:var(--cadre);transform:rotate(6deg)}
.mdl-defi:not(.fait) .mdl-defi-n{background:#4E5967}
.mdl-defi-c{width:16px;height:16px}
.mdl-defi--fin{max-width:260px;margin:14px auto 0;flex-direction:row;gap:10px;padding:8px 18px 8px 8px}
.mdl-defi--fin .mdl-defi-art{width:76px;height:52px;flex:none}
.mdl-defi--fin .mdl-defi-n{position:static;transform:none;margin-left:auto}
/* les livres de règles */
.mdl-livre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 4px}
.mdl-case{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px 12px;border-radius:18px;color:#fff;text-align:center;
  background:radial-gradient(120% 80% at 100% 0,rgba(255,255,255,.28),transparent 60%),linear-gradient(170deg,var(--a),var(--b));box-shadow:var(--cadre);
  animation:mdlPop .45s var(--res) both;animation-delay:calc(var(--n)*45ms)}
.mdl-case-art{width:100%;max-width:120px;height:66px;display:grid;place-items:center;overflow:hidden}
.mdl-case-art svg{display:block;width:100%;height:100%;overflow:hidden}
.mdl-case b{font-family:var(--display);font-weight:900;font-size:.98rem;line-height:1.1;text-shadow:var(--cont)}
.mdl-case small{font-weight:700;font-size:.76rem;line-height:1.3;text-shadow:var(--doucement)}
.mdl-pouvoirs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 4px}
.mdl-pouv{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--c);color:var(--t);box-shadow:var(--cadre);
  animation:mdlPop .4s var(--res) both;animation-delay:calc(var(--n)*40ms)}
.mdl-pouv .mdl-puce{width:34px;height:34px;flex:none;background:#fff;color:#0B0E13}
.mdl-pouv b{font-family:var(--display);font-weight:900;font-size:.84rem;text-align:left}
@media (min-width:640px){ .mdl-livre{grid-template-columns:repeat(3,minmax(0,1fr))} .mdl-pouvoirs{grid-template-columns:repeat(3,minmax(0,1fr))} .mdl-defis{grid-template-columns:repeat(5,minmax(0,1fr))} .mdl-niveaux{grid-template-columns:repeat(10,minmax(0,1fr))} }
/* les fins */
.mdl-scene{position:relative;height:clamp(150px,40vw,240px);margin:6px 6px 0;border-radius:22px;overflow:hidden;background:#E8DDC3;
  box-shadow:0 0 0 3px var(--k),0 0 0 7px var(--j),0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k)}
.mdl-fin--ko .mdl-scene{box-shadow:0 0 0 3px var(--k),0 0 0 7px #FF5A78,0 0 0 9.5px var(--k),0 9px 0 9.5px var(--k)}
.mdl-scene svg{display:block;width:100%;height:100%}
.mdl-rame{animation:mdlRame 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes mdlRame{from{transform:translateX(-420px)}}
.mdl-rame--ko{animation:mdlTousse 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mdlTousse{0%,100%{transform:none}50%{transform:translateY(2px) rotate(-.4deg)}}
.mdl-fumee circle{animation:mdlFumee 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.mdl-fumee circle:nth-child(2){animation-delay:.5s}.mdl-fumee circle:nth-child(3){animation-delay:1s}
@keyframes mdlFumee{0%{opacity:0;transform:translateY(10px) scale(.5)}40%{opacity:.9}100%{opacity:0;transform:translateY(-14px) scale(1.4)}}
.mdl-feu{animation:mdlFeu .7s steps(2) infinite}
@keyframes mdlFeu{50%{opacity:.35}}
.mdl-clig{animation:mdlFeu 1.4s ease-in-out infinite}
.mdl-rame-loin{animation:mdlGlisse 1.4s cubic-bezier(.3,.9,.3,1) both}
@keyframes mdlGlisse{from{transform:translateX(-260px)}}
.mdl-tampon{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 24px);margin:-26px auto 0;padding:10px 26px 12px;
  border-radius:18px;background:linear-gradient(180deg,#5FE39A,#13985A);box-shadow:inset 0 0 0 2.5px #fff,0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transform:rotate(-2deg);
  animation:mdlTampon .7s var(--res) .25s both}
.mdl-tampon--ko{background:linear-gradient(180deg,#FF5A78,#C8102E)}
.mdl-tampon b{font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,6vw,1.9rem);line-height:1.05;text-shadow:var(--cont2)}
.mdl-tampon small{font-family:var(--display);font-weight:800;font-size:.82rem;text-shadow:var(--doucement)}
@keyframes mdlTampon{0%{opacity:0;transform:scale(2) rotate(-14deg)}60%{opacity:1;transform:scale(.92) rotate(-1deg)}100%{transform:rotate(-2deg)}}
.mdl-etoiles{display:flex;gap:4px}
.mdl-etoiles .mdr-svg,.mdl-etoiles span{width:30px;height:30px}
.mdl-etoiles span svg{display:block;width:100%;height:100%}
.mdl-et.on{animation:mdlEt .5s var(--res) both}
.mdl-et.on:nth-child(2){animation-delay:.15s}.mdl-et.on:nth-child(3){animation-delay:.3s}
@keyframes mdlEt{from{opacity:0;transform:scale(0) rotate(-90deg)}}
.mdl-liens{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.mdl .mdr-action .mdr-bt{flex:none!important;height:50px!important;min-width:210px}
.mdl-defi-n{white-space:nowrap}

/* — le plateau — */
.ap-stage:has(.md-board){background:radial-gradient(90% 30% at 50% 0,rgba(255,236,120,.3),transparent 70%),linear-gradient(180deg,#22CDD3,#0FA3B1 34%,#0B7F95 70%,#0A5873)!important}
.ap-stage:has(.md-board) .gamebar{gap:8px!important;padding:6px!important;background:none!important;box-shadow:none!important}
.ap-stage:has(.md-board) .gamebar>div:not(.progress){border-radius:16px!important;color:#fff;background:linear-gradient(170deg,#5AB0FF,#0B57B0)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.ap-stage:has(.md-board) .gamebar>div:nth-child(2){background:linear-gradient(170deg,#FF5A78,#C8102E)!important}
.ap-stage:has(.md-board) .gamebar>div:nth-child(3){background:linear-gradient(170deg,#FFD23E,#C98A00)!important}
.ap-stage:has(.md-board) .gamebar>div:nth-child(4){background:linear-gradient(170deg,#62DE98,#0B7A45)!important}
.ap-stage:has(.md-board) .gamebar .hudlabel{color:#fff!important;font-family:var(--display)!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;
  font-size:.7rem!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.ap-stage:has(.md-board) .gamebar .hudval{color:#fff!important;font-family:var(--display)!important;font-weight:900!important;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13,0 -1.5px #0B0E13}
/* la plaque de mission : une plaque émaillée, le nom seul */
.md-plaque{padding:10px 14px 12px!important;border-radius:20px!important;background:#153E8C!important;
  box-shadow:inset 0 0 0 3px #153E8C,inset 0 0 0 5px #fff,0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13!important}
.md-plaque .md-haut{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
.md-plaque .md-mode{display:grid;place-items:center;width:34px;height:34px;padding:5px;box-sizing:border-box;border-radius:50%;background:#FFFDF4;box-shadow:0 0 0 2px #0B0E13}
.md-plaque .md-mode svg{display:block;width:100%;height:100%}
.md-pips{display:flex;gap:5px}
.md-pips i{width:12px;height:12px;border-radius:50%;background:#0B1A40;box-shadow:0 0 0 2px #0B0E13}
.md-pips i.on{background:#FFCE00;box-shadow:0 0 0 2px #0B0E13,0 0 8px rgba(255,206,0,.6)}
.view .ap-stage .md-plaque .md-nom{margin:4px 0 8px!important;color:#fff!important;font-family:var(--display)!important;font-weight:900!important;font-size:clamp(1.3rem,6.4vw,1.9rem)!important;
  text-shadow:0 2px 0 #0B0E13,1.6px 0 #0B0E13,-1.6px 0 #0B0E13,0 -1.6px #0B0E13!important}
.md-plaque .md-jauge{height:12px!important;border-radius:12px!important;background:#0B1A40!important;box-shadow:0 0 0 2px #0B0E13!important}
.md-plaque .md-jauge i{background:linear-gradient(90deg,#62DE98,#3ED07A)!important;border-radius:12px!important}
.md-msg{display:inline-block;max-width:92%;margin:10px auto 0!important;padding:6px 16px!important;border-radius:999px;font-family:var(--display);font-weight:900!important;font-size:.88rem!important;
  color:#fff!important;background:linear-gradient(180deg,#5AB0FF,#0B57B0);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.md-msg.ko{background:linear-gradient(180deg,#FF5A78,#C8102E)}
.md-msg.ok{background:linear-gradient(180deg,#62DE98,#0B7A45)}
.md-msg:not(.on){visibility:hidden}
/* l'annonce du défi : une carte de couleur, un dessin, un nom, le chiffre */
.mdl-annonce{background:rgba(8,18,48,.55)!important}
.mdl-annonce-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:min(300px,86%);padding:16px 16px 18px;border-radius:26px;color:#fff;text-align:center;
  background:radial-gradient(120% 70% at 100% 0,rgba(255,255,255,.3),transparent 60%),linear-gradient(170deg,var(--a),var(--b));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 10px 0 9.5px #0B0E13;transform:scale(.6) rotate(-6deg);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.mdl-annonce.on .mdl-annonce-c{transform:none}
.mdl-annonce-sur{position:absolute;top:-16px;padding:4px 16px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.9rem;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mdl-annonce-art{width:150px;height:96px;margin-top:6px}
.mdl-annonce-art svg{display:block;width:100%;height:100%}
.mdl-annonce-c b{font-family:var(--display);font-weight:900;font-size:1.45rem;line-height:1.05;text-shadow:0 2px 0 #0B0E13,1.6px 0 #0B0E13,-1.6px 0 #0B0E13,0 -1.6px #0B0E13}
.mdl-annonce-cible{font-family:var(--display);font-weight:900;font-size:2.2rem;line-height:1;color:#FFCE00;text-shadow:0 3px 0 #0B0E13,2px 0 #0B0E13,-2px 0 #0B0E13,0 -2px #0B0E13}
.mdl-annonce-coups{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 14px 4px 5px;border-radius:999px;background:rgba(11,14,19,.4);font-family:var(--display);font-weight:900;font-size:1rem}
.mdl-annonce-i{width:26px;height:26px}
.mdl-annonce-i svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){ .mdl *,.mdl-annonce *{animation:none!important} }
/* @@ fin metrodrop_lot2.css @@ */
/* @@ debut solitaire_lot3.css @@ */
/* ==========================================================================
   MÉTRO SOLITAIRE — LOT 3 : la table de jeu
   Un tapis sombre bleu nuit, des cartes illustrées, les lignes en tuiles de
   couleur, des emplacements dessinés, et tout tient dans l'écran.
   ========================================================================== */
.view.so-partie .so-jeu.sol3{--k:#0B0E13;--res:cubic-bezier(.3,1.5,.5,1);--cadre:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  position:relative;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
  grid-template-areas:"barre" "evt" "fond" "haut" "plateau" "pied";gap:8px!important;
  height:var(--sol3-h,calc(100dvh - 120px))!important;min-height:0!important;margin:0!important;padding:10px!important;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1.3px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(90% 55% at 50% 0,rgba(90,150,255,.28),transparent 70%),
    radial-gradient(70% 50% at 50% 100%,rgba(30,180,160,.16),transparent 70%),
    linear-gradient(180deg,#17305E,#0F2146 55%,#0A1733)!important;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #2B5BB0,0 0 0 9.5px #0B0E13,0 8px 0 9.5px #0B0E13!important}
.view.so-partie .so-jeu.sol3,html.sol3-on .so-fantome{--soW:var(--sol3W)!important;--soCH:var(--sol3CH)!important;--soWh:var(--sol3Wh)!important;--soCHh:var(--sol3CHh)!important;
  --soPas:var(--sol3Pas)!important;--soPasDos:var(--sol3PasDos)!important}
.view.so-partie .so-jeu.sol3>.so-barre{grid-area:barre}
.view.so-partie .so-jeu.sol3>.so-evt{grid-area:evt}
.view.so-partie .so-jeu.sol3>.so-fondations{grid-area:fond}
.view.so-partie .so-jeu.sol3>.so-haut{grid-area:haut}
.view.so-partie .so-jeu.sol3>.so-plateau{grid-area:plateau}
.view.so-partie .so-jeu.sol3>.so-pied{grid-area:pied}
.view.so-partie .so-jeu.sol3>.so-reseau{display:none!important}
.view.so-partie .so-jeu.sol3 .so-evt:empty{display:none}

/* — la barre : quatre pastilles de couleur — */
.view.so-partie .so-jeu.sol3 .so-barre{display:flex!important;justify-content:center;gap:8px!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
.view.so-partie .so-jeu.sol3 .so-marque{display:none!important}
.view.so-partie .so-jeu.sol3 .so-stat{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;height:36px;padding:0 12px 0 4px!important;border-radius:999px;color:#fff;text-align:left;
  background:linear-gradient(180deg,#5AB0FF,#0B57B0);box-shadow:var(--cadre)}
.view.so-partie .so-jeu.sol3 .so-stat:nth-child(3){background:linear-gradient(180deg,#62DE98,#0B7A45)}
.view.so-partie .so-jeu.sol3 .so-stat:nth-child(4){background:linear-gradient(180deg,#FFA45E,#B8560F)}
.view.so-partie .so-jeu.sol3 .so-stat:nth-child(5){background:linear-gradient(180deg,#C98BEE,#5A2590)}
.view.so-partie .so-jeu.sol3 .so-stat.chaud{animation:sol3Chaud .9s ease-in-out infinite}
@keyframes sol3Chaud{50%{transform:scale(1.07)}}
.view.so-partie .so-jeu.sol3 .so-stat-ico{width:28px!important;height:28px!important;padding:4px;box-sizing:border-box;border-radius:50%;background:#FFFDF4;box-shadow:0 0 0 1.5px #0B0E13}
.view.so-partie .so-jeu.sol3 .so-stat-ico svg{display:block;width:100%;height:100%}
.view.so-partie .so-jeu.sol3 .so-stat b{font-family:var(--display);font-weight:900;font-size:1rem!important;color:#fff;text-shadow:0 1.5px 0 #0B0E13,1px 0 #0B0E13,-1px 0 #0B0E13}
.view.so-partie .so-jeu.sol3 .so-stat span,.view.so-partie .so-jeu.sol3 .so-stat small{display:none!important}

/* — les quatre lignes à reconstruire — */
.view.so-partie .so-jeu.sol3 .so-fondations{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;margin:0!important;overflow:visible!important}
.view.so-partie .so-jeu.sol3 .so-fond{position:relative;min-width:0!important;display:grid!important;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:8px;row-gap:3px;
  padding:7px 10px 9px 7px!important;border-radius:16px!important;color:var(--i,#fff)!important;text-align:left;
  background:radial-gradient(120% 90% at 100% 0,rgba(255,255,255,.35),transparent 60%),linear-gradient(170deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c))!important;
  box-shadow:0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13!important;transition:transform .2s var(--res)}
.view.so-partie .so-jeu.sol3 .so-fond.so-vise{transform:translateY(-3px);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7px #0B0E13!important}
.view.so-partie .so-jeu.sol3 .so-fond .so-past{grid-row:1/3;width:34px!important;height:34px!important;font-size:.95rem!important;background:#fff!important;color:#0B0E13!important;box-shadow:0 0 0 2px #0B0E13!important}
.view.so-partie .so-jeu.sol3 .so-fond b{font-family:var(--display);font-weight:900;font-size:1rem!important;white-space:nowrap;color:inherit;text-shadow:none}
.view.so-partie .so-jeu.sol3 .so-fond small{display:block!important;grid-column:2;font-family:var(--display);font-weight:800;font-size:.66rem!important;line-height:1.1;color:inherit!important;opacity:.92;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view.so-partie .so-jeu.sol3 .so-fond .sol3-jauge{position:absolute;left:10px;right:10px;bottom:4px;height:5px;border-radius:5px;background:rgba(11,14,19,.3)}
.view.so-partie .so-jeu.sol3 .so-fond .sol3-jauge i{display:block;width:var(--p,0%);height:100%;border-radius:5px;background:#FFFDF4;transition:width .5s}
.view.so-partie .so-jeu.sol3 .so-fond.complete{background:linear-gradient(170deg,#FFE45C,#F5B400)!important;color:#0B0E13!important}

/* — la pioche, la défausse, les voies de garage — */
.view.so-partie .so-jeu.sol3 .so-haut{display:flex!important;align-items:flex-end;justify-content:flex-start;gap:12px!important;flex-wrap:nowrap!important;margin:0!important;overflow:visible!important}
.view.so-partie .so-jeu.sol3 .so-zone{display:flex;flex-direction:column;gap:0;margin:0!important}
.view.so-partie .so-jeu.sol3 .so-lab{display:none!important}
.view.so-partie .so-jeu.sol3 .so-zone:last-child{margin-left:auto!important}
.view.so-partie .so-jeu.sol3 .so-pioche{position:relative;width:var(--soWh)!important;height:var(--soCHh)!important;padding:0!important;border:0;border-radius:12px!important;
  background:radial-gradient(circle at 50% 46%,#FFCE00 0 22%,#0B0E13 22.5% 26%,transparent 26.5%),repeating-linear-gradient(45deg,#2050A8 0 8px,#1A4594 8px 16px)!important;
  box-shadow:inset 0 0 0 3px #1A4594,inset 0 0 0 5px #fff,0 0 0 2px #0B0E13,3px 3px 0 2px #0B0E13,6px 6px 0 2px #0B0E13!important}
.view.so-partie .so-jeu.sol3 .so-pioche .so-dos{display:grid!important;place-items:center;width:100%;height:100%;font-family:var(--display);font-weight:900;font-size:calc(var(--soWh)*.3);color:#0B0E13;background:none!important;box-shadow:none!important}
.view.so-partie .so-jeu.sol3 .so-pioche small{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);padding:2px 8px;border-radius:999px;white-space:nowrap;font-family:var(--display);font-weight:900;font-size:.7rem;
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13}
.view.so-partie .so-jeu.sol3 .so-pioche.vide{background:rgba(255,255,255,.08)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)!important}
.view.so-partie .so-jeu.sol3 :is(.so-defausse-vide,.so-garage-vide,.so-vide){display:grid!important;place-items:center;width:var(--soWh);height:var(--soCHh);padding:0!important;border:0!important;border-radius:12px!important;
  font-size:0!important;color:transparent!important;background:rgba(255,255,255,.07) no-repeat center/46% auto!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)!important;outline:2px dashed rgba(255,255,255,.22);outline-offset:-7px}
.view.so-partie .so-jeu.sol3 .so-defausse-vide{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M18 2.5v4.6h-4.6M6 21.5v-4.6h4.6' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E")!important}
.view.so-partie .so-jeu.sol3 .so-garage-vide{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10l9-6 9 6v10H3z' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round' opacity='.55'/%3E%3Crect x='7' y='12' width='10' height='6' rx='2' fill='none' stroke='%23ffffff' stroke-width='2' opacity='.55'/%3E%3C/svg%3E")!important}
.view.so-partie .so-jeu.sol3 .so-vide{width:100%;height:var(--soCH);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ffffff' stroke-width='2.2' opacity='.5'/%3E%3Cpath d='M12 8v8M8 12h8' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E")!important;background-size:40% auto!important}
.view.so-partie .so-jeu.sol3 :is(.so-garage-vide,.so-vide).so-vise,.view.so-partie .so-jeu.sol3 .so-col.so-vise{background-color:rgba(255,206,0,.18)!important;box-shadow:inset 0 0 0 3px #FFCE00!important}
.view.so-partie .so-jeu.sol3 .so-defausse,.view.so-partie .so-jeu.sol3 .so-garages{display:flex!important;gap:8px!important}
.view.so-partie .so-jeu.sol3 :is(.so-defausse,.so-garages) .so-carte{width:var(--soWh)!important;height:var(--soCHh)!important;flex:none}
.view.so-partie .so-jeu.sol3 .so-defausse .so-carte + .so-carte{margin-left:calc(var(--soWh)*-.72)!important}

/* — le plateau : sept colonnes, les cartes à la taille calculée — */
.view.so-partie .so-jeu.sol3 .so-plateau{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important;min-height:0!important;height:auto!important;
  margin:0!important;padding:4px 0 0!important;overflow:hidden!important}
.view.so-partie .so-jeu.sol3 .so-col{min-width:0;min-height:var(--soCH)!important;padding:0!important;border-radius:12px;background:rgba(255,255,255,.04)}
.view.so-partie .so-jeu.sol3 .so-col > .so-carte + .so-carte{margin-top:calc(var(--soPas) - var(--soCH))!important}
.view.so-partie .so-jeu.sol3 .so-col > .so-carte.dos + .so-carte{margin-top:calc(var(--soPasDos) - var(--soCH))!important}

/* — LA CARTE : bandeau de la ligne, nom, dessin du quartier, petit tracé — */
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte{width:100%;height:var(--soCH)!important;min-height:0!important;flex:none;display:flex!important;flex-direction:column;align-items:stretch;
  gap:0!important;padding:0!important;border-radius:calc(var(--soW)*.11)!important;overflow:hidden;text-align:left;color:#0B0E13;
  font-size:clamp(7px,calc(var(--soW)*.115),14px);
  background:linear-gradient(180deg,#FFFFFF,#F4F1EA)!important;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte::before{display:none!important}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-tete{position:relative!important;inset:auto!important;flex:none;display:flex!important;align-items:center;gap:4px;margin:0!important;padding:calc(var(--soW)*.05) calc(var(--soW)*.06)!important;min-height:0!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c));border-bottom:2px solid #0B0E13;transform:none!important}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-past{width:calc(var(--soW)*.22)!important;height:calc(var(--soW)*.22)!important;min-width:14px;min-height:14px;margin:0!important;flex:none;
  font-size:calc(var(--soW)*.1)!important;background:#fff!important;color:#0B0E13!important;box-shadow:0 0 0 1.5px #0B0E13!important}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-tete small{display:flex!important;align-items:baseline;gap:1px;margin-left:auto;font-family:var(--display);font-weight:900;color:var(--i,#fff);
  text-shadow:0 1px 0 rgba(0,0,0,.35)}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-tete small em{font-style:normal;font-size:.75em;opacity:.85}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-tete small b{font-size:1.35em;line-height:1}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-nom{flex:none;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important;
  padding:calc(var(--soW)*.04) calc(var(--soW)*.06) 0!important;font-family:var(--display);font-weight:900;font-size:1em!important;line-height:1.05;color:#0B0E13;text-align:center}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .sol3-img{flex:1 1 auto;min-height:0;display:block;margin:calc(var(--soW)*.04) calc(var(--soW)*.06) 0;border-radius:calc(var(--soW)*.06);overflow:hidden;
  box-shadow:0 0 0 1.5px #0B0E13;background:color-mix(in srgb,var(--c) 30%,#fff)}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .sol3-img img{display:block;width:100%;height:100%;object-fit:cover}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-trajet{flex:none;display:block!important;position:relative;height:calc(var(--soW)*.05)!important;min-height:3px;margin:calc(var(--soW)*.05) calc(var(--soW)*.08)!important;
  border-radius:9px;background:var(--c)!important;box-shadow:0 0 0 1px #0B0E13}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-trajet i{position:absolute;top:50%;left:var(--p);width:calc(var(--soW)*.1);height:calc(var(--soW)*.1);min-width:6px;min-height:6px;margin:-.05em 0 0;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #0B0E13}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-type{display:none!important}
/* la carte choisie, l'indice */
.view.so-partie .so-jeu.sol3 .so-carte.sel{transform:translateY(-6px);box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7px #0B0E13,0 0 22px 4px rgba(255,206,0,.55)!important;z-index:6}
.view.so-partie .so-jeu.sol3 .so-carte.indice{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #62DE98,0 0 0 7px #0B0E13,0 0 22px 4px rgba(98,222,152,.6)!important}
/* les dos : le bleu du métro, le disque jaune */
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte.dos{background:radial-gradient(circle at 50% 50%,#FFCE00 0 18%,#0B0E13 18.5% 21%,transparent 21.5%),repeating-linear-gradient(45deg,#2050A8 0 7px,#1A4594 7px 14px)!important;
  box-shadow:inset 0 0 0 2px #1A4594,inset 0 0 0 3.5px #fff,0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important}
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte.dos .so-dos{display:none!important}
/* station majeure, carte seule, carte sur un quai : des pastilles, pas du texte */
.view.so-partie .so-jeu.sol3 .so-carte.majeure::after{content:""!important;position:absolute;right:calc(var(--soW)*.05);top:calc(var(--soW)*.3);left:auto;bottom:auto;width:calc(var(--soW)*.2);height:calc(var(--soW)*.2);min-width:12px;min-height:12px;
  border-radius:50%;background:#FFCE00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6-4.5-4.2 6.1-.7Z' fill='%230B0E13'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 1.5px #0B0E13}
.view.so-partie .so-jeu.sol3 .so-carte.so-seule{box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #F28E42,0 3px 0 4.5px #0B0E13!important}
.view.so-partie .so-jeu.sol3 .so-carte.so-seule::after{content:""!important;position:absolute;right:calc(var(--soW)*.05);bottom:calc(var(--soW)*.14);top:auto;width:calc(var(--soW)*.2);height:calc(var(--soW)*.2);min-width:12px;min-height:12px;
  border-radius:50%;background:#F28E42 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='10' width='12' height='10' rx='2' fill='%23fff'/%3E%3Cpath d='M8.5 10V7.5a3.5 3.5 0 0 1 7 0V10' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center/68% no-repeat;box-shadow:0 0 0 1.5px #0B0E13;font-size:0}
.view.so-partie .so-jeu.sol3 .so-carte.so-verrou{box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #5AB0FF,0 3px 0 4.5px #0B0E13!important}
.view.so-partie .so-jeu.sol3 .so-carte.so-verrou::before{display:none!important}
.view.so-partie .so-jeu.sol3 .so-carte.so-verrou::after{content:""!important;position:absolute;right:calc(var(--soW)*.05);bottom:calc(var(--soW)*.14);top:auto;width:calc(var(--soW)*.2);height:calc(var(--soW)*.2);min-width:12px;min-height:12px;
  border-radius:50%;background:#2B6CD1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h12l-3-3M20 16H8l3 3' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:0 0 0 1.5px #0B0E13;font-size:0}

/* — le message, posé sur le plateau ; les boutons du bas — */
.view.so-partie .so-jeu.sol3 .so-msg{position:absolute!important;left:0;right:0;bottom:64px;z-index:40;width:max-content;max-width:90%;margin:0 auto!important;padding:7px 16px!important;border-radius:999px;pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:.86rem!important;color:#fff!important;text-align:center;background:linear-gradient(180deg,#5AB0FF,#0B57B0);box-shadow:var(--cadre)}
.view.so-partie .so-jeu.sol3 .so-msg.bon{background:linear-gradient(180deg,#62DE98,#0B7A45)}
.view.so-partie .so-jeu.sol3 .so-msg.non{background:linear-gradient(180deg,#FF5A78,#C8102E)}
.view.so-partie .so-jeu.sol3 .so-msg:not(.on){display:none!important}
.view.so-partie .so-jeu.sol3 .so-pied{display:flex!important;justify-content:center;flex-wrap:wrap!important;gap:8px!important;margin:0!important;padding:0!important}
.view.so-partie .so-jeu.sol3 .so-pied .tag{display:none!important}
.view.so-partie .so-jeu.sol3 .so-pied .sol3-bt{display:inline-flex!important;align-items:center;gap:6px;height:40px;padding:0 14px 0 5px!important;border:0!important;border-radius:999px!important;
  font-family:var(--display);font-weight:900;font-size:.88rem;color:#fff!important;background:linear-gradient(180deg,var(--a),var(--b))!important;box-shadow:var(--cadre)!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.view.so-partie .so-jeu.sol3 .so-pied .sol3-bt:active{transform:translateY(2px)}
.view.so-partie .so-jeu.sol3 .so-pied .sol3-bt-i{width:30px;height:30px;padding:4px;box-sizing:border-box;border-radius:50%;background:#FFFDF4;box-shadow:0 0 0 1.5px #0B0E13}
.view.so-partie .so-jeu.sol3 .so-pied .sol3-bt-i svg{display:block;width:100%;height:100%}
/* l'évènement en cours : une bannière de couleur */
.view.so-partie .so-jeu.sol3 .so-evt-carte{margin:0!important;padding:6px 12px!important;border-radius:14px!important;color:#fff!important;background:linear-gradient(180deg,#FF5A78,#C8102E)!important;box-shadow:var(--cadre)!important}
.view.so-partie .so-jeu.sol3 .so-evt-carte p{display:none}
.view.so-partie .so-jeu.sol3 .so-evt-carte b{color:#fff}

/* — sur téléphone — */
@media (max-width:759px){
  .view.so-partie .so-jeu.sol3{padding:7px!important;gap:6px!important;border-radius:18px}
  .view.so-partie .so-jeu.sol3 .so-barre{gap:5px!important}
  .view.so-partie .so-jeu.sol3 .so-stat{height:30px;padding:0 9px 0 3px!important}
  .view.so-partie .so-jeu.sol3 .so-stat-ico{width:24px!important;height:24px!important}
  .view.so-partie .so-jeu.sol3 .so-stat b{font-size:.86rem!important}
  .view.so-partie .so-jeu.sol3 .so-fondations{gap:5px!important}
  .view.so-partie .so-jeu.sol3 .so-fond{grid-template-columns:minmax(0,1fr);justify-items:center;padding:5px 4px 9px!important;text-align:center}
  .view.so-partie .so-jeu.sol3 .so-fond .so-past{grid-row:auto;width:24px!important;height:24px!important;font-size:.7rem!important}
  .view.so-partie .so-jeu.sol3 .so-fond b{font-size:.78rem!important}
  .view.so-partie .so-jeu.sol3 .so-fond small{display:none!important}
  .view.so-partie .so-jeu.sol3 .so-fond .sol3-jauge{left:6px;right:6px;bottom:3px;height:4px}
  .view.so-partie .so-jeu.sol3 .so-haut{gap:6px!important}
  .view.so-partie .so-jeu.sol3 .so-plateau{gap:4px!important}
  .view.so-partie .so-jeu.sol3 .so-pied{gap:5px!important}
  .view.so-partie .so-jeu.sol3 .so-pied .sol3-bt{height:34px;font-size:.74rem;padding:0 10px 0 3px!important;gap:4px}
  .view.so-partie .so-jeu.sol3 .so-pied .sol3-bt-i{width:26px;height:26px}
  .view.so-partie .so-jeu.sol3 .so-msg{bottom:48px;font-size:.74rem!important}
  :is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte{border-radius:7px!important;box-shadow:0 0 0 1.5px #0B0E13,0 2px 0 1.5px #0B0E13!important}
  :is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-tete{padding:2px 3px!important;border-bottom-width:1.5px}
  :is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-nom{-webkit-line-clamp:4;padding:2px 2px 0!important;font-size:max(7.5px,1em)!important}
  :is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .sol3-img{margin:2px 2px 0;border-radius:4px}
}
/* — en paysage sur téléphone : le tableau de bord à gauche, le plateau à droite — */
@media (orientation:landscape) and (max-height:520px){
  .view.so-partie .so-jeu.sol3{grid-template-columns:minmax(200px,32%) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"barre plateau" "evt plateau" "fond plateau" "haut plateau" "pied plateau";height:calc(100dvh - 14px)!important}
  .view.so-partie .so-jeu.sol3 .so-fondations{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .view.so-partie .so-jeu.sol3 .so-haut{flex-wrap:wrap!important;align-content:flex-start}
  .view.so-partie .so-jeu.sol3 .so-zone:last-child{margin-left:0!important}
  .view.so-partie .so-jeu.sol3 .so-msg{bottom:8px}
}
@media (prefers-reduced-motion:reduce){ .view.so-partie .so-jeu.sol3 *{animation:none!important} }
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .sol3-img,:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .sol3-img img{pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* --p est déclarée non héritée ailleurs dans le site : le repère et la jauge la reprennent de leur parent */
:is(.view.so-partie .so-jeu.sol3,.so-fantome) .so-carte .so-trajet i,.view.so-partie .so-jeu.sol3 .so-fond .sol3-jauge,.view.so-partie .so-jeu.sol3 .so-fond .sol3-jauge i{--p:inherit}
/* @@ fin solitaire_lot3.css @@ */
/* @@ debut cartes_lot4.css @@ */
/* ==========================================================================
   JEUX DE CARTES — LOT 4 : Belote (menu, enchères, annonces, panneaux d'aide),
   minuteur de Métro King, rectangles centrés, panneaux colorés du Poker.
   ========================================================================== */
/* — BELOTE : le menu — */
.blt-menu .blt-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(860px,100%);margin:6px auto 0}
.blt-menu .blt-mode{position:relative;display:flex!important;flex-direction:column;align-items:center!important;text-align:center;gap:4px;padding:14px 10px 16px!important;border-radius:22px!important;color:#fff!important;
  background:radial-gradient(120% 80% at 100% 0,rgba(255,255,255,.3),transparent 60%),linear-gradient(170deg,color-mix(in srgb,var(--c) 75%,#fff),color-mix(in srgb,var(--c) 70%,#0B0E13))!important;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13!important;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.blt-menu .blt-mode::before,.blt-menu .blt-mode::after{display:none!important}
.blt-menu .blt-mode:hover{transform:translateY(-4px) rotate(-.6deg)}
.blt-menu .blt-mode:active{transform:translateY(3px)}
.blt-menu .blt-mode--facile{--c:#3ED07A!important}
.blt-menu .blt-mode--expert{--c:#FF4D6D!important}
.blt-menu .blt-mode--ligne{--c:#3E8FD4!important}
.blt-menu .blt-mode b{font-family:var(--display);font-weight:900;font-size:1.2rem;color:#fff!important;text-shadow:0 2px 0 #0B0E13,1.6px 0 #0B0E13,-1.6px 0 #0B0E13,0 -1.6px #0B0E13}
.blt-menu .blt-mode-et{margin:0!important;padding:2px 12px;border-radius:999px;color:#FFE45C!important;background:rgba(11,14,19,.35);font-family:var(--display)!important;font-weight:900;letter-spacing:.1em}
.blt-menu .blt-mode--ligne .blt-mode-et{color:#fff!important;letter-spacing:0;font-size:.82rem}
.blt-menu .blt-mode-go{margin-top:6px!important;padding:6px 20px!important;border-radius:999px!important;font-family:var(--display)!important;font-weight:900!important;font-size:.95rem!important;letter-spacing:0!important;
  text-transform:none!important;color:#0B0E13!important;background:linear-gradient(180deg,#FFE45C,#F5B400)!important;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13!important}
.blt-menu .blt-mode-vis{width:auto!important;height:auto!important;margin:0 0 4px!important;display:flex!important;align-items:center;justify-content:center}
.blt-menu .blt-mode-globe{display:block;width:84px;height:84px}
.blt-menu .blt-mode-globe svg{display:block;width:100%;height:100%;animation:bltGlobe 6s ease-in-out infinite}
@keyframes bltGlobe{50%{transform:rotate(-8deg) scale(1.04)}}
.blt-menu .blt-mode--off{filter:saturate(.35);opacity:.8;cursor:default}
.blt-menu .blt-mode--off:hover{transform:none}
@media (max-width:640px){ .blt-menu .blt-modes{grid-template-columns:repeat(2,minmax(0,1fr))} .blt-menu .blt-mode--ligne{grid-column:1/-1} }

/* — BELOTE : les boutons de couleur — */
.bt :is(.blt-b-jaune,.blt-b-bleu,.blt-b-rouge,.blt-b-vert),.blt-modal :is(.blt-b-jaune,.blt-b-bleu,.blt-b-rouge,.blt-b-vert){height:44px;padding:0 18px!important;border:0!important;border-radius:999px!important;
  font-family:var(--display)!important;font-weight:900!important;font-size:.95rem!important;color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;transition:transform .15s}
:is(.bt,.blt-modal) .blt-b-jaune{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;text-shadow:none}
:is(.bt,.blt-modal) .blt-b-bleu{background:linear-gradient(180deg,#5AB0FF,#0B57B0)!important}
:is(.bt,.blt-modal) .blt-b-rouge{background:linear-gradient(180deg,#FF5A78,#C8102E)!important}
:is(.bt,.blt-modal) .blt-b-vert{background:linear-gradient(180deg,#62DE98,#0B7A45)!important}
:is(.bt,.blt-modal) :is(.blt-b-jaune,.blt-b-bleu,.blt-b-rouge,.blt-b-vert):active{transform:translateY(3px)}
/* — BELOTE : l'enchère et l'annonce d'ouverture, sur le tapis — */
.bt .blt-enchere,.bt .blt-annonce-p{color:#fff!important;border-radius:22px!important;
  background:radial-gradient(120% 70% at 50% 0,rgba(255,255,255,.22),transparent 65%),linear-gradient(175deg,#2F7FD6,#174FA3)!important;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13,0 8px 0 8.5px #0B0E13!important}
.bt :is(.blt-enchere,.blt-annonce-p) > p{margin:0!important;display:flex;align-items:center;gap:8px;justify-content:center;font-family:var(--display)!important;font-weight:900!important;
  font-size:1.15rem!important;color:#fff!important;text-shadow:0 2px 0 #0B0E13,1.4px 0 #0B0E13,-1.4px 0 #0B0E13}
.bt :is(.blt-enchere,.blt-annonce-p) > small{display:none!important}
.blt-ench-past{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;font-style:normal;font-family:var(--display);font-weight:900;font-size:1rem;
  background:var(--c);color:var(--i);box-shadow:0 0 0 2.5px #0B0E13;text-shadow:none}
.bt .blt-ench-l{border:0!important;border-radius:999px!important;font-family:var(--display)!important;font-weight:900!important;background:var(--c)!important;color:var(--i)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13!important}
/* — BELOTE : la modale « Vos annonces », sur le tapis vert du livre — */
.blt-modal{background:rgba(8,14,40,.66)!important}
.blt-annmod{gap:12px!important;padding:16px!important;border-radius:26px!important;color:#fff!important;
  background:radial-gradient(110% 40% at 50% 0,rgba(140,230,170,.4),transparent 70%),linear-gradient(175deg,#1FA463,#0E7C4A 50%,#0A5A35)!important;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 10px 0 9.5px #0B0E13,0 30px 60px rgba(0,0,0,.45)!important}
.blt-annmod{--k:#0B0E13;--bl:#153E8C;--res:cubic-bezier(.3,1.5,.5,1);--cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.blt-annmod .bltl-plaque{display:flex;justify-content:center;margin:0 0 4px!important;font-size:1rem}
.blt-annmod .blt-annmod-main{gap:10px!important}
.blt-annmod .blt-ench-b{margin-top:6px}
/* — BELOTE : les panneaux d'aide (le « i ») — */
.bt-plaque--pli{color:#fff!important;background:radial-gradient(120% 70% at 100% 0,rgba(255,255,255,.25),transparent 60%),linear-gradient(170deg,#5AB0FF,#0B57B0)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;border-radius:18px!important;opacity:1!important}
.bt-plaque--pli.duel{background:linear-gradient(170deg,#FFA45E,#B8560F)!important}
.bt-plaque--pli .bt-pl-t{display:inline-block;padding:2px 10px;border-radius:999px;background:#FFCE00;color:#0B0E13!important;font-family:var(--display)!important;font-weight:900!important;
  font-size:.7rem!important;letter-spacing:0!important;text-transform:none!important}
.bt-plaque--pli .bt-pl-r span,.bt-plaque--pli .bt-pl-sous span{font-family:var(--display);font-weight:800;color:#fff!important}
.bt-plaque--pli .bt-pl-aide{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--display);font-weight:700;font-size:.68rem!important;line-height:1.25;color:#fff!important;opacity:.95}
.bt-affiche{color:#fff!important;background:radial-gradient(120% 70% at 100% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(170deg,#C98BEE,#5A2590)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;border-radius:18px!important;opacity:1!important}
.bt-affiche::before{display:none!important}
.bt-affiche > small,.bt-affiche .bt-affiche-h{display:inline-block;padding:2px 10px;border-radius:999px;background:#FFCE00;color:#0B0E13!important;font-family:var(--display)!important;font-weight:900!important;
  font-size:.7rem!important;letter-spacing:0!important;text-transform:none!important}
.bt-affiche-t{font-family:var(--display)!important;font-weight:800!important;font-size:.78rem!important;line-height:1.3!important;color:#fff!important;text-shadow:none!important}
.bt-affiche.msg .bt-affiche-t{color:#FFF3B0!important}
/* l'explication de la correspondance (quand l'aide est allumée) */
.bt-explic{color:#fff!important;background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.25),transparent 65%),linear-gradient(175deg,#FFA45E,#B8560F)!important;
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13,0 8px 0 8.5px #0B0E13!important;border-radius:22px!important}
.bt-explic p{color:#fff!important}
.bt-explic .bt-ex-titre{color:#fff!important;text-shadow:0 2px 0 #0B0E13,1.4px 0 #0B0E13,-1.4px 0 #0B0E13}

/* — MÉTRO KING : le minuteur du coup — */
.mk-cj{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-left:8px;
  background:conic-gradient(#3ED07A var(--p,100%),#0B1A40 0);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mk-cj-r{position:absolute;inset:6px;border-radius:50%;background:#FFFDF4;box-shadow:inset 0 0 0 2px #0B0E13}
.mk-cj b{position:relative;font-family:var(--display);font-weight:900;font-size:.95rem;color:#0B0E13;font-variant-numeric:tabular-nums}
.mk-cj.presse{background:conic-gradient(#FF3D5E var(--p,100%),#0B1A40 0);animation:mkCjBat .5s ease-in-out infinite}
@keyframes mkCjBat{50%{transform:scale(1.12)}}

/* — MÉTRO POKER : les panneaux du menu en couleur, les liens centrés — */
.mpk3-m-pan--creme{background:radial-gradient(110% 60% at 50% 0,rgba(255,255,255,.25),transparent 65%),linear-gradient(175deg,#4C95EA,#1D56B4 55%,#163A80)!important;color:#fff!important}
.mpk3-m-pan--creme .mpk5-q{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.mpk3-m-pan--cerise{background:radial-gradient(110% 60% at 50% 0,rgba(255,255,255,.22),transparent 65%),linear-gradient(175deg,#FF4D6D,#C8102E 55%,#7A0020)!important;color:#fff!important}
.mpk3-m-top-l{background:linear-gradient(170deg,rgba(255,255,255,.95),#FFE9EE)!important}
.mpk3-m-liens{display:flex!important;justify-content:center!important;flex-wrap:wrap;gap:10px!important}
.mpk3-m-lien{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13!important;font-family:var(--display)!important;font-weight:900!important}
/* tous les jeux de cartes : la rangée de rectangles (avatar, livre…) toujours centrée */
:is(.bltl-menu-b,.mk-menu-b,.mpk-menu-b){justify-content:center!important;margin-left:auto!important;margin-right:auto!important}
@media (prefers-reduced-motion:reduce){ .mk-cj,.blt-menu .blt-mode-globe svg{animation:none!important} }
/* @@ fin cartes_lot4.css @@ */
/* @@ debut runner_lot5.css @@ */
/* ==========================================================================
   METRO RUNNER — LOT 5 : pastilles, vol du ticket, tableau de bord visible
   en plein écran sur téléphone ; DÉFILÉ : un terrain encadré sur téléphone.
   ========================================================================== */
/* une pastille courte en haut de la piste, plus de phrase au milieu */
.rn-flottant.rnl-pastille{top:17%!important;display:inline-flex!important;align-items:center;gap:6px;width:max-content;max-width:70%;padding:4px 14px 4px 4px!important;border-radius:999px;
  font-family:var(--display)!important;font-weight:900!important;font-size:1.05rem!important;color:#fff!important;letter-spacing:0!important;text-shadow:0 1.5px 0 #0B0E13,1px 0 #0B0E13,-1px 0 #0B0E13!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  animation:rnlPastille 1.3s cubic-bezier(.3,1.5,.5,1) both!important}
.rn-flottant.rnl-pastille.gros{font-size:1.2rem!important}
.rnl-pastille-i{flex:none;width:30px;height:30px;padding:3px;box-sizing:border-box;border-radius:50%;background:#FFFDF4;box-shadow:0 0 0 2px #0B0E13}
.rnl-pastille-i svg{display:block;width:100%;height:100%}
@keyframes rnlPastille{0%{opacity:0;transform:translateY(16px) scale(.5)}18%{opacity:1;transform:translateY(0) scale(1.08)}30%{transform:scale(1)}80%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-26px) scale(.9)}}
.rnl-vol{position:absolute;z-index:8;width:30px;height:30px;pointer-events:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.rnl-vol svg{display:block;width:100%;height:100%}
/* le tableau de bord ne passe jamais sous l'encoche ni la barre du navigateur */
.rn-scene:is(.rn-plein-css,:fullscreen) .rn-hud{padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 10px) calc(env(safe-area-inset-left,0px) + 10px)!important}
.rn-scene:is(.rn-plein-css,:fullscreen) .rn-plein{top:calc(env(safe-area-inset-top,0px) + 10px)!important;right:calc(env(safe-area-inset-right,0px) + 10px)!important}
@media (max-width:760px),(max-height:520px){
  .view.rnx-course .rn-hud .rn-haut{gap:5px!important}
  .view.rnx-course .rn-hud :is(.rn-coeur){width:20px;height:20px}
}
/* en paysage sur téléphone : la piste occupe l'écran, l'en-tête du site s'efface */
@media (orientation:landscape) and (max-height:520px){
  html:has(.view.rnx-course) header.top{display:none}
  .view.rnx-course > .wrap > .section{display:none!important}
  .view.rnx-course .rn-scene:not(.rn-plein-css):not(:fullscreen){height:calc(100dvh - 12px)!important;min-height:0!important;margin:6px 4px!important}
}
/* — DÉFILÉ : sur téléphone, le terrain garde son cadre et ses coins — */
@media (max-width:760px){
  .dfr-racine .playfield{margin:10px 6px 8px!important;width:auto!important;border-radius:18px!important;
    box-shadow:0 0 0 3px #0B0E13,0 0 0 8px var(--g,#FFCE00),0 0 0 10.5px #0B0E13,0 12px 0 8px rgba(0,0,0,.3)!important}
  .dfr-racine .playfield canvas{max-height:58dvh;width:100%!important;object-fit:contain}
}
@media (prefers-reduced-motion:reduce){ .rn-flottant.rnl-pastille{animation:none!important} }
/* @@ fin runner_lot5.css @@ */
/* @@ debut cartes_lot6.css @@ */
/* ==========================================================================
   LOT 6 — LES AMIS, LE SALON EN LIGNE, LES TABLES DES INVITÉS
   Même famille que le reste : contours noirs, ombres franches, plaques
   émaillées, dégradés vifs. Aucune boîte blanche ni crème.
   ========================================================================== */
:root{--am-k:#0B0E13;--am-email:#153E8C;--am-cadre:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}

/* — le bouton « Amis » de l'accueil — */
.hero-cta .am-bouton,.am-bouton{position:relative;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#6FBBFF,#1E66C9)!important;color:#fff!important;border:0!important;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),var(--am-cadre)!important;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.am-bouton .am-ico{width:26px;height:26px;margin-left:-4px}
.am-bouton:active{transform:translateY(3px)}
.am-pastille{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  background:#E3051C;color:#fff;font:900 .78rem/1 var(--display);box-shadow:0 0 0 2.5px #0B0E13;animation:amPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes amPop{from{transform:scale(0)}}
.am-bouton--en::after{content:"";position:absolute;left:10px;bottom:7px;width:8px;height:8px;border-radius:50%;background:#3ED07A;box-shadow:0 0 0 2px #0B0E13}
.cs-amis.am-bouton{height:40px;padding:0 14px!important;font-size:.9rem!important;margin-left:auto}

.am-ico{display:inline-block;width:22px;height:22px;flex:none}
.am-ico svg{display:block;width:100%;height:100%}
.am-ico--grand{width:56px;height:56px}

/* — la fenêtre — */
.am-fond{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:14px;background:rgba(6,10,20,.62);
  opacity:0;transition:opacity .2s;backdrop-filter:blur(2px)}
.am-fond.on{opacity:1}
.am-pan{position:relative;width:min(460px,100%);max-height:calc(100dvh - 28px);overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:12px;padding:18px 16px 14px;border-radius:24px;color:#fff;
  background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.16),transparent 60%),linear-gradient(170deg,#2C6FD0,#123E8E 70%,#0E2F6E);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;
  transform:translateY(14px) scale(.96);transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.am-fond.on .am-pan{transform:none}
.am-x{position:absolute;top:10px;right:10px;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;padding:8px;
  background:linear-gradient(180deg,#FF5A78,#C8102E);box-shadow:var(--am-cadre)}
.am-x svg{display:block;width:100%;height:100%}
.am-plaque,.cs-plaque,.cl-plaque{display:flex;justify-content:center;margin:0}
.am-plaque span,.cs-plaque span,.cl-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:var(--am-email);
  font-family:var(--display);font-weight:900;font-size:1.08rem;letter-spacing:.02em;color:#fff;white-space:nowrap;
  box-shadow:inset 0 0 0 2px var(--am-email),inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.am-plaque span::before,.am-plaque span::after,.cs-plaque span::before,.cs-plaque span::after,.cl-plaque span::before,.cl-plaque span::after{
  content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.am-plaque span::before,.cs-plaque span::before,.cl-plaque span::before{left:11px}
.am-plaque span::after,.cs-plaque span::after,.cl-plaque span::after{right:11px}

/* ma carte : visage, code, nom */
.am-moi{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"av t" "b b" "d d";gap:10px 12px;align-items:center;padding:12px;border-radius:18px;
  background:linear-gradient(180deg,rgba(6,18,46,.55),rgba(6,18,46,.35));box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.am-moi > .am-av{grid-area:av}
.am-moi-t{grid-area:t;display:flex;flex-direction:column;gap:4px;min-width:0}
.am-moi-t small,.am-sur{font:800 .7rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:#9FD0FF}
.am-code{font:900 1.9rem/1 var(--display);letter-spacing:.06em;color:#FFCE00;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13,0 -1.5px #0B0E13}
.am-moi-b{grid-area:b;display:flex;gap:8px}
.am-moi-b .am-b{flex:1}
.am-dit{grid-area:d;min-height:0;font-size:.8rem;color:#CFE6FF;text-align:center}
.am-dit:empty{display:none}
.am-av{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 45%),var(--c);color:var(--t);
  font:900 1.15rem/1 var(--display);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.am-av--grand{width:64px;height:64px;font-size:1.8rem}

.am-input,.cs-input{width:100%;min-width:0;height:42px;padding:0 12px;border:0;border-radius:12px;color:#fff;font:800 1rem/1 var(--display);
  background:#0A1C44;box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 2.5px #0B0E13;outline:none}
.am-input:focus,.cs-input:focus{box-shadow:inset 0 2px 0 rgba(0,0,0,.35),0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00}
.am-input::placeholder,.cs-input::placeholder{color:rgba(255,255,255,.35)}
.am-input--nom{height:34px;font-size:.9rem}
.am-input--code,.cs-input--code{text-align:center;letter-spacing:.18em;font-size:1.25rem;text-transform:uppercase}

/* boutons : des pastilles de couleur, contour noir, ombre franche */
.am-b,.cs-b,.cl-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;
  font:900 .88rem/1 var(--display);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35);white-space:nowrap;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),var(--am-cadre);transition:transform .14s,filter .14s}
.am-b:active,.cs-b:active,.cl-b:active{transform:translateY(3px)}
.am-b:disabled,.cs-b:disabled,.cl-b:disabled{cursor:default;filter:saturate(.4) brightness(.9);transform:none}
.am-b .am-ico{width:20px;height:20px;margin-left:-4px}
:is(.am-b,.cs-b,.cl-b):is(.am-b--jaune,.cs-b--jaune,.cl-b--jaune){background:linear-gradient(180deg,#FFE45C,#F5B400);color:#0B0E13;text-shadow:none}
:is(.am-b,.cs-b,.cl-b):is(.am-b--bleu,.cs-b--bleu,.cl-b--bleu){background:linear-gradient(180deg,#6FBBFF,#1E66C9)}
:is(.am-b,.cs-b,.cl-b):is(.am-b--vert,.cs-b--vert,.cl-b--vert){background:linear-gradient(180deg,#62DE98,#0B7A45)}
:is(.am-b,.cs-b,.cl-b):is(.am-b--rouge,.cs-b--rouge,.cl-b--rouge){background:linear-gradient(180deg,#FF5A78,#C8102E)}
:is(.am-b,.cs-b,.cl-b):is(.am-b--gris,.cs-b--gris){background:linear-gradient(180deg,#8C99AB,#5A6678)}
.am-b--gros{height:44px;font-size:.95rem}
.am-mini{flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;background:transparent;opacity:.75;transition:opacity .15s,transform .15s}
.am-mini svg,.am-mini span{display:block;width:100%;height:100%}
.am-mini span svg{display:block}
.am-mini:hover{opacity:1}
.am-mini.arme{opacity:1;transform:scale(1.15);animation:amTrem .3s 2}
@keyframes amTrem{50%{transform:scale(1.15) rotate(-8deg)}}

.am-onglets{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(6,18,46,.55);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.am-onglet{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:#CFE6FF;font:900 .86rem/1 var(--display)}
.am-onglet.on{background:linear-gradient(180deg,#FFE45C,#F5B400);color:#0B0E13;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.am-n{min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;font-size:.72rem;background:rgba(255,255,255,.18)}
.am-onglet.on .am-n{background:#0B0E13;color:#FFCE00}
.am-n--rouge{background:#E3051C!important;color:#fff!important}
.am-corps{display:flex;flex-direction:column;gap:8px;min-height:120px}
.am-l{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:16px;background:rgba(6,18,46,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.am-l .am-av{position:relative}
.am-l.en .am-av::after{content:"";position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#3ED07A;box-shadow:0 0 0 2px #0B0E13}
.am-l.hors{opacity:.82}
.am-l.hors .am-av{filter:saturate(.35)}
.am-l-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.am-l-t b{font:900 1rem/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-l-t small{font-size:.76rem;color:#9FD0FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-l-b{display:flex;align-items:center;gap:6px;flex:none}
.am-l-b .am-b{height:34px;padding:0 11px;font-size:.8rem}
.am-l-b .am-b .am-ico{width:18px;height:18px}
.am-vide{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;text-align:center}
.am-vide b{font:900 1.05rem/1 var(--display)}
.am-ajout{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:rgba(6,18,46,.45)}
.am-ajout-l{display:flex;gap:8px}
.am-ajout-l .am-input{flex:1}
.am-msg{margin:0;min-height:1em;font-size:.82rem;font-weight:700}
.am-msg.ok{color:#7CF0AE}.am-msg.ko{color:#FFB0BC}
.am-rien{margin:0;padding:6px 2px;font-size:.84rem;color:#CFE6FF}
.am-etat{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:10px;border-top:2px solid rgba(255,255,255,.12);font:800 .84rem/1 var(--display)}
.am-pt{width:11px;height:11px;border-radius:50%;background:#8C99AB;box-shadow:0 0 0 2px #0B0E13}
.am-pt.on{background:#3ED07A;animation:amPouls 1.8s infinite}
@keyframes amPouls{50%{box-shadow:0 0 0 2px #0B0E13,0 0 0 6px rgba(62,208,122,.3)}}
.am-vis{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:0;border:0;background:none;color:#CFE6FF;cursor:pointer;font:inherit}
.am-vis i{position:relative;width:34px;height:20px;border-radius:999px;background:#5A6678;box-shadow:0 0 0 2px #0B0E13;transition:background .2s}
.am-vis i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px #0B0E13;transition:transform .2s}
.am-vis.on i{background:#3ED07A}.am-vis.on i::after{transform:translateX(14px)}
.am-i{width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;font:900 .9rem/1 Georgia,serif;font-style:italic;color:#0B0E13;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.am-etat .am-vis + .am-i,.am-etat > b + .am-i{margin-left:auto}
.am-etat .am-vis + .am-i{margin-left:0}
.am-i.on{background:linear-gradient(180deg,#6FBBFF,#1E66C9);color:#fff}
.am-info,.cs-info{flex-basis:100%;margin:0;padding:10px 12px;border-radius:12px;font:600 .82rem/1.45 var(--sans,inherit);color:#E6F2FF;background:rgba(6,18,46,.6)}

/* — les petits mots dans un coin — */
.am-toasts{position:fixed;z-index:2100;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (min-width:700px){ .am-toasts{left:auto;right:16px;top:76px;bottom:auto;width:360px} }
.am-toast{pointer-events:auto;position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;padding:10px 40px 10px 10px;border-radius:18px;color:#fff;
  background:linear-gradient(170deg,#2C6FD0,#123E8E);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 0 0 8px #0B0E13,0 7px 0 8px #0B0E13;
  animation:amToast .4s cubic-bezier(.3,1.5,.5,1) both}
.am-toast.sort{animation:amToastOut .26s both}
@keyframes amToast{from{opacity:0;transform:translateY(20px) scale(.92)}}
@keyframes amToastOut{to{opacity:0;transform:translateY(12px) scale(.95)}}
.am-toast p{margin:0;font-size:.88rem;line-height:1.3}
.am-toast p b{font-family:var(--display);font-weight:900}
.am-toast-b{grid-column:1/-1;display:flex;gap:8px}
.am-toast-b:empty{display:none}
.am-toast-b .am-b{height:34px;flex:1}
.am-toast-x{position:absolute;top:8px;right:8px;width:26px;height:26px;padding:5px;border:0;border-radius:50%;cursor:pointer;background:rgba(0,0,0,.3)}
.am-toast-x svg{display:block;width:100%;height:100%}

/* ==========================================================================
   LE SALON
   ========================================================================== */
.cs{--cs:#2F7FE0;display:flex;flex-direction:column;gap:12px;max-width:760px;margin:0 auto;padding:14px 12px 18px;border-radius:26px;color:#fff;
  background:radial-gradient(120% 50% at 50% 0,rgba(255,255,255,.15),transparent 60%),linear-gradient(172deg,color-mix(in srgb,var(--cs) 85%,#fff 0%),color-mix(in srgb,var(--cs) 55%,#0B1530));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;margin-block:12px 22px}
.cs-tete{display:flex;align-items:center;gap:10px}
.cs-tete .cs-plaque{flex:1;min-width:0}
.cs-tete .cs-plaque span{padding:6px 24px 7px;font-size:1rem;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cs-retour{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 6px;border:0;border-radius:999px;cursor:pointer;
  font:900 .86rem/1 var(--display);color:#0B0E13;background:linear-gradient(180deg,#FFFFFF,#D9E6F5);box-shadow:var(--am-cadre)}
.cs-retour .am-ico{width:20px;height:20px}
.cs-etat{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:800 .86rem/1.2 var(--display);color:#E6F2FF}
.cs-etat i{width:11px;height:11px;border-radius:50%;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13;animation:amPouls 1.4s infinite}
.cs-etat.ok i{background:#3ED07A}.cs-etat.ko i{background:#E3051C;animation:none}
.cs-etat.ko{color:#FFD0D8}
.cs-nom{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:rgba(6,18,46,.4)}
.cs-nom span,.cs-sur{font:800 .72rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:#CFE6FF;white-space:nowrap}
.cs-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-tuile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:14px 10px;border:0;border-radius:20px;
  text-align:center;font:inherit;color:#0B0E13;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.cs-tuile b{font:900 1.05rem/1.05 var(--display)}
.cs-tuile small{font:700 .78rem/1.2 var(--display);opacity:.75}
.cs-tuile-i{width:54px;height:54px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.cs-tuile--ouvrir{cursor:pointer;background:radial-gradient(90% 60% at 50% 0,#FFF6B8,transparent 60%),linear-gradient(180deg,#FFE45C,#F5B400);transition:transform .15s}
.cs-tuile--ouvrir:hover{transform:translateY(-2px) rotate(-1deg)}
.cs-tuile--ouvrir:active{transform:translateY(3px)}
.cs-tuile--rejoindre{color:#fff;background:radial-gradient(90% 60% at 50% 0,rgba(255,255,255,.25),transparent 60%),linear-gradient(180deg,#3FB27A,#13774A)}
.cs-code-l{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.cs-code-l .cs-input{flex:1 1 100%!important}
.cs-code-l .cs-b{flex:1 1 100%}
.cs-code-l .cs-input{flex:1;height:40px;font-size:1.1rem;padding:0 6px}
.cs-code-l .cs-b{height:40px;padding:0 12px}
.cs-tables,.cs-amis-l{display:flex;flex-direction:column;gap:8px}
.cs-vide{margin:0;padding:10px 12px;border-radius:14px;font-size:.84rem;color:#CFE6FF;background:rgba(6,18,46,.35);text-align:center}
.cs-table-l{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:16px;cursor:pointer;text-align:left;font:inherit;color:#fff;
  background:rgba(6,18,46,.45);box-shadow:inset 0 0 0 2px rgba(255,255,255,.1);transition:transform .14s,background .14s}
.cs-table-l:hover{background:rgba(6,18,46,.65);transform:translateX(3px)}
.cs-table-l.ami{box-shadow:inset 0 0 0 2.5px #FFCE00}
.cs-table-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cs-table-t b{font:900 .98rem/1.1 var(--display)}
.cs-table-t small{font-size:.76rem;color:#CFE6FF}
.cs-table-c{font:900 1.1rem/1 var(--display);font-style:normal;letter-spacing:.12em;color:#FFCE00;text-shadow:0 2px 0 #0B0E13}
/* le grand code de la table, comme une plaque de quai */
.cs-code-grand{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px 14px;border:0;border-radius:18px;cursor:pointer;color:#fff;
  background:var(--am-email);box-shadow:inset 0 0 0 2.5px var(--am-email),inset 0 0 0 4.5px #fff,0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.cs-code-grand small{font:800 .72rem/1 var(--display);text-transform:uppercase;letter-spacing:.1em;color:#BFD8FF}
.cs-code-grand > b{display:flex;gap:8px}
.cs-code-grand u{display:grid;place-items:center;width:52px;height:60px;border-radius:12px;text-decoration:none;font:900 2.1rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:csLettre .5s calc(var(--i)*.08s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes csLettre{from{opacity:0;transform:translateY(-14px) rotate(-12deg)}}
.cs-code-cp{position:absolute;right:12px;top:10px;width:24px;height:24px}
.cs-copie{text-align:center;font:800 .8rem/1 var(--display);color:#7CF0AE;min-height:.8rem;margin-top:-6px}
.cs-copie:empty{display:none}
/* les places, autour d'un tapis vert */
.cs-places{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 10px;border-radius:999px/60px;
  background:radial-gradient(70% 70% at 50% 40%,#2FA766,#14653D);box-shadow:inset 0 0 0 4px #8A5A2B,inset 0 0 0 6.5px #0B0E13,0 0 0 2.5px #0B0E13,0 6px 0 2.5px #0B0E13}
.cs-places--4{grid-template-columns:repeat(2,1fr);border-radius:40px}
.cs-place{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;animation:csPlace .45s calc(var(--k)*.06s) cubic-bezier(.3,1.5,.5,1) both}
@keyframes csPlace{from{opacity:0;transform:scale(.6)}}
.cs-place-av{display:block;width:58px;height:58px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.18);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.cs-place-av svg{display:block;width:100%;height:100%}
.cs-place b{max-width:100%;font:900 .86rem/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #0B0E13}
.cs-place small{padding:2px 8px;border-radius:999px;font:900 .64rem/1.3 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#0B0E13;background:#CFE6FF;box-shadow:0 0 0 1.5px #0B0E13}
.cs-place--hote small,.cs-place--vous small{background:#FFCE00}
.cs-place--ami small{background:#7CF0AE}
.cs-place--robot small{background:#B9C3CF}
.cs-place--libre{opacity:.55}
.cs-place--libre .cs-place-av{background:transparent;box-shadow:none;padding:12px}
.cs-place--libre small{background:transparent;color:#fff;box-shadow:none}
.cs-place.moi .cs-place-av{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 3px 0 5px #0B0E13}
.cs-robots{display:flex;align-items:center;justify-content:center;gap:10px;font:900 .9rem/1 var(--display)}
.cs-robots:empty{display:none}
.cs-robots > b{min-width:24px;text-align:center;font-size:1.2rem}
.cs-pm{width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;font:900 1.3rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFFFFF,#D9E6F5);box-shadow:var(--am-cadre)}
.cs-pm:active{transform:translateY(3px)}
.cs-ami{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:14px;background:rgba(6,18,46,.4)}
.cs-ami b{flex:1;min-width:0;font:900 .95rem/1 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-ami .cs-b{height:34px;font-size:.8rem}
.cs-amis-l > .cs-b{align-self:center}
.cs-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 18px;border:0;border-radius:18px;cursor:pointer;
  font:900 1.12rem/1 var(--display);color:#0B0E13;background:radial-gradient(90% 70% at 50% 0,#FFF6B8,transparent 60%),linear-gradient(180deg,#FFE45C,#F5B400);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .14s}
.cs-go .am-ico{width:30px;height:30px}
.cs-go:active{transform:translateY(4px)}
.cs-go:disabled{cursor:default;filter:saturate(.3);transform:none}
.cs-attente{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:16px;background:rgba(6,18,46,.4);font:800 .9rem/1 var(--display)}
.cs-attente i,.cl-attente i,.cl-suite i{width:9px;height:9px;border-radius:50%;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13;animation:csSaut 1s infinite}
.cs-attente i:nth-child(2),.cl-attente i:nth-child(2){animation-delay:.15s}
.cs-attente i:nth-child(3),.cl-attente i:nth-child(3){animation-delay:.3s}
.cs-attente span{margin-left:6px}
@keyframes csSaut{40%{transform:translateY(-6px)}}
.cs-hors{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 12px;border-radius:18px;background:rgba(6,18,46,.45);text-align:center}
.cs-hors b{font:900 1.05rem/1.2 var(--display)}
.cs-hors-ico{width:70px;height:70px}
.cs-hors-ico svg{width:100%;height:100%}
/* le compte à rebours posé sur le bouton « manche suivante » */
.cs-auto-b{position:relative}
.cs-auto{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;margin-left:8px;flex:none;vertical-align:middle}
.cs-auto i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#0B0E13 var(--csAng,0deg),rgba(11,14,19,.18) 0);animation:csAuto linear both;
  -webkit-mask:radial-gradient(circle,transparent 9px,#000 10px);mask:radial-gradient(circle,transparent 9px,#000 10px)}
.cs-auto b{font:900 .8rem/1 var(--display);color:inherit}
@property --csAng{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes csAuto{from{--csAng:360deg}to{--csAng:0deg}}
@media (max-width:480px){
  .cs-tete{flex-wrap:wrap}
  .cs-tete .cs-plaque{order:-1;flex-basis:100%}
  .cs{padding:12px 10px 14px;border-radius:22px;margin-inline:2px}
  .cs-tuile{min-height:132px}
  .cs-tuile-i{width:44px;height:44px}
  .cs-code-grand u{width:46px;height:54px;font-size:1.8rem}
  .cs-amis.am-bouton > span:not(.am-ico){display:none}
  .cs-amis.am-bouton{width:40px;padding:0!important;justify-content:center}
  .cs-amis.am-bouton .am-ico{margin:0}
}

/* ==========================================================================
   LES TABLES DES INVITÉS (Belote et Poker)
   ========================================================================== */
.cl{position:relative;display:flex;flex-direction:column;gap:10px;max-width:820px;margin:8px auto 18px;padding:10px;border-radius:24px;color:#fff;
  background:linear-gradient(180deg,#14284F,#0B1730);box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}
.cl-attente{display:flex;align-items:center;justify-content:center;gap:6px;min-height:220px;font:800 .95rem/1.3 var(--display);text-align:center}
.cl-attente span{margin-left:6px}
.cl-barre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 8px;border-radius:16px;background:rgba(255,255,255,.07)}
.cl-barre > span{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;border-radius:12px;background:rgba(0,0,0,.25)}
.cl-barre small{font:800 .6rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:#9FD0FF}
.cl-barre b{display:inline-flex;align-items:center;gap:4px;font:900 1.05rem/1 var(--display)}
.cl-camp.nous b{color:#FFCE00}.cl-camp.eux b{color:#FF9FB0}.cl-camp.pot b{color:#7CF0AE}
.cl-barre .cl-sp{flex:1;background:none;padding:0}
.cl-lignes{flex-direction:row!important;gap:4px!important;background:none!important}
.cl-past{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:900 .78rem/1 var(--display);font-style:normal;color:var(--i,#fff);background:var(--c);box-shadow:0 0 0 2px #0B0E13}
.cl-tk{display:inline-block;width:20px;height:14px}
.cl-tk svg{width:100%;height:100%}
.cl-quit{height:34px;padding:0 14px;border:0;border-radius:999px;cursor:pointer;font:900 .8rem/1 var(--display);color:#fff;
  background:linear-gradient(180deg,#FF5A78,#C8102E);box-shadow:var(--am-cadre)}
.cl-quit.arme{background:linear-gradient(180deg,#FFE45C,#F5B400);color:#0B0E13}
/* le tapis de belote : trois sièges autour, le pli au milieu */
.cl-tapis{position:relative;display:grid;grid-template-columns:1fr 1.6fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"g h d" "g c d";gap:6px;
  min-height:300px;padding:10px;border-radius:28px;
  background:radial-gradient(80% 70% at 50% 45%,#2FA766,#11563A);box-shadow:inset 0 0 0 5px #8A5A2B,inset 0 0 0 7.5px #0B0E13,inset 0 10px 30px rgba(0,0,0,.35)}
.cl-siege{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;align-self:center;text-align:center;min-width:0}
.cl-siege--haut{grid-area:h;align-self:start}
.cl-siege--gauche{grid-area:g}
.cl-siege--droite{grid-area:d}
.cl-av{display:block;width:50px;height:50px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.2);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:box-shadow .2s}
.cl-av svg{display:block;width:100%;height:100%}
.cl-siege b,.cl-joueur b{max-width:100%;font:900 .85rem/1.1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #0B0E13}
.cl-siege small{font:800 .6rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#CFE6FF}
.cl-siege.ami small{color:#FFCE00}
.cl-siege.parle .cl-av,.cl-joueur.parle .cl-av{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 6px #FFCE00,0 3px 0 6px #0B0E13;animation:clParle 1.2s infinite}
@keyframes clParle{50%{transform:scale(1.06)}}
.cl-dos{position:relative;display:block;width:60px;height:26px;margin-top:2px}
.cl-dos i{position:absolute;left:50%;top:0;width:16px;height:24px;margin-left:-8px;border-radius:3px;background:linear-gradient(160deg,#2A3B66,#10161F);
  box-shadow:0 0 0 1.5px #0B0E13,inset 0 0 0 2px rgba(255,206,0,.6);transform:translateX(calc(var(--k)*6px)) rotate(calc(var(--k)*6deg));transform-origin:50% 120%}
.cl-bulle{position:absolute;top:-6px;right:50%;margin-right:-46px;padding:3px 9px;border-radius:999px;font:900 .7rem/1.2 var(--display);font-style:normal;color:#0B0E13;
  background:#E6EEF8;box-shadow:0 0 0 2px #0B0E13;animation:amPop .4s cubic-bezier(.3,1.6,.5,1)}
.cl-bulle.prend{background:#FFCE00}
.cl-centre{grid-area:c;position:relative;min-height:190px}
.cl-retournee{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.cl-retournee small{font:900 .7rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:#FFE45C}
.cl .blt-c{width:84px}
.cl-pose{position:absolute;left:50%;top:50%;transition:transform .3s}
.cl-pose .blt-c{animation:clPose .35s cubic-bezier(.3,1.4,.5,1) both}
@keyframes clPose{from{opacity:0;transform:scale(.6) translateY(20px)}}
.cl-pose .blt-c{width:70px!important}
.cl-pose--bas{transform:translate(-50%,-14%)}
.cl-pose--haut{transform:translate(-50%,-90%)}
.cl-pose--gauche{transform:translate(-100%,-52%) rotate(-6deg)}
.cl-pose--droite{transform:translate(0%,-52%) rotate(6deg)}
.cl-pose.corr .blt-c{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #5AB0FF,0 4px 0 5px #0B0E13}
.cl-plis{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;white-space:nowrap;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  background:rgba(0,0,0,.35);font:900 .72rem/1.2 var(--display)}
.cl-plis span{color:#9FD0FF;text-transform:uppercase;letter-spacing:.06em;font-size:.62rem}
/* ma place */
.cl-moi{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:16px;background:rgba(255,255,255,.07)}
.cl-moi .cl-av{width:40px;height:40px}
.cl-moi > b{font:900 1rem/1 var(--display)}
.cl-moi.parle{background:linear-gradient(90deg,rgba(255,206,0,.28),rgba(255,206,0,.06));box-shadow:inset 0 0 0 2px #FFCE00}
.cl-dit{margin-left:auto;font:800 .86rem/1.2 var(--display);color:#E6F2FF;text-align:right}
.cl-moi.parle .cl-dit{color:#FFE45C}
.cl-chrono{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;flex:none}
.cl-chrono i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#FFCE00 var(--csAng,0deg),rgba(255,255,255,.15) 0);animation:csAuto linear both;
  -webkit-mask:radial-gradient(circle,transparent 12px,#000 13px);mask:radial-gradient(circle,transparent 12px,#000 13px)}
.cl-chrono b{font:900 .9rem/1 var(--display)}
/* ma main, en éventail */
.cl-main{display:flex;justify-content:center;align-items:flex-end;padding:10px 4px 6px;min-height:150px}
.cl-main{--cw:84px}
.cl-main .blt-c{margin-left:clamp(-66px,calc((100% - var(--cw)) / (var(--n,8) - 1) - var(--cw)),-12px);transform:rotate(calc(var(--k)*3deg)) translateY(calc(var(--k)*var(--k)*1.2px));transform-origin:50% 140%;transition:transform .16s}
.cl-main .blt-c:first-child{margin-left:0}
.cl-main .blt-c.ok{cursor:pointer;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 4px 0 5px #0B0E13}
.cl-main .blt-c.ok:hover,.cl-main .blt-c.ok:focus-visible{transform:translateY(-14px) rotate(calc(var(--k)*3deg));z-index:2}
.cl-main .blt-c.cl-non{filter:brightness(.62) saturate(.6)}
@media (min-width:700px){ .cl-main{--cw:96px} .cl .blt-c{width:96px} .cl-tapis{min-height:340px} }
/* les gestes */
.cl-enchere{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;border-radius:18px;
  background:linear-gradient(175deg,#2F7FD6,#174FA3);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 0 0 8px #0B0E13;animation:amToast .35s cubic-bezier(.3,1.5,.5,1)}
.cl-b{height:44px;font-size:.95rem}
.cl-b em{font-style:normal;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.25)}
.cl-b .cl-past{width:26px;height:26px}
.cl-b--ligne{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 65%,#fff),var(--c));color:#fff}
/* les panneaux de fin */
.cl-pan{position:absolute;left:50%;top:50%;z-index:5;transform:translate(-50%,-50%);width:min(420px,calc(100% - 20px));display:flex;flex-direction:column;gap:10px;padding:16px 14px;border-radius:22px;
  background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.16),transparent 60%),linear-gradient(170deg,#2C6FD0,#123E8E);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;animation:clPan .45s cubic-bezier(.3,1.5,.5,1) both;text-align:center}
@keyframes clPan{from{opacity:0;transform:translate(-50%,-40%) scale(.9)}}
.cl-pan p{margin:0;font-size:.9rem}
.cl-bil{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cl-bil-c{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border-radius:16px;background:rgba(6,18,46,.5)}
.cl-bil-c.gagne{background:linear-gradient(180deg,#FFE45C,#F5B400);color:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13}
.cl-bil-c small{font:900 .72rem/1 var(--display);text-transform:uppercase;letter-spacing:.08em}
.cl-bil-c b{font:900 1.8rem/1 var(--display)}
.cl-bil-c em{font-style:normal;font:800 .82rem/1 var(--display);opacity:.8}
.cl-suite{display:flex;align-items:center;justify-content:center;gap:8px;font:800 .86rem/1 var(--display);color:#CFE6FF}
/* — POKER chez l'invité — */
.cl-ruban{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.cl-joueur{position:relative;flex:1 0 92px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 6px;border-radius:16px;background:rgba(255,255,255,.07)}
.cl-joueur small{display:inline-flex;align-items:center;gap:3px;font:900 .78rem/1 var(--display);color:#FFE45C}
.cl-joueur .cl-tk{width:16px;height:11px}
.cl-joueur.couche{opacity:.55}
.cl-joueur .cl-bulle{top:-4px;right:4px;margin:0;font-size:.62rem}
.cl-dos--pk{width:56px;height:22px}
.cl-dos--pk i{width:14px;height:20px;margin-left:-7px;transform:translateX(calc((var(--k) - 2)*6px)) rotate(calc((var(--k) - 2)*7deg))}
.cl-feutre{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px;border-radius:28px;
  background:radial-gradient(80% 70% at 50% 45%,#C42A43,#6E1020);box-shadow:inset 0 0 0 5px #8A5A2B,inset 0 0 0 7.5px #0B0E13,inset 0 10px 30px rgba(0,0,0,.35)}
.cl-rang{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;max-width:520px}
.cl-rang--b{grid-template-columns:repeat(3,1fr);max-width:330px}
.cl-slot{aspect-ratio:5/7;border-radius:10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);background:rgba(0,0,0,.18)}
.cl-slot--b{aspect-ratio:16/9}
.cl-slot.plein{box-shadow:none;background:none;animation:clPose .35s cubic-bezier(.3,1.4,.5,1) both}
.cl-slot .mpk-bonus{width:100%}
.cl-banniere{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 22px;border-radius:14px;
  background:var(--am-email);box-shadow:inset 0 0 0 2px var(--am-email),inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:clBan 1.8s both;pointer-events:none}
.cl-banniere b{font:900 1.2rem/1 var(--display);white-space:nowrap}
.cl-banniere small{font:700 .78rem/1 var(--display);color:#BFD8FF}
@keyframes clBan{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(.95)}}
.cl-main--pk{gap:8px;min-height:0}
.cl-mc{width:min(19vw,104px);transition:transform .16s}
.cl-mc.choix{cursor:pointer}
.cl-mc.choix:hover{transform:translateY(-6px)}
.cl-mc.pris{transform:translateY(-14px)}
.cl-mc.pris .mpk-carte{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 3px 0 5px #0B0E13}
.cl-mc.couche{filter:grayscale(.8) brightness(.7)}
.cl-mc .mpk-carte{width:100%}
.cl-pan--abat{max-height:calc(100% - 20px);overflow:auto}
.cl-abat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;padding:8px 10px;border-radius:14px;background:rgba(6,18,46,.5);text-align:left}
.cl-abat b{font:900 .95rem/1 var(--display)}
.cl-abat em{font-style:normal;font:900 .9rem/1 var(--display);color:#FFE45C}
.cl-abat u{grid-column:2;text-decoration:none;font:900 .9rem/1 var(--display);color:#7CF0AE}
.cl-abat.gagne{box-shadow:inset 0 0 0 2.5px #FFCE00}
.cl-abat.moi b{color:#FFCE00}
.cl-abat-c{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.cl-abat-c .mpk-carte{width:100%}
.cl-pan--petit{top:38%}
@media (max-width:480px){
  .cl{padding:8px;border-radius:20px;margin-inline:2px}
  .cl-tapis{grid-template-columns:.9fr 1.5fr .9fr;min-height:280px;padding:8px}
  .cl-av{width:42px;height:42px}
  .cl-barre{gap:5px}
  .cl-barre > span{padding:3px 7px}
}

/* — le menu du Métro Poker : la porte vers les tables en ligne — */
.mpk6-ligne{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 0;padding:12px 16px;border:0;border-radius:20px;cursor:pointer;text-align:left;color:#fff;font:inherit;
  background:radial-gradient(90% 70% at 20% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(170deg,#2C6FD0,#123E8E);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .15s}
.mpk6-ligne:hover{transform:translateY(-2px)}
.mpk6-ligne:active{transform:translateY(3px)}
.mpk6-ligne .am-ico{width:52px;height:52px}
.mpk6-ligne span{display:flex;flex-direction:column;gap:3px;flex:1}
.mpk6-ligne b{font:900 1.15rem/1 var(--display)}
.mpk6-ligne small{font:700 .82rem/1.2 var(--display);color:#CFE6FF}
.mpk6-ligne i{font-style:normal;padding:8px 14px;border-radius:999px;font:900 .9rem/1 var(--display);color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:var(--am-cadre)}
@media (prefers-reduced-motion:reduce){
  .am-pan,.am-toast,.cs-place,.cs-code-grand u,.cl-pan,.cl-banniere,.cl-pose .blt-c{animation:none!important;transition:none!important}
}
/* @@ fin cartes_lot6.css @@ */
/* @@ debut retouches_lot7.css @@ */
/* ==========================================================================
   LOT 7 — RETOUCHES
   ========================================================================== */
/* — accueil : « Créer » passe au rubis, « Amis » au vert ; plus de rose — */
.hero-cta .btn--creer{background:linear-gradient(180deg,#FF5A78,#C8102E)!important;color:#fff!important;--bd:#0B0E13;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.hero-cta .am-bouton{background:linear-gradient(180deg,#62DE98,#0B7A45)!important}
/* — la fiche d'une ligne : le numéro bien au centre de sa pastille — */
.lineshow .ls-head .bullet{display:inline-grid!important;place-items:center!important;padding:0!important;line-height:1!important;font-family:var(--display)!important;font-weight:900!important;text-align:center;text-transform:none!important}
.lineshow .ls-head > div > span:empty{display:none}
/* — fins de partie : le bouton Accueil n'est plus rose — */
:is(.rnr-bt--rose,.dfr-bt--rose,.sor-bt--rose){background:linear-gradient(180deg,#6FBBFF,#1E66C9)!important}
/* — SNAKE : le bandeau se voit en entier, les onglets ne le touchent plus — */
.sk4:has(> .sk4-ban){display:flow-root}
.sk4-ban{margin:18px 12px 30px!important}
/* — METRO RUNNER : un score compact, plus de bandeau « Terminus dans… » — */
.rn-hud .rn-but{display:none!important}
.rn-hud .rn-score{flex-direction:row!important;align-items:center!important;gap:5px!important;min-width:0!important;padding:3px 11px 3px 7px!important;border-radius:999px!important}
.rn-hud .rn-score::before{content:"";position:static!important;inset:auto!important;transform:none!important;width:16px;height:16px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF6B8,#F5B400 60%);box-shadow:0 0 0 1.5px #0B0E13}
.rn-hud .rn-score small{display:none!important}
.rn-hud .rn-score b{font-size:1.05rem!important;line-height:1!important}
/* — SOLITAIRE : la barre du trajet au centre, le nom sur une plaque de station — */
.so-jeu.sol3 .so-carte .so-trajet{position:relative!important;left:auto!important;right:auto!important;margin:2px auto 3px!important;width:calc(100% - 10px)!important;align-self:center}
.so-jeu.sol3 .so-carte .so-nom{display:block;margin:1px 3px 2px!important;padding:2px 3px!important;border-radius:3px;background:#153E8C!important;color:#fff!important;
  text-align:center;box-shadow:inset 0 0 0 1px #153E8C,inset 0 0 0 1.6px #fff;text-shadow:none!important;letter-spacing:0!important}
/* — MÉTRO KING : le « i » des messages de la table — */
.mk-jeu:not(.mk7-bulle) .mk-msg{display:none!important}
.mk7-i{position:absolute;left:8px;bottom:8px;z-index:4;width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;
  font:900 .95rem/1 Georgia,serif;font-style:italic;color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mk7-i.on{background:linear-gradient(180deg,#6FBBFF,#1E66C9);color:#fff}
/* — METRO CITY : plus de pointillés ; tout le reste (fond beige, en-têtes) reste comme avant — */
.mcx-boite .mc-head,.mc-lx .mc-head{border-bottom:2.5px solid rgba(11,14,19,.14)!important}
.mcx-roue .mc-head{border-bottom:2.5px solid rgba(255,255,255,.22)!important}
.mcx>div:has(>.mc-kv) .mc-kv,.mc-lx .mc-kv{border-bottom-style:solid!important;border-bottom-color:rgba(11,14,19,.1)!important}
:is(.mcx,.mcx-boite) .mc-line{border-bottom-style:solid!important;border-bottom-color:rgba(11,14,19,.1)!important}
.mc-op-pointilles{border-top-style:solid!important}
.mc-mtr-jetons i::after{border-left-style:solid!important}
.mcf-st-libre{border-style:solid!important}
/* @@ fin retouches_lot7.css @@ */
/* @@ debut metrodrop_lot8.css @@ */
/* ==========================================================================
   MÉTRO DROP — LOT 8 : boutique du quai, roue du jour, outils, murs du plateau
   ========================================================================== */
/* — les murs : les cases hors du plateau deviennent du carrelage de tunnel — */
.md-board .md-mur{position:absolute;left:0;top:0;z-index:1;pointer-events:none;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),
    repeating-linear-gradient(0deg,#1E2A3C 0 9px,#26354B 9px 10px),#22304A;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.md-board .md-mur::after{content:"";position:absolute;inset:22% 22%;border-radius:50%;background:radial-gradient(circle,rgba(255,206,0,.18),transparent 70%)}
/* — la barre des outils, sous le plateau — */
.mdo-barre{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:540px;margin:10px auto 0;padding:8px 10px;border-radius:18px;
  background:linear-gradient(180deg,#1B4396,#102C66);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mdo-barre.vide{display:none}
.mdo-b{position:relative;width:48px;height:48px;padding:5px;border:0;border-radius:14px;cursor:pointer;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 55%,#fff),var(--c));box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transition:transform .14s}
.mdo-b:active{transform:translateY(3px)}
.mdo-b.arme{transform:translateY(-4px) scale(1.06);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 6px 0 5.5px #0B0E13;animation:mdoArme 1s ease-in-out infinite}
@keyframes mdoArme{50%{transform:translateY(-6px) scale(1.08)}}
.mdo-b-i,.mdo-b-i svg{display:block;width:100%;height:100%}
.mdo-n{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 4px;border-radius:999px;display:grid;place-items:center;
  font:900 .72rem/1 var(--display);color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.mdo-consigne{flex-basis:100%;margin:2px 0 0;text-align:center;font:800 .84rem/1.2 var(--display);color:#FFE45C}
.md-board.mdo-vise .md-tile{cursor:crosshair}
.md-board.mdo-vise{box-shadow:0 0 0 3px #FFCE00,0 0 26px rgba(255,206,0,.45)!important}
.md-tile.mdo-indice{z-index:5;animation:mdoIndice .6s ease-in-out infinite}
.md-tile.mdo-indice .md-face{box-shadow:0 0 0 3px #FFCE00,0 0 16px #FFCE00!important}
@keyframes mdoIndice{50%{filter:brightness(1.25)}}

/* — l'accueil : la boutique et la roue — */
.mdo-hub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}
.mdo-hub-b{position:relative;display:flex;align-items:center;gap:10px;min-height:68px;padding:8px 12px;border:0;border-radius:18px;cursor:pointer;text-align:left;font:inherit;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .14s}
.mdo-hub-b:active{transform:translateY(3px)}
.mdo-hub-b span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mdo-hub-b b{font:900 1.05rem/1 var(--display)}
.mdo-hub-b small{font:700 .74rem/1.15 var(--display);opacity:.85}
.mdo-hub-i{flex:none;width:44px;height:44px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.mdo-hub-i svg{display:block;width:100%;height:100%}
.mdo-hub-b--bout{color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400)}
.mdo-hub-b--roue{color:#fff;background:linear-gradient(180deg,#6FBBFF,#1E66C9);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.mdo-hub-b--roue.dispo::after,.mdo-roue-b.dispo::after{content:"";position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#E3051C;box-shadow:0 0 0 2.5px #0B0E13;animation:amPop .5s cubic-bezier(.3,1.6,.5,1),mdoPouls 1.4s 1s infinite}
@keyframes mdoPouls{50%{transform:scale(1.2)}}
.mdo-hub-b--roue.dispo .mdo-hub-i{animation:mdoRoueTourne 6s linear infinite}
@keyframes mdoRoueTourne{to{transform:rotate(360deg)}}

/* — la boutique — */
.mdo-bout{display:flex;flex-direction:column;gap:12px;max-width:860px;margin:10px auto 20px;padding:14px 12px 18px;border-radius:26px;color:#fff;
  background:radial-gradient(120% 50% at 50% 0,rgba(255,255,255,.16),transparent 60%),linear-gradient(172deg,#0FA3B1,#0B5E78 70%,#083E52);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13}
.mdo-tete{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mdo-tete .mdo-plaque{flex:1 1 100%;order:-1}
.mdo-plaque{display:flex;justify-content:center;margin:0}
.mdo-plaque span{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:#153E8C;font:900 1.1rem/1.1 var(--display);color:#fff;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mdo-plaque span::before,.mdo-plaque span::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.mdo-plaque span::before{left:11px}.mdo-plaque span::after{right:11px}
.mdo-retour{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border:0;border-radius:999px;cursor:pointer;font:900 .9rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFFFFF,#D9E6F5);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mdo-solde{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 6px;border-radius:999px;font:900 1.1rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mdo-solde-i{width:30px;height:30px}
.mdo-ico{display:inline-block}
.mdo-ico svg{display:block;width:100%;height:100%}
.mdo-roue-b{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:0;border-radius:18px;cursor:pointer;text-align:left;font:inherit;color:#fff;
  background:radial-gradient(90% 70% at 15% 0,rgba(255,255,255,.25),transparent 60%),linear-gradient(170deg,#2C6FD0,#153E8C);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mdo-roue-b span{display:flex;flex-direction:column;gap:3px}
.mdo-roue-b b{font:900 1.1rem/1 var(--display)}
.mdo-roue-b small{font:700 .8rem/1.2 var(--display);color:#CFE6FF}
.mdo-roue-i{width:52px;height:52px;flex:none}
.mdo-roue-b.dispo .mdo-roue-i{animation:mdoRoueTourne 6s linear infinite}
.mdo-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,190px),1fr));gap:12px}
.mdo-carte{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;border-radius:18px;text-align:center;color:#0B0E13;
  background:radial-gradient(100% 60% at 50% 0,rgba(255,255,255,.55),transparent 65%),linear-gradient(180deg,color-mix(in srgb,var(--c) 30%,#fff),color-mix(in srgb,var(--c) 62%,#fff));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:mdoCarte .45s calc(var(--n)*.04s) cubic-bezier(.3,1.4,.5,1) both}
@keyframes mdoCarte{from{opacity:0;transform:translateY(12px) scale(.94)}}
.mdo-carte.refus{animation:mdoRefus .4s}
@keyframes mdoRefus{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.mdo-carte.achat{animation:mdoAchat .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes mdoAchat{40%{transform:scale(1.07)}}
.mdo-carte-v{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,color-mix(in srgb,var(--c) 25%,#fff));box-shadow:0 0 0 2.5px #0B0E13,inset 0 -5px 0 rgba(0,0,0,.08)}
.mdo-carte-i{width:52px;height:52px}
.mdo-qte{position:absolute;right:-8px;bottom:-4px;padding:2px 7px;border-radius:999px;font:900 .8rem/1.2 var(--display);color:#fff;background:#0B0E13}
.mdo-nom{font:900 .95rem/1.1 var(--display);min-height:2.2em;display:flex;align-items:center}
.mdo-i{position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;border:0;border-radius:50%;cursor:pointer;font:900 .82rem/1 Georgia,serif;font-style:italic;color:#0B0E13;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2px #0B0E13}
.mdo-i.on{background:linear-gradient(180deg,#6FBBFF,#1E66C9);color:#fff}
.mdo-dit{margin:0;padding:6px 8px;border-radius:10px;font:700 .78rem/1.3 var(--display);color:#fff;background:#153E8C}
.mdo-acheter{display:inline-flex;align-items:center;justify-content:center;width:100%;height:40px;margin-top:auto;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transition:transform .14s}
.mdo-acheter:active{transform:translateY(3px)}
.mdo-acheter.non{filter:saturate(.35) brightness(.92)}
.mdo-prix{display:inline-flex;align-items:center;gap:5px;font:900 1rem/1 var(--display);color:#0B0E13}
.mdo-prix-i{width:24px;height:24px}
/* — la roue du jour — */
.mdo-roue-fond{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:14px;background:rgba(6,10,20,.66);opacity:0;transition:opacity .2s}
.mdo-roue-fond.on{opacity:1}
.mdo-roue-pan{position:relative;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 16px 18px;border-radius:26px;color:#fff;
  background:radial-gradient(120% 60% at 50% 0,rgba(255,255,255,.16),transparent 60%),linear-gradient(170deg,#2C6FD0,#123E8E 70%,#0E2F6E);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;transform:scale(.94);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.mdo-roue-fond.on .mdo-roue-pan{transform:none}
.mdo-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;cursor:pointer;font:900 1.4rem/1 var(--display);color:#fff;
  background:linear-gradient(180deg,#FF5A78,#C8102E);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mdo-roue{position:relative;width:min(290px,78vw);aspect-ratio:1}
.mdo-roue-svg{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
.mdo-roue-tourne{transform-origin:0 0}
.mdo-roue-fleche{position:absolute;left:50%;top:-8px;width:30px;height:36px;margin-left:-15px;z-index:2;
  background:#E3051C;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 0 0 #0B0E13)}
.mdo-roue-fleche::before{content:"";position:absolute;inset:-3px;background:#0B0E13;clip-path:polygon(0 0,100% 0,50% 100%);z-index:-1}
.mdo-roue-res{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:999px;font:900 1.1rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;opacity:0;transform:scale(.6)}
.mdo-roue-res.on{opacity:1;transform:none;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.mdo-res-i{width:34px;height:34px}
.mdo-go{min-width:200px;height:56px;padding:0 24px;border:0;border-radius:18px;cursor:pointer;font:900 1.2rem/1 var(--display);color:#0B0E13;
  background:radial-gradient(90% 70% at 50% 0,#FFF6B8,transparent 60%),linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.mdo-go:disabled{cursor:default;filter:saturate(.3);color:#3A3F47}
@media (max-width:480px){
  .mdo-hub-b{min-height:60px;padding:8px 10px;gap:8px}
  .mdo-hub-i{width:36px;height:36px}
  .mdo-hub-b b{font-size:.95rem}
  .mdo-b{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){ .mdo-carte,.mdo-b.arme,.mdo-hub-i,.mdo-roue-i{animation:none!important} }
/* @@ fin metrodrop_lot8.css @@ */
/* @@ debut hall_profil_lot9.css @@ */
/* ==========================================================================
   LOT 9 — LE HALL DES TROPHÉES ET LE PROFIL : moins de phrases, plus de
   couleurs ; plus de boîtes crème ni de pointillés.
   ========================================================================== */
:root{--l9-cadre:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.view.lbx .row > .tag,.view.pf .pf-haut > .tag{display:none!important}
/* — le hall — */
.view.lbx .lbx-sur,.view.lbx .lbx-hero-txt p,.view.lbx p.credit{display:none!important}
.view.lbx .lbx-hero-txt{text-align:center;align-items:center}
.view.lbx .lbx-titre{text-align:center;margin:0 auto!important}
.view.lbx .lbx-invite{display:flex!important;align-items:center;gap:10px;padding:10px 12px!important;border:0!important;border-radius:18px!important;color:#fff!important;
  background:radial-gradient(90% 70% at 15% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(170deg,#2C6FD0,#153E8C)!important;box-shadow:var(--l9-cadre)!important}
.view.lbx .lbx-invite p{display:none!important}
.view.lbx .lbx-invite b{color:#fff!important;font-family:var(--display);font-weight:900}
.view.lbx .lbx-invite > div{flex:1;min-width:0}
.view.lbx .lbx-invite .btn{flex:none;background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;border:0!important}
.view.lbx .lbx-bloc-t > b{display:none!important}
.view.lbx .lbx-bloc-t{margin-top:14px}
.view.lbx .lbx-periodes{display:flex!important;gap:2px;width:100%;padding:4px;border-radius:999px;background:rgba(6,18,46,.6);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.view.lbx .lbx-periodes button{flex:1 1 auto;min-width:0;height:36px;padding:0 8px!important;border:0!important;border-radius:999px!important;font:900 .72rem/1 var(--display)!important;white-space:nowrap;
  background:transparent!important;color:#CFE6FF!important;box-shadow:none!important}
.view.lbx .lbx-periodes button.on{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important}
/* les jeux : un ruban qu'on fait défiler, plus une liste de vingt tuiles */
.view.lbx .lbx-jeux{display:flex!important;gap:8px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:6px 4px 12px!important;margin:10px -4px 0;scrollbar-width:none}
.view.lbx .lbx-jeux::-webkit-scrollbar{display:none}
.view.lbx .lbx-jeu{flex:0 0 92px!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;min-height:0!important;
  padding:8px 6px 10px!important;text-align:center!important;scroll-snap-align:start;border-radius:16px!important}
.view.lbx .lbx-jeu-ico{margin:0!important}
.view.lbx .lbx-jeu-t{font-size:.72rem!important;line-height:1.15!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* le podium vide : des marches, pas de phrases */
.view.lbx .lbx-marche.libre .lbx-nom,.view.lbx .lbx-marche.libre .lbx-pts{visibility:hidden}
.view.lbx .lbx-vide{display:none!important}
/* — le profil — */
.view.pf .pf-passe{color:#fff!important;border:0!important;
  background:radial-gradient(110% 70% at 20% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(135deg,#2C6FD0,#153E8C 58%,#5B2DA0)!important;box-shadow:var(--l9-cadre)!important}
.view.pf .pf-passe-sur,.view.pf .pf-passe-id small{display:none!important}
.view.pf .pf-pseudo{color:#fff!important;text-shadow:0 2px 0 #0B0E13}
.view.pf .pf-titre{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;box-shadow:0 0 0 2px #0B0E13!important}
.view.pf .pf-passe-pied{border-top:0!important;background:none!important}
.view.pf .pf-passe-pied::before,.view.pf .pf-passe-pied::after{display:none!important}
.view.pf .pf-passe-pied .btn--solid{background:linear-gradient(180deg,#FFE45C,#F5B400)!important;color:#0B0E13!important;border:0!important;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.view.pf .pf-passe-pied .btn--ghost{background:linear-gradient(180deg,#6FBBFF,#1E66C9)!important;color:#fff!important;border:0!important;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.view.pf .pf-niveau-txt .pf-sur,.view.pf .pf-prochain{display:none!important}
.view.pf .pf-chiffres .pf-ch{border:0!important;color:#fff!important;box-shadow:var(--l9-cadre)!important}
.view.pf .pf-chiffres .pf-ch:nth-child(1){background:linear-gradient(180deg,#FFD84A,#E0A800)!important;color:#0B0E13!important}
.view.pf .pf-chiffres .pf-ch:nth-child(2){background:linear-gradient(180deg,#62DE98,#0B7A45)!important}
.view.pf .pf-chiffres .pf-ch:nth-child(3){background:linear-gradient(180deg,#6FBBFF,#1E66C9)!important}
.view.pf .pf-chiffres .pf-ch:nth-child(4){background:linear-gradient(180deg,#FFA463,#E0601A)!important}
.view.pf .pf-chiffres .pf-ch:nth-child(5){background:linear-gradient(180deg,#B48CFF,#6B2FA0)!important}
.view.pf .pf-chiffres .pf-ch b,.view.pf .pf-chiffres .pf-ch .pf-ch-lab{color:inherit!important}
.view.pf .pf-chiffres .pf-ch small,.view.pf .pf-chiffres .pf-ch .pf-ch-sur{display:none!important}
.view.pf .pf-chiffres .pf-ch-ico{background:#fff;border-radius:50%;box-shadow:0 0 0 2px #0B0E13}
.view.pf .pf-compte,.view.pf .pf-fiche-tete small,.view.pf .pf-dec-t small,.view.pf .pf-vide p,.view.pf .lbx-badge small{display:none!important}
.view.pf .pf-bloc{justify-content:center!important}
.view.pf .pf-bloc > b{position:relative;display:inline-block;padding:7px 30px 8px;border-radius:10px;background:#153E8C;font:900 1.05rem/1.1 var(--display);color:#fff;text-transform:none;letter-spacing:0;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.view.pf .pf-bloc > b::before,.view.pf .pf-bloc > b::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#C9D1DA;box-shadow:0 0 0 1.5px #0B0E13}
.view.pf .pf-bloc > b::before{left:11px}.view.pf .pf-bloc > b::after{right:11px}
/* les fiches de record prennent la couleur de leur jeu */
.view.pf .pf-fiche{background:radial-gradient(100% 60% at 50% 0,rgba(255,255,255,.5),transparent 65%),linear-gradient(180deg,color-mix(in srgb,var(--c) 22%,#fff),color-mix(in srgb,var(--c) 42%,#fff))!important}
/* @@ fin hall_profil_lot9.css @@ */
/* @@ debut france_tricolore.css @@ */
/* ==========================================================================
   ONGLET FRANCE — BLEU, BLANC, ROUGE
   Dégradés de bleu de France, filets blancs, rouge vif, or des médailles ;
   contours noirs et ombres franches comme partout ailleurs.
   ========================================================================== */
.fr10{--fr-bleu:#0055A4;--fr-nuit:#002654;--fr-rouge:#EF4135;--fr-rubis:#C8102E;--fr-or:#FFCE00;--fr-k:#0B0E13;
  --fr-cadre:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.fr10-ico{display:inline-block;flex:none;line-height:0}
.fr10-ico svg{display:block}
.fr10-cache{display:none!important}

/* — la plaque tricolore : un titre de section — */
.fr10-plaque{display:flex;align-items:stretch;justify-content:center;gap:0;margin:22px auto 12px;width:max-content;max-width:100%}
.fr10-plaque span{position:relative;padding:8px 22px 9px;font:900 1.08rem/1.1 var(--display);letter-spacing:.02em;color:#fff;text-transform:uppercase;
  background:linear-gradient(180deg,#1E6FC2,#0055A4 55%,#003F82);box-shadow:inset 0 0 0 2px #0055A4,inset 0 0 0 3.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  border-radius:8px;text-shadow:0 2px 0 #002654}
.fr10-pl-c{width:14px;min-height:34px;flex:none;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.fr10-pl-c:first-child{background:#0055A4;border-radius:8px 0 0 8px;margin-right:-2px}
.fr10-pl-c:last-child{background:#EF4135;border-radius:0 8px 8px 0;margin-left:-2px}
.fr10-plaque--sec{margin-top:30px}

/* — le petit « i » — */
.fr10-i{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;padding:0;border:0;border-radius:50%;cursor:pointer;
  font:900 .95rem/1 Georgia,serif;font-style:italic;color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.fr10-i.on{background:linear-gradient(180deg,#6FBBFF,#1E66C9);color:#fff}
.fr10-info{margin:0;padding:8px 10px;border-radius:12px;font:700 .8rem/1.35 var(--display);color:#fff;background:rgba(0,38,84,.85);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18)}

/* ==========================================================================
   LE HUB
   ========================================================================== */
.fr10-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;align-items:center;min-height:250px;padding:22px 18px 34px;border-radius:28px;
  background:radial-gradient(90% 70% at 85% 25%,rgba(255,255,255,.18),transparent 60%),linear-gradient(150deg,#1D6FC6 0%,#0055A4 38%,#00306E 100%);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #fff,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;margin:6px 6px 24px}
.fr10-hero-etoiles{position:absolute;inset:0;pointer-events:none}
.fr10-hero-etoiles i{position:absolute;width:var(--t);height:var(--t);background:#FFCE00;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity:.75;animation:fr10Scintille 2.6s var(--d) ease-in-out infinite}
@keyframes fr10Scintille{50%{transform:scale(.55) rotate(30deg);opacity:.25}}
.fr10-hero-t{position:relative;z-index:2;margin:0;display:flex;flex-direction:column;line-height:.86;font:900 clamp(2.9rem,15vw,5.6rem)/.86 var(--display);text-transform:uppercase;
  color:#fff;letter-spacing:-.01em;text-shadow:0 4px 0 #0B0E13,3px 0 0 #0B0E13,-3px 0 0 #0B0E13,0 -3px 0 #0B0E13,7px 7px 0 #EF4135}
.fr10-hero-t span:first-child{font-size:.48em;color:#FFCE00;text-shadow:0 3px 0 #0B0E13,2px 0 0 #0B0E13,-2px 0 0 #0B0E13,0 -2px 0 #0B0E13;margin-bottom:6px}
.fr10-hero-t span{animation:fr10Monte .6s cubic-bezier(.3,1.5,.5,1) both}
.fr10-hero-t span:last-child{animation-delay:.12s}
@keyframes fr10Monte{from{opacity:0;transform:translateY(24px) scale(.9)}}
.fr10-hero-carte{position:absolute;right:-8px;bottom:6px;width:min(52vw,250px);aspect-ratio:1;z-index:1;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25));
  animation:fr10Respire 5s ease-in-out infinite}
@keyframes fr10Respire{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.fr10-hero-carte svg{display:block;width:100%;height:100%}
.fr10-mini-r{fill:var(--c);stroke:#0B0E13;stroke-width:5;stroke-linejoin:round;animation:fr10Region .5s calc(var(--i)*.06s) cubic-bezier(.3,1.5,.5,1) both;transform-box:fill-box;transform-origin:center}
@keyframes fr10Region{from{opacity:0;transform:scale(.6)}}
.fr10-hero-drapeau{position:absolute;left:auto;right:min(40vw,200px);top:-14px;width:110px;height:110px;z-index:0;opacity:.95;transform:rotate(-8deg)}
.fr10-hero-drapeau svg{display:block;width:100%;height:100%}
.fr10-hero-bande{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(90deg,#0055A4 0 33.4%,#FFFFFF 33.4% 66.6%,#EF4135 66.6%);box-shadow:inset 0 3px 0 #0B0E13}
@media (min-width:700px){
  .fr10-hero{grid-template-columns:1fr 1fr;min-height:300px;padding:30px 34px 40px}
  .fr10-hero-carte{position:relative;right:auto;bottom:auto;width:100%;max-width:300px;justify-self:end}
  .fr10-hero-drapeau{right:300px;top:8px;width:150px;height:150px}
}
/* — l'exploration — */
.fr10-explo{position:relative;padding:4px 14px 16px;border-radius:26px;color:#fff;
  background:radial-gradient(110% 60% at 50% 0,rgba(255,255,255,.14),transparent 60%),linear-gradient(170deg,#0E3E86,#002654);box-shadow:var(--fr-cadre)}
.fr10-explo .fr10-plaque{margin-top:-14px}
.fr10-explo-h{display:flex;align-items:center;gap:14px;margin-top:4px}
.fr10-explo-coc{position:relative;flex:none;width:132px;height:132px;animation:fr10Tourne .9s cubic-bezier(.3,1.4,.5,1) both}
@keyframes fr10Tourne{from{transform:rotate(-120deg) scale(.6);opacity:0}}
.fr10-explo-coc svg{display:block}
.fr10-coc-arc{animation:fr10Arc 1.2s .2s ease-out both}
@keyframes fr10Arc{from{stroke-dasharray:0 var(--l)}}
.fr10-explo-pcw{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;font:900 1.6rem/1 var(--display);color:#fff;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13,0 -1.5px #0B0E13}
.fr10-explo-pcw small{font-size:.9rem}
.fr10-explo-chips{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.fr10-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));box-shadow:inset 0 0 0 2px rgba(255,255,255,.14),0 0 0 2px #0B0E13;
  animation:fr10Glisse .5s calc(.3s + var(--i)*.1s) cubic-bezier(.3,1.4,.5,1) both}
@keyframes fr10Glisse{from{opacity:0;transform:translateX(18px)}}
.fr10-chip span{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.fr10-chip b{font:900 1.15rem/1 var(--display);color:var(--c)}
.fr10-chip small{font:700 .7rem/1.1 var(--display);color:#CFE0F5}
.fr10-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.fr10-cat{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"i b" "i s" "j j";align-items:center;gap:2px 10px;padding:10px 12px;border-radius:18px;
  background:radial-gradient(100% 70% at 0 0,rgba(255,255,255,.3),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--c) 80%,#fff),var(--c));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:fr10Pop .45s calc(var(--i)*.07s) cubic-bezier(.3,1.5,.5,1) both}
.fr10-cat:last-child:nth-child(odd){grid-column:1/-1}
@keyframes fr10Pop{from{opacity:0;transform:scale(.8)}}
.fr10-cat-i{grid-area:i;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.fr10-cat-i svg{width:34px;height:34px}
.fr10-cat b{grid-area:b;font:900 1.2rem/1 var(--display);color:#fff;text-shadow:0 2px 0 rgba(11,14,19,.45)}
.fr10-cat small{grid-area:s;font:800 .74rem/1.1 var(--display);color:rgba(255,255,255,.9)}
.fr10-cat-j{grid-area:j;display:block;height:8px;margin-top:6px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.2);overflow:hidden}
.fr10-cat-j u{display:block;height:100%;width:var(--fr10p);border-radius:999px;background:linear-gradient(90deg,#FFE45C,#FFCE00);animation:fr10Jauge 1s .3s ease-out both}
@keyframes fr10Jauge{from{width:0}}
@media (min-width:900px){
  .fr10-explo{padding:4px 22px 20px}
  .fr10-explo-h{gap:22px}
  .fr10-explo-chips{flex-direction:row}
  .fr10-chip{flex:1}
  .fr10-cats{grid-template-columns:repeat(5,1fr)}
  .fr10-cat:last-child:nth-child(odd){grid-column:auto}
}
/* les badges */
.fr10-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){ .fr10-badges{grid-template-columns:repeat(4,1fr)} }
.fr10-badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;border-radius:22px;text-align:center;
  background:radial-gradient(100% 60% at 50% 0,rgba(255,255,255,.22),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--c) 55%,#2A3442),color-mix(in srgb,var(--c) 35%,#151B24));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:fr10Pop .45s calc(var(--i)*.06s) cubic-bezier(.3,1.5,.5,1) both;overflow:hidden}
.fr10-badge:last-child:nth-child(odd){grid-column:1/-1}
.fr10-badge.on{background:radial-gradient(100% 60% at 50% 0,rgba(255,255,255,.35),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c))}
.fr10-badge.on::after{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;transform:rotate(20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:fr10Reflet 3.2s calc(var(--i)*.4s) ease-in-out infinite;pointer-events:none}
@keyframes fr10Reflet{0%,55%{left:-60%}85%,100%{left:130%}}
.fr10-badge-m{line-height:0;animation:fr10Balance 3.4s calc(var(--i)*.3s) ease-in-out infinite;transform-origin:50% 0}
.fr10-badge:not(.on) .fr10-badge-m{filter:saturate(.4);opacity:.85;animation:none}
@keyframes fr10Balance{50%{transform:rotate(4deg)}}
.fr10-badge-n{font:900 .92rem/1.12 var(--display);color:#fff;text-shadow:0 2px 0 rgba(11,14,19,.5);min-height:2.2em;display:flex;align-items:center}
.fr10-badge-ok{display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 6px;border-radius:999px;font:900 .74rem/1 var(--display);color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.fr10-badge-p{display:flex;align-items:center;gap:6px;width:100%}
.fr10-badge-p i{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:0 0 0 1.5px #0B0E13}
.fr10-badge-p u{display:block;height:100%;width:var(--fr10p);background:linear-gradient(90deg,#0055A4,#FFFFFF,#EF4135);animation:fr10Jauge 1s .3s ease-out both}
.fr10-badge-p small{font:800 .7rem/1 var(--display);color:#CFE0F5;white-space:nowrap}
.fr10-badge .fr10-info{position:absolute;left:8px;right:8px;bottom:8px;z-index:3}
/* le record d'une case de jeu : un trophée dessiné, plus d'emoji */
.fr10-rec-i{vertical-align:-3px;margin-right:4px}

/* — un badge gagné en partie — */
.fr10-badgepop{position:fixed;left:50%;top:44%;z-index:3000;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 26px 16px;border-radius:26px;
  transform:translate(-50%,-50%) scale(.4);opacity:0;color:#fff;cursor:pointer;
  background:radial-gradient(100% 60% at 50% 0,rgba(255,255,255,.25),transparent 62%),linear-gradient(170deg,#1D6FC6,#002654);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.fr10-badgepop.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.fr10-badgepop.part{transform:translate(-50%,-80%) scale(.8);opacity:0}
.fr10-badgepop b{font:900 1.2rem/1.1 var(--display);text-shadow:0 2px 0 #0B0E13}
.fr10-badgepop-m{line-height:0;animation:fr10Balance 1.6s ease-in-out infinite}

/* ==========================================================================
   LES JEUX
   ========================================================================== */
/* l'en-tête : bleu de France, étoiles d'or, drapeau au vent */
.ap--france.fr10 .ap-ban{position:relative;overflow:hidden;color:#fff!important;
  background:radial-gradient(90% 80% at 85% 20%,rgba(255,255,255,.18),transparent 60%),linear-gradient(150deg,#1D6FC6,#0055A4 45%,#00306E)!important}
.ap--france.fr10 .ap-ban::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(90deg,#0055A4 0 33.4%,#FFFFFF 33.4% 66.6%,#EF4135 66.6%);box-shadow:inset 0 3px 0 #0B0E13}
.ap--france.fr10 .ap-ban-art,.ap--france.fr10 .ap-ban-sur{display:none!important}
.ap--france.fr10 .ap-ban{height:auto!important;min-height:0!important;aspect-ratio:auto!important;padding-bottom:6px!important}
.ap--france.fr10 .ap-ban-txt{position:relative;z-index:2;padding-bottom:18px!important}
.ap--france.fr10 .ap-ban-t{color:#fff!important;text-shadow:0 3px 0 #0B0E13,2px 0 #0B0E13,-2px 0 #0B0E13,0 -2px #0B0E13,5px 5px 0 #EF4135!important}
.fr10-ban-drapeau{position:absolute;right:6px;top:-6px;width:96px;height:96px;z-index:1;transform:rotate(-6deg)}
.fr10-ban-drapeau svg{display:block;width:100%;height:100%}
@media (min-width:700px){ .fr10-ban-drapeau{width:150px;height:150px;right:40px;top:0} }
/* le choix du mode */
.fr10-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;padding:6px 2px}
.fr10-mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 14px 16px;border-radius:24px;cursor:pointer;color:#fff;text-align:center;outline:none;
  background:radial-gradient(110% 70% at 50% 0,rgba(255,255,255,.3),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000));
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13;transition:transform .15s;animation:fr10Pop .45s calc(var(--i)*.1s) cubic-bezier(.3,1.5,.5,1) both;overflow:hidden}
.fr10-mode:hover,.fr10-mode:focus-visible{transform:translateY(-3px) rotate(-.6deg)}
.fr10-mode:active{transform:translateY(3px)}
.fr10-mode-tri{position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(90deg,#0055A4 0 33.4%,#FFFFFF 33.4% 66.6%,#EF4135 66.6%);box-shadow:inset 0 -2.5px 0 #0B0E13}
.fr10-mode-vis{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;margin-top:4px;
  background:radial-gradient(circle,#0055A4 0 55%,#fff 55% 72%,#EF4135 72%);box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13;animation:fr10Respire 4s ease-in-out infinite}
.fr10-mode-vis svg{width:58px;height:58px}
.fr10-mode-n{font:900 1.35rem/1.05 var(--display);text-transform:uppercase;text-shadow:0 3px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13,0 -1.5px #0B0E13}
.fr10-mode-go{display:inline-flex;align-items:center;gap:8px;padding:6px 18px 6px 6px;border-radius:999px;font:900 1rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFE45C,#F5B400);box-shadow:inset 0 2px 0 rgba(255,255,255,.45),0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.fr10-mode .fr10-info{position:absolute;left:10px;right:10px;bottom:10px;z-index:3}
/* le bandeau des scores */
.fr10-bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 10px;padding:8px 8px 26px;border-radius:20px;
  background:linear-gradient(170deg,#1D6FC6,#0055A4 50%,#003F82);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.fr10-retour{flex:none;width:42px;height:42px;padding:0;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(180deg,#fff,#DCE6F3);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.fr10-retour:active{transform:translateY(3px)}
.fr10-stats{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.fr10-stats::-webkit-scrollbar{display:none}
.fr10-st{flex:1 0 auto;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.fr10-st-i svg{width:24px;height:24px}
.fr10-st-t{display:flex;flex-direction:column;line-height:1}
.fr10-st b{font:900 1.05rem/1 var(--display);color:var(--c);text-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap}
.fr10-st small{font:800 .58rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;color:#CFE0F5;white-space:nowrap}
.fr10-st.bump{animation:fr10Bump .45s cubic-bezier(.3,1.6,.5,1)}
.fr10-st.aie{animation:fr10Aie .45s}
@keyframes fr10Bump{40%{transform:scale(1.14)}}
@keyframes fr10Aie{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.fr10-piste{position:absolute;left:14px;right:20px;bottom:8px;height:8px;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:0 0 0 1.5px #0B0E13}
.fr10-piste > i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#0055A4,#FFFFFF 50%,#EF4135);transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.fr10-fanion{position:absolute;bottom:4px;left:0;width:16px;height:16px;transform:translateX(-2px);transition:left .5s cubic-bezier(.3,1.3,.5,1);line-height:0;pointer-events:none}
.fr10-fanion svg{width:16px;height:16px}
/* le tiroir des régions : deux rangées qui défilent en largeur */
.fr10-tiroir{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);gap:7px;overflow-x:auto;overscroll-behavior-x:contain;padding:4px 4px 10px;margin:0 -2px 6px;scrollbar-width:thin;
  justify-content:start;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.fr10-jeton{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 4px;border:0;border-radius:999px;cursor:grab;white-space:nowrap;
  font:900 .82rem/1 var(--display);color:#fff;touch-action:pan-x;user-select:none;-webkit-user-select:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c));text-shadow:0 1px 0 rgba(0,0,0,.4);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .14s,opacity .14s}
.fr10-jeton.entre{animation:fr10Pop .4s calc(var(--i)*.03s) cubic-bezier(.3,1.5,.5,1) both}
.fr10-jeton-i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.fr10-jeton-i svg{width:24px;height:24px}
.fr10-jeton.sel{transform:translateY(-3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 6px 0 5.5px #0B0E13}
.fr10-jeton.fr10-tire{opacity:.35;transform:scale(.92)}
.fr10-fantome{position:fixed!important;left:0;top:0;z-index:4000;pointer-events:none;margin:0!important;cursor:grabbing;transform-origin:50% 50%;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 0 0 2.5px #0B0E13,0 12px 18px rgba(0,0,0,.35)!important;animation:fr10Saisi .2s cubic-bezier(.3,1.6,.5,1)}
@keyframes fr10Saisi{from{scale:.8}}
.fr10-fantome.revient{transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .3s;opacity:.4}
.fr10-fantome.pose{transition:opacity .25s,scale .25s;opacity:0;scale:.4}
.fr10-viseur{position:fixed;left:0;top:0;z-index:3999;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;border-radius:50%;
  border:3px solid #0B0E13;background:radial-gradient(circle,#EF4135 0 4px,transparent 5px),rgba(255,255,255,.35);box-shadow:0 0 0 2px #fff;transition:background .12s,scale .12s}
.fr10-viseur.sur{background:radial-gradient(circle,#0055A4 0 5px,transparent 6px),rgba(255,206,0,.55);scale:1.2}
.fr10-viseur.souris{opacity:0}
.fr10-envol{position:fixed;z-index:4001;pointer-events:none;transform:translate(-50%,-50%);font:900 1.3rem/1 var(--display);color:var(--c);
  text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13,0 -1.5px #0B0E13;animation:fr10Envol 1.05s ease-out both;white-space:nowrap}
@keyframes fr10Envol{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-80%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
/* les étapes du défi : trois pastilles */
.fr10-etapes{display:flex;justify-content:center;gap:8px;margin:2px 0 8px}
.fr10-etapes i{width:34px;height:10px;border-radius:999px;background:rgba(255,255,255,.18);box-shadow:0 0 0 2px #0B0E13;transition:background .3s,width .3s}
.fr10-etapes i.on{width:54px;background:linear-gradient(90deg,#0055A4,#fff,#EF4135)}
.fr10-etapes i.fait{background:#FFCE00}
.fr10-qui{text-align:center;font:900 1.5rem/1.1 var(--display)!important;color:#fff!important;text-shadow:0 3px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13!important}

/* — la carte — */
.ap--france.fr10 .fr-zone{padding:6px!important;border-radius:26px!important;background:linear-gradient(170deg,#0B2D5E,#002654)!important;box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13!important}
.ap--france.fr10 .fr-zone--vise{box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFCE00,0 9px 0 6px #0B0E13!important}
.fr10-carte{border-radius:20px!important;background:#2F7FD0!important;box-shadow:inset 0 0 0 3px #0B0E13!important}
.fr10-carte .fr-svg .fr-reg{stroke:#002654;stroke-width:4;fill:rgba(255,255,255,0);transition:fill .22s,stroke-width .2s}
.fr10-carte .fr-svg .fr-reg:hover,.fr10-carte .fr-svg .fr-reg.survol{fill:rgba(255,206,0,.75);stroke-width:6}
.fr10-carte .fr-svg .fr-reg.on{fill:var(--c);stroke:#0B0E13;stroke-width:4}
.fr10-carte .fr-svg .fr-reg.faux{fill:#EF4135;stroke:#0B0E13}
.fr10-carte .fr-svg .fr10-pop{animation:fr10RegPop .6s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
@keyframes fr10RegPop{0%{filter:brightness(2)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
.fr10-carte .fr-svg .fr-dep{stroke:#002654}
.fr10-carte .fr-svg .fr-dep:hover,.fr10-carte .fr-svg .fr-dep.survol{fill:rgba(255,206,0,.7)}
.fr10-carte .fr-svg .fr-dep.on{fill:var(--c)}
.fr10-carte .fr-svg .fr-dep.faux{fill:#EF4135}
.fr10-carte .fr-svg .fr-m-vagues path{stroke:#BFE0FF;opacity:.45}
.fr10-carte .fr-svg .fr-m-nuages ellipse{fill:#FFFFFF;opacity:.35}
.fr10-reflets path{animation:fr10Reflets 4s var(--d) ease-in-out infinite}
@keyframes fr10Reflets{50%{opacity:.05;transform:translateX(6px)}}
.fr10-carte .fr-svg .fr-d-mont path:first-child{fill:#7A8A99}
.fr10-carte .fr-svg .fr-d-foret path:nth-child(1){fill:#2E7D4A}
.fr10-carte .fr-svg .fr-d-foret path:nth-child(2){fill:#3FA35E}
.fr10-carte .fr-svg .fr-d-mont,.fr10-carte .fr-svg .fr-d-foret{opacity:.8;pointer-events:none}
.fr10-carte .fr-svg .fr-v{pointer-events:none}
.fr10-carte .fr-svg .fr-v circle:first-child{fill:#002654}
.fr10-carte .fr-svg .fr-e-fond{stroke:#3C9BE8}
.fr10-carte .fr-svg .fr-echelle rect{fill:#002654}
.fr10-carte .fr-svg .fr-marque-nom{font-size:24px;fill:#002654;stroke:#fff;stroke-width:6px;animation:fr10NomCarte .5s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:center}
@keyframes fr10NomCarte{from{opacity:0;transform:scale(.4)}}
.fr10-carte .fr-om-cadre{fill:#0B3B7A;stroke:#0B0E13;stroke-width:3.4}
.fr10-carte .fr-om-forme{fill:#E7EEF8;stroke:#0B0E13}
.fr10-carte .fr-om:hover .fr-om-forme,.fr10-carte .fr-om.survol .fr-om-forme{fill:#FFCE00}
.fr10-carte .fr-om.on .fr-om-forme{fill:var(--c)}
.fr10-carte .fr-om.faux .fr-om-forme{fill:#EF4135}
.fr10-carte .fr-om-lab{fill:#fff;stroke:#002654;stroke-width:4px;paint-order:stroke}
.fr10-carte .fr-zoom-b{width:42px!important;height:42px!important;border-radius:50%!important;color:#0055A4!important;font-weight:900!important;
  background:linear-gradient(180deg,#fff,#DCE6F3)!important;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.fr10-fanion-carte .fr10-fc-in{animation:fr10Plante .55s cubic-bezier(.3,1.6,.5,1) both;transform-box:fill-box;transform-origin:50% 100%}
@keyframes fr10Plante{from{transform:translateY(-40px) scale(.4);opacity:0}}
/* le ruban d'une réussite */
.fr10-ruban{position:absolute;left:50%;top:14px;z-index:20;display:flex;align-items:center;gap:10px;max-width:92%;padding:8px 18px 8px 8px;border-radius:14px;
  transform:translate(-50%,-30px) scale(.8);opacity:0;color:#fff;pointer-events:none;
  background:linear-gradient(170deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  animation:fr10Ruban .45s cubic-bezier(.3,1.6,.5,1) forwards}
.fr10-ruban.part{animation:fr10RubanPart .4s forwards}
@keyframes fr10Ruban{to{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes fr10RubanPart{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-24px);opacity:0}}
.fr10-ruban-tri{flex:none;width:30px;height:22px;border-radius:4px;background:linear-gradient(90deg,#0055A4 0 33.4%,#fff 33.4% 66.6%,#EF4135 66.6%);box-shadow:0 0 0 2px #0B0E13}
.fr10-ruban b{font:900 1.1rem/1.1 var(--display);text-transform:uppercase;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* les confettis */
.fr10-conf{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none;z-index:30}
.fr10-conf i{position:absolute;left:0;top:0;border-radius:2px;box-shadow:0 0 0 1px rgba(11,14,19,.5);animation:fr10Conf 1.6s var(--d) cubic-bezier(.2,.7,.3,1) both}
.fr10-conf i.etoile{border-radius:0;box-shadow:none;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
@keyframes fr10Conf{0%{transform:translate(0,0) rotate(0);opacity:1}60%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r));opacity:0}}
/* le feu d'artifice */
.fr10-ciel{position:absolute;inset:0;z-index:40;pointer-events:none;overflow:hidden;border-radius:inherit}
.fr10-gerbe{position:absolute;width:0;height:0}
.fr10-gerbe i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;opacity:0;animation:fr10Eclat 1.2s .45s cubic-bezier(.15,.75,.3,1) forwards}
.fr10-fusee{position:absolute;left:-2px;top:0;width:4px;height:18px;border-radius:2px;opacity:0;animation:fr10Fusee .45s ease-out forwards}
@keyframes fr10Fusee{0%{opacity:1;transform:translateY(var(--h))}90%{opacity:1}100%{opacity:0;transform:translateY(0)}}
@keyframes fr10Eclat{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 24px)) scale(.4)}}
/* l'écran de fin */
.fr10-fin{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 14px 18px;border-radius:28px;color:#fff;text-align:center;
  background:radial-gradient(100% 50% at 50% 0,rgba(255,255,255,.2),transparent 62%),linear-gradient(170deg,#1D6FC6,#0055A4 40%,#002654);
  box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #fff,0 0 0 9.5px #0B0E13,0 12px 0 9.5px #0B0E13;margin:10px 6px 18px}
.fr10-fin-bande{position:absolute;left:0;right:0;top:0;height:12px;background:linear-gradient(90deg,#0055A4 0 33.4%,#FFFFFF 33.4% 66.6%,#EF4135 66.6%);box-shadow:inset 0 -3px 0 #0B0E13}
.fr10-fin .fr10-plaque{margin:8px auto 0}
.fr10-fin-med{position:relative;width:150px;height:150px;animation:fr10Tourne .8s cubic-bezier(.3,1.4,.5,1) both}
.fr10-fin-med svg{display:block}
.fr10-fin-sujet{position:absolute;inset:0;display:grid;place-items:center;font:900 1.35rem/1 var(--display);color:#fff;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13,0 -1.5px #0B0E13;padding:0 30px}
.fr10-fin-et{display:flex;gap:6px;align-items:flex-end}
.fr10-et{line-height:0;opacity:.9}
.fr10-et:nth-child(2){transform:translateY(-10px)}
.fr10-et.on{animation:fr10Etoile .6s calc(.5s + var(--i)*.22s) cubic-bezier(.3,1.7,.5,1) both}
.fr10-et.on svg{filter:drop-shadow(0 0 10px rgba(255,206,0,.7))}
@keyframes fr10Etoile{from{transform:scale(0) rotate(-180deg)}}
.fr10-et:nth-child(2).on{animation-name:fr10Etoile2}
@keyframes fr10Etoile2{from{transform:translateY(-10px) scale(0) rotate(-180deg)}to{transform:translateY(-10px)}}
.fr10-fin-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%;max-width:440px}
.fr10-fin-c{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 8px;border-radius:16px;
  background:radial-gradient(100% 70% at 50% 0,rgba(255,255,255,.3),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c));
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:fr10Pop .45s calc(.4s + var(--i)*.08s) cubic-bezier(.3,1.5,.5,1) both}
.fr10-fin-c b{font:900 1.45rem/1 var(--display);color:#fff;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13}
.fr10-fin-c small{font:800 .72rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.92)}
.fr10-fin-c:nth-child(4n+4) b,.fr10-fin-c:nth-child(4n+4) small{color:#0B0E13;text-shadow:none}
.fr10-fin-explo{display:flex;align-items:center;gap:10px;width:100%;max-width:440px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.fr10-fin-explo-j{flex:1;height:10px;border-radius:999px;background:rgba(255,255,255,.15);box-shadow:0 0 0 1.5px #0B0E13;overflow:hidden}
.fr10-fin-explo-j u{display:block;height:100%;background:linear-gradient(90deg,#0055A4,#fff,#EF4135);animation:fr10Jauge 1s .6s ease-out both}
.fr10-fin-explo b{font:900 1rem/1 var(--display)}
.fr10-fin-a{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.fr10-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px 0 14px;border:0;border-radius:18px;cursor:pointer;font:900 1.08rem/1 var(--display);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:transform .14s}
.fr10-b:active{transform:translateY(4px)}
.fr10-b--or{color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400)}
.fr10-b--bleu{color:#fff;background:linear-gradient(180deg,#FF6A5C,#C8102E);text-shadow:0 1px 0 rgba(0,0,0,.35);padding:0 22px}
/* les scènes : questions, silhouettes, fiches, tableaux */
.ap--france.fr10 .fr-scene .fr-lab{display:block;width:max-content;max-width:100%;margin:0 auto 6px!important;padding:5px 14px!important;border-radius:999px!important;
  font:900 .9rem/1.1 var(--display)!important;letter-spacing:0!important;text-transform:none!important;color:#fff!important;
  background:linear-gradient(180deg,#2A7BD0,#0055A4)!important;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important}
.ap--france.fr10 .fr-aide{width:max-content;max-width:100%;margin:6px auto!important;padding:5px 14px!important;border-radius:999px!important;
  font:800 .82rem/1.2 var(--display)!important;color:#0B0E13!important;background:linear-gradient(180deg,#FFE45C,#F5B400)!important;box-shadow:0 0 0 2px #0B0E13!important;border:0!important}
.fr10-carte .fr-svg .fr-e-fond{stroke-dasharray:none!important;stroke:#8CC4F2}
.fr10-carte .fr-svg .fr-e-riv.on .fr-e-fond{stroke-dasharray:var(--len,none)!important}
.ap--france.fr10 .fr-scene{border-radius:22px!important}
.ap--france.fr10 .fr-q-t{color:#fff;font-family:var(--display);font-weight:900;text-align:center}
.ap--france.fr10 .fr-choix-b{border:0!important;color:#fff!important;font:800 .95rem/1.15 var(--display)!important;text-shadow:0 1px 0 rgba(0,0,0,.35);
  background:linear-gradient(180deg,#2A7BD0,#0055A4)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;
  animation:fr10Pop .35s calc(var(--i)*.06s) cubic-bezier(.3,1.5,.5,1) both}
.ap--france.fr10 .fr-choix-b:nth-child(2){background:linear-gradient(180deg,#FF6A5C,#C8102E)!important}
.ap--france.fr10 .fr-choix-b:nth-child(3){background:linear-gradient(180deg,#24B8A2,#00816E)!important}
.ap--france.fr10 .fr-choix-b:nth-child(4){background:linear-gradient(180deg,#9A6BE0,#5B2DA0)!important}
.ap--france.fr10 .fr-choix-b:hover{transform:translateY(-2px)}
.ap--france.fr10 .fr-choix-b.juste{background:linear-gradient(180deg,#62DE98,#0B7A45)!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 6px 0 5.5px #0B0E13!important;animation:fr10Bump .45s cubic-bezier(.3,1.6,.5,1)}
.ap--france.fr10 .fr-choix-b.faux{background:linear-gradient(180deg,#5A6678,#3A4452)!important;opacity:.85;animation:fr10Aie .45s}
.ap--france.fr10 .fr-pourquoi{margin:8px 0 0;padding:8px 12px;border-radius:14px;font:700 .82rem/1.35 var(--display);color:#fff;background:rgba(0,38,84,.75);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.ap--france.fr10 .fr-silhouette{background:radial-gradient(circle at 50% 40%,#2F7FD0,#002654)!important;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #fff,0 0 0 8.5px #0B0E13,0 9px 0 8.5px #0B0E13!important}
.ap--france.fr10 .fr-sil-p{fill:#FFFFFF;stroke:#0B0E13}
.ap--france.fr10 .fr-fiche{background:radial-gradient(100% 60% at 50% 0,rgba(255,255,255,.25),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--c,#0055A4) 70%,#fff),var(--c,#0055A4))!important;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13!important;color:#fff}
.ap--france.fr10 .fr-fiche b{color:#fff!important;text-shadow:0 2px 0 #0B0E13}
.ap--france.fr10 .fr-fiche span,.ap--france.fr10 .fr-fiche p,.ap--france.fr10 .fr-fiche li{color:#fff!important}
.ap--france.fr10 .fr-syms i{background:rgba(0,0,0,.22)!important;color:#fff!important;box-shadow:0 0 0 2px #0B0E13!important}
.ap--france.fr10 .fr-tableau{box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00,0 0 0 9.5px #0B0E13,0 10px 0 9.5px #0B0E13!important}
.ap--france.fr10 .fr-indice-b{display:inline-flex!important;align-items:center;gap:6px;padding:4px 14px 4px 6px!important;border:0!important;border-radius:999px!important;
  font:900 .9rem/1 var(--display)!important;color:#0B0E13!important;background:linear-gradient(180deg,#FFE45C,#F5B400)!important;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.ap--france.fr10 .fr-indice-b em{font-style:normal;padding:2px 7px;border-radius:999px;font-size:.75rem;color:#fff;background:#C8102E}
.ap--france.fr10 .fr-indice{border-radius:14px;color:#fff;background:rgba(0,38,84,.75)}
@media (max-width:480px){
  .fr10-st small{display:none}
  .fr10-st{gap:4px;padding:3px 8px 3px 3px}
  .fr10-st-i svg{width:22px;height:22px}
  .fr10-jeton{height:34px;font-size:.78rem}
  .fr10-jeton-i{width:26px;height:26px}
  .fr10-jeton-i svg{width:20px;height:20px}
  .fr10-hero{padding:18px 14px 30px}
  .fr10-explo-coc{width:112px;height:112px}
  .fr10-explo-coc svg{width:112px;height:112px}
  .fr10-st b{font-size:.95rem}
  .fr10-mode-n{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .fr10 *,.fr10-badgepop,.fr10-fantome,.fr10-envol{animation:none!important;transition:none!important}
}
/* @@ fin france_tricolore.css @@ */
/* @@ debut retouches_lot11.css @@ */
/* ==========================================================================
   LOT 11 — HALL DES TROPHÉES EN COULEURS ; METRO CITY : LE PLAN GARDE LES GESTES
   ========================================================================== */
/* le bandeau : une remise des prix, rayons d'or sur fond rubis et violet */
.view.lbx11 .lbx-hero{background:repeating-conic-gradient(from 0deg at 50% 64%,rgba(255,255,255,.14) 0 9deg,transparent 9deg 18deg),
  radial-gradient(circle at 50% 64%,#FFE45C 0,#F5A800 20%,#E0531F 42%,#C8102E 64%,#5B1F8A 100%)!important}
.view.lbx11 .lbx-titre{color:#fff!important;text-shadow:0 4px 0 #0B0E13,3px 0 #0B0E13,-3px 0 #0B0E13,0 -3px #0B0E13!important}
/* les jeux : chacun dans sa couleur */
.view.lbx11 .lbx-jeu{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.45);
  background:radial-gradient(100% 70% at 50% 0,rgba(255,255,255,.3),transparent 62%),linear-gradient(170deg,color-mix(in srgb,var(--c) 75%,#fff),var(--c))!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.view.lbx11 .lbx-jeu.lbx11-clair{color:#0B0E13!important;text-shadow:none}
.view.lbx11 .lbx-jeu .lbx-jeu-ico{background:#fff;border-radius:12px;box-shadow:0 0 0 2px #0B0E13}
.view.lbx11 .lbx-jeu.on{transform:translateY(-4px);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5.5px #FFCE00,0 7px 0 5.5px #0B0E13!important}
/* les périodes : un ruban bleu-violet, la période choisie en or */
.view.lbx11 .lbx-periodes{background:linear-gradient(90deg,#1E66C9,#6B3FA0)!important;box-shadow:0 0 0 2.5px #0B0E13!important}
.view.lbx11 .lbx-periodes button:not(.on){color:#fff!important}
/* le podium : une scène violette sous un projecteur, des marches de couleur */
.view.lbx11 .lbx-podium{padding:18px 10px 0;border-radius:26px;overflow:hidden;
  background:radial-gradient(55% 60% at 50% 22%,rgba(255,236,150,.4),transparent 70%),linear-gradient(180deg,#7A3CC4,#2A0F55)!important;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13}
.view.lbx11 .lbx-marche.libre .lbx-marche-coupe{opacity:.95!important;filter:drop-shadow(0 6px 0 rgba(0,0,0,.25))!important}
.view.lbx11 .lbx-marche.r1 .lbx-socle{background:linear-gradient(180deg,#FFE45C,#F5A800)!important}
.view.lbx11 .lbx-marche.r2 .lbx-socle{background:linear-gradient(180deg,#9FD4FF,#1E66C9)!important;color:#fff!important}
.view.lbx11 .lbx-marche.r3 .lbx-socle{background:linear-gradient(180deg,#FFA463,#E0531F)!important;color:#fff!important}
.view.lbx11 .lbx-marche:is(.r2,.r3) .lbx-socle{text-shadow:0 2px 0 #0B0E13}
.view.lbx11 .lbx-marche .lbx-nom,.view.lbx11 .lbx-marche .lbx-pts{color:#fff!important;text-shadow:0 2px 0 #0B0E13}
/* la liste : une couleur par rang, la vôtre en or */
.view.lbx11 .lbx-ligne{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.4);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;
  background:linear-gradient(170deg,#3C8BE0,#1E5FB0)!important}
.view.lbx11 .lbx-ligne:nth-child(4n+2){background:linear-gradient(170deg,#3FC07F,#0B7A45)!important}
.view.lbx11 .lbx-ligne:nth-child(4n+3){background:linear-gradient(170deg,#FF9A4E,#D9531A)!important}
.view.lbx11 .lbx-ligne:nth-child(4n+4){background:linear-gradient(170deg,#9A6BE0,#5B2DA0)!important}
.view.lbx11 .lbx-ligne.moi{background:linear-gradient(170deg,#FFE45C,#F5A800)!important;color:#0B0E13!important;text-shadow:none}
.view.lbx11 .lbx-ligne :is(small,.lbx-pts){color:inherit!important;opacity:.9}
.view.lbx11 .lbx-rang{background:#fff!important;color:#0B0E13!important;box-shadow:0 0 0 2px #0B0E13!important}
.view.lbx11 .lbx-invite{background:radial-gradient(90% 70% at 15% 0,rgba(255,255,255,.22),transparent 60%),linear-gradient(170deg,#3FC07F,#0B7A45)!important}

/* — METRO CITY : sur téléphone, le plan prend les gestes : un doigt le
     déplace, deux doigts le zooment (le navigateur zoomait la page à sa place) — */
.mc-mapwrap,.mc-mapwrap svg{touch-action:none!important}
/* @@ fin retouches_lot11.css @@ */
/* @@ debut recompense_lot12.css @@ */
/* ——— 2. Le métro-cadeau ——————————————————————————————————————————————— */
.mcq12{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.mcq12-tete{display:flex;align-items:center;justify-content:center;gap:2px;max-width:100%}
.mcq12-jeu{display:inline-flex;align-items:center;gap:8px;min-width:0;padding:4px 10px 4px 4px;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:.95rem;line-height:1.1;color:#fff;text-shadow:0 1.5px 0 rgba(11,14,19,.55);
  background:linear-gradient(180deg,color-mix(in srgb,var(--g) 62%,#fff),var(--g));box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mcq12-jeu.clair{color:#0B0E13;text-shadow:none}
.mcq12-jeu b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcq12-emb{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#fff,color-mix(in srgb,var(--g) 30%,#fff));box-shadow:0 0 0 2px #0B0E13}
.mcq12-emb svg{display:block;width:32px;height:32px}
.mcq12-coche{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#3ED07A;box-shadow:0 0 0 2px #0B0E13}
.mcq12-coche svg{display:block;width:14px;height:14px}

.mcq12-scene{--t:#B9C2CC;position:relative;width:min(360px,100%);aspect-ratio:10/8.4;border-radius:22px;overflow:hidden;isolation:isolate;
  background-color:var(--t);
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.66),rgba(255,255,255,0) 44%),
    radial-gradient(120% 100% at 50% 42%,rgba(11,14,19,0) 46%,rgba(11,14,19,.55));
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;transition:background-color .45s ease}
.mcq12-scene.choc{animation:mcq12Choc .3s ease-out}
@keyframes mcq12Choc{25%{translate:-3px 1px}50%{translate:3px -1px}75%{translate:-1px 0}}

.mcq12-rayons{position:absolute;left:50%;top:50%;width:175%;aspect-ratio:1;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.32) 0 9deg,rgba(255,255,255,0) 9deg 22.5deg);
  -webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 18%,transparent 62%);
  transform:translate(-50%,-50%);animation:mcq12Tourne 24s linear infinite}
@keyframes mcq12Tourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mcq12-scene.boost .mcq12-rayons{animation:mcq12Tourne 24s linear infinite,mcq12Pulse .75s ease-out}
@keyframes mcq12Pulse{from{scale:1.3}}

.mcq12-etoiles i{position:absolute;z-index:0;width:var(--s);height:var(--s);translate:-50% -50%;
  animation:mcq12Scint 2.2s ease-in-out infinite;animation-delay:calc(-1*var(--d))}
.mcq12-etoiles svg{display:block;width:100%;height:100%}
@keyframes mcq12Scint{0%,100%{scale:.45;opacity:.35;rotate:0deg}50%{scale:1;opacity:1;rotate:45deg}}

.mcq12-rail{position:absolute;left:-2%;right:-2%;bottom:calc(20.5% - 14px);height:14px;z-index:0;pointer-events:none;
  background:linear-gradient(#0B0E13,#0B0E13) 0 0/100% 2.5px no-repeat,linear-gradient(#9AA6B4,#9AA6B4) 0 2.5px/100% 3.5px no-repeat,
    linear-gradient(#0B0E13,#0B0E13) 0 6px/100% 2px no-repeat,repeating-linear-gradient(90deg,#5A4632 0 12px,transparent 12px 26px) 0 8px/100% 6px no-repeat}

.mcq12-rame{position:absolute;left:50%;bottom:11%;width:76%;translate:-50% 0;padding:0;border:0;background:none;cursor:pointer;z-index:2;
  transform-origin:50% 100%;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mcq12-rame:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:16px}
.mcq12-rame .mc-mtr-svg{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(11,14,19,.28))}
.mcq12-rame:not([disabled]) .mc-mtr-svg{animation:mcq12Respire 2.4s ease-in-out infinite}
@keyframes mcq12Respire{50%{transform:translateY(-5px)}}
.mcq12-rame:not([disabled]):active{scale:.96}
.mcq12-rame.tape{animation:mcq12Tape .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes mcq12Tape{30%{scale:1.08 .88}60%{scale:.96 1.06}}
.mcq12-rame.monte{animation:mcq12Saut .62s cubic-bezier(.3,1.5,.5,1)}
@keyframes mcq12Saut{25%{scale:1.1 .86;translate:-50% 0}55%{scale:.94 1.1;translate:-50% -14%}}
.mcq12-scene.charge .mcq12-rame{animation:mcq12Charge .65s linear forwards}
@keyframes mcq12Charge{
  0%{rotate:0deg;scale:1;filter:brightness(1)}
  15%{rotate:-2deg}30%{rotate:2.5deg}45%{rotate:-3deg}60%{rotate:3.5deg}75%{rotate:-4deg}90%{rotate:4deg}
  100%{rotate:0deg;scale:1.08;filter:brightness(1.35)}}
.mcq12-rail{transition:opacity .35s}
.mcq12-scene.eclate .mcq12-rail{opacity:0}
.mcq12-scene.eclate .mcq12-rame{animation:mcq12Part .45s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes mcq12Part{to{scale:1.5;translate:-50% -10%;opacity:0}}
.mcq12-scene.eclate .mc-mtr-noeud{animation:mcq12Noeud .5s ease-in forwards}
@keyframes mcq12Noeud{to{transform:translateY(-120px) rotate(-30deg) scale(1.3);opacity:0}}

.mcq12-rang{position:absolute;left:50%;top:12px;translate:-50% 0;z-index:3;padding:.32em 1.1em;border-radius:12px;white-space:nowrap;
  font-family:var(--display);font-weight:900;font-size:1.05rem;letter-spacing:.02em;color:#fff;text-shadow:0 2px 0 rgba(11,14,19,.5);
  background:linear-gradient(180deg,color-mix(in srgb,var(--t) 62%,#fff),var(--t));box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcq12-rang.clair{color:#0B0E13;text-shadow:none}
.mcq12-rang.tourne{animation:mcq12Bascule .4s ease-in-out}
@keyframes mcq12Bascule{45%{transform:perspective(300px) rotateX(90deg)}55%{transform:perspective(300px) rotateX(-90deg)}}

.mcq12-main{position:absolute;right:13%;bottom:8%;width:40px;z-index:4;pointer-events:none;transform-origin:40% 10%;
  animation:mcq12Tap 1.3s ease-in-out infinite}
.mcq12-main svg{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 0 rgba(11,14,19,.35))}
.mcq12-main::before{content:"";position:absolute;left:50%;top:0;width:24px;height:24px;margin:-14px 0 0 -14px;border-radius:50%;
  border:3px solid #fff;opacity:0;animation:mcq12TapOnde 1.3s ease-out infinite}
.mcq12-main.parti{opacity:0;transition:opacity .25s}
@keyframes mcq12Tap{0%,100%{transform:translate(0,0) rotate(-14deg)}40%{transform:translate(-6px,-10px) rotate(-20deg)}
  55%{transform:translate(-4px,-3px) rotate(-15deg) scale(.92)}}
@keyframes mcq12TapOnde{0%,50%{opacity:0;scale:.4}60%{opacity:1}100%{opacity:0;scale:1.7}}

.mcq12-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 52%,#fff,rgba(255,255,255,.65) 38%,rgba(255,255,255,0) 72%)}
.mcq12-flash.on{animation:mcq12Flash .5s ease-out}
.mcq12-flash.fort{animation:mcq12Flash .9s ease-out}
@keyframes mcq12Flash{from{opacity:.95}to{opacity:0}}
.mcq12-onde{position:absolute;left:50%;top:54%;width:120px;aspect-ratio:1;border-radius:50%;translate:-50% -50%;z-index:3;pointer-events:none;
  border:5px solid var(--o,rgba(255,255,255,.7));animation:mcq12Onde .65s ease-out forwards}
@keyframes mcq12Onde{from{scale:.3;opacity:1}to{scale:2.6;opacity:0}}
.mcq12-eclat{position:absolute;left:50%;top:52%;width:20px;height:20px;margin:-10px 0 0 -10px;z-index:4;pointer-events:none;
  animation:mcq12Eclat .85s cubic-bezier(.2,.8,.3,1) forwards}
.mcq12-eclat svg{display:block;width:100%;height:100%}
@keyframes mcq12Eclat{from{transform:rotate(var(--a)) translateY(0) scale(.3);opacity:1}
  to{transform:rotate(var(--a)) translateY(calc(-1*var(--r))) scale(1.1) rotate(90deg);opacity:0}}

/* le lot */
.mcq12-gain{position:absolute;left:10px;right:10px;top:54px;bottom:12px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.mcq12-lots{display:flex;align-items:center;justify-content:center;gap:6px}
.mcq12-lot{display:block;animation:mcq12Lot .55s cubic-bezier(.3,1.5,.5,1) backwards}
.mcq12-lot svg{display:block;width:100%;height:auto;overflow:visible}
.mcq12-lot--tk{width:104px;filter:drop-shadow(0 5px 0 rgba(11,14,19,.35))}
.mcq12-lot--bo{width:66px;rotate:7deg;animation-delay:.2s}
.mcq12-et{font-family:var(--display);font-weight:900;font-size:1.7rem;line-height:1;color:#fff;animation:mcq12Lot .4s ease-out .1s backwards;
  text-shadow:2px 0 #0B0E13,-2px 0 #0B0E13,0 2px #0B0E13,0 -2px #0B0E13,0 4px 0 #0B0E13}
@keyframes mcq12Lot{from{opacity:0;transform:translateY(34px) scale(.4) rotate(-18deg)}}
.mcq12-somme{font-family:var(--display);font-weight:900;font-size:2.5rem;line-height:1;color:#FFCE00;letter-spacing:.01em;
  text-shadow:2.5px 0 #0B0E13,-2.5px 0 #0B0E13,0 2.5px #0B0E13,0 -2.5px #0B0E13,1.8px 1.8px #0B0E13,-1.8px -1.8px #0B0E13,1.8px -1.8px #0B0E13,-1.8px 1.8px #0B0E13,0 5px 0 #0B0E13;
  animation:mcq12Lot .5s cubic-bezier(.3,1.5,.5,1) .08s backwards}
.mcq12-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.mcq12-chip{padding:4px 11px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:.78rem;color:#fff;
  background:rgba(11,14,19,.8);box-shadow:0 0 0 2px #0B0E13;animation:mcq12Lot .45s ease-out .3s backwards}
.mcq12-chip--bo{background:#153E8C;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px #0B0E13}

/* le billet poinçonné */
.mcq12-billet{position:relative;display:flex;align-items:stretch;height:44px;border-radius:9px;overflow:hidden;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcq12-souche{display:grid;place-items:center;width:44px;background:#153E8C;border-right:2.5px solid #0B0E13}
.mcq12-souche svg{display:block;width:24px;height:24px}
.mcq12-souche svg *{stroke:#fff}
.mcq12-trous{display:flex;align-items:center;gap:12px;padding:0 16px}
.mcq12-trous i{position:relative;width:18px;height:18px;border-radius:50%;background:rgba(11,14,19,.08);box-shadow:inset 0 0 0 2px rgba(11,14,19,.3)}
.mcq12-trous i.on{background:#2A2216;box-shadow:inset 0 3px 0 rgba(0,0,0,.55),0 0 0 2px #0B0E13;animation:mcq12Poincon .35s cubic-bezier(.3,1.6,.5,1)}
.mcq12-trous i.on::after{content:"";position:absolute;inset:0;border-radius:50%;background:#FFE88A;box-shadow:0 0 0 2px #0B0E13;
  animation:mcq12Rond .6s ease-in forwards}
@keyframes mcq12Poincon{from{scale:1.7}}
@keyframes mcq12Rond{to{transform:translate(9px,40px) rotate(160deg);opacity:0}}
.mcq12-billet.fini{animation:mcq12Billet .6s ease-out}
@keyframes mcq12Billet{40%{scale:1.06;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 22px 4px rgba(255,206,0,.8)}}

.mcq12-pied{display:flex;justify-content:center;min-height:50px}
.mcq12-bt{animation:mcq12Lot .45s cubic-bezier(.3,1.5,.5,1) backwards}
.mcq12-bt svg{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  .mcq12-rayons,.mcq12-etoiles i,.mcq12-rame .mc-mtr-svg,.mcq12-main,.mcq12-main::before,.mcq12-lot,.mcq12-somme,.mcq12-chip,.mcq12-et,.mcq12-bt,
  .mcq12-scene.charge .mcq12-rame,.mcq12-trous i.on,.mcq12-billet.fini{animation:none!important}
  .mcq12-scene.eclate .mcq12-rame,.mcq12-scene.eclate .mc-mtr-noeud{animation:none!important;opacity:0}
  .mcq12-trous i.on::after{display:none}
}

/* ——— 3. Monuments : « Vos stations » en cartes illustrées ————————————————— */
.mcx[data-tab="monuments"] .mc-tile.mcs12{--rc:#A9BDD1;padding:0 0 14px;gap:8px;border-radius:18px;overflow:hidden;isolation:isolate;color:#0B0E13;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 40%,#fff),var(--rc));
  box-shadow:inset 0 0 0 5px var(--rc),inset 0 0 0 7px #0B0E13,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  transition:transform .2s var(--ease-back,ease),box-shadow .2s}
.mcx[data-tab="monuments"] .mc-tile.mcs12.r1{--rc:#4FA3F0}
.mcx[data-tab="monuments"] .mc-tile.mcs12.r2{--rc:#C98BEE}
.mcx[data-tab="monuments"] .mc-tile.mcs12.r3{--rc:#FFD23E}
.mcx[data-tab="monuments"] .mc-tile.mcs12:hover{transform:translateY(-3px);
  box-shadow:inset 0 0 0 5px var(--rc),inset 0 0 0 7px #0B0E13,0 0 0 2.5px #0B0E13,0 8px 0 2.5px #0B0E13}
.mcx[data-tab="monuments"] .mc-tile.mcs12::before,.mcx[data-tab="monuments"] .mc-tile.mcs12::after{content:none}
.mcs12-haut{position:relative;display:block;align-self:stretch;margin:7px 7px 0;aspect-ratio:200/118;overflow:hidden;
  border-radius:11px 11px 0 0;background:#DDE6EE;border-bottom:2.5px solid #0B0E13}
.mcs12-img{position:absolute;inset:0}
.mcs12-img svg{display:block;width:100%;height:100%}
.mcs12-rar{position:absolute;left:6px;top:6px;z-index:2;padding:2px 8px;border-radius:7px;font-family:var(--display);font-weight:900;font-size:.7rem;
  color:#0B0E13;background:var(--rc);box-shadow:0 0 0 2px #0B0E13}
.mcs12 .mcs12-haut .mcf-st-l{position:absolute;right:6px;top:6px;z-index:2;max-width:64%;flex-wrap:wrap;justify-content:flex-end;gap:3px}
.mcs12 .mcs12-haut .mcf-st-l .pxj-rond{box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.mcs12-reflet{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 45%,transparent 60%);background-size:250% 100%;
  animation:mcs12Reflet 3.6s ease-in-out infinite}
@keyframes mcs12Reflet{from{background-position:120% 0}to{background-position:-120% 0}}
.mcs12-plaque{position:relative;z-index:2;display:grid;place-items:center;align-self:stretch;margin:-24px 18px 0;min-height:42px;padding:6px 12px;
  border-radius:9px;background:#153E8C;color:#fff;text-align:center;
  box-shadow:inset 0 0 0 3px #153E8C,inset 0 0 0 5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.mcs12-plaque b{font-family:var(--display);font-weight:800;font-size:.92rem;line-height:1.1;letter-spacing:.02em;overflow-wrap:anywhere}
.mcs12-plaque.long b{font-size:.82rem}.mcs12-plaque.tres-long b{font-size:.72rem}
.mcs12 .mcs12-socle{align-self:stretch;margin:0 14px;min-height:52px;padding:6px 8px 4px;border-radius:12px;gap:6px;
  background:rgba(11,14,19,.16);box-shadow:inset 0 3px 0 rgba(11,14,19,.14)}
.mcs12 .mcs12-socle>span{display:block;filter:drop-shadow(0 3px 0 rgba(11,14,19,.25))}
.mcs12 .mcf-st-libre{position:relative;width:34px;height:34px;align-self:center;border-radius:10px;border:2px solid rgba(11,14,19,.45);
  background:rgba(255,255,255,.35)}
.mcs12 .mcf-st-libre::before,.mcs12 .mcf-st-libre::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:3px;margin:-1.5px 0 0 -7px;
  border-radius:2px;background:rgba(11,14,19,.5)}
.mcs12 .mcf-st-libre::after{rotate:90deg}
.mcs12 .mcf-st-chiffres{flex-wrap:wrap;gap:4px;padding:0 8px}
.mcs12-ch{display:inline-flex;align-items:center;gap:3px;padding:2px 7px 2px 2px;border-radius:999px;font-size:.74rem;white-space:nowrap;color:#fff;
  background:rgba(11,14,19,.82);box-shadow:0 0 0 2px #0B0E13}
.mcs12-pi{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#FFCE00;box-shadow:0 0 0 1.5px #0B0E13}
.mcs12-pi svg{display:block;width:13px;height:13px}
.mcs12 .mcf-st-up{margin-top:2px}
@media (prefers-reduced-motion:reduce){ .mcs12-reflet{animation:none} }

/* ——— 4. Villes : le plan des emplacements se zoome ——————————————————————— */
.vl-carte.vl12 .vl-carte-svg{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.vl-carte.vl12.zoome .vl-carte-svg{touch-action:none;cursor:grab}
.vl-carte.vl12.zoome .vl-carte-svg:active{cursor:grabbing}
.vl12-zoom{position:absolute;right:10px;top:10px;z-index:3;display:flex;flex-direction:column;gap:8px}
.vl12-zb{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  transition:transform .15s,box-shadow .15s,opacity .2s;-webkit-tap-highlight-color:transparent}
.vl12-zb svg{display:block;width:22px;height:22px}
.vl12-zb:hover:not(:disabled){transform:translateY(-1px)}
.vl12-zb:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 0 0 2.5px #0B0E13}
.vl12-zb:disabled{opacity:.45;cursor:default}
/* @@ fin recompense_lot12.css @@ */
/* @@ debut retouches_lot13.css @@ */
/* ——— 1. Villes : la fenêtre de fondation ——————————————————————————————— */
.vl13-boite .mc-head{align-items:center;gap:12px}
.vl13-rer{width:46px;height:46px;margin-right:4px}
.vl13-fonder{display:flex;flex-direction:column;gap:14px}
.vl13-apercu{position:relative;border-radius:18px;box-shadow:0 0 0 3px #0B0E13,0 5px 0 3px #0B0E13}
.vl13-apercu svg{display:block;width:100%;height:auto}
.vl13-forme{position:absolute;left:10px;bottom:10px;padding:4px 12px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.82rem;
  color:#fff;text-shadow:0 1.5px 0 rgba(11,14,19,.5);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.vl13-tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.vl13-t{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 9px;border-radius:16px;color:#fff;text-align:center;
  background:linear-gradient(170deg,var(--a),var(--b));box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;
  animation:vl13Entre .4s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*70ms)}
.vl13-t-i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 0 0 2px #0B0E13}
.vl13-t-i svg{display:block;width:24px;height:24px}
.vl13-t b{font-family:var(--display);font-weight:900;font-size:1.15rem;line-height:1.1;text-shadow:0 2px 0 rgba(11,14,19,.45)}
.vl13-t small{font-weight:800;font-size:.7rem;line-height:1.15;opacity:.92}
@keyframes vl13Entre{from{opacity:0;transform:translateY(12px) scale(.9)}}
.vl13-prix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vl13-p{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 8px;border-radius:16px;text-align:center;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.vl13-p small{font-weight:800;font-size:.74rem}
.vl13-p b{font-family:var(--display);font-weight:900;font-size:1.25rem;line-height:1.1}
.vl13-p--prix{color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00)}
.vl13-p--ok{color:#fff;background:linear-gradient(170deg,#62DE98,#0B7A45);text-shadow:0 2px 0 rgba(11,14,19,.4)}
.vl13-p--ko{color:#fff;background:linear-gradient(170deg,#D8344F,#8E0F27);text-shadow:0 2px 0 rgba(11,14,19,.4)}
.vl13-alerte{display:flex;align-items:center;justify-content:center;gap:4px;align-self:center;padding:5px 6px 5px 14px;border-radius:999px;
  font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(180deg,#FFA45E,#D9661A);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.vl13-boutons{justify-content:center}
.vl13-go-i{display:inline-grid;width:24px;height:24px}
.vl13-go-i svg{display:block;width:100%;height:100%}
@media (max-width:420px){ .vl13-t b{font-size:1rem} .vl13-p b{font-size:1.1rem} }
@media (prefers-reduced-motion:reduce){ .vl13-t{animation:none} }

/* ——— 2. Défilé Ligne Métro : tout l'écran sur un téléphone ——————————————— */
@media (max-width:760px){
  /* en partie, la bannière du jeu s'efface : score et terrain tiennent dans l'écran */
  .dfr-racine:has(.ap-stage > .playfield) .ap-ban{display:none!important}
  .dfr-racine:has(.ap-stage > .playfield) > .wrap{padding-inline:8px!important}
  .dfr-racine .ap-stage:has(> .playfield) > .hint{display:none!important}
  .dfr-racine .ap-stage:has(> .playfield){padding:6px!important}
  .dfr-racine .playfield canvas{max-height:none!important}
}
/* l'en-tête de la partie, ramassé sur une ligne */
@media (max-width:760px){
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px!important;padding:5px!important;margin:0 0 6px!important;border-radius:14px}
}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .gamebar{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px!important;padding:5px!important;border-radius:14px}
@media (max-width:760px){
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar>div:not(.spacer):not(.progress){display:flex!important;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;min-width:0;padding:4px 2px!important;border-radius:10px}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .hudlabel{display:none!important}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .hud-ico{width:22px;height:22px;border-radius:8px}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .hud-ico .ci{width:15px;height:15px}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .hudval{font-size:.92rem}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .bullet{width:22px;height:22px;font-size:.72rem}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .hearts{gap:4px}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar .heart{width:10px;height:10px}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar>.spacer{display:none!important}
  .dfr-racine .ap-cadre:has(.playfield) > .gamebar>.progress{grid-column:1/-1;min-width:0;width:100%;height:8px}
}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .gamebar>div:not(.spacer):not(.progress){display:flex!important;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;min-width:0;padding:4px 2px!important;border-radius:10px}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .gamebar .hudlabel{display:none!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .gamebar>.spacer{display:none!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .gamebar>.progress{grid-column:1/-1;min-width:0;width:100%;height:8px}
/* le plein écran : le cadre jaune d'or du jeu, le terrain bord à bord */
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen){gap:6px!important;
  padding:calc(env(safe-area-inset-top,0px) + 6px) 6px calc(env(safe-area-inset-bottom,0px) + 6px)!important;
  background:linear-gradient(170deg,#FFD84A,#E3A800)!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage{padding:0!important;overflow:hidden!important;background:transparent!important;box-shadow:none!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .playfield{margin:0!important;width:100%!important;max-width:none!important;
  border-radius:16px!important;box-shadow:0 0 0 3px #0B0E13!important;display:block!important;place-items:initial!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > :first-child{margin-top:0!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) > .ap-stage > .hint{display:none!important}
.dfr-racine .ap-cadre:is(.mob-plein,:fullscreen) .playfield canvas{max-height:none!important;width:100%!important}

/* ——— 3. MétroDrop : des vies qu'on voit ———————————————————————————————— */
.ap-stage:has(.md-board) .gamebar > div:nth-child(2){background:linear-gradient(170deg,#C9203F,#7E0C22)!important}
.ap-stage:has(.md-board) .gamebar > div:nth-child(2) .hud-ico path:first-child{fill:#E3051C}
.ap-stage:has(.md-board) .gamebar .hearts{gap:3px;padding:3px 6px;border-radius:999px;background:rgba(11,14,19,.62);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.ap-stage:has(.md-board) .gamebar .heart{width:14px!important;height:13px!important;border-radius:0;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 27C6 20 3 15 3 10a6.5 6.5 0 0 1 13-2 6.5 6.5 0 0 1 13 2c0 5-3 10-13 17z' fill='%23FF2E3F' stroke='%230B0E13' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M8 9a3 3 0 0 1 3-2' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ap-stage:has(.md-board) .gamebar .heart.gone{opacity:.35;transform:scale(.8);filter:grayscale(1) brightness(.6)}

/* ——— 4. Métro Solitaire : le conseil, seulement sur un téléphone debout ————— */
.sol13-paysage{display:none}
@media (max-width:760px) and (orientation:portrait){
  .sol13-paysage{display:flex;align-items:center;justify-content:center;gap:8px;align-self:center;width:max-content;max-width:100%;
    margin:0 auto 8px;padding:4px 12px 4px 6px;border-radius:999px;font-weight:800;font-size:.76rem;line-height:1.2;color:#0B0E13;
    background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
  .sol13-paysage svg{display:block;flex:none;width:30px;height:24px}
  .sor > .sol13-paysage{margin:12px auto 4px}
}
/* @@ fin retouches_lot13.css @@ */
/* @@ debut comptes_lot14.css @@ */
/* ——— La fenêtre du compte ———————————————————————————————————————————————— */
#authModal.mp14{overflow-y:auto;align-items:start;padding:max(16px,env(safe-area-inset-top)) 12px 16px}
@media (min-height:700px){ #authModal.mp14{align-items:center} }
#authModal .modal-in.mp14-boite{position:relative;max-width:min(420px,100%);width:100%;margin:auto;padding:0 18px 18px;border-radius:26px;overflow:hidden;
  color:#fff;background:linear-gradient(175deg,#1E3A6E 0%,#122447 46%,#0D182E 100%);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 30px 60px -20px rgba(0,0,0,.7);animation:mp14Entre .42s cubic-bezier(.3,1.4,.5,1) both}
@keyframes mp14Entre{from{opacity:0;transform:translateY(18px) scale(.96)}}
.mp14-x{position:absolute;right:12px;top:12px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  font-size:1rem;font-weight:900;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.mp14-x:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mp14-tete{position:relative;margin:0 -18px;padding:14px 18px 2px;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 0%,#4C9BE6 0%,#2A5FB0 45%,transparent 75%)}
.mp14-tete::before{content:"";position:absolute;left:50%;top:48%;width:150%;aspect-ratio:1;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.12) 0 8deg,transparent 8deg 20deg);transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 60%);mask-image:radial-gradient(circle,#000 10%,transparent 60%);
  animation:mp14Rayons 30s linear infinite}
@keyframes mp14Rayons{to{transform:translate(-50%,-50%) rotate(360deg)}}
.mp14-tete svg{display:block;width:min(250px,76%);height:auto;margin:0 auto;filter:drop-shadow(0 6px 0 rgba(11,14,19,.25));
  animation:mp14Passe 3.6s ease-in-out infinite}
@keyframes mp14Passe{50%{transform:translateY(-5px) rotate(1.5deg)}}
.mp14-etoiles path{transform-box:fill-box;transform-origin:center;animation:mp14Scint 2s ease-in-out infinite}
.mp14-etoiles path+path{animation-delay:-1s}
@keyframes mp14Scint{50%{scale:.5;opacity:.5}}
.mp14-plaque{display:table;margin:2px auto 14px;padding:9px 26px 10px;border-radius:12px;font-family:var(--display);font-weight:900;font-size:1.2rem;
  letter-spacing:.02em;color:#fff;background:#153E8C;box-shadow:inset 0 0 0 3px #153E8C,inset 0 0 0 5px #fff,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.mp14-onglets{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:14px;border-radius:16px;background:rgba(11,14,19,.45);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)}
.mp14-onglets button{padding:.6em .4em;border:0;border-radius:12px;cursor:pointer;font-family:var(--display);font-weight:800;font-size:.92rem;
  color:#C9D6EA;background:transparent;transition:background .2s,color .2s,transform .15s}
.mp14-onglets button.on{color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mp14-onglets button:not(.on):hover{color:#fff;background:rgba(255,255,255,.08)}
.mp14-msg{margin:0 0 12px;padding:9px 12px;border-radius:12px;font-weight:700;font-size:.86rem;line-height:1.35;color:#fff;
  background:linear-gradient(170deg,#D8344F,#8E0F27);box-shadow:0 0 0 2.5px #0B0E13;animation:mp14Secoue .4s ease-out}
.mp14-msg.info{background:linear-gradient(170deg,#3ED07A,#0B7A45);animation:none}
@keyframes mp14Secoue{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.mp14-form{display:flex;flex-direction:column;gap:10px}
.mp14-champ{position:relative;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:16px;cursor:text;
  background:rgba(11,14,19,.5);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);transition:box-shadow .15s,background .15s}
.mp14-champ:focus-within{background:rgba(11,14,19,.62);box-shadow:inset 0 0 0 2.5px #FFCE00,0 0 0 4px rgba(255,206,0,.22)}
.mp14-champ-i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:linear-gradient(180deg,#2F5FA8,#1B3F78);
  box-shadow:0 0 0 2px #0B0E13}
.mp14-champ-i svg{display:block;width:26px;height:26px}
.mp14-champ-c{display:flex;flex-direction:column;flex:1;min-width:0}
.mp14-champ-c small{font-family:var(--display);font-weight:800;font-size:.7rem;letter-spacing:.02em;color:#9FC2F0}
.mp14-champ input{width:100%;min-width:0;padding:2px 0 3px;border:0;outline:none;background:none;color:#fff;
  font:700 1rem/1.3 var(--body);box-shadow:none!important}
.mp14-champ input::placeholder{color:rgba(201,214,234,.45);font-weight:600}
.mp14-oeil{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:10px;cursor:pointer;background:rgba(255,255,255,.08)}
.mp14-oeil svg{display:block;width:26px;height:26px}
.mp14-oeil:hover{background:rgba(255,255,255,.16)}
.mp14-go{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;min-height:54px;padding:.6em 1.2em;border:0;border-radius:16px;cursor:pointer;
  font-family:var(--display);font-weight:900;font-size:1.08rem;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;transition:transform .12s,box-shadow .12s}
.mp14-go:hover{transform:translateY(-1px)}
.mp14-go:active{transform:translateY(4px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.mp14-go-i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
.mp14-go-i svg{display:block;width:20px;height:20px}
.mp14-go.attente{opacity:.75;cursor:progress}
.mp14-go.attente .mp14-go-i{animation:mp14Tourne .8s linear infinite}
@keyframes mp14Tourne{to{transform:rotate(360deg)}}
.mp14-bascule{margin:14px 0 0;text-align:center;font-weight:700;font-size:.88rem;color:#C9D6EA}
.mp14-bascule button{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:900;color:#FFCE00;text-decoration:underline;text-underline-offset:3px}
.mp14-ou{display:flex;align-items:center;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:12px auto 0;padding:4px 6px 4px 5px;border-radius:999px;
  font-weight:800;font-size:.78rem;color:#fff;background:rgba(11,14,19,.5);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}
.mp14-ou.mondial{background:linear-gradient(170deg,#2F7FE0,#153E8C);box-shadow:0 0 0 2px #0B0E13}
.mp14-ou-i{display:grid;place-items:center;width:24px;height:24px}
.mp14-ou-i svg{display:block;width:22px;height:22px}
.mp14-ou .mcf-i{margin-left:2px}
@media (max-width:380px){ .mp14-plaque{font-size:1.05rem;padding:8px 18px} .mp14-champ-i{width:36px;height:36px} }
@media (prefers-reduced-motion:reduce){ .modal-in.mp14-boite,.mp14-tete::before,.mp14-tete svg,.mp14-etoiles path,.mp14-msg{animation:none!important} }
/* @@ fin comptes_lot14.css @@ */
/* @@ debut cartes_publiques_lot15.css @@ */
/* ——— publique / privée ——— */
.cs15-genre-l{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 6px 6px 12px;border-radius:16px;background:rgba(6,18,46,.4)}
.cs15-genre{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(6,18,46,.5)}
.cs15-genre button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 12px;border:0;border-radius:11px;cursor:pointer;
  font:800 .86rem/1 var(--display);color:#CFE6FF;background:transparent;transition:background .2s,color .2s}
.cs15-genre button .am-ico{width:20px;height:20px}
.cs15-genre button.on{color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}

/* ——— la liste des parties publiques ——— */
.cs15-plaque{display:table;margin:6px auto 0}
.cs15-plaque span{display:inline-block;padding:7px 22px 8px;border-radius:10px;font:900 1rem/1 var(--display);color:#fff;background:#153E8C;
  box-shadow:inset 0 0 0 2.5px #153E8C,inset 0 0 0 4.5px #fff,0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.cs15-pubs{display:flex;flex-direction:column;gap:12px}
.cs15-pub{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:20px;background:rgba(6,18,46,.5);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;animation:cs15Entre .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*60ms)}
.cs15-pub.ami{box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 5px 0 5px #0B0E13}
@keyframes cs15Entre{from{opacity:0;transform:translateY(10px) scale(.97)}}
.cs15-pub-t{display:flex;align-items:center;gap:10px}
.cs15-amis-t{margin-top:4px}

/* ——— les deux camps de la Belote ——— */
.cs15-equipes{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}
.cs15-eq{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px 12px;border-radius:18px;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13}
.cs15-eq--0{background:linear-gradient(170deg,#4C9BE6,#153E8C)}
.cs15-eq--1{background:linear-gradient(170deg,#D8344F,#7E0C22)}
.cs15-eq-t{padding:3px 12px;border-radius:999px;font:900 .74rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em;color:#0B0E13;
  background:#fff;box-shadow:0 0 0 2px #0B0E13}
.cs15-eq-p{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
.cs15-vs{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:900 .9rem/1 var(--display);color:#0B0E13;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.cs15-equipes .cs-place-av{width:50px;height:50px}

/* ——— une place à prendre ——— */
.cs15-prendre{cursor:pointer;border-radius:14px;padding:4px 2px;transition:transform .15s,background .15s;opacity:1!important}
.cs15-prendre:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}
.cs15-prendre:active{transform:translateY(1px)}
.cs15-prendre:focus-visible{outline:3px solid #FFCE00;outline-offset:2px}
.cs15-prendre.cs-place--libre .cs-place-av{box-shadow:0 0 0 2.5px #FFCE00;background:rgba(255,206,0,.12)}
.cs15-assis{margin-top:2px;padding:3px 10px;border-radius:999px;font:900 .68rem/1.2 var(--display);color:#0B0E13;white-space:nowrap;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13;animation:cs15Appel 1.6s ease-in-out infinite}
@keyframes cs15Appel{50%{transform:scale(1.07)}}
.cs15-zone{display:flex;flex-direction:column}
.cs15-aide{margin:0;text-align:center;font:800 .84rem/1.3 var(--display);color:#E6F2FF}
.cs15-aide:empty{display:none}
.cs15-aide.ko{color:#FFD0D8}
@media (max-width:420px){
  .cs15-equipes{grid-template-columns:1fr;justify-items:stretch}
  .cs15-vs{justify-self:center;width:34px;height:34px;font-size:.8rem}
  .cs15-genre-l{flex-direction:column;align-items:stretch;padding:8px}
  .cs15-genre-l .cs-sur{text-align:center}
}
@media (prefers-reduced-motion:reduce){ .cs15-pub,.cs15-assis{animation:none} }
/* @@ fin cartes_publiques_lot15.css @@ */
/* @@ debut plan_ligne_lot16.css @@ */
/* le plan d'une ligne, sur la vraie carte */
.lineshow.ls16 .ls-stage > svg.ls16-svg{display:block;width:100%;height:auto;margin:0 auto;overflow:hidden}
/* une fois calé, le cadre épouse le plan */
.lineshow.ls16.ls16-cale .ls-stage{width:fit-content!important;max-width:100%;margin-left:auto!important;margin-right:auto!important;flex:none!important;overflow:hidden}
.lineshow.ls16.ls16-cale .ls-stage > svg.ls16-svg{max-width:100%}
.ls16 .ls16-trace{stroke-dasharray:var(--L,0) var(--L,0);stroke-dashoffset:var(--L,0);
  animation:ls16Trace var(--d,1s) linear var(--t,0ms) forwards}
@keyframes ls16Trace{to{stroke-dashoffset:0}}
.ls16 .ls16-st{opacity:0;transform-box:fill-box;transform-origin:center;
  animation:ls16Pop .45s cubic-bezier(.3,1.6,.5,1) var(--t,0ms) forwards}
@keyframes ls16Pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.ls16 .ls16-nom{opacity:0;fill:#2A313A;font-family:Archivo,var(--display),sans-serif;font-weight:600;
  paint-order:stroke;stroke:#FFFDF7;stroke-linejoin:round;animation:ls16Nom .4s ease-out calc(var(--t,0ms) + 120ms) forwards}
.ls16 .ls16-nom.gras{fill:#0B0E13;font-weight:800}
@keyframes ls16Nom{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
.ls16 #ls16-rame{filter:drop-shadow(0 2px 0 rgba(11,14,19,.3))}
.ls16.ls16-fixe .ls16-trace,.ls16.ls16-fixe .ls16-st,.ls16.ls16-fixe .ls16-nom{animation:none;opacity:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .ls16 .ls16-trace,.ls16 .ls16-st,.ls16 .ls16-nom{animation:none!important;opacity:1;stroke-dashoffset:0}
}
/* les longues lignes : les terminus en plus petit, le plan garde la place */
.lineshow.ls16.ls16-long .ls-head b{font-size:clamp(.82rem,1.5vw,1.08rem)!important;line-height:1.25}
/* @@ fin plan_ligne_lot16.css @@ */
/* @@ debut salle_supabase_lot17.css @@ */
/* @@ fin salle_supabase_lot17.css @@ */
/* @@ debut partie_partagee_lot18.css @@ */
/* pendant qu'on rattrape la partie (reprise), la table ne se touche pas */
.mp-rattrape .bt{pointer-events:none}
.mp-rattrape .bt::after{content:"Rattrapage de la partie…";position:absolute;left:50%;top:10px;z-index:50;transform:translateX(-50%);
  padding:5px 14px;border-radius:999px;font:800 .82rem/1.2 var(--display);color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13}
.mp-reprise{min-height:auto!important;flex-direction:row!important;gap:12px!important;padding:12px 16px!important;cursor:pointer;
  background:radial-gradient(90% 60% at 50% 0,rgba(255,255,255,.25),transparent 60%),linear-gradient(180deg,#5AB0FF,#1E5AA8)!important;color:#fff}
.mp-reprise .cs-tuile-i{width:40px!important;height:40px!important}
/* @@ fin partie_partagee_lot18.css @@ */
/* @@ debut poker_partage_lot19.css @@ */
/* Métro Poker : pendant qu'on rattrape la partie (reprise), la table ne se touche pas */
.mp-rattrape .mpk3-actions,.mp-rattrape .mpk3-main,.mp-rattrape .mpk3-bonus-bt{pointer-events:none}
.mp-rattrape .mpk3::after{content:"Rattrapage de la partie…";position:absolute;left:50%;top:58px;z-index:60;transform:translateX(-50%);
  padding:5px 14px;border-radius:999px;font:800 .82rem/1.2 var(--display);color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;pointer-events:none;white-space:nowrap}
/* @@ fin poker_partage_lot19.css @@ */
/* @@ debut retouches_lot20.css @@ */
/* — 1. la salle des jeux : le petit dessin de chaque jeu se voit aussi sur téléphone,
        et un long titre (MÉTRODROP) ne passe plus sous le dessin — */
.ap-pj{container-type:inline-size}
.ap-pj-t{font-size:min(clamp(1.8rem,4.2vw,2.6rem),9.4cqi)}
@media (max-width:560px){
  .ap-pj{grid-template-columns:minmax(0,1fr) auto!important}
  .ap-pj-em{display:block!important;align-self:start;margin-top:-4px}
  .ap-pj-em .ap-emb{width:clamp(66px,21vw,84px)}
  .ap-pj-t{font-size:min(1.8rem,10cqi)}
}

/* — 2. l'onglet France : le drapeau ne se pose plus sur la carte ni sur l'icône du jeu — */
@media (max-width:699px){
  .fr10-hero{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:10px;min-height:0;padding:86px 14px 32px}
  .fr10-hero-t{font-size:clamp(2.1rem,10vw,3.2rem)}
  .fr10-hero-carte{position:relative;right:auto;bottom:auto;width:min(34vw,128px);align-self:center;margin-top:-60px}
  .fr10-hero-drapeau{right:auto;left:10px;top:-2px;width:86px;height:86px}
}
/* dans l'en-tête d'un jeu de France : sur un petit écran, le drapeau descend dans le coin libre,
   à droite du bouton des règles (il barrait le titre) ; sur grand écran, il se pose entre le titre et l'icône */
@media (max-width:899px){
  .ap--france .ap-ban-em{display:none}
  .fr10-ban-drapeau{top:auto;bottom:20px;right:12px;width:76px;height:76px}
}
@media (min-width:900px) and (max-width:1099px){ .fr10-ban-drapeau{top:auto;bottom:22px;width:84px;height:84px;right:calc(clamp(84px,13vw,132px) + 64px)} }
@media (min-width:1100px){ .fr10-ban-drapeau{width:124px;height:124px;top:8px;right:calc(clamp(84px,13vw,132px) + 76px)} }

/* — 3. le logo : le pictogramme au centre de sa pastille — */
.logo .logo-mark{display:grid!important;place-items:center}
@media (max-width:520px){ .logo{width:44px;height:44px;padding:0!important;justify-content:center} }

/* — 4. arrondissements et terminus : la consigne ne touche plus le filet de couleur — */
@media (max-width:760px){
  .view:has(.ap-quais) .ap-cadre:not(.mob-plein):not(:fullscreen) > .ap-stage,
  .view:has(.ap-stage .paris) .ap-cadre:not(.mob-plein):not(:fullscreen) > .ap-stage{padding-top:30px!important}
}

/* — 5. les cartes zoomables (plan des arrondissements) — */
.l20-zoom{position:absolute;right:10px;bottom:10px;z-index:6;display:flex;flex-direction:column;gap:7px}
.l20-zoom-b{width:38px;height:38px;border:0;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  font:900 1.15rem/1 var(--display);color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .15s}
.l20-zoom-b:hover{transform:translateY(-2px)}
.l20-zoom-b:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
@media (max-width:620px){ .l20-zoom{flex-direction:row;right:8px;bottom:8px;gap:6px} .l20-zoom-b{width:32px;height:32px;border-radius:10px;font-size:1rem} }
.paris.l20-zoome > svg{cursor:grab}
.paris.l20-zoome > svg:active{cursor:grabbing}

/* — 6. Créez votre ligne : sur téléphone, le plan tient dans l'écran (il débordait à droite) — */
@media (max-width:860px){ .ap--ligne .lp-plan{min-width:0;width:100%;min-height:0!important} }

/* — 7. Metro City sur téléphone : un seul bouton de plein écran, celui du plan — */
@media (max-width:760px){ body:has(.view .mc-mapwrap) header.top .btn--icone[title^="Agrandir"]{display:none!important} }

/* — 8. (les écrans de fin : voir fins_plein_ecran_lot21) — */

/* — 9. la carte des départements : plus de frontières de régions par-dessus,
        des numéros lisibles, un relief discret, des encarts d'outre-mer dans la mer — */
.fr-carte--depts .fr-deps > path{display:none}
.fr-carte--depts .fr-svg :is(.fr-d-mont,.fr-d-foret){opacity:.45!important;filter:none!important;transform-box:fill-box;transform-origin:center;scale:.78}
.fr-carte--depts .fr-svg :is(.fr-d-mont,.fr-d-foret) path{stroke:#1F3550;stroke-width:1.2}
.fr-marque--dep .fr-dep-num{fill:#fff;font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:-.02em;
  paint-order:stroke;stroke:#0B0E13;stroke-width:3.2px;stroke-linejoin:round}
.fr10-carte .fr-om-cadre{fill:#2F7FD0;stroke:#0B0E13;stroke-width:3.4}
.fr10-carte .fr-om-forme{fill:#FFFFFF;stroke:#0B0E13;stroke-width:2.4}

/* — 10. le Hall des trophées : sur téléphone, les périodes en deux rangées (elles se chevauchaient) — */
@media (max-width:520px){
  .view.lbx .lbx-periodes{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px!important;border-radius:20px!important}
  .view.lbx .lbx-periodes button{height:34px}
}

/* — 11. sur téléphone, le bouton qui remonte en haut de la page — */
.l20-haut{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:950;width:44px;height:44px;border:0;border-radius:50%;
  display:grid;place-items:center;color:#0B0E13;cursor:pointer;background:linear-gradient(180deg,#FFE45C,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;opacity:0;transform:translateY(24px) scale(.8);pointer-events:none;
  transition:opacity .2s,transform .28s cubic-bezier(.3,1.5,.5,1)}
.l20-haut svg{width:22px;height:22px}
.l20-haut.on{opacity:1;transform:none;pointer-events:auto}
.l20-haut.on:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
body:has(.mob-plein,.sk4-jeu,.sk3-jeu,.rn-plein-css,.lineshow,.pav-fond,.bltl-fond,.blt-plein-css,.mk-plein-css,.mpk-joue) .l20-haut{display:none}
@media (prefers-reduced-motion:reduce){ .l20-haut{transition:none} }
/* @@ fin retouches_lot20.css @@ */
/* @@ debut fins_plein_ecran_lot21.css @@ */
/* ————— l'écran de fin remplit la fenêtre sous l'en-tête ————— */
.fin21{position:relative!important;isolation:isolate;overflow:hidden!important;box-sizing:border-box;
  min-height:var(--fin21-h,82vh);width:100%!important;max-width:none!important;margin:0!important;
  display:flex!important;flex-direction:column;align-items:center;justify-content:space-evenly;gap:12px;
  padding:20px 14px 64px!important;border-radius:28px!important}
.fin21.fin21--mdr{align-items:stretch}
.fin21-g,.fin21-d{display:contents}
/* le cadre du jeu s'efface : la fin devient la grande carte */
.ap-stage:has(> .fin21){padding:0!important;background:none!important;box-shadow:none!important;border:0!important;min-height:0!important;overflow:visible!important}
.ap-stage:has(> .fin21)::before,.ap-stage:has(> .fin21)::after{display:none!important}
/* les fins qui n'avaient pas de fond prennent la couleur du jeu */
.fin21:is(.fin21--pxp,.fin21--lbx,.fin21--mdr){
  background:radial-gradient(120% 90% at 28% 8%,color-mix(in srgb,var(--fin21-c) 62%,#fff),var(--fin21-c) 46%,color-mix(in srgb,var(--fin21-c) 52%,#0B1430))!important;
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13!important}
.fin21--perdu:is(.fin21--pxp,.fin21--lbx){
  background:radial-gradient(120% 90% at 28% 8%,color-mix(in srgb,var(--fin21-c) 40%,#7A8AA0),color-mix(in srgb,var(--fin21-c) 45%,#2A3550) 50%,#141B2C)!important}
.fin21--fr10,.fin21--mpk4{box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13}

/* les chiffres de l'ancienne fin (Belote, cartes) en tuiles de couleur */
.fin21--lbx .lbx-fin-stats{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;width:100%}
.fin21--lbx .lbx-fin-stats .stat{border-radius:18px;padding:14px 10px 12px;color:#fff;text-align:center;
  background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(165deg,var(--a,#4C8EEC),var(--b,#153E8C));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13}
.fin21--lbx .lbx-fin-stats .stat:nth-child(5n+1){--a:#4C8EEC;--b:#153E8C}
.fin21--lbx .lbx-fin-stats .stat:nth-child(5n+2){--a:#4FD68A;--b:#0B6B3F}
.fin21--lbx .lbx-fin-stats .stat:nth-child(5n+3){--a:#C98BEE;--b:#5A2590}
.fin21--lbx .lbx-fin-stats .stat:nth-child(5n+4){--a:#FFB25E;--b:#C4561B}
.fin21--lbx .lbx-fin-stats .stat:nth-child(5n+5){--a:#FF7A8E;--b:#A3121F}
.fin21--lbx .lbx-fin-stats .stat b{color:#fff!important;font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,3vw,2.4rem);text-shadow:0 2px 0 rgba(11,14,19,.35)}
.fin21--lbx .lbx-fin-stats .stat span{color:#fff!important;font-family:var(--display);font-weight:800;font-size:.86rem;letter-spacing:0;text-transform:none;opacity:.95}
.fin21 .stat b.fin21-mot,.fin21 .pxp-fin-t b.fin21-mot{font-size:clamp(1.05rem,1.7vw,1.5rem)!important;line-height:1.15;padding:.25em 0}
.fin21--lbx .row{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;width:100%}
.fin21--lbx .row .btn{min-height:56px;padding:0 1em;border:0;border-radius:16px;font-family:var(--display);font-weight:900;font-size:1.02rem;
  color:#fff;background:linear-gradient(180deg,#5AB0FF,#1E5AA8);box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.fin21--lbx .row .btn:first-child{color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#F5B400);text-shadow:none}
.fin21--lbx .row .btn:hover{transform:translateY(-2px)}
.fin21--lbx .row .btn:active{transform:translateY(3px);box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13}

/* ————— le décor animé ————— */
.fin21-deco{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit;--tw:380px;--th:52px}
.fin21-halo{position:absolute;left:50%;top:40%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,.08) 30%,transparent 58%);animation:fin21Respire 3.2s ease-in-out infinite}
.fin21-soleil{position:absolute;left:50%;top:40%;width:230%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.24;
  background:repeating-conic-gradient(from 0deg,#fff 0 6deg,transparent 6deg 18deg);
  -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 62%);mask-image:radial-gradient(circle,#000 8%,transparent 62%);
  animation:fin21Tourne 46s linear infinite}
@keyframes fin21Tourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes fin21Respire{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.75}}
.fin21-deco.perdu .fin21-soleil{opacity:.09;animation-duration:90s}
.fin21-deco.perdu .fin21-halo{opacity:.45}
/* étincelles */
.fin21-eclats i{position:absolute;left:var(--x);top:var(--y);width:16px;height:16px;transform:scale(0);
  background:#FFF6C8;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:fin21Scintille 3s ease-in-out var(--d) infinite}
@keyframes fin21Scintille{0%,100%{transform:scale(0) rotate(0)}45%{transform:scale(var(--s)) rotate(45deg)}60%{transform:scale(calc(var(--s)*.7)) rotate(70deg)}}
/* confettis qui tombent sans fin */
.fin21-confettis i{position:absolute;left:var(--x);top:-24px;width:var(--l);height:calc(var(--l) * .56);border-radius:2px;background:var(--k);
  box-shadow:0 0 0 1.4px rgba(11,14,19,.6);animation:fin21Tombe var(--t) linear var(--d) infinite}
@keyframes fin21Tombe{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(var(--o),28vh) rotate(calc(var(--r) * .3)) rotateY(180deg)}
  50%{transform:translate(0,56vh) rotate(calc(var(--r) * .55))}75%{transform:translate(calc(var(--o) * -1),84vh) rotate(calc(var(--r) * .8)) rotateY(360deg)}
  100%{transform:translate(0,115vh) rotate(var(--r))}}
/* feux d'artifice à tour de rôle */
.fin21-feux span{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.fin21-feux span::before{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff,var(--k) 55%,transparent 70%);
  opacity:0;animation:fin21Flash 4.6s ease-out var(--d) infinite}
.fin21-feux i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--k);box-shadow:0 0 0 1.6px #0B0E13;
  opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3);animation:fin21Feu 4.6s cubic-bezier(.15,.7,.3,1) var(--d) infinite}
@keyframes fin21Feu{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}6%{opacity:1}
  34%{opacity:1;transform:rotate(var(--a)) translateY(-78px) scale(1)}52%{opacity:0;transform:rotate(var(--a)) translateY(-96px) scale(.5)}100%{opacity:0}}
@keyframes fin21Flash{0%{opacity:0;transform:scale(.2)}6%{opacity:1;transform:scale(1.3)}20%{opacity:0;transform:scale(2)}100%{opacity:0}}
/* tickets, étoiles et pastilles qui montent */
.fin21-montent i{position:absolute;left:var(--x);bottom:-60px;width:var(--s);height:var(--s);animation:fin21Monte var(--t) linear var(--d) infinite}
.fin21-montent i svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 rgba(11,14,19,.35))}
@keyframes fin21Monte{0%{transform:translate(0,0) rotate(var(--b));opacity:0}8%{opacity:1}
  50%{transform:translate(22px,-56vh) rotate(calc(var(--b) * -1))}92%{opacity:1}100%{transform:translate(0,-118vh) rotate(var(--b));opacity:0}}
/* bulles d'une partie perdue */
.fin21-bulles i{position:absolute;left:var(--x);bottom:-40px;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.75),rgba(255,255,255,.12) 45%,rgba(255,255,255,.05));box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.45);
  animation:fin21Monte var(--t) ease-in-out var(--d) infinite;--b:0deg}
/* la ville au loin */
.fin21-ville{position:absolute;left:0;right:0;bottom:44px;height:min(26%,190px)}
.fin21-ville svg{display:block;width:100%;height:100%}
.fin21-silh{fill:color-mix(in srgb,var(--c) 30%,#0B1430);opacity:.5}
.fin21-fen .f{fill:#FFE58A;opacity:0;animation:fin21Fen 7s steps(1,end) var(--d) infinite}
@keyframes fin21Fen{0%{opacity:0}12%{opacity:.95}68%{opacity:.95}80%{opacity:0}}
/* la voie et deux rames qui se croisent */
.fin21-voie{position:absolute;left:0;right:0;bottom:0;height:62px}
.fin21-rails{position:absolute;left:0;right:0;bottom:0;height:12px;border-top:3px solid #0B0E13;
  background:linear-gradient(#C9D2DC,#C9D2DC) 0 1px/100% 2px no-repeat,repeating-linear-gradient(90deg,#3A2C1E 0 11px,transparent 11px 21px) 0 5px/100% 5px no-repeat,#5E4630}
.fin21-rame{position:absolute;height:var(--th);width:var(--tw)}
.fin21-rame svg{display:block;width:100%;height:100%}
.fin21-rame--d{bottom:10px;z-index:2;animation:fin21RouleD 12s linear infinite}
.fin21-rame--g{bottom:16px;z-index:1;height:calc(var(--th) * .78);width:calc(var(--tw) * .78);opacity:.88;animation:fin21RouleG 16s linear -7s infinite}
@keyframes fin21RouleD{from{left:calc(var(--tw) * -1.05)}to{left:105%}}
@keyframes fin21RouleG{from{left:105%}to{left:calc(var(--tw) * -.85)}}
/* la scène d'une partie perdue */
.fin21-scene-perdu{background:#3B4A78}
.fin21-scene-perdu svg{display:block;width:100%;height:100%}
.fin21-goutte{animation:fin21Pluie 1.4s linear var(--d) infinite}
@keyframes fin21Pluie{from{transform:translate(0,0)}to{transform:translate(-40px,250px)}}
.fin21-nuage{animation:fin21Nuage 7s ease-in-out infinite alternate}
.fin21-nuage--2{animation-duration:9s;animation-direction:alternate-reverse}
@keyframes fin21Nuage{to{transform:translateX(26px)}}
.fin21-feu{animation:fin21Clignote 1s steps(2,end) infinite}
@keyframes fin21Clignote{50%{fill:#5A1A16}}
.fin21-part{animation:fin21Part 6s cubic-bezier(.5,0,.8,.6) infinite}
@keyframes fin21Part{0%,22%{transform:translateX(-60px)}100%{transform:translateX(480px)}}
.fin21-onde{transform-box:fill-box;transform-origin:center;animation:fin21Onde 1.6s ease-out infinite}
@keyframes fin21Onde{from{transform:scale(.4);opacity:1}to{transform:scale(3);opacity:0}}
/* sur un écran de fin, le bouton « remonter » ne se pose pas sur les boutons */
body:has(.fin21) .l20-haut{display:none}
/* Snake et Métro King : la fin se pose sur le jeu, le décor remplit le tour */
.fin21-calque{isolation:isolate}
.fin21-calque > .fin21-deco{border-radius:0}
.fin21-king > .fin21-deco{background:rgba(20,8,40,.45)}

/* ————— téléphone : tout en colonne, réparti sur la hauteur ————— */
@media (max-width:899px){
  .fin21-deco{--tw:270px;--th:37px}
  .fin21-voie{height:46px}
  .fin21-ville{bottom:32px;height:min(20%,130px)}
  .fin21-feux i{width:6px;height:6px;left:-3px;top:-3px}
  .fin21 .pxp-fin-scene,.fin21 .lbx-fin-scene{height:clamp(210px,34vh,300px)}
  .fin21 :is(.rnr-fin-scene,.dfr-fin-scene,.sor-fin-scene){height:clamp(200px,32vh,300px)}
  .fin21 :is(.pxp-fin-btns,.rnr-fin-bts,.dfr-fin-bts,.sor-fin-bts,.mdr-action,.fr10-fin-a){width:100%}
}

/* ————— ordinateur : la scène à gauche, le score et les boutons à droite ————— */
@media (min-width:900px){
  .fin21{padding:28px 34px 86px!important}
  .fin21.fin21--duo{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;align-content:center;gap:22px 40px}
  .fin21--duo > .fin21-g,.fin21--duo > .fin21-d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0}
  .fin21--duo > .fin21-g > *,.fin21--duo > .fin21-d > *{max-width:100%!important;margin-left:0!important;margin-right:0!important}
  .fin21--mdr > .fin21-g,.fin21--mdr > .fin21-d{align-items:stretch}
  /* les scènes grandissent avec l'écran */
  .fin21 .pxp-fin-scene{width:100%;max-width:none;height:clamp(320px,calc(var(--fin21-h) - 190px),560px)}
  .fin21 .pxp-fin-coupe{top:calc(50% - 140px);width:160px;margin-left:-80px}
  .fin21 .pxp-fin-med{top:calc(50% - 110px);width:78px}
  .fin21 .pxp-fin-med.g{left:calc(50% - 190px)}
  .fin21 .pxp-fin-med.d{right:calc(50% - 186px)}
  .fin21 .lbx-fin-scene{max-width:none;width:420px;height:230px;margin:0 auto!important;align-items:center;zoom:1.55}
  .fin21 :is(.rnr-fin-scene,.dfr-fin-scene,.sor-fin-scene){height:clamp(300px,calc(var(--fin21-h) - 200px),540px)}
  .fin21 .mdr-arr-scene{margin:0!important}
  .fin21--fr10 .fr10-fin-med{zoom:1.55}
  .fin21--fr10 .fr10-fin-et{zoom:1.35}
  .fin21--fr10 .fr10-plaque{zoom:1.15}
  /* le score, les chiffres et les boutons en grand */
  .fin21 .pxp-fin-titre{font-size:clamp(1.7rem,2.6vw,2.5rem)!important;margin:0 auto!important}
  .fin21 :is(.rnr-fin-score,.dfr-fin-score,.sor-fin-score){font-size:clamp(4.4rem,7vw,6.6rem)}
  .fin21 .pxp-fin-stats,.fin21 .lbx-fin-stats,.fin21 :is(.rnr-fin-stats,.dfr-fin-stats,.sor-fin-stats),.fin21 .mdr-arr-gains,.fin21 .fr10-fin-stats{width:100%!important;max-width:none!important}
  .fin21 .pxp-fin-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px}
  .fin21 .pxp-fin-t{max-width:none;padding:22px 10px 18px}
  .fin21 .pxp-fin-t b{font-size:clamp(2.2rem,3.2vw,3rem)}
  .fin21 .pxp-fin-t small{font-size:1rem}
  .fin21 .pxp-fin-btns{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px;width:100%;margin-top:4px}
  .fin21 .pxp-fin-btns > *{min-height:60px;font-size:1.12rem}
  .fin21 :is(.rnr-fin-stats,.dfr-fin-stats,.sor-fin-stats){display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .fin21 :is(.rnr-fin-bts,.dfr-fin-bts,.sor-fin-bts){display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%}
  .fin21 :is(.rnr-fin-bts,.dfr-fin-bts,.sor-fin-bts) > *{min-height:64px}
  .fin21 .fr10-fin-a{width:100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:14px}
  .fin21 .fr10-fin-a > *{min-height:60px}
  .fin21 .fr10-fin-explo{max-width:none}
  .fin21 .mdr-action{width:100%}
  .fin21 .mdr-go{width:100%}
  .fin21--mpk4{justify-content:center;gap:28px}
  .fin21-calque .sk4-pan--fin{width:min(500px,72vw);zoom:1.32;max-height:none}
  .fin21-calque.sk4-calque{overflow:auto}
}
@media (prefers-reduced-motion:reduce){
  .fin21-deco *,.fin21-deco{animation:none!important}
  .fin21-confettis,.fin21-feux,.fin21-montent,.fin21-bulles{display:none}
  .fin21-rame--d{left:8%}.fin21-rame--g{left:60%}
}
/* @@ fin fins_plein_ecran_lot21.css @@ */
/* @@ debut finitions_lot22.css @@ */
/* — Belote : l'enchère se pose à côté de la retournée, en petit ; elle ne cache plus la main — */
.bt-board .blt-enchere{left:522px!important;top:142px!important;width:236px!important;padding:10px 12px 12px!important;
  flex-direction:column!important;flex-wrap:nowrap!important;gap:8px!important;border-radius:18px!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7px #0B0E13,0 6px 0 7px #0B0E13!important}
.bt-board .blt-enchere > p{font-size:14px!important;margin:0!important;flex:none!important;gap:6px!important}
.bt-board .blt-enchere .blt-ench-past{width:28px;height:28px;font-size:.9rem}
.bt-board .blt-enchere .blt-ench-b{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;width:100%}
.bt-board .blt-enchere .btn{width:100%;min-width:0;font-size:12.5px!important;padding:.5em .4em!important;white-space:nowrap}
.bt-board .blt-enchere .blt-chrono{left:auto!important;right:-15px!important;top:-15px!important;margin:0!important;width:36px!important;height:36px!important}
.bt-board .blt-enchere:has(.blt-ench-l){top:120px!important}
/* — Belote en ligne : l'attente des autres pendant les annonces — */
.blt-ann-attente{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:13px;color:#0B0E13;background:linear-gradient(180deg,#FFE45C,#FFCE00);box-shadow:0 0 0 2.5px #0B0E13}
.blt-ann-attente i{width:7px;height:7px;border-radius:50%;background:#0B0E13;animation:bltAttente 1s ease-in-out infinite}
.blt-ann-attente i:nth-child(2){animation-delay:.15s}.blt-ann-attente i:nth-child(3){animation-delay:.3s}
.blt-ann-attente span{margin-left:4px}
@keyframes bltAttente{50%{transform:translateY(-4px);opacity:.4}}
/* — Belote, menu sur téléphone : le dessin des cartes « voyageurs / conducteurs » tient dans sa case — */
@media (max-width:640px){
  .blt-menu .blt-mode:not(.blt-mode--ligne) .blt-mode-vis{zoom:.8;max-width:100%}
  .blt-menu .blt-mode:not(.blt-mode--ligne) > b{font-size:1.05rem!important;line-height:1.15}
}
/* — Belote sur téléphone debout : la table n'a plus de grand vide au-dessus et au-dessous — */
@media (max-width:760px) and (orientation:portrait){
  .bt:not(.mob-plein):not(.blt-plein-css):not(:fullscreen){height:calc(470px * var(--k,.4) + 16px)!important;min-height:0!important}
  .view.blt-joue{padding-left:4px!important;padding-right:4px!important}
  .view.blt-joue .ap-stage{min-height:0!important}
}
/* — le bouton « Accueil » des jeux : un fond plein, les rames du décor ne passent plus au travers — */
.view > .wrap > .section > .row > .btn.btn--ghost{background:#151C26!important;color:#F5F2E8!important;
  box-shadow:0 0 0 2px rgba(245,242,232,.35),0 3px 0 rgba(0,0,0,.5)!important}
.view > .wrap > .section > .row > .btn.btn--ghost:hover{background:#1E2836!important}
/* — Metro City : les compteurs et les onglets remplissent la largeur ; le « ? » ne mord plus le titre — */
@media (min-width:761px){
  .mc-hud.px-mc-hud{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .mc-hud .mc-chip.px-mc{min-width:0;padding-right:28px}
  .mc-hud .mc-chip.px-mc > :not(:first-child){min-width:0}
  .mc-hud .mc-chip.px-mc small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mc-dock{display:flex!important;flex-wrap:wrap}
  .mc-dock .mc-dtab{flex:1 1 auto;justify-content:center;white-space:nowrap}
}
/* — l'en-tête sur téléphone : connecté, le pseudo se raccourcit et « Se déconnecter » devient une icône ;
     plus rien ne passe sur le logo — */
@media (max-width:520px){
  header.top .top-actions{flex:1 1 auto;min-width:0;justify-content:flex-end}
  header.top .top-actions > .btn{flex:none}
  header.top .top-actions > .btn.btn--ghost:not(.btn--icone):not(.btn--picto){flex:0 1 auto;min-width:0;max-width:40vw;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
  header.top .top-actions > .btn.btn--ghost:not(.btn--icone):not(.btn--picto) > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
  header.top .top-actions > .btn.btn--danger{width:34px;height:34px;padding:0!important;font-size:0!important;flex:none;
    background:#E3051C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4M9 8l-4 4 4 4M5 12h10' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat!important}
}
@media (max-width:360px){ header.top .top-actions .btn--icone{display:none} }
/* — MétroDrop : les titres des compteurs tiennent dans leur case (« Déplacements » était coupé) — */
@media (max-width:520px){
  .ap-stage:has(.md-board) .gamebar .hudlabel{font-size:clamp(.56rem,2.6vw,.7rem)!important;letter-spacing:-.01em!important;white-space:nowrap}
}
/* — Métro Poker sur téléphone : la barre du haut passe sur deux rangs au lieu de sortir de l'écran ;
     « Annonce bonus » devient « Bonus » — */
.mpk3.etroit .mpk3-barre{flex-wrap:wrap;overflow:visible;row-gap:6px;justify-content:center}
.mpk3.etroit .mpk3-b--eclair span:last-child{font-size:0!important}
.mpk3.etroit .mpk3-b--eclair span:last-child::after{content:"Bonus";font-size:.82rem}
/* @@ fin finitions_lot22.css @@ */
/* @@ debut lot23.css @@ */
/* — le logo : plus de pastille bleue ; le pictogramme prend toute la hauteur de l'en-tête — */
header.top .logo{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-left:0!important;
  width:auto!important;height:auto!important;gap:12px!important;align-items:center}
header.top .logo:hover,header.top .logo:active{transform:none!important;box-shadow:none!important}
header.top .logo .logo-mark{width:50px!important;height:50px!important;border-radius:14px!important;overflow:hidden;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
header.top .logo:hover .logo-mark{transform:rotate(-5deg) scale(1.06)}
header.top .logo .logo-mark svg{width:100%!important;height:100%!important}
header.top .logo > span:not(.logo-mark){font-size:1.7rem!important;letter-spacing:-.01em;color:#fff;
  text-shadow:0 3px 0 #0B0E13,2px 0 0 #0B0E13,-2px 0 0 #0B0E13,0 -2px 0 #0B0E13}
@media (max-width:760px){
  header.top .logo .logo-mark{width:46px!important;height:46px!important;border-radius:12px!important}
  header.top .logo > span:not(.logo-mark){font-size:1.25rem!important}
}
@media (max-width:520px){ header.top .logo .logo-mark{width:46px!important;height:46px!important} }
@media (max-height:520px) and (orientation:landscape){ header.top .logo .logo-mark{width:36px!important;height:36px!important} }

/* — Metro City : le plein écran du plan couvre tout, même sur un téléphone qui ne connaît pas « dvh » — */
.mc-mapwrap.mob-plein{top:0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important}
@supports not (height:100dvh){
  .mob-plein{height:100vh!important;height:-webkit-fill-available!important}
  .mc-mapwrap.mob-plein{height:auto!important}
}
/* — Metro City : le bandeau des jokers ne cache plus le plan sur téléphone, et passe au-dessus du plein écran — */
.mc-trace{z-index:9300!important}
@media (max-width:760px){
  .mc-trace{left:8px!important;right:8px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;transform:translateY(20px)!important;
    max-width:none!important;gap:8px!important;padding:6px 8px 6px 6px!important;border-radius:14px!important}
  .mc-trace.on{transform:none!important}
  .mc-trace small{display:none!important}
  .mc-trace b{font-size:.78rem!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mc-trace-pastille{width:28px!important;height:28px!important;font-size:.72rem!important}
  .mc-trace .btn{padding:.45em .7em!important;font-size:.72rem!important;flex:none}
}
/* — Metro City : les monuments d'or, spectaculaires — */
.mcf-or{position:relative;overflow:hidden;isolation:isolate;border-radius:22px!important;padding:10px 10px 14px!important;
  background:radial-gradient(120% 70% at 50% 0,#FFF6C8,transparent 60%),linear-gradient(170deg,#FFE27A 0%,#F4B400 45%,#B57E00 100%)!important;
  box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 3px #FFF2B0,inset 0 0 0 5px #C98A00,0 6px 0 2.5px #0B0E13,0 14px 30px -10px rgba(255,190,0,.55)!important}
.mcf-or::before{display:none!important}
.mcf-or .mc-or-vis{position:relative;overflow:hidden;isolation:isolate;border-radius:16px;box-shadow:0 0 0 2.5px #0B0E13,0 0 0 5px #FFF2B0,0 0 0 7px #0B0E13}
.l23-or-rayons{position:absolute;left:50%;top:50%;width:220%;aspect-ratio:1;z-index:1;pointer-events:none;transform:translate(-50%,-50%);opacity:.45;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,rgba(255,240,170,.9) 0 7deg,transparent 7deg 20deg);
  -webkit-mask-image:radial-gradient(circle,#000 10%,transparent 60%);mask-image:radial-gradient(circle,#000 10%,transparent 60%);animation:l23Tourne 22s linear infinite}
@keyframes l23Tourne{to{transform:translate(-50%,-50%) rotate(360deg)}}
.l23-or-eclats i{position:absolute;z-index:3;width:16px;height:16px;pointer-events:none;background:#FFF8D0;transform:scale(0);
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:l23Eclat 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.43s)}
.l23-or-eclats i:nth-child(1){left:8%;top:12%}.l23-or-eclats i:nth-child(2){right:10%;top:18%}.l23-or-eclats i:nth-child(3){left:18%;bottom:20%}
.l23-or-eclats i:nth-child(4){right:16%;bottom:14%}.l23-or-eclats i:nth-child(5){left:46%;top:6%}.l23-or-eclats i:nth-child(6){right:40%;bottom:8%}
@keyframes l23Eclat{0%,100%{transform:scale(0) rotate(0)}40%{transform:scale(1.15) rotate(45deg)}60%{transform:scale(.6) rotate(70deg)}}
.l23-or-reflet{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);
  transform:translateX(-120%);animation:l23Reflet 3.8s ease-in-out infinite}
@keyframes l23Reflet{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.mcf-or .mcf-or-nom{color:#3A2600;text-shadow:0 1px 0 #FFF2B0}
.mcf-or .mcf-or-pax{background:linear-gradient(180deg,#FFFFFF,#FFE88A)!important;font-size:.9rem!important}
.mcf-or:not(.brille) .mc-or-vis{filter:saturate(.75)}
.mcf-or.brille{animation:l23Brille 2.4s ease-in-out infinite}
@keyframes l23Brille{50%{box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 3px #FFF2B0,inset 0 0 0 5px #C98A00,0 6px 0 2.5px #0B0E13,0 0 40px 6px rgba(255,214,90,.8)}}
/* les puces du bandeau des monuments : en couleur */
.mcx-hero--monuments .vl-chip{background:linear-gradient(180deg,#FFF6C8,#FFE27A)!important;box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important}
.mcx-hero--monuments .vl-chip:last-child{background:linear-gradient(180deg,#FFE27A,#F4B400)!important}

/* — Hall des trophées et profil : seuls les badges gagnés, en couleur ; les chiffres en tuiles de couleur — */
.lbx-badge:not(.eu),.lb-badge:not(.eu){display:none!important}
.lbx-badges:not(:has(.eu)),.lb-badges:not(:has(.eu)){display:none!important}
.lbx-bloc-t:has(+ .lbx-badges:not(:has(.eu))){display:none!important}
.lbx-badge.eu{border-radius:18px!important;color:#fff!important;
  background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(165deg,#4FD68A,#0B6B3F)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13!important}
.lbx-badge.eu:nth-child(4n+2){background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(165deg,#4C8EEC,#153E8C)!important}
.lbx-badge.eu:nth-child(4n+3){background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(165deg,#C98BEE,#5A2590)!important}
.lbx-badge.eu:nth-child(4n+4){background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.28),transparent 55%),linear-gradient(165deg,#FFB25E,#C4561B)!important}
.lbx-badge.eu b{color:#fff!important;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.lbx-badge.eu small{color:rgba(255,255,255,.92)!important}
.lbx-chiffres>div{color:#fff!important;border:0!important;
  background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(165deg,#FFD23E,#C98A00)!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.lbx-chiffres>div:nth-child(2){background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(165deg,#FF8FB1,#B8245B)!important}
.lbx-chiffres>div:nth-child(3){background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(165deg,#5AB0FF,#1E5AA8)!important}
.lbx-chiffres>div:nth-child(4){background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.25),transparent 55%),linear-gradient(165deg,#4FD68A,#0B6B3F)!important}
.lbx-chiffres b{color:#fff!important;text-shadow:0 2px 0 rgba(11,14,19,.35)}
.lbx-chiffres span{color:rgba(255,255,255,.92)!important}
.lbx-ch-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0B0E13}
/* les jeux à découvrir : chacun à sa couleur */
.pf-dec{color:#fff!important;background:radial-gradient(120% 110% at 100% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(165deg,color-mix(in srgb,var(--c) 85%,#fff),color-mix(in srgb,var(--c) 70%,#0B0E13))!important;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13!important}
.pf-dec:hover{transform:translateY(-2px)}
.pf-dec-t b{color:#fff;text-shadow:0 1px 0 rgba(11,14,19,.45)}
.pf-dec-t small{color:rgba(255,255,255,.85)!important}
.pf-dec-em{background:#fff!important;box-shadow:0 0 0 2px #0B0E13}

/* — la fête d'un niveau, d'un titre, d'un badge — */
.pr-fanfare{display:none!important}
.l23-fan{position:fixed;left:50%;top:max(70px,12vh);z-index:9700;pointer-events:none;display:flex;align-items:center;gap:12px;
  padding:12px 22px 12px 12px;border-radius:24px;max-width:min(92vw,520px);isolation:isolate;overflow:hidden;color:#fff;
  background:radial-gradient(120% 90% at 30% 0,color-mix(in srgb,var(--c) 55%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 60%,#0B1430));
  box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #FFCE00,0 0 0 8.5px #0B0E13,0 9px 0 8.5px #0B0E13;
  transform:translateX(-50%);animation:l23FanEntre .55s cubic-bezier(.3,1.5,.5,1) both}
.l23-fan.sort{animation:l23FanSort .4s ease-in forwards}
@keyframes l23FanEntre{from{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.7)}}
@keyframes l23FanSort{to{opacity:0;transform:translateX(-50%) translateY(-20px) scale(.9)}}
.l23-fan-rayons{position:absolute;left:44px;top:50%;width:420px;aspect-ratio:1;z-index:-1;transform:translate(-50%,-50%);opacity:.35;
  background:repeating-conic-gradient(from 0deg,#fff 0 8deg,transparent 8deg 22deg);
  -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 55%);mask-image:radial-gradient(circle,#000 8%,transparent 55%);animation:l23Tourne 14s linear infinite}
.l23-fan-med{flex:none;display:grid;place-items:center;width:64px;height:64px;animation:l23Med 1.4s ease-in-out infinite}
.l23-fan-med svg{display:block;width:64px;height:auto;filter:drop-shadow(0 3px 0 rgba(11,14,19,.35))}
@keyframes l23Med{50%{transform:rotate(-8deg) scale(1.06)}}
.l23-fan-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.l23-fan-t small{align-self:flex-start;padding:2px 9px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.68rem;letter-spacing:.04em;
  text-transform:uppercase;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}
.l23-fan-t b{font-family:var(--display);font-weight:900;font-size:1.35rem;line-height:1.1;text-shadow:0 2px 0 #0B0E13,1.5px 0 #0B0E13,-1.5px 0 #0B0E13}
.l23-fan-t span{font-weight:700;font-size:.82rem;color:rgba(255,255,255,.95);text-shadow:0 1px 0 rgba(11,14,19,.5)}
@media (prefers-reduced-motion:reduce){ .l23-fan,.l23-fan-rayons,.l23-fan-med,.l23-or-rayons,.l23-or-eclats i,.l23-or-reflet,.mcf-or.brille{animation:none!important} }

/* — MétroDrop, conduite : les messages se rangent en haut de la vitre, petits ———— */
.mdx-vue .mdx-sur{top:9%;bottom:auto;padding:0 8px}
.mdx-vue .mdx-alerte{display:flex;align-items:center;gap:7px;max-width:min(380px,86%);padding:4px 11px 4px 9px;border-radius:999px;
  text-align:left;background:rgba(11,14,19,.78);box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 1.5px rgba(255,255,255,.14);
  animation:l23Alerte .28s ease-out backwards}
.mdx-vue .mdx-alerte::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#6FBCEB;box-shadow:0 0 0 1.5px #0B0E13}
.mdx-vue .mdx-alerte--ok::before{background:#3ED07A}
.mdx-vue .mdx-alerte--warn::before{background:#FF9A3D}
.mdx-vue .mdx-alerte--bad::before{background:#E3051C}
.mdx-vue .mdx-alerte b{display:inline;font-size:.72rem;line-height:1.2;color:#FFFFFF;white-space:nowrap}
.mdx-vue .mdx-alerte--ok b{color:#8FE0B4}
.mdx-vue .mdx-alerte--warn b{color:#FFC27A}
.mdx-vue .mdx-alerte--bad b{color:#FF8A93}
.mdx-vue .mdx-alerte span{display:inline;margin:0;font-size:.64rem;line-height:1.2;color:#C9D3DE;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@keyframes l23Alerte{from{opacity:0;translate:0 -6px}}
/* le bandeau de route se tait pendant qu'un message s'affiche */
.mdx-vue:has(.mdx-sur .mdx-alerte) .mdx-route{opacity:0}
@media (max-width:760px){
  .mdx-vue .mdx-alerte span{display:none}
  .mdx-vue .mdx-alerte b{font-size:.66rem}
}
/* — MétroDrop, conduite sur mobile : le tunnel grandit, tout tient sur l'écran — */
@media (max-width:760px){
  .md-conduit .mdx-cab{gap:5px!important}
  .md-conduit .mdx-vue{margin:8px 4px 4px!important}
  .md-conduit .mdx-tb{gap:4px!important}
  .md-conduit .mdx-tb .mdx-cadran{padding:3px 3px 4px!important;border-radius:12px}
  .md-conduit .mdx-tb .mdx-cadran svg{max-height:30px;width:auto!important;margin:0 auto}
  .md-conduit .mdx-tb .mdx-cl{margin-bottom:2px!important;padding:.15em .5em!important;font-size:.42rem!important}
  .md-conduit .mdx-tb .mdx-cadran b{font-size:1rem!important;line-height:1.05}
  .md-conduit .mdx-tb .mdx-cadran i{font-size:.48rem!important}
  .md-conduit .mdx-cadran--lim b.mdx-lim-val{width:2.1em!important;height:2.1em!important;margin:0 auto 1px!important;font-size:.92rem!important}
  .md-conduit .mdx-dist-val{padding:1px 6px!important}
  .md-conduit .mdx-cadran--sig::before{width:40px;height:16px;margin-bottom:2px}
  .md-conduit .mdx-jauges{display:grid!important;grid-template-columns:1fr 1fr 1.6fr;gap:6px!important;margin:0 4px!important;padding:6px 8px 7px!important}
  .md-conduit .mdx-jauge,.md-conduit .mdx-jauge--large{min-width:0!important}
  .md-conduit .mdx-jauge span{margin-bottom:3px;font-size:.42rem!important;letter-spacing:.08em!important}
  .md-conduit .mdx-j{height:9px!important}
  .md-conduit .mdx-sortie{margin-top:0!important}
  .md-conduit .mdx-sortie .btn{min-height:0;padding:.42em 1.1em!important;font-size:.78rem!important}
}

/* — MétroDrop, plateau sur mobile : le badge de cascade sous le plateau, en petit — */
.md-combo.l23-md-combo{left:auto!important;right:8px;translate:0 -50%;z-index:6;
  max-width:52%;overflow:hidden;text-overflow:ellipsis;
  padding:.28em .7em!important;font-size:.66rem!important;letter-spacing:.02em;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13!important;
  animation:l23Combo 1s ease-out forwards!important}
@keyframes l23Combo{0%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1.08)}30%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:none}}

/* — Métro Runner : moins de texte pendant la course ———————————————————————— */
.rn-flottant:not(.gros){display:none!important}
.rn-flottant.rnl-pastille.gros{font-size:.86rem!important;top:15%!important}
.rn-bandeau:not(.gros):not([style*="E3051C"]){display:none!important}
.rn-bandeau{font-size:clamp(.6rem,1.4vw,.78rem)!important}
.rn-bandeau.gros{font-size:clamp(.7rem,1.8vw,.94rem)!important}

/* — Défilé : le bouton pour quitter le plein écran, sur ordinateur aussi ——— */
.dfr-racine .playfield > .l23-dfr-fs{position:absolute;right:8px;top:8px;z-index:30}

/* — Belote : plus d'écran « tournez votre téléphone », la table tient debout ——— */
.bt .mob-tourne{display:none!important}
.bt.l23-port .bt-board{width:440px;height:800px}
.bt.l23-port:not(.mob-plein):not(.blt-plein-css):not(:fullscreen){height:min(calc(100dvh - 118px),calc(100vw * 1.82 + 8px))!important;min-height:0!important}
.bt.l23-port .bt-table3d{left:10px;top:100px;width:420px;height:330px}
.bt.l23-port .bt-rebord{top:338px}
.bt.l23-port .bt-feutre{border-radius:38px}
.bt.l23-port .bt-feutre-logo{transform:scale(.8)}
/* en haut : les points à gauche, l'atout et les boutons à droite */
.bt.l23-port .bt-scores{left:4px!important;top:4px!important;width:auto!important;display:flex;gap:4px;padding:3px!important}
.bt.l23-port .bt-sc-t{display:none!important}
.bt.l23-port .bt-sc{grid-template-columns:auto auto auto!important;grid-template-areas:"tetes tot don"!important;
  margin:0!important;padding:3px 6px 6px 4px!important;column-gap:5px!important}
.bt.l23-port .bt-sc-nom{display:none!important}
.bt.l23-port .bt-sc-tot{font-size:16px!important}
.bt.l23-port .bt-hud-d{right:4px;top:4px;gap:4px}
.bt.l23-port .bt-dots{display:none}
.bt.l23-port .bt-hud .blt-ico-b{width:32px;height:32px;border-radius:10px}
.bt.l23-port .bt-hud .blt-ico-b svg{width:17px;height:17px}
.bt.l23-port .bt-at{height:32px}
/* les trois autres joueurs */
.bt.l23-port .bt-siege--2{left:125px!important;top:48px!important}
.bt.l23-port .bt-siege--1{left:6px!important;top:116px!important;width:92px!important}
.bt.l23-port .bt-siege--3{left:342px!important;top:116px!important;width:92px!important}
/* le pli, plus grand */
.bt.l23-port .bt-slot{width:80px;height:115px;margin:-57px 0 0 -40px}
.bt.l23-port .bt-slot .bt-c{--cw:80px!important}
/* votre place, les messages, le bouton d'annonce : une rangée sous la table */
.bt.l23-port .bt-moi{left:6px!important;top:440px!important;width:150px!important;height:58px!important;
  flex-direction:row!important;justify-content:flex-start!important;gap:8px!important;padding:0 10px!important}
.bt.l23-port .bt-moi .bt-av{width:40px!important;height:44px!important}
.bt.l23-port .bt-moi .blt-chrono{right:-12px;top:-12px}
.bt.l23-port .bt-moi .blt-jetons{bottom:calc(100% + 6px)}
.bt.l23-port .bt-board .blt-annoncer{left:338px!important;right:auto!important;top:438px!important;bottom:auto!important;width:96px!important;height:58px!important;
  flex-direction:column!important;justify-content:center;gap:2px!important;padding:4px!important}
.bt.l23-port .bt-board .blt-annoncer i{width:24px!important;height:24px!important}
.bt.l23-port .bt-board .blt-annoncer b{font-size:12px!important}
.bt.l23-port .bt-toast{left:162px!important;top:auto!important;bottom:302px!important;width:170px!important;max-width:none!important;transform:none!important;
  font-size:10.5px!important;line-height:1.25!important;padding:5px 8px!important}
.bt.l23-port .bt-plaque--pli{display:none!important}
.bt.l23-port .bt-affiche{left:162px!important;top:438px!important;width:170px!important;min-height:0!important;max-height:62px!important}
/* votre main : deux rangées de grandes cartes, bien droites */
.bt.l23-port .bt-main{top:508px!important;left:0!important;width:440px!important;height:292px!important}
.bt.l23-port .bt-main .bt-c{--cw:98px!important;--a:0px!important;--r:0deg!important}
/* les panneaux */
.bt.l23-port .bt-board .blt-enchere{left:100px!important;top:330px!important;width:240px!important}
.bt.l23-port .bt-board .blt-enchere:has(.blt-ench-l){top:300px!important}
.bt.l23-port .bt-board .blt-annonce-p{left:20px!important;top:150px!important;width:400px!important}
.bt.l23-port .bt-prise{left:220px!important;top:300px!important}
.bt.l23-port .bt-explic{left:10px!important;top:100px!important;width:420px!important}
.bt.l23-port .bt-ban{top:300px!important}

/* — Métro King : un tapis épuré ——————————————————————————————————————————
   Les pastilles « Pli », « Demandé », « Mène / Gagne » ne s'affichent qu'avec
   le « i » ; plus de numéros 1 à 4, plus de cases vides dessinées, et le
   cadre doré du gagnant s'en va avec les cartes. */
.mk-jeu:not(.mk7-bulle) .mk-info{display:none!important}
.mk-slot-n{display:none!important}
.mk-slot.vide .mk-slot-lab{visibility:hidden}
.mk-slot.vide .mk-slot-place,.mk-slot.attente .mk-slot-place{box-shadow:none!important;background:none!important}
.mk-slot.parti .mk-slot-place::after,.mk-slot.vide-vol .mk-slot-place::after,.mk-slot.vide .mk-slot-place::after{display:none!important}
.mk-slot.parti .mk-slot-lab,.mk-slot.vide-vol .mk-slot-lab{visibility:hidden}
.l23-mk-bts{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.mk-astuce .l23-mk-non{background:rgba(11,14,19,.35)!important;color:#fff!important;box-shadow:0 0 0 2px #0B0E13!important}

/* — Métro Poker, téléphone debout : la plaque « Vous » au-dessus de la main — */
.mpk3.etroit .mpk3-moi{left:0!important;right:0;transform:none!important;justify-content:center;max-width:none}
.mpk3.etroit .mpk3-plaque.moi{position:absolute!important;right:4px;bottom:calc(100% + 8px);margin:0!important}
.mpk3.etroit .mpk3-main{gap:5px}
/* — Métro Poker, plein écran en paysage : tout tient sur une page ——————————
   La partie gardait 540 px de haut au minimum : sur un téléphone couché,
   le bas débordait. Les actions passent dans une colonne à droite. */
.mpk3.mob-plein,.mpk3:fullscreen{min-height:0!important}
@media (max-height:520px) and (orientation:landscape){
  .mpk3.mob-plein,.mpk3:fullscreen{grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:auto minmax(0,1fr);
    gap:4px 8px;padding:4px 8px 6px}
  .mpk3.mob-plein > .mpk3-barre,.mpk3:fullscreen > .mpk3-barre{grid-column:1/-1;padding:0 2px 2px;gap:6px}
  .mpk3.mob-plein .mpk3-b,.mpk3:fullscreen .mpk3-b{padding:.3em .6em;font-size:.72rem}
  .mpk3.mob-plein > .mpk3-salle,.mpk3:fullscreen > .mpk3-salle{grid-column:1;grid-row:2}
  .mpk3.mob-plein > .mpk3-bas,.mpk3:fullscreen > .mpk3-bas{grid-column:2;grid-row:2;flex-direction:column;flex-wrap:nowrap;
    align-items:stretch;justify-content:center;gap:6px;min-height:0}
  .mpk3.mob-plein .mpk3-bas .mpk5-chrono,.mpk3:fullscreen .mpk3-bas .mpk5-chrono{align-self:center;width:42px;height:42px}
  .mpk3.mob-plein .mpk3-invite,.mpk3:fullscreen .mpk3-invite{flex:none;padding:5px 8px 5px 40px}
  .mpk3.mob-plein .mpk3-invite b,.mpk3:fullscreen .mpk3-invite b{font-size:.8rem!important}
  .mpk3.mob-plein .mpk3-invite span,.mpk3:fullscreen .mpk3-invite span{font-size:.66rem}
  .mpk3.mob-plein .mpk3-actions,.mpk3:fullscreen .mpk3-actions{flex-direction:column;align-items:stretch;margin:0;gap:6px}
  .mpk3.mob-plein .mpk3-actions .mpk3-bt,.mpk3:fullscreen .mpk3-actions .mpk3-bt{flex:none!important;min-height:38px;padding:5px 10px;font-size:.78rem}
  .mpk3.mob-plein .mpk3-bas > *,.mpk3:fullscreen .mpk3-bas > *{flex:none!important}
  .mpk3.mob-plein .mpk3-invite b,.mpk3:fullscreen .mpk3-invite b,
  .mpk3.mob-plein .mpk3-invite span,.mpk3:fullscreen .mpk3-invite span{white-space:normal!important;overflow:visible!important}
  .mpk3.mob-plein .mpk3-invite,.mpk3:fullscreen .mpk3-invite{flex-direction:column!important;align-items:flex-start!important;gap:1px!important}
}
/* @@ fin lot23.css @@ */
/* @@ debut lot25.css @@ */
/* — en ligne : le bouton de la donne suivante n'est plus qu'un compte à rebours — */
.l25-auto{pointer-events:none!important;cursor:default!important}
/* — téléphone : la barre du site fixée en haut — */
@media (max-width:760px), (pointer:coarse) and (max-height:520px){
  header.top{position:fixed!important;left:0;right:0;top:0}
  .shell{padding-top:var(--l25-hdr,56px)}
}
/* — Metro Runner perdu : le tampon suffit, plus de plaque en double dessous — */
.rnr-fin.perdu .rnr-fin-plaque{display:none}
/* — Belote : le nom de la station sur une plaque émaillée de métro — */
.bt-c .bt-c-nom{left:6%;right:6%;top:65.5%;bottom:5%;display:flex;align-items:center;justify-content:center;
  padding:.16em .3em;border-radius:.38em;color:#FFFFFF;background:#153E8C;font-size:.8em;line-height:1.06;
  box-shadow:inset 0 0 0 .13em #153E8C,inset 0 0 0 .23em #FFFFFF,0 0 0 1.2px #0B0E13;-webkit-line-clamp:unset}
.bt-c--atout .bt-c-nom{background:#153E8C}
.blt-c .blt-bas b{padding:3px 5px;border-radius:5px;color:#FFFFFF;background:#153E8C;text-align:center;
  box-shadow:inset 0 0 0 1.5px #153E8C,inset 0 0 0 2.6px #FFFFFF,0 0 0 1.2px #0B0E13}
/* — Métro Poker sur téléphone : un bouton Bonus comme les autres pictogrammes — */
.mpk3.etroit .mpk3-b--eclair{padding:.45em .5em!important;animation:none}
.mpk3.etroit .mpk3-b--eclair span:last-child{display:none!important}
.mpk3.etroit .mpk3-b--eclair:not(:disabled){box-shadow:0 0 0 2px #0B0E13,0 0 0 4px #FFCE00,0 3px 0 4px #0B0E13!important}
.mpk3.etroit .mpk3-barre{flex-wrap:nowrap!important;justify-content:space-between}
/* — téléphone couché : des plaques plus petites — */
.mpk3.mpk3-couche .mpk3-plaque{padding:2px 8px 3px 4px;border-radius:12px;column-gap:5px}
.mpk3.mpk3-couche .mpk3-av{width:24px;height:26px}
.mpk3.mpk3-couche .mpk3-plaque-t>b{font-size:.62rem}
.mpk3.mpk3-couche .mpk3-tk svg{width:14px}
.mpk3.mpk3-couche .mpk3-tk b{font-size:.66rem}
.mpk3.mpk3-couche .mpk3-etat{font-size:.42rem;padding:1px 5px}
.mpk3.mpk3-couche .mpk3-pot{height:24px}
.mpk3.mpk3-couche .mpk3-plaque{max-width:128px}
.mpk3 .mpk3-bonus-bt.l25-bonus-col{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;width:100%;min-height:0;height:42px;padding:4px 10px 4px 5px!important;gap:7px;justify-content:flex-start;margin:0}
.mpk3 .mpk3-bonus-bt.l25-bonus-col .mpk3-bonus-ico{width:32px;height:32px}
.mpk3 .mpk3-bonus-bt.l25-bonus-col .mpk3-bonus-t b{font-size:.92rem}
.mpk3 .mpk3-bonus-bt.l25-bonus-col .mpk3-bonus-t small{font-size:.5rem}
.bt.l23-port .bt-siege--1 .blt-jetons,.bt.l23-port .bt-siege--3 .blt-jetons{left:0!important;right:auto!important;width:92px!important;
  max-width:92px!important;transform:none!important;flex-wrap:wrap!important;justify-content:center!important;gap:3px!important}
.bt.l23-port .bt-board .blt-j{width:27px;height:27px}
/* — Belote : les jetons des adversaires de côté passent à la ligne au lieu de sortir de l'écran — */
.bt-board .bt-siege--1 .blt-jetons,.bt-board .bt-siege--3 .blt-jetons{left:0!important;right:auto!important;width:100%!important;
  transform:none!important;flex-wrap:wrap!important;justify-content:center!important}
/* — Métro King, téléphone couché : tout tient sur l'écran, main comprise — */
@media (orientation:landscape) and (max-height:520px){
  .mk-jeu{gap:4px!important;padding:4px 6px 5px!important;grid-template-rows:auto auto minmax(80px,1fr) auto auto!important;min-height:0!important}
  .mk-jeu .mk-b span,.mk-jeu .mk-leg em{display:none}
  .mk-jeu .mk-hud{gap:4px}
  .mk-jeu .mk-b{padding:.25em;border-radius:9px}
  .mk-jeu .mk-b svg{width:15px;height:15px}
  .mk-jeu .mk-manche{padding:.15em .5em .2em;column-gap:3px}
  .mk-jeu .mk-manche small{display:none}
  .mk-jeu .mk-adv{gap:5px}
  .mk-jeu .mk-siege{grid-template-columns:auto 1fr auto;grid-template-areas:"av t pari" "jet jet jet";padding:3px 5px 4px;column-gap:4px;border-radius:12px}
  .mk-jeu .mk-siege .mk-av{width:22px;height:24px}
  .mk-jeu .mk-siege-t b{font-size:.64rem}
  .mk-jeu .mk-siege-t small{display:none}
  .mk-jeu .mk-fan{display:none}
  .mk-jeu .mk-pari{min-width:22px;height:22px;font-size:.76rem}
  .mk-jeu .mk-moi{padding:2px 8px 2px 4px;gap:6px;min-height:0}
  .mk-jeu .mk-moi .mk-av{width:22px;height:24px}
  .mk-jeu .mk-moi-etat{font-size:.68rem}
  .mk-jeu .mk-main{gap:4px 6px}
}
/* @@ fin lot25.css @@ */
/* @@ debut lot26.css @@ */
/* — le rat du métro : la mascotte des « i » de Metro City — */
.l26-scene{position:fixed;left:0;right:0;bottom:0;height:190px;z-index:9601;overflow:hidden;pointer-events:none}
.l26-rat{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);width:84px;pointer-events:none;display:none}
@media (min-width:761px){ .l26-rat{width:104px;bottom:14px} }
.l26-rat.vu{display:block}
.l26-rat.l26-g{left:4px}
.l26-rat.l26-d{right:4px}
.l26-rat .l26-sens{display:block;width:100%}
.l26-rat .l26-sens svg{display:block;width:100%;height:auto;overflow:visible}
.l26-rat.l26-d .l26-sens{transform:scaleX(-1)}
.l26-rat.l26-g.sort .l26-sens{transform:scaleX(-1)}
.l26-rat.l26-d.sort .l26-sens{transform:none}
.l26-rat svg g,.l26-rat svg path{transform-box:view-box}
.l26-rat .r-tout{transform-origin:58px 144px}
.l26-rat .r-tete{transform-origin:60px 88px}
.l26-rat .r-bras{transform-origin:77px 100px}
.l26-rat .r-lampe{transform-origin:41px 100px}
.l26-rat .r-pied-g{transform-origin:47px 124px}
.l26-rat .r-pied-d{transform-origin:68px 124px}
.l26-rat .r-queue{transform-origin:38px 118px}
.l26-rat .r-yeux{transform-origin:64px 59px;animation:l26Cligne 3.4s infinite}
.l26-rat .r-faisceau{animation:l26Lampe 1.2s ease-in-out infinite alternate}
/* l'arrivée et le départ, en courant */
.l26-rat.l26-g.entre{animation:l26EntreG .7s cubic-bezier(.25,.7,.35,1) both}
.l26-rat.l26-d.entre{animation:l26EntreD .7s cubic-bezier(.25,.7,.35,1) both}
.l26-rat.l26-g.sort{animation:l26SortG .62s ease-in both}
.l26-rat.l26-d.sort{animation:l26SortD .62s ease-in both}
@keyframes l26EntreG{from{transform:translateX(-150%)}to{transform:none}}
@keyframes l26EntreD{from{transform:translateX(150%)}to{transform:none}}
@keyframes l26SortG{from{transform:none}to{transform:translateX(-160%)}}
@keyframes l26SortD{from{transform:none}to{transform:translateX(160%)}}
.l26-rat.court .r-tout{animation:l26Bond .24s ease-in-out infinite alternate}
.l26-rat.court .r-tete{transform:rotate(5deg)}
.l26-rat.court .r-pied-g{animation:l26PasA .24s ease-in-out infinite alternate}
.l26-rat.court .r-pied-d{animation:l26PasB .24s ease-in-out infinite alternate}
.l26-rat.court .r-bras{animation:l26BrasC .24s ease-in-out infinite alternate}
.l26-rat.court .r-lampe{animation:l26LampeC .24s ease-in-out infinite alternate}
.l26-rat.court .r-queue{animation:l26QueueC .24s ease-in-out infinite alternate}
@keyframes l26Bond{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes l26PasA{from{transform:rotate(-30deg)}to{transform:rotate(28deg)}}
@keyframes l26PasB{from{transform:rotate(28deg)}to{transform:rotate(-30deg)}}
@keyframes l26BrasC{from{transform:rotate(72deg)}to{transform:rotate(108deg)}}
@keyframes l26LampeC{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes l26QueueC{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
/* coucou en arrivant, au revoir en partant */
.l26-rat.salut .r-bras,.l26-rat.aurevoir .r-bras{animation:l26Salut .3s ease-in-out 6 alternate}
.l26-rat.salut .r-tout{animation:l26Hop .55s cubic-bezier(.3,1.6,.5,1) 1}
.l26-rat.salut .r-tete,.l26-rat.aurevoir .r-tete{animation:l26Tete .45s ease-in-out 4 alternate}
.l26-rat.aurevoir .r-queue{animation:l26Queue .45s ease-in-out infinite alternate}
@keyframes l26Salut{from{transform:rotate(-18deg)}to{transform:rotate(16deg)}}
@keyframes l26Hop{0%{transform:none}40%{transform:translateY(-12px)}100%{transform:none}}
@keyframes l26Tete{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
/* il attend à côté de sa bulle : il respire, cligne, balance la queue, refait coucou */
.l26-rat.attend .r-tout{animation:l26Respire 2.2s ease-in-out infinite alternate}
.l26-rat.attend .r-queue{animation:l26Queue 1.8s ease-in-out infinite alternate}
.l26-rat.attend .r-bras{animation:l26Coucou 3.4s ease-in-out infinite}
.l26-rat.attend .r-tete{animation:l26Penche 4.2s ease-in-out infinite}
.l26-rat.attend .r-lampe{animation:l26Balaye 3s ease-in-out infinite alternate}
@keyframes l26Respire{from{transform:none}to{transform:translateY(-1.5px) scale(1.015)}}
@keyframes l26Queue{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes l26Coucou{0%,58%,100%{transform:rotate(0)}64%{transform:rotate(-18deg)}70%{transform:rotate(14deg)}76%{transform:rotate(-16deg)}82%{transform:rotate(10deg)}88%{transform:rotate(0)}}
@keyframes l26Penche{0%,100%{transform:rotate(0)}30%{transform:rotate(-6deg)}62%{transform:rotate(4deg)}}
@keyframes l26Balaye{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@keyframes l26Cligne{0%,91%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes l26Lampe{from{opacity:.4}to{opacity:.8}}
/* la bulle d'explication, à côté du rat */
.mcf-pop.l26-rat-pop{left:auto!important;top:auto!important;right:auto!important;
  bottom:calc(env(safe-area-inset-bottom,0px) + 80px)!important;width:min(330px,calc(100vw - 72px))!important}
.mcf-pop.l26-rat-pop.l26-g{left:52px!important;transform-origin:0 100%}
.mcf-pop.l26-rat-pop.l26-d{right:52px!important;transform-origin:100% 100%}
@media (min-width:761px){
  .mcf-pop.l26-rat-pop{bottom:106px!important}
  .mcf-pop.l26-rat-pop.l26-g{left:70px!important}
  .mcf-pop.l26-rat-pop.l26-d{right:70px!important}
}
.mcf-pop.l26-rat-pop::before{display:none}
.mcf-pop.l26-rat-pop::after{content:"";position:absolute;bottom:-9px;width:18px;height:18px;transform:rotate(45deg);
  background:#153E8C;box-shadow:2.5px 2.5px 0 0 #0B0E13}
.mcf-pop.l26-rat-pop.l26-g::after{left:16px}
.mcf-pop.l26-rat-pop.l26-d::after{right:16px}
.mcf-pop.l26-rat-pop.l26-attend{animation:l26Bulle .36s cubic-bezier(.3,1.5,.5,1) .66s both}
.mcf-pop.l26-rat-pop.l26-vite{animation:l26Bulle .3s cubic-bezier(.3,1.5,.5,1) both}
.mcf-pop.l26-rat-pop.sort{animation:mcfPopSort .18s ease-in forwards!important}
@keyframes l26Bulle{from{opacity:0;transform:translateY(14px) scale(.55)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .l26-rat,.l26-rat *{animation:none!important} .mcf-pop.l26-rat-pop{animation:none!important} }
/* @@ fin lot26.css @@ */
/* @@ debut lot27.css @@ */
/* — salon en ligne : pendant l'entrée à une table, la liste ne se clique plus — */
.cs.cs15-entre .cs15-pub,.cs.cs15-entre .cs-table-l{pointer-events:none;opacity:.55;transition:opacity .2s}
/* @@ fin lot27.css @@ */
/* @@ debut lot28.css @@ */
/* — Métro Solitaire : le conseil ne mord plus sur le cadre doré du titre — */
.sor > .sol13-paysage{margin:26px auto 6px!important}

/* — Métro Poker : la table ne bouge plus quand un message ou un bouton arrive.
     La rangée du bas a désormais une hauteur fixe : « Jetez une carte », le chrono
     ou les boutons de mise s'y logent sans pousser la table. — */
.mpk3 > .mpk3-barre{height:50px;box-sizing:border-box;align-items:center}
.mpk3{grid-template-rows:auto minmax(0,1fr) 58px}
.mpk3 > .mpk3-bas{height:100%;min-height:0;align-content:center}
.mpk3.etroit{grid-template-rows:auto minmax(0,1fr) 142px}
.mpk3.etroit > .mpk3-bas{align-content:flex-end}
/* — Métro Poker, téléphone couché : plus fin, rien ne se chevauche — */
.mpk3.mpk3-couche > .mpk3-barre{height:36px;gap:5px;padding:0 2px}
.mpk3.mpk3-couche .mpk3-b{padding:.28em .45em!important;font-size:.7rem;border-radius:10px}
.mpk3.mpk3-couche .mpk3-b span:last-child{display:none}
.mpk3.mpk3-couche .mpk3-b svg{width:16px;height:16px}
.mpk3.mpk3-couche .mpk3-manche{transform:scale(.8);transform-origin:0 50%;margin-right:-14px}
.mpk3.mpk3-couche .mpk3-lignes .mpk3-pas,.mpk3.mpk3-couche .mpk3-lignes i{transform:scale(.82)}
.mpk3.mpk3-couche .mpk3-plaque.moi{margin-bottom:2px}
.mpk3.mpk3-couche .mpk3-moi{gap:6px}
.mpk3.mpk3-couche .mpk3-main{gap:5px}
@media (orientation:landscape) and (max-height:520px){
  .mpk3.mob-plein,.mpk3:fullscreen{grid-template-columns:minmax(0,1fr) 150px!important;grid-template-rows:auto minmax(0,1fr)!important}
  .mpk3.mob-plein > .mpk3-bas,.mpk3:fullscreen > .mpk3-bas{height:auto}
  .mpk3.mob-plein .mpk3-actions .mpk3-bt,.mpk3:fullscreen .mpk3-actions .mpk3-bt{min-height:34px!important;font-size:.72rem!important;padding:4px 8px!important}
  .mpk3 .mpk3-bonus-bt.l25-bonus-col{height:36px}
  .mpk3 .mpk3-bonus-bt.l25-bonus-col .mpk3-bonus-ico{width:26px;height:26px;padding:5px}
  .mpk3.mob-plein .mpk3-invite,.mpk3:fullscreen .mpk3-invite{padding:4px 7px 4px 34px!important}
  .mpk3.mob-plein .mpk3-invite::before,.mpk3:fullscreen .mpk3-invite::before{width:22px!important;height:22px!important;left:6px!important;margin-top:-11px!important}
}

/* — Métro King : la table garde sa taille quoi qu'il arrive.
     « À vous de jouer » et le chrono ne grandissent plus la rangée « Vous » ;
     les jetons de pari ont leur place réservée sous chaque adversaire ; la
     rangée de la main a une hauteur fixe, même quand il reste peu de cartes. — */
.mk-jeu{grid-template-rows:auto auto minmax(0,1fr) auto max(96px,27%)!important}
@media (max-width:699px){ .mk-jeu{grid-template-rows:auto auto minmax(0,1fr) auto max(96px,30%)!important} }
.mk-jeu > .mk-main{min-height:0;align-content:center}
.mk-jeu > .mk-moi{position:relative;box-sizing:border-box;height:58px;min-height:0;padding-right:100px}
.mk-jeu > .mk-moi > .mk-chrono{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:80px;gap:3px}
.mk-jeu > .mk-moi > .mk-chrono .mk-chrono-s{font-size:1.45rem}
.mk-jeu .mk-siege .mk-jetons{min-height:12px}
@media (max-width:760px){
  .mk-jeu > .mk-moi{height:44px;padding-right:62px}
  .mk-jeu > .mk-moi > .mk-chrono{right:6px;width:52px;gap:2px}
  .mk-jeu > .mk-moi > .mk-chrono .mk-chrono-s{font-size:1.05rem}
  .mk-jeu > .mk-moi > .mk-chrono .mk-chrono-r{height:6px}
  .mk-jeu .mk-siege .mk-jetons{min-height:14px}
}
@media (orientation:landscape) and (max-height:520px){
  .mk-jeu > .mk-moi{height:34px;padding-right:96px}
  .mk-jeu > .mk-moi > .mk-chrono{flex-direction:row;width:86px;gap:5px;right:5px}
  .mk-jeu > .mk-moi > .mk-chrono .mk-chrono-s{font-size:.95rem}
  .mk-jeu > .mk-moi > .mk-chrono .mk-chrono-r{height:6px;flex:1}
  .mk-jeu .mk-siege .mk-jetons{min-height:14px}
}
/* — Métro King : le filet du Dératiseur s'en va avec les cartes du pli — */
.mk-slot.capture.parti .mk-slot-place::before,.mk-slot.capture.vide .mk-slot-place::before,
.mk-slot.capture.vide-vol .mk-slot-place::before{display:none!important}
/* @@ fin lot28.css @@ */
/* @@ debut lot31.css @@ */
/* — l'accueil : plus de « i » dans la rangée des boutons — */
.hero-cta > .hero-info-b{display:none!important}

/* ===== le pigeon du métro, sur le plan d'une ligne ===== */
.l31-pig{position:absolute;z-index:30;cursor:pointer;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 4px 0 rgba(0,0,0,.22))}
.l31-pig:focus-visible{outline:3px solid #FFCE00;outline-offset:2px;border-radius:12px}
.l31-pig .l31-sens{transition:transform .18s ease}
.l31-pig svg{display:block;width:100%;height:auto;overflow:visible}
.l31-pig svg g,.l31-pig svg path{transform-box:view-box}
.l31-pig .p-tout{transform-origin:60px 130px}
.l31-pig .p-tete{transform-origin:60px 64px}
.l31-pig .p-yeux{transform-origin:60px 40px;animation:l26Cligne 3.8s infinite}
.l31-pig .p-bec-b{transform-origin:60px 52px}
.l31-pig .p-aile-g{transform-origin:34px 74px}
.l31-pig .p-aile-d{transform-origin:86px 74px}
.l31-pig .p-pattes{transform-origin:60px 112px}
.l31-pig .p-carte{transform-origin:90px 84px}
/* en vol : les ailes battent, les pattes se replient */
.l31-pig.vole .p-aile-g{animation:l31AileG .16s ease-in-out infinite alternate}
.l31-pig.vole .p-aile-d{animation:l31AileD .16s ease-in-out infinite alternate}
.l31-pig.vole .p-pattes{transform:scaleY(.45)}
.l31-pig.vole .p-tete{transform:rotate(6deg)}
.l31-pig.vole .p-ombre{opacity:0}
@keyframes l31AileG{from{transform:rotate(-38deg)}to{transform:rotate(26deg)}}
@keyframes l31AileD{from{transform:rotate(36deg)}to{transform:rotate(-24deg)}}
/* il se pose, il attend */
.l31-pig.pose .p-tout{animation:l31Pose .34s cubic-bezier(.3,1.6,.5,1)}
@keyframes l31Pose{0%{transform:scale(1.04,.86)}100%{transform:none}}
.l31-pig.repos .p-tout{animation:l31Sautille 5.2s ease-in-out infinite}
.l31-pig.repos .p-tete{animation:l31Tete 3.4s ease-in-out infinite}
.l31-pig.repos .p-carte{animation:l31Carte 4.6s ease-in-out infinite}
@keyframes l31Sautille{0%,82%,100%{transform:none}86%{transform:translateY(-7px)}90%{transform:none}93%{transform:translateY(-4px)}96%{transform:none}}
@keyframes l31Tete{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}55%{transform:rotate(5deg) translateY(1px)}}
@keyframes l31Carte{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
/* il parle */
.l31-pig.parle .p-bec-b{animation:l31Bec .17s ease-in-out infinite alternate}
.l31-pig.parle .p-tete{animation:l31Hoche .5s ease-in-out infinite alternate}
.l31-pig.parle .p-aile-g{animation:l31Geste 1.1s ease-in-out infinite alternate}
@keyframes l31Bec{from{transform:none}to{transform:translateY(3px) scaleY(1.5)}}
@keyframes l31Hoche{from{transform:rotate(-3deg)}to{transform:rotate(3deg) translateY(1px)}}
@keyframes l31Geste{from{transform:rotate(0)}to{transform:rotate(-24deg)}}
/* le monument qu'il porte, et celui qu'il dépose */
.l31-colis{position:absolute;left:50%;top:86%;width:42%;aspect-ratio:1;transform:translateX(-50%) rotate(-6deg);display:grid;place-items:center;
  border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;animation:l31Balance .5s ease-in-out infinite alternate}
.l31-colis svg{width:80%;height:auto}
@keyframes l31Balance{from{transform:translateX(-50%) rotate(-8deg)}to{transform:translateX(-50%) rotate(8deg)}}
.ls-monu.l31-prise{animation:l31Prise .6s ease}
@keyframes l31Prise{30%{transform:translateY(-8px) scale(1.04);box-shadow:0 0 0 3px #0B0E13,0 0 0 7px #FFCE00}}
.l31-pin{position:absolute;z-index:20;width:34px;height:34px;margin:-46px 0 0 -17px;pointer-events:none}
.l31-pin-i{display:grid;place-items:center;width:100%;height:100%;border-radius:11px;background:#FFFFFF;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}
.l31-pin-i svg{width:76%;height:auto}
.l31-pin::after{content:"";position:absolute;left:50%;bottom:-9px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);
  background:#FFFFFF;box-shadow:2.5px 2.5px 0 0 #0B0E13}
.l31-pin.pop{animation:l31Pin .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes l31Pin{0%{transform:translateY(-14px) scale(.3);opacity:0}100%{transform:none;opacity:1}}
@media (max-width:760px){ .l31-pin{width:28px;height:28px;margin:-38px 0 0 -14px} }
/* sa bulle : une plaque émaillée qui parle */
.l31-bulle{position:absolute;z-index:31;padding:12px 14px 12px;border-radius:16px;color:#FFFFFF;background:#153E8C;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px rgba(255,255,255,.9),0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13,0 16px 30px rgba(0,0,0,.35);
  animation:l31Bulle .32s cubic-bezier(.3,1.5,.5,1) both;cursor:pointer}
.l31-bulle.sort{animation:mcfPopSort .18s ease-in forwards}
@keyframes l31Bulle{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.l31-bulle.l31-vers-d{transform-origin:100% 80%}
.l31-bulle.l31-vers-g{transform-origin:0 80%}
.l31-bulle::after{content:"";position:absolute;bottom:22px;width:14px;height:14px;background:#153E8C;transform:rotate(45deg)}
.l31-bulle.l31-vers-d::after{right:-7px;box-shadow:2.5px -2.5px 0 0 #0B0E13}
.l31-bulle.l31-vers-g::after{left:-7px;box-shadow:-2.5px 2.5px 0 0 #0B0E13}
.l31-bulle.l31-vers-b{transform-origin:var(--qx) 100%}
.l31-bulle.l31-vers-h{transform-origin:var(--qx) 0}
.l31-bulle.l31-vers-b::after{bottom:-7px;left:calc(var(--qx) - 7px);box-shadow:2.5px 2.5px 0 0 #0B0E13}
.l31-bulle.l31-vers-h::after{top:-7px;bottom:auto;left:calc(var(--qx) - 7px);box-shadow:-2.5px -2.5px 0 0 #0B0E13}
.l31-bulle-t{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-family:var(--display);font-weight:900;font-size:1rem;line-height:1.15;color:#FFCE00}
.l31-bulle-past{display:inline-grid;place-items:center;flex:none;min-width:24px;height:24px;padding:0 4px;border-radius:50%;font-style:normal;font-size:.78rem;
  box-shadow:0 0 0 2px #0B0E13}
.l31-bulle p{margin:0 0 5px;font-size:.86rem;line-height:1.42;color:#EAF2FF}
.l31-bulle p:last-of-type{margin-bottom:0}
.l31-bulle small{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;font-weight:800;font-size:.7rem;color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 2px #0B0E13}

/* ===== le rat du métro, à l'accueil ===== */
.l31-i{display:inline-grid;place-items:center;vertical-align:middle;width:28px;height:28px;margin:10px 0 0 8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:1rem;line-height:1;color:#0B0E13;
  background:linear-gradient(180deg,#FFE680,#FFC21A);box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .15s}
.l31-i:hover{transform:translateY(-2px) rotate(-8deg)}
.l31-i.on{background:linear-gradient(180deg,#7CC4FF,#2B62C4);color:#fff}
.rx > .l31-zone{position:absolute!important;left:auto;right:14px;bottom:0;z-index:6!important;width:96px;height:124px;pointer-events:none}
.l31-trappe{position:absolute;left:50%;bottom:6px;width:76px;height:18px;margin-left:-38px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 35%,#05070A 55%,#232A33);box-shadow:0 0 0 3px #0B0E13;
  transform:scaleX(0);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
/* le couvercle en fonte, gravé « RATP », glisse sur le côté */
.l31-trappe::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;
  background:repeating-linear-gradient(90deg,#6B7480 0 5px,#545C67 5px 8px);box-shadow:0 0 0 2.5px #0B0E13,inset 0 2px 0 rgba(255,255,255,.25);
  transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.l31-trappe.ouvre{transform:scaleX(1)}
.l31-trappe.ouvre::after{transform:translateX(-78%) translateY(3px)}
.l31-trappe.ferme::after{transform:none}
.l31-trappe.ferme{transform:scaleX(0);transition-delay:.25s}
.l31-rat{position:absolute;left:8px;right:8px;bottom:10px;transform:translateY(120%);transition:transform .5s cubic-bezier(.3,1.4,.5,1);clip-path:inset(-60px -40px 0 -40px)}
.l31-rat svg{display:block;width:100%;height:auto;overflow:visible}
.l31-rat svg g,.l31-rat svg path{transform-box:view-box}
.l31-rat .r-tout{transform-origin:58px 144px}
.l31-rat .r-tete{transform-origin:60px 88px}
.l31-rat .r-bras{transform-origin:77px 100px}
.l31-rat .r-queue{transform-origin:38px 118px}
.l31-rat .r-yeux{transform-origin:64px 59px;animation:l26Cligne 3.4s infinite}
.l31-rat .r-faisceau{animation:l26Lampe 1.2s ease-in-out infinite alternate}
.l31-rat .r-ombre,.l31-rat .r-pied-g,.l31-rat .r-pied-d{opacity:0}
.l31-rat.monte,.l31-rat.salut,.l31-rat.attend,.l31-rat.aurevoir{transform:translateY(0)}
.l31-rat.descend{transform:translateY(130%);transition:transform .35s ease-in}
.l31-rat.salut .r-bras,.l31-rat.aurevoir .r-bras{animation:l26Salut .3s ease-in-out 6 alternate}
.l31-rat.salut .r-tout{animation:l26Hop .55s cubic-bezier(.3,1.6,.5,1) 1}
.l31-rat.attend .r-tout{animation:l26Respire 2.2s ease-in-out infinite alternate}
.l31-rat.attend .r-queue{animation:l26Queue 1.8s ease-in-out infinite alternate}
.l31-rat.attend .r-bras{animation:l26Coucou 3.4s ease-in-out infinite}
.l31-rat.attend .r-tete{animation:l26Penche 4.2s ease-in-out infinite}
/* la plaque émaillée de l'explication, posée sur le quai à côté du rat */
.rx > .l31-rx-bulle{position:absolute!important;left:14px;right:118px;bottom:18px;z-index:7!important;padding:11px 14px 12px;border-radius:12px;color:#FFFFFF;background:#153E8C;cursor:pointer;
  box-shadow:inset 0 0 0 2px #153E8C,inset 0 0 0 3.5px #FFFFFF,0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;
  animation:l31Plaque .4s cubic-bezier(.3,1.5,.5,1) .55s both}
.l31-rx-bulle::before,.l31-rx-bulle::after{content:"";position:absolute;top:7px;width:6px;height:6px;border-radius:50%;background:#D7DEE9;box-shadow:0 0 0 1.5px #0B0E13}
.l31-rx-bulle::before{left:7px}.l31-rx-bulle::after{right:7px}
.l31-rx-bulle b{display:block;margin:0 0 4px;font-family:var(--display);font-weight:900;font-size:.92rem;color:#FFCE00}
.l31-rx-bulle p{margin:0;font-size:.82rem;line-height:1.42;color:#EAF2FF}
.l31-rx-bulle.sort{animation:mcfPopSort .2s ease-in forwards}
@keyframes l31Plaque{from{opacity:0;transform:translateX(30px) scale(.7) rotate(4deg)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .l31-zone{width:78px;height:100px;right:6px}
  .l31-rx-bulle{left:10px;right:86px;bottom:12px;padding:9px 11px 10px}
  .l31-rx-bulle p{font-size:.76rem}
}
@media (prefers-reduced-motion:reduce){ .l31-pig *,.l31-rat *,.l31-bulle,.l31-rx-bulle,.l31-colis,.l31-pin{animation:none!important} }
/* @@ fin lot31.css @@ */
/* @@ debut lot32.css @@ */
/* — Belote en ligne : le bandeau du retour à la table — */
html.mp-turbo .bt::before{content:"Retour à la table…";position:absolute;left:50%;top:10px;z-index:60;transform:translateX(-50%);
  padding:6px 14px;border-radius:999px;font-family:var(--display);font-weight:900;font-size:.8rem;color:#0B0E13;background:#FFCE00;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;pointer-events:none}

/* — Belote debout : les points à gauche, l'atout et les boutons à droite, sans se toucher — */
.bt.l23-port .bt-hud .blt-ico-b--ann{display:none!important}
.bt.l23-port .bt-hud .blt-ico-b{width:29px!important;height:29px!important;border-radius:9px!important}
.bt.l23-port .bt-hud .blt-ico-b svg{width:16px!important;height:16px!important}
.bt.l23-port .bt-hud-d{gap:3px!important}
.bt.l23-port .bt-at{height:29px!important;padding:0 4px!important;gap:0!important}
.bt.l23-port .bt-at small{display:none!important}
.bt.l23-port .bt-at i{width:23px!important;height:23px!important;font-size:12px!important}
.bt.l23-port .bt-scores{gap:3px!important}
.bt.l23-port .bt-sc{column-gap:3px!important;padding:3px 5px 6px 3px!important}
.bt.l23-port .bt-sc-tetes i{width:16px!important;height:18px!important}
.bt.l23-port .bt-sc-tot{font-size:14px!important}
.bt.l23-port .bt-sc-don{font-size:7.5px!important}

/* — Métro King, téléphone : le bilan garde ses sept colonnes, primes comprises — */
@media (max-width:760px){
  .mk-bil-l{grid-template-columns:minmax(0,1.2fr) repeat(5,minmax(0,.56fr)) minmax(0,.74fr)!important;gap:3px!important;padding:5px 5px!important;font-size:.6rem!important}
  .mk-bil-l > :nth-child(5),.mk-bil-l > :nth-child(6){display:block!important}
  .mk-bil-l--t span{font-size:.5rem;padding:3px 1px}
  .mk-bil-l .mk-pos,.mk-bil-l .mk-neg{padding:1px 2px!important;font-size:.58rem}
  .mk-bil-l .mk-bil-tot{padding:2px 3px!important}
  .mk-bil-l .mk-bil-nom b{font-size:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mk-bil-l .mk-bil-av{display:none}
}

/* — Métro Poker, téléphone couché : le centre sur une seule rangée, cartes plus grandes — */
.mpk3.mpk3-couche .mpk3-centre{display:grid!important;grid-template-columns:auto auto;grid-template-areas:"pot pot" "lig bon";
  align-items:center;justify-items:center;column-gap:calc(var(--cc)*.3);row-gap:6px}
.mpk3.mpk3-couche .mpk3-pot{grid-area:pot}
.mpk3.mpk3-couche .mpk3-ligne-c{grid-area:lig;position:relative}
.mpk3.mpk3-couche .mpk3-rangee--b{grid-area:bon}
.mpk3.mpk3-couche .mpk3-sabots{position:absolute;right:100%;top:0;margin-right:5px;width:calc(var(--cc)*.48);gap:3px}
.mpk3.mpk3-couche .mpk3-corbeille{position:absolute;right:100%;bottom:0;margin-right:5px;width:calc(var(--cc)*.48)}
.mpk3.mpk3-couche .mpk3-corbeille small{display:none}
/* @@ fin lot32.css @@ */
/* @@ debut lot33.css @@ */
/* ————————— Débutant / Avancé : le rat qui déplie les règles ————————— */
.l33-rf{--rw:72px;padding:calc(env(safe-area-inset-top,0px) + 84px) 16px 16px}
@media (min-width:761px){ .l33-rf{--rw:84px;padding-top:110px} }
/* rat posé sur la feuille une fois le rouleau parti */
.l33-rf .px-regles{max-height:calc(100vh - 104px - env(safe-area-inset-top,0px));max-height:calc(100dvh - 104px - env(safe-area-inset-top,0px));
  opacity:1!important;transform:none!important;clip-path:inset(-14px -14px 100% -14px round 26px);
  transition:clip-path .62s cubic-bezier(.4,.1,.3,1.12)}
.l33-rf.deroule .px-regles{clip-path:inset(-14px -14px 0 -14px round 26px)}
.l33-rf.pose .px-regles{clip-path:inset(-24px -24px -110px -24px round 30px);transition:none}
.l33-rf.enroule .px-regles{clip-path:inset(-14px -14px 100% -14px round 26px);transition:clip-path .42s cubic-bezier(.5,0,.75,0)}
.l33-rf .px-regles-l li{animation:none;opacity:1}
.l33-rf.sort .px-regles{opacity:0!important}
/* le rouleau des règles, à la couleur du jeu */
.l33-rouleau{position:fixed;z-index:2;left:calc(var(--lx) - 10px);top:calc(var(--ly) - 13px);width:calc(var(--lw) + 20px);height:26px;pointer-events:none;
  transition:transform .62s cubic-bezier(.4,.1,.3,1.12),opacity .2s}
.l33-rf.deroule .l33-rouleau{transform:translateY(var(--lh))}
.l33-rf.pose .l33-rouleau{opacity:0;transition:opacity .25s}
.l33-rf.enroule .l33-rouleau{opacity:1;transform:none;transition:transform .42s cubic-bezier(.5,0,.75,0),opacity .08s}
.l33-rouleau i{position:absolute;inset:0;border-radius:13px;
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(11,14,19,.14) 5px 7px),
    linear-gradient(180deg,color-mix(in srgb,var(--g) 45%,#fff),var(--g) 50%,color-mix(in srgb,var(--g) 70%,#000));
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 0 2.5px #0B0E13;animation:l33RouleauArrive .42s .1s cubic-bezier(.3,1.5,.5,1) both}
.l33-rouleau i::before,.l33-rouleau i::after{content:"";position:absolute;top:-4px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,#0B0E13 0 2px,#FFF8E6 2px 5px,var(--g) 5px 8px,#FFF8E6 8px 10.5px,var(--g) 10.5px 13px,#FFF8E6 13px 15px,var(--g) 15px);
  box-shadow:0 0 0 2.5px #0B0E13}
.l33-rouleau i::before{left:-12px}
.l33-rouleau i::after{right:-12px}
.l33-rf.deroule .l33-rouleau i,.l33-rf.enroule .l33-rouleau i{animation:l33RouleauTourne .16s linear infinite}
@keyframes l33RouleauArrive{from{opacity:0;transform:translateY(-70px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes l33RouleauTourne{from{background-position:0 0,0 0}to{background-position:0 7px,0 0}}
/* le rat, debout sur le rouleau, au bout de sa corde */
.l33-rr{position:fixed;z-index:3;width:var(--rw);pointer-events:none;
  left:calc(var(--lx) + var(--lw) - var(--rw) - 18px);top:calc(var(--ly) - 10px - var(--rw) * 1.043)}
.l33-rr{transition:top .22s cubic-bezier(.3,1.6,.5,1)}
.l33-rf.pose .l33-rr{top:calc(var(--ly) + 2px - var(--rw) * 1.043)}
.l33-rr-c{position:relative}
.l33-rr-c svg{display:block;width:100%;height:auto;overflow:visible}
.l33-rr svg g,.l33-rr svg path{transform-box:view-box}
.l33-rr .r-tout{transform-origin:58px 144px}
.l33-rr .r-tete{transform-origin:60px 88px}
.l33-rr .r-bras{transform-origin:77px 100px}
.l33-rr .r-lampe{transform-origin:41px 100px}
.l33-rr .r-queue{transform-origin:38px 118px}
.l33-rr .r-pied-d{transform-origin:68px 124px}
.l33-rr .r-yeux{transform-origin:64px 59px;animation:l26Cligne 3.4s infinite}
.l33-rr .r-faisceau{animation:l26Lampe 1.2s ease-in-out infinite alternate}
.l33-corde{position:absolute;left:calc(91.4% - 2px);bottom:48%;width:4px;height:130vh;border-radius:2px;
  background:repeating-linear-gradient(180deg,#E2BE78 0 6px,#B98F45 6px 9px);box-shadow:0 0 0 1.5px #0B0E13;transition:transform .45s ease-in}
.l33-rf.pose .l33-corde{transform:translateY(-140vh)}
.l33-rf.ferme .l33-corde{transform:none;transition:transform .3s ease-out}
.l33-rr.descend{animation:l33Descend .62s cubic-bezier(.3,.7,.4,1.08) both}
.l33-rr.descend .r-tout{transform-origin:110px 75px;animation:l33Pendule .31s ease-in-out infinite alternate}
.l33-rr.descend .r-queue{animation:l26Queue .3s ease-in-out infinite alternate}
.l33-rr.pousse .r-tout{animation:l33Pousse .36s ease-out both}
.l33-rr.pousse .r-pied-d{animation:l33Coup .3s .06s ease-out both}
.l33-rr.salut .r-bras,.l33-rr.aurevoir .r-bras{animation:l26Salut .3s ease-in-out 6 alternate}
.l33-rr.salut .r-tout{animation:l26Hop .55s cubic-bezier(.3,1.6,.5,1) 1}
.l33-rr.attend .r-tout{animation:l26Respire 2.2s ease-in-out infinite alternate}
.l33-rr.attend .r-queue{animation:l26Queue 1.8s ease-in-out infinite alternate}
.l33-rr.attend .r-bras{animation:l26Coucou 3.4s ease-in-out infinite}
.l33-rr.attend .r-tete{animation:l26Penche 4.2s ease-in-out infinite}
.l33-rr.monte{transform:translateY(calc(-1 * var(--ly) - 170px));transition:transform .42s cubic-bezier(.55,0,.8,.2)}
@keyframes l33Descend{from{transform:translateY(calc(-1 * var(--ly) - 150px))}to{transform:none}}
@keyframes l33Pendule{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes l33Pousse{0%{transform:none}40%{transform:rotate(-7deg) translateX(-3px)}100%{transform:none}}
@keyframes l33Coup{0%{transform:none}45%{transform:rotate(-38deg)}100%{transform:none}}
.l33-calme .l33-corde,.l33-calme .l33-rouleau{display:none}

/* ————————— Couleurs des lignes : le chat du métro ————————— */
.l33-scene{position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none;border-radius:inherit}
.l33-chat{position:absolute;left:0;top:0;width:78px;will-change:transform}
@media (min-width:761px){ .l33-chat{width:104px} }
.l33-chat-s svg{display:block;width:100%;height:auto;overflow:visible}
.l33-chat.droite .l33-chat-s{transform:scaleX(-1)}
.l33-chat svg g,.l33-chat svg path{transform-box:view-box}
.l33-chat .c-tout{transform-origin:60px 166px}
.l33-chat .c-jambe-g{transform-origin:47px 138px}
.l33-chat .c-jambe-d{transform-origin:72px 138px}
.l33-chat .c-queue{transform-origin:92px 128px}
.l33-chat .c-bras-d{transform-origin:84px 77px}
.l33-chat .c-tete{transform-origin:60px 74px}
.l33-chat .c-yeux{transform-origin:60px 42px;animation:l33Cligne 3.6s infinite}
.l33-chat.court .c-jambe-g{animation:l33PasA .19s ease-in-out infinite alternate}
.l33-chat.court .c-jambe-d{animation:l33PasB .19s ease-in-out infinite alternate}
.l33-chat.court .c-tout{animation:l33Trot .19s ease-in-out infinite alternate}
.l33-chat.court .c-queue{animation:l33QueueC .38s ease-in-out infinite alternate}
.l33-chat.court .c-bras-d{animation:l33Palette .38s ease-in-out infinite alternate}
.l33-chat.salue .c-bras-d{animation:l33Palette .2s ease-in-out 4 alternate}
.l33-chat.salue .c-tout{animation:l33Hop .5s cubic-bezier(.3,1.6,.5,1) both}
.l33-chat.salue .c-tete{animation:l33Tete .5s ease-in-out both}
@keyframes l33PasA{from{transform:rotate(-26deg)}to{transform:rotate(22deg)}}
@keyframes l33PasB{from{transform:rotate(22deg)}to{transform:rotate(-26deg)}}
@keyframes l33Trot{from{transform:translateY(0)}to{transform:translateY(-5px)}}
@keyframes l33QueueC{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes l33Palette{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
@keyframes l33Hop{0%{transform:none}35%{transform:translateY(-14px) scale(.96,1.05)}70%{transform:translateY(0) scale(1.06,.93)}100%{transform:none}}
@keyframes l33Tete{0%,100%{transform:none}50%{transform:rotate(-8deg)}}
@keyframes l33Cligne{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.12)}}
/* le grand rouleau à peinture qu'il pousse avec sa rame */
.l33-pousse{position:absolute;width:0;will-change:transform}
.l33-pousse .l33-chat{left:auto;top:auto;right:8px;bottom:4px}
.l33-rouleau-v{position:absolute;left:-6px;top:6px;bottom:6px;width:24px;border-radius:12px;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(11,14,19,.12) 5px 7px),
    linear-gradient(90deg,#FFE680,#FFCE00 50%,#D9A800);
  box-shadow:0 0 0 2.5px #0B0E13,3px 0 0 2.5px #0B0E13;animation:l33RouleauV .14s linear infinite}
.l33-rouleau-v::before,.l33-rouleau-v::after{content:"";position:absolute;left:3px;right:3px;height:10px;border-radius:4px;background:#9AA3AE;box-shadow:0 0 0 2px #0B0E13}
.l33-rouleau-v::before{top:-9px}
.l33-rouleau-v::after{bottom:-9px}
.l33-rouleau-v.tombe{animation:none;transform:translateY(46px) rotate(16deg);opacity:0;transition:transform .42s ease-in,opacity .42s}
@keyframes l33RouleauV{from{background-position:0 0,0 0}to{background-position:7px 0,0 0}}
/* la peinture fraîche, qui coule ensuite et laisse voir la série suivante */
.l33-peint{position:absolute;border-radius:22px;transform:scaleX(0);transform-origin:0 50%;clip-path:inset(0 0 -40px 0 round 22px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 3px,transparent 3px 26px),linear-gradient(180deg,#FFDD45,#FFCE00 62%,#F0BC00);
  box-shadow:inset 0 0 0 3px #0B0E13}
.l33-peint::after{content:"";position:absolute;left:6%;right:6%;top:calc(100% - 2px);height:26px;
  background:radial-gradient(ellipse 8px 13px at 12% 0,#F0BC00 96%,transparent),radial-gradient(ellipse 6px 22px at 37% 0,#F0BC00 96%,transparent),
    radial-gradient(ellipse 9px 10px at 63% 0,#F0BC00 96%,transparent),radial-gradient(ellipse 6px 18px at 88% 0,#F0BC00 96%,transparent)}
.l33-peint.coule{clip-path:inset(calc(100% + 40px) 0 -40px 0 round 22px);transition:clip-path .5s cubic-bezier(.5,0,.6,1)}
/* les pots, posés un à un */
.ap--debutant .chip--pot.l33-cache{pointer-events:none}
.ap--debutant .chip--pot.l33-cache svg{opacity:0;transform:translateY(-46px) scale(.6)}
.ap--debutant .chip--pot.l33-pose svg{animation:l33Pot .5s cubic-bezier(.3,1.5,.5,1) both}
@keyframes l33Pot{0%{opacity:0;transform:translateY(-50px) rotate(-16deg) scale(.6)}55%{opacity:1;transform:translateY(5px) scale(1.1,.88)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .l33-rr *,.l33-chat *,.l33-rouleau i{animation:none!important} }
/* @@ fin lot33.css @@ */
/* @@ debut lot34.css @@ */
/* ————————— Les terminus : le chat chef de gare ————————— */
.l33-chat .c-casquette{transform-origin:60px 28px}
.l33-chat .c-son{transform-origin:92px 62px}
/* il freine : penché en arrière, les pieds en avant */
.l33-chat.freine .c-tout{transform:rotate(10deg);transition:transform .12s ease-out}
.l33-chat.freine .c-jambe-g,.l33-chat.freine .c-jambe-d{transform:rotate(20deg);transition:transform .12s}
.l33-chat.freine .c-queue{animation:l33QueueC .2s ease-in-out infinite alternate}
.l34-pouf{position:absolute;width:15px;height:15px;border-radius:50%;background:#C9CED6;box-shadow:0 0 0 2px #0B0E13;pointer-events:none;
  animation:l34Pouf .7s calc(var(--i)*40ms) ease-out both}
@keyframes l34Pouf{0%{opacity:0;transform:scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(10px + var(--i)*6px),-14px) scale(1.5)}}
/* il siffle, la palette levée : départ ! */
.l33-chat.siffle .c-sifflet{opacity:1}
.l33-chat.siffle .c-son{animation:l34Son .16s ease-in-out infinite alternate}
.l33-chat.siffle .c-bras-d{animation:l34Leve .5s ease-out both}
.l33-chat.siffle .c-tete{animation:l34Souffle .18s ease-in-out infinite alternate}
@keyframes l34Son{from{transform:scale(.8);opacity:.5}to{transform:scale(1.15);opacity:1}}
@keyframes l34Leve{0%{transform:rotate(0)}35%{transform:rotate(-26deg)}55%{transform:rotate(-14deg)}75%{transform:rotate(-24deg)}100%{transform:rotate(-18deg)}}
@keyframes l34Souffle{from{transform:none}to{transform:scale(1.03,.98)}}
/* le coup de casquette */
.l33-chat.chapeau .c-casquette{animation:l34Chapeau .56s ease-in-out both}
@keyframes l34Chapeau{0%,100%{transform:none}35%,65%{transform:translateY(-13px) rotate(-14deg)}}
/* le coup de palette, comme une raquette */
.l33-chat.frappe .c-bras-d{animation:l34Frappe .28s ease-out both}
@keyframes l34Frappe{0%{transform:rotate(0)}30%{transform:rotate(16deg)}60%{transform:rotate(-72deg)}100%{transform:rotate(0)}}
/* les plaques : cachées, puis en vol jusqu'à leur place */
.ap--debutant .ap-plaques .chip.l34-cache{opacity:0;pointer-events:none}
.ap--debutant .ap-plaques .chip.l34-vole{position:relative;z-index:5;animation:l34Vole .56s cubic-bezier(.3,.55,.4,1) both}
@keyframes l34Vole{0%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35) rotate(-150deg)}
  12%{opacity:1}50%{transform:translate(calc(var(--dx) * .45),calc(var(--dy) * .45 - 64px)) scale(.85) rotate(-50deg)}
  82%{transform:translate(0,3px) scale(1.07) rotate(5deg)}100%{opacity:1;transform:none}}
/* les lignes qui partent et qui arrivent restent dans le quai (rien ne doit élargir la page) */
.ap--debutant .ap-quais.l34-clip{overflow:hidden;overflow:clip;overflow-clip-margin:16px}
.ap--debutant .ap-quais .lineplate.l34-arrive{animation:l34Arrive .64s calc(var(--i) * 110ms) cubic-bezier(.2,.8,.3,1.08) both}
@keyframes l34Arrive{from{transform:translateX(calc(-1 * var(--l34w)))}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .l34-pouf{display:none} }
/* @@ fin lot34.css @@ */
/* @@ debut metroking_spectacle.css @@ */
/* — persos_roi_sirene — */
/* ==========================================================================
   MÉTRO KING · LE GRAND SPECTACLE — LE ROI DES CATACOMBES ET LES SIRÈNES
   Préfixe : mkx-rs-  ·  les durées des effets sont dans le JS (MKFX.anim) ;
   ici, seulement les petites vies en boucle (cape, chevelure, flammes…)
   ========================================================================== */
.mk-fx-o.mkx-rs-fig{pointer-events:none}
.mk-fx-o.mkx-rs-fig>svg{display:block;width:100%;height:100%;overflow:visible}
.mkx-rs-fig svg *{transform-box:view-box}
.mkx-rs-svg,.mk-fx-o svg.mkx-rs-svg{display:block;width:100%;height:100%;overflow:visible}
.mkx-rs-svg *{transform-box:view-box}

/* — le Roi (viewBox 0 0 200 240) — */
.mkx-rs-r-cape{transform-origin:100px 116px}
.mkx-rs-r-cape-g,.mkx-rs-r-ond-g{transform-origin:66px 116px}
.mkx-rs-r-cape-d,.mkx-rs-r-ond-d{transform-origin:134px 116px}
.mkx-rs-r-bras-g{transform-origin:68px 124px}
.mkx-rs-r-bras-d{transform-origin:132px 124px}
.mkx-rs-r-sceptre{transform-origin:146px 180px}
.mkx-rs-r-tete{transform-origin:100px 112px}
.mkx-rs-r-machoire{transform-origin:100px 88px}
.mkx-rs-r-couronne{transform-origin:100px 30px}
.mkx-rs-r-corps{transform-origin:100px 236px}
.mkx-rs-r-flamme-g{transform-origin:84px 66px}
.mkx-rs-r-flamme-d{transform-origin:116px 66px}
.mkx-rs-r-flamme-g,.mkx-rs-r-flamme-d{opacity:0}
.mkx-rs-r-halo{transform-origin:146px 96px}
.mkx-rs-fig svg .mkx-rs-r-lueur{transform-box:fill-box;transform-origin:50% 50%}
.mkx-rs-fig svg .mkx-rs-spir{transform-box:fill-box;transform-origin:50% 50%}
.mkx-rs-vit .mkx-rs-r-ond-g{animation:mkx-rs-capeG 1.5s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-r-ond-d{animation:mkx-rs-capeD 1.7s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-r-lueur{animation:mkx-rs-pulse 1.1s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-r-halo{animation:mkx-rs-pulse 1.4s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-spir{animation:mkx-rs-tourne 1s linear infinite}
@keyframes mkx-rs-capeG{from{transform:rotate(0) skewY(0)}to{transform:rotate(3deg) skewY(-2deg)}}
@keyframes mkx-rs-capeD{from{transform:rotate(0) skewY(0)}to{transform:rotate(-3deg) skewY(2deg)}}
@keyframes mkx-rs-pulse{from{transform:scale(.85);opacity:.75}to{transform:scale(1.15);opacity:1}}
@keyframes mkx-rs-tourne{to{transform:rotate(360deg)}}

/* — la Sirène (viewBox 0 0 200 240) — */
.mkx-rs-s-cheveux,.mkx-rs-s-chev-i{transform-origin:100px 34px}
.mkx-rs-s-meche,.mkx-rs-s-meche-i{transform-origin:84px 42px}
.mkx-rs-s-queue{transform-origin:100px 118px}
.mkx-rs-s-queue2{transform-origin:98px 170px}
.mkx-rs-s-nageoire,.mkx-rs-s-nag-i{transform-origin:72px 208px}
.mkx-rs-s-bras-g{transform-origin:87px 80px}
.mkx-rs-s-bras-d{transform-origin:113px 80px}
.mkx-rs-s-tete{transform-origin:100px 68px}
.mkx-rs-s-paup{transform-origin:100px 40px;transform:scaleY(0)}
.mkx-rs-s-corps{transform-origin:100px 150px}
.mkx-rs-vit .mkx-rs-s-chev-i{animation:mkx-rs-chev 1.3s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-s-meche-i{animation:mkx-rs-meche 1.1s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-s-nag-i{animation:mkx-rs-nag .7s ease-in-out infinite alternate}
.mkx-rs-vit .mkx-rs-s-paup{animation:mkx-rs-cligne 3.4s linear infinite}
@keyframes mkx-rs-chev{from{transform:rotate(-3deg) skewX(2deg)}to{transform:rotate(3deg) skewX(-3deg)}}
@keyframes mkx-rs-meche{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes mkx-rs-nag{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes mkx-rs-cligne{0%,90%,100%{transform:scaleY(0)}94%{transform:scaleY(1)}}

/* — l'eau : des nappes dont la crête défile, des reflets qui scintillent — */
.mkx-rs-nappe{overflow:hidden;will-change:transform}
.mkx-rs-crete{position:absolute;left:0;top:0;width:200%;height:28px;animation:mkx-rs-defile 2.6s linear infinite}
.mkx-rs-crete>svg,.mk-fx-o .mkx-rs-crete>svg{display:block;width:100%;height:100%}
.mkx-rs-corps{position:absolute;left:0;right:0;top:27px;bottom:0}
.mkx-rs-reflet{position:absolute;height:4px;border-radius:4px;background:rgba(255,255,255,.55);animation:mkx-rs-reflet 1.6s ease-in-out infinite alternate}
@keyframes mkx-rs-defile{to{transform:translateX(-50%)}}
@keyframes mkx-rs-reflet{from{transform:translateX(-12px) scaleX(.5);opacity:.15}to{transform:translateX(12px) scaleX(1);opacity:.8}}

/* — les torches, les brumes, les étincelles — */
.mkx-rs-svg .mkx-rs-feu{transform-box:fill-box;transform-origin:50% 100%;animation:mkx-rs-feu .22s ease-in-out infinite alternate}
@keyframes mkx-rs-feu{from{transform:scale(.9,1.05) skewX(-4deg)}to{transform:scale(1.08,.92) skewX(5deg)}}
.mkx-rs-brume{border-radius:50%;background:radial-gradient(circle,rgba(185,138,230,.75),rgba(107,47,160,.35) 55%,rgba(42,23,64,0) 72%)}
.mkx-rs-fumee{border-radius:50%;background:radial-gradient(circle,rgba(199,155,255,.9),rgba(107,47,160,.5) 55%,rgba(42,23,64,0) 72%)}
.mkx-rs-lueur-sol{border-radius:50%;background:radial-gradient(ellipse,rgba(199,155,255,.85),rgba(142,91,214,.35) 45%,rgba(42,23,64,0) 70%)}
.mkx-rs-aura{border-radius:50%;background:radial-gradient(circle,rgba(111,227,232,.6),rgba(31,181,176,.2) 50%,rgba(11,92,110,0) 70%)}
.mkx-rs-clip{overflow:hidden}
.mkx-rs-carte{position:absolute!important;margin:0;pointer-events:none;transform-origin:50% 50%}
.mkx-rs-titre{top:auto}
.mk-fx-titre.mkx-rs-titre b{white-space:normal;text-wrap:balance;font-size:clamp(1.3rem,6.4vw,3.4rem)}

/* le mode « réduire les animations » : aucune boucle */
.mkx-rs-calme *,.mkx-rs-calme{animation:none!important}

/* — persos_filous — */
/* ==========================================================================
   MÉTRO KING · LES FILOUS ET LE PASSE-MURAILLE (lot persos_filous, mkx-fi-)
   ========================================================================== */
/* — les figures : chaque partie tourne autour de sa propre articulation — */
.mkx-fi-svg{display:block;width:100%;height:100%;overflow:visible}
.mkx-fi-svg g{transform-box:view-box}
.mkx-fi-tout{transform-origin:100px 238px}
.mkx-fi-cape{transform-origin:100px 110px}
.mkx-fi-corps{transform-origin:100px 180px}
.mkx-fi-tete{transform-origin:100px 106px}
.mkx-fi-chapeau{transform-origin:100px 60px}
.mkx-fi-yeux{transform-origin:100px 80px}
.mkx-fi-pupilles{transform-origin:100px 81px}
.mkx-fi-eclat{transform-origin:113px 74px}
.mkx-fi-bras-g{transform-origin:76px 120px}
.mkx-fi-bras-d{transform-origin:124px 120px}
.mkx-fi-jambe-g{transform-origin:90px 176px}
.mkx-fi-jambe-d{transform-origin:110px 176px}
.mkx-fi-jupe{transform-origin:100px 168px}
.mkx-fi-echarpe{transform-origin:108px 114px}
.mkx-fi-sac{transform-origin:68px 178px}
.mkx-fi-objet{transform-origin:132px 172px}
.mkx-fi-brille{transform-origin:100px 40px}
/* — les poses de repos — */
.mkx-fi-p-salut .mkx-fi-bras-d{transform:rotate(-150deg)}
.mkx-fi-p-peche .mkx-fi-bras-d{transform:rotate(-62deg)}
.mkx-fi-p-lance .mkx-fi-bras-d{transform:rotate(-120deg)}
.mkx-fi-p-sac .mkx-fi-bras-g{transform:rotate(22deg)}
/* — un clignement d'yeux de temps en temps, une écharpe au vent — */
.mkx-fi-vit .mkx-fi-yeux{animation:mkx-fi-cligne 2.8s linear infinite}
.mkx-fi-vit .mkx-fi-echarpe{animation:mkx-fi-vent .5s ease-in-out infinite alternate}
.mkx-fi-vit .mkx-fi-volutes{animation:mkx-fi-vent .7s ease-in-out infinite alternate}
@keyframes mkx-fi-cligne{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
@keyframes mkx-fi-vent{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}

/* — un calque de scène et les objets posés — */
.mkx-fi-boite{position:absolute;overflow:hidden;pointer-events:none}
.mkx-fi-boite > .mkx-fig{position:absolute}
.mkx-fi-o{position:absolute;left:0;top:0;will-change:transform}
.mkx-fi-o svg{display:block;width:100%;height:100%;overflow:visible}

/* la poursuite : un grand voile percé d'un rond de lumière */
.mkx-fi-spot{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle closest-side,rgba(255,244,200,.16) 0,rgba(255,244,200,.08) 13%,rgba(6,6,14,.82) 15.5%,rgba(6,6,14,.86) 100%)}
/* la carte de visite d'Arsène Lupin */
.mkx-fi-visite{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#FBF6E9;border-radius:4px;box-shadow:0 0 0 2px #0B0E13,0 0 0 4px #FBF6E9,0 0 0 5.5px #0B0E13,0 10px 18px rgba(0,0,0,.45);
  font-family:Georgia,"Times New Roman",serif;color:#15151A;text-align:center;white-space:nowrap}
.mkx-fi-visite b{font-style:italic;font-weight:700;font-size:1em;letter-spacing:.01em}
.mkx-fi-visite small{font-size:.48em;letter-spacing:.18em;text-transform:uppercase;color:#B3122A;font-family:var(--display,sans-serif);font-weight:800}
.mkx-fi-visite i{position:absolute;inset:3px;border:1px solid rgba(179,18,42,.5);border-radius:2px}
/* la une du journal de Fantômas */
.mkx-fi-journal{position:absolute;left:0;top:0;padding:7px 9px 9px;background:#F1E9D2;border-radius:2px;color:#15151A;
  box-shadow:0 0 0 2.5px #0B0E13,0 14px 26px rgba(0,0,0,.55);font-family:Georgia,"Times New Roman",serif;text-align:center}
.mkx-fi-journal .t{font-weight:900;font-size:.62em;letter-spacing:.14em;border-bottom:2px solid #15151A;padding-bottom:3px;display:flex;justify-content:space-between;gap:6px}
.mkx-fi-journal .t span{font-size:.8em;letter-spacing:.04em;font-weight:700}
.mkx-fi-journal h4{margin:4px 0 2px;font-family:var(--display,sans-serif);font-weight:900;font-size:1.9em;line-height:.9;letter-spacing:-.02em;color:#B3122A;
  text-shadow:2px 2px 0 #15151A}
.mkx-fi-journal p{margin:0 0 5px;font-size:.6em;font-style:italic;font-weight:700}
.mkx-fi-journal .c{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:5px;height:3.2em}
.mkx-fi-journal .c i{background:repeating-linear-gradient(180deg,#6E6A60 0 1.6px,transparent 1.6px 4.4px)}
.mkx-fi-journal .c em{background:#15151A;border-radius:2px;position:relative;overflow:hidden}
.mkx-fi-journal .c em::before,.mkx-fi-journal .c em::after{content:"";position:absolute;top:42%;width:24%;height:14%;background:#F6F2E6;border-radius:50% 50% 50% 50%/100% 100% 0 0}
.mkx-fi-journal .c em::before{left:20%;transform:rotate(12deg)}
.mkx-fi-journal .c em::after{right:20%;transform:rotate(-12deg)}
/* « Ha ! Ha ! », les notes, les bulles de texte libres */
.mkx-fi-mot{position:absolute;left:0;top:0;font-family:var(--display,sans-serif);font-weight:900;white-space:nowrap;color:var(--c,#E8E6F0);
  -webkit-text-stroke:1.5px #0B0E13;paint-order:stroke fill;text-shadow:0 3px 0 #0B0E13}
/* le tampon de Vidocq */
.mkx-fi-tampon{position:absolute;left:0;top:0;padding:.3em .6em;border:4px solid #D21C2C;border-radius:8px;color:#D21C2C;text-align:center;text-shadow:0 0 1px #FBF6E9;
  font-family:var(--display,sans-serif);font-weight:900;line-height:1;letter-spacing:.04em;white-space:nowrap;background:rgba(251,246,233,.9);
  box-shadow:inset 0 0 0 2px rgba(210,28,44,.5),0 0 0 2px #0B0E13,0 8px 16px rgba(0,0,0,.4)}
.mkx-fi-tampon small{display:block;font-size:.5em;letter-spacing:.2em;margin-top:2px}
/* le fil de pêche et la canne */
.mkx-fi-fil{position:absolute;left:0;top:0;width:2.4px;height:100px;margin-left:-1.2px;background:#F6EEDB;transform-origin:50% 0;
  box-shadow:0 0 0 1.1px #0B0E13}

@media (prefers-reduced-motion:reduce){
  .mkx-fi-vit .mkx-fi-yeux,.mkx-fi-vit .mkx-fi-echarpe,.mkx-fi-vit .mkx-fi-volutes{animation:none}
}

/* — betes_croco_silure — */
/* ==========================================================================
   MÉTRO KING · LE GRAND SPECTACLE — LES BÊTES : CROCODILE ET SILURE
   Préfixe : mkx-bc-  ·  toutes les durées sont dans le JS (MKFX.anim)
   ========================================================================== */
.mk-fx-o.mkx-bc-fig{pointer-events:none}
.mk-fx-o.mkx-bc-fig>svg{display:block;width:100%;height:100%;overflow:visible}
.mkx-bc-fig svg *{transform-box:view-box}

/* — le Crocodile (viewBox 0 0 400 480) : la charnière des mâchoires en 200,262 — */
.mkx-bc-c-haut,.mkx-bc-c-palais,.mkx-bc-c-bas,.mkx-bc-c-bdents,.mkx-bc-c-gorge{transform-origin:200px 262px}
.mkx-bc-c-bave{transform-origin:0 0}
.mkx-bc-c-joue-g{transform-origin:44px 262px}
.mkx-bc-c-joue-d{transform-origin:356px 262px}
.mkx-bc-fig svg .mkx-bc-c-goutte{transform-box:fill-box;transform-origin:50% 0}
.mkx-bc-fig svg .mkx-bc-c-bosse{transform-box:fill-box;transform-origin:50% 50%}

/* — la bouche d'égout (viewBox 0 0 300 320), le trou en 150,250 — */
.mkx-bc-e-plaque{transform-origin:150px 250px}
.mkx-bc-e-zoom{transform-origin:150px 214px}
.mkx-bc-fig svg .mkx-bc-e-vap,.mkx-bc-fig svg .mkx-bc-e-rond,.mkx-bc-fig svg .mkx-bc-e-bul{transform-box:fill-box;transform-origin:50% 50%}

/* — le Silure (viewBox 0 0 560 420) : la bouche en 280,270 — */
.mkx-bc-s-haut,.mkx-bc-s-bas,.mkx-bc-s-gueule{transform-origin:280px 270px}
.mkx-bc-s-nag-g{transform-origin:126px 312px}
.mkx-bc-s-nag-d{transform-origin:434px 312px}
/* ses moustaches : trois articulations de chaque côté */
.mkx-bc-s-b1g{transform-origin:100px 278px}
.mkx-bc-s-b2g{transform-origin:50px 302px}
.mkx-bc-s-b3g{transform-origin:34px 348px}
.mkx-bc-s-b1d{transform-origin:460px 278px}
.mkx-bc-s-b2d{transform-origin:510px 302px}
.mkx-bc-s-b3d{transform-origin:526px 348px}
.mkx-bc-s-bm1{transform-origin:222px 386px}
.mkx-bc-s-bm2{transform-origin:254px 394px}
.mkx-bc-s-bm3{transform-origin:306px 394px}
.mkx-bc-s-bm4{transform-origin:338px 386px}

/* — l'eau : une bande de vagues qui défile, le corps en dégradé — */
.mkx-bc-eau{pointer-events:none}
.mkx-bc-bande{position:absolute;left:0;width:200%;will-change:transform}
.mk-fx-o .mkx-bc-bande>svg{display:block;width:100%;height:100%}
.mkx-bc-corps{position:absolute;left:0;right:0;top:0;bottom:0}
.mkx-bc-voile{pointer-events:none}

/* — gouttes et bulles — */
.mkx-bc-goutte{border-radius:50% 50% 50% 50%/42% 42% 58% 58%;box-shadow:0 0 0 2px #0B0E13}
.mkx-bc-goutte::after{content:"";position:absolute;left:22%;top:16%;width:30%;height:26%;border-radius:50%;background:rgba(255,255,255,.8)}
.mkx-bc-bul{border-radius:50%;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 14%,rgba(205,240,255,.25) 19% 60%,rgba(170,225,250,.55) 100%);
  box-shadow:0 0 0 2px rgba(11,14,19,.75)}

/* — l'aspiration : des traits qui filent vers la gorge — */
.mkx-bc-trait{height:4px;margin-top:-2px;border-radius:4px;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(220,255,196,.95),rgba(220,255,196,0))}

/* — le rot, et le petit bout de carte recraché — */
.mkx-bc-burp{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,3.8vw,2.3rem);line-height:1;letter-spacing:-.01em;
  white-space:nowrap;color:#C8F59E;-webkit-text-stroke:2px #0B0E13;paint-order:stroke fill;text-shadow:0 4px 0 #0B0E13,0 0 18px rgba(0,0,0,.5)}
.mkx-bc-bout{background:#FBF6E9;box-shadow:0 0 0 2px #0B0E13;border-radius:2px;
  clip-path:polygon(0 8%,30% 0,58% 14%,100% 4%,92% 52%,100% 96%,62% 84%,34% 100%,4% 88%,10% 46%)}
.mkx-bc-bout::after{content:"";position:absolute;left:10%;right:10%;top:38%;height:22%;background:#E3051C;opacity:.85}

/* — une carte noyée : ses pouvoirs se diluent dans l'eau — */
.mkx-bc-noie{position:absolute;inset:0;border-radius:8.5cqw;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,110,170,.25),rgba(16,58,104,.85)),
    repeating-linear-gradient(170deg,rgba(255,255,255,0) 0 9px,rgba(205,240,255,.22) 9px 11px)}
/* une carte à numéro qui flotte : son original reste caché sous la copie */
.mk-slot.mkx-bc-cache .mk-c{visibility:hidden}
/* un titre posé sur l'eau, sous la tête de la Bête */
.mk-fx-titre.mkx-bc-titre-bas{top:80%;z-index:9}

/* — rat_derat — */
/* ==========================================================================
   MÉTRO KING · LE GRAND SPECTACLE — LE RAT DU MÉTRO ET LE DÉRATISEUR
   Préfixe : mkx-rd-  ·  les boucles suivent la vitesse du jeu (--mkx-rd-v)
   ========================================================================== */
.mkx-rd-fig{pointer-events:none}
.mkx-rd-fig svg{overflow:visible}
/* — en miroir : c'est le dessin qui se retourne, pas son conteneur (animé) — */
.mkx-rd-g>svg{transform:scaleX(-1)}

/* — le rat d'égout, de face (viewBox 0 0 120 140) — */
.mkx-rd-fig svg g,.mkx-rd-fig svg path,.mkx-rd-fig svg circle{transform-box:view-box}
[class*="mkx-rd-rf-"]{transform-box:view-box}
.mkx-rd-rf-tout{transform-origin:60px 136px}
.mkx-rd-rf-queue{transform-origin:78px 124px;animation:mkx-rd-queue calc(1.1s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-rf-corps{transform-origin:60px 134px}
.mkx-rd-rf-bras-g{transform-origin:47px 93px}
.mkx-rd-rf-bras-d{transform-origin:73px 93px}
.mkx-rd-rf-tete{transform-origin:60px 86px}
.mkx-rd-rf-or-g{transform-origin:42px 44px}
.mkx-rd-rf-or-d{transform-origin:78px 44px}
.mkx-rd-rf-joue-g{transform-origin:41px 71px}
.mkx-rd-rf-joue-d{transform-origin:79px 71px}
.mkx-rd-rf-noeud{transform-origin:31px 51px;animation:mkx-rd-noeud calc(.9s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-rf-yeux{transform-origin:60px 53px}
.mkx-rd-rf-sourcils{transform-origin:60px 40px}
.mkx-rd-rf-bouche{transform-origin:60px 78px}
.mkx-rd-rf-dents{transform-origin:60px 76.4px}
.mkx-rd-rf-nez{transform-origin:60px 63.4px}
.mkx-rd-rf-moust{transform-origin:60px 70px}

/* — le rat d'égout, de profil (viewBox 0 0 170 100) — */
[class*="mkx-rd-rp-"]{transform-box:view-box}
.mkx-rd-rp-tout{transform-origin:86px 96px}
.mkx-rd-rp-queue{transform-origin:40px 70px;animation:mkx-rd-queue calc(.9s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-rp-p1{transform-origin:60px 80px}
.mkx-rd-rp-p2{transform-origin:106px 80px}
.mkx-rd-rp-p3{transform-origin:54px 78px}
.mkx-rd-rp-p4{transform-origin:102px 80px}
.mkx-rd-rp-tete{transform-origin:104px 62px}
.mkx-rd-rp-or{transform-origin:106px 50px}
.mkx-rd-rp-joue{transform-origin:131px 65px}
.mkx-rd-rp-noeud{transform-origin:104px 52px;animation:mkx-rd-noeud calc(.7s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-rp-nez{transform-origin:157px 64px}
.mkx-rd-rp-moust{transform-origin:150px 65px}
.mkx-rd-rp-lueur{animation:mkx-rd-lueur calc(.5s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
/* il court : les pattes moulinent, le dos ondule, la queue fouette */
.mkx-rd-court .mkx-rd-rp-tout{animation:mkx-rd-galop calc(.16s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-court .mkx-rd-rp-p1,.mkx-rd-court .mkx-rd-rp-p4{animation:mkx-rd-patteA calc(.16s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-court .mkx-rd-rp-p2,.mkx-rd-court .mkx-rd-rp-p3{animation:mkx-rd-patteB calc(.16s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-court .mkx-rd-rp-queue{animation:mkx-rd-fouette calc(.32s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-court .mkx-rd-rp-or{animation:mkx-rd-oreille calc(.16s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-court .mkx-rd-rp-tete{animation:mkx-rd-tete calc(.32s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
@keyframes mkx-rd-galop{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-5px) rotate(3deg)}}
@keyframes mkx-rd-patteA{from{transform:rotate(-38deg)}to{transform:rotate(34deg)}}
@keyframes mkx-rd-patteB{from{transform:rotate(34deg)}to{transform:rotate(-38deg)}}
@keyframes mkx-rd-queue{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
@keyframes mkx-rd-fouette{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
@keyframes mkx-rd-oreille{from{transform:rotate(-6deg)}to{transform:rotate(12deg)}}
@keyframes mkx-rd-tete{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes mkx-rd-noeud{from{transform:rotate(-8deg) scaleY(.92)}to{transform:rotate(9deg) scaleY(1.06)}}
@keyframes mkx-rd-lueur{from{opacity:.55}to{opacity:1}}

/* — le puits de l'égout : le rat n'y est visible qu'au-dessus de la margelle — */
.mkx-rd-puits{overflow:hidden}
/* — le cercle de craie autour de la carte qui mène (plus fort que « .mk-fx-o svg{height:auto} ») — */
.mk-fx-o.mkx-rd-craie svg{width:100%;height:100%;overflow:visible}
/* — les yeux rouges qui luisent au fond de l'égout — */
.mk-fx-o.mkx-rd-yeuxnoir svg{width:100%;height:100%;overflow:visible}
.mkx-rd-yeuxnoir .mkx-rd-yn-o{transform-box:fill-box;transform-origin:50% 50%}
/* — le piège : l'arceau bascule autour de son axe — */
.mkx-rd-fig svg g.mkx-rd-pg-barre{transform-origin:32px 20px}
.mkx-rd-fig svg g.mkx-rd-pg-loquet{transform-origin:22px 8.6px}
/* — la carte volée : une copie de la carte, mordue (masque), traînée — */
.mkx-rd-conv{position:absolute;width:0;height:0;overflow:visible}
.mkx-rd-volee{position:absolute;box-sizing:border-box;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))}
.mkx-rd-volee>.mk-c{position:relative;margin:0}
.mkx-rd-mors{position:absolute;overflow:visible;pointer-events:none}
/* — les onomatopées (CRONCH, CLAC…) — */
.mk-fx-o.mkx-rd-ono{white-space:nowrap;font-family:var(--display);font-weight:800;font-size:clamp(1rem,2.4vw,1.5rem);line-height:1;letter-spacing:.03em;
  color:var(--c,#FFCE00);-webkit-text-stroke:1px #0B0E13;font-style:italic;pointer-events:none;
  text-shadow:-2px -2px 0 #0B0E13,2px -2px 0 #0B0E13,-2px 2px 0 #0B0E13,2px 2px 0 #0B0E13,0 -2.4px 0 #0B0E13,0 2.4px 0 #0B0E13,-2.4px 0 0 #0B0E13,2.4px 0 0 #0B0E13,1px 4.6px 0 #0B0E13}

/* ==========================================================================
   LE DÉRATISEUR (viewBox 0 0 200 240) — aussi pour MKPERSO.derat(o)
   ========================================================================== */
.mkx-rd-derat{overflow:visible}
.mkx-rd-derat g,.mkx-rd-derat path,.mkx-rd-derat circle{transform-box:view-box}
.mkx-rd-derat .mkx-rd-d-tout{transform-origin:100px 236px;animation:mkx-rd-respire calc(1.6s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-derat .mkx-rd-d-corps{transform-origin:100px 200px}
.mkx-rd-derat .mkx-rd-d-tete{transform-origin:102px 106px}
.mkx-rd-derat .mkx-rd-d-yeux{transform-origin:110px 76px;animation:mkx-rd-cligne calc(3.2s*var(--mkx-rd-v,1)) infinite}
.mkx-rd-derat .mkx-rd-d-sourcils{transform-origin:110px 67px}
.mkx-rd-derat .mkx-rd-d-nez{transform-origin:125px 87px}
.mkx-rd-derat .mkx-rd-d-bouche,.mkx-rd-derat .mkx-rd-d-bouche-o{transform-origin:116px 105px}
.mkx-rd-derat .mkx-rd-d-jambe-g{transform-origin:87px 182px}
.mkx-rd-derat .mkx-rd-d-jambe-d{transform-origin:113px 182px}
.mkx-rd-derat .mkx-rd-d-piege{transform-origin:118px 180px}
.mkx-rd-derat .mkx-rd-d-bras-f{transform-origin:76px 118px}
.mkx-rd-derat .mkx-rd-d-poche{transform-origin:30px 27px}
.mkx-rd-derat .mkx-rd-d-drapeau{transform-origin:37px 64px}
.mkx-rd-derat .mkx-rd-d-toile{transform-origin:37px 71px}
.mkx-rd-derat .mkx-rd-d-bras-l{transform-origin:124px 120px}
.mkx-rd-derat .mkx-rd-d-lampe{transform-origin:140px 155px}
.mkx-rd-derat .mkx-rd-d-halo{transform-origin:161px 175px;animation:mkx-rd-halo calc(.4s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-derat .mkx-rd-d-doigt{transform-origin:150px 149px}
/* le drapeau blanc flotte toujours un peu */
.mkx-rd-derat .mkx-rd-d-toile{animation:mkx-rd-toile calc(1s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
@keyframes mkx-rd-respire{from{transform:none}to{transform:translateY(-1.5px) scale(1.012,.994)}}
@keyframes mkx-rd-cligne{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes mkx-rd-halo{from{transform:scale(.92)}to{transform:scale(1.08)}}
@keyframes mkx-rd-toile{from{transform:skewY(-4deg) scaleX(.94)}to{transform:skewY(5deg) scaleX(1.04)}}
/* il marche : bottes, balancier du corps, lampe qui ballotte */
.mkx-rd-marche .mkx-rd-d-tout{animation:mkx-rd-pas calc(.18s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-marche .mkx-rd-d-jambe-g{animation:mkx-rd-jambeA calc(.18s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-marche .mkx-rd-d-jambe-d{animation:mkx-rd-jambeB calc(.18s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-marche .mkx-rd-d-bras-l{animation:mkx-rd-balance calc(.36s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-marche .mkx-rd-d-tete{animation:mkx-rd-hoche calc(.18s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
@keyframes mkx-rd-pas{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-6px) rotate(1.5deg)}}
@keyframes mkx-rd-jambeA{from{transform:rotate(-20deg)}to{transform:rotate(16deg)}}
@keyframes mkx-rd-jambeB{from{transform:rotate(16deg)}to{transform:rotate(-20deg)}}
@keyframes mkx-rd-balance{from{transform:rotate(-12deg)}to{transform:rotate(10deg)}}
@keyframes mkx-rd-hoche{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
/* il agite le drapeau blanc */
.mkx-rd-agite .mkx-rd-d-drapeau{animation:mkx-rd-agiteD calc(.22s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
/* (agité, le drapeau grandit : qu'on le voie de loin) */
@keyframes mkx-rd-agiteD{from{transform:rotate(-14deg) scale(1.5)}to{transform:rotate(12deg) scale(1.5)}}
.mkx-rd-agite .mkx-rd-d-toile{animation:mkx-rd-toile calc(.22s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
@keyframes mkx-rd-agite{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}

/* les poses fixes de MKPERSO.derat({pose}) */
.mkx-rd-p-marche .mkx-rd-d-jambe-g{transform:rotate(-16deg)}
.mkx-rd-p-marche .mkx-rd-d-jambe-d{transform:rotate(14deg)}
.mkx-rd-p-lampe .mkx-rd-d-bras-l{transform:rotate(-48deg)}
.mkx-rd-p-lampe .mkx-rd-d-halo{opacity:1}
.mkx-rd-p-lance .mkx-rd-d-bras-f{transform:rotate(58deg)}
.mkx-rd-p-lance .mkx-rd-d-poche{opacity:0}
.mkx-rd-p-drapeau .mkx-rd-d-bras-f{transform:rotate(-12deg) translateY(-4px)}
.mkx-rd-p-drapeau .mkx-rd-d-drapeau{animation:mkx-rd-agiteD .22s ease-in-out infinite alternate}
.mkx-rd-p-hausse .mkx-rd-d-bras-f{transform:translateY(-7px) rotate(-10deg)}
.mkx-rd-p-hausse .mkx-rd-d-bras-l{transform:translateY(-7px) rotate(14deg)}
.mkx-rd-p-hausse .mkx-rd-d-tete{transform:translateY(4px) rotate(-5deg)}
.mkx-rd-p-hausse .mkx-rd-d-sourcils{transform:translateY(-5px)}

/* — la nuit et le faisceau de la lampe — */
.mkx-rd-nuit{background:radial-gradient(circle at 50% 50%,rgba(255,244,190,.08) 0,rgba(255,244,190,.05) calc(var(--r,60px) - 10px),
  rgba(5,8,13,.66) calc(var(--r,60px) + 16px),rgba(5,8,13,.7) 100%)}
.mkx-rd-faisceau{background:linear-gradient(90deg,rgba(255,250,214,.62),rgba(255,236,140,.26) 70%,rgba(255,236,140,.14));
  clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);mix-blend-mode:screen}
/* — le ruban du drapeau blanc : « Ne prend jamais le pli » — */
.mk-fx-o.mkx-rd-ruban{z-index:9;display:flex;align-items:center;gap:.4em;padding:.34em .9em .34em .55em;border-radius:999px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:.8rem;line-height:1.1;color:#0B0E13;background:#FBF6E9;box-shadow:var(--mk-ombre)}
.mk-fx-o.mkx-rd-ruban svg{flex:none;width:1.25em;height:1.25em;animation:mkx-rd-agite .26s ease-in-out infinite alternate;transform-origin:20% 90%}
/* — la prise : la Bête qui se débat dans le filet — */
.mkx-rd-prise .mkx-rd-ombre{position:absolute;left:21%;right:21%;top:34%;filter:drop-shadow(0 3px 0 rgba(11,14,19,.35))}
.mkx-rd-fig svg g.mkx-rd-ag,.mkx-rd-fig svg g.mkx-rd-cg-ag{transform-box:fill-box;transform-origin:50% 60%}
/* — la cage « BÊTES DE PARIS » — */
.mkx-rd-cg-b.mkx-rd-agite .mkx-rd-cg-ag{animation:mkx-rd-secoue calc(.16s*var(--mkx-rd-v,1)) ease-in-out infinite alternate}
.mkx-rd-cg-b1.mkx-rd-agite .mkx-rd-cg-ag{animation-delay:-.07s}
.mkx-rd-cg-b2.mkx-rd-agite .mkx-rd-cg-ag{animation-delay:-.12s}
@keyframes mkx-rd-secoue{from{transform:translate(-2px,1px) rotate(-9deg)}to{transform:translate(2px,-2px) rotate(8deg)}}

@media (prefers-reduced-motion:reduce){
  .mkx-rd-fig *,.mkx-rd-derat *,.mkx-rd-ruban svg{animation:none!important}
}

/* — divers — */
/* ==========================================================================
   MÉTRO KING · LE GRAND SPECTACLE — LE RESTE DES CARTES ET LES EFFETS COMMUNS
   Préfixe : mkx-dv-  ·  toutes les durées sont dans le JS (MKFX.anim)
   ========================================================================== */
.mk-fx-o.mkx-dv-fig{pointer-events:none}
.mk-fx-o.mkx-dv-fig>svg{display:block;width:100%;height:100%;overflow:visible}
.mkx-dv-fig svg *{transform-box:view-box}

/* — le Contrôleur (viewBox 0 0 200 240) — */
.mkx-dv-k-tete{transform-origin:100px 104px}
.mkx-dv-k-yeux{transform-origin:100px 77px}
.mkx-dv-k-sifflet{transform-origin:108px 100px}
.mkx-dv-k-ondes{transform-origin:140px 101px}
.mkx-dv-k-bg{transform-origin:66px 116px}
.mkx-dv-k-pince{transform-origin:183px 119px}
.mkx-dv-d-tissu{transform-origin:10px 20px}
.mkx-dv-fig svg .mkx-dv-e-goutte{transform-box:fill-box;transform-origin:50% 0}

/* — onomatopées, bouffées, anneaux, éclats — */
.mkx-dv-ono{z-index:9;white-space:nowrap;pointer-events:none}
.mkx-dv-ono b{display:block;font-family:var(--display);font-weight:800;font-style:italic;letter-spacing:.02em;color:var(--c);
  -webkit-text-stroke:2px #0B0E13;paint-order:stroke fill;text-shadow:0 3px 0 #0B0E13}
.mkx-dv-bouf{z-index:7;border-radius:50%;box-shadow:0 0 0 1.5px rgba(11,14,19,.35)}
.mkx-dv-anneau{z-index:6;border-radius:50%;border-style:solid;border-color:var(--c);box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 2.5px #0B0E13}
.mkx-dv-trou{z-index:8;border-radius:50%;box-shadow:0 0 0 1.5px #0B0E13}
.mkx-dv-flash{z-index:8;border-radius:50%;background:radial-gradient(circle,#FFFFFF 0 20%,rgba(255,246,200,.85) 38%,rgba(255,227,74,0) 70%)}
.mkx-dv-etin{z-index:6;background:#FFF6C8;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.mkx-dv-pierre{z-index:8;clip-path:polygon(10% 20%,70% 0,100% 45%,80% 100%,20% 85%,0 50%);box-shadow:inset 0 0 0 1.5px #0B0E13}
.mkx-dv-encre{z-index:8;border-radius:50%;background:#E3051C;box-shadow:0 0 0 1.5px #0B0E13}
.mkx-dv-confetti{z-index:7;border-radius:2px;box-shadow:0 0 0 1px rgba(11,14,19,.55)}
.mkx-dv-bulle{z-index:5;border-radius:50%;background:rgba(160,220,200,.35);box-shadow:inset 0 0 0 2px rgba(220,255,240,.85)}

/* — la bulle du mégaphone, dans le cortège — */
.mkx-dv-bul{position:absolute;z-index:2;white-space:nowrap;padding:.35em .7em;border-radius:14px;font-family:var(--display);font-weight:800;
  font-size:clamp(.7rem,1.6vw,.95rem);color:#0B0E13;background:#FFE3E3;box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13;transform-origin:30% 100%}
.mkx-dv-bul::after{content:"";position:absolute;left:30%;bottom:-8px;width:12px;height:12px;background:#FFE3E3;
  transform:rotate(45deg);box-shadow:2.5px 2.5px 0 #0B0E13}
.mkx-dv-bul{transform-origin:80% 100%}
.mkx-dv-bul::after{left:auto;right:16%}

/* — la pastille « drapeau blanc · perd toujours » — */
.mkx-dv-pil{z-index:9;display:flex;align-items:center;gap:.35em;white-space:nowrap;padding:.22em .7em .22em .35em;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:clamp(.62rem,1.4vw,.78rem);color:#0B0E13;background:#FFFFFF;
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 #0B0E13;transform-origin:50% 0}
.mk-fx .mkx-dv-pil svg{width:1.1em;height:1.55em;display:block}

/* — la rubalise jaune et noire — */
.mkx-dv-rubw{z-index:5;transform-origin:50% 50%}
.mkx-dv-rub{position:absolute;inset:0;background:repeating-linear-gradient(-45deg,#FFCE00 0 14px,#0B0E13 14px 28px);
  box-shadow:0 0 0 2.5px #0B0E13,0 5px 8px rgba(0,0,0,.35)}
.mkx-dv-rub--g{transform-origin:0 50%}
.mkx-dv-rub--d{transform-origin:100% 50%}
.mkx-dv-halo{z-index:5;border-radius:50%;background:radial-gradient(circle,rgba(150,210,255,.95) 0 12%,rgba(62,143,212,.55) 32%,rgba(62,143,212,0) 68%)}

/* — les panneaux émaillés : « Station évacuée », « Correspondance » — */
.mkx-dv-panneau,.mkx-dv-corr{z-index:8;display:flex;flex-direction:column;align-items:center;gap:.25em;white-space:nowrap;
  padding:.45em 1em;border-radius:.55em;color:#FFFFFF;background:linear-gradient(180deg,#24489A,#14306E);
  box-shadow:inset 0 0 0 2px #FFFFFF,inset 0 0 0 4px #14306E,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13;transform-origin:50% 0}
.mkx-dv-panneau b,.mkx-dv-corr b{font-family:var(--display);font-weight:800;letter-spacing:.01em;line-height:1}
.mkx-dv-panneau::before,.mkx-dv-panneau::after,.mkx-dv-corr::before,.mkx-dv-corr::after{content:"";position:absolute;top:-14px;width:2px;height:14px;
  background:repeating-linear-gradient(180deg,#C9CFD6 0 3px,#5A6170 3px 5px)}
.mkx-dv-panneau::before,.mkx-dv-corr::before{left:18%}
.mkx-dv-panneau::after,.mkx-dv-corr::after{right:18%}
.mkx-dv-panneau{background:linear-gradient(180deg,#E3051C,#A80316);box-shadow:inset 0 0 0 2px #FFFFFF,inset 0 0 0 4px #A80316,0 0 0 2.5px #0B0E13,0 5px 0 #0B0E13}
.mkx-dv-corr span{display:flex;align-items:center;gap:.35em}
.mkx-dv-corr em{font-style:normal;font-weight:800;display:inline-block}
.mkx-dv-corr--v{transform-origin:50% 100%}
.mkx-dv-corr--v::before,.mkx-dv-corr--v::after{display:none}
.mkx-dv-pas{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%;font-style:normal;font-family:var(--display);
  font-weight:800;font-size:.85em;line-height:1;color:var(--i);background:var(--c);box-shadow:0 0 0 2px #0B0E13}
.mkx-dv-voie .mkx-dv-pas{position:absolute;top:50%;font-size:max(11px,.8em)}
.mkx-dv-pas--g{left:0;transform:translate(-60%,-50%)}
.mkx-dv-pas--d{right:0;transform:translate(60%,-50%)}

/* — le tableau d'affichage qui grésille — */
.mkx-dv-tab{z-index:7;display:flex;flex-direction:column;justify-content:center;gap:.12em;padding:.2em .4em;overflow:hidden;
  border-radius:.25em;background:#11151C;box-shadow:0 0 0 3px #3A3F48,0 0 0 5.5px #0B0E13,0 8px 14px rgba(0,0,0,.45)}
.mkx-dv-tab-h{font-family:var(--display);font-weight:800;font-size:.34em;letter-spacing:.14em;color:#FFB020;text-align:center}
.mkx-dv-tab-hr{color:#FF4A3D}
.mkx-dv-tab-l{display:flex;justify-content:center;gap:.08em}
.mkx-dv-tab-l i{display:grid;place-items:center;width:.82em;height:1.08em;border-radius:.08em;font-style:normal;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-weight:700;font-size:.9em;line-height:1;color:#FFC233;background:linear-gradient(180deg,#232A35 0 49%,#0B0E13 49% 52%,#1A2029 52%);
  text-shadow:0 0 6px rgba(255,176,32,.7)}
.mkx-dv-tab-l i.mkx-dv-tab-r{color:#FF4A3D;text-shadow:0 0 8px rgba(255,74,61,.85)}
.mkx-dv-tab-s{position:absolute;left:0;right:0;top:-10px;bottom:-10px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 4px)}

/* — la voie, les zzz — */
.mkx-dv-voie{z-index:3;transform-origin:0 50%}
.mk-fx .mkx-dv-voie>svg{display:block;width:100%;height:100%}
.mkx-dv-z{z-index:8;font-family:var(--display);font-weight:800;font-style:italic;color:#DCEBFF;
  -webkit-text-stroke:1.5px #0B0E13;paint-order:stroke fill;text-shadow:0 2px 0 #0B0E13}

/* — l'alliance — */
.mkx-dv-lueur{z-index:1;border-radius:50%;background:radial-gradient(circle,rgba(126,227,168,.55) 0 22%,rgba(14,107,62,.25) 45%,rgba(14,107,62,0) 70%)}
.mkx-dv-couture{z-index:7;border-radius:999px;background:linear-gradient(180deg,#FFFFFF,#FFCE00,#FFFFFF);box-shadow:0 0 12px 4px rgba(255,206,0,.75)}

/* — le carrefour, les rayons — */
.mkx-dv-voies{z-index:2;pointer-events:none}
.mk-fx .mkx-dv-voies>svg{display:block;overflow:visible}
.mkx-dv-rayons{z-index:1;pointer-events:none}
.mk-fx .mkx-dv-rayons svg{display:block;width:100%;height:auto}
.mkx-dv-rayons--trou{-webkit-mask:radial-gradient(circle,transparent 0 13%,#000 26%);mask:radial-gradient(circle,transparent 0 13%,#000 26%)}
.mkx-dv-or{z-index:1;border-radius:50%;background:radial-gradient(circle,rgba(255,206,0,.45) 0 25%,rgba(255,206,0,.12) 48%,rgba(255,206,0,0) 70%)}

/* — la station claquée — */
.mkx-dv-choc{z-index:3;border-radius:50%;border:3px solid rgba(255,246,214,.9);box-shadow:0 0 0 1.5px rgba(11,14,19,.5)}
.mkx-dv-traits{z-index:4;pointer-events:none}
.mk-fx .mkx-dv-traits>svg{display:block;width:100%;height:100%;overflow:visible}

/* — l'atout : l'arche du monument et sa bannière — */
.mkx-dv-arche{z-index:6;transform-origin:50% 100%}
.mkx-dv-arche-c{position:absolute;left:0;right:0;top:0;bottom:12%;overflow:hidden;border-radius:50% 50% .35em .35em/34% 34% .35em .35em;
  background:#1A2230;box-shadow:inset 0 0 0 4px #FFCE00,inset 0 0 0 6px #0B0E13,0 0 0 2.5px #0B0E13,0 0 28px 6px rgba(255,206,0,.55)}
.mkx-dv-arche-in{position:absolute;inset:6px 6px 0}
.mk-fx .mkx-dv-arche-in svg{display:block;width:100%;height:100%}
.mkx-dv-arche-r{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0))}
.mkx-dv-arche-b{position:absolute;left:50%;bottom:0;transform-origin:50% 50%;white-space:nowrap;padding:.32em 1.2em;
  font-family:var(--display);font-weight:800;color:#3A2A00;background:linear-gradient(180deg,#FFE58A,#FFCE00 55%,#E8A21B);
  clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);filter:drop-shadow(0 3px 0 #0B0E13)}
.mkx-dv-arche-b b{display:block;line-height:1.05}
.mkx-dv-arche-k{position:absolute;left:50%;bottom:-1.9em;white-space:nowrap;font-style:normal;padding:.15em .6em;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:.8em;color:#FFFFFF;background:#24489A;box-shadow:0 0 0 2px #0B0E13}

/* — l'annulation : les fissures, le tampon — */
.mkx-dv-fissures{z-index:6;pointer-events:none}
.mk-fx .mkx-dv-fissures>svg{display:block;width:100%;height:100%;overflow:visible}
.mkx-dv-tampon{z-index:9;white-space:nowrap;padding:.12em .55em;border-radius:.3em;transform-origin:50% 50%}
.mkx-dv-tampon b{display:block;font-family:var(--display);font-weight:800;letter-spacing:.04em;color:#E3051C;line-height:1}
.mkx-dv-tampon{background:rgba(255,253,246,.9);box-shadow:inset 0 0 0 3px #E3051C,inset 0 0 0 5px rgba(255,253,246,.9),inset 0 0 0 6.5px #E3051C,0 0 0 2.5px #0B0E13,0 6px 10px rgba(0,0,0,.35)}
.mkx-dv-tampon--b{background:rgba(255,253,246,.94)}

/* — le ramassage : la traînée, le jeton — */
.mkx-dv-carte{z-index:6}
.mkx-dv-trainee{z-index:4;border-radius:999px;background:linear-gradient(90deg,rgba(255,246,200,0),rgba(255,230,140,.55) 55%,rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.mkx-dv-jeton{z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  color:#3A2A00;background:radial-gradient(circle at 35% 30%,#FFF3B0,#FFCE00 55%,#E8A21B);box-shadow:inset 0 0 0 3px #FFF3B0,inset 0 0 0 4.5px #C98A00,0 0 0 2.5px #0B0E13,0 4px 0 #0B0E13}
.mkx-dv-jeton b{font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:.9}
.mkx-dv-jeton small{font-family:var(--display);font-weight:800;font-size:.6rem;line-height:1;text-transform:uppercase;letter-spacing:.06em}

/* — la gloire de l'atout : le reflet qui balaie la carte — */
.mkx-dv-gloire{z-index:5;overflow:hidden;border-radius:9px;box-shadow:0 0 0 3px #FFCE00,0 0 22px 6px rgba(255,206,0,.6)}
.mkx-dv-reflet{position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.7),rgba(255,255,255,0))}

/* — rat_coeur — */
/* ==========================================================================
   MÉTRO KING · LE GRAND SPECTACLE — LE RAT DU MÉTRO, CROUPIER DE LA TABLE
   Le calque, le rat, sa bulle, sa poussière ; puis le rig du <svg> :
   les points d'attache, les visages, les mains, et une boucle par pose.
   Les durées suivent la vitesse du jeu : --mkr-v (= MKFX.lent).
   ========================================================================== */
.mkr-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.mkr-rat{position:absolute;left:0;top:0;width:0;height:0}
.mkr-rat.mkr-cache{opacity:0}
.mkr-horloge{position:absolute;width:0;height:0;display:block}
.mkr-ombre{position:absolute;left:calc(var(--w)*-.3);top:calc(var(--w)*-.05);width:calc(var(--w)*.6);height:calc(var(--w)*.1);
  border-radius:50%;background:rgba(11,14,19,.3)}
.mkr-saut{position:absolute;left:calc(var(--w)*-.5);top:calc(var(--w)*-1);width:var(--w);height:var(--w);transform-origin:50% 100%}
.mkr-sens,.mkr-ressort{position:absolute;inset:0;transform-origin:50% 100%}
.mkr-ressort>.mkr-svg{display:block;width:100%;height:100%;transform-origin:50% 100%}
.mkr-pouss{position:absolute;display:block;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 30%,#FFFFFF 0,#EDE6D6 38%,#BDB3A0 100%);box-shadow:0 0 0 1.5px rgba(11,14,19,.55)}
.mkr-anneau{position:absolute;display:block;border-radius:50%;border:3px solid rgba(251,246,233,.92);box-shadow:0 0 0 1.5px rgba(11,14,19,.45)}

/* — la bulle de bande dessinée (au-dessus de la tête, ou à côté) — */
.mkr-bulle{position:absolute;left:0;top:0;z-index:2;width:max-content;max-width:min(250px,70vw);--c:#FFFDF4;--i:#0B0E13;--q:50%}
.mkr-bulle-in{position:relative;padding:.42em .8em .48em;border-radius:14px;background:var(--c);color:var(--i);border:2.5px solid #0B0E13;
  box-shadow:0 3px 0 #0B0E13;font-family:var(--display,"Archivo","Helvetica Neue",Arial,sans-serif);font-weight:800;font-size:var(--fs,14px);
  line-height:1.18;text-align:center;letter-spacing:-.005em;transform-origin:var(--q) calc(100% + 11px)}
.mkr-bulle-in::after{content:"";position:absolute;left:var(--q);bottom:-8.5px;width:13px;height:13px;background:var(--c);
  border-right:2.5px solid #0B0E13;border-bottom:2.5px solid #0B0E13;transform:translateX(-50%) rotate(45deg);border-bottom-right-radius:2px}
.mkr-bulle--d .mkr-bulle-in{transform-origin:-11px var(--q)}
.mkr-bulle--d .mkr-bulle-in::after{left:-8.5px;top:var(--q);bottom:auto;border:0;border-left:2.5px solid #0B0E13;border-bottom:2.5px solid #0B0E13;
  transform:translateY(-50%) rotate(45deg);border-radius:0 0 0 2px}
.mkr-bulle--g .mkr-bulle-in{transform-origin:calc(100% + 11px) var(--q)}
.mkr-bulle--g .mkr-bulle-in::after{left:auto;right:-8.5px;top:var(--q);bottom:auto;transform:translateY(-50%) rotate(-45deg)}
.mkr-bulle b,.mkr-bulle strong{color:#E3051C}

/* ==========================================================================
   LE RIG (le <svg class="mkr-svg">, viewBox -12 4 140 140)
   ========================================================================== */
.mkr-svg{overflow:visible;--k:var(--mkr-v,1)}
.mkr-svg g,.mkr-svg path,.mkr-svg circle,.mkr-svg ellipse{transform-box:view-box}
.mkr-svg .mkr-txt{transform-box:fill-box;transform-origin:50% 50%}
.mkr-miroir .mkr-txt{transform:scaleX(-1)}
.mkr-svg .mkr-tout{transform-origin:58px 144px}
.mkr-svg .mkr-corps{transform-origin:58px 136px}
.mkr-svg .mkr-queue{transform-origin:36px 118px}
.mkr-svg .mkr-queue2{transform-origin:7px 105px}
.mkr-svg .mkr-pied-g{transform-origin:47px 124px}
.mkr-svg .mkr-pied-d{transform-origin:68px 124px}
.mkr-svg .mkr-tete{transform-origin:60px 90px}
.mkr-svg .mkr-or-g{transform-origin:44px 54px}
.mkr-svg .mkr-or-d{transform-origin:76px 47px}
.mkr-svg .mkr-yeux{transform-origin:64px 59px}
.mkr-svg .mkr-oeil-g{transform-origin:56px 60px}
.mkr-svg .mkr-oeil-d{transform-origin:72px 58px}
.mkr-svg .mkr-pup-g{transform-origin:58.5px 61px}
.mkr-svg .mkr-pup-d{transform-origin:74px 59px}
.mkr-svg .mkr-sc-g{transform-origin:55px 47px}
.mkr-svg .mkr-sc-d{transform-origin:72.5px 45px}
.mkr-svg .mkr-bouche{transform-origin:76px 82px}
.mkr-svg .mkr-joues{transform-origin:56px 77px}
.mkr-svg .mkr-nez{transform-origin:92px 72px}
.mkr-svg .mkr-moust{transform-origin:86px 77px}
.mkr-svg .mkr-casq{transform-origin:60px 44px}
.mkr-svg .mkr-bras-g{transform-origin:39px 100px}
.mkr-svg .mkr-avbras-g{transform-origin:34px 114.2px}
.mkr-svg .mkr-bras-d{transform-origin:78px 100px}
.mkr-svg .mkr-avbras-d{transform-origin:85px 116.5px}
.mkr-svg .mkr-main-d{transform-origin:101.5px 112.5px}
.mkr-svg .mkr-et1{transform-origin:14px 28.4px}
.mkr-svg .mkr-et2{transform-origin:112px 19px}
.mkr-svg .mkr-et3{transform-origin:120px 57.6px}
.mkr-svg .mkr-larme1{transform-origin:51px 86px}
.mkr-svg .mkr-larme2{transform-origin:72.4px 84px}
.mkr-svg .mkr-goutte1{transform-origin:30px 56px}
.mkr-svg .mkr-goutte2{transform-origin:94px 54px}
.mkr-svg .mkr-pe1{transform-origin:94px 40px}
.mkr-svg .mkr-pe2{transform-origin:101px 31px}
/* dans la main : le repère est celui du poing (0,0) */
.mkr-svg .mkr-objet-in{transform-origin:0 0}
.mkr-svg .mkr-pq-a,.mkr-svg .mkr-pq-b,.mkr-svg .mkr-pq-v1,.mkr-svg .mkr-pq-v2,.mkr-svg .mkr-pq-v3{transform-origin:4px -8px}
.mkr-svg .mkr-dr{transform-origin:0 -35px}
.mkr-svg .mkr-mch{transform-origin:2px 0}

/* — tenue et main — */
.mkr-t-croupier .mkr-metro,.mkr-t-metro .mkr-croup{display:none}
.mkr-svg .mkr-mn-doigt,.mkr-svg .mkr-mn-ouverte{display:none}
.mkr-m-doigt .mkr-mn-poing,.mkr-m-ouverte .mkr-mn-poing{display:none}
.mkr-m-doigt .mkr-mn-doigt,.mkr-m-ouverte .mkr-mn-ouverte{display:inline}
.mkr-p-applaudit .mkr-objet,.mkr-g-applaudit .mkr-objet{display:none}
.mkr-g-applaudit .mkr-mn-poing{display:inline}
.mkr-g-applaudit .mkr-mn-doigt,.mkr-g-applaudit .mkr-mn-ouverte{display:none}
.mkr-svg .mkr-mng-ouverte{display:none}
.mkr-p-salut .mkr-mng-ouverte,.mkr-p-triomphe .mkr-mng-ouverte,.mkr-p-saute .mkr-mng-ouverte,.mkr-p-danse .mkr-mng-ouverte,.mkr-p-panique .mkr-mng-ouverte,
.mkr-p-air .mkr-mng-ouverte,.mkr-g-mg .mkr-mng-ouverte{display:inline}
.mkr-p-salut .mkr-mng-poing,.mkr-p-triomphe .mkr-mng-poing,.mkr-p-saute .mkr-mng-poing,.mkr-p-danse .mkr-mng-poing,.mkr-p-panique .mkr-mng-poing,
.mkr-p-air .mkr-mng-poing,.mkr-g-mg .mkr-mng-poing{display:none}
.mkr-svg .mkr-ondes{opacity:0;transition:opacity .2s}
.mkr-parle .mkr-ondes{opacity:1}

/* — les visages — */
.mkr-svg .mkr-b-rire,.mkr-svg .mkr-b-o,.mkr-svg .mkr-b-pleure,.mkr-svg .mkr-b-dort,.mkr-svg .mkr-b-hmm,
.mkr-svg .mkr-yx-heureux,.mkr-svg .mkr-yx-ferme,.mkr-svg .mkr-larmes,.mkr-svg .mkr-sueur,
.mkr-svg .mkr-zzz,.mkr-svg .mkr-pense,.mkr-svg .mkr-etoiles{display:none}
.mkr-v-joie .mkr-b-n,.mkr-v-rire .mkr-b-n,.mkr-v-surpris .mkr-b-n,.mkr-v-panique .mkr-b-n,.mkr-v-triste .mkr-b-n,
.mkr-v-dort .mkr-b-n,.mkr-v-pense .mkr-b-n,
.mkr-v-joie .mkr-yeux,.mkr-v-rire .mkr-yeux,.mkr-v-dort .mkr-yeux{display:none}
.mkr-v-joie .mkr-b-rire,.mkr-v-rire .mkr-b-rire,.mkr-v-surpris .mkr-b-o,.mkr-v-panique .mkr-b-o,
.mkr-v-triste .mkr-b-pleure,.mkr-v-triste .mkr-larmes,.mkr-v-dort .mkr-b-dort,.mkr-v-dort .mkr-yx-ferme,.mkr-v-dort .mkr-zzz,
.mkr-v-pense .mkr-b-hmm,.mkr-v-pense .mkr-pense,.mkr-v-panique .mkr-sueur,
.mkr-v-joie .mkr-yx-heureux,.mkr-v-rire .mkr-yx-heureux,
.mkr-p-triomphe .mkr-etoiles,.mkr-g-clin .mkr-etoiles{display:inline}
.mkr-g-clin .mkr-et1,.mkr-g-clin .mkr-et3{display:none}
.mkr-v-content .mkr-sc-g,.mkr-v-content .mkr-sc-d,.mkr-v-joie .mkr-sc-g,.mkr-v-joie .mkr-sc-d,
.mkr-v-rire .mkr-sc-g,.mkr-v-rire .mkr-sc-d{transform:translateY(-2.5px)}
.mkr-v-surpris .mkr-sc-g,.mkr-v-surpris .mkr-sc-d{transform:translateY(-5px)}
.mkr-v-surpris .mkr-yeux{transform:scale(1.1)}
.mkr-v-surpris .mkr-pup{scale:.78}
.mkr-v-panique .mkr-sc-g{transform:translateY(-4px) rotate(-14deg)}
.mkr-v-panique .mkr-sc-d{transform:translateY(-4px) rotate(14deg)}
.mkr-v-panique .mkr-yeux{transform:scale(1.12)}
.mkr-v-panique .mkr-pup{scale:.62}
.mkr-v-triste .mkr-sc-g{transform:rotate(-16deg)}
.mkr-v-triste .mkr-sc-d{transform:rotate(16deg)}
.mkr-v-triste .mkr-pup{translate:0 1.6px}
.mkr-v-malin .mkr-sc-g{transform:translateY(1.5px) rotate(12deg)}
.mkr-v-malin .mkr-sc-d{transform:translateY(1.5px) rotate(-14deg)}
.mkr-v-malin .mkr-yeux{transform:scaleY(.8)}
.mkr-v-malin .mkr-pup{translate:1.6px .4px}
.mkr-v-pense .mkr-sc-d{transform:translateY(-4px) rotate(-8deg)}
.mkr-v-pense .mkr-sc-g{transform:translateY(1px) rotate(6deg)}
.mkr-v-pense .mkr-pup{translate:1.4px -2.4px}
.mkr-v-dort .mkr-sc-g,.mkr-v-dort .mkr-sc-d{transform:translateY(2.5px)}

/* — ce qui vit tout le temps : les yeux, le regard, les accessoires — */
.mkr-svg .mkr-oeil-g,.mkr-svg .mkr-oeil-d{animation:mkrCligne calc(4.2s*var(--k)) infinite}
.mkr-svg .mkr-pup{animation:mkrRegard calc(7s*var(--k)) ease-in-out infinite}
.mkr-svg .mkr-larme1{animation:mkrLarme calc(1s*var(--k)) ease-in infinite}
.mkr-svg .mkr-larme2{animation:mkrLarme calc(1s*var(--k)) ease-in calc(-.45s*var(--k)) infinite}
.mkr-svg .mkr-goutte1{animation:mkrGoutte calc(.9s*var(--k)) ease-in infinite}
.mkr-svg .mkr-goutte2{animation:mkrGoutte calc(.9s*var(--k)) ease-in calc(-.4s*var(--k)) infinite}
.mkr-svg .mkr-z1,.mkr-svg .mkr-z2,.mkr-svg .mkr-z3{animation:mkrZ calc(2.4s*var(--k)) ease-out infinite}
.mkr-svg .mkr-z2{animation-delay:calc(-.8s*var(--k))}
.mkr-svg .mkr-z3{animation-delay:calc(-1.6s*var(--k))}
.mkr-svg .mkr-pe1{animation:mkrBulleP calc(1.6s*var(--k)) ease-in-out infinite}
.mkr-svg .mkr-pe2{animation:mkrBulleP calc(1.6s*var(--k)) ease-in-out calc(-.3s*var(--k)) infinite}
.mkr-svg .mkr-pe3{animation:mkrQuoi calc(1.6s*var(--k)) ease-in-out infinite}
.mkr-svg .mkr-et1{animation:mkrEtoile calc(1.1s*var(--k)) ease-in-out infinite}
.mkr-svg .mkr-et2{animation:mkrEtoile calc(1.1s*var(--k)) ease-in-out calc(-.4s*var(--k)) infinite}
.mkr-svg .mkr-et3{animation:mkrEtoile calc(1.1s*var(--k)) ease-in-out calc(-.75s*var(--k)) infinite}
.mkr-svg .mkr-faisceau{animation:mkrLampe calc(1.3s*var(--k)) ease-in-out infinite alternate}
.mkr-svg .mkr-onde1,.mkr-svg .mkr-onde2{animation:mkrOnde calc(.9s*var(--k)) ease-out infinite}
.mkr-svg .mkr-onde2{animation-delay:calc(-.45s*var(--k))}
.mkr-svg .mkr-dr{animation:mkrDrapeau calc(.7s*var(--k)) ease-in-out infinite alternate}
.mkr-svg .mkr-mch{animation:mkrMouchoir calc(.9s*var(--k)) ease-in-out infinite alternate}
.mkr-parle .mkr-bouche{animation:mkrParle calc(.16s*var(--k)) ease-in-out infinite alternate}
.mkr-v-panique .mkr-pup{animation:mkrTremble calc(.12s*var(--k)) linear infinite}
@keyframes mkrCligne{0%,88%,95%,100%{transform:none}90.5%,92.5%{transform:scaleY(.08)}}
@keyframes mkrRegard{0%,24%,100%{transform:none}28%,46%{transform:translate(1.4px,-.5px)}50%,68%{transform:translate(-1.6px,.4px)}72%{transform:none}}
@keyframes mkrTremble{0%,100%{transform:translate(-.6px,0)}50%{transform:translate(.6px,-.4px)}}
@keyframes mkrLarme{0%{transform:translateY(-6px) scale(.5);opacity:0}20%{transform:translateY(-2px);opacity:1}100%{transform:translateY(16px) scale(.8);opacity:0}}
@keyframes mkrGoutte{0%{transform:translateY(-3px) scale(.6);opacity:0}25%{transform:none;opacity:1}100%{transform:translateY(9px) scale(.9);opacity:0}}
@keyframes mkrZ{0%{translate:-6px 8px;opacity:0}25%{opacity:1}100%{translate:6px -10px;opacity:0}}
@keyframes mkrBulleP{0%,100%{transform:none}50%{transform:scale(1.3)}}
@keyframes mkrQuoi{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -2.5px;rotate:12deg}}
@keyframes mkrEtoile{0%,100%{transform:scale(.3);opacity:.2}50%{transform:scale(1.25) rotate(45deg);opacity:1}}
@keyframes mkrLampe{from{opacity:.35}to{opacity:.75}}
@keyframes mkrOnde{0%{opacity:0;translate:-4px 0}30%{opacity:1}100%{opacity:0;translate:5px 0}}
@keyframes mkrDrapeau{from{transform:skewY(-6deg) scaleX(.94)}to{transform:skewY(5deg)}}
@keyframes mkrMouchoir{from{transform:rotate(-6deg) skewX(4deg)}to{transform:rotate(5deg) skewX(-4deg)}}
@keyframes mkrParle{from{transform:scaleY(.68)}to{transform:scaleY(1.12)}}

/* ==========================================================================
   LES POSES (en boucle). Chaque pose donne aussi une image fixe (transform),
   gardée quand les animations sont réduites.
   ========================================================================== */
/* — attend : il respire, cligne, renifle, balance la queue — */
.mkr-p-attend .mkr-corps{animation:mkrRespire calc(2.4s*var(--k)) ease-in-out infinite alternate}
.mkr-p-attend .mkr-tete{animation:mkrTeteA calc(5s*var(--k)) ease-in-out infinite}
.mkr-p-attend .mkr-queue{animation:mkrQueueA calc(2.2s*var(--k)) ease-in-out infinite alternate}
.mkr-p-attend .mkr-queue2{animation:mkrQueue2A calc(2.2s*var(--k)) ease-in-out calc(-.6s*var(--k)) infinite alternate}
.mkr-p-attend .mkr-or-d{animation:mkrOreille calc(4.6s*var(--k)) ease-in-out infinite}
.mkr-p-attend .mkr-or-g{animation:mkrOreille calc(6.1s*var(--k)) ease-in-out calc(-2s*var(--k)) infinite}
.mkr-p-attend .mkr-nez,.mkr-p-attend .mkr-moust{animation:mkrRenifle calc(3.4s*var(--k)) ease-in-out infinite}
.mkr-p-attend .mkr-bras-d{animation:mkrTient calc(2.4s*var(--k)) ease-in-out infinite alternate}
.mkr-p-attend .mkr-bras-g{animation:mkrBalance calc(2.4s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrRespire{from{transform:none}to{transform:scale(1.03,.97)}}
@keyframes mkrTeteA{0%,100%{transform:none}22%{transform:rotate(-4deg)}50%{transform:rotate(2deg) translateY(.6px)}74%{transform:rotate(-1.5deg)}}
@keyframes mkrQueueA{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
@keyframes mkrQueue2A{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes mkrOreille{0%,82%,100%{transform:none}85%{transform:rotate(-15deg)}88%{transform:rotate(7deg)}91%{transform:rotate(-5deg)}94%{transform:none}}
@keyframes mkrRenifle{0%,58%,82%,100%{transform:none}62%,70%{transform:scale(1.12) rotate(-5deg)}66%,74%{transform:scale(.97)}}
@keyframes mkrTient{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes mkrBalance{from{transform:rotate(4deg)}to{transform:rotate(-5deg)}}

/* — court : penché en avant, jambes en ciseaux, bras qui pompent, queue au vent — */
.mkr-p-court .mkr-tout{transform:rotate(14deg);animation:mkrCourt calc(.3s*var(--k)) ease-in-out infinite}
.mkr-p-court .mkr-pied-g{transform:rotate(-40deg);animation:mkrJambe calc(.3s*var(--k)) ease-in-out infinite}
.mkr-p-court .mkr-pied-d{transform:rotate(36deg);animation:mkrJambe calc(.3s*var(--k)) ease-in-out calc(-.15s*var(--k)) infinite}
.mkr-p-court .mkr-bras-g{transform:rotate(45deg);animation:mkrBrasG calc(.3s*var(--k)) ease-in-out infinite}
.mkr-p-court .mkr-avbras-g{transform:rotate(-70deg)}
.mkr-p-court .mkr-bras-d{transform:rotate(-13deg);animation:mkrBrasD calc(.3s*var(--k)) ease-in-out infinite}
.mkr-p-court .mkr-avbras-d{transform:rotate(-8deg)}
.mkr-p-court .mkr-tete{transform:rotate(-6deg);animation:mkrTeteC calc(.15s*var(--k)) ease-in-out infinite alternate}
.mkr-p-court .mkr-queue{transform:rotate(6deg);animation:mkrQueueC calc(.3s*var(--k)) ease-in-out infinite}
.mkr-p-court .mkr-queue2{animation:mkrQueue2C calc(.3s*var(--k)) ease-in-out calc(-.08s*var(--k)) infinite}
.mkr-p-court .mkr-or-g{transform:rotate(-12deg);animation:mkrOrC calc(.15s*var(--k)) ease-in-out infinite alternate}
.mkr-p-court .mkr-or-d{transform:rotate(-12deg);animation:mkrOrC calc(.15s*var(--k)) ease-in-out calc(-.07s*var(--k)) infinite alternate}
.mkr-p-court .mkr-pup{animation:none;transform:translate(1.6px,0)}
@keyframes mkrCourt{0%,50%,100%{transform:rotate(14deg) scale(1.03,.97)}25%,75%{transform:translateY(-8px) rotate(16deg) scale(.98,1.03)}}
@keyframes mkrJambe{0%,100%{transform:rotate(-44deg) translateY(-1px)}50%{transform:rotate(38deg)}}
@keyframes mkrBrasG{0%,100%{transform:rotate(45deg)}50%{transform:rotate(-40deg)}}
@keyframes mkrBrasD{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(40deg)}}
@keyframes mkrTeteC{from{transform:rotate(-6deg) translateY(1px)}to{transform:rotate(-3deg) translateY(-1px)}}
@keyframes mkrQueueC{0%,100%{transform:rotate(4deg)}50%{transform:rotate(14deg)}}
@keyframes mkrQueue2C{0%,100%{transform:rotate(-22deg)}50%{transform:rotate(18deg)}}
@keyframes mkrOrC{from{transform:rotate(-16deg)}to{transform:rotate(-6deg)}}

/* — marche — */
.mkr-p-marche .mkr-tout{transform:rotate(3deg);animation:mkrMarche calc(.6s*var(--k)) ease-in-out infinite}
.mkr-p-marche .mkr-pied-g{animation:mkrPas calc(.6s*var(--k)) ease-in-out infinite}
.mkr-p-marche .mkr-pied-d{animation:mkrPas calc(.6s*var(--k)) ease-in-out calc(-.3s*var(--k)) infinite}
.mkr-p-marche .mkr-bras-g{animation:mkrBrasM calc(.6s*var(--k)) ease-in-out infinite}
.mkr-p-marche .mkr-bras-d{animation:mkrBrasDM calc(.6s*var(--k)) ease-in-out infinite}
.mkr-p-marche .mkr-queue{animation:mkrQueueA calc(.6s*var(--k)) ease-in-out infinite alternate}
.mkr-p-marche .mkr-queue2{animation:mkrQueue2A calc(.6s*var(--k)) ease-in-out calc(-.15s*var(--k)) infinite alternate}
.mkr-p-marche .mkr-tete{animation:mkrTeteM calc(.3s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrMarche{0%,50%,100%{transform:rotate(3deg)}25%,75%{transform:translateY(-3.5px) rotate(4deg)}}
@keyframes mkrPas{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(22deg)}}
@keyframes mkrBrasM{0%,100%{transform:rotate(22deg)}50%{transform:rotate(-20deg)}}
@keyframes mkrBrasDM{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(8deg)}}
@keyframes mkrTeteM{from{transform:rotate(-3deg) translateY(.6px)}to{transform:rotate(-1deg) translateY(-.6px)}}

/* — salut : la main libre en l'air qui s'agite — */
.mkr-p-salut .mkr-bras-g{transform:rotate(130deg);animation:mkrAgiteB calc(.5s*var(--k)) ease-in-out infinite alternate}
.mkr-p-salut .mkr-avbras-g{transform:rotate(25deg);animation:mkrAgite calc(.5s*var(--k)) ease-in-out calc(-.12s*var(--k)) infinite alternate}
.mkr-p-salut .mkr-bras-d{transform:rotate(-8deg)}
.mkr-p-salut .mkr-tete{transform:rotate(-6deg);animation:mkrTeteS calc(1s*var(--k)) ease-in-out infinite alternate}
.mkr-p-salut .mkr-tout{animation:mkrHop calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-salut .mkr-queue{animation:mkrQueueA calc(.5s*var(--k)) ease-in-out infinite alternate}
.mkr-p-salut .mkr-queue2{animation:mkrQueue2A calc(.5s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrAgite{from{transform:rotate(8deg)}to{transform:rotate(42deg)}}
@keyframes mkrAgiteB{from{transform:rotate(120deg)}to{transform:rotate(142deg)}}
@keyframes mkrTeteS{from{transform:rotate(-7deg)}to{transform:rotate(-2deg)}}
@keyframes mkrHop{0%,40%,100%{transform:none}55%{transform:translateY(-4px) scale(.98,1.02)}70%{transform:scale(1.03,.97)}}

/* — saute (sur place) — */
.mkr-p-saute .mkr-tout{animation:mkrSaute calc(.86s*var(--k)) infinite}
.mkr-p-saute .mkr-bras-g{transform:rotate(15deg);animation:mkrSauteBG calc(.86s*var(--k)) ease-in-out infinite}
.mkr-p-saute .mkr-avbras-g{animation:mkrSauteAG calc(.86s*var(--k)) ease-in-out infinite}
.mkr-p-saute .mkr-bras-d{transform:rotate(10deg);animation:mkrSauteBD calc(.86s*var(--k)) ease-in-out infinite}
.mkr-p-saute .mkr-avbras-d{animation:mkrSauteAD calc(.86s*var(--k)) ease-in-out infinite}
.mkr-p-saute .mkr-pied-g,.mkr-p-saute .mkr-pied-d{animation:mkrSauteP calc(.86s*var(--k)) ease-in-out infinite}
.mkr-p-saute .mkr-queue{animation:mkrSauteQ calc(.86s*var(--k)) ease-in-out infinite}
.mkr-p-saute .mkr-or-g,.mkr-p-saute .mkr-or-d{animation:mkrSauteO calc(.86s*var(--k)) ease-in-out infinite}
.mkr-rat[data-pose="saute"] .mkr-ombre{animation:mkrOmbreS calc(.86s*var(--mkr-v,1)) infinite}
@keyframes mkrSaute{0%{transform:scale(1.12,.86);animation-timing-function:ease-out}
  16%{transform:translateY(-4px) scale(.9,1.12);animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  48%{transform:translateY(-30px) scale(1);animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  80%{transform:translateY(-3px) scale(.94,1.07);animation-timing-function:ease-out}
  88%{transform:scale(1.14,.84)}100%{transform:scale(1.12,.86)}}
@keyframes mkrSauteBG{0%,88%,100%{transform:rotate(15deg)}48%{transform:rotate(125deg)}}
@keyframes mkrSauteAG{0%,88%,100%{transform:rotate(-20deg)}48%{transform:rotate(24deg)}}
@keyframes mkrSauteBD{0%,88%,100%{transform:rotate(10deg)}48%{transform:rotate(-78deg)}}
@keyframes mkrSauteAD{0%,88%,100%{transform:none}48%{transform:rotate(63deg)}}
@keyframes mkrSauteP{0%,16%,88%,100%{transform:none}48%{transform:rotate(-28deg)}}
@keyframes mkrSauteQ{0%,100%{transform:rotate(-12deg)}48%{transform:rotate(22deg)}}
@keyframes mkrSauteO{0%,100%{transform:rotate(6deg)}30%{transform:rotate(-14deg)}60%{transform:rotate(8deg)}}
@keyframes mkrOmbreS{0%,88%,100%{transform:none;opacity:1}48%{transform:scale(.6);opacity:.5}}

/* — danse — */
.mkr-p-danse .mkr-tout{animation:mkrDanse calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-tete{animation:mkrDanseT calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-bras-g{transform:rotate(125deg);animation:mkrDanseBG calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-avbras-g{animation:mkrDanseAG calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-bras-d{animation:mkrDanseBD calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-avbras-d{animation:mkrDanseAD calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-pied-g{animation:mkrDanseP calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-pied-d{animation:mkrDanseP calc(1s*var(--k)) ease-in-out calc(-.5s*var(--k)) infinite}
.mkr-p-danse .mkr-queue{animation:mkrDanseQ calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-danse .mkr-queue2{animation:mkrDanseQ2 calc(1s*var(--k)) ease-in-out calc(-.2s*var(--k)) infinite}
.mkr-p-danse .mkr-or-g,.mkr-p-danse .mkr-or-d{animation:mkrSauteO calc(.5s*var(--k)) ease-in-out infinite}
@keyframes mkrDanse{0%,100%{transform:rotate(-8deg)}25%{transform:translateY(-6px)}50%{transform:rotate(8deg)}75%{transform:translateY(-6px)}}
@keyframes mkrDanseT{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@keyframes mkrDanseBG{0%,100%{transform:rotate(125deg)}50%{transform:rotate(30deg)}}
@keyframes mkrDanseAG{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-30deg)}}
@keyframes mkrDanseBD{0%,100%{transform:rotate(10deg)}50%{transform:rotate(-78deg)}}
@keyframes mkrDanseAD{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(63deg)}}
@keyframes mkrDanseP{0%,40%,100%{transform:none}15%{transform:rotate(-30deg) translateY(-3px)}}
@keyframes mkrDanseQ{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(16deg)}}
@keyframes mkrDanseQ2{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}

/* — applaudit : les deux pattes qui se rejoignent devant le gilet — */
.mkr-p-applaudit .mkr-bras-d{transform:none}
.mkr-p-applaudit .mkr-avbras-d{transform:rotate(-136deg);animation:mkrClapD calc(.36s*var(--k)) ease-in-out infinite}
.mkr-p-applaudit .mkr-bras-g{transform:rotate(-53deg)}
.mkr-p-applaudit .mkr-avbras-g{transform:rotate(-42deg);animation:mkrClapG calc(.36s*var(--k)) ease-in-out infinite}
.mkr-p-applaudit .mkr-tout{animation:mkrClapT calc(.36s*var(--k)) ease-in-out infinite}
.mkr-p-applaudit .mkr-tete{animation:mkrTeteS calc(.72s*var(--k)) ease-in-out infinite alternate}
.mkr-p-applaudit .mkr-queue{animation:mkrQueueA calc(.36s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrClapD{0%,100%{transform:rotate(-127deg)}50%{transform:rotate(-142deg)}}
@keyframes mkrClapG{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(-56deg)}}
@keyframes mkrClapT{0%,100%{transform:none}50%{transform:translateY(-2px) scale(1.01,.99)}}

/* — pleure : tête basse, oreilles tombantes, sanglots — */
.mkr-p-pleure .mkr-tout{transform:translateY(2px);animation:mkrSanglot calc(.9s*var(--k)) ease-in-out infinite}
.mkr-p-pleure .mkr-tete{transform:rotate(10deg);animation:mkrSanglotT calc(.9s*var(--k)) ease-in-out infinite}
.mkr-p-pleure .mkr-or-g{transform:rotate(-30deg)}
.mkr-p-pleure .mkr-or-d{transform:rotate(32deg)}
.mkr-p-pleure .mkr-queue{transform:rotate(-24deg)}
.mkr-p-pleure .mkr-queue2{transform:rotate(30deg)}
.mkr-p-pleure .mkr-bras-g{transform:rotate(-8deg)}
.mkr-p-pleure .mkr-bras-d{transform:rotate(25deg)}
.mkr-p-pleure .mkr-avbras-d{transform:rotate(55deg)}
.mkr-o-mouchoir.mkr-p-pleure .mkr-bras-d{transform:rotate(-104deg)}
.mkr-o-mouchoir.mkr-p-pleure .mkr-avbras-d{transform:rotate(-32deg);animation:mkrEssuie calc(.9s*var(--k)) ease-in-out infinite}
@keyframes mkrSanglot{0%,100%{transform:translateY(2px) scale(1.02,.97)}20%{transform:scale(.99,1.02)}35%{transform:translateY(2px) scale(1.02,.97)}50%{transform:translateY(.5px) scale(1,1.01)}}
@keyframes mkrSanglotT{0%,35%,100%{transform:rotate(10deg)}20%,50%{transform:rotate(7deg) translateY(-1px)}}
@keyframes mkrEssuie{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(-40deg)}}

/* — rit : tête en arrière, une patte sur le ventre, il se secoue — */
.mkr-p-rit .mkr-tout{transform:rotate(-3deg);animation:mkrRit calc(.28s*var(--k)) ease-in-out infinite}
.mkr-p-rit .mkr-tete{transform:rotate(-12deg);animation:mkrRitT calc(.28s*var(--k)) ease-in-out infinite}
.mkr-p-rit .mkr-bras-g{transform:rotate(-35deg)}
.mkr-p-rit .mkr-avbras-g{transform:rotate(-38deg)}
.mkr-p-rit .mkr-bras-d{transform:rotate(-20deg);animation:mkrRitB calc(.28s*var(--k)) ease-in-out infinite}
.mkr-p-rit .mkr-pied-d{animation:mkrTape calc(.56s*var(--k)) ease-in-out infinite}
.mkr-p-rit .mkr-queue{animation:mkrQueueA calc(.28s*var(--k)) ease-in-out infinite alternate}
.mkr-p-rit .mkr-bouche{animation:mkrParle calc(.14s*var(--k)) ease-in-out infinite alternate}
.mkr-p-rit .mkr-joues{transform:scale(1.25)}
@keyframes mkrRit{0%,100%{transform:rotate(-3deg) scale(1.02,.98)}50%{transform:translateY(-3px) rotate(-5deg) scale(.98,1.02)}}
@keyframes mkrRitT{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-8deg) translateY(-1px)}}
@keyframes mkrRitB{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(-30deg)}}
@keyframes mkrTape{0%,50%,100%{transform:none}25%{transform:rotate(-18deg)}}

/* — pointe : le bras tendu devant lui — */
.mkr-p-pointe .mkr-bras-d{transform:rotate(-67deg);animation:mkrPointe calc(.9s*var(--k)) ease-in-out infinite}
.mkr-p-pointe .mkr-avbras-d{transform:rotate(82deg)}
.mkr-p-pointe .mkr-tout{transform:rotate(4deg);animation:mkrPointeT calc(.9s*var(--k)) ease-in-out infinite}
.mkr-p-pointe .mkr-bras-g{transform:rotate(42deg)}
.mkr-p-pointe .mkr-avbras-g{transform:rotate(-58deg)}
.mkr-p-pointe .mkr-pup{animation:none;transform:translate(1.8px,.4px)}
.mkr-p-pointe .mkr-queue{animation:mkrQueueA calc(.9s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrPointe{0%,100%{transform:rotate(-67deg)}50%{transform:rotate(-61deg)}}
@keyframes mkrPointeT{0%,100%{transform:rotate(4deg)}50%{transform:rotate(6deg) translateX(1px)}}

/* — lance : il distribue, une carte file du paquet à chaque coup de poignet — */
.mkr-p-lance .mkr-bras-d{animation:mkrLanceB calc(.7s*var(--k)) ease-in-out infinite}
.mkr-p-lance .mkr-avbras-d{animation:mkrLanceA calc(.7s*var(--k)) ease-in-out infinite}
.mkr-p-lance .mkr-main-d{animation:mkrLanceM calc(.7s*var(--k)) ease-in-out infinite}
.mkr-p-lance .mkr-pq-v1{animation:mkrLanceC calc(.7s*var(--k)) ease-out infinite}
.mkr-p-lance .mkr-tout{animation:mkrLanceT calc(.7s*var(--k)) ease-in-out infinite}
.mkr-p-lance .mkr-tete{animation:mkrLanceTe calc(.7s*var(--k)) ease-in-out infinite}
.mkr-p-lance .mkr-bras-g{animation:mkrLanceG calc(.7s*var(--k)) ease-in-out infinite}
.mkr-p-lance .mkr-queue{animation:mkrQueueA calc(.7s*var(--k)) ease-in-out infinite alternate}
.mkr-p-lance .mkr-pup{animation:none;transform:translate(1.8px,.6px)}
@keyframes mkrLanceB{0%,100%{transform:rotate(-8deg)}40%{transform:rotate(16deg)}56%{transform:rotate(-63deg)}72%{transform:rotate(-50deg)}}
@keyframes mkrLanceA{0%,100%{transform:rotate(-14deg)}40%{transform:rotate(-60deg)}56%{transform:rotate(82deg)}72%{transform:rotate(60deg)}}
@keyframes mkrLanceM{0%,100%{transform:none}40%{transform:rotate(-30deg)}56%{transform:rotate(35deg)}76%{transform:rotate(10deg)}}
@keyframes mkrLanceC{0%,50%{transform:none;opacity:0}52%{transform:none;opacity:1}75%{transform:translate(40px,-40px) rotate(70deg) scale(.9);opacity:1}
  84%,100%{transform:translate(52px,-50px) rotate(95deg) scale(.8);opacity:0}}
@keyframes mkrLanceT{0%,100%{transform:none}40%{transform:rotate(-3deg)}58%{transform:rotate(4deg)}}
@keyframes mkrLanceTe{0%,100%{transform:none}40%{transform:rotate(-4deg)}60%{transform:rotate(5deg)}}
@keyframes mkrLanceG{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(-25deg)}}

/* — melange : les cartes tournoient au-dessus de sa patte — */
.mkr-p-melange .mkr-pq-v1,.mkr-p-melange .mkr-pq-v2,.mkr-p-melange .mkr-pq-v3{animation:mkrCascade calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-melange .mkr-pq-v2{animation-delay:calc(-.33s*var(--k))}
.mkr-p-melange .mkr-pq-v3{animation-delay:calc(-.66s*var(--k))}
.mkr-p-melange .mkr-pq-a{animation:mkrRiffle calc(.5s*var(--k)) ease-in-out infinite alternate}
.mkr-p-melange .mkr-bras-d{transform:rotate(-19deg)}
.mkr-p-melange .mkr-avbras-d{animation:mkrMelA calc(.5s*var(--k)) ease-in-out infinite alternate}
.mkr-p-melange .mkr-tete{animation:mkrMelT calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-melange .mkr-pup{animation:mkrMelP calc(1s*var(--k)) ease-in-out infinite}
.mkr-p-melange .mkr-bras-g{transform:rotate(-40deg)}
.mkr-p-melange .mkr-avbras-g{transform:rotate(-50deg)}
.mkr-p-melange .mkr-queue{animation:mkrQueueA calc(1s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrCascade{0%,100%{transform:none}20%{transform:translate(6px,-24px) rotate(-70deg)}45%{transform:translate(22px,-38px) rotate(-180deg)}
  70%{transform:translate(32px,-18px) rotate(-290deg)}88%{transform:translate(12px,-3px) rotate(-350deg)}}
@keyframes mkrRiffle{from{transform:rotate(-5deg)}to{transform:rotate(4deg)}}
@keyframes mkrMelA{from{transform:rotate(8deg)}to{transform:rotate(-2deg)}}
@keyframes mkrMelT{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-7deg)}}
@keyframes mkrMelP{0%,100%{transform:translate(1.6px,0)}50%{transform:translate(1.4px,-2px)}}

/* — assis — */
.mkr-p-assis .mkr-tout,.mkr-p-dort .mkr-tout{transform:translateY(9px) rotate(-5deg)}
.mkr-p-assis .mkr-pied-g,.mkr-p-dort .mkr-pied-g{transform:translate(22px,2px) rotate(-70deg)}
.mkr-p-assis .mkr-pied-d,.mkr-p-dort .mkr-pied-d{transform:translate(10px,4px) rotate(-80deg)}
.mkr-p-assis .mkr-corps{animation:mkrRespire calc(2.6s*var(--k)) ease-in-out infinite alternate}
.mkr-p-assis .mkr-tete{animation:mkrTeteA calc(5s*var(--k)) ease-in-out infinite}
.mkr-p-assis .mkr-queue{transform:rotate(-14deg);animation:mkrQueueAs calc(2.4s*var(--k)) ease-in-out infinite alternate}
.mkr-p-assis .mkr-queue2{animation:mkrQueue2A calc(2.4s*var(--k)) ease-in-out infinite alternate}
.mkr-p-assis .mkr-bras-d{transform:rotate(14deg)}
.mkr-p-assis .mkr-avbras-d{transform:rotate(16deg)}
.mkr-p-assis .mkr-bras-g{transform:rotate(-14deg)}
.mkr-p-assis .mkr-or-d{animation:mkrOreille calc(4.6s*var(--k)) ease-in-out infinite}
.mkr-rat[data-pose="assis"] .mkr-ombre,.mkr-rat[data-pose="dort"] .mkr-ombre{transform:scaleX(1.25)}
@keyframes mkrQueueAs{from{transform:rotate(-18deg)}to{transform:rotate(-10deg)}}

/* — triomphe : bras en l'air, il bondit, des étoiles — */
.mkr-p-triomphe .mkr-tout{transform:rotate(-4deg);animation:mkrTri calc(.9s*var(--k)) infinite}
.mkr-p-triomphe .mkr-bras-g{transform:rotate(129deg);animation:mkrTriBG calc(.9s*var(--k)) ease-in-out infinite}
.mkr-p-triomphe .mkr-avbras-g{transform:rotate(18deg)}
.mkr-p-triomphe .mkr-bras-d{transform:rotate(-90deg);animation:mkrTriBD calc(.9s*var(--k)) ease-in-out infinite}
.mkr-p-triomphe .mkr-avbras-d{transform:rotate(82deg)}
.mkr-p-triomphe .mkr-tete{transform:rotate(-10deg)}
.mkr-p-triomphe .mkr-queue{animation:mkrDanseQ calc(.45s*var(--k)) ease-in-out infinite}
.mkr-p-triomphe .mkr-pied-g{animation:mkrTriP calc(.9s*var(--k)) ease-in-out infinite}
@keyframes mkrTri{0%,100%{transform:rotate(-4deg) scale(1.06,.94);animation-timing-function:ease-out}
  35%{transform:translateY(-12px) rotate(-5deg) scale(.96,1.05);animation-timing-function:ease-in}70%{transform:rotate(-4deg) scale(1.04,.96)}}
@keyframes mkrTriBG{0%,100%{transform:rotate(122deg)}35%{transform:rotate(136deg)}}
@keyframes mkrTriBD{0%,100%{transform:rotate(-84deg)}35%{transform:rotate(-96deg)}}
@keyframes mkrTriP{0%,70%,100%{transform:none}35%{transform:rotate(-25deg)}}

/* — réfléchit : un doigt au menton, il tapote, la queue s'impatiente — */
.mkr-p-reflechit .mkr-bras-d{transform:rotate(-21deg)}
.mkr-p-reflechit .mkr-avbras-d{transform:rotate(-65deg)}
.mkr-p-reflechit .mkr-main-d{animation:mkrTapote calc(.8s*var(--k)) ease-in-out infinite}
.mkr-p-reflechit .mkr-tete{transform:rotate(-6deg);animation:mkrRefT calc(3s*var(--k)) ease-in-out infinite alternate}
.mkr-p-reflechit .mkr-bras-g{transform:rotate(-35deg)}
.mkr-p-reflechit .mkr-avbras-g{transform:rotate(-38deg)}
.mkr-p-reflechit .mkr-pied-d{animation:mkrTape calc(1.2s*var(--k)) ease-in-out infinite}
.mkr-p-reflechit .mkr-queue{animation:mkrQueueA calc(1.8s*var(--k)) ease-in-out infinite alternate}
@keyframes mkrTapote{0%,60%,100%{transform:none}70%{transform:rotate(-12deg)}80%{transform:none}90%{transform:rotate(-12deg)}}
@keyframes mkrRefT{from{transform:rotate(-8deg)}to{transform:rotate(-3deg)}}

/* — panique : il court sur place, bras au ciel, queue raide — */
.mkr-p-panique .mkr-tout{animation:mkrPanique calc(.18s*var(--k)) linear infinite}
.mkr-p-panique .mkr-pied-g{animation:mkrJambe calc(.2s*var(--k)) linear infinite}
.mkr-p-panique .mkr-pied-d{animation:mkrJambe calc(.2s*var(--k)) linear calc(-.1s*var(--k)) infinite}
.mkr-p-panique .mkr-bras-g{transform:rotate(130deg);animation:mkrAgiteG calc(.22s*var(--k)) ease-in-out infinite alternate}
.mkr-p-panique .mkr-avbras-g{animation:mkrAgiteAG calc(.16s*var(--k)) ease-in-out infinite alternate}
.mkr-p-panique .mkr-bras-d{transform:rotate(-60deg);animation:mkrAgiteD calc(.2s*var(--k)) ease-in-out infinite alternate}
.mkr-p-panique .mkr-avbras-d{animation:mkrAgiteAD calc(.17s*var(--k)) ease-in-out infinite alternate}
.mkr-p-panique .mkr-queue{transform:rotate(34deg);animation:mkrVibre calc(.1s*var(--k)) linear infinite alternate}
.mkr-p-panique .mkr-or-g{transform:rotate(-22deg)}
.mkr-p-panique .mkr-or-d{transform:rotate(-24deg)}
@keyframes mkrPanique{0%,100%{transform:translate(-1.5px,0) rotate(-2deg)}50%{transform:translate(1.5px,-3px) rotate(2deg)}}
@keyframes mkrAgiteG{from{transform:rotate(110deg)}to{transform:rotate(150deg)}}
@keyframes mkrAgiteAG{from{transform:rotate(-10deg)}to{transform:rotate(50deg)}}
@keyframes mkrAgiteD{from{transform:rotate(-78deg)}to{transform:rotate(-40deg)}}
@keyframes mkrAgiteAD{from{transform:rotate(63deg)}to{transform:rotate(30deg)}}
@keyframes mkrVibre{from{transform:rotate(30deg)}to{transform:rotate(38deg)}}

/* — dort : assis, tête tombée, des Z — */
.mkr-p-dort .mkr-tete{transform:rotate(14deg);animation:mkrDortT calc(3.2s*var(--k)) ease-in-out infinite}
.mkr-p-dort .mkr-corps{animation:mkrDortC calc(3.2s*var(--k)) ease-in-out infinite}
.mkr-p-dort .mkr-or-g{transform:rotate(-24deg)}
.mkr-p-dort .mkr-or-d{transform:rotate(26deg)}
.mkr-p-dort .mkr-bras-d{transform:rotate(15deg)}
.mkr-p-dort .mkr-avbras-d{transform:rotate(20deg)}
.mkr-p-dort .mkr-bras-g{transform:rotate(-12deg)}
.mkr-p-dort .mkr-queue{transform:rotate(-18deg)}
@keyframes mkrDortT{0%,100%{transform:rotate(13deg)}50%{transform:rotate(17deg) translateY(1px)}}
@keyframes mkrDortC{0%,100%{transform:none}50%{transform:scale(1.05,.96)}}

/* — air (pose interne : en plein saut) — */
.mkr-p-air .mkr-bras-g{transform:rotate(125deg)}
.mkr-p-air .mkr-avbras-g{transform:rotate(24deg)}
.mkr-p-air .mkr-bras-d{transform:rotate(-78deg)}
.mkr-p-air .mkr-avbras-d{transform:rotate(63deg)}
.mkr-p-air .mkr-pied-g{transform:rotate(-34deg)}
.mkr-p-air .mkr-pied-d{transform:rotate(-18deg)}
.mkr-p-air .mkr-queue{transform:rotate(18deg)}
.mkr-p-air .mkr-queue2{transform:rotate(-20deg)}
.mkr-p-air .mkr-or-g{transform:rotate(-14deg)}
.mkr-p-air .mkr-or-d{transform:rotate(-18deg)}

/* — animations réduites : les poses restent, figées — */
.mkr-fige .mkr-svg *,.mkr-fige .mkr-ombre{animation:none!important}
@media (prefers-reduced-motion:reduce){ .mkr-svg *,.mkr-rat .mkr-ombre{animation:none!important} }

/* — rat_jeu — */
/* ==========================================================================
   MÉTRO KING · LE RAT MÈNE LA PARTIE (lot rat_jeu) — préfixe mkr-j-
   ========================================================================== */
/* — la plaque émaillée suspendue — */
.mkr-j-plaque{z-index:12;transform:translate(-50%,0);transform-origin:50% 0;pointer-events:none}
.mkr-j-chaines{position:relative;height:var(--ch,0px)}
.mkr-j-chaines i{position:absolute;top:-6px;bottom:-4px;width:5px;border-radius:3px;
  background:repeating-linear-gradient(180deg,#C9CFD6 0 5px,#5B636D 5px 7px,#9AA2AC 7px 10px);box-shadow:0 0 0 1.5px #0B0E13}
.mkr-j-chaines i:first-child{left:16%}.mkr-j-chaines i:last-child{right:16%}
.mkr-j-pl{position:relative;padding:.6em 1.1em .7em;border-radius:14px;text-align:center;color:#fff;background:#173C8C;
  border:3px solid #0B0E13;box-shadow:inset 0 0 0 3px #173C8C,inset 0 0 0 5.5px #FBF6E9,0 6px 0 #0B0E13,0 18px 28px rgba(0,0,0,.42)}
.mkr-j-pl::before{content:"";position:absolute;left:8px;right:40%;top:7px;height:28%;border-radius:10px 40px 40px 6px;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none}
.mkr-j-pl--rouge{background:#B3122A;box-shadow:inset 0 0 0 3px #B3122A,inset 0 0 0 5.5px #FBF6E9,0 6px 0 #0B0E13,0 18px 28px rgba(0,0,0,.42)}
.mkr-j-pl small{display:block;font-family:var(--mono,monospace);font-size:clamp(.58rem,1.7vw,.76rem);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#FFCE00}
.mkr-j-pl b{display:block;margin-top:.08em;font-family:var(--display,inherit);font-weight:900;font-size:clamp(1.45rem,4.6vw,2.5rem);line-height:1;
  letter-spacing:-.01em;text-shadow:0 3px 0 #0B0E13}
.mkr-j-pl em{display:block;font-style:normal;font-weight:700;font-size:clamp(.66rem,1.9vw,.86rem);color:#DCE6FA}
/* la ligne des dix manches */
.mkr-j-ligne{position:relative;display:flex;justify-content:space-between;align-items:center;height:20px;margin:.5em .2em .38em}
.mkr-j-rail{position:absolute;left:5px;right:5px;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;
  background:linear-gradient(90deg,#FFCE00 0 var(--f,0%),rgba(255,255,255,.35) var(--f,0%) 100%);box-shadow:0 0 0 1.5px #0B0E13}
.mkr-j-ligne i{position:relative;width:11px;height:11px;flex:none;border-radius:50%;box-sizing:border-box;background:#173C8C;border:2.5px solid #FBF6E9;
  box-shadow:0 0 0 1.5px #0B0E13}
.mkr-j-pl--rouge .mkr-j-ligne i{background:#B3122A}
.mkr-j-ligne i.mkr-j-fait{background:#FFCE00}
.mkr-j-ligne i.mkr-j-ici{width:19px;height:19px;background:#E3051C;border:3px solid #FBF6E9}
.mkr-j-ligne i.mkr-j-ici::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2.5px solid #FFCE00;animation:mkr-j-pouls 1s ease-out infinite}
.mkr-j-ligne u{position:absolute;left:50%;top:-1.45em;transform:translateX(-50%);text-decoration:none;font-family:var(--display,inherit);font-weight:900;
  font-size:.62rem;color:#FFCE00;text-shadow:0 1px 0 #0B0E13}
@keyframes mkr-j-pouls{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}

/* — les mots qui jaillissent du mégaphone — */
.mkr-j-mot{z-index:8;width:max-content;font-family:var(--display,inherit);font-weight:900;font-size:clamp(1.7rem,4.6vw,2.8rem);line-height:1;color:#FBF6E9;
  letter-spacing:-.01em;pointer-events:none;
  text-shadow:-2px -2px 0 #0B0E13,2px -2px 0 #0B0E13,-2px 2px 0 #0B0E13,2px 2px 0 #0B0E13,0 -2.6px 0 #0B0E13,0 2.6px 0 #0B0E13,-2.6px 0 0 #0B0E13,2.6px 0 0 #0B0E13,0 6px 0 #0B0E13}
.mkr-j-mot span{position:relative}
.mkr-j-mot.mkr-j-fort{font-size:clamp(2.5rem,6.6vw,4rem);color:#FFCE00}
.mkr-j-boum{position:absolute;left:50%;top:50%;width:calc(100% + 1.3em);height:auto;transform:translate(-50%,-50%);animation:mkr-j-boum 1.2s linear infinite}
@keyframes mkr-j-boum{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(22.5deg)}}

/* — la baguette du croupier — */
.mkr-j-bag{z-index:6;height:6px;margin-top:-3px;transform-origin:0 50%;border-radius:3px;pointer-events:none;
  background:linear-gradient(180deg,#E0A462,#9C5A2C);box-shadow:0 0 0 1.6px #0B0E13,0 3px 4px rgba(0,0,0,.3)}
.mkr-j-bag::before{content:"";position:absolute;right:9px;top:-1px;width:6px;height:8px;background:#FBF6E9;box-shadow:0 0 0 1.4px #0B0E13}
.mkr-j-bag::after{content:"";position:absolute;right:-6px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#E3051C;
  box-shadow:0 0 0 1.8px #0B0E13,inset 2px 2px 0 rgba(255,255,255,.45)}
/* — la ligne montrée — */
.mkr-j-surl{z-index:5;box-sizing:border-box;border-radius:10px;border:3px solid #FFCE00;pointer-events:none;
  box-shadow:0 0 0 1.6px #0B0E13,inset 0 0 0 1.6px #0B0E13,0 0 18px rgba(255,206,0,.6),inset 0 0 22px rgba(255,206,0,.25)}
.mkr-j-surl.ko{border-color:#9AA6B4;box-shadow:0 0 0 1.6px #0B0E13,inset 0 0 0 1.6px #0B0E13,0 0 14px rgba(154,166,180,.5)}
.mkr-j-surl.moi{border-width:4px}
/* — les larmes (comiques) — */
.mkr-j-larme{z-index:6;width:9px;height:12px;border-radius:50% 50% 50% 50%/62% 62% 40% 40%;background:#7FD4E8;box-shadow:0 0 0 1.4px #0B0E13,inset -2px -2px 0 rgba(255,255,255,.5)}
/* — la couronne posée sur le Métro King — */
.mkr-j-cour{z-index:7;pointer-events:none}
.mkr-j-cour-in{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(11,14,19,.35))}
.mkr-j-cour svg{display:block;width:100%;height:100%}
.mkr-j-cour.mkr-j-posee .mkr-j-cour-in{transform-origin:50% 100%;animation:mkr-j-trone 2.4s ease-in-out infinite}
@keyframes mkr-j-trone{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg) translateY(-2px)}}
/* — les fusées du feu d'artifice — */
.mkr-j-fusee{z-index:6;width:7px;height:18px;pointer-events:none}
.mkr-j-fusee i{position:absolute;inset:0;border-radius:4px 4px 2px 2px;background:var(--c,#FFCE00);box-shadow:0 0 0 1.5px #0B0E13,0 0 10px var(--c,#FFCE00)}
.mkr-j-fusee::after{content:"";position:absolute;left:1px;right:1px;top:100%;height:34px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,rgba(255,240,180,.9),rgba(255,206,0,0))}
@media (prefers-reduced-motion:reduce){ .mkr-j-ligne i.mkr-j-ici::after,.mkr-j-boum,.mkr-j-cour.mkr-j-posee .mkr-j-cour-in{animation:none!important} }

/* — rat_menu — */
/* ==========================================================================
   MÉTRO KING · LE GRAND SPECTACLE — LE RAT DU MÉTRO HORS DES PLIS
   Le trottoir du menu (pavés, grille d'égout, plaque, fromage), le
   compte sur les doigts, la page qui tourne, les gouttes de sueur.
   Préfixe : mkr-m- (classes et @keyframes). Durées : --mkr-v (= MKFX.lent).
   ========================================================================== */

/* — le trottoir, au pied du menu — */
.mkr-m-quai{position:relative;flex:none;height:var(--h,92px);margin:-6px -14px -28px;pointer-events:none;z-index:0}
.mkr-m-quai::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30px;border-top:3px solid #0B0E13;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 4px),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(11,14,19,.38) 31px 33px),
    linear-gradient(180deg,#6B6680 0 8px,#0B0E13 8px 10px,#4E4962 10px 19px,rgba(11,14,19,.5) 19px 20px,#433E56 20px)}
.mkr-m-quai::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(90deg,transparent 0 15px,rgba(11,14,19,.35) 15px 17px,transparent 17px 33px);opacity:.8}
.mkr-m-plaque{position:absolute;left:18px;bottom:44px;width:128px;height:34px;filter:drop-shadow(0 3px 0 rgba(11,14,19,.55))}
.mkr-m-plaque svg,.mkr-m-egout svg,.mkr-m-fromage svg{display:block;width:100%;height:100%;overflow:visible}
.mkr-m-egout{position:absolute;bottom:5px;width:78px;height:26px;margin-left:-39px;z-index:1}
.mkr-m-egout>svg{position:absolute;inset:0}
.mkr-m-grille{transform-origin:6% 70%;transform-box:view-box}
.mkr-m-fromage{position:absolute;bottom:9px;width:26px;height:20px;margin-left:-13px;z-index:1;transform-origin:50% 100%}
.mkr-m-miette{position:absolute;display:block;width:5px;height:5px;margin:-2.5px;border-radius:1.5px;background:#FFCE00;box-shadow:0 0 0 1.4px #0B0E13}
@media (max-width:520px){ .mkr-m-plaque{width:104px;height:28px;left:12px;bottom:40px} }

/* — le compte sur les doigts, dans la bulle — */
.mkr-m-compte{display:inline-flex;gap:.28em;align-items:baseline}
.mkr-m-compte i{font-style:normal;display:inline-block;color:#E3051C;
  animation:mkrMCompte calc(.32s*var(--mkr-v,1)) cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i)*.26s*var(--mkr-v,1))}
.mkr-m-compte i:last-child{font-size:1.35em}
@keyframes mkrMCompte{from{transform:translateY(.5em) scale(.2);opacity:0}}
.mkr-m-suite{display:block;animation:mkrMSuite calc(.3s*var(--mkr-v,1)) ease-out both;animation-delay:calc(var(--n)*.26s*var(--mkr-v,1) + .2s*var(--mkr-v,1))}
@keyframes mkrMSuite{from{opacity:0;transform:scale(.6)}}

/* — la pastille de ligne dans une bulle — */
.mkr-m-l{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .2em;border-radius:50%;background:var(--c);color:var(--i);
  box-shadow:0 0 0 2px #0B0E13;font-weight:900;font-size:.92em;margin:0 .06em;vertical-align:-.1em}

/* — la page du manuel qui tourne — */
.mkr-m-page{position:absolute;display:block;border-radius:3px 6px 6px 3px;background:linear-gradient(90deg,#E8E0CB,#FBF6E9 30%,#FFFDF6);
  box-shadow:0 0 0 2.2px #0B0E13,3px 3px 0 rgba(11,14,19,.35);transform-origin:0 50%}
.mkr-m-page::before{content:"";position:absolute;left:18%;right:14%;top:22%;height:56%;
  background:repeating-linear-gradient(180deg,rgba(11,14,19,.28) 0 2px,transparent 2px 7px)}

/* — gouttes de sueur et petites étoiles — */
.mkr-m-goutte{position:absolute;display:block;width:9px;height:12px;margin:-6px -4.5px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:#CFF3FF;box-shadow:0 0 0 1.6px #0B0E13}

/* — le talkie-walkie : la diode clignote — */
.mkr-svg .mkr-m-led{animation:mkrMLed calc(.5s*var(--mkr-v,1)) steps(2,jump-none) infinite}
@keyframes mkrMLed{to{opacity:.25}}
.mkr-svg .mkr-m-ant{transform-origin:5px -31px;animation:mkrMAnt calc(.9s*var(--mkr-v,1)) ease-in-out infinite alternate}
@keyframes mkrMAnt{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}

/* — la fermeture éclair et la bouée — */
.mkr-svg .mkr-m-zip{transform-origin:63px 83px}
.mkr-svg .mkr-m-tirette{transform-origin:63px 84px}
.mkr-svg .mkr-m-bouee{transform-origin:58px 117px}

/* — sans animations : rien ne bouge en boucle — */
.mkr-fige .mkr-m-led,.mkr-fige .mkr-m-ant{animation:none}

/* — betes_pigeon_araignee — */
/* ==========================================================================
   MÉTRO KING — LE PIGEON ET L'ARAIGNÉE (lot betes_pigeon_araignee)
   ========================================================================== */
.mkx-pa-miroir > svg{transform:scaleX(-1)}
.mkx-pa-pigeon .mkx-pa-aile{transform-box:view-box;transform-origin:104px 136px}
.mkx-pa-pigeon .mkx-pa-tete{transform-box:view-box;transform-origin:96px 132px}
.mkx-pa-pigeon .mkx-pa-corps{transform-box:view-box;transform-origin:100px 204px}
.mkx-pa-pigeon .mkx-pa-pattes{transition:transform .15s ease}
.mkx-pa-vol .mkx-pa-aile{animation:mkxPaBat .15s ease-in-out infinite alternate}
.mkx-pa-vol .mkx-pa-pattes{transform:translate(8px,-14px) rotate(14deg)}
@keyframes mkxPaBat{from{transform:rotate(-42deg)}to{transform:rotate(16deg)}}
.mkx-pa-araignee .mkx-pa-pg{transform-box:view-box;transform-origin:84px 130px}
.mkx-pa-araignee .mkx-pa-pd{transform-box:view-box;transform-origin:116px 130px}
.mkx-pa-araignee .mkx-pa-yeux{transform-box:view-box;transform-origin:100px 118px}
/* la pastille du Pigeon, posée sur sa carte jusqu'au ramassage */
.mkx-pa-plaque{position:absolute;left:50%;top:47%;width:50%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:6;pointer-events:none;
  filter:drop-shadow(0 1.2cqw 0 rgba(11,14,19,.45))}
.mkx-pa-plaque svg{width:100%;height:100%}
/* le panneau du Pigeon : 0 à 17 */
.mk-panneau .mk-pv-choix.mk-pv-choix--pigeon{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;flex-wrap:initial}
.mk-panneau .mk-pv-choix--pigeon .mk-pv-n{width:auto;height:auto;flex:none;border-radius:12px;min-width:0;padding:8px 0;justify-content:center;text-align:center}
.mk-panneau .mk-pv-choix--pigeon .mk-pv-n b{font-size:20px}

/* — cartes_spe — */
/* ==========================================================================
   MÉTRO KING — LES CARTES SPÉCIALES EN PLEINE IMAGE (lot cartes_spe)
   ========================================================================== */
.mk-c-in.mkx-ca{background:var(--f)}
.mkx-ca-scene{inset:0;pointer-events:none}
.mkx-ca-l{display:block;pointer-events:none;transform-origin:50% 100%}
.mkx-ca-l > svg{overflow:visible}
/* le voile du bas : le nom reste lisible sur l'image */
.mkx-ca-voile{left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--f) 78%);
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--f) 72%,transparent) 42%,var(--f) 80%)}
/* le haut : une ombre douce sous le pictogramme */
.mk-c-bande--sp.mkx-ca-bande{height:20%;align-items:flex-start;padding-top:4.6cqw;z-index:3;
  background:linear-gradient(180deg,rgba(11,14,19,.62),rgba(11,14,19,0))}
.mkx-ca-bande .mk-c-cat{text-shadow:0 .5cqw 1.2cqw rgba(0,0,0,.8);line-height:15cqw}
/* le cadre, redessiné au-dessus de l'image */
.mkx-ca-cadre{inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1.8cqw var(--l),inset 0 0 0 2.7cqw #0B0E13}
.mk-cat--bete .mkx-ca-cadre{box-shadow:inset 0 0 0 3.4cqw #2E3439,inset 0 0 0 4.2cqw #7CD65A,inset 0 0 0 5cqw #0B0E13}
.mkx-ca .mk-c-nomsp,.mkx-ca .mk-c-bref{z-index:3}
.mk-c-nomsp.mkx-ca-nom{top:auto;bottom:15%;height:auto}
.mkx-ca-nom b{text-shadow:0 .7cqw 0 rgba(0,0,0,.55),0 0 3cqw rgba(0,0,0,.5)}
/* les incidents sont clairs : texte sombre, pas d'ombre */
.mk-c--greve .mkx-ca-nom b{text-shadow:0 0 2.4cqw rgba(255,255,255,.9)}
.mk-c--greve .mk-c-bande--sp.mkx-ca-bande{background:#1C3F77;padding-top:0;align-items:center;height:14%}
.mk-c--greve .mkx-ca-bande .mk-c-cat{line-height:1}

/* — la pastille de points : petite mais visible — */
.mkx-ca-pts{display:inline-grid;place-items:center;flex:none;padding:.9cqw 2.2cqw;border-radius:99px;
  font-family:var(--display);font-style:normal;font-weight:800;font-size:6.6cqw;line-height:1;letter-spacing:-.02em;
  color:#0B0E13;background:#FFCE00;box-shadow:0 0 0 .9cqw #0B0E13,0 1cqw 0 .9cqw rgba(11,14,19,.35);white-space:nowrap}
.mkx-ca-pts--moins{background:#FF5A5F;color:#FFF}
.mkx-ca-bande .mkx-ca-pts{margin-left:auto;margin-top:2.6cqw}
.mk-c--num .mkx-ca-pts{font-size:6.2cqw;margin-left:.4cqw}
.mk-c--atout .mkx-ca-pts{font-size:6cqw;margin-left:.8cqw;background:linear-gradient(180deg,#FFF1BF,#E7B23E)}
.mkx-ca-toile{opacity:.75}

/* — belote_base — */
/* ==========================================================================
   MÉTRO BELOTE · les animations de tous les jours (lot belote_base)
   Tout vit sur le calque .bltfx ; les boîtes sont en haut à gauche et
   déplacées par transform (Web Animations).
   ========================================================================== */
.bltfx .bfx-base-c3,.bltfx .bfx-base-ombre,.bltfx .bfx-base-onde,.bltfx .bfx-base-pou,.bltfx .bfx-base-etin,
.bltfx .bfx-base-halo,.bltfx .bfx-base-talon,.bltfx .bfx-base-recoit,.bltfx .bfx-base-rayons,.bltfx .bfx-base-past{
  position:absolute;left:0;top:0;transform-origin:50% 50%;pointer-events:none}

/* — la carte retournable : un pivot 3D, le recto (.bt-c de la table), le verso — */
.bltfx .bfx-base-c3{will-change:transform;perspective:900px}
.bfx-base-piv{position:absolute;inset:0;transform-style:preserve-3d}
.bfx-base-recto,.bfx-base-verso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.bfx-base-recto > .bt-c{left:0;top:0}
.bfx-base-verso{transform:rotateY(180deg);border-radius:12%/8.3%;overflow:hidden;box-shadow:0 0 0 2px #0B0E13}
.bfx-base-verso svg{display:block;width:100%;height:100%}
/* le reflet qui balaie une carte (retournée, maîtresse du pli) */
.bfx-base-reflet{position:absolute;top:-10%;bottom:-10%;left:0;width:42%;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75) 50%,rgba(255,255,255,0));
  transform:translateX(-130%) skewX(-18deg);mix-blend-mode:screen}

/* — la retournée en vol : le liseré blanc de la table — */
.bfx-base-ret .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 4.5px #FFFFFF,0 0 0 6.5px #0B0E13,0 4px 0 6.5px #0B0E13}

/* — l'ombre d'une carte en vol — */
.bltfx .bfx-base-ombre{border-radius:12%/8.3%;background:rgba(4,12,8,.55);filter:blur(3px);opacity:0}

/* — l'impact : onde aplatie de la couleur de la ligne, poussière crème, étincelles — */
.bltfx .bfx-base-onde{border-radius:50%;border:3px solid var(--c,#FBF6E9);
  box-shadow:0 0 0 2px rgba(11,14,19,.5),inset 0 0 0 2px rgba(11,14,19,.5);opacity:0}
.bltfx .bfx-base-onde--prise{border-width:6px}
.bltfx .bfx-base-pou{border-radius:50%;background:#FBF6E9;box-shadow:0 0 0 1.5px rgba(11,14,19,.55);opacity:0}
.bltfx .bfx-base-etin{background:#FFE58A;opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

/* — le pli : la maîtresse, son halo — */
.bfx-base-maitre .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #3ED07A,0 0 0 7.5px #0B0E13,0 4px 0 7.5px #0B0E13}
.bfx-base-maitre.bfx-base-maitre--at .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00,0 0 0 7.5px #0B0E13,0 4px 0 7.5px #0B0E13}
.bltfx .bfx-base-halo{border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,240,170,.95) 0,rgba(255,206,0,.55) 32%,rgba(255,206,0,0) 68%)}
.bltfx .bfx-base-recoit{border-radius:50%;border:3.5px solid var(--c);box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 2px #0B0E13,0 0 18px var(--c);opacity:0}

/* — « +points » : la pastille autocollant des chiffres de la table — */
.bltfx .bfx-base-pts{position:absolute;z-index:20;white-space:nowrap;padding:.16em .55em .12em;border-radius:.75em;
  font-family:var(--display);font-weight:900;line-height:1.1;letter-spacing:-.01em;color:#0B0E13;background:var(--c);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transform:translate(-50%,-50%);opacity:0;pointer-events:none}

/* — la donne : le talon (épaisseur posée en ligne par le script) — */
.bltfx .bfx-base-talon{border-radius:12%/8.3%;overflow:hidden}
.bltfx .bfx-base-talon svg{display:block;width:100%;height:100%}

/* — la prise : la pastille de la ligne, ses rayons — */
.bltfx .bfx-base-past{display:grid;place-items:center;border-radius:50%;background:var(--c);color:var(--i);
  box-shadow:0 0 0 3px #FFFFFF,0 0 0 6px #0B0E13,0 5px 0 6px #0B0E13;font-family:var(--display);opacity:0;z-index:4}
.bfx-base-past b{font-weight:900;line-height:1;letter-spacing:-.04em;font-size:1em}
.bfx-base-past-etoile{position:absolute;right:-14%;top:-14%;width:44%;height:44%;background:#0B0E13;
  clip-path:polygon(50% 0,63% 34%,100% 38%,72% 60%,80% 100%,50% 78%,20% 100%,28% 60%,0 38%,37% 34%)}
.bfx-base-past-etoile::after{content:"";position:absolute;inset:16%;background:#FFCE00;
  clip-path:polygon(50% 0,63% 34%,100% 38%,72% 60%,80% 100%,50% 78%,20% 100%,28% 60%,0 38%,37% 34%)}
.bltfx .bfx-base-rayons{opacity:0}
.bfx-base-rayons u{position:absolute;left:50%;top:50%;width:7%;height:46%;margin-left:-3.5%;transform-origin:50% 0;
  transform:rotate(var(--a)) translateY(18%);border-radius:40% 40% 50% 50%;
  background:linear-gradient(180deg,rgba(255,255,255,0),var(--c) 40%,var(--c));opacity:.8}
.bfx-base-rayons u:nth-child(odd){height:34%;opacity:.55}
/* la couronne du pli : des rayons plus longs, qui partent du bord de la carte */
.bfx-base-rayons--pli u{width:6%;margin-left:-3%;height:48%;transform:rotate(var(--a)) translateY(26%);opacity:.95;
  background:linear-gradient(180deg,rgba(255,241,184,0),var(--c) 30%,var(--c) 70%,rgba(255,241,184,0))}
.bfx-base-rayons--pli u:nth-child(odd){height:38%;opacity:.7}

/* — belote_as_corr — */
/* ==========================================================================
   MÉTRO BELOTE · lot « As & correspondance » (préfixe bfx-ac-)
   Tout vit sur le calque .bltfx ; rien ici ne restyle la table.
   ========================================================================== */

/* — la correspondance : le plan de métro qui se dessine — */
.bfx-ac-voie{position:absolute;left:0;top:0;z-index:1;overflow:visible;pointer-events:none}
.bfx-ac-voie path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.bfx-ac-voie .bfx-ac-tr{stroke-dasharray:1 1;stroke-dashoffset:1}
.bfx-ac-voie .bfx-ac-heurt{opacity:0}
.bfx-ac-voie .bfx-ac-lueur-v{stroke-dasharray:.22 2;stroke-dashoffset:.24;opacity:0}
/* l'aiguille, qui pivote à la bifurcation */
.bfx-ac-aig{position:absolute;z-index:2;border-radius:99px;background:#FBF6E9;
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13;transform-origin:0 50%;opacity:0}
/* la gare de correspondance : le rond blanc cerclé du plan */
.bfx-ac-gare{position:absolute;z-index:3;border-radius:50%;background:#FFFFFF;
  box-shadow:0 0 0 2.5px #0B0E13,0 2px 0 2.5px #0B0E13;transform:scale(0)}
/* les pastilles de ligne (comme le badge des cartes en correspondance) */
.bfx-ac-num{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:50%;font-style:normal;
  font-family:var(--display);font-weight:900;line-height:1;letter-spacing:-.02em;
  color:var(--i);background:var(--c);box-shadow:0 0 0 2px #0B0E13}
.bfx-ac-num.long{font-size:.7em;width:2.6em;height:2.6em}
.bfx-ac-seul{position:absolute;z-index:5;left:0;top:0;transform:translate(-50%,-50%) scale(0);
  border-radius:50%;box-shadow:0 0 0 3px #FFFFFF,0 3px 0 3px #0B0E13}
.bfx-ac-badge{position:absolute;z-index:8;left:0;top:0;display:flex;align-items:center;gap:.2em;
  padding:.2em .32em;border-radius:999px;background:#FFFFFF;white-space:nowrap;
  font-family:var(--display);font-weight:900;line-height:1;color:#0B0E13;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;opacity:0}
.bfx-ac-badge b{font-size:1.25em;line-height:1}
/* la carte qui roule : sa face, et le dos pour les robots */
.bfx-ac-mob{position:absolute;z-index:6;transform-origin:50% 50%;will-change:transform}
.bfx-ac-anneau{position:absolute;inset:-6px;opacity:0;
  box-shadow:0 0 0 4px var(--c),0 0 0 6px #0B0E13,0 0 18px 6px var(--c)}
.bfx-ac-f{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 50%}
.bfx-ac-f > .bt-c{left:0;top:0}
.bfx-ac-mob .bltfx-dos svg{display:block;width:100%;height:100%}
/* l'onde d'arrivée */
.bfx-ac-onde{position:absolute;z-index:2;border-radius:50%;border:4px solid var(--c);
  box-shadow:0 0 16px 2px var(--c),inset 0 0 10px var(--c);opacity:0}
/* les étincelles en étoile (comme l'éclat du tapis) */
.bfx-ac-etin{position:absolute;z-index:8;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--c);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);opacity:0}

/* — l'As qui fait le pli — */
.bfx-ac-rayons{position:absolute;z-index:2;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(from 0deg,var(--c) 0 8deg,transparent 8deg 15deg,#FFE58A 15deg 23deg,transparent 23deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 15%,#000 25%,#000 44%,transparent 70%);
  mask:radial-gradient(circle,transparent 15%,#000 25%,#000 44%,transparent 70%)}
.bfx-ac-lueur{position:absolute;z-index:5;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,246,200,.9),rgba(255,206,0,.42) 38%,rgba(255,206,0,0) 68%)}
.bltfx-c.bfx-ac-tete > .bt-c{box-shadow:0 0 0 2px #0B0E13,0 0 0 5.5px var(--lc,#FFCE00),0 0 0 8px #0B0E13,
  0 4px 0 8px #0B0E13,0 0 34px 10px rgba(255,229,138,.85)}
/* le coup de composteur : les points du pli */
.bfx-ac-tampon{position:absolute;z-index:9;left:0;top:0;padding:.14em .5em .18em;border-radius:.42em;white-space:nowrap;
  font-family:var(--display);font-weight:900;line-height:1;letter-spacing:.01em;color:#0B0E13;background:var(--c);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;outline:2px dashed rgba(11,14,19,.5);outline-offset:-5px;
  opacity:0}

/* — belote_atouts — */
/* ==========================================================================
   MÉTRO BELOTE · lot « Valet & 9 d'atout »               (préfixe bfx-at-)
   Les cartes humanisées : le contrôleur (Valet) et le quai (9). Tout vit sur
   le calque .bltfx ; les positions passent par transform (Web Animations).
   ========================================================================== */
/* une scène = un repère qui couvre tout le calque (déplacée en bloc pendant la marche) */
.bfx-at-scene{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;transform-origin:0 0}
/* le paquet : un repère sans taille, en haut à gauche du calque */
.bfx-at-paquet{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.bfx-at-heros,.bfx-at-copie{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.bfx-at-corps{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 100%}
.bfx-at-heros .bt-c,.bfx-at-copie .bt-c{left:0;top:0}
/* la figure : 240 × 300 unités, la carte au milieu (60→160, 70→214) */
.bfx-at-svg{position:absolute;left:-60%;top:-48.611%;width:240%;height:208.333%;overflow:visible;pointer-events:none}
.bfx-at-svg g{transform-box:view-box}
/* le lasso : boucles et corde */
.bfx-at-boucle{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform}
.bfx-at-boucle svg{display:block;width:100%;height:100%;overflow:visible}
.bfx-at-corde{position:absolute;left:0;top:0;width:100px;height:4px;transform-origin:0 50%;border-radius:2px;
  background:repeating-linear-gradient(90deg,#E8C07A 0 5px,#A8742E 5px 8px);box-shadow:0 0 0 1.5px #0B0E13;
  will-change:transform}
/* éclairs, étoiles, poussière, onde */
.bfx-at-etin{position:absolute;left:0;top:0;will-change:transform}
.bfx-at-etin svg{display:block;width:100%;height:100%}
.bfx-at-pouss{position:absolute;left:0;top:0;border-radius:50%;background:#FBF6E9;
  box-shadow:0 0 0 1.5px rgba(11,14,19,.45)}
.bltfx .bfx-at-pts{position:absolute;z-index:20;white-space:nowrap;padding:.16em .55em .12em;border-radius:.75em;
  font-family:var(--display);font-weight:900;line-height:1.1;letter-spacing:-.01em;color:#0B0E13;background:var(--c);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.bfx-at-onde{position:absolute;left:0;top:0;border-radius:50%;
  box-shadow:0 0 0 3px var(--c,#3ED07A),0 0 0 5px #0B0E13;transform-origin:50% 50%}

/* — belote_der — */
/* ==========================================================================
   MÉTRO BELOTE · LE DIX DE DER — la carte qui prend vie (lot belote_der)
   Tout vit sur le calque .bltfx ; préfixe bfx-der-.
   Les positions sont des transform calculés (Web Animations) : origine 0 0
   pour le personnage et la plaque, centre pour les cartes et l'ombre.
   ========================================================================== */
.bfx-der{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
/* — le personnage : la carte (corps), ses membres (SVG derrière), son visage (SVG devant) — */
.bfx-der-pos{position:absolute;left:0;top:0;z-index:3;transform-origin:0 0;will-change:transform}
.bfx-der-carte{position:absolute;left:0;top:0;width:100%;height:100%}
.bfx-der-carte > .bt-c,.bfx-der-pc > .bt-c{left:0;top:0;pointer-events:none;transition:none;animation:none}
.bfx-der-art{position:absolute;left:0;top:0;width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.bfx-der-art g{transform-box:view-box;transform-origin:0 0}
.bfx-der-ombre{position:absolute;left:0;top:0;z-index:1;border-radius:50%;transform-origin:50% 50%;
  background:radial-gradient(closest-side,rgba(5,20,12,.55),rgba(5,20,12,.3) 60%,rgba(5,20,12,0))}
/* — les cartes du pli, ramassées puis portées à bout de bras — */
.bfx-der-pc{position:absolute;left:0;top:0;z-index:2;transform-origin:50% 50%;will-change:transform}
/* — la plaque émaillée « +10 » (comme les plaques des stations), qui se retourne — */
.bfx-der-plaque{position:absolute;left:0;top:0;z-index:4;transform-origin:0 0;will-change:transform,opacity;
  color:#FFFFFF;background:#153E8C;border-radius:.32em;font-family:var(--display);font-weight:900;
  letter-spacing:-.02em;line-height:1;white-space:nowrap;
  box-shadow:inset 0 0 0 .1em #153E8C,inset 0 0 0 .19em #FFFFFF,0 0 0 2px #0B0E13,0 4px 0 2px #0B0E13}
.bfx-der-plaque::after{content:"";position:absolute;left:9%;right:9%;top:12%;height:24%;border-radius:1em;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0))}
.bfx-der-plaque > span{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;
  justify-content:center;transform-origin:50% 50%;text-shadow:0 2px 0 #0B0E13}
/* — les étincelles et l'onde — */
.bfx-der-etin{position:absolute;left:0;top:0;z-index:5;background:#FFE58A;transform-origin:50% 50%;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.bfx-der-pouss{position:absolute;left:0;top:0;z-index:1;border-radius:50%;background:#F3EAD6;
  box-shadow:0 0 0 1.5px rgba(11,14,19,.55);transform-origin:50% 50%}
.bfx-der-goutte{position:absolute;left:0;top:0;z-index:5;background:#8FD8FF;border:2px solid #0B0E13;
  border-radius:0 50% 50% 50%;transform-origin:50% 50%}
.bfx-der-onde{position:absolute;left:0;top:0;z-index:2;border-radius:50%;border:3px solid #FFCE00;
  box-shadow:0 0 0 2px #0B0E13,inset 0 0 0 2px #0B0E13;transform-origin:50% 50%}

/* — belote_rat — */
/* ==========================================================================
   MÉTRO BELOTE · LE RAT DU MÉTRO (lot belote_rat)
   La scène du rat : un calque à lui, au-dessus de la table et du bilan,
   qui ne prend jamais un clic. Il est retiré dès que le rat s'en va.
   ========================================================================== */
.bfx-rat-hote{position:absolute;inset:0;z-index:620;pointer-events:none;overflow:hidden;contain:layout}
.bfx-rat-hote .mkr-scene{z-index:1}
/* la bulle : un peu plus large sur la table, le texte reste lisible */
.bfx-rat-hote .mkr-bulle{max-width:min(270px,74vw)}
.bfx-rat-hote .mkr-bulle-in{line-height:1.3}
/* la pastille d'une ligne de métro, dans la bulle */
.bfx-rat-past{display:inline-grid;place-items:center;min-width:1.45em;height:1.45em;padding:0 .2em;margin:0 .08em;border-radius:999px;
  background:var(--c,#FFCE00);color:var(--i,#0B0E13);border:2px solid #0B0E13;box-sizing:border-box;
  font-family:var(--display,inherit);font-style:normal;font-weight:900;font-size:.86em;line-height:1;vertical-align:-.22em}
/* le paquet qui vole de la patte du rat jusque chez le donneur */
.bfx-rat-dos{position:absolute;left:0;top:0;border-radius:6px;overflow:hidden;background:#16213A;
  box-shadow:0 0 0 2px #0B0E13,2px 3px 0 2px #E8DDC4,4px 5px 0 2px #0B0E13;will-change:transform}
.bfx-rat-dos svg{display:block;width:100%;height:100%}

/* — belote_resultats — */
/* ==========================================================================
   MÉTRO BELOTE · LES RÉSULTATS (lot belote_resultats) — préfixe bres-
   La feuille de marque (bilan de donne) et l'écran de fin de partie.
   ========================================================================== */

/* — le bilan, sorti du plateau : un voile sur toute la table — */
.bt > .blt-bilan.bres{position:absolute;inset:0;z-index:600;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;padding:clamp(8px,2.2vw,22px);margin:0;
  border-radius:inherit;overflow:hidden;text-align:left;color:#0B0E13;container-type:inline-size;
  background:radial-gradient(90% 70% at 50% 40%,rgba(10,40,26,.55),rgba(6,9,14,.86));
  box-shadow:none;animation:bres-voile .3s ease-out both}
/* sur une table large, le carnet laisse la gauche au rat (et à sa bulle) */
@media (min-width:1000px){ .bt > .blt-bilan.bres{padding-left:clamp(12px,100% - 800px,270px)} }
.blt-bilan.bres > :not(.bres-in){display:none!important}
@keyframes bres-voile{from{opacity:0}}

/* — le carnet : papier crème, contour BD — */
.bres-in{position:relative;width:min(100%,780px);max-height:100%;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;border-radius:20px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#FBF6E9,#F1E6CD);
  box-shadow:0 0 0 3px #0B0E13,0 7px 0 3px #0B0E13,0 0 0 9px #7A4520,0 0 0 12px #0B0E13,0 30px 60px -20px rgba(0,0,0,.9);
  margin:12px;font-family:var(--display);scrollbar-width:thin;
  animation:bres-carnet .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes bres-carnet{from{opacity:0;transform:translateY(40px) scale(.9) rotate(-1.5deg)}}
.bres-in *{box-sizing:border-box}

/* — le bandeau de feutre — */
.bres-tete{position:relative;padding:12px 16px 12px;color:#FBF6E9;text-align:center;
  border-radius:18px 18px 0 0;
  background:radial-gradient(120% 140% at 50% 0%,#22935E,#146B42 60%,#0F5A37);
  box-shadow:inset 0 0 0 3px rgba(255,236,190,.42),inset 0 -4px 0 var(--bres-at,#FFCE00),0 3px 0 #0B0E13}
.bres--dedans .bres-tete{background:radial-gradient(120% 140% at 50% 0%,#A7342E,#76201C 60%,#5A1714)}
.bres--capot .bres-tete{background:radial-gradient(120% 140% at 50% 0%,#2A8F5A,#146B42 55%,#0B4A2D)}
.bres-donne{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 10px;border-radius:6px;background:#153E8C;color:#fff;
  box-shadow:inset 0 0 0 1.5px #fff,0 0 0 2px #0B0E13}
.bres-titre{margin:6px 0 4px;font-weight:900;font-size:clamp(26px,7.4cqi,44px);line-height:1;letter-spacing:.01em;
  text-transform:uppercase;color:#FFCE00;
  text-shadow:0 3px 0 #0B0E13,2px 0 0 #0B0E13,-2px 0 0 #0B0E13,0 -2px 0 #0B0E13}
.bres--mal .bres-titre{color:#FF8A80}
.bres-titre > span{display:inline-block;animation:bres-lettre .42s cubic-bezier(.2,1.6,.4,1) calc(.15s + var(--i)*.035s) both}
@keyframes bres-lettre{from{opacity:0;transform:translateY(-22px) scale(1.5) rotate(-8deg)}}
.bres-recit{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 7px;
  font-size:clamp(13px,3.4cqi,16px);font-weight:700;line-height:1.25}
.bres-recit-f{color:#FFE9A6}
.bres--dedans .bres-recit-f{color:#FFD0C8}

/* — avatars et pastilles de ligne — */
.bres-av{display:inline-block;width:34px;height:34px;flex:none;border-radius:50%;overflow:hidden;
  background:#E9DFC6;box-shadow:0 0 0 2px #0B0E13}
.bres-av svg{width:100%;height:100%;display:block}
.bres-av--mini{width:24px;height:24px}
.bres-pas{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:12px;
  background:var(--c,#FFCE00);color:var(--e,#fff);font-weight:900;font-size:13px;line-height:1;
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}

/* — les deux camps — */
.bres-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 14px 6px}
.bres-eq{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  align-items:center;gap:2px 8px;padding:9px 10px 8px;border-radius:14px;background:#fff;
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13;border-left:8px solid var(--eqc);
  animation:bres-monte .45s cubic-bezier(.2,1.4,.4,1) .25s both}
.bres-eq--nous{--eqc:#3ED07A}
.bres-eq--eux{--eqc:#FF6B6B;animation-delay:.33s}
@keyframes bres-monte{from{opacity:0;transform:translateY(16px)}}
.bres-eq-avs{grid-row:1/3;display:flex}
.bres-eq-avs .bres-av + .bres-av{margin-left:-10px}
.bres-eq-txt{display:flex;flex-direction:column;min-width:0}
.bres-eq-nom{font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.bres-eq-qui{font-family:var(--mono);font-size:11px;color:#4A5460;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bres-eq-pts{grid-row:1/3;grid-column:3;font-weight:900;font-size:clamp(30px,7cqi,42px);line-height:1;
  font-variant-numeric:tabular-nums;color:#0B0E13;min-width:2.2ch;text-align:right}
.bres-eq-tag{grid-column:2;justify-self:start;font-family:var(--mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;padding:1px 7px;border-radius:5px;background:#E9DFC6;color:#4A5460}
.bres-prend .bres-eq-tag{background:var(--bres-at,#FFCE00);color:#0B0E13;box-shadow:0 0 0 1.5px #0B0E13}
.bres-gagne{background:linear-gradient(180deg,#FFF7D6,#FFE38A);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 0 6px rgba(255,206,0,.55)}
.bres-eq-etoile{position:absolute;top:-11px;right:-8px;width:26px;height:26px;display:grid;place-items:center;
  border-radius:50%;background:#FFCE00;color:#0B0E13;font-size:15px;box-shadow:0 0 0 2px #0B0E13;
  animation:bres-etoile .6s cubic-bezier(.2,1.8,.4,1) 1.3s both}
@keyframes bres-etoile{from{opacity:0;transform:scale(0) rotate(-120deg)}}
.bres-gagne .bres-eq-pts.bres-fini{animation:bres-tape .35s ease-out}
@keyframes bres-tape{40%{transform:scale(1.18)}}

/* — le corps : la feuille et la route — */
.bres-corps{display:grid;grid-template-columns:1fr;gap:10px;padding:8px 14px 4px}
@container (min-width:640px){
  .bres-corps{grid-template-columns:1.05fr 1fr;align-items:start;gap:16px}
}

/* — la feuille, ligne à ligne — */
.bres-feuille{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:#FFFDF6;
  box-shadow:0 0 0 2px #0B0E13;
  background-image:repeating-linear-gradient(180deg,transparent 0 29px,rgba(21,62,140,.10) 29px 30px)}
.bres-l{display:grid;grid-template-columns:1fr 3.6em 3.6em;align-items:center;min-height:30px;padding:0 10px;
  font-size:14px;animation:bres-ligne .3s ease-out calc(.45s + var(--i)*.07s) both}
@keyframes bres-ligne{from{opacity:0;transform:translateX(-10px)}}
.bres-l-lib{display:flex;align-items:center;gap:6px;font-weight:700;color:#28313C;min-width:0}
.bres-l-ico{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;border-radius:5px;
  background:#153E8C;color:#fff;font-size:10px;font-weight:900;box-shadow:0 0 0 1.5px #0B0E13}
.bres-l-v{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.bres-l-v--nous{color:#127A44}
.bres-l-v--eux{color:#C0303A}
.bres-l--t{min-height:26px;background:#153E8C;color:#fff}
.bres-l--t .bres-l-v{color:#fff}
.bres-l-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.bres-l--t .bres-l-v--nous .bres-l-h{border-bottom:3px solid #3ED07A}
.bres-l--t .bres-l-v--eux .bres-l-h{border-bottom:3px solid #FF6B6B}
.bres-barre .bres-l-v{text-decoration:line-through;opacity:.5}
.bres-l--belote .bres-l-ico{background:#FF4D6D}
.bres-l--capot{background:#FFF1B8}
.bres-l--capot .bres-l-ico{background:#FFCE00;color:#0B0E13}
.bres-l--dedans{background:#FFE1DC}
.bres-l--dedans .bres-l-ico{background:#E3051C}
.bres-l--tot{min-height:36px;border-top:2.5px solid #0B0E13;background:#F3EAD6;font-size:17px}
.bres-l--tot .bres-l-lib{font-weight:900;text-transform:uppercase;letter-spacing:.06em}
.bres-l-max{position:relative}
.bres-l-max::after{content:"";position:absolute;right:-5px;top:50%;width:calc(100% + 4px);height:26px;
  transform:translateY(-50%);border-radius:8px;box-shadow:0 0 0 2px #0B0E13;background:rgba(255,206,0,.35);z-index:-1}
.bres-l--tot{position:relative;z-index:0}

/* — la route des 1000 points — */
.bres-droite{display:flex;flex-direction:column;gap:10px;min-width:0}
.bres-route{padding:8px 10px 10px;border-radius:12px;background:#10161F;color:#FBF6E9;box-shadow:0 0 0 2px #0B0E13}
.bres-route-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px;
  font-weight:900;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.bres-route-s{font-family:var(--mono);font-size:10px;font-weight:400;color:#9FB0C4;letter-spacing:.04em;text-transform:none}
.bres-rail{display:grid;grid-template-columns:3.2em 1fr 3.2em;align-items:center;gap:8px;height:30px}
.bres-rail--nous{--rc:#3ED07A}
.bres-rail--eux{--rc:#FF6B6B}
.bres-rail-lib{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;color:var(--rc)}
.bres-rail-n{text-align:right;font-weight:900;font-size:17px;font-variant-numeric:tabular-nums}
.bres-voie{position:relative;height:8px;border-radius:4px;background:#2B3646;box-shadow:0 0 0 2px #0B0E13}
.bres-voie-f{position:absolute;inset:0;border-radius:4px;background:var(--rc);transform-origin:0 50%;
  transform:scaleX(var(--a));animation:bres-remplit 1.1s cubic-bezier(.3,.8,.3,1) .7s both}
@keyframes bres-remplit{from{transform:scaleX(var(--de))}}
.bres-voie-st,.bres-voie-term{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#FBF6E9;box-shadow:0 0 0 2px #0B0E13}
.bres-voie-term{left:100%;width:16px;height:16px;margin:-8px 0 0 -8px;background:#FFCE00}
.bres-voie-st.bres-passe{background:var(--rc)}
.bres-voie-m{position:absolute;inset:0;transform:translateX(calc(var(--a)*100%));
  animation:bres-roule 1.1s cubic-bezier(.3,.8,.3,1) .7s both;pointer-events:none}
@keyframes bres-roule{from{transform:translateX(calc(var(--de)*100%))}}
.bres-rame{position:absolute;left:0;top:50%;width:22px;height:14px;margin:-7px 0 0 -11px;border-radius:5px 7px 4px 4px;
  background:linear-gradient(180deg,#fff 0 30%,var(--rc) 30%);box-shadow:0 0 0 2px #0B0E13}
.bres-rame::after{content:"";position:absolute;left:4px;right:4px;top:2px;height:3px;border-radius:2px;background:#7FD4E8}

/* — l'historique des donnes — */
.bres-hist-t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4A5460;margin:0 0 4px 2px}
.bres-hist-b{display:flex;gap:6px;overflow-x:auto;padding:3px 3px 6px;scrollbar-width:thin}
.bres-fiche{flex:none;display:flex;flex-direction:column;align-items:center;min-width:42px;padding:3px 5px 4px;
  border-radius:8px;background:#fff;box-shadow:0 0 0 2px #0B0E13;border-top:5px solid var(--l,#9AA6B4);
  font-variant-numeric:tabular-nums}
.bres-fiche-n{font-family:var(--mono);font-size:10px;color:#4A5460}
.bres-fiche-v{font-weight:900;font-size:13px;line-height:1.15}
.bres-fiche-v--nous{color:#127A44}
.bres-fiche-v--eux{color:#C0303A}
.bres-fiche--nous{background:#E6F8EC}
.bres-fiche--eux{background:#FDE8E6}
.bres-fiche--ici{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #FFCE00;animation:bres-ici .5s cubic-bezier(.2,1.6,.4,1) 1s both}
@keyframes bres-ici{from{transform:scale(.4);opacity:0}}

/* — le pied : la place du rat, le bouton — */
.bres-pied{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:10px 14px 12px;background:linear-gradient(180deg,rgba(241,230,205,0),#F1E6CD 30%)}
.bres-pied-rat{flex:1}
.blt-bilan.bres .bres-go{position:relative;margin:0;font-family:var(--display);font-weight:900;font-size:16px;
  padding:.6em 1.5em;border-radius:16px;background:linear-gradient(180deg,#FFE88A,#FFCE00);color:#0B0E13;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;white-space:nowrap}
.blt-bilan.bres .bres-go:active{transform:translateY(3px);box-shadow:0 0 0 3px #0B0E13,0 3px 0 3px #0B0E13}
@container (min-width:640px){
  .bres-pied{justify-content:center}
  .bres-pied-rat{display:none}
}
@container (max-width:420px){
  .bres-tete{padding:10px 10px}
  .bres-duo{gap:8px;padding:12px 10px 4px}
  .bres-eq{grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;padding:7px 8px 7px;border-left-width:6px}
  .bres-eq-avs{grid-row:1;grid-column:1}
  .bres-eq-txt{grid-row:1;grid-column:2}
  .bres-eq-pts{grid-row:2;grid-column:1/3;text-align:left;font-size:32px}
  .bres-eq-tag{grid-row:3;grid-column:1/3}
  .bres-eq-qui{display:none}
  .bres-av{width:28px;height:28px}
  .bres-corps{padding:6px 10px 2px}
  .bres-l{font-size:13px;padding:0 8px;grid-template-columns:1fr 3em 3em;min-height:26px}
  .bres-l--tot{min-height:32px}
  .bres-eq-pts{font-size:28px}
  .bres-titre{margin:4px 0 3px}
  .bres-recit{font-size:13px}
  .bres-route{padding:6px 8px 6px}
  .bres-route-s{display:none}
  .bres-rail{height:24px}
  .bres-droite{gap:6px}
  .bres-hist-t{display:none}
  .bres-fiche{flex-direction:row;gap:4px;min-width:0;padding:2px 6px;border-top-width:0;border-left:5px solid var(--l,#9AA6B4)}
  .bres-pied{padding:6px 10px 8px}
  .blt-bilan.bres .bres-go{font-size:15px}
}

/* — réduire les animations — */
.bres--calme,.bres--calme *{animation:none!important;transition:none!important}

/* ==========================================================================
   L'ÉCRAN DE FIN DE PARTIE
   ========================================================================== */
.bres-fin{position:relative;max-width:820px;margin:8px auto 24px;padding:18px clamp(12px,3vw,26px) 20px;
  border-radius:24px;font-family:var(--display);color:#FBF6E9;text-align:center;overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 0%,rgba(255,236,190,.16),transparent 60%),
    radial-gradient(140% 120% at 50% 0%,#22935E,#146B42 55%,#0F5A37);
  box-shadow:inset 0 0 0 3px rgba(255,236,190,.42),0 0 0 3px #0B0E13,0 0 0 11px #7A4520,0 0 0 14px #0B0E13,0 14px 0 14px #0B0E13}
.bres-fin--perdu{background:radial-gradient(140% 120% at 50% 0%,#2C4D6E,#1C2940 55%,#10161F)}
.bres-fin *{box-sizing:border-box}
.bres-fin .conf{z-index:5}
.bres-fin-plaque{display:inline-block;max-width:100%;padding:.32em .9em .36em;border-radius:12px;
  background:#153E8C;color:#fff;font-weight:900;font-size:clamp(22px,5.4vw,38px);line-height:1.1;
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px #153E8C,0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;
  animation:bres-plaque .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes bres-plaque{from{opacity:0;transform:translateY(-30px) rotate(-4deg) scale(.8)}}
.bres-fin-sous{margin:10px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#CFE9D9}
.bres-fin--perdu .bres-fin-sous{color:#A9BED6}

.bres-fin-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;margin:26px auto 4px;max-width:560px}
.bres-fin-eq{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 8px 12px;
  border-radius:18px;color:#0B0E13;background:linear-gradient(180deg,#FBF6E9,#F1E6CD);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13;border-top:8px solid var(--eqc);
  animation:bres-monte .5s cubic-bezier(.2,1.4,.4,1) .3s both}
.bres-fin-eq--nous{--eqc:#3ED07A}
.bres-fin-eq--eux{--eqc:#FF6B6B;animation-delay:.42s}
.bres-fin-eq.bres-gagne{background:linear-gradient(180deg,#FFF7D6,#FFE38A);padding-top:24px;
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 0 0 8px rgba(255,206,0,.5)}
.bres-fin-eq.bres-perd{opacity:.92;transform:scale(.94)}
.bres-fin-cour{position:absolute;top:-30px;left:50%;width:58px;margin-left:-29px;
  animation:bres-cour .7s cubic-bezier(.2,1.7,.4,1) 1.2s both}
.bres-fin-cour svg{display:block;width:100%}
@keyframes bres-cour{from{opacity:0;transform:translateY(-40px) rotate(-30deg)}}
.bres-fin-avs{display:flex}
.bres-fin-avs .bres-av{width:54px;height:54px}
.bres-fin-avs .bres-av + .bres-av{margin-left:-12px}
.bres-gagne .bres-fin-avs .bres-av{animation:bres-saut .6s ease-in-out 1.6s 3 both}
.bres-gagne .bres-fin-avs .bres-av + .bres-av{animation-delay:1.75s}
@keyframes bres-saut{50%{transform:translateY(-8px)}}
.bres-fin-nom{margin-top:6px;font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:.06em}
.bres-fin-qui{font-family:var(--mono);font-size:11px;color:#4A5460}
.bres-fin-pts{font-weight:900;font-size:clamp(36px,9vw,56px);line-height:1;font-variant-numeric:tabular-nums}

.bres-fin-t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#FFE9A6;margin:20px 0 6px}
.bres-fin-voie{position:relative;display:flex;gap:0;overflow-x:auto;padding:6px 6px 10px;scrollbar-width:thin;
  justify-content:safe center}
.bres-st{position:relative;flex:none;width:64px;display:grid;grid-template-rows:18px 22px 18px 16px 14px;
  justify-items:center;align-items:center;animation:bres-ligne .3s ease-out calc(.8s + var(--i)*.08s) both}
.bres-st::before{content:"";position:absolute;left:0;right:0;top:29px;height:8px;margin-top:-4px;
  background:var(--l,#FFCE00);box-shadow:0 2px 0 #0B0E13,0 -2px 0 #0B0E13;z-index:0}
.bres-st:first-child::before{left:50%}
.bres-st--term::before{right:50%}
.bres-st-o{grid-row:2;position:relative;z-index:1;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px #0B0E13;font-style:normal;font-size:11px;line-height:20px;color:#0B0E13;text-align:center}
.bres-st--nous .bres-st-o{background:#3ED07A}
.bres-st--eux .bres-st-o{background:#FF6B6B}
.bres-st--capot .bres-st-o{background:#FFCE00}
.bres-st--term .bres-st-o{width:26px;height:26px;background:#FFCE00;box-shadow:0 0 0 3px #0B0E13,0 0 0 6px #fff,0 0 0 8px #0B0E13}
.bres-st-v{font-weight:900;font-size:14px;font-variant-numeric:tabular-nums}
.bres-st-v--nous{grid-row:1;color:#7DF0A9}
.bres-st-v--eux{grid-row:3;color:#FFA19A}
.bres-st-n{grid-row:4;font-family:var(--mono);font-size:10px;color:#FBF6E9}
.bres-st-c{grid-row:5;font-family:var(--mono);font-size:9px;color:rgba(251,246,233,.6);white-space:nowrap}
.bres-st--term{width:80px}
.bres-st--term .bres-st-n{grid-row:3/5;font-weight:700}

.bres-fin-tuiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px auto 0;max-width:640px}
.bres-tu{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:12px;
  background:rgba(11,14,19,.35);box-shadow:inset 0 0 0 1.5px rgba(255,236,190,.35)}
.bres-tu-v{font-weight:900;font-size:20px;color:#FFCE00;font-variant-numeric:tabular-nums}
.bres-tu-l{font-family:var(--mono);font-size:10px;line-height:1.2;color:#E6EDF5}
.bres-fin-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;position:relative;z-index:6}
.bres-fin-btns .btn{min-height:44px}
@media (max-width:520px){
  .bres-fin{margin:6px 6px 20px;padding:14px 10px 16px;border-radius:18px}
  .bres-fin-duo{gap:8px;margin-top:24px}
  .bres-fin-avs .bres-av{width:42px;height:42px}
  .bres-fin-tuiles{grid-template-columns:repeat(2,1fr)}
  .bres-st{width:56px}
}
/* le Rat du métro de la fin de partie (calque sans clic, retiré quand il part) */
.bres-fin-ratc{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6;border-radius:inherit}

/* — rat_avance_1 — */
/* ==========================================================================
   MODE AVANCÉ · LE RAT DU MÉTRO (lot rat_avance_1) — le calque et les décors
   Lignes d'une station (la bouche de métro), Quiz du réseau (le plateau
   télé), Reconnaître une station (le labo du détective). Aucun texte.
   ========================================================================== */
/* — le calque : sur tout le cadre, ne vole aucun clic — */
.ra1-calque{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:9;border-radius:inherit}
.ra1-calque > *{pointer-events:none}
.ra1-calque > div{will-change:transform,opacity}
/* — un élément du jeu en attente du rat (il réapparaît toujours) — */
.ra1-cache{opacity:0 !important;pointer-events:none !important}

/* ——— Lignes d'une station : LA BOUCHE DE MÉTRO ——— */
.ra1-bouche{position:absolute;width:132px;height:74px;margin-left:-66px;transform-origin:50% 100%;
  filter:drop-shadow(0 6px 0 rgba(11,14,19,.22))}
/* l'arc vert (fonte) */
.ra1-bouche u{position:absolute;left:8px;right:8px;top:6px;height:40px;border:6px solid #2E7D4F;border-bottom:0;
  border-radius:70px 70px 0 0;box-shadow:0 -2px 0 #0B0E13,inset 0 2px 0 #0B0E13}
/* les deux lampadaires et leurs globes orangés */
.ra1-bouche i{position:absolute;bottom:0;width:8px;height:62px;background:linear-gradient(90deg,#1F5A37,#3C9A63 60%,#1F5A37);
  border:2px solid #0B0E13;border-radius:4px 4px 2px 2px}
.ra1-bouche i:nth-of-type(1){left:2px}
.ra1-bouche i:nth-of-type(2){right:2px}
.ra1-bouche i::before{content:"";position:absolute;left:-7px;top:-15px;width:18px;height:16px;border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 40% 35%,#FFE3A6,#F28E42 55%,#C4461B);border:2px solid #0B0E13;
  box-shadow:0 0 14px 4px rgba(255,170,80,.55)}
/* l'escalier qui s'enfonce */
.ra1-bouche b{position:absolute;left:14px;right:14px;bottom:0;height:30px;border:3px solid #0B0E13;border-bottom:0;
  border-radius:10px 10px 0 0;
  background:repeating-linear-gradient(180deg,#4A5262 0 4px,#2A303C 4px 8px),#1B2029;
  -webkit-mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.7));mask:linear-gradient(180deg,#000 30%,rgba(0,0,0,.7));
  box-shadow:inset 0 -12px 10px rgba(0,0,0,.55)}
/* la rampe et le médaillon (sans lettre) */
.ra1-bouche s{position:absolute;left:50%;top:0;width:16px;height:16px;margin-left:-8px;border-radius:50%;
  background:#FFCE00;border:2.5px solid #0B0E13}
/* une pastille de ligne en vol, et sa traînée */
.ra1-vol{position:absolute;left:0;top:0;border-radius:50%;display:grid;place-items:center;
  font:800 1.15rem/1 Archivo,system-ui,sans-serif;letter-spacing:-.02em;
  background:var(--c,#FFCE00);color:var(--t,#0B0E13);
  box-shadow:0 0 0 3px #0B0E13,0 8px 12px rgba(11,14,19,.28);z-index:3}
.ra1-vol--trace{box-shadow:none;z-index:2;font-size:0}
/* l'onde d'un atterrissage / de la poussière */
.ra1-onde{position:absolute;border-radius:50%;border:4px solid #FFCE00;box-sizing:border-box}
.ra1-onde--poussiere{border-width:0;background:radial-gradient(circle,rgba(201,193,166,.85) 0 30%,rgba(201,193,166,.35) 55%,transparent 70%)}
.ra1-etin{position:absolute;width:9px;height:9px;border-radius:50%;border:1.5px solid #0B0E13}
/* la plaque émaillée (fin de partie perdue) */
.ra1-plaque{position:absolute;width:140px;height:44px;border-radius:9px;background:#1F3D8A;
  border:3px solid #0B0E13;box-shadow:inset 0 0 0 3px #FBF6E9,0 5px 0 rgba(11,14,19,.25);
  transform-origin:50% -18px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 18px;box-sizing:border-box}
.ra1-plaque::before{content:"";position:absolute;left:50%;top:-20px;width:2px;height:18px;background:#0B0E13;margin-left:-1px}
.ra1-plaque i{display:block;height:4px;border-radius:2px;background:#FBF6E9;opacity:.9}
.ra1-plaque i:nth-child(2){width:70%;margin:0 auto}

/* ——— Quiz : LE PLATEAU TÉLÉ ——— */
.ra1-spot{position:absolute;width:46%;height:115%;opacity:0;
  background:linear-gradient(180deg,rgba(255,240,170,.62),rgba(255,240,170,.08) 85%,transparent);
  clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);mix-blend-mode:screen}
.ra1-spot--g{left:-6%;transform-origin:10% 0}
.ra1-spot--d{right:-6%;transform-origin:90% 0}
.ra1-spot--seul{transform-origin:50% 0;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
/* le rideau de velours : plis, ombre du bas, lambrequin à franges dorées */
.ra1-rideau{position:absolute;overflow:hidden;border-radius:16px;z-index:4}
.ra1-rideau i{position:absolute;top:0;bottom:0;width:51%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),transparent 22%,transparent 70%,rgba(40,0,6,.45)),
    repeating-linear-gradient(90deg,#8E0819 0,#C8122B 7px,#E0213B 11px,#B30E25 16px,#7E0616 22px);
  box-shadow:inset 0 -10px 0 #5E0410}
.ra1-rideau i:nth-of-type(1){left:0;transform-origin:0 50%;border-right:3px solid #0B0E13;
  box-shadow:inset 0 -10px 0 #5E0410,inset -14px 0 18px rgba(40,0,6,.45)}
.ra1-rideau i:nth-of-type(2){right:0;transform-origin:100% 50%;border-left:3px solid #0B0E13;
  box-shadow:inset 0 -10px 0 #5E0410,inset 14px 0 18px rgba(40,0,6,.45)}
.ra1-rideau b{position:absolute;left:0;right:0;top:0;height:17%;min-height:26px;
  background:repeating-linear-gradient(90deg,#6E0614 0 14px,#8A0A1C 14px 28px);border-bottom:3px solid #0B0E13}
.ra1-rideau b::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:10px;
  background:radial-gradient(circle at 50% 0,#FFCE00 0 5px,#B88A00 5.5px 6.5px,transparent 7px) 0 0/14px 10px repeat-x}
/* la lueur de la rampe, sous le rideau fermé */
.ra1-rideau s{position:absolute;left:0;right:0;bottom:0;height:40%;
  background:radial-gradient(ellipse at 50% 100%,rgba(255,220,120,.45),transparent 70%)}
/* les reflets qui balaient une carte-réponse */
.ra1-reflet{position:absolute;overflow:hidden;border-radius:20px}
.ra1-reflet i{position:absolute;top:-10%;bottom:-10%;left:0;width:28%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75) 45%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.75) 55%,transparent)}
/* le choc des deux cartes Vrai / Faux : une étoile sans texte */
.ra1-choc{position:absolute;width:68px;height:68px;
  background:radial-gradient(circle,#fff 0 22%,#FFE680 30%,transparent 62%);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
/* la guirlande d'ampoules du plateau (bonne réponse, panneau de question) */
.ra1-ampoules{position:absolute;border-radius:24px;box-sizing:border-box;
  border:5px dotted #FFD84A;box-shadow:0 0 16px rgba(255,206,0,.65),inset 0 0 12px rgba(255,206,0,.35)}
.ra1-ampoules::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:5px dotted #FFFBE6;
  animation:ra1-chasse .26s steps(1) infinite}
.ra1-ampoules--pan{border-radius:26px;border-width:4px}
@keyframes ra1-chasse{0%{opacity:1}50%{opacity:0}}
/* la croix du buzzer (mauvaise réponse) */
.ra1-croix{position:absolute;width:56px;height:56px}
.ra1-croix::before,.ra1-croix::after{content:"";position:absolute;left:50%;top:50%;width:62px;height:13px;margin:-6.5px 0 0 -31px;
  background:#E3051C;border:3px solid #0B0E13;border-radius:7px;box-shadow:0 4px 0 rgba(11,14,19,.3)}
.ra1-croix::before{transform:rotate(45deg)}
.ra1-croix::after{transform:rotate(-45deg)}

/* ——— Reconnaître une station : LE LABO DU DÉTECTIVE ——— */
.ra1-nuit{position:absolute;inset:0;opacity:0}
.ra1-nuit i{position:absolute;left:0;top:0;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;
  box-shadow:0 0 0 3000px rgba(6,10,18,.62),inset 0 0 30px 10px rgba(6,10,18,.5);
  background:radial-gradient(circle,rgba(255,236,170,.22),transparent 70%)}
/* le bain de développement : lumière rouge inactinique qui s'efface vers le bas */
.ra1-bain{position:absolute;border-radius:8px;
  background:linear-gradient(180deg,rgba(60,8,4,0) 0%,rgba(92,14,8,.92) 30%,#3A0905 60%,#2A0603 100%);
  background-size:100% 260%;box-shadow:inset 0 0 40px rgba(255,60,30,.35)}
.ra1-flash{position:absolute;background:#fff;border-radius:8px;box-shadow:0 0 40px 20px rgba(255,255,255,.7)}
/* la loupe qui parcourt la photo */
.ra1-loupe{position:absolute;left:0;top:0;border-radius:50%;box-sizing:border-box;
  border:6px solid #3B2A1A;box-shadow:0 0 0 2.5px #0B0E13,inset 0 0 0 2px #0B0E13,0 8px 14px rgba(11,14,19,.3);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55) 0 12%,rgba(220,240,255,.18) 40%,rgba(255,255,255,.05) 70%);
  backdrop-filter:brightness(1.15) contrast(1.1)}
.ra1-loupe i{position:absolute;left:84%;top:84%;width:42%;height:13%;background:#3B2A1A;border:2.5px solid #0B0E13;border-radius:6px;
  transform:rotate(45deg);transform-origin:0 50%}
/* le tampon « classé » (bonne réponse), sans texte : un cercle et une coche */
.ra1-tampon{position:absolute;width:52px;height:52px;border-radius:50%;box-sizing:border-box;
  border:4px solid #00814F;background:rgba(0,129,79,.12);box-shadow:inset 0 0 0 3px rgba(0,129,79,.35)}
.ra1-tampon::after{content:"";position:absolute;left:13px;top:9px;width:13px;height:22px;border:solid #00814F;border-width:0 5px 5px 0;transform:rotate(40deg)}
.ra1-eclair{position:absolute;border-radius:50%;
  background:radial-gradient(circle,#fff 0 18%,rgba(255,250,210,.7) 30%,transparent 68%)}
.ra1-cadre-or{position:absolute;border:7px solid #E8B400;border-radius:6px;
  box-shadow:inset 0 0 0 3px #0B0E13,0 0 0 3px #0B0E13,0 0 22px rgba(255,206,0,.6)}
.ra1-photo{position:absolute;width:54px;height:46px;background:#FBF6E9;border:2px solid #0B0E13;border-radius:3px;
  box-shadow:inset 0 0 0 4px #FBF6E9,inset 0 -12px 0 4px #FBF6E9,inset 0 0 0 40px #6EA8C9}

/* — la gerbe de pastilles (séries, record) — */
.ra1-past{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #0B0E13}

@media (max-width:520px){
  .ra1-plaque{width:110px;height:36px}
  .ra1-spot{width:60%}
}
@media (prefers-reduced-motion:reduce){
  .ra1-ampoules::after{animation:none}
}

/* — rat_avance_2 — */
/* ==========================================================================
   MODE AVANCÉ · LE RAT DU MÉTRO (lot rat_avance_2, version 2) — le calque et les décors
   Le plus court chemin (rame express), Itinéraire Avancé (signal de départ),
   Nombre de voyageurs (heure de pointe)
   ========================================================================== */
/* — le calque : sur tout le cadre, ne vole aucun clic — */
.ra2-calque{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:9;border-radius:inherit}
.ra2-calque > *{pointer-events:none}
/* — un élément du jeu en attente du rat (il réapparaît toujours) — */
.ra2-cache{opacity:0 !important;pointer-events:none !important}

/* — le double figé de l'ancien trajet (Le plus court chemin) : immobile, inerte — */
.ra2-fantome{position:absolute;overflow:hidden}
.ra2-fantome-in{box-sizing:border-box}
.ra2-fantome-in *{animation-delay:-99s !important;animation-iteration-count:1 !important;transition:none !important}

/* — la rame express : le train, ses traits de vitesse, le rat sur le toit — */
.ra2-express{position:absolute;left:0;will-change:transform}
.ra2-rame-in{position:absolute;left:0;right:0;bottom:0;animation:ra2-roule .11s linear infinite alternate}
.ra2-rame{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 0 rgba(11,14,19,.22))}
.ra2-faisceau{fill:#FFE27A;opacity:.45}
.ra2-vitesse{position:absolute;right:96%;bottom:4px;width:150px;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(11,14,19,.5) 0 2px,transparent 2px 8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);opacity:.7}
.ra2-express .mkr-scene{z-index:2}
@keyframes ra2-roule{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
/* — le souffle du train : un voile clair sur toute la hauteur, juste derrière son nez — */
.ra2-souffle{position:absolute;left:0;width:110px;will-change:transform;
  background:linear-gradient(90deg,rgba(255,251,240,0),rgba(255,251,240,.32) 70%,rgba(255,255,255,.7) 97%,rgba(255,255,255,0))}
.ra2-souffle::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0 14px,rgba(11,14,19,.16) 14px 15.5px,transparent 15.5px 31px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 80%);mask-image:linear-gradient(90deg,transparent,#000 80%)}

/* — l'heure de pointe : la marée de voyageurs — */
.ra2-foule{position:absolute;left:0;will-change:transform;
  background:linear-gradient(90deg,rgba(244,233,207,0) 0,#F4E9CF var(--f),#F4E9CF calc(100% - var(--f)),rgba(244,233,207,0) 100%)}
.ra2-foule svg{position:absolute;left:0;top:0;overflow:visible}
.ra2-pas{animation:ra2-pas .3s ease-in-out infinite alternate}
@keyframes ra2-pas{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}

/* — la borne à billets (bleue, écran, fente) — */
.ra2-borne{position:absolute;width:44px;height:64px;margin:-64px 0 0 -22px;border-radius:9px 9px 4px 4px;box-sizing:border-box;
  background:linear-gradient(180deg,#2F5DB0,#1B2440);border:3px solid #0B0E13;transform-origin:50% 100%;
  box-shadow:0 4px 0 rgba(11,14,19,.25)}
.ra2-borne i{position:absolute;left:6px;right:6px;top:6px;height:16px;border-radius:3px;background:#7FD4E8;border:2px solid #0B0E13;box-sizing:border-box}
.ra2-borne b{position:absolute;left:9px;right:9px;top:30px;height:5px;border-radius:3px;background:#0B0E13}

/* — le feu de signalisation (Itinéraire Avancé) — */
.ra2-feu{position:absolute;width:30px;height:104px;margin:-104px 0 0 -15px;transform-origin:50% 100%}
.ra2-feu b{position:absolute;left:0;top:0;width:30px;height:78px;box-sizing:border-box;border-radius:10px;background:#1B2440;border:3px solid #0B0E13;
  display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;box-shadow:0 4px 0 rgba(11,14,19,.25)}
.ra2-feu i{display:block;width:16px;height:16px;border-radius:50%;background:#3A4256;border:2px solid #0B0E13;box-sizing:border-box;
  transition:background-color .06s,box-shadow .06s}
.ra2-feu u{position:absolute;left:12px;top:76px;width:6px;height:28px;background:#0B0E13;border-radius:0 0 3px 3px}
.ra2-feu[data-k="0"] i:nth-child(1){background:#E3051C;box-shadow:0 0 12px 4px rgba(227,5,28,.75)}
.ra2-feu[data-k="1"] i:nth-child(2){background:#FF8A1F;box-shadow:0 0 12px 4px rgba(255,138,31,.75)}
.ra2-feu[data-k="2"] i:nth-child(3){background:#3ED07A;box-shadow:0 0 14px 6px rgba(62,208,122,.8)}

/* — la panne de courant — */
.ra2-panne{position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 40%,rgba(11,14,19,.35),rgba(11,14,19,.82))}

/* — les portillons qui claquent (billet refusé) — */
.ra2-portillon{position:absolute;width:78px;height:40px;margin:-46px 0 0 -39px}
.ra2-portillon::before,.ra2-portillon::after{content:"";position:absolute;top:-6px;width:8px;height:46px;border-radius:3px;background:#8C949E;border:2px solid #0B0E13;box-sizing:border-box}
.ra2-portillon::before{left:-6px}
.ra2-portillon::after{right:-6px}
.ra2-portillon i{position:absolute;top:2px;width:38px;height:30px;box-sizing:border-box;background:#E3051C;border:3px solid #0B0E13}
.ra2-portillon i:first-child{left:1px;transform-origin:0 50%;border-radius:3px 14px 14px 3px}
.ra2-portillon i:last-child{right:1px;transform-origin:100% 50%;border-radius:14px 3px 3px 14px}

/* — le plan du métro qu'il déroule (Le plus court chemin, entrée) — */
.ra2-plan{position:absolute;transform-origin:0 50%;border-radius:8px;background:#FBF6E9;
  border:3px solid #0B0E13;box-shadow:0 6px 0 rgba(11,14,19,.25);padding:6px;box-sizing:border-box}
.ra2-plan::before,.ra2-plan::after{content:"";position:absolute;top:-5px;bottom:-5px;width:10px;border-radius:5px;
  background:#E8D9B0;border:2px solid #0B0E13}
.ra2-plan::before{left:-8px}
.ra2-plan::after{right:-8px}
.ra2-plan svg{display:block;width:100%;height:100%}
.ra2-plan path{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;
  animation:ra2-trace .55s .1s ease-out forwards}
.ra2-plan path:nth-child(2){animation-delay:.2s}
.ra2-plan path:nth-child(3){animation-delay:.3s}
.ra2-plan circle{fill:#FBF6E9;stroke:#0B0E13;stroke-width:2.4;opacity:0;animation:ra2-arret .25s .6s ease-out forwards}
@keyframes ra2-trace{to{stroke-dashoffset:0}}
@keyframes ra2-arret{to{opacity:1}}

/* — le ticket de métro (crème, bande magnétique) — */
.ra2-ticket{position:absolute;width:30px;height:20px;border-radius:3px;background:#FBF6E9;
  border:2px solid #0B0E13;box-sizing:border-box;overflow:hidden}
.ra2-ticket i{position:absolute;left:0;right:0;bottom:3px;height:4px;background:var(--b,#7A4BA8)}

/* — le poinçon : un anneau qui claque, trois éclats — */
.ra2-poincon{position:absolute;width:0;height:0}
.ra2-poincon::before{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;
  border:3px solid var(--c,#FFCE00);box-sizing:border-box;animation:ra2-anneau .6s ease-out forwards}
.ra2-poincon i{position:absolute;left:-2px;top:-2px;width:4px;height:10px;border-radius:2px;background:#0B0E13;
  transform-origin:2px 2px;opacity:0;animation:ra2-eclat .5s ease-out forwards}
.ra2-poincon i:nth-child(1){--a:-40deg}
.ra2-poincon i:nth-child(2){--a:80deg}
.ra2-poincon i:nth-child(3){--a:200deg}
@keyframes ra2-anneau{0%{transform:scale(.2);opacity:1}100%{transform:scale(1.6);opacity:0}}
@keyframes ra2-eclat{0%{transform:rotate(var(--a)) translateY(4px);opacity:1}100%{transform:rotate(var(--a)) translateY(18px);opacity:0}}

/* — le fanion planté — */
.ra2-fanion{position:absolute;width:3px;height:34px;margin:-34px 0 0 -1px;background:#0B0E13;border-radius:2px;transform-origin:50% 100%}
.ra2-fanion::after{content:"";position:absolute;left:3px;top:0;width:0;height:0;
  border-left:20px solid var(--c,#FFCE00);border-top:8px solid transparent;border-bottom:8px solid transparent;
  filter:drop-shadow(1px 0 0 #0B0E13) drop-shadow(0 1px 0 #0B0E13);animation:ra2-flotte .5s ease-in-out infinite alternate}
@keyframes ra2-flotte{from{transform:skewY(-6deg)}to{transform:skewY(6deg) scaleX(.9)}}

/* — le cône de chantier — */
.ra2-cone{position:absolute;width:22px;height:26px}
.ra2-cone::before{content:"";position:absolute;left:3px;top:0;width:16px;height:22px;
  background:repeating-linear-gradient(180deg,#FF8A1F 0 6px,#FBF6E9 6px 10px);
  clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)}
.ra2-cone::after{content:"";position:absolute;left:0;bottom:0;width:22px;height:5px;border-radius:2px;background:#0B0E13}

/* — la guirlande de fanions (record) — */
.ra2-guirlande{position:absolute;left:0;right:0;height:26px;display:flex;justify-content:space-around;
  border-top:2px solid #0B0E13}
.ra2-guirlande i{display:block;width:0;height:0;border-top:20px solid var(--c);
  border-left:9px solid transparent;border-right:9px solid transparent;
  transform-origin:50% 0;animation:ra2-balance .7s calc(var(--i)*-.13s) ease-in-out infinite alternate}
@keyframes ra2-balance{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}

@media (prefers-reduced-motion:reduce){
  .ra2-plan path,.ra2-plan circle{animation:none;stroke-dashoffset:0;opacity:1}
  .ra2-fanion::after,.ra2-guirlande i,.ra2-pas,.ra2-rame-in{animation:none}
}

/* — rat_avance_3 — */
/* ==========================================================================
   MODE AVANCÉ · LE RAT DU MÉTRO (lot rat_avance_3) — le calque et les décors
   Reconstituer une ligne (gare de triage, chantier), À vue d'œil (la loupe
   du géomètre)
   ========================================================================== */
/* — le calque : sur tout le cadre, ne vole aucun clic — */
.ra3-calque{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:9;border-radius:inherit}
.ra3-calque > *{pointer-events:none}
/* — un élément du jeu en attente du rat (il réapparaît toujours) — */
.ra3-cache{opacity:0 !important}

/* — le fantôme : la copie de l'écran qui s'en va (figée, sans ses animations) — */
.ra3-fantome{position:absolute;margin:0;will-change:transform,opacity}
.ra3-fantome > *{margin:0 !important;width:100% !important;box-sizing:border-box}
.ra3-fantome,.ra3-fantome *{animation:none !important;transition:none !important;pointer-events:none !important}

/* — la voie qui se pose : traverses de bois, deux rails d'acier — */
.ra3-voie{position:absolute;height:18px}
.ra3-voie i{position:absolute;top:2px;width:9px;height:14px;border-radius:2px;background:#8A5A2B;
  border:2px solid #0B0E13;box-sizing:border-box;opacity:0;transform:translateY(-10px);
  animation:ra3-trav .18s ease-out forwards}
.ra3-voie b{position:absolute;left:0;right:0;height:3px;background:#B3BAC3;border-radius:2px;
  box-shadow:0 0 0 1.5px #0B0E13;transform:scaleX(0);transform-origin:0 50%;animation:ra3-rail linear forwards}
.ra3-voie b:nth-of-type(1){top:4px}
.ra3-voie b:nth-of-type(2){top:11px}
@keyframes ra3-trav{to{opacity:1;transform:none}}
@keyframes ra3-rail{to{transform:scaleX(1)}}

/* — le rail de triage sous une rangée de cartes — */
.ra3-rail{position:absolute;height:9px;border-radius:2px;opacity:0;
  background:
    linear-gradient(#C9D0D8,#8C949E) 0 0/100% 3px no-repeat,
    linear-gradient(#C9D0D8,#8C949E) 0 6px/100% 3px no-repeat,
    repeating-linear-gradient(90deg,#8A5A2B 0 7px,transparent 7px 18px) 0 1px/100% 7px no-repeat;
  filter:drop-shadow(0 1.5px 0 #0B0E13)}

/* — gerbe d'étincelles — */
.ra3-etinc{position:absolute;width:0;height:0;--c:#FFCE00}
.ra3-etinc i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--c);
  box-shadow:0 0 6px var(--c);transform:rotate(var(--a)) translateX(0);opacity:1;
  animation:ra3-etinc .55s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes ra3-etinc{to{transform:rotate(var(--a)) translateX(34px) scale(.3);opacity:0}}

/* — poussière au sol (quatre bouffées qui s'écartent et montent) — */
.ra3-pouf{position:absolute;width:0;height:0;--c:rgba(251,246,233,.85)}
.ra3-pouf i{position:absolute;left:-7px;top:-12px;width:14px;height:12px;border-radius:50%;background:var(--c);
  opacity:.9;transform:translate(0,0) scale(.4);animation:ra3-pouf .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ra3-pouf{to{transform:translate(var(--dx),-12px) scale(1.25);opacity:0}}

/* — onde (anneau qui s'élargit) — */
.ra3-onde{position:absolute;border-radius:50%;border:3px solid var(--c,#FFCE00);box-sizing:border-box;
  box-shadow:0 0 10px var(--c,#FFCE00)}

/* — traînée (dessinée par clip-path, couleur --c) — */
.ra3-trait{position:absolute;height:6px;border-radius:3px;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--c,#FFCE00) 55%,#fff);box-shadow:0 0 8px var(--c,#FFCE00);opacity:.9}

/* — la règle graduée qui s'allume au sol — */
.ra3-regle{position:absolute;height:12px;border-radius:3px;border:2px solid #0B0E13;box-sizing:border-box;transform-origin:50% 50%;
  background:repeating-linear-gradient(90deg,#0B0E13 0 1.5px,transparent 1.5px 9px) 0 0/100% 4px no-repeat,
    repeating-linear-gradient(90deg,#0B0E13 0 2px,transparent 2px 45px) 0 0/100% 7px no-repeat,#FFCE00;
  box-shadow:0 0 12px rgba(255,206,0,.6)}

/* — le feu vert qui balaie le champ (station posée) — */
.ra3-signal{position:absolute;overflow:hidden;border-radius:14px}
.ra3-signal i{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,195,137,.45) 45%,rgba(255,255,255,.55) 52%,transparent 60%)}

/* — traverse (pleine, fendue, volante) et crampon d'or — */
.ra3-trav{position:absolute;width:52px;height:13px;border-radius:3px;background:#8A5A2B;border:2.4px solid #0B0E13;
  box-sizing:border-box;box-shadow:inset 0 3px 0 rgba(255,255,255,.18)}
.ra3-trav--vol{width:26px;height:9px;border-width:2px;background:var(--b,#8A5A2B)}
.ra3-trav-f{position:absolute;width:48px;height:12px}
.ra3-trav-f i{position:absolute;top:0;width:24px;height:12px;background:#8A5A2B;border:2.2px solid #0B0E13;box-sizing:border-box}
.ra3-trav-f i:first-child{left:0;border-radius:3px 0 0 3px;animation:ra3-fend-g .9s .15s ease-in forwards}
.ra3-trav-f i:last-child{right:0;border-radius:0 3px 3px 0;animation:ra3-fend-d .9s .15s ease-in forwards}
@keyframes ra3-fend-g{to{transform:translate(-8px,6px) rotate(-22deg);opacity:0}}
@keyframes ra3-fend-d{to{transform:translate(8px,6px) rotate(22deg);opacity:0}}
.ra3-crampon{position:absolute;width:8px;height:24px;border-radius:2px 2px 1px 1px;background:linear-gradient(90deg,#FFE680,#FFCE00 45%,#C99400);
  border:2px solid #0B0E13;box-sizing:border-box;box-shadow:0 0 10px rgba(255,206,0,.7)}
.ra3-crampon::before{content:"";position:absolute;left:-5px;top:-4px;width:14px;height:6px;border-radius:2px;background:#FFCE00;border:2px solid #0B0E13}

/* — le feu rouge de la lanterne (erreur) — */
.ra3-feu{position:absolute;width:16px;height:16px;border-radius:50%;background:#E3051C;
  box-shadow:0 0 0 2px #0B0E13,0 0 16px 6px rgba(227,5,28,.55);opacity:0}

/* — le levier d'aiguillage — */
.ra3-levier{position:absolute;width:28px;height:44px;transform-origin:50% 100%}
.ra3-levier b{position:absolute;left:12px;top:0;width:5px;height:34px;border-radius:3px;background:#B3BAC3;
  box-shadow:0 0 0 2px #0B0E13;transform-origin:50% 100%;transform:rotate(-34deg)}
.ra3-levier b::before{content:"";position:absolute;left:-4px;top:-6px;width:13px;height:9px;border-radius:5px;background:#E3051C;box-shadow:0 0 0 2px #0B0E13}
.ra3-levier i{position:absolute;left:0;bottom:0;width:28px;height:12px;border-radius:4px 4px 2px 2px;background:#2F5DB0;
  box-shadow:0 0 0 2.2px #0B0E13,inset 0 -3px 0 rgba(0,0,0,.25)}

/* — la loupe géante du géomètre — */
.ra3-loupe{position:absolute;filter:drop-shadow(0 6px 0 rgba(11,14,19,.35))}
.ra3-loupe svg{display:block;width:100%;height:100%;overflow:visible}

/* — les cotes d'architecte (trait vertical, deux butées) — */
.ra3-cote{position:absolute;width:12px;transform-origin:50% 100%;--c:#FFCE00;
  background:linear-gradient(90deg,transparent 5px,var(--c) 5px 7px,transparent 7px);filter:drop-shadow(0 0 4px var(--c))}
.ra3-cote::before,.ra3-cote::after{content:"";position:absolute;left:0;width:12px;height:3px;border-radius:2px;background:var(--c)}
.ra3-cote::before{top:0}
.ra3-cote::after{bottom:0}

/* — le mètre ruban (boîtier + ruban gradué) — */
.ra3-metre{position:absolute;height:14px}
.ra3-metre b{position:absolute;inset:0;border-radius:2px;border:2px solid #0B0E13;box-sizing:border-box;
  background:repeating-linear-gradient(90deg,#0B0E13 0 1.5px,transparent 1.5px 10px) 0 0/100% 5px no-repeat,
    repeating-linear-gradient(90deg,#0B0E13 0 2px,transparent 2px 50px) 0 0/100% 8px no-repeat,#FFCE00;
  transform-origin:0 50%;transform:scaleX(0)}
.ra3-metre--g b{transform-origin:100% 50%;transform:none}
.ra3-boitier{position:absolute;width:26px;height:26px;border-radius:7px;background:#E3051C;border:2.4px solid #0B0E13;
  box-sizing:border-box;box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.ra3-boitier::after{content:"";position:absolute;left:6px;top:6px;width:10px;height:10px;border-radius:50%;background:#FBF6E9;border:2px solid #0B0E13;box-sizing:border-box}
.ra3-bout{position:absolute;width:24px;height:7px;border-radius:2px;border:1.6px solid #0B0E13;box-sizing:border-box;
  background:repeating-linear-gradient(90deg,#0B0E13 0 1px,transparent 1px 6px) 0 0/100% 3px no-repeat,#FFCE00}

@media (prefers-reduced-motion: reduce){
  .ra3-voie i,.ra3-voie b,.ra3-etinc i,.ra3-trav-f i,.ra3-pouf i{animation:none;opacity:1;transform:none}
  .ra3-fantome{display:none}
}

/* — grand_ecran — */
/* ==========================================================================
   GRAND ÉCRAN — le bouton et le calque fixe (jeux débutant et avancé)
   ========================================================================== */

/* — le bouton : une étiquette jaune « Grand écran » posée sur le bord haut du cadre — */
.ap-cadre > .ge-b{position:absolute;top:-19px;right:14px;z-index:60;height:36px;padding:0 14px 0 11px;
  display:inline-flex;align-items:center;gap:7px;border:0;border-radius:999px;cursor:pointer;color:#0B0E13;
  font:800 .86rem/1 var(--body,system-ui);letter-spacing:.01em;white-space:nowrap;
  background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .15s ease,background .2s ease}
.ap-cadre > .ge-b svg{width:17px;height:17px;display:block;flex:none}
.ap-cadre > .ge-b:hover{transform:translateY(-1px) scale(1.04)}
.ap-cadre > .ge-b:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
.ap-cadre > .ge-b:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ap-cadre > .ge-b.on{background:linear-gradient(180deg,#FFFFFF,#E9E3D2)}
/* petit écran : le pictogramme seul, rond */
@media (max-width:420px){
  .ap-cadre > .ge-b{width:38px;height:38px;padding:0;justify-content:center;right:10px}
  .ap-cadre > .ge-b .ge-t{display:none}
}
/* notre bouton remplace le bouton flottant des cartes (arrondissements) */
.ap-cadre.ge-a .mob-fs{display:none!important}

/* — les parents qui gêneraient la position fixe — */
.ge-porteur{will-change:auto!important;transform:none!important;filter:none!important;
  contain:none!important;perspective:none!important;animation:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* — la page derrière est figée — */
html.ge-on,html.ge-on body{overflow:hidden!important;overscroll-behavior:none!important}
html.ge-on body{touch-action:manipulation}

/* — le calque : le cadre couvre toute la fenêtre, encoches comprises — */
.ap-cadre.ge-plein{position:fixed!important;inset:0!important;z-index:900!important;
  width:auto!important;height:auto!important;max-width:none!important;max-height:none!important;
  margin:0!important;border-radius:0!important;box-sizing:border-box!important;
  display:flex!important;flex-direction:column!important;align-items:stretch;gap:6px;
  padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 8px)
    calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 8px)!important;
  overflow:hidden!important;overscroll-behavior:none;touch-action:manipulation;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--g,#2A3A50) 22%,#1B2533),#0C1118 70%)!important}
.ap-cadre.ge-plein > .ap-mascotte{display:none!important}
.ap-cadre.ge-plein > .ge-b{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);
  right:calc(env(safe-area-inset-right,0px) + 8px);width:38px;height:38px;padding:0;justify-content:center;z-index:80}
.ap-cadre.ge-plein > .ge-b .ge-t{display:none}
/* la barre du jeu, compacte, laisse la place au bouton */
html.ge-on .ap-cadre.ge-plein > .gamebar{flex:none!important;margin:0 48px 0 0!important;
  padding:6px 12px!important;gap:6px 14px!important;min-height:38px;box-sizing:border-box}
@media (max-height:480px){
  .ap-cadre.ge-plein{gap:4px;padding-top:calc(env(safe-area-inset-top,0px) + 4px)!important;
    padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px)!important}
  .ap-cadre.ge-plein > .gamebar{padding:3px 10px!important;min-height:34px}
  .ap-cadre.ge-plein > .gamebar .hudval{font-size:1.05rem}
  .ap-cadre.ge-plein > .ge-b{top:calc(env(safe-area-inset-top,0px) + 4px);width:34px;height:34px}
}
/* la scène (sa taille et son échelle sont posées par le script) */
.ap-cadre.ge-plein:not(.ge-libre) > .ap-stage{display:block!important;margin-top:0!important;margin-left:0!important;
  margin-right:0!important;box-sizing:border-box;border-radius:18px;
  padding:calc(clamp(10px,2.4vw,22px) + 10px) clamp(8px,2vw,22px) clamp(10px,2vw,22px)!important;
  overscroll-behavior:contain}
.ap-cadre.ge-plein:not(.ge-libre) > .ap-stage::before{top:8px}
/* la scène sert de repère aux mesures (offsetTop des blocs) */
.ap-cadre.ge-plein:not(.ge-libre) > .ap-stage{position:relative!important}
/* le dézoom en douceur, quand le contenu grandit : une seule valeur animée
   (--ge-kk) règle l'échelle et la hauteur ensemble ; sans @property, l'échelle seule */
html.ge-kk .ap-cadre.ge-plein:not(.ge-libre) > .ap-stage.ge-lisse{
  transition:--ge-kk .55s cubic-bezier(.22,.8,.25,1)!important}
html:not(.ge-kk) .ap-cadre.ge-plein:not(.ge-libre) > .ap-stage.ge-lisse{
  transition:transform .55s cubic-bezier(.22,.8,.25,1)!important}

/* Arrondissements (plan de Paris, mode libre) sur un écran en paysage : le plan
   à gauche sur toute la hauteur, les numéros à droite — tout tient sans défiler */
@media (orientation:landscape){
  .ap-cadre.ge-plein.ge-libre > .ap-stage{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(220px,30%);
    grid-template-rows:auto auto auto auto 1fr;column-gap:16px;align-content:stretch}
  .ap-cadre.ge-plein.ge-libre > .ap-stage > *{grid-column:2}
  .ap-cadre.ge-plein.ge-libre > .ap-stage > .paris{grid-column:1;grid-row:1/-1;height:100%;min-height:0;margin:0!important;
    display:grid;place-items:center;box-shadow:none;border-radius:0}
  .ap-cadre.ge-plein.ge-libre > .ap-stage > .paris > svg{width:100%;height:100%;max-height:100%}
  .ap-cadre.ge-plein.ge-libre > .ap-stage > :first-child,
  .ap-cadre.ge-plein.ge-libre > .ap-stage > :last-child{margin-top:0!important;margin-bottom:0!important}
  .ap-cadre.ge-plein.ge-libre > .ap-stage > .drag-src:has(.chip--num){grid-template-columns:repeat(4,minmax(0,1fr))}
}
.ap-cadre.ge-plein.ge-defile > .ap-stage{-webkit-overflow-scrolling:touch}
/* sans barre de jeu (choix du niveau, fin), la scène ne passe pas sous le bouton */
.ap-cadre.ge-plein:not(:has(> .gamebar)):not(.ge-libre){padding-top:calc(env(safe-area-inset-top,0px) + 52px)!important}
@media (max-height:480px){
  .ap-cadre.ge-plein:not(:has(> .gamebar)):not(.ge-libre){padding-top:calc(env(safe-area-inset-top,0px) + 4px)!important;
    padding-right:calc(env(safe-area-inset-right,0px) + 50px)!important}
}
/* l'écran de fin : il tient dans la scène, il ne réclame plus toute la fenêtre */
.ap-cadre.ge-plein .endcard{min-height:0!important;max-height:none!important}

/* — les fenêtres de la page passent au-dessus du calque — */
html.ge-on :is(.toast,.mc-modal,#authModal,.px-regles-fond,.so-envol,.fr-fantome){z-index:9600!important}

@media (prefers-reduced-motion:reduce){ .ap-cadre > .ge-b{transition:none} }

/* — runner_perso — */
/* ==========================================================================
   METRO RUNNER — LE COUREUR (runner_perso)
   Tout le coureur est peint dans le canevas du jeu (voir runner_perso.js) :
   aucune règle de style n'est nécessaire. Ce fichier reste pour la symétrie
   du lot ; il ne restyle aucune classe existante.
   ========================================================================== */

/* — runner_perf — */
/* METRO RUNNER — le bouton pause, le voile de pause et le décompte de reprise */

/* le bouton reprend le style du bouton plein écran ; c'est lui qui pousse à droite */
.rn-haut .rpf-pause{margin-left:auto}
.rn-haut .rpf-pause + .rn-plein{margin-left:0}
.rpf-pause.rpf-pause--seul{position:absolute;top:12px;right:12px;z-index:31}
.rpf-pause.rpf-cache{display:none}

/* pendant la pause, les animations du tableau de bord s'arrêtent aussi */
.rpf-en-pause .rn-hud *,.rpf-en-pause .rn-hud,.rpf-en-pause .rn-flottant,
.rpf-en-pause .rn-bandeau,.rpf-en-pause .rn-flash{animation-play-state:paused!important}

.rpf-voile{position:absolute;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(8,10,16,.58);-webkit-backdrop-filter:blur(3px) saturate(.8);backdrop-filter:blur(3px) saturate(.8);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
.rpf-voile.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .18s ease}

.rpf-carte{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:220px;max-width:calc(100% - 32px);
  padding:16px 16px 18px;border-radius:22px;color:#0B0E13;
  background:linear-gradient(180deg,#FBF6E9,#E7DDC6);
  box-shadow:0 0 0 3px #0B0E13,0 6px 0 3px #0B0E13,0 18px 40px rgba(0,0,0,.45);
  transform:translateY(0) scale(1);transition:transform .22s cubic-bezier(.2,1.4,.4,1),opacity .15s ease}
.rpf-voile:not(.on) .rpf-carte{transform:translateY(10px) scale(.96)}
.rpf-voile.rpf-compte .rpf-carte{opacity:0;transform:scale(.9);pointer-events:none}

.rpf-titre{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 4px;
  font:900 1.15rem/1 Archivo,system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase}
.rpf-titre-i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#0B0E13;color:#FFCE00}
.rpf-titre-i svg{width:17px;height:17px}

.rpf-b{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;border:0;border-radius:14px;cursor:pointer;
  font:800 1rem/1 Archivo,system-ui,sans-serif;color:#0B0E13;background:#fff;
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .14s cubic-bezier(.2,1.4,.4,1)}
.rpf-b svg{width:20px;height:20px;flex:none}
.rpf-b:hover{transform:translateY(-2px)}
.rpf-b:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13}
.rpf-b:focus-visible{outline:3px solid #3E8FD4;outline-offset:3px}
.rpf-b--jaune{background:#FFCE00}

/* le décompte : un chiffre, gros, qui claque puis s'efface */
.rpf-decompte{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rpf-chiffre{font:900 clamp(84px,22vmin,170px)/1 Archivo,system-ui,sans-serif;color:#FFCE00;
  -webkit-text-stroke:5px #0B0E13;paint-order:stroke fill;text-shadow:0 8px 0 #0B0E13;
  animation:rpf-claque .56s cubic-bezier(.2,1.3,.4,1) both}
@keyframes rpf-claque{
  0%{transform:scale(1.9);opacity:0}
  30%{transform:scale(1);opacity:1}
  75%{transform:scale(.96);opacity:1}
  100%{transform:scale(.7);opacity:0}}

.rpf-chiffre.rpf-calme{animation:none}
@media (max-width:760px){
  .rpf-carte{min-width:200px;padding:14px 14px 16px}
  .rpf-b{padding:10px 14px;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .rpf-voile,.rpf-carte,.rpf-b{transition:none}
  .rpf-chiffre{animation:none}
}

/* — reglages — */
/* ==========================================================================
   RÉGLAGES — la roue de l'en-tête et le panneau (préfixe rg-)
   Famille de la fenêtre de compte : contours noirs, ombres franches. Chaque
   rubrique a sa couleur de ligne de métro (--rg-c) qui teinte tout le panneau ;
   chaque réglage a sa pastille de couleur. Les curseurs sont des lignes.
   ========================================================================== */
@property --rg-c{syntax:"<color>";inherits:true;initial-value:#FFCE00}

.rg-roue svg{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.rg-roue:hover svg{transform:rotate(45deg)}
html.rg-ouvert .rg-roue svg{transform:rotate(90deg)}
html.rg-ouvert,html.rg-ouvert body{overflow:hidden}

/* — le fond et la boîte — */
.rg-fond{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top)) 12px max(16px,env(safe-area-inset-bottom));
  background:radial-gradient(90% 70% at 50% 40%,rgba(30,58,110,.55),rgba(5,7,10,.82));
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .22s ease}
.rg-fond.on{opacity:1}
.rg-fond.sort{opacity:0}
.rg-boite{--rg-c:#FFCE00;position:relative;display:flex;flex-direction:column;width:min(480px,100%);max-height:min(780px,100%);
  color:#fff;font-family:var(--body);border-radius:26px;overflow:hidden;
  background:
    radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--rg-c) 26%,transparent),transparent 60%),
    linear-gradient(175deg,#1E3A6E 0%,#122447 46%,#0D182E 100%);
  box-shadow:0 0 0 3px #0B0E13,0 8px 0 3px #0B0E13,0 0 40px -6px color-mix(in srgb,var(--rg-c) 55%,transparent),0 30px 60px -20px rgba(0,0,0,.7);
  transform:translateY(24px) scale(.94) rotate(-1deg);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1),--rg-c .45s ease,box-shadow .45s ease}
.rg-fond.on .rg-boite{transform:none}
.rg-fond.sort .rg-boite{transform:translateY(12px) scale(.97);transition-duration:.18s}

.rg-x{position:absolute;right:12px;top:12px;z-index:3;display:grid;place-items:center;width:40px;height:40px;
  border:0;border-radius:50%;cursor:pointer;color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);
  box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;transition:transform .2s cubic-bezier(.3,1.5,.5,1)}
.rg-x svg{width:18px;height:18px}
.rg-x:hover{transform:rotate(90deg) scale(1.06)}
.rg-x:active{transform:translateY(2px);box-shadow:0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}

/* — l'en-tête : la roue sur un soleil de rayons, des étincelles — */
.rg-tete{position:relative;display:flex;align-items:center;gap:12px;padding:16px 64px 12px 18px;isolation:isolate;
  background:radial-gradient(120% 150% at 12% 0%,color-mix(in srgb,var(--rg-c) 70%,#4C9BE6) 0%,#2A5FB0 46%,transparent 80%)}
.rg-tete::before{content:"";position:absolute;left:40px;top:38px;width:280px;aspect-ratio:1;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.14) 0 8deg,transparent 8deg 20deg);
  transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 62%);mask-image:radial-gradient(circle,#000 8%,transparent 62%);
  animation:rgRayons 30s linear infinite}
@keyframes rgRayons{to{transform:translate(-50%,-50%) rotate(360deg)}}
.rg-tete-roue{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;
  background:#0B0E13;box-shadow:0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13,0 0 18px color-mix(in srgb,var(--rg-c) 70%,transparent)}
.rg-tete-roue svg{width:40px;height:40px;animation:rgTourne 7s linear infinite}
.rg-tete-roue svg circle{fill:var(--rg-c);transition:fill .45s ease}
@keyframes rgTourne{to{transform:rotate(360deg)}}
.rg-tete h2{margin:0;font-family:var(--display);font-weight:800;font-size:1.6rem;letter-spacing:.02em;text-transform:uppercase;
  text-shadow:0 3px 0 #0B0E13}
.rg-etin{position:absolute;width:10px;height:10px;pointer-events:none;
  background:conic-gradient(from 45deg,#fff 0 25%,transparent 0 50%,#fff 0 75%,transparent 0);
  -webkit-mask:radial-gradient(circle,#000 30%,transparent 72%);mask:radial-gradient(circle,#000 30%,transparent 72%);
  animation:rgScint 2.4s ease-in-out infinite}
.rg-etin--1{left:66px;top:10px}
.rg-etin--2{left:178px;top:16px;width:7px;height:7px;animation-delay:-.8s}
.rg-etin--3{left:150px;top:44px;width:8px;height:8px;animation-delay:-1.6s}
@keyframes rgScint{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}

/* le bandeau des lignes, sous l'en-tête */
.rg-bandeau{display:flex;height:5px;flex:none;margin:0 18px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1.5px #0B0E13}
.rg-bandeau i{flex:1;transform-origin:left;animation:rgBande .6s cubic-bezier(.2,.8,.2,1) both}
.rg-bandeau i:nth-child(2){animation-delay:.03s}.rg-bandeau i:nth-child(3){animation-delay:.06s}
.rg-bandeau i:nth-child(4){animation-delay:.09s}.rg-bandeau i:nth-child(5){animation-delay:.12s}
.rg-bandeau i:nth-child(6){animation-delay:.15s}.rg-bandeau i:nth-child(7){animation-delay:.18s}
.rg-bandeau i:nth-child(8){animation-delay:.21s}.rg-bandeau i:nth-child(9){animation-delay:.24s}
.rg-bandeau i:nth-child(10){animation-delay:.27s}
@keyframes rgBande{from{transform:scaleX(0)}}

/* — les onglets : pictogramme + mot, chacun sa couleur — */
.rg-onglets{display:flex;gap:6px;padding:12px 14px 10px;overflow-x:auto;scrollbar-width:none;flex:none}
.rg-onglets::-webkit-scrollbar{display:none}
.rg-onglet{--c:#FFCE00;flex:1 1 0;min-width:0;min-height:44px;padding:0 10px;border:0;border-radius:14px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:800 .9rem var(--body);color:#DDE6F5;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12);transition:background .2s,color .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.rg-onglet-i{display:grid;place-items:center;width:22px;height:22px;flex:none;color:var(--c)}
.rg-onglet-i svg{width:20px;height:20px}
.rg-onglet:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.rg-onglet[aria-selected=true]{color:#0B0E13;background:var(--c);transform:translateY(-2px);
  box-shadow:0 0 0 2.5px #0B0E13,0 4px 0 2.5px #0B0E13,0 0 18px color-mix(in srgb,var(--c) 60%,transparent)}
.rg-onglet[aria-selected=true] .rg-onglet-i{color:#0B0E13;animation:rgSaut .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes rgSaut{40%{transform:translateY(-4px) rotate(-10deg) scale(1.15)}}

/* — le corps défilant — */
.rg-corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:2px 14px 18px}
.rg-volet[hidden]{display:none}
.rg-entre{animation:rgEntre .42s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rgEntre{from{opacity:0;transform:translateY(14px) scale(.97)}}
.rg-titre{display:flex;align-items:center;gap:8px;margin:14px 4px 8px;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rg-c)}
.rg-titre::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--rg-c),transparent)}
.rg-carte{display:flex;flex-direction:column;padding:4px 14px;margin-bottom:10px;border-radius:18px;position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(8,14,28,.5));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08),inset 4px 0 0 var(--rg-c)}
.rg-carte>*+*{border-top:1px solid rgba(255,255,255,.07)}

/* — la pastille de couleur d'un réglage — */
.rg-ico{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;color:#0B0E13;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 70%,#fff),var(--c));
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.rg-ico svg{width:20px;height:20px}
.rg-ligne:hover .rg-ico,.rg-vol:hover .rg-ico{transform:rotate(-8deg) scale(1.08)}

/* — une ligne de réglage : pastille, mot, commande — */
.rg-ligne{display:flex;align-items:center;gap:12px;padding:11px 0}
.rg-ligne-t{flex:1;min-width:0;font-size:.98rem;font-weight:800}

/* — une ligne de volume — */
.rg-vol{--c:#FFCE00;--p:100%;padding:10px 0 12px}
.rg-vol-haut{display:flex;align-items:center;gap:8px}
.rg-vol-nom{flex:1;display:flex;align-items:center;gap:11px;min-width:0;font-weight:800;font-size:.98rem;cursor:pointer}
.rg-vol-val{min-width:4.2em;padding:3px 8px;border-radius:999px;text-align:center;font-family:var(--mono);font-size:.78rem;font-weight:600;
  color:#0B0E13;background:var(--c);box-shadow:0 0 0 2px #0B0E13}
.rg-vol--general .rg-vol-nom{font-size:1.05rem}
.rg-vol.est-muet .rg-vol-val{color:#fff;background:#C8102E}
.rg-rond{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);transition:background .15s,transform .15s}
.rg-rond:hover{background:rgba(255,255,255,.18)}
.rg-rond:active{transform:scale(.9)}
.rg-rond svg{width:20px;height:20px}
.rg-rond[aria-pressed=true]{color:#fff;background:#C8102E;box-shadow:0 0 0 2px #0B0E13}
.rg-rond--jaune{color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
.rg-rond--jaune:hover{background:linear-gradient(180deg,#FFF0A8,#FFD71F)}
/* l'éclat : une onde qui part du bouton */
.rg-eclat::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 var(--c,#FFCE00);animation:rgOnde .6s ease-out}
@keyframes rgOnde{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--c,#FFCE00) 90%,transparent)}to{box-shadow:0 0 0 14px transparent}}
.rg-rond.rg-eclat{animation:rgPop .35s cubic-bezier(.3,1.7,.5,1)}
@keyframes rgPop{40%{transform:scale(1.18)}}

.rg-curseur{-webkit-appearance:none;appearance:none;display:block;width:100%;height:34px;margin:6px 0 0;background:transparent;cursor:pointer;touch-action:pan-y}
.rg-curseur:focus{outline:none}
.rg-curseur::-webkit-slider-runnable-track{height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--c) 0 var(--p),rgba(255,255,255,.13) var(--p) 100%);
  box-shadow:0 0 0 2px #0B0E13,0 0 14px -2px color-mix(in srgb,var(--c) 70%,transparent)}
.rg-curseur::-moz-range-track{height:12px;border-radius:999px;background:rgba(255,255,255,.13);box-shadow:0 0 0 2px #0B0E13}
.rg-curseur::-moz-range-progress{height:12px;border-radius:999px;background:var(--c)}
.rg-curseur::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-8px;border-radius:50%;
  background:#fff;border:4px solid #0B0E13;box-shadow:0 0 0 3px var(--c),0 3px 0 3px #0B0E13,0 0 16px var(--c);transition:transform .15s}
.rg-curseur::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #0B0E13;
  box-shadow:0 0 0 3px var(--c),0 3px 0 3px #0B0E13,0 0 16px var(--c)}
.rg-curseur:hover::-webkit-slider-thumb{transform:scale(1.08)}
.rg-curseur:active::-webkit-slider-thumb{transform:scale(1.22)}
.rg-curseur:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--c),0 0 0 7px #fff}
.rg-curseur:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--c),0 0 0 7px #fff}
.rg-vol.est-muet .rg-curseur{filter:grayscale(1) brightness(.7)}
.rg-vol.est-muet .rg-ico{filter:grayscale(1)}

/* — interrupteur — */
.rg-inter{position:relative;cursor:pointer}
.rg-inter-case{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rg-inter-piste{position:relative;flex:none;width:56px;height:32px;border-radius:999px;background:rgba(255,255,255,.14);
  box-shadow:0 0 0 2px #0B0E13;transition:background .25s,box-shadow .25s}
.rg-inter-piste::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 5px,transparent 5px 10px)}
.rg-inter-piste::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13;transition:transform .32s cubic-bezier(.3,1.6,.5,1)}
.rg-inter-case:checked+.rg-inter-piste{background:var(--c);box-shadow:0 0 0 2px #0B0E13,0 0 16px -2px var(--c)}
.rg-inter-case:checked+.rg-inter-piste::before{opacity:1}
.rg-inter-case:checked+.rg-inter-piste::after{transform:translateX(24px)}
.rg-inter-case:focus-visible+.rg-inter-piste{box-shadow:0 0 0 2px #0B0E13,0 0 0 5px #fff}
.rg-pop{animation:rgPop .35s cubic-bezier(.3,1.7,.5,1)}

/* — choix à segments — */
.rg-choix{flex-direction:column;align-items:stretch;gap:10px}
.rg-choix-tete{display:flex;align-items:center;gap:12px}
.rg-segments{display:flex;flex-wrap:wrap;gap:6px}
.rg-seg{flex:1 1 auto;min-height:40px;padding:0 12px;border:0;border-radius:12px;cursor:pointer;
  font:800 .88rem var(--body);color:#DDE6F5;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);
  transition:background .2s,color .2s,transform .25s cubic-bezier(.3,1.5,.5,1)}
.rg-seg:hover{background:rgba(255,255,255,.15)}
.rg-seg[aria-checked=true]{color:#0B0E13;background:var(--c);transform:translateY(-1px);
  box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13,0 0 14px -2px var(--c);animation:rgPop .35s cubic-bezier(.3,1.7,.5,1)}

/* — boutons d'action — */
.rg-bouton{position:relative;flex:none;min-height:40px;padding:0 16px;border:0;border-radius:12px;cursor:pointer;font:800 .9rem var(--body);
  color:#0B0E13;background:linear-gradient(180deg,#FFE88A,#FFCE00);box-shadow:0 0 0 2px #0B0E13,0 3px 0 2px #0B0E13;
  transition:transform .15s}
.rg-bouton:hover{transform:translateY(-1px)}
.rg-bouton:active{transform:translateY(2px);box-shadow:0 0 0 2px #0B0E13,0 1px 0 2px #0B0E13}
.rg-bouton:disabled{cursor:default;opacity:.85}
.rg-bouton--danger{color:#fff;background:linear-gradient(180deg,#FF6B6B,#C8102E)}
.rg-bouton--danger.arme{animation:rgTremble .4s ease}
@keyframes rgTremble{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* — musiques — */
.rg-vide{display:flex;align-items:center;gap:12px;margin:0;padding:12px 0;font-size:.9rem;font-weight:700;color:#C6D3E8}
.rg-vide-i{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;color:#0B0E13;background:#C08A4A;
  box-shadow:0 0 0 2px #0B0E13;animation:rgFlotte 2.6s ease-in-out infinite}
.rg-vide-i svg{width:19px;height:19px}
@keyframes rgFlotte{50%{transform:translateY(-3px) rotate(-6deg)}}
.rg-pistes{list-style:none;margin:0;padding:4px 0 8px;display:flex;flex-direction:column;gap:6px}
.rg-piste{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 12px;border-radius:14px;background:rgba(255,255,255,.06)}
.rg-piste.joue{background:rgba(255,206,0,.16);box-shadow:inset 0 0 0 1.5px rgba(255,206,0,.5)}
.rg-piste-eq{display:flex;align-items:flex-end;gap:2px;width:14px;height:16px;flex:none;opacity:.35}
.rg-piste-eq i{flex:1;height:30%;border-radius:1px;background:#FFCE00}
.rg-piste.joue .rg-piste-eq{opacity:1}
.rg-piste.joue .rg-piste-eq i{animation:rgEq .8s ease-in-out infinite}
.rg-piste.joue .rg-piste-eq i:nth-child(2){animation-delay:-.3s}
.rg-piste.joue .rg-piste-eq i:nth-child(3){animation-delay:-.55s}
@keyframes rgEq{50%{height:100%}}
.rg-piste-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.rg-piste-t{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rg-piste small{font-size:.76rem;color:#B4C3DC}

/* — infos — */
.rg-logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px 0 12px;padding:18px 12px;border-radius:18px;
  background:
    repeating-linear-gradient(90deg,#FFCE00 0 10%,#0064B0 10% 20%,#BE418D 20% 30%,#6ECA97 30% 40%,#F28E42 40% 50%,
      #FA9ABA 50% 60%,#6EC4E8 60% 70%,#62259D 70% 80%,#00814F 80% 90%,#9F9825 90% 100%) top/100% 6px no-repeat,
    linear-gradient(160deg,rgba(255,255,255,.08),rgba(8,14,28,.5));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08)}
.rg-logo b{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:.02em;text-transform:uppercase;
  background:linear-gradient(90deg,#FFE88A,#FFCE00 40%,#FA9ABA 70%,#5AB0FF);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #0B0E13)}
.rg-logo-v{font-family:var(--mono);font-size:.78rem;color:#C6D3E8}
.rg-discret{margin:6px 0 0;text-align:center;font-size:.78rem;color:#9FB7DA}

/* — focus visible partout dans le panneau — */
.rg-boite button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* — téléphone : une feuille qui prend tout l'écran — */
@media (max-width:560px){
  .rg-fond{padding:0;place-items:end stretch}
  .rg-boite{width:100%;max-height:100%;height:100%;border-radius:0;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(40px)}
  .rg-x{top:calc(12px + env(safe-area-inset-top))}
  .rg-tete h2{font-size:1.4rem}
  .rg-onglets{gap:5px;padding:10px 12px 8px}
  .rg-onglet{flex-direction:column;gap:2px;min-height:52px;padding:4px 4px;font-size:.78rem;border-radius:12px}
  .rg-corps{padding:2px 12px 24px}
}

/* — la carte de pause du Runner reçoit un bouton Réglages — */
.rg-pause svg{width:20px;height:20px;flex:none}

/* — animations réduites demandées dans les réglages (l'appareil ne le demande pas forcément) — */
html.mp-reduit *,html.mp-reduit *::before,html.mp-reduit *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;
  transition-duration:.01ms!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  .rg-fond,.rg-boite,.rg-inter-piste::after,.rg-roue svg{transition:none}
  .rg-tete::before,.rg-tete-roue svg,.rg-etin,.rg-vide-i,.rg-entre,.rg-bandeau i,.rg-piste-eq i{animation:none}
}

/* — rat_regles — */
/* ==========================================================================
   LE RAT DES RÈGLES — la règle contrôlée et son coup de poinçon
   (jamais d'animation sur le li : il a déjà son entrée, qu'on écraserait)
   ========================================================================== */
.px-regles.rr-livre{overflow-x:hidden}
.rr-livre .px-regles-l li{position:relative;padding-right:40px}
.rr-flash{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:color-mix(in srgb,var(--g,#FFCE00) 38%,transparent);animation:rrFlash .55s ease-out both}
@keyframes rrFlash{to{opacity:0}}
.rr-poincon{position:absolute;right:6px;top:50%;width:28px;height:28px;margin-top:-14px;color:var(--g,#0B0E13);pointer-events:none;
  filter:saturate(1.15) brightness(.82);transform:rotate(-7deg);animation:rrPoincon .3s cubic-bezier(.2,1.5,.4,1) both}
.rr-poincon svg{display:block;width:100%;height:100%}
@keyframes rrPoincon{from{transform:scale(1.35) rotate(-24deg);opacity:0}60%{transform:scale(.9) rotate(3deg);opacity:1}to{transform:rotate(-7deg);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .rr-flash{display:none}
  .rr-poincon{animation:none}
}

/* — ville — */
/* ==========================================================================
   LA VILLE — le bouton de l'en-tête et la fenêtre de choix (préfixe vmx-)
   La fenêtre reprend le cadre des réglages (rg-fond, rg-boite, rg-x, rg-tete).
   ========================================================================== */
/* la plaque de station : le même émail que les plaques du site, le même contour
   noir et la même hauteur que les boutons voisins */
#topActions .vmx-b{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 10px 0 15px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:.84rem;letter-spacing:.07em;text-transform:uppercase;line-height:1;white-space:nowrap;
  color:#fff;background:linear-gradient(180deg,#0A6FC2,#0064B0 55%,#00549A);
  box-shadow:inset 0 0 0 2px #0064B0,inset 0 0 0 3.5px rgba(255,255,255,.92),0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .15s ease,filter .15s ease}
#topActions .vmx-b:hover{transform:translateY(-1px);filter:brightness(1.1)}
#topActions .vmx-b:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #0064B0,inset 0 0 0 3.5px rgba(255,255,255,.92),0 0 0 2.5px #0B0E13,0 1px 0 2.5px #0B0E13}
#topActions .vmx-b:focus-visible{outline:3px solid #FFCE00;outline-offset:3px}
.vmx-b-c{display:none}
.vmx-b-v{width:12px;height:12px;flex:none;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.vmx-b[aria-expanded=true] .vmx-b-v{transform:rotate(180deg)}
/* grand écran d'ordinateur : les petites icônes voisines prennent la même taille ronde */
@media (min-width:721px){
  #topActions > .btn--picto{width:38px;height:38px;padding:0;display:inline-grid;place-items:center}
}
/* téléphone : une petite plaque avec le code de la ville, à la taille des icônes */
@media (max-width:720px){
  #topActions .vmx-b{height:31px;padding:0 8px;font-size:.66rem;letter-spacing:.04em;
    box-shadow:inset 0 0 0 1.5px #0064B0,inset 0 0 0 2.5px rgba(255,255,255,.92),0 0 0 2px #0B0E13,0 2px 0 2px #0B0E13}
  .vmx-b-t,.vmx-b-v{display:none}
  .vmx-b-c{display:inline}
}

.vmx-tete-m{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1.6rem;color:#fff;background:#0064B0;
  box-shadow:inset 0 0 0 3px #fff,0 0 0 2.5px #0B0E13,0 3px 0 2.5px #0B0E13}

.vmx-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 18px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vmx-carte{--c:#FFCE00;position:relative;display:flex;align-items:flex-start;gap:8px;min-width:0;padding:12px 12px 12px 16px;border:0;border-radius:18px;
  cursor:pointer;text-align:left;color:#fff;font-family:var(--body);overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 24%,transparent),rgba(8,14,28,.55));
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1),inset 5px 0 0 var(--c);
  animation:rgEntre .42s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0) * 55ms);
  transition:transform .22s cubic-bezier(.3,1.5,.5,1),box-shadow .2s}
.vmx-carte:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2),inset 5px 0 0 var(--c),0 10px 22px -10px var(--c)}
.vmx-carte:active{transform:scale(.97)}
.vmx-carte:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vmx-carte.on{box-shadow:0 0 0 2.5px var(--c),inset 5px 0 0 var(--c),0 0 20px -4px var(--c)}
.vmx-carte.part{animation:vlPart .28s ease-in both}
@keyframes vlPart{to{transform:scale(1.05);opacity:.5}}
.vmx-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.vmx-nom{font-family:var(--display);font-weight:800;font-size:1.22rem;letter-spacing:.01em}
.vmx-compte{font-size:.76rem;color:#C6D3E8}
.vmx-puces{display:flex;flex-wrap:wrap;gap:3px;margin-top:5px}
.vmx-puce{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 4px;box-sizing:border-box;border-radius:50%;font-style:normal;
  font-weight:800;font-size:.72rem;box-shadow:0 0 0 1.5px #0B0E13}
.vmx-puce--plus{border-radius:11px;background:rgba(255,255,255,.14);color:#fff}
.vmx-ok{position:absolute;right:9px;top:9px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#0B0E13;background:var(--c);
  box-shadow:0 0 0 2px #0B0E13}
.vmx-ok svg{width:15px;height:15px}
html.vmx-depart body{opacity:.25;transition:opacity .25s ease}
.vmx-reserve{filter:saturate(.55)}
/* hors de Paris, pas de RER ni de Grand Paris Express à activer */
html.vmx-autre .rx-duo{display:none!important}

@media (max-width:560px){
  .vmx-liste{grid-template-columns:1fr;padding:10px 12px 24px}
}
@media (prefers-reduced-motion:reduce){
  .vmx-carte{animation:none}
}
/* hors de Paris, pas de liste de monuments sous le plan d'une ligne */
html.vmx-autre .ls-vide{display:none}

/* @@ fin metroking_spectacle.css @@ */