/* =====================================================================
   LABO C2 (30 sept 2026) - habillage « Scene », lot 1.
   Carte plein ecran ; rail d'onglets a gauche ; tiroir unique ; Transmission
   Log permanent a droite (fond reglable) ; console de bord K1 en bas ; barre
   d'interface tout en bas ; fiche d'habitante V2 « hologramme ».
   Charge APRES styles.css : cette feuille ne fait que surcharger.
   Garde-fous : aucun backdrop-filter au-dessus du WebGL (cout par image,
   quel que soit le flou), aucune animation en boucle, rien qui suive la souris.

   LOT 5 (1er oct 2026) - habillage Claude Design. Les composants (barre du haut,
   Wiki, compteur, rail en plaques, lanternes, bouton clavier, oeil, panneau
   Keyboard, console, corbeaux, log) sont dessines par ikh0s-components.css,
   charge APRES cette feuille. Ici ne reste que la MISE EN PLACE sur le site :
   positions fixes, raccord des variables, etats lus sur les classes deja posees
   par le JS (.grand, .active, .empty), mobile. Les regles de cette feuille qui
   doivent battre celles de Design passent par un id ou un parent (#c2-console,
   .c2-rail …) : a specificite egale, c'est la feuille de Design qui gagne.
   Seule animation en boucle du site : le gresillement des 4 lampes (decision
   Pandore, lot 5), coupe par prefers-reduced-motion.

   LOT 6 (2 oct 2026) : fiche d'habitante a gauche (place du tiroir), barre du
   jour du compteur, trois etats des corbeaux (attente / silence / illisible).

   LOT 7 (2 oct 2026) : plus aucune barre de defilement dans les blocs corbeaux ;
   le tiroir s'arrete au-dessus de Help sous 1440 px de large, comme la fiche.
   ===================================================================== */

:root {
  --c2-top: 64px;      /* barre du haut */
  --c2-rail: 112px;    /* largeur du rail (lot 5 : 96 -> 112, les plaques de Design) */
  --c2-platw: 150px;   /* Help et About · Legal : meme taille, en miroir */
  --c2-bas: 10px;      /* marge basse commune : console, Help, liens About/Contact/Legal */
  --c2-console: 132px; /* console de bord */
  /* lot 6 : --c2-mm (bas de la minimap = haut de la fiche) retiree : la fiche est passee a gauche, a la place du tiroir. */
  --c2-holo: 8,9,10;   /* noir froid : plus d'aplat marron */
}
/* lot 5 : UNE source par mesure. Les variables de Design (--ikh-*) sont branchees sur celles du
   site, pour que le rail, le tiroir, la console et le panneau Keyboard lisent les memes nombres.
   `html:root` et non `:root` : la feuille de Design est chargee apres et redefinit ces variables
   sur `:root` ; il faut une specificite au-dessus pour que le raccord tienne.
   --ikh-log-h : 116 px chez Design, soit une console de 136 px alors que --ikh-console-h en
   annonce 132. Ramene a (console - 2 x 10 de marge) : la console fait vraiment 132 px. */
html:root {
  --ikh-bar-h: var(--c2-top);
  --ikh-rail-w: var(--c2-rail);
  --ikh-console-h: var(--c2-console);
  --ikh-console-w: var(--c2-consw);
  --ikh-log-h: calc(var(--c2-console) - 20px);
}
/* Filet : la feuille de Design pose box-sizing sur [class^="ikh-"] (classe ikh-* EN PREMIER).
   Si un jour une classe du site passe devant, la boite ne change pas de taille. */
[class*="ikh-"], [class*="ikh-"] *, [class*="ikh-"] *::before, [class*="ikh-"] *::after { box-sizing: border-box; }

/* ---------- grammaire commune : deux formes cliquables ---------- */
.plaque {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: #1a1208; background: linear-gradient(180deg, #f0d58f 0%, #d4a84a 45%, #a8742c 100%);
  border: 1px solid #5a2e0a; border-radius: 3px; padding: 6px 11px;
  box-shadow: inset 0 1px 0 rgba(255,246,219,.7), 0 2px 0 #5a2e0a, 0 3px 6px rgba(0,0,0,.5);
  cursor: var(--ikh-cur-main, pointer); white-space: nowrap; text-decoration: none; transition: filter .15s;
}
.plaque:hover { filter: brightness(1.12); }
.plaque:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,246,219,.5), 0 1px 0 #5a2e0a; }
.plaque:focus-visible, .lien:focus-visible, .c2-onglet:focus-visible, .c2-opacite input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.plaque.c2-grande { font-size: 13px; padding: 10px 18px; }
.lien {
  color: #f0c96a; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-thickness: 1px;
  cursor: var(--ikh-cur-main, pointer); background: none; border: 0; padding: 0; font: inherit;
}
.lien:hover { text-decoration-style: solid; }
.sortie::after { content: " \2197"; }          /* seule fleche du site : ca SORT */

/* ---------- mise en page : la carte prend tout ---------- */
html:has(#app.c2), body:has(#app.c2) { height: 100%; overflow: hidden; }
#app.c2 { display: block; height: 100vh; padding: 0; gap: 0; overflow: hidden; }
#app.c2 .map-viewport { position: fixed; inset: 0; border: 0; border-radius: 0; box-shadow: none; }
#app.c2 .map-viewport::before, #app.c2 .map-viewport::after { display: none; }

/* ---------- barre du haut (lot 5 : .ikh-topbar) ----------
   Les valeurs sont celles de Design (grille 1fr / 153 / 1fr, voile sombre plus leger). Elles
   sont redites ici parce que styles.css habille `header` (cadre cuivre, flex) : il faut la
   specificite de #app.c2 pour le neutraliser. Wiki a gauche, aligne sur le rail (meme bord,
   meme largeur) ; logo au centre ; clavier puis oeil a droite (.ikh-topbar__left / __right). */
#app.c2 header.c2-top {
  position: fixed; left: 0; right: 0; top: 0; height: var(--c2-top); z-index: 20;
  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));
  border: 0; border-radius: 0; pointer-events: none;
}
#app.c2 header.c2-top > * { pointer-events: auto; }
#app.c2 header.c2-top::before, #app.c2 header.c2-top::after { display: none; }
/* Le VRAI logo du site dans l'emplacement 153 x 65 (logo 1307 x 556 : 65 px de haut = 153 px de large). */
#app.c2 .logo-container { position: static; transform: none; display: block; }
#app.c2 .logo-img { position: static; transform: none; height: var(--ikh-logo-h); width: auto; display: block; }

/* Oeil (.ikh-eye) : toggleLabels() reecrit le contenu du bouton avec son ancienne icone pleine
   (sombre : invisible sur la plaque) et pose .active. On masque ce contenu et on dessine les deux
   icones de Design en masque CSS sur ::before, qui survit a la reecriture. .active = etiquettes
   masquees = l'etat .is-on de Design (icone barree, ambre). app.js n'est pas touche. */
#labels-toggle-btn > svg { display: none; }
#labels-toggle-btn {
  --c2-oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
#labels-toggle-btn.active {
  color: var(--ikh-amber);
  --c2-oeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5c1.7 0 3.2.5 4.5 1.2M21.5 12s-3.5 6.5-9.5 6.5c-1.7 0-3.2-.5-4.5-1.2'/%3E%3Cpath d='M4 20L20 4'/%3E%3C/svg%3E");
}
#labels-toggle-btn::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--c2-oeil) center / contain no-repeat; mask: var(--c2-oeil) center / contain no-repeat;
}
.ikh-keysbtn:focus-visible, .ikh-eye:focus-visible, .ikh-wiki:focus-visible, .ikh-railbtn:focus-visible, .ikh-chip:focus-visible, .ikh-notch:focus-visible, .ikh-keys__close:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* =====================================================================
   FAMILLE « HOLOGRAMME » : tiroir, log (et la fiche V2, plus bas).
   Noir froid translucide, halo laiton en haut, trame fine FIXE, quatre
   equerres aux coins (dessinees en degrades : aucun element en plus).
   ===================================================================== */
.c2-holo {
  --fond: .88;
  --eq: rgba(212,168,74,.9);
  position: fixed; display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(212,168,74,.11), transparent 58%),
    rgba(var(--c2-holo), var(--fond));
  box-shadow: inset 0 0 0 1px rgba(212,168,74,.16), 0 12px 32px rgba(0,0,0,.55);
}
.c2-holo::before {           /* trame */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(212,168,74,.035) 0 1px, transparent 1px 3px);
}
.c2-holo::after {            /* equerres */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--eq), var(--eq)) top left / 16px 2px, linear-gradient(var(--eq), var(--eq)) top left / 2px 16px,
    linear-gradient(var(--eq), var(--eq)) top right / 16px 2px, linear-gradient(var(--eq), var(--eq)) top right / 2px 16px,
    linear-gradient(var(--eq), var(--eq)) bottom left / 16px 2px, linear-gradient(var(--eq), var(--eq)) bottom left / 2px 16px,
    linear-gradient(var(--eq), var(--eq)) bottom right / 16px 2px, linear-gradient(var(--eq), var(--eq)) bottom right / 2px 16px;
  background-repeat: no-repeat;
}
.c2-holo > * { position: relative; z-index: 1; }
.c2-thead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 10px 16px; border-bottom: 1px solid rgba(212,168,74,.18); flex: none; }
.c2-grave { font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #d9b25c; text-shadow: 0 0 10px rgba(212,168,74,.35); }
.c2-grave::before { content: "\25C6  "; font-size: 8px; vertical-align: 2px; color: var(--brass); }
.c2-x { background: none; border: 1px solid rgba(212,168,74,.45); color: var(--brass); border-radius: 50%; width: 26px; height: 26px; cursor: var(--ikh-cur-main, pointer); flex: none; }
.c2-x:hover { border-color: var(--brass); color: #f0d58f; }
.c2-tbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 14px 10px 16px; }
.c2-tfoot { flex: none; padding: 10px 14px; border-top: 1px solid rgba(212,168,74,.18); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.c2-groupe { font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--copper); }
.c2-liens { display: flex; gap: 8px 16px; flex-wrap: wrap; margin: 6px 0 14px; }

/* ---------- rail (lot 5 : .ikh-rail / .ikh-railbtn) ----------
   Design dessine les plaques (taille, numero en coin, voyant, souligne, survol, actif) ; ici la
   position du rail seulement. .is-active est pose par c2.js : sur la plaque Log quand le log est
   deplie, sur More quand son tiroir est ouvert, sur les autres quand leur fenetre est ouverte.
   La hauteur du rail suit les variables de Design : plaques de 64 px, 54 px sous 861 px de haut. */
.c2-rail { position: fixed; left: var(--ikh-edge); top: calc(var(--c2-top) + 6px); width: var(--c2-rail); z-index: 20; display: flex; flex-direction: column; gap: 6px; }
@media (min-width: 768px) and (min-height: 861px) {
  :root { --c2-top: 76px; }   /* le Wiki (64 px) et le logo (65 px) gardent 6 px d'air en haut */
}
/* Ancien habit sombre a filet laiton : ne sert plus qu'aux deux boutons plats du bas (Help,
   About · Legal), que Design n'a pas redessines. Les plaques du rail en sont exclues. */
.c2-onglet:not(.ikh-railbtn) {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px; cursor: var(--ikh-cur-main, pointer);
  background: linear-gradient(180deg, rgba(34,30,24,.95), rgba(12,12,12,.95)); border: 1px solid rgba(212,168,74,.4); border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,220,150,.12), 0 2px 0 rgba(0,0,0,.6);
  color: var(--brass); font-family: 'Cinzel', serif; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; text-align: center;
}
.c2-onglet:not(.ikh-railbtn) svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.c2-onglet:not(.ikh-railbtn):hover { border-color: var(--brass); color: #f0d58f; }
.c2-onglet.c2-mobile { display: none; }
/* Marges laterales 4 -> 2 px : « CONSTRUCTION » en Spectral SC 13,5 px mesure 103,7 px (mesure au
   lot 5), plus que les 102 px que laissait la plaque de 112. A 106 px le mot tient, sans toucher
   a la police de Design. */
.c2-rail .ikh-railbtn { cursor: var(--ikh-cur-main, pointer); font: inherit; padding-left: 2px; padding-right: 2px; }

/* ---------- compteur Day · Tick (lot 5 : .ikh-clock, cadran a tambours) ----------
   Memes id qu'avant. tickTimer() bascule #horloge-ok / #horloge-ko par l'attribut hidden :
   #horloge-ok n'est qu'une enveloppe (display: contents), ses trois enfants sont les cases de la
   grille de Design ; cache, il redevient display:none. #horloge-ko prend alors toute la plaque. */
.c2-horloge-rail { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ikh-clock #horloge-ok:not([hidden]) { display: contents; }
.ikh-clock #horloge-ko {
  grid-column: 1 / -1; align-self: center; justify-self: stretch; white-space: normal; text-align: center;
  font: 10px/1.25 var(--ikh-font-mono); letter-spacing: .02em; text-transform: uppercase;
  color: var(--ikh-unread); border: 1px dashed #d98b2b; border-radius: 3px; padding: 2px 3px;
}
.ikh-clock #horloge-ko[hidden] { display: none; }
/* Lot 6 : barre du jour (.ikh-clock__scale / __progress, dessinee par Design). Nee masquee ;
   tickTimer() d'app.js la montre et pose --ikh-day-progress quand `debut` est lu. Horloge
   illisible : masquee aussi (la plaque dit « world clock unreadable », rien d'autre). */
.ikh-clock #horloge-jour[hidden], .ikh-clock #horloge-ok[hidden] ~ #horloge-jour { display: none; }
.c2-horloge-rail .nuit-badge { margin: 0; max-width: none; font-size: 9px; letter-spacing: 0; padding: 4px 5px; }

/* ---------- lanternes des habitantes (lot 5 : .ikh-lantern) ----------
   Generees par c2.js a partir des vraies donnees. Vides tant que rien n'est lu : pas de boite vide. */
.c2-lanternes:empty { display: none; }
/* Couleur par defaut : laiton. Les classes .who-* de Design (chargees apres, meme specificite) la
   remplacent pour les habitantes connues ; une habitante nouvelle aurait une lampe laiton, pas une
   lampe sans couleur. */
.ikh-lantern { --who: var(--ikh-brass); }
/* Mesure au lot 5 (Cinzel charge) : le nom le plus long, « VERMEIL », fait 71,5 px pour 75 px de
   place : les mesures de Design tiennent, rien a regler.
   Lot 6 (decision Pandore) : la ligne du modele et l'infobulle sont retirees ; il reste la lampe et
   le nom. c2.js ne genere plus .ikh-lantern__model (ses regles restent dans la feuille de Design,
   sans effet). Le modele est toujours affiche dans la fiche. */

/* ---------- tiroir : a la hauteur de son contenu, plus de rectangle vide ---------- */
.c2-tiroir {
  left: calc(10px + var(--c2-rail) + 10px); top: calc(var(--c2-top) + 6px); width: 380px;
  max-height: calc(100vh - var(--c2-top) - 6px - var(--c2-bas) - var(--c2-console) - 16px);
  z-index: 19; display: none; view-transition-name: c2-tiroir;
}
.c2-tiroir.show { display: flex; }
.c2-section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.c2-section[hidden] { display: none !important; }
/* contenus d'origine, recadres pour le tiroir */
.c2-tiroir .residents-list { gap: 2px; }
.c2-tiroir .resident { padding: 7px 4px; border-bottom: 1px solid rgba(212,168,74,.08); border-radius: 0; cursor: var(--ikh-cur-fleche, default); }
.c2-tiroir .resident:last-child { border-bottom: 0; }
.c2-tiroir .resident:hover { background: rgba(212,168,74,.05); }
.resident-actions { display: flex; gap: 14px; margin-top: 3px; font-family: 'Spectral', serif; font-size: 13px; }
.c2-tiroir .khf-rail { display: block; }
.c2-tiroir .khf-list { overflow: visible; }
.c2-tiroir .vote-panel { padding: 0; }

/* Largeur de la console (lot 4, gardee) : >= 1440 px, Help et About · Legal restent a cote de la
   console (ils ne bougent pas), donc console = ecran - 2 x (150 + 20), plafonnee a 1580. < 1440 :
   ils sont remontes au-dessus de la console, qui prend toute la largeur moins 10 px de chaque
   cote. Jamais plus large que l'ecran. (Design proposait ecran - 2 x 210 : Help et About · Legal
   font 150 px ici, la mesure du lot 4 est la bonne.)
   Lot 5 : --c2-cw et --c2-logc (colonnes calculees a la main) sont retirees ; les corbeaux font
   21 % de la console, bornes a 180-320 px, et le log prend le reste (flex de Design). */
:root { --c2-consw: min(1580px, calc(100vw - 340px)); }
@media (max-width: 1439px) { :root { --c2-consw: calc(100vw - 20px); } }

/* ---------- console de bord (lot 5 : .ikh-console) : Huginn | log | Muninn ----------
   Design dessine le cadre biseaute, les rivets, les blocs corbeaux, le log et l'encoche. Ici :
   la place de la console sur l'ecran, sa hauteur FIXE, et le raccord avec le JS du labo.
   #c2-console (id) : la feuille de Design dit `position: relative`, il faut plus fort qu'une classe.
   Centree par marges (plus de transform : il aurait fait de la console le repere du log sur mobile). */
#c2-console {
  position: fixed; left: 0; right: 0; bottom: var(--c2-bas); margin: 0 auto; z-index: 21;
  width: var(--c2-consw); height: var(--c2-console);
}
/* Corbeaux : la phrase est TOUJOURS entiere (regle des lots 3 et 4). Chez Design le bloc grandit
   quand la phrase est longue ; ici la console garde ses 132 px (Help, About · Legal, le bandeau
   cookies et le tiroir se reglent sur cette hauteur). La taille part donc de celle de Design
   (13 a 17 px selon la largeur du bloc) et ajusterCorbeau() de c2.js, GARDE, la reduit par
   demi-pixel jusqu'a ce que la phrase tienne.
   Lot 7 : JAMAIS de barre de defilement, a aucune taille. Le repli « elle defile » est retire :
   la phrase garde sa hauteur naturelle (flex: none, overflow visible, comme chez Design) et c'est
   ajusterCorbeau() qui compare cette hauteur a la place disponible. L'ancien `overflow-y: auto`
   fabriquait une fausse barre : la boite de ligne de Spectral italique est plus haute que
   l'interligne de 1,25 (elle depasse de 2-3 px en haut et de 0,3 a 1,8 px en bas, mesure au
   lot 7), donc le navigateur voyait un debordement alors que la phrase tenait, et la barre
   (10 px) retrecissait le texte, qui passait a la ligne de plus. */
#c2-console .ikh-raven { min-height: 0; }
#c2-console .ikh-raven__text { flex: 1 1 0; align-self: stretch; justify-content: center; min-height: 0; }
#c2-console .ikh-raven__name { flex: none; }
#c2-console .ikh-raven__line { flex: none; }
/* Lot 6 : une panne n'est pas un silence. data-etat est pose par app.js (renderRavensReports).
   attente (rien lu encore) : un tiret discret, portrait intact. illisible (lecture en echec ou rien
   au bout de 20 s) : « ? » ambre (.c2-muet, plus bas), portrait intact. Seul le vrai silence (lu,
   rien dit) porte .empty, dont c2.js fait .is-silent : portrait grise. */
#c2-console .ikh-raven__line[data-etat="attente"] { font: 16px/1 var(--ikh-font-mono); color: var(--ikh-cream-dim); }
#c2-console .ikh-raven__line[data-etat="illisible"] { font: 18px/1 var(--ikh-font-mono); }
/* Vrais bustes : cadres sur le haut du portrait, comme avant (background-position: 50% 25%). */
#c2-console .ikh-raven__portrait img { object-position: 50% 25%; }
/* Encoche Ravens : quand About · Legal est remonte au-dessus de la console (ecran < 1440 px), il
   occupe les 150 px de droite ; l'encoche passe a sa gauche. */
@media (max-width: 1439px) and (min-width: 768px) { #c2-console .ikh-notch { right: 164px; } }

/* ---------- Transmission Log (lot 5 : .ikh-tlog, enfant de la console) ----------
   #c2-log est le panneau (.ikh-tlog__panel) : ancre en bas de sa case, il se deplie VERS LE HAUT.
   c2.js pose .grand sur lui (comme avant) et .is-expanded sur son parent (l'etat de Design).
   Hauteur depliee : celle du lot 4 (66vh, sans jamais passer sous la barre du haut). */
#c2-log { text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.7); }   /* lisible meme quand le fond s'efface */
#c2-log.grand { height: min(66vh, calc(100vh - var(--c2-top) - 16px - var(--c2-bas) - 10px)); }
/* replie : curseur et Transmit n'existent qu'en grand */
#c2-log:not(.grand) .c2-opacite, #c2-log:not(.grand) .transmit-zone, #c2-log:not(.grand) .transmit-locked { display: none !important; }
#c2-log .transmit-zone, #c2-log .transmit-locked { flex: none; margin: 6px 0 4px; }
.c2-opacite { flex: none; display: flex; align-items: center; gap: 6px; color: var(--ikh-brass); cursor: var(--ikh-cur-main, pointer); }
.c2-opacite svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.c2-opacite svg path { fill: currentColor; }
.c2-opacite input { width: 74px; accent-color: var(--brass); cursor: var(--ikh-cur-main, pointer); }

/* Le fil est ecrit par app.js (classes fp-*, styles.css) : on ne touche pas a son HTML, on lui
   donne les mesures de la ligne de Design (.ikh-tlog__line) : nom en Cinzel a la couleur de
   l'habitante, type et heure en mono 12, texte en Spectral 15.5.
   Replie : UNE ligne de texte par entree, coupee par « … » (accepte, brief lot 5). Deplie : entier. */
#feed-messages { padding-right: 4px; }
#feed-messages .fp-ln, #feed-messages .fp-msg { padding: 3px 5px; border-bottom: 0; border-radius: 2px; }
#feed-messages .fp-ln { padding-left: 7px; }
#feed-messages .fp-ln:hover, #feed-messages .fp-msg:hover { background: rgba(255,191,0,.07); }
#feed-messages .fp-h, #feed-messages .fp-msg-h { display: flex; flex-direction: row; align-items: baseline; gap: 8px; margin-bottom: 1px; }
#feed-messages .fp-h { align-items: center; }
#feed-messages .fp-med { width: 18px; height: 18px; }
#feed-messages .fp-med svg { width: 11px; height: 11px; }
#feed-messages .fp-who, #feed-messages .fp-msg-who { font: 700 14px/1.2 var(--ikh-font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--c, var(--copper)); }
#feed-messages .fp-msg-who { display: flex; align-items: center; gap: 6px; }
#feed-messages .fp-msg-who::before { content: ""; width: 5px; height: 5px; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 6px currentColor; }
#feed-messages .fp-verb { font: 12px/1 var(--ikh-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ikh-cream-dim); }
#feed-messages .fp-time, #feed-messages .fp-msg-time, #feed-messages .fp-axr-t { margin-left: auto; font: 12px/1 var(--ikh-font-mono); color: var(--ikh-cream-dim); white-space: nowrap; }
#feed-messages .fp-desc, #feed-messages .fp-msg-body { padding-left: 11px; font: 15.5px/1.25 var(--ikh-font-text); color: var(--ikh-cream); }
#feed-messages .fp-ln.fp-look .fp-who { color: #8a6f42; }   /* consultation : un cran sous le geste, comme avant */
#c2-log:not(.grand) #feed-messages .fp-desc,
#c2-log:not(.grand) #feed-messages .fp-msg-body,
#c2-log:not(.grand) #feed-messages .fp-axr-b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#c2-log:not(.grand) #feed-messages .fp-desc + .ikx-enter { display: none; }   /* la pastille « enter » revient en grand */
/* Couleurs eclaircies de Design (Ocre, Indigo) : dans l'HABILLAGE seulement, donc ici, dans le log
   de la console. app.js pose la couleur d'origine en style (--c) ; on la remplace sur place. La
   carte, la grande fenetre Full log et Pressure Gauges gardent les couleurs d'origine. */
#feed-messages [style*="#1D4E89" i] { --c: var(--ikh-indigo) !important; }
#feed-messages [style*="#f4a261" i] { --c: var(--ikh-ocre) !important; }
/* Lot 9 (5 oct 2026) : separateurs du fil COMPACTS, replie comme deplie. « :: TICK REPORT :: »
   (.fp-ax, deux filets de 2 px et 8 px de marge haute et basse dans styles.css) et « TICK 92 »
   (.fp-tick) deviennent une seule ligne : un filet fin, le libelle pose dessus, 14 px de haut.
   Limite au log de la console (#c2-log) : la grande fenetre Full log garde son habit. */
#c2-log #feed-messages .fp-ax, #c2-log #feed-messages .fp-tick { flex: none; display: flex; align-items: center; gap: 8px; height: 14px; margin: 1px 0; padding: 0; }
#c2-log #feed-messages .fp-ax::before, #c2-log #feed-messages .fp-ax::after { position: static; flex: 1; height: 1px; left: auto; right: auto; background: linear-gradient(90deg, transparent, rgba(212,168,74,.6)); }
#c2-log #feed-messages .fp-ax::after { background: linear-gradient(90deg, rgba(212,168,74,.6), transparent); }
#c2-log #feed-messages .fp-ax-t { flex: none; font-size: 10px; line-height: 1; white-space: nowrap; }
#c2-log #feed-messages .fp-tick i { height: 1px; }
#c2-log #feed-messages .fp-tick span { line-height: 1; }

/* ---------- bas de l'ecran : Help a gauche, « About · Legal » a droite ----------
   Pas de barre. Deux boutons en miroir, au ras du bas et alignes sur le bas de la console.
   Lot 5 : Design ne les a pas redessines ; ils gardent l'ancien habit sombre a filet laiton
   (.c2-onglet:not(.ikh-railbtn), plus haut). Quand l'ecran est trop etroit pour qu'ils tiennent
   A COTE de la console, ils remontent juste au-dessus d'elle. La console ne bouge jamais. */
/* lot 2 bis : rectangles plats, une ligne, petite icone, EXACTEMENT la meme taille */
.c2-onglet.c2-plat { flex-direction: row; justify-content: center; gap: 8px; height: 32px; width: var(--c2-platw); padding: 0 10px; font-size: 10px; letter-spacing: .12em; white-space: nowrap; box-sizing: border-box; }
.c2-onglet.c2-plat svg { width: 14px; height: 14px; flex: none; }
.c2-onglet.c2-help  { position: fixed; left: 10px;  bottom: var(--c2-bas); width: var(--c2-platw); z-index: 20; }
.c2-onglet.c2-about { position: fixed; right: 10px; bottom: var(--c2-bas); width: var(--c2-platw); z-index: 20; }
@media (max-width: 1439px) {   /* 1100 (console) + 2 x (150 + 20) */
  .c2-onglet.c2-help, .c2-onglet.c2-about { bottom: calc(var(--c2-bas) + var(--c2-console) + 8px); }
}
/* le dirigeable decoratif partait de top:80px, left:-100px : pile sur le premier bouton du
   rail, toutes les 45 s. Sa trajectoire passe desormais au milieu de la carte. */
body:has(#app.c2) .flying-airship { top: 34vh; left: calc(10px + var(--c2-rail) + 10px);   /* part APRES le rail, invisible au depart (opacite 0) */
}
.c2-renvoi { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 12px 4px; font-family: 'Spectral', serif; font-size: 15px; line-height: 1.5; color: var(--cream); }

/* ---------- bandeau cookies : pose AU-DESSUS de la console, sans rien cacher ----------
   Son style est en ligne dans index.html (pleine largeur, colle en bas) : on le
   surcharge ici. Il reste lisible et cliquable ; la console, Help et « About · Legal »
   restent visibles dessous. JS inchange (acceptCookies / refuseCookies). */
body:has(#app.c2) #cookie-banner {
  left: 50% !important; right: auto !important; bottom: calc(var(--c2-bas) + var(--c2-console) + 34px) !important;
  transform: translateX(-50%); width: min(740px, calc(100vw - 20px)) !important; box-sizing: border-box;
  padding: 12px 18px !important; gap: 14px !important; font-size: 12.5px !important;
  border: 1px solid rgba(212,168,74,.5) !important; border-radius: 6px;
  background: rgba(8,9,10,.95) !important;
}
body:has(#app.c2) #cookie-banner button { padding: 8px 16px !important; font-size: 11px !important; }

/* ---------- panneau Help : quatre vrais boutons ---------- */
.c2-aide { display: flex; flex-direction: column; gap: 8px; }
.c2-carte-aide {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  text-align: left; cursor: var(--ikh-cur-main, pointer); padding: 11px 12px; border-radius: 4px;
  background: linear-gradient(180deg, rgba(40,33,22,.9), rgba(16,15,13,.9));
  border: 1px solid rgba(212,168,74,.35); box-shadow: inset 0 1px 0 rgba(255,220,150,.1), 0 2px 0 rgba(0,0,0,.6);
  color: var(--cream); transition: border-color .15s, filter .15s;
}
.c2-carte-aide:hover { border-color: var(--brass); filter: brightness(1.1); }
.c2-carte-aide:active { transform: translateY(1px); }
.c2-carte-aide:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.c2-ca-icone { grid-row: 1 / span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(212,168,74,.55); color: var(--brass); font-size: 16px; }
.c2-ca-nom { font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #e9c879; }
.c2-ca-desc { font-family: 'Spectral', serif; font-style: italic; font-size: 13px; color: var(--copper); }
.c2-carte-aide:not(:has(.c2-ca-desc)) .c2-ca-nom { grid-row: 1 / span 2; }
/* « pas encore lu » (—) et « jamais arrive » (?) ne se confondent pas : voir c2.js */
.c2-muet { color: #f0b35e !important; cursor: help; }

/* ---------- panneau Keyboard (lot 5 : .ikh-keys) ----------
   Design le pose a z-index 85 : au-dessus de tout l'habillage (#app est un contexte d'empilement
   a z-index 1), sous les fenetres du site. c2.js ferme ce qui est ouvert avant de l'afficher.
   Pas de bouton clavier sur mobile (pas de clavier). Rien a regler ici : tout est chez Design. */
/* Onglet Keybindings du panneau Help : la MEME liste, copiee par c2.js (voir index.html). */
.c2-liste-aide { max-width: 560px; font-family: 'Spectral', serif; font-size: 15px; color: var(--copper); }
.c2-liste-aide .ikh-klist { color: var(--ikh-cream); }

/* ---------- accueil (ex-splash) ---------- */
#splash .c2-accueil { max-width: 620px; text-align: center; padding: 26px; display: flex; flex-direction: column; align-items: center; }
#splash .splash-logo { max-width: min(460px, 84vw); animation: none; }   /* plus de pulsation en boucle */
#splash .c2-phrase { display: block; font-family: 'Spectral', serif; font-style: italic; quotes: none; font-size: 23px; line-height: 1.4; color: var(--cream); margin: 20px 0 0; }
#splash p { margin: 12px 0 22px; font-size: 12px; }
#splash .c2-hint { margin-top: 16px; font-family: 'Spectral', serif; font-size: 13px; color: var(--copper); }

/* =====================================================================
   FICHE D'HABITANTE V2 « Hologramme » - meme famille que les tiroirs,
   aux couleurs de l'habitante (--fe-c).
   ===================================================================== */
@keyframes feAllume { from { clip-path: inset(50% 0 50% 0); opacity: .2; } 60% { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(0 0 0 0); } }
#app.c2 .fiche-entite:not(.fiche-entite--centre) {
  --fe-c: var(--brass);
  /* Lot 6 : a GAUCHE, a cote du rail, au meme emplacement que le tiroir (meme left, meme top que
     .c2-tiroir, donc meme hauteur de depart que le rail). Elle s'arrete au-dessus de la console
     (meme calcul que le tiroir) et ne recouvre plus la minimap. Un seul des deux ouvert : c2.js. */
  top: calc(var(--c2-top) + 6px); left: calc(10px + var(--c2-rail) + 10px); right: auto;
  width: 340px; min-width: 0; max-width: none; min-height: 0;
  max-height: calc(100vh - var(--c2-top) - 6px - var(--c2-bas) - var(--c2-console) - 16px); overflow: auto;
  padding: 18px 20px 16px;
  background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--fe-c) 16%, transparent), transparent 60%), rgba(var(--c2-holo), .86);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-radius: 0;
  box-shadow: inset 0 0 40px color-mix(in srgb, var(--fe-c) 10%, transparent), 0 10px 30px rgba(0,0,0,.55);
  font-family: 'Spectral', serif; color: var(--cream);
}
#app.c2 .fiche-entite:not(.fiche-entite--centre)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--fe-c) 7%, transparent) 0 1px, transparent 1px 3px);
}
/* Ecran < 1440 px : Help est remonte au-dessus de la console (x 10 a 160, 40 px de haut marge
   comprise) et mordrait de 28 px sur le bas d'une fiche longue : elle s'arrete au-dessus de lui. */
@media (max-width: 1439px) and (min-width: 768px) {
  /* Lot 7 : meme limite pour le tiroir, qui partage cet emplacement (un tiroir long passait sous Help). */
  .c2-tiroir { max-height: calc(100vh - var(--c2-top) - 6px - var(--c2-bas) - var(--c2-console) - 48px); }
  #app.c2 .fiche-entite:not(.fiche-entite--centre) { max-height: calc(100vh - var(--c2-top) - 6px - var(--c2-bas) - var(--c2-console) - 48px); }
}
#app.c2 .fiche-entite.show:not(.fiche-entite--centre) { animation: feAllume .32s ease-out 1; }
.fe-eq { position: absolute; width: 16px; height: 16px; border: 0 solid var(--fe-c, var(--brass)); opacity: .9; pointer-events: none; }
.fe-eq.a { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.fe-eq.b { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.fe-eq.c { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.fe-eq.d { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.fiche-entite--centre .fe-eq { display: none; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-close { top: 8px; right: 10px; z-index: 2; border: 1px solid color-mix(in srgb, var(--fe-c) 60%, transparent); border-radius: 50%; width: 26px; height: 26px; font-size: 15px; color: var(--fe-c); }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-sprite {
  float: left; width: 56px; height: 84px; object-fit: contain; margin: 0 14px 6px 0; image-rendering: auto;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--fe-c) 70%, transparent));
}
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-titre {
  text-align: left; font-family: 'Cinzel', serif; font-weight: 900; font-size: 24px; letter-spacing: .12em; line-height: 1.1; text-transform: uppercase;
  color: var(--fe-c); text-shadow: 0 0 12px color-mix(in srgb, var(--fe-c) 60%, transparent); margin: 18px 0 4px;
}
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-soustitre {
  text-align: left; font-family: 'Share Tech Mono', monospace; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--copper); margin: 0 0 8px;
}
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-champs { clear: both; position: relative; padding: 4px 0 0 16px; max-height: none; overflow: visible; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-champs::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 4px; width: 1px; background: linear-gradient(var(--fe-c), transparent); }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-tick {
  position: relative; text-align: left; border: 0; margin: 10px 0 3px; padding: 0;
  font-family: 'Share Tech Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--copper); text-transform: lowercase;
}
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-tick::before { content: ""; position: absolute; left: -16px; top: 3px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--fe-c); background: #0d0a06; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe { font-family: 'Cinzel', serif; font-size: 13px; letter-spacing: .1em; color: var(--cream); padding: 3px 0; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe::before { content: "\203A  "; color: var(--fe-c); }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe.fail { color: #ff9a9f; background: rgba(230,57,70,.13); padding-left: 6px; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe.fail::before { content: ""; }
/* vide REEL : discret. Panne : signalee comme telle, jamais confondue avec le vide. */
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe.vide { font-family: 'Spectral', serif; font-style: italic; color: var(--copper); letter-spacing: 0; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe.vide::before { content: ""; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe.panne { font-family: 'Share Tech Mono', monospace; letter-spacing: .04em; color: #f0b35e; border: 1px dashed #d98b2b; border-radius: 3px; padding: 6px 8px; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-verbe.panne::before { content: "\26A0  "; color: #f0b35e; }
#app.c2 .fiche-entite:not(.fiche-entite--centre) .fiche-entite-champ { border-top-color: color-mix(in srgb, var(--fe-c) 25%, transparent); }

/* View Transitions : ouverture du tiroir, courte */
::view-transition-group(c2-tiroir) { animation-duration: .24s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
  :root { --c2-top: 58px; --c2-console: 96px; }
  html:has(#app.c2), body:has(#app.c2) { height: 100%; overflow: hidden; }
  #app.c2 { display: block; height: 100vh; padding: 0; min-height: 0; }
  #app.c2 .map-viewport { min-height: 0; }
  /* Lot 5 : Design n'a rien fourni pour le mobile. Le comportement est celui d'avant (rail en barre
     d'onglets en bas, console a deux corbeaux, log en grand seulement, lanternes dans More), avec le
     nouvel habit la ou il tient. Les mesures ci-dessous sont les anciennes, reportees sur les .ikh-*. */
  html:root { --ikh-portrait-w: 44px; --ikh-portrait-h: 54px; }
  #app.c2 header.c2-top { grid-template-columns: auto 1fr auto; padding: 0 8px; gap: 6px; min-height: 0; }
  #app.c2 .logo-container { justify-self: center; width: auto; height: auto; }
  #app.c2 .logo-img { height: 47.5px; }   /* lot 4 : 38 -> 47.5 px (+25 %) : 112 px de large, tient entre Wiki et l'oeil des 320 px */
  /* Wiki : une ligne (medaillon + « WIKI »), 38 px ; le compteur est juste dessous. */
  #app.c2 .ikh-wiki { width: auto; height: 38px; flex-direction: row; gap: 7px; padding: 0 9px 0 7px; }
  #app.c2 .ikh-wiki__medal { width: 20px; height: 20px; }
  #app.c2 .ikh-wiki__medal .ikh-ico { width: 12px; height: 12px; }
  #app.c2 .ikh-wiki__label b { font-size: 12px; }
  #app.c2 .ikh-wiki__label span { display: none; }
  #c2-touches { display: none; }   /* pas de bouton clavier sur mobile */
  #app.c2 header.c2-top .plaque { font-size: 9.5px; padding: 5px 7px; }
  .c2-onglet.c2-help, .c2-onglet.c2-about, .c2-onglet.c2-bureau { display: none; }   /* sur mobile, l'onglet « More » les regroupe */
  body:has(#app.c2) #cookie-banner { bottom: calc(var(--c2-console) + 70px) !important; width: calc(100vw - 12px) !important; flex-wrap: wrap; }
  /* Rail : barre d'onglets en bas. Cinq plaques (Enter Khora, Log, Publications, Votes, More), sans
     numero (pas de clavier) ni fleche d'actif (elle pointait vers un panneau a droite). */
  /* #app.c2 devant : .ikh-rail (Design, charge apres) dit « colonne de 112 px » a specificite egale. */
  #app.c2 .c2-rail { left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 60px; flex-direction: row; gap: 4px; padding: 4px; background: rgba(8,9,10,.97); border-top: 1px solid rgba(212,168,74,.35); }
  .c2-rail .ikh-railbtn { width: auto; height: 100%; flex: 1 1 0; min-width: 0; gap: 2px; padding: 0 1px 4px; }
  .c2-rail .ikh-railbtn .ikh-ico { width: 18px; height: 18px; }
  .c2-rail .ikh-railbtn__label { font-size: 9px; }   /* « PUBLICATIONS » dans un onglet de 73 px (ecran de 390) */
  .c2-rail .ikh-railbtn__key { display: none; }
  .c2-rail .ikh-railbtn::after, .c2-rail .ikh-railbtn.is-active::after { left: 12px; right: 12px; top: auto; bottom: 3px; width: auto; height: 2px; border: 0; border-radius: 1px; transform: none; background: var(--accent); }
  .c2-onglet.c2-mobile { display: flex; }
  .c2-rail .c2-lanternes { display: none; }   /* sur mobile, les lanternes sont dans More */
  .c2-aide .c2-lanternes { width: 100%; margin: 0 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Compteur Day · Tick (sorti du rail, qui est en bas sur mobile) : juste sous le Wiki, en haut a gauche */
  .c2-horloge-rail { position: fixed; top: calc(var(--c2-top) + 4px); left: 8px; width: var(--c2-rail); z-index: 20; }
  /* Console : deux corbeaux cote a cote. Le log n'y a pas de place : sa case ne prend rien, et le
     panneau n'existe qu'en grand (onglet Log), en plein ecran entre le compteur et la console. */
  #c2-console { left: 6px; right: 6px; width: auto; margin: 0; bottom: 64px; padding: 8px 10px; gap: 4px; min-height: 0; }
  #c2-console .ikh-raven { flex: 1 1 0; width: auto; min-width: 0; max-width: none; padding: 4px; gap: 6px; }
  #c2-console .ikh-raven__name { font-size: 10px; letter-spacing: .14em; }
  #c2-console .ikh-raven__line { font-size: 11.5px; line-height: 1.3; }
  #c2-console .ikh-notch { right: 20px; }
  #c2-tlog { position: static; flex: none; width: 0; height: 0; }
  #c2-log { display: none; }
  #c2-log.grand { display: flex; position: fixed; z-index: 3; left: 6px; right: 6px; top: calc(var(--c2-top) + 56px); bottom: calc(var(--c2-console) + 96px); height: auto; }
  .c2-tiroir { left: 6px; right: 6px; width: auto; top: auto; bottom: calc(var(--c2-console) + 96px); max-height: 56vh; }
  #app.c2 .fiche-entite:not(.fiche-entite--centre) { left: 6px; right: 6px; width: auto; top: calc(var(--c2-top) + 56px); max-height: calc(100vh - var(--c2-top) - var(--c2-console) - 156px); }   /* sous le compteur (4 + 46 + 6) */
  #splash .c2-phrase { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  /* (lot 3 : cadrans supprimes) */
  #c2-log { transition: none; }
  #app.c2 .fiche-entite.show:not(.fiche-entite--centre) { animation: none; }
  ::view-transition-group(*) { animation-duration: 0s !important; }
}