/* ─────────────────────────────────────────────
   STYLE V8 — COUCHES ELITE
   Charge APRES style-v7.css. Strictement additif.
   Modules :
     1. Sections cinématiques pleines pages (.cine)
     2. Calligraphie SVG d'accueil (.signet)
     3. Magnetic CTAs
     4. Numérotation romaine de chapitre (.chapitre)
     5. Easter egg 1948 (.sceau-1948)
     6. Time-of-day adaptation (variables CSS)
     7. Empreinte de visite (.empreinte)
     8. Dévoilement de tissu (.rv-cloth)
───────────────────────────────────────────── */


/* ───────── 1. SECTIONS CINEMATIQUES DEDIEES ─────────
   Pleine largeur, 92vh, vidéo presque pure. Pensées comme un
   plan de cinéma — pas comme une décoration de page. */

.cine {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 600px;
  max-height: 920px;
  overflow: hidden;
  background: #14120e;
}

.cine-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: grayscale(.42) contrast(1.06) brightness(.92) saturate(.88);
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 2.4s cubic-bezier(.22,.61,.36,1),
              transform 22s linear;
  will-change: opacity, transform;
  /* léger zoom continu — sensation de respiration cinéma */
  transform: scale(1.02);
}

.cine.is-in .cine-bg {
  opacity: 1;
  transform: scale(1.05);   /* zoom très lent en boucle */
}

/* Voile bas — dégradé qui assure lisibilité de la citation
   sans écraser la vidéo */
.cine-veil--bottom {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(20,18,14,0)    0%,
      rgba(20,18,14,0)    35%,
      rgba(20,18,14,.35) 70%,
      rgba(20,18,14,.72) 100%),
    linear-gradient(90deg,
      rgba(20,18,14,.18) 0%,
      rgba(20,18,14,0)    35%,
      rgba(20,18,14,0)    65%,
      rgba(20,18,14,.22) 100%);
}

/* Cadre intérieur en or désaturé très fin — référence aux
   passe-partout des photographies de musée */
.cine-frame {
  position: absolute;
  inset: 28px;
  z-index: 2;
  pointer-events: none;
  border: .5px solid rgba(184, 159, 110, .26);
  /* coins légèrement renforcés via inset shadow */
  box-shadow: inset 0 0 0 .5px rgba(247,243,234,.04);
}

@media (max-width: 700px) {
  .cine-frame { inset: 18px; }
}

/* Meta haut-gauche — numéro romain + label de chapitre */
.cine-meta {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  color: rgba(247,243,234,.78);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 1.4s cubic-bezier(.22,.61,.36,1) .8s,
              transform 1.4s cubic-bezier(.22,.61,.36,1) .8s;
}
.cine.is-in .cine-meta {
  opacity: 1;
  transform: translateY(0);
}
.cine-meta--tl {
  top: 56px;
  left: 56px;
}
@media (max-width: 700px) {
  .cine-meta--tl { top: 38px; left: 38px; }
}

.cine-num {
  font-family: 'EB Garamond', 'Cormorant Garamond', serif;
  font-size: 18px;
  letter-spacing: 4px;
  font-weight: 400;
  color: rgba(184, 159, 110, .78);
}
.cine-cap {
  font-family: 'Tenor Sans', sans-serif;
  font-size: 9px;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  color: rgba(247,243,234,.58);
}

/* Citation bas-droite — en italique Cormorant, comme un cartouche
   de générique cinéma. Réservé aux moments forts. */
.cine-quote {
  position: absolute;
  z-index: 3;
  bottom: 64px;
  right: 64px;
  max-width: 520px;
  text-align: right;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 2s cubic-bezier(.22,.61,.36,1) 1.2s,
              transform 2s cubic-bezier(.22,.61,.36,1) 1.2s;
}
.cine.is-in .cine-quote {
  opacity: 1;
  transform: translateY(0);
}

.cine-quote blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.6vw, 36px);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.2px;
  color: rgba(247,243,234,.94);
  margin: 0 0 14px;
  text-shadow: 0 1px 18px rgba(20,18,14,.45);
}
.cine-quote blockquote em {
  font-style: italic;
  color: rgba(247,243,234,.96);
}
.cine-quote figcaption {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: .6px;
  color: rgba(247,243,234,.62);
}

@media (max-width: 700px) {
  .cine-quote {
    bottom: 38px;
    right: 38px;
    left: 38px;
    max-width: none;
    text-align: left;
  }
  .cine-quote blockquote { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cine.is-in .cine-bg { transform: none; }
  .cine-bg { transition: opacity .8s linear; }
}


/* ───────── 2. CALLIGRAPHIE D'ACCUEIL (.signet) ─────────
   Apparaît 1× par session après le rituel d'entrée sur index.html.
   Pure SVG, animée via stroke-dasharray. */

.signet {
  position: fixed;
  inset: 0;
  z-index: 9996;             /* sous grain (9998) et vignette (9997) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(247,243,234,.0);
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.22,.61,.36,1);
}
.signet.is-on { opacity: 1; }

.signet svg {
  width: clamp(280px, 36vw, 540px);
  height: auto;
  overflow: visible;
}
.signet svg path,
.signet svg line {
  stroke: rgba(40, 36, 30, .82);
  stroke-width: .6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}
.signet.is-on svg path,
.signet.is-on svg line {
  animation: signetDraw 3.6s cubic-bezier(.55,.06,.45,1) forwards;
}
.signet.is-on svg path:nth-child(2) { animation-delay: .25s; }
.signet.is-on svg path:nth-child(3) { animation-delay: .5s; }
.signet.is-on svg path:nth-child(4) { animation-delay: .75s; }
.signet.is-on svg path:nth-child(5) { animation-delay: 1.0s; }
.signet.is-on svg line          { animation-delay: 1.6s; animation-duration: 1.8s; }

@keyframes signetDraw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signet { display: none !important; }
}


/* ───────── 3. MAGNETIC CTAs ─────────
   Le déplacement est piloté en JS via --mx/--my.
   Limité aux .btn-primary et .btn-l (CTA forts uniquement). */

.btn-primary,
.btn-l,
.btn[class*="primary"] {
  transform: translate3d(var(--v8-mx, 0px), var(--v8-my, 0px), 0);
  transition: transform .42s cubic-bezier(.22,.61,.36,1),
              background-color .42s cubic-bezier(.22,.61,.36,1) !important;
  will-change: transform;
}


/* ───────── 4. CHAPITRE ROMAIN ─────────
   Fixé en bas-droite, change selon la page courante.
   Volontairement minuscule — repère, pas décoration. */

.chapitre {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  user-select: none;
  font-family: 'EB Garamond', 'Cormorant Garamond', serif;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.6s cubic-bezier(.22,.61,.36,1) 1.2s,
              transform 1.6s cubic-bezier(.22,.61,.36,1) 1.2s;
}
.chapitre.is-on {
  opacity: 1;
  transform: translateY(0);
}
.chapitre-num {
  font-size: 11px;
  letter-spacing: 3.5px;
  color: rgba(40, 36, 30, .42);
}
.chapitre-cap {
  font-size: 8.5px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  font-family: 'Tenor Sans', sans-serif;
  color: rgba(40, 36, 30, .32);
}

/* En sections noires, on inverse */
body.in-noir .chapitre-num { color: rgba(247,243,234,.55); }
body.in-noir .chapitre-cap { color: rgba(247,243,234,.40); }

/* Sur mobile, on cache pour ne pas encombrer */
@media (max-width: 700px) {
  .chapitre { display: none; }
}


/* ───────── 5. SCEAU 1948 ─────────
   S'affiche brièvement quand on tape "1948" au clavier.
   Sceau circulaire de cire — pure CSS + SVG. */

.sceau-1948 {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 10001;
  pointer-events: none;
  background: rgba(20,18,14,.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1);
}
.sceau-1948.is-on { opacity: 1; }

.sceau-1948-disc {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;       /* centrage absolu fiable */
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(204, 174, 118, 1) 0%,
      rgba(160, 122, 78, 1) 40%,
      rgba(96, 64, 36, 1) 100%);
  box-shadow:
    0 8px 28px rgba(20,18,14,.42),
    inset 0 2px 6px rgba(255,255,255,.18),
    inset 0 -2px 8px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(247,243,234,.92);
  font-family: 'EB Garamond', serif;
  transform: scale(.78) rotate(-8deg);
  transition: transform 1.2s cubic-bezier(.34, 1.56, .64, 1);
}
.sceau-1948.is-on .sceau-1948-disc {
  transform: scale(1) rotate(0deg);
}
.sceau-1948-top {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: .82;
}
.sceau-1948-num {
  font-size: clamp(36px, 5vw, 56px);
  font-style: italic;
  letter-spacing: 2px;
  margin: 6px 0;
}
.sceau-1948-bot {
  font-size: 10.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: .78;
}


/* ───────── 6. TIME-OF-DAY ADAPTATION ─────────
   Variable CSS appliquée à <html> en JS — palette se réchauffe
   à l'aube/crépuscule, s'approfondit la nuit. Très subtil. */

html {
  --v8-tod-warm: 0;          /* 0 = neutre, +1 = chaud, -1 = froid */
}

/* Réchauffement subtil sur le fond ivoire principal.
   IMPORTANT : appliqué sur <html>, pas sur <body> — un filter sur body
   crée un nouveau containing block qui casse `position: fixed` sur ses
   descendants (cookies, IA proactive, audio invite, etc.). */
html {
  filter:
    saturate(calc(1 + var(--v8-tod-warm, 0) * .025))
    hue-rotate(calc(var(--v8-tod-warm, 0) * .8deg));
  transition: filter 8s linear;
}

@media (prefers-reduced-motion: reduce) {
  html { filter: none; transition: none; }
}


/* ───────── 7. EMPREINTE DE VISITE ─────────
   Petite signature en bas du footer, mémoire de session. */

.empreinte {
  display: block;
  margin-top: 36px;
  padding-top: 18px;
  border-top: .5px solid rgba(247,243,234,.06);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: .4px;
  color: rgba(185,181,173,.32);
  text-align: center;
  opacity: 0;
  transition: opacity 2s cubic-bezier(.22,.61,.36,1) .4s;
}
.empreinte.is-on { opacity: 1; }
.empreinte-sep {
  display: inline-block;
  margin: 0 8px;
  opacity: .5;
}


/* ───────── 8. DEVOILEMENT DE TISSU ─────────
   Variante de .rv pour les titres principaux des HEROes :
   au lieu d'un fade, un voile qui se lève du bas.
   Activé via classe .rv-cloth ajoutée en JS. */

.rv-cloth {
  position: relative;
  display: inline-block;
}
.rv-cloth::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--ivoire, #f7f3ea) 0%,
    var(--ivoire, #f7f3ea) 50%,
    rgba(247,243,234,0) 100%);
  transform: translateY(0);
  transition: transform 1.6s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.rv-cloth.in::after {
  transform: translateY(-105%);
}

@media (prefers-reduced-motion: reduce) {
  .rv-cloth::after { display: none; }
}