/* =====================================================================
   IKH0S — composants d'interface (export)
   Polices (Google Fonts) :
   https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Share+Tech+Mono&family=Spectral:ital,wght@0,400;0,500;1,400&family=Spectral+SC:wght@600&display=swap

   Composants : .ikh-topbar · .ikh-wiki · .ikh-clock · .ikh-rail / .ikh-railbtn · .ikh-lanterns
                .ikh-keysbtn · .ikh-eye · .ikh-keys (panneau Keyboard) · .ikh-console · .ikh-minimap
   États : classes .is-hover / .is-active / .is-on / .is-unread / .is-resting / .is-selected / .is-hl / .is-silent
   Les composants n'ont pas de position fixe. La section « Mise en page » en fin de fichier
   les place comme dans la maquette, sous la classe .ikh-layout (optionnelle).

   LABO lot 5 (1er oct 2026) : copie de l'export Claude Design, premier ecart, dans la
   section 3 (compteur Day · Tick) : le curseur « main » et les regles de survol du cadran
   sont retires. Aucune action « Khôra time » n'existe sur le site (pas de touche T) :
   le compteur n'est donc pas un bouton. L'ecart avait ete fait ICI et non en surcharge parce
   que viseur.js lisait le curseur dans les REGLES (pas dans le style calcule).
   LABO lot 8 (2 oct 2026) : second ecart, mecanique. Les 7 regles qui demandaient la main
   du systeme demandent la main laiton : var(--ikh-cur-main, pointer). La variable est posee
   dans styles.css ; sans elle (export servi seul), le repli rend la main du systeme, comme
   dans l'export. viseur.js n'est plus charge.
   Tout le reste est l'export tel quel ; les ajustements du site sont dans c2.css.
   ===================================================================== */

:root {
  /* — Matière — */
  --ikh-bg: #0d0a06;
  --ikh-gold: #ffd700;
  --ikh-brass: #d4a84a;
  --ikh-brass-hi: #f6dc98;
  --ikh-brass-lo: #6e4f1c;
  --ikh-copper: #b87333;
  --ikh-amber: #ffbf00;
  --ikh-cream: #f5e6c8;
  --ikh-cream-dim: #c9b791;
  --ikh-patina: #6fd0bb;
  --ikh-unread: #f0b35e;
  --ikh-engrave: #1c1206;
  --ikh-title-gold: #e6bc62;          /* titre Transmission Log */

  /* — Habitantes — */
  --ikh-limon: #ffd93d;
  --ikh-vermeil: #e63946;
  --ikh-ocre: #f8bd86;                /* éclairci pour la lisibilité (base #f4a261) */
  --ikh-indigo: #5b8fd6;
  --ikh-axiom: #adb5bd;

  /* — Corbeaux — */
  --ikh-huginn: #4f9fb0;
  --ikh-huginn-hi: #8fc6d4;
  --ikh-muninn: #d4a84a;
  --ikh-muninn-name: #e8973a;

  /* — Instruments (émail du rail) : même luminosité/chroma, teinte variable — */
  --ikh-acc-enter: oklch(0.80 0.14 85);
  --ikh-acc-log: oklch(0.80 0.14 185);
  --ikh-acc-publications: oklch(0.80 0.14 305);
  --ikh-acc-guild: oklch(0.80 0.14 55);
  --ikh-acc-votes: oklch(0.80 0.14 140);
  --ikh-acc-gauges: oklch(0.80 0.14 245);
  --ikh-acc-console: var(--ikh-patina);
  --ikh-acc-map: var(--ikh-amber);
  --ikh-acc-general: var(--ikh-cream);

  /* — Surfaces — */
  --ikh-plate: #241a0f;               /* plaque brun chaud, aplat */
  --ikh-plate-hover: #2b1f12;
  --ikh-plate-active: #34250f;
  --ikh-p-top: rgba(44, 32, 18, .94);
  --ikh-p-bot: rgba(15, 11, 7, .96);
  --ikh-well: rgba(6, 4, 2, .62);
  --ikh-line: rgba(212, 168, 74, .5);
  --ikh-line-lo: rgba(110, 79, 28, .95);
  --ikh-edge-dark: rgba(0, 0, 0, .85);
  --ikh-corner: rgba(212, 168, 74, .75);

  /* — Textures (CSS pur) — */
  --ikh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .62 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ikh-scan: repeating-linear-gradient(0deg, rgba(111, 208, 187, .045) 0 1px, transparent 1px 3px);
  --ikh-panel: var(--ikh-grain), var(--ikh-scan), linear-gradient(180deg, var(--ikh-p-top), var(--ikh-p-bot));
  --ikh-mat-brass: linear-gradient(180deg, #f6dc98 0%, #d4a84a 38%, #b87333 72%, #7a5520 100%);
  --ikh-rivet: radial-gradient(circle, #f6dc98 0 1px, #6e4f1c 1.6px 2.2px, transparent 2.8px);
  --ikh-sh-plate: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 190, .07), inset 0 0 0 1px rgba(212, 168, 74, .1);
  --ikh-glow-amber: 0 0 8px 1px rgba(255, 191, 0, .7);

  /* — Typo — */
  --ikh-font-display: 'Cinzel', serif;
  --ikh-font-text: 'Spectral', serif;
  --ikh-font-sc: 'Spectral SC', 'Spectral', serif;
  --ikh-font-mono: 'Share Tech Mono', monospace;

  /* — Tailles — */
  --ikh-edge: 10px;
  --ikh-gap: 6px;
  --ikh-radius: 3px;
  --ikh-bar-h: 76px;
  --ikh-logo-w: 153px;
  --ikh-logo-h: 65px;
  --ikh-eye: 34px;
  --ikh-rail-w: 112px;
  --ikh-railbtn-h: 64px;
  --ikh-clock-h: 46px;
  --ikh-minimap-w: 240px;
  --ikh-minimap-h: 120px;
  --ikh-console-h: 132px;
  --ikh-console-w: min(1580px, calc(100vw - 2 * (var(--ikh-edge) + 200px)));
  --ikh-bevel: 16px;
  --ikh-log-h: 116px;
  --ikh-portrait-w: 72px;
  --ikh-portrait-h: 88px;

  --ikh-t-fast: 140ms;
  --ikh-t-med: 200ms;
}

/* ---------- Base commune ---------- */
[class^="ikh-"], [class^="ikh-"] *, [class^="ikh-"] *::before, [class^="ikh-"] *::after { box-sizing: border-box; }
.ikh-btn-reset { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: var(--ikh-cur-main, pointer); }
.ikh-ico { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.who-limon   { --who: var(--ikh-limon); }
.who-vermeil { --who: var(--ikh-vermeil); }
.who-ocre    { --who: var(--ikh-ocre); }
.who-indigo  { --who: var(--ikh-indigo); }
.who-axiom   { --who: var(--ikh-axiom); }

/* Équerres laiton aux 4 coins (recolorées via --ikh-corner) */
.ikh-plate {
  position: relative; border: 1px solid var(--ikh-edge-dark); border-radius: var(--ikh-radius);
  box-shadow: var(--ikh-sh-plate); color: var(--ikh-cream-dim);
  --ikh-corners:
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 0 0 / 9px 1px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 0 0 / 1px 9px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 100% 0 / 9px 1px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 100% 0 / 1px 9px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 0 100% / 9px 1px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 0 100% / 1px 9px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 100% 100% / 9px 1px no-repeat,
    linear-gradient(var(--ikh-corner), var(--ikh-corner)) 100% 100% / 1px 9px no-repeat;
  background: var(--ikh-corners), var(--ikh-grain), var(--ikh-plate);
  transition: border-color var(--ikh-t-fast), box-shadow var(--ikh-t-fast), color var(--ikh-t-fast), background-color var(--ikh-t-fast);
}
.ikh-riveted::before {
  content: ''; position: absolute; inset: 3px; pointer-events: none; z-index: 1;
  background: var(--ikh-rivet) 0 0 / 6px 6px no-repeat, var(--ikh-rivet) 100% 0 / 6px 6px no-repeat,
              var(--ikh-rivet) 0 100% / 6px 6px no-repeat, var(--ikh-rivet) 100% 100% / 6px 6px no-repeat;
}

/* =====================================================================
   1. BARRE DU HAUT (emplacement logo 153 × 65 au centre)
   ===================================================================== */
.ikh-topbar {
  position: relative; height: var(--ikh-bar-h);
  display: grid; grid-template-columns: 1fr var(--ikh-logo-w) 1fr; align-items: center; padding: 0 var(--ikh-edge);
  background: linear-gradient(180deg, rgba(13,10,6,.82), rgba(13,10,6,.38) 65%, rgba(13,10,6,0));
}
.ikh-topbar__logo-slot { grid-column: 2; width: var(--ikh-logo-w); height: var(--ikh-logo-h); }
.ikh-topbar__left { grid-column: 1; justify-self: start; }
.ikh-topbar__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* =====================================================================
   2. BOUTON WIKI IKH0S (tête du rail)
   ===================================================================== */
.ikh-wiki {
  width: var(--ikh-rail-w); height: 64px; overflow: hidden; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.ikh-wiki__medal {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--ikh-engrave);
  background: radial-gradient(circle at 35% 30%, #fff1c4, transparent 45%), var(--ikh-mat-brass);
  box-shadow: 0 0 0 2px #140e07, 0 0 0 3px rgba(212,168,74,.55), inset 0 -2px 3px rgba(0,0,0,.35), 0 2px 4px rgba(0,0,0,.6);
  transition: box-shadow var(--ikh-t-fast), filter var(--ikh-t-fast);
}
.ikh-wiki__medal .ikh-ico { width: 15px; height: 15px; stroke-width: 2; transition: transform var(--ikh-t-fast); }
.ikh-wiki__label { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ikh-wiki__label b { font: 700 15px/1 var(--ikh-font-display); letter-spacing: .22em; padding-left: .22em; text-transform: uppercase; color: var(--ikh-cream); }
.ikh-wiki__label span { font: 12px/1 var(--ikh-font-mono); letter-spacing: .24em; padding-left: .24em; color: var(--ikh-brass); transition: color var(--ikh-t-fast); }
.ikh-wiki:hover, .ikh-wiki.is-hover { --ikh-corner: var(--ikh-amber); background-color: var(--ikh-plate-hover); border-color: rgba(255,191,0,.35); }
.ikh-wiki:hover .ikh-wiki__medal, .ikh-wiki.is-hover .ikh-wiki__medal { filter: brightness(1.12); box-shadow: 0 0 0 2px #140e07, 0 0 0 3px var(--ikh-amber), 0 0 12px rgba(255,191,0,.5), inset 0 -2px 3px rgba(0,0,0,.35); }
.ikh-wiki:hover .ikh-ico, .ikh-wiki.is-hover .ikh-ico { transform: rotate(-8deg) scale(1.08); }
.ikh-wiki:hover .ikh-wiki__label span, .ikh-wiki.is-hover .ikh-wiki__label span { color: var(--ikh-amber); }
.ikh-wiki:active { transform: translateY(1px); }

/* =====================================================================
   3. COMPTEUR DAY · TICK (cadran mécanique à tambours)
   Chaque fenêtre : valeur précédente / courante / suivante. État non lu : « ? » ambre.
   LABO lot 5 : ce n'est PAS un bouton (voir l'en-tete) — ni curseur main, ni survol.
   ===================================================================== */
.ikh-clock {
  position: relative; width: var(--ikh-rail-w); height: var(--ikh-clock-h);
  display: grid; grid-template-columns: 1fr auto 1.4fr; align-items: end; column-gap: 3px;
  padding: 5px 5px 8px; white-space: nowrap;
  background: var(--ikh-corners), var(--ikh-grain), linear-gradient(180deg, #2c1f0f, #110b05);
}
.ikh-clock.is-on { --ikh-corner: var(--ikh-amber); }
.ikh-counter { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
.ikh-counter__key { font: 700 11.5px/1 var(--ikh-font-display); letter-spacing: .2em; padding-left: .2em; text-align: center; text-transform: uppercase; color: var(--ikh-brass); }
.ikh-counter__win {
  position: relative; height: 21px; overflow: hidden; border-radius: 2px;
  background: linear-gradient(180deg, #000, #24180a 26%, #3d2a12 50%, #24180a 74%, #000);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.85), 0 0 0 1px rgba(212,168,74,.5), inset 0 4px 3px -2px rgba(0,0,0,.95), inset 0 -4px 3px -2px rgba(0,0,0,.95);
}
.ikh-counter__win::after { content: ''; position: absolute; left: 1px; right: 1px; top: 1px; height: 45%; background: linear-gradient(180deg, rgba(255,240,200,.16), transparent); pointer-events: none; }
.ikh-counter__drum {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; text-align: center;
  font: 18px/16px var(--ikh-font-mono); letter-spacing: .04em; color: var(--ikh-amber);
}
.ikh-counter__drum span:nth-child(2) { text-shadow: 0 0 6px rgba(255,191,0,.7); transition: text-shadow var(--ikh-t-fast); }
.ikh-counter__drum span:not(:nth-child(2)) { color: rgba(255,191,0,.35); }
/* Non lu : la fenêtre n'affiche qu'un « ? » ambre */
.ikh-counter.is-unread .ikh-counter__drum span:not(:nth-child(2)) { visibility: hidden; }
.ikh-counter.is-unread .ikh-counter__drum span:nth-child(2) { color: var(--ikh-unread); text-shadow: 0 0 6px rgba(240,179,94,.6); }
.ikh-counter.is-unread .ikh-counter__win { box-shadow: inset 0 0 0 1px rgba(0,0,0,.85), 0 0 0 1px rgba(240,179,94,.7), inset 0 4px 3px -2px rgba(0,0,0,.95), inset 0 -4px 3px -2px rgba(0,0,0,.95); }
.ikh-clock__sep { width: 5px; height: 5px; margin-bottom: 8px; transform: rotate(45deg); background: var(--ikh-brass); box-shadow: 0 0 4px rgba(212,168,74,.6); }
.ikh-clock__scale { position: absolute; left: 7px; right: 7px; bottom: 2px; height: 3px; background: repeating-linear-gradient(90deg, rgba(212,168,74,.45) 0 1px, transparent 1px calc(100% / 8)); }
.ikh-clock__progress { position: absolute; left: 0; bottom: 0; height: 1px; width: var(--ikh-day-progress, 0%); background: linear-gradient(90deg, rgba(111,208,187,.4), var(--ikh-amber)); }
.ikh-clock__progress::after { content: ''; position: absolute; right: -1px; bottom: 0; width: 2px; height: 4px; background: var(--ikh-amber); box-shadow: var(--ikh-glow-amber); }

/* =====================================================================
   4. RAIL EN PLAQUES (sans dégradé lumineux)
   ===================================================================== */
.ikh-rail { width: var(--ikh-rail-w); display: flex; flex-direction: column; gap: var(--ikh-gap); }
.ikh-railbtn {
  --accent: var(--ikh-brass);
  width: var(--ikh-rail-w); height: var(--ikh-railbtn-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 4px 4px;
}
.ikh-railbtn--enter        { --accent: var(--ikh-acc-enter); }
.ikh-railbtn--log          { --accent: var(--ikh-acc-log); }
.ikh-railbtn--publications { --accent: var(--ikh-acc-publications); }
.ikh-railbtn--guild        { --accent: var(--ikh-acc-guild); }
.ikh-railbtn--votes        { --accent: var(--ikh-acc-votes); }
.ikh-railbtn--gauges       { --accent: var(--ikh-acc-gauges); }
.ikh-railbtn .ikh-ico { width: 23px; height: 23px; color: var(--accent); transition: filter var(--ikh-t-fast); }
.ikh-railbtn__label {
  font: 600 13.5px/1.05 var(--ikh-font-sc); text-align: center; color: #efe2c4;
  max-width: 100%; overflow-wrap: normal; hyphens: none; transition: color var(--ikh-t-fast);
}
/* Numéro en coin */
.ikh-railbtn__key {
  position: absolute; top: 5px; left: 5px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 2px;
  display: grid; place-items: center; font: 12px/1 var(--ikh-font-mono); color: var(--ikh-cream-dim);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent); background: rgba(0,0,0,.35);
  opacity: .75; transition: opacity var(--ikh-t-fast), color var(--ikh-t-fast), border-color var(--ikh-t-fast);
}
/* Petit voyant */
.ikh-railbtn__lamp {
  position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%;
  background: #3a2c18; box-shadow: inset 0 1px 1px rgba(0,0,0,.8), 0 0 0 1px rgba(212,168,74,.25);
  transition: background var(--ikh-t-fast), box-shadow var(--ikh-t-fast);
}
/* Souligné d'émail */
.ikh-railbtn::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 3px; height: 2px; border-radius: 1px;
  background: var(--accent); opacity: .5; transition: opacity var(--ikh-t-fast), left var(--ikh-t-fast), right var(--ikh-t-fast);
}
/* Survol : plaque un peu plus claire, équerres + bord à la couleur de l'instrument, souligné qui s'allonge */
.ikh-railbtn:hover, .ikh-railbtn.is-hover {
  --ikh-corner: var(--accent); background-color: var(--ikh-plate-hover);
  border-color: color-mix(in oklch, var(--accent) 45%, black);
}
.ikh-railbtn:hover .ikh-ico, .ikh-railbtn.is-hover .ikh-ico { filter: brightness(1.15); }
.ikh-railbtn:hover .ikh-railbtn__label, .ikh-railbtn.is-hover .ikh-railbtn__label { color: var(--ikh-cream); }
.ikh-railbtn:hover::after, .ikh-railbtn.is-hover::after { opacity: 1; left: 14px; right: 14px; }
.ikh-railbtn:hover .ikh-railbtn__key, .ikh-railbtn.is-hover .ikh-railbtn__key { opacity: 1; color: var(--ikh-cream); border-color: var(--accent); }
/* Actif : panneau ouvert */
.ikh-railbtn.is-active { --ikh-corner: var(--accent); background-color: var(--ikh-plate-active); border-color: var(--ikh-edge-dark); }
.ikh-railbtn.is-active .ikh-railbtn__label { color: var(--ikh-cream); }
.ikh-railbtn.is-active .ikh-railbtn__key { opacity: 1; color: var(--ikh-cream); border-color: var(--accent); }
.ikh-railbtn.is-active .ikh-railbtn__lamp { background: var(--accent); box-shadow: 0 0 6px 1px var(--accent); }
.ikh-railbtn.is-active::before { content: ''; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; background: var(--accent); border-radius: 0 2px 2px 0; }
.ikh-railbtn.is-active::after {
  left: auto; right: -6px; top: 50%; bottom: auto; width: 10px; height: 10px; border-radius: 0; opacity: 1;
  transform: translateY(-50%) rotate(45deg);
  background: var(--ikh-plate-active); border-top: 1px solid var(--accent); border-right: 1px solid var(--accent);
}

/* =====================================================================
   5. LANTERNES DES HABITANTES (sous Pressure Gauges, largeur du rail)
   Le nom du modèle est injecté par le site dans .ikh-lantern__model (vide par défaut).
   ===================================================================== */
.ikh-lanterns { width: var(--ikh-rail-w); display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.ikh-lantern {
  position: relative; width: 100%; min-width: 0; padding: 8px; text-align: left; cursor: var(--ikh-cur-main, pointer);
  display: flex; align-items: center; gap: 8px; font: inherit; color: var(--ikh-cream);
  border: 0; border-radius: 3px;
  background: linear-gradient(180deg, rgba(40,30,18,.72), rgba(13,10,6,.72));
  box-shadow: inset 0 1px 0 rgba(255,236,190,.14), inset 0 0 0 1px rgba(212,168,74,.28), 0 2px 0 rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);
  transition: transform 90ms, box-shadow 120ms, filter 120ms;
}
/* Lampe à vide : verre, filament à la couleur de l'habitante, culot laiton */
.ikh-lantern__tube {
  position: relative; flex: none; width: 13px; height: 28px; margin-bottom: 4px; border-radius: 7px 7px 2px 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, transparent 3px 9px, rgba(255,255,255,.1) 10px 11px, transparent 12px),
    radial-gradient(ellipse 60% 45% at 50% 52%, color-mix(in oklch, var(--who) 55%, white) 0, var(--who) 35%, color-mix(in oklch, var(--who) 30%, transparent) 70%, rgba(20,14,8,.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,236,190,.35), inset 0 -8px 8px -6px rgba(0,0,0,.6), 0 0 14px color-mix(in oklch, var(--who) 70%, transparent), 0 0 30px color-mix(in oklch, var(--who) 30%, transparent);
  animation: ikh-tube-hum 3.2s ease-in-out infinite;
}
.ikh-lantern__tube::before { /* filament */
  content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 13px; margin-left: -1px; border-radius: 1px;
  background: #fff6dc; box-shadow: 0 0 4px #fff, 0 0 8px var(--who);
}
.ikh-lantern__tube::after { /* culot */
  content: ''; position: absolute; left: -2px; right: -2px; bottom: -5px; height: 6px; border-radius: 1px 1px 3px 3px;
  background: repeating-linear-gradient(180deg, #f0cf7e 0 1px, #8a6526 1px 2px), var(--ikh-mat-brass);
  box-shadow: 0 2px 3px rgba(0,0,0,.6);
}
.ikh-lantern__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ikh-lantern__name {
  font: 700 14px/1 var(--ikh-font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--who);
  text-shadow: 0 1px 2px #000, 0 0 10px color-mix(in oklch, var(--who) 55%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ikh-lantern__model { font: 500 12.5px/1 var(--ikh-font-mono); letter-spacing: .06em; color: var(--ikh-cream-dim); text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ikh-lantern__model:not(:empty)::before { content: '◆'; margin-right: .45em; font-size: .7em; vertical-align: .15em; color: var(--who); }
.ikh-lantern__model:empty { display: none; }
/* Survol / clic / focus / sélection */
.ikh-lantern:hover, .ikh-lantern.is-hover { filter: brightness(1.15); box-shadow: inset 0 1px 0 rgba(255,236,190,.18), inset 0 0 0 1px color-mix(in oklch, var(--who) 75%, transparent), 0 2px 0 rgba(0,0,0,.55), 0 0 12px color-mix(in oklch, var(--who) 30%, transparent); }
.ikh-lantern:active, .ikh-lantern.is-pressed { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklch, var(--who) 75%, transparent); }
.ikh-lantern:focus-visible { outline: 2px solid var(--who); outline-offset: 2px; }
.ikh-lantern.is-selected { background: linear-gradient(180deg, color-mix(in oklch, var(--who) 22%, #1a130b), rgba(13,10,6,.8)); box-shadow: inset 0 0 0 1px var(--who), inset 0 -3px 0 var(--who), 0 0 14px color-mix(in oklch, var(--who) 35%, transparent); }
/* Au repos : lampe en veille (lueur basse qui respire) */
.ikh-lantern.is-resting .ikh-lantern__tube {
  background:
    linear-gradient(90deg, rgba(255,255,255,.26) 0 2px, transparent 3px 9px, rgba(255,255,255,.1) 10px 11px, transparent 12px),
    radial-gradient(ellipse 60% 45% at 50% 52%, color-mix(in oklch, var(--who) 70%, white) 0, color-mix(in oklch, var(--who) 70%, transparent) 40%, rgba(20,14,8,.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,236,190,.3), inset 0 -8px 8px -6px rgba(0,0,0,.6), 0 0 8px color-mix(in oklch, var(--who) 45%, transparent);
  animation: ikh-tube-breathe 4.5s ease-in-out infinite;
}
.ikh-lantern.is-resting .ikh-lantern__tube::before { background: color-mix(in oklch, var(--who) 40%, #fff1c4); box-shadow: 0 0 5px var(--who); }
@keyframes ikh-tube-hum { 0%,100% { filter: brightness(1); } 47% { filter: brightness(1.08); } 50% { filter: brightness(.86); } 53% { filter: brightness(1.1); } }
@keyframes ikh-tube-breathe { 0%,100% { filter: brightness(.8); } 50% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .ikh-lantern__tube { animation: none !important; } }

/* =====================================================================
   6. BOUTON KEYBOARD + ŒIL (droite de la barre du haut)
   ===================================================================== */
.ikh-keysbtn {
  position: relative; width: var(--ikh-eye); height: var(--ikh-eye); margin-top: -4px; border-radius: 50%;
  display: grid; place-items: center; cursor: var(--ikh-cur-main, pointer); color: var(--ikh-cream); padding: 0;
  border: 2px solid transparent;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,236,190,.18), transparent 45%) padding-box,
    radial-gradient(circle at 50% 40%, #3e2c15, #120c06 75%) padding-box,
    var(--ikh-mat-brass) border-box;
  box-shadow: 0 3px 0 #3a2810, 0 4px 7px rgba(0,0,0,.6), inset 0 -2px 4px rgba(0,0,0,.6);
  transition: transform 90ms, box-shadow 90ms, filter var(--ikh-t-fast), color var(--ikh-t-fast);
}
.ikh-keysbtn .ikh-ico { width: 19px; height: 19px; }
.ikh-keysbtn:hover, .ikh-keysbtn.is-hover { filter: brightness(1.12); color: var(--ikh-amber); box-shadow: 0 3px 0 #3a2810, 0 4px 7px rgba(0,0,0,.6), 0 0 12px rgba(255,191,0,.35), inset 0 -2px 4px rgba(0,0,0,.6); }
.ikh-keysbtn:active, .ikh-keysbtn.is-on { transform: translateY(2px); color: var(--ikh-amber); box-shadow: 0 1px 0 #3a2810, 0 2px 3px rgba(0,0,0,.6), 0 0 12px rgba(255,191,0,.35), inset 0 -1px 3px rgba(0,0,0,.6); }
.ikh-keysbtn__hint {
  position: absolute; right: -5px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 var(--ikh-font-mono); color: var(--ikh-engrave); background: var(--ikh-mat-brass); box-shadow: 0 0 0 1.5px #0d0a06;
}
.ikh-eye {
  width: var(--ikh-eye); height: var(--ikh-eye); border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: var(--ikh-cur-main, pointer); color: var(--ikh-brass);
}
.ikh-eye .ikh-ico { width: 20px; height: 20px; }
.ikh-eye:hover, .ikh-eye.is-hover { --ikh-corner: var(--ikh-amber); color: var(--ikh-amber); background-color: var(--ikh-plate-hover); }
.ikh-eye.is-on { color: var(--ikh-amber); }
.ikh-eye .ikh-eye__off { display: none; }
.ikh-eye.is-on .ikh-eye__on { display: none; }
.ikh-eye.is-on .ikh-eye__off { display: block; }

/* =====================================================================
   7. PANNEAU KEYBOARD
   ===================================================================== */
.acc-enter        { --accent: var(--ikh-acc-enter); }
.acc-log          { --accent: var(--ikh-acc-log); }
.acc-publications { --accent: var(--ikh-acc-publications); }
.acc-guild        { --accent: var(--ikh-acc-guild); }
.acc-votes        { --accent: var(--ikh-acc-votes); }
.acc-gauges       { --accent: var(--ikh-acc-gauges); }
.acc-console      { --accent: var(--ikh-acc-console); }
.acc-map          { --accent: var(--ikh-acc-map); }
.acc-general      { --accent: var(--ikh-acc-general); }

.ikh-keys-overlay {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  padding: calc(var(--ikh-bar-h) + 8px) 20px calc(var(--ikh-console-h) + var(--ikh-edge) + 30px);
  background: radial-gradient(70% 70% at 50% 45%, rgba(8,6,3,.5), rgba(8,6,3,.82));
  transition: opacity var(--ikh-t-med), visibility var(--ikh-t-med);
}
.ikh-keys-overlay:not(.is-open) { opacity: 0; visibility: hidden; pointer-events: none; }
.ikh-keys {
  width: min(940px, 100%); max-height: calc(100vh - var(--ikh-bar-h) - 8px - var(--ikh-console-h) - var(--ikh-edge) - 30px);
  display: flex; flex-direction: column; color: var(--ikh-cream);
  background: var(--ikh-corners), var(--ikh-panel);
}
.ikh-keys__head {
  position: relative; flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 16px;
  background: linear-gradient(180deg, rgba(255,191,0,.08), transparent);
}
.ikh-keys__head::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--ikh-brass) 18%, var(--ikh-brass) 82%, transparent); }
.ikh-keys__title { flex: 1; font: 700 15.5px/1 var(--ikh-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ikh-gold); text-shadow: 0 0 12px rgba(255,191,0,.35); }
.ikh-keys__close {
  width: 26px; height: 26px; display: grid; place-items: center; padding: 0; cursor: var(--ikh-cur-main, pointer); background: none;
  border: 1px solid var(--ikh-line); border-radius: 50%; color: var(--ikh-brass);
  transition: color var(--ikh-t-fast), border-color var(--ikh-t-fast), background var(--ikh-t-fast);
}
.ikh-keys__close .ikh-ico { width: 14px; height: 14px; stroke-width: 2; }
.ikh-keys__close:hover { color: var(--ikh-amber); border-color: var(--ikh-amber); background: rgba(255,191,0,.1); }
.ikh-keys__body {
  min-height: 0; overflow: auto; padding: 14px 20px;
  display: grid; grid-template-columns: auto minmax(260px, 1fr); gap: 6px 24px; align-items: start;
  scrollbar-width: thin; scrollbar-color: var(--ikh-brass-lo) transparent;
}
.ikh-keys__foot { padding: 8px 20px 10px; font: italic 15.5px/1.3 var(--ikh-font-text); color: var(--ikh-cream-dim); border-top: 1px solid rgba(212,168,74,.16); }

/* Clavier illustré */
.ikh-kb { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.ikh-kb__bed {
  padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 11px;
  background: var(--ikh-grain), radial-gradient(90% 80% at 50% 0%, rgba(255,191,0,.07), transparent 70%), linear-gradient(180deg, #1b130a, #0b0704);
  border: 1px solid var(--ikh-line-lo); border-top-color: var(--ikh-line); border-radius: 6px;
  box-shadow: inset 0 3px 12px rgba(0,0,0,.75), inset 0 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,236,190,.08);
}
.ikh-kb__row { display: flex; gap: 7px; }
.ikh-kb__row--1 { padding-left: 14px; }
.ikh-kb__row--2 { padding-left: 24px; }
.ikh-kb__row--3 { padding-left: 36px; }
.ikh-kb__row--arrows { justify-content: flex-end; padding-top: 4px; }
.ikh-kb__key {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 15px/1 var(--ikh-font-mono); color: rgba(245,230,200,.3);
  background: radial-gradient(circle at 50% 32%, #2e2112, #0f0a05 75%);
  box-shadow: 0 0 0 1.5px #0a0603, 0 0 0 3px rgba(212,168,74,.28), 0 3px 0 2px #241909, 0 4px 5px 2px rgba(0,0,0,.5);
  transition: transform 90ms, box-shadow var(--ikh-t-fast), color var(--ikh-t-fast), background var(--ikh-t-fast);
}
.ikh-kb__key--wide { width: 42px; border-radius: 15px; font-size: 13px; }
.ikh-kb__key.is-bound {
  color: var(--ikh-cream); cursor: help;
  background: radial-gradient(circle at 50% 32%, color-mix(in oklch, var(--accent) 22%, #2e2112), #0f0a05 78%);
  box-shadow: 0 0 0 1.5px #0a0603, 0 0 0 3px color-mix(in oklch, var(--accent) 80%, transparent), 0 3px 0 2px #241909, 0 4px 5px 2px rgba(0,0,0,.5), 0 0 10px color-mix(in oklch, var(--accent) 30%, transparent);
  text-shadow: 0 0 6px color-mix(in oklch, var(--accent) 60%, transparent);
}
.ikh-kb__key.is-hl {
  transform: translateY(2px); color: #fff8e6;
  background: radial-gradient(circle at 50% 40%, color-mix(in oklch, var(--accent) 55%, #2e2112), #140d06 80%);
  box-shadow: 0 0 0 1.5px #0a0603, 0 0 0 3px var(--accent), 0 1px 0 2px #241909, 0 2px 3px 2px rgba(0,0,0,.5), 0 0 18px color-mix(in oklch, var(--accent) 60%, transparent);
}
.ikh-kb__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ikh-kb__legend span { display: flex; align-items: center; gap: 6px; font: 700 12px/1 var(--ikh-font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--ikh-cream-dim); }
.ikh-kb__legend span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }

/* Tableau des raccourcis */
.ikh-klist { display: flex; flex-direction: column; gap: 16px; }
.ikh-kgroup { display: flex; flex-direction: column; }
.ikh-kgroup__title { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; font: 700 13.5px/1 var(--ikh-font-display); letter-spacing: .22em; text-transform: uppercase; color: var(--ikh-gold); }
.ikh-kgroup__title::before { content: ''; width: 5px; height: 5px; transform: rotate(45deg); background: var(--ikh-amber); box-shadow: var(--ikh-glow-amber); }
.ikh-krow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 28px; padding: 2px 6px; margin: 0 -6px; border-top: 1px solid rgba(212,168,74,.12); border-radius: 2px;
  transition: background var(--ikh-t-fast);
}
.ikh-krow:hover, .ikh-krow.is-hl { background: color-mix(in oklch, var(--accent) 12%, transparent); }
.ikh-krow__label { min-width: 0; font: 17px/1.2 var(--ikh-font-text); color: var(--ikh-cream); }
.ikh-krow__keys { flex: none; }
.ikh-krow__keys { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.ikh-kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  font: 14px/1 var(--ikh-font-mono); color: var(--ikh-cream); white-space: nowrap;
  background: radial-gradient(circle at 50% 30%, #3a2a16, #120c06 80%);
  box-shadow: 0 0 0 1px #0a0603, 0 0 0 2px color-mix(in oklch, var(--accent, var(--ikh-brass)) 75%, transparent), 0 2px 0 1px #3a2810;
}
.ikh-kbd--sep { min-width: 0; padding: 0 1px; background: none; box-shadow: none; color: var(--ikh-cream-dim); }
@media (max-width: 860px) { .ikh-keys__body { grid-template-columns: 1fr; } .ikh-kb { display: none; } }

/* =====================================================================
   8. CONSOLE DU BAS (cadre biseauté, corbeaux, Transmission Log, encoche Ravens)
   La phrase des corbeaux s'affiche toujours en entier : pas de coupe, la police
   se réduit avec la largeur du bloc (container query) et le bloc grandit si besoin.
   ===================================================================== */
.ikh-console {
  position: relative; width: var(--ikh-console-w); min-height: var(--ikh-console-h);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
}
.ikh-console__frame { position: absolute; inset: 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.55)); pointer-events: none; }
.ikh-console__frame::before, .ikh-console__frame::after {
  content: ''; position: absolute;
  clip-path: polygon(var(--b) 0, calc(100% - var(--b)) 0, 100% var(--b), 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, var(--b) 100%, 0 calc(100% - var(--b)), 0 var(--b));
}
.ikh-console__frame::before { --b: var(--ikh-bevel); inset: 0; background: linear-gradient(180deg, #050302, #000); }
.ikh-console__frame::after {
  --b: calc(var(--ikh-bevel) - 1px); inset: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,236,190,.1) 20%, rgba(255,236,190,.1) 80%, transparent) 0 0 / 100% 1px no-repeat,
    var(--ikh-rivet) 22px 5px / 6px 6px no-repeat, var(--ikh-rivet) calc(100% - 22px) 5px / 6px 6px no-repeat,
    var(--ikh-rivet) 22px calc(100% - 5px) / 6px 6px no-repeat, var(--ikh-rivet) calc(100% - 22px) calc(100% - 5px) / 6px 6px no-repeat,
    var(--ikh-panel);
}
.ikh-console > :not(.ikh-console__frame) { position: relative; z-index: 1; }

/* Encoche « Ravens » */
.ikh-notch {
  position: absolute !important; z-index: 2; top: -20px; right: 32px; height: 20px; padding: 0 16px; border: 0; cursor: var(--ikh-cur-main, pointer);
  display: flex; align-items: center;
  font: 700 12px/1 var(--ikh-font-display); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ikh-engrave); background: var(--ikh-mat-brass); text-shadow: 0 1px 0 rgba(255,240,200,.45);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
  transition: filter var(--ikh-t-fast);
}
.ikh-notch:hover { filter: brightness(1.14); }
.ikh-notch.is-off { background: linear-gradient(180deg, #5a4320, #2c200f); color: var(--ikh-brass); text-shadow: none; }
.ikh-console.is-ravens-hidden .ikh-raven { display: none; }

/* Bloc corbeau */
.ikh-raven {
  --raven: var(--ikh-huginn); --raven-hi: var(--ikh-huginn-hi); --raven-bg: linear-gradient(180deg, #152027, #0b1216); --raven-glow-x: 0%;
  flex: none; align-self: stretch; width: 21%; min-width: 180px; max-width: 320px; min-height: calc(var(--ikh-console-h) - 20px);
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  container-type: inline-size;
  border: 1px solid var(--ikh-edge-dark); border-radius: 2px;
  background: radial-gradient(80% 120% at var(--raven-glow-x) 50%, color-mix(in oklch, var(--raven) 16%, transparent), transparent 70%), var(--ikh-scan), var(--raven-bg);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in oklch, var(--raven) 14%, transparent);
}
.ikh-raven--muninn { --raven: var(--ikh-muninn); --raven-hi: var(--ikh-muninn-name); --raven-bg: linear-gradient(180deg, #241a0e, #120c06); --raven-glow-x: 100%; flex-direction: row-reverse; text-align: right; }
.ikh-raven__portrait {
  flex: none; width: var(--ikh-portrait-w); height: var(--ikh-portrait-h); overflow: hidden; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #3b3833 0 6px, #34312c 6px 12px);
  border: 1px solid var(--raven);
  box-shadow: 0 0 0 2px #0d0a06, 0 0 0 3px color-mix(in oklch, var(--raven) 60%, transparent), inset 0 0 14px rgba(0,0,0,.6);
  transition: box-shadow var(--ikh-t-fast), filter var(--ikh-t-fast);
}
.ikh-raven__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ikh-raven:hover .ikh-raven__portrait { box-shadow: 0 0 0 2px #0d0a06, 0 0 0 3px var(--raven), 0 0 14px color-mix(in oklch, var(--raven) 50%, transparent), inset 0 0 14px rgba(0,0,0,.6); }
.ikh-raven__text { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ikh-raven--muninn .ikh-raven__text { align-items: flex-end; }
.ikh-raven__name {
  display: flex; align-items: center; gap: 6px;
  font: 700 17px/1 var(--ikh-font-display); letter-spacing: .18em; color: var(--raven-hi);
  text-shadow: 0 1px 0 #000, 0 0 10px color-mix(in oklch, var(--raven) 45%, transparent);
}
.ikh-raven__name::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--raven); box-shadow: 0 0 5px var(--raven); }
.ikh-raven--muninn .ikh-raven__name { flex-direction: row-reverse; }
/* Phrase toujours entière : aucune coupe ; taille 13 → 17 px selon la largeur du bloc */
.ikh-raven__line { margin: 0; font: italic 400 clamp(13px, 5.6cqi, 17px)/1.25 var(--ikh-font-text); color: var(--ikh-cream); text-wrap: pretty; overflow: visible; }
.ikh-raven__line--silent { font: 16px/1 var(--ikh-font-mono); font-style: normal; letter-spacing: .3em; color: var(--ikh-cream-dim); }
.ikh-raven.is-silent .ikh-raven__portrait { filter: grayscale(1) brightness(.6); }
.ikh-raven.is-silent .ikh-raven__name { color: var(--ikh-cream-dim); text-shadow: none; }
.ikh-raven.is-silent .ikh-raven__name::after { background: #3a2c18; box-shadow: none; }

/* Transmission Log */
.ikh-tlog { position: relative; flex: 1; min-width: 0; height: var(--ikh-log-h); }
.ikh-tlog__panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  display: flex; flex-direction: column; padding: 3px 10px 6px;
  background: var(--ikh-scan), rgba(6,4,2,.55);
  border: 1px solid var(--ikh-edge-dark); border-radius: 2px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.6), inset 0 0 0 1px rgba(212,168,74,.08);
  transition: height var(--ikh-t-med) ease, box-shadow var(--ikh-t-med);
}
.ikh-tlog__panel::before, .ikh-tlog__panel::after { content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none; }
.ikh-tlog__panel::before { left: -1px; top: -1px; border-left: 1px solid var(--ikh-amber); border-top: 1px solid var(--ikh-amber); }
.ikh-tlog__panel::after { right: -1px; bottom: -1px; border-right: 1px solid var(--ikh-amber); border-bottom: 1px solid var(--ikh-amber); }
.ikh-tlog.is-expanded .ikh-tlog__panel {
  height: 66vh;
  background: var(--ikh-grain), var(--ikh-scan), linear-gradient(180deg, rgba(24,17,9,var(--ikh-log-bg-a,.88)), rgba(10,7,4,var(--ikh-log-bg-a,.88)));
  box-shadow: var(--ikh-sh-plate), 0 -12px 30px rgba(0,0,0,.35);
}
.ikh-tlog__head { flex: none; height: 22px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.ikh-tlog__title {
  display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 14px/1 var(--ikh-font-display); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ikh-title-gold); text-shadow: 0 1px 0 #000, 0 0 8px rgba(230,188,98,.25);
}
.ikh-tlog__title::before { content: ''; flex: none; width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, #fbe3a2, #c8953a 55%, #8a6526); box-shadow: 0 0 6px rgba(230,188,98,.6); }
.ikh-tlog__spacer { flex: 1; }
.ikh-chip {
  flex: none; height: 18px; padding: 0 9px; cursor: var(--ikh-cur-main, pointer); display: inline-flex; align-items: center;
  font: 700 12px/1 var(--ikh-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--ikh-brass);
  border: 1px solid var(--ikh-line); border-radius: 2px; background: linear-gradient(180deg, rgba(255,236,190,.08), rgba(0,0,0,.25));
  transition: color var(--ikh-t-fast), background var(--ikh-t-fast), box-shadow var(--ikh-t-fast);
}
.ikh-chip:hover { color: var(--ikh-engrave); background: var(--ikh-mat-brass); border-color: var(--ikh-brass-hi); box-shadow: 0 0 10px rgba(255,191,0,.35); }
.ikh-tlog__feed { flex: 1; min-height: 0; overflow: auto; padding-top: 3px; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; scrollbar-color: var(--ikh-brass-lo) transparent; }
.ikh-tlog__line { display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; row-gap: 1px; align-items: baseline; padding: 3px 5px; border-radius: 2px; transition: background var(--ikh-t-fast); }
.ikh-tlog__line:hover { background: rgba(255,191,0,.07); }
.ikh-tlog__who { display: flex; align-items: center; gap: 6px; font: 700 14px/1.2 var(--ikh-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--who); }
.ikh-tlog__who::before { content: ''; width: 5px; height: 5px; transform: rotate(45deg); background: var(--who); box-shadow: 0 0 6px var(--who); }
.ikh-tlog__type { font: 12px/1 var(--ikh-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ikh-cream-dim); }
.ikh-tlog__time { justify-self: end; font: 12px/1 var(--ikh-font-mono); color: var(--ikh-cream-dim); white-space: nowrap; }
.ikh-tlog__text { grid-column: 1 / -1; padding-left: 11px; font: 15.5px/1.25 var(--ikh-font-text); color: var(--ikh-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ikh-tlog.is-expanded .ikh-tlog__text { white-space: normal; }

/* =====================================================================
   9. MINI-CARTE (maquette CSS de référence — le site la dessine en canvas,
   voir minimap-canvas.md pour les valeurs)
   ===================================================================== */
.ikh-minimap { width: var(--ikh-minimap-w); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ikh-minimap__diamond {
  position: relative; width: var(--ikh-minimap-w); height: var(--ikh-minimap-h);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.55));
  --diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ikh-minimap__diamond::before { content: ''; position: absolute; inset: 0; clip-path: var(--diamond); background: var(--ikh-mat-brass); }
.ikh-minimap__map {
  position: absolute; inset: 2px 4px; clip-path: var(--diamond); overflow: hidden;
  background:
    var(--ikh-scan),
    repeating-linear-gradient(26.565deg, rgba(212,168,74,.14) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-26.565deg, rgba(212,168,74,.14) 0 1px, transparent 1px 14px),
    radial-gradient(circle 60px at 50% 50%, rgba(212,168,74,.22), rgba(212,168,74,0)),
    #0e0b07;
}
.ikh-minimap__map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ikh-minimap__view { position: absolute; border: 1px solid var(--ikh-amber); background: rgba(255,191,0,.08); box-shadow: 0 0 6px rgba(255,191,0,.6); }
.ikh-minimap__dot { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--who); box-shadow: 0 0 4px var(--who); }
/* Cartouche */
.ikh-minimap__meta {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 9px;
  font: 13.5px/1.2 var(--ikh-font-mono); color: var(--ikh-cream);
  background: rgba(13,10,6,.7); border: 1px solid rgba(212,168,74,.28); border-radius: 2px;
}
.ikh-minimap__meta b { font-weight: 400; color: var(--ikh-amber); }
.ikh-minimap__meta .is-unread { color: var(--ikh-unread); }

/* =====================================================================
   MISE EN PAGE (optionnelle) — positions de la maquette 1920 × 1080
   Ajouter .ikh-layout sur le conteneur plein écran du site.
   ===================================================================== */
.ikh-layout .ikh-topbar { position: fixed; z-index: 10; top: 0; left: 0; right: 0; pointer-events: none; }
.ikh-layout .ikh-topbar > * { pointer-events: auto; }
.ikh-layout .ikh-rail { position: fixed; z-index: 20; left: var(--ikh-edge); top: calc(var(--ikh-bar-h) + var(--ikh-gap)); }
.ikh-layout .ikh-minimap { position: fixed; z-index: 15; right: 60px; top: 76px; }
.ikh-layout .ikh-console { position: fixed; z-index: 31; left: 0; right: 0; bottom: var(--ikh-edge); margin: 0 auto; }
/* Le bouton Wiki est dans la barre du haut, aligné sur le rail */
.ikh-layout .ikh-topbar__left .ikh-wiki { margin-left: 0; }
@media (max-height: 860px) {
  :root { --ikh-bar-h: 64px; --ikh-railbtn-h: 54px; --ikh-clock-h: 40px; }
  .ikh-railbtn { gap: 3px; }
  .ikh-railbtn .ikh-ico { width: 19px; height: 19px; }
  .ikh-railbtn__label { font-size: 12.5px; }
}