/* ===== Mode jeu « plein écran » =====
   Pendant une partie (body.en-jeu), le jeu occupe exactement l'écran : rien à faire défiler pour atteindre un bouton.
   La chaîne de hauteurs : #stage (hauteur de l'écran) > #stageBody > .game-box (colonne) > le plateau, qui prend la place restante.
   Un plateau « .fit » est un conteneur de taille : son enfant .fit-in se dimensionne avec min(100cqw, 100cqh × --ratio).
   Sur ordinateur, les panneaux annexes (définitions, liste de mots) passent à côté du plateau. */

body.en-jeu { padding-bottom: 0 !important; overflow: hidden; overscroll-behavior: none; }
body.en-jeu .site-header, body.en-jeu .footer, body.en-jeu .chat-fab, body.en-jeu .chat-preview, body.en-jeu .idee-fab { display: none !important; }
body.en-jeu main#contenu { padding: 0; width: min(1200px, 100%); }
body.en-jeu #stage {
  display: flex; flex-direction: column; box-sizing: border-box;
  height: 100vh; height: 100dvh;
  padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(10px, env(safe-area-inset-left));
}
body.en-jeu #stage[hidden] { display: none; }

/* La barre du haut : retour, titre, mode d'emploi, idée — une seule ligne. */
body.en-jeu .stage-bar { flex: none; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 8px 0 6px; min-height: 52px; box-sizing: border-box; }
body.en-jeu .stage-bar h1 { flex: 1; min-width: 0; font-size: clamp(1.1rem, 4.2vw, 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.en-jeu .stage-bar .back { padding: 0 14px; min-height: 42px; }
body.en-jeu .stage-aides { margin-left: 0; width: auto; flex: none; flex-wrap: nowrap; gap: 6px; }
body.en-jeu .stage-aides .btn { flex: none; min-height: 42px; padding: 0 12px; }
@media (max-width: 760px) {
  body.en-jeu .stage-bar .back { width: 44px; padding: 0; justify-content: center; }
  body.en-jeu .stage-bar .back::before { margin: 0; }
  body.en-jeu .stage-bar .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.en-jeu .stage-aides .btn { width: 44px; padding: 0; justify-content: center; font-size: 1.1rem; }
}

/* Le corps : une colonne qui remplit la hauteur. */
body.en-jeu #stageBody { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
body.en-jeu #stageBody > .game-box,
body.en-jeu #stageBody > div > .game-box { flex: 1 1 0; min-height: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
body.en-jeu #stageBody > div:has(> .game-box) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
body.en-jeu .game-box > * { flex: none; }

/* Les petites lignes du haut, plus serrées. */
body.en-jeu .seg { flex-wrap: nowrap; gap: 6px; justify-content: center; }
body.en-jeu .seg .tab { padding: 0 12px; min-height: 36px; font-size: .9rem; white-space: nowrap; display: inline-flex; align-items: center; }
body.en-jeu .gm-titre { margin: 0; min-height: 36px; }
body.en-jeu .gm-titre p { font-size: .92rem; }
body.en-jeu .gm-titre .btn.petit { min-height: 36px; padding: 0 12px; font-size: .88rem; }
body.en-jeu .pt-barre { padding: 5px 8px; }
/* Niveaux et bouton 📅 sur la même ligne ; la ligne « Grille du jour · … » disparaît (le niveau est déjà surligné, la date est sur 📅). */
body.en-jeu .game-box:has(> .seg ~ .gm-titre) { position: relative; }
body.en-jeu .game-box:has(> .seg ~ .gm-titre) > .gm-titre { position: absolute; top: 0; right: 0; min-height: 0; z-index: 2; }
body.en-jeu .game-box:has(> .seg ~ .gm-titre) > .gm-titre p { display: none; }
body.en-jeu .game-box:has(> .seg ~ .gm-titre) > .seg:first-child { padding-right: 56px; padding-left: 56px; }
body.en-jeu .gm-titre [data-arch], body.en-jeu .gm-titre [data-mesure] { min-width: 44px; min-height: 36px; justify-content: center; }
@media (max-width: 760px) {
  /* la rangée des niveaux s'arrête avant le bouton 📅 ; si elle est trop longue, elle glisse, avec un fondu au bord */
  body.en-jeu .game-box:has(> .seg ~ .gm-titre) > .seg:first-child { justify-content: flex-start; padding-left: 0; padding-right: 0; margin-right: calc(var(--titre-l, 44px) + 8px); overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
  body.en-jeu .game-box:has(> .seg ~ .gm-titre) > .seg:first-child::-webkit-scrollbar { display: none; }
  body.en-jeu .gm-titre .lbl-jour.auj { display: none; }
  body.en-jeu .gm-titre [data-arch] { padding: 0 10px; }
  body.en-jeu .seg .tab { padding: 0 10px; font-size: .85rem; min-height: 34px; }
}
@media (min-width: 761px) {
  body.en-jeu .game-box:has(> .seg ~ .gm-titre) > .seg:first-child { padding-right: calc(var(--titre-l, 160px) + 10px); padding-left: calc(var(--titre-l, 160px) + 10px); }
}
@media (max-width: 420px) {
  body.en-jeu .seg { gap: 4px; }
  body.en-jeu .seg .tab { padding: 0 8px; font-size: .82rem; }
  body.en-jeu .seg .tab { padding: 0 7px; }
  /* barre du jeu : le menu devient une icône, les ronds rétrécissent */
  body.en-jeu .pt-barre { gap: 4px; }
  body.en-jeu .pt-menu-btn { min-width: 42px; padding: 0 12px !important; font-size: 1.1rem; }
  body.en-jeu .pt-menu-btn .lbl { display: none; }
  body.en-jeu .pt-rond { width: 36px; min-height: 36px; }
}

/* Le plateau qui s'adapte : .fit prend la place qui reste, .fit-in garde ses proportions. */
.fit { flex: 1 1 0; align-self: stretch; min-height: 0; min-width: 0; container-type: size; display: grid; place-items: center; }
.fit > .fit-in { width: min(100cqw, 100cqh * var(--ratio, 1)); max-width: 100%; height: auto; aspect-ratio: var(--ratio, 1); box-sizing: border-box; }
body:not(.en-jeu) .fit { flex: none; container-type: inline-size; display: block; }
body:not(.en-jeu) .fit > .fit-in { width: 100%; }

/* Fiche de fin : un panneau posé en bas, qu'on peut réduire pour revoir le plateau. */
body.en-jeu .pt-fin { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom)); width: min(520px, calc(100vw - 20px)); box-sizing: border-box; max-height: calc(100dvh - 80px); overflow: auto; box-shadow: 0 18px 50px rgba(40, 15, 28, .35); animation: finMonte .35s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes finMonte { from { transform: translate(-50%, 40px); opacity: 0; } }
/* grand écran : la fiche se pose sur le côté droit, le plateau reste visible (elle cachait le bas de la grille) */
@media (min-width: 1100px) {
  body.en-jeu .pt-fin { left: auto; right: 20px; transform: none; width: 380px; animation-name: finVient; }
  body.en-jeu .pt-fin-stats { gap: 6px; }
}
@keyframes finVient { from { transform: translateX(40px); opacity: 0; } }
/* Mot du jour de 1000 à 1099 px : la grille (400 px, au centre) laisse 300 px à droite, la fiche s'y pose (audit ordinateur 3, F9) */
@media (min-width: 1000px) and (max-width: 1099px) {
  body.en-jeu:has(.game-box.mot) .pt-fin { left: auto; right: 10px; transform: none; width: calc(50vw - 212px); padding-inline: 12px; animation-name: finVient; }
  body.en-jeu:has(.game-box.mot) .pt-fin-stats { gap: 4px; }
}
.pt-fin-x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-2, #fdeaf0); color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
body:not(.en-jeu) .pt-fin-x { display: none; }
body.en-jeu .pt-fin-t { padding: 0 40px; }
/* petit écran : la fiche tient sans défiler, même avec le résultat d'un défi ou d'une course */
@media (max-height: 720px) {
  body.en-jeu .pt-fin { padding-top: 12px; padding-bottom: 12px; }
  body.en-jeu .pt-fin-t { font-size: 1.25rem; margin-bottom: 8px; }
  body.en-jeu .pt-fin-stats b { font-size: 1.15rem; }
  body.en-jeu .pt-fin-stats div { padding: 5px 4px; }
  body.en-jeu .pt-fin-r { margin: 8px 0; }
  body.en-jeu .pt-fin .row-actions { margin-top: 8px; }
  body.en-jeu .defi-fin { margin-top: 8px; gap: 6px; }
  body.en-jeu .pt-fin-suiv { margin-top: 8px; padding: 8px 10px; }
  /* avec un défi ou une course (audit téléphone 3, G2) : le verdict prend la place du record, les deux boutons côte à côte */
  body.en-jeu .pt-fin:has(.defi-fin) .pt-fin-r { display: none; }
  body.en-jeu .pt-fin .row-actions { flex-wrap: nowrap; gap: 8px; }
  body.en-jeu .pt-fin .row-actions .btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: .9rem; line-height: 1.15; }
  body.en-jeu .defi-fin .note { margin: 0; font-size: .82rem; }
}
body.en-jeu .pt-fin.reduit { width: auto; padding: 8px 14px; cursor: pointer; border-radius: 999px; }
body.en-jeu .pt-fin.reduit > :not(.pt-fin-t) { display: none; }
body.en-jeu .pt-fin.reduit .pt-fin-t { margin: 0; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { body.en-jeu .pt-fin { animation: none; } }

/* Ordinateur : pas de clavier à l'écran pour les grilles (le vrai clavier sert), tout tient en hauteur. */
@media (hover: hover) and (pointer: fine) {
  body.en-jeu .gm-kb { display: none; }
}

/* ---------- Fléchés et croisés ---------- */
body.en-jeu .game-box.gm { max-width: 1100px; margin-inline: auto; }
body.en-jeu .gm-jeu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
body.en-jeu .gm-jeu > * { flex: none; }
body.en-jeu .gm-bandeau { position: relative; min-height: 50px; padding: 4px; }   /* relative : la bulle « Bien vu ! » reste dans le bandeau, pas sur la grille */
body.en-jeu .gm-bandeau p { font-size: 1.02rem; line-height: 1.25; }
/* La grille : entière si les cases restent lisibles (34 px au moins), sinon pleine largeur et on la fait glisser dans son cadre. */
body.en-jeu .gm-cadre { flex: 1 1 0; min-height: 0; max-height: none; container-type: size; overflow: auto; overscroll-behavior: contain; border-radius: 10px; }
body.en-jeu .gm-grille { margin-inline: auto; }
body.en-jeu .gm-grille.z0 { width: min(100cqw, max(100cqh * var(--cols) / var(--rows, var(--cols)), var(--cols) * 24px)); }
body.en-jeu .gm-cadre { --fh: #000; --fb: #000; --fg: #000; --fd: #000; -webkit-mask-image: linear-gradient(var(--fh), #000 22px, #000 calc(100% - 22px), var(--fb)), linear-gradient(90deg, var(--fg), #000 22px, #000 calc(100% - 22px), var(--fd)); -webkit-mask-composite: source-in; mask-image: linear-gradient(var(--fh), #000 22px, #000 calc(100% - 22px), var(--fb)), linear-gradient(90deg, var(--fg), #000 22px, #000 calc(100% - 22px), var(--fd)); mask-composite: intersect; }
body.en-jeu .gm-cadre.plus-bas { --fb: rgba(0, 0, 0, .25); }
body.en-jeu .gm-cadre.plus-haut { --fh: rgba(0, 0, 0, .25); }
body.en-jeu .gm-cadre.plus-droite { --fd: rgba(0, 0, 0, .25); }
body.en-jeu .gm-cadre.plus-gauche { --fg: rgba(0, 0, 0, .25); }
body.en-jeu .gm-grille.z1 { width: max(100cqw * 1.3, var(--cols) * 44px); }
body.en-jeu .gm-grille.z2 { width: max(100cqw * 1.7, var(--cols) * 56px); }
body.en-jeu .gm-grille.z3 { width: max(100cqw * 2.2, var(--cols) * 70px); }
body.en-jeu .gm-kb { position: static; padding: 2px 0 0; background: none; }
body.en-jeu .gm-kb button { min-height: 42px; }
body.en-jeu .gm-jeu > .gm-listes { display: none; }
/* Petit téléphone (360×640…) : clavier, bandeau et barre plus serrés, et des cases jusqu'à 21 px, pour que la grille
   Classique et la Difficile tiennent entières (avant : les dernières lignes étaient cachées sous le clavier). */
@media (max-height: 720px) and (max-width: 520px) {
  body.en-jeu .gm-kb button, body.en-jeu .game-box.fleches .gm-kb button { min-height: 36px; height: 36px; }
  body.en-jeu .gm-kb, body.en-jeu .game-box.fleches .wd-kb { gap: 4px; }
  body.en-jeu .gm-kb > div { gap: 4px; }
  body.en-jeu .gm-bandeau { min-height: 44px; padding: 2px 4px; }
  body.en-jeu .gm-bandeau p { font-size: .95rem; line-height: 1.18; }
  body.en-jeu .gm-jeu { gap: 4px; }
  /* 19 px : la grille Difficile (11×15) tient aussi entière en 360×640 (audit téléphone 3, G3 : 314 px pour 284) */
  body.en-jeu .gm-grille.z0 { width: min(100cqw, max(100cqh * var(--cols) / var(--rows, var(--cols)), var(--cols) * 19px)); }
}
/* Grand écran : les définitions à côté de la grille (fléchés et croisés). En paysage, la définition
   en cours et le clavier passent aussi sur le côté : la grille prend toute la hauteur. */
@media (min-width: 900px) {
  body.en-jeu .gm-jeu:has(> .gm-listes) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px 16px; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-bandeau { grid-column: 1; grid-row: 1; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-cadre { grid-column: 1; grid-row: 2; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-kb { grid-column: 1; grid-row: 3; }
  body.en-jeu .gm-jeu:has(> .gm-listes) .gm-tout { display: none; }
  body.en-jeu .gm-jeu > .gm-listes { display: grid; grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr; align-content: start; overflow: auto; overscroll-behavior: contain; padding: 4px 8px 8px 4px; font-size: .9rem; }
}
@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  body.en-jeu .gm-jeu:has(> .gm-listes) { grid-template-rows: auto minmax(0, 1fr) auto; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-cadre { grid-column: 1; grid-row: 1 / span 3; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-bandeau { grid-column: 2; grid-row: 1; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-listes { grid-column: 2; grid-row: 2; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-kb { grid-column: 2; grid-row: 3; }
  body.en-jeu .gm-jeu:has(> .gm-listes) > .gm-kb button { min-height: 38px; }
}
body.en-jeu .gm-listes .gm-li.on { outline: 2px solid var(--gm-sel, #ffcf3f); }
.gm-li small { color: var(--ink-soft); font-weight: 700; }
/* Fenêtre « Toutes les définitions » (téléphone) */
.gm-defs-dlg { width: min(560px, calc(100vw - 20px)); max-height: calc(100dvh - 40px); padding: 16px; box-sizing: border-box; }
.gm-defs-dlg .gm-listes { display: grid; grid-template-columns: 1fr; max-height: calc(100dvh - 160px); overflow: auto; }
.gm-defs-dlg .gm-li { display: inline-block; padding: 9px 4px; }   /* 40 px de haut au moins sous le doigt (audit téléphone 3, F6) */
.gm-defs-dlg .gm-listes li { margin: 0; }

/* ---------- Mot du jour ---------- */
body.en-jeu .game-box.mot { max-width: 560px; margin-inline: auto; }
body.en-jeu .wd-zone { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
body.en-jeu .wd-zone > * { flex: none; }
body.en-jeu .wd-fit { flex: 1 1 0; --ratio: .84; }
body.en-jeu .wd-fit > .wd-grid { max-width: 400px; margin: 0; gap: 5px; align-content: stretch; grid-template-rows: repeat(6, 1fr); }
body.en-jeu .wd-fit .wd-row { gap: 5px; }
body.en-jeu .wd-fit .wd-cell { aspect-ratio: auto; font-size: clamp(1.1rem, 6cqh, 2rem); }
body.en-jeu .wd-msg { min-height: 1.4em; }
body.en-jeu .wd-zone .wd-kb { margin: 0; gap: 5px; }
body.en-jeu .wd-zone .wd-kb button { height: 48px; }
@media (max-height: 620px) { body.en-jeu .wd-zone .wd-kb button { height: 42px; } }

/* ---------- Sudoku ---------- */
body.en-jeu .game-box.sudoku { max-width: 1000px; margin-inline: auto; }
/* la place du message (« deux 5 dans la même ligne »…) est gardée : la grille ne saute plus quand il apparaît */
body.en-jeu .sk-msg { position: relative; z-index: 3; min-height: 1.3em; line-height: 1.3; font-size: .95rem; }
body.en-jeu .sk-corps { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
body.en-jeu .sk-corps > .fit { flex: 1 1 0; }
body.en-jeu .sk-grid { aspect-ratio: 1; }
body.en-jeu .sk-grid .cell { font-size: min(1.7rem, 5.6cqmin); }
body.en-jeu .sk-grid .nt { font-size: min(.75rem, 2.2cqmin); }
body.en-jeu .sk-cote { flex: none; display: flex; flex-direction: column; gap: 8px; }
body.en-jeu .sk-pad { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
body.en-jeu .sk-pad button { min-height: 46px; padding: 4px 0 2px; font-size: 1.25rem; }
body.en-jeu .sk-outils .btn { min-height: 44px; }
/* Téléphone tout en hauteur (écran d'accueil, grand iPhone) : la place libre au-dessus de la grille sert à un pavé
   sur deux rangées (5 + 4), aux touches deux fois plus larges ; sinon une seule rangée de 9 pour garder la grille grande. */
@media (max-width: 640px) and (max-aspect-ratio: 20/39) {
  body.en-jeu .sk-pad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  body.en-jeu .sk-pad button { min-height: 44px; display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 4px 0; }
}
/* Grand écran en largeur : le pavé de chiffres à droite de la grille. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  body.en-jeu .sk-corps { flex-direction: row; align-items: stretch; gap: 20px; }
  body.en-jeu .sk-cote { width: 300px; justify-content: center; }
  body.en-jeu .sk-pad { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  body.en-jeu .sk-pad button { min-height: 72px; font-size: 1.7rem; }
  body.en-jeu .sk-outils { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.en-jeu .sk-outils .btn:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body.en-jeu .sk-outils .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: .72rem; line-height: 1.1; padding: 4px 2px !important; white-space: nowrap; overflow: hidden; }
  body.en-jeu .sk-outils .btn .ic { font-size: 1.1rem; line-height: 1; }
}
@media (max-width: 400px) { body.en-jeu .sk-outils .btn { font-size: .66rem; letter-spacing: -.01em; padding-inline: 1px !important; } }

/* ---------- Mots mystères ---------- */
body.en-jeu .game-box.myst { max-width: 1100px; margin-inline: auto; }
body.en-jeu .myst-jeu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
body.en-jeu .myst-fit { flex: 1 1 0; }
body.en-jeu .myst-grid { padding: 4px; gap: 1px; border-radius: 12px; }
body.en-jeu .myst-grid .mm-c { font-size: calc(100cqmin / var(--n) * .52); border-radius: 6px; }
body.en-jeu .myst-cote { flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
body.en-jeu .myst-mots { columns: auto; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-height: 19dvh; overflow-y: auto; overscroll-behavior: contain; font-size: .8rem; }
body.en-jeu .myst-mots li { padding: 2px 9px; font-size: .8rem; }
body.en-jeu .myst-form { padding: 8px 10px; gap: 4px; }
body.en-jeu .myst-form label { font-size: .85rem; }
body.en-jeu .myst-ligne input { padding: 8px 10px; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  body.en-jeu .myst-jeu { flex-direction: row; gap: 20px; }
  body.en-jeu .myst-cote { width: 320px; flex: none; }
  body.en-jeu .myst-mots { max-height: none; flex: 1 1 0; min-height: 0; align-content: flex-start; justify-content: flex-start; font-size: .9rem; }
  body.en-jeu .myst-mots li { font-size: .9rem; padding: 3px 11px; }
}
body.en-jeu .myst-jeu { align-items: stretch; }
body.en-jeu .myst-ligne input { width: 0; }
body.en-jeu .myst-ligne .btn { flex: none; padding-inline: 16px; }
@media (max-width: 760px) {
  body.en-jeu .myst-mots { max-height: 15dvh; }
  body.en-jeu .myst-form { padding: 6px 8px; border-radius: 14px; }
  body.en-jeu .myst-form:not(.avec-indice) label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.en-jeu .myst-ligne input { padding: 6px 10px; letter-spacing: .06em; }
  body.en-jeu .myst-ligne .btn { min-height: 42px; padding-block: 0; }
}
body.en-jeu .myst-ligne input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* ---------- Alphamo ---------- */
body.en-jeu .game-box.alpha { max-width: 1000px; margin-inline: auto; }
body.en-jeu .al-jeu { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
body.en-jeu .al-gauche { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
body.en-jeu .al-gauche > * { flex: none; }
body.en-jeu .al-saisie { min-height: 1.6em; font-size: 1.6rem; line-height: 1.5; }
body.en-jeu .al-fit { flex: 1 1 0; }
body.en-jeu .al-fleur { max-width: 340px; }
body.en-jeu .al-fleur .al-l { width: 31%; height: 31%; margin: -15.5% 0 0 -15.5%; font-size: calc(min(100cqw, 100cqh, 340px) * .085); transform: rotate(var(--a)) translateY(-107%) rotate(calc(-1 * var(--a))); }
body.en-jeu .al-fleur .al-l.centre { transform: none; }
body.en-jeu .al-actions { margin: 0; }
body.en-jeu .al-actions .btn { min-height: 46px; }
/* Téléphone : la liste des mots a une hauteur FIXE et défile (avant, elle grandissait à chaque mot : la fleur rétrécissait
   et « Valider » remontait sous le doigt). */
body.en-jeu .al-droite { flex: none; display: flex; flex-direction: column; gap: 6px; height: clamp(76px, 14dvh, 124px); overflow-y: auto; overscroll-behavior: contain; }
body.en-jeu .al-liste summary { min-height: 36px; display: flex; align-items: center; position: sticky; top: 0; background: var(--bg, #fff5f7); z-index: 1; }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  body.en-jeu .al-jeu { flex-direction: row; gap: 24px; }
  body.en-jeu .al-droite { width: 320px; height: auto; max-height: none; align-self: stretch; }
}
body.en-jeu .al-fleur .al-l:not(.centre) { background: color-mix(in srgb, var(--pink) 24%, var(--card)); }
body.en-jeu .al-actions { flex-wrap: nowrap; gap: 8px; }
body.en-jeu .al-actions .btn { flex: 1 1 0 !important; flex-basis: 0 !important; padding-inline: 8px; white-space: nowrap; }
body.en-jeu .al-actions .btn[data-a="mel"] { flex: 0 0 56px !important; }

/* ---------- Puzzle ---------- */
body.en-jeu .game-box.pz { max-width: 1400px; margin-inline: auto; }
body.en-jeu .pz-zone { flex: 1 1 0; min-height: 0; display: grid; place-items: center; overflow: hidden; }
body.en-jeu .pz-outils { flex-wrap: nowrap; gap: 6px; margin: 0; justify-content: center; }
body.en-jeu .pz-outils .btn { flex: 1 1 0 !important; flex-basis: 0 !important; max-width: 220px; min-height: 44px; padding: 4px 8px; font-size: .85rem; white-space: nowrap; box-shadow: none; }
@media (max-width: 420px) { body.en-jeu .pz-outils .btn { font-size: .76rem; padding: 4px 4px; } }

/* ---------- 7 erreurs : les deux tableaux l'un sous l'autre ou côte à côte, selon la forme de la place disponible ---------- */
body.en-jeu .game-box.err { max-width: 1500px; margin-inline: auto; }
body.en-jeu .err-duo { flex: 1 1 0; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
body.en-jeu .err-duo canvas { flex: none; width: min(100cqw, (100cqh - 8px) / 2 * 4 / 3); height: auto; aspect-ratio: 4 / 3; }
@media (min-aspect-ratio: 1 / 1) { body.en-jeu .err-duo { flex-direction: row; gap: 12px; } body.en-jeu .err-duo canvas { width: min((100cqw - 12px) / 2, 100cqh * 4 / 3); } }
@media (max-aspect-ratio: 1 / 1) { body.en-jeu .err-duo { flex-direction: column; } }

/* ---------- Solitaire et FreeCell ---------- */
body.en-jeu .game-box.cj { max-width: 1000px; margin-inline: auto; }
body.en-jeu .cj-table { flex: 1 1 0; min-height: 0; overflow: hidden; }
body.en-jeu .cj-bas { margin-top: 12px; min-height: 0; }
body.en-jeu .cj-outils { flex-wrap: nowrap; justify-content: center; gap: 8px; margin: 0; }
body.en-jeu .cj-outils .btn { flex: 0 1 220px; min-width: 0; min-height: 44px; padding: 4px 12px; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* téléphone : les deux boutons se partagent la largeur (avant, « Annuler » sortait de l'écran à gauche en 360 px) */
@media (max-width: 430px) { body.en-jeu .cj-outils { padding: 0 8px; } body.en-jeu .cj-outils .btn { flex: 1 1 0 !important; flex-basis: 0 !important; padding: 4px 8px; } body.en-jeu .cj-outils .btn small { display: none; } }

/* ---------- Anciens jeux : fléchés « Nous deux », devine la page ---------- */
body.en-jeu .game-box.fleches > div:has(> .fl-fit), body.en-jeu #fl-board:has(> .fl-fit) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
body.en-jeu .game-box.fleches > div:has(> .fl-fit) > *, body.en-jeu #fl-board > * { flex: none; }
body.en-jeu .fl-def { min-height: 0; padding: 6px 10px; }
body.en-jeu .fl-fit { flex: 1 1 0 !important; }
body.en-jeu .fl-grid { padding: 4px; }
body.en-jeu .fl-grid .fl-c { font-size: calc(100cqmin / var(--cols) * .5); }
body.en-jeu .game-box.fleches .wd-kb { margin: 0; gap: 4px; }
body.en-jeu .game-box.fleches .wd-kb button { height: 42px; }
body.en-jeu .game-box.fleches .row-actions { margin: 0; flex-wrap: nowrap; gap: 6px; justify-content: center; }
body.en-jeu .game-box.fleches .row-actions .btn { padding: 6px 10px; font-size: .85rem; box-shadow: none; white-space: nowrap; min-height: 42px; }
/* fiche de fin : « Essayer en Classique » passe sur deux lignes plutôt que d'être coupé (contre-vérification finale) */
body.en-jeu .game-box .pt-fin .row-actions .btn { white-space: normal; line-height: 1.15; }
/* niveaux qui ne tiennent pas : grilles-mots.js ajoute .serre puis .tres-serre */
body.en-jeu .seg.serre { gap: 2px; }
body.en-jeu .seg.serre .tab { padding: 0 5px; font-size: .76rem; }
body.en-jeu .seg.serre .tab-nous { padding: 0 6px; font-size: .9rem; }
body.en-jeu .seg.tres-serre .tab { padding: 0 3px; font-size: .7rem; letter-spacing: -.02em; }
body.en-jeu .fl-lists { display: none; }
@media (hover: hover) and (pointer: fine) { body.en-jeu .game-box.fleches .wd-kb { display: none; } }
body.en-jeu .game-box.fleches .seg + .seg { margin-top: -2px; }
body.en-jeu .game-box.page .pg-text { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; }
body.en-jeu .fl-grid.fit-in { grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
body.en-jeu .fl-grid .fl-c { aspect-ratio: auto; min-height: 0; overflow: hidden; line-height: 1; }
body.en-jeu .fl-grid .fl-k { font-size: calc(100cqmin / var(--cols) * .3); }

/* Les petits messages (toasts) descendent du haut pendant une partie : en bas, ils cachaient le clavier, la fiche de fin ou le champ du mot mystère. */
body.en-jeu .toast { bottom: auto !important; top: calc(56px + env(safe-area-inset-top)); transform: translate(-50%, calc(-100% - 80px)); pointer-events: none; padding: 9px 16px; font-size: .95rem; }
body.en-jeu .toast.show { transform: translate(-50%, 0); }
/* grand écran : le milieu de la barre du titre est libre, le message s'y pose et ne cache plus les jetons ni les niveaux */
@media (min-width: 1180px) { body.en-jeu .toast { top: calc(10px + env(safe-area-inset-top)); max-width: 480px; } }
@media (min-width: 1000px) and (max-width: 1179px) { body.en-jeu .toast { top: calc(8px + env(safe-area-inset-top)); left: calc(50% + 30px); max-width: 380px; font-size: .88rem; line-height: 1.2; } }

/* Alphamo : le mot refusé reste, secoué, avec la raison dessous ; la fleur bien dessinée. */
.al-zone { display: grid; gap: 0; }
.al-msg { margin: 0; min-height: 1.35em; font-weight: 800; font-size: .95rem; line-height: 1.35; text-align: center; color: var(--pink-deep); }
.al-msg.oui, .al-saisie.oui span { color: #2e8a4e; }
.al-saisie.non { animation: gmTremble .42s ease; }
.al-bonus { margin: 6px 0 0; font-size: .88rem; color: var(--ink-soft); font-style: italic; }
.al-bonus span { margin-right: 6px; }
body.en-jeu .al-gauche { justify-content: center; }
body.en-jeu .al-fit { max-height: 360px; }
body.en-jeu .al-fleur .al-l:not(.centre) { background: color-mix(in srgb, var(--pink) 42%, var(--card)); }
body.en-jeu .al-fleur .al-l:hover { filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .al-saisie.non { animation: none; } }
/* titre de grille sur une seule ligne (avec « … ») pour que les boutons 🪄 / 📅 restent à côté */
body.en-jeu .gm-titre { flex-wrap: nowrap; }
body.en-jeu .gm-titre p { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Téléphone : les petits boutons du jeu (niveaux, 💡, ☰, − / +, 📅, ❔) gardent leur taille à l'écran mais se touchent
   sur au moins 42 px : une zone invisible déborde de quelques pixels tout autour (audit téléphone, cibles trop petites). */
@media (pointer: coarse) {
  body.en-jeu #stage :is(.btn, .tab, .pt-rond, .pt-jetons, .pt-menu-btn, .defi-bandeau > button, .course-bandeau > button) { position: relative; }
  body.en-jeu #stage :is(.btn, .tab, .pt-rond, .pt-jetons, .pt-menu-btn, .defi-bandeau > button, .course-bandeau > button)::after { content: ""; position: absolute; inset: -6px -5px; border-radius: inherit; }
  /* la rangée des niveaux glisse de côté : on lui laisse la place de la zone invisible en haut et en bas */
  body.en-jeu .game-box > .seg:first-child { padding-block: 6px 8px; margin-block: -6px -8px; }
  body.en-jeu #stage .game-box > .seg:first-child .tab::after { inset: -6px -5px -10px; }   /* la barre du haut prend le bord supérieur : on déborde vers le bas */
}

/* Téléphone : « Nous deux » devient 🩷 et 🪄 perd son libellé, pour que les quatre onglets de niveau se voient
   en entier de 360 à 520 px (audit téléphone 3, F12 : « Nous deux » ou « Difficile » étaient cachés sous 🪄). */
@media (max-width: 520px) {
  body.en-jeu .seg .tab-nous .lbl-nous { display: none; }
  body.en-jeu .seg .tab-nous .lbl-long { display: inline; }
  body.en-jeu .seg .tab-nous { padding: 0 10px; font-size: 1rem; }
  body.en-jeu .gm-titre .lbl-mesure { display: none; }
}
@media (max-width: 380px) {
  body.en-jeu .seg { gap: 3px; }
  body.en-jeu .seg .tab { padding: 0 5px; }
  body.en-jeu .seg .tab-nous { padding: 0 8px; }
}