/* ================================================================
   ARROW — NOTRE-HISTOIRE.CSS
   Page « Notre histoire » (variante A « Récit incarné »), mise en
   scène direction « Cinéma continu » : chapter-hero plein écran,
   numéros de fond outline, bande méta HUD, sections-chapitres,
   cadres photo placeholder, carton citation, carton final.
   Charge après tokens.css et base.css. Préfixe nh- pour éviter
   toute collision avec les classes partagées.
   ================================================================ */

/* ---------- Chapter hero plein écran ---------- */
.nh-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(96px, 14vh, 170px) clamp(24px, 6vw, 96px) clamp(110px, 14vh, 160px);
}
.nh-hero__glow {
  position: absolute;
  z-index: 0;
  width: 72vw;
  height: 72vw;
  max-width: 940px;
  max-height: 940px;
  left: 62%;
  top: 46%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(61, 155, 255, 0.1) 0%, transparent 62%);
  pointer-events: none;
}
.nh-hero__num {
  position: absolute;
  z-index: 1;
  right: -0.06em;
  top: 2%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13rem, 42vw, 32rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232, 236, 244, 0.07);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.nh-hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
}
.nh-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.2vw, 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: clamp(20px, 3vh, 34px);
}
.nh-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--primary-line);
}
.nh-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8.2vw, 6.4rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 clamp(24px, 4vh, 44px);
  max-width: 16ch;
}
.nh-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--primary), #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nh-hero__sub {
  max-width: 600px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--ink-dim);
  margin: 0 0 clamp(30px, 5vh, 48px);
}
.nh-hero__sub strong { color: var(--ink); font-weight: 500; }
.nh-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.nh-link-quiet {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
}
.nh-link-quiet:hover { color: var(--ink); border-color: var(--primary-line); }

/* Bande méta HUD au pied du hero */
.nh-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(22px, 4vw, 56px);
  padding: 16px clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: linear-gradient(to top, rgba(13, 13, 21, 0.85), rgba(13, 13, 21, 0));
}
.nh-meta b { font-weight: 400; color: var(--primary); }

/* ---------- Plan d'ouverture (photo hero pleine largeur) ---------- */
.nh-opening {
  padding: 0 clamp(24px, 6vw, 96px) clamp(70px, 10vh, 120px);
}
.nh-opening__inner { max-width: 1180px; margin: 0 auto; }
.nh-opening .nh-shot { aspect-ratio: 21 / 9; }

/* ---------- Sections-chapitres ---------- */
.nh-chap {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 13vh, 150px) clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
}
.nh-chap--tint { background: #0c0e17; }
.nh-chap__num {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11rem, 30vw, 22rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: rgba(232, 236, 244, 0.035);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.nh-chap .nh-chap__num { right: -0.08em; }
.nh-chap--flip .nh-chap__num {
  right: auto;
  left: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232, 236, 244, 0.07);
}
.nh-chap__inner {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.nh-chap--flip .nh-chap__inner > .nh-chap__copy { order: 2; }
.nh-chap--flip .nh-chap__inner > .nh-chap__visual { order: 1; }
.nh-chap__label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 20px;
}
.nh-chap__label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--primary-line);
}
.nh-chap__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.nh-chap__text {
  font-size: clamp(15px, 1.5vw, 17.5px);
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 52ch;
}
.nh-chap__text:last-child { margin-bottom: 0; }
.nh-chap__text strong { color: var(--ink); font-weight: 500; }

@media (max-width: 880px) {
  .nh-chap__inner { grid-template-columns: 1fr; gap: 34px; }
  .nh-chap--flip .nh-chap__inner > .nh-chap__copy { order: 1; }
  .nh-chap--flip .nh-chap__inner > .nh-chap__visual { order: 2; }
}

/* ---------- Cadres photo placeholder (viseur HUD) ---------- */
.nh-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, rgba(232, 236, 244, 0.05), rgba(13, 13, 21, 0) 55%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(232, 236, 244, 0.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(232, 236, 244, 0.03) 39px 40px),
    var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  box-shadow: 0 20px 48px -18px rgba(0, 0, 0, 0.6);
}
.nh-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(232, 236, 244, 0.045) 50%, transparent 58%);
}
.nh-shot__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(232, 236, 244, 0.25);
  opacity: 0.8;
}
.nh-shot__corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.nh-shot__corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.nh-shot__corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.nh-shot__corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.nh-shot__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--ink-faint);
  max-width: 36ch;
  margin: 0;
}
.nh-shot__label b {
  display: block;
  font-weight: 400;
  color: var(--warning);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10.5px;
  margin-bottom: 8px;
}
.nh-shot__caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Direction photo N&B désaturé (chapitres 01 à 04 + portrait) */
.nh-shot--nb { filter: saturate(0.4); }
.nh-shot--nb .nh-shot__corner { border-color: rgba(232, 236, 244, 0.25); }

/* Bascule couleur au chapitre de la plateforme (05) */
.nh-shot--color {
  filter: none;
  background:
    linear-gradient(145deg, rgba(61, 155, 255, 0.12), rgba(13, 13, 21, 0) 55%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(232, 236, 244, 0.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(232, 236, 244, 0.03) 39px 40px),
    var(--surface-2);
  border-color: var(--primary-line);
  box-shadow: 0 0 42px rgba(61, 155, 255, 0.14), 0 20px 48px -18px rgba(0, 0, 0, 0.6);
}
.nh-shot--color .nh-shot__corner { border-color: var(--primary-line); }
.nh-shot--color .nh-shot__caption { color: var(--primary); }

/* Chapitre 06 : photo chaleureuse légèrement colorée */
.nh-shot--warm {
  filter: saturate(0.75);
  background:
    linear-gradient(145deg, rgba(245, 158, 11, 0.07), rgba(13, 13, 21, 0) 55%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(232, 236, 244, 0.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(232, 236, 244, 0.03) 39px 40px),
    var(--surface-2);
}

/* ---------- Carton citation du fondateur (LE moment magenta) ---------- */
.nh-quote {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  padding: clamp(100px, 16vh, 180px) clamp(24px, 6vw, 96px);
  text-align: center;
}
.nh-quote__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(236, 72, 153, 0.07) 0%, rgba(61, 155, 255, 0.05) 40%, transparent 65%);
  pointer-events: none;
}
.nh-quote__inner { position: relative; max-width: 900px; margin: 0 auto; }
.nh-quote__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brand-magenta);
  margin: 0 0 30px;
}
.nh-quote__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.8rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 30px;
}
.nh-quote__text em {
  font-style: normal;
  background: linear-gradient(100deg, var(--primary) 20%, var(--brand-magenta) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nh-quote__author {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 46px;
}
.nh-quote__portrait {
  max-width: 300px;
  margin: 0 auto;
}
.nh-quote__portrait .nh-shot { aspect-ratio: 1 / 1; padding: 20px; }
.nh-quote__portrait .nh-shot__label { font-size: 11px; max-width: 30ch; }

/* ---------- Carton final + CTA démo ---------- */
.nh-final {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(110px, 18vh, 200px) clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--hairline);
}
.nh-final__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(61, 155, 255, 0.09) 0%, transparent 65%);
  pointer-events: none;
}
.nh-final__inner { position: relative; max-width: 900px; margin: 0 auto; }
.nh-final__kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 30px;
}
.nh-final__card {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 46px;
}
.nh-final__card em {
  font-style: normal;
  background: linear-gradient(100deg, var(--primary), #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Mention Venio discrète ---------- */
.nh-venio {
  padding: 0 clamp(24px, 6vw, 96px) 40px;
  text-align: center;
}
.nh-venio p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- Reveals orchestrés ----------
   L'état masqué ne s'applique QUE si notre-histoire.js a posé la
   classe nh-anim sur <html> : sans JavaScript (ou si le script
   échoue), la page reste entièrement lisible. */
.nh-anim .nh-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.nh-anim .nh-reveal-x {
  opacity: 0;
  transform: translateX(70px);
  transition: opacity 1.3s var(--ease-out), transform 1.3s var(--ease-out);
}
.nh-anim .nh-chap--flip .nh-reveal-x { transform: translateX(-70px); }
.nh-anim .in-view .nh-reveal,
.nh-anim .in-view.nh-reveal { opacity: 1; transform: translateY(0); }
.nh-anim .in-view .nh-reveal-x { opacity: 1; transform: translateX(0); }
.nh-d1 { transition-delay: 0.1s; }
.nh-d2 { transition-delay: 0.22s; }
.nh-d3 { transition-delay: 0.34s; }
.nh-d4 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .nh-anim .nh-reveal,
  .nh-anim .nh-reveal-x {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}