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

   Refonte du 2026-09-27. L'expérience est celle de ciaoenergy.com transposée à
   la concession : un préchargeur avec compteur, un HUD aux quatre coins en
   mono, un menu plein écran, un curseur personnalisé, une vitrine 3D des
   véhicules, des écrans plein écran chorégraphiés au défilement. Chez Ciao la
   couleur de la saveur inonde la page ; chez PDM, choix du user, la palette
   reste NOIR, BLANC et le ROUGE #e3121f en filets, lueurs et aurore.

   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 chaque page vit dans catalogue.css, map.css et admin.css.
   ============================================================ */

@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Archivo Black'; src: url('/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 PDM : filets, lueurs, aurore. Jamais en aplat large. */
  --red: #e3121f;
  --red-hi: #ff3b45;
  --red-deep: #8f0b13;
  --red-lum: 227, 18, 31;
  --fil: var(--red-hi);
  --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; --star: #f5c542; --danger-ink: #f87171;
  --accent-2: var(--red); --accent-blue: #2a4fd6;

  /* typo : Archivo Black en display (oblique synthétique, comme le PDM italique
     du logo), 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;
  --font-sans: var(--f-body); --font-mono: var(--f-mono); --mono: var(--f-mono); --sans: var(--f-body);

  /* mouvement : la courbe à rebond du user pour ce qui entre, une sortie
     toujours 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;
  --enter-scale: .96; --enter-blur: 6px; --enter-shift: 14px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --fast: .15s ease; --transition-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; }
@media (hover: hover) and (pointer: fine) {
  /* Le curseur natif disparait partout quand le curseur maison est en place :
     sans le !important, chaque regle `cursor: pointer` plus bas le ramenait,
     ce qui donnait deux curseurs sur les vignettes, les puces et les selects. */
  body.has-cursor, body.has-cursor *:not(input):not(textarea) { cursor: none !important; }
}
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, CHAMPS
   ============================================================ */
.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; }
.btn kbd { background: rgba(0,0,0,.15); border-color: transparent; color: inherit; opacity: .8; }
/* alias de compatibilité avec les scripts d'admin */
.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-secondary { border-color: var(--line-3); }
.btn-sm { padding: .6rem 1.1rem; font-size: 10px; }
.btn-lg { padding: 1.05rem 2rem; font-size: 12px; }
.btn-block { width: 100%; }

.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; }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: .55rem 1rem; border: 1px solid var(--line-1); border-radius: 9999px; background: transparent; color: var(--ink-mid); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: all .25s var(--ease-out); }
.chip small { font-size: 10px; color: var(--ink-decor); padding-left: 8px; border-left: 1px solid var(--line-1); }
.chip:hover { border-color: var(--line-2); color: var(--ink-hi); }
.chip[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #050506; }
.chip[aria-selected="true"] small { color: #050506a0; border-left-color: #0505062e; }

.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, .tag--white { background: var(--ink); border-color: var(--ink); color: #050506; }
.tag-accent, .tag--red { background: var(--red); border-color: var(--red); color: #fff; }

.input { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 9999px; background: #0000006b; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 3px #0009; transition: border-color var(--fast); }
.input:focus-within { border-color: var(--line-3); }
.input svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-decor); stroke-width: 2; stroke-linecap: round; flex: none; }
.input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; height: 100%; color: var(--ink); font-size: 14px; }
.input input::placeholder { color: var(--ink-decor); }
.input-grow { flex: 1; min-width: 240px; }
.select { height: 46px; padding: 0 40px 0 18px; border-radius: 9999px; background: #0000006b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 14px; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 3px #0009; color: var(--ink-hi); outline: 0; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }
.select:focus { border-color: var(--line-3); }
.select option { background: #101012; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 14px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 9999px; border: 1px solid rgba(255,255,255,.08); background: #0000006b; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mid); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--red); width: 14px; height: 14px; margin: 0; }
.stars { color: var(--star); letter-spacing: 1px; font-size: 12px; }
.stars .off { color: rgba(255,255,255,.14); }

/* panneau : verre sombre, arête haute lumineuse, coins en crochets HUD */
/* Le filet lumineux 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 sur le même bloc. */
/* min-width: 0 : sans lui, le minimum automatique d'un element de grille vaut
   la largeur de son contenu, et le tableau de l'admin faisait depasser le
   panneau hors de l'ecran a 390 px. Le defilement revient alors a .table-wrap,
   qui est deja en overflow auto. */
.panel { position: relative; min-width: 0; 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; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line-0); }
.panel-head h3 { font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-hi); }
.panel-foot { padding: 12px 20px; border-top: 1px solid var(--line-0); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-decor); }

/* 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; }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { position: sticky; top: 0; z-index: 1; background: #0e0e10; text-align: left; padding: 10px 16px; font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-decor); border-bottom: 1px solid var(--line-1); }
.table td { padding: 10px 16px; border-bottom: 1px solid var(--line-0); white-space: nowrap; vertical-align: middle; color: var(--ink-body); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }
.table-wrap { overflow: auto; }
.c-num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.c-num { color: var(--neon); text-shadow: 0 0 6px rgba(255,255,255,.45); font-weight: 500; }

/* 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: 34px; line-height: 1; color: var(--neon); text-shadow: var(--neon-glow); font-variant-numeric: tabular-nums; }
.strip .s { 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; } }

.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; padding: 11px 18px; border-radius: 9999px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; background: #141416; border: 1px solid var(--line-1); color: var(--ink-hi); box-shadow: 0 20px 40px -20px #000; max-width: min(92vw, 560px); display: flex; align-items: center; gap: 10px; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-meta); flex: none; }
.toast.ok::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.toast.err::before { background: var(--bad); box-shadow: 0 0 8px var(--bad); }

/* ============================================================
   COUCHES FIXES : aurore, 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); } }
@keyframes drift2 { to { transform: translate(-16vw, -8vh); } }
@keyframes drift3 { to { transform: translate(-10vw, -14vh); } }
/* le grain : casse les dégradés, donne la matière de l'écran */
.grain { position: fixed; inset: -10%; z-index: 3; will-change: transform; 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; }

/* Mode allege : nav.js pose body.low-fx quand il mesure moins de 40 images par
   seconde. On coupe ce qui coute le plus cher au GPU sans toucher a la mise en
   page : le grain anime, la derive de laurore, les flous de fond. */
body.low-fx .grain { animation: none; opacity: .03; }
body.low-fx .aurora { opacity: calc(var(--aurora, 1) * .8); }
body.low-fx .aurora i { animation: none; filter: blur(44px); }
body.low-fx .hero__arrow, body.low-fx .modal, body.low-fx .map-hint, body.low-fx .nav, body.low-fx .menu { backdrop-filter: none !important; }

/* 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. */
/* z-index au-dessus de .loader (1000) et .page-bar (900) : en dessous, le
   curseur maison etait peint derriere le prechargeur et dans la modale,
   et comme le curseur natif est masque il ne restait plus rien a l ecran. */
.cursor { position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none; }
.cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.45); 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,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3); 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@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   PRÉCHARGEUR
   Le logo chrome se révèle de gauche à droite au rythme du compteur, la barre
   du bas suit, et les crochets du HUD sont déjà là : l'écran d'accueil se
   déplie depuis lui.
   ============================================================ */
/* Le préchargeur, façon Ciao : fond noir, logo en gris au centre, un petit
   pourcentage en mono espacé en bas. Rien d'autre. */
.loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #000; color: var(--ink-hi); }
.loader__logo { width: min(46vw, 300px); filter: grayscale(1) brightness(.62); }
.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 11 px : 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 le catalogue, le HUD fixe passerait sur les cartes : les textes du bas
   s'effacent, seule la bague de progression reste. */
.hud__tl, .hud__tr, .hud__bl, .hud__br > span { transition: opacity .4s var(--ease-out); }
.hud__br { transition: opacity .4s var(--ease-out); }
body[data-view="catalogue"] :is(.hud__tl, .hud__tr, .hud__bl, .hud__br) { 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; } body:not([data-page="home"]) :is(.hud__tr, .hud__br) { display: none; } }

/* ============================================================
   NAVIGATION
   Barre fixe en trois colonnes : son, logo, contact + menu. Le menu ouvre un
   écran entier depuis le bouton, en cercle, avec les 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: block; }
.nav__logo img { height: 34px; 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.04); filter: drop-shadow(0 4px 18px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(var(--red-lum), .35)); }
/* le son : le libellé et quatre barres qui dansent tant que c'est ON */
.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: 720px) { .nav { padding: 0 var(--hud-inset); } .nav__logo img { height: 26px; } .nav__contact { 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(38px, 7.5vw, 104px); 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); }
/* la catégorie où l'on est (vitrine ou filtre du catalogue) : pastille rouge, texte plein */
.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__legal a { color: var(--ink-mid); } .menu__legal a:hover { color: var(--ink-hi); }
.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, body.leaving .footer { 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 img { height: 40px; width: auto; margin-bottom: 20px; }
.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, .footer ul button { font-size: 14px; color: var(--ink-body); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; transition: color var(--fast); }
.footer ul a:hover, .footer ul button: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; } }