/* Le Theatre — carte de strategie GvG.
   Page autonome : elle ne charge pas styles.css, qui pese 72 Ko pour une
   application dont rien n'est utilise ici. Les quelques variables du theme
   sont recopiees ci-dessous. */

/* color-scheme indique au navigateur que la page est sombre : sans lui, la
   liste deroulante native s'ouvre sur fond blanc et herite de la couleur de
   texte claire du select — texte blanc sur blanc, rien de lisible.
   Signale par Florian le 26/08. */
:root{
  color-scheme:dark;
  --bg:#08090c;
  --panel:#11131a;
  --panel-2:#171923;
  --line:rgba(219,190,144,.15);
  --line-strong:rgba(219,190,144,.32);
  --text:#f4ecdf;
  --muted:#a8a0ac;
  --purple:#7840b9;
  --purple-soft:#9a65d2;
  --gold:#d7b47b;
  --gold-light:#f1d7a6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  color:var(--text);
  font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;               /* la carte gere son propre deplacement */
}

/* ---------- Bandeau ---------- */
.th-tete{
  flex:none;
  /* Le bandeau passe a la ligne plutot que de pousser les derniers boutons
     hors de l'ecran : sur 1600 px, "Joueurs" et "Recadrer" disparaissaient
     purement et simplement. */
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  padding:8px 14px;
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.th-retour{
  color:var(--muted);text-decoration:none;font-weight:600;
  padding:6px 11px;border:1px solid var(--line);border-radius:9px;white-space:nowrap;
  transition:.18s;
}
.th-retour:hover{color:#fff;border-color:rgba(255,255,255,.18)}

.th-titre{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.th-titre h1{
  margin:0;font-size:17px;font-weight:650;
  color:var(--gold-light);letter-spacing:.3px;
}
.th-chantier{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--gold);background:rgba(215,180,123,.12);
  border:1px solid var(--line-strong);border-radius:999px;padding:2px 8px;
}

.th-outils{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Presets de phase ---------- */
.th-seg{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:3px}
.th-seg button{
  appearance:none;border:0;background:none;cursor:pointer;
  color:var(--muted);font:inherit;font-weight:600;
  padding:6px 11px;border-radius:7px;transition:.18s;white-space:nowrap;
}
.th-seg button:hover{color:#fff}
.th-seg button.on{
  color:var(--gold-light);
  background:linear-gradient(90deg,rgba(120,64,185,.3),rgba(215,180,123,.09));
  box-shadow:inset 0 0 0 1px rgba(120,64,185,.3);
}

/* Plans d'une phase — 5.10.1
   Largeur pleine dans .th-outils, qui enveloppe : la barre tombe seule a la
   ligne suivante et demarre au bord gauche de .th-outils, donc juste sous
   les boutons de phase. Ni fond ni bordure — le bandeau reste un seul bloc. */
.th-plans{width:100%;display:flex;justify-content:flex-start;margin-top:-2px}
.th-plans .th-seg button{min-width:32px;text-align:center;padding:5px 10px}
/* « + » et « × » vivent dans le segment pour en reprendre l'habillage. Ils
   ne portent jamais .on : ce sont des actions, pas un plan selectionne. */
.th-plans .th-plan-act{color:var(--muted);font-weight:700;font-size:15px;line-height:1}
.th-plans .th-plan-act:hover{color:var(--gold-light)}
.th-plans .th-plan-suppr:hover{color:#e0899a}
/* Fenetre d'export : les plans d'une meme phase sont regroupes, sinon dix
   cases a cocher d'affilee ne disent plus a quoi elles se rapportent. */
.th-x-groupe{margin:6px 0 10px}
.th-x-groupe > b{display:block;margin-bottom:4px;color:var(--gold-light);font-size:13px}

/* La jungle est un interrupteur separe : changer de phase ne doit pas
   l'eteindre, on veut pouvoir superposer la route de jungle a n'importe
   quelle phase. */
.th-bascule{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-weight:600;color:var(--muted)}
.th-bascule input{
  appearance:none;margin:0;cursor:pointer;
  width:38px;height:21px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid var(--line);
  position:relative;transition:.2s;
}
.th-bascule input::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--muted);transition:.2s;
}
.th-bascule input:checked{background:rgba(120,64,185,.45);border-color:rgba(120,64,185,.6)}
.th-bascule input:checked::after{left:20px;background:var(--gold)}
.th-bascule input:checked + span{color:var(--gold-light)}

/* ---------- Zoom ---------- */
.th-zoom{display:flex;align-items:center;gap:6px}
.th-zoom button{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;
  color:var(--muted);background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:9px;
  width:32px;height:32px;line-height:1;transition:.18s;
}
.th-zoom button:hover{color:#fff;background:rgba(255,255,255,.08)}
.th-zoom button.th-recadrer{width:auto;padding:0 12px;font-weight:600;font-size:13px}
#thNiveau{min-width:52px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums;font-size:12.5px}

/* ---------- Plateau ---------- */
.th-scene{
  flex:1;position:relative;overflow:hidden;
  background:var(--bg);
  cursor:grab;
  /* Sans ces trois lignes, le navigateur croit qu'on veut glisser une image
     ou selectionner du texte : il attrape le fond ou une pastille et
     promene un fantome au lieu de laisser la carte se deplacer. */
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.th-scene.th-tire{cursor:grabbing}

.th-plateau{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  /* PAS de will-change:transform ici, ni de filtre sur les pastilles.
     L'un comme l'autre font fabriquer au navigateur une image unique qu'il
     etire ensuite a la carte graphique au lieu de la redessiner : tout
     devient flou au zoom et ne redevient net qu'au premier clic, qui force
     un redessin. Signale par Florian le 26/08. */
}
.th-carte{display:block;width:1430px;height:1100px;pointer-events:none}
/* Les pastilles SVG sont draggables nativement elles aussi, et
   -webkit-user-drag est ignore par Firefox : la seule protection qui vaut
   dans tous les navigateurs est le preventDefault sur dragstart, cote JS. */
.th-carte,.th-couche image{-webkit-user-drag:none;user-drag:none}
.th-couche{position:absolute;top:0;left:0;width:1430px;height:1100px;overflow:visible}

/* Les pastilles sont dans le plateau : elles grossissent avec la carte,
   comme des objets du terrain et non comme des reperes d'interface. */
.th-obj{opacity:0;pointer-events:none;transition:opacity .18s}
.th-obj.on{opacity:1;pointer-events:auto}
.th-obj image{image-rendering:auto}

.th-etiq{display:none}
.th-obj:hover .th-etiq{display:block}
.th-etiq rect{fill:rgba(8,9,12,.94);stroke:var(--line-strong)}
.th-etiq text{fill:var(--text);font:600 15px system-ui,sans-serif;text-anchor:middle}

.th-aide{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  margin:0;padding:5px 13px;border-radius:999px;
  background:rgba(8,9,12,.78);border:1px solid var(--line);
  color:var(--muted);font-size:12px;pointer-events:none;
}

/* L'edition au doigt est inutilisable : sur petit ecran on garde la carte
   consultable mais on retire les outils qui ne servent qu'a composer. */
@media (max-width:820px){
  .th-tete{flex-wrap:wrap;gap:10px}
  .th-outils{margin-left:0;width:100%;justify-content:space-between;flex-wrap:wrap}
  .th-seg button{padding:6px 9px;font-size:13px}
}

/* ============================================================
   4.2.0 — panneau des joueurs et pions
   ============================================================ */

.th-corps{flex:1;display:flex;min-height:0}
.th-scene{flex:1;min-width:0}

/* Selecteur de strat, dans le bandeau */
.th-doc{display:flex;align-items:center;gap:8px}
.th-tete select,.th-panneau select,.th-panneau input{
  font:inherit;color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:9px;
  padding:6px 9px;max-width:200px;
}
/* Certains navigateurs ne suivent pas color-scheme pour le contenu de la
   liste : on habille les options explicitement, en plus. */
.th-tete option,.th-panneau option{background:#11131a;color:#f4ecdf}
.th-tete select:focus,.th-panneau select:focus,.th-panneau input:focus{
  outline:none;border-color:var(--line-strong)
}
/* #thVoirLegende et #thPanneau vivent hors du bloc de zoom : la classe
   .th-recadrer n'y est pas stylee, il faut les nommer ici. Le banc l'a
   rattrape, un bouton au rendu natif du navigateur. */
.th-doc button,#thPanneau,#thVoirLegende,#thExporter,#thVider,#thViderTraits{
  font:inherit;font-weight:600;cursor:pointer;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:9px;padding:6px 11px;transition:.18s;white-space:nowrap;
}
.th-doc button:hover,#thPanneau:hover,#thVoirLegende:hover,#thExporter:hover{color:#fff;background:rgba(255,255,255,.08)}
.th-doc .th-danger:hover{color:#fff;background:rgba(209,104,121,.22);border-color:rgba(209,104,121,.4)}
/* #thViderTraits suit #thVider au lieu d'avoir son propre style : deux
   tentatives maison n'ont pas tenu, la troisieme reutilise. */
#thViderTraits:hover{color:#fff;background:rgba(209,104,121,.22);border-color:rgba(209,104,121,.4)}
#thViderTraits.on{color:#fff;background:rgba(209,104,121,.38);border-color:rgba(209,104,121,.55)}

/* ---------- Panneau ---------- */
.th-panneau{
  flex:none;width:296px;display:flex;flex-direction:column;min-height:0;
  background:var(--panel-2);border-left:1px solid var(--line);
}
.th-panneau.th-replie{display:none}
.th-p-bloc{padding:9px 12px 0}
.th-p-bloc select,.th-p-bloc input{width:100%;max-width:none}
.th-p-lab{display:block;font-size:11.5px;color:var(--muted);margin:0 0 4px 2px}
.th-p-seg{margin:10px 12px 0}
.th-p-seg button{flex:1;justify-content:center}
.th-p-seg span{opacity:.6;font-size:11.5px;margin-left:4px}

.th-p-mode{
  margin:10px 12px 0;padding:7px 10px;border-radius:9px;font-size:12.5px;
  background:rgba(120,64,185,.18);border:1px solid rgba(120,64,185,.4);
  color:var(--gold-light);
}
.th-p-mode[hidden]{display:none}

.th-p-liste{flex:1;overflow:auto;padding:10px 12px;display:grid;gap:5px;align-content:start}
.th-p-vide{margin:6px 2px;color:var(--muted);font-size:12.5px;line-height:1.5}

.th-j{
  display:grid;grid-template-columns:26px 1fr auto auto;gap:3px 6px;align-items:center;
  padding:7px 9px;border-radius:10px;cursor:grab;
  background:rgba(255,255,255,.035);border:1px solid transparent;transition:.15s;
}
.th-j:hover{background:rgba(255,255,255,.07);border-color:var(--line)}
.th-j.on{background:rgba(120,64,185,.24);border-color:rgba(120,64,185,.5)}
.th-j-pose{opacity:.45}
.th-j-ico{grid-row:1/3;width:26px;height:26px}
.th-j-nom{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-j-det{grid-column:2/5;font-size:11px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Rouge pour une absence, qui demande une decision. Un joueur deja pris dans
   une autre composition, ou un membre en vacances, est une information : le
   peindre en rouge banalise le vrai signal. */
.th-j-info{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--gold);background:rgba(215,180,123,.12);
  border:1px solid var(--line-strong);border-radius:999px;padding:1px 6px;
}
.th-j-alerte{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;
  color:var(--danger);background:rgba(209,104,121,.14);
  border:1px solid rgba(209,104,121,.32);border-radius:999px;padding:1px 6px;
}
.th-p-pied{
  margin:0;padding:9px 12px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.5;color:var(--muted);
}

/* ---------- Pions ---------- */
.th-pions{position:absolute;top:0;left:0;width:1430px;height:1100px;overflow:visible}
.th-pion{cursor:grab}
.th-pion-tire{cursor:grabbing;opacity:.85}
.th-pion-fond{stroke:rgba(255,255,255,.92);stroke-width:3}
.th-pion-ico{pointer-events:none}
.th-pion-nom rect{fill:rgba(8,9,12,.9);stroke:var(--line-strong)}
.th-pion-nom text{fill:var(--text);font:600 18px system-ui,sans-serif;text-anchor:middle}
.th-pion-nom{pointer-events:none}

/* La croix n'apparait qu'au survol : affichee en permanence sur vingt-cinq
   pions, elle transforme la carte en champ de boutons rouges. */
.th-pion-x{opacity:0;transition:opacity .15s;cursor:pointer}
.th-pion:hover .th-pion-x{opacity:1}
.th-pion-x circle{fill:#c2503f;stroke:rgba(255,255,255,.85);stroke-width:1.5}
.th-pion-x text{fill:#fff;font:700 16px system-ui,sans-serif;text-anchor:middle}

/* Un joueur attend d'etre place : le curseur doit le dire, sinon on clique
   sans savoir que le clic va poser quelque chose. */
.th-scene.th-pose{cursor:copy}
.th-scene.th-pose .th-obj{pointer-events:none}

/* ---------- Messages ---------- */
.th-mot{
  position:fixed;right:16px;bottom:16px;margin:0;z-index:20;
  padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;
  background:var(--panel-2);border:1px solid var(--line-strong);color:var(--text);
  box-shadow:var(--shadow);
}
.th-mot[hidden]{display:none}
.th-mot-err{border-color:rgba(209,104,121,.5);color:var(--danger)}

@media (max-width:1100px){
  .th-panneau{width:250px}
  .th-doc select{max-width:150px}
}

/* ---------- Legende des groupes ----------
   Posee sur la carte, pas dans le panneau : le panneau se replie, et c'est
   panneau ferme, pendant le brief, que le rappel des couleurs sert. */
.th-legende{
  position:absolute;left:12px;bottom:12px;z-index:5;
  display:flex;flex-direction:column;gap:3px;
  padding:8px 10px;border-radius:11px;
  background:rgba(8,9,12,.82);border:1px solid var(--line-strong);
  box-shadow:var(--shadow);pointer-events:none;
}
.th-legende[hidden],.th-legende.th-lg-off{display:none}
.th-lg{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text)}
.th-lg i{
  flex:none;width:13px;height:13px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.9);
}
.th-lg b{margin-left:auto;padding-left:10px;font-variant-numeric:tabular-nums;color:var(--muted)}
.th-lg-vide{opacity:.42}
/* Un seul langage : le violet dit "actif", le gris dit "action". Un bouton
   d'action en violet et un interrupteur en dore, c'etaient deux codes qui se
   contredisaient. Meme habillage que .th-seg button.on. */
#thVoirLegende.on,#thPanneau.on{
  color:var(--gold-light);
  background:linear-gradient(90deg,rgba(120,64,185,.3),rgba(215,180,123,.09));
  border-color:rgba(120,64,185,.3);
  box-shadow:inset 0 0 22px rgba(120,64,185,.06);
}

/* ---------- Export ---------- */
.th-voile{position:fixed;inset:0;z-index:30;background:rgba(4,5,8,.6)}
.th-voile[hidden]{display:none}
.th-export{
  position:fixed;z-index:31;top:50%;left:50%;transform:translate(-50%,-50%);
  width:340px;padding:18px 20px;border-radius:16px;
  background:var(--panel-2);border:1px solid var(--line-strong);box-shadow:var(--shadow);
}
.th-export[hidden]{display:none}
.th-export h2{margin:0 0 6px;font-size:16px;color:var(--gold-light);font-weight:650}
.th-x-note{margin:0 0 14px;font-size:12px;line-height:1.5;color:var(--muted)}
.th-x-phases{display:grid;gap:6px;margin-bottom:12px}
.th-x-phases label,.th-x-opt{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);
}
.th-x-opt{margin-top:6px;font-weight:500;color:var(--muted)}
.th-x-phases input,.th-x-opt input{accent-color:var(--purple-soft);width:15px;height:15px;cursor:pointer}
.th-x-phases .th-x-n{margin-left:auto;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.th-x-pied{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.th-x-pied button{
  font:inherit;font-weight:600;cursor:pointer;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:9px;padding:7px 14px;transition:.18s;
}
.th-x-pied button:hover{color:#fff;background:rgba(255,255,255,.08)}
.th-x-pied .th-x-go{
  color:var(--gold-light);
  background:linear-gradient(90deg,rgba(120,64,185,.34),rgba(215,180,123,.1));
  border-color:rgba(120,64,185,.45);
}
.th-x-pied button:disabled{opacity:.5;cursor:default}

/* ---------- Marqueurs (4.1.0 A) ---------- */
.th-marqueurs{position:absolute;top:0;left:0;width:1430px;height:1100px;overflow:visible}
.th-traits{position:absolute;top:0;left:0;width:1430px;height:1100px;overflow:visible}
/* Bloc du stylo dans le panneau — 5.19.5.
   Stylo, Gomme et les huit pastilles sur UNE ligne : a 22 px elles
   passaient a la ligne, signale par Florian. 17 px et un ecart de 3
   tiennent dans les 296 px du panneau a cote du segment.
   Le bouton reste en dessous, pleine largeur : son libelle s'allonge a la
   confirmation (« Confirmer : 12 trait(s) »), il ne tiendrait pas en ligne. */
/* grid-column:1/-1 comme .th-fam : .th-palette est une grille a trois
   colonnes egales, et un bloc loge dans une seule cellule forcait la
   premiere colonne a sa largeur — d'ou les tuiles de marqueurs inegales. */
.th-stylo-bloc{grid-column:1/-1;padding:0 0 11px;margin-bottom:9px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.th-stylo-rang{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.th-stylo-bloc .th-p-seg{margin:0;flex:none}
#thViderTraits{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Les huit pastilles sur leur propre ligne, reparties sur la largeur : a
   cote du segment elles demandaient 309 px pour 272 disponibles, donc elles
   repassaient a la ligne. Seules, 22 px tiennent largement et restent
   cliquables sans viser. */
.th-couleurs{display:flex;align-items:center;justify-content:space-between;gap:2px}
.th-pastille{width:22px;height:22px;padding:0;border:2px solid transparent;border-radius:50%;
  cursor:pointer;flex:none}
/* Le noir a besoin d'un contour permanent : sur ce fond il disparaitrait. */
.th-pastille[style*="rgb(0, 0, 0)"]{border-color:rgba(255,255,255,.28)}
#thViderTraits{width:100%}
.th-pastille.on{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.55)}
/* Le curseur dit quel outil est arme : sans lui, stylo et gomme se
   ressemblent des que le regard quitte la barre d'outils. */
.th-scene.th-dessine{cursor:crosshair}
.th-scene.th-efface{cursor:cell}
.th-marq{cursor:grab}
.th-marq-tire{cursor:grabbing;opacity:.85}
.th-marq-forme{stroke:rgba(255,255,255,.92);stroke-width:3}
/* Les trois couches SVG se recouvrent entierement. Un <svg> absolu capte les
   evenements sur toute sa boite : sans ces deux regles, la couche des pions
   masquait celle des marqueurs et aucun marqueur n'etait attrapable. On rend
   les couches transparentes aux clics et on redonne la main aux elements. */
/* .th-traits est inerte comme ses freres : viser un trait se fait par
   calcul de distance en JS. Sous capture de pointeur la cible d'un
   evenement est toujours la scene, donc un ciblage par pointer-events
   aurait fonctionne au clic et echoue au balayage de la gomme. */
.th-couche,.th-marqueurs,.th-traits,.th-pions{pointer-events:none}
.th-pion,.th-marq{pointer-events:auto}
/* La selection se voit par un halo, pas par un changement de couleur : la
   couleur du marqueur porte deja une information, allie ou ennemi. */
.th-marq-halo{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:7 5;opacity:0}
/* Meme croix que sur les pions : elle n'apparait qu'au survol, sinon la carte
   se transforme en champ de boutons rouges. */
.th-marq-x{opacity:0;transition:opacity .15s;cursor:pointer;pointer-events:auto}
.th-marq:hover .th-marq-x{opacity:1}
.th-marq-x circle{fill:#c2503f;stroke:rgba(255,255,255,.85);stroke-width:1.5}
.th-marq-x text{fill:#fff;font:700 13px system-ui,sans-serif;text-anchor:middle}
.th-marq.on .th-marq-halo{opacity:1}

.th-selection{
  margin:10px 12px 0;padding:8px 10px;border-radius:10px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:rgba(215,180,123,.1);border:1px solid var(--line-strong);
  font-size:12.5px;font-weight:600;color:var(--gold-light);
}
.th-selection[hidden]{display:none}
.th-sel-actions{margin-left:auto;display:flex;gap:4px}
.th-sel-actions button{
  font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;color:var(--muted);
  padding:5px 9px;line-height:1;white-space:nowrap;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:7px;transition:.15s;
}
.th-sel-actions button:hover{color:#fff;background:rgba(255,255,255,.1)}
.th-sel-actions .th-danger:hover{color:#fff;background:rgba(209,104,121,.3);border-color:rgba(209,104,121,.5)}

/* Palette : une grille, parce qu'une liste de douze marqueurs en pleine
   largeur fait defiler le panneau pour rien. */
.th-palette{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.th-palette .th-fam{
  grid-column:1/-1;margin:6px 0 0;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
}
.th-m{
  display:flex;flex-direction:column;align-items:center;gap:5px;cursor:grab;
  padding:8px 4px;border-radius:10px;
  background:rgba(255,255,255,.035);border:1px solid transparent;transition:.15s;
}
.th-m:hover{background:rgba(255,255,255,.08);border-color:var(--line)}
.th-m.on{background:rgba(120,64,185,.24);border-color:rgba(120,64,185,.5)}
.th-m svg,.th-m img{width:30px;height:30px;pointer-events:none}
.th-m span{font-size:10.5px;font-weight:600;color:var(--muted);text-align:center;line-height:1.25}

/* Croix des marqueurs : meme geste que sur les pions. Affichee en permanence
   sur une carte chargee, elle la transformerait en champ de boutons rouges. */
.th-marq-x{opacity:0;transition:opacity .15s;cursor:pointer;pointer-events:auto}
.th-marq:hover .th-marq-x{opacity:1}
.th-marq-x circle{fill:#c2503f;stroke:rgba(255,255,255,.85);stroke-width:1.5}
.th-marq-x text{fill:#fff;font:700 16px system-ui,sans-serif;text-anchor:middle}
/* Selection d'un pion : meme halo que pour un marqueur. */
.th-pion-halo{fill:none;stroke:var(--gold);stroke-width:3;stroke-dasharray:7 5;opacity:0}
.th-pion.on .th-pion-halo{opacity:1}

/* ---------- Formes libres (4.1.0 B) ---------- */
.th-forme{cursor:move}
/* PAS de fill ici : une declaration de feuille de style l'emporte sur
   l'attribut de presentation, et les cones comme les zones arrivaient vides.
   Les lignes de la fleche portent fill="none" en attribut. */
.th-trait{stroke-linejoin:round;stroke-linecap:round}
.th-tige{stroke:var(--gold);opacity:.7}
.th-poignee{fill:var(--gold);stroke:#08090c;cursor:pointer}
.th-forme.on .th-trait{filter:drop-shadow(0 0 3px rgba(215,180,123,.8))}

/* Separateur : Exporter agit sur la strat mais n'appartient pas au trio
   liste / + Nouvelle / Supprimer, entre lesquels il s'intercalait. */
.th-sep{width:1px;height:22px;background:var(--line-strong);margin:0 2px}
#thVider{color:var(--muted)}
#thVider:hover{color:#fff;background:rgba(209,104,121,.22);border-color:rgba(209,104,121,.4)}


/* ============================================================
   5.11.0 — Le panneau absorbe la largeur inutilisee
   La carte est carree et mise a l'echelle sur la hauteur : au-dela
   d'un certain point, elargir la scene ne l'agrandit plus et laisse
   une bande vide a droite (~578 px en 1080p). Cette largeur va au
   panneau, ou elle sert : les builds des joueurs cessent d'etre
   tronques. Borne a 460 px pour ne pas manger la carte en 1440p,
   et posee au-dessus de 1100 px pour laisser la regle des petits
   ecrans intacte.
   ============================================================ */
@media (min-width: 1101px) {
  .th-panneau { width: clamp(296px, 22vw, 460px) }
}


/* ============================================================
   5.11.4 — BANDEAU SUR UNE LIGNE EN 1080p

   .th-tete enveloppe (flex-wrap) pour ne jamais pousser un bouton
   hors de l'ecran. En 1080p, .th-doc et .th-outils reclament
   ensemble ~1930 px pour 1905 disponibles : .th-outils basculait
   donc sur sa propre ligne, decalee au milieu du bandeau. On
   reprend la soixantaine de pixels qui manque sur les marges des
   boutons et les gouttieres. La disposition redevient celle du
   1440p : tout sur une ligne, outils colles a droite par le
   margin-left:auto deja en place, barre des plans dessous.

   Borne haute a 2278 px : le 1440p, qui tient deja, n'est pas
   touche. Borne basse a 1101 px : la regle des petits ecrans
   (820 px), qui met volontairement .th-outils en pleine largeur,
   garde la main.
   ============================================================ */
@media (min-width: 1101px) and (max-width: 2278px) {
  .th-tete { gap: 8px 10px; padding: 7px 12px }
  .th-doc { gap: 6px }
  .th-outils { gap: 8px }

  .th-doc button,
  #thPanneau, #thVoirLegende, #thExporter, #thVider, #thViderTraits { padding: 6px 8px }

  .th-seg button { padding: 5px 9px }
  .th-tete select { padding: 5px 7px; max-width: 170px }
  .th-zoom { gap: 6px }
}


/* ============================================================
   5.11.5 — BLOC D'OUTILS ELASTIQUE

   Pourquoi le resserrage de la 5.11.4 n'a rien change : le
   probleme n'etait pas la largeur des boutons. .th-plans est un
   enfant de .th-outils pose en largeur pleine ; sa largeur
   naturelle s'ajoute malgre tout a celle du bloc quand le
   navigateur decide si la premiere ligne tient. Le total
   depassait, .th-outils basculait seul a la ligne suivante, et
   son margin-left:auto n'avait plus rien contre quoi se caler —
   d'ou le bloc decale au milieu du bandeau.

   flex:1 1 0 supprime la cause : le bloc n'exige plus sa largeur
   naturelle, il prend ce qui reste de la premiere ligne et
   enveloppe SES propres enfants. La barre des plans passe donc
   dessous, exactement comme en 1440p. justify-content remplace le
   margin-left:auto, qui n'a plus d'objet sur un bloc elastique.

   Borne haute a 2278 px : le 1440p, qui tient deja, n'est pas
   touche. Borne basse a 1101 px : la regle des petits ecrans
   garde la main.
   ============================================================ */
@media (min-width: 1101px) and (max-width: 2278px) {
  /* 5.11.8 — largeur naturelle, collee a droite. Le bloc mesure
     donc exactement la rangee d'outils, et son bord gauche tombe
     sur « Libre ». Les 5.11.5 et 5.11.7 l'etiraient de .th-doc au
     bord droit : la barre des plans s'alignait sur ce bord etire,
     d'ou un decalage de 145 a 174 px selon l'ecran. */
  .th-outils {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
  }
  /* width:0 pour le calcul de largeur — une base en pourcentage est
     ignoree a ce moment-la, seul width compte, donc la barre ne
     gonfle pas le bloc (c'etait le defaut d'origine, qui avait
     motive l'elasticite). flex-basis:100% ensuite : la barre ne
     tient plus sur la ligne des outils et prend la sienne, calee
     sous « Libre ». */
  .th-plans { width: 0; flex-basis: 100%; min-width: 0 }
}


/* ============================================================
   5.11.9 — LE CALAGE VAUT A TOUTES LES LARGEURS

   Le plafond de 2278 px a ete calcule pour la densite du tableau
   des Ames : agir tant que la place disponible reste inferieure a
   ce que ce tableau reclame. Applique au Theatre, il n'avait
   aucun sens — et il laissait dehors les ecrans larges. Un 1440p
   sans mise a l'echelle fait 2545 px : la 5.11.8 ne l'atteignait
   pas, il gardait la disposition d'origine ou .th-plans gonfle la
   largeur de .th-outils, donc la barre des plans decalee a gauche
   de « Libre ».

   Meme regle qu'en 5.11.8, sans borne haute. Les resserrages de
   marges des 5.11.4 et 5.11.5 gardent la leur : ils ne servent
   qu'a faire tenir un bandeau a l'etroit.

   Posee en fin de feuille, donc apres la regle plafonnee : a
   specificite egale, c'est la derniere qui l'emporte, et les deux
   disent la meme chose sous 2278 px.
   ============================================================ */
@media (min-width: 1101px) {
  .th-outils {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
  }
  .th-plans { width: 0; flex-basis: 100%; min-width: 0 }
}


/* ============ NOTICE — 5.24.0 ============ */
.th-notice {
  width: 30px; height: 30px; border-radius: 50%; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.th-notice[aria-expanded="true"] {
  background: linear-gradient(160deg, #7840b9, #4e2a80); color: #fff;
}
#thPanneauNotice { position: fixed; inset: 0; z-index: 90 }
#thPanneauNotice[hidden] { display: none }
.thn-fond { position: absolute; inset: 0; background: rgba(3, 4, 6, .62) }
.thn-corps {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: clamp(380px, 32vw, 560px); display: flex; flex-direction: column;
  background: linear-gradient(160deg, #171923, #0c0d12);
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.thn-tete {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.thn-tete h2 { font-size: 15px; margin: 0; flex: 1 1 auto }
.thn-x { border: 0; background: none; color: #8b849c; font-size: 20px; cursor: pointer }
.thn-x:hover { color: #cda9ef }
.thn-contenu { flex: 1 1 auto; overflow-y: auto; padding: 16px }
.thn-vide { color: #6f6980; font-style: italic }

.notice-corps { font-size: 14.5px; line-height: 1.55 }
.notice-corps h2 { font-size: 17px; margin: 0 0 6px; color: #e6cfa3; font-weight: 600 }
.notice-corps h3 { font-size: 14px; margin: 0 0 5px; font-weight: 650 }
.notice-corps p  { margin: 0 0 10px }
.notice-corps .chapo, .notice-corps .gris { color: #8b849c }
.notice-corps .carte {
  border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  padding: 13px 14px; background: rgba(255, 255, 255, .02); margin-bottom: 13px;
}
.notice-corps .carte.accent {
  border-color: rgba(120, 64, 185, .35); background: rgba(120, 64, 185, .07);
  margin-bottom: 9px; padding: 11px 12px;
}
.notice-corps .tache { display: flex; gap: 11px; margin-bottom: 11px }
.notice-corps .tache p { margin: 0; font-size: 14px }
.notice-corps .tache .num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(120, 64, 185, .28); border: 1px solid rgba(120, 64, 185, .55);
  color: #cda9ef; font-size: 12px; font-weight: 650;
  display: flex; align-items: center; justify-content: center;
}
.notice-corps .ui {
  background: rgba(215, 180, 123, .14); border: 1px solid rgba(215, 180, 123, .3);
  border-radius: 5px; padding: 1px 5px; font-size: 13px; color: #e6cfa3;
}
.notice-corps .note {
  border-left: 2px solid #d7b47b; padding: 9px 11px; font-size: 13.5px;
  background: rgba(215, 180, 123, .06); border-radius: 0 8px 8px 0; color: #8b849c;
}


/* ---- listes et tableaux des notices — 5.24.2 ---- */
.notice-corps ul,
.notice-corps ol { margin: 0 0 11px; padding-left: 0; list-style: none }
.notice-corps ol { counter-reset: nt-num }
.notice-corps li { position: relative; padding-left: 17px; margin-bottom: 7px; font-size: 14px }
.notice-corps li:last-child { margin-bottom: 0 }
.notice-corps ul > li::before {
  content: ''; position: absolute; left: 3px; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(120, 64, 185, .85);
}
.notice-corps ol > li { counter-increment: nt-num; padding-left: 22px }
.notice-corps ol > li::before {
  content: counter(nt-num) '.'; position: absolute; left: 0; top: 0;
  color: #e6cfa3; font-weight: 650; font-size: 13px;
}
.notice-corps li > ul,
.notice-corps li > ol { margin: 6px 0 0 }

.notice-corps table {
  width: 100%; border-collapse: collapse; margin: 0 0 11px; font-size: 13.5px;
}
.notice-corps th,
.notice-corps td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  vertical-align: top;
}
.notice-corps th { color: #e6cfa3; font-weight: 650; font-size: 12.5px }
.notice-corps tr:last-child td { border-bottom: 0 }
.notice-corps td:not(:first-child),
.notice-corps th:not(:first-child) { width: 1%; white-space: nowrap; text-align: center }

.notice-corps hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .1); margin: 14px 0 }
.notice-corps code {
  background: rgba(255, 255, 255, .06); border-radius: 4px;
  padding: 1px 5px; font-size: 12.5px; color: #8b849c;
}
.notice-corps a { color: #d7b47b }


/* ---- edition de la notice — 5.25.0 ---- */
.thn-x.actif { color: #fff; background: #7840b9; border-radius: 6px }
#thnChamp {
  width: 100%; min-height: 240px; resize: vertical;
  background: #0f1017; color: #e7e3ef; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5;
  font-family: Consolas, 'Cascadia Mono', monospace;
}
#thnChamp:focus { outline: none; border-color: rgba(120, 64, 185, .8) }
.thn-legende { font-size: 12px; color: #8b849c; margin: 14px 0 6px; font-weight: 600 }
.thn-apercu { border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 12px }
.thn-pied {
  flex: 0 0 auto; padding: 8px 16px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px; color: #e6cfa3; min-height: 31px;
}