/* ===== SCÈNE DE BATAILLE UNIFIÉE (Med, 18/10/2026) — présentation de jeu vidéo =====
   Ses retours, relevés par un voyant sur la version du 17/10 :
   - « fusionner la zone de plan des zones et celle des jetons » : UNE seule grande zone dit qui est où, qui il est, sa vie et son ki ;
     les boutons du jeu (rangées de #rpg-zone) se posent sur les jetons (rpg/rpg-visuel.js, superposer) au lieu d'être dessinés dessous ;
   - « de gauche à droite d'abord héros à gauche » : zone A (ton arrière), zone B (ton front), le tour et le dé, zone C (front adverse),
     zone D (arrière adverse) ; en colonne (téléphone), les adversaires en haut : D, C, centre, B, A (ordre visuel seulement ; Med, 18/10 20 h 08) ;
   - « les jetons des adversaires sont plus petits, ils doivent être aussi grands ; exploiter au maximum l'écran (8 contre 8) » : toutes les
     zones prennent la grille de la zone la plus remplie (data-nmax) et le médaillon prend toute la place de sa case (unités de conteneur) ;
   - « la croix est grise » : la croix rouge n'est plus sous le filtre gris du portrait (.bp-img seule passe au gris) ;
   - les mouvements suivent la case « Effets visuels » (body.fx-off quand elle est décochée), plus le réglage d'animations de Windows.
   Chargé APRÈS css/vue-pro.css. Tout est sous body.images-actives.vue-pro.rpg-visuel : présentation décochée, l'ancien plateau revient tel quel.
   RÈGLES : aucun texte, aucun ordre du DOM, aucun focus ne change ; la scène est aria-hidden (#rpg-visuel) ; les boutons posés gardent leur texte
   (transparent à l'œil, entier pour le lecteur d'écran) et un cadre de focus épais. */

#rpg-visuel .bp { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau,
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau { display: none; }
body.images-actives.vue-pro.rpg-visuel #accueil-ecrans { max-width: none; }
body.images-actives.vue-pro.rpg-visuel #ecran-rpg { position: relative; }
html body.images-actives.vue-pro.rpg-visuel #rpg-visuel { position: relative; z-index: 1; display: block; flex: 0 0 auto; height: 66dvh; min-height: 0; margin: 0 0 6px; overflow: visible; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bp { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 6px; }

/* ----- La grille de la scène : quatre zones et le centre ----- */
body.images-actives.vue-pro.rpg-visuel .bp-scene { flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(4px, .8vw, 12px);
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) clamp(5.6rem, 9vw, 8.8rem) minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
body.images-actives.vue-pro.rpg-visuel .bp-zone { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; container-type: inline-size;
  padding: 2.2rem 4px 4px; border-radius: 16px; --cz: #6fbcff; --fz: rgba(111,188,255,.10);
  background: linear-gradient(180deg, var(--fz), rgba(8,9,18,.18) 60%, var(--fz)); border: 1px solid color-mix(in srgb, var(--cz) 55%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 12px 26px -16px #000; }
body.images-actives.vue-pro.rpg-visuel .bp-zone[data-camp="adverse"] { --cz: #ff8b8b; --fz: rgba(255,139,139,.10); }
body.images-actives.vue-pro.rpg-visuel .bp-zone[data-zone="B"], body.images-actives.vue-pro.rpg-visuel .bp-zone[data-zone="C"] { --fz: color-mix(in srgb, var(--cz) 20%, transparent); }
/* Le camp qui a la main : sa zone s'éclaire. */
body.images-actives.vue-pro.rpg-visuel .bp-scene[data-main="heros"] .bp-zone[data-camp="heros"],
body.images-actives.vue-pro.rpg-visuel .bp-scene[data-main="adverse"] .bp-zone[data-camp="adverse"] { border-color: var(--cz); box-shadow: inset 0 0 0 1px var(--cz), 0 0 22px -8px var(--cz), 0 12px 26px -16px #000; }
/* L'étiquette de la zone : « ZONE A · ARRIÈRE DES HÉROS ». */
body.images-actives.vue-pro.rpg-visuel .bp-zlib { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: .35rem;
  max-width: calc(100% - 8px); white-space: nowrap; font: 800 clamp(.56rem, 3.6cqi, .76rem)/1.15 var(--vp-titre, system-ui); letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(8,9,18,.9); border: 1px solid var(--cz); border-radius: 7px; padding: .12rem .45rem; }
body.images-actives.vue-pro.rpg-visuel .bp-zlettre { color: #0b0c14; background: var(--cz); border-radius: 4px; padding: 0 .3rem; }
body.images-actives.vue-pro.rpg-visuel .bp-znom { overflow: hidden; text-overflow: ellipsis; }

/* ----- Les jetons : la même grille dans toutes les zones (celle de la zone la plus remplie) ----- */
body.images-actives.vue-pro.rpg-visuel .bp-scene { --cols: 1; --rows: 1; }
body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="2"] { --cols: 1; --rows: 2; }
body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="3"], body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="4"] { --cols: 2; --rows: 2; }
body.images-actives.vue-pro.rpg-visuel .bp-jetons { flex: 1 1 auto; min-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; }
body.images-actives.vue-pro.rpg-visuel .bp-place { flex: 0 0 calc(100% / var(--cols)); height: calc(100% / var(--rows)); box-sizing: border-box; padding: 3px; min-width: 0;
  position: relative; container-type: size; display: flex; align-items: center; justify-content: center; }
/* Le cadre : la taille exacte du jeton (médaillon + plaque), jamais animé : le bouton du jeu s'y pose. --tj = la taille du médaillon. */
body.images-actives.vue-pro.rpg-visuel .bp-cadre { --txt-h: 4rem; --tj: min(78cqw, calc(100cqh - var(--txt-h)), 15rem);
  position: relative; width: min(100cqw, max(calc(var(--tj) * 1.5), 7.5rem)); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton { --cc: #6fbcff; position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton[data-camp="adverse"] { --cc: #ff8b8b; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton:has(.bp-flottant) { z-index: 5; }
/* Le médaillon : un cadre (anneaux, croix, chevron) et l'image du portrait (seule à passer au gris). */
body.images-actives.vue-pro.rpg-visuel .bp-por { position: relative; flex: none; width: var(--tj); height: var(--tj); border-radius: 50%; box-sizing: border-box;
  border: 4px solid var(--cc); background: #101322; box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 12px 20px -6px rgba(0,0,0,.9), 0 0 24px -6px var(--cc);
  transition: transform .5s ease-in .45s, box-shadow .25s; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton[data-camp="adverse"] .bp-por { border: 6px double var(--cc); }
body.images-actives.vue-pro.rpg-visuel .bp-img { position: absolute; inset: 0; border-radius: 50%; background: center / cover no-repeat; transition: filter .3s; }
body.images-actives.vue-pro.rpg-visuel .bp-croix, body.images-actives.vue-pro.rpg-visuel .bp-chevron { display: none; }
/* La plaque : nom, vie et ki en chiffres, jauges, statuts. */
body.images-actives.vue-pro.rpg-visuel .bp-txt { position: relative; z-index: 1; box-sizing: border-box; width: 100%; margin-top: -.55rem;
  padding: .16rem .35rem .26rem; display: flex; flex-direction: column; align-items: stretch; gap: 2px; text-align: center;
  background: rgba(8,9,18,.93); border: 1px solid rgba(255,255,255,.22); border-top: 3px solid var(--cc); border-radius: 9px; box-shadow: 0 6px 14px -6px #000; }
/* Le nom n'est jamais coupé (règle du projet) : il passe à la ligne entre deux mots, deux lignes au plus. */
body.images-actives.vue-pro.rpg-visuel .bp-nom { font: 700 clamp(.5rem, 8.5cqw, 1.08rem)/1.12 var(--vp-titre, system-ui); color: #fff; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
@container (max-width: 7.5rem) { body.images-actives.vue-pro.rpg-visuel .bp-u { display: none; } }
body.images-actives.vue-pro.rpg-visuel .bp-chiffres { font: 650 clamp(.5rem, 7cqw, .92rem)/1.2 system-ui, sans-serif; color: #ece7da; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.images-actives.vue-pro.rpg-visuel .bp-barres { display: grid; gap: 2px; }
body.images-actives.vue-pro.rpg-visuel .bp-jauge { position: relative; display: block; height: 8px; border-radius: 5px; border: 1px solid #000; background: #2a0f12; overflow: hidden; }
body.images-actives.vue-pro.rpg-visuel .bp-jauge.ki { height: 5px; background: #170f2a; }
body.images-actives.vue-pro.rpg-visuel .bp-jauge i { display: block; height: 100%; width: var(--p); transition: width .4s; }
body.images-actives.vue-pro.rpg-visuel .bp-jauge.vie i { background: linear-gradient(90deg, #2f9d55, #6bd98a); }
body.images-actives.vue-pro.rpg-visuel .bp-jauge.ki i { background: linear-gradient(90deg, #7a52d6, #c9a8ff); }
body.images-actives.vue-pro.rpg-visuel .bp-jauge.vie[data-perte]::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(100% - var(--p-vie, 100%)); width: var(--perte);
  background: repeating-linear-gradient(135deg, #fff 0 3px, #ff4d4d 3px 6px); opacity: .95; }
body.images-actives.vue-pro.rpg-visuel .bp-statuts { display: flex; flex-wrap: nowrap; justify-content: center; gap: 3px; overflow: hidden; }
body.images-actives.vue-pro.rpg-visuel .bp-statuts:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-pastille { font: 700 .62rem/1.25 system-ui, sans-serif; padding: 0 5px; border-radius: 999px; white-space: nowrap; background: #1d3550; color: #e6f2ff; border: 1px solid #5a8dc0; }
body.images-actives.vue-pro.rpg-visuel .bp-pastille[data-neg] { background: #4a2a12; color: #ffe6c4; border-color: #c07a3a; }
body.images-actives.vue-pro.rpg-visuel .bp-pastille:nth-child(n+3) { display: none; }

/* ----- Les états ----- */
/* Qui agit : le médaillon se soulève, cerclé d'or qui respire, un chevron doré qui rebondit au-dessus, la plaque dorée. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif { z-index: 4; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif .bp-por { border: 4px solid #ffd27a; transform: translateY(-6px) scale(1.06); transition: transform .25s ease-out, box-shadow .25s;
  box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 0 8px rgba(232,176,74,.95), 0 0 34px 8px rgba(255,200,90,.6), 0 16px 22px -6px #000; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif .bp-txt { border-top-color: #ffd27a; background: #2c2210; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif .bp-chevron { display: block; position: absolute; z-index: 3; left: 50%; top: -1.9rem; transform: translateX(-50%); width: 0; height: 0;
  border: .7rem solid transparent; border-top: .95rem solid #ffd27a; filter: drop-shadow(0 2px 2px #000); }
/* Le personnage sous le focus (clavier, manette, lecteur d'écran) : anneau blanc épais. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.vise .bp-por { outline: 4px solid #fff; outline-offset: 4px; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.vise .bp-txt { border-color: #fff; }
/* Ciblage : chaque cible valable porte un viseur doré pointillé. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.cible-possible .bp-por::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 3px dashed #ffd27a; pointer-events: none; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.cliquable { cursor: pointer; }
/* A joué ce tour : portrait gris tout de suite après son action. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-joue .bp-img { filter: grayscale(1) brightness(.68); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-joue .bp-por { border-color: #8d93a8; box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 10px 18px -6px rgba(0,0,0,.9); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-joue .bp-txt { background: rgba(24,25,34,.94); border-top-color: #8d93a8; }
/* À terre : le personnage est couché (portrait basculé), en couleurs, la pastille « À terre » le dit. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-terre .bp-por { transform: rotate(-90deg); transition: transform .35s ease-in; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-terre.actif .bp-por { transform: rotate(-90deg) scale(1.06); }
/* K.O. : le personnage tombe (le portrait bascule après l'impact), éteint, barré d'une grande croix ROUGE ; il reste sur la scène. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-por { transform: rotate(90deg) scale(.94); border: 4px dashed #8d93a8; box-shadow: 0 0 0 3px rgba(0,0,0,.7); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-img { filter: grayscale(1) brightness(.4); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-croix { display: block; position: absolute; inset: 8%; pointer-events: none; transform: rotate(-90deg);
  background: linear-gradient(45deg, transparent 43%, #ff2e2e 43%, #ff2e2e 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #ff2e2e 43%, #ff2e2e 57%, transparent 57%);
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-txt { background: #17181f; border-top-color: #ff6b6b; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-nom { text-decoration: line-through; color: #e4e4ec; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-chiffres { color: #ffb3b3; font-weight: 900; letter-spacing: .06em; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.ko .bp-jauge { opacity: .45; }
/* Dégâts, soins et ki : de gros chiffres qui montent au-dessus du médaillon. */
body.images-actives.vue-pro.rpg-visuel .bp-flottant { position: absolute; left: 50%; top: max(0px, calc(50% - var(--tj) / 2 - 1.2rem)); z-index: 6; transform: translateX(-50%); white-space: nowrap;
  font: 900 clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem)/1 var(--vp-titre, system-ui); padding: .05rem .4rem; border-radius: 9px; background: rgba(5,6,12,.85);
  text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.9); pointer-events: none; animation: bp-monte 1.8s ease-out forwards; }
body.images-actives.vue-pro.rpg-visuel .bp-flottant[data-sens="degat"] { color: #ff5c5c; border: 2px solid #ff5c5c; }
body.images-actives.vue-pro.rpg-visuel .bp-flottant[data-sens="soin"] { color: #7dffa6; border: 2px solid #7dffa6; }
body.images-actives.vue-pro.rpg-visuel .bp-flottant[data-sens^="ki"] { top: auto; bottom: calc(var(--txt-h) - .2rem); font-size: 1.05rem; color: #e2d2ff; border: 1px solid #c9a8ff; }
body.images-actives.vue-pro.rpg-visuel .bp-flottant[data-calme] { animation: rv-fondu 1.8s linear forwards; }
@keyframes bp-monte { 0% { transform: translate(-50%, 10px) scale(.6); opacity: 0; } 14% { transform: translate(-50%, 0) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, 0) scale(1); }
  75% { opacity: 1; } 100% { transform: translate(-50%, -26px) scale(1); opacity: 0; } }

/* ----- Le centre : le tour, la prévision du ciblage, le dé ----- */
body.images-actives.vue-pro.rpg-visuel .bp-centre { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: .55rem; }
body.images-actives.vue-pro.rpg-visuel .bp-tour { display: flex; flex-direction: column; align-items: center; text-align: center; border: 2px solid #e8b04a; border-radius: 14px; padding: .4rem .4rem;
  background: radial-gradient(120% 120% at 50% 0%, #3a2a0e, #140f06); box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 12px 26px -10px #000, inset 0 0 18px rgba(255,200,90,.18); }
body.images-actives.vue-pro.rpg-visuel .bp-grand { font: 900 clamp(1.1rem, .9rem + 1vw, 1.8rem)/1 var(--vp-titre, system-ui); color: #ffd27a; text-shadow: 0 2px 0 #000; letter-spacing: .04em; text-transform: uppercase; }
body.images-actives.vue-pro.rpg-visuel .bp-petit { font: 700 .84rem/1.25 var(--vp-titre, system-ui); color: #fff; margin-top: .2rem; overflow-wrap: anywhere; }
body.images-actives.vue-pro.rpg-visuel .bp-prevision { text-align: center; font: 800 .9rem/1.25 var(--vp-titre, system-ui); color: #fff; background: rgba(120,20,20,.94);
  border: 2px solid #ffb3b3; border-radius: 10px; padding: .25rem .4rem; box-shadow: 0 8px 18px -8px #000; }
body.images-actives.vue-pro.rpg-visuel .bp-prevision:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-de { display: none; flex-direction: column; align-items: center; gap: .3rem; }
body.images-actives.vue-pro.rpg-visuel .bp-de.visible { display: flex; }
body.images-actives.vue-pro.rpg-visuel .bp-face { display: grid; place-items: center; width: clamp(3.2rem, 9dvh, 5rem); height: clamp(3.2rem, 9dvh, 5rem); border-radius: 16px;
  background: #f4f1e8; color: #14161f; font: 900 clamp(1.8rem, 5.5dvh, 3rem)/1 var(--vp-titre, system-ui); border: 3px solid #fff; box-shadow: 0 5px 0 #b9b2a0, 0 10px 22px rgba(0,0,0,.7); }
body.images-actives.vue-pro.rpg-visuel .bp-de[data-issue="critique"] .bp-face { background: #ffcf5a; box-shadow: 0 5px 0 #b8861d, 0 0 30px rgba(255,190,60,.9); }
body.images-actives.vue-pro.rpg-visuel .bp-de[data-issue="rate"] .bp-face { background: #ff8a8a; box-shadow: 0 5px 0 #a33a3a, 0 10px 22px rgba(0,0,0,.7); }
body.images-actives.vue-pro.rpg-visuel .bp-de[data-issue="touche"] .bp-face { background: #b9ffcf; box-shadow: 0 5px 0 #3f9d5c, 0 10px 22px rgba(0,0,0,.7); }
body.images-actives.vue-pro.rpg-visuel .bp-issue { font: 900 clamp(1rem, .8rem + .8vw, 1.45rem)/1 var(--vp-titre, system-ui); letter-spacing: .06em; padding: .15rem .5rem; border-radius: 8px; background: rgba(8,9,18,.94); }
body.images-actives.vue-pro.rpg-visuel .bp-issue:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-de[data-issue="critique"] .bp-issue { color: #ffd84a; border: 2px solid #ffd84a; }
body.images-actives.vue-pro.rpg-visuel .bp-de[data-issue="touche"] .bp-issue { color: #9dffb8; border: 2px solid #9dffb8; }
body.images-actives.vue-pro.rpg-visuel .bp-de[data-issue="rate"] .bp-issue { color: #ffb0b0; border: 2px solid #ffb0b0; }
body.images-actives.vue-pro.rpg-visuel .bp-seuil { font: 600 .78rem/1.2 system-ui, sans-serif; color: #f2f2f8; background: rgba(8,9,18,.9); border-radius: 6px; padding: 1px 6px; text-align: center; }
body.images-actives.vue-pro.rpg-visuel .bp-seuil:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-de.roule .bp-face { animation: bp-roule .5s cubic-bezier(.2,.8,.3,1.2) 1; }
@keyframes bp-roule { 0% { transform: rotate(-260deg) scale(.4); } 55% { transform: rotate(20deg) scale(1.18); } 75% { transform: rotate(-8deg) scale(1); } 100% { transform: rotate(0) scale(1); } }

/* ----- Le bandeau des dernières annonces, sous la scène ----- */
body.images-actives.vue-pro.rpg-visuel .bp-bandeau { flex: none; list-style: none; margin: 0; padding: .3rem .7rem; display: flex; flex-direction: column; gap: 2px;
  background: rgba(7,8,17,.92); border: 1px solid rgba(232,176,74,.4); border-radius: 12px; font-size: .9rem; color: #e2ddcf; box-shadow: 0 10px 22px -12px #000; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau li { display: flex; gap: 8px; align-items: baseline; min-width: 0; opacity: .85; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau li:last-child { opacity: 1; color: #fff; font-weight: 600; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau li:nth-last-child(n+3) { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau .qui { flex: none; font: 800 .66rem/1.2 var(--vp-titre, system-ui); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau li[data-camp="heros"] .qui { color: #0d1b2a; background: #6fbcff; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau li[data-camp="adverse"] .qui { color: #2a0d0d; background: #ff8b8b; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau .quoi { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ----- Les boutons du jeu posés sur les jetons (body.bp-superpose, rpg-visuel.js superposer) ----- */
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee { display: contents; }
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-zone-lib { display: none; }
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose] { position: absolute; z-index: 6; margin: 0; padding: 0; min-height: 0; box-sizing: border-box;
  color: transparent !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 16px;
  overflow: hidden; opacity: 1 !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose]::before,
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose]::after { opacity: 0 !important; }
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose]:hover { box-shadow: inset 0 0 0 3px rgba(255,255,255,.75) !important; }
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose]:focus,
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose]:focus-visible { outline: 4px solid #fff; outline-offset: -4px;
  box-shadow: inset 0 0 0 8px rgba(232,176,74,.9), 0 0 18px 2px rgba(255,255,255,.35) !important; }
/* Sans autre contenu que les rangées (choix de qui agit, ciblage), le panneau de commandes s'efface : la scène et le décor restent seuls. */
body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone:not(:has(> :not(.rpg-rangee))) { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; overflow: visible; }

/* ----- Mise en page PORTRAIT (téléphone, tablette debout) : de haut en bas, zone D (arrière adverse), C, le centre, B, A (votre arrière) ----- */
@media (max-width: 39.99rem), (max-aspect-ratio: 1/1) {
  html body.images-actives.vue-pro.rpg-visuel #rpg-visuel { height: 66dvh; }
  body.images-actives.vue-pro.rpg-visuel .bp-scene { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr); gap: 4px; }
  /* En colonne (Med, 18/10/2026, 20 h 08) : comme dans les jeux vidéo, les adversaires en haut et les héros en bas : de haut en bas zone D
     (arrière adverse), zone C, le tour et le dé, zone B, zone A (votre arrière). Ordre VISUEL seulement : les boutons, posés sur leurs jetons,
     suivent ; l'ordre de lecture et de navigation reste A, B, C, D. */
  body.images-actives.vue-pro.rpg-visuel .bp-zone[data-zone="A"] { order: 1; }
  body.images-actives.vue-pro.rpg-visuel .bp-zone[data-zone="B"] { order: 2; }
  body.images-actives.vue-pro.rpg-visuel .bp-centre { order: 3; }
  body.images-actives.vue-pro.rpg-visuel .bp-zone[data-zone="C"] { order: 4; }
  body.images-actives.vue-pro.rpg-visuel .bp-zone[data-zone="D"] { order: 5; }
  body.images-actives.vue-pro.rpg-visuel .bp-zone { padding: .95rem 3px 2px; border-radius: 12px; }
  body.images-actives.vue-pro.rpg-visuel .bp-zlib { top: 2px; left: 6px; transform: none; font-size: .6rem; padding: .05rem .35rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-scene, body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax] { --rows: 1; }
  body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="2"] { --cols: 2; }
  body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="3"] { --cols: 3; }
  body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="4"] { --cols: 4; }
  body.images-actives.vue-pro.rpg-visuel .bp-place { padding: 1px 2px; }
  body.images-actives.vue-pro.rpg-visuel .bp-cadre { --txt-h: 2.9rem; --tj: min(66cqw, calc(100cqh - var(--txt-h)), 8rem); width: 100cqw; }
  body.images-actives.vue-pro.rpg-visuel .bp-por { border-width: 3px; }
  body.images-actives.vue-pro.rpg-visuel .bp-jeton[data-camp="adverse"] .bp-por { border-width: 5px; }
  body.images-actives.vue-pro.rpg-visuel .bp-txt { width: 100%; margin-top: -.35rem; padding: .08rem .15rem .16rem; gap: 1px; border-top-width: 2px; }
  body.images-actives.vue-pro.rpg-visuel .bp-nom { font-size: clamp(.58rem, 11.5cqw, .8rem); line-height: 1.05; }
  body.images-actives.vue-pro.rpg-visuel .bp-chiffres { font-size: clamp(.56rem, 10.5cqw, .74rem); }
  body.images-actives.vue-pro.rpg-visuel .bp-jauge { height: 6px; } body.images-actives.vue-pro.rpg-visuel .bp-jauge.ki { height: 4px; }
  body.images-actives.vue-pro.rpg-visuel .bp-statuts { display: none; }
  /* Sans pastilles sur téléphone, « À terre » reste écrit en petit sur le médaillon couché. */
  body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-terre::after { content: "À terre"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap;
    font: 800 .56rem/1.2 system-ui, sans-serif; color: #ffe6c4; background: #4a2a12; border: 1px solid #c07a3a; border-radius: 999px; padding: 0 4px; }
  body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif .bp-chevron { top: -1.05rem; border-width: .45rem; border-top-width: .6rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif .bp-por { transform: translateY(-3px) scale(1.04); box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 0 5px rgba(232,176,74,.95), 0 0 20px 4px rgba(255,200,90,.6); }
  body.images-actives.vue-pro.rpg-visuel .bp-centre { flex-direction: row; align-items: center; gap: .4rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-tour { flex: 1 1 auto; flex-direction: row; align-items: baseline; justify-content: center; gap: .5rem; padding: .15rem .5rem; min-width: 0; }
  body.images-actives.vue-pro.rpg-visuel .bp-grand { font-size: 1rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-petit { margin: 0; font-size: .74rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-prevision { font-size: .72rem; padding: .1rem .3rem; flex: 0 1 auto; }
  body.images-actives.vue-pro.rpg-visuel .bp-de { flex-direction: row; gap: .3rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-face { width: 2.3rem; height: 2.3rem; font-size: 1.3rem; border-radius: 9px; border-width: 2px; }
  body.images-actives.vue-pro.rpg-visuel .bp-issue { font-size: .8rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-seuil { display: none; }
  body.images-actives.vue-pro.rpg-visuel .bp-bandeau { font-size: .78rem; padding: .2rem .5rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-bandeau li:nth-last-child(n+2) { display: none; }
  body.images-actives.vue-pro.rpg-visuel .bp-flottant { font-size: 1.3rem; }
}
/* Paysage bas (téléphone couché) : la scène prend presque tout, la plaque se resserre. */
@media (min-aspect-ratio: 1/1) and (max-height: 30rem) {
  html body.images-actives.vue-pro.rpg-visuel #rpg-visuel { height: 66dvh; }
  body.images-actives.vue-pro.rpg-visuel .bp-zone { padding-top: 1.2rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-zlib { top: 2px; font-size: .58rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-cadre { --txt-h: 3rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-txt { margin-top: -.3rem; padding: .05rem .2rem .12rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-statuts, body.images-actives.vue-pro.rpg-visuel .bp-bandeau, body.images-actives.vue-pro.rpg-visuel .bp-seuil { display: none; }
  body.images-actives.vue-pro.rpg-visuel .bp-face { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
}
/* Grand texte : la scène ne grossit que jusqu'à 115 % (zoom inverse de css/vue-pro.css) ; sa HAUTEUR est corrigée de ce zoom (sinon elle
   rapetissait d'autant), un peu plus basse pour laisser la place aux commandes, qui grandissent pleinement. */
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-visuel { height: calc(52dvh * max(1, var(--vue-echelle, 1) / 1.15)); flex: 0 0 auto; overflow: visible; }
@media (max-width: 39.99rem), (max-aspect-ratio: 1/1) {
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-visuel { height: calc(46dvh * max(1, var(--vue-echelle, 1) / 1.15)); }
}
/* Case très basse (petit téléphone, grand texte) : la plaque se réduit au nom et aux jauges pour garder un vrai médaillon. */
@container (max-height: 5.2rem) {
  /* Case très basse : le jeton se couche en ligne, médaillon à gauche, nom et jauges à droite (la vie et le ki se lisent aux jauges). */
  body.images-actives.vue-pro.rpg-visuel .bp-cadre { --tj: min(calc(100cqh - 6px), 36cqw); width: 100cqw; }
  body.images-actives.vue-pro.rpg-visuel .bp-nom { font-size: clamp(.5rem, 9cqw, .74rem); text-align: left; }
  body.images-actives.vue-pro.rpg-visuel .bp-jeton { flex-direction: row; align-items: center; }
  body.images-actives.vue-pro.rpg-visuel .bp-txt { flex: 1 1 auto; min-width: 0; margin: 0 0 0 -.45rem; padding: .1rem .2rem .15rem .55rem; border-top: 1px solid rgba(255,255,255,.22); border-left: 3px solid var(--cc); }
  body.images-actives.vue-pro.rpg-visuel .bp-chiffres { display: none; }
  body.images-actives.vue-pro.rpg-visuel .bp-jeton.actif .bp-chevron { top: -.85rem; left: calc(var(--tj) / 2); }
}

/* ----- Les mouvements : la case « Effets visuels » fait foi (body.fx-off quand elle est décochée) ----- */
body.images-actives.vue-pro.rpg-visuel:not(.fx-off) .bp-jeton.actif .bp-por { animation: bp-respire 1.4s ease-in-out infinite; }
body.images-actives.vue-pro.rpg-visuel:not(.fx-off) .bp-jeton.actif .bp-chevron { animation: bp-rebond .9s ease-in-out infinite; }
body.images-actives.vue-pro.rpg-visuel:not(.fx-off) .bp-jeton.cible-possible .bp-por::after { animation: vp-viseur 6s linear infinite; }
@keyframes bp-respire { 0%, 100% { box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 0 7px rgba(232,176,74,.9), 0 0 22px 2px rgba(255,200,90,.45), 0 16px 22px -6px #000; }
  50% { box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 0 11px rgba(255,214,120,1), 0 0 46px 14px rgba(255,200,90,.75), 0 16px 22px -6px #000; } }
@keyframes bp-rebond { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
body.fx-off.images-actives.vue-pro.rpg-visuel .bp-por, body.fx-off.images-actives.vue-pro.rpg-visuel .bp-img, body.fx-off.images-actives.vue-pro.rpg-visuel .bp-jauge i { transition: none !important; }
body.fx-off.images-actives.vue-pro.rpg-visuel .bp-flottant { animation: rv-fondu 1.8s linear forwards; }
body.fx-off.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-impact, body.fx-off.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-soin,
body.fx-off.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-projectile { display: none; }
body.fx-off.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-etiquette, body.fx-off.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-mot { animation: rv-fondu 1.8s linear forwards; }

/* ----- Effets d'action plus visibles (projectiles : violet pour le ki, bleu pour la magie, jaune pour le tir ; gerbes à la taille des jetons) ----- */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-projectile { width: 38px; height: 38px; box-shadow: 0 0 26px 12px var(--fxc), -18px 0 18px -4px var(--fxc); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-projectile[data-sorte="ki"] { --fxc: #b07cff; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-projectile[data-sorte="magie"] { --fxc: #4fa8ff; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-projectile[data-sorte="tir"] { --fxc: #ffd84a; width: 46px; height: 14px; border-radius: 7px; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-impact { width: 170px; height: 170px; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-impact.fx-critique { width: 250px; height: 250px; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-etiquette { font-size: clamp(1rem, .85rem + .6vw, 1.35rem); padding: .3rem .9rem; animation-duration: 2.2s; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-mot { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); animation-duration: 1.6s; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-mot-ko { color: #ff5c5c; }
/* Contraste renforcé : plaques et zones noires à bord blanc. */
body.images-actives.vue-contraste.rpg-visuel .bp-txt, body.images-actives.vue-contraste.rpg-visuel .bp-zlib, body.images-actives.vue-contraste.rpg-visuel .bp-bandeau { background: #000; border-color: #fff; }
body.images-actives.vue-contraste.rpg-visuel .bp-zone { background: rgba(0,0,0,.72); border-color: #fff; }
@media (forced-colors: active) {
  body.images-actives.vue-pro.rpg-visuel .bp-zone, body.images-actives.vue-pro.rpg-visuel .bp-txt { border: 1px solid CanvasText; }
  body.images-actives.vue-pro.rpg-visuel .bp-jauge i { forced-color-adjust: none; background: CanvasText !important; }
  /* Couleurs forcées : le texte transparent serait repeint en couleur système par-dessus les jetons (relecture du 18/10/2026). */
  body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose] { forced-color-adjust: none; color: transparent !important; background: transparent !important; }
  body.bp-superpose.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > button.big[data-pose]:focus { outline: 4px solid Highlight; }
}

/* ----- Choix de qui agit et ciblage : le panneau de commandes est vide (les boutons sont sur les jetons) : la scène prend TOUTE la place
   (relecture du 18/10/2026 : un quart de l'écran restait vide et les cibles tactiles rapetissaient). ----- */
html body.bp-superpose.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #rpg-visuel { flex: 1 1 auto; height: auto; min-height: 0; }
html[data-vue-texte="grand"] body.bp-superpose.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #rpg-visuel { flex: 1 1 auto; height: auto; }
html body.bp-superpose.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #rpg-zone { flex: 0 0 0; min-height: 0; max-height: 0; margin: 0; }