/* ─────────────────────────────────────────────────────────────────────────
Le cadre commun des écrans (lot C du plan des onglets, 24/09/2026)
Un seul en-tête (titre, état, retour, vignette), un seul dessin d'onglets,
trois boutons (principal, secondaire, discret) et deux cadres, pour toutes
les pages. Au téléphone, le bandeau tient sur une ligne de 48 px et la barre
du bas sur 58 px. Référence : docs/PLAN-ONGLETS-ET-DESIGN.md, §5 et §7.
Cette feuille se charge la dernière. Chaque écran avait ses boutons et son
titre, posés par des règles à un ou deux identifiants (`#siege.page button:
not(…)`, `#jeu button:not(.rangee)…`, spécificité 1,8,1). Le préfixe
`html[data-vue="jeu"]:not(#cadre#cadre#cadre)` ne filtre rien (aucun
élément ne s'appelle ainsi) et pèse trois identifiants : il passe devant
ces règles sans `!important`, et une règle d'écran qui voudrait s'écarter
du cadre doit le dire en le reprenant.
Une ligne de liste écrite en bouton (nom, chiffres, état : `.rangee`, les
lignes des bâtiments, des troupes, de la forge) n'est pas un bouton de
commande : elle garde le dessin de sa liste. La lecture est la même que
celle du nuancier de tools/_audit-defilement.mjs : au moins deux morceaux
autres qu'une icône, ou un bloc (paragraphe, liste, figure) dedans.
───────────────────────────────────────────────────────────────────────── */
/* ── 1. L'en-tête d'écran ────────────────────────────────────────────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .dialogue__entete,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > form > .dialogue__entete,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #reglages.page > .reglages > .dialogue__entete {
/* La position collante, le haut et le rembourrage du haut restent ceux
d'ecrans-ui-senior.css : l'en-tête reste visible pendant la lecture, et
les onglets comme les colonnes de Gouverner se calent dessous. */
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "vignette titre retour" "vignette note retour";
align-items: center;
gap: var(--e-1) var(--e-4);
margin-bottom: var(--e-3);
padding-bottom: 26px;
padding-inline: 0;
border: 0;
border-radius: 0;
/* Plein : collé en haut, il passe au-dessus de la page, et la vignette ne
doit pas laisser voir ce qui défile dessous. Le filet du bas est
l'ornement d'or des cadres du jeu (29/09/2026). */
background:
url(/jeu/images/cadres/separateur.webp) center bottom 2px / auto 20px no-repeat,
linear-gradient(90deg, transparent, rgb(184 150 79 / .5) 20%, rgb(184 150 79 / .5) 80%, transparent) center bottom 11px / 100% 1px no-repeat,
var(--fond-entete, var(--pierre-2));
box-shadow: none;
clip-path: none;
text-align: start;
}
/* La Nuit garde son fond de glace sous l'en-tête. */
html[data-vue="jeu"] #nuit.page {
--fond-entete: var(--glace-nuit);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .dialogue__entete::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .dialogue__entete::after,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > form > .dialogue__entete::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > form > .dialogue__entete::after {
content: none;
}
/* Tout ce que l'en-tête porte en plus du titre (mode du domaine, fanion,
compteurs) se range sur la ligne d'état. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > * {
grid-column: 2;
min-width: 0;
}
/* Le titre d'écran : un seul dessin, sur toutes les pages. Une plaque de
pierre aux pointes d'or (le cartouche des cadres du jeu), à la largeur du
titre ; la Demeure, qui n'a pas d'en-tête, la pose sur l'état du jour. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__titre,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour.page .journee__etat {
grid-area: titre;
justify-self: start;
width: fit-content;
max-width: 100%;
margin: 0;
/* Le texte tient dans la pierre du cartouche, entre ses deux filets d'or,
même sur deux lignes. */
padding: 0.5em 12px 0.55em;
border: 0 solid transparent;
border-width: 0 2.4rem;
border-image: url(/jeu/images/cadres/cartouche.webp) 0 118 0 118 fill / 0 2.4rem stretch;
background: none;
font-family: var(--police-titre);
font-size: var(--t-7);
font-weight: 400;
line-height: 1.15;
letter-spacing: 0.05em;
text-transform: none;
text-align: center;
color: var(--hud-or-clair);
text-shadow: 0 2px 0 #000, 0 0 8px rgb(0 0 0 / .9);
}
/* L'état du jour reste à sa place dans la grille de la Demeure : l'aire
« titre » n'y existe pas, et la nommer ouvrait des colonnes fantômes. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour.page .journee__etat {
grid-area: auto;
margin-bottom: var(--e-3);
font-size: var(--t-5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > :is(.dialogue__note, .siege__mode) {
grid-area: note;
margin: 0;
padding: 0;
border: 0;
background: none;
font-family: var(--police-corps);
font-size: var(--t-3);
font-style: normal;
line-height: var(--interligne);
letter-spacing: 0;
text-transform: none;
text-align: start;
color: var(--texte);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__note:empty {
display: none;
}
/* La note porte l'état ; le mode du domaine le redisait. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .siege__mode {
display: none;
}
/* La vignette : l'illustration de l'écran, entière, en 150 px de large, qui
s'ouvre en grand au clic (jeu/ecrans/vignettes.js). Décision du propriétaire
du 24/09/2026 : au bureau seulement, rien au téléphone. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .entete__vignette {
grid-area: vignette;
display: block;
width: 150px;
min-height: 0;
margin: 0;
padding: 0;
border: var(--filet);
border-radius: var(--rayon);
background: var(--pierre-0);
box-shadow: var(--ombre-1);
cursor: zoom-in;
overflow: hidden;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .entete__vignette img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .entete__vignette:is(:hover, :focus-visible) {
border-color: var(--or);
outline: 2px solid var(--or);
outline-offset: 2px;
}
/* L'illustration passée en vignette ne se montre plus dans la page. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page.a-sa-vignette figure.illus[data-vignette] {
display: none;
}
/* L'image entière, par-dessus tout. Sa définition native borne sa taille
(AGENTS : jamais étirée ni rognée). */
.illus-entiere {
max-width: min(94vw, 1920px);
max-height: 94vh;
margin: auto;
padding: var(--e-3);
border: var(--filet);
border-radius: var(--rayon-case);
background: var(--pierre-1);
color: var(--texte);
box-shadow: var(--ombre-3);
}
.illus-entiere::backdrop {
background: var(--voile-noir);
}
.illus-entiere__image {
display: block;
max-width: 100%;
max-height: calc(94vh - 6rem);
width: auto;
height: auto;
margin: 0 auto;
object-fit: contain;
}
.illus-entiere__pied {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--e-4);
margin-top: var(--e-2);
font-family: var(--police-corps);
font-size: var(--t-3);
}
/* ── 2. Les onglets ──────────────────────────────────────────────────────── */
/* Des signets de fer sur un rail : l'onglet ouvert prend la plaque de cuir
rouge du rang (plaque-sang.webp) et descend sur le rail. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page {
gap: 6px;
align-items: end;
padding: var(--e-2) var(--e-2) 0;
border-bottom: 0;
/* Pleine : la barre reste collée sous l'en-tête et le registre défile dessous. */
background: linear-gradient(180deg, transparent calc(100% - 5px), #0d0b09 calc(100% - 5px), #0d0b09 calc(100% - 4px), var(--hud-or-filet) calc(100% - 4px), var(--hud-or-filet) calc(100% - 3px), #2b2622 calc(100% - 3px)), var(--fond-entete, var(--pierre-2));
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page .onglets-page__entree {
position: relative;
min-height: 44px;
margin: 0 0 5px;
padding: 8px 18px 9px;
border: 1px solid #0b0a09;
border-bottom: 0;
border-radius: 7px 7px 0 0;
background: var(--hud-grain), linear-gradient(180deg, #474b50 0%, #2a2d31 40%, #17191c 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .38), inset 0 1px 0 rgb(255 255 255 / .16);
font-family: var(--police-titre);
font-size: var(--t-3);
font-weight: 400;
letter-spacing: 0.05em;
text-transform: none;
text-shadow: 0 1px 1px #000;
color: var(--parchemin);
filter: none;
transition: color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page .onglets-page__entree:is(:hover, :focus-visible) {
color: var(--hud-or-clair);
background: var(--hud-grain), linear-gradient(180deg, #5a5f65 0%, #34383d 40%, #1d2023 100%);
box-shadow: inset 0 0 0 1px rgb(214 180 105 / .7), inset 0 1px 0 rgb(255 255 255 / .2), 0 0 10px rgb(240 200 120 / .18);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page .onglets-page__entree:is(.est-actif, [aria-selected="true"]) {
margin-bottom: 0;
padding: 8px 7px 14px;
border: 0 solid transparent;
border-width: 0 12px;
border-image: url(/jeu/images/cadres/plaque-sang.webp) 40 60 0 60 fill / 8px 12px 0 12px stretch;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--hud-or-clair);
text-shadow: 0 1px 0 #000, 0 0 6px rgb(0 0 0 / .8);
}
/* ── 3. Les trois boutons ────────────────────────────────────────────────── */
/* Depuis le 30/09/2026, la feuille de la carte (#feuille : place, camp,
préparation d'un ordre) prend les mêmes trois boutons que les pages, et la
fenêtre d'un objet trouvé (#decouverte : « Garder sur moi » était encore en
capitales sur un rectangle).
Le secondaire, par défaut : tout bouton de commande d'une page. Sont
écartés les onglets, les puces de filtre et de tri, les jetons de coût, les
outils de vue, les boutons faits d'une seule icône et les lignes de liste. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:not(
[role="tab"], .onglets-page__entree, [aria-pressed], [class*="__tri"], [class*="pastille"],
.jeton, .carte__outil, .entete__vignette, .rangee, [class*="rangee"], [class*="__ligne"],
.dialogue__fermer, .feuillet__poignee, .lien, .est-discret, [class*="__taire"],
[aria-label]:has(> :is(svg, img)):not(:has(> :not(svg, img))),
:has(> :is(div, p, ul, ol, dl, table, figure, h2, h3, h4, h5, section, article)),
:has(> :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]) ~ :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]))
) {
/* Une plaque de fer, un filet d'or dedans, la tranche éclairée en haut. */
/* 44 px partout (30/09/2026) : la cible tactile du téléphone, la même plaque au bureau. */
min-height: 44px;
padding: var(--e-1) var(--e-4);
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #50545a 0%, #2e3135 45%, #1a1c1f 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .55), inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -2px 0 rgb(0 0 0 / .45), 0 2px 4px rgb(0 0 0 / .5);
font-family: var(--police-titre);
font-size: var(--t-3);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: none;
text-shadow: 0 1px 1px #000;
color: var(--hud-or-clair);
filter: none;
cursor: pointer;
transition: box-shadow 120ms ease, transform 80ms ease;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:not(
[role="tab"], .onglets-page__entree, [aria-pressed], [class*="__tri"], [class*="pastille"],
.jeton, .carte__outil, .entete__vignette, .rangee, [class*="rangee"], [class*="__ligne"],
.dialogue__fermer, .feuillet__poignee, .lien, .est-discret, [class*="__taire"],
[aria-label]:has(> :is(svg, img)):not(:has(> :not(svg, img))),
:has(> :is(div, p, ul, ol, dl, table, figure, h2, h3, h4, h5, section, article)),
:has(> :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]) ~ :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]))
):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
border-color: #0b0a09;
background: var(--hud-grain), linear-gradient(180deg, #63686e 0%, #3a3e43 45%, #212327 100%);
box-shadow: inset 0 0 0 1px rgb(226 192 118 / .9), inset 0 1px 0 rgb(255 255 255 / .25), inset 0 -2px 0 rgb(0 0 0 / .45), 0 0 12px rgb(240 200 120 / .28), 0 2px 4px rgb(0 0 0 / .5);
color: #fff3d6;
transform: none;
}
/* Le principal : une action décisive par panneau, en cire. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:is(
.sceau, .sceau-sang, .bouton-principal, .objectif__reclamer, .campagne__reclamer,
.pretendant__marcher, .camp__marcher, .bouton-monter
):not(.rangee, [class*="rangee"], [aria-pressed]) {
/* De la cire rouge sertie d'or : un liseré d'or, un joint noir, le relief. */
min-height: 44px;
padding: var(--e-1) var(--e-5, 1.5rem);
border: 1px solid #1a0605;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #b0392f 0%, #7e1f19 42%, #4a0e0b 100%);
box-shadow: inset 0 0 0 1px #c9a45c, inset 0 0 0 2px rgb(0 0 0 / .5), inset 0 2px 0 rgb(255 205 175 / .28), 0 3px 6px rgb(0 0 0 / .55);
font-family: var(--police-titre);
/* Casse normale (30/09/2026) : AGENTS interdit le bouton rectangulaire en capitales. */
font-size: var(--t-3);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.04em;
text-transform: none;
text-shadow: 0 1px 1px #000;
color: var(--hud-or-clair);
filter: none;
cursor: pointer;
transition: box-shadow 120ms ease, transform 80ms ease;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:is(
.sceau, .sceau-sang, .bouton-principal, .objectif__reclamer, .campagne__reclamer,
.pretendant__marcher, .camp__marcher, .bouton-monter
):not(.rangee, [class*="rangee"], [aria-pressed]):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
border-color: #1a0605;
background: var(--hud-grain), linear-gradient(180deg, #c8463a 0%, #922720 42%, #5a120e 100%);
box-shadow: inset 0 0 0 1px #f0d9a0, inset 0 0 0 2px rgb(0 0 0 / .5), inset 0 2px 0 rgb(255 205 175 / .35), 0 0 14px rgb(230 120 80 / .35), 0 3px 6px rgb(0 0 0 / .55);
color: #fff3d6;
transform: none;
}
/* Appuyé : la plaque s'enfonce d'un pixel, le relief s'inverse. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:is(
.sceau, .sceau-sang, .bouton-principal, .objectif__reclamer, .campagne__reclamer,
.pretendant__marcher, .camp__marcher, .bouton-monter
):not(.rangee, [class*="rangee"], [aria-pressed]):active:not(:disabled, [aria-disabled="true"]),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:not(
[role="tab"], .onglets-page__entree, [aria-pressed], [class*="__tri"], [class*="pastille"],
.jeton, .carte__outil, .entete__vignette, .rangee, [class*="rangee"], [class*="__ligne"],
.dialogue__fermer, .feuillet__poignee, .lien, .est-discret, [class*="__taire"],
[aria-label]:has(> :is(svg, img)):not(:has(> :not(svg, img))),
:has(> :is(div, p, ul, ol, dl, table, figure, h2, h3, h4, h5, section, article)),
:has(> :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]) ~ :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]))
):active:not(:disabled, [aria-disabled="true"]) {
transform: translateY(1px);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .7), inset 0 2px 5px rgb(0 0 0 / .65);
}
/* Le discret : retour, lien, « ne plus conseiller ». Sans fond, en or. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:is(.lien, .est-discret, [class*="__taire"]):not(.rangee, [class*="rangee"], [aria-pressed]),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer {
min-height: 36px;
padding: var(--e-1) var(--e-2);
border: 0;
border-radius: var(--rayon);
background: none;
box-shadow: none;
font-family: var(--police-corps);
font-size: var(--t-3);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0;
text-transform: none;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--or) 45%, transparent);
text-underline-offset: 0.2em;
text-shadow: none;
color: var(--or);
filter: none;
cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:is(.lien, .est-discret, [class*="__taire"]):not(.rangee, [class*="rangee"], [aria-pressed]):is(:hover, :focus-visible),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer:is(:hover, :focus-visible) {
background: none;
color: var(--or-vif);
text-decoration-color: currentColor;
transform: none;
}
/* Le retour se place à droite de l'en-tête, sur les deux lignes. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer {
grid-area: retour;
position: static;
align-self: center;
justify-self: end;
width: auto;
min-width: 0;
margin: 0;
transform: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer::after {
content: none;
}
/* Fermé : les trois dessins prennent la même pierre, et la raison est écrite
à côté (AGENTS : chaque refus dit sa cause). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:not(
[role="tab"], .onglets-page__entree, [aria-pressed], [class*="__tri"], [class*="pastille"],
.jeton, .carte__outil, .entete__vignette, .rangee, [class*="rangee"], [class*="__ligne"],
.dialogue__fermer, .feuillet__poignee, .lien, .est-discret, [class*="__taire"],
[aria-label]:has(> :is(svg, img)):not(:has(> :not(svg, img))),
:has(> :is(div, p, ul, ol, dl, table, figure, h2, h3, h4, h5, section, article)),
:has(> :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]) ~ :not(svg, img, i, [class*="icone"], [class*="marque"], [class*="fleche"], [class*="compte"]))
):is(:disabled, [aria-disabled="true"]),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.page:not(#visite), #feuille, #decouverte) button:is(
.sceau, .sceau-sang, .bouton-principal, .objectif__reclamer, .campagne__reclamer,
.pretendant__marcher, .camp__marcher, .bouton-monter
):not(.rangee, [class*="rangee"], [aria-pressed]):is(:disabled, [aria-disabled="true"]) {
/* Éteint : une pierre mate sans or ; la raison est écrite à côté. */
border-color: #0b0a09;
background: var(--hud-grain), linear-gradient(180deg, #3a3733 0%, #26241f 100%);
box-shadow: inset 0 0 0 1px rgb(130 120 104 / .35), inset 0 1px 0 rgb(255 255 255 / .06);
color: var(--ferme);
text-shadow: none;
cursor: not-allowed;
}
/* ── 4. Les deux cadres ──────────────────────────────────────────────────── */
/* Le cadre : un panneau de pierre. Le cadre parchemin est réservé aux
documents qui se lisent (lettre, décret, chronique). */
.cadre {
padding: var(--e-3) var(--e-4);
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
color: var(--texte);
}
.cadre-parchemin {
padding: var(--e-3) var(--e-4);
border: 1px solid var(--parchemin-bas);
border-radius: 3px;
background: var(--habit-parchemin);
box-shadow: inset 0 0 0 1px rgb(255 245 220 / .35), inset 0 0 24px rgb(90 60 20 / .35), var(--ombre-2);
color: var(--encre);
}
/* Une liste longue défile dans son cadre au lieu d'allonger la page : les
nouvelles du royaume, revenues dans la Demeure au lot A, faisaient passer
« Aujourd'hui » de 4,5 à 6,3 écrans chez le roi. */
html[data-vue="jeu"] .evenements-mondiaux__liste {
max-height: min(22rem, 45vh);
overflow-y: auto;
overscroll-behavior: contain;
}
/* Lot J (25/09/2026) : la même règle pour les autres listes longues, les
tableaux des classements, la piste de la saison, les rayons de la boutique
et les serments. Au téléphone, les décisions du jour s'y ajoutent : cinq
décisions empilées faisaient dix écrans à la Demeure du roi. */
html[data-vue="jeu"] :is(#tableaux, #role-liste, #boutique-rayons, #objectifs-liste, #lice-liste) {
max-height: min(34rem, 62vh);
overflow-y: auto;
overscroll-behavior: contain;
border-block: 1px solid var(--filet-pale);
}
/* Une liste en colonne souple écrasait ses lignes pour tenir dans la hauteur
bornée : chaque ligne garde sa hauteur, la liste défile. */
html[data-vue="jeu"] :is(#tableaux, #role-liste, #boutique-rayons, #objectifs-liste, #lice-liste, #affaires) > * {
flex-shrink: 0;
}
@media (max-width: 42rem) {
html[data-vue="jeu"] :is(#tableaux, #role-liste, #boutique-rayons, #objectifs-liste, #lice-liste) {
max-height: 56vh;
}
html[data-vue="jeu"] #cour #affaires {
max-height: 60vh;
overflow-y: auto;
overscroll-behavior: contain;
border-block: 1px solid var(--filet-pale);
}
/* Les réserves de la Demeure en deux colonnes : sept lignes pleine largeur
prenaient un écran entier sous « À traiter ». */
html[data-vue="jeu"] #cour #ressources {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--e-1);
}
}
/* ── 5. Au bureau et au téléphone ────────────────────────────────────────── */
/* Le téléphone couché prend la même coque que le téléphone debout : un bandeau
de 48 px, le rappel de compte rangé à son bout, la barre du bas à 58 px.
Calé sur la largeur seule, il passait au-dessus de 42rem : bandeau de 130 px
sur 360, rappel de 52, barre de 60, « À traiter » sur la première réserve
(mesure du 28/09/2026 en 740 × 360). */
@media (max-width: 42rem), (max-height: 30rem) and (orientation: landscape) {
/* Plus de vignette au téléphone, ni d'illustration dans la page. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .entete__vignette {
display: none;
}
/* L'en-tête : la flèche de retour, puis le titre, la note dessous. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .dialogue__entete,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > form > .dialogue__entete,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #reglages.page > .reglages > .dialogue__entete {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "retour titre" "note note";
gap: var(--e-0) var(--e-2);
margin: 0 0 var(--e-2);
/* En bas, la place de l'ornement (20 px posés à 2 px du bord) : à 8 px, il barrait la seconde ligne de la note
(la Longue Nuit, les Quêtes, la Saison, 06/10/2026). */
padding: var(--e-2) 0 24px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > * {
grid-column: 1 / -1;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__titre {
grid-area: titre;
font-size: var(--t-7);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > :is(.dialogue__note, .siege__mode) {
grid-area: note;
font-size: var(--t-2);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer {
grid-area: retour;
justify-self: start;
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
padding: 0;
text-decoration: none;
font-size: var(--t-5);
}
/* La flèche seule ; le nom du retour reste dans l'étiquette du bouton. Masqué seulement sous 42rem
(ecrans-ui-senior.css), il débordait du bouton de 44 px au téléphone couché et passait sous la plaque des
réserves de la base (16/10/2026). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__fermer .retour__nom {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* Les onglets : une ligne qui se fait glisser. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page .onglets-page__entree {
min-height: 44px;
padding: var(--e-2);
white-space: nowrap;
}
}
/* Lot J : serments comparables, affiches repliables et un classement à la fois. */
html[data-vue="jeu"] .serments-liste,
html[data-vue="jeu"] .tournois-liste { list-style: none; padding: 0; margin: 0; }
html[data-vue="jeu"] .serment-ligne {
display: grid; grid-template-columns: minmax(12rem, 2fr) auto minmax(10rem, 1.4fr) minmax(8rem, 1fr);
align-items: center; gap: var(--e-3); padding: var(--e-3); border-bottom: var(--filet-cuir);
background: var(--pierre-2); color: var(--texte); font-size: var(--t-3);
}
html[data-vue="jeu"] .serment-ligne strong { color: var(--texte-fort); }
html[data-vue="jeu"] .serment-ligne__compte { color: var(--or-vif); font-variant-numeric: tabular-nums; white-space: nowrap; }
html[data-vue="jeu"] .serment-ligne.est-reclame { color: var(--texte-pale); }
html[data-vue="jeu"] #quetes .serment-ligne .objectif__reclamer { grid-column: auto; }
html[data-vue="jeu"] #hauts-faits-liste,
html[data-vue="jeu"] #campagne-liste { max-height: 56vh; overflow-y: auto; overscroll-behavior: contain; }
/* L'affiche d'un tournoi dans sa feuille, sur la carte (8/10/2026) : épreuves et mises en jetons à bascule (habit commun des choix). */
html[data-vue="jeu"] .tournoi-affiche { margin-top: var(--e-3); padding: var(--e-2) var(--e-3); border: 1px solid color-mix(in srgb, var(--or) 35%, transparent); border-radius: var(--rayon); background: color-mix(in srgb, #000 18%, transparent); }
html[data-vue="jeu"] .tournoi-affiche > .gestion-sous-titre { margin-top: 0; color: var(--or-vif); }
html[data-vue="jeu"] .tournoi-affiche__choix { display: flex; flex-wrap: wrap; gap: var(--e-1); margin: var(--e-2) 0; }
html[data-vue="jeu"] .tournoi-affiche__choix > .jeton-mot { margin-top: 0; flex: 0 1 auto; }
html[data-vue="jeu"] .carte-monde__armee--place[data-tournoi] .carte-monde__note { color: var(--or-vif); }
/* Un vrai tableau sur toute sa colonne : le socle met chaque table en bloc défilant, #tableaux défile déjà. */
html[data-vue="jeu"] .classement-table { display: table; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
html[data-vue="jeu"] .classement-table caption { text-align: left; font-size: var(--t-5); padding: var(--e-3); }
html[data-vue="jeu"] .classement-table :is(th, td) { padding: var(--e-3); border-bottom: var(--filet-cuir); text-align: left; }
html[data-vue="jeu"] .classement-table :is(th, td):last-child { text-align: right; }
html[data-vue="jeu"] .classement-toi { position: sticky; top: 0; background: var(--bois-sombre); color: var(--or-vif); }
html[data-vue="jeu"] #classements-racine .onglets-page { display: flex; flex-wrap: wrap; gap: var(--e-1); }
/* Le tableau et la note du joueur côte à côte ; la note passe dessous sur un écran étroit. */
html[data-vue="jeu"] .classement-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); gap: var(--e-4); align-items: start; }
html[data-vue="jeu"] .classement-corps > .vide { grid-column: 1; }
@media (max-width: 52rem) { html[data-vue="jeu"] .classement-corps { grid-template-columns: minmax(0, 1fr); } }
html[data-vue="jeu"] #classements-racine .onglets-page__entree[aria-selected="true"] { border-color: var(--or); color: var(--or-vif); background: var(--bois-sombre); }
@media (max-width: 42rem) {
html[data-vue="jeu"] .serment-ligne { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); }
html[data-vue="jeu"] .serment-ligne__gain { grid-column: 1 / -1; }
html[data-vue="jeu"] .serment-ligne > :last-child { grid-column: 1 / -1; }
html[data-vue="jeu"] .classement-table :is(th, td) { padding: var(--e-2); }
}
html[data-vue="jeu"] #role .articles { display: flex; flex-direction: column; gap: 0; }
html[data-vue="jeu"] #role .article {
display: grid; grid-template-columns: 4rem minmax(10rem, 1fr) minmax(8rem, 1fr) auto;
align-items: center; gap: var(--e-3); padding: var(--e-3); min-height: 0; border-bottom: var(--filet-cuir);
}
html[data-vue="jeu"] #role .article__image { width: 4rem; height: 4rem; object-fit: contain; grid-row: span 2; }
html[data-vue="jeu"] #role .article__prix { grid-column: -2; grid-row: 1 / span 2; }
html[data-vue="jeu"] #role .etal-relief--unique .etal-relief__toile { height: 12rem; }
html[data-vue="jeu"] .page .dialogue__note { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 42rem) {
/* Les prix occupent leur propre ligne : une colonne « auto » réservait
toute la largeur aux deux monnaies et écrasait le nom de l'œuf. */
html[data-vue="jeu"] #role .article {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--e-2);
min-width: 0;
}
html[data-vue="jeu"] #role .article__image { display: none; }
html[data-vue="jeu"] #role .article__prix {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
min-width: 0;
grid-column: auto;
grid-row: auto;
}
html[data-vue="jeu"] #role .article__prix > * {
flex: none;
min-width: 0;
max-width: 100%;
white-space: normal;
}
html[data-vue="jeu"] #role .article__nom { overflow-wrap: anywhere; }
/* Le roi conserve cinq décisions, les nouvelles, les priorités et les
activités. Ces trois listes défilent séparément pour que les réserves
restent accessibles sous le troisième écran. */
html[data-vue="jeu"] #cour #priorites-liste {
max-height: 20vh;
overflow-y: auto;
overscroll-behavior: contain;
align-content: start;
grid-auto-rows: max-content;
}
html[data-vue="jeu"] #cour #actes-prets .actes-systeme__liste {
max-height: 22vh;
}
html[data-vue="jeu"] #cour .evenements-mondiaux__liste {
max-height: 36vh;
}
}
/* ── 6. Le HUD de jeu ────────────────────────────────────────────────────
Le HUD de la carte, refait le 29/09/2026 : un HUD de jeu vidéo, pas de page.
Demande du propriétaire (« faudrait éventuellement revoir le HUD aussi »,
puis « un HUD de jeu vidéo, pas de jeu web ») : les repères sont les jeux de
stratégie sur ordinateur. Le héros en médaillon au coin haut gauche, son
rang et son niveau gravés dessous ; les réserves sur une plaque de bois et
de fer en haut ; les affaires et les nouvelles en icônes d'alerte rondes à
pastille sous le médaillon, qui ouvrent un panneau à côté ; les outils de la
carte en grappe autour d'une boussole, au coin bas droit ; la navigation en
barre d'actions centrale, cinq cases dans un socle. Au téléphone, la même
chose resserrée : un seul bouton pour les registres, pas de zoom (pincement).
Rien ne se décide ici : chaque nombre vient du serveur et se peint ailleurs
(peindre.js, coque.js). Ces règles passent devant les anciennes règles du
bandeau, des volets, de la barre et des outils (coque.css,
carte-ui-senior.css) par leur poids : cinq identifiants, contre quatre au
plus chez elles. Les règles du bandeau et de la barre au téléphone que ce
cadre portait avant (section 5) sont retirées : une seule vérité.
Matières : bois (jeu/images/cadres/bois-hud.webp, tiré de Weathered Planks,
Poly Haven, CC0), fer et cuir en dégradés, ornements des cadres du jeu
(jeu/images/cadres/), icônes peintes du jeu (jeu/images/icones/marques/).
───────────────────────────────────────────────────────────────────────── */
/* L'or des filets, l'or clair et le grain : les matières communes au HUD, aux écrans et à la création du
personnage (section 12), qui s'affiche avant la vue du jeu. */
html[data-vue="jeu"],
#creation.creation {
--hud-or-filet: #b8964f;
--hud-or-clair: #f0d9a0;
--hud-grain: url("data:image/svg+xml;utf8,");
}
html[data-vue="jeu"]:not(#hud#hud#hud#hud) {
/* Le bandeau, la barre d'actions et le médaillon, au bureau, en pixels du HUD. L'échelle de l'interface
(jeu/ecrans/echelle-interface.js) pose --hud-zoom sur la page ; le HUD s'agrandit ou se réduit par la propriété
zoom, et les écrans et la carte lisent la place qu'il prend en pixels d'écran (--barre-haut, --barre-bas). */
--hud-zoom: 1;
--hud-barre: 54px;
--hud-bas: 84px;
--barre-haut: calc(var(--hud-barre) * var(--hud-zoom));
--barre-bas: calc(var(--hud-bas) * var(--hud-zoom));
--hud-medaillon: 104px;
--hud-medaillon-gauche: 18px;
--hud-plaque: 132px;
--hud-outil: 40px;
--hud-boussole: 80px;
--hud-case: 64px;
/* Les matières. */
--hud-fer: linear-gradient(180deg, #a2a8ae 0%, #62676d 16%, #33363a 52%, #1b1d20 82%, #4c5056 100%);
--hud-fer-rond: radial-gradient(circle at 50% 30%, #8d9399 0%, #53585e 34%, #26282c 70%, #121315 100%);
--hud-cuir: radial-gradient(130% 100% at 50% 0%, #4a3522 0%, #2f2114 55%, #1b130b 100%);
--hud-bois: linear-gradient(180deg, rgb(255 220 160 / .10), rgb(0 0 0 / .08) 40%, rgb(0 0 0 / .42)), url(/jeu/images/cadres/bois-hud.webp) 0 0 / auto 100% repeat-x, #2b1d10;
--hud-relief: inset 0 1px 0 rgb(255 232 180 / .22), inset 0 -1px 0 rgb(0 0 0 / .6);
--hud-ombre: 0 6px 16px rgb(0 0 0 / .55), 0 2px 4px rgb(0 0 0 / .5);
--hud-infobulle-fond: linear-gradient(180deg, #2c2016, #19120b);
@media (max-width: 60rem) {
--hud-barre: 50px;
--hud-bas: 72px;
--hud-medaillon: 80px;
--hud-medaillon-gauche: 12px;
--hud-plaque: 112px;
--hud-case: 58px;
}
@media (max-width: 42rem), (max-height: 30rem) and (orientation: landscape) {
--hud-barre: 48px;
--hud-bas: 64px;
--hud-medaillon: 64px;
--hud-medaillon-gauche: 8px;
--hud-plaque: 132px;
--hud-outil: 44px;
--hud-boussole: 86px;
}
}
html[data-vue="jeu"]:not(#hud#hud#hud#hud) #jeu {
/* ── L'échelle de l'interface ──────────────────────────────────────────
Les quatre pièces du HUD prennent le même facteur ; les noms et la cible de
la carte, non. Au téléphone, --hud-zoom vaut 1 : les cibles restent à 44 px. */
& :is(.hud, .barre, .monde__outils, .rappel-compte) { zoom: var(--hud-zoom); }
/* ── L'infobulle de jeu ─────────────────────────────────────────────────
Un cadre de cuir, un filet d'or, le nom en petites capitales : pour les
outils de la carte, les cases de la barre d'actions, les registres, le
menu du compte et le nom de chaque réserve. Au survol (souris) et au
clavier ; au doigt, le nom est écrit sous l'icône ou dans le panneau. */
& :is(.carte__outil, .barre__entree, .volet__poignee, .bandeau__menu, .registre__bouton, .tresor)::after {
position: absolute;
z-index: 60;
width: max-content;
max-width: 16rem;
padding: 5px 10px 6px;
border: 1px solid #0c0906;
border-radius: 4px;
background: var(--hud-grain), var(--hud-infobulle-fond);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 6px 14px rgb(0 0 0 / .6);
color: var(--hud-or-clair);
font: 600 var(--t-2) / 1.25 var(--police-titre);
letter-spacing: .06em;
font-variant: small-caps;
text-align: left;
white-space: normal;
text-shadow: 0 1px 1px #000;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 120ms ease 180ms;
}
@media (hover: hover) {
& :is(.carte__outil, .barre__entree, .volet__poignee[aria-expanded="false"], .bandeau__menu, .registre__bouton, .tresor):hover::after { opacity: 1; visibility: visible; }
}
& :is(.carte__outil, .barre__entree, .volet__poignee[aria-expanded="false"], .bandeau__menu, .registre__bouton):focus-visible::after { opacity: 1; visibility: visible; transition-delay: 0ms; }
/* ── Le bandeau : une plaque de bois cerclée de fer ─────────────────── */
& .hud .bandeau {
position: absolute;
top: var(--marge-haut);
left: 0;
right: 0;
width: auto;
max-width: none;
height: var(--hud-barre);
min-height: 0;
max-height: none;
margin: 0;
padding: 0 calc(var(--marge-droite) + 12px) 0 calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + var(--hud-medaillon) + 18px);
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 14px;
grid-template: none;
transform: none;
overflow: visible;
white-space: nowrap;
background: var(--hud-bois);
border: 0;
border-radius: 0;
box-shadow: var(--hud-relief), 0 6px 14px rgb(0 0 0 / .55);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Le bord de fer riveté sous la plaque. */
& .hud .bandeau::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -6px;
height: 7px;
background:
radial-gradient(circle at 50% 45%, #d9dee2 0 1px, #7c8288 1.6px, #2a2c30 2.6px, transparent 3px) 30px 0 / 120px 7px repeat-x,
var(--hud-fer);
border-top: 1px solid var(--hud-or-filet);
box-shadow: 0 2px 3px rgb(0 0 0 / .6);
pointer-events: none;
}
& .hud .bandeau > .bandeau__logo { display: none; }
/* Le médaillon du héros : un disque de fer ciselé, l'anneau d'or de
l'expérience (--xp, peindre.js), le sceau de cire du niveau. */
& .hud .bandeau .bandeau__portrait {
position: absolute;
z-index: 3;
left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche));
top: 6px;
width: var(--hud-medaillon);
height: var(--hud-medaillon);
min-width: 0;
margin: 0;
padding: calc(var(--hud-medaillon) * .115);
border: 2px solid #0e0c0a;
border-radius: 50%;
outline: none;
background:
radial-gradient(circle, transparent 0 calc(var(--hud-medaillon) * .36), rgb(0 0 0 / .45) calc(var(--hud-medaillon) * .37), transparent calc(var(--hud-medaillon) * .40)),
url(/jeu/images/icones/marques/silhouette.webp) center 42% / 58% no-repeat,
var(--hud-fer-rond);
box-shadow:
inset 0 2px 1px rgb(255 255 255 / .35),
inset 0 -3px 5px rgb(0 0 0 / .7),
0 0 0 2px var(--hud-or-filet),
0 0 0 4px #1a1510,
var(--hud-ombre);
cursor: pointer;
overflow: visible;
transition: filter 140ms ease, transform 140ms ease;
}
& .hud .bandeau .bandeau__portrait::before {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: conic-gradient(from 0deg, #ffe3a0, var(--or) calc(var(--xp, 0) * 360deg), rgb(10 8 6 / .75) 0);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
pointer-events: none;
}
& .hud .bandeau .bandeau__portrait[data-niveau]::after {
content: attr(data-niveau);
position: absolute;
right: -4px;
bottom: 0;
display: grid;
place-items: center;
min-width: calc(var(--hud-medaillon) * .32);
height: calc(var(--hud-medaillon) * .32);
padding: 0 3px;
border-radius: 50%;
background: radial-gradient(circle at 40% 30%, #c0392b, #7e1d16 60%, #4a0f0b);
box-shadow: inset 0 1px 1px rgb(255 200 180 / .45), inset 0 -2px 3px rgb(0 0 0 / .55), 0 0 0 2px var(--hud-or-filet), 0 2px 4px rgb(0 0 0 / .6);
color: var(--hud-or-clair);
font: 700 calc(var(--hud-medaillon) * .15) / 1 var(--police-titre);
text-shadow: 0 1px 1px #000;
}
& .hud .bandeau .bandeau__portrait > * {
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
box-shadow: 0 0 0 2px #0e0c0a, inset 0 0 8px rgb(0 0 0 / .6);
}
& .hud .bandeau .bandeau__portrait:hover { filter: brightness(1.12); }
& .hud .bandeau .bandeau__portrait:active { transform: translateY(1px); }
& .hud .bandeau .bandeau__portrait:focus-visible { box-shadow: inset 0 2px 1px rgb(255 255 255 / .35), 0 0 0 2px var(--or-vif), 0 0 0 5px rgb(230 200 127 / .35), var(--hud-ombre); }
/* L'identité : le nom dans la plaque, le rang et le niveau gravés sous le
médaillon. La boîte s'efface ; ses deux lignes prennent chacune leur place. */
& .hud .bandeau .bandeau__identite { display: contents; }
& .hud .bandeau .bandeau__nom {
flex: 0 1 auto;
order: 0;
min-width: 90px;
max-width: none;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
overflow: visible;
position: static;
width: auto;
height: auto;
clip: auto;
color: var(--hud-or-clair);
font: 600 var(--t-5) / 1.1 var(--police-titre);
letter-spacing: .03em;
text-shadow: 0 1px 0 #000, 0 0 8px rgb(0 0 0 / .8);
}
/* Le nom du héros ne s'abrège jamais (décision du 29/09/2026) : pas d'ellipse, la plaque prend sa largeur. */
& .hud .bandeau .bandeau__nom #nom-affiche { min-width: auto; overflow: visible; text-overflow: clip; white-space: nowrap; }
& .hud .bandeau .bandeau__blason { flex: 0 0 auto; display: inline-grid; filter: drop-shadow(0 1px 2px #000); }
& .hud .bandeau .bandeau__blason[hidden] { display: none; }
/* La plaque gravée : cuir rouge sous cadre de fer riveté (cadres/plaque-sang.webp). */
& .hud .bandeau .bandeau__rang {
position: absolute;
z-index: 2;
left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + var(--hud-medaillon) / 2 - var(--hud-plaque) / 2);
top: calc(6px + var(--hud-medaillon) + 8px);
width: var(--hud-plaque);
height: auto;
margin: 0;
padding: 7px 10px 8px;
display: grid;
justify-items: center;
gap: 2px;
clip: auto;
overflow: visible;
border: 7px solid transparent;
border-image: url(/jeu/images/cadres/plaque-sang.webp) 40 44 fill / 7px 8px stretch;
filter: drop-shadow(0 3px 4px rgb(0 0 0 / .6));
color: var(--hud-or-clair);
text-align: center;
white-space: normal;
font-size: var(--t-1);
}
& .hud .bandeau .bandeau__rang > #rang-affiche {
position: static;
width: auto;
height: auto;
clip: auto;
overflow: visible;
font: 700 var(--t-2) / 1.15 var(--police-titre);
letter-spacing: .09em;
font-variant: small-caps;
text-shadow: 0 1px 1px #000;
white-space: normal;
}
& .hud .bandeau .bandeau__rang > .bandeau__niveau {
position: static;
width: 100%;
height: auto;
clip: auto;
margin: 0;
display: grid;
justify-items: center;
gap: 3px;
overflow: visible;
color: #e9d3a1;
font: 600 var(--t-1) / 1.1 var(--police-titre);
letter-spacing: .06em;
}
& .hud .bandeau .bandeau__rang > .bandeau__niveau[hidden] { display: none; }
& .hud .bandeau .bandeau__rang .bandeau__xp {
display: block;
width: 82%;
height: 4px;
margin: 0;
border-radius: 2px;
background: rgb(0 0 0 / .6);
box-shadow: inset 0 1px 1px #000, 0 1px 0 rgb(255 220 160 / .18);
overflow: hidden;
}
& .hud .bandeau .bandeau__rang .bandeau__xp-barre { display: block; height: 100%; background: linear-gradient(90deg, #8e6d28, #f0d9a0); }
/* ── Les réserves : une plaque creusée dans le bois ─────────────────── */
& .hud .bandeau .bandeau__coffre {
position: relative;
flex: 1 1 auto;
order: 1;
min-width: 0;
display: flex;
justify-content: center;
}
& .hud .bandeau .bandeau__tresor.bandeau__tresor {
position: static;
flex: 0 1 auto;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 0;
min-width: 0;
max-width: 100%;
width: auto;
height: calc(var(--hud-barre) - 12px);
margin: 0;
padding: 0 4px;
transform: none;
overflow: visible;
border: 1px solid #0c0906;
border-radius: 6px;
background: var(--hud-grain), linear-gradient(180deg, #120c07, #22170d 60%, #1a120b);
box-shadow: inset 0 3px 6px rgb(0 0 0 / .85), inset 0 0 0 1px rgb(0 0 0 / .5), 0 1px 0 rgb(255 225 170 / .22), 0 0 0 2px rgb(184 150 79 / .35);
scrollbar-width: none;
}
& .hud .bandeau .tresor.tresor {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
min-height: 0;
padding: 0 12px 0 8px;
background: none;
border: 0;
border-radius: 0;
transform: none;
transition: background 140ms ease;
}
& .hud .bandeau .tresor.tresor + .tresor { box-shadow: inset 1px 0 0 rgb(0 0 0 / .8), inset 2px 0 0 rgb(255 220 160 / .10); }
& .hud .bandeau .tresor.tresor:hover { background: rgb(230 200 127 / .08); transform: none; }
& .hud .bandeau .tresor.est-en-alerte { background: radial-gradient(90% 90% at 50% 50%, rgb(160 43 35 / .45), transparent); }
& .hud .bandeau .tresor__marque.tresor__marque { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .85)); }
& .hud .bandeau .tresor__chiffres { display: grid; justify-items: start; line-height: 1; }
& .hud .bandeau .tresor__stock.tresor__stock {
color: #f6e9c8;
font: 700 var(--t-4) / 1.05 var(--police-titre);
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 0 #000, 0 0 6px rgb(0 0 0 / .9);
}
& .hud .bandeau .tresor__debit.tresor__debit {
color: #a9c878;
font: 600 var(--t-1) / 1.1 var(--police-corps);
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 0 #000;
}
& .hud .bandeau .tresor__debit.est-negatif { color: #ff8f7f; }
& .hud .bandeau .tresor__debit .chiffre { border-bottom-color: rgb(230 200 127 / .55); }
/* Le nom de la réserve, sous la case, au survol ; le débit garde sa propre infobulle. */
& .hud .bandeau .tresor::after { content: attr(aria-label); top: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
& .hud .bandeau .tresor:has(.chiffre:hover, .chiffre--ouvert)::after { opacity: 0; visibility: hidden; }
/* La décomposition d'un débit prend l'infobulle de jeu commune (section 7). */
/* ── Le jour et la Longue Nuit, au bout de la plaque ────────────────── */
& .hud .bandeau .bandeau__jour {
order: 2;
flex: 0 0 auto;
position: static;
display: grid;
justify-items: end;
align-content: center;
gap: 3px;
margin: 0;
padding: 0;
color: #e9d3a1;
font: 700 var(--t-1) / 1 var(--police-titre);
letter-spacing: .12em;
text-transform: uppercase;
white-space: nowrap;
width: auto;
height: auto;
clip: auto;
}
& .hud .bandeau .bandeau__jour #jour {
position: static;
width: auto;
height: auto;
clip: auto;
overflow: visible;
text-shadow: 0 1px 0 #000;
}
& .hud .bandeau .bandeau__jour :is(.bandeau__separateur, .bandeau__age) { display: none; }
& .hud .bandeau .bandeau__nuit {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 26px;
margin: 0;
padding: 2px 10px 2px 6px;
border: 1px solid #0c0906;
border-radius: 13px;
background: linear-gradient(180deg, #1f3b50, #0e1d29);
box-shadow: inset 0 1px 0 rgb(207 228 238 / .25), 0 0 0 1px rgb(121 198 220 / .45), 0 2px 4px rgb(0 0 0 / .5);
color: var(--glace-clair);
font: 600 var(--t-1) / 1 var(--police-titre);
letter-spacing: .04em;
text-transform: none;
cursor: pointer;
}
& .hud .bandeau .bandeau__nuit :is(.bandeau__nuit-assaut, .bandeau__nuit-horde) { display: inline; }
& .hud .bandeau .bandeau__nuit-horde:empty { display: none; }
& .hud .bandeau .bandeau__nuit-horde { padding-left: 6px; border-left: 1px solid rgb(121 198 220 / .35); color: #ff9c8f; }
& .hud .bandeau .bandeau__nuit-glace {
width: 18px;
height: 18px;
font-size: 0;
background: url(/jeu/images/icones/marques/flocon.webp) center / contain no-repeat;
filter: hue-rotate(160deg) saturate(.5) brightness(1.4) drop-shadow(0 1px 1px #000);
}
& .hud .bandeau .bandeau__nuit:hover { filter: brightness(1.15); }
& .hud .bandeau .bandeau__nuit.est-urgente {
background: linear-gradient(180deg, #6a1a14, #34100c);
box-shadow: inset 0 1px 0 rgb(255 190 170 / .3), 0 0 0 1px #e0655d, 0 0 12px rgb(224 101 93 / .6);
color: #ffe3dc;
}
/* ── Le compte, dans un menu ────────────────────────────────────────── */
& .hud .bandeau .bandeau__menu-zone { order: 3; flex: 0 0 auto; position: relative; }
& .hud .bandeau .bandeau__menu {
position: relative;
width: 40px;
height: 40px;
min-width: 0;
min-height: 0;
margin: 0;
padding: 7px;
display: grid;
place-items: center;
border: 1px solid #0c0906;
border-radius: 50%;
background: var(--hud-fer-rond);
box-shadow: inset 0 1px 1px rgb(255 255 255 / .35), inset 0 -2px 3px rgb(0 0 0 / .6), 0 0 0 1px var(--hud-or-filet), 0 2px 5px rgb(0 0 0 / .6);
cursor: pointer;
}
& .hud .bandeau .bandeau__menu-icone { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px #000); }
& .hud .bandeau .bandeau__menu:hover { filter: brightness(1.15); }
& .hud .bandeau .bandeau__menu:active { transform: translateY(1px); }
& .hud .bandeau .bandeau__menu::after { content: attr(aria-label); top: calc(100% + 12px); right: 0; }
/* Une partie sans compte : une goutte de cire sur la clé. */
& .hud .bandeau .bandeau__menu-zone:has(#top-compte[data-connecte="0"]) .bandeau__menu::before {
content: "";
position: absolute;
top: -2px;
right: -2px;
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #e0655d, #7e1d16);
box-shadow: 0 0 0 1px #0c0906;
}
& .hud .bandeau .bandeau__compte-feuille {
position: fixed;
inset: auto;
top: calc(var(--marge-haut) + var(--hud-barre) + 12px);
right: calc(var(--marge-droite) + 10px);
margin: 0;
width: min(20rem, calc(100vw - 20px));
padding: 14px 16px;
border: 1px solid #0c0906;
border-radius: 6px;
background: var(--hud-grain), var(--hud-infobulle-fond);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 12px 28px rgb(0 0 0 / .7);
color: var(--parchemin);
white-space: normal;
}
& .hud .bandeau .bandeau__compte-feuille:popover-open { display: grid; gap: 10px; }
& .hud .bandeau .bandeau__compte-etat {
position: static;
width: auto;
height: auto;
clip: auto;
display: block;
margin: 0;
color: var(--parchemin);
font: var(--t-3) / 1.35 var(--police-corps);
letter-spacing: 0;
text-transform: none;
}
& .hud .bandeau .bandeau__compte {
position: static;
width: 100%;
height: auto;
clip: auto;
display: inline-flex;
justify-content: center;
min-height: 44px;
margin: 0;
}
/* ── Le rappel du compte : un ruban sous la plaque, refermable ────────
Il flotte (--rappel-pousse: 0, chronique.js) et garde « Lier à Google ».
Pendant un écran, il se retire : la clé du bandeau porte sa goutte de cire. */
& .rappel-compte {
--rappel-pousse: 0;
position: fixed;
z-index: 43;
top: calc(var(--marge-haut) + var(--hud-barre) + 12px);
left: 0;
right: 0;
bottom: auto;
width: max-content;
max-width: calc(100vw - 2 * (var(--hud-medaillon-gauche) + var(--hud-plaque) + 16px));
height: auto;
margin-inline: auto;
transform: none;
display: flex;
align-items: center;
gap: 10px;
padding: 5px 8px 5px 14px;
border: 1px solid #0c0906;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #5a1a14, #34100c);
box-shadow: inset 0 0 0 1px rgb(224 101 93 / .55), inset 0 1px 0 rgb(255 200 180 / .25), 0 6px 14px rgb(0 0 0 / .55);
color: #fbe7df;
font: var(--t-2) / 1.25 var(--police-corps);
}
& .rappel-compte[hidden] { display: none; }
& .rappel-compte .rappel-compte__texte {
position: static;
width: auto;
height: auto;
clip: auto;
overflow: visible;
white-space: normal;
min-width: 0;
}
& .rappel-compte :is(.sceau, .rappel-compte__plus-tard) { min-height: 32px; font-size: var(--t-1); letter-spacing: .06em; }
& .rappel-compte .rappel-compte__plus-tard { min-width: 32px; padding: 0 8px; }
/* ── Les registres : icônes d'alerte rondes à pastille ──────────────── */
& .hud .registre {
position: absolute;
left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + var(--hud-medaillon) / 2 - 26px);
top: calc(var(--marge-haut) + 6px + var(--hud-medaillon) + 8px + 84px);
display: flex;
flex-direction: column;
gap: 12px;
width: 52px;
pointer-events: none;
}
& .hud .registre > * { pointer-events: auto; }
& .hud .registre .volet.volet {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto;
width: 52px;
height: 52px;
max-height: none;
margin: 0;
padding: 0;
display: block;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
& .hud .registre .volet__poignee,
& .hud .registre__bouton {
position: relative;
width: 52px;
height: 52px;
min-width: 0;
min-height: 0;
margin: 0;
padding: 9px;
display: grid;
place-items: center;
border: 2px solid #0c0906;
border-radius: 50%;
background: var(--hud-grain), radial-gradient(circle at 50% 38%, #4a3522, #22170d 72%);
box-shadow: inset 0 2px 3px rgb(255 225 170 / .18), inset 0 -3px 5px rgb(0 0 0 / .7), 0 0 0 3px #3b3f44, 0 0 0 4px var(--hud-or-filet), 0 0 0 5px #0c0906, var(--hud-ombre);
cursor: pointer;
transition: filter 140ms ease, transform 140ms ease;
}
& .hud .registre__bouton { display: none; }
& .hud :is(.registre .volet__poignee, .registre__bouton):hover { filter: brightness(1.18); }
& .hud :is(.registre .volet__poignee, .registre__bouton):active { transform: translateY(1px); }
& .hud .registre .volet__poignee[aria-expanded="true"] {
background: var(--hud-grain), radial-gradient(circle at 50% 38%, #6b4b25, #2e1f0f 72%);
box-shadow: inset 0 2px 3px rgb(255 225 170 / .25), inset 0 -3px 5px rgb(0 0 0 / .7), 0 0 0 3px #b8964f, 0 0 0 4px #f0d9a0, 0 0 0 5px #0c0906, 0 0 14px rgb(240 217 160 / .55);
}
& .hud :is(.volet__icone, .registre__icone) { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgb(0 0 0 / .85)); }
& .hud .registre .volet__titre {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
& .hud .registre .volet__chevron { display: none; }
& .hud .registre .volet__poignee::after { content: attr(data-infobulle); }
/* Les ferrures d'angle et le losange de l'ancien volet (parure-carte.css) n'ont plus de place sur une icône ronde. */
& .hud .registre .volet::before,
& .hud .registre .volet::after,
& .hud .registre .volet__poignee::before,
& .hud .registre .volet__titre::after { content: none; display: none; }
& .hud .registre .volet__poignee::after,
& .hud .registre__bouton::after { left: calc(100% + 14px); top: 50%; transform: translateY(-50%); }
/* La pastille : une goutte de cire, le compte en or. */
& .hud :is(.registre .volet__compte, .registre__compte) {
position: absolute;
top: -6px;
right: -8px;
min-width: 22px;
height: 22px;
min-height: 0;
padding: 0 5px;
display: grid;
place-items: center;
border-radius: 11px;
background: radial-gradient(circle at 40% 30%, #d6453a, #7e1d16 70%);
box-shadow: inset 0 1px 1px rgb(255 200 180 / .5), 0 0 0 2px #0c0906, 0 2px 3px rgb(0 0 0 / .6);
color: #fff3e6;
font: 700 var(--t-1) / 1 var(--police-titre);
}
& .hud :is(.registre .volet__compte, .registre__compte)[hidden] { display: none; }
& .hud .registre .volet__compte--neuves { background: radial-gradient(circle at 40% 30%, #e0bb62, #8e6d28 70%); color: #1b130b; }
& .hud .registre__bouton.a-des-nouvelles::before {
content: "";
position: absolute;
left: -3px;
top: -3px;
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle at 40% 30%, #f0d9a0, #8e6d28);
box-shadow: 0 0 0 2px #0c0906;
}
/* Le panneau d'un registre : cuir sombre, filet d'or, coins ornés, à droite de son icône. */
& .hud .registre .volet__corps {
position: absolute;
z-index: 5;
left: 66px;
top: -10px;
width: min(22rem, calc(100vw - 140px));
max-height: calc(100dvh - var(--marge-haut) - var(--hud-medaillon) - 150px - var(--hud-bas));
margin: 0;
padding: 12px 14px 14px;
overflow: auto;
overscroll-behavior: contain;
border: 1px solid #0c0906;
border-radius: 6px;
background:
url(/jeu/images/cadres/coin-hg.webp) left 3px top 3px / 34px auto no-repeat,
url(/jeu/images/cadres/coin-hd.webp) right 3px top 3px / 34px auto no-repeat,
var(--hud-grain), linear-gradient(160deg, #33251a, #1a120b);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), inset 0 0 0 3px #0c0906, 0 14px 30px rgb(0 0 0 / .7);
scrollbar-width: thin;
scrollbar-color: #8e6d28 transparent;
}
& .hud .registre .volet__entete {
margin: 0 0 10px;
padding: 0 30px 20px;
background: url(/jeu/images/cadres/separateur.webp) center bottom / auto 16px no-repeat;
color: var(--hud-or-clair);
font: 700 var(--t-4) / 1.2 var(--police-titre);
letter-spacing: .1em;
font-variant: small-caps;
text-align: center;
text-shadow: 0 1px 1px #000;
}
/* ── Les outils de la carte : une grappe autour d'une boussole ────────── */
& .monde__outils {
position: absolute;
top: auto;
left: auto;
right: calc(var(--marge-droite) + 16px);
bottom: calc(var(--marge-bas) + 14px);
transform: none;
z-index: 12;
}
& .monde__outils .carte__outils {
position: relative;
display: grid;
grid-template-columns: var(--hud-outil) calc(var(--hud-boussole) / 2) calc(var(--hud-boussole) / 2);
grid-template-rows: var(--hud-outil) calc(var(--hud-boussole) / 2) calc(var(--hud-boussole) / 2) 34px;
grid-template-areas:
". chercher calques"
"chez boussole boussole"
"royaume boussole boussole"
". reculer approcher";
gap: 6px;
align-items: center;
justify-items: center;
padding: 0;
border: 0;
background: none;
box-shadow: none;
flex-direction: row;
}
& .monde__outils .carte__outils > .carte__outil,
& .monde__outils .carte__outils > button {
position: relative;
width: var(--hud-outil);
height: var(--hud-outil);
min-width: 0;
min-height: 0;
margin: 0;
padding: 0;
display: grid;
place-items: center;
border: 1px solid #0c0906;
border-radius: 50%;
background: var(--hud-fer-rond);
box-shadow: inset 0 1px 1px rgb(255 255 255 / .38), inset 0 -2px 3px rgb(0 0 0 / .65), 0 0 0 1px var(--hud-or-filet), 0 3px 6px rgb(0 0 0 / .6);
color: var(--hud-or-clair);
font-size: var(--t-4);
transform: none;
transition: filter 140ms ease, transform 140ms ease;
}
& .monde__outils .carte__outils > button svg { width: 58%; height: 58%; filter: drop-shadow(0 1px 1px #000); }
& .monde__outils .carte__outils > button:hover { filter: brightness(1.2); background: var(--hud-fer-rond); border-color: #0c0906; transform: none; }
& .monde__outils .carte__outils > button:active { transform: translateY(1px); filter: brightness(.9); }
& .monde__outils .carte__outils > button:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 2px; }
& .monde__outils .carte__outils > button[aria-expanded="true"],
& .monde__outils .carte__outils > .carte__outil--filtres.est-filtree {
color: #1b130b;
background: radial-gradient(circle at 50% 30%, #fbe7b0, #d3ad5c 45%, #8e6d28 100%);
border-color: #0c0906;
}
& .monde__outils .carte__outils > .carte__outil--approcher { grid-area: approcher; width: 34px; height: 34px; }
& .monde__outils .carte__outils > .carte__outil--reculer { grid-area: reculer; width: 34px; height: 34px; }
& .monde__outils .carte__outils > .carte__outil--chez-toi { grid-area: chez; }
& .monde__outils .carte__outils > .carte__outil--royaume { grid-area: royaume; }
& .monde__outils .carte__outils > .carte__outil--filtres { grid-area: calques; }
& .monde__outils .carte__outils > .carte__outil--chercher { grid-area: chercher; }
& .monde__outils .carte__outils > .carte__outil--boussole {
grid-area: boussole;
width: var(--hud-boussole);
height: var(--hud-boussole);
padding: 7px;
border: 2px solid #0c0906;
background: var(--hud-grain), radial-gradient(circle at 50% 42%, #3e2c1b, #1a120b 72%);
box-shadow: inset 0 0 0 3px #3b3f44, inset 0 0 0 4px var(--hud-or-filet), inset 0 4px 8px rgb(0 0 0 / .75), 0 0 0 2px #62676d, 0 0 0 3px #0c0906, var(--hud-ombre);
}
& .monde__outils .carte__outils > .carte__outil--boussole svg {
width: 100%;
height: 100%;
transform: rotate(var(--cap, 0rad));
transition: transform 90ms linear;
filter: drop-shadow(0 1px 2px #000);
}
/* L'infobulle des outils, à gauche de la grappe. */
& .monde__outils .carte__outils > button::after { content: attr(aria-label); right: calc(100% + 12px); top: 50%; transform: translateY(-50%); }
/* Le champ de recherche s'ouvre à gauche de la grappe, à hauteur de la loupe. */
& .monde__outils .carte__outils > .carte__recherche {
position: absolute;
right: calc(100% + 10px);
top: 0;
display: flex;
padding: 4px;
border: 1px solid #0c0906;
border-radius: 6px;
background: var(--hud-grain), var(--hud-infobulle-fond);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 6px 14px rgb(0 0 0 / .6);
}
& .monde__outils .carte__outils > .carte__recherche[hidden] { display: none; }
& .monde__outils .carte__outils > .carte__recherche .carte__champ { width: 12rem; min-height: 36px; }
/* ── La barre d'actions : cinq cases dans un socle de bois ─────────────── */
& .barre.barre {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: max-content;
height: auto;
min-height: 0;
margin-inline: auto;
padding: 9px 30px calc(var(--marge-bas) + 9px);
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
transform: none;
background: var(--hud-bois);
border: 0;
border-radius: 16px 16px 0 0;
box-shadow: var(--hud-relief), 0 0 0 2px #3b3f44, 0 0 0 3px var(--hud-or-filet), 0 0 0 4px #0c0906, 0 -10px 24px rgb(0 0 0 / .55);
-webkit-mask-image: none;
mask-image: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Les deux coins ornés du socle (cadres/coin-*.webp, les dragons d'or du jeu). */
& .barre.barre::before,
& .barre.barre::after {
content: "";
position: absolute;
top: 3px;
width: 30px;
height: 28px;
background: url(/jeu/images/cadres/coin-hg.webp) left top / contain no-repeat;
filter: drop-shadow(0 1px 1px #000);
pointer-events: none;
}
& .barre.barre::before { left: 4px; }
& .barre.barre::after { right: 4px; background-image: url(/jeu/images/cadres/coin-hd.webp); background-position: right top; }
& .barre .barre__entree.barre__entree {
position: relative;
flex: 0 0 auto;
width: var(--hud-case);
height: calc(var(--hud-case) + 2px);
min-width: 0;
min-height: 0;
margin: 0;
padding: 6px 2px 4px;
display: grid;
grid-template-rows: 1fr auto;
justify-items: center;
align-items: center;
gap: 1px;
border: 2px solid #0c0906;
border-radius: 8px;
background: var(--hud-grain), radial-gradient(circle at 50% 30%, #3a2a1b, #160f09 78%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 4px 8px rgb(0 0 0 / .8), 0 0 0 2px #50555b, 0 0 0 3px #0c0906, 0 3px 6px rgb(0 0 0 / .5);
color: #d8c49a;
transform: none;
transition: filter 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}
& .barre .barre__entree.barre__entree:hover { filter: brightness(1.18); transform: translateY(-2px); background: var(--hud-grain), radial-gradient(circle at 50% 30%, #4a3624, #1b120a 78%); border-color: #0c0906; color: var(--hud-or-clair); }
& .barre .barre__entree.barre__entree:active { transform: translateY(1px); filter: brightness(.92); }
& .barre .barre__entree.barre__entree:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 4px; }
& .barre .barre__entree.barre__entree.est-actif {
color: #fff1cc;
background: var(--hud-grain), radial-gradient(circle at 50% 30%, #6b4b25, #2a1b0c 78%);
box-shadow: inset 0 0 0 1px #f0d9a0, inset 0 0 14px rgb(240 190 100 / .35), 0 0 0 2px #d3ad5c, 0 0 0 3px #0c0906, 0 0 16px rgb(240 200 120 / .55);
transform: translateY(-3px);
}
& .barre .barre__icone.barre__icone {
width: calc(var(--hud-case) * .56);
height: calc(var(--hud-case) * .56);
border-radius: 50%;
opacity: 1;
box-shadow: none;
filter: drop-shadow(0 2px 2px rgb(0 0 0 / .85)) saturate(.95);
}
& .barre svg.barre__icone { fill: currentColor; padding: 4px; }
& .barre .barre__entree:not(.est-actif) .barre__icone { filter: drop-shadow(0 2px 2px rgb(0 0 0 / .85)) saturate(.75) brightness(.9); }
& .barre .barre__mot.barre__mot {
font: 700 .64rem / 1 var(--police-titre);
letter-spacing: .08em;
font-variant: small-caps;
text-transform: none;
text-shadow: 0 1px 1px #000;
}
& .barre .barre__entree::after { content: attr(data-infobulle); bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
& .barre .barre__point { top: 3px; right: 5px; width: 10px; height: 10px; background: radial-gradient(circle at 40% 30%, #e0655d, #7e1d16); box-shadow: 0 0 0 2px #0c0906; }
/* Le blason de la maison du joueur, sur la case de sa demeure. */
& .barre .barre__blason { position: absolute; top: 3px; right: 3px; width: 20px; height: 22px; display: grid; place-items: center; filter: drop-shadow(0 1px 1px #000); }
& .barre .barre__blason[hidden] { display: none; }
& .barre .barre__blason > * { max-width: 100%; max-height: 100%; }
/* ── Bureau serré (961 à 1 200 px) : les cases se resserrent ─────────── */
/* Plaque compacte jusqu'à 1 344 px : à 1280 × 800, sept réserves et la Nuit entière (« Nuit 5/7 · assaut demain »,
« 70 morts ») passaient 46 px sous la pastille ; compactes, il reste 42 px (audit du 8/10/2026). */
@media (min-width: 60.0625rem) and (max-width: 84rem) {
& .hud .bandeau { gap: 10px; }
& .hud .bandeau .tresor.tresor { padding: 0 8px 0 6px; gap: 4px; }
& .hud .bandeau .tresor__marque.tresor__marque { width: 24px; height: 24px; }
& .hud .bandeau .tresor__stock.tresor__stock { font-size: var(--t-3); }
& .hud .bandeau .bandeau__nom { font-size: var(--t-4); }
}
@media (min-width: 60.0625rem) and (max-width: 75rem) {
& .hud .bandeau .bandeau__nuit-horde { display: none; }
& .rappel-compte .rappel-compte__long { display: none; }
& .rappel-compte .rappel-compte__court { display: inline; }
}
/* ── Tablette et téléphone : le jour et la Nuit pendent sous la plaque ── */
@media (max-width: 60rem) {
/* Le ruban du compte passe sous le jour pendu : à 768 px, la plaque du jour cachait « Lier » (relevé du 29/09/2026). */
& .rappel-compte { top: calc(var(--marge-haut) + var(--hud-barre) + 54px); }
& .hud .bandeau { gap: 10px; }
& .hud .bandeau .bandeau__jour {
position: absolute;
top: calc(100% + 10px);
right: calc(var(--marge-droite) + 8px);
display: flex;
align-items: center;
gap: 8px;
padding: 4px 6px 4px 10px;
border: 1px solid #0c0906;
border-radius: 0 0 6px 6px;
background: var(--hud-grain), var(--hud-infobulle-fond);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6), 0 4px 8px rgb(0 0 0 / .5);
}
& .hud .bandeau .bandeau__nuit-horde { display: none; }
& .hud .bandeau .bandeau__nom { font-size: var(--t-4); }
& .hud .bandeau .tresor.tresor { padding: 0 8px 0 6px; gap: 4px; }
& .hud .bandeau .tresor__marque.tresor__marque { width: 24px; height: 24px; }
& .hud .bandeau .tresor__stock.tresor__stock { font-size: var(--t-3); }
/* Le coffre défile quand il ne tient pas, et le dit : fondu et flèche au bord qui cache (coque.js, data-bout). */
& .hud .bandeau .bandeau__tresor.bandeau__tresor { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 14px; }
& .hud .bandeau .bandeau__tresor[data-deborde="oui"] { padding-inline: 14px; }
& .hud .bandeau .tresor.tresor { scroll-snap-align: start; }
& .hud .bandeau .bandeau__coffre:is([data-bout="debut"], [data-bout="milieu"])::after,
& .hud .bandeau .bandeau__coffre:is([data-bout="fin"], [data-bout="milieu"])::before {
content: "›";
position: absolute;
z-index: 2;
top: 1px;
bottom: 1px;
right: 1px;
width: 16px;
display: grid;
place-items: center;
border-radius: 0 6px 6px 0;
background: linear-gradient(90deg, transparent, #120c07 60%);
color: var(--or-vif);
font: 700 var(--t-5) / 1 var(--police-titre);
text-shadow: 0 0 4px #000;
pointer-events: none;
}
& .hud .bandeau .bandeau__coffre:is([data-bout="fin"], [data-bout="milieu"])::before {
content: "‹";
right: auto;
left: 1px;
border-radius: 6px 0 0 6px;
background: linear-gradient(270deg, transparent, #120c07 60%);
}
/* La décomposition d'un débit sort du coffre qui défile : posée sur l'écran, sous la plaque. */
& .hud .bandeau .bandeau__coffre .chiffre__lignes,
& .hud .bandeau .bandeau__coffre .chiffre--dessous .chiffre__lignes {
position: fixed;
top: calc(var(--marge-haut) + var(--hud-barre) + 14px);
bottom: auto;
left: 50%;
right: auto;
width: min(24rem, calc(100vw - 16px));
min-width: 0;
max-width: none;
transform: translateX(-50%);
}
& .hud .bandeau .bandeau__coffre .chiffre__lignes::after { display: none; }
& .rappel-compte .rappel-compte__long { display: none; }
& .rappel-compte .rappel-compte__court { display: inline; }
}
/* ── Téléphone : une plaque de réserves, un médaillon, un seul registre ─ */
@media (max-width: 42rem), (max-height: 30rem) and (orientation: landscape) {
& .hud .bandeau { padding-left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + var(--hud-medaillon) + 8px); padding-right: calc(var(--marge-droite) + 6px); gap: 6px; }
& .hud .bandeau .bandeau__portrait { top: 4px; }
& .hud .bandeau .bandeau__portrait::before { inset: 2px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); }
& .hud .bandeau .bandeau__portrait[data-niveau]::after { right: -6px; bottom: -2px; min-width: 24px; height: 24px; font-size: var(--t-1); }
/* Le nom, le rang et le niveau passent sur la plaque gravée, sous le médaillon. */
& .hud .bandeau .bandeau__identite {
position: absolute;
z-index: 2;
left: calc(var(--marge-gauche) + 4px);
top: calc(4px + var(--hud-medaillon) + 6px);
width: var(--hud-plaque);
display: grid;
grid-template-columns: 100%;
justify-items: center;
gap: 1px;
padding: 5px 8px 6px;
border: 7px solid transparent;
border-image: url(/jeu/images/cadres/plaque-sang.webp) 40 44 fill / 7px 8px stretch;
filter: drop-shadow(0 3px 4px rgb(0 0 0 / .6));
text-align: center;
}
/* La plaque du téléphone : le prénom seul, le patronyme reste lu par le lecteur d'écran et dans l'infobulle. */
& .hud .bandeau .bandeau__patronyme { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
& .hud .bandeau .bandeau__identite > .bandeau__nom {
grid-area: auto;
position: static;
width: 100%;
min-width: 0;
max-width: none;
height: auto;
margin: 0;
justify-content: center;
clip: auto;
overflow: visible;
font-size: var(--t-2);
}
& .hud .bandeau .bandeau__identite > .bandeau__rang {
grid-area: auto;
position: static;
width: 100%;
padding: 0;
border: 0;
border-image: none;
filter: none;
display: grid;
gap: 1px;
}
/* Le rang tient sur une ligne, même « Grand Seigneur » : la plaque garde trois lignes et le registre sa place dessous. */
& .hud .bandeau .bandeau__rang > #rang-affiche { font-size: .66rem; letter-spacing: .03em; white-space: nowrap; }
& .hud .bandeau .bandeau__rang > .bandeau__niveau { font-size: .66rem; }
& .hud .bandeau .bandeau__rang .bandeau__xp { width: 70%; height: 3px; }
& .hud .bandeau .bandeau__coffre { justify-content: flex-start; }
& .hud .bandeau .bandeau__tresor.bandeau__tresor { height: 38px; padding: 0 2px; border-radius: 5px; }
& .hud .bandeau .tresor.tresor { padding: 0 6px 0 4px; gap: 3px; }
& .hud .bandeau .tresor__marque.tresor__marque { width: 20px; height: 20px; }
& .hud .bandeau .tresor__stock.tresor__stock { font-size: var(--t-2); }
& .hud .bandeau .tresor__debit.tresor__debit { font-size: .62rem; }
& .hud .bandeau .tresor::after { display: none; }
& .hud .bandeau .bandeau__menu { width: 38px; height: 38px; padding: 6px; }
& .hud .bandeau .bandeau__jour { top: calc(100% + 9px); font-size: .62rem; gap: 6px; padding: 3px 4px 3px 8px; }
& .hud .bandeau .bandeau__nuit { min-height: 26px; padding: 2px 8px 2px 4px; }
& .hud .bandeau .bandeau__nuit-glace { width: 16px; height: 16px; }
/* L'assaut ne garde que la bordure rouge : le mot tient dans la page de la Nuit. */
& .hud .bandeau .bandeau__nuit .bandeau__nuit-assaut { display: none; }
/* Le ruban du compte, plus court. */
& .rappel-compte {
top: calc(var(--marge-haut) + var(--hud-barre) + 48px);
max-width: calc(100vw - var(--hud-plaque) - 20px);
margin: 0 calc(var(--marge-droite) + 8px) 0 auto;
padding: 3px 4px 3px 10px;
gap: 6px;
font-size: var(--t-1);
}
& .rappel-compte :is(.sceau, .rappel-compte__plus-tard) { min-height: 44px; }
/* « Lier » et une croix, comme le rappel de cadre.css : le nom entier reste celui du bouton. */
& .rappel-compte :is(.sceau, .rappel-compte__plus-tard) { font-size: 0; min-width: 44px; padding: 0 8px; letter-spacing: 0; }
& .rappel-compte .sceau::after { content: "Lier" / ""; font-size: var(--t-1); letter-spacing: .08em; }
& .rappel-compte .rappel-compte__plus-tard::after { content: "✕" / ""; font-size: var(--t-3); }
/* Sur la carte, la rangée des alertes tient le dessous de la plaque du jour, à la même hauteur : le ruban passait
sous elle, « Lier » et la croix couverts (16/10/2026). Debout, il descend sous la rangée ; couché, il se pose en
bas à gauche, au-dessus de la barre, loin des outils de la carte. */
& .rappel-compte { top: calc(var(--marge-haut) + var(--hud-barre) + 104px); }
@media (orientation: landscape) and (max-height: 30rem) {
& .rappel-compte {
top: auto;
bottom: calc(var(--marge-bas) + var(--hud-bas) + 10px);
margin: 0 auto 0 calc(var(--marge-gauche) + 8px);
}
}
/* Un seul bouton pour les deux registres ; ouvert, une feuille qui les tient ensemble. */
& .hud .registre__bouton {
display: grid;
position: absolute;
left: calc(var(--marge-gauche) + 4px + var(--hud-plaque) / 2 - 24px);
top: calc(var(--marge-haut) + 4px + var(--hud-medaillon) + 6px + 84px);
width: 48px;
height: 48px;
padding: 8px;
}
& .hud .registre__bouton::after { display: none; }
& .hud .registre {
display: none;
position: fixed;
z-index: 50;
left: calc(var(--marge-gauche) + 8px);
right: calc(var(--marge-droite) + 8px);
top: calc(var(--marge-haut) + var(--hud-barre) + 12px);
bottom: calc(var(--marge-bas) + var(--hud-bas) + 10px);
width: auto;
gap: 8px;
padding: 10px;
border: 1px solid #0c0906;
border-radius: 8px;
background:
url(/jeu/images/cadres/coin-hg.webp) left 3px top 3px / 30px auto no-repeat,
url(/jeu/images/cadres/coin-hd.webp) right 3px top 3px / 30px auto no-repeat,
var(--hud-grain), linear-gradient(160deg, #33251a, #1a120b);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), inset 0 0 0 3px #0c0906, 0 14px 30px rgb(0 0 0 / .75);
pointer-events: auto;
}
& .hud .registre[data-ouvert="1"] { display: flex; }
& .hud .registre .volet.volet { width: auto; height: auto; display: flex; flex-direction: column; min-height: 0; flex: 0 0 auto; }
& .hud .registre .volet.volet:has(> .volet__poignee[aria-expanded="true"]) { flex: 1 1 auto; }
& .hud .registre .volet__poignee {
width: 100%;
height: 52px;
padding: 6px 12px 6px 8px;
display: flex;
align-items: center;
gap: 12px;
border-radius: 6px;
background: var(--hud-grain), linear-gradient(180deg, #3a2a1b, #1d140c);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .5), 0 2px 4px rgb(0 0 0 / .5);
}
& .hud .registre .volet__poignee[aria-expanded="true"] { box-shadow: inset 0 0 0 1px #f0d9a0, 0 0 10px rgb(240 217 160 / .35); }
& .hud .registre .volet__icone { width: 36px; height: 36px; flex: 0 0 auto; }
& .hud .registre .volet__titre {
position: static;
width: auto;
height: auto;
margin: 0;
clip: auto;
flex: 1 1 auto;
text-align: left;
color: var(--hud-or-clair);
font: 700 var(--t-3) / 1 var(--police-titre);
letter-spacing: .08em;
font-variant: small-caps;
}
& .hud .registre .volet__compte { position: static; }
& .hud .registre .volet__poignee::after { display: none; }
& .hud .registre .volet__corps {
position: static;
flex: 1 1 auto;
width: auto;
max-height: none;
min-height: 0;
padding: 8px 4px 4px;
border: 0;
background: none;
box-shadow: none;
}
& .hud .registre .volet__entete { display: none; }
/* Les outils : pas de zoom (le pincement), la grappe au-dessus de la barre d'actions. */
& .monde__outils { bottom: calc(var(--marge-bas) + var(--hud-bas) + 12px); right: calc(var(--marge-droite) + 8px); }
& .monde__outils .carte__outils {
grid-template-rows: var(--hud-outil) calc(var(--hud-boussole) / 2) calc(var(--hud-boussole) / 2);
grid-template-areas:
". chercher calques"
"chez boussole boussole"
"royaume boussole boussole";
gap: 4px;
}
& .monde__outils .carte__outils > :is(.carte__outil--approcher, .carte__outil--reculer) { display: none; }
& .monde__outils .carte__outils > .carte__recherche { top: auto; bottom: calc(100% + 8px); right: 0; }
/* La barre d'actions prend la largeur : cinq cases au doigt. */
& .barre.barre {
width: auto;
margin: 0;
padding: 6px 8px calc(var(--marge-bas) + 5px);
gap: 6px;
border-radius: 0;
box-shadow: var(--hud-relief), 0 -2px 0 #3b3f44, 0 -3px 0 var(--hud-or-filet), 0 -4px 0 #0c0906, 0 -8px 18px rgb(0 0 0 / .5);
}
& .barre.barre::before, & .barre.barre::after { display: none; }
& .barre .barre__entree.barre__entree { flex: 1 1 0; width: auto; height: 52px; padding: 5px 2px 3px; }
& .barre .barre__icone.barre__icone { width: 28px; height: 28px; }
& .barre .barre__mot.barre__mot { font-size: .62rem; }
& .barre .barre__entree::after { display: none; }
& .barre .barre__entree.barre__entree.est-actif { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
& :is(.carte__outil, .barre__entree, .volet__poignee, .bandeau__menu, .registre__bouton, .tresor, .bandeau__portrait)::after { transition: none; }
& .monde__outils .carte__outils > .carte__outil--boussole svg { transition: none; }
& :is(.barre__entree, .registre .volet__poignee, .registre__bouton, .bandeau__portrait, .carte__outil) { transition: none; }
}
}
/* ── Pendant un écran ou une visite de cité : le HUD se resserre dans sa plaque ──
Le médaillon rentre dans la plaque (il couvrait le retour d'une page et la
bande de tête d'une visite), la plaque gravée et le ruban du compte se
retirent ; au téléphone, le jour et la Nuit remontent dans la plaque. */
html[data-vue="jeu"][data-page-ouverte]:not(#hud#hud#hud#hud) #jeu,
html[data-vue="jeu"]:not(#hud#hud#hud#hud):has(#monde[data-visite="visite"]) #jeu {
& .hud .bandeau { padding-left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + 40px + 16px); }
& .hud .bandeau .bandeau__portrait { --hud-medaillon: 40px; top: calc((var(--hud-barre) - 40px) / 2); }
& .hud .bandeau .bandeau__portrait::after { display: none; }
& .hud .bandeau .bandeau__portrait::before { inset: 1px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
& .hud .bandeau .bandeau__rang { display: none; }
& .rappel-compte { display: none; }
@media (max-width: 60rem) {
& .hud .bandeau .bandeau__jour { position: static; padding: 0; border: 0; background: none; box-shadow: none; }
& .hud .bandeau .bandeau__jour #jour { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
@media (max-width: 42rem), (max-height: 30rem) and (orientation: landscape) {
& .hud .bandeau .bandeau__identite { display: none; }
& .hud .bandeau .bandeau__nuit #bandeau-nuit-txt { font-size: .62rem; }
}
}
/* Une feuille de la carte ouverte retire aussi le ruban du compte, comme un écran : au bureau, la feuille en colonne
couvrait son début (« …ace les données du navigateur »), et au téléphone il prenait 60 pixels à la bande où se
cadre le lieu (16/10/2026). La clé du bandeau garde sa goutte de cire. */
html[data-vue="jeu"]:not(#hud#hud#hud#hud):has(#feuille:not([hidden])) #jeu .rappel-compte { display: none; }
/* La feuille en colonne à gauche (46rem et plus) : le HUD se resserre comme pendant un écran. Elle coupait le bas du
médaillon et sa pastille, et couvrait la plaque du rang et le registre ; au téléphone couché, toute la plaque du
héros (16/10/2026). */
@media (min-width: 46rem) {
html[data-vue="jeu"]:not(#hud#hud#hud#hud):has(#feuille:not([hidden])) #jeu {
& .hud .bandeau { padding-left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + 40px + 16px); }
& .hud .bandeau .bandeau__portrait { --hud-medaillon: 40px; top: calc((var(--hud-barre) - 40px) / 2); }
& .hud .bandeau .bandeau__portrait::after { display: none; }
& .hud .bandeau .bandeau__portrait::before { inset: 1px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); }
& .hud .bandeau .bandeau__rang { display: none; }
& .hud :is(.registre, .registre__bouton) { display: none; }
@media (max-height: 30rem) and (orientation: landscape) {
& .hud .bandeau .bandeau__identite { display: none; }
}
}
}
/* Pendant un écran, les registres se retirent (leurs affaires sont sur la Demeure). */
html[data-vue="jeu"][data-page-ouverte]:not(#hud#hud#hud#hud) #jeu {
& .hud :is(.registre, .registre__bouton) { display: none; }
}
/* Pendant une visite, les deux icônes d'alerte passent dans la plaque, à droite du médaillon ; leur panneau s'ouvre dessous.
Au téléphone, le bouton du registre se retire : la visite a ses propres bandes. Un écran ouvert
par-dessus la visite garde la plaque d'un écran : ses registres sont retirés. */
html[data-vue="jeu"]:not([data-page-ouverte]):not(#hud#hud#hud#hud):has(#monde[data-visite="visite"]) #jeu {
@media (min-width: 42.0625rem) {
& .hud .bandeau { padding-left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + 40px + 16px + 2 * 48px); }
& .hud .registre { flex-direction: row; gap: 8px; width: auto; left: calc(var(--marge-gauche) + var(--hud-medaillon-gauche) + 40px + 14px); top: calc(var(--marge-haut) + (var(--hud-barre) - 40px) / 2); z-index: 45; }
& .hud .registre .volet.volet, & .hud .registre .volet__poignee { width: 40px; height: 40px; }
& .hud .registre .volet__poignee { padding: 6px; }
& .hud .registre .volet__corps { left: 0; top: calc(100% + 16px); }
& .hud .registre .volet__poignee::after { left: 50%; top: calc(100% + 14px); transform: translateX(-50%); }
}
@media (max-width: 42rem), (max-height: 30rem) and (orientation: landscape) {
& .hud .registre__bouton { display: none; }
}
}
/* ── 7. L'habit de jeu des écrans ────────────────────────────────────────
Demande du propriétaire du 29/09/2026 : « tout le site (chaque page) »
doit ressembler à un jeu vidéo, avec les pièces du HUD. Les pièces
communes vivent ici et dans les sections 1 à 4 (plaque de titre, signets,
boutons de fer et de cire, panneaux), pas dans une seconde feuille.
Proposition soumise au propriétaire : la fenêtre et les panneaux habillent
d'abord la Demeure (#cour) et l'Armée (#hommes) ; les autres écrans les
prendront après sa validation, écran par écran. Titre, onglets, boutons,
cadres et infobulles sont déjà communs à tous les écrans.
Matières : les cadres du jeu (jeu/images/cadres/), le grain et le fer du
HUD (section 6). La fenêtre est cadre-fenetre.webp, un cadre en neuf
parts tiré des coins et du filet de ces cadres (jeu/images/cadres/SOURCES.md).
───────────────────────────────────────────────────────────────────────── */
html[data-vue="jeu"],
#creation.creation {
/* Un panneau de jeu : fond de pierre sombre et grain, quatre coins d'or,
deux filets d'or séparés d'un joint noir. */
--habit-coins:
url(/jeu/images/cadres/coin-hg.webp) left 1px top 1px / 28px auto no-repeat,
url(/jeu/images/cadres/coin-hd.webp) right 1px top 1px / 28px auto no-repeat,
url(/jeu/images/cadres/coin-bg.webp) left 1px bottom 1px / 28px auto no-repeat,
url(/jeu/images/cadres/coin-bd.webp) right 1px bottom 1px / 28px auto no-repeat;
--habit-panneau:
var(--habit-coins),
var(--hud-grain),
radial-gradient(130% 90% at 50% 0%, rgb(74 58 40 / .42), transparent 70%),
linear-gradient(180deg, #1f1b17, #110f0c);
--habit-panneau-filets:
inset 0 0 0 1px rgb(184 150 79 / .6), inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(184 150 79 / .22),
inset 0 0 28px rgb(0 0 0 / .55), 0 4px 10px rgb(0 0 0 / .5);
--habit-parchemin:
var(--hud-grain),
radial-gradient(120% 100% at 50% 40%, transparent 55%, rgb(120 80 30 / .28)),
linear-gradient(180deg, var(--parchemin), var(--parchemin-bas));
--habit-fenetre: 22px;
@media (max-width: 42rem) {
--habit-fenetre: 10px;
}
}
/* ── La fenêtre : l'écran posé dans un cadre de fer et d'or ─────────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#cour, #hommes, #siege, #forge, #gouverner, #reglages, #quetes, #classements, #encyclopedie, #role).page {
border: var(--habit-fenetre) solid transparent;
border-image: url(/jeu/images/cadres/cadre-fenetre.webp) 44 / var(--habit-fenetre) stretch;
background:
var(--hud-grain),
radial-gradient(140% 80% at 50% 0%, rgb(70 54 36 / .45), transparent 60%),
linear-gradient(180deg, #17130f, #0b0907);
box-shadow: inset 0 0 70px rgb(0 0 0 / .65);
}
/* ── Les panneaux ───────────────────────────────────────────────────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour :is(.priorites, .actes-systeme, .salle-tresor),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) :is(.ost__registre, .ost__tuile) {
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour :is(#mestre-conseil, .priorites, .actes-systeme, .salle-tresor) {
padding: var(--e-3) var(--e-4);
}
/* Le conseil du mestre et le verrou de l'armée : le même panneau, filet de cire. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour #mestre-conseil,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__verrou {
border: 1px solid #0b0a09;
border-radius: 3px;
background:
var(--habit-coins),
var(--hud-grain),
radial-gradient(130% 90% at 0% 0%, rgb(140 30 24 / .30), transparent 65%),
linear-gradient(180deg, #211815, #120d0b);
box-shadow:
inset 0 0 0 1px rgb(184 150 79 / .6), inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(170 50 40 / .45),
inset 0 0 28px rgb(0 0 0 / .55), 0 4px 10px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__verrou {
padding: var(--e-3) var(--e-5, 1.5rem);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__tuile {
padding: var(--e-3) var(--e-4) var(--e-3);
}
/* Les étapes du jour : trois plaques de fer, la prochaine cerclée d'or,
la faite passée au vert sourd. Le numéro devient un sceau. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__etape {
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #34373b 0%, #202225 50%, #141518 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .4), inset 0 1px 0 rgb(255 255 255 / .12), 0 3px 8px rgb(0 0 0 / .5);
color: var(--parchemin);
transform: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__etape:is(:hover, :focus-visible) {
background: var(--hud-grain), linear-gradient(180deg, #43474c 0%, #2a2d31 50%, #191b1e 100%);
box-shadow: inset 0 0 0 1px rgb(226 192 118 / .85), inset 0 1px 0 rgb(255 255 255 / .16), 0 0 12px rgb(240 200 120 / .22), 0 3px 8px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__etape.est-prochaine {
background: var(--hud-grain), radial-gradient(120% 120% at 0% 0%, rgb(200 150 60 / .30), transparent 60%), linear-gradient(180deg, #3d352a 0%, #251f18 55%, #161310 100%);
box-shadow: inset 0 0 0 1px #d8b46a, inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(216 180 106 / .35), 0 0 16px rgb(240 190 90 / .25), 0 3px 8px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__etape.est-fait {
box-shadow: inset 0 0 0 1px rgb(110 150 90 / .55), inset 0 1px 0 rgb(255 255 255 / .08), 0 3px 8px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__numero {
background: radial-gradient(circle at 40% 35%, #f3dc9c 0%, #c79a45 45%, #7a5a22 100%);
box-shadow: inset 0 -1px 0 rgb(0 0 0 / .4), 0 0 0 1px #2a1d0c, 0 2px 3px rgb(0 0 0 / .6);
color: #20160a;
font-weight: 700;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__etape.est-fait .boucle-jour__numero {
background: radial-gradient(circle at 40% 35%, #b9d69a 0%, #5f8a45 50%, #2f4a22 100%);
}
/* ── Les titres de panneau : petites capitales d'or, un filet qui s'éteint ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour :is(.colonne__titre, .mestre-conseil__titre, #actes-prets-titre):not(.visuellement-cache),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) :is(.ost__titre, .ost__verrou-titre) {
margin: 0 0 var(--e-2);
padding: 0 0 7px;
border: 0;
background: linear-gradient(90deg, var(--hud-or-filet), rgb(184 150 79 / .35) 45%, transparent 85%) left bottom / 100% 1px no-repeat;
font-family: var(--police-titre);
font-size: var(--t-4);
font-weight: 400;
font-variant: small-caps;
letter-spacing: 0.08em;
text-transform: none;
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__registre-tete {
border-bottom: 0;
}
/* ── Les réserves de la Demeure : des cases d'inventaire ─────────────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource {
min-width: 0;
padding: var(--e-2) var(--e-2);
border: 1px solid #070605;
border-radius: 4px;
background: var(--hud-grain), radial-gradient(100% 100% at 50% 30%, #2a241d, #120f0c);
box-shadow: inset 0 2px 6px rgb(0 0 0 / .75), inset 0 0 0 1px rgb(184 150 79 / .28), 0 1px 0 rgb(255 232 180 / .08);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource + .ressource {
border-top: 1px solid #070605;
}
/* Relevé du propriétaire, 7 octobre 2026 : une réserve pleine écrivait son avertissement dans la colonne du gain du
jour, qui écrasait le stock (« 268 » sous « réserve pleine ») et cassait « +25,5 /j » sur deux lignes ; la case
vide de la dernière rangée montrait le fond doré de la grille. Le stock et le gain partagent une ligne et passent
l'un sous l'autre quand la case est trop étroite ; l'avertissement prend sa propre ligne, sous eux. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressources {
gap: var(--e-1);
padding: 0;
background: none;
border: 0;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource__chiffres {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 var(--e-2);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource__nom { flex: 1 0 100%; min-width: 0; }
/* Au téléphone, « Verredragon » espacé à 0,13 em dépassait sa case de deux colonnes. */
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource__nom { letter-spacing: .04em; }
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor :is(.ressource__stock, .ressource__debit) { white-space: nowrap; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource__debit { margin-left: auto; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .salle-tresor .ressource__plein {
order: 1;
flex: 1 0 100%;
margin-top: 2px;
font-size: var(--t-1);
line-height: 1.25;
color: var(--alerte);
}
/* ── Le registre des troupes : des lignes de registre ────────────────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__entetes {
background: linear-gradient(180deg, rgb(0 0 0 / .35), rgb(0 0 0 / .15));
border-bottom: 1px solid rgb(184 150 79 / .45);
color: var(--hud-or-filet);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__liste > li {
box-shadow: inset 0 -1px 0 rgb(184 150 79 / .14);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__liste > li:nth-child(even) {
background: rgb(255 235 190 / .035);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) .ost__liste > li:is(:hover, :focus-within) {
background: linear-gradient(90deg, rgb(216 180 106 / .16), rgb(216 180 106 / .04) 60%, transparent);
box-shadow: inset 3px 0 0 #d8b46a, inset 0 -1px 0 rgb(184 150 79 / .3);
}
/* ── Les jauges : un rail de fer creusé, une part de métal poli ──────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) :is(.ost__moral-rail, .ost__jauge),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#cour, #hommes) .jauge-parure__rail {
height: 10px;
border: 1px solid #070605;
border-radius: 5px;
background: linear-gradient(180deg, #0b0a08, #1d1a16);
box-shadow: inset 0 2px 3px rgb(0 0 0 / .8), 0 0 0 1px rgb(184 150 79 / .45), 0 1px 0 rgb(255 232 180 / .1);
overflow: hidden;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #recrutement) :is(.ost__moral-part, .ost__jauge > span) {
border-radius: 4px 0 0 4px;
background: linear-gradient(180deg, #f6dfa2 0%, #d0a24c 40%, #8a6424 100%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
}
/* ── L'infobulle de jeu des nombres expliqués ───────────────────────────────
Un parchemin sous cadre d'or, partout : le HUD, les écrans, la carte. */
html[data-vue="jeu"] .chiffre__lignes {
border: 2px solid #3a2a17;
border-radius: 4px;
background: var(--habit-parchemin);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 0 0 1px #0c0906, 0 10px 24px rgb(0 0 0 / .65);
white-space: normal;
font-variant-numeric: tabular-nums;
}
html[data-vue="jeu"] .chiffre__lignes .chiffre__titre {
font-variant: small-caps;
letter-spacing: .05em;
color: #4a2a12;
}
/* ── Au téléphone ───────────────────────────────────────────────────────── */
@media (max-width: 42rem) {
/* Le doigt : 44 px pour chaque commande, liens compris. Cinq identifiants :
les boutons de la section 3 en pèsent quatre. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#cour, #hommes, #siege, #forge, #gouverner, #reglages, #quetes, #classements, #encyclopedie, #role).page button:is(.lien, .est-discret, [class*="__taire"], [class*="__aller"], .cartouche__compris, .personnage-competences__valider, .operations__tri) {
min-height: 44px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .dialogue__entete > .dialogue__titre,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour.page .journee__etat {
padding: 0.55em 6px 0.6em;
border-width: 0 1.6rem;
border-image-width: 0 1.6rem;
font-size: var(--t-5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour.page .journee__etat {
font-size: var(--t-4);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page .onglets-page__entree {
padding-inline: 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page {
gap: 4px;
padding-inline: 0;
}
/* Trois étapes sur 350 px : « COMMENCE ICI » passe sous le sceau et tient dans sa plaque. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour {
gap: 6px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__etape {
padding-inline: 7px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #cour .boucle-jour__statut {
grid-column: 1 / -1;
font-size: var(--t-1);
letter-spacing: 0.02em;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) .onglets-page .onglets-page__entree:is(.est-actif, [aria-selected="true"]) {
padding-inline: 1px;
}
}
/* ── 8. Les écrans en fenêtre de jeu (29/09/2026) ────────────────────────
Décisions du propriétaire, déléguées le 29/09/2026 (« tranche en tant que
senior HUD RPG / gestion ») : la grammaire de Crusader Kings, Football
Manager et Bannerlord.
- Au bureau, l'écran s'ouvre en fenêtre posée sur la scène ; la carte ou la
cité reste derrière, assombrie et floutée.
- Un bandeau illustré en tête : la grande salle pour la Demeure, l'ost sous
ses bannières pour l'Armée. Des bandes natives (jeu/images/demeure/ et
jeu/images/armee/SOURCES.md) : l'image s'affiche entière, jamais rognée
par la feuille, ni étirée au-delà de sa largeur native.
- Les onglets de l'Armée en signets verticaux sur le bord gauche au bureau,
en rail horizontal au téléphone (jeu/ecrans/onglets-page.js dit
l'orientation au lecteur d'écran).
- Les décisions en fenêtre d'événement : l'illustration, le texte court,
un long bouton par choix, ses effets en pastilles, la phrase entière en
infobulle au survol et au clavier (jeu/ecrans/montee.js).
- Le registre des troupes en cartes, la liste en option
(interface/composants/troupes.jsx).
- Les lignes d'aide passent dans un « ? ».
───────────────────────────────────────────────────────────────────────── */
/* ── La fenêtre sur la scène ── */
@media (min-width: 60.0625rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#cour, #hommes, #siege, #forge, #gouverner, #reglages, #quetes, #classements, #encyclopedie, #role).page {
top: calc(var(--bord-haut, 64px) + 10px);
bottom: calc(var(--bord-bas, 90px) + 8px);
left: max(20px, calc((100vw - 1500px) / 2));
right: max(20px, calc((100vw - 1500px) / 2));
box-shadow: inset 0 0 70px rgb(0 0 0 / .65), 0 0 0 1px #000, 0 20px 60px rgb(0 0 0 / .8);
}
html[data-vue="jeu"]:is([data-page-ouverte="cour"], [data-page-ouverte="hommes"], [data-page-ouverte="siege"], [data-page-ouverte="forge"], [data-page-ouverte="gouverner"], [data-page-ouverte="reglages"], [data-page-ouverte="quetes"], [data-page-ouverte="classements"], [data-page-ouverte="encyclopedie"], [data-page-ouverte="role"]) #monde {
filter: blur(3px) brightness(.42) saturate(.7);
transition: filter 180ms ease;
}
}
@media (min-width: 60.0625rem) and (prefers-reduced-motion: reduce) {
html[data-vue="jeu"] #monde { transition: none; }
}
/* ── Le bandeau illustré ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .ecran-bandeau {
position: relative;
z-index: 0;
display: block;
flex: none;
margin: 0 0 -3rem;
padding: 0;
pointer-events: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .ecran-bandeau img {
display: block;
width: 100%;
height: auto;
margin-inline: auto;
/* La bande se fond dans la fenêtre par le bas et sur les côtés : un fondu, pas une coupe. */
-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(180deg, #000 45%, transparent 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-composite: intersect;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .ecran-bandeau--demeure img { max-width: 1024px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > :is(.ecran-bandeau--armee, .ecran-bandeau--quetes, .ecran-bandeau--classements, .ecran-bandeau--encyclopedie, .ecran-bandeau--saison) img { max-width: 1280px; }
/* L'en-tête et les onglets collés gardent leur rang (ecrans-ui-senior.css) : au défilement, le contenu passe dessous. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .ecran-bandeau ~ :not(.dialogue__entete, .onglets-page) {
z-index: 1;
}
/* L'en-tête et les onglets restent collés (sticky) : seuls les autres blocs passent en position relative. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .ecran-bandeau ~ :not(.dialogue__entete, .onglets-page) {
position: relative;
}
/* L'en-tête collé garde un fond : sous le bandeau, il passe transparent tant qu'il n'a pas défilé. */
/* Seulement quand le bandeau se voit : sur un onglet sans bandeau (Domaine, Personnage), l'en-tête collé reste plein. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite):is(#cour, #hommes, #siege[data-onglet-ouvert="batiments"], #siege[data-onglet-ouvert="recherches"], #siege[data-onglet-ouvert="economie"], #forge[data-onglet-ouvert="ascension"], #forge[data-onglet-ouvert="equipement"], #gouverner, #quetes, #classements, #encyclopedie, #role) > .ecran-bandeau + .dialogue__entete {
background: linear-gradient(180deg, transparent, rgb(12 10 8 / .72) 55%);
}
/* L'en-tête collé, une fois le contenu passé dessous (29/09/2026) : une barre pleine, le titre et le retour seuls.
Sur l'Ascension, le titre transparent laissait lire les preuves à travers lui. `data-entete-colle` et
`--entete-rogne` (la hauteur sous le titre) sont posés au défilement par jeu/ecrans/onglets-page.js. Rien ne
change dans la mise en page : le bas de l'en-tête est rogné, pas retiré. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre#cadre) .page:not(#visite)[data-entete-colle] > .dialogue__entete {
background-color: #17130f;
background-image:
url(/jeu/images/cadres/separateur.webp),
linear-gradient(0deg, rgb(0 0 0 / .55), transparent 14px),
linear-gradient(180deg, #2a241d, #17130f);
background-position: center bottom 2px, 0 0, 0 0;
background-size: auto 16px, 100% 100%, 100% 100%;
background-repeat: no-repeat;
}
@media (min-width: 60.0625rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes, #classements, #encyclopedie, #role).page[data-entete-colle] > .dialogue__entete {
clip-path: inset(0 0 var(--entete-rogne, 0px) 0);
background-position: center bottom calc(var(--entete-rogne, 0px) + 2px), 0 calc(-1 * var(--entete-rogne, 0px)), 0 0;
}
/* La note rognée laissait passer le haut de sa première ligne sous le titre : elle se cache, sans quitter sa place. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes, #classements, #encyclopedie, #role).page[data-entete-colle] > .dialogue__entete > :is(.dialogue__note, .siege__mode) {
visibility: hidden;
}
}
/* Le Personnage se collait sous le rembourrage de la page (ecrans-ui-senior.css, `top: 0`) : 14 px de contenu passaient
au-dessus de son titre. Il se colle au bord, comme les autres écrans. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre#cadre) #forge.page > .dialogue__entete {
top: -.9rem;
}
/* Le bandeau montre l'illustration : la vignette de l'en-tête la répétait. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite):has(> .ecran-bandeau) .dialogue__entete > .entete__vignette {
display: none;
}
/* ── Les signets verticaux de l'Armée, au bureau ── */
@media (min-width: 60.0625rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page {
display: grid;
grid-template-columns: 12.5rem minmax(0, 1fr);
column-gap: 20px;
align-content: start;
}
/* Chaque bloc garde sa hauteur : étiré dans sa rangée, un bloc vide (le chantier du Domaine sans chantier) faisait un trou. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page > * { grid-column: 1 / -1; min-width: 0; align-self: start; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page > .dialogue__entete {
align-self: start;
/* La rangée prenait la seule hauteur minimale de l'en-tête : jeu/ecrans/onglets-page.js relève celle du contenu. */
min-height: var(--entete-contenu, 4.2rem);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page > [data-onglet],
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page > .siege-gestion,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #reglages.page > .reglages { grid-column: 2; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page > .onglets-page {
grid-column: 1;
align-self: start;
flex-direction: column;
align-items: stretch;
gap: 6px;
margin: 0;
padding: 6px 0 12px;
overflow: visible;
background: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page > .onglets-page .onglets-page__entree {
margin: 0 -12px 0 0;
padding: 10px 20px 10px 16px;
border: 1px solid #0b0a09;
border-right: 0;
border-radius: 6px 0 0 6px;
text-align: left;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#hommes, #siege, #forge, #gouverner, #reglages, #quetes).page > .onglets-page .onglets-page__entree:is(.est-actif, [aria-selected="true"]) {
margin-right: -20px;
padding: 10px 26px 10px 16px;
border: 0 solid transparent;
border-width: 7px 0 7px 10px;
border-image: url(/jeu/images/cadres/plaque-sang.webp) 40 0 40 44 fill / 7px 0 7px 10px stretch;
box-shadow: 0 3px 8px rgb(0 0 0 / .45);
}
}
/* ── Le « ? » d'une fenêtre ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) .page:not(#visite) button.aide-bulle {
position: relative;
display: inline-grid;
place-items: center;
width: 28px;
min-width: 28px;
height: 28px;
min-height: 28px;
margin: 0 0 0 10px;
padding: 0;
border: 1px solid #0b0a09;
border-radius: 50%;
background: var(--hud-grain), radial-gradient(circle at 40% 35%, #4b4f55, #1c1e21 75%);
box-shadow: inset 0 0 0 1px rgb(214 180 105 / .75), 0 2px 3px rgb(0 0 0 / .5);
font: 700 var(--t-2) / 1 var(--police-titre);
letter-spacing: 0;
text-transform: none;
font-variant: normal;
color: var(--hud-or-clair);
vertical-align: middle;
cursor: help;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) .page:not(#visite) button.aide-bulle:is(:hover, :focus-visible) {
box-shadow: inset 0 0 0 1px #f0d38a, 0 0 10px rgb(240 200 120 / .35), 0 2px 3px rgb(0 0 0 / .5);
color: #fff3d6;
}
html[data-vue="jeu"] .page button.aide-bulle::after {
content: attr(data-infobulle);
position: absolute;
z-index: 30;
top: calc(100% + 8px);
left: -8px;
right: auto;
width: max-content;
max-width: min(24rem, 78vw);
padding: 8px 11px;
border: 2px solid #3a2a17;
border-radius: 4px;
background: var(--habit-parchemin);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 10px 24px rgb(0 0 0 / .65);
font: 400 var(--t-2) / 1.45 var(--police-corps);
letter-spacing: 0;
font-variant: normal;
text-align: left;
text-transform: none;
text-shadow: none;
white-space: normal;
color: #2b1b0c;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
/* Au bout d'un titre de fenêtre, le « ? » est au bord droit : sa bulle s'ouvre vers la gauche. */
html[data-vue="jeu"] .page .evenement__tete button.aide-bulle::after {
left: auto;
right: -8px;
}
html[data-vue="jeu"] .page button.aide-bulle:is(:hover, :focus-visible, :focus)::after {
opacity: 1;
visibility: visible;
}
/* ── Les décisions : la fenêtre d'événement ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision.affaire.evenement {
display: block;
max-width: 54rem;
margin: 0 0 18px;
padding: 0;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
clip-path: none;
color: var(--parchemin);
filter: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__tete {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px 8px 18px;
background: linear-gradient(180deg, #2b2620, #16130f);
box-shadow: inset 0 -1px 0 var(--hud-or-filet), inset 0 -2px 0 #0b0a09;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__titre {
flex: 1 1 auto;
margin: 0;
padding: 0;
border: 0;
background: none;
font: 400 var(--t-5) / 1.2 var(--police-titre);
font-variant: small-caps;
letter-spacing: .06em;
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__image {
margin: 0;
padding: 0;
border: 0;
background: #0b0a09;
box-shadow: inset 0 -1px 0 var(--hud-or-filet);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__image img {
display: block;
width: 100%;
max-width: 1024px;
height: auto;
margin-inline: auto;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__corps {
padding: 14px 18px 12px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__texte {
max-width: 68ch;
margin: 0 0 14px;
font-size: var(--t-3);
line-height: 1.55;
color: var(--parchemin);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__choix {
display: grid;
gap: 8px;
}
/* Un choix : une longue plaque de fer, le sceau du numéro, le mot, les pastilles. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #jeu #affaires button.decision__choix.rangee {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px 12px;
width: 100%;
min-height: 52px;
margin: 0;
padding: 8px 12px 8px 10px;
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #3d4045 0%, #26282c 50%, #17181b 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 1px 0 rgb(255 255 255 / .12), 0 2px 5px rgb(0 0 0 / .5);
color: var(--parchemin);
text-align: left;
transform: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #jeu #affaires button.decision__choix.rangee:is(:hover, :focus-visible):not(:disabled) {
background: var(--hud-grain), radial-gradient(120% 140% at 0% 50%, rgb(200 150 60 / .22), transparent 55%), linear-gradient(180deg, #4b4f55 0%, #2e3135 50%, #1c1e21 100%);
box-shadow: inset 0 0 0 1px #d8b46a, inset 0 1px 0 rgb(255 255 255 / .16), 0 0 14px rgb(240 190 90 / .25), 0 2px 5px rgb(0 0 0 / .5);
outline: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #jeu #affaires button.decision__choix.rangee:focus-visible {
outline: 2px solid var(--or-vif);
outline-offset: 2px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #jeu #affaires button.decision__choix.rangee:disabled {
background: var(--hud-grain), linear-gradient(180deg, #2a2b2d, #19191b);
box-shadow: inset 0 0 0 1px rgb(120 110 95 / .35);
opacity: 1;
cursor: not-allowed;
}
/* L'atténuation porte sur le contenu, pas sur le bouton : l'infobulle d'un choix verrouillé reste opaque. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #jeu #affaires button.decision__choix.rangee:disabled > :not(.decision__detail) {
opacity: .72;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix .decision__numero {
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #f3dc9c 0%, #c79a45 45%, #7a5a22 100%);
box-shadow: inset 0 -1px 0 rgb(0 0 0 / .4), 0 0 0 1px #2a1d0c, 0 2px 3px rgb(0 0 0 / .6);
font: 700 var(--t-2) / 1 var(--police-titre);
color: #20160a;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix:disabled .decision__numero {
background: radial-gradient(circle at 40% 35%, #9a948a, #55514b 75%);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix .rangee__mot {
display: grid;
gap: 2px;
min-width: 0;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix .decision__mot {
font: 400 var(--t-3) / 1.3 var(--police-titre);
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix .choix__verrou {
margin: 0;
font-size: var(--t-2);
font-style: italic;
color: #e5a58f;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastilles {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 6px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastilles > .decision__carte {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastilles > .decision__carte--differe {
padding-left: 8px;
border-left: 1px solid rgb(184 150 79 / .35);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 28px;
padding: 2px 9px 2px 3px;
border-radius: 999px;
background: linear-gradient(180deg, #16130f, #0c0a08);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .5), inset 0 2px 3px rgb(0 0 0 / .6);
font: 700 var(--t-2) / 1 var(--police-corps);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--parchemin);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille.est-gain { color: #a9d98a; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille.est-perte { color: #f09a86; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille.est-suite { color: var(--hud-or-clair); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille.est-neutre {
padding-left: 9px;
font-weight: 400;
font-style: italic;
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille-marque {
width: 22px;
height: 22px;
flex: none;
object-fit: contain;
opacity: 1;
filter: drop-shadow(0 1px 1px #000);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastille svg.decision__pastille-marque {
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
/* La phrase entière : lue par le lecteur d'écran, montrée en infobulle au survol et au clavier. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__detail {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
/* Le choix survolé passe devant ses voisins : un choix verrouillé (opacité .72) enferme son infobulle, que le choix
suivant recouvrait (relevé le 06/10/2026 sur la scène « La route est libre »). Au clavier seulement, pas au focus
posé par la fenêtre à son ouverture : au téléphone, l'infobulle du premier choix couvrait le deuxième (16/10/2026). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix:is(:hover, :focus-visible) {
z-index: 21;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__choix:is(:hover, :focus-visible) .decision__detail {
z-index: 20;
top: calc(100% + 6px);
right: 8px;
left: auto;
display: grid;
gap: 3px;
width: max-content;
max-width: min(30rem, 86vw);
height: auto;
padding: 8px 11px;
overflow: visible;
clip-path: none;
white-space: normal;
border: 2px solid #3a2a17;
border-radius: 4px;
background: var(--habit-parchemin);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 10px 24px rgb(0 0 0 / .65);
font: 400 var(--t-2) / 1.45 var(--police-corps);
color: #2b1b0c;
text-shadow: none;
pointer-events: none;
}
/* Le poids du choix : au second niveau, replié. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__pese {
margin: 12px 0 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__pese-titre {
display: inline-flex;
align-items: center;
min-height: 32px;
font: 400 var(--t-2) / 1.2 var(--police-titre);
font-variant: small-caps;
letter-spacing: .08em;
color: var(--hud-or-filet);
cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__pese-liste {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 14px;
margin: 6px 0 4px;
font-size: var(--t-2);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__pese-mot { color: #b9ad98; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__pese-dit { margin: 0; font-size: var(--t-2); color: #b9ad98; }
/* Tranchée : la fenêtre se referme sur le verdict. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement.est-tranchee { opacity: .9; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__verdict {
margin: 0;
padding: 12px 18px 14px;
border: 0;
background: none;
box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .affaire__verdict {
margin: 0;
padding: 0;
border: 0;
font-size: var(--t-3);
font-style: italic;
line-height: 1.5;
color: var(--parchemin);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__rappel {
display: flex;
align-items: center;
gap: 12px;
margin: 10px 0 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__rappel-vignette { width: 56px; height: 56px; flex: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__rappel-dit { margin: 0; font-size: var(--t-2); color: #d9ccb2; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__jour { color: var(--hud-or-clair); font-family: var(--police-titre); font-weight: 400; }
/* ── L'Armée : les chiffres clés en grand, leur marque devant ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
column-gap: 12px;
row-gap: 2px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile-mot { display: contents; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile .ost__marque--tuile {
grid-column: 1;
grid-row: 1 / span 2;
width: 46px;
height: 46px;
margin: 0;
opacity: 1;
filter: drop-shadow(0 2px 2px #000);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile-chiffre {
grid-column: 2;
font-size: var(--t-8, 2.4rem);
line-height: 1;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile-sous {
grid-column: 1 / -1;
margin-top: 4px;
color: #b9ad98;
}
/* ── L'Armée : les cartes du registre ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__registre-tete {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 16px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__titre {
display: flex;
align-items: center;
margin-bottom: 0;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__verrou-titre { display: flex; align-items: center; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) :is(.ost__vues, .ost__rangements) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__rangements { margin: 10px 0 12px; padding-inline: 16px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__rangements-mot {
margin-right: 4px;
font: 400 var(--t-2) / 1 var(--police-titre);
font-variant: small-caps;
letter-spacing: .08em;
color: var(--hud-or-filet);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) :is(button.ost__vue-bouton, .ost__entete--carte button.ost__trier) {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 4px 12px;
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #3d4045, #1c1e21);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .35);
font: 400 var(--t-2) / 1 var(--police-titre);
letter-spacing: .04em;
text-transform: none;
color: var(--parchemin);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) :is(button.ost__vue-bouton[aria-pressed="true"], .ost__entete--carte button.ost__trier.est-actif) {
background: var(--hud-grain), radial-gradient(120% 120% at 50% 0%, rgb(200 150 60 / .3), transparent 65%), linear-gradient(180deg, #4a3f2e, #221b12);
box-shadow: inset 0 0 0 1px #d8b46a, 0 0 8px rgb(240 190 90 / .2);
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__marque--vue { width: 18px; height: 18px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
gap: 12px;
margin: 0;
padding: 0 16px 16px;
list-style: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes > li { margin: 0; padding: 0; box-shadow: none; background: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes > .ost__carte-fiche { grid-column: 1 / -1; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes > .ost__carte > button.ost__rangee.ost__carte-bouton {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-content: start;
gap: 6px;
width: 100%;
height: 100%;
min-height: 0;
padding: 12px 10px 10px;
border: 1px solid #0b0a09;
border-left: 1px solid #0b0a09;
border-radius: 4px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
text-align: center;
color: var(--parchemin);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes > .ost__carte > button.ost__rangee.ost__carte-bouton:is(:hover, :focus-visible) {
background: var(--habit-coins), var(--hud-grain), radial-gradient(120% 80% at 50% 0%, rgb(200 150 60 / .22), transparent 65%), linear-gradient(180deg, #2a241d, #14110d);
box-shadow: inset 0 0 0 1px #d8b46a, inset 0 0 0 3px #0d0b09, 0 0 14px rgb(240 190 90 / .22), 0 4px 10px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes > .ost__carte.est-ouverte > button.ost__rangee.ost__carte-bouton {
background: var(--habit-coins), var(--hud-grain), radial-gradient(120% 80% at 50% 0%, rgb(170 40 30 / .32), transparent 65%), linear-gradient(180deg, #2a1c17, #140e0b);
box-shadow: inset 0 0 0 1px #d8b46a, inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(170 50 40 / .55), 0 4px 10px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte .ost__visage {
width: 84px;
height: 84px;
border: 2px solid #b8964f;
border-radius: 50%;
box-shadow: 0 0 0 2px #0b0a09, 0 3px 6px rgb(0 0 0 / .6);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte-nom {
font: 400 var(--t-4) / 1.15 var(--police-titre);
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte-rang {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--t-2);
line-height: 1.3;
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte-rang.est-verrou { color: #e5a58f; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__marque--verrou { width: 16px; height: 16px; flex: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte-forces {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 2px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte :is(.ost__force, .ost__carte-prix) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 0;
min-height: 32px;
padding: 2px 10px 2px 4px;
border-radius: 999px;
background: linear-gradient(180deg, #16130f, #0c0a08);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .4), inset 0 2px 3px rgb(0 0 0 / .6);
font: 700 var(--t-3) / 1 var(--police-corps);
font-variant-numeric: tabular-nums;
color: var(--parchemin);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte .ost__carte-prix {
flex-wrap: wrap;
gap: 2px 8px;
padding-inline: 6px 10px;
font-size: var(--t-2);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte .ost__prix { display: inline-flex; align-items: center; gap: 3px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__prix-marque { width: 22px; height: 22px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__marque--force { width: 24px; height: 24px; opacity: 1; margin: 0; }
/* La meilleure valeur du registre : un liseré d'or et le chiffre en or. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte .est-meilleur {
box-shadow: inset 0 0 0 2px #e2bd6c, inset 0 2px 3px rgb(0 0 0 / .6), 0 0 10px rgb(240 190 90 / .35);
color: #f6dc97;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__ligne:not(.ost__carte) .ost__c.est-meilleur {
color: #f6dc97;
font-weight: 700;
text-shadow: 0 0 8px rgb(240 190 90 / .45);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte-pied {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px 10px;
margin-top: 2px;
font-size: var(--t-2);
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte.est-levee .ost__carte-hommes { color: var(--hud-or-clair); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte.est-fermee .ost__visage img { filter: grayscale(.8) brightness(.7); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte.est-fermee :is(.ost__carte-nom, .ost__force, .ost__carte-prix) { opacity: .7; }
/* ── Au téléphone ── */
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .page:not(#visite) > .ecran-bandeau { margin-bottom: -1.2rem; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) .page:not(#visite) button.aide-bulle {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
margin-left: 4px;
background: none;
box-shadow: none;
border: 0;
isolation: isolate;
}
/* Le cercle reste de 28 px à l'œil ; la cible fait 44 px au doigt. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) .page:not(#visite) button.aide-bulle::before {
content: "";
position: absolute;
inset: 8px;
z-index: -1;
border: 1px solid #0b0a09;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #4b4f55, #1c1e21 75%);
box-shadow: inset 0 0 0 1px rgb(214 180 105 / .75);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__corps { padding: 12px 10px 10px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement__tete { padding: 4px 4px 4px 12px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #jeu #affaires button.decision__choix.rangee {
grid-template-columns: auto minmax(0, 1fr);
padding: 8px 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastilles {
grid-column: 1 / -1;
justify-content: flex-start;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .evenement .decision__pese-titre { min-height: 44px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__carte .ost__visage { width: 64px; height: 64px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) :is(button.ost__vue-bouton, .ost__entete--carte button.ost__trier) { min-height: 44px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile { column-gap: 8px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile .ost__marque--tuile { width: 28px; height: 28px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(#hommes #armee, #siege #recrutement) .ost__tuile-chiffre { font-size: var(--t-6); }
}
/* Les filets et le point qui reliaient les cartes du tableau retiré (parure-montee.css) n'ont plus rien à relier. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastilles > .decision__carte::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision__pastilles > .decision__carte::after {
content: none;
}
@media (min-width: 60.0625rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #affaires .decision.affaire.evenement { max-width: 48rem; }
}
/* ── Le journal du jour : une barre d'objectifs (29/09/2026) ──────────────
Demande relayée par le coordinateur : le haut de la Demeure empilait trois
blocs de page web (le mestre, l'état du jour, Décider / Bâtir / Préparer).
Une barre à la manière d'un journal de quêtes : le mestre en médaillon, sa
bulle de conseil au clic, au survol et au clavier (jeu/ecrans/mestre.js) ;
l'état du jour et le rang au milieu ; les trois étapes en jetons cochés,
leur phrase en infobulle. Poids : six identifiants, au-dessus des sections
1 et 7 et de ecrans-ui-senior.css. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour {
position: relative;
z-index: 4;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: 0 0 16px;
padding: 8px 12px 8px 8px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour #mestre-conseil:not([hidden]) {
position: relative;
display: block;
flex: none;
width: 60px;
height: 60px;
margin: 0;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour button.mestre-conseil__medaillon {
display: block;
width: 60px;
min-width: 60px;
height: 60px;
min-height: 60px;
margin: 0;
padding: 0;
border: 2px solid #b8964f;
border-radius: 50%;
background:
url(/jeu/images/icones/marques/chaine.webp) center / 64% no-repeat,
radial-gradient(circle at 40% 35%, #3b3129, #120e0a 75%);
box-shadow: 0 0 0 2px #0b0a09, inset 0 2px 6px rgb(0 0 0 / .7), 0 3px 6px rgb(0 0 0 / .6);
cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour button.mestre-conseil__medaillon:is(:hover, :focus-visible),
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour #mestre-conseil.est-ouvert button.mestre-conseil__medaillon {
border-color: #f0d38a;
box-shadow: 0 0 0 2px #0b0a09, inset 0 2px 6px rgb(0 0 0 / .7), 0 0 14px rgb(240 200 120 / .45);
outline: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour button.mestre-conseil__medaillon:focus-visible {
outline: 2px solid var(--or-vif);
outline-offset: 3px;
}
/* Un conseil urgent : le médaillon passe à la cire rouge. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour #mestre-conseil.est-urgent button.mestre-conseil__medaillon {
border-color: #d2584a;
box-shadow: 0 0 0 2px #0b0a09, inset 0 2px 6px rgb(0 0 0 / .7), 0 0 14px rgb(220 80 60 / .55);
}
/* La bulle du conseil : fermée, elle ne se voit pas et ses boutons ne prennent pas le focus. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .mestre-conseil__bulle {
position: absolute;
z-index: 30;
top: calc(100% + 12px);
left: -4px;
display: grid;
gap: 8px;
width: min(26rem, calc(100vw - 48px));
padding: 12px 14px;
border: 1px solid #0b0a09;
border-radius: 4px;
background:
var(--habit-coins),
var(--hud-grain),
radial-gradient(130% 90% at 0% 0%, rgb(140 30 24 / .30), transparent 65%),
linear-gradient(180deg, #211815, #120d0b);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6), inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(170 50 40 / .45), 0 12px 28px rgb(0 0 0 / .75);
opacity: 0;
visibility: hidden;
transition: opacity 120ms ease, visibility 0s linear 120ms;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour #mestre-conseil:is(.est-ouvert, :hover) .mestre-conseil__bulle {
opacity: 1;
visibility: visible;
transition: opacity 120ms ease;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .mestre-conseil__bulle > * { grid-column: 1; grid-row: auto; margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .mestre-conseil__titre {
padding: 0 0 6px;
font-size: var(--t-2);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .mestre-conseil__dit { font-size: var(--t-3); line-height: 1.4; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .mestre-conseil__actions { flex-wrap: wrap; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .journal-du-jour__titres {
display: grid;
flex: 1 1 16rem;
gap: 2px;
min-width: 0;
}
/* L'état du jour : le titre de la barre, sans cartouche. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour.page #journal-du-jour .journee__etat {
justify-self: start;
margin: 0;
padding: 0;
border: 0;
border-image: none;
background: none;
font: 400 var(--t-4) / 1.2 var(--police-titre);
letter-spacing: .03em;
text-align: left;
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .demeure-personnage {
margin: 0;
gap: 2px 10px;
font-size: var(--t-2);
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour {
display: flex;
flex: none;
gap: 6px;
margin: 0 0 0 auto;
padding: 0;
list-style: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour > li { position: relative; margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
min-height: 44px;
padding: 6px 14px 6px 7px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape strong {
font: 400 var(--t-3) / 1 var(--police-titre);
white-space: nowrap;
}
/* Le statut reste lu (« Fait », « Commence ici ») ; l'œil a la coche et le cercle d'or. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__statut {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__numero {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
border-radius: 50%;
font-size: var(--t-2);
line-height: 1;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape.est-fait .boucle-jour__numero { font-size: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape.est-fait .boucle-jour__numero::after {
content: "✓" / "";
font-size: var(--t-3);
font-weight: 700;
color: #1c2a12;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape.est-fait strong { color: #b9d69a; }
/* La phrase de l'étape : une infobulle de parchemin sous le jeton. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape small {
position: absolute;
z-index: 30;
top: calc(100% + 8px);
right: 0;
width: max-content;
max-width: min(18rem, 80vw);
padding: 7px 10px;
border: 2px solid #3a2a17;
border-radius: 4px;
background: var(--habit-parchemin);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 10px 24px rgb(0 0 0 / .65);
font: 400 var(--t-2) / 1.4 var(--police-corps);
text-align: left;
white-space: normal;
color: #2b1b0c;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape:is(:hover, :focus-visible) small {
opacity: 1;
visibility: visible;
}
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour { gap: 8px 10px; padding: 8px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour #mestre-conseil:not([hidden]),
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour button.mestre-conseil__medaillon {
width: 48px;
min-width: 48px;
height: 48px;
min-height: 48px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .journal-du-jour__titres { flex: 1 1 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour.page #journal-du-jour .journee__etat { font-size: var(--t-3); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour { flex: 1 1 100%; margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour > li { flex: 1 1 0; min-width: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape { width: 100%; justify-content: center; padding: 6px 8px 6px 5px; gap: 6px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape strong { font-size: var(--t-2); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour > li:first-child .boucle-jour__etape small { left: 0; right: auto; }
}
/* ── 9. Le Domaine et ses Recherches en fenêtre de jeu (29/09/2026) ───────
Généralisation validée sur délégation du propriétaire : la fenêtre, le
bandeau, les signets, les cartes et les chiffres clés de la section 8
passent au Domaine (#siege). La fenêtre, le flou et les signets verticaux
sont déjà partagés plus haut (:is(#cour, #hommes, #siege, #forge)).
- Le bandeau suit l'onglet ouvert (jeu/ecrans/onglets-page.js pose
data-onglet-ouvert) : le siège du joueur sur « Bâtiments », la table des
mestres sur « Recherches ». « Le domaine » garde sa vue en relief, qui
tient lieu d'illustration ; « Économie » n'a pas encore de bande.
- Les réserves deviennent des chiffres clés : une plaque par matière, sa
marque, le stock en grand, le débit du jour.
- Le palier, le bourg, le marché et les recherches en panneaux ; les
recherches fermées restent lisibles, leur verrou dit la condition.
───────────────────────────────────────────────────────────────────────── */
/* ── Le bandeau de l'onglet ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page > .ecran-bandeau img {
display: none;
/* Plus étroite que sa définition : un écran de gestion garde ses listes dans le premier écran. */
max-width: 820px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page[data-onglet-ouvert="batiments"] > .ecran-bandeau .ecran-bandeau__pour-batiments,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page[data-onglet-ouvert="recherches"] > .ecran-bandeau .ecran-bandeau__pour-recherches,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page[data-onglet-ouvert="economie"] > .ecran-bandeau .ecran-bandeau__pour-economie {
display: block;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #siege.page:not([data-onglet-ouvert="batiments"], [data-onglet-ouvert="recherches"], [data-onglet-ouvert="economie"]) > .ecran-bandeau {
display: none;
}
/* ── Les réserves : les chiffres clés ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserves__barre {
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: 10px;
overflow: visible;
border: 0;
border-radius: 0;
background: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "marque nom" "marque stock" "marque debit" "plein plein";
align-items: center;
gap: 0 12px;
padding: 10px 14px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve.est-en-alerte {
box-shadow: inset 4px 0 0 var(--cire-vif), var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve__marque {
width: 46px;
height: 46px;
border: 2px solid #b8964f;
box-shadow: 0 0 0 2px #0b0a09, 0 3px 6px rgb(0 0 0 / .6);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve__nom {
font-variant: small-caps;
text-transform: none;
letter-spacing: .08em;
font-size: var(--t-2);
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve__stock {
font-size: var(--t-7, 2.1rem);
line-height: 1.05;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve__debit {
justify-self: start;
font-size: var(--t-2);
font-weight: 700;
}
/* ── Les panneaux du domaine ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page :is(.domaine-palier, .domaine-bourg, .economie__marche, .economie__gouverner).cadre,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-batiments {
border: 1px solid #0b0a09;
border-image: none;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page :is(.domaine-palier, .domaine-bourg, .economie__marche, .economie__gouverner).cadre::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page :is(.domaine-palier, .domaine-bourg, .economie__marche, .economie__gouverner).cadre::after {
display: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page :is(.domaine-palier__titre, .domaine-bourg__titre, .economie__titre, .gestion-batiments .colonne__titre) {
align-items: center;
justify-content: flex-start;
font-variant: small-caps;
text-transform: none;
letter-spacing: .06em;
font-size: var(--t-4);
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-palier__titre small { margin-left: auto; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-vue,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-accueil__vue {
border: 1px solid #0b0a09;
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6), 0 4px 10px rgb(0 0 0 / .5);
}
/* Le palier : les niveaux bâtis en chiffre clé et en jauge, la phrase dessous. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-palier__compte {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 4px 14px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-palier__chiffre {
font: 400 var(--t-4) / 1 var(--police-titre);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-palier__chiffre strong {
font-size: var(--t-7, 2.1rem);
font-weight: 400;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-palier__niveaux { margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-palier__compte > .domaine-palier__condition {
grid-column: 1 / -1;
margin: 0;
font-size: var(--t-3);
color: var(--parchemin);
}
/* ── Les recherches : des cartes ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiments {
gap: 12px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment {
padding: 14px 16px 12px;
border: 1px solid #0b0a09;
border-radius: 4px;
background:
var(--hud-grain),
radial-gradient(120% 70% at 50% 0%, rgb(90 70 45 / .35), transparent 65%),
linear-gradient(180deg, #25201a, #14110d);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .5), inset 0 0 0 3px #0d0b09, 0 3px 8px rgb(0 0 0 / .5);
opacity: 1;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment:hover {
box-shadow: inset 0 0 0 1px #d8b46a, inset 0 0 0 3px #0d0b09, 0 0 14px rgb(240 190 90 / .18), 0 3px 8px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment__nom {
font: 400 var(--t-4) / 1.15 var(--police-titre);
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment__niveau {
padding: 3px 10px;
border-radius: 999px;
background: linear-gradient(180deg, #16130f, #0c0a08);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .5);
font-size: var(--t-2);
white-space: nowrap;
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment__promesse {
font-size: var(--t-2);
font-style: normal;
line-height: 1.45;
color: #d9ccb2;
}
/* Fermée : grisée, jamais illisible. Le cadenas et la condition en cire. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment.est-fermee {
background:
var(--hud-grain),
linear-gradient(180deg, #1c1a18, #100f0d);
box-shadow: inset 0 0 0 1px rgb(150 140 125 / .35), inset 0 0 0 3px #0d0b09, 0 3px 8px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment.est-fermee :is(.batiment__nom, .batiment__niveau) { color: #b9ad98; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment.est-fermee .batiment__promesse { color: #a99e8b; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment.est-fermee .batiment__niveau::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin: 0 5px -2px 0;
background: url(/jeu/images/icones/marques/cadenas.webp) center / contain no-repeat;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .gestion-recherches .batiment.est-fermee .batiment__cout {
font-size: var(--t-2);
color: #e5a58f;
}
@media (max-width: 46rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserves__barre {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "nom" "stock" "debit" "plein";
padding: 8px 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page .domaine-reserve__stock { font-size: var(--t-5); }
}
/* Le journal du jour, retouches du 29/09/2026 : le mot et le sceau d'un jeton sur la même ligne (une règle ancienne
posait le mot en bas du bouton) ; au téléphone, la ligne du rang tient en petit et son lien garde 44 px de haut
sans agrandir la barre. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape :is(strong, .boucle-jour__numero) {
align-self: center;
margin: 0;
}
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .demeure-personnage {
gap: 0 8px;
font-size: var(--t-1);
line-height: 1.35;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour button.demeure-personnage__aller {
min-height: 44px;
margin-block: -13px;
padding-block: 0;
font-size: var(--t-1);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape { height: 44px; min-height: 44px; }
}
/* Le jeton coché changeait la ligne de base de son bouton : les trois jetons se calent en haut de leur case. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour > li { display: flex; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #cour #journal-du-jour .boucle-jour__etape { vertical-align: top; }
/* Le chantier en cours du Domaine, vide sans chantier : il ne prend pas la rangée des signets. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #siege.page > .siege-en-cours:not(:has(> :not([hidden]))) { display: none; }
/* ── 10. Le Personnage et les Opérations en fenêtre de jeu (29/09/2026) ────
Lot 2 de la généralisation. La fenêtre, le flou et les signets verticaux
passent au Personnage (#forge) par les règles partagées plus haut ; les
Opérations sont un onglet de l'Armée et les avaient déjà.
- Personnage : le héros en pied tient lieu d'illustration sur « Fiche » et
« Équipement » ; l'adoubement en bandeau sur « Ascension ». Les jauges de
la fiche (niveau, renom, population, moral) en chiffres clés ; les
preuves du rang suivant en chiffre et en jauge, leurs lignes en journal
de quêtes (cochées, en attente) ; les règles des compétences et du
caractère dans un « ? ».
- Opérations : les troupes dehors en chiffre clé, les panneaux habillés,
le verrou en cire.
───────────────────────────────────────────────────────────────────────── */
/* ── Le bandeau de l'Ascension ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #forge.page > .ecran-bandeau img {
display: none;
max-width: 820px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #forge.page[data-onglet-ouvert="ascension"] > .ecran-bandeau .ecran-bandeau__pour-ascension,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #forge.page[data-onglet-ouvert="equipement"] > .ecran-bandeau .ecran-bandeau__pour-equipement {
display: block;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #forge.page:not([data-onglet-ouvert="ascension"], [data-onglet-ouvert="equipement"]) > .ecran-bandeau {
display: none;
}
/* ── Les panneaux ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page :is(.salle-hero, .personnage-competences, .personnage-caractere, .sang, .maison, .ascension-suivant, .ascension-echelle),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__cadre {
border: 1px solid #0b0a09;
border-image: none;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page :is(.salle-hero, .personnage-competences, .personnage-caractere, .ascension-suivant, .ascension-echelle).cadre::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page :is(.salle-hero, .personnage-competences, .personnage-caractere, .ascension-suivant, .ascension-echelle).cadre::after,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__cadre::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__cadre::after {
display: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page :is(.personnage__titre, .colonne__titre),
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__titre {
display: flex;
align-items: center;
font-variant: small-caps;
text-transform: none;
letter-spacing: .06em;
font-size: var(--t-4);
color: var(--hud-or-clair);
text-shadow: 0 1px 1px #000;
}
/* ── La fiche : les jauges en chiffres clés ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .jauges {
gap: 8px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .jauges > .jauge {
padding: 8px 12px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .jauges > .jauge dt {
font-variant: small-caps;
text-transform: none;
letter-spacing: .08em;
font-size: var(--t-2);
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .jauges > .jauge dd {
font: 400 var(--t-6) / 1.1 var(--police-titre);
font-variant-numeric: tabular-nums;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
/* ── L'Ascension : le compte des preuves, les preuves en journal ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__compte {
display: grid;
grid-template-columns: auto auto minmax(8rem, 1fr);
align-items: center;
gap: 4px 12px;
margin: 8px 0 4px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__chiffre {
font: 400 var(--t-4) / 1 var(--police-titre);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__chiffre strong {
font-size: var(--t-7);
font-weight: 400;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__mot {
font-variant: small-caps;
letter-spacing: .06em;
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__jauge { margin: 0; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition {
margin: 0 0 6px;
padding: 8px 12px;
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #25201a, #14110d);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .35), 0 2px 5px rgb(0 0 0 / .45);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__marque {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: radial-gradient(circle at 40% 35%, #4b4f55, #1c1e21 75%);
box-shadow: inset 0 0 0 1px rgb(214 180 105 / .6);
font-size: 0;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition.est-atteinte .ascension-condition__marque {
background: radial-gradient(circle at 40% 35%, #b9d69a, #4f7a33 75%);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition.est-atteinte .ascension-condition__marque::after {
content: "✓" / "";
font-size: var(--t-3);
font-weight: 700;
color: #1c2a12;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition.est-atteinte .ascension-condition__dit { color: #b9d69a; }
/* ── Les Opérations ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__dehors {
display: inline-flex;
align-items: baseline;
gap: 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__dehors-mot {
font-variant: small-caps;
letter-spacing: .06em;
font-size: var(--t-2);
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__dehors-chiffre {
font: 400 var(--t-4) / 1 var(--police-titre);
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: #b9ad98;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__dehors-chiffre strong {
font-size: var(--t-7);
font-weight: 400;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
/* Le verrou : cire et cadenas, pas une ligne perdue entre deux panneaux. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__verrou.operations__ferme {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
padding: 10px 14px;
border: 1px solid #0b0a09;
border-radius: 3px;
background:
var(--hud-grain),
radial-gradient(130% 90% at 0% 0%, rgb(140 30 24 / .30), transparent 65%),
linear-gradient(180deg, #211815, #120d0b);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6), inset 0 0 0 3px #0d0b09, inset 0 0 0 4px rgb(170 50 40 / .45);
color: #f0d9c8;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #hommes.page .operations__verrou.operations__ferme::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background: url(/jeu/images/icones/marques/cadenas.webp) center / contain no-repeat;
}
/* Le rail des places de l'équipement, en rangée quand la colonne est étroite : il glisse au lieu de sortir de la fenêtre. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .forge-rail { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
/* L'Armée : le camp sur ses onglets, la troupe en marche sur « Opérations » (illustrations générées, jeu/images/armee/SOURCES.md). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes.page > .ecran-bandeau .ecran-bandeau__pour-operations { display: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes.page[data-onglet-ouvert="operations"] > .ecran-bandeau .ecran-bandeau__pour-troupes { display: none; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #hommes.page[data-onglet-ouvert="operations"] > .ecran-bandeau .ecran-bandeau__pour-operations { display: block; }
/* Au téléphone, une preuve de l'Ascension tient en trois lignes : la marque et la phrase, la jauge, le bouton.
Sur quatre colonnes, la phrase passait à un mot par ligne. */
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "marque dit" "mesure mesure" "geste geste";
align-items: center;
gap: 6px 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__marque { grid-area: marque; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__dit { grid-area: dit; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__mesure {
grid-area: mesure;
display: flex;
align-items: center;
gap: 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__chiffre { white-space: nowrap; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__mesure > .personnage-jauge { display: block; flex: 1 1 auto; min-width: 6rem; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__geste { grid-area: geste; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-condition__geste button { width: 100%; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__compte { grid-template-columns: auto minmax(0, 1fr); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #forge.page .ascension-rang__jauge { grid-column: 1 / -1; }
}
/* ── 11. Gouverner, Réglages et la Chronique en fenêtre de jeu (29/09/2026) ─
Même habit que les écrans des sections 8 à 10 : la fenêtre sur la scène
floutée, les signets verticaux au bureau et les 44 px au téléphone passent
par les règles partagées plus haut (:is(… #gouverner, #reglages)).
- Gouverner : la table du conseil en bandeau, le pacte des alliances sur
« Alliances » (illustrations générées) ; les
terres prises et les marches annoncées en chiffres clés ; les maisons de
la parole en cartes, avec leurs trois chiffres clés.
- Réglages : pas de bandeau, pour garder les réglages en haut de la fenêtre ; les
groupes de réglages en panneaux.
- La Chronique vit dans le volet des nouvelles depuis le 07/09/2026 : le
registre du mestre en tête, les lieux d'« Autour de toi » lisibles.
───────────────────────────────────────────────────────────────────────── */
/* ── Le bandeau de Gouverner ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page > .ecran-bandeau img {
display: none;
max-width: 820px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page:not([data-onglet-ouvert="alliances"]) > .ecran-bandeau .ecran-bandeau__pour-conseil,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page[data-onglet-ouvert="alliances"] > .ecran-bandeau .ecran-bandeau__pour-alliances {
display: block;
}
/* ── Les panneaux ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(#gouverner-racine .gouverner-liste, #gouverner-racine .gouverner__caravanes, #parole, .diplomatie-fiefs, #cour-royale, .votes, .lois, .prisonniers, .avoirs, .actes-systeme, .gouverner-couronne),
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages fieldset {
padding: 16px 18px;
border: 1px solid #0b0a09;
border-image: none;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(#parole, .diplomatie-fiefs, #cour-royale, .votes, .lois, .prisonniers, .avoirs)::before,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(#parole, .diplomatie-fiefs, #cour-royale, .votes, .lois, .prisonniers, .avoirs)::after {
content: none;
}
/* Les titres des rubriques d'actes : petites capitales d'or, comme les titres de panneau. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .actes-systeme h3 {
font: 700 var(--t-3) / 1.2 var(--police-titre);
font-variant: small-caps;
letter-spacing: .1em;
color: var(--hud-or-clair);
}
/* La légende d'un groupe de réglages : un titre de panneau, posé dans le panneau. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages legend {
float: left;
width: 100%;
margin: 0 0 6px;
padding: 0 0 8px;
background: linear-gradient(90deg, var(--hud-or-filet), rgb(184 150 79 / .35) 45%, transparent 85%) left bottom / 100% 1px no-repeat;
font: 700 var(--t-3) / 1.2 var(--police-titre);
font-variant: small-caps;
text-transform: none;
letter-spacing: .1em;
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages legend + * { clear: both; }
/* Le panneau en bloc, pas en grille : sous WebKit (Safari, seul moteur de l'iPhone), une légende flottante dans un
panneau en grille restait posée sur le bord, une bande noire sous elle (06/10/2026). L'écart de la grille passe en
marges ; sous la légende, c'est la sienne qui compte, la marge du suivant tombant dans le dégagement du flottant. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages fieldset { display: block; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages fieldset > * + * { margin-top: var(--e-3); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages fieldset > legend { margin-bottom: 18px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #reglages.page .reglages__note {
font-style: normal;
color: #b9ad98;
}
/* ── Gouverner : les chiffres clés ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #gouverner-racine .gouverner__etat {
padding: 0;
border: 0;
background: none;
gap: 10px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffres, .parole__chiffres) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 10px;
margin: 0 0 4px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #gouverner-racine .gouverner__etat > .gouverner__etat-ligne,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffre, .parole__chiffre) {
margin: 0;
padding: 10px 16px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffre, .parole__chiffre) {
display: flex;
align-items: baseline;
gap: 12px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .parole__chiffre.est-fermee,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .gouverner__chiffre.gouverner__alerte {
box-shadow: inset 4px 0 0 var(--cire-vif), var(--habit-panneau-filets);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffre, .parole__chiffre) > strong {
flex: none;
font: 400 var(--t-7) / 1.05 var(--police-titre);
font-variant-numeric: tabular-nums;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffre, .parole__chiffre) > span {
font-size: var(--t-3);
line-height: 1.35;
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .gouverner__chiffre.gouverner__alerte > span { color: #e7a497; }
/* Les chiffres clés de la parole redisaient la note du haut (vingt-sept maisons à convaincre). */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #paroles-note:has(~ #parole:not([hidden])) {
display: none;
}
/* ── Gouverner : les maisons de la parole en cartes ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .parole__regle {
border: 1px solid rgb(184 150 79 / .35);
border-left: 3px solid var(--hud-or-filet);
background: rgb(0 0 0 / .28);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole {
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-coins), var(--hud-grain), linear-gradient(180deg, #2a241d, #15120e);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 0 0 3px #0d0b09, inset 0 0 18px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole.est-ouverte {
box-shadow: inset 0 0 0 1px var(--hud-or-clair), inset 0 0 0 3px #0d0b09, inset 0 0 18px rgb(0 0 0 / .5), 0 0 12px rgb(240 217 160 / .25);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole.est-fermee {
box-shadow: inset 4px 0 0 var(--cire-vif), inset 0 0 0 1px rgb(184 150 79 / .25), inset 0 0 18px rgb(0 0 0 / .5);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole button.maison-parole__tete {
background: none;
border: 0;
box-shadow: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole__qui { color: var(--hud-or-clair); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole__compte { color: #b9ad98; }
/* L'opinion et l'accord suivant (9/10/2026) : la parole mène aux accords. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole__opinion { font-size: var(--t-2); color: #d8c08a; font-variant-numeric: tabular-nums; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .parlement__accords { margin: 0; font-size: var(--t-2); color: #d8c08a; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #parole .maison-parole__etat {
color: #f4ead6;
font-variant-numeric: tabular-nums;
}
/* ── La Chronique : le volet des nouvelles ── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #volet-nouvelles .volet-bandeau {
display: block;
margin: -12px -14px 4px;
pointer-events: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #volet-nouvelles .volet-bandeau img {
display: block;
width: 100%;
height: auto;
border-radius: 6px 6px 0 0;
-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #volet-nouvelles .volet-bandeau + .volet__entete { position: relative; margin-top: -28px; }
/* Chaque nouvelle : son jour en petites capitales d'or, la phrase en clair. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #volet-nouvelles .volet__liste--nouvelles .jour {
display: block;
font: 700 var(--t-1) / 1.3 var(--police-titre);
font-variant: small-caps;
letter-spacing: .1em;
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) #volet-nouvelles .volet__liste--nouvelles .dit { color: #eadfca; }
/* Les lieux d'« Autour de toi » : des plaques sombres. Sur l'or plein, le chemin et le prix ne se lisaient pas. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #jeu #volet-nouvelles button.autour__nom {
min-height: 48px;
padding: 8px 12px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--hud-grain), linear-gradient(180deg, #2a241d, #15120e);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 0 0 3px #0d0b09;
color: #eadfca;
transform: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #jeu #volet-nouvelles button.autour__nom:is(:hover, :focus-visible) {
background: var(--hud-grain), linear-gradient(180deg, #3a3025, #1d1813);
box-shadow: inset 0 0 0 1px var(--hud-or-clair), inset 0 0 0 3px #0d0b09;
outline: 2px solid var(--hud-or-clair);
outline-offset: 2px;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #jeu #volet-nouvelles button.autour__nom.est-dit {
box-shadow: inset 4px 0 0 var(--hud-or-clair), inset 0 0 0 1px rgb(184 150 79 / .6), inset 0 0 0 3px #0d0b09;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #jeu #volet-nouvelles .autour__mot {
font: 400 var(--t-4) / 1.2 var(--police-titre);
color: var(--hud-or-clair);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #jeu #volet-nouvelles .autour__chemin { color: #b9ad98; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #jeu #volet-nouvelles .autour__quoi { color: #eadfca; font-weight: 600; }
/* Au téléphone, les chiffres clés de Gouverner et de la parole tiennent sur une rangée : le chiffre au-dessus de son mot. */
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .gouverner__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .parole__chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffre, .parole__chiffre) { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(.gouverner__chiffre, .parole__chiffre) > span { font-size: var(--t-2); }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page :is(#parole, .votes, .lois, .prisonniers, .avoirs) { margin-inline: 0; padding: 12px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page .parole__chiffre > strong { font-size: var(--t-6); }
}
/* Le registre des terres entre 46 et 80 rem : ses sept colonnes demandaient 830 px, la colonne de contenu en offre 640 à
1 024 (les signets prennent leur part) ; la défense et la menace sortaient de la fenêtre. */
@media (min-width: 46.0625rem) and (max-width: 80rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #gouverner.page #gouverner-racine :is(.gouverner__entetes, button.gouverner__rangee) {
grid-template-columns: minmax(7.5rem, 1.5fr) 3.6rem minmax(5rem, 1fr) 4.6rem 4.6rem 4.6rem minmax(4.5rem, 1fr);
column-gap: var(--e-2);
}
}
/* ── 12. La création du personnage en fenêtre de jeu (29/09/2026) ─────────
Même habit que les écrans du jeu (sections 7 à 11), avant la vue du jeu :
les matières (--hud-*, --habit-*) sont aussi posées sur #creation.
- La feuille des étapes dans le cadre de fenêtre, le personnage en pied
dans sa salle tient lieu de bandeau.
- Les quatre étapes en signets : fer au repos, cuir rouge sur l'étape en
cours.
- Les maisons, les traits et les savoir-faire en cartes de jeu ; un trait
hors compte reste lisible.
- Les points à placer en chiffre clé ; le résumé en panneau.
- Le pied plein : au téléphone, il colle au bas et le texte passait
dessous, à travers les boutons.
───────────────────────────────────────────────────────────────────────── */
/* ── Les étapes : des signets ── */
html:not(#cadre#cadre#cadre) #creation .jalon {
min-height: 44px;
padding: 8px 16px;
border: 1px solid #0b0a09;
border-radius: 6px;
background: var(--hud-grain), linear-gradient(180deg, #474b50 0%, #2a2d31 40%, #17191c 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .38), inset 0 1px 0 rgb(255 255 255 / .16);
color: var(--parchemin);
text-shadow: 0 1px 1px #000;
}
html:not(#cadre#cadre#cadre) #creation .jalon:is(:hover, :focus-visible) {
color: var(--hud-or-clair);
box-shadow: inset 0 0 0 1px rgb(214 180 105 / .7), inset 0 1px 0 rgb(255 255 255 / .2), 0 0 10px rgb(240 200 120 / .18);
}
html:not(#cadre#cadre#cadre) #creation .jalon[aria-current="step"] {
border: 7px solid transparent;
border-width: 7px 10px;
border-image: url(/jeu/images/cadres/plaque-sang.webp) 40 44 fill / 7px 10px stretch;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--hud-or-clair);
/* Les rayures claires de la plaque tombaient sous 4,5:1 derrière les lettres : une ombre plus dense les isole. */
text-shadow: 0 1px 1px #000, 0 0 4px #000, 0 0 10px rgb(0 0 0 / .9);
}
/* Entre 861 et 1 280 px, le compte passait dans une colonne de quelques lettres, un mot par ligne : il prend sa rangée. */
@media (min-width: 861px) and (max-width: 1280px) {
html:not(#cadre#cadre#cadre) #creation .creation__barre { grid-template-columns: auto minmax(0, 1fr); row-gap: 4px; }
html:not(#cadre#cadre#cadre) #creation .creation__compte {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: baseline;
gap: 4px 16px;
}
html:not(#cadre#cadre#cadre) #creation .creation__compte-note { max-width: none; }
}
/* ── La feuille dans la fenêtre, le personnage dans son cadre ── */
html:not(#cadre#cadre#cadre) #creation .creation__feuille {
border: var(--habit-fenetre) solid transparent;
border-image: url(/jeu/images/cadres/cadre-fenetre.webp) 44 / var(--habit-fenetre) stretch;
background:
var(--hud-grain),
radial-gradient(140% 80% at 50% 0%, rgb(70 54 36 / .45), transparent 60%),
linear-gradient(180deg, #17130f, #0b0907);
box-shadow: inset 0 0 70px rgb(0 0 0 / .65), 0 20px 60px rgb(0 0 0 / .8);
}
html:not(#cadre#cadre#cadre) #creation .portrait-creation {
border: 1px solid #0b0a09;
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .6), 0 0 0 3px #0d0b09, 0 0 0 4px rgb(184 150 79 / .35), 0 10px 30px rgb(0 0 0 / .7);
}
html:not(#cadre#cadre#cadre) #creation .etape__titre {
color: var(--hud-or-clair);
text-shadow: 0 2px 0 #000, 0 0 8px rgb(0 0 0 / .9);
}
/* ── Les commandes du personnage : des plaques de fer ── */
html:not(#cadre#cadre#cadre) #creation :is(.portrait-creation__commandes, .creation__pied) .jeton-mot {
border: 1px solid #0b0a09;
border-radius: 5px;
background: var(--hud-grain), linear-gradient(180deg, #474b50 0%, #2a2d31 40%, #17191c 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .38), inset 0 1px 0 rgb(255 255 255 / .16);
color: var(--parchemin);
text-shadow: 0 1px 1px #000;
}
html:not(#cadre#cadre#cadre) #creation .portrait-creation__commandes .jeton-mot[aria-pressed="true"] {
background: var(--hud-grain), linear-gradient(180deg, #6b4b25, #2e1f0f);
box-shadow: inset 0 0 0 1px var(--hud-or-clair), 0 0 10px rgb(240 217 160 / .25);
color: var(--hud-or-clair);
}
html:not(#cadre#cadre#cadre) #creation .portrait-creation__zoom [aria-disabled="true"] { opacity: .45; }
html:not(#cadre#cadre#cadre) #creation .portrait-creation__fleche { width: 1.45rem; height: 1.45rem; stroke-width: 2.2; }
/* ── Le résumé : un panneau ── */
html:not(#cadre#cadre#cadre) #creation .creation__resume {
padding: 14px 18px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
html:not(#cadre#cadre#cadre) #creation .creation__resume dt {
font-variant: small-caps;
text-transform: none;
letter-spacing: .08em;
font-size: var(--t-2);
color: var(--hud-or-clair);
}
html:not(#cadre#cadre#cadre) #creation .creation__resume dd { color: #f4ead6; }
/* ── Les maisons et les traits : des cartes de jeu ── */
html:not(#cadre#cadre#cadre) #creation :is(.carte-origine, .carte-trait) {
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-coins), var(--hud-grain), linear-gradient(180deg, #2a241d, #15120e);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .45), inset 0 0 0 3px #0d0b09, inset 0 0 18px rgb(0 0 0 / .5);
transform: none;
}
html:not(#cadre#cadre#cadre) #creation :is(.carte-origine, .carte-trait):hover {
box-shadow: inset 0 0 0 1px var(--hud-or-clair), inset 0 0 0 3px #0d0b09, inset 0 0 18px rgb(0 0 0 / .5);
}
html:not(#cadre#cadre#cadre) #creation :is(.carte-origine, .carte-trait):focus-visible {
outline: 2px solid var(--hud-or-clair);
outline-offset: 2px;
}
html:not(#cadre#cadre#cadre) #creation :is(.carte-origine, .carte-trait)[aria-pressed="true"] {
background: var(--habit-coins), var(--hud-grain), linear-gradient(180deg, #4a3522, #22170d);
box-shadow: inset 0 0 0 1px var(--hud-or-clair), inset 0 0 0 3px #0d0b09, 0 0 14px rgb(240 217 160 / .3);
}
html:not(#cadre#cadre#cadre) #creation :is(.carte-origine__nom, .carte-trait__nom) { color: var(--hud-or-clair); }
html:not(#cadre#cadre#cadre) #creation .carte-trait__dit { color: #d9ceb9; }
/* Deux traits pris, les autres restent lisibles : l'ancienne opacité de 45 % les rendait illisibles. */
html:not(#cadre#cadre#cadre) #creation .carte-trait.est-hors-compte { opacity: 1; }
html:not(#cadre#cadre#cadre) #creation .carte-trait.est-hors-compte :is(.carte-trait__nom, .carte-trait__dit) { color: #a79d8c; }
/* La carte d'une maison : l'écu et le nom en tête, les effets sur toute la largeur. Dans une colonne de
64 px d'écu, les effets passaient à trois mots par ligne. */
html:not(#cadre#cadre#cadre) #creation .carte-maison {
grid-template-columns: 52px minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 4px 12px;
padding: 14px 16px;
}
html:not(#cadre#cadre#cadre) #creation .carte-maison > .carte-maison__blason { grid-column: 1; grid-row: 1 / span 2; width: 52px; height: 64px; align-self: start; }
html:not(#cadre#cadre#cadre) #creation .carte-maison > .carte-origine__nom { grid-column: 2; grid-row: 1; font-size: var(--t-5); }
html:not(#cadre#cadre#cadre) #creation .carte-maison > .carte-origine__dit { grid-column: 2; grid-row: 2; font-size: var(--t-2); font-style: normal; color: #b9ad98; }
html:not(#cadre#cadre#cadre) #creation .carte-maison > :is(.carte-origine__effets, .carte-origine__durete) {
grid-column: 1 / -1;
font: var(--t-2) / 1.45 var(--police-corps);
letter-spacing: 0;
color: #eadfca;
}
html:not(#cadre#cadre#cadre) #creation .carte-maison > .carte-origine__effets:first-of-type { color: var(--hud-or-clair); }
html:not(#cadre#cadre#cadre) #creation .carte-maison > .carte-origine__durete { color: #a79d8c; }
/* Récoltes, domaine, héros : le titre de la ligne, puis chaque effet vert s'il aide, rouge s'il pèse. */
html:not(#cadre#cadre#cadre) #creation .carte-maison .carte-origine__titre { font-weight: 600; color: #b9ad98; }
html:not(#cadre#cadre#cadre) #creation .carte-maison .carte-origine__effet { white-space: nowrap; }
html:not(#cadre#cadre#cadre) #creation .carte-maison .carte-origine__effet--bon { color: var(--gain); }
html:not(#cadre#cadre#cadre) #creation .carte-maison .carte-origine__effet--dur { color: var(--perte); }
/* ── Les savoir-faire : les points à placer en chiffre clé, chaque savoir-faire sur sa plaque ── */
html:not(#cadre#cadre#cadre) #creation .etape__intro:has(#restants) {
display: block;
max-width: none;
margin: 0;
padding: 10px 16px;
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
color: #d9ceb9;
}
html:not(#cadre#cadre#cadre) #creation #restants {
margin-right: 6px;
font: 400 var(--t-7) / 1 var(--police-titre);
font-variant-numeric: tabular-nums;
color: #f4ead6;
text-shadow: 0 1px 2px #000;
}
html:not(#cadre#cadre#cadre) #creation #restants-mot { color: var(--hud-or-clair); font-variant: small-caps; letter-spacing: .06em; }
html:not(#cadre#cadre#cadre) #creation .etape .competence {
border: 1px solid #0b0a09;
border-radius: 3px;
background: var(--hud-grain), linear-gradient(180deg, #221d18, #13100d);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .3);
}
html:not(#cadre#cadre#cadre) #creation .etape .competence.est-choisie {
box-shadow: inset 4px 0 0 var(--hud-or-clair), inset 0 0 0 1px rgb(184 150 79 / .6);
}
html:not(#cadre#cadre#cadre) #creation .competence__valeur {
min-width: 1.6rem;
font: 400 var(--t-5) / 1 var(--police-titre);
color: #f4ead6;
}
html:not(#cadre#cadre#cadre) #creation .competence__effet { color: #b9ad98; }
/* La part de la maison et de sa région, comptée dans la valeur affichée (16/10/2026). */
html:not(#cadre#cadre#cadre) #creation .competence__depart {
margin-left: .35em;
padding: 0 .4em;
border: 1px solid rgb(184 150 79 / .45);
border-radius: 2px;
font: 600 var(--t-1) / 1.5 var(--police-corps);
color: var(--hud-or-clair);
white-space: nowrap;
vertical-align: .1em;
}
html:not(#cadre#cadre#cadre) #creation .competence__depart--dur { border-color: rgb(196 92 72 / .5); color: #e0a090; }
/* ── Westeros et Essos : deux signets de 44 px (29 px auparavant, trop petits au doigt) ── */
html:not(#cadre#cadre#cadre) #creation .onglet-continent {
min-height: 44px;
padding: 8px 16px;
border: 1px solid #0b0a09;
border-radius: 6px;
background: var(--hud-grain), linear-gradient(180deg, #474b50 0%, #2a2d31 40%, #17191c 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .38), inset 0 1px 0 rgb(255 255 255 / .16);
color: var(--parchemin);
text-shadow: 0 1px 1px #000;
}
html:not(#cadre#cadre#cadre) #creation .onglet-continent.est-actif {
border: 7px solid transparent;
border-width: 7px 10px;
border-image: url(/jeu/images/cadres/plaque-sang.webp) 40 44 fill / 7px 10px stretch;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--hud-or-clair);
}
/* ── Le pied : plein ── */
html:not(#cadre#cadre#cadre) #creation .creation__pied {
background: var(--hud-grain), linear-gradient(180deg, #1f1a15, #120f0c);
border-top: 1px solid rgb(184 150 79 / .45);
box-shadow: 0 -10px 18px -10px rgb(0 0 0 / .85);
}
/* Entre 861 et 1 280 px, les quatre signets sortaient de la barre et mordaient le logo : ils se resserrent. */
@media (min-width: 861px) and (max-width: 1280px) {
html:not(#cadre#cadre#cadre) #creation .jalon { padding: 6px 10px; gap: 8px; font-size: var(--t-2); letter-spacing: .04em; }
html:not(#cadre#cadre#cadre) #creation .jalon[aria-current="step"] { padding: 0 4px; }
html:not(#cadre#cadre#cadre) #creation .creation__jalons li + li::before { width: .8rem; margin-inline: 4px; }
html:not(#cadre#cadre#cadre) #creation .creation__barre .creation__logo { width: 4.5rem; }
}
/* Au téléphone, le cadre de la feuille prend 20 px : Retour et Suivant tiennent encore sur une ligne. */
@media (max-width: 42rem) {
html:not(#cadre#cadre#cadre) #creation .creation__pied { gap: 10px; padding-inline: 10px; }
html:not(#cadre#cadre#cadre) #creation .creation__pied #creation-retour { min-width: 0; padding-inline: 14px; }
html:not(#cadre#cadre#cadre) #creation .creation__pied .sceau { padding-inline: 1.4rem; }
/* Les signets se resserrent : à 16 px de marge, ils passaient sous le logo. */
html:not(#cadre#cadre#cadre) #creation .jalon { padding: 4px 6px; }
html:not(#cadre#cadre#cadre) #creation .jalon[aria-current="step"] { padding: 0 2px; }
/* Le résumé, à côté du personnage, n'a que 180 px : l'intitulé passe au-dessus de sa valeur. */
html:not(#cadre#cadre#cadre) #creation .creation__resume { padding: 10px 12px; }
html:not(#cadre#cadre#cadre) #creation .creation__resume div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* Sous 520 px, les cinq signets ne tiennent pas à côté du blason : le premier le recouvrait de 43 à 73 px.
Le blason sort de la barre et les signets prennent la rangée entière. */
@media (max-width: 520px) {
html:not(#cadre#cadre#cadre) #creation .creation__barre .creation__logo { display: none; }
html:not(#cadre#cadre#cadre) #creation .creation__jalons { grid-column: 1 / -1; justify-content: center; }
html:not(#cadre#cadre#cadre) #creation .creation__jalons li + li::before { width: .35rem; }
}
/* ── Les files d'ordres : construction, recherche, caserne (lot 10) ─────────
Un cartouche de bois sombre sous filet d'or : les places actives avec leur
jauge et leur heure de fin, la seconde place verrouillée sous cadenas de fer,
l'attente numérotée avec ses gestes dessinés. Trois identifiants : la règle
générique des boutons en pèse un. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres {
display: grid;
gap: 8px;
margin: 0 0 12px;
padding: 10px 12px 12px;
border: 1px solid #070605;
border-radius: 4px;
background: linear-gradient(180deg, rgb(40 30 20 / .92), rgb(22 17 12 / .94));
box-shadow: inset 0 0 0 1px var(--hud-or-filet), inset 0 1px 0 rgb(255 232 180 / .12), 0 3px 10px rgb(0 0 0 / .45);
color: #eadcbc;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres__titre {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 12px;
margin: 0;
font-variant: small-caps;
letter-spacing: .05em;
font-size: 1.02em;
color: #e6c87f;
text-shadow: 0 1px 0 #000;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres__compte {
font-variant: normal;
letter-spacing: 0;
font-size: .86em;
color: #bfae8a;
font-variant-numeric: tabular-nums;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.file-d-ordres__places, .file-d-ordres__attente) {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 2px 10px;
padding: 7px 10px;
border-radius: 3px;
background: linear-gradient(90deg, rgb(216 180 106 / .12), rgb(216 180 106 / .03) 70%);
box-shadow: inset 3px 0 0 #d8b46a, inset 0 0 0 1px rgb(184 150 79 / .22);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place.est-libre {
background: rgb(120 160 90 / .08);
box-shadow: inset 3px 0 0 #7fa35a, inset 0 0 0 1px rgb(127 163 90 / .25);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place.est-verrouillee:not(.est-prise) {
background: repeating-linear-gradient(135deg, rgb(0 0 0 / .28) 0 6px, rgb(0 0 0 / .14) 6px 12px);
box-shadow: inset 3px 0 0 #6d6457, inset 0 0 0 1px rgb(120 110 95 / .3);
color: #b3a78f;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__numero {
grid-row: span 2;
min-width: 4.6em;
font-variant: small-caps;
font-size: .86em;
color: #cdb27a;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__nom { font-weight: 600; color: #f1e4c4; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place.est-verrouillee:not(.est-prise) .file-place__nom { color: #b3a78f; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__cadenas {
margin-right: .45em;
vertical-align: -.12em;
color: #9a8f7c;
filter: drop-shadow(0 1px 0 #000);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__fin,
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__condition {
font-size: .88em;
color: #cfc2a3;
font-variant-numeric: tabular-nums;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__condition { grid-column: 2; color: #bfae8a; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-place__jauge { grid-column: 1 / -1; display: block; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres .jauge-parure__rail {
display: block;
height: 8px;
border: 1px solid #070605;
border-radius: 4px;
background: linear-gradient(180deg, #0b0a08, #1d1a16);
box-shadow: inset 0 2px 3px rgb(0 0 0 / .8), 0 0 0 1px rgb(184 150 79 / .4);
overflow: hidden;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres .jauge-parure__part {
display: block;
height: 100%;
border-radius: 3px 0 0 3px;
background: linear-gradient(180deg, #f6dfa2 0%, #d0a24c 40%, #8a6424 100%);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre {
display: grid;
grid-template-columns: 1.8em minmax(0, 1fr) auto;
grid-template-areas: "rang nom gestes" "rang detail gestes";
align-items: center;
gap: 2px 10px;
padding: 6px 8px;
border-radius: 3px;
background: rgb(255 235 190 / .04);
box-shadow: inset 0 -1px 0 rgb(184 150 79 / .16);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre:is(:hover, :focus-within) {
background: linear-gradient(90deg, rgb(216 180 106 / .14), rgb(216 180 106 / .03) 60%, transparent);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre__rang {
grid-area: rang;
display: grid;
place-items: center;
width: 1.7em;
height: 1.7em;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f3dc9c, #b88a3c 60%, #6d4f1f);
box-shadow: 0 0 0 1px #1a130b, inset 0 1px 0 rgb(255 255 255 / .4);
color: #2a1a08;
font-weight: 700;
font-size: .85em;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre__nom { grid-area: nom; font-weight: 600; color: #f1e4c4; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre__detail { grid-area: detail; font-size: .86em; color: #cfc2a3; font-variant-numeric: tabular-nums; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre__gestes { grid-area: gestes; display: flex; gap: 4px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres button.file-ordre__geste {
display: grid;
place-items: center;
width: 32px;
height: 32px;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid #0c0906;
border-radius: 4px;
background: linear-gradient(180deg, #5a4630, #2e2318);
box-shadow: inset 0 1px 0 rgb(255 232 180 / .25), inset 0 0 0 1px rgb(184 150 79 / .45), 0 2px 3px rgb(0 0 0 / .5);
color: #e6c87f;
text-transform: none;
cursor: pointer;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres button.file-ordre__geste:hover:not(:disabled) {
background: linear-gradient(180deg, #74593a, #3a2c1d);
color: #fff0c4;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres button.file-ordre__geste:active:not(:disabled) {
transform: translateY(1px);
box-shadow: inset 0 2px 3px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(184 150 79 / .45);
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres button.file-ordre__geste:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 2px; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres button.file-ordre__geste:disabled { opacity: .38; cursor: default; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) :is(.file-d-ordres__reserve, .file-d-ordres__vide) {
margin: 0;
font-size: .88em;
color: #bfae8a;
}
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres__refus { margin: 0; }
@media (max-width: 42rem) {
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre { grid-template-columns: 1.8em minmax(0, 1fr); grid-template-areas: "rang nom" "rang detail" "gestes gestes"; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-ordre__gestes { justify-content: flex-end; }
html[data-vue="jeu"]:not(#cadre#cadre#cadre) .file-d-ordres button.file-ordre__geste { width: 44px; height: 44px; }
}
/* ── 13. Les choix, les réglages et les plaques (30/09/2026) ──────────────
AGENTS interdit le bouton rectangulaire en capitales et la carte plate.
Recensement du 30/09/2026 (captures/hud-boutons/) : les choix à une seule
réponse (posture, siège, bannières, tri des bâtiments, des cibles et des
terres, coiffure et cadrage de la création) restaient des rectangles plats
à filet fin, en capitales dans la feuille de la carte (`.batir` de
salle.css) ; les pas « − / + » étaient des cadres vides ; une douzaine de
blocs d'information n'avaient ni matière ni relief.
Un seul dessin pour tout le jeu, sur les matières du HUD (section 6) :
- le choix : une plaque de cuir sertie de fer. Choisi, il passe au cuir
rouge du rang, s'enfonce et porte un filet d'or en pied ; verrouillé, une
pierre mate et un cadenas dessiné ici ; le focus clavier, un liseré d'or ;
- le pas « − / + » : une petite plaque de fer ;
- la plaque d'information : le grain et un dégradé posés sur la couleur de
l'écran (background-image seul, la teinte d'alerte reste), des filets
d'or dedans et une ombre portée.
Le préfixe à cinq identifiants ne filtre rien : il passe devant les règles
d'écran (deux identifiants au plus) sans `!important`.
───────────────────────────────────────────────────────────────────────── */
html[data-vue="jeu"],
#creation.creation {
--choix-cuir: var(--hud-grain), radial-gradient(120% 140% at 50% 0%, #54402a 0%, #33251a 52%, #1d150d 100%);
--choix-cuir-survol: var(--hud-grain), radial-gradient(120% 140% at 50% 0%, #6d5335 0%, #413020 52%, #251a10 100%);
--choix-pris: var(--hud-grain), radial-gradient(120% 140% at 50% 0%, #a2372c 0%, #6a1a14 55%, #3c0c09 100%);
--choix-ferme: var(--hud-grain), linear-gradient(180deg, #34312d 0%, #23211e 100%);
/* Cadenas dessiné pour le jeu : anse, corps, entrée de clé. */
--choix-cadenas: url("data:image/svg+xml;utf8,");
--plaque-grain: var(--hud-grain), linear-gradient(180deg, rgb(255 236 200 / .07) 0%, rgb(0 0 0 / 0) 38%, rgb(0 0 0 / .3) 100%);
--plaque-filets: inset 0 0 0 1px rgb(184 150 79 / .34), inset 0 1px 0 rgb(255 232 180 / .1), inset 0 -1px 0 rgb(0 0 0 / .5), 0 2px 6px rgb(0 0 0 / .45);
}
/* ── Le choix ── */
html:not(#habit#habit#habit#habit#habit) button:is(
.batir[aria-pressed], .batiments__tri, .operations__tri, .gouverner__tri, .lame-tiroir__tri,
.carte-barre__filtres > button, .jeton-mot[aria-pressed]
) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
margin: 0;
padding: 6px 16px 7px;
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--choix-cuir);
box-shadow: inset 0 0 0 1px rgb(150 120 70 / .55), inset 0 1px 0 rgb(255 225 170 / .22), inset 0 -2px 0 rgb(0 0 0 / .5), 0 2px 4px rgb(0 0 0 / .55);
font-family: var(--police-titre);
font-size: var(--t-3);
font-weight: 400;
line-height: 1.2;
letter-spacing: 0.03em;
text-transform: none;
font-variant-caps: normal;
text-shadow: 0 1px 1px #000;
color: #e9d6a8;
opacity: 1;
filter: none;
cursor: pointer;
transition: box-shadow 120ms ease, color 120ms ease, transform 80ms ease;
}
html:not(#habit#habit#habit#habit#habit) button:is(
.batir[aria-pressed], .batiments__tri, .operations__tri, .gouverner__tri, .lame-tiroir__tri,
.carte-barre__filtres > button, .jeton-mot[aria-pressed]
):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"], [aria-pressed="true"]) {
border-color: #0b0a09;
background: var(--choix-cuir-survol);
box-shadow: inset 0 0 0 1px rgb(226 192 118 / .9), inset 0 1px 0 rgb(255 225 170 / .3), inset 0 -2px 0 rgb(0 0 0 / .5), 0 0 12px rgb(240 200 120 / .25), 0 2px 4px rgb(0 0 0 / .55);
color: #fff3d6;
transform: none;
}
/* Choisi : le cuir rouge du rang, enfoncé, un filet d'or en pied. */
html:not(#habit#habit#habit#habit#habit) button:is(
.batir[aria-pressed], .batiments__tri, .operations__tri, .gouverner__tri, .lame-tiroir__tri,
.carte-barre__filtres > button, .jeton-mot[aria-pressed]
):is([aria-pressed="true"], .est-choisi) {
border-color: #1a0605;
background: var(--choix-pris);
box-shadow: inset 0 0 0 1px #d0ab5c, inset 0 0 0 2px rgb(0 0 0 / .55), inset 0 3px 6px rgb(0 0 0 / .5), inset 0 -3px 0 #d8b45f, 0 0 10px rgb(216 180 95 / .22);
color: #fff3d6;
text-shadow: 0 1px 1px #000, 0 0 6px rgb(0 0 0 / .7);
transform: none;
}
/* Appuyé : la plaque descend d'un pixel. */
html:not(#habit#habit#habit#habit#habit) button:is(
.batir[aria-pressed], .batiments__tri, .operations__tri, .gouverner__tri, .lame-tiroir__tri,
.carte-barre__filtres > button, .jeton-mot[aria-pressed]
):active:not(:disabled, [aria-disabled="true"]) {
transform: translateY(1px);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .7), inset 0 3px 7px rgb(0 0 0 / .7);
}
/* Verrouillé : une pierre mate, sans or, un cadenas devant le mot ; la raison est écrite à côté. */
html:not(#habit#habit#habit#habit#habit) button:is(
.batir[aria-pressed], .batiments__tri, .operations__tri, .gouverner__tri, .lame-tiroir__tri,
.carte-barre__filtres > button, .jeton-mot[aria-pressed]
):is(:disabled, [aria-disabled="true"]) {
padding-left: 34px;
border-color: #0b0a09;
background: var(--choix-cadenas) 12px 50% / 15px 15px no-repeat, var(--choix-ferme);
box-shadow: inset 0 0 0 1px rgb(130 120 104 / .4), inset 0 1px 0 rgb(255 255 255 / .06);
color: #a79e90;
text-shadow: none;
cursor: not-allowed;
}
/* Le focus clavier : un liseré d'or clair, hors de la plaque. */
html:not(#habit#habit#habit#habit#habit) button:is(
.batir[aria-pressed], .batiments__tri, .operations__tri, .gouverner__tri, .lame-tiroir__tri,
.carte-barre__filtres > button, .jeton-mot[aria-pressed]
):focus-visible {
outline: 2px solid #f5d98a;
outline-offset: 2px;
}
/* ── Le pas « − / + » et la croix de la feuille : de petites plaques de fer ── */
html:not(#habit#habit#habit#habit#habit) :is(.expedition-choix__reglage button, #creation button.pas, #feuille button.feuillet__fermer) {
display: inline-grid;
place-items: center;
padding: 0;
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #5a5e64 0%, #34373b 45%, #1c1e21 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .5), inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -2px 0 rgb(0 0 0 / .45), 0 2px 3px rgb(0 0 0 / .5);
font-family: var(--police-titre);
line-height: 1;
text-transform: none;
text-shadow: 0 1px 1px #000;
color: var(--hud-or-clair, #f0d9a0);
opacity: 1;
cursor: pointer;
}
html:not(#habit#habit#habit#habit#habit) .expedition-choix__reglage button {
min-width: 44px;
min-height: 44px;
font-size: 1.15rem;
}
/* Le pas de la création reste petit à l'œil ; sa zone touchable fait 44 px (socle.css, ::after). */
html:not(#habit#habit#habit#habit#habit) #creation button.pas {
width: 1.9rem;
height: 1.9rem;
font-size: 1.05rem;
}
html:not(#habit#habit#habit#habit#habit) #feuille button.feuillet__fermer {
width: 44px;
min-width: 44px;
height: 44px;
font-size: 1.3rem;
}
html:not(#habit#habit#habit#habit#habit) :is(.expedition-choix__reglage button, #creation button.pas, #feuille button.feuillet__fermer):is(:hover, :focus-visible):not(:disabled) {
border-color: #0b0a09;
background: var(--hud-grain), linear-gradient(180deg, #6c7177 0%, #3f4348 45%, #222428 100%);
box-shadow: inset 0 0 0 1px rgb(226 192 118 / .9), inset 0 1px 0 rgb(255 255 255 / .25), 0 0 10px rgb(240 200 120 / .25), 0 2px 3px rgb(0 0 0 / .5);
color: #fff3d6;
}
html:not(#habit#habit#habit#habit#habit) :is(.expedition-choix__reglage button, #creation button.pas, #feuille button.feuillet__fermer):focus-visible {
outline: 2px solid #f5d98a;
outline-offset: 2px;
}
html:not(#habit#habit#habit#habit#habit) :is(.expedition-choix__reglage button, #creation button.pas, #feuille button.feuillet__fermer):active:not(:disabled) {
transform: translateY(1px);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .7), inset 0 2px 5px rgb(0 0 0 / .65);
}
html:not(#habit#habit#habit#habit#habit) :is(.expedition-choix__reglage button, #creation button.pas):disabled {
background: var(--hud-grain), linear-gradient(180deg, #34312d, #23211e);
box-shadow: inset 0 0 0 1px rgb(130 120 104 / .35);
color: #7d766c;
text-shadow: none;
cursor: not-allowed;
}
/* ── La création : casse normale ; les étapes et les continents en petites capitales ── */
html:not(#habit#habit#habit#habit#habit) #creation :is(.jalon, .onglet-continent) {
text-transform: none;
font-variant-caps: small-caps;
letter-spacing: 0.05em;
}
html:not(#habit#habit#habit#habit#habit) #creation button.sceau {
text-transform: none;
letter-spacing: 0.04em;
}
/* ── La poignée du registre du HUD : petites capitales, comme la barre d'actions ── */
html:not(#habit#habit#habit#habit#habit) :is(.registre .volet__poignee, .registre .volet__titre, .registre__bouton) {
text-transform: none;
font-variant-caps: small-caps;
}
/* ── Les en-têtes de tri de la forge : petites capitales au lieu de capitales ── */
html:not(#habit#habit#habit#habit#habit) #forge button.forge-liste__entete,
html:not(#habit#habit#habit#habit#habit) #forge .forge-liste__entete-mot {
text-transform: none;
font-variant-caps: small-caps;
}
/* ── Les plaques d'information ── */
html:not(#habit#habit#habit#habit#habit) :is(
.actes-systeme, .batiment.expedition-preparation, .main-doeuvre, .voie, .voie__chemin,
.evenement-mondial, .priorite, .identite, .personnage-fiche .identite__details > div, .relique, .secret,
.nuit__chiffre, .encyclopedie, .campagne__arc, .parole__regle
) {
background-image: var(--plaque-grain);
box-shadow: var(--plaque-filets);
}
/* Dans la feuille de la carte, la préparation est déjà dans un cadre : ses filets restent, sans ombre portée. */
html:not(#habit#habit#habit#habit#habit) #feuille .batiment.expedition-preparation {
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .3), inset 0 1px 0 rgb(255 232 180 / .08);
}
/* ── Au téléphone : les filtres des généraux et le tri du registre font 44 px ── */
@media (max-width: 42rem) {
html:not(#habit#habit#habit#habit#habit) :is(#hommes button.general-geste, :is(#hommes, #recrutement) button.ost__trier) {
min-height: 44px;
}
}
html:not(#habit#habit#habit#habit#habit) :is(#hommes, #recrutement) button.ost__trier {
text-transform: none;
font-variant-caps: small-caps;
}
/* Les teintes de la création : 44 px au doigt ; une rangée trop longue passe à la ligne. */
@media (max-width: 42rem) {
html:not(#habit#habit#habit#habit#habit) #creation button.jeton-teinte {
width: 44px;
height: 44px;
}
}
/* Les commandes de la création (tourner, rapprocher, « Aléatoire ») : la plaque de fer des commandes (section 3),
que la création, hors des pages, ne recevait pas. Au bout de sa course, la commande s'éteint sans cadenas. */
html:not(#habit#habit#habit#habit#habit) #creation button.jeton-mot:not([aria-pressed]) {
min-height: 44px;
border: 1px solid #0b0a09;
border-radius: 4px;
background: var(--hud-grain), linear-gradient(180deg, #50545a 0%, #2e3135 45%, #1a1c1f 100%);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .55), inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -2px 0 rgb(0 0 0 / .45), 0 2px 4px rgb(0 0 0 / .5);
font-family: var(--police-titre);
text-transform: none;
letter-spacing: 0.03em;
text-shadow: 0 1px 1px #000;
color: var(--hud-or-clair, #f0d9a0);
cursor: pointer;
}
html:not(#habit#habit#habit#habit#habit) #creation button.jeton-mot:not([aria-pressed]):is(:hover, :focus-visible):not(:disabled, [aria-disabled="true"]) {
background: var(--hud-grain), linear-gradient(180deg, #63686e 0%, #3a3e43 45%, #212327 100%);
box-shadow: inset 0 0 0 1px rgb(226 192 118 / .9), inset 0 1px 0 rgb(255 255 255 / .25), 0 0 12px rgb(240 200 120 / .28), 0 2px 4px rgb(0 0 0 / .5);
color: #fff3d6;
}
html:not(#habit#habit#habit#habit#habit) #creation button.jeton-mot:not([aria-pressed]):focus-visible {
outline: 2px solid #f5d98a;
outline-offset: 2px;
}
html:not(#habit#habit#habit#habit#habit) #creation button.jeton-mot:not([aria-pressed]):active:not(:disabled, [aria-disabled="true"]) {
transform: translateY(1px);
box-shadow: inset 0 0 0 1px rgb(184 150 79 / .7), inset 0 2px 5px rgb(0 0 0 / .65);
}
html:not(#habit#habit#habit#habit#habit) #creation button.jeton-mot:not([aria-pressed]):is(:disabled, [aria-disabled="true"]) {
background: var(--hud-grain), linear-gradient(180deg, #34312d, #23211e);
box-shadow: inset 0 0 0 1px rgb(130 120 104 / .35);
color: #7d766c;
text-shadow: none;
cursor: not-allowed;
}
/* ── Les liens de la fiche du Personnage : un médaillon de fer par maison liée (30/09/2026) ──
Le blason vient du serveur (écu peint ou composé sur le nom, jeu/ecrans/royaume.js, lienDeFiche) ;
le nom et l'accord passent dans l'infobulle de parchemin, au survol, au clavier et au toucher. */
html:not(#habit#habit#habit#habit#habit) .fiche-liens {
gap: 12px;
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens button.fiche-lien {
position: relative;
display: grid;
place-items: center;
width: 56px;
height: 56px;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid #0b0a09;
border-radius: 50%;
background: var(--hud-fer-rond);
box-shadow: inset 0 0 0 2px #b8964f, inset 0 0 0 4px #141210, inset 0 2px 6px rgb(0 0 0 / .6), 0 3px 6px rgb(0 0 0 / .55);
cursor: help;
transition: box-shadow 120ms ease, transform 80ms ease;
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens button.fiche-lien > :is(img, svg) {
width: 34px;
height: 40px;
object-fit: contain;
filter: drop-shadow(0 1px 1px #000);
pointer-events: none;
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens button.fiche-lien:is(:hover, :focus-visible, :focus) {
box-shadow: inset 0 0 0 2px #f0d9a0, inset 0 0 0 4px #141210, inset 0 2px 6px rgb(0 0 0 / .6), 0 0 12px rgb(240 200 120 / .35), 0 3px 6px rgb(0 0 0 / .55);
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens button.fiche-lien:focus-visible {
outline: 2px solid #f5d98a;
outline-offset: 3px;
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens button.fiche-lien::after {
content: attr(data-infobulle);
position: absolute;
z-index: 30;
top: calc(100% + 8px);
left: -4px;
width: max-content;
max-width: min(18rem, 70vw);
padding: 7px 10px;
border: 2px solid #3a2a17;
border-radius: 4px;
background: var(--habit-parchemin);
box-shadow: inset 0 0 0 1px var(--hud-or-filet), 0 10px 24px rgb(0 0 0 / .65);
font: 400 var(--t-2) / 1.4 var(--police-corps);
text-align: left;
white-space: normal;
color: #2b1b0c;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease;
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens li:nth-child(n+3):last-child button.fiche-lien::after,
html:not(#habit#habit#habit#habit#habit) .fiche-liens li:nth-child(n+4) button.fiche-lien::after {
left: auto;
right: -4px;
}
html:not(#habit#habit#habit#habit#habit) .fiche-liens button.fiche-lien:is(:hover, :focus-visible, :focus)::after {
opacity: 1;
visibility: visible;
}
/* Une seule infobulle à la fois : celle du focus se ferme quand la souris en ouvre une autre. */
html:not(#habit#habit#habit#habit#habit) .fiche-liens:has(button.fiche-lien:hover) button.fiche-lien:not(:hover)::after {
opacity: 0;
visibility: hidden;
}
/* ── 12. Quêtes, Classements, Encyclopédie et Saison en fenêtre de jeu (9/10/2026) ─
Le reste du tiroir « Plus » prend l'habit des sections 8 à 11 par les listes
partagées plus haut : la fenêtre sur la scène floutée, le bandeau illustré,
les 44 px au téléphone, l'aide dans un « ? ». Les Quêtes prennent les signets
verticaux ; les trois tableaux des Classements gardent leur rail, dans leur
composant React.
───────────────────────────────────────────────────────────────────────── */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #classements.page .classement-corps,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #role.page .role__barre,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #encyclopedie.page .encyclopedie,
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #quetes.page :is(.quetes-en-cours__vide, .serments-liste) {
padding: 14px 18px;
border: 1px solid #0b0a09;
border-image: none;
border-radius: 3px;
background: var(--habit-panneau);
box-shadow: var(--habit-panneau-filets);
}
/* La légende du tableau garde son rôle (un display flex la sortait du haut du tableau) : le « ? » s'aligne dans sa ligne. */
html[data-vue="jeu"]:not(#cadre#cadre#cadre#cadre) #classements.page .classement-table caption .aide-bulle {
margin-left: 8px;
vertical-align: middle;
}