/* ============================================================
   theme.css · le design system Modium, version « vitrine »

   Transposition du design PDM (pdm.uxqt.site, refonte du 2026-09-27) :
   préchargeur avec compteur, HUD aux quatre coins en mono, menu plein écran,
   curseur personnalisé, vitrine 3D, écrans plein écran chorégraphiés au
   défilement. La palette reste NOIR, BLANC et le ROUGE Modium #d81a1a en
   filets, lueurs et aurore, jamais en aplat large.

   Ce fichier ne contient que le système : jetons, typographie, composants et
   couches fixes (préchargeur, HUD, nav, menu, curseur, aurore). La mise en
   page de l'accueil vit dans style.css.

   Contrainte conservée : la politique de contenu du site vaut
   `default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'`.
   Aucun attribut style= dans le HTML (les retards passent par .d1 à .d6),
   aucune police distante. element.style.setProperty() reste autorisé.
   ============================================================ */

@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/assets/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('/assets/fonts/archivo-black.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* fond et encre : une seule couleur d'encre, du blanc, en opacités */
  --bg: #050506;
  --bg-2: #0b0b0d;
  --ink: #fff;
  --ink-hi: #fffffff0;
  --ink-body: #ffffffb3;
  --ink-mid: #ffffff80;
  --ink-meta: #ffffff66;
  --ink-decor: #ffffff45;
  --ink-ghost: #ffffff26;
  --line-0: #ffffff0f;
  --line-1: #ffffff1f;
  --line-2: #ffffff33;
  --line-3: #ffffff59;
  --surface-1: #ffffff08;
  --surface-2: #ffffff0f;
  --hover: #ffffff14;

  /* le rouge Modium : filets, lueurs, aurore. Jamais en aplat large. */
  --red: #d81a1a;
  --red-hi: #ff3b3b;
  --red-deep: #8a0f0f;
  --red-lum: 216, 26, 26;
  --fil-bloom: 0 0 10px rgba(var(--red-lum), .6), 0 0 24px rgba(var(--red-lum), .3);
  --glow: 0 0 14px rgba(var(--red-lum), .55), 0 0 40px rgba(var(--red-lum), .22);

  /* le blanc lumineux des chiffres */
  --neon: #fff;
  --neon-glow: 0 0 6px rgba(255,255,255,.75), 0 0 18px rgba(255,255,255,.35), 0 0 40px rgba(255,255,255,.15);

  /* états */
  --ok: #34d399; --warn: #fbbf24; --bad: #f87171;

  /* typo : Archivo Black en display (oblique synthétique), Inter en texte,
     JetBrains Mono pour le HUD et les libellés */
  --f-display: 'Archivo Black', 'Arial Black', sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* mouvement : une courbe à rebond pour ce qui entre, une sortie plus
     courte, des cascades de 50 ms */
  --enter: cubic-bezier(.34, 1.25, .5, 1);
  --enter-ms: .7s;
  --exit: cubic-bezier(.4, 0, .8, .4);
  --exit-ms: .28s;
  --step: .05s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --fast: .15s ease;

  /* mesures */
  --pad: clamp(20px, 4vw, 56px);
  --nav-h: 5rem;
  --hud-inset: clamp(16px, 2.2vw, 32px);
  --max: 1440px;
  --r-sm: .5rem; --r: .75rem; --r-lg: 1rem;
}

* { box-sizing: border-box; }
html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink-body); font-family: var(--f-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100svh; }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.1; color: var(--ink-hi); }
::selection { background: var(--red); color: #fff; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid rgba(255,255,255,.75); outline-offset: 3px; border-radius: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font: 500 10.5px/1 var(--f-mono); padding: 3px 6px; border-radius: 4px; background: var(--surface-1); border: 1px solid var(--line-1); color: var(--ink-meta); }
code { font-family: var(--f-mono); font-size: .86em; color: var(--ink-hi); background: var(--surface-1); padding: 1px 6px; border-radius: 4px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */
.display { font-family: var(--f-display); font-style: italic; font-weight: 400; text-transform: uppercase; letter-spacing: -.025em; line-height: .88; color: var(--ink-hi); }
.display b, .display strong { font-weight: 400; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.eyebrow { margin: 0; font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-meta); }
.eyebrow i { display: inline-block; width: 6px; height: 6px; margin: 0 10px 1px 0; border-radius: 50%; background: var(--red); box-shadow: var(--fil-bloom); font-style: normal; vertical-align: middle; }
.lede { margin: 0; max-width: 42rem; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.65; color: var(--ink-body); }
.num { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-decor); }
.neon { color: var(--neon); text-shadow: var(--neon-glow); font-variant-numeric: tabular-nums; }
/* Les masques des révélations : SplitText pose .line, on la coupe. */
.line { overflow: hidden; }
[data-anim] { will-change: transform; }

/* ============================================================
   BOUTONS, PUCES, PANNEAUX
   ============================================================ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.5rem; border: 1px solid var(--line-3); border-radius: 9999px; background: transparent; color: var(--ink-hi); font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; cursor: pointer; user-select: none; overflow: hidden; transition: color .3s var(--ease-out), border-color .3s var(--ease-out), transform .5s var(--enter); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Le remplissage glisse par-dessous au survol : un seul geste, jamais une teinte. */
.btn::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(102%); transition: transform .5s var(--ease-out); z-index: -1; border-radius: inherit; }
.btn:hover { color: #050506; border-color: var(--ink); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--ink); color: #050506; border-color: var(--ink); }
.btn--primary::before { background: var(--red); }
.btn--primary:hover { color: #fff; border-color: var(--red); }
.btn--sm { padding: .6rem 1.1rem; font-size: 10px; }
.btn--lg { padding: 1.05rem 2rem; font-size: 12px; }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.icon-btn { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-1); border-radius: 50%; background: var(--surface-1); color: var(--ink-mid); cursor: pointer; transition: all var(--fast); }
.icon-btn:hover { color: var(--ink); background: var(--hover); border-color: var(--line-2); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* le bouton de son : les deux arcs disparaissent quand c'est coupé */
.icon-btn[aria-pressed="false"] .on { display: none; }
.icon-btn[aria-pressed="true"] .off { display: none; }

.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 9999px; font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: rgba(0,0,0,.6); border: 1px solid var(--line-1); color: var(--ink-hi); backdrop-filter: blur(6px); }
.tag--white { background: var(--ink); border-color: var(--ink); color: #050506; }
.tag--red { background: var(--red); border-color: var(--red); color: #fff; }

/* panneau : verre sombre, arête haute lumineuse. Le filet du haut est un
   calque de fond et non un ::before : le pseudo-élément est réservé aux
   crochets de .brackets, qui se cumulent souvent avec .panel. */
.panel { position: relative; border: 1px solid var(--line-1); border-radius: var(--r-lg); background: linear-gradient(90deg, transparent 8%, var(--line-3) 50%, transparent 92%) top / 100% 1px no-repeat, rgba(8,8,10,.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: inset 0 1px #ffffff12, 0 30px 80px -20px #000; }

/* crochets de coin, le motif du HUD, réutilisable sur n'importe quel bloc */
.brackets { position: relative; }
.brackets::before, .brackets::after, .brackets > .bk::before, .brackets > .bk::after { content: ""; position: absolute; width: 12px; height: 12px; border: 1px solid var(--ink-decor); pointer-events: none; }
.brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brackets > .bk::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.brackets > .bk::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* bandeau de chiffres */
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; }
.strip > div { padding: 22px 24px; background: var(--bg); display: grid; gap: 6px; }
.strip .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-decor); }
.strip .v { font-family: var(--f-display); font-style: italic; font-size: 32px; line-height: 1; color: var(--neon); text-shadow: var(--neon-glow); }
.strip .sub { font-size: 12.5px; color: var(--ink-mid); }
@media (max-width: 860px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip .v { font-size: clamp(18px, 5.6vw, 26px); white-space: nowrap; } }

/* ============================================================
   COUCHES FIXES : aurore, grain, scène, curseur
   ============================================================ */
/* L'aurore : trois nappes rouges et une blanche, très floues, qui dérivent
   lentement. Son intensité est pilotée par --aurora selon l'écran courant. */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: var(--aurora, 1); transition: opacity 1s var(--ease-out); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; opacity: .55; }
.aurora .a1 { width: 60vw; height: 60vw; left: -18vw; top: -10vh; background: radial-gradient(circle at 50% 50%, rgba(var(--red-lum), .55), transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
.aurora .a2 { width: 55vw; height: 55vw; right: -20vw; bottom: -18vh; background: radial-gradient(circle at 50% 50%, rgba(var(--red-lum), .45), transparent 62%); animation: drift2 32s ease-in-out infinite alternate; }
.aurora .a3 { width: 40vw; height: 40vw; left: 30vw; top: 40vh; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 60%); animation: drift3 40s ease-in-out infinite alternate; }
.aurora .a4 { width: 34vw; height: 34vw; right: 18vw; top: -8vh; background: radial-gradient(circle at 50% 50%, rgba(var(--red-lum), .3), transparent 60%); animation: drift1 22s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(14vw, 10vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vw, -8vh) scale(1.2); } }
@keyframes drift3 { to { transform: translate(-10vw, -14vh) scale(.9); } }
/* le grain : casse les dégradés, donne la matière de l'écran */
.grain { position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-6%,4%); } 40% { transform: translate(5%,-7%); } 60% { transform: translate(-3%,6%); } 80% { transform: translate(7%,2%); } 100% { transform: translate(0,0); } }
.scene { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out); }
body.scene-ready .scene { opacity: 1; }
body.scene-grab .scene { pointer-events: auto; cursor: grab; }
body.scene-grab.is-dragging .scene { cursor: grabbing; }

/* Le curseur : un point et un anneau qui le suit avec retard. Les états
   viennent des attributs data-cursor posés sur les éléments survolés. */
.cursor { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); mix-blend-mode: difference; transition: transform .25s var(--ease-out), opacity .25s; }
.cursor__ring { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); transition: width .35s var(--enter), height .35s var(--enter), margin .35s var(--enter), background .3s, border-color .3s, opacity .3s; }
.cursor__label { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #050506; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor.is-link .cursor__ring { width: 52px; height: 52px; margin: -26px 0 0 -26px; border-color: rgba(255,255,255,.9); }
.cursor.is-grab .cursor__ring, .cursor.is-view .cursor__ring { width: 76px; height: 76px; margin: -38px 0 0 -38px; background: var(--ink); border-color: var(--ink); }
.cursor.is-grab .cursor__dot, .cursor.is-view .cursor__dot { opacity: 0; }
.cursor.is-grab .cursor__label, .cursor.is-view .cursor__label { opacity: 1; }
.cursor.is-down .cursor__ring { transform: scale(.85); }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; } }

/* ============================================================
   PRÉCHARGEUR
   Fond noir, la marque au centre en gris, un pourcentage en mono espacé en
   bas. Rien d'autre : l'écran d'accueil se déplie depuis lui.
   ============================================================ */
.loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #000; color: var(--ink-hi); }
.loader__logo { display: flex; align-items: center; gap: 16px; filter: grayscale(1) brightness(.62); }
.loader__logo img { width: clamp(46px, 7vw, 74px); height: auto; }
.loader__logo span { font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-size: clamp(34px, 6vw, 66px); letter-spacing: -.03em; color: var(--ink-hi); }
.loader__pct { position: absolute; left: 0; right: 0; bottom: 10vh; margin: 0; text-align: center; font-family: var(--f-mono); font-size: 13px; letter-spacing: .6em; color: var(--ink-hi); font-variant-numeric: tabular-nums; }
.loader.is-leaving { animation: loader-out .9s var(--ease-io) forwards; }
@keyframes loader-out { to { clip-path: inset(0 0 100% 0); } }
body.is-loading { overflow: hidden; }

/* ============================================================
   HUD
   Fixé, sans interaction, en mono : crochets aux quatre coins, marque et
   écran courant en haut, chiffres vivants en bas, anneau de progression.
   ============================================================ */
.hud { position: fixed; inset: 0; z-index: 40; pointer-events: none; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-meta); opacity: 0; transition: opacity 1s var(--ease-out) .2s; }
body.is-ready .hud { opacity: 1; }
.hud__c { position: absolute; width: 18px; height: 18px; border: 1px solid var(--ink-decor); }
.hud__c.tl { top: var(--hud-inset); left: var(--hud-inset); border-right: 0; border-bottom: 0; }
.hud__c.tr { top: var(--hud-inset); right: var(--hud-inset); border-left: 0; border-bottom: 0; }
.hud__c.bl { bottom: var(--hud-inset); left: var(--hud-inset); border-right: 0; border-top: 0; }
.hud__c.br { bottom: var(--hud-inset); right: var(--hud-inset); border-left: 0; border-top: 0; }
.hud__tl { position: absolute; top: calc(var(--hud-inset) + 28px); left: var(--hud-inset); display: grid; gap: 4px; }
.hud__tr { position: absolute; top: calc(var(--hud-inset) + 28px); right: var(--hud-inset); text-align: right; display: grid; gap: 4px; }
.hud__bl { position: absolute; bottom: calc(var(--hud-inset) + 28px); left: var(--hud-inset); display: grid; gap: 4px; }
.hud__br { position: absolute; bottom: calc(var(--hud-inset) + 28px); right: var(--hud-inset); display: flex; align-items: center; gap: 14px; }
/* Dans la zone libre (technique, FAQ, pied de page), le HUD fixe passerait
   par-dessus le contenu : les textes s'effacent, seule la bague reste. */
.hud__tl, .hud__tr, .hud__bl, .hud__br { transition: opacity .4s var(--ease-out); }
body[data-view="libre"] :is(.hud__tl, .hud__tr, .hud__bl) { opacity: 0; }
.hud b { font-weight: 600; color: var(--ink-hi); }
.hud .dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); vertical-align: 1px; }
.hud__idx { font-family: var(--f-display); font-style: italic; font-size: 30px; line-height: 1; letter-spacing: 0; color: var(--ink-hi); }
.hud__idx small { font-size: 12px; color: var(--ink-decor); letter-spacing: .1em; margin-left: 2px; }
.hud__ring { width: 44px; height: 44px; }
.hud__ring circle { fill: none; stroke-width: 1.5; }
.hud__ring .bg { stroke: var(--line-1); }
.hud__ring .fg { stroke: var(--red-hi); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progress, 0)); transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 4px rgba(var(--red-lum), .8)); transition: stroke-dashoffset .15s linear; }
@media (max-width: 900px) { .hud__tl, .hud__bl { display: none; } }
@media (max-width: 720px) { .hud__c.tl, .hud__c.tr { display: none; } .hud__tr { top: calc(var(--nav-h) - 6px); } .hud__idx { font-size: 22px; } }

/* ============================================================
   NAVIGATION
   Barre fixe en trois colonnes : son, marque, télécharger et menu. Le menu
   ouvre un écran entier depuis le bouton, en cercle, liens en display géant.
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 calc(var(--hud-inset) + 34px); background: linear-gradient(to bottom, rgba(5,5,6,.92) 30%, rgba(5,5,6,0)); pointer-events: none; opacity: 0; transform: translateY(-8px); transition: opacity .8s var(--ease-out) .3s, transform .8s var(--enter) .3s; }
.nav > * { pointer-events: auto; }
body.is-ready .nav { opacity: 1; transform: none; }
.nav__left { display: flex; align-items: center; gap: 14px; }
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-size: 20px; letter-spacing: -.02em; color: var(--ink-hi); }
.nav__logo img { height: 30px; width: auto; filter: drop-shadow(0 4px 18px rgba(0,0,0,.7)); transition: transform .5s var(--enter), filter .4s; }
.nav__logo:hover img { transform: scale(1.06); filter: drop-shadow(0 4px 18px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(var(--red-lum), .45)); }
.nav__menu { display: inline-flex; align-items: center; gap: 12px; padding: 10px 6px 10px 14px; border: 0; background: none; color: var(--ink-hi); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }
.nav__menu i { position: relative; display: block; width: 26px; height: 12px; }
.nav__menu i::before, .nav__menu i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--enter), top .5s var(--enter), width .4s; }
.nav__menu i::before { top: 0; } .nav__menu i::after { top: 10px; width: 60%; }
.nav__menu:hover i::after { width: 100%; }
.nav__menu[aria-expanded="true"] i::before { top: 5px; transform: rotate(45deg); }
.nav__menu[aria-expanded="true"] i::after { top: 5px; width: 100%; transform: rotate(-45deg); }
@media (max-width: 860px) { .nav__dl { display: none; } }
@media (max-width: 720px) { .nav { padding: 0 var(--hud-inset); } .nav__logo span { display: none; } }

.menu { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: var(--pad); padding: calc(var(--nav-h) + 3vh) calc(var(--hud-inset) + 34px) calc(var(--hud-inset) + 34px); background: rgba(5,5,6,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); clip-path: circle(0px at var(--mx, 96%) var(--my, 4%)); visibility: hidden; transition: clip-path .9s var(--ease-io), visibility 0s .9s; }
.menu.is-open { clip-path: circle(150% at var(--mx, 96%) var(--my, 4%)); visibility: visible; transition: clip-path .9s var(--ease-io), visibility 0s; }
.menu__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .1em; }
/* L'index en exposant, calé sur le haut des capitales (un masque .line n'a
   pas de ligne de base : baseline le faisait tomber sous le mot). */
.menu__links a { display: flex; align-items: flex-start; gap: .35em; font-family: var(--f-display); font-style: italic; text-transform: uppercase; font-size: clamp(28px, 5.4vw, 76px); line-height: .92; letter-spacing: -.025em; color: var(--ink-hi); transition: color .3s, transform .5s var(--enter); }
.menu__links a small { flex: none; margin-top: .1em; font-family: var(--f-mono); font-style: normal; font-size: 11px; letter-spacing: .2em; color: var(--ink-decor); transition: color .3s; }
.menu__links a:hover { color: transparent; -webkit-text-stroke: 1.5px var(--ink); transform: translateX(.15em); }
.menu__links a:hover small, .menu__links a.is-active small { color: var(--red-hi); }
.menu__links a.is-active small::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: var(--red-hi); box-shadow: var(--fil-bloom); vertical-align: 1px; }
.menu__side { display: grid; gap: 28px; align-content: end; }
.menu__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.menu__cats button { display: flex; justify-content: flex-start; gap: 12px; width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line-0); background: none; color: var(--ink-mid); font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color .25s, padding-left .4s var(--enter); }
.menu__cats button:hover { color: var(--ink-hi); padding-left: 8px; }
.menu__cats button b { margin-left: auto; font-weight: 500; color: var(--ink-decor); }
.menu__cats button.is-active { color: var(--ink-hi); border-bottom-color: var(--line-2); }
.menu__cats button.is-active::before { content: ""; width: 6px; height: 6px; margin: 5px 10px 0 0; border-radius: 50%; background: var(--red-hi); box-shadow: var(--fil-bloom); flex: none; }
.menu__cats button.is-active b { color: var(--ink-hi); }
.menu__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.menu__legal { margin: 0; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-decor); }
.menu .line { display: block; }
@media (max-width: 900px) { .menu { grid-template-columns: 1fr; align-content: space-between; padding: calc(var(--nav-h) + 2vh) var(--hud-inset) var(--hud-inset); overflow: auto; } .menu__side { gap: 18px; } }

/* ============================================================
   RÉVÉLATIONS ET TRANSITIONS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform var(--enter-ms) var(--enter); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.d1 { --d: var(--step); } .d2 { --d: calc(var(--step) * 2); } .d3 { --d: calc(var(--step) * 3); } .d4 { --d: calc(var(--step) * 4); } .d5 { --d: calc(var(--step) * 5); } .d6 { --d: calc(var(--step) * 6); }
.page-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 900; background: linear-gradient(90deg, transparent, var(--red) 30%, #fff 50%, var(--red) 70%, transparent); box-shadow: 0 0 12px var(--red); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
body.leaving .page-bar { animation: bar-sweep .36s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes bar-sweep { 0% { transform: scaleX(0); opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
body.leaving .main { animation: page-out var(--exit-ms) var(--exit) forwards; }
@keyframes page-out { to { opacity: 0; transform: translateY(-14px) scale(.985); filter: blur(6px); } }
/* le mouvement est voulu même avec le réglage système : pas de bloc reduced-motion */

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.footer { position: relative; z-index: 2; border-top: 1px solid var(--line-1); background: var(--bg); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 72px var(--pad) 56px; max-width: var(--max); margin: 0 auto; }
.footer__brand .nav__logo { margin-bottom: 20px; font-size: 26px; }
.footer__brand p { margin: 0 0 22px; max-width: 22rem; font-size: 14px; line-height: 1.6; color: var(--ink-mid); }
.footer h4 { margin: 0 0 16px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-decor); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { font-size: 14px; color: var(--ink-body); transition: color var(--fast); }
.footer ul a:hover { color: var(--ink-hi); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px var(--pad) 28px; border-top: 1px solid var(--line-0); max-width: var(--max); margin: 0 auto; font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-decor); }
.footer__legal { margin: 0; max-width: 52rem; font-family: var(--f-body); font-size: 11.5px; letter-spacing: 0; text-transform: none; line-height: 1.6; color: var(--ink-ghost); }
@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }