/* Oculina — site vitrine.
   Direction : un instrument de nuit posé sur un océan vivant (WebGL). La page est une plongée :
   l'eau s'assombrit en descendant, la typographie se comprime avec la pression, et l'on remonte
   à la surface en bas de page. Univers sombre unique, choisi (pas de thème clair). */
@font-face { font-family: "Anybody"; src: url("fonts/Anybody-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --abyss: #05080B;
  --deep: #071A24;
  --ink: #F4F7F8;
  --mute: #A9B6BF;
  --faint: #6E7F8A;
  --cyan: #36E2E8;
  --mint: #6FF5C8;
  --amber: #FFB547;
  --alarm: #A0001C;
  --sim: #C9A7FF;
  --line: rgba(169, 182, 191, 0.18);
  --glass: rgba(7, 22, 30, 0.55);

  --f-display: "Anybody", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  --step-2: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  --step-3: clamp(2.6rem, 1.5rem + 4.6vw, 6.2rem);

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --radius: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--abyss); color: var(--ink); font: 400 var(--step-0)/1.6 var(--f-body); -webkit-font-smoothing: antialiased; }
img, video, svg, canvas { max-width: 100%; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; max-width: 62ch; }
.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 500 var(--step--1)/1.3 var(--f-data); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
section[id], main[id] { scroll-margin-top: 80px; }

/* ---------- Océan ---------- */
#ocean { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -2; display: block; max-width: none; }
.water { position: fixed; inset: 0; z-index: -3; background: var(--deep); transition: background-color 600ms linear; }
.has-ocean .water { display: none; }
.no-webgl #ocean { display: none; }

/* ---------- Intro ---------- */
.preloader { display: none; position: fixed; inset: 0; z-index: 100; }
.preloader.is-on { display: block; }
.preloader__panel { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.preloader__panel--back { background: var(--cyan); }
.preloader__panel--front { background: var(--abyss); display: grid; place-items: center; }
.preloader__word { display: flex; overflow: hidden; font: 900 clamp(3.6rem, 16vw, 13rem)/0.9 var(--f-display); font-stretch: 140%; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; padding-bottom: 0.06em; }
.preloader__word span { display: inline-block; }
.preloader__meta { position: absolute; left: var(--gutter-l); right: var(--gutter-r); bottom: calc(46px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; font: 500 var(--step--1)/1 var(--f-data); color: var(--mute); text-transform: uppercase; letter-spacing: 0.12em; }
.preloader__count { color: var(--ink); }
.preloader__bar { position: absolute; left: var(--gutter-l); right: var(--gutter-r); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); height: 1px; background: var(--line); }
.preloader__bar span { position: absolute; inset: 0; background: var(--mint); transform: scaleX(0); transform-origin: 0 50%; }
.is-intro body { overflow: hidden; }

/* ---------- En-tête ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter-r) 16px var(--gutter-l); background: linear-gradient(180deg, rgba(5, 8, 11, 0.55), rgba(5, 8, 11, 0)); will-change: transform; }
.header__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 1.15rem/1 var(--f-display); font-stretch: 125%; letter-spacing: 0.08em; text-transform: uppercase; }
.header__logo svg { width: 30px; height: 30px; }
.header__nav { display: flex; gap: 26px; }
.header__nav a { color: var(--mute); text-decoration: none; font-size: var(--step--1); transition: color 200ms; }
.header__nav a:hover { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--f-data); letter-spacing: 0.04em; color: var(--ink); border: 1px solid rgba(244, 247, 248, 0.25); background: rgba(5, 8, 11, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 8px 13px; white-space: nowrap; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(255, 181, 71, 0.18); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; font: 600 var(--step-0)/1 var(--f-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; will-change: transform; transition: background-color 250ms, color 250ms, border-color 250ms; }
.btn--light { background: var(--ink); color: var(--abyss); }
.btn--light:hover { background: var(--mint); }
.btn--ghost { color: var(--ink); border-color: rgba(244, 247, 248, 0.35); background: rgba(5, 8, 11, 0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--ink); }

/* ---------- Héros : OCU [montre] LINA ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; padding-block: 110px 60px; }
.hero__stage { display: grid; justify-items: center; gap: clamp(18px, 3vh, 34px); width: 100%; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.hero__eyebrow { font: 500 var(--step--1)/1.3 var(--f-data); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); text-align: center; }
.hero__title { display: flex; align-items: center; justify-content: center; gap: 0.06em; font: 800 clamp(4.4rem, 12.6vw, 17rem)/0.82 var(--f-display); font-stretch: 112%; letter-spacing: -0.02em; text-transform: uppercase; white-space: nowrap; }
.hero__word { display: inline-block; will-change: transform; }
.hero__word .char { display: inline-block; }
.hero__slot { position: relative; display: inline-block; width: 0.764em; height: 0.84em; flex: none; }
.hero__foot { display: grid; justify-items: center; gap: 26px; text-align: center; }
.hero__tag { font-size: var(--step-1); line-height: 1.35; max-width: 32ch; }
.hero__tag em { font-style: normal; color: var(--mint); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero__overlay { display: grid; place-items: center; text-align: center; padding: 40px var(--gutter-r) 0 var(--gutter-l); }
.hero__overlay p { font: 700 var(--step-3)/0.98 var(--f-display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -0.01em; max-width: 16ch; }
.hero__overlay em { font-style: normal; color: var(--mint); }
.motion .hero { height: 100svh; padding-block: 0; }
.motion .hero__overlay { position: absolute; inset: 0; padding: 0 var(--gutter-r) 0 var(--gutter-l); pointer-events: none; }

/* Montre miniature du héros (dessin générique, marquée SIMULATION) */
/* Cadre officiel Apple Watch Ultra 3 (Apple Design Resources, « Product Bezels ») : image 600 × 960,
   écran découpé 422 × 514 à (89, 223), coins r = 124. L'écran affiché dessous est l'interface simulée, en direct. */
.bezel { --crop-top: 150; display: block; overflow: hidden; }
.bezel--case { aspect-ratio: 600 / 660; }
.bezel__frame { position: relative; display: block; width: 100%; aspect-ratio: 600 / 960; margin-top: calc(var(--crop-top) / 600 * -100%); }
.bezel__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; user-select: none; }
.bezel__screen { position: absolute; left: 14.833%; top: 23.229%; width: 70.333%; height: 53.542%; border-radius: 29.38% / 24.12%; overflow: hidden; z-index: 1; }
.mini-watch { position: absolute; inset: 0; display: block; will-change: transform; }
.mini-watch__screen { font-size: 0.88em; background: #000; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 0 9% 8%; font-family: var(--f-body); text-transform: none; letter-spacing: 0; line-height: 1.1; }
.mw-sim { align-self: stretch; margin: 0 -12% 6%; background: var(--sim); color: #000; font: 600 0.032em/1 var(--f-data); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; padding: 0.42em 0 0.32em; }
.mw-label { display: block; font: 500 0.03em/1.3 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.mw-depth { font: 700 0.2em/0.95 var(--f-body); letter-spacing: -0.02em; }
.mw-depth small { font-size: 0.42em; color: var(--mute); margin-left: 0.04em; }
.mw-row { display: flex; justify-content: space-between; align-self: stretch; margin-top: 6%; }
.mw-row b { display: block; font: 600 0.075em/1.05 var(--f-body); }
.mw-row > span { display: block; }
.mw-row > span:last-child { text-align: right; }
.mw-note { margin-top: auto; align-self: stretch; text-align: center; font: 500 0.03em/1.3 var(--f-data); color: var(--mute); }

/* ---------- Descente ---------- */
.descent { position: relative; padding-top: clamp(80px, 10vw, 140px); }
.descent-head { display: grid; gap: 18px; padding-bottom: 20px; }
.descent-head h2, .block h2, .compass h2 { font: 800 var(--step-3)/0.92 var(--f-display); font-stretch: 110%; text-transform: uppercase; letter-spacing: -0.015em; }
.descent-intro, .block .intro, .compass .intro { color: var(--mute); font-size: var(--step-1); line-height: 1.4; max-width: 44ch; }
.descent-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: clamp(24px, 5vw, 90px); }
.chapters { min-width: 0; }
.chapter { min-height: 95vh; padding-top: 16vh; display: flex; flex-direction: column; gap: 16px; }
.chapter:last-child { min-height: 70vh; }
.depth-tag { font: 500 var(--step--1)/1 var(--f-data); color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; }
.chapter h3 { font: 800 var(--step-2)/0.98 var(--f-display); font-stretch: 105%; text-transform: uppercase; letter-spacing: -0.01em; max-width: 18ch; }
.chapter p { opacity: 0.9; }
.chapter .aside { font: 400 var(--step--1)/1.55 var(--f-data); color: var(--mute); border-left: 2px solid var(--line); padding-left: 14px; }
.fault-toggle { align-self: flex-start; margin-top: 8px; font: 500 var(--step--1)/1 var(--f-data); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--alarm); border: 0; border-radius: 999px; padding: 14px 20px; cursor: pointer; }
.fault-toggle[aria-pressed="true"] { background: var(--ink); color: var(--abyss); }
.stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12vh); align-self: start; display: grid; gap: 22px; justify-items: center; padding-block: 20px; }
#bubbles { position: absolute; inset: -10% -25%; width: 150%; height: 120%; pointer-events: none; z-index: 0; }
.watch-tilt { perspective: 900px; position: relative; z-index: 1; }
.watch { position: relative; width: clamp(240px, 44vh, 380px); --crop-top: 20; aspect-ratio: 600 / 920; transform-style: preserve-3d; will-change: transform; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%); }
.watch .screen { background: #000; display: flex; flex-direction: column; }
.glare { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.09) 48%, rgba(255, 255, 255, 0.02) 54%, transparent 60%); transform: translateX(-30%); pointer-events: none; }
.w-sim { background: var(--sim); color: #000; font: 600 10px/1 var(--f-data); letter-spacing: 0.1em; text-align: center; padding: 6px 0 5px; text-transform: uppercase; }
.w-alarm { min-height: 26px; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 12px/1 var(--f-body); letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 8px; }
.w-alarm[data-level="none"] { visibility: hidden; }
.w-alarm[data-level="caution"] { background: var(--amber); color: #000; }
.w-alarm[data-level="critical"] { background: var(--alarm); color: #fff; }
.w-alarm[data-level="info"] { background: #0F2A33; color: var(--mint); }
.w-alarm svg { width: 14px; height: 14px; flex: none; }
.w-body { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 6px 15px 12px; align-content: center; }
.w-cell { display: flex; flex-direction: column; min-width: 0; }
.w-cell.big { grid-column: 1 / -1; }
.w-cell.right { align-items: flex-end; text-align: right; }
.w-label { font: 500 9.5px/1.3 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.w-value { font: 600 27px/1.05 var(--f-body); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.w-value small { font-size: 0.5em; font-weight: 500; color: var(--mute); margin-left: 2px; }
.w-cell.big .w-value { font: 700 70px/0.95 var(--f-body); letter-spacing: -0.02em; }
.w-value.is-unknown { color: var(--faint); }
.w-value.is-alarm { color: var(--amber); }
.w-note { grid-column: 1 / -1; font: 500 9.5px/1.3 var(--f-data); color: var(--mute); text-align: center; min-height: 1.3em; }
.readouts { width: min(340px, 100%); display: grid; gap: 10px; }
.spectrum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.spectrum span { height: 8px; border-radius: 3px; transition: opacity 300ms linear; }
.caption { font: 400 11px/1.4 var(--f-data); color: var(--mute); }

/* Jauge de profondeur fixe */
.depth-hud { position: fixed; left: max(18px, env(safe-area-inset-left, 0px)); top: 50%; z-index: 15; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; width: 56px; opacity: 0; transition: opacity 400ms ease; pointer-events: none; }
.depth-hud.is-on { opacity: 1; }
.hud-ruler { position: relative; width: 14px; height: 38vh; border-left: 1px solid rgba(169, 182, 191, 0.4); display: flex; flex-direction: column; justify-content: space-between; }
.hud-ruler i { display: block; width: 10px; height: 1px; background: rgba(169, 182, 191, 0.6); }
.hud-ruler b { position: absolute; left: -5px; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); transform: translateY(-50%); }
.hud-read { font: 500 9px/1.2 var(--f-data); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); display: flex; flex-direction: column; }
.hud-read span { font: 800 30px/1 var(--f-display); color: var(--ink); }

/* ---------- Manifeste ---------- */

/* ---------- Nos refus : cartes empilées ---------- */

/* ---------- Blocs ---------- */
.block { padding-block: clamp(90px, 11vw, 170px); position: relative; }
.block > .wrap { display: grid; gap: 18px; }
.lab { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.panel { background: var(--glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.panel h3 { font: 500 var(--step--1)/1.2 var(--f-data); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.profile-svg { width: 100%; height: auto; display: block; margin-top: 14px; }
.profile-svg .grid line { stroke: var(--line); stroke-width: 1; }
.profile-svg text { fill: var(--faint); font: 400 10px var(--f-data); }
.profile-svg .area { fill: rgba(54, 226, 232, 0.12); }
.profile-svg .line { fill: none; stroke: var(--cyan); stroke-width: 2; }
.profile-svg .cursor { stroke: var(--ink); stroke-width: 1.5; }
.profile-svg .dot { fill: var(--ink); }
.scrub { width: 100%; margin-top: 16px; accent-color: var(--cyan); }
.scrub-readout { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 var(--step--1)/1.4 var(--f-data); color: var(--mute); }
.scrub-readout b { color: var(--ink); font-weight: 500; }
.bars { margin-top: 18px; height: 220px; display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; align-items: end; border-bottom: 1px solid var(--line); position: relative; }
.bars::before { content: "100 % — limite tolérée en surface"; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dashed rgba(255, 181, 71, 0.6); font: 400 10px/1 var(--f-data); color: var(--amber); padding-top: 4px; }
.bars span { display: block; border-radius: 3px 3px 0 0; background: var(--mint); min-height: 2px; transition: height 120ms linear, background-color 200ms linear; }
.bars-scale { display: flex; justify-content: space-between; font: 400 10px/1.4 var(--f-data); color: var(--faint); margin-top: 6px; }
.lab-note { margin-top: 16px; font: 400 11px/1.5 var(--f-data); color: var(--mute); }

.devices { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.device { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.device__max { font: 800 clamp(4rem, 8vw, 7.5rem)/0.85 var(--f-display); font-stretch: 80%; margin: 0; }
.device__max small { font-size: 0.32em; font-weight: 600; color: var(--mint); margin-left: 6px; font-stretch: 100%; }
.device__bar { height: 6px; border-radius: 3px; background: rgba(169, 182, 191, 0.15); overflow: hidden; }
.device__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--mint), var(--cyan)); transform: scaleX(var(--fill)); transform-origin: 0 50%; }
.device h3 { font: 600 var(--step-0)/1.3 var(--f-body); }
.device ul { margin: 0; padding-left: 18px; color: var(--mute); font-size: var(--step--1); display: grid; gap: 4px; }
.device .note { font: 400 11px/1.5 var(--f-data); color: var(--faint); margin-top: auto; }

.trio { margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.trio > div { background: rgba(5, 8, 11, 0.72); padding: 30px 28px; display: grid; gap: 10px; align-content: start; }
.trio strong { font: 800 var(--step-1)/1.1 var(--f-display); font-stretch: 110%; text-transform: uppercase; }
.trio p { color: var(--mute); font-size: var(--step--1); line-height: 1.55; }

.status-lead { margin-top: 12px; font: 800 var(--step-2)/1.02 var(--f-display); font-stretch: 100%; text-transform: uppercase; max-width: 22ch; color: var(--amber); }


/* ---------- Plans photographiques (images générées par IA, Higgsfield) ---------- */
.plate { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.plate__frame { position: absolute; inset: 0; overflow: hidden; }
.plate__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; will-change: transform; }
.plate__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 11, 0.78) 0%, rgba(5, 8, 11, 0.35) 45%, rgba(5, 8, 11, 0) 70%), linear-gradient(180deg, rgba(5, 8, 11, 0.35) 0%, rgba(5, 8, 11, 0) 30%, rgba(5, 8, 11, 0.7) 100%); }
.plate__copy { position: relative; z-index: 1; display: grid; gap: 18px; padding-block: 0 clamp(56px, 10vh, 120px); }
.plate__copy h2 { font: 800 var(--step-3)/0.92 var(--f-display); font-stretch: 105%; text-transform: uppercase; letter-spacing: -0.015em; max-width: 14ch; }
.plate__copy > p:last-child { font-size: var(--step-1); line-height: 1.4; max-width: 40ch; }
.finale { position: relative; isolation: isolate; }
.finale__bg { object-position: 50% 0%; }
.finale::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--abyss) 0%, rgba(5, 8, 11, 0) 25%, rgba(5, 8, 11, 0.15) 60%, rgba(5, 8, 11, 0.85) 100%); }

/* ---------- Héros : sur-titre ---------- */
.hero__eyebrow > span { display: inline-block; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.6; pointer-events: none; }
.hero { isolation: isolate; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 70% at 50% 45%, rgba(5, 8, 11, 0) 30%, rgba(5, 8, 11, 0.45) 100%), linear-gradient(180deg, rgba(5, 8, 11, 0.25) 0%, rgba(5, 8, 11, 0) 30%, rgba(5, 8, 11, 0) 70%, rgba(5, 8, 11, 0.6) 100%); }

/* ---------- Boussole ---------- */
.compass { position: relative; isolation: isolate; overflow: hidden; min-height: 100svh; display: grid; align-items: center; padding-block: clamp(80px, 10vw, 140px); }
.compass__bg, .finale__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; }
.compass__bg { opacity: 0.55; }
.compass::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--abyss) 0%, rgba(5, 8, 11, 0.35) 22%, rgba(5, 8, 11, 0.35) 78%, var(--abyss) 100%), radial-gradient(60% 70% at 72% 50%, rgba(54, 226, 232, 0.08), transparent 70%); }
.compass__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: clamp(32px, 6vw, 110px); align-items: center; }
.compass__copy { display: grid; gap: 22px; }
.compass__list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.compass__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--step-1); line-height: 1.35; }
.compass__list b { font: 600 var(--step--1)/1 var(--f-data); color: var(--cyan); }
.compass__stage { display: grid; justify-items: center; }
.c-screen { align-items: stretch; }
.c-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding-top: 4%; }
.c-heading { font: 700 clamp(26px, 3.4vh, 38px)/1 var(--f-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.c-card { font: 600 11px/1 var(--f-data); color: var(--mute); letter-spacing: 0.1em; }
.c-dial { display: block; width: 64%; margin: 3% auto 0; overflow: visible; }
.c-ring { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.c-tick { stroke: rgba(255, 255, 255, 0.4); stroke-width: 1; }
.c-tick--major { stroke: #fff; stroke-width: 2; }
.c-label { fill: var(--mute); font: 600 11px/1 var(--f-data); }
.c-label--card { fill: #fff; font: 700 17px/1 var(--f-body); }
.c-label--n { fill: var(--amber); }
.c-lubber { fill: #fff; }
.c-lockmark { fill: var(--cyan); }
.c-backmark { fill: var(--amber); opacity: 0.85; }
.c-foot { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 11% 13%; text-align: center; }
.c-foot small { display: block; font: 500 8.5px/1.3 var(--f-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.c-foot b { font: 600 clamp(14px, 1.8vh, 18px)/1.1 var(--f-body); font-variant-numeric: tabular-nums; }
.c-screen.is-locked .c-foot span:first-child b { color: var(--cyan); }
.c-screen.is-returning .c-foot span:last-child b { color: var(--amber); }
.compass-watch { width: clamp(240px, 44vh, 380px); }

/* ---------- Statut ---------- */
.status-note { margin-top: 22px; max-width: 58ch; color: var(--mute); font-size: var(--step-0); line-height: 1.55; }
.status-note a, .footer a { color: var(--ink); text-decoration-color: var(--cyan); text-underline-offset: 3px; }

/* ---------- Pied de page ---------- */
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; align-items: baseline; }
.footer__brand b { color: var(--ink); }
.footer__legal { margin-top: 18px; font-size: 11px; opacity: 0.7; }

/* ---------- Final : on remonte ---------- */
.finale { min-height: 100svh; overflow: hidden; display: grid; place-content: center; justify-items: center; gap: 20px; text-align: center; padding: 14vh var(--gutter-r) 10vh var(--gutter-l); }
.finale__word { font: 900 clamp(3.2rem, 12.5vw, 15rem)/0.8 var(--f-display); font-stretch: 150%; letter-spacing: -0.03em; text-transform: uppercase; white-space: nowrap; }
.finale__sub { color: var(--ink); font-size: var(--step-1); line-height: 1.4; max-width: 34ch; }

.footer { border-top: 1px solid var(--line); padding-block: 48px calc(56px + env(safe-area-inset-bottom, 0px)); color: var(--mute); font-size: var(--step--1); background: rgba(5, 8, 11, 0.85); }

.split-line { overflow: hidden; display: block; padding-bottom: 0.04em; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 960px) {
  .header__nav { display: none; }
  .depth-hud { display: none; }
  .hero__title { flex-direction: column; gap: 0.04em; font-size: clamp(4.6rem, 30vw, 11rem); }
  .hero__slot { width: 0.909em; height: 1em; margin-block: 0.06em; }
  .descent-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { order: -1; top: calc(env(safe-area-inset-top, 0px) + 64px); z-index: 5; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 14px; padding-block: 10px 16px; background: linear-gradient(180deg, rgba(5, 8, 11, 0.9) 72%, rgba(5, 8, 11, 0)); margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
  .watch { width: 200px; --crop-top: 150; aspect-ratio: 600 / 660; -webkit-mask-image: none; mask-image: none; }
  .compass-watch { width: min(290px, 74vw); }
  .compass { min-height: 0; }
  .w-cell.big .w-value { font-size: 36px; }
  .w-value { font-size: 15px; }
  .w-label, .w-note { font-size: 7.5px; }
  .w-sim { font-size: 7px; padding: 4px 0 3px; }
  .w-alarm { font-size: 8px; min-height: 18px; padding: 3px 6px; }
  .w-body { padding: 4px 9px 8px; }
  .chapter { min-height: 100vh; padding-top: 300px; }
  .lab, .devices, .trio, .footer__grid, .compass__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pill { font-size: 10px; padding: 6px 10px; }
  .stage { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .readouts { display: none; }
  .btn { padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .water, .spectrum span, .bars span, .depth-hud { transition: none; }
}