/* ============================================================
   PORTFOLIO — feuille de style
   Charte : noir chaud, ambre bronze en accent rare, Fraunces / Schibsted
   Grotesk, grain filmique, letterbox, easings lents.
   ============================================================ */

:root{
  --bg: #0C0B0A;
  --surface: #15130F;
  --ink: #F4EFE6;
  --muted: #9A948A;
  --amber: #C79A5B;
  --amber-soft: rgba(199,154,91,0.35);

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --ease-film: cubic-bezier(.16,.74,.24,1);
  --ease-film-slow: cubic-bezier(.19,1,.22,1);

  --container: 1440px;
  --gutter: clamp(20px, 5vw, 96px);
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }

html{
  background: var(--bg);
  /* Pas de `scroll-behavior: smooth` ici : cela entre en conflit avec
     l'épinglage GSAP du hero (décalages / saccades). Le défilement doux au
     clic sur les liens de nav est géré en JS (voir js/main.js). */
}

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  cursor: none;
  overflow-x: hidden;
}

@media (max-width: 860px), (hover:none){
  body{ cursor: auto; }
  .custom-cursor{ display:none; }
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; background:none; border:none; color:inherit; }
img{ max-width:100%; display:block; }

.eyebrow{
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display:inline-block;
}

.display-heading{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0.3em 0 0;
  color: var(--ink);
}

/* ---------------------------------------------------------
   Grain filmique + curseur custom (overlays globaux)
   --------------------------------------------------------- */
.grain-overlay{
  position: fixed; inset:0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("../assets/textures/grain_0.png");
  background-size: 256px 256px;
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: grain-shift 0.6s steps(4) infinite;
}
@keyframes grain-shift{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-4%,3%); }
  50%{ transform: translate(3%,-4%); }
  75%{ transform: translate(-3%,-3%); }
  100%{ transform: translate(0,0); }
}

.custom-cursor{
  position: fixed;
  top:0; left:0;
  width: 22px; height: 22px;
  margin-left:-11px; margin-top:-11px;
  border: 1px solid var(--amber);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(0,0,0);
  transition: width .25s var(--ease-film), height .25s var(--ease-film), opacity .25s;
  opacity: 0.75;
}
.custom-cursor.is-hover{ width: 46px; height: 46px; margin-left:-23px; margin-top:-23px; background: var(--amber-soft); }
.custom-cursor.is-hidden{ opacity: 0; }

.timecode-hud{
  position: fixed;
  bottom: 20px; left: 20px;
  z-index: 60;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--muted);
  opacity: 0.55;
  pointer-events: none;
  mix-blend-mode: normal;
}
@media (max-width: 700px){ .timecode-hud{ display:none; } }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 50;
  display:flex; align-items:center; justify-content: space-between;
  padding: 28px var(--gutter);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 1s var(--ease-film-slow), transform 1s var(--ease-film-slow);
  mix-blend-mode: difference;
}
.site-header.is-visible{ opacity:1; transform: translateY(0); }
/* S'efface quand on descend, revient dès qu'on remonte (lecture immersive). */
.site-header.is-visible.is-away{
  transform: translateY(-130%);
  transition: opacity .4s var(--ease-film), transform .55s var(--ease-film);
}

/* Fine ligne ambrée de progression de lecture, tout en haut. */
.scroll-progress{
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--amber), #e0b878);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
  opacity: .85;
}
body.nle-live .scroll-progress{ opacity: .45; }
.site-header__mark{
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
}
.site-header__nav{ display:flex; gap: clamp(16px,3vw,40px); }
.site-header__nav a{
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.85;
  position: relative;
}
.site-header__nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-6px;
  height:1px; background: var(--amber);
  transition: right .5s var(--ease-film);
}
.site-header__nav a:hover::after{ right:0; }
@media (max-width: 700px){ .site-header__nav{ display:none; } }

/* ---------------------------------------------------------
   HERO — scroll-driven façon Apple (voir js/hero-scrub.js) : le hero fait
   exactement une hauteur d'écran et est ÉPINGLÉ par GSAP pendant le scroll.
   Le canvas remplit TOUT l'écran (plus de barres letterbox noires qui
   coupaient l'image). De fins dégradés en haut/bas assurent seulement la
   lisibilité du menu et du titre par-dessus la vidéo.
   --------------------------------------------------------- */
.hero{
  position: relative;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--bg);
}
.hero__canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dégradés de lisibilité (pas des barres pleines) — n'apparaissent que
   pendant que le hero est à l'écran. */
.hero::before,
.hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 26vh;
  z-index: 3;
  pointer-events: none;
  opacity: 0.9;
}
.hero::before{
  top: 0;
  background: linear-gradient(to bottom, rgba(12,11,10,0.65), transparent);
}
.hero::after{
  bottom: 0;
  background: linear-gradient(to top, rgba(12,11,10,0.85), transparent);
}

.hero__content{
  position:absolute;
  left: var(--gutter);
  bottom: clamp(80px, 16vh, 160px);
  z-index: 4;
  max-width: 900px;
}
.hero__eyebrow{ margin-bottom: 18px; }
.hero__title{
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.94;
  font-weight: 400;
  margin: 0 0 20px;
  color: var(--ink);
  text-wrap: balance;
}
.hero__byline{
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.hero__scrollcue{
  position: absolute;
  right: var(--gutter);
  bottom: clamp(80px, 16vh, 160px);
  z-index: 4;
  display:flex; flex-direction: column; align-items:center; gap: 12px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
}
.hero__scrollcue-line{
  width:1px; height: 64px;
  background: linear-gradient(var(--amber), transparent);
  animation: cue-pulse 2.2s var(--ease-film) infinite;
}
@keyframes cue-pulse{
  0%{ opacity: .2; transform: scaleY(0.4); transform-origin: top; }
  50%{ opacity: 1; transform: scaleY(1); transform-origin: top; }
  100%{ opacity: .2; transform: scaleY(0.4); transform-origin: top; }
}
@media (max-width: 700px){ .hero__scrollcue{ display:none; } }

.fade-seam{
  height: 14vh;
  background: linear-gradient(var(--bg), var(--bg));
  position: relative;
  z-index: 3;
}

/* ---------------------------------------------------------
   Sections génériques
   --------------------------------------------------------- */
.section{
  position: relative;
  padding: clamp(90px,14vh,180px) var(--gutter) clamp(60px,10vh,120px);
  max-width: var(--container);
  margin: 0 auto;
}
.section-heading{
  margin-bottom: clamp(40px, 7vw, 90px);
}
.section-heading .display-heading{
  font-size: clamp(40px, 6vw, 84px);
}

/* ---------------------------------------------------------
   Catégories — grille éditoriale
   --------------------------------------------------------- */
/* Mise en page éditoriale pour 3 catégories : Voyage (cover portrait) en
   grande carte haute à gauche ; Corporate + Motion Design (covers paysage)
   empilées à droite. */
.category-grid{
  display:grid;
  grid-template-columns: 5fr 7fr;
  gap: 18px;
}
.category-card{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: pointer;
}
.category-card:nth-child(1){ grid-row: 1 / span 2; }      /* Voyage — carte haute */
.category-card:nth-child(2){ aspect-ratio: 16/9; }        /* Corporate */
.category-card:nth-child(3){ aspect-ratio: 16/9; }        /* Motion Design */

.category-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease-film-slow), filter 1.4s var(--ease-film-slow);
  /* Traitement cinématographique : les covers fournies sont vives/claires ;
     on les assombrit et réchauffe pour les fondre dans le thème sombre. */
  filter: saturate(0.72) brightness(0.62) contrast(1.05) sepia(0.12);
}
.category-card::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(12,11,10,0.15) 0%, rgba(12,11,10,0) 35%, rgba(12,11,10,0.9) 100%),
    linear-gradient(0deg, rgba(58,36,23,0.18), rgba(12,11,10,0.1));
  transition: opacity .6s var(--ease-film);
}
.category-card:hover .category-card__img{
  transform: scale(1.1);
  filter: saturate(0.9) brightness(0.75) contrast(1.05) sepia(0.06);
}
.category-card__label{
  position:absolute; left: 28px; bottom: 26px; right: 28px;
  z-index: 2;
}
.category-card__index{
  display:block;
  font-size: 11px; letter-spacing: 0.2em; color: var(--amber);
  margin-bottom: 8px;
}
.category-card__title{
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 40px);
  color: var(--ink);
}
.category-card__desc{
  font-size: 13px;
  color: var(--muted);
  max-width: 34ch;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease-film), transform .5s var(--ease-film);
}
.category-card:hover .category-card__desc{ opacity: 1; transform: translateY(0); }

@media (max-width: 760px){
  .category-grid{ grid-template-columns: 1fr; }
  .category-card, .category-card:nth-child(n){ grid-row: auto !important; aspect-ratio: 4/5 !important; }
}

/* ---------------------------------------------------------
   A propos
   --------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 6vw, 100px);
  align-items: start;
}
.section-heading--sticky{ position: sticky; top: 140px; margin-bottom:0; }
.about-copy p{
  font-size: clamp(18px, 2vw, 26px);
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.3em;
  max-width: 34ch;
}
@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .section-heading--sticky{ position: static; }
}

/* ---------------------------------------------------------
   Matériel — grille simple : chaque objet 3D dans sa case.
   Rendu : <model-viewer> par case (js/render.js) + vue rapprochée (js/gear.js).
   --------------------------------------------------------- */
.gear-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(20px, 3vw, 40px) clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 5vh, 56px);
}
@media (max-width: 640px){
  .gear-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 14px; }
}

.gear-cell{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}
.gear-cell__stage{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* halo ambré très discret derrière l'objet */
  background: radial-gradient(58% 52% at 50% 46%, rgba(199,154,91,0.09), transparent 72%);
}
/* Lévitation : durée / décalage variés par case (variables inline). */
.gear-cell__viewer{
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  background: transparent;
  animation: gear-float var(--fdur, 6s) ease-in-out infinite;
  animation-delay: var(--fdelay, 0s);
  transition: transform .5s var(--ease-film);
}
.gear-cell:hover .gear-cell__viewer{ transform: scale(1.05); }
@keyframes gear-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce){
  .gear-cell__viewer{ animation: none; }
}

.gear-cell__caption{ margin-top: 6px; max-width: 26ch; }
.gear-cell__num{
  display: block;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 6px;
}
.gear-cell__name{
  font-family: var(--font-display); font-weight: 400;
  font-size: 16px; line-height: 1.2; margin: 0 0 5px; color: var(--ink);
}
.gear-cell__desc{ font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }

/* --- Vue rapprochée (overlay au clic) --- */
/* L'objet « sort » de sa case et glisse au premier plan (animation FLIP pilotée
   par js/gear.js). Seul le fond s'assombrit en fondu ; l'objet reste opaque et
   se déplace via un transform sur .gear-focus__stage. */
.gear-focus{
  position: fixed; inset: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.gear-focus[hidden]{ display: none; }
.gear-focus__backdrop{
  position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 50% 40%, rgba(12,11,10,0.82), rgba(6,5,4,0.94));
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .5s var(--ease-film);
}
.gear-focus.is-open .gear-focus__backdrop{ opacity: 1; }
.gear-focus__stage{
  position: relative;
  width: min(78vw, 78vh, 720px);
  height: min(78vw, 78vh, 720px);
  display: flex; flex-direction: column; align-items: center;
  transform-origin: center center;
  transition: transform .55s var(--ease-film-slow);
  will-change: transform;
}
.gear-focus__caption, .gear-focus__hint{
  opacity: 0;
  transition: opacity .4s ease .12s;
}
.gear-focus.is-open .gear-focus__caption,
.gear-focus.is-open .gear-focus__hint{ opacity: 1; }
.gear-focus__viewer{
  width: 100%; height: 100%;
  --poster-color: transparent; background: transparent;
  cursor: grab;
}
.gear-focus__viewer:active{ cursor: grabbing; }
.gear-focus__caption{ text-align: center; margin-top: 4px; max-width: 42ch; }
.gear-focus__num{
  display: block;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 8px;
}
.gear-focus__name{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin: 0 0 8px; color: var(--ink);
}
.gear-focus__desc{ font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.gear-focus__hint{
  position: absolute; bottom: -34px; left: 50%; transform: translateX(-50%);
  margin: 0; white-space: nowrap;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); opacity: 0.6;
}
@media (max-width: 640px){
  .gear-focus__stage{ width: 88vw; height: 70vh; }
}

/* ---------------------------------------------------------
   Parcours — interface façon logiciel de montage (js/timeline.js)
   --------------------------------------------------------- */
.nle-section{ max-width: 1500px; }
.nle{
  margin-top: clamp(24px, 4vh, 48px);
  /* Plein cadre : occupe toute la fenêtre (façon moniteur de montage). */
  height: 100vh;
  width: 100vw; margin-left: calc(50% - 50vw);
  display: flex; flex-direction: column;
  background: #0b0a09;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.55);
  /* Pas de sélection de texte accidentelle en scrubbant. */
  -webkit-user-select: none; user-select: none;
}
.nle{ position: relative; }
/* Mode immersif : le chrome du site s'efface, on est « dans » le logiciel. */
body.nle-live .site-header{ opacity: 0; pointer-events: none; }
body.nle-live #timecode-hud, body.nle-live .footer-meta{ opacity: 0; }
/* Perf : pas de grain animé en blend par-dessus les vidéos du montage. */
body.nle-live .grain-overlay{ display: none; }
.site-header{ transition: opacity .5s var(--ease-film); }
body.nle-live .nle{ animation: nle-zoomin 0.6s var(--ease-film); }
@keyframes nle-zoomin{ from{ transform: scale(0.97); opacity: 0.5; } to{ transform: scale(1); opacity: 1; } }
.nle__topbar{
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px;
  background: linear-gradient(#1a1815, #141210);
  border-bottom: 1px solid rgba(0,0,0,0.6);
}
.nle__topbar .nle__app{ position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.nle__app .nle__dim{ color: var(--muted); }
.nle__topbar{ position: relative; }
.nle__dots{ display: inline-flex; gap: 7px; }
.nle__dots i{ width: 11px; height: 11px; border-radius: 50%; background: #3a352d; }
.nle__dots i:nth-child(1){ background: #e0685f; }
.nle__dots i:nth-child(2){ background: #e3b34e; }
.nle__dots i:nth-child(3){ background: #62b95a; }
.nle__topbar .nle__hint{ font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Rangée haute : 3 panneaux (lecteur réduit au profit de la timeline) */
.nle__panes{ flex: 1 1 auto; display: flex; min-height: 0; }
.nle__sidebar{
  flex: 0 0 224px; min-width: 0;
  background: #100e0c; border-right: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto; padding: 12px;
}
.nle__viewer{
  flex: 1 1 auto; position: relative; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.nle__video, .nle__photo{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fondu de coupe : la vidéo s'éteint brièvement puis la suivante apparaît. */
.nle__video{ transition: opacity .28s ease; }
.nle__video.is-switching{ opacity: 0; }
.nle__photo{ position: absolute; inset: 0; animation: nle-kenburns 22s ease-in-out infinite alternate; }
@keyframes nle-kenburns{ from{ transform: scale(1.02) translate(0,0);} to{ transform: scale(1.14) translate(-2%, -2%);} }
/* Grain du lecteur RETIRÉ (allège le rendu, plus net + moins lourd sur Safari). */
.nle__grain{ display: none; }
.nle__black{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.25); font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  background: #000; z-index: 1;
}
.nle__badge{
  position: absolute; right: 14px; bottom: 12px;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(10,9,8,0.62); backdrop-filter: blur(6px);
  border: 1px solid rgba(199,154,91,0.4);
  color: var(--ink); font-size: 12px; letter-spacing: .08em;
  font-family: var(--font-display);
}
.nle__inspector{
  flex: 0 0 312px; min-width: 0;
  background: #100e0c; border-left: 1px solid rgba(255,255,255,0.06);
  overflow-y: auto; padding: 20px 18px;
}

/* Bibliothèque */
.nle-lib__head, .nle-browser__head{
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.nle-lib__proj{ font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.nle-lib__disc{ color: var(--amber); font-size: 10px; margin-right: 4px; }
.nle-lib__items{ list-style: none; margin: 0 0 18px; padding: 0 0 0 8px; }
.nle-lib__items li{ font-size: 12.5px; color: var(--ink); padding: 3px 0; }
.nle-lib__ic{ color: var(--amber); font-size: 9px; margin-right: 6px; }
.nle-lib__sub{ color: var(--muted); font-size: 11.5px !important; padding-left: 15px !important; }
.nle-browser{ border-top: 1px solid rgba(255,255,255,0.06); padding-top: 14px; }
.nle-browser__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.nle-thumb{
  aspect-ratio: 1/1; border-radius: 3px; background-size: cover; background-position: center;
  border: 1px solid rgba(255,255,255,0.06);
}
.nle-browser__empty{ color: var(--muted); font-size: 12px; }

/* Inspecteur — clair et hiérarchisé */
.nle-insp__head{ margin-bottom: 16px; }
.nle-insp__badge{
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.nle-insp__role{ font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.15; margin: 0 0 4px; color: var(--ink); }
.nle-insp__company{ font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.nle-insp__meta{ margin: 0 0 18px; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 10px; }
.nle-insp__meta > div{ display: flex; flex-direction: column; gap: 2px; }
.nle-insp__meta dt{ font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.nle-insp__meta dd{ margin: 0; font-size: 13px; color: var(--ink); }
.nle-insp__block{ margin-bottom: 18px; }
.nle-insp__block h4{ font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin: 0 0 10px; font-weight: 500; }
.nle-insp__block ul{ list-style: none; margin: 0; padding: 0; }
.nle-insp__block li{ position: relative; font-size: 13px; line-height: 1.55; color: var(--ink); padding: 0 0 10px 16px; }
.nle-insp__block li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.nle-insp__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.nle-insp__chips span{
  font-size: 11px; letter-spacing: .03em; color: var(--ink);
  padding: 5px 11px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.04);
}

/* Infos projet (coin haut-gauche du lecteur) */
.nle__osd{
  position: absolute; top: 12px; left: 14px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(244,239,230,0.5); font-variant-numeric: tabular-nums;
  pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Transport (superposé en bas du lecteur, façon moniteur) */
.nle__transport{
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.72));
}
.nle__play{
  width: 32px; height: 28px; border-radius: 6px; cursor: pointer; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.1);
  color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.nle__play:hover{ background: rgba(255,255,255,0.2); }
.nle__play.is-playing{ background: var(--amber); border-color: var(--amber); color: #14110c; }
.nle__tc{ font-size: 11px; letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nle__tc--tot{ color: var(--muted); }
.nle__scrub{ flex: 1 1 auto; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.18); overflow: hidden; }
.nle__scrub-fill{ height: 100%; width: 0; background: var(--amber); }
.nle__tc--run{ color: var(--amber); font-weight: 600; letter-spacing: .1em; }
.nle__play{ transition: background .25s ease, box-shadow .25s ease, transform .2s ease; }
.nle__play:hover{ box-shadow: 0 0 0 4px rgba(199,154,91,0.18); transform: scale(1.05); }

/* Timeline multi-pistes — hauteur = contenu (remplit le bas, pas de barre vide).
   Offset par transform, PAS de scroll natif (sinon la molette scrolle la timeline
   au lieu de la page → pin bloqué). */
.nle__timeline{
  flex: 0 0 auto;
  overflow: hidden; position: relative;
  background: #0e0d0c; cursor: ew-resize;
  border-top: 1px solid rgba(0,0,0,0.7);
}
.nle__track{ position: relative; min-width: 100%; will-change: transform; }

/* Règle temporelle (années) */
.nle-ruler{
  position: relative; height: 26px;
  background: #141210; border-bottom: 1px solid rgba(0,0,0,0.6);
}
.nle-ruler__year{
  position: absolute; top: 0; bottom: 0;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.nle-ruler__year span{
  position: absolute; left: 8px; top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: rgba(244,239,230,0.7); font-variant-numeric: tabular-nums;
}

/* Pistes (unies, sans rayures) */
.nle-lane{
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background: #0c0b0a;
}
.nle-lane--titles{ background: #0a0908; }
.nle-lane__tag{
  position: sticky; left: 0; z-index: 4;
  display: inline-block; margin: 3px 0 0 4px; padding: 1px 6px;
  font-size: 9px; letter-spacing: .12em; color: var(--muted);
  background: rgba(0,0,0,0.6); border-radius: 3px;
}

/* Clip VIDÉO = en-tête couleur UNIE (label) + PELLICULE d'images en bas.
   (Le titre, lui, est une barre de couleur pleine SANS pellicule → on distingue.) */
.nle-clip{
  position: absolute; top: 6px; bottom: 6px; left: 0;
  border-radius: 5px; overflow: hidden; cursor: pointer;
  transition: filter .18s, outline-color .18s;
  outline: 2px solid transparent; outline-offset: 0;
}
.nle-clip:hover{ filter: brightness(1.08); }
.nle-clip.is-active{ outline-color: #fff; }
.nle-clip__label{
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  padding: 4px 9px 3px; line-height: 1.15; overflow: hidden;
}
.nle-clip__label b{ display: block; font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-clip__label i{ display: block; font-size: 10px; font-style: normal; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nle-clip__film{
  position: absolute; left: 0; right: 0; bottom: 0; height: 54%;
  display: flex; z-index: 1; border-top: 1px solid rgba(0,0,0,0.25);
}
.nle-clip__film span{ flex: 1 1 0; min-width: 0; background-size: cover; background-position: center; border-right: 1px solid rgba(0,0,0,0.22); }
.nle-clip__film span:last-child{ border-right: 0; }

/* Clip titre = barre de couleur UNIE (plus haute, texte plus gros) */
.nle-title{
  position: absolute; height: 22px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; padding: 0 9px; overflow: hidden;
  transition: filter .18s;
}
.nle-title:hover{ filter: brightness(1.08); }
.nle-title span{ font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Piste audio (waveform d'ambiance, remplie) */
.nle-audioclip{
  position: absolute; top: 5px; bottom: 5px; left: 0;
  border-radius: 4px; background: #1f5a44;
  background-image: repeating-linear-gradient(90deg, rgba(120,220,170,0.5) 0 1px, transparent 1px 4px);
  display: flex; align-items: center; padding: 0 8px;
}
.nle-audioclip span{ font-size: 9px; letter-spacing: .1em; color: rgba(190,240,215,0.9); text-transform: uppercase; }
/* En lecture : la waveform défile et le playhead « respire » (subtil). */
@media (prefers-reduced-motion: no-preference){
  .nle.is-playing .nle-audioclip{ animation: nle-wave 1.1s linear infinite; }
  @keyframes nle-wave{ from{ background-position: 0 0, 0 0; } to{ background-position: -40px 0, 0 0; } }
  .nle.is-playing .nle__playhead{ animation: nle-ph 1.6s ease-in-out infinite; }
  @keyframes nle-ph{
    0%, 100%{ box-shadow: 0 0 8px rgba(199,154,91,0.7); }
    50%     { box-shadow: 0 0 16px rgba(199,154,91,1); }
  }
}

.nle-lib__ic{ display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 7px; }
.nle-insp__gap{ color: var(--muted); font-size: 13px; line-height: 1.7; }

/* ---- Lightbox détail d'une expérience ---- */
.explb{ position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s var(--ease-film); }
.explb[hidden]{ display: none; }
.explb.is-open{ opacity: 1; }
.explb__backdrop{ position: absolute; inset: 0; background: rgba(6,5,4,0.9); backdrop-filter: blur(6px); }
.explb__panel{
  position: relative; width: min(1000px, 92vw); max-height: 88vh; overflow: auto;
  display: grid; grid-template-columns: 1.15fr 1fr;
  background: #12100e; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  transform: translateY(14px) scale(.98); transition: transform .4s var(--ease-film);
}
.explb.is-open .explb__panel{ transform: none; }
.explb__close{ position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.45); color: var(--ink); cursor: pointer; font-size: 14px; }
.explb__close:hover{ background: rgba(0,0,0,0.7); }
.explb__media{ background: #000; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.explb__media video, .explb__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.explb__body{ padding: 28px 26px 22px; }
.explb__type{ display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.explb__role{ font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.12; margin: 12px 0 4px; color: var(--ink); }
.explb__company{ font-size: 14px; color: var(--muted); }
.explb__meta{ display: flex; flex-direction: column; gap: 3px; margin: 14px 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); }
.explb__meta span{ font-size: 12.5px; color: var(--muted); }
.explb__section{ margin-bottom: 16px; }
.explb__section h4{ font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin: 0 0 9px; font-weight: 500; }
.explb__section ul{ list-style: none; margin: 0; padding: 0; }
.explb__section li{ position: relative; font-size: 13.5px; line-height: 1.55; color: var(--ink); padding: 0 0 8px 15px; }
.explb__section li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); }
.explb__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.explb__chips span{ font-size: 11px; color: var(--ink); padding: 5px 11px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; }
.explb__gallery{ display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.explb__gthumb{ width: 54px; height: 40px; border-radius: 5px; background-size: cover; background-position: center; cursor: pointer; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.explb__gthumb.is-on{ border-color: var(--amber); }
@media (max-width: 760px){ .explb__panel{ grid-template-columns: 1fr; } .explb__media{ min-height: 210px; } }

.nle__playhead{
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--amber);
  pointer-events: none; z-index: 6; box-shadow: 0 0 8px rgba(199,154,91,0.7);
}
.nle__playhead::before{
  content: ""; position: absolute; top: 0; left: -6px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--amber);
}

@media (max-width: 900px){
  .nle{ height: auto; width: 100%; margin-left: 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); }
  .nle__panes{ flex-direction: column; }
  .nle__sidebar, .nle__inspector{ flex: 0 0 auto; max-height: 220px; }
  .nle__viewer{ aspect-ratio: 16/9; flex: 0 0 auto; }
  .nle__timeline{ flex: 0 0 auto; height: 240px; }
}

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */
.contact-section{
  padding: clamp(90px,16vh,180px) var(--gutter) 50px;
  max-width: var(--container);
  margin: 0 auto;
  text-align: center;
  display:flex; flex-direction: column; align-items:center; gap: 22px;
}
.contact-email{
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 54px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-film), color .4s var(--ease-film);
}
.contact-email:hover{ border-color: var(--amber); color: var(--amber); }
.contact-linkedin{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  padding: 10px 18px;
  border: 1px solid rgba(199,154,91,0.25);
  border-radius: 999px;
  transition: color .4s var(--ease-film), border-color .4s var(--ease-film), background .4s var(--ease-film);
}
.contact-linkedin svg{ color: var(--amber); transition: color .4s var(--ease-film); }
.contact-linkedin:hover{
  color: var(--ink);
  border-color: var(--amber);
  background: rgba(199,154,91,0.08);
}
.footer-meta{
  width:100%;
  display:flex; align-items:center; justify-content: center;
  gap: 14px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(244,239,230,0.08);
  font-size: 11px; letter-spacing: 0.1em; color: var(--muted);
  position: relative;
}
.admin-trigger{
  position: absolute;
  right: 0;
  width: 26px; height: 26px;
  font-size: 20px;
  line-height: 1;
  color: rgba(154,148,138,0.35);
  transition: color .3s;
}
.admin-trigger:hover{ color: var(--amber); }

/* ---------------------------------------------------------
   Overlay CATEGORIE (lightbox des vignettes)
   --------------------------------------------------------- */
.category-overlay{
  position: fixed; inset:0;
  z-index: 200;
  background: var(--bg);
  padding: 40px var(--gutter) 80px;
  overflow-y: auto;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .8s var(--ease-film-slow), visibility 0s linear .8s;
}
.category-overlay.is-open{
  transform: translateY(0);
  visibility: visible;
  transition: transform .8s var(--ease-film-slow);
}
.category-overlay__header{
  display:flex; align-items:flex-end; justify-content: space-between;
  margin-bottom: 48px;
  padding-top: 20px;
}
.category-overlay__title{
  font-family: var(--font-display);
  font-size: clamp(32px,5vw,64px);
  margin: 8px 0 0;
}
.overlay-close, .lightbox-close{
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  border: 1px solid rgba(244,239,230,0.25);
  padding: 10px 18px;
  transition: color .3s, border-color .3s;
}
.overlay-close:hover, .lightbox-close:hover{ color: var(--amber); border-color: var(--amber); }

.thumb-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 24px;
  align-items: start;
}
@media (max-width: 900px){ .thumb-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .thumb-grid{ grid-template-columns: 1fr; } }

.thumb-item{ margin: 0; }
.thumb-item__caption{ margin-top: 14px; }
.thumb-item__title{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
}
.thumb-item__desc{
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}

.thumb-card{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid rgba(199,154,91,0.1);
  transition: border-color .4s var(--ease-film);
}
.thumb-card:hover{ border-color: var(--amber-soft); }
.thumb-card video, .thumb-card img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.thumb-card__poster{ transition: opacity .5s ease; }
.thumb-card.is-playing .thumb-card__poster{ opacity: 0; }
.thumb-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,11,10,0) 60%, rgba(12,11,10,0.4) 100%);
  pointer-events: none;
}
.thumb-card__play{
  position:absolute; top:14px; right:14px; z-index:2;
  width: 34px; height:34px; border-radius:50%;
  border: 1px solid var(--amber-soft);
  display:flex; align-items:center; justify-content:center;
  opacity: 0; transition: opacity .3s;
}
.thumb-card:hover .thumb-card__play{ opacity: 1; }
.thumb-card__play::before{
  content:"";
  width:0; height:0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  border-left: 9px solid var(--amber);
  margin-left: 3px;
}

/* Admin edit affordances on thumb cards */
.thumb-card__edit{
  position:absolute; top:14px; left:14px; z-index:3;
  font-size: 10px; letter-spacing:0.1em; text-transform:uppercase;
  padding: 6px 10px;
  background: rgba(12,11,10,0.7);
  border: 1px solid var(--amber-soft);
  color: var(--amber);
  opacity:0; transition: opacity .3s;
}
.thumb-card:hover .thumb-card__edit{ opacity:1; }
.thumb-add-card{
  aspect-ratio: 16/10;
  border: 1px dashed rgba(199,154,91,0.4);
  display:flex; align-items:center; justify-content:center;
  color: var(--amber);
  font-size: 13px; letter-spacing: 0.1em;
  cursor:pointer;
}

/* ---------------------------------------------------------
   Lightbox VIDEO
   --------------------------------------------------------- */
.video-lightbox{
  position: fixed; inset:0;
  z-index: 300;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(20px,6vw,90px);
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease-film), visibility 0s linear .5s;
}
.video-lightbox.is-open{
  visibility: visible; opacity: 1;
  transition: opacity .5s var(--ease-film);
}
.video-lightbox__backdrop{
  position:absolute; inset:0;
  background: rgba(6,5,4,0.86);
  backdrop-filter: blur(3px);
}
.video-lightbox__frame{
  position: relative;
  width: 100%; max-width: 1200px;
  transform: scale(0.92);
  transition: transform .6s var(--ease-film-slow);
}
.video-lightbox.is-open .video-lightbox__frame{ transform: scale(1); }
.video-lightbox__player{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
.video-lightbox .lightbox-close{
  position: absolute;
  top: -46px; right: 0;
}

/* Habillage Plyr (accent ambre) */
.plyr{ --plyr-color-main: #C79A5B; border-radius: 2px; }
.plyr__control--overlaid{ background: rgba(199,154,91,0.85); }
.plyr--full-ui input[type=range]{ color: #C79A5B; }

/* ---------------------------------------------------------
   Admin — login, toolbar, formulaire
   --------------------------------------------------------- */
.admin-login{
  position: fixed; inset:0; z-index: 400;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,5,4,0.9);
  visibility: hidden; opacity:0;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
.admin-login.is-open{ visibility: visible; opacity:1; transition: opacity .4s ease; }
.admin-login__box{
  width: min(360px, 90vw);
  background: var(--surface);
  border: 1px solid rgba(199,154,91,0.2);
  padding: 36px 32px;
  text-align: center;
}
.admin-login__label{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color: var(--muted); margin-bottom: 18px; }
.admin-login__input{
  width:100%; text-align:center; letter-spacing: 0.6em;
  font-size: 22px;
  background: transparent;
  border: none; border-bottom: 1px solid rgba(244,239,230,0.25);
  color: var(--ink);
  padding: 10px 0;
  margin-bottom: 22px;
}
.admin-login__input:focus{ outline:none; border-color: var(--amber); }
.admin-login__field{
  width:100%;
  background: var(--bg);
  border: 1px solid rgba(244,239,230,0.2);
  color: var(--ink);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  margin-bottom: 12px;
}
.admin-login__field:focus{ outline:none; border-color: var(--amber); }
#admin-login-prod{ margin-bottom: 10px; }
.admin-login__error{ color:#c76b5b; font-size:12px; margin: -2px 0 16px; }
.admin-login__actions{ display:flex; gap: 12px; justify-content:center; margin-bottom: 20px; }
.admin-login__hint{ font-size: 11px; color: var(--muted); line-height:1.5; }

.btn{
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid rgba(244,239,230,0.25);
  transition: all .3s var(--ease-film);
}
.btn--primary{ background: var(--amber); border-color: var(--amber); color: #14110c; }
.btn--primary:hover{ background: #d9ab6c; }
.btn--ghost:hover{ border-color: var(--amber); color: var(--amber); }
.btn--small{ padding: 8px 14px; font-size: 11px; }

.admin-toolbar{
  position: fixed; top: 20px; right: 20px; z-index: 500;
  display:flex; align-items:center; gap: 10px;
  background: rgba(21,19,15,0.92);
  border: 1px solid rgba(199,154,91,0.3);
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}
.admin-toolbar__badge{
  font-size: 10px; letter-spacing: 0.14em; color: var(--amber);
  padding-right: 8px; border-right: 1px solid rgba(199,154,91,0.3);
}

.admin-video-modal{
  position: fixed; inset:0; z-index: 450;
  display:flex; align-items:center; justify-content:center;
  background: rgba(6,5,4,0.86);
}
.admin-video-modal__box{
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid rgba(199,154,91,0.2);
  padding: 28px;
  max-height: 86vh;
  overflow-y: auto;
}
.admin-video-modal__box h4{
  font-family: var(--font-display); font-weight:400; font-size: 22px; margin: 0 0 18px;
}
.admin-video-modal__box label{
  display:block; font-size: 11px; letter-spacing:0.1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 16px;
}
.admin-video-modal__box input, .admin-video-modal__box select, .admin-video-modal__box textarea{
  display:block; width:100%; margin-top:8px;
  background: var(--bg); border: 1px solid rgba(244,239,230,0.18);
  color: var(--ink); padding: 10px 12px; font-size: 14px;
  font-family: var(--font-body);
  resize: vertical;
}
.admin-video-modal__box input:focus, .admin-video-modal__box select:focus, .admin-video-modal__box textarea:focus{ outline:none; border-color: var(--amber); }
.admin-video-modal__actions{ display:flex; justify-content: space-between; margin-top: 8px; }
.admin-video-modal__actions-right{ display:flex; gap: 10px; }

/* Elements editables inline en mode admin */
[data-editable].is-admin-editable{
  outline: 1px dashed rgba(199,154,91,0.4);
  outline-offset: 6px;
  cursor: text;
}
[data-editable].is-admin-editable:focus{
  outline: 1px solid var(--amber);
}

/* ---------------------------------------------------------
   Reveal au scroll (classes pilotées par GSAP ScrollTrigger)
   --------------------------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(28px) scale(0.988);
  transition: opacity .95s var(--ease-film-slow), transform .95s var(--ease-film-slow);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* L'indice « Défiler » du hero s'efface dès qu'on a commencé à scroller. */
.hero__scrollcue{ transition: opacity .6s var(--ease-film); }
body.has-scrolled .hero__scrollcue{ opacity: 0; }

::selection{ background: var(--amber); color: #14110c; }