/* ===== PRÉSENTATION « JEU VIDÉO » (Med, 16/10/2026) =====
   « Rendu global qualitatif type jeux vidéo de tactical RPG pro, des illustrations dans tous les écrans ; écrans narratifs style visual novel
   (en haut l'illustration, en bas les textes et choix, tout tient en un écran sans faire défiler la page, sur tous les supports) ; en combat,
   l'illustration du décor de la bataille, des jetons pas minuscules, des animations, flashs et effets ; parfaitement compatible avec notre
   accessibilité ; textes lisibles sans effort, bien contrastés. »

   Chargé EN DERNIER. Tout est sous « body.images-actives.vue-pro » (cases « Illustrations décoratives » ET « Présentation de jeu vidéo »,
   écran des options, toutes deux cochées d'usine) : décochées, rien de ce fichier ne s'applique et l'écran reste l'ancien.
   RÈGLES (les mêmes que css/images.css et css/rpg-visuel.css) : aucun texte, aucun ordre du DOM, aucun focus ne change ; tout ce qui est
   dessiné en plus est aria-hidden (#rpg-visuel, #rpg-scene) ou un pseudo-élément sans texte ; les illustrations ne sont jamais déformées
   (une image nette en « contain » sur sa propre version floue) ; le contraste du texte reste d'au moins 7 pour 1 sur les panneaux.
   Trois réglages d'affichage (js/images.js, appliquerReglageVue) : taille du texte (--vue-echelle), contraste renforcé (body.vue-contraste),
   présentation de jeu vidéo (body.vue-pro). Les mouvements suivent la case « Effets visuels » et le réglage « réduire les animations » du système. */

html { font-size: calc(100% * var(--vue-echelle, 1)); }

body.images-actives.vue-pro {
  --vp-or: #e8b04a; --vp-or-clair: #ffd27a; --vp-or-fonce: #7a5a1c;
  --vp-panneau: rgba(10,12,24,.86); --vp-panneau-fort: rgba(7,8,17,.95); --vp-bord: #a98543; --vp-bord-doux: rgba(232,176,74,.35);
  --vp-texte: #f7f4ec; --vp-doux: #e2ddcf;
  --vp-heros: #6fbcff; --vp-adverse: #ff8b8b; --vp-ki: #c9a8ff; --vp-vie: #6bd98a;
  --vp-titre: "Bahnschrift","Segoe UI Semibold","Roboto Condensed","Arial Narrow",system-ui,sans-serif;
  --vp-ombre: 0 26px 60px -24px rgba(0,0,0,.95), 0 2px 0 rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,210,122,.10);
}
body.images-actives.vue-contraste {
  --vp-panneau: rgba(0,0,0,.96); --vp-panneau-fort: #000; --vp-bord: #ffffff; --vp-bord-doux: #ffffff; --vp-doux: #ffffff;
}

/* ===== 1. TOUS LES ÉCRANS : l'illustration plus présente, le contenu dans un panneau de jeu ===== */
body.images-actives.vue-pro #fond-illustration { opacity: .88; }   /* plus présente (Med, 18/10/2026 : « des illustrations de fond dans tous les écrans ») */
body.images-actives.vue-pro::before { background: linear-gradient(180deg, rgba(8,9,18,.18) 0%, rgba(8,9,18,.38) 45%, rgba(8,9,18,.66) 100%); }
body.images-actives.vue-contraste #fond-illustration { opacity: .3; }
body.images-actives.vue-pro #accueil-ecrans > [id^="ecran-"]:not(#ecran-rpg):not(#ecran-combat),
body.images-actives.vue-pro #menu,
body.images-actives.vue-pro:not(.rpg-visuel):not(.rpg-vn) #ecran-rpg {
  background: var(--vp-panneau); border: 1px solid var(--vp-bord); border-radius: 18px;
  padding: clamp(10px, 2.2vw, 26px); box-shadow: var(--vp-ombre); color: var(--vp-texte);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-sizing: border-box; max-width: 100%;
}
/* L'accueil : le logo et les gros boutons restent sur l'illustration, posés sur un socle sombre discret. */
body.images-actives.vue-pro #accueil { background: radial-gradient(120% 90% at 50% 40%, rgba(8,9,18,.55), rgba(8,9,18,0) 75%); border-radius: 24px; padding: clamp(6px,1.5vw,16px); }
body.images-actives.vue-pro #accueil > p, body.images-actives.vue-pro #accueil > h2 { color: var(--vp-texte); text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.8); }
/* Gros boutons des menus : une bordure dorée et une ombre de relief ; le focus, un halo blanc ET or (3 px au moins). */
body.images-actives.vue-pro button.big { box-shadow: 0 3px 0 rgba(0,0,0,.55), 0 10px 18px -10px rgba(0,0,0,.9); border: 1px solid rgba(255,255,255,.35); }
body.images-actives.vue-pro button.big:focus-visible, body.images-actives.vue-pro button.big:focus { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(232,176,74,.75), 0 10px 18px -10px rgba(0,0,0,.9); }
body.images-actives.vue-pro summary { color: var(--vp-or-clair); }
body.images-actives.vue-pro h2.sub { color: var(--vp-or-clair); letter-spacing: .06em; text-shadow: 0 1px 2px #000; }
/* Le glossaire n'avait pas de bannière : celle des règles, la plus proche. */
body.images-actives #ecran-glossaire { --banniere: url(../images/bannieres/regles.webp); }
body.images-actives.vue-pro #ecran-glossaire::before { content: ""; display: block; width: 100%; max-width: 40rem; aspect-ratio: 4 / 1; margin: 0 auto .75rem;
  background: var(--banniere) center / cover no-repeat; border: 1px solid rgba(201,180,138,.55); border-radius: 12px; pointer-events: none; }
/* Bannières un peu plus grandes et dorées : une vraie tête d'écran de jeu. */
body.images-actives.vue-pro #menu::before, body.images-actives.vue-pro #ecran-regles::before, body.images-actives.vue-pro #ecran-caracteristiques::before,
body.images-actives.vue-pro #ecran-commandes::before, body.images-actives.vue-pro #ecran-rpg[data-banniere]::before {
  max-width: 48rem; border: 2px solid var(--vp-bord); box-shadow: 0 14px 30px -16px #000, inset 0 0 0 1px rgba(255,255,255,.08); }
@media (max-height: 34rem) { body.images-actives.vue-pro #menu::before, body.images-actives.vue-pro #ecran-regles::before, body.images-actives.vue-pro #ecran-caracteristiques::before,
  body.images-actives.vue-pro #ecran-commandes::before, body.images-actives.vue-pro #ecran-rpg[data-banniere]::before, body.images-actives.vue-pro #ecran-glossaire::before { max-width: 22rem; } }

/* ===== 2. RÉCIT FAÇON ROMAN VISUEL (body.rpg-vn, rpg/rpg-visuel.js) =====
   L'illustration en haut (décor du lieu, portrait du héros, titre de l'étape), le récit et les choix en bas, dans une boîte de dialogue.
   La page ne défile jamais : seule la boîte défile, en interne, quand le récit est long (le focus y est toujours amené à l'écran). */
#rpg-visuel .vn { display: none; }
body.images-actives.vue-pro.rpg-vn #fond-illustration { opacity: 0; }
body.images-actives.vue-pro.rpg-vn::before { background: #06070e; }
body.images-actives.vue-pro.rpg-vn #rpg-scene { display: none; }
body.images-actives.vue-pro.rpg-vn > h1, body.images-actives.vue-pro.rpg-vn > p.version, body.images-actives.vue-pro.rpg-vn > 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.vue-pro.rpg-vn #ecran-rpg::before { display: none !important; }
body.images-actives.vue-pro.rpg-vn #rpg-visuel { display: block; position: relative; }
body.images-actives.vue-pro.rpg-vn #rpg-visuel .plateau, body.images-actives.vue-pro.rpg-vn #rpg-visuel .bandeau, body.images-actives.vue-pro.rpg-vn #rpg-visuel .fx-couche { display: none; }
body.images-actives.vue-pro.rpg-vn #rpg-visuel .vn { display: block; height: 100%; }
#rpg-visuel .vn-illu { position: relative; height: 100%; overflow: hidden; border-radius: 0 0 20px 20px; border: 2px solid var(--vp-bord); border-top: 0;
  background: #05060c; box-shadow: 0 18px 40px -18px #000; isolation: isolate; }
#rpg-visuel .vn-illu::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--vn-img) center / cover no-repeat; filter: blur(26px) brightness(.6) saturate(1.15); }
#rpg-visuel .vn-img { position: absolute; inset: 0; background: center / contain no-repeat; }
#rpg-visuel .vn-voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,12,0) 55%, rgba(5,6,12,.75) 100%), radial-gradient(120% 100% at 50% 40%, rgba(5,6,12,0) 60%, rgba(5,6,12,.55) 100%); }
#rpg-visuel .vn-portrait { position: absolute; left: clamp(8px, 3vw, 40px); bottom: calc(1.1rem + clamp(4px, 1vh, 12px)); width: clamp(4.5rem, 20dvh, 11rem); aspect-ratio: 1;
  background: #111 center / cover no-repeat; border: 3px solid var(--vp-or); border-radius: 16px; box-shadow: 0 10px 26px rgba(0,0,0,.85), 0 0 0 3px rgba(0,0,0,.5); }
#rpg-visuel .vn-titre { position: absolute; left: 50%; bottom: calc(1.1rem + clamp(6px, 1.5vh, 16px)); transform: translateX(-50%); max-width: calc(100% - 2 * clamp(4.5rem, 20dvh, 11rem) - 4rem);
  text-align: center; }
#rpg-visuel .vn-titre-txt { display: inline-block; font: 700 clamp(1rem, 1rem + .9vw, 1.6rem)/1.2 var(--vp-titre); letter-spacing: .05em; color: var(--vp-or-clair);
  background: linear-gradient(90deg, rgba(8,9,18,0), rgba(8,9,18,.9) 14%, rgba(8,9,18,.9) 86%, rgba(8,9,18,0)); padding: .3rem 2rem; text-shadow: 0 2px 4px #000; overflow-wrap: anywhere; }
#rpg-visuel .vn-titre-txt:empty { display: none; }
#rpg-visuel .vn[data-conseil="1"] .vn-titre-txt { color: #ffe08a; }
@media (max-width: 34rem) { #rpg-visuel .vn-titre { left: auto; right: 8px; transform: none; max-width: calc(100% - clamp(4.5rem, 20dvh, 11rem) - 28px); text-align: right; }
  #rpg-visuel .vn-titre-txt { padding: .25rem .6rem; background: rgba(8,9,18,.9); border-radius: 8px; font-size: 1rem; } }
@media (min-height: 20rem) {
  body.images-actives.vue-pro.rpg-vn { height: 100vh; height: 100dvh; overflow: hidden; padding: 0 !important; box-sizing: border-box; }
  body.images-actives.vue-pro.rpg-vn #accueil-ecrans { box-sizing: border-box; height: 100%; max-width: 80rem; margin-inline: auto; display: flex; flex-direction: column;
    min-height: 0; padding: 0 clamp(6px, 2vw, 18px) clamp(6px, 1.5vh, 16px); }
  body.images-actives.vue-pro.rpg-vn #ecran-rpg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; background: none; border: 0; box-shadow: none; padding: 0; }
  body.images-actives.vue-pro.rpg-vn #rpg-visuel { flex: 0 0 auto; height: clamp(8rem, 42dvh, 32rem); margin-bottom: 0; }
  body.images-actives.vue-pro.rpg-vn #rpg-zone { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding: 12px; }
}
@media (min-height: 20rem) and (max-height: 40rem) { body.images-actives.vue-pro.rpg-vn #rpg-visuel { height: clamp(6rem, 30dvh, 14rem); } }
@media (min-height: 20rem) and (max-width: 34rem) { body.images-actives.vue-pro.rpg-vn #rpg-visuel { height: clamp(7rem, 28dvh, 15rem); } }
/* Le titre de l'écran (« Mode RPG », cible de focus du jeu) : une petite étiquette posée sur l'illustration, jamais cachée (son cadre de focus doit se voir). */
body.images-actives.vue-pro.rpg-vn #rpg-titre { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; padding: .15rem .6rem; font: 600 .78rem/1.3 var(--vp-titre);
  letter-spacing: .1em; text-transform: uppercase; color: var(--vp-doux); background: rgba(8,9,18,.85); border: 1px solid var(--vp-bord-doux); border-radius: 8px; }
/* La boîte de dialogue : panneau sombre, liseré doré, qui chevauche le bas de l'illustration. */
body.images-actives.vue-pro.rpg-vn #rpg-zone { position: relative; z-index: 1; margin: -1.1rem clamp(0px, 1.5vw, 14px) 0; padding: clamp(.8rem, 2vw, 1.5rem) clamp(.8rem, 2.4vw, 2rem);
  background: linear-gradient(180deg, rgba(14,16,32,.97), rgba(8,9,18,.98)); border: 2px solid var(--vp-bord); border-radius: 18px; box-shadow: 0 -10px 30px -12px #000, inset 0 0 0 1px rgba(255,210,122,.14);
  color: var(--vp-texte); display: flex; flex-direction: column; gap: .55rem; }
body.images-actives.vue-pro.rpg-vn #rpg-zone .rpg-ligne { background: none; border: 0; padding: .1rem .2rem; margin: 0; max-width: 72ch; width: 100%; align-self: center;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.6; color: var(--vp-texte); }
body.images-actives.vue-pro.rpg-vn #rpg-zone .rpg-ligne.rpg-conseil { color: #ffe9a8; border-left: 4px solid #ffb703; padding-left: .7rem; }
body.images-actives.vue-pro.rpg-vn #rpg-zone .rpg-ligne:focus { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
/* Les choix : des cartes sombres à liseré doré, avec un losange de choix ; deux colonnes s'il y a la place. */
body.images-actives.vue-pro.rpg-vn #rpg-zone button.big { width: 100%; max-width: 72ch; align-self: center; margin: 0; text-align: left;
  font: 600 clamp(1rem, .95rem + .3vw, 1.15rem)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--vp-texte); padding: .7rem 1rem .7rem 2.4rem; min-height: 2.9rem; border-radius: 12px; border: 1px solid var(--vp-bord);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23e8b04a'/%3E%3C/svg%3E") .9rem 50% / .7rem no-repeat,
              linear-gradient(180deg, #1d2140, #121528); box-shadow: 0 3px 0 rgba(0,0,0,.6); }
body.images-actives.vue-pro.rpg-vn #rpg-zone button.big:hover { background-color: #2a2f58; border-color: var(--vp-or-clair); }
body.images-actives.vue-pro.rpg-vn #rpg-zone button.big:focus, body.images-actives.vue-pro.rpg-vn #rpg-zone button.big:focus-visible {
  outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(232,176,74,.8); }
body.images-actives.vue-pro.rpg-vn #rpg-zone button.big[aria-disabled="true"] { opacity: .65; }
/* Les boutons d'article (icône en ::before) gardent leur icône : pas de losange pour eux. */
body.images-actives.vue-pro.rpg-vn #rpg-zone button.big[data-article], body.images-actives.vue-pro.rpg-vn #rpg-zone button.big[data-achat], body.images-actives.vue-pro.rpg-vn #rpg-zone button.big[data-vente] {
  background: linear-gradient(180deg, #1d2140, #121528); padding-left: 1rem; }

/* ===== 2 bis. LES AUTRES ÉCRANS DU MODE RPG (body.rpg-ecran-pro : menus d'aventure, emplacements, coffre, boutique, équipe, scénarios) =====
   Un seul écran, comme le récit : la bannière en tête, la liste dans le panneau, qui défile seule si elle est longue. */
@media (min-height: 20rem) {
  body.images-actives.vue-pro.rpg-ecran-pro { height: 100vh; height: 100dvh; overflow: hidden; box-sizing: border-box; padding-top: 0 !important; padding-bottom: 0 !important; }
  body.images-actives.vue-pro.rpg-ecran-pro > h1, body.images-actives.vue-pro.rpg-ecran-pro > p.version, body.images-actives.vue-pro.rpg-ecran-pro > 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.vue-pro.rpg-ecran-pro #accueil-ecrans { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; min-height: 0; padding: clamp(6px, 1.5vh, 16px) clamp(6px, 2vw, 18px); }
  /* Le panneau prend la hauteur de son contenu (au plus l'écran) : l'illustration du lieu se voit dessous (Med, 18/10/2026). */
  body.images-actives.vue-pro.rpg-ecran-pro #ecran-rpg { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.images-actives.vue-pro.rpg-ecran-pro #ecran-rpg[data-banniere]::before { flex: none; width: min(100%, 48rem, 72dvh); margin-bottom: .4rem; }
  body.images-actives.vue-pro.rpg-ecran-pro #rpg-titre { flex: none; }
  body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding: 12px; padding: 4px; }
}

/* ===== 3. LE PLATEAU DE BATAILLE (body.rpg-visuel) : une vraie scène de tactical RPG =====
   Les adversaires à gauche, vos héros à droite (en paysage), ou les adversaires en haut et vos héros en bas (en portrait) : dans les deux cas
   l'ordre A, B, C, D des zones, le MÊME que celui des rangées de boutons du jeu (pas de contresens pour qui suit le focus à l'œil).
   Chaque zone est un socle lumineux de la couleur du camp ; chaque personnage, un grand médaillon (portrait, liseré du camp : plein pour les
   héros, double pour les adversaires), son nom, sa vie et son ki. */
body.images-actives.vue-pro.rpg-visuel #rpg-scene .voile { background: radial-gradient(120% 90% at 50% 40%, rgba(5,6,12,0) 40%, rgba(5,6,12,.55) 100%),
  linear-gradient(180deg, rgba(5,6,12,.0) 0%, rgba(5,6,12,.15) 45%, rgba(5,6,12,.75) 80%, rgba(5,6,12,.92) 100%); }
/* Le fond de la bataille reste ENTIER (contain, css/rpg-visuel.css) sur sa version floue : jamais rogné ni déformé (relecture du 16/10/2026). */
body.images-actives.vue-pro.rpg-visuel #fond-illustration { opacity: 0; }
body.images-actives.vue-pro.rpg-visuel #ecran-rpg, body.images-actives.vue-pro.rpg-vn #ecran-rpg { overflow-x: clip; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel { position: relative; overflow: visible; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau { position: relative; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau::before { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote,
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau[data-main] .cote { background: none; border: 0; box-shadow: none !important; padding: 0; transform: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote-titre { align-self: center; margin: 0 0 4px; padding: .12rem .8rem; border-radius: 999px; font: 800 .8rem/1.2 var(--vp-titre);
  letter-spacing: .16em; color: #0b0c14; background: var(--c); box-shadow: 0 2px 8px rgba(0,0,0,.6); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau[data-main="heros"] .cote[data-camp="heros"] .cote-titre,
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau[data-main="adverse"] .cote[data-camp="adverse"] .cote-titre { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--c); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="adverse"] { order: 1; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .centre { order: 2; transform: none !important; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="heros"] { order: 3; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="adverse"] .zone[data-zone="A"], body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="heros"] .zone[data-zone="C"] { order: -1; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zones { flex: 1 1 auto; min-height: 0; display: grid; gap: clamp(4px, 1vw, 12px); }
/* Une zone : un socle elliptique lumineux au sol, de la couleur du camp, l'étiquette de la zone posée dessus. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone,
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center;
  border: 0; border-radius: 18px; box-shadow: none; padding: 1.5rem 4px 6px;
  background: radial-gradient(ellipse 72% 30% at 50% 82%, var(--socle), rgba(0,0,0,0) 72%), radial-gradient(ellipse 85% 50% at 50% 78%, rgba(0,0,0,.42), rgba(0,0,0,0) 78%); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="heros"] .zone { --socle: rgba(111,188,255,.30); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="adverse"] .zone { --socle: rgba(255,139,139,.28); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone="B"], body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone="C"] { --socle-fort: 1; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zlib { position: absolute; top: .2rem; left: 50%; transform: translateX(-50%); z-index: 1; white-space: nowrap;
  font: 800 .78rem/1.2 var(--vp-titre); letter-spacing: .12em; text-transform: uppercase; color: var(--vp-texte); background: rgba(8,9,18,.82); padding: .1rem .55rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jetons { display: grid; grid-template-columns: minmax(0,1fr); gap: .45rem .5rem; justify-items: center; align-items: end; width: 100%; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="3"] .jetons, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="4"] .jetons { grid-template-columns: repeat(2, minmax(0,1fr)); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="3"] .jeton:nth-child(3) { grid-column: 1 / -1; }

/* Le jeton : un médaillon, la plaque du nom, les jauges. --tj = la taille du médaillon (plus petite quand la zone est pleine). */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton,
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton[data-camp] { --tj: clamp(3.2rem, 11.5dvh, 6.6rem); position: relative; display: flex; flex-direction: column; align-items: center; gap: 0;
  width: min(100%, 10rem); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; outline: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="3"] .jeton, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="4"] .jeton { --tj: clamp(2.8rem, 8dvh, 4.8rem); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .por,
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton .por { width: var(--tj); height: var(--tj); margin: 0; border-radius: 50%; background-color: #101322; grid-row: auto;
  border: 3px solid var(--cc); box-shadow: 0 0 0 3px rgba(0,0,0,.65), 0 10px 18px -4px rgba(0,0,0,.85), 0 0 22px -6px var(--cc); filter: none; transition: transform .25s ease-out; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton[data-camp="heros"] { --cc: var(--vp-heros); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton[data-camp="adverse"] { --cc: var(--vp-adverse); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton[data-camp="adverse"] .por { border: 5px double var(--cc); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .txt { position: relative; z-index: 1; width: 100%; margin-top: -.75rem; padding: .2rem .4rem .3rem; box-sizing: border-box;
  background: rgba(8,9,18,.92); border: 1px solid rgba(255,255,255,.2); border-top: 2px solid var(--cc); border-radius: 9px; box-shadow: 0 6px 14px -6px #000; align-items: stretch; gap: 2px; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .tete { flex-direction: column; align-items: center; justify-content: center; gap: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .nom { font: 700 .88rem/1.15 var(--vp-titre); color: #fff; text-align: center; overflow-wrap: anywhere; text-decoration: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .chiffres { display: block; font: 600 .78rem/1.2 system-ui, sans-serif; color: var(--vp-doux); text-align: center; white-space: normal; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .barres { display: grid; gap: 2px; width: 100%; filter: none; opacity: 1; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jauge { height: 8px; border-radius: 5px; border: 1px solid #000; background: #2a0f12; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jauge.ki { height: 6px; background: #170f2a; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .statuts { justify-content: center; margin-top: 2px; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .pastille { font-size: .72rem; font-weight: 700; }
/* Qui agit : le médaillon se soulève, couronné d'un anneau doré qui pulse ; un chevron doré le désigne. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.actif { transform: translateY(-6px); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.actif .por { border-color: var(--vp-or-clair); transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(0,0,0,.65), 0 0 0 7px rgba(232,176,74,.9), 0 0 30px 6px rgba(255,200,90,.55), 0 14px 22px -6px #000; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.actif .txt { border-top-color: var(--vp-or-clair); background: #2a2010; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.actif::before { content: ""; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); border: 9px solid transparent;
  border-top: 12px solid var(--vp-or-clair); 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 #rpg-visuel .jeton.vise { outline: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.vise .por { outline: 4px solid #fff; outline-offset: 4px; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.vise .txt { border-color: #fff; }
/* Ciblage : chaque cible valable porte un viseur pointillé ; la cible sous le focus, l'anneau blanc en plus. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.cible-possible .por::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px dashed var(--vp-or-clair); pointer-events: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .por { position: relative; }
/* A joué ce tour : grisé ; à terre : couché ; K.O. : éteint et barré d'une croix rouge. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.a-joue .por { filter: grayscale(1) brightness(.75); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.a-joue .txt { background: rgba(20,21,30,.92); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.a-terre { transform: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.a-terre .por { transform: rotate(-90deg) translateX(-6px); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.ko .por { filter: grayscale(1) brightness(.45); opacity: 1; border-style: dashed; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.ko .por::before { content: ""; position: absolute; inset: 14%; pointer-events: none;
  background: linear-gradient(45deg, transparent 44%, #ff4d4d 44%, #ff4d4d 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #ff4d4d 44%, #ff4d4d 56%, transparent 56%); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.ko .nom { text-decoration: line-through; color: #e0e0e8; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.ko .chiffres { color: #ffb0b0; font-weight: 800; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.cliquable:hover .por { outline: 3px solid #fff; outline-offset: 3px; }
/* Chiffres de dégâts et de soins : plus grands, au-dessus du médaillon. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .flottant { top: -.6rem; right: auto; left: 50%; margin-left: calc(var(--tj) / 2 - .4rem); font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); z-index: 3; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .flottant[data-sens^="ki"] { top: calc(var(--tj) * .45); font-size: 1.05rem; }
/* Le centre : le tour (blason doré) et le dé. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .centre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-width: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .tour { flex: none; width: 100%; box-sizing: border-box; border: 2px solid var(--vp-or); border-radius: 14px; padding: .4rem .5rem;
  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 #rpg-visuel .tour .grand { font: 900 clamp(1.2rem, 1rem + 1vw, 1.9rem)/1 var(--vp-titre); color: var(--vp-or-clair); text-shadow: 0 2px 0 #000; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .tour .petit { font: 700 .86rem/1.25 var(--vp-titre); color: #fff; margin-top: .2rem; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de .face { width: clamp(3rem, 8dvh, 4.6rem); height: clamp(3rem, 8dvh, 4.6rem); font-size: clamp(1.6rem, 5dvh, 2.6rem); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de .seuil { font-size: .82rem; }
/* Le bandeau des dernières annonces : sous la scène, trois lignes au plus, la plus récente en blanc. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau { margin: 6px 0 0; padding: .35rem .7rem; background: rgba(7,8,17,.9); border: 1px solid var(--vp-bord-doux); border-radius: 12px;
  font-size: .92rem; color: var(--vp-doux); box-shadow: 0 10px 22px -12px #000; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau li { opacity: .85; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau li:last-child { opacity: 1; color: #fff; font-weight: 600; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau li:nth-last-child(n+4) { display: none; }

/* Mise en page PAYSAGE (ordinateur, tablette ou téléphone couchés) : adversaires | tour et dé | héros, la scène prend plus de la moitié de l'écran. */
@media (min-width: 40rem) and (min-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel { height: auto; min-height: clamp(13rem, 50dvh, 40rem); flex: 1 1 auto; display: flex; flex-direction: column; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0,2fr) minmax(6.5rem, 9.5rem) minmax(0,2fr);
    perspective: none; align-items: stretch; gap: clamp(4px, 1.2vw, 18px); }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zones { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: minmax(0,1fr); }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau { flex: none; }
}
@media (min-width: 40rem) and (min-aspect-ratio: 1/1) and (max-height: 34rem) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton { --tj: clamp(2.4rem, 12dvh, 4rem); }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="3"] .jeton, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="4"] .jeton { --tj: clamp(2rem, 8dvh, 3rem); }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .chiffres { display: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone { padding-top: 1.2rem; }
}
/* Mise en page PORTRAIT (téléphone, tablette debout) : adversaires en haut (A puis B), le tour, vos héros en bas (C puis D) ; une rangée par zone. */
@media (max-width: 39.99rem), (max-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .plateau { display: flex; flex-direction: column; gap: 4px; perspective: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zones { grid-template-columns: minmax(0,1fr); gap: 2px; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote-titre { position: absolute; left: 4px; margin: 0; z-index: 2; font-size: .66rem; padding: .06rem .45rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote { position: relative; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="adverse"] .cote-titre { top: -2px; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote[data-camp="heros"] .cote-titre { top: 0; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] { flex-direction: row; padding: 2px 4px 2px; min-height: 1.6rem;
    background: radial-gradient(ellipse 60% 70% at 50% 80%, var(--socle), rgba(0,0,0,0) 75%); }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zlib { top: 50%; left: auto; right: 2px; transform: translateY(-50%) rotate(-90deg); transform-origin: 50% 50%; font-size: .6rem; padding: .05rem .3rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="0"] .zlib { transform: translateY(-50%); }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jetons, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n] .jetons { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 4px; padding-right: 1.1rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n] .jeton { --tj: clamp(2.3rem, 6dvh, 3.6rem); width: calc((100% - 12px) / 4); max-width: 6rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .txt { margin-top: -.45rem; padding: .1rem .2rem .2rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .nom { font-size: .72rem; line-height: 1.1; overflow-wrap: normal; word-break: normal; hyphens: manual; letter-spacing: -.01em; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .chiffres, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .statuts { display: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton.actif::before { top: -12px; border-width: 7px; border-top-width: 9px; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .centre { flex-direction: row; gap: .5rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .tour { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: .6rem; padding: .2rem .6rem; flex: 1 1 auto; width: auto; min-width: 0; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de .seuil { font-size: .72rem; max-width: 4.5rem; white-space: normal; line-height: 1.1; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .tour .grand { font-size: 1.15rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .tour .petit { margin: 0; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de { flex-direction: row; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de .face { width: 2.6rem; height: 2.6rem; font-size: 1.5rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau li:nth-last-child(n+3) { display: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .flottant { font-size: 1.3rem; top: -.2rem; }
}

/* La scène prend la place que les commandes laissent : une fenêtre de commandes courte (« Résolution en cours ») agrandit la scène, une longue
   (menu d'actions complet) défile en interne, sans jamais repousser la scène sous sa hauteur minimale. */
@media (min-height: 20rem) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel { flex: 1 1 auto; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone { flex: 0 1 auto; max-height: 50dvh; }
}
@media (min-height: 20rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel { min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone { max-height: 52dvh; }
}
/* La fenêtre de commandes (#rpg-zone) : un panneau de jeu sous la scène, liseré doré ; il défile seul si la liste est longue. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone { background: linear-gradient(180deg, rgba(14,16,32,.96), rgba(7,8,17,.97)); border: 1px solid var(--vp-bord); border-top: 3px solid var(--vp-or);
  border-radius: 16px; padding: clamp(6px, 1vw, 12px); box-shadow: 0 -8px 24px -14px #000; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big { font-size: clamp(.98rem, .92rem + .25vw, 1.1rem); font-weight: 650; min-height: 2.75rem; color: #fff;
  background: linear-gradient(180deg, #1c2040, #11142a); border: 1px solid #4b5378; border-left: 6px solid var(--t, #8b90a8); border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.6); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big:hover { background: #2a2f58; border-color: var(--vp-or-clair); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big:focus, body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big:focus-visible {
  outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(232,176,74,.8); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-ligne { font-size: 1rem; background: rgba(8,9,18,.9); color: #fff; border-left-color: var(--vp-or); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee { background: rgba(8,9,18,.6); border-radius: 12px; }
body.images-actives.vue-pro.rpg-visuel #rpg-titre { padding: .12rem .6rem; font-size: .78rem; color: var(--vp-doux); border: 1px solid var(--vp-bord-doux); background: rgba(8,9,18,.85); }
@media (min-width: 40rem) and (min-aspect-ratio: 1/1) {
  /* En paysage, les quatre rangées de boutons côte à côte, dans l'ordre de la scène : A, B, C, D. */
  body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="terrain"] { grid-template-columns: repeat(4, minmax(0,1fr)); }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
}

/* ===== 4. LES EFFETS DE BATAILLE (rpg/rpg-visuel.js : fx-couche) ===== */
#rpg-visuel .fx-couche { display: none; }
/* Deux couches : les projectiles, gerbes et étincelles PASSENT SOUS les jetons (les chiffres et les noms restent lisibles par-dessus) ; les
   étiquettes d'action et les mots (« Critique ! », « Raté ») au-dessus de tout. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-couche { display: block; position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 1; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .fx-couche.fx-haut { z-index: 7; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton { z-index: 2; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .flottant { background: rgba(5,6,12,.82); border-radius: 8px; padding: .05rem .35rem; white-space: nowrap; }
#rpg-visuel .fx-projectile { position: absolute; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%,-50%); --fxc: #c9a8ff;
  background: radial-gradient(circle, #fff 0 22%, var(--fxc) 42%, rgba(0,0,0,0) 70%); box-shadow: 0 0 20px 8px var(--fxc); }
#rpg-visuel .fx-projectile[data-sorte="tir"] { --fxc: #ffe08a; width: 34px; height: 12px; border-radius: 6px; }
#rpg-visuel .fx-projectile[data-sorte="magie"] { --fxc: #7fe0ff; }
#rpg-visuel .fx-projectile[data-sorte="feu"] { --fxc: #ff8a3c; width: 22px; height: 22px; }
#rpg-visuel .fx-impact { position: absolute; width: 130px; height: 130px; border-radius: 50%; transform: translate(-50%,-50%) scale(.3); opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,.98) 0 9%, rgba(255,196,90,.9) 20%, rgba(255,90,50,.55) 38%, rgba(255,60,40,0) 62%); animation: fx-boum .55s ease-out forwards; }
#rpg-visuel .fx-impact.fx-critique { width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,1) 0 8%, rgba(255,220,110,.95) 18%, rgba(255,170,40,.6) 36%, rgba(255,140,0,0) 60%),
              repeating-conic-gradient(rgba(255,230,140,.75) 0 6deg, rgba(255,230,140,0) 6deg 30deg); -webkit-mask: radial-gradient(circle, #000 35%, transparent 62%); mask: radial-gradient(circle, #000 35%, transparent 62%); }
@keyframes fx-boum { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 1; } 60% { opacity: .9; } 100% { transform: translate(-50%,-50%) scale(1.25); opacity: 0; } }
#rpg-visuel .fx-soin { position: absolute; width: 110px; height: 110px; transform: translate(-50%,-50%); opacity: 0;
  background: radial-gradient(circle at 30% 70%, #b6ffd0 0 4px, transparent 5px), radial-gradient(circle at 70% 60%, #7dffa6 0 5px, transparent 6px), radial-gradient(circle at 50% 40%, #e8fff0 0 3px, transparent 4px),
              radial-gradient(circle at 20% 35%, #7dffa6 0 3px, transparent 4px), radial-gradient(circle at 80% 30%, #b6ffd0 0 4px, transparent 5px), radial-gradient(circle, rgba(125,255,166,.35), rgba(125,255,166,0) 65%);
  animation: fx-soin 1s ease-out forwards; }
@keyframes fx-soin { 0% { transform: translate(-50%,-30%) scale(.7); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%,-85%) scale(1.1); opacity: 0; } }
#rpg-visuel .fx-etiquette { position: absolute; transform: translate(-50%, calc(-50% - var(--hauteur, 4.4rem))); white-space: nowrap; z-index: 2;
  font: 800 clamp(.9rem, .8rem + .4vw, 1.1rem)/1.2 var(--vp-titre, system-ui); color: #fff; background: rgba(8,9,18,.94); border: 2px solid var(--ce, #e8b04a);
  padding: .2rem .7rem; border-radius: 9px; box-shadow: 0 8px 18px -6px #000; animation: fx-etiquette 1.7s ease-out forwards; }
#rpg-visuel .fx-etiquette[data-camp="heros"] { --ce: #6fbcff; }
#rpg-visuel .fx-etiquette[data-camp="adverse"] { --ce: #ff8b8b; }
#rpg-visuel .fx-etiquette[data-calme] { animation: rv-fondu 1.7s linear forwards; }
@keyframes fx-etiquette { 0% { opacity: 0; margin-top: 8px; } 12% { opacity: 1; margin-top: 0; } 80% { opacity: 1; } 100% { opacity: 0; margin-top: -8px; } }
#rpg-visuel .fx-mot { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; font: 900 clamp(1.2rem, 1rem + 1vw, 1.9rem)/1 var(--vp-titre, system-ui);
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.9); animation: fx-mot 1.2s ease-out forwards; }
#rpg-visuel .fx-mot-critique { color: #ffd84a; }
#rpg-visuel .fx-mot-rate { color: #e6e6f0; }
@keyframes fx-mot { 0% { opacity: 0; transform: translate(-50%,-30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%,-80%) scale(1.15); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-140%) scale(1); } }
/* Qui agit : son anneau doré respire (seulement avec les animations du système et la case « Effets visuels »). */
@media all {   /* la case « Effets visuels » fait foi, plus le réglage du système (18/10/2026) */
  body.images-actives.vue-pro.rpg-visuel:has(#effets-visuels:checked) #rpg-visuel .jeton.actif .por { animation: vp-respire 1.6s ease-in-out infinite; }
  body.images-actives.vue-pro.rpg-visuel:has(#effets-visuels:checked) #rpg-visuel .jeton.cible-possible .por::after { animation: vp-viseur 6s linear infinite; }
}
@keyframes vp-respire { 0%, 100% { box-shadow: 0 0 0 3px rgba(0,0,0,.65), 0 0 0 7px rgba(232,176,74,.9), 0 0 22px 2px rgba(255,200,90,.4), 0 14px 22px -6px #000; }
  50% { box-shadow: 0 0 0 3px rgba(0,0,0,.65), 0 0 0 9px rgba(255,214,120,1), 0 0 40px 10px rgba(255,200,90,.7), 0 14px 22px -6px #000; } }
@keyframes vp-viseur { to { transform: rotate(360deg); } }
body.fx-off #rpg-visuel .fx-impact, body.fx-off #rpg-visuel .fx-soin, body.fx-off #rpg-visuel .fx-mot, body.fx-off #rpg-visuel .fx-projectile { display: none; }
body.fx-off #rpg-visuel .fx-etiquette { animation: rv-fondu 1.7s linear forwards; }

/* ===== 5. CONTRASTE FORCÉ ET RENFORCÉ ===== */
body.images-actives.vue-contraste.rpg-visuel #rpg-visuel .jeton .txt, body.images-actives.vue-contraste.rpg-visuel #rpg-zone, body.images-actives.vue-contraste.rpg-vn #rpg-zone { background: #000; border-color: #fff; }
body.images-actives.vue-contraste.rpg-visuel #rpg-zone button.big, body.images-actives.vue-contraste.rpg-vn #rpg-zone button.big { background: #000; border-color: #fff; color: #fff; }
body.images-actives.vue-contraste.rpg-visuel #rpg-visuel .zlib, body.images-actives.vue-contraste.rpg-visuel #rpg-visuel .bandeau { background: #000; border-color: #fff; color: #fff; }
@media (forced-colors: active) {
  #rpg-visuel .vn-illu, #rpg-visuel .fx-couche { display: none !important; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .por { forced-color-adjust: none; }
  body.images-actives.vue-pro.rpg-vn #rpg-zone, body.images-actives.vue-pro.rpg-vn #rpg-zone button.big { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}
@media (min-height: 20rem) { body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big { margin: .3rem .25rem; } }
/* Les grilles et colonnes de boutons dans un panneau de hauteur bornée : jamais une rangée plus petite que son bouton (min-height 44 px
   remplace la taille minimale automatique, et le navigateur rétrécissait les rangées : boutons superposés). */
body.images-actives.vue-pro.rpg-visuel #rpg-zone { grid-auto-rows: max-content; align-content: start; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-colonnes, body.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee { grid-auto-rows: max-content; }
body.images-actives.vue-pro.rpg-vn #rpg-zone > * , body.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-rangee > * { flex-shrink: 0; }
/* Noms des jetons : jamais coupés au milieu d'une syllabe ; césure française si la place manque (« Shéhéra-zade »). */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .nom { overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="3"] .jeton .nom, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="4"] .jeton .nom { font-size: .8rem; }
/* Portrait : la scène garde TOUJOURS sa hauteur (jamais recouverte par les commandes, même en grand texte) ; les commandes prennent le reste et défilent. */
@media (min-height: 20rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel { flex: 0 0 auto; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone { flex: 1 1 auto; max-height: none; min-height: 0; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-visuel .bandeau { display: none; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton { --tj: clamp(2rem, 5.5dvh, 3rem); }
}
@media (max-width: 39.99rem), (max-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .nom[data-long="1"] { font-size: .64rem; letter-spacing: -.03em; }
}

/* ===== CORRECTIFS DE LA RELECTURE ADVERSARIALE (16/10/2026) ===== */
/* GRAND TEXTE (taille du texte au-dessus de 100) : la SCÈNE ne grossit que jusqu'à 115 % (zoom inverse), les commandes grossissent pleinement.
   Les jetons tiennent donc toujours dans leur zone, en portrait comme en paysage ; tout ce que dit la scène est aussi dit par les boutons. */
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-visuel { zoom: min(1, calc(1.15 / var(--vue-echelle, 1))); }
@media (min-height: 20rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-zone { min-height: min(45dvh, 16rem); }
}
/* Mouvement réduit : plus aucune transition du médaillon. */
body.fx-off.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .por { transition: none; }
body.images-actives.vue-pro:not(:has(#effets-visuels:checked)) #rpg-visuel .jeton .por { transition: none; }
/* Le titre de l'écran, cible de focus du jeu : le même anneau blanc épais que partout. */
body.images-actives.vue-pro #rpg-titre:focus, body.images-actives.vue-pro #rpg-titre:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Couleurs forcées : pendant le récit, l'illustration masquée ne laisse pas de bande vide. */
@media (forced-colors: active) { body.images-actives.vue-pro.rpg-vn #rpg-visuel { display: none !important; } body.images-actives.vue-pro.rpg-vn #rpg-zone { margin-top: 0; } }
/* CONTRASTE RENFORCÉ, AUSSI SANS ILLUSTRATIONS NI PRÉSENTATION DE JEU VIDÉO (deuxième relecture du 17/10/2026) : texte blanc sur fond noir,
   bords blancs, titres jaunes ; les gros boutons orange à texte noir gardent leur contraste (au-delà de 9 pour 1). */
body.vue-contraste { background: #000 !important; color: #fff; }
body.vue-contraste::before { background: #000 !important; }
body.vue-contraste #fond-illustration { opacity: .2 !important; }
body.vue-contraste p, body.vue-contraste label, body.vue-contraste li, body.vue-contraste .rpg-ligne { color: #fff; }
body.vue-contraste summary, body.vue-contraste h2, body.vue-contraste h3 { color: #ffe14d; }
body.vue-contraste #rpg-zone .rpg-ligne { background: #000; border-color: #fff; }
body.vue-contraste button.big { border: 2px solid #fff; }
body.vue-contraste :focus-visible { outline: 4px solid #ffe14d !important; outline-offset: 2px; }

/* ===== CORRECTIFS DE LA DEUXIÈME RELECTURE (17/10/2026) ===== */
/* États des jetons : même priorité que la règle du médaillon (.zone[data-zone]), sinon « a joué », K.O., double liseré et anneau doré ne s'affichaient pas. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton[data-camp="adverse"] .por { border: 5px double var(--cc); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton.actif .por { border: 3px solid var(--vp-or-clair); transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(0,0,0,.65), 0 0 0 7px rgba(232,176,74,.95), 0 0 30px 6px rgba(255,200,90,.55), 0 14px 22px -6px #000; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton.a-joue .por { filter: grayscale(1) brightness(.7); }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton.a-joue .txt { opacity: .9; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton.ko .por { filter: grayscale(1) brightness(.45); border-style: dashed; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] .jeton.vise .por { outline: 4px solid #fff; outline-offset: 4px; }
/* Jauges un peu plus épaisses ; segment hachuré de la vie que le coup visé peut emporter (prévision du ciblage). */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jauge.vie { height: 10px; position: relative; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .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: .9; }
#rpg-visuel .prevision { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .prevision { display: block; text-align: center; font: 800 .95rem/1.25 var(--vp-titre); color: #fff; background: rgba(120,20,20,.92);
  border: 2px solid #ffb3b3; border-radius: 10px; padding: .25rem .5rem; box-shadow: 0 8px 18px -8px #000; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .prevision:empty { display: none; }
/* Les chiffres de dégâts passent AU-DESSUS du jeton voisin. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton:has(.flottant) { z-index: 5; }
/* Mots d'issue sur une plaque sombre (lisibles même sur l'éclair). */
#rpg-visuel .fx-mot { background: rgba(8,9,18,.92); padding: .12rem .55rem; border-radius: 9px; border: 2px solid currentColor; }
/* Sous le dé, le mot de l'issue. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de[data-issue="critique"] .seuil::before { content: "CRITIQUE · "; font-weight: 900; color: #ffd84a; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de[data-issue="touche"] .seuil::before { content: "TOUCHÉ · "; font-weight: 900; color: #9dffb8; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .de[data-issue="rate"] .seuil::before { content: "RATÉ · "; font-weight: 900; color: #ffb0b0; }
/* Noms : jamais plus larges que leur jeton. */
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jeton .nom { max-width: 100%; min-width: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="3"] .jeton .nom[data-long="1"], body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n="4"] .jeton .nom[data-long="1"] { font-size: .7rem; letter-spacing: -.02em; }
@media (max-width: 39.99rem), (max-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n] .jeton { flex: 1 1 0; width: auto; max-width: 7rem; min-width: 0; }
}
/* Le titre « Mode RPG » garde un anneau de focus entier (le conteneur rogne ce qui dépasse). */
body.images-actives.vue-pro.rpg-visuel #rpg-titre:focus, body.images-actives.vue-pro.rpg-visuel #rpg-titre:focus-visible { outline-offset: -3px; }
/* Paysage : une scène de hauteur FIXE (elle ne saute plus d'une étape à l'autre), les jetons posés au sol ; les commandes prennent le reste. */
@media (min-height: 20rem) and (min-width: 40rem) and (min-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel { flex: 0 0 clamp(14rem, 52dvh, 34rem); min-height: 0; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone { flex: 1 1 auto; max-height: none; min-height: 0; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-zone] { justify-content: flex-end; padding-bottom: 5%; }
}
/* Grand texte : rangées de boutons qui passent à la ligne au lieu de quatre colonnes serrées ; paysage bas : la scène se resserre. */
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="terrain"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
@media (min-height: 20rem) and (max-height: 30rem) and (min-aspect-ratio: 1/1) {
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-visuel { flex: 0 1 38dvh; min-height: 0; overflow: hidden; }
}
/* Menus du mode RPG et choix du récit : le texte des boutons passe à la ligne, jamais rogné ; mêmes cartes sombres à liseré doré que le récit. */
body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big, body.images-actives.vue-pro.rpg-vn #rpg-zone button.big { max-width: calc(100% - .5rem); min-width: 0; box-sizing: border-box; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big:not([data-article]):not([data-achat]):not([data-vente]):not([data-conso]) {
  color: var(--vp-texte); text-align: left; padding: .65rem 1rem .65rem 2.3rem; border-radius: 12px; border: 1px solid var(--vp-bord);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23e8b04a'/%3E%3C/svg%3E") .85rem 50% / .65rem no-repeat, linear-gradient(180deg, #1d2140, #121528); }
body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big[data-article], body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big[data-achat], body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big[data-vente] {
  color: var(--vp-texte); border: 1px solid var(--vp-bord); border-radius: 12px; background: linear-gradient(180deg, #1d2140, #121528); }
body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big:hover { background-color: #2a2f58; border-color: var(--vp-or-clair); }
body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big:focus, body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone button.big:focus-visible { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(232,176,74,.8); }
body.images-actives.vue-pro.rpg-ecran-pro #rpg-zone .rpg-ligne { color: var(--vp-texte); }
/* Titre de l'étape du récit : césure propre, jamais coupé au milieu d'une syllabe. */
#rpg-visuel .vn-titre-txt { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
/* Récit sur un téléphone COUCHÉ : l'illustration à gauche, le texte à droite (une bande de 95 px ne montrait rien). */
@media (min-height: 20rem) and (max-height: 30rem) and (min-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-vn #ecran-rpg { flex-direction: row; gap: 8px; }
  body.images-actives.vue-pro.rpg-vn #rpg-visuel { flex: 0 0 38%; height: auto; }
  body.images-actives.vue-pro.rpg-vn #rpg-visuel .vn-illu { border-radius: 16px; border-top: 2px solid var(--vp-bord); }
  body.images-actives.vue-pro.rpg-vn #rpg-zone { margin: 0; }
  body.images-actives.vue-pro.rpg-vn #rpg-visuel .vn-portrait { width: clamp(3.5rem, 30dvh, 7rem); }
  body.images-actives.vue-pro.rpg-vn #rpg-visuel .vn-titre { bottom: 8px; left: auto; right: 8px; transform: none; max-width: 60%; }
  body.images-actives.vue-pro.rpg-vn #rpg-visuel .vn-titre-txt { font-size: .9rem; padding: .2rem .5rem; background: rgba(8,9,18,.9); border-radius: 8px; }
  body.images-actives.vue-pro.rpg-vn #accueil-ecrans { padding-top: 6px; }
}
/* Couleurs forcées : les jauges gardent leur remplissage. */
@media (forced-colors: active) { #rpg-visuel .jauge i { forced-color-adjust: none; background: CanvasText !important; } }
@media (max-width: 39.99rem), (max-aspect-ratio: 1/1) {
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .cote .zones { padding-top: .95rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-visuel .jetons, body.images-actives.vue-pro.rpg-visuel #rpg-visuel .zone[data-n] .jetons { padding-right: 1.5rem; }
}
/* Grand texte pendant le récit : l'illustration (portrait, titre, étiquette) ne grossit que jusqu'à 115 %, comme la scène de bataille ; le récit grossit pleinement. */
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-vn #rpg-visuel { zoom: min(1, calc(1.15 / var(--vue-echelle, 1))); }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-vn #rpg-titre { zoom: min(1, calc(1.15 / var(--vue-echelle, 1))); }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-vn #rpg-zone { margin-top: -.3rem; }