/* ===== UN SEUL ÉCRAN, SUR TOUS LES SUPPORTS (Med, 25/10/2026, retour d'un testeur voyant) — js/ecran-unique.js =====
   Chargé EN DERNIER. Le cadre et l'épinglage (sections 1 et 3) sont sous « body.vue-pro » (case « Présentation de jeu vidéo ») : ils valent AVEC ou
   SANS illustrations (relecture du 25/10/2026) ; décochée, l'ancien écran revient tel quel (la page défile : le filet de secours). Le récit illustré
   et la bataille (sections 2 et 4) restent sous « body.images-actives.vue-pro » : leur mise en page n'existe qu'avec les illustrations. Mise en page seulement : aucun texte, aucun ordre du DOM, aucun focus ne change.
   - .eu-deborde (sur le cadre) : son texte dépasse ; alors seulement les commandes épinglées prennent leur fond plein et leur voile.
   - .eu-cadre : l'élément qui défile (#rpg-zone, ou l'écran de menu affiché) ; .eu-cmd : un bouton épinglé au bas du cadre (position: sticky,
     « bottom » posé par le script) ; .eu-cmd-tete : la première rangée épinglée (un voile au-dessus : le texte s'y efface en défilant).
   - --eu-pile (sur body) : la hauteur épinglée ; l'illustration du récit et la bannière des menus rétrécissent pour garder des lignes de texte.
   Sous 20 rem de hauteur (zoom très fort), rien de ce fichier ne s'applique : la page défile, rien ne devient inaccessible. */
@media (min-height: 20rem) {
  /* ---------- 1. Les commandes épinglées : opaques, et leurs interstices couverts (le texte ne passe jamais entre deux boutons) ---------- */
  body.vue-pro { --eu-fond: #0b0d1b; }
  /* « !important » : en bataille, css/combat-commandes.css pose position: relative sur les cartes d'action (un « bottom » y décalerait la carte). */
  body.vue-pro .eu-cadre > button.eu-cmd { position: sticky !important; z-index: 3; }
  body.vue-pro .eu-cadre.eu-mesure > button { position: static !important; }   /* le temps d'une mesure, dans la même passe : jamais affiché */
  /* Chaque bouton : une marge de fond tout autour (les interstices). Le premier de chaque rangée (.eu-cmd-rang) : une bande de fond sur TOUTE la largeur
     du cadre (le texte ne se voit jamais à côté d'un bouton étroit comme « Menu d'aventure »), bornée en hauteur par clip-path ; la tête, une bande plus haute.
     « !important » : css/design-systeme.css pose ses ombres avec body:not(#ds):not(#ds), plus fort que tout sélecteur raisonnable. Au focus, le halo est gardé. */
  body.vue-pro .eu-cadre.eu-deborde > button.eu-cmd.big:not(:focus) { box-shadow: 0 0 0 .4rem var(--eu-fond) !important; }
  body.vue-pro .eu-cadre.eu-deborde > button.eu-cmd.eu-cmd-rang.big:not(:focus) { box-shadow: 0 0 0 100vmax var(--eu-fond) !important; }
  body.vue-pro .eu-cadre.eu-deborde > button.eu-cmd.eu-cmd-rang.big:focus { box-shadow: 0 0 0 7px var(--ds-focus-halo, rgba(232,176,74,.8)), 0 0 0 100vmax var(--eu-fond) !important; }
  body.vue-pro .eu-cadre.eu-deborde > button.eu-cmd.eu-cmd-rang { clip-path: inset(-.45rem -100vmax -.45rem -100vmax); }
  body.vue-pro .eu-cadre.eu-deborde > button.eu-cmd.eu-cmd-rang.eu-cmd-tete { clip-path: inset(-1.1rem -100vmax -.45rem -100vmax); }
  /* Un bouton épinglé garde son fond plein (certains thèmes le rendent translucide). */
  body.vue-pro .eu-cadre.eu-deborde > button.eu-cmd:not(.ds-btn--primaire) { background-color: #161a33 !important; }
  body.vue-pro.vue-contraste .eu-cadre.eu-deborde > button.eu-cmd:not(.ds-btn--primaire) { background-color: #000 !important; }
  body.vue-pro.vue-contraste { --eu-fond: #000; }

  /* ---------- 2. Le récit : l'illustration laisse au texte au moins trois lignes sous les choix ---------- */
  body.images-actives.vue-pro.rpg-vn #rpg-visuel { max-height: max(4.5rem, calc(100dvh - var(--eu-pile, 0px) - 9rem)); }
  @media (max-height: 30rem) { body.images-actives.vue-pro.rpg-vn #rpg-visuel { max-height: max(3.5rem, calc(100dvh - var(--eu-pile, 0px) - 7.5rem)); } }
  /* Téléphone en paysage (peu de hauteur, de la largeur) : les choix sur deux colonnes, pour qu'ils tiennent tous à l'écran. */
  @media (max-height: 30rem) and (min-width: 40rem) {
    body.images-actives.vue-pro.rpg-vn #rpg-zone { flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: stretch; column-gap: .7rem; row-gap: .45rem; }
    body.images-actives.vue-pro.rpg-vn #rpg-zone > * { flex: 1 1 100%; }
    body.images-actives.vue-pro.rpg-vn #rpg-zone > button.big { flex: 1 1 calc(50% - .7rem); align-self: stretch !important; max-width: none; min-height: 2.75rem; padding-top: .35rem; padding-bottom: .35rem;
      font-size: .95rem; line-height: 1.25; }
  }
  /* Les autres écrans du mode RPG (menus d'aventure, premiers pas, choix d'équipe…) : la bannière rétrécit si les commandes épinglées sont hautes. */
  body.images-actives.vue-pro.rpg-ecran-pro #ecran-rpg[data-banniere]::before { width: min(100%, 48rem, 72dvh, max(8rem, calc((100dvh - var(--eu-pile, 0px) - 13rem) * 4))); }

  /* ---------- 3. Les écrans de menu (accueil, règles, commandes, caractéristiques, glossaire, mini-jeux, options) : la page ne défile plus ---------- */
  body.vue-pro.eu-page { height: 100vh; height: 100dvh; overflow: hidden; box-sizing: border-box; }
  body.vue-pro.eu-page > #accueil-ecrans { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; box-sizing: border-box; }
  body.vue-pro.eu-page .eu-cadre { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-top: 12px; }
  body.vue-pro.eu-page > #menu.eu-cadre { flex: 0 1 auto; }

  
  /* Sans illustrations (relecture du 25/10/2026 : le lot ne valait qu'avec elles) : le mode RPG est un écran de page comme les menus ; l'écran du
     mode RPG devient une colonne dont le cadre (#rpg-zone) défile. Avec illustrations, sa propre mise en page (récit, bataille) reste en place. */
  body.vue-pro:not(.images-actives).eu-page > #accueil-ecrans > #ecran-rpg { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
  body.vue-pro:not(.images-actives).eu-page #ecran-rpg > #rpg-zone.eu-cadre { flex: 0 1 auto; }

/* ---------- 4. La bataille (js/ecran-unique.js, point 7) : css/combat-commandes.css lit --eu-zone-min et --eu-scene-min ; ici, le fond des
     boutons épinglés est celui du tableau, et le glisser du doigt dans le cadre ne fait jamais défiler la page derrière. ---------- */
  body.images-actives.vue-pro.rpg-visuel { --eu-fond: #121530; }
  body.images-actives.vue-contraste.rpg-visuel { --eu-fond: #000; }
  body.images-actives.vue-pro #rpg-zone.eu-cadre { overscroll-behavior: contain; }
  /* Texte agrandi, étape des actions (relecture du 25/10/2026) : css/combat-commandes.css (section 10) y faisait défiler TOUT l'écran (#ecran-rpg,
     scène fixée à 45 %) : à 120 %, plus un seul bouton d'action visible. Sous le cadre unique, la même grille que sans texte agrandi : la scène cède
     jusqu'à --eu-scene-min, la rangée des boutons réserve --eu-zone-min, et seul le cadre (#rpg-zone) défile, jamais l'écran. */
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg:has(> #rpg-zone.eu-cadre[data-vue="actions"]) {
    grid-template-rows: auto minmax(var(--eu-scene-min, 24dvh), 46dvh) auto auto minmax(var(--eu-zone-min, 3.5rem), 1fr) auto; overflow: hidden; }
  html[data-vue-texte="grand"] body.images-actives.vue-pro.rpg-visuel #ecran-rpg > #rpg-zone.eu-cadre[data-vue="actions"] { overflow-y: auto; }
}

/* ---------- 5. AFFICHAGE DE BATAILLE COMPACT (case #rpg-bataille-compacte, Med 25/10/2026 : cochée d'usine sur téléphone, décochée sur ordinateur,
   js/ui.js avant loadPrefs). VISUEL SEULEMENT : rien n'est retiré de l'arbre d'accessibilité (ni display:none ni aria-hidden sur un vrai texte) ;
   les morceaux masqués gardent leur texte (hauteur nulle, comme .ac-desc), le lecteur d'écran lit exactement la même chose qu'avant.
   - les actions : le nom seul (coût, portée et détails restent dans le bouton, la bulle d'aperçu #rpg-detail et la fiche) ;
   - la ligne d'état du personnage : « Lynndsie · vie 14/29 · ki 1/5 » (data-court, posé par js/ecran-unique.js, contenu à alternative vide) ;
   - la consigne sans sa sous-ligne d'aide, la bulle d'aperçu sur une ligne, les puces des cibles résumées (nom, état, « 0 à 9 dégâts ») ;
   - le bandeau des résultats (#rpg-visuel, déjà aria-hidden) : la dernière ligne seulement ; le journal complet reste dans la pause (J ou L3). ---------- */
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-zone[data-vue="actions"] .ac-puces,
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-zone[data-vue="actions"] button.big.ac-struct .ac-desc { height: 0 !important; min-height: 0; margin: -.2rem 0 0 !important; padding: 0 !important; overflow: hidden !important; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-zone[data-vue="actions"] > button.big.ac-struct,
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-zone[data-vue="actions"] > button.big.ac-meta { min-height: 2.75rem; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-consigne .cs-sous { display: none; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-consigne .cs-phrase { font-size: var(--ds-fs-corps, 1.125rem); }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-detail.plein { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) .cp-chiffres { display: none; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) .cp-txt { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: .4rem; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) .cp-nom { flex: 1 0 100%; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) .cp-etat { margin-top: 0; }
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-visuel .bandeau > li:not(:last-child),
body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-visuel .bp-bandeau > li:not(:last-child) { display: none; }
/* La ligne d'état courte : seulement si le navigateur sait donner une alternative vide au contenu CSS (sinon le texte complet reste affiché). */
@supports (content: "a" / "") {
  body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-zone > .rpg-ligne[data-entete][data-court] { font-size: 0; }
  body.images-actives.vue-pro.rpg-visuel:has(#rpg-bataille-compacte:checked) #rpg-zone > .rpg-ligne[data-entete][data-court]::before { content: attr(data-court) / ""; font-size: var(--ds-fs-petit, 1rem); line-height: 1.5; }
}