/* Couleurs du jeu (palettes des menus, data/ani/*.pac) : parchemin de la fiche d'objet (bg_ii0) et du sac (bg_iilist),
   papier ligné (bg_qm) #ffe7ad / #f7d694, barres de titre #634229, cadres #7b4a29, encre #393118 (bg_rri_0). */
:root {
  --parchemin: url(img/c0557ab189f3920e.png);
  --fond-img: var(--parchemin);
  --sol: #634229; --papier: #ffe7ad; --papier2: #f7d694; --papier3: #fff3cc; --encre: #000000; --gris: #000000;
  --trait: #deb573; --bord: #b58442; --brun: #634229; --brun2: #7b4a29; --sur-brun: #ffffff; --sur-brun2: #ffffff;
  --accent: #634229; --sur-accent: #ffffff; --lien: #000000; --or: #8c5a0a;
  --infini: #000000; --infini-fond: #cfe3a0; --unique: #000000; --unique-fond: #f4c496;
  --voile: rgb(35 26 12 / .55); --ombre: 0 1px 2px rgb(57 49 24 / .12), 0 8px 24px rgb(57 49 24 / .16);
  --m-carte: #2f7d45; --m-magasin: #b07a10; --m-alchimie: #7a4fb8; --m-quete: #2a5fb8; --m-histoire: #8c5a32;
  --m-meubles: #62721f; --m-monstre: #b8352d; --m-coffres: #c9650e; --m-vocation: #237b88; --m-dqvc: #b03d7b;
  --m-recrutements: #52627d; --m-clientsmarque: #5b3a9e;
  --src-code: #1f5aa6; --src-corr: #a2361f; --src-jeu: #2f6e2f; --src-comm: #6b5a3e;
  --titre: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --texte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond-img: linear-gradient(rgb(30 23 12 / .9), rgb(30 23 12 / .9)), var(--parchemin);
    --sol: #231c10; --papier: #393118; --papier2: #423121; --papier3: #2c2514; --encre: #ffffff; --gris: #ffffff;
    --trait: #5a4128; --bord: #7b4a29; --accent: #deb573; --sur-accent: #000000; --lien: #ffffff; --or: #efc663;
    --infini: #ffffff; --infini-fond: #3b5a1c; --unique: #ffffff; --unique-fond: #7a3216;
    --voile: rgb(0 0 0 / .6); --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .4);
    --src-code: #8fbcf4; --src-corr: #f39a84; --src-jeu: #9bd58f; --src-comm: #e2cfa6;
  }
}
:root[data-theme="dark"] {
  --fond-img: linear-gradient(rgb(30 23 12 / .9), rgb(30 23 12 / .9)), var(--parchemin);
  --sol: #231c10; --papier: #393118; --papier2: #423121; --papier3: #2c2514; --encre: #ffffff; --gris: #ffffff;
  --trait: #5a4128; --bord: #7b4a29; --accent: #deb573; --sur-accent: #000000; --lien: #ffffff; --or: #efc663;
  --infini: #ffffff; --infini-fond: #3b5a1c; --unique: #ffffff; --unique-fond: #7a3216;
  --voile: rgb(0 0 0 / .6); --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .4);
  --src-code: #8fbcf4; --src-corr: #f39a84; --src-jeu: #9bd58f; --src-comm: #e2cfa6;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--encre); font: 16px/1.5 var(--texte); background-color: var(--sol);
  background-image: var(--fond-img); background-size: cover; background-position: center; background-attachment: fixed; }
[hidden] { display: none !important; }
a { color: var(--lien); text-underline-offset: 3px; }
/* images : icônes du jeu en 24 px natifs (agrandies ×2 ou ×3 seulement, pixels nets) ; monstres : --t × --k.
   Mode compact (réglage de l'en-tête) : --ic 48 → 24, --ic-tete 72 → 48, --k 1 → 0,7. */
:root { --ic: 48px; --ic-tete: 72px; --k: 1; }
:root[data-compact] { --ic: 24px; --ic-tete: 48px; --k: .7; }
img.ic { image-rendering: pixelated; width: 24px; height: 24px; flex: none; }
img.im { width: calc(var(--t, 40px) * var(--k)); height: calc(var(--t, 40px) * var(--k)); flex: none; object-fit: contain; }
.ic-vide { width: 24px; height: 24px; flex: none; border-radius: 5px; border: 1px dashed var(--bord); }
button, input, select { font: inherit; color: inherit; }
::placeholder { color: var(--encre); opacity: .7; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* barre du haut : barre de titre brune des menus */
header.barre { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--brun); color: var(--sur-brun);
  border-bottom: 3px solid var(--brun2); box-shadow: inset 0 1px 0 rgb(255 231 173 / .18), 0 2px 10px rgb(0 0 0 / .25); }
/* deux rangées : nom · recherche · réglages, puis les onglets (collés au bas de la barre, comme des intercalaires) */
.barre-int { max-width: 1320px; margin: 0 auto; padding: 10px 16px 0; display: grid; gap: 8px 22px; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "marque recherche reglages" "onglets onglets onglets"; }
.marque { grid-area: marque; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sur-brun); }
.marque img.ic { width: 48px; height: 48px; margin: -6px 0; }
.marque img.logo { display: block; height: 58px; width: auto; margin: -8px 0 -6px; }
.marque b { font: 600 19px/1.1 var(--titre); letter-spacing: .01em; }
.marque small { display: block; color: var(--sur-brun2); font-size: 13px; }
.marque small.auteur { color: #ffe7ad; font-size: 12px; margin-top: 1px; }
nav.onglets { grid-area: onglets; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; }
nav.onglets a { padding: 8px 14px 9px; border-radius: 8px 8px 0 0; text-decoration: none; color: var(--sur-brun2); font: 500 15px/1.2 var(--titre); white-space: nowrap; }
nav.onglets a[aria-current="page"] { background: #ffe7ad; color: #000000; }
nav.onglets a:hover { color: var(--sur-brun); background: rgb(255 231 173 / .12); }
nav.onglets a[aria-current="page"]:hover { color: #000000; background: #ffe7ad; }
.reglages { grid-area: reglages; display: flex; gap: 8px; align-items: center; position: relative; }
/* 16/10/2026 (feuille de route 2.2) : une ligne en haut ; Après-jeu, Compact et Thème rangés derrière « Réglages » ;
   le sous-titre et le contact passent dans le pied de page */
.marque small { display: none; }
.panneau-reglages { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; display: grid; gap: 2px; padding: 8px 16px 10px;
  border-radius: 12px; background: var(--brun); border: 1px solid rgb(255 231 173 / .35); box-shadow: 0 8px 22px rgb(0 0 0 / .35); width: 370px; }
.panneau-reglages:not(.ouvert) { display: none; }
/* audit « Jobs » (18/10/2026) : un réglage = son nom et son aide (toujours visible, pas d'infobulle) à gauche, toutes ses
   valeurs à droite ; E2 : sur PC, le mode de lecture n'est que dans la barre (.modes-nav) */
.rg-titre { display: none; font: 600 12px/1 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--sur-brun2); margin: 8px 0 2px; }
.rg-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 7px 0; }
.rg-ligne > :last-child { justify-self: end; }
.panneau-reglages .rg-lecture, #langue-lib, #version-lib { display: none; }
.version-jeu { margin-left: 6px; }
.langue-ligne { display: contents; }
.rg-lib { font: 600 15px/1.25 var(--titre); color: var(--sur-brun); }
.rg-lib small { display: block; font: 400 12.5px/1.35 var(--texte); color: var(--sur-brun2); margin-top: 3px; }
.rg-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #9c6f45; border-radius: 9px; }
.rg-seg button { border: 0; background: none; color: var(--sur-brun); border-radius: 7px; padding: 6px 11px; font: 600 13.5px/1.2 var(--titre); cursor: pointer; }
.rg-seg button:hover { background: rgb(255 231 173 / .12); }
.rg-seg button[aria-pressed="true"] { background: #ffe7ad; color: #000000; }
.rg-switch { position: relative; flex: none; width: 46px; height: 27px; padding: 0; border-radius: 999px; border: 1px solid #9c6f45;
  background: rgb(255 231 173 / .18); cursor: pointer; }
.rg-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: linear-gradient(#ffffff, #e9dcc0); box-shadow: 0 1px 3px rgb(0 0 0 / .45); transition: left .15s; }
.rg-switch[aria-checked="true"] { background: linear-gradient(#8fd27a, #3f8f3a); border-color: #2f6b2b; }
.rg-switch[aria-checked="true"]::after { left: 21px; }
.rg-seg button:focus-visible, .rg-switch:focus-visible { outline: 2px solid #ffe7ad; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .rg-switch::after { transition: none; } }
/* E4 : tant que le bandeau d'appel aux dons est ouvert, le bouton « ♥ Soutenir » de la barre se cache (un seul appel) */
body:has(#appel:not([hidden])) nav.onglets a.soutenir { display: none; }
/* trois modes de lecture (feuille de route, étape 3 ; décidé le 16/10/2026) :
   Simple = « L'essentiel » de chaque article ou fiche (.n-simple), le détail caché derrière « Voir tout le détail » ;
   Avancé (défaut, sans data-mode) = tout, les blocs « Sous le capot » (details.capot) repliés ;
   Complet = tout, « Sous le capot » déplié partout (ouvreCapots).
   Règle de tri : adresses du code, formules des générateurs, n° de tirage, identifiants internes -> details.capot ;
   tableaux, conditions, toutes les sources -> .n-avance ; la réponse en une à trois lignes -> .essentiel (.n-simple). */
:root[data-mode="simple"] .zone-n:not(.detail-ouvert) .n-avance,
:root[data-mode="simple"] .zone-n:not(.detail-ouvert) details.capot { display: none; }
.voir-plus { display: none; }
:root[data-mode="simple"] .zone-n:not(.detail-ouvert) .voir-plus { display: inline-flex; }
.voir-plus { margin: 4px 0 8px; border: 1px solid var(--bord); background: var(--papier3); color: var(--encre); border-radius: 9px;
  padding: 8px 14px; font: 600 14px/1 var(--titre); cursor: pointer; }
.essentiel { background: var(--papier3); border: 1px solid var(--trait); border-left: 5px solid var(--m-carte); border-radius: 10px;
  padding: 12px 16px; margin: 0 0 22px; }
.essentiel > h3, .essentiel > h4 { margin: 0 0 6px; font: 600 13px/1.2 var(--titre); letter-spacing: .08em; text-transform: uppercase; }
.essentiel ul, .essentiel ol { margin: 0; padding-left: 20px; } .etapes-q > li { margin-bottom: 4px; }
.essentiel p { margin: 0 0 6px; } .essentiel p:last-child { margin: 0; }
details.capot { border: 1px dashed var(--src-code); border-radius: 10px; padding: 4px 14px; margin: 10px 0 14px; }
details.capot > summary { cursor: pointer; font: 600 13px/1.2 var(--titre); letter-spacing: .06em; text-transform: uppercase;
  color: var(--src-code); padding: 6px 0; }
details.capot[open] > summary { margin-bottom: 4px; }
.vise { outline: 3px solid var(--or); outline-offset: 4px; border-radius: 4px; transition: outline-color 1.5s; }
/* « ♥ Soutenir » (Ko-fi) : au bout de la rangée des onglets ; une case de plus dans le menu du téléphone */
/* onglet Accueil (17/10/2026, demande de l'utilisateur) : maison + libellé ; la maison seule entre 601 et 1200 px */
nav.onglets a.o-accueil { display: inline-flex; align-items: center; gap: 6px; }
nav.onglets a.o-accueil svg { width: 17px; height: 17px; flex: none; }
/* choix du mode de lecture, visible sur la ligne des rubriques (2e audit du 16/10/2026) */
.modes-nav { margin: 0 12px 5px auto; align-self: center; display: inline-flex; align-items: center; gap: 2px; border: 1px solid #9c6f45; border-radius: 9px; padding: 2px; }
.modes-nav .lib-m { font: 600 11px/1 var(--titre); letter-spacing: .06em; text-transform: uppercase; color: var(--sur-brun2); padding: 0 6px 0 4px; }
.modes-nav button { border: 0; background: none; color: var(--sur-brun); border-radius: 7px; padding: 4px 9px; font: 600 13px/1.2 var(--titre); cursor: pointer; }
.modes-nav button[aria-pressed="true"] { background: #ffe7ad; color: #000000; }
.modes-nav + a.soutenir { margin-left: 0; }
nav.onglets a.soutenir { margin: 0 0 5px auto; align-self: center; padding: 6px 12px; border-radius: 9px; background: #ffe7ad; color: #000000; font-weight: 600; }
nav.onglets a.soutenir:hover { background: #fff3cc; color: #000000; }
@media (max-width: 1200px) and (min-width: 601px) {  /* les 11 onglets tenaient tout juste à 1000 px : ♥ seul */
  nav.onglets a { padding-inline: 12px; }
  nav.onglets a.soutenir { padding-inline: 9px; }
  nav.onglets a.soutenir .lib-s { display: none; }
  nav.onglets a.o-accueil .lib-a { display: none; }
}
/* appel aux dons, façon Wikipédia : bande dans la continuité de la barre brune (pas de boîte sur le parchemin) ;
   en bas de l'écran sur téléphone (remis le 17/10/2026, demande de l'utilisateur : la ligne fine était trop petite) */
/* sous-onglets de la rubrique (feuille de route 6.2) : prolongent l'onglet actif, même couleur */
.sous-onglets { background: #ffe7ad; border-bottom: 1px solid #d9b77a; }
.sous-onglets .sous-int { max-width: 1320px; margin: 0 auto; padding: 0 16px; display: flex; gap: 2px 6px; overflow-x: auto; scrollbar-width: none; }
.sous-onglets a { padding: 8px 12px 7px; color: #4a2f17; text-decoration: none; font: 500 14.5px/1.2 var(--titre); white-space: nowrap; border-bottom: 3px solid transparent; }
.sous-onglets a:hover { color: #000000; border-bottom-color: #c99a5b; }
.sous-onglets a[aria-current="page"] { color: #000000; font-weight: 600; border-bottom-color: #634229; }
/* accueil (feuille de route 6.1) */
.accueil { max-width: 1040px; }
.accueil .intro { font-size: 17px; margin: 0 0 10px; }
.recherche-accueil input { width: 100%; font-size: 18px; padding: 12px 16px; border: 2px solid var(--bord); border-radius: 12px; background: var(--papier3); color: var(--encre); }
.res-accueil:not(:empty) { margin-top: 8px; padding: 6px 12px 10px; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier3); }
.res-accueil h4 { margin: 8px 0 2px; font: 600 12px/1.2 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.res-accueil a { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.portes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; margin: 26px 0; }
.porte { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--trait); border-radius: 12px; text-decoration: none; color: var(--encre); }
.porte:hover { border-color: var(--accent); }
.porte b { display: block; font: 600 18px/1.2 var(--titre); }
.porte small { display: block; color: var(--gris); font-size: 14px; margin-top: 3px; }
.porte-ic { flex: none; width: 44px; display: grid; place-items: center; }
.porte-ic img { width: 40px; height: 40px; image-rendering: pixelated; }
.porte-ic .glyphe { color: var(--accent); }
.choix-ou { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-ou button { border: 1px solid var(--bord); background: var(--papier3); color: var(--encre); border-radius: 9px; padding: 8px 14px; font: 600 14px/1.2 var(--titre); cursor: pointer; text-decoration: none; }
.choix-ou + .aide-t { margin-top: 10px; }
.choix-ou button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.porte-ic img[width="44"] { width: 44px; height: 33px; }
/* histoire pas à pas, après-jeu, tenues (feuille de route 7.2 à 7.4) */
.etape-actuelle { font-size: 18px; margin: 0 0 12px; }
.etape-actuelle small { color: var(--gris); font: 600 12px/1.2 var(--titre); letter-spacing: .08em; text-transform: uppercase; }
.liste-etapes { margin-top: 14px; } .liste-etapes select { max-width: 100%; }
.etapes-apres > li { margin-bottom: 10px; } .etapes-apres .puces { margin-top: 4px; }
.tenues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 4px 28px; }
.tenue h4 { margin: 12px 0 4px; } .tenue .aide { margin: 4px 0 0; }
/* suivi de collection (feuille de route 8.2) */
.colls { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; }
label.coll { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 15px; }
label.coll input, .coll-c { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.dist .coll-c { margin: 0 8px 0 0; vertical-align: -3px; }
.barre-coll { display: inline-block; width: min(320px, 60vw); height: 12px; border-radius: 6px; background: var(--papier3); border: 1px solid var(--trait); vertical-align: -1px; overflow: hidden; }
.barre-coll span { display: block; height: 100%; background: var(--accent); }
.colonnes-coll { columns: 260px; column-gap: 24px; } .colonnes-coll > * { display: block; break-inside: avoid; padding: 2px 0; } .colonnes-coll > label.coll { display: flex; }
.bouton-fichier { border: 1px solid var(--bord); background: var(--papier3); color: var(--encre); border-radius: 9px; padding: 8px 14px; font: 600 14px/1.2 var(--titre); cursor: pointer; }
.bouton-fichier input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bouton-fichier:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* audit « Jobs » du 18/10/2026 : lire sa sauvegarde = le geste principal de la page, une zone où déposer le fichier
   (contour en pointillés : un contrôle, pas une boîte posée sur le parchemin) */
.zone-depot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 780px;
  margin: 22px 0 8px; padding: 20px 24px; border: 2px dashed var(--bord); border-radius: 18px; }
.zone-depot.survol { border-style: solid; border-color: var(--accent); }
.zone-depot img.im { width: 64px; height: 64px; }
.zone-depot b { display: block; font: 600 21px/1.2 var(--titre); }
.zone-depot small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; }
.liens-sec { font-size: 14.5px; margin: 0 0 6px; }
.liens-sec .lien-bouton { font: 400 14.5px var(--texte, inherit); }
@media (max-width: 700px) { .zone-depot { grid-template-columns: auto minmax(0, 1fr); padding: 16px; } .zone-depot > :last-child { grid-column: 1 / -1; justify-self: start; } }
/* liens directs (feuille de route 9.1) : visibles en mode Complet */
.n-complet { display: none; } :root[data-mode="complet"] .n-complet { display: inline; }
.lien-direct { display: none; margin-left: 8px; border: 0; background: none; padding: 0 2px; cursor: pointer; font-size: 14px; vertical-align: 2px; }
:root[data-mode="complet"] .lien-direct { display: inline; }
/* table Hoimi (feuille de route 9.3) */
.hoimi-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 16px; margin: 10px 0; }
.hoimi-champs .large { grid-column: 1 / -1; }
.hoimi-champs .champ input, .hoimi-champs .champ select { width: 100%; min-width: 0; }
table.hoimi tr.bon td { background: #c4241c22; font-weight: 700; }
/* objets rares par map method : carte proposée = bouton qui la reprend dans le calcul */
.lien-carte { font: inherit; font-weight: 700; color: var(--lien); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.lien-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-champs { align-items: end; }
.bm-qui { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.bm-qui li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
/* carte du monde des lieux (feuille de route 6.5) */
.carte-lieux { position: relative; overflow: hidden; border-radius: 10px; }
.carte-lieux img { display: block; width: 100%; height: auto; }
.pt-lieu { position: absolute; display: flex; align-items: center; gap: 4px; transform: translate(-6px, -50%); }
.pt-lieu::before, .pt-l { content: ""; flex: none; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #000a; background: #8b1e1e; display: inline-block; }
.pt-lieu.g2::before, .pt-l.g2 { background: #2d3f8f; } .pt-lieu.g3::before, .pt-l.g3 { background: #2f6b2f; }
.legende-plan .pt-l { vertical-align: -2px; margin-right: 4px; }
.pt-lieu.gauche { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.pt-lieu .noms { display: flex; flex-direction: column; gap: 1px; }
.pt-lieu a { background: rgb(255 246 220 / .88); color: #3b2412; padding: 1px 5px; border-radius: 4px; font: 600 12px/1.25 var(--titre); text-decoration: none; white-space: nowrap; }
.pt-lieu a:hover { background: #fff; text-decoration: underline; }
@media (max-width: 760px) { .pt-lieu .noms { display: none; } }
.appel { background: var(--brun2); color: #ffffff; border-bottom: 3px solid var(--brun); }
.appel-int { max-width: 1320px; margin: 0 auto; padding: 18px 52px 20px 16px; display: grid; gap: 10px 22px; align-items: center;
  grid-template-columns: 72px minmax(0, 1fr) auto; position: relative; }
.appel-ic { width: 72px; height: 72px; }
.appel h2 { font: 600 22px/1.2 var(--titre); margin: 0 0 6px; padding-right: 30px; color: #ffffff; }
.appel p { margin: 0; font-size: 15px; line-height: 1.5; max-width: 860px; }
.appel-actions { display: flex; flex-direction: column; gap: 8px; }
.appel-don { background: #ffe7ad; color: #000000; border-radius: 10px; padding: 13px 24px; font: 700 17px/1 var(--titre);
  text-decoration: none; text-align: center; white-space: nowrap; box-shadow: 0 2px 0 var(--brun); }
.appel-don:hover { background: #fff3cc; }
.appel-actions button { background: none; border: 1px solid rgb(255 231 173 / .55); color: #ffffff; border-radius: 9px;
  padding: 8px 12px; font: 600 13px/1 var(--titre); cursor: pointer; }
.appel-actions button:hover { background: rgb(255 231 173 / .12); }
.appel-x { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: #ffffff; font-size: 24px;
  line-height: 1; padding: 4px 8px; cursor: pointer; }
.appel-don:focus-visible, .appel-actions button:focus-visible, .appel-x:focus-visible { outline: 2px solid #ffe7ad; outline-offset: 2px; }
/* vue sans révélations (étape de l'histoire, après-jeu caché) : toujours dite, et une touche pour tout voir */
.filtre-hist { background: var(--brun2); color: #ffffff; border-bottom: 3px solid var(--brun); }
.filtre-hist-int { max-width: 1320px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 14px; font-size: 15px; line-height: 1.4; }
.filtre-hist b { color: #ffe7ad; }
.filtre-hist .fh-tout, .filtre-hist .bj-us { background: #ffe7ad; color: #000000; border: 0; border-radius: 9px; padding: 7px 16px;
  font: 700 15px/1 var(--titre); cursor: pointer; box-shadow: 0 2px 0 var(--brun); }
.filtre-hist .fh-tout:hover, .filtre-hist .bj-us:hover { background: #fff3cc; }
.filtre-hist a { color: #ffffff; font-weight: 600; }
.filtre-hist .fh-tout:focus-visible, .filtre-hist .bj-us:focus-visible, .filtre-hist a:focus-visible { outline: 2px solid #ffe7ad; outline-offset: 2px; }
.boutons-tel, .infos-tel { display: none; }
/* recherche unique : objets, monstres, lieux, quêtes */
.recherche-g { grid-area: recherche; position: relative; max-width: 640px; width: 100%; justify-self: center; }
.recherche-g input { width: 100%; padding: 9px 14px 9px 38px; border-radius: 10px; border: 1px solid #9c6f45; background: #fff3cc; color: #000000; font-size: 15.5px; }
.recherche-g input::placeholder { color: #000000; opacity: .62; }
.recherche-g::before { content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-52%); color: #634229; font-size: 20px; pointer-events: none; }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: min(70vh, 560px); overflow: auto; z-index: 30; padding: 6px 0; color: var(--encre); }
.suggestions h4 { margin: 8px 14px 4px; font: 600 12.5px/1 var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.suggestions a { display: flex; align-items: center; gap: 10px; padding: 5px 14px; text-decoration: none; color: var(--encre); min-height: 36px; }
.suggestions a:hover, .suggestions a:focus-visible { background: var(--papier2); outline: none; }
.suggestions a small { color: var(--gris); font-size: 13px; margin-left: auto; padding-left: 10px; text-align: right; }
.suggestions img.im { --t: 30px; }
.suggestions .tout { border-top: 1px solid var(--trait); margin-top: 6px; padding-top: 9px; font-weight: 600; }
.suggestions .rien { padding: 10px 14px; color: var(--gris); margin: 0; }
.num-q { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 5px; border-radius: 6px; background: var(--papier2);
  border: 1px solid var(--bord); font: 600 13px/1 var(--titre); font-variant-numeric: tabular-nums; flex: none; }
.pin { display: inline-grid; place-items: center; width: 30px; height: 24px; flex: none; font-size: 15px; }
.theme { border: 1px solid #9c6f45; background: none; color: var(--sur-brun); border-radius: 9px; padding: 6px 11px; cursor: pointer;
  font: 600 13px/1 var(--titre); display: inline-flex; gap: 7px; align-items: center; }
.theme:hover { background: rgb(255 231 173 / .12); }
.theme span[aria-hidden] { font-size: 15px; }
.theme[aria-pressed="true"] { background: #ffe7ad; color: #000000; }
kbd { font: 12.5px var(--mono); border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--papier3); }
.langue { display: inline-flex; border: 1px solid #9c6f45; border-radius: 9px; padding: 2px; }
.langue button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; cursor: pointer; font: 600 13px/1 var(--titre); color: var(--sur-brun2); }
.langue button[aria-pressed="true"] { background: #ffe7ad; color: #000000; }

main { max-width: 1320px; margin: 0 auto; padding-inline: clamp(16px, 3.5vw, 48px); padding-block: 30px 64px; }
/* pied de page (feuille de route 2.3) : l'aide, les sources et le contact, dans la barre brune ; toujours en bas de l'écran */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; width: 100%; }
.pied { background: var(--brun); color: var(--sur-brun2); border-top: 3px solid var(--brun2); font-size: 14px; }
.pied-int { max-width: 1320px; margin: 0 auto; padding: 18px clamp(16px, 3.5vw, 48px) calc(22px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: 10px; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied a { color: var(--sur-brun); }
.pied p { margin: 0; }
/* listes longues en colonnes, et codes (graines) en pastilles (feuille de route 2.5) */
.src { display: inline-block; font: 600 11.5px/1 var(--titre); letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px 2px;
  border-radius: 999px; border: 1.5px solid currentColor; vertical-align: 1px; white-space: nowrap; }
.src-code { color: var(--src-code); } .src-corr { color: var(--src-corr); } .src-jeu { color: var(--src-jeu); } .src-comm { color: var(--src-comm); }
ul.colonnes { columns: 3 230px; column-gap: 28px; margin: 6px 0 8px; padding-left: 18px; }
ul.colonnes li { break-inside: avoid; margin-bottom: 2px; }
.codes { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.codes code { white-space: nowrap; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; text-wrap: balance; letter-spacing: .005em; }
h2 { font-size: 26px; margin: 0 0 6px; }
h3 { font-size: 18px; margin: 26px 0 8px; }
.intro { color: var(--gris); max-width: 72ch; margin: 0 0 16px; }
.papier { background: var(--papier); border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--ombre); }
/* mise en page (refonte du 08/10/2026) : le parchemin du jeu est le fond de toutes les pages ; rien n'est encadré sauf
   ce qui défile ou se manipule (tableaux, listes, filtres). Trois niveaux, par la taille et l'espace, jamais par un trait :
   titre de page (34 px) · titre de section (23 px, curseur ▶ des menus du jeu) · sous-titre d'article (18 px). */
#app .bloc { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:is(.contenu, #app) > :not(.page-titre, .page-intro) + :is(.bloc, .article) { margin-top: 60px; }
.page-titre { margin-bottom: 40px; }
.page-titre h2 { font: 700 34px/1.15 var(--titre); margin: 0 0 10px; letter-spacing: 0; }
.page-titre .intro { font-size: 17px; line-height: 1.55; max-width: 70ch; margin: 0; }
.page-titre > p:not(.intro) { margin: 12px 0 0; }
.page-titre.seul { margin-bottom: 26px; }
.page-intro { margin-bottom: 52px; }
.page-intro .intro { font-size: 17px; line-height: 1.55; max-width: 70ch; margin: 0; }
.page-intro > p:not(.intro) { margin: 12px 0 0; }
.bloc > h3:first-child, .article.plein > h3 { display: flex; align-items: baseline; gap: 10px; font: 600 23px/1.25 var(--titre); margin: 0 0 12px; }
.bloc > h3:first-child::before, .article.plein > h3::before { content: "▶"; flex: none; font-size: 13px; color: var(--accent); transform: translateY(-3px); }
.article.plein > h3 { margin-top: 56px; }
.article.plein > :first-child { margin-top: 0; }
.regles > h3:not(:first-child), .article h4 { font: 600 18px/1.3 var(--titre); margin: 28px 0 6px; }
/* section d'un tableau : titre à gauche, petit filtre et nombre de lignes à droite */
.t-tab { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; }
.t-tab > * { grid-column: 1 / -1; }
.t-tab > h3 { grid-column: 1; grid-row: 1; }
.t-tab > .outils { grid-column: 2; grid-row: 1; margin: 0 0 10px; flex-wrap: nowrap; }
.t-tab > .outils input { flex: 0 0 240px; padding: 6px 12px; }

/* page Objets */
.filtres { padding: 14px; display: grid; gap: 12px; }
.recherche { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.recherche input[type="search"] { flex: 1 1 320px; min-width: 0; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--bord);
  background: var(--papier3); font-size: 16px; }
.recherche label { display: inline-flex; gap: 6px; align-items: center; color: var(--gris); font-size: 14px; cursor: pointer; }
.rangee { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
.rangee > .etiq { font: 600 13px/1 var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--gris); min-width: 112px; }
.puces { display: flex; gap: 6px; flex-wrap: wrap; flex: 1 1 0; min-width: 0; }
.carte-mer { position: relative; max-width: 640px; margin: 4px 0 10px; }
.carte-mer img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--bord); image-rendering: auto; }
.carte-mer .num-zone { position: absolute; transform: translate(-50%, -50%); width: 1.7em; height: 1.7em; line-height: 1.7em; text-align: center;
  border-radius: 50%; background: rgba(255,255,255,.92); color: #1b2a40; font: 700 13px/1.7em var(--titre); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* antres : carte du monde (mini-cartes des régions assemblées, 1 536 × 1 152) et ses 150 points, dessins des cartes au trésor */
.monde-grille { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px 18px; align-items: start; }
@media (max-width: 900px) { .monde-grille { grid-template-columns: minmax(0, 1fr); } }
.carte-monde { position: relative; }
.carte-monde img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--bord); }
.pt-empl { position: absolute; transform: translate(-50%, -50%); width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .55); cursor: pointer; }
.legende-empl .pt-empl { position: static; display: inline-block; transform: none; vertical-align: -1px; margin-right: 6px; cursor: default; }
.pt-empl.g0 { background: #b8352d; } .pt-empl.g1 { background: #2a5fb8; } .pt-empl.g2 { background: #7a4fb8; }
.pt-empl:hover, .pt-empl:focus-visible { width: 15px; height: 15px; z-index: 2; }
.pt-empl.choisi { width: 19px; height: 19px; z-index: 3; border-color: #ffe7ad; box-shadow: 0 0 0 2px #000000, 0 0 10px #ffffff; }
@media (max-width: 600px) { .carte-monde .pt-empl { width: 7px; height: 7px; border-width: 1px; } .carte-monde .pt-empl.choisi { width: 13px; height: 13px; } }
.legende-empl { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; margin: 0 0 8px; }
img.dessin-empl { display: block; max-width: 100%; height: auto; border-radius: 4px; }
#m-fiche img.dessin-empl { image-rendering: pixelated; margin: 10px 0 6px; }
.empl-dessin { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.empl-dessin img.dessin-empl { flex: none; }
.galerie-empl { margin-top: 14px; }
.galerie-empl summary { cursor: pointer; font: 600 15px/1.4 var(--titre); }
.vignettes-empl { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; margin-top: 10px; }
.vignette-empl { border: 1px solid var(--trait); background: var(--papier3); border-radius: 8px; padding: 6px; cursor: pointer; text-align: left;
  display: grid; gap: 4px; font-size: 13.5px; }
.vignette-empl:hover, .vignette-empl:focus-visible { border-color: var(--bord); background: var(--papier2); }
.vignette-empl img.dessin-empl { width: 100%; }
.sp-table h4 { font: 600 16.5px/1.3 var(--titre); margin: 22px 0 4px; }
.monde-grille, .sp-detail, #a-detail { scroll-margin-top: 130px; }  /* sous la barre collante du haut */
/* bouton de l'action principale d'une page, un seul par écran (audit « Jobs » du 18/10/2026 : le bouton par défaut
   d'Aqua, bombé, aux couleurs dorées des menus du jeu) ; tous les autres boutons restent plats */
.bouton-p { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #a87420; border-radius: 999px; padding: 10px 22px;
  font: 700 15.5px/1.2 var(--titre); color: #3a2208; cursor: pointer; text-decoration: none;
  background: linear-gradient(#fff7dc 0%, #ffe08a 47%, #f3bd45 53%, #f8d778 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), inset 0 -2px 4px rgb(150 95 15 / .25), 0 2px 6px rgb(60 30 10 / .3); }
.bouton-p:hover { filter: brightness(1.05); }
.bouton-p:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 3px rgb(60 30 10 / .3); }
.bouton-p:focus-visible, .bouton-p:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
/* vue sans révélations : pastille à côté du titre de la page (audit « Jobs » : plus de bande sous l'en-tête) */
.page-titre.avec-hist { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.page-titre.avec-hist > :not(h2, .pastille-hist) { flex-basis: 100%; }
.pastille-hist { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 5px 6px 5px 14px;
  border: 1.5px solid var(--bord); border-radius: 999px; font-size: 14.5px; line-height: 1.3; }
.pastille-hist .fh-tout { border: 1px solid var(--bord); background: var(--papier3); color: var(--encre); border-radius: 999px; padding: 5px 14px;
  font: 600 14px/1.2 var(--titre); cursor: pointer; }
.pastille-hist .fh-tout:focus-visible, .pastille-hist a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pastille-hist a { color: var(--encre); font-weight: 600; font-size: 14px; margin-right: 8px; }
@media (max-width: 700px) { .pastille-hist { border-radius: 16px; padding: 6px 10px; } }
.id-antre { align-items: flex-end; margin-top: 22px; }
.id-antre .champ input { width: 11em; font-family: var(--mono); text-transform: uppercase; }
.voir-tout { margin: 8px 0 0; }
/* textes repliés restants (galerie des dessins, détail par base) : simple lien texte à flèche, sans cadre */
.galerie-empl > summary, .par-base > summary { cursor: pointer; list-style: none; color: var(--lien); text-decoration: underline; text-underline-offset: 3px; font: 600 15px/1.4 var(--titre); }
.galerie-empl > summary::-webkit-details-marker, .par-base > summary::-webkit-details-marker { display: none; }
.galerie-empl > summary::before, .par-base > summary::before { content: "▸ "; display: inline-block; text-decoration: none; }
.galerie-empl[open] > summary::before, .par-base[open] > summary::before { content: "▾ "; }
.puce { border: 1px solid var(--bord); background: var(--papier3); border-radius: 999px; padding: 4px 11px; cursor: pointer; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 6px; }
.puce img.ic { margin: -4px 0 -4px -5px; }
.puce .n { color: var(--gris); font-size: 13px; font-variant-numeric: tabular-nums; }
.puce[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.puce[aria-pressed="true"] .n { color: inherit; }
.puce .pt { width: 8px; height: 8px; border-radius: 50%; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; flex: 1 1 0; min-width: 0; }
.tuile { display: flex; align-items: center; gap: 8px; border: 1px solid var(--trait); background: var(--papier3); border-radius: 8px;
  padding: 4px 9px 4px 5px; cursor: pointer; text-align: left; font-size: 14.5px; }
.tuile .n { margin-left: auto; color: var(--gris); font-size: 13px; font-variant-numeric: tabular-nums; }
.tuile:hover { border-color: var(--bord); }
.tuile[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.tuile[aria-pressed="true"] .n { color: inherit; }
select { border: 1px solid var(--bord); background: var(--papier3); border-radius: 8px; padding: 5px 8px; font-size: 14px; }
.resume { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 2px 8px; color: var(--gris); flex-wrap: wrap; }
.resume b { color: var(--encre); font: 600 16px/1 var(--titre); font-variant-numeric: tabular-nums; }
.plus-filtres { display: grid; gap: 12px; }
.aide-page { padding: 12px 16px; margin-bottom: 14px; display: flex; gap: 8px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.aide-page p { margin: 0; max-width: 95ch; }
.resume-d { display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.resume-d label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.lien-bouton { border: 0; background: none; color: var(--lien); cursor: pointer; padding: 0; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

.liste { overflow: hidden; }
.objet, .entetes { display: grid; grid-template-columns: var(--ic) minmax(0, 1.5fr) minmax(0, .65fr) minmax(0, .85fr) 64px 84px minmax(0, 1.7fr);
  gap: 14px; align-items: center; padding: 5px 14px; }
/* ordre du jeu : les bandeaux donnent déjà catégorie et sous-catégorie */
.liste.groupee .objet, .liste.groupee .entetes { grid-template-columns: var(--ic) minmax(0, 1.3fr) 64px 84px minmax(0, 2.3fr); }
.liste.groupee .cat, .liste.groupee .sous { display: none; }
/* mode compact : lignes plus basses partout (les tailles d'images sont dans :root) */
:root[data-compact] body { line-height: 1.4; }
:root[data-compact] .objet { padding-block: 2px; gap: 10px; }
:root[data-compact] .objet .noms b { display: inline; margin-right: 8px; }
:root[data-compact] .objet .noms small { font-size: 13px; }
:root[data-compact] .groupe-t, :root[data-compact] .groupe-c { padding-block: 3px; }
:root[data-compact] td { padding: 3px 8px; }
:root[data-compact] th { padding: 6px 8px; }
:root[data-compact] .quete { padding-block: 3px; }
:root[data-compact] .tuile-lieu { padding: 7px 10px; gap: 4px; }
:root[data-compact] .menu-lat a { padding-block: 4px; }
:root[data-compact] .fenetre section { margin-top: 12px; }
:root[data-compact] .fenetre ul, :root[data-compact] .liste-cel { row-gap: 1px; }
:root[data-compact] .mode { padding-block: 0; }
:root[data-compact] .pill { padding: 3px 7px; }
/* page Objets : barre d'outils, filtres repliés, filtres actifs visibles */
.barre-outils { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; margin: 0 2px 10px; }
.barre-outils .droite { margin-left: auto; display: inline-flex; gap: 16px; align-items: center; flex-wrap: wrap; color: var(--gris); }
.barre-outils .droite label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.barre-outils b#nb { color: var(--encre); font: 600 16px/1 var(--titre); font-variant-numeric: tabular-nums; }
.puce.actif { background: var(--papier2); font-weight: 600; }
.puce.actif span[aria-hidden] { font-weight: 400; opacity: .75; }
.filtres { margin-bottom: 12px; }
.bandeau-autres { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; margin: 0 2px 12px; font-size: 14px; }
.bandeau-autres > b { font: 600 13px/1 var(--titre); text-transform: uppercase; letter-spacing: .07em; color: var(--gris); margin-right: 2px; }
.bandeau-autres a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--encre); background: var(--papier3);
  border: 1px solid var(--bord); border-radius: 999px; padding: 2px 10px 2px 4px; min-height: 30px; }
.bandeau-autres a:hover { background: var(--papier2); }
.bandeau-autres img.im { --t: 26px; }
.bandeau-autres small { display: none; }
.bandeau-autres .num-q { height: 22px; min-width: 26px; }
.entetes { font: 600 13px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .07em; color: var(--gris); padding-block: 9px;
  border-bottom: 2px solid var(--brun2); }
.objet { border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.objet img.ic, .objet .ic-vide { width: var(--ic); height: var(--ic); }
.objet:hover { background: var(--papier2); }
.objet .noms b { display: block; font-weight: 700; }
.objet .noms small, .objet .cat, .objet .sous { color: var(--gris); font-size: 14px; }
.groupe-t { display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--brun); color: var(--sur-brun);
  font: 600 16px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .08em; box-shadow: inset 0 1px 0 rgb(255 231 173 / .2); }
.groupe-t .n, .groupe-c .n { margin-left: auto; font: 500 14px/1 var(--texte); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.groupe-c { display: flex; align-items: center; gap: 9px; padding: 5px 14px; background: var(--papier2); color: var(--encre);
  border-top: 1px solid var(--bord); font: 600 14.5px/1.2 var(--titre); letter-spacing: .02em; }
.groupe-t + .groupe-c { border-top: 0; }
.groupe-c + .objet { border-top-color: var(--bord); }
.etoiles { color: var(--or); letter-spacing: 1px; font-size: 16px; white-space: nowrap; }
.pill { font: 600 13px/1 var(--titre); padding: 5px 8px; border-radius: 6px; text-align: center; white-space: nowrap; letter-spacing: .03em; }
.pill.I { color: var(--infini); background: var(--infini-fond); }
.pill.U { color: var(--unique); background: var(--unique-fond); }
.pill.L { color: var(--encre); background: var(--papier2); border: 1px dashed var(--bord); }
.pill.avec-l small { display: block; font: 500 11px/1.1 var(--texte); letter-spacing: 0; opacity: .85; margin-top: 2px; }
.modes { display: flex; gap: 5px; flex-wrap: wrap; }
.mode { font-size: 13px; padding: 2px 7px 2px 6px; border-radius: 5px; background: var(--papier3); border: 1px solid var(--trait);
  display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; color: var(--encre); }
.mode .pt { width: 7px; height: 7px; border-radius: 50%; }
.vide-res { padding: 40px 16px; text-align: center; color: var(--gris); }
.plus { display: block; width: 100%; padding: 12px; border: 0; border-top: 2px solid var(--brun2); background: var(--papier2); cursor: pointer; color: var(--lien); font-weight: 600; }

/* fiche : page de parchemin de la fiche d'objet du jeu */
.voile { position: fixed; inset: 0; background: var(--voile); z-index: 40; }
.fiche { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 41; padding: 14px;
  padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: flex; }
.fenetre { flex: 1; overflow: auto; background-color: var(--papier); background-image: var(--fond-img); background-size: cover;
  color: var(--encre); border: 3px solid var(--brun); border-radius: 10px; box-shadow: 0 20px 60px rgb(0 0 0 / .45); padding: 0 0 26px; }
.fenetre .tete { display: flex; gap: 14px; align-items: center; background: var(--brun); color: var(--sur-brun); padding: 12px 14px 12px 12px;
  border-bottom: 3px solid var(--brun2); position: sticky; top: 0; z-index: 1; }
.fenetre .tete .cadre { background: #ffe7ad; border-radius: 8px; padding: 3px; box-shadow: inset 0 0 0 2px #b58442; flex: none; }
.fenetre .tete img.ic, .fenetre .tete .ic-vide, .fenetre .tete img.im { width: var(--ic-tete); height: var(--ic-tete); display: block; }
.fenetre h2 { margin: 0; font-size: 24px; color: var(--sur-brun); }
.fenetre .sous { color: var(--sur-brun2); font-size: 14px; }
.fermer { margin-left: auto; align-self: flex-start; border: 2px solid var(--sur-brun2); background: none; color: var(--sur-brun);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font: 600 18px/1 var(--titre); flex: none; }
.fenetre .corps { padding: 0 36px 0 42px; }  /* le bord déchiré du parchemin occupe ~35 px */
.fenetre .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; align-items: center; }
.fenetre .meta > span:not(.pill) { border: 1px solid var(--bord); border-radius: 6px; padding: 3px 8px; font-size: 14px; background: var(--papier3); }
.fenetre section { margin-top: 24px; }
/* audit « Jobs » du 18/10/2026 : titres en minuscules, sans trait ; la provenance « code » est dite une fois sous le
   nom (.mention-src), seules les exceptions (corrigé, mesuré, communauté) gardent leur pastille */
.fenetre section h3 { margin: 0 0 8px; font: 700 18px/1.25 var(--titre); color: var(--encre); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fenetre .essentiel > h3 { font: 700 18px/1.25 var(--titre); letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
.fenetre .src-code { display: none; }
.fenetre .tete .mention-src { color: var(--sur-brun2); font-size: 12.5px; margin-top: 3px; }
/* « Je l'ai eu » / « Vaincu » : un bouton bombé qui passe au vert une fois coché (la case reste la vraie commande) */
.fenetre label.coll { gap: 8px; padding: 5px 14px 5px 7px; border: 1.5px solid var(--bord); border-radius: 999px; font: 600 14.5px/1.2 var(--titre);
  color: #3a2208; background: linear-gradient(#fffaf0, #f3e2b8); box-shadow: inset 0 1px 0 #ffffff, 0 1px 3px rgb(60 30 10 / .25); }
.fenetre label.coll input { appearance: none; margin: 0; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--bord); background: #ffffff; flex: none; }
.fenetre label.coll:has(input:checked) { color: #ffffff; border-color: #2f6b2b; background: linear-gradient(#8fd27a, #3f8f3a); }
.fenetre label.coll input { display: grid; place-content: center; }
.fenetre label.coll input:checked { border-color: #ffffff; }
.fenetre label.coll input:checked::after { content: "✓"; color: #3f8f3a; font: 800 14px/1 var(--titre); }
.fenetre label.coll:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* fiche ouverte : la page derrière ne défile plus (une seule barre de défilement) */
html { scrollbar-gutter: stable; }
html:has(#fiche:not([hidden])) { overflow: hidden; }
.fenetre section h3 .pt { width: 8px; height: 8px; border-radius: 50%; }
.fenetre ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.fenetre li { padding-left: 18px; position: relative; }
.fenetre li::before { content: "▶"; position: absolute; left: 0; top: .35em; font-size: 9px; color: var(--brun2); }
.fenetre ul.avec-im li { display: flex; align-items: center; gap: 8px; }
.fenetre .lien-m { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-decoration: none; }
.fenetre .lien-m:hover span { text-decoration: underline; color: var(--lien); }
.fenetre .aide { font-size: 14px; color: var(--gris); margin: 0 0 8px; }
.fenetre .desc { font-style: italic; margin: 12px 0 8px; }
.fenetre .util li { margin-bottom: 2px; }
.fenetre .util .aide { margin-top: 4px; }
.fenetre table { font-size: 13.5px; }
.fenetre td, .fenetre th { padding: 5px 7px; }
.fenetre th { position: static; }  /* collé en haut, il passerait par-dessus le titre de la fiche */
.stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.stats span { border: 1px solid var(--bord); border-radius: 6px; padding: 2px 8px; font-size: 14px; background: var(--papier3); }
.fenetre .puces .n { color: var(--gris); font-size: 13px; }
.fenetre ul.avec-im li::before { top: auto; }
.fenetre .puces a { display: inline-flex; gap: 6px; align-items: center; text-decoration: none; color: var(--encre); background: var(--papier3);
  border: 1px solid var(--bord); border-radius: 6px; padding: 2px 8px 2px 3px; font-size: 14px; }

/* pages à menu : sous-pages à gauche dans un cadre de parchemin clair (une fenêtre de menu du jeu), case active
   pleine (liste déroulante au-dessus du titre sur téléphone) */
.deux { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; }
.deux.vide { grid-template-columns: minmax(0, 1fr); }
.deux.vide .menu-lat, .menu-sel.vide { display: none !important; }
.menu-lat { position: sticky; top: calc(132px + env(safe-area-inset-top, 0px)); display: grid; gap: 2px; max-height: calc(100vh - 150px); overflow-y: auto;
  padding: 8px; background: var(--papier); border: 1px solid var(--bord); border-radius: 10px; box-shadow: var(--ombre);
  scrollbar-width: thin; scrollbar-color: var(--bord) transparent; }
.groupe-lat { margin: 12px 10px 4px; font: 600 12.5px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .08em; }
.groupe-lat:first-child { margin-top: 4px; }
.menu-sel { display: none; }
.menu-lat a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--encre); font-size: 15px; }
.menu-lat a:hover { background: var(--papier2); }
.menu-lat a[aria-current="page"] { background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.menu-lat a .n { margin-left: auto; font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
.menu-lat .pt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sous-lat { display: grid; margin: 2px 0 6px 12px; }
.sous-lat a { padding: 4px 10px; font-size: 14px; }
.groupe-lat + .sous-lat { margin-left: 0; }
.contenu > :first-child { margin-top: 0; }
.outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.outils input { flex: 0 1 320px; min-width: 0; padding: 8px 12px; border-radius: 9px; border: 1px solid var(--bord); background: var(--papier3); }
.outils small { color: var(--gris); }
.champ-l { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; }
.tab-conteneur { overflow-x: auto; border: 1px solid var(--bord); border-radius: 8px; max-height: 70vh; background: var(--papier3); box-shadow: 0 1px 3px rgb(57 49 24 / .15); }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { position: sticky; top: 0; background: var(--brun); text-align: left; font: 600 13px/1.2 var(--titre); text-transform: uppercase;
  letter-spacing: .06em; color: var(--sur-brun); padding: 9px 10px; white-space: nowrap; z-index: 1; }
td { padding: 6px 10px; border-top: 1px solid var(--trait); vertical-align: top; }
tr:first-child td { border-top: 0; }
tbody tr:hover td { background: var(--papier2); }
td.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
th.num { text-align: right; }
td.large { min-width: 20em; }
th button.tri { all: unset; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
th button.tri:focus-visible { outline: 2px solid var(--sur-brun); outline-offset: 3px; border-radius: 3px; }
th button.tri span::after { content: "↕"; opacity: .5; font-size: 11px; }
th[aria-sort="ascending"] button.tri span::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] button.tri span::after { content: "▼"; opacity: 1; }
.obj { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--encre); }
.obj:hover span { text-decoration: underline; color: var(--lien); }
td .obj:has(> img.im) { align-items: flex-start; }
.liste-cel { display: flex; flex-direction: column; gap: 3px; }
.liste-cel .ligne { display: flex; gap: 8px; align-items: center; }
.pct { font-variant-numeric: tabular-nums; color: var(--gris); min-width: 3.4em; text-align: right; font-size: 13.5px; }
.prix { font-variant-numeric: tabular-nums; color: var(--gris); font-size: 13.5px; }
.multi { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.liste-cel.multi { flex-direction: row; gap: 4px 20px; }
.aide-t { color: var(--gris); font-size: 14.5px; margin: -2px 0 10px; max-width: 95ch; }
.outil-antre { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.champ { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.champ select, .champ input { font-weight: 400; font-size: 15px; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--bord); background: var(--papier3); min-width: 150px; }
.champ input { width: 90px; min-width: 0; }
.a-res { margin-top: 14px; }
.a-res li.grise { opacity: .55; }
.a-res h4 { margin: 14px 0 4px; }
.a-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; align-items: center; }
.a-dl dt { font-weight: 600; }
.v-max { font-weight: 700; }
.v-min { color: var(--gris); }
.a-dl dd { margin: 0; }
@media (max-width: 600px) { .a-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .a-dl dd { margin-bottom: 8px; } }
.page-titre { margin-bottom: 16px; }
.page-titre .intro { margin-bottom: 0; }
.filtre-page { width: min(100%, 420px); padding: 9px 14px; border-radius: 9px; border: 1px solid var(--bord); background: var(--papier3); margin: 0 0 14px; }
.puces + .filtre-page { margin-top: 14px; }

/* page Lieux : une tuile par lieu, pastilles des modes (mêmes couleurs que les fiches d'objet) */
.cat-lieux + .cat-lieux { margin-top: 22px; }
.cat-lieux h3 { margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; }
.cat-lieux h3 .n { font: 400 14px/1 var(--texte); color: var(--gris); }
.tuiles-lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.tuile-lieu { display: grid; align-content: start; gap: 6px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 9px; background: var(--papier);
  text-decoration: none; color: var(--encre); box-shadow: var(--ombre); }
.tuile-lieu:hover { background: var(--papier2); }
#app .tuile-lieu { box-shadow: none; background: var(--papier3); }
#app .tuile-lieu:hover { background: var(--papier2); }
.tuile-lieu b { font: 600 16px/1.2 var(--titre); }
.tuile-lieu small { color: var(--gris); font-size: 13px; }
.tuile-lieu .modes .mode { font-variant-numeric: tabular-nums; }

/* page Quêtes : une ligne par quête, groupées par étape de l'histoire */
.groupe-q { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--brun); color: var(--sur-brun);
  font: 600 15px/1.2 var(--titre); letter-spacing: .03em; }
.groupe-q .n { margin-left: auto; font: 500 14px/1 var(--texte); }
.quete { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center;
  padding: 7px 14px; border-top: 1px solid var(--trait); text-decoration: none; color: inherit; }
.quete:hover { background: var(--papier2); }
.quete .titre b { font-weight: 700; }
.quete .titre small, .quete .ou { color: var(--gris); font-size: 14px; }
.quete .rec { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.quete .rec .pill { padding: 3px 6px; font-size: 12px; }
.pill.R { background: var(--papier2); border: 1px solid var(--bord); }
/* page Distinctions : n°, nom et texte du jeu, condition (objets des tenues en puces) */
.dist { display: grid; grid-template-columns: 40px minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 8px 14px; border-top: 1px solid var(--trait); }
.dist .nom b { font-weight: 700; }
.dist .nom small { display: block; color: var(--gris); font-size: 14px; margin-top: 2px; }
.dist .cond { font-size: 15px; }
.dist .cond::first-letter { text-transform: uppercase; }
.dist .cond .puces { margin-top: 6px; }
:root[data-compact] .dist { padding-block: 3px; }
:root[data-compact] .dist .nom small { display: none; }

/* fiches de lieu et de quête ; onglets des variantes d'un monstre */
.fenetre .tete .glyphe { display: grid; place-items: center; width: var(--ic-tete); height: var(--ic-tete); font: 600 30px/1 var(--titre); color: #634229; }
.fenetre .ligne-m { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.fenetre .ligne-m .aide { margin: 0; }
.fenetre .etiq-s { font-weight: 600; }
.fenetre section > p > a.obj span, .fenetre li > a.obj span { text-decoration: underline; text-underline-offset: 3px; }
.fenetre .puces .num-q { margin-right: 2px; }
.onglets-v { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.onglets-v button { border: 1px solid var(--bord); background: var(--papier3); border-radius: 7px; padding: 4px 9px; cursor: pointer; font-size: 13.5px; text-align: left; }
.onglets-v button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); font-weight: 600; }
/* plans des cartes (mini-cartes du jeu) : repères des coffres, pots, tonneaux */
.plans { display: flex; flex-wrap: wrap; gap: 14px; }
.plans figure { margin: 0; flex: 0 1 384px; min-width: 0; }
.plans figcaption { font-weight: 600; margin-bottom: 4px; }
.plan { position: relative; }
.plan img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.rp { position: absolute; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #000a; display: grid; place-items: center; font: 700 9px/1 system-ui, sans-serif; color: #fff; }
.rp.r { background: #c4241c; } .rp.b { background: #1f5fc4; } .rp.p, .rp.t { width: 11px; height: 11px; border-width: 1px; } .rp.p { background: #2f8a22; } .rp.t { background: #6b3a12; }
.legende-plan { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin: 0 0 8px; }
.legende-plan .rp { position: static; transform: none; display: inline-grid; vertical-align: -2px; margin-right: 4px; }
.plans ol { margin: 6px 0 0; padding-left: 22px; font-size: 14.5px; }

/* ressources */
.article > * { max-width: 78ch; }  /* lignes de texte courtes ; l'article lui-même prend toute la largeur (filet de séparation) */
/* fiches des vocations : les 5 lignes de compétences côte à côte */
.voc-lignes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 12px; }
.voc-ligne h4 { margin: 0 0 4px; font: 600 16px/1.2 var(--titre); }
.autre-l { font: 500 15px/1.2 var(--texte); color: var(--gris); }
/* antres : plan des étages (antres.js) */
.etages-antre { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin-top: 10px; }
.etage-antre { border: 1px solid var(--bord); border-radius: 9px; padding: 8px 10px; background: var(--papier); }
.etage-antre h5 { margin: 0 0 6px; font: 600 15px/1.2 var(--titre); }
.plan-antre { display: block; max-width: 100%; height: auto; }
.plan-antre .pm { fill: var(--brun); } .plan-antre .ps { fill: var(--papier2); } .plan-antre .pc { fill: var(--papier3); }
.plan-antre text { font: 700 10px var(--texte); text-anchor: middle; }
.plan-antre .pk { fill: var(--m-coffres); } .plan-antre .pt-c { fill: #ffffff; } .plan-antre .pt-e { fill: var(--encre); }
.coffres-antre { margin: 6px 0; padding-left: 18px; } .coffres-antre li { margin: 2px 0; }
.m-absent { opacity: .6; } .m-absent a, .m-absent .nom { text-decoration: line-through; }
.m-note { margin: 4px 0 0; font-size: 14px; color: var(--or); font-weight: 600; }
.voc-sorts .tab-conteneur { width: fit-content; max-width: 100%; }
.voc-sorts table { width: auto; min-width: min(100%, 320px); }
.voc-ligne .aide-t { margin: 0 0 6px; }
.voc-resume { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.voc-resume dt { font-weight: 600; }
.voc-resume dd { margin: 0; }
@media (max-width: 600px) { .voc-resume { grid-template-columns: minmax(0, 1fr); gap: 2px; } .voc-resume dd { margin-bottom: 8px; } }
.article p, .article li { line-height: 1.62; }
.article ul { padding-left: 20px; }
.article code, .adr { font-family: var(--mono); font-size: 12.5px; background: var(--papier3); border: 1px solid var(--trait); border-radius: 5px; padding: 0 5px; }
.article .note { background: rgb(99 66 41 / .08); border-radius: 8px; padding: 8px 12px; }
.article table { margin: 8px 0 14px; }
.lexique { margin: 0; }
.lexique dt { font-weight: 700; margin-top: 12px; }
.lexique dd { margin: 2px 0 0; line-height: 1.55; }
.article .tab-conteneur { max-height: none; }
.article h3 { scroll-margin-top: 120px; }
.article figure { margin: 8px 0 16px; }
.article figure img { max-width: 100%; height: auto; image-rendering: pixelated; border: 1px solid var(--bord); border-radius: 6px; vertical-align: top; }
.article figcaption { font-size: 13.5px; margin-top: 4px; }
.article ol li, .article ul li { margin-bottom: 4px; }
.article pre.console { background: #1e1e1e; color: #e8e8e8; padding: 10px 12px; border-radius: 6px; overflow-x: auto; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; }

@media (max-width: 900px) {
  .liste .objet, .liste.groupee .objet { grid-template-columns: var(--ic) minmax(0, 1fr) auto; gap: 4px 12px; padding-block: 6px; }
  .entetes { display: none; }
  .objet .cat, .objet .sous, .objet .etoiles { display: none; }
  .objet .modes { grid-column: 2 / -1; }
  .deux { grid-template-columns: minmax(0, 1fr); }  /* minmax : un tableau large défile dans son cadre au lieu d'élargir la page */
  .menu-lat { display: none; }
  .menu-sel { display: grid; gap: 4px; margin-bottom: 22px; font: 600 12.5px/1.2 var(--titre); text-transform: uppercase; letter-spacing: .08em; }
  .menu-sel select { font: 600 16px/1.3 var(--titre); text-transform: none; letter-spacing: 0; color: var(--encre); padding: 9px 10px; width: 100%; }
  .rangee > .etiq { min-width: 0; width: 100%; }
  header.barre { position: static; }
  .barre-int { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque reglages" "recherche recherche" "onglets onglets"; }
  .recherche-g { max-width: none; }
  .t-tab { display: block; }
  .t-tab > .outils { flex-wrap: wrap; margin-bottom: 10px; }
  .t-tab > .outils input { flex: 1 1 200px; }
  .quete { grid-template-columns: 40px minmax(0, 1fr); }
  .quete .ou, .quete .rec { grid-column: 2; }
  .dist { grid-template-columns: 40px minmax(0, 1fr); }
  .dist .cond { grid-column: 2; }
}
@media (max-width: 600px) {
  .appel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; max-height: 60vh; overflow-y: auto; border-bottom: 0;
    border-top: 3px solid var(--brun); box-shadow: 0 -6px 20px rgb(0 0 0 / .35); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .appel-int { grid-template-columns: 48px minmax(0, 1fr); padding: 14px 14px 16px; gap: 10px 14px; }
  .appel-ic { width: 48px; height: 48px; }
  .appel h2 { font-size: 18px; }
  .appel p { font-size: 14px; }
  .appel-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .appel-don { flex: 1 1 100%; }
  .appel-actions button { flex: 1 1 0; }
  /* en-tête d'une ligne, collé en haut : logo, loupe, « ☰ onglet actuel » ; la loupe ouvre la recherche, le menu
     ouvre les onglets (grille) et les réglages */
  header.barre { position: sticky; }
  .barre-int { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marque boutons" "recherche recherche" "onglets onglets" "reglages reglages";
    padding: 6px 10px; gap: 8px; }
  header.menu-ouvert nav.onglets a.soutenir { margin: 0; align-self: stretch; border-color: #ffe7ad; }
  nav.onglets .modes-nav { display: none; }
  .boutons-tel { grid-area: boutons; display: inline-flex; gap: 6px; }
  .boutons-tel .theme { padding: 7px 11px; font-size: 15px; }
  .boutons-tel span[aria-hidden] { font-size: 18px; }
  .recherche-g, nav.onglets, .reglages, .marque small { display: none; }
  header.cherche .recherche-g { display: block; }
  header.menu-ouvert nav.onglets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 0; }
  header.menu-ouvert nav.onglets a { border-radius: 8px; padding: 9px 6px; text-align: center; border: 1px solid rgb(255 231 173 / .3); }
  header.menu-ouvert .reglages { display: flex; flex-wrap: wrap; padding-bottom: 8px; }
  /* menu ouvert plus haut que l'écran (réglages en lignes, 18/10/2026) : il défile seul, au-dessus du bandeau fixé en bas */
  header.menu-ouvert { max-height: calc(100dvh - var(--bas, 0px) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  header.menu-ouvert .infos-tel { display: block; flex-basis: 100%; color: #ffe7ad; font-size: 12.5px; }
  .b-reglages { display: none; }
  /* E3 : sous les rubriques, un titre « Réglages » et les mêmes lignes que sur PC, plus Lecture et Langue */
  .panneau-reglages, .panneau-reglages:not(.ouvert) { position: static; display: grid; gap: 0; background: none;
    border: 0; box-shadow: none; padding: 0 4px; width: 100%; }
  .rg-titre { display: block; }
  .panneau-reglages .rg-lecture { display: grid; }
  .langue-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 7px 4px; width: 100%; }
  .langue-ligne #langue-lib, .langue-ligne #version-lib { display: block; }
  .version-jeu { margin-left: 0; }
  .marque img.logo { height: 40px; margin: 0; }
  .marque b { font-size: 17px; }
  main { padding-top: 16px; }
  .page-titre { margin-bottom: 28px; }
  .page-titre.seul { margin-bottom: 12px; }
  .page-intro { margin-bottom: 40px; }
  .page-titre h2 { font-size: 28px; }
  .page-titre .intro, .page-intro .intro { font-size: 16px; }
  .bloc > h3:first-child, .article.plein > h3 { font-size: 20px; }
  :is(.contenu, #app) > :not(.page-titre, .page-intro) + :is(.bloc, .article) { margin-top: 44px; }
  .fiche { padding: 6px; }
  .fenetre .corps { padding: 0 14px 0 20px; }
  :root:not([data-compact]) { --ic-tete: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fiche { animation: entre .18s ease-out; }
  @keyframes entre { from { transform: translateX(24px); opacity: .6; } }
}

/* pages fixes des fiches et des guides (referencement.py) : le contenu du site posé sur le parchemin, sans script */
.fixe .barre-int { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; }
.fixe .marque b { white-space: nowrap; }
.fixe .langue { display: flex; gap: 2px; }
.fixe .langue a { padding: 6px 11px; border-radius: 7px; font: 600 13px/1 var(--titre); color: var(--sur-brun2); text-decoration: none; }
.fixe .langue a[aria-current] { background: #ffe7ad; color: #000000; }
.fixe main { max-width: 860px; }
.fixe.guide main { max-width: 1320px; }
.fil { font-size: 14px; margin: 0 0 18px; }
.fil a { color: var(--encre); }
.fixe .fenetre { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: 0; }
.fixe .fenetre .tete { background: none; color: var(--encre); border: 0; position: static; padding: 0; }
.fixe .fenetre h1 { font: 700 34px/1.15 var(--titre); margin: 0 0 4px; color: var(--encre); }
.fixe .fenetre .tete .sous, .fixe .fenetre .tete .mention-src { color: var(--encre); }
.fixe .fenetre .corps { padding: 0; }
.fixe .fenetre h4, .fixe.guide h4 { font: 600 16px/1.3 var(--titre); margin: 14px 0 6px; }
.fixe .page-titre h1 { font: 700 34px/1.15 var(--titre); margin: 0 0 10px; letter-spacing: 0; }
.ouvrir-site { margin: 40px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ouvrir-site a { display: inline-flex; padding: 10px 18px; border-radius: 9px; background: var(--brun); color: #ffffff;
  font: 600 16px/1.2 var(--titre); text-decoration: none; border: 1px solid var(--brun2); }
.ouvrir-site a:hover { background: var(--brun2); }
.ouvrir-site span { font-size: 14px; }
.liste-fixe { columns: 3 240px; column-gap: 28px; list-style: none; margin: 0 0 8px; padding: 0; }
.liste-fixe li { break-inside: avoid; margin-bottom: 3px; }
.liste-fixe a { display: inline-flex; align-items: center; gap: 8px; color: var(--encre); text-underline-offset: 3px; }
.liste-fixe img.im { --t: 32px; }
.liste-fixe .num-q { font: 600 14px/1 var(--titre); min-width: 2.2em; }
.liste-guides { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 12px; max-width: 80ch; }
.liste-guides a { font: 600 17px/1.3 var(--titre); color: var(--encre); }
.liste-guides p { margin: 2px 0 0; font-size: 14.5px; }
.fixe main > h1 { font: 700 34px/1.15 var(--titre); margin: 0 0 10px; }
.fixe main > h2 { font-size: 23px; margin: 36px 0 10px; }
@media (max-width: 600px) { .fixe .fenetre h1, .fixe main > h1, .fixe .page-titre h1 { font-size: 28px; } .fixe .marque img.logo { height: 44px; } }