:root {
  --cyan: #00d8ff;
  --blue: #006dff;
  --violet: #9d42ff;
  --magenta: #ff3f86;
  --amber: #ffb74a;
  --ember: #ff4a1f;
  --ink: #030612;
  --ink-soft: rgba(7, 12, 28, 0.72);
  --text: #f7fbff;
  --muted: #b9c8dc;
  --line: rgba(255, 255, 255, 0.16);
  --nav-height: 76px;
  /* Une seule grille horizontale pour le dock et toutes les interfaces. */
  --interface-shell-gutter: clamp(1rem, 5vw, 6.5rem);
  --interface-shell-width: calc(100% - var(--interface-shell-gutter) - var(--interface-shell-gutter));
  --page-interface-gutter: var(--interface-shell-gutter);
  --page-interface-width: var(--interface-shell-width);
  --home-interface-gutter: var(--interface-shell-gutter);
  --home-interface-width: var(--interface-shell-width);
  --shock-x: 50vw;
  --shock-y: 50vh;
  --music-energy: 0;
  --music-bass: 0;
  --music-mid: 0;
  --music-treble: 0;
  --music-beat: 0;
  --music-button-scale: 1;
  --music-card-scale: 1;
  --music-orb-scale: 1;
  --music-aura-scale: 1;
  --music-brightness: 1;
  --music-saturation: 1;
  --music-glow-size: 0rem;
  --music-shake-x: 0px;
  --music-shake-y: 0px;
  --music-orbit-fast: 12s;
  --music-orbit-slow: 17s;
  --music-orbit-wide: 22s;
  --music-bar-1: 1;
  --music-bar-2: 1;
  --music-bar-3: 1;
  --music-bar-4: 1;
  --music-wave: 0;
  --anim-hover-time: 400ms;
  --anim-hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --liquid-glass-panel-radius: clamp(2.75rem, 4.6vw, 5.25rem);
  --liquid-glass-inner-radius: clamp(1.8rem, 3vw, 3.5rem);
  --liquid-glass-item-radius: clamp(1.15rem, 1.8vw, 1.75rem);
  --liquid-glass-field-radius: clamp(1.35rem, 2.2vw, 2rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

/* Hide page scrollbars without disabling wheel, keyboard or touch scrolling. */
html,
body {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ink);
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -4;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  transform: scale(1.08);
  will-change: transform;
  animation: backgroundDrift 24s ease-in-out infinite alternate;
}

body.home-page::before {
  background-image: url(images/olilap-background-wide.23bd04de.webp);
}

/* ─── Fonds d'écran de page ────────────────────────────────────────────────
   Un visuel unique par page, jamais réutilisé ailleurs :
     tutoriels → wallpaper-tutoriels (ondes bleu/violet)
     projets   → wallpaper-projets   (turquoise/or/violet)
     boutique  → wallpaper-boutique  (verre incandescent)
     contacts  → wallpaper-contacts  (ambre/violet, sol réfléchissant)
     CV        → wallpaper-cv        (or et marbre noir)
   Les halos restent visibles, sans voile sombre ni trame de grille. */

body.tutorials-page::before {
  background-image: url(images/wallpaper-tutoriels.b32a7585.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: tutorialBackgroundDrift 20s ease-in-out infinite alternate;
}

body::after {
  z-index: -3;
  background:
    radial-gradient(circle at 50% 36%, rgba(var(--scene-a, 32, 132, 255), 0.18), transparent 22rem),
    radial-gradient(circle at 56% 48%, rgba(var(--scene-b, 255, 155, 49), 0.14), transparent 28rem);
  mix-blend-mode: screen;
  opacity: 0.86;
  will-change: transform, opacity;
  animation: auraSweep 16s ease-in-out infinite alternate;
}

body.tutorials-page::after {
  background: none;
  opacity: 0;
  animation: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

img::selection {
  color: inherit;
  background-color: transparent;
}

video::selection {
  color: inherit;
  background-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

a::selection {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
}

button::selection {
  color: inherit;
  background-color: transparent;
}

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.shockwave-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(circle at var(--shock-x) var(--shock-y), rgba(255, 255, 255, 0.62) 0 0.16rem, rgba(var(--scene-a, 32, 132, 255), 0.26) 0.2rem 4.6rem, rgba(var(--scene-b, 255, 155, 49), 0.12) 4.7rem 9rem, transparent 18rem),
    conic-gradient(from 42deg at var(--shock-x) var(--shock-y), transparent 0 8%, rgba(255, 255, 255, 0.2) 10%, transparent 13% 36%, rgba(var(--scene-a, 32, 132, 255), 0.15) 39%, transparent 43% 100%);
  mix-blend-mode: screen;
  will-change: opacity;
}

.shockwave-field::before,
.shockwave-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform-origin: var(--shock-x) var(--shock-y);
  will-change: opacity, transform;
}

.shockwave-field::before {
  background:
    radial-gradient(circle at var(--shock-x) var(--shock-y), transparent 0 3.8rem, rgba(255, 255, 255, 0.34) 3.95rem 4.1rem, rgba(var(--scene-a, 32, 132, 255), 0.2) 4.15rem 4.45rem, transparent 4.85rem 9.4rem, rgba(var(--scene-b, 255, 155, 49), 0.12) 9.55rem 9.8rem, transparent 10.2rem),
    radial-gradient(circle at var(--shock-x) var(--shock-y), rgba(var(--scene-c, 47, 107, 231), 0.16), transparent 26rem);
}

.shockwave-field::after {
  background:
    linear-gradient(112deg, transparent 0 40%, rgba(255, 255, 255, 0.14) 44%, transparent 49%),
    radial-gradient(circle at var(--shock-x) var(--shock-y), rgba(255, 255, 255, 0.22), transparent 11rem);
  mix-blend-mode: screen;
}

.shockwave-ring {
  --ring-scale: 11;
  --ring-opacity: 0.76;
  position: fixed;
  left: var(--ring-x);
  top: var(--ring-y);
  width: 8rem;
  height: 8rem;
  z-index: 3;
  border: 0;
  border-radius: 50%;
  background:
    conic-gradient(from 12deg, transparent 0 10%, rgba(255, 255, 255, 0.95) 12%, rgba(var(--scene-a, 32, 132, 255), 0.86) 18%, transparent 24% 44%, rgba(var(--scene-b, 255, 155, 49), 0.78) 50%, transparent 57% 76%, rgba(var(--scene-c, 47, 107, 231), 0.72) 82%, transparent 88% 100%);
  mask: radial-gradient(circle, transparent 0 58%, #000 59.5% 62%, transparent 63.5%);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59.5% 62%, transparent 63.5%);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.08) rotate(0deg);
  filter: drop-shadow(0 0 0.75rem rgba(var(--scene-a, 32, 132, 255), 0.56));
  contain: layout paint style;
  will-change: transform, opacity;
  animation: shockRing 860ms cubic-bezier(0.12, 0.78, 0.18, 1) forwards;
}

.shockwave-ring--echo {
  --ring-scale: 8.5;
  --ring-opacity: 0.5;
  width: 10rem;
  height: 10rem;
  background:
    conic-gradient(from -28deg, transparent 0 18%, rgba(var(--scene-a, 32, 132, 255), 0.68) 23%, transparent 29% 48%, rgba(255, 255, 255, 0.7) 52%, transparent 58% 80%, rgba(var(--scene-b, 255, 155, 49), 0.55) 86%, transparent 92% 100%);
  animation-duration: 980ms;
}

.shockwave-spark {
  position: fixed;
  left: var(--spark-x);
  top: var(--spark-y);
  z-index: 4;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, var(--cyan) 44%, var(--amber));
  box-shadow:
    0 0 0.65rem rgba(var(--scene-a, 32, 132, 255), 0.72),
    0 0 1rem rgba(var(--scene-b, 255, 155, 49), 0.34);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(0) scale(0.7);
  will-change: transform, opacity;
  animation: shockSpark 620ms cubic-bezier(0.16, 0.9, 0.22, 1) forwards;
  animation-delay: var(--spark-delay);
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: var(--nav-height);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 7, 18, 0.58);
  backdrop-filter: blur(20px) saturate(1.45);
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.22);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

/* Logo du dock : aucune lueur bleue derrière le visage — seulement une ombre
   portée neutre qui le décolle du verre. L'animation, elle, est enrichie. */
.brand-logo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  filter: drop-shadow(0 0.28rem 0.5rem rgba(0, 0, 0, 0.55));
  animation: dockLogoOrbit 7.3s ease-in-out infinite;
}

.nav-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  background: linear-gradient(90deg, #effdff, var(--cyan) 38%, var(--amber) 76%, #fff2d7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.music-toggle {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  z-index: 4;
  width: 2.85rem;
  height: 2.85rem;
  padding: 0;
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  cursor: pointer;
  isolation: isolate;
  scale: var(--music-button-scale);
  transition: border-color 220ms ease, box-shadow 220ms ease, filter 220ms ease, scale 120ms ease, transform 220ms ease;
}




.music-toggle:hover,
.music-toggle:focus-visible {
  transform: translateY(-1px);
}

.music-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.84);
  outline-offset: 0.26rem;
}

.music-toggle-bars {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.18rem;
  width: 1.1rem;
  height: 1.16rem;
}

.music-toggle-bars span {
  width: 0.17rem;
  min-height: 0.32rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, var(--cyan) 46%, var(--amber));
  box-shadow: 0 0 0.55rem rgba(var(--scene-a, 32, 132, 255), 0.6);
  transform-origin: bottom center;
  transition: transform 120ms ease, opacity 180ms ease;
}

.music-toggle-bars span:nth-child(1) {
  height: 0.58rem;
  transform: scaleY(var(--music-bar-1));
}

.music-toggle-bars span:nth-child(2) {
  height: 0.95rem;
  transform: scaleY(var(--music-bar-2));
}

.music-toggle-bars span:nth-child(3) {
  height: 0.74rem;
  transform: scaleY(var(--music-bar-3));
}

.music-toggle-bars span:nth-child(4) {
  height: 1.12rem;
  transform: scaleY(var(--music-bar-4));
}


html.music-active .music-toggle::before,
html.music-starting .music-toggle::before {
  opacity: 0.88;
  transform: scale(1.08);
  animation: musicHaloSpin 2.8s linear infinite;
}

html.music-starting .music-toggle-bars span {
  animation: equalizerIdle 680ms ease-in-out infinite alternate;
}

html.music-starting .music-toggle-bars span:nth-child(2) {
  animation-delay: 90ms;
}

html.music-starting .music-toggle-bars span:nth-child(3) {
  animation-delay: 180ms;
}

html.music-starting .music-toggle-bars span:nth-child(4) {
  animation-delay: 270ms;
}

html.music-error .music-toggle {
  animation: musicErrorPulse 520ms ease-in-out 3;
}

body.music-dialog-open {
  overflow: hidden;
}

.music-permission-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--scene-a, 32, 132, 255), 0.18), transparent 23rem),
    radial-gradient(circle at 64% 56%, rgba(var(--scene-b, 255, 155, 49), 0.14), transparent 22rem),
    rgba(2, 5, 15, 0.78);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
}

.music-permission-dialog[hidden] {
  display: none;
}

.music-permission-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(1rem, 3vw, 2rem);
  width: min(52rem, 100%);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 36%, rgba(var(--scene-a, 32, 132, 255), 0.18), transparent 16rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(4, 9, 22, 0.86);
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.46),
    0 0 4rem rgba(var(--scene-a, 32, 132, 255), 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.music-permission-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.2rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(247, 251, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.music-permission-orb {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 18rem;
  border-radius: 50%;
  isolation: isolate;
}

.music-permission-orb::before,
.music-permission-orb::after,
.music-permission-orb span {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.music-permission-orb::before {
  inset: 7%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), transparent 16%),
    conic-gradient(from 40deg, rgba(var(--scene-a, 32, 132, 255), 0.95), rgba(var(--scene-c, 47, 107, 231), 0.34), rgba(var(--scene-b, 255, 155, 49), 0.9), rgba(255, 63, 134, 0.42), rgba(var(--scene-a, 32, 132, 255), 0.95));
  filter: blur(2rem);
  animation: logoAura 1.8s ease-in-out infinite alternate, auraRotate 7s linear infinite;
}

.music-permission-orb::after {
  inset: 25%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(3, 6, 18, 0.68);
  box-shadow:
    inset 0 0 3rem rgba(var(--scene-a, 32, 132, 255), 0.18),
    0 0 3rem rgba(var(--scene-b, 255, 155, 49), 0.14);
}

.music-permission-orb span {
  inset: 13%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transform: rotate(-18deg) scaleX(0.7);
  animation: orbitSpin 4.2s linear infinite;
}

.music-permission-orb span:nth-child(2) {
  inset: 23%;
  border-color: rgba(var(--scene-b, 255, 155, 49), 0.78);
  animation-duration: 5.8s;
  animation-direction: reverse;
}

.music-permission-orb span:nth-child(3) {
  inset: 34%;
  border-color: rgba(255, 63, 134, 0.48);
  animation-duration: 7.4s;
}

.music-permission-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 0.9rem;
  padding-right: 1.4rem;
}

.music-permission-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.music-permission-copy p,
.music-permission-copy li {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.68;
}

.music-permission-copy p,
.music-permission-copy ul {
  margin: 0;
}

.music-permission-copy ul {
  display: grid;
  gap: 0.45rem;
  padding-left: 1.1rem;
}

.music-permission-actions {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.8rem;
}

.no-cookie-popup {
  --popup-x: 50%;
  --popup-y: 46%;
  --popup-tilt-x: 0deg;
  --popup-tilt-y: 0deg;
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    linear-gradient(115deg, rgba(var(--scene-a, 32, 132, 255), 0.2), transparent 26% 74%, rgba(var(--scene-b, 255, 155, 49), 0.18)),
    linear-gradient(180deg, rgba(3, 6, 18, 0.76), rgba(3, 6, 18, 0.92));
  backdrop-filter: blur(26px) saturate(1.4);
  -webkit-backdrop-filter: blur(26px) saturate(1.4);
  perspective: 1200px;
  overflow: hidden;
  animation: noCookieVeilIn 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.no-cookie-popup[hidden] {
  display: none;
}

.no-cookie-popup::before,
.no-cookie-popup::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

.no-cookie-popup::before {
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5.6rem),
    linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.18), transparent 44%, rgba(var(--scene-b, 255, 155, 49), 0.14), transparent);
  opacity: 0.56;
  transform: translateX(-12%);
  animation: noCookieGridDrift 7.8s linear infinite;
}

.no-cookie-popup::after {
  background:
    linear-gradient(75deg, transparent 8%, rgba(255, 255, 255, 0.2) 10%, transparent 13%),
    linear-gradient(130deg, transparent 52%, rgba(var(--scene-a, 32, 132, 255), 0.16) 55%, transparent 60%),
    linear-gradient(20deg, transparent 64%, rgba(var(--scene-b, 255, 155, 49), 0.18) 66%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.62;
  animation: noCookieLightSweep 4.8s ease-in-out infinite alternate;
}

html.no-cookie-popup-open,
body.no-cookie-popup-open {
  overflow: hidden;
}

.no-cookie-popup__panel {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(16rem, 0.92fr) minmax(0, 1.08fr);
  gap: 1.2rem;
  width: min(61rem, 100%);
  min-height: 30rem;
  padding: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 42%, rgba(var(--scene-a, 32, 132, 255), 0.08)),
    rgba(5, 10, 25, 0.72);
  box-shadow:
    0 2rem 6rem rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 255, 255, 0.11) inset,
    0 0 4rem rgba(var(--scene-a, 32, 132, 255), 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2rem 4rem rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.42);
  -webkit-backdrop-filter: blur(20px) saturate(1.42);
  transform: rotateX(var(--popup-tilt-x)) rotateY(var(--popup-tilt-y));
  transform-style: preserve-3d;
  overflow: hidden;
  animation: noCookiePanelEnter 780ms cubic-bezier(0.16, 1.24, 0.24, 1) both;
}

.no-cookie-popup__panel::before,
.no-cookie-popup__panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.no-cookie-popup__panel::before {
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(circle at var(--popup-x) var(--popup-y), rgba(255, 255, 255, 0.24), transparent 16rem);
  opacity: 0.64;
  mix-blend-mode: screen;
}

.no-cookie-popup__panel::after {
  inset: 0.36rem;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(var(--scene-a, 32, 132, 255), 0.08),
    inset 0 0 2rem rgba(255, 255, 255, 0.04);
}

.no-cookie-popup__beam {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 999px;
  mix-blend-mode: screen;
  opacity: 0.76;
  filter: blur(0.2rem);
}

.no-cookie-popup__beam--cyan {
  top: 9%;
  left: -16%;
  width: 46%;
  height: 0.12rem;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.88), transparent);
  animation: noCookieBeamSlide 2.9s ease-in-out infinite;
}

.no-cookie-popup__beam--amber {
  right: -18%;
  bottom: 16%;
  width: 58%;
  height: 0.12rem;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-b, 255, 155, 49), 0.84), transparent);
  animation: noCookieBeamSlide 3.8s 460ms ease-in-out infinite reverse;
}

.no-cookie-popup__image-wrap {
  position: relative;
  z-index: 4;
  min-height: 28rem;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(3rem);
  box-shadow:
    0 1.4rem 2.8rem rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.no-cookie-popup__image-wrap::before,
.no-cookie-popup__image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.no-cookie-popup__image-wrap::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(3, 6, 18, 0.38), transparent 30% 70%, rgba(3, 6, 18, 0.24));
  mix-blend-mode: screen;
}

.no-cookie-popup__image-wrap::after {
  background: linear-gradient(104deg, transparent 0 42%, rgba(255, 255, 255, 0.34) 48%, transparent 56% 100%);
  transform: translateX(-120%);
  animation: noCookieImageGlint 3.2s 760ms ease-in-out infinite;
}

.no-cookie-popup__image {
  width: 100%;
  height: 100%;
  min-height: 28rem;
  object-fit: cover;
  transform: scale(1.08);
  filter: saturate(1.18) contrast(1.05) brightness(1.03);
  animation: noCookieCookieFloat 7.2s ease-in-out infinite alternate;
}

.no-cookie-popup__copy {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.6rem;
  padding: 2rem 2.1rem 2rem 0.6rem;
  transform: translateZ(4rem);
}

.no-cookie-popup__copy h2 {
  max-width: 10ch;
  margin: 0;
  color: #ffffff;
  font-size: 3.45rem;
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow:
    0 0.22rem 1rem rgba(0, 0, 0, 0.52),
    0 0 2.4rem rgba(var(--scene-a, 32, 132, 255), 0.2);
  animation: noCookieCopySnap 780ms 120ms cubic-bezier(0.16, 1.2, 0.24, 1) both;
}

.no-cookie-popup__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.7rem;
  min-width: min(100%, 16.5rem);
  padding: 0;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(2rem);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
  animation: noCookieButtonArrive 720ms 260ms cubic-bezier(0.16, 1.28, 0.24, 1) both, noCookieButtonPulse 2.4s 1.2s ease-in-out infinite;
}




.no-cookie-popup__action > span {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0.9rem 1.35rem;
  font-size: 1.02rem;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0;
  white-space: nowrap;
}

.no-cookie-popup__action:hover,
.no-cookie-popup__action:focus-visible {
  transform: translateY(-0.16rem) translateZ(2rem) scale(1.04);
}

.no-cookie-popup__action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 0.28rem;
}

.no-cookie-popup__action:active {
  transform: translateY(0.04rem) translateZ(2rem) scale(0.98);
}

.no-cookie-popup__crumb {
  position: absolute;
  z-index: 5;
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 44% 56% 48% 52%;
  background:
    linear-gradient(135deg, #ffd18a, #a75d24 64%, #4a2718);
  box-shadow:
    0 0.16rem 0.36rem rgba(0, 0, 0, 0.32),
    0 0 0.7rem rgba(var(--scene-b, 255, 155, 49), 0.42);
  pointer-events: none;
  animation: noCookieCrumbDance 3.6s ease-in-out infinite;
}

.no-cookie-popup__crumb--one {
  left: 18%;
  top: 15%;
}

.no-cookie-popup__crumb--two {
  right: 12%;
  top: 28%;
  width: 0.42rem;
  animation-delay: 420ms;
}

.no-cookie-popup__crumb--three {
  left: 28%;
  bottom: 13%;
  width: 0.46rem;
  animation-delay: 760ms;
}

.no-cookie-popup__crumb--four {
  right: 22%;
  bottom: 18%;
  width: 0.68rem;
  animation-delay: 1.08s;
}

.no-cookie-popup.is-leaving {
  pointer-events: none;
  animation: noCookieVeilOut 520ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

.no-cookie-popup.is-leaving .no-cookie-popup__panel {
  animation: noCookiePanelExit 520ms cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

.music-visualizer {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 7;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 0.24rem;
  width: min(30rem, calc(100vw - 2rem));
  height: 4.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--scene-a, 32, 132, 255), 0.1), rgba(var(--scene-b, 255, 155, 49), 0.06)),
    rgba(3, 7, 18, 0.48);
  box-shadow:
    0 1rem 2.2rem rgba(0, 0, 0, 0.28),
    0 0 var(--music-glow-size) rgba(var(--scene-a, 32, 132, 255), 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem) scale(0.96);
  transition: opacity 220ms ease, transform 220ms ease;
}

.music-visualizer span {
  width: clamp(0.42rem, 1.2vw, 0.78rem);
  height: 1.7rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, var(--cyan) 44%, var(--violet) 68%, var(--amber));
  box-shadow: 0 0 0.8rem rgba(var(--scene-a, 32, 132, 255), 0.42);
  transform-origin: bottom center;
  scale: 1 var(--music-bar-4);
}

.music-visualizer span:nth-child(3n + 1) {
  height: 2rem;
  scale: 1 var(--music-bar-1);
}

.music-visualizer span:nth-child(3n + 2) {
  height: 1.8rem;
  scale: 1 var(--music-bar-2);
}

.music-visualizer span:nth-child(3n) {
  height: 1.55rem;
  scale: 1 var(--music-bar-3);
}

html.music-active .music-visualizer {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

main {
  position: relative;
  z-index: 2;
}

section {
  position: relative;
  z-index: 2;
  padding: 6.4rem 2rem;
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.hero {
  width: 100%;
  max-width: 100%;
  min-height: 92svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1.4rem;
  overflow: hidden;
  padding-top: calc(var(--nav-height) + 2rem);
  padding-bottom: 3.2rem;
  text-align: center;
}

.hero-copy {
  padding-top: 1.2rem;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 42rem);
  justify-items: center;
}

.main-title {
  margin: 0;
  font-size: 4.9rem;
  line-height: 0.94;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow:
    0 0 1.5rem rgba(var(--scene-a, 32, 132, 255), 0.36),
    0 0 3.6rem rgba(var(--scene-b, 255, 155, 49), 0.2);
}

.hero-text {
  width: min(100%, 42rem);
  max-width: 100%;
  margin: 0;
  padding-inline: 1rem;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  text-wrap: balance;
}







/* Le WebP animé fourni est la seule couche visuelle derrière le visage :
   aucun panneau LiquidGlass, reflet ou anneau CSS ne l'enveloppe. */


.video-section,
.tutorials-section,
.shop-section,
.contact-section {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
  max-width: var(--page-interface-width);
  margin: 0 auto;
  content-visibility: auto;
  contain-intrinsic-size: 640px;
}

.video-section h2,
.tutorials-section h2,
.shop-section h2,
.contact-section h2 {
  justify-self: flex-start;
  margin: 0 0 1.6rem;
  color: var(--text);
  font-size: 2.85rem;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.22);
}


.video-wrapper {
  align-content: center;
  justify-content: center;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(4, 9, 22, 0.68);
  box-shadow:
    0 1.6rem 4rem rgba(0, 0, 0, 0.34),
    0 0 3rem rgba(var(--scene-a, 32, 132, 255), 0.16);
}

.video-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--scene-a, 32, 132, 255), 0.18), transparent 30%, rgba(var(--scene-b, 255, 155, 49), 0.13)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%);
  mix-blend-mode: screen;
  z-index: 1;
}

.video-wrapper video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050914;
}

/* ═══ « Vidéo à venir » — portail volumétrique ═══════════════════════════
   Scène 3D CSS complète : sol infini en fuite, tunnel d'anneaux qui fonce
   vers le spectateur, cube de verre en rotation, triangle de lecture,
   satellites en orbite inclinée. Aucune couche ne « se termine » :
   · le sol défile d'exactement une cellule de grille (64px) par cycle ;
   · les anneaux du tunnel sont déphasés d'un septième de cycle et naissent
     comme ils meurent, à opacité nulle : le flux est continu ;
   · toutes les rotations font 360° pile ;
   · les respirations partent et reviennent à la même valeur. */

.coming-soon-video {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: min(62vw, 38rem);
  aspect-ratio: 16 / 9;
  padding: clamp(1.2rem, 4vw, 3rem);
  overflow: hidden;
  /* Surtout PAS de `perspective` ici : le <p> serait alors projeté dans le
     contexte 3D, et l'animation de background-position sur un
     background-clip:text reprojeté à chaque frame le faisait clignoter.
     La perspective vit maintenant sur .video-portal, qui ne contient
     que la scène. */
  background:
    radial-gradient(circle at 50% 42%, rgba(var(--scene-a, 32, 132, 255), 0.16), transparent 22rem),
    radial-gradient(circle at 50% 96%, rgba(var(--scene-c, 47, 107, 231), 0.18), transparent 20rem),
    linear-gradient(180deg, #01040e 0%, #04091c 48%, #07031a 100%);
}

/* Vignette : concentre le regard sur le cœur du portail. */
.coming-soon-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 38%, rgba(1, 3, 10, 0.72) 100%);
}

/* Balayage lumineux déplacé par transform : la couche reste composée sur le
   GPU et ne force plus la grille ni le texte à être repeints. */
.coming-soon-video::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -65%;
  width: 45%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 8%, rgba(112, 229, 255, 0.04) 34%, rgba(255, 255, 255, 0.11) 50%, rgba(161, 116, 255, 0.045) 66%, transparent 92%);
  mix-blend-mode: screen;
  opacity: 0.72;
  transform: translate3d(0, 0, 0) skewX(-12deg);
  backface-visibility: hidden;
  will-change: transform;
  animation: portalSweep 8.8s linear infinite;
}

.video-portal {
  --cube-size: clamp(5.5rem, 15vw, 10rem);
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

/* ── Sol en fuite : défilement d'une cellule exacte = boucle parfaite ── */
.video-portal__floor {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 200%;
  height: 58%;
  overflow: hidden;
  transform: translate3d(-50%, 0, 0) rotateX(74deg);
  transform-origin: 50% 100%;
  opacity: 0.9;
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 100%);
  backface-visibility: hidden;
  contain: paint;
}

.video-portal__floor::before {
  content: "";
  position: absolute;
  inset: -64px 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(var(--scene-a, 32, 132, 255), 0.62) 0 1.5px, transparent 1.5px 64px),
    repeating-linear-gradient(0deg, rgba(var(--scene-c, 47, 107, 231), 0.55) 0 1.5px, transparent 1.5px 64px);
  background-size: 64px 64px;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  animation: portalFloor 2.6s linear infinite;
}

/* ── Tunnel : 7 anneaux déphasés d'un septième de cycle ── */
.video-portal__tunnel {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.video-portal__tunnel i {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(9rem, 24vw, 17rem);
  aspect-ratio: 1;
  border: 2.5px solid rgba(var(--scene-a, 32, 132, 255), 0.85);
  border-radius: 50%;
  box-shadow:
    0 0 2.6rem rgba(var(--scene-a, 32, 132, 255), 0.55),
    inset 0 0 3rem rgba(var(--scene-c, 47, 107, 231), 0.4);
  opacity: 0;
  animation: portalRing 5.6s linear infinite;
}

.video-portal__tunnel i:nth-child(2) {
  animation-delay: -0.8s;
  border-color: rgba(var(--scene-c, 47, 107, 231), 0.8);
}

.video-portal__tunnel i:nth-child(3) {
  animation-delay: -1.6s;
  border-color: rgba(var(--scene-b, 255, 155, 49), 0.78);
}

.video-portal__tunnel i:nth-child(4) {
  animation-delay: -2.4s;
}

.video-portal__tunnel i:nth-child(5) {
  animation-delay: -3.2s;
  border-color: rgba(var(--scene-c, 47, 107, 231), 0.8);
}

.video-portal__tunnel i:nth-child(6) {
  animation-delay: -4s;
  border-color: rgba(var(--scene-b, 255, 155, 49), 0.78);
}

.video-portal__tunnel i:nth-child(7) {
  animation-delay: -4.8s;
}

.video-portal__core {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(11rem, 28vw, 19rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--scene-a, 32, 132, 255), 0.5), rgba(var(--scene-c, 47, 107, 231), 0.2) 46%, transparent 70%);
  animation: portalCore 5.2s ease-in-out infinite;
}

/* ── Cube de verre + triangle de lecture ── */
.video-portal__prism {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--cube-size);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: portalPrismBob 6.4s ease-in-out infinite;
}

.video-portal__cube {
  --cube-half: calc(var(--cube-size) / 2);
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: portalCubeSpin 16s linear infinite;
}

.video-portal__cube i {
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  background:
    linear-gradient(148deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.04) 46%),
    linear-gradient(38deg, rgba(var(--scene-a, 32, 132, 255), 0.42), rgba(var(--scene-c, 47, 107, 231), 0.24) 54%, rgba(var(--scene-b, 255, 155, 49), 0.34));
  box-shadow:
    0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.32),
    inset 0 0 2.6rem rgba(var(--scene-a, 32, 132, 255), 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.video-portal__cube i:nth-child(1) {
  transform: translateZ(var(--cube-half));
}

.video-portal__cube i:nth-child(2) {
  transform: rotateY(180deg) translateZ(var(--cube-half));
}

.video-portal__cube i:nth-child(3) {
  transform: rotateY(90deg) translateZ(var(--cube-half));
}

.video-portal__cube i:nth-child(4) {
  transform: rotateY(-90deg) translateZ(var(--cube-half));
}

.video-portal__cube i:nth-child(5) {
  transform: rotateX(90deg) translateZ(var(--cube-half));
}

.video-portal__cube i:nth-child(6) {
  transform: rotateX(-90deg) translateZ(var(--cube-half));
}

.video-portal__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(2rem, 5vw, 3.2rem);
  aspect-ratio: 1;
  clip-path: polygon(20% 4%, 96% 50%, 20% 96%);
  background: linear-gradient(135deg, #ffffff, var(--cyan) 46%, var(--amber));
  filter: drop-shadow(0 0 1.1rem rgba(255, 255, 255, 0.75));
  animation: portalPlay 3.6s ease-in-out infinite;
}

.coming-soon-video p {
  position: relative;
  z-index: 5;
  /* Deux motifs colorés identiques se suivent : déplacer le fond d'une
     moitié de sa largeur ramène exactement la même image au raccord. */
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
  margin: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.4rem, 8vw, 7.4rem);
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  background-image: linear-gradient(
    90deg,
    #e9fbff 0%,
    #72e7ff 10%,
    #6597ff 20%,
    #bd73ff 29.5%,
    #ff7195 39%,
    #ffc46e 46%,
    #e9fbff 50%,
    #72e7ff 60%,
    #6597ff 70%,
    #bd73ff 79.5%,
    #ff7195 89%,
    #ffc46e 96%,
    #e9fbff 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 1rem rgba(43, 185, 255, 0.4))
    drop-shadow(0 0 1.65rem rgba(185, 92, 255, 0.25));
  animation: videoComingColorFlow 10s linear infinite;
  transition: transform 320ms cubic-bezier(0.16, 1.16, 0.24, 1), filter 260ms ease;
}

/* Copie décorative floutée, alignée derrière le libellé réel. Elle partage
   exactement sa période et son motif : le halo suit les couleurs sans dérive. */
.video-coming-aura {
  position: absolute;
  right: 0;
  bottom: clamp(1.2rem, 4vw, 3rem);
  left: 0;
  /* Match the centered flex label's box, not the full portal width. */
  width: max-content;
  max-width: calc(100% - clamp(2.4rem, 8vw, 6rem));
  margin-inline: auto;
  z-index: 4;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.4rem, 8vw, 7.4rem);
  font-weight: 950;
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  background-image: linear-gradient(
    90deg,
    #e9fbff 0%,
    #72e7ff 10%,
    #6597ff 20%,
    #bd73ff 29.5%,
    #ff7195 39%,
    #ffc46e 46%,
    #e9fbff 50%,
    #72e7ff 60%,
    #6597ff 70%,
    #bd73ff 79.5%,
    #ff7195 89%,
    #ffc46e 96%,
    #e9fbff 100%
  );
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: blur(clamp(0.32rem, 0.75vw, 0.55rem)) saturate(1.16);
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  animation: videoComingColorFlow 10s linear infinite;
  transition: transform 320ms cubic-bezier(0.16, 1.16, 0.24, 1), opacity 260ms ease;
}

/* Reflet indépendant : s'il devait être recomposé, le texte coloré situé
   dessous reste intact. Le dégradé est très large et sans arête dure. */
.coming-soon-video p::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: 1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    104deg,
    transparent 0 40%,
    rgba(191, 245, 255, 0.34) 46%,
    rgba(255, 255, 255, 0.94) 50%,
    rgba(180, 222, 255, 0.3) 54%,
    transparent 60% 100%
  );
  background-size: 260% 100%;
  background-position: 145% 50%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: background-position;
  animation: videoComingShine 5.8s linear infinite;
}

.coming-soon-video:hover p,
.coming-soon-video:focus-within p {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.58))
    drop-shadow(0 0 2.6rem rgba(var(--scene-b, 255, 155, 49), 0.36));
}

.coming-soon-video:hover .video-coming-aura,
.coming-soon-video:focus-within .video-coming-aura {
  opacity: 0.33;
  transform: translateZ(0) scale(1.05);
}

.tutorials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* .tutorials-card est une surface liquid-glass : le matériau de verre fait
   `border-radius: inherit`, donc sans rayon ici il rendait des coins carrés. */
.tutorials-card {
  min-height: 21rem;
  padding: 1.2rem;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1rem;
  border-radius: var(--liquid-glass-panel-radius);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

/* .contact-section n'est PAS un panneau : c'est la section, et section{}
   applique 2rem de padding latéral. Lui donner le style de carte la faisait
   déborder de 4rem par rapport aux cartes des autres sections. Le panneau,
   c'est .contact-card, qui est déjà dans le HTML. */
.tutorial-card,
.shop-panel {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--liquid-glass-panel-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(4, 9, 22, 0.62);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.25);
}

/* flex: 1 1 0 → les trois cartes partagent la largeur à parts strictement
   égales. Avant, elles étaient dimensionnées par leur contenu : « AI non
   censuré » ressortait plus large et « Jeux gratuit » plus étroite. */
.tutorial-card {
  --tutorial-media-radius: max(1.1rem, calc(var(--liquid-glass-panel-radius) - 1.2rem));
  flex: 1 1 0;
  min-width: 0;
  min-height: 21rem;
  padding: 1.2rem;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: stretch;
  gap: 1rem;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.tutorial-card:hover {
  transform: translateY(-0.55rem);
  border-color: rgba(var(--scene-a, 32, 132, 255), 0.36);
  box-shadow:
    0 2rem 4rem rgba(0, 0, 0, 0.36),
    0 0 3rem rgba(var(--scene-a, 32, 132, 255), 0.22),
    0 0 4.5rem rgba(var(--scene-b, 255, 155, 49), 0.12);
}

.tutorial-logo {
  justify-self: center;
  align-self: center;
  margin: 0 auto;
  object-fit: contain;
}

.tutorial-card h3,
.shop-panel h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.tutorial-card p,
.shop-panel p,
.contact-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.shop-panel {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 2rem;
}

.shop-logo {
  width: 12rem;
  height: 12rem;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1.3rem rgba(var(--scene-a, 32, 132, 255), 0.84))
    drop-shadow(0 0 2.2rem rgba(var(--scene-b, 255, 155, 49), 0.42));
  animation: logoLevitate 5.8s ease-in-out infinite;
}

.tutorial-card h3,
.shop-panel h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.tutorial-card p,
.shop-panel p,
.contact-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.collection-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 12rem;
  aspect-ratio: 1;
  isolation: isolate;
}

.collection-logo {
  border-radius: 2.5rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035)),
    rgba(4, 12, 26, 0.62);
  box-shadow:
    0 0 2.2rem rgba(var(--scene-a, 32, 132, 255), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
  animation: collectionLogoLift 5.6s ease-in-out infinite;
}

.collection-logo__core {
  width: 45%;
  aspect-ratio: 1;
  border-radius: 1.15rem;
  background:
    linear-gradient(135deg, #ffffff, rgba(var(--scene-a, 32, 132, 255), 0.86) 42%, rgba(var(--scene-b, 255, 155, 49), 0.9)),
    rgba(var(--scene-a, 32, 132, 255), 0.3);
  box-shadow:
    0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.64),
    0 0 2.4rem rgba(var(--scene-b, 255, 155, 49), 0.26);
  transform: rotate(45deg);
  animation: collectionCoreSpin 7s linear infinite;
}

.collection-logo__ring,
.collection-logo__spark {
  position: absolute;
  pointer-events: none;
}

.collection-logo__ring {
  inset: 14%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 36%;
}

.collection-logo__ring-one {
  animation: collectionRingTurn 8s linear infinite;
}

.collection-logo__ring-two {
  inset: 25%;
  border-color: rgba(var(--scene-b, 255, 155, 49), 0.38);
  transform: rotate(33deg);
  animation: collectionRingTurn 5.4s linear infinite reverse;
}

.collection-logo__spark {
  width: 0.72rem;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 0.8rem rgba(255, 255, 255, 0.82),
    0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.62);
}

.collection-logo__spark-one {
  top: 18%;
  right: 22%;
  animation: collectionSparkDrift 3.8s ease-in-out infinite;
}

.collection-logo__spark-two {
  bottom: 20%;
  left: 22%;
  animation: collectionSparkDrift 4.6s ease-in-out infinite reverse;
}

.shop-panel > div {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(14rem, 0.75fr);
  align-items: center;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  padding: clamp(1.7rem, 3.2vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--liquid-glass-panel-radius);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02) 55%),
    rgba(5, 11, 26, 0.5);
  box-shadow:
    0 1.2rem 2.8rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  isolation: isolate;
  overflow: hidden;
}

.contact-card__glow {
  position: absolute;
  z-index: -1;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(52px);
  opacity: 0.5;
}

.contact-card__glow--cyan {
  top: -18%;
  left: -8%;
  background: radial-gradient(circle, rgba(var(--scene-a, 32, 132, 255), 0.5), transparent 70%);
  animation: contactGlowDrift 11s ease-in-out infinite alternate;
}

.contact-card__glow--amber {
  right: -10%;
  bottom: -24%;
  background: radial-gradient(circle, rgba(var(--scene-b, 255, 155, 49), 0.42), transparent 70%);
  animation: contactGlowDrift 13s ease-in-out infinite alternate-reverse;
}

.contact-copy {
  display: grid;
  gap: 1.05rem;
  justify-items: start;
}

.contact-copy p.contact-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  color: rgba(140, 236, 255, 0.92);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.contact-kicker::before {
  content: "";
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0.7rem rgba(var(--scene-a, 32, 132, 255), 0.9);
  animation: contactSignalBlink 2.4s ease-in-out infinite;
}

.contact-card h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: 0;
}

.contact-visual {
  position: relative;
  display: grid;
  place-items: center;
  place-self: center;
  width: min(15rem, 100%);
  aspect-ratio: 1;
}

.contact-visual__halo {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--scene-a, 32, 132, 255), 0.24), rgba(var(--scene-c, 47, 107, 231), 0.12) 55%, transparent 72%);
  animation: contactHaloPulse 4.6s ease-in-out infinite;
}

.contact-visual__orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.08);
}

.contact-visual__orbit i {
  position: absolute;
  top: -0.26rem;
  left: 50%;
  width: 0.52rem;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
}

.contact-visual__orbit-one {
  inset: 4%;
  animation: contactOrbitSpin 16s linear infinite;
}

.contact-visual__orbit-one i {
  background: var(--cyan);
  box-shadow: 0 0 0.9rem rgba(var(--scene-a, 32, 132, 255), 0.95);
}

.contact-visual__orbit-two {
  inset: 15%;
  animation: contactOrbitSpin 26s linear infinite reverse;
}

.contact-visual__orbit-two i {
  background: var(--amber);
  box-shadow: 0 0 0.9rem rgba(var(--scene-b, 255, 155, 49), 0.95);
}

.contact-visual__core {
  position: relative;
  font-size: clamp(3.2rem, 6vw, 4.6rem);
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(120deg, #9ff1ff, var(--cyan) 34%, var(--violet) 62%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.4));
  animation: contactCoreFloat 6s ease-in-out infinite;
}

.contact-actions {
  padding-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.reading-progress {
  --scroll-progress: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 3px;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--amber));
  box-shadow: 0 0 1.2rem rgba(var(--scene-a, 32, 132, 255), 0.72);
  pointer-events: none;
}

.tutorial-hero {
  width: 100%;
  max-width: 100%;
  min-height: 92svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 5.8rem);
  overflow: hidden;
  padding: calc(var(--nav-height) + 4rem) clamp(1rem, 5vw, 5rem) 5rem;
}

.tutorial-hero::before,
.tutorial-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tutorial-hero::before {
  inset: 18% 8% auto auto;
  width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.34), transparent, rgba(var(--scene-b, 255, 155, 49), 0.24), transparent);
  filter: blur(1.8rem);
  opacity: 0.7;
  animation: auraRotate 22s linear infinite;
}

.tutorial-hero::after {
  left: 4%;
  right: 4%;
  bottom: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.62), rgba(var(--scene-b, 255, 155, 49), 0.52), transparent);
  box-shadow: 0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.4);
}

.tutorial-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

.tutorial-hero-copy .main-title {
  font-size: clamp(3rem, 8vw, 6.8rem);
  max-width: 100%;
  text-wrap: balance;
}

.tutorial-hero-copy .hero-text {
  width: min(100%, 45rem);
  padding-inline: 0;
  text-align: left;
  font-size: clamp(1rem, 1.35vw, 1.24rem);
}

.tutorial-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.6rem;
}

.tutorial-orb {
  position: relative;
  z-index: 2;
  width: min(100%, 31rem);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: logoLevitate 5.6s ease-in-out infinite;
}

.tutorial-orb::before,
.tutorial-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.tutorial-orb::before {
  inset: 9%;
  background:
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.32), transparent 16%),
    conic-gradient(from 60deg, rgba(var(--scene-a, 32, 132, 255), 0.92), rgba(var(--scene-c, 47, 107, 231), 0.28), rgba(var(--scene-b, 255, 155, 49), 0.86), rgba(255, 63, 134, 0.36), rgba(var(--scene-a, 32, 132, 255), 0.92));
  filter: blur(2.4rem);
  opacity: 0.78;
  animation: logoAura 4.2s ease-in-out infinite alternate, auraRotate 16s linear infinite;
}

.tutorial-orb::after {
  inset: 16%;
  border: 0;
  background: none;
  box-shadow: none;
}

.orb-ring {
  position: absolute;
  inset: 10%;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  pointer-events: none;
}

.orb-ring-one {
  border-top-color: rgba(var(--scene-a, 32, 132, 255), 0.9);
  border-right-color: rgba(var(--scene-b, 255, 155, 49), 0.8);
  transform: rotate(-24deg) scaleX(0.72);
  filter: drop-shadow(0 0 1rem rgba(var(--scene-a, 32, 132, 255), 0.64));
  animation: orbitSpin 12s linear infinite;
}

.orb-ring-two {
  inset: 21%;
  border-left-color: rgba(255, 63, 134, 0.8);
  border-bottom-color: rgba(var(--scene-a, 32, 132, 255), 0.72);
  transform: rotate(58deg) scaleX(0.62);
  animation: orbitSpin 17s linear infinite reverse;
}

.orb-core {
  position: absolute;
  inset: 28%;
  z-index: 1;
  border-radius: 50%;
  background: none;
  box-shadow: none;
}

.tutorial-orb-face {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 3;
  width: 64%;
  height: 82%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%) translateZ(2.8rem);
  filter:
    drop-shadow(0 1.8rem 1.4rem rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 1.5rem rgba(var(--scene-a, 32, 132, 255), 0.82))
    drop-shadow(0 0 3rem rgba(var(--scene-b, 255, 155, 49), 0.36));
  animation: centeredTinyFloat 4.8s ease-in-out infinite;
}

/* ═══ Hub de tutoriels ═══════════════════════════════════════════════════
   Catalogue filtrable. Chaque carte porte une rune animée, un bandeau de
   bordure conique en rotation continue (360° pile, donc sans raccord) et un
   life hack qui se déplie au survol. L'apparition est cascadée via --i, que
   le JS réindexe après chaque filtrage pour garder la vague continue. */

@property --tuto-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.section-lead {
  margin: -0.9rem 0 1.5rem;
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.66;
}

.tutorials-cta {
  justify-self: start;
  margin-top: 1.4rem;
}

.tuto-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.tuto-hub {
  width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
  max-width: var(--page-interface-width);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  padding: 0 0 3rem;
}

.tuto-hub__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: end;
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--liquid-glass-panel-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(4, 9, 22, 0.62);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.25);
}

.tuto-hub__kicker {
  margin: 0 0 0.4rem;
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tuto-hub__head h2,
.tuto-dossiers-head h2 {
  margin: 0 0 0.6rem;
  color: var(--text);
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  line-height: 1.06;
  font-weight: 950;
  text-wrap: balance;
}

.tuto-hub__lead {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  line-height: 1.66;
}

.tuto-hub__stats {
  display: flex;
  gap: clamp(0.8rem, 2vw, 1.8rem);
  margin: 0;
}

.tuto-hub__stats div {
  text-align: center;
}

.tuto-hub__stats dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tuto-hub__stats dd {
  margin: 0.15rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 950;
  line-height: 1;
  color: transparent;
  background: linear-gradient(120deg, var(--cyan), #ffffff 46%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
}

.tuto-filters {
  flex-wrap: wrap;
}

.tuto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1rem;
  align-items: stretch;
}

.tuto-card {
  --tuto-accent: var(--cyan);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto auto;
  gap: 0.55rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(1.1rem, 1.8vw, 1.6rem);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(4, 9, 22, 0.66);
  box-shadow:
    0 1rem 2.4rem rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(1.2);
  animation: tutoCardRise 620ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 42ms);
  transition:
    transform 320ms cubic-bezier(0.18, 1.1, 0.24, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.tuto-card[data-tuto-group="securite"] { --tuto-accent: #ff5d8f; }
.tuto-card[data-tuto-group="systeme"] { --tuto-accent: #7ad3ff; }
.tuto-card[data-tuto-group="reseau"] { --tuto-accent: #8affc8; }
.tuto-card[data-tuto-group="perf"] { --tuto-accent: var(--amber); }
.tuto-card[data-tuto-group="donnees"] { --tuto-accent: #c39bff; }
.tuto-card[data-tuto-group="ia"] { --tuto-accent: #ffd166; }

/* Liseré conique : une rotation complète, donc aucune reprise visible. */
.tuto-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--tuto-angle),
    transparent 0 42%,
    var(--tuto-accent) 50%,
    transparent 58% 100%
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0.55;
  animation: tutoBorderTurn 9s linear infinite;
  animation-delay: calc(var(--i, 0) * -370ms);
  pointer-events: none;
}

.tuto-card:hover,
.tuto-card:focus-within {
  transform: translateY(-0.5rem);
  border-color: color-mix(in srgb, var(--tuto-accent) 55%, transparent);
  box-shadow:
    0 1.8rem 3.6rem rgba(0, 0, 0, 0.42),
    0 0 2.6rem color-mix(in srgb, var(--tuto-accent) 26%, transparent);
}

.tuto-card:hover::before,
.tuto-card:focus-within::before {
  opacity: 1;
}

.tuto-card > * {
  position: relative;
  z-index: 1;
}

.tuto-card__rune {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 1.1rem;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.26), transparent 60%),
    color-mix(in srgb, var(--tuto-accent) 16%, rgba(4, 10, 24, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0.5rem 1.2rem rgba(0, 0, 0, 0.4);
  animation: tutoRuneFloat 7.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -260ms);
}

.tuto-card__icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--tuto-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--tuto-accent) 55%, transparent));
  transition: transform 320ms cubic-bezier(0.18, 1.2, 0.24, 1);
}

.tuto-card:hover .tuto-card__icon {
  transform: scale(1.14) rotate(-6deg);
}

.tuto-card__cat {
  margin: 0;
  color: var(--tuto-accent);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tuto-card h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.12rem;
  line-height: 1.24;
  font-weight: 900;
  text-wrap: balance;
}

.tuto-card__lead {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.tuto-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tuto-card__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(247, 251, 255, 0.8);
  font-size: 0.75rem;
  font-weight: 800;
}

.tuto-card__hack {
  margin: 0;
  padding: 0.72rem 0.85rem;
  border-left: 3px solid var(--tuto-accent);
  border-radius: 0 0.7rem 0.7rem 0;
  background: color-mix(in srgb, var(--tuto-accent) 9%, rgba(255, 255, 255, 0.03));
  color: rgba(247, 251, 255, 0.9);
  font-size: 0.87rem;
  line-height: 1.58;
}

.tuto-card__hack strong {
  display: block;
  margin-bottom: 0.18rem;
  color: var(--tuto-accent);
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tuto-card.is-hidden {
  display: none;
}

.tuto-empty {
  margin: 0;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
}

.tuto-dossiers-head {
  width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
  max-width: var(--page-interface-width);
  margin: 0 auto 1.2rem;
  padding: 0;
}

/* Sous 760px, la colonne de statistiques mangeait toute la largeur et le
   titre se retrouvait à un mot par ligne. On empile, et les statistiques
   passent en bandeau pleine largeur. */
@media (max-width: 760px) {
  /* Les trois cartes de l'accueil restaient côte à côte jusqu'en 390px, où
     elles tombaient à ~78px de large. Elles s'empilent désormais. */
  .tutorials-card {
    flex-direction: column;
  }

  .tutorial-card {
    flex: 0 0 auto;
    min-height: 0;
  }

  .tuto-hub__head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.2rem;
  }

  .tuto-hub__head h2 {
    font-size: clamp(1.45rem, 6.4vw, 2rem);
  }

  .tuto-hub__stats {
    justify-content: space-between;
    width: 100%;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .tuto-hub__stats dd {
    font-size: clamp(1.35rem, 6vw, 1.9rem);
  }

  .tuto-grid {
    grid-template-columns: 1fr;
  }
}

.tutorials-index,
.tutorials-list {
  width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
  max-width: var(--page-interface-width);
  margin: 0 auto;
}

.tutorials-index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.8rem), 1fr));
  gap: 0.65rem;
  padding: clamp(0.62rem, 1vw, 0.85rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.034)),
    rgba(4, 9, 22, 0.68);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

/* grid-auto-rows: 1fr → les trois fiches adoptent toutes la hauteur de la
   plus grande. Sans ça, chaque fiche se dimensionnait sur son propre texte :
   « AI non censuré » (le plus long) débordait, « Jeux gratuit » tassait. */
.tutorials-list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1.35rem;
  padding: 0 0 6rem;
}

.tutorial-doc-card {
  --shine-x: 50%;
  --shine-y: 28%;
  --media-x: 0px;
  --media-y: 0px;
  --tutorial-media-radius: 8px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(17rem, 0.84fr) minmax(0, 1.16fr);
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: stretch;
  min-height: 32rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(var(--scene-a, 32, 132, 255), 0.16), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.034)),
    rgba(4, 9, 22, 0.68);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.25);
  /* Pas de content-visibility ici : hors écran, la fiche aurait rapporté sa
     taille intrinsèque estimée au lieu de sa hauteur réelle, ce qui empêche
     grid-auto-rows: 1fr d'égaliser correctement les trois fiches. */
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
  transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.tutorial-doc-card::before,
.tutorial-doc-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.tutorial-doc-card::before {
  inset: 0;
  background:
    linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, 0.08), transparent 43%),
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255, 255, 255, 0.14), transparent 18rem);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 260ms ease;
}

.tutorial-doc-card::after {
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(var(--scene-a, 32, 132, 255), 0.42), transparent 36%, rgba(var(--scene-b, 255, 155, 49), 0.38));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0.5;
}

.tutorial-doc-card:hover,
.tutorial-doc-card:focus-within {
  border-color: rgba(var(--scene-a, 32, 132, 255), 0.36);
  box-shadow:
    0 2rem 4.8rem rgba(0, 0, 0, 0.38),
    0 0 3.2rem rgba(var(--scene-a, 32, 132, 255), 0.24),
    0 0 4rem rgba(var(--scene-b, 255, 155, 49), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.tutorial-doc-card:hover::before,
.tutorial-doc-card:focus-within::before {
  opacity: 1;
}

.tutorial-doc-card:nth-child(even) {
  grid-template-columns: minmax(0, 1.16fr) minmax(17rem, 0.84fr);
}

.tutorial-doc-card:nth-child(even) .tutorial-media {
  order: 2;
}

.tutorial-media {
  position: sticky;
  top: calc(var(--nav-height) + 1.2rem);
  align-self: start;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(3, 6, 18, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1rem 2.4rem rgba(0, 0, 0, 0.28);
}

.tutorial-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%);
  transform: translateX(-100%);
  mix-blend-mode: screen;
  animation: mediaScan 5.2s ease-in-out infinite;
  pointer-events: none;
}

.tutorial-media img {
  width: 100%;
  aspect-ratio: 12 / 7;
  object-fit: cover;
  transform: translate3d(var(--media-x), var(--media-y), 0) scale(1.035);
  transition: transform 320ms cubic-bezier(0.2, 0.85, 0.18, 1), filter 320ms ease;
  filter: saturate(1.08) contrast(1.04);
}

/* ═══ Fond d'écran intégré DANS le verre ════════════════════════════════
   Le visuel n'est ni collé derrière, ni posé devant : il est reconstruit
   comme une image vue à travers une plaque de verre épaisse. De l'arrière
   vers la surface :
     1. plate     l'image diffusée par le verre — floutée et agrandie ;
     2. refract   une seconde copie, plus nette et bien plus dilatée, masquée
                  sur le seul pourtour : c'est la déviation optique du bord
                  épais, et c'est ce détail qui vend l'épaisseur ;
     3. caustics  taches de lumière focalisée qui dérivent lentement ;
     4. tint      teinte propre du verre + absorption vers le bas ;
     5. specular  reflet spéculaire sur la face avant.
   Le balayage .tutorial-media::after passe encore par-dessus l'ensemble,
   donc la surface reste solidaire du reste du panneau.
   Toutes les dérives repassent par leur état initial : aucune reprise visible. */

/* aspect-ratio: 1 → les trois panneaux de verre sont rigoureusement
   identiques d'un tutoriel à l'autre, quel que soit le texte à côté. */
.tutorial-logo-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Le rayon suit celui de l'interface qui contient le panneau, diminué de sa
     marge intérieure : les deux arrondis restent ainsi concentriques au lieu
     de laisser des coins carrés dans une carte très arrondie. */
  border-radius: var(--tutorial-media-radius, 8px);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: rgba(3, 6, 18, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 2.4rem rgba(0, 0, 0, 0.5),
    0 1rem 2.4rem rgba(0, 0, 0, 0.28);
}

[data-tutorial-scene="ai"] {
  --tutorial-wallpaper: url(images/tutorial-bg-ai.b23a7aad.webp);
}

[data-tutorial-scene="steam"] {
  --tutorial-wallpaper: url(images/tutorial-bg-steam.20ce98a4.webp);
}

[data-tutorial-scene="windows"] {
  --tutorial-wallpaper: url(images/tutorial-bg-windows.e212dc7b.webp);
}

.tutorial-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.tutorial-scene > span {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
}

.tutorial-scene__plate {
  background-image: var(--tutorial-wallpaper);
  background-size: cover;
  background-position: center;
  filter: blur(3px) saturate(1.15) brightness(0.84);
  transform: scale(1.16);
  animation: sceneDrift 27s ease-in-out infinite;
}

.tutorial-scene__refract {
  background-image: var(--tutorial-wallpaper);
  background-size: cover;
  background-position: center;
  filter: blur(0.6px) saturate(1.5) brightness(1.14) contrast(1.08);
  transform: scale(1.42);
  opacity: 0.85;
  mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, transparent 50%, #000 88%);
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, transparent 50%, #000 88%);
  animation: sceneRefract 21s ease-in-out infinite;
}

.tutorial-scene__caustics {
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 255, 255, 0.3), transparent 34%),
    radial-gradient(circle at 74% 66%, rgba(255, 255, 255, 0.18), transparent 30%);
  filter: blur(10px);
  mix-blend-mode: soft-light;
  animation: sceneCaustics 19s ease-in-out infinite;
}

.tutorial-scene__tint {
  background:
    linear-gradient(158deg, rgba(var(--scene-a, 32, 132, 255), 0.1), transparent 46%, rgba(var(--scene-b, 255, 155, 49), 0.08)),
    linear-gradient(180deg, rgba(3, 6, 18, 0.16), rgba(3, 6, 18, 0.54));
}

.tutorial-scene__specular {
  background:
    linear-gradient(146deg, rgba(255, 255, 255, 0.32) 0 11%, transparent 29%),
    linear-gradient(200deg, transparent 62%, rgba(255, 255, 255, 0.1) 78%, transparent 92%);
  mix-blend-mode: screen;
  opacity: 0.78;
  animation: sceneSpecular 23s ease-in-out infinite;
}

/* Logos : aucune lueur bleue derrière — uniquement une ombre portée neutre
   qui les décolle du fond d'écran, plus une lévitation 3D permanente. */
.tutorial-logo-media .tutorial-doc-logo,
.tutorial-logo-media .tutorial-logo {
  position: relative;
  z-index: 2;
  width: min(100%, 18rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  filter:
    drop-shadow(0 0.5rem 0.85rem rgba(0, 0, 0, 0.62))
    drop-shadow(0 0.15rem 0.3rem rgba(0, 0, 0, 0.45));
  animation: tutorialLogoLevitate 11s ease-in-out infinite;
}

/* Les fiches ayant toutes la hauteur de la plus longue, space-between répartit
   le reliquat entre les blocs : les trois se terminent au ras du bas au lieu
   de laisser un vide résiduel sous les plus courtes. */
.tutorial-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(0.4rem, 1.4vw, 0.8rem);
}

.tutorial-number {
  margin: 0;
  color: var(--amber);
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tutorial-body h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.02;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
  text-shadow: 0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.2);
}

.tutorial-lead,
.tutorial-finish {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

.tutorial-finish {
  padding: 1rem;
  border-left: 3px solid rgba(var(--scene-b, 255, 155, 49), 0.72);
  border-radius: 0 8px 8px 0;
  background: rgba(var(--scene-b, 255, 155, 49), 0.08);
  color: rgba(247, 251, 255, 0.86);
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.lesson-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  padding: 0 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(247, 251, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(var(--scene-a, 32, 132, 255), 0.12), rgba(var(--scene-b, 255, 155, 49), 0.08)),
    rgba(255, 255, 255, 0.04);
  font-size: 0.82rem;
  font-weight: 800;
}

.tutorial-steps {
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tutorial-step;
}

.tutorial-steps li {
  counter-increment: tutorial-step;
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(3, 7, 18, 0.42);
}

.tutorial-steps li::before {
  content: counter(tutorial-step, decimal-leading-zero);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.35rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #03101e;
  background: linear-gradient(135deg, var(--cyan), var(--amber));
  font-size: 0.78rem;
  font-weight: 950;
  box-shadow: 0 0 1.2rem rgba(var(--scene-a, 32, 132, 255), 0.28);
}

.tutorial-steps strong {
  grid-column: 2;
  display: block;
  margin-bottom: 0.24rem;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.35;
}

.tutorial-steps span {
  grid-column: 2;
  display: block;
  color: rgba(185, 200, 220, 0.94);
  font-size: 0.95rem;
  line-height: 1.62;
}

.lesson-code {
  margin: 0;
  overflow: auto;
  max-width: 100%;
  padding: 1rem;
  border: 1px solid rgba(var(--scene-a, 32, 132, 255), 0.18);
  border-radius: 8px;
  color: #dff8ff;
  background:
    linear-gradient(135deg, rgba(var(--scene-a, 32, 132, 255), 0.08), rgba(var(--scene-b, 255, 155, 49), 0.04)),
    rgba(1, 5, 14, 0.88);
  box-shadow: inset 0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.04);
}

.lesson-code code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.88rem;
  line-height: 1.62;
  white-space: pre;
}

body.inner-page::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: tutorialBackgroundDrift 22s ease-in-out infinite alternate;
}

body.project-page::before {
  background-image: url(images/wallpaper-projets.979cccfc.webp);
}

body.contacts-page::before {
  background-image: url(images/wallpaper-contacts.411ebc69.webp);
}

body.cv-page::before {
  background-image: url(images/wallpaper-cv.d64d13b3.webp);
}

body.inner-page::after {
  background: none;
  opacity: 0;
  animation: none;
}

.page-hero {
  width: 100%;
  max-width: 100%;
  min-height: 76svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem);
  align-items: center;
  gap: clamp(2rem, 5vw, 5.8rem);
  overflow: hidden;
  padding: calc(var(--nav-height) + 3.4rem) clamp(1rem, 5vw, 5rem) 3.6rem;
}

.page-hero::before,
.page-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-hero::before {
  inset: 17% 7% auto auto;
  width: min(42rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.32), transparent, rgba(var(--scene-b, 255, 155, 49), 0.22), transparent);
  filter: blur(1.9rem);
  opacity: 0.76;
  animation: auraRotate 24s linear infinite;
}

.page-hero::after {
  left: 4%;
  right: 4%;
  bottom: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.62), rgba(var(--scene-b, 255, 155, 49), 0.52), transparent);
  box-shadow: 0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.4);
}

.page-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1rem;
  max-width: 50rem;
}

.page-hero-copy .main-title {
  font-size: clamp(3rem, 7.6vw, 6.7rem);
  max-width: 100%;
  text-wrap: balance;
}

.page-hero-copy .hero-text {
  width: min(100%, 45rem);
  padding-inline: 0;
  text-align: left;
  font-size: clamp(1rem, 1.35vw, 1.24rem);
}

.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.6rem;
}

.orbital-console {
  position: relative;
  z-index: 2;
  width: min(100%, 31rem);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: logoLevitate 5.8s ease-in-out infinite;
}

.orbital-console::before,
.orbital-console::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.orbital-console::before {
  inset: 12%;
  background:
    radial-gradient(circle at 44% 38%, rgba(255, 255, 255, 0.28), transparent 16%),
    conic-gradient(from 60deg, rgba(var(--scene-a, 32, 132, 255), 0.9), rgba(var(--scene-c, 47, 107, 231), 0.3), rgba(var(--scene-b, 255, 155, 49), 0.82), rgba(255, 63, 134, 0.36), rgba(var(--scene-a, 32, 132, 255), 0.9));
  filter: blur(2.5rem);
  opacity: 0.78;
  animation: logoAura 4.2s ease-in-out infinite alternate, auraRotate 16s linear infinite;
}

.orbital-console::after {
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.12), transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(3, 6, 18, 0.08), rgba(3, 6, 18, 0.78));
  box-shadow:
    inset 0 0 4rem rgba(var(--scene-a, 32, 132, 255), 0.13),
    0 0 5rem rgba(var(--scene-b, 255, 155, 49), 0.12);
}

.console-halo,
.console-ring,
.console-node,
.console-readout,
.shop-capsule,
.signal-line {
  position: absolute;
  pointer-events: none;
}

.console-halo {
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 50%, rgba(var(--scene-a, 32, 132, 255), 0.18) 51%, transparent 58%),
    conic-gradient(from 90deg, transparent, rgba(255, 255, 255, 0.16), transparent, rgba(var(--scene-b, 255, 155, 49), 0.18), transparent);
  filter: drop-shadow(0 0 1.2rem rgba(var(--scene-a, 32, 132, 255), 0.4));
  animation: auraRotate 30s linear infinite reverse;
}

.console-ring {
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  filter: drop-shadow(0 0 0.9rem rgba(var(--scene-a, 32, 132, 255), 0.55));
}

.console-ring-one {
  inset: 8%;
  border-top-color: rgba(var(--scene-a, 32, 132, 255), 0.92);
  border-right-color: rgba(var(--scene-b, 255, 155, 49), 0.8);
  transform: rotate(-22deg) scaleX(0.72);
  animation: orbitSpin 12s linear infinite;
}

.console-ring-two {
  inset: 20%;
  border-left-color: rgba(255, 63, 134, 0.8);
  border-bottom-color: rgba(var(--scene-a, 32, 132, 255), 0.72);
  transform: rotate(58deg) scaleX(0.62);
  animation: orbitSpin 17s linear infinite reverse;
}

.console-ring-three {
  inset: 29%;
  border-top-color: rgba(255, 255, 255, 0.36);
  border-bottom-color: rgba(var(--scene-b, 255, 155, 49), 0.5);
  transform: rotate(18deg) scaleX(0.86);
  animation: orbitSpin 22s linear infinite;
}

.console-face {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  z-index: 3;
  width: 62%;
  height: 82%;
  max-height: none;
  object-fit: contain;
  object-position: center;
  transform: translate(-50%, -50%) translateZ(2.8rem);
  filter:
    drop-shadow(0 1.8rem 1.4rem rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 1.5rem rgba(var(--scene-a, 32, 132, 255), 0.82))
    drop-shadow(0 0 3rem rgba(var(--scene-b, 255, 155, 49), 0.36));
  animation: centeredTinyFloat 4.8s ease-in-out infinite;
}

.console-node {
  z-index: 4;
  width: 0.72rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f7fbff;
  box-shadow:
    0 0 0 0.42rem rgba(var(--scene-a, 32, 132, 255), 0.14),
    0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.9);
  animation: nodePulse 2.6s ease-in-out infinite;
}

.node-one {
  top: 15%;
  left: 32%;
}

.node-two {
  top: 40%;
  right: 10%;
  animation-delay: 540ms;
}

.node-three {
  left: 18%;
  bottom: 22%;
  animation-delay: 980ms;
}

.console-readout,
.shop-capsule {
  z-index: 4;
  display: grid;
  place-items: center;
  min-width: 3.35rem;
  min-height: 2.35rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: rgba(247, 251, 255, 0.88);
  background:
    linear-gradient(135deg, rgba(var(--scene-a, 32, 132, 255), 0.14), rgba(var(--scene-b, 255, 155, 49), 0.1)),
    rgba(2, 6, 16, 0.72);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.16);
  backdrop-filter: blur(12px);
}

.readout-one {
  top: 12%;
  right: 14%;
}

.readout-two {
  left: 6%;
  top: 44%;
}

.readout-three {
  right: 16%;
  bottom: 12%;
}

.shop-capsule {
  animation: floatCapsule 4.2s ease-in-out infinite;
}

.capsule-one {
  top: 12%;
  right: 14%;
}

.capsule-two {
  left: 7%;
  top: 44%;
  animation-delay: 580ms;
}

.capsule-three {
  right: 15%;
  bottom: 13%;
  animation-delay: 1040ms;
}

.signal-line {
  z-index: 4;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.88), rgba(var(--scene-b, 255, 155, 49), 0.72), transparent);
  box-shadow: 0 0 1rem rgba(var(--scene-a, 32, 132, 255), 0.5);
  transform-origin: left center;
  animation: signalPulse 2.8s ease-in-out infinite;
}

.signal-one {
  top: 26%;
  left: 12%;
  width: 42%;
  rotate: 22deg;
}

.signal-two {
  top: 47%;
  right: 4%;
  width: 48%;
  rotate: -18deg;
  animation-delay: 620ms;
}

.signal-three {
  bottom: 24%;
  left: 16%;
  width: 52%;
  rotate: -24deg;
  animation-delay: 1040ms;
}

/* ══════════════════════════════════════════════════════════════════════════
   Trois identités visuelles pour les héros avec le visage Olilap
   Chaque scène possède sa géométrie, sa palette et sa cinématique. Toutes les
   boucles animées reposent sur transform/opacity afin de rester fluides.
   ══════════════════════════════════════════════════════════════════════════ */

.tutorial-orb,
.project-console,
.contact-console {
  isolation: isolate;
  contain: layout style;
  backface-visibility: hidden;
}

/* ── Tutoriels : lentille de connaissance / lecteur de données ─────────── */
.tutorial-orb {
  perspective: 980px;
  animation: tutorialRigFloat 7.6s cubic-bezier(0.45, 0.05, 0.28, 1) infinite;
}

.tutorial-orb::before {
  inset: 5%;
  border-radius: 42% 58% 54% 46% / 48% 42% 58% 52%;
  background:
    radial-gradient(circle at 38% 30%, rgba(205, 251, 255, 0.44), transparent 13%),
    radial-gradient(circle at 50% 50%, rgba(31, 184, 255, 0.38), rgba(71, 82, 255, 0.22) 43%, rgba(170, 75, 255, 0.08) 66%, transparent 72%);
  filter: blur(1.65rem) saturate(1.18);
  opacity: 0.88;
  animation: tutorialNebula 8.4s ease-in-out infinite;
}

.tutorial-orb::after {
  inset: 14%;
  border: 1px solid rgba(169, 237, 255, 0.28);
  border-radius: 46% 54% 48% 52% / 54% 44% 56% 46%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.15), transparent 17%),
    linear-gradient(145deg, rgba(43, 196, 255, 0.1), rgba(124, 80, 255, 0.06) 54%, rgba(228, 102, 255, 0.08));
  box-shadow:
    inset 0 0 3rem rgba(71, 190, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 3.2rem rgba(74, 118, 255, 0.13);
  transform: translateZ(-18px) rotate(-2deg);
  animation: tutorialLensMorph 10.8s ease-in-out infinite;
}

.tutorial-orb__lens,
.tutorial-orb__arc,
.tutorial-orb__scan,
.tutorial-orb__track,
.tutorial-orb__badge {
  position: absolute;
  pointer-events: none;
}

.tutorial-orb__lens {
  inset: 8%;
  z-index: 1;
  border: 1px solid rgba(92, 226, 255, 0.42);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.82%, rgba(112, 231, 255, 0.2) 49.9% 50.1%, transparent 50.18%),
    linear-gradient(0deg, transparent 49.82%, rgba(154, 119, 255, 0.16) 49.9% 50.1%, transparent 50.18%);
  box-shadow:
    inset 0 0 4rem rgba(35, 189, 255, 0.09),
    0 0 1.8rem rgba(60, 201, 255, 0.18);
  transform: translateZ(-10px) rotateX(64deg) rotateZ(-8deg);
  animation: tutorialLensTurn 18s linear infinite;
}

.tutorial-orb .orb-ring {
  z-index: 2;
  border-radius: 43% 57% 48% 52% / 54% 44% 56% 46%;
  filter: drop-shadow(0 0 0.8rem rgba(65, 213, 255, 0.34));
}

.tutorial-orb .orb-ring-one {
  inset: 3%;
  border: 1px dashed rgba(107, 229, 255, 0.68);
  border-right-color: rgba(158, 102, 255, 0.76);
  transform: rotateX(66deg) rotateZ(0deg);
  animation: tutorialArcOrbit 15s linear infinite;
}

.tutorial-orb .orb-ring-two {
  inset: 23%;
  border: 1.5px solid rgba(132, 111, 255, 0.52);
  border-top-color: rgba(235, 132, 255, 0.84);
  border-left-color: transparent;
  transform: rotateY(58deg) rotateZ(0deg);
  animation: tutorialArcOrbitReverse 11s linear infinite;
}

.tutorial-orb__arc {
  z-index: 2;
  border-radius: 50%;
  border-style: solid;
}

.tutorial-orb__arc--outer {
  inset: 1%;
  border-width: 2px 0 0;
  border-color: rgba(104, 230, 255, 0.72) transparent transparent;
  filter: drop-shadow(0 0 0.65rem rgba(54, 202, 255, 0.6));
  animation: tutorialArcOuter 13s linear infinite;
}

.tutorial-orb__arc--inner {
  inset: 29%;
  border-width: 0 2px 2px 0;
  border-color: transparent rgba(219, 121, 255, 0.72) rgba(219, 121, 255, 0.72) transparent;
  filter: drop-shadow(0 0 0.7rem rgba(194, 99, 255, 0.54));
  animation: tutorialArcInner 8s linear infinite reverse;
}

.tutorial-orb__scan {
  top: 19%;
  left: 22%;
  z-index: 4;
  width: 56%;
  height: 1px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(144, 241, 255, 0.94), transparent);
  box-shadow: 0 0 1.2rem rgba(69, 211, 255, 0.82);
  transform: translate3d(0, 0, 0);
  opacity: 0;
  will-change: transform, opacity;
  animation: tutorialScan 5.4s cubic-bezier(0.3, 0, 0.7, 1) infinite;
}

.tutorial-orb__track {
  inset: 7%;
  z-index: 3;
  animation: tutorialTrackTurn 24s linear infinite;
}

.tutorial-orb__track i {
  position: absolute;
  width: 1.15rem;
  height: 0.28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(91, 224, 255, 0.92), rgba(170, 102, 255, 0.78));
  box-shadow: 0 0 0.8rem rgba(78, 210, 255, 0.58);
}

.tutorial-orb__track i:nth-child(1) { top: 2%; left: 48%; rotate: 8deg; }
.tutorial-orb__track i:nth-child(2) { top: 26%; right: 1%; rotate: 82deg; }
.tutorial-orb__track i:nth-child(3) { right: 7%; bottom: 13%; rotate: 142deg; }
.tutorial-orb__track i:nth-child(4) { bottom: 2%; left: 38%; rotate: 188deg; }
.tutorial-orb__track i:nth-child(5) { left: 1%; bottom: 31%; rotate: 264deg; }
.tutorial-orb__track i:nth-child(6) { top: 14%; left: 9%; rotate: 318deg; }

.tutorial-orb .orb-core {
  inset: 27%;
  z-index: 1;
  background: radial-gradient(circle, rgba(90, 225, 255, 0.22), rgba(105, 85, 255, 0.11) 46%, transparent 72%);
  box-shadow: inset 0 0 3.6rem rgba(108, 196, 255, 0.18);
  animation: tutorialCoreBreath 4.6s ease-in-out infinite;
}

.tutorial-orb-face {
  width: 62%;
  height: 80%;
  filter:
    drop-shadow(0 1.7rem 1.25rem rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 1.05rem rgba(62, 205, 255, 0.68))
    drop-shadow(0 0 2.2rem rgba(128, 86, 255, 0.28));
  animation: tutorialFaceRead 6.8s ease-in-out infinite;
}

.tutorial-orb__badge {
  z-index: 5;
  display: grid;
  min-width: 4.7rem;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(137, 229, 255, 0.28);
  border-radius: 1rem;
  color: #eafcff;
  background: linear-gradient(145deg, rgba(30, 117, 179, 0.22), rgba(86, 55, 173, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 1.6rem rgba(65, 199, 255, 0.17);
  backdrop-filter: blur(8px) saturate(1.2);
  transform: translateZ(42px);
}

.tutorial-orb__badge b {
  font-size: 0.95rem;
  line-height: 1;
}

.tutorial-orb__badge small {
  margin-top: 0.24rem;
  color: rgba(180, 229, 255, 0.7);
  font-size: 0.52rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.tutorial-orb__badge--count {
  top: 13%;
  right: 3%;
  animation: tutorialBadgeOne 5.8s ease-in-out infinite;
}

.tutorial-orb__badge--mode {
  left: 1%;
  bottom: 18%;
  animation: tutorialBadgeTwo 6.4s ease-in-out infinite;
}

/* ── Projets : réacteur blueprint hexagonal / laboratoire numérique ───── */
.project-console {
  border-radius: 18%;
  perspective: 1050px;
  animation: projectRigFloat 8.6s cubic-bezier(0.42, 0.08, 0.25, 1) infinite;
}

.project-console::before {
  inset: 5%;
  border-radius: 0;
  clip-path: polygon(25% 4%, 75% 4%, 98% 50%, 75% 96%, 25% 96%, 2% 50%);
  background:
    radial-gradient(circle at 36% 28%, rgba(226, 255, 250, 0.38), transparent 12%),
    conic-gradient(from 18deg, rgba(42, 237, 213, 0.48), rgba(41, 122, 255, 0.2), rgba(152, 74, 255, 0.3), rgba(255, 196, 69, 0.34), rgba(42, 237, 213, 0.48));
  filter: blur(1.9rem) saturate(1.28);
  opacity: 0.86;
  animation: projectReactorBreath 7.2s ease-in-out infinite;
}

.project-console::after {
  inset: 12%;
  border: 1px solid rgba(103, 240, 222, 0.3);
  border-radius: 0;
  clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%);
  background:
    linear-gradient(145deg, rgba(53, 231, 218, 0.08), rgba(87, 78, 220, 0.05) 55%, rgba(255, 184, 63, 0.08)),
    rgba(3, 15, 29, 0.18);
  box-shadow:
    inset 0 0 3.8rem rgba(41, 212, 216, 0.12),
    0 0 3.2rem rgba(102, 67, 229, 0.12);
  transform: translateZ(-20px);
}

.project-console .console-halo,
.project-console__mesh,
.project-console__axis,
.project-console__scanner {
  position: absolute;
  pointer-events: none;
}

.project-console .console-halo {
  inset: 1%;
  border-radius: 0;
  clip-path: polygon(24% 1%, 76% 1%, 100% 50%, 76% 99%, 24% 99%, 0 50%);
  background: conic-gradient(from 0deg, transparent 0 8%, rgba(68, 244, 222, 0.7) 9% 10%, transparent 11% 31%, rgba(125, 92, 255, 0.64) 32% 33%, transparent 34% 58%, rgba(255, 191, 68, 0.62) 59% 60%, transparent 61% 83%, rgba(68, 244, 222, 0.7) 84% 85%, transparent 86%);
  opacity: 0.72;
  filter: drop-shadow(0 0 0.85rem rgba(62, 226, 215, 0.42));
  animation: projectHaloTurn 28s linear infinite;
}

.project-console__mesh {
  inset: 17%;
  z-index: 1;
  clip-path: polygon(25% 3%, 75% 3%, 98% 50%, 75% 97%, 25% 97%, 2% 50%);
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(88, 231, 220, 0.13) 49.9% 50.1%, transparent 50.25%),
    linear-gradient(0deg, transparent 49.75%, rgba(117, 102, 255, 0.11) 49.9% 50.1%, transparent 50.25%);
  background-size: 2.2rem 2.2rem;
  opacity: 0.72;
  transform: translateZ(-8px);
}

.project-console__axis {
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(86, 238, 220, 0.5), transparent);
  box-shadow: 0 0 0.7rem rgba(61, 220, 214, 0.3);
  opacity: 0.6;
}

.project-console__axis--x {
  top: 50%;
  left: 8%;
  width: 84%;
  height: 1px;
}

.project-console__axis--y {
  top: 8%;
  left: 50%;
  width: 1px;
  height: 84%;
  background: linear-gradient(180deg, transparent, rgba(127, 101, 255, 0.46), transparent);
}

.project-console .console-ring {
  border-radius: 18%;
  filter: drop-shadow(0 0 0.7rem rgba(61, 222, 212, 0.35));
}

.project-console .console-ring-one {
  inset: 7%;
  border: 1px solid rgba(79, 235, 219, 0.62);
  clip-path: polygon(25% 2%, 75% 2%, 98% 50%, 75% 98%, 25% 98%, 2% 50%);
  transform: rotateZ(0deg) scale(1);
  animation: projectFrameTurn 24s linear infinite;
}

.project-console .console-ring-two {
  inset: 21%;
  border: 1px dashed rgba(144, 95, 255, 0.68);
  border-radius: 24%;
  transform: rotateZ(45deg) scale(1);
  animation: projectFrameCounterTurn 17s linear infinite;
}

.project-console .console-ring-three {
  inset: 30%;
  border: 1px solid rgba(255, 190, 72, 0.46);
  border-radius: 50%;
  transform: rotateX(68deg) rotateZ(0deg);
  animation: projectCoreOrbit 10s linear infinite;
}

.project-console__scanner {
  top: 18%;
  left: 21%;
  z-index: 4;
  width: 58%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(152, 255, 239, 0.96), transparent);
  box-shadow: 0 0 1rem rgba(69, 239, 221, 0.78);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation: projectScan 4.9s cubic-bezier(0.32, 0, 0.68, 1) infinite;
}

.project-console .console-face {
  width: 60%;
  height: 80%;
  filter:
    drop-shadow(0 1.8rem 1.35rem rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 1.05rem rgba(49, 221, 211, 0.66))
    drop-shadow(0 0 2.5rem rgba(119, 73, 224, 0.24));
  animation: projectFaceLock 7.4s ease-in-out infinite;
}

.project-console .console-node {
  width: 0.62rem;
  background: #d9fff9;
  box-shadow:
    0 0 0 0.36rem rgba(52, 232, 217, 0.1),
    0 0 1.2rem rgba(63, 239, 220, 0.8);
  animation: projectNodeData 2.9s ease-in-out infinite;
}

.project-console .node-one { top: 12%; left: 31%; }
.project-console .node-two { top: 47%; right: 4%; animation-delay: -0.9s; }
.project-console .node-three { left: 16%; bottom: 17%; animation-delay: -1.8s; }

.project-console .console-readout {
  min-width: 3.7rem;
  min-height: 2.15rem;
  border-color: rgba(100, 236, 220, 0.24);
  border-radius: 0.75rem 0.75rem 0.75rem 0.18rem;
  color: rgba(222, 255, 249, 0.92);
  background: linear-gradient(135deg, rgba(34, 160, 153, 0.2), rgba(63, 48, 135, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 1.2rem rgba(45, 219, 207, 0.14);
  animation: projectReadoutFloat 5.2s ease-in-out infinite;
}

.project-console .readout-one { top: 7%; right: 11%; }
.project-console .readout-two { left: 1%; top: 45%; animation-delay: -1.7s; }
.project-console .readout-three { right: 11%; bottom: 7%; animation-delay: -3.4s; }

/* ── Contacts : antenne quantique / réseau de communication ───────────── */
.contact-console {
  perspective: 1000px;
  animation: contactArrayFloat 9.2s cubic-bezier(0.44, 0.04, 0.24, 1) infinite;
}

.contact-console::before {
  inset: 3%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(255, 242, 215, 0.34), transparent 12%),
    radial-gradient(circle, rgba(50, 213, 255, 0.3), rgba(90, 84, 231, 0.18) 42%, rgba(255, 153, 63, 0.12) 64%, transparent 72%);
  filter: blur(1.85rem) saturate(1.2);
  opacity: 0.84;
  animation: contactFieldBreath 6.8s ease-in-out infinite;
}

.contact-console::after {
  inset: 16% 10%;
  border: 1px solid rgba(103, 222, 255, 0.24);
  border-radius: 50% 42% 50% 42%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.11), transparent 18%),
    linear-gradient(145deg, rgba(49, 188, 255, 0.08), rgba(105, 75, 214, 0.05) 56%, rgba(255, 172, 75, 0.08));
  box-shadow:
    inset 0 0 3.6rem rgba(52, 191, 255, 0.12),
    0 0 3rem rgba(255, 155, 57, 0.08);
  transform: translateZ(-16px) rotate(-3deg);
  animation: contactLensDrift 12s ease-in-out infinite;
}

.contact-console__radar,
.contact-console__wave,
.contact-console__beacon,
.contact-console__waveform,
.contact-console__status {
  position: absolute;
  pointer-events: none;
}

.contact-console__radar {
  inset: 4%;
  z-index: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 82%, rgba(77, 220, 255, 0.03) 87%, rgba(99, 230, 255, 0.36) 98%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 18%, #000 19% 72%, transparent 73%);
  mask-image: radial-gradient(circle, transparent 0 18%, #000 19% 72%, transparent 73%);
  filter: drop-shadow(0 0 0.8rem rgba(58, 207, 255, 0.34));
  opacity: 0.92;
  animation: contactRadarTurn 7.8s linear infinite;
}

.contact-console__wave {
  inset: 24%;
  z-index: 2;
  border: 1.25px solid rgba(96, 220, 255, 0.58);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72);
  will-change: transform, opacity;
  animation: contactWave 4.8s cubic-bezier(0.2, 0.6, 0.2, 1) infinite;
}

.contact-console__wave--two {
  border-color: rgba(164, 111, 255, 0.4);
  animation-delay: -1.6s;
}

.contact-console__wave--three {
  border-color: rgba(255, 176, 78, 0.42);
  animation-delay: -3.2s;
}

.contact-console .console-halo {
  inset: 6%;
  background: conic-gradient(from 90deg, transparent 0 12%, rgba(74, 218, 255, 0.42) 13% 15%, transparent 16% 43%, rgba(255, 177, 76, 0.4) 44% 46%, transparent 47% 72%, rgba(164, 104, 255, 0.42) 73% 75%, transparent 76%);
  filter: drop-shadow(0 0 1rem rgba(63, 201, 255, 0.3));
  animation: contactHaloCounterTurn 26s linear infinite;
}

.contact-console .console-ring {
  border-radius: 50%;
  filter: drop-shadow(0 0 0.65rem rgba(61, 200, 255, 0.32));
}

.contact-console .console-ring-one {
  inset: 4% 15%;
  border: 1px solid rgba(72, 217, 255, 0.58);
  border-left-color: transparent;
  transform: rotateY(66deg) rotateZ(0deg);
  animation: contactOrbitVertical 12s linear infinite;
}

.contact-console .console-ring-two {
  inset: 18% 5%;
  border: 1px dashed rgba(255, 177, 75, 0.56);
  border-top-color: transparent;
  transform: rotateX(68deg) rotateZ(0deg);
  animation: contactOrbitHorizontal 15s linear infinite reverse;
}

.contact-console .console-ring-three {
  inset: 28%;
  border: 1px solid rgba(167, 112, 255, 0.45);
  border-right-color: transparent;
  transform: rotateZ(0deg) scale(1);
  animation: contactOrbitCore 9s linear infinite;
}

.contact-console .console-face {
  width: 61%;
  height: 81%;
  filter:
    drop-shadow(0 1.8rem 1.35rem rgba(0, 0, 0, 0.43))
    drop-shadow(0 0 1.05rem rgba(61, 198, 255, 0.64))
    drop-shadow(0 0 2.35rem rgba(255, 165, 65, 0.22));
  animation: contactFaceReceive 8.2s ease-in-out infinite;
}

.contact-console .signal-line {
  z-index: 4;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(84, 220, 255, 0.94), rgba(255, 180, 80, 0.7), transparent);
  box-shadow: 0 0 0.85rem rgba(65, 207, 255, 0.44);
  animation: contactSignal 3.4s cubic-bezier(0.25, 0, 0.3, 1) infinite;
}

.contact-console .signal-one { top: 24%; left: 7%; width: 38%; rotate: 18deg; }
.contact-console .signal-two { top: 49%; right: 0; width: 43%; rotate: -13deg; animation-delay: -1.15s; }
.contact-console .signal-three { bottom: 21%; left: 12%; width: 45%; rotate: -20deg; animation-delay: -2.3s; }

.contact-console__waveform {
  left: 4%;
  bottom: 11%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.22rem;
  width: 6.1rem;
  height: 2.45rem;
  padding: 0.45rem 0.58rem;
  border: 1px solid rgba(94, 218, 255, 0.24);
  border-radius: 1rem 1rem 1rem 0.28rem;
  background: linear-gradient(145deg, rgba(23, 115, 170, 0.2), rgba(78, 50, 143, 0.14));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 1.4rem rgba(56, 194, 255, 0.14);
  backdrop-filter: blur(8px) saturate(1.18);
  animation: contactTelemetryFloat 6.2s ease-in-out infinite;
}

.contact-console__waveform i {
  flex: 1;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(180deg, #d9fbff, #4ddcff 54%, #a369ff);
  box-shadow: 0 0 0.55rem rgba(78, 217, 255, 0.48);
  transform-origin: center;
  animation: contactWaveBar 1.55s ease-in-out infinite;
}

.contact-console__waveform i:nth-child(2) { animation-delay: -0.22s; }
.contact-console__waveform i:nth-child(3) { animation-delay: -0.44s; }
.contact-console__waveform i:nth-child(4) { animation-delay: -0.66s; }
.contact-console__waveform i:nth-child(5) { animation-delay: -0.88s; }
.contact-console__waveform i:nth-child(6) { animation-delay: -1.1s; }
.contact-console__waveform i:nth-child(7) { animation-delay: -1.32s; }

.contact-console__status {
  top: 13%;
  right: 3%;
  z-index: 5;
  display: grid;
  min-width: 4.5rem;
  padding: 0.5rem 0.68rem;
  border: 1px solid rgba(255, 190, 101, 0.24);
  border-radius: 0.35rem 1rem 1rem;
  color: #fff4dd;
  background: linear-gradient(145deg, rgba(174, 91, 39, 0.16), rgba(57, 57, 143, 0.16));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 1.4rem rgba(255, 170, 73, 0.1);
  backdrop-filter: blur(8px) saturate(1.18);
  animation: contactTelemetryFloat 6.8s ease-in-out infinite reverse;
}

.contact-console__status b {
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.08em;
}

.contact-console__status small {
  margin-top: 0.24rem;
  color: rgba(255, 213, 155, 0.72);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.contact-console__beacon {
  z-index: 5;
  width: 1.05rem;
  aspect-ratio: 1;
  border: 1px solid rgba(161, 238, 255, 0.42);
  border-radius: 50%;
  background: rgba(8, 35, 57, 0.6);
  box-shadow: 0 0 1rem rgba(64, 211, 255, 0.26);
  animation: contactBeaconFloat 5.6s ease-in-out infinite;
}

.contact-console__beacon i {
  position: absolute;
  inset: 30%;
  border-radius: inherit;
  background: #dffbff;
  box-shadow: 0 0 0.8rem rgba(76, 222, 255, 0.92);
  animation: contactBeaconPulse 2.4s ease-in-out infinite;
}

.contact-console__beacon--one { top: 11%; left: 25%; }
.contact-console__beacon--two { top: 40%; right: 2%; animation-delay: -1.8s; }
.contact-console__beacon--two i { background: #ffe0a8; box-shadow: 0 0 0.8rem rgba(255, 177, 76, 0.9); }
.contact-console__beacon--three { left: 17%; bottom: 12%; animation-delay: -3.6s; }
.contact-console__beacon--three i { background: #ecdfff; box-shadow: 0 0 0.8rem rgba(167, 112, 255, 0.88); }

@keyframes tutorialRigFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(-0.7deg); }
  34% { transform: translate3d(0.3rem, -0.55rem, 0) rotateZ(0.8deg); }
  68% { transform: translate3d(-0.22rem, -0.2rem, 0) rotateZ(-0.2deg); }
}

@keyframes tutorialNebula {
  0%, 100% { transform: scale(0.92) rotate(-5deg); opacity: 0.68; }
  50% { transform: scale(1.08) rotate(7deg); opacity: 0.96; }
}

@keyframes tutorialLensMorph {
  0%, 100% { transform: translateZ(-18px) rotate(-2deg) scale(0.98); }
  50% { transform: translateZ(-8px) rotate(2deg) scale(1.025); }
}

@keyframes tutorialLensTurn {
  to { transform: translateZ(-10px) rotateX(64deg) rotateZ(352deg); }
}

@keyframes tutorialArcOrbit {
  to { transform: rotateX(66deg) rotateZ(360deg); }
}

@keyframes tutorialArcOrbitReverse {
  to { transform: rotateY(58deg) rotateZ(-360deg); }
}

@keyframes tutorialArcOuter { to { rotate: 360deg; } }
@keyframes tutorialArcInner { to { rotate: -360deg; } }
@keyframes tutorialTrackTurn { to { rotate: 360deg; } }

@keyframes tutorialScan {
  0%, 8% { transform: translate3d(0, 0, 0); opacity: 0; }
  18%, 82% { opacity: 0.88; }
  94%, 100% { transform: translate3d(0, clamp(10rem, 27vw, 15rem), 0); opacity: 0; }
}

@keyframes tutorialCoreBreath {
  0%, 100% { transform: scale(0.9); opacity: 0.58; }
  50% { transform: scale(1.12); opacity: 0.94; }
}

@keyframes tutorialFaceRead {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 44px) rotateY(-2deg); }
  40% { transform: translate(-50%, -50%) translate3d(0.18rem, -0.4rem, 54px) rotateY(3deg); }
  72% { transform: translate(-50%, -50%) translate3d(-0.12rem, 0.12rem, 48px) rotateY(0deg); }
}

@keyframes tutorialBadgeOne {
  0%, 100% { transform: translate3d(0, 0, 42px) rotate(1deg); }
  50% { transform: translate3d(0, -0.55rem, 52px) rotate(-1deg); }
}

@keyframes tutorialBadgeTwo {
  0%, 100% { transform: translate3d(0, 0, 38px) rotate(-1deg); }
  50% { transform: translate3d(0.25rem, -0.42rem, 48px) rotate(1.2deg); }
}

@keyframes projectRigFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(-1deg); }
  36% { transform: translate3d(0.35rem, -0.5rem, 0) rotateX(1deg) rotateY(2deg); }
  70% { transform: translate3d(-0.24rem, -0.16rem, 0) rotateX(-1deg) rotateY(0deg); }
}

@keyframes projectReactorBreath {
  0%, 100% { transform: scale(0.92); opacity: 0.66; }
  48% { transform: scale(1.07); opacity: 0.96; }
}

@keyframes projectHaloTurn { to { rotate: 360deg; } }
@keyframes projectFrameTurn { to { transform: rotateZ(360deg) scale(1); } }
@keyframes projectFrameCounterTurn { to { transform: rotateZ(-315deg) scale(1); } }
@keyframes projectCoreOrbit { to { transform: rotateX(68deg) rotateZ(360deg); } }

@keyframes projectScan {
  0%, 7% { transform: translate3d(0, 0, 0); opacity: 0; }
  17%, 84% { opacity: 0.9; }
  94%, 100% { transform: translate3d(0, clamp(10rem, 27vw, 15rem), 0); opacity: 0; }
}

@keyframes projectFaceLock {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 48px) rotateY(-3deg); }
  44% { transform: translate(-50%, -50%) translate3d(0.16rem, -0.32rem, 58px) rotateY(3deg); }
  72% { transform: translate(-50%, -50%) translate3d(-0.1rem, 0.12rem, 52px) rotateY(0deg); }
}

@keyframes projectNodeData {
  0%, 100% { transform: scale(0.78); opacity: 0.52; }
  46% { transform: scale(1.22); opacity: 1; }
}

@keyframes projectReadoutFloat {
  0%, 100% { transform: translate3d(0, 0, 38px); }
  50% { transform: translate3d(0, -0.42rem, 48px); }
}

@keyframes contactArrayFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotateZ(0.7deg); }
  32% { transform: translate3d(-0.28rem, -0.46rem, 0) rotateZ(-0.8deg); }
  67% { transform: translate3d(0.24rem, -0.18rem, 0) rotateZ(0.2deg); }
}

@keyframes contactFieldBreath {
  0%, 100% { transform: scale(0.9); opacity: 0.64; }
  50% { transform: scale(1.08); opacity: 0.94; }
}

@keyframes contactLensDrift {
  0%, 100% { transform: translateZ(-16px) rotate(-3deg) scale(0.98); }
  50% { transform: translateZ(-8px) rotate(3deg) scale(1.025); }
}

@keyframes contactRadarTurn { to { rotate: 360deg; } }
@keyframes contactHaloCounterTurn { to { rotate: -360deg; } }

@keyframes contactWave {
  0% { transform: scale(0.68); opacity: 0; }
  16% { opacity: 0.62; }
  82% { opacity: 0.12; }
  100% { transform: scale(2.28); opacity: 0; }
}

@keyframes contactOrbitVertical { to { transform: rotateY(66deg) rotateZ(360deg); } }
@keyframes contactOrbitHorizontal { to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes contactOrbitCore { to { transform: rotateZ(360deg) scale(1); } }

@keyframes contactFaceReceive {
  0%, 100% { transform: translate(-50%, -50%) translate3d(0, 0, 46px) rotateY(2deg); }
  38% { transform: translate(-50%, -50%) translate3d(-0.16rem, -0.38rem, 56px) rotateY(-3deg); }
  70% { transform: translate(-50%, -50%) translate3d(0.12rem, 0.1rem, 50px) rotateY(0deg); }
}

@keyframes contactSignal {
  0%, 100% { transform: scaleX(0.12); opacity: 0; }
  26% { opacity: 0.95; }
  72% { transform: scaleX(1); opacity: 0.74; }
  88% { opacity: 0; }
}

@keyframes contactBeaconFloat {
  0%, 100% { transform: translate3d(0, 0, 34px); }
  50% { transform: translate3d(0, -0.45rem, 46px); }
}

@keyframes contactBeaconPulse {
  0%, 100% { transform: scale(0.68); opacity: 0.58; }
  50% { transform: scale(1.28); opacity: 1; }
}

@keyframes contactTelemetryFloat {
  0%, 100% { transform: translate3d(0, 0, 38px); }
  50% { transform: translate3d(0.18rem, -0.48rem, 48px); }
}

@keyframes contactWaveBar {
  0%, 100% { transform: scaleY(0.28); opacity: 0.46; }
  50% { transform: scaleY(1); opacity: 1; }
}

.inner-section {
  width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
  max-width: var(--page-interface-width);
  margin: 0 auto;
  padding: 5.4rem 0;
  content-visibility: auto;
  contain-intrinsic-size: 760px;
}

body.project-page #projets-actifs {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

.section-heading {
  display: grid;
  gap: 0.8rem;
  max-width: 48rem;
  margin-bottom: 1.6rem;
}

.section-heading.compact {
  margin: 0;
}

.section-heading h2,
.lab-dashboard h2,
.contact-manifest h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(2.2rem, 4.6vw, 3.9rem);
  line-height: 1.04;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.22);
  text-wrap: balance;
}

.section-heading p,
.lab-dashboard p,
.contact-manifest p,
.contact-manifest li {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.72;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.2rem;
  border-radius: 999px;
}

.showcase-grid,
.bundle-grid,
.timeline-grid,
.channel-grid,
.dashboard-grid {
  display: grid;
  gap: 1rem;
}

.showcase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.showcase-card,
.timeline-card,
.bundle-card,
.channel-card,
.dashboard-panel,
.contact-form,
.message-preview,
.lab-dashboard,
.contact-manifest {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--liquid-glass-panel-radius);
  background:
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 28%), rgba(var(--scene-a, 32, 132, 255), 0.14), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.034)),
    rgba(4, 9, 22, 0.68);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.25);
}

.showcase-card::before,
.timeline-card::before,
.bundle-card::before,
.channel-card::before,
.dashboard-panel::before,
.contact-form::before,
.message-preview::before,
.lab-dashboard::before,
.contact-manifest::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 26%, rgba(255, 255, 255, 0.08), transparent 43%),
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 28%), rgba(255, 255, 255, 0.13), transparent 18rem);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 260ms ease;
}

.showcase-card::after,
.timeline-card::after,
.bundle-card::after,
.channel-card::after,
.dashboard-panel::after,
.contact-form::after,
.message-preview::after,
.lab-dashboard::after,
.contact-manifest::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(var(--scene-a, 32, 132, 255), 0.42), transparent 36%, rgba(var(--scene-b, 255, 155, 49), 0.38));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0.5;
}

.tilt-card {
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease, background 260ms ease;
}

.tilt-card:hover,
.tilt-card:focus-within {
  border-color: rgba(var(--scene-a, 32, 132, 255), 0.36);
  box-shadow:
    0 2rem 4.8rem rgba(0, 0, 0, 0.38),
    0 0 3.2rem rgba(var(--scene-a, 32, 132, 255), 0.24),
    0 0 4rem rgba(var(--scene-b, 255, 155, 49), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-0.45rem);
}

.tilt-card:hover::before,
.tilt-card:focus-within::before {
  opacity: 1;
}

.showcase-card {
  display: grid;
  grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.1fr);
  gap: 1rem;
  min-height: 24rem;
  padding: 1rem;
}

.showcase-card.is-hidden {
  display: none;
}

.showcase-media {
  position: relative;
  z-index: 1;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--liquid-glass-inner-radius);
  background: rgba(3, 6, 18, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1rem 2.4rem rgba(0, 0, 0, 0.28);
}

.showcase-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 36%);
  transform: translateX(-100%);
  mix-blend-mode: screen;
  animation: mediaScan 5.2s ease-in-out infinite;
  pointer-events: none;
}

.showcase-media img {
  width: 100%;
  height: 100%;
  min-height: 18rem;
  object-fit: cover;
  transform: translate3d(var(--media-x, 0), var(--media-y, 0), 0) scale(1.035);
  transition: transform 320ms cubic-bezier(0.2, 0.85, 0.18, 1), filter 320ms ease;
  filter: saturate(1.1) contrast(1.05);
}

.showcase-body {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 0.82rem;
  padding: 0.5rem;
}

.card-number {
  margin: 0;
  color: var(--amber);
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.showcase-body h3,
.timeline-card h3,
.bundle-card h3,
.channel-card h3,
.dashboard-panel h3,
.message-preview h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
  text-wrap: balance;
}

.showcase-body p,
.timeline-card p,
.bundle-card p,
.channel-card p,
.dashboard-panel p,
.message-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.66;
}

.project-meter {
  position: relative;
  overflow: hidden;
  height: 0.58rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.09);
}

.project-meter span {
  display: block;
  width: var(--meter);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--amber));
  box-shadow: 0 0 1.2rem rgba(var(--scene-a, 32, 132, 255), 0.48);
  animation: meterGlow 3s ease-in-out infinite;
}

.tag-list,
.contact-manifest ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-list li {
  display: inline-flex;
  align-items: center;
  min-height: 2.05rem;
  padding: 0 0.68rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(247, 251, 255, 0.84);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.78rem;
  font-weight: 850;
}

.lab-dashboard,
.contact-manifest {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-panel,
.timeline-card,
.bundle-card,
.channel-card {
  padding: 1.2rem;
}

.panel-value,
.bundle-card strong {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--text);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.92;
  font-weight: 950;
  letter-spacing: 0;
  background: linear-gradient(90deg, #effdff, var(--cyan) 35%, var(--amber) 78%, #fff2d7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.timeline-grid,
.bundle-grid,
.channel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shop-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
  gap: 1rem;
  align-items: start;
}















.bundle-card.featured {
  border-color: rgba(var(--scene-b, 255, 155, 49), 0.34);
  box-shadow:
    0 2rem 4.8rem rgba(0, 0, 0, 0.38),
    0 0 3rem rgba(var(--scene-b, 255, 155, 49), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.contact-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  gap: 1rem;
  align-items: stretch;
}

.contact-form {
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.contact-form label {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
}

.contact-form .full-field,
.contact-form .cta,
.form-status {
  grid-column: 1 / -1;
}

.contact-form label span {
  color: rgba(247, 251, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 850;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.82rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: var(--text);
  background: rgba(2, 6, 16, 0.74);
  font: inherit;
  font-size: 0.96rem;
  line-height: 1.4;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: rgba(var(--scene-a, 32, 132, 255), 0.46);
  background: rgba(2, 8, 20, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 1.3rem rgba(var(--scene-a, 32, 132, 255), 0.14);
}

.form-status {
  min-height: 1.4rem;
  margin: 0;
  color: rgba(247, 251, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.5;
}

.message-preview {
  display: grid;
  align-content: space-between;
  gap: 1.2rem;
  min-height: 100%;
  padding: clamp(1rem, 2.4vw, 1.5rem);
}

.preview-message {
  min-height: 10rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--scene-a, 32, 132, 255), 0.08), rgba(var(--scene-b, 255, 155, 49), 0.05)),
    rgba(255, 255, 255, 0.04);
}

.preview-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem;
  color: rgba(247, 251, 255, 0.78);
  font-size: 0.85rem;
  font-weight: 800;
}

.channel-card {
  display: grid;
  gap: 0.75rem;
  color: inherit;
}

.channel-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #02101c;
  background: linear-gradient(135deg, var(--cyan), var(--amber));
  font-size: 1.4rem;
  font-weight: 950;
  box-shadow: 0 0 1.4rem rgba(var(--scene-a, 32, 132, 255), 0.22);
}

.contact-manifest {
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  align-items: start;
}

.contact-manifest ul {
  display: grid;
  gap: 0.7rem;
}

.contact-manifest li {
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.coming-soon-stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-height) + 4rem) 0 5rem;
}

.coming-soon-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(1.2rem, 3vw, 2rem);
  width: min(calc(100% - var(--home-interface-gutter) - var(--home-interface-gutter)), var(--home-interface-width));
  max-width: var(--home-interface-width);
  min-height: min(42rem, calc(100svh - var(--nav-height) - 6rem));
  padding: clamp(1.4rem, 4vw, 4rem);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.034)),
    rgba(4, 9, 22, 0.66);
  box-shadow:
    0 1.8rem 4.8rem rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(22px) saturate(1.32);
  transition: transform 420ms cubic-bezier(0.16, 1.16, 0.24, 1), border-color 260ms ease, box-shadow 260ms ease;
}

.coming-soon-card::before,
.coming-soon-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.coming-soon-card::before {
  inset: -20%;
  background:
    linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), 0.18), transparent 42%, rgba(var(--scene-b, 255, 155, 49), 0.14), transparent),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4.4rem);
  opacity: 0.58;
  animation: comingSoonField 8s linear infinite;
}

.coming-soon-card::after {
  inset: 7%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 38% 62% 56% 44%;
  animation: comingSoonFrame 7.4s linear infinite;
}

.coming-soon-card:hover,
.coming-soon-card:focus-within {
  transform: translateY(-0.45rem) scale(1.01);
  border-color: rgba(var(--scene-b, 255, 155, 49), 0.46);
  box-shadow:
    0 2.2rem 5.4rem rgba(0, 0, 0, 0.42),
    0 0 3rem rgba(var(--scene-b, 255, 155, 49), 0.2),
    0 0 4.4rem rgba(var(--scene-a, 32, 132, 255), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* ═══ Boutique — coffre de lumière interactif ════════════════════════════
   Scène 3D pilotée au pointeur (souris comme doigt) : --vx / --vy sont
   posées par le JS et inclinent tout le gyroscope, ce qui donne une vraie
   sensation de volume manipulable. Le gemme est fait de six plans de verre
   répartis tous les 30° : en rotation, leurs arêtes se croisent et l'œil
   reconstruit un solide facetté.
   Toutes les rotations font 360° pile, les respirations reviennent à leur
   valeur initiale : la scène ne « recommence » jamais visiblement. */

.shop-vault {
  --vx: 0deg;
  --vy: 0deg;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: clamp(14rem, 40vw, 27rem);
  aspect-ratio: 1;
  perspective: 900px;
  touch-action: pan-y;
  cursor: grab;
}

.shop-vault:active {
  cursor: grabbing;
}

.shop-vault__glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--scene-b, 255, 155, 49), 0.42), rgba(var(--scene-c, 47, 107, 231), 0.18) 46%, transparent 70%);
  filter: blur(2rem);
  animation: vaultGlow 6.1s ease-in-out infinite;
  pointer-events: none;
}

.shop-vault__stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Inclinaison suivie du pointeur, amortie par la transition. */
  transform: rotateX(var(--vx)) rotateY(var(--vy));
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.shop-vault__gyro {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.shop-vault__ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid rgba(var(--scene-b, 255, 155, 49), 0.62);
  box-shadow:
    0 0 1.8rem rgba(var(--scene-b, 255, 155, 49), 0.34),
    inset 0 0 1.8rem rgba(var(--scene-a, 32, 132, 255), 0.16);
}

.shop-vault__ring--a {
  animation: vaultRingA 12s linear infinite;
}

.shop-vault__ring--b {
  inset: 15%;
  border-color: rgba(var(--scene-a, 32, 132, 255), 0.6);
  animation: vaultRingB 9s linear infinite reverse;
}

.shop-vault__ring--c {
  inset: 24%;
  border-color: rgba(var(--scene-c, 47, 107, 231), 0.58);
  animation: vaultRingC 16s linear infinite;
}

/* Gemme : six plans taillés en silhouette de brillant, répartis tous les 30°.
   En rotation, leurs arêtes se croisent et l'œil reconstruit un solide
   facetté — beaucoup plus convaincant qu'une vraie géométrie coûteuse. */
.shop-vault__gem {
  position: absolute;
  inset: 25%;
  transform-style: preserve-3d;
  animation: vaultGemSpin 18s linear infinite;
}

.shop-vault__gem i {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 82% 26%, 68% 74%, 50% 100%, 32% 74%, 18% 26%);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.05) 46%),
    linear-gradient(30deg, rgba(var(--scene-b, 255, 155, 49), 0.6), rgba(var(--scene-c, 47, 107, 231), 0.28) 52%, rgba(var(--scene-a, 32, 132, 255), 0.5));
  filter: drop-shadow(0 0 0.7rem rgba(255, 205, 120, 0.55));
  opacity: 0.72;
}

.shop-vault__gem i:nth-child(1) { transform: rotateY(0deg); }
.shop-vault__gem i:nth-child(2) { transform: rotateY(30deg); }
.shop-vault__gem i:nth-child(3) { transform: rotateY(60deg); }
.shop-vault__gem i:nth-child(4) { transform: rotateY(90deg); }
.shop-vault__gem i:nth-child(5) { transform: rotateY(120deg); }
.shop-vault__gem i:nth-child(6) { transform: rotateY(150deg); }

.shop-vault__spark {
  position: absolute;
  inset: 2%;
  transform-style: preserve-3d;
}

.shop-vault__spark i {
  position: absolute;
  top: calc(50% - 0.28rem);
  left: -0.28rem;
  width: 0.56rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff6df;
  box-shadow:
    0 0 0.8rem 0.12rem rgba(var(--scene-b, 255, 155, 49), 0.95),
    0 0 2rem 0.4rem rgba(255, 63, 134, 0.45);
}

.shop-vault__spark--1 { animation: vaultSparkA 7s linear infinite; }
.shop-vault__spark--2 { animation: vaultSparkB 11s linear infinite reverse; }
.shop-vault__spark--3 { animation: vaultSparkC 15s linear infinite; }

.shop-vault__floor {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 78%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--scene-b, 255, 155, 49), 0.4), transparent 70%);
  filter: blur(0.7rem);
  animation: vaultFloor 6.1s ease-in-out infinite;
  pointer-events: none;
}

.shop-vault__hint {
  position: absolute;
  bottom: -3.4rem;
  margin: 0;
  color: rgba(185, 200, 220, 0.72);
  font-size: 0.8rem;
  text-align: center;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.shop-vault:hover .shop-vault__hint,
.shop-vault.is-vault-touched .shop-vault__hint {
  opacity: 1;
}

/* Impulsion au clic / au toucher. */
.shop-vault.is-vault-pulsing .shop-vault__glow {
  animation: vaultBurst 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coming-soon-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: transparent;
  font-size: clamp(3.8rem, 14vw, 12rem);
  font-weight: 950;
  line-height: 0.82;
  letter-spacing: 0;
  text-align: center;
  /* Motif répétitif : la couleur de fin est celle du début, et l'animation
     décale d'exactement une période — donc aucune reprise perceptible. */
  --coming-tile: 2.6em;
  background-image: repeating-linear-gradient(
    90deg,
    #fffaf0 0,
    var(--amber) calc(var(--coming-tile) * 0.24),
    #ffffff calc(var(--coming-tile) * 0.5),
    var(--cyan) calc(var(--coming-tile) * 0.76),
    #fffaf0 var(--coming-tile)
  );
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 1rem rgba(var(--scene-b, 255, 155, 49), 0.44))
    drop-shadow(0 0 2.4rem rgba(var(--scene-a, 32, 132, 255), 0.18));
  animation: comingSoonTitle 4.6s linear infinite, comingSoonTitleFloat 5s ease-in-out infinite;
  transition: transform 320ms cubic-bezier(0.16, 1.18, 0.24, 1), filter 260ms ease;
}

.coming-soon-card:hover .coming-soon-title,
.coming-soon-card:focus-within .coming-soon-title {
  transform: scale(1.045) rotateX(8deg);
  filter:
    drop-shadow(0 0 1.4rem rgba(var(--scene-b, 255, 155, 49), 0.62))
    drop-shadow(0 0 3.2rem rgba(var(--scene-a, 32, 132, 255), 0.32));
}

.cv-orbital-card,
.cv-panel,
.cv-timeline {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background:
    radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 28%), rgba(var(--scene-a, 32, 132, 255), 0.14), transparent 18rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.034)),
    rgba(4, 9, 22, 0.68);
  box-shadow:
    0 1.4rem 3rem rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(1.25);
}

.cv-orbital-card {
  display: grid;
  place-items: center;
  min-height: min(30rem, 72vw);
}

.cv-orbital-card__ring,
.cv-orbital-card__pulse {
  position: absolute;
  pointer-events: none;
}

.cv-orbital-card__ring {
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 36%;
  animation: cvRingTurn 8s linear infinite;
}

.cv-orbital-card__pulse {
  width: 32%;
  aspect-ratio: 1;
  border-radius: 1.6rem;
  background: linear-gradient(135deg, var(--cyan), var(--amber));
  box-shadow: 0 0 2.4rem rgba(var(--scene-a, 32, 132, 255), 0.32);
  animation: cvPulse 3s ease-in-out infinite;
}

.cv-orbital-card__chip {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 4.2rem;
  min-height: 2.4rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(248, 252, 255, 0.92);
  background: rgba(255, 255, 255, 0.065);
  font-weight: 900;
  box-shadow: 0 0 1.2rem rgba(var(--scene-a, 32, 132, 255), 0.14);
}

.cv-orbital-card__chip:nth-of-type(2) {
  transform: translate(-5.8rem, -5.2rem);
}

.cv-orbital-card__chip:nth-of-type(3) {
  transform: translate(6rem, -1rem);
}

.cv-orbital-card__chip:nth-of-type(4) {
  transform: translate(-1.2rem, 5.7rem);
}

.cv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.cv-panel {
  display: grid;
  gap: 0.8rem;
  min-height: 16rem;
  padding: 1.2rem;
}

.cv-panel h3,
.cv-timeline h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.35rem, 2.4vw, 2.2rem);
  line-height: 1.08;
  font-weight: 950;
}

.cv-panel p,
.cv-timeline p,
.cv-timeline li {
  margin: 0;
  color: var(--muted);
  line-height: 1.68;
}

.cv-timeline {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(18rem, 1.08fr);
  gap: 1.2rem;
  padding: clamp(1rem, 2.5vw, 2rem);
}

.cv-timeline ol {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-timeline li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.cv-timeline strong {
  color: var(--text);
}

/* ═══ Mot « Olilap » — boucles infinies, aucun raccord visible ═══════════
   Chaque couche est périodique par construction, donc la reprise du cycle
   est mathématiquement invisible :
   · le dégradé est un repeating-linear-gradient déplacé d'exactement une
     période (--olilap-tile) : l'image d'arrivée est pixel pour pixel celle
     du départ. C'est ce qui manquait avant (on partait de 0% pour finir à
     260% sur un dégradé non répétitif, d'où la coupure nette) ;
   · les transformations reviennent à leur valeur initiale, avec des points
     de passage asymétriques pour éviter l'effet balancier mécanique ;
   · le reflet spéculaire est à opacity 0 au moment exact du bouclage.
   Les durées sont des multiples non entiers entre elles (1.37, 1.91, 2.63…) :
   la superposition des couches ne se réaligne qu'après plusieurs minutes,
   donc l'œil ne perçoit jamais de motif qui se répète. */

.olilap-word {
  --olilap-hue: 188deg;
  --olilap-delay: 0s;
  --olilap-speed: 5.8s;
  --olilap-tile: 7.4em;
  position: relative;
  display: inline-block;
  color: transparent;
  line-height: 1;
  white-space: nowrap;
  vertical-align: baseline;
  background-image: repeating-linear-gradient(
    90deg,
    hsl(var(--olilap-hue) 100% 70%) 0,
    #ffffff calc(var(--olilap-tile) * 0.22),
    hsl(calc(var(--olilap-hue) + 86deg) 96% 70%) calc(var(--olilap-tile) * 0.47),
    #fff4d2 calc(var(--olilap-tile) * 0.71),
    hsl(var(--olilap-hue) 100% 70%) var(--olilap-tile)
  );
  background-repeat: repeat;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0.014em 0 hsl(var(--olilap-hue) 82% 26% / 0.5),
    0 0.028em 0 hsl(var(--olilap-hue) 82% 18% / 0.36),
    0 0.05em 0.035em rgba(2, 6, 16, 0.5);
  isolation: isolate;
  transform: translateZ(0);
  animation:
    olilapFlow var(--olilap-speed) linear infinite var(--olilap-delay),
    olilapAura calc(var(--olilap-speed) * 2.14) ease-in-out infinite var(--olilap-delay),
    olilapBreathe calc(var(--olilap-speed) * 1.37) ease-in-out infinite var(--olilap-delay);
}

.olilap-word::before,
.olilap-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Fantôme coloré : donne le volume, dérive sur un cycle à trois temps. */
.olilap-word::before {
  z-index: -1;
  color: hsl(var(--olilap-hue) 100% 68% / 0.4);
  filter: blur(0.22em);
  animation: olilapGhost calc(var(--olilap-speed) * 1.91) ease-in-out infinite var(--olilap-delay);
}

/* Reflet spéculaire : balayage rare, éteint au moment du bouclage. */
.olilap-word::after {
  z-index: 1;
  color: transparent;
  background-image: linear-gradient(
    102deg,
    transparent 0 34%,
    rgba(255, 255, 255, 0.32) 42%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.32) 58%,
    transparent 66%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: screen;
  animation: olilapGlint calc(var(--olilap-speed) * 2.63) cubic-bezier(0.5, 0, 0.5, 1) infinite var(--olilap-delay);
}

/* Les 8 palettes reprennent toutes la même règle : la couleur posée à 0 est
   rigoureusement celle posée à --olilap-tile, sinon un raccord apparaît. */

.olilap-style-0 {
  font-weight: 950;
  background-image: repeating-linear-gradient(
    90deg,
    #ffffff 0,
    hsl(var(--olilap-hue) 100% 70%) calc(var(--olilap-tile) * 0.26),
    #fff0b8 calc(var(--olilap-tile) * 0.52),
    hsl(var(--olilap-hue) 100% 78%) calc(var(--olilap-tile) * 0.76),
    #ffffff var(--olilap-tile)
  );
}

.olilap-style-1 {
  font-weight: 900;
  background-image: repeating-linear-gradient(
    90deg,
    hsl(var(--olilap-hue) 100% 68%) 0,
    #ffffff calc(var(--olilap-tile) * 0.3),
    hsl(calc(var(--olilap-hue) + 140deg) 96% 68%) calc(var(--olilap-tile) * 0.62),
    #e6fbff calc(var(--olilap-tile) * 0.82),
    hsl(var(--olilap-hue) 100% 68%) var(--olilap-tile)
  );
}

.olilap-style-2 {
  font-weight: 950;
  background-image: repeating-linear-gradient(
    90deg,
    hsl(var(--olilap-hue) 98% 70%) 0,
    #ffffff calc(var(--olilap-tile) * 0.34),
    hsl(calc(var(--olilap-hue) + 215deg) 94% 68%) calc(var(--olilap-tile) * 0.66),
    hsl(var(--olilap-hue) 98% 70%) var(--olilap-tile)
  );
}

.olilap-style-3 {
  font-weight: 880;
  background-image: repeating-linear-gradient(
    90deg,
    #ffffff 0,
    hsl(var(--olilap-hue) 100% 72%) calc(var(--olilap-tile) * 0.14),
    hsl(calc(var(--olilap-hue) + 72deg) 100% 70%) calc(var(--olilap-tile) * 0.3),
    #ffffff calc(var(--olilap-tile) * 0.5),
    hsl(calc(var(--olilap-hue) + 72deg) 100% 70%) calc(var(--olilap-tile) * 0.7),
    hsl(var(--olilap-hue) 100% 72%) calc(var(--olilap-tile) * 0.86),
    #ffffff var(--olilap-tile)
  );
}

.olilap-style-4 {
  font-weight: 950;
  background-image: repeating-linear-gradient(
    90deg,
    hsl(calc(var(--olilap-hue) + 35deg) 100% 68%) 0,
    #ffffff calc(var(--olilap-tile) * 0.28),
    hsl(var(--olilap-hue) 100% 70%) calc(var(--olilap-tile) * 0.58),
    #d8f6ff calc(var(--olilap-tile) * 0.8),
    hsl(calc(var(--olilap-hue) + 35deg) 100% 68%) var(--olilap-tile)
  );
}

.olilap-style-5 {
  font-weight: 900;
  background-image: repeating-linear-gradient(
    90deg,
    hsl(var(--olilap-hue) 100% 72%) 0,
    #ffffff calc(var(--olilap-tile) * 0.18),
    hsl(calc(var(--olilap-hue) + 190deg) 96% 68%) calc(var(--olilap-tile) * 0.52),
    #ffffff calc(var(--olilap-tile) * 0.84),
    hsl(var(--olilap-hue) 100% 72%) var(--olilap-tile)
  );
}

.olilap-style-6 {
  font-weight: 950;
  background-image: repeating-linear-gradient(
    90deg,
    #fff8df 0,
    hsl(var(--olilap-hue) 100% 66%) calc(var(--olilap-tile) * 0.3),
    hsl(calc(var(--olilap-hue) + 118deg) 96% 68%) calc(var(--olilap-tile) * 0.64),
    #fff8df var(--olilap-tile)
  );
}

.olilap-style-7 {
  font-weight: 920;
  background-image: repeating-linear-gradient(
    90deg,
    #ffffff 0,
    hsl(var(--olilap-hue) 100% 74%) calc(var(--olilap-tile) * 0.24),
    hsl(calc(var(--olilap-hue) + 250deg) 96% 70%) calc(var(--olilap-tile) * 0.52),
    hsl(var(--olilap-hue) 100% 74%) calc(var(--olilap-tile) * 0.76),
    #ffffff var(--olilap-tile)
  );
}

/* ═══ CV : « Olilap » en or massif ═══════════════════════════════════════
   Ce qui distingue un métal d'un simple aplat jaune, c'est l'alternance
   rapide entre valeurs très sombres et éclats quasi blancs. Deux couches
   superposées le reproduisent :
     · couche 1, animée : rampe or horizontale répétitive, avec plusieurs
       bandes spéculaires — c'est elle qui « coule » le long des lettres ;
     · couche 2, fixe : modelé vertical du métal (sombre en haut, éclat sur
       la ligne médiane, réflexion chaude rebondie en bas).
   Le mélange `overlay` des deux crée la profondeur du poli.
   La couche 2 est un dégradé purement vertical répété : le décalage
   horizontal de l'animation n'a donc aucun effet dessus, et la boucle reste
   parfaite (cf. keyframes olilapFlow, déplacement d'exactement une période).
   Les !important sont nécessaires : le JS pose --olilap-hue / --olilap-tile
   en style inline pour varier les mots, ce qu'on neutralise ici. */

body.cv-page .olilap-word {
  --olilap-hue: 42deg !important;
  --olilap-tile: 5.6em !important;
  --olilap-swing: 0.22;
  background-image:
    repeating-linear-gradient(
      90deg,
      #c98f26 0,
      #f0c256 calc(var(--olilap-tile) * 0.12),
      #fff9e2 calc(var(--olilap-tile) * 0.24),
      #ffffff calc(var(--olilap-tile) * 0.31),
      #f7d375 calc(var(--olilap-tile) * 0.42),
      #b8801f calc(var(--olilap-tile) * 0.57),
      #f2c962 calc(var(--olilap-tile) * 0.72),
      #fff6cf calc(var(--olilap-tile) * 0.85),
      #c98f26 var(--olilap-tile)
    ),
    linear-gradient(
      180deg,
      #3d2a06 0%,
      #a97a1a 13%,
      #ffeeb8 33%,
      #ffffff 45%,
      #eab948 57%,
      #6d4708 76%,
      #f5d688 100%
    );
  background-size: auto, 100% 100%;
  background-repeat: repeat, repeat;
  /* hard-light conserve les extrêmes de la rampe (noirs profonds ET blancs
     purs) là où overlay les ramenait vers le gris : c'est ce contraste franc
     qui fait lire « métal » plutôt que « jaune plat ». */
  background-blend-mode: hard-light, normal;
  /* Biseau gravé : arête claire en haut, masse sombre en dessous. */
  text-shadow:
    0 -0.012em 0 rgba(255, 245, 205, 0.55),
    0 0.014em 0 #6b4409,
    0 0.028em 0 #452b05,
    0 0.05em 0.04em rgba(0, 0, 0, 0.62),
    0 0 0.6em rgba(255, 186, 74, 0.32);
}

/* Réflexion chaude projetée sous le mot, comme un or posé sur une surface. */
body.cv-page .olilap-word::before {
  color: rgba(255, 176, 54, 0.5);
  filter: blur(0.26em);
}

/* Éclat spéculaire : passage franc et lumineux, typique du métal poli. */
body.cv-page .olilap-word::after {
  background-image: linear-gradient(
    100deg,
    transparent 0 36%,
    rgba(255, 240, 190, 0.55) 44%,
    #ffffff 50%,
    rgba(255, 240, 190, 0.55) 56%,
    transparent 64%
  );
}

.olilap-motion-0 {
  animation-name: olilapFlow, olilapAura, olilapBreathe;
}

.olilap-motion-1 {
  animation-name: olilapFlow, olilapAura, olilapFloatSoft;
}

.olilap-motion-2 {
  animation-name: olilapFlow, olilapAura, olilapTwist;
}

.olilap-motion-3 {
  animation-name: olilapFlow, olilapAura, olilapPulseGlow;
}

.olilap-motion-4 {
  animation-name: olilapFlow, olilapAura, olilapSlideLight;
}

.olilap-motion-5 {
  animation-name: olilapFlow, olilapAura, olilapTinyTilt;
}

.olilap-motion-6 {
  animation-name: olilapFlow, olilapAura, olilapGlowWave;
}

.olilap-motion-7 {
  animation-name: olilapFlow, olilapAura, olilapHoverlessPop;
}

@media (max-width: 860px) {
  .coming-soon-card {
    min-height: min(36rem, calc(100svh - var(--nav-height) - 5rem));
  }

  .cv-hero {
    grid-template-columns: 1fr;
  }

  .cv-orbital-card {
    min-height: 21rem;
  }

  .cv-grid,
  .cv-timeline {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .contact-visual {
    width: min(11rem, 62vw);
    place-self: center;
  }

  .shop-panel {
    gap: 1.2rem;
  }

  .collection-logo {
    width: min(10rem, 58vw);
  }

  .coming-soon-stage {
    padding-inline: 0.75rem;
  }

  .coming-soon-video {
    min-height: 18rem;
  }
}

@media (max-width: 520px) {
  .coming-soon-card {
    min-height: 27rem;
  }

  .coming-soon-logo {
    width: clamp(8rem, 54vw, 12rem);
  }

  .cv-timeline li {
    grid-template-columns: 1fr;
  }

  .cv-orbital-card__chip {
    min-width: 3.7rem;
    min-height: 2.2rem;
    font-size: 0.82rem;
  }

  .cv-orbital-card__chip:nth-of-type(2) {
    transform: translate(-4.6rem, -4.4rem);
  }

  .cv-orbital-card__chip:nth-of-type(3) {
    transform: translate(4.9rem, -0.7rem);
  }

  .cv-orbital-card__chip:nth-of-type(4) {
    transform: translate(-0.9rem, 4.8rem);
  }
}

footer {
  position: relative;
  z-index: 2;
  padding: 2rem;
  color: rgba(247, 251, 255, 0.74);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 7, 18, 0.68);
  backdrop-filter: blur(16px);
}

footer p {
  margin: 0;
}

.js .reveal-section.is-reveal-pending {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 720ms ease, transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.shockwave-active .shockwave-field {
  animation: fieldImpact 780ms cubic-bezier(0.16, 0.84, 0.2, 1) forwards;
}

body.shockwave-active .shockwave-field::before {
  animation: fieldScan 820ms cubic-bezier(0.12, 0.76, 0.16, 1) forwards;
}

body.shockwave-active .shockwave-field::after {
  animation: fieldGlint 620ms cubic-bezier(0.16, 0.84, 0.2, 1) forwards;
}

body.shockwave-active .shock-reactive {
  animation: shockReact 660ms cubic-bezier(0.16, 0.84, 0.2, 1);
}



html.music-active #particles {
  filter: saturate(var(--music-saturation)) brightness(var(--music-brightness));
}

html.music-active body::before,
html.music-active body::after {
  filter: saturate(var(--music-saturation)) brightness(var(--music-brightness));
}

html.music-active body::after {
  opacity: 0.98;
  scale: var(--music-aura-scale);
}

html.music-active .site-nav {
  box-shadow:
    0 1.2rem 3rem rgba(0, 0, 0, 0.24),
    0 0 var(--music-glow-size) rgba(var(--scene-a, 32, 132, 255), 0.55),
    0 0 4.6rem rgba(var(--scene-b, 255, 155, 49), 0.2);
}

html.music-active .tutorial-orb,
html.music-active .orbital-console,
html.music-active .shop-logo,
html.music-active .tutorial-logo {
  scale: var(--music-orb-scale);
}

html.music-active .tutorial-orb::before,
html.music-active .orbital-console::before,
html.music-active .console-halo {
  opacity: 0.96;
  scale: var(--music-aura-scale);
  filter: saturate(var(--music-saturation)) brightness(var(--music-brightness));
}

html.music-active .main-title {
  filter: saturate(var(--music-saturation)) brightness(var(--music-brightness));
  text-shadow:
    0 0 1.9rem rgba(var(--scene-a, 32, 132, 255), 0.58),
    0 0 var(--music-glow-size) rgba(var(--scene-b, 255, 155, 49), 0.46),
    0 0 4.8rem rgba(var(--scene-c, 47, 107, 231), 0.34);
}

html.music-active .tutorial-orb-face,
html.music-active .console-face {
  filter:
    drop-shadow(0 1.8rem 1.4rem rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 1.8rem rgba(var(--scene-a, 32, 132, 255), 1))
    drop-shadow(0 0 var(--music-glow-size) rgba(var(--scene-b, 255, 155, 49), 0.68))
    drop-shadow(0 0 4.8rem rgba(255, 63, 134, 0.38));
}

html.music-active .orb-ring-one,
html.music-active .console-ring-one {
  animation-duration: var(--music-orbit-fast);
}

html.music-active .orb-ring-two,
html.music-active .console-ring-two {
  animation-duration: var(--music-orbit-slow);
}

html.music-active .console-ring-three {
  animation-duration: var(--music-orbit-wide);
}

html.music-active .cta,
html.music-active .secondary-cta,
html.music-active .nav-links a,
html.music-active .tutorials-index a,
html.music-active .filter-button {
  scale: var(--music-button-scale);
  filter: saturate(var(--music-saturation)) brightness(var(--music-brightness));
}

html.music-active .showcase-card,
html.music-active .timeline-card,
html.music-active .bundle-card,
html.music-active .channel-card,
html.music-active .dashboard-panel,
html.music-active .contact-form,
html.music-active .message-preview,
html.music-active .lab-dashboard,
html.music-active .contact-manifest,
html.music-active .tutorial-doc-card,
html.music-active .tutorial-card,
html.music-active .tutorials-card,
html.music-active .contact-card,
html.music-active .shop-card,
html.music-active .shop-panel,
html.music-active .video-wrapper {
  scale: var(--music-card-scale);
  border-color: rgba(var(--scene-a, 32, 132, 255), 0.32);
  box-shadow:
    0 1.8rem 4rem rgba(0, 0, 0, 0.34),
    0 0 var(--music-glow-size) rgba(var(--scene-a, 32, 132, 255), 0.34),
    0 0 4.8rem rgba(var(--scene-b, 255, 155, 49), 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

html.music-active .showcase-card::before,
html.music-active .timeline-card::before,
html.music-active .bundle-card::before,
html.music-active .channel-card::before,
html.music-active .dashboard-panel::before,
html.music-active .contact-form::before,
html.music-active .message-preview::before,
html.music-active .lab-dashboard::before,
html.music-active .contact-manifest::before,
html.music-active .tutorial-doc-card::before {
  opacity: 0.75;
}

html.music-active .project-meter span,
html.music-active .reading-progress {
  filter: saturate(var(--music-saturation)) brightness(var(--music-brightness));
  box-shadow: 0 0 var(--music-glow-size) rgba(var(--scene-a, 32, 132, 255), 0.72);
}

html.music-beat .shock-reactive {
  translate: var(--music-shake-x) var(--music-shake-y);
}


html.music-beat .tutorial-orb::before,
html.music-beat .orbital-console::before {
  filter: blur(2.8rem) saturate(1.9) brightness(1.36);
}

.music-shock-ring {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 1.2rem rgba(255, 255, 255, 0.58),
    0 0 3.4rem rgba(var(--scene-a, 32, 132, 255), 0.52),
    0 0 4.8rem rgba(var(--scene-b, 255, 155, 49), 0.22),
    inset 0 0 1.5rem rgba(255, 255, 255, 0.32);
  animation: musicShockRing 760ms cubic-bezier(0.12, 0.72, 0.12, 1) forwards;
}

@keyframes backgroundDrift {
  0% {
    transform: scale(1.08) translate3d(-1.2%, -0.8%, 0);
  }
  100% {
    transform: scale(1.12) translate3d(1.4%, 1%, 0);
  }
}

@keyframes tutorialBackgroundDrift {
  0% {
    transform: scale(1.08) translate3d(-1%, -0.4%, 0);
  }
  100% {
    transform: scale(1.12) translate3d(1.2%, 0.9%, 0);
  }
}


@keyframes auraSweep {
  0% {
    opacity: 0.68;
    transform: translate3d(-1%, 0, 0);
  }
  100% {
    opacity: 0.95;
    transform: translate3d(1%, -1%, 0);
  }
}

@keyframes logoLevitate {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotateZ(-0.5deg);
  }
  50% {
    transform: translate3d(0, -1.1rem, 0) rotateZ(0.7deg);
  }
}


/* Lévitation 3D du logo du dock : cycle à quatre temps inégaux qui revient
   exactement à son point de départ, donc pas de saut à la reprise. */
@keyframes dockLogoOrbit {
  0%, 100% {
    transform: perspective(420px) translate3d(0, 0, 0) rotateY(0deg) rotateZ(0deg);
  }
  27% {
    transform: perspective(420px) translate3d(0, -0.34rem, 14px) rotateY(13deg) rotateZ(-2.2deg);
  }
  54% {
    transform: perspective(420px) translate3d(0, -0.1rem, -6px) rotateY(-11deg) rotateZ(1.8deg);
  }
  79% {
    transform: perspective(420px) translate3d(0, -0.22rem, 8px) rotateY(5deg) rotateZ(-0.7deg);
  }
}

@keyframes centeredTinyFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0) translateZ(2.8rem);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-0.35rem) translateZ(2.8rem);
  }
}

@keyframes logoAura {
  0% {
    opacity: 0.54;
    transform: scale(0.86);
  }
  100% {
    opacity: 0.98;
    transform: scale(1.08);
  }
}

@keyframes auraRotate {
  to {
    rotate: 360deg;
  }
}

@keyframes musicHaloSpin {
  to {
    rotate: 360deg;
  }
}

@keyframes equalizerIdle {
  0% {
    transform: scaleY(0.62);
  }
  100% {
    transform: scaleY(1.22);
  }
}

@keyframes musicErrorPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.06);
  }
}


/* Rotation lente ajoutée par-dessus le cycle propre du WebP animé : les deux
   périodes (38 s et 2,45 s) ne se réalignent qu'après plus de 20 minutes,
   donc on ne perçoit jamais la reprise de la boucle du GIF. 360° pile. */
/* Boutique : rotations de 360° pile, respirations qui reviennent au départ. */
@keyframes vaultRingA {
  from { transform: rotateX(72deg) rotateZ(0deg); }
  to { transform: rotateX(72deg) rotateZ(360deg); }
}

@keyframes vaultRingB {
  from { transform: rotateY(66deg) rotateZ(0deg); }
  to { transform: rotateY(66deg) rotateZ(360deg); }
}

@keyframes vaultRingC {
  from { transform: rotateX(28deg) rotateY(40deg) rotateZ(0deg); }
  to { transform: rotateX(28deg) rotateY(40deg) rotateZ(360deg); }
}

@keyframes vaultGemSpin {
  from { transform: rotateY(0deg) rotateX(8deg); }
  to { transform: rotateY(360deg) rotateX(8deg); }
}

@keyframes vaultSparkA {
  from { transform: rotateX(64deg) rotateZ(0deg); }
  to { transform: rotateX(64deg) rotateZ(360deg); }
}

@keyframes vaultSparkB {
  from { transform: rotateY(58deg) rotateZ(0deg); }
  to { transform: rotateY(58deg) rotateZ(360deg); }
}

@keyframes vaultSparkC {
  from { transform: rotateX(-46deg) rotateY(22deg) rotateZ(0deg); }
  to { transform: rotateX(-46deg) rotateY(22deg) rotateZ(360deg); }
}

@keyframes vaultGlow {
  0%, 100% { transform: scale(1); opacity: 0.68; }
  37% { transform: scale(1.12); opacity: 1; }
  71% { transform: scale(0.94); opacity: 0.54; }
}

@keyframes vaultFloor {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.6; }
  37% { transform: translateX(-50%) scaleX(1.14); opacity: 0.9; }
  71% { transform: translateX(-50%) scaleX(0.92); opacity: 0.48; }
}

@keyframes vaultBurst {
  0% { transform: scale(1); opacity: 0.7; }
  35% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.68; }
}

@keyframes tutoCardRise {
  from {
    opacity: 0;
    transform: perspective(900px) translate3d(0, 1.6rem, -40px) rotateX(6deg);
  }
  to {
    opacity: 1;
    transform: perspective(900px) translate3d(0, 0, 0) rotateX(0deg);
  }
}

@keyframes tutoBorderTurn {
  from {
    --tuto-angle: 0deg;
  }
  to {
    --tuto-angle: 360deg;
  }
}

@keyframes tutoRuneFloat {
  0%, 100% {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  }
  28% {
    transform: perspective(600px) translate3d(0, -0.3rem, 14px) rotateY(11deg);
  }
  61% {
    transform: perspective(600px) translate3d(0, 0.12rem, -8px) rotateY(-8deg);
  }
}

@keyframes orbitSpin {
  to {
    transform: rotate(344deg) scaleX(0.72);
  }
}


@keyframes shockRing {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08) rotate(0deg);
  }
  14% {
    opacity: var(--ring-opacity);
  }
  66% {
    opacity: calc(var(--ring-opacity) * 0.42);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--ring-scale)) rotate(22deg);
  }
}

@keyframes musicShockRing {
  0% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(0.12);
    filter: blur(0);
  }
  68% {
    opacity: 0.32;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(24);
    filter: blur(0.1rem);
  }
}

@keyframes fieldImpact {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fieldScan {
  0% {
    opacity: 0;
    transform: scale(0.82) rotate(0deg);
  }
  18% {
    opacity: 0.84;
  }
  100% {
    opacity: 0;
    transform: scale(1.18) rotate(8deg);
  }
}

@keyframes fieldGlint {
  0% {
    opacity: 0;
    transform: translate3d(-1.6rem, -0.8rem, 0) scale(0.96);
  }
  28% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate3d(1.8rem, 1rem, 0) scale(1.04);
  }
}

@keyframes shockReact {
  0% {
    translate: 0 0;
  }
  18% {
    translate: 0 -0.28rem;
  }
  38% {
    translate: 0 0.16rem;
  }
  66% {
    translate: 0 -0.08rem;
  }
  100% {
    translate: 0 0;
  }
}

@keyframes shockSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(0) scale(0.6);
  }
  18% {
    opacity: 0.98;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateX(var(--spark-distance)) scale(0.2);
  }
}

@keyframes hamburgerHaloSpin {
  to {
    transform: rotate(360deg);
  }
}


/* Le sol avance d'exactement une cellule par translation GPU. */
@keyframes portalFloor {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 64px, 0);
  }
}

/* Un anneau naît et meurt à opacité nulle ; sept anneaux déphasés d'un
   septième de cycle donnent un flux continu, sans début ni fin visible. */
@keyframes portalRing {
  0% {
    transform: translateZ(-1600px) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  14% {
    opacity: 0.92;
  }
  76% {
    opacity: 0.5;
  }
  100% {
    transform: translateZ(420px) scale(1.85) rotate(40deg);
    opacity: 0;
  }
}

@keyframes portalCore {
  0%, 100% {
    transform: scale(1);
    opacity: 0.62;
  }
  36% {
    transform: scale(1.14);
    opacity: 0.95;
  }
  68% {
    transform: scale(0.94);
    opacity: 0.5;
  }
}

@keyframes portalPrismBob {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  31% {
    transform: translate3d(0.2rem, -0.72rem, 30px);
  }
  67% {
    transform: translate3d(-0.16rem, 0.34rem, -18px);
  }
}

/* 360° sur les deux axes : l'image finale est identique à l'initiale. */
@keyframes portalCubeSpin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(720deg);
  }
}

@keyframes portalPlay {
  0%, 100% {
    transform: translateZ(90px) scale(1);
    opacity: 0.9;
  }
  42% {
    transform: translateZ(120px) scale(1.16);
    opacity: 1;
  }
  74% {
    transform: translateZ(70px) scale(0.96);
    opacity: 0.82;
  }
}

@keyframes portalSweep {
  from {
    transform: translate3d(0, 0, 0) skewX(-12deg);
  }
  to {
    transform: translate3d(380%, 0, 0) skewX(-12deg);
  }
}

@keyframes videoComingShine {
  from {
    background-position: 145% 50%;
  }
  to {
    background-position: -145% 50%;
  }
}

@keyframes videoComingColorFlow {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 100% 50%;
  }
}

@keyframes collectionLogoLift {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-0.38rem) rotate(1.6deg);
  }
}

@keyframes collectionCoreSpin {
  to {
    transform: rotate(405deg);
  }
}

@keyframes collectionRingTurn {
  0% {
    transform: rotate(0deg) scale(0.96);
  }
  50% {
    transform: rotate(180deg) scale(1.04);
  }
  100% {
    transform: rotate(360deg) scale(0.96);
  }
}

@keyframes collectionSparkDrift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.82);
    opacity: 0.54;
  }
  50% {
    transform: translate3d(0.62rem, -0.52rem, 0) scale(1.16);
    opacity: 1;
  }
}

@keyframes contactGlowDrift {
  from {
    transform: translate3d(-6%, -4%, 0) scale(0.94);
  }
  to {
    transform: translate3d(8%, 7%, 0) scale(1.1);
  }
}

@keyframes contactSignalBlink {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.78);
  }
}

@keyframes contactHaloPulse {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes contactOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes contactCoreFloat {
  0%, 100% {
    transform: translateY(0.28rem);
  }
  50% {
    transform: translateY(-0.34rem);
  }
}

@keyframes comingSoonField {
  to {
    transform: translateX(12%) rotate(3deg);
  }
}

@keyframes comingSoonFrame {
  0% {
    transform: rotate(0deg) scale(0.96);
    border-radius: 38% 62% 56% 44%;
  }
  50% {
    transform: rotate(180deg) scale(1.03);
    border-radius: 62% 38% 44% 56%;
  }
  100% {
    transform: rotate(360deg) scale(0.96);
    border-radius: 38% 62% 56% 44%;
  }
}

@keyframes comingSoonTitle {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: var(--coming-tile);
  }
}

@keyframes comingSoonTitleFloat {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -0.28rem;
  }
}

@keyframes cvRingTurn {
  0% {
    transform: rotate(0deg) scale(0.96);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(0.96);
  }
}

@keyframes cvPulse {
  0%, 100% {
    transform: rotate(45deg) scale(0.9);
    opacity: 0.82;
  }
  50% {
    transform: rotate(65deg) scale(1.08);
    opacity: 1;
  }
}

/* Décalage d'EXACTEMENT une période du motif : l'état final est identique à
   l'état initial, donc le raccord est indétectable. C'est le cœur du correctif. */
@keyframes olilapFlow {
  from {
    background-position-x: 0;
  }
  to {
    background-position-x: var(--olilap-tile);
  }
}

@keyframes olilapGlint {
  0%, 58% {
    background-position: -150% 50%;
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  96%, 100% {
    background-position: 250% 50%;
    opacity: 0;
  }
}

/* Halo + dérive chromatique. hue-rotate revient à 0 : bouclage parfait. */
/* --olilap-swing règle l'amplitude de la dérive chromatique. Vaut 1 partout,
   sauf sur l'or du CV où une grande oscillation virerait au vert-jaune. */
@keyframes olilapAura {
  0%, 100% {
    filter:
      hue-rotate(0deg)
      drop-shadow(0 0 0.3em hsl(var(--olilap-hue) 100% 60% / 0.34))
      drop-shadow(0 0 0.66em hsl(calc(var(--olilap-hue) + 80deg) 100% 62% / 0.2));
  }
  38% {
    filter:
      hue-rotate(calc(var(--olilap-swing, 1) * 26deg))
      drop-shadow(0 0 0.5em hsl(var(--olilap-hue) 100% 66% / 0.58))
      drop-shadow(0 0 1.02em hsl(calc(var(--olilap-hue) + 80deg) 100% 66% / 0.38));
  }
  71% {
    filter:
      hue-rotate(calc(var(--olilap-swing, 1) * -18deg))
      drop-shadow(0 0 0.36em hsl(var(--olilap-hue) 100% 62% / 0.42))
      drop-shadow(0 0 0.8em hsl(calc(var(--olilap-hue) + 80deg) 100% 64% / 0.26));
  }
}

@keyframes olilapGhost {
  0%, 100% {
    transform: translate3d(0.032em, 0.052em, 0) scale(1.012);
    opacity: 0.52;
  }
  33% {
    transform: translate3d(-0.028em, 0.036em, 0) scale(1.028);
    opacity: 0.8;
  }
  66% {
    transform: translate3d(0.046em, -0.024em, 0) scale(1.004);
    opacity: 0.4;
  }
}

/* Les 8 mouvements : trois temps inégaux, retour exact à l'état de départ. */
@keyframes olilapBreathe {
  0%, 100% {
    transform: perspective(720px) translate3d(0, 0, 0) scale(1);
  }
  34% {
    transform: perspective(720px) translate3d(0, -0.05em, 12px) scale(1.038);
  }
  67% {
    transform: perspective(720px) translate3d(0, 0.022em, -8px) scale(0.988);
  }
}

@keyframes olilapFloatSoft {
  0%, 100% {
    transform: perspective(760px) translate3d(0, 0, 0) rotate(0deg);
  }
  29% {
    transform: perspective(760px) translate3d(0.03em, -0.085em, 16px) rotate(-1.6deg);
  }
  63% {
    transform: perspective(760px) translate3d(-0.026em, -0.03em, -10px) rotate(1.1deg);
  }
}

@keyframes olilapTwist {
  0%, 100% {
    transform: perspective(640px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  27% {
    transform: perspective(640px) rotateX(9deg) rotateY(-13deg) rotateZ(-1.2deg);
  }
  61% {
    transform: perspective(640px) rotateX(-6deg) rotateY(11deg) rotateZ(1deg);
  }
}

@keyframes olilapPulseGlow {
  0%, 100% {
    transform: perspective(700px) scale(1) translateZ(0);
  }
  31% {
    transform: perspective(700px) scale(1.045) translateZ(18px);
  }
  68% {
    transform: perspective(700px) scale(0.985) translateZ(-12px);
  }
}

@keyframes olilapSlideLight {
  0%, 100% {
    transform: perspective(780px) translateX(0) skewX(0deg) rotateY(0deg);
  }
  36% {
    transform: perspective(780px) translateX(0.038em) skewX(-6deg) rotateY(9deg);
  }
  72% {
    transform: perspective(780px) translateX(-0.028em) skewX(4deg) rotateY(-7deg);
  }
}

@keyframes olilapTinyTilt {
  0%, 100% {
    transform: perspective(660px) rotate(-0.9deg) rotateX(0deg) scale(1);
  }
  32% {
    transform: perspective(660px) rotate(1.4deg) rotateX(10deg) scale(1.03);
  }
  65% {
    transform: perspective(660px) rotate(-0.2deg) rotateX(-7deg) scale(0.992);
  }
}

@keyframes olilapGlowWave {
  0%, 100% {
    transform: perspective(820px) translate3d(0, 0, 0) rotateY(0deg);
  }
  26% {
    transform: perspective(820px) translate3d(0, -0.062em, 20px) rotateY(-8deg);
  }
  58% {
    transform: perspective(820px) translate3d(0, 0.018em, -14px) rotateY(10deg);
  }
  81% {
    transform: perspective(820px) translate3d(0, -0.024em, 6px) rotateY(-3deg);
  }
}

@keyframes olilapHoverlessPop {
  0%, 100% {
    transform: perspective(600px) scale(1) rotateX(0deg);
  }
  23% {
    transform: perspective(600px) scale(1.052) rotateX(7deg);
  }
  47% {
    transform: perspective(600px) scale(0.984) rotateX(-5deg);
  }
  74% {
    transform: perspective(600px) scale(1.016) rotateX(2deg);
  }
}

/* Lévitation des logos tutoriels. Les variables --media-x/--media-y sont
   pilotées par le JS (parallaxe au survol) : les garder dans la keyframe
   permet de superposer l'animation permanente et le suivi du curseur. */
@keyframes tutorialLogoLevitate {
  0%, 100% {
    transform: perspective(900px) translate3d(var(--media-x), var(--media-y), 0) rotateY(0deg) rotateX(0deg) scale(1);
  }
  26% {
    transform: perspective(900px) translate3d(var(--media-x), calc(var(--media-y) - 0.7rem), 26px) rotateY(9deg) rotateX(4deg) scale(1.035);
  }
  53% {
    transform: perspective(900px) translate3d(var(--media-x), calc(var(--media-y) + 0.25rem), -14px) rotateY(-7deg) rotateX(-3deg) scale(0.985);
  }
  79% {
    transform: perspective(900px) translate3d(var(--media-x), calc(var(--media-y) - 0.3rem), 10px) rotateY(3deg) rotateX(1.5deg) scale(1.012);
  }
}

/* Dérives du verre : trois temps inégaux, retour exact au point de départ. */
@keyframes sceneDrift {
  0%, 100% {
    transform: scale(1.16) translate3d(0, 0, 0);
  }
  33% {
    transform: scale(1.2) translate3d(-1.6%, 1.1%, 0);
  }
  66% {
    transform: scale(1.14) translate3d(1.3%, -0.8%, 0);
  }
}

@keyframes sceneRefract {
  0%, 100% {
    transform: scale(1.42) translate3d(0, 0, 0);
    opacity: 0.85;
  }
  40% {
    transform: scale(1.5) translate3d(1.2%, -1%, 0);
    opacity: 1;
  }
  72% {
    transform: scale(1.38) translate3d(-1%, 0.8%, 0);
    opacity: 0.72;
  }
}

@keyframes sceneCaustics {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.75;
  }
  35% {
    transform: translate3d(4%, -3%, 0) scale(1.12);
    opacity: 1;
  }
  70% {
    transform: translate3d(-3%, 3.5%, 0) scale(0.95);
    opacity: 0.58;
  }
}

@keyframes sceneSpecular {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.72;
  }
  44% {
    transform: translate3d(1.4%, -1%, 0);
    opacity: 1;
  }
  76% {
    transform: translate3d(-1%, 0.8%, 0);
    opacity: 0.58;
  }
}

@keyframes mediaScan {
  0%, 54% {
    transform: translateX(-115%);
    opacity: 0;
  }
  66% {
    opacity: 0.88;
  }
  100% {
    transform: translateX(115%);
    opacity: 0;
  }
}

@keyframes noCookieVeilIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0) saturate(1);
    -webkit-backdrop-filter: blur(0) saturate(1);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(26px) saturate(1.4);
    -webkit-backdrop-filter: blur(26px) saturate(1.4);
  }
}

@keyframes noCookieVeilOut {
  to {
    opacity: 0;
    transform: scale(1.018);
  }
}

@keyframes noCookieGridDrift {
  to {
    transform: translateX(12%);
  }
}

@keyframes noCookieLightSweep {
  0% {
    transform: translate3d(-2.5rem, -1.6rem, 0) rotate(-1deg);
    opacity: 0.38;
  }
  100% {
    transform: translate3d(2.1rem, 1.2rem, 0) rotate(1.5deg);
    opacity: 0.74;
  }
}

@keyframes noCookiePanelEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 3rem, -8rem) rotateX(14deg) scale(0.88);
    filter: blur(0.6rem);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -0.34rem, 0) rotateX(-2deg) scale(1.018);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: rotateX(var(--popup-tilt-x)) rotateY(var(--popup-tilt-y)) scale(1);
    filter: blur(0);
  }
}

@keyframes noCookiePanelExit {
  to {
    opacity: 0;
    transform: translate3d(0, 1.6rem, -6rem) rotateX(-10deg) scale(0.94);
    filter: blur(0.45rem);
  }
}

@keyframes noCookieBeamSlide {
  0%, 100% {
    transform: translateX(0) scaleX(0.68);
    opacity: 0.36;
  }
  50% {
    transform: translateX(72%) scaleX(1.12);
    opacity: 0.92;
  }
}

@keyframes noCookieImageGlint {
  0%, 42% {
    transform: translateX(-120%);
    opacity: 0;
  }
  56% {
    opacity: 0.8;
  }
  78%, 100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes noCookieCookieFloat {
  from {
    transform: scale(1.08) translate3d(-0.24rem, -0.18rem, 0);
  }
  to {
    transform: scale(1.13) translate3d(0.34rem, 0.22rem, 0);
  }
}

@keyframes noCookieCopySnap {
  0% {
    opacity: 0;
    transform: translate3d(1.4rem, 0, 0) scale(0.97);
    filter: blur(0.28rem);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes noCookieButtonArrive {
  0% {
    opacity: 0;
    transform: translate3d(0, 1rem, 2rem) scale(0.9);
  }
  66% {
    opacity: 1;
    transform: translate3d(0, -0.18rem, 2rem) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateZ(2rem) scale(1);
  }
}

@keyframes noCookieButtonPulse {
  0%, 100% {
    box-shadow:
      0 1rem 2rem rgba(0, 0, 0, 0.28),
      0 0 1.7rem rgba(var(--scene-b, 255, 155, 49), 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -0.18rem 0.65rem rgba(255, 116, 31, 0.18);
  }
  50% {
    box-shadow:
      0 1.18rem 2.2rem rgba(0, 0, 0, 0.32),
      0 0 2.6rem rgba(var(--scene-b, 255, 155, 49), 0.48),
      0 0 1.8rem rgba(var(--scene-a, 32, 132, 255), 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -0.18rem 0.65rem rgba(255, 116, 31, 0.18);
  }
}


@keyframes noCookieCrumbDance {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  28% {
    transform: translate3d(0.52rem, -0.62rem, 1rem) rotate(36deg) scale(1.18);
  }
  62% {
    transform: translate3d(-0.28rem, 0.38rem, 0) rotate(-24deg) scale(0.92);
  }
}

@media (max-width: 1100px) {
  body.home-page::before {
    background-image: url(images/olilap-background-tablet.a0d82f32.webp);
  }

  .tutorials-index {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .tutorial-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }

  .tutorial-hero-copy {
    justify-items: center;
    margin-inline: auto;
  }

  .tutorial-hero-copy .hero-text {
    text-align: center;
  }

  .tutorial-hero-actions {
    justify-content: center;
  }

  .tutorial-orb {
    width: min(72vw, 25rem);
  }

  .tutorial-doc-card,
  .tutorial-doc-card:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .tutorial-doc-card:nth-child(even) .tutorial-media {
    order: 0;
  }

  .tutorial-media {
    position: relative;
    top: auto;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-height: 126px;
    --home-interface-gutter: var(--interface-shell-gutter);
  }

  .site-nav {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.75rem 1rem;
  }

.music-toggle {
    position: absolute;
    top: 0.75rem;
    right: auto;
    left: 8.4rem;
    z-index: 12;
    width: 2.6rem;
    height: 2.6rem;
  }

  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  .nav-links a {
    min-height: 2.25rem;
    padding: 0;
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .nav-links a > span {
    padding-inline: 0.78rem;
    padding-block: 0.6rem;
  }

  /* 3rem de chaque côté sur un écran de 390px, c'est 96px perdus : les
     panneaux tombaient à 254px de large. On resserre. */
  section {
    padding: 3rem 1rem;
  }

  .hero {
    min-height: 90svh;
  }

  .main-title {
    font-size: 3.2rem;
  }

  .hero-text {
    font-size: 1rem;
  }

  .tutorials-grid,
  .shop-panel {
    grid-template-columns: 1fr;
  }

  .shop-logo {
    width: 9rem;
    height: 9rem;
  }

  .tutorial-hero {
    padding-top: calc(var(--nav-height) + 3rem);
  }

  .tutorial-doc-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  body.home-page::before {
    background-image: url(images/olilap-background-mobile.a242715e.webp);
  }

  .site-nav {
    overflow: hidden;
  }

  .nav-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
    align-self: flex-start;
    width: min(20rem, calc(100vw - 2rem));
    max-width: min(20rem, calc(100vw - 2rem));
  }

  .nav-links li {
    min-width: 0;
  }

  .nav-links a {
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .nav-links a > span {
    width: 100%;
    padding-inline: 0.45rem;
  }

  .music-permission-panel {
    grid-template-columns: 1fr;
    max-height: min(44rem, calc(100svh - 2rem));
    overflow-y: auto;
  }

  .music-permission-orb {
    min-height: 12rem;
  }

  .music-permission-copy {
    padding-right: 0;
  }

  .music-permission-actions {
    justify-content: stretch;
  }

  .music-permission-actions > * {
    width: 100%;
  }

  .no-cookie-popup {
    padding: 0.74rem;
    overflow: hidden;
  }

  .no-cookie-popup__panel {
    grid-template-columns: 1fr;
    width: min(100%, 35rem);
    min-height: 0;
    max-height: calc(100svh - 1.48rem);
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .no-cookie-popup__image-wrap {
    min-height: 15.5rem;
  }

  .no-cookie-popup__image {
    min-height: 15.5rem;
  }

  .no-cookie-popup__copy {
    justify-items: stretch;
    gap: 1.1rem;
    padding: 1.35rem 0.95rem 1.15rem;
  }

  .no-cookie-popup__copy h2 {
    max-width: 12ch;
    font-size: 2.45rem;
  }

  .no-cookie-popup__action {
    width: 100%;
    min-width: 0;
  }

  .music-visualizer {
    bottom: 0.55rem;
    height: 3.6rem;
    padding: 0.58rem 0.7rem;
  }

  .hero,
  .tutorial-hero {
    width: 100%;
    max-width: 100%;
  }

  .hero-copy,
  .tutorial-hero-copy {
    width: 100%;
    min-width: 0;
  }

  .hero-text {
    padding-inline: 0;
  }

  .home-page .hero-text {
    width: min(100%, 18rem);
  }

  .tutorials-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tutorials-list {
    width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
  }

  .tutorial-doc-card {
    padding: 0.8rem;
  }

  .tutorial-steps li {
    grid-template-columns: 1fr;
  }

  .tutorial-steps li::before,
  .tutorial-steps strong,
  .tutorial-steps span {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 520px) {
  :root {
    --nav-height: 222px;
  }

  .brand-logo {
    width: 2.6rem;
    height: 2.6rem;
  }

  .nav-links {
    gap: 0.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-links a {
    min-height: 2.05rem;
    padding: 0;
    font-size: 0.78rem;
  }

  .nav-links a > span {
    padding-inline: 0.58rem;
    padding-block: 0.54rem;
  }

  .main-title {
    font-size: 2.55rem;
  }


  .video-section h2,
  .tutorials-section h2,
  .shop-section h2,
  .contact-section h2 {
    font-size: 2rem;
  }

  .tutorial-card {
    min-height: 0;
  }

  .tutorial-hero {
    padding-inline: 0.85rem;
  }

  .tutorial-orb {
    width: min(82vw, 20rem);
  }

  .tutorials-index {
    width: min(calc(100% - var(--home-interface-gutter) - var(--home-interface-gutter)), var(--home-interface-width));
    gap: 0.5rem;
  }

  .tutorials-index a {
    min-height: 2.8rem;
    font-size: 0.78rem;
  }

  .tutorials-index a > span {
    padding: 0.62rem 0.68rem;
  }

  .tutorial-body h2 {
    font-size: 1.85rem;
  }

  .tutorial-hero-copy .main-title {
    max-width: 18rem;
    font-size: 2.45rem;
  }

  .lesson-code {
    padding: 0.85rem;
  }
}

@media (max-width: 380px) {
  :root {
    --nav-height: 232px;
  }

  .nav-links {
    width: min(18rem, calc(100vw - 2rem));
    max-width: min(18rem, calc(100vw - 2rem));
  }
}

@keyframes nodePulse {
  0%, 100% {
    transform: scale(0.88);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.16);
    opacity: 1;
  }
}

@keyframes floatCapsule {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.55rem, 0);
  }
}

@keyframes signalPulse {
  0%, 100% {
    opacity: 0.34;
    transform: scaleX(0.65);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes meterGlow {
  0%, 100% {
    filter: saturate(1) brightness(1);
  }
  50% {
    filter: saturate(1.3) brightness(1.16);
  }
}

@media (max-width: 1160px) {
  .showcase-card {
    grid-template-columns: 1fr;
  }

  .showcase-media img {
    min-height: 14rem;
  }
}

@media (max-width: 980px) {
  .page-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }

  .page-hero-copy {
    justify-items: center;
    margin-inline: auto;
  }

  .page-hero-copy .hero-text {
    text-align: center;
  }

  .page-hero-actions,
  .filter-bar {
    justify-content: center;
  }

  .orbital-console {
    width: min(72vw, 25rem);
  }

.showcase-grid,
  .shop-workbench,
  .contact-lab,
  .contact-manifest {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 860px) {
  .page-hero {
    padding-top: calc(var(--nav-height) + 2rem);
  }

  .inner-section {
    width: min(calc(100% - var(--page-interface-gutter) - var(--page-interface-gutter)), var(--page-interface-width));
    max-width: var(--page-interface-width);
    padding: 4.6rem 0;
  }

  .dashboard-grid,
  .timeline-grid,
  .bundle-grid,
  .channel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .page-hero {
    width: 100%;
    max-width: 100%;
  }

  .page-hero-copy {
    width: 100%;
    min-width: 0;
  }

  .page-hero-copy .main-title {
    max-width: 20rem;
  }

  .filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-button {
    width: 100%;
    min-width: 0;
  }

.showcase-card,
  .lab-dashboard,
  .contact-manifest,
  .contact-form,
  .message-preview {
    padding: 0.9rem;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .contact-form label,
  .contact-form .full-field,
  .contact-form .cta,
  .form-status {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .page-hero {
    padding-inline: 0.85rem;
  }

  .page-hero-copy .main-title {
    font-size: 2.35rem;
  }

  .orbital-console {
    width: min(70vw, 17rem);
  }

  .section-heading h2,
  .lab-dashboard h2,
  .contact-manifest h2 {
    font-size: 2rem;
  }

  .no-cookie-popup__image-wrap,
  .no-cookie-popup__image {
    min-height: 12.6rem;
  }

  .no-cookie-popup__copy h2 {
    font-size: 2.12rem;
  }

  .no-cookie-popup__action > span {
    padding-inline: 0.85rem;
    font-size: 0.95rem;
  }

.filter-button {
    min-height: 2.65rem;
    padding-inline: 0.72rem;
    font-size: 0.8rem;
  }

.showcase-media img {
    min-height: 12rem;
  }

.preview-footer {
    flex-direction: column;
  }
}

.site-nav {
  --dock-expansion: 0px;
  --dock-spread: 0px;
  --dock-padding-extra: 0px;
  top: clamp(0.7rem, 1.4vw, 1.05rem);
  left: 50%;
  right: auto;
  width: min(
    calc(var(--home-interface-width) + var(--dock-expansion)),
    calc(100% - var(--home-interface-gutter) - var(--home-interface-gutter))
  );
  max-width: calc(100% - var(--home-interface-gutter) - var(--home-interface-gutter));
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.48rem;
  padding: 0.52rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07) 40%, rgba(var(--scene-a, 32, 132, 255), 0.08) 68%, rgba(var(--scene-b, 255, 155, 49), 0.12)),
    rgba(3, 7, 18, 0.54);
  box-shadow:
    0 1.15rem 3.2rem rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 2.8rem rgba(var(--scene-a, 32, 132, 255), 0.14),
    0 0 4rem rgba(var(--scene-b, 255, 155, 49), 0.08);
  backdrop-filter: blur(28px) saturate(1.55);
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  transform: translateX(-50%) translateZ(0);
  transition: width 420ms cubic-bezier(0.16, 1.16, 0.24, 1), padding 360ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
  overflow: visible;
}




.brand {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  height: 3.35rem;
  padding: 0.36rem 0.8rem 0.36rem 0.42rem;
  transition: transform 360ms cubic-bezier(0.18, 1.2, 0.2, 1), border-color 240ms ease, background 240ms ease;
}

.brand:hover,
.brand:focus-visible {
  transform: translateY(-0.28rem) scale(1.06);
}

.brand-logo {
  width: 2.55rem;
  height: 2.55rem;
}

.nav-title {
  font-size: 1.02rem;
}

.dock-menu-toggle {
  position: relative;
  z-index: 4;
  display: none;
  place-items: center;
  flex: 0 0 auto;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transform-origin: 50% 0%;
  transition: transform 360ms cubic-bezier(0.18, 1.2, 0.2, 1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.dock-menu-toggle__halo,
.dock-menu-toggle__bars,
.dock-menu-toggle__bars span {
  position: absolute;
  pointer-events: none;
}

.dock-menu-toggle__halo {
  inset: 0.35rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--scene-a, 32, 132, 255), 0.9), rgba(var(--scene-c, 47, 107, 231), 0.32), rgba(var(--scene-b, 255, 155, 49), 0.82), rgba(var(--scene-a, 32, 132, 255), 0.9));
  opacity: 0.5;
  filter: blur(0.15rem);
  animation: hamburgerHaloSpin 3.8s linear infinite;
}

.dock-menu-toggle__bars {
  z-index: 2;
  width: 1.22rem;
  height: 1rem;
}

.dock-menu-toggle__bars span {
  left: 0;
  width: 100%;
  height: 0.14rem;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0.65rem rgba(255, 255, 255, 0.52);
  transform-origin: center;
  transition: top 260ms ease, transform 360ms cubic-bezier(0.16, 1.3, 0.24, 1), opacity 180ms ease, width 240ms ease;
}

.dock-menu-toggle__bars span:nth-child(1) {
  top: 0;
}

.dock-menu-toggle__bars span:nth-child(2) {
  top: calc(50% - 0.07rem);
  width: 78%;
}

.dock-menu-toggle__bars span:nth-child(3) {
  top: calc(100% - 0.14rem);
}

.dock-menu-toggle:hover,
.dock-menu-toggle:focus-visible {
  transform: translateY(0.32rem) scale(1.08);
}

.dock-menu-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: 0.28rem;
}

.site-nav.is-menu-open .dock-menu-toggle__bars span:nth-child(1) {
  top: calc(50% - 0.07rem);
  transform: rotate(45deg);
}

.site-nav.is-menu-open .dock-menu-toggle__bars span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}

.site-nav.is-menu-open .dock-menu-toggle__bars span:nth-child(3) {
  top: calc(50% - 0.07rem);
  transform: rotate(-45deg);
}

.nav-links {
  --dock-base-item-width: clamp(4.45rem, 7vw, 6.15rem);
  position: relative;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: center;
  flex: 0 1 auto;
  gap: calc(0.28rem + var(--dock-spread));
  width: auto;
  max-width: none;
  margin: 0;
  padding: calc(0.28rem + var(--dock-padding-extra)) calc(0.28rem + var(--dock-padding-extra));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(1, 5, 15, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  overflow: visible;
  transition: gap 420ms cubic-bezier(0.16, 1.16, 0.24, 1), padding 420ms cubic-bezier(0.16, 1.16, 0.24, 1);
}

.nav-links li {
  display: flex;
  min-width: 0;
}

.nav-links a {
  --dock-scale: 1;
  --dock-lift: 0px;
  --dock-glow: 0;
  --dock-slot-scale: 1;
  --border-width: 1px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 calc(var(--dock-base-item-width) * var(--dock-slot-scale));
  min-width: calc(var(--dock-base-item-width) * var(--dock-slot-scale));
  min-height: 3.05rem;
  padding: 0;
  text-align: center;
  transform: translateY(var(--dock-lift)) scale(var(--dock-scale));
  transform-origin: 50% 0%;
  transition:
    transform 420ms cubic-bezier(0.16, 1.36, 0.24, 1),
    flex-basis 420ms cubic-bezier(0.16, 1.16, 0.24, 1),
    min-width 420ms cubic-bezier(0.16, 1.16, 0.24, 1),
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    color 220ms ease;
  will-change: transform;
}



.nav-links a > span {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0.8rem 0.88rem;
  color: currentColor;
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 0.12rem 0.24rem rgba(0, 0, 0, 0.42);
}

.nav-links a > span::after {
  display: none;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.is-active {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateY(var(--dock-lift)) scale(var(--dock-scale));
}

.nav-links a:hover,
.nav-links a:focus-visible {
  --dock-scale: 1.46;
  --dock-lift: 0.68rem;
  --dock-glow: 1;
}

.nav-links a.is-active {
  --dock-glow: 0.64;
}



.nav-links a:focus-visible,
.brand:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.88);
  outline-offset: 0.28rem;
}

.nav-links a:active {
  transform: translateY(calc(var(--dock-lift) + 0.12rem)) scale(calc(var(--dock-scale) * 0.96));
}

.music-toggle {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 3;
  width: 3.15rem;
  height: 3.15rem;
  transform-origin: 50% 0%;
}

.music-toggle:hover,
.music-toggle:focus-visible {
  transform: translateY(0.32rem) scale(1.08);
}

.site-nav.is-menu-dock {
  align-items: center;
  flex-flow: row nowrap;
  justify-content: space-between;
  min-height: 4.35rem;
  border-radius: 999px;
  overflow: visible;
}

.site-nav.is-menu-dock .brand {
  order: 1;
  margin-right: 0;
}

.site-nav.is-menu-dock .dock-menu-toggle {
  display: grid;
  order: 2;
}

.site-nav.is-menu-dock .music-toggle {
  order: 3;
  margin-left: 0;
}

.site-nav.is-menu-dock .nav-links {
  position: absolute;
  top: calc(100% + 0.72rem);
  left: 0;
  right: 0;
  order: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  max-width: none;
  padding: 0.72rem;
  border-radius: 1.65rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.065) 48%, rgba(var(--scene-a, 32, 132, 255), 0.09)),
    rgba(3, 7, 18, 0.76);
  box-shadow:
    0 1.2rem 3rem rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-0.75rem) scale(0.96);
  transform-origin: top center;
  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    transform 360ms cubic-bezier(0.16, 1.12, 0.24, 1);
  overflow: hidden;
}


.site-nav.is-menu-open .nav-links {
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.site-nav.is-menu-dock:not(.is-menu-open) .nav-links {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-0.75rem) scale(0.96) !important;
}


.site-nav.is-menu-dock .nav-links li {
  min-width: 0;
}

.site-nav.is-menu-dock .nav-links a {
  flex: initial;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 2.82rem;
}

@media (max-width: 1040px) {
  .site-nav {
    max-width: min(calc(100vw - 1rem), 64rem);
  }

  .nav-links {
    --dock-base-item-width: clamp(3.95rem, 8vw, 5.35rem);
  }

  .nav-links a > span {
    padding-inline: 0.7rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-height: 96px;
  }

  .site-nav {
    align-items: center;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem;
    border-radius: 999px;
  }

  .brand {
    height: 3rem;
  }

  .brand-logo {
    width: 2.25rem;
    height: 2.25rem;
  }

  .music-toggle {
    width: 2.85rem;
    height: 2.85rem;
  }

  .nav-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.32rem;
    border-radius: 1.35rem;
  }

.nav-links a {
    width: 100%;
    min-width: 0;
    min-height: 2.62rem;
  }

  .nav-links a > span {
    padding: 0.7rem 0.46rem;
    font-size: 0.78rem;
  }
}

@media (max-width: 520px) {
  :root {
    --nav-height: 96px;
  }

  .site-nav {
    width: min(calc(100% - var(--home-interface-gutter) - var(--home-interface-gutter)), var(--home-interface-width));
    padding: 0.52rem;
    border-radius: 1.55rem;
  }

  .nav-title {
    font-size: 0.94rem;
  }

  .nav-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }

.nav-links a {
    min-height: 2.48rem;
  }

  .nav-links a > span {
    padding: 0.68rem 0.5rem;
    font-size: 0.77rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .nav-links a,
  .nav-links a:hover,
  .nav-links a:focus-visible,
  .dock-menu-toggle:hover,
  .dock-menu-toggle:focus-visible,
  .music-toggle:hover,
  .music-toggle:focus-visible,
  .brand:hover,
  .brand:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

html.music-active .cta,
  html.music-active .secondary-cta,
  html.music-active .nav-links a,
  html.music-active .tutorials-index a,
  html.music-active .filter-button,
  html.music-active .tutorial-orb,
  html.music-active .orbital-console,
  html.music-active .shop-logo,
  html.music-active .tutorial-logo,
  html.music-active .showcase-card,
  html.music-active .timeline-card,
  html.music-active .bundle-card,
  html.music-active .channel-card,
  html.music-active .dashboard-panel,
  html.music-active .contact-form,
  html.music-active .message-preview,
  html.music-active .lab-dashboard,
  html.music-active .contact-manifest,
  html.music-active .tutorial-doc-card,
  html.music-active .tutorial-card,
  html.music-active .contact-card,
  html.music-active .shop-card,
  html.music-active .shop-panel,
  html.music-active .video-wrapper {
    scale: 1 !important;
  }

  html.music-beat .shock-reactive {
    translate: 0 0 !important;
  }

  .music-shock-ring {
    display: none;
  }

  .music-visualizer {
    display: none;
  }

  .no-cookie-popup__panel,
  .no-cookie-popup__image,
  .no-cookie-popup__action {
    transform: none !important;
  }

  .no-cookie-popup__beam,
  .no-cookie-popup__crumb {
    display: none;
  }
}

/* ==========================================================================
   Animations immersives supplémentaires — transform/opacity uniquement
   ========================================================================== */

/* Orbes ambiants dérivant lentement derrière le contenu */

.ambient-orbs {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-orbs span {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  mix-blend-mode: screen;
  opacity: 0.34;
  will-change: transform;
}

.ambient-orbs span:nth-child(1) {
  top: 6%;
  left: -6%;
  width: 36vmin;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--scene-a, 32, 132, 255), 0.55), transparent 70%);
  animation: orbDriftOne 27s ease-in-out infinite alternate;
}

.ambient-orbs span:nth-child(2) {
  top: 44%;
  right: -8%;
  width: 30vmin;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--scene-c, 47, 107, 231), 0.5), transparent 70%);
  animation: orbDriftTwo 35s ease-in-out infinite alternate;
}

.ambient-orbs span:nth-child(3) {
  bottom: -10%;
  left: 34%;
  width: 26vmin;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--scene-b, 255, 155, 49), 0.45), transparent 70%);
  animation: orbDriftThree 43s ease-in-out infinite alternate;
}

@keyframes orbDriftOne {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(14vw, 18vh, 0) scale(1.24); }
}

@keyframes orbDriftTwo {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to { transform: translate3d(-16vw, -12vh, 0) scale(0.9); }
}

@keyframes orbDriftThree {
  from { transform: translate3d(0, 0, 0) scale(0.94); }
  to { transform: translate3d(10vw, -14vh, 0) scale(1.18); }
}

/* Révélation des titres de section : montée + déflouté */

.js .reveal-section.is-reveal-pending.is-visible :is(h2, .section-heading h2) {
  animation: titleReveal 720ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Parallaxe au scroll des médias (Chromium — enrichissement progressif) */

@supports (animation-timeline: view()) {
  .showcase-media img,
  .tutorial-media img:not(.tutorial-doc-logo) {
    animation: mediaScrollParallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  @keyframes mediaScrollParallax {
    from {
      transform: translate3d(var(--media-x, 0px), calc(var(--media-y, 0px) - 4.5%), 0) scale(1.12);
    }
    to {
      transform: translate3d(var(--media-x, 0px), calc(var(--media-y, 0px) + 4.5%), 0) scale(1.12);
    }
  }
}

/* Les blocs de code défilent horizontalement au lieu d'être tronqués */

.lesson-code {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================================
   Accueil — séquence d'ouverture vidéo et révélation du mot-symbole
   ======================================================================== */

html.home-intro-active:has(> body.home-page),
html.home-intro-transition:has(> body.home-page) {
  overflow: hidden;
  overscroll-behavior: none;
}

.home-intro-experience {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  outline: none;
}

.home-intro-experience::before {
  position: absolute;
  inset: 0;
  content: "";
  background: #000;
}

html.home-intro-active .home-page .home-intro-experience,
html.home-intro-transition .home-page .home-intro-experience {
  display: grid;
  place-items: center;
}

html.home-intro-active body.home-page > :not(.home-intro-experience) {
  visibility: hidden;
  pointer-events: none;
}

html.home-intro-active .home-page .home-wordmark-stage { display: flex; }

.motion-paused,
.motion-paused *,
.motion-paused::before,
.motion-paused::after,
.motion-paused *::before,
.motion-paused *::after,
html.home-intro-active .home-page > :not(.home-intro-experience),
html.home-intro-active .home-page > :not(.home-intro-experience) *,
html.home-intro-active .home-page > :not(.home-intro-experience) *::before,
html.home-intro-active .home-page > :not(.home-intro-experience) *::after {
  animation-play-state: paused !important;
}

html.home-intro-active body.home-page::before,
html.home-intro-active body.home-page::after {
  background: none;
  opacity: 0;
  animation: none;
}

.home-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: translateZ(0);
  transform-origin: center;
  backface-visibility: hidden;
}

.home-intro-void,
.home-intro-portal,
.home-intro-scroll-cue {
  position: absolute;
  pointer-events: none;
}

.home-intro-void {
  inset: -12%;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(214, 255, 255, 0.96) 0 1.2%, rgba(58, 230, 255, 0.66) 2.4%, rgba(24, 75, 148, 0.24) 11%, transparent 31%),
    radial-gradient(ellipse at 50% 53%, rgba(1, 8, 20, 0) 0 20%, rgba(0, 0, 0, 0.86) 48%, #000 72%);
  transform: scale(0.72) translateZ(0);
  transform-origin: center;
}

.home-intro-portal {
  left: 50%;
  top: 50%;
  width: min(68vmin, 42rem);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.22);
  transform-style: preserve-3d;
  will-change: transform;
  perspective: 1300px;
}

.home-intro-portal::before,
.home-intro-portal::after,
.home-intro-portal i {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

.home-intro-portal::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 1.5%, rgba(122, 255, 255, 0.76) 3.2%, rgba(var(--scene-a, 32, 132, 255), 0.28) 12%, transparent 39%),
    conic-gradient(from 14deg, transparent 0 14%, rgba(235, 255, 255, 0.88) 18%, rgba(var(--scene-a, 32, 132, 255), 0.3) 23%, transparent 29% 57%, rgba(var(--scene-b, 255, 155, 49), 0.5) 64%, transparent 70% 100%);
  filter: blur(0.12rem);
  mix-blend-mode: screen;
  transform: translateZ(2.8rem) rotateX(68deg);
}

.home-intro-portal::after {
  inset: 12%;
  border: 1px solid rgba(220, 255, 255, 0.68);
  box-shadow:
    inset 0 0 2.3rem rgba(var(--scene-a, 32, 132, 255), 0.36),
    0 0 2rem rgba(var(--scene-a, 32, 132, 255), 0.48),
    0 0 6rem rgba(16, 99, 255, 0.28);
  transform: translateZ(5rem) rotateY(72deg);
}

.home-intro-portal i {
  border: 1px solid rgba(180, 255, 255, 0.5);
  box-shadow: 0 0 1.1rem rgba(var(--scene-a, 32, 132, 255), 0.34);
}

.home-intro-portal i:nth-child(1) {
  transform: translateZ(1.25rem) rotateX(67deg) rotateZ(18deg) scaleX(0.68);
}

.home-intro-portal i:nth-child(2) {
  inset: 15%;
  border-color: rgba(255, 232, 183, 0.54);
  transform: translateZ(3.8rem) rotateY(70deg) rotateZ(-28deg) scaleX(0.64);
}

.home-intro-portal i:nth-child(3) {
  inset: 29%;
  border-color: rgba(230, 255, 255, 0.74);
  transform: translateZ(6.6rem) rotateX(26deg) rotateY(-44deg);
}

.home-intro-scroll-cue {
  left: 50%;
  bottom: clamp(1.35rem, 4.4vh, 3.4rem);
  width: 1.72rem;
  height: 2.78rem;
  border: 1px solid rgba(242, 255, 255, 0.82);
  border-radius: 999px;
  opacity: 0;
  box-shadow:
    0 0 0.8rem rgba(255, 255, 255, 0.18),
    0 0 1.65rem rgba(var(--scene-a, 32, 132, 255), 0.34);
  transform: translate3d(-50%, 0.8rem, 0);
  animation: homeIntroCueReveal 640ms cubic-bezier(0.16, 1, 0.3, 1) 2300ms both;
}

.home-intro-scroll-cue::before,
.home-intro-scroll-cue::after,
.home-intro-scroll-cue i {
  position: absolute;
  content: "";
  pointer-events: none;
}

.home-intro-scroll-cue::before {
  left: 50%;
  top: 0.55rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.72rem rgba(221, 255, 255, 0.95);
  transform: translateX(-50%);
  animation: homeIntroCueDot 1450ms cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.home-intro-scroll-cue::after,
.home-intro-scroll-cue i {
  left: 50%;
  bottom: -0.62rem;
  width: 0.68rem;
  height: 0.68rem;
  border-right: 1px solid rgba(242, 255, 255, 0.9);
  border-bottom: 1px solid rgba(242, 255, 255, 0.9);
  box-shadow: 0.14rem 0.14rem 0.8rem rgba(var(--scene-a, 32, 132, 255), 0.38);
  transform: translateX(-50%) rotate(45deg);
}

.home-intro-scroll-cue i {
  bottom: -1.02rem;
  opacity: 0.5;
}

.home-intro-experience.is-exiting .home-intro-video {
  will-change: transform, opacity;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 24%, rgba(0, 0, 0, 0.96) 43%, transparent 71%);
  mask-image: radial-gradient(ellipse at center, #000 24%, rgba(0, 0, 0, 0.96) 43%, transparent 71%);
  animation: homeIntroVideoCollapse 2500ms cubic-bezier(0.4, 0.02, 0.2, 1) both;
}

.home-intro-experience.is-exiting::before {
  animation: homeIntroBackdropFade 3100ms linear both;
}

.home-intro-experience.is-exiting .home-intro-void {
  will-change: opacity, transform;
  animation: homeIntroVoid 2600ms cubic-bezier(0.12, 0.76, 0.16, 1) both;
}

.home-intro-experience.is-exiting .home-intro-portal {
  will-change: opacity, transform;
  animation: homeIntroPortal 2450ms cubic-bezier(0.14, 0.88, 0.2, 1) 140ms both;
}

.home-intro-experience.is-exiting .home-intro-portal i:nth-child(1) {
  animation: homeIntroRingOne 1420ms cubic-bezier(0.12, 0.9, 0.16, 1) both;
}

.home-intro-experience.is-exiting .home-intro-portal i:nth-child(2) {
  animation: homeIntroRingTwo 1520ms cubic-bezier(0.12, 0.9, 0.16, 1) both;
}

.home-intro-experience.is-exiting .home-intro-portal i:nth-child(3) {
  animation: homeIntroRingThree 1360ms cubic-bezier(0.12, 0.9, 0.16, 1) both;
}

.home-intro-experience.is-exiting .home-intro-scroll-cue {
  animation: none;
  opacity: 0;
}

/* A finite camera flight: cached rings and light trails, transform/opacity
   only. No video clones, frame readback, or full-screen animated blur. */
.home-intro-depth,
.home-intro-streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.home-intro-depth i {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(64vmin, 40rem);
  aspect-ratio: 1;
  border: 1px solid rgba(129, 231, 255, 0.56);
  border-radius: 50%;
  box-shadow: inset 0 0 16px rgba(52, 166, 249, 0.15), 0 0 18px rgba(79, 211, 255, 0.2);
  opacity: 0;
  transform: translate3d(-50%, -50%, -900px) rotateY(-18deg) rotateX(12deg);
}

.home-intro-depth i:nth-child(even) { border-color: rgba(255, 195, 113, 0.5); }
.is-exiting .home-intro-depth i {
  animation: homeIntroDepthFlight 2200ms cubic-bezier(0.45, 0, 0.2, 1) calc(150ms + var(--ring) * 150ms) both;
  will-change: transform, opacity;
}

.home-intro-streaks i {
  position: absolute;
  left: 50%;
  top: 47%;
  width: min(36vw, 30rem);
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, transparent, rgba(134, 227, 255, 0.7), transparent);
  opacity: 0;
}

.is-exiting .home-intro-streaks i {
  animation: homeIntroLightFlight 1700ms ease-in-out calc(550ms + var(--ray) * 45ms) both;
}

@keyframes homeIntroDepthFlight {
  0% { opacity: 0; transform: translate3d(-50%, -50%, -1100px) rotateY(-25deg) rotateX(28deg) scale(0.4); }
  28% { opacity: 0.7; }
  64% { opacity: 0.55; transform: translate3d(-50%, -50%, 80px) rotateY(14deg) rotateX(-8deg) scale(1.25); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 740px) rotateY(0) rotateX(0) scale(1.8); }
}

@keyframes homeIntroLightFlight {
  0% { opacity: 0; transform: rotate(calc(var(--ray) * 45deg + 16deg)) translateX(2vmin) scaleX(0.04); }
  40% { opacity: 0.65; }
  100% { opacity: 0; transform: rotate(calc(var(--ray) * 45deg - 12deg)) translateX(65vmin) scaleX(1.3); }
}

/* Le mot-symbole reprend les couches et animations du prototype fourni. */
.home-wordmark-stage {
  display: none;
  width: min(94vw, 1500px);
  align-items: center;
  justify-content: center;
  justify-self: center;
  perspective: 1400px;
}

.home-wordmark {
  --olilap-tilt-x: 0deg;
  --olilap-tilt-y: 0deg;
  position: relative;
  display: inline-block;
  margin: 0;
  color: transparent;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(5rem, 18vw, 16rem);
  font-weight: 900;
  font-style: italic;
  line-height: 0.88;
  letter-spacing: -0.085em;
  white-space: nowrap;
  transform-style: preserve-3d;
  transform: rotateX(var(--olilap-tilt-x)) rotateY(var(--olilap-tilt-y));
  transition: transform 90ms linear;
  user-select: none;
  cursor: default;
}

/* Paint beyond the text advance: italic glyphs and the p descender extend
   outside the tight line box. Keep all three texture layers aligned. */
.home-wordmark .base,
.home-wordmark::before,
.home-wordmark::after {
  box-sizing: border-box;
  padding: 0.04em 0.12em 0.2em;
}

.home-wordmark .base {
  position: relative;
  z-index: 2;
  display: block;
  color: transparent;
  background: linear-gradient(180deg, #eaffff 0%, #8ffcff 9%, #3ed8e7 23%, #197f91 44%, #0c586b 62%, #0b4457 78%, #133849 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 0.025em rgba(179, 255, 255, 0.24);
  text-shadow:
    0 0.018em 0.012em rgba(255, 255, 255, 0.18),
    0 0.055em 0.04em rgba(0, 0, 0, var(--word-shadow-alpha, 0.52)),
    0 0.12em 0.11em rgba(0, 0, 0, var(--word-depth-alpha, 0.3));
  animation:
    textBreathe 4.8s ease-in-out infinite,
    baseHue 8s ease-in-out infinite alternate,
    surfaceMicroPulse 2.8s ease-in-out infinite;
}

.home-wordmark::before,
.home-wordmark::after {
  position: absolute;
  inset: 0;
  display: block;
  content: "Olilap";
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  white-space: inherit;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}

.home-wordmark::before {
  z-index: 3;
  background-size: 260% 100%;
  background-position: -120% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: screen;
  opacity: 0.88;
  animation: liquidSpectrum 4.6s cubic-bezier(0.55, 0.05, 0.25, 0.95) infinite;
}

.home-wordmark::after {
  z-index: 4;
  background: linear-gradient(115deg, transparent 0 37%, rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0.92) 48%, rgba(207, 255, 255, 0.55) 51%, rgba(255, 255, 255, 0.1) 57%, transparent 63% 100%);
  background-size: 250% 100%;
  background-position: -150% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(0.006em);
  opacity: 0.95;
  animation: glassSweep 3.7s cubic-bezier(0.2, 0.65, 0.22, 1) infinite;
}

.home-wordmark.intro {
  animation: none;
}

.home-wordmark.pulse {
  animation: clickPulse 640ms cubic-bezier(0.16, 0.9, 0.18, 1);
}

html.home-intro-complete .home-page .home-wordmark-stage,
html.home-intro-transition .home-page .home-wordmark-stage {
  display: flex;
}

html.home-intro-active .home-page .hero-copy,
html.home-intro-complete .home-page .hero-copy,
html.home-intro-transition .home-page .hero-copy {
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
}

html.home-intro-transition .home-page .home-wordmark-stage {
  will-change: transform, opacity;
  animation: homeIntroWordmarkOrbit 1900ms cubic-bezier(0.22, 0.7, 0.24, 1) 1300ms both;
}

html.home-intro-transition .home-page .home-wordmark.intro {
  animation: introReveal 1.45s cubic-bezier(0.16, 0.86, 0.18, 1) 1650ms both;
}

html.home-intro-transition .home-page #enterButton {
  pointer-events: none;
  animation: homeIntroCtaReveal 820ms cubic-bezier(0.16, 1, 0.3, 1) 2460ms both;
}

html.home-intro-transition .home-page .site-nav {
  animation: homeIntroDockReveal 880ms cubic-bezier(0.16, 1.1, 0.24, 1) 2560ms both;
}

html.home-intro-transition .home-page #particles,
html.home-intro-transition .home-page .ambient-orbs {
  animation: homeIntroAtmosphere 1000ms ease-out 2100ms both;
}

@keyframes homeIntroAtmosphere { from { opacity: 0; } to { opacity: 1; } }

@keyframes homeIntroBackdropFade {
  0%, 36% { opacity: 1; }
  57% { opacity: 0.82; }
  75% { opacity: 0.18; }
  92%, 100% { opacity: 0; }
}

@keyframes homeIntroWordmarkOrbit {
  0% { opacity: 0; transform: perspective(1400px) translate3d(0, 4rem, -80rem) rotateX(42deg) rotateY(-260deg) rotateZ(-14deg) scale(0.5); }
  34% { opacity: 1; transform: perspective(1400px) translate3d(0, 0.7rem, -6rem) rotateX(-12deg) rotateY(-42deg) rotateZ(3deg) scale(0.94); }
  72% { opacity: 1; transform: perspective(1400px) translate3d(0, -0.2rem, 1.8rem) rotateX(3deg) rotateY(7deg) rotateZ(-0.5deg) scale(1.015); }
  100% { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
}

/* Keep the mobile entrance on the final horizontal axis. Nested perspective
   and Y/Z rotations project the word away from that axis during the reveal.
   Retain its fade, approach and settling motion without a sideways orbit. */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  html.home-intro-transition .home-page .home-wordmark-stage {
    perspective: none;
    transform-origin: 50% 50%;
    animation-name: homeIntroWordmarkCentered;
  }
}
@keyframes homeIntroWordmarkCentered {
  0% { opacity: 0; transform: translateY(4rem) scale(.5); }
  34% { opacity: 1; transform: translateY(.7rem) scale(.94); }
  72% { opacity: 1; transform: translateY(-.2rem) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes homeIntroCueReveal {
  from { opacity: 0; transform: translate3d(-50%, 0.8rem, 0); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

@keyframes homeIntroCueDot {
  0%, 16% { opacity: 0; transform: translate(-50%, -0.12rem) scale(0.72); }
  35% { opacity: 1; }
  70% { opacity: 0.95; transform: translate(-50%, 0.92rem) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 1.13rem) scale(0.7); }
}

@keyframes homeIntroVideoCollapse {
  0% { opacity: 1; transform: perspective(1400px) translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
  18% { opacity: 1; transform: perspective(1400px) translate3d(0, 1vh, 80px) rotateX(-3deg) rotateY(4deg) rotateZ(-1deg) scale(1.025); }
  48% { opacity: 1; transform: perspective(1400px) translate3d(3vw, -2vh, -380px) rotateX(16deg) rotateY(-24deg) rotateZ(6deg) scale(0.82); }
  76% { opacity: 0.6; transform: perspective(1400px) translate3d(-2vw, -4vh, -1300px) rotateX(38deg) rotateY(-72deg) rotateZ(-18deg) scale(0.32); }
  100% { opacity: 0; transform: perspective(1400px) translate3d(0, -5vh, -2800px) rotateX(62deg) rotateY(-140deg) rotateZ(-42deg) scale(0.015); }
}

@keyframes homeIntroVoid {
  0% { opacity: 0; transform: scale(0.72); }
  25% { opacity: 0.22; transform: scale(0.9); }
  58% { opacity: 0.96; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.7); }
}

@keyframes homeIntroPortal {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.18) rotateZ(-18deg); }
  25% { opacity: 1; transform: translate3d(-50%, -50%, 4rem) scale(0.88) rotateZ(16deg); }
  58% { opacity: 0.86; transform: translate3d(-50%, -50%, -16rem) scale(1.5) rotateZ(78deg); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, -54rem) scale(0.16) rotateZ(166deg); }
}

@keyframes homeIntroRingOne {
  from { transform: translateZ(1.25rem) rotateX(67deg) rotateZ(18deg) scaleX(0.68); }
  to { opacity: 0; transform: translateZ(-24rem) rotateX(67deg) rotateZ(424deg) scaleX(1.8); }
}

@keyframes homeIntroRingTwo {
  from { transform: translateZ(3.8rem) rotateY(70deg) rotateZ(-28deg) scaleX(0.64); }
  to { opacity: 0; transform: translateZ(-34rem) rotateY(70deg) rotateZ(-492deg) scaleX(2.05); }
}

@keyframes homeIntroRingThree {
  from { transform: translateZ(6.6rem) rotateX(26deg) rotateY(-44deg); }
  to { opacity: 0; transform: translateZ(-46rem) rotateX(386deg) rotateY(-318deg) scale(1.72); }
}

@keyframes introReveal {
  0% { opacity: 0; filter: blur(0.08em) brightness(1.8); transform: translateY(0.28em) rotateX(-35deg) scale(0.82); }
  60% { opacity: 1; filter: blur(0.008em) brightness(1.2); transform: translateY(-0.025em) rotateX(4deg) scale(1.025); }
  100% { opacity: 1; filter: none; transform: translateY(0) rotateX(0) scale(1); }
}

@keyframes textBreathe {
  0%, 100% { filter: saturate(1.02) brightness(0.98) contrast(1.05); }
  50% { filter: saturate(1.18) brightness(1.08) contrast(1.08); }
}

@keyframes baseHue {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

@keyframes liquidSpectrum {
  0% { background-position: -130% 50%; opacity: 0.38; }
  20% { opacity: 0.92; }
  58% { background-position: 155% 50%; opacity: 0.82; }
  72%, 100% { background-position: 155% 50%; opacity: 0.34; }
}

@keyframes glassSweep {
  0%, 16% { background-position: -160% 50%; opacity: 0; }
  26% { opacity: 0.9; }
  55% { background-position: 145% 50%; opacity: 0.92; }
  68%, 100% { background-position: 145% 50%; opacity: 0; }
}

@keyframes surfaceMicroPulse {
  0%, 100% { text-shadow: 0 0.018em 0.012em rgba(255, 255, 255, 0.18), 0 0.055em 0.04em rgba(0, 0, 0, var(--word-shadow-alpha, 0.52)), 0 0.12em 0.11em rgba(0, 0, 0, var(--word-depth-alpha, 0.29)); }
  50% { text-shadow: 0 0.018em 0.012em rgba(255, 255, 255, 0.24), 0 0.055em 0.04em rgba(0, 0, 0, var(--word-shadow-alpha, 0.5)), 0 0.12em 0.11em rgba(0, 0, 0, var(--word-depth-alpha, 0.29)); }
}

@keyframes clickPulse {
  0% { transform: rotateX(var(--olilap-tilt-x)) rotateY(var(--olilap-tilt-y)) scale(1); filter: brightness(1); }
  35% { transform: rotateX(var(--olilap-tilt-x)) rotateY(var(--olilap-tilt-y)) scale(1.035); filter: brightness(1.32) saturate(1.35); }
  100% { transform: rotateX(var(--olilap-tilt-x)) rotateY(var(--olilap-tilt-y)) scale(1); filter: brightness(1); }
}

@keyframes homeIntroCtaReveal {
  from { opacity: 0; filter: blur(0.6rem); transform: translate3d(0, 2.2rem, 0) scale(0.76); }
  72% { opacity: 1; filter: blur(0); transform: translate3d(0, -0.18rem, 0) scale(1.035); }
  to { opacity: 1; filter: none; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes homeIntroDockReveal {
  from { opacity: 0; filter: blur(0.5rem); transform: translateX(-50%) translate3d(0, -4rem, 0) rotateX(-17deg) scale(0.86); }
  68% { opacity: 1; filter: blur(0); transform: translateX(-50%) translate3d(0, 0.18rem, 0) rotateX(2deg) scale(1.018); }
  to { opacity: 1; filter: none; transform: translateX(-50%) translate3d(0, 0, 0) rotateX(0) scale(1); }
}

@media (max-width: 700px) {
  .home-page .hero {
    gap: 1.75rem;
  }

  .home-wordmark {
    font-size: clamp(5rem, 34vw, 12rem);
  }

  .home-intro-portal {
    width: min(94vmin, 28rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-intro-experience::before,
  .home-intro-experience *,
  .home-wordmark-stage,
  .home-wordmark,
  .home-wordmark::before,
  .home-wordmark::after,
  .home-wordmark .base {
    animation: none !important;
    transition: none !important;
  }

  .home-intro-scroll-cue {
    animation: none;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }

  .home-intro-scroll-cue::before {
    animation: none;
  }

  .home-intro-portal,
  .home-intro-void {
    display: none;
  }
}

/*! ============================================================
    LiquidGlass — boutons en verre liquide (style iOS 26)
    Composant autonome, prêt à intégrer :

      <link rel="stylesheet" href="liquid-glass.css">
      <script src="liquid-glass.js" defer></script>

      <button class="lg-btn">Mon bouton</button>
      <button class="lg-btn lg-blue">Teinté</button>
      <button class="lg-btn lg-circle" aria-label="Lecture">▶</button>

    Tout est préfixé "lg-" : aucune fuite de style globale.
    Sans JavaScript, le bouton reste un beau verre statique ;
    le JS injecte les couches d'animation et la physique.
    Personnalisation par variables CSS (voir .lg-btn) et profils
    lg-blue / lg-teal / lg-violet.
    ============================================================ */

.lg-btn {
  /* ---- variables de thème (surchargez-les librement) ---- */
  --lg-radius: 999px;
  --lg-face-hi: rgba(190, 225, 235, .085);   /* face du verre, haut  */
  --lg-face-lo: rgba(160, 205, 220, .03);    /* face du verre, bas   */
  --lg-edge:      rgba(205, 238, 255, .38);  /* bande de réfraction  */
  --lg-edge-soft: rgba(225, 245, 255, .17);  /* flancs / haut        */
  --lg-rim-o: .9;                            /* opacité du liseré    */
  --lg-caustic: rgba(235, 250, 255, .32);    /* flaque de lumière    */
  --lg-glow:   rgba(110, 180, 235, .16);     /* halo ambiant         */
  --lg-glow-h: rgba(130, 200, 255, .30);     /* halo au survol       */
  --lg-fringe: rgba(120, 180, 255, 0);       /* lueur colorée d'env. */
  --lg-fringe-x: 0px;
  --lg-fringe-y: 10px;
  --lg-text: rgba(255, 255, 255, .96);

  /* ---- variables pilotées par le JS (ne pas toucher) ---- */
  --lg-mx: 50%; --lg-my: 38%;
  --lg-ang: 200deg;
  --lg-parx: 0px; --lg-pary: 0px;
  --lg-sweep-delay: 0s;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  border-radius: var(--lg-radius);
  padding: 25px 46px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: var(--lg-text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .30);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;

  /* face du verre : spéculaire large sous le curseur + teinte */
  background:
    radial-gradient(130% 170% at var(--lg-mx) var(--lg-my), rgba(255,255,255,.10), rgba(255,255,255,0) 56%),
    linear-gradient(180deg, var(--lg-face-hi), var(--lg-face-lo));
  backdrop-filter: blur(18px) saturate(175%) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(1.04);

  /* l'épaisseur du verre : bandes de réfraction internes,
     lèvres nettes haut/bas, halo ambiant, frange colorée, ombre */
  box-shadow:
    inset 0 -26px 30px -16px var(--lg-edge),
    inset 0  16px 22px -14px var(--lg-edge-soft),
    inset 20px 0 30px -20px var(--lg-edge-soft),
    inset -20px 0 30px -20px var(--lg-edge-soft),
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset 0 -1.5px .5px rgba(255, 255, 255, .34),
    inset 0 0 22px rgba(255, 255, 255, .045),
    0 0 34px -4px var(--lg-glow),
    var(--lg-fringe-x) var(--lg-fringe-y) 44px -8px var(--lg-fringe),
    0 26px 52px -18px rgba(0, 0, 0, .55),
    0 8px 18px -8px rgba(0, 0, 0, .38);

  transform: translateZ(0);
  will-change: transform;
  transition: box-shadow .5s ease;
}

.lg-btn:hover { --lg-glow: var(--lg-glow-h); }

.lg-btn:focus-visible {
  outline: 2px solid rgba(170, 210, 255, .85);
  outline-offset: 3px;
}

.lg-btn:disabled { opacity: .45; pointer-events: none; }

/* Liseré net : dégradé conique, plus lumineux en bas (lentille) */
.lg-btn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.8px;
  pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.58),
    rgba(255,255,255,.20) 12%,
    rgba(255,255,255,.36) 25%,
    rgba(255,255,255,.18) 38%,
    rgba(255,255,255,.88) 50%,
    rgba(255,255,255,.18) 62%,
    rgba(255,255,255,.36) 75%,
    rgba(255,255,255,.20) 88%,
    rgba(255,255,255,.58));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: var(--lg-rim-o);
  z-index: 2;
}

/* Flaque de lumière réfractée sous le bord inférieur */
.lg-btn::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 2px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 100%, var(--lg-caustic), transparent 72%);
  filter: blur(3px);
  pointer-events: none;
  z-index: 2;
}

/* ---- Couches injectées par le JS ---- */
.lg-layers {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}
.lg-layers > * {
  position: absolute; inset: 0;
  border-radius: inherit;
}

/* Glints tournants au repos : reflets d'environnement qui glissent
   lentement sur la tranche (rotation = transform, compositor only) */
.lg-rimIdle {
  padding: 2.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: .55;
  transition: opacity .45s ease;
  overflow: hidden;
}
.lg-rimIdle::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 220%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0 10%,
    rgba(255,255,255,.55) 15%,
    transparent 21%,
    transparent 48%,
    rgba(170,220,255,.40) 55%,
    transparent 62%,
    transparent 82%,
    rgba(255,200,250,.22) 87%,
    transparent 92%);
  animation: lg-spin 16s linear infinite;
}
@keyframes lg-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.lg-btn:hover .lg-rimIdle { opacity: 0; }

/* Rim light actif : le point brillant du liseré suit le curseur */
.lg-rim {
  padding: 2.2px;
  background: conic-gradient(from var(--lg-ang) at 50% 50%,
    rgba(255,255,255,.95),
    rgba(255,255,255,.16) 12%,
    rgba(255,255,255,.05) 34%,
    rgba(255,255,255,.48) 50%,
    rgba(255,255,255,.05) 66%,
    rgba(255,255,255,.16) 88%,
    rgba(255,255,255,.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
}
.lg-btn:hover .lg-rim, .lg-btn.lg-pressing .lg-rim { opacity: 1; }

/* Dispersion chromatique : franges cyan/magenta décalées de part
   et d'autre du point brillant, sur une bande plus large */
.lg-disp {
  padding: 5px;
  background:
    conic-gradient(from calc(var(--lg-ang) - 14deg) at 50% 50%,
      rgba(110, 225, 255, .50), transparent 9%, transparent 91%, rgba(110, 225, 255, .50)),
    conic-gradient(from calc(var(--lg-ang) + 14deg) at 50% 50%,
      rgba(255, 130, 240, .38), transparent 9%, transparent 91%, rgba(255, 130, 240, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  filter: blur(1px);
}
.lg-btn:hover .lg-disp, .lg-btn.lg-pressing .lg-disp { opacity: .8; }

/* Spéculaire : cœur brillant + auréole qui suivent le curseur */
.lg-spec {
  background:
    radial-gradient(36px circle at var(--lg-mx) var(--lg-my), rgba(255,255,255,.40), transparent 62%),
    radial-gradient(140px circle at var(--lg-mx) var(--lg-my), rgba(255,255,255,.15), transparent 72%);
  opacity: 0;
  transition: opacity .35s ease;
}
.lg-btn:hover .lg-spec, .lg-btn.lg-pressing .lg-spec { opacity: 1; }

/* Balayage lumineux périodique + conteneur des ondes de clic */
.lg-glare { overflow: hidden; }
.lg-glare::before {
  content: "";
  position: absolute;
  top: -46%; bottom: -46%;
  left: 0; width: 32%;
  background: linear-gradient(105deg, transparent,
    rgba(255,255,255,.13) 40%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.13) 60%, transparent);
  transform: translateX(-340%) skewX(-18deg);
  animation: lg-sweep 7.5s cubic-bezier(.55, 0, .3, 1) infinite;
  animation-delay: var(--lg-sweep-delay);
}
@keyframes lg-sweep {
  0%        { transform: translateX(-340%) skewX(-18deg); }
  13%, 100% { transform: translateX(720%)  skewX(-18deg); }
}

/* Onde de lumière au clic, avec fine frange chromatique */
.lg-ripple {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.52), rgba(255,255,255,.13) 38%, transparent 60%),
    radial-gradient(circle, transparent 56%, rgba(120,220,255,.28) 65%, transparent 72%),
    radial-gradient(circle, transparent 62%, rgba(255,140,250,.20) 71%, transparent 78%);
  transform: translate(-50%, -50%) scale(0);
  animation: lg-ripple .8s cubic-bezier(.2, .65, .25, 1) forwards;
}
@keyframes lg-ripple {
  to { transform: translate(-50%, -50%) scale(15); opacity: 0; }
}

/* Contenu (le JS enveloppe les enfants dans .lg-content) :
   parallaxe douce, le contenu "flotte" sous le verre */
.lg-content {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  transform: translate3d(var(--lg-parx), var(--lg-pary), 0);
}
.lg-btn > :where(:not(.lg-layers):not(.lg-content)) {
  position: relative;
  z-index: 3; /* lisibilité même sans JS */
}
.lg-btn svg { display: block; flex: none; }

/* État pressé : le verre se comprime, la lumière se resserre */
.lg-btn.lg-pressing {
  box-shadow:
    inset 0 -18px 24px -14px var(--lg-edge),
    inset 0 3px 8px rgba(0, 0, 0, .25),
    inset 0 -1.5px .5px rgba(255, 255, 255, .30),
    inset 0 0 26px rgba(255, 255, 255, .07),
    0 0 40px -4px var(--lg-glow-h),
    var(--lg-fringe-x) var(--lg-fringe-y) 40px -10px var(--lg-fringe),
    0 12px 26px -12px rgba(0, 0, 0, .5),
    0 4px 10px -5px rgba(0, 0, 0, .35);
}

/* ---- Variantes ---- */

/* Verre teinté bleu (bouton d'action principal) */
.lg-blue {
  --lg-face-hi: rgba(105, 155, 255, .32);
  --lg-face-lo: rgba(48, 88, 232, .18);
  --lg-edge:      rgba(175, 215, 255, .60);
  --lg-edge-soft: rgba(190, 220, 255, .30);
  --lg-caustic: rgba(210, 235, 255, .45);
  --lg-glow:   rgba(72, 132, 255, .38);
  --lg-glow-h: rgba(96, 156, 255, .55);
  --lg-fringe: rgba(150, 95, 255, .35);
  --lg-fringe-x: -14px;
  --lg-fringe-y: 16px;
  text-shadow: 0 1px 4px rgba(10, 30, 120, .45);
}

/* Verre cyan profond : transmission froide, comme une lentille mince. */
.lg-teal {
  --lg-face-hi: rgba(86, 182, 220, .14);
  --lg-face-lo: rgba(26, 104, 144, .07);
  --lg-edge: rgba(174, 232, 255, .48);
  --lg-edge-soft: rgba(195, 238, 255, .24);
  --lg-caustic: rgba(190, 238, 255, .40);
  --lg-glow: rgba(53, 160, 210, .22);
  --lg-glow-h: rgba(83, 203, 243, .40);
}

/* Verre froid avec kick magenta latéral, fidèle au contrôle droit. */
.lg-violet {
  --lg-face-hi: rgba(135, 159, 231, .16);
  --lg-face-lo: rgba(96, 93, 176, .08);
  --lg-edge: rgba(203, 226, 255, .46);
  --lg-edge-soft: rgba(223, 235, 255, .22);
  --lg-caustic: rgba(222, 232, 255, .36);
  --lg-glow: rgba(103, 142, 226, .18);
  --lg-glow-h: rgba(136, 178, 255, .35);
  --lg-fringe: rgba(225, 130, 245, .30);
  --lg-fringe-x: 16px;
  --lg-fringe-y: 8px;
}

/* Bouton rond (icône seule) */
.lg-circle {
  width: 92px;
  height: 92px;
  padding: 0;
  --lg-radius: 50%;
}

/* ---- Mode WebGL (rendu physique du verre) ----
   Quand le moteur GLSL est actif, le canvas peint TOUT le visuel
   (verre, reflets, réfraction, ombre, halo) : on neutralise donc
   les couches CSS pour éviter tout double rendu. Le label DOM
   reste au-dessus (texte net + accessibilité). */
.lg-gl {
  position: absolute;
  left: -96px; top: -96px;
  width: calc(100% + 192px);
  height: calc(100% + 192px);
  pointer-events: none;
  z-index: 0;
}
.lg-btn.lg-gl-on {
  background: none;
  box-shadow: none;
  /* le givrage de la face est fait ICI, sur le vrai fond de la
     page — le shader laisse la face transparente (alpha faible)
     et ne peint en opaque que la tranche du verre */
  backdrop-filter: blur(1px) saturate(110%) brightness(1.01);
  -webkit-backdrop-filter: blur(1px) saturate(110%) brightness(1.01);
  transition: none;
}
.lg-btn.lg-gl-on::before,
.lg-btn.lg-gl-on::after,
.lg-btn.lg-gl-on .lg-layers { display: none; }

/* ---- Accessibilité : mouvement réduit ----
   Les animations autonomes sont coupées ; le JS bascule de lui-même
   sur un profil d'interaction discret. Le fallback :hover/:active ne
   sert que si le JS est absent (html sans .lg-js). */
@media (prefers-reduced-motion: reduce) {
  .lg-rimIdle::before, .lg-glare::before { animation: none !important; }
  .lg-ripple { display: none; }
  html:not(.lg-js) .lg-btn { transition: box-shadow .2s ease, transform .2s ease; }
  html:not(.lg-js) .lg-btn:hover  { transform: scale(1.02); }
  html:not(.lg-js) .lg-btn:active { transform: scale(.97); }
}

/*
 * Intégration Olilap
 * ------------------
 * Le matériau CSS est présent dans le HTML compilé avant toute hydratation.
 * Le moteur WebGL enrichit ensuite les mêmes contrôles. Ce fichier adapte
 * les dimensions aux layouts du site et transpose les
 * mêmes couches optiques sur les interfaces non interactives.
 */

.lg-environment-source {
  position: fixed;
  inset: auto auto 0 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(50%);
  overflow: hidden;
  pointer-events: none;
}

/* Neutralisation des anciennes peaux sans modifier la géométrie des pages. */
html .lg-btn {
  --lg-radius: 999px;
  border: 0 !important;
  border-radius: var(--lg-radius) !important;
  color: var(--lg-text) !important;
  filter: none !important;
  overflow: visible !important;
}

/* Static counterpart of the WebGL lens: clear centre, concentric refraction
   bands and inset highlights. The final shader and its physics are unchanged. */
html .lg-btn:not(.lg-gl-on) {
  background: linear-gradient(180deg, rgba(183, 219, 239, .075), rgba(12, 20, 34, .12)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(220, 242, 255, .16),
    inset 0 0 0 5px rgba(5, 11, 21, .28),
    inset 0 0 0 7px rgba(202, 236, 255, .13),
    inset 0 0 0 10px rgba(8, 17, 31, .25),
    inset 0 12px 5px -9px rgba(229, 248, 255, .6),
    inset 0 -12px 5px -9px rgba(199, 232, 250, .26),
    0 8px 18px -8px rgba(0, 0, 0, .38) !important;
  backdrop-filter: blur(1px) saturate(110%) brightness(1.01) !important;
  -webkit-backdrop-filter: blur(1px) saturate(110%) brightness(1.01) !important;
}

html .lg-btn:not(.lg-gl-on)::before {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
  display: block !important;
  padding: 1.8px !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, .58),
    rgba(255, 255, 255, .20) 12%,
    rgba(255, 255, 255, .36) 25%,
    rgba(255, 255, 255, .18) 38%,
    rgba(255, 255, 255, .88) 50%,
    rgba(255, 255, 255, .18) 62%,
    rgba(255, 255, 255, .36) 75%,
    rgba(255, 255, 255, .20) 88%,
    rgba(255, 255, 255, .58)) !important;
  box-shadow: none !important;
  opacity: var(--lg-rim-o) !important;
  pointer-events: none !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
}

html .lg-btn:not(.lg-gl-on)::after {
  content: "" !important;
  position: absolute !important;
  inset: auto 16% 8px !important;
  transform: none !important;
  animation: none !important;
  z-index: 2 !important;
  display: block !important;
  width: auto !important;
  height: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(50% 100% at 50% 100%, var(--lg-caustic), transparent 72%) !important;
  box-shadow: none !important;
  filter: blur(3px) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html .lg-btn > .lg-layers {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

html .lg-btn > .lg-content {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;
  -webkit-text-fill-color: currentColor !important;
}

html .lg-btn > .lg-content::before,
html .lg-btn > .lg-content::after,
html .lg-btn > .lg-layers::before,
html .lg-btn > .lg-layers::after {
  content: none !important;
}

html .lg-btn > .lg-gl {
  position: absolute !important;
  top: -96px !important;
  left: -96px !important;
  z-index: 0 !important;
  display: block !important;
  width: calc(100% + 192px) !important;
  height: calc(100% + 192px) !important;
  max-width: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  pointer-events: none !important;
}

/* Le dock conserve exactement le canevas WebGL d'origine. La marge élargie
   reste réservée aux autres contrôles et interfaces larges. */
html .site-nav .lg-btn > .lg-gl {
  top: -56px !important;
  left: -56px !important;
  width: calc(100% + 112px) !important;
  height: calc(100% + 112px) !important;
}

html .lg-btn.lg-gl-on {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(1px) saturate(110%) brightness(1.01) !important;
  -webkit-backdrop-filter: blur(1px) saturate(110%) brightness(1.01) !important;
}

html .lg-btn.lg-gl-on::before,
html .lg-btn.lg-gl-on::after,
html .lg-btn.lg-gl-on > .lg-layers {
  display: none !important;
}

/* Adaptation de taille : le verre reste identique, seul son cadre suit le site. */
html .brand.lg-btn {
  height: 3.35rem;
  padding: .36rem .8rem .36rem .42rem !important;
}

html .nav-links a.lg-btn {
  /*
   * Le grossissement du dock appartient au <li>. Les anciennes variables
   * appliquées au lien doublaient l'échelle au focus clavier et entraient en
   * concurrence avec le transform inline du moteur LiquidGlass.
   */
  --dock-scale: 1 !important;
  --dock-lift: 0px !important;
  --dock-glow: 0 !important;
  flex: 0 0 var(--dock-base-item-width) !important;
  min-width: var(--dock-base-item-width) !important;
  min-height: 3.05rem;
  padding: .8rem .88rem !important;
  text-align: center;
}

html .music-toggle.lg-btn,
html .dock-menu-toggle.lg-btn {
  width: 3.15rem;
  height: 3.15rem;
  padding: 0 !important;
}

html .dock-menu-toggle.lg-btn {
  display: none;
}

html .site-nav.is-menu-dock .dock-menu-toggle.lg-btn {
  display: grid;
}

html .filter-button.lg-btn {
  min-height: 2.9rem;
  padding: .72rem 1.15rem !important;
  font-size: .88rem;
}

html .tutorials-index a.lg-btn {
  width: 100%;
  min-height: 3.2rem;
  padding: .7rem .78rem !important;
  font-size: .88rem;
}

/* Dock dimensions are owned by glass-harmony.css for both breakpoints. */
html .music-permission-close.lg-btn {
  position: absolute !important;
  top: .8rem;
  right: .8rem;
  z-index: 4;
  padding: 0 !important;
}

/* Le UL n'est qu'un layout. Il n'est jamais une deuxième interface. */
html .nav-links,
html .site-nav.is-menu-dock .nav-links {
  border: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Aucun pseudo-panneau interne dans le dock compact. */
html .site-nav.is-menu-dock .nav-links::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/*
 * L'ancienne arrivée animait transform sur le host et bloquait la physique
 * exacte (aimantation, pression et rebond). Le panneau conserve son entrée ;
 * le bouton, lui, reste entièrement piloté par LiquidGlass.
 */
html .no-cookie-popup__action.lg-btn {
  animation: none !important;
}

html .nav-links li {
  --dock-scale: 1;
  --dock-lift: 0px;
  --dock-glow: 0;
  position: relative;
  z-index: var(--dock-z, 1);
  transform: translate3d(0, var(--dock-lift), 0) scale(var(--dock-scale));
  transform-origin: 50% 100%;
  transition:
    transform 480ms cubic-bezier(.16, 1.42, .24, 1),
    filter 320ms ease,
    opacity 260ms ease;
  will-change: transform;
}

html .nav-links li:has(a:hover),
html .nav-links li:has(a:focus-visible) {
  filter: brightness(calc(1 + var(--dock-glow) * .14));
}

/* Matériau des interfaces : mêmes constantes, sans comportement de bouton. */
html .lg-surface {
  --lg-face-hi: rgba(190, 225, 235, .085);
  --lg-face-lo: rgba(160, 205, 220, .03);
  --lg-edge: rgba(205, 238, 255, .38);
  --lg-edge-soft: rgba(225, 245, 255, .17);
  --lg-rim-o: .9;
  --lg-caustic: rgba(235, 250, 255, .32);
  --lg-glow: rgba(110, 180, 235, .16);
  --lg-glow-h: rgba(130, 200, 255, .30);
  --lg-mx: 50%;
  --lg-my: 38%;
  --lg-ang: 200deg;
  isolation: isolate;
  border-color: transparent !important;
  background: none !important;
  background-image: none !important;
  /* L'ombre appartient au panneau extérieur, pas au matériau enfant : elle
     reste ainsi visible même lorsque le contenu doit être découpé par le
     border-radius avec overflow:hidden. Cela ne change pas la géométrie. */
  box-shadow:
    0 0 34px -4px var(--lg-glow),
    0 26px 52px -18px rgba(0, 0, 0, .55),
    0 8px 18px -8px rgba(0, 0, 0, .38) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Les interfaces reprennent la rondeur généreuse des boutons sans devenir
   des boutons : grands panneaux, sous-surfaces et barres ont chacun leur
   rayon, tandis que le dock conserve sa géométrie propre. */
html .lg-surface:not(.site-nav) {
  border-radius: var(--liquid-glass-panel-radius) !important;
}

html .filter-bar.lg-surface {
  border-radius: 999px !important;
}

html :is(.tutorial-media, .showcase-media).lg-surface {
  border-radius: var(--liquid-glass-inner-radius) !important;
}

html .lg-surface--positioned {
  position: relative;
}

html .lg-surface > .lg-surface__material {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(130% 170% at var(--lg-mx) var(--lg-my), rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, var(--lg-face-hi), var(--lg-face-lo));
  box-shadow:
    inset 0 -26px 30px -16px var(--lg-edge),
    inset 0 16px 22px -14px var(--lg-edge-soft),
    inset 20px 0 30px -20px var(--lg-edge-soft),
    inset -20px 0 30px -20px var(--lg-edge-soft),
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset 0 -1.5px .5px rgba(255, 255, 255, .34),
    inset 0 0 22px rgba(255, 255, 255, .045);
  backdrop-filter: blur(18px) saturate(175%) brightness(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(1.04);
  pointer-events: none;
  transition:
    box-shadow .5s ease,
    filter .5s ease,
    transform 650ms cubic-bezier(.16, 1.3, .24, 1);
}

html .lg-surface > .lg-surface__material::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1.8px;
  border-radius: inherit;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(255, 255, 255, .58),
    rgba(255, 255, 255, .20) 12%,
    rgba(255, 255, 255, .36) 25%,
    rgba(255, 255, 255, .18) 38%,
    rgba(255, 255, 255, .88) 50%,
    rgba(255, 255, 255, .18) 62%,
    rgba(255, 255, 255, .36) 75%,
    rgba(255, 255, 255, .20) 88%,
    rgba(255, 255, 255, .58));
  opacity: var(--lg-rim-o);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

html .lg-surface > .lg-surface__material::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 2px;
  left: 12%;
  z-index: 4;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(50% 100% at 50% 100%, var(--lg-caustic), transparent 72%);
  filter: blur(3px);
  pointer-events: none;
}

.lg-surface__rim-idle,
.lg-surface__rim,
.lg-surface__dispersion,
.lg-surface__specular,
.lg-surface__glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.lg-surface__rim-idle {
  z-index: 2;
  overflow: hidden;
  padding: 2.5px;
  opacity: .55;
  transition: opacity .45s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.lg-surface__rim-idle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg,
    transparent 0 10%,
    rgba(255, 255, 255, .55) 15%,
    transparent 21%,
    transparent 48%,
    rgba(170, 220, 255, .40) 55%,
    transparent 62%,
    transparent 82%,
    rgba(255, 200, 250, .22) 87%,
    transparent 92%);
  animation: lg-spin 16s linear infinite;
}

/* The conic light depends on angle, not radius. A square covering the
   panel's diagonal keeps the same rotating light without a 220%-wide
   texture (several million unused pixels on wide, shallow panels).
   The rim is already absolutely sized; its container does not size content.
   Include its two 2.5px insets and 2px raster safety. Keep the original
   maximum for tall panels, and the original rule in unsupported browsers. */
@supports (width: hypot(3px, 4px)) and (container-type: size) and (width: 1cqw) {
  .lg-surface__rim-idle { container-type: size; }
  .lg-surface__rim-idle::before {
    width: min(220%, calc(hypot(calc(100cqw + 5px), calc(100cqh + 5px)) + 2px));
  }
}

.lg-surface__rim {
  z-index: 3;
  padding: 2.2px;
  background: conic-gradient(from var(--lg-ang) at 50% 50%,
    rgba(255, 255, 255, .95),
    rgba(255, 255, 255, .16) 12%,
    rgba(255, 255, 255, .05) 34%,
    rgba(255, 255, 255, .48) 50%,
    rgba(255, 255, 255, .05) 66%,
    rgba(255, 255, 255, .16) 88%,
    rgba(255, 255, 255, .95));
  opacity: 0;
  transition: opacity .4s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.lg-surface__dispersion {
  z-index: 2;
  padding: 5px;
  background:
    conic-gradient(from calc(var(--lg-ang) - 14deg) at 50% 50%,
      rgba(110, 225, 255, .50), transparent 9%, transparent 91%, rgba(110, 225, 255, .50)),
    conic-gradient(from calc(var(--lg-ang) + 14deg) at 50% 50%,
      rgba(255, 130, 240, .38), transparent 9%, transparent 91%, rgba(255, 130, 240, .38));
  filter: blur(1px);
  opacity: 0;
  transition: opacity .4s ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.lg-surface__specular {
  z-index: 1;
  background:
    radial-gradient(36px circle at var(--lg-mx) var(--lg-my), rgba(255, 255, 255, .40), transparent 62%),
    radial-gradient(140px circle at var(--lg-mx) var(--lg-my), rgba(255, 255, 255, .15), transparent 72%);
  opacity: 0;
  transition: opacity .35s ease;
}

.lg-surface__glare {
  z-index: 1;
  overflow: hidden;
}

.lg-surface__glare::before {
  content: "";
  position: absolute;
  top: -46%;
  bottom: -46%;
  left: 0;
  width: 32%;
  background: linear-gradient(105deg, transparent,
    rgba(255, 255, 255, .13) 40%, rgba(255, 255, 255, .38) 50%, rgba(255, 255, 255, .13) 60%, transparent);
  transform: translateX(-340%) skewX(-18deg);
  animation: lg-sweep 7.5s cubic-bezier(.55, 0, .3, 1) infinite;
}

html .lg-surface.is-lg-hovered > .lg-surface__material {
  box-shadow:
    inset 0 -26px 30px -16px var(--lg-edge),
    inset 0 16px 22px -14px var(--lg-edge-soft),
    inset 20px 0 30px -20px var(--lg-edge-soft),
    inset -20px 0 30px -20px var(--lg-edge-soft),
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset 0 -1.5px .5px rgba(255, 255, 255, .34),
    inset 0 0 22px rgba(255, 255, 255, .045);
}

html .lg-surface.is-lg-hovered {
  box-shadow:
    0 0 34px -4px var(--lg-glow-h),
    0 26px 52px -18px rgba(0, 0, 0, .55),
    0 8px 18px -8px rgba(0, 0, 0, .38) !important;
}

.lg-surface.is-lg-hovered > .lg-surface__material > .lg-surface__rim-idle {
  opacity: 0;
}

.lg-surface.is-lg-hovered > .lg-surface__material > .lg-surface__rim,
.lg-surface.is-lg-hovered > .lg-surface__material > .lg-surface__specular {
  opacity: 1;
}

.lg-surface.is-lg-hovered > .lg-surface__material > .lg-surface__dispersion {
  opacity: .8;
}

/* Les anciens pseudo-éléments du dock seraient une troisième peau. */
html .site-nav.lg-surface::before,
html .site-nav.lg-surface::after {
  content: none !important;
}

html .site-nav.is-dock-active > .lg-surface__material {
  transform: scaleX(calc(1 + var(--dock-energy, 0) * .022))
    scaleY(calc(1 + var(--dock-energy, 0) * .08));
  filter: brightness(calc(1 + var(--dock-energy, 0) * .13))
    saturate(calc(1 + var(--dock-energy, 0) * .18));
}

html .site-nav.is-dock-active .lg-surface__glare::before {
  animation: lg-dock-sweep 950ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes lg-dock-sweep {
  from { transform: translateX(-340%) skewX(-18deg); }
  to { transform: translateX(720%) skewX(-18deg); }
}

/* Champs et petites interfaces : matériau identique, aucune physique de bouton. */
html .lg-field,
html .lg-chip {
  --lg-face-hi: rgba(190, 225, 235, .085);
  --lg-face-lo: rgba(160, 205, 220, .03);
  --lg-edge: rgba(205, 238, 255, .38);
  --lg-edge-soft: rgba(225, 245, 255, .17);
  --lg-glow: rgba(110, 180, 235, .16);
  border-color: rgba(205, 238, 255, .38) !important;
  background:
    radial-gradient(130% 170% at 50% 38%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 56%),
    linear-gradient(180deg, var(--lg-face-hi), var(--lg-face-lo)) !important;
  box-shadow:
    inset 0 -18px 24px -16px var(--lg-edge),
    inset 0 12px 18px -14px var(--lg-edge-soft),
    inset 0 1.5px 0 rgba(255, 255, 255, .28),
    inset 0 -1.5px .5px rgba(255, 255, 255, .34),
    0 0 24px -6px var(--lg-glow),
    0 14px 30px -18px rgba(0, 0, 0, .5) !important;
  backdrop-filter: blur(18px) saturate(175%) brightness(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(175%) brightness(1.04) !important;
}

html .lg-field {
  border-radius: var(--liquid-glass-field-radius) !important;
}

html .lg-chip {
  border-radius: var(--liquid-glass-item-radius) !important;
}

html :is(
  .reading-progress,
  .lesson-meta span,
  .tag-list li,
  .project-meter,
  .preview-footer,
  .cv-orbital-card__chip
).lg-chip {
  border-radius: 999px !important;
}

html .channel-icon.lg-chip {
  border-radius: 50% !important;
}

/* Un seul panneau enveloppe aussi le menu compact. */
@media (max-width: 1024px) {
  html .site-nav.is-menu-dock {
    flex-wrap: wrap;
    align-content: flex-start;
    transition:
      width 420ms cubic-bezier(.16, 1.16, .24, 1),
      min-height 520ms cubic-bezier(.16, 1.24, .24, 1),
      padding 420ms cubic-bezier(.16, 1, .3, 1);
  }

  html .site-nav.is-menu-dock .nav-links,
  html .site-nav.is-menu-dock:not(.is-menu-open) .nav-links {
    position: relative !important;
    inset: auto !important;
    order: 4;
    display: grid !important;
    flex: 0 0 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-.8rem) scale(.965) !important;
    transform-origin: top center;
    transition:
      max-height 540ms cubic-bezier(.16, 1.2, .24, 1),
      padding 420ms cubic-bezier(.16, 1, .3, 1),
      opacity 260ms ease,
      visibility 260ms ease,
      transform 460ms cubic-bezier(.16, 1.24, .24, 1);
  }

  html .site-nav.is-menu-dock.is-menu-open .nav-links {
    max-height: 19rem;
    margin-top: .36rem;
    padding: .72rem !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  html .site-nav.is-menu-open > .lg-surface__material {
    filter: brightness(1.1) saturate(1.16);
    animation: lg-menu-open 620ms cubic-bezier(.16, 1.28, .24, 1) both;
  }

  html .site-nav.is-menu-open .nav-links li {
    animation: lg-menu-item 520ms cubic-bezier(.16, 1.35, .24, 1) both;
    animation-delay: calc(var(--dock-menu-index, 0) * 42ms + 80ms);
  }
}

@keyframes lg-menu-open {
  0% { transform: scale(.985, .84); filter: brightness(.9) saturate(.9); }
  58% { transform: scale(1.008, 1.025); }
  100% { transform: scale(1); filter: brightness(1.1) saturate(1.16); }
}

@keyframes lg-menu-item {
  from { opacity: 0; transform: translate3d(0, -.75rem, 0) scale(.88); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (max-width: 860px) {
  html .filter-bar.lg-surface {
    border-radius: var(--liquid-glass-inner-radius) !important;
  }

  html .brand.lg-btn {
    height: 3rem;
  }

  html .music-toggle.lg-btn,
  html .dock-menu-toggle.lg-btn {
    width: 2.85rem;
    height: 2.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lg-surface__rim-idle::before,
  .lg-surface__glare::before {
    animation: none !important;
  }

  html .site-nav.is-dock-active > .lg-surface__material {
    transform: none;
  }
}

/* Final integration layer. The large home wordmark is deliberately excluded. */
html .lg-btn {
  touch-action: manipulation;
  max-width: 100%;
  line-height: 1.25;
}
html .lg-btn > .lg-content { max-width: 100%; gap: .55rem; white-space: normal; }
html .lg-btn > .lg-content > span { min-width: 0; max-width: 100%; }
html .brand.lg-btn {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 8.4rem; padding: .45rem .8rem !important;
}
html .brand.lg-btn > .lg-content { gap: .45rem; }
/* The portrait stays centered; only the light behind it breathes. */
html .brand .brand-avatar {
  position: relative; display: grid; place-items: center; flex: none;
  width: 1.8rem; height: 2.5rem; isolation: isolate;
}
html .brand .brand-avatar::before {
  content: ""; position: absolute; inset: -.08rem -.28rem;
  z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(170, 243, 255, .28), rgba(82, 179, 214, .12) 42%, transparent 72%);
  opacity: .55; animation: dockAvatarAura 5.6s ease-in-out infinite;
}
html .brand .brand-logo {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;
  object-position: center; flex: none; filter: none; transform: none; animation: none;
}
/* Share the homepage's exact three text layers and keyframes. No outer
   text-clipped gradient or generic animated-word wrapper may duplicate them. */
html .brand .dock-wordmark {
  font-size: 1.5rem; flex: none; cursor: inherit;
  --word-shadow-alpha: .22; --word-depth-alpha: .15;
  filter: brightness(1.3);
  -webkit-text-fill-color: transparent;
}
@keyframes dockAvatarAura {
  0%, 100% { opacity: .4; transform: scale(.94); }
  50% { opacity: .8; transform: scale(1.07); }
}
html .dock-menu-toggle.lg-btn > .lg-content { width: 1.22rem !important; min-width: 1.22rem !important; min-height: 1rem !important; }
html .dock-menu-toggle__bars { inset: 0; }
/* Size only the decorative canvas to the available viewport margin. */
html .lg-btn > .lg-gl,
html .site-nav .lg-btn > .lg-gl {
  top: calc(-1 * var(--lg-canvas-margin, 96px)) !important;
  left: calc(-1 * var(--lg-canvas-margin, 96px)) !important;
  width: calc(100% + 2 * var(--lg-canvas-margin, 96px)) !important;
  height: calc(100% + 2 * var(--lg-canvas-margin, 96px)) !important;
}

/* A single source of geometry for scale, occupied space and the enclosure. */
html .site-nav .lg-btn {
  transform: scale(var(--dock-scale-now, 1)) !important;
  transform-origin: center center !important;
  margin-inline: calc(var(--dock-control-width, 0px) * (var(--dock-scale-now, 1) - 1) / 2);
  transition: none !important;
}
html .nav-links li {
  transform: none;
  transform-origin: center;
  filter: none !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: none;
}
html .site-nav.is-dock-active > .lg-surface__material { transform: none; filter: none; }
html .site-nav > .lg-surface__material { transition: none; }
@media (min-width: 1025px) {
  html .site-nav {
    --dock-grow-y: 0px;
    top: calc(1.05rem - var(--dock-grow-y) / 2);
    width: max-content;
    max-width: calc(100% - 32px);
    gap: .85rem;
    padding: calc(.8rem + var(--dock-grow-y) / 2) 1rem;
    transition: box-shadow 180ms ease;
  }
  html .nav-links {
    --dock-base-item-width: clamp(4.9rem, 6.5vw, 6.6rem);
    flex: none;
    align-items: center;
    gap: .65rem;
    padding: 0;
    transition: none;
  }
  html .nav-links a.lg-btn {
    width: var(--dock-base-item-width);
    flex: none !important;
    min-height: 3.3rem;
    height: 3.3rem;
    padding: .65rem .7rem !important;
    font-size: .88rem;
  }
  html .brand.lg-btn { height: 3.3rem; }
  html .music-toggle.lg-btn { width: 3.3rem; height: 3.3rem; }
}
@media (max-width: 1024px) {
  html .site-nav .lg-btn { --dock-scale-now: 1 !important; margin-inline: 0; }
  html .site-nav.is-menu-dock .nav-links { gap: .7rem; }
  html .site-nav.is-menu-dock .nav-links a.lg-btn {
    width: 100%; min-width: 0 !important; flex: 1 1 auto !important;
    padding: .8rem .45rem !important; font-size: .85rem;
  }
  html .site-nav.is-menu-dock.is-menu-open { border-radius: 2.25rem; }
}
@media (max-width: 380px) {
  html .brand.lg-btn { width: 7.15rem; padding-inline: .5rem !important; }
  html .brand .dock-wordmark { font-size: 1.3rem; }
  html .brand .brand-avatar { width: 1.45rem; height: 2.1rem; }
}

/* Stable, wallpaper-derived palettes, independent of refresh and word index. */
body .olilap-word {
  --olilap-hue: var(--word-hue, 188deg) !important;
  --olilap-swing: 0;
  background-image: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--word-accent-a, #20d5f2) 55%, white) 0,
    #f3fcff calc(var(--olilap-tile) * .23),
    color-mix(in srgb, var(--word-accent-b, #2f6be7) 60%, white) calc(var(--olilap-tile) * .47),
    color-mix(in srgb, var(--word-accent-c, #ffcc6e) 58%, white) calc(var(--olilap-tile) * .74),
    color-mix(in srgb, var(--word-accent-a, #20d5f2) 55%, white) var(--olilap-tile));
}
body.cv-page .olilap-word { --olilap-swing: 0; }
/* Keep volume and motion without rotating into an unrelated hue. */
@keyframes olilapAura {
  0%, 100% { filter: drop-shadow(0 .025em .035em rgba(0, 0, 0, .5)); }
  45% { filter: drop-shadow(0 .04em .065em rgba(0, 0, 0, .55)); }
}

/* Generous corner-safe insets; internal grids may shrink, text may wrap. */
html .lg-surface:not(.site-nav) {
  border-radius: var(--glass-radius, var(--liquid-glass-panel-radius)) !important;
  min-width: 0;
  --muted: rgba(237, 245, 255, .86);
}
html .lg-surface:not(.site-nav) > .lg-surface__material { background-color: rgba(3, 7, 18, .28); }
/* Blur on the host samples the real wallpaper; on the isolated negative-z
   child it sampled an empty backdrop and left busy artwork behind the text. */
html .lg-surface { backdrop-filter: blur(12px) saturate(130%) !important; -webkit-backdrop-filter: blur(12px) saturate(130%) !important; }
html :is(.tuto-hub__head, .contact-card, .contact-form, .message-preview,
  .channel-card, .contact-manifest, .cv-panel, .cv-timeline, .timeline-card,
  .lab-dashboard, .dashboard-panel).lg-surface {
  padding: clamp(1.4rem, 3vw, 3rem);
}
.lg-surface :is(h2, h3, p, li, label, pre, .showcase-body, .preview-footer) {
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}
.lg-surface :is(h2, h3) { line-height: 1.2; }
.lg-surface :is(input, textarea, select) { min-width: 0; max-width: 100%; }
.lg-surface :is(.tag-list, .lesson-meta, .preview-footer, .tuto-card__meta) { flex-wrap: wrap; gap: .65rem; }
html .preview-message.lg-surface { --glass-radius: 2rem; padding: 1.5rem; }
html .preview-footer.lg-chip { padding: .8rem 1.1rem; line-height: 1.5; border-radius: 1.25rem !important; }
html .preview-footer > span { min-width: 0; overflow-wrap: anywhere; }
html .lg-chip { --glass-radius: 1.25rem; }
html .tutorials-card { padding: clamp(1rem, 2vw, 1.6rem); gap: 1.25rem; }
html .tutorial-card.lg-surface { --glass-radius: 2rem; padding: 1.4rem; }
html .tuto-card.lg-surface { --glass-radius: 2rem; padding: 1.6rem; gap: .7rem; }
.tuto-card__hack { padding: 1rem; border-radius: 1rem; line-height: 1.65; }
.tuto-card::before {
  background: conic-gradient(from var(--tuto-angle), transparent 0 34%, #68d5ff 44%, #b086ff 54%, transparent 66% 100%);
}
html .tuto-card > .lg-surface__material { z-index: -1; }
html .tuto-card > .lg-surface__material .lg-surface__rim-idle { display: none; }
html .filter-bar.lg-surface {
  --glass-radius: 2.3rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.35rem 1.5rem; margin-block: 1.5rem;
  overflow: visible;
}
html .filter-bar .lg-btn { flex: 0 1 auto; min-width: 4.5rem; }
html .filter-bar .is-active { outline: 1px solid rgba(158, 218, 255, .9); outline-offset: 3px; }

/* Logos are ordinary opaque images. Glass and light stay behind the image. */
.tutorial-logo-media .tutorial-scene,
.tutorial-logo-media::before,
.tutorial-logo-media::after { display: none !important; }
html .tutorial-logo-media {
  padding: 0; background: none; border: 0; box-shadow: none;
  border-radius: 1.3rem; aspect-ratio: 1; isolation: isolate;
}
html .tutorial-logo-media img[data-tutorial-logo] {
  position: relative; z-index: 2; display: block; width: 100%; height: auto;
  max-width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: inherit;
  opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important;
  transform: none !important; animation: none !important; transition: none;
}
html .tutorial-media.lg-surface { --glass-radius: 1.3rem; }
html .tutorial-doc-card::before, html .showcase-card::before { content: none; }

/* Dossiers: compact illustrated header, then full-width steps and examples. */
.tutorials-list { grid-auto-rows: auto; gap: 2rem; }
html .tutorial-doc-card,
html .tutorial-doc-card:nth-child(even) {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 17vw, 14rem);
  grid-auto-rows: auto; min-height: 0; gap: 1rem 2rem;
  padding: clamp(1.5rem, 3.5vw, 3rem); align-items: start;
  scroll-margin-top: max(8rem, calc(var(--nav-height) + 2rem));
}
.tutorial-doc-card .tutorial-body { display: contents; }
html .tutorial-doc-card .tutorial-media,
html .tutorial-doc-card:nth-child(even) .tutorial-media {
  position: relative; top: auto; order: 0; grid-column: 2; grid-row: 1 / span 4;
  width: 100%; max-width: 14rem; justify-self: end; align-self: center;
}
.tutorial-doc-card .tutorial-body > * { position: relative; z-index: 1; grid-column: 1; min-width: 0; margin: 0; }
.tutorial-doc-card .tutorial-body h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.13; text-wrap: pretty; }
.tutorial-doc-card .tutorial-body > :is(.tutorial-steps, .lesson-code, .tutorial-finish) { grid-column: 1 / -1; }
.tutorial-doc-card .tutorial-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .5rem; }
html .tutorial-steps li.lg-chip {
  border-radius: 1.45rem !important; padding: 1.15rem;
  grid-template-columns: 2.1rem minmax(0, 1fr); gap: .55rem .8rem;
  align-content: start;
}
html .tutorial-steps li::before { width: 2.1rem; grid-column: 1; grid-row: 1 / span 2; }
html .tutorial-steps li :is(strong, span) { grid-column: 2; min-width: 0; line-height: 1.55; }
html .lesson-code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; padding: 1.25rem; border-radius: 1.45rem !important; }
html .lesson-code code { white-space: pre-wrap; overflow-wrap: anywhere; }
html .tutorial-finish.lg-chip { padding: 1.25rem 1.5rem; border-radius: 1.45rem !important; }
html .tutorials-index.lg-surface { --glass-radius: 2rem; padding: 1.25rem; gap: 1rem; }

/* One-frame pointer updates, broad diffuse light, no bright pinpoint. */
.lg-surface__specular {
  background: radial-gradient(280px circle at var(--lg-mx) var(--lg-my), rgba(237, 250, 255, .085), transparent 75%),
    radial-gradient(520px circle at var(--lg-mx) var(--lg-my), rgba(166, 200, 255, .045), transparent 80%);
  transition: opacity 90ms ease;
}
.lg-surface__rim, .lg-surface__dispersion { transition: opacity 110ms ease; }
html .lg-surface > .lg-surface__material { backdrop-filter: none; -webkit-backdrop-filter: none; }
html .lg-surface.is-lg-hovered > .lg-surface__material > .lg-surface__rim-idle { opacity: .6; }
html .lg-surface.is-lg-hovered > .lg-surface__material > .lg-surface__dispersion { opacity: .35; }
.lg-surface__glare::before { opacity: .2; }

@media (max-width: 760px) {
  html .tutorials-card { display: grid; grid-template-columns: minmax(0, 1fr); }
  html .tutorial-doc-card, html .tutorial-doc-card:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  html .tutorial-doc-card .tutorial-media, html .tutorial-doc-card:nth-child(even) .tutorial-media {
    grid-column: 1; grid-row: auto; width: 8rem; justify-self: start;
  }
  .tutorial-doc-card .tutorial-steps { grid-template-columns: minmax(0, 1fr); }
  .tuto-hub__stats { flex-wrap: wrap; justify-content: space-between; }
  html .filter-bar.lg-surface { padding: 1.15rem; gap: .8rem; }
  html .filter-bar .lg-btn { flex: 1 1 calc(50% - 1rem); }
}
@media (max-width: 400px) {
  html .filter-bar .filter-button.lg-btn { font-size: .8rem; padding: .8rem .45rem !important; }
  html .tuto-card.lg-surface { padding: 1.35rem; }
  html .tutorial-steps li.lg-chip { padding: 1rem; grid-template-columns: minmax(0, 1fr); }
  html .tutorial-steps li::before, html .tutorial-steps li :is(strong, span) { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html .brand .brand-avatar::before { animation: none; transform: none; opacity: .5; }
  html .site-nav .lg-btn { --dock-scale-now: 1 !important; margin-inline: 0; }
  html .site-nav { --dock-grow-y: 0px !important; }
}

/* One sculpted glass silhouette, including before JS and without WebGL. */
body { --cyan: var(--word-fluid-a); --amber: var(--word-fluid-b); }
body { --word-static: url(images/brand-glass.28c19c1f.webp); }
body.tutorials-page { --word-static: url(images/brand-glass-tutoriels.55f643ba.webp); }
body.project-page { --word-static: url(images/brand-glass-projets.ad5420ca.webp); }
body.contacts-page { --word-static: url(images/brand-glass-contacts.f6fc57d4.webp); }
body.cv-page { --word-static: url(images/brand-glass-cv.5024b226.webp); }
/* Contacts' small heading shares the glass palette, lifted for readability. */
html .contacts-page .contact-hero > .page-hero-copy > .card-number {
  width: fit-content;
  max-width: 100%;
  color: #c5dfff;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  html .contacts-page .contact-hero > .page-hero-copy > .card-number {
    background: linear-gradient(105deg,
      color-mix(in srgb, var(--word-fluid-a) 78%, white) 0%,
      color-mix(in srgb, var(--word-fluid-b) 78%, white) 52%,
      color-mix(in srgb, var(--word-fluid-c) 88%, white) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
@media (forced-colors: active), print {
  html .contacts-page .contact-hero > .page-hero-copy > .card-number {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}
html .ambient-orbs span:nth-child(1) { background: radial-gradient(circle, rgba(var(--scene-a), .55), transparent 70%); }
html .ambient-orbs span:nth-child(2) { background: radial-gradient(circle, rgba(var(--scene-b), .5), transparent 70%); }
html .ambient-orbs span:nth-child(3) { background: radial-gradient(circle, rgba(var(--scene-c), .45), transparent 70%); }
html body[class] :is(.home-wordmark, .olilap-word) {
  position: relative; display: inline-block; box-sizing: border-box;
  width: 3.25em; height: 1.21875em; padding: 0; margin-inline: 0;
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 700; font-style: normal;
  line-height: 1.12; letter-spacing: -.025em; white-space: nowrap;
  vertical-align: -.19em; overflow: visible; isolation: isolate;
  color: transparent; -webkit-text-fill-color: transparent;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-stroke: 0; text-shadow: none;
  filter: none; animation: none;
}
html body .brand-word-fallback {
  display: block; position: relative; z-index: 2;
  width: 100%; height: 100%; padding: 0;
  font: inherit; line-height: inherit;
  color: transparent; -webkit-text-fill-color: transparent;
  background: var(--word-static) center / contain no-repeat;
  -webkit-text-stroke: 0;
  text-shadow: none; filter: none; animation: none;
}
/* Preserve the original inline baseline without a second set of letter glyphs. */
html body .brand-word-fallback::after { content: "\200b"; }
html body .brand-fluid-ready > .brand-word-fallback { visibility: hidden; }
html body[class] :is(.home-wordmark, .olilap-word)::before,
html body[class] :is(.home-wordmark, .olilap-word)::after { content: none; animation: none; }
html body[class] :is(.home-wordmark, .olilap-word).brand-fluid-ready {
  background: none; -webkit-text-stroke: 0; text-shadow: none;
  color: transparent; -webkit-text-fill-color: transparent;
}
html body .brand-fluid-canvas {
  display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; pointer-events: none; z-index: 2;
  visibility: hidden;
}
html body .brand-fluid-ready > .brand-fluid-canvas { visibility: visible; }
html body .brand .dock-wordmark { font-size: 1.5rem; filter: none; }
html body .brand.lg-btn { width: 9rem; }
html .brand .brand-avatar::before {
  background: radial-gradient(ellipse, color-mix(in srgb, var(--word-fluid-a) 28%, transparent),
    color-mix(in srgb, var(--word-fluid-b) 14%, transparent) 44%, transparent 72%);
}
html .home-wordmark-stage { width: 100%; max-width: 100%; }

@media (forced-colors: active), print {
  html body[class] :is(.home-wordmark, .olilap-word),
  html body[class] :is(.home-wordmark, .olilap-word).brand-fluid-ready,
  html body .brand-word-fallback {
    background: none; color: CanvasText; -webkit-text-fill-color: CanvasText;
    -webkit-text-stroke: 0; text-shadow: none;
  }
  html body .brand-fluid-ready > .brand-word-fallback { visibility: visible; }
  html body .brand-word-fallback::before { content: attr(data-word-label); }
  html body .brand-fluid-canvas { display: none; }
}

/* Hero only: two static optical blooms below the unchanged glass surface.
   Reuse its transparent silhouette; animate opacity, never the blur or canvas.
   The scene lifecycle already pauses these layers offscreen and when hidden. */
html body.home-page #homeWordmark::before,
html body.home-page #homeWordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  border: 0;
  background: var(--word-static) center / contain no-repeat;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  mask: none;
  -webkit-mask: none;
  mix-blend-mode: normal;
  pointer-events: none;
  transform: none;
}
html body.home-page #homeWordmark::before {
  z-index: -1;
  filter: blur(clamp(8px, .075em, 20px)) saturate(1.8);
  opacity: .9;
  animation: none;
}
html body.home-page #homeWordmark::after {
  z-index: -2;
  filter: blur(clamp(24px, .20em, 54px)) saturate(1.8);
  opacity: .84;
  animation: homeWordmarkAuraBreathe 7.8s ease-in-out infinite alternate;
}
@keyframes homeWordmarkAuraBreathe {
  from { opacity: .62; }
  to { opacity: .92; }
}
@media (prefers-reduced-motion: reduce) {
  html body.home-page #homeWordmark::after {
    animation: none;
    opacity: .8;
  }
}
@media (forced-colors: active), print {
  html body.home-page #homeWordmark::before,
  html body.home-page #homeWordmark::after { content: none; }
}

/* The artwork's flat letter baseline is y=468 in its 1536 x 576 viewbox.
   Leave the full viewbox intact, including the p descender and transparent
   margin. With no in-flow glyph, the inline-block baseline is its bottom;
   lower it by (576 - 468) / 1536 * 3.25em to align the optical baseline. */
html body[class] .olilap-word {
  vertical-align: -.228515625em;
}
html body .olilap-word > .brand-word-fallback {
  position: absolute;
  inset: 0;
}
html body .olilap-word > .brand-word-fallback::after { content: none; }

@media (forced-colors: active), print {
  html body[class] .olilap-word {
    width: auto; height: auto; vertical-align: baseline;
    font: inherit; letter-spacing: inherit;
  }
  html body .olilap-word > .brand-word-fallback {
    position: static; display: inline; width: auto; height: auto;
  }
}

/* Keep the article with the graphic wordmark when a heading wraps. */
.wordmark-phrase { display: inline-block; white-space: nowrap; }

/* Section paint containment cuts off transformed buttons and outer shadows.
   Offscreen animation suspension remains owned by scene-lifecycle.js. */
html :is(.video-section, .tutorials-section, .shop-section, .contact-section, .inner-section) {
  content-visibility: visible;
  contain-intrinsic-size: none;
  padding-block: clamp(2rem, 4svh, 3.5rem);
  scroll-margin-top: calc(var(--nav-height) + 2rem);
}
:root { --page-interface-width: 76rem; }
/* Only the viewport is a horizontal boundary; interior optical fringes stay
   free. Unlike hidden, clip does not create a horizontal scroll container. */
html, body { overflow-x: clip; }
/* The glass canvas extends beyond the element itself. Reserve its optical
   fringe as well as the hover scale instead of clipping that canvas. */
html .tutorials-cta { margin-inline: clamp(1rem, 4vw, 3rem); }
/* Clip the material children (already rounded), not the interactive content. */
html :is(.hero, .page-hero, .contact-card, .contact-form, .cv-panel) { overflow: visible; }
html :is(.contact-card, .contact-form, .cv-panel) .lg-btn {
  max-width: 100%;
}

/* One outer content boundary everywhere. Internal columns and readable copy
   can remain narrower; sections no longer stack their own lateral gutters. */
:root {
  --site-content-max: 96rem;
  --site-gutter: clamp(1rem, 3.5vw, 4rem);
  --site-content-width: min(calc(100% - 2 * var(--site-gutter)), var(--site-content-max));
  --page-interface-width: var(--site-content-max);
  --page-interface-gutter: var(--site-gutter);
  --home-interface-width: var(--site-content-max);
  --home-interface-gutter: var(--site-gutter);
}
html body main > :is(.hero, .page-hero, .tutorial-hero, .video-section, .tutorials-section, .shop-section, .contact-section, .inner-section, .hack-catalogue),
html body > footer {
  width: var(--site-content-width);
  max-width: var(--site-content-max);
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}
html body .coming-soon-card-shop { width: var(--site-content-width); max-width: var(--site-content-max); }
html body main > .coming-soon-stage { width: 100%; max-width: none; padding-inline: 0; }
html body > footer { padding: 1.5rem clamp(1rem, 2vw, 2rem); margin-block: 1.5rem; }
html body :is(.hero-text, .section-lead, .page-hero-copy, .tutorial-hero-copy, .section-heading) { min-width: 0; }
html body :is(.contact-card, .video-wrapper, .contact-form, .hack-home-panel) { max-width: 100%; box-sizing: border-box; }
/* Keep the complete video panel, title and breathing room below the dock.
   No fixed content height or inner scrollbar: short/mobile screens can grow. */
html .coming-soon-video {
  aspect-ratio: auto;
  min-height: clamp(18rem, calc(100svh - var(--nav-height) - 14rem), 36rem);
}
html .coming-soon-video p,
html .video-coming-aura { font-size: clamp(2.4rem, 6vw, 5.4rem); }
.tutorial-document { display: grid; gap: 1.25rem; scroll-margin-top: calc(var(--nav-height) + 2rem); }
html .tutorial-lesson-panel { position: relative; padding: clamp(1.25rem, 2vw, 2rem); display: grid; gap: 1rem; }
html .tutorial-lesson-panel .tutorial-steps { grid-template-columns: 1fr; }
html .tutorial-lesson-panel :is(.lesson-code, .tutorial-finish) { margin: 0; }
html :is(.tutorial-doc-card, .tutorial-lesson-panel) { scroll-margin-top: calc(var(--nav-height) + 2.5rem); }
@media (min-width: 900px) {
  html .tutorial-lesson-panel .tutorial-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  /* Keep real input text at its normal size; save height through columns and
     spacing, not scaling. A user-expanded textarea may naturally grow. */
  html .contact-form.lg-surface {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
    padding: 1.5rem;
    align-content: start;
  }
  html .contact-form label { grid-column: span 2; }
  html .contact-form .full-field, html .contact-form .form-status { grid-column: 1 / -1; }
  html .contact-form :is(.cta, .secondary-cta) { grid-column: span 3; padding-inline: 1rem; }
  html .contact-form textarea { height: 7rem; min-height: 7rem; }
  html .contact-form > p.full-field { margin-block: 0; line-height: 1.5; }
  html .contact-form [data-contact-challenge]:empty { display: none; }
  html .message-preview.lg-surface { padding: 1.5rem; }
  html .coming-soon-card-shop {
    width: min(calc(100% - 4rem), 76rem);
    min-height: 0;
    padding: 1.75rem;
    gap: 1rem;
  }
  html .shop-vault { width: clamp(14rem, 38svh, 25rem); }
  html .coming-soon-stage-shop { padding-top: calc(var(--nav-height) + 2rem); padding-bottom: 2rem; }
  html .home-page .tutorial-logo-media {
    width: min(100%, clamp(8rem, 22svh, 15rem));
    justify-self: center;
  }
  html .page-hero {
    min-height: min(76svh, 48rem);
    padding-top: calc(var(--nav-height) + 2.5rem);
    padding-bottom: 2rem;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* Native details retain useful content and keyboard navigation without JS.
   Cards use CSS glass, not a renderer/context per tutorial. */
.hack-catalogue { padding-block: 2rem 3rem; scroll-margin-top: calc(var(--nav-height) + 2rem); }
.hack-catalogue-heading { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 1.75rem; }
.hack-catalogue-heading h2 { margin: .35rem 0 .75rem; font-size: clamp(1.7rem, 3.2vw, 3rem); }
.hack-catalogue-heading p { margin: 0; line-height: 1.6; }
.hack-stats { display: flex; flex: none; gap: 1.5rem; text-align: center; margin: 0; }
.hack-stats dt { font-size: .8rem; color: #c9d4ef; }
.hack-stats dd { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.hack-search { display: grid; gap: .65rem; }
.hack-search label { font-weight: 650; }
.hack-search > div { display: flex; gap: 1rem; align-items: center; }
.hack-search input { min-width: 0; flex: 1; color: #f6f8ff; border: 1px solid #b7caff55; border-radius: 1rem; background: #14243a99; padding: 1rem 1.2rem; font: inherit; }
.hack-search input::placeholder { color: #b9c7dc; opacity: 1; }
.hack-filters { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.hack-filters .filter-button { padding: .7rem 1rem; }
.hack-filters [aria-pressed="true"] { outline: 2px solid #bec7ff; outline-offset: 3px; }
.hack-filter-count { font-size: .78rem; opacity: .8; margin-left: .45rem; }
.hack-result-count { color: #c6d3e8; font-size: .9rem; }
.hack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; align-items: stretch; }
.hack-card { min-width: 0; scroll-margin-top: calc(var(--nav-height) + 2rem); }
.hack-card[hidden], .hack-empty[hidden] { display: none !important; }
.hack-summary, .hack-panel, .hack-home-panel {
  position: relative; border: 1px solid #ccdfff33; border-radius: 1.6rem;
  background: linear-gradient(145deg, #c4dcff18, #b993ff08 65%), #101a30d9;
  box-shadow: inset 0 1px #ffffff20, 0 .7rem 1.8rem #03081625;
}
.hack-summary { display: grid; gap: .9rem; padding: 1.4rem; cursor: pointer; list-style: none; transition: border-color 180ms, background-color 180ms; }
/* Each closed summary fills only its content-sized grid row; expanded steps stay natural. */
.hack-card:not([open]) > .hack-summary { height: 100%; box-sizing: border-box; grid-template-rows: auto auto 1fr auto auto; }
.hack-summary::-webkit-details-marker { display: none; }
.hack-summary:hover { border-color: #becdff99; background-color: #263458; }
.hack-summary:focus-visible, .hack-search input:focus-visible, .hack-home-topics a:focus-visible { outline: 3px solid #d6c7ff; outline-offset: 4px; }
.hack-category { display: flex; align-items: center; gap: .65rem; padding-right: 2rem; color: #c4cfff; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.hack-category > span { font-size: 1.25rem; }
.hack-number { position: absolute; right: 1.3rem; top: 1.6rem; color: #a3b4d0; font: .75rem ui-monospace, monospace; }
.hack-title { font-size: 1.2rem; font-weight: 720; line-height: 1.35; }
.hack-benefit { font-size: .95rem; line-height: 1.65; color: #d0d8e8; }
.hack-tags { display: flex; gap: .35rem; flex-wrap: wrap; align-self: end; }
.hack-tags > span { padding: .28rem .55rem; border: 1px solid #adbaff22; border-radius: 2rem; font-size: .72rem; color: #d0d6ef; }
.hack-disclosure { display: flex; justify-content: space-between; align-items: center; padding-top: .75rem; border-top: 1px solid #c5d3ff20; color: #dedfff; font-size: .86rem; }
.hack-disclosure > span:last-child { font-size: 1.3rem; transition: transform 240ms; }
.hack-close-label { display: none; }
.hack-card[open] { grid-column: 1 / -1; }
.hack-card[open] .hack-open-label { display: none; }
.hack-card[open] .hack-close-label { display: inline; }
.hack-card[open] .hack-disclosure > span:last-child { transform: rotate(45deg); }
.hack-card[open] .hack-summary { border-color: #b7bcff88; }
.hack-expanded { display: grid; gap: 1rem; padding-block: 1rem; animation: hackExpand 280ms ease-out; }
.hack-panel { padding: clamp(1.1rem, 2vw, 1.7rem); min-width: 0; overflow-wrap: anywhere; line-height: 1.7; }
.hack-panel h4 { margin: 0 0 .6rem; color: #eeeaff; font-size: 1.05rem; }
.hack-panel p { margin: 0; color: #d8dfeb; }
.hack-panel h4:not(:first-child) { margin-top: 1.3rem; }
.hack-panel ul { margin: .65rem 0 0; padding-left: 1.2rem; color: #cdd7e8; }
.hack-panel li + li { margin-top: .45rem; }
.hack-panel a { color: #c7d3ff; text-decoration: underline; text-underline-offset: .2em; }
.hack-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hack-step-number { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #c3c2ff66; border-radius: .65rem; margin-bottom: .8rem; color: #e1d4ff; }
.hack-support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hack-empty { padding: 2rem; border: 1px dashed #bdbfff55; border-radius: 1.3rem; text-align: center; }
.hack-home-panel { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.3rem, 3vw, 2.2rem); margin-block: 1rem; }
.hack-home-copy h3 { margin: .6rem 0; font-size: clamp(1.5rem, 2.6vw, 2.5rem); }
.hack-home-copy p { line-height: 1.65; }
.hack-home-topics { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.hack-home-topics a { border: 1px solid #b7cdff44; border-radius: 2rem; padding: .5rem .8rem; color: #e1e8ff; text-decoration: none; font-size: .85rem; }
.hack-home-topics a:hover { background: #8fb7ff22; }
.hack-home-orbit { position: relative; width: min(100%, 17rem); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; }
.hack-home-orbit::before { content: ''; position: absolute; inset: 15%; border: 1px solid #b8c6ff44; border-radius: 50%; box-shadow: inset 0 0 2rem #7694ff22, 0 0 3rem #8467ff22; animation: hackBreathe 5s ease-in-out infinite; }
.hack-home-core { font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 850; color: #ecf2ff; text-shadow: 0 0 1.3rem #7d9fff99; }
.hack-home-node { --angle: calc(var(--i) * 360deg / var(--total) - 90deg); position: absolute; left: calc(50% + cos(var(--angle)) * 40%); top: calc(50% + sin(var(--angle)) * 40%); translate: -50% -50%; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid #bccdff55; border-radius: 1rem; background: #213358; font-size: 1.5rem; animation: hackBreathe 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes hackExpand { from { opacity: 0; transform: translateY(-.4rem); } to { opacity: 1; transform: none; } }
@keyframes hackBreathe { 0%,100% { scale: .97; opacity: .8; } 50% { scale: 1.04; opacity: 1; } }
@media (max-width: 1000px) { .hack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hack-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .hack-catalogue-heading { align-items: start; flex-direction: column; gap: 1rem; }
  .hack-stats { text-align: left; }
  .hack-grid, .hack-steps, .hack-support, .hack-home-panel { grid-template-columns: minmax(0, 1fr); }
  .hack-search > div { flex-wrap: wrap; }
  .hack-search input { flex-basis: 100%; }
  .hack-summary { padding: 1.2rem; }
  .hack-home-orbit { width: 12rem; }
}
@media (prefers-reduced-motion: reduce) { .hack-expanded, .hack-home-node, .hack-home-orbit::before { animation: none; } }

/* Projets only: transparent curved veils, composited with transform/opacity.
   The surrounding polygon, face and orbital geometry belong to styles.css. */
html body.project-page .project-console .console-halo {
  inset: -8%;
  border-radius: 50%;
  clip-path: none;
  filter: none;
  rotate: none;
  background:
    radial-gradient(ellipse at 26% 46%, rgb(71 245 208 / .28), transparent 38%),
    radial-gradient(ellipse at 70% 64%, rgb(122 71 225 / .22), transparent 40%);
  opacity: .86;
  animation: projectAuraTide 13s ease-in-out infinite alternate;
}

.project-page .project-console .console-halo::before,
.project-page .project-console .console-halo::after {
  content: '';
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  pointer-events: none;
  /* Every edge fades to transparent: no rotated rectangular texture. */
  background:
    radial-gradient(ellipse at 52% 50%, transparent 38%, rgb(74 255 213 / .06) 44%, rgb(105 255 220 / .48) 48%, rgb(36 191 185 / .14) 53%, transparent 63%),
    radial-gradient(ellipse at 42% 45%, transparent 43%, rgb(171 235 167 / .24) 49%, transparent 57%);
  transform: rotate(-24deg) scale(.91, .62) skewX(-13deg);
  opacity: .8;
  animation: projectAuraSilk 10s ease-in-out infinite alternate;
}

.project-page .project-console .console-halo::after {
  inset: 6% -3%;
  background:
    radial-gradient(ellipse at 52% 52%, transparent 39%, rgb(174 119 255 / .12) 44%, rgb(167 109 255 / .45) 48%, rgb(89 97 220 / .10) 54%, transparent 64%),
    radial-gradient(ellipse at 42% 44%, transparent 40%, rgb(255 210 119 / .34) 47%, transparent 57%);
  transform: translate3d(5%, 8%, 0) rotate(48deg) scale(.84, .95) skewX(12deg);
  animation: projectAuraSilkCounter 17s ease-in-out -6s infinite alternate;
}

@keyframes projectAuraTide {
  0% { transform: translate3d(-2%, 1%, 0) scale(.96, 1.02); opacity: .72; }
  50% { transform: translate3d(1%, -2%, 0) scale(1.03, .97); opacity: .94; }
  100% { transform: translate3d(2%, 2%, 0) scale(1, 1.04); opacity: .82; }
}
@keyframes projectAuraSilk {
  0% { transform: translate3d(-4%, -12%, 0) rotate(-24deg) scale(.91, .62) skewX(-13deg); opacity: .68; }
  50% { transform: translate3d(3%, 3%, 0) rotate(3deg) scale(1.06, .8) skewX(8deg); opacity: .96; }
  100% { transform: translate3d(-1%, 12%, 0) rotate(23deg) scale(.88, 1.04) skewX(-6deg); opacity: .76; }
}
@keyframes projectAuraSilkCounter {
  0% { transform: translate3d(5%, 8%, 0) rotate(48deg) scale(.84, .95) skewX(12deg); opacity: .8; }
  48% { transform: translate3d(-3%, -5%, 0) rotate(17deg) scale(1.07, .62) skewX(-9deg); opacity: .6; }
  100% { transform: translate3d(1%, -9%, 0) rotate(-17deg) scale(.91, .82) skewX(5deg); opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  html body.project-page .project-console .console-halo,
  .project-page .project-console .console-halo::before,
  .project-page .project-console .console-halo::after { animation: none; }
}

.projects-catalogue { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; align-items: stretch; }
/* Let the longest card size each row; mobile cards keep their natural height. */
.project-profile { --project-tint: 103 201 234; --project-glow: 109 137 228; min-width: 0; position: relative; padding: clamp(1.2rem, 2vw, 1.8rem); border: 1px solid rgb(var(--project-tint) / .28); border-radius: 1.8rem; background: linear-gradient(140deg, rgb(var(--project-tint) / .12), transparent 60%), linear-gradient(320deg, rgb(var(--project-glow) / .10), transparent 58%), rgb(13 21 39 / .84); box-shadow: inset 0 1px #e2edff22, 0 .8rem 2rem #02071122; scroll-margin-top: calc(var(--nav-height) + 2rem); transition: border-color 200ms, box-shadow 200ms; }
.project-profile:nth-child(even) { --project-tint: 169 151 238; --project-glow: 106 167 241; }
.project-profile:nth-child(3n) { --project-glow: 220 174 112; }
.project-profile:hover { border-color: rgb(var(--project-tint) / .55); box-shadow: inset 0 1px #e2edff44, 0 .8rem 2rem #253e6333; }
.project-profile-header { display: flex; gap: 1rem; align-items: center; }
.project-profile-header h3 { margin: .3rem 0; font-size: clamp(1.4rem, 2.1vw, 2rem); }
.project-profile-header .card-number { margin: 0; font-size: .72rem; }
.project-emblem { display: grid; flex: none; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; border: 1px solid rgb(var(--project-tint) / .42); color: #e1eeff; background: linear-gradient(135deg, rgb(var(--project-tint) / .17), rgb(var(--project-glow) / .10)); font: 600 1.05rem ui-monospace,monospace; box-shadow: inset 0 0 1rem rgb(var(--project-tint) / .08); }
.project-name-note { font-size: .82rem; margin: .3rem 0 0; color: #d3e6d9; }
.project-mission { color: #d3e6df; line-height: 1.65; margin: 1rem 0; }
.project-objectives { font-size: .9rem; line-height: 1.55; }
.project-objectives h4 { margin: 0 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #b9d5cb; }
.project-objectives ul { padding-left: 1.15rem; margin: 0; }
.project-objectives p { margin: 0; }
.project-state { color: #bdffe4; font-size: .85rem; border-block: 1px solid #b3f8db22; padding-block: .7rem; margin-block: 1rem; }
.project-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem 1.2rem; margin: 0; }
.project-facts > div { min-width: 0; }
.project-facts dt { font-size: .72rem; color: #aecdc4; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.project-facts dd { margin: 0; color: #edf6f1; font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.project-price { grid-column: 1 / -1; grid-row: 3; }
.projects-disclaimer { line-height: 1.65; margin: 1.5rem 0 0; color: #c0d4cd; font-size: .9rem; }
@media (max-width: 850px) { .projects-catalogue { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 380px) { .project-facts { grid-template-columns: 1fr; } .project-price { grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { .project-profile { transition: none; } }

/* Do not invalidate every descendant when this number changes on body.
   Only the wallpaper explicitly inherits it. Unsupported registrations keep
   the original inherited-variable behaviour and the same visual result. */
@property --music-backdrop-light {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}
/* Brightness belongs only to the wallpaper layer, never text or glass. */
html.music-v2.music-active.music-ambience-live body::before {
  --music-backdrop-light: inherit;
  filter: brightness(var(--music-backdrop-light, 1));
  will-change: transform, filter;
}
html.music-ambience-live :is(.music-ambience, .music-rim-accent) { will-change: opacity; }
.music-ambience {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0;
}
.music-ambience__wing {
  position: absolute;
  top: 14vh;
  width: min(48vw, 42rem);
  height: 76vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--scene-a, 32, 132, 255), .6), rgba(var(--scene-a, 32, 132, 255), .18) 32%, transparent 66%);
}
.music-ambience__wing--a { left: -24vw; }
.music-ambience__wing--b {
  right: -24vw;
  background: radial-gradient(ellipse, rgba(var(--scene-b, 255, 155, 49), .6), rgba(var(--scene-b, 255, 155, 49), .18) 32%, transparent 66%);
}
/* The glass adapter makes unknown direct children relative with !important.
   This decorative perimeter must never enter the button's flex layout. */
html.music-v2 .lg-btn > .music-rim-accent,
html.music-v2 .lg-surface > .music-rim-accent {
  position: absolute !important;
  inset: 1px;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid rgba(var(--scene-a, 32, 132, 255), .84);
  box-shadow: inset 0 0 10px rgba(var(--scene-a, 32, 132, 255), .15), 0 0 12px rgba(var(--scene-b, 255, 155, 49), .22);
  opacity: 0;
  pointer-events: none;
}
html:not(.music-ambience-live) .music-rim-accent,
html:not(.music-ambience-live) .music-ambience { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .music-ambience, html .music-rim-accent { display: none; }
}

/* One clipped photographic surface; the green glass belongs to this scene. */
.no-cookie-popup--fracture {
  --cookie-green: 48, 218, 151;
  --popup-tilt-x: 0deg;
  --popup-tilt-y: 0deg;
  background: radial-gradient(ellipse at 32% 44%, rgba(18, 92, 66, .24), transparent 64%), rgba(3, 11, 16, .83);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  animation: cookieVeilEnter 520ms ease-out both;
}
.no-cookie-popup--fracture::before,
.no-cookie-popup--fracture::after { content: none; }

html .no-cookie-popup--fracture .no-cookie-popup__panel {
  --glass-radius: 4rem;
  position: relative;
  display: flex;
  align-items: center;
  width: min(61rem, 100%);
  min-height: 30rem;
  padding: 0;
  gap: 0;
  border: 1px solid rgba(174, 246, 212, .55) !important;
  border-radius: var(--glass-radius) !important;
  background: #06261c !important;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .52), 0 0 3.4rem rgba(29, 169, 112, .15),
    inset 0 1px 0 rgba(222, 255, 238, .6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  transform-style: flat;
  overflow: hidden;
  /* Explicit clip also contains accelerated canvas/wave layers in WebKit. */
  clip-path: inset(0 round var(--glass-radius));
  animation: cookiePanelEnter 780ms cubic-bezier(.16, 1.24, .24, 1) both;
}
.no-cookie-popup--fracture .no-cookie-popup__panel > .lg-surface__material { display: none; }
.no-cookie-popup--fracture .no-cookie-popup__panel::before {
  z-index: 4;
  inset: 0;
  opacity: 1;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(224, 255, 234, .13), transparent 24% 68%, rgba(66, 231, 151, .12));
  box-shadow: inset 0 1px 1px rgba(236, 255, 242, .7), inset 0 -1px 2px rgba(121, 236, 177, .5),
    inset 0 0 1.5rem rgba(66, 199, 132, .1);
  mix-blend-mode: normal;
}
.no-cookie-popup--fracture .no-cookie-popup__panel::after {
  inset: 5px;
  z-index: 4;
  border: 1px solid rgba(190, 255, 222, .19);
  border-radius: calc(var(--glass-radius) - 5px);
  box-shadow: none;
}
.no-cookie-popup__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.no-cookie-popup__photo,
.no-cookie-popup__fracture,
.no-cookie-popup__tint { position: absolute; inset: 0; width: 100%; height: 100%; }
.no-cookie-popup__photo { display: block; object-fit: cover; object-position: center; }
.no-cookie-popup__fracture { visibility: hidden; }
.is-fracture-ready .no-cookie-popup__fracture { visibility: visible; }
.is-fracture-ready .no-cookie-popup__photo { visibility: hidden; }
.no-cookie-popup__tint {
  background: linear-gradient(90deg, rgba(4, 35, 22, .17) 20%, rgba(2, 31, 20, .24) 45%, rgba(3, 35, 24, .86) 68%, rgba(3, 32, 22, .94)),
    linear-gradient(180deg, rgba(3, 38, 25, .08), transparent 60%, rgba(2, 25, 17, .4));
}
.no-cookie-popup__wave {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  background: radial-gradient(circle, transparent 51%, rgba(20, 208, 126, .025) 60%,
    rgba(49, 226, 149, .13) 68%, rgba(147, 255, 205, .44) 70%,
    rgba(44, 237, 151, .20) 70.5%, rgba(48, 218, 151, .055) 73%, transparent 78%);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
}
.no-cookie-popup--fracture .no-cookie-popup__copy {
  position: relative;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: start;
  margin-left: 59%;
  width: 41%;
  padding: 2.8rem 2.8rem 2.8rem 0;
  gap: 1.7rem;
  transform: none;
}
.no-cookie-popup--fracture .no-cookie-popup__copy h2 {
  max-width: 11ch;
  margin: 0;
  font-size: 3.45rem;
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: -.025em;
  color: #f6fff8;
  text-shadow: 0 2px 18px rgba(0, 12, 6, .5);
  animation: noCookieCopySnap 780ms 120ms cubic-bezier(.16, 1.2, .24, 1) both;
}
.no-cookie-popup--fracture .no-cookie-popup__action {
  --lg-radius: 999px;
  display: inline-flex;
  min-height: 3.7rem;
  min-width: min(100%, 16.5rem);
  width: auto;
  padding: 0;
  border-radius: var(--lg-radius);
  border: 1px solid rgba(210, 255, 226, .66);
  background: linear-gradient(180deg, rgba(201, 255, 222, .24), rgba(86, 189, 132, .12) 48%, rgba(111, 225, 162, .23));
  box-shadow: inset 0 2px 3px rgba(226, 255, 237, .4), inset 0 -3px 6px rgba(75, 211, 141, .2),
    0 0 0 4px rgba(121, 233, 175, .07), 0 8px 20px rgba(0, 18, 9, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f6fff8;
  transform: none;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), background-color 200ms ease;
  animation: cookieButtonEnter 640ms 230ms cubic-bezier(.16,1.28,.24,1) backwards;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.no-cookie-popup--fracture .no-cookie-popup__action::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border-top: 1px solid rgba(232, 255, 240, .55);
  background: linear-gradient(165deg, rgba(212,255,229,.15), transparent 55%);
  pointer-events: none;
}
.no-cookie-popup--fracture .no-cookie-popup__action > span { padding: 1rem 1.4rem; font-size: 1.02rem; }
.no-cookie-popup--fracture .no-cookie-popup__action:hover { transform: scale(1.035); background-color: rgba(95,222,154,.13); }
.no-cookie-popup--fracture .no-cookie-popup__action:active { transform: scale(.97); }
.no-cookie-popup--fracture .no-cookie-popup__action:focus-visible { outline: 2px solid #d6ffe6; outline-offset: 6px; }
.no-cookie-popup--fracture.is-dismissing .no-cookie-popup__action { animation: none; cursor: default; backdrop-filter: none; -webkit-backdrop-filter: none; }
.no-cookie-popup--fracture.is-dismissing .no-cookie-popup__copy h2 { animation: none; }
.no-cookie-popup__last-light {
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(105,255,180,.04) 45%, rgba(195,255,220,.42) 49.5%, rgba(65,225,148,.12) 51%, transparent 58%);
}

@keyframes cookieVeilEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes cookiePanelEnter {
  0% { opacity: 0; transform: translate3d(0,3rem,-8rem) rotateX(14deg) scale(.88); }
  62% { opacity: 1; transform: translate3d(0,-.34rem,0) rotateX(-2deg) scale(1.018); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cookieButtonEnter {
  0% { opacity: 0; transform: translateY(1rem) scale(.9); }
  66% { opacity: 1; transform: translateY(-.18rem) scale(1.04); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  html .no-cookie-popup--fracture .no-cookie-popup__panel {
    --glass-radius: 3rem;
    align-items: flex-start;
    width: min(100%, 35rem);
    min-height: min(35rem, calc(100svh - 1.48rem));
    max-height: none;
    overflow: hidden;
  }
  .no-cookie-popup--fracture .no-cookie-popup__copy {
    width: 100%;
    margin: 0;
    padding: 2.1rem 2rem 2.4rem;
    gap: 1.25rem;
  }
  .no-cookie-popup--fracture .no-cookie-popup__copy h2 { font-size: 2.45rem; max-width: 12ch; line-height: 1.08; }
  .no-cookie-popup__tint {
    background: linear-gradient(180deg, rgba(2,31,19,.9), rgba(2,32,20,.77) 28%, rgba(3,33,20,.12) 61%, rgba(1,28,17,.24));
  }
}
@media (max-width: 380px) {
  html .no-cookie-popup--fracture .no-cookie-popup__panel { --glass-radius: 2.5rem; min-height: min(33rem, calc(100svh - 1.48rem)); }
  .no-cookie-popup--fracture .no-cookie-popup__copy { padding: 1.8rem 1.55rem; gap: 1.1rem; }
  .no-cookie-popup--fracture .no-cookie-popup__copy h2 { font-size: 2.12rem; }
  .no-cookie-popup--fracture .no-cookie-popup__action { min-width: 100%; }
}
@media (max-height: 580px) and (min-width: 560px) {
  html .no-cookie-popup--fracture .no-cookie-popup__panel { --glass-radius: 2.5rem; min-height: min(30rem, calc(100svh - 1.48rem)); width: min(61rem,100%); align-items: center; }
  .no-cookie-popup--fracture .no-cookie-popup__copy { margin-left: 52%; width: 48%; padding: 1.6rem 2rem 1.6rem 0; gap: 1.1rem; }
  .no-cookie-popup--fracture .no-cookie-popup__copy h2 { font-size: clamp(2rem,4.1vw,2.7rem); }
  .no-cookie-popup--fracture .no-cookie-popup__action { min-width: min(100%,16.5rem); }
  .no-cookie-popup__tint { background: linear-gradient(90deg, rgba(3,30,19,.15) 20%, rgba(2,31,20,.4) 45%, rgba(3,35,24,.92) 72%); }
}
@media (prefers-reduced-motion: reduce) {
  html .no-cookie-popup--fracture,
  html .no-cookie-popup--fracture .no-cookie-popup__panel,
  html .no-cookie-popup--fracture .no-cookie-popup__copy h2,
  html .no-cookie-popup--fracture .no-cookie-popup__action { animation: none; transition: none; transform: none; }
  .no-cookie-popup__wave, .no-cookie-popup__last-light { display: none; }
}

/* Transient light only: the existing glass, borders and canvas stay intact. */
html .site-nav .lg-btn {
  transform: scale(var(--dock-scale-now, 1)) var(--dock-glass-transform, translateZ(0)) !important;
}
@media (min-width: 1025px) {
  html .site-nav .lg-btn {
    margin-inline: calc(var(--dock-control-width, 0px) * (var(--dock-scale-now, 1) - 1) / 2 + var(--dock-scale-now, 1) * var(--dock-glass-extra-x, 0px));
  }
}
html .site-nav .lg-btn > .dock-feedback {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
html .site-nav .dock-feedback > .lg-ripple {
  animation: dock-light-wave 800ms cubic-bezier(.2, .65, .25, 1) forwards;
}
@keyframes dock-light-wave {
  from { transform: translate(-50%, -50%) scale(.01); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html .site-nav .lg-btn { translate: none !important; transform: none !important; margin-inline: 0; }
  html .site-nav .dock-feedback { display: none; }
}

/* A narrow reflection over the existing lens, independent of the GPU bitmap.
   Only the small light texture transforms; no animated gradients or filters. */
html .lg-btn > .lg-reflection {
  position: absolute;
  inset: 1px;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  overflow: hidden;
  padding: 1.5px;
  opacity: .62;
  container-type: size;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.lg-reflection::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  background: conic-gradient(from 15deg, transparent 0 8%,
    var(--lg-reflection-0) 16%, transparent 24% 41%,
    var(--lg-reflection-1) 49%, transparent 58% 76%,
    var(--lg-reflection-2) 84%, transparent 93%);
  animation: lg-reflection-turn 18s linear infinite;
  animation-play-state: paused;
}

/* Le portail d'entrée reçoit deux panneaux colorés plus puissants que le
   dock. Le masque les contraint à la tranche arrondie : le coeur reste
   transparent et le texte conserve son contraste. */
html #enterButton > .lg-reflection {
  inset: 1px;
  padding: 2px;
  opacity: .92;
}
html #enterButton > .lg-reflection::before {
  background: conic-gradient(from 12deg,
    transparent 0 5%,
    rgba(255, 255, 255, .92) 8%,
    #ff5a12 13%,
    rgba(255, 154, 53, .34) 19%,
    transparent 27% 43%,
    rgba(40, 135, 255, .34) 48%,
    #087cff 56%,
    rgba(111, 210, 255, .92) 62%,
    transparent 69% 84%,
    rgba(255, 116, 25, .72) 89%,
    transparent 96%);
  animation-duration: 15s;
}
@supports (width: hypot(3px, 4px)) {
  .lg-reflection::before { width: calc(hypot(100cqw, 100cqh) + 6px); }
}
.lg-reflections-visible > .lg-reflection::before { animation-play-state: running; }
.site-nav.is-menu-dock:not(.is-menu-open) .nav-links .lg-reflection::before { animation-play-state: paused; }
.lg-reflections-hidden .lg-reflection::before { animation-play-state: paused; }
@keyframes lg-reflection-turn {
  from { transform: translate(-50%, -50%) rotate(0turn); }
  to { transform: translate(-50%, -50%) rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  html .lg-reflection::before { animation: none; transform: translate(-50%, -50%) rotate(.08turn); }
}

/* Keep the existing cinematic reveal, but draw a recognizable input device. */
.home-intro-scroll-cue {
  width: 3rem;
  height: 4.75rem;
  bottom: calc(3.15rem + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 45%;
  background: radial-gradient(ellipse, rgba(3, 8, 18, .82) 15%, rgba(3, 8, 18, .52) 58%, transparent 75%);
  box-shadow: 0 0 18px 9px rgba(3, 8, 18, .32);
  color: #e2edff;
}
.home-intro-scroll-cue::before,
.home-intro-scroll-cue::after { content: none; }
.intro-cue-mouse, .intro-cue-touch { width: 100%; height: 100%; overflow: visible; }
.intro-cue-mouse, .intro-cue-touch { filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 4px #000c); }
.intro-cue-touch, .intro-cue-touch-text { display: none; }
.intro-cue-direction { animation: introCueDirection 1.8s ease-in-out infinite; }
.intro-cue-help {
  position: absolute;
  left: 50%;
  top: calc(100% + .65rem);
  width: max-content;
  max-width: calc(100vw - 2rem);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .035em;
  text-align: center;
  text-shadow: 0 1px 5px #000;
  padding: .3rem .65rem;
  border-radius: 1rem;
  background: rgba(3, 8, 18, .76);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 350ms ease;
}
.is-help-visible .intro-cue-help { opacity: .85; visibility: visible; }
@media (hover: none) and (pointer: coarse) {
  .intro-cue-mouse, .intro-cue-desktop-text { display: none; }
  .intro-cue-touch, .intro-cue-touch-text { display: block; }
  .home-intro-scroll-cue { width: 3.4rem; height: 4.75rem; }
  .intro-cue-finger { animation: introCueSwipe 2.1s ease-in-out infinite; }
  .intro-cue-trail { opacity: .65; }
}
@keyframes introCueDirection {
  0%, 100% { opacity: .45; transform: translateY(-1px); }
  50% { opacity: 1; transform: translateY(2px); }
}
@keyframes introCueSwipe {
  0%, 15% { opacity: .85; transform: translateY(7px); }
  25% { opacity: 1; transform: translateY(7px); }
  70% { opacity: 1; transform: translateY(-13px); }
  90%, 100% { opacity: .85; transform: translateY(-13px); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-cue-finger, .intro-cue-direction { animation: none; }
  .intro-cue-finger { opacity: 1; transform: none; }
}

/* Only the touch homepage: Contacts, CV and desktop retain their established layout. */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  html body.home-page[data-section-scroll].home-panels-ready main > section { touch-action: pan-x pinch-zoom; }
  html body.home-page[data-section-scroll].home-panels-ready.home-panels-zoomed main > section { touch-action: auto; }
}

@media (max-width: 1024px) and (max-height: 800px) and (hover: none) and (pointer: coarse) {
  html body.home-page[data-section-scroll] main > section[id] {
    padding-top: max(calc(var(--nav-height) + .5rem), calc(env(safe-area-inset-top) + 82px));
    padding-bottom: 1rem;
    gap: .75rem;
  }
  html body.home-page[data-section-scroll] main > section:last-child {
    padding-bottom: calc(var(--panel-footer-space, 90px) - 48px + 2.5rem);
  }
  html body.home-page[data-section-scroll] main > section > h2 {
    font-size: 1.65rem;
    line-height: 1.12;
    margin-bottom: .4rem;
  }
  html body.home-page[data-section-scroll] .hack-home-panel { margin-block: .4rem; padding: .8rem; gap: .6rem; }
  html body.home-page[data-section-scroll] main .cta,
  html body.home-page[data-section-scroll] main .secondary-cta {
    padding: .8rem 1rem;
    font-size: 1rem;
    line-height: 1.25;
    min-height: 44px;
  }
  html body.home-page[data-section-scroll] .tutorials-cta { margin: 0; }
  html body.home-page[data-section-scroll] .home-project-link { padding: .5rem 1.5rem .5rem .15rem; }
  html body.home-page[data-section-scroll] .home-project-link h3 { font-size: 1.1rem; margin-bottom: .25rem; }
  html body.home-page[data-section-scroll] .home-project-link p { font-size: .9rem; line-height: 1.4; }
  html body.home-page[data-section-scroll] .home-project-arrow { top: .5rem; }
  html body.home-page[data-section-scroll] .hack-home-copy h3 { font-size: 1.25rem; margin-block: .3rem; }
  html body.home-page[data-section-scroll] .hack-home-copy p { margin-block: .4rem; line-height: 1.45; }
  html body.home-page[data-section-scroll] .hack-home-explore .hack-home-orbit { width: 6rem; }
  html body.home-page[data-section-scroll] .hack-home-core { font-size: 1.5rem; }
  html body.home-page[data-section-scroll] .hack-home-node { width: 1.5rem; height: 1.5rem; border-radius: .5rem; font-size: .95rem; }
  html body.home-page[data-section-scroll] .hack-home-topics { gap: .4rem; }
  html body.home-page[data-section-scroll] .hack-home-topics a { padding: .35rem .65rem; font-size: .85rem; }
  html body.home-page[data-section-scroll] .contact-card { position: relative; padding: 1rem; gap: .6rem; grid-template-columns: minmax(0, 1fr); }
  html body.home-page[data-section-scroll] .contact-copy { gap: .4rem; }
  html body.home-page[data-section-scroll] .contact-visual { position: absolute; right: 1rem; top: 1rem; width: 2rem; }
  html body.home-page[data-section-scroll] .contact-visual__core { font-size: 1.5rem; }
  html body.home-page[data-section-scroll] .contact-copy h3 { padding-right: 2.5rem; font-size: 1.25rem; margin-block: .2rem; }
  html body.home-page[data-section-scroll] .contact-copy > p:not(.contact-kicker) { margin-block: .25rem; font-size: .95rem; line-height: 1.45; }
  html body.home-page[data-section-scroll] .contact-copy .contact-kicker { padding-right: 2.5rem; }
  html body.home-page[data-section-scroll] .contact-actions { margin-top: .3rem; padding-top: 0; }
  html body.home-page[data-section-scroll] .home-cv-actions { gap: .6rem; }
  html body.home-page[data-section-scroll] > footer { padding: .6rem .8rem; }
  html body.home-page[data-section-scroll] > footer p { margin: 0; font-size: .875rem; line-height: 1.5; }
}

@media (min-width: 701px) and (max-width: 1024px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  html body.home-page[data-section-scroll] .home-wordmark-stage { width: min(48vw, 20rem); }
  html body.home-page[data-section-scroll] .hack-home-panel { grid-template-columns: minmax(0, 1fr); }
  html body.home-page[data-section-scroll] .hack-home-explore .hack-home-panel { grid-template-columns: 6rem minmax(0, 1fr); }
  html body.home-page[data-section-scroll] .hack-home-explore .hack-home-orbit { width: 6rem; }
  html body.home-page[data-section-scroll] .home-cv-panel { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  html body.home-page[data-section-scroll] .home-cv-actions { flex-direction: column; align-items: stretch; }
  html body.home-page[data-section-scroll] .coming-soon-video { min-height: 9rem; }
}

/* Alpha-guided light: the moving color stays behind the original artwork. */
html body[class] .site-nav :is(.brand, .dock-mobile-home) .brand-avatar::before,
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-wordmark::before {
  content: none;
  animation: none;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .brand-avatar {
  --dock-contour-mask: url(images/dock-face-contour.bb864c26.png);
  --dock-contour-height: 120%;
  --dock-contour-ratio: 312 / 432;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-wordmark {
  --dock-contour-mask: url(images/dock-word-contour.cf21ba12.png);
  --dock-contour-height: 127.7777778%;
  --dock-contour-ratio: 1696 / 736;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-contour-aura {
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  height: var(--dock-contour-height);
  width: auto;
  aspect-ratio: var(--dock-contour-ratio);
  padding: 0;
  transform: translate(-50%, -50%);
  z-index: -1;
  display: block;
  pointer-events: none;
  border-radius: 0;
  opacity: .72;
  filter: none;
  mask: var(--dock-contour-mask) center / 100% 100% no-repeat;
  mask-composite: add;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-contour-aura__silhouette {
  position: absolute;
  inset: 0;
  display: block;
  mask: none;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-contour-aura__silhouette::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(from 20deg,
    transparent 0 10%, var(--word-fluid-a) 17%, transparent 25% 43%,
    var(--word-fluid-b) 50%, transparent 58% 76%,
    var(--word-fluid-a) 82%, transparent 91%);
  animation: dock-contour-drift 14s ease-in-out infinite;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-wordmark .dock-contour-aura__silhouette::before {
  animation-delay: -5s;
  animation-duration: 17s;
}
html body[class] .site-nav :is(.brand, .dock-mobile-home) .brand-logo,
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-wordmark > .brand-fluid-canvas,
html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-wordmark > .brand-word-fallback {
  filter: drop-shadow(0 1px .6px rgb(1 7 18 / .85));
}
@keyframes dock-contour-drift {
  0%, 100% { transform: rotate(-14deg) translate3d(-3%, -2%, 0) scale(1.05); opacity: .7; }
  34% { transform: rotate(27deg) translate3d(4%, 1%, 0) scale(1.1); opacity: 1; }
  68% { transform: rotate(68deg) translate3d(-1%, 3%, 0) scale(1.03); opacity: .8; }
}
html .site-nav.dock-contour-paused .dock-contour-aura__silhouette::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-contour-aura__silhouette::before {
    animation: none;
    transform: rotate(12deg);
    opacity: .8;
  }
}
@media (forced-colors: active), print {
  html body[class] .site-nav :is(.brand, .dock-mobile-home) .dock-contour-aura { display: none; }
}


/* This mode owns its light, not the layout of the page. Legacy music variables
   remain neutral so buttons, cards, images and the dock keep their geometry. */
html.music-v2 {
  --music-button-scale: 1;
  --music-card-scale: 1;
  --music-orb-scale: 1;
  --music-aura-scale: 1;
  --music-brightness: 1;
  --music-saturation: 1;
  --music-glow-size: 0rem;
  --music-shake-x: 0px;
  --music-shake-y: 0px;
  --music-orbit-fast: 12s;
  --music-orbit-slow: 17s;
  --music-orbit-wide: 22s;
}

html.music-v2 .music-toggle {
  /* Wallpaper accents, kept local to the icon so the glass material is intact. */
  --music-note-a: 32, 132, 255;
  --music-note-mid: 47, 107, 231;
  --music-note-b: 255, 155, 49;
  --music-note-c: 255, 204, 110;
  color: #e7f5ff;
  scale: 1;
  -webkit-tap-highlight-color: transparent;
}
html.music-v2 body.tutorials-page .music-toggle {
  --music-note-a: 79, 180, 255;
  --music-note-mid: 39, 117, 255;
  --music-note-b: 116, 78, 236;
  --music-note-c: 192, 107, 251;
}
html.music-v2 body.project-page .music-toggle {
  --music-note-a: 44, 195, 177;
  --music-note-mid: 104, 221, 204;
  --music-note-b: 169, 104, 222;
  --music-note-c: 222, 145, 208;
}
html.music-v2 body.contacts-page .music-toggle {
  --music-note-a: 76, 158, 242;
  --music-note-mid: 166, 112, 225;
  --music-note-b: 240, 161, 102;
  --music-note-c: 250, 199, 147;
}
html.music-v2 body.cv-page .music-toggle {
  --music-note-a: 250, 221, 142;
  --music-note-mid: 255, 216, 80;
  --music-note-b: 238, 157, 19;
  --music-note-c: 255, 187, 29;
}
html.music-v2 .music-toggle::before { animation: none; }
html.music-v2 .music-toggle-bars { display: none; }
html.music-v2 .music-toggle-symbol {
  --music-stop-beat: 0;
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  color: inherit;
  transform: scale(1);
  transition: transform 120ms ease-out, color 260ms ease;
}
html.music-v2 .music-toggle-symbol::before {
  content: "";
  position: absolute;
  inset: -.65rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 32%, rgba(var(--music-note-a), .28), transparent 65%),
    radial-gradient(circle at 68% 68%, rgba(var(--music-note-c), .25), transparent 65%);
  opacity: .58;
  pointer-events: none;
  transform: scale(.85);
  transition: opacity 260ms ease, transform 180ms ease-out;
}
html.music-v2 .music-toggle-symbol i {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: width 320ms cubic-bezier(.2,.8,.2,1), height 320ms cubic-bezier(.2,.8,.2,1),
    transform 320ms cubic-bezier(.2,.8,.2,1), opacity 180ms ease, box-shadow 240ms ease;
}
/* The page-colored note also identifies resumable/ended sessions; their label
   carries status. The same three strokes morph into the red stop X. */
html.music-v2 .music-toggle-symbol i:nth-child(1) {
  width: .58rem;
  height: .39rem;
  transform: translate(-.56rem, .23rem) rotate(-18deg);
  background: linear-gradient(110deg, rgb(var(--music-note-b)), rgb(var(--music-note-c)));
}
html.music-v2 .music-toggle-symbol i:nth-child(2) {
  width: .17rem;
  height: 1rem;
  transform: translate(-.12rem, -.57rem);
  background: linear-gradient(180deg,
    color-mix(in srgb, rgb(var(--music-note-a)) 82%, white) 0 12%,
    rgb(var(--music-note-mid)) 38%, rgb(var(--music-note-b)) 78%, rgb(var(--music-note-c)));
}
html.music-v2 .music-toggle-symbol i:nth-child(3) {
  width: .62rem;
  height: .2rem;
  transform: translate(-.12rem, -.54rem) rotate(19deg);
  background: linear-gradient(110deg, rgb(var(--music-note-a)), color-mix(in srgb, rgb(var(--music-note-a)) 70%, white));
}
html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol {
  color: #ff6177;
  transform: scale(calc(1 + var(--music-stop-beat) * .18)) rotate(calc(var(--music-stop-beat) * -5deg));
}
html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol::before {
  background: radial-gradient(circle, rgba(255, 66, 91, .32), rgba(255, 66, 91, .11) 44%, transparent 72%);
  opacity: calc(.36 + var(--music-stop-beat) * .64);
  transform: scale(calc(1 + var(--music-stop-beat) * .3));
}
html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol i:nth-child(-n + 2) {
  width: 1.35rem;
  height: .18rem;
  background: currentColor;
  box-shadow: 0 0 .5rem rgba(255, 59, 91, .24);
}
html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol i:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol i:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol i:nth-child(3) {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleX(.1);
}
html.music-v2 .music-toggle:hover .music-toggle-symbol { filter: brightness(1.14); }
html.music-v2 .music-toggle:active .music-toggle-symbol { transform: scale(.92); }
html.music-v2 .music-toggle:focus-visible {
  outline: 2px solid #eef7ff;
  outline-offset: .3rem;
}
html.music-v2 .music-toggle:disabled { cursor: progress; }

html.music-v2 .music-stage {
  --music-flash: 0;
  /* Full 36-degree volume, including its finite lens opening. */
  --music-beam-width: 94vh;
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  overflow: clip;
  contain: strict;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease, visibility 600ms;
}
html.music-v2 .music-stage.is-visible { opacity: 1; visibility: visible; }
html.music-v2 .music-stage__beam {
  position: absolute;
  top: 5.5rem;
  width: calc(var(--music-beam-width) + var(--beam-aperture, 62px));
  margin-left: calc((var(--music-beam-width) + var(--beam-aperture, 62px)) * -.5);
  height: 112vh;
  opacity: 0;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
html.music-v2 .music-stage__beam--a {
  left: 12%;
  --beam-color: var(--scene-a, 32, 132, 255);
}
html.music-v2 .music-stage__beam--b {
  left: 88%;
  --beam-color: var(--scene-b, 255, 155, 49);
}
html.music-v2 :is(.music-stage__beam--a, .music-stage__beam--b) {
  /* Move the virtual apex above the lens: width at the real origin is D,
     not zero. -D/(2*tan(18deg)) keeps both envelope edges on the aperture. */
  --beam-apex-y: calc(var(--beam-aperture, 62px) * -1.53884177);
  --beam-light: color-mix(in srgb, rgb(var(--beam-color)) 38%, #eff9ff);
  height: 140vh;
  background: conic-gradient(from 162deg at 50% var(--beam-apex-y), transparent,
    color-mix(in srgb, var(--beam-light) 24%, transparent) .8deg,
    color-mix(in srgb, var(--beam-light) 62%, transparent) 2deg,
    color-mix(in srgb, var(--beam-light) 88%, transparent) 3.8deg,
    color-mix(in srgb, var(--beam-light) 96%, transparent) 7deg 29deg,
    color-mix(in srgb, var(--beam-light) 88%, transparent) 32.2deg,
    color-mix(in srgb, var(--beam-light) 62%, transparent) 34deg,
    color-mix(in srgb, var(--beam-light) 24%, transparent) 35.2deg, transparent 36deg);
  -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.92) 30%, rgba(0,0,0,.80) 64%, rgba(0,0,0,.52) 86%, transparent);
  mask-image: linear-gradient(#000, rgba(0,0,0,.92) 30%, rgba(0,0,0,.80) 64%, rgba(0,0,0,.52) 86%, transparent);
}
/* Visible light sources and brief beat-driven cores make the moving beams
   identifiable as spotlights instead of another nearly invisible wallpaper. */
html.music-v2 :is(.music-stage__beam--a, .music-stage__beam--b)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 4.8rem;
  height: 2rem;
  border-radius: 50%;
  transform: translate(-50%, -40%);
  background: radial-gradient(ellipse, #fff 0 8%, rgba(230,252,255,.94) 15%, rgba(var(--beam-color),.7) 32%, transparent 72%);
}
html.music-v2 :is(.music-stage__beam--a, .music-stage__beam--b)::after {
  content: "";
  position: absolute;
  inset: 0;
  /* A beat brightens the same complete volume, never a separate pencil ray. */
  background: inherit;
  opacity: calc(var(--music-flash) * .22);
  will-change: opacity;
}
html.music-v2 .music-stage.has-physical-projectors :is(.music-stage__beam--a, .music-stage__beam--b)::before { display: none; }
html.music-v2 .music-projectors-canvas { position: absolute; left: 0; pointer-events: none; z-index: 3; }
@media (max-width: 1049px) {
  /* Corner fixtures occupy the outer 12% on each side while music is active. */
  html.music-v2.music-active .site-nav { max-width: 76vw; }
}
html.music-v2 .music-lasers {
  --laser-spread: 3deg;
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  contain: strict;
}
html.music-v2 .music-laser-bank {
  position: absolute;
  bottom: 4.2rem;
  width: 1px;
  height: 1px;
  transform-origin: 50% 100%;
  will-change: transform;
}
html.music-v2 .music-laser-bank--a { left: 7%; --laser-color: var(--scene-a, 75, 255, 222); }
html.music-v2 .music-laser-bank--b { left: 93%; --laser-color: var(--scene-b, 191, 140, 255); }
html.music-v2 .music-laser-bank::after {
  content: "";
  position: absolute;
  width: 2.1rem;
  height: .8rem;
  left: -1.05rem;
  top: -.2rem;
  border: 1px solid rgba(225,240,250,.32);
  border-radius: .25rem;
  background: radial-gradient(ellipse at 50% 25%, #fff 0 4%, rgb(var(--laser-color)) 6%, transparent 35%), linear-gradient(#43505b, #0a1017 65%, #29333f);
  box-shadow: 0 .3rem .6rem #0009;
}
html.music-v2 .music-laser-bank i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.65px;
  height: 135vmax;
  transform-origin: 50% 100%;
  transform: rotate(calc(var(--ray-index) * var(--laser-spread)));
  background: linear-gradient(transparent, rgba(var(--laser-color), .95) 24%, #eaffff 80%, #fff);
  box-shadow: 0 0 4px rgba(var(--laser-color),.72);
}
/* Local low haze sits behind content, within the musical stage only. The
   raster stays fixed: movement and density use compositor properties. */
html.music-v2 .music-fog {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -4vh;
  height: 34vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 66%, rgba(191,232,243,.72), transparent 32%),
    radial-gradient(ellipse at 35% 78%, rgba(204,225,244,.36), transparent 28%),
    radial-gradient(ellipse at 68% 70%, rgba(193,224,247,.5), transparent 32%),
    radial-gradient(ellipse at 90% 56%, rgba(214,217,248,.48), transparent 29%);
  contain: strict;
}
html.music-v2 .music-stage.is-visible .music-fog {
  visibility: visible;
  will-change: opacity, transform;
}
html.music-v2 .music-stage__beam--c {
  top: auto;
  left: 50%;
  bottom: -7vh;
  margin-left: -50vw;
  width: 100vw;
  height: 82vh;
  background: conic-gradient(from -27deg at 50% 100%, transparent, rgba(var(--scene-a,32,132,255),.16) 5deg,
    rgba(var(--scene-a,32,132,255),.68) 23deg, rgba(226,248,255,.72) 27deg,
    rgba(var(--scene-b,255,155,49),.52) 32deg, transparent 54deg);
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
  mask-image: linear-gradient(transparent, #000 55%);
  transform-origin: 50% 100%;
}
html.music-v2 .music-stage__horizon {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2vh;
  height: 23vh;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--scene-b, 255, 155, 49), .5), transparent 69%);
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
html.music-v2 .music-stage:not(.is-visible) :is(.music-stage__beam, .music-stage__horizon) { will-change: auto; }

/* Reserve the spectrum's own space instead of painting a fixed dark panel over
   text and controls. Only the current slot receives the shared canvas. */
html.music-v2 {
  --music-spectrum-height: 6.2rem;
  --music-spectrum-space: calc(var(--music-spectrum-height) + 1rem);
}
@media screen {
html.music-v2 .music-spectrum-panel.is-spectrum-reserved {
  position: relative;
  padding-bottom: calc(var(--music-spectrum-base-bottom, 2rem) + var(--music-spectrum-space)) !important;
}
html.music-v2 .music-spectrum-slot {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--music-spectrum-base-bottom, 2rem);
  height: var(--music-spectrum-height);
  pointer-events: none;
}
html.music-v2 .is-spectrum-reserved > .music-spectrum-slot { display: block; }
html.music-v2 .music-spectrum-slot--flow {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 1rem auto 2rem;
}
html.music-v2 .music-spectrum-slot--flow.is-spectrum-reserved { display: block; }
/* Keep the complete video panel and spectrum inside a normal-height slide;
   shorter windows may still grow naturally rather than clipping content. */
html.music-v2 .home-page[data-section-scroll] .music-spectrum-panel.is-spectrum-reserved .coming-soon-video {
  min-height: clamp(14rem, calc(100svh - var(--nav-height) - 13rem - var(--music-spectrum-space)), 36rem);
}
}
@media print {
  html.music-v2 .music-spectrum-slot { display: none !important; }
}
@media screen and (max-width: 900px) {
  /* The fixed session controls enter the spectrum's horizontal span here.
     Leave a full lower gutter so the stop button stays clear as well. */
  html.music-v2 .music-spectrum-panel.is-spectrum-reserved {
    padding-bottom: calc(max(var(--music-spectrum-base-bottom, 2rem), 3rem) + var(--music-spectrum-space)) !important;
  }
  html.music-v2 .music-spectrum-slot:not(.music-spectrum-slot--flow) {
    bottom: max(var(--music-spectrum-base-bottom, 2rem), 3rem);
  }
  html.music-v2 .home-page[data-section-scroll] .music-spectrum-panel.is-spectrum-reserved .coming-soon-video {
    min-height: clamp(14rem, calc(100svh - var(--nav-height) - 14rem - var(--music-spectrum-space)), 36rem);
  }
}
html.music-v2 .music-spectrum {
  position: relative;
  z-index: 7;
  width: min(35rem, calc(100vw - 3rem));
  max-width: 100%;
  height: var(--music-spectrum-height);
  margin-inline: auto;
  border: 1px solid rgba(235, 245, 255, .27);
  border-radius: 1.2rem;
  background: linear-gradient(140deg, rgba(17, 28, 42, .85), rgba(8, 16, 30, .72));
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
  contain: layout paint style;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 500ms cubic-bezier(.2,.7,.2,1), visibility 500ms;
}
html.music-v2 .music-spectrum.is-visible { opacity: .98; visibility: visible; transform: translateY(0); }
html.music-v2 .music-spectrum.is-visible.is-quiet { opacity: .35; }
html.music-v2 .music-spectrum__canvas { display: block; width: 100%; height: 100%; }
html.music-v2 .music-spectrum__labels {
  position: absolute;
  top: .55rem;
  left: 1.15rem;
  right: 1.15rem;
  display: flex;
  justify-content: space-between;
  color: #bdd5e7;
  font-size: .56rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html.music-v2 .music-spectrum__edge {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--scene-a, 32, 132, 255), .5), transparent);
}

/* Retire the old, page-wide brightness, synchronous zoom and shake effects.
   Existing glass shaders and independently authored wordmark/reflections stay. */
html.music-v2.music-active :is(#particles, .cta, .secondary-cta, .nav-links a, .tutorials-index a, .filter-button) { filter: none; }
html.music-v2.music-active body::before { filter: none; }
html.music-v2.music-active body::after { filter: none; scale: 1; opacity: .86; }
html.music-v2.music-active .main-title {
  filter: none;
  text-shadow: 0 0 1.5rem rgba(var(--scene-a, 32, 132, 255), .36), 0 0 3.6rem rgba(var(--scene-b, 255, 155, 49), .2);
}
html.music-v2.music-active .site-nav {
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .24);
}
html.music-v2.music-active :is(.tutorial-orb, .orbital-console, .shop-logo, .tutorial-logo,
  .cta, .secondary-cta, .nav-links a, .tutorials-index a, .filter-button,
  .showcase-card, .timeline-card, .bundle-card, .channel-card, .dashboard-panel,
  .contact-form, .message-preview, .lab-dashboard, .contact-manifest, .tutorial-doc-card,
  .tutorial-card, .tutorials-card, .contact-card, .shop-card, .shop-panel, .video-wrapper) { scale: 1; }
html.music-v2.music-active :is(.showcase-card, .timeline-card, .bundle-card, .channel-card,
  .dashboard-panel, .contact-form, .message-preview, .lab-dashboard, .contact-manifest,
  .tutorial-doc-card, .tutorial-card, .tutorials-card, .contact-card, .shop-card, .shop-panel, .video-wrapper) {
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 1.4rem 3rem rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
html.music-v2.music-active :is(.showcase-card, .timeline-card, .bundle-card, .channel-card,
  .dashboard-panel, .contact-form, .message-preview, .lab-dashboard, .contact-manifest,
  .tutorial-doc-card)::before { opacity: 0; }
html.music-v2.music-active :is(.tutorial-orb, .orbital-console)::before { scale: 1; opacity: .78; filter: blur(2.4rem); }
html.music-v2.music-active .console-halo { scale: 1; opacity: 1; filter: drop-shadow(0 0 1.2rem rgba(var(--scene-a, 32, 132, 255), .4)); }
html.music-v2.music-active :is(.tutorial-orb-face, .console-face) {
  filter: drop-shadow(0 1.8rem 1.4rem rgba(0,0,0,.38)) drop-shadow(0 0 1.5rem rgba(var(--scene-a, 32, 132, 255), .82));
}
html.music-v2.music-active :is(.project-meter span, .reading-progress) { filter: none; box-shadow: none; }
html.music-v2.music-beat .shock-reactive { translate: none; }
/* This portal already paints an opaque background across the panel. Sampling
   and blurring the moving lights behind it only adds a large render surface.
   Keep the glass perimeter, the 3D scene and the independently animated RGB
   label; ordinary transparent glass panels still retain their backdrop. */
html.music-v2 .video-wrapper.lg-surface:has(> .coming-soon-video) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* scale:1 is visually neutral but creates another transform context around
   the filtered RGB layers. Preserve the portal's resting composition. */
html.music-v2.music-active .video-wrapper:has(> .coming-soon-video) { scale: none; }
html.music-v2 :is(.music-visualizer, .music-shock-ring) { display: none; }

@media (max-height: 580px) {
  html.music-v2 { --music-spectrum-height: 3.2rem; }
  html.music-v2 .music-spectrum { width: min(20rem, calc(100vw - 3rem)); }
}
@media (prefers-reduced-motion: reduce) {
  html.music-v2 .music-toggle-symbol,
  html.music-v2 .music-toggle-symbol::before,
  html.music-v2 .music-toggle-symbol i { transition-duration: 100ms; }
  html.music-v2 .music-toggle:is([data-music-state="active"], [data-music-state="silent"]) .music-toggle-symbol { transform: none; }
  html.music-v2 .music-toggle-symbol::before { transform: none; }
  html.music-v2 .music-stage__beam,
  html.music-v2 .music-stage__horizon { will-change: auto; }
  html.music-v2 .music-stage__beam::after { opacity: 0; }
  html.music-v2 .music-stage.is-visible .music-fog { transform: none !important; will-change: auto; }
  html.music-v2 .music-laser-bank { will-change: auto; }
  html.music-v2 .music-spectrum { transition: opacity 200ms, visibility 200ms; transform: translateY(0); }
}

/* Hidden in the built HTML, before platform detection or glass hydration. */
.music-toggle[hidden],
.music-session-info[hidden],
.music-session-info button[hidden],
.music-guide button[hidden],
.music-navigation-guard[hidden] { display: none !important; }

html.music-v2 .music-guide {
  position: fixed;
  width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  overflow: auto;
  border: 1px solid rgba(222, 239, 255, .23);
  border-radius: 2rem;
  color: #eaf2fc;
  background:
    radial-gradient(ellipse at 0 0, rgba(var(--scene-a, 32, 132, 255), .16), transparent 60%),
    linear-gradient(145deg, rgba(19, 31, 46, .98), rgba(8, 13, 25, .98));
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.16);
  font-size: .91rem;
  line-height: 1.65;
}
html.music-v2 .music-guide[open] { animation: music-guide-enter 240ms cubic-bezier(.2,.8,.2,1); }
html.music-v2 .music-guide::backdrop { background: rgba(2, 6, 14, .6); backdrop-filter: blur(7px); }
html.music-v2 .music-guide > form { margin: 0; }
html.music-v2 .music-guide h2 {
  max-width: 28rem;
  margin: 0 0 1.2rem;
  padding: 0;
  color: #f7fbff;
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -.035em;
  line-height: 1.14;
  text-wrap: balance;
}
html.music-v2 .music-guide p { margin: 0 0 1.1rem; }
html.music-v2 .music-guide .music-guide-kicker {
  margin: 0 2rem .85rem 0;
  color: rgb(var(--scene-a, 114, 190, 255));
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html.music-v2 .music-guide ol {
  display: grid;
  gap: .45rem;
  margin: 1.1rem 0 1.35rem;
  padding-left: 1.3rem;
}
html.music-v2 .music-guide li { padding-left: .3rem; }
html.music-v2 .music-guide li::marker { color: #a3c9ea; font-size: .8rem; }
html.music-v2 .music-guide .music-guide-privacy {
  padding: .95rem 1rem;
  border: 1px solid rgba(214,235,255,.1);
  border-radius: 1rem;
  color: #bfccde;
  background: rgba(209,233,255,.035);
  font-size: .76rem;
  line-height: 1.55;
}
html.music-v2 .music-guide .music-guide-note { color: #a6b6ca; font-size: .76rem; }
html.music-v2 .music-guide button {
  font: inherit;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
html.music-v2 .music-guide-close {
  position: absolute;
  top: .8rem;
  right: .85rem;
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(232,244,255,.12);
  border-radius: 50%;
  color: #d3deec;
  background: rgba(223,242,255,.04);
  font-size: 1.35rem;
  line-height: 1;
}
html.music-v2 .music-guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: 1.4rem; }
html.music-v2 .music-guide-actions button {
  min-height: 2.65rem;
  padding: .65rem 1.1rem;
  border: 1px solid rgba(228,242,255,.2);
  border-radius: 999px;
  color: #eaf4ff;
  background: rgba(216,237,255,.055);
  font-size: .84rem;
  font-weight: 600;
}
html.music-v2 .music-guide-actions [data-music-confirm] {
  border-color: rgba(159,202,243,.38);
  background: linear-gradient(125deg, rgba(var(--scene-a, 32, 132, 255), .29), rgba(var(--scene-a, 32, 132, 255), .13));
}
html.music-v2 .music-guide-actions [data-music-confirm] span { margin-left: .7rem; opacity: .8; }
html.music-v2 .music-guide button:hover { background-color: rgba(217,239,255,.12); border-color: rgba(228,242,255,.45); }
html.music-v2 .music-guide button:active { transform: scale(.97); }
html.music-v2 .music-guide button:focus-visible,
html.music-v2 .music-session-info button:focus-visible,
.music-navigation-guard button:focus-visible { outline: 2px solid #edf7ff; outline-offset: 3px; }

html.music-v2 .music-session-info {
  position: fixed;
  z-index: 11;
  left: .85rem;
  bottom: .55rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  width: max-content;
  max-width: calc(100vw - 1.7rem);
  min-height: 1.75rem;
  padding: .25rem .35rem .25rem .65rem;
  border: 1px solid rgba(219,238,255,.13);
  border-radius: 999px;
  color: #c4d5e7;
  background: rgba(8, 15, 27, .9);
  box-shadow: 0 .2rem 1rem rgba(0,0,0,.16);
  font-size: .68rem;
  line-height: 1.35;
}
html.music-v2 .music-session-dot {
  flex: 0 0 auto;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: #83dbc4;
  box-shadow: 0 0 .45rem rgba(131,219,196,.28);
}
html.music-v2 .music-session-info:is([data-state="muted"], [data-state="suspended"], [data-state="ended"], [data-state="error"], [data-state="requesting"]) .music-session-dot {
  background: #f2bb7a;
  box-shadow: none;
}
html.music-v2 .music-session-status { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.music-v2 .music-session-info button,
.music-navigation-guard button {
  flex: 0 0 auto;
  min-height: 1.3rem;
  padding: .2rem .55rem;
  border: 1px solid rgba(215,235,255,.17);
  border-radius: 999px;
  color: #e3effc;
  background: rgba(208,232,255,.06);
  font: inherit;
  font-size: .67rem;
  line-height: 1.3;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
html.music-v2 .music-session-info button:hover,
.music-navigation-guard button:hover { color: #fff; background: rgba(216,237,255,.15); }
html.music-v2 .music-session-info [data-music-stop] { color: #ff9bab; }
html.music-v2 .music-guide button:disabled { opacity: .5; cursor: wait; }

html.music-session-host,
html.music-session-host body { overflow: hidden; }
html.music-session-host body::before,
html.music-session-host body::after { display: none; animation: none; will-change: auto; }
html.music-session-host body > :not(.music-page-frame):not(.music-navigation-guard) { display: none !important; }
.music-page-frame { position: fixed; inset: 0; z-index: 9999; display: block; width: 100%; height: 100%; border: 0; background: #080d17; }
.music-navigation-guard {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: .7rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .7rem 1rem;
  border: 1px solid rgba(219,238,255,.22);
  border-radius: 1.2rem;
  color: #d8e8f8;
  background: rgba(9, 18, 32, .97);
  box-shadow: 0 .8rem 3rem rgba(0,0,0,.36);
  font-size: .82rem;
  transform: translateX(-50%);
}
.music-navigation-guard button { padding: .5rem .8rem; font-size: .76rem; }
@keyframes music-guide-enter {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.music-v2 .music-guide[open] { animation: none; }
  html.music-v2 .music-guide button { transition: none; }
}

/* Content-led layouts. Scroll behavior is supplied by the shared section module. */
html .cv-page main { background: rgba(5, 8, 15, .58); }
html .cv-page .cv-hero {
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  text-align: left;
}
html .cv-page .page-hero-copy { justify-items: start; margin: 0; }
html .cv-page .page-hero-copy .main-title {
  font-size: clamp(2.8rem, 5.3vw, 5.7rem);
  max-width: 11ch;
  line-height: 1.04;
  text-align: left;
}
html .cv-page .hero-text { text-align: left; line-height: 1.75; max-width: 55ch; }
.cv-role { margin: 0; font-size: clamp(1.1rem, 1.7vw, 1.65rem); color: var(--text); font-weight: 650; }
html .cv-page .page-hero-actions { justify-content: flex-start; }
.cv-section-links { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; margin-top: 1rem; }
.cv-section-links a, .cv-text-link { color: var(--text); text-underline-offset: .3em; font-size: .95rem; line-height: 1.6; }
.cv-section-links a:hover, .cv-text-link:hover { color: #b0dfff; }
html .cv-page .cv-panel { min-height: 0; align-content: start; gap: 1rem; padding: clamp(1.35rem, 2.1vw, 2rem); }
html .cv-page .cv-profile-map { border-radius: 1.8rem; padding: clamp(1.5rem, 2.7vw, 2.75rem); }
.cv-profile-map h2 { margin: 0; font-size: clamp(1.7rem, 2.8vw, 2.7rem); line-height: 1.12; }
.cv-domain-list { margin: .5rem 0; display: grid; gap: 1.35rem; }
.cv-domain-list > div { padding-left: 1rem; border-left: 2px solid rgba(161, 208, 255, .45); }
.cv-domain-list dt { color: var(--text); font-weight: 750; font-size: 1.03rem; }
.cv-domain-icon { display: inline-block; min-width: 1.6rem; color: #b8dbff; }
.cv-domain-list dd { margin: .5rem 0 0; line-height: 1.65; color: var(--text); font-size: .95rem; }
.cv-domain-list dd span { display: block; color: var(--muted); font-size: .85rem; margin-top: .3rem; }
html .cv-page .section-heading { margin-bottom: 1.5rem; }
html .cv-page .section-heading h2 { font-size: clamp(1.9rem, 3.5vw, 3.4rem); }
.cv-employer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem 1.5rem; padding: 1rem 0 1.4rem; }
.cv-employer strong { color: var(--text); font-size: 1.3rem; }
.cv-employer span { color: var(--muted); line-height: 1.5; }
html .cv-page .cv-experience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
html .cv-page .cv-experience-card { border-radius: 1.5rem; }
html .cv-page .cv-experience-card h3 { font-size: clamp(1.3rem, 2vw, 1.85rem); }
.cv-task-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; color: var(--muted); line-height: 1.65; }
html .cv-page .cv-context { padding-top: .9rem; border-top: 1px solid rgba(215, 231, 255, .18); color: #c2deff; font-size: .85rem; }
.cv-learning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cv-education-track { list-style: none; margin: .5rem 0 0 .35rem; padding: 0 0 0 1.5rem; border-left: 1px solid rgba(170, 209, 255, .5); }
.cv-education-track li { position: relative; display: grid; gap: .5rem; padding-bottom: 1.7rem; }
.cv-education-track li:last-child { padding-bottom: .2rem; }
.cv-education-track li::before { content: ''; position: absolute; width: .65rem; height: .65rem; border-radius: 50%; background: #b8dbff; left: -1.85rem; top: .3rem; box-shadow: 0 0 0 5px rgba(172, 207, 255, .12); }
.cv-stage { color: #c2deff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.cv-education-track strong { font-size: 1.15rem; color: var(--text); }
.cv-interest-list { display: grid; gap: 1.1rem; margin: .3rem 0 0; }
.cv-interest-list dt { font-weight: 700; color: var(--text); margin-bottom: .35rem; }
.cv-interest-list dd { margin: 0; color: var(--muted); line-height: 1.65; }
.cv-employer-contact { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: 1.5rem; padding: 1.25rem 0; }
.cv-employer-contact h3 { margin: 0 0 .4rem; font-size: 1.4rem; }
.cv-employer-contact p { margin: 0; color: var(--muted); line-height: 1.6; }
html .contacts-page #canaux .contact-manifest { margin-top: 1.5rem; }
html .contacts-page .contact-form textarea { resize: vertical; }
html .contacts-page .channel-card h3 { overflow-wrap: anywhere; }
html .contacts-page .message-preview { align-self: start; }
html .contacts-page .preview-message { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  html .cv-page .cv-hero { grid-template-columns: 1fr; }
  html .cv-page .page-hero-copy .main-title { max-width: none; }
  .cv-learning-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  html .cv-page .cv-experience-grid { grid-template-columns: 1fr; }
  .cv-employer-contact { align-items: flex-start; flex-direction: column; }
  html .cv-page .page-hero-actions { display: grid; width: 100%; }
  html .cv-page .page-hero-actions a { width: 100%; box-sizing: border-box; }
  html .cv-page .cv-panel { padding: 1.25rem; }
}
/* Each real section is a whole-screen panel; shared CSS owns its viewport height. */
@media screen {
  html .cv-page .cv-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  html .cv-page .cv-hero .page-hero-copy { width: min(100%, 64rem); max-width: 64rem; }
  html .cv-page .cv-hero .main-title { max-width: none; }
  html .cv-page .cv-slide { display: grid; gap: 1.25rem; }
  html .cv-page .cv-slide > * { min-width: 0; width: 100%; }
  html .cv-page .cv-slide .section-heading { margin: 0; }
  html .cv-page .cv-slide :is(.cv-profile-map, .cv-learning-grid) { max-width: 72rem; margin-inline: auto; }
  html .cv-page .cv-role-slide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 3rem; }
  html .cv-page .cv-single-card, html .cv-page .cv-learning-grid { grid-template-columns: minmax(0, 1fr); }
  html .cv-page .cv-domain-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  html .cv-page .cv-domain-list > div { min-width: 0; }
  html .cv-page .cv-education-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  html .cv-page .cv-education-track li { padding-bottom: 0; }
  html .cv-page .cv-employer-contact { margin: 0; padding: 0; justify-content: center; }
  html .cv-page .cv-interests h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
  html .cv-page #interets .cv-learning-grid { max-width: 60rem; }
  html .contacts-page main > section { display: grid; gap: 1.25rem; }
  html .contacts-page .section-heading { margin-bottom: 0; }
  html .contacts-page .section-heading h2 { font-size: clamp(1.9rem, 3.5vw, 3.5rem); }
  html .contacts-page .contact-lab { grid-template-columns: minmax(0, 1fr); width: min(100%, 64rem); margin-inline: auto; }
  html .contacts-page #message .section-heading { width: min(100%, 64rem); margin-inline: auto; }
  html .contacts-page #message .section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
  html .contacts-page .contact-form.lg-surface { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1.25rem; gap: .65rem; }
  html .contacts-page .contact-form .contact-identity { grid-column: span 1; }
  html .contacts-page .contact-form .contact-topic { grid-column: 1 / -1; }
  html .contacts-page .contact-form .full-field { grid-column: 1 / -1; }
  html .contacts-page .contact-form :is(.cta, .secondary-cta) { grid-column: span 1; padding-inline: .8rem; }
  html .contacts-page .contact-form textarea { height: 7rem; min-height: 7rem; }
  html .contacts-page .contact-form > .contact-privacy { margin: 0; line-height: 1.5; }
  html .contacts-page .contact-form [data-contact-challenge]:empty { display: none; }
  html .contacts-page .message-preview { min-height: 0; width: min(100%, 60rem); margin-inline: auto; gap: 1rem; box-sizing: border-box; }
  html .contacts-page .message-preview > :is(p,h3) { margin-block: 0; }
  html .contacts-page .preview-message { min-height: 7rem; }
  html .contacts-page .channel-card { padding: 1.5rem; min-height: 0; gap: .6rem; }
  html .contacts-page .channel-card :is(h3,p) { margin: 0; }
  html .contacts-page .contact-manifest { margin: 0; gap: 1rem; padding: 1.5rem; }
  html .contacts-page .contact-manifest h2 { margin: 0 0 .8rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
  html .contacts-page .contact-manifest :is(p,ul) { margin: 0; }
  html .contacts-page .contact-manifest ul { padding-left: 0; list-style: none; }
  @media (min-width: 981px) {
    html .contacts-page .contact-form.lg-surface { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    html .contacts-page .contact-form :is(.contact-identity, .contact-topic) { grid-column: span 2; }
    html .contacts-page .contact-form :is(.cta, .secondary-cta) { grid-column: span 3; }
  }
  @media (max-width: 980px) {
    html .cv-page .cv-role-slide { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    html .cv-page .cv-domain-list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    html .cv-page .cv-education-track { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    html .contacts-page .contact-hero { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    html .contacts-page .contact-console { width: min(52vw, 22svh); margin: 0 auto; }
    html .contacts-page .contact-hero .page-hero-copy { gap: .8rem; }
    html .contacts-page .contact-hero .main-title { font-size: clamp(2.3rem, 6vw, 3.4rem); margin: 0; }
    html .contacts-page .contact-hero .hero-text { margin-block: 0; }
  }
  @media (max-width: 600px) {
    html .cv-page .page-hero-actions { grid-template-columns: minmax(0, 1fr); }
    html .cv-page .page-hero-actions > a:last-child { grid-column: 1 / -1; }
    html .cv-page .page-hero-actions a { padding-inline: .7rem; }
    html .cv-page .cv-hero .page-hero-copy { gap: .9rem; }
    html .cv-page .cv-hero .hero-text { margin: 0; line-height: 1.6; }
    html .cv-page .cv-profile-map { padding: 1.25rem; }
    html .cv-page .cv-slide .section-heading h2 { font-size: 1.9rem; }
    html .cv-page .cv-slide .section-heading p { line-height: 1.5; }
    html .cv-page #inspection .cv-panel { gap: .7rem; }
    html .contacts-page .contact-form :is(input,select) { min-height: 2.75rem; padding: .65rem .75rem; font-size: 1rem; }
    html .contacts-page .contact-form textarea { height: 6rem; min-height: 6rem; font-size: 1rem; }
    html .contacts-page .channel-grid { gap: 1rem; }
    html .contacts-page .channel-icon { width: 2.3rem; }
    html .contacts-page .channel-card h3 { font-size: 1.25rem; }
    html .contacts-page .contact-manifest li { padding: .65rem .8rem; }
    html .contacts-page .contact-manifest ul { gap: .6rem; }
  }
}
@media print {
  @page { margin: 14mm; }
  html:has(.cv-page), html body.cv-page { background: white !important; color: #152234 !important; overflow: visible !important; height: auto !important; }
  .cv-page { --text: #152234; --muted: #354253; }
  html .cv-page main { background: white !important; }
  html .cv-page main * { color: #152234 !important; text-shadow: none !important; opacity: 1 !important; animation: none !important; transition: none !important; }
  html .cv-page .card-number { color: #354253 !important; }
  .cv-page > :is(nav, canvas, footer, .shockwave-field, .reading-progress),
  .cv-page .no-cookie-popup, .cv-page .music-permission-panel,
  .cv-page .lg-surface__material, .cv-page .lg-btn__glass,
  .cv-page .cv-section-links, .cv-page .page-hero-actions,
  .cv-page .cv-text-link, .cv-page .cv-employer-contact,
  .cv-page [data-section-navigation] { display: none !important; }
  .cv-page::before, .cv-page::after, .cv-page main section::before, .cv-page main section::after { display: none !important; }
  html .cv-page main > section { width: 100%; min-height: 0 !important; margin: 0; padding: 1rem 0 !important; break-before: auto !important; }
  html .cv-page .reveal-section { opacity: 1 !important; transform: none !important; }
  html .cv-page .cv-hero { grid-template-columns: 1fr; gap: 1rem; }
  html .cv-page .main-title { max-width: none !important; color: #152234 !important; -webkit-text-fill-color: #152234 !important; text-shadow: none !important; font-size: 2.2rem !important; }
  html .cv-page .cv-panel { min-width: 0; background: white !important; border: 1px solid #cad3df !important; border-radius: .5rem !important; box-shadow: none !important; backdrop-filter: none !important; padding: .8rem !important; gap: .65rem; break-inside: avoid; }
  html .cv-page main .cv-panel::before, html .cv-page main .cv-panel::after { display: none !important; }
  .cv-domain-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .cv-domain-list > div { min-width: 0; }
  .cv-profile-map > h2 { display: none; }
  html .cv-page :is(.cv-context, .cv-stage, .cv-domain-icon) { color: #354253; }
  html .cv-page :is(p, li, dd, dt) { font-size: 10pt !important; line-height: 1.45 !important; }
  html .cv-page .cv-panel h3 { font-size: 14pt; }
  html .cv-page .cv-panel strong { font-size: 11pt; }
  html .cv-page .section-heading { margin-bottom: .5rem; break-after: avoid; }
  .cv-employer { padding: .5rem 0 .8rem; break-after: avoid; }
  html .cv-page .section-heading h2 { font-size: 1.6rem; }
  html .cv-page .cv-experience-grid, .cv-learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  html .cv-page .cv-single-card, html .cv-page .cv-learning-grid { grid-template-columns: minmax(0, 1fr); }
  html .cv-page .cv-role-slide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; break-inside: avoid; }
  html .cv-page .cv-education-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  html .cv-page .cv-education-track li { padding-bottom: 0; }
}

.cv-page .cv-contact-details a { color: inherit; overflow-wrap: anywhere; text-underline-offset: .2em; }
/* Keep the new contact/reference panel readable within a standard mobile viewport. */
@media screen and (max-width: 600px) {
  html .cv-page #coordonnees .cv-contact-details { gap: .6rem; padding: 1rem; }
  .cv-page #coordonnees .cv-interest-list { gap: .55rem; margin: 0; }
  .cv-page #coordonnees .cv-interest-list dt { font-size: .85rem; margin-bottom: .15rem; }
  .cv-page #coordonnees .cv-interest-list dd { font-size: .95rem; line-height: 1.5; }
  .cv-page #coordonnees .cv-contact-details p { margin: 0; line-height: 1.5; }
  html .cv-page #coordonnees .cv-experience-grid { gap: .75rem; }
}

/* User-supplied indicative personal ratings, separate from the factual PDF. */
html .cv-page .cv-skill-profile { width: min(100%, 72rem); margin-inline: auto; box-sizing: border-box; }
.cv-skill-list { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.cv-skill-list li { display: grid; gap: .65rem; }
.cv-skill-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; color: var(--text); line-height: 1.5; }
.cv-skill-label > :first-child { font-weight: 650; }
.cv-skill-label > :last-child { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; color: #ffe5a0; }
.cv-skill-track { height: .8rem; border: 1px solid rgba(255,231,166,.3); border-radius: 1rem; overflow: hidden; background: rgba(8,10,17,.45); box-shadow: inset 0 1px 4px rgba(0,0,0,.4); }
.cv-skill-track > span { display: block; width: var(--skill-score); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#bd8823,#f3c65b 60%,#ffebaf); box-shadow: inset 0 1px 1px rgba(255,255,255,.65); }
@media (max-width: 600px) {
  .cv-skill-label { gap: .75rem; font-size: .95rem; }
  .cv-skill-label > :last-child { font-size: .85rem; }
  .cv-skill-list { gap: 1.15rem; }
}
@media print {
  .cv-skill-track { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
/* Interactive personal profile: one panel, three discoverable groups, five readable rows. */
html .cv-page .cv-personal-section { grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); align-items: center; gap: 2rem; }
.cv-personal-intro p { line-height: 1.7; }
.cv-personal-explorations { margin-top: 1rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.cv-personal-explorations summary { cursor: pointer; color: var(--text); text-underline-offset: .2em; }
html .cv-page .cv-skill-profile { --glass-radius: 2rem; gap: 1rem; }
.cv-skill-profile h3 { margin: 0; font-size: clamp(1.25rem,2vw,1.7rem); line-height: 1.25; }
.cv-skill-disclaimer { margin: 0; font-size: .85rem; line-height: 1.5; }
.cv-skill-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.cv-skill-tabs button { flex: 1 1 8rem; cursor: pointer; border: 1px solid rgba(255,225,155,.3); border-radius: .75rem; background: rgba(12,15,25,.4); color: var(--text); padding: .65rem .75rem; font: inherit; font-size: .8rem; line-height: 1.35; }
.cv-skill-tabs button[aria-selected="true"] { color: #fff0bf; background: rgba(165,113,25,.28); border-color: #f3cf77; }
.cv-skill-tabpanel[hidden] { display: none !important; }
.cv-skill-item { display: grid; gap: .6rem; width: 100%; min-width: 0; padding: .5rem; margin: 0; cursor: pointer; text-align: left; font: inherit; color: var(--text); border: 1px solid transparent; border-radius: .7rem; background: transparent; }
.cv-skill-item[aria-pressed="true"] { border-color: rgba(255,225,155,.4); background: rgba(255,224,160,.06); }
.cv-skill-profile :is(button,summary):focus-visible { outline: 2px solid #ffe5a0; outline-offset: 3px; }
.cv-skill-profile .cv-skill-list { gap: .45rem; }
.cv-skill-profile .cv-skill-fill { transform-origin: left; }
.cv-skill-profile.is-revealed .cv-skill-tabpanel:not([hidden]) .cv-skill-fill { animation: cvSkillGrow .6s cubic-bezier(.2,.7,.2,1) both; }
.cv-skill-detail { min-height: 3em; margin: 0; font-size: .85rem; line-height: 1.5; color: #ffe5a0; }
html .cv-page .cv-industrial-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
html .cv-page .cv-industrial-grid .cv-panel { padding: 1.4rem; gap: .8rem; }
@keyframes cvSkillGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1100px) {
  html .cv-page .cv-personal-section { grid-template-columns: minmax(0,1fr); }
  html .cv-page .cv-personal-intro { width: min(100%,72rem); margin-inline: auto; }
}
@media (max-width: 760px) {
  html .cv-page .cv-industrial-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-skill-profile.is-revealed .cv-skill-fill { animation: none !important; transform: none; }
}
@media print {
  .cv-skill-tabs, .cv-skill-detail { display: none; }
  .cv-skill-tabpanel[hidden] { display: block !important; }
  .cv-skill-fill { animation: none !important; transform: none !important; }
  .cv-skill-item { break-inside: avoid; }
}
.cv-skill-item, .cv-skill-tabs button { scroll-margin-top: calc(var(--nav-height) + 1rem); scroll-margin-bottom: 1rem; }

html .cv-page .cv-contact-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cv-contact-heading .cta { flex: 0 0 auto; }
@media (max-width: 600px) { .cv-contact-heading .cta { width: 100%; box-sizing: border-box; } }
/* Disclosure grows downward from a stable desktop origin instead of recentering both columns. */
@media (min-width: 1101px) {
  html body.cv-page #interets.cv-personal-section { align-items: start; align-content: start; }
}
/* Industrial cards: match the actual glass radius to the text inset. */
html .cv-page .cv-industrial-grid .cv-panel {
  --glass-radius: 2rem;
  padding: clamp(1.5rem, 2vw, 1.8rem);
  grid-template-rows: auto auto 1fr auto;
}
@media (max-width: 600px) {
  html .cv-page .cv-industrial-grid .cv-panel { --glass-radius: 1.6rem; padding: 1.35rem; }
}

/* A panel is a real section, including its dock clearance. Keep natural
   growth for accessibility; never clip text to manufacture a full screen. */
@media screen {
  html:has(> body[data-section-scroll]) { overscroll-behavior-y: none; }
  html body[data-section-scroll] { position: relative; }
  html body[data-section-scroll] main > section[id] {
    min-height: 100svh;
    margin-block: 0;
    padding-block: calc(var(--nav-height) + 2rem) 2rem;
    scroll-margin-top: 0;
    box-sizing: border-box;
    justify-content: center;
    align-content: center;
  }
  html body[data-section-scroll] main > section.reveal-section {
    transform: none;
    opacity: 1;
    transition: none;
  }
  html body[data-section-scroll] main > section:last-child {
    padding-bottom: calc(var(--panel-footer-space, 120px) + 1.5rem);
  }
  html body[data-section-scroll] > footer {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: 1.5rem;
    margin-block: 0;
  }
  html .home-page[data-section-scroll] .hero { gap: 1.5rem; }
  html .home-page[data-section-scroll] .coming-soon-video {
    min-height: clamp(14rem, calc(100svh - var(--nav-height) - 13rem), 36rem);
  }
  html .home-page[data-section-scroll] .hack-home-introduction { grid-template-columns: 1fr; }
  html .home-page[data-section-scroll] .hack-home-copy { max-width: 60ch; }
  html .home-page[data-section-scroll] .hack-home-explore .hack-home-topics { margin-top: 0; }
  html .home-page[data-section-scroll] .contact-card { min-height: 0; }
  @media (max-width: 700px) {
    html .home-page[data-section-scroll] .contact-card { padding: 1.5rem; gap: 1rem; }
    html .home-page[data-section-scroll] .contact-visual { width: 4rem; grid-row: 1; justify-self: start; }
    html .home-page[data-section-scroll] .contact-visual__core { font-size: 2.5rem; }
    html .home-page[data-section-scroll] .hack-home-explore .hack-home-orbit { width: 9rem; }
    html .home-page[data-section-scroll] .hack-home-explore .hack-home-panel { gap: 1.25rem; padding: 1.3rem; }
  }
}
@media screen {
  html .home-page[data-section-scroll] .contact-return {
    color: var(--text); text-underline-offset: .3em; align-self: center;
    padding: .4rem; font-size: 1rem; line-height: 1.5;
  }
  @media (max-width: 700px) {
    html .home-page[data-section-scroll] .contact-actions { flex-direction: column; align-items: flex-start; gap: .6rem; }
    html .home-page[data-section-scroll] .contact-return { align-self: flex-start; }
  }
}
@media screen {
  html .home-page[data-section-scroll] .hack-home-introduction .hack-home-copy { max-width: none; }
  html .home-page[data-section-scroll] .hack-home-introduction p { max-width: 60ch; }
  html .home-page[data-section-scroll] .hack-home-copy h3 { text-wrap: balance; }
}

.home-projects .home-projects-panel { grid-template-columns: minmax(0, 1fr); }
.home-projects-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.home-projects-list li { min-width: 0; }
.home-projects-list li + li { border-left: 1px solid #d4e3ff33; }
.home-project-link { position: relative; display: block; height: 100%; padding: 1rem 2rem 1rem 1.2rem; color: inherit; text-decoration: none; border-radius: .75rem; }
.home-project-link h3 { margin: 0 0 .65rem; font-size: clamp(1.15rem, 2vw, 1.6rem); line-height: 1.3; }
.home-project-link p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--text-muted, #d0d8e8); }
.home-project-arrow { position: absolute; right: .5rem; top: 1rem; color: #e2edff; }
.home-project-link:hover { background: #c7dcff12; }
.home-project-link:focus-visible { outline: 2px solid #d8e9ff; outline-offset: 2px; }
.home-cv .home-cv-panel { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); }
.home-cv .hack-home-copy h3 { margin-block: .3rem; }
.home-cv .hack-home-copy p { margin-block: .5rem; }
.home-cv-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.home-cv-actions > a { padding: 1rem 1.15rem; line-height: 1.2; }
@media (max-width: 700px) {
  .home-projects-list { grid-template-columns: minmax(0, 1fr); }
  .home-projects-list li + li { border-left: 0; border-top: 1px solid #d4e3ff33; }
  .home-project-link { padding: .8rem 1.7rem .8rem .2rem; }
  .home-project-link h3 { margin-bottom: .35rem; }
  .home-project-link p { font-size: .88rem; line-height: 1.4; }
  .home-cv-actions { align-items: stretch; flex-direction: column; }
}

/* Keep the existing badge, orbit geometry and keyframes; only the palette changes. */
.home-page #contact .contact-kicker[data-contact-availability] {
  --contact-signal: 255, 168, 75;
  color: rgb(var(--contact-signal));
}
.home-page #contact .contact-kicker[data-contact-state="open"] { --contact-signal: 91, 187, 255; }
.home-page #contact .contact-kicker[data-contact-availability]::before {
  flex: 0 0 .55rem;
  background: rgb(var(--contact-signal));
  box-shadow: 0 0 .7rem rgba(var(--contact-signal), .85);
}
.home-page #contact .contact-visual__core {
  background-image: linear-gradient(120deg, #83cfff, #2084ff 40%, #ff9b31 72%, #ffc078);
  filter: drop-shadow(-.2rem 0 1.1rem rgba(32, 132, 255, .4)) drop-shadow(.2rem 0 1.1rem rgba(255, 155, 49, .3));
}
.home-page #contact .contact-visual__halo {
  background: radial-gradient(circle at 32% 38%, rgba(32, 132, 255, .28), transparent 68%),
    radial-gradient(circle at 68% 62%, rgba(255, 155, 49, .24), transparent 68%);
}
.home-page #contact .contact-visual__orbit-one i { background: #2084ff; box-shadow: 0 0 .9rem rgba(32, 132, 255, .95); }
.home-page #contact .contact-visual__orbit-two i { background: #ff9b31; box-shadow: 0 0 .9rem rgba(255, 155, 49, .95); }

/* Two real panels, with an optional preview inside the message panel. */
html body.contacts-page #message { padding-bottom: 2rem; }
html body.contacts-page #message > .section-heading,
html body.contacts-page #message > .contact-coordinates { width: min(100%, 76rem); margin-inline: auto; }
html body.contacts-page #message .contact-lab {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  align-items: start; width: min(100%, 76rem); gap: 0;
  /* Final layout changes once; motion is compositor translation and opacity. */
}
html body.contacts-page #message .contact-lab.is-preview-open { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.5rem; }
html body.contacts-page #message .contact-form {
  width: 100%; max-width: 64rem; min-width: 0; justify-self: center; box-sizing: border-box;
  --glass-radius: 2rem; --liquid-glass-field-radius: 1rem; border-radius: 2rem; padding: clamp(1.5rem, 3vw, 2.5rem); gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body.contacts-page #message .contact-form label { min-width: 0; gap: .5rem; }
html body.contacts-page #message .contact-form label > span { padding-inline: .35rem; }
html body.contacts-page #message .contact-form .contact-identity { grid-column: span 1; }
html body.contacts-page #message .contact-form :is(.contact-topic,.full-field,.form-status,noscript) { grid-column: 1 / -1; }
html body.contacts-page #message .contact-form :is(input,select,textarea) {
  box-sizing: border-box; width: 100%; min-width: 0; border-radius: 1rem;
  padding: .85rem 1rem; line-height: 1.5;
}
html body.contacts-page #message .contact-form textarea { height: 8rem; min-height: 8rem; resize: vertical; }
html body.contacts-page #message .contact-form :is(.cta,.secondary-cta) { grid-column: span 1; min-width: 0; padding: .9rem 1.1rem; }
html body.contacts-page #message .contact-form .contact-mailto { font-size: .9rem; line-height: 1.45; text-align: center; }
html body.contacts-page #message .contact-form .contact-privacy { font-size: .85rem; line-height: 1.5; }
html body.contacts-page #message .form-status { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
html body.contacts-page #message .form-status:empty { display: none; }
.contact-preview-toggle { flex: 0 0 auto; }
.contact-preview-slot { min-width: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: translateX(1.5rem); transition: opacity .35s ease, transform .55s ease, visibility 0s .55s; }
.is-preview-open > .contact-preview-slot { visibility: visible; opacity: 1; transform: none; transition-delay: .08s, 0s, 0s; }
html body.contacts-page #message .message-preview { width: 100%; min-width: 0; box-sizing: border-box; padding: 1.5rem; --glass-radius: 2rem; border-radius: 2rem; }
html body.contacts-page #message .preview-message { min-height: 8rem; max-height: 22rem; overflow-y: auto; padding: 1rem; --glass-radius: 1rem; border-radius: 1rem; }
html body.contacts-page #message .preview-footer { flex-wrap: wrap; gap: .5rem; padding: .75rem; }
html body.contacts-page #message .preview-footer span { min-width: 0; overflow-wrap: anywhere; }
.contact-coordinates { color: var(--muted); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; scroll-margin-top: calc(var(--nav-height) + 2rem); }
.contact-coordinates a { color: var(--text); text-underline-offset: .2em; }
html body.contacts-page > footer { position: relative; left: auto; bottom: auto; translate: none; transform: none; margin: 1rem auto 1.5rem; }
@media (max-width: 980px) {
  html body.contacts-page #message .contact-lab { grid-template-columns: minmax(0, 1fr); }
  html body.contacts-page #message .contact-lab.is-preview-open { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .contact-preview-slot { display: grid; grid-template-rows: 0fr; transform: translateY(.75rem); transition: opacity .3s ease, transform .35s ease, visibility 0s .35s; }
  .is-preview-open > .contact-preview-slot { grid-template-rows: 1fr; transform: none; }
  html body.contacts-page #message .message-preview { min-height: 0; overflow: hidden; }
  .contact-preview-slot:not([aria-hidden="false"]) > .message-preview { padding-block: 0 !important; border-block-width: 0; }
}
@media (max-width: 600px) {
  html body.contacts-page #message .contact-form { padding: 1.4rem; --glass-radius: 1.6rem; border-radius: 1.6rem; gap: .9rem; }
  html body.contacts-page #message .contact-form .contact-identity { grid-column: 1 / -1; }
  html body.contacts-page #message .contact-form :is(.cta,.secondary-cta) { grid-column: 1 / -1; }
  html body.contacts-page #message .section-heading { align-items: flex-start; }
  html body.contacts-page #message .contact-preview-toggle { padding: .8rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html body.contacts-page #message .contact-lab, .contact-preview-slot { transition: none; transform: none; }
}
@media (min-width: 981px) {
  html body.contacts-page #message .contact-lab:not(.is-preview-open) .contact-form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html body.contacts-page #message .contact-lab:not(.is-preview-open) .contact-form :is(.contact-identity,.contact-topic) { grid-column: span 2; }
  html body.contacts-page #message .contact-lab:not(.is-preview-open) .contact-form :is(.cta,.secondary-cta) { grid-column: span 3; }
}

/* Explicit contrast: browser placeholder opacity and inherited text fill can darken fields. */
html body.contacts-page #message .contact-form :is(input,textarea)::placeholder {
  color: #fff !important; opacity: 1 !important; -webkit-text-fill-color: #fff !important;
}
html body.contacts-page #message .contact-form :is(input,textarea,select) {
  color: #fff; -webkit-text-fill-color: #fff;
}

html body.contacts-page #message .contact-form .contact-coordinates {
  grid-column: 1 / -1; width: 100%; text-align: center; margin: .2rem 0 0;
}
/* Native fallback stays readable even when the OS owns the popup. */
html body.contacts-page #message select { color-scheme: dark; }
html body.contacts-page #message select option {
  color: #fff !important; -webkit-text-fill-color: #fff !important; background: #132337;
}
html body.contacts-page #message select option:checked { background: #254d71; }
/* Progressive native picker: same select, value, validation and keyboard model. */
@supports (appearance: base-select) {
  html body.contacts-page #message select,
  html body.contacts-page #message select::picker(select) { appearance: base-select; }
  html body.contacts-page #message select::picker(select) {
    color: #fff; -webkit-text-fill-color: #fff;
    background: linear-gradient(145deg,rgba(36,61,89,.97),rgba(14,22,40,.97));
    backdrop-filter: blur(16px) saturate(135%);
    border: 1px solid rgba(208,232,255,.6); border-radius: 1rem; padding: .35rem;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.45),0 .8rem 2rem rgba(0,0,0,.45);
    margin-block: .3rem; max-block-size: min(22rem,60svh); overflow: auto;
  }
  html body.contacts-page #message select option { padding: .75rem 1rem; border-radius: .65rem; background: transparent; cursor: pointer; }
  html body.contacts-page #message select option:checked { background: rgba(104,174,241,.22); }
  html body.contacts-page #message select option:is(:hover,:focus-visible) { background: rgba(191,222,255,.2); outline: 1px solid rgba(208,232,255,.7); outline-offset: -1px; }
  html body.contacts-page #message select::picker-icon { color: #fff; }
}
@media (forced-colors: active) {
  html body.contacts-page #message select { color-scheme: normal; color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; }
  html body.contacts-page #message select option,
  html body.contacts-page #message select::picker(select) { color: CanvasText !important; -webkit-text-fill-color: CanvasText !important; background: Canvas !important; border-color: CanvasText; }
  html body.contacts-page #message select option:checked { color: HighlightText !important; -webkit-text-fill-color: HighlightText !important; background: Highlight !important; }
}
@media (forced-colors: active) {
  html body.contacts-page #message select::picker-icon { color: ButtonText !important; }
}
@media (forced-colors: active) {
  /* Keep each system-color foreground/background pair together; avoid a Canvas backplate over HighlightText. */
  html body.contacts-page #message select::picker(select),
  html body.contacts-page #message select option { forced-color-adjust: none; }
}

/* Mobile glass needs enough flat area between its content and the corner arc.
   Keep the desktop silhouette unchanged and preserve compact nested controls. */
@media (max-width: 700px) {
  html .lg-surface:not(.site-nav):not(footer) {
    --liquid-glass-panel-radius: 2rem;
  }

  html body.home-page[data-section-scroll] :is(.hack-home-panel, .contact-card) {
    padding: 1.25rem;
  }

  html body.home-page[data-section-scroll] .home-project-link {
    padding-left: .5rem;
  }

  /* WebKit may let composited portal layers escape overflow:hidden at a
     rounded edge. Clip the whole surface and mirror its radius on the opaque
     child so the four corners stay rounded on iPhone. */
  html body.home-page[data-section-scroll] .video-wrapper.lg-surface {
    overflow: hidden;
    isolation: isolate;
    clip-path: inset(0 round 2rem);
  }

  html body.home-page[data-section-scroll] .video-wrapper > .coming-soon-video {
    border-radius: inherit;
  }
}

@media (max-width: 700px) and (max-height: 600px) {
  html body.home-page[data-section-scroll] .home-projects-panel {
    padding: .8rem;
  }

  html body.home-page[data-section-scroll] .home-project-link {
    padding-left: .15rem;
  }
}

/* Compact dock only. One accessible brand link; artwork keeps its own ratio. */
@media (max-width: 1024px) {
  html body[class] .site-nav.is-menu-dock {
    --mobile-menu-size: 44px;
    --mobile-dock-gap: 8px;
    --mobile-dock-gutter: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
    top: max(12px, env(safe-area-inset-top));
    width: calc(100% - 2 * var(--mobile-dock-gutter));
    max-width: calc(100% - 2 * var(--mobile-dock-gutter));
    display: grid;
    grid-template-columns: var(--mobile-menu-size) minmax(0, 1fr) var(--mobile-menu-size);
    column-gap: var(--mobile-dock-gap);
    row-gap: 0;
    align-items: center;
    min-height: 66px;
    padding: 10px 12px;
    box-sizing: border-box;
    /* Keep the compact shell shape while its menu height changes. */
    border-radius: 33px;
    overflow: clip;
  }
  html body[class] .site-nav.is-menu-dock .brand.lg-btn {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    width: 100% !important;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    translate: none !important;
    touch-action: manipulation;
  }
  html body[class] .site-nav.is-menu-dock .brand.lg-btn::before,
  html body[class] .site-nav.is-menu-dock .brand.lg-btn::after,
  html body[class] .site-nav.is-menu-dock .brand > :is(.lg-layers, .lg-gl, .lg-reflection, .dock-feedback, .lg-ripple) {
    display: none !important;
  }
  html body[class] .site-nav.is-menu-dock .brand > .lg-content {
    position: relative;
    display: block;
    width: 100% !important;
    height: 44px;
    padding: 0;
    transform: none !important;
  }
  html body[class] .site-nav.is-menu-dock .brand .brand-avatar {
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 40px;
    transform: translateY(-50%);
  }
  /* Prepared HTML paints before the module moves the word into its home link.
     The brand starts 13px inside the shell (12px padding + 1px border). */
  html body[class] .site-nav.is-menu-dock .brand .dock-wordmark {
    position: absolute;
    left: calc(50vw - var(--mobile-dock-gutter) - 13px);
    max-width: none;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    pointer-events: none;
  }
  html body[class] .site-nav.is-menu-dock .dock-mobile-home {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 8px;
    z-index: 3;
    touch-action: manipulation;
    text-decoration: none;
    background: none;
    border: 0;
    box-shadow: none;
  }
  html body[class] .site-nav.is-menu-dock .dock-mobile-home .dock-wordmark {
    font-size: 1.5rem;
    pointer-events: none;
  }
  html body[class] .site-nav.is-menu-dock .dock-mobile-home:focus-visible {
    outline: 2px solid #d5f6ff;
    outline-offset: 2px;
    border-radius: 6px;
  }
  html body[class] .site-nav.is-menu-dock .brand:focus-visible {
    outline: 2px solid #d5f6ff !important;
    outline-offset: 2px;
  }
  html body[class] .site-nav.is-menu-dock .dock-menu-toggle.lg-btn {
    grid-column: 3;
    grid-row: 1;
    width: var(--mobile-menu-size);
    height: var(--mobile-menu-size);
    min-width: 44px;
    min-height: 44px;
    margin: 0;
  }
  html body[class] .site-nav.is-menu-dock .music-toggle { display: none !important; }
  html body[class] .site-nav.is-menu-dock .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
  html body[class] .site-nav.is-menu-dock.is-menu-open .nav-links {
    max-height: min(19rem, calc(100dvh - 7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-y: auto !important;
  }
}