.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(3, 6, 10, 0.68);
  backdrop-filter: blur(6px);
  font-family: monospace;
  color: #e9f4ff;
}

.help-overlay.hidden {
  display: none;
}

.help-panel {
  width: min(1440px, calc(100vw - 48px)); /* 1180px +22% */
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 18px;
  box-sizing: border-box;
}

.help-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 180, 255, 0.28) transparent;
}

.help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(120, 180, 255, 0.24);
}

.help-kicker {
  margin-bottom: 2px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.help-header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.help-close {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 12px;
  cursor: pointer;
  font: 700 30px/1 monospace;
}

/* Refonte complète (grid → flexbox imbriqué) : les deux tentatives précédentes
   (nth-of-type puis grid-template-areas) provoquaient un chevauchement visuel
   entre "Règles de base" (dont la hauteur varie avec le contenu fusionné de
   l'ex-carte "Placement") et la rangée suivante — la piste retenue est que
   les rangées CSS Grid "auto" à l'intérieur d'un conteneur flex rétréci
   (.help-panel > .help-grid, overflow-y:auto) ne recalculaient pas de façon
   fiable dans ce contexte. Solution robuste : un simple empilement flexbox
   (colonne) où chaque bloc garde sa hauteur naturelle de contenu — aucune
   piste de chevauchement possible, c'est le flux de bloc CSS le plus basique.
   Structure DOM (cf. game.php) :
     .help-grid (colonne)
       .help-top-row (ligne)
         .help-col-main (colonne) : Règles de base + 2× .help-row-pair
         .help-card-controls
       .help-card-missions (pleine largeur, sous la ligne du dessus) */
.help-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.help-top-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.help-col-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 2.15 1 0%;
  min-width: 0;
}

.help-row-pair {
  display: flex;
  gap: 12px;
}

.help-row-pair > .help-card {
  flex: 1 1 0%;
  min-width: 0;
}

.help-card {
  min-width: 0;
  padding: 14px;
  box-sizing: border-box;
  border-radius: 14px;
}

.help-card-controls {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Colonne fixe dans .help-top-row, stretch (par défaut) = même hauteur que
     .help-col-main. min-height:0 permet à .control-map (flex enfant) de
     scroller au lieu de déborder si la liste est plus longue que l'espace
     disponible (bug d'origine en 1080p). */
  min-height: 0;
}

.help-card-controls h2 {
  flex: 0 0 auto;
}

.help-card-controls .control-map {
  grid-template-columns: 1fr;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 180, 255, 0.28) transparent;
}

.help-card h2 {
  margin: 0 0 9px;
  font-size: 16px;
}

.help-card p,
.help-card li {
  margin: 0;
  font-size: 13px;
  line-height: 1.38;
}

.help-card ul {
  margin: 0;
  padding-left: 18px;
}

.help-card ul.placement-list {
  margin-top: 10px;
}

.score-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.score-strip div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
}

.score-strip strong {
  font-family: 'BebasNeue', system-ui, sans-serif;
  font-size: 44px;
  line-height: 1;
}

.score-strip span {
  font-size: 12px;
  line-height: 1.2;
}

.rule-line,
.legend-grid div,
.control-map > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.rule-line {
  margin-top: 9px;
  padding: 8px;
  border-radius: 10px;
}

.rule-line span:last-child {
  font-size: 12px;
}

.swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.field { background: #e5c65a; }
.forest { background: radial-gradient(circle at 35% 35%, #3f9340 0 28%, #1f5a2b 29% 100%); }
.grass { background: linear-gradient(135deg, #83b84f 0 65%, #8a6b3e 65% 100%); }
.house { background: linear-gradient(135deg, #c49a68 0 45%, #6f3428 45% 100%); }
.water { background: #5fa8d3; }
.rail { background: #dddddd; }
.black-cell { background: radial-gradient(circle at center, #050505 0 38%, #202020 39% 64%, #000000 65% 100%); }

.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.legend-grid div {
  padding: 8px;
  border-radius: 10px;
}

.legend-grid span:not(.swatch) {
  flex: 1 1 auto;
  font-size: 12px;
}

.legend-grid code {
  font-size: 10px;
}

.control-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

/* Contrôles clavier ("aide", touche H) — CSS aligné à l'identique sur
   .kbd-strip/.kbd-strip-item/kbd de la prez (rubrique "CONTRÔLES CLAVIER",
   css/themes/bleu.css + css/themes/medieval.css §32). Mêmes valeurs littérales
   (game.php n'a pas accès aux variables CSS --bg-card/--border/--text-dim,
   définies uniquement dans le :root de presentation.css/index.php) : couleurs
   recopiées telles quelles pour un rendu strictement identique entre les
   deux pages. Layout (grille 3 colonnes) conservé tel quel — seule
   l'apparence (padding/couleurs des items + touches) est partagée. */
.control-map > div {
  padding: 10px 14px;
  border-radius: 10px;
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 3px 6px;
  border-radius: 5px;
  font: 700 10px/1 monospace;
  text-align: center;
}

.control-map span {
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .control-map,
  .legend-grid,
  .score-strip {
    grid-template-columns: 1fr;
  }

  /* Écran étroit : on repasse tout en simple empilement vertical (une carte
     par ligne, dans l'ordre du DOM) — .help-top-row et .help-row-pair
     deviennent des colonnes au lieu de lignes. */
  .help-top-row,
  .help-row-pair {
    flex-direction: column;
  }

  .help-card-controls {
    flex: 0 0 auto;
    height: auto;
    max-height: 60vh;
  }

  .help-panel {
    overflow: auto;
  }
}

/* Aide condensée : elle doit tenir dans une page, pas devenir un parchemin maudit. */
.help-panel {
  width: min(1366px, calc(100vw - 36px)); /* 1120px +22% */
  max-height: calc(100vh - 36px);
  padding: 14px;
}

.help-header {
  margin-bottom: 10px;
  padding-bottom: 9px;
}

.help-header h1 {
  font-size: clamp(26px, 3.2vw, 42px);
}

.help-grid {
  gap: 9px;
}

.help-card {
  padding: 10px;
}

.help-card h2 {
  margin-bottom: 6px;
  font-size: 14px;
}

.help-card p,
.help-card li {
  font-size: 11px;
  line-height: 1.25;
}

.score-strip {
  gap: 7px;
  margin-top: 8px;
}

.score-strip div,
.rule-line,
.legend-grid div,
.control-map > div {
  padding: 6px;
}

.score-strip strong {
  font-size: 33px;
}

.score-strip span,
.rule-line span:last-child,
.control-map span {
  font-size: 10.5px;
}

.control-map {
  gap: 6px;
}

kbd {
  min-width: 30px;
  padding: 5px 6px;
  font-size: 10px;
}
.bonus-cell { background: radial-gradient(circle at 50% 50%, #fff3b0 0 22%, #ffd15d 23% 48%, #8d5f16 49% 100%); }

/* ── Disposition croisée ZQSD / flèches ───────────────────────────────────── */
.kbd-cross-pair {
  display: flex;
  gap: 6px;
  align-items: flex-end;
}

.kbd-cross {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 2px;
}

/* Fantôme invisible pour réserver la place dans la croix (colonnes 1 et 3, ligne 1) */
.kbd-ph {
  visibility: hidden;
}

/* Séparateur dans control-map (reset padding/bg hérités de > div) */
.control-map > .control-sep {
  padding: 0;
  background: none;
  border-radius: 0;
  margin: 2px 0;
}

/* ─── [data-theme="bleu"] — apparence actuelle par défaut (menu aide, touche H) ─── */
[data-theme="bleu"] .help-overlay { color: #e9f4ff; }
[data-theme="bleu"] .help-panel {
  background:
    linear-gradient(135deg, rgba(22, 31, 45, 0.96), rgba(7, 11, 18, 0.96)),
    radial-gradient(circle at top left, rgba(58, 125, 255, 0.18), transparent 45%);
  border: 1px solid rgba(120, 180, 255, 0.42);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
}
[data-theme="bleu"] .help-header { border-bottom: 1px solid rgba(120, 180, 255, 0.24); }
[data-theme="bleu"] .help-kicker { color: rgba(220, 240, 255, 0.58); }
[data-theme="bleu"] .help-close {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
[data-theme="bleu"] .help-close:hover {
  background: rgba(255, 59, 59, 0.75);
  border-color: rgba(255, 95, 95, 0.95);
}
[data-theme="bleu"] .help-card {
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(120, 180, 255, 0.20);
}
[data-theme="bleu"] .help-card h2 { color: #ffffff; }
[data-theme="bleu"] .help-card p,
[data-theme="bleu"] .help-card li { color: rgba(232, 244, 255, 0.83); }
[data-theme="bleu"] .score-strip div {
  background: rgba(242, 209, 107, 0.10);
  border: 1px solid rgba(242, 209, 107, 0.25);
}
[data-theme="bleu"] .score-strip strong { color: #f2d16b; }
[data-theme="bleu"] .score-strip span { color: rgba(232, 244, 255, 0.78); }
[data-theme="bleu"] .rule-line { background: rgba(255, 255, 255, 0.05); }
[data-theme="bleu"] .rule-line span:last-child { color: rgba(232, 244, 255, 0.76); }
[data-theme="bleu"] .legend-grid div { background: rgba(255, 255, 255, 0.05); }
[data-theme="bleu"] .legend-grid span:not(.swatch) { color: rgba(232, 244, 255, 0.86); }
[data-theme="bleu"] .legend-grid code { color: rgba(232, 244, 255, 0.58); }
/* Contrôles clavier — valeurs strictement identiques à [data-theme="bleu"]
   .kbd-strip-item / .kbd-strip kbd (css/themes/bleu.css §32), recopiées en
   littéral (pas de var(--bg-card) etc. disponible dans game.php). */
[data-theme="bleu"] .control-map > div {
  background: rgba(14,24,44,0.94);
  border: 1px solid rgba(120,180,255,0.30);
  color: rgba(190,220,255,0.72);
}
[data-theme="bleu"] .control-map > .control-sep { border-top: 1px solid rgba(120, 180, 255, 0.20); }
[data-theme="bleu"] kbd {
  background: rgba(14,24,44,0.94);
  border: 1px solid rgba(120,180,255,0.30);
  border-bottom-width: 2px;
  color: #eaf4ff;
}

/* ─── [data-theme="ancien"] — parchemin 9-slice sur .help-panel, même technique
   que #scorePanel/.mode-panel (§32). Le voile plein écran (.help-overlay)
   reste inchangé dans les 2 thèmes (comme .highscore-modal/.mode-screen) —
   seule la "carte" convertit. Les cartes internes (.help-card, .score-strip
   div, .rule-line, .legend-grid div, .control-map > div) passent en fond
   translucide sombre pour rester lisibles sur le parchemin clair. ─── */
[data-theme="ancien"] .help-panel {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #332415;
  font-family: Georgia, "Times New Roman", serif;

  /* 2026-07-18 — CORRECTIF v2 (bug signalé : bords tronqués, image ET texte).
     La v1 (garder display/max-height/overflow de la règle non thémée
     inchangés, .internal-parchment en flex:1 1 auto) évitait le double-
     comptage de bordure, mais .help-panel reste box-sizing:border-box +
     width/max-height fixes prévus pour une bordure fine (1px, thème bleu) —
     passer à 50px (×2=100px) sans agrandir la boîte grignote 100px de
     contenu utile en trop (en plus du padding déjà réduit ci-dessous),
     écrasant .help-grid jusqu'à troncature.
     Fix définitif : box-sizing:content-box UNIQUEMENT ici — `width`/
     `max-height` ci-dessous ne portent plus que sur le contenu (mêmes
     valeurs utiles qu'en thème bleu), la bordure de 50px s'ajoute PAR-DESSUS
     automatiquement. Panneau centré par .help-overlay (flex) : la boîte
     grandit symétriquement, jamais hors écran.

     2026-07-18 — CORRECTIF v3 (demande explicite : la marge négative doit
     avoir un effet visible) : overflow passe à visible ici — le clamp +
     clip du contenu est désormais porté par .internal-parchment lui-même
     (cf. règle suivante), qui peut donc recevoir une marge négative de
     bleed sans être tronquée par SON PROPRE overflow. */
  box-sizing: content-box;
  padding: 0;
  /* 2026-08-01 — CORRECTIF (demande explicite : "aucune marge de sécurité sur
     les 4 côtés, contenu masqué par le cadre en basse résolution") : les
     150px d'origine ne réservaient qu'une marge esthétique de viewport,
     jamais mise à jour depuis l'ajout du cadre décoratif (#footerBanner/etc.,
     cf. CONTEXT.md §39) — ce panneau est un modal plein écran centré comme
     .mode-panel (pre-game), pas un HUD de coin, donc même traitement que là-
     bas plutôt que la convention réduite "52px" des HUD : 100px de marge par
     côté (85px de cadre + 15px de respiration) × 2 côtés = 200px, PLUS les
     100px de bordure 9-slice propre à ce parchemin (box-sizing:content-box,
     s'ajoutent par-dessus width/max-height, jamais inclus dedans) = 300px au
     total, sur la largeur ET la hauteur. */
  width: min(1300px, calc(100vw - 300px));
  max-height: calc(100vh - 300px);
  overflow: visible;
}
[data-theme="ancien"] .help-panel[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
/* 2026-08-03 — demande explicite : typo "Enchanted-Land" sur #helpTitle
   (titre du panneau d'aide, ≥12px, jamais Bebas Neue ici — hérite de Georgia
   via .help-panel juste au-dessus, remplacé par Enchanted-Land seulement sur
   ce titre pour ne pas affecter le reste du panneau (contrôles, légendes,
   chiffres) qui reste hors périmètre). */
[data-theme="ancien"] #helpTitle {
  font-family: 'EnchantedLand', Georgia, "Times New Roman", serif;
  /* 2026-08-03 — demande explicite : cohérence avec les acquis de la prez,
     aucun letter-spacing sur Enchanted-Land — reset du -0.06em hérité de
     .help-header h1 (base.css, pensé pour Bebas Neue très condensée). */
  letter-spacing: normal;
  /* 2026-08-03 (round suivant) — jamais de gras sur Enchanted-Land : reset
     du gras natif du <h1> (font-weight:700 par défaut du navigateur, jamais
     explicitement redéfini jusqu'ici). */
  font-weight: 400;
  /* 2026-08-03 (round suivant) — demande explicite : "trop grand, tronqué,
     sort de l'écran". .help-header h1 (base.css) est calibré pour Bebas
     Neue très condensée : clamp(30px, 4vw, 52px). Avec le size-adjust:180%
     global d'EnchantedLand (css/themes/medieval.css), ce même font-size
     rend visuellement ~1.8× plus grand (jusqu'à ~94px effectifs) — largement
     assez pour déborder du panneau/passer sous le bouton de fermeture selon
     la largeur d'écran. Taille fixe et raisonnable ici, indépendante du
     clamp non pertinent pour cette police. */
  font-size: 28px;
  line-height: 1.2;
}
[data-theme="ancien"] .help-panel > .internal-parchment {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* 2026-07-18 — même bug que .fps-counter/.debug-light-body (css/eda.css) :
     la règle générale `[data-theme="ancien"] .internal-parchment { margin:
     -20px -25px -20px -25px; }` (css/themes/medieval.css) s'appliquait quand
     même faute de redéclaration explicite ici (cascade CSS par PROPRIÉTÉ, pas
     par bloc) — tronqué par cet overflow:hidden fonctionnel (clamp + scroll
     2026-07-18 — CORRECTIF v3 : .help-panel passe en overflow:visible
     ci-dessus, c'est CET élément (.internal-parchment) qui porte maintenant
     le clip (overflow:hidden ici) — sa propre marge négative n'est jamais
     coupée par son propre overflow. Le bleed s'applique donc enfin
     normalement.
     2026-08-01 — CORRECTIF (demande explicite : "aucune marge de sécurité,
     contenu masqué par le cadre") : overflow:hidden remplacé par
     overflow-y:auto — même pattern que .mode-panel > .internal-parchment
     (css/multiplayerUi.css) et #scorePanel/.internal-parchment (css/base.css)
     — un ascenseur réel apparaît désormais si le contenu dépasse l'espace
     borné par le nouveau budget de .help-panel (cf. règle ci-dessus), au lieu
     d'être silencieusement rogné sans le moindre indice visuel. */
  margin: -20px -25px -20px -25px;
}
[data-theme="ancien"] .help-header { border-bottom: 1px solid rgba(74, 54, 35, 0.24); }
[data-theme="ancien"] .help-kicker { color: #4a3623; }
[data-theme="ancien"] .help-close {
  border: none;
  background: #4a3623;
  color: #f0e6d0;
}
[data-theme="ancien"] .help-close:hover { background: #6b2018; }
[data-theme="ancien"] .help-card {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(74, 54, 35, 0.20);
}
[data-theme="ancien"] .help-card h2 { color: #332415; }
[data-theme="ancien"] .help-card p,
[data-theme="ancien"] .help-card li { color: #4a3623; }
[data-theme="ancien"] .score-strip div {
  background: rgba(107, 78, 16, 0.12);
  border: 1px solid rgba(107, 78, 16, 0.30);
}
[data-theme="ancien"] .score-strip strong { color: #6b4e10; }
[data-theme="ancien"] .score-strip span { color: #4a3623; }
[data-theme="ancien"] .rule-line { background: rgba(0, 0, 0, 0.05); }
[data-theme="ancien"] .rule-line span:last-child { color: #4a3623; }
[data-theme="ancien"] .legend-grid div { background: rgba(0, 0, 0, 0.05); }
[data-theme="ancien"] .legend-grid span:not(.swatch) { color: #332415; }
[data-theme="ancien"] .legend-grid code { color: #4a3623; }
/* Contrôles clavier — valeurs strictement identiques à [data-theme="ancien"]
   .kbd-strip-item / .kbd-strip kbd (css/themes/medieval.css §32) : items
   transparents posés sur le parchemin, touches en "cachet de cire". */
[data-theme="ancien"] .control-map > div {
  background: none;
  border: none;
  color: #4a3623;
  font-family: Georgia, "Times New Roman", serif;
}
[data-theme="ancien"] .control-map > .control-sep { border-top: 1px solid rgba(74, 54, 35, 0.20); }
[data-theme="ancien"] kbd {
  background: #4a3623;
  color: #f0e6d0;
  border: none;
  /* 2026-08-03 — demande explicite : héritait du text-shadow clair posé sur
     body pour les textes Enchanted-Land de la prez — sur le fond sombre de la
     touche (#4a3623), ce halo clair rendait le texte illisible. */
  text-shadow: none;
}