/* Coque de production des ecrans ouverts depuis la carte.
   Cette feuille arrive en dernier : elle ne change ni les donnees ni les
   ecrans qui peignent le contenu, elle garantit seulement leur cadre de
   lecture, leurs onglets et leurs zones de defilement. */

html[data-vue="jeu"] .page {
  box-sizing: border-box;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

/* Les dialogues modaux doivent rester des surfaces lisibles, même lorsqu'un
   texte d'absence, une cérémonie ou un formulaire grandit sur un téléphone.
   Sans cette coque, le navigateur pouvait laisser le bas hors écran et le
   joueur ne trouvait aucun geste évident pour atteindre l'action finale. */
html[data-vue="jeu"] dialog {
  box-sizing: border-box;
  margin: auto;
  width: min(56rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--ombre-3), 0 0 0 1px color-mix(in srgb, var(--or-vif) 8%, transparent);
}

html[data-vue="jeu"] dialog::backdrop {
  background: color-mix(in srgb, var(--pierre-0) 74%, transparent);
  backdrop-filter: blur(3px) saturate(.9);
  -webkit-backdrop-filter: blur(3px) saturate(.9);
}

/* Les titres de panneaux doivent pouvoir respirer : aucun ornement ou
   libellé long ne doit rogner le début du nom du lieu. */
html[data-vue="jeu"] .feuillet__titre,
html[data-vue="jeu"] dialog .dialogue__titre {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Une action de fin reste disponible pendant la lecture d'une fenêtre longue.
   Le dégradé rend sa séparation lisible sans masquer le contenu. */
html[data-vue="jeu"] dialog .absence__actions,
html[data-vue="jeu"] dialog .fondation__apercu > #fonder-valider {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pierre-1) 96%, transparent) 34%);
  padding-top: var(--e-5);
}

html[data-vue="jeu"] dialog .absence__actions {
  margin-top: var(--e-1);
  border-top: 1px solid color-mix(in srgb, var(--or) 24%, transparent);
}

/* Sans ligne de chronique sous le bilan, sa bordure doublait celle des actions (16/10/2026). */
html[data-vue="jeu"] dialog.absence:not(:has(.absence__lignes:not([hidden]), .absence__rien:not([hidden]), .absence__reste:not([hidden]))) .absence__bilan {
  border-bottom: 0;
}

html[data-vue="jeu"] dialog .absence__actions > button {
  min-height: 48px;
}

html[data-vue="jeu"] dialog .fondation__apercu > #fonder-valider {
  width: min(100%, 18rem);
  min-height: 52px;
  margin-top: var(--e-1);
  padding-inline: var(--e-4);
}

html[data-vue="jeu"] dialog .dialogue__fermer {
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
}

html[data-vue="jeu"] dialog .dialogue__fermer:hover,
html[data-vue="jeu"] dialog .dialogue__fermer:focus-visible {
  border-color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--or-fonce) 96%, transparent), color-mix(in srgb, var(--bois-sombre) 98%, transparent));
  color: var(--parchemin-clair);
  transform: translateY(-1px);
}

@media (max-width: 42rem) {
  html[data-vue="jeu"] dialog {
    width: min(100% - 1rem, 34rem);
    max-width: none;
    margin: var(--e-2);
    max-height: calc(100dvh - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* Socle commun de lisibilite pour les ecrans de gestion. */
html[data-vue="jeu"] .page :is(p, li, label, dt, dd) {
  line-height: 1.45;
}

html[data-vue="jeu"] .page :is(input, select, textarea) {
  min-height: 2.8rem;
  min-width: 0;
  padding: var(--e-2) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 40%, transparent);
  border-radius: var(--rayon-case);
  background: color-mix(in srgb, var(--pierre-0) 72%, transparent);
  color: var(--parchemin-clair);
  font: inherit;
}

/* Les listes déroulantes. Safari, seul moteur permis sur iPhone, peint une liste à l'apparence native en blanc sous le
   texte clair du jeu : illisible (Réglages sous WebKit, 06/10/2026). Sans apparence native, chaque moteur garde le fond
   que l'écran lui donne ; la flèche, dessinée, passe avant les fonds propres des écrans, d'où les !important. */
html[data-vue="jeu"] select:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d3ad5c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: .75rem auto !important;
  padding-right: 2.25rem !important;
}

html[data-vue="jeu"] .page :is(input, select, textarea):focus-visible {
  border-color: var(--or-vif);
  outline: 2px solid color-mix(in srgb, var(--or-vif) 30%, transparent);
  outline-offset: 2px;
  box-shadow: var(--ombre-1);
}

html[data-vue="jeu"] .page :is(button, summary, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--or-vif) 78%, transparent);
  outline-offset: 2px;
}

html[data-vue="jeu"] .page .couche__stub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 2.8rem;
  margin: var(--e-1) 0 var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px dashed color-mix(in srgb, var(--or-sourd) 50%, transparent);
  border-radius: var(--rayon-case);
  background: color-mix(in srgb, var(--bois) 28%, transparent);
  color: var(--or-vif);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

html[data-vue="jeu"] .page .couche__stub::after {
  content: "›";
  margin-left: auto;
  font-size: var(--t-6);
}

html[data-vue="jeu"] .page :is(.action__aide, .gestion-aide, .refus)[hidden] {
  display: none;
}

html[data-vue="jeu"] .page :is(.action__aide, .gestion-aide) {
  margin: var(--e-2) 0;
  padding: var(--e-3) var(--e-3);
  border-left: 3px solid color-mix(in srgb, var(--or-sourd) 75%, transparent);
  border-radius: 0 .3rem .3rem 0;
  background: color-mix(in srgb, var(--bois) 25%, transparent);
  color: var(--parchemin);
}

html[data-vue="jeu"] .page .refus {
  padding: var(--e-3) var(--e-3);
  border-left: 3px solid var(--perte);
  border-radius: 0 .3rem .3rem 0;
  background: color-mix(in srgb, var(--peril) 24%, transparent);
  color: var(--texte);
}

html[data-vue="jeu"] .page :is(section, article, aside, fieldset).couche--repliee {
  border-color: color-mix(in srgb, var(--or-sourd) 20%, transparent);
}

/* La barre du bas est une navigation, pas un fondu de decor. L'ancien masque
   la rendait presque invisible sur les zones claires de la carte. */
html[data-vue="jeu"] #jeu .barre {
  z-index: 60;
  padding-top: var(--e-1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-3) 96%, transparent), color-mix(in srgb, var(--pierre-2) 99%, transparent) 42%, var(--pierre-2) 100%) !important;
  border-top: 1px solid color-mix(in srgb, var(--or-vif) 62%, transparent) !important;
  box-shadow: 0 -1rem 2rem color-mix(in srgb, var(--pierre-0) 42%, transparent), inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 8%, transparent) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  backdrop-filter: blur(10px) saturate(1.18);
  -webkit-backdrop-filter: blur(10px) saturate(1.18);
}

html[data-vue="jeu"] #jeu .barre__entree {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir-clair) 90%, transparent), color-mix(in srgb, var(--pierre-4) 96%, transparent));
  border: 1px solid color-mix(in srgb, var(--or) 38%, transparent);
  border-top-color: color-mix(in srgb, var(--or) 38%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 10%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] #jeu .barre__entree.est-actif {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--or-fonce), var(--bois) 72%, var(--bois));
  border-color: var(--or-vif);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 45%, transparent), 0 0 0 2px color-mix(in srgb, var(--or-vif) 22%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] #jeu .barre__entree:hover,
html[data-vue="jeu"] #jeu .barre__entree:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, var(--or-fonce), var(--cuir-clair));
  border-color: var(--or-vif);
}

html[data-vue="jeu"] #jeu .barre__icone,
html[data-vue="jeu"] #jeu img.barre__icone {
  opacity: 1;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--pierre-0) 65%, transparent));
}

html[data-vue="jeu"] #jeu .barre__mot {
  color: inherit;
  text-shadow: var(--ombre-texte);
}

/* Les volets de contexte restent des commandes de premier niveau sur la
   carte. Leur hauteur effective pouvait descendre à 43 px avec les bordures
   et le box-model du thème : on leur réserve une prise au doigt confortable. */
html[data-vue="jeu"] #jeu .volet__poignee {
  min-height: 52px;
  height: 52px;
  box-sizing: border-box;
}

/* Certains ecrans thematiques redonnaient position:relative a leur panneau.
   Il sortait alors du cadre de la coque, passait sous le bandeau et pouvait
   devenir plus haut que la fenetre. */
html[data-vue="jeu"] .page {
  position: fixed;
  inset: calc(var(--marge-haut) + var(--barre-haut) + .3rem) 0
    calc(var(--marge-bas) + var(--barre-bas)) 0;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-padding-top: 8rem;
  scroll-padding-bottom: 4.5rem;
  -webkit-overflow-scrolling: touch;
}

/* Le theme du domaine declare #siege.page en relatif ; cette regle plus
   precise garde le panneau dans la fenetre de jeu. */
html[data-vue="jeu"] #siege.page {
  position: fixed;
  inset: calc(var(--marge-haut) + var(--barre-haut) + .3rem) 0
    calc(var(--marge-bas) + var(--barre-bas)) 0;
  box-sizing: border-box;
}

html[data-vue="jeu"] .page > * {
  box-sizing: border-box;
  width: min(100%, 104rem);
  margin-inline: auto;
}

/* En-tete et onglets restent disponibles pendant la lecture d'une page. */
html[data-vue="jeu"] .page > .dialogue__entete,
html[data-vue="jeu"] #siege.page > .dialogue__entete {
  flex: 0 0 auto;
  position: sticky;
  top: -.9rem;
  z-index: 12;
  margin-top: calc(-1 * var(--e-4));
  padding-top: var(--e-4);
  padding-bottom: var(--e-3);
  background: linear-gradient(180deg, var(--pierre-2) 76%, transparent);
}

html[data-vue="jeu"] .page > .onglets-page {
  flex: 0 0 auto;
  position: sticky;
  top: 4.05rem;
  z-index: 11;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--e-2);
  width: 100%;
  min-height: 4.05rem;
  box-sizing: border-box;
  align-items: center;
  margin: 0 auto var(--e-4);
  padding: var(--e-2) var(--e-0) var(--e-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: .5rem;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  background: linear-gradient(180deg, var(--pierre-2) 82%, transparent);
}

/* La Demeure et les écrans sans en-tête commencent directement par leurs
   onglets. Ils ne doivent pas recevoir le décalage réservé à un titre sticky
   qui n'existe pas : sinon la barre flotte sur le premier panneau. */
html[data-vue="jeu"] .page:not(:has(> .dialogue__entete)) > .onglets-page {
  top: 0;
}

/* La forge possède un habillage de planche spécifique qui redéfinissait le
   header en `relative` et le faisait remonter sous le HUD. On garde sa forme
   gravée, mais on lui rend le même ancrage sûr que les autres écrans. */
html[data-vue="jeu"] #forge.page > .dialogue__entete {
  position: sticky;
  top: 0;
  margin-top: 0;
  padding-top: var(--e-4);
}

html[data-vue="jeu"] #forge.page > .dialogue__entete .dialogue__fermer {
  position: absolute;
  top: 50%;
  right: 1rem;
  min-width: 9rem;
  min-height: 44px;
  transform: translateY(-50%);
  z-index: 2;
}

html[data-vue="jeu"] #forge.page > .dialogue__entete .dialogue__fermer:hover,
html[data-vue="jeu"] #forge.page > .dialogue__entete .dialogue__fermer:focus-visible {
  transform: translateY(calc(-50% - 1px));
}

@media (max-width: 42rem) {
  html[data-vue="jeu"] #forge.page > .dialogue__entete {
    padding-inline: 3.8rem;
  }

  html[data-vue="jeu"] #forge.page > .dialogue__entete .dialogue__fermer {
    right: .7rem;
    min-width: 44px;
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  html[data-vue="jeu"] #forge.page > .dialogue__entete .dialogue__fermer::after {
    content: '↩';
    font-size: var(--t-5);
    line-height: 1;
  }
}

html[data-vue="jeu"] .page > .onglets-page__entree {
  flex: 0 0 auto;
  min-width: 9.5rem;
  min-height: 3rem;
  padding: var(--e-2) var(--e-4);
  scroll-snap-align: start;
  white-space: nowrap;
}

html[data-vue="jeu"] .page > .onglets-page .onglets-page__entree {
  border: 1px solid color-mix(in srgb, var(--or-sourd) 35%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 92%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  color: var(--texte);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 8%, transparent), var(--ombre-2);
  cursor: pointer;
  font: inherit;
  letter-spacing: .045em;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

html[data-vue="jeu"] .page > .onglets-page .onglets-page__entree:hover,
html[data-vue="jeu"] .page > .onglets-page .onglets-page__entree:focus-visible {
  border-color: var(--or-vif);
  color: var(--parchemin-clair);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 95%, transparent), color-mix(in srgb, var(--bois-sombre) 98%, transparent));
  outline: 2px solid color-mix(in srgb, var(--or-vif) 34%, transparent);
  outline-offset: 2px;
  transform: translateY(-1px);
}

html[data-vue="jeu"] .page > .onglets-page .onglets-page__entree.est-actif,
html[data-vue="jeu"] .page > .onglets-page .onglets-page__entree[aria-selected="true"] {
  border-color: var(--or-vif);
  color: var(--bois-sombre);
  background: linear-gradient(180deg, var(--or), var(--or-fonce));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 45%, transparent), var(--ombre-2);
}

/* Le domaine : une colonne de contexte, une vue, puis les commandes. */
html[data-vue="jeu"] #siege.page .siege-hero {
  align-items: start;
  grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.8fr);
  gap: var(--e-4);
  margin-bottom: var(--e-4);
}

html[data-vue="jeu"] #siege.page .siege-hero__vue {
  align-self: start;
  min-height: 0;
  height: fit-content;
  max-height: none;
  overflow: hidden;
}

html[data-vue="jeu"] #siege.page #siege-3d {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 18rem;
  background:
    radial-gradient(80% 80% at 50% 35%, color-mix(in srgb, var(--bois) 20%, transparent), transparent 58%),
    linear-gradient(145deg, var(--pierre-4) 0%, var(--pierre-1) 58%, var(--pierre-0) 100%);
}

html[data-vue="jeu"] #siege.page #siege-3d .visite__toile {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 18rem;
}

html[data-vue="jeu"] #siege.page .siege-illustration img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

html[data-vue="jeu"] #siege.page .siege-hero__etat,
html[data-vue="jeu"] #siege.page .siege-gestion,
html[data-vue="jeu"] #siege.page .gestion-aside,
html[data-vue="jeu"] #siege.page .gestion-batiments {
  min-width: 0;
}

html[data-vue="jeu"] #siege.page .siege-hero__etat {
  align-self: start;
  min-height: 0;
}

html[data-vue="jeu"] #siege.page .bourg__liste {
  max-height: min(18rem, 34vh);
  min-height: 8rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

html[data-vue="jeu"] #siege.page .siege-gestion {
  align-items: start;
  gap: var(--e-4);
}

html[data-vue="jeu"] #siege.page .gestion-aside {
  display: grid;
  align-content: start;
  gap: var(--e-4);
}

html[data-vue="jeu"] #siege.page .economie-locale__actions {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  align-items: stretch;
}

html[data-vue="jeu"] #siege.page .economie-locale__actions button,
html[data-vue="jeu"] #siege.page .vente button,
html[data-vue="jeu"] #siege.page .batir {
  min-width: 0;
  min-height: 2.9rem;
  overflow-wrap: anywhere;
}

/* Tous les sommaires de lieux ont des cibles confortables et du texte qui
   peut revenir a la ligne au lieu de pousser le panneau hors de l'ecran. */
html[data-vue="jeu"] .sommaire {
  display: grid;
  gap: var(--e-2);
}

html[data-vue="jeu"] .sommaire__lien {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--e-3) var(--e-3);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[data-vue="jeu"] .sommaire__titre { min-width: 0; }
html[data-vue="jeu"] .sommaire__note { margin-left: auto; white-space: normal; text-align: right; }

html[data-vue="jeu"] .feuillet__corps,
html[data-vue="jeu"] .tiroir__feuille {
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  scroll-padding-block: 1rem;
  -webkit-overflow-scrolling: touch;
}

/* Fiche de ville : le panneau doit ressembler a une decision de jeu, pas a
   une colonne de texte posee sur la carte. */
html[data-vue="jeu"] .feuillet {
  box-sizing: border-box;
  background:
    radial-gradient(120% 45% at 50% 0%, color-mix(in srgb, var(--or-sourd) 12%, transparent), transparent 62%),
    linear-gradient(180deg, var(--pierre-3) 0%, var(--pierre-1) 74%);
  border-color: color-mix(in srgb, var(--or) 50%, transparent);
}

html[data-vue="jeu"] .feuillet__entete {
  min-height: 3.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
}

html[data-vue="jeu"] .feuillet__titre {
  max-width: 21ch;
  min-width: 0;
  clip-path: none;
  overflow: hidden;
  color: var(--parchemin);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-vue="jeu"] #carte-region {
  min-width: 0;
  color: var(--parchemin);
}

html[data-vue="jeu"] #carte-region > p:first-child {
  margin: var(--e-1) 0 var(--e-3);
  color: var(--parchemin);
  font: var(--t-5)/1.3 var(--police-titre);
}

html[data-vue="jeu"] #carte-region .carte-region__dit,
html[data-vue="jeu"] #carte-region .carte-region__maison {
  margin: var(--e-2) 0;
  color: var(--texte);
  line-height: 1.45;
}

html[data-vue="jeu"] #carte-region .carte-region__sous-titre {
  margin: var(--e-4) 0 var(--e-2);
  padding-bottom: var(--e-1);
  border-bottom: 1px solid color-mix(in srgb, var(--or-sourd) 35%, transparent);
  color: var(--or-vif);
  font: var(--t-3)/1.2 var(--police-titre);
  letter-spacing: .1em;
  text-transform: uppercase;
}

html[data-vue="jeu"] #carte-region .carte-region__siege {
  margin: var(--e-3) 0;
  padding: var(--e-3) var(--e-3);
  border-left: 3px solid var(--perte);
  background: color-mix(in srgb, var(--peril) 20%, transparent);
  color: var(--parchemin);
  line-height: 1.4;
}

html[data-vue="jeu"] #carte-region .carte-region__actions,
html[data-vue="jeu"] #carte-region .feuillet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-3) 0;
}

html[data-vue="jeu"] #carte-region .carte-region__actions > *,
html[data-vue="jeu"] #carte-region .feuillet__actions > * {
  flex: 1 1 12rem;
}

html[data-vue="jeu"] #carte-region button:disabled,
html[data-vue="jeu"] .sommaire__lien:disabled {
  cursor: not-allowed;
  filter: grayscale(.25);
  opacity: .55;
}

html[data-vue="jeu"] #carte-region .carte-region__lignes {
  display: grid;
  gap: var(--e-1);
  margin: var(--e-2) 0 var(--e-3);
  padding: 0;
  list-style: none;
}

html[data-vue="jeu"] #carte-region .carte-region__lignes li {
  padding: var(--e-2) var(--e-3);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 22%, transparent);
  border-radius: var(--rayon-case);
  background: color-mix(in srgb, var(--pierre-0) 48%, transparent);
  color: var(--texte);
  line-height: 1.35;
}

html[data-vue="jeu"] #carte-region .carte-region__lignes li strong,
html[data-vue="jeu"] #carte-region strong {
  color: var(--or-vif);
}

html[data-vue="jeu"] .feuillet__actions {
  align-items: stretch;
}

html[data-vue="jeu"] .feuillet__actions > button,
html[data-vue="jeu"] #carte-region > button {
  min-height: 2.9rem;
  padding-inline: var(--e-4);
}

html[data-vue="jeu"] .feuillet__corps::-webkit-scrollbar,
html[data-vue="jeu"] .tiroir__feuille::-webkit-scrollbar,
html[data-vue="jeu"] #siege.page::-webkit-scrollbar,
html[data-vue="jeu"] .page::-webkit-scrollbar {
  width: .65rem;
  height: .65rem;
}

html[data-vue="jeu"] .feuillet__corps::-webkit-scrollbar-thumb,
html[data-vue="jeu"] .tiroir__feuille::-webkit-scrollbar-thumb,
html[data-vue="jeu"] #siege.page::-webkit-scrollbar-thumb,
html[data-vue="jeu"] .page::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--or-sourd) 55%, transparent);
  background-clip: padding-box;
}

@media (min-width: 46rem) {
  html[data-vue="jeu"] .feuillet {
    width: min(30rem, 36vw);
  }

  html[data-vue="jeu"] .feuillet__entete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    position: sticky;
    top: 0;
    z-index: 3;
    align-items: center;
    padding-inline: var(--e-3);
    background: linear-gradient(180deg, var(--pierre-3) 82%, transparent);
  }

  html[data-vue="jeu"] .feuillet__titre {
    grid-column: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: visible;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }

  html[data-vue="jeu"] .feuillet__fermer {
    grid-column: 2;
    grid-row: 1;
  }

  html[data-vue="jeu"] .feuillet__corps {
    min-height: 0;
  }
}

@media (max-width: 60rem) {
  html[data-vue="jeu"] .page {
    padding-inline: max(.75rem, var(--gouttiere));
    scroll-padding-top: 7rem;
    scroll-padding-bottom: 5rem;
  }

  html[data-vue="jeu"] .page > .dialogue__entete {
    top: -.75rem;
    margin-top: calc(-1 * var(--e-3));
    padding-top: var(--e-4);
  }

  html[data-vue="jeu"] .page > .onglets-page {
    top: 3.65rem;
  }

  html[data-vue="jeu"] #siege.page .siege-hero,
  html[data-vue="jeu"] #siege.page .siege-gestion {
    grid-template-columns: 1fr;
  }

  html[data-vue="jeu"] #siege.page .siege-hero__vue {
    position: relative;
    top: auto;
  }

  html[data-vue="jeu"] #siege.page .bourg__liste {
    max-height: 16rem;
  }

  html[data-vue="jeu"] .sommaire__note {
    display: none;
  }

  html[data-vue="jeu"] .feuillet__entete {
    align-items: flex-start;
    gap: var(--e-2);
    padding-inline: var(--e-3);
  }

  html[data-vue="jeu"] .feuillet__titre {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: visible;
    clip-path: none;
    padding: var(--e-2) var(--e-2);
    background: linear-gradient(180deg, color-mix(in srgb, var(--parchemin-clair) 42%, transparent), color-mix(in srgb, var(--parchemin-clair) 16%, transparent));
    border-top: 1px solid color-mix(in srgb, var(--or-fonce) 42%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--or-fonce) 42%, transparent);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  html[data-vue="jeu"] .feuillet .feuillet__titre::before,
  html[data-vue="jeu"] .feuillet .feuillet__titre::after {
    display: none;
  }

  html[data-vue="jeu"] .feuillet__fermer {
    flex: 0 0 44px;
  }
}

/* Paysage compact : le haut des pages suit le bandeau mesuré (fin de feuille,
   « Le cadre des écrans »), qu'il tienne sur une rangée ou deux. */
@media (max-height: 30rem) and (pointer: coarse) {
  html[data-vue="jeu"] .page,
  html[data-vue="jeu"] #siege.page {
    scroll-padding-top: 1rem;
  }
}

/* Actes : auto-fill reservait des colonnes vides quand la liste contenait peu
   de gestes. auto-fit donne aux cartes existantes toute la largeur utile et
   preserve une colonne lisible quand de nouveaux actes apparaissent. */
html[data-vue="jeu"] .page .actes {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--e-4);
}

html[data-vue="jeu"] .page .acte {
  min-width: 0;
  min-height: 10rem;
  padding: var(--e-4);
}

/* Navigation principale : sur un paysage compact, ses libelles ne doivent
   pas se reduire a des annotations. Les cinq entrees restent dans la meme
   barre, mais gagnent juste assez de poids pour etre identifiables au premier
   regard et au toucher. */
@media (max-width: 60rem) and (min-height: 30.0625rem) {
  html[data-vue="jeu"] #jeu .barre__icone {
    width: 2rem;
    height: 2rem;
  }

  html[data-vue="jeu"] #jeu .barre__mot {
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: .06em;
  }
}

@media (max-height: 30rem) and (pointer: coarse) {
  html[data-vue="jeu"] #jeu .barre__icone {
    width: 1.8rem;
    height: 1.8rem;
  }

  html[data-vue="jeu"] #jeu .barre__mot {
    font-size: var(--t-1);
    font-weight: 600;
    letter-spacing: .05em;
  }
}

@media (max-height: 42rem) {
  html[data-vue="jeu"] .page > .dialogue__entete {
    padding-top: var(--e-3);
    padding-bottom: var(--e-2);
  }

  html[data-vue="jeu"] .page > .onglets-page {
    min-height: 3.3rem;
    padding-top: var(--e-1);
    padding-bottom: var(--e-2);
  }

  html[data-vue="jeu"] .page > .onglets-page .onglets-page__entree {
    min-height: 2.6rem;
  }

  html[data-vue="jeu"] .feuillet__entete {
    min-height: 3rem;
  }
}

@media (max-width: 30rem) {
  html[data-vue="jeu"] .page > .onglets-page__entree {
    min-width: 8rem;
    padding-inline: var(--e-3);
  }
}

/* Finition commune : chaque écran doit avoir un titre lisible, une action de
   retour évidente et des commandes qui ressemblent à des commandes de jeu. */
html[data-vue="jeu"] .page > .dialogue__entete {
  gap: var(--e-2) var(--e-4);
  align-items: center;
}

html[data-vue="jeu"] .page > .dialogue__entete .dialogue__titre {
  margin: 0;
  color: var(--parchemin);
  font-size: clamp(1.35rem, 1.15rem + .55vw, 2rem);
  line-height: 1.12;
  letter-spacing: .055em;
  text-wrap: balance;
}

html[data-vue="jeu"] .page > .dialogue__entete .dialogue__note {
  max-width: 68ch;
  margin: 0;
  color: var(--texte);
  line-height: 1.4;
}
/* Une note vide ne laisse pas son filet seul après le titre : « Tes hommes | »
   sur ordinateur, relevé le 22/09/2026. */
html[data-vue="jeu"] .page > .dialogue__entete .dialogue__note:empty {
  display: none;
}

html[data-vue="jeu"] .page > .dialogue__entete .dialogue__fermer {
  min-height: 2.8rem;
  min-width: 8.5rem;
  margin-inline-start: auto;
  padding-inline: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--or-vif) 52%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 90%, transparent), color-mix(in srgb, var(--pierre-3) 96%, transparent));
  color: var(--or-vif);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 12%, transparent), var(--ombre-2);
  cursor: pointer;
  font: inherit;
}

html[data-vue="jeu"] .page > .dialogue__entete .dialogue__fermer:hover,
html[data-vue="jeu"] .page > .dialogue__entete .dialogue__fermer:focus-visible {
  border-color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--or-fonce) 96%, transparent), color-mix(in srgb, var(--bois-sombre) 98%, transparent));
  color: var(--parchemin-clair);
  transform: translateY(-1px);
}

html[data-vue="jeu"] .page :is(button, .bouton, [role="button"]) {
  transition: background .16s ease, border-color .16s ease, color .16s ease,
    box-shadow .16s ease, transform .16s ease;
}

/* Une action reseau en cours doit se lire comme un etat, pas comme un bouton
   qui aurait cesse de repondre. Le texte reste intact et le contraste demeure
   suffisant pendant l'attente. */
html[data-vue="jeu"] .page [aria-busy="true"] {
  position: relative;
  cursor: progress;
  opacity: .72;
  filter: saturate(.7);
  padding-inline-end: var(--e-6);
}

html[data-vue="jeu"] .page button[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .7rem;
  width: .8rem;
  height: .8rem;
  margin-top: calc(-1 * var(--e-2));
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--rayon-rond);
  animation: ui-action-tourne .7s linear infinite;
}

@keyframes ui-action-tourne {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-vue="jeu"] .page button[aria-busy="true"]::after {
    animation: none;
    border-top-color: currentColor;
    opacity: .7;
  }
}

/* La prise reste réellement tactile après la mise à l'échelle du cadre sur
   les écrans larges. Une hauteur CSS de 48 px tombait à 43 px mesurés sur
   certains rapports ; on garde 48 px utiles, sans agrandir le contenu du
   volet quand il est replié. */
@media (max-width: 60rem) {
  html[data-vue="jeu"] #jeu .volet__poignee {
    min-height: 48px;
    height: 48px;
  }
}

/* Un contrôle doit annoncer trois états distincts : repos, survol/focus,
   puis pression. Ce retour tactile est volontairement court et reste neutre
   pour les joueurs qui réduisent les animations. */
html[data-vue="jeu"] #jeu :is(button, a, select, input, textarea, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--or-vif);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--or-vif) 20%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] #jeu :is(button, [role="button"], [role="tab"]):active:not(:disabled) {
  transform: translateY(1px) scale(.99);
  filter: brightness(1.08);
}

html[data-vue="jeu"] #jeu :is(button, [role="button"], [role="tab"])[aria-busy="true"] {
  cursor: progress;
  filter: saturate(.75) brightness(1.04);
}

@media (prefers-reduced-motion: reduce) {
  html[data-vue="jeu"] #jeu :is(button, [role="button"], [role="tab"]):active:not(:disabled) {
    transform: none;
  }
}

/* Les sous-menus repliables sont des panneaux de décision : leur en-tête
   doit rester lisible avant comme après ouverture, et le contenu ne doit pas
   donner l'impression de sortir d'une carte différente. */
html[data-vue="jeu"] .page details {
  border: 1px solid color-mix(in srgb, var(--or) 28%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 82%, transparent), color-mix(in srgb, var(--pierre-0) 72%, transparent));
  overflow: clip;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 5%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] .page details > summary {
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-3);
  color: var(--or-vif);
  font: 700 var(--t-3)/1.25 var(--police-titre);
  letter-spacing: .035em;
  cursor: pointer;
  user-select: none;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

html[data-vue="jeu"] .page details > summary:hover,
html[data-vue="jeu"] .page details > summary:focus-visible {
  color: var(--parchemin-clair);
  background: linear-gradient(90deg, color-mix(in srgb, var(--or-fonce) 38%, transparent), color-mix(in srgb, var(--cuir-clair) 18%, transparent));
}

html[data-vue="jeu"] .page details[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--or) 24%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--or-fonce) 34%, transparent), color-mix(in srgb, var(--bois-sombre) 20%, transparent));
}

html[data-vue="jeu"] .page details > summary::after {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--or-vif);
  font: var(--t-5)/1 var(--police-titre);
  content: '+';
}

html[data-vue="jeu"] .page details[open] > summary::after { content: '−'; }

html[data-vue="jeu"] .page details > :not(summary) {
  scroll-margin-block: 1rem;
}

/* Sur téléphone, les groupes d'actions restent des boutons de jeu, jamais
   une ligne de texte compressée. */
@media (max-width: 42rem) {
  html[data-vue="jeu"] .page :is(.troupe__actions, .fief__actions, .souche__actions,
    .role__actions, .economie-locale__actions, .captif__actions,
    .evenement-mondial__actions) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-2);
  }

  html[data-vue="jeu"] .page :is(.troupe__actions, .fief__actions, .souche__actions,
    .role__actions, .economie-locale__actions, .captif__actions,
    .evenement-mondial__actions) > :is(button, a) {
    min-width: 0;
    min-height: 46px;
  }
}

/* Les cartouches sont des aides temporaires, mais leur bouton de fermeture
   doit rester une commande lisible sur chaque palette d'ecran. Le theme clair
   conserve l'identite du parchemin et donne un contraste net au libelle. */
html[data-vue="jeu"] .page .cartouche__compris {
  min-width: 6.5rem;
  min-height: 2.75rem;
  padding-inline: var(--e-4);
  border: 1px solid var(--or-fonce);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, var(--or-vif), var(--alerte));
  color: var(--pierre-4);
  font-weight: 600;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 55%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] .page .cartouche__compris:hover,
html[data-vue="jeu"] .page .cartouche__compris:focus-visible {
  border-color: var(--or-vif);
  background: linear-gradient(180deg, var(--or-vif), var(--alerte));
  color: var(--pierre-3);
  transform: translateY(-1px);
}

/* Les chiffres explicables sont des commandes, même s'ils restent dans une
   phrase. Leur surface visuelle demeure compacte, mais le doigt dispose d'une
   vraie cible de 44 px et le focus ne saute plus entre deux lignes. */
/* Lot E des onglets (24/09/2026) : la feuille de la carte, où se prépare
   désormais chaque troupe, porte les mêmes chiffres que les pages. */
html[data-vue="jeu"] :is(.page, #feuille) .chiffre[role="button"] {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--e-1);
  margin-block: calc(-1 * var(--e-1));
  line-height: 1.2;
  vertical-align: middle;
  /* 🔴 Le pointillé se pose sous le nombre, pas au bas de la cible : sur une
     boîte de 44 px, il flottait une demi-ligne plus bas, entre deux lignes,
     sans qu'on sache à quel chiffre il tenait (mesuré le 21/09/2026 sur les
     expéditions, 22 px sous la ligne de base). */
  border-bottom: 0;
}
html[data-vue="jeu"] :is(.page, #feuille) .chiffre[role="button"] > .chiffre__valeur {
  text-decoration: underline dotted var(--or);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

/* Même un lien secondaire de création reste une vraie cible tactile sur
   mobile : 22 px faisait manquer le bouton aux pouces et aux lecteurs de
   gestes. */
#creation-compte-connexion {
  min-height: 2.75rem;
  padding: var(--e-2) var(--e-3);
  line-height: 1.25;
}

html[data-vue="jeu"] .tiroir__feuille {
  border-top-color: color-mix(in srgb, var(--or-vif) 65%, transparent);
  background:
    radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--fer-sombre) 20%, transparent), transparent 58%),
    linear-gradient(180deg, var(--pierre-3) 0%, var(--pierre-1) 100%);
  box-shadow: 0 -1.5rem 3rem color-mix(in srgb, var(--pierre-0) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 8%, transparent);
}

/* Le tiroir est une navigation modale temporaire : il doit passer devant la
   barre basse, sinon ses derniers boutons deviennent visuellement présents
   mais physiquement impossibles à toucher. */
html[data-vue="jeu"] #jeu .tiroir {
  z-index: 70;
}

html[data-vue="jeu"] .tiroir .onglet {
  min-height: 3.25rem;
  border-color: color-mix(in srgb, var(--or) 30%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--verredragon) 98%, transparent));
  color: var(--parchemin);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 8%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] .tiroir .onglet:hover,
html[data-vue="jeu"] .tiroir .onglet:focus-visible {
  border-color: var(--or-vif);
  background: linear-gradient(180deg, color-mix(in srgb, var(--or-fonce) 98%, transparent), color-mix(in srgb, var(--cuir) 98%, transparent));
  color: var(--parchemin-clair);
  transform: translateY(-1px);
}

@media (max-width: 42rem) {
  html[data-vue="jeu"] .page > .dialogue__entete {
    align-items: flex-start;
  }

  html[data-vue="jeu"] .page > .dialogue__entete .dialogue__fermer {
    min-width: 0;
    width: 100%;
    margin-inline-start: 0;
  }

  html[data-vue="jeu"] .tiroir__feuille {
    max-height: min(78dvh, 40rem);
    padding-inline: var(--e-3);
  }

  html[data-vue="jeu"] .tiroir nav.onglets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Réglages est un formulaire long : son en-tête était le seul à rester dans
   le flux du formulaire et disparaissait après quelques molette. */
html[data-vue="jeu"] #reglages.page > .reglages {
  min-width: 0;
  padding-bottom: var(--e-6);
}

html[data-vue="jeu"] #reglages.page > .reglages > .dialogue__entete {
  position: sticky;
  top: -.9rem;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-4);
  margin: calc(-1 * var(--e-4)) 0 var(--e-4);
  padding: var(--e-4) 0 var(--e-3);
  border-bottom: 1px solid color-mix(in srgb, var(--or) 35%, transparent);
  background: linear-gradient(180deg, var(--pierre-2) 78%, transparent);
}

html[data-vue="jeu"] #reglages.page > .reglages > fieldset {
  min-width: 0;
  margin: 0 0 var(--e-4);
  padding: var(--e-4);
  border: 1px solid color-mix(in srgb, var(--or-sourd) 27%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(145deg, color-mix(in srgb, var(--pierre-4) 78%, transparent), color-mix(in srgb, var(--pierre-1) 68%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 6%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] #reglages.page > .reglages > fieldset > legend {
  padding-inline: var(--e-2);
  color: var(--or-vif);
  font: var(--t-3)/1.2 var(--police-titre);
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-vue="jeu"] #reglages.page > .reglages > fieldset > button {
  min-height: 2.9rem;
  margin-top: var(--e-1);
  padding-inline: var(--e-4);
}

/* Les liens de confidentialité restent dans les notes, mais leur zone de
   toucher ne doit pas être réduite à la hauteur des caractères. */
html[data-vue="jeu"] #reglages.page .reglages__note a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--e-1);
  margin-block: calc(-1 * var(--e-2));
  color: var(--or-vif);
  text-decoration: underline;
  text-underline-offset: .18em;
  vertical-align: middle;
}

html[data-vue="jeu"] #reglages.page .reglages__note a:hover,
html[data-vue="jeu"] #reglages.page .reglages__note a:focus-visible {
  color: var(--parchemin-clair);
}

/* Les retours d'export, d'import et de signalement sont des etats d'action.
   Une surface legere les separe du texte d'aide et rend le resultat visible
   meme quand le joueur revient sur le formulaire apres une attente reseau. */
html[data-vue="jeu"] #reglages.page .reglages__note[role="status"] {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  margin: var(--e-2) 0;
  padding: var(--e-2) var(--e-3);
  border-left: 3px solid color-mix(in srgb, var(--or) 58%, transparent);
  border-radius: 0 .35rem .35rem 0;
  background: color-mix(in srgb, var(--bois) 18%, transparent);
  color: var(--parchemin);
}

/* Réglages : les contrôles natifs blancs/gris détonaient avec le reste de la
   salle. On garde les vrais input (clavier, lecteur d'écran, sauvegarde) mais
   on leur donne le même métal sombre et le même feedback que les boutons. */
html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  justify-self: start;
  width: 1.55rem;
  height: 1.55rem;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--or) 70%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, var(--pierre-4), var(--pierre-1));
  color: var(--pierre-4);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="checkbox"]::after {
  content: "✓";
  font: 700 var(--t-4)/1 var(--police-titre);
  opacity: 0;
  transform: scale(.65);
  transition: opacity .14s ease, transform .14s ease;
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="checkbox"]:checked {
  border-color: var(--or-vif);
  background: linear-gradient(180deg, var(--or), var(--or-fonce));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 40%, transparent), var(--ombre-2);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: scale(1);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="checkbox"]:hover {
  border-color: var(--or-vif);
  transform: translateY(-1px);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--or-vif);
  outline-offset: 3px;
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1.7rem;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="range"]::-webkit-slider-runnable-track {
  height: .42rem;
  border: 1px solid color-mix(in srgb, var(--or) 42%, transparent);
  border-radius: 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or-sourd) 70%, transparent), color-mix(in srgb, var(--pierre-1) 95%, transparent));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pierre-0) 50%, transparent);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: calc(-1 * var(--e-2));
  border: 2px solid var(--or-vif);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 35% 30%, var(--or-vif), var(--or-fonce) 72%);
  box-shadow: var(--ombre-2);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="range"]::-moz-range-track {
  height: .42rem;
  border: 1px solid color-mix(in srgb, var(--or) 42%, transparent);
  border-radius: 1rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--or-sourd) 70%, transparent), color-mix(in srgb, var(--pierre-1) 95%, transparent));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--pierre-0) 50%, transparent);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="range"]::-moz-range-thumb {
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--or-vif);
  border-radius: var(--rayon-rond);
  background: radial-gradient(circle at 35% 30%, var(--or-vif), var(--or-fonce) 72%);
  box-shadow: var(--ombre-2);
}

html[data-vue="jeu"] #reglages.page .reglages__ligne input[type="range"]:focus-visible {
  outline: 2px solid var(--or-vif);
  outline-offset: 3px;
}

/* Les états vides sont des états de jeu, pas des trous dans la maquette. Une
   carte commune évite qu’un bestiaire, un classement ou une chronique vide
   ressemble à un écran cassé. */
html[data-vue="jeu"] .page :is(
  .tableau__vide,
  .rangee--vide,
  .arbre__vide,
  .chronique__vide,
  .volet__vide,
  .lame-apercu__vide,
  .forge-maison__vide,
  .encyclopedie__rien,
  .priorite--vide,
  .siege__vide
):not([hidden]) {
  display: grid;
  place-items: center;
  min-height: 7rem;
  margin: var(--e-3) 0;
  padding: var(--e-4) var(--e-4);
  border: 1px dashed color-mix(in srgb, var(--or) 34%, transparent);
  border-radius: var(--rayon-case);
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--or-sourd) 9%, transparent), transparent 65%),
    color-mix(in srgb, var(--pierre-0) 35%, transparent);
  color: var(--texte);
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

html[data-vue="jeu"] .page :is(.tableau__vide, .rangee--vide, .chronique__vide):not([hidden])::before {
  content: "—";
  display: block;
  margin-bottom: var(--e-1);
  color: color-mix(in srgb, var(--or) 72%, transparent);
  font-style: normal;
  font-size: var(--t-6);
}

@media (max-width: 42rem) {
  /* Les deux colonnes de l'en-tête du téléphone (retour, titre). Une seule
     colonne ici rejetait le titre dans une colonne implicite, collé à droite. */
  html[data-vue="jeu"] #reglages.page > .reglages > .dialogue__entete {
    grid-template-columns: auto minmax(0, 1fr);
    top: -.75rem;
    margin-top: calc(-1 * var(--e-3));
    padding-top: var(--e-4);
  }
}

@media (max-width: 60rem) {
  /* Le formulaire est le vrai flux de defilement sur mobile : l'en-tete doit
     s'accrocher au haut de ce flux, pas conserver le decalage desktop negatif
     qui le faisait passer sous le bandeau du jeu. */
  html[data-vue="jeu"] #reglages.page > .reglages > .dialogue__entete {
    top: 0;
    margin-top: 0;
    padding-top: var(--e-3);
    background: linear-gradient(180deg, var(--pierre-2) 82%, transparent);
  }
}

/* Quetes : un seul sous-menu est visible a la fois. La grille historique
   gardait pourtant une seconde colonne vide, surtout sur grand ecran, ce qui
   tassait le contenu actif a gauche. On conserve une largeur de lecture
   confortable et on recentre la section choisie. */
@media (min-width: 60.0625rem) {
  html[data-vue="jeu"] #quetes.page .quetes-grille {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-vue="jeu"] #quetes.page .quetes-colonne {
    display: contents;
  }

  html[data-vue="jeu"] #quetes.page .quetes-grille > .quetes-colonne > section {
    width: min(100%, 72rem);
    margin-inline: auto;
  }
}


/* ── Le bandeau et la barre quand une page est ouverte ────────────────────

   🔴 Releve du proprietaire le 15/09/2026 : « la top bar / bottom bar ont des
   design differents de tout le reste ». C'est vrai, et ce n'est pas un choix
   de charte : le bleu vient de la CARTE.

   `carte-ui-senior.css` pose les deux barres en `rgba(20,45,60,.98)` vers
   `rgba(35,70,80,.94)`, pour qu'elles se fondent dans la mer et le ciel depuis
   que la carte prend tout l'ecran (demande du 08/09/2026). Cette couche mord
   sur `html[data-vue="jeu"] #jeu`, sans regarder ce qu'il y a dessous, donc le
   bleu restait quand une page s'ouvrait par-dessus. Or une page est en noir
   chaud, parchemin et or : deux familles de teinte sur le meme ecran.

   Le chrome garde donc deux etats assumes au lieu d'un compromis :
     · sur la carte, bleu froid, il se fond ;
     · des qu'une page est ouverte, noir chaud et or, comme les cadres.

   `data-page-ouverte` est pose a chaque ouverture (`jeu/ecrans/navigation.js`)
   et sept regles s'en servent deja pour retirer les volets et desaturer la
   carte. La transition est douce pour que la bascule ne clignote pas. */

html[data-vue="jeu"] #jeu .bandeau,
html[data-vue="jeu"] #jeu .barre {
  transition: background-color .22s ease, background-image .22s ease, border-color .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  html[data-vue="jeu"] #jeu .bandeau,
  html[data-vue="jeu"] #jeu .barre { transition: none; }
}

/* 🔴 Deux decors 3D gardent le bleu, pas seulement la carte. Mesure du
   15/09/2026 : sur la carte du monde `data-page-ouverte` est ABSENT, mais
   dans sa cite il vaut `visite`, qui est une page comme les autres pour la
   navigation. Une regle calee sur la seule presence de l'attribut repeignait
   donc la visite en noir chaud alors qu'elle est un decor, comme la carte.
   Le selecteur ecarte `visite` nommement.

   Et le `!important` n'est pas un tic : la barre du bas est deja peinte plus
   haut dans CE fichier avec `!important` (« La barre du bas est une
   navigation, pas un fondu de decor »). Sans lui, la bascule ne mordait pas. */

html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) #jeu .bandeau,
html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) #jeu .bandeau.bandeau {
  background: linear-gradient(105deg, color-mix(in srgb, var(--pierre-2) 98%, transparent), color-mix(in srgb, var(--pierre-0) 95%, transparent));
  border-color: color-mix(in srgb, var(--or-sourd) 30%, transparent);
  border-bottom: 2px solid var(--or-sourd, var(--or-sourd));
  box-shadow: var(--ombre-3);
}

html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) #jeu .barre,
html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) #jeu .barre.barre {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 96%, transparent), color-mix(in srgb, var(--pierre-1) 99%, transparent) 42%, var(--pierre-0) 100%) !important;
  border-top: 1px solid color-mix(in srgb, var(--or-vif) 50%, transparent) !important;
  box-shadow: 0 -1rem 2rem color-mix(in srgb, var(--pierre-0) 44%, transparent), inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 8%, transparent) !important;
}

/* Les onglets du bas portent le meme bleu-vert que la barre qui les tient. */
html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) #jeu .barre__entree {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 90%, transparent), color-mix(in srgb, var(--pierre-3) 96%, transparent));
  border-color: color-mix(in srgb, var(--or) 38%, transparent);
}

/* Le coffre des reserves est le plus visible des trois : cinq medaillons au
   milieu du bandeau, dans un cadre bleu. */
html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) #jeu .bandeau__tresor {
  background: color-mix(in srgb, var(--pierre-2) 55%, transparent);
  border-color: color-mix(in srgb, var(--or-sourd) 30%, transparent);
}

/* Les volets sont deja retires par `html[data-page-ouverte] .volet`, et le
   bandeau de la Longue Nuit garde son bleu de glace : la, le froid dit la
   phase, il ne decore pas. */


/* ── Le cadre des écrans ─────────────────────────────────────────────────────
   Un écran commence sous le VRAI bandeau et finit sur la VRAIE barre : la
   coque les mesure et pose `--bord-haut` et `--bord-bas` (jeu/ecrans/coque.js,
   `suivreLesBords`). Mesuré le 22/09/2026 avant cette règle : le bandeau
   recouvrait le haut de chaque page de 13 px sur ordinateur, 46 px au
   téléphone et 76 px sur une tablette de 820 px. Les valeurs de repli sont
   les anciennes, pour le premier dessin avant la mesure. */
html[data-vue="jeu"] .page,
html[data-vue="jeu"] #siege.page {
  top: var(--bord-haut, calc(var(--marge-haut) + var(--barre-haut) + .3rem));
  bottom: var(--bord-bas, calc(var(--marge-bas) + var(--barre-bas)));
}

/* Le bouton de retour dit où il mène : une flèche, puis le nom de l'écran
   (jeu/ecrans/navigation.js, `nommerLeRetour`). */
html[data-vue="jeu"] .page .dialogue__fermer .retour__fleche {
  margin-inline-end: .45em;
}


/* ── Le haut des écrans au téléphone ──────────────────────────────────────────
   Relevé du 22/09/2026 en 390 × 844 : avant la première commande, un écran
   empilait son titre, sa note, un bouton de retour de toute la largeur, la
   cartouche d'accueil sur 170 px et des onglets repliés sur deux ou trois
   lignes (« Défis de la semaine »). Le premier geste utile du domaine tombait
   à 600 px de haut, sous la ligne de flottaison.

   Au téléphone : la flèche de retour et le titre sur une rangée, la note
   dessous ; l'en-tête défile avec la page et la barre d'onglets reste collée
   en haut, sur une ligne qui se fait glisser. La flèche garde le nom de sa
   destination dans son nom accessible.

   `:not(#visite)` donne à ces règles le poids d'un identifiant, qui passe
   devant `#quetes.page`, `#siege.page` ou `#nuit.page`, et laisse la visite
   d'une cité, posée sur sa scène 3D, à sa propre mise en page. */
@media (max-width: 42rem) {
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete,
  html[data-vue="jeu"] .page:not(#visite) > form > .dialogue__entete {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "retour titre" "note note";
    align-items: center;
    gap: var(--e-0) var(--e-2);
    margin: 0 0 var(--e-2);
    padding: var(--e-2) 0 var(--e-2);
    background: none;
    /* La Longue Nuit et la forge taillent leur en-tête en planche aux coins
       coupés : au téléphone, la coupe mordait sur la flèche de retour. */
    clip-path: none;
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete::before,
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete::after,
  html[data-vue="jeu"] #siege.page:not(#visite) .siege__fanion {
    display: none;
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete .dialogue__titre,
  html[data-vue="jeu"] .page:not(#visite) > form > .dialogue__entete .dialogue__titre {
    grid-area: titre;
    margin: 0;
    padding: 0;
    font-size: var(--t-6);
    line-height: 1.2;
    text-align: start;
    letter-spacing: .02em;
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete :is(.dialogue__note, .siege__mode),
  html[data-vue="jeu"] .page:not(#visite) > form > .dialogue__entete .dialogue__note {
    grid-area: note;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--t-2);
    line-height: 1.35;
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete .dialogue__note:empty,
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete .siege__mode {
    display: none;
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete .dialogue__fermer,
  html[data-vue="jeu"] .page:not(#visite) > form > .dialogue__entete .dialogue__fermer {
    grid-area: retour;
    position: static;
    transform: none;
    align-self: center;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    font-size: var(--t-5);
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete .dialogue__fermer:is(:hover, :focus-visible) {
    transform: none;
  }
  html[data-vue="jeu"] .page:not(#visite) > .dialogue__entete .dialogue__fermer::after {
    content: none;
  }
  html[data-vue="jeu"] .page:not(#visite) .dialogue__fermer .retour__fleche {
    margin: 0;
  }
  html[data-vue="jeu"] .page:not(#visite) .dialogue__fermer .retour__nom {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* La barre d'onglets : une ligne, collée en haut de l'écran pendant qu'on lit. */
  html[data-vue="jeu"] .page:not(#visite) > .onglets-page {
    top: 0;
    min-height: 0;
    margin: 0 0 var(--e-3);
    padding: var(--e-1) 0 var(--e-2);
  }
  html[data-vue="jeu"] .page:not(#visite) > .onglets-page .onglets-page__entree {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 44px;
    padding: var(--e-2) var(--e-3);
    font-size: var(--t-3);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* La cartouche d'accueil : sa phrase à gauche, « Compris » à droite. */
  html[data-vue="jeu"] .page:not(#visite) > .cartouche,
  html[data-vue="jeu"] .page:not(#visite) > form > .cartouche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-0) var(--e-3);
    margin: 0 0 var(--e-2);
    padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3);
    font-size: var(--t-2);
  }
  html[data-vue="jeu"] .page:not(#visite) .cartouche .cartouche__titre { grid-column: 1; margin: 0; }
  html[data-vue="jeu"] .page:not(#visite) .cartouche .cartouche__dit { grid-column: 1; margin: 0; line-height: 1.35; }
  html[data-vue="jeu"] .page:not(#visite) .cartouche .cartouche__compris {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 0;
    margin: 0;
    padding-inline: var(--e-3);
  }
}

/* Le fond d'un écran est plein. Les habillages des quêtes ou de la Longue Nuit
   posent des dégradés à 96 ou 98 % : les noms de la carte transparaissaient
   derrière les titres (« Les cités du royaume », relevé du 22/09/2026). Une
   couleur pleine passe sous leurs dégradés, qui gardent leur teinte. */
html[data-vue="jeu"] .page:not(#visite) {
  background-color: var(--pierre-0);
}
html[data-vue="jeu"] #nuit.page:not(#visite) {
  background-color: var(--glace-nuit);
}

/* ── Le tiroir « Plus » : un panneau de jeu au-dessus de la barre ───────────
   Refait le 9/10/2026 (retour du propriétaire, capture du tiroir). Quatre
   colonnes de une à quatre entrées laissaient la moitié de la feuille vide,
   sous des titres de rubrique en capitales. Le tiroir est maintenant un panneau
   posé au-dessus de la barre du bas, comme le menu d'un jeu de stratégie : trois
   rangées de trois cases, l'icône peinte en haut, le nom dessous. Les titres de
   rubrique restent pour le lecteur d'écran. Une case ne sort du rang que pour
   une raison : c'est l'écran ouvert, ou la Longue Nuit attaque.
   Les sélecteurs passent par #tiroir : quetes.css teint chaque entrée par son
   identifiant (#jeu .onglet#ouvrir-nuit), il faut deux identifiants pour
   l'emporter. */
html[data-vue="jeu"] #jeu #tiroir {
  justify-content: flex-end;
  align-items: center;
}
html[data-vue="jeu"] #jeu #tiroir .tiroir__voile {
  background: color-mix(in srgb, var(--pierre-0) 38%, transparent);
}
html[data-vue="jeu"] #jeu #tiroir .tiroir__feuille {
  box-sizing: border-box;
  width: min(29rem, calc(100vw - 2 * var(--e-2)));
  max-height: calc(100dvh - var(--marge-haut, 0px) - var(--marge-bas, 0px) - var(--barre-bas) - 2rem);
  margin: 0 0 calc(var(--marge-bas, 0px) + var(--barre-bas) + var(--e-2));
  padding: var(--e-3);
  border: 1px solid color-mix(in srgb, var(--or) 60%, transparent);
  border-radius: var(--rayon-case);
  background:
    radial-gradient(110% 70% at 50% 0%, color-mix(in srgb, var(--or-sourd) 10%, transparent), transparent 65%),
    linear-gradient(180deg, var(--pierre-3) 0%, var(--pierre-1) 100%);
  box-shadow:
    0 1.2rem 2.6rem rgb(0 0 0 / .62),
    inset 0 0 0 1px rgb(0 0 0 / .55),
    inset 0 0 0 3px color-mix(in srgb, var(--or-fonce) 35%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 10%, transparent);
}
html[data-vue="jeu"] #jeu #tiroir .tiroir__poignee { display: none; }
html[data-vue="jeu"] #jeu #tiroir nav.tiroir__lieux {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: none;
  margin: 0;
}
html[data-vue="jeu"] #jeu #tiroir .tiroir__groupe {
  min-width: 0;
  margin: 0;
}
/* Les titres de rubrique : lus, pas montrés. */
html[data-vue="jeu"] #jeu #tiroir .tiroir__groupe-titre {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
html[data-vue="jeu"] #jeu #tiroir .tiroir__entrees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2);
}
html[data-vue="jeu"] #jeu #tiroir .onglet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e-1);
  width: 100%;
  min-height: 6.6rem;
  margin: 0;
  padding: var(--e-2) var(--e-1);
  border: 1px solid color-mix(in srgb, var(--or) 30%, transparent);
  border-radius: var(--rayon-case);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 94%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 7%, transparent),
    inset 0 -2px 0 rgb(0 0 0 / .35),
    0 2px 4px rgb(0 0 0 / .45);
  color: var(--parchemin);
  font-family: var(--police-titre);
  font-size: var(--t-2);
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #000;
  white-space: normal;
  animation: none;
  filter: none;
  transform: none;
  transition: border-color .12s, background .12s, transform .12s;
}
html[data-vue="jeu"] #jeu #tiroir .onglet::after { content: none; }
html[data-vue="jeu"] #jeu #tiroir .onglet .onglet__icone {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  margin: 0;
  opacity: .92;
  box-shadow: 0 2px 6px rgb(0 0 0 / .55);
  border-radius: 50%;
}
html[data-vue="jeu"] #jeu #tiroir .onglet__mot { display: block; max-width: 100%; overflow-wrap: anywhere; }
/* Le point des quêtes à réclamer : en coin de case, comme une alerte de jeu. */
html[data-vue="jeu"] #jeu #tiroir .onglet__point {
  position: absolute;
  top: var(--e-1);
  right: var(--e-1);
  width: .6rem;
  height: .6rem;
  margin: 0;
}
html[data-vue="jeu"] #jeu #tiroir .onglet:hover,
html[data-vue="jeu"] #jeu #tiroir .onglet:focus-visible {
  border-color: color-mix(in srgb, var(--or-vif) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 96%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  color: var(--parchemin-clair);
  transform: translateY(-1px);
}
html[data-vue="jeu"] #jeu #tiroir .onglet:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgb(0 0 0 / .5); }
html[data-vue="jeu"] #jeu #tiroir .onglet:focus-visible {
  outline: 2px solid var(--or-vif);
  outline-offset: 2px;
}
html[data-vue="jeu"] #jeu #tiroir .onglet:hover .onglet__icone,
html[data-vue="jeu"] #jeu #tiroir .onglet:focus-visible .onglet__icone { opacity: 1; }
/* L'écran ouvert : la case cerclée d'or. */
html[data-vue="jeu"] #jeu #tiroir .onglet.est-actif {
  border-color: color-mix(in srgb, var(--or-vif) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 95%, transparent), color-mix(in srgb, var(--pierre-2) 96%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--or) 55%, transparent), inset 0 0 14px color-mix(in srgb, var(--or-sourd) 30%, transparent);
  color: var(--or-vif);
}
/* La Longue Nuit attaque : la case prend le givre, sans clignoter. */
html[data-vue="jeu"] #jeu #tiroir .onglet.est-urgente {
  border-color: color-mix(in srgb, var(--texte) 80%, transparent);
  background: color-mix(in srgb, var(--cuir) 96%, transparent);
  box-shadow: inset 0 0 0 1px var(--texte), 0 0 12px color-mix(in srgb, var(--or-sourd) 22%, transparent);
  color: var(--parchemin-clair);
}

/* Téléphone : le panneau prend la largeur, les cases se resserrent. */
@media (max-width: 42rem) {
  html[data-vue="jeu"] #jeu #tiroir .tiroir__feuille { padding: var(--e-2); }
  html[data-vue="jeu"] #jeu #tiroir .onglet { min-height: 5.9rem; font-size: var(--t-2); }
  html[data-vue="jeu"] #jeu #tiroir .onglet .onglet__icone { width: 2.7rem; height: 2.7rem; }
}
/* Téléphone couché : la hauteur manque, les trois rubriques côte à côte, neuf cases sur une rangée. */
@media (max-height: 30rem) and (min-width: 42.0625rem) {
  html[data-vue="jeu"] #jeu #tiroir .tiroir__feuille { width: min(56rem, calc(100vw - 2 * var(--e-2))); padding: var(--e-2); }
  html[data-vue="jeu"] #jeu #tiroir nav.tiroir__lieux { flex-direction: row; }
  html[data-vue="jeu"] #jeu #tiroir .tiroir__groupe { flex: 1 1 0; }
  html[data-vue="jeu"] #jeu #tiroir .onglet { min-height: 4.8rem; padding-block: var(--e-1); }
  html[data-vue="jeu"] #jeu #tiroir .onglet .onglet__icone { width: 2.2rem; height: 2.2rem; }
}

/* ── La barre d'onglets colle au bord de la page ────────────────────────────
   Chrome colle un élément sous le rembourrage de la page qui défile, pas sous
   son bord. Avec `top: 0`, 14 à 18 px du contenu passaient au-dessus des
   onglets pendant la lecture, coupés net (Demeure, domaine au téléphone ;
   relevé du 22/09/2026). Le décalage négatif vaut le rembourrage haut qui
   gagne la cascade : 0,9 rem pour les pages (coque.css), 1,15 rem pour la
   Demeure (quetes.css, .colonnes.grand-salle). */
html[data-vue="jeu"] .page:not(:has(> .dialogue__entete)) > .onglets-page {
  top: -.9rem;
}
html[data-vue="jeu"] #cour.page > .onglets-page {
  top: -1.15rem;
}
@media (max-width: 42rem) {
  html[data-vue="jeu"] .page:not(#visite) > .onglets-page {
    top: -.9rem;
  }
  html[data-vue="jeu"] #cour.page:not(#visite) > .onglets-page {
    top: -1.15rem;
  }
}

/* L'onglet ouvert se voit. Les règles des boutons de quetes.css (#jeu button
   à huit :not(), #siege.page button…) écrasaient le fond d'or prévu plus haut
   pour `.est-actif` : sans survol, les onglets d'un écran se ressemblaient tous
   (relevé du 22/09/2026 sur la Demeure et le domaine). `:is(#jeu, body)` compte
   pour un identifiant où que vive la page : la Demeure est dans #jeu, les
   autres écrans à côté. */
html[data-vue="jeu"] :is(#jeu, body) .page:not(#visite) > .onglets-page .onglets-page__entree.est-actif {
  border-color: var(--or-vif);
  color: var(--bois-sombre);
  background: linear-gradient(180deg, var(--or), var(--or-fonce));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin-clair) 45%, transparent), var(--ombre-2);
}

/* ── L'accueil de session : la Demeure, onglet « Aujourd'hui » ──────────────
   Ordre de lecture : l'état du jour, le conseil du mestre, la boucle, puis les
   décisions. Le guide du mestre et « À traiter » viennent ensuite ; sur grand
   écran, ils tiennent une colonne à droite des décisions.
   Les sélecteurs passent par deux identifiants : quetes.css habille chaque
   bouton du jeu d'une règle à huit :not() (1,8,1). */

/* « Aujourd'hui » et « Ton ascension » s'excluent : la deuxième colonne de la
   grille restait vide sous l'un comme sous l'autre (330 px sur 1 440). */
html[data-vue="jeu"] #cour .demeure-grille {
  grid-template-columns: minmax(0, 1fr);
}

/* L'état du jour tient lieu de titre : l'onglet dit déjà « Aujourd'hui ». */
html[data-vue="jeu"] #cour #journee-etat {
  margin: var(--e-0) 0 var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--t-5);
  font-weight: 600;
  line-height: 1.3;
}

/* Le conseil du mestre tient sur une ligne : qui parle, ce qu'il dit, où aller. */
html[data-vue="jeu"] #cour #mestre-conseil:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-0) var(--e-4);
  margin: 0 0 var(--e-3);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-conseil__titre {
  grid-column: 1;
  margin: 0;
  font-size: var(--t-1);
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-conseil__dit {
  grid-column: 1;
  font-size: var(--t-4);
  line-height: 1.35;
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-conseil__actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-conseil__aller {
  width: auto;
  white-space: nowrap;
}

/* Les premiers pas, repliés sous le conseil (22/09/2026) : un seul guide sur
   l'accueil. Le cadre commun des repliables en ferait une seconde carte dans
   la première ; ici, un filet d'or, le compte des pas, puis leur liste. */
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide {
  grid-column: 1 / -1;
  margin: var(--e-1) 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide > summary,
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide > summary:hover,
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide[open] > summary {
  min-height: 44px;
  padding: var(--e-1) 0;
  /* La règle des boutons de quetes.css habille aussi les summary. */
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  color: var(--or);
  font: 600 var(--t-2)/1.25 var(--police-titre);
  letter-spacing: .04em;
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide > summary:focus-visible { color: var(--parchemin-clair); }
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide > summary::after { font-size: var(--t-4); }
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide__intro { margin: 0 0 var(--e-1); }
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide__etapes {
  margin: 0 0 var(--e-1);
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide__etapes li.est-fait { color: var(--texte-pale); }
html[data-vue="jeu"] #cour #mestre-conseil .mestre-guide__etapes li.est-prochain { color: var(--parchemin); font-weight: 600; }

/* Les décisions : la boucle du jour les annonce, elles suivent sans détour. */
html[data-vue="jeu"] #cour #vue-journee .boucle-jour {
  margin: 0 0 var(--e-4);
}

/* La colonne de droite : « À traiter », seul depuis que le guide est replié sous le conseil. */
html[data-vue="jeu"] #cour .journee__rail {
  display: grid;
  align-content: start;
  gap: var(--e-4);
  min-width: 0;
}
html[data-vue="jeu"] #cour .journee__rail > * {
  margin: 0;
}
/* Une urgence de la colonne : son titre et sa phrase, « Voir » à droite, et
   plus un bouton d'or sur toute la largeur sous chaque ligne. */
html[data-vue="jeu"] #cour .journee__rail .priorite__corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-0) var(--e-2);
}
html[data-vue="jeu"] #cour .journee__rail .priorite__titre,
html[data-vue="jeu"] #cour .journee__rail .priorite__dit {
  grid-column: 1;
}
html[data-vue="jeu"] #cour #vue-journee .journee__rail .priorite__ouvrir {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: auto;
  min-width: 4.5rem;
  min-height: 44px;
  margin: 0;
  padding: var(--e-1) var(--e-3);
}

@media (min-width: 60.0625rem) {
  html[data-vue="jeu"] #cour #vue-journee {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
    align-items: start;
  }
  html[data-vue="jeu"] #cour #vue-journee > * {
    grid-column: 1;
    min-width: 0;
  }
  html[data-vue="jeu"] #cour #vue-journee > .journee__rail {
    grid-column: 2;
    grid-row: 1 / span 6;
  }
  /* « Ton ascension » : l'échelle des rangs, les ressources à côté. */
  html[data-vue="jeu"] #cour .demeure-appuis {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
    align-items: start;
  }
}

/* Téléphone : le conseil passe ses gestes dessous, la boucle tient sur une
   rangée de trois (262 px de haut quand chaque étape prenait sa ligne). */
@media (max-width: 42rem) {
  html[data-vue="jeu"] #cour #mestre-conseil:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-vue="jeu"] #cour #mestre-conseil .mestre-conseil__actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--e-1);
  }
  html[data-vue="jeu"] #cour #vue-journee .boucle-jour {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-1);
  }
  html[data-vue="jeu"] #cour #vue-journee .boucle-jour__etape {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--e-1);
    min-height: 56px;
    padding: var(--e-2) var(--e-2);
  }
  html[data-vue="jeu"] #cour #vue-journee .boucle-jour__etape small {
    display: none;
  }
  html[data-vue="jeu"] #cour #vue-journee .boucle-jour__numero {
    width: 1.35rem;
    height: 1.35rem;
    font-size: var(--t-2);
  }
  html[data-vue="jeu"] #cour #vue-journee .boucle-jour__etape strong {
    font-size: var(--t-3);
  }
  html[data-vue="jeu"] #cour #vue-journee .boucle-jour__statut {
    font-size: var(--t-1);
    letter-spacing: .04em;
  }
}

/* ── Tes compagnons ──────────────────────────────────────────────────────
   La section n'avait ni classe ni marge : le texte touchait le cadre et le
   bouton de recrutement en prenait toute la largeur. Ceux qui te suivent
   d'abord, puis la condition et le bouton sur une ligne. */
html[data-vue="jeu"] #famille.page > .compagnons {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4);
}
html[data-vue="jeu"] #famille .compagnons__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #famille .compagnons__liste > .est-vide {
  color: color-mix(in srgb, var(--parchemin) 72%, transparent);
  font-style: italic;
}
html[data-vue="jeu"] #famille .compagnons__recrue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid color-mix(in srgb, var(--echelon-5) 16%, transparent);
}
html[data-vue="jeu"] #famille .compagnons__condition {
  flex: 1 1 16rem;
  margin: 0;
}
html[data-vue="jeu"] #famille .compagnons__recrue .compagnons__recruter {
  flex: 0 0 auto;
  width: auto;
  padding-inline: var(--e-4);
}
@media (max-width: 42rem) {
  html[data-vue="jeu"] #famille .compagnons__recrue .compagnons__recruter { flex: 1 1 100%; }
}

/* ── Ton domaine, onglet « Bâtiments » ───────────────────────────────────
   Un onglet ouvert à la fois, donc une seule colonne. La grille historique
   gardait à droite une colonne pour les routes et le marché, qui ont leurs
   onglets depuis : sur « Bâtiments », la liste tenait 55 % de la largeur et
   le reste de la page restait vide (relevé du 22/09/2026, 1 440 pixels). */
@media (min-width: 60.0625rem) {
  html[data-vue="jeu"] #siege.page .siege-gestion {
    grid-template-columns: minmax(0, 1fr);
  }
  html[data-vue="jeu"] #siege.page .gestion-aside:not(:has(> section:not([hidden]))) {
    display: none;
  }
  html[data-vue="jeu"] #siege.page .gestion-batiments .batiments {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
  /* Le marché est un formulaire de trois champs : sur toute la largeur, la
     liste des ressources faisait mille pixels. */
  html[data-vue="jeu"] #siege.page .gestion-aside > .colporteur {
    max-width: 46rem;
  }
}

/* ── Cibles au doigt, dans « Ton ascension » ─────────────────────────────
   « Voir ce qui manque » faisait 30 pixels de haut en 11 pixels de texte :
   sous les 44 du reste du jeu, relevé du 22/09/2026 au téléphone. La planche
   garde sa finesse à la souris. */
@media (pointer: coarse), (max-width: 42rem) {
  html[data-vue="jeu"] #jeu #montee button.condition__action {
    min-height: 44px;
  }
  html[data-vue="jeu"] #jeu #montee button.condition__action {
    font-size: var(--t-2);
  }
}

/* ── Les alliances : la parole ───────────────────────────────────────────
   Refaite en React le 22/09/2026 (interface/composants/paroles.jsx). La
   règle une fois, en tête ; une maison par ligne, qui s'ouvre sur ses quatre
   arguments. Sur grand écran, les maisons se rangent en colonnes et celle
   qu'on ouvre prend toute la largeur. */
html[data-vue="jeu"] #gouverner .parole {
  padding: var(--e-4) var(--e-4) var(--e-4);
}
html[data-vue="jeu"] #gouverner .parole__titre {
  margin: 0 0 var(--e-2);
  font: var(--t-2) var(--police-titre);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or-sourd);
}
html[data-vue="jeu"] #gouverner .parole__regle {
  display: grid;
  gap: var(--e-1);
  margin: 0 0 var(--e-4);
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--or-sourd);
  background: color-mix(in srgb, var(--echelon-5) 7%, transparent);
}
html[data-vue="jeu"] #gouverner .parole__regle p {
  margin: 0;
  font-size: var(--t-3);
  line-height: 1.45;
}
html[data-vue="jeu"] #gouverner .parole__maisons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #gouverner .maison-parole {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--echelon-5) 22%, transparent);
  background: color-mix(in srgb, var(--pierre-1) 72%, transparent);
}
html[data-vue="jeu"] #gouverner .maison-parole.est-ouverte {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--or) 60%, transparent);
}
html[data-vue="jeu"] #gouverner .maison-parole.est-fermee {
  opacity: .62;
}
html[data-vue="jeu"] #gouverner.page button.maison-parole__tete {
  position: relative;
  display: grid;
  gap: var(--e-0);
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--e-2) var(--e-6) var(--e-2) var(--e-3);
  text-align: left;
  color: inherit;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
html[data-vue="jeu"] #gouverner.page button.maison-parole__tete:disabled {
  cursor: default;
}
html[data-vue="jeu"] #gouverner.page button.maison-parole__tete:not(:disabled)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .9rem;
  width: .5rem;
  height: .5rem;
  margin-top: calc(-1 * var(--e-1));
  border-right: 2px solid var(--or-sourd);
  border-bottom: 2px solid var(--or-sourd);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
html[data-vue="jeu"] #gouverner.page button.maison-parole__tete[aria-expanded="true"]::after {
  margin-top: calc(-1 * var(--e-0));
  transform: rotate(-135deg);
}
html[data-vue="jeu"] #gouverner.page button.maison-parole__tete:is(:hover, :focus-visible):not(:disabled) {
  background: color-mix(in srgb, var(--or) 8%, transparent);
}
html[data-vue="jeu"] #gouverner .maison-parole__qui {
  font-family: var(--police-titre);
  font-size: var(--t-4);
  color: var(--parchemin);
}
html[data-vue="jeu"] #gouverner .maison-parole__compte {
  font-size: var(--t-2);
  color: var(--texte-pale);
}
html[data-vue="jeu"] #gouverner .maison-parole__etat {
  font-size: var(--t-2);
  color: var(--or-sourd);
}
html[data-vue="jeu"] #gouverner .maison-parole__panneau {
  display: grid;
  gap: var(--e-2);
  padding: 0 var(--e-3) var(--e-3);
}
html[data-vue="jeu"] #gouverner .maison-parole__issue {
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--or-sourd);
  background: color-mix(in srgb, var(--echelon-5) 8%, transparent);
  font-size: var(--t-3);
}
html[data-vue="jeu"] #gouverner .maison-parole__issue.est-bonne {
  border-left-color: var(--gain);
  color: var(--parchemin);
}
/* Les accords sous les arguments d'une maison (9/10/2026). */
html[data-vue="jeu"] #gouverner .maison-parole__accords { display: grid; gap: var(--e-1); }
html[data-vue="jeu"] #gouverner .maison-parole__intertitre {
  margin: var(--e-1) 0 0; font-family: var(--police-titre); font-size: var(--t-2); letter-spacing: var(--capitales);
  text-transform: uppercase; color: var(--or-sourd);
}
html[data-vue="jeu"] #gouverner .maison-parole__angles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
html[data-vue="jeu"] #gouverner .angle {
  display: grid;
  align-content: start;
  gap: var(--e-1);
  min-width: 0;
  padding: var(--e-2) var(--e-2);
  border: 1px solid color-mix(in srgb, var(--echelon-5) 18%, transparent);
  background: color-mix(in srgb, var(--pierre-0) 45%, transparent);
}
html[data-vue="jeu"] #gouverner .angle.est-dit {
  opacity: .6;
}
html[data-vue="jeu"] #gouverner.page button.angle__dire {
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  text-align: left;
  font-family: var(--police-titre);
  font-size: var(--t-3);
  letter-spacing: .02em;
  text-transform: none;
  color: var(--parchemin);
  background: linear-gradient(180deg, var(--cuir), var(--pierre-3));
  border: 1px solid color-mix(in srgb, var(--or) 55%, transparent);
  border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--parchemin) 12%, transparent);
}
html[data-vue="jeu"] #gouverner.page button.angle__dire:is(:hover, :focus-visible):not(:disabled) {
  border-color: var(--or);
  background: linear-gradient(180deg, var(--cuir-clair), var(--pierre-4));
}
html[data-vue="jeu"] #gouverner.page button.angle__dire:disabled {
  color: color-mix(in srgb, var(--parchemin) 55%, transparent);
  background: color-mix(in srgb, var(--pierre-3) 60%, transparent);
  border-color: color-mix(in srgb, var(--or) 22%, transparent);
}
html[data-vue="jeu"] #gouverner .angle__chance {
  margin: 0;
  font-size: var(--t-2);
  line-height: 1.4;
}
html[data-vue="jeu"] #gouverner :is(.angle__cout, .angle__dit) {
  margin: 0;
  font-size: var(--t-2);
  color: var(--texte-pale);
}

/* ── La barre d'onglets sous l'en-tête collé ─────────────────────────────
   `--onglets-haut` est le bas réel de l'en-tête, mesuré par
   `onglets-page.js` ; 4,05 rem reste la valeur tant qu'il n'est pas mesuré.
   Et l'en-tête d'une page à onglets est plein jusqu'en bas : son fondu
   laissait passer le texte défilé entre le titre et la barre. Au téléphone,
   l'en-tête défile avec la page, et ces règles ne s'y appliquent pas. */
@media (min-width: 42.0625rem) {
  html[data-vue="jeu"] .page:has(> .dialogue__entete) > .onglets-page {
    top: var(--onglets-haut, 4.05rem);
  }
  html[data-vue="jeu"] .page:not(#visite):has(> .onglets-page) > .dialogue__entete {
    background: var(--pierre-2);
  }
}

/* ── La forge : l'histoire d'une pièce, au pied de sa fiche ──────────────
   Repliée par défaut (`forge.js`), sous le cadre commun des `summary` du
   jeu ; la cible fait 44 pixels au doigt. */
html[data-vue="jeu"] #forge .piece__histoire {
  margin: var(--e-0) 0 0;
}
html[data-vue="jeu"] #forge .piece__histoire > summary {
  min-height: 44px;
  font-size: var(--t-2);
}
html[data-vue="jeu"] #forge .piece__histoire > .piece__dit {
  margin: 0 0 var(--e-1);
}