/* ── Fond et lumière ─────────────────────────────────────────────────────
   Le cyclo est peint ici, DERRIÈRE le canvas WebGL (qui est transparent).
   C'est ce qui permet de glisser de la typographie entre le fond et
   l'éponge : le mot « SPONGE » passe littéralement derrière l'objet 3D.
   ───────────────────────────────────────────────────────────────────────── */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42vmax 42vmax at calc(50% + var(--gx, 0px)) calc(46% + var(--gy, 0px)),
      rgba(255, 190, 120, calc(0.10 * var(--glow, 1))) 0%,
      rgba(255, 150, 60, calc(0.035 * var(--glow, 1))) 38%,
      transparent 72%
    ),
    radial-gradient(120vmax 90vmax at 50% 120%, rgba(30, 40, 52, 0.4) 0%, transparent 60%),
    var(--ink);
}

/* Voile de lisibilité. Dans le hero il est à zéro — l'éponge est le sujet.
   Dès qu'il y a du texte à lire, il monte : l'objet reste présent, mais il
   passe derrière le propos. Ses hautes lumières et son bloom traversent
   quand même, donc il ne disparaît jamais vraiment. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  background: var(--ink);
  opacity: var(--scrim, 0);
  transition: opacity 420ms var(--ease-out);
}

/* ── Préchargement ───────────────────────────────────────────────────────── */

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  background: var(--ink);
  transition: opacity 800ms var(--ease-out), visibility 800ms;
}
.loader[data-done='true'] {
  opacity: 0;
  visibility: hidden;
}

.loader__bar {
  grid-row: 2;
  justify-self: center;
  width: min(70vw, 620px);
}
.loader__count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--bone-faint);
  margin-bottom: 0.9rem;
}
.loader__num { color: var(--bone); font-variant-numeric: tabular-nums; }
.loader__track {
  height: 1px;
  background: var(--bone-ghost);
  overflow: hidden;
}
.loader__fill {
  height: 100%;
  width: 0%;
  background: var(--amber);
  transition: width 260ms linear;
}
.loader__word {
  grid-row: 3;
  align-self: start;
  padding-top: 1.6rem;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.34em;
  color: var(--bone-faint);
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 0.5rem + 1.2vw, 1.6rem) var(--gutter);
  mix-blend-mode: difference; /* le logo reste lisible sur clair comme sur sombre */
  transition: transform 520ms var(--ease-out);
}
.nav[data-hidden='true'] { transform: translateY(-110%); }

.nav__brand {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
}
.nav__dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--rec);
  animation: rec-blink 2.4s var(--ease-in-out) infinite;
}
@keyframes rec-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0.15; }
}

.nav__links {
  display: flex;
  gap: clamp(0.9rem, 0.3rem + 1.5vw, 2.2rem);
}
.nav__link {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  padding-block: 0.3rem;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current='true']::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__aside {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  color: var(--bone);
}
.nav__tc { font-variant-numeric: tabular-nums; opacity: 0.7; }

.sound {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--bone);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.sound__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}
.sound__bars i {
  width: 2px;
  height: 3px;
  background: currentColor;
  transition: height 200ms var(--ease-out);
}
.sound[aria-pressed='true'] .sound__bars i {
  animation: eq 900ms ease-in-out infinite alternate;
}
.sound[aria-pressed='true'] .sound__bars i:nth-child(2) { animation-delay: 120ms; }
.sound[aria-pressed='true'] .sound__bars i:nth-child(3) { animation-delay: 260ms; }
@keyframes eq {
  from { height: 3px; }
  to { height: 11px; }
}

/* ── Menu mobile ─────────────────────────────────────────────────────────── */

.burger { display: none; width: 26px; height: 16px; place-items: center; }
.burger__lines { display: grid; gap: 5px; width: 22px; }
.burger__lines i {
  display: block;
  height: 1.5px;
  background: var(--bone);
  transition: transform 420ms var(--ease-out), opacity 260ms var(--ease-out);
}
.burger[aria-expanded='true'] .burger__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded='true'] .burger__lines i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: var(--gutter);
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-out), visibility 420ms;
}
.menu[data-open='true'] { opacity: 1; visibility: visible; }
.menu__list { display: grid; gap: 0.2rem; }
.menu__link {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(2.4rem, 13vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--bone);
  transform: translateY(28px);
  opacity: 0;
  transition: transform 620ms var(--ease-out), opacity 620ms var(--ease-out), color 260ms;
  transition-delay: var(--i, 0ms);
}
.menu[data-open='true'] .menu__link { transform: none; opacity: 1; }
.menu__link:active { color: var(--amber); }
.menu__foot {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-faint);
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .nav__tc { display: none; }
}
@media (min-width: 861px) {
  .menu { display: none; }
}

/* ── Curseur personnalisé ────────────────────────────────────────────────── */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid var(--bone-faint);
  border-radius: 99px;
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: width 380ms var(--ease-out), height 380ms var(--ease-out),
    background-color 380ms var(--ease-out), border-color 380ms var(--ease-out),
    opacity 300ms;
  will-change: transform;
  opacity: 0;
}
.cursor[data-active='true'] { opacity: 1; }
.cursor__label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  white-space: nowrap;
}
.cursor[data-mode='media'] {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  background: var(--amber);
  border-color: transparent;
}
.cursor[data-mode='media'] .cursor__label { opacity: 1; }
.cursor[data-mode='link'] {
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--bone);
  border-color: transparent;
}
html[data-pressing='true'] .cursor {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-color: var(--amber);
}
/* Pas de curseur custom au doigt, ni si l'utilisateur limite les animations. */
@media (pointer: coarse) {
  .cursor { display: none; }
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 420ms var(--ease-out), border-color 420ms var(--ease-out);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--amber);
  transform: translateY(101%);
  transition: transform 520ms var(--ease-out);
}
.btn:hover {
  color: var(--ink);
  border-color: var(--amber);
}
.btn:hover::before { transform: translateY(0); }
.btn__arrow { transition: transform 420ms var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--solid {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--bone);
}
.btn--solid::before { background: var(--amber); }
.btn--solid:hover { color: var(--ink); }

/* ── Ardoise : média manquant ────────────────────────────────────────────
   Volontairement identifiable au premier coup d'œil. Un placeholder qui
   ressemble à du contenu fini est un piège : six mois plus tard, personne
   ne sait plus lesquels étaient vrais.
   ───────────────────────────────────────────────────────────────────────── */

.slate {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(233, 229, 220, 0.028) 0 10px,
      transparent 10px 20px
    ),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink-1) 60%, #0a0c0f 100%);
  overflow: hidden;
}
.slate::before,
.slate::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--amber);
  opacity: 0.55;
}
.slate::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.slate::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

.slate__ref {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--amber);
}
.slate__note {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  color: var(--bone-faint);
}
/* Bande de mire en bas — le clin d'œil « barres de test ». */
.slate__bars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  display: flex;
  opacity: 0.5;
}
.slate__bars i { flex: 1; }
.slate__bars i:nth-child(1) { background: #3a4048; }
.slate__bars i:nth-child(2) { background: #6b7280; }
.slate__bars i:nth-child(3) { background: #9aa1a9; }
.slate__bars i:nth-child(4) { background: var(--amber); }
.slate__bars i:nth-child(5) { background: var(--abrasive); }
.slate__bars i:nth-child(6) { background: var(--rec); }
.slate__bars i:nth-child(7) { background: #14171b; }

/* ── Bandeau défilant ────────────────────────────────────────────────────── */

.marquee {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(0.7rem, 0.4rem + 0.8vw, 1.1rem);
  user-select: none;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 0.8rem + 2vw, 3rem);
  padding-inline: clamp(0.7rem, 0.4rem + 1vw, 1.5rem);
  font-family: var(--display);
  font-size: clamp(1.6rem, 0.9rem + 3vw, 3.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.marquee__item span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px var(--bone-faint);
}
.marquee__sep {
  width: 0.44em;
  height: 0.44em;
  border-radius: 99px;
  background: var(--amber);
  flex: none;
}

/* ── Titre de section ────────────────────────────────────────────────────── */

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: clamp(2rem, 1rem + 3vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.sec-head__index {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--amber);
}
.sec-head__label {
  font-family: var(--mono);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-faint);
}
.sec-head__spacer { flex: 1; }