:root{
  --ink:#2b2119; --muted:#7a6a55; --paper:rgba(120,90,50,.07);
  --bord:rgba(110,85,50,.35); --accent:#a34a22; --braise:#c9683a;
  --btn:rgba(120,90,50,.10); --btn-hover:rgba(163,74,34,.14); --fond:#f4eee2;
  --fond-lateral:rgba(120,90,50,.05);
  --pensee:#6d5590; --monde:#5d6b58; --sang:#8f1f1f; --vert:#3f7040;
  --loge:#3d7b86;
  /* les tranches des livres, une par genre (voir docs/books.md) */
  --book-registre:#6a4a22; --book-carnet:#6d5590; --book-plan:#a34a22;
  --book-memento:#5d6b58; --book-dossier:#3d7b86; --book-regle:#8f1f1f;
  --book-oeuvre:#8a6a1f;
  /* échelle de la carte : carte.js la repose sur chaque <svg> selon son
     cadrage. Ce défaut évite que les épaisseurs deviennent invalides si le
     module n'a pas rendu. */
  --k:1;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e6dbc6; --muted:#a8977c; --paper:rgba(255,225,170,.05);
    --bord:rgba(220,190,140,.25); --accent:#e0824a; --braise:#e8955f;
    --btn:rgba(255,225,170,.06); --btn-hover:rgba(224,130,74,.16); --fond:#171310;
    --fond-lateral:rgba(255,225,170,.03);
    --pensee:#a68cc9; --monde:#8fa387; --sang:#d95050; --vert:#5d8f5d;
    --loge:#63b3c1;
    --book-registre:#c9a15e; --book-carnet:#a68cc9; --book-plan:#e0824a;
    --book-memento:#8fa387; --book-dossier:#63b3c1; --book-regle:#d95050;
    --book-oeuvre:#d4b25a;
  }
}
html,body{margin:0;height:100%;background:var(--fond);color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;line-height:1.6;font-size:19px;}
/* la chronique d'abord et deux tiers, la scène ensuite sur le tiers restant */
body{display:grid;grid-template-columns:auto minmax(0,2fr) minmax(340px,1fr);
  overflow:hidden;}
#fil{order:2;}
#scene{order:3;}
button{font:inherit;color:inherit;cursor:pointer;background:var(--btn);
  border:1px solid var(--bord);border-radius:5px;transition:background .15s;}
button:hover{background:var(--btn-hover);border-color:var(--accent);}
.zone-titre{font-size:.72em;font-variant:small-caps;letter-spacing:.14em;color:var(--muted);
  border-bottom:1px dotted var(--bord);padding-bottom:5px;margin-bottom:14px;}
.pulse{animation:pulse 2.2s infinite;}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ------- rail latéral, replié par défaut ------- */
#lateral{height:100vh;box-sizing:border-box;overflow-y:auto;width:320px;
  border-right:1px solid var(--bord);background:var(--fond-lateral);
  padding:14px 18px 20px;transition:width .25s;}
#lateral.ferme{width:54px;padding:14px 8px;overflow:hidden;}
#lateral.ferme #lateral-corps{display:none;}
#lateral-bascule{width:100%;padding:6px 0;font-size:.9em;color:var(--muted);margin-bottom:16px;}
#lateral-corps{display:flex;flex-direction:column;gap:26px;}

.objectif{font-size:.86em;border-left:3px solid var(--braise);padding:4px 0 4px 10px;
  margin-bottom:10px;cursor:pointer;transition:color .2s,border-color .2s;}
.objectif:hover{color:var(--accent);}
.objectif.statut-accompli{border-left-color:var(--monde);color:var(--muted);text-decoration:line-through;}
.objectif.statut-echoue{border-left-color:var(--sang);color:var(--muted);text-decoration:line-through;}
.objectif-vide{font-size:.8em;font-style:italic;color:var(--muted);}
.reglage{margin-bottom:14px;}
.reglage-nom{font-size:.8em;color:var(--muted);margin-bottom:2px;}
.reglage input[type=range]{width:100%;accent-color:var(--accent);height:20px;}
.reglage-bornes{display:flex;justify-content:space-between;font-size:.68em;
  color:var(--muted);font-style:italic;}
body.sans-gestes .gestes{display:none;}
/* Débug — bascule d'un siège à l'autre. Outil de mise au point, pas de jeu :
   sobre, discret, et absent tant qu'il n'y a qu'un joueur. */
/* le siège dans le bandeau : qui l'on incarne, et la liste pour en changer.
   Discret par défaut — c'est un repère, pas une commande qu'on cherche. */
#siege{flex:none;position:relative;}
#siege-bouton{padding:3px 9px;font:inherit;font-size:.94em;letter-spacing:.04em;
  color:var(--muted);background:none;border:1px solid var(--bord);
  border-radius:11px;cursor:pointer;}
#siege-bouton:hover{color:var(--accent);border-color:var(--accent);}
#siege-liste{position:absolute;right:0;top:calc(100% + 6px);z-index:40;
  display:flex;flex-direction:column;min-width:130px;padding:4px;
  background:var(--fond);border:1px solid var(--bord);border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);}
/* sans ceci, le display:flex ci-dessus (spécificité d'ID) bat le
   display:none de [hidden] : le menu ne se refermait jamais. */
#siege-liste[hidden]{display:none;}
.siege-choix{padding:6px 10px;font:inherit;font-size:.94em;text-align:left;
  color:var(--muted);background:none;border:0;border-radius:4px;cursor:pointer;
  white-space:nowrap;}
.siege-choix:hover{background:var(--btn-hover);color:var(--texte);}
.siege-choix.actif{color:var(--accent);cursor:default;}
.siege-choix.actif::after{content:" ·";}
.bouton-voix{width:100%;padding:5px 0;font-size:.78em;color:var(--muted);
  background:var(--btn);border:1px solid var(--bord);border-radius:3px;
  letter-spacing:.03em;cursor:pointer;transition:color .2s,border-color .2s;}
.bouton-voix:hover:not(:disabled){background:var(--btn-hover);}
.bouton-voix.actif{color:var(--accent);border-color:var(--accent);}
.bouton-voix:disabled{opacity:.5;cursor:default;font-style:italic;}

/* ------- la scène : bandeau, décor, narrateur, input ------- */
#scene{height:100vh;box-sizing:border-box;display:flex;flex-direction:column;
  overflow:hidden;padding:12px 26px 14px;gap:8px;}
#bandeau{flex:none;display:flex;align-items:center;gap:14px;font-size:.8em;
  color:var(--muted);letter-spacing:.04em;border-bottom:1px solid var(--bord);
  padding-bottom:6px;}
#lieu{font-style:italic;flex:1;}
#jauge{width:80px;height:5px;border:1px solid var(--bord);border-radius:3px;overflow:hidden;flex:none;}
#jauge i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--braise));transition:width 1s;}

#bulle-monde{flex:none;max-height:11vh;overflow-y:auto;}
#bulle-monde:empty{display:none;}
#bulle-monde .breve{margin:0;font-size:.86em;color:var(--muted);
  border-left:3px solid var(--monde);padding:2px 0 2px 12px;}

/* le décor : carte au centre, acteurs en couronne */
#decor{flex:1 1 auto;min-height:0;position:relative;}
#carte{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;}
#carte svg{max-height:100%;max-width:100%;width:auto;height:auto;display:block;}
#acteurs{position:absolute;inset:0;pointer-events:none;}
.acteur{position:absolute;width:0;height:0;pointer-events:none;}
.acteur .medaillon{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  width:110px;text-align:center;opacity:.5;filter:saturate(.55);pointer-events:auto;
  transition:opacity .5s,filter .5s,transform .5s;}
.acteur .medaillon svg{width:58px;height:58px;display:block;margin:0 auto;}
.acteur .qui{display:block;font-size:.66em;color:var(--muted);line-height:1.2;margin-top:2px;}
.acteur.parle .medaillon{opacity:1;filter:none;transform:translate(-50%,-50%) scale(1.08);}
.acteur.parle .qui{color:var(--ink);}
.acteur .bulle{display:none;}
.acteur .bulle.pleine{display:block;position:absolute;left:50%;top:42px;
  transform:translateX(-50%);width:230px;max-height:9.5em;overflow:hidden;
  background:var(--fond);border:1px solid var(--bord);border-radius:10px;
  padding:8px 12px;font-size:.78em;line-height:1.45;pointer-events:auto;z-index:3;}
.acteur.parle .bulle.pleine{border-color:var(--accent);}
.parole{font-style:italic;}

#bulle-recit{flex:none;max-height:13vh;overflow-y:auto;background:var(--paper);
  border:1px solid var(--bord);border-left:3px solid var(--monde);
  border-radius:0 6px 6px 0;padding:7px 16px 9px;}
#bulle-recit:has(#bulle-recit-corps:empty){display:none;}
#bulle-recit .etiquette{font-size:.66em;font-variant:small-caps;letter-spacing:.14em;
  color:var(--monde);}
#bulle-recit .recit{margin:2px 0 0;border:none;background:none;padding:0;font-size:.9em;}
#bulle-recit .recit p{margin:0;}
#bulle-pensee{flex:none;max-height:10vh;overflow-y:auto;}
#bulle-pensee:empty{display:none;}
.pensee{font-style:italic;font-size:.86em;color:var(--pensee);
  border-left:3px dotted var(--pensee);padding:2px 0 2px 12px;margin:0;}
.pensee::before{content:'⟡ ';}
#attente{display:none;flex:none;text-align:center;color:var(--muted);
  font-style:italic;font-size:.82em;padding:2px 0;}
#attente.actif{display:block;}

/* ------- la barre : Parler / Agir / Penser / … ------- */
#fil-actions{flex:none;border-top:1px solid var(--bord);padding-top:8px;}
#mode-input{display:flex;gap:6px;margin-bottom:7px;}
#mode-input button{font-size:.78em;padding:4px 16px;border-radius:14px;color:var(--muted);}
#mode-input #mode-dire.actif{color:var(--accent);border-color:var(--accent);background:var(--btn-hover);}
#mode-input #mode-agir.actif{color:var(--monde);border-color:var(--monde);background:var(--paper);}
/* le champ prend toute la largeur de la colonne ; le bouton d'envoi et ses
   fanions passent dessous, alignés à droite — on écrit à l'aise, pas dans
   une fente contre un bouton. */
.libre{display:flex;flex-direction:column;gap:7px;align-items:stretch;}
.libre textarea{width:100%;font:inherit;font-size:.95em;color:inherit;background:var(--paper);
  border:1px solid var(--bord);border-radius:8px;padding:10px 14px;min-width:0;
  min-height:104px;max-height:34vh;resize:vertical;}
.libre textarea:focus{outline:none;}
.libre textarea.mode-dire{border-left:3px solid var(--accent);}
.libre textarea.mode-dire:focus{border-color:var(--accent);}
.libre textarea.mode-agir{border-left:3px solid var(--monde);font-style:italic;}
.libre textarea.mode-agir:focus{border-color:var(--monde);}
.libre button{padding:10px 20px;font-size:.95em;}
/* l'heure de la fiction, contre le bouton d'envoi : quand on parle, on sait quand */
.libre .envoi{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  gap:8px;flex:none;}
#heure-barre{font-size:.72em;color:var(--muted);letter-spacing:.04em;
  text-align:center;white-space:nowrap;font-style:italic;}
/* Améliorer : un fanion sous le bouton d'envoi, pas un mode. Éteint, il ne
   doit pas tirer l'œil ; allumé, on doit savoir que ce qu'on écrit passera
   par la plume du MJ avant d'être entendu. */
#ameliorer{font-size:.72em;padding:3px 10px;border-radius:12px;color:var(--muted);
  opacity:.7;}
#ameliorer:hover{opacity:1;}
#ameliorer.actif{color:var(--accent);border-color:var(--accent);
  background:var(--btn-hover);opacity:1;}
#ameliorer .emb{margin-right:4px;}
/* le brouillon, le temps que la plume passe : la ligne pâlit sans disparaître */
.chr-brouillon .chr-texte{opacity:.55;font-style:italic;}
.chr-ameliore .chr-texte{transition:opacity .4s;}

#pause{display:none;border-color:var(--braise);color:var(--braise);font-style:normal;}
/* dans la barre de modes : visible seulement tant qu'il reste du flux à jouer */
#mode-input #pause{display:none;margin-left:auto;}
#mode-input #pause.actif{display:inline-flex;align-items:center;}

/* ------- la chronique, à gauche de la scène ------- */
#fil{position:relative;height:100vh;box-sizing:border-box;display:flex;
  flex-direction:column;
  overflow:hidden;border-right:1px solid var(--bord);padding:14px 18px 16px;
  background:var(--fond-lateral);}
#fil-corps{flex:1;overflow-y:auto;padding-right:22px;}

/* les jalons du joueur : sauter de sa propre parole à la suivante */
#fil-reperes{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:4px;z-index:3;}
#fil-reperes.vide{display:none;}
#fil-reperes button{width:20px;height:20px;padding:0;line-height:1;
  font-size:.72em;color:var(--muted);background:var(--fond-lateral);
  border:1px solid var(--bord);border-radius:4px;cursor:pointer;opacity:.45;
  transition:opacity .2s,color .2s,border-color .2s;}
#fil-reperes button:hover{opacity:1;color:var(--pensee);border-color:var(--pensee);}
.chr-vise{animation:vise 1.2s ease-out;}
@keyframes vise{from{background:color-mix(in srgb,var(--pensee) 22%,transparent);}
  to{background:transparent;}}

/* ------- « Vos desseins » : la cinquième échelle du décor ------- */
#desseins{position:static;flex:1 1 auto;min-height:180px;display:flex;
  flex-direction:column;}
.desseins-corps{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;}
.desseins-jour{font-size:.62em;font-style:italic;color:var(--muted);margin:0 0 12px;}
.desseins-groupe{margin-bottom:16px;}
.desseins-groupe-titre{font-size:.6em;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px dotted var(--bord);padding-bottom:3px;
  margin-bottom:9px;}
.dessein{border-left:2px solid var(--braise);padding:1px 0 4px 10px;margin-bottom:12px;
  cursor:pointer;}
.dessein:hover h3{color:var(--accent);}
.dessein h3{margin:0;font-size:.74em;font-weight:600;line-height:1.35;}
.dessein-marge{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:2px;
  font-size:.58em;color:var(--muted);}
.dessein-echeance.echeance-retard{color:var(--sang);}
.dessein-echeance.echeance-urgent{color:var(--accent);}
.dessein-echeance.echeance-proche{color:var(--braise);}
.dessein-dit{margin:5px 0 0;font-size:.62em;color:var(--muted);line-height:1.45;}
.dessein-point{display:inline-block;margin-top:5px;padding:1px 8px;font-size:.55em;
  font-variant:small-caps;letter-spacing:.08em;color:var(--muted);opacity:0;
  transition:opacity .15s,color .15s;}
.dessein:hover .dessein-point,.dessein-point:focus,.dessein-point:disabled{opacity:1;}
.dessein-point:hover{color:var(--accent);}
.dessein-point:disabled{cursor:default;color:var(--muted);opacity:.55;}
.dessein.statut-accompli{border-left-color:var(--monde);}
.dessein.statut-echoue{border-left-color:var(--sang);}
.dessein.statut-accompli h3,.dessein.statut-echoue h3{color:var(--muted);
  text-decoration:line-through;font-weight:400;}
/* comme « Les gens » : quand cette échelle est à l'écran, elle prend la place */
#cartes:has(#desseins:not(.vue-off)){flex:1 1 auto;}

/* ------- « Les livres » : ce qui est posé dans la salle ------- */
#books{position:static;flex:1 1 auto;min-height:180px;display:flex;
  flex-direction:column;}
#cartes:has(#books:not(.vue-off)){flex:1 1 auto;}
.books-corps{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;}
.books-ou{font-size:.6em;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px dotted var(--bord);padding-bottom:3px;
  margin-bottom:11px;}
.books-vide{font-size:.62em;font-style:italic;color:var(--muted);}
/* la tranche des volumes : un onglet par livre à portée */
.books-tranche{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;
  border-bottom:1px dotted var(--bord);padding-bottom:7px;}
.book-onglet{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:4px 9px;text-align:left;border-radius:4px 4px 0 0;background:var(--btn);}
.book-onglet-titre{font-size:.62em;line-height:1.25;}
/* L'emblème : on cherche une forme avant de lire un mot. Il reste discret —
   c'est un signe sur une tranche, pas une icône d'application. */
.book-onglet-embleme{margin-right:5px;font-size:1.15em;line-height:1;
  filter:saturate(.75);}
.book-embleme{margin-right:7px;font-size:1.1em;}
.book-onglet-ou{font-size:.5em;font-style:italic;color:var(--muted);
  letter-spacing:.04em;}
.book-onglet.actif{background:var(--btn-hover);border-color:var(--book-teinte,var(--accent));}
.book-onglet.actif .book-onglet-titre{color:var(--book-teinte,var(--accent));}
/* la tranche du volume, teintée par son genre : on reconnaît un carnet d'un
   registre au coin de l'œil, avant d'avoir lu l'onglet.
   Le contour entier porte la couleur du volume — trente onglets gris se
   ressemblent tous, trente onglets cerclés chacun de sa teinte se retrouvent
   à la place qu'on leur connaît. La tranche du bas reste plus épaisse : c'est
   le dos du livre. */
.book-onglet{border:1px solid var(--book-teinte,var(--bord));
  border-bottom-width:2px;opacity:.86;transition:opacity .15s;}
.book-onglet:hover{opacity:1;}
.book-onglet.actif{opacity:1;}
.books-tranche + .book{border-left-color:var(--book-teinte,var(--accent));}
/* Les coffrets, et ce qu'il y a dedans. Deux tranches, et l'œil doit voir du
   premier coup laquelle est laquelle : celle du haut porte les boîtes ET les
   volumes qui traînent à côté ; celle du dessous n'est que le contenu de la
   boîte ouverte, en retrait, sans bordure du bas. */
.books-coffrets{border-bottom-style:solid;}
.books-dedans{margin-left:14px;margin-top:-4px;border-bottom:none;
  padding-bottom:2px;}
.books-dedans .book-onglet{padding:3px 8px;background:none;}
.books-dedans + .book{border-left-color:var(--book-teinte,var(--accent));}
/* Un coffret n'est pas un volume : il a un couvercle. Une seconde tranche en
   haut de l'onglet, comme une boîte vue de trois quarts — on doit voir qu'on
   ouvre quelque chose, et non qu'on tourne une page. */
.book-onglet.book-coffret{border-top-width:3px;border-radius:3px;
  background:color-mix(in srgb,var(--book-teinte) 9%,var(--btn));}
.book-onglet.book-coffret .book-onglet-titre{font-weight:600;}
.book-onglet.book-coffret.ouvert{background:color-mix(in srgb,var(--book-teinte) 18%,var(--btn-hover));}
/* La carte du coffret : la liste de ce qu'il contient, une ligne par volume,
   et chaque ligne s'ouvre. C'est une main tendue, donc ça doit se voir. */
.book-coffret-table td{cursor:pointer;transition:color .12s,background .12s;}
.book-coffret-ligne:hover td{background:var(--btn-hover);
  color:var(--book-teinte,var(--accent));}
.book-coffret-ligne:focus{outline:none;}
.book-coffret-ligne:focus td{background:var(--btn-hover);}
.book-coffret-signe{width:1.6em;font-size:1.25em;line-height:1;
  padding-right:6px !important;}
.book-coffret-nom{white-space:nowrap;color:var(--ink) !important;}
.book-coffret-mot{font-style:italic;}
.book{margin-bottom:20px;border-left:2px solid var(--book-teinte,var(--braise));
  padding:1px 0 4px 10px;}
.book h3{margin:0;font-size:.74em;font-weight:600;line-height:1.35;}
/* le titre et sa main droite : le bouton de recopie tient sur la même ligne,
   discret tant qu'on ne le cherche pas */
.book-tete{display:flex;align-items:baseline;gap:10px;}
.book-tete h3{flex:1 1 auto;min-width:0;}
.book-copier{flex:0 0 auto;font:inherit;font-size:.54em;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:none;cursor:pointer;
  border:1px solid var(--bord);border-radius:3px;padding:3px 8px;opacity:.55;
  transition:opacity .15s,color .15s,border-color .15s;}
.book-copier:hover{opacity:1;color:var(--book-teinte,var(--accent));
  border-color:var(--book-teinte,var(--accent));}
.book-copier.fait{opacity:1;color:var(--book-teinte,var(--accent));
  border-color:var(--book-teinte,var(--accent));}
.book-genre{margin-left:8px;font-size:.62em;font-weight:400;font-variant:small-caps;
  letter-spacing:.12em;color:var(--book-teinte,var(--muted));white-space:nowrap;}
.book-sous-titre{font-size:.58em;font-style:italic;color:var(--muted);margin-top:2px;}
.book-table-enveloppe{margin-top:8px;overflow-x:auto;}
/* Le titre d'un tableau, quand un volume en porte plusieurs : une affaire a ses
   états cibles, ses verrous, ses clefs et ses actions, et l'œil doit savoir sur
   laquelle des quatre grilles il vient de tomber. */
.book-table-titre{margin-top:18px;font-size:.72em;letter-spacing:.06em;
  color:var(--braise,#b4763a);border-bottom:1px solid rgba(180,118,58,.28);padding-bottom:3px;}
.book-table-titre:first-of-type{margin-top:10px;}
.book-table{border-collapse:collapse;width:100%;font-size:.6em;line-height:1.45;}
.book-table th{text-align:left;font-weight:600;font-variant:small-caps;
  letter-spacing:.08em;color:var(--braise);border-bottom:1px solid var(--bord);
  padding:0 10px 4px 0;vertical-align:bottom;}
.book-table td{padding:6px 10px 6px 0;vertical-align:top;color:var(--muted);
  border-bottom:1px dotted var(--bord);}
/* la première colonne est l'entrée du tableau : elle porte le nom, et peut
   tenir sur deux lignes (le nom, puis la qualité) sans qu'on la coupe */
.book-table tr td:first-child{color:var(--ink);white-space:pre-line;
  min-width:8em;}
.book-note{margin-top:4px;font-style:italic;opacity:.75;}
.book-page{margin:8px 0 0;font-size:.62em;color:var(--muted);line-height:1.5;white-space:pre-line;}
/* Une page qui est un DESSIN — un levé au pas, un plan de salle, un arbre de
   parenté. La feuille garde sa propre couleur (le parchemin des scripts qui
   l'engendrent) : c'est un objet posé dans le volume, pas une illustration de
   l'interface. Elle déborde en largeur plutôt que de se laisser écraser. */
.book-figure{margin:10px 0 0;padding:0;}
.book-figure svg{display:block;width:100%;height:auto;border:1px solid var(--bord);
  border-radius:3px;}
.book-figure figcaption{margin-top:4px;font-size:.56em;font-style:italic;
  color:var(--muted);line-height:1.45;}
/* un registre ouvert et vierge : les colonnes réglées, et l'attente dite */
.book-attente{font-style:italic;opacity:.7;}
/* le carnet du joueur : hors fiction, donc sans la teinte d'un genre du monde */
.book-notes-zone{display:block;width:100%;margin-top:9px;font:inherit;
  font-size:.62em;line-height:1.6;color:inherit;background:var(--paper);
  border:1px solid var(--bord);border-radius:6px;padding:9px 11px;
  min-height:180px;resize:vertical;}
.book-notes-zone:focus{outline:none;border-color:var(--book-carnet);}
.book-notes-etat{margin-top:4px;min-height:1em;font-size:.54em;font-style:italic;
  letter-spacing:.04em;color:var(--muted);}
.chr{font-size:.8em;margin:0 0 14px;padding-left:10px;border-left:2px solid var(--bord);}
.chr-qui{font-variant:small-caps;letter-spacing:.05em;color:var(--braise);font-size:.9em;}
.chr-replique{border-left-color:var(--accent);font-style:italic;}
.chr-recit{border-left-color:var(--monde);color:var(--muted);}
.chr-breve{border-left-color:var(--monde);color:var(--muted);font-size:.76em;}
.chr-pensee{border-left-style:dotted;border-left-color:var(--pensee);color:var(--pensee);
  font-style:italic;}
.chr-vous{border-left-color:var(--pensee);}
.chr-vous .chr-qui{color:var(--pensee);}
.chr-evenement{border-left-color:var(--sang);}
.chr-objectif{border-left-color:var(--braise);}

/* ------- blocs : apparition, vieillissement, estompage ------- */
.bloc{opacity:0;transform:translateY(6px);transition:opacity .7s,transform .7s,
  border-color 1.2s,border-left-width 1.2s;}
.bloc.vue{opacity:1;transform:none;}
/* une fois dit, le texte s'efface — il ne se relit qu'au survol */
.bloc.vue.estompe{opacity:.07;transition:opacity 2.4s;}
#scene:hover .bloc.vue.estompe{opacity:.22;transition:opacity .5s;}
.bloc.vue.estompe:hover,
#scene:hover .bloc.vue.estompe:hover{opacity:1;transition:opacity .25s;}
.bloc[data-age="1"]{border-left-width:2px !important;}
.bloc[data-age="2"]{border-left-width:1px !important;}
.bloc[data-age="3"], .bloc[data-age="4"]{border-left-width:1px !important;
  border-left-color:var(--bord) !important;}

/* ------- phrases, gestes, entités ------- */
.phrase{border-bottom:1px dotted transparent;transition:border-color .25s,background .25s;}
.phrase-wrap:hover .phrase{background:var(--paper);border-bottom-color:var(--braise);}
.phrase.reagie{border-bottom:1px solid var(--accent);}
.gestes{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px;}
.geste-btn{font-size:.86em;font-style:italic;color:var(--muted);padding:5px 11px;
  border-radius:8px;border-style:dashed;text-align:left;white-space:normal;}
.geste-btn:hover{color:var(--ink);}
.geste-fait{font-size:.8em;color:var(--braise);font-style:italic;}
.entite{font-weight:bold;cursor:pointer;border-bottom:1px dotted transparent;
  transition:border-color .2s,color .2s;}
.entite:hover{color:var(--accent);border-bottom-color:var(--accent);}
.appui{font-weight:600;color:var(--ink);letter-spacing:.01em;}
.appui .entite{color:inherit;}
.pensee-amorce{opacity:.8;}
.parole-vous::before{content:'Vous — ';font-style:normal;font-variant:small-caps;
  color:var(--pensee);font-size:.85em;}
.acte-vous{color:var(--monde);font-style:italic;}
.evenement{border:1px solid var(--sang);border-left:3px solid var(--sang);
  border-radius:0 6px 6px 0;padding:10px 14px;background:var(--paper);font-size:.86em;}
.evenement::before{content:'✶ ';color:var(--sang);}
.evenement button{margin-top:8px;padding:6px 12px;font-size:.9em;}
.objectif-fil{border:1px dashed var(--braise);border-left:3px solid var(--braise);
  border-radius:0 6px 6px 0;padding:10px 16px;background:var(--paper);font-size:.86em;}
.objectif-fil span{font-variant:small-caps;letter-spacing:.05em;color:var(--braise);}
.objectif-fil small{display:block;font-size:.85em;color:var(--muted);margin-top:4px;}
.objectif-fil-accomplir{border-color:var(--monde);border-left-color:var(--monde);}
.objectif-fil-accomplir span{color:var(--monde);}
.objectif-fil-echouer{border-color:var(--sang);border-left-color:var(--sang);}
.objectif-fil-echouer span{color:var(--sang);}

/* ------- la table peinte (carte + son overlay) -------
   La géométrie vient de geo.js, généré depuis les données du mod AGOT. Le
   module pose --k sur le <svg> : le rapport entre le cadrage courant et la
   carte entière. Toute épaisseur en dépend, pour que la vignette serrée sur
   la baie et la grande table gardent le même grain de trait ; les corps de
   texte suivent le font-size posé sur le <svg>, d'où les em. */
.terre{fill:var(--paper);}
.cote{fill:none;stroke:var(--bord);stroke-width:calc(1.4px * var(--k));
  stroke-linejoin:round;}
.lointain{fill:var(--paper);opacity:.4;}
/* les régions : le même parchemin, séparées par un trait d'encre pâle */
.region-terre{fill:var(--paper);stroke:var(--bord);
  stroke-width:calc(.7px * var(--k));stroke-linejoin:round;}
/* lacs et rivières navigables : creusés dans la terre, repeints en eau */
.eaux{fill:var(--fond);stroke:var(--bord);stroke-width:calc(.35px * var(--k));
  opacity:.85;}
/* le relief : une ombre du sol, sous les teintes de région. Deux bandes, pas
   une topographie — là où le pays se soulève, là où il ne se passe plus. */
.relief-collines{fill:var(--bord);opacity:.075;}
.relief-montagnes{fill:var(--bord);opacity:.13;}
/* le réseau entier, navigable ou non. Le tracé est de l'ordre du demi-pixel :
   il est à la fois rempli ET filé, sinon il disparaîtrait au cadrage large. */
.rivieres{fill:var(--bord);stroke:var(--bord);opacity:.34;
  stroke-linejoin:round;stroke-linecap:round;}
/* les grandes routes : le chemin réel d'une place à l'autre, suivi sur le
   réseau du mod. Un liseré clair dessous, la chaussée dessus — c'est ce qui
   la fait lire par-dessus une rivière ou une frontière de région. */
.route{fill:none;stroke:var(--muted);opacity:.42;
  stroke-linejoin:round;stroke-linecap:round;}
/* les bourgs : les étapes du chemin, à la loupe seulement. Ni allégeance ni
   bannière — ils situent une distance, ils ne pèsent rien. */
.bourg{pointer-events:none;}
.bourg circle{fill:none;stroke:var(--muted);
  stroke-width:calc(.8px * var(--k));opacity:.6;}
.bourg text{font-family:inherit;font-size:.72em;fill:var(--muted);opacity:.72;
  font-style:italic;paint-order:stroke;stroke:var(--fond);
  stroke-width:calc(1.8px * var(--k));stroke-linejoin:round;}
.region{font-family:inherit;font-size:1.15em;fill:var(--muted);opacity:.7;
  font-variant:small-caps;letter-spacing:.18em;text-anchor:middle;}
.mer-nom{font-family:inherit;font-size:.92em;fill:var(--muted);opacity:.55;
  font-style:italic;text-anchor:middle;}
.lieu-carte{cursor:pointer;}
.lieu-carte .point{stroke:var(--fond);stroke-width:calc(1.1px * var(--k));}
.allg-noir .point{fill:var(--sang);}
.allg-vert .point{fill:var(--vert);}
.allg-neutre .point{fill:var(--muted);}
.lieu-carte .nom{font-family:inherit;font-size:1em;fill:var(--muted);
  paint-order:stroke;stroke:var(--fond);stroke-width:calc(2.6px * var(--k));
  stroke-linejoin:round;}
.lieu-carte:hover .nom{fill:var(--ink);}
.lieu-carte:hover .point{stroke:var(--accent);}
.lieu-carte.ici .nom{fill:var(--ink);}
.anneau{fill:none;stroke:var(--braise);stroke-width:calc(1.3px * var(--k));
  animation:pulse 2.6s infinite;}
#carte-legende{display:none;}
#carte-approcher{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  padding:3px 12px;font-size:.66em;color:var(--muted);font-style:italic;z-index:4;}
.leg::before{content:'● ';}
.leg-noir::before{color:var(--sang);}
.leg-vert::before{color:var(--vert);}
.leg-neutre::before{color:var(--muted);}
.leg-ici::before{content:'◍ ';color:var(--braise);}
#table-peinte{position:fixed;inset:0;z-index:40;background:rgba(20,14,8,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
#table-peinte[hidden]{display:none;}
#table-cadre{background:var(--fond);border:1px solid var(--bord);border-radius:10px;
  box-shadow:0 0 0 6px var(--paper),0 18px 60px rgba(0,0,0,.5);
  padding:14px 22px 12px;max-width:94vw;max-height:94vh;box-sizing:border-box;
  display:flex;flex-direction:column;}
#table-tete{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--bord);
  padding-bottom:8px;margin-bottom:6px;}
#table-titre{font-variant:small-caps;letter-spacing:.14em;color:var(--ink);}
#table-date{flex:1;font-size:.78em;color:var(--muted);font-style:italic;}
#table-fermer{font-size:.74em;padding:4px 12px;color:var(--muted);}
#table-corps{flex:1;min-height:0;display:flex;gap:16px;align-items:stretch;}
#table-carte{flex:1;min-height:0;display:flex;justify-content:center;}

/* ------- le registre : les affaires en cours, une par ligne -------
   Une table de quarante marques ne se lit pas en cherchant à l'œil. Un pli et
   un incident sont des AFFAIRES — un état, une date, un compte —, et une
   affaire se tient en liste avant de se regarder sur la carte. */
#table-liste{width:250px;flex:none;overflow-y:auto;overflow-x:hidden;
  padding-right:6px;border-right:1px dotted var(--bord);}
#table-liste[hidden]{display:none;}
.reg-tete{display:flex;align-items:baseline;gap:8px;font-size:.72em;
  font-variant:small-caps;letter-spacing:.14em;color:var(--muted);
  padding-bottom:6px;border-bottom:1px solid var(--bord);margin-bottom:6px;}
#reg-tout{margin-left:auto;font-size:.9em;padding:2px 8px;color:var(--braise);}
.reg-titre-groupe{font-size:.66em;font-variant:small-caps;letter-spacing:.16em;
  color:var(--muted);opacity:.75;margin:10px 0 3px;}
.reg-ligne{display:grid;grid-template-columns:auto 1fr auto;gap:7px;
  align-items:baseline;width:100%;text-align:left;padding:5px 7px;
  border:1px solid transparent;border-radius:5px;background:none;
  font-size:.74em;color:var(--muted);cursor:pointer;}
.reg-ligne:hover{color:var(--ink);background:var(--btn);}
.reg-ligne.tenu{color:var(--ink);background:var(--btn);border-color:var(--braise);}
/* la pastille reprend l'encre de l'état ou du feu : la colonne se lit d'un
   coup d'œil, avant même qu'on ait lu un seul mot */
.reg-marque{width:7px;height:7px;border-radius:50%;background:currentColor;
  align-self:center;}
.reg-pli.etat-redige .reg-marque{background:none;box-shadow:inset 0 0 0 1px currentColor;}
.reg-corps{min-width:0;display:flex;flex-direction:column;gap:1px;}
.reg-titre{color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reg-ou{font-size:.86em;opacity:.7;font-style:italic;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reg-droite{font-variant:small-caps;letter-spacing:.05em;opacity:.85;white-space:nowrap;}
.reg-etiq{grid-column:2/4;font-size:.84em;opacity:.62;font-style:italic;}
.reg-pli.etat-redige{color:var(--braise);}
.reg-pli.etat-muet{color:var(--braise);}
.reg-pli.etat-attente,.reg-pli.etat-parti{color:var(--muted);}
.reg-pli.etat-confirme,.reg-pli.etat-remis{color:var(--vert);}
.reg-pli.etat-perdu,.reg-pli.etat-intercepte{color:var(--sang);}
/* le plan : ce qui demande une décision, et sur qui ça atterrit */
.reg-dessein{color:var(--accent);}
.reg-dessein .reg-marque{background:none;box-shadow:inset 0 0 0 1px currentColor;
  border-radius:2px;transform:rotate(45deg);}
.reg-dessein .reg-etiq{font-style:normal;font-variant:small-caps;letter-spacing:.06em;}
/* un dessein qui n'atterrit sur personne n'a pas été décidé : ça doit se voir */
.reg-dessein .reg-etiq:not(:empty){opacity:.7;}
.reg-incident{color:var(--sang);}
.reg-incident.feu-couve{color:var(--braise);}
.reg-incident.feu-eteint{color:var(--muted);}
#table-carte svg{height:calc(94vh - 118px);max-width:88vw;width:auto;}
#table-legende{display:flex;gap:16px;justify-content:center;font-size:.7em;
  color:var(--muted);padding-top:6px;border-top:1px dotted var(--bord);
  flex-wrap:wrap;align-items:center;}
#table-large{font-size:.74em;padding:4px 12px;color:var(--muted);}

/* ------- la loupe : se pencher sur la carte -------
   touch-action:none — sans quoi un glissé au doigt ferait défiler la page au
   lieu de déplacer la carte. Le curseur dit ce qu'on peut faire : saisir. */
.loupe{touch-action:none;-webkit-user-select:none;user-select:none;}
.loupe svg{cursor:grab;}
.loupe.loupe-tient svg{cursor:grabbing;}
.leg-manuel{margin-left:auto;font-style:italic;opacity:.65;}

/* ------- CE QUE LA TABLE PORTE : jetons, traits, zones -------
   geo.js donne la géographie, jetons.js donne la guerre. Les pièces sont
   dessinées dans une boîte locale de 10 unités puis posées par un transform :
   à l'intérieur, tout s'écrit en unités locales (pas de var(--k)), et la
   vignette serrée garde le grain exact de la grande table. Le camp donne la
   couleur par `color`, dont héritent traits et glyphes. */
.camp-noir{color:var(--sang);}
.camp-vert{color:var(--vert);}
.camp-neutre{color:var(--muted);}

/* une région qui a choisi son camp — teinte lavée, jamais un aplat */
svg .zone{fill:currentColor;opacity:.09;stroke:none;pointer-events:none;}

/* les fils tendus : marches, routes de mer, corbeaux, attaques, serments */
.trait{cursor:pointer;}
.trait .fil{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;}
.trait .fil-reste{opacity:.45;}
.trait .fil-pointe{fill:currentColor;stroke:none;opacity:.85;}
.trait .pointe-ouverte{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;}
.trait .fil-marque{fill:var(--fond);stroke:currentColor;opacity:.9;}
.trait .fil-marque.plein{fill:currentColor;}
.trait:hover .fil,.trait:hover .fil-pointe{opacity:1;}
.trait-corbeau{color:var(--muted);}
/* un vol garde la couleur de son camp, mais il pèse plus lourd à l'œil que le
   reste : c'est la seule pièce de la table qui décide seule d'une journée */
.trait-vol .fil{opacity:1;}
.jeton-dragon .jeton-glyphe{stroke-width:1.35;}
.jeton-dragon .jeton-fond{opacity:.9;}
.trait-serment{color:var(--braise);}
.trait-querelle,.trait-attaque,.trait-menace{color:var(--sang);}
.trait-mariage{color:var(--pensee);}

/* les pièces posées */
.jeton{cursor:pointer;}
.jeton .jeton-fond{fill:var(--fond);opacity:.82;stroke:none;}
.jeton .jeton-glyphe{fill:none;stroke:currentColor;stroke-width:1.15;
  stroke-linecap:round;stroke-linejoin:round;}
.jeton .jeton-ceinture{fill:none;stroke:currentColor;stroke-width:.7;
  stroke-dasharray:1.6 1.6;opacity:.7;}
.jeton .jeton-force{font-family:inherit;font-size:6.2px;fill:var(--ink);
  text-anchor:middle;paint-order:stroke;stroke:var(--fond);stroke-width:1.8;
  stroke-linejoin:round;}
/* le nom vient sous le doigt : dix pièces nommées en clair feraient une
   bouillie par-dessus les noms de places */
.jeton .jeton-nom{font-family:inherit;font-size:6px;fill:var(--ink);
  font-variant:small-caps;letter-spacing:.06em;text-anchor:middle;
  paint-order:stroke;stroke:var(--fond);stroke-width:2.6;stroke-linejoin:round;
  opacity:0;transition:opacity .18s;pointer-events:none;}
.jeton .jeton-doute{font-family:inherit;font-size:6px;fill:currentColor;
  opacity:.8;text-anchor:middle;}
.jeton:hover .jeton-glyphe{stroke-width:1.5;}
.jeton:hover .jeton-nom{opacity:1;}

/* les têtes : où l'on CROIT que sont les gens. Une tête n'est pas une force —
   elle ne pèse pas sur la table, elle se pose dessous, en retrait, et son nom
   reste lisible parce que c'est toute l'information qu'elle porte. */
.jeton-tete .jeton-fond{opacity:.5;}
.jeton-tete .jeton-glyphe{stroke-width:1.35;opacity:.9;}
.jeton .jeton-nom.toujours{opacity:.78;font-size:5.4px;font-variant:normal;
  letter-spacing:.02em;stroke-width:2.2;}
.jeton-tete:hover .jeton-nom.toujours{opacity:1;}

/* ------- les oreilles : qui écoute pour vous, et depuis quand il se tait -------
   Elle se range comme une tête — sous la place, en retrait, nom en clair —
   mais son sujet n'est pas où elle est : c'est son ÂGE. Le compte de jours à
   son flanc est ce qu'on vient lire, et il prend l'encre de l'état dès que le
   silence dure. Une oreille ne sort jamais de la table en vieillissant : le
   trou qu'elle laisse est précisément ce qu'il faut voir. */
.jeton-oreille .jeton-fond{opacity:.42;}
.jeton-oreille .jeton-glyphe{stroke-width:1.1;opacity:.92;}
.jeton-oreille .jeton-nom{font-size:5px;stroke-width:2.1;}
.jeton-oreille .jeton-jours{font-size:5px;}
.jeton-oreille .jeton-etat{stroke-width:1;}
.jeton-oreille .jeton-doute{font-size:5px;}
/* Le silence est la seule chose qu'on veuille voir de loin : dès qu'elle se
   tait, la pièce entière prend l'encre de son état, glyphe compris. */
.jeton-oreille.etat-muette .jeton-glyphe{stroke:currentColor;opacity:1;}
.jeton-oreille.etat-perdu .jeton-glyphe{opacity:.55;stroke-dasharray:1.2 1.6;}

/* ------- les plis : ce qui a été écrit, et où ça en est -------
   Un pli n'est pas une force : il se range sous la place comme une tête, il
   porte son objet en clair, et une petite marque à son flanc gauche dit son
   état. C'est cette marque, pas la couleur du camp, qu'on vient lire. */
.jeton-pli .jeton-fond{opacity:.72;}
.jeton-pli .jeton-glyphe{stroke-width:.85;}
/* La pièce est grosse (×1,45) : ses textes et ses traits se rendent donc en
   corps RÉDUIT, sinon un pli écrirait son nom plus grand que le nom du lieu
   qu'il désigne, et sa marque d'état pèserait plus qu'un ost. */
.jeton-pli .jeton-nom{font-size:4.2px;stroke-width:1.9;}
.jeton-pli .jeton-jours{font-size:4.4px;}
.jeton-pli .jeton-etat{stroke-width:.85;}
.jeton-pli .jeton-doute{font-size:4.4px;}
.jeton-jours{font-family:inherit;font-size:6px;fill:var(--muted);
  text-anchor:start;font-variant:small-caps;letter-spacing:.05em;
  paint-order:stroke;stroke:var(--fond);stroke-width:1.8;stroke-linejoin:round;}
/* un silence qui dure se voit sans qu'on ait à lire : le compte prend l'encre
   de son état, comme le reste de la pièce */
.etat-muet .jeton-jours,.etat-attente .jeton-jours{fill:currentColor;}
.jeton-etat{fill:none;stroke:currentColor;stroke-width:1.1;
  stroke-linecap:round;stroke-linejoin:round;}
.jeton-etat circle{fill:none;}
/* l'état prime sur le camp : un corbeau confirmé et un corbeau perdu ne
   peuvent pas être de la même encre, fût-ce le même camp qui l'a envoyé */
.etat-confirme,.etat-remis,.etat-parle{color:var(--vert);}
.etat-perdu,.etat-intercepte{color:var(--sang);}
.etat-muet,.etat-muette{color:var(--braise);}
.etat-attente,.etat-parti,.etat-nouee{color:var(--muted);}
.etat-muette .jeton-jours{fill:currentColor;}
.trait-cavalier{color:var(--muted);}
.trait.etat-attente .fil,.trait.etat-parti .fil{opacity:.6;}
.trait.etat-perdu .fil,.trait.etat-intercepte .fil{stroke-dasharray:1.4 2.6;}
.leg-etat::before{content:'✦ ';}

/* ------- les incidents : ce qui a pris, et jusqu'où ça a gagné -------
   Le feu prime sur le camp, comme l'état d'un pli : un incendie n'appartient à
   personne. Le foyer est plein et cerclé, les relais sont plus petits et plus
   pâles, et ce qu'on CRAINT n'est qu'un contour. */
.jeton-incident{color:var(--braise);}
.jeton-incident .jeton-glyphe{fill:currentColor;fill-opacity:.16;stroke-width:1.05;}
.jeton-incident .jeton-fond{opacity:.86;}
.jeton-incident.foyer{color:var(--sang);}
.jeton-incident.foyer .jeton-glyphe{fill-opacity:.34;stroke-width:1.35;}
.jeton-incident.feu-couve{opacity:.72;}
.jeton-incident.feu-eteint{color:var(--muted);}
.jeton-incident.feu-eteint .jeton-glyphe{fill-opacity:0;stroke-dasharray:1.6 1.4;}
/* ce qu'on PENSE qu'il va gagner : un contour, jamais un aplat — sinon on lit
   une crainte comme une nouvelle, et c'est la faute que cette table interdit */
.jeton-incident.prevu{opacity:.55;}
.jeton-incident.prevu .jeton-glyphe{fill-opacity:0;stroke-dasharray:1.5 1.5;}
.jeton-incident.prevu .jeton-fond{opacity:.4;}
.jeton-ames{font-family:inherit;font-size:5.8px;fill:currentColor;
  text-anchor:middle;paint-order:stroke;stroke:var(--fond);stroke-width:1.8;
  stroke-linejoin:round;letter-spacing:.03em;}
.jeton-incident.prevu .jeton-ames{font-style:italic;}
/* Un incident posé tout entier ferait une toile d'araignée par-dessus la baie.
   Les fils et ce qu'on PENSE gagner ne se montrent qu'au survol de l'incident :
   la table garde ses foyers et ce qui a réellement pris, et l'on va chercher la
   propagation du doigt. */
.trait-propagation,.jeton-incident.prevu{opacity:0;pointer-events:none;
  transition:opacity .22s ease;}
.trait-propagation.eveille{opacity:1;pointer-events:auto;}
.jeton-incident.prevu.eveille{opacity:.55;pointer-events:auto;}
/* le foyer qu'on tient sous le doigt se sait tenu */
.jeton-incident.eveille:not(.prevu) .jeton-fond{stroke:currentColor;stroke-width:.5;}
.trait-propagation{color:var(--braise);}
.trait-propagation .fil{opacity:.7;}
.trait-propagation.prevu{color:var(--muted);}
.trait-propagation.prevu .fil{opacity:.42;stroke-dasharray:calc(.8px * var(--k)) calc(2.6px * var(--k));}
.trait-propagation.prevu .fil-pointe{opacity:.4;}
.trait-propagation.feu-eteint{color:var(--muted);}
.trait-propagation.feu-eteint .fil{opacity:.35;}

/* ------- le plan : ce qui n'a pas encore eu lieu -------
   Tout le reste de cette table décrit ce qui EST. Un dessein décrit ce qu'on
   VEUT — il ne doit donc jamais pouvoir se lire comme un fait : contour seul,
   trait interrompu, fond évidé. On voit tout de suite que rien n'est encore là. */
.jeton-dessein,.projete{color:var(--accent);}
.jeton-dessein .jeton-fond{fill:none;stroke:currentColor;stroke-width:.5;
  stroke-dasharray:1.8 1.5;opacity:.9;}
.jeton-dessein .jeton-glyphe{stroke-width:1.1;}
.jeton-dessein .jeton-nom.toujours{opacity:.85;font-variant:small-caps;
  letter-spacing:.05em;}
.jeton-dessein:hover .jeton-glyphe{stroke-width:1.5;}
/* J−0 : l'échéance est là. C'est la seule chose de cette table qui presse. */
.jeton-dans{font-family:inherit;font-size:5.4px;fill:currentColor;
  text-anchor:middle;font-variant:small-caps;letter-spacing:.08em;
  paint-order:stroke;stroke:var(--fond);stroke-width:1.8;stroke-linejoin:round;}
/* un fil projeté : la même route, mais rien n'y est encore passé */
.trait.projete{color:var(--accent);}
.trait.projete .fil{opacity:.55;stroke-dasharray:calc(2.4px * var(--k)) calc(2.2px * var(--k));}
.trait.projete .fil-pointe{opacity:.5;}
.leg-geste::before{content:'◇ ';color:var(--accent);}

/* ------- les filtres : ce que la table porte, famille par famille ------- */
#carte-filtres{position:absolute;top:2px;right:4px;z-index:5;
  display:flex;flex-direction:column;gap:2px;align-items:flex-end;}
.filtres-carte{display:inline-flex;gap:4px;}
.filtre-carte{font-size:.58em;padding:1px 7px;color:var(--muted);
  border:1px solid transparent;border-radius:9px;background:none;
  letter-spacing:.06em;opacity:.5;text-decoration:line-through;cursor:pointer;}
.filtre-carte.actif{opacity:1;text-decoration:none;color:var(--ink);
  border-color:var(--bord);background:var(--btn);}
.filtre-carte:hover{opacity:1;color:var(--ink);}
#table-legende .filtre-carte{font-size:1em;padding:2px 9px;}

/* la certitude se voit : une nouvelle rapportée pâlit, une rumeur se troue */
.cert-rapportee{opacity:.82;}
.cert-rumeur{opacity:.6;}
.cert-rumeur .jeton-glyphe{stroke-dasharray:1.5 1.1;}

/* ce qu'on vient de poser du doigt : la braise, puis plus rien de particulier */
.jeton.neuve .jeton-glyphe{transform-box:fill-box;transform-origin:center;
  animation:poser .7s cubic-bezier(.2,1.4,.5,1) both;}
.jeton.neuve .jeton-fond{stroke:var(--braise);stroke-width:.7;
  animation:pulse 2.4s ease-out 3;}
@keyframes poser{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:scale(1)}}
.trait.neuve .fil,.trait.neuve .fil-pointe{animation:trait-neuf 1.4s ease-out both;}
@keyframes trait-neuf{0%{opacity:0;stroke:var(--braise)}45%{opacity:1;stroke:var(--braise)}
  100%{opacity:.85}}

/* la légende ne nomme que ce qui est effectivement posé */
.leg-sep{width:1px;height:.9em;background:var(--bord);display:inline-block;}
.leg-marque{font-style:italic;}
.leg-marque::before{content:'▸ ';font-style:normal;color:var(--muted);}

/* ------- une démonstration dans le fil ------- */
.chr-table{border-left-color:var(--braise);}
.chr-carte{margin:8px 0 2px;border:1px solid var(--bord);border-radius:6px;
  background:var(--paper);padding:4px 4px 2px;cursor:pointer;position:relative;
  transition:border-color .2s;}
.chr-carte:hover{border-color:var(--accent);}
.chr-carte svg{display:block;width:100%;height:auto;}
.chr-carte-ouvrir{position:absolute;right:8px;bottom:5px;font-size:.72em;
  font-style:italic;color:var(--muted);}
.chr-carte:hover .chr-carte-ouvrir{color:var(--accent);}
/* Un volume tendu à bout de bras. Il n'est PAS cliquable, et ça se voit : pas
   de survol, pas d'affordance, aucune suite. On vous montre une page, on ne
   vous donne pas le livre — c'est la différence avec « passer », et le joueur
   doit la sentir sans qu'on la lui explique. D'où la feuille légèrement de
   travers et le bord de tranche teinté : un objet dans une main, pas un
   panneau de l'interface. */
.chr-livre{margin:9px 0 3px;padding:8px 10px 7px;background:var(--paper);
  border:1px solid var(--bord);border-left:2px solid var(--book-teinte,var(--braise));
  border-radius:3px;transform:rotate(-.25deg);}
.chr-livre-titre{font-size:.72em;font-weight:600;line-height:1.3;}
.chr-livre-sous-titre{margin-top:2px;font-size:.56em;font-style:italic;color:var(--muted);}
.chr-livre-corps{margin-top:2px;}
.chr-livre-corps .book-page{font-size:.6em;}
.chr-livre-corps .book-table{font-size:.58em;}
.chr-livre-reste{margin-top:7px;padding-top:5px;border-top:1px dotted var(--bord);
  font-size:.55em;font-style:italic;color:var(--muted);}
/* Présenté : il l'a posé ouvert devant vous, et il le garde. Le volume se
   redresse (on ne tend plus le bras, on pose), et le bouton tourne UNE page —
   c'est un geste, pas une navigation. Il n'y en a qu'un d'ouvert à la fois. */
.chr-livre-ouvert{transform:none;box-shadow:0 1px 0 var(--bord),0 6px 14px -10px #000;}
.chr-livre-tourner{margin-top:8px;font:inherit;font-size:.55em;letter-spacing:.06em;
  font-variant:small-caps;color:var(--muted);background:transparent;cursor:pointer;
  border:1px solid var(--bord);border-radius:3px;padding:3px 9px;
  transition:color .2s,border-color .2s;}
.chr-livre-tourner:hover:not(:disabled){color:var(--accent);border-color:var(--accent);}
.chr-livre-tourner:disabled{opacity:.55;cursor:default;font-style:italic;}
.chr-livre-fin{margin-top:7px;font-size:.55em;font-style:italic;color:var(--muted);opacity:.75;}
.chr-vers-table{display:inline-block;margin-top:5px;font-size:.86em;font-style:italic;
  color:var(--muted);cursor:pointer;border-bottom:1px dotted var(--bord);}
.chr-vers-table::before{content:'✥ ';font-style:normal;color:var(--braise);}
.chr-vers-table:hover{color:var(--accent);border-bottom-color:var(--accent);}

@media (max-width:1100px){
  body{grid-template-columns:auto minmax(0,1fr);}
  #fil{display:none;}
}

#bulle-vous{flex:none;max-height:9vh;overflow-y:auto;border-left:3px solid var(--pensee);
  padding:2px 0 2px 12px;font-size:.86em;font-style:italic;}
#bulle-vous:empty{display:none;}

/* ------- tenue du décor : les bulles restent dans la couronne ------- */
#scene{gap:6px;}
#bulle-monde{max-height:7vh;}
#bulle-recit{max-height:9.5vh;}
#bulle-pensee{max-height:7vh;}
#bulle-vous{max-height:7vh;}
/* bulle compacte, sous le médaillon en haut, au-dessus en bas */
.acteur .bulle.pleine{width:212px;max-height:5.6em;top:40px;
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent);
  mask-image:linear-gradient(180deg,#000 74%,transparent);}
.acteur.bas .bulle.pleine{top:auto;bottom:44px;
  -webkit-mask-image:none;mask-image:none;}

/* une seule bulle à la fois : celle de qui parle. Le reste est dans la chronique. */
.acteur .bulle.pleine{display:none;}
.acteur.parle .bulle.pleine{display:block;max-height:7em;}

/* La table occupe tout le décor : les conseillers se penchent DESSUS, ils ne
   l'encerclent pas à distance. La vignette est cadrée sur la baie de la Néra
   (voir CADRE_BAIE dans carte.js), donc elle reste lisible à cette taille. */
#carte svg{max-width:100%;}

/* =========================================================
   GRAMMAIRE VISUELLE — chaque nature de texte a sa forme.
   On ne lit pas un texte : on regarde une salle.
   ========================================================= */

/* --- LA PAROLE : une bulle, avec sa pointe vers celui qui parle --- */
.acteur .bulle.pleine{
  background:var(--fond);border:1.5px solid var(--bord);border-radius:16px;
  padding:9px 14px 11px;box-shadow:0 3px 14px rgba(0,0,0,.14);
  -webkit-mask-image:none;mask-image:none;overflow:visible;max-height:none;}
.acteur.parle .bulle.pleine{border-color:var(--accent);}
/* la pointe : deux triangles superposés (bord puis remplissage) */
.acteur .bulle.pleine::before,
.acteur .bulle.pleine::after{content:'';position:absolute;left:50%;
  border:10px solid transparent;width:0;height:0;}
.acteur .bulle.pleine::before{top:-20px;transform:translateX(-50%);
  border-bottom-color:var(--bord);}
.acteur.parle .bulle.pleine::before{border-bottom-color:var(--accent);}
.acteur .bulle.pleine::after{top:-17px;transform:translateX(-50%);
  border-bottom-color:var(--fond);}
.acteur.bas .bulle.pleine::before{top:auto;bottom:-20px;
  border-bottom-color:transparent;border-top-color:var(--bord);}
.acteur.bas.parle .bulle.pleine::before{border-top-color:var(--accent);}
.acteur.bas .bulle.pleine::after{top:auto;bottom:-17px;
  border-bottom-color:transparent;border-top-color:var(--fond);}
/* le nom coiffe la bulle ; la parole est droite, jamais en italique */
.parole{font-style:normal;}
.qui-parle{display:block;font-variant:small-caps;letter-spacing:.12em;
  font-size:.74em;color:var(--accent);margin-bottom:3px;}
.dit{display:block;font-size:1em;line-height:1.5;}
.dit::before{content:'“';font-size:1.5em;line-height:0;color:var(--accent);
  opacity:.55;margin-right:2px;vertical-align:-.18em;}
.dit::after{content:'”';font-size:1.5em;line-height:0;color:var(--accent);
  opacity:.55;margin-left:1px;vertical-align:-.35em;}

/* --- LA NARRATION : de la prose, pas un encadré --- */
#bulle-recit{background:none;border:none;border-left:none;padding:2px 0 4px;
  max-height:12vh;text-align:center;}
#bulle-recit .etiquette{display:inline-block;font-size:.6em;font-variant:small-caps;
  letter-spacing:.3em;color:var(--muted);opacity:.7;}
#bulle-recit .etiquette::before{content:'— ';}
#bulle-recit .etiquette::after{content:' —';}
#bulle-recit .recit{font-style:italic;font-size:.92em;color:var(--ink);opacity:.86;
  max-width:62ch;margin:1px auto 0;line-height:1.55;}
#bulle-recit .recit p::before{content:none;}

/* --- LA DÉPÊCHE : ce qui vient du dehors, scellé et bref --- */
#bulle-monde .breve{border-left:none;padding:0 0 0 26px;position:relative;
  font-size:.8em;letter-spacing:.015em;color:var(--muted);font-style:normal;}
#bulle-monde .breve::before{content:'✦';position:absolute;left:4px;top:0;
  color:var(--monde);font-size:1.05em;}

/* --- LA PENSÉE : un murmure, sans cadre --- */
.pensee{border-left:none;padding:0 0 0 24px;position:relative;font-size:.88em;
  color:var(--pensee);font-style:italic;opacity:.95;}
.pensee::before{content:'⟡';position:absolute;left:4px;top:0;opacity:.8;}

/* --- VOTRE VOIX : la même bulle, à votre couleur --- */
#bulle-vous{border-left:none;padding:0;max-height:none;}
#bulle-vous .parole-vous{display:inline-block;max-width:70ch;
  background:var(--paper);border:1.5px solid var(--pensee);border-radius:16px;
  padding:8px 16px 10px;font-style:normal;}
#bulle-vous .parole-vous::before{content:none;}
#bulle-vous .qui-parle{color:var(--pensee);}
#bulle-vous .dit::before,#bulle-vous .dit::after{color:var(--pensee);}
#bulle-vous .acte-vous{display:inline-block;padding:2px 0 2px 24px;position:relative;
  color:var(--monde);font-style:italic;}
#bulle-vous .acte-vous::before{content:'❖';position:absolute;left:2px;color:var(--monde);}

/* --- LA CHRONIQUE : un registre, chaque nature reconnaissable au premier coup d'œil --- */
.chr{border-left:none;padding:0 0 0 14px;position:relative;margin-bottom:16px;}
.chr-qui{display:block;font-variant:small-caps;letter-spacing:.12em;font-size:.8em;
  color:var(--accent);margin-bottom:1px;}
.chr-replique{font-style:normal;color:var(--ink);}
.chr-replique::before{content:'“';position:absolute;left:0;top:.55em;color:var(--accent);
  font-size:1.4em;line-height:0;opacity:.6;}
.chr-recit{font-style:italic;color:var(--muted);padding-left:0;text-align:center;
  font-size:.78em;opacity:.9;}
.chr-breve{font-style:normal;font-size:.74em;letter-spacing:.02em;color:var(--muted);}
.chr-breve::before{content:'✦';position:absolute;left:0;color:var(--monde);font-size:.9em;}
.chr-pensee{font-style:italic;color:var(--pensee);}
.chr-pensee::before{content:'⟡';position:absolute;left:0;opacity:.8;font-size:.9em;}
.chr-vous .chr-qui{color:var(--pensee);}
.chr-vous::before{content:'“';position:absolute;left:0;top:.55em;color:var(--pensee);
  font-size:1.4em;line-height:0;opacity:.7;}
.chr-evenement{font-size:.82em;border-left:none;padding-left:14px;color:var(--ink);}
.chr-evenement::before{content:'✶';position:absolute;left:0;color:var(--sang);}

/* le cadre de la bulle reste intact (la pointe déborde) ; c'est la parole qui se plie */
.acteur.parle .bulle.pleine{max-height:none;}
.acteur .bulle.pleine .dit{max-height:6.2em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent);
  mask-image:linear-gradient(180deg,#000 76%,transparent);}

/* dans la chronique, un acte n'est pas une parole */
.chr-acte{font-style:italic;color:var(--monde);}
.chr-acte::before{content:'❖';color:var(--monde);font-size:.85em;top:0;}
.chr-acte .chr-qui{color:var(--monde);}

/* =========================================================
   LA CHRONIQUE — un registre à gouttière : blason + carte.
   ========================================================= */
.chr{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;
  align-items:start;padding:0;margin:0 0 14px;position:relative;
  border-left:none;font-style:normal;text-align:left;}
.chr::before{content:none !important;}
.chr-icone{width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;
  border:1px solid var(--bord);background:var(--paper);color:var(--muted);}
.chr-icone svg{width:100%;height:100%;display:block;}
.chr-corps{min-width:0;}
.chr-qui{display:block;font-variant:small-caps;letter-spacing:.12em;
  font-size:.76em;margin:2px 0 1px;color:var(--muted);}
.chr-texte{display:block;font-size:.8em;line-height:1.5;}

/* la parole : une carte, le portrait en gouttière */
.chr-replique .chr-icone{border-color:var(--accent);padding:0;background:var(--fond);}
.chr-replique .chr-qui{color:var(--accent);}
.chr-replique .chr-corps{background:var(--paper);border:1px solid var(--bord);
  border-radius:12px;padding:5px 12px 7px;}
.chr-replique .chr-texte::before{content:'“';color:var(--accent);opacity:.5;margin-right:1px;}
.chr-replique .chr-texte::after{content:'”';color:var(--accent);opacity:.5;margin-left:1px;}

/* votre voix : la même carte, à votre couleur */
.chr-vous .chr-icone{border-color:var(--pensee);color:var(--pensee);}
.chr-vous .chr-qui{color:var(--pensee);}
.chr-vous .chr-corps{background:var(--paper);border:1px solid var(--pensee);
  border-radius:12px;padding:5px 12px 7px;}
.chr-vous .chr-texte::before{content:'“';color:var(--pensee);opacity:.6;}
.chr-vous .chr-texte::after{content:'”';color:var(--pensee);opacity:.6;}
/* un acte n'est pas une parole : pas de carte, pas de guillemets */
.chr-acte .chr-icone{border-color:var(--monde);color:var(--monde);}
.chr-acte .chr-qui{color:var(--monde);}
.chr-acte .chr-corps{background:none;border:none;padding:0;}
.chr-acte .chr-texte{font-style:italic;color:var(--monde);}
.chr-acte .chr-texte::before,.chr-acte .chr-texte::after{content:none;}

/* le récit : prose, sans carte */
.chr-recit .chr-icone{color:var(--monde);border-style:dotted;}
.chr-recit .chr-texte{font-style:italic;color:var(--muted);font-size:.78em;}

/* la dépêche : brève et scellée */
.chr-breve .chr-icone{color:var(--monde);}
.chr-breve .chr-texte{font-size:.74em;letter-spacing:.015em;color:var(--muted);}

/* la pensée : un murmure */
.chr-pensee .chr-icone{color:var(--pensee);border-color:var(--pensee);border-style:dotted;}
.chr-pensee .chr-texte{font-style:italic;color:var(--pensee);font-size:.78em;}

/* l'événement : le monde frappe à la porte */
.chr-evenement .chr-icone{color:var(--sang);border-color:var(--sang);}
.chr-evenement .chr-corps{border-left:2px solid var(--sang);padding-left:10px;}
.chr-evenement .chr-texte{font-size:.82em;}

/* les desseins */
.chr-objectif .chr-icone{color:var(--braise);border-color:var(--braise);}
.chr-objectif .chr-qui{color:var(--braise);}
.chr-objectif .chr-corps{border:1px dashed var(--braise);border-radius:10px;
  padding:5px 12px 7px;background:var(--paper);}
.chr-objectif-accomplir .chr-icone{color:var(--monde);border-color:var(--monde);}
.chr-objectif-accomplir .chr-corps{border-color:var(--monde);}
.chr-objectif-echouer .chr-icone{color:var(--sang);border-color:var(--sang);}
.chr-objectif-echouer .chr-corps{border-color:var(--sang);}

/* échelle du fil : une seule cascade, jamais de tailles qui se multiplient */
.chr{font-size:1em;}
.chr-qui{font-size:.7em;}
.chr-texte{font-size:.78em;}
.chr-recit .chr-texte{font-size:.76em;}
.chr-breve .chr-texte{font-size:.74em;}
.chr-pensee .chr-texte{font-size:.76em;}
.chr-evenement .chr-texte{font-size:.8em;}
.chr-objectif .chr-texte{font-size:.76em;}

/* blasons en emoji : le cercle garde la couleur du genre, l'emoji porte le sens */
.chr-icone{font-size:15px;font-family:"Segoe UI Emoji","Apple Color Emoji",
  "Noto Color Emoji",sans-serif;line-height:1;background:var(--fond);}
.chr-replique .chr-icone,.chr-vous .chr-icone{padding:0;}

/* la scène parle la même signalétique que le fil */
#bulle-monde .breve::before{content:'📨';font-size:.95em;top:1px;}
.pensee::before{content:'💭';font-size:.9em;opacity:1;}
#bulle-vous .acte-vous::before{content:'✋';font-size:.9em;}
.evenement::before{content:'⚡ ';color:inherit;}
#bulle-recit .etiquette::before{content:'🎭 ';}
#bulle-recit .etiquette::after{content:none;}
#bulle-monde .breve,.pensee,#bulle-vous .acte-vous{padding-left:28px;}

/* =========================================================
   DES ENTITÉS DISTINCTES — pas un fil, des objets posés :
   une parole est une carte, une pensée une note bleue,
   une dépêche un pli, un récit du vide entre les choses.
   ========================================================= */
:root{
  --bleu-pensee:rgba(96,124,196,.13); --bleu-bord:rgba(96,124,196,.5);
  --script:'Segoe Script','Ink Free','Bradley Hand','Brush Script MT',cursive;
}
@media (prefers-color-scheme: dark){
  :root{--bleu-pensee:rgba(126,158,232,.16); --bleu-bord:rgba(150,180,240,.55);}
}

/* on respire : chaque entité est un objet, pas une ligne */
.chr{margin:0 0 22px;align-items:start;}

/* — LA PAROLE : une carte, plus grande, portrait à l'appui — */
.chr-replique .chr-corps{background:var(--surface,var(--paper));border:1px solid var(--bord);
  border-radius:14px;padding:8px 14px 10px;box-shadow:0 2px 8px rgba(0,0,0,.07);}
.chr-replique .chr-texte{font-size:.88em;line-height:1.5;}
.chr-vous .chr-corps{border-radius:14px;padding:8px 14px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.07);}
.chr-vous .chr-texte{font-size:.88em;line-height:1.5;}

/* — LA PENSÉE : une note bleue, d'une autre main — */
.chr-pensee .chr-corps{background:var(--bleu-pensee);border:1px solid var(--bleu-bord);
  border-radius:18px 18px 18px 6px;padding:8px 15px 10px;}
.chr-pensee .chr-texte{font-family:var(--script);font-size:.9em;font-style:normal;
  line-height:1.45;color:var(--ink);opacity:.92;}
.chr-pensee .chr-icone{border-color:var(--bleu-bord);background:var(--bleu-pensee);
  border-style:solid;}

/* — LA DÉPÊCHE : un pli qu'on vient d'ouvrir — */
.chr-breve .chr-corps{background:var(--paper);border:1px solid var(--bord);
  border-radius:3px;padding:7px 13px 8px;
  border-top:2px solid var(--monde);}
.chr-breve .chr-texte{font-size:.8em;}

/* — L'ÉVÉNEMENT : une plaque qui alerte — */
.chr-evenement .chr-corps{background:var(--paper);border:1px solid var(--sang);
  border-left:4px solid var(--sang);border-radius:0 8px 8px 0;padding:8px 14px;}
.chr-evenement .chr-texte{font-size:.86em;}

/* — LE RÉCIT : pas un objet, le vide entre les objets — */
.chr-recit{margin:6px 0 20px;}
.chr-recit .chr-corps{background:none;border:none;padding:0 4px;}
.chr-recit .chr-texte{font-size:.8em;font-style:italic;color:var(--muted);}

/* — L'ACTE : un geste, sans cadre — */
.chr-acte .chr-texte{font-size:.84em;}
/* un acteur qui fait quelque chose : son médaillon se réveille sans s'illuminer comme s'il parlait */
.acteur.agit .medaillon{opacity:.85;filter:saturate(.8);
  transform:translate(-50%,-50%) scale(1.03);}

/* la scène suit la même matière */
.dit{font-size:1.1em;}
.pensee{font-family:var(--script);font-style:normal;font-size:.95em;color:var(--ink);
  background:var(--bleu-pensee);border:1px solid var(--bleu-bord);
  border-radius:18px 18px 18px 6px;padding:7px 15px 8px 34px;display:inline-block;}
.pensee::before{left:12px;top:7px;}

/* le nom ne s'affiche qu'une fois : sous le portrait. La pointe dit qui parle. */
.acteur .bulle .qui-parle{display:none;}

/* la barre d'action vit dans le fil, sous la chronique */
body{grid-template-columns:auto minmax(0,1fr) 430px;}
#fil{padding:14px 16px 14px;}
#fil-corps{min-height:0;}
#fil #attente{flex:none;padding:4px 0 2px;font-size:.78em;}
#fil #fil-actions{flex:none;border-top:1px solid var(--bord);padding:8px 0 0;margin-top:6px;}
#fil #mode-input{gap:5px;margin-bottom:6px;}
#fil #mode-input button{font-size:.72em;padding:4px 12px;}
#fil .libre{gap:8px;}
#fil .libre textarea{font-size:.86em;min-height:96px;padding:9px 12px;}
#fil .libre button{padding:9px 14px;font-size:.86em;}
@media (max-width:1100px){body{grid-template-columns:auto minmax(0,1fr);} #fil{display:flex;}}

/* la pointe suit le médaillon, même quand la bulle a été recalée dans le décor */
.acteur .bulle.pleine::before,
.acteur .bulle.pleine::after{left:var(--pointe,50%);transform:translateX(-50%);}

/* le fil au centre et large ; la carte à droite, la salle vue de loin */
#fil{order:2;}
#scene{order:3;}
body{grid-template-columns:auto minmax(0,2fr) minmax(300px,1fr);}
#bulle-recit{display:none;}

/* =========================================================
   ARRIVÉES — ce qui vient d'arriver se voit arriver.
   (Rien ne s'anime au rejeu de l'historique.)
   ========================================================= */
@keyframes entree-fil{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
.chr.entre{animation:entree-fil .5s cubic-bezier(.22,.9,.3,1) both;}
/* la gouttière arrive juste après le corps : le blason se pose */
@keyframes pose-blason{
  0%{opacity:0;transform:scale(.5);}
  60%{opacity:1;transform:scale(1.12);}
  100%{opacity:1;transform:none;}
}
.chr.entre .chr-icone{animation:pose-blason .45s ease-out .12s both;}

/* la bulle éclot au-dessus de celui qui parle */
@keyframes eclosion{
  0%{opacity:0;transform:scale(.82);}
  70%{opacity:1;transform:scale(1.03);}
  100%{opacity:1;transform:none;}
}
.acteur .bulle.pleine.eclot{animation:eclosion .34s cubic-bezier(.3,1.4,.5,1) both;
  transform-origin:50% 0;}
.acteur.bas .bulle.pleine.eclot{transform-origin:50% 100%;}

/* le médaillon de celui qui prend la parole se réveille */
@keyframes reveil{
  0%{box-shadow:0 0 0 0 var(--accent);}
  100%{box-shadow:0 0 0 14px transparent;}
}
.acteur.parle .medaillon svg{border-radius:50%;animation:reveil .7s ease-out;}

@media (prefers-reduced-motion: reduce){
  .chr.entre,.chr.entre .chr-icone,.acteur .bulle.pleine.eclot,
  .acteur.parle .medaillon svg{animation:none;}
}

/* la page de la carte ne porte plus de texte : la salle, rien que la salle */
.acteur .bulle{display:none !important;}
#bulle-monde,#bulle-vous,#bulle-pensee,#bulle-recit{display:none !important;}
#decor{flex:1 1 auto;}
.acteur .medaillon{opacity:.62;}
.acteur.parle .medaillon{opacity:1;}
/* le bouton d'un événement, dans le fil */
.bouton-evenement{display:block;margin-top:9px;padding:6px 14px;font-size:.78em;
  color:var(--sang);border-color:var(--sang);}

/* =========================================================
   ESPACE NÉGATIF DANS LE FIL — une colonne de lecture, du vide autour.
   ========================================================= */
#fil{padding:22px 28px 16px;}
#fil-corps{padding:10px 12px 28px 4px;}
/* la mesure de lecture est bornée et centrée : le reste est du silence */
.chr{max-width:600px;margin:0 auto 34px;gap:14px;grid-template-columns:32px minmax(0,1fr);}
.chr-corps{padding-top:1px;}
.chr-replique .chr-corps,.chr-vous .chr-corps{padding:11px 18px 13px;}
.chr-objectif .chr-corps{padding:11px 18px 13px;}
.chr-breve .chr-corps{padding:10px 16px 11px;}
.chr-evenement .chr-corps{padding:11px 18px 13px;}
.chr-texte{line-height:1.62;}
.chr-qui{margin:3px 0 3px;}
/* le récit respire davantage : c'est lui qui sépare les scènes */
.chr-recit{margin:14px auto 30px;}
.chr-recit .chr-texte{line-height:1.66;}
/* la barre d'écriture reprend la même mesure */
#fil #fil-actions{max-width:600px;margin:10px auto 0;width:100%;padding-left:46px;
  box-sizing:border-box;}
#fil #attente{max-width:600px;margin:0 auto;}

/* jalons de la chronique : le jour et le lieu, quand ils changent */
.jalon{max-width:600px;margin:34px auto 26px;display:flex;align-items:center;gap:14px;
  color:var(--muted);}
.jalon::before,.jalon::after{content:'';flex:1;height:1px;background:var(--bord);}
.jalon span{font-size:.66em;font-variant:small-caps;letter-spacing:.2em;white-space:nowrap;}
#fil-corps > .jalon:first-child{margin-top:4px;}

/* la colonne de lecture est portée par le conteneur : entrées, jalons et
   composeur s'alignent alors par construction (plus d'écart de barre de défilement) */
#fil-corps{max-width:600px;width:100%;margin:0 auto;padding:10px 0 28px;box-sizing:border-box;}
.chr{max-width:none;margin:0 0 34px;}
.jalon{max-width:none;margin:34px 0 26px;}
#fil #fil-actions{max-width:600px;margin:10px auto 0;padding-left:46px;padding-right:0;}
#fil #attente{max-width:600px;margin:0 auto;}

/* =========================================================
   REFONTE DU FIL — un seul système.
   Le portrait, le nom et la couleur portent le sens ; les cadres s'effacent.
   Deux surfaces pleines seulement : votre voix et vos pensées.
   ========================================================= */

/* remise à plat */
.chr .chr-corps{background:none;border:none;box-shadow:none;padding:0;border-radius:0;}
/* La gouttière du fil : un visage doit s'y reconnaître sans qu'on le cherche.
   À 34px on lisait une pastille, pas une tête — la gouttière passe à 64px.
   Les entrées qui n'ont pas de portrait (récit, brève, pensée) gardent leur
   emblème à sa taille : il se centre dans la case plus large, il ne gonfle
   pas avec elle. */
.chr .chr-icone{border:none;background:none;width:64px;height:64px;font-size:17px;}
.chr{grid-template-columns:64px minmax(0,1fr);gap:13px;margin:0 0 26px;}
.chr .chr-texte{font-size:.82em;line-height:1.6;}
.chr .chr-qui{font-size:.68em;letter-spacing:.14em;margin:0 0 2px;}

/* — la parole : un portrait, un nom, une phrase. Rien d'autre. — */
.chr-replique .chr-icone{width:64px;height:64px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px var(--bord);}
.chr-replique .chr-icone svg{width:100%;height:100%;}
.chr-replique .chr-qui{color:var(--accent);}
.chr-replique .chr-texte{font-size:.9em;color:var(--ink);}
.chr-replique .chr-texte::before,.chr-replique .chr-texte::after{content:none;}

/* — votre voix : la seule qui pose une surface, et elle se voit —
   Dans un fil où tout le reste est posé à plat, la parole du joueur doit se
   repérer d'un coup d'œil quand on remonte : une surface teintée à SA couleur,
   une tranche pleine à gauche, et un peu de relief. C'est le repère de lecture
   de la chronique — on cherche toujours « qu'est-ce que j'ai dit, moi ». */
:root{--vous-fond:rgba(109,85,144,.12); --vous-bord:rgba(109,85,144,.55);}
@media (prefers-color-scheme:dark){
  :root{--vous-fond:rgba(166,140,201,.16); --vous-bord:rgba(166,140,201,.6);}
}
.chr-vous .chr-corps{background:var(--vous-fond);border-radius:12px;
  padding:10px 16px 12px;border-left:3px solid var(--vous-bord);
  box-shadow:0 2px 10px -6px rgba(0,0,0,.45);}
.chr-vous .chr-qui{color:var(--pensee);font-weight:600;opacity:1;}
.chr-vous .chr-texte{font-size:.94em;color:var(--ink);}
.chr-vous .chr-texte::before,.chr-vous .chr-texte::after{content:none;}
.chr-vous .chr-icone{color:var(--pensee);}
/* un acte n'a pas de surface : c'est un geste, pas une parole */
.chr-acte .chr-corps{background:none;padding:0;}
.chr-acte .chr-texte{font-style:italic;color:var(--monde);font-size:.86em;}
.chr-acte .chr-icone{color:var(--monde);}

/* =========================================================
   CE QUI N'A PAS ENCORE ÉTÉ LU — la marque vit dans ce navigateur.
   Un joueur qui revient après une absence doit voir, sans compter, où sa
   lecture s'était arrêtée : un point sur le portrait, un fond à peine tiède.
   Rien ne clignote — ça s'éteint tout seul une fois l'entrée survolée.

   Une barre pleine sur toute la hauteur de l'entrée hurlait : elle doublait la
   tranche des bulles, dépassait des textes courts et coupait la colonne en
   deux. Le point se repère du coin de l'œil et ne dessine rien.
   ========================================================= */
.chr.neuf{position:relative;}
.chr.neuf .chr-icone{position:relative;}
.chr.neuf .chr-icone::after{content:'';position:absolute;right:4px;top:4px;
  width:8px;height:8px;border-radius:50%;background:var(--braise);
  box-shadow:0 0 0 2px var(--fond);}
/* les entrées qui posent déjà une surface (pensée, votre voix) gardent la
   leur : on ne les repeint pas, le point suffit à les signaler.
   Le fond est un CALQUE derrière le texte, pas un rembourrage : rembourrer la
   case d'une grille la décale (on l'a mesuré : 15px à gauche, 7 en haut), et
   une marque de lecture qui fait sauter la ligne qu'on lit est pire que pas de
   marque du tout. Là, rien ne bouge — c'est de la peinture. */
.chr.neuf:not(.chr-pensee):not(.chr-vous) .chr-corps{position:relative;}
.chr.neuf:not(.chr-pensee):not(.chr-vous) .chr-corps::before{content:'';
  position:absolute;left:-14px;right:-14px;top:-8px;bottom:-10px;z-index:-1;
  border-radius:12px;background:rgba(201,104,58,.07);pointer-events:none;}
.chr.neuf .chr-icone{filter:none;opacity:1;}
.chr.neuf .chr-qui{color:var(--braise);}

/* La lecture en cours : cinq secondes de survol, et la marque s'éteint pendant
   ces cinq secondes-là au lieu de sauter à la fin. Le joueur voit sa lecture
   être prise en compte — et s'il retire la main, tout se rallume d'un coup,
   ce qui dit sans un mot que le compte est reparti de zéro.
   Uniquement de la couleur et de l'opacité : rien qui touche à la mise en page. */
@keyframes lecture-fond{ from{opacity:1;} to{opacity:0;} }
@keyframes lecture-point{ from{opacity:1;transform:scale(1);}
  to{opacity:0;transform:scale(.4);} }
@keyframes lecture-nom{ from{color:var(--braise);} to{color:var(--muted);} }
.chr.neuf.lecture:not(.chr-pensee):not(.chr-vous) .chr-corps::before{
  animation:lecture-fond 5s linear forwards;}
.chr.neuf.lecture .chr-icone::after{animation:lecture-point 5s linear forwards;}
.chr.neuf.lecture .chr-qui{animation:lecture-nom 5s linear forwards;}
/* la main retirée : on se rallume franchement, sans traîner */
.chr .chr-qui{transition:color .25s;}
.chr .chr-corps::before{transition:opacity .25s;}
.chr .chr-icone::after{transition:opacity .25s,transform .25s;}

/* — la pensée : la note bleue, harmonisée — */
.chr-pensee .chr-corps{background:var(--bleu-pensee);border-radius:12px;
  padding:9px 15px 11px;border:none;}
.chr-pensee .chr-icone{color:var(--pensee);}
.chr-pensee .chr-texte{font-family:var(--script);font-size:.92em;font-style:normal;
  color:var(--ink);opacity:.92;line-height:1.5;}

/* — le récit : de la prose, et c'est tout — */
.chr-recit .chr-texte{font-style:italic;color:var(--muted);font-size:.84em;}
.chr-recit .chr-icone{color:var(--monde);opacity:.55;}

/* — la dépêche : un filet, pas une boîte — */
.chr-breve .chr-corps{border-left:1px solid var(--bord);padding:1px 0 1px 13px;}
.chr-breve .chr-texte{color:var(--muted);font-size:.8em;}
.chr-breve .chr-icone{color:var(--monde);}

/* — l'événement : le seul filet appuyé — */
.chr-evenement .chr-corps{border-left:2px solid var(--sang);padding:1px 0 3px 13px;}
.chr-evenement .chr-texte{font-size:.86em;color:var(--ink);}
.chr-evenement .chr-icone{color:var(--sang);}

/* — les desseins — */
.chr-objectif .chr-corps{border-left:2px solid var(--braise);padding:1px 0 3px 13px;}
.chr-objectif .chr-qui{color:var(--braise);}
.chr-objectif .chr-texte{font-size:.84em;}
.chr-objectif .chr-icone{color:var(--braise);}
.chr-objectif-accomplir .chr-corps{border-left-color:var(--monde);}
.chr-objectif-echouer .chr-corps{border-left-color:var(--sang);}

/* les jalons se font plus discrets que les entrées qu'ils annoncent */
.jalon{margin:30px 0 24px;}
.jalon span{opacity:.75;}

/* le temps qui a passé : une respiration, dite du bout des lèvres */
.jalon-temps span{font-variant:normal;font-style:italic;letter-spacing:.08em;opacity:.6;}
.jalon-temps{margin:38px 0 30px;}
.jalon-temps::before,.jalon-temps::after{opacity:.5;}
/* le lieu où l'on se tient : le seul repère qui a le droit d'être net */
.jalon-lieu span{color:var(--ink);opacity:.9;}
.jalon-lieu::before,.jalon-lieu::after{background:var(--accent);opacity:.35;}

/* =========================================================
   LE CONTENANT DU FIL — plus de boîte dans la boîte.
   La zone de défilement occupe toute la colonne (sa barre va au bord),
   c'est la LIGNE de lecture qui est bornée et centrée.
   ========================================================= */
#fil-corps{max-width:none;width:auto;margin:0;padding:10px 0 28px;
  overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;}
.chr{max-width:600px;margin:0 auto 26px;}
.jalon{max-width:600px;margin:30px auto 24px;}
#fil > .zone-titre{max-width:600px;margin:0 auto 10px;width:100%;}
#fil #fil-actions{width:100%;max-width:615px;margin:8px auto 0;
  padding:9px 15px 0 47px;box-sizing:border-box;}
#fil #attente{max-width:615px;margin:0 auto;}
/* rien ne doit forcer la colonne à s'élargir */
.chr,.chr *,.jalon{min-width:0;}
.chr-texte{overflow-wrap:anywhere;}

/* le titre suit la même mesure que les entrées (compense la gouttière de barre) */
#fil > .zone-titre{max-width:615px;padding-right:15px;box-sizing:border-box;}

/* le fil n'a plus de titre : la place revient au texte */
#fil{padding-top:14px;}
#fil-corps{padding-top:4px;}

/* ce qu'on est en train d'entendre : la ligne se réveille et son blason bat.
   Rien qui déborde de la gouttière — le fil rogne ce qui dépasse à gauche. */
.chr-dit .chr-texte{color:var(--ink);}
.chr-dit.chr-recit .chr-texte,.chr-dit.chr-breve .chr-texte,
.chr-dit.chr-acte .chr-texte,.chr-dit.chr-pensee .chr-texte{opacity:1;}
.chr-dit.chr-recit{opacity:1;}
.chr-dit .chr-corps{border-color:var(--braise);}
/* .chr.entre .chr-icone pose déjà une animation d'arrivée : il faut le même
   poids pour la remplacer, sinon le battement ne part jamais. */
.chr.chr-dit .chr-icone{border-color:var(--braise);
  animation:battement 2.4s ease-in-out infinite;}
@keyframes battement{
  0%,100%{box-shadow:0 0 0 0 rgba(224,130,74,.5);}
  50%{box-shadow:0 0 0 6px rgba(224,130,74,0);}
}
@media (prefers-reduced-motion:reduce){
  .chr.chr-dit .chr-icone{animation:none;box-shadow:0 0 0 2px rgba(224,130,74,.45);}
}

/* ── LA FLÈCHE DU FIL : du neuf plus bas (modules/defilement.js)
   Le joueur remonté dans la chronique n'est jamais ramené en bas de force ; la
   flèche est le seul endroit où on le lui propose, avec le compte de ce qu'il
   n'a pas vu. #fil est le repère de position. */
#fil-vers-bas{position:absolute;right:22px;bottom:96px;z-index:6;
  display:none;align-items:center;gap:6px;padding:5px 10px 5px 11px;
  font-family:inherit;font-size:.76em;letter-spacing:.04em;
  color:var(--fond,#12100e);background:var(--braise);
  border:0;border-radius:14px;cursor:pointer;
  box-shadow:0 3px 14px rgba(0,0,0,.45);opacity:0;transform:translateY(6px);
  transition:opacity .2s,transform .2s;}
#fil-vers-bas.visible{display:flex;opacity:.94;transform:translateY(0);}
#fil-vers-bas:hover{opacity:1;}
#fil-vers-bas svg{width:13px;height:13px;display:block;fill:none;
  stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.fil-bas-compte{font-variant-numeric:tabular-nums;font-weight:600;}

/* ── LE BOUTON DE VOIX : une ligne, un bouton (modules/voix.js)
   Cliquer le fait dire, recliquer l'arrête. Il doit SE VOIR sans qu'on le
   cherche : un rond cerclé, à droite du corps de la bulle. Pâle et discret ne
   marchait pas — à 35 % d'opacité sur ce fond, personne ne le trouvait.
   Flotté, donc aucun positionnement absolu et rien à changer aux bulles. */
.voix-bouton{float:right;margin:0 0 4px 12px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;gap:3px;
  width:24px;height:24px;box-sizing:border-box;
  background:var(--btn);border:1px solid var(--bord);border-radius:50%;
  cursor:pointer;color:var(--muted);opacity:.85;
  transition:opacity .18s,color .18s,background .18s,border-color .18s;}
.voix-bouton:hover{opacity:1;color:var(--accent);border-color:var(--accent);
  background:var(--btn-hover);}
.voix-bouton:focus-visible{outline:1px solid var(--accent);outline-offset:2px;opacity:1;}
.voix-bouton svg{width:13px;height:13px;display:block;fill:currentColor;
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.voix-bouton svg .onde{fill:none;opacity:.5;}

/* on cherche la voix : trois points, parce qu'une synthèse prend des secondes */
.voix-bouton.attend{opacity:1;cursor:default;color:var(--accent);
  border-color:var(--accent);}
.voix-bouton.attend i{width:3px;height:3px;border-radius:50%;background:currentColor;
  display:block;animation:voix-point 1.1s ease-in-out infinite;}
.voix-bouton.attend i:nth-child(2){animation-delay:.16s;}
.voix-bouton.attend i:nth-child(3){animation-delay:.32s;}
@keyframes voix-point{0%,70%,100%{opacity:.25;transform:translateY(0);}
  35%{opacity:1;transform:translateY(-2px);}}

/* on l'entend : braise pleine, ondes qui battent — un clic de plus l'arrête */
.voix-bouton.dit{opacity:1;color:var(--braise);border-color:var(--braise);
  box-shadow:0 0 0 3px rgba(224,130,74,.14);}
.voix-bouton.dit svg .onde{animation:voix-onde 1.5s ease-in-out infinite;}
.voix-bouton.dit svg .onde2{animation-delay:.25s;}
@keyframes voix-onde{0%,100%{opacity:.2;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .voix-bouton.attend i,.voix-bouton.dit svg .onde{animation:none;opacity:.8;}
}

/* les rôles : à côté du nom dans le fil, sous le nom sur la carte */
.chr-role{display:inline;font-variant:normal;text-transform:none;font-style:italic;
  letter-spacing:.02em;font-size:1.06em;color:var(--muted);}
.chr-role::before{content:' · ';font-style:normal;}
.acteur .qui .role{display:block;font-size:.8em;font-style:italic;color:var(--muted);
  opacity:.85;line-height:1.15;margin-top:1px;
  display:block;overflow:visible;}

/* l'emblème de fonction, devant le rôle */
.emb{font-style:normal;margin-right:5px;font-size:.95em;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;}
.chr-role .emb{margin-left:1px;}

/* la barre de défilement du fil se réduit à son seul indicateur */
#fil-corps::-webkit-scrollbar{width:5px;}
#fil-corps::-webkit-scrollbar-track{background:transparent;}
#fil-corps::-webkit-scrollbar-button{display:none;height:0;width:0;}
#fil-corps::-webkit-scrollbar-corner{background:transparent;}
#fil-corps::-webkit-scrollbar-thumb{background:var(--bord);border-radius:3px;}
#fil-corps::-webkit-scrollbar-thumb:hover{background:var(--braise);}
/* la gouttière réservée est désormais fine : le composeur suit la même mesure */
#fil #fil-actions{max-width:605px;padding-right:5px;}
#fil #attente{max-width:605px;}

#fil-corps::-webkit-scrollbar{width:5px;}
#fil #fil-actions{max-width:605px;padding-right:5px;}

/* ------- les annales : ce que l'Histoire retient (rouge et or) ------- */
.chr-marque{position:relative;margin:22px 0;padding:0;}
.chr-marque .chr-icone{color:#c9a227;border-color:#c9a227;}
.chr-marque .chr-corps{background:none;border:none;padding:10px 0 12px;
  border-top:2px solid transparent;border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--sang) 0%,#c9a227 55%,rgba(201,162,39,0) 100%) 1;}
.marque-coiffe{display:block;font-size:.62em;font-variant:small-caps;
  letter-spacing:.22em;color:#c9a227;margin-bottom:3px;}
.chr-marque .chr-texte{font-size:.92em;color:var(--ink);}
.chr-marque .chr-texte::before,.chr-marque .chr-texte::after{content:none;}
.annale{font-size:.82em;border-left:3px solid #c9a227;padding:3px 0 3px 10px;
  margin-bottom:10px;}
.annale-quand{display:block;font-size:.74em;font-variant:small-caps;
  letter-spacing:.1em;color:var(--muted);}
.annale-quoi{color:var(--ink);}

/* hors fiction : la question et sa réponse se tiennent en marge du récit */
#mode-input #mode-question.actif{color:var(--muted);border-color:var(--muted);
  background:var(--paper);}
.libre textarea.mode-question{border-left:3px dashed var(--muted);font-style:normal;}
.libre textarea.mode-question:focus{border-color:var(--muted);}
.chr-question .chr-corps,.chr-reponse .chr-corps{border-left:1px dashed var(--bord);
  padding:1px 0 2px 13px;}
.chr-question .chr-qui,.chr-reponse .chr-qui{color:var(--muted);}
.chr-question .chr-texte,.chr-reponse .chr-texte{font-size:.8em;color:var(--muted);}
.chr-question .chr-icone,.chr-reponse .chr-icone{opacity:.75;}

/* hors univers : la loge. Elle ne ressemble à rien d'autre dans le fil —
   sans-serif, cadre plein, pas de filet dans la marge : on doit voir d'un
   coup d'œil qu'on est sorti du récit et que rien de tout ça n'a eu lieu. */
#mode-input #mode-meta.actif{color:var(--loge);border-color:var(--loge);
  background:color-mix(in srgb,var(--loge) 12%,transparent);}
.libre textarea.mode-meta{border-left:3px solid var(--loge);font-style:normal;
  font-family:ui-sans-serif,system-ui,sans-serif;}
.libre textarea.mode-meta:focus{border-color:var(--loge);}
.chr-meta .chr-corps,.chr-coulisses .chr-corps{border-left:0;
  border:1px solid color-mix(in srgb,var(--loge) 45%,transparent);border-radius:7px;
  background:color-mix(in srgb,var(--loge) 7%,transparent);padding:7px 12px;margin:3px 0;}
.chr-meta .chr-qui,.chr-coulisses .chr-qui{color:var(--loge);
  font-variant:small-caps;letter-spacing:.1em;}
.chr-meta .chr-texte,.chr-coulisses .chr-texte{font-size:.82em;
  font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5;}
.chr-meta .chr-icone,.chr-coulisses .chr-icone{opacity:.8;}

/* les rênes lâchées : un liseré discret, jamais une réplique — on doit voir
   d'un coup d'œil que ce qui suit a été joué à la place du joueur */
#mode-input #mode-run.actif{color:#9a7bd0;border-color:#9a7bd0;
  background:color-mix(in srgb,#9a7bd0 12%,transparent);}
.libre textarea.mode-run{border-left:3px dotted #9a7bd0;font-style:normal;}
.libre textarea.mode-run:focus{border-color:#9a7bd0;}
.chr-run .chr-corps{border-left:1px dotted #9a7bd0;padding:1px 0 2px 13px;}
.chr-run .chr-qui{color:#9a7bd0;font-variant:small-caps;letter-spacing:.1em;}
.chr-run .chr-texte{font-size:.8em;color:var(--muted);font-style:italic;}
.chr-run .chr-icone{opacity:.75;}

/* l'intervention divine : une main par-dessus le monde. Or pâle, cadre plein
   et liseré à gauche — ni le récit, ni la loge : ici on ne commente pas la
   partie, on la corrige, et ce qui est écrit là fait foi. */
#mode-input #mode-intervention.actif{color:#e0b95a;border-color:#e0b95a;
  background:color-mix(in srgb,#e0b95a 12%,transparent);}
.libre textarea.mode-intervention{border-left:3px double #e0b95a;font-style:normal;
  font-family:ui-sans-serif,system-ui,sans-serif;}
.libre textarea.mode-intervention:focus{border-color:#e0b95a;}
.chr-intervention .chr-corps,.chr-reparation .chr-corps{border-left:3px solid #e0b95a;
  border-radius:0 7px 7px 0;background:color-mix(in srgb,#e0b95a 8%,transparent);
  padding:7px 12px;margin:3px 0;}
.chr-intervention .chr-qui,.chr-reparation .chr-qui{color:#e0b95a;
  font-variant:small-caps;letter-spacing:.1em;}
.chr-intervention .chr-texte,.chr-reparation .chr-texte{font-size:.82em;
  font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5;}
.chr-intervention .chr-icone,.chr-reparation .chr-icone{opacity:.85;}
/* ce qui a été touché : la liste courte de ce qui, désormais, fait foi */
.reparation-touche{margin:6px 0 0;padding-left:16px;list-style:"— ";}
.reparation-touche li{font-size:.78em;color:var(--muted);line-height:1.45;
  font-family:ui-sans-serif,system-ui,sans-serif;}

/* l'atelier de chanson : hors univers comme la loge, mais à l'encre du
   parchemin — une fiche posée sur la table, pas une réplique */
#mode-input #mode-composer.actif{color:#c8a24a;border-color:#c8a24a;
  background:color-mix(in srgb,#c8a24a 12%,transparent);}
.libre textarea.mode-composer{border-left:3px solid #c8a24a;font-style:normal;
  font-family:ui-sans-serif,system-ui,sans-serif;}
.libre textarea.mode-composer:focus{border-color:#c8a24a;}
.chr-composer .chr-corps{border-left:1px solid #c8a24a;padding:1px 0 2px 13px;}
.chr-composer .chr-qui{color:#c8a24a;font-variant:small-caps;letter-spacing:.1em;}
.chr-composer .chr-texte{font-size:.8em;color:var(--muted);font-style:italic;}
.chr-chanson .chr-corps{border-left:0;
  border:1px solid color-mix(in srgb,#c8a24a 45%,transparent);border-radius:7px;
  background:color-mix(in srgb,#c8a24a 7%,transparent);padding:7px 12px;margin:3px 0;}
.chr-chanson .chr-qui{color:#c8a24a;font-variant:small-caps;letter-spacing:.1em;}
.chr-chanson .chr-texte{font-size:.82em;
  font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5;}
.chanson-style{margin-top:6px;font-size:.74em;color:var(--muted);
  font-family:ui-monospace,monospace;line-height:1.4;}
.chanson-fichier{margin-top:5px;font-size:.72em;color:#c8a24a;opacity:.85;
  font-family:ui-monospace,monospace;}

/* =========================================================
   LES SUITES — ce qui s'offre après un « laisser faire ».
   Des lignes qu'on coche, pas des boutons de menu : sobres, alignées,
   sans relief tant qu'on n'y a pas posé la main.
   ========================================================= */
.chr-suites .chr-texte{font-variant:small-caps;letter-spacing:.09em;
  color:var(--muted);font-size:.82em;}
.suites{margin:10px 0 2px;}
.suites-liste{display:flex;flex-direction:column;gap:1px;}
.suite{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  padding:7px 10px;background:none;border:0;border-left:2px solid transparent;
  color:var(--ink);font:inherit;font-size:.84em;cursor:pointer;border-radius:0 4px 4px 0;}
.suite:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 5%,transparent);}
.suite-coche{flex:0 0 auto;width:11px;height:11px;margin-top:.32em;
  border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:2px;}
/* une exclusive se signale ronde : on n'en prend qu'une */
.suite-exclusive .suite-coche{border-radius:50%;}
.suite.prise{border-left-color:var(--braise);
  background:color-mix(in srgb,var(--braise) 9%,transparent);}
.suite.prise .suite-coche{background:var(--braise);
  border-color:var(--braise);}
.suite-detail{display:block;font-size:.86em;color:var(--muted);margin-top:2px;}
.suite:disabled{cursor:default;}
.suite.laissee{opacity:.4;text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent);}
.suites-pied{display:flex;gap:8px;align-items:center;margin-top:9px;}
.suites-tenir,.suites-ecarter{padding:5px 12px;font-size:.76em;}
.suites-tenir{color:var(--braise);border-color:var(--braise);}
.suites-tenir:disabled{opacity:.35;cursor:default;}
.suites-ecarter{color:var(--muted);border-color:color-mix(in srgb,var(--ink) 25%,transparent);}
.suites-verdict{font-size:.76em;color:var(--muted);font-style:italic;}

/* une médaille idiote, décernée avec tout le sérieux qu'elle ne mérite pas */
.medaille{display:block;margin:9px 0 2px;padding:9px 12px 10px;text-align:center;
  border:1px dashed color-mix(in srgb,var(--loge) 55%,transparent);border-radius:7px;}
.medaille-ruban{display:block;font-size:1.5em;line-height:1.2;}
.medaille-titre{display:block;font-size:.78em;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--loge);margin-top:3px;
  font-family:ui-sans-serif,system-ui,sans-serif;}
.medaille-citation{display:block;font-size:.76em;color:var(--muted);margin-top:5px;
  font-family:ui-sans-serif,system-ui,sans-serif;font-style:italic;}

/* =========================================================
   LA CARTE LOCALE — le château, salle par salle.
   Deux échelles d'une même table : #plan (où je suis, qui est à trois
   portes de moi) et #carte (où porte la guerre). Une bascule au-dessus du
   décor ; les médaillons des acteurs se tiennent par-dessus les deux.
   Le plan n'a qu'un cadrage : pas de --k ici, les épaisseurs sont en
   unités du viewBox et suivent l'agrandissement du plan déplié.
   ========================================================= */
#plan{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;}
#plan svg{max-height:100%;max-width:100%;width:auto;height:auto;display:block;cursor:pointer;}
.vue-off{display:none !important;}
#vue-bascule{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:6;
  display:flex;gap:3px;}
#vue-bascule button{font-size:.6em;padding:3px 11px;color:var(--muted);
  background:transparent;border-color:transparent;letter-spacing:.06em;}
#vue-bascule button.actif{color:var(--ink);background:var(--btn);border-color:var(--bord);}
#vue-bascule button:hover{color:var(--ink);}

.plan{font-family:Georgia,'Times New Roman',serif;font-size:10px;}
/* le dehors : la montagne au nord, la baie au sud */
.plan .plan-roche{fill:var(--paper);}
.plan .plan-mer{fill:var(--fond);stroke:var(--bord);stroke-width:.7;}
/* la vase : ni la terre ni l'eau, et elle change de camp deux fois par jour.
   Entre les deux teintes, donc, et bordée en pointillé — une limite de marée
   n'est pas une côte, elle se déplace pendant qu'on la regarde. */
.plan .plan-vase{fill:var(--paper);opacity:.55;stroke:var(--bord);
  stroke-width:.7;stroke-dasharray:5 3;stroke-opacity:.5;}
/* le relief du dehors : crêtes de la montagne, houle de la baie */
.plan .plan-arete{fill:none;stroke:var(--bord);stroke-width:.9;opacity:.3;
  stroke-linejoin:round;stroke-linecap:round;}
.plan .plan-vague{fill:none;stroke:var(--bord);stroke-width:.8;opacity:.42;
  stroke-linecap:round;}
/* la muraille, son crénelage et ses tours de guet */
.plan .plan-mur{fill:none;stroke:var(--bord);stroke-width:2.8;stroke-linejoin:round;}
.plan .plan-merlon{stroke:var(--bord);stroke-width:1.5;opacity:.8;}
.plan .plan-guet{fill:var(--fond);stroke:var(--bord);stroke-width:1.6;}
.plan .plan-dent{stroke:var(--bord);stroke-width:1.4;stroke-linecap:round;opacity:.85;}
/* une salle : un parchemin de plus par étage d'emboîtement, d'où le fondu
   naturel cour → salle → salle dans la salle (var(--paper) est translucide) */
.plan-salle{cursor:pointer;}
.plan-salle>circle,.plan-salle>rect,.plan-salle>path{
  fill:var(--paper);stroke:var(--bord);stroke-width:1.1;stroke-linejoin:round;
  transition:fill .15s,stroke .15s;}
.plan-salle.fond>path{stroke:none;}
/* pointillé : on monte ou on descend pour y aller (un plan est plat) */
.plan-salle.etage>circle,.plan-salle.etage>rect{stroke-dasharray:3 2.5;}
.plan-salle.dehors>rect,.plan-salle.dehors>path{opacity:.9;stroke-dasharray:4 2.5;}
/* le pictogramme de la salle : ce qui reste quand les noms sautent, sur la
   vignette étroite — un puits, un corbeau, sept branches, des flammes */
.plan-orne{fill:none;stroke:var(--muted);stroke-width:.9;opacity:.55;
  stroke-linejoin:round;stroke-linecap:round;pointer-events:none;}
.plan-orne .plein{fill:var(--muted);stroke:none;opacity:.72;}
.plan-detail{fill:none;stroke:var(--bord);stroke-width:.8;opacity:.5;pointer-events:none;}
.plan-salle:hover .plan-orne{stroke:var(--accent);opacity:.85;}
.plan-salle:hover .plan-orne .plein{fill:var(--accent);}
.plan-salle.ici .plan-orne{stroke:var(--braise);opacity:.95;}
.plan-salle.ici .plan-orne .plein{fill:var(--braise);opacity:.9;}
.plan-nom{fill:var(--muted);text-anchor:middle;font-size:1em;
  paint-order:stroke;stroke:var(--fond);stroke-width:2.6;stroke-linejoin:round;}
.plan-salle.etage .plan-nom{font-size:.92em;}
/* les gens sur le plan : le nom des présents ne s'écrit plus sous la salle,
   ce sont les taches qui le disent — et pour toutes les salles à la fois. */
.tache-gens.ici .tache{stroke:var(--braise);stroke-opacity:1;}
.leg-gens::before{content:"";display:inline-block;width:.62em;height:.62em;
  margin-right:.4em;border-radius:50% 46% 52% 48%;background:var(--braise);
  vertical-align:baseline;}
.plan-salle:hover>circle,.plan-salle:hover>rect,.plan-salle:hover>path{
  stroke:var(--accent);}
.plan-salle:hover .plan-nom{fill:var(--ink);}
/* la salle où l'on se tient : la braise, et elle respire */
.plan-salle.ici>circle,.plan-salle.ici>rect,.plan-salle.ici>path{
  stroke:var(--braise);stroke-width:2.2;stroke-dasharray:none;
  animation:pulse 2.8s infinite;}
.plan-salle.ici .plan-nom{fill:var(--ink);}
/* la salle qu'on vient de chercher des yeux : un halo d'accent, le temps de la
   trouver. Elle s'éteint seule — c'est de l'attention, pas une position. */
.plan-salle.vise>circle,.plan-salle.vise>rect,.plan-salle.vise>path{
  stroke:var(--accent);stroke-width:2;}
.plan-salle.vise .plan-nom{fill:var(--ink);}
.plan-salle.vise .plan-orne{stroke:var(--accent);opacity:.9;}
.plan-salle.vise .plan-orne .plein{fill:var(--accent);}
.plan-large{fill:var(--muted);opacity:.6;text-anchor:middle;font-size:1.15em;
  font-variant:small-caps;letter-spacing:.16em;}
.plan-eau{fill:var(--muted);opacity:.5;text-anchor:middle;font-size:.95em;font-style:italic;}
#plan-deplier{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  padding:3px 12px;font-size:.66em;color:var(--muted);font-style:italic;z-index:4;}

/* le plan déplié : même cadre que la table peinte */
#plan-large{position:fixed;inset:0;z-index:40;background:rgba(20,14,8,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
#plan-large[hidden]{display:none;}
#plan-cadre{background:var(--fond);border:1px solid var(--bord);border-radius:10px;
  box-shadow:0 0 0 6px var(--paper),0 18px 60px rgba(0,0,0,.5);
  padding:14px 22px 12px;max-width:94vw;max-height:94vh;box-sizing:border-box;
  display:flex;flex-direction:column;}
#plan-tete{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--bord);
  padding-bottom:8px;margin-bottom:6px;}
#plan-titre{font-variant:small-caps;letter-spacing:.14em;color:var(--ink);}
#plan-ou{flex:1;font-size:.78em;color:var(--muted);font-style:italic;}
#plan-fermer{font-size:.74em;padding:4px 12px;color:var(--muted);}
#plan-corps{flex:1;min-height:0;display:flex;justify-content:center;}
#plan-corps svg{height:calc(94vh - 118px);max-width:88vw;width:auto;cursor:default;}
#plan-legende{display:flex;gap:16px;justify-content:center;font-size:.7em;
  color:var(--muted);padding-top:6px;border-top:1px dotted var(--bord);}
#plan-legende .leg-note{font-style:italic;opacity:.75;}
#plan-legende .leg-etage::before{content:'┄ ';color:var(--muted);}
#plan-legende .leg-orne::before{content:'✦ ';color:var(--muted);opacity:.7;}

/* ------- Penser : peser la situation, dans sa propre voix ------- */
#mode-input #mode-penser.actif{color:var(--pensee);border-color:var(--pensee);
  background:var(--paper);}
.libre textarea.mode-penser{border-left:3px dotted var(--pensee);font-style:italic;}
.libre textarea.mode-penser:focus{border-color:var(--pensee);}

/* les emblèmes des boutons d'action ne rétrécissent pas avec le libellé */
#mode-input button .emb,#btn-libre .emb{font-size:1em;margin-right:5px;
  vertical-align:-1px;}
#mode-input button{display:inline-flex;align-items:center;}

/* =========================================================
   LES PRÉSENTS SOUS LA CARTE — plus de couronne.
   En couronne, les médaillons flottaient sur la table et la mangeaient par
   les bords ; l'ordre du flux était illisible. En bandeau sous les cartes,
   ils font une rangée de visages en face de soi, la table garde toute sa
   place, et l'ordre des présents est celui que le MJ a écrit.
   ========================================================= */
#decor{display:flex;flex-direction:column;gap:5px;position:static;}
#cartes{flex:1 1 auto;min-height:0;position:relative;}
#acteurs{position:static;inset:auto;flex:0 0 auto;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  gap:4px 2px;padding:7px 2px 0;border-top:1px dotted var(--bord);}
/* chaque présent : une colonne étroite, qui se serre quand la salle se remplit */
.acteur{position:static;width:auto;height:auto;flex:0 1 94px;min-width:56px;}
.acteur .medaillon{position:static;transform:none;width:100%;padding:0 1px;
  box-sizing:border-box;opacity:.62;}
.acteur .medaillon svg{width:52px;height:52px;}
.acteur .qui{font-size:.6em;margin-top:3px;}
.acteur .qui .role{font-size:.85em;}
/* le locuteur s'illumine sur place : plus de recentrage à compenser */
.acteur.parle .medaillon{opacity:1;transform:scale(1.06);}
.acteur.agit .medaillon{transform:scale(1.02);}
/* Les présents restent pleinement visibles : le silence ne délave plus les
   visages. Seul le locuteur se distingue, par l'échelle. */
.acteur .medaillon{transition:transform .18s;opacity:1;filter:none;}
/* ceux qu'on ne montre plus faute de place : une pastille, les noms au survol */
.acteur-reste{flex:0 1 62px;min-width:44px;align-self:center;cursor:default;}
.acteur-reste .medaillon{opacity:.5;display:flex;align-items:center;
  justify-content:center;min-height:52px;border:1px dotted var(--bord);
  border-radius:999px;padding:6px 4px;}
.acteur-reste .qui{margin:0;font-style:italic;}

/* La table ne flotte plus au milieu d'un vide : une seule échelle est visible
   à la fois, donc les deux calques peuvent reprendre le flux normal et #cartes
   se serre sur la carte affichée. Le bloc carte + visages tient d'un seul
   tenant, le vide restant passe au-dessus, sous le bandeau. */
#cartes{flex:0 1 auto;min-height:0;display:flex;flex-direction:column;}
#plan,#carte{position:static;flex:0 1 auto;min-height:0;}
#decor{justify-content:flex-end;}
/* la bascule coiffe la carte : posée en colonne, remontée en tête (le module
   l'ajoute après les calques) */
#vue-bascule{position:static;transform:none;order:-1;flex:none;margin:0 auto 3px;}

/* =========================================================
   L'ACTE — ce que vous faites laisse une marque rouge.
   Une parole se dit, un acte s'imprime : lavis de sang, tranche vive,
   et le sceau du geste dans la gouttière.
   ========================================================= */
:root{--rouge-acte:rgba(143,31,31,.09); --rouge-vif:#8f1f1f;}
@media (prefers-color-scheme: dark){
  :root{--rouge-acte:rgba(217,80,80,.13); --rouge-vif:#d95050;}
}
.chr-acte .chr-corps{background:var(--rouge-acte);border-left:3px solid var(--rouge-vif);
  border-radius:0 12px 12px 0;padding:9px 16px 11px;}
.chr-acte .chr-qui{color:var(--rouge-vif);letter-spacing:.16em;}
.chr-acte .chr-texte{font-style:italic;color:var(--ink);font-size:.88em;opacity:.95;}
.chr-acte .chr-texte::before,.chr-acte .chr-texte::after{content:none;}
.chr-acte .chr-icone{color:var(--rouge-vif);
  box-shadow:0 0 0 1px var(--rouge-vif) inset;border-radius:50%;
  background:var(--rouge-acte);}

/* le mode Agir porte la même couleur que la trace qu'il laisse */
#mode-input #mode-agir.actif{color:var(--rouge-vif);border-color:var(--rouge-vif);
  background:var(--rouge-acte);}
.libre textarea.mode-agir{border-left:3px solid var(--rouge-vif);}
.libre textarea.mode-agir:focus{border-color:var(--rouge-vif);}

/* Une salle qui se remplit resserre ses visages plutôt que d'avaler la table :
   à cinq, les médaillons rétrécissent ; à sept, le rôle s'efface et il ne reste
   que le nom — la table doit rester la plus grande chose de la colonne. */
#acteurs:has(.acteur:nth-child(5)) .acteur{flex-basis:78px;}
#acteurs:has(.acteur:nth-child(5)) .medaillon svg{width:44px;height:44px;}
#acteurs:has(.acteur:nth-child(7)) .acteur{flex-basis:64px;min-width:48px;}
#acteurs:has(.acteur:nth-child(7)) .medaillon svg{width:37px;height:37px;}
#acteurs:has(.acteur:nth-child(7)) .qui .role{display:none;}

/* La rose des vents du plan : une étoile creuse, sa branche nord pleine. */
.plan-rose path{fill:none;stroke:var(--bord);stroke-width:1.1;stroke-linejoin:round;}
.plan-rose .plan-rose-nord{fill:var(--muted);stroke:none;opacity:.7;}

/* ---------------------------------------------------------------
   LA PART DES COLONNES — la chronique ne sait pas quoi faire d'une
   colonne plus large que sa mesure de lecture (600 px) : au-delà, elle
   ne fabrique que de la marge, pendant que la table étouffe dans un
   tiers d'écran. On rééquilibre : le fil garde sa mesure, le décor
   prend le reste et la carte double de surface.
   --------------------------------------------------------------- */
@media (min-width:1101px){
  body{grid-template-columns:auto minmax(0,1fr) minmax(620px,1.15fr);}
}

/* =========================================================
   LE TERRAIN ET LA VILLE — le sol vu du dessus. Deux échelles, un seul dessin
   (ecrans/modules/terrain.js est instancié deux fois) : d'où les sélecteurs
   doublés #terrain/#ville ci-dessous.
   Là-haut, une pièce est un symbole et garde sa taille à l'écran ; ici, un
   homme occupe du SOL. Cercles et formations sont donc en unités du champ et
   grossissent quand on approche — seuls les textes, leurs décalages et les
   épaisseurs de trait suivent var(--k).
   ========================================================= */
#terrain,#ville{position:static;flex:0 1 auto;min-height:0;display:flex;
  align-items:center;justify-content:center;flex-direction:column;position:relative;}
#terrain svg,#ville svg{max-height:100%;max-width:100%;width:auto;height:auto;display:block;}
#terrain-deployer,#ville-deployer{position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  padding:3px 12px;font-size:.66em;color:var(--muted);font-style:italic;z-index:4;
  background:var(--fond);}
#terrain-legende-petite,#ville-legende-petite{display:none;}

/* =========================================================
   #ville3d — la ville en volume, là où le relief est modelé.
   Elle ne se serre pas comme un croquis : une perspective a besoin de hauteur,
   et une toile WebGL n'a pas de taille propre à qui se caler. D'où le
   flex:1 1 auto et la hauteur plancher — le contraire des SVG ci-dessus.
   ========================================================= */
#cartes:has(#ville3d:not(.vue-off)){flex:1 1 auto;}
#ville3d{position:relative;flex:1 1 auto;min-height:240px;overflow:hidden;
  background:#0b0e12;}
#ville3d canvas{display:block;width:100%;height:100%;cursor:grab;}
#ville3d canvas:active{cursor:grabbing;}
.ville3d-noms{position:absolute;inset:0;pointer-events:none;z-index:3;}
.ville3d-noms span{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;
  font-size:10px;color:#f2ead8;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.9);
  letter-spacing:.04em;padding-bottom:4px;}
.ville3d-noms span[data-genre="forteresse"],.ville3d-noms span[data-genre="monument"]{
  font-size:12px;color:#f6e9c4;letter-spacing:.08em;}
/* les noms que LA PARTIE a posés sur la ville (scripts/affecter.py --visible) :
   la taverne de Mag, le chantier du bout. Ils ne sont pas de la même nature que
   les portes et les collines — ceux-là, tout le monde les connaît ; ceux-ci, ce
   joueur-là les a appris. D'où la teinte chaude et le trait dessous : c'est du
   su, pas du donné. */
.ville3d-noms span[data-genre="affecte"]{
  color:#e8c98a;letter-spacing:.05em;
  border-bottom:1px solid rgba(232,201,138,.35);}
/* les noms des SALLES, à l'échelle du quartier (modules/monde/salles.js). Ils
   ne se posent pas comme un repère : un repère est un fanion planté (ancré par
   le bas, au-dessus de son point), un nom de salle est une légende de carte —
   il se pose SUR la pièce, centré, et il se lit sans qu'on aille le chercher au
   curseur. D'où la taille : c'est un plan qu'on regarde, pas une info-bulle. */
.ville3d-noms span.monde-salle{transform:translate(-50%,-50%);text-align:center;
  display:flex;flex-direction:column;gap:0;line-height:1.12;padding:0;
  font-size:12px;letter-spacing:.06em;transition:opacity .2s;}
.monde-salle b{color:#e6dcc6;font-weight:500;
  text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.95),0 0 16px rgba(0,0,0,.7);}
/* les salles clefs du plan — le donjon, la Table Peinte, la grande salle : plus
   grandes et plus chaudes, parce qu'un plan a besoin qu'on lise d'abord les
   trois noms qui orientent, et le reste ensuite. */
.monde-salle[data-cle] b{font-size:15px;color:#f6e9c4;letter-spacing:.1em;}
/* hors les murs : le quai, la grève, les lices. Même dessin, un ton en dessous —
   ce n'est pas le château, et la lecture doit le dire sans une ligne de plus. */
.monde-salle[data-dehors] b{color:#c9c2ae;font-weight:400;}
/* la pièce où l'on se tient : la même couleur que la balise. Le décor répond
   deux fois à « où suis-je ? » — le fanion le dit, le plan le montre. */
.monde-salle[data-ici="1"] b{color:#f6dc94;
  text-shadow:0 1px 2px #000,0 0 12px rgba(240,200,96,.5);}

/* la balise du joueur : un fanion d'or, plus fort que les noms de repères —
   c'est la seule marque qui parle de lui et non de la ville, et elle ne
   s'estompe pas avec la distance comme eux. */
.ville3d-noms span.monde-vous{transform:translate(-50%,-100%);text-align:center;
  display:flex;flex-direction:column;gap:1px;font-size:11px;padding-bottom:6px;
  pointer-events:auto;cursor:default;}
.monde-vous b{color:#f6dc94;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;font-size:.86em;
  text-shadow:0 1px 3px #000,0 0 12px rgba(240,200,96,.55);}
/* le nom de la SALLE ne se pose que sous le curseur : la balise répond « où
   suis-je ? » d'un mot d'or, et le détail vient quand on le demande. Un décor
   qui écrit en permanence le nom de la pièce où l'on se tient se commente
   lui-même. */
.monde-vous i{color:#e8dcc0;font-style:italic;font-size:.82em;opacity:0;
  text-shadow:0 1px 3px #000;transition:opacity .18s;}
.monde-vous:hover i{opacity:.85;}
/* collé au bord parce que le cadrage a laissé le joueur hors champ : on le dit
   en s'effaçant un peu, pour ne pas se faire prendre pour la vraie position. */
.monde-vous[data-hors="1"]{opacity:.5;}
/* les gens de la salle, en volume : un nom sous chaque corps. Plus discret que
   la balise du joueur — ce sont des présences, pas une réponse à une question */
.ville3d-noms span.monde-acteur{transform:translate(-50%,4px);text-align:center;
  display:flex;flex-direction:column;gap:0;font-size:10px;cursor:pointer;
  pointer-events:auto;}
.monde-acteur b{color:#e8dcc0;font-weight:500;font-size:.95em;
  text-shadow:0 1px 3px #000,0 0 8px #000;}
.monde-acteur i{color:var(--muted);font-style:italic;font-size:.8em;opacity:.8;
  text-shadow:0 1px 3px #000;}
.monde-acteur:hover b{color:#f6dc94;}
.monde-acteur[data-joueur] b{color:#f6dc94;letter-spacing:.04em;}
/* ce qu'il y a sous le curseur (modules/monde/survol.js) : le métier d'un toit,
   le nom d'une porte, la pièce qu'on montre du doigt. Ce n'est ni un repère
   (planté dans le monde) ni une légende de carte (posée sur la chose) : c'est
   une réponse à une question, et elle se tient au curseur, dans une boîte, le
   temps qu'on la lise. D'où le fond : elle doit se lire par-dessus n'importe
   quel toit sans qu'on aille chercher le contraste. */
.monde-survol{position:absolute;z-index:4;pointer-events:none;
  display:flex;flex-direction:row;align-items:center;gap:7px;max-width:240px;
  padding:4px 8px;border:1px solid rgba(232,201,138,.22);border-radius:3px;
  background:rgba(12,14,18,.82);box-shadow:0 2px 10px rgba(0,0,0,.55);}
\* le signe de l'espèce : une forge, une taverne, une roukerie se reconnaissent
   avant d'être lues. Il ne se souligne pas — c'est un <u> parce qu'il fallait
   une balise, pas parce que c'est un lien. */
.monde-survol u{text-decoration:none;font-size:15px;line-height:1;flex:0 0 auto;
  filter:saturate(.75);}
.monde-survol div{display:flex;flex-direction:column;gap:1px;min-width:0;}
.monde-survol b{color:#f2ead8;font-weight:500;font-size:11px;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.monde-survol i{color:var(--muted);font-style:italic;font-size:10px;opacity:.9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ville3d-voile{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  justify-content:center;background:#0b0e12;transition:opacity .6s;}
.ville3d-quoi{color:var(--muted);font-size:.78em;font-style:italic;}

/* le pré : un fond un rien plus chaud que le parchemin, pour que le champ ne
   se confonde pas avec la table peinte */
.champ .pre{fill:var(--paper);}
.sol-corps{fill:var(--paper);stroke:var(--bord);stroke-width:calc(.6px * var(--k));}
.sol-route .sol-corps{fill:none;stroke:var(--muted);opacity:.30;stroke-linecap:round;
  stroke-linejoin:round;}
.sol-route .sol-bord{fill:none;stroke:var(--bord);opacity:.5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:calc(6px * var(--k)) calc(4px * var(--k));}
/* la ville : de l'eau qu'on ne traverse pas, une grève, des murs, des quais */
.sol-eau .sol-corps{fill:var(--fond);opacity:.30;stroke:var(--bord);
  stroke-width:calc(.8px * var(--k));}
.sol-eau .sol-nom,.sol-greve .sol-nom{opacity:.75;}
.sol-greve .sol-corps{fill:var(--paper);opacity:.6;stroke:var(--bord);
  stroke-dasharray:calc(3px * var(--k)) calc(3px * var(--k));}
.sol-mur .sol-corps{fill:none;stroke:var(--ink);opacity:.7;stroke-linecap:square;
  stroke-linejoin:miter;}
.sol-mur .sol-bord{fill:none;stroke:var(--bord);opacity:.35;stroke-linejoin:miter;}
.sol-quai .sol-corps{fill:none;stroke:var(--muted);opacity:.5;stroke-linecap:butt;}
.sol-quai .sol-bord{fill:none;stroke:var(--bord);opacity:.45;stroke-linecap:butt;}
.sol-riviere .sol-corps{fill:none;stroke:var(--fond);opacity:.9;stroke-linecap:round;}
.sol-riviere .sol-bord{fill:none;stroke:var(--bord);opacity:.55;stroke-linecap:round;}
.sol-haie .sol-corps{fill:none;stroke:var(--monde);opacity:.5;stroke-linecap:round;}
.sol-haie .sol-bord{fill:none;stroke:none;}
.sol-bois .sol-corps{fill:var(--monde);fill-opacity:.10;stroke:var(--monde);
  stroke-opacity:.35;}
.sol-bois .arbre{fill:var(--monde);fill-opacity:.28;stroke:var(--monde);
  stroke-opacity:.45;stroke-width:calc(.5px * var(--k));}
.sol-champ .sol-corps{fill:var(--paper);fill-opacity:.55;stroke:var(--bord);
  stroke-opacity:.35;stroke-width:calc(.5px * var(--k));
  stroke-dasharray:calc(3px * var(--k)) calc(3px * var(--k));}
.sol-marais .sol-corps{fill:var(--fond);fill-opacity:.6;stroke:var(--bord);
  stroke-dasharray:calc(2px * var(--k)) calc(4px * var(--k));}
.sol-colline .sol-corps{fill:none;stroke:var(--muted);stroke-opacity:.32;
  stroke-dasharray:calc(5px * var(--k)) calc(3px * var(--k));}
.sol-colline .niveau{fill:none;stroke:var(--muted);stroke-opacity:.35;
  stroke-width:calc(.6px * var(--k));stroke-dasharray:calc(4px * var(--k)) calc(3px * var(--k));}
.sol-village .toit{fill:var(--paper);stroke:var(--muted);stroke-opacity:.6;
  stroke-width:calc(.7px * var(--k));}
.sol-nom{font-family:inherit;font-size:.92em;fill:var(--muted);font-style:italic;
  text-anchor:middle;paint-order:stroke;stroke:var(--fond);
  stroke-width:calc(2.4px * var(--k));stroke-linejoin:round;opacity:.85;}

/* les corps : un cercle vaut toujours le même nombre d'hommes */
.corps{cursor:pointer;}
.corps .homme{fill:currentColor;fill-opacity:.34;stroke:currentColor;stroke-opacity:.85;}
.corps-archers .homme,.corps-prisonniers .homme{fill-opacity:0;}
.corps .monte{fill:currentColor;fill-opacity:.9;stroke:none;}
.corps .dragon .aile{fill:currentColor;fill-opacity:.22;stroke:currentColor;stroke-opacity:.8;
  stroke-linejoin:round;}
.corps .dragon .echine{fill:currentColor;fill-opacity:.55;stroke:currentColor;stroke-opacity:.9;}
.corps .dragon .queue{fill:none;stroke:currentColor;stroke-opacity:.8;stroke-linecap:round;}
.corps .dragon .museau{fill:currentColor;fill-opacity:.8;stroke:none;}
.corps:hover .dragon .aile{fill-opacity:.4;}
.corps .cap{fill:none;stroke:currentColor;stroke-opacity:.55;stroke-linecap:round;
  stroke-linejoin:round;}
.corps:hover .homme{fill-opacity:.55;stroke-opacity:1;}
.corps-prisonniers{color:var(--muted);}
.corps-prisonniers .homme{stroke-dasharray:calc(1.6px * var(--k)) calc(1.2px * var(--k));}
.etat-ebranle .homme{stroke-opacity:.65;}
.etat-rompu .homme,.etat-fuite .homme{fill-opacity:.16;stroke-opacity:.6;}
.etat-mort .homme{fill-opacity:.5;stroke:none;}
.corps-nom{font-family:inherit;font-size:.92em;fill:var(--ink);
  font-variant:small-caps;letter-spacing:.06em;paint-order:stroke;stroke:var(--fond);
  stroke-width:calc(2.6px * var(--k));stroke-linejoin:round;}
.corps-compte{font-variant:normal;fill:var(--muted);}

/* les acteurs : qui se tient où. Une tache d'encre de sa couleur, ses
   initiales dedans. La couleur vient du fichier (style inline sur le groupe) —
   le CSS ne fait que la porter. */
.tache-gens{cursor:pointer;}
.tache-gens .tache{fill:currentColor;fill-opacity:.88;stroke:var(--fond);stroke-opacity:.9;
  stroke-linejoin:round;}
/* les lettres restent claires dans les deux thèmes : la tache est toujours
   une encre saturée, jamais un fond */
.tache-gens .initiales{fill:#f6efe2;text-anchor:middle;font-family:inherit;
  font-weight:600;letter-spacing:.02em;stroke:none;pointer-events:none;}
.tache-gens:hover .tache{fill-opacity:1;stroke:var(--ink);stroke-opacity:.85;}
.tache-gens.cert-rapportee .tache{fill-opacity:.5;stroke-dasharray:2 1.6;}
.tache-gens.cert-rumeur .tache{fill-opacity:.28;stroke-dasharray:1.4 2.4;}
.tache-gens.cert-rapportee .initiales,.tache-gens.cert-rumeur .initiales{fill-opacity:.8;}
/* le signe de l'office, en pastille à l'épaule droite */
.tache-gens .office-fond{fill:var(--fond);stroke:currentColor;stroke-opacity:.75;}
.tache-gens .office{text-anchor:middle;stroke:none;pointer-events:none;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",inherit;}
.tache-gens.cert-rapportee .office-fond,.tache-gens.cert-rumeur .office-fond{opacity:.6;}
.tache-joueur .halo{fill:none;stroke:currentColor;stroke-opacity:.5;}
.tache-joueur .tache{stroke:var(--ink);stroke-opacity:.75;}

/* ce qui est arrivé au sol */
.brulure{fill:var(--ink);fill-opacity:.20;stroke:var(--ink);stroke-opacity:.35;
  stroke-width:calc(.7px * var(--k));}
.cendre{fill:var(--ink);fill-opacity:.45;stroke:none;}
.mort{stroke:var(--sang);stroke-opacity:.65;stroke-linecap:round;}
.fers{fill:none;stroke:var(--sang);stroke-opacity:.8;stroke-linecap:round;}
.fait-nom{font-family:inherit;font-size:.86em;fill:var(--muted);font-style:italic;
  text-anchor:middle;paint-order:stroke;stroke:var(--fond);
  stroke-width:calc(2.4px * var(--k));stroke-linejoin:round;}

.leg-cercle{font-style:italic;}
.leg-cercle::before{content:'◌ ';font-style:normal;}

/* le champ déployé */
#terrain-large,#ville-large{position:fixed;inset:0;z-index:40;background:rgba(20,14,8,.55);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;}
#terrain-large[hidden],#ville-large[hidden]{display:none;}
#terrain-cadre,#ville-cadre{background:var(--fond);border:1px solid var(--bord);border-radius:10px;
  box-shadow:0 0 0 6px var(--paper),0 18px 60px rgba(0,0,0,.5);
  padding:14px 22px 12px;max-width:94vw;max-height:94vh;box-sizing:border-box;
  display:flex;flex-direction:column;}
#terrain-tete,#ville-tete{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--bord);
  padding-bottom:8px;margin-bottom:6px;}
#terrain-titre,#ville-titre{font-variant:small-caps;letter-spacing:.14em;color:var(--ink);}
#terrain-quand,#ville-quand{flex:1;font-size:.78em;color:var(--muted);font-style:italic;}
#terrain-fermer,#ville-fermer{font-size:.74em;padding:4px 12px;color:var(--muted);}
#terrain-corps,#ville-corps{flex:1;min-height:0;display:flex;justify-content:center;}
#terrain-corps svg,#ville-corps svg{height:calc(94vh - 118px);max-width:88vw;width:auto;}
#terrain-legende,#ville-legende{display:flex;gap:16px;justify-content:center;font-size:.7em;
  color:var(--muted);padding-top:6px;border-top:1px dotted var(--bord);
  flex-wrap:wrap;align-items:center;}

/* =========================================================
   LA COULEUR DE LA TABLE — un lavis sur le parchemin.
   Les régions gardent le grain du papier : leurs teintes sont posées en
   TRANSPARENCE par-dessus, jamais en aplat. La mer est le seul fond franc,
   parce qu'une côte qui ne sépare rien de rien ne se lit pas.
   ========================================================= */
:root{
  --mer:#c3d2d6; --hautfond:#d6e1e2;
  --t-nord:rgba(146,170,182,.26); --t-mur:rgba(200,218,228,.42);
  --t-val:rgba(150,142,176,.24); --t-conflans:rgba(126,158,110,.26);
  --t-fer:rgba(116,128,134,.30); --t-ouest:rgba(190,158,86,.26);
  --t-couronne:rgba(178,124,96,.13); --t-bief:rgba(178,180,94,.28);
  --t-orage:rgba(92,128,104,.28); --t-dorne:rgba(212,170,106,.32);
}
@media (prefers-color-scheme: dark){
  :root{
    --mer:#141d24; --hautfond:#1d2a31;
    --t-nord:rgba(130,158,178,.20); --t-mur:rgba(170,196,212,.26);
    --t-val:rgba(142,130,178,.20); --t-conflans:rgba(112,150,104,.20);
    --t-fer:rgba(122,136,146,.22); --t-ouest:rgba(190,156,84,.20);
    --t-couronne:rgba(186,124,92,.12); --t-bief:rgba(176,176,90,.20);
    --t-orage:rgba(88,128,102,.22); --t-dorne:rgba(206,164,100,.24);
  }
}
.mer{fill:var(--mer);}
.hautfond{fill:none;stroke:var(--hautfond);stroke-linejoin:round;}
.terre{fill:var(--fond);}
.eaux{fill:var(--mer);stroke:var(--hautfond);}
/* sur la table en couleur, une rivière est de l'eau, pas un trait d'encre */
.rivieres{fill:var(--mer);stroke:var(--mer);opacity:.62;}
.region-terre[data-region="the_north"]{fill:var(--t-nord);}
.region-terre[data-region="the_wall"]{fill:var(--t-mur);}
.region-terre[data-region="the_vale"]{fill:var(--t-val);}
.region-terre[data-region="the_riverlands"]{fill:var(--t-conflans);}
.region-terre[data-region="the_iron_islands"]{fill:var(--t-fer);}
.region-terre[data-region="the_westerlands"]{fill:var(--t-ouest);}
.region-terre[data-region="the_crownlands"]{fill:var(--t-couronne);}
.region-terre[data-region="the_reach"]{fill:var(--t-bief);}
.region-terre[data-region="the_stormlands"]{fill:var(--t-orage);}
.region-terre[data-region="dorne"]{fill:var(--t-dorne);}
.lointain{fill:var(--paper);opacity:.5;}
/* le nom d'un lieu se détache maintenant sur de la couleur : son halo doit
   être celui de la terre, pas celui de la page */
.lieu-carte .nom{stroke:var(--fond);}

/* ------- les bannières : les armes de qui tient la place ------- */
.banniere .hampe{fill:none;stroke:var(--ink);stroke-width:.7;opacity:.55;
  stroke-linecap:round;}
.banniere .pli{fill:none;stroke:var(--ink);stroke-width:.6;opacity:.45;}
.banniere .toile rect{shape-rendering:crispEdges;}
.armes{pointer-events:none;}
.lieu-carte:hover .banniere .pli{opacity:.9;stroke-width:.9;}

/* Des convives ne sont pas des troupes : le rond est là (ils occupent du sol)
   mais il est vide et sans poids — on doit voir d'un coup d'œil, dans une cour,
   qui est en armes et qui tient une coupe. */
.corps-convives .homme{fill-opacity:.10;stroke-opacity:.55;}
.corps-convives:hover .homme{fill-opacity:.28;stroke-opacity:.9;}
/* la ville : des gens qui ne sont pas des troupes, et des coques */
.corps-gens .homme{fill-opacity:.14;stroke-opacity:.6;}
.corps-gens:hover .homme{fill-opacity:.32;stroke-opacity:.95;}
.corps .nef .coque{fill:currentColor;fill-opacity:.30;stroke:currentColor;
  stroke-opacity:.85;stroke-linejoin:round;}
.corps .nef .banc{stroke:currentColor;stroke-opacity:.7;
  stroke-width:calc(.8px * var(--k));}
.corps:hover .nef .coque{fill-opacity:.5;}

/* =========================================================
   LES GENS — la quatrième échelle du décor. Une carte porte des lieux,
   celle-ci porte des visages : qui est qui, de quel côté, à quel titre.
   Rien de plus que ce que la cour sait de la cour — ni position, ni
   dessein. On la lit comme un armorial : par camp, puis par maison.
   ========================================================= */
#gens{position:static;flex:1 1 auto;min-height:220px;display:flex;flex-direction:column;
  gap:6px;overflow:hidden;}
.gens-barre{flex:none;display:flex;}
.gens-barre input{flex:1;font:inherit;font-size:.72em;padding:4px 10px;
  color:var(--ink);background:transparent;border:1px solid var(--bord);border-radius:3px;}
.gens-barre input:focus{outline:none;border-color:var(--muted);}
.gens-corps{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:4px;}
.gens-vide{font-size:.72em;color:var(--muted);font-style:italic;padding:6px 2px;}
.gens-camp{margin-bottom:12px;}
.gens-camp-titre{font-size:.6em;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--bord);padding-bottom:2px;margin-bottom:6px;}
.gens-camp.camp-noir .gens-camp-titre{color:var(--ink);}
.gens-camp.camp-vert .gens-camp-titre{color:var(--rouge-vif);}
.gens-maison{margin:0 0 8px;}
.gens-maison-titre{font-size:.66em;font-style:italic;color:var(--muted);margin-bottom:3px;}
.gens-rang{display:flex;flex-wrap:wrap;gap:4px 2px;}
.gens-gars{flex:0 1 150px;min-width:136px;display:flex;flex-direction:column;
  align-items:center;text-align:center;cursor:pointer;opacity:.66;
  transition:opacity .15s,transform .15s;padding:2px 1px;}
.gens-gars:hover{opacity:1;transform:scale(1.04);}
/* le visage porte la vue : on reconnaît une cour à ses têtes, pas à ses
   légendes. Trois fois la mesure d'avant (44px) — la fiche s'élargit d'autant
   pour ne pas rogner le nom. */
.gens-gars svg{width:132px;height:132px;display:block;}
.gens-dit{margin-top:2px;line-height:1.15;}
.gens-dit b{display:block;font-size:.62em;font-weight:600;}
.gens-dit small{display:block;font-size:.55em;color:var(--muted);}
.gens-dit small .emb{margin-right:3px;font-size:1.05em;}
.gens-gars.gens-joueur{opacity:1;}
.gens-gars.gens-joueur .gens-face{box-shadow:0 0 0 1px var(--muted);border-radius:50%;}
/* la vue des gens n'est pas une carte : elle prend toute la colonne */
#cartes:has(#gens:not(.vue-off)){flex:1 1 auto;}
#gens{min-height:120px;}


/* l'heure de la fiction, à côté de la date : un signe et un mot, pas un cadran */
#heure{flex:none;color:var(--muted);font-size:.92em;letter-spacing:.02em;
  white-space:nowrap;}

/* L'écart de front entre les deux joueurs : une pastille minuscule à côté de
   l'heure, verte si l'on devance, ambrée si l'on traîne. Elle n'apparaît qu'au
   delà de cinq heures — le reste du temps, la barre n'a rien de plus. */
.ecart{flex:none;font-size:.74em;font-weight:600;letter-spacing:.03em;
  padding:1px 6px;border-radius:9px;white-space:nowrap;line-height:1.5;
  border:1px solid transparent;}
.ecart.avance{color:#7fc98a;border-color:rgba(127,201,138,.35);background:rgba(127,201,138,.10);}
.ecart.retard{color:#d9a05b;border-color:rgba(217,160,91,.35);background:rgba(217,160,91,.10);}

/* ------- rétrospective : l'album de la partie, en plein écran ------- */
.retro-ouvrir{width:100%;padding:8px 6px;font-size:.82em;margin-bottom:8px;}
#retro{position:fixed;inset:0;z-index:900;background:rgba(10,8,6,.88);
  display:flex;align-items:center;justify-content:center;padding:3vh 3vw;
  box-sizing:border-box;animation:retro-fondu .25s;}
@keyframes retro-fondu{from{opacity:0}to{opacity:1}}
.retro-cadre{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:14px;max-width:min(1100px,92vw);width:100%;}
.retro-plaque{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;}
.retro-image{max-width:100%;max-height:66vh;object-fit:contain;
  border:1px solid var(--bord);border-radius:3px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);background:#000;}
.retro-manque{width:100%;height:38vh;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--bord);border-radius:3px;color:var(--muted);
  font-style:italic;font-size:.9em;}
.retro-legende{max-width:70ch;text-align:center;color:var(--ink);}
.retro-quand{font-size:.72em;font-variant:small-caps;letter-spacing:.14em;color:var(--muted);}
.retro-titre{font-size:1.25em;margin:6px 0 8px;color:var(--braise);}
.retro-texte{font-size:.95em;line-height:1.55;}
.retro-lieu{margin-top:8px;font-size:.76em;font-style:italic;color:var(--muted);}
.retro-fermer{position:absolute;top:-2px;right:-2px;width:34px;height:34px;
  font-size:1.2em;line-height:1;padding:0;}
.retro-prec,.retro-suiv{position:absolute;top:32%;width:42px;height:60px;
  font-size:1.6em;line-height:1;padding:0;opacity:.55;}
.retro-prec{left:-54px;} .retro-suiv{right:-54px;}
.retro-prec:hover,.retro-suiv:hover{opacity:1;}
@media (max-width:900px){.retro-prec{left:0;} .retro-suiv{right:0;}}
.retro-pied{display:flex;align-items:center;gap:14px;}
.retro-pastilles{display:flex;gap:7px;}
.retro-pastille{width:9px;height:9px;padding:0;border-radius:50%;
  background:var(--btn);border:1px solid var(--bord);}
.retro-pastille.ici{background:var(--braise);border-color:var(--braise);}
.retro-compte{font-size:.72em;color:var(--muted);letter-spacing:.1em;}
.retro-pourquoi{margin-top:14px;text-align:left;border-top:1px dotted var(--bord);padding-top:12px;}
.retro-pourquoi p{margin:0;font-size:.88em;line-height:1.65;color:var(--ink);}

/* ------- le cabinet des médailles : un ruban, pas une image ------- */
#retro.retro-medailles .retro-plaque{max-width:62ch;}
.retro-ruban{position:relative;width:100%;box-sizing:border-box;
  padding:30px 34px 26px;text-align:center;border-radius:3px;
  border:1px solid var(--bord);border-top:3px solid var(--braise);
  background:var(--fond);box-shadow:0 18px 50px rgba(0,0,0,.5);}
.ruban-embleme{font-size:2.6em;line-height:1;margin-bottom:14px;}
.ruban-titre{font-size:1.2em;color:var(--braise);letter-spacing:.03em;}
.ruban-a{margin-top:6px;font-size:.76em;font-variant:small-caps;
  letter-spacing:.14em;color:var(--muted);}
.ruban-citation{margin-top:16px;padding-top:14px;border-top:1px dotted var(--bord);
  font-size:.9em;line-height:1.65;text-align:left;color:var(--ink);}

/* =========================================================
   LA PENSÉE — une vraie bulle de pensée.
   Contour souple et irrégulier, bord pointillé (ce n'est dit à
   personne), et deux bulles qui remontent du portrait vers elle.
   ========================================================= */
.chr-pensee .chr-corps{position:relative;overflow:visible;
  background:var(--bleu-pensee);
  border:1px dashed var(--bleu-bord);
  border-radius:22px 26px 20px 24px / 26px 20px 24px 22px;
  padding:11px 18px 12px;margin-left:4px;}
/* les deux petites bulles de la queue, en escalier vers la gauche */
.chr-pensee .chr-corps::before,
.chr-pensee .chr-corps::after{content:'';position:absolute;border-radius:50%;
  background:var(--bleu-pensee);border:1px dashed var(--bleu-bord);}
.chr-pensee .chr-corps::before{width:9px;height:9px;left:-7px;bottom:9px;}
.chr-pensee .chr-corps::after{width:5px;height:5px;left:-14px;bottom:1px;}
/* le médaillon suit la même main que la bulle */
.chr-pensee .chr-icone{color:var(--pensee);border:1px dashed var(--bleu-bord);
  border-radius:50%;background:var(--bleu-pensee);}
/* on l'entend : la bulle se réveille sans changer de nature */
.chr-dit.chr-pensee .chr-corps{border-color:var(--braise);}
.chr-dit.chr-pensee .chr-corps::before,
.chr-dit.chr-pensee .chr-corps::after{border-color:var(--braise);}

/* ── LES MARQUES : noms et positions de ce qui est ACTIF (modules/monde/marques.js)
   Ce ne sont ni les repères de la géographie, ni les noms de salles : ce sont
   des CROYANCES. La table peinte les porte déjà sous ses filtres ; le volume
   les portait pas du tout, et un joueur qui basculait de la carte au monde
   perdait d'un coup tout ce qu'il savait de qui est où.
   La CERTITUDE se lit sans qu'on lise le détail — c'est tout l'objet du style :
   plein pour ce qu'on tient de ses yeux, estompé pour ce qu'on rapporte,
   fantôme et penché pour ce qui n'est qu'une rumeur. */
.monde-marque{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;
  pointer-events:none;padding:2px 7px 3px;border-radius:2px;
  background:rgba(12,12,16,.62);border-left:2px solid rgba(232,201,138,.55);
  text-shadow:0 1px 3px #000;line-height:1.25;}
.monde-marque b{display:block;font-size:11px;font-weight:600;color:#f2ead8;
  letter-spacing:.04em;}
/* la place, quand elle est ailleurs : on ne fait pas semblant d'y aller,
   on dit de quel côté c'est */
.monde-marque i{display:block;font-size:9px;font-style:normal;color:#c8b58a;
  letter-spacing:.06em;text-transform:uppercase;}
/* la provenance, écrite en clair par le serveur : « il y a 4 jours — de vos
   yeux — votre époux ». C'est la réponse à « comment je sais ça ». */
.monde-marque em{display:block;font-size:9px;font-style:normal;
  color:rgba(200,190,170,.62);letter-spacing:.02em;max-width:210px;
  overflow:hidden;text-overflow:ellipsis;}
.monde-marque.loin{border-left-color:rgba(160,175,200,.45);}
.monde-marque.loin b{color:#dfe4ee;}
.monde-marque.certitude-rapportee{border-left-style:dashed;}
.monde-marque.certitude-rumeur{border-left-style:dotted;
  border-left-color:rgba(190,150,150,.4);}
.monde-marque.certitude-rumeur b{font-style:italic;color:#d8ccc0;}
.monde-marque.genre-dragon b{color:#e9b98a;letter-spacing:.08em;}
.monde-marque.genre-incident{border-left-color:rgba(214,120,80,.7);}
.monde-marque.genre-incident b{color:#eec0a0;}

/* =========================================================
   LA BARRE D'ÉCRITURE PREND TOUTE LA COLONNE.
   La chronique garde sa mesure de lecture (600 px) parce qu'on la LIT ;
   le composeur, lui, on y écrit — le brider à la même largeur ne laissait
   qu'une fente au milieu d'une colonne large. Il s'étale d'un bord à l'autre.
   ========================================================= */
#fil #fil-actions{max-width:none;width:100%;margin:8px 0 0;
  padding:9px 0 0;box-sizing:border-box;}
#fil #attente{max-width:none;margin:0;}

/* =========================================================
   LES PRÉSENTS EN COLONNE, CONTRE LE FIL.
   Sous la carte, ils étaient à l'autre bout de l'écran : on lisait une
   réplique à droite et l'on cherchait le visage tout à gauche. Rangés
   verticalement le long de la chronique, le locuteur qui s'illumine est à
   hauteur de la ligne qu'on lit — et la carte récupère toute sa colonne.
   ========================================================= */
body{grid-template-columns:auto auto minmax(0,2fr) minmax(300px,1fr);}
#acteurs{order:1;height:100vh;box-sizing:border-box;
  position:static;inset:auto;
  display:flex;flex-direction:column;flex-wrap:nowrap;
  align-items:stretch;justify-content:flex-start;
  gap:6px;width:104px;padding:16px 8px;
  border-top:none;border-right:1px solid var(--bord);
  overflow-y:auto;overflow-x:hidden;}
/* la colonne disparaît quand la salle est vide : pas de gouttière fantôme */
#acteurs:empty{display:none;}
/* la bascule de tri. Elle porte `pointer-events` à elle seule — la colonne,
   elle, laisse passer les clics.
   Elle est le DERNIER enfant du DOM — les seuils de densité du CSS comptent
   les enfants de #acteurs et un bouton en tête les décalerait tous — mais
   `order:-1` la remonte en TÊTE de colonne, là où on la voit. */
.acteurs-tri{flex:0 0 auto;order:-1;align-self:stretch;width:auto;
  pointer-events:auto;cursor:pointer;
  background:var(--fond2,rgba(255,255,255,.06));
  border:1px solid var(--braise,var(--bord));border-radius:4px;
  color:var(--ink);font:inherit;font-size:.6em;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 4px;margin-bottom:4px;
  white-space:nowrap;transition:background .2s,color .2s;}
.acteurs-tri:hover{background:var(--braise,var(--accent));color:#111;}
#acteurs::-webkit-scrollbar{width:0;}

/* chaque présent : une case de hauteur libre, le visage puis le nom dessous.
   Plus de `flex-basis` — c'était la mesure d'une rangée horizontale. */
#acteurs .acteur{flex:0 0 auto;width:auto;min-width:0;}
#acteurs .acteur .medaillon{width:100%;padding:0;}
#acteurs .acteur .medaillon svg{width:48px;height:48px;}
#acteurs .acteur .qui{font-size:.58em;margin-top:2px;
  overflow-wrap:anywhere;}
#acteurs .acteur-reste{flex:0 0 auto;align-self:stretch;}
#acteurs .acteur-reste .medaillon{min-height:0;padding:5px 4px;}

/* Une salle pleine se serre en hauteur, pas en largeur : la colonne a la
   place d'un visage, jamais celle de douze en grand. */
#acteurs:has(.acteur:nth-child(6)) .acteur .medaillon svg{width:40px;height:40px;}
#acteurs:has(.acteur:nth-child(6)) .acteur .qui .role{display:none;}
#acteurs:has(.acteur:nth-child(8)){gap:3px;}
#acteurs:has(.acteur:nth-child(8)) .acteur .medaillon svg{width:34px;height:34px;}

/* le décor n'a plus de bandeau à porter : la carte prend toute la hauteur */
#decor{justify-content:stretch;}
#decor #cartes{flex:1 1 auto;}

/* À l'étroit, le fil s'efface déjà : les visages le suivent, ils n'ont pas de
   sens sans la chronique en face. */
@media (max-width:1100px){
  body{grid-template-columns:auto minmax(0,1fr);}
  #acteurs{display:none;}
}

/* =========================================================
   LES PRÉSENTS AU-DESSUS DE LA CASE D'ÉCRITURE.
   En colonne le long du fil, ils mangeaient une gouttière entière et
   poussaient la chronique vers la droite. Posés en rangée juste au-dessus
   du composeur, on voit à qui l'on parle à l'instant où l'on tape, et la
   grille retombe à trois colonnes : le rail, le décor, le fil.
   ========================================================= */
body{grid-template-columns:auto minmax(0,1fr) minmax(620px,1.15fr);}
#acteurs{order:0;position:static;inset:auto;height:auto;width:auto;
  display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:flex-end;justify-content:flex-start;
  gap:8px;padding:4px 0 7px;margin:0;
  border-right:none;border-bottom:1px solid var(--bord);
  overflow-x:auto;overflow-y:hidden;}
#acteurs::-webkit-scrollbar{height:0;}
#acteurs .acteur{flex:0 0 auto;width:auto;text-align:center;}
#acteurs .acteur .medaillon{width:auto;}
#acteurs .acteur .medaillon svg{width:42px;height:42px;}
#acteurs .acteur .qui{font-size:.56em;margin-top:2px;max-width:76px;
  overflow-wrap:anywhere;}
#acteurs .acteur-reste{align-self:center;}
/* une salle pleine se serre en largeur : les visages rétrécissent, le rôle
   s'efface, mais la rangée ne passe jamais à la ligne. */
#acteurs:has(.acteur:nth-child(7)) .acteur .medaillon svg{width:34px;height:34px;}
#acteurs:has(.acteur:nth-child(7)) .acteur .qui .role{display:none;}
#acteurs:has(.acteur:nth-child(10)){gap:5px;}
#acteurs:has(.acteur:nth-child(10)) .acteur .medaillon svg{width:28px;height:28px;}
@media (max-width:1100px){
  body{grid-template-columns:auto minmax(0,1fr);}
  #acteurs{display:flex;}
}

/* =========================================================
   LES PRÉSENTS : DE NOUVEAU UNE COLONNE, À GAUCHE DU TEXTE — AVEC LES TITRES.
   La rangée au-dessus du composeur perdait les rôles dès qu'on était plus de
   six, et les visages s'éloignaient de la réplique qu'on lit. Colonne contre
   la chronique, le locuteur illuminé est à hauteur de sa ligne, et chacun
   garde son titre : c'est ce qui dit à qui l'on parle.
   ========================================================= */
body{grid-template-columns:auto auto minmax(0,1fr) minmax(560px,1.1fr);}
#acteurs{order:1;position:static;inset:auto;height:100vh;box-sizing:border-box;
  display:flex;flex-direction:column;flex-wrap:nowrap;
  align-items:stretch;justify-content:flex-start;
  gap:7px;width:118px;padding:16px 9px;margin:0;
  border-bottom:none;border-right:1px solid var(--bord);
  overflow-y:auto;overflow-x:hidden;}
#acteurs .acteur{flex:0 0 auto;width:auto;text-align:center;}
#acteurs .acteur .medaillon{width:100%;padding:0;}
#acteurs .acteur .medaillon svg{width:46px;height:46px;}
#acteurs .acteur .qui{font-size:.58em;margin-top:3px;max-width:none;
  overflow-wrap:anywhere;}
/* le titre ne s'efface plus : une salle pleine serre les visages, pas les rôles */
#acteurs .acteur .qui .role{display:block;font-size:.9em;opacity:.75;
  font-style:italic;line-height:1.25;}
#acteurs .acteur-reste{align-self:stretch;}
#acteurs:has(.acteur:nth-child(7)) .acteur .medaillon svg{width:38px;height:38px;}
#acteurs:has(.acteur:nth-child(10)){gap:4px;}
#acteurs:has(.acteur:nth-child(10)) .acteur .medaillon svg{width:32px;height:32px;}
@media (max-width:1100px){
  body{grid-template-columns:auto minmax(0,1fr);}
  #acteurs{display:none;}
}

/* un visage qu'on peut interpeller se sait cliquable : la main, et le
   médaillon qui se réchauffe sous le curseur. */
#acteurs .acteur.adressable{cursor:pointer;}
#acteurs .acteur.adressable .medaillon{transition:transform .12s,filter .12s;}
#acteurs .acteur.adressable:hover .medaillon{transform:translateY(-1px);
  filter:brightness(1.12);}
#acteurs .acteur.adressable:active .medaillon{transform:none;}

/* =========================================================
   LA LIGNE DU FIL, UNE FOIS LE PORTRAIT AGRANDI.
   Une tête de 64px à côté d'un nom de 10px et d'une bulle collée en haut,
   c'était deux objets posés l'un près de l'autre, pas une ligne. Trois
   corrections, et rien de plus :
     • le visage porte un cerclage chaud au lieu d'un trait sec ;
     • le nom et la bulle s'appuient au MILIEU du portrait, pas à son sommet,
       et la bulle pointe vers lui ;
     • les entrées SANS portrait (récit, brève, pensée) ne laissent plus une
       case vide de 64px : leur emblème tient dans un petit disque centré.
   ========================================================= */

/* — le visage — */
.chr-replique .chr-icone,.chr-vous .chr-icone,.chr-acte .chr-icone{
  border:none;background:var(--fond);
  box-shadow:0 0 0 1px var(--bord),0 0 0 4px rgba(0,0,0,.05),
             0 2px 7px rgba(0,0,0,.16);
  transition:box-shadow .25s,transform .25s;}
.chr-replique .chr-icone svg,.chr-vous .chr-icone svg,.chr-acte .chr-icone svg{
  width:100%;height:100%;display:block;}
/* celui qui vient de parler : le cerclage s'allume, sans bondir */
.chr.chr-dit .chr-icone{
  box-shadow:0 0 0 1px var(--braise),0 0 0 5px rgba(201,104,58,.14),
             0 3px 10px rgba(0,0,0,.2);}

/* — la ligne s'équilibre sur le milieu du visage — */
.chr{align-items:start;gap:15px;}
.chr-replique,.chr-vous,.chr-acte{margin-bottom:30px;}
.chr-replique .chr-corps,.chr-vous .chr-corps,.chr-acte .chr-corps{
  padding-top:9px;}

/* — la bulle pointe vers celui qui parle — */
.chr-replique .chr-corps{position:relative;background:var(--paper);
  border:1px solid var(--bord);border-radius:3px 14px 14px 14px;
  padding:7px 15px 9px;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.chr-replique .chr-corps::before{content:'';position:absolute;
  left:-7px;top:16px;width:12px;height:12px;transform:rotate(45deg);
  background:var(--paper);border-left:1px solid var(--bord);
  border-bottom:1px solid var(--bord);}
.chr-replique .chr-qui{margin:0 0 3px;}

/* — les entrées sans visage : un disque discret, pas un trou — */
.chr-recit .chr-icone,.chr-breve .chr-icone,.chr-pensee .chr-icone,
.chr-evenement .chr-icone,.chr-marque .chr-icone,.chr-objectif .chr-icone,
.chr-question .chr-icone,.chr-reponse .chr-icone,.chr-coulisses .chr-icone,
.chr-meta .chr-icone,.chr-run .chr-icone,.chr-intervention .chr-icone,
.chr-reparation .chr-icone{
  width:30px;height:30px;margin:6px auto 0;font-size:15px;
  border:1px solid var(--bord);border-radius:50%;background:var(--paper);}
.chr-recit .chr-icone,.chr-breve .chr-icone{border-style:dotted;}

/* — « Les gens » rangés par rencontre — */
.gens-barre{gap:5px;align-items:stretch;}
.gens-tri{flex:none;cursor:pointer;font:inherit;font-size:.6em;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  padding:4px 9px;border-radius:3px;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--braise);
  transition:background .2s,color .2s;}
.gens-tri:hover{background:var(--braise);color:#111;}
/* le nom de la salle porte plus que celui d'une maison : c'est un repère de
   mémoire, pas une étiquette. On le pose droit, en petites capitales. */
.gens-salle .gens-maison-titre{font-style:normal;font-variant:small-caps;
  letter-spacing:.1em;color:var(--ink);opacity:.8;
  border-bottom:1px dotted var(--bord);padding-bottom:2px;}
.gens-jamais{margin-top:14px;opacity:.55;}
.gens-jamais .gens-maison-titre{font-style:italic;}

/* — les visages de « Les gens » ne sont plus délavés — */
/* Ils étaient à 66% d'opacité pour faire ressortir le personnage joué : à
   44px la nuance passait, à 132px on lit une galerie de fantômes. Tout le
   monde est plein ; c'est le cerclage, et lui seul, qui distingue le joueur. */
.gens-gars{opacity:1;}
.gens-gars:hover{transform:scale(1.03);}
.gens-gars .gens-face{border-radius:50%;box-shadow:0 0 0 1px var(--bord),
  0 2px 6px rgba(0,0,0,.14);transition:box-shadow .2s;}
.gens-gars:hover .gens-face{box-shadow:0 0 0 1px var(--braise),
  0 3px 9px rgba(0,0,0,.2);}
.gens-gars.gens-joueur .gens-face{box-shadow:0 0 0 2px var(--braise),
  0 0 0 5px rgba(201,104,58,.16),0 3px 9px rgba(0,0,0,.2);}

/* ── LA NAPPE ─────────────────────────────────────────────────────────────
   La toile blanche jetée sur la table peinte, et les pièces de bois qu'on y
   pousse. Seule échelle du décor que le joueur écrit lui-même : d'où le curseur
   qui dit « on peut prendre » partout, et la craie plutôt que l'encre. */
#nappe{position:relative;}
.np-toile{width:100%;display:block;border-radius:3px;cursor:crosshair;
  touch-action:none;user-select:none;}
.np-fond{fill:#efe7d6;}
.np-craie{stroke:#b9ad92;stroke-width:2;stroke-dasharray:9 7;}
.np-bord{fill:#8a7f66;font-size:17px;letter-spacing:2px;font-family:Georgia,serif;}
.np .np-corps{stroke:#4a4033;stroke-width:2;}
.np{cursor:grab;}
.np-tenue .np-corps{stroke:#b4763a;stroke-width:3.4;}
.np-texte,.np-vide{text-anchor:middle;font-family:Georgia,serif;font-size:13px;fill:#2f2a22;}
.np-vide{fill:#8a7f66;font-style:italic;}
/* la forme AVANT la couleur : les teintes ne font que confirmer la silhouette */
.np-affaire .np-corps{fill:#efe4cb;}
.np-etat    .np-corps{fill:#e6ddc6;}
.np-verrou  .np-corps{fill:#3a3230;}
.np-verrou  .np-texte,.np-verrou .np-vide{fill:#f0e6d6;}
.np-clef    .np-corps{fill:#e9dcc0;}
.np-action  .np-corps{fill:#efe9db;}
.np-moyen   .np-corps{fill:#dfe6df;}
.np-office  .np-corps{fill:#dcdfe9;stroke-width:3.6;}
.np-deplier{position:absolute;right:6px;bottom:6px;font-size:.62em;
  background:rgba(20,16,12,.72);color:var(--parchemin,#e8ddc5);border:1px solid #6b5f4a;
  border-radius:3px;padding:2px 7px;cursor:pointer;}
#nappe-large{position:fixed;inset:0;background:rgba(10,8,6,.86);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:2vh 2vw;}
#nappe-large[hidden]{display:none;}
.np-cadre{width:100%;max-width:1500px;position:relative;}
.np-barre{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap;}
.np-outil{width:44px;height:30px;padding:0;background:rgba(30,24,18,.6);
  border:1px solid #6b5f4a;border-radius:3px;cursor:pointer;}
.np-outil svg{width:100%;height:100%;}
.np-outil path{fill:#e6ddc6;stroke:#4a4033;stroke-width:3;}
.np-outil.actif{border-color:#b4763a;background:rgba(180,118,58,.24);}
.np-aide{font-size:.58em;color:var(--muted,#9b8d70);margin-left:6px;}
.np-vider{margin-left:auto;font-size:.6em;background:rgba(30,24,18,.6);
  color:var(--parchemin,#e8ddc5);border:1px solid #6b5f4a;border-radius:3px;
  padding:3px 9px;cursor:pointer;}
.np-grande{max-height:88vh;}
/* la grande toile : l'établi à gauche — ce qui est déjà écrit dans les livres —,
   la nappe à droite. On ne recopie rien : on prend une pièce et on la pose. */
.np-corps-large{display:flex;gap:10px;align-items:flex-start;}
.np-corps-large .np-toile{flex:1;min-width:0;}
.np-stocks{flex:0 0 244px;max-height:88vh;overflow-y:auto;
  background:rgba(20,16,12,.55);border:1px solid #4a4033;border-radius:3px;padding:6px;}
.np-cherche{width:100%;box-sizing:border-box;margin-bottom:6px;font-size:.62em;
  background:rgba(10,8,6,.7);color:var(--parchemin,#e8ddc5);
  border:1px solid #6b5f4a;border-radius:3px;padding:4px 6px;font-family:inherit;}
.np-groupe{font-size:.55em;letter-spacing:.08em;color:var(--braise,#b4763a);
  margin:8px 0 3px;border-bottom:1px solid rgba(180,118,58,.25);}
.np-stock{display:block;width:100%;text-align:left;font-size:.6em;line-height:1.25;
  margin-bottom:2px;padding:3px 5px;cursor:pointer;border-radius:2px;
  border:1px solid transparent;border-left:3px solid #6b5f4a;
  background:rgba(40,32,24,.5);color:var(--parchemin,#e8ddc5);font-family:inherit;}
.np-stock:hover{background:rgba(60,48,34,.7);}
.np-stock.pret{border-color:#b4763a;background:rgba(180,118,58,.26);}
.np-stock b{color:var(--muted,#9b8d70);font-size:.9em;}
.np-s-etat{border-left-color:#c9bda0;}
.np-s-verrou{border-left-color:#3a3230;}
.np-s-clef{border-left-color:#c2ac7e;}
.np-s-action{border-left-color:#8a7f66;}
.np-s-moyen{border-left-color:#6f9a7a;}
.np-s-office{border-left-color:#7a86ad;}
.np-s-affaire{border-left-color:#b4763a;}
.np-rien{font-size:.6em;color:var(--muted,#9b8d70);font-style:italic;padding:6px 2px;}
/* porter au registre : le seul endroit d'où la toile écrit dans les livres.
   Barre discrète sous les outils, et qui n'apparaît que sur une pièce de craie
   écrite — pas de formulaire permanent pour un geste occasionnel. */
.np-porter{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;
  padding:5px 8px;border:1px solid #6b5f4a;border-left:3px solid var(--braise,#b4763a);
  border-radius:3px;background:rgba(30,24,18,.6);font-size:.6em;}
.np-porter-non{color:var(--muted,#9b8d70);font-style:italic;border-left-color:#6b5f4a;}
.np-p-quoi{color:var(--parchemin,#e8ddc5);}
.np-porter select,.np-porter input{font-size:1em;font-family:inherit;padding:3px 5px;
  background:rgba(10,8,6,.7);color:var(--parchemin,#e8ddc5);
  border:1px solid #6b5f4a;border-radius:2px;}
.np-p-parent{width:170px;}
.np-p-office{width:110px;}
.np-p-moyens{width:150px;}
.np-p-ok{font-size:1em;font-family:inherit;padding:3px 12px;cursor:pointer;
  border:1px solid var(--braise,#b4763a);border-radius:2px;
  background:rgba(180,118,58,.24);color:var(--parchemin,#e8ddc5);}
.np-p-dit{color:var(--braise,#b4763a);font-style:italic;}