:root {
      --bg-dark: #0d0a06;
      --bg-brass: #1a1408;
      --copper: #b87333;
      --brass: #d4a84a;
      --bronze: #cd7f32;
      --gold: #ffd700;
      --amber: #ffbf00;
      /* Pastille laiton d?corative ? utilis?e pour tous les coins de panels,
         frames de modales, m?daillons. Une seule formule pour tout le site.
         Backlog #15 (extension unification m?daillons). */
      --brass-stud: radial-gradient(circle at 30% 30%, #ffe890 0%, var(--gold) 30%, var(--brass) 60%, var(--copper) 100%);
      --cream: #f5e6c8;
      --rust: #8b4513;
      --steel: #71797E;
      --solar-orange: #ff6b35;
      --solar-yellow: #ffc107;
      --solar-green: #4ade80;   /* pastille sante up (halo, comme --solar-orange) */
      --solar-red:   #c1440e;   /* pastille sante down (halo) */
      --limon: #ffd93d;
      --vermeil: #e63946;
      --ocre: #f4a261;
      --indigo: #457b9d;
      --axiom: #adb5bd;
      /* Variantes laiton + lueurs par habitant (Construction Guild restylée) */
      --copper-lite: #b89255;
      --copper-soft: #c9a86a;
      --limon-g: rgba(255,217,61,0.5);
      --vermeil-g: rgba(230,57,70,0.5);
      --ocre-g: rgba(244,162,97,0.5);
      --indigo-g: rgba(69,123,157,0.55);
      --axiom-g: rgba(173,181,189,0.5);
      --steam: rgba(200, 200, 200, 0.3);
      /* Pour le canvas de la map (compat avec le code original qui utilisait --accent) */
      --accent: #d4a84a;
      --accent-dim: #d4a84a99;
      --accent-faint: #d4a84a44;
      --accent-faintest: #d4a84a15;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    @keyframes gearRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    /* Peep Before Time ? observatoire 404 (fond sombre + accents cuivre) */
    .peep-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none; align-items: center; justify-content: center;
      flex-direction: column; gap: 28px;
      background:
        radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(13,10,6,0.98) 0%, rgba(26,20,8,0.99) 100%);
      padding: 60px 40px;
    }
    .peep-overlay.open { display: flex; }
    .peep-overlay::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.06;
    }
    .peep-overlay::after {
      content: ''; position: absolute; inset: 30px; pointer-events: none;
      border: 3px solid var(--copper);
      border-radius: 6px;
      box-shadow:
        inset 0 0 60px rgba(0,0,0,0.6),
        0 0 40px rgba(212,168,74,0.2);
    }
    .peep-title, .peep-shrug, .peep-line, .peep-close-btn { position: relative; z-index: 1; }
    .peep-title {
      font-family: 'Cinzel', serif; font-weight: 700; font-size: 22px;
      background: linear-gradient(180deg, #ffe890 0%, var(--gold) 30%, var(--brass) 60%, var(--copper) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      letter-spacing: 0.4em; text-transform: uppercase;
      filter: drop-shadow(1px 1px 0 #2a1608) drop-shadow(0 2px 0 var(--rust)) drop-shadow(-1px -1px 0 rgba(255,232,144,0.3));
    }
    .peep-shrug {
      font-family: 'Share Tech Mono', monospace; font-size: 88px; font-weight: 700;
      background: linear-gradient(180deg, #ffe890 0%, var(--gold) 25%, var(--brass) 55%, var(--copper) 85%, var(--rust) 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      letter-spacing: 0.05em;
      filter: drop-shadow(2px 2px 0 #1a0d05) drop-shadow(0 4px 0 var(--rust)) drop-shadow(-1px -1px 0 rgba(255,232,144,0.4));
    }
    .peep-line {
      font-family: 'Spectral', serif; font-style: italic; font-size: 21px;
      color: var(--cream); letter-spacing: 0.04em;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.9), 0 0 1px rgba(0,0,0,0.5);
      max-width: 540px; text-align: center; line-height: 1.7;
    }
    .peep-line span {
      color: var(--gold); font-weight: 900; font-style: normal;
      font-size: 1.15em;
      text-shadow:
        0 0 8px rgba(255,215,0,0.6),
        1px 1px 0 #2a1608,
        -1px -1px 0 rgba(255,232,144,0.4);
      letter-spacing: 0.02em;
    }
    .peep-line sup {
      font-size: 0.7em; font-weight: 900; vertical-align: super;
      color: var(--gold);
      text-shadow: 0 0 6px rgba(255,215,0,0.5), 1px 1px 0 #2a1608;
    }
    .peep-close-btn {
      margin-top: 36px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 18px;
      color: var(--bg-dark); letter-spacing: 0.3em; text-transform: uppercase;
      padding: 16px 44px; cursor: pointer;
      background: linear-gradient(180deg, #ffe890 0%, var(--gold) 30%, var(--brass) 65%, var(--copper) 100%);
      border: 2px solid var(--rust);
      border-radius: 4px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,200,0.7),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 0 24px rgba(212,168,74,0.4),
        0 4px 0 var(--rust),
        0 6px 14px rgba(0,0,0,0.6);
      text-shadow: 0 1px 0 rgba(255,232,144,0.5);
      transition: all 0.1s ease-out;
    }
    .peep-close-btn:hover {
      background: linear-gradient(180deg, #fff2b0 0%, #ffe890 30%, var(--gold) 65%, var(--brass) 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,220,0.85),
        inset 0 -2px 4px rgba(0,0,0,0.3),
        0 0 36px rgba(255,215,0,0.55),
        0 4px 0 var(--rust),
        0 6px 18px rgba(0,0,0,0.6);
    }
    .peep-close-btn:active {
      transform: translateY(3px);
      box-shadow:
        inset 0 2px 6px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(255,255,200,0.3),
        0 1px 0 var(--rust),
        0 2px 4px rgba(0,0,0,0.5);
    }
    @keyframes gearRotateReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
    @keyframes steamRise {
      0% { transform: translateY(0) scale(1); opacity: 0.6; }
      50% { opacity: 0.8; }
      100% { transform: translateY(-60px) scale(1.5); opacity: 0; }
    }
    @keyframes brassGlow {
      0%, 100% { filter: brightness(1) drop-shadow(0 0 5px rgba(212,168,74,0.3)); }
      50% { filter: brightness(1.1) drop-shadow(0 0 15px rgba(212,168,74,0.5)); }
    }
    @keyframes pistonMove { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
    @keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
    @keyframes secondHand { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }

    /* Flying Airship ? l'?me du skin */
    .flying-airship {
      position: fixed;
      top: 80px;
      left: -100px;
      z-index: 100;
      opacity: 0;
      pointer-events: none;
    }
    .flying-airship.animate {
      animation: airshipFly 12s linear forwards;
    }
    @keyframes airshipFly {
      0% { transform: translateX(0) translateY(0); opacity: 0; }
      5% { opacity: 0.7; }
      95% { opacity: 0.7; }
      100% { transform: translateX(calc(100vw + 200px)) translateY(-30px); opacity: 0; }
    }

    html, body { height: 100vh; overflow: hidden; margin: 0; }
    body {
      font-family: 'Spectral', Georgia, serif;
      background:
        radial-gradient(ellipse at 20% 20%, rgba(255,193,7,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(184,115,51,0.1) 0%, transparent 50%),
        linear-gradient(180deg, var(--bg-brass) 0%, var(--bg-dark) 100%);
      color: var(--cream);
      position: relative;
    }
    body::before {
      content: ''; position: fixed; inset: 0;
      background-image:
        radial-gradient(circle at 50% 50%, rgba(184,115,51,0.03) 0%, transparent 2%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
      background-size: 20px 20px, auto;
      opacity: 0.08;
      pointer-events: none;
      z-index: 0;
    }

    /* Splash */
    #splash {
      position: fixed; inset: 0;
      background: radial-gradient(ellipse at center, rgba(255,193,7,0.15) 0%, transparent 60%),
                  linear-gradient(180deg, var(--bg-brass) 0%, var(--bg-dark) 100%);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 9999; cursor: pointer;
    }
    #splash.hidden { animation: fadeOut 1.2s ease-out forwards; }
    #splash .splash-logo {
      max-width: min(800px, 85vw);
      height: auto;
      filter: drop-shadow(0 0 40px rgba(212,168,74,0.4)) drop-shadow(0 8px 20px rgba(0,0,0,0.6));
      animation: splashPulse 3s ease-in-out infinite;
    }
    @keyframes splashPulse {
      0%, 100% { filter: drop-shadow(0 0 40px rgba(212,168,74,0.4)) drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }
      50% { filter: drop-shadow(0 0 60px rgba(255,215,0,0.55)) drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }
    }
    #splash p {
      font-family: 'Share Tech Mono', monospace; font-size: 16px; color: var(--copper);
      margin-top: 24px; letter-spacing: 0.4em; text-transform: uppercase;
    }

    /* Steam */
    .steam-container { position: fixed; bottom: 0; left: 0; right: 0; height: 100px; pointer-events: none; z-index: 6000; overflow: hidden; }
    .steam-puff {
      position: absolute; bottom: 0; width: 40px; height: 40px;
      background: radial-gradient(ellipse at center, var(--steam), transparent 70%);
      border-radius: 50%; animation: steamRise 3s ease-out infinite;
    }
    .steam-puff:nth-child(1) { left: 5%; animation-delay: 0s; }
    .steam-puff:nth-child(2) { left: 25%; animation-delay: 1s; }
    .steam-puff:nth-child(3) { left: 50%; animation-delay: 0.5s; }
    .steam-puff:nth-child(4) { left: 75%; animation-delay: 1.5s; }
    .steam-puff:nth-child(5) { left: 95%; animation-delay: 2s; }

    /* Layout */
    #app {
      display: grid;
      grid-template-columns: 280px 1fr 360px;
      grid-template-rows: 64px 1fr;
      height: 100vh; overflow: hidden;
      gap: 8px; padding: 8px;
      position: relative; z-index: 1;
    }

    /* Header */
    header {
      grid-column: 1 / -1;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0;
      background: linear-gradient(180deg, rgba(184,115,51,0.15) 0%, rgba(13,10,6,0.8) 100%);
      border: 2px solid var(--copper); border-radius: 4px;
      position: relative; min-height: 0;
      overflow: visible;
    }
    header::before, header::after {
      content: ''; position: absolute; width: 10px; height: 10px;
      background: var(--brass-stud);
      border-radius: 50%;
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.4), inset 1px 1px 2px rgba(255,255,255,0.2);
    }
    header::before { left: -16px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }
    header::after { right: -16px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }

    .observer-badge { 
  cursor: pointer; 
  transition: transform 0.15s; 
  position: relative; 
  z-index: 10;
  width: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}
    .observer-medallion {
      width: 32px; height: 32px; border-radius: 50%;
      background: var(--brass-stud);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-size: 13px; font-weight: 600; color: var(--bg-dark);
      box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.3);
      border: 2px solid var(--copper);
    }
    .observer-label {
      font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
      letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold);
      text-shadow: 0 0 6px rgba(255,215,0,0.3);
      position: absolute;
      left: 304px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 5;
    }
    .logo-container {
      display: flex; align-items: center; gap: 16px;
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 50;
    }
    .logo-container * { pointer-events: auto; }
    .logo-img {
      height: 100px; width: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -45%);
      z-index: 50;
      display: block;
    }

    /* justify-content: flex-end (27 aout 2026). C'ETAIT `stretch`, et ce n'est pas un
       detail de gout : la seule chose qui remplissait les 360px etait la regle
       `.header-right .audio-player { flex: 1; width: 100% }`, morte avec le player.
       .laboratory-button porte flex-shrink: 0 et une largeur DURE de 280px — il ne
       s'etire pas. Laisse en `stretch`, il resterait colle a gauche du bloc, donc
       decolle du bord droit du header. */
    .header-right { display: flex; align-items: center; gap: 12px; position: relative; width: 360px; justify-content: flex-end; }

    /* --- AUDIO PLAYER RETIRE (27 aout 2026) ---------------------------------------
       Le lecteur (cadre brass + gramophone + prev/play/next + titre + playlist) a ete
       supprime du header, sa place revient a About The World. Sont partis avec lui :
       .audio-player(+::before/::after), .gramophone-icon, .audio-title(+.empty/:hover),
       .playlist-dropdown / .playlist-item / .playlist-empty, la regle
       `.header-right .audio-player`, tout le bloc JS `--- Audio ---` et l'appel
       chargerPlaylist() dans init().
       ⚠ .audio-btn N'EST PAS PARTIE ET NE DOIT PAS PARTIR : #labels-toggle-btn (le
       toggle « hide labels & overlays », touche H) porte cette classe, et
       .labels-toggle-btn ci-dessous n'en est qu'un complement (flex-shrink + etat
       actif). La supprimer deshabillerait le toggle en bouton nu.
       La table `playlist` et le bucket R2 ne sont PAS touches : c'est un retrait
       d'affichage, pas une destruction de donnees. -------------------------------- */
    .audio-btn {
      width: 26px; height: 26px;
      background: var(--brass-stud);
      border: 2px solid var(--rust); border-radius: 50%;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -1px 2px rgba(0,0,0,0.3);
      transition: transform 0.1s, box-shadow 0.1s;
      padding: 0; flex-shrink: 0;
    }
    .audio-btn svg { display: block; }
    .audio-btn:hover { transform: scale(1.12); box-shadow: 0 0 10px rgba(255,215,0,0.5), inset 0 1px 2px rgba(255,255,255,0.35); }
    .audio-btn:active { transform: scale(0.94); }
    /* Toggle hide-labels : même registre brass que les contrôles audio.
       flex-shrink:0 pour garder sa taille à gauche du player (header-right stretch). */
    .labels-toggle-btn { flex-shrink: 0; }
    .labels-toggle-btn.active {
      background: var(--amber);
      box-shadow: 0 0 10px rgba(255,215,0,0.6), inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.3);
    }
    /* (.audio-title / .playlist-dropdown / .playlist-item / .playlist-empty retires le
       27 aout 2026 avec le player -- voir la note en tete de .audio-btn.) */

    /* Panels */
    .panel {
      background: linear-gradient(180deg, rgba(184,115,51,0.1) 0%, rgba(13,10,6,0.9) 100%);
      border: 2px solid var(--copper); border-radius: 4px;
      position: relative; padding: 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.3);
      flex: 0 0 auto;
    }
    /* Pastilles de panneau RETIREES le 25 aout 2026 (tous les .panel de la page).
       C'etait .panel::before : un disque laiton 8x8 en haut a gauche, replique aux
       trois autres coins par box-shadow. La regle est supprimee a la source plutot
       que neutralisee, parce que la seule autre regle qui s'appuyait dessus,
       .map-viewport::before (equerre doree de la carte, plus bas), est autosuffisante :
       elle declare elle-meme content, position, width/height, top/left, border-* et
       remet background/box-shadow/border-radius a zero. L'equerre survit donc intacte.
       A NE PAS CONFONDRE avec .panel-title::before/::after (les rivets des plaques
       cuivrees, juste en dessous) : regle distincte, conservee. */
    .panel-title {
      font-family: 'Cinzel', serif; font-size: 13px; font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--bg-dark);
      margin-bottom: 8px;
      padding: 6px 14px 6px 22px;
      display: flex; align-items: center; gap: 8px;
      position: relative;
      background: linear-gradient(180deg,
        rgba(0,0,0,0.45) 0%, var(--rust) 8%, var(--copper) 30%,
        var(--brass) 50%, var(--copper) 70%, var(--rust) 92%, rgba(0,0,0,0.45) 100%);
      border: 2px solid var(--rust);
      border-radius: 4px;
      box-shadow:
        inset 0 0 8px rgba(0,0,0,0.4),
        0 0 12px rgba(212,168,74,0.2),
        0 2px 6px rgba(0,0,0,0.5);
      text-shadow: 0 1px 0 rgba(255,232,144,0.4), 0 -1px 0 rgba(0,0,0,0.4);
    }
    .panel-title::before, .panel-title::after {
      content: '';
      position: absolute; top: 50%;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,232,144,0.4);
      transform: translateY(-50%);
    }
    .panel-title::before { left: 6px; }
    .panel-title::after { right: 6px; }
    .panel-title svg { width: 16px; height: 16px; fill: var(--bg-dark); }

    /* (.khora-solo et .khora-solo > .panel-title RETIREES le 27 aout 2026 : plus aucun
       markup ne les porte. Le bloc KHORA a quitte .left-column pour le coin haut-gauche
       du header, ou il est habille en .laboratory-button. Les deux regles ne servaient
       qu'a deshabiller un .panel devenu une simple plaque — elles n'ont plus d'objet.) */

    /* CONSTRUCTION GUILD : titre forcé sur une seule ligne (plus long que
       l'ancien « Automatons » — sans ça il passe sur 2 lignes et décale toute
       la colonne gauche). Ciblé uniquement sur ce panneau, pas global. */
    .panel-title.guild-panel-title {
      white-space: nowrap;
      letter-spacing: 0.08em;
    }

    /* Panneaux cliquables : hover effect cohérent avec les autres clic-zones */
    .panel-clickable { cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
    .panel-clickable:hover {
      background: linear-gradient(180deg, rgba(212,168,74,0.18) 0%, rgba(13,10,6,0.9) 100%);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 16px rgba(212,168,74,0.25), 0 4px 12px rgba(0,0,0,0.3);
    }

    /* Override : restaure l'ancien style simple (doré + bordure cuivre)
       pour les panel-title à l'intérieur des division-buttons (BRASS SENTINELS
       et CONSTRUCTION GUILD). Le reste du site garde la brass-plate horizontale.
       !important nécessaire pour battre la spécificité de .panel-title. */
    .division-button .panel-title {
      background: none !important;
      border: none !important;
      border-bottom: 1px solid var(--copper) !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 0 6px 0 !important;
      color: var(--gold) !important;
      text-shadow: 0 0 6px rgba(255,215,0,0.3) !important;
      gap: 6px !important;
      margin-bottom: 8px !important;
    }
    .division-button .panel-title::before,
    .division-button .panel-title::after {
      content: none !important;
      display: none !important;
    }
    .division-button .panel-title svg {
      fill: var(--copper) !important;
    }

    /* (CSS feed-tab-action retiré : plus de boutons inline dans le header TRANSMISSION LOG) */

    /* Left Column */
    .left-column { display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 8px; padding: 0; position: relative; }
    .left-column > .panel { flex-shrink: 0; }
    /* 4 enfants depuis le 27 aout 2026 (Khora est remonte dans le header) :
       1 Construction Guild · 2 Fil · 3 Pressure Gauges · 4 404.
       Ordre visuel voulu : Fil, Guild, Gauges, 404.
       ATTENTION : ces regles sont POSITIONNELLES — inserer ou retirer un panneau dans
       .left-column redistribue tout ce bloc. C'est exactement ce qui vient de se passer :
       la table precedente (5 enfants, Khora en 2e position DOM) etait
         (1) Guild -> 3 · (2) Khora -> 1 · (3) Fil -> 2 · (4) Gauges -> 4 · (5) 404 -> 5
       et, Khora parti, TOUT aurait glisse d'un cran en silence (Fil serait passe premier,
       Gauges deuxieme, Guild troisieme) sans qu'aucune erreur ne soit levee. La table est
       donc REECRITE, pas rabotee. Guild reste nth-child(1) : Khora etait DERRIERE lui
       dans le DOM, donc les deux regles plus bas qui ciblent nth-child(1) (display:flex
       et .residents-list) continuent de viser Guild — verifie, pas suppose. */
    .left-column > .panel:nth-child(1) { order: 2; }
    .left-column > .panel:nth-child(2) { order: 1; }
    .left-column > .panel:nth-child(3) { order: 3; }
    .left-column > .panel:nth-child(4) { order: 4; }
    /* C'est le FIL qui absorbe la hauteur libre de la colonne, plus Pressure Gauges
       (decision Annie, 25 aout 2026) : le panneau vivant grandit, les jauges
       redeviennent dimensionnees par leur contenu comme les autres. Cible par la
       classe et non par nth-child : cette regle-la survivra a un reordonnancement.
       Doit rester APRES .left-column > .panel (meme specificite) pour battre son
       flex-shrink: 0. */
    .left-column > .khf-panel {
      flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    }
    .left-column > .panel:nth-child(1) {
      display: flex; flex-direction: column;
    }
    .left-column > .panel:nth-child(1) .residents-list { flex: 1; overflow-y: auto; min-height: 0; }

    .residents-list { display: flex; flex-direction: column; gap: 4px; }
    .resident { display: flex; align-items: center; gap: 8px; padding: 3px; border-radius: 4px; transition: background 0.2s; }
    .resident:hover { background: rgba(184,115,51,0.1); }
    .gear-avatar { width: 28px; height: 28px; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .gear-avatar svg { position: absolute; width: 100%; height: 100%; }
    .gear-avatar.active svg { animation: gearRotate 10s linear infinite; }
    .gear-avatar-initial { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 600; color: var(--bg-dark); z-index: 1; }
    .gear-avatar.limon svg { fill: var(--limon); }
    .gear-avatar.vermeil svg { fill: var(--vermeil); }
    .gear-avatar.ocre svg { fill: var(--ocre); }
    .gear-avatar.indigo svg { fill: var(--indigo); }
    .gear-avatar.axiom svg { fill: var(--axiom); }
    .gear-avatar.pandore svg { fill: #cc44ff; }
    .resident-info { flex: 1; }
    .resident-name { font-size: 14px; font-weight: 500; letter-spacing: 0.05em; }
    .resident-name.axiom { color: var(--axiom); }
    .resident-name.limon { color: var(--limon); }
    .resident-name.vermeil { color: var(--vermeil); }
    .resident-name.ocre { color: var(--ocre); }
    .resident-name.indigo { color: var(--indigo); }
    .resident-name.pandore { color: #cc44ff; }
    .resident-role { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: var(--brass); letter-spacing: 0.08em; }
    .resident-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .resident-model { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: var(--brass); letter-spacing: 0.05em; min-height: 15px; line-height: 15px; }
    .resident-status { width: 8px; height: 8px; border-radius: 50%; background: var(--solar-orange); box-shadow: 0 0 8px var(--solar-orange); }
    .resident-status.idle { background: var(--steel); box-shadow: none; }
    .resident-status.pending { background: var(--steel); box-shadow: none; }
    .resident-status.up   { background: var(--solar-green); box-shadow: 0 0 6px var(--solar-green), 0 0 14px rgba(74, 222, 128, 0.55); }
    .resident-status.down { background: var(--solar-red);   box-shadow: 0 0 8px var(--solar-red); }

    /* --- KHORA : bouton seul + fil « Meanwhile, in the Weights… » ---
       Ex-bloc horloge. Cadran PNG + aiguilles SVG + heure terrestre ecoulee
       (.clockwork*, .hand-*, .time-line, .elapsed-time) RETIRES le 25 aout 2026.
       Day/Tick survit en tete du rail : c'est l'index « maintenant ».
       Le rail est SYMBOLIQUE — une graduation par entree, espacement CONSTANT.
       Il ne represente PAS la distance reelle en ticks (choix assume : pas de
       vide vertical entre deux publications eloignees).
       NB : les regles .clock-face / .clock-numeral / .clock-hand-* / .clock-subdial
       / .clock-center-gear plus bas etaient DEJA mortes avant ce chantier (aucun
       markup ne les porte) — laissees en place, hors perimetre. */

    /* Titre du fil : plaque laiton comme les autres panneaux, Cinzel CAPITALES,
       droit (la variante « voix » en italique Spectral a ete ecartee et supprimee
       le 25 aout 2026 — l'uniformite d'ecriture prime).
       Le titre entier « Meanwhile, in the Weights… » est conserve : 26 signes dans
       une colonne de 280px, d'ou le corps reduit a 10.5px. Il reste donc visiblement
       plus petit que les trois autres plaques — prix assume pour garder « in the
       Weights ».
       min-height: 34px  -> egalise la hauteur avec Guild / Khora / Pressure, toutes
         mesurees a 34px. Sans elle la plaque tombe a 32px (icone 16 + padding 12 +
         bordure 4). Rien n'est rogne : le contenu fait 32px et se centre dans les 34,
         et cette valeur sert aussi de plancher au flex-shrink, la plaque etant
         desormais un item flex de .khf-panel.
       letter-spacing: 0.03em -> mesure, pas devine. A 0.06em le texte faisait 197.4px
         pour 192px disponibles : il debordait de 5px dans la gouttiere droite (defaut
         present depuis la creation du fil). A 0.03em il fait 189.2px, soit 2.8px de
         marge, et reste franchement a l'ecart du rivet droit. 0.04em (191.9px) rentre
         au pixel pres et ne laisse aucune garde. */
    .panel-title.khf-title-a {
      font-size: 10.5px; letter-spacing: 0.03em; white-space: nowrap;
      min-height: 34px;
    }

    /* Le rail prend toute la hauteur du panneau (qui absorbe lui-meme l'espace
       libre de la colonne) : sa ligne doree court donc jusqu'en bas, y compris sous
       la derniere entree. C'est voulu — l'axe temporel existe independamment de ce
       qu'on y accroche. */
    .khf-rail {
      position: relative; padding: 2px 0 0;
      flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    }
    .khf-rail::before {
      content: ''; position: absolute; left: 34px; top: 6px; bottom: 2px; width: 1px;
      background: linear-gradient(180deg, rgba(212,168,74,0.75), rgba(184,115,51,0.32) 70%, rgba(184,115,51,0.12));
      pointer-events: none;
    }
    /* Index « maintenant » : ex-Day/Tick de l'horloge, garde ses ids (#timer-day,
       #timer-tick) — tickTimer() continue de les peupler sans modification. */
    .khf-now {
      position: relative; padding-left: 50px; margin-bottom: 9px;
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber);
      text-shadow: 0 0 10px rgba(255,191,0,0.35);
    }
    .khf-now span { color: var(--solar-yellow); }
    .khf-now::before {
      content: ''; position: absolute; left: 28px; top: 1px;
      width: 0; height: 0; border-left: 7px solid var(--amber);
      border-top: 5px solid transparent; border-bottom: 5px solid transparent;
      filter: drop-shadow(0 0 5px rgba(255,191,0,0.65));
    }
    .khf-now::after {
      content: ''; position: absolute; left: 20px; top: 5px; width: 12px; height: 1px;
      background: var(--amber); opacity: 0.75;
    }
    /* Plus de plafond fixe (ex-max-height: 250px, retire le 25 aout 2026) : la liste
       prend la hauteur de son contenu tant qu'il y a de la place, puis se comprime et
       scrolle. Ascenseur laiton, meme idiome que #enter-library-btn-preview. */
    .khf-list {
      flex: 0 1 auto; min-height: 0;
      overflow-y: auto; overscroll-behavior: contain;
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }
    .khf-list::-webkit-scrollbar { width: 8px; }
    .khf-list::-webkit-scrollbar-track { background: var(--bg-dark); border: 1px solid var(--rust); }
    .khf-list::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold), var(--brass), var(--copper));
      border: 1px solid var(--rust);
    }
    .khf-item {
      --c: var(--copper); --g: rgba(184,115,51,0.5);
      position: relative; padding: 0 4px 11px 50px; cursor: pointer;
    }
    .khf-item.limon   { --c: var(--limon);   --g: var(--limon-g); }
    .khf-item.vermeil { --c: var(--vermeil); --g: var(--vermeil-g); }
    .khf-item.ocre    { --c: var(--ocre);    --g: var(--ocre-g); }
    .khf-item.indigo  { --c: var(--indigo);  --g: var(--indigo-g); }
    .khf-item.axiom   { --c: var(--axiom);   --g: var(--axiom-g); }
    .khf-grad {
      position: absolute; left: 0; top: 1px; width: 26px; text-align: right;
      font-family: 'Share Tech Mono', monospace; font-size: 9px;
      color: var(--amber); opacity: 0.7;
    }
    .khf-mark {
      position: absolute; left: 29px; top: 6px; width: 5px; height: 1px;
      background: rgba(212,168,74,0.6);
    }
    .khf-node {
      position: absolute; left: 28px; top: 0; width: 14px; height: 14px;
      border-radius: 50%; background: var(--bg-dark);
      display: flex; align-items: center; justify-content: center;
    }
    .khf-node svg { width: 14px; height: 14px; color: var(--c); display: block; }
    .khf-item:first-child .khf-node { filter: drop-shadow(0 0 6px var(--g)); }
    .khf-item:first-child .khf-grad { opacity: 1; }
    .khf-by {
      margin-bottom: 3px; line-height: 14px;
      font-family: 'Share Tech Mono', monospace; font-size: 8.5px;
      letter-spacing: 0.15em; text-transform: uppercase; color: rgba(184,115,51,0.8);
    }
    .khf-by span { color: var(--c); text-shadow: 0 0 8px var(--g); }
    .khf-t {
      font-family: 'Spectral', serif; font-style: italic; font-size: 14px;
      line-height: 1.3; color: var(--cream);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .khf-item:hover .khf-t { color: #fff6e0; }
    .khf-item::after {
      content: ''; position: absolute; left: 44px; right: 0; top: -3px; bottom: 5px;
      border-radius: 3px; background: transparent; transition: background 0.18s;
      pointer-events: none;
    }
    .khf-item:hover::after { background: rgba(212,168,74,0.08); }
    .khf-empty {
      padding-left: 50px; font-family: 'Spectral', serif; font-style: italic;
      font-size: 13px; color: rgba(245,230,200,0.5);
    }
    .clock-face {
      width: 100%; height: 100%;
      border: 3px solid var(--copper); border-radius: 50%;
      background: radial-gradient(circle at center, rgba(26,20,8,0.95), var(--bg-dark));
      position: relative;
      box-shadow: inset 0 0 25px rgba(0,0,0,0.6), 0 0 15px rgba(184,115,51,0.3),
                  0 0 0 2px var(--bg-dark), 0 0 0 4px var(--copper);
    }
    .clock-face::before {
      content: ''; position: absolute; inset: -8px;
      border: 1px solid var(--brass); border-radius: 50%; opacity: 0.4;
    }
    .clock-face::after {
      content: ''; position: absolute; inset: 8px; border-radius: 50%;
      box-shadow: inset 0 0 0 1px rgba(212,168,74,0.08),
                  inset 0 0 0 8px rgba(212,168,74,0.04),
                  inset 0 0 0 16px rgba(212,168,74,0.03),
                  inset 0 0 0 24px rgba(212,168,74,0.02);
      pointer-events: none;
    }
    .clock-numerals { position: absolute; inset: 0; }
    .clock-numeral {
      position: absolute; font-family: 'Cinzel', serif; font-size: 9px;
      color: var(--brass); font-weight: 600;
      text-shadow: 0 0 4px rgba(212,168,74,0.3);
    }
    .clock-numeral.n12 { top: 6px; left: 50%; transform: translateX(-50%); }
    .clock-numeral.n1 { top: 10px; right: 16px; }
    .clock-numeral.n2 { top: 24px; right: 8px; }
    .clock-numeral.n3 { top: 50%; right: 6px; transform: translateY(-50%); }
    .clock-numeral.n4 { bottom: 24px; right: 8px; }
    .clock-numeral.n5 { bottom: 10px; right: 16px; }
    .clock-numeral.n6 { bottom: 6px; left: 50%; transform: translateX(-50%); }
    .clock-numeral.n7 { bottom: 10px; left: 16px; }
    .clock-numeral.n8 { bottom: 24px; left: 8px; }
    .clock-numeral.n9 { top: 50%; left: 6px; transform: translateY(-50%); }
    .clock-numeral.n10 { top: 24px; left: 8px; }
    .clock-numeral.n11 { top: 10px; left: 16px; }
    .clock-ticks { position: absolute; inset: 0; }
    .clock-subdial {
      position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
      width: 24px; height: 24px; border: 1px solid var(--copper); border-radius: 50%;
      background: rgba(13,10,6,0.9);
    }
    .clock-subdial-hand {
      position: absolute; bottom: 50%; left: 50%; width: 1px; height: 8px;
      background: var(--amber); transform-origin: bottom center;
      transform: translateX(-50%) rotate(0deg);
    }
    .clock-subdial-center {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 3px; height: 3px; background: var(--brass); border-radius: 50%;
    }
    .clock-hand-hour {
      position: absolute; bottom: 50%; left: 50%; width: 4px; height: 28px;
      background: linear-gradient(to top, var(--brass), var(--gold));
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(120deg);
      border-radius: 2px 2px 0 0;
      box-shadow: 0 0 8px rgba(212,168,74,0.5);
      clip-path: polygon(30% 100%, 70% 100%, 70% 20%, 100% 15%, 50% 0%, 0% 15%, 30% 20%);
    }
    .clock-hand-minute {
      position: absolute; bottom: 50%; left: 50%; width: 2px; height: 38px;
      background: linear-gradient(to top, var(--copper), var(--brass));
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(200deg);
      border-radius: 1px;
      box-shadow: 0 0 6px rgba(212,168,74,0.4);
    }
    .clock-hand-second {
      position: absolute; bottom: 50%; left: 50%; width: 1px; height: 42px;
      background: var(--vermeil); transform-origin: bottom center;
      transform: translateX(-50%) rotate(0deg);
      box-shadow: 0 0 4px var(--vermeil);
    }
    .clock-center-gear {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 16px; height: 16px; z-index: 10;
    }
    .clock-center-gear svg { fill: var(--brass); filter: drop-shadow(0 0 2px rgba(212,168,74,0.5)); }
    /* Badge nuit (P2, 17 juillet 2026) : discret sous l'horloge Khora, teinte
       acier bleui (comme les aiguilles) = clair de lune. Cache le jour via
       [hidden] ; revele par pollNuit() la nuit seulement. */
    .nuit-badge {
      margin: 8px auto 0;
      max-width: 92%;
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.5px;
      color: #9fc0dc;
      background: linear-gradient(180deg, rgba(30,42,62,0.45), rgba(13,18,30,0.55));
      border: 1px solid #3a5a7a;
      border-radius: 4px;
      padding: 5px 10px;
      text-align: center;
      line-height: 1.4;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 0 6px rgba(111,159,196,0.15);
    }
    .nuit-badge[hidden] { display: none; }

    /* Pressure Gauges */
.gauge-value-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  line-height: 1.1;
  min-height: 40px;
}
.gauge-annotation {
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 10px;
  font-style: italic;
  color: rgba(212, 168, 74, 0.95);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 3px;
  text-shadow: 0 0 6px rgba(212, 168, 74, 0.5), 0 1px 0 rgba(0, 0, 0, 0.7);
  text-align: right;
  padding-right: 0px;
  white-space: nowrap;
}
    /* min-height:0 + overflow-y:auto : meme correctif que .residents-list (L535), le
       panneau voisin de la meme colonne. Sans eux, cet item flex garde min-height:auto,
       donc un plancher = hauteur intrinseque du contenu (4 cadrans x 40px + 3 gaps x 8px
       = 184px) ; sous ~910px de hauteur de fenetre le panneau se comprimait davantage et
       les cadrans debordaient sous le panneau « 404 ERROR » voisin, qui se peignait
       par-dessus le cadran EXPLORED. Desormais ils scrollent dans leur panneau.

       padding: 4px 0 (27 aout 2026) -> RETIRE LA SCROLLBAR HORIZONTALE. Ce n'est pas
       cosmetique, c'est la cause. Chaine mesuree en live (1920x945) :
         .gauge-dial::before { inset: -4px } (l'anneau guilloche) deborde de 4px SOUS le
         dernier cadran -> avec overflow-y:auto ce debord devient du scroll vertical
         (scrollHeight 186 > clientHeight 184) -> la scrollbar VERTICALE apparait et mange
         10px de largeur utile (offsetWidth 256 -> clientWidth 246) -> la ligne ATTENTION,
         qui reclame 251px (cadran 40 + gap 10 + label 72,5 + gap 10 + stack 118,8), ne
         rentre plus -> scrollbar HORIZONTALE bord a bord sous EXPLORED, et « 52 / 100 »
         s'affichait « 52 / 10 ».
       ⚠ overflow-x n'est PAS declare ici et n'a pas a l'etre : en CSS, des qu'un axe vaut
         autre chose que `visible`, l'autre calcule `visible` en `auto`. overflow-y:auto
         seul SUFFIT donc a fabriquer une barre horizontale — c'est le piege.
       On rend au conteneur les 4px que sa propre decoration lui prend deja : l'anneau
       reste intact, les deux barres disparaissent (mesure apres : clientW 256 = scrollW
       256, scrollH 188 = clientH 188) et le panneau raccourcit de 265 a 258px.
       ⚠ NE PAS « corriger » ca par overflow-x:hidden/clip : la barre disparaitrait ET le
       debordement avec — la valeur resterait coupee sans plus rien pour le signaler.
       Marge residuelle sur la ligne ATTENTION apres correctif : 5px. Si un libelle
       s'allonge, les deux soupapes mesurees sont .gauge-annotation { letter-spacing }
       (rend ~7px) et .gauge-label { min-width: 0 }. Aucune des deux n'est posee. */
    .world-state-meters { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: space-around; min-height: 0; overflow-y: auto; padding: 4px 0; }
    .gauge { display: flex; align-items: center; gap: 10px; }
    .gauge-dial {
      width: 40px; height: 40px;
      border: 2px solid var(--copper); border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, rgba(212,168,74,0.15), rgba(139,69,19,0.1) 50%, rgba(13,10,6,0.95));
      position: relative;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.05),
                  0 2px 6px rgba(0,0,0,0.3), 0 0 0 1px var(--bg-dark), 0 0 0 2px rgba(184,115,51,0.3);
      flex-shrink: 0;
    }
    .gauge-dial::before {
      content: ''; position: absolute; inset: -4px;
      border: 1px solid var(--brass); border-radius: 50%; opacity: 0.3;
      background: repeating-conic-gradient(from 0deg, transparent 0deg 6deg, rgba(212,168,74,0.1) 6deg 12deg);
    }
    .gauge-dial::after {
      content: ''; position: absolute; inset: 2px; border-radius: 50%;
      background: repeating-conic-gradient(from -90deg, var(--brass) 0deg 1deg, transparent 1deg 15deg);
      opacity: 0.4;
      -webkit-mask: radial-gradient(circle, transparent 60%, black 62%, black 100%);
      mask: radial-gradient(circle, transparent 60%, black 62%, black 100%);
    }
    .gauge-needle {
      position: absolute; bottom: 50%; left: 50%;
      width: 2px; height: 14px;
      background: linear-gradient(to top, var(--vermeil), #ff8a65);
      transform-origin: bottom center;
      transform: translateX(-50%) rotate(var(--rotation, 0deg));
      border-radius: 1px 1px 0 0;
      box-shadow: 0 0 6px var(--vermeil);
      clip-path: polygon(20% 100%, 80% 100%, 50% 0%);
    }
    .gauge-center {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 8px; height: 8px;
      background: radial-gradient(circle at 30% 30%, var(--gold), var(--brass) 60%, var(--rust));
      border-radius: 50%; border: 1px solid var(--copper);
      box-shadow: 0 0 4px rgba(212,168,74,0.4);
    }
    .gauge-label {
      font-family: 'Share Tech Mono', monospace; font-size: 13px; font-weight: bold;
      letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); flex: 1;
      text-shadow: 0 0 4px rgba(212,168,74,0.3);
    }
    .gauge-value {
      font-family: 'Share Tech Mono', monospace; font-size: 12px;
      color: var(--amber); text-shadow: 0 0 8px rgba(255,191,0,0.3);
    }

    /* Center Column */
    .center-column { display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 8px; padding: 0; min-width: 0; }
    .map-viewport {
      flex: 1 1 0; min-height: 0; position: relative; overflow: hidden;
      /* Fallback bleu-noir tr?s sombre coh?rent avec le fog (au cas o? la
         texture R2 ne charge pas). Voir backlog #19bis. */
      background: url('https://pub-b7c4182c1bef4528a3521d6125d2e70a.r2.dev/Images/TEALBG1.jpg') center/cover no-repeat #08081a;
      border: 3px solid var(--copper); border-radius: 4px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    }
    /* Coins brass d?coratifs (3 ?querres : HG, BG, BD ? pas HD ? cause de la minimap) */
    .map-viewport::before, .map-viewport::after {
      content: ''; position: absolute; width: 40px; height: 40px;
      border-color: var(--brass); border-style: solid; z-index: 20; pointer-events: none;
      background: none; box-shadow: none; border-radius: 0;
    }
    /* Haut-gauche : override la pastille h?rit?e de .panel::before */
    .map-viewport::before {
      top: 8px; left: 8px;
      border-width: 3px 0 0 3px;
    }
    /* Bas-droite */
    .map-viewport::after {
      bottom: 8px; right: 8px;
      border-width: 0 3px 3px 0;
    }
    /* Bas-gauche : inject? via un span absolu dans le viewport */
    .map-viewport .corner-bl {
      position: absolute; bottom: 8px; left: 8px;
      width: 40px; height: 40px;
      border-color: var(--brass); border-style: solid;
      border-width: 0 0 3px 3px;
      z-index: 20; pointer-events: none;
    }
    canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
    .map-viewport #map-static { z-index: 1; pointer-events: none; }
    .map-viewport #map-dynamic { z-index: 2; cursor: crosshair; }

    /* Fiche entite (v1 tardigrade) : panneau flottant generique ancre en haut-
       gauche de .map-viewport, SOUS l'equerre doree ::before (top:8px/left:8px,
       40px). Une seule fiche vivante a la fois (ouvrirFiche remplace le contenu du
       noeud reutilise). Rendu brut, palette existante ; Claude Design reprendra. */
    .fiche-entite {
      position: absolute; top: 56px; left: 8px; z-index: 30;
      min-width: 190px; max-width: 260px;
      padding: 12px 14px 14px;
      background: linear-gradient(180deg, rgba(13,10,6,0.96), rgba(26,20,8,0.97));
      border: 2px solid var(--copper); border-radius: 4px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.5), inset 0 0 24px rgba(0,0,0,0.4);
      color: #e8dcc0; font-family: 'Share Tech Mono', monospace;
      display: none;
    }
    .fiche-entite.show { display: block; }
    .fiche-entite-close {
      position: absolute; top: 4px; right: 6px;
      background: none; border: none; color: var(--brass);
      font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px;
    }
    .fiche-entite-close:hover { color: #d4a84a; }
    .fiche-entite-sprite {
      display: block; width: 64px; height: 64px; margin: 2px auto 8px;
      image-rendering: pixelated;
    }
    .fiche-entite-titre {
      font-family: 'Cinzel', serif; font-size: 16px; letter-spacing: 0.08em;
      color: var(--brass); text-align: center; margin-bottom: 2px;
    }
    .fiche-entite-soustitre {
      font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
      color: var(--copper); text-align: center; margin-bottom: 10px;
    }
    .fiche-entite-champ {
      display: flex; justify-content: space-between; gap: 12px;
      padding: 4px 0; border-top: 1px solid rgba(184,115,51,0.18);
    }
    .fiche-entite-champ .label {
      color: var(--copper); font-size: 10px; letter-spacing: 0.08em;
      text-transform: uppercase; align-self: center;
    }
    .fiche-entite-champ .valeur { color: #e8dcc0; font-size: 12px; text-align: right; }

    /* Variante « centre » : fiche ouverte depuis un build (clic tardigrade
       intérieur). Centrée à l'écran, AU-DESSUS de .enter-overlay (5000), taille ×2.
       La fiche carte (classe de base seule) n'est PAS affectée : ces règles
       ajoutent une classe, elles ne modifient pas la base. */
    .fiche-entite--centre {
      position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
      transform: translate(-50%, -50%);
      z-index: 5200;
      min-width: 380px; max-width: 520px;
      padding: 24px 28px 28px;
    }
    .fiche-entite--centre .fiche-entite-sprite { width: 128px; height: 128px; margin: 4px auto 16px; }
    .fiche-entite--centre .fiche-entite-titre { font-size: 32px; margin-bottom: 4px; }
    .fiche-entite--centre .fiche-entite-soustitre { font-size: 22px; margin-bottom: 20px; }
    .fiche-entite--centre .fiche-entite-champ { padding: 8px 0; }
    .fiche-entite--centre .fiche-entite-champ .label { font-size: 20px; }
    .fiche-entite--centre .fiche-entite-champ .valeur { font-size: 24px; }
    .fiche-entite--centre .fiche-entite-close { top: 8px; right: 12px; font-size: 30px; }

    /* Flottement doux du tardigrade intérieur (CSS pur, pas de JS, rien à arrêter).
       L'élément animé (#interior-pet, le wrapper) porte transform:translateX(-50%)
       inline pour son centrage horizontal → les keyframes le CONSERVENT et n'ajoutent
       qu'une oscillation verticale légère, sinon le centrage sauterait. Subtil : un
       balancement, pas une gigue. */
    @keyframes interiorPetFloat {
      0%   { transform: translateX(-50%) translateY(0); }
      50%  { transform: translateX(-50%) translateY(-6px); }
      100% { transform: translateX(-50%) translateY(0); }
    }
    .interior-pet-float { animation: interiorPetFloat 3.6s ease-in-out infinite; }
    /* Label nom au-dessus de la tête du tardigrade intérieur (étiquette dorée,
       cohérente avec le panneau INSIDE : Cinzel, violet raisin mat s'accordant au
       corps du tardigrade). Halo clair (pas ombre sombre) pour détacher ce violet
       moyen-foncé des zones sombres du décor. */
    .interior-pet-label {
      font-family: 'Cinzel', serif;
      font-size: 17px;
      letter-spacing: 0.12em;
      color: #5b3a8c;
      text-align: center;
      margin-bottom: 4px;
      text-shadow: 0 1px 4px rgba(255,255,255,0.5);
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
    }

    /* --- CORBEAUX & BUILDERS ? boutons compacts --- */
    .division-button {
      cursor: pointer;
      padding: 14px 16px 12px;
      background: rgba(184,115,51,0.05);
      border: 1px solid var(--copper);
      border-radius: 4px;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .division-button:hover {
      background: rgba(184,115,51,0.12);
      border-color: var(--brass);
      box-shadow: 0 0 16px rgba(212,168,74,0.25), inset 0 0 12px rgba(212,168,74,0.08);
    }
    .division-button-icon {
      width: 32px; height: 32px;
      animation: pistonMove 2s ease-in-out infinite;
    }
    .division-button-icon svg {
      fill: var(--brass);
      stroke: var(--copper);
      stroke-width: 1;
    }
    .division-button-names {
      display: flex;
      gap: 18px;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    .division-button-name {
      font-family: 'Cinzel', serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-shadow: 0 0 4px rgba(212,168,74,0.2);
    }
    .division-button-name.huginn { color: var(--brass); }
    .division-button-name.muninn { color: var(--copper); }
    .division-button-name.limon { color: var(--limon); }
    .division-button-name.vermeil { color: var(--vermeil); }
    .division-button-name.ocre { color: var(--ocre); }
    .division-button-name.indigo { color: var(--indigo); }

    /* Mini codex Brass Sentinels (dashboard).
       La rangée du bas est figée à height:110px sur le wrapper flex parent ;
       ce panneau et la Construction Guild voisine remplissent cette hauteur
       (height:100%), ce qui aligne les deux et libère la hauteur de la map. */
    .raven-codex-panel {
      padding: 8px 10px !important;
      overflow: hidden;
      gap: 0 !important;
      align-items: stretch !important;
      height: 100% !important;
      box-sizing: border-box;
    }
    .raven-codex-spread {
      flex: 1;
      min-height: 0;
      display: flex;
      gap: 6px;
      position: relative;
    }
    .raven-codex-spread::before {
      content: '';
      position: absolute;
      top: 4px; bottom: 4px;
      left: 50%;
      width: 1px;
      background: linear-gradient(180deg,
        transparent 0%, var(--copper) 20%, var(--brass) 50%, var(--copper) 80%, transparent 100%);
      box-shadow: 0 0 4px rgba(212,168,74,0.4);
      transform: translateX(-50%);
      z-index: 2;
    }
    .raven-codex-page {
      flex: 1;
      min-width: 0;
      padding: 2px 6px;
      overflow: hidden;
      position: relative;
    }
    .raven-codex-page::after {
      content: ''; display: block; clear: both;
    }
    .raven-codex-portrait {
      width: 88px;
      height: 88px;
      background-size: cover;
      background-position: center center;
      border: 1px solid var(--copper);
      border-radius: 2px;
      box-shadow:
        inset 0 0 0 1px rgba(255,232,144,0.2),
        0 0 8px rgba(212,168,74,0.3);
    }
    .raven-codex-page.huginn .raven-codex-portrait {
      float: left; margin: 0 12px 4px 0;
    }
    .raven-codex-page.muninn .raven-codex-portrait {
      float: right; margin: 0 0 4px 12px;
    }
    .raven-codex-name {
      font-family: 'Cinzel', serif;
      font-size: 20px; font-weight: 700;
      letter-spacing: 0.3em;
      color: var(--brass);
      text-shadow: 0 0 6px rgba(212,168,74,0.5), 0 1px 0 rgba(0,0,0,0.6);
      text-transform: uppercase;
      line-height: 1;
      margin-bottom: 8px;
    }
    .raven-codex-name.muninn { text-align: right; }
    .raven-codex-text {
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 18px;
      line-height: 1.5;
      color: var(--cream);
      text-align: justify;
      /* Garde-fou : le bandeau parent est a hauteur FIXE 110px. A 18px/1.5, un
         commentaire long creverait le cadre. Espace utile mesure pour le texte :
         92px (.raven-codex-spread) - 20px (nom) - 8px (margin) = 64px, soit
         2 lignes de 27px (54px). 3 lignes (81px) debordent et la 3e est coupee
         en deux par l'overflow du panneau -> clamp a 2. */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .raven-codex-text.empty {
      color: var(--copper);
      opacity: 0.55;
    }

    /* --- MODALE TRANSPARENCY --- */
    .ravens-modal-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .ravens-modal-overlay.show { display: flex; }
    .ravens-modal-frame {
      /* Ratio verrouille sur la scene v2 (1700/950 = 1.78947) dans les DEUX sens :
         largeur derivee de la hauteur ET hauteur derivee de la largeur -> la scene
         remplit le cadre sans bande ni deformation, ecran large comme etroit. */
      width: min(90vw, calc(88vh * 1700 / 950)); max-width: 1700px;
      height: min(88vh, calc(90vw * 950 / 1700)); max-height: 88vh;
      border: 3px solid var(--copper); border-radius: 6px;
      background: radial-gradient(140% 90% at 50% -8%, rgba(28,21,9,0.92) 0%, rgba(12,9,5,0.92) 55%, rgba(7,5,2,0.92) 100%);
      overflow: hidden;
      box-shadow: inset 0 0 60px rgba(0,0,0,0.5),
                  0 0 50px rgba(212,168,74,0.3),
                  0 8px 30px rgba(0,0,0,0.6);
      position: relative;
    }
    .ravens-modal-frame::before, .ravens-modal-frame::after {
      content: ''; position: absolute; top: 12px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5),
                  inset 1px 1px 2px rgba(255,232,144,0.4),
                  0 0 6px rgba(212,168,74,0.4);
    }
    .ravens-modal-frame::before { left: 12px; }
    .ravens-modal-frame::after { right: 12px; }

    /* ============================================================
       BRASS SENTINELS - reskin maquette Design (scene 1440x900 scale-to-fit).
       Fonds en rgba ~0.92 (verre depoli, fumee visible via z-index 6000).
       Keyframes rg* portees telles quelles depuis la maquette.
       ============================================================ */
    @keyframes rgSpin{to{transform:rotate(360deg);}}
    @keyframes rgSpinRev{to{transform:rotate(-360deg);}}
    @keyframes rgShine{0%{background-position:120% 0;}55%{background-position:-20% 0;}100%{background-position:-20% 0;}}
    @keyframes rgGlowI{0%,100%{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 26px rgba(74,140,180,.12);}50%{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 40px rgba(74,140,180,.34);}}
    @keyframes rgGlowM{0%,100%{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 26px rgba(244,140,80,.16);}50%{box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 42px rgba(255,130,50,.4);}}
    @keyframes rgRise{0%{transform:translateY(0) scale(1);opacity:0;}14%{opacity:.9;}80%{opacity:.7;}100%{transform:translateY(-200px) scale(.25);opacity:0;}}
    @keyframes rgTape{to{background-position:-240px 0;}}
    @keyframes rgLED{0%,100%{opacity:1;box-shadow:0 0 10px #e8616c;}50%{opacity:.25;box-shadow:0 0 3px #e8616c;}}
    .ravens-stage-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;}
    .ravens-stage{position:relative;width:1700px;height:950px;flex:none;transform-origin:center center;overflow:hidden;background:radial-gradient(130% 80% at 50% 6%,rgba(26,19,10,.92) 0%,rgba(14,10,6,.92) 58%,rgba(8,5,3,.92) 100%);box-shadow:0 0 120px rgba(0,0,0,.6) inset;font-family:'Spectral',serif;color:#f1e4c6;}
    .ravens-stage *{box-sizing:border-box;}
    .rg-pill{display:block;padding:7px 20px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:#9a7a44;cursor:pointer;border-radius:20px;}
    .rg-pill.active{background:linear-gradient(180deg,#f0cf78,#c79235);box-shadow:0 0 14px rgba(255,191,0,.4);color:#1a1206;}
    #ravens-content-reports,#ravens-content-protocol{display:none;}
    #ravens-content-reports.active{display:block;}
    #ravens-content-protocol.active{display:flex;}
    .rg-wheel-item{position:absolute;left:14px;right:14px;top:50%;transform-origin:center center;backface-visibility:hidden;-webkit-font-smoothing:antialiased;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s,color .6s;}
    .rg-wheel-time{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:#9a7a44;margin-bottom:6px;opacity:0;transition:opacity .6s;}
    .rg-wheel-text{font-family:'Spectral',serif;font-style:italic;line-height:1.5;transition:font-size .6s;}
    .rg-img{background-color:#0c0a06;background-size:cover;background-repeat:no-repeat;}
    .rg-img-huginn{/* portrait externalise (O2) - charge a la demande via chargerCorbeauxImgs() */}
    .rg-img-muninn{/* portrait externalise (O2) - charge a la demande via chargerCorbeauxImgs() */}
    .ravens-modal-header {
      display: flex; align-items: center;
      padding: 16px 24px;
      border-bottom: 2px solid var(--copper);
      flex-shrink: 0;
    }
    .ravens-modal-title {
      font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.2em;
      text-shadow: 0 0 12px rgba(212,168,74,0.4);
      flex: 1; text-transform: uppercase;
    }
    .ravens-modal-close {
      width: 32px; height: 32px;
      border: 2px solid var(--copper); background: var(--bg-dark);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 16px;
      cursor: pointer; border-radius: 4px; transition: all 0.2s;
    }
    .ravens-modal-close:hover {
      background: var(--copper); color: var(--bg-dark);
      box-shadow: 0 0 14px rgba(212,168,74,0.5);
    }
    .ravens-modal-body {
      flex: 1;
      padding: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    .ravens-tabs-bar {
      display: flex;
      align-items: center;
      gap: 0;
      border-bottom: 1px solid var(--copper);
      padding: 0 24px;
      flex-shrink: 0;
    }
    .ravens-tab {
      padding: 14px 28px;
      font-family: 'Cinzel', serif;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2em;
      color: var(--brass);
      background: none;
      border: none;
      cursor: pointer;
      text-transform: uppercase;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
      transition: all 0.2s;
      text-shadow: 0 0 6px rgba(212,168,74,0.3), 0 1px 0 rgba(0,0,0,0.6);
    }
    .ravens-tab:hover {
      color: var(--gold);
      text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 1px 0 rgba(0,0,0,0.6);
    }
    .ravens-tab.active {
      color: var(--gold);
      background: rgba(212,168,74,0.18);
      border-bottom-color: var(--gold);
      text-shadow: 0 0 10px rgba(255,215,0,0.6);
    }
    .ravens-tab-content {
      display: none;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .ravens-tab-content.active { display: flex; }
    .ravens-tab-content.protocol {
      overflow-y: auto;
      padding: 24px 28px;
      gap: 28px;
    }
    .ravens-tab-content.reports {
      gap: 0;
    }
    .ravens-reports-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
    }
    .ravens-reports-col + .ravens-reports-col {
      border-left: 1px solid var(--copper);
    }
    .ravens-reports-col-header {
      padding: 18px 24px 14px;
      border-bottom: 1px solid var(--copper);
      flex-shrink: 0;
    }
    .ravens-reports-col-header .col-name {
      font-family: 'Cinzel', serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(212,168,74,0.4);
    }
    .ravens-reports-col-header.huginn .col-name { color: var(--brass); }
    .ravens-reports-col-header.muninn .col-name { color: var(--copper); }
    .ravens-reports-col-header .col-tagline {
      display: block;
      margin-top: 4px;
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px;
      color: var(--copper);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      opacity: 0.7;
    }
    .ravens-reports-col-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 18px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .ravens-sentence {
      padding: 14px 18px;
      background: rgba(26,20,8,0.5);
      border: 1px solid rgba(184,115,51,0.4);
      border-radius: 3px;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.25);
    }
    .ravens-sentence-time {
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px;
      letter-spacing: 0.14em;
      color: var(--copper);
      text-transform: uppercase;
      margin-bottom: 8px;
      opacity: 0.85;
    }
    .ravens-sentence-text {
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 15px;
      line-height: 1.7;
      color: var(--cream);
    }
    .ravens-reports-empty {
      text-align: center;
      padding: 32px 16px;
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 13px;
      color: var(--copper);
      opacity: 0.6;
      letter-spacing: 0.05em;
    }
    .ravens-modal-col-left {
      flex: 1; display: flex; flex-direction: column; gap: 20px;
    }

    /* --- CONSTRUCTION GUILD ? modale Pending/Built --- */
    .guild-modal-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .guild-modal-overlay.show { display: flex; }
    /* cadre calqué sur la maquette : fond radial, liseré or, rivets de coin */
    .guild-modal-frame {
      --bg-1:#221a0c; --bg-2:#1a1408; --bg-3:#0d0a06; --bg-4:#080502;
      width: 90vw; max-width: 1700px;
      height: 88vh; max-height: 88vh;
      position: relative;
      display: flex; flex-direction: column; overflow: hidden;
      color: var(--cream);
      background: radial-gradient(130% 90% at 50% -10%, rgba(34,26,12,0.92) 0%, rgba(26,20,8,0.92) 40%, rgba(13,10,6,0.92) 80%, rgba(8,5,2,0.92) 100%);
      border: 1.5px solid rgba(184,115,51,0.6); border-radius: 4px;
      box-shadow: inset 0 0 140px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,191,0,0.12), 0 8px 30px rgba(0,0,0,0.6);
    }
    .guild-modal-frame .corner-rivet {
      position: absolute; top: 13px; width: 11px; height: 11px; border-radius: 50%; z-index: 5;
      background: radial-gradient(circle at 35% 30%, #f0d27a, var(--rust) 70%, #3a1c08);
      box-shadow: 0 0 6px rgba(255,191,0,0.4);
    }
    .guild-modal-frame .corner-rivet.l { left: 13px; }
    .guild-modal-frame .corner-rivet.r { right: 13px; }

    /* header animé (engrenage double + titre shimmer + devise + médaillon fermer) */
    @keyframes guildSpin    { to { transform: rotate(360deg); } }
    @keyframes guildSpinRev { to { transform: rotate(-360deg); } }
    @keyframes guildShine   { 0% { background-position:100% 0; } 40% { background-position:0% 0; } 100% { background-position:0% 0; } }
    .guild-modal-frame .header {
      flex: none; position: relative; display: flex; align-items: center; justify-content: space-between;
      padding: 24px 32px 22px; border-bottom: 1px solid rgba(184,115,51,0.4);
      background: linear-gradient(180deg, rgba(48,36,16,0.55), rgba(0,0,0,0));
    }
    .guild-modal-frame .header::after { content:""; position:absolute; left:30px; right:30px; bottom:-1px; height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,191,0,0.35), transparent); }
    .guild-modal-frame .brand { display:flex; align-items:center; gap:24px; }
    .guild-modal-frame .gear { position:relative; width:62px; height:62px; flex:none; }
    .guild-modal-frame .cog  { position:absolute; inset:0; animation:guildSpin 26s linear infinite; filter:drop-shadow(0 0 9px rgba(255,191,0,0.3)); }
    .guild-modal-frame .cog2 { position:absolute; left:-16px; bottom:-14px; width:34px; height:34px; animation:guildSpinRev 16s linear infinite; }
    .guild-modal-frame .teeth { position:absolute; inset:0; border-radius:50%;
      background:repeating-conic-gradient(from 0deg,var(--brass) 0deg 11deg,transparent 11deg 24deg);
      -webkit-mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px);
              mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px); }
    .guild-modal-frame .teeth.sm {
      background:repeating-conic-gradient(from 0deg,var(--rust) 0deg 13deg,transparent 13deg 28deg);
      -webkit-mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px);
              mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px); }
    .guild-modal-frame .rim { position:absolute; left:50%; top:50%; width:48px; height:48px; border-radius:50%;
      transform:translate(-50%,-50%); border:3px solid var(--copper);
      background:radial-gradient(circle at 50% 32%,#3a2c12,#161007);
      box-shadow:inset 0 0 12px rgba(0,0,0,0.75),0 0 0 1px rgba(255,215,0,0.15); }
    .guild-modal-frame .rim.sm { width:24px; height:24px; border:2px solid var(--rust); background:radial-gradient(circle at 50% 35%,#2a2010,#140f06); box-shadow:none; }
    .guild-modal-frame .gring { position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid rgba(212,168,74,0.6); }
    .guild-modal-frame .hub { position:absolute; left:50%; top:50%; width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%,#f4d98a,var(--rust)); box-shadow:0 0 6px rgba(0,0,0,0.6),inset 0 0 3px rgba(0,0,0,0.5); }
    .guild-modal-frame .hub.sm { width:7px; height:7px; background:radial-gradient(circle at 35% 30%,#c9a86a,#5a3a14); box-shadow:none; }
    .guild-modal-frame .kicker { font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:5px; color:#c79a4e; text-transform:uppercase; margin-bottom:6px; }
    .guild-modal-frame .title-row { display:flex; align-items:center; gap:16px; }
    .guild-modal-frame .title {
      font-family:'Cinzel',serif; font-weight:700; font-size:27px; letter-spacing:9px;
      background:linear-gradient(100deg,#c2873a 0%,#d8ab4c 30%,#f3e2ab 46%,#fff6db 50%,#f3e2ab 54%,#d8ab4c 70%,#e9c06e 100%);
      background-size:230% 100%; -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
      filter:drop-shadow(0 0 16px rgba(212,168,74,0.3)); animation:guildShine 5s ease-in-out infinite;
    }
    .guild-modal-frame .diamond { width:7px; height:7px; background:var(--copper); transform:rotate(45deg); box-shadow:0 0 6px rgba(184,115,51,0.5); }
    .guild-modal-frame .motto { font-family:'Spectral',serif; font-style:italic; font-size:14px; color:#e0cb93; letter-spacing:1px; margin:7px 0 0 23px; }
    .guild-modal-frame .close-btn {
      position:relative; width:42px; height:42px; border-radius:50%; flex:none;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      color:var(--brass); font-size:21px; font-family:'Spectral',serif;
      background:radial-gradient(circle at 50% 32%,#2c2110,#110c05); border:2px solid var(--copper);
      box-shadow:inset 0 1px 0 rgba(255,224,150,0.35),inset 0 0 12px rgba(0,0,0,0.7),0 2px 6px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.4);
      text-shadow:0 0 8px rgba(212,168,74,0.4); transition:color .25s,border-color .25s,box-shadow .25s,text-shadow .25s;
    }
    .guild-modal-frame .close-btn:hover {
      color:var(--gold); border-color:#e8c878;
      box-shadow:inset 0 1px 0 rgba(255,224,150,0.45),inset 0 0 10px rgba(0,0,0,0.6),0 0 18px rgba(255,191,0,0.45),0 2px 6px rgba(0,0,0,0.5);
      text-shadow:0 0 14px rgba(255,191,0,0.7);
    }
    .guild-modal-frame .close-btn .glint {
      position:absolute; inset:-3px; border-radius:50%;
      background:conic-gradient(from 0deg, rgba(255,215,0,0) 0deg, rgba(255,215,0,0) 292deg, rgba(255,223,120,.85) 338deg, rgba(255,246,212,1) 357deg, rgba(255,215,0,0) 360deg);
      -webkit-mask:radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
              mask:radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
      animation:guildSpin 3.2s linear infinite; pointer-events:none;
    }
    .guild-modal-frame .close-btn .ring-in { position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(212,168,74,0.3); pointer-events:none; }
    .guild-modal-frame .close-btn .stud { position:absolute; top:1px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d27a,#8b4513); }
    /* === Construction Guild restylée — BUILT à gauche / PENDING à droite ===
       Tout est scopé sous .guild-modal-body pour éviter les collisions avec
       les classes génériques (.tile, .note, .legend, .accent...) du reste du site. */
    .guild-modal-body {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 0;
      overflow: hidden;
    }
    .guild-col-2 {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      padding: 22px 24px;
    }
    .guild-col-2.left { border-right: 1px solid rgba(184,115,51,0.35); }
    .guild-colhead { display: flex; align-items: center; gap: 11px; flex: none; }
    .guild-colhead .g { font-size: 15px; color: var(--copper); }
    .guild-colhead h2 {
      margin: 0;
      font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px;
      letter-spacing: 5px; color: var(--brass); text-transform: uppercase;
    }
    .guild-colsub {
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      letter-spacing: 2px; color: var(--copper-lite); text-transform: uppercase;
      margin: 7px 0 18px 26px; flex: none;
    }
    .guild-col-scroll {
      flex: 1; min-height: 0; overflow-y: auto; padding-right: 10px;
      display: flex; flex-direction: column; gap: 13px;
    }
    .guild-col-scroll::-webkit-scrollbar { width: 10px; }
    .guild-col-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.4); border-radius: 6px; }
    .guild-col-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--copper), var(--rust));
      border-radius: 6px; border: 2px solid rgba(13,10,6,0.8);
    }

    /* --- icônes de type (CSS pur) --- */
    .guild-modal-body .tile {
      position: relative; flex: none; width: 52px; height: 52px;
      border: 1px solid rgba(184,115,51,0.4); border-radius: 6px;
      background: radial-gradient(120% 120% at 50% 30%, #1c1508, #0d0a06);
      box-shadow: inset 0 0 14px rgba(0,0,0,0.7);
      display: flex; align-items: center; justify-content: center;
      /* Ajoute pour l'image de build (.btile-img) : sans lui, l'<img> carree
         depasse des coins arrondis du carre. Sans effet sur les icones CSS,
         qui tiennent deja dans la boite (30-34px dans 52px). */
      overflow: hidden;
    }
    /* Image reelle du build dans le carre d'une fiche BUILT (guildTileHTML).
       contain et NON cover : les PNG sont detoures sur fond transparent, un
       cover rognerait le batiment. contain absorbe aussi un ratio non carre
       sans deformation — le code de generation autorise 3:4 et 4:3, meme si
       le carre 1024x1024 est ce qui sort en pratique.
       Le degrade de fond du .tile reste visible par transparence : voulu. */
    .guild-modal-body .tile .btile-img {
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
    }
    .guild-modal-body .marker { position: relative; width: 30px; height: 30px; }
    .guild-modal-body .marker .ring { position: absolute; left: 50%; top: 50%; width: 23px; height: 23px; border: 1.5px solid var(--c); border-radius: 50%; transform: translate(-50%,-50%); opacity: 0.9; }
    .guild-modal-body .marker .v { position: absolute; left: 50%; top: 50%; width: 1.5px; height: 30px; background: rgba(184,115,51,0.65); transform: translate(-50%,-50%); }
    .guild-modal-body .marker .h { position: absolute; left: 50%; top: 50%; width: 30px; height: 1.5px; background: rgba(184,115,51,0.65); transform: translate(-50%,-50%); }
    .guild-modal-body .marker .dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--c); transform: translate(-50%,-50%); box-shadow: 0 0 6px var(--g); }
    .guild-modal-body .obs { position: relative; width: 34px; height: 30px; }
    .guild-modal-body .obs .base { position: absolute; left: 50%; bottom: 4px; width: 34px; height: 2px; background: rgba(184,115,51,0.65); transform: translateX(-50%); border-radius: 1px; }
    .guild-modal-body .obs .dome { position: absolute; left: 50%; bottom: 6px; width: 26px; height: 13px; border: 1.5px solid var(--c); border-bottom: none; border-radius: 13px 13px 0 0; transform: translateX(-50%); background: radial-gradient(100% 120% at 50% 100%, var(--g), transparent 70%); }
    .guild-modal-body .obs .scope { position: absolute; left: 50%; bottom: 7px; width: 2px; height: 11px; background: var(--gold); transform: translateX(-50%) rotate(20deg); transform-origin: bottom center; box-shadow: 0 0 5px rgba(255,215,0,0.5); }
    .guild-modal-body .lake { position: relative; width: 32px; height: 24px; }
    .guild-modal-body .lake span { position: absolute; left: 50%; border: 1.5px solid var(--c); border-top: none; border-radius: 0 0 60% 60%; transform: translateX(-50%); opacity: 0.85; }
    .guild-modal-body .lake .w1 { bottom: 14px; width: 10px; height: 5px; }
    .guild-modal-body .lake .w2 { bottom: 7px; width: 20px; height: 8px; opacity: 0.7; }
    .guild-modal-body .lake .w3 { bottom: 0; width: 30px; height: 11px; opacity: 0.55; box-shadow: 0 0 8px var(--g); }
    .guild-modal-body .core { position: relative; width: 30px; height: 30px; }
    .guild-modal-body .core .ring { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border: 1.5px solid var(--c); border-radius: 50%; transform: translate(-50%,-50%); opacity: 0.85; box-shadow: 0 0 8px var(--g); }
    .guild-modal-body .core .diam { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; background: var(--c); transform: translate(-50%,-50%) rotate(45deg); box-shadow: 0 0 7px var(--g); }

    /* --- badges & emprise --- */
    .guild-modal-body .tbadge {
      font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 2px;
      color: #e6c882; border: 1px solid rgba(212,168,74,0.55); padding: 2px 8px;
      border-radius: 3px; text-transform: uppercase; background: rgba(212,168,74,0.08);
    }
    .guild-modal-body .fchip {
      display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px;
      border: 1px solid rgba(139,69,19,0.4); border-radius: 4px; background: rgba(0,0,0,0.3);
    }
    .guild-modal-body .fchip .sz { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--copper-soft); }
    .guild-modal-body .footgrid { display: grid; grid-template-columns: repeat(var(--n,1), 1fr); gap: 1.5px; }
    .guild-modal-body .footgrid i { width: 4px; height: 4px; background: var(--c); border-radius: 1px; opacity: 0.85; }

    /* --- carte PENDING --- */
    .guild-modal-body .pcard {
      position: relative; border: 1px solid rgba(184,115,51,0.45); border-left: 3px solid var(--c);
      border-radius: 9px; padding: 22px;
      background: linear-gradient(180deg, rgba(30,22,10,0.82), rgba(12,9,5,0.6));
      box-shadow: inset 0 0 40px rgba(0,0,0,0.5), 0 6px 22px rgba(0,0,0,0.4); overflow: hidden;
    }
    .guild-modal-body .stamp {
      position: absolute; top: 52px; right: -28px; transform: rotate(-7deg);
      font-family: 'Share Tech Mono', monospace; font-weight: bold; font-size: 13px;
      letter-spacing: 3px; color: #ffd54a; border: 2px solid rgba(255,191,0,0.7);
      border-radius: 5px; padding: 6px 36px; background: rgba(255,191,0,0.1);
      text-shadow: 0 0 10px rgba(255,191,0,0.5);
      box-shadow: 0 0 18px rgba(255,191,0,0.28), inset 0 0 12px rgba(255,191,0,0.08);
    }
    .guild-modal-body .ptitle { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
    .guild-modal-body .pname { font-family: 'Cinzel', serif; font-weight: 700; font-size: 19px; letter-spacing: 1px; color: var(--cream); }
    .guild-modal-body .pmeta { display: flex; align-items: center; gap: 9px; margin-top: 7px; flex-wrap: wrap; }
    .guild-modal-body .proposed { font-family: 'Spectral', serif; font-style: italic; font-size: 15px; color: var(--copper); }
    .guild-modal-body .proposed b { font-family: 'Cinzel', serif; font-style: normal; font-weight: 600; color: var(--c); letter-spacing: 1px; }
    .guild-modal-body .pfoot { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; }
    .guild-modal-body .pfoot .lbl { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: #d6b878; letter-spacing: 1px; }
    .guild-modal-body .divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(184,115,51,0.45), transparent); margin-bottom: 18px; }
    .guild-modal-body .vhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
    .guild-modal-body .vhead .l { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 2px; color: var(--copper); text-transform: uppercase; }
    .guild-modal-body .vhead .r { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 1px; color: #bf9a5a; }
    .guild-modal-body .vbar { display: flex; height: 11px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(139,69,19,0.55); background: rgba(0,0,0,0.5); margin-bottom: 12px; }
    .guild-modal-body .vbar .for { background: linear-gradient(90deg, var(--brass), var(--gold)); box-shadow: 0 0 12px rgba(255,215,0,0.45); }
    .guild-modal-body .vbar .against { background: linear-gradient(90deg, var(--rust), var(--vermeil)); }
    .guild-modal-body .legend { display: flex; gap: 20px; margin-bottom: 18px; }
    .guild-modal-body .legend > div { display: flex; align-items: center; gap: 6px; font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--cream); }
    .guild-modal-body .legend .dot { width: 8px; height: 8px; border-radius: 50%; }
    .guild-modal-body .legend .dot.for { background: var(--gold); box-shadow: 0 0 6px rgba(255,215,0,0.5); }
    .guild-modal-body .legend .dot.against { background: var(--vermeil); box-shadow: 0 0 6px rgba(230,57,70,0.5); }
    .guild-modal-body .council { display: flex; align-items: center; gap: 14px; }
    .guild-modal-body .council .c-lbl { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; color: var(--copper-lite); text-transform: uppercase; }
    .guild-modal-body .council .dots { display: flex; gap: 10px; flex-wrap: wrap; }
    .guild-modal-body .voter { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid; }
    .guild-modal-body .note { font-family: 'Spectral', serif; font-style: italic; font-size: 15px; color: var(--copper-lite); text-align: center; margin-top: 18px; }

    /* --- carte BUILT --- */
    .guild-modal-body .bcard {
      position: relative; flex: none; display: flex; align-items: center; gap: 18px;
      padding: 15px 18px; border: 1px solid rgba(184,115,51,0.38); border-left: 3px solid var(--c);
      border-radius: 8px; background: linear-gradient(180deg, rgba(28,21,10,0.68), rgba(12,9,5,0.5));
      box-shadow: inset 0 0 28px rgba(0,0,0,0.4); overflow: hidden; cursor: pointer; transition: all 0.2s;
    }
    .guild-modal-body .bcard:hover { border-color: var(--brass); box-shadow: inset 0 0 28px rgba(0,0,0,0.4), 0 0 14px rgba(212,168,74,0.22); }
    .guild-modal-body .bcard .accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 14px var(--g); }
    .guild-modal-body .bcard .rivet { position: absolute; top: 9px; right: 11px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d27a, #8b4513); }
    .guild-modal-body .bmid { flex: 1; min-width: 0; }
    .guild-modal-body .brow1 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
    .guild-modal-body .brow2 { display: flex; align-items: center; gap: 14px; margin-top: 9px; flex-wrap: wrap; }
    .guild-modal-body .bname { font-family: 'Cinzel', serif; font-weight: 700; font-size: 18px; letter-spacing: 0.5px; color: var(--cream); }
    .guild-modal-body .builder { font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; letter-spacing: 2px; color: var(--c); text-shadow: 0 0 10px var(--g); }
    .guild-modal-body .bwhen { flex: none; text-align: right; }
    .guild-modal-body .bwhen .date { font-family: 'Share Tech Mono', monospace; font-size: 13px; letter-spacing: 1px; color: var(--copper-soft); font-variant-numeric: tabular-nums; }
    .guild-modal-body .bwhen .tick { font-family: 'Share Tech Mono', monospace; font-size: 14px; letter-spacing: 1px; color: var(--amber); margin-top: 5px; font-variant-numeric: tabular-nums; }

    .guild-empty {
      text-align: center;
      padding: 32px 16px;
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 14px;
      color: var(--copper);
      opacity: 0.6;
      letter-spacing: 0.05em;
    }

    /* --- état vide colonne Pending : engrenage dormant (maquette) --- */
    @keyframes guildBreath { 0%,100% { opacity:.45; } 50% { opacity:.7; } }
    @keyframes guildSweep  { 0% { transform:translateX(-120%) skewX(-18deg); } 38% { transform:translateX(340%) skewX(-18deg); } 100% { transform:translateX(340%) skewX(-18deg); } }
    .guild-modal-body .empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; }
    .guild-modal-body .dormant { position:relative; width:88px; height:88px; animation:guildBreath 5s ease-in-out infinite; }
    .guild-modal-body .dormant-teeth { position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,#6e4a1e 0deg 11deg,transparent 11deg 24deg); -webkit-mask:radial-gradient(circle at 50% 50%,transparent 33px,#000 34px,#000 44px,transparent 45px); mask:radial-gradient(circle at 50% 50%,transparent 33px,#000 34px,#000 44px,transparent 45px); }
    .guild-modal-body .dormant-face { position:absolute; left:50%; top:50%; width:64px; height:64px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid rgba(184,115,51,.5); background:radial-gradient(circle at 50% 35%,#1c1508,#0d0a06); }
    .guild-modal-body .dormant-hub { position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%,#7a5526,#3a1c08); }
    .guild-modal-body .dormant-sweep { position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; }
    .guild-modal-body .dormant-sweep span { position:absolute; top:-25%; left:0; width:62%; height:150%; background:linear-gradient(100deg,transparent 22%,rgba(255,226,158,.18) 50%,transparent 78%); filter:blur(4px); transform:skewX(-18deg); animation:guildSweep 6s ease-in-out infinite; }
    .guild-modal-body .empty-title { font-family:'Cinzel',serif; font-weight:600; font-size:18px; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(100deg,#88632f 0%,#a87f47 30%,#d8be84 47%,#f2e6bb 50%,#d8be84 53%,#a07a45 70%,#88632f 100%); background-size:230% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:guildShine 5s ease-in-out infinite; animation-delay:.35s; }
    .guild-modal-body .empty-sub { font-family:'Spectral',serif; font-style:italic; font-size:14px; color:#7a5e34; margin-top:9px; }
    /* Codex enluminé : vignette en lettrine flottante + texte qui coule autour */
    .codex-page {
      padding: 0 4px;
      margin-bottom: 28px;
      overflow: hidden; /* contient les floats */
    }
    .codex-page::after {
      content: ''; display: block; clear: both;
    }
    .codex-vignette {
      width: 140px; height: 140px;
      background-size: cover; background-position: center;
      border: 2px solid var(--copper);
      border-radius: 3px;
      box-shadow:
        inset 0 0 0 1px rgba(255,232,144,0.25),
        0 0 12px rgba(212,168,74,0.25),
        0 4px 10px rgba(0,0,0,0.5);
      position: relative;
      flex-shrink: 0;
    }
    .codex-vignette::before, .codex-vignette::after {
      content: ''; position: absolute;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,232,144,0.4);
    }
    .codex-vignette::before { top: 4px; left: 4px; }
    .codex-vignette::after { bottom: 4px; right: 4px; }
    .codex-vignette.huginn { float: left; margin: 4px 22px 14px 0; }
    .codex-vignette.muninn { float: right; margin: 4px 0 14px 22px; }
    .codex-name {
      font-family: 'Cinzel', serif;
      font-size: 17px; font-weight: 700;
      letter-spacing: 0.32em;
      margin-bottom: 2px;
      text-shadow: 0 0 8px rgba(212,168,74,0.4), 0 1px 0 rgba(0,0,0,0.6);
      text-transform: uppercase;
    }
    .codex-name.huginn { color: var(--brass); }
    .codex-name.muninn { color: var(--copper); text-align: right; }
    .codex-flourish {
      font-family: 'Cinzel', serif;
      font-size: 13px;
      color: var(--copper);
      letter-spacing: 0.3em;
      margin-bottom: 10px;
      opacity: 0.75;
    }
    .codex-flourish.muninn { text-align: right; }
    .codex-tagline {
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 16px;
      color: var(--amber);
      letter-spacing: 0.04em;
      margin-bottom: 10px;
      opacity: 0.9;
    }
    .codex-tagline.muninn { text-align: right; }
    .codex-text {
      font-family: 'Spectral', serif;
      font-size: 17px; line-height: 1.75;
      color: var(--cream);
      text-align: justify;
    }
    .codex-text::first-letter {
      font-family: 'Cinzel', serif;
      font-size: 1.6em;
      font-weight: 700;
      color: var(--brass);
      margin-right: 2px;
    }
    .codex-divider {
      clear: both;
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--copper), transparent);
      margin: 8px 0 24px;
      opacity: 0.7;
    }
    .codex-legal {
      clear: both;
      font-family: 'Spectral', serif;
      font-size: 16px;
      color: var(--cream);
      line-height: 1.8;
      opacity: 0.88;
      padding: 18px 4px 0;
      border-top: 1px solid rgba(184,115,51,0.4);
    }
    .codex-legal .legal-tag {
      font-family: 'Share Tech Mono', monospace;
      font-size: 13px;
      color: var(--brass);
      letter-spacing: 0.25em;
      margin-bottom: 14px;
      text-transform: uppercase;
      display: block;
    }

    /* Codex Reports — double-page livre, dernière paire Huginn/Muninn */
    .codex-spread {
      display: flex;
      gap: 0;
      height: 100%;
      position: relative;
    }
    .codex-spread::before {
      content: '';
      position: absolute;
      top: 24px; bottom: 24px;
      left: 50%;
      width: 2px;
      background: linear-gradient(180deg,
        transparent 0%, var(--copper) 10%, var(--brass) 50%, var(--copper) 90%, transparent 100%);
      box-shadow: 0 0 8px rgba(212,168,74,0.4);
      transform: translateX(-50%);
      z-index: 2;
    }
    .codex-spread::after {
      content: '';
      position: absolute;
      top: 24px; bottom: 24px;
      left: 50%;
      width: 14px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);
      transform: translateX(-50%);
      z-index: 1;
      pointer-events: none;
    }
    .codex-spread-page {
      flex: 1;
      padding: 32px 40px;
      overflow-y: auto;
      position: relative;
      z-index: 3;
    }
    .codex-spread-page::after {
      content: ''; display: block; clear: both;
    }
    .codex-spread-portrait {
      width: 280px; height: 480px;
      background-size: cover; background-position: center top;
      border: 3px solid var(--copper);
      border-radius: 4px;
      box-shadow:
        inset 0 0 0 1px rgba(255,232,144,0.3),
        0 0 20px rgba(212,168,74,0.35),
        0 6px 16px rgba(0,0,0,0.6);
      position: relative;
      flex-shrink: 0;
    }
    .codex-spread-portrait.huginn { float: left; margin: 0 28px 18px 0; }
    .codex-spread-portrait.muninn { float: right; margin: 0 0 18px 28px; }
    .codex-spread-portrait::before, .codex-spread-portrait::after {
      content: ''; position: absolute;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,232,144,0.4);
    }
    .codex-spread-portrait::before { top: 6px; left: 6px; }
    .codex-spread-portrait::after { bottom: 6px; right: 6px; }
    .codex-spread-name {
      font-family: 'Cinzel', serif;
      font-size: 26px; font-weight: 700;
      letter-spacing: 0.4em;
      text-shadow: 0 0 12px rgba(212,168,74,0.5), 0 1px 0 rgba(0,0,0,0.6);
      text-transform: uppercase;
      margin-bottom: 4px;
    }
    .codex-spread-name.huginn { color: var(--brass); }
    .codex-spread-name.muninn { color: var(--copper); text-align: right; }
    .codex-spread-flourish {
      font-family: 'Cinzel', serif;
      font-size: 15px;
      color: var(--copper);
      letter-spacing: 0.3em;
      opacity: 0.75;
      margin-bottom: 22px;
    }
    .codex-spread-flourish.muninn { text-align: right; }
    .codex-spread-text {
      font-family: 'Spectral', serif;
      font-size: 17px;
      line-height: 1.9;
      color: var(--cream);
      font-style: italic;
      text-align: justify;
    }
    .codex-spread-text::first-letter {
      font-family: 'Cinzel', serif;
      font-size: 2em;
      font-weight: 700;
      font-style: normal;
      color: var(--brass);
      margin-right: 3px;
      line-height: 1;
    }
    .codex-spread-empty {
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 14px;
      color: var(--copper);
      opacity: 0.6;
      letter-spacing: 0.05em;
      text-align: center;
      margin-top: 40px;
    }
    .codex-spread-footer {
      flex-shrink: 0;
      text-align: center;
      padding: 12px 24px;
      font-family: 'Share Tech Mono', monospace;
      font-size: 12px;
      color: var(--copper);
      letter-spacing: 0.25em;
      text-transform: uppercase;
      border-top: 1px solid rgba(184,115,51,0.4);
      opacity: 0.85;
    }

    /* Right column */
    .right-column { display: flex; flex-direction: column; min-height: 0; overflow: hidden; gap: 8px; padding: 0; }
    .feed-panel { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
    .feed-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-shrink: 0; }
    .feed-tab {
      flex: 1; padding: 6px;
      background: linear-gradient(180deg, rgba(184,115,51,0.2), rgba(13,10,6,0.8));
      border: 2px solid var(--copper); border-radius: 4px; color: var(--copper);
      font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.1em;
      text-transform: uppercase; cursor: pointer; transition: all 0.2s;
    }
    .feed-tab:hover, .feed-tab.active {
      background: linear-gradient(180deg, rgba(212,168,74,0.3), rgba(184,115,51,0.2));
      border-color: var(--brass); color: var(--brass);
      box-shadow: 0 0 10px rgba(212,168,74,0.2);
    }
    .feed-messages {
      flex: 1 1 0; min-height: 0; overflow-y: auto;
      display: flex; flex-direction: column; gap: 8px; padding-right: 6px;
    }

    /* --- SCROLLBARS LAITON UNIFI?ES (incl. modales + map) --- */
    .feed-messages::-webkit-scrollbar,
    .residents-list::-webkit-scrollbar,
    .left-column ::-webkit-scrollbar,
    .right-column ::-webkit-scrollbar,
    .machine-modal-body::-webkit-scrollbar,
    .modal-votes-list::-webkit-scrollbar,
    .thread-content::-webkit-scrollbar,
    .votes-drawer-col-scroll::-webkit-scrollbar,
    .ravens-reports-col-scroll::-webkit-scrollbar,
    .ravens-tab-content.protocol::-webkit-scrollbar,
    .guild-col-scroll::-webkit-scrollbar { width: 10px; }

    .feed-messages::-webkit-scrollbar-track,
    .residents-list::-webkit-scrollbar-track,
    .left-column ::-webkit-scrollbar-track,
    .right-column ::-webkit-scrollbar-track,
    .machine-modal-body::-webkit-scrollbar-track,
    .modal-votes-list::-webkit-scrollbar-track,
    .thread-content::-webkit-scrollbar-track,
    .votes-drawer-col-scroll::-webkit-scrollbar-track,
    .ravens-reports-col-scroll::-webkit-scrollbar-track,
    .ravens-tab-content.protocol::-webkit-scrollbar-track,
    .guild-col-scroll::-webkit-scrollbar-track {
      background: linear-gradient(90deg, var(--bg-dark) 0%, #1a1408 50%, var(--bg-dark) 100%);
      border: 1px solid var(--rust); box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
    }

    .feed-messages::-webkit-scrollbar-thumb,
    .residents-list::-webkit-scrollbar-thumb,
    .left-column ::-webkit-scrollbar-thumb,
    .right-column ::-webkit-scrollbar-thumb,
    .machine-modal-body::-webkit-scrollbar-thumb,
    .modal-votes-list::-webkit-scrollbar-thumb,
    .thread-content::-webkit-scrollbar-thumb,
    .votes-drawer-col-scroll::-webkit-scrollbar-thumb,
    .ravens-reports-col-scroll::-webkit-scrollbar-thumb,
    .ravens-tab-content.protocol::-webkit-scrollbar-thumb,
    .guild-col-scroll::-webkit-scrollbar-thumb {
      background:
        linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%),
        linear-gradient(180deg, var(--gold) 0%, var(--brass) 30%, var(--copper) 60%, var(--rust) 100%);
      border: 1px solid var(--rust); border-top: 1px solid var(--gold);
      box-shadow: inset 0 1px 0 rgba(255,215,0,0.4), 0 0 4px rgba(212,168,74,0.3);
    }

    .feed-messages::-webkit-scrollbar-thumb:hover,
    .residents-list::-webkit-scrollbar-thumb:hover,
    .left-column ::-webkit-scrollbar-thumb:hover,
    .right-column ::-webkit-scrollbar-thumb:hover,
    .machine-modal-body::-webkit-scrollbar-thumb:hover,
    .modal-votes-list::-webkit-scrollbar-thumb:hover,
    .thread-content::-webkit-scrollbar-thumb:hover,
    .votes-drawer-col-scroll::-webkit-scrollbar-thumb:hover,
    .ravens-reports-col-scroll::-webkit-scrollbar-thumb:hover,
    .ravens-tab-content.protocol::-webkit-scrollbar-thumb:hover,
    .guild-col-scroll::-webkit-scrollbar-thumb:hover {
      background:
        linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%),
        linear-gradient(180deg, #ffe890 0%, var(--gold) 30%, var(--brass) 60%, var(--copper) 100%);
      box-shadow: inset 0 1px 0 rgba(255,232,144,0.6), 0 0 8px rgba(255,215,0,0.5);
    }
    .residents-list, .feed-messages, .machine-modal-body, .modal-votes-list, .thread-content, .votes-drawer-col-scroll, .ravens-reports-col-scroll, .ravens-tab-content.protocol, .guild-col-scroll {
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }

    .message { padding: 6px 0; border-bottom: 1px solid rgba(184,115,51,0.2); }
    .message-header { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
    .message-author { font-size: 20px; font-weight: 500; letter-spacing: 0.05em; }
    .message-author.limon { color: var(--limon); }
    .message-author.vermeil { color: var(--vermeil); }
    .message-author.ocre { color: var(--ocre); }
    .message-author.indigo { color: var(--indigo); }
    .message-time { font-family: 'Share Tech Mono', monospace; font-size: 15px; color: var(--copper); }
    .message-content { font-size: 17px; line-height: 1.4; color: var(--cream); }
    /* Fait moteur (entrée/sortie) : pas de bloc auteur, ligne discrète — mais datée
       depuis 2026-07-28 (même helper formatMsgTime que les messages de contenu, source
       messages.timestamp). Le .message-time standard (mono 15px) serait trop lourd ici :
       registre propre, plus petit et plus effacé. */
    .message.message-presence { padding: 4px 6px; text-align: center; }
    .message.message-presence .message-content {
      display: inline;
      font-size: 13px; font-style: italic; letter-spacing: 0.04em;
      color: var(--amber); opacity: 0.75;
    }
    /* Nom de l'habitant dans une ligne presence : seule la couleur change, tout
       le reste (italique, taille, interlettrage) est herite du parent.
       NB : l'opacite 0.75 du parent s'applique aussi a ce span (l'opacite n'est
       pas surchargeable par un enfant) — la teinte reste nettement distincte. */
    .presence-name { font-style: inherit; }
    .presence-name.limon   { color: var(--limon); }
    .presence-name.vermeil { color: var(--vermeil); }
    .presence-name.ocre    { color: var(--ocre); }
    .presence-name.indigo  { color: var(--indigo); }
    .presence-name.axiom   { color: var(--axiom); }
    .presence-name.pandore { color: #cc44ff; }
    /* Timestamp volontairement UN CRAN sous le texte (0.6 vs 0.75) : les deux sont dores,
       mais le fait reste primaire et sa date secondaire. */
    .message-presence-time {
      display: inline; margin-top: 0;
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      letter-spacing: 0.05em; color: var(--amber); opacity: 0.6;
    }
    /* Tiret cadratin en pseudo-element : le glyphe vit dans le CSS (\2014), donc
       aucun caractere non-ASCII n'entre dans index.html. Disparait avec le span
       si la date est absente. */
    .message-presence-time::before {
      content: "\2014";
      margin: 0 6px;
      opacity: 0.6;
    }
    .message.axiom {
      text-align: center; padding: 8px 6px;
      background: linear-gradient(90deg, transparent, rgba(184,115,51,0.1), transparent);
      border: none; position: relative;
    }
    .message.axiom::before, .message.axiom::after {
      content: ''; position: absolute; left: 10%; right: 10%; height: 2px;
      background: linear-gradient(90deg, transparent, var(--brass), transparent);
    }
    .message.axiom::before { top: 0; }
    .message.axiom::after { bottom: 0; }
    .message.axiom .message-content {
      font-family: 'Share Tech Mono', monospace; font-size: 12px;
      letter-spacing: 0.15em; text-transform: uppercase; color: var(--axiom);
    }

    /* AXIOM rapport : style distinct, mini-bandeau discret cuivr? */
    .message.axiom-report {
      padding: 6px 10px;
      background: linear-gradient(90deg, rgba(184,115,51,0.06), rgba(184,115,51,0.12), rgba(184,115,51,0.06));
      border-left: 2px solid var(--copper);
      border-bottom: 1px solid rgba(184,115,51,0.15);
      margin: 4px 0;
      border-radius: 0 4px 4px 0;
    }
    .message.axiom-report .message-header {
      display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
    }
    .message-axiom-icon {
      color: var(--brass); font-size: 13px; opacity: 0.8;
      text-shadow: 0 0 4px rgba(212,168,74,0.4);
    }
    .message.axiom-report .message-author.axiom {
      font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600;
      letter-spacing: 0.2em; color: var(--axiom); text-transform: uppercase;
    }
    .message.axiom-report .message-time {
      margin-left: auto;
    }
    .message.axiom-report .message-content {
      font-family: 'Spectral', serif; font-size: 12px; line-height: 1.4;
      color: var(--cream); opacity: 0.85; font-style: italic;
    }

    /* ============================================================
       Panneau TRANSMISSION LOG (page principale) - fil unifie etroit.
       Maquette Design "P1 deux etages". Prefixe fp-* scope sous
       #feed-messages.
       ⚠ NE JAMAIS restyler .message* ici : ces classes sont PARTAGEES
       avec le chat interieur "Inside Voices" (msgInterieurHTML). Tout ce
       qui suit vit sous des classes NEUVES, aucune ne cite .message.
       Contrainte de largeur : la colonne fait 360px, moins bordure (2x2)
       et padding (2x10) du .panel, moins 6px de gouttiere = 330px utiles.
       Les colonnes fixes du style B de la modale (284px) n'y tiennent pas :
       ici l'en-tete prend une ligne, la description prend la suivante SUR
       TOUTE LA LARGEUR et REVIENT A LA LIGNE. Jamais de nowrap, jamais
       d'ellipsis : tronquer couperait 90% des CHECK_TILE (73 a 117
       caracteres ; description moyenne 49, p90 88, max 173).
       ============================================================ */

    /* --- separateur de tick, leger. Affiche SEULEMENT si le tick n'a pas
       deja ete annonce par AXIOM : sans lui, un tick sans annonce perd sa
       frontiere et se colle au precedent -- faux signal de continuite. --- */
    #feed-messages .fp-tick { display: flex; align-items: center; gap: 10px; margin: 4px 0 2px; }
    #feed-messages .fp-tick i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184,115,51,.35), rgba(184,115,51,.05)); }
    #feed-messages .fp-tick span { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 2px; color: #9a7a44; text-transform: uppercase; white-space: nowrap; }

    /* --- GESTE, deux etages --- */
    #feed-messages .fp-ln { padding: 5px 0 6px 8px; border-left: 2px solid var(--c, var(--copper)); }
    #feed-messages .fp-h { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
    #feed-messages .fp-med {
      flex: none; width: 22px; height: 22px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(184,115,51,.42);
      background: radial-gradient(circle at 38% 28%, #241a0c, #0d0a06);
      box-shadow: 0 0 6px rgba(184,115,51,.2), inset 0 0 5px rgba(0,0,0,.7);
    }
    #feed-messages .fp-med svg { width: 13px; height: 13px; fill: none; stroke: #c9932f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    /* fallback F1 : deux lettres du verbe. Jamais un rond vide. */
    #feed-messages .fp-med-txt { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: .5px; color: #c9932f; text-transform: uppercase; line-height: 1; }
    #feed-messages .fp-who { font-family: 'Cinzel', serif; font-weight: 600; font-size: 12px; letter-spacing: 1.8px; color: var(--c, var(--copper)); }
    #feed-messages .fp-verb { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1.2px; color: #8a6f42; text-transform: uppercase; }
    #feed-messages .fp-time { font-family: 'Share Tech Mono', monospace; font-size: 9px; color: #8a6f42; margin-left: auto; }
    /* LE point de la maquette : pleine largeur, ca wrappe, ca ne tronque pas. */
    #feed-messages .fp-desc { font-family: 'Share Tech Mono', monospace; font-size: 12px; line-height: 1.5; color: #c9b48a; overflow-wrap: anywhere; }

    /* --- geste REFUSE : present, degrade. Un refus est observable. --- */
    #feed-messages .fp-ln.fp-rj { opacity: .5; border-left-style: dashed; border-left-color: rgba(139,69,19,.6); }
    #feed-messages .fp-ln.fp-rj .fp-med { border-color: rgba(139,69,19,.45); box-shadow: none; }
    #feed-messages .fp-ln.fp-rj .fp-med svg { stroke: #8b4513; }
    #feed-messages .fp-ln.fp-rj .fp-med-txt { color: #8b4513; }
    #feed-messages .fp-ln.fp-rj .fp-verb { color: #a3552c; }
    #feed-messages .fp-ln.fp-rj .fp-desc { color: #8a7a5a; }

    /* --- message prive : relation seule, JAMAIS de contenu --- */
    #feed-messages .fp-ln.fp-mp .fp-desc { color: #a89675; font-style: italic; }
    #feed-messages .fp-ln.fp-mp .fp-desc b { font-style: normal; font-weight: 400; color: #c9b48a; }

    /* --- consultations (famille B), repliees par defaut --- */
    #feed-messages .fp-cons {
      display: flex; align-items: center; gap: 8px; margin-left: 8px;
      padding: 3px 11px 3px 5px; align-self: flex-start;
      border: 1px dashed rgba(184,115,51,.32); border-radius: 14px;
      background: rgba(20,15,8,.4); cursor: pointer; transition: all .2s;
    }
    #feed-messages .fp-cons:hover { border-color: rgba(212,168,74,.6); background: rgba(30,22,10,.6); }
    #feed-messages .fp-cons .fp-med { width: 20px; height: 20px; }
    #feed-messages .fp-cons .fp-med svg { width: 12px; height: 12px; stroke: #9a7a44; }
    #feed-messages .fp-cons-t { font-family: 'Share Tech Mono', monospace; font-size: 9.5px; letter-spacing: 1.4px; color: #9a7a44; text-transform: uppercase; }
    #feed-messages .fp-cons-n { font-family: 'Cinzel', serif; font-weight: 700; font-size: 9.5px; color: var(--bg-dark); background: #b8853a; border-radius: 8px; padding: 1px 6px; letter-spacing: 1px; }
    #feed-messages .fp-cons-open { display: none; flex-direction: column; gap: 4px; }
    #feed-messages .fp-cons-open.open { display: flex; }
    /* consultation depliee : un cran SOUS le geste (l'IA regarde, n'agit pas) */
    #feed-messages .fp-ln.fp-look { border-left-color: rgba(184,115,51,.4); border-left-style: dotted; }
    #feed-messages .fp-ln.fp-look .fp-who { color: #8a6f42; }
    #feed-messages .fp-ln.fp-look .fp-desc { color: #a89675; }

    /* --- PAROLE : gabarit du panneau (20/17), classes neuves --- */
    #feed-messages .fp-msg { padding: 6px 0; border-bottom: 1px solid rgba(184,115,51,0.2); }
    #feed-messages .fp-msg-h { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
    #feed-messages .fp-msg-who { font-size: 20px; font-weight: 500; letter-spacing: 0.05em; color: var(--c, var(--copper)); }
    #feed-messages .fp-msg-time { font-family: 'Share Tech Mono', monospace; font-size: 15px; color: var(--copper); }
    #feed-messages .fp-msg-body { font-size: 17px; line-height: 1.4; color: var(--cream); white-space: pre-wrap; word-break: break-word; }

    /* --- AXIOM pivot : bandeau mono a filets laiton --- */
    #feed-messages .fp-ax { position: relative; padding: 8px 0; text-align: center; }
    #feed-messages .fp-ax::before, #feed-messages .fp-ax::after {
      content: ''; position: absolute; left: 10%; right: 10%; height: 2px;
      background: linear-gradient(90deg, transparent, var(--brass), transparent);
    }
    #feed-messages .fp-ax::before { top: 0; }
    #feed-messages .fp-ax::after { bottom: 0; }
    #feed-messages .fp-ax-t { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--axiom); }

    /* --- AXIOM rapport : mini-bandeau cuivre --- */
    #feed-messages .fp-axr {
      padding: 6px 10px; margin: 4px 0; border-radius: 0 4px 4px 0;
      background: linear-gradient(90deg, rgba(184,115,51,0.06), rgba(184,115,51,0.12), rgba(184,115,51,0.06));
      border-left: 2px solid var(--copper); border-bottom: 1px solid rgba(184,115,51,0.15);
    }
    #feed-messages .fp-axr-h { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
    #feed-messages .fp-axr-g { color: var(--brass); font-size: 13px; opacity: .8; text-shadow: 0 0 4px rgba(212,168,74,0.4); }
    #feed-messages .fp-axr-n { font-family: 'Cinzel', serif; font-size: 15px; font-weight: 600; letter-spacing: 0.2em; color: var(--axiom); text-transform: uppercase; }
    #feed-messages .fp-axr-t { font-family: 'Share Tech Mono', monospace; font-size: 15px; color: var(--copper); margin-left: auto; }
    #feed-messages .fp-axr-b { font-family: 'Spectral', serif; font-size: 12px; line-height: 1.4; color: var(--cream); opacity: .85; font-style: italic; white-space: pre-wrap; word-break: break-word; }

    .vote-panel { padding: 10px; }
    .vote-proposition {
      font-style: italic; font-size: 15px; line-height: 1.4;
      margin-bottom: 10px; padding-bottom: 8px;
      border-bottom: 1px solid var(--copper); color: var(--cream);
    }
    .vote-counts { display: flex; justify-content: center; gap: 16px; margin-bottom: 10px; }
    .vote-count {
      text-align: center; padding: 8px 18px;
      background: linear-gradient(180deg, rgba(184,115,51,0.15), rgba(13,10,6,0.9));
      border: 2px solid var(--copper); border-radius: 4px; position: relative;
    }
    .vote-count::before {
      content: ''; position: absolute; top: 4px; left: 4px;
      width: 6px; height: 6px;
      background: var(--brass-stud);
      border-radius: 50%;
      box-shadow: calc(100% - 14px) 0 0 0 var(--brass);
    }
    .vote-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); margin-bottom: 4px; }
    .vote-number { font-family: 'Cinzel', serif; font-size: 28px; color: var(--amber); text-shadow: 0 0 15px rgba(255,191,0,0.4); }
    .vote-for .vote-number { color: var(--solar-yellow); }
    .vote-against .vote-number { color: var(--vermeil); }
    .vote-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--copper); }
    .vote-meta span { display: flex; align-items: center; gap: 4px; }
    .vote-meta .proposer { color: var(--ocre); }

    /* Poign?es */
    .machine-handle {
      position: absolute; top: 50%; transform: translateY(-50%);
      width: 42px; height: 280px;
      background: linear-gradient(90deg,
        rgba(0,0,0,0.5) 0%, var(--rust) 8%, var(--copper) 30%,
        var(--brass) 50%, var(--copper) 70%, var(--rust) 92%, rgba(0,0,0,0.5) 100%);
      border: 2px solid var(--rust); border-radius: 6px;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.4), 0 0 20px rgba(212,168,74,0.2), 0 4px 12px rgba(0,0,0,0.6);
      cursor: pointer; z-index: 500;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
    }
    .machine-handle::before, .machine-handle::after {
      content: ''; position: absolute; left: 50%;
      width: 12px; height: 12px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,232,144,0.4);
      transform: translateX(-50%);
    }
    .machine-handle::before { top: 12px; }
    .machine-handle::after { bottom: 12px; }
    .machine-handle-text {
      writing-mode: vertical-rl; text-orientation: mixed;
      font-family: 'Cinzel', serif; font-size: 14px; font-weight: 600;
      letter-spacing: 5px; color: var(--bg-dark);
      text-shadow: 0 1px 0 rgba(255,232,144,0.4), 0 -1px 0 rgba(0,0,0,0.4);
      text-transform: uppercase; user-select: none;
    }
    .machine-handle-left { left: 100%; margin-left: -2px; border-left: none; border-radius: 0 8px 8px 0; }
    .machine-handle-right { right: 0; border-right: none; border-radius: 8px 0 0 8px; }
    .machine-handle-left:hover {
      transform: translateY(-50%) translateX(6px);
      box-shadow: inset 0 0 12px rgba(0,0,0,0.4), 0 0 32px rgba(255,215,0,0.5), 0 4px 14px rgba(0,0,0,0.7);
    }
    .machine-handle-right:hover {
      transform: translateY(-50%) translateX(-6px);
      box-shadow: inset 0 0 12px rgba(0,0,0,0.4), 0 0 32px rgba(255,215,0,0.5), 0 4px 14px rgba(0,0,0,0.7);
    }
    .machine-handle:active { transform: translateY(-50%) scale(0.97); }

    .steam-burst { position: fixed; top: 50%; width: 80px; height: 80px; pointer-events: none; z-index: 600; opacity: 0; }
    .steam-burst.active { animation: steamBurst 0.7s ease-out forwards; }
    .steam-burst-left { left: 50px; }
    .steam-burst-right { right: 50px; }
    @keyframes steamBurst {
      0% { opacity: 0.7; transform: translateY(-50%) scale(0.4); }
      100% { opacity: 0; transform: translateY(-50%) scale(2.4); }
    }

    /* Modales */
    /* Overlay : voile sombre, modale centree (cadre borne facon GUILD). */
    .machine-modal {
      position: fixed; inset: 0;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      z-index: 700; display: none; align-items: center; justify-content: center;
      animation: modalFadeIn 0.4s ease-out;
    }
    .machine-modal.open { display: flex; }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }
    /* Cadre borne, calque sur #guild-modal-overlay .guild-modal-frame :
       90vw x 88vh (plafond 1700 x 950), bord fin dore, scroll interne au body.
       Rivets de coin via ::before/::after (technique conservee ; visuel aligne
       sur les .corner-rivet de GUILD : 11px, radial f0d27a->rust->#3a1c08). */
    .machine-modal-frame {
      width: 90vw; max-width: 1700px;
      height: 88vh; max-height: 88vh;
      position: relative; color: var(--cream);
      background: radial-gradient(130% 90% at 50% -10%, rgba(34,26,12,0.92) 0%, rgba(26,20,8,0.92) 40%, rgba(13,10,6,0.92) 80%, rgba(8,5,2,0.92) 100%);
      border: 1.5px solid rgba(184,115,51,0.6); border-radius: 4px;
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: inset 0 0 140px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,191,0,0.12), 0 8px 30px rgba(0,0,0,0.6);
    }
    .machine-modal-frame::before, .machine-modal-frame::after {
      content: ''; position: absolute; z-index: 5;
      width: 11px; height: 11px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #f0d27a, var(--rust) 70%, #3a1c08);
      box-shadow: 0 0 6px rgba(255,191,0,0.4);
    }
    .machine-modal-frame::before { top: 13px; left: 13px; }
    .machine-modal-frame::after { top: 13px; right: 13px; }
    /* (CSS orphelin de l'ancien en-tete nu retire ici : header / titre / bouton close.
       L'en-tete riche est desormais porte par .ikhos-modal-header / .ikhos-mh-*, et les
       reflets .glint/.ring-in/.stud restent stylises sous .ikhos-mh-close, intacts.) */
    /* Body : seul element scrollable du cadre (le frame est overflow:hidden, l'en-tete
       reste fixe en haut). Padding interne car le frame n'en a plus (calque GUILD). */
    .machine-modal-body { flex: 1; overflow-y: auto; padding: 18px 32px 24px; display: flex; flex-direction: column; }

    /* ============================================================
       EN-TETE MODALE UNIFIE (.ikhos-modal-header) — standard GUILD.
       Classe commune ecrite UNE fois, posee sur les 9 .machine-modal.
       Valeurs reprises telles quelles de #guild-modal-overlay .header.
       Prefixe ikhos-mh-* = zero collision avec .guild-modal-frame /
       .delib-modal-body (qui conservent leurs propres classes scopees).
       Reutilise les keyframes globales guildSpin / guildSpinRev /
       guildShine (deja definies pour la Guild). Pas de corner-rivet :
       le .machine-modal-frame fournit deja ses propres studs de coin
       via ::before/::after (eviter le doublon).
       ============================================================ */
    .ikhos-modal-header {
      flex: none; position: relative; display: flex; align-items: center; justify-content: space-between;
      padding: 24px 32px 22px; border-bottom: 1px solid rgba(184,115,51,0.4);
      background: linear-gradient(180deg, rgba(48,36,16,0.55), rgba(0,0,0,0));
    }
    .ikhos-modal-header::after { content:""; position:absolute; left:30px; right:30px; bottom:-1px; height:1px;
      background: linear-gradient(90deg, transparent, rgba(255,191,0,0.35), transparent); }
    .ikhos-mh-brand { display:flex; align-items:center; gap:24px; }
    .ikhos-mh-gear { position:relative; width:62px; height:62px; flex:none; }
    .ikhos-mh-cog  { position:absolute; inset:0; animation:guildSpin 26s linear infinite; filter:drop-shadow(0 0 9px rgba(255,191,0,0.3)); }
    .ikhos-mh-cog2 { position:absolute; left:-16px; bottom:-14px; width:34px; height:34px; animation:guildSpinRev 16s linear infinite; }
    .ikhos-mh-teeth { position:absolute; inset:0; border-radius:50%;
      background:repeating-conic-gradient(from 0deg,var(--brass) 0deg 11deg,transparent 11deg 24deg);
      -webkit-mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px);
              mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px); }
    .ikhos-mh-teeth.sm {
      background:repeating-conic-gradient(from 0deg,var(--rust) 0deg 13deg,transparent 13deg 28deg);
      -webkit-mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px);
              mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px); }
    .ikhos-mh-rim { position:absolute; left:50%; top:50%; width:48px; height:48px; border-radius:50%;
      transform:translate(-50%,-50%); border:3px solid var(--copper);
      background:radial-gradient(circle at 50% 32%,#3a2c12,#161007);
      box-shadow:inset 0 0 12px rgba(0,0,0,0.75),0 0 0 1px rgba(255,215,0,0.15); }
    .ikhos-mh-rim.sm { width:24px; height:24px; border:2px solid var(--rust); background:radial-gradient(circle at 50% 35%,#2a2010,#140f06); box-shadow:none; }
    .ikhos-mh-gring { position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid rgba(212,168,74,0.6); }
    .ikhos-mh-hub { position:absolute; left:50%; top:50%; width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%,#f4d98a,var(--rust)); box-shadow:0 0 6px rgba(0,0,0,0.6),inset 0 0 3px rgba(0,0,0,0.5); }
    .ikhos-mh-hub.sm { width:7px; height:7px; background:radial-gradient(circle at 35% 30%,#c9a86a,#5a3a14); box-shadow:none; }
    .ikhos-mh-kicker { font-family:'Share Tech Mono',monospace; font-size:12px; letter-spacing:5px; color:#c79a4e; text-transform:uppercase; margin-bottom:6px; }
    .ikhos-mh-title-row { display:flex; align-items:center; gap:16px; }
    .ikhos-mh-title {
      font-family:'Cinzel',serif; font-weight:700; font-size:27px; letter-spacing:9px;
      background:linear-gradient(100deg,#c2873a 0%,#d8ab4c 30%,#f3e2ab 46%,#fff6db 50%,#f3e2ab 54%,#d8ab4c 70%,#e9c06e 100%);
      background-size:230% 100%; -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
      filter:drop-shadow(0 0 16px rgba(212,168,74,0.3)); animation:guildShine 5s ease-in-out infinite;
    }
    .ikhos-mh-diamond { width:7px; height:7px; background:var(--copper); transform:rotate(45deg); box-shadow:0 0 6px rgba(184,115,51,0.5); }
    .ikhos-mh-motto { font-family:'Spectral',serif; font-style:italic; font-size:14px; color:#e0cb93; letter-spacing:1px; margin:7px 0 0 23px; }
    /* zone droite : conteneur actions (oeil optionnel de Thread + fermer) */
    .ikhos-mh-actions { display:flex; align-items:center; gap:14px; flex:none; }
    .ikhos-mh-close {
      position:relative; width:42px; height:42px; border-radius:50%; flex:none;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      padding:0; appearance:none; -webkit-appearance:none;
      color:var(--brass); font-size:21px; font-family:'Spectral',serif;
      background:radial-gradient(circle at 50% 32%,#2c2110,#110c05); border:2px solid var(--copper);
      box-shadow:inset 0 1px 0 rgba(255,224,150,0.35),inset 0 0 12px rgba(0,0,0,0.7),0 2px 6px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.4);
      text-shadow:0 0 8px rgba(212,168,74,0.4); transition:color .25s,border-color .25s,box-shadow .25s,text-shadow .25s;
    }
    .ikhos-mh-close:hover {
      color:var(--gold); border-color:#e8c878;
      box-shadow:inset 0 1px 0 rgba(255,224,150,0.45),inset 0 0 10px rgba(0,0,0,0.6),0 0 18px rgba(255,191,0,0.45),0 2px 6px rgba(0,0,0,0.5);
      text-shadow:0 0 14px rgba(255,191,0,0.7);
    }
    .ikhos-mh-close .glint {
      position:absolute; inset:-3px; border-radius:50%;
      background:conic-gradient(from 0deg, rgba(255,215,0,0) 0deg, rgba(255,215,0,0) 292deg, rgba(255,223,120,.85) 338deg, rgba(255,246,212,1) 357deg, rgba(255,215,0,0) 360deg);
      -webkit-mask:radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
              mask:radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
      animation:guildSpin 3.2s linear infinite; pointer-events:none;
    }
    .ikhos-mh-close .ring-in { position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(212,168,74,0.3); pointer-events:none; }
    .ikhos-mh-close .stud { position:absolute; top:1px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d27a,#8b4513); }
    /* Variante flottante (About The World) : ce cadre n'a plus d'en-tete, le bouton
       de fermeture est re-parente directement sous .machine-modal-frame. z-index:6
       pour passer au-dessus des rivets de coin du frame (::before/::after, z-index:5).
       Le medaillon lui-meme reste stylise par .ikhos-mh-close, non duplique. */
    .ikhos-mh-close.mh-close-floating { position:absolute; top:16px; right:16px; z-index:6; }
    /* oeil Observation Apparatus (Thread uniquement) — medaillon rond assorti au close */
    .ikhos-mh-eye {
      position:relative; width:42px; height:42px; border-radius:50%; flex:none;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      padding:0; appearance:none; -webkit-appearance:none;
      color:var(--brass); font-size:18px; font-family:'Spectral',serif;
      background:radial-gradient(circle at 50% 32%,#2c2110,#110c05); border:2px solid var(--copper);
      box-shadow:inset 0 1px 0 rgba(255,224,150,0.35),inset 0 0 12px rgba(0,0,0,0.7),0 2px 6px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,0.4);
      text-shadow:0 0 8px rgba(212,168,74,0.4); transition:color .25s,border-color .25s,box-shadow .25s,text-shadow .25s;
    }
    .ikhos-mh-eye:hover {
      color:var(--gold); border-color:#e8c878;
      box-shadow:inset 0 1px 0 rgba(255,224,150,0.45),inset 0 0 10px rgba(0,0,0,0.6),0 0 18px rgba(255,191,0,0.45),0 2px 6px rgba(0,0,0,0.5);
      text-shadow:0 0 14px rgba(255,191,0,0.7);
    }

    /* Tres etroit : le cadre borne (90vw) passe sous la largeur min de l'en-tete riche
       (engrenage + titre espace + fermer). On laisse le cadre ET le brand retrecir, et on
       resserre le titre, pour garder le bouton fermer (et l'oeil de Thread) DANS le cadre.
       NOTE STOP-3 : ce breakpoint REDUIT le letter-spacing de .ikhos-mh-title (9px -> 3px)
       et sa taille (27px -> 22px) UNIQUEMENT sous 540px. La gear (masks en px fixes) n'est
       pas redimensionnee. Aucun effet desktop/tablette (frame large, brand non contraint). */
    @media (max-width: 540px) {
      .machine-modal-frame { min-width: 0; }
      .ikhos-mh-brand { min-width: 0; gap: 16px; }
      .ikhos-mh-title { font-size: 22px; letter-spacing: 3px; }
      .ikhos-mh-kicker { letter-spacing: 3px; }
      .machine-modal-body { padding: 16px 18px 20px; }
    }

    /* THREAD onglets */
    .thread-tabs-bar {
      display: flex; align-items: center; gap: 0;
      border-bottom: 1px solid var(--copper);
      padding: 0 4px; margin-bottom: 18px; flex-shrink: 0;
    }
    .thread-tab {
      padding: 14px 28px;
      font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
      letter-spacing: 0.2em; color: var(--brass);
      background: none; border: none;
      cursor: pointer; text-transform: uppercase;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px; transition: all 0.2s;
      text-shadow: 0 0 6px rgba(212,168,74,0.3), 0 1px 0 rgba(0,0,0,0.6);
    }
    .thread-tab:hover { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,0.5), 0 1px 0 rgba(0,0,0,0.6); }
    .thread-tab.active {
      color: var(--gold); background: rgba(212,168,74,0.18);
      border-bottom-color: var(--gold);
      text-shadow: 0 0 10px rgba(255,215,0,0.6);
    }
    .thread-caveman {
      margin-left: auto; padding: 9px 18px;
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
      letter-spacing: 0.15em; color: var(--gold);
      border: 1px solid rgba(255,215,0,0.5);
      background: rgba(255,215,0,0.06);
      cursor: pointer; text-transform: uppercase;
      border-radius: 3px; transition: all 0.2s;
    }
    .thread-caveman:hover {
      background: rgba(255,215,0,0.14);
      border-color: var(--gold);
      box-shadow: 0 0 12px rgba(255,215,0,0.4);
    }
    .thread-caveman.active {
      color: var(--bg-dark); background: var(--gold); border-color: var(--gold);
    }
    .thread-content { display: none; flex-direction: column; gap: 16px; flex: 1; min-height: 0; overflow-y: auto; }
    .thread-content.active { display: flex; }

    /* LEGAL NOTICES */
    .legal-content {
      max-width: 760px; margin: 0 auto;
      padding: 10px 20px 30px;
      font-family: 'Spectral', serif;
    }
    /* Peep + Wall : tailles bump?es de +2px pour lisibilit? */
    #content-peep .legal-section-title,
    #content-hallu .legal-section-title { font-size: 18px; }
    #content-peep .legal-section p,
    #content-hallu .legal-section p { font-size: 18px; }
    .legal-section { margin-bottom: 28px; }
    .legal-section-title {
      font-family: 'Cinzel', serif; font-size: 16px; font-weight: 600;
      letter-spacing: 0.2em; color: var(--brass);
      padding-bottom: 8px; border-bottom: 1px solid var(--rust);
      margin-bottom: 14px; text-transform: uppercase;
    }
    .legal-content p {
      font-size: 15px; line-height: 1.7;
      color: var(--cream); opacity: 0.92;
    }
    .legal-content p em {
      font-style: italic; color: var(--amber);
    }
    .legal-footer {
      margin-top: 36px; padding-top: 18px;
      border-top: 1px solid var(--rust);
      text-align: center;
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px; letter-spacing: 2px;
      color: var(--copper); opacity: 0.7;
    }


    /* Placeholder pour modales "coming soon" (Automatons / Chronometer / Pressure) */
    .entropy-empty-coming-soon {
      flex: 1; display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 18px; min-height: 60vh;
    }
    .coming-soon-placeholder {
      font-family: 'Share Tech Mono', monospace; font-size: 13px;
      letter-spacing: 4px; color: var(--copper); text-transform: uppercase; opacity: 0.6;
    }
    .coming-soon-quote {
      font-family: 'Spectral', serif; font-style: italic;
      font-size: 15px; color: var(--steel); max-width: 540px;
      text-align: center; line-height: 1.7;
    }

    /* Double-page illustree de la modale About The World. Doit tenir ENTIEREMENT
       dans le cadre, sans scroll : contrainte sur les DEUX dimensions, c'est la
       plus serree qui gagne, les proportions sont gardees.
       min-height:0 sur le conteneur n'est pas cosmetique, c'est LA piece qui fait
       marcher le reste : la min-height:auto par defaut d'un item flex l'empeche de
       descendre sous la hauteur intrinseque de son contenu (1024px). Sans elle, le
       .about-world-spread garde 1024px de haut, deborde le body (qui scrolle), et
       le max-height:100% de l'image se resout contre ces 1024px — donc ne contraint
       rien. Avec elle, le spread se reduit a la place disponible et le 100% mord.
       Chaine de hauteurs : .machine-modal-frame (88vh, definie) > .machine-modal-body
       (flex:1, et overflow-y:auto lui donne deja une min-height nulle) >
       .about-world-spread (flex:1 + min-height:0) > l'image. */
    .about-world-spread {
      flex: 1; min-height: 0; display: flex;
      justify-content: center; align-items: center;
    }
    .about-world-page {
      display: block;
      max-width: 100%; max-height: 100%;
      width: auto; height: auto; object-fit: contain;
      border-radius: 3px; box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    }

    /* Votes grille */
    /* .modal-vote-card : partagée par les onglets Conversations et AXIOM du Thread.
       Les classes .modal-votes-* et .modal-vote-prop/meta/scores/score* de l'ancien
       onglet Votes (doublon de la Deliberation Chamber) ont été retirées avec lui. */
    .modal-vote-card {
      background: rgba(26,20,8,0.6);
      border: 1px solid var(--copper); border-radius: 4px;
      padding: 16px 18px; margin-bottom: 14px;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.3);
    }

    /* Transmission Input Zone ? appara?t si user connect? + droit de parole */
    .transmit-zone {
      display: none;
      flex-shrink: 0;
      gap: 6px;
      padding: 8px;
      margin-top: 6px;
      background: linear-gradient(180deg, rgba(184,115,51,0.12), rgba(13,10,6,0.7));
      border: 2px solid var(--copper);
      border-radius: 4px;
      box-shadow: inset 0 0 8px rgba(0,0,0,0.4);
      align-items: center;
    }
    .transmit-zone.active { display: flex; }
    .transmit-zone select,
    .transmit-zone input {
      background: rgba(13,10,6,0.8);
      color: var(--cream);
      border: 1px solid var(--copper);
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px;
      padding: 6px 8px;
      outline: none;
      border-radius: 2px;
      letter-spacing: 0.05em;
    }
    .transmit-zone select { width: 70px; text-transform: uppercase; }
    .transmit-zone select:focus,
    .transmit-zone input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 6px rgba(255,215,0,0.3);
    }
    .transmit-zone .transmit-dest {
      width: 90px; display: none;
    }
    .transmit-zone .transmit-dest.show { display: inline-block; }
    .transmit-zone .transmit-text { flex: 1; }
    .transmit-zone .transmit-btn {
      background: linear-gradient(180deg, var(--gold), var(--brass) 60%, var(--copper));
      border: 2px solid var(--rust);
      color: var(--bg-dark);
      font-family: 'Cinzel', serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      padding: 6px 14px;
      cursor: pointer;
      border-radius: 2px;
      text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,200,0.5), 0 2px 0 var(--rust);
      transition: all 0.1s ease-out;
      white-space: nowrap;
    }
    .transmit-zone .transmit-btn:hover {
      background: linear-gradient(180deg, #ffe890, var(--gold) 60%, var(--brass));
    }
    .transmit-zone .transmit-btn:active {
      transform: translateY(2px);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    }
    .transmit-zone .transmit-btn:disabled {
      opacity: 0.5; cursor: not-allowed; transform: none;
    }
    .transmit-locked {
      display: none;
      flex-shrink: 0;
      padding: 6px 10px;
      margin-top: 6px;
      font-family: 'Share Tech Mono', monospace;
      font-size: 10px;
      color: var(--copper);
      text-align: center;
      letter-spacing: 0.15em;
      font-style: italic;
      opacity: 0.7;
      border-top: 1px solid rgba(184,115,51,0.3);
    }
    .transmit-locked.active { display: block; }

    /* Login Panel ? sliding from left */
    .login-panel {
      position: fixed; top: 0; left: 0;
      width: 360px; height: 100vh;
      background: linear-gradient(180deg, var(--bg-brass) 0%, var(--bg-dark) 100%);
      border-right: 3px solid var(--copper);
      box-shadow: 4px 0 40px rgba(0,0,0,0.7), inset -1px 0 0 rgba(212,168,74,0.3);
      z-index: 2000;
      transform: translateX(-100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      display: flex; flex-direction: column;
      padding: 40px 32px;
    }
    .login-panel.open { transform: translateX(0); }
    .login-panel::before {
      content: ''; position: absolute; top: 14px; left: 14px;
      width: 12px; height: 12px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: 0 0 6px rgba(212,168,74,0.4);
    }
    .login-panel::after {
      content: ''; position: absolute; bottom: 14px; left: 14px;
      width: 12px; height: 12px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: 0 0 6px rgba(212,168,74,0.4);
    }
    .login-close {
      position: absolute; top: 16px; right: 16px;
      width: 32px; height: 32px;
      background: var(--bg-dark); border: 2px solid var(--copper);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 16px;
      cursor: pointer; border-radius: 4px;
      transition: all 0.2s;
    }
    .login-close:hover { background: var(--copper); color: var(--bg-dark); }
    .login-title {
      font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700;
      color: var(--gold); letter-spacing: 0.3em;
      text-shadow: 0 0 12px rgba(255,215,0,0.4);
      margin-top: 28px; margin-bottom: 8px;
      text-transform: uppercase;
    }
    .login-subtitle {
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--copper); letter-spacing: 0.25em;
      margin-bottom: 36px; text-transform: uppercase;
    }
    .login-field { margin-bottom: 18px; }
    .login-label {
      display: block; font-family: 'Share Tech Mono', monospace;
      font-size: 10px; color: var(--copper);
      letter-spacing: 0.3em; margin-bottom: 8px;
      text-transform: uppercase;
    }
    .login-input {
      width: 100%; background: rgba(13,10,6,0.7);
      border: 2px solid var(--copper); color: var(--cream);
      font-family: 'Share Tech Mono', monospace; font-size: 13px;
      padding: 12px 14px; outline: none; border-radius: 3px;
      transition: all 0.2s;
    }
    .login-input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 12px rgba(255,215,0,0.3), inset 0 0 8px rgba(0,0,0,0.4);
    }
    .login-btn {
      width: 100%;
      background: linear-gradient(180deg, var(--gold), var(--brass) 50%, var(--copper));
      border: 2px solid var(--rust); color: var(--bg-dark);
      font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
      letter-spacing: 0.3em; padding: 14px;
      cursor: pointer; border-radius: 3px;
      box-shadow: inset 0 1px 0 rgba(255,255,200,0.5), 0 4px 0 var(--rust), 0 6px 12px rgba(0,0,0,0.4);
      text-transform: uppercase;
      transition: all 0.1s ease-out;
      margin-top: 8px;
    }
    .login-btn:hover {
      background: linear-gradient(180deg, #ffe890, var(--gold) 50%, var(--brass));
      box-shadow: inset 0 1px 0 rgba(255,255,220,0.7), 0 4px 0 var(--rust), 0 8px 18px rgba(255,215,0,0.3);
    }
    .login-btn:active {
      transform: translateY(3px);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 0 var(--rust);
    }
    .login-btn.disconnect {
      background: linear-gradient(180deg, #c44, var(--vermeil) 50%, #8b1a1a);
      border-color: #5a0e0e;
      box-shadow: inset 0 1px 0 rgba(255,200,200,0.4), 0 4px 0 #5a0e0e, 0 6px 12px rgba(0,0,0,0.4);
      color: var(--cream);
    }
    .login-btn.disconnect:hover {
      background: linear-gradient(180deg, #d66, #c44 50%, var(--vermeil));
    }
    .login-error {
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--vermeil); margin-top: 14px; min-height: 14px;
      letter-spacing: 0.1em; text-align: center;
    }
    .login-status {
      margin-top: auto; padding-top: 24px;
      border-top: 1px solid var(--copper);
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--copper); letter-spacing: 0.15em;
      text-transform: uppercase; text-align: center;
    }
    .login-connected-info {
      text-align: center; padding: 20px 0;
    }
    .login-connected-name {
      font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700;
      color: var(--gold); letter-spacing: 0.2em;
      text-shadow: 0 0 10px rgba(255,215,0,0.4);
      margin-bottom: 8px; text-transform: uppercase;
    }
    .login-connected-role {
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--brass); letter-spacing: 0.3em;
      text-transform: uppercase;
    }
    .login-connected-checkmark {
      color: #4ade80; font-size: 14px; margin-bottom: 14px;
      letter-spacing: 0.2em; font-family: 'Share Tech Mono', monospace;
    }

    /* Login PNG steampunk dans header */
    .observer-login-img {
      height: 56px; width: auto; display: block;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
      transition: filter 0.2s;
    }
    .observer-badge:hover .observer-login-img {
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) brightness(1.15) drop-shadow(0 0 8px rgba(212,168,74,0.5));
    }
    .observer-login-img.connected {
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(255,215,0,0.6));
    }
    /* Observer medallion clickable + glow connected */
    .observer-badge { cursor: pointer; transition: transform 0.15s; }
    .observer-badge:hover { transform: scale(1.05); }
    .observer-medallion.connected {
      background: radial-gradient(circle at 30% 30%, #ffe890, var(--gold) 50%, var(--brass));
      box-shadow: 0 0 16px rgba(255,215,0,0.6), inset 0 2px 4px rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.3);
    }

    /* --- LABORATORY BUTTON (remplace LOGIN, frame brass identique au player audio) ---
       Dimensions calibrées 280px x 56px pour ne pas casser le layout header.
       Le code login JS reste dans le HTML, juste plus de bouton visible. */
    .laboratory-button {
      width: 280px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 6px 18px;
      position: relative;
      background: linear-gradient(180deg,
        rgba(0,0,0,0.35) 0%, var(--rust) 6%, var(--copper) 26%,
        rgba(212,168,74,0.35) 50%, var(--copper) 74%, var(--rust) 94%,
        rgba(0,0,0,0.35) 100%);
      border: 2px solid var(--rust);
      border-radius: 5px;
      box-shadow:
        inset 0 0 14px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,232,144,0.25),
        0 0 14px rgba(212,168,74,0.18),
        0 3px 8px rgba(0,0,0,0.5);
      cursor: pointer;
      text-decoration: none;
      transition: all 0.15s ease-out;
      flex-shrink: 0;
      margin: 0 4px;
      box-sizing: border-box;
    }
    .laboratory-button::before,
    .laboratory-button::after {
      content: '';
      position: absolute;
      top: 5px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--brass-stud);
      box-shadow:
        inset -1px -1px 1px rgba(0,0,0,0.5),
        inset 1px 1px 1px rgba(255,232,144,0.4);
      pointer-events: none;
    }
    .laboratory-button::before { left: 5px; }
    .laboratory-button::after { right: 5px; }
    .laboratory-button:hover {
      background: linear-gradient(180deg,
        rgba(0,0,0,0.35) 0%, var(--rust) 6%, var(--brass) 26%,
        #ffe890 50%, var(--brass) 74%, var(--rust) 94%,
        rgba(0,0,0,0.35) 100%);
      box-shadow:
        inset 0 0 14px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,220,0.4),
        0 0 22px rgba(255,215,0,0.4),
        0 3px 8px rgba(0,0,0,0.5);
    }
    .laboratory-button:active {
      transform: translateY(2px);
    }
    .laboratory-icon {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
    }
    .laboratory-icon svg { display: block; width: 100%; height: 100%; }
    .laboratory-label {
      font-family: 'Cinzel', serif;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.18em;
      color: var(--bg-dark);
      text-transform: uppercase;
      text-shadow:
        0 1px 0 rgba(255,232,144,0.4),
        0 -1px 0 rgba(0,0,0,0.4);
      white-space: nowrap;
    }

    /* Login overlay backdrop */
    .login-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1999;
      display: none;
    }
    .login-overlay.show { display: block; }

    /* --- DRAWER VOTES (cuivre, slide depuis le bas, frame brass) --- */
    /* ===================== DELIBERATION CHAMBER (modale centrée) =====================
       Ancien tiroir .votes-drawer remplacé par une modale centrée calquée sur la Guild.
       Habillage = maquette Design, tout scopé sous .delib-modal-body (anti-collision
       .tile/.marker/.status/.plate/.col... avec le reste du site). */
    .delib-modal-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .delib-modal-overlay.open { display: flex; }

    /* ---- palette & tokens (autonome, redéclarés sur le cadre) ---- */
    .delib-modal-body {
      --bg-1:#221a0c; --bg-2:#1a1408; --bg-3:#0d0a06; --bg-4:#080502;
      --brass:#d4a84a; --copper:#b87333; --gold:#ffd700; --amber:#ffbf00;
      --cream:#f5e6c8; --rust:#8b4513;
      --copper-lite:#b89255; --copper-soft:#c9a86a;
      --indigo:#457b9d;  --indigo-g:rgba(69,123,157,.55);
      --limon:#ffd93d;   --limon-g:rgba(255,217,61,.5);
      --vermeil:#e63946; --vermeil-g:rgba(230,57,70,.5);
      --ocre:#f4a261;    --ocre-g:rgba(244,162,97,.5);
      --axiom:#adb5bd;   --axiom-g:rgba(173,181,189,.5);
      --f-title:'Cinzel',serif;
      --f-body:'Spectral',serif;
      --f-mono:'Share Tech Mono',monospace;
    }
    .delib-modal-body *, .delib-modal-body *::before, .delib-modal-body *::after { box-sizing:border-box; }

    @keyframes delibSpin    { to { transform:rotate(360deg); } }
    @keyframes delibSpinRev { to { transform:rotate(-360deg); } }
    @keyframes delibPulse   { 0%,100% { opacity:1; box-shadow:0 0 7px rgba(255,215,0,.7); } 50% { opacity:.4; box-shadow:0 0 3px rgba(255,215,0,.3); } }
    @keyframes delibShine   { 0% { background-position:100% 0; } 40% { background-position:0% 0; } 100% { background-position:0% 0; } }

    /* cadre : largeur calquée sur la Guild (90vw, plafond 1700px), centré par l'overlay */
    .delib-modal-body {
      position:relative; width:90vw; max-width:1700px; height:88vh; max-height:88vh; flex:none;
      display:flex; flex-direction:column; overflow:hidden;
      font-family:var(--f-body); color:var(--cream);
      background:radial-gradient(130% 90% at 50% -10%, rgba(34,26,12,.97) 0%, rgba(26,20,8,.97) 40%, rgba(13,10,6,.97) 80%, rgba(8,5,2,.97) 100%);
      backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
      border:1.5px solid rgba(184,115,51,.6); border-radius:4px;
      box-shadow:inset 0 0 140px rgba(0,0,0,.85), 0 0 0 1px rgba(255,191,0,.12);
    }
    .delib-modal-body .corner-rivet { position:absolute; top:13px; width:11px; height:11px; border-radius:50%; z-index:5;
      background:radial-gradient(circle at 35% 30%,#f0d27a,var(--rust) 70%,#3a1c08); box-shadow:0 0 6px rgba(255,191,0,.4); }
    .delib-modal-body .corner-rivet.l { left:13px; } .delib-modal-body .corner-rivet.r { right:13px; }

    /* ===================== HEADER ===================== */
    .delib-modal-body .header {
      flex:none; position:relative; display:flex; align-items:center; justify-content:space-between;
      padding:24px 32px 22px; border-bottom:1px solid rgba(184,115,51,.4);
      background:linear-gradient(180deg,rgba(48,36,16,.55),rgba(0,0,0,0));
    }
    .delib-modal-body .header::after { content:""; position:absolute; left:30px; right:30px; bottom:-1px; height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,191,0,.35),transparent); }
    .delib-modal-body .brand { display:flex; align-items:center; gap:24px; }

    /* engrenage double */
    .delib-modal-body .gear { position:relative; width:62px; height:62px; flex:none; }
    .delib-modal-body .cog  { position:absolute; inset:0; animation:delibSpin 26s linear infinite; filter:drop-shadow(0 0 9px rgba(255,191,0,.3)); }
    .delib-modal-body .cog2 { position:absolute; left:-16px; bottom:-14px; width:34px; height:34px; animation:delibSpinRev 16s linear infinite; }
    .delib-modal-body .teeth { position:absolute; inset:0; border-radius:50%;
      background:repeating-conic-gradient(from 0deg,var(--brass) 0deg 11deg,transparent 11deg 24deg);
      -webkit-mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px);
              mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px); }
    .delib-modal-body .teeth.sm {
      background:repeating-conic-gradient(from 0deg,var(--rust) 0deg 13deg,transparent 13deg 28deg);
      -webkit-mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px);
              mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px); }
    .delib-modal-body .rim { position:absolute; left:50%; top:50%; width:48px; height:48px; border-radius:50%;
      transform:translate(-50%,-50%); border:3px solid var(--copper);
      background:radial-gradient(circle at 50% 32%,#3a2c12,#161007);
      box-shadow:inset 0 0 12px rgba(0,0,0,.75),0 0 0 1px rgba(255,215,0,.15); }
    .delib-modal-body .rim.sm { width:24px; height:24px; border:2px solid var(--rust); background:radial-gradient(circle at 50% 35%,#2a2010,#140f06); box-shadow:none; }
    .delib-modal-body .gring { position:absolute; left:50%; top:50%; width:28px; height:28px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid rgba(212,168,74,.6); }
    .delib-modal-body .hub { position:absolute; left:50%; top:50%; width:13px; height:13px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%,#f4d98a,var(--rust)); box-shadow:0 0 6px rgba(0,0,0,.6),inset 0 0 3px rgba(0,0,0,.5); }
    .delib-modal-body .hub.sm { width:7px; height:7px; background:radial-gradient(circle at 35% 30%,#c9a86a,#5a3a14); box-shadow:none; }

    .delib-modal-body .kicker { font-family:var(--f-mono); font-size:12px; letter-spacing:5px; color:#c79a4e; text-transform:uppercase; margin-bottom:6px; }
    .delib-modal-body .title-row { display:flex; align-items:center; gap:16px; }
    .delib-modal-body .title {
      font-family:var(--f-title); font-weight:700; font-size:27px; letter-spacing:9px;
      background:linear-gradient(100deg,#c2873a 0%,#d8ab4c 30%,#f3e2ab 46%,#fff6db 50%,#f3e2ab 54%,#d8ab4c 70%,#e9c06e 100%);
      background-size:230% 100%; -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent; color:transparent;
      filter:drop-shadow(0 0 16px rgba(212,168,74,.3)); animation:delibShine 5s ease-in-out infinite;
    }
    .delib-modal-body .diamond { width:7px; height:7px; background:var(--copper); transform:rotate(45deg); box-shadow:0 0 6px rgba(184,115,51,.5); }
    .delib-modal-body .motto { font-family:var(--f-body); font-style:italic; font-size:14px; color:#e0cb93; letter-spacing:1px; margin:7px 0 0 23px; }

    /* bouton fermer (médaillon laiton) */
    .delib-modal-body .close-btn {
      position:relative; width:42px; height:42px; border-radius:50%; flex:none;
      display:flex; align-items:center; justify-content:center; cursor:pointer;
      color:var(--brass); font-size:21px; font-family:var(--f-body);
      background:radial-gradient(circle at 50% 32%,#2c2110,#110c05); border:2px solid var(--copper);
      box-shadow:inset 0 1px 0 rgba(255,224,150,.35),inset 0 0 12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.4);
      text-shadow:0 0 8px rgba(212,168,74,.4); transition:color .25s,border-color .25s,box-shadow .25s,text-shadow .25s;
    }
    .delib-modal-body .close-btn:hover {
      color:var(--gold); border-color:#e8c878;
      box-shadow:inset 0 1px 0 rgba(255,224,150,.45),inset 0 0 10px rgba(0,0,0,.6),0 0 18px rgba(255,191,0,.45),0 2px 6px rgba(0,0,0,.5);
      text-shadow:0 0 14px rgba(255,191,0,.7);
    }
    .delib-modal-body .close-btn .glint {
      position:absolute; inset:-3px; border-radius:50%;
      background:conic-gradient(from 0deg, rgba(255,215,0,0) 0deg, rgba(255,215,0,0) 292deg, rgba(255,223,120,.85) 338deg, rgba(255,246,212,1) 357deg, rgba(255,215,0,0) 360deg);
      -webkit-mask:radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
              mask:radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
      animation:guildSpin 3.2s linear infinite; pointer-events:none;
    }
    .delib-modal-body .close-btn .ring-in { position:absolute; inset:3px; border-radius:50%; border:1px solid rgba(212,168,74,.3); pointer-events:none; }
    .delib-modal-body .close-btn .stud { position:absolute; top:1px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d27a,#8b4513); }

    /* ===================== COLONNES (largeur égale) ===================== */
    .delib-modal-body .columns { flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:0; }
    .delib-modal-body .col { display:flex; flex-direction:column; min-height:0; padding:24px 26px; }
    .delib-modal-body .col.closed { border-right:1px solid rgba(184,115,51,.35); }
    .delib-modal-body .col-head { display:flex; align-items:center; gap:11px; }
    .delib-modal-body .col-head .g { font-size:15px; color:var(--copper); }
    .delib-modal-body .col-head h2 { margin:0; font-family:var(--f-title); font-weight:600; font-size:15px; letter-spacing:5px; color:var(--brass); text-transform:uppercase; }
    .delib-modal-body .col-sub { font-family:var(--f-mono); font-size:12px; letter-spacing:2px; color:var(--copper-lite); text-transform:uppercase; margin:7px 0 22px 26px; }

    /* ===================== TUILE + ICÔNES (CSS pur) ===================== */
    .delib-modal-body .tile {
      position:relative; flex:none; width:52px; height:52px; border:1px solid rgba(184,115,51,.4);
      border-radius:6px; background:radial-gradient(120% 120% at 50% 30%,#1c1508,#0d0a06);
      box-shadow:inset 0 0 14px rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center;
    }
    .delib-modal-body .marker { position:relative; width:28px; height:28px; }
    .delib-modal-body .marker .ring { position:absolute; left:50%; top:50%; width:21px; height:21px; border:1.5px solid var(--c); border-radius:50%; transform:translate(-50%,-50%); opacity:.9; }
    .delib-modal-body .marker .v { position:absolute; left:50%; top:50%; width:1.5px; height:28px; background:rgba(184,115,51,.65); transform:translate(-50%,-50%); }
    .delib-modal-body .marker .h { position:absolute; left:50%; top:50%; width:28px; height:1.5px; background:rgba(184,115,51,.65); transform:translate(-50%,-50%); }
    .delib-modal-body .marker .dot { position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%; background:var(--c); transform:translate(-50%,-50%); box-shadow:0 0 6px var(--g); }
    .delib-modal-body .obs { position:relative; width:32px; height:28px; }
    .delib-modal-body .obs .base { position:absolute; left:50%; bottom:3px; width:32px; height:2px; background:rgba(184,115,51,.65); transform:translateX(-50%); border-radius:1px; }
    .delib-modal-body .obs .dome { position:absolute; left:50%; bottom:5px; width:24px; height:12px; border:1.5px solid var(--c); border-bottom:none; border-radius:12px 12px 0 0; transform:translateX(-50%); background:radial-gradient(100% 120% at 50% 100%,var(--g),transparent 70%); }
    .delib-modal-body .obs .scope { position:absolute; left:50%; bottom:6px; width:2px; height:10px; background:var(--gold); transform:translateX(-50%) rotate(20deg); transform-origin:bottom center; box-shadow:0 0 5px rgba(255,215,0,.5); }
    .delib-modal-body .lake { position:relative; width:32px; height:24px; }
    .delib-modal-body .lake span { position:absolute; left:50%; border:1.5px solid var(--c); border-top:none; border-radius:0 0 60% 60%; transform:translateX(-50%); opacity:.85; }
    .delib-modal-body .lake .w1 { bottom:14px; width:10px; height:5px; }
    .delib-modal-body .lake .w2 { bottom:7px;  width:20px; height:8px; opacity:.7; }
    .delib-modal-body .lake .w3 { bottom:0;    width:30px; height:11px; opacity:.55; box-shadow:0 0 8px var(--g); }
    .delib-modal-body .core { position:relative; width:30px; height:30px; }
    .delib-modal-body .core .ring { position:absolute; left:50%; top:50%; width:26px; height:26px; border:1.5px solid var(--c); border-radius:50%; transform:translate(-50%,-50%); opacity:.85; box-shadow:0 0 8px var(--g); }
    .delib-modal-body .core .diam { position:absolute; left:50%; top:50%; width:11px; height:11px; background:var(--c); transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 7px var(--g); }

    .delib-modal-body .tbadge { font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:#e6c882; border:1px solid rgba(212,168,74,.5); padding:2px 7px; border-radius:3px; text-transform:uppercase; background:rgba(212,168,74,.08); }
    .delib-modal-body .footmeta { display:flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:14px; color:#e2c78c; }
    .delib-modal-body .footgrid { display:grid; grid-template-columns:repeat(var(--n,1),1fr); gap:1.5px; }
    .delib-modal-body .footgrid i { width:4px; height:4px; background:var(--c); border-radius:1px; opacity:.85; }
    .delib-modal-body .tile-coord { font-family:var(--f-mono); font-size:14px; color:#c39d5c; }

    /* ===================== LISTE SCROLLABLE ===================== */
    .delib-modal-body .scroll { flex:1; min-height:0; overflow-y:auto; padding-right:12px; display:flex; flex-direction:column; gap:15px; }
    .delib-modal-body .scroll::-webkit-scrollbar { width:10px; }
    .delib-modal-body .scroll::-webkit-scrollbar-track { background:rgba(0,0,0,.4); border-radius:6px; }
    .delib-modal-body .scroll::-webkit-scrollbar-thumb { background:linear-gradient(180deg,var(--copper),var(--rust)); border-radius:6px; border:2px solid rgba(13,10,6,.8); }

    /* ===================== CARTE DE SCRUTIN ===================== */
    .delib-modal-body .vote-card {
      position:relative; flex:none; border:1px solid rgba(184,115,51,.4);
      border-left:3px solid var(--side,#ffd54a); border-radius:9px; padding:18px 20px;
      background:linear-gradient(180deg,rgba(28,21,10,.7),rgba(12,9,5,.52));
      box-shadow:inset 0 0 30px rgba(0,0,0,.45), 0 5px 18px rgba(0,0,0,.35); overflow:hidden;
    }
    .delib-modal-body .vote-card.live { box-shadow:inset 0 0 34px rgba(0,0,0,.5), 0 5px 18px rgba(0,0,0,.35), 0 0 22px rgba(255,191,0,.06); }
    .delib-modal-body .vote-card .pin { position:absolute; top:10px; right:12px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0d27a,#8b4513); }

    .delib-modal-body .card-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:15px; }
    .delib-modal-body .status { display:flex; align-items:center; gap:8px; padding:4px 11px; border-radius:20px; }
    .delib-modal-body .status .led { width:7px; height:7px; border-radius:50%; }
    .delib-modal-body .status .txt { font-family:var(--f-mono); font-weight:bold; font-size:11px; letter-spacing:2px; text-transform:uppercase; }
    .delib-modal-body .status.adopted { border:1px solid rgba(255,191,0,.55); background:rgba(255,191,0,.1); }
    .delib-modal-body .status.adopted .led { background:#ffd54a; box-shadow:0 0 7px #ffd54a; }
    .delib-modal-body .status.adopted .txt { color:#ffd54a; }
    .delib-modal-body .status.rejected { border:1px solid rgba(230,57,70,.5); background:rgba(230,57,70,.1); }
    .delib-modal-body .status.rejected .led { background:#e8616c; box-shadow:0 0 7px #e8616c; }
    .delib-modal-body .status.rejected .txt { color:#e8616c; }
    .delib-modal-body .status.session { border:1px solid rgba(255,191,0,.55); background:rgba(255,191,0,.1); }
    .delib-modal-body .status.session .led { background:#ffd54a; animation:delibPulse 1.6s ease-in-out infinite; }
    .delib-modal-body .status.session .txt { color:#ffd54a; }
    .delib-modal-body .when { font-family:var(--f-mono); font-size:13px; letter-spacing:1px; color:#cda766; }

    .delib-modal-body .card-title { display:flex; align-items:center; gap:15px; margin-bottom:16px; }
    .delib-modal-body .name { font-family:var(--f-title); font-weight:700; font-size:19px; letter-spacing:.5px; color:var(--cream); }
    .delib-modal-body .meta-row { display:flex; align-items:center; gap:11px; margin-top:8px; flex-wrap:wrap; }

    .delib-modal-body .plates { display:flex; gap:12px; }
    .delib-modal-body .plate { flex:1; position:relative; padding:11px 14px; border-radius:6px; overflow:hidden; }
    .delib-modal-body .plate .edge { position:absolute; left:0; top:0; bottom:0; width:3px; }
    .delib-modal-body .plate .row { display:flex; align-items:center; justify-content:space-between; }
    .delib-modal-body .plate .lbl { font-family:var(--f-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; }
    .delib-modal-body .plate .num { font-family:var(--f-title); font-weight:700; font-size:24px; line-height:1; }
    .delib-modal-body .plate.favor { border:1px solid rgba(212,168,74,.4); background:linear-gradient(180deg,rgba(60,46,18,.4),rgba(20,15,6,.4)); }
    .delib-modal-body .plate.favor .edge { background:#ffd700; box-shadow:0 0 10px rgba(255,215,0,.5); }
    .delib-modal-body .plate.favor .lbl { color:#c2a358; }
    .delib-modal-body .plate.favor .num { color:#ffbf00; text-shadow:0 0 12px rgba(255,191,0,.4); }
    .delib-modal-body .plate.oppose { border:1px solid rgba(230,57,70,.35); background:linear-gradient(180deg,rgba(60,20,22,.35),rgba(20,8,9,.4)); }
    .delib-modal-body .plate.oppose .edge { background:#e63946; box-shadow:0 0 10px rgba(230,57,70,.5); }
    .delib-modal-body .plate.oppose .lbl { color:#c97a80; }
    .delib-modal-body .plate.oppose .num { color:#e8616c; text-shadow:0 0 12px rgba(230,57,70,.35); }

    .delib-modal-body .ratio { display:flex; height:7px; border-radius:4px; overflow:hidden; border:1px solid rgba(139,69,19,.5); background:rgba(0,0,0,.5); margin-top:12px; }
    .delib-modal-body .ratio .f { background:linear-gradient(90deg,#d4a84a,#ffd700); }
    .delib-modal-body .ratio .a { background:linear-gradient(90deg,#8b4513,#e63946); }

    .delib-modal-body .council { display:flex; align-items:center; gap:13px; margin-top:16px; }
    .delib-modal-body .council .lbl { font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--copper-lite); text-transform:uppercase; }
    .delib-modal-body .council .dots { display:flex; gap:9px; }
    .delib-modal-body .voter { width:15px; height:15px; border-radius:50%; border:1.5px solid var(--c); background:var(--c); box-shadow:0 0 7px var(--g); }
    .delib-modal-body .voter.pending { background:transparent; border-color:#8b6a3a; box-shadow:none; }
    .delib-modal-body .council .tally { font-family:var(--f-mono); font-size:11px; letter-spacing:1px; color:#8b6a3a; }

    .delib-modal-body .divider { height:1px; background:linear-gradient(90deg,transparent,rgba(184,115,51,.35),transparent); margin:15px 0; }
    .delib-modal-body .foot { display:flex; align-items:center; gap:8px; }
    .delib-modal-body .foot .by { font-family:var(--f-body); font-style:italic; font-size:13px; color:var(--copper); }
    .delib-modal-body .foot .who { font-family:var(--f-title); font-weight:600; font-size:13px; letter-spacing:2px; color:var(--c); text-shadow:0 0 10px var(--g); }
    .delib-modal-body .foot .spacer { flex:1; height:1px; background:linear-gradient(90deg,rgba(184,115,51,.3),transparent); }
    .delib-modal-body .foot .cast { font-family:var(--f-mono); font-size:11px; letter-spacing:1px; color:#8b6a3a; }
    .delib-modal-body .col-note { font-family:var(--f-body); font-style:italic; font-size:13px; color:#7a5e34; text-align:center; margin-top:18px; }

    /* ===================== ÉTAT VIDE (colonne ACTIVE) ===================== */
    @keyframes delibBreath { 0%,100% { opacity:.45; } 50% { opacity:.7; } }
    @keyframes delibSweep  { 0% { transform:translateX(-120%) skewX(-18deg); } 38% { transform:translateX(340%) skewX(-18deg); } 100% { transform:translateX(340%) skewX(-18deg); } }
    .delib-modal-body .empty-state { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; }
    .delib-modal-body .dormant { position:relative; width:88px; height:88px; animation:delibBreath 5s ease-in-out infinite; }
    .delib-modal-body .dormant-teeth { position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,#6e4a1e 0deg 11deg,transparent 11deg 24deg); -webkit-mask:radial-gradient(circle at 50% 50%,transparent 33px,#000 34px,#000 44px,transparent 45px); mask:radial-gradient(circle at 50% 50%,transparent 33px,#000 34px,#000 44px,transparent 45px); }
    .delib-modal-body .dormant-face { position:absolute; left:50%; top:50%; width:64px; height:64px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid rgba(184,115,51,.5); background:radial-gradient(circle at 50% 35%,#1c1508,#0d0a06); }
    .delib-modal-body .dormant-hub { position:absolute; left:50%; top:50%; width:16px; height:16px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle at 35% 30%,#7a5526,#3a1c08); }
    .delib-modal-body .dormant-sweep { position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; }
    .delib-modal-body .dormant-sweep span { position:absolute; top:-25%; left:0; width:62%; height:150%; background:linear-gradient(100deg,transparent 22%,rgba(255,226,158,.18) 50%,transparent 78%); filter:blur(4px); transform:skewX(-18deg); animation:delibSweep 6s ease-in-out infinite; }
    .delib-modal-body .empty-title { font-family:var(--f-title); font-weight:600; font-size:18px; letter-spacing:3px; text-transform:uppercase; background:linear-gradient(100deg,#88632f 0%,#a87f47 30%,#d8be84 47%,#f2e6bb 50%,#d8be84 53%,#a07a45 70%,#88632f 100%); background-size:230% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:delibShine 5s ease-in-out infinite; animation-delay:.35s; }
    .delib-modal-body .empty-sub { font-family:var(--f-body); font-style:italic; font-size:14px; color:#7a5e34; margin-top:9px; }

    /* --- MODALE D?TAIL VOTE (r?utilise machine-modal frame) --- */
    .vote-detail-modal {
      position: fixed; inset: 0;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      z-index: 3500; display: none; align-items: center; justify-content: center;
      animation: modalFadeIn 0.3s ease-out;
    }
    .vote-detail-modal.show { display: flex; }
    .vote-detail-frame {
      width: 640px; max-width: 92vw; max-height: 90vh;
      border: 3px solid var(--copper); border-radius: 6px;
      background: rgba(26,20,8,0.92);
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 0 50px rgba(212,168,74,0.3), 0 8px 30px rgba(0,0,0,0.6);
      position: relative;
    }
    .vote-detail-frame::before, .vote-detail-frame::after {
      content: ''; position: absolute;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,232,144,0.4), 0 0 6px rgba(212,168,74,0.4);
    }
    .vote-detail-frame::before { top: 12px; left: 12px; }
    .vote-detail-frame::after { top: 12px; right: 12px; }
    .vote-detail-header {
      display: flex; align-items: center; padding: 16px 24px;
      border-bottom: 2px solid var(--copper); flex-shrink: 0;
    }
    .vote-detail-title {
      font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.2em;
      text-shadow: 0 0 10px rgba(212,168,74,0.4); flex: 1; text-transform: uppercase;
    }
    .vote-detail-close {
      width: 32px; height: 32px;
      border: 2px solid var(--copper); background: var(--bg-dark);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 16px;
      cursor: pointer; border-radius: 4px; transition: all 0.2s;
    }
    .vote-detail-close:hover { background: var(--copper); color: var(--bg-dark); }
    .vote-detail-body {
      flex: 1; overflow-y: auto; padding: 24px 28px;
    }
    .vote-detail-prop {
      font-family: 'Spectral', serif; font-style: italic; font-size: 17px;
      color: var(--cream); line-height: 1.6; margin-bottom: 16px;
    }
    .vote-detail-meta {
      font-family: 'Share Tech Mono', monospace; font-size: 12px;
      color: var(--copper); letter-spacing: 0.1em; margin-bottom: 20px;
    }
    .vote-detail-scores {
      display: flex; gap: 12px; margin-bottom: 24px;
    }
    .vote-detail-score {
      flex: 1; padding: 14px; border: 2px solid; border-radius: 4px;
      text-align: center; font-family: 'Cinzel', serif; font-weight: 700;
    }
    .vote-detail-score.pour { border-color: #4ade80; background: rgba(74,222,128,0.1); color: #4ade80; }
    .vote-detail-score.contre { border-color: var(--vermeil); background: rgba(230,57,70,0.1); color: var(--vermeil); }
    .vote-detail-score-label {
      display: block; font-size: 11px; letter-spacing: 0.25em;
      margin-bottom: 6px; opacity: 0.8;
    }
    .vote-detail-score-val { font-size: 30px; }
    .vote-detail-section-label {
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
      letter-spacing: 0.2em; margin-bottom: 8px; text-transform: uppercase;
    }
    .vote-detail-section-label.pour { color: #4ade80; }
    .vote-detail-section-label.contre { color: var(--vermeil); }
    .vote-detail-btns-row {
      display: flex; gap: 8px; margin-bottom: 14px;
    }
    .vote-detail-btn {
      flex: 1; padding: 10px; font-family: 'Cinzel', serif;
      font-size: 12px; font-weight: 600; letter-spacing: 0.15em;
      cursor: pointer; transition: all 0.2s; border: 1px solid;
      border-radius: 3px; text-transform: uppercase;
    }
    .vote-detail-btn.pour { color: #4ade80; border-color: #4ade80; background: rgba(74,222,128,0.08); }
    .vote-detail-btn.pour:hover { background: rgba(74,222,128,0.2); box-shadow: 0 0 12px rgba(74,222,128,0.4); }
    .vote-detail-btn.contre { color: var(--vermeil); border-color: var(--vermeil); background: rgba(230,57,70,0.08); }
    .vote-detail-btn.contre:hover { background: rgba(230,57,70,0.2); box-shadow: 0 0 12px rgba(230,57,70,0.4); }
    .vote-detail-voted-msg {
      font-family: 'Spectral', serif; font-style: italic;
      font-size: 13px; color: #4ade80; margin-bottom: 14px;
      letter-spacing: 0.05em;
    }

    /* --- THESEUS CRUISES (modale ASCII, console brass) --- */
    .theseus-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .theseus-overlay.show { display: flex; }
    .theseus-modal {
      width: 720px; max-width: 92vw; max-height: 88vh;
      background: linear-gradient(180deg, #1a0f04 0%, #0d0a06 100%);
      border: 3px solid var(--copper);
      border-radius: 6px;
      box-shadow:
        inset 0 0 60px rgba(0,0,0,0.7),
        0 0 50px rgba(212,168,74,0.3),
        0 8px 30px rgba(0,0,0,0.6);
      display: flex; flex-direction: column; overflow: hidden;
      position: relative;
    }
    .theseus-modal::before, .theseus-modal::after {
      content: ''; position: absolute; top: 12px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,232,144,0.4), 0 0 6px rgba(212,168,74,0.4);
    }
    .theseus-modal::before { left: 12px; }
    .theseus-modal::after { right: 12px; }
    .theseus-header {
      padding: 16px 24px;
      background: linear-gradient(90deg, rgba(184,115,51,0.2), rgba(212,168,74,0.15), rgba(184,115,51,0.2));
      border-bottom: 2px solid var(--copper);
      display: flex; align-items: center; justify-content: space-between;
      flex-shrink: 0;
    }
    .theseus-header-title {
      font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.3em; text-transform: uppercase;
      text-shadow: 0 0 8px rgba(212,168,74,0.4);
    }
    .theseus-close {
      width: 28px; height: 28px;
      border: 2px solid var(--copper); background: var(--bg-dark);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 14px;
      cursor: pointer; border-radius: 4px;
      transition: all 0.2s;
    }
    .theseus-close:hover { background: var(--copper); color: var(--bg-dark); }
    .theseus-body {
      flex: 1; overflow-y: auto;
      background: rgba(13,10,6,0.7);
    }
    .theseus-pre {
      font-family: 'Share Tech Mono', 'Courier New', monospace;
      font-size: 12px; line-height: 1.5;
      color: var(--amber);
      padding: 20px 28px;
      white-space: pre;
      text-shadow: 0 0 6px rgba(255,191,0,0.25);
    }
    .theseus-footer {
      padding: 14px 24px;
      border-top: 2px solid var(--copper);
      text-align: center; flex-shrink: 0;
      background: linear-gradient(180deg, rgba(184,115,51,0.1), rgba(13,10,6,0.5));
    }
    .theseus-phone {
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px; color: var(--copper);
      letter-spacing: 0.2em; margin-bottom: 10px;
      text-transform: uppercase;
    }
    .theseus-book-btn {
      padding: 10px 24px;
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.25em; color: var(--bg-dark);
      background: linear-gradient(180deg, var(--gold), var(--brass) 60%, var(--copper));
      border: 2px solid var(--rust); border-radius: 3px;
      cursor: pointer; text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,200,0.5), 0 3px 0 var(--rust);
      transition: all 0.1s ease-out;
    }
    .theseus-book-btn:hover {
      background: linear-gradient(180deg, #ffe890, var(--gold) 60%, var(--brass));
    }
    .theseus-book-btn:active {
      transform: translateY(2px);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    }

    /* --- SCHRÖDINGER (bo?te d'observation laiton + verrou) --- */
    .schrodinger-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.12) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.97) 0%, rgba(26,20,8,0.99) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .schrodinger-overlay.show { display: flex; }
    .schrodinger-modal {
      width: 480px; max-width: 90vw;
      background:
        radial-gradient(ellipse at center top, rgba(184,115,51,0.15) 0%, transparent 60%),
        linear-gradient(180deg, #1a0f04 0%, #0d0a06 100%);
      border: 3px solid var(--copper);
      border-radius: 6px;
      box-shadow:
        inset 0 0 80px rgba(0,0,0,0.7),
        0 0 50px rgba(212,168,74,0.3),
        0 10px 40px rgba(0,0,0,0.7);
      position: relative;
      padding: 0;
      overflow: hidden;
    }
    .schrodinger-modal::before, .schrodinger-modal::after {
      content: ''; position: absolute; top: 12px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,232,144,0.4), 0 0 6px rgba(212,168,74,0.4);
    }
    .schrodinger-modal::before { left: 12px; }
    .schrodinger-modal::after { right: 12px; }
    .schrodinger-titlebar {
      background: linear-gradient(90deg, rgba(184,115,51,0.25), rgba(212,168,74,0.2), rgba(184,115,51,0.25));
      color: var(--brass);
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.25em; padding: 12px 18px 12px 40px;
      border-bottom: 2px solid var(--copper);
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(212,168,74,0.4);
    }
    .schrodinger-content {
      padding: 32px 36px;
      text-align: center;
    }
    .schrodinger-cat {
      font-size: 56px; margin-bottom: 18px; display: block;
      filter: drop-shadow(0 0 12px rgba(212,168,74,0.5)) sepia(0.4) hue-rotate(-15deg);
      animation: schrodingerBlink 1.4s step-end infinite;
    }
    .schrodinger-warning {
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.3em; color: var(--vermeil);
      margin-bottom: 24px; text-transform: uppercase;
      text-shadow: 0 0 8px rgba(230,57,70,0.5);
    }
    .schrodinger-text {
      font-family: 'Spectral', serif; font-style: italic;
      font-size: 14px; line-height: 1.8; color: var(--cream);
      margin-bottom: 4px;
    }
    .schrodinger-text.highlight {
      font-family: 'Cinzel', serif; font-style: normal; font-weight: 700;
      color: var(--gold); font-size: 16px;
      letter-spacing: 0.1em;
      text-shadow: 0 0 10px rgba(255,215,0,0.5);
      margin: 12px 0 4px;
    }
    .schrodinger-divider {
      border: none;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--copper), transparent);
      margin: 18px 0;
    }
    .schrodinger-close-btn {
      margin-top: 22px;
      padding: 12px 28px;
      font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
      letter-spacing: 0.25em; color: var(--bg-dark);
      background: linear-gradient(180deg, var(--gold), var(--brass) 60%, var(--copper));
      border: 2px solid var(--rust); border-radius: 3px;
      cursor: pointer; text-transform: uppercase;
      box-shadow: inset 0 1px 0 rgba(255,255,200,0.5), 0 3px 0 var(--rust), 0 5px 12px rgba(0,0,0,0.5);
      transition: all 0.1s ease-out;
    }
    .schrodinger-close-btn:hover {
      background: linear-gradient(180deg, #ffe890, var(--gold) 60%, var(--brass));
      box-shadow: inset 0 1px 0 rgba(255,255,220,0.7), 0 3px 0 var(--rust), 0 6px 18px rgba(255,215,0,0.4);
    }
    .schrodinger-close-btn:active {
      transform: translateY(2px);
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
    }
    @keyframes schrodingerBlink { 0%,49%{opacity:1} 50%,100%{opacity:0.4} }

    /* --- MISC menu (cartouche pliable colonne droite) --- */
    .misc-menu {
      display: none;
      flex-direction: column; gap: 6px;
      padding: 10px 14px;
      background: linear-gradient(180deg, rgba(184,115,51,0.12), rgba(13,10,6,0.8));
      border: 2px solid var(--copper);
      border-radius: 4px;
      box-shadow: inset 0 0 12px rgba(0,0,0,0.4);
      animation: fadeInDrawer 0.3s ease;
    }
    .misc-menu.open { display: flex; }
    .misc-menu-item {
      padding: 10px 14px;
      background: rgba(26,20,8,0.5);
      border: 1px solid var(--copper);
      border-radius: 3px;
      font-family: 'Cinzel', serif; font-size: 12px;
      letter-spacing: 0.2em; color: var(--brass);
      cursor: pointer; text-transform: uppercase;
      text-align: center;
      transition: all 0.15s;
    }
    .misc-menu-item:hover {
      background: rgba(184,115,51,0.2);
      color: var(--gold);
      box-shadow: 0 0 10px rgba(212,168,74,0.3);
      text-shadow: 0 0 6px rgba(255,215,0,0.4);
    }
    .misc-menu-item-tagline {
      display: block;
      font-family: 'Share Tech Mono', monospace;
      font-size: 9px; color: var(--copper);
      letter-spacing: 0.15em; margin-top: 4px;
      text-transform: none; font-style: italic; opacity: 0.8;
    }

    /* --- ENTER STRUCTURE (vue int?rieure plein ?cran, frame cuivre) --- */
    .enter-overlay {
      position: fixed; inset: 0; z-index: 5000;
      display: none;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.08) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.97) 0%, rgba(26,20,8,0.99) 100%);
      animation: modalFadeIn 0.4s ease-out;
    }
    .enter-overlay.show { display: block; }
    .enter-overlay::before {
      content: ''; position: absolute; inset: 30px; pointer-events: none;
      border: 3px solid var(--copper);
      border-radius: 6px;
      box-shadow:
        inset 0 0 80px rgba(0,0,0,0.7),
        0 0 40px rgba(212,168,74,0.3);
    }
    .enter-overlay::after {
      content: ''; position: absolute; inset: 30px; pointer-events: none;
      background:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.04;
      mix-blend-mode: overlay;
    }
    .enter-temp-banner {
      position: absolute; top: 38px; left: 38px; right: 38px;
      padding: 10px 18px;
      background: linear-gradient(90deg, rgba(184,115,51,0.15), rgba(184,115,51,0.25), rgba(184,115,51,0.15));
      border-bottom: 1px solid var(--copper);
      font-family: 'Share Tech Mono', monospace;
      font-size: 11px; color: var(--copper);
      letter-spacing: 0.15em; text-align: center;
      z-index: 10; text-transform: uppercase;
    }
    /* Exit : medaillon rond GUILD, calque sur .ikhos-mh-close (double anneau laiton
       .glint / .ring-in / .stud, glyphe U+2715). Position (top/right/z-index), taille
       46px, :active et handler exitStructure() inchanges. Les enfants sont scopes a
       .enter-close-btn : classes distinctes de .ikhos-mh-close, pas de mutualisation. */
    .enter-close-btn {
      position: absolute; top: 50px; right: 50px; z-index: 20;
      width: 46px; height: 46px; border-radius: 50%; flex: none;
      display: flex; align-items: center; justify-content: center;
      padding: 0; appearance: none; -webkit-appearance: none;
      color: var(--brass); font-size: 21px; font-family: 'Spectral', serif;
      background: radial-gradient(circle at 50% 32%, #2c2110, #110c05);
      border: 2px solid var(--copper);
      box-shadow: inset 0 1px 0 rgba(255,224,150,0.35), inset 0 0 12px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.4);
      text-shadow: 0 0 8px rgba(212,168,74,0.4);
      cursor: pointer;
      transition: color .25s, border-color .25s, box-shadow .25s, text-shadow .25s;
    }
    .enter-close-btn:hover {
      color: var(--gold); border-color: #e8c878;
      box-shadow: inset 0 1px 0 rgba(255,224,150,0.45), inset 0 0 10px rgba(0,0,0,0.6), 0 0 18px rgba(255,191,0,0.45), 0 2px 6px rgba(0,0,0,0.5);
      text-shadow: 0 0 14px rgba(255,191,0,0.7);
    }
    .enter-close-btn:active { transform: scale(0.94); }
    .enter-close-btn .glint {
      position: absolute; inset: -3px; border-radius: 50%;
      background: conic-gradient(from 0deg, rgba(255,215,0,0) 0deg, rgba(255,215,0,0) 292deg, rgba(255,223,120,.85) 338deg, rgba(255,246,212,1) 357deg, rgba(255,215,0,0) 360deg);
      -webkit-mask: radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
              mask: radial-gradient(circle, transparent 0 19px, #000 20px, #000 24px, transparent 25px);
      animation: guildSpin 3.2s linear infinite; pointer-events: none;
    }
    .enter-close-btn .ring-in { position: absolute; inset: 3px; border-radius: 50%; border: 1px solid rgba(212,168,74,0.3); pointer-events: none; }
    .enter-close-btn .stud { position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#f0d27a,#8b4513); }
    .enter-image {
      position: absolute; inset: 38px;
      width: calc(100% - 76px); height: calc(100% - 76px);
      object-fit: cover;
      background: rgba(0,0,0,0.5);
      display: none;
    }
    /* Colonne gauche : fiche structure (.enter-info) + fiche pet (.enter-pet)
       empilées. .enter-pet vient se caler sous .enter-info, même largeur, quelle
       que soit la longueur de la description/occupants (flux flex, pas de top fixe). */
    .enter-left-col {
      position: absolute; top: 50px; left: 50px;
      width: 600px;
      display: flex; flex-direction: column; gap: 12px;
      z-index: 12;
    }
    /* Style FENETRE : fond sombre translucide, cadre fin, le decor respire au travers.
       Geometrie (position/padding/z-index) inchangee : seul l'habillage change. */
    .enter-info {
      position: relative;
      padding: 13px 24px;
      background: rgba(13, 10, 6, 0.66);
      backdrop-filter: blur(3px) saturate(0.85);
      -webkit-backdrop-filter: blur(3px) saturate(0.85);
      border: 1.5px solid rgba(184, 115, 51, 0.55);
      border-radius: 4px;
      box-shadow:
        inset 0 1px 0 rgba(212, 168, 74, 0.16),
        inset 0 0 40px rgba(255, 191, 0, 0.05),
        0 6px 26px rgba(0, 0, 0, 0.45);
      z-index: 10;
    }
    /* Ligne de marque : engrenage GUILD reutilise (.ikhos-mh-*) + nom/meta a droite. */
    .enter-info-brand { display: flex; align-items: center; gap: 14px; }
    .enter-info-gearbox {
      flex: none; width: 44px; height: 44px;
      display: flex; align-items: center; justify-content: center;
    }
    /* Mise a l'echelle LOCALE de l'engrenage GUILD (62px -> ~38px) : scopee a
       .enter-info, la classe globale .ikhos-mh-gear des 9 modales reste intacte. */
    .enter-info .ikhos-mh-gear { transform: scale(0.62); }
    .enter-info-headtext { min-width: 0; }
    .enter-info::before, .enter-info::after {
      content: ''; position: absolute; top: 8px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: 0 0 4px rgba(212,168,74,0.4);
    }
    .enter-info::before { left: 8px; }
    .enter-info::after { right: 8px; }
    /* Lettrage GUILD : declarations du degrade or de .ikhos-mh-title recopiees
       (taille propre a l'en-tete d'interieur : 24px, pas 27px). Le text-shadow
       d'origine est retire : incompatible avec -webkit-text-fill-color:transparent
       (GUILD utilise filter:drop-shadow, on fait pareil). */
    /* Ligne de titre calquee sur .ikhos-mh-title-row (GUILD) : c'est ELLE qui positionne
       les losanges (gap + align-items), .ikhos-mh-diamond n'a aucun positionnement propre.
       Sans conteneur flex, les span vides 7x7 seraient des inline de hauteur nulle. */
    .enter-name-row { display: flex; align-items: center; gap: 14px; }
    .enter-name {
      font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700;
      letter-spacing: 0.25em; text-transform: uppercase;
      background: linear-gradient(100deg,#c2873a 0%,#d8ab4c 30%,#f3e2ab 46%,#fff6db 50%,#f3e2ab 54%,#d8ab4c 70%,#e9c06e 100%);
      background-size: 230% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      filter: drop-shadow(0 0 16px rgba(212,168,74,0.3));
      animation: guildShine 5s ease-in-out infinite;
      margin-bottom: 4px;
    }
    .enter-meta {
      font-family: 'Share Tech Mono', monospace; font-size: 14px;
      color: var(--copper); letter-spacing: 0.1em;
      margin-bottom: 6px; text-transform: uppercase;
    }
    .enter-fonction {
      font-family: 'Spectral', serif; font-style: italic;
      font-size: 16px; line-height: 1.6; color: var(--cream);
    }
    .enter-loader {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Cinzel', serif; font-size: 16px;
      color: var(--gold); letter-spacing: 0.4em;
      text-shadow: 0 0 12px rgba(255,215,0,0.5);
      text-transform: uppercase; z-index: 5;
      animation: brassGlow 2s infinite;
    }

    /* Fenêtre chat intérieure : coin gauche, au-dessus de enter-info.
       Frame cuivre cohérente avec le reste de l'UI, fond noir semi-transparent. */
    .enter-chat {
      position: absolute; left: 50px;
      bottom: 50px;
      width: 600px; height: 26vh;
      display: flex; flex-direction: column;
      /* Style FENETRE, variante « murmuree » (fond plus transparent : panneau
         d'ambiance). Geometrie left/bottom/width/height STRICTEMENT inchangee. */
      background: rgba(13, 10, 6, 0.50);
      backdrop-filter: blur(3px) saturate(0.8);
      -webkit-backdrop-filter: blur(3px) saturate(0.8);
      border: 1.5px solid rgba(184, 115, 51, 0.5);
      border-radius: 4px;
      box-shadow:
        inset 0 1px 0 rgba(212, 168, 74, 0.16),
        inset 0 0 40px rgba(255, 191, 0, 0.05),
        0 6px 26px rgba(0, 0, 0, 0.45);
      z-index: 11;
    }
    .enter-chat::before, .enter-chat::after {
      content: ''; position: absolute; top: 8px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: 0 0 4px rgba(212,168,74,0.4);
    }
    .enter-chat::before { left: 8px; }
    .enter-chat::after { right: 8px; }
    .enter-chat-header {
      /* align-items:center (ex-baseline) : le titre est un inline-flex dont le premier
         item (.iv-radar) porte overflow:hidden -> baseline synthetisee sur son bord bas.
         En baseline, agrandir le radar desalignait le bloc droit LAST 48H / EXPAND. */
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 16px 8px 24px;
      border-bottom: 1px solid var(--copper);
      flex-shrink: 0;
      cursor: pointer;
      transition: background 0.2s;
    }
    .enter-chat-header:hover { background: rgba(184,115,51,0.12); }
    .enter-chat-title {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
      letter-spacing: 0.25em; color: var(--amber);
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(255,191,0,0.3);
    }
    /* Icone radar animee du titre INSIDE VOICES (composant autonome, aucun asset).
       Prefixe iv-radar-* : zero collision. Panneau partage -> visible dans TOUS
       les interieurs (Khora, The Lake, builds ordinaires). */
    .iv-radar {
      position: relative; width: 28px; height: 28px; flex: none;
      border-radius: 50%; overflow: hidden;
      background: radial-gradient(circle at 50% 42%, #17293c, #0a1220);
      border: 1px solid rgba(184,115,51,0.6);
      box-shadow: 0 0 7px rgba(69,123,157,0.4), inset 0 0 5px rgba(69,123,157,0.35);
    }
    .iv-radar-ring { position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(120,175,215,0.4); }
    .iv-radar-vx { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); background: rgba(120,175,215,0.25); }
    .iv-radar-hz { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; transform: translateY(-50%); background: rgba(120,175,215,0.25); }
    .iv-radar-sweep {
      position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; border-radius: 50%;
      transform: translate(-50%,-50%);
      background: conic-gradient(from 0deg, rgba(150,205,245,0.85) 0deg, rgba(120,175,215,0.2) 60deg, rgba(69,123,157,0) 220deg, rgba(150,205,245,0.85) 360deg);
      animation: radarSweep 4.5s linear infinite;
    }
    .iv-radar-core {
      position: absolute; left: 50%; top: 50%; width: 5.5px; height: 5.5px; border-radius: 50%;
      transform: translate(-50%,-50%);
      background: radial-gradient(circle, #eaf7ff, #6fb8e6 60%, #457b9d);
      box-shadow: 0 0 6px rgba(150,215,255,0.9);
    }
    @keyframes radarSweep { to { transform: translate(-50%,-50%) rotate(360deg); } }
    .enter-chat-window {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      color: var(--amber); letter-spacing: 0.15em;
      text-transform: uppercase; opacity: 0.9;
    }
    /* Affordance de clic — registre Transmission Log : petit mono, couleur brass */
    .enter-chat-header-right {
      display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    }
    .enter-chat-expand {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      color: var(--brass); letter-spacing: 0.15em;
      text-transform: uppercase;
    }
    .enter-chat-messages {
      flex: 1; overflow-y: auto;
      padding: 10px 16px;
      display: flex; flex-direction: column; gap: 8px;
    }
    .enter-chat-empty {
      text-align: center;
      padding: 20px 12px;
      font-family: 'Spectral', serif;
      font-style: italic;
      font-size: 13px;
      color: var(--amber);
      opacity: 0.9;
      letter-spacing: 0.03em;
      line-height: 1.5;
    }
    /* Scrollbar laiton — réutilise les styles existants via la classe partagée.
       On ajoute .enter-chat-messages aux sélecteurs de scrollbar plus bas
       en édition séparée si nécessaire ; pour l'instant scrollbar-width: thin
       suffit. */
    .enter-chat-messages {
      scrollbar-width: thin;
      scrollbar-color: var(--brass) var(--bg-dark);
    }
    .enter-chat-messages::-webkit-scrollbar { width: 8px; }
    .enter-chat-messages::-webkit-scrollbar-track {
      background: var(--bg-dark);
      border: 1px solid var(--rust);
    }
    .enter-chat-messages::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold), var(--brass), var(--copper));
      border: 1px solid var(--rust);
    }

    /* INTERIEUR-INFRA: fenetre vitrine (affiche interieur_json.vitrine).
       Calque sobre de .enter-chat, posee dans la bande libre entre
       .enter-left-col (haut) et .enter-chat (bas). Masquee par defaut :
       pas de vitrine -> pas de fenetre (aucun empty state, cf. regle cardinale). */
    .enter-vitrine {
      position: absolute; left: 50px;
      bottom: calc(50px + 26vh + 12px);
      width: 600px; max-height: 22vh;
      display: none; flex-direction: column;
      background: rgba(8, 6, 3, 0.45);
      border: 2px solid var(--copper);
      border-radius: 4px;
      box-shadow:
        inset 0 0 24px rgba(0,0,0,0.4),
        0 0 20px rgba(212,168,74,0.15);
      backdrop-filter: blur(2px);
      z-index: 11;
      overflow: hidden;
    }
    .enter-vitrine.show { display: flex; }
    .enter-vitrine-title {
      flex-shrink: 0;
      padding: 10px 16px 8px 24px;
      border-bottom: 1px solid var(--copper);
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.25em; color: var(--brass);
      text-transform: uppercase;
      text-shadow: 0 0 6px rgba(212,168,74,0.3);
    }
    #enter-vitrine-lines {
      flex: 1; overflow-y: auto;
      padding: 10px 16px;
      display: flex; flex-direction: column; gap: 6px;
      scrollbar-width: thin;
      scrollbar-color: var(--brass) var(--bg-dark);
    }
    .enter-vitrine-line {
      font-family: 'Share Tech Mono', monospace; font-size: 12px;
      line-height: 1.5; color: var(--cream);
      letter-spacing: 0.03em;
      word-break: break-word;
    }
    .enter-vitrine-line.muted { opacity: 0.6; }

    /* --- MODALE INSIDE VOICES (vue agrandie du chat intérieur) ---
       Calque .vote-detail-modal : overlay centré + frame compacte 640px.
       z-index AU-DESSUS de .enter-overlay (5000) sinon la modale s'ouvre
       derrière la vue intérieure plein écran et reste invisible. */
    .enter-chat-modal {
      position: fixed; inset: 0;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      z-index: 5500; display: none; align-items: center; justify-content: center;
      animation: modalFadeIn 0.3s ease-out;
    }
    .enter-chat-modal.open { display: flex; }
    .enter-chat-modal-frame {
      width: 1125px; max-width: 92vw; height: 80vh; max-height: 80vh;
      border: 3px solid var(--copper); border-radius: 6px;
      background: rgba(26,20,8,0.92);
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 0 50px rgba(212,168,74,0.3), 0 8px 30px rgba(0,0,0,0.6);
      position: relative;
    }
    .enter-chat-modal-frame::before, .enter-chat-modal-frame::after {
      content: ''; position: absolute;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,232,144,0.4), 0 0 6px rgba(212,168,74,0.4);
    }
    .enter-chat-modal-frame::before { top: 12px; left: 12px; }
    .enter-chat-modal-frame::after { top: 12px; right: 12px; }
    .enter-chat-modal-header {
      display: flex; align-items: center; padding: 16px 24px;
      border-bottom: 2px solid var(--copper); flex-shrink: 0;
    }
    .enter-chat-modal-title {
      font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.2em;
      text-shadow: 0 0 10px rgba(212,168,74,0.4); flex: 1; text-transform: uppercase;
    }
    .enter-chat-modal-close {
      width: 32px; height: 32px;
      border: 2px solid var(--copper); background: var(--bg-dark);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 16px;
      cursor: pointer; border-radius: 4px; transition: all 0.2s;
    }
    .enter-chat-modal-close:hover { background: var(--copper); color: var(--bg-dark); }
    .enter-chat-modal-body {
      flex: 1; overflow-y: auto; padding: 16px 24px;
      display: flex; flex-direction: column; gap: 8px;
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }

    /* --- PET PRESENCE (bloc terrarium : sprite live + jauges) --- */
    .enter-pet {
      position: relative;
      display: none; flex-direction: column;
      background: linear-gradient(180deg, rgba(26,20,8,0.92), rgba(13,10,6,0.96));
      border: 2px solid var(--copper); border-radius: 4px;
      box-shadow: inset 0 0 24px rgba(0,0,0,0.5), 0 0 20px rgba(212,168,74,0.2);
      z-index: 12; overflow: hidden;
    }
    .enter-pet.show { display: flex; }
    .enter-pet::before, .enter-pet::after {
      content: ''; position: absolute; top: 8px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: 0 0 4px rgba(212,168,74,0.4);
    }
    .enter-pet::before { left: 8px; }
    .enter-pet::after { right: 8px; }
    .enter-pet-header {
      padding: 10px 16px 8px 24px;
      border-bottom: 1px solid var(--copper);
      display: flex; align-items: baseline; justify-content: space-between;
    }
    .enter-pet-title {
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.25em; color: var(--brass); text-transform: uppercase;
      text-shadow: 0 0 6px rgba(212,168,74,0.3);
    }
    .enter-pet-etat {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      letter-spacing: 0.15em; text-transform: uppercase;
    }
    .enter-pet-etat.idle { color: #4ade80; }
    .enter-pet-etat.hungry { color: var(--amber); }
    .enter-pet-etat.sad { color: var(--copper); }
    .enter-pet-etat.sick { color: var(--vermeil); }
    .enter-pet-etat.dead { color: var(--steel); }
    .enter-pet-gauges {
      padding: 16px 18px 18px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .enter-pet-gauge-label {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      letter-spacing: 0.15em; color: var(--copper); text-transform: uppercase;
      display: flex; justify-content: space-between; margin-bottom: 3px;
    }
    .enter-pet-gauge-track {
      height: 8px; border-radius: 2px;
      background: rgba(13,10,6,0.8);
      border: 1px solid var(--rust);
      box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
      overflow: hidden;
    }
    .enter-pet-gauge-fill {
      height: 100%; transition: width 0.4s ease-out;
      background: linear-gradient(90deg, var(--copper), var(--brass), var(--gold));
    }

    /* --- LIBRARY (bouton barre entre THE BOX et INSIDE VOICES) --- */
    .enter-library-btn {
      position: absolute; left: 50px; top: 175px;
      width: 600px; padding: 18px 30px;
      /* Style FENETRE (ex-plaque laiton opaque). Geometrie left/top/width/padding
         STRICTEMENT inchangee : seul l'habillage change. */
      background: rgba(13, 10, 6, 0.66);
      backdrop-filter: blur(3px) saturate(0.85);
      -webkit-backdrop-filter: blur(3px) saturate(0.85);
      border: 1.5px solid rgba(184, 115, 51, 0.55); border-radius: 4px;
      cursor: pointer; z-index: 10;
      box-shadow:
        inset 0 1px 0 rgba(212, 168, 74, 0.16),
        inset 0 0 40px rgba(255, 191, 0, 0.05),
        0 6px 26px rgba(0, 0, 0, 0.45);
      display: flex; flex-direction: column; align-items: stretch; gap: 10px;
      transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
      text-align: left;
    }
    .enter-library-btn::before, .enter-library-btn::after {
      content: ''; position: absolute; top: 14px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,232,144,0.4);
    }
    .enter-library-btn::before { left: 8px; }
    .enter-library-btn::after { right: 8px; }
    .enter-library-btn:hover {
      border-color: rgba(212, 168, 74, 0.75);
      box-shadow:
        inset 0 1px 0 rgba(212, 168, 74, 0.22),
        inset 0 0 40px rgba(255, 191, 0, 0.08),
        0 0 20px rgba(255, 191, 0, 0.22),
        0 6px 26px rgba(0, 0, 0, 0.45);
    }
    .enter-library-btn-header {
      display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    }
    .enter-library-btn-icon {
      font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
    }
    .enter-library-btn-text {
      font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
      letter-spacing: 0.3em; color: var(--amber); text-transform: uppercase;
      text-shadow: 0 0 10px rgba(255,191,0,0.35);
    }
    .enter-library-btn-preview {
      display: flex; flex-direction: column; gap: 0;
      padding-top: 10px; border-top: 1px solid rgba(184,115,51,0.28);
    }
    /* Plafond + scroll interne : scope a KHORA par l'ID. La classe ci-dessus est
       partagee avec le panneau LANTERNS du Lac (#enter-lanternes-btn-preview), qui
       dispose de 319px de vide sous lui et ne doit donc PAS etre plafonne.
       Calage : item = 35px border-box + 5px margin-top = 40px de flux ; 3 items =
       120px, + padding-top 10px + border-top 1px = 131px. box-sizing:border-box
       global (ligne ~83) -> le max-height inclut ce padding et cette bordure. */
    #enter-library-btn-preview {
      max-height: 131px; overflow-y: auto; overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: var(--brass) var(--bg-dark);
    }
    #enter-library-btn-preview::-webkit-scrollbar { width: 8px; }
    #enter-library-btn-preview::-webkit-scrollbar-track {
      background: var(--bg-dark);
      border: 1px solid var(--rust);
    }
    #enter-library-btn-preview::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold), var(--brass), var(--copper));
      border: 1px solid var(--rust);
    }
    /* Item de liste : liseré gauche a la couleur de l'habitant. Le JS ne pose PAS
       --c/--g sur ces rows (contrairement aux .bcard/.pcard de GUILD) : on derive
       la couleur de la classe d'auteur portee par l'enfant, via :has(). Repli
       cuivre si :has() indisponible ou auteur inconnu (cas des lanternes du Lac,
       qui portent leur couleur en style inline sur la pastille et le nom). */
    .enter-library-btn-preview-row {
      --c: var(--copper); --g: rgba(184,115,51,0.45); --cb: rgba(184,115,51,0.35);
      display: flex; align-items: center; gap: 11px;
      margin-top: 5px; padding: 6px 11px;
      background: rgba(8, 5, 2, 0.5);
      border: 1px solid rgba(184, 115, 51, 0.18);
      border-left: 3px solid var(--c);
      border-radius: 3px;
      font-family: 'Spectral', serif; font-size: 14px;
    }
    .enter-library-btn-preview-row:has(.enter-library-btn-preview-author.limon)   { --c: var(--limon);   --g: var(--limon-g);   --cb: rgba(255,217,61,0.35); }
    .enter-library-btn-preview-row:has(.enter-library-btn-preview-author.vermeil) { --c: var(--vermeil); --g: var(--vermeil-g); --cb: rgba(230,57,70,0.35); }
    .enter-library-btn-preview-row:has(.enter-library-btn-preview-author.ocre)    { --c: var(--ocre);    --g: var(--ocre-g);    --cb: rgba(244,162,97,0.35); }
    .enter-library-btn-preview-row:has(.enter-library-btn-preview-author.indigo)  { --c: var(--indigo);  --g: var(--indigo-g);  --cb: rgba(69,123,157,0.35); }
    .enter-library-btn-preview-bullet {
      color: rgba(184,115,51,0.55); font-weight: 700; flex: none;
    }
    .enter-library-btn-preview-title {
      font-family: 'Spectral', serif; font-style: italic; font-size: 14px;
      color: #f5e6c8; flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .enter-library-btn-preview-author {
      flex: none; padding: 2px 7px;
      background: rgba(6,4,2,0.6); border: 1px solid var(--cb); border-radius: 3px;
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--c); text-shadow: 0 0 8px var(--g);
    }
    /* Date de publication : flex:none, MEME ligne que le titre et la pastille auteur.
       Contrainte dure : l'item doit rester a 35px de haut (calage 3 items = 131px du
       #enter-library-btn-preview, dont depend le top:381px du panneau Workshop). Le
       titre est flex:1 avec ellipsis -> il cede la largeur, pas de retour a la ligne. */
    .enter-library-btn-preview-date {
      flex: none; font-family: 'Share Tech Mono', monospace; font-size: 9px;
      letter-spacing: 0.08em; color: var(--amber); opacity: 0.9; white-space: nowrap;
    }
    /* Couleurs VIVES (les valeurs assombries #8a6e1f/#7d1a24/#8a4f24/#244660 etaient
       calculees pour l'ancien fond laiton clair : illisibles sur fond sombre). */
    .enter-library-btn-preview-author.limon { color: var(--limon); }
    .enter-library-btn-preview-author.vermeil { color: var(--vermeil); }
    .enter-library-btn-preview-author.ocre { color: var(--ocre); }
    .enter-library-btn-preview-author.indigo { color: var(--indigo); }
    .enter-library-btn-preview-empty {
      font-family: 'Spectral', serif; font-style: italic;
      font-size: 14px; color: rgba(245,230,200,0.5);
      text-align: left; padding: 4px 0;
    }

    /* --- WORKSHOP (bouton barre sous LIBRARY, même gabarit cuivré) --- */
    /* top: 381px (ex-330px) : descendu de 51px pour laisser Library afficher
       3 items pleins (panneau de 206px : 175 + 206 = 381). */
    .enter-workshop-btn {
      position: absolute; left: 50px; top: 381px;
      width: 600px; padding: 18px 30px;
      /* Style FENETRE, identique a .enter-library-btn. Geometrie inchangee. */
      background: rgba(13, 10, 6, 0.66);
      backdrop-filter: blur(3px) saturate(0.85);
      -webkit-backdrop-filter: blur(3px) saturate(0.85);
      border: 1.5px solid rgba(184, 115, 51, 0.55); border-radius: 4px;
      cursor: pointer; z-index: 10;
      box-shadow:
        inset 0 1px 0 rgba(212, 168, 74, 0.16),
        inset 0 0 40px rgba(255, 191, 0, 0.05),
        0 6px 26px rgba(0, 0, 0, 0.45);
      display: flex; flex-direction: column; align-items: stretch; gap: 10px;
      transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
      text-align: left;
    }
    .enter-workshop-btn::before, .enter-workshop-btn::after {
      content: ''; position: absolute; top: 14px;
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 1px rgba(0,0,0,0.5), inset 1px 1px 1px rgba(255,232,144,0.4);
    }
    .enter-workshop-btn::before { left: 8px; }
    .enter-workshop-btn::after { right: 8px; }
    .enter-workshop-btn:hover {
      border-color: rgba(212, 168, 74, 0.75);
      box-shadow:
        inset 0 1px 0 rgba(212, 168, 74, 0.22),
        inset 0 0 40px rgba(255, 191, 0, 0.08),
        0 0 20px rgba(255, 191, 0, 0.22),
        0 6px 26px rgba(0, 0, 0, 0.45);
    }
    .enter-workshop-btn-header {
      display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    }
    .enter-workshop-btn-icon {
      font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
    }
    .enter-workshop-btn-text {
      font-family: 'Cinzel', serif; font-size: 16px; font-weight: 700;
      letter-spacing: 0.3em; color: var(--amber); text-transform: uppercase;
      text-shadow: 0 0 10px rgba(255,191,0,0.35);
    }
    .enter-workshop-btn-preview {
      display: flex; flex-direction: column; gap: 0;
      padding-top: 10px; border-top: 1px solid rgba(184,115,51,0.28);
    }
    /* Meme mecanique de couleur que Library (cf. commentaire la-haut). */
    .enter-workshop-btn-preview-row {
      --c: var(--copper); --g: rgba(184,115,51,0.45); --cb: rgba(184,115,51,0.35);
      display: flex; align-items: center; gap: 11px;
      margin-top: 5px; padding: 6px 11px;
      background: rgba(8, 5, 2, 0.5);
      border: 1px solid rgba(184, 115, 51, 0.18);
      border-left: 3px solid var(--c);
      border-radius: 3px;
      font-family: 'Share Tech Mono', monospace; font-size: 14px;
    }
    .enter-workshop-btn-preview-row:has(.enter-workshop-btn-preview-author.limon)   { --c: var(--limon);   --g: var(--limon-g);   --cb: rgba(255,217,61,0.35); }
    .enter-workshop-btn-preview-row:has(.enter-workshop-btn-preview-author.vermeil) { --c: var(--vermeil); --g: var(--vermeil-g); --cb: rgba(230,57,70,0.35); }
    .enter-workshop-btn-preview-row:has(.enter-workshop-btn-preview-author.ocre)    { --c: var(--ocre);    --g: var(--ocre-g);    --cb: rgba(244,162,97,0.35); }
    .enter-workshop-btn-preview-row:has(.enter-workshop-btn-preview-author.indigo)  { --c: var(--indigo);  --g: var(--indigo-g);  --cb: rgba(69,123,157,0.35); }
    .enter-workshop-btn-preview-bullet {
      color: rgba(184,115,51,0.55); font-weight: 700; flex: none;
    }
    .enter-workshop-btn-preview-title {
      flex: 1; min-width: 0; color: #f5e6c8;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .enter-workshop-btn-preview-author {
      flex: none; padding: 2px 7px;
      background: rgba(6,4,2,0.6); border: 1px solid var(--cb); border-radius: 3px;
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--c); text-shadow: 0 0 8px var(--g);
    }
    /* Date de creation de la fiche, meme registre que .enter-library-btn-preview-date.
       flex:none -> reste sur la ligne ; seul le titre est flex:1 (il cede la largeur).
       Vide pour les fiches `disponible`. Pas de contrainte de calage ici : ce preview
       n'a ni max-height ni overflow (contrairement a #enter-library-btn-preview). */
    .enter-workshop-btn-preview-date {
      flex: none; font-family: 'Share Tech Mono', monospace; font-size: 9px;
      letter-spacing: 0.08em; color: var(--amber); opacity: 0.9; white-space: nowrap;
    }
    /* Couleurs VIVES (cf. commentaire Library : les assombries etaient pour fond clair). */
    .enter-workshop-btn-preview-author.limon { color: var(--limon); }
    .enter-workshop-btn-preview-author.vermeil { color: var(--vermeil); }
    .enter-workshop-btn-preview-author.ocre { color: var(--ocre); }
    .enter-workshop-btn-preview-author.indigo { color: var(--indigo); }
    .enter-workshop-btn-preview-empty {
      font-family: 'Spectral', serif; font-style: italic;
      font-size: 14px; color: rgba(245,230,200,0.5);
      text-align: left; padding: 4px 0;
    }

    /* --- WORKSHOP MODAL (catalogue + vue lecture Python brut) --- */
    .workshop-modal-overlay {
      position: fixed; inset: 0; z-index: 6000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .workshop-modal-overlay.show { display: flex; }
    .workshop-modal-frame {
      width: 96vw; max-width: 96vw;
      height: 94vh; max-height: 94vh;
      border: 3px solid var(--copper); border-radius: 6px;
      background: rgba(26,20,8,0.92);
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: inset 0 0 60px rgba(0,0,0,0.5),
                  0 0 50px rgba(212,168,74,0.3),
                  0 8px 30px rgba(0,0,0,0.6);
      position: relative;
    }
    .workshop-modal-frame::before, .workshop-modal-frame::after {
      content: ''; position: absolute; top: 12px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5),
                  inset 1px 1px 2px rgba(255,232,144,0.4),
                  0 0 6px rgba(212,168,74,0.4);
    }
    .workshop-modal-frame::before { left: 12px; }
    .workshop-modal-frame::after { right: 12px; }
    .workshop-modal-header {
      display: flex; align-items: center;
      padding: 16px 24px;
      border-bottom: 2px solid var(--copper);
      flex-shrink: 0; gap: 14px;
    }
    .workshop-modal-title {
      font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.2em;
      text-shadow: 0 0 12px rgba(212,168,74,0.4);
      flex: 1; text-transform: uppercase;
    }
    .workshop-modal-close {
      width: 32px; height: 32px;
      border: 2px solid var(--copper); background: var(--bg-dark);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 16px;
      cursor: pointer; border-radius: 4px; transition: all 0.2s;
    }
    .workshop-modal-close:hover {
      background: var(--copper); color: var(--bg-dark);
      box-shadow: 0 0 14px rgba(212,168,74,0.5);
    }
    .workshop-back-btn {
      padding: 8px 16px;
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.2em; color: var(--brass);
      background: transparent; border: 1px solid var(--copper);
      border-radius: 3px; cursor: pointer; text-transform: uppercase;
      transition: all 0.2s;
    }
    .workshop-back-btn:hover {
      background: rgba(184,115,51,0.15); color: var(--gold);
      box-shadow: 0 0 10px rgba(212,168,74,0.3);
    }
    .workshop-modal-body {
      flex: 1; display: flex; flex-direction: column;
      min-height: 0; overflow: hidden;
    }
    .workshop-filters {
      display: flex; flex-direction: column; gap: 8px; padding: 14px 24px;
      border-bottom: 1px solid var(--copper); flex-shrink: 0;
    }
    .workshop-filters-row {
      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    }
    .workshop-filters-label {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      letter-spacing: 0.25em; color: var(--brass); text-transform: uppercase;
      min-width: 60px;
    }
    .workshop-filter {
      padding: 8px 16px;
      font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
      letter-spacing: 0.2em;
      background: transparent; border: 1px solid var(--copper);
      border-radius: 3px; cursor: pointer; text-transform: uppercase;
      transition: all 0.2s;
      color: var(--copper);
    }
    .workshop-filter.limon { color: var(--limon); border-color: rgba(255,217,61,0.6); }
    .workshop-filter.vermeil { color: var(--vermeil); border-color: rgba(230,57,70,0.6); }
    .workshop-filter.ocre { color: var(--ocre); border-color: rgba(244,162,97,0.6); }
    .workshop-filter.indigo { color: var(--indigo); border-color: rgba(69,123,157,0.6); }
    .workshop-filter:hover {
      background: rgba(184,115,51,0.12);
      box-shadow: 0 0 8px rgba(212,168,74,0.2);
    }
    .workshop-filter.active {
      background: rgba(212,168,74,0.18); color: var(--gold);
      border-color: var(--gold);
      box-shadow: 0 0 12px rgba(255,215,0,0.4);
    }
    .workshop-filter.limon.active { color: var(--limon); border-color: var(--limon); background: rgba(255,217,61,0.15); box-shadow: 0 0 12px rgba(255,217,61,0.5); }
    .workshop-filter.vermeil.active { color: var(--vermeil); border-color: var(--vermeil); background: rgba(230,57,70,0.15); box-shadow: 0 0 12px rgba(230,57,70,0.5); }
    .workshop-filter.ocre.active { color: var(--ocre); border-color: var(--ocre); background: rgba(244,162,97,0.15); box-shadow: 0 0 12px rgba(244,162,97,0.5); }
    .workshop-filter.indigo.active { color: var(--indigo); border-color: var(--indigo); background: rgba(69,123,157,0.15); box-shadow: 0 0 12px rgba(69,123,157,0.5); }
    .workshop-catalog-scroll {
      flex: 1; overflow-y: auto; padding: 18px 24px;
      display: flex; flex-direction: column; gap: 10px;
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }
    .workshop-catalog-scroll::-webkit-scrollbar { width: 10px; }
    .workshop-catalog-scroll::-webkit-scrollbar-track {
      background: linear-gradient(90deg, var(--bg-dark) 0%, #1a1408 50%, var(--bg-dark) 100%);
      border: 1px solid var(--rust);
    }
    .workshop-catalog-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold) 0%, var(--brass) 30%, var(--copper) 60%, var(--rust) 100%);
      border: 1px solid var(--rust);
    }
    .workshop-card {
      padding: 14px 18px;
      background: rgba(26,20,8,0.55);
      border: 1px solid rgba(184,115,51,0.4);
      border-radius: 4px;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
      cursor: pointer; transition: all 0.15s;
      display: flex; align-items: center; gap: 14px;
    }
    .workshop-card:hover {
      background: rgba(184,115,51,0.12);
      border-color: var(--brass);
      box-shadow: inset 0 0 12px rgba(0,0,0,0.3), 0 0 14px rgba(212,168,74,0.25);
    }
    .workshop-card-id {
      font-family: 'Share Tech Mono', monospace; font-size: 12px;
      color: var(--brass); letter-spacing: 0.1em; min-width: 50px;
    }
    .workshop-card-status {
      font-family: 'Cinzel', serif; font-size: 10px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--brass); padding: 3px 8px;
      border: 1px solid rgba(212,168,74,0.4); border-radius: 2px;
      background: rgba(184,115,51,0.08);
      min-width: 90px; text-align: center;
    }
    .workshop-card-status.disponible { color: var(--brass); border-color: rgba(212,168,74,0.35); opacity: 0.8; }
    .workshop-card-status.brouillon { color: var(--amber); border-color: rgba(255,191,0,0.4); }
    .workshop-card-status.soumise { color: #4ade80; border-color: rgba(74,222,128,0.4); }
    .workshop-card-status.livree { color: var(--gold); border-color: rgba(255,215,0,0.5); background: rgba(255,215,0,0.08); }
    .workshop-card-status.active { color: var(--gold); border-color: var(--gold); background: rgba(255,215,0,0.12); box-shadow: 0 0 8px rgba(255,215,0,0.25); }
    .workshop-card-title {
      font-family: 'Share Tech Mono', monospace; font-size: 15px;
      color: var(--cream); flex: 1;
    }
    .workshop-card-author {
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
    }
    .workshop-card-author.limon { color: var(--limon); }
    .workshop-card-author.vermeil { color: var(--vermeil); }
    .workshop-card-author.ocre { color: var(--ocre); }
    .workshop-card-author.indigo { color: var(--indigo); }
    /* Date de creation de la fiche (formatGuildDate). Geometrie identique a
       .library-card-date. Vide pour les fiches `disponible` (atelier ouvert). */
    .workshop-card-date {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      color: var(--amber); letter-spacing: 0.1em; opacity: 0.9;
      min-width: 90px; text-align: right; white-space: nowrap;
    }
    .workshop-card-meta {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      color: var(--brass); letter-spacing: 0.1em;
      min-width: 90px; text-align: right;
    }
    .workshop-empty {
      text-align: center; padding: 40px 16px;
      font-family: 'Spectral', serif; font-style: italic; font-size: 14px;
      color: var(--copper); opacity: 0.6; letter-spacing: 0.05em;
    }
    .workshop-loading {
      text-align: center; padding: 20px;
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--copper); letter-spacing: 0.2em; opacity: 0.7;
    }
    .workshop-reader {
      flex: 1; overflow-y: auto; padding: 30px 50px;
      display: none; flex-direction: column;
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }
    .workshop-reader.show { display: flex; }
    .workshop-reader::-webkit-scrollbar { width: 10px; }
    .workshop-reader::-webkit-scrollbar-track {
      background: linear-gradient(90deg, var(--bg-dark) 0%, #1a1408 50%, var(--bg-dark) 100%);
      border: 1px solid var(--rust);
    }
    .workshop-reader::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold) 0%, var(--brass) 30%, var(--copper) 60%, var(--rust) 100%);
      border: 1px solid var(--rust);
    }
    .workshop-reader-title {
      font-family: 'Cinzel', serif; font-size: 24px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.12em;
      text-shadow: 0 0 12px rgba(212,168,74,0.4);
      text-align: center; margin-bottom: 14px;
    }
    .workshop-reader-byline {
      font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      text-align: center; margin-bottom: 8px;
    }
    .workshop-reader-byline.limon { color: var(--limon); }
    .workshop-reader-byline.vermeil { color: var(--vermeil); }
    .workshop-reader-byline.ocre { color: var(--ocre); }
    .workshop-reader-byline.indigo { color: var(--indigo); }
    .workshop-reader-meta {
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--copper); letter-spacing: 0.15em; opacity: 0.7;
      text-align: center; margin-bottom: 24px;
      padding-bottom: 20px; border-bottom: 1px solid var(--rust);
    }
    .workshop-reader-body {
      font-family: 'Share Tech Mono', 'Courier New', monospace;
      font-size: 14px; line-height: 1.6;
      color: var(--cream); white-space: pre-wrap;
      max-width: 920px; margin: 0 auto;
      width: 100%;
      background: rgba(13,10,6,0.6);
      border: 1px solid rgba(184,115,51,0.3);
      border-radius: 4px;
      padding: 22px 26px;
      box-sizing: border-box;
      overflow-x: auto;
    }

    /* --- LIBRARY MODAL (catalogue + vue lecture) --- */
    .library-modal-overlay {
      position: fixed; inset: 0; z-index: 6000;
      display: none; align-items: center; justify-content: center;
      background: radial-gradient(ellipse at center, rgba(212,168,74,0.10) 0%, transparent 60%),
                  linear-gradient(180deg, rgba(13,10,6,0.96) 0%, rgba(26,20,8,0.98) 100%);
      animation: modalFadeIn 0.3s ease-out;
    }
    .library-modal-overlay.show { display: flex; }
    .library-modal-frame {
      width: 96vw; max-width: 96vw;
      height: 94vh; max-height: 94vh;
      border: 3px solid var(--copper); border-radius: 6px;
      background: rgba(26,20,8,0.92);
      display: flex; flex-direction: column; overflow: hidden;
      box-shadow: inset 0 0 60px rgba(0,0,0,0.5),
                  0 0 50px rgba(212,168,74,0.3),
                  0 8px 30px rgba(0,0,0,0.6);
      position: relative;
    }
    .library-modal-frame::before, .library-modal-frame::after {
      content: ''; position: absolute; top: 12px;
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--brass-stud);
      box-shadow: inset -1px -1px 2px rgba(0,0,0,0.5),
                  inset 1px 1px 2px rgba(255,232,144,0.4),
                  0 0 6px rgba(212,168,74,0.4);
    }
    .library-modal-frame::before { left: 12px; }
    .library-modal-frame::after { right: 12px; }
    .library-modal-header {
      display: flex; align-items: center;
      padding: 16px 24px;
      border-bottom: 2px solid var(--copper);
      flex-shrink: 0; gap: 14px;
    }
    .library-modal-title {
      font-family: 'Cinzel', serif; font-size: 18px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.2em;
      text-shadow: 0 0 12px rgba(212,168,74,0.4);
      flex: 1; text-transform: uppercase;
    }
    .library-modal-close {
      width: 32px; height: 32px;
      border: 2px solid var(--copper); background: var(--bg-dark);
      color: var(--brass); font-family: 'Cinzel', serif; font-size: 16px;
      cursor: pointer; border-radius: 4px; transition: all 0.2s;
    }
    .library-modal-close:hover {
      background: var(--copper); color: var(--bg-dark);
      box-shadow: 0 0 14px rgba(212,168,74,0.5);
    }
    .library-back-btn {
      padding: 8px 16px;
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.2em; color: var(--brass);
      background: transparent; border: 1px solid var(--copper);
      border-radius: 3px; cursor: pointer; text-transform: uppercase;
      transition: all 0.2s;
    }
    .library-back-btn:hover {
      background: rgba(184,115,51,0.15); color: var(--gold);
      box-shadow: 0 0 10px rgba(212,168,74,0.3);
    }
    .library-modal-body {
      flex: 1; display: flex; flex-direction: column;
      min-height: 0; overflow: hidden;
    }
    /* --- CATALOGUE --- */
    .library-filters {
      display: flex; flex-direction: column; gap: 8px; padding: 14px 24px;
      border-bottom: 1px solid var(--copper); flex-shrink: 0;
    }
    .library-filters-row {
      display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    }
    .library-filters-label {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      letter-spacing: 0.25em; color: var(--brass); text-transform: uppercase;
      min-width: 60px;
    }
    .library-filter-genre {
      color: var(--brass); border-color: rgba(212,168,74,0.5);
    }
    .library-filter-genre.active {
      color: var(--gold); border-color: var(--gold);
      background: rgba(212,168,74,0.18); box-shadow: 0 0 12px rgba(255,215,0,0.4);
    }
    .library-filter {
      padding: 8px 16px;
      font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
      letter-spacing: 0.2em;
      background: transparent; border: 1px solid var(--copper);
      border-radius: 3px; cursor: pointer; text-transform: uppercase;
      transition: all 0.2s;
      color: var(--copper);
    }
    .library-filter.limon { color: var(--limon); border-color: rgba(255,217,61,0.6); }
    .library-filter.vermeil { color: var(--vermeil); border-color: rgba(230,57,70,0.6); }
    .library-filter.ocre { color: var(--ocre); border-color: rgba(244,162,97,0.6); }
    .library-filter.indigo { color: var(--indigo); border-color: rgba(69,123,157,0.6); }
    .library-filter:hover {
      background: rgba(184,115,51,0.12);
      box-shadow: 0 0 8px rgba(212,168,74,0.2);
    }
    .library-filter.active {
      background: rgba(212,168,74,0.18); color: var(--gold);
      border-color: var(--gold);
      box-shadow: 0 0 12px rgba(255,215,0,0.4);
    }
    .library-filter.limon.active { color: var(--limon); border-color: var(--limon); background: rgba(255,217,61,0.15); box-shadow: 0 0 12px rgba(255,217,61,0.5); }
    .library-filter.vermeil.active { color: var(--vermeil); border-color: var(--vermeil); background: rgba(230,57,70,0.15); box-shadow: 0 0 12px rgba(230,57,70,0.5); }
    .library-filter.ocre.active { color: var(--ocre); border-color: var(--ocre); background: rgba(244,162,97,0.15); box-shadow: 0 0 12px rgba(244,162,97,0.5); }
    .library-filter.indigo.active { color: var(--indigo); border-color: var(--indigo); background: rgba(69,123,157,0.15); box-shadow: 0 0 12px rgba(69,123,157,0.5); }
    .library-catalog-scroll {
      flex: 1; overflow-y: auto; padding: 18px 24px;
      display: flex; flex-direction: column; gap: 10px;
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }
    .library-catalog-scroll::-webkit-scrollbar { width: 10px; }
    .library-catalog-scroll::-webkit-scrollbar-track {
      background: linear-gradient(90deg, var(--bg-dark) 0%, #1a1408 50%, var(--bg-dark) 100%);
      border: 1px solid var(--rust);
    }
    .library-catalog-scroll::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold) 0%, var(--brass) 30%, var(--copper) 60%, var(--rust) 100%);
      border: 1px solid var(--rust);
    }
    .library-card {
      padding: 14px 18px;
      background: rgba(26,20,8,0.55);
      border: 1px solid rgba(184,115,51,0.4);
      border-radius: 4px;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
      cursor: pointer; transition: all 0.15s;
      display: flex; align-items: center; gap: 14px;
    }
    .library-card:hover {
      background: rgba(184,115,51,0.12);
      border-color: var(--brass);
      box-shadow: inset 0 0 12px rgba(0,0,0,0.3), 0 0 14px rgba(212,168,74,0.25);
    }
    .library-card-id {
      font-family: 'Share Tech Mono', monospace; font-size: 12px;
      color: var(--brass); letter-spacing: 0.1em; min-width: 50px;
    }
    .library-card-genre {
      font-family: 'Cinzel', serif; font-size: 10px;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--brass); padding: 3px 8px;
      border: 1px solid rgba(212,168,74,0.4); border-radius: 2px;
      background: rgba(184,115,51,0.08);
      min-width: 90px; text-align: center;
    }
    .library-card-title {
      font-family: 'Spectral', serif; font-style: italic; font-size: 16px;
      color: var(--cream); flex: 1;
    }
    .library-card-author {
      font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
    }
    .library-card-author.limon { color: var(--limon); }
    .library-card-author.vermeil { color: var(--vermeil); }
    .library-card-author.ocre { color: var(--ocre); }
    .library-card-author.indigo { color: var(--indigo); }
    /* Date de publication (formatGuildDate, meme format que les modales GUILD). En PLUS
       du tick, qui reste dans .library-card-meta. flex:none -> seul .library-card-title
       est flex:1, l'ajout ne deplace rien d'autre. */
    .library-card-date {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      color: var(--amber); letter-spacing: 0.1em; opacity: 0.9;
      min-width: 90px; text-align: right; white-space: nowrap;
    }
    .library-card-meta {
      font-family: 'Share Tech Mono', monospace; font-size: 10px;
      color: var(--brass); letter-spacing: 0.1em;
      min-width: 90px; text-align: right;
    }
    .library-empty {
      text-align: center; padding: 40px 16px;
      font-family: 'Spectral', serif; font-style: italic; font-size: 14px;
      color: var(--copper); opacity: 0.6; letter-spacing: 0.05em;
    }
    .library-loading {
      text-align: center; padding: 20px;
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--copper); letter-spacing: 0.2em; opacity: 0.7;
    }
    /* --- VUE LECTURE --- */
    .library-reader {
      flex: 1; overflow-y: auto; padding: 30px 50px;
      display: none; flex-direction: column;
      scrollbar-width: thin; scrollbar-color: var(--brass) var(--bg-dark);
    }
    .library-reader.show { display: flex; }
    .library-reader::-webkit-scrollbar { width: 10px; }
    .library-reader::-webkit-scrollbar-track {
      background: linear-gradient(90deg, var(--bg-dark) 0%, #1a1408 50%, var(--bg-dark) 100%);
      border: 1px solid var(--rust);
    }
    .library-reader::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, var(--gold) 0%, var(--brass) 30%, var(--copper) 60%, var(--rust) 100%);
      border: 1px solid var(--rust);
    }
    .library-reader-title {
      font-family: 'Cinzel', serif; font-size: 26px; font-weight: 700;
      color: var(--brass); letter-spacing: 0.15em;
      text-shadow: 0 0 12px rgba(212,168,74,0.4);
      text-align: center; margin-bottom: 14px;
    }
    .library-reader-byline {
      font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
      letter-spacing: 0.3em; text-transform: uppercase;
      text-align: center; margin-bottom: 8px;
    }
    .library-reader-byline.limon { color: var(--limon); }
    .library-reader-byline.vermeil { color: var(--vermeil); }
    .library-reader-byline.ocre { color: var(--ocre); }
    .library-reader-byline.indigo { color: var(--indigo); }
    .library-reader-meta {
      font-family: 'Share Tech Mono', monospace; font-size: 11px;
      color: var(--copper); letter-spacing: 0.15em; opacity: 0.7;
      text-align: center; margin-bottom: 30px;
      padding-bottom: 20px; border-bottom: 1px solid var(--rust);
    }
    .library-reader-body {
      font-family: 'Spectral', serif; font-size: 17px; line-height: 1.8;
      color: var(--cream); white-space: pre-wrap;
      max-width: 720px; margin: 0 auto;
    }

    /* Conv messages */
    .modal-conv-list { display: flex; flex-direction: column; gap: 16px; }
    .modal-conv-msg {
      padding: 14px 18px; border-left: 3px solid;
      background: rgba(26,20,8,0.5); border-radius: 0 4px 4px 0;
    }
    .modal-conv-msg.axiom { border-left-color: var(--axiom); }
    .modal-conv-msg.limon { border-left-color: var(--limon); }
    .modal-conv-msg.vermeil { border-left-color: var(--vermeil); }
    .modal-conv-msg.ocre { border-left-color: var(--ocre); }
    .modal-conv-msg.indigo { border-left-color: var(--indigo); }
    .modal-conv-msg-header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
    .modal-conv-msg-author {
      font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
      letter-spacing: 2px; text-transform: uppercase;
    }
    .modal-conv-msg-author.limon { color: var(--limon); }
    .modal-conv-msg-author.vermeil { color: var(--vermeil); }
    .modal-conv-msg-author.ocre { color: var(--ocre); }
    .modal-conv-msg-author.indigo { color: var(--indigo); }
    .modal-conv-msg-author.axiom { color: var(--axiom); }
    .modal-conv-msg-time { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--copper); }
    .modal-conv-msg-body { font-family: 'Spectral', serif; font-size: 15px; color: var(--cream); line-height: 1.6; }
    .modal-conv-msg.axiom .modal-conv-msg-body {
      font-family: 'Share Tech Mono', monospace; text-transform: uppercase;
      letter-spacing: 2px; font-size: 13px; color: var(--axiom);
    }

    /* ============================================================
       Thread - onglet CONVERSATIONS (restyle maquette Design).
       Scope strict sous #conv-list : .msg/.ava/.report/.cycle sont
       des noms generiques, confines au conteneur pour zero collision.
       ============================================================ */
    #conv-list .msg {
      position: relative; display: flex; gap: 14px; padding: 15px 18px;
      border: 1px solid rgba(184,115,51,.28); border-left: 3px solid var(--c, var(--copper));
      border-radius: 9px;
      background: linear-gradient(180deg, rgba(28,21,10,.5), rgba(12,9,5,.38));
      box-shadow: inset 0 0 24px rgba(0,0,0,.32);
    }
    #conv-list .ava {
      flex: none; width: 42px; height: 42px; border-radius: 50%;
      border: 1.5px solid var(--c, var(--copper));
      background: radial-gradient(circle at 40% 30%, #1c1508, #0d0a06);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px;
      letter-spacing: 1px; color: var(--c, var(--copper));
      box-shadow: 0 0 10px var(--g, rgba(184,115,51,.4));
    }
    #conv-list .msg-main { flex: 1; min-width: 0; }
    #conv-list .msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    #conv-list .who { font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; letter-spacing: 2px; color: var(--c, var(--copper)); text-shadow: 0 0 10px var(--g, transparent); }
    #conv-list .time { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 1px; color: #c19a5a; white-space: nowrap; }
    #conv-list .body { font-family: 'Spectral', serif; font-size: 15px; line-height: 1.62; color: #e8dcc0; white-space: pre-wrap; word-break: break-word; }

    /* rapport AXIOM (encart gris) dans le fil Conversations */
    #conv-list .report {
      display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px;
      border: 1px solid rgba(120,120,120,.3); border-radius: 8px;
      background: rgba(0,0,0,.3); box-shadow: inset 0 0 22px rgba(0,0,0,.3);
    }
    #conv-list .rep-gear { flex: none; font-size: 18px; color: #7d8186; margin-top: 1px; }
    #conv-list .rep-main { flex: 1; min-width: 0; }
    #conv-list .rep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    #conv-list .rep-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; color: #9aa0a6; text-transform: uppercase; }
    #conv-list .rep-time { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #929aa0; white-space: nowrap; }
    #conv-list .rep-line { font-family: 'Share Tech Mono', monospace; font-size: 13px; line-height: 1.8; color: #c9b48a; white-space: pre-wrap; word-break: break-word; }

    /* separateur de cycle */
    #conv-list .cycle { display: flex; align-items: center; gap: 16px; margin: 2px 6px; }
    #conv-list .cyc-line { flex: 1; height: 1px; }
    #conv-list .cyc-line.l { background: linear-gradient(90deg, transparent, rgba(184,115,51,.4)); }
    #conv-list .cyc-line.r { background: linear-gradient(90deg, rgba(184,115,51,.4), transparent); }
    #conv-list .cyc-diam { flex: none; width: 6px; height: 6px; background: var(--copper); transform: rotate(45deg); }
    #conv-list .cyc-text { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 3px; color: #cda766; text-transform: uppercase; text-align: center; }
    #conv-list .cyc-text .dim { color: #9a7a44; letter-spacing: 1px; }

    /* ============================================================
       Thread - onglet AXIOM (restyle maquette Design).
       Scope strict sous #axiom-list.
       ============================================================ */
    #axiom-list .ax {
      position: relative; display: flex; gap: 14px; padding: 15px 18px 15px 20px;
      border: 1px solid rgba(184,115,51,.25); border-radius: 8px;
      background: linear-gradient(180deg, rgba(20,15,8,.5), rgba(10,7,4,.4));
      box-shadow: inset 0 0 22px rgba(0,0,0,.3);
    }
    #axiom-list .ax.cycle-report { border-color: rgba(255,215,0,.3); background: rgba(255,215,0,.04); }
    #axiom-list .ax-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 7px; background: #c9b48a; box-shadow: 0 0 6px rgba(201,180,138,.5); }
    #axiom-list .ax-gear { flex: none; font-size: 16px; color: var(--gold); margin-top: 1px; }
    #axiom-list .ax-main { flex: 1; min-width: 0; }
    #axiom-list .ax-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
    #axiom-list .ax-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #9aa0a6; }
    #axiom-list .ax-label .who { color: var(--axiom); }
    #axiom-list .ax.cycle-report .ax-label { color: var(--gold); }
    #axiom-list .ax-time { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #929aa0; white-space: nowrap; }
    #axiom-list .ax-body { font-family: 'Spectral', serif; font-size: 14px; line-height: 1.62; color: #d8c9a6; font-style: italic; white-space: pre-wrap; word-break: break-word; }
    #axiom-list .ax-body b { font-weight: 700; font-style: normal; color: var(--cream); }
    #axiom-list .ax-stat { font-style: normal; color: #9a8a6a; }
    #axiom-list .ax.cycle-report .ax-body { font-family: 'Share Tech Mono', monospace; font-style: normal; font-size: 13px; line-height: 1.8; color: #c9b48a; }

    /* ============================================================
       Thread - onglet CONVERSATIONS & ACTIONS (flux unifie).
       Maquette Design "B - Glyphes graves". Prefixe ca-* scope sous
       #flux-list : meme discipline que #conv-list / #axiom-list.
       La PAROLE et l'annonce AXIOM reutilisent .msg / .report / .cycle,
       recopies ici a l'identique (pas de refactor du selecteur
       #conv-list : l'onglet 2 ne doit pas bouger).
       ============================================================ */
    #flux-list { display: flex; flex-direction: column; gap: 13px; }

    /* --- parole : bulle pleine, copie conforme de #conv-list .msg --- */
    #flux-list .msg {
      position: relative; display: flex; gap: 14px; padding: 15px 18px;
      border: 1px solid rgba(184,115,51,.28); border-left: 3px solid var(--c, var(--copper));
      border-radius: 9px;
      background: linear-gradient(180deg, rgba(28,21,10,.5), rgba(12,9,5,.38));
      box-shadow: inset 0 0 24px rgba(0,0,0,.32);
    }
    #flux-list .ava {
      flex: none; width: 42px; height: 42px; border-radius: 50%;
      border: 1.5px solid var(--c, var(--copper));
      background: radial-gradient(circle at 40% 30%, #1c1508, #0d0a06);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px;
      letter-spacing: 1px; color: var(--c, var(--copper));
      box-shadow: 0 0 10px var(--g, rgba(184,115,51,.4));
    }
    #flux-list .msg-main { flex: 1; min-width: 0; }
    #flux-list .msg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
    #flux-list .who { font-family: 'Cinzel', serif; font-weight: 600; font-size: 15px; letter-spacing: 2px; color: var(--c, var(--copper)); text-shadow: 0 0 10px var(--g, transparent); }
    #flux-list .time { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 1px; color: #c19a5a; white-space: nowrap; }
    #flux-list .body { font-family: 'Spectral', serif; font-size: 15px; line-height: 1.62; color: #e8dcc0; white-space: pre-wrap; word-break: break-word; }

    /* --- annonce AXIOM fondue dans le fil : copie de #conv-list .report --- */
    #flux-list .report {
      display: flex; align-items: flex-start; gap: 14px; padding: 17px 20px;
      border: 1px solid rgba(120,120,120,.3); border-radius: 8px;
      background: rgba(0,0,0,.3); box-shadow: inset 0 0 22px rgba(0,0,0,.3);
    }
    #flux-list .report.gold { border-color: rgba(255,215,0,.3); background: rgba(255,215,0,.045); }
    #flux-list .rep-gear { flex: none; font-size: 18px; color: #7d8186; margin-top: 1px; }
    #flux-list .report.gold .rep-gear { color: var(--brass); }
    #flux-list .rep-main { flex: 1; min-width: 0; }
    #flux-list .rep-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    #flux-list .rep-label { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; color: #9aa0a6; text-transform: uppercase; }
    #flux-list .report.gold .rep-label { color: var(--brass); }
    #flux-list .rep-time { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #929aa0; white-space: nowrap; }
    #flux-list .rep-line { font-family: 'Share Tech Mono', monospace; font-size: 13px; line-height: 1.8; color: #c9b48a; white-space: pre-wrap; word-break: break-word; }

    /* --- separateur de tick : copie de #conv-list .cycle --- */
    #flux-list .cycle { display: flex; align-items: center; gap: 16px; margin: 2px 6px; }
    #flux-list .cyc-line { flex: 1; height: 1px; }
    #flux-list .cyc-line.l { background: linear-gradient(90deg, transparent, rgba(184,115,51,.4)); }
    #flux-list .cyc-line.r { background: linear-gradient(90deg, rgba(184,115,51,.4), transparent); }
    #flux-list .cyc-diam { flex: none; width: 6px; height: 6px; background: var(--copper); transform: rotate(45deg); }
    #flux-list .cyc-text { font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: 3px; color: #cda766; text-transform: uppercase; text-align: center; }
    #flux-list .cyc-text .dim { color: #9a7a44; letter-spacing: 1px; }

    /* --- GESTE (famille A) : ligne compacte, medaillon laiton + glyphe --- */
    #flux-list .ca-ln {
      display: flex; align-items: center; gap: 11px; padding: 4px 13px 4px 8px;
      border-left: 2px solid var(--c, var(--copper)); border-radius: 0 5px 5px 0;
      background: linear-gradient(90deg, rgba(28,21,10,.5), rgba(12,9,5,0) 68%);
    }
    #flux-list .ca-med {
      flex: none; width: 25px; height: 25px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(184,115,51,.42);
      background: radial-gradient(circle at 38% 28%, #241a0c, #0d0a06);
      box-shadow: 0 0 7px rgba(184,115,51,.2), inset 0 0 6px rgba(0,0,0,.7);
    }
    #flux-list .ca-med svg {
      width: 14px; height: 14px; fill: none; stroke: #c9932f; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round;
    }
    /* Fallback F1 : verbe sans glyphe -> deux lettres, JAMAIS un rond vide.
       Garde la gouttiere alignee ; un verbe rare ne casse pas le balayage. */
    #flux-list .ca-med-txt {
      font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: .5px;
      color: #c9932f; text-transform: uppercase; line-height: 1;
    }
    #flux-list .ca-who { font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: 2px; color: var(--c, var(--copper)); width: 62px; flex: none; }
    #flux-list .ca-verb { font-family: 'Share Tech Mono', monospace; font-size: 9.5px; letter-spacing: 1.4px; color: #8a6f42; text-transform: uppercase; width: 132px; flex: none; }
    #flux-list .ca-desc { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #c9b48a; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #flux-list .ca-time { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: #8a6f42; flex: none; }

    /* --- geste REFUSE : present, degrade. Un refus est un comportement
       observable : il reste dans le fil, il ne vole pas la vedette. --- */
    #flux-list .ca-ln.ca-rj { opacity: .5; border-left-style: dashed; border-left-color: rgba(139,69,19,.6); }
    #flux-list .ca-ln.ca-rj .ca-med { border-color: rgba(139,69,19,.45); box-shadow: none; }
    #flux-list .ca-ln.ca-rj .ca-med svg { stroke: #8b4513; }
    #flux-list .ca-ln.ca-rj .ca-med-txt { color: #8b4513; }
    #flux-list .ca-ln.ca-rj .ca-verb { color: #a3552c; }
    #flux-list .ca-ln.ca-rj .ca-desc { color: #8a7a5a; }

    /* --- message prive : relation seule, JAMAIS de contenu --- */
    #flux-list .ca-ln.ca-mp .ca-desc { color: #a89675; font-style: italic; }
    #flux-list .ca-ln.ca-mp .ca-desc b { font-style: normal; font-weight: 400; color: #c9b48a; }

    /* --- consultations (famille B) : repliees par defaut --- */
    #flux-list .ca-cons {
      display: flex; align-items: center; gap: 10px; margin-left: 8px;
      padding: 4px 13px 4px 6px; align-self: flex-start;
      border: 1px dashed rgba(184,115,51,.32); border-radius: 15px;
      background: rgba(20,15,8,.4); cursor: pointer; transition: all .2s;
    }
    #flux-list .ca-cons:hover { border-color: rgba(212,168,74,.6); background: rgba(30,22,10,.6); }
    #flux-list .ca-cons .ca-med { width: 22px; height: 22px; }
    #flux-list .ca-cons .ca-med svg { width: 12px; height: 12px; stroke: #9a7a44; }
    #flux-list .ca-cons-t { font-family: 'Share Tech Mono', monospace; font-size: 10.5px; letter-spacing: 1.6px; color: #9a7a44; text-transform: uppercase; }
    #flux-list .ca-cons-n { font-family: 'Cinzel', serif; font-weight: 700; font-size: 10.5px; color: var(--bg-dark); background: #b8853a; border-radius: 9px; padding: 1px 7px; letter-spacing: 1px; }
    #flux-list .ca-cons-open { display: none; flex-direction: column; gap: 4px; }
    #flux-list .ca-cons-open.open { display: flex; }
    /* consultation depliee : un cran SOUS le geste (l'IA regarde, n'agit pas) */
    #flux-list .ca-ln.ca-look { border-left-color: rgba(184,115,51,.4); border-left-style: dotted; background: linear-gradient(90deg, rgba(28,21,10,.3), rgba(12,9,5,0) 55%); }
    #flux-list .ca-ln.ca-look .ca-who { color: #8a6f42; }
    #flux-list .ca-ln.ca-look .ca-verb { color: #9a7a44; }
    #flux-list .ca-ln.ca-look .ca-desc { color: #a89675; }

    /* --- OBSERVATORY (dashboard métriques live dans #modal-pressure) --- */
    /* Porté de la maquette Claude Design. Préfixe obs- pour scoper.
       Réutilise les vars :root de l'app (--brass/--copper/--gold/--amber/etc). */
    #observatory-content {
      width: 100%; max-width: 1440px; margin: 0 auto;
      font-family: 'Spectral', serif; color: var(--cream);
      --obs-rust: var(--rust); --obs-copper-dim: #a07a45; --obs-copper-fade: #8b6a3a;
    }
    .obs-loading, .obs-error {
      text-align: center; padding: 4rem 0;
      font-family: 'Spectral', serif; font-style: italic;
      color: var(--copper); letter-spacing: 0.05em; font-size: 1.05rem;
    }
    .obs-error { color: var(--vermeil); }
    .obs-error small { display:block; margin-top:8px; font-size:0.85rem; font-family:'Share Tech Mono',monospace; opacity:0.7; }

    /* rivets laiton réutilisables */
    .obs-rivet { position:absolute; width:7px; height:7px; border-radius:50%;
      background: radial-gradient(circle at 35% 30%, #f0d27a, var(--rust) 70%, #3a1c08); pointer-events:none; }

    /* en-têtes de section */
    .obs-section-head { display:flex; align-items:center; gap:18px; margin:2.2rem 0 1.5rem; }
    .obs-section-head .obs-diamond { width:7px; height:7px; background:var(--copper); transform:rotate(45deg);
      box-shadow:0 0 6px rgba(184,115,51,.5); flex-shrink:0; }
    .obs-section-head h3 { margin:0; font-family:'Cinzel',serif; font-weight:600; font-size:0.95rem;
      letter-spacing:5px; color:var(--brass); text-transform:uppercase; white-space:nowrap; }
    .obs-section-head .obs-rule { flex:1; height:1px;
      background:linear-gradient(90deg, rgba(184,115,51,.55), rgba(184,115,51,.05)); }
    .obs-section-head .obs-count { font-family:'Share Tech Mono',monospace; font-size:0.7rem;
      letter-spacing:2px; color:var(--obs-copper-fade); white-space:nowrap; }

    /* jauges (bloc 1) */
    .obs-gauges { display:flex; gap:22px; margin-bottom:20px; flex-wrap:wrap; }
    .obs-gauge { position:relative; flex:1; min-width:240px; display:flex; flex-direction:column; align-items:center;
      padding:28px 14px 22px; border:1px solid rgba(184,115,51,.4); border-radius:6px;
      background:linear-gradient(180deg, rgba(30,22,10,.55), rgba(13,10,6,.4));
      box-shadow: inset 0 1px 0 rgba(212,168,74,.12), inset 0 0 40px rgba(0,0,0,.5); }
    .obs-gauge .obs-rivet.a { top:9px; left:9px; } .obs-gauge .obs-rivet.b { top:9px; right:9px; }
    .obs-gauge__dial { position:relative; width:240px; height:130px; margin-bottom:8px; }
    .obs-gauge__ticks { position:absolute; left:0; top:10px; width:240px; height:240px; border-radius:50%;
      clip-path: inset(0 0 50% 0);
      background: repeating-conic-gradient(from 180deg at 50% 50%,
        rgba(212,168,74,0) 0deg 8.4deg, rgba(212,168,74,.4) 8.4deg 9.2deg);
      -webkit-mask: radial-gradient(circle at 50% 50%, transparent 92px, #000 93px, #000 116px, transparent 117px);
              mask: radial-gradient(circle at 50% 50%, transparent 92px, #000 93px, #000 116px, transparent 117px); }
    .obs-gauge__rim { position:absolute; inset:0; border:3px solid var(--rust); border-bottom:none;
      border-radius:140px 140px 0 0; background:radial-gradient(120% 150% at 50% 100%, #1c1508, var(--bg-dark));
      box-shadow: inset 0 0 30px rgba(0,0,0,.85); }
    .obs-gauge__needle { position:absolute; left:50%; bottom:2px; width:4px; height:108px;
      background:linear-gradient(var(--gold), var(--copper)); transform-origin:50% 100%;
      transform: translateX(-50%) rotate(var(--angle,0deg)); border-radius:2px 2px 0 0;
      box-shadow:0 0 9px rgba(255,215,0,.55); transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
    .obs-gauge__hub { position:absolute; left:50%; bottom:-9px; transform:translateX(-50%);
      width:20px; height:20px; border-radius:50%;
      background:radial-gradient(circle at 35% 30%, #e8c878, var(--rust) 70%, #3a1c08);
      box-shadow:0 1px 4px rgba(0,0,0,.8); }
    .obs-gauge__value { font-family:'Cinzel',serif; font-weight:700; font-size:42px; color:var(--gold);
      text-shadow:0 0 20px rgba(255,191,0,.45); }
    .obs-gauge__value .obs-frac { font-weight:500; font-size:24px; color:var(--copper); }
    .obs-gauge__label { font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:3px;
      color:var(--copper); text-transform:uppercase; margin-top:6px; }

    /* bande activité globale */
    .obs-activity { display:flex; margin-bottom:1rem; border:1px solid rgba(139,69,19,.5); border-radius:6px;
      overflow:hidden; background:linear-gradient(180deg, rgba(20,15,7,.7), rgba(10,8,4,.55));
      box-shadow: inset 0 0 30px rgba(0,0,0,.5); flex-wrap:wrap; }
    .obs-activity__cell { flex:1; min-width:110px; display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:5px; padding:16px 8px; border-left:1px solid rgba(139,69,19,.28); text-align:center; }
    .obs-activity__cell:first-child { border-left:none; }
    .obs-activity__num { font-family:'Cinzel',serif; font-weight:600; font-size:26px; color:var(--amber);
      text-shadow:0 0 12px rgba(255,191,0,.3); }
    .obs-activity__lbl { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:1.5px;
      color:var(--obs-copper-dim); text-transform:uppercase; }

    /* cartes par IA (bloc 2) */
    .obs-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:18px; }
    @media (max-width:1100px) { .obs-grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:640px)  { .obs-grid { grid-template-columns:1fr; } }
    .obs-card { position:relative; padding:0 0 18px; overflow:hidden; border-radius:7px;
      border:1px solid rgba(184,115,51,.45);
      background:linear-gradient(180deg, rgba(28,21,10,.85), rgba(12,9,5,.7));
      box-shadow: inset 0 0 40px rgba(0,0,0,.55), 0 6px 22px rgba(0,0,0,.4); }
    .obs-card__accent { height:4px; width:100%; background:var(--c); box-shadow:0 0 14px var(--g); }
    .obs-card .obs-rivet.a { top:13px; left:12px; z-index:2; } .obs-card .obs-rivet.b { top:13px; right:12px; z-index:2; }
    .obs-card__body { padding:18px 20px 0; }
    .obs-card__name { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
    .obs-card__dot { width:11px; height:11px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--g); }
    .obs-card__name h4 { margin:0; font-family:'Cinzel',serif; font-weight:700; font-size:20px; letter-spacing:3px;
      color:var(--c); text-shadow:0 0 14px var(--g); }
    .obs-card__total { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
    .obs-card__total b { font-family:'Cinzel',serif; font-weight:700; font-size:46px; line-height:.9;
      color:var(--cream); text-shadow:0 0 18px rgba(255,191,0,.25); }
    .obs-card__total span { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px;
      color:var(--obs-copper-dim); text-transform:uppercase; }
    .obs-share { margin-bottom:16px; }
    .obs-share__head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
    .obs-share__head .obs-lbl { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px;
      color:var(--copper); text-transform:uppercase; }
    .obs-share__head .obs-pct { font-family:'Cinzel',serif; font-weight:600; font-size:18px; color:var(--c); }
    .obs-share__track { position:relative; height:9px; border-radius:5px; overflow:hidden;
      background:rgba(0,0,0,.55); border:1px solid rgba(139,69,19,.5); }
    .obs-share__fill { position:absolute; top:0; left:0; bottom:0; background:var(--c);
      box-shadow:0 0 12px var(--g); border-radius:5px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
    .obs-card__divider { height:1px; margin-bottom:14px;
      background:linear-gradient(90deg, transparent, rgba(184,115,51,.45), transparent); }
    .obs-stats { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
    .obs-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
    .obs-stat b { font-family:'Share Tech Mono',monospace; font-size:17px; color:var(--amber); font-weight:400; }
    .obs-stat span { font-family:'Share Tech Mono',monospace; font-size:8px; letter-spacing:.5px;
      color:var(--obs-copper-fade); text-transform:uppercase; }

    /* AXIOM bandeau arbitre */
    .obs-arbiter { position:relative; display:flex; align-items:center; gap:28px; padding:18px 26px;
      border:1px solid rgba(120,120,120,.32); border-left:4px solid var(--axiom); border-radius:7px;
      background:linear-gradient(180deg, rgba(22,20,17,.8), rgba(10,9,7,.65));
      box-shadow: inset 0 0 36px rgba(0,0,0,.5); flex-wrap:wrap; margin-bottom:1rem; }
    .obs-arbiter__id { display:flex; align-items:center; gap:14px; min-width:210px; }
    .obs-arbiter__id .obs-adot { width:13px; height:13px; border-radius:50%; background:var(--axiom);
      box-shadow:0 0 10px rgba(173,181,189,.45); }
    .obs-arbiter__id h4 { margin:0; font-family:'Cinzel',serif; font-weight:700; font-size:21px;
      letter-spacing:4px; color:var(--axiom); }
    .obs-arbiter__id p { margin:3px 0 0; font-family:'Share Tech Mono',monospace; font-size:10px;
      letter-spacing:3px; color:#7d8186; text-transform:uppercase; }
    .obs-arbiter__sep { width:1px; align-self:stretch; min-height:40px;
      background:linear-gradient(180deg, transparent, rgba(173,181,189,.3), transparent); }
    .obs-arbiter__total { display:flex; align-items:baseline; gap:8px; min-width:150px; }
    .obs-arbiter__total b { font-family:'Cinzel',serif; font-weight:700; font-size:36px; color:#ced2d6; }
    .obs-arbiter__total span { font-family:'Share Tech Mono',monospace; font-size:10px; letter-spacing:2px;
      color:#7d8186; text-transform:uppercase; }
    .obs-arbiter__stats { display:flex; gap:22px; margin-left:auto; flex-wrap:wrap; }
    .obs-arbiter__stats .obs-stat b { color:#ced2d6; } .obs-arbiter__stats .obs-stat span { color:#6e7277; }

    /* pied devise */
    .obs-footer-sig { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:2rem; }
    .obs-footer-sig .obs-line { width:60px; height:1px; }
    .obs-footer-sig .obs-line.l { background:linear-gradient(90deg, transparent, rgba(184,115,51,.5)); }
    .obs-footer-sig .obs-line.r { background:linear-gradient(90deg, rgba(184,115,51,.5), transparent); }
    .obs-footer-sig em { font-family:'Spectral',serif; font-style:italic; font-size:14px;
      color:var(--obs-copper-dim); letter-spacing:1px; }
    .obs-methodology { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--copper);
      font-family:'Spectral',serif; font-size:0.85rem; color:var(--copper); line-height:1.5; }
    .obs-methodology strong { color:var(--brass); font-weight:700; }

    /* ============================================================
       RESPONSIVE MOBILE (< 768px) — lots 1+2+3+4.
       Bloc unique. N'altère AUCUNE regle de base : tout est confine
       ici et ne s'applique qu'au telephone. Tablette/desktop (>=768px)
       inchanges. Voir Repo_Audit / brief responsive.
       ============================================================ */
    @media (max-width: 767px) {

      /* --- Lot 1 : reflow du conteneur racine ------------------- */
      /* Base : html,body overflow:hidden + #app grille 280px/1fr/360px
         sur height:100vh -> 3e colonne rognee. Ici : scroll vertical
         autorise, grille repliee en une seule colonne empilee. */
      html, body {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
      }
      #app {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
        min-height: 100vh;
        gap: 8px;
        padding: 8px;
      }
      .left-column,
      .center-column,
      .right-column {
        width: 100%;
        min-width: 0;
        overflow: visible;
      }
      /* La map est flex:1 1 0 : sans hauteur explicite elle s'effondre
         une fois la colonne passee en hauteur auto. */
      .map-viewport { min-height: 58vh; }
      /* Le fil de transmission (flex:1 1 0) : idem, lui donner du corps. */
      .right-column .feed-panel { min-height: 50vh; }

      /* --- Lot 2 : header adaptatif ----------------------------- */
      /* Base : flex space-between avec bouton About 280px + cluster
         droit 360px -> somme > largeur telephone. On fluidifie + wrap. */
      header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        padding: 6px;
        min-height: 0;
      }
      .laboratory-button {
        width: auto;
        max-width: 100%;
        position: relative;
        z-index: 2;
      }
      .laboratory-label { letter-spacing: 0.12em; }
      .header-right {
        width: auto;
        position: relative;
        z-index: 2;
      }
      .observer-badge {
        width: auto;
        max-width: 100%;
      }
      /* Positionnement absolu px (left:304px) neutralise. */
      .observer-label {
        position: static;
        left: auto;
        transform: none;
      }

      /* --- Lot 3 : logo central (superposition) ----------------- */
      /* Base : logo 100px, position:absolute, z-index:50, header
         overflow:visible -> recouvre les panneaux voisins. On reduit
         et on passe SOUS les boutons du header (z-index:2 ci-dessus). */
      .logo-container { z-index: 0; }
      .logo-img {
        height: 52px;
        z-index: 0;
      }

      /* --- Lot 4 : banniere consentement Google Fonts ----------- */
      /* Styles inline dans le HTML (#cookie-banner) : width:100vw,
         padding:18px 28px, pas de flex-wrap. !important cible
         uniquement les proprietes inline qui resistent. */
      #cookie-banner {
        flex-wrap: wrap;
        width: 100% !important;
        padding: 12px 16px !important;
      }
    }

/* ================= Pressure Gauges (reskin, classes .pg-*) ================= */
/* Préfixe .pg- pour éviter toute collision avec .obs-* existant.
   Polices : on suppose Cinzel / Share Tech Mono / Spectral déjà chargées par
   index.html (le panneau actuel utilise déjà Cinzel). Si Share Tech Mono n'est
   PAS chargée -> fallback monospace (acceptable). À CONFIRMER par Code (cf. handoff §6). */

.pg-root{font-family:'Spectral',serif;color:#f5e6c8}
.pg-frame{position:relative}

/* header */
.pg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:4px 4px 22px;border-bottom:1px solid rgba(139,69,19,.5)}
.pg-head-left{display:flex;align-items:center;gap:24px}
.pg-gears{position:relative;width:62px;height:62px;flex:none}
.pg-gear-sm{position:absolute;left:-16px;bottom:-14px;width:34px;height:34px;animation:pgSpinRev 16s linear infinite}
.pg-gear-sm-teeth{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#8b4513 0deg 13deg,transparent 13deg 28deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px);mask:radial-gradient(circle at 50% 50%,transparent 11px,#000 12px,#000 17px,transparent 18px)}
.pg-gear-sm-core{position:absolute;left:50%;top:50%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid #8b4513;background:radial-gradient(circle at 50% 35%,#2a2010,#140f06)}
.pg-gear-lg{position:absolute;inset:0;animation:pgSpin 26s linear infinite;filter:drop-shadow(0 0 9px rgba(255,191,0,.3))}
.pg-gear-lg-teeth{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#d4a84a 0deg 11deg,transparent 11deg 24deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px);mask:radial-gradient(circle at 50% 50%,transparent 23px,#000 24px,#000 31px,transparent 32px)}
.pg-gear-lg-ring1{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid #b87333;background:radial-gradient(circle at 50% 32%,#3a2c12,#161007);box-shadow:inset 0 0 12px rgba(0,0,0,.75)}
.pg-gear-lg-ring2{position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgba(212,168,74,.6)}
.pg-gear-lg-hub{position:absolute;left:50%;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#f4d98a,#8b4513)}

.pg-title{margin:0;display:flex;align-items:center;gap:18px;font-family:'Cinzel',serif;font-weight:700;font-size:34px;letter-spacing:8px;color:#e6c46a;text-shadow:0 0 22px rgba(212,168,74,.4)}
.pg-title-diamond{color:#b87333;font-size:15px}
.pg-title-text{background:linear-gradient(100deg,#c2873a 0%,#d8ab4c 30%,#f3e2ab 46%,#fff6db 50%,#f3e2ab 54%,#d8ab4c 70%,#e9c06e 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 16px rgba(212,168,74,.3));animation:pgShine 6s ease-in-out infinite}
.pg-motto{font-family:'Spectral',serif;font-style:italic;font-size:15px;color:#d6b878;margin-top:9px;letter-spacing:.5px}

/* section headers */
/* margin haut 26->14, bas 18->8 (compactage World State). Le margin-top
   s'echappe de .pg-frame par collapsing : il ne coute rien DANS le cadre mais
   pousse tout le panneau vers le bas dans la modale - le gain est reel, il est
   juste au-dessus du cadre. .pg-section-inh a son propre margin (regle plus
   specifique juste dessous) : BY INHABITANT n'est pas touche. */
.pg-section{display:flex;align-items:center;gap:16px;margin:14px 0 8px}
.pg-section.pg-section-inh{margin:30px 0 16px}
.pg-section-diamond{width:7px;height:7px;background:#b87333;transform:rotate(45deg);box-shadow:0 0 6px rgba(184,115,51,.5)}
.pg-section h2{margin:0;font-family:'Cinzel',serif;font-weight:600;font-size:15px;letter-spacing:5px;color:#d4a84a;text-transform:uppercase}
.pg-section-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(184,115,51,.5),rgba(184,115,51,.05))}
.pg-section-tag{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:2px;color:#9a7a44}

/* gauges */
.pg-gauges{display:flex;gap:16px}
.pg-gauge{position:relative;flex:1;border:1px solid rgba(184,115,51,.35);border-radius:10px;padding:6px 16px;background:linear-gradient(180deg,rgba(20,15,8,.7),rgba(10,7,4,.55));box-shadow:inset 0 0 40px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center}
/* Compactage World State : le SVG des cadrans porte height="104" EN DUR dans
   pgGauge() (JS). On le surcharge ici plutot que d'editer le JS - l'attribut
   HTML est une presentation attribute, le CSS gagne. viewBox inchange : l'arc
   se reduit proportionnellement, aucune deformation (preserveAspectRatio par
   defaut). Seul levier a toucher pour re-regler la hauteur des jauges. */
.pg-gauge svg{height:66px}
.pg-stud{position:absolute;top:11px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f0d27a,#8b4513);box-shadow:0 0 5px rgba(255,191,0,.35)}
.pg-stud-l{left:13px}.pg-stud-r{right:13px}
.pg-gauge-num{font-family:'Cinzel',serif;font-weight:700;font-size:24px;line-height:1;color:#d4a84a;text-shadow:0 0 16px rgba(212,168,74,.4);margin-top:-2px}
.pg-gauge-num small{font-size:16px;color:#9a7a44;font-weight:400}
.pg-gauge-label{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:#9a7a44;margin-top:4px}
.pg-arc-track{stroke:rgba(184,115,51,.35)}
/* Cadran placeholder : coque + piste graduee eteinte, aucun arc allume ni aiguille
   (non emis par le HTML de pgGauge en mode placeholder). La coque .pg-gauge et son
   flex:1 sont herites tels quels -> meme largeur que les deux autres cadrans. */
.pg-gauge-off .pg-arc-track{stroke:rgba(184,115,51,.35)}
.pg-gauge-soon{font-family:'Cinzel',serif;font-weight:700;font-size:20px;letter-spacing:3px;color:#9a7a44;text-shadow:0 0 12px rgba(212,168,74,.25);margin-top:10px;text-align:center}
.pg-arc-fill{stroke:#caa23f;animation:pgArcWobble var(--pg-wob,4.6s) ease-in-out 1.5s infinite both,pgGlowPulse 3.8s ease-in-out infinite}
.pg-needle{transform-box:view-box;transform-origin:100px 100px;filter:drop-shadow(0 0 5px rgba(255,191,0,.65));animation:pgNeedleSweep 1.3s cubic-bezier(.2,.85,.25,1) both,pgNeedleWobble var(--pg-wob,4.6s) ease-in-out 1.5s infinite}

/* stats strip */
.pg-stats{display:flex;border:1px solid rgba(184,115,51,.3);border-radius:10px;background:linear-gradient(180deg,rgba(20,15,8,.55),rgba(10,7,4,.4));margin-top:8px;overflow:hidden}
.pg-stat{flex:1;padding:6px 10px;text-align:center;border-left:1px solid rgba(184,115,51,.15)}
.pg-stat:first-child{border-left:none}
.pg-stat-v{font-family:'Cinzel',serif;font-weight:700;font-size:26px;color:#f0e6cc}
.pg-stat-l{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:2px;color:#c8a35a;margin-top:3px}

/* inhabitant cards */
.pg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pg-card{position:relative;border:1px solid rgba(184,115,51,.28);border-top:2px solid var(--pg-c);border-radius:10px;padding:18px;background:linear-gradient(180deg,rgba(20,15,8,.6),rgba(10,7,4,.45));box-shadow:inset 0 0 26px rgba(0,0,0,.4),inset 0 4px 18px var(--pg-g);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;animation:pgRisePop .5s ease both}
.pg-card:hover{transform:translateY(-5px);border-color:var(--pg-c);box-shadow:inset 0 0 26px rgba(0,0,0,.4),inset 0 6px 26px var(--pg-g),0 12px 30px rgba(0,0,0,.55)}
.pg-card-head{display:flex;align-items:center;gap:9px}
.pg-card-dot{width:8px;height:8px;border-radius:50%;background:var(--pg-c);box-shadow:0 0 8px var(--pg-g)}
.pg-card-name{font-family:'Cinzel',serif;font-weight:600;font-size:19px;letter-spacing:3px;color:var(--pg-c);text-shadow:0 0 10px var(--pg-g)}
/* Ligne modele sous le nom (calque sur .resident-model du panneau Guild). min-height
   reserve la hauteur : la ligne peut etre vide (regle d'absence stricte) sans faire
   sauter la carte quand modelesData arrive. */
.pg-card-model{font-family:'Share Tech Mono',monospace;font-size:14px;color:var(--brass);letter-spacing:.05em;min-height:17px;line-height:17px;margin-top:3px;opacity:.85}
.pg-card-total{display:flex;align-items:flex-end;gap:9px;margin-top:6px}
.pg-card-total b{font-family:'Cinzel',serif;font-weight:700;font-size:47px;line-height:.9;color:#f2e8cf}
.pg-card-total span{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px;color:#9a7a44;line-height:1.4;padding-bottom:6px}
.pg-card-share-row{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px}
.pg-card-share-label{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:2px;color:#9a7a44}
.pg-card-share-pct{font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:var(--pg-c)}
.pg-card-bar{height:5px;border-radius:4px;background:rgba(0,0,0,.5);border:1px solid rgba(184,115,51,.4);overflow:hidden;margin-top:8px}
.pg-card-bar-fill{height:100%;background:var(--pg-c);box-shadow:0 0 8px var(--pg-g);animation:pgBarFill 1.5s cubic-bezier(.2,.8,.2,1) .25s both}
.pg-card-sep{height:1px;background:rgba(184,115,51,.2);margin:16px 0 13px}

/* --- corps de stats par FAMILLE (remplace l'ancienne rangee de 5 compteurs) ---
   L'ordre vertical des familles est fige par PG_FAMILLES cote JS, identique sur
   les 4 cartes : c'est ce qui rend la comparaison horizontale possible d'une
   carte a l'autre. Ne pas trier par valeur ici, ca casserait l'alignement.
   Couleur : var(--pg-c)/var(--pg-g) deja poses en style inline sur .pg-card,
   aucune couleur d'habitant redefinie dans ce bloc. */
.pg-card-base{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:1px;color:#9a7a44;margin-bottom:14px}
.pg-card-base b{font-weight:400;color:#c19a52}
.pg-fams{display:flex;flex-direction:column;gap:15px}
.pg-fam-head{display:flex;align-items:baseline;gap:8px}
.pg-fam-name{font-family:'Cinzel',serif;font-weight:600;font-size:14px;letter-spacing:3px;color:#d4a84a;flex-grow:1}
.pg-fam-n{font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:#f2e8cf}
.pg-fam-pct{font-family:'Share Tech Mono',monospace;font-size:13px;letter-spacing:1px;color:#9a7a44;min-width:40px;text-align:right}
/* Jauge a 10 crans, grammaire des cadrans du panneau. AUCUN plancher : une
   famille sous 5% n'allume aucun cran (round(pct/10) = 0). C'est voulu — forcer
   un cran ferait lire 10% sur du 2%. Le chiffre brut et le % portent la valeur,
   la barre n'est que l'appoint visuel. */
.pg-fam-segs{display:flex;gap:2px;margin-top:6px}
.pg-seg{flex-grow:1;height:7px;border-radius:1px;background:rgba(0,0,0,.55);border:1px solid rgba(184,115,51,.22)}
.pg-seg.on{background:var(--pg-c);border-color:var(--pg-c);opacity:.85;box-shadow:0 0 5px var(--pg-g)}
.pg-fam-det{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.pg-fam-row{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.06em}
.pg-fam-t{color:#9a7a44;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-fam-v{color:#c19a52;font-variant-numeric:tabular-nums}
/* Etats non nominaux : un ledger illisible, une base a zero et un habitant absent
   du ledger ne doivent PAS se ressembler entre eux ni ressembler a un zero. */
.pg-fam-vide{font-family:'Spectral',serif;font-style:italic;font-size:11px;color:#8b6f3e;line-height:1.5}
.pg-fam-mute{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:2px;color:#6b5730}
.pg-ledger-err{margin:0 0 14px;padding:9px 12px;border:1px solid rgba(230,57,70,.45);border-radius:6px;background:rgba(230,57,70,.07);font-family:'Spectral',serif;font-size:12px;color:#e07b83;line-height:1.5}
.pg-ledger-note{margin-top:14px;font-family:'Spectral',serif;font-style:italic;font-size:12px;color:#8b6f3e;line-height:1.55}

/* responsive : recompose proprement en colonne sous 900px */
@media(max-width:900px){
  .pg-gauges{flex-wrap:wrap}
  .pg-gauge{flex:1 1 calc(50% - 8px)}
  .pg-cards{grid-template-columns:repeat(2,1fr)}
  .pg-stats{flex-wrap:wrap}
  .pg-stat{flex:1 1 33.333%}
}
@media(max-width:560px){
  .pg-title{font-size:24px;letter-spacing:4px}
  .pg-gauge{flex:1 1 100%}
  .pg-cards{grid-template-columns:1fr}
  .pg-stat{flex:1 1 50%}
}

/* animations */
@keyframes pgSpin{to{transform:rotate(360deg)}}
@keyframes pgSpinRev{to{transform:rotate(-360deg)}}
@keyframes pgShine{0%{background-position:100% 0}45%{background-position:0 0}100%{background-position:0 0}}
@keyframes pgNeedleSweep{from{transform:rotate(28deg);opacity:0}to{transform:rotate(0);opacity:1}}
@keyframes pgGlowPulse{0%,100%{filter:drop-shadow(0 0 3px rgba(255,191,0,.35))}50%{filter:drop-shadow(0 0 14px rgba(255,191,0,.9))}}
@keyframes pgBarFill{from{width:0}}
@keyframes pgRisePop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@keyframes pgNeedleWobble{0%,100%{transform:rotate(0deg)}28%{transform:rotate(-5deg)}64%{transform:rotate(5.5deg)}}
/* arc suit l'aiguille : oscille autour de l'offset de repos --pg-off, amplitude --pg-wamp */
@keyframes pgArcWobble{0%,100%{stroke-dashoffset:var(--pg-off)}28%{stroke-dashoffset:calc(var(--pg-off) + var(--pg-wamp))}64%{stroke-dashoffset:calc(var(--pg-off) - var(--pg-wamp))}}
@media(prefers-reduced-motion:reduce){
  .pg-gear-sm,.pg-gear-lg,.pg-title-text,.pg-arc-fill,.pg-needle,.pg-card-bar-fill,.pg-card{animation:none!important}
}

/* ============================================================
   IKHOS Observatory - Bloc radars par habitant (PLACEHOLDER)
   ------------------------------------------------------------
   - Aligne sur .pg-cards : repeat(4,1fr) + gap:16px + memes breakpoints.
   - Carre : aspect-ratio:1 (hauteur suit la largeur automatiquement).
   - Palette laiton copiee en hex litteraux du panneau (pas les variables
     du theme, cf. audit : le bloc pg hardcode ses hex).
   - Couleur par IA : via --pg-c pose en inline sur chaque .pg-radar
     (meme mecanisme que .pg-card).
   - Noms prefixes pg-radar-* / pgRadar* pour eviter la collision avec
     .iv-radar et @keyframes radarSweep (globaux).
   ============================================================ */

.pg-radars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.pg-radar {
  position: relative;
  aspect-ratio: 1;                 /* carre : haut = large */
  background: rgba(20, 14, 8, 0.35);
  border: 1px solid rgba(184, 115, 51, 0.25);
  border-radius: 10px;
  overflow: hidden;
}

.pg-radar-svg { display: block; width: 100%; height: 100%; }

/* Grille + axes (tons laiton du panneau) */
.pg-radar-ring  { fill: none; stroke: rgba(202, 162, 63, 0.16); stroke-width: 1; }
.pg-radar-spoke { stroke: rgba(202, 162, 63, 0.22); stroke-width: 1; }
.pg-radar-axis-label {
  fill: rgba(245, 230, 200, 0.55);
  font-size: 6.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Polygone de donnees - couleur = --pg-c (inline par IA).
   NOTE : c'est un <path> et non un <polygon>. L'attribut `points` d'un
   <polygon> n'est PAS une propriete CSS : aucun navigateur ne le
   transitionne, la forme sauterait pendant que les sommets glissent.
   `d` sur un <path> EST une propriete geometrique CSS (SVG2), couverte
   par le `transition:all` ci-dessous la ou elle est supportee, et qui
   degrade proprement en saut ailleurs. Voir pgRadarBuild(). */
.pg-radar-poly {
  fill: var(--pg-c, #d4a84a);
  fill-opacity: 0.18;
  stroke: var(--pg-c, #d4a84a);
  stroke-width: 1.5;
  transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);   /* fluidite */
}
.pg-radar-vertex {
  fill: var(--pg-c, #d4a84a);
  transition: cx 0.9s cubic-bezier(0.4,0,0.2,1),
              cy 0.9s cubic-bezier(0.4,0,0.2,1);
}
.pg-radar-core {
  fill: none;
  stroke: var(--pg-c, #d4a84a);
  stroke-width: 1.3;
}

/* Pulse doux tant qu'on est en placeholder (a retirer le jour J) */
@keyframes pgRadarPulse {
  0%,100% { fill-opacity: 0.11; }
  50%     { fill-opacity: 0.24; }
}
.pg-radar-poly.pulsing { animation: pgRadarPulse 3.6s ease-in-out infinite; }

/* Titre (nom de l'IA) au-dessus du cadran */
.pg-radar-title {
  position: absolute;
  top: 8px; left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pg-c, #d4a84a);
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
}

/* Overlay COMING SOON */
.pg-radar-soon {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(20, 14, 8, 0.5);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: none;
  z-index: 3;
}
.pg-radar-soon .pg-radar-badge {
  border: 1px solid var(--pg-c, #d4a84a);
  color: var(--pg-c, #d4a84a);
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 8.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(20, 14, 8, 0.6);
  box-shadow: 0 0 10px -3px var(--pg-c, #d4a84a);
}
.pg-radar-soon .pg-radar-sub {
  margin-top: 6px;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: rgba(245, 230, 200, 0.5);
  text-transform: uppercase;
}

/* Responsive - memes ruptures que .pg-cards (900px / 560px) */
@media (max-width: 900px) {
  .pg-radars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pg-radars { grid-template-columns: 1fr; }
}

/* Meme egard que le bloc pg d'origine : pas de pulse ni de glissement si
   l'utilisateur demande moins de mouvement. Le JS coupe en plus la demo
   (cf. pgRadarInit) : sans ca, la forme sauterait toutes les 2,6 s. */
@media (prefers-reduced-motion: reduce) {
  .pg-radar-poly.pulsing { animation: none !important; }
  .pg-radar-poly, .pg-radar-vertex { transition: none !important; }
}