/* ============================================================
   OBSERVATOIRE (03/10) — la refonte « direction 2b ».
   Chargée sur toutes les pages, après base.css, dont elle reprend
   les tokens. Header, footer, seuil de Kora, puis une section par
   écran : accueil (.obs-home), Lire (.obs-lire), État de Kora
   (.obs-etat), pages annexes (.obs-page).
   Rayon 0 partout (sauf pastilles), pas d'ombre (sauf la barre
   d'instrument de l'article). Mono jamais sous 12 px.
   Les largeurs et positions calculées (astres, frise, barres) ne
   sont jamais inline : constellation.css et etat-barres.css sont
   GÉNÉRÉES au build depuis la collection et koraEtat.json.
   ============================================================ */

:root {
  --surface: #0A0E15;            /* surface relevée (survol) */
  --panel: #080B11;              /* panneaux */
  --card-float: rgba(9, 13, 20, .92);
  --rule: rgba(150, 170, 200, .16);
  --rule-list: rgba(150, 170, 200, .12);
  --rule-btn: rgba(150, 170, 200, .34);
  --kora: var(--v-quotidien);    /* Kora parle en cyan, toujours */
  --cold-orb: #788CAA;
  --irreversible: #F87171;
  --o0: #E9A544;                 /* orbite intérieure — la thèse */
  --o1: #6FC9E4;                 /* orbite médiane — outils et terrain */
  --o2: #C2CCDA;                 /* orbite extérieure — analyses, études */
}

a:hover { color: var(--accent-light); }

/* Les écrans Observatoire repartent d'un reset : base.css donne une marge
   basse à tous les <p> et une taille à tous les titres. */
.obs :where(p, h1, h2, h3, h4, figure, ol, ul, blockquote, dl, dd) { margin: 0; padding: 0; }
.obs :where(h1, h2, h3) { line-height: 1.1; font-weight: 400; color: var(--text-primary); }
.obs :where(ol, ul) { list-style: none; }

/* atomes communs */
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--kora { color: var(--kora); }
.eyebrow--accent { color: var(--accent); }
.eyebrow--jeu { color: var(--v-jeu); }
.dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.o0 { --oc: var(--o0); --oc-glow: rgba(233, 165, 68, .4); }
.o1 { --oc: var(--o1); --oc-glow: rgba(111, 201, 228, .4); }
.o2 { --oc: var(--o2); --oc-glow: rgba(194, 204, 218, .4); }
.c-local { background: var(--v-quotidien); }
.c-cloud { background: var(--accent); }
.c-web { background: var(--v-jeu); }
.t-local { color: var(--v-quotidien); }
.t-cloud { color: var(--accent); }
.t-web { color: var(--v-jeu); }
.t-muted { color: var(--text-muted); }
.t-red { color: var(--irreversible); }

/* grille à filets : gap 1px sur fond de filet, cellules couleur page */
.filets { display: grid; gap: 1px; background: var(--rule); }
.filets > * { background: var(--bg-page); }

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 7, 11, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-list);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: var(--header-h);
  padding: 8px 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.site-header__left { display: flex; align-items: center; gap: 20px; }
.site-header__logo {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.site-header__logo:hover { color: var(--text-primary); }
.site-header__logo span { color: var(--accent); }

.kora-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 4px;
  border: 1px solid rgba(111, 201, 228, .35);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color var(--transition-fast);
}
.kora-chip:hover { border-color: var(--kora); }
.kora-chip canvas { display: block; width: 24px; height: 24px; }
.kora-chip span { font-family: var(--font-mono); font-size: 12px; line-height: 1; color: var(--kora); }

.site-nav {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-width: 0;
}
.site-nav__main {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto;          /* centré entre le logo et la droite, comme un space-between à trois */
  font-size: 14.5px;
  white-space: nowrap;
}
.site-nav__side {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  white-space: nowrap;
}
.site-nav a { color: var(--text-muted); padding: 2px 0; transition: color var(--transition-fast); }
.site-nav a:hover { color: var(--text-primary); }
.site-nav__main a.active { color: var(--text-primary); box-shadow: 0 1px 0 var(--accent); }
.site-nav__side a.active { color: var(--text-primary); }
.site-nav .site-nav__kairos, .site-nav .site-nav__kairos.active { color: var(--accent); }
.site-nav .site-nav__kairos:hover { color: var(--accent-light); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle svg { display: block; width: 24px; height: 24px; stroke: var(--text-primary); }

@media (max-width: 900px) {
  .site-header__inner { flex-wrap: nowrap; padding: 8px 20px; }
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--rule);
  }
  .site-nav.open { display: flex; }
  .site-nav__main, .site-nav__side { flex-direction: column; align-items: flex-start; margin: 0; gap: 14px; font-size: 16px; }
}
@media (max-width: 420px) {
  .site-header__left { gap: 12px; }
  .kora-chip span { display: none; }
  .kora-chip { padding: 3px; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 64px 40px;
  border-top: 1px solid rgba(150, 170, 200, .14);
  text-align: left;
}
.site-footer p { margin: 0; }
.site-footer__formula {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1.3;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: .02em;
  margin-bottom: 4px !important;
}
.site-footer__formula sub { font-size: 22px; }
.site-footer__entre { text-align: center; font-size: 14.5px; color: var(--text-muted); margin-bottom: 56px !important; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(150, 170, 200, .14);
}
.site-footer__brand p { font-size: 16px; color: var(--text-primary); }
.site-footer__brand .site-footer__tag { font-size: 14.5px; color: var(--text-muted); }
.site-footer__col { display: grid; gap: 6px; align-content: start; font-size: 14.5px; }
.site-footer__col a { color: var(--text-secondary); }
.site-footer__col a:hover { color: var(--text-primary); }
.site-footer__head {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px !important;
}
.site-footer__col--kora .site-footer__head { color: var(--kora); }
.site-footer__col--site .site-footer__head { color: var(--text-muted); }
.site-footer__copy { font-size: 14px; color: var(--text-muted); margin-top: 36px !important; }

@media (max-width: 900px) {
  .site-footer { padding: 56px 20px 32px; }
  .site-footer__formula { font-size: 30px; }
  .site-footer__formula sub { font-size: 17px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ============================================================
   LE SEUIL DE KORA — repris dans la grammaire Observatoire :
   étiquette mono cyan, filet gauche 1px cyan.
   ============================================================ */

.kora-seuil {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  max-width: 700px;
  margin: 0;
  padding: 14px 18px;
  border-left: 1px solid var(--kora);
}
.kora-seuil--compact { margin: 32px 0 0; }   /* pages non refondues : sous le header sticky */
.kora-seuil .kora-seuil__who {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kora);
  margin: 0;
}
.kora-seuil .kora-seuil__said p { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 .5em; }
.kora-seuil .kora-seuil__said p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .kora-seuil { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   ACCUEIL · OBSERVATOIRE
   ============================================================ */

/* 1. La scène : 1280×960 (03/10 — 860 dans la passation : la fiche recouvrait la légende),
   mise à l'échelle par site.js (min(vw/1280, 1.3)).
   Sans JS : à l'échelle 1, centrée. */
.obs-scene { position: relative; height: 960px; overflow: hidden; }
.obs-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1280px;
  height: 960px;
  transform: translateX(-50%);
  transform-origin: 0 0;
}
.obs-stage.is-scaled { left: 0; }
.obs-stage > canvas { position: absolute; inset: 0; display: block; width: 1280px; height: 960px; }
/* le texte en colonne à gauche : l'intro, puis la fiche — jamais l'une sur l'autre */
.obs-colonne { position: absolute; left: 24px; top: 40px; z-index: 3; width: 420px; display: grid; gap: 16px; }
.obs-astres { position: absolute; inset: 0; z-index: 2; }
.astre {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--oc);
  box-shadow: 0 0 10px var(--oc-glow);
  transition: box-shadow .3s;
}
.astre.is-active, .astre:focus-visible {
  box-shadow: 0 0 0 5px rgba(238, 242, 248, .18), 0 0 22px var(--oc);
  outline: none;
}
.astre__titre {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  text-shadow: 0 1px 8px var(--bg-page);
}
.astre.is-active .astre__titre, .astre:focus-visible .astre__titre { opacity: 1; }

.obs-intro {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: rgba(5, 7, 11, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.obs-intro .eyebrow { font-weight: 500; letter-spacing: .18em; color: var(--kora); }
.obs-intro h1 {
  font-family: var(--font-sans);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.obs-intro h1 em { font-style: italic; color: var(--kora); }
.obs-intro__said { font-size: 16px; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
.obs-legende { display: grid; gap: 7px; margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }
.obs-legende li { display: flex; gap: 10px; align-items: center; line-height: 1.5; }
.obs-legende li .dot { background: var(--oc); }
.obs-legende li:last-child { color: var(--text-light); }

.obs-fiche {
  width: 400px;
  margin-left: 24px;
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  background: var(--card-float);
  border: 1px solid rgba(150, 170, 200, .2);
}
.obs-fiche__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--oc); }
.obs-fiche__titre { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; color: var(--text-primary); }
.obs-fiche__desc { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.obs-fiche__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px !important;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
}

/* 2. La frise des publications */
.obs-frise { position: relative; height: 200px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.obs-frise__titre { position: absolute; left: 64px; top: 22px; }
.obs-frise__base { position: absolute; left: 64px; right: 64px; top: 130px; height: 1px; background: rgba(150, 170, 200, .3); }
.obs-frise__graduations { position: absolute; left: 64px; right: 64px; top: 0; bottom: 70px; }
.tick {
  position: absolute;
  bottom: 0;
  width: 3px;
  background: var(--oc);
  transition: height .2s;
}
.tick::before { content: ""; position: absolute; inset: 0 -4px; }   /* zone de survol plus large que 3 px */
.tick.is-active, .tick:focus-visible { height: 40px !important; background: var(--text-primary); outline: none; }
.obs-frise__mois {
  position: absolute;
  left: 64px;
  right: 64px;
  top: 142px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-light);
}

/* sections du bas de l'accueil */
.obs-section { max-width: 1200px; margin: 0 auto; padding: 96px 32px 0; }
.obs-section--large { max-width: 1280px; }
.obs-section--fin { padding-bottom: 112px; }
.obs-h2 { font-family: var(--font-serif); font-weight: 400; font-size: 48px; line-height: 1.08; color: var(--text-primary); }

/* 3. Captures de Choragos — grille bento */
.obs-captures__tete { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 28px; }
.obs-captures__tete > div { display: grid; gap: 10px; }
.obs-captures__note { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); text-align: right; max-width: 420px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 8px; }
.bento figure { position: relative; overflow: hidden; background: var(--surface); }
.bento figure:first-child { grid-column: span 2; grid-row: span 2; }
.bento figure.bento__large { grid-column: span 2; }   /* une capture large (capturesKora.json : "large") */
.bento img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bento figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 14px 10px;
  background: linear-gradient(transparent, rgba(5, 7, 11, .92));
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
}
.bento figure:first-child figcaption { padding: 28px 18px 14px; font-size: 12.5px; }

/* 4. Relevé + ce que je ne sais pas faire */
.obs-releve { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.obs-releve__said { display: grid; gap: 18px; align-content: start; }
.obs-releve__said > p:not(.eyebrow):not(.barre-legende) { font-size: 17px; line-height: 1.7; color: var(--text-secondary); text-wrap: pretty; }
.obs-releve__said b, .chiffre { color: var(--text-primary); font-weight: 500; }
.obs-releve__lien { justify-self: start; font-size: 16px; border-bottom: 1px solid var(--accent); }

.barre { display: flex; gap: 2px; height: 10px; }
.barre > span { display: block; min-width: 0; }
.barre--30 { height: 30px; }
.barre--22 { height: 22px; }
.barre-legende { display: flex; flex-wrap: wrap; gap: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.obs-manques { display: grid; align-content: start; padding: 28px 30px; background: var(--panel); border: 1px solid var(--rule); }
.obs-manques__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 16px !important; }
.obs-manques__tete .dot { background: var(--cold-orb); }
.obs-manques article { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--rule); }
.obs-manques article:last-child { padding-bottom: 0; }
.obs-manques h3 { font-family: var(--font-sans); font-size: 19px; font-weight: 500; letter-spacing: -.01em; line-height: 1.4; }
.obs-manques article p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* 5. Où aller ensuite — portes à filets */
.obs-portes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.porte { display: grid; gap: 8px; align-content: start; padding: 28px; color: inherit; transition: background var(--transition-fast); }
.porte:hover { background: var(--surface); color: inherit; }
.porte__type { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.porte__type--kora { color: var(--kora); }
.porte__type--jeu { color: var(--v-jeu); }
.porte strong { font-family: var(--font-serif); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--text-primary); }
.porte__desc { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }

/* La liste « Lire » remplace la scène sous 700 px (pas de constellation sur mobile) */
.obs-home__liste { display: none; }
@media (max-width: 700px) {
  .obs-scene { display: none; }
  .obs-home__liste { display: block; padding: 40px 20px 0; }
  .obs-home__liste .obs-intro-mobile { display: grid; gap: 14px; margin-bottom: 24px; }
  .obs-home__liste h1 { font-family: var(--font-sans); font-size: 32px; line-height: 1.1; letter-spacing: -.03em; }
  .obs-home__liste h1 em { font-style: italic; color: var(--kora); }
  .obs-frise__mois span:nth-child(even) { visibility: hidden; }
}
@media (max-width: 900px) {
  .obs-section { padding: 72px 20px 0; }
  .obs-section--fin { padding-bottom: 80px; }
  .obs-h2 { font-size: 36px; }
  .obs-captures__tete { flex-direction: column; align-items: start; }
  .obs-captures__note { text-align: left; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
  .obs-releve { grid-template-columns: 1fr; gap: 48px; }
  .obs-portes { grid-template-columns: 1fr; }
  .obs-frise__titre { left: 20px; }
  .obs-frise__base, .obs-frise__graduations, .obs-frise__mois { left: 20px; right: 20px; }
}

/* ============================================================
   LIRE
   ============================================================ */

.obs-lire {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 48px 112px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 64px;
}
.obs-lire h1 { font-family: var(--font-serif); font-size: 88px; line-height: 1; margin-bottom: 10px; }
.obs-lire__sous { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); margin-bottom: 32px !important; }
.onglets { display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 15px; border-bottom: 1px solid var(--rule); }
.onglet {
  background: none;
  border: 0;
  padding: 0 0 12px;
  font: inherit;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.onglet:hover { color: var(--text-primary); }
.onglet[aria-pressed="true"] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--accent); }
.onglet span { font-family: var(--font-mono); font-size: 12px; color: var(--text-light); }

.ligne {
  display: grid;
  grid-template-columns: 14px 104px minmax(0, 1fr) 150px;
  gap: 20px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-list);
  color: inherit;
  transition: background var(--transition-fast);
}
.ligne:hover { background: rgba(150, 170, 200, .04); color: inherit; }
.ligne[hidden] { display: none; }
.ligne .dot { align-self: center; background: var(--oc); }
.ligne__date { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.ligne__corps { display: grid; gap: 4px; }
.ligne__titre { font-family: var(--font-serif); font-size: 31px; line-height: 1.15; color: var(--text-primary); }
.ligne__desc { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.ligne__meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); text-align: right; white-space: nowrap; }

.obs-marge { padding-left: 24px; border-left: 1px solid rgba(111, 201, 228, .3); }
.obs-marge__colle { position: sticky; top: 96px; display: grid; gap: 18px; align-content: start; }
.obs-marge canvas { display: block; width: 256px; height: 200px; }
.obs-marge__qui { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--kora); }
.obs-marge__said { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.obs-marge a { font-family: var(--font-mono); font-size: 12.5px; }

@media (max-width: 900px) {
  .obs-lire { grid-template-columns: 1fr; padding: 48px 20px 80px; gap: 48px; }
  .obs-lire h1 { font-size: 64px; }
  .obs-marge { order: -1; }
  .obs-marge__colle { position: static; }
  .obs-marge canvas { display: none; }
  .ligne { grid-template-columns: 14px minmax(0, 1fr); gap: 6px 14px; }
  .ligne__date, .ligne__meta { grid-column: 2; text-align: left; }
  .ligne__corps { grid-column: 2; grid-row: 2; }
  .ligne__meta { grid-row: 3; }
  .ligne__titre { font-size: 26px; }
}

/* ============================================================
   ÉTAT DE KORA
   ============================================================ */

.obs-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.obs-hero > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.obs-hero--etat { height: 560px; }
.obs-hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.obs-hero__texte { max-width: 560px; display: grid; gap: 18px; }
.obs-hero__texte h1 { font-family: var(--font-serif); font-size: 84px; line-height: .98; }
.obs-hero__texte .obs-hero__said { font-size: 17px; line-height: 1.65; color: var(--text-secondary); }
.obs-hero__texte .obs-hero__meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }

.etat-captures { max-width: 1200px; margin: 0 auto; padding: 72px 32px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.etat-captures figure { display: grid; gap: 8px; align-content: start; }
.etat-captures figure > div { aspect-ratio: 2000 / 1100; overflow: hidden; background: var(--surface); }
.etat-captures img { display: block; width: 100%; height: 100%; object-fit: cover; }
.etat-captures figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.etat-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 32px 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 64px;
}
.etat-section--fin { padding-bottom: 112px; }
.etat-section__tete { display: grid; gap: 12px; align-content: start; }
.etat-section__tete .eyebrow { color: var(--accent); }
.etat-section__tete h2 { font-family: var(--font-serif); font-size: 40px; line-height: 1.1; }
.etat-section__tete p:not(.eyebrow) { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.etat-pile { display: grid; gap: 30px; align-content: start; }
.etat-bloc { display: grid; gap: 10px; }
.etat-bloc__titre { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.etat-bloc .barre-legende { gap: 22px; font-size: 12.5px; }

.cap-lignes { display: grid; gap: 26px; align-content: start; }
.cap-ligne { display: grid; grid-template-columns: 120px minmax(0, 1fr) 140px; gap: 18px; align-items: center; }
.cap-ligne__nom { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.cap-ligne__nom--recherche { color: var(--v-recherche); }
.cap-ligne__nom--quotidien { color: var(--v-quotidien); }
.cap-ligne__nom--jeu { color: var(--v-jeu); }
.cap-ligne__compte { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.s-marche { background: var(--v-quotidien); }
.s-repris { background: var(--v-jeu); }
.s-aucun { background: rgba(150, 170, 200, .28); }
.s-echoue { background: var(--irreversible); }
.k-accepte { background: var(--v-quotidien); }
.k-corrige { background: var(--accent); }
.k-rejete { background: var(--irreversible); }
.k-nonjuge { background: rgba(150, 170, 200, .22); }
.cap-legende { padding-top: 6px; border-top: 1px solid var(--rule); gap: 22px; }

.chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); align-self: start; }
.chiffres > div { display: grid; gap: 2px; align-content: start; padding: 18px; }
.chiffres__n { font-family: var(--font-serif); font-size: 44px; line-height: 1; color: var(--text-primary); }
.chiffres__n--accent { color: var(--accent); }
.chiffres__l { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

.paliers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: start; }
.paliers > div { display: grid; gap: 10px; align-content: start; padding: 22px; }
.paliers__tete { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.paliers__tete--auto { color: var(--v-quotidien); }
.paliers__tete--confirm { color: var(--accent); }
.paliers__tete--irreversible { color: var(--irreversible); }
.paliers > .paliers__irreversible { box-shadow: inset 0 2px 0 var(--irreversible); }
.paliers ul { font-family: var(--font-mono); font-size: 13px; line-height: 1.8; color: var(--text-secondary); }

.invariants li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--rule); }
.invariants li:last-child { border-bottom: 1px solid var(--rule); }
.invariants__n { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.invariants__t { font-size: 18px; line-height: 1.6; color: var(--text-primary); }

.addendum { align-self: start; }
.addendum > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 20px 0; }
.addendum__ou { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.addendum p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.addendum b { color: var(--text-primary); font-weight: 500; }

@media (max-width: 900px) {
  .obs-hero--etat { height: 520px; }
  .obs-hero__inner { padding: 0 20px; }
  .obs-hero__texte h1 { font-size: 56px; }
  .etat-captures { grid-template-columns: 1fr; padding: 48px 20px 0; }
  .etat-section { grid-template-columns: 1fr; gap: 28px; padding: 72px 20px 0; }
  .etat-section--fin { padding-bottom: 80px; }
  .cap-ligne { grid-template-columns: 1fr; gap: 8px; }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paliers { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGES ANNEXES — Manifeste, À propos, Contact, KAIROS, Notes
   ============================================================ */

.obs-page h1 { font-family: var(--font-serif); font-weight: 400; color: var(--text-primary); }
.obs-page h1 em { font-style: italic; color: var(--accent); }
.obs-page h2 { font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.1; }
.obs-page h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--text-primary); }

/* hero image (Manifeste, KAIROS) */
.page-hero { position: relative; height: 620px; overflow: hidden; }
.page-hero--kairos { height: 600px; }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; display: block; }
.page-hero__voile { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 11, .2), #05070B); }
.page-hero__bas { position: absolute; left: 0; right: 0; bottom: 64px; max-width: 960px; margin: 0 auto; padding: 0 32px; }
.page-hero__bas--large { max-width: 1100px; }
.page-hero h1 { font-size: 112px; line-height: .95; }
.page-hero .page-hero__kairos { font-size: 120px; line-height: .9; letter-spacing: .02em; }
.page-hero__kairos span { font-size: .4em; letter-spacing: 0; color: var(--accent); }
.page-hero__sous { font-family: var(--font-serif); font-style: italic; font-size: 30px; line-height: 1.3; color: var(--text-secondary); margin-top: 14px !important; }
.kora-seuil--voile { max-width: 560px; margin-bottom: 28px; padding: 10px 16px; background: rgba(5, 7, 11, .6); }
.kora-seuil--voile .kora-seuil__said p { font-size: 15px; line-height: 1.55; }

/* Manifeste */
.manif { max-width: 960px; margin: 0 auto; padding: 40px 32px 120px; display: grid; gap: 88px; }
.manif-partie { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 32px; }
.manif-n { font-family: var(--font-serif); font-size: 72px; line-height: .9; color: var(--accent); }
.manif-corps { display: grid; gap: 18px; }
.manif-corps h2 { font-size: 44px; }
.manif-corps > p { font-size: 19px; line-height: 1.75; color: var(--text-body); }
.manif-corps strong { color: var(--text-primary); }
.manif-piliers { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.manif-piliers > div { display: grid; gap: 8px; align-content: start; padding: 22px; }
.manif-piliers p, .manif-portes .porte__desc { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.manif-profils > div { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.manif-profils > div:last-child { border-bottom: 1px solid var(--rule); }
.manif-profils p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.manif-profils em { color: var(--accent); }
.manif-portes { grid-template-columns: 1fr 1fr; }
.manif-portes .porte { padding: 24px; }
.manif-portes h3 { font-size: 26px; }
.porte__lien { font-size: 14px; color: var(--accent); }
.manif-citation { display: grid; gap: 18px; padding-top: 24px; text-align: center; border-top: 1px solid rgba(233, 165, 68, .35); }
.manif-citation p:first-child { font-family: var(--font-serif); font-style: italic; font-size: 36px; line-height: 1.3; color: var(--text-primary); text-wrap: balance; }
.manif-signature { font-size: 15px; color: var(--text-muted); }

/* À propos */
.apropos { max-width: 1200px; margin: 0 auto; padding: 80px 32px 120px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; }
.apropos .kora-seuil, .contact .kora-seuil { max-width: 620px; margin-bottom: 40px; padding: 12px 16px; }
.apropos h1, .contact h1 { font-size: 96px; line-height: .95; margin-top: 14px; }
.apropos__sous, .contact__sous { font-size: 18px; color: var(--text-secondary); margin: 16px 0 48px !important; }
.apropos__texte { max-width: 680px; display: grid; gap: 22px; font-size: 18px; line-height: 1.8; color: var(--text-body); }
.apropos__texte p { font-size: 18px; line-height: 1.8; color: var(--text-body); }
.apropos__texte h2 { margin-top: 24px; }
.apropos-citation { padding-left: 26px; border-left: 2px solid var(--accent); }
.apropos-citation p { font-family: var(--font-serif); font-style: italic; font-size: 34px !important; line-height: 1.3 !important; color: var(--text-primary) !important; }
.apropos__aside { position: sticky; top: 96px; align-self: start; display: grid; gap: 16px; }
.apropos__aside img { display: block; width: 100%; border: 1px solid rgba(150, 170, 200, .2); }
.apropos__liens { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--rule); font-size: 15px; }
.apropos__liens-sous { font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* Contact */
.contact { max-width: 960px; margin: 0 auto; padding: 80px 32px 120px; }
.contact__sous { margin-bottom: 40px !important; }
.contact__texte { font-size: 18px; line-height: 1.8; color: var(--text-body); max-width: 680px; }
.contact__cartes { grid-template-columns: 1fr 1fr; margin: 40px 0 56px; }
.contact__adresse { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; color: var(--accent); overflow-wrap: anywhere; }
.contact h2 { margin-bottom: 16px; }
.contact__intro { font-size: 17px; color: var(--text-secondary); margin-bottom: 12px !important; }
.contact__sujets { max-width: 760px; }
.contact__sujets li { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.contact__sujets li:last-child { border-bottom: 1px solid var(--rule); }
.contact__sujets strong { color: var(--text-primary); font-weight: 500; }
.contact__ressources { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px !important; font-size: 15px; }
.contact__ressources span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); align-self: center; }
.contact__note { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 24px !important; max-width: 680px; }
.contact__note strong { color: var(--text-primary); }
.contact__ville { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); margin-top: 14px !important; }

/* KAIROS */
.kdl { max-width: 1100px; margin: 0 auto; padding: 32px 32px 40px; display: grid; gap: 72px; }
.kdl__intro { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; }
.kdl__blurb { font-size: 19px; line-height: 1.8; color: var(--text-body); }
.kdl__etat { display: grid; gap: 8px; padding: 22px 24px; border: 1px solid rgba(233, 165, 68, .45); background: rgba(233, 165, 68, .07); }
.kdl__etat-titre { font-size: 18px; font-weight: 500; color: var(--text-primary); }
.kdl__etat-texte { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.kdl__bloc { display: grid; gap: 22px; }
.kdl__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kdl__highlights > div { display: grid; gap: 8px; align-content: start; padding: 24px; }
.kdl__highlights h3 { font-size: 28px; }
.kdl__highlights p { font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); }
.kdl__coeur { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
.kdl__coeur > div:first-child { display: grid; gap: 10px; align-content: start; }
.kdl__features li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 16.5px; line-height: 1.5; color: var(--text-body); }
.kdl__features li:last-child { border-bottom: 1px solid var(--rule); }
.kdl__fournisseurs { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); margin-top: 16px !important; }
.kdl__video { display: grid; gap: 18px; }
.kdl__video video { display: block; width: 100%; max-width: 820px; }

/* Notes */
.notes-index { max-width: 1200px; margin: 0 auto; padding: 80px 32px 120px; }
.notes-index .eyebrow { margin-bottom: 18px; }
.notes-index h1 { font-size: 72px; line-height: 1.02; max-width: 900px; text-wrap: balance; }
.notes-index__sous { font-size: 18px; line-height: 1.65; color: var(--text-secondary); max-width: 680px; margin-top: 20px !important; }
.notes-index .kora-seuil { margin-top: 32px; }
.notes-index__compte { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); margin: 56px 0 16px !important; }
.notes-index__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notes-index__cartes .porte { padding: 32px; gap: 12px; }
.notes-index__cartes strong { font-size: 32px; }
.notes-index__cartes .porte__desc { font-size: 15.5px; line-height: 1.6; }
.notes-index__date { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
.notes-index__banc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.notes-index__banc > div { display: grid; gap: 6px; align-content: start; font-size: 14.5px; line-height: 1.5; color: var(--text-secondary); }
.notes-index__n { font-family: var(--font-serif); font-size: 52px; line-height: 1; color: var(--text-primary); }
.notes-index__source { font-family: var(--font-mono); font-size: 12px; color: var(--text-light); margin-top: 18px !important; }

@media (max-width: 900px) {
  .page-hero { height: 520px; }
  .page-hero__bas { padding: 0 20px; bottom: 40px; }
  .page-hero h1 { font-size: 64px; }
  .page-hero .page-hero__kairos { font-size: 72px; }
  .page-hero__sous { font-size: 22px; }
  .manif { padding: 32px 20px 80px; gap: 56px; }
  .manif-partie { grid-template-columns: 1fr; gap: 8px; }
  .manif-n { font-size: 48px; }
  .manif-piliers, .manif-portes, .contact__cartes, .kdl__highlights, .notes-index__cartes, .notes-index__banc { grid-template-columns: 1fr; }
  .manif-profils > div, .contact__sujets li { grid-template-columns: 1fr; gap: 6px; }
  .manif-citation p:first-child { font-size: 27px; }
  .apropos { grid-template-columns: 1fr; padding: 48px 20px 80px; gap: 48px; }
  .apropos__aside { position: static; }
  .apropos h1, .contact h1 { font-size: 60px; }
  .contact { padding: 48px 20px 80px; }
  .kdl { padding: 24px 20px 32px; gap: 56px; }
  .kdl__intro, .kdl__coeur { grid-template-columns: 1fr; gap: 28px; }
  .notes-index { padding: 48px 20px 80px; }
  .notes-index h1 { font-size: 48px; }
}