/* ==========================================================================
   La Récré — feuille commune du portail
   Extraite de la maquette validée (portail-jeux.html) : tokens, header,
   héros patinoire, grille de jeux, sections, footer.
   + Pages de jeu (.game-*) et composants du socle (assets/core.js : .rc-*)
   ========================================================================== */

:root{
  --bg:#F2F4F8;
  --surface:#FFFFFF;
  --ink:#1D2433;
  --ink-soft:#5B6474;
  --line:#E1E5EC;
  --tile-shadow:0 6px 0 rgba(29,36,51,.12);
  --c-shoot:#3D6CE7;
  --c-mahjong:#1FA97A;
  --c-hockey:#E6483D;
  --c-blocs:#8A4DE8;
  --c-solitaire:#E79A17;
  --c-2048:#EF7748;
  --c-mot:#159FB5;
  --c-anagrammes:#C13B91;
  --c-demineur:#5A7391;
  --c-sudoku:#8A5A2B;
  --c-belote:#1E6E45;
  --c-croisemots:#9A8F1E;
  --c-meles:#802D43;
  --c-berlingot:#E8367A;
  --c-tables:#0E9F6E;      /* coin des enfants */
  --c-calcul:#F2751A;
  --c-heure:#6D5CE0;
  --c-panier:#D2542A;      /* le ballon au soleil couchant */
  --c-puissance4:#2F5BD0;  /* le bleu de la plaque percée */
  --c-traverse:#4E9A34;    /* l'herbe entre deux voies */
  --c-pendu:#C2410C;       /* la craie sur le tableau, en terre cuite */
  --c-serpent:#1E9E5A;     /* le vert d'un écran à cristaux liquides */
  --c-jeandit:#7B3FE4;     /* le violet des boîtiers à quatre touches */
  --c-tour:#2E5EA6;        /* la nuit bleue du jeu, éclaircie pour rester lisible sur fond sombre */
  --c-eclats: #38D7CC;   /* le turquoise du losange : on le reconnaît sur la vignette */
  --c-casse:#E4572E;       /* la brique cuite, chaude sur le fond de nuit */
  --c-soon:#C4CAD6;
  --c-kids:#F26BA0;
  --c-pro:#22354F;
  --ice-1:#EAF3FC;
  --ice-2:#D8E7F7;
  --ice-line:#9DBFE4;
  /* LA LARGEUR DE LA SCÈNE DE JEU, et d'elle seule.

     Tout le reste d'une page — texte, classement, « les autres jeux », compte —
     prend la largeur de `.wrap`, c'est-à-dire les bords de l'en-tête. C'est le
     seul repère visible, et un bloc qui ne s'aligne sur rien passe pour une
     erreur même quand sa largeur est raisonnable.

     La scène, elle, garde son plafond : sa hauteur est bornée à 860 px, et une
     scène de 1420 par 860 ferait un bandeau de cinéma où un plateau de
     solitaire ou un serpent seraient minuscules. Elle se centre dans la page. */
  --colonne-jeu:720px;
  --radius:20px;
  --header-h:61px;          /* mis à jour par assets/portal.js */
  --bar-h:59px;             /* hauteur de .game-bar, idem */
  --board-bg:#E7EAF1;       /* fond des plateaux de jeu inline */
  --board-line:#D5DAE4;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#161B26;
    --surface:#1F2634;
    --ink:#F0F2F7;
    --ink-soft:#9AA3B5;
    --line:#2C3546;
    --tile-shadow:0 6px 0 rgba(0,0,0,.35);
    --c-soon:#3A4356;
    --ice-1:#1B2A40;
    --ice-2:#152238;
    --ice-line:#33517A;
    --board-bg:#111621;
    --board-line:#232B3A;
  }
}
:root[data-theme="dark"]{
  --bg:#161B26;
  --surface:#1F2634;
  --ink:#F0F2F7;
  --ink-soft:#9AA3B5;
  --line:#2C3546;
  --tile-shadow:0 6px 0 rgba(0,0,0,.35);
  --c-soon:#3A4356;
  --ice-1:#1B2A40;
  --ice-2:#152238;
  --ice-line:#33517A;
  --board-bg:#111621;
  --board-line:#232B3A;
}
*{margin:0;padding:0;box-sizing:border-box}
/* l'attribut hidden doit gagner sur nos display:flex / display:grid */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;
  line-height:1.55;
  min-height:100vh;
}
h1,h2,h3,.logo,.tile-name,.btn{font-family:'Fredoka','Outfit',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%}

.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
/* GRAND ÉCRAN : on rend la largeur qu'on lui prenait.

   À 1040 px de contenu sur un écran de 1920, près de la moitié de la page est
   du vide — et c'est le cas de tous les écrans d'ordinateur d'aujourd'hui. On
   élargit donc par paliers, sans jamais aller jusqu'au bord : une page qui
   touche les deux côtés de l'écran se lit mal.

   Attention : cela n'élargit QUE les conteneurs. Les blocs de texte gardent
   leurs propres plafonds (66ch pour un paragraphe, 720px pour le bloc SEO),
   parce qu'une ligne de texte de 1400 px est illisible — l'oeil perd le début
   de la ligne suivante. Élargir la mise en page et élargir le texte sont deux
   décisions différentes, et une seule des deux est bonne. */
@media(min-width:1180px){.wrap{max-width:1240px}}
@media(min-width:1500px){.wrap{max-width:1420px}}
@media(min-width:1180px){:root{--colonne-jeu:940px}}
@media(min-width:1500px){:root{--colonne-jeu:1100px}}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
}
.logo{
  font-weight:700;font-size:1.45rem;letter-spacing:.5px;
  display:flex;align-items:center;gap:10px;
}
.logo-dot{
  width:30px;height:30px;border-radius:9px;
  background:conic-gradient(var(--c-hockey) 0 25%,var(--c-shoot) 0 50%,var(--c-mahjong) 0 75%,var(--c-solitaire) 0);
  transform:rotate(12deg);
  flex:none;
}
.nav-links{display:none;gap:26px;font-weight:500;color:var(--ink-soft)}
.nav-links a:hover{color:var(--ink)}
@media(min-width:720px){.nav-links{display:flex}}

/* ---------- hero : table d'air hockey ---------- */
.hero{padding:22px 0 6px}
.rink{
  position:relative;
  border-radius:28px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(160deg,var(--ice-1),var(--ice-2));
  border:1px solid var(--line);
  overflow:hidden;
  padding:58px 22px 64px;
  min-height:380px;
  box-shadow:inset 0 0 0 10px var(--surface), inset 0 0 0 12px var(--ice-line);
}
@media(min-width:720px){.rink{padding:76px 56px 84px;min-height:430px}}
/* marquages de patinoire */
.rink::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right, transparent calc(50% - 2px), var(--c-hockey) calc(50% - 2px), var(--c-hockey) calc(50% + 2px), transparent calc(50% + 2px));
  opacity:.28;
}
.rink::after{
  content:"";position:absolute;pointer-events:none;
  width:190px;height:190px;border-radius:50%;
  border:3px solid var(--c-shoot);
  left:50%;top:50%;transform:translate(-50%,-50%);
  opacity:.25;
}
.rink-goal{
  position:absolute;pointer-events:none;
  width:110px;height:8px;border-radius:99px;
  background:var(--c-hockey);opacity:.45;
  left:50%;transform:translateX(-50%);
}
.rink-goal.top{top:10px}
.rink-goal.bottom{bottom:10px}

.hero-content{position:relative;z-index:2;max-width:560px}
.hero h1{
  font-size:clamp(2.1rem,6.5vw,3.4rem);
  font-weight:700;line-height:1.08;
  max-width:16ch;
  text-shadow:0 2px 0 rgba(255,255,255,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hero h1{text-shadow:none}
}
:root[data-theme="dark"] .hero h1{text-shadow:none}
.hero p{
  margin-top:14px;color:var(--ink-soft);
  font-size:1.08rem;max-width:42ch;font-weight:500;
}
.hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.btn{
  display:inline-block;
  background:var(--ink);color:var(--bg);
  padding:13px 24px;border-radius:16px;
  font-weight:600;font-size:1rem;
  border:none;cursor:pointer;
  white-space:nowrap;
  line-height:1.3;
}
.btn:focus-visible{outline:3px solid var(--c-shoot);outline-offset:3px}
.btn-play{
  background:var(--c-hockey);color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.18);
}
.btn-play:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.btn-ghost{
  background:transparent;color:var(--ink);
  border:2px solid var(--ink);
}
.btn-sm{padding:9px 16px;font-size:.92rem;border-radius:12px}

/* palet interactif */
.palet{
  position:absolute;z-index:3;
  width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FF7A6E, var(--c-hockey) 58%);
  box-shadow:0 6px 14px rgba(0,0,0,.28), inset 0 -4px 0 rgba(0,0,0,.22);
  cursor:pointer;
  touch-action:none;
  display:flex;align-items:center;justify-content:center;
  user-select:none;-webkit-user-select:none;
}
.palet::after{
  content:"";width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(255,255,255,.55);
}
.palet-hint{
  position:absolute;z-index:2;
  right:18px;bottom:16px;
  font-size:.82rem;font-weight:500;color:var(--ink-soft);
  background:var(--surface);border:1px solid var(--line);
  padding:6px 12px;border-radius:999px;
}
@media(min-width:720px){.palet-hint{right:26px;bottom:22px}}

/* tuiles flottantes décor */
.float-tile{
  position:absolute;z-index:1;
  width:64px;height:64px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.14);
  opacity:.95;
}
.ft-1{background:var(--c-mahjong);top:12%;right:8%;transform:rotate(-10deg)}
.ft-2{background:var(--c-shoot);top:44%;right:16%;transform:rotate(8deg)}
.ft-3{background:var(--c-blocs);bottom:14%;right:6%;transform:rotate(-6deg)}
.ft-4{background:var(--c-solitaire);top:8%;left:56%;transform:rotate(12deg)}
@media(max-width:719px){
  .ft-2{display:none}
  .ft-4{left:auto;right:34%}
  .float-tile{width:52px;height:52px;font-size:1.4rem}
}
@media (prefers-reduced-motion: no-preference){
  .float-tile{animation:bob 5s ease-in-out infinite}
  .ft-2{animation-delay:1.2s}
  .ft-3{animation-delay:2.4s}
  .ft-4{animation-delay:.6s}
  @keyframes bob{
    0%,100%{translate:0 0}
    50%{translate:0 -9px}
  }
}

.hero-stats{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:16px;
}
.hero-stats .pill,.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:.86rem;color:var(--ink-soft);font-weight:500;
}
.pill b{color:var(--ink);font-weight:600}

/* ---------- grille de jeux ---------- */
.section{padding:34px 0 6px}
.section h2{font-size:1.35rem;font-weight:600;margin-bottom:4px}
.section .sub{color:var(--ink-soft);margin-bottom:18px;font-size:.95rem}

.grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,1fr);gap:18px}}
@media(min-width:1180px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1500px){.grid{grid-template-columns:repeat(6,1fr)}}

.tile{
  border-radius:var(--radius);
  padding:18px 16px 16px;
  color:#fff;
  box-shadow:var(--tile-shadow);
  display:flex;flex-direction:column;gap:10px;
  min-height:150px;
  position:relative;overflow:hidden;
  transition:transform .15s ease;
  cursor:pointer;
}
.tile:active{transform:translateY(3px)}
@media(hover:hover){.tile:hover{transform:translateY(-3px)}}
.tile:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.tile .icon{
  font-size:2rem;line-height:1;
  width:52px;height:52px;border-radius:14px;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
}
.tile-name{font-weight:600;font-size:1.15rem}
.tile-tag{
  font-size:.78rem;opacity:.9;font-weight:500;
  background:rgba(0,0,0,.18);
  align-self:flex-start;padding:3px 10px;border-radius:999px;
}
.t-shoot{background:var(--c-shoot)}
.t-mahjong{background:var(--c-mahjong)}
.t-hockey{background:var(--c-hockey)}
.t-blocs{background:var(--c-blocs)}
.t-solitaire{background:var(--c-solitaire)}
.t-2048{background:var(--c-2048)}
.t-mot{background:var(--c-mot)}
.t-anagrammes{background:var(--c-anagrammes)}
.t-demineur{background:var(--c-demineur)}
.t-sudoku{background:var(--c-sudoku)}
.t-belote{background:var(--c-belote)}
.t-croisemots{background:var(--c-croisemots)}
.t-meles{background:var(--c-meles)}
.t-berlingot{background:var(--c-berlingot)}
.t-tables{background:var(--c-tables)}
.t-calcul{background:var(--c-calcul)}
.t-heure{background:var(--c-heure)}
.t-tour{background:var(--c-tour)}
.t-jeandit{background:var(--c-jeandit)}
.t-eclats{background:var(--c-eclats)}
.t-casse{background:var(--c-casse)}
.t-serpent{background:var(--c-serpent)}
.t-pendu{background:var(--c-pendu)}
.t-traverse{background:var(--c-traverse)}
.t-puissance4{background:var(--c-puissance4)}
.t-panier{background:var(--c-panier)}
.t-soon{
  background:var(--c-soon);color:var(--ink-soft);
  box-shadow:none;border:2px dashed var(--line);
  cursor:default;
}
.t-soon .icon{background:rgba(0,0,0,.06)}
.t-soon .tile-tag{background:rgba(0,0,0,.08);color:inherit}
.t-soon:hover,.t-soon:active{transform:none}

.tile::after{
  content:"";position:absolute;right:-24px;bottom:-24px;
  width:96px;height:96px;border-radius:28px;
  background:rgba(255,255,255,.10);
  transform:rotate(18deg);
}
.t-soon::after{display:none}

/* ---------- bandeau défi ---------- */
.defi{
  margin-top:38px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 20px;
  display:flex;flex-direction:column;gap:12px;
}
@media(min-width:720px){
  .defi{flex-direction:row;align-items:center;justify-content:space-between;padding:24px 28px}
}
.defi h3{font-size:1.2rem;font-weight:600}
.defi p{color:var(--ink-soft);font-size:.95rem;max-width:52ch}

/* ---------- coin enfants ---------- */
.kids{
  margin-top:38px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--c-kids),#F79A63);
  color:#fff;
  padding:24px 20px;
}
@media(min-width:720px){.kids{padding:28px}}
.kids h2{font-size:1.35rem;font-weight:600}
.kids p{margin-top:6px;font-size:.95rem;max-width:56ch;opacity:.95}
.kids .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.kids .badge{
  background:rgba(255,255,255,.22);
  padding:6px 14px;border-radius:999px;
  font-size:.85rem;font-weight:500;
}
/* Les vignettes du coin des enfants : cartes claires sur le fond coloré de la
   section, la couleur du jeu passant dans la pastille de l'icône. Des vignettes
   colorées comme celles de la grille principale se battraient avec le dégradé. */
.kids-grid{margin-top:18px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.kids-grid{grid-template-columns:repeat(3,1fr)}}
/* LE COIN DES ENFANTS N'A QUE TROIS JEUX, et trois colonnes élastiques dans un
   conteneur élargi donneraient des tuiles de 452 px à côté d'une grille
   principale à 216 : la page aurait l'air de deux sites cousus ensemble. On
   borne donc la largeur d'une tuile et l'on centre le groupe. */
@media(min-width:1180px){
  .kids-grid{grid-template-columns:repeat(3,minmax(0,300px));justify-content:center}
}
.kid-tile{
  background:rgba(255,255,255,.97);
  color:var(--c-pro);
  box-shadow:0 6px 0 rgba(0,0,0,.16);
}
.kid-tile .icon{background:color-mix(in srgb, var(--c-jeu) 20%, #fff);}
.kid-tile .tile-tag{background:color-mix(in srgb, var(--c-jeu) 16%, #fff);color:var(--c-jeu)}
.kid-tile:hover{transform:translateY(-3px)}

/* ---------- B2B ---------- */
.pro{
  margin-top:38px;
  border-radius:var(--radius);
  background:var(--c-pro);color:#EDF1F7;
  padding:24px 20px;
}
@media(min-width:720px){.pro{padding:30px}}
.pro h2{font-size:1.35rem;font-weight:600}
.pro p{margin-top:8px;font-size:.95rem;max-width:58ch;color:#B9C4D6}
.pro .btn{background:#fff;color:var(--c-pro);margin-top:16px}

/* ---------- footer ---------- */
.site-footer{
  margin-top:48px;padding:26px 0 34px;
  border-top:1px solid var(--line);
  color:var(--ink-soft);font-size:.88rem;
}
.site-footer .foot{
  display:flex;flex-direction:column;gap:10px;
}
@media(min-width:720px){.foot{flex-direction:row;justify-content:space-between;align-items:center}}
.site-footer a{text-decoration:underline;text-underline-offset:3px}
.site-footer .foot-lien{
  background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.foot-lien[hidden]{display:none}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}

@media (prefers-reduced-motion: reduce){
  .tile{transition:none}
}

/* ==========================================================================
   Pages de jeu — /jeux/<slug>/
   ========================================================================== */
.game-page .wrap{padding-left:0;padding-right:0}
@media(min-width:720px){.game-page .wrap{padding-left:18px;padding-right:18px}}

/* barre au-dessus du jeu : titre + plein écran */
.game-bar{
  display:flex;align-items:center;gap:10px;
  min-height:58px;
  padding:8px 14px;
  border-bottom:1px solid var(--line);
}
@media(min-width:720px){.game-bar{padding:14px 0 10px;border-bottom:none}}
.game-bar .g-icon{
  width:34px;height:34px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;color:#fff;
}
.game-bar h1{font-size:1.15rem;font-weight:600;line-height:1.2}
@media(min-width:720px){.game-bar h1{font-size:1.6rem}}
.game-bar .g-tag{color:var(--ink-soft);font-size:.8rem;font-weight:500;display:block}
.game-bar .g-spacer{flex:1}
.game-bar .btn{font-size:.85rem;padding:8px 14px;border-radius:12px}
.game-bar .g-best{font-size:.85rem;color:var(--ink-soft);white-space:nowrap}
.game-bar .g-best b{color:var(--ink)}

/* scène : hauteur = viewport moins header (le jeu est jouable sans scroller) */
.game-stage{
  position:relative;
  height:calc(100vh - var(--header-h) - var(--bar-h));
  height:calc(100dvh - var(--header-h) - var(--bar-h));
  min-height:480px;
  background:var(--board-bg);
  overflow:hidden;
}
@media(min-width:720px){
  .game-stage{
    height:min(calc(100vh - var(--header-h) - 80px), 860px);
    height:min(calc(100dvh - var(--header-h) - 80px), 860px);
    border-radius:var(--radius);
    border:1px solid var(--line);
    max-width:var(--colonne-jeu);
    margin:0 auto;
  }
}
/* LA SCÈNE SUIT L'ÉCRAN, MAIS PAS JUSQU'AU BOUT.

   720 px de large sur un écran de 1920, c'est un timbre-poste au milieu d'une
   page vide. On élargit donc par les mêmes paliers que le reste du site.

   On ne va pas jusqu'à la largeur totale, et c'est délibéré : la hauteur, elle,
   reste plafonnée à 860 px. Une scène de 1900 par 860 donnerait un bandeau de
   cinéma dans lequel un plateau de solitaire ou un serpent seraient minuscules
   — on aurait gagné des pixels et perdu le jeu. À 1100 par 860, le rapport
   reste celui d'un écran ordinaire.

   Tous les jeux du socle écoutent le redimensionnement (Recre.canvas) et
   recalculent leur mise en page : élargir ne casse rien, mais ça se vérifie
   plutôt que ça ne se suppose. */
/* Les paliers de la scène vivent désormais dans `--colonne-jeu`, plus haut :
   elle les suit avec tout le reste de la page. */
/* Écran court en paysage (téléphone tourné) : la hauteur plancher de 480 px
   ferait dépasser la scène de l'écran et obligerait à faire défiler la page
   pour voir le jeu. On rend la scène à la taille réellement disponible. */
@media (orientation:landscape) and (max-height:560px){
  .game-stage{
    min-height:0;
    height:calc(100vh - var(--header-h) - var(--bar-h));
    height:calc(100dvh - var(--header-h) - var(--bar-h));
  }
}

/* conteneur du jeu (iframe intégrée ou jeu maison) */
.stage-content{position:absolute;inset:0}

/* jeu existant intégré tel quel (iframe same-origin) */
.game-stage iframe{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;border:0;
  background:#0d1a26;
}
.game-note{
  color:var(--ink-soft);font-size:.85rem;text-align:center;
  padding:10px 16px 0;
}

/* ---------- bloc SEO ---------- */
.game-seo{padding:26px 18px 0;margin:0 auto}
.game-seo h2{font-size:1.3rem;font-weight:600;margin:26px 0 8px}
.game-seo h2:first-child{margin-top:0}
.game-seo h3{font-size:1.05rem;font-weight:600;margin:18px 0 6px}
/* LA MESURE DU TEXTE NE SUIT PAS LA COLONNE, et c'est volontaire.

   Le conteneur s'élargit pour que le bloc s'aligne sur les bords de la scène ;
   les lignes, elles, restent bornées. Une ligne de 1100 px fait cent trente
   caractères, et l'oeil perd le début de la suivante. Ce qui recolle la page,
   c'est que le texte commence exactement au même bord gauche que le jeu — pas
   qu'il aille jusqu'au bord droit. */
.game-seo p{margin:0 0 10px;color:var(--ink);max-width:74ch}
.game-seo ul,.game-seo ol{margin:0 0 12px 22px}
.game-seo li{margin-bottom:6px}
.game-seo .lead{font-size:1.06rem;color:var(--ink-soft);font-weight:500}
.game-seo details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:12px 16px;margin-bottom:8px;
}
.game-seo summary{font-weight:600;cursor:pointer;font-family:'Fredoka','Outfit',sans-serif;font-size:1rem}
.game-seo details p{margin:8px 0 0}
.game-seo .kbd{
  display:inline-block;padding:1px 7px;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);
  font-size:.85em;font-family:ui-monospace,monospace;
}

/* autres jeux en bas de page */
.game-more{padding:30px 18px 0;margin:0 auto}
.game-more h2{font-size:1.3rem;font-weight:600;margin-bottom:12px}
.game-more .grid{grid-template-columns:repeat(2,1fr)}
@media(min-width:600px){.game-more .grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.game-more .grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1500px){.game-more .grid{grid-template-columns:repeat(5,1fr)}}
.game-more .tile{min-height:120px}

/* ==========================================================================
   Composants du socle (assets/core.js)
   ========================================================================== */
/* voile plein-scène : fin de partie, pause, démarrage */
.rc-overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(22,27,38,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.rc-overlay[hidden]{display:none}
.rc-card{
  width:100%;max-width:340px;
  background:var(--surface);color:var(--ink);
  border-radius:var(--radius);
  padding:22px 20px;
  text-align:center;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
  animation:rc-pop .22s ease-out;
}
@keyframes rc-pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.rc-card{animation:none}}
.rc-card h2{font-family:'Fredoka','Outfit',sans-serif;font-size:1.5rem;font-weight:600;margin-bottom:6px}
.rc-card .rc-sub{color:var(--ink-soft);font-size:.92rem;margin-bottom:12px}
.rc-score{font-family:'Fredoka','Outfit',sans-serif;font-size:2.6rem;font-weight:700;line-height:1;margin:6px 0 2px}
.rc-score-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}
.rc-new{
  display:inline-block;margin-top:8px;padding:5px 12px;border-radius:999px;
  background:var(--c-solitaire);color:#fff;font-weight:600;font-size:.85rem;
}
.rc-stats{display:flex;justify-content:center;gap:16px;margin:14px 0 4px;flex-wrap:wrap}
.rc-stats div{font-size:.8rem;color:var(--ink-soft)}
.rc-stats b{display:block;font-size:1.1rem;color:var(--ink);font-family:'Fredoka','Outfit',sans-serif}
.rc-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.rc-actions .btn{width:100%;text-align:center}
/* le bouton principal prend la couleur du jeu (--c-jeu posé sur la scène) */
.rc-card .btn-play{background:var(--c-jeu, var(--c-hockey))}
.rc-actions .btn-ghost{background:transparent}
.rc-hint{margin-top:12px;color:var(--ink-soft);font-size:.82rem}

/* ==========================================================================
   Bouton de thème (clair / sombre / automatique)
   ========================================================================== */
.nav-right{display:flex;align-items:center;gap:18px}
@media(min-width:720px){.nav-right{gap:26px}}
.theme-btn{
  flex:none;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-soft);
}
.theme-btn:hover{color:var(--ink)}
.theme-btn:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}
.theme-btn .ico{width:20px;height:20px;display:none}
:root[data-theme-mode="auto"] .theme-btn .ico-auto,
:root[data-theme-mode="light"] .theme-btn .ico-light,
:root[data-theme-mode="dark"] .theme-btn .ico-dark{display:block}
/* avant l'exécution du script : on montre l'icône « automatique » */
:root:not([data-theme-mode]) .theme-btn .ico-auto{display:block}

/* ==========================================================================
   Emplacements publicitaires (jamais dans la scène de jeu ni chez les enfants)
   ========================================================================== */
.ad-slot{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  margin:22px auto 0;padding:0 18px;
}
.ad-tag{
  font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.7;font-weight:500;
}
.ad-slot ins,.ad-slot .ad-ph{display:block;width:100%}
.ad-banner ins,.ad-banner .ad-ph{min-height:100px}
.ad-rect ins,.ad-rect .ad-ph{min-height:250px}
.ad-inline ins,.ad-inline .ad-ph{min-height:90px}
@media(min-width:720px){
  .ad-banner ins,.ad-banner .ad-ph{min-height:90px}
}
.ad-empty .ad-ph{
  display:flex;align-items:center;justify-content:center;
  border:2px dashed var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink-soft);
  font-size:.8rem;font-weight:500;
}

/* ==========================================================================
   Plein écran : la scène prend tout l'écran, une barre fine garde la sortie
   (les jeux occupent déjà les quatre coins, on ne pose rien par-dessus)
   ========================================================================== */
.stage-bar{display:none}
body.is-immersive{overflow:hidden}
body.is-immersive .site-header,
body.is-immersive .game-bar,
body.is-immersive .game-note,
body.is-immersive .game-seo,
body.is-immersive .game-more,
body.is-immersive .ad-slot,
body.is-immersive .site-footer{display:none}
body.is-immersive .game-stage{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  width:100%;max-width:none;height:100vh;height:100dvh;min-height:0;
  margin:0;border:0;border-radius:0;
}
body.is-immersive .stage-bar{
  display:flex;align-items:center;gap:10px;
  position:relative;z-index:20;flex:none;
  padding:6px 12px;
  padding-top:calc(6px + env(safe-area-inset-top));
  padding-left:calc(12px + env(safe-area-inset-left));
  padding-right:calc(12px + env(safe-area-inset-right));
  background:var(--c-pro);color:#EDF1F7;
}

.stage-exit{
  flex:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;padding:7px 12px;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:.88rem;
  min-height:38px;
}
.stage-exit:hover{background:rgba(255,255,255,.24)}
.stage-exit:focus-visible{outline:3px solid #fff;outline-offset:2px}
.stage-name{
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.9;
}
/* Paysage sur écran court : la barre de sortie prend ~55 px sur les ~390 que
   laisse le navigateur, soit un septième de l'aire de jeu. On la fait flotter
   au-dessus de la scène, en bas à gauche — le seul coin qu'aucun tableau de bord
   n'occupe. Réservé aux jeux maison : dans un jeu intégré en iframe, un bouton
   flottant viendrait se poser sur ses propres commandes. */
@media (orientation:landscape) and (max-height:560px){
  body.is-immersive.game-berlingot .stage-bar{
    position:absolute;top:auto;bottom:0;left:0;right:auto;
    z-index:30;background:transparent;pointer-events:none;
    padding:0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    padding-left:calc(10px + env(safe-area-inset-left));
  }
  body.is-immersive.game-berlingot .stage-name{display:none}
  body.is-immersive.game-berlingot .stage-exit{
    pointer-events:auto;
    min-height:34px;padding:6px 13px;font-size:.82rem;
    /* fond franc plutôt qu'un flou d'arrière-plan : backdrop-filter rend mal
       sans accélération matérielle et le bouton devient illisible. */
    background:rgba(14,18,28,.74);
    border-color:rgba(255,255,255,.36);
  }
}

/* le jeu occupe tout ce qui reste sous la barre.
   On vise .stage-content et lui seul : les voiles du socle (.rc-overlay) restent
   en surimpression sur toute la scène au lieu de se partager la hauteur. */
body.is-immersive .stage-content{
  position:relative;inset:auto;
  flex:1;min-height:0;width:100%;height:auto;
}

/* ==========================================================================
   Compte : bouton de l'en-tête et page /compte/
   ========================================================================== */
.account-btn{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);
  color:var(--ink-soft);font-weight:500;font-size:.9rem;
  max-width:150px;
}
.account-btn svg{width:19px;height:19px;flex:none}
.account-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-btn:hover{color:var(--ink)}
.account-btn:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}
.account-btn.is-connected{
  background:var(--c-mahjong);border-color:transparent;color:#fff;font-weight:600;
}
@media(max-width:519px){.account-btn span{display:none}.account-btn{padding:0 10px}}

/* Même chose pour le compte : les bords de l'en-tête, et rien d'autre. Les
   champs, eux, ne s'étirent pas — ils vivent dans des cartes mises côte à côte
   (`.compte-cols`), ce qui garde chaque formulaire à une largeur où le regard
   ne fait pas l'aller-retour entre l'étiquette et le champ. */
.compte{padding:26px 18px 0}
.compte h1{font-size:1.6rem;font-weight:600;margin-bottom:8px}
.compte-intro{color:var(--ink-soft);max-width:60ch;margin-bottom:22px}
.compte-intro a{text-decoration:underline;text-underline-offset:3px}
.compte-cols{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:720px){.compte-cols{grid-template-columns:repeat(2,1fr);align-items:start}}

.card-form{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 18px;
  display:flex;flex-direction:column;gap:12px;
}
.card-form h2{font-size:1.15rem;font-weight:600}
.card-form label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:500;color:var(--ink-soft)}
.card-form .opt{font-weight:400;opacity:.8}
.card-form input{
  font:inherit;font-size:1rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;min-height:44px;
}
.card-form input:focus-visible{outline:3px solid var(--c-shoot);outline-offset:1px;border-color:transparent}
.card-form .btn{width:100%;text-align:center;margin-top:2px}
.card-form .btn:disabled{opacity:.6;cursor:default}
.form-aide{font-size:.86rem;color:var(--ink-soft)}
.form-msg{font-size:.88rem;min-height:0}
.form-msg:empty{display:none}
.form-msg.is-err{color:var(--c-hockey);font-weight:500}
.form-msg.is-ok{color:var(--c-mahjong);font-weight:500}
.lien-bouton{
  background:none;border:none;cursor:pointer;
  color:var(--ink-soft);font:inherit;font-size:.86rem;
  text-decoration:underline;text-underline-offset:3px;padding:2px;
}
.lien-bouton:hover{color:var(--ink)}
.danger-form{border-color:color-mix(in srgb, var(--c-hockey) 35%, var(--line))}
.btn-danger{background:var(--c-hockey);color:#fff}

.code-secours{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:2rem;font-weight:700;letter-spacing:.22em;
  background:var(--surface);border:2px dashed var(--c-solitaire);
  border-radius:16px;padding:20px;text-align:center;
  margin:0 0 20px;word-break:break-all;
}
#btn-deconnexion{margin-top:20px}

/* ---------- mes meilleurs scores (page compte) ---------- */
.mes-scores{margin:0 0 26px}
.mes-scores h2{font-size:1.15rem;font-weight:600;margin-bottom:4px}
.scores-etat{color:var(--ink-soft);font-size:.9rem;margin-bottom:14px}
.scores-etat:empty{display:none}
.scores-grille{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:620px){.scores-grille{grid-template-columns:repeat(2,1fr)}}
.score-carte{
  display:block;
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;
  transition:transform .15s ease;
}
@media(hover:hover){.score-carte:hover{transform:translateY(-2px)}}
.score-carte:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}
.score-titre{
  display:flex;align-items:center;gap:9px;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:1.02rem;
  margin-bottom:10px;
}
.score-ico{
  width:32px;height:32px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;color:#fff;
}
.score-stats{display:flex;flex-wrap:wrap;gap:6px 20px}
.score-stats dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:500}
.score-stats dd{font-family:'Fredoka','Outfit',sans-serif;font-size:1.3rem;font-weight:600;line-height:1.2}
.score-stats dd.txt{font-size:.95rem;font-weight:500;color:var(--ink-soft)}
.score-vide{color:var(--ink-soft);font-size:.88rem}

/* ==========================================================================
   Classements
   ========================================================================== */
.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}

/* AUCUNE LARGEUR PROPRE : le classement prend celle de `.wrap`, c'est-à-dire
   exactement les bords de l'en-tête — du logo au bouton de thème.

   C'est le repère que l'oeil utilise. Je l'avais d'abord calé sur la colonne de
   la SCÈNE DE JEU (1100 px), ce qui laissait la page visiblement plus étroite
   que la barre au-dessus d'elle. Un bloc qui ne s'aligne sur rien de visible
   passe pour une erreur, même quand la largeur est raisonnable. */
.classement{padding:26px 18px 0}
.classement h1{font-size:1.6rem;font-weight:600;margin-bottom:8px}
.clm-intro{color:var(--ink-soft);max-width:62ch;margin-bottom:26px}
.clm-intro a{text-decoration:underline;text-underline-offset:3px}
/* VINGT CLASSEMENTS EMPILÉS FONT UNE PAGE À RALLONGE. Dès qu'il y a de la
   place, on les met en colonnes : chacun reste lisible, et l'on voit d'un coup
   d'oeil où l'on figure. `break-inside` évite qu'un tableau soit coupé en deux
   par un saut de colonne — un classement scindé au milieu ne se lit plus. */
.clm-jeu{margin-bottom:28px;break-inside:avoid}
@media(min-width:1180px){
  .clm-liste{column-count:2;column-gap:34px}
}
@media(min-width:1500px){
  .clm-liste{column-count:3;column-gap:34px}
}
.clm-jeu h2{display:flex;align-items:center;gap:10px;font-size:1.2rem;font-weight:600;margin-bottom:10px}
.clm-ico{
  width:34px;height:34px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff;
}

.clm{
  background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:6px 14px 10px;
}
.clm-table{width:100%;border-collapse:collapse;font-size:.94rem}
.clm-table th{
  text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-soft);font-weight:500;padding:9px 6px;border-bottom:1px solid var(--line);
}
.clm-table th:last-child,.clm-table td:last-child{text-align:right}
.clm-table td{padding:9px 6px;border-bottom:1px solid var(--line)}
.clm-table tr:last-child td{border-bottom:none}
.clm-rang{width:2.2em;color:var(--ink-soft);font-weight:600}
.clm-pseudo{font-weight:600}
.clm-detail{color:var(--ink-soft);font-size:.84rem}
.clm-score{font-family:'Fredoka','Outfit',sans-serif;font-weight:600;white-space:nowrap}
.clm-table tr.moi td{background:color-mix(in srgb, var(--c-mahjong) 12%, transparent)}
.clm-toi{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  background:var(--c-mahjong);color:#fff;border-radius:999px;padding:1px 7px;font-weight:600;
}
.clm-vide{color:var(--ink-soft);font-size:.9rem;padding:10px 4px}
.clm-moi{color:var(--ink-soft);font-size:.88rem;padding:9px 4px 2px;border-top:1px solid var(--line)}
@media(max-width:519px){
  .clm-detail{display:none}
  .clm{padding:4px 10px 8px}
}

/* bloc compact sur une page de jeu */
.game-clm{padding:22px 18px 0;margin:0 auto}
.game-clm h2{font-size:1.2rem;font-weight:600;margin-bottom:10px}
.clm-lien{margin-top:10px;font-size:.88rem}
.clm-lien a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.clm-lien a:hover{color:var(--ink)}

/* réglages à bascule dans l'écran de pause (sons…) */
.rc-options{display:flex;flex-direction:column;gap:8px;margin:4px 0 6px}
.rc-option{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:46px;padding:8px 14px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;
  background:var(--bg);color:var(--ink);
  font:inherit;font-size:.95rem;font-weight:500;
}
.rc-option b{font-weight:600;color:var(--ink-soft);font-size:.85rem}
.rc-option[aria-pressed="true"] b{color:var(--c-mahjong)}
.rc-option:focus-visible{outline:3px solid var(--c-shoot);outline-offset:2px}

/* boutons inertes le temps que le joueur relâche sa touche de jeu */
.rc-card .btn:disabled,.rc-option:disabled{opacity:.55;cursor:default}

/* ==========================================================================
   Pages d'information (mentions légales, confidentialité, contact)
   Une colonne sur mobile, sommaire collant à gauche dès 900 px.
   ========================================================================== */
.legal{padding:26px 18px 70px}
.legal-head{max-width:64ch}
.legal-head .eyebrow{
  display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);
}
.legal-head h1{font-size:clamp(1.7rem,6vw,2.5rem);line-height:1.12;font-weight:600}
.legal-head p{color:var(--ink-soft);margin-top:10px}
.legal-maj{margin-top:14px;font-size:.85rem;color:var(--ink-soft)}
.legal-cols{display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px;align-items:start}
@media (min-width:900px){
  .legal-cols{grid-template-columns:236px minmax(0,1fr);gap:44px}
  .legal-toc{position:sticky;top:calc(var(--header-h) + 14px)}
}
.legal-toc{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;
}
.legal-toc h2{font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.legal-toc ol{list-style:none;counter-reset:s}
.legal-toc a{
  display:block;padding:6px 0;font-size:.89rem;color:var(--ink-soft);
  border-bottom:1px solid transparent;
}
.legal-toc a:hover,.legal-toc a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal-art{min-width:0;max-width:72ch}
.legal-art h2{
  scroll-margin-top:calc(var(--header-h) + 16px);
  margin:34px 0 12px;font-size:1.22rem;font-weight:600;line-height:1.25;
}
.legal-art h2:first-child{margin-top:0}
.legal-art h3{margin:22px 0 8px;font-size:1rem;font-weight:600;color:var(--ink)}
.legal-art p,.legal-art li{color:var(--ink-soft)}
.legal-art p{margin-bottom:12px}
.legal-art ul{margin:0 0 14px 0;padding-left:20px}
.legal-art li{margin-bottom:6px}
.legal-art strong{color:var(--ink);font-weight:600}
.legal-art a{text-decoration:underline;text-underline-offset:3px}
.legal-fiche{
  list-style:none;padding:0;margin:0 0 14px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
}
.legal-fiche li{
  display:grid;grid-template-columns:1fr;gap:2px;margin:0;padding:10px 14px;
  border-top:1px solid var(--line);font-size:.92rem;
}
.legal-fiche li:first-child{border-top:0}
.legal-fiche b{color:var(--ink);font-weight:600}
@media (min-width:600px){
  .legal-fiche li{grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:baseline}
}
.legal-note{
  margin:0 0 20px;padding:14px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--c-mahjong);
  font-size:.92rem;
}
.legal-tab{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:.88rem;display:block;overflow-x:auto}
.legal-tab th,.legal-tab td{text-align:left;padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.legal-tab thead th{border-top:0;color:var(--ink);font-weight:600;background:var(--surface)}
.legal-tab td{color:var(--ink-soft)}
.legal-fin{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}

/* Page contact : cartes d'adresses */
.contact-cards{display:grid;grid-template-columns:1fr;gap:14px;margin:0 0 22px}
@media (min-width:700px){.contact-cards{grid-template-columns:1fr 1fr}}
.contact-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--tile-shadow);
}
.contact-card h2{font-size:1.02rem;font-weight:600;margin-bottom:6px}
.contact-card p{color:var(--ink-soft);font-size:.92rem;margin-bottom:10px}
.contact-card .contact-lien{font-size:1.02rem;font-weight:600;text-decoration:underline;text-underline-offset:4px;word-break:break-word}

/* ==========================================================================
   « Installer ce jeu » — encart des pages de jeu.
   Masqué par défaut : c'est le script qui décide s'il a quelque chose à dire.
   ========================================================================== */
.install{
  margin:20px auto 0;padding:16px 18px;
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);
}
.install-ico{flex:none;line-height:0}
.install-ico img{width:52px;height:52px;border-radius:13px;display:block}
.install-txt{flex:1 1 240px;min-width:0}
.install h2{font-size:1.02rem;font-weight:600;margin-bottom:3px}
.install p{color:var(--ink-soft);font-size:.92rem;margin:0}
.install-etapes{
  margin:10px 0 0 18px;padding:0;
  color:var(--ink-soft);font-size:.92rem;line-height:1.5;
}
.install-etapes li{margin-bottom:4px}
.install-etapes b{color:var(--ink);font-weight:600}
.install-btn{flex:none;align-self:center}
@media (max-width:520px){
  .install{padding:14px}
  .install-btn{width:100%;text-align:center}
}