:root {
    --bg: #14141c; --fg: #f0f0f5; --accent: #ffb454;
    --hero: #5ab0ff; --enemy: #ff6b6b; --ki: #b48cff;
    --panel: #20202c; --ok: #6bd98a;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--fg);
    font-family: system-ui, -apple-system, sans-serif; min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; padding: 1rem; }
  h1 { font-size: 1.3rem; margin: 0.3rem 0; touch-action: manipulation; }   /* cinq touchers rapides sur le titre (commande secrète, js/triche.js) : pas de zoom au double toucher */
  .sub { color: #9a9ab0; font-size: 0.85rem; margin-bottom: 1rem; text-align:center;}
  button.big { font-size: 1.4rem; padding: 1rem 2rem; margin: 1rem 0;
    background: var(--accent); color: #14141c; border: none; border-radius: 12px;
    cursor: pointer; font-weight: bold; }
  button.big:focus { outline: 4px solid #fff; }
  .menu { max-width: 640px; width: 100%; }
  fieldset { border: 2px solid #3a3a4a; border-radius: 10px; margin: 1rem 0; padding: 0.8rem 1rem; }
  legend { padding: 0 0.5rem; font-weight: bold; color: var(--accent); }
  details.settings-section { margin: 1rem 0; }
  details.settings-section > summary { cursor: pointer; font-weight: bold; color: var(--accent);
    font-size: 1.05rem; padding: 0.6rem 0.8rem; background: var(--panel); border: 2px solid #3a3a4a; border-radius: 10px; }
  details.settings-section[open] > summary { border-radius: 10px 10px 0 0; border-bottom: none; }
  details.settings-section > summary:focus { outline: 3px solid #fff; }
  details.settings-section fieldset { margin-top: 0; border-radius: 0 0 10px 10px; }
  .opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 1rem; }
  /* ===== AUCUNE OPTION PLUS LARGE QUE L'ÉCRAN (relecture adversariale du 02/10/2026) =====
     Les groupes de radios sont des <fieldset class="opt"> : en flex, leurs choix se mettaient EN LIGNE, et un fieldset prend par défaut
     la largeur de son contenu (min-inline-size: min-content) : 2905 px de page à 390 px de large, et des options hors écran sur PC.
     Un groupe empile ses choix ; tout fieldset et toute ligne d'option tiennent dans la largeur et reviennent à la ligne ; rien n'est rogné. */
  fieldset { min-width: 0; min-inline-size: 0; max-width: 100%; }
  fieldset.opt { display: block; }
  .opt { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .opt > input:not([type=checkbox]):not([type=radio]) { max-width: 100%; }
  /* Un groupe de radios en <div class="opt" role="radiogroup"> (filtres de l'écran des caractéristiques, 10/10/2026) : ses choix reviennent à la ligne
     au lieu de pousser la page à 3391 px ; chaque choix garde sa largeur naturelle, jamais plus large que l'écran. Rien ne change dans le DOM ni à l'écoute. */
  .opt[role="radiogroup"] { flex-wrap: wrap; }
  .opt[role="radiogroup"] > label { max-width: 100%; }
  /* ===== [hidden] DOIT VRAIMENT CACHER (Med, 14/09/2026) =====
     Defaut trouve en cherchant pourquoi Med entendait encore des reglages « masques » : la regle
     du navigateur pour [hidden] est display:none, mais elle a la specificite la plus faible qui
     soit -- la classe .opt ci-dessus (display:flex) la bat sans meme la croiser. Les TREIZE labels
     marques hidden dans index.html etaient donc affiches, focusables, et lus au lecteur d'ecran
     comme les autres : masquer une option ne masquait rien du tout. Regle globale et !important
     pour qu'aucune classe future ne repasse devant (aucun code JS du projet ne pose ni ne retire
     l'attribut hidden -- verifie par grep -- donc rien ne depend de l'ancien comportement). */
  [hidden] { display: none !important; }
  .opt input { width: 22px; height: 22px; }
  .opt:focus-within { outline: 2px solid var(--accent); border-radius: 6px; }
  .bars { display: flex; gap: 2rem; width: 100%; max-width: 640px; margin-bottom: 1rem; }
  .fighter { flex: 1; }
  .fighter h2 { font-size: 1rem; margin: 0 0 0.3rem; }
  .bar-wrap { background: #000; border-radius: 8px; overflow: hidden; height: 22px; margin-bottom: 0.4rem; position: relative; }
  .bar-fill { height: 100%; transition: width 0.15s; }
  .hp .bar-fill { background: var(--hero); }
  .enemy-hp .bar-fill { background: var(--enemy); }
  .ki .bar-fill { background: var(--ki); }
  .bar-label { position: absolute; left: 8px; top: 2px; font-size: 0.75rem; font-weight: bold; text-shadow: 0 0 3px #000; }
  #state-display { font-size: 1.5rem; font-weight: bold; text-align: center; min-height: 2.5rem; margin: 1rem 0; color: var(--accent); }
  #log { width: 100%; max-width: 640px; height: 120px; overflow-y: auto; background: var(--panel); border-radius: 8px; padding: 0.6rem; font-size: 0.85rem; line-height: 1.5; }
  #log p { margin: 0 0 0.2rem; }
  .cross { display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px); gap: 6px; margin: 1.2rem 0; }
  .key { background: var(--panel); border: 2px solid #3a3a4a; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: bold; text-align: center; }
  .key.up { grid-column: 2; grid-row: 1; } .key.left { grid-column: 1; grid-row: 2; }
  .key.center { grid-column: 2; grid-row: 2; } .key.right { grid-column: 3; grid-row: 2; }
  .key.lit { background: var(--accent); color: #14141c; border-color: #fff; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .help { max-width: 640px; font-size: 0.85rem; color: #9a9ab0; line-height: 1.6; }
  .help code { background: #2a2a38; padding: 1px 6px; border-radius: 4px; color: var(--fg); }

/* ===== Mode Arcade (23/07/2026) : masque tout le menu sauf les actions arcade ===== */
#arcade-actions{ display:none; }
#menu.arcade-mode > *:not(#arcade-actions){ display:none !important; }
#menu.arcade-mode > #arcade-actions{ display:block !important; }

/* La version du jeu, sous le titre. Discrete a l'oeil, entiere pour le lecteur d'ecran :
   pas de display:none, pas de aria-hidden -- ce qui est dit par F8 doit rester LISIBLE.
   (chantier du 09/08/2026) */
.version { margin: 0 0 .6rem; font-size: .85rem; opacity: .75; }

/* Étoiles de menace (17/09/2026) : visuelles seulement, texte alternatif vide, jamais lues. */
.etoiles-menace { margin-left: .35em; color: var(--accent); letter-spacing: .05em; white-space: nowrap; }
.etoiles-menace[data-etoiles="1"]::after { content: "★☆☆☆☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="2"]::after { content: "★★☆☆☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="3"]::after { content: "★★★☆☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="4"]::after { content: "★★★★☆☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="5"]::after { content: "★★★★★☆☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="6"]::after { content: "★★★★★★☆☆☆☆" / ""; }
.etoiles-menace[data-etoiles="7"]::after { content: "★★★★★★★☆☆☆" / ""; }
.etoiles-menace[data-etoiles="8"]::after { content: "★★★★★★★★☆☆" / ""; }
.etoiles-menace[data-etoiles="9"]::after { content: "★★★★★★★★★☆" / ""; }
.etoiles-menace[data-etoiles="10"]::after { content: "★★★★★★★★★★" / ""; }

/* ===== MODE RPG (lot 2, 24/09/2026) : terrain en rangees, de affiche en gros ===== */
#rpg-zone .rpg-rangee{display:flex;flex-wrap:wrap;gap:.4em;margin:.3em 0;padding:.3em;border:1px solid #555;border-radius:.4em}
#rpg-zone .rpg-rangee button{flex:1 1 12em}
#rpg-zone .rpg-inerte{opacity:.65}
#rpg-zone .rpg-de{font-size:4em;font-weight:bold;text-align:center;margin:.2em 0}
#rpg-zone .rpg-ligne{padding:.3em .5em;margin:.2em 0}
/* Audit aventure D17 (08/10/2026) : le bouton grisé (aria-disabled) est atténué, et la ligne qui a le focus a son anneau, même sans le mode images. */
#rpg-zone [aria-disabled="true"]{opacity:.65}
#rpg-zone .rpg-ligne:focus{outline:3px solid #fff;outline-offset:1px}
/* Conseil didactique des aventures (30/09/2026) : une autre couleur que le récit, et un liseré pour le repérer sans la couleur seule. */
#rpg-zone .rpg-ligne.rpg-conseil{color:#ffe08a;border-left:4px solid #ffb703;padding-left:.7em}

/* MENU DE RÉACTION (Med, 26/09/2026, soir 5, js/tactique.js) : la pause réduite aux actions de la phase et à Reprendre. */
body.menu-reaction #ecran-pause > *:not(#pause-titre):not(#pause-actions-phase):not(#pause-reprendre-btn){ display:none !important; }
/* MENU D'ACTIONS DU MODE RPG EN COLONNES (Med, 26/09/2026, soir 5) : deux colonnes côte à côte, une seule sur petit écran. */
#rpg-zone .rpg-colonnes{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
@media (max-width:600px){ #rpg-zone .rpg-colonnes{ grid-template-columns:1fr; } }
#rpg-zone .rpg-colonne{ display:flex; flex-direction:column; gap:0.25rem; }
/* TACTILE SANS CLAVIER (Med, 01/10/2026) : fiches et explications joignables sans les touches i / X. Cachés sur ordinateur ; js/a11y-plateforme.js pose « tactile-a11y » sur <html>. */
.fiche-tactile{ display:none; }
.tactile-a11y .fiche-tactile{ display:block; }
.tactile-a11y button.fiche-tactile{ display:inline-block; }
.tactile-a11y label + button.fiche-tactile{ margin-right:.9rem; }

/* EXPLICATIONS DISTINCTES (Med, 08/10/2026) : les fenêtres d'explication (aide F1, définitions, explication d'un bloc, d'une action, d'un don) et les paragraphes « Explication : » du mode smartphone
   ont leur propre couleur et une police à empattements, pour ne pas se confondre avec les informations brutes. Case « explications-distinctes » (options, cochée par défaut) : décochée, rien ne change. */
body.explications-distinctes #fenetre-infos.fi-explication #fenetre-infos-bloc,
body.explications-distinctes #fenetre-infos-tout p.explication{color:#ffe08a;font-family:Georgia,"Times New Roman",serif;border-left:4px solid #ffb703;padding-left:.7em}

/* BOUTONS DE RÉACTION AU TOUCHER (Med, 17/10/2026 soir, js/tactique.js REAGIR_TACTILE) : Passer, Contre, Extraction, en bas de l'écran, chacun
   montré seulement quand son action est possible. Contraste fort : texte noir sur fond clair, bord noir épais, liseré blanc ; une couleur par
   action (bleu clair : passer ; jaune : contre ; orange clair : extraction) ; jamais cachés derrière le plateau ni sous le bouton d'aide tactile (z-index 10000) ; toujours sur une seule rangée, même à 320 pixels. */
#reaction-tactile { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10001;
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; width: min(98vw, 760px); box-sizing: border-box; padding: 0 6px; }
#reaction-tactile[hidden], #reaction-tactile button[hidden] { display: none !important; }
#reaction-tactile button { flex: 1 1 0; min-width: 0; min-height: 64px; padding: 12px 6px; font-size: clamp(1rem, 4.4vw, 1.3rem); hyphens: auto; font-weight: 800; color: #000;
  border: 4px solid #000; border-radius: 14px; box-shadow: 0 0 0 3px #fff, 0 6px 18px rgba(0,0,0,.6); }
@media (max-width: 380px) { #reaction-tactile { gap: 6px; padding: 0 4px; } #reaction-tactile button { padding: 10px 2px; border-width: 3px; font-size: 0.86rem; } }
#reaction-tactile .reaction-passer { background: #9fd8ff; }
#reaction-tactile .reaction-contre { background: #ffd400; }
#reaction-tactile .reaction-extraction { background: #ffb36b; }
#reaction-tactile button:focus-visible, #reaction-tactile button:focus { outline: 5px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 9px #000, 0 6px 18px rgba(0,0,0,.6); }