/* ===== LE TABLEAU DE COMMANDES DU COMBAT (23/10/2026) — retours de Valentin (Play Ability), testeur voyant, sur Mac à la souris =====
   « Garder TOUJOURS 2/3 en haut (le plateau) et 1/3 en bas (le menu d'action) » ; « on ne comprend pas où agir, ce qui est cliquable, quand cliquer,
   quelles cibles sont à portée, qui a déjà joué » ; « trop de gras : hiérarchiser par la TAILLE » ; « des icônes sur les boutons d'action ».
   Chargé APRÈS css/bataille-pro.css. Tout est sous body.images-actives.vue-pro.rpg-visuel : présentation décochée, rien ne change.
   UN SEUL ÉCRAN (Med, 25/10/2026) : les rangées de la scène et du tableau lisent --eu-scene-min et --eu-zone-min, posées sur #ecran-rpg par
   js/ecran-unique.js (point 7) pour que TOUS les boutons d'action restent visibles ; sans elles (variables absentes), les valeurs d'avant.
   CE QUI NE CHANGE JAMAIS (invariants du projet) : texte, nom accessible, ordre, focus et annonces des VRAIS boutons (#rpg-zone). Les bandes
   ajoutées (#rpg-consigne, #rpg-detail, #rpg-essentiels, rpg/rpg-visuel.js) sont aria-hidden, sans focus ; les icônes sont des pseudo-éléments vides.
   Jetons de design : css/design-systeme.css (tailles en rem, graisses 400 / 600 / 700, 900 pour les grands chiffres seulement). */

#rpg-consigne, #rpg-puces, #rpg-detail, #rpg-essentiels { display: none; }

/* ----- 1. LA DISPOSITION : la scène en haut (62 % de la hauteur au plus), le tableau dessous, jamais vide, jamais masqué -----
   Ordinateur : la consigne à gauche et les essentiels à droite sur une même bande, puis les puces miroir (étapes 1 et 3) ou les boutons du jeu. */
@media (min-height: 20rem) {
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg {
    display: grid; min-height: 0; gap: 0;
    grid-template-columns: minmax(0, 1fr) fit-content(55%);
    grid-template-areas: "titre titre" "scene scene" "consigne ess" "puces puces" "zone zone";
    grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 62dvh) auto auto minmax(var(--eu-zone-min, 4rem), 1fr);
  }
  /* Choix de qui agit et ciblage : les vrais boutons sont posés sur les jetons ; les puces miroir prennent la place restante. */
  html body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 62dvh) auto minmax(0, 1fr) auto; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg::before { display: none; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-titre { grid-area: titre; justify-self: start; margin-bottom: 4px; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-visuel { grid-area: scene; height: auto; min-height: 0; max-height: none; flex: none; margin: 0 0 6px; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-consigne { grid-area: consigne; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-puces { grid-area: puces; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone { grid-area: zone; min-height: 0; max-height: none; height: auto; flex: none; margin: 0; overflow-y: auto; overflow-x: hidden; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-essentiels { grid-area: ess; }
  /* Le détail complet de l'action sous le focus : posé sur le bas de la scène (il ne prend aucune place au tableau). */
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-detail { grid-area: scene; align-self: end; justify-self: center; z-index: 8; margin: 0 .5rem .75rem; }
}

/* Le cadre commun du tableau : UN panneau sombre à liseré doré (consigne et essentiels en tête, puces, boutons du jeu). */
body.images-actives.vue-pro.rpg-visuel #rpg-consigne { display: flex; flex-direction: column; gap: .4rem; min-height: 0; min-width: 0; box-sizing: border-box;
  padding: .6rem .9rem .5rem; background: #121530; border: 1px solid var(--vp-bord, #a98543); border-top: 3px solid var(--vp-or, #e8b04a); border-right: 0; border-bottom: 0;
  border-radius: 16px 0 0 0; color: #f7f4ec; }
body.images-actives.vue-pro.rpg-visuel #rpg-consigne.vide .cs-texte { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-puces:not(.vide) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); grid-auto-rows: max-content; align-content: start; gap: .5rem;
  box-sizing: border-box; padding: .25rem .9rem .6rem; background: #121530; border: 1px solid var(--vp-bord, #a98543); border-top: 0; border-bottom: 0; }
body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone { background: #121530; border: 1px solid var(--vp-bord, #a98543); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: none; }
/* Étapes 1 et 3 (boutons posés sur les jetons) : la bande des boutons n'a plus de hauteur ; les puces ferment le panneau. */
body.images-actives.vue-pro.rpg-visuel.bp-panneau-vide #ecran-rpg > #rpg-zone { padding: 0; border: 0; background: none; min-height: 0; }
body.images-actives.vue-pro.rpg-visuel.bp-panneau-vide #rpg-puces { border-bottom: 1px solid var(--vp-bord, #a98543); border-radius: 0 0 16px 16px; }
body.images-actives.vue-pro.rpg-visuel.bp-panneau-vide #rpg-puces.vide { display: block; min-height: 1rem; background: #121530; border: 1px solid var(--vp-bord, #a98543); border-top: 0; }

/* La consigne : l'étape en petit, la consigne en grand (taille, pas gras), la ligne « Cliquez… ». */
body.images-actives.vue-pro.rpg-visuel .cs-texte { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .1rem; max-width: 70ch; }
body.images-actives.vue-pro.rpg-visuel .cs-etape { font: 600 var(--ds-fs-puce, .875rem)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #0b0c14; background: #ffd27a; border-radius: 6px; padding: .1rem .5rem; }
body.images-actives.vue-pro.rpg-visuel .cs-etape:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .cs-phrase { font: 400 var(--ds-fs-titre2, 1.5rem)/1.25 var(--vp-titre, system-ui); color: #fff; overflow-wrap: anywhere; }
body.images-actives.vue-pro.rpg-visuel .cs-sous { flex: 1 0 100%; font: 400 var(--ds-fs-petit, 1rem)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e2ddcf; }
body.images-actives.vue-pro.rpg-visuel .cs-sous:empty { display: none; }

/* Les puces miroir (#rpg-puces) : un personnage (étape 1) ou une cible (étape 3) par puce ; un clic fait ce que fait son vrai bouton. */
body.images-actives.vue-pro.rpg-visuel .cs-puce { --pc: #6fbcff; position: relative; display: flex; align-items: center; gap: .6rem; min-height: 3rem; min-width: 0; box-sizing: border-box;
  padding: .35rem .6rem .35rem .4rem; border-radius: 12px; cursor: pointer; background: #1a1f3d; border: 2px solid var(--pc); color: #fff; user-select: none; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-camp="adverse"] { --pc: #ff8b8b; }
body.images-actives.vue-pro.rpg-visuel .cs-puce:hover { background: #2a3160; box-shadow: 0 0 0 2px #fff; }
body.images-actives.vue-pro.rpg-visuel .cs-puce.vise { outline: 3px solid #fff; outline-offset: 2px; }
body.images-actives.vue-pro.rpg-visuel .cp-por { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #101322 center / cover no-repeat; border: 3px solid var(--pc); box-sizing: border-box; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-camp="adverse"] .cp-por { border-style: double; border-width: 4px; }
/* Un nom n'est jamais coupé au milieu d'un mot (« Bagarreu/se », relecture du 23/10/2026) : si le nom entier ne tient pas à côté du portrait (texte
   très grand, écran étroit), le portrait passe au-dessus (flex-wrap) ; break-word ne coupe qu'en tout dernier recours, sans fausser ce calcul. */
body.images-actives.vue-pro.rpg-visuel .cs-puce { flex-wrap: wrap; }
body.images-actives.vue-pro.rpg-visuel .cp-txt { display: flex; flex: 1 1 0; flex-direction: column; min-width: min-content; max-width: 100%; }
body.images-actives.vue-pro.rpg-visuel .cp-nom { font: 600 var(--ds-fs-petit, 1rem)/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: break-word; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
body.images-actives.vue-pro.rpg-visuel .cp-chiffres, body.images-actives.vue-pro.rpg-visuel .cp-prev { font: 400 var(--ds-fs-puce, .875rem)/1.35 system-ui, sans-serif; color: #e2ddcf; font-variant-numeric: tabular-nums; }
body.images-actives.vue-pro.rpg-visuel .cp-etat { align-self: flex-start; margin-top: 2px; font: 600 var(--ds-fs-puce, .875rem)/1.3 system-ui, sans-serif; padding: 0 .4rem; border-radius: 999px; color: #0b0c14; background: #ffd27a; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="ok"][data-camp="heros"] .cp-etat { background: #9fd3ff; }
/* Sept puces ou plus (huit contre huit) : la vie et le ki en chiffres, déjà écrits sur les plaques des jetons, quittent la puce ; l'état passe à côté
   de la prévision : deux rangées entières de puces à 1280×720 (relecture du 23/10/2026 : la 2e rangée était coupée). */
body.images-actives.vue-pro.rpg-visuel #rpg-puces:has(> .cs-puce:nth-child(7)) .cp-chiffres { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-puces:has(> .cs-puce:nth-child(7)) .cp-txt { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .4rem; }
body.images-actives.vue-pro.rpg-visuel #rpg-puces:has(> .cs-puce:nth-child(7)) .cp-nom { flex: 1 0 100%; }
body.images-actives.vue-pro.rpg-visuel #rpg-puces:has(> .cs-puce:nth-child(7)) .cp-etat { margin-top: 0; }
@media (max-height: 50rem) {
  body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-puces > .cs-puce:nth-child(7)) .cs-sous { display: none; }
}
/* A joué : portrait gris, bord en tirets, mention « ✓ a joué ». */
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="joue"] { border-style: dashed; border-color: #a7adc2; background: #191a24; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="joue"] .cp-por { filter: grayscale(1) brightness(.75); border-color: #a7adc2; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="joue"] .cp-etat { background: #d6d9e4; }
/* K.O. : croix rouge sur le portrait gris, mention « K.O. ». */
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="ko"] { border-style: dashed; border-color: #ff6b6b; background: #1b1416; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="ko"] .cp-por { filter: grayscale(1) brightness(.5); border-color: #8d93a8; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="ko"] .cp-etat { background: #ff8b8b; }
/* Cible impossible : estompée (sans baisser le contraste du texte) et hachurée, sa raison écrite (la phrase même du lecteur d'écran). */
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="non"] { border: 2px dashed #8d93a8; color: #f2f2f8;
  background: repeating-linear-gradient(135deg, #16182a 0 8px, #24273d 8px 16px); }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="non"] .cp-por { filter: grayscale(.8) brightness(.6); border-color: #8d93a8; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="non"] .cp-etat { background: none; color: #f2f2f8; padding: 0; font-weight: 400; border-radius: 0; }
body.images-actives.vue-pro.rpg-visuel .cs-puce[data-sorte="non"] .cp-etat::before { content: "✕ " / ""; font-weight: 600; }

/* ----- 2. LES ESSENTIELS : Retour ou Annuler, Menu du combat, Journal, Légende ; toujours là, toujours au même endroit ----- */
body.images-actives.vue-pro.rpg-visuel #rpg-essentiels { display: flex; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; gap: .5rem; min-width: 0;
  padding: .6rem .9rem .5rem .5rem; background: #121530; border: 1px solid var(--vp-bord, #a98543); border-top: 3px solid var(--vp-or, #e8b04a); border-left: 0; border-bottom: 0;
  border-radius: 0 16px 0 0; box-sizing: border-box; }
body.images-actives.vue-pro.rpg-visuel .es-court { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-essentiels.vide { visibility: hidden; }
body.images-actives.vue-pro.rpg-visuel .es-bouton { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; min-width: 2.75rem; box-sizing: border-box; padding: .35rem .8rem;
  border-radius: 10px; border: 2px solid #c9ced9; background: #10132a; color: #fff; cursor: pointer; user-select: none;
  font: 600 var(--ds-fs-petit, 1rem)/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; white-space: nowrap; }
body.images-actives.vue-pro.rpg-visuel .es-bouton:hover { background: #262c57; border-color: #fff; }
body.images-actives.vue-pro.rpg-visuel .es-bouton.cache { display: none; }
body.images-actives.vue-pro.rpg-visuel .es-bouton.presse { background: #ffd27a; color: #0b0c14; border-color: #ffd27a; }
body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="retour"] { border-style: solid; }
body.images-actives.vue-pro.rpg-visuel .es-ico { flex: none; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="retour"] { --ic: var(--ic-retour); }
body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="menu"] { --ic: var(--ic-menu); }
body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="journal"] { --ic: var(--ic-livre); }
body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="legende"] { --ic: var(--ic-info); }

/* ----- 3. LE DÉTAIL COMPLET de l'action sous le focus ou la souris (visuel ; le lecteur d'écran lit déjà le bouton entier) ----- */
body.images-actives.vue-pro.rpg-visuel #rpg-detail { display: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-detail.plein { display: block; max-width: min(70ch, calc(100% - 1rem)); box-sizing: border-box; padding: .5rem .9rem;
  background: rgba(7,8,17,.96); border: 2px solid #ffd27a; border-radius: 12px; box-shadow: 0 12px 28px -10px #000; color: #f7f4ec; pointer-events: none;
  font: 400 var(--ds-fs-petit, 1rem)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.images-actives.vue-pro.rpg-visuel .dt-nom { font: 600 var(--ds-fs-corps, 1.125rem)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #ffd27a; margin-right: .4rem; }

/* ----- 4. LES BOUTONS D'ACTION STRUCTURÉS (rpg-ecran.js, structurerBouton) : icône, NOM, puces, description courte ----- */
/* Les séparateurs restent du texte (lecteur d'écran, nom accessible identique) : seul l'œil ne les voit pas. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-sep { font-size: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; align-items: start;
  column-gap: 0; row-gap: .2rem; text-align: left; padding: .55rem .8rem .6rem .7rem; min-height: 3rem; line-height: 1.3; font-weight: 400; color: #fff; overflow: hidden; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct > span { grid-column: 2; min-width: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-nom { font: 600 var(--ds-fs-corps, 1.125rem)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-puces { display: flex; flex-wrap: wrap; gap: .3rem; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-puce { display: inline-block; font: 600 var(--ds-fs-puce, .875rem)/1.35 system-ui, sans-serif; padding: 0 .5rem; border-radius: 999px;
  color: #f2f2f8; background: #2b3058; border: 1px solid #8f97c4; white-space: nowrap; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-puce[data-p="ki"] { color: #f3ebff; background: #3a2766; border-color: #c9a8ff; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-puce[data-p="portee"] { color: #e6f2ff; background: #1d3550; border-color: #6fbcff; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font: 400 var(--ds-fs-petit, 1rem)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #e2ddcf; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-cibles { color: #fff; }
/* Indisponible : hachures + le MOT « Indisponible » + la raison (jamais le seul grisé). */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big[aria-disabled="true"] { opacity: 1; color: #f2f2f8;
  background: repeating-linear-gradient(135deg, #191b2b 0 8px, #24273a 8px 16px); border-style: dashed; border-color: #8d93a8; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big[aria-disabled="true"] .ac-nom { color: #e4e6ef; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-raison { color: #ffe1a8; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-raison::before { content: "Indisponible : " / ""; font-weight: 600; }
/* Actions rares (changer de zone, ruade, fuir, simuler, contre, extraction, passer) : en second plan, plus basses, mais visibles. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-rare { background: #12152a; border-color: #5a6188; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-rare .ac-nom { font-size: var(--ds-fs-petit, 1rem); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-rare .ac-desc { -webkit-line-clamp: 1; line-clamp: 1; }
/* Journal, menu, sac adverse, aides : boutons secondaires (contour), une ligne. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-meta { display: flex; align-items: center; gap: .5rem; text-align: left; min-height: 3rem; background: #0d1024;
  border: 2px solid #c9ced9; border-left-width: 2px; font: 600 var(--ds-fs-petit, 1rem)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff; }
/* Le focus : anneau blanc de 4 px et halo doré (3 px au moins, qui tranche avec la palette). */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct:focus, body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-meta:focus { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(232,176,74,.85); }
@media (max-height: 50rem) {
  body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-desc { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* ----- 5. LES ICÔNES (case « Icônes sur les boutons d'action », #rpg-icones-actions, cochée d'usine ; aussi au menu du combat) -----
   Petits dessins SVG en masque (aucun texte, aucun emoji : rien de lu, rien de cassé sous Windows 10), à la couleur du type d'action ;
   les objets et les dons gardent leur icône illustrée (css/images.css). Dessins : outils de l'agent, icones.py. */
body.images-actives.vue-pro.rpg-visuel {
  --ic-epee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.5 1.5H22.5V3.5L12.2 13.8 10.2 11.8ZM6.9 12.4 11.6 17.1 10.2 18.5 9 17.3 5.4 20.9 6.4 21.9 5 23.3 0.7 19 2.1 17.6 3.1 18.6 6.7 15 5.5 13.8Z'/%3E%3C/svg%3E");
  --ic-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M22.5 1.5 20.6 9.6 17.9 6.9 5.3 19.5 6.9 21.1 5.5 22.5 3.9 20.9 2.5 22.3 1.7 21.5 3.1 20.1 1.5 18.5 2.9 17.1 4.5 18.7 17.1 6.1 14.4 3.4Z'/%3E%3C/svg%3E");
  --ic-ki: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12.0 0.5L13.7 7.8L20.1 3.9L16.2 10.3L23.5 12.0L16.2 13.7L20.1 20.1L13.7 16.2L12.0 23.5L10.3 16.2L3.9 20.1L7.8 13.7L0.5 12.0L7.8 10.3L3.9 3.9L10.3 7.8Z'/%3E%3C/svg%3E");
  --ic-magie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1 14.2 9.8 23 12 14.2 14.2 12 23 9.8 14.2 1 12 9.8 9.8ZM19.5 1.5 20.3 3.7 22.5 4.5 20.3 5.3 19.5 7.5 18.7 5.3 16.5 4.5 18.7 3.7Z'/%3E%3C/svg%3E");
  --ic-soin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 2H15.5V8.5H22V15.5H15.5V22H8.5V15.5H2V8.5H8.5Z'/%3E%3C/svg%3E");
  --ic-bouclier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1 21 4.5V11C21 16.8 17.2 21.4 12 23 6.8 21.4 3 16.8 3 11V4.5Z'/%3E%3C/svg%3E");
  --ic-proteger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1 21 4.5V11C21 16.8 17.2 21.4 12 23 6.8 21.4 3 16.8 3 11V4.5ZM12 4.2 6 6.5V11C6 14.9 8.4 18.2 12 19.8Z'/%3E%3C/svg%3E");
  --ic-vitesse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 4 10.5 12 2 20ZM12 4 20.5 12 12 20Z'/%3E%3C/svg%3E");
  --ic-relever: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5 19.5 9H15V16H9V9H4.5ZM3 18.5H21V22H3Z'/%3E%3C/svg%3E");
  --ic-sablier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 1.5H20V4H18.2C18.2 8 15.6 10 14 12 15.6 14 18.2 16 18.2 20H20V22.5H4V20H5.8C5.8 16 8.4 14 10 12 8.4 10 5.8 8 5.8 4H4Z'/%3E%3C/svg%3E");
  --ic-deplacer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1.5 8 7 2.5V6H17V10H7V13.5ZM22.5 16 17 21.5V18H7V14H17V10.5Z'/%3E%3C/svg%3E");
  --ic-cible: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1 12a11 11 0 1 0 22 0a11 11 0 1 0 -22 0ZM4 12a8 8 0 1 0 16 0a8 8 0 1 0 -16 0ZM7 12a5 5 0 1 0 10 0a5 5 0 1 0 -10 0ZM10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z'/%3E%3C/svg%3E");
  --ic-saisie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 5.5A6.5 6.5 0 1 0 8 18.5H11V15H8A3 3 0 1 1 8 9H11V5.5ZM16 5.5H13V9H16A3 3 0 1 1 16 15H13V18.5H16A6.5 6.5 0 1 0 16 5.5ZM7.5 10.5H16.5V13.5H7.5Z'/%3E%3C/svg%3E");
  --ic-croise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.5 1.5 22.5 20.5 20.5 22.5 1.5 3.5ZM20.5 1.5 22.5 3.5 3.5 22.5 1.5 20.5Z'/%3E%3C/svg%3E");
  --ic-de: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M5 1.5H19A3.5 3.5 0 0 1 22.5 5V19A3.5 3.5 0 0 1 19 22.5H5A3.5 3.5 0 0 1 1.5 19V5A3.5 3.5 0 0 1 5 1.5ZM5 7a2 2 0 1 0 4 0a2 2 0 1 0 -4 0ZM10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0ZM15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z'/%3E%3C/svg%3E");
  --ic-fiole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8.5 1.5H15.5V4H14.3V8.6L20.6 18.4C21.8 20.3 20.4 22.5 18.2 22.5H5.8C3.6 22.5 2.2 20.3 3.4 18.4L9.7 8.6V4H8.5Z'/%3E%3C/svg%3E");
  --ic-coffre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 3.5H21V9H3ZM3 10.5H21V21.5H3ZM10 9V14H14V9Z'/%3E%3C/svg%3E");
  --ic-livre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 3.5H9.5C10.7 3.5 11.5 4.3 12 5 12.5 4.3 13.3 3.5 14.5 3.5H22V19.5H14.5C13.3 19.5 12.5 20.3 12 21 11.5 20.3 10.7 19.5 9.5 19.5H2Z'/%3E%3C/svg%3E");
  --ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2.5 4.5H21.5V8H2.5ZM2.5 10.25H21.5V13.75H2.5ZM2.5 16H21.5V19.5H2.5Z'/%3E%3C/svg%3E");
  --ic-retour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.5 3.5 2 12 10.5 20.5V15H22V9H10.5Z'/%3E%3C/svg%3E");
  --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1 12a11 11 0 1 0 22 0a11 11 0 1 0 -22 0ZM10.4 10H13.6V18.5H10.4ZM10.4 5.2H13.6V8.4H10.4Z'/%3E%3C/svg%3E");
  --ic-passer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M1.5 4 10 12 1.5 20ZM10.5 4 19 12 10.5 20ZM19.5 4H22.5V20H19.5Z'/%3E%3C/svg%3E");
  --ic-sortie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 2H14V7H11V5H6V19H11V17H14V22H3ZM15.5 6.5 22 12 15.5 17.5V14H9V10H15.5Z'/%3E%3C/svg%3E");
  --ic-sac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M8 7A4 4 0 0 1 16 7H19.5L21 22.5H3L4.5 7ZM10 7H14A2 2 0 0 0 10 7Z'/%3E%3C/svg%3E");
  --ic-losange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2 22 12 12 22 2 12Z'/%3E%3C/svg%3E");
}
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct::before, body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-meta::before {
  grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 1.75rem; height: 1.75rem; margin: .05rem .65rem 0 0; flex: none; display: none; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-icones-actions:checked) #rpg-zone button.big.ac-struct::before,
body.images-actives.vue-pro.rpg-visuel:has(#rpg-icones-actions:checked) #rpg-zone button.big.ac-meta::before { display: block; }
/* Les icônes dessinées ici (les actions sans icône illustrée) : un masque à la couleur du type d'action. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big:is(.ac-struct, .ac-meta):not([data-conso]):not([data-action="duo"]):not([data-action="dissimuler"]):not([data-action="vicieuse"]):not([data-action="annonce"]):not([data-action="voler"]):not([data-action="brume"]):not([data-action="fil"]):not([data-action="apaiser"]):not([data-action="sonner"]):not([data-action="creuser"]):not([data-action="circulaire"]):not([data-action="circulaire_boost"]):not([data-action="recycler"])::before {
  content: ""; background: var(--t, #c9ced9); -webkit-mask: var(--ic, var(--ic-losange)) center / contain no-repeat; mask: var(--ic, var(--ic-losange)) center / contain no-repeat; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-meta::before { background: #fff; width: 1.4rem; height: 1.4rem; margin: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="attaque"], [data-action="boost"], [data-action="vicieuse"]) { --ic: var(--ic-epee); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="tir"]) { --ic: var(--ic-fleche); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="frappe_ki"], [data-action="vague_ki"], [data-action="super"]) { --ic: var(--ic-ki); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="sort"], [data-action="sort_effet"]) { --ic: var(--ic-magie); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="soin"], [data-action="soin_zone"]) { --ic: var(--ic-soin); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="garde"], [data-action="barriere"], [data-action="barriere_zone"]) { --ic: var(--ic-bouclier); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="proteger"]) { --ic: var(--ic-proteger); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="velocite"], [data-action="velocite_zone"]) { --ic: var(--ic-vitesse); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="soutenir"], [data-action="degager"]) { --ic: var(--ic-relever); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="patienter"]) { --ic: var(--ic-sablier); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="zone"], [data-action="ruade"]) { --ic: var(--ic-deplacer); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="concentration"]) { --ic: var(--ic-cible); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="prise"], [data-action="empoignade"]) { --ic: var(--ic-saisie); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="coup_pour_coup"]) { --ic: var(--ic-croise); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="consommables"]) { --ic: var(--ic-fiole); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="fouiller"]) { --ic: var(--ic-coffre); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-action="fuir"]) { --ic: var(--ic-sortie); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button[data-simuler] { --ic: var(--ic-de); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button[data-reaction="contre"] { --ic: var(--ic-bouclier); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is([data-reaction="extraction"], [data-reaction="dissipation"]) { --ic: var(--ic-sortie); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button[data-reaction="passer"] { --ic: var(--ic-passer); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.ac-journal { --ic: var(--ic-livre); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.ac-menu { --ic: var(--ic-menu); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.ac-sac { --ic: var(--ic-sac); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.ac-retour { --ic: var(--ic-retour); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button:is(.ac-aide, .ac-revue, .ac-fiche) { --ic: var(--ic-info); }
/* La marque « fiche détaillée » (ℹ️, js/navigation.js) : dans le coin, hors de la grille du bouton. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct { position: relative; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct.a-fiche-detaillee::after { position: absolute; top: .45rem; right: .55rem; }
/* Les icônes illustrées des objets et des dons (css/images.css) : posées dans la même colonne. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big.ac-struct[data-conso]::before { width: 2rem; height: 2rem; }

/* ----- 6. LES ÉTATS DES JETONS : une forme ET un mot, jamais la couleur seule (légende : RPG_VISUEL.LEGENDE) ----- */
body.images-actives.vue-pro.rpg-visuel .bp-marque { position: absolute; z-index: 4; left: 50%; top: calc(var(--tj) - 1.5rem); transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 600 .875rem/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 0 .45rem; border-radius: 999px; border: 2px solid #0b0c14; color: #0b0c14; background: #fff; }
body.images-actives.vue-pro.rpg-visuel .bp-marque:empty { display: none; }
body.images-actives.vue-pro.rpg-visuel .bp-marque[data-m="a-jouer"] { background: #9fd3ff; }
body.images-actives.vue-pro.rpg-visuel .bp-marque[data-m="actif"] { background: #ffd27a; }
body.images-actives.vue-pro.rpg-visuel .bp-marque[data-m="a-joue"] { background: #d6d9e4; }
body.images-actives.vue-pro.rpg-visuel .bp-marque[data-m="cible"] { background: #ffd27a; }
body.images-actives.vue-pro.rpg-visuel .bp-marque[data-m="hors"] { background: #2a2c3c; color: #fff; border: 2px dashed #c9ced9; }
body.images-actives.vue-pro.rpg-visuel .bp-marque[data-m="ko"] { background: #ff8b8b; }
/* À jouer : un second anneau bleu clair autour du médaillon. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.a-jouer .bp-por { box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 0 7px #9fd3ff, 0 0 22px 2px rgba(111,188,255,.55); }
/* Cible impossible : médaillon estompé et hachuré. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.cible-invalide .bp-img { filter: grayscale(.7) brightness(.55); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.cible-invalide .bp-por { border-style: dashed; border-color: #a7adc2; }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.cible-invalide .bp-por::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(10,11,20,.75) 0 5px, rgba(10,11,20,0) 5px 11px); }
body.images-actives.vue-pro.rpg-visuel .bp-jeton.cible-invalide .bp-txt { opacity: .85; }
/* Le jeton dont la puce est survolée. */
body.images-actives.vue-pro.rpg-visuel .bp-jeton.survol .bp-por { outline: 4px solid #fff; outline-offset: 4px; }
/* Les pastilles d'effet : un mot court et le compteur à part. */
body.images-actives.vue-pro.rpg-visuel .bp-pastille { display: inline-flex; align-items: center; gap: 3px; font: 600 .875rem/1.3 system-ui, sans-serif; }
/* Effet utile ou gêne : un SIGNE en plus de la couleur (« + » bleu, « − » orange ; relecture du 23/10/2026 : la couleur seule ne suffit pas). */
body.images-actives.vue-pro.rpg-visuel .bp-pastille::before { content: "+" / ""; font-weight: 700; }
body.images-actives.vue-pro.rpg-visuel .bp-pastille[data-neg]::before { content: "\2212" / ""; }
body.images-actives.vue-pro.rpg-visuel .bp-compte { font: 700 .875rem/1.15 system-ui, sans-serif; color: #0b0c14; background: #fff; border-radius: 999px; padding: 0 .3rem; font-variant-numeric: tabular-nums; }

/* ----- 7. TEXTES DE LA SCÈNE : moins de gras, des tailles lisibles (14 px au moins sur les jetons, relecture du 23/10/2026 ; 8 contre 8 sur téléphone
   ou écran de moins de 22 rem : 12 px tolérés, les puces du tableau compensent) ----- */
body.images-actives.vue-pro.rpg-visuel .bp-zlib { font: 600 .875rem/1.15 var(--vp-titre, system-ui); }
body.images-actives.vue-pro.rpg-visuel .bp-nom { font: 600 clamp(.875rem, 8.5cqw, 1.08rem)/1.15 var(--vp-titre, system-ui); }
body.images-actives.vue-pro.rpg-visuel .bp-chiffres { font: 400 clamp(.875rem, 7cqw, .95rem)/1.2 system-ui, sans-serif; }
body.images-actives.vue-pro.rpg-visuel .bp-petit { font: 600 1rem/1.25 var(--vp-titre, system-ui); }
body.images-actives.vue-pro.rpg-visuel .bp-prevision { font: 600 1rem/1.3 var(--vp-titre, system-ui); }
body.images-actives.vue-pro.rpg-visuel .bp-seuil { font: 400 .875rem/1.25 system-ui, sans-serif; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau { font-size: 1rem; }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau .qui { font: 600 .875rem/1.2 var(--vp-titre, system-ui); }
body.images-actives.vue-pro.rpg-visuel .bp-bandeau li:last-child { font-weight: 400; }
body.images-actives.vue-pro.rpg-visuel #rpg-titre { font: 600 .875rem/1.3 var(--vp-titre, system-ui); }
body.images-actives.vue-pro.rpg-visuel #rpg-zone .rpg-ligne { font: 400 var(--ds-fs-petit, 1rem)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big:not(.ac-struct):not(.ac-meta) { font-weight: 600; font-size: var(--ds-fs-corps, 1.125rem); }
body.images-actives.vue-pro.rpg-visuel .bp-txt { margin-top: -.45rem; }

/* ----- 8. TÉLÉPHONE DEBOUT (et fenêtres plus hautes que larges) : tout en colonne, les essentiels en une rangée tout en bas ----- */
@media (min-height: 20rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "scene" "consigne" "puces" "zone" "ess";
    grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 64dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr) auto; }
  html body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 64dvh) auto minmax(0, 1fr) auto auto; }
  /* Jetons aussi grands que possible dans les deux tiers : la plaque garde le nom et les jauges ; la vie et le ki en chiffres sont sur les puces
     du tableau (étapes 1 et 3) et dans la fiche. */
  body.images-actives.vue-pro.rpg-visuel .bp-chiffres { display: none; }
  body.images-actives.vue-pro.rpg-visuel .bp-cadre { --txt-h: 2.1rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-zone { padding-top: .85rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-consigne[data-etape="2"] .cs-sous { display: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-consigne { border-right: 1px solid var(--vp-bord, #a98543); border-radius: 16px 16px 0 0; padding: .45rem .6rem .35rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-essentiels { flex-wrap: nowrap; justify-content: stretch; gap: .35rem; padding: .35rem; border: 1px solid var(--vp-bord, #a98543); border-top: 1px solid #5a6188; border-radius: 0 0 16px 16px; }
  body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone, body.images-actives.vue-pro.rpg-visuel.bp-panneau-vide #rpg-puces { border-radius: 0; border-bottom: 0; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton { flex: 1 1 auto; min-width: 0; justify-content: center; gap: .25rem; padding: .3rem .3rem; }
  body.images-actives.vue-pro.rpg-visuel .es-ico { width: 1.1rem; height: 1.1rem; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton .es-txt { display: none; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton .es-court { display: inline; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="journal"] .es-txt, body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="legende"] .es-txt { display: inline; }
  body.images-actives.vue-pro.rpg-visuel .cs-phrase { font-size: var(--ds-fs-titre3, 1.25rem); }
  body.images-actives.vue-pro.rpg-visuel #rpg-puces:not(.vide) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: .4rem; padding: .2rem .6rem .5rem; }
  body.images-actives.vue-pro.rpg-visuel .cs-puce { gap: .4rem; padding: .25rem .4rem .25rem .3rem; }
  body.images-actives.vue-pro.rpg-visuel .cp-por { width: 2.3rem; height: 2.3rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-desc { -webkit-line-clamp: 1; line-clamp: 1; }
  body.images-actives.vue-pro.rpg-visuel .bp-zlib { font-size: .875rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-nom { font-size: .875rem; }
  /* Huit contre huit (quatre jetons par zone) ou écran très étroit : 12 px tolérés, les puces du tableau compensent. */
  body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="4"] .bp-nom, body.images-actives.vue-pro.rpg-visuel .bp-scene[data-nmax="4"] .bp-marque { font-size: .75rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-chiffres { font-size: .875rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-petit { font-size: .875rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-prevision { font-size: .875rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-bandeau { font-size: .875rem; }
  body.images-actives.vue-pro.rpg-visuel .bp-marque { font-size: .875rem; padding: 0 .3rem; }
}
@media (max-width: 22rem) {
  body.images-actives.vue-pro.rpg-visuel .bp-nom, body.images-actives.vue-pro.rpg-visuel .bp-marque { font-size: .75rem; }
}
/* ----- 9. TÉLÉPHONE COUCHÉ (paysage bas) : la même disposition que l'ordinateur, resserrée. (Scène à gauche et tableau à droite essayés :
   une scène réduite aux deux tiers de la LARGEUR donnait des jetons deux fois plus petits.) Le titre « Mode RPG » passe à gauche de la consigne. ----- */
@media (min-height: 20rem) and (max-height: 30rem) and (min-aspect-ratio: 1/1) {
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-columns: minmax(0, 1fr) fit-content(55%);
    grid-template-areas: "scene scene" "consigne ess" "puces puces" "zone zone"; grid-template-rows: minmax(var(--eu-scene-min, 30dvh), 60dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr); }
  html body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-rows: minmax(var(--eu-scene-min, 30dvh), 60dvh) auto minmax(0, 1fr) auto; }
  /* Le titre « Mode RPG » (cible de focus du jeu) ne prend pas de place : posé sur le coin de la scène, visible seulement s'il a le focus. */
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-titre { grid-area: scene; align-self: start; justify-self: start; z-index: 9; margin: 2px; }
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-titre:not(:focus) { opacity: 0; pointer-events: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-consigne { padding: .3rem .5rem .25rem .7rem; }
  body.images-actives.vue-pro.rpg-visuel .cs-texte { column-gap: .5rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-essentiels { padding: .3rem .4rem .25rem .3rem; gap: .3rem; flex-wrap: nowrap; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton { padding: .2rem .45rem; gap: .3rem; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton .es-txt { display: none; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton .es-court { display: inline; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="journal"] .es-txt, body.images-actives.vue-pro.rpg-visuel .es-bouton[data-es="legende"] .es-txt { display: inline; }
  body.images-actives.vue-pro.rpg-visuel .cs-phrase { font-size: var(--ds-fs-corps, 1.125rem); }
  body.images-actives.vue-pro.rpg-visuel .cs-sous { display: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-puces:not(.vide) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: .35rem; padding: .2rem .5rem .4rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone .ac-desc { -webkit-line-clamp: 1; line-clamp: 1; }
  /* Médaillons de 35 px : les mots « ✓ à portée » et « hors de portée » se chevauchaient et couvraient les noms (relecture du 23/10/2026). Au ciblage,
     l'état reste dit sur le jeton par sa FORME (cercle doré en pointillés, ou portrait hachuré et estompé) et, en MOTS, par les puces juste dessous. */
  body.images-actives.vue-pro.rpg-visuel .bp-marque:is([data-m="cible"], [data-m="hors"]) { display: none; }
}

/* ----- 10. GRAND TEXTE : tout en une colonne (consigne, puces, boutons, essentiels), le tableau grossit pleinement et défile en interne ;
   la scène reste limitée à 115 % (css/vue-pro.css). ----- */
@media (min-height: 20rem) {
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titre" "scene" "consigne" "puces" "zone" "ess";
    grid-template-rows: auto minmax(var(--eu-scene-min, 24dvh), 46dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr) auto; }
  html[data-vue-texte="grand"] body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-rows: auto minmax(var(--eu-scene-min, 24dvh), 46dvh) auto minmax(0, 1fr) auto auto; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-titre { grid-area: titre; opacity: 1; pointer-events: auto; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-consigne { border-right: 1px solid var(--vp-bord, #a98543); border-left: 1px solid var(--vp-bord, #a98543); border-radius: 16px 16px 0 0; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-essentiels { justify-content: flex-start; border: 1px solid var(--vp-bord, #a98543); border-top: 1px solid #5a6188; border-radius: 0 0 16px 16px; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone, html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel.bp-panneau-vide #rpg-puces { border-radius: 0; border-bottom: 0; }
}
@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 .cs-sous { display: none; }
}
@media (min-height: 20rem) {
  /* GRAND TEXTE, étapes 1 et 3 (choix de qui agit, ciblage) : la scène garde au moins 55 % de la hauteur (jetons cliquables de 44 px au moins) ; ce
     qui ne tient pas en dessous fait DÉFILER l'écran (#ecran-rpg, filet de css/ecrans-compacts.css) au lieu d'écraser le plateau (relecture du 23/10/2026 :
     jetons de 22 px à 320×640, texte 200 %). */
  html[data-vue-texte="grand"] body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg { grid-template-rows: auto 55dvh max-content max-content max-content max-content; scroll-padding-bottom: 4.5rem; }
  html[data-vue-texte="grand"] body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-puces { overflow: visible; }
  /* Étape 2 (choix de l'action) : de même, la liste des actions s'allonge et l'écran défile (une liste interne de 100 px ne montrait qu'un
     quart d'action) ; le détail de l'action a sa rangée sous la consigne ; la scène garde 45 % de la hauteur. */
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) { grid-template-areas: "titre" "scene" "consigne" "detail" "zone" "ess";
    grid-template-rows: auto 45dvh max-content max-content max-content max-content; scroll-padding: 3rem 0 4.5rem; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone[data-vue="actions"] { overflow: visible; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail { grid-area: detail; align-self: stretch; justify-self: stretch; max-width: none; zoom: 1;
    margin: 0; border-radius: 0; border-width: 1px 1px 0; border-color: var(--vp-bord, #a98543); box-shadow: none; background: #121530; padding: .3rem .6rem .35rem; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-plus { display: none; }
  /* Les essentiels restent visibles pendant ce défilement : collés au bas de l'écran. */
  html[data-vue-texte="grand"] body.bp-panneau-vide.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-essentiels,
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-essentiels { position: sticky; bottom: 0; z-index: 9; box-shadow: 0 -10px 18px -8px #000; }
  /* Barre de défilement de l'écran visible en permanence dans ce mode : l'indice qu'il y a une suite. */
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg { scrollbar-width: auto; scrollbar-color: #ffd27a #0b0d1c; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg::-webkit-scrollbar { width: 12px; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg::-webkit-scrollbar-track { background: #0b0d1c; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg::-webkit-scrollbar-thumb { background: #ffd27a; border-radius: 6px; border: 2px solid #0b0d1c; }
}
/* Les essentiels et la bande de détail sont des RELAIS visuels (les vrais contrôles sont au clavier, à la manette et dans la liste des boutons, qui
   grossissent pleinement) : comme la scène, ils ne grossissent que jusqu'à 130 %, libellés courts, pour laisser la place aux boutons du jeu. */
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-essentiels, html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-detail { zoom: min(1, calc(1.3 / var(--vue-echelle, 1))); }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #rpg-essentiels { flex-wrap: wrap; }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel .es-bouton { flex: 1 1 auto; justify-content: center; }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel .es-bouton .es-txt { display: none; }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel .es-bouton .es-court { display: inline; }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel .es-bouton:is([data-es="journal"], [data-es="legende"]) .es-txt { display: inline; }
/* Consigne compacte en grand texte : la phrase à la taille du corps (elle grossit avec l'option ; la consigne entière est aria-hidden). */
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel .cs-phrase { font-size: var(--ds-fs-corps, 1.125rem); }
html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel .cs-etape { letter-spacing: .02em; }

/* ----- 11. MOUVEMENT : rien de neuf ne bouge ; les transitions suivent « Effets visuels » ET le réglage d'animations du système ----- */
@media (prefers-reduced-motion: reduce) {
  body.images-actives.vue-pro.rpg-visuel .cs-puce, body.images-actives.vue-pro.rpg-visuel .es-bouton { transition: none; }
}

/* ----- 12. CONTRASTE RENFORCÉ et COULEURS FORCÉES ----- */
body.images-actives.vue-contraste.rpg-visuel #rpg-consigne, body.images-actives.vue-contraste.rpg-visuel #rpg-essentiels, body.images-actives.vue-contraste.rpg-visuel #rpg-detail.plein { background: #000; border-color: #fff; }
body.images-actives.vue-contraste.rpg-visuel .cs-puce, body.images-actives.vue-contraste.rpg-visuel .es-bouton { background: #000; border-color: #fff; color: #fff; }
body.images-actives.vue-contraste.rpg-visuel #rpg-zone .ac-puce { background: #000; border-color: #fff; color: #fff; }
body.images-actives.vue-contraste.rpg-visuel #rpg-zone .ac-desc, body.images-actives.vue-contraste.rpg-visuel .cs-sous, body.images-actives.vue-contraste.rpg-visuel .cp-chiffres { color: #fff; }
@media (forced-colors: active) {
  body.images-actives.vue-pro.rpg-visuel #rpg-consigne, body.images-actives.vue-pro.rpg-visuel #rpg-essentiels, body.images-actives.vue-pro.rpg-visuel .cs-puce,
  body.images-actives.vue-pro.rpg-visuel .es-bouton, body.images-actives.vue-pro.rpg-visuel #rpg-detail.plein { border: 2px solid CanvasText; }
  body.images-actives.vue-pro.rpg-visuel .es-ico, body.images-actives.vue-pro.rpg-visuel #rpg-zone button.big::before { forced-color-adjust: none; background: CanvasText; }
  body.images-actives.vue-pro.rpg-visuel .bp-marque { forced-color-adjust: none; }
}

/* ----- 13. LA PLANCHE DE LA LÉGENDE : petits exemples dessinés, dans la fenêtre d'infos, pendant la lecture de « Légende du plateau » ----- */
#rpg-legende-planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .4rem; margin: .8rem 0 0; padding: .5rem; border-radius: 12px;
  background: #0b0d1c; border: 1px solid #5a6188; color: #f2f2f8; }
#rpg-legende-planche .lg-ex { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .4rem .3rem; border-radius: 10px; border: 2px solid transparent; text-align: center; }
#rpg-legende-planche .lg-ex.courant { border-color: #ffd27a; background: #1d1a10; }
#rpg-legende-planche .lg-titre { font: 600 .875rem/1.25 system-ui, sans-serif; }
#rpg-legende-planche .lg-jeton { --c: #6fbcff; position: relative; width: 3.6rem; height: 3.6rem; }
#rpg-legende-planche .lg-por { position: absolute; inset: 0; border-radius: 50%; background: #101322 center / cover no-repeat; border: 4px solid var(--c); box-sizing: border-box; box-shadow: 0 0 0 2px rgba(0,0,0,.7); }
#rpg-legende-planche .lg-croix { display: none; position: absolute; inset: 8%; background: linear-gradient(45deg, transparent 43%, #ff2e2e 43%, #ff2e2e 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #ff2e2e 43%, #ff2e2e 57%, transparent 57%); }
#rpg-legende-planche .lg-marque { position: absolute; z-index: 2; left: 50%; bottom: -.5rem; transform: translateX(-50%); white-space: nowrap; font: 600 .75rem/1.3 system-ui, sans-serif; padding: 0 .35rem;
  border-radius: 999px; border: 2px solid #0b0c14; color: #0b0c14; background: #fff; }
#rpg-legende-planche .lg-marque:empty { display: none; }
#rpg-legende-planche .lg-jauges { display: none; position: absolute; left: -.3rem; right: -.3rem; bottom: -.9rem; height: 1rem; }
#rpg-legende-planche [data-ex="adverse"] .lg-jeton { --c: #ff8b8b; }
#rpg-legende-planche [data-ex="adverse"] .lg-por { border: 6px double var(--c); }
#rpg-legende-planche [data-ex="a-jouer"] .lg-por { box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 0 7px #9fd3ff; }
#rpg-legende-planche [data-ex="a-jouer"] .lg-marque { background: #9fd3ff; }
#rpg-legende-planche [data-ex="actif"] .lg-por { border-color: #ffd27a; box-shadow: 0 0 0 3px rgba(0,0,0,.7), 0 0 0 8px rgba(232,176,74,.95), 0 0 24px 6px rgba(255,200,90,.6); }
#rpg-legende-planche [data-ex="actif"] .lg-jeton::before { content: ""; position: absolute; left: 50%; top: -1.4rem; transform: translateX(-50%); border: .55rem solid transparent; border-top: .75rem solid #ffd27a; }
#rpg-legende-planche [data-ex="actif"] .lg-marque { background: #ffd27a; }
#rpg-legende-planche [data-ex="vise"] .lg-por { outline: 4px solid #fff; outline-offset: 4px; }
#rpg-legende-planche [data-ex="a-joue"] .lg-por { filter: grayscale(1) brightness(.7); border-color: #8d93a8; }
#rpg-legende-planche [data-ex="a-joue"] .lg-marque { background: #d6d9e4; }
#rpg-legende-planche [data-ex="cible"] .lg-jeton { --c: #ff8b8b; }
#rpg-legende-planche [data-ex="cible"] .lg-por { border: 6px double var(--c); }
#rpg-legende-planche [data-ex="cible"] .lg-jeton::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px dashed #ffd27a; }
#rpg-legende-planche [data-ex="cible"] .lg-marque { background: #ffd27a; }
#rpg-legende-planche [data-ex="hors"] .lg-jeton { --c: #a7adc2; }
#rpg-legende-planche [data-ex="hors"] .lg-por { border-style: dashed; filter: grayscale(.7) brightness(.6); }
#rpg-legende-planche [data-ex="hors"] .lg-jeton::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(135deg, rgba(10,11,20,.75) 0 5px, rgba(10,11,20,0) 5px 11px); }
#rpg-legende-planche [data-ex="hors"] .lg-marque { z-index: 1; background: #2a2c3c; color: #fff; border: 2px dashed #c9ced9; }
#rpg-legende-planche [data-ex="ko"] .lg-por { filter: grayscale(1) brightness(.45); border: 4px dashed #8d93a8; transform: rotate(90deg); }
#rpg-legende-planche [data-ex="ko"] .lg-croix { display: block; filter: none; }
#rpg-legende-planche [data-ex="ko"] .lg-marque { background: #ff8b8b; }
#rpg-legende-planche [data-ex="a-terre"] .lg-por { transform: rotate(-90deg); }
#rpg-legende-planche [data-ex="a-terre"] .lg-marque { background: #4a2a12; color: #ffe6c4; border-color: #c07a3a; }
#rpg-legende-planche [data-ex="effets"] .lg-marque { background: #1d3550; color: #e6f2ff; border: 1px solid #5a8dc0; }
#rpg-legende-planche [data-ex="jauges"] .lg-jauges { display: block; background: linear-gradient(#2a0f12, #2a0f12) top / 100% 55% no-repeat, linear-gradient(#170f2a, #170f2a) bottom / 100% 35% no-repeat; border-radius: 4px; }
#rpg-legende-planche [data-ex="jauges"] .lg-jauges::before { content: ""; position: absolute; left: 0; top: 0; width: 70%; height: 55%; background: linear-gradient(90deg, #2f9d55, #6bd98a); border-radius: 4px; }
#rpg-legende-planche [data-ex="jauges"] .lg-jauges::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 35%; background: linear-gradient(90deg, #7a52d6, #c9a8ff); border-radius: 4px; }
#rpg-legende-planche [data-ex="prevision"] .lg-jauges { display: block; height: .6rem; background: #2a0f12; border-radius: 4px; overflow: hidden; }
#rpg-legende-planche [data-ex="prevision"] .lg-jauges::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 45%; background: linear-gradient(90deg, #2f9d55, #6bd98a); }
#rpg-legende-planche [data-ex="prevision"] .lg-jauges::after { content: ""; position: absolute; left: 45%; top: 0; bottom: 0; width: 30%; background: repeating-linear-gradient(135deg, #fff 0 3px, #ff4d4d 3px 6px); }
#rpg-legende-planche [data-ex="chiffres"] .lg-marque { bottom: auto; top: -.4rem; background: rgba(5,6,12,.9); color: #ff5c5c; border-color: #ff5c5c; font-size: .9rem; }
#rpg-legende-planche [data-ex="de"] .lg-por { border-radius: 14px; background: #ffcf5a; border-color: #fff; }
#rpg-legende-planche [data-ex="de"] .lg-marque { background: #ffd84a; }
#rpg-legende-planche [data-ex="zone"] .lg-por { border-radius: 12px; background: linear-gradient(180deg, rgba(111,188,255,.25), rgba(8,9,18,.4)); border: 2px solid #6fbcff; box-shadow: 0 0 22px -4px #6fbcff; }
#rpg-legende-planche [data-ex="de"] .lg-por, #rpg-legende-planche [data-ex="zone"] .lg-por { background-image: none !important; }
#rpg-legende-planche [data-ex="jauges"] .lg-jeton, #rpg-legende-planche [data-ex="prevision"] .lg-jeton { margin-bottom: .9rem; }

/* Jeton couché en ligne (case très basse : petit écran, grand texte) : pas de place pour le mot sans cacher le nom ; l'état reste dit par la forme
   (anneau, gris, hachures, croix) et, en mots, par les puces du tableau. */
@container (max-height: 5.2rem) {
  body.images-actives.vue-pro.rpg-visuel .bp-marque { display: none; }
  /* Le cadre (où se pose le vrai bouton) prend toute la hauteur de la case : une cible de 44 px au moins, même jeton couché (relecture du 23/10/2026). */
  body.images-actives.vue-pro.rpg-visuel .bp-cadre { align-self: stretch; display: flex; align-items: center; }
  /* Nom trop long pour la case couchée : points de suspension visibles (le nom entier est sur la puce du tableau), jamais un mot rogné en silence. */
  body.images-actives.vue-pro.rpg-visuel .bp-nom { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
}
/* Téléphone debout de petite hauteur : la ligne d'aide laisse la place aux puces (la consigne reste). */
@media (max-height: 44.99rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  body.images-actives.vue-pro.rpg-visuel .cs-sous { display: none; }
}

/* ----- 14. ÉTAPE 2, LE CHOIX DE L'ACTION : toutes les actions à portée de vue (relecture du 23/10/2026 : 4 actions visibles sur 12 à 1280×720, 1 au
   téléphone) ; « toujours 2/3 plateau en haut, menu d'action en bas, boutons essentiels toujours visibles » (Valentin, Play Ability).
   - La scène revient à 55 % de la hauteur à CETTE étape seulement (deux tiers aux autres).
   - Cartes d'action COMPACTES : icône, nom, puces (coût, portée). La description et les cibles restent dans le bouton (le texte, le nom accessible et
     l'ordre ne changent pas : elles passent à une taille nulle, comme les séparateurs) et s'affichent en entier dans la bulle #rpg-detail au survol et
     au focus ; une action indisponible garde son mot « Indisponible » et sa raison.
   - 2 colonnes au téléphone debout (une seule en texte très grand : rien n'est rogné), 4 à 6 en largeur (téléphone couché, ordinateur).
   - Indice qu'il reste des actions plus bas : barre de défilement toujours visible et compteur « ▼ n autres » (#rpg-plus, aria-hidden, rpg-visuel.js).
   - L'en-tête du personnage (focalisable) reste collé en haut de la liste : jamais coupé sous la consigne. ----- */
@media (min-height: 20rem) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) { grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 55dvh) auto auto minmax(var(--eu-zone-min, 4rem), 1fr); }
}
/* Téléphone debout : la bulle du détail ne recouvre plus les jetons de la zone A (relecture du 23/10/2026) ; à cette étape elle prend sa propre
   rangée entre la consigne et la liste (trois lignes au plus), et la scène descend à la moitié de la hauteur. */
@media (min-height: 20rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) { grid-template-areas: "titre" "scene" "consigne" "detail" "zone" "ess";
    grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 50dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr) auto; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail { grid-area: detail; align-self: stretch; justify-self: stretch; max-width: none;
    margin: 0; border-radius: 0; border-width: 1px 1px 0; border-color: var(--vp-bord, #a98543); box-shadow: none; background: #121530; padding: .3rem .6rem .35rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail:not(.plein) { display: block; min-height: 0; padding: 0; border: 0; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > button.big.ac-struct { padding: .35rem .45rem .4rem; column-gap: .35rem; }
  body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] .ac-puce { padding: 0 .35rem; }
}
@media (min-height: 20rem) and (max-height: 30rem) and (min-aspect-ratio: 1/1) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) { grid-template-rows: minmax(var(--eu-scene-min, 30dvh), 50dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr); }
  /* Téléphone couché : la bulle du détail passe en HAUT de la scène, sur deux lignes au plus (en bas, elle cachait les jetons et leurs noms). */
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail { align-self: start; margin: 2px .5rem 0; padding: .2rem .6rem;
    font-size: var(--ds-fs-puce, .875rem); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail:not(.plein) { display: none; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail .dt-nom { font-size: var(--ds-fs-petit, 1rem); }
}
body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone[data-vue="actions"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .4rem; align-content: start; align-items: stretch;
  scroll-padding: 2.25rem 0 .5rem; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: #ffd27a #0b0d1c; }
@media (min-width: 40rem) {
  body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone[data-vue="actions"] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
}
/* Barre de défilement visible en permanence (Mac : les barres « en surimpression » disparaissent sans ce style). */
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"]::-webkit-scrollbar { width: 12px; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"]::-webkit-scrollbar-track { background: #0b0d1c; border-radius: 6px; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"]::-webkit-scrollbar-thumb { background: #ffd27a; border-radius: 6px; border: 2px solid #0b0d1c; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > .rpg-ligne { grid-column: 1 / -1; margin: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > .rpg-ligne[data-entete] { position: sticky; top: 0; z-index: 3; background: #121530; box-shadow: 0 6px 10px -6px #000;
  padding-top: 2px; padding-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-height: 20rem) {
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone[data-vue="actions"] { padding: 4px 6px; }
}
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > button.big { margin: 0; width: auto; max-width: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > button.big.ac-struct { display: flex; flex-wrap: wrap; align-items: center; align-content: center; column-gap: .35rem; row-gap: .2rem;
  min-height: 3rem; padding: .35rem .5rem .4rem .45rem; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > button.big.ac-struct::before { width: 1.25rem; height: 1.25rem; margin: 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > button.big.ac-struct[data-conso]::before { width: 1.4rem; height: 1.4rem; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] .ac-nom { flex: 1 1 0; min-width: 0; font-size: var(--ds-fs-petit, 1rem); line-height: 1.25; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] .ac-puces { flex: 1 0 100%; }
/* Peu de hauteur (portable 1280×720) : la sous-ligne d'aide de l'étape 2 cède sa place à une rangée d'actions (la consigne reste ; elle est aria-hidden). */
@media (max-height: 50rem) {
  body.images-actives.vue-pro.rpg-visuel #rpg-consigne[data-etape="2"] .cs-sous { display: none; }
  body.images-actives.vue-pro.rpg-visuel #rpg-consigne[data-etape="2"] .cs-phrase { font-size: var(--ds-fs-titre3, 1.25rem); }
}
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] .ac-desc { flex: 1 0 100%; display: block; font-size: 0; line-height: 0; -webkit-line-clamp: none; line-clamp: none; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] button.big.ac-struct:not([aria-disabled="true"]) .ac-desc { height: 0; margin-top: -.2rem; overflow: hidden; }
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] .ac-raison { display: block; font: 400 var(--ds-fs-puce, .875rem)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Journal, menu, sac adverse : une ligne (« Menu du combat : régl… ») ; le texte entier reste dans le bouton, et « Menu du combat » et « Journal » sont
   aussi dans les essentiels, en haut du tableau. */
body.images-actives.vue-pro.rpg-visuel #rpg-zone[data-vue="actions"] > button.big.ac-meta { display: block; min-height: 3rem; font-size: var(--ds-fs-petit, 1rem); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-icones-actions:checked) #rpg-zone[data-vue="actions"] > button.big.ac-meta::before { display: inline-block; vertical-align: -.2rem; margin-right: .5rem; }
/* Petit téléphone debout (moins de 45 rem de haut, 320×640) : la scène descend à 45 % à cette étape, la bulle tient en deux lignes, la consigne à la
   taille du corps (avant : un quart de la première action visible). */
@media (min-height: 20rem) and (max-height: 44.99rem) and ((max-width: 39.99rem) or (max-aspect-ratio: 1/1)) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) { grid-template-rows: auto minmax(var(--eu-scene-min, 30dvh), 45dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr) auto; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone[data-vue="actions"]) > #rpg-detail { -webkit-line-clamp: 2; line-clamp: 2; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-visuel #rpg-consigne[data-etape="2"] .cs-phrase { font-size: var(--ds-fs-corps, 1.125rem); }
}
/* Écran très étroit (moins de 22 rem) : les quatre essentiels tiennent sur leur rangée sans se chevaucher (« Journa » coupé sous l'icône voisine). */
@media (max-width: 22rem) {
  body.images-actives.vue-pro.rpg-visuel #rpg-essentiels { gap: .2rem; padding-left: .25rem; padding-right: .25rem; }
  body.images-actives.vue-pro.rpg-visuel .es-bouton { gap: .15rem; padding: .2rem .15rem; font-size: var(--ds-fs-puce, .875rem); }
  body.images-actives.vue-pro.rpg-visuel .es-ico { width: 1rem; height: 1rem; }
}
/* L'indice « ▼ n autres » : posé sur le bas de la liste, sans prendre de clic (le clic passe à la carte dessous). */
#rpg-plus { display: none; }
@media (min-height: 20rem) {
  html body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-plus { grid-area: zone; align-self: end; justify-self: stretch; z-index: 4; pointer-events: none; }
}
/* (Sans voile en dégradé : il assombrissait le texte des cartes du bas ; seule la pastille, opaque, se pose dans le coin.) */
body.images-actives.vue-pro.rpg-visuel #rpg-plus.montre { display: flex; justify-content: flex-end; align-items: flex-end; margin: 0; padding: 0 1.4rem .3rem 0; }
body.images-actives.vue-pro.rpg-visuel #rpg-plus .pl-txt { font: 600 var(--ds-fs-puce, .875rem)/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0b0c14; background: #ffd27a;
  border: 2px solid #0b0c14; border-radius: 999px; padding: .05rem .6rem; box-shadow: 0 0 0 2px #ffd27a, 0 4px 12px rgba(0,0,0,.8); }
body.images-actives.vue-contraste.rpg-visuel #rpg-plus .pl-txt { background: #fff; color: #000; }