/* ------------------------------------------------------------------
   Portfolio — styles globaux
   Polices : Boska (titres / pilules) + Inter 500 (texte)
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Boska';
  src: url('fonts/Boska-Variable.ttf') format('truetype-variations'),
       url('fonts/Boska-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Boska';
  src: url('fonts/Boska-VariableItalic.ttf') format('truetype-variations'),
       url('fonts/Boska-VariableItalic.ttf') format('truetype');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-serif: 'Boska', 'Times New Roman', serif;
  --font-grotesk: 'Inter', system-ui, -apple-system, sans-serif;
  --pill-bg: rgba(237, 237, 237, 0.5);
  --pill-bg-hover: rgba(216, 216, 216, 0.5);
  --panel-bg: rgba(230, 230, 230, 0.5);
  --ink: #000;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
}

body {
  font-family: var(--font-grotesk);
  font-weight: 500;
  overflow: hidden;              /* le scroll est géré par le canvas WebGL */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.preloader__loop { width: 90px; height: 90px; display: block; }
.preloader__count {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
  font-family: var(--font-serif); font-size: 16px; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 8px; left: 0; z-index: 9999;
  width: 100%;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
  visibility: hidden;                  /* rendue visible par le JS une fois mesurée */
  font-size: 12px;
}
.nav__inner { display: flex; align-items: center; gap: 14px; }
.nav__ghost {
  font-family: var(--font-grotesk); font-size: 14px; line-height: 1.25;
  visibility: hidden; cursor: default; white-space: nowrap;
}
.nav__items { display: flex; align-items: center; gap: 4px; }

.pill {
  position: relative;
  display: flex; align-items: flex-end; align-self: stretch;
  padding: 6px 12px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  background-color: var(--pill-bg);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
}
.pill__spacer { display: block; height: 9px; margin-right: 3px; width: 0; }
.pill__label {
  position: absolute; top: 6px; left: 12px;
  white-space: nowrap;
  font-family: var(--font-serif); font-size: 15px; line-height: 110%;
}
.pill__num {
  display: block;
  font-family: var(--font-grotesk);
  font-size: 11px; line-height: 140%;
  transform: translateY(2px);
  vertical-align: baseline; top: 0;
}

.brand {
  position: fixed; top: 0; left: 0; z-index: 9999;
  font-family: var(--font-grotesk); font-size: 14px; line-height: 1.25;
  color: #fff; mix-blend-mode: exclusion;
  cursor: pointer; pointer-events: auto;
  will-change: transform; visibility: hidden;
  white-space: nowrap;
}

/* ---------- Bouton son ---------- */
.sound {
  position: fixed; top: 8px; right: 8px; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 8px; border-radius: 4px;
  background-color: var(--pill-bg);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  color: var(--ink); cursor: pointer;
}
.sound__box { position: relative; width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; }
.sound__dot {
  position: relative; z-index: 1;
  width: 4px; height: 4px; border-radius: 50%;
  background-color: currentColor;
}
.sound__ring {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  pointer-events: none;
}
/* son activé : seule la bulle est visible, elle apparaît, grossit et s'estompe au fur et à mesure, en boucle */
.sound[aria-pressed="true"] .sound__dot { opacity: 0; }
.sound[aria-pressed="true"] .sound__ring { animation: sound-pulse 4s ease-out infinite; }
@keyframes sound-pulse {
  0%   { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(3.5); opacity: 0; }
}
@media (max-width: 1024px) { .sound { display: none; } }

/* ---------- Panneau Project Info ---------- */
.info { position: fixed; top: 8px; left: 8px; z-index: 50; }
.info[hidden] { display: none; }
.info__bg {
  position: absolute; top: 0; left: 0;
  border-radius: 4px;
  background-color: var(--panel-bg);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  will-change: width, height;
}
.info__btn {
  position: relative; display: block; width: fit-content;
  padding: 6px 8px; cursor: pointer;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.2;
  text-transform: capitalize; color: var(--ink);
  white-space: nowrap;
}
.info__body {
  position: absolute; left: 0; top: 24px;
  width: 470px; height: 0; overflow: hidden;
  pointer-events: none;
}
.info__content { display: flex; flex-direction: column; padding: 0 8px 32px; }
.info__head { display: flex; flex-direction: column; margin-top: 40px; }
.info__content .info__desc { margin: 24px 0 0; }
.info__list { display: flex; flex-direction: column; margin-top: 40px; }
.info__list:first-of-type { margin-top: 80px; }
.info p { margin: 0; color: var(--ink); line-height: 1.2; }
.t-grotesk-14 { font-family: var(--font-grotesk); font-size: 14px; }
.t-grotesk-12 { font-family: var(--font-grotesk); font-size: 12px; }
.t-serif-15 { font-family: var(--font-serif); font-size: 15px; }
.t-serif-14 { font-family: var(--font-serif); font-size: 14px; }
.info__head .t-serif-15 { margin-top: 8px; }
.info__list .t-serif-14 { margin-top: 2px; }
.info__list .t-serif-14:first-of-type { margin-top: 10px; }
.info__handle { display: none; }

/* version mobile : feuille en bas de l'écran */
.info--mobile {
  top: auto; bottom: 8px; left: 8px; right: 8px;
  display: flex; align-items: flex-end; justify-content: center;
}
.info--mobile .info__bg { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); }
.info--mobile .info__body { top: auto; bottom: 0; }
.info--mobile .info__content { position: absolute; bottom: 0; left: 0; right: 0; }
.info--mobile .info__handle {
  display: block; align-self: center; cursor: pointer;
  padding: 12px 20px; margin: -12px -20px;
}
.info--mobile .info__handle span {
  display: block; width: 47px; height: 2px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
}

/* texte découpé (mots / lignes) pour les animations masquées */
.split { display: inline-block; overflow: hidden; vertical-align: top; }
.split--line { display: block; }
.split__in { display: inline-block; will-change: transform; }
.split--line .split__in { display: block; }

/* ---------- Slider de page / transitions ---------- */
.slider { position: relative; width: 100%; overflow: hidden; }
.slider__track { display: flex; flex-direction: row; width: 100%; will-change: transform; }
.page { flex: 0 0 100vw; width: 100vw; height: 100%; transform: translateZ(0); }
.page--ghost { background: #fff; }

/* ---------- Page projet (WebGL) ---------- */
.gl {
  position: relative; width: 100%; height: 100dvh;
  overflow: hidden; touch-action: none; overscroll-behavior: none;
  background: #fff;
}
.gl canvas { display: block; }

/* ---------- Page Projects (grille WebGL) ---------- */
.grid {
  position: relative; width: 100%; height: 100dvh;
  overflow: hidden; touch-action: none; overscroll-behavior: none;
  background: #fff;
}
.grid canvas { display: block; }
.grid__cursor {
  position: absolute; top: 32px; left: 32px; z-index: 50;
  pointer-events: none; will-change: transform;
  font-family: var(--font-grotesk); font-size: 13px; line-height: 120%;
  color: #fff; mix-blend-mode: difference; opacity: 0; white-space: nowrap;
}

/* ---------- Page d'accueil : Creative Space ---------- */
.cs {
  position: relative; width: 100%;
  height: var(--cs-app-h, 100dvh);
  background: #fff; overflow: hidden;
  cursor: default;
}
.cs canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.cs__bottom {
  position: absolute; left: 0; right: 0; bottom: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; z-index: 5;
  pointer-events: none;             /* les clics dans le vide atteignent la scène */
}
@media (max-width: 640px) { .cs__bottom { bottom: calc(2rem + env(safe-area-inset-bottom)); } }
.cs__captions { position: relative; width: 100%; }
.cs__caption {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; width: 100%;
}
.cs__caption > * { pointer-events: auto; }
.cs__para { max-width: 470px; width: 100%; }
@media (max-width: 640px) { .cs__para { max-width: min(390px, calc(100% - 32px)); } }
.cs__para-inner { margin-bottom: 60px; }
.cs__line {
  margin: 0; font-family: var(--font-serif); font-size: 14px; line-height: 1.3;
  text-align: center; white-space: nowrap;
}
.cs__meta { display: flex; gap: 8px; align-items: flex-end; white-space: nowrap; }
@media (min-width: 1025px) { .cs__meta { transform: translateY(8px); } }
.cs__mask { display: inline-block; overflow: hidden; vertical-align: top; }
.cs__mask--block { display: block; }
.cs__title { margin: 0; font-family: var(--font-grotesk); font-size: 12px; line-height: 140%; font-weight: 500; }
.cs__sub { margin: 0; font-family: var(--font-serif); font-size: 13px; line-height: 1.4; }
.cs__mobile-btn {
  font-family: var(--font-grotesk); font-size: 12px; line-height: 1;
  text-align: center; width: 100%; cursor: pointer; opacity: 0;
  pointer-events: auto;
}
@media (min-width: 1025px) { .cs__mobile-btn { display: none; } }
.cs__cursor {
  position: absolute; top: 32px; left: 32px; z-index: 2150;
  pointer-events: none; will-change: transform;
  font-family: var(--font-grotesk); font-size: 13px; line-height: 120%;
  color: #fff; mix-blend-mode: difference; opacity: 0; white-space: nowrap;
}
.cs__side {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 9%; pointer-events: none;
}
@media (max-width: 1025px) { .cs__side { display: none; } }
.cs__side-group { display: flex; gap: 0.3em; font-size: 14px; line-height: 1.4; }
.cs__side-group--grotesk { font-family: var(--font-grotesk); }
.cs__side-group--serif { font-family: var(--font-serif); }
.cs__word { display: inline-block; opacity: 0; }
.cs__counter {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  overflow: hidden; pointer-events: none;
}
.cs__counter p {
  margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1;
  will-change: transform; opacity: 0;   /* position et opacité pilotées par gsap */
  font-variant-numeric: tabular-nums;
}

/* ---------- Page About ---------- */
.hero {
  position: relative; width: 100%; height: 100dvh;
  overflow: hidden; touch-action: none; overscroll-behavior: none;
  background: #fff;
}
.hero__copy {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
  padding: 0 24px;
}
.hero__tagline {
  margin: 0; max-width: 920px;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink);
}
.hero__current {
  margin: 64px 0 0;
  font-family: var(--font-grotesk); font-size: 14px; line-height: 1.2;
}