@import url("fonts.css");

/* ============================================================
   SEN VALISE - design tokens
   Palette family: Cobalt + cool cream. One accent, locked.
   Radius rule: surfaces 20px / controls 12px / pills 999px.
   ============================================================ */

:root {
  --bg:          #f4f5f7;
  --bg-deep:     #eceef2;
  --surface:     #ffffff;
  --surface-2:   #fafbfc;
  --ink:         #0e1116;
  --ink-soft:    #2b323d;
  --muted:       #5b6472;
  --line:        rgba(14, 17, 22, .10);
  --line-strong: rgba(14, 17, 22, .18);

  --accent:      #1f3fe0;
  --accent-hi:   #1533c4;
  --accent-ink:  #ffffff;
  --accent-wash: rgba(31, 63, 224, .08);

  /* Seconde couleur de la marque. Elle sert par touches et jamais en aplat de
     fond : la barre du logo, les pastilles de classement, les étoiles, la
     remise de la bannière promo et le mot qui tourne dans le hero. Le bleu
     reste l'accent qui porte les actions. */
  --gold:      #efac10;
  --gold-hi:   #d0950a;
  --gold-ink:  #241a02;
  --gold-wash: rgba(239, 172, 16, .14);

  /* frosted glass, web approximation of the Apple material language */
  --glass-bg:     linear-gradient(135deg, rgb(255 255 255 / .72), rgb(255 255 255 / .46));
  --glass-border: rgb(255 255 255 / .70);
  --glass-ring:   rgba(14, 17, 22, .08);
  --glass-shadow: 0 18px 50px rgb(14 17 22 / .10);
  --glass-inset:  inset 0 1px 0 rgb(255 255 255 / .85);
  --glass-solid:  #ffffff;

  --r-lg: 20px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  --nav-h: 68px;
  --wrap: 1400px;
  --gap: clamp(1rem, 2.2vw, 1.75rem);
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --rail-gap: clamp(.85rem, 1.6vw, 1.25rem);
  /* Full-bleed rails need the gutter PLUS the centring margin of .wrap, or they
     drift left of every other section once the window passes --wrap. */
  --rail-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  --section-y: clamp(5rem, 11vh, 8.5rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .55s;

  --z-nav: 40;
  --z-drawer: 60;
  --z-grain: 70;

  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:          #0b0d12;
  --bg-deep:     #07090d;
  --surface:     #14171f;
  --surface-2:   #191d26;
  --ink:         #edeff3;
  --ink-soft:    #d3d8e1;
  --muted:       #97a0b0;
  --line:        rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);

  --accent:      #5b79ff;
  --accent-hi:   #7b92ff;
  --accent-ink:  #06080f;
  --accent-wash: rgba(91, 121, 255, .14);

  --gold:      #ffc53d;
  --gold-hi:   #ffd46b;
  --gold-ink:  #241a02;
  --gold-wash: rgba(255, 197, 61, .16);

  --glass-bg:     linear-gradient(135deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04));
  --glass-border: rgb(255 255 255 / .16);
  --glass-ring:   rgba(255, 255, 255, .06);
  --glass-shadow: 0 20px 60px rgb(0 0 0 / .48);
  --glass-inset:  inset 0 1px 0 rgb(255 255 255 / .16);
  --glass-solid:  #171b24;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg:          #0b0d12;
    --bg-deep:     #07090d;
    --surface:     #14171f;
    --surface-2:   #191d26;
    --ink:         #edeff3;
    --ink-soft:    #d3d8e1;
    --muted:       #97a0b0;
    --line:        rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .22);
    --accent:      #5b79ff;
    --accent-hi:   #7b92ff;
    --accent-ink:  #06080f;
    --accent-wash: rgba(91, 121, 255, .14);
    --gold:      #ffc53d;
    --gold-hi:   #ffd46b;
    --gold-ink:  #241a02;
    --gold-wash: rgba(255, 197, 61, .16);
    --glass-bg:     linear-gradient(135deg, rgb(255 255 255 / .11), rgb(255 255 255 / .04));
    --glass-border: rgb(255 255 255 / .16);
    --glass-ring:   rgba(255, 255, 255, .06);
    --glass-shadow: 0 20px 60px rgb(0 0 0 / .48);
    --glass-inset:  inset 0 1px 0 rgb(255 255 255 / .16);
    --glass-solid:  #171b24;
    color-scheme: dark;
  }
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* Sans cela, tout composant qui pose un display (.btn, .auth form, .panel...)
   l'emporte sur l'attribut hidden et l'élément reste affiché. */
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: var(--accent-ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: .5rem; left: .5rem;
  z-index: 100; padding: .7rem 1.1rem;
  background: var(--ink); color: var(--bg);
  border-radius: var(--r-md);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* ============================================================
   Type scale
   ============================================================ */

.display {
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 600;
}

.h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 600;
}

.h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 600;
}

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.body-sm { font-size: .92rem; color: var(--muted); line-height: 1.6; }

.eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--accent);
}

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   Layout
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3.5rem);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vh, 4.5rem); }

.section-head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); max-width: 62ch; }
.section-head .h2 + p { margin-top: 1rem; }

.rule { height: 1px; background: var(--line); border: 0; }

/* One grade across every photograph, so mixed sources read as a single brand. */
.hero__frame img,
.card__media img,
.tile--photo img,
.feature__media img,
.cat-tile img,
.promo__media img,
.strip img,
.compare .m img,
.pdp__main img,
.pdp__thumb img,
.line__img {
  filter: saturate(.7) contrast(1.04);
}
html[data-theme="dark"] .hero__frame img,
html[data-theme="dark"] .card__media img,
html[data-theme="dark"] .tile--photo img,
html[data-theme="dark"] .feature__media img,
html[data-theme="dark"] .cat-tile img,
html[data-theme="dark"] .promo__media img,
html[data-theme="dark"] .strip img,
html[data-theme="dark"] .compare .m img,
html[data-theme="dark"] .pdp__main img,
html[data-theme="dark"] .pdp__thumb img,
html[data-theme="dark"] .line__img {
  filter: saturate(.66) contrast(1.02) brightness(.92);
}

/* ============================================================
   Glass material
   web approximation of frosted glass, not an Apple package
   ============================================================ */

.glass {
  position: relative;
  isolation: isolate;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow: var(--glass-inset), 0 0 0 1px var(--glass-ring), var(--glass-shadow);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 15% 0%, rgb(255 255 255 / .40), transparent 55%);
  pointer-events: none;
}

html[data-theme="dark"] .glass::before,
.glass:where(html[data-theme="dark"] *)::before {
  background: radial-gradient(120% 80% at 15% 0%, rgb(255 255 255 / .10), transparent 55%);
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--glass-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--line-strong);
  }
  .glass::before { display: none; }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  white-space: nowrap;
  padding: .82rem 1.5rem;
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: -.01em;
  transition: transform .18s var(--ease), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}

.btn .ico { width: 1.05em; height: 1.05em; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-hi); transform: translateY(-2px); }
.btn--primary:active { transform: scale(.975); }

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--surface);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--ghost:active { transform: scale(.975); }

.btn--glass {
  border-radius: var(--r-pill);
  color: var(--ink);
  padding: .8rem 1.45rem;
}
.btn--glass:hover { transform: translateY(-2px); }
.btn--glass:active { transform: scale(.975); }

.btn--sm { padding: .6rem 1.05rem; font-size: .875rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

.btn.is-busy { pointer-events: none; }
.btn.is-busy .btn-label { opacity: .55; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 500;
  color: var(--accent);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, gap .2s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: .7rem; }
.link-arrow .ico { width: 1em; height: 1em; }

/* Les glyphes du sprite ne portent aucun attribut fill, et fill ne suit pas
   color tout seul : sans cette ligne ils retombent sur le noir initial, quelle
   que soit la couleur du texte autour. C'est ce qui laissait une flèche noire
   sur le bouton bleu et des étoiles noires sous les avis. */
.ico { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; }

/* ============================================================
   Navigation
   ============================================================ */

.nav-sentinel { position: absolute; top: 0; height: 1px; width: 100%; }

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color .3s, border-color .3s, box-shadow .3s;
}

.nav.is-stuck {
  background: var(--glass-bg);
  border-bottom-color: var(--glass-border);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--glass-ring), 0 12px 34px rgb(14 17 22 / .07);
}
html[data-theme="dark"] .nav.is-stuck { box-shadow: 0 1px 0 var(--glass-ring), 0 12px 34px rgb(0 0 0 / .4); }

@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-size: 1.06rem;
  flex: none;
}
.brand__mark { width: 26px; height: 26px; }
.brand__mark rect { fill: var(--accent); }
.brand__mark path { fill: var(--accent-ink); }
/* Le jaune est porté par la poignée, pas par la sangle : la sangle fait 1,8
   unité de haut, soit un peu plus d'un pixel une fois le mark ramené à 26 px,
   et le jaune s'y noie dans le bleu jusqu'à virer à l'ocre. La poignée déborde
   du corps, donc elle se détache sur le fond de la page comme sur le bleu. */
.brand__mark path:first-of-type { fill: var(--gold); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.9rem);
  margin-left: auto;
  font-size: .93rem;
}
.nav__links a { color: var(--ink-soft); transition: color .2s; white-space: nowrap; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }

.nav__tools { display: flex; align-items: center; gap: .4rem; flex: none; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  transition: background-color .2s, color .2s, transform .18s var(--ease);
}
.icon-btn:hover { background: var(--accent-wash); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }

.cart-btn { position: relative; }
.cart-btn__count {
  position: absolute; top: 2px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: .68rem; font-weight: 600; line-height: 1;
  transform: scale(0);
  transition: transform .3s var(--ease);
}
.cart-btn__count.is-on { transform: scale(1); }

.nav__burger { display: none; }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 auto 0;
  z-index: var(--z-nav);
  padding: 1.25rem clamp(1.15rem, 4vw, 3.5rem) 1.75rem;
  border-bottom: 1px solid var(--glass-border);
  display: none;
  flex-direction: column;
  gap: .35rem;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: .75rem .25rem;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
}

/* ============================================================
   Hero, asymmetric split
   ============================================================ */

.hero {
  position: relative;
  /* Full viewport on a laptop, capped on tall monitors so the section below
     peeks in instead of leaving a band of dead space. */
  min-height: min(calc(100dvh - var(--nav-h)), 880px);
  display: flex;
  align-items: center;
  padding-top: clamp(2rem, 5vh, 4rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
  overflow: hidden;
}

/* Three blooms. The one at 54%/80% is aimed at the spot where the glass panel
   overhangs the photo: frosted glass only reads as glass when there is colour
   underneath it to refract. */
.hero__aura {
  position: absolute;
  inset: -25% -15% -12% -25%;
  z-index: -2;
  background:
    radial-gradient(40% 44% at 20% 32%, var(--accent-wash), transparent 68%),
    radial-gradient(26% 34% at 54% 80%, rgba(31, 63, 224, .20), transparent 72%),
    radial-gradient(30% 34% at 60% 6%, rgba(31, 63, 224, .06), transparent 70%);
  pointer-events: none;
}
html[data-theme="dark"] .hero__aura {
  background:
    radial-gradient(40% 44% at 20% 32%, var(--accent-wash), transparent 68%),
    radial-gradient(26% 34% at 54% 80%, rgba(91, 121, 255, .26), transparent 72%),
    radial-gradient(30% 34% at 60% 6%, rgba(91, 121, 255, .09), transparent 70%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%;
}

.hero__copy > * + * { margin-top: 1.4rem; }
.hero__copy > .display { margin-top: 1.1rem; }
.hero__copy > .hero__pick { margin-top: 1rem; }
.hero__copy > .hero__meta { margin-top: clamp(1.6rem, 3.4vh, 2.5rem); }
.hero__copy .display { max-width: 19ch; }
/* Enfant direct : le mot qui tourne est lui aussi un span, et il doit rester
   dans le flux de sa ligne. */
.hero__copy .display > span { display: block; }
.hero__copy .lede { max-width: 44ch; }

.hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.hero__eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-pulse 3.2s var(--ease) infinite;
}
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-wash); }
  50%      { box-shadow: 0 0 0 8px transparent; }
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; padding-top: .35rem; }

/* Hairline base under the column, so the copy sits on something instead of
   floating in the middle of a full-height section. */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.5rem;
  max-width: 40ch;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.hero__swatches { display: inline-flex; align-items: center; gap: .5rem; }
.hero__swatches .sw {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--line-strong), inset 0 1px 1px rgb(255 255 255 / .3);
  transition: transform .22s var(--ease);
}
.hero__swatches:hover .sw { transform: translateY(-2px); }
.hero__swatches .sw:nth-child(2) { transition-delay: .03s; }
.hero__swatches .sw:nth-child(3) { transition-delay: .06s; }
.hero__swatches .sw:nth-child(4) { transition-delay: .09s; }
.hero__swatches .lbl {
  margin-left: .4rem;
  font-size: .875rem;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.hero__swatches:hover .lbl { color: var(--ink); border-color: var(--line-strong); }

.hero__from {
  font-size: .875rem;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.hero__from:hover { color: var(--ink); border-color: var(--line-strong); }
.hero__from .num { color: var(--ink); font-weight: 500; }

/* ---------- hero : le mot qui tourne ---------- */

/* La largeur de chaque terme est mesurée au démarrage et posée en pixels par le
   script : c'est ce qui permet de la faire glisser d'un mot à l'autre au lieu
   de laisser la ligne du titre se recomposer d'un coup. */
.rot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  transition: width .5s var(--ease);
}
.rot__stack { position: relative; display: block; white-space: nowrap; }
.rot__w {
  display: inline-block;
  color: var(--ink);
  animation: rot-in .6s var(--ease) both;
}
/* Le mot sortant est retiré du flux le temps du croisement, pour que l'entrant
   occupe seul la ligne. */
.rot__w.is-out {
  position: absolute;
  left: 0;
  top: 0;
  animation: rot-out .42s var(--ease) both;
}
@keyframes rot-in  { from { opacity: 0; transform: translateY(.55em); } }
@keyframes rot-out { to   { opacity: 0; transform: translateY(-.55em); } }

/* Le trait doré est le minuteur : c'est sa fin d'animation qui déclenche le
   mot suivant, comme les barres du carrousel. Un seul compteur, rien à
   resynchroniser, et la pause au survol suffit à figer la rotation. */
.rot__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.08em;
  height: .085em;
  min-height: 3px;
  border-radius: var(--r-pill);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  animation: rot-line 3.6s var(--ease) forwards;
}
@keyframes rot-line {
  0%   { transform: scaleX(0);   transform-origin: left center; }
  22%  { transform: scaleX(1);   transform-origin: left center; }
  78%  { transform: scaleX(1);   transform-origin: right center; }
  100% { transform: scaleX(0);   transform-origin: right center; }
}
.hero__copy:hover .rot__line,
.hero__copy:focus-within .rot__line { animation-play-state: paused; }

/* ---------- hero : rappel catalogue sous le titre ---------- */

.hero__pick {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  padding: .4rem .85rem .4rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: .875rem;
  color: var(--muted);
  transition: transform .22s var(--ease), border-color .2s, background .2s;
}
.hero__pick:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.hero__pick .n { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero__pick .s { font-variant-numeric: tabular-nums; }
.hero__pick .ico {
  width: 1rem;
  height: 1rem;
  align-self: center;
  color: var(--accent);
  transition: transform .22s var(--ease);
}
.hero__pick:hover .ico { transform: translateX(3px); }
.hero__pick.is-swap .n,
.hero__pick.is-swap .s { animation: chip-in .45s var(--ease) both; }
.hero__pick.is-swap .s { animation-delay: .06s; }

/* ---------- hero : phrase de présentation, mot à mot ---------- */

/* Le masque est porté par le conteneur et le déplacement par l'enfant : c'est
   ce qui permet au mot de sortir du bas de sa propre boîte sans rogner la
   ligne voisine. */
/* La phrase n'entre pas en bloc : ce sont ses mots qui portent l'entrée. Deux
   animations superposées donneraient un flottement. */
.hero__copy > .hero__lede { animation: none; }

.hero__lede .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero__lede .w > i {
  display: inline-block;
  font-style: normal;
  animation: word-up .72s var(--ease) both;
  animation-delay: calc(var(--i) * 32ms + 380ms);
}
@keyframes word-up { from { opacity: 0; transform: translateY(105%); } }

.hero__media { position: relative; }

.hero__frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-deep);
  box-shadow: 0 34px 70px -34px rgb(14 17 22 / .42), 0 0 0 1px var(--line);
}
html[data-theme="dark"] .hero__frame {
  box-shadow: 0 34px 80px -30px rgb(0 0 0 / .72), 0 0 0 1px var(--line);
}
/* Slides are stacked and cross-faded. The long transform is a slow drift that
   runs while a slide is on screen, so the hero is never completely still. */
.hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .9s var(--ease), transform 7s linear;
}
.hero__frame img.is-on { opacity: 1; transform: scale(1); }

/* Overlaid rather than placed under the frame: below it, the controls fall past
   the fold on a 900px-tall window, and a carousel you cannot see is not one. */
.hero__nav {
  position: absolute;
  top: clamp(.8rem, 1.8vw, 1.2rem);
  right: clamp(.8rem, 1.8vw, 1.2rem);
  display: flex;
  gap: .3rem;
  padding: .45rem .55rem;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgb(255 255 255 / .9), rgb(255 255 255 / .78));
}
html[data-theme="dark"] .hero__nav {
  background: linear-gradient(135deg, rgb(20 23 31 / .88), rgb(20 23 31 / .76));
}

.hero__dot {
  width: 34px;
  height: 18px;
  padding: 0;
  display: grid;
  align-items: center;
}

@media (max-width: 620px) {
  .hero__dot { width: 26px; }
}
.hero__dot .bar {
  position: relative;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  overflow: hidden;
}
.hero__dot .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
/* The bar is the clock: the slide advances on its animationend, so pausing the
   animation on hover pauses the carousel too, with no separate timer. */
.hero__dot.is-on .bar::after { animation: hero-progress var(--hero-dur, 5.5s) linear forwards; }
.hero__media:hover .hero__dot.is-on .bar::after,
.hero__media:focus-within .hero__dot.is-on .bar::after { animation-play-state: paused; }
.hero__dot:hover .bar { background: var(--muted); }

@keyframes hero-progress { to { transform: scaleX(1); } }

.hero__chip.is-swap .v,
.hero__chip.is-swap .s { animation: chip-in .45s var(--ease) both; }
.hero__chip.is-swap .s { animation-delay: .06s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(7px); } }

/* Darkens the foot of the photo so the pale glass panel has an edge to read against. */
.hero__frame::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(to top, rgb(8 10 14 / .5), transparent);
  pointer-events: none;
}

.hero__chip {
  position: absolute;
  left: clamp(-2.5rem, -3vw, -1rem);
  bottom: clamp(1.5rem, 5vw, 2.9rem);
  border-radius: var(--r-lg);
  padding: 1.05rem 3.2rem 1.1rem 1.35rem;
  display: grid;
  gap: .12rem;
  min-width: 236px;
  color: var(--ink);
  transition: transform .28s var(--ease), box-shadow .28s;
}
/* Sits over photography, so the panel is denser than the rest of the glass. */
.hero__chip {
  background: linear-gradient(135deg, rgb(255 255 255 / .93), rgb(255 255 255 / .84));
}
html[data-theme="dark"] .hero__chip {
  background: linear-gradient(135deg, rgb(20 23 31 / .90), rgb(20 23 31 / .80));
}
.hero__chip:hover { transform: translateY(-3px); }
.hero__chip .k { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero__chip .v { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
.hero__chip .s { font-size: .84rem; color: var(--ink-soft); margin-top: .15rem; }
.hero__chip .ico {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  transform: translateY(-50%);
  color: var(--accent);
  transition: transform .22s var(--ease);
}
.hero__chip:hover .ico { transform: translateY(-50%) translateX(4px); }

@media (max-width: 940px) {
  .hero { min-height: 0; padding-top: clamp(1.75rem, 5vh, 3rem); }
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__copy .display { max-width: 100%; }
  .hero__meta { max-width: none; }
  .hero__frame { aspect-ratio: 4 / 3; }
  .hero__chip { left: 1rem; }
}

@media (max-width: 460px) {
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__meta { flex-direction: column; align-items: flex-start; gap: .85rem; }
  .hero__chip { left: .75rem; right: .75rem; min-width: 0; }
}

/* ============================================================
   Service band
   ============================================================ */

.service-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.service-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3.5vw, 2.25rem);
}
.service {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.service .ico { color: var(--accent); margin-top: .12rem; }
.service b { display: block; font-weight: 500; font-size: .97rem; letter-spacing: -.01em; }
.service span { font-size: .87rem; color: var(--muted); }

@media (max-width: 780px) {
  .service-band__grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ============================================================
   Product grid + cards
   ============================================================ */

.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 48px rgb(14 17 22 / .10);
}
html[data-theme="dark"] .card:hover { box-shadow: 0 22px 48px rgb(0 0 0 / .5); }

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg-deep);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__flag {
  position: absolute;
  top: .85rem; left: .85rem;
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .02em;
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.05rem 1.15rem 1.25rem;
  flex: 1;
}
.card__title { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.card__title h3 { font-size: 1.02rem; font-weight: 500; letter-spacing: -.02em; }
.card__price { font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.card__meta { font-size: .85rem; color: var(--muted); }

.swatches { display: flex; gap: .4rem; margin-top: auto; padding-top: .4rem; }
.swatch {
  width: 15px; height: 15px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .35);
}

.card__actions { padding: 0 1.15rem 1.15rem; }

/* ============================================================
   Bento
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.85rem, 1.6vw, 1.25rem);
}

.tile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .5rem;
  min-height: 240px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.tile h3 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; }
.tile p { font-size: .9rem; color: var(--muted); max-width: 34ch; }

.tile--photo { border: 0; padding: 0; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--photo .tile__caption {
  position: relative;
  margin: auto clamp(.85rem, 1.6vw, 1.15rem) clamp(.85rem, 1.6vw, 1.15rem);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  display: grid;
  gap: .25rem;
}
.tile--photo .tile__caption {
  background: linear-gradient(135deg, rgb(255 255 255 / .93), rgb(255 255 255 / .84));
}
html[data-theme="dark"] .tile--photo .tile__caption {
  background: linear-gradient(135deg, rgb(20 23 31 / .90), rgb(20 23 31 / .80));
}
.tile--photo .tile__caption h3 { font-size: 1.02rem; }
.tile--photo .tile__caption p { font-size: .85rem; color: var(--ink-soft); }

.card__flag {
  background: linear-gradient(135deg, rgb(255 255 255 / .94), rgb(255 255 255 / .86));
  color: var(--ink);
}
html[data-theme="dark"] .card__flag {
  background: linear-gradient(135deg, rgb(20 23 31 / .92), rgb(20 23 31 / .82));
}

.tile--accent {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(150deg, var(--accent), var(--accent-hi));
  border-color: transparent;
  color: var(--accent-ink);
}
.tile--accent p { color: rgb(255 255 255 / .78); }
html[data-theme="dark"] .tile--accent p { color: rgb(6 8 15 / .72); }

.tile--stat { background: var(--surface-2); }
.tile__stat {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: .3rem;
}

.tile--wide { grid-column: span 4; }
.tile--half { grid-column: span 3; }
.tile--third { grid-column: span 2; }
.tile--tall { grid-row: span 2; min-height: 100%; }

@media (max-width: 1040px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--wide, .tile--half, .tile--third { grid-column: span 1; }
  .tile--tall { grid-row: auto; min-height: 240px; }
  .tile--lead { grid-column: span 2; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .tile--lead { grid-column: span 1; }
}

/* ============================================================
   Feature split
   ============================================================ */

.feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
.feature__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--bg-deep);
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__copy > * + * { margin-top: 1.15rem; }

.spec-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  margin-top: 1.75rem;
}
.spec-tile {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1rem 1.1rem;
}
.spec-tile .v { font-size: 1.35rem; font-weight: 600; letter-spacing: -.03em; }
.spec-tile .k { font-size: .82rem; color: var(--muted); margin-top: .15rem; }

@media (max-width: 940px) {
  .feature { grid-template-columns: 1fr; }
}

/* ============================================================
   Colorway rail, horizontal scroll snap
   ============================================================ */

/* ------------------------------------------------------------
   Marquee: the two bands that scroll on their own, left to right.
   The group is cloned until it covers twice the viewport, then the track
   is translated by exactly one group width, so the loop has no seam.
   ------------------------------------------------------------ */

.marquee {
  overflow: hidden;
  /* Items bleed past both edges, so the ends fade instead of being cut. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-x var(--marquee-dur, 40s) linear infinite;
}

.marquee__group {
  display: flex;
  align-items: stretch;
  gap: var(--rail-gap);
  padding-right: var(--rail-gap);
  /* Room for the card hover lift and its shadow, which overflow would clip. */
  padding-block: .5rem 1.1rem;
}

@keyframes marquee-x { to { transform: translateX(var(--marquee-shift, -50%)); } }

/* Hover and focus stop the band so a card can actually be clicked. The button
   in the section header is the explicit control, for keyboard and touch. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }

/* Explicit width, not flex-basis: the track is width:max-content, and under
   intrinsic sizing the items would otherwise be measured on their content. */
.marquee__group > .card,
.marquee__group > .rail__item { flex: none; }
.marquee__group > .card { width: clamp(248px, 27vw, 316px); }
.marquee__group > .rail__item { width: clamp(230px, 26vw, 320px); }

.marquee-btn { min-width: 7.5rem; }

.rail__item {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
}
.rail__swatch { height: clamp(190px, 22vw, 260px); position: relative; }
.rail__swatch::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 25% 12%, rgb(255 255 255 / .38), transparent 58%);
}
.rail__label { padding: 1rem 1.15rem 1.2rem; display: grid; gap: .2rem; }
.rail__label b { font-weight: 500; letter-spacing: -.015em; }
.rail__label span { font-size: .85rem; color: var(--muted); }

.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.rail-nav { display: flex; gap: .4rem; }

@media (max-width: 620px) {
  .rail-head { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .rail-head .link-arrow { white-space: nowrap; }
}

/* ============================================================
   Quotes
   ============================================================ */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 1.8vw, 1.4rem);
}
.quote {
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote blockquote { font-size: 1.02rem; line-height: 1.5; letter-spacing: -.015em; }
.quote figcaption { margin-top: auto; display: grid; gap: .1rem; }
.quote figcaption b { font-weight: 500; font-size: .93rem; }
.quote figcaption span { font-size: .83rem; color: var(--muted); }
.quote .stars { display: flex; gap: .12rem; color: var(--gold); }
.quote .stars .ico { width: 1rem; height: 1rem; }

@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* ============================================================
   CTA band + form
   ============================================================ */

.cta-band {
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 8% 0%, var(--accent-wash), transparent 60%),
    var(--surface);
}
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } }

.field { display: grid; gap: .45rem; }
.field label { font-size: .87rem; font-weight: 500; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.field .hint { font-size: .8rem; color: var(--muted); }
.field .err { font-size: .82rem; color: #c02637; font-weight: 500; min-height: 1.1em; }
html[data-theme="dark"] .field .err { color: #ff8b98; }
.field.is-invalid input { border-color: #c02637; }
html[data-theme="dark"] .field.is-invalid input { border-color: #ff8b98; }

.form-row { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.form-row .field { flex: 1 1 220px; }

/* ============================================================
   Footer
   ============================================================ */

.footer {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: clamp(2.75rem, 6vw, 4rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3rem);
}
.footer__col h4 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); font-weight: 500; margin-bottom: .9rem;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer__col a { font-size: .92rem; color: var(--ink-soft); transition: color .2s; }
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .85rem;
  color: var(--muted);
}
@media (max-width: 780px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   Cart drawer
   ============================================================ */

.scrim {
  position: fixed; inset: 0;
  z-index: var(--z-drawer);
  background: rgb(8 10 14 / .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-drawer) + 1);
  width: min(430px, 100vw);
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .45s var(--ease);
  border-left: 1px solid var(--glass-border);
  visibility: hidden;
}
.drawer.is-open { transform: translateX(0); visibility: visible; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }

.drawer__body { flex: 1; overflow-y: auto; padding: 1.05rem 1.25rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.15rem 1.25rem 1.4rem; display: grid; gap: .85rem; }

.line {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: .9rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--line);
}
.line:last-child { border-bottom: 0; }
.line__img { width: 68px; height: 68px; border-radius: var(--r-md); object-fit: cover; background: var(--bg-deep); }
.line__info { display: grid; gap: .2rem; align-content: start; }
.line__info b { font-weight: 500; font-size: .95rem; letter-spacing: -.015em; }
.line__info span { font-size: .82rem; color: var(--muted); }
.line__end { display: grid; justify-items: end; gap: .5rem; }
.line__price { font-weight: 600; font-size: .95rem; }

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.stepper button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: background-color .2s, color .2s;
}
.stepper button:hover { background: var(--accent-wash); color: var(--ink); }
.stepper button:active { transform: scale(.9); }
.stepper .ico { width: .85rem; height: .85rem; }
.stepper output { min-width: 26px; text-align: center; font-size: .9rem; font-weight: 500; }

.totals { display: grid; gap: .45rem; font-size: .92rem; }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; padding-top: .5rem; border-top: 1px solid var(--line); }

.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .85rem;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1rem;
}
.empty__icon {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
}
.empty__icon .ico { width: 1.6rem; height: 1.6rem; }
.empty h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.empty p { color: var(--muted); font-size: .93rem; max-width: 34ch; }

/* ============================================================
   Skeleton loading
   ============================================================ */

.skeleton {
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.skeleton__block {
  background: linear-gradient(90deg, var(--bg-deep) 25%, var(--surface) 50%, var(--bg-deep) 75%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton__media { aspect-ratio: 1 / 1; }
.skeleton__body { padding: 1.05rem 1.15rem 1.4rem; display: grid; gap: .55rem; }
.skeleton__line { height: 12px; border-radius: var(--r-sm); }
.skeleton__line.is-short { width: 45%; }

@keyframes shimmer { to { background-position: -220% 0; } }

/* ============================================================
   Toast
   ============================================================ */

.toast-stack {
  position: fixed;
  left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: calc(var(--z-drawer) + 5);
  display: grid;
  gap: .5rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  border-radius: var(--r-pill);
  padding: .8rem 1.15rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  animation: toast-in .4s var(--ease) both;
}
.toast .ico { color: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ============================================================
   Catalogue page
   ============================================================ */

.page-head { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.25rem); }
.page-head .display { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
/* Les pages intérieures s'ouvrent comme le hero, au lieu d'apparaître d'un bloc. */
.page-head > * { animation: rise .8s var(--ease) both; animation-delay: var(--d, 0ms); }

.filterbar {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-pill);
  padding: .55rem .6rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.filterbar { animation: rise .8s var(--ease) both; animation-delay: 160ms; }

.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip {
  padding: .5rem .95rem;
  border-radius: var(--r-pill);
  font-size: .88rem;
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .18s var(--ease);
}
.chip:hover { background: var(--accent-wash); }
.chip:active { transform: scale(.94); }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Le remplacement des cartes se fait à grille masquée : sans ce fondu, les
   anciens articles disparaissent d'un coup au changement de filtre. */
.grid-products { transition: opacity .18s var(--ease); }
.grid-products.is-swapping { opacity: 0; }

.result-count.is-new { animation: count-pop .35s var(--ease); }
@keyframes count-pop { from { opacity: 0; transform: translateY(-4px); } }

.sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-right: .35rem;
}
.sort label { font-size: .85rem; color: var(--muted); }
.sort select {
  padding: .5rem .8rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: .88rem;
}
.sort select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }

.result-count { font-size: .87rem; color: var(--muted); margin-bottom: 1rem; }

/* ============================================================
   Product detail page
   ============================================================ */

.pdp {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--section-y);
}
.pdp__gallery { display: grid; gap: .8rem; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.pdp__main {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}
.pdp__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.pdp__thumb {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: var(--bg-deep);
  padding: 0;
  transition: border-color .2s, transform .2s var(--ease);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp__thumb[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.pdp__thumb:hover { transform: translateY(-2px); }

.pdp__info > * + * { margin-top: 1.25rem; }
.pdp__price { font-size: 1.6rem; font-weight: 600; letter-spacing: -.03em; }

.option-group { display: grid; gap: .6rem; }
.option-group__label { font-size: .87rem; font-weight: 500; color: var(--ink-soft); }
.option-group__label em { font-style: normal; color: var(--muted); font-weight: 400; }
.colorways { display: flex; gap: .6rem; flex-wrap: wrap; }
.colorway {
  width: 38px; height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  padding: 0;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.colorway:hover { transform: translateY(-2px); }
.colorway[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

.pdp__buy { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.pdp__buy .btn { flex: 1 1 200px; }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  padding: 1.05rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 500;
  font-size: .97rem;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .ico { transition: transform .3s var(--ease); color: var(--muted); }
.accordion details[open] summary .ico { transform: rotate(180deg); }
.accordion .acc-body { padding-bottom: 1.15rem; color: var(--muted); font-size: .93rem; max-width: 62ch; }

@media (max-width: 940px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__gallery { position: static; }
}

/* ============================================================
   Cart page
   ============================================================ */

.cart-layout {
  display: grid;
  grid-template-columns: 1.6fr .8fr;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  padding-bottom: var(--section-y);
}
.cart-panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
}
.summary {
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  display: grid;
  gap: 1.1rem;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}
.summary h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }
.vault-cta {
  display: grid;
  gap: .35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.trust-row { display: grid; gap: .5rem; font-size: .85rem; color: var(--muted); }
.trust-row div { display: flex; align-items: center; gap: .5rem; }
.trust-row .ico { width: 1rem; height: 1rem; color: var(--accent); }

@media (max-width: 940px) {
  .cart-layout { grid-template-columns: 1fr; }
  .summary { position: static; }
}

/* ============================================================
   Announcement bar
   ============================================================ */

.announce {
  background: var(--ink);
  color: rgb(255 255 255 / .8);
  font-size: .86rem;
}
html[data-announce-off] .announce { display: none; }
.announce b { color: #fff; font-weight: 500; }
html[data-theme="dark"] .announce {
  background: var(--surface-2);
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
html[data-theme="dark"] .announce b { color: var(--ink); }

.announce__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding-block: .6rem;
  padding-right: 2.75rem;
  text-align: center;
}
.announce .ico { width: 1.05rem; height: 1.05rem; opacity: .75; }

.announce__close {
  position: absolute;
  right: clamp(.5rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  padding: .35rem;
  border-radius: var(--r-sm);
  color: inherit;
  opacity: .6;
  transition: opacity .2s, background-color .2s;
}
.announce__close:hover { opacity: 1; background: rgb(255 255 255 / .14); }
html[data-theme="dark"] .announce__close:hover { background: var(--line); }
.announce__close .ico { width: 1rem; height: 1rem; opacity: 1; }

@media (max-width: 640px) {
  .announce__inner { font-size: .78rem; line-height: 1.35; }
}

/* ============================================================
   Category tiles
   ============================================================ */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.85rem, 1.6vw, 1.25rem);
}

.cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-deep);
  border: 1px solid var(--line);
}
.cat-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.cat-tile:hover img { transform: scale(1.045); }

.cat-tile__cap {
  position: absolute;
  left: .8rem;
  right: .8rem;
  bottom: .8rem;
  border-radius: var(--r-md);
  padding: .75rem .9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  /* Sits over photography, so the panel is denser than the rest of the glass. */
  background: linear-gradient(135deg, rgb(255 255 255 / .93), rgb(255 255 255 / .84));
}
html[data-theme="dark"] .cat-tile__cap {
  background: linear-gradient(135deg, rgb(20 23 31 / .9), rgb(20 23 31 / .8));
}
.cat-tile__cap b { display: block; font-weight: 500; letter-spacing: -.015em; }
.cat-tile__cap span { font-size: .79rem; color: var(--muted); }
.cat-tile__cap .ico { width: 1rem; height: 1rem; color: var(--accent); transition: transform .22s var(--ease); }
.cat-tile:hover .cat-tile__cap .ico { transform: translateX(3px); }

@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .cat-tile { aspect-ratio: 4 / 3; } }

/* ============================================================
   Best sellers rail
   ============================================================ */

/* Rank pills are solid: a frosted panel would not survive being read at a glance. */
.card__flag--rank {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}
.card__flag--rank::before { display: none; }
/* Outranks the dark-theme .card__flag rule, which is more specific. */
html[data-theme="dark"] .card__flag--rank {
  background: var(--gold);
  color: var(--gold-ink);
}

/* ============================================================
   Promo banner
   ============================================================ */

.promo {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  min-height: clamp(340px, 42vw, 440px);
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    radial-gradient(70% 120% at 8% 100%, rgba(31, 63, 224, .55), transparent 62%),
    #0c0f16;
  color: #fff;
}

.promo__media { position: relative; align-self: stretch; }
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.promo__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0c0f16 2%, rgb(12 15 22 / .55) 42%, rgb(12 15 22 / .1) 100%);
}

.promo__copy {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  display: grid;
  justify-items: start;
  gap: 1.15rem;
}
.promo__eyebrow {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 500;
  color: #9db0ff;
}
.promo__copy .h2 { max-width: 16ch; }
.promo__copy p { color: rgb(255 255 255 / .74); max-width: 42ch; line-height: 1.55; }

.promo__price { display: flex; align-items: baseline; gap: .5rem .7rem; flex-wrap: wrap; }
.promo__price .now { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.promo__price .was { color: rgb(255 255 255 / .5); text-decoration: line-through; white-space: nowrap; }
.promo__price .save { white-space: nowrap; }
.promo__price .save {
  font-size: .78rem;
  padding: .25rem .6rem;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 500;
}

.countdown { display: flex; gap: .45rem; }
.countdown div {
  min-width: 60px;
  padding: .55rem .5rem;
  text-align: center;
  border-radius: var(--r-md);
  background: rgb(255 255 255 / .1);
  border: 1px solid rgb(255 255 255 / .16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.countdown .n { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.countdown .u { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / .55); }

.promo .btn--ghost { background: #fff; border-color: #fff; color: #0c0f16; }
.promo .btn--ghost:hover { border-color: #fff; }

@media (max-width: 820px) {
  .promo { grid-template-columns: 1fr; min-height: 0; }
  .promo__media { order: -1; height: clamp(200px, 46vw, 300px); }
  .promo__media::after { background: linear-gradient(180deg, rgb(12 15 22 / .1) 30%, #0c0f16 99%); }
}

/* ============================================================
   Format comparison
   ============================================================ */

.compare-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.compare { width: 100%; min-width: 780px; border-collapse: collapse; font-size: .93rem; }
.compare th, .compare td {
  padding: .9rem 1.15rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 500;
  color: var(--muted);
  background: var(--surface-2);
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare tbody tr { transition: background-color .2s; }
.compare tbody tr:hover { background: var(--accent-wash); }
.compare .m { display: flex; align-items: center; gap: .75rem; }
.compare .m img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.compare .m b { font-weight: 500; letter-spacing: -.015em; }
.compare .m span { display: block; font-size: .78rem; color: var(--muted); }
.compare .yes { color: var(--accent); }
.compare .no { color: var(--muted); }
.compare td.price { font-weight: 500; font-variant-numeric: tabular-nums; }
.compare-note { margin-top: .9rem; }

/* ============================================================
   Lifestyle strip
   ============================================================ */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.2vw, 1rem);
}
.strip figure {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-deep);
}
/* Staggered so the band reads as a composition, not four boxes in a row. */
.strip figure:nth-child(even) { margin-top: clamp(1rem, 3.5vw, 3rem); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.strip figure:hover img { transform: scale(1.04); }
/* These four come from different shoots with wildly different white balance.
   Monochrome is the cheapest way to make them read as one editorial band. */
.strip img { filter: grayscale(1) contrast(1.06); }
html[data-theme="dark"] .strip img { filter: grayscale(1) contrast(1.02) brightness(.88); }

@media (max-width: 760px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip figure:nth-child(even) { margin-top: clamp(.8rem, 5vw, 2rem); }
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq__head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq__head .lede { margin-top: 1rem; }
.faq__head .link-arrow { margin-top: 1.5rem; }

@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

/* Alternating band, so a long page has a rhythm instead of one flat surface. */
.section--alt {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ============================================================
   Account area: auth, vault, settings
   ============================================================ */

/* Says out loud what the README says: nothing here is real. */
.notice {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .95rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.notice .ico { color: var(--accent); margin-top: .15rem; }
.notice b { font-weight: 500; }

.auth {
  max-width: 470px;
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}
.auth__card {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: grid;
  gap: 1.1rem;
}
.auth__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .25rem;
  border-radius: var(--r-pill);
  background: var(--bg-deep);
}
html[data-theme="dark"] .auth__switch { background: var(--surface-2); }
.auth__switch button {
  padding: .6rem 1rem;
  border-radius: var(--r-pill);
  font-size: .92rem;
  font-weight: 500;
  color: var(--muted);
  transition: background-color .2s, color .2s;
}
.auth__switch button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(14 17 22 / .12);
}
html[data-theme="dark"] .auth__switch button[aria-selected="true"] { background: var(--bg); }
.auth form { display: grid; gap: 1rem; }
.auth__alt { font-size: .87rem; color: var(--muted); text-align: center; }

/* ---------- vault ---------- */

.vault {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
@media (max-width: 900px) { .vault { grid-template-columns: 1fr; } }

.vault__panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  gap: 1.15rem;
}
.vault__balance {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
}
.vault__k { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.progress {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--bg-deep);
  overflow: hidden;
}
html[data-theme="dark"] .progress { background: var(--surface-2); }
.progress__fill {
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--accent);
  transition: width .6s var(--ease);
}
.progress__legend {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .87rem;
  color: var(--muted);
  margin-top: .55rem;
}
.progress__legend b { color: var(--ink); font-weight: 500; }

.amount-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.amount-chips button {
  padding: .45rem .85rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  transition: border-color .2s, background-color .2s, color .2s;
}
.amount-chips button:hover { border-color: var(--ink); }

.methods { display: flex; flex-wrap: wrap; gap: .45rem; }
.methods label {
  position: relative;
  padding: .55rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: .88rem;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.methods input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
/* is-on is set in JS so the state survives browsers without :has(). */
.methods label.is-on,
.methods label:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
}
.methods label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.tx { display: grid; gap: 0; }
.tx__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.tx__row:last-child { border-bottom: 0; }
.tx__row b { font-weight: 500; }
.tx__row span { font-size: .82rem; color: var(--muted); display: block; }
.tx__amount { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.tx__amount.is-out { color: var(--muted); }

/* ---------- settings ---------- */

.acct {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.acct__side { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: .15rem; }
.acct__side a {
  padding: .6rem .85rem;
  border-radius: var(--r-md);
  font-size: .93rem;
  color: var(--muted);
  transition: background-color .2s, color .2s;
}
.acct__side a:hover { background: var(--accent-wash); color: var(--ink); }
.acct__side hr { margin: .6rem .85rem; border: 0; border-top: 1px solid var(--line); }
.acct__main { display: grid; gap: clamp(2rem, 5vw, 3.25rem); }
.acct__block { display: grid; gap: 1.15rem; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
.acct__block > h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }

@media (max-width: 860px) {
  .acct { grid-template-columns: 1fr; }
  .acct__side {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .35rem;
  }
  .acct__side a { white-space: nowrap; border: 1px solid var(--line); }
  .acct__side hr { display: none; }
}

.panel {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  gap: 1.1rem;
}

.addr-list { display: grid; gap: .85rem; }
.addr {
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 1rem 1.15rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.addr.is-default { border-color: var(--accent); background: var(--accent-wash); }
.addr__info b { font-weight: 500; }
.addr__info p { font-size: .88rem; color: var(--muted); margin-top: .2rem; }
.addr__tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .68rem;
  letter-spacing: .04em;
  vertical-align: 1px;
}
.addr__acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.addr__acts button {
  font-size: .84rem;
  color: var(--muted);
  padding: .3rem .55rem;
  border-radius: var(--r-sm);
  transition: color .2s, background-color .2s;
}
.addr__acts button:hover { color: var(--ink); background: var(--bg-deep); }
html[data-theme="dark"] .addr__acts button:hover { background: var(--surface-2); }

.geo-out {
  font-size: .86rem;
  color: var(--muted);
  min-height: 1.2em;
  line-height: 1.5;
}
.geo-out.is-err { color: #c02637; }
html[data-theme="dark"] .geo-out.is-err { color: #ff8b98; }

/* ---------- orders ---------- */

.order {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.15rem, 3vw, 1.6rem);
  display: grid;
  gap: 1.1rem;
}
.order__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.order__head b { font-weight: 500; letter-spacing: -.01em; }
.order__head span { font-size: .85rem; color: var(--muted); }
.order__total { font-variant-numeric: tabular-nums; font-weight: 600; }

.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.track__step { display: grid; gap: .45rem; }
.track__bar { height: 4px; border-radius: var(--r-pill); background: var(--line); }
.track__step.is-done .track__bar { background: var(--accent); }
.track__step span { font-size: .76rem; color: var(--muted); }
.track__step.is-done span { color: var(--ink); }
.track__hint { font-size: .87rem; color: var(--muted); }

.order__lines { display: grid; gap: .6rem; }
.order__line {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .89rem;
}
.order__line img { width: 42px; height: 42px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.order__line .q { color: var(--muted); }
.order__line .p { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .track { grid-template-columns: repeat(2, 1fr); gap: .6rem .4rem; }
}

/* ============================================================
   Vault landing page
   ============================================================ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.step {
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  display: grid;
  gap: .6rem;
  align-content: start;
}
.step__n {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}
.step h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.02em; }
.step p { color: var(--muted); font-size: .93rem; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

.sim {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: start;
}
@media (max-width: 900px) { .sim { grid-template-columns: 1fr; } }

.sim input[type="range"] { width: 100%; accent-color: var(--accent); }
.sim__big {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.05;
}

/* Une barre par versement : la répétition dit « en plusieurs fois »
   plus vite qu'une phrase. */
.sim__bars { display: flex; gap: 5px; align-items: flex-end; }
.sim__bars span {
  flex: 1;
  height: 46px;
  border-radius: var(--r-sm);
  background: var(--accent);
  transform-origin: bottom;
  animation: bar-in .45s var(--ease) both;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes bar-in { from { opacity: 0; transform: scaleY(.15); } }

.coffre-card {
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  display: grid;
  gap: 1.1rem;
  /* Plus dense que le verre courant : la carte flotte sur le halo coloré. */
  background: linear-gradient(135deg, rgb(255 255 255 / .92), rgb(255 255 255 / .8));
}
html[data-theme="dark"] .coffre-card {
  background: linear-gradient(135deg, rgb(20 23 31 / .9), rgb(20 23 31 / .78));
}
.coffre-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.coffre-card__row span { font-size: .85rem; color: var(--muted); }
.coffre-card__tx { display: grid; gap: .5rem; font-size: .86rem; }
.coffre-card__tx div { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.coffre-card__tx b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ============================================================
   Reveal on scroll
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

.hero__copy > *, .hero__media {
  animation: rise .85s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .drawer { transition: none; }

  /* No auto-scroll. The band falls back to a normal swipeable rail, and the
     clones are dropped so the scrollbar reflects the real content. */
  .marquee {
    overflow-x: auto;
    padding-inline: var(--rail-pad);
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .marquee__track { animation: none; width: auto; }
  .marquee__group[aria-hidden="true"] { display: none; }
  .marquee-btn { display: none; }

  /* The hero stops rotating on its own. The bars stay, filled, and still work
     as buttons, so every model remains reachable. */
  .hero__frame img { transition: opacity .001ms; transform: none; }
  .hero__dot.is-on .bar::after { animation: none; transform: scaleX(1); }
  .hero__chip.is-swap .v, .hero__chip.is-swap .s { animation: none; }

  /* Le mot ne tourne plus : il reste sur la première catégorie, souligné, et
     la phrase de présentation s'affiche d'un bloc. Le lien sous le titre
     continue de mener à cette catégorie. */
  .rot { transition: none; }
  .rot__w, .hero__pick.is-swap .n, .hero__pick.is-swap .s { animation: none; }
  .rot__line { animation: none; transform: scaleX(1); }
  .hero__lede .w > i { animation: none; }
}