/* css/eda.css — CSS du panneau EDA (Éditeur de Direction Artistique) + HUD FPS.
   Extrait de debugLightUi.js le 2026-07-11 (ex-installDebugLightCss(), ~1150 lignes
   injectées via un template literal JS ; fichier lui-même renommé edaPanelHost.js
   la même date) — pur découpage, aucune règle modifiée.
   Chargé via @import dans css/style.css. cf. CONTEXT.md §13/§20/§21. */

.debug-light-panel {
  position: fixed;
  bottom: 4px;   /* 2026-08-01 — demande explicite : rapprocher du bord bas (max 4px) */
  left: 14px;
  right: 14px;
  z-index: 3000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
  color: #f4ead6;
  font: 12px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* 2026-08-01 — demande explicite : écarter du cadre décoratif ingame en
   thème médiéval (cf. CONTEXT.md §39) — .debug-light-panel (les 9 boutons
   bas-droite + FPS/EDA) longe les 3 bords bas/gauche/droite, donc les 3
   décalés. Thème bleu non concerné (pas de cadre), règle de base inchangée.
   ERRATUM (même jour) : +85px jugé trop → ramené à +65px. Ce même delta de
   65px a été répercuté sur les réserves de hauteur de .fps-counter et
   .debug-light-body (thème ancien, plus bas dans ce fichier) : ces 2
   panneaux se déploient VERS LE HAUT depuis ce bandeau, donc remonter le
   bandeau de 65px réduit d'autant l'espace disponible au-dessus avant de
   sortir de l'écran — sans ce correctif, EDA et le HUD FPS débordaient par
   le haut (bug signalé).
   ERRATUM 2 (même jour) : marge cadre 65px → 52px. bottom = 4+52 = 56px ;
   left/right = 14+52 = 66px. Répercuté également sur .fps-hud-fullscreen et
   .debug-light-body plus bas. */
[data-theme="ancien"] .debug-light-panel {
  bottom: 56px;
  left: 66px;
  right: 66px;
}

/* 2026-07-31 — état replié par défaut : seul .debug-light-left-col est visible
   (.debug-light-body est display:none), donc `justify-content:space-between` ci-dessus
   n'a plus qu'un seul enfant à répartir et le colle mécaniquement à flex-start (gauche).
   CORRECTIF (même jour) : une 1ère version poussait TOUT .debug-light-left-col à droite
   via `justify-content:flex-end` sur le panel — ça déplaçait aussi #fps-counter (HUD FPS,
   touche F), qui vit dans ce même conteneur et doit lui rester aligné à gauche. Au lieu de
   déplacer la boîte entière, .debug-light-left-col est élargi à 100% (uniquement replié :
   aucun effet en état déployé, où il garde sa taille shrink-to-fit d'origine) pour offrir
   de l'espace interne, et seule .debug-light-btn-rows (les boutons) se pousse à droite via
   align-self ci-dessous — #fps-counter garde l'alignement flex-start par défaut du parent. */
.debug-light-panel.collapsed .debug-light-left-col {
  width: 100%;
}

.debug-light-btn-rows {
  align-self: flex-end;
}

.debug-light-left-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}

.fps-counter {
  pointer-events: auto;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 12px;
  padding: 14px 16px;
  width: 432px; /* +20% (2026-07-04) — place pour le % de triangles par catégorie */
  max-width: calc(100vw - 28px);
  box-sizing: border-box;
  /* Limite la hauteur totale à l'écran disponible, avec scroll interne.
     Réserve : 34px (boutons) + 6px (gap) + 14px (bas) + 14px (haut) = 68px */
  max-height: calc(100vh - 72px);
  /* 2026-07-31, demande explicite : le badge FPS REPLIÉ (résumé FPS/CPU/GPU,
     _buildHud() avec _fpsHudExpanded=false) ne doit plus jamais s'afficher —
     avant ce fix il restait visible en permanence, seul le panneau détaillé
     (touche F) était optionnel. `display: none` par défaut ; ré-autorisé
     UNIQUEMENT par .fps-hud-fullscreen ci-dessous (posée par _syncFpsFullscreen()
     dans hud_fps.js quand _fpsHudExpanded=true, donc uniquement via la touche F
     ou le bouton du bandeau). Rend caduques (mais inoffensives, laissées telles
     quelles) les anciennes règles ciblant spécifiquement le badge replié
     (grid-only-mode, media max-height — cf. plus bas). */
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.debug-light-panel.fps-hud-fullscreen .fps-counter {
  display: flex;
}

/* Zone scrollable : tout ce qui est sous le header FPS + indices */
.fps-hud-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  /* Scrollbar discrète */
  scrollbar-width: thin;
  scrollbar-color: rgba(120,180,255,0.35) transparent;
}
.fps-hud-body::-webkit-scrollbar { width: 4px; }
.fps-hud-body::-webkit-scrollbar-thumb { background: rgba(120,180,255,0.35); border-radius: 2px; }
.fps-hud-body::-webkit-scrollbar-track { background: transparent; }

.fps-hud-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 2px;
}

/* Modèle bouton unifié HUD LUT + HUD FPS : même CSS que .new-game-button (HUD score) */
.fps-hud-copy {
  background: rgba(25, 56, 82, 0.78);
  border: 1px solid rgba(145, 205, 255, 0.42);
  border-radius: 4px;
  color: rgba(230, 246, 255, 0.96);
  font-family: monospace;
  font-weight: 900;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  padding: 2px 5px;
  flex-shrink: 0;
  margin-left: auto;
}

.fps-hud-copy:hover {
  background: rgba(38, 86, 124, 0.9);
  color: #ffffff;
}

/* Croix de fermeture HUD FPS (2026-07-17, demande explicite) — même rangée que le
   bouton copier (juste après lui dans le markup, cf. hud_fps.js::_buildHud), poussée
   au bord droit du header par le margin-left:auto déjà présent sur .fps-hud-copy.
   N'apparaît que HUD déployé (rendue conditionnellement côté JS). Couleurs par thème
   plus bas, avec .debug-light-close (même traitement visuel, panneau EDA). */
.fps-hud-close {
  margin-left: 6px;
  border-radius: 50%;
  cursor: pointer;
  font-family: monospace;
  font-weight: 900;
  line-height: 1;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.fps-hud-fps {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-family: 'BebasNeue', system-ui, sans-serif;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.fps-hud-fps > span:first-child {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.fps-adj {
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.04em;
}
/* Palette FPS (adjectif + %CPU/%GPU) — variables thémées (2026-07-17). Bleu inchangé
   (teintes claires pensées pour fond sombre) ; ancien assombri/saturé pour rester
   lisible sur le parchemin clair, en particulier le vert qui devenait pâle/lavé.
   Consommées ici (classes .fps-adj-*) ET en style inline par hud_fps.js (gpuColor/
   cpuColor/ratio ×DC), var() hérite via [data-theme] posé sur <html>. */
html[data-theme="bleu"] {
  --fps-c-red: #f87171;
  --fps-c-orange: #fb923c;
  --fps-c-amber: #fbbf24;
  --fps-c-yellow: #fde047;
  --fps-c-lightgreen: #86efac;
  --fps-c-green: #4ade80;
  /* 2026-07-18 — texte "muet" (indices secondaires : ms GPU/CPU, en-têtes de
     colonnes triables inactifs, badge ×N ratio faible) : bleu clair pensé pour
     fond sombre. Utilisé via inline style dans hud_fps.js (msHint/col-header/
     ratio bas) — cf. ancien ci-dessous pour la déclinaison lisible parchemin. */
  --fps-c-muted: rgba(180,215,255,0.55);
}
html[data-theme="ancien"] {
  --fps-c-red: #8b1a1a;
  --fps-c-orange: #9a4a12;
  --fps-c-amber: #8a6a10;
  --fps-c-yellow: #6e5c0c;
  --fps-c-lightgreen: #2f6b2f;
  --fps-c-green: #1f5c1f;
  /* 2026-07-18 — retour utilisateur : le bleu clair --fps-c-muted (pensé pour
     fond sombre) restait illisible sur le parchemin clair, y compris après
     assombrissement de .fps-hud-cat-*. Ces 3 usages passaient par du style
     inline (pas de classe CSS ciblable), d'où l'oubli lors du 1er passage de
     thématisation. Brun assourdi équivalent, même rôle "texte secondaire". */
  --fps-c-muted: rgba(74,54,35,0.55);
}

.fps-adj-red        { color: var(--fps-c-red); }
.fps-adj-orange     { color: var(--fps-c-orange); }
.fps-adj-amber      { color: var(--fps-c-amber); }
.fps-adj-yellow     { color: var(--fps-c-yellow); }
.fps-adj-lightgreen { color: var(--fps-c-lightgreen); }
.fps-adj-green      { color: var(--fps-c-green); }

.fps-hud-sep {
  margin: 6px 0;
}

/* Lignes clé/valeur (Draw calls, Triangles…) — mêmes couleurs que score-title/valeurs */
.fps-hud-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  line-height: 1.55;
}

.fps-hud-row strong {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}

/* Lignes catégories (icône + label + stats colonnes) */
.fps-hud-row-cat {
  display: grid;
  /* obj réduite, ☂ élargie d'autant (2026-07-04) — la colonne ombres tronquait les
     valeurs à 3 chiffres (ex. ☂210) ; dernière colonne élargie pour le % de triangles */
  grid-template-columns: 1fr 2ch 11ch 4.7ch 15ch;
  gap: 3px;
  align-items: baseline;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
  border-radius: 4px;
  padding: 1px 2px;
}

.fps-hud-row-cat--heavy {
  border-left: 3px solid rgba(255,80,80,0.80);
  padding-left: 5px;
  border-radius: 4px;
}

.fps-hud-cat-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fps-hud-cat-icon {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.fps-hud-cat-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fps-hud-cat-dc {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fps-hud-cat-tri {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.fps-hud-cat-tri-pct {
  font-size: 9px;
  font-weight: 600;
  margin-left: 3px;
}

.fps-hud-cat-shadow {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Rangée GPU / CPU — aussi grosse que le FPS, sous le header */
.fps-hud-eff-row {
  display: flex;
  gap: 16px;
  margin-top: 6px;
  margin-bottom: 2px;
  align-items: baseline;
}

.fps-hud-eff-item {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.fps-hud-eff-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.fps-hud-eff-value {
  font-size: 26px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  font-family: 'BebasNeue', system-ui, sans-serif;
}

.fps-hud-eff-pct {
  font-size: 12px;
  font-weight: 700;
}

/* En-têtes de groupe-catégorie — sous-titre, même CSS que .stats-title (HUD score) */
.fps-hud-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 5px;
  margin-bottom: 1px;
  padding-bottom: 1px;
}

/* En-têtes de colonnes triables */
.fps-hud-col-header {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: right;
  padding: 2px 0;
}

.fps-hud-col-header:hover {
  color: rgba(255,230,150,0.95) !important;
}

/* Ligne totaux */
.fps-hud-row-total {
  border-radius: 4px;
  padding: 2px 4px;
}

/* Bandeau de boutons in-game (2026-07-17, demande explicite ; fusionné à 2 lignes
   le 2026-07-20 pour la compatibilité 1920x1080) : 1) photo / galerie / replay —
   2) langue / thème / FPS / EDA, tous les 4 sur la même ligne quelle que soit la
   hauteur du navigateur. Wrapper colonne ajouté autour des `.debug-light-btn-row`,
   qui restent chacune une simple rangée horizontale (inchangée) de ses
   boutons/selects. */
.debug-light-btn-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.debug-light-btn-row {
  display: flex;
  flex-direction: row;
  gap: 6px;
  pointer-events: none;
  /* 2026-07-31 — basse résolution : les 9 boutons/selects (flex-shrink:0 chacun,
     cf. .debug-light-toggle) dépassaient la largeur de l'écran au lieu de passer
     à la ligne. max-width borne la rangée à la largeur dispo (panneau en
     position:fixed avec left/right:14px), ce qui déclenche flex-wrap dès que le
     contenu ne tient plus — sans effet en résolution normale (rangée déjà plus
     étroite que ce max). justify-content:flex-end aligne aussi la/les ligne(s)
     à droite, cohérent avec le panneau désormais right-aligned ci-dessus. */
  flex-wrap: wrap;
  max-width: calc(100vw - 28px);
  justify-content: flex-end;
}

.debug-light-toggle {
  position: relative;
  pointer-events: auto;
  flex-shrink: 0;
  min-width: 48px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: rgba(247,239,225,0.7);
  background: linear-gradient(135deg, #4a5568, #2d3748);
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.debug-light-toggle--lut-active {
  background: linear-gradient(135deg, #ffd36d, #b58239);
  color: #1c140c;
  border-color: rgba(255,255,255,0.28);
}

.debug-light-toggle--fps {
  background: linear-gradient(135deg, #4a5568, #2d3748);
  color: rgba(247,239,225,0.7);
  border-color: rgba(255,255,255,0.18);
}

.debug-light-toggle--fps.debug-light-toggle--fps-active {
  background: linear-gradient(135deg, #ffd36d, #b58239);
  color: #1c140c;
  border-color: rgba(255,255,255,0.28);
}

/* Boutons capture 📷 et galerie 🖼️ (2026-07-15) : emoji seul (pas de texte comme
   FPS/EDA), agrandi et centré verticalement (flex, plutôt que de compter sur
   line-height — plus fiable entre navigateurs pour un unique glyphe emoji).
   #snapshotBtn : 2026-07-16, plusieurs passes (1.3em puis 1.8em toujours trop bas/petit).
   Un `transform` posé sur le <button> lui-même déplaçait toute la boîte hors de
   l'alignement avec FPS/EDA/QC (régression signalée) — corrigé en déplaçant le
   glyphe dans un <span class="snapshot-emoji"> interne (cf. edaPanelHost.js) : le
   translateY ne s'applique plus qu'au glyphe, la boîte du bouton reste alignée.
   #galleryBtn agrandi à son tour le 2026-07-16 (même pattern span interne, par
   précaution — évite de reproduire le problème d'alignement rencontré sur
   #snapshotBtn si jamais un ajustement vertical est nécessaire plus tard). */
#snapshotBtn,
#galleryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#snapshotBtn .snapshot-emoji {
  display: inline-block;
  font-size: 2.3em;
  line-height: 1;
  transform: translateY(-6px);
}
#galleryBtn .gallery-emoji {
  display: inline-block;
  font-size: 1.6em;
  line-height: 1;
}

/* Bouton replay 🎬 (2026-07-16) — même pattern span interne que #snapshotBtn/#galleryBtn. */
#replayBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#replayBtn .replay-emoji {
  display: inline-block;
  font-size: 1.6em;
  line-height: 1;
}

/* Boutons 🗣️ (voix TTS, touche T) et 🔊 (son global, touche M) — 2026-07-29,
   demande explicite. Même pattern span interne que #snapshotBtn/#galleryBtn/#replayBtn. */
#ttsMuteBtn,
#soundMuteBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#ttsMuteBtn .tts-emoji,
#soundMuteBtn .sound-emoji {
  display: inline-block;
  font-size: 1.6em;
  line-height: 1;
}

/* État "coupé" (touche T ou M, ou clic direct sur le bouton) : glyphe assombri +
   barre diagonale rouge en surimpression — visible sur les 2 thèmes sans réglage
   supplémentaire (simple calque ::after par-dessus le fond du bouton, thème bleu
   sidéral OU border-image médiéval, cf. plus bas dans ce fichier). */
.debug-light-toggle--muted {
  opacity: 0.5;
}
.debug-light-toggle--muted::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 2px;
  background: rgba(224, 64, 64, 0.9);
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
  transform: translateY(-50%) rotate(-30deg);
  border-radius: 2px;
  pointer-events: none;
}

/* ─── Panneau replay (replayEngine.js, 2026-07-16) ────────────────────────────────
   Bandeau flottant (PAS un voile plein écran) : la caméra doit rester manipulable
   pendant le replay (demande explicite), donc pas de fond opaque bloquant le canvas
   comme les autres overlays (galerie/aide) — juste un petit panneau de contrôle. */
.replay-overlay {
  position: fixed;
  inset: 0;
  /* 2026-07-16 — bug signalé : à bottom+z-index:500, le panneau se retrouvait sous le
     bandeau FPS/EDA/📷/🖼️/🎬 (.debug-light-panel, bottom:14px, z-index:3000, pleine
     largeur) → bouton fermer inatteignable au clic, cul-de-sac. z-index aligné sur les
     autres overlays in-game (snapshotGalleryOverlay.css utilise 10500).
     Rendu "modal" (2026-07-16, retour utilisateur "pas assez modal comme la galerie") :
     vignette haut/bas en dégradé façon cinéma sur TOUT l'écran, via ::before ci-dessous —
     mais `pointer-events: none` de bout en bout sauf sur .replay-panel : la caméra doit
     rester manipulable pendant le replay (demande explicite), donc pas de vrai voile
     bloquant comme la galerie (qui, elle, est une iframe séparée et peut se le permettre). */
  z-index: 10500;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 18px;
  pointer-events: none;
}
.replay-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 88%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.replay-overlay.hidden { display: none; }
.replay-panel {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 14px;
  font-weight: 700;
}
.replay-panel::before {
  /* 2026-07-16 — retour utilisateur : emoji 🎬 remplacé par le texte "REPLAY". */
  content: "REPLAY";
  font-family: 'BebasNeue', system-ui, sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
}
.replay-hud {
  display: flex;
  align-items: center;
  min-width: 64px;
}
/* Compteur de tours (ex. "31/31") — 2026-07-16, retour utilisateur : score numérique
   ("2357") retiré (inutile en replay), compteur agrandi + BebasNeue, même police que le
   reste du HUD jeu (#arcadeScore/deck.css/eda.css §fps-hud-fps — cf. grep "Bebas" CONTEXT.md). */
.replay-progress {
  font-family: 'BebasNeue', system-ui, sans-serif;
  font-size: 26px;
  letter-spacing: 0.04em;
  line-height: 1;
}
/* Boutons du panneau replay : classe `.debug-light-toggle` réutilisée telle quelle
   (2026-07-16, retour utilisateur "le HUD replay doit voir les mêmes CSS que les autres
   HUD") — plus de style custom séparé ici, cf. règle .debug-light-toggle plus haut dans
   ce fichier pour l'apparence des boutons, et .debug-light-toggle--lut-active pour l'état
   actif du sélecteur de vitesse. `min-width` réduit ici (36px vs 48px par défaut) : les
   boutons replay sont plus nombreux et plus étroits (glyphes seuls, pas de texte "FPS"). */
.replay-controls { display: flex; align-items: center; gap: 6px; }
.replay-controls .debug-light-toggle { min-width: 36px; }
/* 2026-07-16 — retour utilisateur : emojis des boutons replay (🔁🔴⏹⏸▶✕) agrandis et
   centrés verticalement, exactement comme #snapshotBtn/#galleryBtn (span interne
   `.replay-btn-emoji` + flex centering sur le bouton). Ciblage par ID plutôt que
   `:has()` (évite toute dépendance à une fonctionnalité CSS récente) — seuls les 4
   boutons à glyphe (pas les boutons de vitesse ×1/×2/×4/×8, texte brut) sont concernés. */
#replayRestartBtn,
#replayRecordBtn,
#replayPlayPause,
#replayCloseBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.replay-btn-emoji {
  display: inline-block;
  font-size: 1.7em;
  line-height: 1;
}
#galleryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  line-height: 1;
}

/* Sélecteur de langue en jeu (2026-07-13, v2) — un <select> unique (pas un bouton
   par langue : rejeté par l'utilisateur, pas scalable) à côté des boutons FPS/EDA.
   Hérite de `.debug-light-toggle` pour la taille/police/couleurs (même rangée),
   avec juste les overrides nécessaires pour un <select> natif (reset de l'apparence
   navigateur + petite flèche custom, texte centré). Certains overrides du navigateur
   (bords, box-sizing) redéclarés explicitement ci-dessous : sur un <select>, le chrome
   natif de l'OS peut resurgir malgré `appearance: none` seul, d'où les bords moins
   arrondis que les 3 boutons voisins signalés le 2026-07-15. */
.debug-light-lang-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  background-clip: padding-box;
  outline: none;
  min-width: 56px;
  text-align: center;
  text-align-last: center;
  padding-right: 22px;
  background-image: linear-gradient(135deg, #4a5568, #2d3748),
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='%23ffd36d'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0, right 8px center;
  background-size: 100% 100%, 9px 6px;
}
.debug-light-lang-select option {
  background: #2d3748;
  color: rgba(247,239,225,0.92);
  font-weight: 700;
}

/* Lettre de raccourci clavier dans les boutons toggle */
.debug-light-toggle .btn-key {
  background: transparent;
  color: #ffd36d;
  font-weight: 900;
  font-style: normal;
}
/* Sur fond doré (bouton actif) : assombrir la lettre pour qu'elle reste lisible */
.debug-light-toggle--fps-active .btn-key,
.debug-light-toggle--lut-active .btn-key {
  color: rgba(80, 40, 0, 0.75);
}

/* ─── PIX section inside CUSTOMISATION panel ─────────────────────────── */
.debug-light-pix-sep {
  height: 1px;
  background: rgba(120,180,255,0.22);
  margin: 16px 0;
}

/* Sections PIX, CINEMA, EAU, VENT, NUAGES, COURBURE ÉCRAN & MÉTÉO : espacement vertical
   entre leurs sliders — élargi (8px) depuis le passage en onglets, qui laisse plus de place. */
.debug-light-pix-section,
.debug-light-cinema-section,
.debug-light-water-section,
.debug-light-wind-section,
.debug-light-cloud-section,
.debug-light-crt-section,
.debug-light-worldshape-section,
.debug-light-daynight-section,
.debug-light-weather-section,
.debug-light-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Titres de rubrique EDA (CINÉMA / PIX / CRT / EAU / NUAGES / VENT / Forme / Jour-Nuit /
   Qualité / Météo / God Rays / Tilt-shift / Bloom) — fond sombre pour mise en valeur
   (2026-07-08) + barre latérale accent. Pas de margin-bottom ici : l'espacement avec le
   premier slider vient uniquement du gap:8px du conteneur parent (.debug-light-xxx-section). */
.debug-light-pix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
}
/* Texte du titre à l'intérieur de la barre sombre — mêmes valeurs que .lut-section-head
   (text-transform: uppercase inclus) pour que TOUS les titres de rubrique (peu importe
   leur casse dans le markup : "Météo", "God Rays", "CINÉMATIQUE"...) apparaissent avec
   la même typographie en majuscules. */
.debug-light-pix-head > span {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Emoji de rubrique/sous-rubrique : +35% par rapport au texte qui l'entoure (em = relatif
   à la taille de police du parent, donc +35% correct dans tous les contextes : 12px pour
   les rubriques principales, 11px pour les sous-rubriques LUT/EAU/VENT). */
.rubrique-emoji {
  font-size: 1.35em;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.12em;
}

/* Dans les 3 onglets EDA (LUT / Cinématique / Environnement) uniquement : encore +12%
   par rapport à la valeur précédente (1.82 × 1.12 ≈ 2.04em au total, soit ×1.35 ×1.12
   par rapport à la base). Le header AMBIANCES, hors onglets, reste à 1.35em. */
.debug-light-tab-panel .rubrique-emoji {
  font-size: 2.04em;
}

/* Toggle switch (same style as postprocessHud) */
.pix-switch {
  flex: 0 0 auto;
  position: relative;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.pix-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pix-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  transition: background 0.16s, box-shadow 0.16s;
}
.pix-switch span::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #f7efe1;
  box-shadow: 0 2px 7px rgba(0,0,0,0.35);
  transition: transform 0.16s;
}
.pix-switch input:checked + span { background: rgba(88,228,153,0.55); box-shadow: inset 0 0 0 1px rgba(175,255,213,0.45), 0 0 14px rgba(88,228,153,0.22); }
.pix-switch input:checked + span::after { transform: translateX(16px); }

.pix-control {
  display: block;
  margin-top: 8px;
}
.pix-control span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(180,215,255,0.82);
  text-transform: uppercase;
  letter-spacing: 0.045em;
}
.pix-control strong {
  min-width: 28px;
  text-align: right;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.pix-control input[type="range"],
.debug-light-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(120,170,255,0.22);
  outline: none;
  cursor: pointer;
  margin: 5px 0;
}
.pix-control input[type="range"]::-webkit-slider-thumb,
.debug-light-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(200,225,255,0.92);
  box-shadow: 0 0 0 2px rgba(120,180,255,0.30), 0 1px 4px rgba(0,0,0,0.45);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}
.pix-control input[type="range"]::-webkit-slider-thumb:hover,
.debug-light-row input[type="range"]::-webkit-slider-thumb:hover {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(140,200,255,0.45), 0 1px 6px rgba(0,0,0,0.50);
}
.pix-control input[type="range"]::-moz-range-thumb,
.debug-light-row input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: rgba(200,225,255,0.92);
  box-shadow: 0 0 0 2px rgba(120,180,255,0.30), 0 1px 4px rgba(0,0,0,0.45);
  cursor: pointer;
}
.pix-control input[type="range"]::-moz-range-track,
.debug-light-row input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(120,170,255,0.22);
}
.pix-select {
  width: 100%;
  margin-top: 0;
  padding: 3px 6px;
  border: 1px solid rgba(120,180,255,0.30);
  border-radius: 6px;
  background: rgba(255,255,255,0.10);
  color: rgba(220,235,255,0.90);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.pix-select option { color: #111827; }
.pix-reset-btn {
  width: 100%;
  margin-top: 7px;
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.10);
  color: rgba(180,215,255,0.80);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.pix-reset-btn:hover { background: rgba(255,255,255,0.24); }
.pix-section--disabled .debug-light-row { opacity: 0.55; }
.cinema-section--disabled .debug-light-row { opacity: 0.55; }
.wind-section--disabled .debug-light-row { opacity: 0.55; }
.cloud-section--disabled .debug-light-row { opacity: 0.55; }
.crt-section--disabled .debug-light-row { opacity: 0.55; }
/* Sous-groupes à case à cocher individuelle (God Rays / Tilt-shift / Bloom / Écume / Sillage) */
.debug-light-subgroup.subgroup-disabled .debug-light-row { opacity: 0.55; }

.debug-light-body {
  pointer-events: auto;
  /* box-sizing: border-box → width JS inclut padding + border, comme offsetWidth de #tileUI */
  box-sizing: border-box;
  /* Largeur initiale : sera écrasée par JS (×1.56128 de la largeur #tileUI — flux
     journal 2 col, cf. edaPanelWiring.js::LUT_WIDTH_FACTOR). 406px → 345px : même
     réduction de 15% (3e round, même jour) appliquée ici pour que le flash initial
     (avant le 1er requestAnimationFrame qui synchronise la largeur réelle) ne soit
     pas plus large que la valeur finale. */
  width: min(345px, calc(100vw - 92px));
  /* height (pas juste max-height) : avec le contenu réparti en onglets et un flux
     multi-column, la zone .debug-light-columns doit pouvoir scroller si le contenu
     dépasse la hauteur d'écran — d'où hauteur fixe (pas seulement max-height). */
  height: calc(100vh - 28px);
  max-height: calc(100vh - 28px);
  /* Occupe toute la hauteur dispo — chaque colonne défile indépendamment en interne.
     2026-07-20 — REVERT : la tentative de rendre CE conteneur scrollable (englobant
     bandeau ambiances + footer) a introduit une régression signalée : le bandeau
     ambiances doit rester incompressible et intégralement visible, il ne doit
     JAMAIS rétrécir ni défiler. Retour à overflow:hidden — le SEUL scroll voulu
     est celui, interne, de .debug-light-columns (cf. règle plus bas), qui doit
     rester dans les limites fixes de ce conteneur, pas déborder dessus. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
  font-family: monospace;
  border-radius: 12px;
}
.debug-light-body::-webkit-scrollbar-track { background: transparent; }

/* ── Onglets EDA (sous le header ambiances) — regroupent les rubriques par thème,
   chaque onglet affichant son contenu sur 3 colonnes fluides type journal (les
   rubriques remplissent la colonne 1, puis 2, puis 3, aucune n'est coupée à
   cheval sur deux colonnes — cf. 'break-inside: avoid' plus bas). ── */
.debug-light-tabs {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-bottom: 10px;
}
.debug-light-tab-btn {
  flex: 1;
  padding: 8px 9px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

/* Conteneur des panneaux d'onglet : un seul panneau visible (.debug-light-tab-panel--active),
   les autres sont display:none — pas de layout ni de coût pour les onglets masqués.
   2026-07-20 — CORRECTIF RÉEL du scroll d'onglet inefficace à faible hauteur (1920x1080
   compris) : c'est CE conteneur qui porte désormais la hauteur bornée + overflow-y:auto
   (au lieu de .debug-light-columns, cf. explication détaillée sur cette dernière règle
   plus bas — root cause : CSS multi-colonnes ne peut PAS s'étendre verticalement et
   scroller sur SA PROPRE boîte quand cette boîte a elle-même une hauteur bornée ; son
   débordement va toujours À DROITE (colonnes supplémentaires), jamais vers le bas —
   et ces colonnes en trop étaient rendues inaccessibles par l'overflow-x:hidden.
   Plancher de 220px conservé : bandeau ambiances/onglets/footer restent incompressibles
   (flex-shrink:0), donc c'est ce conteneur qui absorbe le manque de place. */
.debug-light-tab-panels {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,180,255,0.35) transparent;
}
.debug-light-tab-panels::-webkit-scrollbar { width: 4px; }
.debug-light-tab-panels::-webkit-scrollbar-thumb { background: rgba(120,180,255,0.35); border-radius: 2px; }
.debug-light-tab-panels::-webkit-scrollbar-track { background: transparent; }
.debug-light-tab-panel {
  display: none;
  flex-direction: column;
  /* 2026-07-20 — plus de flex:1 1 auto / min-height:0 ici : cet élément ne doit PLUS
     être borné en hauteur (c'est .debug-light-tab-panels, son parent, qui borne et
     scrolle désormais) — sinon on recrée le même bug que .debug-light-columns
     ci-dessous sur cette boîte intermédiaire. */
}
.debug-light-tab-panel--active {
  display: flex;
}

/* ── Flux "journal" 2 colonnes fluides (2026-07-08, repassé à 2 colonnes le
   2026-08-01, demande explicite : "les 3 onglets sont affichés sur 3 colonnes
   type journal, tu devrais passer à deux colonnes" — cohérent avec la
   réduction de largeur du panneau demandée dans la même série de retours,
   cf. LUT_WIDTH_FACTOR dans edaPanelWiring.js). Chaque onglet remplit d'abord
   la colonne 1, puis la 2.
   2026-07-20 — CORRECTIF root cause (scroll d'onglet "pas effectif" signalé à
   1920x1080) : cet élément avait sa PROPRE hauteur bornée (flex:1 1 auto, min-height:0)
   ET overflow-y:auto EN MÊME TEMPS que columns:3. Or le CSS multi-colonnes ne
   déborde JAMAIS verticalement sur sa propre boîte : dès que le contenu dépasse
   la hauteur disponible, le navigateur ajoute une 4e (5e, 6e...) colonne EN PLUS,
   à droite — jamais une extension vers le bas. Avec overflow-x:hidden, cette
   colonne en trop devenait invisible et à jamais inaccessible : la scrollbar
   verticale n'avait elle-même rien à faire défiler (chaque colonne, par
   définition, tient dans la hauteur impartie). D'où l'impression de "scroll pas
   effectif" alors qu'il existait bien un ascenseur — il scrollait une boîte qui
   ne débordait jamais dans SON axe. Fix : cet élément n'est plus borné en hauteur
   ni scrollable lui-même (retrait de flex/min-height/overflow) — il se dimensionne
   à sa hauteur naturelle de contenu (colonnes équilibrées, jamais de 4e colonne
   puisqu'aucune limite de hauteur ne le contraint), et c'est désormais SON PARENT
   (.debug-light-tab-panels, hauteur bornée + overflow-y:auto) qui scrolle
   verticalement pour révéler l'intégralité du bloc de colonnes (toujours
   valable en 2 colonnes — même mécanisme, seul le compte de colonnes change). */
.debug-light-columns {
  columns: 2;
  column-gap: 14px;
  padding-right: 4px;
}

/* Chaque rubrique enfant direct = bloc indissociable dans le flux journal.
   'break-inside: avoid' + 'margin: 0 0 14px' fournissent l'espacement inter-
   rubrique — plus besoin de '.debug-light-pix-sep' entre les rubriques
   top-level (ceux à l'intérieur d'une même rubrique, ex. Écume/Sillage,
   restent visibles). */
.debug-light-columns > .lut-section,
.debug-light-columns > .debug-light-cinema-section,
.debug-light-columns > .debug-light-pix-section,
.debug-light-columns > .debug-light-crt-section,
.debug-light-columns > .debug-light-water-section,
.debug-light-columns > .debug-light-cloud-section,
.debug-light-columns > .debug-light-wind-section,
.debug-light-columns > .debug-light-worldshape-section,
.debug-light-columns > .debug-light-daynight-section,
.debug-light-columns > .debug-light-quality-section,
.debug-light-columns > .debug-light-weather-section {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 14px 0;
}
/* Séparateurs top-level masqués (l'espacement est fourni par le margin-bottom
   ci-dessus). Les séparateurs à l'intérieur d'une rubrique — ex. Écume/Sillage
   dans .debug-light-water-section — restent visibles. */
.debug-light-columns > .debug-light-pix-sep { display: none; }

.debug-light-panel.collapsed .debug-light-body { display: none; }

/* Croix de fermeture en haut à droite du panneau EDA (2026-07-17, demande explicite),
   même besoin/traitement visuel que .fps-hud-close ci-dessus. Positionnement absolu
   (.debug-light-body passe en position:relative pour l'ancrer) plutôt qu'un flex header
   dédié — le titre principal est un simple bloc centré, pas une rangée flex adaptée
   à y accrocher un bouton de coin. Couleurs par thème plus bas dans ce fichier. */
.debug-light-body { position: relative; }
.debug-light-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border-radius: 50%;
  cursor: pointer;
  font-family: monospace;
  font-weight: 900;
  line-height: 1;
  width: 22px;
  height: 22px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* Titre principal du HUD EDA — au-dessus de tout (ambiances comprises) */
.debug-light-main-title {
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 6px;
}

/* Header plein largeur (ambiances) — au-dessus des 2 colonnes.
   2026-07-20 — REVERT : rendu rétrécissable/scrollable un temps pour "libérer de
   la place" pour les onglets à faible hauteur, puis signalé comme régression —
   ce bandeau doit rester incompressible et toujours intégralement visible, quelle
   que soit la hauteur du navigateur. Retour à flex-shrink:0. Le budget de hauteur
   manquant à faible résolution doit être absorbé UNIQUEMENT par le scroll interne
   de .debug-light-columns (cf. plus bas), jamais par ce bandeau. */
.debug-light-header {
  flex-shrink: 0;
}

/* Footer plein largeur (forme du monde + jour/nuit + export) — sous les 2 colonnes */
.debug-light-footer {
  flex-shrink: 0;
}

.debug-light-export {
  margin-bottom: 10px;
}

/* Grid (et non flex) pour que "Comparer" (ligne 2, colonne 1) fasse exactement
   la même largeur que "Copier" (ligne 1, colonne 1) : les 2 lignes partagent
   le même découpage de colonnes 1fr/1fr/1fr/1fr. */
.debug-light-export-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 6px;
}
.debug-light-export-row + .debug-light-export-row {
  margin-top: 6px;
}

/* ── Modèle bouton bleu — CSS strictement identique à .new-game-button (HUD score) ──
   Copier / Redo / Comparer / bouton Fermer / ambiances. */
.debug-light-export #debugLightCopy,
.debug-light-export #debugLightRedo,
.debug-light-export #debugLightCompare {
  margin-top: 0;
  padding: 8px 9px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}

/* ── Modèle bouton rouge — CSS strictement identique à .abandon-button (HUD score) ──
   Undo / Reset : actions destructives (annulent / réinitialisent des réglages). */
.debug-light-export #debugLightUndo,
.debug-light-export #debugLightReset {
  margin-top: 0;
  padding: 8px 9px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}

#debugLightUndo:disabled,
#debugLightRedo:disabled,
#debugLightCompare:disabled {
  opacity: 0.32;
  cursor: default;
}

.debug-light-compare-btn--active {
  background: rgba(90,140,255,0.30) !important;
  border-color: rgba(120,180,255,0.55) !important;
  color: #b0d0ff !important;
}

.debug-light-last-preset {
  grid-column: 2 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: rgba(180,215,255,0.60);
  font-style: italic;
}

/* EAU (Écume/Sillage bateau) et VENT (4.1/4.2/4.3) : plusieurs sous-rubriques empilées
   dans un même conteneur plat (pas de wrapper .lut-section par sous-groupe comme dans
   l'onglet LUT) — rythme vertical (gap: 8px) identique à celui des .lut-section. */
#debugLightWaterControls,
#debugLightWindControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Chaque rubrique LUT (Brouillard / Astre lumineux / Étalonnage / Palette biomes) */
.lut-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Rubrique désactivée (switch Étalonnage / Palette biomes) — même effet que PIX/CINÉMA */
.lut-section--disabled .debug-light-row,
.lut-section--disabled .color-grid {
  opacity: 0.55;
}

/* ── Titres de rubrique "à plat" (LUT, God Rays/Tilt-shift/Bloom, Écume/Sillage bateau) —
   même style visuel que .debug-light-pix-head (rubriques Cinéma/Pixélisation/Nuages/Vent),
   puisque ce ne sont plus des sous-rubriques mais des rubriques de plein droit. Aucune
   marge/bordure propre ici : l'espacement de base vient du gap du conteneur flex parent
   (8px), et un séparateur visible (.debug-light-pix-sep) est explicitement inséré ENTRE
   deux rubriques (jamais avant la première d'une colonne) — jamais de margin/border sur
   l'en-tête lui-même, pour ne pas cumuler deux sources d'espacement différentes. */
.lut-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
/* Sous-titre avec switch (Étalonnage / Palette biomes / God Rays / Tilt-shift / Bloom /
   Écume / Sillage bateau) : titre + interrupteur alignés — redondant avec la base
   ci-dessus (conservé pour compat, la classe reste posée par le JS). */
.lut-section-head--with-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Sous-titre RÉELLEMENT imbriqué sous une rubrique parente (Brins de blés/d'herbes/Arbres
   sous "4. VENT") : plus de séparateur (border-top retiré 2026-07-08), l'espacement
   inter-sous-rubriques vient du gap:8px du parent. Fond sombre léger appliqué en bas
   de fichier avec les autres têtes de rubrique. */
.lut-section-head--nested {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  /* Fond sombre plus léger que les rubriques principales pour marquer la subordination */
  padding: 5px 8px;
  border-radius: 5px;
}
/* .lut-subhead-first — conservé sans effet, la classe reste posée par le JS pour compat */
.lut-section-head--nested.lut-subhead-first { /* no-op depuis retrait du border-top */ }

/* ── Grille 2 colonnes pour toutes les couleurs ── */
.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  margin-top: 4px;
}
/* Chaque cellule : [swatch 20px] [label] — ordre inversé par grid-column */
.color-grid .debug-light-row {
  grid-template-columns: 20px 1fr;
  gap: 5px;
  font-size: 11px;       /* même taille que les sliders */
  line-height: 1.55;
}
.color-grid .debug-light-row span {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-grid .debug-light-row input[type="color"] {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 18px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
.color-grid .debug-light-row output { display: none; }

/* ── Tooltip custom LUT ── */
#lutHelpTooltip {
  position: fixed;
  /* 2026-08-01 — demande explicite : les popups d'aide au survol doivent
     apparaître AU-DESSUS du cadre décoratif médiéval (z-index 99999/99998,
     cf. CONTEXT.md §39), pas en dessous. #lutHelpTooltip est le SEUL
     système de tooltip du jeu (partagé game-wide : stats, EDA, boutons,
     score/efficacité — cf. commentaire medieval.css ~1372). 9999 → 100000.
     ERRATUM (même jour) : cette règle est en réalité MORTE — javascript/
     helpTooltip.js injecte dynamiquement en <head> (ensureHelpTooltip(),
     au runtime, donc APRÈS ce fichier) sa PROPRE règle #lutHelpTooltip qui
     gagne systématiquement la cascade à spécificité égale. Le vrai z-index
     à modifier est celui-là (corrigé, même valeur 100000, pour rester
     cohérent). Valeur laissée ici synchronisée pour éviter toute confusion
     future, mais sans effet réel. */
  z-index: 100000;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(6,12,26,0.96);
  border: 1px solid rgba(120,180,255,0.28);
  box-shadow: 0 6px 24px rgba(0,0,0,0.65), 0 0 0 1px rgba(120,180,255,0.06);
  backdrop-filter: blur(12px);
  color: rgba(205,225,255,0.94);
  font: 11px/1.55 system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: pre-wrap;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
#lutHelpTooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.debug-light-row {
  display: grid;
  grid-template-columns: 122px 1fr 58px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.55;
}

/* .debug-light-row input[type="range"] → style mutualisé avec .pix-control ci-dessus */
.debug-light-row input[type="color"] {
  width: 100%;
  height: 24px;
  border: 0;
  background: transparent;
}

.debug-light-row output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── MÉTÉO (rubrique 8, onglet Environnement) ─────────────────────────────
   Ex-panneau flottant "🌦 ENV", intégré dans l'EDA le 2026-07-08. Une ligne
   par évènement environnemental : label + statut ("● actif") + bouton
   Déclencher/Stop. Suit le style des .debug-light-row (police, couleur label)
   avec un bouton dérivé de .debug-light-preset-btn (charte bleutée EDA), et
   un état "actif" qui bascule le bouton en tonalité rouge/stop. */
/* .debug-light-weather-row : ancien schéma "1 row par évènement avec bouton Déclencher/Stop",
   remplacé le 2026-07-12 par le modèle Cyril (switch + sliders repliables, cf. plus bas
   #debugLightVfxControls / .weather-merged-head). Les règles ci-dessous sont conservées :
   .weather-label et .weather-requires restent réutilisées par le nouveau modèle, et
   .debug-light-weather-btn sert toujours au bouton "↺ reset" du head et aux couleurs
   partagées de "⏹ Tout arrêter". */
.debug-light-weather-row {
  display: grid;
  grid-template-columns: 1fr auto 96px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  line-height: 1.55;
}
.debug-light-weather-row .weather-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.debug-light-weather-row .weather-requires {
  font-style: italic;
  font-size: 9px;
  color: rgba(180,215,255,0.55);
  letter-spacing: 0.02em;
}
.debug-light-weather-row .weather-status {
  color: rgba(88,228,153,0.95);
  font-size: 10px;
  min-width: 42px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Bouton Déclencher/Stop — même charte que .debug-light-preset-btn (rubrique 7 :
   Faible/Moyen/Élevé/Max). Padding, border-radius, letter-spacing, box-shadow alignés
   pour un rendu HUD cohérent. */
.debug-light-weather-btn {
  padding: 8px 9px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.10s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
.debug-light-weather-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.debug-light-weather-btn:active:not(:disabled) { transform: translateY(0); }
.debug-light-weather-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* État "actif" — bouton passe en tonalité stop (rouge), même code couleur que
   le futur "⏹ Tout arrêter" pour cohérence visuelle. */
.debug-light-weather-btn--active {
  background: rgba(120,50,50,0.72);
  border-color: rgba(220,140,140,0.55);
  color: rgba(255,225,225,0.95);
}
.debug-light-weather-btn--active:hover:not(:disabled) {
  background: rgba(160,70,70,0.88);
}

/* Bouton "⏹ Tout arrêter" — full-width, tonalité stop */
.debug-light-weather-stopall {
  width: 100%;
  padding: 7px 9px;
  margin-top: 4px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, transform 0.10s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}
.debug-light-weather-stopall:hover {
  background: rgba(120,40,40,0.90);
  transform: translateY(-1px);
}
.debug-light-weather-stopall:active { transform: translateY(0); }

/* ── Refonte 2026-07-12 (livraison Cyril « nuages metaball + pluie + impacts ») ─
   Chaque item VFX/Météo = un head à switch (+ éventuel bouton reset ↺) + un bloc
   de sliders repliable (.debug-light-vfx-rows). Un seul host #debugLightVfxControls
   dans la rubrique 8. Les classes .weather-label et .weather-requires sont réutilisées
   du bloc précédent (label + suffixe italique « (nécessite X) »). */
#debugLightVfxControls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lut-section-head.weather-merged-head { justify-content: space-between; }
.lut-section-head.weather-merged-head .weather-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lut-section-head.weather-merged-head .weather-requires {
  font-style: italic;
  font-size: 9px;
  color: rgba(180,215,255,0.55);
  letter-spacing: 0.02em;
  text-transform: none;
}
.weather-head-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.debug-light-vfx-reset {
  /* padding + width fixés inline pour compatibilité avec .debug-light-weather-btn */
  min-width: 26px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}
/* État replié : sliders masqués sans démontage DOM (rétablis instantanément à
   la ré-ouverture). Marge inter-items préservée par le gap:8px du host. */
.debug-light-vfx-rows { transition: opacity 0.12s; }
.debug-light-vfx-rows--collapsed {
  display: none;
}

/* Titre de rubrique AMBIANCES — même CSS que .score-title (HUD score) */
.debug-light-presets-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  margin-bottom: 5px;
}

.debug-light-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* Ambiances (presets) — même modèle bouton que .new-game-button (HUD score) */
.debug-light-preset-btn {
  flex: 1 0 auto;
  min-width: 96px;
  max-width: calc(33.33% - 4px);
  padding: 8px 9px;
  border-radius: 8px;
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.12s, border-color 0.12s, transform 0.10s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
}

.debug-light-preset-btn .preset-emoji {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1;
}

.debug-light-preset-btn .preset-label {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.debug-light-preset-btn:hover {
  transform: translateY(-1px);
}


/* ── Mini HUD clavier (bottom-right) ── */
/* Masqué temporairement dans les 2 thèmes sur demande explicite de l'utilisateur
   (2026-07-17) — le HUD reste en place dans le DOM/JS (edaPanelWiring.js) et
   pourra être remontré plus tard en retirant simplement ce display:none ; ne
   pas supprimer le markup/la logique tant que ce n'est pas explicitement demandé. */
#kbdHintHud {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2900;
  font-family: monospace;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 12px;
  padding: 8px 14px;
  pointer-events: none;
  white-space: nowrap;
  display: none;
}

body.grid-only-mode #kbdHintHud { display: none; }
/* EDA ouvert : masque le mini HUD clavier (redondant avec le panel, et le chevauche) */
body.lut-panel-open #kbdHintHud { display: none; }

/* Mode immersif (ESPACE) : masque aussi le badge FPS fermé (2026-07-17, demande
   explicite — jusqu'ici seul le panneau déployé était refermé via fpsBtn.click()
   dans scene.js::toggleGridOnlyMode(), le badge "-- FPS" restait visible). */
body.grid-only-mode .fps-counter { display: none !important; }

/* 2026-07-20 — compatibilité 1920x1080 (fenêtre non maximisée / hauteur d'écran
   réduite) : masquait le badge FPS REPLIÉ quand la hauteur du navigateur manque
   (chevauchait #scorePanel de ~50px sous 960px de hauteur utile). Devenu
   redondant le 2026-07-31 : le badge replié est désormais `display: none` par
   défaut EN PERMANENCE (cf. règle `.fps-counter` plus haut), quelle que soit la
   hauteur — cette media query ne pouvait donc plus jamais rien changer. Note
   conservée pour l'historique plutôt que la règle elle-même. */

/* Super-immersif (SHIFT+ESPACE) : aucun HUD — mode capture d'écran */
body.huds-force-hidden #debugLightPanel { display: none !important; }
body.huds-force-hidden #tileUI         { display: none !important; }
body.huds-force-hidden #scorePanel     { display: none !important; }
body.huds-force-hidden #arcadeScore    { display: none !important; }

/* LUT ouvert → masquer les HUDs droits (tuile courante / suivante / restantes / missions) */
body.lut-panel-open #tileUI { display: none !important; }

/* HUD FPS déployé (ou EDA ouvert) → masque le score (panneau + gros score arcade en haut à
   gauche + dernier coup entre parenthèses, ce dernier est un enfant de #arcadeScore donc
   masqué avec lui), même mécanisme que huds-force-hidden ci-dessus (classe body + !important)
   plutôt qu'un style inline direct : garantit la priorité sur toute autre règle CSS,
   cf. piège HUD FPS/score 2026-07-05. */
body.fps-hud-deployed #scorePanel  { display: none !important; }
body.fps-hud-deployed #arcadeScore { display: none !important; }

/* 2026-08-01 — demande explicite : quand EDA ou le HUD FPS est ouvert, masquer
   la rangée des 9 boutons rouges (.debug-light-btn-rows) — "ça sera plus
   simple" : évite d'avoir à réserver de la place pour cette rangée sous/à
   côté du panneau ouvert, ce qui permettait au HUD FPS notamment de sortir de
   l'écran par le haut (le panneau devait jusque-là partager la hauteur
   disponible avec la rangée de boutons). Fermeture toujours possible via le
   bouton "X" propre à chaque panneau (#debugLightClose / .fps-hud-close),
   indépendant de cette rangée. */
body.lut-panel-open .debug-light-btn-rows,
body.fps-hud-deployed .debug-light-btn-rows {
  display: none !important;
}

/* FPS HUD plein hauteur — le scorePanel est masqué via JS, le fps-counter occupe toute la hauteur */
.debug-light-panel.fps-hud-fullscreen {
  top: 14px;
  align-items: flex-start;
}
.debug-light-panel.fps-hud-fullscreen .debug-light-left-col {
  height: 100%;
}
.debug-light-panel.fps-hud-fullscreen .fps-counter {
  flex: 1 1 auto;
  max-height: none;
}

/* 2026-08-01 — demande explicite : "HUD FPS pas assez de marge en haut, trop
   en bas". Cause : top:14px ci-dessus n'a jamais été adapté au cadre
   décoratif médiéval (65px, cf. CONTEXT.md §39) — valeur héritée d'avant son
   existence. Avec la rangée de boutons masquée ci-dessus (.debug-light-btn-
   rows), .fps-counter (flex:1 1 auto, max-height:none) remplit maintenant
   TOUTE la hauteur du panneau automatiquement dès que celui-ci est
   correctement borné en haut ET en bas — d'où le simple ajustement du `top`
   ci-dessous (le `bottom` reste hérité de la règle ancien de base).
   ERRATUM (même jour) : marge cadre 65px → 52px. top = 14+52 = 66px. */
[data-theme="ancien"] .debug-light-panel.fps-hud-fullscreen {
  top: 66px;
}

/* ─── [data-theme="bleu"] — apparence actuelle par défaut (HUD FPS + HUD EDA,
   cf. CONTEXT.md §32). Les badges de rubrique (.debug-light-pix-head,
   .lut-section-head, .lut-section-head--nested), les boutons chrome
   (.debug-light-toggle, .debug-light-lang-select, .btn-key) et les accents
   colorés par métrique (fps-hud-cat-dc/tri/tri-pct/shadow/heavy, kbd, switches,
   sliders, tooltip LUT) restent COMMUNS aux deux thèmes — déjà sombres/lisibles
   sur fond clair comme sur fond sombre, même principe que les liserés biome de
   #scorePanel. Seuls les CONTENANTS (cartes) et le texte de base changent. ─── */
[data-theme="bleu"] .fps-counter {
  color: rgba(240,250,255,0.96);
  background: rgba(0,0,0,0.68);
  border: 1px solid rgba(120,180,255,0.38);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
[data-theme="bleu"] .fps-hud-fps { color: rgba(240,250,255,0.96); }
[data-theme="bleu"] .fps-hud-fps > span:first-child { color: rgba(180,215,255,0.82); }
[data-theme="bleu"] .fps-hud-sep { border-top: 1px solid rgba(120,180,255,0.22); }
[data-theme="bleu"] .fps-hud-row,
[data-theme="bleu"] .fps-hud-row-cat { color: rgba(180,215,255,0.82); }
[data-theme="bleu"] .fps-hud-row strong,
[data-theme="bleu"] .fps-hud-cat-count { color: rgba(240,250,255,0.96); }
[data-theme="bleu"] .fps-hud-eff-label { color: rgba(180,215,255,0.70); }
[data-theme="bleu"] .fps-hud-group-header {
  color: rgba(212,236,255,0.92);
  border-bottom: 1px solid rgba(120,180,255,0.12);
}
[data-theme="bleu"] .fps-hud-row-total { background: rgba(120,180,255,0.08); }
[data-theme="bleu"] .fps-hud-row-cat--heavy { background: rgba(220, 40, 40, 0.20); color: rgba(255,220,220,0.90); }
[data-theme="bleu"] .fps-hud-cat-dc { color: rgba(255,210,100,0.90); }
[data-theme="bleu"] .fps-hud-cat-tri { color: rgba(130,195,255,0.90); }
[data-theme="bleu"] .fps-hud-cat-tri-pct { color: rgba(130,195,255,0.55); }
[data-theme="bleu"] .fps-hud-cat-shadow { color: rgba(180,140,255,0.90); }

/* Croix de fermeture HUD FPS/EDA (2026-07-17) — même palette "cachet" que les
   boutons d'export bleu (#debugLightCopy/Redo/Compare). */
[data-theme="bleu"] .fps-hud-close,
[data-theme="bleu"] .debug-light-close {
  background: rgba(25, 56, 82, 0.78);
  border: 1px solid rgba(145, 205, 255, 0.42);
  color: rgba(230, 246, 255, 0.96);
}
[data-theme="bleu"] .fps-hud-close:hover,
[data-theme="bleu"] .debug-light-close:hover {
  background: rgba(38, 86, 124, 0.9);
  color: #ffffff;
}

/* Mini HUD replay (.replay-panel) — apparence actuelle par défaut. */
[data-theme="bleu"] .replay-panel {
  background: rgba(20, 24, 32, 0.92);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 28px rgba(0,0,0,0.55);
  color: rgba(247,239,225,0.92);
}
[data-theme="bleu"] .replay-panel::before { color: rgba(220, 235, 255, 0.85); }
[data-theme="bleu"] .replay-progress { color: #ffd15d; }
[data-theme="bleu"] #kbdHintHud {
  color: rgba(240,250,255,0.96);
  background: rgba(0,0,0,0.68);
  border: 1px solid rgba(120,180,255,0.38);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

[data-theme="bleu"] .debug-light-body {
  border: 1px solid rgba(120,180,255,0.38);
  background: rgba(0,0,0,0.68);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
[data-theme="bleu"] .debug-light-tab-btn {
  border: 1px solid rgba(120,180,255,0.32);
  background: rgba(18,28,52,0.80);
  color: rgba(210,230,255,0.70);
}
[data-theme="bleu"] .debug-light-tab-btn:hover {
  border-color: rgba(140,200,255,0.50);
  color: rgba(230,246,255,0.95);
}
[data-theme="bleu"] .debug-light-tab-btn--active {
  background: rgba(90,140,255,0.30);
  border-color: rgba(145,205,255,0.65);
  color: #ffffff;
}
[data-theme="bleu"] .debug-light-row,
[data-theme="bleu"] .color-grid .debug-light-row,
[data-theme="bleu"] .debug-light-weather-row { color: rgba(180,215,255,0.82); }
[data-theme="bleu"] .debug-light-row output { color: rgba(240,250,255,0.96); }
[data-theme="bleu"] .debug-light-export #debugLightCopy,
[data-theme="bleu"] .debug-light-export #debugLightRedo,
[data-theme="bleu"] .debug-light-export #debugLightCompare {
  border: 1px solid rgba(145, 205, 255, 0.42);
  background: rgba(25, 56, 82, 0.78);
  color: rgba(230, 246, 255, 0.96);
}
[data-theme="bleu"] .debug-light-export #debugLightCopy:hover:not(:disabled),
[data-theme="bleu"] .debug-light-export #debugLightRedo:hover:not(:disabled),
[data-theme="bleu"] .debug-light-export #debugLightCompare:hover:not(:disabled) {
  background: rgba(38, 86, 124, 0.9);
  color: #ffffff;
}
[data-theme="bleu"] .debug-light-export #debugLightUndo,
[data-theme="bleu"] .debug-light-export #debugLightReset {
  border: 1px solid rgba(255, 120, 120, 0.46);
  background: rgba(80, 16, 20, 0.78);
  color: rgba(255, 235, 235, 0.96);
}
[data-theme="bleu"] .debug-light-export #debugLightUndo:hover:not(:disabled),
[data-theme="bleu"] .debug-light-export #debugLightReset:hover:not(:disabled) {
  background: rgba(120, 24, 30, 0.9);
  color: #ffffff;
}
[data-theme="bleu"] .debug-light-weather-btn {
  border: 1px solid rgba(145,205,255,0.42);
  background: rgba(25,56,82,0.78);
  color: rgba(230,246,255,0.96);
}
[data-theme="bleu"] .debug-light-weather-btn:hover:not(:disabled) {
  background: rgba(38,86,124,0.90);
  color: #ffffff;
}
[data-theme="bleu"] .debug-light-weather-stopall {
  border: 1px solid rgba(220,140,140,0.55);
  background: rgba(80,30,30,0.72);
  color: rgba(255,225,225,0.95);
}
[data-theme="bleu"] .debug-light-preset-btn {
  border: 1px solid rgba(145, 205, 255, 0.42);
  background: rgba(25, 56, 82, 0.78);
  color: rgba(230, 246, 255, 0.96);
}
[data-theme="bleu"] .debug-light-preset-btn .preset-label { color: rgba(230, 246, 255, 0.96); }
[data-theme="bleu"] .debug-light-preset-btn:hover {
  background: rgba(38, 86, 124, 0.9);
  border-color: rgba(145, 205, 255, 0.42);
  color: #ffffff;
}
[data-theme="bleu"] .debug-light-preset-btn:hover .preset-label { color: #ffffff; }
[data-theme="bleu"] .debug-light-preset-btn:active { background: rgba(20, 44, 66, 0.9); }
[data-theme="bleu"] .debug-light-presets-label { color: rgba(180,215,255,0.82); }
[data-theme="bleu"] .debug-light-main-title {
  color: rgba(230,246,255,0.96);
  border-bottom: 1px solid rgba(120,180,255,0.24);
}
[data-theme="bleu"] .debug-light-pix-head,
[data-theme="bleu"] .lut-section-head {
  background: rgba(0,0,0,0.45);
  border-left: 3px solid rgba(145,205,255,0.32);
}
[data-theme="bleu"] .debug-light-pix-head > span,
[data-theme="bleu"] .lut-section-head { color: rgba(180,215,255,0.82); }
[data-theme="bleu"] .lut-section-head--nested {
  color: rgba(212,236,255,0.92);
  background: rgba(0,0,0,0.30);
  border-left: 2px solid rgba(145,205,255,0.22);
}

/* ─── [data-theme="ancien"] — parchemin 9-slice sur .fps-counter/.debug-light-body/
   #kbdHintHud, même technique que #scorePanel/.missionsBox (§32). Padding
   retiré sur les cartes principales (pas de logo à réserver ici). Les boutons
   passent en "cachet de cire" (fond sombre uni + texte clair), même principe
   que .abandon-button/.new-game-button (css/highscore.css). ─── */
[data-theme="ancien"] .fps-counter {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  background: none;
  box-shadow: none;
  padding: 0;
  color: #332415;
  font-family: Georgia, "Times New Roman", serif;

  /* 2026-07-18 — CORRECTIF v2 (bug signalé : bords tronqués, image ET texte).
     .fps-counter est box-sizing:border-box + width:432px fixe (règle non
     thémée) — ce budget assumait une bordure fine (1px, thème bleu). En
     ancien la bordure passe à 50px (×2 = 100px) SANS agrandir la boîte :
     box-sizing:border-box grignote donc 100px de contenu en plus par rapport
     au thème bleu (déjà privé du padding 16px×2 retiré ci-dessus), écrasant
     les lignes du HUD FPS jusqu'à les faire déborder/tronquer via
     l'overflow:hidden interne (.fps-hud-body).
     Fix : box-sizing:content-box UNIQUEMENT ici — `width`/`max-width`/
     `max-height` 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.
     Coin haut-gauche inchangé (positionné par le flex parent, pas par
     top/left) — la boîte grandit seulement vers l'extérieur.

     2026-07-18 — CORRECTIF v3 (demande explicite : la marge négative doit
     avoir un effet visible) : overflow passe à visible ici (au lieu de
     hidden, hérité de la règle non thémée) — le clamp de hauteur + le clip
     du contenu trop long sont désormais portés 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 (une boîte ne coupe
     jamais sa propre bordure/marge).

     2026-07-18 — CORRECTIF v4 (bug signalé : l'ascenseur du HUD FPS déployé a
     disparu). Cause : en thème bleu, `.fps-counter` a `overflow:hidden` (règle
     non thémée, ligne ~45) — cette propriété fait DOUBLE fonction en flexbox :
     elle clippe visuellement, MAIS elle force aussi la "taille minimale
     automatique" de l'élément (flex item) à 0 au lieu de la taille de son
     contenu (spec CSS flexbox : min-size auto = 0 dès que overflow ≠ visible).
     En repassant overflow:visible ci-dessus (CORRECTIF v3), .fps-counter a
     RETROUVÉ son min-height:auto par défaut — en mode "FPS HUD plein hauteur"
     (.fps-hud-fullscreen, max-height:none, flex:1 1 auto), l'élément refuse
     alors de se réduire à la hauteur dispo de la colonne et grandit pour
     accueillir tout son contenu (mesuré : 1543px, largement hors écran), donc
     .fps-hud-body (le scroll interne) ne se retrouve jamais à l'étroit et n'a
     jamais besoin de scroller → ascenseur invisible car inutile, tout le
     contenu déborde silencieusement de l'écran à la place.
     Fix : min-height:0 explicite ici, qui reproduit l'effet "taille mini
     forcée à 0" de overflow:hidden SANS réintroduire le clip visuel (overflow
     reste visible pour le bleed du bord). */
  box-sizing: content-box;
  width: 380px;
  max-width: calc(100vw - 128px);
  /* 2026-08-01 — demande explicite : .debug-light-panel (parent, cf. plus
     haut) a été remonté de 65px pour l'écarter du cadre décoratif — ce
     panneau se déployant VERS LE HAUT depuis ce bandeau, la réserve doit
     grandir d'autant pour ne pas sortir de l'écran par le haut (bug
     signalé "HUD FPS sort de l'écran par le haut"). 172px → 237px. */
  max-height: calc(100vh - 237px);
  min-height: 0;
  overflow: visible;
}
[data-theme="ancien"] .fps-counter[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
[data-theme="ancien"] .fps-counter > .internal-parchment {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* 2026-07-18 — BUG TROUVÉ (vrai responsable des "bords tronqués") : la règle
     générale `[data-theme="ancien"] .internal-parchment { margin: -20px -25px
     -20px -25px; }` (css/themes/medieval.css) s'applique à TOUT élément
     .internal-parchment, y compris celui-ci — le simple fait de ne PAS
     redéclarer `margin` ici ne "remet pas à 0" (la cascade CSS s'applique
     PROPRIÉTÉ PAR PROPRIÉTÉ : une règle plus spécifique qui ne mentionne pas
     `margin` ne bat pas une règle moins spécifique qui, elle, le déclare).
     Résultat réel avant ce correctif : la marge négative de la règle générale
     s'appliquait quand même, tronquée par cet overflow:hidden FONCTIONNEL
     (clamp de hauteur + scroll interne de .fps-hud-body) — exactement le même
     bug que la prez (marge négative + overflow:hidden = contenu coupé).
     2026-07-18 — CORRECTIF v3 : .fps-counter 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 (une boîte ne coupe jamais sa bordure/
     marge, seulement le contenu débordant de ses enfants). Le bleed
     s'applique donc enfin normalement, comme .mission-card/.missionsBox. */
  margin: -20px -25px -20px -25px;
}
[data-theme="ancien"] .fps-hud-fps { color: #332415; }
[data-theme="ancien"] .fps-hud-fps > span:first-child { color: #4a3623; }
[data-theme="ancien"] .fps-hud-sep { border-top: 1px solid rgba(74, 54, 35, 0.22); }
[data-theme="ancien"] .fps-hud-row,
[data-theme="ancien"] .fps-hud-row-cat { color: #4a3623; }
[data-theme="ancien"] .fps-hud-row strong,
[data-theme="ancien"] .fps-hud-cat-count { color: #332415; }
[data-theme="ancien"] .fps-hud-eff-label { color: #4a3623; }
[data-theme="ancien"] .fps-hud-group-header {
  color: #332415;
  border-bottom: 1px solid rgba(74, 54, 35, 0.14);
}
[data-theme="ancien"] .fps-hud-row-total { background: rgba(0,0,0,0.06); }
/* Accents par catégorie (Draw calls/Triangles/Ombres) — retour utilisateur : le
   bleu clair pensé pour fond sombre (rgba(130,195,255,...)) devenait illisible
   sur le parchemin clair, notamment en mode "déployé" (.fps-hud-fullscreen).
   Teintes assombries/saturées équivalentes, même logique d'identité par
   catégorie mais lisibles sur fond clair. */
[data-theme="ancien"] .fps-hud-row-cat--heavy { background: rgba(139, 0, 0, 0.12); color: #6b2018; }
[data-theme="ancien"] .fps-hud-cat-dc { color: #8a6a2a; }
[data-theme="ancien"] .fps-hud-cat-tri { color: #1f4a6b; }
[data-theme="ancien"] .fps-hud-cat-tri-pct { color: #4a3623; }
[data-theme="ancien"] .fps-hud-cat-shadow { color: #5a3a7a; }

/* Croix de fermeture HUD FPS/EDA (2026-07-17) — même "cachet de cire" que les
   boutons d'export ancien (#debugLightCopy/Redo/Compare). */
[data-theme="ancien"] .fps-hud-close,
[data-theme="ancien"] .debug-light-close {
  border: none;
  background: #4a3623;
  color: #f0e6d0;
}
[data-theme="ancien"] .fps-hud-close:hover,
[data-theme="ancien"] .debug-light-close:hover {
  background: #5c4530;
}
/* 2026-07-18 — retour utilisateur : le bouton "Copier" (⧉) du HUD FPS restait
   bleu foncé (fond rgba(25,56,82,...) + bordure bleu clair, règle non thémée
   ligne ~71) en médiéval, présent aussi bien plié que déplié (fait partie du
   header, toujours rendu). Aucun override ancien n'existait pour lui,
   contrairement à .fps-hud-close juste au-dessus. Même traitement "cachet de
   cire" pour rester cohérent. */
[data-theme="ancien"] .fps-hud-copy {
  background: #4a3623;
  border: none;
  color: #f0e6d0;
}
[data-theme="ancien"] .fps-hud-copy:hover {
  background: #5c4530;
  color: #f0e6d0;
}
/* 2026-07-18 — retour utilisateur : l'ascenseur du HUD FPS restait bleu clair
   en médiéval malgré le fix générique sur .internal-parchment (thème/medieval.css).
   Cause : .fps-hud-body est un enfant DISTINCT de .internal-parchment (pas le
   même élément) — c'est LUI qui scroll réellement (overflow-y:auto, règle non
   thémée ligne ~49), pas .internal-parchment (qui ne fait que clipper/bleeder
   ici). Le fix générique ne pouvait donc pas l'atteindre. Override dédié,
   même teinte brun/parchemin que partout ailleurs en ancien. */
[data-theme="ancien"] .fps-hud-body::-webkit-scrollbar-thumb { background: rgba(74, 54, 35, 0.4); }
[data-theme="ancien"] .fps-hud-body { scrollbar-color: rgba(74, 54, 35, 0.4) transparent; }
/* 2026-07-18 — retour utilisateur : la croix EDA (.debug-light-close) semblait
   "trop basse". Cause : top:10px/right:10px (règle de base, ligne ~875) sont
   ancrés sur .debug-light-body — qui est le CONTENU (à l'intérieur du bord de
   50px ajouté en ancien), pas le bord visuel du parchemin. En thème bleu (bord
   de 1px), 10px tombait quasiment au coin visuel du panneau ; en ancien, ce
   même 10px tombe ~60px sous le bord extérieur réel, bien en-dessous du titre
   "ÉDITEUR..." (qui, lui, bénéficie du bleed -20px de .internal-parchment).
   Fix : décalage négatif pour ramener la croix au même niveau visuel que le
   bleed du titre, dans la bande du bord plutôt qu'au milieu du contenu. */
[data-theme="ancien"] .debug-light-close {
  top: -20px;
  right: -20px;
}

/* Mini HUD replay (.replay-panel) — parchemin 9-slice, même technique que
   #kbdHintHud (§32). Jaune flash de .replay-progress assombri : illisible sur
   fond clair (même famille de problème que les accents bleus FPS). */
[data-theme="ancien"] .replay-panel {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  background: none;
  box-shadow: none;
  color: #332415;
  font-family: Georgia, "Times New Roman", serif;

  /* 2026-07-18 CORRECTIF #1 (bug signalé : marge négative sans effet visible) —
     padding:10px 16px hérité de la règle non thémée n'avait jamais été remis
     à 0 ici, contrairement à TOUS les autres parchemins (#scorePanel/
     .fps-counter/.help-panel/.debug-light-body/.missionsBox/.mode-panel...).
     La marge négative de .internal-parchment devait donc d'abord "manger" ce
     padding avant de pouvoir bleeder dans la bordure — net effet ~10px au
     lieu de 20-25px, quasi invisible.

     2026-07-18 CORRECTIF #2 (le vrai bug, trouvé via mesures getBoundingClientRect
     précises en live) — display:block ici cassait le calcul de hauteur auto du
     parent : .internal-parchment (l'unique enfant) a une marge -20px en haut ET
     en bas simultanément. En layout bloc normal, la hauteur auto du parent =
     hauteur de la "margin box" de l'enfant, qui devient ici hauteur_reelle - 20 - 20,
     donc quasi nulle/négative → le panneau se retrouve avec une hauteur de contenu
     ridicule et l'enfant se retrouve décalé n'importe où (mesuré : 23px plus bas
     que prévu au lieu de 20px plus haut). En display:flex (comme la règle non
     thémée bleu, jamais retirée par erreur), un enfant flex avec marge négative
     top/bottom est positionné et dimensionné correctement dans l'axe croisé —
     c'est ce que #scorePanel/.fps-counter/etc utilisent déjà (flex-direction:column
     + flex:1 1 auto). Donc : ne JAMAIS repasser .replay-panel en display:block.

     2026-07-18 CORRECTIF #3 (mesures live précises après le #2 : bleed horizontal
     parfait -25/-25px, mais bleed vertical seulement ~5.5px au lieu de 20px) —
     cause : .replay-panel a DEUX enfants flex (le pseudo-élément ::before "REPLAY"
     ET .internal-parchment), pas un seul. Avec align-items:center, la hauteur de
     la ligne flex (23px) est dictée par ::before (texte, pas de marge négative),
     et .internal-parchment (34px de haut, marge -20/-20) se retrouve centré dans
     ces 23px. Preuve mathématique : avec des marges symétriques haut/bas, le
     centrage flex est un no-op sur la marge — seul (hauteur_ligne - hauteur_propre)/2
     compte, la marge négative n'a AUCUN effet sur la position finale en mode
     center. Fix : align-items:stretch (au lieu de center) sur .replay-panel.
     En stretch, un enfant à hauteur auto (.internal-parchment) est étiré pour
     remplir (hauteur_ligne - marges), donc hauteur_utilisée = 23 - (-20) - (-20)
     = 63px, positionné à content_top + marge_haute(-20) → bleed haut = -20 pile,
     et bas = -20+63 = +43 par rapport à content_top, soit +20 au-delà de
     content_bottom(23) → bleed bas = +20 pile. Symétrique et exact des deux
     côtés, contrairement à center. Le pseudo ::before (déjà à sa propre hauteur
     23 = hauteur de ligne) n'est pas affecté par le stretch.

     2026-07-18 CORRECTIF #4 (retour utilisateur : "trop de marge en haut et en
     bas" + chevauchement du texte "REPLAY" avec "N/5") — deux bugs distincts :
     (a) bordure 50px + bleed ±20/±25 semblait disproportionné sur ce petit
     bandeau (une seule rangée d'icônes ~34px) → tentative erronée : réduire la
     bordure à 25px. REJETÉ par l'utilisateur (2026-07-18, 2e retour) : ça casse
     l'harmonie du 9-slice avec le reste de l'UI (même texture manuscrit-1.png,
     même échelle de bordure partout). Bordure remise à 50px, comme tous les
     autres parchemins — la bonne solution est d'AUGMENTER encore la marge
     négative (bleed plus profond dans la bordure), pas de réduire la bordure
     elle-même (voir marge ci-dessous, ±35/±40 au lieu de ±20).
     (b) chevauchement horizontal : la marge -25px à GAUCHE sur
     .internal-parchment supposait (à tort) que c'est le premier/seul enfant du
     bandeau collé au bord gauche. Mais .replay-panel a un enfant AVANT lui : le
     pseudo ::before "REPLAY" (~47px de large). La marge négative gauche faisait
     donc reculer .internal-parchment SOUS la fin du texte "REPLAY" au lieu de
     bleeder dans une bordure (qui n'est pas là, à gauche il y a le label, pas
     le bord du panneau). Fix (conservé, non concerné par le rejet ci-dessus) :
     marge gauche redevient un espacement POSITIF normal (14px, même valeur que
     le gap interne des icônes), seuls haut/droite/bas gardent une marge
     négative (bleed réel vers la bordure, désormais plus profond). */
  padding: 0;
  display: flex;
  align-items: stretch;
}
[data-theme="ancien"] .replay-panel[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
[data-theme="ancien"] .replay-panel > .internal-parchment {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -40px -25px -40px 14px;
}
[data-theme="ancien"] .replay-panel::before { color: #4a3623; }
[data-theme="ancien"] .replay-progress { color: #8a6a2a; }
[data-theme="ancien"] #kbdHintHud {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  background: none;
  box-shadow: none;
  padding: 0 6px;
  color: #332415;
  font-family: Georgia, "Times New Roman", serif;
}
[data-theme="ancien"] #kbdHintHud[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
/* #kbdHintHud n'est ni flex/grid ni overflow:hidden sur lui-même (simple texte) —
   wrapper sans piège, cf. .missionsBox/.mode-panel. Actuellement masqué
   (display:none, cf. css/eda.css plus haut) mais gardé cohérent pour un
   éventuel retour futur. */
[data-theme="ancien"] #kbdHintHud > .internal-parchment { margin: -20px -25px -20px -25px; }

[data-theme="ancien"] .debug-light-body {
  border: 50px solid transparent;
  border-image-source: url("../images/manuscrit-1.png");
  border-image-slice: 50 fill;
  border-image-repeat: repeat;
  background: none;
  box-shadow: none;
  padding: 0;
  color: #332415;
  font-family: Georgia, "Times New Roman", serif;

  /* 2026-07-18 — CORRECTIF v2 (bug signalé : panneau EDA tronqué sur les
     4 bords). La v1 (retirer height/max-height/overflow de .debug-light-body
     et les reporter tels quels sur .internal-parchment) empêchait le double-
     comptage de bordure, mais ne réglait pas le vrai problème : .debug-light-
     body reste box-sizing:border-box + width/height fixes (règle non
     thémée) prévues pour une bordure fine (1px, thème bleu) — passer à 50px
     (×2=100px) sans agrandir la boîte grignote 100px de contenu utile en
     trop, écrasant les colonnes internes jusqu'à troncature (overflow:hidden
     des colonnes/onglets).
     Fix définitif : box-sizing:content-box UNIQUEMENT ici — `width`/`height`/
     `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. Le panneau est ancré par le bas via le flex parent
     (.debug-light-panel, align-items:flex-end) : la hauteur totale
     (contenu + 100px de bordure) grandit vers le HAUT, 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;
  width: min(560px, calc(100vw - 200px));
  /* 2026-08-01 — demande explicite : "EDA pas assez de marge en haut, trop en
     bas". .debug-light-body n'a pas de `top` propre — son sommet est
     purement déduit de sa propre hauteur totale (contenu + bordure 100px),
     le panneau parent (.debug-light-panel, bottom:69px ancien) étant
     "wrap-content" et ancré par le bas via align-items:flex-end. Donc réduire
     la réserve ci-dessous AUGMENTE mécaniquement la marge du haut sans
     toucher au bas (déjà correct à 69px) : top résultant = 100vh - bottom(69)
     - hauteur_totale. Cible : top ≈ 79px (cohérent avec le reste du cadre,
     65px) → hauteur_totale = 100vh - 69 - 79 = 100vh - 148px → contenu
     (hauteur_totale - bordure 100px) = 100vh - 248px. 225px → 248px.
     ERRATUM (même jour) : marge cadre 65px → 52px. bottom panel = 4+52=56 ;
     top cible = 14+52=66 → hauteur_totale = 100vh-56-66 = 100vh-122px →
     contenu = 100vh-222px. */
  height: calc(100vh - 222px);
  max-height: calc(100vh - 222px);
  overflow: visible;
}
[data-theme="ancien"] .debug-light-body[data-parchment-variant="2"] { border-image-source: url("../images/manuscrit-2.png"); }
[data-theme="ancien"] .debug-light-body > .internal-parchment {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* 2026-07-20 — REVERT : le passage à overflow-y:auto (pour rendre TOUT le
     panneau scrollable, bandeau ambiances compris) a introduit une régression
     signalée : le bandeau ambiances doit rester incompressible et intégralement
     visible. Retour à overflow:hidden — seul .debug-light-columns doit scroller. */
  overflow: hidden;
  /* 2026-07-18 — même bug que .fps-counter/.help-panel ci-dessus : 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 (la cascade CSS est par PROPRIÉTÉ, pas par
     bloc de règle) — tronqué par cet overflow:hidden fonctionnel (scroll
     2026-07-18 — CORRECTIF v3 : .debug-light-body 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. */
  margin: -20px -25px -20px -25px;
}
/* 2026-07-19 (corrigé le 2026-07-19, image remplacée le 2026-07-19) — boutons
   du bandeau topbar 📷/🖼️/🎬/FPS/EDA (#snapshotBtn, #galleryBtn, #replayBtn,
   #fpsHudToggle, #debugLightToggle) : même border-image 3-slice que les CTA
   prez/menus pre-game/HUD score (images/button2.png, 160x42). Ciblage par id
   plutôt que .debug-light-toggle générique : #gameLangSelect/#gameThemeSelect
   partagent cette classe mais sont des <select>, hors périmètre de cette
   demande (pas des boutons CTA). État actif (FPS/EDA activés, cf.
   .debug-light-toggle--fps-active/--lut-active) rendu via filter: brightness
   au lieu d'un changement de fond (le fond vient de l'image). Cap 8px (mesure
   réelle du rayon de coin sur button2.png). height: 42px FORCÉ (hauteur
   native de l'image, cf. css/themes/medieval.css §32).
   2026-08-01 — demande explicite : button2.png → button3.png (156x38, cf.
   css/themes/medieval.css §32 pour l'explication complète). Cap 8px → 6px,
   height 42px → 38px. */
[data-theme="ancien"] #snapshotBtn,
[data-theme="ancien"] #galleryBtn,
[data-theme="ancien"] #replayBtn,
[data-theme="ancien"] #ttsMuteBtn,
[data-theme="ancien"] #soundMuteBtn,
[data-theme="ancien"] #fpsHudToggle,
[data-theme="ancien"] #debugLightToggle {
  background: none;
  border-style: solid;
  border-width: 0 6px;
  border-image-source: url("../images/button3.png");
  border-image-slice: 0 6 fill;
  border-image-width: 0 6px;
  border-image-repeat: stretch;
  border-radius: 0;
  height: 38px;
  box-sizing: border-box;
  color: #f5e2b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: filter 0.2s;
  /* 2026-07-20 — .debug-light-toggle (base, non scopée par thème) impose
     font-weight:800/letter-spacing:0.08em et ne fixe ni font-family ni
     font-size (fallback police système ~16px). Aligné ici, en thème médiéval
     uniquement, sur la typo de référence des boutons "Abandonner"/"Nouvelle
     partie" (.abandon-button/.new-game-button, css/highscore.css) : monospace
     11px / 900 / 0.06em, demandé explicitement pour uniformiser tous les
     boutons custom du thème médiéval (pre-game + in-game). */
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
[data-theme="ancien"] #snapshotBtn:hover,
[data-theme="ancien"] #galleryBtn:hover,
[data-theme="ancien"] #replayBtn:hover,
[data-theme="ancien"] #ttsMuteBtn:hover,
[data-theme="ancien"] #soundMuteBtn:hover,
[data-theme="ancien"] #fpsHudToggle:hover,
[data-theme="ancien"] #debugLightToggle:hover { filter: brightness(1.12); }
[data-theme="ancien"] #fpsHudToggle.debug-light-toggle--fps-active,
[data-theme="ancien"] #debugLightToggle.debug-light-toggle--lut-active { filter: brightness(1.25); }
[data-theme="ancien"] #fpsHudToggle .btn-key,
[data-theme="ancien"] #debugLightToggle .btn-key { color: inherit; }

/* 2026-07-20 — #gameLangSelect/#gameThemeSelect étaient restés hors périmètre
   du passage ci-dessus (commentaire du 2026-07-19 : "pas des boutons CTA"),
   d'où le bug signalé : ces 2 <select> restaient figés en chrome bleu sidéral
   (fond dégradé bleu-gris + flèche dorée sur fond bleu) même en thème
   médiéval, alors qu'ils sont dans la même rangée que les boutons déjà
   convertis. Même border-image 3-slice (button2.png) que les boutons voisins
   ci-dessus, pour cohérence visuelle dans le bandeau. Spécificité : le
   sélecteur générique .debug-light-lang-select pose déjà un background-image
   à 2 couches (dégradé bleu + flèche SVG) — on le réécrit ici en 1 seule
   couche (flèche seule, fond transparent, le parchemin vient du border-image
   fill). Flèche retintée en marron foncé (#4a3623, même teinte que le texte
   du thème ancien) pour rester lisible sur fond clair, au lieu du doré prévu
   pour un fond bleu-gris sombre. */
[data-theme="ancien"] #gameLangSelect,
[data-theme="ancien"] #gameThemeSelect {
  background-color: transparent;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0 L5 6 L10 0 Z' fill='%234a3623'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
  border-style: solid;
  border-width: 0 6px;
  border-image-source: url("../images/button3.png");
  border-image-slice: 0 6 fill;
  border-image-width: 0 6px;
  border-image-repeat: stretch;
  border-radius: 0;
  height: 38px;
  box-sizing: border-box;
  color: #f5e2b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: filter 0.2s;
  /* 2026-07-20 — même normalisation typo que les boutons voisins ci-dessus
     (référence .abandon-button/.new-game-button) : ces <select> héritent
     sinon de .debug-light-toggle (800/0.08em, pas de font-family/size). */
  font-family: monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
}
[data-theme="ancien"] #gameLangSelect:hover,
[data-theme="ancien"] #gameThemeSelect:hover { filter: brightness(1.12); }
[data-theme="ancien"] #gameLangSelect option,
[data-theme="ancien"] #gameThemeSelect option {
  background: #e4cf98;
  color: #332415;
  font-weight: 700;
}

/* 2026-07-19 (image remplacée le 2026-07-19) — boutons internes du panneau
   EDA (onglets LUT/Cinématique/Environnement, presets ambiances, boutons
   météo, export Copier/Undo/Redo/Reset/Comparer) : manquaient au premier
   passage (seul le bandeau topbar #snapshotBtn/#galleryBtn/#replayBtn/
   #fpsHudToggle/#debugLightToggle avait été converti). Même traitement
   border-image 3-slice que partout ailleurs (images/button2.png, 160x42, cap
   8px, height 42px FORCÉ — cf. css/themes/medieval.css §32 pour l'explication
   complète). Les couleurs de fond différenciées par rôle (brun standard vs
   rouge pour reset/stopall) disparaissent forcément au profit d'une image
   bouton unique, comme sur tous les autres boutons médiévaux déjà convertis —
   l'état actif/hover reste rendu via filter. */
[data-theme="ancien"] .debug-light-tab-btn,
[data-theme="ancien"] .debug-light-export #debugLightCopy,
[data-theme="ancien"] .debug-light-export #debugLightRedo,
[data-theme="ancien"] .debug-light-export #debugLightCompare,
[data-theme="ancien"] .debug-light-export #debugLightUndo,
[data-theme="ancien"] .debug-light-export #debugLightReset,
[data-theme="ancien"] .debug-light-weather-btn,
[data-theme="ancien"] .debug-light-weather-stopall,
[data-theme="ancien"] .debug-light-preset-btn {
  background: none;
  border-style: solid;
  border-width: 0 6px;
  border-image-source: url("../images/button3.png");
  border-image-slice: 0 6 fill;
  border-image-width: 0 6px;
  border-image-repeat: stretch;
  border-radius: 0;
  height: 38px;
  box-sizing: border-box;
  color: #f5e2b8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: filter 0.2s;
}
[data-theme="ancien"] .debug-light-tab-btn:hover,
[data-theme="ancien"] .debug-light-export #debugLightCopy:hover:not(:disabled),
[data-theme="ancien"] .debug-light-export #debugLightRedo:hover:not(:disabled),
[data-theme="ancien"] .debug-light-export #debugLightCompare:hover:not(:disabled),
[data-theme="ancien"] .debug-light-export #debugLightUndo:hover:not(:disabled),
[data-theme="ancien"] .debug-light-export #debugLightReset:hover:not(:disabled),
[data-theme="ancien"] .debug-light-weather-btn:hover:not(:disabled),
[data-theme="ancien"] .debug-light-preset-btn:hover {
  filter: brightness(1.12);
}
[data-theme="ancien"] .debug-light-tab-btn--active,
[data-theme="ancien"] .debug-light-preset-btn:active {
  filter: brightness(1.25);
}
/* Fix 2026-07-19 — .debug-light-preset-btn/.debug-light-weather-btn/
   .debug-light-weather-stopall héritent globalement (lignes ~1182/~1216/~1301,
   non scopées par thème) d'un box-shadow: 0 2px 6px rgba(0,0,0,0.30) et d'un
   hover transform: translateY(-1px), pensés pour l'ancien fond plat "cachet
   de cire". Avec border-image, ce box-shadow rectangulaire dépasse visiblement
   des coins arrondis de l'image bouton (halo/fond clair aux 4 coins signalé
   par l'utilisateur — même bug que les presets ambiances, reproduit ici sur
   les 5 boutons "recharger" et le bouton "Tout arrêter" de la rubrique 8.
   Météo), et le translateY décale le bouton par rapport à ses voisins.
   Neutralisés ici, scopé au thème ancien uniquement — les autres boutons
   médiévaux déjà convertis n'ont jamais eu ces 2 propriétés. */
[data-theme="ancien"] .debug-light-preset-btn,
[data-theme="ancien"] .debug-light-weather-btn,
[data-theme="ancien"] .debug-light-weather-stopall { box-shadow: none; }
/* 2026-07-20 — .debug-light-weather-stopall (base, non scopée) est le seul
   bouton médiéval déjà en monospace/11px/900 à diverger encore d'un cran :
   letter-spacing 0.08em au lieu de 0.06em (référence .abandon-button/
   .new-game-button). Corrigé ici en thème médiéval uniquement. */
[data-theme="ancien"] .debug-light-weather-stopall { letter-spacing: 0.06em; }
[data-theme="ancien"] .debug-light-preset-btn:hover,
[data-theme="ancien"] .debug-light-weather-btn:hover,
[data-theme="ancien"] .debug-light-weather-stopall:hover { transform: none; }
[data-theme="ancien"] .debug-light-preset-btn .preset-label { color: #f5e2b8; }
[data-theme="ancien"] .debug-light-row,
[data-theme="ancien"] .color-grid .debug-light-row,
[data-theme="ancien"] .debug-light-weather-row { color: #4a3623; }
[data-theme="ancien"] .debug-light-row output { color: #332415; }
[data-theme="ancien"] .debug-light-presets-label { color: #4a3623; }
[data-theme="ancien"] .debug-light-main-title {
  color: #332415;
  border-bottom: 1px solid rgba(74, 54, 35, 0.22);
  /* 2026-08-03 — demande explicite : typo Enchanted-Land, 14px (>12px),
     hérite déjà de Georgia via .debug-light-body — ne touche pas les titres
     de rubrique voisins (.debug-light-pix-head/.lut-section-head, exclus). */
  font-family: 'EnchantedLand', Georgia, "Times New Roman", serif;
  /* demande explicite (même round) : plus de MAJUSCULES (override du
     text-transform:uppercase de la règle de base plus haut dans ce fichier),
     seule la 1ère lettre capitalisée — cf. .title (css/themes/medieval.css). */
  text-transform: lowercase;
  /* 2026-08-08 — demande explicite : 14px (hérité de la règle de base non
     thémée, .debug-light-main-title plus haut dans ce fichier) → 15px ICI,
     en médiéval UNIQUEMENT (le thème Bleu garde 14px via la règle non
     thémée). Letter-spacing resserré (-0.07em) tenté puis annulé sur
     demande explicite ("moche et illisible") — repassé à "normal". */
  letter-spacing: normal;
  font-size: 15px;
  /* 2026-08-03 (round suivant) — jamais de gras sur Enchanted-Land : reset
     du font-weight:900 hérité de la règle de base non thémée (pensée pour
     l'ancienne typo condensée en capitales). */
  font-weight: 400;
}
[data-theme="ancien"] .debug-light-main-title::first-letter {
  text-transform: uppercase;
}
/* Titres de rubrique (CINÉMA/PIX/EAU/VENT/etc.) — retour utilisateur : encore
   bleutés en thème ancien malgré le fond sombre partagé. Le badge sombre reste
   commun (déjà lisible sur parchemin), mais le texte/liseré passe en teinte
   chaude cachet-de-cire au lieu du bleu glacé du thème bleu. */
[data-theme="ancien"] .debug-light-pix-head,
[data-theme="ancien"] .lut-section-head {
  background: rgba(0,0,0,0.55);
  border-left: 3px solid #8a6a2a;
}
[data-theme="ancien"] .debug-light-pix-head > span,
[data-theme="ancien"] .lut-section-head { color: #f0e6d0; }
[data-theme="ancien"] .lut-section-head--nested {
  color: #e8dcc0;
  background: rgba(0,0,0,0.40);
  border-left: 2px solid #6b4e10;
}
/* 2026-08-03 — demande explicite : ces titres héritaient du text-shadow clair
   (rgba(255,250,235,...)) posé sur body pour les textes Enchanted-Land de la
   prez — sur le fond sombre (rgba(0,0,0,0.55/0.40)) de ces badges, ce halo
   clair produisait l'effet inverse de son intention (illisible au lieu de
   lisible). Retiré explicitement, ces titres ne sont de toute façon jamais
   passés en Enchanted-Land (règle "jamais sur les titres"). */
[data-theme="ancien"] .debug-light-pix-head > span,
[data-theme="ancien"] .lut-section-head,
[data-theme="ancien"] .lut-section-head--nested {
  text-shadow: none;
}

/* 2026-07-20 — bug signalé : en thème médiéval, les sliders des rubriques
   (.debug-light-row) ET l'ascenseur du panneau (.debug-light-tab-panels)
   restaient bleutés (couleurs codées en dur du thème "Bleu sidéral" à la
   racine — cf. .debug-light-row input[type="range"]/.pix-control, communes
   aux 2 thèmes faute de redéclaration ici). Passage à la teinte chaude
   cachet-de-cire (#8a6a2a, même accent que les titres de rubrique juste
   au-dessus) au lieu du bleu #78aaff/rgba(120,170/180,255,...). */
[data-theme="ancien"] .pix-control input[type="range"],
[data-theme="ancien"] .debug-light-row input[type="range"] {
  background: rgba(138,106,42,0.28);
}
[data-theme="ancien"] .pix-control input[type="range"]::-webkit-slider-thumb,
[data-theme="ancien"] .debug-light-row input[type="range"]::-webkit-slider-thumb {
  background: #f0e0b8;
  box-shadow: 0 0 0 2px rgba(138,106,42,0.45), 0 1px 4px rgba(0,0,0,0.45);
}
[data-theme="ancien"] .pix-control input[type="range"]::-webkit-slider-thumb:hover,
[data-theme="ancien"] .debug-light-row input[type="range"]::-webkit-slider-thumb:hover {
  background: #fff8e6;
  box-shadow: 0 0 0 3px rgba(138,106,42,0.55), 0 1px 6px rgba(0,0,0,0.50);
}
[data-theme="ancien"] .pix-control input[type="range"]::-moz-range-thumb,
[data-theme="ancien"] .debug-light-row input[type="range"]::-moz-range-thumb {
  background: #f0e0b8;
  box-shadow: 0 0 0 2px rgba(138,106,42,0.45), 0 1px 4px rgba(0,0,0,0.45);
}
[data-theme="ancien"] .pix-control input[type="range"]::-moz-range-track,
[data-theme="ancien"] .debug-light-row input[type="range"]::-moz-range-track {
  background: rgba(138,106,42,0.28);
}
[data-theme="ancien"] .debug-light-tab-panels {
  scrollbar-color: rgba(138,106,42,0.45) transparent;
}
[data-theme="ancien"] .debug-light-tab-panels::-webkit-scrollbar-thumb {
  background: rgba(138,106,42,0.45);
}