/* Atelier du MJ : DA CetoJDR (04-Production/CetoJDR/DESIGN.md), ergonomie inspirée des tableaux de bord de MJ. */
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/Newsreader-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/Newsreader-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/fonts/Newsreader-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/IBMPlexMono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --encre: #061713; --nuit: #020B09; --releve: #132A23; --ardoise: #2C4039; --carte: #0B1E18;
  --ivoire: #EDE8DC; --ivoire-doux: #C9C6BC; --sauge: #789080; --cuivre: #B8866D;
  --filet: #364A41; --filet-fort: #5F7568; --filet-discret: #1B2D27;
  --c-pj: #D9A882; --c-pnj: #D48E7C; --c-lieu: #94BE9F; --c-objet: #9FB8CC; --c-faction: #CDB57E;
  --c-evenement: #AFA1CF; --c-secret: #CF8496; --c-document: #A9B4AE; --c-autre: #A9B4AE;
  --sans: "Instrument Sans", Arial, sans-serif; --serif: "Newsreader", Georgia, serif; --mono: "IBM Plex Mono", Menlo, monospace;
  --rayon: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--nuit); color: var(--ivoire); font: 400 15px/1.6 var(--sans); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--ivoire); }
::selection { background: var(--ardoise); }
:focus-visible { outline: 1px solid var(--cuivre); outline-offset: 2px; }

/* --- Icônes : masques SVG, couleur = currentColor --------------------------------------------------------- */
.ico { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-seance { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2zM22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z'/></svg>"); }
.ico-repertoire { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.ico-campagne { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m16.24 7.76-2.12 6.36-6.36 2.12 2.12-6.36z'/></svg>"); }
.ico-transcripts, .ico-page { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/></svg>"); }
.ico-panneau { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><path d='M15 3v18'/></svg>"); }
.ico-chevron-g { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>"); }
.ico-chevron-d { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>"); }
.ico-loupe { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>"); }
.ico-liste { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/></svg>"); }
.ico-terminal { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m4 17 6-6-6-6M12 19h8'/></svg>"); }
.ico-fermer { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>"); }
.ico-pj { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m2 6 4 11h12l4-11-6 5-4-7-4 7z'/><path d='M6 21h12'/></svg>"); }
.ico-pnj { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }
.ico-lieu { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>"); }
.ico-objet { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h12l4 6-10 13L2 9Z'/><path d='M11 3 8 9l4 13 4-13-3-6M2 9h20'/></svg>"); }
.ico-faction { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>"); }
.ico-evenement { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }
.ico-secret { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }
.ico-document, .ico-autre { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z'/></svg>"); }
.ico-encart-ambiance { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18V5l12-2v13'/><circle cx='6' cy='18' r='3'/><circle cx='18' cy='16' r='3'/></svg>"); }
.ico-encart-attention, .ico-encart-warning { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><path d='M12 9v4M12 17h.01'/></svg>"); }
.ico-encart-pnj { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }
.ico-encart-lire, .ico-encart-quote { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='2' width='6' height='12' rx='3'/><path d='M19 10v2a7 7 0 0 1-14 0v-2M12 19v3'/></svg>"); }
.ico-encart-mj, .ico-encart-note, .ico-encart-info, .ico-encart-tip { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/><circle cx='12' cy='12' r='3'/></svg>"); }

/* --- Cadre ------------------------------------------------------------------------------------------------ */
.cadre { display: grid; grid-template-columns: 68px 290px minmax(0, 1fr) 380px; height: 100vh; height: 100dvh; }
body.sans-panneau .cadre { grid-template-columns: 68px 290px minmax(0, 1fr) 0; }
body.sans-panneau .panneau { display: none; }
body.sans-arbre .cadre { grid-template-columns: 68px 0 minmax(0, 1fr) 380px; }
body.sans-arbre.sans-panneau .cadre { grid-template-columns: 68px 0 minmax(0, 1fr) 0; }
body.sans-arbre .arbre { display: none; }

.rail { background: var(--encre); border-right: 1px solid var(--filet-discret); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 4px; }
.rail-marque { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--cuivre); color: var(--cuivre); display: grid; place-items: center;
  font: 600 18px var(--serif); margin-bottom: 14px; }
.rail-bouton { width: 58px; padding: 8px 0 6px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--sauge); }
.rail-bouton span { font: 500 10px/1 var(--sans); letter-spacing: .01em; }
.rail-bouton .ico { width: 22px; height: 22px; }
.rail-bouton:hover { color: var(--ivoire); background: var(--releve); }
.rail-bouton.actif { color: var(--ivoire); }
.rail-bouton.actif .ico { color: var(--cuivre); }
.rail-bouton.actif { box-shadow: inset 0 0 0 1px var(--filet); background: var(--releve); }
.rail-espace { flex: 1; }

/* --- Arborescence ----------------------------------------------------------------------------------------- */
.arbre { background: var(--encre); border-right: 1px solid var(--filet-discret); display: flex; flex-direction: column; min-width: 0; }
.arbre-tete { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px 18px; }
.arbre-tete h2 { flex: 1; margin: 0; font: 600 16px/1.2 var(--sans); }
.arbre-tete > .ico { color: var(--cuivre); }
.rond { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--filet); display: grid; place-items: center; color: var(--sauge); }
.rond:hover { color: var(--ivoire); border-color: var(--filet-fort); }
.rond .ico { width: 14px; height: 14px; }
.filtre { margin: 0 14px 10px; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; border: 1px solid var(--filet-discret);
  border-radius: 9px; background: var(--nuit); color: var(--sauge); }
.filtre input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ivoire); font: 400 14px var(--sans); }
.filtre .ico { width: 15px; height: 15px; }
.arbre-corps { flex: 1; overflow: auto; padding: 0 8px 24px; scrollbar-width: thin; scrollbar-color: var(--ardoise) transparent; }
.groupe > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sauge); }
.groupe > summary::-webkit-details-marker { display: none; }
.groupe > summary .ico { width: 13px; height: 13px; transition: transform .15s; }
.groupe[open] > summary .ico { transform: rotate(90deg); }
.groupe > summary:hover { color: var(--ivoire); }
.groupe .compte { margin-left: auto; font-weight: 500; color: var(--filet-fort); letter-spacing: 0; }
.feuille { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 26px; border-radius: 8px; text-decoration: none; color: var(--ivoire-doux);
  font-size: 14px; line-height: 1.35; }
.feuille .ico { width: 15px; height: 15px; color: var(--sauge); }
.feuille:hover { background: var(--releve); color: var(--ivoire); }
.feuille.actif { background: var(--releve); color: var(--ivoire); box-shadow: inset 0 0 0 1px var(--filet); }
.feuille.actif .ico { color: var(--cuivre); }
.feuille .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feuille[data-type="pj"] .ico { color: var(--c-pj); } .feuille[data-type="pnj"] .ico { color: var(--c-pnj); }
.feuille[data-type="lieu"] .ico { color: var(--c-lieu); } .feuille[data-type="objet"] .ico { color: var(--c-objet); }
.feuille[data-type="faction"] .ico { color: var(--c-faction); } .feuille[data-type="evenement"] .ico { color: var(--c-evenement); }
.feuille[data-type="secret"] .ico { color: var(--c-secret); }
.vide { padding: 10px 18px; color: var(--sauge); font-size: 13px; }

/* --- Centre ----------------------------------------------------------------------------------------------- */
.centre { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--nuit); }
.voile { position: absolute; inset: 44px 0 0 0; pointer-events: none;
  background: radial-gradient(55% 55% at 0% 0%, #2A2A2C 0%, transparent 70%), radial-gradient(50% 50% at 100% 25%, #1A3036 0%, transparent 72%),
              radial-gradient(45% 45% at 45% 100%, #22261C 0%, transparent 70%); }
.onglets { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 2px; height: 44px; padding: 0 12px; background: var(--encre);
  border-bottom: 1px solid var(--filet-discret); overflow-x: auto; scrollbar-width: none; }
.onglet { display: flex; align-items: center; gap: 8px; max-width: 240px; height: 34px; padding: 0 8px 0 12px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 9px 9px 0 0; color: var(--sauge); font-size: 13px; cursor: pointer; white-space: nowrap; }
.onglet .t { overflow: hidden; text-overflow: ellipsis; }
.onglet .ico { width: 14px; height: 14px; }
.onglet:hover { color: var(--ivoire); }
.onglet.actif { background: var(--nuit); border-color: var(--filet); color: var(--ivoire); margin-bottom: -1px; height: 35px; }
.onglet.actif > .ico:first-child { color: var(--cuivre); }
.onglet .x { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; opacity: .6; }
.onglet .x:hover { opacity: 1; background: var(--releve); }
.onglet .x .ico { width: 12px; height: 12px; }

.page { position: relative; z-index: 1; flex: 1; overflow: auto; padding: 20px 24px 60px; scrollbar-width: thin; scrollbar-color: var(--ardoise) transparent; }
.accueil { max-width: 640px; margin: 18vh auto 0; text-align: center; color: var(--sauge); }
.accueil h1 { font: 600 clamp(2rem, 4vw, 3.2rem)/1.1 var(--serif); color: var(--ivoire); margin: .2em 0 .4em; }
.etiquette { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sauge); margin: 0; }

.bandeau { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 18px; background: var(--encre); border: 1px solid var(--filet);
  border-radius: var(--rayon); margin-bottom: 18px; }
.bandeau h1 { flex: 1; text-align: center; margin: 0; font: 600 19px/1.25 var(--serif); }
.bandeau .meta { min-width: 120px; color: var(--sauge); font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.bandeau .meta.droite { text-align: right; }
.type { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid currentColor; }
.type .ico { width: 13px; height: 13px; }

.carte { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 26px 34px 34px; }
.doc { max-width: 900px; margin: 0 auto; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font: 600 2rem/1.15 var(--serif); margin: .2em 0 .6em; }
.doc h2 { font: 600 1.45rem/1.25 var(--serif); color: var(--cuivre); margin: 1.9em 0 .6em; padding-top: .9em; border-top: 1px solid var(--filet-discret); }
.doc h3 { font: 600 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sauge); margin: 1.8em 0 .7em; }
.doc h4 { font: 600 1.05rem/1.3 var(--sans); margin: 1.4em 0 .5em; }
.doc p, .doc li { color: var(--ivoire); }
.doc strong { font-weight: 600; color: #F6F2E8; }
.doc em { font-family: var(--serif); font-size: 1.06em; }
.doc a:not(.puce) { color: var(--ivoire); text-decoration-color: var(--filet-fort); text-underline-offset: 3px; }
.doc a:not(.puce):hover { text-decoration-color: var(--cuivre); }
.doc ul, .doc ol { padding-left: 1.3em; } .doc li { margin: .25em 0; } .doc li::marker { color: var(--sauge); }
.doc hr { border: 0; border-top: 1px solid var(--filet); margin: 2em 0; }
.doc hr + h2, .doc > h2:first-child { border-top: 0; padding-top: 0; }
.doc code { font: 500 .88em var(--mono); background: var(--releve); border: 1px solid var(--filet-discret); padding: .05em .4em; border-radius: 5px; }
.doc pre { background: var(--nuit); border: 1px solid var(--filet); border-radius: 10px; padding: 14px 16px; overflow: auto; }
.doc pre code { background: none; border: 0; padding: 0; }
.doc img { max-width: 100%; border-radius: 10px; border: 1px solid var(--filet); }
.doc table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 14px; display: block; overflow-x: auto; }
.doc th { text-align: left; font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sauge); background: var(--releve);
  padding: 9px 12px; border: 1px solid var(--filet); }
.doc td { padding: 9px 12px; border: 1px solid var(--filet-discret); vertical-align: top; }
.doc blockquote { margin: 1.2em 0; padding: 12px 18px; background: var(--releve); border: 1px solid var(--filet); border-radius: var(--rayon); color: var(--ivoire-doux); }
.doc blockquote p { color: inherit; margin: .45em 0; }

/* Encarts typés */
.doc blockquote.encart { padding: 12px 18px 12px 18px; }
.encart-titre { display: flex; align-items: center; gap: 8px; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 2px 0 6px; }
.encart-titre .ico { width: 15px; height: 15px; }
.encart-ambiance { background: #12261B !important; border-color: #3F6B4A !important; } .encart-ambiance .encart-titre { color: #94BE9F; }
.encart-attention, .encart-warning { background: #27240F !important; border-color: #7A6A35 !important; } .encart-attention .encart-titre, .encart-warning .encart-titre { color: #D9C27C; }
.encart-pnj { background: #2A1915 !important; border-color: #7A4A3E !important; } .encart-pnj .encart-titre { color: #D48E7C; }
.encart-lire, .encart-quote { background: #142229 !important; border-color: #3E5A6E !important; } .encart-lire .encart-titre, .encart-quote .encart-titre { color: #9FB8CC; }
.encart-lire p { font-family: var(--serif); font-size: 1.08em; color: var(--ivoire) !important; }
.encart-mj, .encart-note, .encart-info, .encart-tip { background: var(--releve) !important; } .encart-mj .encart-titre { color: var(--sauge); }

/* Puces de liens vers les fiches */
.puce { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; margin: 0 1px; border-radius: 999px; border: 1px solid currentColor;
  font-size: .9em; line-height: 1.55; text-decoration: none; white-space: nowrap; vertical-align: baseline; color: var(--c-autre); }
.puce .ico { width: 12px; height: 12px; }
.puce:hover { background: var(--releve); }
.puce-pj { color: var(--c-pj); } .puce-pnj { color: var(--c-pnj); } .puce-lieu { color: var(--c-lieu); } .puce-objet { color: var(--c-objet); }
.puce-faction { color: var(--c-faction); } .puce-evenement { color: var(--c-evenement); } .puce-secret { color: var(--c-secret); } .puce-document { color: var(--c-document); }
.puce-manquante { color: var(--sauge); border-style: dashed; }
.type.pj { color: var(--c-pj); } .type.pnj { color: var(--c-pnj); } .type.lieu { color: var(--c-lieu); } .type.objet { color: var(--c-objet); }
.type.faction { color: var(--c-faction); } .type.evenement { color: var(--c-evenement); } .type.secret { color: var(--c-secret); } .type.document { color: var(--c-document); }

/* --- Panneau de droite ------------------------------------------------------------------------------------ */
.panneau { background: var(--encre); border-left: 1px solid var(--filet-discret); display: flex; flex-direction: column; min-width: 0; }
.panneau-onglets { display: flex; gap: 4px; padding: 10px 12px 0; border-bottom: 1px solid var(--filet-discret); height: 44px; }
.panneau-onglets button { padding: 6px 12px 9px; font: 600 12px var(--sans); color: var(--sauge); border-bottom: 1px solid transparent; margin-bottom: -1px; }
.panneau-onglets button.actif { color: var(--ivoire); border-bottom-color: var(--cuivre); }
.panneau-corps { flex: 1; overflow: auto; padding: 16px; }
.sommaire a { display: block; padding: 5px 8px; border-radius: 7px; color: var(--ivoire-doux); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.sommaire a.h3 { padding-left: 22px; color: var(--sauge); font-size: 13px; }
.sommaire a:hover { background: var(--releve); color: var(--ivoire); }
.attente { border: 1px dashed var(--filet); border-radius: var(--rayon); padding: 18px; color: var(--sauge); font-size: 13.5px; }
.attente strong { color: var(--ivoire); font-weight: 600; }

.barre-mobile { display: none; }
.erreur { color: #D9C27C; }

/* --- Téléphone : une vue à la fois, barre en bas -------------------------------------------------------- */
@media (max-width: 860px) {
  .cadre, body.sans-panneau .cadre, body.sans-arbre .cadre, body.sans-arbre.sans-panneau .cadre {
    grid-template-columns: 1fr; height: calc(100dvh - 60px - env(safe-area-inset-bottom)); }
  .rail { display: none; }
  .arbre, .centre, .panneau { display: none !important; }
  body.vue-arbre .arbre, body.vue-page .centre, body.vue-panneau .panneau { display: flex !important; }
  body.vue-arbre .arbre { border-right: 0; }
  #replier-arbre { display: none; }
  .mobile-sections { display: flex !important; }
  .page { padding: 12px 12px 40px; }
  .carte { padding: 18px 16px 24px; }
  .bandeau { padding: 10px 12px; } .bandeau .meta { display: none; } .bandeau h1 { text-align: left; font-size: 17px; }
  .barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(60px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); background: var(--encre); border-top: 1px solid var(--filet-discret); }
  .barre-mobile button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--sauge); font-size: 11px; }
  .barre-mobile button.actif { color: var(--ivoire); } .barre-mobile button.actif .ico { color: var(--cuivre); }
  .barre-mobile .ico { width: 21px; height: 21px; }
}
.mobile-sections { display: none; gap: 6px; padding: 0 14px 10px; overflow-x: auto; }
.mobile-sections button { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--filet); color: var(--sauge); font-size: 13px; white-space: nowrap; }
.mobile-sections button.actif { color: var(--ivoire); border-color: var(--cuivre); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* --- Connexion -------------------------------------------------------------------------------------------- */
.ecran-connexion { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px;
  background: radial-gradient(60% 50% at 20% 0%, #1E2A26 0%, transparent 70%), radial-gradient(50% 50% at 90% 90%, #182B30 0%, transparent 70%), var(--nuit); }
.connexion { width: 100%; max-width: 380px; text-align: center; background: var(--encre); border: 1px solid var(--filet); border-radius: 16px; padding: 34px 26px 26px; }
.connexion .rail-marque { margin: 0 auto 18px; width: 48px; height: 48px; font-size: 24px; }
.connexion h1 { font: 600 30px/1.1 var(--serif); margin: 8px 0 12px; }
.connexion p { color: var(--sauge); }
.connexion label { display: block; text-align: left; font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sauge); margin: 18px 0 4px; }
.connexion input { display: block; width: 100%; margin-top: 6px; height: 40px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--filet); background: var(--nuit);
  color: var(--ivoire); font: 400 15px var(--sans); text-transform: none; letter-spacing: 0; }
.bouton-principal { width: 100%; height: 46px; margin-top: 18px; border-radius: 10px; border: 1px solid var(--cuivre); background: var(--releve); color: var(--ivoire); font-weight: 600; }
.bouton-principal:hover { background: var(--ardoise); }
.bouton-principal:disabled { opacity: .6; cursor: wait; }
.connexion label[hidden] { display: none; }
.ico-sortir { --i: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/></svg>"); }