/* ===== MODE RPG : MISE EN PAGE ILLUSTRÉE DE L'ÉCRAN DE BATAILLE (Med, 29/09/2026) =====
   Tirée de documentation/maquettes/MAQUETTE-ECRAN-BATAILLE.html (v2). Branchée par prototype/rpg/rpg-visuel.js.

   RÈGLES (les mêmes que css/images.css) :
   - Tout est sous « body.images-actives.rpg-visuel » : sans la case « Illustrations décoratives » (options), ou hors
     bataille, RIEN de ce fichier ne s'applique et l'écran reste exactement l'ancien.
   - Le décor (#rpg-scene) et les plaques de tête (#rpg-visuel) sont aria-hidden : aucune information n'y est portée
     seule, tout est déjà dit par les boutons et le lecteur d'écran. Ce fichier ne change AUCUN ordre du DOM, aucun
     texte, aucun focus.
   - Le fond n'est JAMAIS rogné ni déformé : l'image entière (contain) sur une version floue d'elle-même qui remplit l'écran.
   - Emplacements futurs : .portrait (plaques de tête) : y poser une image via RPG_VISUEL.PORTRAITS (rpg-visuel.js). */

#rpg-scene, #rpg-visuel { display: none; }

body.images-actives.rpg-visuel {
  --rv-verre: rgba(14,16,28,.88); --rv-verre-fort: rgba(10,12,22,.96); --rv-bord: #4c5474;
  --rv-accent: #ffb454; --rv-accent-fonce: #3a2608; --rv-muted: #b4b8cc;
  --rv-heros: #6fbcff; --rv-adverse: #ff8b8b; --rv-ki: #c4a2ff; --rv-vie: #6bd98a;
  --rv-titre: "Bahnschrift","Arial Narrow","Roboto Condensed","Segoe UI",system-ui,sans-serif;
  display: block; padding: 0; overflow-x: hidden;
}
body.images-actives.rpg-visuel #fond-illustration { opacity: 0; }
body.images-actives.rpg-visuel::before { display: none; }

/* Le titre général de la page, la version et le sous-titre restent lisibles par le lecteur d'écran, hors de la vue. */
body.images-actives.rpg-visuel > h1,
body.images-actives.rpg-visuel > p.version,
body.images-actives.rpg-visuel > p.sub {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
body.images-actives.rpg-visuel #accueil-ecrans { max-width: 78rem; width: 100%; margin-inline: auto; padding: clamp(12px,3vw,24px); }

/* ===== LA SCÈNE ===== */
body.images-actives.rpg-visuel #rpg-scene { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: #05060c; }
#rpg-scene .fond-flou, #rpg-scene .fond { position: absolute; inset: 0; background-repeat: no-repeat; }
#rpg-scene .fond-flou { background-size: cover; background-position: center; filter: blur(28px) brightness(.55) saturate(1.1); transform: scale(1.15); }
#rpg-scene .fond { background-size: contain; background-position: center center; }
@media (orientation: portrait) { #rpg-scene .fond { background-position: center 0; } }
#rpg-scene .voile { position: absolute; inset: 0; background:
  radial-gradient(130% 100% at 50% 25%, rgba(5,6,12,0) 45%, rgba(5,6,12,.5) 100%),
  linear-gradient(180deg, rgba(5,6,12,.05) 0%, rgba(5,6,12,.1) 30%, rgba(5,6,12,.6) 62%, rgba(5,6,12,.9) 100%); }

/* ===== PLAQUES DE TÊTE : héros (gauche) contre adversaire (droite) ===== */
body.images-actives.rpg-visuel #rpg-visuel { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; align-items: stretch; margin-bottom: 14px; }
@media (min-width: 60rem) { body.images-actives.rpg-visuel #rpg-visuel { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); } }
#rpg-visuel .plaque { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 4px 12px; align-items: center; background: var(--rv-verre);
  border: 1px solid var(--rv-bord); border-radius: 14px; padding: 10px 14px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: relative; overflow: hidden; text-align: left; }
#rpg-visuel .plaque::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--c); }
#rpg-visuel .plaque[data-camp="heros"] { --c: var(--rv-heros); }
#rpg-visuel .plaque[data-camp="adverse"] { --c: var(--rv-adverse); }
#rpg-visuel .plaque[data-camp="adverse"]::before { inset: 0 0 0 auto; }
@media (min-width: 60rem) {
  #rpg-visuel .plaque[data-camp="adverse"] { grid-template-columns: minmax(0,1fr) auto; }
  #rpg-visuel .plaque[data-camp="adverse"] .portrait { order: 2; }
  #rpg-visuel .plaque[data-camp="adverse"] .infos { text-align: right; }
  #rpg-visuel .plaque[data-camp="adverse"] .barre { flex-direction: row-reverse; }
}
#rpg-visuel .portrait { width: clamp(56px,14vw,88px); aspect-ratio: 1; border-radius: 12px; border: 2px solid var(--c); background-color: #101322;
  background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; flex: none; }
#rpg-visuel .portrait img { display: block; width: 100%; height: 100%; object-fit: contain; }
#rpg-visuel .infos { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#rpg-visuel .camp { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--c); }
#rpg-visuel .nom { font: 700 clamp(1.15rem,3.6vw,1.6rem)/1.1 var(--rv-titre); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere; color: #f2f2f8; }
#rpg-visuel .barre { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; font-size: .9rem; color: #f2f2f8; }
#rpg-visuel .barre .lib { min-width: 5.2rem; color: #d0d4e6; white-space: nowrap; }
#rpg-visuel .jauge { flex: 1; height: 10px; min-width: 40px; background: #000; border: 1px solid #2a2f45; border-radius: 6px; overflow: hidden; }
#rpg-visuel .jauge i { display: block; height: 100%; width: var(--p); transition: width .3s; }
#rpg-visuel .jauge.vie i { background: linear-gradient(90deg,#2f9d55,var(--rv-vie)); }
#rpg-visuel .jauge.ki i { background: linear-gradient(90deg,#7a52d6,var(--rv-ki)); }
#rpg-visuel .tour { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--rv-accent-fonce);
  border: 2px solid var(--rv-accent); border-radius: 14px; padding: 8px 18px; min-width: 9rem; }
#rpg-visuel .tour .grand { font: 800 2rem/1 var(--rv-titre); color: var(--rv-accent); letter-spacing: .08em; text-transform: uppercase; }
#rpg-visuel .tour .petit { font-size: .85rem; color: #f2f2f8; }

/* ===== LE TITRE DE L'ÉTAPE ===== */
body.images-actives.rpg-visuel #rpg-titre { color: var(--rv-muted); font: 600 .95rem/1.3 var(--rv-titre); letter-spacing: .1em; text-transform: uppercase; text-align: left; margin: 0 0 10px; width: fit-content; max-width: 100%; padding: .25rem .7rem; border-radius: 8px; background: var(--rv-verre-fort); color: #d6d9e8; }

/* ===== TERRAIN : quatre zones (A arrière adverse, B front adverse / C front des héros, D arrière des héros) ===== */
body.images-actives.rpg-visuel #rpg-zone[data-vue="terrain"] { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; align-items: start; }
@media (min-width: 44rem) { body.images-actives.rpg-visuel #rpg-zone[data-vue="terrain"] { grid-template-columns: repeat(2,minmax(0,1fr)); } }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 10px; min-width: 0;
  background: var(--rv-verre-fort); border: 1px solid var(--rv-bord); border-radius: 12px; }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee[data-camp="adverse"] { border-top: 4px solid var(--rv-adverse); }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee[data-camp="heros"] { border-top: 4px solid var(--rv-heros); }
body.images-actives.rpg-visuel #rpg-zone .rpg-zone-lib { font: 700 .95rem/1.1 var(--rv-titre); letter-spacing: .06em; text-transform: uppercase; color: var(--rv-muted); }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee button { flex: none; width: 100%; }

/* ===== BOUTONS DU MODE RPG (pions, actions, menus) ===== */
body.images-actives.rpg-visuel #rpg-zone button.big {
  font: 600 1rem/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; text-align: left; margin: 0 0 8px; padding: .65rem .9rem; min-height: 44px; width: 100%;
  background: var(--rv-verre-fort); color: #f2f2f8; border: 1px solid var(--rv-bord); border-left: 6px solid var(--t, #8b90a8); border-radius: 10px; }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee button.big { margin: 0; }
body.images-actives.rpg-visuel #rpg-zone button.big:hover { border-color: var(--rv-accent); background: #2a2114; }
body.images-actives.rpg-visuel #rpg-zone button.big:focus, body.images-actives.rpg-visuel #rpg-zone button.big:focus-visible { outline: 4px solid #fff; outline-offset: 2px; }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee button[data-camp="heros"] { --t: var(--rv-heros); }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee button[data-camp="adverse"] { --t: var(--rv-adverse); }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee button.rpg-acteur { outline: 3px solid var(--rv-accent); outline-offset: 1px; background: #2a2114; }
body.images-actives.rpg-visuel #rpg-zone .rpg-rangee button.rpg-acteur:focus { outline: 4px solid #fff; }
body.images-actives.rpg-visuel #rpg-zone button[data-type="offense"] { --t: var(--rv-adverse); }
body.images-actives.rpg-visuel #rpg-zone button[data-type="magie"] { --t: var(--rv-ki); }
body.images-actives.rpg-visuel #rpg-zone button[data-type="defense"] { --t: var(--rv-heros); }
body.images-actives.rpg-visuel #rpg-zone button[data-type="autre"] { --t: #8b90a8; }
body.images-actives.rpg-visuel #rpg-zone button[aria-disabled="true"], body.images-actives.rpg-visuel #rpg-zone .rpg-inerte { opacity: .6; }

/* Menu d'actions : deux colonnes à partir de la largeur moyenne. */
@media (min-width: 40rem) { body.images-actives.rpg-visuel #rpg-zone[data-vue="actions"] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; align-items: start; }
  body.images-actives.rpg-visuel #rpg-zone[data-vue="actions"] > .rpg-ligne { grid-column: 1 / -1; } }

/* Lignes de texte (en-tête relisible, résultats, journal) */
body.images-actives.rpg-visuel #rpg-zone .rpg-ligne { margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; background: var(--rv-verre-fort); border-left: 4px solid #8b90a8;
  color: #f2f2f8; overflow-wrap: anywhere; }
body.images-actives.rpg-visuel #rpg-zone .rpg-ligne:focus { outline: 3px solid #fff; outline-offset: 1px; }
body.images-actives.rpg-visuel #rpg-zone .rpg-de { text-shadow: 0 2px 8px #000; }

@media (prefers-reduced-motion: reduce) { #rpg-visuel .jauge i { transition: none; } }
@media (forced-colors: active) { #rpg-scene { display: none !important; } #rpg-visuel .plaque, #rpg-visuel .tour, body.images-actives.rpg-visuel #rpg-zone .rpg-rangee, body.images-actives.rpg-visuel #rpg-zone button.big { border: 1px solid CanvasText; } }
@media (prefers-contrast: more) { body.images-actives.rpg-visuel { --rv-verre: rgba(6,7,14,.94); --rv-verre-fort: rgba(6,7,14,.97); --rv-bord: #8b93b8; } }