/* ============================================================
   INCALCULABLE — DESIGN SYSTEM · v2 (2026)
   ============================================================

   Sommaire
   ─────────────────────────────────────────────────────────
   0.  Doctrine                 — règles & anti-patterns
   1.  Tokens primitifs         — valeurs brutes, sans sémantique
   2.  Tokens sémantiques       — nommés par rôle
   3.  Tokens par page          — accent couleur / rgb par section
   4.  Reset global + a11y      — focus-visible, prefers-reduced-motion
   5.  Fond ambiant unifié      — UNIQUE source d'atmosphère
   6.  Navigation               — topbar, logo, nav, hamburger
   7.  Héros home               — image fondue dans le fond
   8.  Héros pages internes     — .page-hero partagé
   9.  Typographie              — voix (Special Elite) · lecture (Newsreader)
   10. Sections de contenu      — fond transparent, rythme par les retraits
   11. Composants               — cards, états, liens, formulaires
   12. Iconographie minimale    — 6 glyphes + sigil
   13. Footer
   14. Responsive               — 980 px · 900 px
   ============================================================


   ============================================================
   0. DOCTRINE — règles & anti-patterns
   ============================================================

   Les commandements négatifs du système. Si une règle te paraît
   restrictive, c'est qu'elle l'est volontairement.

   ×  Ne pas mélanger deux accents sur une même page.
      Les .entry-card font exception — c'est leur signature.

   ×  Ne pas abuser des halos par section.
      Le fond ambiant (body::before) est la BASE de l'atmosphère.
      Les halos d'accent sont autorisés pour souligner les sections clés,
      mais gardés légers (≤ 0.12 opacité) pour ne pas rompre la continuité.
      Ne pas empiler plus de 2 halos par section.

   ×  Ne pas utiliser --color-ivory sur fond --page-accent.
      Préférer --color-deep (cf. .text-link:hover).

   ×  Ne pas dessiner d'icône remplie.
      Toute forme tracée garde stroke 1–1.25 px, jamais de fill.

   ×  Ne pas ajouter de border-radius.
      L'absence est délibérée — sortie de la machine à écrire.

   ×  Ne pas utiliser <em> autrement que pour porter --page-accent.
      C'est sa fonction unique dans ce système.

   ×  Ne pas appliquer la serif (Newsreader) en dehors des textes
      éditoriaux longs / blockquote. Special Elite reste la voix.
   ============================================================ */


/* ============================================================
   1. TOKENS PRIMITIFS
   ============================================================ */

:root {

  /* — Palette de base — */
  --color-night:      #030310;   /* fond html, base la plus sombre       */
  --color-deep:       #050505;   /* noir site, hover inversé              */
  --color-white:      #ffffff;
  --color-ivory:      rgba(244, 241, 232, 0.84);  /* corps de texte courant   ⬆ depuis 1.0 */
  --color-ivory-full: #F4F1E8;                    /* ivoire opaque · titres bas, lead   */
  --color-ivory-dim:  rgba(244, 241, 232, 0.66);  /* méta, captions             */

  /* — Palette chromatique — */
  --color-magenta:    #D80587;   /* accent : home / clan / charte / etc.  */
  --color-cyan:       #00F5D0;   /* accent : Le Parchemin                 */
  --color-cobalt:     #0F7BFF;   /* accent : La Forge                     */
  --color-orange:     #FF5520;   /* accent : L'Entreprise incalculable    */
  --color-success:    oklch(82% 0.16 135);  /* vert jaune chaud, distinct du cyan turquoise */

  /* — Contreparties RGB — */
  --rgb-magenta:      216, 5, 135;
  --rgb-cyan:         0, 245, 208;
  --rgb-cobalt:       15, 123, 255;
  --rgb-orange:       255, 85, 32;
  --rgb-success:      163, 217, 74;

  /* — Espacement — */
  --space-site-pad:   clamp(1rem, 4vw, 3rem);
  --space-hero-top:   8rem;
  --space-label-left: clamp(3rem, 15vw, 19rem);
  --space-body-left:  clamp(1rem, 8vw, 12rem);
  --space-copy-shift: clamp(2rem, 3vw, 4rem);
  --space-right-copy-inset: clamp(4.7rem, 10.2vw, 12.6rem);

  /* — Mesures (nouveau · token 09) — */
  --measure-text: min(58rem, 100%);
  --measure-grid: min(70rem, calc(100% - var(--space-body-left)));

  /* — Z-index (nouveau · token 09) — */
  --z-skip:    100;
  --z-topbar:  50;
  --z-switch:  40;

  /* — Hauteurs minimales (nouveau · token 09) — */
  --hero-min:   68vh;
  --card-h-min: 31rem;

  /* — Bordures (nouveau · token 09) — */
  --border-w:        1px;
  --border-w-accent: 2px;
  --border-card:     rgba(244, 241, 232, 0.09);

  /* — Échelle typographique — */
  --text-hero-home:   clamp(4rem, 10vw, 10rem);
  --text-hero-page:   clamp(4rem, 10vw, 10rem);
  --text-display:     clamp(1.7rem, 2.6vw, 3rem);
  --text-closing:     clamp(1.5rem, 2.2vw, 2.8rem);
  --text-card-title:  clamp(1.9rem, 2.4vw, 2.8rem);
  --text-lead:        clamp(1.08rem, 1rem + 0.45vw, 1.45rem);
  --text-body:        clamp(1rem, 0.95rem + 0.35vw, 1.28rem);
  --text-label:       clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-intro-page:  clamp(1rem, 1vw + 0.75rem, 1.35rem);
  --text-fracture:    clamp(1.1rem, 1rem + 0.35vw, 1.45rem);
  --text-armature:    clamp(1.2rem, 1rem + 0.7vw, 1.8rem);
  --text-baseline:    clamp(2rem, 1.8rem + 0.7vw, 2.5rem);
  --text-nav:         1rem;
  --text-logo:        1.3225rem;
  --text-h4:          1.15rem;
  --text-quote:       clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem);

  /* — Familles — */
  --font-voice: "Special Elite", "Courier New", monospace;
  --font-read:  "Newsreader", Georgia, serif;

  /* — Interlettrage — */
  --tracking-label:   0.11em;
  --tracking-logo:    0.02em;

  /* — Hauteurs de ligne — */
  --leading-title:    0.82;
  --leading-title-name: 0.86;
  --leading-body:     1.42;
  --leading-lead:     1.38;
  --leading-armature: 1.55;
  --leading-closing:  1.35;
  --leading-baseline: 1.25;
  --leading-read:     1.55;

  /* — Halos de section (opacités des radial-gradient par section) — */
  --glow-mid:  0.12;    /* halo principal — trace couleur visible dans les fonds */
  --glow-soft: 0.07;    /* halo secondaire — discret           */

  /* — Overlays — */
  --backdrop-tint:         rgba(3, 3, 14, 0.46);   /* = body background · raccord hero/sections  */
  --overlay-topbar:        rgba(5, 5, 5, 0.88);
  --overlay-topbar-mobile: rgba(5, 5, 5, 0.92);
  --overlay-nav-mobile:    rgba(5, 5, 5, 0.96);
  --overlay-toggle:        rgba(5, 5, 5, 0.72);
  --overlay-hero-fade:     rgba(3, 3, 14, 0.46);   /* identique à --backdrop-tint */

  /* — Motion (nouveau · token 04) — */
  --ease-fast:   160ms ease;
  --ease-mid:    200ms ease;
  --ease-slow:   520ms cubic-bezier(.2, .7, .2, 1);
  --ease-spring: 380ms cubic-bezier(.34, 1.56, .64, 1);
}


/* ============================================================
   2. TOKENS SÉMANTIQUES (aliases par rôle)
   ============================================================ */

:root {
  --black:       var(--color-deep);
  --white:       var(--color-white);
  --ivory:       var(--color-ivory);
  --ivory-full:  var(--color-ivory-full);
  --ivory-muted: var(--color-ivory-dim);
  --muted:       var(--color-ivory-dim);
  --dim:         var(--color-ivory-dim);

  --page-accent: var(--color-magenta);
  --page-rgb:    var(--rgb-magenta);

  --site-pad:     var(--space-site-pad);
  --label-left:   var(--space-label-left);
  --content-left: var(--space-body-left);
}


/* ============================================================
   3. TOKENS PAR PAGE — accent uniquement (le fond ne change pas)
   ============================================================ */

body.page-parchemin  { --page-accent: var(--color-cyan);    --page-rgb: var(--rgb-cyan);    }
body.page-forge      { --page-accent: var(--color-cobalt);  --page-rgb: var(--rgb-cobalt);  }
body.page-organisations { --page-accent: var(--color-orange);  --page-rgb: var(--rgb-orange);  }
/* Les autres pages héritent du magenta défini dans :root. */


/* ============================================================
   4. RESET GLOBAL + ACCESSIBILITÉ
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-night);
  color: var(--color-white);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-voice);
  /* Voile body très léger (0.12) — laisse l'image cityscape (body::before)
     bien visible dans les zones hero (home + pages internes).
     L'assombrissement réel est porté localement par les sections de contenu
     (.text-section, .home-fracture, .entries-section, .closing-line) qui ont
     leur propre voile dense — voir plus bas. */
  background: rgba(3, 3, 14, 0.12);
  color: var(--color-white);
  letter-spacing: 0;
}

/* Anneau de focus accessibilité · contour accent courant */
:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  color: var(--color-white);
  background: var(--page-accent);
}

a { color: inherit; }

strong,
b {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-weight: 700;
}

em { color: var(--page-accent); font-style: normal; }

.brand-word,
.voice {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-weight: 700;
}

.white-line {
  color: var(--color-white) !important;
}

.white-strong {
  color: var(--color-white) !important;
  font-weight: 700;
}

.white-italic-strong {
  color: var(--color-white) !important;
  font-style: italic;
  font-weight: 700;
}

code {
  color: var(--color-cyan);
  background: rgba(0, 245, 208, 0.06);
  padding: 0.05em 0.4em;
  font-size: 0.92em;
}

pre {
  margin: 0;
  padding: 1rem 1.1rem;
  background: rgba(0, 0, 0, 0.35);
  border-left: var(--border-w-accent) solid var(--page-accent);
  color: var(--color-cyan);
  font-size: 0.88rem;
  line-height: var(--leading-body);
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

/* Honore le réglage système · neutralise smooth-scroll + transitions */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: var(--z-skip);
  padding: 0.6rem 0.8rem;
  color: var(--color-deep);
  background: var(--color-white);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }


/* ============================================================
   5. FOND AMBIANT UNIFIÉ — l'unique source d'atmosphère
   ============================================================
   Posé sur body::before, identique sur TOUTES les pages.
   Aucune section interne ne redéfinit ce fond. Les blocs de
   contenu sont rendus transparents pour préserver la
   continuité visuelle entre hero et corps.
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    /* Trois halos d'ambiance urbains, NEUTRES (pas de page-accent) */
    radial-gradient(ellipse at 70% 10%,  rgba(190, 128, 10, 0.13), transparent 50rem),
    radial-gradient(ellipse at 5%  55%,  rgba(10,  22, 100, 0.20), transparent 52rem),
    radial-gradient(ellipse at 88% 45%,  rgba(55,   6,  85, 0.13), transparent 46rem),
    /* Voile directionnel */
    linear-gradient(165deg,
      rgba(1,1,6,0.50)  0%,
      rgba(3,3,12,0.30) 45%,
      rgba(1,1,6,0.66) 100%),
    url("heroinebest.jpeg") center 62% / cover;
  filter: saturate(1.2) brightness(0.92) contrast(1.04);
}

/* Grille fine + scanlines — texture cinématique subtile */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.015), rgba(255,255,255,0.015) 1px,
      transparent 1px, transparent 5px),
    linear-gradient(rgba(244, 241, 232, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 232, 0.010) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
  mix-blend-mode: screen;
  opacity: 0.28;
}


/* ============================================================
   6. NAVIGATION
   ============================================================ */

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.6rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, var(--overlay-topbar), transparent);
}

.logo {
  color: var(--color-white);
  font-size: var(--text-logo);
  text-decoration: none;
  letter-spacing: var(--tracking-logo);
}

.site-nav {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  font-size: var(--text-nav);
}

.site-nav a {
  text-decoration: none;
  color: var(--color-white);
  transition: color var(--ease-fast);
}

/* Hover → couleur de la PAGE CIBLE */
.site-nav a:hover                            { color: var(--color-magenta); }
.site-nav a[href*="parchemin"]:hover         { color: var(--color-cyan);    }
.site-nav a[href*="forge"]:hover             { color: var(--color-cobalt);  }
.site-nav a[href*="jylem"]:hover,
.site-nav a[href*="organisations"]:hover       { color: var(--color-orange);  }
.site-nav a[href*="organisations"]:hover .brand-word {
  color: var(--color-orange) !important;
}

.site-nav a[aria-current="page"] { color: var(--page-accent); }
.site-nav a[aria-current="page"] .brand-word {
  color: var(--page-accent) !important;
}

.menu-toggle {
  display: none;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.7rem;
  border: var(--border-w) solid rgba(var(--page-rgb), 0.55);
  background: var(--overlay-toggle);
  color: var(--color-white);
}
.menu-toggle span {
  display: block;
  height: 1px;
  margin: 0.3rem 0;
  background: currentColor;
}


/* ============================================================
   7. HÉROS HOME — image fondue dans le fond
   ============================================================ */

.home-hero {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-hero-top) var(--site-pad) 5rem;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  opacity: 0.74;
  filter: saturate(1.08) brightness(1.02) contrast(1.05);
}

/* Halo magenta + voile haut (lisibilité nav) + fondu bas qui converge
   vers le voile dense des sections suivantes pour transition continue. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 62% at 50% 55%, rgba(var(--page-rgb), 0.14), transparent 100%),
    radial-gradient(circle at 78% 22%, rgba(var(--page-rgb), 0.10), transparent 38rem),
    linear-gradient(180deg,
      rgba(1,1,6,0.50)  0%,     /* lisibilité nav (haut) */
      rgba(1,1,6,0.14) 26%,
      rgba(1,1,6,0.10) 54%,     /* l'image respire au centre */
      rgba(1,1,6,0.30) 68%,
      rgba(1,1,6,0.62) 88%,     /* fondu vers le voile des sections */
      rgba(1,1,7,0.80) 100%);   /* raccord avec le voile dense des sections */
}

.hero-copy {
  width: 100%;
  text-align: center;
}

.hero-copy h1 {
  display: grid;
  gap: 0.08em;
  justify-items: center;
  max-width: 100%;
  margin: 1.4rem 0 0;
  font-size: var(--text-hero-home);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--color-white);
  text-shadow: 0 0 2rem rgba(5, 5, 5, 0.86);
  text-wrap: balance;
}

.hero-baseline {
  position: absolute;
  left: 50%;
  bottom: clamp(0.8rem, 2.2vw, 1.8rem);
  width: min(70rem, calc(100% - (var(--site-pad) * 2)));
  margin: 0;
  font-size: var(--text-baseline);
  line-height: var(--leading-baseline);
  text-align: center;
  color: var(--color-white);
  text-shadow: 0 0 1.8rem rgba(5, 5, 5, 0.92);
  transform: translateX(-50%);
}


/* ============================================================
   8. HÉROS PAGES INTERNES — .page-hero, transparent
   ============================================================ */

.page-hero {
  position: relative;
  display: block;
  min-height: var(--hero-min);
  padding: var(--space-hero-top) var(--site-pad) clamp(4rem, 7vw, 7rem);
  /* Hero interne sombre, mais raccordé à des sections qui laissent respirer la ville. */
  background:
    radial-gradient(ellipse 90% 70% at 55% 85%, rgba(var(--page-rgb), 0.12), transparent 100%),
    radial-gradient(ellipse 60% 50% at 10% 15%, rgba(var(--page-rgb), 0.07), transparent 100%),
    linear-gradient(180deg,
      rgba(1,1,7,0.74)  0%,
      rgba(1,1,7,0.60) 30%,
      rgba(1,1,7,0.56) 58%,
      rgba(1,1,7,0.61) 82%,
      rgba(1,1,7,0.66) 100%);
}

.page-hero h1 {
  display: grid;
  gap: 0.08em;
  max-width: min(76rem, 100%);
  margin: 1.4rem 0 0;
  font-size: var(--text-hero-page);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0;
  color: var(--color-white);
  text-shadow: 0 0 2rem rgba(5, 5, 5, 0.86);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.title-article,
.title-name { display: block; }

.title-article {
  color: var(--color-white);
  font-size: 0.42em;
  line-height: 1;
}

.title-name {
  max-width: 100%;
  line-height: 0.96;
}

.page-intro {
  width: min(48rem, 100%);
  margin-top: clamp(2rem, 5vw, 5rem);
  margin-left: 0;
  color: var(--ivory);
  font-size: var(--text-intro-page);
  line-height: var(--leading-body);
}
.page-intro p { margin: 0 0 0.1rem; }
.page-intro.is-right {
  width: min(42rem, 100%);
  margin-left: auto;
}

.split-intro {
  width: min(84rem, 100%);
}

.split-intro > p:not(.intro-label),
.split-intro > .page-kicker {
  width: min(48rem, 100%);
}

.intro-copy-right {
  width: min(42rem, 100%);
  margin: 1.55rem 0 0 auto;
}

.intro-copy-right p {
  color: var(--ivory-full);
  font-family: var(--font-read) !important;
}

.intro-label {
  width: min(48rem, 100%);
  margin-top: 2rem !important;
}

.intro-label + .intro-copy-right {
  margin-top: 1.1rem;
}

.title-subtitle {
  display: block;
  margin-top: 0.25em;
  font-size: 0.28em;
  line-height: 1.1;
}


/* ============================================================
   9. TYPOGRAPHIE — voix (Special Elite) · lecture (Newsreader)
   ============================================================
   Special Elite reste partout par défaut.
   Newsreader est introduite sur :
     · blockquote
     · paragraphes et listes des zones éditoriales longues
   Hors de ces contextes, Special Elite reste la voix.
   ============================================================ */

.micro,
.section-label,
.card-label {
  margin: 0;
  color: var(--page-accent);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.section-body h3 {
  margin: 0 0 1.1rem;
  color: var(--color-white);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.section-body h4 {
  margin: 0.95rem 0 0.35rem;
  color: var(--page-accent);
  font-size: var(--text-h4);
  font-weight: 700;
  text-transform: uppercase;
}

.section-body {
  color: var(--ivory);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.section-body p,
.section-body ul,
.section-body ol { margin: 0 0 0.75em; }

.section-body p { color: var(--ivory); }       /* ⬆ contraste : 0.84 au lieu de 0.68 */

.section-body p:first-of-type {
  color: var(--ivory-full);                     /* lead : ivoire opaque */
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.section-body ul { padding: 0; list-style: none; }
.section-body ol {
  padding: 0;
  list-style: none;
  counter-reset: section-step;
}

.section-body li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--ivory);
}
.section-body li + li { margin-top: 0.12rem; }
.section-body li::before {
  content: "•";
  position: absolute;
  left: 0; top: 0.02em;
  color: var(--color-white);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1;
}
.section-body ol li {
  counter-increment: section-step;
}
.section-body ol li::before {
  content: counter(section-step) ".";
  top: 0;
  color: var(--page-accent);
  font-size: inherit;
  line-height: inherit;
}

.section-body table {
  width: 100%;
  margin: 1rem 0 1.2rem;
  border-collapse: collapse;
  color: var(--ivory);
  font-size: 0.96rem;
  line-height: var(--leading-body);
}
.section-body th,
.section-body td {
  padding: 0.72rem 0.8rem;
  border-bottom: var(--border-w) solid rgba(var(--page-rgb), 0.28);
  text-align: left;
  vertical-align: top;
}
.section-body th {
  color: var(--page-accent);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

body.page-forge .section-body table,
body.page-forge .section-body th,
body.page-forge .section-body td {
  color: var(--color-white);
}

.encounter-axis {
  color: var(--page-accent) !important;
  font-family: var(--font-voice) !important;
  font-weight: 700;
}

.encounter-axis + .encounter-axis {
  margin-top: 1.35rem;
}

.closing-line span { color: var(--page-accent); }

/* Mode lecture · serif éditoriale pour les textes narratifs longs */
.page-intro p,
.home-fracture .fracture-copy p,
.text-section .section-body p,
.text-section .section-body li {
  font-family: var(--font-read);
  font-size: var(--text-lead);
  line-height: var(--leading-read);
  color: var(--ivory-full);
}
.page-intro .text-link,
.section-body .text-link {
  font-family: var(--font-voice);
  font-size: var(--text-body);
}
.section-body table {
  font-family: var(--font-voice);
}
em { font-style: italic; color: var(--page-accent); }


/* ============================================================
   10. SECTIONS DE CONTENU — fond ambiant + halos légers
   ============================================================
   Le cityscape fixe (body::before) est la base.
   Chaque section ajoute des halos d'accent discrets (≤ 0.12)
   qui respirent à travers le backdrop sans rompre la continuité.
   Le rythme tient aussi aux retraits alternés et à l'échelle typo.
   ============================================================ */

.text-section,
.entries-section,
.page-hero,
.closing-line,
.armature-panel { scroll-margin-top: 5rem; }

/* — Bloc texte alterné —
   Ellipses très larges (150%+ de largeur) : le gradient change si peu
   d'une section à l'autre que le raccord entre blocs est imperceptible. — */
.text-section {
  display: block;
  padding: clamp(1.35rem, 2.4vw, 2.75rem) var(--site-pad) clamp(1.8rem, 3.2vw, 3.5rem);
  background:
    radial-gradient(ellipse 160% 120% at 92% 50%, rgba(var(--page-rgb), var(--glow-mid)),  transparent 100%),
    radial-gradient(ellipse 100% 80%  at  4% 60%, rgba(var(--page-rgb), var(--glow-soft)), transparent 100%),
    rgba(1, 1, 7, 0.64);  /* voile local — sombre, mais laisse passer heroinebest */
}

.text-section.is-alt {
  background:
    radial-gradient(ellipse 160% 120% at  8% 50%, rgba(var(--page-rgb), var(--glow-mid)),  transparent 100%),
    radial-gradient(ellipse 100% 80%  at 96% 60%, rgba(var(--page-rgb), var(--glow-soft)), transparent 100%),
    rgba(1, 1, 7, 0.64);
}

.text-section > .section-label {
  width: var(--measure-text);
  margin-left: var(--label-left);
}

.text-section > .section-body {
  width: var(--measure-text);
  margin-top: 0.9rem;
  margin-left: 0;
}

/* — Fracture (home intro) — */
.home-fracture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 42rem);
  padding: clamp(1.75rem, 3vw, 3.25rem) var(--site-pad) clamp(1.25rem, 2.2vw, 2.5rem);
  background:
    radial-gradient(ellipse 150% 140% at 88% 30%, rgba(var(--page-rgb), var(--glow-mid)), transparent 100%),
    rgba(1, 1, 7, 0.64);
}

.fracture-copy {
  grid-column: 2;
  color: var(--ivory);
  font-size: var(--text-fracture);
  line-height: var(--leading-lead);
}
.fracture-copy p { margin: 0 0 0.1rem; }
.fracture-copy .fracture-spaced {
  margin: 1.15em 0;
}
.fracture-copy .fracture-strong {
  color: var(--color-white);
}

/* — Panneau armature — */
.armature-panel {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  min-height: 42vh;
  padding: clamp(5rem, 8vw, 9rem) 1rem;
  text-align: center;
  background:
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(var(--rgb-cyan),   0.09), transparent 100%),
    radial-gradient(ellipse 100%  80% at 80% 20%, rgba(var(--page-rgb), 0.10), transparent 100%),
    rgba(1, 1, 7, 0.64);
}

.armature-panel p {
  max-width: 42rem;
  margin: 0;
  font-size: var(--text-armature);
  line-height: var(--leading-armature);
  color: var(--ivory-full);
}
.armature-panel small { color: var(--dim); }

/* Sigil — inchangé */
.sigil {
  position: relative;
  width: 2rem;
  height: 2rem;
  border: var(--border-w) solid rgba(var(--page-rgb), 0.72);
  border-radius: 50%;
}
.sigil::before,
.sigil::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: rgba(var(--page-rgb), 0.78);
  transform: translate(-50%, -50%);
}
.sigil::before { width: 1.15rem; height: 1px; }
.sigil::after  { width: 1px; height: 1.15rem; }

/* — Grille d'entrées — */
.entries-section {
  padding: clamp(1.35rem, 2.4vw, 2.75rem) var(--site-pad) clamp(1.8rem, 3.2vw, 3.5rem);
  background:
    radial-gradient(ellipse 120% 140% at 15% 30%, rgba(var(--page-rgb), var(--glow-mid)),  transparent 100%),
    radial-gradient(ellipse 100%  120% at 90% 80%, rgba(var(--page-rgb), var(--glow-soft)), transparent 100%),
    rgba(1, 1, 7, 0.64);
}

.section-label.full {
  width: var(--measure-text);
  margin-left: var(--label-left);
  margin-bottom: 1.25rem;
}

.entries-intro {
  width: var(--measure-text);
  margin: -0.3rem 0 1.55rem var(--content-left);
  color: var(--ivory);
  font-family: var(--font-read);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.entries-intro p {
  margin: 0 0 0.22rem;
}

.entries-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  width: var(--measure-grid);
  margin-left: var(--content-left);
}

/* — Closing — */
.closing-line {
  display: grid;
  place-items: center;
  min-height: 34vh;
  padding: 4rem 1rem;
  text-align: center;
  background:
    radial-gradient(ellipse 140% 160% at 50% 50%, rgba(var(--page-rgb), 0.13), transparent 100%),
    rgba(1, 1, 7, 0.64);
}

.closing-line p {
  margin: 0;
  font-size: var(--text-closing);
  line-height: var(--leading-closing);
  color: var(--ivory-full);
}


/* ============================================================
   11. COMPOSANTS — cards, états, liens, formulaires
   ============================================================ */

/* — Entry cards (signature : couleur PROPRE par card) — */
.entry-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  min-height: var(--card-h-min);
  padding: 1.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 15%, rgba(var(--card-rgb, var(--page-rgb)), 0.075), transparent 13rem),
    linear-gradient(180deg, rgba(244,241,232,0.045), rgba(244,241,232,0.018));
  border: var(--border-w) solid var(--border-card);
  transition: transform var(--ease-mid), box-shadow var(--ease-mid);
}
.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 44px rgba(var(--card-rgb, var(--rgb-magenta)), 0.18);
}
.entry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 12%, rgba(var(--card-rgb), 0.38), transparent 12rem);
  opacity: 0.8;
}

.entry-cyan   { --card-rgb: var(--rgb-cyan);    --card-accent: var(--color-cyan);   }
.entry-cobalt { --card-rgb: var(--rgb-cobalt);  --card-accent: var(--color-cobalt); }
.entry-orange { --card-rgb: var(--rgb-orange);  --card-accent: var(--color-orange); }

.card-visual {
  display: grid;
  place-items: center;
  height: 10rem;
  margin: -1.2rem -1.2rem 1rem;
  background:
    radial-gradient(circle at 50% 48%, rgba(var(--card-rgb), 0.42), transparent 5rem),
    linear-gradient(180deg, rgba(5,5,5,0.18), rgba(5,5,5,0.78)),
    url("heroinebest.jpeg") center / cover;
  filter: saturate(1.05);
}
.card-visual span {
  width: 3.6rem;
  height: 3.6rem;
  border: var(--border-w) solid var(--card-accent);
  box-shadow: 0 0 2.5rem rgba(var(--card-rgb), 0.34);
}

.entry-card h3 {
  display: flex;
  align-items: flex-start;
  min-height: clamp(4rem, 5.2vw, 5.6rem);
  margin: 0.55rem 0 0.9rem;
  font-size: var(--text-card-title);
  font-weight: 400;
  line-height: 0.95;
}
.entry-card p {
  margin: 0 0 0.18rem;
  color: var(--ivory);
  line-height: var(--leading-body);
}
.entry-card .entry-status {
  margin-bottom: 0.75rem;
  color: var(--card-accent);
  font-family: var(--font-voice);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1.35;
  text-transform: uppercase;
}

.page-home .entry-card .home-read,
.page-home .entry-card .home-read-link {
  font-family: var(--font-read);
  font-size: clamp(1.04rem, 0.95rem + 0.35vw, 1.28rem);
  line-height: var(--leading-read);
}

@media (min-width: 981px) {
  .hero-copy h1 {
    transform: translateX(var(--space-copy-shift));
  }

  .hero-baseline {
    transform: translateX(calc(-50% + var(--space-copy-shift)));
  }

  .page-hero h1,
  .fracture-copy {
    transform: translateX(var(--space-copy-shift));
  }

  .page-intro:not(.is-right) {
    transform: translateX(var(--space-copy-shift));
  }

  .text-section > .section-body {
    width: min(58rem, calc(100% - var(--space-copy-shift)));
    margin-left: var(--space-copy-shift);
  }

  .entries-grid {
    width: min(70rem, calc(100% - var(--content-left) - var(--space-copy-shift)));
    margin-left: calc(var(--content-left) + var(--space-copy-shift));
  }

  .page-home .entry-card .home-read {
    min-height: 7.75em;
  }
}

.card-footer {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1rem;
  color: var(--color-white);
}

/* — .card-quiet — variante sobre sans visuel ni halo — */
.card-quiet {
  padding: 1.3rem 1.4rem;
  border: var(--border-w) solid var(--border-card);
  background: rgba(244, 241, 232, 0.015);
  color: var(--ivory);
}
.card-quiet .meta {
  margin: 0 0 0.5rem;
  color: var(--page-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.78rem;
  font-weight: 700;
}
.card-quiet h4 {
  margin: 0 0 0.5rem;
  color: var(--color-white);
  font-size: 1.3rem;
  font-weight: 400;
  text-transform: none;
}
.card-quiet p {
  margin: 0;
  color: var(--ivory);
  font-size: 0.96rem;
  line-height: var(--leading-body);
}

/* — Liens-boutons — */
.card-footer a,
.text-link {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.8rem;
  color: var(--color-white);
  border: var(--border-w) solid rgba(var(--page-rgb), 0.62);
  text-decoration: none;
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}
.card-footer a:hover,
.text-link:hover {
  color: var(--color-deep);
  background: var(--page-accent);
  border-color: var(--page-accent);
}
.entry-card .text-link          { border-color: var(--card-accent); }
.entry-card .text-link:hover    { background: var(--card-accent); border-color: var(--card-accent); color: var(--color-deep); }

/* — États de feedback (5) — */
.state {
  --state-rgb: var(--rgb-cyan);
  --state-accent: var(--color-cyan);
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 0.85rem 1rem;
  background: rgba(var(--state-rgb), 0.06);
  border-left: var(--border-w-accent) solid var(--state-accent);
  color: var(--ivory);
}
.state .state-name {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--state-accent);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: 0.78rem;
  font-weight: 700;
}
.state .state-mark {
  width: 1.3rem; height: 1.3rem;
  border: var(--border-w) solid var(--state-accent);
  border-radius: 50%;
  position: relative;
  margin-top: 0.1rem;
}
.state .state-mark::before {
  content: "";
  position: absolute; inset: 50% auto auto 50%;
  width: 0.65rem; height: 1px; background: var(--state-accent);
  transform: translate(-50%, -50%);
}
.state.is-info    { --state-rgb: var(--rgb-cyan);    --state-accent: var(--color-cyan); }
.state.is-build   { --state-rgb: var(--rgb-cobalt);  --state-accent: var(--color-cobalt); }
.state.is-warn    { --state-rgb: var(--rgb-orange);  --state-accent: var(--color-orange); }
.state.is-error   { --state-rgb: var(--rgb-magenta); --state-accent: var(--color-magenta); }
.state.is-success { --state-rgb: var(--rgb-success); --state-accent: var(--color-success); }

/* — Blockquote · serif (Newsreader) — */
blockquote {
  margin: 0;
  padding: 1.2rem 1.5rem;
  border-left: var(--border-w-accent) solid var(--page-accent);
  font-family: var(--font-read);
  font-size: var(--text-quote);
  font-style: italic;
  line-height: 1.4;
  color: var(--ivory-full);
  text-wrap: balance;
  background: transparent;
}
blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--font-voice);
  font-style: normal;
  font-size: 0.86rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--page-accent);
}

/* — Chips / tags — */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem;
  font-size: 0.82rem;
  color: var(--ivory);
  border: var(--border-w) solid rgba(var(--page-rgb), 0.45);
  background: rgba(var(--page-rgb), 0.04);
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.chip:hover { background: rgba(var(--page-rgb), 0.12); color: var(--color-white); }
.chip.is-active {
  color: var(--color-deep);
  background: var(--page-accent);
  border-color: var(--page-accent);
}
.chip-dot {
  width: 0.4rem; height: 0.4rem;
  background: var(--page-accent);
  display: inline-block;
}
.chip.is-active .chip-dot { background: var(--color-deep); }

/* — Breadcrumb — */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--ivory);
}
.breadcrumb a { color: var(--ivory); text-decoration: none; transition: color var(--ease-fast); }
.breadcrumb a:hover { color: var(--page-accent); }
.breadcrumb .sep { color: var(--page-accent); }
.breadcrumb .current {
  color: var(--page-accent);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* — Disclosure (details/summary) — */
details.disclosure { border-top: var(--border-w) solid var(--border-card); }
details.disclosure:last-of-type { border-bottom: var(--border-w) solid var(--border-card); }
details.disclosure summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 0.2rem;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--color-white);
  font-size: var(--text-h4);
}
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure .marker {
  width: 1.1rem; height: 1.1rem;
  border: var(--border-w) solid var(--page-accent);
  border-radius: 50%;
  position: relative;
  transition: transform var(--ease-mid);
}
details.disclosure[open] .marker { transform: rotate(45deg); }
details.disclosure .marker::before,
details.disclosure .marker::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--page-accent);
  transform: translate(-50%, -50%);
}
details.disclosure .marker::before { width: 0.55rem; height: 1px; }
details.disclosure .marker::after  { width: 1px; height: 0.55rem; }
details.disclosure .disclosure-content {
  padding: 0 0.2rem 1rem;
  color: var(--ivory);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* — Form fields — */
.field { display: grid; gap: 0.3rem; }
.field-label {
  color: var(--page-accent);
  font-size: 0.78rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
  appearance: none;
  background: rgba(244,241,232,0.04);
  border: var(--border-w) solid rgba(var(--page-rgb), 0.35);
  border-bottom-color: rgba(var(--page-rgb), 0.62);
  color: var(--color-white);
  font: inherit;
  font-size: var(--text-body);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--ease-fast), background var(--ease-fast);
  width: 100%;
}
input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--page-accent);
  background: rgba(244,241,232,0.07);
}
input::placeholder, textarea::placeholder { color: var(--ivory-muted); }


/* ============================================================
   12. ICONOGRAPHIE MINIMALE — 6 glyphes + sigil
   ============================================================
   Toujours stroke 1.25, jamais de fill, color = currentColor.
   Conventions <svg class="icon" viewBox="0 0 24 24"
                    fill="none" stroke="currentColor"
                    stroke-width="1.25">…</svg>
   ============================================================ */

.icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  color: currentColor;
}
.icon-lg { width: 1.6rem; height: 1.6rem; vertical-align: middle; }


/* ============================================================
   13. FIGURE / IMAGE — 4 ratios + caption
   ============================================================ */

figure.media {
  margin: 0;
  display: grid;
  gap: 0.6rem;
}
figure.media .frame {
  width: 100%;
  background: rgba(244,241,232,0.04);
  border: var(--border-w) solid var(--border-card);
  overflow: hidden;
  display: grid; place-items: center;
}
figure.media .frame img,
figure.media .frame video {
  width: 100%; height: 100%; object-fit: cover;
}
figure.media .frame.is-cinema { aspect-ratio: 21 / 9; }
figure.media .frame.is-wide   { aspect-ratio: 16 / 9; }
figure.media .frame.is-page   { aspect-ratio: 3 / 4; }
figure.media .frame.is-square { aspect-ratio: 1 / 1; }
figure.media figcaption {
  color: var(--ivory);
  font-size: 0.88rem;
  line-height: 1.45;
}
figure.media figcaption .source {
  display: block;
  color: var(--page-accent);
  font-size: 0.74rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-top: 0.2rem;
}


/* ============================================================
   14. FOOTER
   ============================================================ */

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
  padding: 4rem clamp(1rem, 4vw, 3rem);
  overflow: hidden;
  color: var(--ivory);
  background:
    linear-gradient(180deg,
      rgba(0, 0, 3, 0.64) 0%,
      rgba(0, 0, 3, 0.72) 48%,
      rgba(0, 0, 3, 0.78) 100%),
    radial-gradient(ellipse 80% 110% at 78% 30%, rgba(var(--page-rgb), 0.032), transparent 100%);
  border-top: 0;
}

.footer-brand,
.footer-email {
  color: var(--color-white);
  font-family: var(--font-voice);
  font-size: var(--text-nav);
  line-height: 1.4;
  text-decoration: none;
}

.site-footer p {
  color: var(--color-white);
  font-family: var(--font-voice);
  font-size: var(--text-nav);
  line-height: 1.4;
}

.footer-links { display: grid; gap: 0.7rem; }
.footer-links a {
  color: var(--color-white);
  font-family: var(--font-voice);
  font-size: var(--text-nav);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--ease-fast);
}
.footer-links a:hover,
.footer-links a[aria-current="page"] { color: var(--page-accent); }

.footer-email { justify-self: end; }


/* ============================================================
   15. RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  :root {
    --space-label-left: clamp(2rem, 12vw, 8rem);
    --space-body-left:  clamp(1rem, 6vw, 4rem);
  }

  .entries-grid,
  .page-hero,
  .home-fracture,
  .text-section,
  .site-footer { grid-template-columns: 1fr; }

  .fracture-copy { grid-column: auto; }

  .page-home .entries-grid {
    width: min(34rem, 100%);
    margin-inline: auto;
  }

  .footer-email { justify-self: start; }
}

@media (max-width: 900px) {
  .topbar {
    min-height: 4rem;
    background: var(--overlay-topbar-mobile);
  }

  .menu-toggle { display: block; }

  .site-nav {
    position: fixed;
    inset: 4rem 0 0;
    display: grid;
    align-content: start;
    gap: 0;
    padding: 1rem var(--site-pad) 2rem;
    background: var(--overlay-nav-mobile);
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-130%);
    transition: transform 180ms ease, visibility 0s linear 180ms;
  }
  .nav-open .site-nav {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
  body.nav-open { overflow: hidden; }
  .site-nav a { padding: 1rem 0; }

  .home-hero { min-height: 100vh; min-height: 100svh; padding-top: 6rem; }
  .page-hero { min-height: 58vh; padding-top: 6rem; }

  .hero-copy h1 { font-size: clamp(2.25rem, 12.5vw, 4.1rem); }
  .page-hero h1 { font-size: clamp(2.35rem, 12.5vw, 4.35rem); }

  .entry-card { min-height: 28rem; }

  .section-body table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* V9E dark continuous atmosphere override */
html,
body {
  background: #030005;
}

body {
  position: relative;
  background: transparent;
}

body > * {
  position: relative;
  z-index: 1;
}

body::before {
  z-index: 0;
  inset: -2rem;
  background:
    linear-gradient(90deg, rgba(2,0,5,0.88) 0%, rgba(3,0,6,0.28) 50%, rgba(2,0,5,0.88) 100%),
    linear-gradient(180deg, rgba(2,0,5,0.92) 0%, rgba(2,0,5,0.42) 38%, rgba(2,0,5,0.48) 62%, rgba(2,0,5,0.90) 100%),
    image-set(url("incalculable-bg.webp") type("image/webp"), url("incalculable-bg.jpeg") type("image/jpeg")) center 54% / cover no-repeat;
  filter: blur(1.9px) saturate(1.26) brightness(0.72) contrast(1.08);
  transform: scale(1.048);
}

body::after {
  z-index: 0;
  background:
    radial-gradient(ellipse 18rem 13rem at 78% 22%, rgba(216, 5, 135, 0.10), transparent 72%),
    radial-gradient(ellipse 18rem 13rem at 18% 45%, rgba(216, 5, 135, 0.070), transparent 74%),
    radial-gradient(ellipse 24rem 16rem at 52% 78%, rgba(58, 227, 226, 0.055), transparent 76%),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.010), rgba(255,255,255,0.010) 1px, transparent 1px, transparent 6px),
    linear-gradient(rgba(244, 241, 232, 0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 241, 232, 0.006) 1px, transparent 1px);
  background-size: auto, auto, 96px 96px, 96px 96px;
  opacity: 0.26;
  mix-blend-mode: screen;
}

.topbar {
  background: linear-gradient(180deg, rgba(3,0,6,0.96), rgba(3,0,6,0.72) 45%, rgba(3,0,6,0.12) 100%);
}

.home-hero {
  background:
    radial-gradient(ellipse 62% 46% at 52% 44%, rgba(216, 5, 135, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(3,0,6,0.88) 0%, rgba(3,0,6,0.46) 12%, rgba(3,0,6,0.10) 32%, rgba(3,0,6,0.02) 54%, rgba(3,0,6,0.42) 100%);
}

.hero-image {
  object-position: center 58%;
  opacity: 0.84;
  filter: blur(8px) saturate(1.12) brightness(0.98) contrast(1.04);
  transform: scale(1.052);
  transform-origin: center;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 13%,
    #000 56%,
    rgba(0, 0, 0, 0.90) 64%,
    rgba(0, 0, 0, 0.68) 75%,
    rgba(0, 0, 0, 0.36) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 13%,
    #000 56%,
    rgba(0, 0, 0, 0.90) 64%,
    rgba(0, 0, 0, 0.68) 75%,
    rgba(0, 0, 0, 0.36) 88%,
    transparent 100%
  );
}

.home-hero::after {
  background:
    radial-gradient(ellipse 52% 38% at 54% 46%, rgba(216, 5, 135, 0.035), transparent 72%),
    linear-gradient(180deg,
      rgba(3,0,6,0.84) 0%,
      rgba(3,0,6,0.60) 10%,
      rgba(3,0,6,0.22) 26%,
      rgba(3,0,6,0.05) 44%,
      rgba(3,0,6,0.12) 66%,
      rgba(3,0,6,0.28) 86%,
      rgba(3,0,6,0.34) 100%);
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  z-index: -1;
  height: clamp(18rem, 48vh, 34rem);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(3,0,6,0.025) 34%,
    rgba(3,0,6,0.06) 68%,
    rgba(3,0,6,0.10) 100%
  );
}

.page-hero {
  background:
    radial-gradient(ellipse 92% 58% at 58% 78%, rgba(216, 5, 135, 0.042), transparent 84%),
    linear-gradient(180deg, rgba(3,0,6,0.90) 0%, rgba(3,0,6,0.64) 18%, rgba(3,0,6,0.36) 48%, rgba(3,0,6,0.22) 74%, rgba(3,0,6,0.16) 100%);
}

.home-fracture,
.text-section,
.entries-section,
.closing-line,
.armature-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(3,0,6,0.16);
}

.text-section.is-alt {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(3,0,6,0.16);
}

.entries-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(3,0,6,0.17);
}

.home-fracture::before,
.text-section::before,
.entries-section::before,
.closing-line::before,
.armature-panel::before {
  content: "";
  position: absolute;
  inset: -22rem 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46rem 28rem at 72% 48%, rgba(216, 5, 135, 0.040), transparent 78%),
    radial-gradient(ellipse 42rem 26rem at 18% 54%, rgba(216, 5, 135, 0.028), transparent 80%);
  filter: blur(46px);
  mix-blend-mode: screen;
}

.page-home .home-fracture::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(30rem, 70vh, 42rem);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(3,0,6,0.12) 30%,
    rgba(3,0,6,0.46) 56%,
    rgba(3,0,6,0.28) 78%,
    transparent 100%
  );
  filter: blur(34px);
  transform: translateY(-1.5rem);
}

.text-section.is-alt::before {
  background:
    radial-gradient(ellipse 46rem 28rem at 28% 48%, rgba(216, 5, 135, 0.040), transparent 78%),
    radial-gradient(ellipse 42rem 26rem at 82% 54%, rgba(216, 5, 135, 0.028), transparent 80%);
}

.home-fracture > *,
.text-section > *,
.entries-section > *,
.closing-line > *,
.armature-panel > * {
  position: relative;
  z-index: 1;
}

.home-fracture {
  margin-top: -16rem;
  padding-top: clamp(16rem, 21vw, 22rem);
  background:
    linear-gradient(180deg,
      rgba(3,0,6,0) 0%,
      rgba(3,0,6,0.03) 36%,
      rgba(3,0,6,0.12) 74%,
      rgba(3,0,6,0.16) 100%);
}

.text-section,
.entries-section {
  margin-top: -1px;
}

.card-visual,
body.page-home .card-visual {
  background:
    radial-gradient(circle at 50% 40%, rgba(var(--card-rgb, var(--rgb-magenta)), 0.42), transparent 5.6rem),
    radial-gradient(ellipse 85% 62% at 82% 24%, rgba(var(--card-rgb, var(--rgb-magenta)), 0.18), transparent 72%),
    radial-gradient(ellipse 94% 72% at 22% 100%, rgba(216, 5, 135, 0.16), transparent 76%),
    linear-gradient(180deg, rgba(3,0,6,0.24), rgba(3,0,6,0.70)),
    image-set(url("incalculable-bg.webp") type("image/webp"), url("incalculable-bg.jpeg") type("image/jpeg")) center / cover;
  filter: saturate(1.42) brightness(0.76) contrast(1.10);
}

.entry-card {
  isolation: isolate;
  background:
    radial-gradient(ellipse 126% 72% at 50% 0%, rgba(var(--card-rgb, var(--rgb-magenta)), 0.20), transparent 64%),
    radial-gradient(ellipse 92% 68% at 96% 40%, rgba(var(--card-rgb, var(--rgb-magenta)), 0.12), transparent 70%),
    radial-gradient(ellipse 110% 72% at 18% 100%, rgba(216, 5, 135, 0.13), transparent 74%),
    linear-gradient(180deg, rgba(3,0,6,0.62), rgba(3,0,6,0.88)),
    image-set(url("incalculable-bg.webp") type("image/webp"), url("incalculable-bg.jpeg") type("image/jpeg")) center / cover;
  border: 1px solid rgba(var(--card-rgb, var(--rgb-magenta)), 0.34);
  outline: 1px solid rgba(244,241,232,0.080);
  outline-offset: -1px;
  box-shadow:
    0 0 0 1px rgba(244,241,232,0.040) inset,
    0 28px 82px rgba(0,0,0,0.56),
    0 0 54px rgba(var(--card-rgb, var(--rgb-magenta)), 0.18);
}

.entry-card::before {
  z-index: 0;
  background:
    radial-gradient(circle at 52% 8%, rgba(var(--card-rgb), 0.42), transparent 10rem),
    radial-gradient(ellipse 80% 54% at 84% 18%, rgba(var(--card-rgb), 0.20), transparent 72%),
    radial-gradient(ellipse 94% 64% at 10% 82%, rgba(216, 5, 135, 0.12), transparent 72%),
    linear-gradient(180deg, rgba(244,241,232,0.030), transparent 34%);
  opacity: 1;
}

.entry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(var(--card-rgb), 0.68) 22%, rgba(var(--card-rgb), 0.28) 52%, transparent 84%) top / 100% 1px no-repeat,
    radial-gradient(ellipse 30% 78% at 0% 44%, rgba(var(--card-rgb), 0.12), transparent 72%),
    radial-gradient(ellipse 30% 78% at 100% 62%, rgba(var(--card-rgb), 0.08), transparent 74%),
    linear-gradient(180deg, rgba(3,0,6,0.02) 0%, rgba(3,0,6,0.10) 52%, rgba(3,0,6,0.30) 100%);
}

.entry-card > * {
  position: relative;
  z-index: 1;
}

.card-visual,
body.page-home .card-visual {
  height: 11rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgba(var(--card-rgb, var(--rgb-magenta)), 0.38);
  box-shadow:
    0 0 0 1px rgba(244,241,232,0.040) inset,
    0 18px 46px rgba(0,0,0,0.30),
    0 0 34px rgba(var(--card-rgb), 0.12);
  filter: saturate(1.42) brightness(0.76) contrast(1.10);
}

.card-visual span {
  background:
    linear-gradient(180deg, rgba(3,0,6,0.44), rgba(3,0,6,0.18));
  box-shadow:
    0 0 0 1px rgba(244,241,232,0.08) inset,
    0 0 2.4rem rgba(var(--card-rgb), 0.48),
    0 0 5rem rgba(var(--card-rgb), 0.18);
}

.entry-cyan .card-visual,
.entry-cyan {
  background-position: 45% 52%;
}

.entry-cobalt .card-visual,
.entry-cobalt {
  background-position: 54% 50%;
}

.entry-orange .card-visual,
.entry-orange {
  background-position: 62% 56%;
}

.entry-card h3,
.entry-card em {
  color: var(--color-white);
  font-family: var(--font-voice);
}

.entry-card h3 {
  text-shadow: 0 0 1.5rem rgba(var(--card-rgb, var(--rgb-magenta)), 0.26);
}

.entry-card:hover {
  box-shadow:
    0 0 0 1px rgba(244,241,232,0.055) inset,
    0 32px 94px rgba(0,0,0,0.62),
    0 0 68px rgba(var(--card-rgb, var(--rgb-magenta)), 0.24);
}

.entries-intro {
  width: min(58rem, 100%);
  margin-left: 0;
  color: var(--color-white);
  font-family: var(--font-voice);
  text-align: left;
}

.entries-intro p {
  color: var(--color-white);
  font-family: var(--font-voice);
}

.section-body h4,
.section-body th,
.closing-line span,
blockquote cite,
em,
.breadcrumb .sep,
.breadcrumb .current,
.chip-dot,
details.disclosure .marker::before,
details.disclosure .marker::after {
  color: var(--color-white);
  font-family: var(--font-voice);
}

.text-link,
.page-intro .text-link,
.section-body .text-link {
  color: var(--color-white);
  font-family: var(--font-voice);
}

main :where(.micro, .section-label, .card-label, .field-label, .entry-status, .state-name) {
  color: var(--page-accent) !important;
  font-family: var(--font-voice) !important;
}

main .entry-card :where(.micro, .section-label, .card-label, .field-label, .entry-status, .state-name) {
  color: var(--card-accent) !important;
}

@media (min-width: 981px) {
  .page-home .hero-copy h1 {
    transform: none;
  }

  .page-home .hero-baseline {
    transform: translateX(-50%);
  }

  .entries-intro {
    width: min(58rem, calc(100% - var(--space-copy-shift)));
    margin-left: var(--space-copy-shift);
  }
}

@media (max-width: 900px) {
  .hero-image {
    filter: blur(7px) saturate(1.12) brightness(0.94) contrast(1.04);
    transform: scale(1.06);
  }

  .home-fracture {
    margin-top: -11rem;
    padding-top: 13rem;
  }
}

/* V9F home copy and rhythm pass */
.page-home .hero-baseline {
  bottom: clamp(6.4rem, 12vh, 9rem);
}

.page-home .home-fracture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 42rem);
  margin-top: -16rem;
  padding: calc(16rem - clamp(0.8rem, 2.2vw, 1.8rem) - 2.55rem) var(--site-pad) clamp(1.75rem, 3vw, 3rem);
}

.page-home .fracture-copy {
  grid-column: 2;
  width: min(42rem, 100%);
  margin-left: auto;
  margin-right: var(--space-right-copy-inset);
  padding-top: clamp(5rem, 6vw, 5.8rem);
  color: var(--color-white);
  text-align: left;
  transform: none;
}

.page-home .fracture-copy p {
  color: var(--color-white) !important;
}

.page-home .fracture-opener {
  grid-column: 1;
  align-self: start;
  width: min(36rem, 100%);
  margin: 0;
  padding-top: 1.55rem;
  text-align: left;
}

.page-home .fracture-opener,
.page-home .voice-line,
.page-home .voice-inline {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-style: normal;
}

.page-home .fracture-opener {
  margin-bottom: 0.55rem;
  font-size: var(--text-fracture) !important;
  line-height: var(--leading-lead) !important;
}

.page-home .text-section .section-body p.voice-line {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.page-home .voice-inline {
  font-weight: 700;
}

main .voice-line,
main .voice-inline {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-style: normal;
}

main .voice-inline {
  font-weight: 700;
}

.page-parchemin .section-body p.voice-line,
.page-home .section-body p.voice-line {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.page-charte .intro-label {
  color: var(--page-accent) !important;
  font-family: var(--font-voice) !important;
  font-size: var(--text-label) !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.page-kicker,
.conversation-label,
.quote-line {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-style: normal;
}

.page-kicker {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.conversation-label {
  width: min(48rem, 100%);
  margin: 2.2rem 0 0.8rem;
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: var(--leading-lead);
}

.conversation-label span {
  color: var(--color-white);
  font-family: var(--font-voice);
  font-weight: 700;
}

.conversation-next {
  margin-top: 3.1rem !important;
}

.section-break {
  margin-top: 1.35em !important;
}

.page-parchemin .spaced-after {
  margin-bottom: 1.8em;
}

.page-parchemin .armature-tight {
  margin-bottom: 0.26em !important;
  line-height: 1.3 !important;
}

.cta-spaced,
.section-body p.cta-spaced {
  margin-top: clamp(1.9rem, 2.8vw, 2.5rem);
  margin-bottom: clamp(1rem, 1.6vw, 1.35rem);
}

.cta-spaced + .cta-spaced,
.intro-copy-right p.cta-spaced + p.cta-spaced,
.section-body p.cta-spaced + p.cta-spaced {
  margin-top: clamp(1.5rem, 2.2vw, 2rem);
}

.page-telecharger .intro-copy-right > p.cta-spaced,
.page-telecharger .intro-copy-right > p.cta-spaced + p.cta-spaced {
  margin-top: clamp(1.4rem, 2.2vw, 1.8rem);
  margin-bottom: clamp(1.4rem, 2.2vw, 1.8rem);
}

.cta-before,
.section-body p.cta-before {
  margin-top: 3.3em;
}

.cta-after,
.section-body p.cta-after {
  margin-bottom: 1.6em;
}

.page-home .entries-intro {
  margin-bottom: clamp(2.1rem, 4vw, 3.4rem);
}

.page-home .entries-intro .intro-link {
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 232, 0.32);
  transition: color var(--ease-fast), border-color var(--ease-fast);
}

.page-home .entries-intro .intro-link:hover {
  color: var(--page-accent);
  border-color: var(--page-accent);
}

.page-home .entry-card {
  grid-template-rows: auto auto 1fr;
}

.page-home .entry-card h3 {
  min-height: 7rem;
}

.page-home .entry-card .entry-copy {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 0.78rem;
  min-height: 100%;
}

.page-home .entry-card .home-read,
.page-home .entry-card .entry-date {
  margin: 0;
}

.page-home .entry-card .home-read {
  min-height: 4.65em;
}

.page-home .entry-card .entry-date {
  min-height: 1.55em;
}

.page-home .entry-card .home-read-link {
  justify-self: start;
}

/* V9F global intro/nav harmonization */
.split-intro > p:first-child,
.split-intro > p:first-child em,
.split-intro > .page-kicker,
.page-home .fracture-opener {
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-style: normal;
}

.split-intro > p:first-child,
.split-intro > .page-kicker {
  font-size: var(--text-fracture);
  line-height: var(--leading-lead);
}

.intro-copy-right,
.intro-copy-right p,
.page-home .fracture-copy,
.page-home .fracture-copy p {
  font-family: var(--font-read) !important;
  font-size: var(--text-fracture);
  line-height: var(--leading-lead);
}

.intro-copy-right {
  margin-right: var(--space-right-copy-inset);
}

.logo,
.site-nav,
.site-nav a,
.site-footer,
.footer-brand,
.footer-links,
.footer-links a,
.footer-email {
  font-family: var(--font-voice);
  font-size: var(--text-nav);
  line-height: 1.4;
}

.logo,
.footer-brand {
  font-size: var(--text-logo);
}

.conversation-entry {
  width: min(48rem, 100%);
  margin: 2.2rem 0 0;
  text-align: left;
}

.conversation-person {
  margin: 0 0 0.65rem;
  color: var(--page-accent);
  font-family: var(--font-voice);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.conversation-topic {
  margin: 0 0 0.55rem;
  color: var(--color-white) !important;
  font-family: var(--font-voice) !important;
  font-size: var(--text-fracture);
  font-weight: 700;
  line-height: var(--leading-lead);
}

.conversation-entry p:not(.conversation-topic) {
  color: var(--ivory-full);
  font-family: var(--font-read) !important;
  font-size: var(--text-fracture);
  line-height: var(--leading-lead);
}

@media (min-width: 981px) {
  .page-home .fracture-copy {
    transform: translateX(calc(var(--space-copy-shift) - var(--space-right-copy-inset)));
  }

  .page-home .fracture-opener {
    transform: translateX(var(--space-copy-shift));
  }

  .page-home .entry-card .home-read {
    min-height: 7.75em;
  }
}

@media (max-width: 980px) {
  .page-home .home-fracture {
    grid-template-columns: 1fr;
  }

  .page-home .fracture-copy {
    grid-column: auto;
    margin-left: 0;
    margin-right: 0;
    padding-top: 1.8rem;
    transform: none;
  }

  .intro-copy-right {
    margin-right: 0;
  }

  .page-home .fracture-opener {
    grid-column: auto;
    transform: none;
  }
}

@media (max-width: 900px) {
  .page-home .hero-baseline {
    bottom: clamp(5rem, 11vh, 7rem);
  }

  .page-home .home-fracture {
    grid-template-columns: 1fr;
    margin-top: -11rem;
    padding-top: calc(11rem - clamp(0.8rem, 2.2vw, 1.8rem) - 2.25rem);
  }

  .page-home .fracture-copy {
    grid-column: auto;
    margin-left: 0;
    margin-right: 0;
    padding-top: 1.8rem;
    transform: none;
  }
}