/* ─────────────────────────────────────────────────────────────────────────
   La coque. La carte est l'écran ; tout le reste flotte au-dessus d'elle.

   Trois règles tiennent cette feuille :

     1. Le monde occupe la totalité de la fenêtre. Rien ne l'encadre, rien ne
        le rétrécit. Un panneau se pose DESSUS, il ne pousse jamais la carte.
     2. Le HUD ne prend le doigt que là où il y a quelque chose à toucher :
        `pointer-events: none` sur le calque, `auto` sur ses enfants. Entre
        deux panneaux, le doigt tombe sur la carte.
     3. Aucune valeur de la palette existante n'est redéfinie ici. Cette
        feuille se charge la dernière et n'ajoute que de la mise en place.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --barre-haut: 3.4rem;      /* le bandeau flottant */
  /* La barre des cinq entrées. Ce nombre n'est pas décoratif : il est la
     hauteur que chaque écran se retire en bas, et il était FAUX. La barre
     mesurait 91 px quand il en réservait 62, et elle mangeait les 29 derniers
     pixels de chaque page — sur la visite d'une cité, la rangée « À l'arrivée
     / Toute la cité / Les remparts » passait dessous. La barre a été dégraissée
     à 68 px (`carte-ui-senior.css`) et ce nombre la suit, mesuré par
     `tools/_mesurer-barre-du-bas.mjs`. À toucher ensemble, jamais seul. */
  --barre-bas: 4.5rem;
  /* La hauteur du rappel de compte, posé tout en haut tant qu'une partie n'est liée à aucun compte (chronique.js la
     mesure). Tout le haut du jeu se compte depuis --marge-haut : le bandeau, les volets, les feuilles et les pages
     descendent d'autant, et le rappel ne recouvre rien. */
  --rappel-haut: 0px;
  --marge-haut: calc(env(safe-area-inset-top) + var(--rappel-haut));
  --marge-bas: env(safe-area-inset-bottom);
  --marge-gauche: env(safe-area-inset-left);
  --marge-droite: env(safe-area-inset-right);
  --voile-monde: color-mix(in srgb, var(--pierre-0) 93%, transparent);
  --verre: color-mix(in srgb, var(--pierre-1) 84%, transparent);
  --verre-bord: color-mix(in srgb, var(--echelon-5) 24%, transparent);
}

/* ── La fenêtre entière, une fois le jeu entré ───────────────────────────── */

html[data-vue="jeu"],
html[data-vue="jeu"] body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
/* Les marges d'encoche reviennent sur chaque pièce du HUD : posées sur le
   corps, elles auraient réduit la carte de quelques pixels sur les quatre
   bords, et un monde encadré n'est plus un monde. */
html[data-vue="jeu"] body { padding: 0; }

/* `#jeu` reste en position relative, SANS z-index : il ne doit pas fabriquer
   de contexte d'empilement. Les écrans (`.page`) sont ses voisins dans le
   document ; si `#jeu` était un contexte, la barre du bas passerait sous eux
   quelle que soit sa cote, et on ne pourrait plus sortir d'un écran. Chaque
   pièce se fixe donc elle-même à la fenêtre. */
html[data-vue="jeu"] #jeu.jeu {
  position: relative;
  z-index: auto;
}

/* Le décor peint reste sous la carte : il ne se voit qu'au chargement, avant
   que le monde soit dessiné. */
html[data-vue="jeu"] .fond { z-index: 0; }

/* ── Le monde ────────────────────────────────────────────────────────────── */

.monde {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--verredragon);
}

.monde__vue {
  position: absolute;
  inset: 0;
}

.monde__vue > svg {
  display: block;
  /* La feuille du monde imposait 70 vh de haut : c'etait la regle d'une carte
     posee dans une page. Ici la carte EST la page. */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  /* Le navigateur ne doit pas faire défiler la page sous le doigt : la carte
     gère elle-même le glissement et le pincement. */
  touch-action: none;
  cursor: grab;
}
.monde__vue > svg:active { cursor: grabbing; }

/* Quand un écran s'ouvre par-dessus, le monde recule sans disparaître. */
html[data-page-ouverte] .monde { filter: saturate(0.55) brightness(0.62); }

/* Les boutons d'approche, à droite, au-dessus de la barre du bas. */
.monde__outils {
  position: absolute;
  right: calc(var(--marge-droite) + 0.7rem);
  bottom: calc(var(--marge-bas) + var(--barre-bas) + 0.7rem);
  z-index: 12;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.monde__outils button,
.monde__outils .carte__outils button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon);
  color: var(--texte);
  font-size: var(--t-5);
  line-height: 1;
  backdrop-filter: blur(6px);
}
.monde__outils button:hover { color: var(--or); border-color: var(--or-sourd); }
.monde__outils > * { display: flex; flex-direction: column; gap: var(--e-2); }

/* ── Le calque flottant ──────────────────────────────────────────────────── */

/* Le HUD etait un bandeau colle en haut : il portait son propre verre fume et
   son flou. Etale sur tout l'ecran, ce verre voilait le monde entier. Il n'a
   plus de matiere : chaque piece porte la sienne. */
html[data-vue="jeu"] .hud {
  position: fixed;
  inset: 0;
  z-index: 44;
  padding-top: 0;
  pointer-events: none;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  box-shadow: none;
}
html[data-vue="jeu"] .hud > * { pointer-events: auto; }

html[data-vue="jeu"] #jeu .bandeau__compte {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--e-2);
}

html[data-vue="jeu"] .hud .bandeau {
  position: absolute;
  top: var(--marge-haut);
  left: calc(var(--marge-gauche) + 0.6rem);
  right: calc(var(--marge-droite) + 0.6rem);
  max-width: none;
  min-height: var(--barre-haut);
  margin: 0;
  padding: var(--e-1) var(--e-3);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pierre-2) 99%, transparent), color-mix(in srgb, var(--pierre-0) 99%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--or-sourd) 34%, transparent);
  border-radius: var(--rayon-case);
  box-shadow: var(--ombre-3), inset 0 1px 0 color-mix(in srgb, var(--or-vif) 14%, transparent);
  backdrop-filter: blur(8px);
}


/* ── La Longue Nuit dans le bandeau (lot 13) ─────────────────────────────
   Un seul indicateur permanent : la phase, l'assaut qui vient, et au survol
   ou à l'appui long la horde décomposée. Sept phases, sept palettes : la
   valeur --nuit-froid vient des données de la nuit, posée par l'écran ; l'or
   et le parchemin glissent vers la glace à mesure qu'elle monte. Un navigateur
   sans color-mix garde la palette d'origine.
   Depuis le 24/09/2026 ce froid ne teinte que l'écran de la Nuit. Les valeurs
   de départ sont écrites en clair, et ce sont celles de jeu/jetons.css : une
   variable qui se lit elle-même dans sa propre définition est invalide, et
   l'or de la page tombait au gris (planche du lot B). */
html { --nuit-froid: 0; }
html[data-vue="jeu"] #nuit {
  --or: color-mix(in oklab, #d3ad5c, var(--glace) calc(var(--nuit-froid) * 45%));
  --or-sourd: color-mix(in oklab, #b99545, var(--glace) calc(var(--nuit-froid) * 40%));
  --parchemin: color-mix(in oklab, #e3d5b3, var(--glace-clair) calc(var(--nuit-froid) * 45%));
  --parchemin-bas: color-mix(in oklab, #c9b78d, var(--glace) calc(var(--nuit-froid) * 40%));
}
html[data-vue="jeu"] .monde__vue::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgb(20 56 79 / calc(var(--nuit-froid) * 0.3));
  mix-blend-mode: multiply;
}
.bandeau__nuit {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 44px;
  margin: 0;
  padding: 0 var(--e-2);
  border: 1px solid color-mix(in srgb, var(--glace) 35%, transparent);
  border-radius: var(--rayon-pilule);
  background: rgba(20, 56, 79, calc(0.25 + var(--nuit-froid) * 0.45));
  color: var(--glace-clair);
  font: inherit;
  font-size: var(--t-1);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.bandeau__nuit:hover, .bandeau__nuit:focus-visible { border-color: var(--glace); }
.bandeau__nuit-glace { color: var(--glace); }
.bandeau__nuit-horde { color: var(--perte); }
.bandeau__nuit-horde:empty { display: none; }
.bandeau__nuit.est-urgente { animation: nuit-pulse 2.4s ease-in-out infinite; }
@keyframes nuit-pulse { 50% { border-color: var(--glace); box-shadow: 0 0 0 3px color-mix(in srgb, var(--glace) 18%, transparent); } }
@media (prefers-reduced-motion: reduce) { .bandeau__nuit.est-urgente { animation: none; } }
@media (max-width: 60rem) {
  .bandeau__nuit { min-height: 32px; padding: 0 var(--e-2); font-size: var(--t-1); }
}

/* ── Les deux volets ─────────────────────────────────────────────────────── */

.volet {
  position: absolute;
  top: calc(var(--marge-haut) + var(--barre-haut) + 0.6rem);
  /* Plus étroits sur grand écran : la carte reprend la place. */
  width: min(19rem, 22vw);
  max-height: calc(100dvh - var(--marge-haut) - var(--marge-bas) - var(--barre-haut) - var(--barre-bas) - 1.8rem);
  display: flex;
  flex-direction: column;
  background: var(--verre);
  border: 1px solid var(--verre-bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-3);
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.volet--gauche { left: calc(var(--marge-gauche) + 0.7rem); }
.volet--droite { right: calc(var(--marge-droite) + 0.7rem); }

html[data-vue="jeu"] .volet__poignee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  width: 100%;
  min-height: 46px;
  padding: var(--e-2) var(--e-3);
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--echelon-5) 18%, transparent);
  text-align: left;
}
.volet__titre {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--or-sourd);
}
.volet__compte {
  min-width: 1.35rem;
  padding: 0.05rem var(--e-1);
  margin-left: auto;
  border-radius: var(--rayon-pilule);
  background: color-mix(in srgb, var(--cire) 85%, transparent);
  color: var(--parchemin-clair);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.volet__poignee[aria-expanded="true"] .volet__compte { display: none; }

.volet__chevron {
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid var(--texte-pale);
  border-bottom: 1.5px solid var(--texte-pale);
  transform: rotate(-135deg);
  transition: transform 160ms ease;
}
.volet__poignee[aria-expanded="false"] .volet__chevron { transform: rotate(45deg); }
.volet__poignee[aria-expanded="false"] + .volet__corps { display: none; }

.volet__corps {
  padding: var(--e-2) var(--e-3) var(--e-3);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.volet__note {
  margin: 0 0 var(--e-2);
  font-family: var(--police-corps);
  font-style: italic;
  font-size: var(--t-3);
  color: var(--texte-pale);
}
.volet__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }

/* Une priorité, en version courte : le titre, la phrase, et où aller. */
.volet .priorite {
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr);
  gap: var(--e-2);
  padding: var(--e-2) var(--e-2);
  background: color-mix(in srgb, var(--pierre-3) 72%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--echelon-5) 35%, transparent);
}
.volet .priorite--urgent { border-left-color: var(--cire); }
.volet .priorite__titre { display: block; font-size: var(--t-3); color: var(--parchemin); }
.volet .priorite__dit { display: block; font-size: var(--t-2); color: var(--texte-pale); line-height: 1.35; }
.volet .priorite__ouvrir {
  margin-top: var(--e-1);
  min-height: 32px;
  padding: var(--e-1) var(--e-3);
  background: none;
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.volet .priorite__ouvrir:hover { color: var(--or); border-color: var(--or-sourd); }

.volet__liste--nouvelles li {
  display: grid;
  gap: var(--e-0);
  padding: var(--e-1) 0 var(--e-2);
  border-bottom: 1px dotted color-mix(in srgb, var(--fer) 22%, transparent);
  font-size: var(--t-3);
  line-height: 1.35;
}
.volet__liste--nouvelles li:last-child { border-bottom: 0; }
.volet__liste--nouvelles .jour {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-pale);
}
.volet__vide {
  margin: 0;
  font-family: var(--police-corps);
  font-style: italic;
  color: var(--texte-pale);
}

.volet .carte__legende { margin-top: var(--e-2); }

/* ── La barre des cinq entrées ───────────────────────────────────────────── */

.barre {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  display: flex;
  justify-content: center;
  gap: var(--e-0);
  padding: 0.3rem calc(var(--marge-droite) + 0.4rem) calc(var(--marge-bas) + 0.3rem) calc(var(--marge-gauche) + 0.4rem);
  /* La barre se fond dans la carte au lieu de lui prendre une bande pleine.
     Le propriétaire, le 8 septembre : « je trouve la map beaucoup trop petite,
     je veux qu'elle prenne tout l'écran, regarde l'espace qu'on perd ». */
  background: linear-gradient(0deg, color-mix(in srgb, var(--pierre-0) 96%, transparent) 40%, color-mix(in srgb, var(--pierre-1) 66%, transparent) 78%, transparent);
  border-top: 0;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(0deg, var(--pierre-0) 62%, color-mix(in srgb, var(--pierre-0) 55%, transparent) 88%, transparent);
  mask-image: linear-gradient(0deg, var(--pierre-0) 62%, color-mix(in srgb, var(--pierre-0) 55%, transparent) 88%, transparent);
}
/* La même chose, assez précise pour passer devant la parure de l'écran carte,
   qui repeint la barre en bleu plein. Le propriétaire veut voir la carte
   dessous. */
html[data-vue="jeu"] #jeu .barre.barre {
  background: linear-gradient(0deg, color-mix(in srgb, var(--cuir) 96%, transparent) 44%, color-mix(in srgb, var(--cuir) 60%, transparent) 80%, transparent);
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--or) 22%, transparent);
  box-shadow: none;
}
html[data-vue="jeu"] #jeu .volet.volet {
  background: linear-gradient(155deg, color-mix(in srgb, var(--cuir) 82%, transparent), color-mix(in srgb, var(--pierre-4) 86%, transparent));
}

/* La carte prend tout l'écran. Le propriétaire, le 8 septembre : « je trouve
   la map beaucoup trop petite, je veux qu'elle prenne tout l'écran, regarde
   l'espace qu'on perd ». La toile fait déjà cent pour cent de la fenêtre :
   ce sont les bandeaux posés dessus qui la mangeaient. Le bandeau du haut
   était une plaque noire opaque de quatre centimètres et demi ; il se fond
   maintenant dans la carte comme la barre du bas. */
html[data-vue="jeu"] #jeu .bandeau.bandeau {
  min-height: 3.3rem;
  padding-block: var(--e-1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 94%, transparent) 40%, color-mix(in srgb, var(--cuir) 58%, transparent) 78%, transparent);
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--or) 20%, transparent);
  border-radius: 0;
  box-shadow: none;
}

/* Le bouton « plein écran » retire tout ce qui est posé sur la carte. Un
   deuxième appui les ramène. Les outils de la carte restent : sans eux, on ne
   peut plus revenir. */
html[data-plein-ecran="1"] .hud > *:not(.monde__outils),
html[data-plein-ecran="1"] .volet,
html[data-plein-ecran="1"] .barre,
html[data-plein-ecran="1"] .carte-autour,
html[data-plein-ecran="1"] .carte-nouvelles {
  display: none !important;
}
html[data-plein-ecran="1"] .monde__outils { bottom: calc(var(--marge-bas) + 0.7rem); }

.barre__entree {
  position: relative;
  flex: 0 1 5.6rem;
  min-width: 3.6rem;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-0);
  padding: var(--e-1) var(--e-0);
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  color: var(--texte-pale);
}
.barre__entree:hover { color: var(--or); }
.barre__entree.est-actif { color: var(--or); border-top-color: var(--or); }

.barre__icone {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Les medaillons tires de la planche des menus : l'anneau d'or est dans
   l'image. Un bouton choisi s'eclaire d'un second anneau. */
img.barre__icone {
  border-radius: var(--rayon-rond);
  object-fit: cover;
  opacity: 0.82;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.barre__entree.est-actif img.barre__icone,
.barre__entree:hover img.barre__icone { opacity: 1; box-shadow: 0 0 0 1px var(--or), 0 0 8px color-mix(in srgb, var(--or) 35%, transparent); }
.barre__entree--monde .barre__icone { width: 30px; height: 30px; }
.onglet__icone {
  width: 26px;
  height: 26px;
  flex: none;
  margin-right: var(--e-2);
  border-radius: var(--rayon-rond);
  object-fit: cover;
  opacity: 0.85;
}
.onglet.est-actif .onglet__icone,
.onglet:hover .onglet__icone { opacity: 1; box-shadow: 0 0 0 1px var(--or); }

.barre__mot {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.barre__point {
  position: absolute;
  top: 0.35rem;
  right: 0.9rem;
  width: 7px;
  height: 7px;
  border-radius: var(--rayon-rond);
  background: var(--cire);
  box-shadow: var(--ombre-1);
}

/* ── Le tiroir « Plus » ──────────────────────────────────────────────────── */

.tiroir {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tiroir__voile {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--pierre-0) 62%, transparent);
  border: 0;
  padding: 0;
}
.tiroir__feuille {
  position: relative;
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border-top: 1px solid var(--verre-bord);
  padding: 0.5rem calc(var(--marge-gauche) + 0.7rem) calc(var(--marge-bas) + 0.8rem) calc(var(--marge-droite) + 0.7rem);
  max-height: 70dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tiroir__poignee {
  width: 2.6rem;
  height: 4px;
  margin: var(--e-0) auto var(--e-2);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--texte) 35%, transparent);
}
.tiroir__titre {
  margin: 0 0 var(--e-2);
  font-family: var(--police-titre);
  font-size: var(--t-1);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or-sourd);
}
html[data-vue="jeu"] .tiroir nav.onglets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--e-1);
  overflow: visible;
  flex-wrap: wrap;
  justify-content: stretch;
  padding: 0;
  background: none;
  border: 0;
  max-width: 60rem;
  margin: 0 auto;
}
html[data-vue="jeu"] .tiroir .onglet {
  min-height: 48px;
  justify-content: flex-start;
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-1);
  letter-spacing: 0.1em;
  border: 1px solid color-mix(in srgb, var(--fer) 20%, transparent);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--pierre-3) 70%, transparent);
  white-space: normal;
  text-align: left;
}
html[data-vue="jeu"] .tiroir .onglet.est-actif {
  border-color: var(--or-sourd);
  color: var(--or);
}

/* ── Les écrans, ouverts par-dessus le monde ─────────────────────────────── */

/* Un ecran ouvert commence SOUS le bandeau et s'arrete AU-DESSUS de la barre.
   Il etait etale sur tout l'ecran, et son contenu defilait derriere les deux :
   depuis qu'elles sont opaques, le titre de chaque page passait dessous et se
   faisait manger. Borner l'ecran regle toutes les pages d'un coup. */
html[data-vue="jeu"] .page {
  position: fixed;
  top: calc(var(--marge-haut) + var(--barre-haut) + 0.3rem);
  right: 0;
  bottom: calc(var(--marge-bas) + var(--barre-bas));
  left: 0;
  z-index: 40;
  max-width: none;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Un ecran est une page, pas une fenetre posee sur la carte. Le voile
     laissait voir le monde derriere : on croyait lire une bulle flottante.
     Le fond est plein, et l'ecran occupe tout ce qui n'est pas les barres. */
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--pierre-4) 55%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--pierre-2) 0%, var(--pierre-1) 55%, var(--pierre-0) 100%);
  padding:
    0.9rem
    calc(var(--marge-droite) + var(--gouttiere))
    1.2rem
    calc(var(--marge-gauche) + var(--gouttiere));
}
html[data-vue="jeu"] .page > * { max-width: 90rem; margin-inline: auto; }

html[data-vue="jeu"] #jeu #cour.page--cour {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: auto;
}
html[data-vue="jeu"] #jeu #cour.page--cour > * { width: 100%; max-width: 104rem; }

/* Les volets et la barre se retirent du chemin quand un écran est ouvert :
   deux couches de commandes en même temps, c'est une de trop. */
html[data-page-ouverte] .volet { display: none; }
html[data-page-ouverte] .monde__outils { display: none; }
/* Les lieux d'une cité visitée sur la carte passaient entre la page et la barre du bas (Classements ouvert depuis
   Winterfell, audit du 8/10/2026). */
html[data-page-ouverte]:not([data-page-ouverte="visite"]) #monde .cite-panorama__lieux { visibility: hidden; }

/* ── La feuille du bas ───────────────────────────────────────────────────── */

/* La feuille passe AU-DESSUS des volets : ce que le joueur vient de toucher
   prime sur ce qui l'attendait. Elle reste sous la barre, qui permet d'en
   sortir. Sur grand écran elle ne prend pas toute la largeur : une carte, pas
   un tiroir de cuisine. */
.feuillet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--marge-haut) - var(--barre-haut) - 1rem);
  background: linear-gradient(180deg, var(--pierre-3), var(--pierre-1));
  border-top: 1px solid var(--verre-bord);
  box-shadow: 0 -14px 40px color-mix(in srgb, var(--pierre-0) 55%, transparent);
  padding-bottom: calc(var(--marge-bas) + var(--barre-bas));
  transition: height 180ms ease;
}
/* Trois hauteurs : la poignée seule, la moitié de l'écran, l'écran entier. */
.feuillet[data-hauteur="repliee"] .feuillet__corps { max-height: 0; padding-block: 0; overflow: hidden; }
.feuillet[data-hauteur="demi"] .feuillet__corps { max-height: 38dvh; }
.feuillet[data-hauteur="pleine"] .feuillet__corps { max-height: calc(100dvh - var(--marge-haut) - var(--barre-haut) - var(--barre-bas) - 6rem); }
/* Sur un écran court, la mi-hauteur laisse encore la moitié du monde visible. */
@media (max-height: 700px) {
  .feuillet[data-hauteur="demi"] .feuillet__corps { max-height: 27dvh; }
}

/* La poignée se tire : elle fait 44 px de haut pour se prendre au doigt. */
.feuillet__poignee {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  padding: var(--e-2) 0 var(--e-1);
  background: none;
  border: 0;
  touch-action: none;
  cursor: grab;
}
.feuillet__poignee span {
  display: block;
  width: 2.6rem;
  height: 4px;
  margin: 0 auto;
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--texte) 40%, transparent);
}

/* L'en-tête garde sa hauteur, le corps défile : au téléphone couché, la feuille d'un camp, de hauteur fixe, écrasait
   l'en-tête à 48 pixels et son titre sur deux lignes passait sur la première ligne du corps (16/10/2026). */
.feuillet__entete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 calc(var(--marge-droite) + 0.85rem) 0.4rem calc(var(--marge-gauche) + 0.85rem);
  /* L'en-tête se tire aussi : il ne sélectionne pas son texte en glissant. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Les gestes d'une feuille, sur une ligne, chacun sous le doigt. */
.feuillet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-3);
}
.feuillet__actions .carte-region__aller { margin-top: 0; }
.feuillet__actions .carte-region__aller:disabled { opacity: 0.55; cursor: default; }
.feuillet__titre {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--police-titre);
  font-size: var(--t-4);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--parchemin);
}
.feuillet__fermer {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--cuir-clair);
  border-radius: var(--rayon);
  color: var(--texte-pale);
  font-size: var(--t-5);
  line-height: 1;
}
.feuillet__fermer:hover { color: var(--or); border-color: var(--or-sourd); }

.feuillet__corps {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.2rem calc(var(--marge-droite) + 0.85rem) 0.9rem calc(var(--marge-gauche) + 0.85rem);
}


/* ── Les bandeaux d'état, désormais flottants ────────────────────────────── */

html[data-vue="jeu"] .etat-reseau,
html[data-vue="jeu"] .retour-action {
  position: fixed;
  left: 50%;
  bottom: calc(var(--marge-bas) + var(--barre-bas) + 0.6rem);
  transform: translateX(-50%);
  z-index: 70;
  max-width: min(34rem, calc(100vw - 2rem));
  margin: 0;
  text-align: center;
  /* Un message d'état se lit, il ne se touche pas : il ne doit jamais
     prendre le doigt à la place de ce qu'il recouvre. */
  pointer-events: none;
}
/* 23/09/2026 : le fond de quetes.css laissait passer 70 % du texte qu'il
   couvrait, et « Tenue changée » se lisait par-dessus un bouton. Le fond est
   plein, sur la carte comme sur un écran. */
html[data-vue="jeu"] .retour-action {
  /* Posé à left: 50 %, il ne prenait que la moitié de l'écran et coupait « +1 renom » en deux lignes au téléphone
     (Winterfell, 16/10/2026) : sa largeur suit son texte, comme le bandeau de coupure plus bas. */
  width: max-content;
  background: var(--pierre-4);
  box-shadow: var(--ombre-2);
  /* Sur la carte, le rappel de compte tient déjà le bas de l'écran : le retour
     se pose au-dessus de lui (--retour-leve, mesuré par guide.js). */
  bottom: calc(var(--marge-bas) + var(--barre-bas) + 0.6rem + var(--retour-leve, 0px));
}
/* 24/09/2026 : le bandeau de coupure gardait le fond de role.css, à 25 %
   d'opacité, et se lisait mêlé aux boutons des lieux de la visite. Même fond
   plein que le retour ; la connexion revenue prend une bordure verte. Posé à
   left: 50 %, il ne prenait que la moitié de l'écran au téléphone : sa
   largeur suit son texte, bornée par le max-width commun. */
html[data-vue="jeu"] .etat-reseau {
  width: max-content;
  background: var(--pierre-4);
  box-shadow: var(--ombre-2);
  bottom: calc(var(--marge-bas) + var(--barre-bas) + 0.6rem + var(--retour-leve, 0px));
}
html[data-vue="jeu"] .etat-reseau[data-etat="revenue"] {
  border-color: var(--gain);
  color: var(--parchemin);
}
/* Sur un écran ouvert, le retour devient une bande pleine posée sur la barre,
   et l'écran remonte de sa hauteur (--bande-retour, mesurée par guide.js) :
   aucune ligne de la page ne passe dessous. La visite garde sa scène entière. */
html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]) .retour-action {
  width: auto;
  left: 0;
  right: 0;
  bottom: calc(var(--marge-bas) + var(--barre-bas));
  transform: none;
  max-width: none;
  border-width: 1px 0 0;
  box-shadow: none;
}
html[data-vue="jeu"][data-page-ouverte]:not([data-page-ouverte="visite"]):has(#retour-action:not([hidden])) .page {
  bottom: calc(var(--marge-bas) + var(--barre-bas) + var(--bande-retour, 3rem));
}
/* Dans la visite d'une cité, le bas de l'écran tient les boutons des lieux et le panneau du lieu ses choix : le retour
   chiffré se pose sous la plaque des ressources, sur le nom de la cité, et part en moins de cinq secondes (guide.js).
   Relevé du 30/09/2026 : « C'est fait » couvrait les lieux de Castral Roc et d'Accalmie. Posé sur la plaque, il cachait
   les réserves au moment même où elles changeaient (16/10/2026). */
/* L'identifiant doublé passe devant la bande du téléphone posée sous une feuille (:has(#feuille), plus bas). */
/* Sur le nom de la cité, il cachait « ← La carte » : il descend sous la rangée des commandes de la vue
   (--retour-sous-la-cite, mesuré par guide.js), 16/10/2026. */
html[data-vue="jeu"] #retour-action#retour-action[data-lieu="cite"] {
  top: var(--retour-sous-la-cite, calc(var(--marge-haut) + var(--barre-haut) + 0.2rem));
  bottom: auto;
  /* Plus étroit, il ne mord plus sur le panneau du lieu, à gauche. */
  max-width: min(30rem, calc(100vw - 2rem));
}
/* Au téléphone, la feuille d'un lieu tient le bas de l'écran : le retour y
   devient la même bande, et la feuille se rallonge d'autant par le bas. */
@media (max-width: 45.99rem) {
  html[data-vue="jeu"]:not([data-page-ouverte]):has(#feuille:not([hidden])) .retour-action {
    width: auto;
    left: 0;
    right: 0;
    bottom: calc(var(--marge-bas) + var(--barre-bas));
    transform: none;
    max-width: none;
    border-width: 1px 0 0;
    box-shadow: none;
  }
  html[data-vue="jeu"]:not([data-page-ouverte]):has(#feuille:not([hidden])):has(#retour-action:not([hidden])) .feuillet {
    padding-bottom: calc(var(--marge-bas) + var(--barre-bas) + var(--bande-retour, 3rem));
  }
  /* Les commandes de la feuille sont en bas : un refus posé au ras de la barre couvrait « Lancer l'assaut » et
     « Renoncer » six secondes (relevé du 29/09/2026 par tools/_sortie-lot-9.mjs). Il se lit en haut de la carte. */
  html[data-vue="jeu"]:not([data-page-ouverte]):has(#feuille:not([hidden])) .refus--flottant {
    top: calc(var(--marge-haut) + var(--barre-haut) + var(--e-2));
    bottom: auto;
  }
}
/* Le rappel de compte, tout en haut, au-dessus du bandeau. Posé au ras de la
   barre du bas (23/09/2026), il couvrait au bureau les lieux et les rubriques
   de la visite, sept boutons, et prenait au téléphone 110 px de la carte, les
   nouvelles remontées de 8rem. En haut, il prend sa hauteur au jeu au lieu de
   la prendre à la vue (--rappel-haut) : rien ne passe dessous. Il reste sur
   les pages, qu'il ne couvre plus. */
html[data-vue="jeu"] .rappel-compte {
  position: fixed;
  top: env(safe-area-inset-top);
  bottom: auto;
  left: calc(var(--marge-gauche) + 0.6rem);
  right: calc(var(--marge-droite) + 0.6rem);
  transform: none;
  z-index: 28;
  width: auto;
  flex-wrap: nowrap;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-1) var(--e-3);
  border-top: 0;
  border-bottom: 1px solid var(--cire);
  border-radius: 0 0 0.2rem 0.2rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cire-fonce) 60%, var(--pierre-1)), color-mix(in srgb, var(--pierre-2) 99%, transparent));
  box-shadow: none;
  font-size: var(--t-3);
}
html[data-vue="jeu"][data-page-ouverte] .rappel-compte:not([hidden]) { display: flex; }
html[data-vue="jeu"] .rappel-compte__texte { min-width: 0; max-width: none; line-height: 1.25; }
html[data-vue="jeu"] .rappel-compte__court { display: none; }
html[data-vue="jeu"] .rappel-compte__actions { flex: 0 0 auto; gap: var(--e-2); }
html[data-vue="jeu"] .rappel-compte .sceau { min-height: 36px; padding: var(--e-1) var(--e-4); font-size: var(--t-2); }
html[data-vue="jeu"] .rappel-compte__plus-tard { min-height: 36px; padding: var(--e-1) var(--e-3); font-size: var(--t-2); }

/* ── Les niveaux d'affichage (spec §17.1) ─────────────────────────────────
   Un bloc replié ne garde que sa ligne de rappel, qui le rouvre. */
/* Lot 15 : le mestre conseille, les trois chiffres du Simple, les cartouches. */
.mestre-conseil { margin: var(--e-2) 0 var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid var(--or-sourd); border-left-width: 4px; border-radius: var(--rayon); background: color-mix(in srgb, var(--pierre-1) 88%, var(--or) 12%); }
.mestre-conseil.est-urgent { border-left-color: var(--perte-fond); }
.mestre-conseil__titre { margin: 0 0 var(--e-1); font-family: var(--police-titre); font-size: var(--t-2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--or); }
.mestre-conseil__dit { margin: 0; font-family: var(--police-corps); font-size: var(--t-4); line-height: 1.4; }
.mestre-conseil__actions { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; margin-top: var(--e-2); }
.mestre-conseil__aller { min-height: 44px; padding: var(--e-2) var(--e-4); }
.mestre-conseil__taire { min-height: 44px; padding: var(--e-2) var(--e-2); font-size: var(--t-2); opacity: 0.8; }
.simple-resume { display: none; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin: var(--e-2) 0 var(--e-3); }
.simple-resume > div { padding: var(--e-2) var(--e-2); border: 1px solid var(--or-sourd); border-radius: var(--rayon); text-align: center; }
.simple-resume dt { font-size: var(--t-2); letter-spacing: 0.05em; text-transform: uppercase; color: var(--texte); }
.simple-resume dd { margin: var(--e-0) 0 0; font-family: var(--police-titre); font-size: var(--t-6); color: var(--or); }
html[data-affichage="simple"] .simple-resume { display: grid; }
.cartouche { margin: var(--e-2) 0 var(--e-4); padding: var(--e-3) var(--e-4); border: 1px solid var(--or-sourd); border-radius: var(--rayon); background: color-mix(in srgb, var(--pierre-1) 90%, var(--or) 10%); }
.cartouche__titre { display: block; margin-bottom: var(--e-1); font-family: var(--police-titre); color: var(--or); }
.cartouche__dit { margin: 0 0 var(--e-2); line-height: 1.4; }
.cartouche__compris { min-height: 44px; min-width: 44px; padding: var(--e-1) var(--e-4); }
.couche--repliee > :not(.couche__stub) { display: none !important; }
.couche__stub {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: var(--e-2) 0;
  padding: var(--e-2) var(--e-3);
  text-align: left;
  text-decoration: none;
  font: italic var(--t-3) var(--police-corps);
  color: var(--texte-pale);
  background: color-mix(in srgb, var(--parchemin-clair) 3%, transparent);
  border: 1px dashed color-mix(in srgb, var(--echelon-5) 45%, transparent);
  border-radius: var(--rayon);
  cursor: pointer;
}
.couche__stub:hover, .couche__stub:focus-visible { color: var(--or); border-color: var(--or-sourd); }

/* ── Le téléphone en portrait ────────────────────────────────────────────── */

@media (max-width: 60rem) {
  :root { --barre-haut: 4.5rem; }

  /* Le bandeau tient sur une ligne : le logo part, le nom se coupe s'il le
     faut, mais l'âge reste — c'est la seule ligne qui dit que le personnage
     vieillit et mourra. */
  html[data-vue="jeu"] .hud .bandeau {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-0) var(--e-2);
    padding: var(--e-1) var(--e-2);
  }
  html[data-vue="jeu"] .hud .bandeau {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 95%, transparent) 0%, color-mix(in srgb, var(--pierre-0) 86%, transparent) 62%, color-mix(in srgb, var(--pierre-0) 20%, transparent) 100%);
  }
  html[data-vue="jeu"] .bandeau__logo { display: none; }
  html[data-vue="jeu"] .bandeau__nom { grid-row: 1; grid-column: 1; font-size: var(--t-4); }

  /* 🔴 Le titre coupe sa FIN, et sa fin est la pastille de niveau.
     `.bandeau__nom` est en `overflow: hidden` avec le nom du personnage puis la
     pastille « NIVEAU n » et sa barre d'expérience sur la même ligne. Mesuré le
     15/09/2026 sur un écran de 320 px : la colonne du titre fait 154 px, le nom
     en prend 93, et « NIVEAU 1 » sortait à moitié de la boîte avant d'être
     rogné. Le joueur voyait son nom entier et un niveau tronqué.

     Ce qui varie, c'est le nom. Ce qui est court et fixe, c'est le niveau. Donc
     le nom se met en retrait et la pastille garde sa place entière. */
  html[data-vue="jeu"] .bandeau__nom { display: flex; align-items: baseline; gap: var(--e-2); min-width: 0; }
  html[data-vue="jeu"] #nom-affiche { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-vue="jeu"] .bandeau__niveau { flex: 0 0 auto; margin-left: 0; }
  html[data-vue="jeu"] .bandeau__rang {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: var(--t-1);
  }
  html[data-vue="jeu"] .bandeau__jour { grid-row: 2; grid-column: 1 / -1; font-size: var(--t-1); }
  html[data-vue="jeu"] #jeu .bandeau__compte { padding: var(--e-0) var(--e-2); font-size: var(--t-1); }
  /* L'état du compte tient déjà dans le rappel du haut : deux fois la même
     phrase en haut d'un écran de 390 px, c'est une de trop. */
  html[data-vue="jeu"] #jeu .bandeau__compte-etat { display: none; }

  /* Deux volets déployés mangeraient la carte. Repliés ils ne sont plus que
     leur poignée : deux pastilles posées sur le monde, l'une en haut, l'autre
     juste au-dessus de la barre. */
  .volet {
    position: absolute;
    left: calc(var(--marge-gauche) + 0.5rem);
    right: calc(var(--marge-droite) + 0.5rem);
    width: auto;
    max-height: 46dvh;
  }
  .volet--gauche { top: calc(var(--marge-haut) + var(--barre-haut) + 1.1rem); }
  .volet--droite { top: auto; bottom: calc(var(--marge-bas) + var(--barre-bas) + 0.5rem); }
  .volet--droite .volet__corps { max-height: 34dvh; }
  /* Les boutons d'approche quittent le bas de l'écran, où la pastille des
     nouvelles et le rappel de compte les recouvraient : à mi-hauteur du
     bord droit, le pouce les trouve et rien ne les cache. */
  .monde__outils { top: 50%; bottom: auto; transform: translateY(-50%); }
  .volet:has(.volet__poignee[aria-expanded="false"]) {
    width: fit-content;
    left: auto;
    right: auto;
    background: color-mix(in srgb, var(--pierre-1) 90%, transparent);
  }
  .volet--gauche:has(.volet__poignee[aria-expanded="false"]) { left: calc(var(--marge-gauche) + 0.5rem); }
  .volet--droite:has(.volet__poignee[aria-expanded="false"]) { right: calc(var(--marge-droite) + 0.5rem); }
  .volet__poignee[aria-expanded="false"] { border-bottom: 0; padding: var(--e-1) var(--e-3); min-height: 44px; }
  .volet__titre { font-size: var(--t-1); letter-spacing: 0.12em; }

  .barre__entree { flex: 1 1 0; }
  .barre__mot { font-size: var(--t-1); letter-spacing: 0.05em; }

  html[data-vue="jeu"] .page {
    padding-inline: calc(var(--marge-gauche) + 0.7rem) calc(var(--marge-droite) + 0.7rem);
  }

  /* Au téléphone, le rappel tient sur une rangée : la phrase courte à gauche,
     sur deux ou trois lignes, les deux boutons à droite, au doigt (44 px). */
  html[data-vue="jeu"] .rappel-compte {
    left: calc(var(--marge-gauche) + 0.3rem);
    right: calc(var(--marge-droite) + 0.3rem);
    gap: var(--e-2);
    padding: var(--e-1) var(--e-2);
    font-size: var(--t-2);
  }
  html[data-vue="jeu"] .rappel-compte__long { display: none; }
  html[data-vue="jeu"] .rappel-compte__court { display: inline; }
  html[data-vue="jeu"] .rappel-compte .sceau { min-height: 44px; padding: var(--e-1) var(--e-2); font-size: var(--t-1); letter-spacing: 0.06em; }
  html[data-vue="jeu"] .rappel-compte__plus-tard { min-height: 44px; padding: var(--e-1) var(--e-2); font-size: var(--t-1); }
}

@media (prefers-reduced-motion: reduce) {
  .feuillet, .volet__chevron { transition: none; }
}
html.mouvement-reduit .feuillet,
html.mouvement-reduit .volet__chevron { transition: none; }


/* ── Le telephone tenu droit ──────────────────────────────────────────────
 *
 * La carte de Westeros fait 1600 pixels de large ; sur 390, elle n'est plus
 * lisible. Plutot que de la retailler, le jeu demande l'ecran a l'horizontale.
 *
 * Tout est en CSS : `matchMedia` lu une fois au chargement fige la page quand
 * l'ecran tourne, et un script qui arrive apres le premier rendu laisse voir
 * une seconde de jeu illisible. La condition `pointer: coarse` epargne un
 * ecran de bureau etroit, ou l'on ne tourne rien.
 */
/* 🔴 LE VERROU EST LEVÉ le 15/09/2026. Le bloc ci-dessous ne se pose plus que
 * si `<html>` porte `data-verrou-portrait`, et rien ne le pose. Il reste écrit
 * parce que sa mise en page sert si le verrou doit revenir.
 *
 * Sa raison d'origine tenait à la carte de Westeros. Deux choses ont changé.
 *
 *   · Le jeu n'ouvre plus sur Westeros mais sur la cité du joueur
 *     (`PASSATION-CLAUDE-CODE.md`, 12/09/2026), et la carte du monde est
 *     devenue une carte en relief qu'on déplace au doigt.
 *   · La mise en page portrait tient. Mesurée le 15/09/2026 par
 *     `node tools/_ecran-du-telephone.mjs --sans-verrou` : les quatre tailles
 *     debout passent, rien n'est coupé, rien ne défile, et la vue de la cité y
 *     fait 284 × 216 en 320, 339 × 460 en 375, 354 × 492 en 390 et 394 × 559 en
 *     430. Le même téléphone couché n'en montre que 96 à 206 px de haut.
 *
 * Et le verrou coûtait plus qu'il ne rendait : posé `inset: 0` en `z-index:
 * 2000`, il couvrait AUSSI le formulaire de création, donc un joueur qui
 * ouvrait le jeu téléphone droit ne pouvait pas créer son personnage. */
.tourner { display: none; }

@media (orientation: portrait) and (max-width: 56rem) and (pointer: coarse) {
  html[data-verrou-portrait] .tourner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: var(--e-6) var(--e-5);
    background: radial-gradient(120% 90% at 50% 20%, var(--pierre-3), var(--pierre-0) 70%);
    text-align: center;
  }
  .tourner__corps { max-width: 22rem; }
  .tourner__telephone {
    width: 4.4rem;
    height: 6.6rem;
    margin: 0 auto var(--e-5);
    fill: none;
    stroke: var(--or, var(--echelon-5));
    stroke-width: 3;
    stroke-linecap: round;
    animation: tourner-le-telephone 2.6s ease-in-out infinite;
  }
  .tourner__titre {
    margin: 0 0 var(--e-3);
    color: var(--or, var(--echelon-5));
    font: 700 var(--t-6)/1.2 var(--police-titre);
    letter-spacing: .04em;
  }
  .tourner__dit {
    margin: 0;
    color: var(--texte-pale, var(--texte));
    font-size: var(--t-3);
    line-height: 1.5;
  }
  /* Ce qui est dessous ne defile pas et ne se lit pas par la voix. Cette
     ligne suit le verrou : sans elle, le jeu tenu droit ne defilerait plus,
     et le formulaire de creation est plus haut qu'un ecran de telephone. */
  html[data-verrou-portrait] body { overflow: hidden; }
}

@keyframes tourner-le-telephone {
  0%, 34% { transform: rotate(0deg); }
  56%, 84% { transform: rotate(-90deg); }
  100% { transform: rotate(0deg); }
}

/* Un joueur qui a demande moins de mouvement voit le telephone immobile. */
@media (prefers-reduced-motion: reduce) {
  .tourner__telephone { animation: none; transform: rotate(-90deg); }
}


/* ── Le telephone tenu a l'horizontale ────────────────────────────────────
 *
 * C'est le seul sens ou le jeu se joue sur telephone. La largeur est bonne,
 * mais la hauteur tombe a 390 pixels : le bandeau du haut prenait deux lignes
 * et le volet « A traiter » lui montait dessus.
 *
 * On se cale sur la HAUTEUR, pas sur la largeur : un telephone couche fait
 * 844 pixels de large, autant qu'un petit portable, et ne doit pas hériter de
 * sa mise en page haute.
 */
@media (max-height: 30rem) and (pointer: coarse) {
  :root { --barre-haut: 3rem; --barre-bas: 3.4rem; }

  /* Tout sur une ligne : le nom, le rang, et l'age qui dit que le personnage
     vieillit. Rien ne passe a la ligne. */
  html[data-vue="jeu"] .hud .bandeau {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0 var(--e-2);
    padding: var(--e-0) var(--e-2);
  }
  html[data-vue="jeu"] .bandeau__nom { font-size: var(--t-3); }
  html[data-vue="jeu"] .bandeau__jour {
    grid-row: 1;
    grid-column: 2;
    font-size: var(--t-1);
    white-space: nowrap;
  }
  html[data-vue="jeu"] .bandeau__rang { grid-column: 3; font-size: var(--t-1); }
  /* Le bouton de connexion reste : sans lui, un joueur qui a repousse le
     rappel du bas n'a plus de chemin pour lier sa partie. Il retrecit. */
  html[data-vue="jeu"] #jeu .bandeau__compte { padding: var(--e-0) var(--e-2); font-size: var(--t-1); }
  html[data-vue="jeu"] #jeu .bandeau__compte-etat { display: none; }
  .bandeau__nuit { min-height: 26px; font-size: var(--t-1); }

  /* 🔴 Les jetons de reserves gardaient leur taille de BUREAU.
   *
   * Le bloc qui les resserre est conditionne a `max-width: 42rem`, soit 672 px.
   * Un telephone couche fait 812 a 932 px de large : il passe au-dessus et
   * herite des jetons pleins, marque de 1,6rem et debit en 0,7rem.
   *
   * Mesure du 15/09/2026 en 812 x 375 : le bandeau prend 104 px sur 375, soit
   * 28 % de l'ecran, dont 60 pour le seul rang de jetons. La vue de la cite
   * n'en gardait que 119. Aux tailles du bloc etroit, le rang tombe a 24 px et
   * la vue remonte a 150.
   *
   * La meme faute que `--vue-h` prise par l'autre bout : un telephone couche
   * est LARGE et COURT, et toute regle calee sur la largeur le rate. */
  html[data-vue="jeu"] #jeu .bandeau__tresor.bandeau__tresor {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  html[data-vue="jeu"] #jeu .tresor.tresor {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    gap: var(--e-1);
    padding: 0.05rem var(--e-1);
  }
  html[data-vue="jeu"] #jeu .tresor__marque.tresor__marque { width: 1.25rem; height: 1.25rem; }
  html[data-vue="jeu"] #jeu .tresor__stock.tresor__stock { font-size: var(--t-2); }
  html[data-vue="jeu"] #jeu .tresor__debit.tresor__debit { font-size: var(--t-1); }

  /* Le volet passe sous le bandeau au lieu de le chevaucher. */
  .volet--gauche { top: calc(var(--marge-haut) + var(--barre-haut) + 0.4rem); }

  /* La barre du bas se resserre : cinq icones sur 390 pixels de haut, ce sont
     les seules qui doivent rester au doigt. */
  .barre__icone { width: 1.5rem; height: 1.5rem; }
  .barre__nom { font-size: var(--t-1); }
}

/* ── La feuille d'un lieu, en colonne a gauche ─────────────────────────────
   Elle s'ouvrait en bas, en travers du monde : le joueur touchait une cite et
   la carte disparaissait derriere un tiroir plein largeur. Des qu'il y a la
   place, elle se range a gauche, comme la fenetre d'un fief dans Bannerlord :
   le monde reste visible a droite, et le regard n'a pas a changer de bord. */
@media (min-width: 46rem) {
  .feuillet {
    left: calc(var(--marge-gauche) + 0.6rem);
    right: auto;
    top: calc(var(--marge-haut) + var(--barre-haut) + 0.7rem);
    bottom: calc(var(--marge-bas) + var(--barre-bas) + 0.7rem);
    width: min(23rem, 34vw);
    max-height: none;
    transform: none;
    padding-bottom: 0;
    border: 1px solid color-mix(in srgb, var(--or-sourd) 30%, transparent);
    border-radius: var(--rayon-case);
    box-shadow: var(--ombre-3), inset 0 1px 0 color-mix(in srgb, var(--or-vif) 10%, transparent);
  }
  .feuillet__poignee { display: none; }
  /* Le cartouche du titre ne s'etire plus jusqu'au bouton de fermeture : sa
     pointe droite y etait coupee. */
  .feuillet .feuillet__titre { flex: 0 1 auto; margin-inline: auto; }
  .feuillet__entete { padding-top: var(--e-2); }
  .feuillet__corps,
  .feuillet[data-hauteur="demi"] .feuillet__corps,
  .feuillet[data-hauteur="pleine"] .feuillet__corps,
  .feuillet[data-hauteur="repliee"] .feuillet__corps {
    flex: 1 1 auto;
    max-height: none;
    padding-block: var(--e-2);
    overflow-y: auto;
  }
  /* Le volet des urgences occupe deja ce bord : la feuille prend sa place le
     temps qu'elle est ouverte, sinon deux colonnes se recouvrent. */
  html[data-feuille-ouverte] .volet--gauche { display: none; }
}

/* ── Le sommaire d'un lieu ─────────────────────────────────────────────────
   La liste des rubriques. On en ouvre une, le titre du panneau devient celui
   de la rubrique, et le chevron de gauche ramene a la liste. */
.sommaire { display: flex; flex-direction: column; gap: var(--e-0); margin: 0; padding: 0; list-style: none; }
.sommaire__item { margin: 0; }
.sommaire__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  width: 100%;
  min-height: 44px;
  padding: var(--e-2) var(--e-3);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 50%, transparent), color-mix(in srgb, var(--pierre-3) 50%, transparent));
  border: 1px solid color-mix(in srgb, var(--or-sourd) 16%, transparent);
  border-radius: var(--rayon-case);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sommaire__lien:hover, .sommaire__lien:focus-visible {
  border-color: color-mix(in srgb, var(--or-sourd) 50%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cuir) 60%, transparent), color-mix(in srgb, var(--pierre-4) 60%, transparent));
  color: var(--or);
}
.sommaire__lien::after { content: "›"; color: color-mix(in srgb, var(--or-sourd) 60%, transparent); font-size: var(--t-5); line-height: 1; }
.sommaire__lien--geste { border-color: color-mix(in srgb, var(--or-sourd) 42%, transparent); color: var(--or); }
.sommaire__lien--geste::after { content: "▸"; }
.sommaire__titre { flex: 1 1 auto; }
.sommaire__note { color: var(--texte-pale); font-size: 0.82em; white-space: nowrap; }

.feuillet__retour {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  background: none;
  border: 1px solid color-mix(in srgb, var(--or-sourd) 28%, transparent);
  border-radius: var(--rayon-case);
  color: var(--or);
  font-size: var(--t-5);
  line-height: 1;
  cursor: pointer;
}
.feuillet__retour:hover, .feuillet__retour:focus-visible { border-color: var(--or); }

/* ── Le telechargement du jeu ──────────────────────────────────────────────
   Propose une fois, avant la partie : soixante-dix-sept megaoctets d'images
   et de modeles pris d'un coup, et plus rien n'attend ensuite. */
/* ── Les onglets d'un ecran ────────────────────────────────────────────────
   Ton domaine empilait sept sections et quatre mille pixels : le joueur
   defilait pour trouver une action. Les sections se rangent en onglets, et
   la barre reste en haut de l'ecran pendant qu'on defile. */
.onglets-page {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  margin: 0 0 var(--e-4);
  padding: var(--e-1) 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-0) 98%, transparent) 76%, transparent);
}
.onglets-page__entree {
  min-height: 40px;
  padding: var(--e-2) var(--e-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pierre-4) 55%, transparent), color-mix(in srgb, var(--pierre-3) 55%, transparent));
  border: 1px solid color-mix(in srgb, var(--or-sourd) 20%, transparent);
  border-radius: var(--rayon-case);
  color: var(--texte-pale);
  font: inherit;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.onglets-page__entree:hover, .onglets-page__entree:focus-visible { border-color: color-mix(in srgb, var(--or-sourd) 55%, transparent); color: var(--or); }
.onglets-page__entree.est-actif {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bois) 75%, transparent), color-mix(in srgb, var(--pierre-4) 75%, transparent));
  border-color: var(--or);
  color: var(--parchemin-clair);
}
@media (max-width: 40rem) {
  .onglets-page { gap: var(--e-1); }
  .onglets-page__entree { flex: 1 1 auto; padding: var(--e-2) var(--e-2); font-size: var(--t-2); }
}

/* Le cartouche d'apprentissage ne prend plus le tiers de l'ecran : son titre,
   sa phrase et son bouton tiennent sur une ligne des qu'il y a la place. */
@media (min-width: 46rem) {
  .cartouche {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-1) var(--e-3);
    margin: var(--e-2) 0 var(--e-3);
    padding: var(--e-2) var(--e-3);
  }
  .cartouche__titre { flex: 0 0 auto; margin: 0; }
  .cartouche__dit { flex: 1 1 16rem; margin: 0; }
  .cartouche button { flex: 0 0 auto; margin-left: auto; }
}

/* Sur un telephone couche, il reste trois cent quatre-vingt-dix pixels de
   haut : le cartouche d'apprentissage ne garde que son titre et son bouton,
   et le retour ne garde que sa fleche. La phrase revient des qu'on tourne. */
@media (max-height: 30rem) {
  .cartouche { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-1) 0 var(--e-2); padding: var(--e-1) var(--e-2); }
  .cartouche__titre { margin: 0; }
  .cartouche__dit { display: none; }
  .cartouche button { margin-left: auto; }
  .onglets-page { margin-bottom: var(--e-2); padding: var(--e-1) 0; }
  .onglets-page__entree { min-height: 34px; padding: var(--e-1) var(--e-2); font-size: var(--t-1); }
}

/* Un ecran bati en grille (le bestiaire, le journal) place ses blocs par zones
   nommees : la barre d'onglets y tombait dans une cellule et se retrouvait au
   milieu de la page. Elle prend toute la largeur, quelle que soit la grille. */
.onglets-page { grid-column: 1 / -1; width: 100%; }

/* ── Le bandeau du haut sur un téléphone ───────────────────────────────────
 *
 * Mesuré le 15/09/2026 par `tools/_ligne-de-flottaison.mjs`. Sur 360 × 640, le
 * bandeau prenait 199 px et la barre du bas 74 : 273 px de fenêtre mangés par
 * ce qui n'est pas le jeu, soit 43 % de la hauteur, quand la skill
 * `jeu-mobile` en donne 25 % pour budget. C'est le cadre de tous les écrans,
 * donc le gain se répercute partout ; la visite d'une cité était seulement le
 * premier endroit où il se voyait, avec 346 px de page pour une vue en relief
 * et deux rangées de commandes.
 *
 * Le coupable est la rangée des réserves. Elle passait à DEUX lignes de
 * jetons, 93 px à elle seule, parce que `carte-ui-senior.css` la remet en
 * `display:flex` par-dessus le `display:none` de `parure.css` sans reprendre
 * la taille des jetons. Un jeton mesurait 46 px de haut pour un médaillon de
 * 2,1rem.
 *
 * Les réserves sont ce que le serveur décide et que l'écran montre : aucune ne
 * disparaît ici, les cinq tiennent sur UN rang. Le médaillon passe de 2,1rem à
 * 1,25rem, le stock de 1,15rem à 0,82rem, le débit de 0,68rem à 0,55rem : cinq
 * jetons de 57 px tiennent dans 360 et de 50 dans 320. `overflow-x` reste en
 * `auto` par sûreté,
 * pour la fortune à cinq chiffres qui déborderait ; tant qu'elle ne déborde
 * pas, rien ne défile, et la règle de la skill sur les signes vitaux tient.
 *
 * Trois rangs restent nécessaires, et le banc dit pourquoi. Le rang du nom
 * porte le bouton de connexion, celui du jour porte le bouton de la Longue
 * Nuit : `quetes.css` leur donne à tous deux 44 px de haut, la cible tactile
 * minimale, avec un sélecteur à sept `:not()` que rien d'ici ne surpasse, et
 * c'est la bonne valeur. Les cinq réserves font 293 px de large et ne tiennent
 * à côté d'aucun des deux. Le bandeau tombe donc de 199 à 121 px, soit
 * 195 px de bandeaux fixes avec la barre du bas au lieu de 273 : 30 % de la
 * hauteur en 360 × 640 au lieu de 43, et 23 % en 390 × 844 au lieu de 32. Les
 * 25 % de la skill demanderaient une barre du bas de 39 px, donc une cible
 * tactile sous 44 ; en 320 × 568 ils en demanderaient 142 pour 195, et il n'y a
 * pas 53 px à prendre sans en supprimer une. Le relevé est dans
 * `tools/_ligne-de-flottaison.mjs`, qui mesure dix tailles.
 */
@media (max-width: 42rem) {
  html[data-vue="jeu"] #jeu .bandeau.bandeau {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.05rem var(--e-2);
    padding: var(--e-0) var(--e-2);
  }
  html[data-vue="jeu"] #jeu .bandeau__tresor.bandeau__tresor {
    grid-row: 3;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    margin: 0;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  html[data-vue="jeu"] #jeu .tresor.tresor {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    gap: var(--e-1);
    padding: 0.05rem var(--e-1);
  }
  html[data-vue="jeu"] #jeu .tresor__marque.tresor__marque { width: 1.25rem; height: 1.25rem; }
  html[data-vue="jeu"] #jeu .tresor__stock.tresor__stock { font-size: var(--t-2); }
  html[data-vue="jeu"] #jeu .tresor__debit.tresor__debit { font-size: var(--t-1); }
}

/* La même faute, à l'autre bout. Sur une fenêtre de 999 px de large, les
   réserves sont posées en absolu au centre du bandeau (`carte-ui-senior.css`)
   sans largeur : elles se calent alors sur la moitié droite de la barre, 487 px,
   et les cinq jetons repassent à deux rangs. Le paquet mesure 121 px de haut
   dans un bandeau qui en fait 72 : il dépasse de 25 px par le haut et de 24 par
   le bas, par-dessus la carte. Mesuré le 15/09/2026 en 999 × 768.

   Les jetons se resserrent jusqu'à 1200 px de large, où la demi-barre en fait
   600 pour 536 de jetons à taille pleine. */
@media (min-width: 60.0625rem) and (max-width: 75rem) {
  html[data-vue="jeu"] #jeu .bandeau__tresor.bandeau__tresor { flex-wrap: nowrap; }
  html[data-vue="jeu"] #jeu .tresor.tresor { padding: var(--e-0) var(--e-1); gap: var(--e-1); }
  html[data-vue="jeu"] #jeu .tresor__marque.tresor__marque { width: 1.6rem; height: 1.6rem; }
  html[data-vue="jeu"] #jeu .tresor__stock.tresor__stock { font-size: var(--t-3); }
}


/* ── Les tres petits telephones ────────────────────────────────────────────
 *
 * La colonne du titre porte trois choses : le nom du personnage, la pastille
 * « NIVEAU n » et sa barre d'experience de 4,5rem, soit 72 px a elle seule.
 *
 * Le compte, mesure le 15/09/2026. La colonne de droite prend 200 px avec
 * « PAYSAN » et « SE CONNECTER ». Il faut 100 px au nom, 62 a la pastille, 72 a
 * la barre et 16 d'ecarts : la fenetre doit faire 468 px pour que tout tienne.
 * En dessous, quelque chose se fait couper. En 320 c'etait le niveau, et en 375
 * c'etait le nom, tombe a « E. » sur ses 10 px restants.
 *
 * La barre part sous 480 px, donc sur tout telephone tenu droit. Le chiffre
 * reste : le niveau se lit dans « NIVEAU 1 », la barre ne dit que la fraction
 * jusqu'au suivant, et la fiche du personnage la porte deja en entier.
 */
@media (max-width: 30rem) {
  .bandeau__xp { display: none; }
  html[data-vue="jeu"] .bandeau__nom { gap: var(--e-2); }
}

/* 🔴 A 320 px, le bouton de compte coute au joueur son propre nom.
 *
 * Mesure du 15/09/2026 : la colonne de droite prend 170 px, dont 110 pour
 * « SE CONNECTER » et 60 pour le rang. Il reste 133 px a gauche, la pastille
 * « NIVEAU 1 » en prend 75, et le nom tombe a 50 px, soit « Ed... ».
 *
 * Le bouton sort du bandeau a cette seule largeur. Il n'etait pas le seul
 * chemin vers le compte : l'ecran Reglages porte l'etat du compte et le bouton
 * de liaison (`index.html`, `#compte-etat`), et le rappel du bas reapparait
 * tant que la partie n'est liee a rien. Le rang reste, parce que le jeu va de
 * paysan a roi et que c'est la ligne qui le dit.
 */
@media (max-width: 23rem) {
  html[data-vue="jeu"] #jeu .bandeau__compte { display: none; }
}


/* ── Le bandeau du téléphone et de la tablette, sur deux rangées ─────────────
 *
 * Mesuré le 22/09/2026 : trois rangées, 103 px en 360 × 640, 123 px en
 * 390 × 844 et 153 px sur une tablette de 820 px. La rangée du milieu ne
 * portait que l'âge et le bouton de la Longue Nuit, et le bouton de connexion
 * gonflait la première à 44 px.
 *
 * Deux rangées maintenant. À gauche, le nom et son niveau, le rang dessous ;
 * à droite, le jour et la Longue Nuit, sur la hauteur des deux ; en bas, les
 * cinq réserves. Au téléphone, l'âge part (le héros ne meurt plus de
 * vieillesse depuis le 19/09/2026, et sa fiche le porte) et le bouton de
 * connexion aussi : Réglages porte la liaison du compte, et le rappel du bas
 * revient tant que la partie n'est liée à rien. Le jour revient, lui : les
 * textes du jeu donnent des échéances en jours.
 *
 * Le téléphone couché garde sa rangée unique (`max-height: 30rem`, plus haut).
 * Ces règles passent devant les anciennes par leur poids, (1,4,1) contre
 * (1,3,1) au plus, pas par leur place dans les feuilles.
 */
@media (max-width: 60rem) and (min-height: 30.0625rem) {
  html[data-vue="jeu"] #jeu .hud .bandeau.bandeau {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas: "nom jour compte" "rang jour compte" "tresor tresor tresor";
    align-items: center;
    gap: 0 var(--e-2);
    height: auto;
    min-height: 0;
    max-height: none;
    padding: var(--e-1) var(--e-2) var(--e-1);
  }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__logo { display: none; }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__nom {
    grid-area: nom;
    align-self: end;
    margin: 0;
    line-height: 1.2;
  }
  /* Le rang et le bouton de compte vivent dans la même boîte : elle s'efface
     pour que chacun prenne sa case, le rang sous le nom, le compte à droite. */
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__rang {
    display: contents;
    font-size: var(--t-1);
  }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__rang > #rang-affiche {
    grid-area: rang;
    align-self: start;
    justify-self: start;
    line-height: 1.35;
    white-space: nowrap;
  }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__rang > .bandeau__compte {
    grid-area: compte;
    justify-self: end;
    margin: 0;
  }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__jour {
    grid-area: jour;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0;
    font-size: var(--t-1);
    white-space: nowrap;
  }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__jour #jour { display: inline; }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__tresor.bandeau__tresor {
    grid-area: tresor;
    margin: var(--e-1) 0 0;
  }
}
@media (max-width: 42rem) and (min-height: 30.0625rem) {
  html[data-vue="jeu"] #jeu .hud .bandeau.bandeau {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom jour" "rang jour" "tresor tresor";
  }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__jour :is(#age, .bandeau__separateur) { display: none; }
  html[data-vue="jeu"] #jeu .hud .bandeau > .bandeau__rang > :is(.bandeau__compte, .bandeau__compte-etat) { display: none; }
}