/* ===== É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 (réécrit le 23/10/2026 : retours de Valentin, Play Ability) ----------
   Hiérarchie par la TAILLE, le remplissage et la FORME, jamais par le gras : un bouton principal (orange plein, flèche), les modes de jeu (cartes à bord doré),
   puis les écrans d'aide et de réglage (bord gris, plus discrets), puis le lien de mise à jour. Les groupes se repèrent à la grille et à l'espacement, sans
   aucun texte ajouté. L'ordre du DOM (donc de la navigation) ne change pas. Ne JAMAIS poser « display » sur un bouton de l'accueil : certains sont masqués
   par un style en ligne (Continuer l'aventure, Démo, boutons de développeur). */
#accueil-ecrans { max-width: min(64rem,100%); }
#accueil { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: .5rem; align-content: start; max-width: 100%; }
#accueil::before { grid-column: 1 / -1; justify-self: center; }
#accueil > h2, #accueil > p, #accueil > div#acc-nouvelles { grid-column: 1 / -1; margin: .2rem 0; }
#accueil > h2#accueil-titre { margin: 0 auto .25rem; padding: 0 .5rem; font-size: var(--ds-fs-titre2); font-weight: var(--ds-fw-libelle); letter-spacing: .02em; color: var(--ds-titre); }
/* Avis stéréo et nouvelles du jeu : des ENCARTS (barre latérale, pas de cadre de bouton), lisibles sur l'illustration, alignés à gauche, 70 caractères. */
#accueil > p#avis-stereo { justify-self: center; width: 100%; max-width: 46rem; margin: .1rem 0; padding: .6rem 1rem .6rem 3rem; position: relative; text-align: left; font-size: var(--ds-fs-petit); line-height: 1.5; font-weight: var(--ds-fw-texte);
  color: var(--ds-texte); text-shadow: none; background: rgba(8,9,18,.82); border-left: 6px solid var(--ds-info); border-radius: 0 12px 12px 0; }
#accueil > p#avis-stereo::before { content: "i" / ""; position: absolute; left: .75rem; top: .65rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center;
  font: italic 700 1rem/1 Georgia, "Times New Roman", serif; color: var(--ds-info); border: 2px solid var(--ds-info); border-radius: 50%; }
/* NOUVELLES PONCTUELLES DU JEU (Med, 21/10/2026) : js/mise-a-jour.js pose un paragraphe par nouvelle dans #acc-nouvelles. Encart à barre orange, texte clair sur fond sombre,
   étiquette « Nouvelle du jeu » purement visuelle (contenu à alternative vide : jamais lue, le lecteur d'écran lit la nouvelle elle-même). */
#accueil > div#acc-nouvelles > p.nouvelle { position: relative; margin: .25rem auto; width: 100%; max-width: 46rem; padding: .6rem 1rem .7rem 3rem; text-align: left; font-size: var(--ds-fs-corps); line-height: 1.5; font-weight: var(--ds-fw-texte);
  color: var(--ds-texte); background: rgba(8,9,18,.9); border: 0; border-left: 6px solid var(--ds-primaire); border-radius: 0 12px 12px 0; }
#accueil > div#acc-nouvelles > p.nouvelle::after { content: "i" / ""; position: absolute; left: .75rem; top: .7rem; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center;
  font: italic 700 1rem/1 Georgia, "Times New Roman", serif; color: var(--ds-primaire); border: 2px solid var(--ds-primaire); border-radius: 50%; }
#accueil > div#acc-nouvelles > p.nouvelle::before { content: "Nouvelle du jeu" / ""; display: block; margin-bottom: .1rem; font-size: var(--ds-fs-petit); font-weight: var(--ds-fw-libelle); letter-spacing: .04em; text-transform: uppercase; color: var(--ds-primaire); }
/* Les boutons : trois rangs. Rang 2 (modes de jeu) : cartes à bord doré, trois par ligne. Rang 3 (aides et réglages) : bord gris, plus bas. */
#accueil > button.big { margin: 0; width: 100%; max-width: none; min-height: 3.5rem; padding: .5rem .9rem; font-size: var(--ds-fs-titre3); font-weight: var(--ds-fw-libelle); line-height: 1.25; border-radius: 12px;
  color: #fff; background: var(--ds-carte); border: 2px solid var(--ds-bord-carte); box-shadow: none; grid-column: span 4; }
#accueil > button.big:hover { background: var(--ds-carte-fort); }
#accueil > button#acc-commandes-btn, #accueil > button#acc-regles-btn, #accueil > button#acc-carac-btn, #accueil > button#acc-glossaire-btn,
#accueil > button#acc-options-btn, #accueil > button#acc-guide-btn, #accueil > button#acc-historique-btn {
  min-height: var(--ds-cible-min); font-size: var(--ds-fs-corps); border-color: var(--ds-bord-discret); }
#accueil > button#acc-commandes-btn, #accueil > button#acc-regles-btn { grid-column: span 3; }
#accueil > button#acc-carac-btn { grid-column: span 4; }
#accueil > button#acc-glossaire-btn { grid-column: span 2; }
#accueil > button#acc-commandes-btn { grid-column: 1 / span 3; margin-top: .75rem; }
#accueil > button#acc-regles-btn, #accueil > button#acc-carac-btn, #accueil > button#acc-glossaire-btn { margin-top: .75rem; }
#accueil > button#acc-options-btn { grid-column: 1 / span 4; }
/* Le bouton principal : « Continuer l'aventure » quand il existe, sinon « Aventure ». Fond plein orange, bordure 3 px, plus haut, flèche. UN SEUL. */
#accueil > button#acc-av-suite-btn:not([style*="none"]), #accueil > button#acc-av-suite-btn[style*="none"] + button#acc-av-btn {
  grid-column: 1 / -1; min-height: 4rem; font-size: 1.375rem; color: var(--ds-primaire-texte); background: var(--ds-primaire); border: 3px solid var(--ds-primaire-bord); }
#accueil > button#acc-av-suite-btn:not([style*="none"]):hover, #accueil > button#acc-av-suite-btn[style*="none"] + button#acc-av-btn:hover { background: #ffc26e; }
#accueil > button#acc-av-suite-btn:not([style*="none"])::after, #accueil > button#acc-av-suite-btn[style*="none"] + button#acc-av-btn::after { content: "\2192" / ""; margin-left: .75rem; font-weight: var(--ds-fw-titre); }
/* La mise à jour : un LIEN (souligné en permanence), pas un bouton plein ; texte entier, sur une ligne centrée. */
#accueil > button#acc-maj-btn { grid-column: 1 / -1; width: auto; justify-self: center; min-height: var(--ds-cible-min); margin: .5rem 0 .25rem; padding: .5rem 1rem; font-size: var(--ds-fs-petit); font-weight: var(--ds-fw-texte);
  color: var(--ds-texte); background: rgba(8,9,18,.78); border: 0; text-decoration: underline; text-underline-offset: .2em; max-width: 100%; }
/* Écran large : l'avis stéréo et la nouvelle du jeu côte à côte (économise 100 px de hauteur), seulement quand les deux existent. */
@media (min-width: 64rem) {
  #accueil:has(> div#acc-nouvelles:not([hidden])) > p#avis-stereo { grid-column: 1 / span 5; max-width: none; align-self: start; margin-top: .1rem; }
  #accueil:has(> div#acc-nouvelles:not([hidden])) > div#acc-nouvelles { grid-column: 6 / span 7; }
  #accueil:has(> div#acc-nouvelles:not([hidden])) > div#acc-nouvelles > p.nouvelle { max-width: none; margin: .1rem 0; }
}
@media (max-width: 47.99rem) {
  #accueil > button.big, #accueil > button#acc-commandes-btn, #accueil > button#acc-regles-btn, #accueil > button#acc-carac-btn, #accueil > button#acc-glossaire-btn, #accueil > button#acc-options-btn { grid-column: span 6; }
  #accueil > button#acc-av-suite-btn:not([style*="none"]), #accueil > button#acc-av-suite-btn[style*="none"] + button#acc-av-btn { grid-column: 1 / -1; }
  #accueil > button.big { font-size: var(--ds-fs-corps); padding: .5rem .6rem; overflow-wrap: anywhere; }
  #accueil > button#acc-commandes-btn, #accueil > button#acc-options-btn { grid-column: 1 / span 6; }
  #accueil > button#acc-glossaire-btn, #accueil > button#acc-carac-btn { margin-top: 0; }
}
body.images-actives #accueil::before { width: min(100%,22rem,32vh); width: min(100%,22rem,32dvh); margin-bottom: .2rem; }
@media (max-height: 48rem) {
  #accueil > button.big { min-height: 3rem; padding: .3rem .6rem; font-size: var(--ds-fs-corps); }
  #accueil > button#acc-av-suite-btn:not([style*="none"]), #accueil > button#acc-av-suite-btn[style*="none"] + button#acc-av-btn { min-height: 3.5rem; font-size: var(--ds-fs-titre3); }
  body.images-actives #accueil::before { width: min(100%,22rem,21vh); width: min(100%,22rem,21dvh); margin-bottom: 0; }
  #accueil { gap: .375rem .5rem; }
  #accueil > button#acc-commandes-btn, #accueil > button#acc-regles-btn, #accueil > button#acc-carac-btn, #accueil > button#acc-glossaire-btn { margin-top: .125rem; }
  #accueil > button#acc-maj-btn { min-height: 2.75rem; margin: 0; padding: .25rem 1rem; }
  #accueil > p#avis-stereo, #accueil > div#acc-nouvelles > p.nouvelle { padding-top: .35rem; padding-bottom: .4rem; }
  #accueil > h2#accueil-titre { margin: 0 auto; }
  #accueil > p#avis-stereo::before { top: .45rem; } #accueil > div#acc-nouvelles > p.nouvelle::after { top: .5rem; }
}
@media (max-height: 26rem) {
  #accueil { gap: .25rem .5rem; }
  #accueil > button.big { min-height: 2.75rem; padding: .2rem .4rem; font-size: var(--ds-fs-petit); }
  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; }
}