/* =========================================================
   SPOT CORPORATION — Design System
   Dark, underground, premium streetwear e-commerce
   ========================================================= */

:root{
  --black:            #08070a;
  --charcoal:          #111014;
  --charcoal-2:        #17151a;
  --wine:              #2a0a10;
  --wine-2:            #3a0e14;
  --blood:             #6e0f1c;
  --accent:            #a11423;
  --accent-bright:     #d21f30;
  --line:              rgba(244,241,235,0.10);
  --line-strong:       rgba(244,241,235,0.18);
  --bone:              #f3efe6;
  --bone-dim:          rgba(243,239,230,0.62);
  --bone-faint:        rgba(243,239,230,0.34);
  --grain-opacity:     0.05;

  --ease-out:          cubic-bezier(.16,.84,.32,1);
  --ease-soft:         cubic-bezier(.22,1,.36,1);
  --ease-in-out:       cubic-bezier(.65,0,.35,1);

  --nav-h: calc(76px + var(--sat, 0px));
  --container: 1400px;
  --gutter: clamp(20px, 4vw, 56px);

  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-grotesk: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  background: var(--black);
  scroll-behavior: auto;
}
html.lenis, html.lenis body{ height: auto; }
body{
  margin:0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--f-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: default;
}
img, svg, video, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
input, textarea, select{ font-family:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background: var(--accent); color: var(--bone); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background: var(--black); }
::-webkit-scrollbar-thumb{ background: #2b1216; border-radius: 4px; }

/* ---------- film grain overlay ---------- */
.grain{
  position: fixed; inset:0; z-index: 9990;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* ---------- vignette ---------- */
.vignette{
  position: fixed; inset:0; z-index: 9989; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family: var(--f-grotesk);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bone-dim);
}
.display{
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .92;
  font-weight: 400;
}

/* ---------- custom cursor ---------- */
#cursor{
  position: fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background: var(--bone);
  pointer-events: none; z-index: 10000;
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease-soft), height .3s var(--ease-soft), background-color .3s var(--ease-soft), opacity .3s;
  mix-blend-mode: difference;
}
#cursor.grow{ width:56px; height:56px; background: var(--bone); }
#cursor.hide{ opacity:0; }
@media (hover:none), (pointer:coarse){ #cursor{ display:none; } }

/* =========================================================
   LOADER / 3D LOGO INTRO
   ========================================================= */
/* Trois bandes : le titre en haut, le pendentif, l'indice + le bouton en
   bas. Les marges intérieures réservent le haut et le bas, et la scène se
   centre dans l'espace qui reste — elle rétrécit au lieu de passer sous
   le bouton (téléphone en paysage, fenêtre basse). L'indice se place
   au-dessus du bouton, même quand le bouton passe sur deux lignes (58 px). */
#intro{
  --intro-top: clamp(28px, 6vh, 64px);
  --intro-btn-b: max(clamp(36px, 8vh, 64px), calc(env(safe-area-inset-bottom, 0px) + 12px));
  --intro-hint-b: calc(var(--intro-btn-b) + 72px);
  position: fixed; inset:0; z-index: 9000;
  background: radial-gradient(120% 120% at 50% 30%, #1a1216 0%, #0a0709 60%, #050405 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-top: calc(var(--intro-top) + 36px);
  padding-bottom: calc(var(--intro-hint-b) + 26px);
  overflow:hidden;
}
@media (max-height: 520px){
  #intro{
    --intro-top: 14px;
    --intro-btn-b: calc(env(safe-area-inset-bottom, 0px) + 18px);
  }
}
#intro .intro-frame{
  position:absolute; inset: 0;
  border: 1px solid var(--line);
  margin: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s var(--ease-soft);
}
#intro.ready .intro-frame{ opacity: 1; }

/* Fond de l'intro : la photo du t-shirt « LE SYSTÈME / THE SYSTEM / LE
   COMMERCE » derrière le pendentif (le canevas 3D est transparent).
   Recadrée en cover sur tous les formats : en portrait on garde le côté
   gauche (imprimé + pendentif doré), en paysage la bande de l'imprimé.
   Un voile assombrit le centre sous le pendentif, le haut sous le titre
   et le bas sous le bouton, pour que le chrome et les textes restent
   lisibles. Arrive en fondu avec le cadre ; immédiat en mouvement réduit
   (jeton). */
#intro .intro-bg{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition: opacity var(--m-slower) var(--m-ease);
}
#intro.ready .intro-bg{ opacity:1; }
#intro .intro-bg img{
  width:100%; height:100%; max-width:none;
  object-fit:cover;
  object-position: 22% 45%;
}
@media (orientation: landscape){
  #intro .intro-bg img{ object-position: 22% 54%; }
}
#intro .intro-bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(closest-side, rgba(5,4,5,.5), rgba(5,4,5,0)) center 48% / min(92vw, 820px) min(78vh, 760px) no-repeat,
    linear-gradient(to bottom, rgba(5,4,5,.6) 0%, rgba(5,4,5,0) 22%, rgba(5,4,5,0) 56%, rgba(5,4,5,.82) 86%, rgba(5,4,5,.9) 100%);
}
@media (orientation: landscape){
  #intro .intro-bg::after{ background-color: rgba(5,4,5,.22); }
}
/* Écran très large : l'imprimé y est agrandi près de trois fois, on le
   recule davantage pour que le pendentif reste la seule vedette. */
@media (min-aspect-ratio: 2/1){
  #intro .intro-bg::after{ background-color: rgba(5,4,5,.42); }
}

#intro-wordmark{
  position:absolute;
  top: var(--intro-top);
  left:0; right:0;
  text-align:center;
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: clamp(.85rem, 2.4vw, 1.1rem);
  color: var(--bone);
  overflow:hidden;
}
#intro-wordmark span{
  display:inline-block;
  transform: translateY(110%);
}

/* Le cadre du pendentif est celui de l'artefact « Pendentif SPOT Chrome »
   que le propriétaire a validé : la scène y fait la largeur de l'écran
   moins 40 px (760 px au plus), en 4:5 sur téléphone et 16:11 à partir de
   680 px, plafonnée à 72 % de la hauteur, et son canevas 2 px de moins
   (la bordure). Même cadre, donc même cadrage et même taille de
   pendentif que dans l'artefact. Seule exception : quand l'écran est trop
   bas (paysage, petite fenêtre), elle ne dépasse jamais l'espace laissé
   entre le titre et les boutons (100 % de la bande de #intro). */
#logo-canvas-wrap{
  --stage-w: min(calc(100vw - 40px), 760px);
  position: relative;
  width: calc(var(--stage-w) - 2px);
  height: min(calc(var(--stage-w) * 5 / 4 - 2px), calc(72vh - 2px), 100%);
  touch-action: none;
  opacity: 0;
  transform: scale(.86);
}
@media (min-width: 680px){
  #logo-canvas-wrap{ height: min(calc(var(--stage-w) * 11 / 16 - 2px), calc(72vh - 2px), 100%); }
}
#logo-canvas-wrap canvas{ width:100%!important; height:100%!important; display:block; }
/* No WebGL on this device (see startIntro in js/main.js): the turning
   chrome pendant is replaced by the flat mark so the intro still shows
   the brand instead of an empty square. */
#logo-canvas-wrap.no-3d{
  background: url('../assets/logo-cutout.png') center / contain no-repeat;
}

#intro-hint{
  position:absolute;
  bottom: var(--intro-hint-b);
  left:0; right:0;
  text-align:center;
  font-family: var(--f-grotesk);
  font-size: .68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: var(--bone-faint);
  opacity:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
#intro-hint svg{ width:14px; height:14px; opacity:.7; animation: drag-hint 2.4s ease-in-out infinite; }
@keyframes drag-hint{
  0%,100%{ transform: translateX(-6px); opacity:.35; }
  50%{ transform: translateX(6px); opacity:.9; }
}

#enter-btn{
  position:absolute;
  bottom: var(--intro-btn-b);
  left:50%;
  transform: translateX(-50%) translateY(16px);
  opacity:0;
  font-family: var(--f-grotesk);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color: var(--black);
  background: var(--bone);
  padding: 17px 46px;
  border-radius: 999px;
  display:flex; align-items:center; gap:12px;
  transition: transform .5s var(--ease-soft), background .35s, color .35s, letter-spacing .35s;
}
#enter-btn:hover{ letter-spacing:.38em; background: var(--accent-bright); color: var(--bone); }
#enter-btn .dot{
  width:6px; height:6px; border-radius:50%; background: var(--accent);
  transition: background .35s;
}
#enter-btn:hover .dot{ background: var(--bone); }

#intro.leaving{
  transition: opacity .9s var(--ease-in-out), visibility .9s;
}
#intro.hidden{
  opacity:0; visibility:hidden; pointer-events:none;
}

/* =========================================================
   NAV
   ========================================================= */
#site-nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  height: var(--nav-h);
  display:flex; align-items:center;
  padding: var(--sat, 0px) var(--gutter) 0;
  background: linear-gradient(to bottom, rgba(8,7,10,.75), rgba(8,7,10,0));
  transition: background .5s var(--ease-soft), border-color .5s;
  border-bottom: 1px solid transparent;
  opacity:0;
  transform: translateY(-12px);
}
#site-nav.scrolled{
  background: rgba(8,7,10,.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav-grid{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 24px;
}
.nav-brand{
  font-family: var(--f-display);
  font-size: 1.15rem;
  letter-spacing: .12em;
  display:flex; align-items:center; gap:10px;
  justify-self:start;
}
.nav-brand img{ height: 26px; width:auto; }
.nav-links{
  display:flex; gap: clamp(18px, 2.6vw, 40px);
  justify-self:center;
}
.nav-links a{
  font-family: var(--f-grotesk);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bone-dim);
  position:relative;
  padding: 6px 0;
  transition: color .3s;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--accent-bright);
  transition: right .35s var(--ease-soft);
}
.nav-links a:hover, .nav-links a.active{ color: var(--bone); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }

.nav-actions{
  display:flex; align-items:center; gap: clamp(14px,2vw,26px);
  justify-self:end;
}
.nav-icon-btn{
  display:flex; align-items:center; gap:8px;
  font-family: var(--f-grotesk);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color: var(--bone-dim);
  position:relative;
  transition: color .3s;
}
.nav-icon-btn:hover{ color: var(--bone); }
.nav-icon-btn svg{ width:17px; height:17px; }
.nav-icon-btn .label{ display:none; }
@media (min-width: 1080px){ .nav-icon-btn .label{ display:inline; } }

#cart-count{
  position:absolute; top:-7px; right:-9px;
  background: var(--accent-bright); color:var(--bone);
  font-size: .58rem; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform: scale(0);
  transition: transform .3s var(--ease-soft);
}
#cart-count.show{ transform: scale(1); }

.nav-burger{
  display:flex; flex-direction:column; gap:5px; width:24px;
}
.nav-burger span{ height:1px; width:100%; background:var(--bone); transition: transform .35s var(--ease-soft), opacity .35s; }
@media (min-width: 900px){ .nav-burger{ display:none; } }

/* The full-screen menu (z-index 600, opaque black) used to paint straight
   over the nav (z-index 500) -- including the burger that opened it. With
   no close button, no Escape and no backdrop, a visitor who opened the menu
   and did not want to go anywhere had no way back except reloading the page.
   JS lifts the nav above the menu while it is open, and the three bars fold
   into a cross: the control that opens it also closes it. */
#site-nav.above-menu{ z-index: 700; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
.nav-links{ }
@media (max-width: 899px){
  .nav-links{ display:none; }
  .nav-grid{ grid-template-columns: 1fr auto; }
}

/* mobile drawer menu */
#mobile-menu{
  position: fixed; inset:0; z-index: 600;
  background: var(--black);
  display:flex; flex-direction:column;
  padding: calc(var(--nav-h) + 20px) var(--gutter) calc(40px + var(--sab, 0px));
  transform: translateY(-100%);
  /* overflow-y is load-bearing on a landscape phone. The menu is
     `inset:0`, so it is exactly one viewport tall -- but five display-size
     links plus the footer row need 576px, and a phone on its side only has
     340px. With the default `visible`, that surplus escaped the box in both
     states: closed (translated up by one viewport height) the overflowing
     links dropped straight back onto the hero and swallowed taps meant for
     the burger and the wordmark; open, "A propos", "Compte" and "Panier"
     sat 236px below the screen with nothing to scroll. Clipping the box
     fixes the bleed and makes the surplus scrollable instead of lost.
     `visibility`/`pointer-events` then make the closed menu properly inert,
     so it cannot take a tap or catch keyboard focus -- delayed by the slide
     duration so closing still animates instead of blinking out. */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
  transition: transform .6s var(--ease-in-out), visibility 0s linear .6s;
}
#mobile-menu.open{
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .6s var(--ease-in-out), visibility 0s;
}

#mobile-menu a{
  font-family: var(--f-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 3rem);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--bone);
}
#mobile-menu .mm-foot{
  margin-top:auto;
  display:flex; gap:28px;
  font-family:var(--f-grotesk); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
/* Landscape phones (and the Flip's cover screen): scale the menu to the
   screen so the whole thing fits without scrolling. Same typeface, same
   rhythm -- only short viewports see this, portrait phones and up are
   untouched. */
@media (max-height: 540px) and (max-width: 899px){
  #mobile-menu{ padding-top: calc(var(--nav-h) + 8px); padding-bottom: calc(16px + var(--sab, 0px)); }
  #mobile-menu a{ font-size: clamp(1.05rem, 5.2vh, 1.7rem); padding: 7px 0; }
  #mobile-menu .mm-foot{ gap:20px; }
}

/* =========================================================
   HERO
   ========================================================= */
#hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: calc(var(--nav-h) + 40px) var(--gutter) 90px;
  overflow: hidden;
  background: var(--black);
}
/* Fond : la photo logo + foule (assets/hero-bg-*), recouverte d'un voile
   presque noir — l'accueil reste aussi sombre qu'avant, sans virer au rouge. */
#hero-mark{
  position:absolute; inset:-8% 0 -8% 0;
  pointer-events:none; user-select:none;
}
#hero-mark img{ width:100%; height:100%; object-fit:cover; object-position: 50% 50%; display:block; filter: saturate(.72) brightness(.72); }
#hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 42%, rgba(8,7,10,.70), rgba(8,7,10,.9) 75%),
    linear-gradient(180deg, rgba(8,7,10,.30) 0%, rgba(8,7,10,0) 30%, rgba(8,7,10,.55) 62%, #060506 100%);
}
.hero-content{ position:relative; z-index:2; }
.hero-eyebrow{ margin-bottom: 22px; }
.hero-title{
  font-size: clamp(1.9rem, 10vw, 9.5rem);
  color: var(--bone);
}
.hero-title .line{ overflow:hidden; }
.hero-title .line span{ display:inline-block; transform: translateY(115%); white-space:nowrap; }
.hero-title em{
  font-style:normal;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone);
}
.hero-eyebrow{ opacity:0; transform: translateY(20px); }
.hero-sub{
  margin-top: 26px;
  max-width: 460px;
  font-size: .98rem;
  line-height:1.7;
  color: var(--bone-dim);
  font-weight:300;
  opacity:0; transform: translateY(24px);
}
.hero-foot{
  margin-top: 46px;
  display:flex; align-items:center; gap: 34px; flex-wrap:wrap;
  opacity:0; transform: translateY(24px);
}
.btn-primary{
  display:inline-flex; align-items:center; gap:14px;
  font-family: var(--f-grotesk); font-weight:600;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color: var(--black); background: var(--bone);
  padding: 18px 40px; border-radius:999px;
  transition: background .35s, color .35s, transform .4s var(--ease-soft), letter-spacing .35s;
}
.btn-primary:hover{ background: var(--accent-bright); color:var(--bone); letter-spacing:.32em; transform: translateY(-2px); }
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-grotesk); font-weight:600;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color: var(--bone-dim);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.btn-ghost:hover{ color: var(--bone); border-color: var(--bone); }

.scroll-cue{
  position:absolute; bottom: 28px; left: var(--gutter);
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-grotesk); font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--bone-faint);
}
.scroll-cue .bar{
  width:1px; height: 46px; background: var(--line-strong); position:relative; overflow:hidden;
}
.scroll-cue .bar::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--bone); animation: scrollbar 2.2s ease-in-out infinite;
}
@keyframes scrollbar{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* marquee strip */
.marquee{
  position:relative; z-index:2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
  overflow:hidden;
  background: var(--charcoal);
}
.marquee-track{
  display:flex; width:max-content;
  gap: 3rem;
  animation: marquee 32s linear infinite;
}
.marquee-track span{
  font-family: var(--f-display);
  text-transform:uppercase;
  font-size: clamp(1.1rem, 2.4vw, 1.7rem);
  color: var(--bone-faint);
  display:flex; align-items:center; gap:3rem;
  letter-spacing:.02em;
  white-space:nowrap;
}
.marquee-track span i{ color: var(--accent); font-style:normal; font-size:.7em; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee.m-paused .marquee-track{ animation-play-state: paused; }

/* =========================================================
   SECTION SHELLS
   ========================================================= */
.section{ position:relative; padding: 140px var(--gutter); }
.section-tight{ padding: 90px var(--gutter); }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom: 64px; flex-wrap:wrap;
}
.section-head h2{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--bone);
}
.section-head .eyebrow{ margin-bottom: 14px; display:block; }
.section-num{
  font-family: var(--f-grotesk); font-size:.72rem; color: var(--bone-faint); letter-spacing:.2em;
}

/* Ne se cache que ce que js/main.js a marqué .rv-wait : ce qui était sous
   la ligne de flottaison au moment du branchement. Sans JS, ou pour ce qui
   est déjà à l'écran, tout est visible (règle Motion de CLAUDE.md). */
.reveal.rv-wait{ opacity:0; transform: translateY(34px); }
.reveal.rv-wait.in{
  opacity:1; transform:none;
  transition: opacity 1s var(--ease-soft), transform 1.1s var(--ease-soft);
}

/* Mouvement réduit : la boutique ne glisse plus, ne défile plus toute
   seule, n'apparaît plus en fondu — tout est simplement là. Le reste
   (intro GSAP, défilement) est réglé dans js/main.js via SpotMotion. */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in, .reveal.rv-wait, .product-card.rv-wait{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  .scroll-cue .bar::after{ animation:none; top:0; }
}

/* =========================================================
   CATEGORY TABS / FILTERS
   ========================================================= */
.shop-filters{
  display:flex; gap: 10px; flex-wrap:wrap;
}
.filter-btn{
  font-family: var(--f-grotesk); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color: var(--bone-dim);
  border: 1px solid var(--line-strong);
  padding: 11px 22px; border-radius: 999px;
  transition: all .35s var(--ease-soft);
}
.filter-btn:hover{ color:var(--bone); border-color: var(--bone-faint); }
.filter-btn.active{ background: var(--bone); color: var(--black); border-color: var(--bone); }
/* La pastille du filtre actif glisse d'un bouton à l'autre (js/main.js) ;
   sans JS, le bouton actif garde son propre fond. */
.shop-filters{ position:relative; isolation:isolate; }
.filter-thumb{ position:absolute; z-index:-1; border-radius:999px; background:var(--bone); pointer-events:none; }
.shop-filters:not(.has-thumb) .filter-thumb{ display:none; }
.shop-filters.has-thumb .filter-btn.active{ background:transparent; border-color:transparent; color:var(--black); }

/* La copie de la photo qui vole jusqu'au panier (ajout rapide). */
.cart-fly{
  position:fixed; z-index:1300; pointer-events:none; overflow:hidden;
  border-radius:14px; background:var(--charcoal);
  box-shadow:0 18px 40px rgba(0,0,0,.55); transform-origin:50% 50%; will-change:transform, opacity;
}

/* =========================================================
   PRODUCT GRID / CARD
   ========================================================= */
.product-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 34px);
}
@media (max-width: 560px){
  .product-grid{ grid-template-columns: 1fr; }
}
.shop-empty{
  grid-column: 1 / -1;
  padding: 80px 20px;
  text-align:center;
  font-family: var(--f-grotesk);
  font-size:.85rem;
  letter-spacing:.06em;
  color: var(--bone-faint);
}
.product-card{ cursor:pointer; }
.product-card.rv-wait{ opacity:0; transform: translateY(28px); }
.product-card.rv-wait.in{
  opacity:1; transform:none;
  transition: opacity .8s var(--ease-soft), transform .9s var(--ease-soft);
}
.product-media{
  position:relative;
  aspect-ratio: 4/5;
  overflow:hidden;
  border-radius: 3px;
  background: var(--charcoal);
  isolation:isolate;
}
.product-media .tag{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family: var(--f-grotesk); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color: var(--bone); background: var(--accent); padding:6px 12px; border-radius:999px;
}
.product-media .tag.sold{ background: #2c2a2a; color: var(--bone-faint); }
.product-media .quick-add{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:3;
  font-family: var(--f-grotesk); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  background: var(--bone); color: var(--black);
  padding: 13px; border-radius: 999px; text-align:center;
  transform: translateY(140%); opacity:0;
  transition: transform .45s var(--ease-soft), opacity .4s;
}
.product-card:hover .quick-add{ transform: translateY(0); opacity:1; }
/* Sold-out card: the pill still appears on hover so the state is obvious,
   but it reads as a status, not a button you can press. */
.product-media .quick-add.is-sold-out{
  background: #2c2a2a; color: var(--bone-faint); cursor: default;
}
.product-card:hover .pcard-art{ transform: scale(1.06); }
.product-card:hover .pcard-alt{ opacity:1; }

.pcard-art, .pcard-alt{
  position:absolute; inset:0;
  transition: transform 1.1s var(--ease-soft), opacity .6s var(--ease-soft);
}
.pcard-alt{ opacity:0; transform: scaleX(-1); }
.product-card:hover .pcard-alt{ transform: scaleX(-1) scale(1.06); }
.pcard-alt.no-mirror{ transform: none; }
.product-card:hover .pcard-alt.no-mirror{ transform: scale(1.06); }

/* real product photography */
.media-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}

.product-info{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-top: 18px; gap: 12px;
}
.product-info h3{
  font-family: var(--f-grotesk); font-weight:600; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.03em;
  color: var(--bone);
}
.product-info .cat{
  display:block; margin-top:4px;
  font-family: var(--f-grotesk); font-size:.68rem; letter-spacing:.1em;
  color: var(--bone-faint); text-transform:uppercase;
}
.product-price{
  font-family: var(--f-grotesk); font-weight:600; font-size:.92rem; color: var(--bone-dim);
  white-space:nowrap;
}
.product-price .was{
  text-decoration: line-through; color: var(--bone-faint); margin-right:8px; font-weight:400;
}

/* generated placeholder artwork tile */
.art-tile{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.art-tile::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%),
    var(--tile-grad);
}
.art-tile::after{
  content:'';
  position:absolute; inset:0;
  opacity:.16; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.art-tile .art-word{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display);
  text-transform:uppercase;
  color: rgba(243,239,230,.09);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  letter-spacing: -.01em;
  white-space:nowrap;
  transform: rotate(0deg);
  pointer-events:none;
}
.art-tile .art-icon{ position:relative; z-index:2; width:34%; opacity:.92; }

/* =========================================================
   EDITORIAL / SPLIT SECTIONS
   ========================================================= */
.split{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items:center;
}
@media (max-width: 900px){ .split{ grid-template-columns: 1fr; } }
.split-media{
  position:relative; aspect-ratio: 4/5; border-radius:3px; overflow:hidden; background: var(--charcoal);
}
.split-media .parallax-layer{ position:absolute; inset:-10% 0; }
.split-media .split-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center; display:block;
}
.split-copy .eyebrow{ margin-bottom:20px; }
.split-copy h2{ font-size: clamp(2rem, 4.6vw, 3.4rem); color:var(--bone); margin-bottom:26px; }
.split-copy p{ color: var(--bone-dim); line-height:1.85; font-weight:300; max-width: 480px; margin-bottom: 16px; }

/* =========================================================
   LOOKBOOK / GALLERY STRIP
   ========================================================= */
.lookbook{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,26px);
}
.lookbook .lb-tile{ aspect-ratio: 3/4; border-radius:3px; overflow:hidden; position:relative; }
.lookbook .lb-tile:nth-child(2){ margin-top: 60px; }
.lb-tile .lb-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center; display:block;
}
.lb-tile.has-photo::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,7,10,0) 55%, rgba(8,7,10,.78) 100%);
  pointer-events:none;
}
.lb-tile .lb-label{
  position:absolute; left:18px; bottom:16px; z-index:2;
  font-family: var(--f-grotesk); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color: var(--bone);
}
@media (max-width: 800px){
  .lookbook{ grid-template-columns: 1fr 1fr; }
  .lookbook .lb-tile:nth-child(3){ display:none; }
}

/* =========================================================
   ABOUT
   ========================================================= */
#about .about-hero{
  padding-top: 160px;
}
.about-manifesto{
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: 1.15;
  text-transform: uppercase;
  max-width: 1100px;
  color: var(--bone);
}
.about-manifesto .fade-word{ color: var(--bone-faint); transition: color .4s; }
.about-stats{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
  gap: 40px; margin-top: 90px; border-top:1px solid var(--line); padding-top: 46px;
}
.about-stats .stat b{
  display:block; font-family:var(--f-display); font-size: clamp(2.2rem,4vw,3.2rem); color:var(--bone);
}
.about-stats .stat span{
  font-family: var(--f-grotesk); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-faint);
}

/* =========================================================
   NEWSLETTER / CTA
   ========================================================= */
.cta-band{
  position:relative;
  padding: 130px var(--gutter);
  text-align:center;
  background: linear-gradient(180deg, var(--wine) 0%, var(--black) 100%);
  overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(161,20,35,.35), transparent 70%);
}
.cta-band h2{
  position:relative; font-size: clamp(2.4rem,7vw,5.4rem); color:var(--bone); margin-bottom: 30px;
}
.cta-band p{ position:relative; color:var(--bone-dim); max-width:520px; margin:0 auto 40px; font-weight:300; }
.cta-form{
  position:relative;
  display:flex; max-width: 460px; margin:0 auto; border-bottom: 1px solid var(--line-strong);
  padding-bottom: 14px; gap: 16px;
}
.cta-form input{
  flex:1; background:transparent; border:none; outline:none; color:var(--bone);
  font-family: var(--f-grotesk); font-size:.85rem; letter-spacing:.05em;
}
.cta-form input::placeholder{ color: var(--bone-faint); }
.cta-form button{
  font-family: var(--f-grotesk); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color: var(--bone); display:flex; align-items:center; gap:8px;
  transition: color .3s, gap .3s;
}
.cta-form button:hover{ color: var(--accent-bright); gap:14px; }

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  padding: 80px var(--gutter) 30px;
  border-top: 1px solid var(--line);
  background: var(--black);
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px;
  padding-bottom: 60px;
}
@media (max-width: 800px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
.footer-brand{ font-family: var(--f-display); font-size: 1.6rem; letter-spacing:.06em; margin-bottom: 18px; display:flex; align-items:center; gap:12px; }
.footer-brand img{ height:30px; }
.footer-col h4{
  font-family: var(--f-grotesk); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-faint);
  margin-bottom: 18px;
}
.footer-col a, .footer-col p{
  display:block; font-size:.86rem; color: var(--bone-dim); margin-bottom:12px; font-weight:300;
  transition: color .3s;
}
.footer-col a:hover{ color:var(--bone); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top: 26px; border-top:1px solid var(--line);
  font-family: var(--f-grotesk); font-size:.68rem; letter-spacing:.08em; color: var(--bone-faint);
}
.footer-social{ display:flex; gap:20px; }
.age-gate-note{
  display:flex; align-items:center; gap:8px;
  color: var(--bone-faint);
}
.age-gate-note svg{ width:14px; height:14px; }

/* =========================================================
   PRODUCT DETAIL OVERLAY
   ========================================================= */
#product-view{
  position: fixed; inset:0; z-index: 800;
  background: var(--black);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transform: translateY(100%);
  visibility:hidden;
  transition: transform .7s var(--ease-in-out), visibility .7s;
}
#product-view.open{ transform: translateY(0); visibility:visible; }
.pv-close{
  position: fixed; top: calc(26px + var(--sat, 0px)); right: var(--gutter); z-index:20;
  display:flex; align-items:center; gap:10px;
  font-family: var(--f-grotesk); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
.pv-close:hover{ color:var(--bone); }
.pv-close svg{ width:16px; height:16px; }
.pv-wrap{
  max-width: var(--container); margin:0 auto;
  padding: 110px var(--gutter) 60px;
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,5vw,90px);
}
@media (max-width: 960px){ .pv-wrap{ grid-template-columns: 1fr; padding-top:90px; } }

.pv-gallery-main{
  position:relative; aspect-ratio: 4/5; border-radius:3px; overflow:hidden; background:var(--charcoal);
  cursor: zoom-in;
}
.pv-gallery-main .art-tile, .pv-gallery-main .media-photo{ transition: transform .6s var(--ease-soft); }
.pv-gallery-main.zoomed .art-tile, .pv-gallery-main.zoomed .media-photo{ transform: scale(1.7); cursor: zoom-out; }
/* The thumbnail strip is the widest thing in the product view: four
   78px thumbs plus their gaps come to exactly 348px, and a grid item
   defaults to min-width:auto, so on a 360px phone that strip refused to
   shrink and dragged the whole column 8px past the screen -- taking the
   title, the "Guide des tailles" label and the right edge of the add-to-
   cart button off screen with it.

   Letting the strip scroll fixes it at the source: a scroll container
   no longer reports its children as a minimum width, so the column goes
   back to following the screen. The thumbs keep their exact 78px (hence
   flex:0 0 auto -- they must never be squashed to fit), and on any
   screen wide enough for all of them nothing scrolls and nothing looks
   different. */
.pv-gallery{ min-width:0; }
.pv-thumbs{
  display:flex; gap:12px; margin-top:14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.pv-thumbs::-webkit-scrollbar{ display:none; }
.pv-thumbs .thumb{
  width: 78px; flex:0 0 auto; aspect-ratio:4/5; border-radius:2px; overflow:hidden; position:relative;
  border: 1px solid var(--line); opacity:.55; transition: opacity .3s, border-color .3s;
}
.pv-thumbs .thumb.active{ opacity:1; border-color: var(--bone-faint); }

.pv-info .eyebrow{ margin-bottom:16px; }
.pv-info h1{ font-family: var(--f-display); text-transform:uppercase; font-size: clamp(2rem,4vw,3rem); color:var(--bone); margin-bottom:14px; }
.pv-price{ font-family: var(--f-grotesk); font-size:1.2rem; color:var(--bone); margin-bottom: 26px; }
.pv-price .was{ text-decoration:line-through; color:var(--bone-faint); margin-right:10px; font-size:.9rem; }
.pv-desc{ color: var(--bone-dim); line-height:1.85; font-weight:300; margin-bottom: 30px; max-width: 460px; }

.pv-block{ margin-bottom: 30px; }
.pv-block-label{
  font-family: var(--f-grotesk); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color: var(--bone-faint);
  margin-bottom: 14px; display:flex; justify-content:space-between;
}
.pv-sizes{ display:flex; gap:10px; flex-wrap:wrap; }
.pv-size-btn{
  min-width: 54px; padding: 12px 14px; text-align:center;
  border: 1px solid var(--line-strong); border-radius:2px;
  font-family: var(--f-grotesk); font-size:.78rem; letter-spacing:.05em; font-weight:600; color: var(--bone-dim);
  transition: all .3s var(--ease-soft);
}
.pv-size-btn:hover{ border-color: var(--bone-faint); color: var(--bone); }
.pv-size-btn.active{ background: var(--bone); color: var(--black); border-color: var(--bone); }
.pv-size-btn.disabled{ opacity:.28; pointer-events:none; text-decoration: line-through; }

.pv-qty{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:999px; width: fit-content; }
.pv-qty button{ width:40px; height:40px; font-size:1.1rem; color:var(--bone-dim); }
.pv-qty button:hover{ color:var(--bone); }
.pv-qty span{ width:36px; text-align:center; font-family:var(--f-grotesk); font-weight:600; }

.pv-availability{ display:flex; align-items:center; gap:10px; font-family:var(--f-grotesk); font-size:.75rem; color: var(--bone-dim); margin-bottom: 26px; }
.pv-availability .dot{ width:7px; height:7px; border-radius:50%; background:#5fbf6a; }
.pv-availability.low .dot{ background: var(--accent-bright); }

.btn-add-cart{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-family: var(--f-grotesk); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  background: var(--bone); color: var(--black);
  padding: 21px; border-radius: 999px;
  transition: background .35s, color .35s, transform .3s var(--ease-soft);
}
.btn-add-cart:hover{ background: var(--accent-bright); color:var(--bone); }
.btn-add-cart:active{ transform: scale(.98); }
.btn-add-cart.added{ background:#3a6b46; color:#fff; }
.btn-add-cart:disabled{ opacity:.4; pointer-events:none; }

.pv-meta{ margin-top: 30px; border-top:1px solid var(--line); padding-top:24px; }
.pv-meta-row{
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-grotesk); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--bone-dim);
  cursor:pointer;
}
.pv-meta-row svg{ width:14px; height:14px; transition: transform .35s var(--ease-soft); }
.pv-meta-row.open svg{ transform: rotate(45deg); }
.pv-meta-panel{
  max-height:0; overflow:hidden; transition: max-height .5s var(--ease-soft);
  font-family: var(--f-body); font-size:.85rem; color: var(--bone-dim); font-weight:300; line-height:1.8;
}
.pv-meta-panel-inner{ padding: 4px 0 18px; }

.related-strip{ padding: 90px var(--gutter) 40px; max-width: var(--container); margin:0 auto; }

/* =========================================================
   CART DRAWER
   ========================================================= */
#cart-overlay{
  position: fixed; inset:0; z-index: 900;
  background: rgba(4,3,4,.6); backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; transition: opacity .5s, visibility .5s;
}
#cart-overlay.open{ opacity:1; visibility:visible; }
#cart-drawer{
  position: fixed; top:0; right:0; bottom:0; z-index: 901;
  width: min(460px, 100vw);
  background: var(--charcoal);
  border-left: 1px solid var(--line);
  display:flex; flex-direction:column;
  transform: translateX(100%);
  /* Parked off-screen is not the same as gone: without `visibility` the
     closed drawer's buttons stay in the tab order and readable to a
     screen reader. Same pattern as #product-view -- visibility flips
     only once the slide-out has finished, so closing still animates. */
  visibility: hidden;
  transition: transform .6s var(--ease-in-out), visibility .6s;
}
#cart-drawer.open{ transform: translateX(0); visibility: visible; }
.cart-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: calc(26px + var(--sat, 0px)) var(--gutter) 26px; border-bottom:1px solid var(--line);
}
.cart-head h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.3rem; letter-spacing:.04em; }
.cart-close svg{ width:18px; height:18px; }
.cart-items{ flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 10px var(--gutter); }
.cart-item{
  display:grid; grid-template-columns: 82px 1fr auto; gap:16px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
  align-items:flex-start;
}
.cart-item .ci-media{ position:relative; aspect-ratio:4/5; border-radius:2px; overflow:hidden; background:var(--black); }
.ci-name{ font-family: var(--f-grotesk); font-weight:600; font-size:.85rem; text-transform:uppercase; }
.ci-opt{ font-family: var(--f-grotesk); font-size:.68rem; color: var(--bone-faint); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }
.ci-price{ font-family: var(--f-grotesk); font-size:.85rem; margin-top:10px; color: var(--bone-dim); }
.ci-qty{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.ci-qty button{ width:32px; height:32px; border:1px solid var(--line-strong); border-radius:50%; font-size:.8rem; }
.ci-remove{ justify-self:end; font-family:var(--f-grotesk); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; color: var(--bone-faint); }
.ci-remove:hover{ color: var(--accent-bright); }

.cart-empty{ padding: 80px 0; text-align:center; color: var(--bone-faint); font-family: var(--f-grotesk); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }

.cart-foot{ padding: 24px var(--gutter) calc(32px + var(--sab, 0px)); border-top:1px solid var(--line); }
.cart-subtotal{ display:flex; justify-content:space-between; font-family:var(--f-grotesk); font-size:.95rem; margin-bottom:18px; }
.cart-note{ font-size:.72rem; color: var(--bone-faint); margin-bottom: 18px; line-height:1.6; }

/* =========================================================
   ACCOUNT DRAWER (desktop / iPad only — same pattern as cart)
   ========================================================= */
#account-overlay{
  position: fixed; inset:0; z-index: 900;
  background: rgba(4,3,4,.6); backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; transition: opacity .5s, visibility .5s;
}
#account-overlay.open{ opacity:1; visibility:visible; }
#account-drawer{
  position: fixed; top:0; right:0; bottom:0; z-index: 901;
  width: min(460px, 100vw);
  background: var(--charcoal);
  border-left: 1px solid var(--line);
  display:flex; flex-direction:column;
  transform: translateX(100%);
  /* Parked off-screen is not the same as gone: without `visibility` the
     closed drawer's buttons stay in the tab order and readable to a
     screen reader. Same pattern as #product-view -- visibility flips
     only once the slide-out has finished, so closing still animates. */
  visibility: hidden;
  transition: transform .6s var(--ease-in-out), visibility .6s;
}
#account-drawer.open{ transform: translateX(0); visibility: visible; }
.account-head{
  display:flex; justify-content:space-between; align-items:center;
  padding: calc(26px + var(--sat, 0px)) var(--gutter) 26px; border-bottom:1px solid var(--line);
}
.account-head h3{ font-family:var(--f-display); text-transform:uppercase; font-size:1.3rem; letter-spacing:.04em; }
.account-close svg{ width:18px; height:18px; }
.account-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 24px var(--gutter) calc(32px + var(--sab, 0px)); }

/* ---------- Accès membre (js/main.js · playAccountSequence) ----------
   État au repos = état final : sans JS ou en mouvement réduit, tout est
   visible. Les entrées ne jouent que transform et opacity. */
.acc{ position:relative; display:flex; flex-direction:column; gap:22px; }
.acc-scan{ position:absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top:-24px; height:2px; z-index:5; pointer-events:none;
  background: var(--accent-bright); box-shadow: 0 0 18px 2px rgba(210,31,48,.7); opacity:0; }

.acc-stage{ perspective: 1000px; }
.acc-card{ position:relative; display:block; width:100%; aspect-ratio: 1.586; padding:0; border:0; background:none; border-radius:16px;
  color: var(--bone); cursor:pointer; text-align:left; -webkit-tap-highlight-color: transparent; transform-style: preserve-3d; }
.acc-card:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:4px; }
.acc-card-inner{ position:absolute; inset:0; transform-style: preserve-3d; transition: transform var(--m-slower) var(--m-ease-in-out); }
.acc-card[aria-pressed="true"] .acc-card-inner{ transform: rotateY(180deg); }
.acc-face{ position:absolute; inset:0; border-radius:16px; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow: 0 26px 50px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.16); }
.acc-back{ transform: rotateY(180deg); }
.acc-metal{ position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
              radial-gradient(130% 110% at 12% 0%, #2d2a31 0%, #151318 46%, #09080b 100%); }
.acc-stripe{ position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg, var(--accent-bright), var(--blood)); }
.acc-kind{ position:absolute; left:24px; top:20px; font: 700 .6rem/1 var(--f-grotesk); letter-spacing:.26em; text-transform:uppercase; color: var(--accent-bright); }
.acc-brand{ position:absolute; z-index:1; left:24px; top:40px; font-family: var(--f-display); font-size: clamp(1.35rem, 6vw, 1.85rem); line-height:.96; letter-spacing:.02em; text-transform:uppercase; }
.acc-pendant{ position:absolute; right:14px; top:13%; height:72%; width:auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.65)); pointer-events:none; }
.acc-num{ position:absolute; left:24px; bottom:46px; font: 500 .86rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.14em; color: var(--bone-dim); }
.acc-status{ position:absolute; left:24px; bottom:20px; display:flex; align-items:center; gap:8px; font: 700 .58rem/1 var(--f-grotesk); letter-spacing:.22em; text-transform:uppercase; }
.acc-status i{ width:7px; height:7px; border-radius:50%; background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-bright); }
.acc-sheen{ position:absolute; top:-25%; bottom:-25%; left:0; width:46%; pointer-events:none; mix-blend-mode: screen; opacity:0;
  background: linear-gradient(105deg, transparent 15%, rgba(255,255,255,.2) 50%, transparent 85%); transform: translateX(-130%);
  transition: opacity var(--m-fast) var(--m-ease); }
.acc-band{ position:absolute; left:0; right:0; top:22px; height:40px; background:#050406; }
.acc-back-title{ position:absolute; left:24px; right:24px; top:80px; font-family: var(--f-display); font-size:1.45rem; line-height:1; text-transform:uppercase; }
.acc-back-text{ position:absolute; left:24px; right:24px; top:114px; font: 400 .8rem/1.5 var(--f-body); color: var(--bone-dim); }
.acc-back-ref{ position:absolute; left:24px; bottom:18px; font: 700 .56rem/1 var(--f-grotesk); letter-spacing:.24em; color: var(--accent-bright); }
.acc-hint{ margin-top:-8px; text-align:center; font: 600 .6rem/1 var(--f-grotesk); letter-spacing:.2em; text-transform:uppercase; color: var(--bone-faint); }

.acc-term{ border:1px solid var(--line); background: rgba(0,0,0,.35); border-radius:4px; padding:14px 16px;
  font: 500 .72rem/1.95 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--bone-dim); }
.acc-line{ display:flex; align-items:center; gap:8px; white-space:nowrap; min-height:1.95em; }
.acc-pr{ color: var(--accent-bright); }
.acc-txt{ flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
.acc-bar{ flex:1 1 30px; height:2px; margin:0 4px; background: var(--line-strong); overflow:hidden; }
.acc-bar i{ display:block; height:100%; background: var(--accent-bright); transform-origin:left; }
.acc-res{ margin-left:auto; padding-left:8px; color: var(--bone); font-weight:700; letter-spacing:.08em; }
.acc-res.warn{ color: var(--accent-bright); }

.acc-feed{ position:relative; margin:0; aspect-ratio: 4/3; border:1px solid var(--line); border-radius:2px; overflow:hidden; background: var(--black); }
.acc-feed img{ width:100%; height:100%; object-fit:cover; display:block; }
.acc-feed-cover{ position:absolute; inset:0; background: var(--black); transform-origin: bottom; transform: scaleY(0); }
.acc-feed-line{ position:absolute; left:0; right:0; top:0; height:2px; background: var(--accent-bright); box-shadow: 0 0 14px 2px rgba(210,31,48,.75); opacity:0; }
.acc-lock{ position:absolute; left:50%; top:46%; width:32%; aspect-ratio:1; transform: translate(-50%,-50%); }
.acc-lock i{ position:absolute; width:18px; height:18px; border:0 solid var(--accent-bright); }
.acc-lock i:nth-child(1){ left:0; top:0; border-left-width:2px; border-top-width:2px; }
.acc-lock i:nth-child(2){ right:0; top:0; border-right-width:2px; border-top-width:2px; }
.acc-lock i:nth-child(3){ left:0; bottom:0; border-left-width:2px; border-bottom-width:2px; }
.acc-lock i:nth-child(4){ right:0; bottom:0; border-right-width:2px; border-bottom-width:2px; }
.acc-feed figcaption{ position:absolute; left:0; right:0; bottom:0; padding:28px 14px 12px; background: linear-gradient(180deg, transparent, rgba(8,7,10,.88));
  font: 700 .6rem/1.4 var(--f-grotesk); letter-spacing:.18em; text-transform:uppercase; color: var(--bone); }

.acc-actions{ display:flex; flex-direction:column; gap:10px; }
.acc-btn{ display:flex; justify-content:center; align-items:center; min-height:52px; border:1px solid var(--line-strong); border-radius:999px;
  color: var(--bone); text-decoration:none; font: 700 .68rem/1 var(--f-grotesk); letter-spacing:.18em; text-transform:uppercase;
  transition: transform var(--m-instant) var(--m-ease), border-color var(--m-fast) var(--m-ease), background-color var(--m-fast) var(--m-ease); }
.acc-btn.primary{ background: var(--bone); border-color: var(--bone); color: var(--black); }
.acc-btn:active{ transform: scale(var(--m-press-scale)); }
.acc-btn:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }
.acc-btn-in{ display:inline-flex; align-items:center; gap:10px; }
.acc-btn svg{ width:16px; height:16px; transition: transform var(--m-fast) var(--m-ease); }
@media (hover:hover){
  .acc-btn:hover svg{ transform: translateX(var(--m-nudge)); }
  .acc-btn:not(.primary):hover{ border-color: var(--bone-dim); }
}

/* =========================================================
   CHECKOUT
   ========================================================= */
#checkout-view{
  position: fixed; inset:0; z-index: 850; background: var(--black); overflow-y:auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transform: translateY(100%); visibility:hidden;
  transition: transform .7s var(--ease-in-out), visibility .7s;
}
#checkout-view.open{ transform: translateY(0); visibility:visible; }
.co-wrap{ max-width: 1100px; margin:0 auto; padding: 110px var(--gutter) 80px; display:grid; grid-template-columns: 1.2fr .8fr; gap: 70px; }
@media (max-width: 900px){ .co-wrap{ grid-template-columns:1fr; padding-top:90px; } }
.co-wrap h1{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(2rem,4vw,2.8rem); margin-bottom:24px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-family:var(--f-grotesk); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); }
.field input, .field select, .field textarea{
  background: var(--charcoal); border:1px solid var(--line-strong); border-radius:2px; color:var(--bone);
  padding: 15px 16px; font-size:.88rem; outline:none; transition: border-color .3s;
  font-family: inherit; resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--bone-faint); }

/* Kinshasa-only delivery notice */
.co-notice{
  display:flex; align-items:center; gap:10px;
  background: rgba(161,20,35,.12); border:1px solid rgba(161,20,35,.35); border-radius:3px;
  padding: 13px 16px; margin-bottom: 30px;
  font-family: var(--f-grotesk); font-size:.78rem; font-weight:600; color: var(--bone);
}
.co-notice svg{ flex-shrink:0; color: var(--accent-bright); }

/* Indice sous un champ invalide. Reprend la couleur d'accent et la
   graisse déjà utilisées par .co-notice -- aucun style nouveau. */
.co-field-hint{
  margin: 8px 0 0; font-family: var(--f-grotesk); font-size:.68rem;
  letter-spacing:.04em; color: var(--accent-bright);
}
.co-field-hint[hidden]{ display:none; }
#co-phone[aria-invalid="true"]{ border-color: rgba(210,31,48,.55); }

.co-block{ margin-bottom: 24px; }
.co-block-label{
  font-family: var(--f-grotesk); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color: var(--bone-faint);
  margin-bottom: 12px;
}

/* payment method pills */
.co-options{ display:flex; flex-wrap:wrap; gap:10px; }
.co-option{
  font-family: var(--f-grotesk); font-size:.78rem; font-weight:600; color: var(--bone-dim);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 12px 20px;
  transition: all .3s var(--ease-soft);
}
.co-option:hover{ color: var(--bone); border-color: var(--bone-faint); }
.co-option.active{ background: var(--bone); color: var(--black); border-color: var(--bone); }

/* delivery mode cards */
.co-delivery-options{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 480px){ .co-delivery-options{ grid-template-columns:1fr; } }
.co-delivery-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  border: 1px solid var(--line-strong); border-radius:4px; padding: 16px 18px;
  transition: all .3s var(--ease-soft); text-align:left;
}
.co-delivery-card:hover{ border-color: var(--bone-faint); }
.co-delivery-card.active{ border-color: var(--accent-bright); background: rgba(161,20,35,.1); }
.cod-name{ font-family: var(--f-grotesk); font-weight:800; letter-spacing:.08em; font-size:.82rem; color: var(--bone); }
.cod-eta{ font-family: var(--f-grotesk); font-size:.72rem; color: var(--bone-faint); }
.cod-fee{ font-family: var(--f-grotesk); font-weight:700; font-size:.9rem; color: var(--accent-bright); margin-top:4px; }

/* checkboxes */
.co-check{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  margin-bottom: 16px; font-size:.8rem; color: var(--bone-dim); line-height:1.55;
}
.co-check input{ flex-shrink:0; width:18px; height:18px; margin-top:2px; accent-color: var(--accent-bright); cursor:pointer; }
.co-terms{ font-size:.74rem; color: var(--bone-faint); margin-bottom:26px; }
.co-summary{ background: var(--charcoal); border:1px solid var(--line); border-radius:4px; padding: 30px; height: fit-content; }
.co-summary h3{ font-family:var(--f-grotesk); text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--bone-faint); margin-bottom:22px; }
.co-line-item{ display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.co-line-item .name{ color:var(--bone); }
.co-line-item .meta{ color:var(--bone-faint); font-size:.72rem; display:block; margin-top:3px; }
.co-totals{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.co-totals div{ display:flex; justify-content:space-between; margin-bottom:10px; font-size:.85rem; color:var(--bone-dim); }
.co-totals .grand{ font-size:1.1rem; color:var(--bone); font-weight:600; margin-top:8px; }
.co-disclaimer{ font-size:.7rem; color:var(--bone-faint); line-height:1.7; margin-top:20px; }

.co-confirm{ text-align:center; padding: 160px var(--gutter) 100px; }
.co-confirm .check{
  width:78px; height:78px; border-radius:50%; border:1px solid var(--accent-bright); margin:0 auto 34px;
  display:flex; align-items:center; justify-content:center;
}
.co-confirm h1{ font-family:var(--f-display); text-transform:uppercase; font-size: clamp(2rem,5vw,3.4rem); margin-bottom:18px; }
.co-confirm p{ color:var(--bone-dim); max-width:440px; margin:0 auto 34px; font-weight:300; line-height:1.7; }

/* =========================================================
   SEARCH OVERLAY
   ========================================================= */
#search-overlay{
  position: fixed; inset:0; z-index: 950; background: rgba(6,5,6,.92); backdrop-filter: blur(10px);
  opacity:0; visibility:hidden; transition: opacity .45s, visibility .45s;
  display:flex; flex-direction:column;
}
#search-overlay.open{ opacity:1; visibility:visible; }
.search-top{ padding: calc(34px + var(--sat, 0px)) var(--gutter) 34px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:24px; }
.search-top input{
  flex:1; background:transparent; border:none; outline:none; color:var(--bone);
  font-family: var(--f-display); text-transform:uppercase; font-size: clamp(1.4rem,4vw,2.4rem);
}
.search-top input::placeholder{ color: var(--bone-faint); }
/* flex-shrink:0 is load-bearing: the row is `display:flex` with a
   `flex:1` input and a 24px gap, so on a narrow phone the close button
   was being squeezed down to 12px wide with its icon spilling out. */
.search-close{ flex-shrink:0; }
.search-close svg{ width:20px; height:20px; }
.search-results{ padding: 30px var(--gutter); overflow-y:auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; flex:1; }
.search-hint{ color: var(--bone-faint); font-family:var(--f-grotesk); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.search-row{
  display:flex; align-items:center; gap:20px; padding: 16px 0; border-bottom:1px solid var(--line);
}
.search-row .sr-media{ width:60px; aspect-ratio:4/5; border-radius:2px; overflow:hidden; position:relative; flex-shrink:0; }
.search-row .sr-name{ font-family:var(--f-grotesk); font-weight:600; text-transform:uppercase; font-size:.85rem; }
.search-row .sr-cat{ font-family:var(--f-grotesk); font-size:.65rem; color:var(--bone-faint); text-transform:uppercase; margin-top:4px; }
.search-row .sr-price{ margin-left:auto; font-family:var(--f-grotesk); font-size:.85rem; color:var(--bone-dim); }

/* =========================================================
   TOAST
   ========================================================= */
#toast{
  position: fixed; bottom: calc(30px + var(--sab, 0px)); left:50%; transform: translateX(-50%) translateY(30px);
  z-index: 1200;
  background: var(--bone); color: var(--black);
  font-family: var(--f-grotesk); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding: 16px 28px; border-radius:999px;
  opacity:0; pointer-events:none;
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
  display:flex; align-items:center; gap:12px;
}
#toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* age gate */
#age-gate{
  position: fixed; inset:0; z-index: 9999; background: var(--black);
  display:flex; align-items:center; justify-content:center; text-align:center; padding: 30px;
}
#age-gate.hidden{ display:none; }
.ag-box{ max-width: 420px; }
.ag-box img{ width:76px; margin:0 auto 30px; opacity:.9; }
.ag-box h2{ font-family:var(--f-display); text-transform:uppercase; font-size:1.6rem; margin-bottom:16px; }
.ag-box p{ color:var(--bone-dim); font-size:.85rem; line-height:1.7; margin-bottom:34px; font-weight:300; }
.ag-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.ag-no{ font-family:var(--f-grotesk); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); align-self:center; }
.ag-no:hover{ color:var(--bone); }

/* =========================================================
   UTIL
   ========================================================= */
.body-locked{ overflow:hidden; }
.container{ max-width: var(--container); margin:0 auto; }
.hidden{ display:none!important; }

@media (max-width: 640px){
  .section{ padding: 90px var(--gutter); }
  .pv-wrap{ padding-top: 90px; }
  .footer-grid{ grid-template-columns: 1fr; }
}

/* Ce qui manque encore au checkout, dit sous le bouton plutôt que
   laissé à deviner devant un bouton gris. */
.co-missing{
  margin:10px 0 0; font-size:.78rem; line-height:1.5;
  color:#f2a0ab; font-family:var(--f-body);
}