/* ===== 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%); }

/* ===== PLATEAU DE BATAILLE (D15, 13/10/2026) : héros à gauche, adversaires à droite, tour et dé au centre ; en colonne sur téléphone =====
   Décor seulement (#rpg-visuel est aria-hidden). Le camp se lit à la COULEUR et à la FORME : liseré plein pour les héros, double pour les adversaires. */
body.images-actives.rpg-visuel #rpg-visuel { display: block; margin-bottom: 14px; }
#rpg-visuel .plateau { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; }
@media (min-width: 75rem) { #rpg-visuel .plateau { grid-template-columns: minmax(0,1fr) 9.5rem minmax(0,1fr); align-items: stretch; } }   /* côte à côte seulement s'il y a la place (un écran zoomé à 125 % reste empilé) */
#rpg-visuel .cote { background: var(--rv-verre); border: 1px solid var(--rv-bord); border-radius: 14px; padding: 8px 10px 10px; min-width: 0;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#rpg-visuel .cote[data-camp="heros"] { --c: var(--rv-heros); border-top: 4px solid var(--c); }
#rpg-visuel .cote[data-camp="adverse"] { --c: var(--rv-adverse); border-top: 4px double var(--c); border-top-width: 6px; }
#rpg-visuel .cote-titre { display: block; font: 700 .78rem/1.2 var(--rv-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--c); margin-bottom: 6px; }
#rpg-visuel .zones { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#rpg-visuel .zone { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; background: rgba(0,0,0,.28); min-height: 4.2rem; }
#rpg-visuel .zone[data-zone="C"], #rpg-visuel .zone[data-zone="B"] { background: rgba(255,255,255,.05); }   /* le front, un peu plus clair : là où l'on se bat */
#rpg-visuel .zlib { font: 700 .7rem/1 var(--rv-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--rv-muted); }
#rpg-visuel .jetons { display: flex; flex-direction: column; gap: 6px; }

/* Le jeton : portrait rond, nom, deux jauges, chiffres, pastilles de statut. */
#rpg-visuel .jeton { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2px 8px; align-items: center; padding: 4px 7px;
  border-radius: 10px; background: var(--rv-verre-fort); border: 1px solid #343a55; transition: opacity .3s, filter .3s; }
#rpg-visuel .jeton[data-camp="heros"] { box-shadow: inset 4px 0 0 var(--rv-heros); }
#rpg-visuel .jeton[data-camp="adverse"] { box-shadow: inset 3px 0 0 var(--rv-adverse), inset 6px 0 0 var(--rv-verre-fort), inset 8px 0 0 var(--rv-adverse); }
#rpg-visuel .jeton .por { width: 38px; height: 38px; border-radius: 50%; background: #101322 center / cover no-repeat; border: 2px solid var(--rv-bord); grid-row: span 2; }
#rpg-visuel .jeton[data-camp="heros"] .por { border-color: var(--rv-heros); }
#rpg-visuel .jeton[data-camp="adverse"] .por { border: 3px double var(--rv-adverse); }
#rpg-visuel .jeton .txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#rpg-visuel .jeton .tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 6px; min-width: 0; }
#rpg-visuel .jeton .nom { font: 700 .92rem/1.15 var(--rv-titre); color: #f2f2f8; overflow-wrap: anywhere; min-width: 0; }   /* jamais coupé : « Soldat orque 1 » et « 2 » restent distincts */
#rpg-visuel .jeton .barres { display: grid; gap: 2px; }
#rpg-visuel .jauge { display: block; height: 7px; background: #000; border: 1px solid #2a2f45; border-radius: 4px; overflow: hidden; }
#rpg-visuel .jauge.ki { height: 5px; }
#rpg-visuel .jauge i { display: block; height: 100%; width: var(--p); transition: width .4s; }
#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 .jeton .chiffres { font-size: .72rem; color: #c8ccdf; font-variant-numeric: tabular-nums; white-space: nowrap; }
#rpg-visuel .statuts { display: flex; flex-wrap: wrap; gap: 3px; }
#rpg-visuel .statuts:empty { display: none; }
#rpg-visuel .pastille { font-size: .68rem; line-height: 1.2; padding: 1px 6px; border-radius: 999px; background: #1d3550; color: #cfe6ff; border: 1px solid #3b6a99; white-space: nowrap; }
#rpg-visuel .pastille[data-neg] { background: #4a2a12; color: #ffe0b8; border-color: #a8642a; }
/* États : qui agit (anneau or), le personnage sous le focus (anneau blanc), déjà joué (atténué), K.O. (gris, barré). */
#rpg-visuel .jeton.actif { border-color: var(--rv-accent); outline: 3px solid var(--rv-accent); outline-offset: 1px; background: #2a2114; }
#rpg-visuel .jeton.vise { outline: 3px solid #fff; outline-offset: 1px; }
/* A joué ce tour (Med, 13/10/2026 soir : « grisé ») : portrait et jauges en gris, texte un peu éteint mais lisible. */
#rpg-visuel .jeton.a-joue .por, #rpg-visuel .jeton.a-joue .barres { filter: grayscale(1) brightness(.8); }
#rpg-visuel .jeton.a-joue { background: #191a22; }
#rpg-visuel .jeton.a-joue .nom { color: #c3c6d3; }
/* À terre (Med, 13/10/2026 soir : « renversé ») : le portrait se couche, le jeton penche. */
#rpg-visuel .jeton.a-terre { transform: rotate(-4deg); }
#rpg-visuel .jeton.a-terre .por { transform: rotate(-90deg); }
/* Cliquable à la souris ou au doigt (même effet que le bouton du jeu) : main et léger anneau au survol. */
#rpg-visuel .jeton.cliquable { cursor: pointer; }
#rpg-visuel .jeton.cliquable:hover { outline: 2px solid #fff; outline-offset: 1px; }
#rpg-visuel .jeton.ko { background: #15161c; border-style: dashed; }   /* texte toujours lisible (contraste) : seuls le portrait et les jauges s'éteignent */
#rpg-visuel .jeton.ko .por, #rpg-visuel .jeton.ko .barres { opacity: .4; filter: grayscale(1); }
#rpg-visuel .jeton.ko .nom { text-decoration: line-through; color: #d6d8e2; }
#rpg-visuel .jeton.ko .chiffres { color: #ffb0b0; font-weight: 700; }
/* Dégâts et soins qui montent au-dessus du jeton touché. */
#rpg-visuel .flottant { position: absolute; right: 10px; top: -14px; font: 800 1.35rem/1 var(--rv-titre); pointer-events: none; text-shadow: 0 2px 6px #000, 0 0 2px #000;
  animation: rv-monte 1.6s ease-out forwards; }
#rpg-visuel .flottant[data-sens="degat"] { color: #ff6b6b; }
#rpg-visuel .flottant[data-sens="soin"] { color: #7dffa6; }
#rpg-visuel .flottant[data-sens^="ki"] { top: 17px; font-size: .95rem; color: #e2d2ff; }
#rpg-visuel .flottant[data-sens="ki-perte"] { color: #c49bff; }
#rpg-visuel .flottant[data-calme] { animation: rv-fondu 1.6s linear forwards; }
@keyframes rv-monte { 0% { transform: translateY(8px) scale(.8); opacity: 0; } 15% { transform: translateY(0) scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-22px) scale(1); opacity: 0; } }

/* Le centre : le tour, puis le dé. */
#rpg-visuel .centre { display: flex; flex-direction: row; gap: 8px; align-items: stretch; justify-content: center; }
@media (min-width: 75rem) { #rpg-visuel .centre { flex-direction: column; justify-content: flex-start; } }
#rpg-visuel .tour { flex: 1; 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 10px; min-width: 0; }
#rpg-visuel .tour .grand { font: 800 1.7rem/1 var(--rv-titre); color: var(--rv-accent); letter-spacing: .08em; text-transform: uppercase; }
#rpg-visuel .tour .petit { font-size: .8rem; color: #f2f2f8; overflow-wrap: anywhere; }
#rpg-visuel .plateau[data-main="heros"] .cote[data-camp="heros"], #rpg-visuel .plateau[data-main="adverse"] .cote[data-camp="adverse"] { box-shadow: 0 0 0 2px var(--c), 0 0 18px -4px var(--c); }
#rpg-visuel .de { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; }
#rpg-visuel .de.visible { display: flex; }
#rpg-visuel .de .face { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: #f4f1e8; color: #14161f;
  font: 800 2.2rem/1 var(--rv-titre); box-shadow: 0 4px 0 #b9b2a0, 0 8px 18px rgba(0,0,0,.6); border: 2px solid #fff; }
#rpg-visuel .de[data-issue="critique"] .face { background: #ffcf5a; box-shadow: 0 4px 0 #b8861d, 0 0 26px rgba(255,190,60,.8); }
#rpg-visuel .de[data-issue="rate"] .face { background: #ff8a8a; box-shadow: 0 4px 0 #a33a3a, 0 8px 18px rgba(0,0,0,.6); }
#rpg-visuel .de .seuil { font-size: .74rem; color: #f2f2f8; text-align: center; background: var(--rv-verre-fort); border-radius: 6px; padding: 1px 6px; }
#rpg-visuel .de .seuil:empty { display: none; }
#rpg-visuel .de.roule .face { animation: rv-roule .55s cubic-bezier(.2,.8,.3,1.2) 1; }
@keyframes rv-roule { 0% { transform: rotate(-200deg) scale(.4); opacity: 0; } 60% { transform: rotate(18deg) scale(1.12); opacity: 1; } 100% { transform: rotate(0) scale(1); } }

/* Le bandeau des dernières annonces : cinq lignes au plus (trois sur téléphone), la plus récente en bas, en clair. */
#rpg-visuel .bandeau { list-style: none; margin: 8px 0 0; padding: 6px 10px; background: var(--rv-verre-fort); border: 1px solid var(--rv-bord); border-radius: 12px;
  display: flex; flex-direction: column; gap: 3px; font-size: .84rem; color: #b9bdd0; }
#rpg-visuel .bandeau:empty { display: none; }
#rpg-visuel .bandeau li { display: flex; gap: 8px; align-items: baseline; min-width: 0; opacity: .75; }
#rpg-visuel .bandeau li:last-child { opacity: 1; color: #f2f2f8; }
#rpg-visuel .bandeau .qui { flex: none; font: 700 .68rem/1.2 var(--rv-titre); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
#rpg-visuel .bandeau li[data-camp="heros"] .qui { color: #0d1b2a; background: var(--rv-heros); }
#rpg-visuel .bandeau li[data-camp="adverse"] .qui { color: #2a0d0d; background: var(--rv-adverse); }
#rpg-visuel .bandeau .quoi { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
/* Téléphone : le plateau reste COMPACT (les boutons du jeu doivent rester proches) : chaque camp sur une rangée, des tuiles portrait + nom + jauges. */
@media (max-width: 43.99rem) {
  #rpg-visuel .bandeau li:nth-last-child(n+4) { display: none; }
  #rpg-visuel .cote { padding: 6px 6px 8px; }
  #rpg-visuel .cote-titre { margin-bottom: 4px; font-size: .7rem; }
  #rpg-visuel .zones { display: flex; gap: 6px; }
  #rpg-visuel .zone { flex: 1 1 auto; min-height: 0; padding: 4px; gap: 4px; min-width: 3.6rem; }
  #rpg-visuel .zlib { font-size: .62rem; }
  #rpg-visuel .jetons { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  #rpg-visuel .jeton { grid-template-columns: minmax(0,1fr); justify-items: center; width: 5rem; padding: 4px 3px; gap: 2px; }
  #rpg-visuel .jeton[data-camp="adverse"] { box-shadow: inset 0 3px 0 var(--rv-adverse), inset 0 5px 0 var(--rv-verre-fort), inset 0 7px 0 var(--rv-adverse); }
  #rpg-visuel .jeton[data-camp="heros"] { box-shadow: inset 0 4px 0 var(--rv-heros); }
  #rpg-visuel .jeton .por { width: 34px; height: 34px; grid-row: auto; margin-top: 3px; }
  #rpg-visuel .jeton .txt { width: 100%; align-items: center; }
  #rpg-visuel .jeton .tete { justify-content: center; max-width: 100%; }
  #rpg-visuel .jeton .nom { font-size: .64rem; line-height: 1.1; max-width: 100%; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: auto; }
  #rpg-visuel .jeton .barres { width: 100%; }
  #rpg-visuel .jeton .chiffres, #rpg-visuel .jeton .statuts { display: none; }
  #rpg-visuel .flottant { left: auto; right: 3px; top: 12px; font-size: 1.1rem; }
  #rpg-visuel .flottant[data-sens^="ki"] { top: auto; bottom: 14px; font-size: .85rem; }
  #rpg-visuel .tour { padding: 4px 10px; }
  #rpg-visuel .tour .grand { font-size: 1.2rem; }
  #rpg-visuel .de { flex-direction: row; padding: 0; }
  #rpg-visuel .de .face { width: 42px; height: 42px; font-size: 1.5rem; border-radius: 10px; }
}
@media (min-width: 75rem) { #rpg-visuel .centre { justify-content: center; } #rpg-visuel .tour { flex: none; } }
/* Sur téléphone, les adversaires d'abord (en haut), puis le centre, puis les héros : le front des deux camps se fait face au milieu. */
@media (max-width: 74.99rem) {
  #rpg-visuel .cote[data-camp="adverse"] { order: 1; }
  #rpg-visuel .centre { order: 2; }
  #rpg-visuel .cote[data-camp="heros"] { order: 3; }
  #rpg-visuel .cote[data-camp="adverse"] .zone[data-zone="A"] { order: -1; }   /* empilé : arrière | front au-dessus de arrière | front, les deux fronts face à face */
}

/* ===== 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.rpg-conseil { color: #ffe08a; border-left-color: #ffb703; }
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 { display: none; }   /* le dé est montré en grand au centre du plateau (D15) */

/* Les mouvements suivent la case « Effets visuels » (body.fx-off, rpg-visuel.js), plus le réglage d'animations du système (Med, 18/10/2026). */
body.fx-off #rpg-visuel .jauge i, body.fx-off #rpg-visuel .jeton { transition: none; } body.fx-off #rpg-visuel .flottant { animation: rv-fondu 1.6s linear forwards; } body.fx-off #rpg-visuel .de.roule .face { animation: none; }
@keyframes rv-fondu { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (forced-colors: active) { #rpg-scene { display: none !important; } #rpg-visuel .cote, #rpg-visuel .jeton, #rpg-visuel .tour, #rpg-visuel .jauge, 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; } }

/* ===== EFFETS VISUELS FACULTATIFS (RPG_VISUEL.effet) : secousse légère et éclair discret ; coupés si le système réduit les animations ===== */
#fx-flash{ position:fixed; inset:0; z-index:2147483000; pointer-events:none; background:#fff; opacity:0; }
#fx-flash.fx-actif{ animation:fx-eclair .3s ease-out 1; }
@keyframes fx-eclair{ 0%{ opacity:.22; } 100%{ opacity:0; } }
#ecran-rpg.fx-secousse{ animation:fx-secousse .2s linear 1; }
@keyframes fx-secousse{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-3px,1px); } 50%{ transform:translate(3px,-1px); } 75%{ transform:translate(-2px,0); } }
body.fx-off #fx-flash, body.fx-off #ecran-rpg.fx-secousse{ animation:none !important; }

/* ===== PROFONDEUR DU PLATEAU (Med, 14/10/2026 : « Applique un effet de profondeur au plateau visuel de jeu. ») =====
   Décor seulement : aucune règle ici ne change le DOM, le texte, l'ordre ni le focus. Trois moyens, du plus sûr au plus fort :
   1. LUMIÈRE ET OMBRES (toutes largeurs) : les panneaux flottent au-dessus de la scène, chaque jeton est POSÉ (ombre de contact
      sous lui), le jeton qui agit se SOULÈVE (ombre plus large et plus basse), un K.O. est couché à plat (sans ombre).
   2. PLANS (toutes largeurs) : le sol des rangs arrière est plus sombre, avec une brume claire du côté du front ; le front est
      éclairé par en dessous ; les portraits de l'arrière un peu éteints. Les TEXTES gardent leur couleur : contraste au moins égal.
   3. PERSPECTIVE (jamais en contraste forcé ni en contraste renforcé) :
      - large (côte à côte) : un diorama en V, les deux fronts au premier plan face au centre, les arrières qui reculent vers les bords ;
      - tablette (empilé) : une table vue de la place du joueur, les adversaires au fond (un peu plus petits), vos héros devant ;
      - téléphone : allégée, le seul panneau adverse s'incline à peine (5 degrés), sans rapetisser les textes du bas des jetons.
      Angles faibles (5 à 6 degrés) : le texte reste net et droit. Le clic suit la forme dessinée (le navigateur tient compte de la
      perspective) : on clique toujours le jeton que l'on voit.
   Ce qui BOUGE (soulèvement du jeton, parallaxe du fond au défilement) n'existe que si le système permet les animations ET que la
   case « Effets visuels » est cochée (body:has(#effets-visuels:checked), la même case que effetsPermis() dans rpg-visuel.js). */
body.images-actives.rpg-visuel {
  /* Un jeton a une ÉPAISSEUR (un fil clair en haut, une tranche sombre en bas, comme le dé) et une ombre de contact sur le sol. */
  --rv-pose: inset 0 1px 0 rgba(255,255,255,.09), 0 2px 0 #05060b, 0 3px 2px rgba(0,0,0,.55), 0 9px 9px -5px rgba(0,0,0,.8);
  --rv-loin-pose: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 #05060b, 0 2px 2px rgba(0,0,0,.5), 0 6px 6px -4px rgba(0,0,0,.7);   /* plus loin : tranche et ombre plus courtes */
  --rv-haut: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #05060b, 0 9px 10px -3px rgba(0,0,0,.6), 0 20px 22px -8px rgba(0,0,0,.85);   /* soulevé : l'ombre s'écarte et s'étale */
  --rv-flotte: 0 22px 36px -16px rgba(0,0,0,.9), 0 4px 10px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);   /* panneaux */
}
/* Une ombre douce au sol sous tout le plateau : il est posé dans la scène. */
#rpg-visuel .plateau { position: relative; }
#rpg-visuel .plateau::before { content: ""; position: absolute; inset: 12% 0 -18px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); }
/* Les panneaux flottent au-dessus du décor. Le côté qui a la main garde son halo (règle plus haut), avec la même ombre. */
#rpg-visuel .cote, #rpg-visuel .tour, #rpg-visuel .bandeau { box-shadow: var(--rv-flotte); }
#rpg-visuel .plateau[data-main="heros"] .cote[data-camp="heros"], #rpg-visuel .plateau[data-main="adverse"] .cote[data-camp="adverse"] {
  box-shadow: 0 0 0 2px var(--c), 0 0 18px -4px var(--c), var(--rv-flotte); }
/* Le sol des zones : l'arrière, plus sombre au loin, une brume claire là où il rejoint le front ; le front, éclairé par en dessous. */
#rpg-visuel .zone { --rv-loin: to right; }
/* (La brume commence SOUS l'étiquette « Arrière » : derrière un texte, le sol n'est jamais plus clair qu'avant, contraste au moins égal.) */
#rpg-visuel .zone[data-zone="A"], #rpg-visuel .zone[data-zone="D"] {
  background: linear-gradient(var(--rv-loin), rgba(150,162,205,0) 45%, rgba(150,162,205,.12)) 0 1.3rem / 100% calc(100% - 1.3rem) no-repeat,
              linear-gradient(var(--rv-loin), rgba(0,0,0,.6), rgba(0,0,0,.42) 55%, rgba(0,0,0,.3)); }
#rpg-visuel .zone[data-zone="B"], #rpg-visuel .zone[data-zone="C"] {
  background: radial-gradient(130% 95% at 50% 100%, rgba(255,255,255,.13), rgba(255,255,255,.04) 75%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
/* Portraits de l'arrière un peu éteints (le texte, lui, ne change pas). Les états « a joué » et K.O. gardent leur propre filtre. */
#rpg-visuel .zone[data-zone="A"] .jeton:not(.a-joue):not(.ko) .por, #rpg-visuel .zone[data-zone="D"] .jeton:not(.a-joue):not(.ko) .por { filter: saturate(.78) brightness(.86); }
/* Les jetons posés : liseré de camp (inchangé) + ombre de contact ; le jeton qui agit se soulève ; le K.O. est à plat. */
#rpg-visuel .jeton { --rv-ombre: var(--rv-pose); }
#rpg-visuel .zone[data-zone="A"] .jeton, #rpg-visuel .zone[data-zone="D"] .jeton { --rv-ombre: var(--rv-loin-pose); }
#rpg-visuel .jeton.actif { --rv-ombre: var(--rv-haut); transform: translateY(-3px); }
#rpg-visuel .jeton.actif.a-terre { transform: translateY(-3px) rotate(-4deg); }
#rpg-visuel .jeton.ko { --rv-ombre: 0 0 0 transparent; }   /* couché à plat : ni tranche ni ombre */
#rpg-visuel .jeton[data-camp="heros"] { box-shadow: inset 4px 0 0 var(--rv-heros), var(--rv-ombre); }
#rpg-visuel .jeton[data-camp="adverse"] { box-shadow: inset 3px 0 0 var(--rv-adverse), inset 6px 0 0 var(--rv-verre-fort), inset 8px 0 0 var(--rv-adverse), var(--rv-ombre); }
@media (max-width: 43.99rem) {
  #rpg-visuel .jeton[data-camp="adverse"] { box-shadow: inset 0 3px 0 var(--rv-adverse), inset 0 5px 0 var(--rv-verre-fort), inset 0 7px 0 var(--rv-adverse), var(--rv-ombre); }
  #rpg-visuel .jeton[data-camp="heros"] { box-shadow: inset 0 4px 0 var(--rv-heros), var(--rv-ombre); }
  #rpg-visuel .jeton.actif { transform: translateY(-2px); }
  #rpg-visuel .jeton.actif.a-terre { transform: translateY(-2px) rotate(-4deg); }
  /* Profondeur allégée : seul le camp adverse, en haut, s'incline à peine vers le fond (rien ne grandit, rien ne déborde). */
  #rpg-visuel .cote[data-camp="adverse"] { transform-origin: 50% 100%; transform: perspective(900px) rotateX(5deg); }
}
/* Écran large, côte à côte : le diorama en V. Une seule perspective pour tout le plateau (un seul point de fuite, au centre) ;
   chaque côté pivote autour de son bord intérieur (le front), le bord extérieur (l'arrière) recule et rapetisse : rien ne déborde. */
@media (min-width: 75rem) {
  #rpg-visuel .plateau { perspective: 1400px; perspective-origin: 50% 30%; }
  #rpg-visuel .cote[data-camp="heros"] { transform-origin: 100% 100%; transform: rotateX(4deg) rotateY(-8deg); }
  #rpg-visuel .cote[data-camp="adverse"] { transform-origin: 0 100%; transform: rotateX(4deg) rotateY(8deg); }
  #rpg-visuel .centre { transform-origin: 50% 100%; transform: rotateX(4deg); }
  #rpg-visuel .zone[data-zone="A"] { --rv-loin: to left; }   /* l'arrière adverse est à droite : son « loin » est le bord droit */
}
/* Tablette, empilé : la table vue de la place du joueur. Les adversaires au fond, le centre, vos héros au premier plan. */
@media (min-width: 44rem) and (max-width: 74.99rem) {
  #rpg-visuel .plateau { perspective: 1400px; perspective-origin: 50% 100%; }
  #rpg-visuel .cote[data-camp="adverse"] { transform-origin: 50% 100%; transform: translateZ(-60px) rotateX(6deg); }
  #rpg-visuel .centre { transform-origin: 50% 100%; transform: translateZ(-26px) rotateX(4deg); }
  #rpg-visuel .cote[data-camp="heros"] { transform-origin: 50% 100%; transform: rotateX(3deg); }
}
/* Ce qui bouge : seulement avec les animations du système ET la case « Effets visuels ». */
@media all {
  body.images-actives.rpg-visuel:has(#effets-visuels:checked) #rpg-visuel .jeton { transition: opacity .3s, filter .3s, transform .25s ease-out, box-shadow .25s ease-out; }
  /* Parallaxe très discret : au défilement, le fond flou glisse un peu moins vite que la page (la netteté du fond, jamais rogné, ne bouge pas). */
  @supports (animation-timeline: scroll()) {
    body.images-actives.rpg-visuel:has(#effets-visuels:checked) #rpg-scene .fond-flou { animation: rv-parallaxe linear both; animation-timeline: scroll(root); }
  }
}
@keyframes rv-parallaxe { from { transform: scale(1.15) translateY(0); } to { transform: scale(1.15) translateY(-3%); } }
/* Contraste forcé ou renforcé : aucune perspective, aucun soulèvement, aucun filtre d'atténuation (lisibilité d'abord). */
@media (forced-colors: active), (prefers-contrast: more) {
  #rpg-visuel .plateau { perspective: none; }
  #rpg-visuel .cote, #rpg-visuel .centre, #rpg-visuel .jeton.actif { transform: none !important; }
  #rpg-visuel .jeton.actif.a-terre { transform: rotate(-4deg) !important; }
  #rpg-visuel .zone[data-zone] .jeton:not(.a-joue):not(.ko) .por { filter: none; }   /* [data-zone] : même spécificité que la règle qui éteint l'arrière, placée après (relecture B du 14/10/2026 : sans lui, le filtre restait) */
  #rpg-scene .fond-flou { animation: none !important; }
}