/* ===== ÉCRANS COMPACTS : tenir en UN SEUL ÉCRAN, sur toutes les plateformes (Med, 14/10/2026) =====
   Chargé EN DERNIER (après style.css, images.css, rpg-visuel.css, combat-visuel.css). Mise en page seulement : aucun texte,
   aucun ordre du DOM, aucun focus ne change.
   1. ACCUEIL : les gros boutons passent en grille fluide ; l'illustration se réduit avec la hauteur de l'écran.
   2. BATAILLE RPG (illustrée) : la page ne défile plus. Le titre et le plateau restent en haut, la zone de jeu (#rpg-zone : question,
      activation, actions, ciblage…) prend le reste et ne défile EN INTERNE que si ses boutons sont trop nombreux pour la hauteur
      (menu d'actions complet sur un téléphone, par exemple). Le bouton clavier/manette qui prend le focus reste toujours amené à l'écran.
   Sous 20 rem de hauteur (zoom très fort, fenêtre minuscule), on revient au défilement normal de la page : rien ne devient inaccessible. */

/* ---------- 1. ACCUEIL ---------- */
#accueil-ecrans { max-width: min(72rem,100%); }
#accueil { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: .4rem .6rem; max-width: 100%; }
#accueil > h2, #accueil > p { flex: 0 0 100%; margin: .2rem 0; text-align: center; }
#accueil > p#avis-stereo { font-size: .8rem; }
#accueil > button.big { margin: 0; padding: .5rem .7rem; font-size: clamp(.95rem,1.4vw + .55rem,1.2rem); flex: 1 1 clamp(9rem,22%,17rem); max-width: 21rem; }
#accueil > button#acc-maj-btn { flex: 1 1 100%; max-width: none; font-size: .85rem; }
body.images-actives #accueil::before { width: min(100%,22rem,32vh); width: min(100%,22rem,32dvh); margin-bottom: .2rem; }
@media (max-height: 44rem) {
  #accueil > button.big { padding: .4rem .6rem; }
  body.images-actives #accueil::before { width: min(100%,22rem,26vh); width: min(100%,22rem,26dvh); }
  #accueil > p#avis-stereo { font-size: .75rem; }
}
@media (max-height: 26rem) {
  #accueil { gap: .25rem .5rem; }
  #accueil > button.big { padding: .2rem .4rem; font-size: .85rem; flex-basis: clamp(8rem,23%,14rem); }
  body.images-actives #accueil::before { width: min(100%,22rem,16vh); width: min(100%,22rem,16dvh); }
  #accueil > p#avis-stereo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }   /* masqué à l'œil seulement : le lecteur d'écran le lit toujours */
}

/* ---------- 2. BATAILLE RPG ILLUSTRÉE ---------- */
@media (min-height: 20rem) {
  body.images-actives.rpg-visuel { height: 100vh; height: 100dvh; box-sizing: border-box; overflow: hidden; padding-bottom: 0 !important; }
  body.images-actives.rpg-visuel #accueil-ecrans { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; min-height: 0;
    padding: clamp(4px,1.2vh,12px) clamp(6px,2vw,16px); }
  body.images-actives.rpg-visuel #ecran-rpg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  body.images-actives.rpg-visuel #rpg-titre { flex: none; margin: 0 0 4px; padding: .15rem .6rem; font-size: .8rem; }
  body.images-actives.rpg-visuel #rpg-visuel { flex: none; margin-bottom: 6px; }
  body.images-actives.rpg-visuel #rpg-zone { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    scroll-padding: 8px; -webkit-overflow-scrolling: touch; }
  /* Le bouton d'aide tactile (posé en bas à droite, au-dessus de la liste) passe en haut à droite, plus petit : il ne recouvre plus aucune action. */
  /* Boutons d'action plus serrés (la hauteur d'un bouton reste d'au moins 40 px : cible tactile). */
  body.images-actives.rpg-visuel #rpg-zone button.big { padding: .35rem .6rem; min-height: 2.5rem; font-size: .95rem; line-height: 1.25; margin-bottom: 0; }
  body.images-actives.rpg-visuel #rpg-zone .rpg-ligne { padding: 4px 8px; margin-bottom: 4px; font-size: .9rem; }
  body.images-actives.rpg-visuel #rpg-zone[data-vue="actions"] { gap: 0 8px; }
}

/* Plateau plus compact dès que la hauteur manque (téléphone en portrait ou ordinateur peu haut) */
@media (min-height: 20rem) and (max-height: 56rem) {
  body.images-actives.rpg-visuel #rpg-visuel .cote { padding: 4px 8px 6px; }
  body.images-actives.rpg-visuel #rpg-visuel .cote-titre { margin-bottom: 3px; }
  body.images-actives.rpg-visuel #rpg-visuel .zone { min-height: 0; padding: 4px; gap: 4px; }
  body.images-actives.rpg-visuel #rpg-visuel .plateau { gap: 5px; }
  body.images-actives.rpg-visuel #rpg-visuel .tour { padding: 3px 10px; }
  body.images-actives.rpg-visuel #rpg-visuel .tour .grand { font-size: 1.25rem; }
}
@media (min-height: 20rem) and (max-height: 44rem) { body.images-actives.rpg-visuel #rpg-visuel .bandeau { display: none; } }   /* dernières annonces (équivalent écrit de l'audio) : gardées tant qu'il y a de la place */

/* Téléphone en portrait : adversaires et héros chacun sur une rangée de tuiles très compactes ; le centre (tour, dé) tient sur une ligne. */
@media (min-height: 20rem) and (max-width: 43.99rem) {
  body.images-actives.rpg-visuel #rpg-visuel .jeton { width: 4.4rem; padding: 3px 2px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .por { width: 26px; height: 26px; margin-top: 2px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .nom { font-size: .6rem; }
  body.images-actives.rpg-visuel #rpg-visuel .cote-titre { display: inline-block; margin: 0 8px 0 0; }
  body.images-actives.rpg-visuel #rpg-visuel .tour { flex-direction: row; gap: 8px; padding: 2px 10px; }
  body.images-actives.rpg-visuel #rpg-visuel .tour .grand { font-size: 1rem; }
  body.images-actives.rpg-visuel #rpg-visuel .tour .petit { font-size: .75rem; }
}

/* Tablette et téléphone en paysage (largeur de 40 à 75 rem) : héros | tour | adversaires sur une seule bande, tuiles compactes (sinon les deux camps s'empilent). */
@media (min-height: 20rem) and (min-width: 40rem) and (max-width: 74.99rem) {
  body.images-actives.rpg-visuel #rpg-visuel .plateau { grid-template-columns: minmax(0,1fr) 7rem minmax(0,1fr); align-items: stretch; }
  body.images-actives.rpg-visuel #rpg-visuel .cote[data-camp="heros"] { order: 1; }
  body.images-actives.rpg-visuel #rpg-visuel .centre { order: 2; flex-direction: column; justify-content: center; }
  body.images-actives.rpg-visuel #rpg-visuel .cote[data-camp="adverse"] { order: 3; }
  body.images-actives.rpg-visuel #rpg-visuel .cote[data-camp="adverse"] .zone[data-zone="A"] { order: 0; }
  body.images-actives.rpg-visuel #rpg-visuel .zones { display: flex; gap: 4px; }
  body.images-actives.rpg-visuel #rpg-visuel .zone { flex: 1 1 auto; min-width: 3.6rem; }
  body.images-actives.rpg-visuel #rpg-visuel .jetons { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton { grid-template-columns: minmax(0,1fr); justify-items: center; width: 4.6rem; padding: 3px 2px; gap: 1px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton[data-camp="adverse"] { box-shadow: inset 0 3px 0 var(--rv-adverse), inset 0 5px 0 var(--rv-verre-fort), inset 0 7px 0 var(--rv-adverse); }
  body.images-actives.rpg-visuel #rpg-visuel .jeton[data-camp="heros"] { box-shadow: inset 0 4px 0 var(--rv-heros); }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .por { width: 28px; height: 28px; grid-row: auto; margin-top: 3px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .txt { width: 100%; align-items: center; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .tete { justify-content: center; max-width: 100%; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .nom { font-size: .62rem; line-height: 1.05; text-align: center; overflow-wrap: normal; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .barres { width: 100%; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .chiffres, body.images-actives.rpg-visuel #rpg-visuel .jeton .statuts { display: none; }
  body.images-actives.rpg-visuel #rpg-visuel .tour .grand { font-size: 1.1rem; }
  body.images-actives.rpg-visuel #rpg-visuel .tour .petit { font-size: .72rem; }
  body.images-actives.rpg-visuel #rpg-visuel .de .face { width: 40px; height: 40px; font-size: 1.4rem; }
}
@media (min-height: 20rem) and (max-height: 30rem) and (min-width: 40rem) and (max-width: 74.99rem) {
  body.images-actives.rpg-visuel #rpg-visuel .zlib { display: none; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton { width: 4rem; padding: 2px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .por { width: 22px; height: 22px; }
  body.images-actives.rpg-visuel #rpg-visuel .jeton .nom { font-size: .56rem; }
  body.images-actives.rpg-visuel #rpg-visuel .de .face { width: 34px; height: 34px; font-size: 1.2rem; }
  body.images-actives.rpg-visuel #rpg-zone button.big { min-height: 2.2rem; padding: .2rem .5rem; font-size: .88rem; }
}
/* Étiquettes « Arrière / Front » (décoratives, aria-hidden) retirées quand la hauteur manque : le front reste reconnaissable à son fond plus clair. */
@media (min-height: 20rem) and (max-height: 44rem) { body.images-actives.rpg-visuel #rpg-visuel .zlib { display: none; } }
/* Titre de l'étape : une seule ligne fine, qui laisse sa place au bouton d'aide tactile (en haut à droite). */
@media (min-height: 20rem) {
  body.images-actives.rpg-visuel #rpg-titre { display: flex; align-items: center; min-height: 28px; }
  body.images-actives.rpg-visuel #aide-tactile-btn { bottom: auto !important; right: 6px !important; top: 2px !important; min-height: 28px !important; padding: .05em .6em !important; font-size: .75rem !important; }
  body:has(#aide-tactile-btn).images-actives.rpg-visuel #rpg-titre { max-width: calc(100% - 9.5rem); }   /* le bouton d'aide tactile ne recouvre jamais le titre */
  /* LA CIBLE TACTILE REMONTE DE 28 À 38 px (relecture du 15/10/2026). Ce bloc avait ramené le bouton d'aide à 28 px de
     haut pour qu'il ne recouvre plus aucune action : bon pour la mise en page, mais la décision du 06/10/2026 était 44 px
     au moins, et le toucher se juge sur la ZONE, pas sur le dessin. Une zone de toucher invisible, centrée sur le bouton,
     l'élargit SANS rien déplacer et sans recouvrir aucun autre bouton.
     POURQUOI 38 ET PAS 44, mesuré dans Chromium à 360x640, 390x844, 414x896, 768x1024, 740x360 et 1920x1080 : le bouton
     est posé à 2 px du haut de l'écran (`top: 2px`), donc une zone de 44 px centrée sur lui sortirait de l'écran par le
     haut -- il n'en resterait que 38 px touchables. Les étendre vers le BAS donnerait bien 44 px, mais la bande
     mordrait alors sur le plateau, dont les jetons sont cliquables depuis le 13/10 : on volerait leurs appuis. Trancher
     entre les deux demande une mesure sur la vraie page, à poser à Med.
     `overflow: visible` est explicite : un bouton qui rognerait son pseudo-élément annulerait l'élargissement en silence. */
  body.images-actives.rpg-visuel #aide-tactile-btn { overflow: visible; }
  body.images-actives.rpg-visuel #aide-tactile-btn::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  body.images-actives.rpg-visuel #rpg-zone { padding: 6px; min-height: 7rem; }   /* de la place pour l'anneau de focus ; jamais une zone d'actions écrasée à 0 */
  body.images-actives.rpg-visuel #ecran-rpg { overflow-y: auto; }   /* filet : si plateau + zone dépassent (zoom fort), l'écran défile au lieu de rogner */
}

/* ---------- 3. MENUS COURTS (combat, versus, survie, pause) : boutons plus serrés quand la hauteur manque ----------
   Les listes longues par nature (commandes, caractéristiques, mini-jeux, réglages) défilent avec la page : c'est voulu, elles ne tiendraient pas lisiblement. */
@media (max-height: 58rem) {
  #ecran-combat button.big, #ecran-versus button.big, #ecran-survival button.big, #ecran-pause button.big, #ecran-pause-mj button.big, #ecran-fin button.big { margin: .15rem 0; padding: .4rem .7rem; }
}