/* ===== ÉCRAN VISUEL DE CONSTRUCTION D'ÉQUIPE (23/10/2026, retours de Valentin, Play Ability) =====
   Le composant commun de rpg/rpg-equipe-visuel.js (EQUIPE_VISUEL) : batailles libres, scénarios, Donjon, aventure, autel.
   DÉCOR SEULEMENT : les éléments ajoutés sont aria-hidden ; les vrais boutons gardent texte, ordre et nom accessible.
   Ne s'applique qu'avec les illustrations ET la présentation de jeu vidéo (body.images-actives.vue-pro) : sans elles, l'ancien écran
   reste intact et les ajouts sont masqués. Tout est conditionné à la présence de l'en-tête (#rpg-zone:has(> .ev-entete)) : un autre
   écran, qui vide la zone, retrouve sa mise en page sans qu'on ait rien à défaire.
   Hiérarchie par la TAILLE (jetons de css/design-systeme.css) : consigne 1,5 rem, nom 1,25 rem, corps 1,125 rem, puces 1 rem. */

/* ---------- 0. Hors présentation de jeu vidéo : rien de visible ne s'ajoute ---------- */
.ev-entete, .ev-fiche-ancre, .ev-bouche, .ev-pied, .ev-etat, .ev-bandeau, .ev-scen-equipes, .ev-affiche { display: none; }

/* ---------- 1. La zone : des rangées de cartes qui passent à la ligne, la fiche à droite sur grand écran ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) {
  --ev-fond: #12152b; --ev-fond-2: #1b2042; --ev-texte: #f7f4ec; --ev-doux: #e2ddcf; --ev-or: #e8b04a; --ev-or-clair: #ffd27a;
  --ev-heros: #6fbcff; --ev-heros-fond: #0f2c45; --ev-adverse: #ff8b8b; --ev-adverse-fond: #3a1418; --ev-ok: #7be0a0;
  --ev-fiche-l: 19rem;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-start; column-gap: .75rem; row-gap: 0;
  padding: .5rem .5rem 0; scroll-padding: 1rem 1rem 6rem; text-align: left;
}
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > * { flex: 1 1 100%; min-width: 0; width: auto; max-width: 100%; align-self: stretch; margin: 0 0 .5rem; box-sizing: border-box; }
/* Les lignes de texte du jeu (« Votre équipe, 2 sur 4… », « Position de… ») : du texte explicatif, sans forme de bouton. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > .rpg-ligne {
  font-size: var(--ds-fs-petit, 1rem); font-weight: 400; line-height: 1.5; color: var(--ev-doux); max-width: none; background: none; border: 0; padding: .1rem .25rem; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > .rpg-ligne.rpg-recit { font-size: var(--ds-fs-corps, 1.125rem); color: var(--ev-texte); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > .rpg-ligne:focus { outline: 3px solid #fff; outline-offset: 2px; border-radius: 6px; }

/* ---------- 2. L'en-tête : « Étape 2 sur 4 : choisissez… », le compte, la sous-ligne, les emplacements ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-entete {
  display: flex; flex-direction: column; gap: .6rem; padding: .25rem .25rem .75rem; margin-bottom: .75rem; border-bottom: 1px solid rgba(232,176,74,.45); }
body.images-actives.vue-pro #ecran-rpg .ev-bandeau-etape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
body.images-actives.vue-pro #ecran-rpg .ev-consigne { min-width: 0; flex: 1 1 12rem; -webkit-hyphens: auto; hyphens: auto; margin: 0; font-size: var(--ds-fs-titre2, 1.5rem); line-height: 1.25; font-weight: 400; color: var(--ev-texte); max-width: 60ch; overflow-wrap: break-word; }
body.images-actives.vue-pro #ecran-rpg .ev-etape-num { font-weight: 700; color: var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg .ev-compte { margin: 0; font-size: var(--ds-fs-corps, 1.125rem); line-height: 1.2; padding: .3rem .9rem; border: 2px solid var(--ev-or); border-radius: 999px; color: var(--ev-texte); background: #0a0c1a; white-space: nowrap; max-width: 100%; box-sizing: border-box; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg .ev-compte { white-space: normal; padding: .2rem .6rem; }
body.images-actives.vue-pro #ecran-rpg .ev-compte-n { font-size: var(--ds-fs-titre2, 1.5rem); font-weight: 700; color: var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg .ev-sous { margin: 0; font-size: var(--ds-fs-petit, 1rem); line-height: 1.5; color: var(--ev-doux); max-width: 70ch; }

/* Emplacements 1 à N : plein (portrait, nom, position) ; vide (pointillé, « + », « libre ») ; en attente de sa position (tirets dorés). */
body.images-actives.vue-pro #ecran-rpg .ev-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--ev-n, 4), minmax(0, 8.5rem)); gap: .5rem; }
body.images-actives.vue-pro #ecran-rpg .ev-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .25rem; padding: .45rem .3rem; border-radius: 12px; min-height: 6.25rem; text-align: center; box-sizing: border-box; min-width: 0; }
body.images-actives.vue-pro #ecran-rpg .ev-slot-plein { background: var(--ev-heros-fond); border: 3px solid var(--ev-heros); }
body.images-actives.vue-pro #ecran-rpg .ev-slot-fixe { border-style: double; border-width: 4px; }
body.images-actives.vue-pro #ecran-rpg .ev-slot-vide { background: rgba(255,255,255,.04); border: 2px dashed var(--ev-or); }
body.images-actives.vue-pro #ecran-rpg .ev-slot-attente { background: #2b2410; border: 3px dashed var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg .ev-slot-portrait, body.images-actives.vue-pro #ecran-rpg .ev-slot-plus {
  flex: none; width: 3.25rem; height: auto; max-width: 100%; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; background: #2a2f58 center / cover no-repeat; border: 2px solid var(--ev-texte); }
body.images-actives.vue-pro #ecran-rpg .ev-slot-plus { border: 2px dashed var(--ev-or); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z' fill='%23ffd27a'/%3E%3C/svg%3E") center / 1.4rem no-repeat; }
body.images-actives.vue-pro #ecran-rpg .ev-slot-nom { font-size: var(--ds-fs-petit, 1rem); font-weight: 600; line-height: 1.2; color: var(--ev-texte); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; max-width: 100%; }
body.images-actives.vue-pro #ecran-rpg .ev-slot-vide .ev-slot-nom { font-weight: 400; color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-slot-zone { font-size: var(--ds-fs-puce, .875rem); line-height: 1.3; padding: 0 .55rem; border-radius: 999px; background: #070812; color: var(--ev-texte); border: 1px solid var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-slot-zone { max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
body.images-actives.vue-pro #ecran-rpg .ev-zone-attente { border-style: dashed; color: var(--ev-or-clair); border-color: var(--ev-or-clair); }

/* Rangées nommées (votre équipe, face à vous, routes A et B) : vignettes rondes pour vos héros, carrées à double trait pour l'adversaire. */
body.images-actives.vue-pro #ecran-rpg .ev-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
body.images-actives.vue-pro #ecran-rpg .ev-rangee-titre { margin: 0; font-size: var(--ds-fs-petit, 1rem); font-weight: 600; color: var(--ev-or-clair); min-width: 7rem; }
body.images-actives.vue-pro #ecran-rpg .ev-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
body.images-actives.vue-pro #ecran-rpg .ev-mini-perso { display: flex; align-items: center; gap: .4rem; padding: .2rem .7rem .2rem .2rem; border-radius: 999px; background: var(--ev-heros-fond); border: 2px solid var(--ev-heros); min-width: 0; }
body.images-actives.vue-pro #ecran-rpg .ev-camp-adverse .ev-mini-perso { background: var(--ev-adverse-fond); border: 4px double var(--ev-adverse); border-radius: 10px; }
body.images-actives.vue-pro #ecran-rpg .ev-mini-vide { border-style: dashed; background: transparent; padding-left: .7rem; }
body.images-actives.vue-pro #ecran-rpg .ev-mini-nom { font-size: var(--ds-fs-petit, 1rem); color: var(--ev-texte); overflow-wrap: anywhere; }
body.images-actives.vue-pro #ecran-rpg .ev-mini .ev-vign { margin: 0; width: 2rem; height: 2rem; }

/* ---------- 3. Le bandeau d'équipe (vignettes) : même composant dans les cartes, les rubriques et la liste des scénarios ---------- */
body.images-actives.vue-pro #ecran-rpg .ev-bandeau { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: .25rem; max-width: 100%; padding-left: .4rem; }
body.images-actives.vue-pro #ecran-rpg .ev-vign { flex: none; display: inline-block; width: 2.25rem; height: 2.25rem; margin-left: -.4rem; box-sizing: border-box; border-radius: 50%;
  background: #2a2f58 center / cover no-repeat; border: 2px solid var(--ev-heros, #6fbcff); box-shadow: 0 0 0 2px #070812; }
body.images-actives.vue-pro #ecran-rpg .ev-camp-adverse .ev-vign { border-radius: 8px; border: 3px double var(--ev-adverse, #ff8b8b); }
body.images-actives.vue-pro #ecran-rpg .ev-vign-vide { background: transparent; border: 2px dashed var(--ev-or, #e8b04a); }
body.images-actives.vue-pro #ecran-rpg .ev-vign-plus { display: inline-flex; align-items: center; justify-content: center; background: #070812; }
body.images-actives.vue-pro #ecran-rpg .ev-vign-plus::after { content: attr(data-plus) / ""; font-size: var(--ds-fs-puce, .875rem); font-weight: 600; color: #f7f4ec; }

/* ---------- 4. Les cartes de personnages (vrais boutons du jeu) ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte,
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-rubrique,
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > .ev-bouche { flex: 1 1 16rem; max-width: 100%; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > .ev-bouche { display: block; height: 0; margin: 0; padding: 0; border: 0; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .1rem;
  min-height: 5rem; padding: .55rem .8rem .55rem 5.1rem; margin: 0 0 .5rem; border-radius: 14px; box-sizing: border-box; text-align: left;
  font-size: var(--ds-fs-corps, 1.125rem); font-weight: 400; line-height: 1.3; color: var(--ev-texte);
  background: var(--ev-fond); border: 2px dashed var(--ev-or); box-shadow: 0 6px 16px -10px rgba(0,0,0,.9); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte::before {
  content: ""; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 3.5rem; height: 3.5rem; border-radius: 50%; box-sizing: border-box;
  background: var(--ev-portrait, none) center / cover no-repeat, #2a2f58; border: 2px solid var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-nom,
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-puce,
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-statut,
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-suite,
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-etat { display: block; min-width: 0; overflow-wrap: break-word; }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-nom { font-size: var(--ds-fs-titre3, 1.25rem); font-weight: 600; line-height: 1.25; }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-puce { font-size: var(--ds-fs-petit, 1rem); color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-suite { font-size: var(--ds-fs-petit, 1rem); color: var(--ev-doux); line-height: 1.4; }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-statut { font-size: var(--ds-fs-petit, 1rem); font-weight: 400; color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg button.ev-carte.ev-route-a > .ev-statut, body.images-actives.vue-pro #ecran-rpg button.ev-carte.ev-route-b > .ev-statut { font-weight: 600; color: var(--ev-texte); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone button .ev-ponct { opacity: 0; }
/* Libellé (600) et description (400, plus petite) des boutons de choix, des rubriques et des scénarios. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone button > .ev-lib { display: block; font-weight: 600; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone button > .ev-desc { display: block; font-weight: 400; font-size: var(--ds-fs-petit, 1rem); line-height: 1.4; color: var(--ev-doux, #e2ddcf); margin-top: .1rem; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone button.ev-scen > .ev-desc { color: var(--vp-doux, #e2ddcf); }
/* Le mot d'état : du contenu CSS à alternative vide (jamais lu, jamais dans le nom accessible). */
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-etat:empty { display: block; }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-etat[data-etat="libre"]::before {
  content: "+ Ajouter" / ""; display: inline-block; margin-top: .25rem; padding: .05rem .6rem; border: 2px dashed var(--ev-or-clair); border-radius: 999px;
  font-size: var(--ds-fs-petit, 1rem); font-weight: 600; color: var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-etat[data-etat="indispo"]::before {
  content: "indisponible : " attr(data-raison) / ""; display: inline-block; margin-top: .25rem; padding: .05rem .6rem .05rem 1.6rem; border-radius: 6px; background: #070812 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1v11H6V10zm2 0h6V8a3 3 0 0 0-6 0z' fill='%23e2ddcf'/%3E%3C/svg%3E") .4rem 50% / 1rem no-repeat;
  font-size: var(--ds-fs-petit, 1rem); font-weight: 400; color: var(--ev-doux); border: 1px solid var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg button.ev-carte > .ev-etat:not([data-etat="libre"]):not([data-etat="indispo"]) { display: none; }
/* Dans l'équipe : bordure pleine de 4 px, fond bleuté, coche sur le portrait et devant le statut. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-dans { border: 4px solid var(--ev-heros); background: var(--ev-heros-fond); padding: calc(.55rem - 2px) calc(.8rem - 2px) calc(.55rem - 2px) calc(5.1rem - 2px); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-dans::before {
  left: calc(.8rem - 2px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230a0a0a'/%3E%3Cpath d='M9.6 16.4 5.2 12l1.6-1.6 2.8 2.8 7.6-7.6 1.6 1.6z' fill='%237be0a0'/%3E%3C/svg%3E") 100% 100% / 1.5rem no-repeat, var(--ev-portrait, none) center / cover no-repeat, #2a2f58;
  border: 3px solid var(--ev-ok); }
body.images-actives.vue-pro #ecran-rpg button.ev-carte.ev-dans > .ev-statut { color: var(--ev-ok); font-weight: 600; }
body.images-actives.vue-pro #ecran-rpg button.ev-carte.ev-dans > .ev-statut::before { content: "✓ " / ""; }
/* Indisponible : hachures, portrait désaturé, cadenas et raison écrite. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-indispo {
  border: 2px solid #8a8fa8; background: repeating-linear-gradient(135deg, #12152b 0 9px, #1f2340 9px 18px); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-indispo::before { filter: grayscale(1); opacity: .8; }
/* Choix simple (un contre un, autel) : bordure pleine, sans « + Ajouter ». Séparation : route A pleine bleue, route B double dorée. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-choix,
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-sans-route { border: 2px solid var(--ev-or); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-sans-route { border-style: dashed; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-route-a { border: 4px solid var(--ev-heros); background: var(--ev-heros-fond); padding: calc(.55rem - 2px) calc(.8rem - 2px) calc(.55rem - 2px) calc(5.1rem - 2px); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-route-b { border: 5px double var(--ev-or-clair); background: #2b2410; padding: calc(.55rem - 3px) calc(.8rem - 3px) calc(.55rem - 3px) calc(5.1rem - 3px); }
/* Survol et focus : jamais moins de contraste ; le focus garde l'anneau blanc et or du reste du jeu. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte:hover { background-color: var(--ev-fond-2); border-color: var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.ev-dans:hover { background: #163a5a; border-color: #a9d6ff; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button:focus,
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button:focus-visible { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px rgba(232,176,74,.85); }
/* La marque « infos détaillées » du jeu (js/navigation.js, ::after à alternative vide) : en haut à droite de la carte, hors de la colonne de texte. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte.a-fiche-detaillee::after { position: absolute; top: .35rem; right: .45rem; }
/* Le bouton « Fiche de… » (au toucher) : petit, à côté de sa carte. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-fiche-btn { flex: 0 1 auto; min-height: 3rem; font-size: var(--ds-fs-petit, 1rem); font-weight: 600; margin: 0 0 .5rem; padding: .4rem .9rem; border-radius: 10px; }

/* ---------- 5. Les rubriques (Héros, Humanoïdes, Créatures…) : des tuiles avec les portraits de leurs membres ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-rubrique {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .4rem; min-height: 5rem; margin: 0 0 .5rem; padding: .6rem 2.6rem .6rem .9rem;
  border-radius: 14px; border: 2px solid var(--ev-or); color: var(--ev-texte); font-size: var(--ds-fs-corps, 1.125rem); font-weight: 600; line-height: 1.3; text-align: left;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7-1.6-1.6 5.4-5.4-5.4-5.4z' fill='%23ffd27a'/%3E%3C/svg%3E") right .7rem center / 1.5rem no-repeat, linear-gradient(180deg, #1d2140, #121528); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-rubrique > .ev-bandeau { display: inline-flex; order: -1; }

/* ---------- 6. Choix à icône (taille de l'équipe, défi, position front ou arrière) ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte {
  flex: 1 1 13rem; position: relative; min-height: 4rem; margin: 0 0 .5rem; padding: .6rem 1rem .6rem 3.4rem; border-radius: 14px; text-align: left;
  font-size: var(--ds-fs-corps, 1.125rem); font-weight: 600; line-height: 1.3; color: var(--ev-texte); border: 2px solid var(--ev-or); background: linear-gradient(180deg, #1d2140, #121528); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte::before {
  content: ""; position: absolute; left: .9rem; top: 50%; width: 1.8rem; height: 1.8rem; transform: translateY(-50%); background: var(--ev-or-clair);
  -webkit-mask: var(--ev-ic) center / contain no-repeat; mask: var(--ev-ic) center / contain no-repeat; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte.ev-avec-portrait { padding-left: 4.3rem; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte.ev-avec-portrait::before { width: 2.8rem; height: 2.8rem; left: .7rem; border-radius: 50%; -webkit-mask: none; mask: none; background: var(--ev-portrait) center / cover no-repeat; }
body.images-actives.vue-pro #ecran-rpg button.ev-ic-groupe { --ev-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7 0a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zM1 20c0-4 3.6-7 8-7s8 3 8 7zm16.5 0c0-2.3-.9-4.3-2.4-5.8 4 .1 7.9 2.4 7.9 5.8z'/%3E%3C/svg%3E"); }
body.images-actives.vue-pro #ecran-rpg button.ev-ic-front { --ev-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5z'/%3E%3C/svg%3E"); }
body.images-actives.vue-pro #ecran-rpg button.ev-ic-arriere { --ev-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2c6 2 10 6 12 12l2-2 2 2-3 3 3 3-2 2-3-3-3 3-2-2 2-2C6 18 2 14 2 4zm2 4c.8 5 4 8.3 8.4 9.4C13 11 10.5 8 6 6z'/%3E%3C/svg%3E"); }
body.images-actives.vue-pro #ecran-rpg button[class*="ev-ic-defi-"] { --ev-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5 0 9 3.6 9 8.3 0 2.7-1.4 4.6-3 5.7V20h-3v-2h-2v2h-2v-2H9v2H6v-4c-1.6-1.1-3-3-3-5.7C3 5.6 7 2 12 2zm-3.5 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E"); }

/* ---------- 7. Boutons d'action : le PRIMAIRE (plein, flèche, en pied, reste visible), le secondaire (contour, flèche retour) ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > .ev-pied { display: block; height: 0; margin: 0; flex-basis: 100%; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire {
  flex: 0 1 auto; min-width: min(100%, 20rem); position: sticky; bottom: .5rem; z-index: 3; margin: .25rem 0 .75rem;
  min-height: 3.5rem; padding: .6rem 3.2rem .6rem 1.25rem; border-radius: 12px; text-align: left; opacity: 1;
  font-size: var(--ds-fs-titre3, 1.25rem); font-weight: 600; line-height: 1.25; color: #0a0a0a; background: var(--ev-or-clair); border: 3px solid #fff;
  box-shadow: 0 0 0 3px #070812, 0 -10px 24px -6px rgba(7,8,17,.95); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire::after {
  content: "→" / ""; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 700; line-height: 1; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire:hover { background: #ffe2a3; }
/* Indisponible (aria-disabled) : hachures, bord en tirets, cadenas ; la raison est déjà ÉCRITE dans le libellé du jeu. */
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire.ev-bloque {
  color: var(--ev-or-clair); background: repeating-linear-gradient(135deg, #2b2410 0 10px, #3b3117 10px 20px); border: 3px dashed var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire.ev-bloque::after {
  content: ""; width: 1.3rem; height: 1.3rem; background: var(--ev-or-clair);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1v11H6V10zm2 0h6V8a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h1v11H6V10zm2 0h6V8a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire {
  flex: 0 1 auto; position: relative; min-height: 3rem; margin: .25rem 0 .75rem; padding: .5rem 1.1rem .5rem 2.6rem; border-radius: 12px; text-align: left;
  font-size: var(--ds-fs-corps, 1.125rem); font-weight: 600; color: var(--ev-texte); background: #0a0c1a; border: 2px solid var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire::before { content: "←" / ""; position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-size: 1.25rem; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire:hover { background: #1b2042; border-color: #fff; }

/* PIED D'ÉCRAN (relecture du 23/10/2026) : collé en bas DANS la liste, le primaire recouvrait la 2e carte à 1280×720 (un clic sur « Bagarreuse »
   validait l'équipe). Il est désormais posé SOUS la liste, dans une bande réservée en bas de l'écran (#ecran-rpg) : la liste défile au-dessus
   sans jamais passer dessous, et le primaire est au même endroit sur tous les écrans d'équipe, aperçu compris (« Lancer la bataille », premier
   dans le DOM : il le reste, l'ordre de lecture et du focus ne change pas). Position absolue sans « left » : il garde l'alignement de la liste.
   Grand texte et téléphone couché : il reste dans le flux (section 11 bis), comme avant. */
/* RÉCIT ILLUSTRÉ (body.rpg-vn : choix d'équipe et séparation de l'aventure et des mini-aventures ; relecture du 24/10/2026) : la zone de texte y est
   elle-même positionnée (css/vue-pro.css) et défile ; un primaire absolu s'y ancrait et défilait avec les cartes (il recouvrait la première à 1280×720).
   Sur ces écrans, la zone redevient statique (sans chevaucher l'illustration) : le primaire s'ancre à #ecran-rpg, dans la bande réservée, comme au Donjon. */
@media (min-height: 30.01rem) {
  /* (body:not(#ds) ×3 : la marge d'écran de css/design-systeme.css est posée avec cette force-là.) */
  html:not([data-vue-texte="grand"]) body:not(#ds):not(#ds):not(#ds).images-actives.vue-pro #ecran-rpg:has(> #rpg-zone > .ev-entete):has(> #rpg-zone > button.ev-primaire) {
    position: relative; padding-bottom: calc(var(--ds-marge-ecran, 1rem) + 4.25rem); }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete):has(> button.ev-primaire) { scroll-padding-bottom: 1rem; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire { position: absolute; bottom: var(--ds-marge-ecran, 1rem); margin: 0; box-shadow: 0 0 0 3px #070812;
    min-width: 0; max-width: none; width: min(calc(100% - 2 * var(--ds-marge-ecran, 1rem) - 1rem), 28rem); }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro.rpg-vn #ecran-rpg #rpg-zone:has(> .ev-entete):has(> button.ev-primaire) { position: static; margin-top: .4rem; }
}
/* Écran étroit : le libellé du primaire peut tenir sur deux lignes ; la bande réservée suit. */
@media (min-height: 30.01rem) and (max-width: 40rem) {
  html:not([data-vue-texte="grand"]) body:not(#ds):not(#ds):not(#ds).images-actives.vue-pro #ecran-rpg:has(> #rpg-zone > .ev-entete):has(> #rpg-zone > button.ev-primaire) { padding-bottom: calc(var(--ds-marge-ecran, 1rem) + 5.5rem); }
}
/* À côté de la fiche (écran large) : la largeur de la colonne des cartes. */
@media (min-height: 30.01rem) and (min-width: 64rem) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-fiche-ancre) > button.ev-primaire { width: min(calc(100% - 2 * var(--ds-marge-ecran, 1rem) - var(--ev-fiche-l) - 2.25rem), 28rem); }
}

/* Écran peu haut (portable 1280×720) : l'en-tête se resserre pour laisser à la liste au moins deux cartes entières (relecture du 23/10/2026). */
@media (min-height: 30.01rem) and (max-height: 50rem) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-entete { gap: .4rem; padding-bottom: .5rem; margin-bottom: .5rem; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg .ev-consigne { font-size: var(--ds-fs-titre3, 1.25rem); }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg .ev-slot { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .4rem; padding: .3rem .4rem; }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg .ev-slot-portrait, html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg .ev-slot-plus { width: 2.25rem; }
}

/* ---------- 8. La fiche du personnage en focus : à droite, sur grand écran (sinon, la touche i ou X et les boutons « Fiche de… ») ---------- */
@media (min-width: 64rem) {
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-fiche-ancre) { padding-right: calc(var(--ev-fiche-l) + 1.25rem); }
  html:not([data-vue-texte="grand"]) body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-fiche-ancre { display: block; position: sticky; top: 0; z-index: 4; height: 0; margin: 0; flex: 1 1 100%; }
}
body.images-actives.vue-pro #ecran-rpg .ev-fiche {
  position: absolute; top: 0; right: calc(-1 * var(--ev-fiche-l) - .75rem); width: var(--ev-fiche-l); box-sizing: border-box; padding: 1rem;
  border-radius: 16px; background: #0a0c1a; border: 2px solid var(--ev-or); color: var(--ev-texte); box-shadow: 0 18px 40px -20px #000; text-align: left; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche p { margin: 0; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-vide { font-size: var(--ds-fs-petit, 1rem); line-height: 1.5; color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-tete { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-portrait { flex: none; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: #2a2f58 center / cover no-repeat; border: 3px solid var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-nom { font-size: var(--ds-fs-titre2, 1.5rem); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-role { font-size: var(--ds-fs-petit, 1rem); color: var(--ev-doux); line-height: 1.4; margin-top: .2rem !important; }
body.images-actives.vue-pro #ecran-rpg .ev-stats { margin: 0 0 .8rem; display: grid; gap: .55rem; }
body.images-actives.vue-pro #ecran-rpg .ev-stat { display: grid; grid-template-columns: 5rem 1fr; align-items: baseline; column-gap: .5rem; }
body.images-actives.vue-pro #ecran-rpg .ev-stat-lib { font-size: var(--ds-fs-petit, 1rem); color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-stat-val { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
body.images-actives.vue-pro #ecran-rpg .ev-stat-n { font-size: var(--ds-fs-titre2, 1.5rem); font-weight: 700; line-height: 1.1; }
body.images-actives.vue-pro #ecran-rpg .ev-stat-mot { font-size: var(--ds-fs-petit, 1rem); color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-barre { grid-column: 1 / -1; display: block; height: .5rem; border-radius: 999px; background: #2a2f58; border: 1px solid #8a8fa8; overflow: hidden; }
body.images-actives.vue-pro #ecran-rpg .ev-barre-plein { display: block; height: 100%; background: var(--ev-ok); }
body.images-actives.vue-pro #ecran-rpg .ev-stat-ki .ev-barre-plein { background: #c9a8ff; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-don { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .7rem; border-left: 4px solid var(--ev-or); background: #12152b; border-radius: 0 8px 8px 0; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-don-lib { font-size: var(--ds-fs-puce, .875rem); color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-don-nom { font-size: var(--ds-fs-corps, 1.125rem); font-weight: 600; }
/* Valeurs en vigueur (24/10/2026) : le niveau (pastille à bord doré), les trésors uniques (trait bleu des héros, effet en petit). */
body.images-actives.vue-pro #ecran-rpg .ev-fiche-niveau { display: inline-block; margin-top: .3rem !important; padding: .05rem .6rem; border-radius: 999px; border: 2px solid var(--ev-or-clair); background: #070812;
  font-size: var(--ds-fs-puce, .875rem); font-weight: 600; line-height: 1.4; color: var(--ev-or-clair); }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-tresor { margin-top: .5rem !important; border-left-color: var(--ev-heros, #6fbcff); }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-tresor-effet { font-size: var(--ds-fs-petit, 1rem); line-height: 1.4; color: var(--ev-doux); }
@media (max-height: 46rem) { body.images-actives.vue-pro #ecran-rpg .ev-fiche-detail { display: none; } }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-detail { margin: .7rem 0 0; font-size: var(--ds-fs-petit, 1rem); line-height: 1.45; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-detail dt { color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-detail dd { margin: 0 0 .4rem; }
body.images-actives.vue-pro #ecran-rpg .ev-fiche-astuce { margin-top: .8rem !important; font-size: var(--ds-fs-puce, .875rem); color: var(--ev-doux); }

/* ---------- 9. La liste des scénarios tout faits : l'équipe de chaque scénario en vignettes, sous son nom ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone button.ev-scen > .ev-scen-equipes { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .45rem; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone button.ev-scen > .ev-scen-equipes > .ev-bandeau { display: inline-flex; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone button.ev-scen .ev-vign { width: 2rem; height: 2rem; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone button.ev-scen .ev-contre::before { content: "contre" / ""; font-size: var(--ds-fs-puce, .875rem); font-weight: 400; font-style: italic; color: var(--vp-doux, #e2ddcf); }

/* ---------- 9 bis. L'affiche d'une bataille (24/10/2026) : avant d'engager (aventure, mini-aventures, Donjon), fiche de zone du Donjon, fiche de mini-aventure.
   Qui combat (vignettes rondes à bord bleu), « contre » au MILIEU, et qui est en face (carrées à double trait rouge) SEULEMENT quand le texte le dit déjà.
   Trois colonnes : vos héros, « contre », l'adversaire. Décor aria-hidden. Elle ne doit jamais prendre l'écran (relecture du 24/10/2026, mesuré à 844×390
   et à 320×640 en texte 200 %) : téléphone couché, une seule rangée de portraits, sans titres ni noms, « +N » au-delà de trois ; texte agrandi (réglage du
   jeu, html[data-vue-texte="grand"], pas une media query), au-delà de deux. Les noms sont toujours écrits dans les lignes du jeu, juste en dessous. ---------- */
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche {
  --ev-texte: #f7f4ec; --ev-doux: #e2ddcf; --ev-or: #e8b04a; --ev-or-clair: #ffd27a; --ev-heros: #6fbcff; --ev-heros-fond: #0f2c45; --ev-adverse: #ff8b8b; --ev-adverse-fond: #3a1418;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: .4rem .9rem; margin: .5rem 0 .75rem; padding: .6rem .75rem; box-sizing: border-box; max-width: 100%;
  border-radius: 14px; background: #0a0c1a; border: 1px solid rgba(232,176,74,.6); text-align: left; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche.ev-affiche-versus { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche > .ev-rangee { min-width: 0; align-content: center; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-rangee-titre { min-width: 0; flex: 1 1 100%; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche > .ev-contre { justify-self: center; text-align: center; }
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche > .ev-contre::before { content: "contre" / ""; font-size: var(--ds-fs-petit, 1rem); font-weight: 400; font-style: italic; color: var(--ev-doux); }
body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini-plus { display: none; padding: .15rem; }
@media (max-width: 40rem) { body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche { padding: .45rem .5rem; gap: .35rem .5rem; } }
/* Peu de hauteur (téléphone couché) : une rangée, portraits seuls, trois au plus par camp puis « +N ». */
@media (max-height: 30rem) {
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche { padding: .3rem .5rem; gap: .25rem .6rem; margin: .25rem 0 .5rem; }
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-rangee-titre, body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini-nom { display: none; }
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini-perso { padding: 0; gap: 0; border: 0; background: none; }   /* la vignette porte seule la forme du camp */
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-sup3 { display: none; }
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-plus3 { display: flex; }
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche > .ev-contre::before { font-size: var(--ds-fs-puce, .875rem); }
}
/* Texte agrandi : portraits seuls, plus petits, deux au plus par camp puis « +N ». */
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche { padding: .25rem .4rem; gap: .2rem .4rem; margin: .25rem 0 .5rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-rangee-titre,
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini-nom,
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-sup2,
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-plus3 { display: none; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-plus2 { display: flex; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini { gap: .2rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini-perso { padding: 0; gap: 0; border: 0; background: none; }
/* Deux lignes : vos héros, puis « contre » suivi de l'adversaire (trois colonnes ne tiennent pas à 320 px en texte agrandi). */
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche.ev-affiche-versus { grid-template-columns: auto minmax(0, 1fr); }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche.ev-affiche-versus > .ev-camp-heros { grid-column: 1 / -1; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-mini .ev-vign { width: 1.25rem; height: 1.25rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche > .ev-contre::before { font-size: .7rem; }   /* décor : il ne doit pas pousser l'adversaire à la ligne */
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche .ev-vign-plus::after { font-size: .6rem; white-space: nowrap; }
body.images-actives.vue-contraste #ecran-rpg #rpg-zone > .ev-affiche {
  --ev-texte: #fff; --ev-doux: #fff; --ev-or: #ffff00; --ev-or-clair: #ffff00; --ev-heros: #fff; --ev-heros-fond: #002244; --ev-adverse: #fff; --ev-adverse-fond: #000; background: #000; border-color: #fff; }
@media (forced-colors: active) { body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-affiche { border-color: CanvasText; } }

/* ---------- 10. Place à l'essentiel : la bannière décorative de l'écran se retire sur les écrans d'équipe peu hauts ---------- */
@media (max-height: 60rem) {
  body.images-actives.vue-pro #ecran-rpg:has(#rpg-zone > .ev-entete)[data-banniere]::before { display: none; }
}

/* Récit illustré (aventure, mini-aventures) : l'illustration se fait plus basse sur un écran d'équipe, l'équipe passe avant le décor. */
@media (min-height: 20rem) {
  body.images-actives.vue-pro.rpg-vn #ecran-rpg:has(#rpg-zone > .ev-entete) #rpg-visuel { height: clamp(5rem, 20dvh, 11rem); }
}

/* Le titre du mode (« Batailles libres », 0,78 rem ailleurs) remonte au plancher de 0,875 rem sur les écrans d'équipe. */
body.images-actives.vue-pro #ecran-rpg:has(#rpg-zone > .ev-entete) #rpg-titre { font-size: var(--ds-fs-puce, .875rem); }

/* ---------- 11. Téléphone et petite largeur : emplacements en deux rangées de quatre, cartes pleine largeur si besoin ---------- */
@media (max-width: 40rem) {
  body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) { padding: 4px 4px 0; }
  body.images-actives.vue-pro #ecran-rpg .ev-slots { grid-template-columns: repeat(var(--ev-n-etroit, 4), minmax(0, 1fr)); gap: .35rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-slot { min-height: 4.6rem; padding: .3rem .15rem; gap: .15rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-slot-portrait, body.images-actives.vue-pro #ecran-rpg .ev-slot-plus { width: 2.4rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-slot-nom { font-size: var(--ds-fs-puce, .875rem); }
  body.images-actives.vue-pro #ecran-rpg .ev-slot-zone { padding: 0 .3rem; line-height: 1.2; }
  body.images-actives.vue-pro #ecran-rpg .ev-consigne { font-size: 1.375rem; }
  body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire { min-width: 100%; }
  /* Rangées « votre équipe » et « face à vous » : les portraits seuls (les noms sont écrits dans les lignes du jeu, juste en dessous). */
  body.images-actives.vue-pro #ecran-rpg .ev-rangee-titre { min-width: 0; flex: 1 1 100%; }
  body.images-actives.vue-pro #ecran-rpg .ev-mini { gap: .25rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-mini-perso { padding: .15rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-mini-perso:not(.ev-mini-vide) .ev-mini-nom { display: none; }
}
/* Téléphone couché (peu de hauteur) : l'en-tête se resserre, les emplacements restent sur une ligne. */
@media (max-height: 30rem) and (min-aspect-ratio: 1/1) {
  body.images-actives.vue-pro #ecran-rpg #rpg-zone > .ev-entete { gap: .35rem; padding-bottom: .5rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-sous { display: none; }
  body.images-actives.vue-pro #ecran-rpg .ev-slots { grid-template-columns: repeat(var(--ev-n, 4), minmax(0, 7rem)); }
  body.images-actives.vue-pro #ecran-rpg .ev-slot { min-height: 0; flex-direction: row; padding: .25rem .4rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-slot-portrait, body.images-actives.vue-pro #ecran-rpg .ev-slot-plus { width: 2rem; }
  body.images-actives.vue-pro #ecran-rpg .ev-slot-zone { display: none; }
}

/* ---------- 11 bis. Texte agrandi (option « Taille du texte » au-dessus de 100 %) ou zone étroite : une seule colonne dans la carte,
   marges intérieures resserrées ; rien ne déborde ni n'est rogné, les mots longs se coupent avec un trait d'union. ---------- */
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte { padding-left: .8rem !important; -webkit-hyphens: auto; hyphens: auto; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte::before { position: static; transform: none; flex: none; width: 2.5rem; height: 2.5rem; margin-bottom: .3rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire { min-width: 0; padding: .5rem 2.2rem .5rem .8rem; position: relative; bottom: auto; }
/* Peu de hauteur (téléphone couché) : le primaire reste à sa place, en fin de liste, au lieu de couvrir les cartes. */
@media (max-height: 30rem) { body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire { position: relative; bottom: auto; } }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire::after { right: .6rem; font-size: 1.25rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire { padding-left: 2rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire::before { left: .5rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte { padding-left: 2.5rem; flex-basis: 10rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte::before { left: .5rem; width: 1.4rem; height: 1.4rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte.ev-avec-portrait { padding-left: 3rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-choix-carte.ev-avec-portrait::before { width: 2rem; height: 2rem; left: .45rem; }
html[data-vue-texte="grand"] body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-rubrique { padding-right: 2rem; background-position: right .3rem center, 0 0; }

/* ---------- 12. Contraste renforcé (option du jeu) : noir, blanc, jaune ---------- */
body.images-actives.vue-contraste #ecran-rpg #rpg-zone:has(> .ev-entete) {
  --ev-fond: #000; --ev-fond-2: #1a1a1a; --ev-texte: #fff; --ev-doux: #fff; --ev-or: #ffff00; --ev-or-clair: #ffff00; --ev-heros: #fff; --ev-heros-fond: #002244; --ev-adverse: #fff; --ev-adverse-fond: #000; }
body.images-actives.vue-contraste #ecran-rpg .ev-fiche, body.images-actives.vue-contraste #ecran-rpg .ev-compte { background: #000; border-color: #fff; }

/* ---------- 13. Couleurs forcées (Windows contraste élevé) : les formes restent, les couleurs sont celles du système ---------- */
@media (forced-colors: active) {
  body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-carte, body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-primaire,
  body.images-actives.vue-pro #ecran-rpg .ev-slot, body.images-actives.vue-pro #ecran-rpg .ev-fiche { border-color: CanvasText; }
  body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button:focus { outline: 4px solid Highlight; }
}

/* ---------- 14. Mouvement réduit : rien ne bouge ici (pas d'animation) ; on garde seulement les transitions de couleur nulles ---------- */
@media (prefers-reduced-motion: reduce) { body.images-actives.vue-pro #ecran-rpg #rpg-zone:has(> .ev-entete) > button { transition: none; } }

/* Fusion du 23/10/2026 : design-systeme.css (chargé après) fixe le remplissage des boutons ; la flèche « ← » du Retour des écrans d'équipe garde sa place. */
body:not(#ds) #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire.big { padding-left: 2.6rem !important; }
body:not(#ds) #ecran-rpg #rpg-zone:has(> .ev-entete) > button.ev-secondaire.big::before { margin: 0; }