/* Forge Gaming — feuille de style commune (version moderne validée par le client le 13/10).
   Une forge de nuit, en plus moderne : nav en verre dépoli, boutons en pilule, rayons doux, grain léger.
   Mascottes : aucune animation créée ici. Elles viennent du front des jeux (mascottes/mascotte.js, livraison d'Hugo). */
:root{
  --fond:#100d0b;
  --surface:#1b1512;
  --surface-2:#241c17;
  --ligne:rgba(244,239,228,.10);
  --ligne-forte:rgba(244,239,228,.22);
  --texte:#f4efe4;
  --doux:#a99d8d;
  --accent:#f28a14;
  --ok:#7fc77a;
  --attente:#e8c25a;
  --titre:"Anton","Impact","Arial Narrow",sans-serif;
  --corps:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --chiffre:"Barlow Condensed","Arial Narrow",sans-serif;
  --max:1240px;
  --rayon:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--corps);font-size:1.0625rem;line-height:1.6;padding-inline:clamp(16px,4vw,40px);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;background-image:url("../images/grain.svg")}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.cadre{max-width:var(--max);margin-inline:auto}
.etiquette{font-family:var(--chiffre);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;font-weight:600;color:var(--accent)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.evitement{position:absolute;left:16px;top:-60px;z-index:200;background:var(--accent);color:var(--fond);padding:10px 16px;border-radius:999px;font-family:var(--chiffre);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.evitement:focus{top:12px}

/* ---------- Nav en verre ---------- */
header{position:sticky;top:12px;z-index:40;margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px;border:1px solid var(--ligne);border-radius:999px;background:rgba(16,13,11,.62);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
header .logo{display:block;flex-shrink:0}
header .logo img{height:34px;width:auto}
nav{display:flex;align-items:center;gap:6px}
nav a{font-family:var(--chiffre);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;color:var(--doux);padding:8px 14px;border-radius:999px;transition:color .15s,background .15s}
nav a:hover,nav a[aria-current="page"]{color:var(--texte);background:rgba(244,239,228,.06)}
.menu-btn{display:none;background:none;border:1px solid var(--ligne);color:var(--texte);padding:8px 14px;border-radius:999px;font-family:var(--chiffre);font-size:.95rem;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}

/* ---------- Écran de chargement (première arrivée de la session) ----------
   html.intro est posé par un petit script dans <head> (jamais si « réduire les animations », jamais deux fois par session).
   Il couvre la page tout de suite (::before), puis js/site.js y pose le logo animé. Sécurité : le script de <head>
   retire html.intro au bout de 4 s quoi qu'il arrive, même si site.js échoue. */
html.intro::before{content:"";position:fixed;inset:0;z-index:998;background:var(--fond)}
html.intro{overflow:hidden}
.intro-ecran{position:fixed;inset:0;z-index:999;display:grid;place-items:center;background:var(--fond);transition:opacity .4s ease;cursor:pointer}
.intro-ecran img{width:min(60vw,420px);height:auto}
.intro-ecran.sortie{opacity:0;pointer-events:none}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--chiffre);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;line-height:1.2;padding:12px 22px;border:1px solid var(--accent);background:var(--accent);color:var(--fond);cursor:pointer;border-radius:999px;transition:transform .15s,box-shadow .2s,background .15s,color .15s,border-color .15s}
.bouton:hover{transform:translateY(-1px);box-shadow:0 8px 28px -8px rgba(242,138,20,.7)}
.bouton.creux{background:transparent;color:var(--texte);border-color:var(--ligne-forte)}
.bouton.creux:hover{border-color:var(--texte);box-shadow:none}
nav a.bouton{padding:9px 18px;color:var(--fond);background:var(--accent)}
nav a.bouton:hover{background:var(--accent);color:var(--fond)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Titres communs ---------- */
h1{font-family:var(--titre);font-weight:400;text-transform:uppercase;line-height:.9;margin:0;letter-spacing:.005em;text-wrap:balance;hyphens:none}
h1 em{font-style:normal;color:var(--accent)}
h2{font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:clamp(2.2rem,5vw,3.8rem);line-height:.95;margin:8px 0 0;text-wrap:balance}
section{padding-block:clamp(64px,9vw,112px)}
.entete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:36px}
.entete p{margin:0;color:var(--doux);max-width:44ch}

/* ---------- Accueil : haut de page ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center;padding-block:clamp(40px,7vw,88px) 0}
.hero .texte{display:grid;gap:22px;min-width:0}
.hero h1{font-size:clamp(3.2rem,8.4vw,7.4rem)}
.hero .sous{font-family:var(--chiffre);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.25;margin:0;text-wrap:balance}
.hero p{margin:0;color:var(--doux);max-width:46ch}

/* Plateau « l'atelier » : le logo officiel FIXE en haut, les trois médaillons des mascottes en dessous
   (triangle, Molten Core au centre en grand). Rien ne recouvre le logo. Les tailles suivent la largeur
   du plateau (unités cqi), pour rester proportionnées sur ordinateur, tablette et téléphone. */
.plateau{position:relative;container-type:inline-size;display:grid;justify-items:center;align-content:center;gap:clamp(18px,5cqi,34px);padding:clamp(22px,6cqi,44px) clamp(14px,4cqi,32px) clamp(20px,5cqi,36px);border-radius:calc(var(--rayon) + 8px);overflow:hidden;background:radial-gradient(120% 90% at 50% 60%,#2a1a10 0%,#130e0b 55%,#0b0907 100%);border:1px solid var(--ligne);isolation:isolate;min-width:0}
.plateau .halo{position:absolute;left:50%;top:50%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(242,138,20,.35),transparent 62%);z-index:0;opacity:.55;pointer-events:none}
.plateau .marque{position:relative;z-index:2;width:min(62%,400px);height:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6));pointer-events:none}

/* Médaillons des mascottes (l'animation est celle du jeu, posée par mascottes/mascotte.js) */
.medaillons{display:flex;justify-content:center;gap:clamp(6px,4cqi,30px);align-items:flex-end;position:relative;z-index:3;max-width:100%}
.medaillon{display:grid;justify-items:center;gap:8px;min-width:0}
.medaillon .rond{display:block;width:clamp(86px,19cqi,124px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#2a2019,#130f0c 70%);border:2px solid var(--accent);box-shadow:0 0 0 6px var(--fond),0 18px 40px -12px rgba(0,0,0,.8);transition:transform .2s;padding:8%}
.medaillon.grand .rond{width:clamp(110px,27cqi,170px)}
@container (max-width:420px){.medaillon .rond{padding:5%;box-shadow:0 0 0 4px var(--fond),0 12px 28px -10px rgba(0,0,0,.8)}.medaillon .nom{letter-spacing:.06em}}
@container (max-width:310px){.medaillon .rond{width:72px}.medaillon.grand .rond{width:94px}.medaillon .nom{font-size:.6rem}}
.mascotte-slot{display:block;width:100%;height:100%}
.mascotte-slot>*{display:block;width:100%;height:100%;object-fit:contain}
.medaillon:hover .rond,.medaillon:focus-visible .rond{transform:translateY(-4px)}
.medaillon:focus-visible{outline:none}
.medaillon:focus-visible .rond{outline:2px solid var(--accent);outline-offset:8px}
.medaillon .nom{font-family:var(--chiffre);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.66rem,2.2cqi,.78rem);color:var(--doux);white-space:nowrap}
.medaillon:hover .nom{color:var(--texte)}

/* Bandeau de chiffres qui défile (pause au survol, arrêté avec « réduire les animations ») */
.ticker{margin-top:clamp(48px,7vw,80px);border-block:1px solid var(--ligne);overflow:hidden;padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .piste{display:flex;gap:48px;width:max-content;animation:defile 36s linear infinite}
.ticker:hover .piste{animation-play-state:paused}
.ticker span{font-family:var(--chiffre);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.3rem;white-space:nowrap;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:48px}
.ticker span::after{content:"";width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.ticker b{color:var(--accent);font-weight:700}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Lobby : vignettes Stake officielles 3:4 ---------- */
.lobby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,28px)}
.lobby.deux-jeux{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.tuile{display:grid;gap:14px;min-width:0;align-content:start}
.vignette{position:relative;aspect-ratio:408/546;border-radius:var(--rayon);overflow:hidden;background:var(--surface);border:1px solid var(--ligne);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette .voile{position:absolute;inset:auto 0 0 0;padding:16px;display:flex;justify-content:center;background:linear-gradient(0deg,rgba(16,13,11,.9),transparent);opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.tuile:hover .vignette,.tuile:focus-within .vignette{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 30px 60px -24px rgba(242,138,20,.45),0 0 0 1px rgba(242,138,20,.4)}
.tuile:hover .voile,.tuile:focus-within .voile{opacity:1;transform:none}
@media (hover:none){.vignette .voile{opacity:1;transform:none}}
.puce,.statut{display:inline-flex;align-items:center;gap:7px;font-family:var(--chiffre);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;padding:5px 10px;border-radius:999px;background:rgba(16,13,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--ligne);width:max-content;max-width:100%}
.puce{position:absolute;top:12px;left:12px}
.puce::before,.statut::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p,var(--doux));flex-shrink:0}
.puce.ok,.statut.ok{--p:var(--ok)} .puce.attente,.statut.attente{--p:var(--attente)} .puce.bientot,.statut.bientot{--p:var(--accent)}
.legende{display:flex;justify-content:space-between;align-items:baseline;gap:12px;min-width:0}
.legende h3{margin:0;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.6rem;line-height:1}
.legende a{font-family:var(--chiffre);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--doux);white-space:nowrap}
.legende a:hover{color:var(--accent)}
.faits{display:flex;gap:6px 18px;margin:0;font-family:var(--chiffre);font-variant-numeric:tabular-nums;color:var(--doux);font-size:.95rem;flex-wrap:wrap}
.faits b{color:var(--texte);font-weight:700}

/* ---------- Bento studio ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.case{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:clamp(20px,3vw,32px);display:grid;align-content:space-between;gap:24px;min-width:0;position:relative;overflow:hidden}
.case h3{margin:0;font-family:var(--titre);font-weight:400;text-transform:uppercase;font-size:1.7rem;line-height:1}
.case p{margin:6px 0 0;color:var(--doux);font-size:1rem}
.case.grande{grid-column:span 4;grid-row:span 2;background:linear-gradient(160deg,#2a1b11,#161210 60%)}
.case.grande h3{font-size:clamp(2rem,4vw,3rem)}
.case.c2{grid-column:span 2}
.case .gros{font-family:var(--chiffre);font-weight:700;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.case.bande,.demo{grid-column:span 6;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:transparent;border:1px dashed rgba(242,138,20,.5);border-radius:var(--rayon);padding:clamp(20px,3vw,32px)}
.case.bande p,.demo p{margin:0;max-width:60ch;color:var(--doux)}
.case.bande strong,.demo strong{color:var(--texte)}
.demo .jeton{font-family:var(--chiffre);font-weight:700;font-size:1.6rem;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Pied de page ---------- */
footer{border-top:1px solid var(--ligne);padding-block:36px 48px;display:flex;flex-wrap:wrap;gap:24px 48px;justify-content:space-between;align-items:center;color:var(--doux);font-size:.92rem}
footer img{height:32px;width:auto}
footer p{margin:0;max-width:60ch}
footer a:hover{color:var(--texte)}
.age{display:inline-grid;place-items:center;width:36px;height:36px;border:2px solid var(--doux);border-radius:50%;font-family:var(--chiffre);font-weight:700;color:var(--texte);margin-right:10px;vertical-align:middle}

/* ---------- Fiches jeux ---------- */
.fil{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none;font-family:var(--chiffre);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--doux)}
.fil li+li::before{content:"/";margin-right:8px;color:var(--ligne-forte)}
.fil a:hover{color:var(--texte)}
.une{position:relative;margin-top:20px;border-radius:calc(var(--rayon) + 8px);overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;border:1px solid var(--ligne)}
.une>img.fond-atelier{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.une::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(16,13,11,.95) 0%,rgba(16,13,11,.78) 48%,rgba(16,13,11,.2) 100%)}
.une .texte{padding:clamp(36px,7vw,80px) clamp(20px,5vw,60px);display:grid;gap:20px;min-width:0}
.une h1{font-size:clamp(2.6rem,6vw,4.6rem)}
.une .logo-titre{width:min(100%,420px);height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.une p{margin:0;color:var(--doux);max-width:48ch;font-size:1.12rem}
.une .scene{display:grid;place-items:center;padding:clamp(24px,4vw,48px)}
.une .vignette-une{width:min(100%,340px);height:auto;aspect-ratio:408/546;object-fit:cover;border-radius:var(--rayon);border:1px solid var(--ligne);box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(242,138,20,.25)}

.fiche{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0 0;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--surface);overflow:hidden}
.fiche div{padding:18px 20px;min-width:0;border-left:1px solid var(--ligne)}
.fiche div:nth-child(4n+1){border-left:0}
.fiche div:nth-child(n+5){border-top:1px solid var(--ligne)}
dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--doux);font-family:var(--chiffre)}
dd{margin:2px 0 0;font-family:var(--chiffre);font-weight:700;font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere}
dd small{display:block;font-size:.85rem;font-weight:500;color:var(--doux);font-family:var(--corps);margin-top:4px;line-height:1.35}

.deux{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,80px);align-items:start}
.deux .intro p{color:var(--doux);margin:18px 0 0}
.points{display:grid;gap:0;margin:0;padding:0;list-style:none}
.points li{display:grid;grid-template-columns:3.2rem 1fr;gap:16px;padding-block:20px;border-top:1px solid var(--ligne);min-width:0}
.points li:last-child{border-bottom:1px solid var(--ligne)}
.points b{font-family:var(--chiffre);font-size:1.5rem;color:var(--accent);font-weight:700;line-height:1.2}
.points h3{margin:0 0 4px;font-size:1.1rem;font-weight:600}
.points p{margin:0;color:var(--doux);font-size:1rem}

.tableau{overflow-x:auto;border:1px solid var(--ligne);border-radius:var(--rayon);background:var(--surface)}
.achats{width:100%;border-collapse:collapse;font-size:1rem}
.achats th,.achats td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--ligne);vertical-align:top}
.achats tr:last-child td{border-bottom:0}
.achats th{font-family:var(--chiffre);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;font-weight:600;color:var(--doux)}
.achats td:first-child{font-family:var(--chiffre);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.achats td.prix{font-family:var(--chiffre);font-weight:700;font-size:1.25rem;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.achats td p{margin:0;color:var(--doux)}

.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.galerie.vignettes{grid-template-columns:repeat(4,minmax(0,1fr))}
.galerie figure{margin:0;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);overflow:hidden;display:grid;grid-template-rows:1fr auto}
.galerie img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover}
.galerie img.contenu{object-fit:contain;padding:16px}
.galerie.vignettes img{aspect-ratio:auto;height:auto;max-height:520px}
.galerie figcaption{padding:10px 14px;font-size:.88rem;color:var(--doux);border-top:1px solid var(--ligne)}

/* ---------- Démo de jeu ---------- */
dialog.jouer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:var(--texte)}
dialog.jouer::backdrop{background:rgba(10,8,6,.92)}
.ecran{position:relative;display:grid;grid-template-rows:auto 1fr;width:100%;height:100%;background:#000}
.bandeau-demo{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:rgba(16,13,11,.92);border-bottom:1px solid var(--ligne);font-family:var(--chiffre);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;font-weight:600;min-width:0}
.bandeau-demo .mode{color:var(--accent);white-space:nowrap}
.bandeau-demo .nom-jeu{color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.bandeau-demo .gauche{display:flex;align-items:center;gap:14px;min-width:0}
.bandeau-demo .droite{display:flex;align-items:center;gap:8px;flex-shrink:0}
.bandeau-demo button,.bandeau-demo a{background:none;border:1px solid var(--ligne-forte);color:var(--texte);font:inherit;text-transform:inherit;letter-spacing:inherit;padding:6px 14px;border-radius:999px;cursor:pointer;white-space:nowrap}
.bandeau-demo button:hover,.bandeau-demo a:hover{border-color:var(--texte)}
.ecran iframe{width:100%;height:100%;border:0;display:block;background:#000}
body.page-demo{padding:0;height:100vh;height:100dvh;overflow:hidden}
body.page-demo::before{display:none}
body.page-demo .ecran{height:100vh;height:100dvh}

/* Page « Demo not found » */
body.bientot{padding:0 16px;min-height:100vh;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(90% 70% at 50% 40%,#2a1a10 0%,var(--fond) 70%)}
.bientot .boite{display:grid;justify-items:center;gap:18px;text-align:center;padding:32px 20px;max-width:560px;border:1px solid var(--ligne);border-radius:calc(var(--rayon) + 8px);background:rgba(27,21,18,.6)}
.bientot .boite img{width:min(60vw,260px);height:auto}
.bientot .boite h1{font-size:clamp(1.8rem,6vw,2.6rem);line-height:1}
.bientot .boite p{margin:0;color:var(--doux)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .plateau{order:-1}
  .lobby{gap:12px}
  .legende{flex-direction:column;gap:4px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case.grande{grid-column:span 2;grid-row:auto}
  .case.c2{grid-column:span 1}
  .case.bande,.demo{grid-column:span 2}
  .deux{grid-template-columns:1fr}
  .fiche{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiche div{border-left:0;border-top:1px solid var(--ligne)}
  .fiche div:nth-child(even){border-left:1px solid var(--ligne)}
  .fiche div:nth-child(-n+2){border-top:0}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .une{grid-template-columns:1fr}
  .une .scene{order:-1;padding:24px 16px 0}
  .une .vignette-une{width:min(100%,300px)}
  .une .texte{padding-top:24px}
  .une::after{background:linear-gradient(180deg,rgba(16,13,11,.6) 0%,rgba(16,13,11,.95) 55%)}
  .bandeau-demo{padding:8px 10px;font-size:.78rem;letter-spacing:.06em}
  .bandeau-demo .nom-jeu,.bandeau-demo .plein{display:none}
}
@media (max-width:640px){
  header{border-radius:18px}
  nav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--surface);border:1px solid var(--ligne);border-radius:18px;padding:8px}
  nav.ouvert{display:flex}
  nav a{padding:12px 14px}
  nav a.bouton{margin-top:6px}
  .menu-btn{display:inline-block}
  .lobby,.lobby.deux-jeux{grid-template-columns:1fr;gap:32px}
  .vignette,.legende,.faits{max-width:340px;margin-inline:auto;width:100%}
  .legende{flex-direction:row}
  .vignette .voile{opacity:1;transform:none}
  .bento{grid-template-columns:1fr}
  .case.grande,.case.c2,.case.bande,.demo{grid-column:span 1}
  .galerie{grid-template-columns:1fr}
  .galerie.vignettes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achats th,.achats td{padding:12px 10px}
}
@media (max-width:420px){
  .fiche{grid-template-columns:1fr 1fr}
  .actions .bouton{flex:1 1 auto}
  dd{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .ticker{-webkit-mask-image:none;mask-image:none}
  .ticker .piste{width:auto;flex-wrap:wrap;justify-content:center;gap:12px 32px}
  .ticker .piste [aria-hidden="true"]{display:none}
  .ticker span{white-space:normal;gap:32px;font-size:1.15rem}
  .tuile:hover .vignette,.tuile:focus-within .vignette{transform:none}
}