/* COF DM — grimoire sombre (thème clair : parchemin). */
:root{
  --bg:#11141b; --side:#0c0e13; --surface:#191d26; --surface2:#1f2430; --sunk:#0f1218;
  --ink:#e8e3d5; --muted:#99a0ad; --faint:#6b7280; --line:#2a303d; --line2:#353c4c;
  --gold:#d6b25e; --accent:#8fb0e8; --accent-ink:#0d1220; --mort:#ee8a78; --ok:#7fcf8c; --warn:#e6b45a; --secret:#c69be0;
  --t-pnj:#e0a96d; --t-lieu:#7fc79a; --t-faction:#e57d72; --t-objet:#6cc4c4; --t-lore:#b49be6; --t-evenement:#e6a35a;
  --t-campagne:#8fb0e8; --t-quete:#d6b25e; --t-seance:#e08fb8; --t-pj:#79b8f0; --t-regle:#a8b0bd; --t-rencontre:#e2766a; --t-secret:#c69be0; --t-aide:#e3a86b;
  --f-display:"Palatino Linotype","Book Antiqua",Palatino,"URW Palladio L",Georgia,serif;
  --f-body:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,"SFMono-Regular",Menlo,monospace;
  --r:8px; --ombre:0 8px 30px rgb(0 0 0/.35);
  color-scheme:dark;
}
:root[data-theme=clair]{
  --bg:#efe9db; --side:#e4dcc8; --surface:#f8f4ea; --surface2:#f1ebdc; --sunk:#e8e1cf;
  --ink:#24211b; --muted:#625b4e; --faint:#8b8373; --line:#d6ccb5; --line2:#c9bda2;
  --gold:#8a6514; --accent:#2f4f86; --accent-ink:#f8f4ea; --mort:#a3392b; --ok:#2f7a3f; --warn:#a66a0c; --secret:#6a3d82;
  --t-pnj:#a8641f; --t-lieu:#2f7f50; --t-faction:#b0392e; --t-objet:#1f7f80; --t-lore:#6b4fa8; --t-evenement:#b0621a;
  --t-campagne:#2f4f86; --t-quete:#8a6514; --t-seance:#a3457a; --t-pj:#28689f; --t-regle:#5d6470; --t-rencontre:#a8382c; --t-secret:#6a3d82; --t-aide:#8c5212;
  --ombre:0 8px 30px rgb(60 40 10/.18);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--f-body)}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;text-wrap:balance}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line2);background:var(--surface2);border-radius:var(--r);padding:.42rem .85rem;min-height:36px;white-space:nowrap}
button:hover{border-color:var(--muted)}
:is(button,input,select,textarea,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--gold);color:#17130a;border-color:var(--gold);font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:var(--surface2);border-color:var(--line)}
button.danger{color:var(--mort);border-color:color-mix(in srgb,var(--mort) 60%,transparent);background:transparent}
button.danger.armed{background:var(--mort);color:var(--bg)}
button.petit{min-height:28px;padding:.15rem .55rem;font-size:.85rem}
button:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{background:var(--sunk);border:1px solid var(--line2);border-radius:var(--r);padding:.42rem .6rem;min-width:0;min-height:36px;width:100%}
input[type=checkbox],input[type=radio]{width:1.1rem;height:1.1rem;min-height:0;accent-color:var(--gold);flex:none}
textarea{resize:vertical;line-height:1.55;min-height:90px}
label.champ{display:flex;flex-direction:column;gap:4px;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
label.champ > span small{color:var(--faint);font-size:.75rem}
.aide{font-size:.78rem;color:var(--faint)}
.hint{font-size:.85rem;color:var(--muted);margin:0}
.vide{color:var(--muted);margin:0;font-size:.92rem}
code,kbd{font-family:var(--f-mono);font-size:.86em}
kbd{border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:var(--surface2)}

/* ---------- squelette ---------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto;padding:14px 10px}
.marque{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;text-decoration:none}
.marque b{font:600 1.35rem var(--f-display);letter-spacing:.02em}
.marque b span{color:var(--gold)}
.sceau{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#f0d58f,#b4882f 70%);color:#2a1d05;font:700 .8rem var(--f-display);box-shadow:inset 0 0 0 2px rgb(0 0 0/.2)}
.cherche{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;background:var(--surface);color:var(--muted);margin-bottom:12px}
.cherche kbd{margin-left:auto}
.side nav{display:flex;flex-direction:column;gap:1px}
.side h4{font:600 .68rem var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:14px 8px 4px}
.side nav .groupe{display:flex;flex-direction:column;gap:1px}
.side nav .groupe h4{margin:10px 0 2px}
/* titre d'une catégorie : un bouton qui la replie (clavier : Tab puis Entrée ou Espace) */
.side .groupe-titre{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;min-height:30px;padding:4px 8px;border-radius:6px;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
.side .groupe-titre:hover{color:var(--muted);background:var(--surface)}
.side .groupe-titre:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.side .groupe-titre .chevron{margin-left:auto;width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;transition:transform .15s}
.side .groupe.replie .groupe-titre .chevron{transform:rotate(-90deg)}
.side .groupe-liens{display:flex;flex-direction:column;gap:1px}
/* repliée, une catégorie ne garde que le lien de la page ouverte */
.side .groupe.replie .groupe-liens a:not(.on){display:none}
@media (prefers-reduced-motion:reduce){.side .groupe-titre .chevron{transition:none}}
.side nav a{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--muted);font-size:.93rem}
.side nav a:hover{background:var(--surface);color:var(--ink)}
.side nav a.on{background:var(--surface2);color:var(--ink);box-shadow:inset 3px 0 0 var(--gold)}
.side nav a .ic{width:22px;text-align:center;font-size:1rem}
.side nav a .n{margin-left:auto;font:.75rem var(--f-mono);color:var(--faint)}
.side .bas{margin-top:auto;padding-top:10px;display:flex;gap:6px}
.side{padding-bottom:10px}
.side > *{flex-shrink:0} /* le menu défile : rien ne s'y tasse */
.burger{display:none}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s}
  .app.menu-ouvert .side{transform:none;box-shadow:var(--ombre)}
  .burger{display:inline-flex;position:fixed;top:10px;left:10px;z-index:30}
  main{padding-top:56px!important}
}
main{padding:22px 28px 60px;min-width:0;max-width:1480px;width:100%}

/* ---------- en-têtes, panneaux ---------- */
.entete{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.entete h1{font-size:1.75rem}
.entete .sp{flex:1}
.panneau{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.panneau > h3,.panneau .titre{font:600 .78rem var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--gold);display:flex;align-items:center;gap:8px}
.panneau .titre .sp{flex:1}
.ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;padding:1px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--line2);color:var(--muted);white-space:nowrap;text-decoration:none}
.badge.type{color:var(--c);border-color:color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 10%,transparent)}
.badge.tag{color:var(--accent)}
.badge.archive{color:var(--warn);border-color:var(--warn)}
.statut-mort,.statut-échouée,.statut-abandonnée{color:var(--mort)!important}
.statut-vivant,.statut-réussie,.statut-actif,.statut-jouée{color:var(--ok)!important}
.statut-en.cours{color:var(--gold)!important}

/* couleur par type */
[data-type=pnj]{--c:var(--t-pnj)} [data-type=lieu]{--c:var(--t-lieu)} [data-type=faction]{--c:var(--t-faction)}
[data-type=objet]{--c:var(--t-objet)} [data-type=lore]{--c:var(--t-lore)} [data-type=evenement]{--c:var(--t-evenement)}
[data-type=campagne]{--c:var(--t-campagne)} [data-type=quete]{--c:var(--t-quete)} [data-type=seance]{--c:var(--t-seance)}
[data-type=pj]{--c:var(--t-pj)} [data-type=regle]{--c:var(--t-regle)} [data-type=rencontre]{--c:var(--t-rencontre)} [data-type=secret]{--c:var(--t-secret)} [data-type=aide]{--c:var(--t-aide)}

/* ---------- vignettes ---------- */
.vignette{width:var(--t,44px);height:var(--t,44px);border-radius:50%;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;
  background:color-mix(in srgb,var(--c,var(--muted)) 18%,var(--surface2));border:1.5px solid color-mix(in srgb,var(--c,var(--muted)) 55%,transparent);font-size:calc(var(--t,44px)*.45)}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette.carree{border-radius:10px}

/* ---------- tableau de bord ---------- */
.accueil{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.accueil > *{grid-column:span 6}
.accueil > .large{grid-column:1/-1}
@media (max-width:1100px){.accueil > *{grid-column:1/-1}}
.compteurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.compteurs a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-decoration:none}
.compteurs a:hover{border-color:var(--c)}
.compteurs b{font:600 1.35rem var(--f-mono);display:block;line-height:1.1}
.compteurs span{font-size:.8rem;color:var(--muted)}
.lignes{display:flex;flex-direction:column}
.lignes > a,.lignes > div{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line);text-decoration:none;min-width:0}
.lignes > :last-child{border-bottom:0}
.lignes .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lignes .m{font-size:.8rem;color:var(--muted);white-space:nowrap}

/* ---------- listes ---------- */
.filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filtres input[type=search]{max-width:320px}
.puces{display:flex;flex-wrap:wrap;gap:5px}
.puces button{min-height:28px;padding:.1rem .65rem;font-size:.84rem;border-radius:999px;background:transparent}
.puces button[aria-pressed=true]{background:var(--gold);color:#17130a;border-color:var(--gold)}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.carte{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;position:relative;transition:border-color .15s,transform .15s}
.carte:hover{border-color:color-mix(in srgb,var(--c) 70%,transparent);transform:translateY(-1px)}
.carte .corps{min-width:0;display:flex;flex-direction:column;gap:5px;flex:1}
.carte .nom{font:600 1.05rem var(--f-display);line-height:1.25;overflow-wrap:anywhere}
.carte .ext{font-size:.82rem;color:var(--muted)}
.carte.archivee{opacity:.55}
.compte{color:var(--muted);font-size:.85rem}

/* ---------- fiche ---------- */
.fiche-tete{display:flex;gap:20px;align-items:flex-start;margin-bottom:20px;flex-wrap:wrap}
.fiche-tete .vignette{--t:112px;cursor:pointer}
.fiche-tete .infos{flex:1;min-width:240px;display:flex;flex-direction:column;gap:8px}
.fiche-tete h1{font-size:2rem;line-height:1.15}
.fiche-tete .resume{color:var(--muted);font-style:italic;font-family:var(--f-display);font-size:1.05rem}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fiche-corps{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media (max-width:1200px){.fiche-corps{grid-template-columns:1fr}}
.colonne{display:flex;flex-direction:column;gap:16px;min-width:0}
.proprietes{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 18px;margin:0}
.proprietes div{min-width:0}
.proprietes dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.proprietes dd{margin:2px 0 0;overflow-wrap:anywhere}
.lien-fiche{display:inline-flex;align-items:center;gap:6px;text-decoration:none;border-bottom:1px solid transparent}
.lien-fiche:hover{border-bottom-color:currentColor}
.lien-fiche .vignette{--t:20px;font-size:.6rem;border-width:1px}
.panneau.section-md > h3{font:600 1.15rem var(--f-display);text-transform:none;letter-spacing:0;color:var(--gold);margin-bottom:-2px}
.section-md.secret{border:1px dashed color-mix(in srgb,var(--secret) 70%,transparent);background:color-mix(in srgb,var(--secret) 6%,var(--surface))}
.section-md.secret h3{color:var(--secret)}
.section-md.secret h3::before{content:"🔒 ";font-size:.85em}
.etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.etapes label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;padding:4px 0}
.etapes input{margin-top:3px}
.etapes .fait{color:var(--muted);text-decoration:line-through}
.rel-groupe{display:flex;flex-direction:column;gap:4px}
.rel-groupe > small{color:var(--faint);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.rel{display:flex;align-items:center;gap:4px 8px;min-width:0;flex-wrap:wrap}
.rel .lien-fiche{min-width:0;flex:1}
.rel .note{font-size:.8rem;color:var(--muted);flex:1 1 100%;padding-left:26px;margin-top:-4px}
.rel button{opacity:0;transition:opacity .15s}
.rel:hover button,.rel button:focus-visible{opacity:1}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.galerie figure{margin:0;position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1;background:var(--sunk);cursor:pointer}
.galerie figure.principale{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.galerie img{width:100%;height:100%;object-fit:cover;display:block}
.depot{border:1.5px dashed var(--line2);border-radius:10px;padding:12px;text-align:center;color:var(--muted);font-size:.86rem;cursor:pointer}
.depot.survol{border-color:var(--gold);color:var(--ink);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.meta-fiche{font-size:.8rem;color:var(--faint);display:flex;flex-direction:column;gap:2px}

/* ---------- formulaire ---------- */
.formulaire{display:flex;flex-direction:column;gap:16px;max-width:1100px}
.formulaire fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 16px;background:var(--surface)}
.formulaire fieldset.mj{border-style:dashed;border-color:color-mix(in srgb,var(--secret) 60%,transparent)}
.formulaire legend{font:600 .78rem var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--gold);padding:0 6px}
.formulaire fieldset.mj legend{color:var(--secret)}
.formulaire .pleine{grid-column:1/-1}
.formulaire .nom-fiche input{font:600 1.4rem var(--f-display);padding:.5rem .7rem}
.barre-form{position:sticky;bottom:0;display:flex;gap:8px;padding:12px 0;background:linear-gradient(transparent,var(--bg) 35%);justify-content:flex-end}
.date-jeu{display:grid;grid-template-columns:4.2rem minmax(0,1fr) 5.5rem;gap:6px}
.choisis{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px}
.choisis .badge button{border:0;background:none;padding:0 0 0 2px;min-height:0;color:inherit;opacity:.7}
.selecteur{position:relative}
.selecteur .menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--ombre);max-height:280px;overflow:auto;padding:4px}
.menu button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;text-align:left;padding:6px 8px;min-height:0;border-radius:6px}
.menu button.actif,.menu button:hover{background:var(--surface2)}
.menu button small{margin-left:auto;color:var(--faint)}
.liste-etapes{display:flex;flex-direction:column;gap:6px}
.liste-etapes .etape{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.erreur{border-left:3px solid var(--mort);background:color-mix(in srgb,var(--mort) 10%,transparent);padding:8px 12px;border-radius:0 8px 8px 0;font-size:.9rem}
.alerte{border-left:3px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);padding:8px 12px;border-radius:0 8px 8px 0;font-size:.9rem}

/* ---------- Markdown ---------- */
.md{line-height:1.62;overflow-wrap:anywhere}
.md > :first-child{margin-top:0} .md > :last-child{margin-bottom:0}
.md h1,.md h2,.md h3,.md h4{font-family:var(--f-display);margin:1em 0 .35em}
.md h1{font-size:1.35rem} .md h2{font-size:1.2rem} .md h3,.md h4{font-size:1.05rem}
.md p{margin:.45em 0}
.md ul,.md ol{margin:.35em 0;padding-left:1.35em}
.md li{margin:.12em 0}
.md li.tache{list-style:none;margin-left:-1.25em}
.md blockquote{margin:.6em 0;padding:.15em .9em;border-left:3px solid var(--gold);color:var(--muted);font-style:italic}
.md table{border-collapse:collapse;margin:.6em 0;font-size:.92rem;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--line2);padding:4px 9px;text-align:left;vertical-align:top}
.md th{background:var(--surface2)}
.md pre{background:var(--sunk);padding:10px;border-radius:8px;overflow:auto}
.md hr{border:0;border-top:1px solid var(--line);margin:1em 0}
a.wl{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
a.wl:hover{border-bottom-color:var(--accent)}
.wl.mort{color:var(--mort);border-bottom:1px dashed var(--mort);text-decoration:none}

/* ---------- surcouches ---------- */
#apercu{position:fixed;z-index:70;width:320px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:12px;box-shadow:var(--ombre);font-size:.9rem;pointer-events:none;display:flex;gap:10px}
#apercu b{font:600 1.05rem var(--f-display);display:block}
#apercu p{margin:4px 0 0;color:var(--muted);font-size:.85rem}
.voile{position:fixed;inset:0;background:rgb(0 0 0/.55);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.boite{background:var(--surface);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--ombre);width:min(640px,100%);display:flex;flex-direction:column;max-height:80vh;overflow:hidden}
.boite > input{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:1.1rem;padding:14px 16px;min-height:52px}
.boite .resultats{overflow:auto;padding:6px}
.boite .resultats button{padding:8px 10px}
.boite .resultats .x{font-size:.8rem;color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.boite .pied{border-top:1px solid var(--line);padding:8px 14px;font-size:.78rem;color:var(--faint);display:flex;gap:14px}
.visionneuse{position:fixed;inset:0;z-index:80;background:rgb(0 0 0/.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px}
.visionneuse img{max-width:100%;max-height:78vh;border-radius:8px}
.visionneuse .ligne{justify-content:center}
mark{background:color-mix(in srgb,var(--gold) 35%,transparent);color:inherit;border-radius:2px;padding:0 1px}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;z-index:90;align-items:center}
.toast{background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:10px;font-size:.92rem;box-shadow:var(--ombre);max-width:90vw}
.toast.err{background:var(--mort);color:#1a0d0a}

/* ---------- graphe, chronologie, tableaux ---------- */
.graphe-zone{position:relative;height:calc(100vh - 200px);min-height:420px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(circle at 50% 40%,var(--surface2),var(--surface) 70%);overflow:hidden}
.graphe-zone svg{width:100%;height:100%;cursor:grab;touch-action:none}
.legende-graphe{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.noeud{cursor:pointer}
.noeud text{font:12px var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;pointer-events:none}
.noeud text.icone{stroke:none}
.noeud.centre text{font-weight:700;font-size:13px}
/* noms : ceux qui se chevaucheraient sont cachés (placerNoms) ; ils reviennent au survol */
.graphe-zone .noeud.nom-cache:not(:hover) text.nom{display:none}
.graphe-zone text.mesure{font:12px var(--f-body);visibility:hidden}
.graphe-zone .arete{opacity:.55}
.graphe-zone svg.survol .noeud:not(.voisin){opacity:.18}
.graphe-zone svg.survol .arete:not(.voisin){opacity:.06}
.graphe-zone svg.survol .arete.voisin{opacity:1}
.graphe-zone svg.survol .noeud.voisin text.nom{display:inline}
.graphe-zone svg.survol .arete.voisin{stroke:var(--gold);stroke-width:2}
.legende-graphe button.badge{cursor:pointer;min-height:0;font:inherit;font-size:.78rem}
.legende-graphe button.badge[aria-pressed=false]{opacity:.4;text-decoration:line-through}
.legende-graphe .n{opacity:.7;font-family:var(--f-mono);font-size:.72rem}
.arete{stroke:var(--line2);stroke-width:1.3}
.arete.relation{stroke:color-mix(in srgb,var(--gold) 55%,transparent);stroke-width:1.6}
.arete.mention{stroke-dasharray:3 4}
.arete-texte{font:10px var(--f-body);fill:var(--faint)}
.chrono{position:relative;padding-left:28px;display:flex;flex-direction:column;gap:6px;max-width:900px}
.chrono::before{content:"";position:absolute;left:9px;top:4px;bottom:4px;width:2px;background:var(--line2)}
.chrono .an{font:600 1.2rem var(--f-display);color:var(--gold);margin:14px 0 4px -28px;padding-left:0}
.chrono .moment{position:relative;display:flex;gap:12px;align-items:center;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none}
.chrono .moment::before{content:"";position:absolute;left:-24px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--bg)}
.chrono .date{font:.85rem var(--f-mono);color:var(--muted);min-width:150px}
.tab{width:100%;border-collapse:collapse;font-size:.92rem}
.panneau code{overflow-wrap:anywhere}
.tab th,.tab td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.tab th{font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
/* Paramètres : des titres groupés, un bloc ouvert à la fois (son propre titre <h3> est alors en double) */
.param-liste{max-width:860px;display:flex;flex-direction:column;gap:6px}
.param-groupe{font:600 .75rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:14px 0 2px}
.param-groupe:first-child{margin-top:0}
.param-bloc{display:flex;flex-direction:column;gap:6px}
.param-titre{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;white-space:normal;padding:.7rem 1rem;min-height:46px;font-size:1rem;background:var(--surface);border-color:var(--line);border-radius:10px}
.param-titre:hover{background:var(--surface2)}
.param-titre[aria-expanded="true"]{border-color:var(--gold);color:var(--gold)}
.param-titre .chevron{font-size:1.3rem;line-height:1;color:var(--muted);transition:transform .15s}
.param-titre[aria-expanded="true"] .chevron{transform:rotate(90deg);color:var(--gold)}
.param-corps > h3:first-child{display:none}
.mois-ed{display:grid;grid-template-columns:minmax(0,1fr) 5rem auto;gap:6px;align-items:center}
.jeton{font-family:var(--f-mono);font-size:.85rem;word-break:break-all;background:var(--sunk);padding:8px 10px;border-radius:8px;border:1px solid var(--line2)}

/* ---------- organigramme ---------- */
.organi{overflow-x:auto;padding:4px 0 10px}
.organi > ul{width:max-content;min-width:100%}
.organi ul{display:flex;justify-content:center;padding:18px 0 0;margin:0;position:relative}
.organi > ul{padding-top:0}
.organi li{list-style:none;position:relative;padding:18px 4px 0;display:flex;flex-direction:column;align-items:center}
.organi > ul > li{padding-top:0}
/* traits : horizontal entre frères, vertical vers chaque enfant */
.organi li::before,.organi li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:18px;border-top:1.5px solid var(--line2)}
.organi li::after{right:auto;left:50%;border-left:1.5px solid var(--line2)}
.organi li:only-child::before,.organi li:only-child::after{display:none}
.organi li:only-child{padding-top:18px}
.organi > ul > li:only-child{padding-top:0}
.organi li:first-child::before,.organi li:last-child::after{border:0 none}
.organi li:last-child::before{border-right:1.5px solid var(--line2);border-radius:0 6px 0 0}
.organi li:first-child::after{border-radius:6px 0 0 0}
.organi ul ul::before{content:"";position:absolute;top:0;left:50%;height:18px;border-left:1.5px solid var(--line2)}
.organi li:only-child > .poste::before{content:"";position:absolute;top:-18px;left:50%;height:18px;border-left:1.5px solid var(--line2)}
.organi > ul > li:only-child > .poste::before{display:none}
.poste{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:132px;padding:9px 8px 7px;
  border:1px solid var(--line2);border-radius:12px;background:var(--surface2);text-align:center}
.poste.chef{border-color:var(--gold);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent)}
.poste.secret{border-style:dashed;border-color:color-mix(in srgb,var(--secret) 70%,transparent)}
.poste.mort{opacity:.55}
.poste.mort .nom{text-decoration:line-through}
.poste .nom{font:600 .92rem var(--f-display);text-decoration:none;line-height:1.2}
.poste .nom:hover{text-decoration:underline}
.poste .rang{font-size:.76rem;color:var(--muted)}
.poste.chef .rang{color:var(--gold)}
.poste .cadenas{position:absolute;top:4px;left:6px;font-size:.75rem}
.poste .modif{position:absolute;top:2px;right:2px;opacity:0;min-height:0;padding:0 5px}
.poste:hover .modif,.poste .modif:focus-visible{opacity:1}
.poste[draggable=true]{cursor:grab}
.poste.cible,.org-racine.cible{outline:2px dashed var(--gold);outline-offset:3px}
.org-racine{display:none;border:1.5px dashed var(--line2);border-radius:10px;padding:8px;text-align:center;font-size:.82rem;color:var(--muted)}
.glisse .org-racine{display:block}
.org-form{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;align-items:start}
.org-form .pleine{grid-column:1/-1}
.org-edit{width:min(420px,100%);padding:18px}
/* lot de subordonnés sans équipe : une grille dans un cadre, relié d'un seul trait */
.lot{position:relative;display:grid;grid-template-columns:repeat(var(--colonnes,2),auto);gap:6px;padding:6px;align-items:start;
  border:1.5px solid var(--line2);border-radius:16px;background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.organi li:only-child > .lot::before{content:"";position:absolute;top:-19.5px;left:50%;height:18px;border-left:1.5px solid var(--line2)}
.organi > ul > li:only-child > .lot::before{display:none}
/* les racines n'ont personne au-dessus d'elles */
.organi > ul > li::before,.organi > ul > li::after{display:none}
.poste.rattache{border-style:dotted;background:var(--surface)}
.poste .rang a{color:inherit}

/* profil de combat, créatures */
.bloc-combat{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk)}
.carac{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.carac span{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border:1px solid var(--line);border-radius:6px;background:var(--surface);font-variant-numeric:tabular-nums;font-weight:600}
.carac small{font-size:.7rem;color:var(--muted);font-weight:500;letter-spacing:.04em}
ul.attaques{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.liste-adv{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.pieces{display:flex;flex-wrap:wrap;gap:8px}
.pieces label{display:flex;align-items:center;gap:4px}
.pieces input{width:6.5em}
.liste-butin{display:flex;flex-direction:column;gap:6px}
.pot-pieces{font:600 1.05rem var(--f-display);margin-bottom:4px}
.pot-objets,.pot-histo{margin:4px 0 8px;padding-left:1.2em}
.pot-histo li{margin:4px 0}
.pot-prop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:6px 0;border-bottom:1px solid var(--line)}
.pot-volet{margin-top:10px}
.combat-butin{margin-top:6px;flex-wrap:wrap}
.pot-volet summary{cursor:pointer;font-weight:600}
.pot-volet form{margin-top:8px}
.pot-choix{display:flex;flex-direction:column;gap:4px}
.pot-choix input{width:5.5em}
.butin-l{display:grid;grid-template-columns:minmax(0,1fr) 80px auto;gap:6px;align-items:start}
.butin-l:has(.s){grid-template-columns:minmax(0,1fr) auto}
.adv{display:grid;grid-template-columns:minmax(0,1fr) 70px 110px auto;gap:6px;align-items:start}
.adv .m{min-width:0}
.combat-seance{padding:10px 0;border-top:1px solid var(--line)}
.combat-seance:first-child{border-top:0}
.ok-pastille{color:var(--ok)} .ko-pastille{color:var(--mort)}
#p-special:empty{display:none}
/* qui sait quoi */
.matrice th.pj{text-align:center;min-width:72px;vertical-align:bottom}
.matrice th.pj span{display:block;font-size:.78rem;font-weight:500;margin-top:4px;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.matrice th.pj img,.matrice th.pj .vignette{margin:0 auto}
.matrice td.case{text-align:center;padding:2px}
.matrice td.case button{width:34px;min-height:30px;padding:0;border-style:dashed;background:transparent;color:var(--ok);font-weight:700}
.matrice td.case.sait button{border-style:solid;border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,transparent)}
.matrice td.case.indice button{border-color:var(--warn);color:var(--warn)}
@media (max-width:640px){.adv{grid-template-columns:minmax(0,1fr) 60px;}.carac{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.barre-form .hint{display:none}}

/* ---------- écran du MJ : une page, sans défilement ---------- */
.app.plein{grid-template-columns:minmax(0,1fr)}
.app.plein .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:40;transform:translateX(-100%);transition:transform .2s}
.app.plein.menu-ouvert .side{transform:none;box-shadow:var(--ombre)}
.app.plein .burger{display:none}
.app.plein main{padding:0!important;max-width:none;height:100vh;height:100dvh;overflow:hidden}
.table{height:100%;display:grid;grid-template:auto minmax(0,1fr)/minmax(210px,.8fr) minmax(260px,1fr) minmax(340px,1.35fr);gap:10px;padding:10px;position:relative}
.table h2,.table h3,.table h4{margin:0}
.t-barre{grid-area:1/1/2/-1;display:flex;align-items:center;gap:6px;min-width:0}
.t-barre > button{flex:0 0 auto;padding:.3rem .6rem}
.t-barre select{width:auto;max-width:34%;min-width:120px;font:600 1rem var(--f-display);background:var(--surface)}
.t-contexte{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden;white-space:nowrap}
.t-contexte .lien-fiche{flex:0 1 auto;min-width:0;overflow:hidden}
.t-contexte .lien-fiche span:last-child{overflow:hidden;text-overflow:ellipsis}
.t-pot{flex:0 0 auto;white-space:nowrap}
.t-pot a{display:flex;align-items:center;gap:4px;color:var(--gold)}
.t-pot:empty{display:none}
@media (max-width:640px){.t-pot a>span:first-of-type{display:none}}
.t-rappels{display:flex;gap:4px;flex:0 1 auto;min-width:0;overflow:auto hidden}
.t-rappel{font-variant-numeric:tabular-nums;border-radius:999px}
.t-rappel.fini{background:var(--warn);border-color:var(--warn);color:#17130a;font-weight:600}
.t-volet{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0;grid-row:2}
.t-gauche{grid-column:1} .t-centre{grid-column:2} .t-droite{grid-column:3}
@media (min-width:900px){.table[data-sans-combat]{grid-template-columns:minmax(210px,.8fr) minmax(260px,1.6fr)}}
.table[data-sans-combat] .t-droite,.table[data-sans-combat] .t-onglets [data-v=combat],.table[data-sans-combat] #t-large{display:none!important}
.table[data-large] .t-centre{display:none}
.table[data-large] .t-droite{grid-column:2/-1}
.t-bloc{background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.t-gauche > #t-pj{flex:0 1 auto;max-height:68%}
.t-etire{flex:1 1 0}
.t-bloc > h3,.t-tete{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:40px;padding:5px 10px 5px 12px;border-bottom:1px solid var(--line)}
.t-bloc > h3,.t-tete h3{font:600 .76rem var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--gold)}
.t-bloc > h3 > :not(.sp){text-transform:none;letter-spacing:0;font-weight:400}
.table .sp{flex:1}
.t-defile{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.t-defile > *{flex-shrink:0}
.t-defile > section{display:flex;flex-direction:column;gap:4px}
.t-defile h4{font:600 .72rem var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--c,var(--faint));display:flex;align-items:center;gap:8px}
.t-defile section.secret{border:1px dashed color-mix(in srgb,var(--secret) 70%,transparent);background:color-mix(in srgb,var(--secret) 6%,var(--surface));border-radius:10px;padding:8px 10px}
.t-defile section.secret h4{color:var(--secret)}
.t-defile section.secret h4::before{content:"🔒"}
.t-defile .resume{color:var(--muted);font-style:italic;font-family:var(--f-display)}
.t-titre{display:flex;flex-direction:column;gap:6px}
.t-titre h2{font-size:1.4rem;line-height:1.2}
.t-titre h2 a{text-decoration:none}
.t-titre .badge .lien-fiche .vignette{display:none}
.t-props{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px 14px;margin:0}
.t-props dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.t-props dd{margin:1px 0 0;overflow-wrap:anywhere;font-size:.93rem}
.t-tabs{display:flex;gap:4px}
.t-tabs button{min-height:30px;padding:.15rem .7rem;border-radius:999px;background:transparent;font-size:.88rem}
.t-tabs button[aria-selected=true]{background:var(--gold);color:#17130a;border-color:var(--gold);font-weight:600}
/* joueurs */
.t-pjs{gap:6px;padding:8px}
.t-pj-l{display:flex;gap:6px;align-items:center}
.t-pj-l > .t-pj{flex:1;min-width:0}
.t-niveau{flex:none;min-height:30px;padding:0 9px}
.t-pj{display:flex;gap:9px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);text-decoration:none}
.t-pj:hover{border-color:var(--c)}
.t-pj.absent{opacity:.5}
.t-pj .c,.t-item .c{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.t-pj .n,.t-item .n{display:flex;align-items:baseline;gap:7px;min-width:0}
.t-pj b{font:600 1rem var(--f-display);line-height:1.2;white-space:nowrap}
.t-pj small,.t-item small{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.t-pj .badge{font-size:.7rem;padding:0 7px}
.t-pv{position:relative;display:block;height:18px;border-radius:9px;background:var(--sunk);border:1px solid var(--line2);overflow:hidden;font:600 .72rem/16px var(--f-mono);text-align:center}
.t-pv i{position:absolute;inset:0 auto 0 0;background:var(--ok);opacity:.5}
.t-pv.moyen i{background:var(--warn)} .t-pv.bas i{background:var(--mort)}
.t-pv.ko{border-color:var(--mort);color:var(--mort)}
.t-pv > span{position:relative}
.t-stats{display:flex;flex-wrap:wrap;gap:1px 9px;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.t-stats b{color:var(--ink)}
/* scène */
#t-scene .t-defile{gap:2px;padding:6px 8px}
#t-scene h4{margin:8px 4px 2px}
#t-scene h4:first-child{margin-top:2px}
.t-item{display:flex;gap:9px;align-items:center;padding:5px 4px;border-radius:8px;text-decoration:none;min-height:40px}
.t-item:hover{background:var(--surface2)}
.t-item b{font-weight:600;font-size:.93rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-item .n > span{font-size:.72rem;flex:0 0 auto}
/* combat */
.t-rencs{display:flex;align-items:center;gap:6px;flex:0 0 auto;min-width:0;overflow:auto hidden;padding:5px 10px 5px 12px;border-bottom:1px solid var(--line)}
.t-renc{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;padding:2px 10px;border:1px solid var(--line2);border-radius:999px;font-size:.85rem;white-space:nowrap}
.t-renc a{text-decoration:none;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.t-renc button{border-radius:999px}
.t-renc.passee{opacity:.55}
.t-tete > button,.t-tete > a{flex:0 0 auto}
.t-tete > [data-combat]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.t-cadre{flex:1;min-height:0;display:flex;background:var(--sunk)}
.t-cadre iframe{flex:1;width:100%;height:100%;border:0;display:block}
.t-cadre > p,.t-absent{margin:auto;padding:16px;max-width:460px;display:flex;flex-direction:column;gap:10px}
/* tiroir (une fiche) et petites fenêtres */
.t-tiroir{grid-area:2/1/3/3;justify-self:start;width:min(540px,100%);z-index:20;box-shadow:var(--ombre);border-color:var(--line2)}
.table[data-large] .t-tiroir{grid-area:2/1/3/-1}
.t-ident{display:flex;gap:12px;align-items:center}
.t-ident h2{font-size:1.45rem;line-height:1.2}
.t-rel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.t-rel li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.t-pop{position:absolute;top:54px;right:10px;width:min(360px,calc(100% - 20px));max-height:calc(100% - 64px);z-index:30;box-shadow:var(--ombre);border-color:var(--line2)}
.t-coche{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.t-coche span{display:flex;flex-direction:column;gap:2px}
.t-coche small{color:var(--muted);font-size:.8rem}
#fonctions{display:flex;flex-direction:column;gap:8px}
#fonctions .fonc-groupe{margin:8px 0 0;font:600 .74rem var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.t-rappel-form{display:grid;grid-template-columns:minmax(0,1fr) 4.6rem auto auto;gap:6px;align-items:center}
.t-onglets{display:none}
/* connexion d'un appareil du réseau */
.app.ferme .side,.app.ferme .burger{display:none}
.app.ferme main{display:grid;place-items:center;padding:16px!important;overflow:auto}
.connexion{width:min(420px,100%);gap:16px;padding:24px}
.connexion .marque{padding:0}
.acces-adresses{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.acces-adresses figure{margin:0;display:flex;flex-direction:column;gap:6px;align-items:center;font-size:.85rem}
.acces-adresses img{width:150px;height:150px;border-radius:8px;background:#fff;padding:4px}
.acces-etat{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-size:.9rem}
/* écran étroit (téléphone, tablette debout) : un volet à la fois */
@media (max-width:899px){
  .table{grid-template:auto minmax(0,1fr) auto/minmax(0,1fr);gap:8px;padding:8px}
  .table .t-volet{display:none;grid-column:1}
  .table[data-volet=joueurs] .t-gauche,.table[data-volet=quete] .t-centre,.table[data-volet=combat] .t-droite{display:flex}
  .t-onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;grid-area:3/1}
  .table[data-sans-combat] .t-onglets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-onglets button{min-height:42px}
  .table[data-volet=joueurs] .t-onglets [data-v=joueurs],.table[data-volet=quete] .t-onglets [data-v=quete],.table[data-volet=combat] .t-onglets [data-v=combat]{background:var(--gold);color:#17130a;border-color:var(--gold);font-weight:600}
  .t-tiroir,.table[data-large] .t-tiroir{grid-area:2/1/3/2;width:100%}
  .t-barre select{max-width:46%}
  #t-large{display:none}
}

/* ---------- menu Fichier, univers ---------- */
.fichier{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);margin-bottom:8px;padding:.35rem .6rem}
.fichier .u{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.fichier .u small{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint)}
.fichier .u b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.fichier .fl{color:var(--faint)}
.menu-fichier{position:fixed;z-index:70;background:var(--surface);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--ombre);padding:4px;max-width:min(360px,calc(100vw - 16px))}
.menu-fichier .ic{width:20px;text-align:center}
.menu-fichier h4{font:600 .68rem var(--f-body);text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:8px 8px 2px}
.menu-fichier hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.menu-fichier button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-fichier a{display:block;text-decoration:none;color:inherit}
.boite-corps{display:flex;flex-direction:column;gap:12px;padding:18px;overflow:auto}
.boite-corps h3{margin:0}
.liste-univers{max-height:40vh;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px}
.liste-univers .u{display:flex;flex-direction:column;min-width:0;flex:1}
.liste-univers .x{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liste-univers small{white-space:nowrap}

/* mode serveur : compte en lecture seule (auditeur) */
.lecture-avis{margin:10px 0 0;font-size:.8rem;color:var(--warn);text-align:center}
.lecture-seule a[href^="#/nouveau"],.lecture-seule a[href$="/modifier"]{display:none}
.lecture-seule #rel-ajout,.lecture-seule #depot,.lecture-seule #archiver,.lecture-seule #supprimer{display:none}
.lecture-seule [data-suppr]{display:none}
#choix-univers{width:100%;margin:0 0 8px}
/* mode de travail (bureau), en bas à gauche : local, connecté, hors connexion */
/* le pied du menu reste en bas de la fenêtre, même quand le menu défile */
.side .bas{flex-wrap:wrap;position:sticky;bottom:-10px;z-index:2;background:var(--side);margin-left:-10px;margin-right:-10px;padding:8px 10px 10px;margin-bottom:-10px;border-top:1px solid var(--line)}
.etat-lien{flex:1 0 100%;display:flex;align-items:center;gap:9px;text-align:left;background:var(--surface);border-color:var(--line);padding:6px 9px;min-height:0;min-width:0;white-space:normal}
.etat-lien .u{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.etat-lien b{font-size:.84rem;font-weight:600}
.etat-lien small{font-size:.74rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.etat-lien .voyant{flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.etat-lien[data-voyant=ok] .voyant{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}
.etat-lien[data-voyant=hors-ligne] .voyant{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 22%,transparent)}
.etat-lien[data-voyant=pause] .voyant{background:transparent;border:2px solid var(--warn);box-shadow:none}
.etat-lien[data-voyant=erreur] .voyant{background:var(--mort);box-shadow:0 0 0 3px color-mix(in srgb,var(--mort) 22%,transparent)}
.etat-lien[data-voyant=erreur] b{color:var(--mort)}
.panneau-lien{padding:6px 8px 8px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 16px);overflow:auto}
.panneau-lien > .hint{margin:4px 6px;font-size:.82rem}
.panneau-lien button{white-space:normal}
.panneau-lien button[role=radio]{align-items:flex-start;border:1px solid transparent;padding:7px 8px}
.panneau-lien button[role=radio] .u{display:flex;flex-direction:column;line-height:1.3}
.panneau-lien button[role=radio] small{margin:0;color:var(--muted);font-size:.76rem}
.panneau-lien button[aria-checked=true]{border-color:var(--gold);background:var(--surface2)}
.panneau-lien button[aria-checked=true] b::after{content:" ✓";color:var(--gold)}
.univers-serveur .u small{color:var(--accent)}
.liste-univers button[aria-current=true]{background:var(--surface2);opacity:1}
.liste-univers button[aria-current=true] b{color:var(--gold)}
.maj-badge{color:var(--gold);font-weight:600}
.version-app{align-self:center;margin-left:auto;font:.72rem var(--f-mono);color:var(--faint);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}
a.version-app[href]:hover{color:var(--muted)}
.version-app.test{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 50%,transparent);border-radius:4px;padding:0 4px}
.maj-dispo{border:1px solid var(--line2);border-radius:var(--r);padding:10px 12px;background:var(--surface2);display:flex;flex-direction:column;gap:8px}
.maj-dispo p{margin:0}
.maj-dispo .jeton{word-break:normal;overflow-wrap:anywhere}
.postes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.postes li{line-height:1.4}
.maj-notes{white-space:pre-wrap;font:inherit;font-size:.85rem;color:var(--muted);margin:6px 0 0;max-height:220px;overflow:auto}
.ligne-connexion{gap:10px;align-items:flex-end;flex-wrap:wrap}
.ligne-connexion .champ{flex:1 1 180px}
.conflit{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:8px}
.conflit:first-of-type{border-top:0}
.conflit-valeurs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.conflit-valeurs>div{background:var(--surface);border-radius:8px;padding:8px 10px;min-width:0;overflow-wrap:anywhere}
.conflit-valeurs small{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-bottom:4px}
.conflit-valeurs .texte{white-space:pre-wrap}
@media (max-width:640px){.conflit-valeurs{grid-template-columns:1fr}}

/* bestiaire */
.bst{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:16px;align-items:start}
@media (max-width:900px){.bst{grid-template-columns:1fr}}
.bst-liste{display:flex;flex-direction:column;gap:4px;max-height:60vh;overflow:auto}
.bst-liste > *{flex:0 0 auto} /* une liste qui défile : ses lignes gardent leur hauteur */
.bst-liste button{display:flex;flex-direction:column;align-items:stretch;gap:2px;text-align:left;padding:8px 10px;min-height:0;white-space:normal}
.bst-liste button.actif{border-color:var(--accent)}
.bst-liste .t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.bst-liste .t b{min-width:0;overflow-wrap:anywhere}
.bst-liste .nc{margin-left:auto;font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.bst-stats{display:flex;flex-direction:column;gap:6px;background:var(--sunk);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;margin:10px 0}
.bst-nc{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bst-car{display:flex;flex-wrap:wrap;gap:4px 14px}
.bst-texte{white-space:pre-line}
.bst-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.bst-atk{display:grid;grid-template-columns:2fr 1fr 70px 1fr auto;gap:6px}
.bst-voie{display:flex;justify-content:space-between;gap:10px;align-items:center}
.bst-voie button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}

/* feuille de personnage */
.fp-res{display:inline-flex;align-items:center;gap:4px}
.fp-res button{min-height:0;padding:0 7px}
.fp-atk{display:grid;grid-template-columns:2fr 1fr 60px 1fr 1fr 2fr auto;gap:6px}
.fp-voies{display:flex;flex-direction:column;gap:10px}
.fp-bonus{color:var(--ok);font-weight:600;cursor:help}
.fp-doublon{color:var(--warn)}
.fp-utils{margin:4px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:2px}
.fp-niveaux{margin:4px 0 6px;padding-left:1.2em;display:flex;flex-direction:column;gap:3px}
.mn{display:flex;flex-direction:column;gap:10px}
.mn p{margin:0}
.mn h4{display:flex;align-items:baseline;gap:8px;margin:6px 0 0;font:600 .8rem var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mn-fil{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mn-des{display:flex;flex-wrap:wrap;gap:10px}
.mn-des .champ{flex:0 1 160px}
.mn textarea{width:100%}
.mn-total{font-size:1rem}
.mn button.fp-vcase{min-height:2.6em;color:var(--faint);cursor:pointer}
.mn button.fp-vcase.acquise{color:var(--ink);font-weight:600;cursor:default}
.mn button.fp-vcase.choisie{color:var(--accent-ink);background:var(--accent);font-weight:600}
.mn button.fp-vcase.bloquee{opacity:.4;cursor:not-allowed}
.mn button.fp-vcase:not(.acquise):not(.bloquee):hover{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
.mn button.fp-vcase.choisie:hover{background:var(--accent);color:var(--accent-ink)}
.mn-recap{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:5px}
.mn-accord{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.mn-accord p{flex:1 1 220px}
.mn-voies{display:flex;flex-direction:column;gap:8px}
.mn-voie{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface2)}
.mn-voie label{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mn-voie select{min-width:0;max-width:100%}
.mn-caps{margin:6px 0 0;padding-left:1.2em;display:flex;flex-direction:column;gap:3px}
.mn-caps:empty{display:none}
.fp-utils button{min-height:0;padding:0 7px;margin-left:4px}
.fp-epuise{color:var(--mort);font-weight:600}
.fp-vbloc{display:grid;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--sunk)}
.fp-vcoin,.fp-vcoin2,.fp-vrang{background:var(--accent);color:var(--accent-ink)}
.fp-vrang{display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:600;font-size:.9rem;border-top:1px dotted color-mix(in srgb,var(--accent-ink) 35%,transparent)}
.fp-vtete{background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:600;text-align:center;padding:3px 6px;overflow-wrap:anywhere}
.fp-vsous{padding:2px 6px;text-align:center;font-size:.8rem;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--line2);border-left:1px solid var(--line2)}
.fp-vcase{min-height:2.6em;padding:4px 6px;font-size:.9rem;border-left:1px solid var(--line2);border-top:1px dotted var(--line2);overflow-wrap:anywhere;color:var(--faint)}
.fp-vcase[data-v]{cursor:help}
.fp-vcase.acquise{color:var(--ink);background:color-mix(in srgb,var(--accent) 18%,transparent);font-weight:600}
.fp-vcase[data-v]:hover,.fp-vcase[data-v]:focus-visible{background:color-mix(in srgb,var(--accent) 30%,transparent);outline:none}
.fp-vtete-ed{display:flex;gap:4px;align-items:center;padding:3px}
.fp-vtete-ed input{flex:1;min-width:0;color:var(--ink);background:var(--surface);font-family:var(--f-display);font-weight:600;text-align:center;padding:2px 6px;min-height:0}
.fp-vtete-ed button{min-height:0;padding:0 6px;color:var(--accent-ink);border-color:transparent}
.fp-vsous-ed{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;justify-content:center;padding:4px}
.fp-vsous-ed select,.fp-vsous-ed input{min-height:0;padding:1px 4px;font-size:.8rem;max-width:100%}
.fp-vsous-ed input[data-origine]{width:8em}
.fp-vsous-ed input[data-rang]{width:3.5em}
button.fp-vcase{display:block;width:100%;text-align:left;border-radius:0;border-width:0 0 0 1px;border-left:1px solid var(--line2);border-top:1px dotted var(--line2);background:transparent;white-space:normal;cursor:pointer;font:inherit;font-size:.9rem}
button.fp-vcase.acquise{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.fp-vcase-ed{padding:2px}
.fp-vcase-ed input{width:100%;min-height:0;padding:3px 6px;font-size:.9rem;background:transparent;border-color:transparent}
.fp-vcase-ed input:hover,.fp-vcase-ed input:focus{border-color:var(--line2);background:var(--surface)}
.v-rang{border:1px solid var(--line2);border-radius:var(--r);padding:6px 10px;background:var(--sunk)}
.v-rang summary{cursor:pointer}
.v-rang-nom{color:var(--muted);margin-left:6px}
.v-bonus{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.v-bonus select,.v-bonus input{min-height:0;width:auto;max-width:100%}
.fp-bulle{position:fixed;z-index:1000;background:var(--surface);color:var(--ink);border:1px solid var(--line2);border-radius:var(--r);box-shadow:var(--ombre);padding:8px 10px;font-size:.9rem;pointer-events:none}
.fp-bulle ul{margin:6px 0 0;padding-left:1.2em}
.fp-bulle .bst-texte{margin-top:4px}
@media (max-width:700px){.fp-atk{grid-template-columns:1fr 1fr}}

/* lanceur de dés : panneau du MJ (toutes les pages) et onglet de la page des joueurs */
.des-bouton{position:fixed;right:16px;bottom:16px;z-index:60;width:48px;height:48px;padding:0;border-radius:50%;font-size:1.35rem;background:var(--surface);border-color:var(--line2);box-shadow:var(--ombre)}
.des-bouton.on{border-color:var(--gold)}
.des-bouton .n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--gold);color:#17130a;font:600 .75rem/20px var(--f-body)}
.des-panneau{position:fixed;right:16px;bottom:74px;z-index:60;width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 100px));display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--ombre)}
.des-tete{display:flex;justify-content:space-between;align-items:center}
.des-tete h2{font-size:1.15rem}
.des-form{display:flex;flex-direction:column;gap:8px}
.des-saisie{display:flex;gap:6px}
.des-saisie input{font-family:var(--f-mono)}
.des-rapides{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.des-rapides button{font-family:var(--f-mono);padding-inline:0}
.des-cache{display:flex;align-items:center;gap:6px;font-size:.88rem}
.des-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0}
.des-liste > *{flex:0 0 auto}
.jet{display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--sunk)}
.jet.mj{border-left:3px solid var(--gold)}
.jet.cache{border-style:dashed;opacity:.85}
.jet.moi{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--sunk))}
.jet-total{font:600 1.45rem var(--f-display);text-align:center}
.jet-corps{display:flex;flex-direction:column;min-width:0}
.jet-tete{overflow-wrap:anywhere}
.jet-detail{font-family:var(--f-mono);font-size:.8rem;color:var(--muted);overflow-wrap:anywhere}
.jet-nat{font-family:var(--f-body);font-size:.75rem;padding:0 6px;border-radius:999px;border:1px solid var(--line2);margin-left:4px;white-space:nowrap}
.jet-nat.haut{background:var(--gold);color:#17130a;border-color:var(--gold)}
.jet-nat.bas{background:var(--mort);color:#1a0d0a;border-color:var(--mort)}
.jet-heure{font-size:.75rem;color:var(--faint);align-self:start}
.des-joueur{max-width:720px;margin:16px auto;width:calc(100% - 32px)}
.des-joueur h2{font-size:1.1rem;margin-top:6px}
.des-mode{display:flex;gap:4px;flex-wrap:wrap}
.des-mode button.on{border-color:var(--gold);color:var(--gold);font-weight:600}
.des-tests{display:flex;flex-direction:column;gap:8px}
.des-groupe{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.des-groupe > .hint{flex:0 0 100%}
.des-groupe button{white-space:normal}
@media print{.des-bouton,.des-panneau{display:none!important}}

/* préparation d'une séance */
.prep{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px;margin:14px 0}
.prep-item{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--line);line-height:1.45}
.prep-item:first-of-type{border-top:0}
.prep-item input{margin-top:.2rem;flex:0 0 auto}
.prep-item > span{min-width:0;overflow-wrap:anywhere}
.prep-pnj{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.prep textarea{min-height:110px}
.prep-bas{margin-bottom:24px}
.prep .large{grid-column:1/-1}
.ap-quete,.ap-secret{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line)}
.ap-quete:first-of-type,.ap-secret:first-of-type{border-top:0}
.ap-quete select,.ap-renc select{width:auto}
.ap-qui{border-top:0;padding:2px 10px 2px 0}
.ap-renc{padding:4px 0}

/* écran du MJ : aides de jeu */
.t-aide{display:flex;flex-direction:column;gap:6px;padding:8px 6px;border-bottom:1px solid var(--line)}
.t-aide .n{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.t-aide .n a{font-weight:600;text-decoration:none;color:var(--text)}
.t-aide .dest{display:flex;flex-wrap:wrap;gap:5px}
.t-aide .dest button{min-height:30px;padding:.1rem .65rem;border-radius:999px;font-size:.85rem;border-style:dashed;background:transparent}
.t-aide .dest button.primary{border-style:solid;border-color:var(--gold);background:var(--gold);color:#17130a;font-weight:600}
.t-tabs .nb{font-size:.78em;opacity:.75;margin-left:2px}
.t-aide .dest button.recu{border-style:solid;border-color:var(--ok);color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);cursor:default}

/* Paramètres → Claude */
.claude-client{display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid var(--line)}
.claude-client h4{font-size:.95rem}
.claude-cible{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:.9rem}
.claude-cible code{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;min-width:0}

/* inventaire de la feuille : ce qui est porté, ses chiffres en bleu (les capacités sont en vert) */
.fp-objet{color:var(--accent);font-weight:600}
.fp-avec{cursor:help}
.fp-inv{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.fp-inv li{display:flex;align-items:center;gap:8px;min-height:30px}
.fp-inv li.porte .fp-inv-nom b{color:var(--ink)}
.fp-inv .fp-porte{width:1.4em;text-align:center;flex-shrink:0;color:var(--ok)}
.fp-inv .fp-porte input{min-height:0;width:1.05rem;height:1.05rem;margin:0}
.fp-inv-nom{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0;flex:1}
.fp-qte{display:flex;gap:2px;flex-shrink:0}
.fp-qte button{min-height:0;padding:0 8px}
.fp-inv-ed{display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--line);border-radius:8px}
.fp-inv-ligne{display:grid;grid-template-columns:minmax(0,2fr) 70px minmax(0,1fr) auto auto;gap:6px;align-items:center}
.fp-inv-chiffres summary{cursor:pointer;color:var(--muted);font-size:.88rem}
.fp-inv-chiffres > .ligne{margin-top:6px}
.fp-inv-chiffres input,.fp-inv-chiffres select{width:auto;min-width:0}
.fp-inv-chiffres input[type=number]{width:64px}
.fp-inv-bonus{display:inline-flex;gap:4px;align-items:center}
.fp-inv-arme:not(.on) > :not(label){display:none}
@media (max-width:700px){
  .fp-inv-ligne{grid-template-columns:minmax(0,1fr) 64px auto}
  .fp-inv-ligne [data-retirer-objet]{grid-column:3;grid-row:1}
  .fp-inv-ligne select{grid-column:1}
  .fp-inv-ligne label{grid-column:2/4}
}

/* administration d'un serveur (admin.html) */
.page-admin .adm-tete{justify-content:space-between}
.page-admin .adm-tete h3{margin:0;overflow-wrap:anywhere}
.page-admin .adm-univers{display:flex;flex-direction:column;gap:8px}
.adm-comptes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.adm-comptes li{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.page-admin #adm-sortir{margin-left:auto}
.adm-creer{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.adm-creer .champ{flex:1;min-width:min(220px,100%)}
.adm-places td{vertical-align:middle}
.adm-actif{display:inline-flex;align-items:center;gap:6px}
.adm-actif span{display:none;color:var(--muted);font-size:.85rem}
@media (max-width:600px){
  .adm-table thead{display:none}
  .adm-table tr{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .adm-table td{border:0;padding:0}
  .adm-table td:nth-child(2),.adm-table td:nth-child(4){grid-column:1/-1}
  .adm-table td:nth-child(3){grid-row:1;grid-column:2}
  .adm-table td:nth-child(4){text-align:left!important}
  .adm-actif span{display:inline}
}

/* second facteur des administrateurs */
.sf-qr { display: block; width: 256px; max-width: 100%; height: auto; background: #fff; padding: 8px; border-radius: 6px; }
.sf-secret { font-family: monospace; overflow-wrap: anywhere; user-select: all; }
.sf-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; margin: 8px 0; padding: 0; list-style: none; font-family: monospace; }
@media (max-width: 640px) {
  .sf-table, .sf-table tbody { display: block; }
  .sf-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .sf-table td { border: 0; padding: 0; }
  .sf-table td:first-child { flex: 1 1 100%; }
  .sf-table td:last-child { margin-left: auto; }
}

/* installée sur une tablette : le contenu reste hors des encoches */
@media (display-mode: fullscreen), (display-mode: standalone) {
  body { box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
}
.connexion .installer { align-self: flex-start; }