/* ===== DESIGN SYSTÈME de Mina Arcana (23/10/2026) — jetons, composants communs et typographie des écrans HORS COMBAT =====
   Source : audit visuel avec les retours de Valentin (Play Ability) : « lisibilité et typographie à améliorer partout (marges, trop de gras : se servir de la
   TAILLE du texte pour hiérarchiser) ; les zones interactives ne se distinguent pas assez des textes explicatifs ».
   Recherches : recherches/recherche-a11y-visuelle.md. Contrat : SPEC-VISUELLE.md.

   CHARGÉ EN DERNIER (après vue-pro.css et bataille-pro.css, voir index.html) : c'est le seul moyen de reprendre la main sur les règles de ces fichiers sans y
   toucher. Quand une règle de vue-pro.css est plus spécifique, on ajoute « :not(#ds) » devant le sélecteur : un identifiant de plus l'emporte sur n'importe
   quel nombre de classes (convention de ce fichier, ne pas la retirer).

   PÉRIMÈTRE : écran titre, options, écrans d'explication (règles, commandes, caractéristiques, glossaire, guide, historique, fiches, Premiers pas), menus et récits
   du mode RPG HORS bataille (aventure, mini-aventures, donjons, autel, coffres, boutiques), pauses, mini-jeux, fin. Le COMBAT (body.rpg-visuel) et la
   création d'équipe ne sont pas touchés ici : ils utilisent les mêmes jetons et composants (.ds-*), dans leurs propres feuilles.

   AUCUN texte, AUCUN ordre du DOM, AUCUN focus ne change. Les flèches « → » « ← » « + » et les repères sont des pseudo-éléments à texte alternatif VIDE
   (« content: "→" / "" ») : jamais lus, jamais dans le nom accessible ; un navigateur qui ne connaît pas cette syntaxe ignore la règle (pas de flèche, rien de lu).
   RÈGLES : hiérarchie par la TAILLE, jamais par le gras ; gras réservé aux libellés courts (600) et aux titres (700) ;
   texte utile jamais sous 1rem (0,875 rem toléré pour les puces et étiquettes seulement) ; ligne de texte ≤ 70 caractères ; texte courant aligné à gauche. */
:root {
  /* Tailles (1rem = taille du navigateur ; tout reste en rem pour suivre l'option « Taille du texte » : html { font-size: calc(100% * var(--vue-echelle)) }) */
  --ds-fs-puce: .875rem;      /* puces, étiquettes de jeton, légendes très courtes (plancher absolu) */
  --ds-fs-petit: 1rem;        /* texte secondaire utile */
  --ds-fs-corps: 1.125rem;    /* texte courant, libellés de boutons */
  --ds-fs-titre3: 1.25rem;    /* nom d'un personnage, titre de carte, titre de rubrique */
  --ds-fs-titre2: 1.5rem;     /* titre de section, CONSIGNE D'ÉTAPE */
  --ds-fs-titre1: 2rem;       /* titre d'écran */
  /* Graisses : trois seulement. 900 réservé aux grands chiffres (dé, numéro de tour). */
  --ds-fw-texte: 400;
  --ds-fw-libelle: 600;   /* libellé d'un bouton PRINCIPAL, de retour ou d'une rubrique */
  --ds-fw-choix: 400;     /* libellé d'une carte de CHOIX : la forme (carte, bord, losange) dit « bouton », pas le gras */
  --ds-fw-titre: 700;
  --ds-lh-texte: 1.5;
  --ds-lh-titre: 1.25;
  --ds-mesure: 70ch;          /* largeur maximale d'un bloc de texte */
  /* Espacements (échelle 4 / 8 / 12 / 16 / 24 / 32) */
  --ds-e1: .25rem; --ds-e2: .5rem; --ds-e3: .75rem; --ds-e4: 1rem; --ds-e6: 1.5rem; --ds-e8: 2rem;
  --ds-marge-ecran: min(clamp(1rem, 4vw, 3rem), 5vw);
  --ds-cible-min: 3rem;       /* hauteur minimale d'un bouton (48 px) ; jamais sous 44 px */
  --ds-ecart-cibles: .5rem;   /* espace minimal entre deux boutons */
  /* Bordures et focus */
  --ds-bord: 2px;
  --ds-focus: 3px;
  --ds-rayon: 12px;
  /* Teintes de statut — TOUJOURS doublées d'une forme, d'une icône ou d'un mot (WCAG 1.4.1) */
  --ds-ok: #7be0a0;
  --ds-alerte: #ffd27a;
  --ds-danger: #ff8b8b;
  --ds-info: #6fbcff;
  /* Palette des écrans (contrastes mesurés sur #0a0c18 : texte 17:1, titre 13:1, bord de carte 8:1, bord discret 6:1) */
  --ds-texte: #f7f4ec;        /* texte courant */
  --ds-texte-doux: #e2ddcf;   /* texte secondaire */
  --ds-titre: #ffd27a;        /* titres */
  --ds-or: #e8b04a;           /* filets, barres latérales */
  --ds-fond-panneau: rgba(10, 12, 24, .92);
  --ds-carte: #171b36;        /* fond d'une carte-bouton */
  --ds-carte-fort: #222850;   /* survol */
  --ds-bord-carte: #d9b45c;   /* bord d'un bouton de choix */
  --ds-bord-discret: #9aa0bc; /* bord d'un contrôle de troisième rang */
  --ds-primaire: #ffb454;     /* fond du bouton principal (texte #14141c : 10:1) */
  --ds-primaire-bord: #ffe3a8;
  --ds-primaire-texte: #14141c;
  --ds-focus-couleur: #fff;
  --ds-focus-halo: rgba(232, 176, 74, .85);
  --ds-hachure: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 3px, rgba(255,255,255,0) 3px 8px);
}

/* ============================================================================================================================
   1. BASE TYPOGRAPHIQUE DES ÉCRANS HORS COMBAT
   Les conteneurs d'écran reçoivent corps 1,125 rem et interligne 1,5 ; le combat (body.rpg-visuel #rpg-zone) garde ses tailles.
   ============================================================================================================================ */
body:not(#ds) #accueil, body:not(#ds) #menu, body:not(#ds) #ecran-commandes, body:not(#ds) #ecran-regles, body:not(#ds) #ecran-caracteristiques,
body:not(#ds) #ecran-glossaire, body:not(#ds) #ecran-pause, body:not(#ds) #ecran-pause-mj, body:not(#ds) #ecran-minijeux, body:not(#ds) #ecran-fin,
body:not(#ds) #ecran-versus, body:not(#ds) #ecran-combat, body:not(#ds) #ecran-survival, body:not(#ds) #ecran-banc-abx, body:not(#ds) #ecran-tactique,
body:not(#ds):not(.rpg-visuel) #rpg-zone, body:not(#ds) #fenetre-infos {
  font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); font-weight: var(--ds-fw-texte);
}
/* Les contrôles héritent de la police et de la taille de la page (le navigateur les met en 13 px et en Arial). */
body:not(#ds) :is(#accueil, #menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin,
  #ecran-versus, #ecran-combat, #ecran-survival, #ecran-banc-abx, #ecran-tactique, #fenetre-infos) :is(button, input, select, textarea),
body:not(#ds):not(.rpg-visuel) #rpg-zone :is(button, input, select, textarea) { font-family: inherit; font-size: inherit; line-height: 1.3; }

/* Titre d'écran : par la TAILLE (2 rem), pas par le gras ni la couleur seule. */
body:not(#ds) h2.sub {
  margin: var(--ds-e2) auto var(--ds-e4); text-align: center; letter-spacing: 0; text-transform: none; text-shadow: none;
  font-size: var(--ds-fs-titre1); font-weight: var(--ds-fw-titre); line-height: var(--ds-lh-titre); color: var(--ds-titre); overflow-wrap: anywhere;
}
/* Anneau de focus d'un titre (focalisé par programme à l'arrivée) : autour du texte seulement, jamais une barre pleine largeur qui ressemble à un bouton. */
body:not(#ds) h2.sub:focus:not(:focus-visible) { outline: 0; }
body:not(#ds) h2.sub:focus-visible { outline: 3px solid var(--ds-focus-couleur); outline-offset: 4px; border-radius: 6px; width: fit-content; max-width: 100%; }
body:not(#ds) h1#titre-jeu { font-size: var(--ds-fs-titre2); line-height: var(--ds-lh-titre); }

/* ============================================================================================================================
   2. COMPOSANTS COMMUNS (utilisables tels quels par les autres écrans : combat, création d'équipe)
   ============================================================================================================================ */
/* Texte courant : lisible, aligné à gauche, 70 caractères au plus, jamais justifié ni centré. */
.ds-prose, .ds-prose p { max-width: min(var(--ds-mesure), 100%); font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); font-weight: var(--ds-fw-texte); text-align: left; }
.ds-prose p { margin: 0 0 var(--ds-e4); }
/* Consigne d'écran ou d'étape : la phrase qui dit CE QUE LE JOUEUR DOIT FAIRE ; 1,5 rem, un seul niveau de gras. */
.ds-consigne { margin: 0 0 var(--ds-e2); font-size: var(--ds-fs-titre2); line-height: var(--ds-lh-titre); font-weight: var(--ds-fw-libelle); color: var(--ds-texte); text-align: left; max-width: min(var(--ds-mesure), 100%); }
/* Pastille d'étape (« Étape 1 sur 3 ») : forme + mot, jamais la couleur seule. */
.ds-etape { display: inline-block; margin: 0 0 var(--ds-e2); padding: .125rem .75rem; font-size: var(--ds-fs-petit); font-weight: var(--ds-fw-libelle); line-height: 1.5;
  color: var(--ds-texte); background: rgba(255,255,255,.08); border: 2px solid var(--ds-bord-discret); border-radius: 999px; }
/* Encart d'information : barre latérale + repère « i », AUCUNE forme de bouton (ni bordure complète, ni relief, ni survol). */
.ds-encart { position: relative; margin: 0 0 var(--ds-e4); padding: var(--ds-e3) var(--ds-e4) var(--ds-e3) 3rem; max-width: min(var(--ds-mesure), 100%); text-align: left;
  font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); font-weight: var(--ds-fw-texte); color: var(--ds-texte);
  background: rgba(8,9,18,.78); border: 0; border-left: 6px solid var(--ds-info); border-radius: 0 var(--ds-rayon) var(--ds-rayon) 0; box-shadow: none; }
.ds-encart::before { content: "i" / ""; position: absolute; left: .75rem; top: .75rem; 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%; }
.ds-encart--nouveau { border-left-color: var(--ds-primaire); }
.ds-encart--nouveau::before { color: var(--ds-primaire); border-color: var(--ds-primaire); }

/* Boutons : cinq types distincts par la FORME (remplissage, contour, pointillé, flèche), jamais par la couleur seule. */
.ds-btn { min-height: var(--ds-cible-min); padding: .5rem 1rem; font: inherit; font-weight: var(--ds-fw-libelle); line-height: 1.3; cursor: pointer; border-radius: var(--ds-rayon);
  color: #fff; background: var(--ds-carte); border: 2px solid var(--ds-bord-carte); box-shadow: none; }
.ds-btn:hover { background: var(--ds-carte-fort); }
.ds-btn:focus, .ds-btn:focus-visible { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
/* Primaire : UN SEUL par écran, fond plein, bordure 3 px, plus haut, flèche. */
.ds-btn--primaire { min-height: 3.5rem; padding: .625rem 1.5rem; color: var(--ds-primaire-texte); background: var(--ds-primaire); border: 3px solid var(--ds-primaire-bord); }
.ds-btn--primaire:hover { background: #ffc26e; }
.ds-btn--primaire::after { content: "\2192" / ""; margin-left: .625rem; font-weight: var(--ds-fw-titre); }
/* Secondaire (retour, annuler) : contour 2 px, fond neutre, flèche vers la gauche. */
.ds-btn--secondaire { background: transparent; border-color: var(--ds-bord-discret); font-weight: var(--ds-fw-libelle); }
.ds-btn--secondaire::before { content: "\2190" / ""; margin-right: .625rem; }
/* Ajout : fond léger, bordure POINTILLÉE, « + ». */
.ds-btn--ajout { background: rgba(255,255,255,.07); border-style: dashed; border-color: var(--ds-bord-discret); }
.ds-btn--ajout::before { content: "+" / ""; margin-right: .625rem; font-weight: var(--ds-fw-titre); }
/* Destructif : jamais primaire, contour rouge en tirets longs, croix. */
.ds-btn--destructif { background: transparent; color: #ffd0d0; border-color: #ff8b8b; border-style: double; border-width: 4px; }
.ds-btn--destructif::before { content: "\2715" / ""; margin-right: .625rem; }
/* Lien de navigation : soulignement permanent. */
.ds-lien { background: none; border: 0; box-shadow: none; padding: .5rem; min-height: var(--ds-cible-min); font: inherit; font-weight: var(--ds-fw-texte); color: var(--ds-texte-doux); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
/* Désactivé : un autre signe que le grisé (hachures) ; le contraste du texte reste ≥ 3:1. */
.ds-btn[aria-disabled="true"], .ds-btn:disabled { background-image: var(--ds-hachure); color: #d8d4c6; cursor: default; opacity: 1; }

/* ============================================================================================================================
   3. ÉCRANS À RUBRIQUES : options, commandes, règles, caractéristiques, glossaire (<details>, <summary>, <fieldset>, <label class="opt">)
   Un document : un panneau centré d'au plus 52 rem, une marge d'écran confortable, des titres de TAILLE croissante (écran 2 rem, rubrique 1,25 rem, sous-rubrique
   1,125 rem), du texte à 1,125 rem sur 70 caractères au plus. Les rubriques (summary) sont des CONTRÔLES : barre à bord gris, repère ▸ / ▾ ; les paragraphes
   sont du TEXTE : ni bord, ni fond, ni relief.
   ============================================================================================================================ */
/* Les panneaux d'écran de vue-pro.css ont TROIS identifiants dans leur sélecteur : il en faut davantage pour reprendre la main. */
body:not(#ds):not(#ds):not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-survival, #ecran-banc-abx) {
  width: 100%; max-width: 52rem; margin-inline: auto; box-sizing: border-box; padding: var(--ds-marge-ecran); text-align: left; color: var(--ds-texte);
}
body:not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire) > * { max-width: 100%; }
/* Texte explicatif (paragraphes, aides, indications) */
body:not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-pause, #ecran-minijeux, #ecran-fin) :is(p, .hint, .help, li) {
  max-width: min(var(--ds-mesure), 100%); margin: 0 0 var(--ds-e4); font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); font-weight: var(--ds-fw-texte); text-align: left; text-transform: none; color: var(--ds-texte);
}
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire) .hint, body:not(#ds) :is(#menu, #ecran-caracteristiques) .help { font-size: var(--ds-fs-petit); color: var(--ds-texte-doux); margin-bottom: var(--ds-e3); }
/* Anneau de focus d'un texte (la ligne que le clavier ou la manette parcourt) : 3 px, arrondi, jamais un cadre de bouton plein relief. */
body:not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-minijeux, #ecran-pause, #ecran-fin) :is(p, div)[tabindex]:focus { outline: 3px solid var(--ds-focus-couleur); outline-offset: 4px; border-radius: 6px; }
/* La consigne d'écran (premier paragraphe sous le titre) : un ENCART d'information, barre latérale et repère « i ». */
body:not(#ds) :is(#ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire) > h2.sub + p {
  position: relative; padding: var(--ds-e3) var(--ds-e4) var(--ds-e3) 3.25rem; background: rgba(255,255,255,.06); border-left: 6px solid var(--ds-info); border-radius: 0 var(--ds-rayon) var(--ds-rayon) 0; margin-bottom: var(--ds-e6);
}
body:not(#ds) :is(#ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire) > h2.sub + p::before {
  content: "i" / ""; position: absolute; left: .875rem; top: .875rem; 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%;
}
/* Rubriques repliables : ce sont des commandes, elles ont une FORME de commande (barre à bord, repère ▸ qui devient ▾) et une taille de titre. */
body:not(#ds) details.settings-section { margin: var(--ds-e2) 0 var(--ds-e3); }
body:not(#ds) details.settings-section > summary {
  display: flex; align-items: center; gap: var(--ds-e3); min-height: 3.25rem; padding: .625rem var(--ds-e4); cursor: pointer; list-style: none;
  font-size: var(--ds-fs-titre3); font-weight: var(--ds-fw-titre); line-height: var(--ds-lh-titre); color: var(--ds-titre);
  background: rgba(255,255,255,.07); border: 2px solid var(--ds-bord-discret); border-radius: var(--ds-rayon); overflow-wrap: anywhere;
}
body:not(#ds) details.settings-section > summary::-webkit-details-marker { display: none; }
body:not(#ds) details.settings-section > summary::marker { content: ""; }
body:not(#ds) details.settings-section > summary::before { content: "\25B8" / ""; flex: none; width: 1.25rem; text-align: center; color: var(--ds-texte); font-weight: var(--ds-fw-texte); }
body:not(#ds) details.settings-section[open] > summary::before { content: "\25BE" / ""; }
body:not(#ds) details.settings-section > summary:hover { background: rgba(255,255,255,.13); }
body:not(#ds) details.settings-section > summary:focus, body:not(#ds) details.settings-section > summary:focus-visible { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
body:not(#ds) details.settings-section[open] > summary { border-radius: var(--ds-rayon) var(--ds-rayon) 0 0; border-bottom-color: var(--ds-or); }
/* Contenu d'une rubrique ouverte : décalé et liseré à gauche, pour voir où il commence et où il finit. */
body:not(#ds) details.settings-section[open] > :not(summary) { margin-left: min(var(--ds-e3), 2vw); padding-left: min(var(--ds-e4), 2.5vw); border-left: 3px solid rgba(232,176,74,.45); }
body:not(#ds) details.settings-section[open] > details.settings-section { padding-left: 0; border-left: 0; margin-left: min(var(--ds-e3), 2vw); }
body:not(#ds) details.settings-section[open] > :not(summary):last-child { padding-bottom: var(--ds-e2); }
body:not(#ds) details.settings-section details.settings-section > summary { font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-libelle); min-height: 3rem; color: var(--ds-texte); background: rgba(255,255,255,.05); }
/* Sous-rubriques d'un formulaire (fieldset + legend) : titre de taille, pas de cadre de bouton. */
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause) fieldset { margin: var(--ds-e3) 0; padding: var(--ds-e3) var(--ds-e4); border: 0; border-top: 2px solid rgba(255,255,255,.22); border-radius: 0; min-width: 0; }
body:not(#ds) details.settings-section > fieldset { margin-top: 0; padding-top: var(--ds-e2); border-top: 0; }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause) legend { overflow-wrap: anywhere; padding: 0 var(--ds-e2) 0 0; font-size: var(--ds-fs-titre3); font-weight: var(--ds-fw-titre); line-height: var(--ds-lh-titre); color: var(--ds-titre); max-width: min(var(--ds-mesure), 100%); }
/* Réglages : des lignes aérées (case ou valeur + libellé de 70 caractères au plus), un filet entre deux lignes, 48 px de haut au moins. */
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause, #ecran-minijeux) label.opt, body:not(#ds) :is(#menu, #ecran-caracteristiques) div.opt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-e2) var(--ds-e3); min-height: 3rem; margin: 0; padding: var(--ds-e2) var(--ds-e2); max-width: min(var(--ds-mesure), 100%);
  font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-texte); line-height: var(--ds-lh-texte); color: var(--ds-texte); border-bottom: 1px solid rgba(255,255,255,.16); border-radius: 0;
}
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause, #ecran-minijeux) label.opt:focus-within { outline: 3px solid var(--ds-focus-couleur); outline-offset: 0; border-radius: 6px; background: rgba(255,255,255,.08); }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause, #ecran-minijeux) label.opt:hover { background: rgba(255,255,255,.05); }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause) label.opt:has(> input[type="checkbox"], > input[type="radio"]) { flex-wrap: nowrap; align-items: flex-start; }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause) .opt input[type="checkbox"], body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause) .opt input[type="radio"] {
  flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--ds-primaire);
}
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause, #ecran-minijeux) :is(input[type="number"], input[type="text"], input[type="search"], select) {
  min-height: 2.75rem; height: auto; padding: .25rem .625rem; font-size: var(--ds-fs-corps); color: #0a0a0a; background: #fff; border: 2px solid var(--ds-bord-discret); border-radius: 8px; max-width: 100%;
}
body:not(#ds) :is(#menu, #ecran-caracteristiques) :is(input[type="search"], input.champ-recherche) { width: min(100%, 30rem); }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-pause, #ecran-minijeux) :is(input, select):focus { outline: 3px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ds-focus-halo); }
/* Boutons secondaires des écrans de réglage et d'explication (Version du jeu, Réinitialiser, rejouer un son…) : contour 2 px, fond neutre. */
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire, #ecran-commandes, #ecran-regles) button:not(.big) {
  min-height: var(--ds-cible-min); margin: var(--ds-e1) var(--ds-e2) var(--ds-e1) 0; padding: .5rem var(--ds-e4); font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-libelle); line-height: 1.3; text-align: left; cursor: pointer;
  color: #fff; background: var(--ds-carte); border: 2px solid var(--ds-bord-discret); border-radius: var(--ds-rayon); box-shadow: none; max-width: 100%; overflow-wrap: anywhere;
}
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire, #ecran-commandes, #ecran-regles) button:not(.big):hover { background: var(--ds-carte-fort); }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire, #ecran-commandes, #ecran-regles) button:not(.big):focus { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire) button.glossary-snd { display: block; width: 100%; max-width: min(var(--ds-mesure), 100%); margin: 0 0 var(--ds-ecart-cibles); }
body:not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire) button.glossary-snd::before { content: "\25B6" / ""; display: inline-block; margin-right: .625rem; font-size: .875em; color: var(--ds-titre); }
/* Retour : un lien-bouton secondaire en bas d'écran (contour, flèche vers la gauche), jamais le bouton plein des modes de jeu. */
body:not(#ds) :is(#cmd-retour-btn, #regles-retour-btn, #carac-retour-btn, #glossaire-retour-btn, #versus-retour-btn, #cl-retour-btn, #mj-retour-btn, #banc-abx-retour-btn, #tactique-retour-btn) {
  display: block; width: auto; min-width: min(12rem, 100%); max-width: 100%; min-height: 3.25rem; margin: var(--ds-e6) 0 0; padding: .5rem var(--ds-e6); font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-libelle); text-align: center;
  color: #fff; background: transparent; border: 2px solid var(--ds-bord-discret); border-radius: var(--ds-rayon); box-shadow: none;
}
body:not(#ds) :is(#cmd-retour-btn, #regles-retour-btn, #carac-retour-btn, #glossaire-retour-btn, #versus-retour-btn, #cl-retour-btn, #mj-retour-btn, #banc-abx-retour-btn, #tactique-retour-btn)::before { content: "\2190" / ""; margin-right: .625rem; }
body:not(#ds) :is(#cmd-retour-btn, #regles-retour-btn, #carac-retour-btn, #glossaire-retour-btn, #versus-retour-btn, #cl-retour-btn, #mj-retour-btn, #banc-abx-retour-btn, #tactique-retour-btn):hover { background: var(--ds-carte-fort); }
body:not(#ds) :is(#cmd-retour-btn, #regles-retour-btn, #carac-retour-btn, #glossaire-retour-btn, #versus-retour-btn, #cl-retour-btn, #mj-retour-btn, #banc-abx-retour-btn, #tactique-retour-btn):focus { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
/* Bannières des écrans de lecture : plus basses (104 px au lieu de 192) pour laisser la place au contenu ; décoratives, aria-hidden, jamais déformées. */
body:not(#ds):not(#ds):not(#ds) :is(#menu, #ecran-regles, #ecran-caracteristiques, #ecran-commandes, #ecran-glossaire)::before { max-width: 26rem; margin-bottom: var(--ds-e2); }
/* Légende du glossaire : une phrase d'explication, pas un titre. */
body:not(#ds) :is(#ecran-glossaire) fieldset { margin: var(--ds-e2) 0; padding: var(--ds-e2) 0 0; border: 0; min-width: 0; }
body:not(#ds) :is(#ecran-glossaire) legend { padding: 0; margin-bottom: var(--ds-e3); font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-texte); color: var(--ds-texte-doux); max-width: min(var(--ds-mesure), 100%); }

/* ============================================================================================================================
   4. FENÊTRE D'INFORMATION (guide, historique des mises à jour, fiches, aides F1, Premiers pas, explications) : #fenetre-infos
   Posée par js/fenetre-infos.js avec un style en ligne (fond #111, 90 % de large) : on le reprend avec !important. Centrée, 52 rem au plus, marge d'écran,
   titre 2 rem, bloc lu à 1,25 rem (un bloc à la fois), rubriques dépliables en barres à bord, boutons du bas en rangée : « Bloc suivant » mis en avant.
   ============================================================================================================================ */
body:not(#ds) #fenetre-infos {
  left: 0 !important; right: 0 !important; margin-inline: auto !important; top: 3vh !important; width: min(94vw, 52rem) !important; max-height: 94vh !important; box-sizing: border-box;
  padding: var(--ds-marge-ecran) !important; color: var(--ds-texte) !important; background: rgba(10,12,24,.98) !important; border: 2px solid var(--ds-or) !important; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.85);
  text-align: left; overscroll-behavior: contain;
}
body:not(#ds) #fenetre-infos-titre { margin: 0 0 var(--ds-e4); font-size: var(--ds-fs-titre1); font-weight: var(--ds-fw-titre); line-height: var(--ds-lh-titre); color: var(--ds-titre); text-align: left; overflow-wrap: anywhere; }
body:not(#ds) #fenetre-infos-titre:focus { outline: 3px solid var(--ds-focus-couleur); outline-offset: 4px; border-radius: 6px; }
body:not(#ds) #fenetre-infos-bloc { max-width: min(var(--ds-mesure), 100%); margin: 0 0 var(--ds-e4); padding: 0 0 0 var(--ds-e4); border-left: 6px solid var(--ds-or); font-size: var(--ds-fs-titre3); line-height: 1.6; font-weight: var(--ds-fw-texte); color: var(--ds-texte); }
body:not(#ds) #fenetre-infos-tout { max-width: min(var(--ds-mesure), 100%); font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); }
body:not(#ds) #fenetre-infos-tout p, body:not(#ds) #fenetre-infos-tout li { max-width: min(var(--ds-mesure), 100%); margin: 0 0 var(--ds-e4); font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); font-weight: var(--ds-fw-texte); }
body:not(#ds) #fenetre-infos p.explication, body:not(#ds) #fenetre-infos-tout p.explication { font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); }
body:not(#ds) #fenetre-infos .rubrique { margin: var(--ds-e4) 0 var(--ds-e2); font-size: var(--ds-fs-titre3); font-weight: var(--ds-fw-titre); line-height: var(--ds-lh-titre); color: var(--ds-titre); max-width: min(var(--ds-mesure), 100%); }
body:not(#ds) #fenetre-infos .rubrique > button[aria-expanded] {
  display: flex; align-items: center; width: 100%; max-width: min(var(--ds-mesure), 100%); min-height: 3rem; margin: var(--ds-e1) 0; padding: .5rem var(--ds-e4); font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-titre); text-align: left; color: var(--ds-titre);
  background: rgba(255,255,255,.07); border: 2px solid var(--ds-bord-discret); border-radius: var(--ds-rayon);
}
body:not(#ds) #fenetre-infos .fi-dep { margin-left: var(--ds-e3); padding-left: var(--ds-e4); border-left: 3px solid rgba(232,176,74,.45); }
body:not(#ds) #fenetre-infos p#fenetre-infos-aide { max-width: min(var(--ds-mesure), 100%); margin: var(--ds-e4) 0; font-size: var(--ds-fs-petit); line-height: 1.5; color: var(--ds-texte-doux); }
/* Les boutons de la fenêtre : rangée, 3 rem de haut, 8 px d'écart ; Suite et Bloc suivant sont les actions de progression (remplis), les autres des contours. */
body:not(#ds) #fenetre-infos button {
  min-height: var(--ds-cible-min); min-width: 3rem; margin: var(--ds-e1) var(--ds-e2) var(--ds-e1) 0; padding: .5rem var(--ds-e4); font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-libelle); line-height: 1.3; cursor: pointer;
  color: #fff; background: transparent; border: 2px solid var(--ds-bord-discret); border-radius: var(--ds-rayon); box-shadow: none;
}
body:not(#ds) #fenetre-infos button:hover { background: var(--ds-carte-fort); }
body:not(#ds) #fenetre-infos button:focus, body:not(#ds) #fenetre-infos button:focus-visible { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
body:not(#ds) #fenetre-infos button#fenetre-infos-suite, body:not(#ds) #fenetre-infos button#fenetre-infos-suite-haut { min-height: 3.5rem; padding: .625rem var(--ds-e6); color: var(--ds-primaire-texte); background: var(--ds-primaire); border: 3px solid var(--ds-primaire-bord); }
body:not(#ds) #fenetre-infos button#fenetre-infos-suite:hover, body:not(#ds) #fenetre-infos button#fenetre-infos-suite-haut:hover { background: #ffc26e; }
body:not(#ds) #fenetre-infos button#fenetre-infos-suite::after, body:not(#ds) #fenetre-infos button#fenetre-infos-suite-haut::after { content: "\2192" / ""; margin-left: .625rem; font-weight: var(--ds-fw-titre); }
body:not(#ds) #fenetre-infos button#fenetre-infos-prec::before { content: "\2190" / ""; margin-right: .625rem; }
body:not(#ds) #fenetre-infos button#fenetre-infos-suiv { background: var(--ds-carte); border-color: var(--ds-bord-carte); }
body:not(#ds) #fenetre-infos button#fenetre-infos-suiv::after { content: "\2192" / ""; margin-left: .625rem; }
body:not(#ds) #fenetre-infos button#fenetre-infos-fermer::before, body:not(#ds) #fenetre-infos button#fenetre-infos-fermer-haut::before { content: "\2715" / ""; margin-right: .625rem; }
@media (max-width: 30rem) { body:not(#ds) #fenetre-infos { top: 0 !important; width: 100vw !important; max-height: 100vh !important; border-radius: 0; border-width: 0 0 2px; padding: var(--ds-e4) !important; } }
/* Boutons de la fenêtre : la barre « Fermer » à droite quand la place le permet. */
body:not(#ds) #fenetre-infos { box-shadow: 0 0 0 100vmax rgba(4,5,12,.72), 0 30px 80px rgba(0,0,0,.85); }

/* ============================================================================================================================
   5. MENUS DU MODE RPG HORS BATAILLE (aventure, mini-aventures, donjons, autel, coffres, boutiques, Premiers pas, sac…) : #rpg-zone
   Deux sortes d'éléments, que tout oppose : les LIGNES (.rpg-ligne : texte, aucune forme de bouton) et les BOUTONS (button.big : carte à bord de 2 px, 3 rem de haut,
   libellé 600). Les boutons sont en grille (jamais plus d'une colonne sur téléphone), 8 px d'écart ; le principal (.ds-btn--primaire) occupe toute la largeur, le retour
   (.ds-btn--secondaire) se place en bas à gauche. Classes posées par js/ds-boutons.js d'après le libellé ; sans elles, tous les boutons sont des choix.
   ============================================================================================================================ */
body:not(#ds):not(#ds):not(#ds):not(.rpg-visuel):not(.rpg-vn) #ecran-rpg { box-sizing: border-box; width: 100%; max-width: 52rem; margin-inline: auto; padding: var(--ds-marge-ecran); color: var(--ds-texte); }
body:not(#ds):not(.rpg-visuel):not(.rpg-vn) #rpg-zone { display: grid; grid-template-columns: minmax(0, 44rem); gap: var(--ds-ecart-cibles) var(--ds-ecart-cibles); grid-auto-rows: min-content; align-content: start; padding: 6px; text-align: left; }
body:not(#ds):not(.rpg-visuel) #rpg-zone > * { min-width: 0; }
/* Les lignes : du TEXTE. Ni bordure ni fond de bouton, 70 caractères, interligne 1,5, 16 px entre paragraphes. */
body:not(#ds):not(.rpg-visuel):not(.rpg-vn) #rpg-zone > .rpg-ligne, body:not(#ds):not(.rpg-visuel):not(.rpg-vn) #rpg-zone .rpg-ligne {
  grid-column: 1 / -1; max-width: min(var(--ds-mesure), 100%); margin: 0 0 var(--ds-e2); padding: var(--ds-e1) var(--ds-e2); font-size: var(--ds-fs-corps); line-height: var(--ds-lh-texte); font-weight: var(--ds-fw-texte);
  color: var(--ds-texte); background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left; overflow-wrap: break-word;
}
body:not(#ds):not(.rpg-visuel) #rpg-zone .rpg-ligne:focus { outline: 3px solid var(--ds-focus-couleur); outline-offset: 3px; border-radius: 6px; }
/* Conseil didactique : un encart (barre latérale), pas un bouton. */
body:not(#ds):not(.rpg-visuel):not(.rpg-vn) #rpg-zone .rpg-ligne.rpg-conseil { padding: var(--ds-e3) var(--ds-e4); color: #ffe9a8; background: rgba(255,255,255,.06); border-left: 6px solid #ffb703; border-radius: 0 var(--ds-rayon) var(--ds-rayon) 0; }
/* Les boutons de choix : cartes uniformes. Le losange doré de vue-pro.css est conservé (marqueur de choix) ; seules la taille, la graisse, le bord et l'écart changent. */
body:not(#ds):not(.rpg-visuel) #rpg-zone > button.big, body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.rpg-item {
  width: 100%; max-width: none; min-height: var(--ds-cible-min); margin: 0; padding: .625rem var(--ds-e4) .625rem 2.4rem; font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-choix); line-height: 1.3; letter-spacing: 0;
  text-align: left; border-width: 2px; border-style: solid; border-color: var(--ds-bord-carte); border-radius: var(--ds-rayon); box-shadow: none; text-transform: none; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word;
}
body:not(#ds):not(.rpg-visuel).vue-pro #rpg-zone > button.big:hover { background-color: var(--ds-carte-fort); border-color: var(--ds-primaire-bord); }
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big:focus, body:not(#ds):not(.rpg-visuel) #rpg-zone button.big:focus-visible { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
/* Sans la présentation « jeu vidéo » (case décochée) : le bouton garde le fond sombre de carte, pas l'orange plein des gros boutons des menus. */
body:not(#ds):not(.rpg-visuel):not(.vue-pro) #rpg-zone > button.big { color: #fff; background: var(--ds-carte); }
/* Libellé-phrase (plus de 64 caractères) : graisse normale, la carte et le losange suffisent à dire que c'est un choix. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--long, body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) button.big.ds-btn--long { font-weight: var(--ds-fw-texte); line-height: var(--ds-lh-texte); padding-top: .75rem; padding-bottom: .75rem; }
/* Principal : fond plein, bordure 3 px, plus haut, flèche ; toute la largeur. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--primaire {
  grid-column: 1 / -1; min-height: 3.5rem; padding: .625rem var(--ds-e6); text-align: center; color: var(--ds-primaire-texte); font-size: var(--ds-fs-titre3);
  background: var(--ds-primaire); background-image: none; border: 3px solid var(--ds-primaire-bord);
}
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--primaire:hover { background: #ffc26e; background-image: none; }
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--primaire::after { content: "\2192" / ""; margin-left: .75rem; font-weight: var(--ds-fw-titre); }
/* Retour / annulation : contour, fond neutre, flèche à gauche, en bas à gauche. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--secondaire {
  grid-column: 1 / -1; justify-self: start; width: auto; min-width: min(12rem, 100%); max-width: 100%; margin-top: var(--ds-e2); padding: .5rem var(--ds-e6); text-align: center; color: var(--ds-texte);
  background: transparent; background-image: none; border: 2px solid var(--ds-bord-discret);
}
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--secondaire::before { content: "\2190" / ""; margin-right: .625rem; }
body:not(#ds):not(.rpg-visuel).vue-pro #rpg-zone > button.big.ds-btn--secondaire:hover { background-color: var(--ds-carte-fort); }
/* Destructif : double bordure rouge et croix, jamais plein. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--destructif { color: #ffe0e0; background-image: none; background-color: #2a1220; border: 4px double #ff8b8b; padding-left: var(--ds-e4); }
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--destructif::before { content: "\2715" / ""; margin-right: .625rem; }
/* Désactivé (aria-disabled, focalisable) : hachures + texte entier lisible (3:1 au moins) ; le libellé dit déjà pourquoi. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[aria-disabled="true"] { opacity: 1; color: #d9d4c4; background-image: var(--ds-hachure); border-style: dashed; border-color: var(--ds-bord-discret); }
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[aria-disabled="true"]::before { opacity: .7; }
/* Les boutons-objets (icône posée par images.css) et les rangées d'actions gardent leur disposition d'origine. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[data-article], body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[data-achat], body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[data-vente], body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[data-conso] { padding-left: var(--ds-e4); }
body:not(#ds):not(.rpg-visuel) #rpg-zone .rpg-colonnes { grid-column: 1 / -1; }
body:not(#ds):not(.rpg-visuel) #rpg-zone input[type="range"].big, body:not(#ds):not(.rpg-visuel) #rpg-zone input.big { grid-column: 1 / -1; min-height: var(--ds-cible-min); }
/* Le titre d'écran (« Mode RPG », « Aventure », « Donjons »…) et la pastille du récit : jamais sous 14 px. */
body:not(#ds) #rpg-titre { font-size: var(--ds-fs-titre1); }
/* Fusion du 23/10/2026 : en présentation de jeu vidéo (plateau, équipe), l'étiquette de mode reste une petite étiquette posée sur l'illustration (jamais un titre de 2 rem). */
body:not(#ds).rpg-visuel #rpg-titre { font-size: var(--ds-fs-petit) !important; font-weight: var(--ds-fw-libelle); line-height: 1.4; letter-spacing: .08em; }
body:not(#ds).rpg-vn #rpg-titre { margin: 0; padding: .15rem .75rem; font-size: var(--ds-fs-puce) !important; font-weight: var(--ds-fw-libelle); line-height: 1.4; letter-spacing: .08em; text-align: left; }

/* Rubrique repliable (Premiers pas) : une ligne entière, repère ▶ / ▼ déjà dans le libellé. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big[aria-expanded] { grid-column: 1 / -1; padding-left: var(--ds-e4); background-image: none; background-color: rgba(255,255,255,.07); border-color: var(--ds-bord-discret); color: var(--ds-titre); font-size: var(--ds-fs-titre3); font-weight: var(--ds-fw-titre); }
/* LECTURE : une ligne de TEXTE qui a le focus (clavier, manette, lecteur d'écran) se montre par une barre de lecture à gauche et un léger fond, JAMAIS par un cadre
   complet (un cadre complet ressemble à un bouton : retour de Valentin). Les boutons gardent leur anneau complet. En couleurs forcées, l'anneau de contour revient. */
body:not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-minijeux, #ecran-pause, #ecran-fin, #accueil) :is(p, div)[tabindex]:focus,
body:not(#ds):not(.rpg-visuel) #rpg-zone .rpg-ligne:focus, body:not(#ds):not(.rpg-visuel) #rpg-zone .rpg-ligne.rpg-conseil:focus {
  outline: 0; box-shadow: inset 6px 0 0 var(--ds-focus-couleur); background-color: rgba(255,255,255,.1); border-radius: 0 8px 8px 0; padding-left: 1rem;
}
@media (forced-colors: active) {
  body:not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-minijeux, #ecran-pause, #ecran-fin, #accueil) :is(p, div)[tabindex]:focus,
  body:not(#ds):not(.rpg-visuel) #rpg-zone .rpg-ligne:focus { outline: 3px solid Highlight; box-shadow: none; }
}
/* La zone des menus défile en interne quand elle est longue : une barre fine et visible (or). */
body:not(#ds):not(.rpg-visuel):not(.rpg-vn) #rpg-zone { scrollbar-width: thin; scrollbar-color: var(--ds-or) rgba(255,255,255,.1); }

/* ============================================================================================================================
   6. RÉCIT FAÇON ROMAN VISUEL (body.rpg-vn) : le texte se lit comme un livre, les choix se voient comme des commandes
   Le panneau de dialogue de vue-pro.css est conservé (fond opaque : le texte ne repose JAMAIS sur l'illustration, contraste mesuré > 15:1). Ici : taille 1,125 à 1,25 rem,
   interligne 1,6, 16 px entre paragraphes, 70 caractères, texte aligné à gauche ; le choix principal (Suite) en orange plein avec flèche, les autres choix en cartes,
   « Menu d'aventure » en contour. Aucun défilement de la page : seule la boîte défile (focus toujours amené à l'écran).
   ============================================================================================================================ */
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone { gap: var(--ds-e4); }
body:not(#ds):not(#ds).rpg-vn #rpg-zone .rpg-ligne { width: 100%; max-width: min(var(--ds-mesure), 100%); margin: 0; padding: var(--ds-e1) var(--ds-e2); text-align: left;
  font-size: clamp(1.125rem, 1.08rem + .25vw, 1.25rem); line-height: 1.6; font-weight: var(--ds-fw-texte); color: var(--ds-texte); overflow-wrap: break-word; }
body:not(#ds):not(#ds).rpg-vn #rpg-zone .rpg-ligne:focus { outline: 0; box-shadow: inset 6px 0 0 var(--ds-focus-couleur); background-color: rgba(255,255,255,.1); border-radius: 0 8px 8px 0; padding-left: 1rem; }
@media (forced-colors: active) { body:not(#ds):not(#ds).rpg-vn #rpg-zone .rpg-ligne:focus { outline: 3px solid Highlight; box-shadow: none; } }
body:not(#ds):not(#ds).rpg-vn #rpg-zone .rpg-ligne.rpg-conseil { padding: var(--ds-e3) var(--ds-e4); background: rgba(255,255,255,.06); border-left: 6px solid #ffb703; border-radius: 0 var(--ds-rayon) var(--ds-rayon) 0; }
/* Les choix du récit : cartes de 3 rem au moins, libellé 600 en 1,125 rem, 8 px d'écart ; le premier choix suit le texte avec un peu d'air. */
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big {
  min-height: var(--ds-cible-min); font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-libelle); line-height: 1.3; border-width: 2px; border-color: var(--ds-bord-carte); border-radius: var(--ds-rayon); box-shadow: none;
}
body:not(#ds):not(#ds).rpg-vn #rpg-zone .rpg-ligne + button.big { margin-top: var(--ds-e2); }
body:not(#ds):not(#ds).rpg-vn #rpg-zone button.big + button.big { margin-top: calc(var(--ds-ecart-cibles) - var(--ds-e4)); }   /* l'écart entre deux boutons est de 8 px (le gap de 16 px est pour le texte) */
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big:focus, body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big:focus-visible { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big.ds-btn--primaire {
  min-height: 3.5rem; justify-content: center; text-align: center; font-size: var(--ds-fs-titre3); color: var(--ds-primaire-texte); background: var(--ds-primaire); background-image: none; border: 3px solid var(--ds-primaire-bord); padding: .625rem var(--ds-e6);
}
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big.ds-btn--primaire:hover { background: #ffc26e; background-image: none; }
body:not(#ds):not(#ds).rpg-vn #rpg-zone button.big.ds-btn--primaire::after { content: "\2192" / ""; margin-left: .75rem; font-weight: var(--ds-fw-titre); }
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big.ds-btn--secondaire { width: auto; min-width: min(12rem, 100%); align-self: flex-start; margin-left: 0; text-align: center; color: var(--ds-texte); background: transparent; background-image: none; border: 2px solid var(--ds-bord-discret); padding: .5rem var(--ds-e6); }
body:not(#ds):not(#ds).rpg-vn #rpg-zone button.big.ds-btn--secondaire::before { content: "\2190" / ""; margin-right: .625rem; }
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big[aria-disabled="true"] { opacity: 1; color: #d9d4c4; background-image: var(--ds-hachure); border-style: dashed; border-color: var(--ds-bord-discret); }
/* L'illustration du récit laisse davantage de place au texte (34 % de la hauteur au lieu de 42 %) ; téléphone et paysage gardent les réglages de vue-pro.css. */
@media (min-height: 20rem) and (min-width: 34.01rem) { body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-visuel { height: clamp(8rem, 34dvh, 28rem); } }
@media (min-height: 20rem) and (max-height: 40rem) and (min-width: 34.01rem) { body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-visuel { height: clamp(6rem, 28dvh, 12rem); } }
body:not(#ds):not(#ds).rpg-vn #rpg-zone { scrollbar-width: thin; scrollbar-color: var(--ds-or) rgba(255,255,255,.1); }
/* Le bouton principal (Suite…) reste visible en bas de la boîte quand le texte est long : on lit, on défile, « Suite » ne disparaît jamais. */
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--primaire { position: sticky; bottom: 4px; z-index: 2; box-shadow: 0 -10px 14px -2px rgba(8,9,18,.95); }
body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--primaire:focus, body:not(#ds):not(.rpg-visuel) #rpg-zone button.big.ds-btn--primaire:focus-visible { box-shadow: 0 0 0 7px var(--ds-focus-halo); }
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big.ds-btn--primaire { box-shadow: 0 -10px 14px -2px rgba(8,9,18,.95); }
body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big.ds-btn--primaire:focus, body:not(#ds):not(#ds).images-actives.vue-pro.rpg-vn #rpg-zone button.big.ds-btn--primaire:focus-visible { box-shadow: 0 0 0 7px var(--ds-focus-halo); }
body:not(#ds):not(#ds).rpg-vn #rpg-zone button.big { max-width: 72ch; align-self: center; }
body:not(#ds):not(#ds).rpg-vn #rpg-zone button.big.ds-btn--secondaire { align-self: center; width: 100%; box-sizing: border-box; margin-inline: 0; max-width: 72ch; text-align: left; justify-content: flex-start; }

/* ============================================================================================================================
   7. MENUS DE BOUTONS DES ÉCRANS HORS RPG : pause du combat, pause des mini-jeux, mini-jeux et tests, fin de combat, modes de combat, banc ABX
   Même langage que les menus du mode RPG : un CHOIX est une carte (fond sombre, bord doré de 2 px, libellé 600, 3 rem de haut) ; le PRINCIPAL est plein, plus haut, avec « → » ;
   le RETOUR ou la sortie est un contour discret avec « ← » ; le DESTRUCTIF a une double bordure rouge et une croix. Aucun gras sur les phrases d'explication (labels, aides).
   Le type est posé par identifiant (rien dans le DOM ne change) ; un bouton nouveau sans type reste un choix.
   ============================================================================================================================ */
body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) button.big {
  display: flex; align-items: center; justify-content: flex-start; width: 100%; max-width: 40rem; min-height: var(--ds-cible-min); margin: 0 0 var(--ds-ecart-cibles); padding: .625rem var(--ds-e4);
  font-size: var(--ds-fs-corps); font-weight: var(--ds-fw-choix); line-height: 1.3; letter-spacing: 0; text-align: left; text-transform: none; overflow-wrap: anywhere;
  color: #fff; background-color: var(--ds-carte); background-image: none; border: 2px solid var(--ds-bord-carte); border-radius: var(--ds-rayon); box-shadow: none;
}
body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) button.big:hover { background-color: var(--ds-carte-fort); border-color: var(--ds-primaire-bord); }
body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) button.big:focus,
body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) button.big:focus-visible { outline: 4px solid var(--ds-focus-couleur); outline-offset: 2px; box-shadow: 0 0 0 7px var(--ds-focus-halo); }
/* Principal : la suite de l'écran (reprendre, rejouer, commencer). */
body:not(#ds):not(#ds) :is(#pause-reprendre-btn, #pause-mj-reprendre-btn, #fin-rejouer-btn, #banc-abx-start-btn).big {
  max-width: 100%; min-height: 3.5rem; justify-content: center; text-align: center; font-size: var(--ds-fs-titre3); margin-bottom: var(--ds-e4);
  color: var(--ds-primaire-texte); background-color: var(--ds-primaire); border: 3px solid var(--ds-primaire-bord);
}
body:not(#ds):not(#ds) :is(#pause-reprendre-btn, #pause-mj-reprendre-btn, #fin-rejouer-btn, #banc-abx-start-btn).big:hover { background-color: #ffc26e; }
body:not(#ds):not(#ds) :is(#pause-reprendre-btn, #pause-mj-reprendre-btn, #fin-rejouer-btn, #banc-abx-start-btn).big::after { content: "\2192" / ""; margin-left: .75rem; font-weight: var(--ds-fw-titre); }
/* Sortie : contour discret, flèche à gauche, séparée des choix. */
body:not(#ds):not(#ds) :is(#pause-quitter-btn, #pause-mj-quitter-btn, #fin-quitter-btn, #pause-autre-mj-btn, #pause-mj-autre-mj-btn, #fin-autre-mj-btn, #mj-retour-btn, #versus-retour-btn, #cl-retour-btn, #banc-abx-retour-btn).big {
  width: auto; min-width: min(12rem, 100%); max-width: 100%; justify-content: center; text-align: center; color: var(--ds-texte); background-color: transparent; border-color: var(--ds-bord-discret);
}
body:not(#ds):not(#ds) :is(#pause-quitter-btn, #pause-mj-quitter-btn, #fin-quitter-btn, #mj-retour-btn, #versus-retour-btn, #cl-retour-btn, #banc-abx-retour-btn).big::before { content: "\2190" / ""; margin-right: .625rem; }
body:not(#ds):not(#ds) :is(#pause-quitter-btn, #pause-mj-quitter-btn, #fin-quitter-btn, #mj-retour-btn, #versus-retour-btn, #cl-retour-btn, #banc-abx-retour-btn).big { margin-top: var(--ds-e4); }
/* Destructif : double bordure rouge, croix. */
body:not(#ds):not(#ds) #banc-abx-effacer-btn.big { color: #ffe0e0; background-color: #2a1220; border: 4px double #ff8b8b; }
body:not(#ds):not(#ds) #banc-abx-effacer-btn.big::before { content: "\2715" / ""; margin-right: .625rem; }
/* Désactivé. */
body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) button.big[aria-disabled="true"] { opacity: 1; color: #d9d4c4; background-image: var(--ds-hachure); border-style: dashed; border-color: var(--ds-bord-discret); }
/* Les phrases qui accompagnent un réglage (valeur, volume) : du texte à 1,125 rem et 400, sur 40 rem ; le titre de l'écran garde son rang par la taille. */
body:not(#ds) :is(#ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx) :is(p, label.opt) { font-weight: var(--ds-fw-texte); }
body:not(#ds) :is(#ecran-pause, #ecran-minijeux) label.opt { max-width: 40rem; }

/* ============================================================================================================================
   8. TEXTE TRÈS GRAND (option d'affichage, jusqu'à 200 %) ET ÉCRANS ÉTROITS (320 px) : aucun défilement horizontal (WCAG 1.4.10)
   Tout mot long se coupe plutôt que de déborder ; les blocs de texte ne dépassent jamais leur conteneur.
   ============================================================================================================================ */
body:not(#ds) :is(#accueil, #menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire, #ecran-pause, #ecran-pause-mj, #ecran-minijeux, #ecran-fin, #ecran-versus, #ecran-combat, #ecran-banc-abx, #fenetre-infos) :is(p, li, label, summary, legend, h2, h3, dd, dt, span, div) { overflow-wrap: anywhere; min-width: 0; }
body:not(#ds):not(.rpg-visuel) #rpg-zone :is(p, li, label, button, div, span) { overflow-wrap: anywhere; min-width: 0; }
/* Boutons à large marge latérale (principal, retour) : la marge se réduit avec l'écran, sinon « Menu d'aventure » à 200 % déborde à 320 px. */
body:not(#ds):not(#ds):not(#ds) #rpg-zone button.big:is(.ds-btn--primaire, .ds-btn--secondaire) { padding-inline: clamp(.75rem, 4vw, 2rem); min-width: 0; box-sizing: border-box; }
/* Seuls le bouton PRINCIPAL et le DESTRUCTIF gardent le libellé 600 (un par écran au plus) ; les cartes de choix et les retours (contour + flèche « ← ») sont en graisse normale : la forme dit « bouton », pas le gras. */
body:not(#ds):not(#ds):not(#ds) #rpg-zone button.big:is(.ds-btn--primaire, .ds-btn--destructif),
body:not(#ds):not(#ds) :is(#pause-reprendre-btn, #pause-mj-reprendre-btn, #fin-rejouer-btn, #banc-abx-start-btn, #banc-abx-effacer-btn).big { font-weight: var(--ds-fw-libelle); }
/* Glossaire : une phrase par bouton (écouter l'explication), graisse normale ; ▶ et la carte disent « bouton ». */
body:not(#ds):not(#ds) :is(#menu, #ecran-caracteristiques, #ecran-glossaire) button.glossary-snd { font-weight: var(--ds-fw-choix); }
/* La consigne d'écran (encart à repère « i ») garde sa marge gauche quand elle a le focus : la barre de lecture s'ajoute à la barre d'information sans recouvrir le repère. */
body:not(#ds):not(#ds) :is(#ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire) > h2.sub + p:focus { padding-left: 3.25rem; box-shadow: inset 6px 0 0 var(--ds-focus-couleur), inset 0 0 0 100vmax rgba(255,255,255,.04); }
/* Gros boutons des écrans de réglage (Sauvegarder, Rétablir…) : jamais plus larges que leur écran, marge latérale réduite avec l'écran. */
body:not(#ds):not(#ds) :is(#menu, #ecran-commandes, #ecran-regles, #ecran-caracteristiques, #ecran-glossaire) button.big { max-width: 100%; box-sizing: border-box; padding-inline: min(1.5rem, 4vw); overflow-wrap: anywhere; }