/* ==========================================================================
   PIPA — Vins & Spiritueux d'Exception
   Direction artistique : un showroom noir, une seule touche d'or sous les
   projecteurs. Une typographie en capitales, des angles vifs (0 px), aucune
   ombre : la hiérarchie naît de l'échelle et du contraste des surfaces.
   ========================================================================== */

/* ---------- 1. Jetons ---------- */
:root {
  /* Couleurs — dérivées du logo PIPA (bleu #043275, teinte 216°) */
  --bleu: #043275;             /* Bleu Pipa — la couleur du logo : titres, boutons, bandeau */
  --bleu-roi: #1c58c8;         /* Bleu roi — survols, mises en valeur, focus */
  --bleu-ciel: #9cb8ee;        /* Bleu ciel — petits détails sur fond sombre */
  --nuit: #0c1b31;             /* Bleu nuit — scènes sombres */
  --abysse: #081323;           /* Bleu abysse — navigation, pied de page, préchargement */
  --encre: #13213a;            /* Texte courant sur fond clair */
  --blanc: #fff;
  --brume: #f3f5f9;            /* Sections claires alternées */
  --filet-nuit: #283953;       /* Filets sur fond sombre */
  --filet-clair: #bdc6d4;      /* Filets sur fond clair */
  --ardoise: #58677e;          /* Texte secondaire sur fond clair */
  --acier: #7b899d;            /* Contours de boutons, textes estompés */
  --gris-bleu: #97a5ba;        /* Texte secondaire sur fond sombre */

  /* Typographie — une seule graisse, la voix vient de l'échelle */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-text: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --track: 0.023em;
  --fs-caption: 10px;
  --fs-label: 12px;
  --fs-body: 16px;
  --fs-sub: 18px;
  --fs-h-sm: clamp(22px, 1.9vw, 27px);
  --fs-h: clamp(26px, 2.25vw, 32px);
  --fs-h-lg: clamp(30px, 2.8vw, 40px);
  --fs-display: clamp(42px, 4.4vw, 64px);
  --fs-display-lg: clamp(52px, 6.2vw, 96px);
  --fs-hero: clamp(60px, 8.6vw, 132px);

  /* Espacements — base 8 px */
  --gutter: clamp(16px, 3.4vw, 48px);
  --section: clamp(80px, 10vw, 160px);
  --max: 1440px;
  --nav-h: 64px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.18, 1);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.is-locked { overflow: hidden; }

body {
  min-height: 100vh;
  background: var(--abysse);
  color: var(--encre);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track);
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
button { background: none; border: 0; border-radius: 0; cursor: pointer; }
ul, ol { list-style: none; }
em, address { font-style: normal; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; }
::selection { background: var(--bleu); color: var(--blanc); }
:focus-visible { outline: 1px solid var(--bleu-roi); outline-offset: 4px; }
[data-theme="dark"] :focus-visible, .nav :focus-visible, .loader :focus-visible { outline-color: var(--bleu-ciel); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.label { font-size: var(--fs-label); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.5; }
.section { padding-block: var(--section); }
[data-theme="dark"] { color: var(--blanc); }
[data-theme="light"] { color: var(--encre); }

/* ---------- 3. Masques de lignes & révélations au défilement ---------- */
.line { display: block; overflow: hidden; padding-block: 0.1em; margin-block: -0.1em; }
.line > span { display: block; }

.js [data-reveal] .line > span {
  transform: translate3d(0, 150%, 0);
  transition: transform 1.3s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms));
}
.js [data-reveal].is-in .line > span { transform: none; }

.js [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="fade"].is-in { opacity: 1; transform: none; }

.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }

.js [data-reveal="rule"] { transform: scaleX(0); transform-origin: left center; transition: transform 1.6s var(--ease-in-out); }
.js [data-reveal="rule"].is-in { transform: none; }

.js [data-reveal="clip"] { clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-in-out); transition-delay: var(--d, 0ms); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="clip"] img { scale: 1.3; transition: scale 2.2s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal="clip"].is-in img { scale: 1; }

/* ---------- 4. Boutons & liens ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-fill: var(--blanc);
  --btn-fill-fg: var(--bleu);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px;
  padding: 16px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.6s var(--ease-out), border-color 0.6s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s var(--ease-in-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); }
.btn__arrow { position: relative; flex: none; width: 18px; height: 18px; overflow: hidden; }
.btn__arrow svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.7s var(--ease-out); }
.btn__arrow svg:last-child { transform: translate3d(-130%, 0, 0); }
.btn:hover .btn__arrow svg:first-child { transform: translate3d(130%, 0, 0); }
.btn:hover .btn__arrow svg:last-child { transform: none; }

.btn--plein { --btn-bg: var(--blanc); --btn-fg: var(--bleu); --btn-fill: var(--bleu-roi); --btn-fill-fg: var(--blanc); }
[data-theme="light"] .btn--plein { --btn-bg: var(--bleu); --btn-fg: var(--blanc); }
.btn--outline { border: 1px solid var(--acier); }
.btn--outline:hover { border-color: var(--btn-fill); }
[data-theme="light"] .btn--outline { --btn-fg: var(--bleu); --btn-fill: var(--bleu); --btn-fill-fg: var(--blanc); }

.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  font-size: var(--fs-label);
  line-height: 1.2;
  white-space: nowrap;
}
.link svg { flex: none; width: 16px; height: 16px; transition: transform 0.6s var(--ease-out); }
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 28px;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s var(--ease-in-out);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.link:hover svg { transform: translate3d(6px, 0, 0); }

/* Lettres qui roulent au survol (découpées par le script) */
.roll { display: inline-flex; height: 1.25em; overflow: hidden; line-height: 1.25; vertical-align: top; }
.roll__c {
  display: inline-block;
  white-space: pre;
  text-shadow: 0 1.25em currentColor;
  transition: transform 0.65s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 14ms);
}
[data-roll]:hover .roll__c, [data-roll]:focus-visible .roll__c { transform: translate3d(0, -1.25em, 0); }

/* ---------- 5. Curseur, progression ---------- */
.cursor { display: none; }
.has-cursor .cursor { display: block; position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor label { cursor: none; }
.has-cursor input[type="email"] { cursor: text; }
.cursor__dot, .cursor__label { position: fixed; top: 0; left: 0; }
.cursor__dot {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--blanc);
  border: 1px solid transparent;
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out), margin 0.5s var(--ease-out),
              background-color 0.4s, border-color 0.4s, opacity 0.3s, transform 0.5s var(--ease-out);
}
.cursor.is-link .cursor__dot {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  background: transparent;
  border-color: var(--blanc);
  transform: rotate(45deg);
}
.cursor.is-down .cursor__dot { transform: scale(0.7); }
.cursor.is-link.is-down .cursor__dot { transform: rotate(45deg) scale(0.8); }
.cursor__label {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  background: var(--blanc);
  color: var(--bleu);
  font-size: var(--fs-label);
  transform: scale(0);
  transition: transform 0.6s var(--ease-out), background-color 0.4s, color 0.4s, opacity 0.3s;
}
.cursor.is-label .cursor__label { transform: scale(1); }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.on-light .cursor__dot { background: var(--bleu); }
.cursor.on-light.is-link .cursor__dot { background: transparent; border-color: var(--bleu); }
.cursor.on-light .cursor__label { background: var(--bleu); color: var(--blanc); }
.cursor.is-hidden .cursor__dot, .cursor.is-hidden .cursor__label,
.cursor.is-off .cursor__dot, .cursor.is-off .cursor__label { opacity: 0; }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 2px; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--bleu-roi); transform: scaleX(0); transform-origin: left center; }

/* ---------- 6. Préchargement & âge légal ---------- */
.loader { display: none; }
.js .loader {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: 24px;
  background: var(--abysse);
  color: var(--blanc);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.3s var(--ease-in-out);
}
.js .loader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.js .loader.is-gone { display: none; }
.loader__head, .loader__foot { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.loader__head .label { color: var(--gris-bleu); }
.loader__brand {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  pointer-events: none;
  transition: transform 1.1s var(--ease-in-out), opacity 0.8s var(--ease-out);
}
.loader.is-gate .loader__brand { transform: translate3d(0, -18vh, 0) scale(0.5); opacity: 0; }
/* Logo animé : l'emblème se dessine, les lettres montent, l'ornement s'ouvre */
.lockup { width: clamp(220px, 27vw, 400px); height: auto; overflow: visible; color: var(--blanc); fill: currentColor; }
.lockup__embleme {
  fill-opacity: 0;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: logoDraw 1.8s var(--ease-in-out) 0.15s forwards, logoFill 0.9s ease 1.5s forwards;
}
.lockup__l { transform: translate3d(0, 150px, 0); animation: logoRise 1.2s var(--ease-out) forwards; }
.lockup__l:nth-of-type(1) { animation-delay: 0.9s; }
.lockup__l:nth-of-type(2) { animation-delay: 0.98s; }
.lockup__l:nth-of-type(3) { animation-delay: 1.06s; }
.lockup__l:nth-of-type(4) { animation-delay: 1.14s; }
.lockup__ornement { transform-box: fill-box; transform-origin: center; transform: scaleX(0); opacity: 0; animation: logoOpen 1.2s var(--ease-out) 1.5s forwards; }
@keyframes logoDraw { to { stroke-dashoffset: 0; } }
@keyframes logoFill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes logoRise { to { transform: none; } }
@keyframes logoOpen { to { transform: none; opacity: 1; } }

.loader__gate {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 96px var(--gutter);
  text-align: center;
  visibility: hidden;
}
.loader.is-gate .loader__gate { visibility: visible; }
.loader__gate .line > span { transform: translate3d(0, 150%, 0); transition: transform 1.2s var(--ease-out); }
.loader.is-gate .loader__gate .line > span { transform: none; transition-delay: calc(0.35s + var(--i, 0) * 0.1s); }
.loader__kicker { color: var(--gris-bleu); }
.loader__title { font-size: var(--fs-display-lg); line-height: 0.98; }
.loader__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.loader.is-gate .loader__actions { opacity: 1; transform: none; transition-delay: 0.75s; }
.loader.is-refused .loader__actions { display: none; }
.loader__note { max-width: 540px; font-size: var(--fs-label); color: var(--gris-bleu); opacity: 0; transition: opacity 1s 0.9s; }
.loader.is-gate .loader__note { opacity: 1; }
.loader.is-gate .loader__foot { opacity: 0; transition: opacity 0.6s; }
.loader__bar { position: relative; flex: 1; max-width: 480px; height: 1px; margin-bottom: 12px; overflow: hidden; background: var(--filet-nuit); }
.loader__bar span { position: absolute; inset: 0; background: var(--blanc); transform: scaleX(0); transform-origin: left center; }
.loader__count { font-family: var(--font-display); font-size: clamp(56px, 7vw, 96px); line-height: 0.85; font-variant-numeric: tabular-nums; }

/* ---------- 7. Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  color: var(--blanc);
  transform: translate3d(0, -100%, 0);
  transition: transform 0.9s var(--ease-in-out);
}
.is-ready .nav { transform: none; }
.is-ready .nav.is-hidden { transform: translate3d(0, -100%, 0); }
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--abysse);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.7s var(--ease-in-out);
}
.nav.is-solid::before { transform: none; }
.menu-open .nav::before { transform: scaleY(0); }
.nav__left, .nav__right { display: flex; align-items: center; }
.nav__right { justify-content: flex-end; gap: 4px; }

.nav__menu { display: inline-flex; align-items: center; gap: 16px; height: 44px; padding-right: 8px; font-size: var(--fs-label); }
.burger { position: relative; width: 26px; height: 12px; }
.burger i { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 0.6s var(--ease-in-out), width 0.5s var(--ease-out); }
.burger i:first-child { top: 2px; }
.burger i:last-child { bottom: 2px; width: 60%; }
.nav__menu:hover .burger i:last-child { width: 100%; }
.nav__menu[aria-expanded="true"] .burger i:first-child { transform: translate3d(0, 3.5px, 0) rotate(45deg); }
.nav__menu[aria-expanded="true"] .burger i:last-child { width: 100%; transform: translate3d(0, -3.5px, 0) rotate(-45deg); }
.nav__menu-label { display: block; height: 1.25em; overflow: hidden; line-height: 1.25; }
.nav__menu-label span { display: block; transition: transform 0.7s var(--ease-in-out); }
.nav__menu[aria-expanded="true"] .nav__menu-label span { transform: translate3d(0, -100%, 0); }

.nav__logo { display: flex; align-items: center; }
.nav__word { display: block; width: 88px; height: 20px; overflow: visible; fill: currentColor; }
.nav__word use { transition: transform 0.6s var(--ease-out); }
.nav__word use:nth-of-type(2) { transition-delay: 0.04s; }
.nav__word use:nth-of-type(3) { transition-delay: 0.08s; }
.nav__word use:nth-of-type(4) { transition-delay: 0.12s; }
.nav__logo:hover .nav__word use { transform: translate3d(0, -18px, 0); }

.nav__link { padding: 8px 12px; font-size: var(--fs-label); }
.nav__icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.nav__icon svg { width: 20px; height: 20px; transition: transform 0.5s var(--ease-out); }
.nav__icon:hover svg { transform: translate3d(0, -2px, 0); }
.nav__count {
  position: absolute;
  top: 6px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  background: var(--blanc);
  color: var(--bleu);
  font-size: 10px;
  line-height: 1;
  transition: transform 0.5s var(--ease-out), opacity 0.3s;
}
html:not(.has-selection) .nav__count { opacity: 0; transform: scale(0.4); }

/* ---------- 8. Menu plein écran ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--abysse);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 1.1s var(--ease-in-out), visibility 0s linear 1.1s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 1.1s var(--ease-in-out), visibility 0s; }
.menu__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 24px 64px;
  height: 100%;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 32px;
}
.menu__nav { align-self: center; }
.menu__nav a {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-block: 2px;
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 88px);
  line-height: 1;
  transition: opacity 0.5s, transform 0.8s var(--ease-out);
}
.menu__nav ol:hover a { opacity: 0.28; }
.menu__nav ol:hover a:hover, .menu__nav a:focus-visible { opacity: 1; transform: translate3d(24px, 0, 0); }
.menu__idx { padding-top: 0.9em; font-family: var(--font-text); color: var(--gris-bleu); transition: color 0.4s; }
.menu__nav a:hover .menu__idx { color: var(--bleu-ciel); }
.menu .line > span { transform: translate3d(0, 150%, 0); transition: transform 1s var(--ease-out); }
.menu.is-open .line > span { transform: none; transition-delay: calc(0.35s + var(--i, 0) * 0.07s); }

.menu__media {
  position: relative;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 280px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--nuit);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-in-out);
}
.menu.is-open .menu__media { clip-path: inset(0); transition-delay: 0.45s; }
.menu__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.15);
  transition: clip-path 0.9s var(--ease-in-out), transform 1.4s var(--ease-out);
}
.menu__img.is-active { z-index: 1; clip-path: inset(0); transform: none; }
.menu__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 64px;
  padding-top: 24px;
  border-top: 1px solid var(--filet-nuit);
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.6s, transform 0.8s var(--ease-out);
}
.menu.is-open .menu__foot { opacity: 1; transform: none; transition-delay: 0.7s; }
.menu__foot > div { display: grid; gap: 8px; }
.menu__label, .menu__legal { color: var(--gris-bleu); }
.menu__text { font-size: 14px; line-height: 1.6; }
.menu__text a { margin-right: 16px; }
.menu__legal { max-width: 360px; }

/* ---------- 9. Héros ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--abysse); }
.hero__media {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--hp, 0) * 28vh), 0) scale(calc(1 + var(--hp, 0) * 0.08));
  will-change: transform;
}
.hero__slide { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 1.6s var(--ease-in-out); }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 2.4s var(--ease-out); }
.hero__slide.is-active { z-index: 2; clip-path: inset(0); }
.hero__slide.is-active img { transform: none; }
.hero__slide.is-prev { z-index: 1; clip-path: inset(0); transition: none; }
.hero__slide.is-prev img { transform: scale(1.06) translate3d(-3%, 0, 0); transition: transform 1.6s var(--ease-in-out); }
html:not(.is-ready) .hero__slide.is-active img { transform: scale(1.25); }

.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(8, 19, 35, 0.84) 0%, rgba(8, 19, 35, 0.34) 42%, rgba(8, 19, 35, 0.1) 70%, rgba(8, 19, 35, 0.45) 100%),
    linear-gradient(to right, rgba(8, 19, 35, 0.55), rgba(8, 19, 35, 0) 62%);
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; background: var(--abysse); opacity: calc(var(--hp, 0) * 0.75); pointer-events: none; }

.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: grid;
  gap: 32px;
  padding-bottom: clamp(96px, 14vh, 144px);
  transform: translate3d(0, calc(var(--hp, 0) * -18vh), 0);
  opacity: calc(1 - var(--hp, 0) * 1.8);
}
.hero__texts { display: grid; }
.hero__text { grid-area: 1 / 1; align-self: end; }
.hero__eyebrow { margin-bottom: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.hero__title { font-size: var(--fs-hero); line-height: 0.92; }
.hero__text .line > span { transform: translate3d(0, 150%, 0); transition: transform 1.2s var(--ease-out); }
.hero__text.is-active .line > span { transform: none; transition-delay: calc(0.35s + var(--i, 0) * 0.1s); }
.hero__text.is-leaving .line > span { transform: translate3d(0, -150%, 0); transition: transform 0.9s var(--ease-in-out); transition-delay: calc(var(--i, 0) * 0.05s); }
.hero__text.no-trans .line > span { transition: none; }
html:not(.is-ready) .hero__text.is-active .line > span { transform: translate3d(0, 150%, 0); }

.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s var(--ease-out) 0.9s, transform 1.2s var(--ease-out) 0.9s; }
.is-ready .hero__cta { opacity: 1; transform: none; }

.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(96px, 14vh, 144px);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 24px;
  opacity: 0;
  transition: opacity 1s 1.1s;
}
.is-ready .hero__controls { opacity: 1; }
.hero__counter { color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
.hero__pips { display: flex; gap: 16px; }
.hero__pip { position: relative; width: 40px; height: 32px; }
.hero__pip i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; overflow: hidden; background: rgba(255, 255, 255, 0.28); transition: background-color 0.4s; }
.hero__pip i::after { content: ""; position: absolute; inset: 0; background: var(--blanc); transform: scaleX(0); transform-origin: left center; }
.hero__pip:hover i { background: rgba(255, 255, 255, 0.55); }
.hero__pip.is-active i::after { animation: pipFill var(--slide-dur, 7s) linear forwards; }
.hero.is-paused .hero__pip.is-active i::after,
.hero.is-idle .hero__pip.is-active i::after,
html:not(.is-ready) .hero__pip.is-active i::after { animation-play-state: paused; }
@keyframes pipFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero__pause { position: relative; display: grid; place-items: center; width: 44px; height: 48px; }
.hero__pause svg { grid-area: 1 / 1; }
.hero__hex { width: 44px; height: 48px; transition: transform 1s var(--ease-in-out); }
.hero__pause:hover .hero__hex { transform: rotate(180deg); }
.hero__pause-i, .hero__play-i { width: 18px; height: 18px; }
.hero__play-i, .hero.is-paused .hero__pause-i { display: none; }
.hero.is-paused .hero__play-i { display: block; }

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s 1.3s;
}
.is-ready .hero__scroll { opacity: calc(1 - var(--hp, 0) * 5); }
.hero__scroll .label { color: rgba(255, 255, 255, 0.75); }
.hero__scroll i { position: relative; width: 1px; height: 48px; overflow: hidden; background: rgba(255, 255, 255, 0.25); }
.hero__scroll i::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: var(--blanc); animation: scrollLine 2.2s var(--ease-in-out) infinite; }
@keyframes scrollLine { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 200%, 0); } }

/* ---------- 10. Bandeau défilant ---------- */
.marquee { position: relative; padding-block: clamp(40px, 6vw, 88px); overflow: hidden; background: var(--abysse); }
.marquee__row { display: flex; overflow: hidden; }
.marquee__row + .marquee__row { margin-top: 4px; }
.marquee__inner { display: flex; flex: none; will-change: transform; }
.marquee__group { display: flex; flex: none; align-items: center; font-size: var(--fs-display-lg); }
.marquee__group span {
  padding-inline: 0.35em;
  font-family: var(--font-display);
  line-height: 1.08;
  white-space: nowrap;
  transition: color 0.5s, -webkit-text-stroke-color 0.5s;
}
.marquee__star { flex: none; width: 0.32em; height: 0.27em; fill: var(--bleu-ciel); transition: transform 1s var(--ease-in-out); }
.marquee__row:hover .marquee__star { transform: rotate(90deg); }
.marquee__row--outline span { color: transparent; -webkit-text-stroke: 1px rgba(156, 184, 238, 0.7); }
.marquee__row--outline span:hover { color: var(--blanc); -webkit-text-stroke-color: transparent; }
.marquee__row:not(.marquee__row--outline) span:hover { color: transparent; -webkit-text-stroke: 1px var(--blanc); }

/* ---------- 11. En-têtes de section ---------- */
.section-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 48px;
  padding-bottom: 32px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section-title { font-size: var(--fs-display); line-height: 1.02; }
.section-head .link { margin-bottom: 4px; }
.section-head__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--filet-clair); }
[data-theme="dark"] .section-head__rule { background: var(--filet-nuit); }
[data-theme="light"] :is(.section-title, .scrub, .maison__lead) { color: var(--bleu); }

/* ---------- 12. La Maison ---------- */
.maison { background: var(--blanc); }
.scrub { max-width: 1200px; font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 54px); line-height: 1.1; }
.scrub em { color: var(--bleu-roi); }
.js .scrub .w { opacity: clamp(0.12, calc((var(--p, 0) * var(--n, 1) - var(--i, 0)) * 0.9 + 0.12), 1); }

.maison__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: clamp(64px, 9vw, 140px); }
.media { position: relative; overflow: hidden; background: var(--brume); }
.media__plx { position: absolute; inset: -12% 0; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.media__plx img { width: 100%; height: 100%; object-fit: cover; }
.maison__fig--tall { grid-column: 1 / span 5; grid-row: 1 / span 2; aspect-ratio: 4 / 5; }
.maison__text { grid-column: 7 / span 5; grid-row: 1; align-self: start; display: grid; justify-items: start; gap: 24px; padding-top: 24px; }
.maison__fig--wide { grid-column: 7 / span 6; grid-row: 2; align-self: end; aspect-ratio: 3 / 2; margin-top: 64px; }
.maison__fig figcaption { position: absolute; left: 16px; bottom: 12px; z-index: 1; color: var(--blanc); }
.maison__kicker { color: var(--ardoise); }
.maison__lead { font-family: var(--font-display); font-size: var(--fs-h-lg); line-height: 1.08; }
.maison__body { max-width: 46ch; color: var(--encre); }

/* ---------- 13. Nos univers (trois panneaux) ---------- */
.univers { background: var(--nuit); }
.univers__panels { display: flex; gap: 16px; height: clamp(440px, 76vh, 760px); }
.panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: var(--abysse); transition: flex-grow 0.9s var(--ease-in-out); }
.univers__panels:hover .panel { flex-grow: 0.85; }
.univers__panels .panel:hover { flex-grow: 1.5; }
.panel__media { position: absolute; inset: 0; overflow: hidden; }
.panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) brightness(0.8);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.04);
  transition: filter 1s var(--ease-out), transform 1.4s var(--ease-out);
}
.panel:hover .panel__media img { filter: none; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(1.1); }
.panel__media::after, .insta__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bleu);
  mix-blend-mode: color;
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.9s var(--ease-out);
}
.panel:hover .panel__media::after, .insta__item:hover::after { opacity: 0; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(8, 19, 35, 0.88), rgba(8, 19, 35, 0) 58%); pointer-events: none; }
.panel__meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; justify-items: start; gap: 10px; padding: clamp(20px, 2.4vw, 36px); }
.panel__idx { color: var(--bleu-ciel); }
.panel__title { font-size: clamp(34px, 3.6vw, 54px); line-height: 1; white-space: nowrap; }
.panel__text { max-width: 32ch; max-height: 0; overflow: hidden; opacity: 0; font-size: 14px; color: rgba(255, 255, 255, 0.82); transition: max-height 0.8s var(--ease-in-out), opacity 0.6s; }
.panel:hover .panel__text { max-height: 6em; opacity: 1; }
.panel__more { display: inline-flex; align-items: center; gap: 10px; }
.panel__more svg { width: 14px; height: 14px; transition: transform 0.6s var(--ease-out); }
.panel:hover .panel__more svg { transform: translate3d(6px, 0, 0); }

/* ---------- 13 bis. La Boutique ---------- */
.boutique { background: var(--brume); }
.filters { position: relative; display: flex; flex-wrap: wrap; gap: 4px 32px; margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--filet-clair); }
.filter { position: relative; padding: 12px 0 14px; font-size: var(--fs-label); color: var(--ardoise); transition: color 0.4s; }
.filter sup { margin-left: 4px; font-size: 10px; vertical-align: top; }
.filter:hover, .filter.is-active { color: var(--bleu); }
.filters__bar { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--bleu); transition: transform 0.7s var(--ease-in-out), width 0.7s var(--ease-in-out); }
.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.product { display: flex; flex-direction: column; background: var(--blanc); }
.product.is-pop { animation: productPop 0.8s var(--ease-out) both; animation-delay: calc(var(--k, 0) * 70ms); }
@keyframes productPop { from { opacity: 0; transform: translate3d(0, 32px, 0); } }
.product__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--abysse); }
.product__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.product__media[data-fond="noir"] > img { mix-blend-mode: lighten; }
.product__media[data-fond="blanc"] { background: var(--blanc); }
.product__media[data-fond="blanc"] > img { mix-blend-mode: multiply; }
.product:hover .product__media > img { transform: scale(1.05); }
.product__badge { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 6px 10px; background: var(--blanc); color: var(--bleu); }
.product.is-out .product__badge { background: var(--acier); color: var(--blanc); }
.product__badge.is-new { background: var(--bleu-roi); color: var(--blanc); }
.product.is-out .product__media { opacity: 0.6; }
/* Visuel graphique, en attendant les photos */
.visuel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 28px);
  padding: 10%;
  color: var(--blanc);
  text-align: center;
  background: radial-gradient(circle at 50% 40%, #173665 0%, var(--nuit) 65%);
}
.visuel__embleme { width: 62%; height: auto; fill: currentColor; transition: transform 1.2s var(--ease-out); }
.visuel__accroche { font-family: var(--font-display); font-size: clamp(52px, 6.4vw, 96px); line-height: 0.9; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(156, 184, 238, 0.85); transition: color 0.8s var(--ease-out), -webkit-text-stroke-color 0.8s; }
.visuel__nom { color: var(--gris-bleu); }
.product:hover .visuel__embleme { transform: translate3d(0, -6px, 0) scale(1.04); }
.product:hover .visuel__accroche { color: var(--blanc); -webkit-text-stroke-color: transparent; }
.product__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 24px; }
.product__univers, .product__resume { color: var(--ardoise); }
.product__name { font-size: var(--fs-h); line-height: 1.06; color: var(--bleu); }
.product__maison { color: var(--encre); }
.product__desc { margin: 10px 0 20px; font-size: 13px; line-height: 1.55; color: var(--encre); }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--filet-clair); }
.product__price { font-family: var(--font-display); font-size: var(--fs-h-sm); line-height: 1; color: var(--bleu); }
.product__add {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bleu);
  color: var(--bleu);
  font-size: var(--fs-label);
  transition: color 0.5s var(--ease-out);
}
.product__add::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bleu); transform: scaleY(0); transform-origin: top center; transition: transform 0.6s var(--ease-in-out); }
.product__add:hover::before, .product__add.is-added::before { transform: none; transform-origin: bottom center; }
.product__add:hover, .product__add.is-added { color: var(--blanc); }
.product__add svg { width: 14px; height: 14px; transition: transform 0.6s var(--ease-out); }
.product__add:hover svg, .product__add.is-added svg { transform: rotate(90deg); }
.product__add:disabled { border-color: var(--filet-clair); color: var(--acier); cursor: not-allowed; }
.product__add:disabled::before { display: none; }
.product__dm { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: 14px; padding: 4px 0; font-size: var(--fs-label); color: var(--ardoise); transition: color 0.4s; }
.product__dm svg { width: 16px; height: 16px; transition: transform 0.6s var(--ease-out); }
.product__dm:hover { color: var(--bleu); }
.product__dm:hover svg { transform: translate3d(3px, -3px, 0); }
.boutique__note { margin-top: 40px; color: var(--ardoise); }

/* ---------- 14. Nos caves (image qui s'ouvre) ---------- */
.expand { position: relative; background: var(--abysse); }
.expand__pin { position: relative; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.expand__frame { position: absolute; inset: 0; overflow: hidden; }
.expand__frame img { width: 100%; height: 100%; object-fit: cover; }
.expand__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 19, 35, 0.85), rgba(8, 19, 35, 0.18) 60%); }
.expand__title { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; font-size: clamp(56px, 10vw, 168px); line-height: 0.9; text-align: center; pointer-events: none; }
.expand__word { display: block; white-space: nowrap; }
.expand__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 12px; margin-inline: auto; padding-bottom: 48px; }
.expand__caption .label { color: var(--gris-bleu); }
.expand__text { max-width: 26ch; font-family: var(--font-display); font-size: var(--fs-h-lg); line-height: 1.12; }

.fx-on .expand { height: 280vh; }
.fx-on .expand__pin { position: sticky; top: 0; }
.fx-on .expand__frame { clip-path: inset(calc((1 - var(--e, 0)) * 28%) calc((1 - var(--e, 0)) * 34%)); }
.fx-on .expand__frame img { transform: scale(calc(1.35 - var(--e, 0) * 0.35)); }
.fx-on .expand__shade { opacity: calc(0.2 + var(--t, 0) * 0.8); }
.fx-on .expand__word--l { transform: translate3d(calc(var(--e, 0) * -72vw), 0, 0); }
.fx-on .expand__word--r { transform: translate3d(calc(var(--e, 0) * 72vw), 0, 0); }
.fx-on .expand__caption { opacity: var(--t, 0); transform: translate3d(0, calc((1 - var(--t, 0)) * 40px), 0); }

/* ---------- 15. Pièce d'exception (projecteur) ---------- */
.piece { overflow: hidden; background: var(--abysse); }
.piece__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.piece__visual { position: relative; grid-column: 1 / span 6; aspect-ratio: 3 / 4; overflow: hidden; background: var(--abysse); }
.piece__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; }
.piece__base { filter: brightness(0.34) saturate(0.6); }
.piece__lit {
  filter: brightness(1.12) contrast(1.04);
  -webkit-mask-image: radial-gradient(circle clamp(150px, 20vw, 300px) at var(--lx, 50%) var(--ly, 45%), #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
  mask-image: radial-gradient(circle clamp(150px, 20vw, 300px) at var(--lx, 50%) var(--ly, 45%), #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
.piece__hint { position: absolute; left: 16px; top: 12px; z-index: 1; color: var(--gris-bleu); }
.piece__info { grid-column: 8 / span 5; display: grid; gap: 28px; }
.piece__kicker { color: var(--gris-bleu); }
.piece__title { font-size: var(--fs-display-lg); line-height: 0.95; }
.piece__desc { max-width: 44ch; color: rgba(255, 255, 255, 0.78); }
.specs { border-top: 1px solid var(--filet-nuit); }
.specs > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--filet-nuit); font-size: 14px; }
.specs dt { color: var(--gris-bleu); }
.piece__buy { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.piece__price { display: grid; gap: 4px; }
.piece__amount { font-family: var(--font-display); font-size: var(--fs-h-lg); line-height: 1; }
.piece__title .piece__sub > span { font-size: 0.4em; line-height: 1.3; color: var(--gris-bleu); }
.piece__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.piece__price .label { color: var(--gris-bleu); }

/* ---------- 16. Services (liste + image flottante) ---------- */
.services { position: relative; background: var(--brume); }
.services__list { border-bottom: 1px solid var(--filet-clair); }
.service a {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1fr) 48px;
  align-items: center;
  gap: 24px;
  padding: 32px 16px;
  border-top: 1px solid var(--filet-clair);
  color: var(--bleu);
  transition: color 0.5s var(--ease-out);
}
.service a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bleu);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.7s var(--ease-in-out);
}
.service a:hover::before, .service a:focus-visible::before { transform: none; transform-origin: bottom center; }
.services__list:hover .service a { color: var(--acier); }
.services__list .service a:hover, .service a:focus-visible { color: var(--blanc); }
.service__title { font-size: var(--fs-h-lg); line-height: 1.05; transition: transform 0.8s var(--ease-out); }
.service a:hover .service__title { transform: translate3d(16px, 0, 0); }
.service__desc { max-width: 48ch; font-size: 14px; line-height: 1.55; }
.service__arrow { justify-self: end; width: 24px; height: 24px; transition: transform 0.7s var(--ease-out); }
.service__arrow svg { width: 100%; height: 100%; }
.service a:hover .service__arrow { transform: rotate(-45deg); }

.hover-media {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: clamp(200px, 19vw, 300px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  background: var(--nuit);
  transform-origin: 0 0;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.hover-media.is-active { opacity: 1; }
.hover-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.2);
  transition: clip-path 0.8s var(--ease-in-out), transform 1.2s var(--ease-out);
}
.hover-media img.is-active { z-index: 1; clip-path: inset(0); transform: none; }

/* ---------- 17. Commander (trois étapes) ---------- */
.etapes { padding-block: var(--section); background: var(--bleu); }
.etapes__head { display: grid; gap: 16px; margin-bottom: clamp(48px, 6vw, 88px); }
.etapes__head .label { color: var(--bleu-ciel); }
.etapes__title { font-size: var(--fs-display-lg); line-height: 0.95; }
.etapes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.etape { display: grid; align-content: start; gap: 14px; padding: 32px 32px 40px 0; border-right: 1px solid rgba(255, 255, 255, 0.2); }
.etape + .etape { padding-left: 32px; }
.etape:last-child { border-right: 0; }
.etape__num { font-family: var(--font-display); font-size: var(--fs-display-lg); line-height: 0.9; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.6); transition: color 0.6s var(--ease-out), -webkit-text-stroke-color 0.6s; }
.etape:hover .etape__num { color: var(--blanc); -webkit-text-stroke-color: transparent; }
.etape__name { font-size: var(--fs-h); line-height: 1.1; }
.etape p { max-width: 34ch; font-size: 14px; color: rgba(255, 255, 255, 0.82); }
.etapes__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: clamp(40px, 5vw, 72px); }

/* ---------- 18. Le Cercle (Instagram) ---------- */
.insta { background: var(--blanc); }
.insta__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.insta__text { grid-column: 1 / span 7; display: grid; gap: 20px; }
.insta__text > .label { color: var(--ardoise); }
.insta__title { font-size: var(--fs-display-lg); line-height: 0.95; color: var(--bleu); }
.insta__side { grid-column: 8 / span 5; display: grid; justify-items: start; gap: 24px; }
.insta__desc { max-width: 44ch; color: var(--encre); }
.insta__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: start; }
.insta__item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--brume); }
.insta__item:nth-child(even) { margin-top: 48px; }
.insta__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.85); transition: transform 1.2s var(--ease-out), filter 0.8s var(--ease-out); }
.insta__item:hover img { transform: scale(1.08); filter: none; }
.insta__over { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--blanc); background: rgba(4, 50, 117, 0.45); opacity: 0; transition: opacity 0.5s var(--ease-out); }
.insta__over svg { width: 32px; height: 32px; transform: scale(0.6); transition: transform 0.6s var(--ease-out); }
.insta__item:hover .insta__over { opacity: 1; }
.insta__item:hover .insta__over svg { transform: none; }

/* ---------- 19. Événement ---------- */
.event { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--nav-h) + 48px) 64px; overflow: hidden; background: var(--abysse); }
.event__media { position: absolute; inset: 0; overflow: hidden; }
.event__plx { position: absolute; inset: -20% 0; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.event__plx img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.event__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(8, 19, 35, 0.9) 0%, rgba(8, 19, 35, 0.58) 48%, rgba(8, 19, 35, 0.12) 100%); }
.event__content { position: relative; z-index: 1; display: grid; justify-items: start; gap: 24px; }
.event__content > .label { color: var(--gris-bleu); }
.event__title { font-size: var(--fs-display-lg); line-height: 0.95; }
.event__meta { color: rgba(255, 255, 255, 0.82); }
.event__desc { max-width: 40ch; color: rgba(255, 255, 255, 0.78); }

/* ---------- 20. Ma sélection ---------- */
.cart { position: fixed; inset: 0; z-index: 950; visibility: hidden; transition: visibility 0s linear 0.9s; }
.cart.is-open { visibility: visible; transition: none; }
.cart__backdrop { position: absolute; inset: 0; background: rgba(8, 19, 35, 0.6); opacity: 0; transition: opacity 0.7s var(--ease-out); }
.cart.is-open .cart__backdrop { opacity: 1; }
.cart__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(500px, 100%);
  background: var(--blanc);
  transform: translate3d(100%, 0, 0);
  transition: transform 0.9s var(--ease-in-out);
}
.cart.is-open .cart__panel { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h); padding: 16px 24px; border-bottom: 1px solid var(--filet-clair); }
.cart__title { font-size: var(--fs-h); line-height: 1; color: var(--bleu); }
.cart__title span { color: var(--acier); }
.cart__close { display: inline-flex; align-items: center; gap: 10px; color: var(--bleu); }
.cart__close svg { width: 18px; height: 18px; transition: transform 0.6s var(--ease-in-out); }
.cart__close:hover svg { transform: rotate(90deg); }
.cart__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px; }
.cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet-clair);
  overflow: hidden;
  transition: height 0.45s var(--ease-in-out), opacity 0.3s, padding 0.45s var(--ease-in-out);
}
.cart.is-entering .cart-item { animation: itemIn 0.8s var(--ease-out) both; animation-delay: calc(0.3s + var(--k, 0) * 70ms); }
@keyframes itemIn { from { opacity: 0; transform: translate3d(40px, 0, 0); } }
.cart-item.is-removing { opacity: 0; padding-block: 0; }
.cart-item__media { display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; color: var(--blanc); background: var(--nuit); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__media[data-fond="noir"] img { mix-blend-mode: lighten; }
.cart-item__media svg { width: 72%; height: auto; fill: currentColor; }
.cart-item__name { font-family: var(--font-display); font-size: var(--fs-h-sm); line-height: 1.1; color: var(--bleu); }
.cart-item__meta { color: var(--ardoise); }
.qty { display: inline-flex; align-items: center; margin-top: 10px; border: 1px solid var(--filet-clair); }
.qty button { display: grid; place-items: center; width: 32px; height: 32px; color: var(--bleu); transition: background-color 0.3s, color 0.3s; }
.qty button:hover:not(:disabled) { background: var(--bleu); color: var(--blanc); }
.qty button:disabled { color: var(--filet-clair); cursor: not-allowed; }
.qty svg { width: 12px; height: 12px; }
.qty__n { min-width: 32px; text-align: center; font-variant-numeric: tabular-nums; }
.cart-item__side { display: grid; justify-items: end; gap: 10px; }
.cart-item__price { color: var(--encre); white-space: nowrap; }
.cart-item__remove { color: var(--ardoise); border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.cart-item__remove:hover { color: var(--bleu); border-color: currentColor; }
.cart__empty { display: grid; justify-items: start; gap: 16px; padding: 40px 0; }
.cart__empty-title { font-family: var(--font-display); font-size: var(--fs-h); color: var(--bleu); }
.cart__foot { display: grid; gap: 14px; padding: 20px 24px 24px; border-top: 1px solid var(--filet-clair); background: var(--brume); }
.cart__total { display: flex; align-items: baseline; justify-content: space-between; }
.cart__total .label { color: var(--ardoise); }
.cart__total strong { font-family: var(--font-display); font-size: var(--fs-h); font-weight: 400; color: var(--bleu); }
.cart__note { font-size: 13px; line-height: 1.55; color: var(--encre); }
.cart__order { width: 100%; }
.cart__mail { justify-self: center; }
.cart__msg { min-height: 1.5em; color: var(--bleu-roi); }
.btn:disabled, .link:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled::before, .link:disabled::after { display: none; }

.check { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-label); line-height: 1.5; cursor: pointer; }
.check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check__box { position: relative; flex: none; width: 16px; height: 16px; margin-top: 1px; border: 1px solid var(--acier); transition: background-color 0.3s, border-color 0.3s; }
.check__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid var(--blanc); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform 0.3s var(--ease-out); }
.check input:checked + .check__box { background: var(--bleu); border-color: var(--bleu); }
.check input:checked + .check__box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 1px solid var(--bleu-roi); outline-offset: 3px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 960;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: calc(100vw - 32px);
  padding: 14px 20px;
  background: var(--bleu);
  color: var(--blanc);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
  transform: translate3d(-50%, 160%, 0);
  transition: transform 0.7s var(--ease-in-out);
}
.toast.is-visible { transform: translate3d(-50%, 0, 0); pointer-events: auto; }
.toast__action { flex: none; padding: 4px 0; border-bottom: 1px solid currentColor; font-size: var(--fs-label); }
.fly { position: fixed; z-index: 9990; margin: 0; pointer-events: none; }

/* ---------- 21. Pied de page (se dévoile sous le contenu) ---------- */
main { position: relative; z-index: 1; }
.footer { position: relative; z-index: 0; overflow: hidden; background: var(--abysse); }
.footer.is-reveal { position: sticky; bottom: 0; }
.footer__inner { padding-top: clamp(72px, 8vw, 112px); transform: translate3d(0, calc((1 - var(--fp, 1)) * -22%), 0); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.footer__label { margin-bottom: 16px; color: var(--gris-bleu); }
.footer__col ul { display: grid; gap: 8px; }
.footer__col a { font-size: 14px; }
.footer__address { font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.footer__address a { border-bottom: 1px solid var(--filet-nuit); transition: border-color 0.4s; }
.footer__address a:hover { border-color: var(--blanc); }
.footer__brand { display: flex; margin-top: clamp(40px, 6vw, 80px); padding: 0 var(--gutter) 8px; overflow: hidden; }
.footer__brand svg { flex: var(--w) 1 0; min-width: 0; height: auto; fill: currentColor; transform: translate3d(0, calc((1 - var(--fp, 1)) * (70% + var(--i, 0) * 18%)), 0); }
.footer__col--brand { display: grid; align-content: start; justify-items: start; gap: 16px; }
.footer__emblem { width: min(190px, 100%); height: auto; fill: currentColor; }
.footer__col--brand .label { color: var(--gris-bleu); }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 24px 32px; }
.footer__bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--filet-nuit); }
.footer__legal { font-size: 14px; }
.footer__bottom > .label { color: var(--gris-bleu); }
.footer__social { display: flex; gap: 24px; }

/* ---------- 22. Adaptations ---------- */
@media (max-width: 1100px) {
  .maison__text { grid-column: 7 / span 6; }
  .piece__info { grid-column: 7 / span 6; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insta__intro { grid-template-columns: 1fr; row-gap: 24px; }
  .insta__text, .insta__side { grid-column: 1; }
}

@media (max-width: 900px) {
  :root { --nav-h: 56px; }
  .nav__link { display: none; }
  .nav__word { width: 79px; height: 18px; }
  .menu__grid { grid-template-columns: 1fr; }
  .menu__media { display: none; }
  .hero__content { padding-bottom: 104px; }
  .hero__controls { bottom: 28px; gap: 16px; }
  .hero__scroll { display: none; }
  .maison__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .maison__fig--tall, .maison__text, .maison__fig--wide { grid-column: 1; grid-row: auto; }
  .maison__fig--tall { width: 86%; }
  .maison__fig--wide { justify-self: end; width: 86%; margin-top: 0; }
  .univers__panels { flex-direction: column; height: auto; gap: 12px; }
  .panel, .univers__panels:hover .panel, .univers__panels .panel:hover { flex: none; height: 62vh; min-height: 360px; }
  .panel__text { max-height: none; opacity: 1; }
  .expand__text { font-size: var(--fs-h); }
  .fx-on .expand { height: 220vh; }
  .piece__grid { grid-template-columns: 1fr; row-gap: 48px; }
  .piece__visual, .piece__info { grid-column: 1; }
  .service a { grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: start; row-gap: 8px; padding: 24px 8px; }
  .service__idx { padding-top: 0.7em; }
  .service__desc { grid-column: 2; grid-row: 2; }
  .service__arrow { grid-column: 3; grid-row: 1; margin-top: 0.35em; }
  .etapes__list { grid-template-columns: 1fr; }
  .etape, .etape + .etape { padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .event__plx img { object-position: 60% 50%; }
  .insta__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .btn { gap: 16px; padding-inline: 20px; }
  .hero__counter { display: none; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .specs > div { grid-template-columns: 104px 1fr; }
  .products { grid-template-columns: 1fr; }
  .filters { gap: 4px 20px; }
  .insta__grid { gap: 8px; }
  .insta__item:nth-child(even) { margin-top: 20px; }
  .cart__head, .cart__body, .cart__foot { padding-inline: 16px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .loader__head .label:last-child { display: none; }
}

@media (hover: none) {
  .hover-media, .piece__hint { display: none; }
  .panel__text { max-height: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- 23. Pages légales ---------- */
.page-legale { background: var(--blanc); }
.legal-nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--nav-h); padding-inline: var(--gutter); background: var(--abysse); color: var(--blanc); }
.legal-nav__logo { display: flex; align-items: center; }
.legal-nav__back { display: inline-flex; align-items: center; gap: 10px; }
.legal-nav__back svg { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 0.5s var(--ease-out); }
.legal-nav__back:hover svg { transform: rotate(180deg) translate3d(6px, 0, 0); }
.legal { max-width: 880px; margin-inline: auto; padding: clamp(56px, 8vw, 112px) var(--gutter) clamp(72px, 9vw, 128px); color: var(--encre); }
.legal__kicker { color: var(--ardoise); }
.legal h1 { margin: 12px 0 clamp(32px, 4vw, 48px); font-size: var(--fs-display); line-height: 1; color: var(--bleu); }
.legal h2 { margin: 48px 0 14px; padding-top: 24px; border-top: 1px solid var(--filet-clair); font-size: var(--fs-h-sm); line-height: 1.15; color: var(--bleu); }
.legal p, .legal li { font-size: 16px; line-height: 1.7; letter-spacing: 0; text-transform: none; }
.legal p + p { margin-top: 12px; }
.legal ul { margin-top: 12px; padding-left: 1.2em; list-style: square; }
.legal li + li { margin-top: 4px; }
.legal a, .cart__note a { color: var(--bleu-roi); border-bottom: 1px solid currentColor; }
.legal .legal__maj, .legal .legal__kicker { font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; }
.legal__maj { margin-top: 56px; color: var(--acier); }
.a-completer { padding: 0 4px; border: 1px dashed var(--bleu-roi); background: rgba(28, 88, 200, 0.08); color: var(--bleu-roi); }
.legal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 32px var(--gutter); background: var(--abysse); color: var(--gris-bleu); font-size: 13px; }
.legal-foot__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal-foot a { color: var(--blanc); }