/* ============================================================
   LE REPÈRE — l'accueil : la mise en scène de Kora
   Les tokens de nuit (--bg-page, --accent, --v-*…) et le décor
   (.kora-cosmos / .kora-veil) vivent dans base.css depuis le 11/09 :
   Kora est l'hôte de tout le site, l'accueil n'est plus un cas à part
   pour la couleur — seulement pour ce qu'elle y dit et comment elle
   y arrive (condensation, orbe qui suit la lecture : js/repere.js).
   ============================================================ */

body.repere .rep-open,
body.repere .rep-layer { position: relative; z-index: 2; }

/* ---------- l'ouverture : Kora seule ---------- */
.rep-open {
  min-height: min(90vh, 48rem);
  display: grid; align-content: center;
  padding-block: clamp(6rem, 14vh, 10rem) clamp(3rem, 8vh, 6rem);
}
.rep-eyebrow {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--v-quotidien);
  margin: 0 0 1.5rem;
}
.rep-open h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.4rem, 1.75rem + 2.9vw, 4.6rem);
  font-weight: 400; line-height: 1.02; letter-spacing: -.038em;
  margin: 0 0 1.7rem; max-width: 20ch; text-wrap: balance;
  text-shadow: 0 2px 40px rgba(5, 7, 11, .9);
}
.rep-open h1 em { font-style: italic; font-weight: 400; color: var(--accent); }
.rep-said {
  color: var(--text-muted); max-width: 33rem; margin: 0 0 1rem; text-wrap: pretty;
}
.rep-hint {
  font-family: var(--font-mono); font-size: .78rem; color: var(--text-light);
  letter-spacing: .12em; text-transform: uppercase;
  margin-top: clamp(2rem, 6vh, 4rem);
  display: flex; align-items: center; gap: .7rem;
}
.rep-hint::before { content: ""; width: 2.6rem; height: 1px; background: var(--border-dark); }

/* ---------- couches ---------- */
.rep-layer { padding-block: clamp(3.5rem, 10vh, 7rem); }
.rep-panel {
  background: linear-gradient(155deg, rgba(9, 13, 20, .86), rgba(4, 6, 11, .78));
  border: 1px solid var(--border);
  padding: clamp(1.5rem, 4vw, 3.2rem);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 70px -30px rgba(0, 0, 0, .9);
}
.rep-head { margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.rep-head h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 1.36rem + 1vw, 2.25rem);
  font-weight: 400; letter-spacing: -.026em;
  margin: .35rem 0 .75rem; text-wrap: balance;
}
.rep-head p { color: var(--text-muted); margin: 0; max-width: 33rem; text-wrap: pretty; }

/* ---------- les trois sommets ---------- */
.rep-vertices { display: grid; gap: 1px; background: var(--border); }
@media (min-width: 52rem) { .rep-vertices { grid-template-columns: repeat(3, 1fr); } }
.rep-vertex {
  background: rgba(7, 10, 16, .72);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: grid; gap: .8rem; align-content: start;
  transition: background var(--transition-normal);
}
.rep-vertex:hover, .rep-vertex:focus-within { background: rgba(12, 17, 26, .88); }
.rep-orbit {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  display: flex; align-items: center; gap: .6rem; color: var(--text-light);
}
.rep-orbit::before {
  content: ""; width: .42rem; height: .42rem; border-radius: 50%;
  background: currentColor; flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent);
}
.rep-vertex--recherche .rep-orbit { color: var(--v-recherche); }
.rep-vertex--quotidien .rep-orbit { color: var(--v-quotidien); }
.rep-vertex--jeu       .rep-orbit { color: var(--v-jeu); }
.rep-vertex h3 {
  font-family: var(--font-sans); font-size: 1.22rem; font-weight: 500;
  letter-spacing: -.015em; margin: 0; line-height: 1.3;
}
.rep-vertex p { margin: 0; color: var(--text-muted); font-size: .94rem; line-height: 1.56; text-wrap: pretty; }
.rep-src {
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-light);
  border-top: 1px solid var(--border); padding-top: .7rem; margin: .2rem 0 0;
}

/* ---------- ce qu'elle ne sait pas ---------- */
.rep-not { display: grid; gap: .4rem; padding-block: 1.35rem; border-bottom: 1px solid var(--border); }
.rep-not:first-of-type { padding-top: 0; }
.rep-not:last-of-type { border-bottom: 0; padding-bottom: 0; }
.rep-not h3 {
  font-family: var(--font-sans); font-size: 1.22rem; font-weight: 500;
  letter-spacing: -.015em; margin: 0; line-height: 1.32;
  display: flex; align-items: baseline; gap: .8rem; text-wrap: balance;
}
.rep-not h3::before {
  content: ""; width: .5rem; height: .5rem; flex: none;
  box-shadow: inset 0 0 0 1.5px var(--text-light); transform: translateY(-.1em);
}
.rep-not p { margin: 0 0 0 1.3rem; color: var(--text-muted); font-size: .95rem; max-width: 44rem; text-wrap: pretty; }
.rep-not .rep-src { margin-left: 1.3rem; border-top: 0; padding-top: 0; }

/* ---------- deux voix ---------- */
.rep-voices { display: grid; gap: clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 50rem) { .rep-voices { grid-template-columns: 1fr 1fr; } }
.rep-voice { display: grid; gap: .9rem; align-content: start; }
.rep-who {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-light);
  padding-bottom: .7rem; border-bottom: 1px solid var(--border-dark); margin: 0;
}
.rep-voice--her .rep-who {
  color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.rep-voice blockquote {
  margin: 0; font-family: var(--font-sans); font-size: 1.22rem; font-weight: 400;
  line-height: 1.46; letter-spacing: -.012em; text-wrap: pretty;
}
.rep-voice--her blockquote { font-style: italic; }
.rep-voice p { margin: 0; color: var(--text-muted); font-size: .93rem; }

/* ---------- la preuve, en marge ---------- */
.rep-proof {
  font-family: var(--font-mono); font-size: .78rem; color: var(--text-light);
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: baseline;
  border-left: 2px solid var(--border-dark); padding-left: .85rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.rep-proof b {
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  font-size: .64rem; color: var(--text-muted);
}
.rep-proof code { font-family: inherit; color: var(--v-quotidien); }

/* ---------- portes de sortie ---------- */
/* strong en serif (--font-serif) : le reste du site titre en serif, la
   porte doit déjà porter cette typo avant qu'on la franchisse — sinon le
   changement de police au clic s'ajoute au changement de décor. */
.rep-doors { display: grid; gap: 1px; background: var(--border); }
@media (min-width: 44rem) { .rep-doors { grid-template-columns: repeat(2, 1fr); } }
.rep-door {
  background: rgba(7, 10, 16, .72); padding: clamp(1.3rem, 3vw, 1.9rem);
  display: grid; gap: .5rem; text-decoration: none; color: inherit;
  transition: background var(--transition-normal);
}
.rep-door:hover, .rep-door:focus-visible { background: rgba(12, 17, 26, .92); }
/* première porte, en avant : c'est la suite directe de sa propre voix */
.rep-door--lead { grid-column: 1 / -1; background: rgba(12, 17, 26, .85); }
.rep-door--lead strong { font-size: 1.34rem; }
.rep-door span {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.rep-door strong {
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400;
  letter-spacing: -.015em; line-height: 1.3;
}
.rep-door em { font-style: normal; color: var(--text-muted); font-size: .93rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .rep-vertex, .rep-door { transition: none; }
}