/* ══════════════════════════════════════════════════════════════
   MarangoProd — V2 · « Constellations »
   Feuille de style commune à toutes les pages.
   Univers : l'espace (étoiles, constellations, trou noir, étoiles
   filantes) + quelques touches cyberpunk (glitch, texte qui se
   décode, lignes de balayage, néon).
   ══════════════════════════════════════════════════════════════ */

/* ─────────────── TOKENS ─────────────── */
:root{
  --black:   #09070f;
  --deep:    #0c0a14;
  --surface: #11101c;
  --border:  #252038;
  --muted:   #7d7494;
  --text:    #b8b0cc;
  --light:   #ddd8ee;
  --accent:  #9b6fd4;
  --accent2: #6b3fa8;
  --white:   #eee9f8;
  --gold:    #d8d090;
  --cyan:    #7fd8ff;   /* réservé aux micro-glitchs */

  --display: 'Syncopate', 'Arial Black', sans-serif;          /* titres : capitales larges */
  --body:    'Schibsted Grotesk', system-ui, sans-serif;      /* texte courant */
  --mono:    'Martian Mono', ui-monospace, monospace;          /* petites étiquettes */

  --bar: 72px;                         /* hauteur de la navigation */
  --gutter: clamp(20px, 4vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ─────────────── BASE ─────────────── */
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
/* Le site est déjà sombre : on le dit au navigateur, sinon le « mode sombre forcé »
   d'Android (Samsung Internet, Chrome) réassombrit tout et fausse les couleurs des titres */
:root{ color-scheme: dark; }
@media (prefers-color-scheme: dark){ :root{ color-scheme: dark; } }
html{ background: var(--black); -webkit-text-size-adjust: 100%; }
body{
  overflow-x: clip; /* aucune animation ne doit élargir la page (glissement latéral sur téléphone) */
  background: var(--black);
  color: var(--text);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video, svg, canvas{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection{ background: var(--accent); color: var(--black); }
:focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; }

/* Lenis (défilement fluide) */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-stopped{ overflow: hidden; }

/* Transitions entre pages (navigateurs récents) */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: vt-out .45s var(--ease) both; }
::view-transition-new(root){ animation: vt-in .7s var(--ease) both; }
@keyframes vt-out{ to{ opacity: 0; filter: blur(6px); } }
@keyframes vt-in{ from{ opacity: 0; filter: blur(6px); } }

/* ─────────────── LE CIEL (fond étoilé global) ─────────────── */
.space{ position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.stardust{ position: fixed; inset: 0; z-index: 99; width: 100%; height: 100%; pointer-events: none; }

/* ─────────────── CURSEUR ÉTOILE ─────────────── */
.cursor-star, .cursor-ring{ position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: none; }
.cursor-star{ width: 14px; height: 14px; margin: -7px 0 0 -7px; filter: drop-shadow(0 0 6px rgba(216,208,144,.9)); }
.cursor-ring{
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid rgba(155,111,212,.45);
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), border-color .3s, background .3s;
}
.cursor-label{
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--white);
  white-space: nowrap; opacity: 0; transition: opacity .3s;
}
.cursor-label:empty{ display: none; }
body.cursor-hover .cursor-ring{
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-color: var(--gold); background: rgba(216,208,144,.05);
}
body.cursor-hover .cursor-label{ opacity: 1; }
@media (hover: hover) and (pointer: fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button{ cursor: none; }
}

/* ─────────────── INTRO : HYPERESPACE ─────────────── */
.intro{
  --hole: 0px;
  position: fixed; inset: 0; z-index: 120; background: var(--black);
  display: grid; place-items: center;
  /* Un trou circulaire qui s'agrandit révèle le site (effet portail) */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.intro-warp{ position: absolute; inset: 0; width: 100%; height: 100%; }
/* Le logo, le nom et le statut grandissent avec l'écran (vmin = le plus petit côté de l'écran),
   avec un minimum pour les téléphones et un maximum : l'hyperespace reste toujours visible autour */
.intro-core{ position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(1.1rem, 2.6vmin, 2.6rem); }
.intro-m{ width: clamp(96px, 15vmin, 230px); height: auto; aspect-ratio: 120 / 100; overflow: visible; }
.intro-m line{ stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.intro-brand{
  font-family: var(--display); font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(17px, 3.4vmin, 50px); color: var(--white);
}
.intro-brand em{ font-style: normal; color: var(--accent); }
.intro-status{ font-size: clamp(.6rem, 1.15vmin, 1rem); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.no-intro .intro{ display: none; }

/* ─────────────── PLONGÉE ENTRE LES PAGES ───────────────
   Une lumière violette naît du point visé et envahit l'écran ;
   la page suivante émerge de cette lumière. */
.bloom{
  position: fixed; z-index: 140; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff4d6 0%, #f0dfae 5%, #b6a6ec 12%, #5b4bc4 24%, #2a1f6e 40%, #120c33 60%, #09070f 100%);
}
.bloom--arrive, html.is-arriving::after{
  position: fixed; inset: 0; z-index: 140; border-radius: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #f6e7c0 0%, #b6a6ec 12%, #5b4bc4 30%, #2a1f6e 55%, #120c33 80%, #09070f 100%);
}
html.is-arriving::after{ content: ''; }
/* Transition « objectif » : diaphragme + bokehs (dessinés en canvas) */
html.is-arriving.is-lens::after{ background: #09070f; }
/* Transition « trace lumineuse » (vers Contact) : l'emblème de la danse se dessine */
html.is-arriving.is-trace::after{ background: #09070f; }
.tracefx{ position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; pointer-events: none; background: #09070f; }
.tracefx svg{ width: min(64vmin, 580px); height: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(155,111,212,.5)); }
.tr-line{ fill: none; stroke: rgba(185,148,238,.85); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.tr-glow{ fill: none; stroke: rgba(216,208,144,.32); stroke-width: 6; stroke-linecap: round; filter: blur(3px); opacity: 0; }
.tr-star circle{ fill: #eee9f8; }
.tr-star .tr-halo{ fill: rgba(155,111,212,.18); }
.tr-star--gold circle:not(.tr-halo){ fill: var(--gold); filter: drop-shadow(0 0 6px rgba(216,208,144,.95)); }
.lensfx{ position: fixed; inset: 0; z-index: 140; width: 100%; height: 100%; pointer-events: none; }

/* ─────────────── NAVIGATION ─────────────── */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--bar); padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
}
/* Fond flouté sur un pseudo-élément : un backdrop-filter sur .nav
   casserait le menu mobile en position fixe. */
.nav::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(9, 7, 15, .78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  opacity: 0; transition: opacity .5s;
}
.nav.is-scrolled::before{ opacity: 1; }
.nav-logo{
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--display); font-size: .82rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white);
}
.nav-logo em{ font-style: normal; color: var(--accent); }
.nav-logo svg{ width: 34px; height: 28px; flex-shrink: 0; transition: filter .4s; }
.nav-logo:hover svg{ filter: drop-shadow(0 0 6px rgba(216,208,144,.8)); }
.nav-links{ display: flex; gap: 2.4rem; }
.nav-links a{
  position: relative; padding: .4rem 0;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text);
  transition: color .3s, text-shadow .3s;
}
.nav-links a::after{
  content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav-links a:hover{ color: var(--white); text-shadow: 0 0 12px rgba(155,111,212,.8); }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav-links a[aria-current="page"]{ color: var(--white); }
.nav-links a[aria-current="page"]::before{
  content: ''; position: absolute; left: -13px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
/* Les drapeaux FR / EN, à droite du menu */
.nav > nav{ margin-left: auto; }
.lang-switch{ display: flex; align-items: center; gap: 8px; margin-left: 2rem; padding-left: 1.6rem; border-left: 1px solid var(--border); }
.lang-flag{ display: block; width: 22px; height: 15px; border-radius: 2px; overflow: hidden; opacity: .5; filter: saturate(.6); outline: 1px solid transparent; outline-offset: 2px; transition: opacity .3s, filter .3s, outline-color .3s, transform .3s var(--ease); }
.lang-flag svg{ display: block; width: 100%; height: 100%; }
.lang-flag:hover{ opacity: 1; filter: none; transform: translateY(-1px); }
.lang-flag.is-current{ opacity: 1; filter: none; outline-color: rgba(216,208,144,.7); }
.nav-burger{ display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: flex-end; gap: 6px; }
.nav-burger span{ display: block; height: 1.5px; background: var(--white); transition: transform .45s var(--ease), width .45s var(--ease); }
.nav-burger span:nth-child(1){ width: 26px; }
.nav-burger span:nth-child(2){ width: 16px; }
.menu-open .nav-burger span:nth-child(1){ width: 22px; transform: translateY(3.75px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2){ width: 22px; transform: translateY(-3.75px) rotate(-45deg); }

/* ─────────────── BOUTONS ─────────────── */
/* Les boutons : un contour néon fin (violet → or) aux coins coupés, comme une interface de
   science-fiction. Au survol, un reflet balaie le bouton comme un cristal qu'on analyse,
   le texte passe en or et le néon s'intensifie.
   ::before = le contour en dégradé · ::after = l'intérieur (reflet + lignes de balayage + fond) */
.btn{
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  padding: 1.25rem 2.6rem;
  font-family: var(--display); font-weight: 700; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--white); filter: drop-shadow(0 0 8px rgba(155,111,212,.45));
  transition: color .4s, filter .4s;
}
.btn > span[aria-hidden]{ display: none; } /* les petites flèches ne servent plus */
.btn::before, .btn::after{ content: ''; position: absolute; z-index: -1; pointer-events: none; }
.btn::before{ inset: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); background: linear-gradient(120deg, var(--accent), #c4a5ef 60%, var(--gold)); }
.btn::after{
  inset: 1.5px; clip-path: polygon(13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px);
  background:
    linear-gradient(100deg, transparent 38%, rgba(238,233,248,.3) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat,
    repeating-linear-gradient(0deg, rgba(238,233,248,.05) 0 1px, transparent 1px 3px),
    rgba(12,9,22,.88);
}
.btn:hover, .btn:focus-visible{ color: var(--gold); filter: drop-shadow(0 0 12px rgba(216,208,144,.55)) drop-shadow(0 0 28px rgba(155,111,212,.45)); }
.btn:hover::after, .btn:focus-visible::after{ animation: btn-scan 1.4s ease-in-out infinite; }
@keyframes btn-scan{ from{ background-position: 160% 0, 0 0, 0 0; } to{ background-position: -60% 0, 0 0, 0 0; } }
.btn--ghost{ font-weight: 400; color: var(--text); filter: none; }
.btn--ghost::before{ background: rgba(196,165,239,.42); }
.btn--ghost:hover, .btn--ghost:focus-visible{ color: var(--white); filter: drop-shadow(0 0 10px rgba(155,111,212,.55)); }
.btn--xl{ padding: 1.45rem 3.1rem; font-size: .86rem; }

/* ─────────────── TOUCHES CYBERPUNK ─────────────── */
/* Glitch : deux copies du texte décalées (or + cyan), découpées en tranches.
   Usage : <span class="glitch" data-text="Mot">Mot</span>
   Se déclenche avec la classe .is-glitching, ou au survol d'une carte projet. */
.glitch{ position: relative; display: inline-block; }
.glitch::before, .glitch::after{
  content: none; position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; pointer-events: none;
}
/* Les calques n'existent que pendant le glitch : sur iPhone (Safari), des calques invisibles
   s'imprimaient quand même dans les titres en dégradé (titre « écrit deux fois ») */
.glitch.is-glitching::before, .glitch.is-glitching::after,
.card:hover .glitch::before, .card:hover .glitch::after{ content: attr(data-text); }
.glitch::before{ color: var(--gold); }
.glitch::after{ color: var(--cyan); }
.glitch.is-glitching::before, .card:hover .glitch::before{ animation: glitch-a .38s steps(2) 1 both; }
.glitch.is-glitching::after,  .card:hover .glitch::after { animation: glitch-b .38s steps(2) 1 both; }
@keyframes glitch-a{
  0%  { opacity: 1; clip-path: inset(12% 0 58% 0); transform: translate(-5px, -1px); }
  35% { opacity: 1; clip-path: inset(58% 0 18% 0); transform: translate(4px, 1px); }
  70% { opacity: 1; clip-path: inset(32% 0 44% 0); transform: translate(-2px, 0); }
  100%{ opacity: 0; }
}
@keyframes glitch-b{
  0%  { opacity: 1; clip-path: inset(66% 0 6% 0);  transform: translate(5px, 1px); }
  35% { opacity: 1; clip-path: inset(14% 0 70% 0); transform: translate(-4px, -1px); }
  70% { opacity: 1; clip-path: inset(44% 0 30% 0); transform: translate(2px, 0); }
  100%{ opacity: 0; }
}

/* Étiquettes de section : « 02 // Le regard » */
.label{
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: clamp(36px, 6vh, 72px);
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}
.label::before{
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
}
.label .num{ color: var(--gold); }
.label .sl{ color: var(--accent2); letter-spacing: 0; }

/* ─────────────── SECTIONS ─────────────── */
.section{ position: relative; padding: clamp(110px, 17vh, 190px) var(--gutter); }

/* ══════════════════════════════════════════════════════════════
   ACCUEIL
   ══════════════════════════════════════════════════════════════ */

/* ─────────────── HERO ─────────────── */
.hero{ position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.hero-media{ position: absolute; inset: 0; background: var(--deep); }
.hero-poster, .reel-clip{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-clip{ opacity: 0; transform: scale(1.05); transition: opacity 1.4s var(--ease), transform 7s linear; }
.reel-clip.is-active{ opacity: 1; transform: scale(1); z-index: 1; }
.reel-clip.is-leaving{ opacity: 1; transform: scale(1); transition: none; } /* reste net sous le nouveau plan pendant le fondu */
/* La miniature ne sert que si les vidéos ne se lancent pas (mouvements réduits) : sinon, fond sombre puis directement la vidéo */
@media (prefers-reduced-motion: no-preference){ .hero-poster{ display: none; } }
/* Changement de plan : bref glitch de signal (touche cyberpunk) */
.hero-media::after{
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 16%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(155,111,212,.22), rgba(127,216,255,.16), transparent);
  mix-blend-mode: screen; opacity: 0; transform: translateY(-100%);
}
.hero-media.is-cut::after{ animation: scanbar .5s ease-out 1; }
.hero-media.is-cut .reel-clip.is-active{ animation: cut-glitch .42s steps(3) 1; }
/* 2e variante : la barre remonte, l'image se découpe en bandes décalées */
.hero-media.cut-b::after{ animation: scanbar-up .55s ease-out 1; }
.hero-media.cut-b .reel-clip.is-active{ animation: cut-slice .5s steps(4) 1; }
@keyframes scanbar{ 0%{ opacity: 1; transform: translateY(-100%); } 100%{ opacity: 0; transform: translateY(650%); } }
@keyframes scanbar-up{ 0%{ opacity: 1; transform: translateY(650%); } 100%{ opacity: 0; transform: translateY(-100%); } }
@keyframes cut-slice{
  0%  { translate: 10px 0;  filter: saturate(1.6) hue-rotate(30deg) brightness(1.15); clip-path: inset(48% 0 22% 0); }
  25% { translate: -14px 0; filter: saturate(1.4) hue-rotate(-30deg); clip-path: inset(8% 0 60% 0); }
  50% { translate: 6px 0;   filter: contrast(1.3); clip-path: inset(0 0 0 0); }
  75% { translate: -2px 0;  filter: none; }
  100%{ translate: 0 0; filter: none; clip-path: inset(0 0 0 0); }
}
@keyframes cut-glitch{
  0%  { translate: -12px 0; filter: contrast(1.35) saturate(1.5) hue-rotate(-25deg); clip-path: inset(0 0 0 0); }
  33% { translate: 9px 0;   filter: contrast(1.2) saturate(1.3) hue-rotate(20deg);  clip-path: inset(14% 0 32% 0); }
  66% { translate: -4px 0;  filter: none; clip-path: inset(0 0 0 0); }
  100%{ translate: 0 0; filter: none; }
}
/* Assombrit juste ce qu'il faut pour lire le texte ; le bas se fond dans l'espace */
.hero-shade{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9,7,15,.82) 0%, rgba(9,7,15,.36) 40%, rgba(9,7,15,0) 68%),
    linear-gradient(180deg, rgba(9,7,15,.6) 0%, rgba(9,7,15,0) 18%),
    linear-gradient(0deg, var(--black) 0%, rgba(9,7,15,.6) 20%, rgba(9,7,15,0) 46%);
}
.hero-stars{ position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }

.hero-content{
  position: absolute; z-index: 4;
  left: var(--gutter); bottom: clamp(120px, 17vh, 180px);
  max-width: min(920px, 84vw);
}
.hero-title{ /* Syncopate, en capitales larges : un titre qui s'impose sur la vidéo */
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 5.2vw, 84px); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  color: var(--white); text-shadow: 0 4px 30px rgba(9,7,15,.45);
}
.hero-title .line{ display: block; overflow: hidden; padding-bottom: .07em; }
.hero-title .line > span{ display: inline-block; }
.hero-title em{ /* « Réalisateur » : lettres creuses (la vidéo se voit dedans), contour en dégradé violet → or, glitch conservé */
  font-style: normal; text-shadow: none; color: transparent;
  filter: drop-shadow(0 0 18px rgba(155,111,212,.4));
}
.hero-title em > span{ -webkit-text-stroke: 2px var(--c); color: transparent; }
.hero-sub{ /* « Je filme » + un mot qui change doucement */
  margin: 1.4rem 0 2.6rem;
  font-family: var(--body); font-weight: 400; font-size: clamp(19px, 1.9vw, 28px); line-height: 1.3; color: var(--white);
  text-shadow: 0 2px 18px rgba(9,7,15,.7);
}
.hero-sub .word{ display: inline-block; font-style: italic; font-weight: 500; color: var(--gold); transition: opacity .45s, filter .45s, transform .45s var(--ease); }
.hero-sub .word.out{ opacity: 0; filter: blur(6px); transform: translateY(-.25em); }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; }

/* HUD bas : le signal en cours */
.hero-hud{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 0 var(--gutter) 1.9rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.signal{ display: flex; align-items: center; gap: .7rem; white-space: nowrap; overflow: hidden; }
.signal-dot{
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ opacity: .35; box-shadow: 0 0 2px var(--gold); } }
.signal .idx{ color: var(--gold); }
.signal .sl{ color: var(--accent2); letter-spacing: 0; }
.signal b{ color: var(--white); font-weight: 400; }
.signal .role{ overflow: hidden; text-overflow: ellipsis; }
.reel-progress{ display: flex; gap: 6px; }
.reel-seg{ padding: 10px 0; } /* zone de clic plus haute que la barre elle-même */
.reel-seg span{
  display: block; position: relative; width: 38px; height: 2px; overflow: hidden;
  background: rgba(238,233,248,.14); transition: height .3s var(--ease), background .3s;
}
.reel-seg:hover span{ height: 4px; background: rgba(238,233,248,.34); }
.reel-progress i{ position: absolute; inset: 0; background: var(--gold); box-shadow: 0 0 6px var(--gold); transform: scaleX(0); transform-origin: left; }
.hud-right{ justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.scroll-cue{ display: flex; align-items: center; gap: .8rem; color: var(--text); transition: color .3s; }
.scroll-cue:hover{ color: var(--gold); }
.scroll-cue::after{
  content: ''; width: 1px; height: 26px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2.2s var(--ease) infinite; transform-origin: top;
}
@keyframes cue{ 0%{ transform: scaleY(0); } 50%{ transform: scaleY(1); } 100%{ transform: scaleY(1); opacity: 0; } }

/* ─────────────── 02 // LE REGARD ───────────────
   Statique, en relief : une composition typographique, puis trois
   cartes holographiques inclinées en 3D, reliées par des fils d'or,
   posées sur une grille en perspective (touche cyberpunk). */
.regard{ overflow: hidden; padding-bottom: clamp(120px, 16vh, 180px); }
.regard > *{ position: relative; z-index: 1; }

/* Les grands titres de section (Le regard, La galaxie des projets, Ils m'ont fait confiance) */
.sec-title{
  text-align: center; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 62px);
  line-height: 1.05; letter-spacing: .01em; color: var(--white);
}
.sec-title em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.regard .sec-title{ margin-bottom: clamp(30px, 5vh, 54px); }

/* Le texte : simple, centré, deux mots mis en lumière */
.manifesto{
  max-width: 19em; margin: 0 auto; text-align: center;
  font-family: var(--body); font-weight: 400;
  font-size: clamp(22px, 2.5vw, 40px); line-height: 1.32; letter-spacing: -.01em; color: var(--white);
}
.manifesto .w{ display: inline-block; }
.manifesto .hl-gold{ color: var(--gold); }
.manifesto em{ font-style: italic; color: var(--accent); text-shadow: 0 0 46px rgba(155,111,212,.5); }
.manifesto-sub{
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 2.2rem auto 0;
  font-family: var(--mono); font-size: clamp(.8rem, .95vw, .95rem); letter-spacing: .14em; color: var(--light);
}
.manifesto-sub::before, .manifesto-sub::after{ content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.manifesto-sub::after{ transform: scaleX(-1); }

/* La grille au sol, en perspective : discrète et fondue dans le ciel
   (fondu sur les côtés et vers le bas), pour ne pas faire « image collée » */
.regard-floor{
  position: absolute !important; z-index: 0 !important; left: 0; right: 0; bottom: 0; height: 46%;
  perspective: 480px; perspective-origin: 50% 0%;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 130% at 50% 0%, #000 30%, rgba(0,0,0,.55) 58%, transparent 86%);
          mask-image: radial-gradient(ellipse 78% 130% at 50% 0%, #000 30%, rgba(0,0,0,.55) 58%, transparent 86%);
}
.regard-floor::before{ /* l'horizon, tout en douceur */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(155,111,212,.5) 30%, rgba(216,208,144,.45) 50%, rgba(155,111,212,.5) 70%, transparent);
  box-shadow: 0 0 16px rgba(155,111,212,.35);
}
.regard-floor::after{ /* brume violette juste sous l'horizon */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 45%; z-index: 1;
  background: linear-gradient(180deg, rgba(107,63,168,.16), transparent);
}
.regard-grid{
  position: absolute; left: -80%; right: -80%; top: 0; height: 260%;
  transform: rotateX(74deg); transform-origin: 50% 0;
  background-image:
    linear-gradient(rgba(155,111,212,.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,111,212,.32) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 34%, transparent 66%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 34%, transparent 66%);
}

/* Les cartes holographiques */
.holos{
  display: flex; justify-content: center; align-items: flex-end;
  margin-top: clamp(110px, 16vh, 180px);
  perspective: 1400px;
}
.holo-links{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.holo-links polyline{
  fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-opacity: .75;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(216,208,144,.8));
}
.holo{
  position: relative; width: min(31vw, 390px);
  padding: 3.4rem 2rem 2.3rem;
  background: linear-gradient(160deg, rgba(155,111,212,.2) 0%, rgba(22,15,42,.62) 48%, rgba(155,111,212,.1) 100%);
  border: 1px solid rgba(155,111,212,.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 0 0 1px rgba(155,111,212,.08),
    inset 0 1px 0 rgba(238,233,248,.18),
    0 0 46px rgba(155,111,212,.22),
    0 40px 70px -24px rgba(0,0,0,.85);
  /* reflet sur le sol (navigateurs compatibles) */
  -webkit-box-reflect: below 16px linear-gradient(transparent 64%, rgba(255,255,255,.16));
  transition: border-color .5s, box-shadow .5s;
}
.holo::before{ /* lignes de balayage de l'hologramme */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(238,233,248,.035) 0 1px, transparent 1px 4px);
}
.holo::after{ /* reflet lumineux en haut à gauche */
  content: ''; position: absolute; left: 0; top: 0; width: 55%; height: 1px;
  background: linear-gradient(90deg, rgba(238,233,248,.6), transparent);
}
.holo--left { transform: rotateY(30deg) translateZ(-60px); margin-right: -46px; z-index: 1; }
.holo--mid  { transform: translateY(-40px) translateZ(40px); z-index: 3; }
.holo--right{ transform: rotateY(-30deg) translateZ(-60px); margin-left: -46px; z-index: 1; }
.holo:hover{ border-color: rgba(216,208,144,.6); box-shadow: inset 0 0 0 1px rgba(216,208,144,.1), inset 0 1px 0 rgba(238,233,248,.2), 0 0 60px rgba(155,111,212,.35), 0 40px 70px -24px rgba(0,0,0,.85); }
.holo-top{
  position: absolute; left: 1.4rem; right: 1.4rem; top: 1.1rem;
  display: flex; justify-content: flex-end; align-items: center;
  font-size: .56rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.holo-top .sl{ color: var(--accent); letter-spacing: 0; }
.holo-top i{ width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
/* La sphère : un nœud posé sur le bord haut de la carte, que les fils d'or relient */
.holo .pillar-orb{ position: absolute; left: 50%; top: -33px; margin: 0 0 0 -33px; }
.pillar-orb{
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, rgba(200,175,245,.45), rgba(70,42,125,.5) 42%, rgba(12,10,20,.95) 74%);
  border: 1px solid rgba(155,111,212,.5);
  box-shadow: inset 0 0 18px rgba(155,111,212,.35), inset 0 2px 0 rgba(255,255,255,.16), 0 0 26px rgba(155,111,212,.45);
}
.pillar-icon{ width: 42px; height: 18px; overflow: visible; }
.pillar-icon line{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.holo h3{ font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .04em; line-height: 1.3; color: var(--white); text-align: center; }
.holo h3 em{ font-style: normal; color: var(--accent); }
.holo p{ margin-top: .9rem; font-size: clamp(.88rem, .95vw, .98rem); line-height: 1.75; text-align: center; color: var(--light); }

/* ─────────────── 03 // LA GALAXIE DES PROJETS ───────────────
   Une galaxie spirale en perspective ; les projets tournent sur un
   anneau incliné (l'avant plus bas, l'arrière plus haut, qui passe
   derrière la galaxie). Arrêt de 5 s sur chaque projet, en boucle. */
.galaxy{ padding-bottom: clamp(150px, 20vh, 220px); }
.galaxy-head{ max-width: 780px; margin: 0 auto; text-align: center; }
.galaxy-head .label{ justify-content: center; }
.galaxy-head h2{
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 62px);
  line-height: 1.05; letter-spacing: .01em; color: var(--white);
}
.galaxy-head h2 em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.galaxy-intro{ margin: 1.6rem auto 0; max-width: 860px; font-size: clamp(.98rem, 1.15vw, 1.15rem); line-height: 1.75; color: var(--light); }

.galaxy-stage{
  position: relative; height: clamp(560px, 86vh, 860px);
  margin: clamp(10px, 2vh, 30px) calc(var(--gutter) * -1) 0;
  overflow: hidden;
}
.galaxy-canvas{
  position: absolute; inset: 0; z-index: 50; width: 100%; height: 100%; pointer-events: none;
  /* bords haut et bas fondus : la galaxie n'est jamais coupée net */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* Pendant la plongée : la scène couvre tout l'écran, sans bords fondus (halo uniforme) */
.galaxy-stage.is-plunging{ position: fixed; inset: 0; z-index: 85; height: auto; margin: 0; overflow: hidden; }
.galaxy-stage.is-plunging .galaxy-canvas{ -webkit-mask-image: none; mask-image: none; }
.galaxy-beam{ position: absolute; inset: 0; z-index: 55; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.galaxy-beam line{ stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px var(--gold)); }
.galaxy-beam circle{ fill: #fff6d8; opacity: 0; filter: drop-shadow(0 0 6px var(--gold)); }

.g-card{
  position: absolute; left: 0; top: 0;
  aspect-ratio: 16 / 9; overflow: hidden; transform-origin: 50% 0;
  background: var(--surface); border: 1px solid rgba(155,111,212,.28);
  will-change: transform, opacity, filter;
  transition: border-color .6s, box-shadow .6s;
}
.g-card > img, .g-card > video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-card > video{ opacity: 0; transition: opacity .8s; }
.g-card.is-playing > video{ opacity: 1; }
.g-card.is-front{
  border-color: rgba(216,208,144,.55);
  box-shadow: 0 0 0 1px rgba(216,208,144,.18), 0 34px 90px -12px rgba(0,0,0,.85), 0 0 70px rgba(155,111,212,.32);
}
.g-card .card-scan{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(238,233,248,.05) 0 1px, transparent 1px 3px);
  opacity: 0; transition: opacity .4s;
}
.g-card.is-front:hover .card-scan{ opacity: 1; }
.g-card .g-cstl{ /* (sélecteur renforcé : sinon la règle des images de carte l'étire) */
  position: absolute; inset: auto; right: 10px; top: 10px; z-index: 3; width: 58px; height: auto;
  opacity: .3; transition: opacity .6s, filter .6s;
}
.g-card.is-front .g-cstl{ opacity: 1; filter: drop-shadow(0 0 6px rgba(155,111,212,.9)); }

.galaxy-ui{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 560px) auto; justify-content: center; align-items: center;
  gap: clamp(20px, 4vw, 70px);
  margin-top: clamp(-90px, -9vh, -50px);
}
.g-arrow{
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem; color: var(--white);
  border: 1px solid var(--border); background: rgba(9,7,15,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: border-color .35s, box-shadow .35s, background .35s, color .35s;
}
.g-arrow:hover{ border-color: var(--gold); color: var(--gold); background: rgba(216,208,144,.08); box-shadow: 0 0 26px rgba(216,208,144,.35); }
.g-info{ text-align: center; }
.g-code{ font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.g-code .sl{ color: var(--accent); letter-spacing: 0; }
.g-title{ margin-top: .6rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 2.2vw, 34px); line-height: 1.05; letter-spacing: .02em; color: var(--white); }
.g-meta{ margin-top: .7rem; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.g-meta .tags{ color: var(--muted); letter-spacing: .1em; text-transform: none; }
.g-meta .tags::before{ content: '—'; margin: 0 .6rem; color: var(--border); }
.g-link{
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.2rem;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold);
  transition: gap .4s var(--ease), text-shadow .3s;
}
.g-link:hover{ gap: 1rem; text-shadow: 0 0 12px rgba(216,208,144,.8); }
.g-dots{ display: flex; justify-content: center; gap: 14px; margin-top: 1.6rem; }
.g-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
  transition: background .4s, box-shadow .4s, transform .4s;
}
.g-dot:hover{ background: var(--accent); }
.g-dot.is-active{ background: var(--gold); box-shadow: 0 0 10px var(--gold); transform: scale(1.35); }

/* Le portail : « Plonger dans la galaxie » devant une mini-galaxie qui tourne,
   posé sur un socle lumineux. Le cadre (bordure, coins, verre) n'apparaît qu'au survol. */
.dive{ position: relative; display: block; width: min(640px, 100%); margin: clamp(90px, 13vh, 140px) auto 0; }
.dive-frame{
  position: relative; z-index: 1; display: grid; place-items: center;
  height: 150px; overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .5s, background .5s, box-shadow .5s, transform .6s var(--ease);
}
.dive-frame::before{ /* lignes de balayage (au survol) */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(238,233,248,.035) 0 1px, transparent 1px 4px);
  opacity: 0; transition: opacity .5s;
}
.dive-frame::after{ /* coins dorés (au survol) */
  content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  --c: rgba(216,208,144,.85); --l: 16px; --t: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left     / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left     / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right    / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right    / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
  opacity: 0; transition: opacity .5s;
}
.dive:hover .dive-frame{
  transform: translateY(-4px);
  border-color: rgba(155,111,212,.5);
  background: linear-gradient(160deg, rgba(155,111,212,.16) 0%, rgba(22,15,42,.5) 50%, rgba(155,111,212,.08) 100%);
  box-shadow: inset 0 1px 0 rgba(238,233,248,.16), 0 0 60px rgba(155,111,212,.3);
}
.dive:hover .dive-frame::before, .dive:hover .dive-frame::after{ opacity: 1; }
.dive-galaxy{
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
}
.dive-title{
  position: relative; z-index: 1;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(16px, 1.7vw, 24px); letter-spacing: .04em; line-height: 1.25; color: var(--white);
  text-shadow: 0 0 24px rgba(9,7,15,.95), 0 0 3px rgba(9,7,15,.9);
}
.dive-title em{ font-style: normal; color: var(--accent); text-shadow: 0 0 24px rgba(9,7,15,.9), 0 0 30px rgba(155,111,212,.55); }
/* Le socle : un anneau de lumière en perspective sous le portail */
.dive-base{
  position: absolute; left: 6%; right: 6%; top: calc(100% - 14px); height: 70px; z-index: 0;
  background: radial-gradient(ellipse 50% 55% at 50% 30%, rgba(155,111,212,.45), rgba(107,63,168,.14) 55%, transparent 78%);
  pointer-events: none;
}
.dive-base::before{
  content: ''; position: absolute; left: 10%; right: 10%; top: 6px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(216,208,144,.4);
  box-shadow: 0 0 18px rgba(155,111,212,.4), inset 0 0 18px rgba(155,111,212,.25);
  transition: border-color .5s, box-shadow .5s;
}
.dive:hover .dive-base::before{ border-color: rgba(216,208,144,.75); box-shadow: 0 0 30px rgba(155,111,212,.6), inset 0 0 22px rgba(155,111,212,.4); }

/* Variante « objectif » (Découvrir mon parcours) : diaphragme, bokehs et
   bague de mise au point derrière le texte */
.dive--signal{ margin-top: clamp(80px, 12vh, 130px); }
.dive-lens{
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 56% 90% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 56% 90% at 50% 50%, #000 55%, transparent 100%);
}

/* ─────────────── ILS M'ONT FAIT CONFIANCE ─────────────── */
.trust{
  padding: clamp(70px, 11vh, 120px) 0; overflow: hidden;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(9, 7, 15, .5);
}
.trust-title{ margin-bottom: clamp(34px, 5vh, 56px); padding: 0 var(--gutter); }
/* « Les tranches » : une fine bande d'image par personne, le nom à la verticale.
   Au survol (ou au toucher), la tranche s'ouvre, l'image reprend ses couleurs, le nom apparaît. */
.slices{ display: flex; gap: 6px; height: clamp(360px, 52vh, 460px); max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.slice{
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 3px; cursor: default; outline: none;
  background: radial-gradient(circle at 50% 38%, rgba(155,111,212,.3), #120d1d 72%);
  filter: grayscale(.85) brightness(.7);
  transition: flex-grow .7s var(--ease), filter .7s var(--ease);
}
.slices:hover .slice:hover, .slice:has(:focus-visible), .slice:focus-visible, .slice.open{ flex-grow: 5; filter: none; }
/* L'image : un calque un peu plus grand que la tranche, qui dérive lentement dans tous les sens
   en zoomant légèrement (chaque tranche à son rythme). Le dégradé sombre du bas passe par-dessus.
   (Attention : une image locale passée par --img se lit depuis CE fichier CSS → écrire url('../img/…')) */
.slice::before{
  content: ''; position: absolute; inset: -14%;
  background: var(--img, none) var(--pos, center) / cover no-repeat; /* --pos : cadrage (ex. sur un visage) */
  animation: slice-drift 26s ease-in-out infinite;
}
.slice::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,7,15,.92), rgba(9,7,15,.12) 62%); }
.slice:nth-child(2n)::before{ animation-duration: 31s; animation-delay: -9s; }
.slice:nth-child(3n)::before{ animation-duration: 28s; animation-delay: -17s; animation-direction: reverse; }
@keyframes slice-drift{
  0%  { transform: translate(-6%, -4%) scale(1.04); }
  25% { transform: translate(5%, -7%) scale(1.13); }
  50% { transform: translate(7%, 5%) scale(1.06); }
  75% { transform: translate(-5%, 7%) scale(1.15); }
  100%{ transform: translate(-6%, -4%) scale(1.04); }
}
/* BPM Motion : un logo, pas une photo. Fermée, la tranche est zoomée sur les lettres et
   s'y promène (B, P, M, puis MOTION) sans jamais sortir du logo : le calque garde les
   proportions du logo et couvre toujours toute la tranche ; il ne se déplace que dans ses limites.
   Ouverte, le logo apparaît en entier. (--lw / --lh : taille du logo zoomé) */
.slice--logo{ container-type: size; }
.slice--logo-dark::before{ mix-blend-mode: screen; } /* logo sur fond noir : le noir disparaît dans le fond de la tranche */
.slice--logo::before{
  --lw: max(calc(118cqh * var(--ar, 1.4447)), 112cqw);   /* --ar = largeur / hauteur du logo (1,4447 pour BPM Motion) */
  --lh: calc(var(--lw) / var(--ar, 1.4447));
  inset: auto; left: 0; top: 0; width: var(--lw); height: var(--lh);
  background: var(--img) center / 100% 100% no-repeat;
}
.slice.slice--logo::before{ animation: logo-tour 90s linear infinite; } /* prioritaire sur les rythmes des autres tranches */
/* Ordinateur (tranche haute et étroite) : on longe le haut des lettres B → P → M, on descend,
   on revient par MOTION, on remonte. Le temps de chaque étape suit sa longueur : vitesse constante. */
@keyframes logo-tour{
  0%  { transform: translate(0, 0); }
  45% { transform: translate(calc(100cqw - var(--lw)), 0); }
  50% { transform: translate(calc(100cqw - var(--lw)), calc(100cqh - var(--lh))); }
  95% { transform: translate(0, calc(100cqh - var(--lh))); }
  100%{ transform: translate(0, 0); }
}
/* Téléphone (bande large et basse) : le parcours se fait surtout de haut en bas */
@keyframes logo-tour-m{
  0%  { transform: translate(0, 0); }
  8.5%{ transform: translate(calc(100cqw - var(--lw)), 0); }
  50% { transform: translate(calc(100cqw - var(--lw)), calc(100cqh - var(--lh))); }
  58.5%{ transform: translate(0, calc(100cqh - var(--lh))); }
  100%{ transform: translate(0, 0); }
}
.slices:hover .slice--logo:hover::before, .slice--logo:focus-visible::before, .slice--logo:has(:focus-visible)::before, .slice--logo.open::before{
  animation: none; transform: none; width: 100%; height: 100%;
  background: var(--img) center 42% / auto 52% no-repeat;
}
.slice-v{
  position: absolute; z-index: 1; left: 50%; bottom: 22px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl;
  font-family: var(--display); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--white); white-space: nowrap;
  transition: opacity .4s;
}
.slice-h{ position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 22px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .6s var(--ease); }
.slice-h small{ display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.slice-h strong{ display: block; margin-top: .3rem; font-family: var(--display); font-weight: 700; font-size: clamp(16px, 1.8vw, 26px); line-height: 1.1; text-transform: uppercase; color: var(--white); white-space: nowrap; }
/* Le nom est un lien vers l'Instagram de la personne : au survol, il s'allume en or */
.slice-h{ pointer-events: none; } /* tranche fermée : pas de clic sur un lien invisible */
.slices:hover .slice:hover .slice-h, .slice:focus-visible .slice-h, .slice:has(:focus-visible) .slice-h, .slice.open .slice-h{ pointer-events: auto; }
/* un nom trop long (Cain & Céline Kitsaïs) passe sur deux lignes ; l'icône suit le dernier mot */
.slice-link{ display: block; width: fit-content; max-width: 100%; margin-top: .3rem; color: var(--white); text-wrap: balance; }
.slice-link strong{ display: inline; margin-top: 0; white-space: normal; transition: color .3s, text-shadow .3s; }
.slice-link .slice-ig{ display: inline-block; margin-left: .5rem; vertical-align: -.05em; }
.slice-ig{ flex: none; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .5; transition: opacity .3s, color .3s, transform .3s var(--ease), filter .3s; }
.slice-link:hover strong, .slice-link:focus-visible strong{ color: var(--gold); text-shadow: 0 0 18px rgba(216,208,144,.55), 0 0 2px rgba(216,208,144,.8); }
.slice-link:hover .slice-ig, .slice-link:focus-visible .slice-ig{ opacity: 1; color: var(--gold); transform: translateY(-2px); filter: drop-shadow(0 0 6px rgba(216,208,144,.7)); }
.slice-bio{ margin-top: .55rem; max-width: 34em; font-size: .86rem; line-height: 1.5; color: var(--light); }
.slices:hover .slice:hover .slice-v, .slice:focus-visible .slice-v, .slice:has(:focus-visible) .slice-v, .slice.open .slice-v{ opacity: 0; }
.slices:hover .slice:hover .slice-h, .slice:focus-visible .slice-h, .slice:has(:focus-visible) .slice-h, .slice.open .slice-h{ opacity: 1; transform: none; transition-delay: .2s; }

/* ─────────────── 05 // LE TROU NOIR (contact) ─────────────── */
.cta{
  min-height: 122vh; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.blackhole{ position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* Les côtés du trou noir : des nébuleuses très floues, derrière les étoiles filantes */
.cta-sides{ position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.neb{ position: absolute; border-radius: 50%; filter: blur(50px); animation: neb-drift 28s ease-in-out infinite alternate; }
.neb--l { left: -20vw; top: 6%;  width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(107,63,168,.42), transparent 66%); }
.neb--l2{ left: -10vw; top: 56%; width: 28vw; height: 28vw; background: radial-gradient(circle, rgba(216,208,144,.16), transparent 66%); animation-duration: 34s; }
.neb--r { right: -20vw; top: 34%; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(91,75,196,.4), transparent 66%); animation-duration: 31s; animation-direction: alternate-reverse; }
.neb--r2{ right: -8vw; top: 4%;  width: 26vw; height: 26vw; background: radial-gradient(circle, rgba(216,208,144,.14), transparent 66%); animation-duration: 38s; }
@keyframes neb-drift{ to{ transform: translate(2.5vw, -2vw) scale(1.08); } }
.cta-inner{ /* trois rangées : vide / le titre (au centre du trou noir) / le bouton, tout en bas */
  position: relative; z-index: 1; flex: 1; width: 100%;
  display: grid; grid-template-rows: 1fr auto 1fr;
}
.cta-top{ grid-row: 2; }
.cta .label{ justify-content: center; }
/* Le trou noir reste en arrière-plan, derrière le texte */
.cta-bottom{ grid-row: 3; align-self: end; padding-top: 3rem; } /* sous les anneaux, bien lisible */
.cta-title{
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 4.8vw, 76px);
  line-height: 1.05; letter-spacing: .01em; color: var(--white);
  /* lisible devant le trou noir : halo sombre serré + large */
  text-shadow: 0 0 6px rgba(9,7,15,.95), 0 0 18px rgba(9,7,15,.95), 0 0 46px rgba(9,7,15,.9);
}
.cta-title em{ font-style: normal; color: #b994ee; } /* plein (pas creux) : lisible devant le disque lumineux */
.cta .btn{ text-shadow: 0 0 6px #09070f, 0 0 18px #09070f, 0 0 34px rgba(9,7,15,.9); } /* violet un peu plus clair : ressort devant le disque */
.cta-alt{ margin-top: 1.9rem; font-size: .9rem; letter-spacing: .06em; color: var(--text); }
.cta-alt a{ transition: color .3s; }
.cta-alt a:hover{ color: var(--gold); }

/* ─────────────── PIED DE PAGE ─────────────── */
.footer{ padding: 1.8rem var(--gutter); border-top: 1px solid var(--border); background: rgba(9,7,15,.7); }
.footer-bottom{
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  align-items: center;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.footer-legal{ display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; }
.footer-legal a{ color: var(--text); transition: color .3s, text-shadow .3s; }
.footer-legal a:hover, .footer-legal a[aria-current]{ color: var(--white); text-shadow: 0 0 12px rgba(155,111,212,.8); }
.footer-bottom .sl{ color: var(--accent2); letter-spacing: 0; }

/* ─────────────── PAGE EN CONSTRUCTION (provisoire) ─────────────── */
.soon{ min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.soon .label{ justify-content: center; }
.soon-title{
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 5.4vw, 88px);
  line-height: 1; letter-spacing: .01em; color: var(--white);
}
.soon-title em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.soon-text{ margin: 1.8rem 0 2.6rem; max-width: 30em; font-size: .82rem; line-height: 1.9; }

/* ══════════════════════════════════════════════════════════════
   PAGE PROJETS
   ══════════════════════════════════════════════════════════════ */
@keyframes p-spin{ to{ transform: rotate(360deg); } }

/* ─────────────── En-tête + carte du ciel ─────────────── */
.p-hero{ padding-top: calc(var(--bar) + clamp(80px, 13vh, 150px)); padding-bottom: clamp(20px, 4vh, 50px); text-align: center; }
.p-hero .label{ justify-content: center; }
.p-title{
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 6vw, 100px);
  line-height: 1; letter-spacing: .01em; color: var(--white);
}
.p-title em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.p-intro{ margin: 1.8rem auto 0; max-width: 720px; font-size: clamp(.98rem, 1.15vw, 1.15rem); line-height: 1.75; color: var(--light); text-wrap: balance; }

.skymap{
  --orb: clamp(120px, 11vw, 176px);
  position: relative; display: flex; justify-content: center; gap: clamp(24px, 3.6vw, 64px);
  max-width: 1320px; margin: clamp(70px, 11vh, 120px) auto 0;
}
.skymap::before{ /* le fil d'or qui relie les projets */
  content: ''; position: absolute; left: 4%; right: 4%; top: calc(var(--orb) / 2); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216,208,144,.5) 15%, rgba(216,208,144,.5) 85%, transparent);
  box-shadow: 0 0 10px rgba(216,208,144,.3);
}
.skymap a{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .6rem; width: calc(var(--orb) + 40px); text-align: center; }
.skymap-orb{
  width: var(--orb); height: var(--orb); margin-bottom: .7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 28%, rgba(200,175,245,.28), rgba(40,26,76,.85) 55%, rgba(12,10,20,.96) 76%);
  border: 1px solid rgba(155,111,212,.4);
  box-shadow: inset 0 0 18px rgba(155,111,212,.3), 0 10px 30px -10px rgba(0,0,0,.8);
  transition: transform .6s var(--ease), border-color .4s, box-shadow .4s;
}
.skymap-orb img{ width: 66%; height: auto; opacity: .75; transition: opacity .4s, filter .4s; }
.skymap a:hover .skymap-orb{ transform: translateY(-6px); border-color: rgba(216,208,144,.7); box-shadow: inset 0 0 22px rgba(155,111,212,.4), 0 0 34px rgba(155,111,212,.4); }
.skymap a:hover .skymap-orb img{ opacity: 1; filter: drop-shadow(0 0 6px rgba(155,111,212,.9)); }
.skymap-name{ font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(.74rem, .85vw, .92rem); letter-spacing: .06em; line-height: 1.35; color: var(--white); }

/* ─────────────── Navigation latérale ─────────────── */
.pnav{
  position: fixed; right: clamp(16px, 2.2vw, 34px); top: 50%; z-index: 70;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 24px;
  opacity: 0; pointer-events: none; transition: opacity .5s;
}
.pnav.is-visible{ opacity: 1; pointer-events: auto; }
.pnav::before{ /* le fil */
  content: ''; position: absolute; right: 4px; top: 5px; bottom: 5px; width: 1px;
  background: rgba(155,111,212,.25);
}
.pnav-fill{
  position: absolute; right: 4px; top: 5px; width: 1px; height: 0; max-height: calc(100% - 10px);
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.pnav a{ position: relative; display: flex; align-items: center; justify-content: flex-end; gap: .9rem; }
.pnav a i{
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--black); border: 1px solid rgba(155,111,212,.65);
  transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease);
}
.pnav a span{
  font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text); white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: opacity .4s, transform .5s var(--ease);
}
/* Les noms n'apparaissent qu'au survol du fil : ils ne recouvrent jamais le texte */
.pnav:hover a span{ opacity: .55; transform: none; }
.pnav a:hover span, .pnav:hover a.is-active span{ opacity: 1; }
.pnav a span{ padding: .3rem .55rem; border-radius: 2px; background: rgba(9,7,15,.82); }
.pnav a.is-active span{ color: var(--white); }
.pnav a.is-active i{ background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--gold); transform: scale(1.25); }

/* ─────────────── Un projet ─────────────── */
.project{
  position: relative; max-width: 1320px; margin: 0 auto;
  padding: clamp(56px, 8vh, 96px) var(--gutter) clamp(24px, 4vh, 44px);
}
.project-head{
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem;
  margin-bottom: clamp(40px, 6vh, 64px);
}
.project-code{
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.project-code .sl{ color: var(--accent); letter-spacing: 0; }
.project-code .dot{ color: var(--gold); }
.project-title{
  margin-top: .7rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 4.8vw, 80px);
  line-height: 1.02; letter-spacing: .01em; color: var(--white);
}
.project-role{ margin-top: 1.1rem; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.project-credits{ margin-top: .6rem; font-family: var(--body); font-style: italic; font-size: 1.05rem; color: var(--light); }
.project-credits a{ border-bottom: 1px dotted rgba(155,111,212,.6); transition: color .3s, border-color .3s; }
.project-credits a:hover{ color: var(--gold); border-color: var(--gold); }
.project-cstl{
  width: clamp(110px, 12vw, 180px); height: auto; opacity: .6; filter: drop-shadow(0 0 10px rgba(155,111,212,.5));
  transition: opacity .9s, filter .5s, transform 1s var(--ease);
}
.cstl-anim .project-cstl:not(.is-in){ opacity: 0; transform: translateY(34px); }
/* La constellation s'illumine au survol, comme sur la carte du ciel */
.project-cstl:hover{
  opacity: 1; transform: scale(1.06) rotate(-3deg);
  filter: drop-shadow(0 0 8px rgba(216,208,144,.75)) drop-shadow(0 0 26px rgba(155,111,212,.9));
}

/* Le lecteur vidéo */
.player{
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid rgba(155,111,212,.32);
  box-shadow: 0 44px 90px -34px rgba(0,0,0,.9), 0 0 70px rgba(155,111,212,.12);
}
.player > img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.7) saturate(.9); transition: transform 1.4s var(--ease), filter .6s;
}
.player:hover > img{ transform: scale(1.03); filter: brightness(.88) saturate(1); }
/* Miniature avec bandes noires (format cinéma) : on recadre */
.player > img.is-letterboxed{ transform: scale(1.11); }
.player:hover > img.is-letterboxed{ transform: scale(1.14); }
.player > img.is-scope{ transform: scale(1.24); } /* bandes plus épaisses (format scope) */
.player:hover > img.is-scope{ transform: scale(1.27); }
.player::before{ /* lignes de balayage au survol */
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(238,233,248,.04) 0 1px, transparent 1px 4px);
  opacity: 0; transition: opacity .5s;
}
.player::after{ /* coins dorés au survol */
  content: ''; position: absolute; inset: 14px; z-index: 2; pointer-events: none;
  --c: rgba(216,208,144,.85); --l: 22px; --t: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left     / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left     / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right    / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right    / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
  opacity: 0; transform: scale(1.03); transition: opacity .5s, transform .6s var(--ease);
}
.player:hover::before{ opacity: 1; }
.player:hover::after{ opacity: 1; transform: none; }
.player-play{
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(9,7,15,.45); border: 1px solid rgba(216,208,144,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .5s var(--ease), background .4s, box-shadow .4s;
}
.player-play svg{ width: 26px; height: 26px; margin-left: 4px; fill: var(--gold); }
.pp-ring{
  position: absolute; inset: -11px; border-radius: 50%;
  border: 1px dashed rgba(155,111,212,.6);
  animation: p-spin 18s linear infinite;
}
.player:hover .player-play{ transform: scale(1.08); background: rgba(216,208,144,.12); box-shadow: 0 0 40px rgba(216,208,144,.4); }
.player iframe{ position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; }
.player.is-playing{ cursor: default; }
.player.is-playing::before, .player.is-playing::after{ display: none; }
.player-source{ margin-top: .9rem; text-align: right; font-size: .6rem; letter-spacing: .1em; color: var(--muted); }
.player-source a{ color: var(--text); border-bottom: 1px solid var(--border); transition: color .3s, border-color .3s; }
.player-source a:hover{ color: var(--gold); border-color: var(--gold); }

/* Vidéo à venir */
.player--soon{ display: grid; place-items: center; cursor: default; background: radial-gradient(ellipse at 50% 50%, rgba(107,63,168,.2), var(--surface) 70%); }
.player--soon::before, .player--soon::after{ display: none; }
.soon-orbit{ position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed rgba(155,111,212,.55); animation: p-spin 24s linear infinite; }
.soon-orbit::after{ content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.soon-label{ position: relative; font-family: var(--body); font-style: italic; font-size: 1.3rem; color: var(--light); }

/* Le texte */
.project-text{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 100px);
  margin-top: clamp(50px, 8vh, 80px);
}
.project-lead{ font-family: var(--body); font-weight: 400; font-size: clamp(18px, 1.55vw, 24px); line-height: 1.5; color: var(--white); }
.project-apport{ margin-top: 1.4rem; font-size: clamp(.92rem, 1vw, 1.02rem); line-height: 1.8; color: var(--light); }
.mini-label{
  display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.mini-label::before{ content: ''; width: 24px; height: 1px; background: var(--gold); box-shadow: 0 0 6px var(--gold); }
/* Les missions : « Avant » / « Pendant » le tournage, deux grands mots en relief,
   une petite étoile qui s'allume au survol de chaque mission */
.duo{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 46px); }
.duo-h{
  margin-bottom: .7rem; font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.7vw, 26px); line-height: 1; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--pa, #d8d090) 75%, transparent);
}
.duo-list li{ position: relative; padding: .5rem 0 .5rem 1.5rem; font-size: .92rem; line-height: 1.45; color: var(--white); transition: transform .4s var(--ease); }
.duo-list li::before{
  content: '✦'; position: absolute; left: 0; top: .62rem; font-size: .62rem;
  color: color-mix(in srgb, var(--pa, #d8d090) 35%, transparent); transition: color .3s, text-shadow .3s;
}
.duo-list li:hover{ transform: translateX(5px); }
.duo-list li:hover::before{ color: var(--pa, var(--gold)); text-shadow: 0 0 10px var(--pa, var(--gold)); }

/* Le témoignage */
.testimony{
  position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center;
  margin-top: clamp(44px, 7vh, 80px); padding: clamp(32px, 4vw, 56px);
  border: 1px solid rgba(155,111,212,.32);
  background: linear-gradient(160deg, rgba(155,111,212,.12) 0%, rgba(12,10,20,.55) 55%, rgba(155,111,212,.06) 100%);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.testimony-title{
  margin-bottom: 1.2rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 32px); line-height: 1.15; letter-spacing: .02em;
  color: var(--gold); text-shadow: 0 0 36px rgba(216,208,144,.3);
}
.testimony-quote{ font-family: var(--body); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; color: var(--light); }
.testimony-quote em{ color: var(--accent); }
.player--small .player-play{ width: 76px; height: 76px; margin: -38px 0 0 -38px; }

/* ─────────────── NOVAPULSE : la DA « précieuse » ───────────────
   Noir velours, or champagne, capitales espacées, facettes de diamant. */
.np{ --champagne: #e6d3a3; --ivory: #f4efe6; max-width: none; padding-left: 0; padding-right: 0; }
.np > *:not(.np-bg){ max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.np-bg{ /* (la lumière d'ambiance est celle de tous les projets : voir « LES COULEURS DE CHAQUE PROJET ») */
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 8%, #000 90%, transparent);
}
.np-bg::after{ /* reflets de soie */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(118deg, rgba(230,211,163,.022) 0 1px, transparent 1px 8px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.np .project-code .dot, .np .mini-label{ color: var(--champagne); }
.np .mini-label::before{ background: var(--champagne); box-shadow: 0 0 6px var(--champagne); }
.np-title{
  background: linear-gradient(100deg, #f8ebc4 0%, #c8a455 30%, #fff4d2 52%, #b38f45 78%, #f1dfae 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .01em;
}
.np-title.glitch::before{ color: var(--champagne); }
.np .project-role{ color: var(--champagne); }
.np-intro{ margin-top: 0; }

.np-stage{
  display: grid; grid-template-columns: minmax(300px, 1fr) 1fr; gap: clamp(30px, 5vw, 90px); align-items: start;
  margin-top: clamp(70px, 10vh, 110px);
}
.np-gem{ position: sticky; top: calc(var(--bar) + 40px); text-align: center; }
.np-gem svg{ width: 100%; max-width: 620px; overflow: visible; }
/* Boutons des tournages (affichés seulement sur téléphone) */
.np-tabs{ display: none; }
.np-tabs button{
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .85rem;
  font-family: var(--display); font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory);
  border: 1px solid rgba(230,211,163,.35); background: rgba(12,10,20,.7); border-radius: 2px;
  transition: background .3s, border-color .3s, color .3s;
}
.np-tabs button i{ font-family: var(--mono); font-style: normal; font-size: .55rem; letter-spacing: .1em; color: var(--champagne); }
.np-tabs button.is-active{ background: var(--champagne); border-color: var(--champagne); color: #15101f; }
.np-tabs button.is-active i{ color: #15101f; }
.np-gem-hint{
  margin-top: 3rem; font-size: .6rem; line-height: 2; letter-spacing: .24em; text-transform: uppercase; color: var(--text);
}
.np-gem-hint b{ font-weight: 400; color: var(--champagne); }
.np-hint-dot{
  display: inline-block; width: 7px; height: 7px; margin: 0 .7rem .1rem 0; border-radius: 50%;
  background: var(--champagne); box-shadow: 0 0 10px var(--champagne); animation: gem-blink 1.6s ease-in-out infinite;
}
@keyframes gem-blink{ 50%{ opacity: .25; } }
@keyframes gem-pulse{ 0%{ transform: scale(1); opacity: .8; } 100%{ transform: scale(3.4); opacity: 0; } }
/* Les parts du diamant : cliquables, elles s'allument au survol */
.gem-sector{ fill: url(#gem-glow); fill-opacity: 0; cursor: pointer; transition: fill-opacity .45s; }
.gem-sector.is-hint{ fill-opacity: .55; }
.gem-sector.is-active{ fill-opacity: .7; }
.gem-sector.is-hover{ fill-opacity: 1; }
.gem-edge, .gem-facet, .gem-beam, .gem-core, .gem-core-halo, .gem-fill, .gem-girdle, .gem-glint{ pointer-events: none; }
.gem-girdle{ stroke: rgba(230,211,163,.55); stroke-width: 1.2; }
.gem-glint{ fill: #fff6dc; opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px rgba(230,211,163,.95)); animation: gem-glint 5s ease-in-out infinite; }
@keyframes gem-glint{ 0%, 70%, 100%{ opacity: 0; transform: scale(.3) rotate(0deg); } 80%{ opacity: 1; transform: scale(1.1) rotate(45deg); } 90%{ opacity: .2; transform: scale(.6) rotate(90deg); } }
.gem-edge{ fill: none; stroke: rgba(230,211,163,.7); stroke-width: 1.4; filter: drop-shadow(0 0 6px rgba(230,211,163,.4)); }
.gem-facet{ fill: none; stroke: rgba(230,211,163,.28); stroke-width: 1; }
.gem-facet--soft{ stroke: rgba(155,111,212,.3); stroke-dasharray: 3 5; }
.gem-beam{ stroke: var(--champagne); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(230,211,163,.9)); }
.gem-core{ fill: #fff6dc; filter: drop-shadow(0 0 8px rgba(230,211,163,.95)); }
.gem-core-halo{ fill: rgba(230,211,163,.1); }
.gem-node{ cursor: pointer; outline: none; }
.gem-node-pulse{ /* une onde qui appelle le clic */
  fill: none; stroke: var(--champagne); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center; animation: gem-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.gem-node.is-active .gem-node-pulse{ display: none; }
.gem-node-halo{ fill: rgba(230,211,163,.04); stroke: rgba(230,211,163,.25); transition: fill .4s, stroke .4s; }
.gem-node-dot{ fill: #1a1427; stroke: var(--champagne); stroke-width: 1.6; transition: fill .4s; }
.gem-pill{ fill: rgba(12,10,20,.78); stroke: rgba(230,211,163,.38); stroke-width: 1; transition: fill .4s, stroke .4s; }
.gem-label{ font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; fill: rgba(244,239,230,.82); transition: fill .4s; }
.gem-num{ font-family: var(--mono); font-size: 10px; letter-spacing: .2em; fill: rgba(230,211,163,.6); }
.gem-node.is-hover .gem-label, .gem-node.is-hint .gem-label, .gem-node:focus-visible .gem-label{ fill: var(--ivory); }
.gem-node.is-hover .gem-pill, .gem-node.is-hint .gem-pill, .gem-node:focus-visible .gem-pill{ fill: rgba(230,211,163,.14); stroke: rgba(230,211,163,.85); }
.gem-node.is-hover .gem-node-halo, .gem-node:focus-visible .gem-node-halo{ fill: rgba(230,211,163,.12); stroke: rgba(230,211,163,.6); }
.gem-node.is-hover .gem-node-dot{ fill: rgba(230,211,163,.5); }
.gem-node.is-active .gem-node-dot{ fill: var(--champagne); filter: drop-shadow(0 0 8px rgba(230,211,163,.95)); }
.gem-node.is-active .gem-node-halo{ fill: rgba(230,211,163,.14); stroke: rgba(230,211,163,.7); }
.gem-node.is-active .gem-pill{ fill: var(--champagne); stroke: var(--champagne); }
.gem-node.is-active .gem-label{ fill: #15101f; }

.np-shoots{ position: relative; min-height: 640px; }
.np.is-enhanced .np-shoot{ display: none; }
.np.is-enhanced .np-shoot.is-active{ display: block; }
.np-shoot + .np-shoot{ margin-top: 80px; } /* sans JS : les uns sous les autres */
.np.is-enhanced .np-shoot + .np-shoot{ margin-top: 0; }
.np-count{ font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.np-count b{ font-weight: 400; color: var(--champagne); }
.np-shoot-title{
  margin-top: 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.9vw, 46px); line-height: 1.05;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ivory);
}
.np-universe{ margin: .8rem 0 2rem; font-family: var(--body); font-style: italic; font-size: 1.2rem; color: var(--champagne); }
.np-desc{ margin: -.9rem 0 2rem; max-width: 44em; font-size: .8rem; line-height: 1.9; color: var(--text); }
.np .player{ border-color: rgba(230,211,163,.38); box-shadow: 0 44px 90px -34px rgba(0,0,0,.9), 0 0 70px rgba(230,211,163,.1); }
.np .player-play{ border-color: rgba(230,211,163,.7); }
.np .player-play svg{ fill: var(--champagne); }
.np .pp-ring{ border-color: rgba(230,211,163,.45); }

/* ─────────────── LES COULEURS DE CHAQUE PROJET ───────────────
   Comme NovaPulse, chaque projet a son ambiance : une lumière de fond,
   un titre en dégradé, et ses couleurs sur le rôle, les missions,
   la vidéo et la constellation. (--pa : couleur principale, --pa2 : accent) */
#entre-elles,  .skymap a[href="#entre-elles"]  { --pa: #eba3b4; --pa2: #e0a77e; }  /* rose poudré · cuivre */
#marcia-baila, .skymap a[href="#marcia-baila"] { --pa: #e8505f; --pa2: #f1c56c; }  /* rouge carmin · or chaud */
#the-line,     .skymap a[href="#the-line"]     { --pa: #72c9b6; --pa2: #a57ae0; }  /* vert d'eau · violet de la fissure */
#magiclab,     .skymap a[href="#magiclab"]     { --pa: #7fd8ff; --pa2: #c3b4ff; }  /* cyan électrique · lavande */
#novapulse,    .skymap a[href="#novapulse"]    { --pa: #e6d3a3; --pa2: #c8a455; }  /* or champagne · or du titre */

.project:is(#entre-elles, #marcia-baila, #the-line, #magiclab, #novapulse){ isolation: isolate; }
.project:is(#entre-elles, #marcia-baila, #the-line, #magiclab, #novapulse)::before{ /* la lumière d'ambiance */
  content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 32% at 18% 16%, color-mix(in srgb, var(--pa) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 30% at 85% 55%, color-mix(in srgb, var(--pa2) 13%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 85%, transparent);
}
#novapulse::before{ /* même lumière, placée comme chez les autres : entre le texte et la vidéo */
  background:
    radial-gradient(ellipse 50% 660px at 18% 52%, color-mix(in srgb, var(--pa) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 620px at 85% 78%, color-mix(in srgb, var(--pa2) 13%, transparent), transparent 70%);
}
.project:not(.np) .project-title{
  background: linear-gradient(100deg, var(--pa, var(--white)) 0%, var(--white) 48%, var(--pa2, var(--white)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.project:not(.np) .project-title.glitch::before{ color: var(--pa2, var(--gold)); }
/* Les mêmes dégradés, dessinés comme une image : le « mode sombre » de Samsung Internet
   assombrit les couleurs et les dégradés CSS, mais laisse les images intactes */
#entre-elles .project-title{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23eba3b4'/%3E%3Cstop offset='0.48' stop-color='%23eee9f8'/%3E%3Cstop offset='1' stop-color='%23e0a77e'/%3E%3C/linearGradient%3E%3Crect width='100' height='10' fill='url(%23g)'/%3E%3C/svg%3E"); background-size: 100% 100%; }
#marcia-baila .project-title{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23e8505f'/%3E%3Cstop offset='0.48' stop-color='%23eee9f8'/%3E%3Cstop offset='1' stop-color='%23f1c56c'/%3E%3C/linearGradient%3E%3Crect width='100' height='10' fill='url(%23g)'/%3E%3C/svg%3E"); background-size: 100% 100%; }
#the-line .project-title{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%2372c9b6'/%3E%3Cstop offset='0.48' stop-color='%23eee9f8'/%3E%3Cstop offset='1' stop-color='%23a57ae0'/%3E%3C/linearGradient%3E%3Crect width='100' height='10' fill='url(%23g)'/%3E%3C/svg%3E"); background-size: 100% 100%; }
#magiclab .project-title{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%237fd8ff'/%3E%3Cstop offset='0.48' stop-color='%23eee9f8'/%3E%3Cstop offset='1' stop-color='%23c3b4ff'/%3E%3C/linearGradient%3E%3Crect width='100' height='10' fill='url(%23g)'/%3E%3C/svg%3E"); background-size: 100% 100%; }
.np .np-title{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23f8ebc4'/%3E%3Cstop offset='0.3' stop-color='%23c8a455'/%3E%3Cstop offset='0.52' stop-color='%23fff4d2'/%3E%3Cstop offset='0.78' stop-color='%23b38f45'/%3E%3Cstop offset='1' stop-color='%23f1dfae'/%3E%3C/linearGradient%3E%3Crect width='100' height='10' fill='url(%23g)'/%3E%3C/svg%3E"); background-size: 100% 100%; }
/* Touche cyberpunk sur tous les titres de projets : léger dédoublement de couleur, comme un signal vidéo */
.project .project-title{ filter: drop-shadow(2px 0 0 rgba(127,216,255,.28)) drop-shadow(-2px 0 0 rgba(232,80,95,.22)); }
/* Safari (iPhone, iPad, Mac) dessine mal ce filtre sur un texte en dégradé : on le retire là,
   le titre garde son dégradé et le glitch */
@supports (font: -apple-system-body) or (-webkit-touch-callout: none){
  .project .project-title{ filter: none; }
}
/* Samsung Internet en mode sombre renforce ce décalage rouge/bleu (titre « en double ») : retiré aussi */
.is-samsung .project .project-title{ filter: none; }
.project:not(.np) .project-role{ color: var(--pa, var(--accent)); }
.project:not(.np) .project-credits a{ border-bottom-color: color-mix(in srgb, var(--pa, #9b6fd4) 60%, transparent); }
.project:not(.np) .project-credits a:hover{ color: var(--pa2, var(--gold)); border-color: var(--pa2, var(--gold)); }
.project:not(.np) .project-cstl{ filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pa, #9b6fd4) 70%, transparent)); }
.project:not(.np) .project-cstl:hover{ filter: drop-shadow(0 0 8px var(--pa2, #d8d090)) drop-shadow(0 0 26px var(--pa, #9b6fd4)); }
.project:not(.np) .mini-label{ color: var(--pa2, var(--gold)); }
.project:not(.np) .mini-label::before{ background: var(--pa2, var(--gold)); box-shadow: 0 0 6px var(--pa2, var(--gold)); }
.project:not(.np) .player{
  border-color: color-mix(in srgb, var(--pa, #9b6fd4) 45%, transparent);
  box-shadow: 0 44px 90px -34px rgba(0,0,0,.9), 0 0 80px color-mix(in srgb, var(--pa, #9b6fd4) 16%, transparent);
}
.project:not(.np) .player-play{ border-color: color-mix(in srgb, var(--pa2, #d8d090) 75%, transparent); }
.project:not(.np) .player-play svg{ fill: var(--pa2, var(--gold)); }
.project:not(.np) .pp-ring{ border-color: color-mix(in srgb, var(--pa, #9b6fd4) 60%, transparent); }
.project:not(.np) .player:hover .player-play{ background: color-mix(in srgb, var(--pa2, #d8d090) 14%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--pa2, #d8d090) 45%, transparent); }
.project:not(.np) .player-source a:hover{ color: var(--pa2, var(--gold)); border-color: var(--pa2, var(--gold)); }
#entre-elles .testimony{ border-color: color-mix(in srgb, var(--pa) 40%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--pa) 12%, transparent) 0%, rgba(12,10,20,.55) 55%, color-mix(in srgb, var(--pa2) 8%, transparent) 100%); }
#entre-elles .testimony-title{ color: var(--pa2); text-shadow: 0 0 36px color-mix(in srgb, var(--pa2) 30%, transparent); }
#entre-elles .testimony-quote em{ color: var(--pa); }
/* La carte du ciel : chaque cercle prend la couleur de son projet */
.skymap a .skymap-orb{
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--pa, #c8aff5) 32%, transparent), rgba(40,26,76,.85) 55%, rgba(12,10,20,.96) 76%);
  border-color: color-mix(in srgb, var(--pa, #9b6fd4) 50%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--pa, #9b6fd4) 30%, transparent), 0 10px 30px -10px rgba(0,0,0,.8);
}
.skymap a:hover .skymap-orb{ border-color: var(--pa2, var(--gold)); box-shadow: inset 0 0 22px color-mix(in srgb, var(--pa, #9b6fd4) 40%, transparent), 0 0 34px color-mix(in srgb, var(--pa, #9b6fd4) 45%, transparent); }
.skymap a:hover .skymap-orb img{ filter: drop-shadow(0 0 6px var(--pa, #9b6fd4)); }

/* ─────────────── Fin de page ─────────────── */
.p-end{ text-align: center; padding-top: clamp(80px, 12vh, 130px); }
.p-end .label{ justify-content: center; }
.p-end--tight{ padding-top: clamp(60px, 9vh, 100px); }
.p-end-title{
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4.2vw, 66px);
  line-height: 1.05; letter-spacing: .01em; color: var(--white);
}
.p-end-title em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.p-end-actions{ display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; }

/* ══════════════════════════════════════════════════════════════
   PAGE À PROPOS
   ══════════════════════════════════════════════════════════════ */
@keyframes ap-scan{ 0%{ top: 0; opacity: 0; } 8%{ opacity: 1; } 92%{ opacity: 1; } 100%{ top: 100%; opacity: 0; } }
@keyframes ap-blink{ 50%{ opacity: .2; } }

.ap-h2{
  text-align: center; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 62px);
  line-height: 1.05; letter-spacing: .01em; color: var(--white);
}
.ap-h2 em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.ap-intro{ margin: 1.6rem auto 0; max-width: 760px; text-align: center; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.55; color: var(--light); text-wrap: balance; }

/* ─────────────── En-tête : le nom + la fiche ─────────────── */
.ap-hero{
  display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(36px, 4.5vw, 80px);
  max-width: 1400px; margin: 0 auto; min-height: min(100vh, 980px);
  padding-top: calc(var(--bar) + clamp(36px, 6vh, 70px)); padding-bottom: clamp(30px, 5vh, 60px);
}
.ap-role{ font-size: .64rem; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }
.ap-role .dot{ color: var(--gold); margin: 0 .4rem; }
.ap-name{
  margin-top: 1.2rem;
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 5.2vw, 88px);
  line-height: .98; letter-spacing: .01em; color: var(--white);
}
/* « Marangoni » : lettres creuses, contour en dégradé violet → or (comme « Réalisateur » sur l'accueil) */
.ap-name em{ font-style: normal; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.4)); }
.ap-name em > span{ -webkit-text-stroke: 1.6px var(--c); color: transparent; }
.ap-lead{
  margin-top: 2.4rem; max-width: 30em;
  font-family: var(--body); font-weight: 400; font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; color: var(--light);
}
.ap-lead em{ color: var(--gold); }

/* La fiche holographique (inclinée en 3D, suit la souris) */
.idcard-wrap{ position: relative; perspective: 1300px; padding-bottom: 40px; }
.idcard{
  position: relative; width: min(700px, 100%); margin-left: auto; padding: 26px 30px 24px; overflow: hidden;
  border: 1px solid rgba(155,111,212,.42); border-radius: 4px;
  background: linear-gradient(160deg, rgba(155,111,212,.18) 0%, rgba(14,11,26,.86) 42%, rgba(14,11,26,.9) 70%, rgba(155,111,212,.1) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(238,233,248,.14), 0 50px 100px -40px rgba(0,0,0,.95), 0 0 80px rgba(155,111,212,.22);
  transform-style: preserve-3d;
}
.idcard::after{ /* coins dorés */
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  --c: rgba(216,208,144,.8); --l: 16px; --t: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left     / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left     / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right    / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right    / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}
.idcard-sheen{ /* reflet holographique qui glisse avec l'inclinaison */
  position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, rgba(185,148,238,.12) 43%, rgba(238,233,248,.16) 49%, rgba(216,208,144,.12) 55%, transparent 68%);
  background-size: 260% 100%; background-position: var(--sx, 60%) 0;
}
.idcard-top{
  display: flex; justify-content: space-between; align-items: center; padding-bottom: .9rem;
  border-bottom: 1px solid rgba(155,111,212,.25);
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted);
}
.idcard-live{ display: inline-flex; align-items: center; gap: .55rem; color: var(--gold); }
.idcard-live i{ width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); animation: ap-blink 1.6s ease-in-out infinite; }
.idcard-brand{ display: inline-flex; align-items: center; gap: .6rem; color: var(--light); }
.idcard-brand svg{ width: 30px; height: auto; overflow: visible; }
.idcard-brand line{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.idcard-main{ display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 30px; align-items: center; margin-top: 1.2rem; }
.idcard-photo{
  position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid rgba(155,111,212,.4);
  box-shadow: 0 0 30px rgba(155,111,212,.2);
}
.idcard-photo img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%;
  filter: contrast(1.04) saturate(.95);
}
.idcard-photo::before{ /* léger voile holographique : violet en bas, lignes de balayage */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(9,7,15,.1) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(155,111,212,.06) 0%, transparent 45%, rgba(42,22,86,.5) 100%);
}
.idcard-photo::after{ /* repères de cadre dorés */
  content: ''; position: absolute; inset: 7px; z-index: 2; pointer-events: none;
  --c: rgba(216,208,144,.9); --l: 12px; --t: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left     / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left     / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right    / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right    / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
}
.idcard-scan{ z-index: 3; }
/* Glitch : de temps en temps, des tranches de la photo se décalent en couleurs (violet / or) */
.idcard-glitch{
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: url(../img/loris-portrait.jpg) 50% 16% / cover no-repeat;
  animation: ap-glitch 4.6s steps(1, end) infinite;
}
.idcard-glitch--a{ filter: sepia(1) hue-rotate(218deg) saturate(3) brightness(.72) contrast(1.15); }  /* violet */
.idcard-glitch--b{ filter: sepia(.9) hue-rotate(2deg) saturate(1.5) brightness(.88) contrast(1.1); animation-name: ap-glitch-b; } /* or */
@keyframes ap-glitch{
  0%, 84%, 100%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  85%{ opacity: .82; clip-path: inset(14% 0 68% 0); transform: translateX(-18px); }
  87%{ opacity: .82; clip-path: inset(46% 0 38% 0); transform: translateX(9px); }
  89%{ opacity: .82; clip-path: inset(72% 0 14% 0); transform: translateX(-6px); }
  91%{ opacity: .82; clip-path: inset(28% 0 58% 0); transform: translateX(20px); }
  93%{ opacity: 0; }
}
@keyframes ap-glitch-b{
  0%, 85%, 100%{ opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  86%{ opacity: .82; clip-path: inset(30% 0 52% 0); transform: translateX(10px); }
  88%{ opacity: .82; clip-path: inset(60% 0 26% 0); transform: translateX(-11px); }
  90%{ opacity: .82; clip-path: inset(8% 0 80% 0); transform: translateX(7px); }
  92%{ opacity: 0; }
}
.idcard-spec{
  margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed rgba(155,111,212,.25);
  font-size: .78rem; line-height: 1.7; color: var(--white);
}
.idcard-spec span{ display: block; margin-bottom: .35rem; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.idcard-scan{
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(216,208,144,.85), transparent);
  box-shadow: 0 0 12px rgba(216,208,144,.6);
  animation: ap-scan 3.4s linear infinite;
}
.idcard-data div{
  display: grid; grid-template-columns: 86px 1fr; gap: .8rem; align-items: baseline;
  padding: .8rem 0; border-bottom: 1px dashed rgba(155,111,212,.2);
}
.idcard-data dt{ font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.idcard-data dd{ font-size: .86rem; line-height: 1.5; color: var(--white); }
.idcard-bottom{
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.2rem;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.idcard-bars{ display: flex; align-items: stretch; gap: 2px; height: 30px; }
.idcard-bars i{ display: block; background: rgba(238,233,248,.75); }
.idcard-bars i.g{ background: var(--gold); }
.idcard-base{ /* socle lumineux sous la carte */
  position: absolute; right: 6%; bottom: 0; width: min(560px, 90%); height: 70px; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 40%, rgba(155,111,212,.4), rgba(107,63,168,.12) 55%, transparent 78%);
}
.idcard-base::before{
  content: ''; position: absolute; left: 12%; right: 12%; top: 8px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(216,208,144,.4); box-shadow: 0 0 18px rgba(155,111,212,.4), inset 0 0 18px rgba(155,111,212,.25);
}

/* ─────────────── Le parcours ─────────────── */
.ap-path{ padding-top: clamp(40px, 6vh, 70px); padding-bottom: clamp(30px, 5vh, 60px); }
/* « L'affiche » : les quatre étapes en grands mots, chacun ajusté à toute la largeur,
   l'image de l'étape vue à travers les lettres (elle bouge doucement) */
.poster{ max-width: 1320px; margin: clamp(36px, 5vh, 60px) auto 0; display: grid; gap: 6px; }
.poster-row{ display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 30px; align-items: center; }
.poster-word{
  width: max-content; padding: .04em 0; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 100px; line-height: .9; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(238,233,248,.28);
  background-image: linear-gradient(rgba(255,240,250,.18), rgba(255,240,250,.18)), var(--img);
  background-size: cover, 140% auto; background-position: center, 50% 35%;
  -webkit-background-clip: text; background-clip: text;
  animation: poster-pan 16s ease-in-out infinite alternate;
}
.poster-row:nth-child(2) .poster-word{ animation-delay: -4s; }
.poster-row:nth-child(3) .poster-word{ animation-delay: -8s; }
.poster-row:nth-child(4) .poster-word{ animation-delay: -12s; }
@keyframes poster-pan{ from{ background-position: center, 30% 30%; } to{ background-position: center, 70% 45%; } }
.poster-note{ display: grid; gap: .3rem; padding-left: 18px; border-left: 1px solid rgba(216,208,144,.28); }
.poster-when{ font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.poster-note p{ font-size: clamp(.92rem, 1vw, 1.04rem); line-height: 1.6; color: var(--light); }

/* ─────────────── Sur un plateau ─────────────── */
.ap-method{ padding-top: clamp(50px, 7vh, 80px); padding-bottom: clamp(40px, 6vh, 70px); }
.bento{
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(150px, auto); gap: 14px;
  max-width: 1220px; margin: clamp(36px, 5vh, 56px) auto 0;
}
@keyframes ap-focus{ 0%{ filter: blur(5px); opacity: .55; } 60%{ filter: blur(0); opacity: 1; } 100%{ filter: blur(0); } }
.tile{
  position: relative; overflow: hidden; padding: clamp(20px, 2vw, 28px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem;
  border: 1px solid rgba(155,111,212,.26); background: rgba(14,11,26,.62);
  transition: border-color .5s, box-shadow .5s, background .5s;
}
.tile::before{ /* au survol : la grille des tiers apparaît, avec ses quatre points forts */
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  --g: rgba(216,208,144,.22);
  background:
    radial-gradient(circle, rgba(216,208,144,.9) 0 2px, transparent 3px) 33.333% 33.333% / 8px 8px no-repeat,
    radial-gradient(circle, rgba(216,208,144,.9) 0 2px, transparent 3px) 66.666% 33.333% / 8px 8px no-repeat,
    radial-gradient(circle, rgba(216,208,144,.9) 0 2px, transparent 3px) 33.333% 66.666% / 8px 8px no-repeat,
    radial-gradient(circle, rgba(216,208,144,.9) 0 2px, transparent 3px) 66.666% 66.666% / 8px 8px no-repeat,
    linear-gradient(90deg, transparent calc(33.333% - .5px), var(--g) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), var(--g) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(180deg, transparent calc(33.333% - .5px), var(--g) calc(33.333% - .5px) calc(33.333% + .5px), transparent calc(33.333% + .5px) calc(66.666% - .5px), var(--g) calc(66.666% - .5px) calc(66.666% + .5px), transparent calc(66.666% + .5px));
  opacity: 0; transform: scale(1.08); transition: opacity .6s, transform .8s var(--ease);
}
.tile::after{ /* … et les coins du cadre se resserrent sur la tuile */
  content: ''; position: absolute; inset: 12px; z-index: 0; pointer-events: none;
  --c: rgba(216,208,144,.9); --l: 18px; --t: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) top left     / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top left     / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) top right    / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) top right    / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom left  / var(--t) var(--l),
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--t),
    linear-gradient(var(--c), var(--c)) bottom right / var(--t) var(--l);
  background-repeat: no-repeat;
  opacity: 0; transform: scale(1.12); transition: opacity .45s, transform .6s var(--ease);
}
.tile:hover::before{ opacity: 1; transform: none; }
.tile:hover::after{ opacity: 1; transform: none; }
.tile:hover{ border-color: rgba(216,208,144,.5); background: rgba(22,16,40,.72); box-shadow: 0 0 40px rgba(155,111,212,.18); }
.tile:hover h3{ animation: ap-focus .7s var(--ease); } /* la mise au point */
.tile > *{ position: relative; z-index: 1; }
.tile h3{ font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(13px, 1.1vw, 17px); letter-spacing: .04em; line-height: 1.3; color: var(--white); }
.tile--feature{
  grid-column: 1 / 3; grid-row: 1 / 4; justify-content: flex-end;
  border-color: rgba(216,208,144,.4);
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(155,111,212,.28), transparent 70%),
    linear-gradient(160deg, rgba(155,111,212,.12), rgba(12,10,20,.7) 60%);
}
.tile--feature h3{ font-size: clamp(42px, 4.4vw, 74px); line-height: .95; }
.tile--feature h3 em{ font-style: normal; color: var(--accent); text-shadow: 0 0 40px rgba(155,111,212,.45); }
.tile--feature p{ max-width: 34em; font-size: .82rem; line-height: 1.9; }
.tile:last-child{ grid-column: 3 / 5; }

/* ══════════════════════════════════════════════════════════════
   PAGE CONTACT
   ══════════════════════════════════════════════════════════════ */
.ct{ min-height: 100vh; padding-top: calc(var(--bar) + clamp(50px, 8vh, 90px)); overflow: hidden; }
/* Fond : les passages vidéo de l'accueil, assombris pour garder le formulaire lisible,
   et les constellations qui se relient autour de la souris */
.ct-media{ z-index: 0; }
.ct-shade{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(9,7,15,.35), rgba(9,7,15,.7) 100%),
    linear-gradient(180deg, rgba(9,7,15,.55) 0%, rgba(9,7,15,.4) 30%, rgba(9,7,15,.72) 80%, #09070f 100%);
}
.ct-stars{ position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.ct-inner{ position: relative; z-index: 3; max-width: 820px; margin: 0 auto; }

.ct-head{ text-align: center; }
.ct-title{
  font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 5vw, 80px);
  line-height: 1.02; letter-spacing: .01em; color: var(--white);
  text-shadow: 0 0 30px rgba(9,7,15,.8);
}
.ct-title em{ font-style: normal; color: transparent; -webkit-text-stroke: 1.4px #c4a5ef; text-shadow: none; filter: drop-shadow(0 0 22px rgba(155,111,212,.45)); }
.ct-sub{ margin: 1.6rem auto 0; max-width: 640px; font-size: clamp(1rem, 1.2vw, 1.2rem); line-height: 1.7; color: var(--light); text-wrap: balance; }

/* Le formulaire : un panneau de verre ; les champs, plus opaques, laissent
   deviner les étoiles filantes (floutées) sans gêner la lecture */
.ct-form{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-top: clamp(40px, 6vh, 64px); padding: clamp(22px, 3vw, 38px);
  border: 1px solid rgba(155,111,212,.3);
  background: linear-gradient(160deg, rgba(155,111,212,.1) 0%, rgba(12,10,20,.45) 50%, rgba(155,111,212,.05) 100%);
  box-shadow: inset 0 1px 0 rgba(238,233,248,.08), 0 40px 90px -40px rgba(0,0,0,.9);
}
.ct-trap{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field{ position: relative; }
.field--full{ grid-column: 1 / -1; }
.field input, .field textarea{
  display: block; width: 100%; padding: 32px 18px 12px;
  font-family: var(--mono); font-size: .84rem; line-height: 1.6; color: var(--white);
  background: rgba(10,8,18,.74); border: 1px solid rgba(155,111,212,.3); border-radius: 2px; outline: none;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: border-color .35s, box-shadow .35s, background .35s;
}
.field textarea{ min-height: 200px; resize: vertical; }
.field label{
  position: absolute; left: 18px; top: 22px; pointer-events: none; transform-origin: 0 0;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); opacity: .85;
  transition: transform .35s var(--ease), color .35s;
}
.field input:focus + label, .field textarea:focus + label,
.field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label{
  transform: translateY(-12px) scale(.82); color: var(--gold); opacity: 1;
}
.field input:hover, .field textarea:hover{ border-color: rgba(155,111,212,.55); }
.field input:focus, .field textarea:focus{
  background: rgba(14,11,26,.9); border-color: rgba(216,208,144,.6);
  box-shadow: 0 0 0 1px rgba(216,208,144,.2), 0 0 32px rgba(155,111,212,.22);
}
.field.is-invalid input, .field.is-invalid textarea{ border-color: rgba(232,140,170,.7); }
.field label .opt{ letter-spacing: .1em; text-transform: none; opacity: .7; }
.field-error{ min-height: 0; margin-top: .45rem; font-size: .6rem; letter-spacing: .06em; color: #e8a0b8; }
.field-error:empty{ display: none; }

.ct-actions{ grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: .6rem; }
.ct-note{ font-size: .6rem; letter-spacing: .06em; color: var(--muted); }
.ct-note a{ color: var(--text); border-bottom: 1px solid var(--border); transition: color .3s, border-color .3s; }
.ct-note a:hover{ color: var(--gold); border-color: var(--gold); }
.ct-send[disabled]{ opacity: .6; pointer-events: none; }
.ct-status{ grid-column: 1 / -1; font-size: .72rem; line-height: 1.7; text-align: right; }
.ct-status:empty{ display: none; }
.ct-status.is-ok{ color: var(--gold); text-shadow: 0 0 14px rgba(216,208,144,.5); }
.ct-status.is-error{ color: #e8a0b8; }
.ct-status a{ color: var(--white); border-bottom: 1px solid var(--accent); }

/* Le contact direct, tout en bas */
.ct-direct{ margin-top: clamp(50px, 8vh, 80px); text-align: center; }
.ct-direct-label{ /* « Ou directement » : bien visible, en doré */
  display: inline-flex; align-items: center; gap: 1.1rem;
  font-size: .86rem; letter-spacing: .32em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 14px rgba(216,208,144,.35);
}
.ct-direct-label::before, .ct-direct-label::after{ content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ct-direct-label::after{ transform: scaleX(-1); }
.ct-channels{ display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 1rem clamp(24px, 4vw, 56px); margin-top: 1.6rem; }
.ct-channel{
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  font-family: var(--body); font-weight: 400; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; color: var(--white);
  transition: color .35s, text-shadow .35s;
}
.ct-channel-kind{ font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text); transition: color .35s; }
.ct-channel:hover{ color: var(--gold); text-shadow: 0 0 24px rgba(216,208,144,.5); }
.ct-channel:hover .ct-channel-kind{ color: var(--gold); }
.ct-or{ font-family: var(--body); font-style: italic; font-size: clamp(20px, 1.8vw, 26px); color: var(--accent); padding-bottom: .1em; }
.ct-links{ margin-top: 1.8rem; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--text); }

/* ══════════════════════════════════════════════════════════════
   PAGES LÉGALES (mentions légales, confidentialité)
   ══════════════════════════════════════════════════════════════ */
.legal{ max-width: 860px; margin: 0 auto; padding-top: calc(var(--bar) + clamp(50px, 8vh, 90px)); }
.legal-title{ font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 58px); line-height: 1.05; letter-spacing: .01em; color: var(--white); }
.legal-title em{ font-style: normal; color: var(--accent); }
.legal-date{ margin-top: 1rem; font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.legal h2{ margin-top: 3rem; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(14px, 1.3vw, 19px); letter-spacing: .04em; color: var(--white); }
.legal p, .legal li{ margin-top: .9rem; font-size: .8rem; line-height: 1.9; }
.legal ul{ padding-left: 1.2rem; list-style: none; }
.legal li::before{ content: '—'; margin: 0 .7rem 0 -1.2rem; color: var(--accent); }
.legal a{ color: var(--light); border-bottom: 1px solid rgba(155,111,212,.5); transition: color .3s, border-color .3s; }
.legal a:hover{ color: var(--gold); border-color: var(--gold); }
.legal strong{ font-weight: 400; color: var(--white); }
.todo{ padding: 0 .3em; color: #f0c98a; background: rgba(240,201,138,.1); border: 1px dashed rgba(240,201,138,.5); }

/* ══════════════════════════════════════════════════════════════
   ADAPTATIONS (base — le passage dédié au mobile viendra ensuite)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  :root{ --bar: 60px; }
  .nav-burger{ display: flex; }
  .lang-switch{ margin-left: auto; margin-right: 1.2rem; padding-left: 0; border-left: 0; }
  .nav-links{
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
    background: rgba(9, 7, 15, .97);
    opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
  }
  .menu-open .nav-links{ opacity: 1; pointer-events: auto; }
  .nav-links a{ font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; }
  .hero-hud{ grid-template-columns: 1fr auto; }
  .reel-progress, .coords{ display: none; }
  .holos{ flex-direction: column; align-items: center; gap: 4.5rem; perspective: none; }
  .holo--left, .holo--mid, .holo--right{ transform: none; margin: 0; width: 100%; max-width: 420px; }
  .galaxy-ui{ grid-template-columns: auto 1fr auto; gap: 12px; margin-top: 0; }
  .g-arrow{ width: 46px; height: 46px; }
  .pnav{ display: none; }
  .skymap{ flex-wrap: wrap; }
  .skymap::before{ display: none; }
  .project-head{ grid-template-columns: 1fr; }
  .project-cstl{ display: none; }
  .project-text, .testimony, .np-stage{ grid-template-columns: 1fr; }
  .np-gem{ position: static; }
  .ap-hero{ grid-template-columns: 1fr; min-height: 0; }
  .idcard{ margin: 0 auto; }
  .idcard-base{ left: 50%; right: auto; transform: translateX(-50%); }
  .idcard-main{ grid-template-columns: 200px 1fr; gap: 20px; }
  .bento{ grid-template-columns: 1fr 1fr; }
  .tile--feature{ grid-column: 1 / 3; grid-row: auto; min-height: 340px; }
  .tile:last-child{ grid-column: 1 / 3; }
  .ct-form{ grid-template-columns: 1fr; }
  .ct-actions{ flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .ct-send{ justify-content: center; }
  .ct-status{ text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   TÉLÉPHONE (jusqu'à 600px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 600px){
  .section{ padding-top: clamp(72px, 11vh, 96px); padding-bottom: clamp(72px, 11vh, 96px); }
  .btn{ padding: 1.1rem 2.2rem; font-size: .72rem; letter-spacing: .12em; }
  .btn--xl{ padding: 1.25rem 2.3rem; font-size: .74rem; }

  /* Accueil — en-tête */
  .hero-content{ right: var(--gutter); bottom: clamp(80px, 13vh, 120px); }
  .hero-title{ font-size: clamp(24px, 8vw, 46px); }
  .hero-sub{ margin: 1rem 0 1.9rem; font-size: 18px; }
  .hero-actions{ gap: .7rem; }
  /* Le regard */
  .manifesto-sub{ font-size: .8rem; letter-spacing: .08em; text-align: center; }
  .manifesto-sub::before, .manifesto-sub::after{ display: none; }
  .holos{ gap: 3.6rem; }
  /* Les portails « Découvrir » / « Plonger » */
  .dive{ margin-top: 70px; }
  .dive-frame{ height: 128px; }
  .dive-title{ font-size: 15px; }
  /* La galaxie */
  .galaxy{ padding-bottom: 90px; }
  .galaxy-stage{ height: clamp(400px, 60vh, 540px); }
  .galaxy-ui{ margin-top: -20px; }
  .g-title{ font-size: 20px; }
  .galaxy-intro{ font-size: .95rem; }
  /* Fin de page */
  .cta{ min-height: 0; padding-top: 150px; padding-bottom: 64px; }
  .cta-inner{ grid-template-rows: auto auto; } /* téléphone : le bouton juste sous les anneaux */
  .cta-top{ grid-row: 1; }
  .cta-title{ font-size: clamp(24px, 7.4vw, 36px); }
  .cta-bottom{ grid-row: 2; padding-top: 108px; }
  .cta-alt{ font-size: .8rem; line-height: 2; letter-spacing: .04em; }
  /* Ils m'ont fait confiance : les tranches s'empilent, on les ouvre au toucher */
  .slices{ flex-direction: column; height: auto; }
  .slice{ flex: none; height: 62px; transition: height .6s var(--ease), filter .6s var(--ease); }
  .slice.open{ height: 300px; }
  .slice-bio{ font-size: .82rem; }
  .slice.slice--logo::before{ animation: logo-tour-m 45s linear infinite; }
  .slice-v{ writing-mode: horizontal-tb; transform: translateY(50%); left: 18px; bottom: 50%; font-size: .66rem; }
  .slice-h{ left: 18px; right: 18px; bottom: 16px; }
  /* Projets — la carte du ciel sur 3 colonnes */
  .p-hero{ padding-top: calc(var(--bar) + 44px); }
  .p-title{ font-size: clamp(26px, 8vw, 40px); }
  .skymap{ --orb: 84px; justify-content: center; gap: 26px 6px; margin-top: 44px; }
  .skymap a{ width: 31%; gap: .4rem; }
  .skymap-orb{ margin-bottom: .3rem; }
  .skymap-name{ font-size: .6rem; }
  /* Projets — NovaPulse : le diamant garde ses numéros, les noms passent en boutons dessous */
  .np-stage{ margin-top: 50px; gap: 34px; }
  .np-gem svg{ max-width: 300px; }
  .gem-label, .gem-pill{ display: none; }
  .gem-num{ font-size: 26px; }
  .np-gem-hint{ display: none; }
  .np-tabs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
  .np-shoots{ min-height: 0; }
  .duo{ grid-template-columns: 1fr; gap: 1.4rem; }
  .np-shoot-title{ font-size: 22px; }
  .np-universe{ margin-bottom: 1.2rem; }
  .testimony-title{ font-size: 17px; }
  .project{ padding-top: 60px; }
  .project-title{ font-size: clamp(26px, 9vw, 38px); }
  .p-end-title{ font-size: clamp(19px, 6vw, 30px); }
  /* Contact */
  .ct{ padding-top: calc(var(--bar) + 40px); }
  /* Les vidéos sont en paysage : sur téléphone, au lieu d'un gros plan étiré sur toute la page,
     le fond reste fixé à l'écran derrière le formulaire et la vidéo y est montrée EN ENTIER,
     sur le ciel étoilé (pas de gros plan, pas de mouvement en plus) */
  .ct{ overflow: clip; }
  .ct-media{
    position: sticky; inset: auto; top: 0; display: block;
    width: 100vw; height: 100vh;
    margin: calc(-1 * (var(--bar) + 40px)) 0 calc(var(--bar) + 40px - 100vh) calc(50% - 50vw); /* ne prend aucune place dans la page */
    overflow: hidden;
  }
  .ct-media .reel-clip{
    top: calc(50% - 28.125vw); bottom: auto; height: 56.25vw; transform: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .ct-title{ font-size: clamp(26px, 8.4vw, 40px); }
  .ct-form{ padding: 18px 16px; gap: 12px; }
  .field input, .field textarea{ font-size: 16px; background: rgba(10,8,18,.58); } /* 16px minimum : sinon l'iPhone zoome quand on touche un champ */
  .field textarea{ min-height: 160px; }
  .ct-direct-label{ font-size: .7rem; letter-spacing: .26em; }
  .ct-channels{ flex-direction: column; align-items: center; gap: .9rem; }
  .ct-channel{ font-size: 21px; }
  .ct-or{ font-size: 18px; padding: 0; }
  .ct-links{ font-size: .6rem; letter-spacing: .16em; line-height: 1.8; }
  /* À propos */
  .ap-hero > *{ min-width: 0; }
  .ap-hero{ padding-top: calc(var(--bar) + 36px); gap: 50px; }
  .ap-name{ font-size: clamp(26px, 9vw, 38px); }
  .ap-lead{ margin-top: 1.6rem; font-size: 18px; }
  .idcard{ width: 100%; padding: 18px 16px 16px; }
  .idcard-main{ grid-template-columns: 112px 1fr; gap: 14px; }
  .idcard-data div{ grid-template-columns: 1fr; gap: .15rem; padding: .45rem 0; }
  .idcard-data dd{ font-size: .74rem; }
  .idcard-spec{ font-size: .68rem; }
  .idcard-top{ font-size: .5rem; }
  .idcard-bottom{ font-size: .46rem; }
  .ap-h2{ font-size: clamp(24px, 7.6vw, 36px); }
  .poster-row{ grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
  .poster-note{ padding-left: 14px; }
  .bento{ grid-template-columns: 1fr; gap: 10px; }
  .tile--feature, .tile:last-child{ grid-column: auto; }
  .tile--feature{ min-height: 0; padding-top: 70px; }
  .tile--feature h3{ font-size: 20px; }
  .tile{ min-height: 0; padding: 18px 20px; }
  .bento{ grid-auto-rows: auto; }
  .p-end-title{ font-size: clamp(19px, 6vw, 30px); }
  .p-end-actions{ flex-direction: column; align-items: center; }
  /* Pied de page */
  .footer-bottom{ flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
  .footer-legal{ justify-content: center; }
}

/* Écrans tactiles : pas de survol, donc les portails montrent leur cadre d'emblée */
@media (hover: none){
  .dive .dive-frame{
    border-color: rgba(155,111,212,.4);
    background: linear-gradient(160deg, rgba(155,111,212,.12) 0%, rgba(22,15,42,.4) 50%, rgba(155,111,212,.06) 100%);
  }
  .dive .dive-frame::after{ opacity: .8; }
}

/* Animations réduites (réglage système) */
@media (prefers-reduced-motion: reduce){
  .neb, .slice::before{ animation: none; }
  .idcard-glitch{ display: none; }
  .reel-clip, .g-card > video{ transition: none; }
  .signal-dot, .scroll-cue::after{ animation: none; }
}

/* ─────────────── À propos, sur ordinateur : la fiche holographique en grand ───────────────
   Le texte de gauche prend un peu moins de place, la fiche s'élargit et tout son contenu
   grandit en proportion (le téléphone et la tablette ne changent pas). */
@media (min-width: 901px){
  .ap-hero{ grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); max-width: 1560px; gap: clamp(30px, 3.5vw, 64px); }
  .ap-name{ font-size: clamp(30px, 3.6vw, 60px); }
  .ap-lead{ font-size: clamp(17px, 1.3vw, 21px); }
  .idcard{ width: min(980px, 100%); padding: clamp(26px, 2.4vw, 38px) clamp(28px, 2.8vw, 46px) clamp(24px, 2.2vw, 34px); }
  .idcard-top{ font-size: clamp(.62rem, .7vw, .76rem); }
  .idcard-brand svg{ width: 40px; }
  .idcard-main{ grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(26px, 2.6vw, 44px); margin-top: 1.5rem; }
  .idcard-data div{ grid-template-columns: clamp(86px, 7.5vw, 118px) 1fr; padding: clamp(.8rem, 1vw, 1.05rem) 0; }
  .idcard-data dt{ font-size: clamp(.58rem, .62vw, .7rem); }
  .idcard-data dd{ font-size: clamp(.9rem, 1.05vw, 1.22rem); }
  .idcard-spec{ margin-top: 1.4rem; padding-top: 1.1rem; font-size: clamp(.8rem, .9vw, 1rem); }
  .idcard-spec span{ font-size: clamp(.58rem, .62vw, .7rem); }
  .idcard-bottom{ font-size: clamp(.5rem, .58vw, .64rem); }
  .idcard-bars{ height: 38px; }
}