/* ============================================================
   DANS LA NUIT, LE FEU — main.css
   Fondation : variables, @font-face, reset, grain double couche
   ============================================================ */

/* ----------------------------------------------------------
   1. FONTS — Wayfinder CF · Awesome Serif · David
   ---------------------------------------------------------- */

/* --- Wayfinder CF (licence complete — fichiers "Wayfinder CF *.otf") --- */
@font-face {
  font-family: "Wayfinder";
  src: url("../fonts/Wayfinder%20CF%20Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wayfinder";
  src: url("../fonts/Wayfinder%20CF%20Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Wayfinder";
  src: url("../fonts/Wayfinder%20CF%20Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Awesome Serif ExtraTall (mots géants OISEAU / LIBRE) --- */
@font-face {
  font-family: "Awesome ExtraTall";
  src: url("../fonts/AwesomeSerif-LightExtraTall.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Awesome ExtraTall";
  src: url("../fonts/AwesomeSerif-LightExtraTallItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Awesome ExtraTall";
  src: url("../fonts/AwesomeSerif-RegularExtraTall.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Awesome ExtraTall";
  src: url("../fonts/AwesomeSerif-MediumExtraTall.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Awesome ExtraTall";
  src: url("../fonts/AwesomeSerif-MediumExtraTallItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* --- Awesome Serif (proportions normales — baseline, corps serif italic) --- */
@font-face {
  font-family: "Awesome";
  src: url("../fonts/AwesomeSerif-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Awesome";
  src: url("../fonts/AwesomeSerif-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* --- Awesome Serif Tall (citations magnifiées) --- */
@font-face {
  font-family: "Awesome Tall";
  src: url("../fonts/AwesomeSerif-LightTall.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Awesome Tall";
  src: url("../fonts/AwesomeSerif-LightTallItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* --- David (corps, nav, labels, ticker) --- */
@font-face {
  font-family: "David";
  src: url("../fonts/David-Extra Light.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "David";
  src: url("../fonts/David-Extra Light Italic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "David";
  src: url("../fonts/David-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "David";
  src: url("../fonts/David-Light Italic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "David";
  src: url("../fonts/David-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------
   2. VARIABLES
   ---------------------------------------------------------- */
:root {
  /* Palette */
  --noir:      #070D18;   /* fond principal */
  --creme:     #f0e8d8;   /* texte principal */
  --ambre:     #C8622A;   /* accent principal */
  --ambre2:    #E07832;   /* accent secondaire / bichromie hautes lumieres */
  --bleu-nuit: #0D1830;   /* bichromie ombres */
  --beige:     #e8dece;   /* fond section Romane */

  /* Familles typo */
  --f-titre:   "Wayfinder", "Cormorant Garamond", Georgia, serif; /* titres, numeros (+ fallback accents sains) */
  --f-serif:   "Awesome", serif;              /* baseline hero, serif italic courant */
  --f-geant:   "Awesome ExtraTall", serif;    /* mots geants OISEAU / LIBRE */
  --f-cite:    "Awesome Tall", serif;         /* citations magnifiees */
  --f-corps:   "David", sans-serif;           /* corps, nav, labels, ticker */

  /* Tracking */
  --track-nav:   0.3em;
  --track-label: 0.5em;

  /* Easing signature */
  --ease-bezier: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index */
  --z-grain-1: 9000;
  --z-grain-2: 8999;
}

/* ----------------------------------------------------------
   3. RESET
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* --- Lenis (smooth scroll) — CSS recommandée --- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  background: var(--noir);
  color: var(--creme);
  font-family: var(--f-corps);
  font-weight: 200;
  line-height: 1.5;
  overflow-x: clip;   /* clip (pas hidden) : n'impose PAS overflow-y:auto -> Lenis pilote le document */
}

img,
video {
  display: block;
  max-width: 100%;
}

/* Conteneur des filtres SVG — hors flux, invisible */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ----------------------------------------------------------
   SCROLL REVEAL — apparition en cascade (stagger posé en JS)
   Délais par tier (eyebrow/titre/texte/liens) via transition-delay inline.
   ---------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-bezier),
              transform 0.8s var(--ease-bezier);
  will-change: opacity, transform;
}
.reveal-up.is-in {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------
   ACCENTS CAPITALES — Wayfinder (demo) : "case" 1 partout
   Aligne É/È/À sur la hauteur de capitale (corrige le "saut").
   ---------------------------------------------------------- */
.serie__title,
.agenda__title,
.agenda__name,
.agenda__date,
.footer__wordmark,
.portrait__name,
.lecteur__title,
.ep-card__num,
.mp-menu__num,
.menu__link {
  font-feature-settings: "case" 1;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ----------------------------------------------------------
   4. GRAIN — triple couche, fixe, fort, sur tout le site
   ---------------------------------------------------------- */
.grain,
.grain::after,
.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Le grain est volontairement SOUS les médias (z 48-50) : les éléments
   exclus (vidéos, photo Romane, vignettes) sont remontés au-dessus (z 60). */

/* Couche 1 — grain principal (overlay) */
.grain {
  z-index: 50;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Couche 2 — grain fin (multiply) */
.grain::after {
  z-index: 49;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Couche 3 — voile clair (screen) */
.grain::before {
  z-index: 48;
  opacity: 0.12;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n3)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}