/* ==========================================================================
   Maison ANCLAIR — feuille de style principale
   Architecture en cascade : tokens → reset → typo → layout → composants
   Mobile-first, BEM léger, variables CSS
   ========================================================================== */

/* L'attribut [hidden] doit TOUJOURS cacher l'élément, même sur flex/grid */
[hidden] { display: none !important; }

/* ---------- 01. TOKENS ----------------------------------------------------- */
:root {
  /* Couleurs — Direction artistique Heritage Horloger */
  --c-ink:        #0e0e0e;       /* noir profond */
  --c-ink-soft:   #1a1a1a;
  --c-paper:      #eaeae5;       /* blanc cassé tirant légèrement gris (warm) */
  --c-paper-soft: #f0f0eb;       /* dégradé clair vers les bandeaux colorés */
  --c-paper-pure: #ffffff;
  --c-mist:       #dededa;       /* fond section alternatif */
  --c-line:       #cdcdc7;       /* hairlines */
  --c-mute:       #6e6e6a;       /* texte secondaire */
  --c-silver:     #b8b8b2;
  --c-silver-2:   #8e8e88;

  /* Bordeaux Anclair — signature horlogère */
  --c-bordeaux:        #6e1423;  /* rouge bordeaux profond */
  --c-bordeaux-dark:   #480c17;
  --c-bordeaux-soft:   #8b2638;

  /* Alias rétro-compat (toutes les règles existantes) */
  --c-green:        var(--c-bordeaux);
  --c-green-dark:   var(--c-bordeaux-dark);
  --c-green-soft:   var(--c-bordeaux-soft);

  /* Or champagne — accents heritage */
  --c-gold:         #a37e2c;
  --c-gold-light:   #c4a05a;
  --c-gold-soft:    #d9b97a;

  --c-accent:       var(--c-bordeaux);

  /* Typographies */
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-sans:    "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Échelle typo (modular scale ~ 1.25) */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;
  --fs-80: 5rem;

  /* Espacements (multiples de 4) */
  --s-4: .25rem;  --s-8: .5rem;  --s-12: .75rem;
  --s-16: 1rem;   --s-24: 1.5rem; --s-32: 2rem;
  --s-48: 3rem;   --s-64: 4rem;   --s-96: 6rem;
  --s-128: 8rem;

  /* Disposition */
  --container-max: 1320px;
  --container-pad: clamp(1rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 600ms;

  /* Header */
  --header-h: 92px;

  /* Lettrage */
  --tracking-wide: .14em;
  --tracking-xwide: .22em;
}

/* ---------- TOKENS — MODE SOMBRE ----------------------------------------- */
:root[data-theme="dark"] {
  --c-ink:        #ececea;
  --c-ink-soft:   #d4d4cf;
  --c-paper:      #0e1014;       /* nuit profonde, légèrement bleutée */
  --c-paper-soft: #15171c;
  --c-paper-pure: #1a1c22;       /* surface élevée (cartes, header) */
  --c-mist:       #1f2229;
  --c-line:       #2a2d36;
  --c-mute:       #9a9aa0;
  --c-silver:     #6f7177;
  --c-silver-2:   #8a8c92;

  /* Bordeaux et or — éclairés pour le contraste sur fond sombre */
  --c-bordeaux:        #b73044;
  --c-bordeaux-dark:   #7a1828;
  --c-bordeaux-soft:   #c84a5e;

  --c-gold:         #c4a05a;
  --c-gold-light:   #d9b97a;
  --c-gold-soft:    #e0c98c;

  color-scheme: dark;
}

/* Désactive le flash au premier paint */
html { background: var(--c-paper); }

/* ---------- 02. RESET ------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-sans);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.55;
  font-size: var(--fs-16);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 3px;
}

ul, ol { list-style: none; padding: 0; margin: 0; }

input {
  font: inherit; color: inherit;
  background: transparent; border: 0;
}

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

/* ---------- 03. TYPO ------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-green);
  margin: 0 0 var(--s-16);
  display: inline-flex; align-items: center; gap: var(--s-8);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 24px; height: 1px;
  background: var(--c-gold);
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.08;
  margin: 0;
}

h2 { font-size: clamp(2rem, 3.6vw + 1rem, var(--fs-64)); }
h3 { font-size: var(--fs-28); line-height: 1.2; }
h4 { font-size: var(--fs-18); letter-spacing: 0; }

p { margin: 0; }

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--f-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-bottom: 4px;
  color: var(--c-green-dark);
  border-bottom: 1px solid var(--c-gold);
  transition: color var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out);
}
.link-underline::after {
  content: "›";
  font-size: 1.4em;
  line-height: 0;
  transition: transform var(--d-base) var(--ease-out);
  color: var(--c-gold);
}
.link-underline:hover { color: var(--c-green); border-color: var(--c-green); }
.link-underline:hover::after { transform: translateX(4px); color: var(--c-green); }

/* ---------- 04. LAYOUT ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section-head {
  text-align: left;
  margin-bottom: var(--s-48);
}
.section-head--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-24);
}

/* ---------- 05. COMPOSANTS — Boutons -------------------------------------- */
.btn {
  --btn-bg: var(--c-green);
  --btn-fg: var(--c-paper-pure);
  --btn-border: var(--c-green);

  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  font-family: var(--f-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 1.05rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: 999px;            /* pilule heritage horloger */
  transition: background var(--d-base) var(--ease-out),
              color var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
  cursor: pointer;
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary:hover {
  --btn-bg: var(--c-green-dark);
  --btn-border: var(--c-green-dark);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-ink);
}
.btn--ghost:hover {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-paper-pure);
  --btn-border: var(--c-ink);
}
.btn--sm { padding: .75rem 1.4rem; font-size: var(--fs-12); }
.btn svg { width: 1em; height: 1em; transition: transform var(--d-base) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* icon button */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--c-ink);
  transition: opacity var(--d-fast) var(--ease-out);
  position: relative;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { opacity: .6; }
.cart-count {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-family: var(--f-sans); font-size: 10px; font-weight: 500;
  background: var(--c-green); color: var(--c-paper-pure);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}

/* ---------- Announcement -------------------------------------------------- */
.announcement {
  background: linear-gradient(180deg, var(--c-bordeaux) 0%, var(--c-bordeaux-dark) 100%);
  color: var(--c-paper-pure);
  overflow: hidden;
  border-bottom: 1px solid var(--c-gold);
  box-shadow: inset 0 -1px 0 rgba(195, 160, 90, .25);
}
.announcement__track {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-12) var(--s-24);
  padding: .75rem var(--container-pad);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--c-paper);
}
.announcement__sep { color: var(--c-gold-light); opacity: .9; }
@media (max-width: 720px) {
  .announcement__sep { display: none; }
  .announcement__track { gap: 4px; }
  .announcement__item:not(:first-child) { display: none; }
}

/* ---------- Header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-paper-pure);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--d-base) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--c-line), 0 8px 24px -16px rgba(10,10,10,.18);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-16);
  min-height: var(--header-h);
  padding-block: var(--s-12);
}

.site-header__logo {
  justify-self: center;
  text-align: center;
  line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* Décoration dorée masquée — remplacée par l'image de logo réelle */
.site-header__logo::before { display: none; }

/* Logo image au-dessus du wordmark ANCLAIR */
.logo-mark__img {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 4px;
  filter: drop-shadow(0 1px 2px rgba(10,10,10,.08));
  transition: filter var(--d-fast) var(--ease-out), transform var(--d-fast);
}
.site-header__logo:hover .logo-mark__img {
  transform: scale(1.04);
}
:root[data-theme="dark"] .logo-mark__img {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
@media (max-width: 720px) {
  .logo-mark__img { height: 28px; }
}
.logo-mark {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--fs-22);
  letter-spacing: .48em;
  text-indent: .48em; /* compense le tracking pour centrage optique */
  color: var(--c-green-dark);
}
.logo-mark--lg { font-size: var(--fs-28); letter-spacing: .38em; color: var(--c-paper-pure); }
.logo-tagline {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-gold);
}

.primary-nav ul {
  display: flex; gap: var(--s-32);
}
.primary-nav a {
  font-size: var(--fs-13);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  color: var(--c-ink);
  transition: color var(--d-fast) var(--ease-out);
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--c-gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--d-base) var(--ease-out);
}
.primary-nav a:hover { color: var(--c-green); }
.primary-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.site-header__actions {
  justify-self: end;
  display: flex; align-items: center; gap: var(--s-4);
}
.site-header__burger { display: none; }

@media (max-width: 960px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-header__burger { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--c-paper);
    transform: translateX(-100%);
    transition: transform var(--d-slow) var(--ease-in-out);
    padding: var(--s-48) var(--container-pad);
    z-index: 40;
  }
  .primary-nav.is-open { transform: translateX(0); }
  .primary-nav ul { flex-direction: column; gap: var(--s-24); }
  .primary-nav a { font-size: var(--fs-22); font-family: var(--f-display); text-transform: none; letter-spacing: 0; }
}

/* ---------- Hero ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h) - 36px);
  display: flex; align-items: end;
  color: var(--c-paper-pure);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.05);
  animation: heroZoom 12s var(--ease-out) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(10,10,10,.08) 0%,
      rgba(10,10,10,.0) 25%,
      rgba(72,12,23,.35) 70%,
      rgba(72,12,23,.7) 100%),
    linear-gradient(110deg,
      rgba(72,12,23,.55) 0%,
      rgba(72,12,23,.25) 35%,
      rgba(10,10,10,.0) 65%);
}

.hero__content {
  padding-block: var(--s-96) var(--s-128);
  max-width: 720px;
}
.hero .eyebrow { color: var(--c-gold-soft); letter-spacing: var(--tracking-xwide); }
.hero__title {
  font-size: clamp(2.6rem, 6vw + 1rem, var(--fs-80));
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin-bottom: var(--s-24);
}
.hero__lede {
  font-size: var(--fs-18);
  max-width: 48ch;
  color: rgba(255,255,255,.85);
  margin-bottom: var(--s-32);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-16); }
.hero .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-paper-pure);
  --btn-border: rgba(255,255,255,.7);
}
.hero .btn--ghost:hover {
  --btn-bg: var(--c-paper-pure);
  --btn-fg: var(--c-green-dark);
  --btn-border: var(--c-paper-pure);
}
.hero .btn--primary {
  --btn-bg: var(--c-green);
  --btn-fg: var(--c-paper-pure);
  --btn-border: var(--c-green);
}
.hero .btn--primary:hover {
  --btn-bg: var(--c-green-dark);
  --btn-border: var(--c-green-dark);
}

.hero__scroll {
  position: absolute; right: var(--container-pad); bottom: var(--s-32);
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-size: var(--fs-12); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--c-paper-pure); opacity: .8;
}
.hero__scroll svg { width: 16px; height: 16px; }

/* ---------- Banderole défilante ----------------------------------------- */
.marquee {
  overflow: hidden;
  padding: clamp(0.7rem, 1.5vw, 1.1rem) 0;
  background: var(--c-paper-pure);
  border-block: 1px solid var(--c-line);
  white-space: nowrap;
  position: relative;
}
.marquee::before,
.marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 1; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--c-paper-pure), transparent); }
.marquee::after  { right: 0; background: linear-gradient(-90deg, var(--c-paper-pure), transparent); }
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  /* !important pour outrepasser la règle globale prefers-reduced-motion */
  animation: anclair-marquee 28s linear infinite !important;
  will-change: transform;
}
.marquee__item {
  font-family: var(--f-display);
  font-size: clamp(0.95rem, 1.6vw, 1.35rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-bordeaux-dark);
  white-space: nowrap;
}
.marquee__sep {
  color: var(--c-gold);
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  line-height: 1;
}
@keyframes anclair-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused !important; }

/* Mode sombre */
:root[data-theme="dark"] .marquee { background: var(--c-paper-pure); border-color: var(--c-line); }
:root[data-theme="dark"] .marquee::before { background: linear-gradient(90deg, var(--c-paper-pure), transparent); }
:root[data-theme="dark"] .marquee::after  { background: linear-gradient(-90deg, var(--c-paper-pure), transparent); }
:root[data-theme="dark"] .marquee__item   { color: var(--c-gold-light); }

/* ---------- Collections --------------------------------------------------- */
.collections { padding-block: var(--s-128); }
.collections__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .collections__grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--s-32); }
}

.collection-card { display: block; color: var(--c-ink); }
.collection-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-mist);
}
.collection-card__media img {
  width: 100%; height: 100%;
  transition: transform 900ms var(--ease-out);
  filter: saturate(.95);
}
.collection-card:hover .collection-card__media img { transform: scale(1.04); }
.collection-card__body {
  display: flex; flex-direction: column; gap: var(--s-8);
  padding-block: var(--s-24);
}
.collection-card__body h3 { font-size: clamp(1.6rem, 2.5vw, var(--fs-36)); color: var(--c-green-dark); }
.collection-card__body p { color: var(--c-mute); max-width: 42ch; }
.collection-card__body .link-underline {
  margin-top: var(--s-12);
  color: var(--c-green);
  border-color: var(--c-gold);
}
.collection-card:hover .collection-card__body .link-underline { color: var(--c-green-dark); }

/* ---------- Product Grid -------------------------------------------------- */
.product-grid-section { padding-block: var(--s-96); background: var(--c-paper); }
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-24) var(--s-16);
}
@media (min-width: 720px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-48) var(--s-32); }
}
@media (min-width: 1080px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}

.product-card { list-style: none; }
.product-card__inner { display: block; color: var(--c-ink); }
.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-mist);
}
.product-card__media img {
  width: 100%; height: 100%;
  transition: transform 800ms var(--ease-out);
}
.product-card__inner:hover .product-card__media img { transform: scale(1.045); }

.product-card__overlay {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-16) var(--s-16);
  background: linear-gradient(180deg, transparent, rgba(72,12,23,.82));
  color: var(--c-paper-pure);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.product-card__price { color: var(--c-gold-soft); font-weight: 500; }
.product-card__body h3 { color: var(--c-green-dark); }
.product-card__inner:hover .product-card__overlay {
  opacity: 1;
  transform: translateY(0);
}
.product-card__price {
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.product-card__body {
  padding-top: var(--s-16);
  display: flex; flex-direction: column; gap: 4px;
}
.product-card__body h3 {
  font-size: var(--fs-22);
}
.product-card__body p {
  font-size: var(--fs-13);
  color: var(--c-mute);
}

/* ---------- Bandeau "Carte SD" — l'écrin numérique --------------------- */
.sd-card-section {
  padding-block: var(--s-96);
  background:
    radial-gradient(ellipse at 15% 20%, rgba(195,160,90,.12), transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(195,160,90,.08), transparent 55%),
    linear-gradient(150deg, #0e0608 0%, #1a0a10 40%, #0a0405 100%);
  color: var(--c-paper);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Fondu doux haut et bas pour transition avec sections voisines */
.sd-card-section::before,
.sd-card-section::after {
  content: ""; position: absolute; left: 0; right: 0; height: 80px;
  pointer-events: none; z-index: 0;
}
.sd-card-section::before { top: 0;    background: linear-gradient(180deg, var(--c-paper) 0%, transparent 100%); opacity: .25; }
.sd-card-section::after  { bottom: 0; background: linear-gradient(0deg,   var(--c-paper) 0%, transparent 100%); opacity: .25; }
.sd-card-section > * { position: relative; z-index: 1; }

.sd-card__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-48);
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
}
@media (min-width: 880px) {
  .sd-card__grid { grid-template-columns: 1fr 1fr; gap: var(--s-96); }
}

/* Image carte SD (sans fond) : halo doré flottant */
.sd-card__media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-32);
  aspect-ratio: 1 / 1;
}
.sd-card__media::before {
  content: ""; position: absolute; inset: 10%;
  background: radial-gradient(circle, rgba(195,160,90,.35), transparent 65%);
  filter: blur(40px);
  z-index: 0;
}
.sd-card__media::after {
  content: ""; position: absolute;
  width: min(70%, 360px); height: min(70%, 360px);
  border: 1px solid rgba(195,160,90,.25);
  border-radius: 50%;
  z-index: 0;
  animation: sd-orbit 14s linear infinite;
}
@keyframes sd-orbit {
  to { transform: rotate(360deg); }
}
.sd-card__media img {
  position: relative; z-index: 2;
  width: clamp(220px, 60%, 380px);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.6))
          drop-shadow(0 0 25px rgba(195,160,90,.25));
  animation: sd-float 5s ease-in-out infinite;
}
@keyframes sd-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

/* Bloc texte */
.sd-card__copy { color: var(--c-paper); }
.sd-card__copy .eyebrow {
  color: var(--c-gold-soft);
  margin-bottom: var(--s-16);
}
.sd-card__copy .eyebrow::before { background: var(--c-gold); }
.sd-card__copy h2 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  color: var(--c-paper-pure);
  margin-bottom: var(--s-24);
}
.sd-card__copy > p {
  font-size: var(--fs-16);
  line-height: 1.7;
  color: rgba(247,247,245,.82);
  max-width: 56ch;
}
.sd-card__copy strong { color: var(--c-gold-light); font-weight: 500; }

.sd-card__features {
  list-style: none;
  margin: var(--s-32) 0 0;
  padding: 0;
  display: flex; flex-direction: column; gap: var(--s-8);
}
.sd-card__features li {
  display: flex; align-items: baseline; gap: var(--s-8);
  font-size: var(--fs-14);
  color: rgba(247,247,245,.78);
  letter-spacing: .03em;
}
.sd-card__features span {
  color: var(--c-gold);
  font-family: var(--f-display);
  font-size: var(--fs-22);
  line-height: 1;
}

/* ---------- Editorial ----------------------------------------------------- */
.editorial {
  padding-block: var(--s-128);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(195,160,90,.15), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(195,160,90,.10), transparent 55%),
    linear-gradient(155deg,
      var(--c-bordeaux-dark) 0%,
      #5d1220 30%,
      var(--c-bordeaux) 60%,
      var(--c-bordeaux-dark) 100%);
  color: var(--c-paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* fondus en haut et en bas pour adoucir le passage avec le reste de la page */
.editorial::before,
.editorial::after {
  content: ""; position: absolute; left: 0; right: 0; height: 80px;
  pointer-events: none; z-index: 0;
}
.editorial::before { top: 0;    background: linear-gradient(180deg, var(--c-paper) 0%, transparent 100%); opacity: .35; }
.editorial::after  { bottom: 0; background: linear-gradient(0deg,   var(--c-paper) 0%, transparent 100%); opacity: .35; }
.editorial > * { position: relative; z-index: 1; }
.editorial .eyebrow { color: var(--c-gold-soft); }
.editorial h2 { color: var(--c-paper-pure); }
.editorial p { color: rgba(247,247,245,.82) !important; }
.editorial .btn--ghost {
  --btn-fg: var(--c-paper-pure);
  --btn-border: var(--c-gold);
}
.editorial .btn--ghost:hover {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-green-dark);
  --btn-border: var(--c-gold);
}
.editorial__grid {
  display: grid; gap: var(--s-48);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .editorial__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-96); }
}
.editorial__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.editorial__media img { width: 100%; height: 100%; transition: transform 1s var(--ease-out); }
.editorial__media:hover img { transform: scale(1.03); }
.editorial__copy { display: flex; flex-direction: column; gap: var(--s-24); align-items: start; }
.editorial__copy p { color: var(--c-ink-soft); max-width: 50ch; }
.editorial__copy h2 { max-width: 16ch; }

/* ---------- État vide d'une collection — "Nouveautés à venir" ----------- */
.empty-collection {
  max-width: 540px;
  margin: var(--s-32) auto 0;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) var(--s-24);
  border: 1px solid var(--c-line);
  background: var(--c-paper-pure);
  position: relative;
}
.empty-collection::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(195, 160, 90, .25);
  pointer-events: none;
}
.empty-collection > svg {
  width: 52px; height: 52px;
  color: var(--c-gold);
  margin-bottom: var(--s-16);
  position: relative; z-index: 1;
}
.empty-collection .eyebrow {
  position: relative; z-index: 1;
  color: var(--c-bordeaux);
}
.empty-collection h2 {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  color: var(--c-bordeaux-dark);
  margin: var(--s-8) 0 var(--s-16);
  position: relative; z-index: 1;
}
.empty-collection__msg {
  color: var(--c-ink-soft);
  font-size: var(--fs-14);
  line-height: 1.7;
  margin: 0 auto var(--s-24);
  max-width: 44ch;
  position: relative; z-index: 1;
}
.empty-collection__cta {
  display: flex; gap: var(--s-12);
  justify-content: center;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}

/* Mode sombre */
:root[data-theme="dark"] .empty-collection {
  background: var(--c-paper-pure);
  border-color: var(--c-line);
}
:root[data-theme="dark"] .empty-collection h2 { color: var(--c-gold-light); }

/* ---------- "Voir plus" sous Collections — petite ligne dorée ----------- */
.see-more-gold {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-16);
  margin: var(--s-32) auto 0;
  text-align: center;
  max-width: 720px;
}
.see-more-gold__filet {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 50%, transparent);
  opacity: .55;
}
.see-more-gold a {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(.95rem, 1.4vw, 1.15rem);
  color: var(--c-gold);
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color var(--d-fast) var(--ease-out), letter-spacing var(--d-base);
}
.see-more-gold a:hover {
  color: var(--c-gold-light);
  letter-spacing: .08em;
}
@media (max-width: 720px) {
  .see-more-gold a { white-space: normal; }
  .see-more-gold { flex-wrap: wrap; }
}

/* Mode sombre */
:root[data-theme="dark"] .see-more-gold a       { color: var(--c-gold-light); }
:root[data-theme="dark"] .see-more-gold a:hover { color: var(--c-gold-soft); }

/* ---------- CTA "Voir plus d'images" sous la grille ---------------------- */
.see-more-cta {
  display: flex; justify-content: center;
  margin-top: var(--s-48);
}

/* ---------- Galerie — composition « mosaïque planète » ------------------- */
.gallery-page { padding-block: var(--s-48) var(--s-96); }
.gallery-intro {
  text-align: center;
  max-width: 60ch; margin: 0 auto var(--s-48);
}
.gallery-intro h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--c-bordeaux-dark);
  margin-bottom: var(--s-12);
}
.gallery-intro p { color: var(--c-mute); }

/* Vidéo coulisses — format natif, vidéo entière visible */
.gallery-video {
  width: 100%;
  max-width: 360px;
  margin: var(--s-48) auto;
}
.gallery-video video {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  box-shadow: 0 18px 40px -16px rgba(10,10,10,.25);
}
.gallery-video__caption {
  text-align: center;
  color: var(--c-mute);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--s-12);
}

/* Mosaïque centrée : 1 image centrale + 5 autour */
.gallery-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: var(--s-16);
  max-width: 1100px;
  margin: 0 auto;
}
.gallery-cluster__item {
  overflow: hidden;
  position: relative;
  background: var(--c-mist);
  cursor: zoom-in;
}
.gallery-cluster__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 800ms var(--ease-out), filter 400ms var(--ease-out);
}
.gallery-cluster__item:hover img {
  transform: scale(1.04);
  filter: brightness(.85);
}

/* Disposition :
   .item-tl (top-left)  .item-tc (top-center)  .item-tr (top-right)
   .item-ml (mid-left)  .item-center           .item-mr (mid-right)
   .item-bc (bottom-center, optionnel)
*/
.gallery-cluster__item--tl     { grid-column: 1; grid-row: 1; aspect-ratio: 1/1; }
.gallery-cluster__item--tc     { grid-column: 2; grid-row: 1; aspect-ratio: 4/3; }
.gallery-cluster__item--tr     { grid-column: 3; grid-row: 1; aspect-ratio: 1/1; }
.gallery-cluster__item--center {
  grid-column: 2; grid-row: 2;
  aspect-ratio: 1/1;
  border: 1px solid var(--c-gold);
  box-shadow: 0 20px 60px -20px rgba(195,160,90,.4);
}
.gallery-cluster__item--ml { grid-column: 1; grid-row: 2; aspect-ratio: 3/4; }
.gallery-cluster__item--mr { grid-column: 3; grid-row: 2; aspect-ratio: 3/4; }

/* Étiquette élégante sur l'image centrale */
.gallery-cluster__item--center::after {
  content: "Au cœur de la Maison";
  position: absolute;
  inset: auto 0 var(--s-12) 0;
  text-align: center;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-gold);
  background: linear-gradient(to top, rgba(10,10,10,.55), transparent);
  padding: var(--s-16) var(--s-12) var(--s-4);
  pointer-events: none;
}

@media (max-width: 720px) {
  .gallery-cluster {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .gallery-cluster__item--tl, .gallery-cluster__item--tc, .gallery-cluster__item--tr,
  .gallery-cluster__item--center, .gallery-cluster__item--ml, .gallery-cluster__item--mr {
    grid-column: auto; grid-row: auto; aspect-ratio: 1/1;
  }
  .gallery-cluster__item--center { grid-column: 1 / -1; aspect-ratio: 4/3; }
}

.gallery-instagram-cta {
  display: flex; justify-content: center;
  margin-top: var(--s-64);
}

/* ---------- Calibre suisse — viewer 3D interactif ----------------------- */
.editorial__media--eta { aspect-ratio: auto; background: transparent; overflow: visible; }

.calibre-3d {
  margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-16);
}
.calibre-3d__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background:
    radial-gradient(ellipse at center, rgba(195,160,90,.14), transparent 65%),
    radial-gradient(ellipse at 30% 20%, rgba(195,160,90,.08), transparent 50%),
    linear-gradient(140deg, #160810 0%, #0a0507 70%, #160810 100%);
  border: 1px solid rgba(195,160,90,.22);
  overflow: hidden;
}
.calibre-3d__stage model-viewer {
  width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
}

/* Poster / loader pendant le chargement */
.calibre-3d__loader {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(195,160,90,.15), transparent 60%),
    linear-gradient(140deg, #160810, #0a0507);
}
.calibre-3d__loader-text {
  font-family: var(--f-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  position: relative;
  padding-left: 30px;
}
.calibre-3d__loader-text::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 20px; height: 20px;
  border: 1.5px solid rgba(195,160,90,.3);
  border-top-color: var(--c-gold);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: calibre-spin 1.2s linear infinite;
}
@keyframes calibre-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Bouton "Réinitialiser la vue" en haut à droite */
.calibre-3d__reset {
  position: absolute;
  top: var(--s-12); right: var(--s-12);
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(195,160,90,.4);
  border-radius: 999px;
  color: var(--c-gold-soft);
  cursor: pointer;
  transition: background var(--d-fast), color var(--d-fast), transform var(--d-fast);
  z-index: 4;
}
.calibre-3d__reset:hover {
  background: var(--c-gold);
  color: var(--c-bordeaux-dark);
  transform: rotate(-90deg);
}
.calibre-3d__reset svg { width: 18px; height: 18px; }

.calibre-3d__caption {
  text-align: center;
  padding-top: var(--s-8);
}
.calibre-3d__caption .eyebrow {
  justify-content: center;
  margin: 0 0 var(--s-8);
  color: var(--c-gold);
}
.calibre-3d__caption .eyebrow::before { background: var(--c-gold); }
.calibre-3d__caption p {
  font-size: var(--fs-13);
  color: var(--c-paper);
  opacity: .9;
  letter-spacing: .04em;
}
.calibre-3d__caption strong { color: var(--c-gold-soft); font-weight: 500; }
.calibre-3d__hint {
  margin-top: var(--s-8) !important;
  font-size: 10px !important;
  letter-spacing: var(--tracking-xwide) !important;
  text-transform: uppercase;
  color: var(--c-gold-soft) !important;
  opacity: .6 !important;
}

.calibre-anatomy {
  margin: 0;
  display: flex; flex-direction: column;
  gap: var(--s-16);
}
.calibre-anatomy__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background:
    radial-gradient(ellipse at center, rgba(195,160,90,.10), transparent 65%),
    linear-gradient(140deg, #160810 0%, #0a0507 70%, #160810 100%);
  border: 1px solid rgba(195,160,90,.22);
  overflow: hidden;
  isolation: isolate;
}
.calibre-anatomy__img {
  position: absolute;
  top: 50%; left: 50%;
  width: 70%; height: 70%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 40px rgba(195,160,90,.18));
  animation: calibre-breathe 6s ease-in-out infinite;
  z-index: 1;
}
@keyframes calibre-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
  50%      { transform: translate(-50%, -50%) scale(1.03) rotate(0.6deg); }
}

/* Annotations : points pulsants + lignes + étiquettes */
.calibre-anatomy__dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 10px; height: 10px;
  background: var(--c-gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: 0 0 0 6px rgba(195,160,90,.18);
}
.calibre-anatomy__dot::before {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%; border: 1px solid rgba(195,160,90,.5);
  animation: calibre-pulse 2.5s ease-in-out infinite;
}
@keyframes calibre-pulse {
  0%, 100% { transform: scale(1);   opacity: .8; }
  50%      { transform: scale(1.5); opacity: 0; }
}

.calibre-anatomy__line {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
}
.calibre-anatomy__line::before {
  content: "";
  position: absolute;
  left: var(--x1); top: var(--y1);
  width: 2px;
  height: 2px;
  background: var(--c-gold);
  transform-origin: 0 0;
  box-shadow: 0 0 8px rgba(195,160,90,.5);
  /* Calculs trigonométriques approximés via clamp/atan2 difficile sans JS,
     on utilise une astuce simple : un trait incliné dont l'extrémité est l'étiquette */
  width: calc(100% * 0.5); /* sera réajusté par JS si besoin */
  display: none; /* Désactivé : on dessine via SVG ci-dessous */
}

/* Lignes dorées en SVG : générées par script (simple injection) */
.calibre-anatomy__svg-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
}
.calibre-anatomy__svg-lines line {
  stroke: var(--c-gold);
  stroke-width: 1;
  opacity: .65;
  filter: drop-shadow(0 0 4px rgba(195,160,90,.5));
}

.calibre-anatomy__label {
  position: absolute;
  left: var(--x); top: var(--y);
  display: flex; flex-direction: column;
  gap: 2px;
  z-index: 5;
  pointer-events: none;
  color: var(--c-paper);
  font-family: var(--f-sans);
  max-width: 120px;
}
.calibre-anatomy__label[style*="--align:left"]  { transform: translate(0, 0); text-align: left; }
.calibre-anatomy__label[style*="--align:right"] { transform: translate(-100%, 0); text-align: right; }

.calibre-anatomy__num {
  font-family: var(--f-display);
  font-size: var(--fs-22);
  color: var(--c-gold);
  line-height: 1;
}
.calibre-anatomy__name {
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-paper-pure);
  margin-top: 2px;
}
.calibre-anatomy__desc {
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  opacity: .8;
}

.calibre-anatomy__caption {
  text-align: center;
  padding-top: var(--s-8);
}
.calibre-anatomy__caption .eyebrow {
  justify-content: center;
  margin: 0 0 var(--s-8);
  color: var(--c-gold);
}
.calibre-anatomy__caption .eyebrow::before { background: var(--c-gold); }
.calibre-anatomy__caption p:last-child {
  font-size: var(--fs-13);
  color: var(--c-paper);
  opacity: .85;
  letter-spacing: .04em;
}
.calibre-anatomy__caption strong { color: var(--c-gold-soft); font-weight: 500; }

@media (max-width: 720px) {
  .calibre-anatomy__num   { font-size: var(--fs-18); }
  .calibre-anatomy__name  { font-size: 10px; }
  .calibre-anatomy__desc  { font-size: 9px; }
}

/* ---------- Avis Google ------------------------------------------------- */
.reviews {
  padding-block: var(--s-64);
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-32);
  max-width: 1000px;
  margin-inline: auto;
  align-items: center;
}
@media (min-width: 760px) {
  .reviews__grid { grid-template-columns: 1fr 1.4fr; gap: var(--s-64); }
}

/* Bloc gauche — note Google */
.reviews__score { text-align: center; }
.reviews__google {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-16);
}
.reviews__google-logo { width: 22px; height: 22px; }
.reviews__google-label {
  font-family: var(--f-sans);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-mute);
}
.reviews__rating {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--f-display);
  line-height: 1;
  color: var(--c-bordeaux-dark);
}
.reviews__number {
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: 500;
}
.reviews__over {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--c-mute);
  margin-left: 4px;
}
.reviews__stars {
  display: inline-flex; gap: 4px;
  margin: var(--s-12) 0 var(--s-16);
  color: var(--c-gold);
}
.reviews__stars svg { width: 22px; height: 22px; fill: currentColor; }
.reviews__link {
  font-size: var(--fs-12);
}

/* Bloc droite — citation */
.reviews__quote {
  position: relative;
  padding: var(--s-32);
  background: var(--c-paper-pure);
  border-left: 3px solid var(--c-gold);
  margin: 0;
}
.reviews__mark {
  position: absolute;
  top: -10px; left: var(--s-16);
  width: 36px; height: 36px;
  color: var(--c-gold);
  background: var(--c-paper);
  padding: 2px;
  opacity: .9;
}
.reviews__text {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-16);
  quotes: "«" "»";
}
.reviews__text::before { content: "«\00A0"; color: var(--c-gold); }
.reviews__text::after  { content: "\00A0»"; color: var(--c-gold); }
.reviews__author {
  display: flex; flex-direction: column;
  gap: 2px;
  font-family: var(--f-sans);
}
.reviews__author strong {
  font-size: var(--fs-14);
  color: var(--c-bordeaux-dark);
  font-weight: 500;
}
.reviews__author span {
  font-size: var(--fs-12);
  color: var(--c-mute);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

:root[data-theme="dark"] .reviews { background: var(--c-paper); border-top-color: var(--c-line); }
:root[data-theme="dark"] .reviews__rating { color: var(--c-gold-light); }
:root[data-theme="dark"] .reviews__quote { background: var(--c-paper-pure); }
:root[data-theme="dark"] .reviews__mark { background: var(--c-paper); }
:root[data-theme="dark"] .reviews__author strong { color: var(--c-gold-light); }

/* ---------- Services ------------------------------------------------------ */
.services {
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--s-64);
}
.services__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-32);
}
@media (min-width: 960px) { .services__row { grid-template-columns: repeat(4, 1fr); } }

.service { display: flex; flex-direction: column; gap: var(--s-8); }
.service svg { width: 28px; height: 28px; color: var(--c-green); }
.service h4 { color: var(--c-ink); }
.service h4 { font-family: var(--f-sans); font-weight: 500; font-size: var(--fs-14); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.service p { font-size: var(--fs-13); color: var(--c-mute); }

/* ---------- Footer -------------------------------------------------------- */
.site-footer {
  background: var(--c-ink);
  color: var(--c-paper);
  padding-top: var(--s-96);
  margin-top: 0;
  border-top: 3px solid var(--c-gold);
}
.site-footer .logo-mark--lg { color: var(--c-paper-pure); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-48);
  padding-bottom: var(--s-64);
}
@media (min-width: 880px) {
  .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: var(--s-48); }
}
.site-footer__brand p {
  margin-top: var(--s-16);
  color: rgba(250,250,247,.7);
  max-width: 38ch;
  font-size: var(--fs-14);
}
.site-footer__col h5,
.site-footer__newsletter h5 {
  font-family: var(--f-sans); font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--s-16);
}
.site-footer__col li { margin-bottom: var(--s-8); }
.site-footer__col a {
  font-size: var(--fs-14);
  color: rgba(250,250,247,.85);
  transition: color var(--d-fast) var(--ease-out);
}
.site-footer__col a:hover { color: var(--c-paper-pure); }

.site-footer__newsletter p {
  font-size: var(--fs-14);
  color: rgba(250,250,247,.7);
  max-width: 38ch;
  margin-bottom: var(--s-16);
}
.newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: var(--s-8);
}
.newsletter input {
  padding: .65rem 0;
  font-size: var(--fs-14);
  color: var(--c-paper);
}
.newsletter input::placeholder { color: rgba(250,250,247,.5); }
.newsletter .btn--primary {
  --btn-bg: transparent;
  --btn-fg: var(--c-gold);
  --btn-border: transparent;
  padding: 0 .25rem;
  border-radius: 0;
}
.newsletter .btn--primary:hover {
  --btn-bg: transparent;
  --btn-fg: var(--c-gold-light);
  transform: translateX(2px);
}
.newsletter__msg {
  grid-column: 1 / -1;
  font-size: var(--fs-12); color: var(--c-silver-2);
  margin-top: var(--s-8); min-height: 1em;
}

.site-footer__bottom {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: var(--s-16);
  padding-block: var(--s-32);
  border-top: 1px solid rgba(250,250,247,.12);
  font-size: var(--fs-12);
  color: rgba(250,250,247,.6);
}
.site-footer__legal { display: flex; gap: var(--s-24); flex-wrap: wrap; }
.site-footer__legal a { transition: color var(--d-fast) var(--ease-out); }
.site-footer__legal a:hover { color: var(--c-paper-pure); }

.site-footer__social { display: flex; gap: var(--s-16); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  color: rgba(250,250,247,.7);
  transition: color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.site-footer__social a:hover { color: var(--c-paper-pure); transform: translateY(-1px); }
.site-footer__social svg { width: 18px; height: 18px; }

/* ---------- Cart drawer — panier fonctionnel ----------------------------- */
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(460px, 95vw);
  background: var(--c-paper-pure);
  z-index: 70;
  transform: translateX(100%);
  transition: transform var(--d-slow) var(--ease-in-out);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--c-line);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-24);
  border-bottom: 1px solid var(--c-line);
  flex-shrink: 0;
}
.cart-drawer__head h3 {
  font-size: var(--fs-22);
  color: var(--c-bordeaux-dark);
}
.cart-drawer__body {
  padding: 0;
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
}

/* Liste d'items */
.cart-items {
  flex: 1;
  padding: var(--s-16) var(--s-24);
}
.cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: var(--s-16);
  padding: var(--s-16) 0;
  border-bottom: 1px solid var(--c-line);
  position: relative;
}
.cart-item:last-child { border-bottom: 0; }
.cart-item__media {
  width: 64px; height: 64px;
  background: var(--c-mist);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__placeholder {
  font-family: var(--f-display);
  font-size: 1.6rem;
  color: var(--c-bordeaux);
}
.cart-item__body {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.cart-item__name {
  font-family: var(--f-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.3;
}
.cart-item__meta {
  font-size: var(--fs-12);
  color: var(--c-mute);
}
.cart-item__row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.cart-item__price {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--c-bordeaux-dark);
}
.cart-item__remove {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-mute);
  align-self: start;
  transition: color var(--d-fast);
}
.cart-item__remove svg { width: 16px; height: 16px; }
.cart-item__remove:hover { color: var(--c-bordeaux); }

/* Sélecteur de quantité */
.cart-qty {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 2px;
}
.cart-qty__btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-14);
  color: var(--c-ink);
  border-radius: 999px;
  transition: background var(--d-fast);
}
.cart-qty__btn:hover { background: var(--c-mist); }
.cart-qty__val {
  min-width: 26px; text-align: center;
  font-size: var(--fs-13); font-weight: 500;
  color: var(--c-ink);
}

/* Récapitulatif & checkout */
.cart-summary {
  padding: var(--s-24);
  border-top: 1px solid var(--c-line);
  background: var(--c-paper);
  display: flex; flex-direction: column; gap: var(--s-8);
  flex-shrink: 0;
}
.cart-summary__row {
  display: flex; justify-content: space-between;
  font-size: var(--fs-14);
  color: var(--c-ink);
}
.cart-summary__row--mute { color: var(--c-mute); }
.cart-summary__row--total {
  font-size: var(--fs-18);
  font-family: var(--f-display);
  color: var(--c-bordeaux-dark);
  font-weight: 500;
  padding-top: var(--s-8);
  margin-top: var(--s-8);
  border-top: 1px solid var(--c-line);
}
.cart-checkout-btn { margin-top: var(--s-16); width: 100%; }
.cart-clear {
  font-size: var(--fs-12);
  color: var(--c-mute);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: var(--s-4);
  align-self: center;
  background: transparent; border: 0; cursor: pointer;
  transition: color var(--d-fast);
}
.cart-clear:hover { color: var(--c-bordeaux); }

/* Bloc Checkout (caché par défaut, affiché si .is-checkout) */
.cart-checkout {
  display: none;
  padding: var(--s-24);
  flex-direction: column; gap: var(--s-16);
  flex-shrink: 0;
}
.cart-drawer.is-checkout .cart-items,
.cart-drawer.is-checkout .cart-summary { display: none; }
.cart-drawer.is-checkout .cart-checkout { display: flex; }

.cart-checkout__back {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-mute);
  cursor: pointer;
  background: transparent; border: 0;
  margin-bottom: var(--s-8);
  transition: color var(--d-fast);
}
.cart-checkout__back:hover { color: var(--c-bordeaux); }
.cart-checkout__back svg { width: 14px; height: 14px; }
.cart-checkout h3 {
  font-family: var(--f-display);
  font-size: var(--fs-22);
  color: var(--c-bordeaux-dark);
}
.cart-checkout__intro {
  font-size: var(--fs-13);
  color: var(--c-mute);
  margin-bottom: var(--s-8);
}

/* État vide */
.cart-empty-state {
  text-align: center;
  padding: var(--s-48) var(--s-24);
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s-16);
}
.cart-empty-state__icon { width: 56px; height: 56px; color: var(--c-line); }
.cart-empty-state p { color: var(--c-ink); font-size: var(--fs-16); }
.cart-empty-state__sub { color: var(--c-mute); font-size: var(--fs-13); max-width: 30ch; }

/* Cart count badge — un peu plus visible */
.cart-count {
  display: none;     /* show when count > 0 via JS */
}

/* Mode sombre */
:root[data-theme="dark"] .cart-drawer { background: var(--c-paper-pure); border-left-color: var(--c-line); }
:root[data-theme="dark"] .cart-drawer__head { border-bottom-color: var(--c-line); }
:root[data-theme="dark"] .cart-drawer__head h3 { color: var(--c-gold-light); }
:root[data-theme="dark"] .cart-item { border-bottom-color: var(--c-line); }
:root[data-theme="dark"] .cart-item__media { background: var(--c-mist); }
:root[data-theme="dark"] .cart-item__name  { color: var(--c-ink); }
:root[data-theme="dark"] .cart-item__price { color: var(--c-gold-light); }
:root[data-theme="dark"] .cart-qty         { border-color: var(--c-line); }
:root[data-theme="dark"] .cart-qty__btn    { color: var(--c-ink); }
:root[data-theme="dark"] .cart-summary     { background: var(--c-paper); border-top-color: var(--c-line); }
:root[data-theme="dark"] .cart-summary__row--total { color: var(--c-gold-light); border-top-color: var(--c-line); }
:root[data-theme="dark"] .cart-checkout h3 { color: var(--c-gold-light); }
:root[data-theme="dark"] .cart-empty-state__icon { color: var(--c-line); }
:root[data-theme="dark"] .cart-empty-state p { color: var(--c-ink); }

/* Conservation rétrocompatibilité */
.cart-empty { color: var(--c-mute); font-size: var(--fs-14); }

/* ---------- Lightbox (image en grand) ------------------------------------ */
.lightbox {
  position: fixed; inset: 0;
  z-index: 250;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease-out);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6);
  transform: scale(.96);
  transition: transform 420ms var(--ease-out);
  cursor: zoom-out;
  background: var(--c-mist);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__close {
  position: fixed; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12);
  color: var(--c-paper-pure);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--d-fast), transform var(--d-fast);
}
.lightbox__close:hover {
  background: rgba(255, 255, 255, .22);
  transform: rotate(90deg);
}
.lightbox__close svg { width: 22px; height: 22px; }

/* Le hero PDP devient cliquable (zoom in) */
.pdp__hero { position: relative; }
.pdp__hero img { cursor: zoom-in; }

/* ---------- Recherche globale ------------------------------------------- */
.search-overlay {
  position: fixed; inset: 0;
  z-index: 220;
  background: rgba(10,10,10,.65);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--ease-out);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(2rem, 6vw, 6rem) var(--s-16);
}
.search-overlay.is-open { opacity: 1; pointer-events: auto; }
.search-overlay__inner {
  width: min(720px, 100%);
  background: var(--c-paper-pure);
  border-top: 3px solid var(--c-bordeaux);
  box-shadow: 0 30px 80px -20px rgba(10,10,10,.45);
  max-height: 80vh; overflow-y: auto;
}
.search-overlay__form {
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid var(--c-line);
}
.search-overlay__icon { width: 22px; height: 22px; color: var(--c-mute); flex-shrink: 0; }
.search-overlay__form input {
  flex: 1;
  font-family: var(--f-display);
  font-size: var(--fs-22);
  border: 0; outline: none;
  background: transparent;
  color: var(--c-ink);
  padding: var(--s-8) 0;
}
.search-overlay__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-mute); border-radius: 999px;
  transition: background var(--d-fast), color var(--d-fast);
}
.search-overlay__close:hover { background: var(--c-mist); color: var(--c-bordeaux); }
.search-overlay__close svg { width: 18px; height: 18px; }

.search-overlay__results { padding: var(--s-8) 0; }
.search-overlay__hint,
.search-overlay__empty {
  padding: var(--s-24);
  text-align: center; color: var(--c-mute);
  font-size: var(--fs-14);
}
.search-overlay__results ul { display: flex; flex-direction: column; }
.search-overlay__results li { list-style: none; }
.search-overlay__results a {
  display: flex; align-items: center; gap: var(--s-16);
  padding: var(--s-12) var(--s-24);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  transition: background var(--d-fast);
}
.search-overlay__results a:hover { background: var(--c-mist); }
.search-overlay__results img {
  width: 56px; height: 56px;
  object-fit: cover;
  background: var(--c-mist);
  flex-shrink: 0;
}
.search-overlay__results strong { display: block; font-family: var(--f-display); font-size: var(--fs-18); color: var(--c-bordeaux-dark); }
.search-overlay__results span { display: block; font-size: var(--fs-12); color: var(--c-mute); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-top: 2px; }

:root[data-theme="dark"] .search-overlay__inner { background: var(--c-paper-pure); }
:root[data-theme="dark"] .search-overlay__form input { color: var(--c-ink); }
:root[data-theme="dark"] .search-overlay__results strong { color: var(--c-gold-light); }

/* ---------- Upload de fichier (zone drag & drop) ------------------------ */
.file-drop {
  position: relative;
  border: 1.5px dashed var(--c-line);
  background: var(--c-mist);
  padding: var(--s-24);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--d-fast), background var(--d-fast);
}
.file-drop:hover,
.file-drop.is-hover {
  border-color: var(--c-bordeaux);
  background: var(--c-paper-pure);
}
.file-drop svg { width: 32px; height: 32px; color: var(--c-mute); margin-bottom: var(--s-8); }
.file-drop__text { font-size: var(--fs-14); color: var(--c-mute); }
.file-drop__text strong { color: var(--c-bordeaux-dark); }
.file-drop input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}
.file-drop__preview {
  display: none;
  margin-top: var(--s-12);
  position: relative;
  max-width: 200px; margin-inline: auto;
}
.file-drop__preview img {
  width: 100%; max-height: 160px; object-fit: contain;
  background: var(--c-paper-pure);
  border: 1px solid var(--c-line);
}
.file-drop__preview button {
  position: absolute; top: -8px; right: -8px;
  width: 24px; height: 24px;
  background: var(--c-bordeaux); color: var(--c-paper-pure);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0;
  font-size: var(--fs-12);
}
.file-drop.has-file .file-drop__preview { display: block; }

/* ---------- Section "Avez-vous un exemple ?" (sur-mesure) -------------- */
.example-upload {
  padding-block: var(--s-96);
  background: var(--c-mist);
  position: relative;
}
.example-upload__intro {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto var(--s-48);
}
.example-upload__intro .eyebrow {
  justify-content: center;
  color: var(--c-bordeaux);
}
.example-upload__intro h2 {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--c-bordeaux-dark);
  margin-bottom: var(--s-16);
}
.example-upload__intro p { color: var(--c-ink-soft); line-height: 1.7; }

.example-upload__form {
  max-width: 720px; margin: 0 auto;
  display: grid; gap: var(--s-24);
}
.file-drop--lg {
  padding: clamp(2rem, 5vw, 3rem) var(--s-24);
  background: var(--c-paper-pure);
  border-width: 2px;
}
.file-drop--lg svg { width: 44px; height: 44px; color: var(--c-bordeaux); margin-bottom: var(--s-16); }
.file-drop--lg .file-drop__text { font-size: var(--fs-16); margin-bottom: var(--s-24); }
.file-drop--lg .file-drop__text strong { font-family: var(--f-display); font-size: var(--fs-22); color: var(--c-bordeaux-dark); }
.file-drop--lg .file-drop__text span { font-size: var(--fs-13); color: var(--c-mute); }

.example-upload__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-12);
  margin-top: var(--s-8);
  position: relative; z-index: 2;
}
.example-upload__action {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .65rem 1.2rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: background var(--d-fast), border-color var(--d-fast), color var(--d-fast);
  position: relative; z-index: 2;
}
.example-upload__action:hover {
  background: var(--c-bordeaux);
  border-color: var(--c-bordeaux);
  color: var(--c-paper-pure);
}
.example-upload__action svg { width: 18px; height: 18px; flex-shrink: 0; }

.file-drop--lg .file-drop__preview { max-width: 280px; margin-top: var(--s-24); }
.file-drop--lg .file-drop__preview img { max-height: 220px; }

/* Sur petit écran, l'appareil photo prend toute la largeur */
@media (max-width: 480px) {
  .example-upload__actions { flex-direction: column; align-items: stretch; }
  .example-upload__action { justify-content: center; }
}

/* Mode sombre */
:root[data-theme="dark"] .example-upload { background: var(--c-paper); }
:root[data-theme="dark"] .example-upload__intro h2 { color: var(--c-gold-light); }
:root[data-theme="dark"] .file-drop--lg { background: var(--c-paper-pure); border-color: var(--c-line); }
:root[data-theme="dark"] .file-drop--lg svg { color: var(--c-gold-light); }
:root[data-theme="dark"] .file-drop--lg .file-drop__text strong { color: var(--c-gold-light); }
:root[data-theme="dark"] .example-upload__action { background: var(--c-mist); border-color: var(--c-line); color: var(--c-ink); }
:root[data-theme="dark"] .example-upload__action:hover { background: var(--c-bordeaux); border-color: var(--c-bordeaux); color: var(--c-paper-pure); }

/* ---------- Pop-up "Visuels & IA" sur fiche produit ---------------------- */
.ai-popup {
  position: fixed; inset: 0;
  z-index: 220;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-16);
  opacity: 0; pointer-events: none;
  transition: opacity 320ms var(--ease-out);
}
.ai-popup.is-open { opacity: 1; pointer-events: auto; }
.ai-popup__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}
.ai-popup__panel {
  position: relative;
  background: var(--c-paper-pure);
  max-width: 520px; width: 100%;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  border-top: 3px solid var(--c-bordeaux);
  box-shadow: 0 30px 80px -20px rgba(10,10,10,.45);
  transform: translateY(20px) scale(.98);
  transition: transform 480ms var(--ease-out);
}
.ai-popup.is-open .ai-popup__panel { transform: translateY(0) scale(1); }

.ai-popup__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--s-16);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--c-gold);
  border-radius: 50%;
  color: var(--c-gold);
}
.ai-popup__icon svg { width: 26px; height: 26px; }
.ai-popup .eyebrow { justify-content: center; }
.ai-popup h2 {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--c-bordeaux-dark);
  margin: var(--s-8) 0 var(--s-12);
}
.ai-popup__msg {
  color: var(--c-ink-soft);
  font-size: var(--fs-14);
  line-height: 1.7;
  max-width: 44ch;
  margin: 0 auto var(--s-24);
}
.ai-popup__actions {
  display: flex; gap: var(--s-12);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-20, 1.25rem);
}
.ai-popup__continue {
  display: inline-block;
  margin-top: var(--s-8);
  font-family: var(--f-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-mute);
  background: transparent; border: 0; cursor: pointer;
  padding: var(--s-8) var(--s-16);
  border-bottom: 1px solid var(--c-mute);
  border-radius: 0;
  transition: color var(--d-fast), border-color var(--d-fast);
}
.ai-popup__continue:hover { color: var(--c-bordeaux); border-color: var(--c-bordeaux); }

/* Mode sombre */
:root[data-theme="dark"] .ai-popup__panel { background: var(--c-paper-pure); }
:root[data-theme="dark"] .ai-popup h2 { color: var(--c-gold-light); }
:root[data-theme="dark"] .ai-popup__msg { color: var(--c-ink-soft); }
:root[data-theme="dark"] .ai-popup__continue { color: var(--c-mute); border-color: var(--c-mute); }
:root[data-theme="dark"] .ai-popup__continue:hover { color: var(--c-gold-light); border-color: var(--c-gold-light); }

/* Bouton Vue 360° flottant sur l'image principale */
.pdp__view-3d {
  position: absolute;
  right: var(--s-12); bottom: var(--s-12);
  display: inline-flex; align-items: center; gap: 6px;
  padding: .55rem .9rem;
  background: rgba(10,10,10,.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c-paper-pure);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--c-gold);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--d-fast), transform var(--d-fast);
}
.pdp__view-3d:hover {
  background: var(--c-bordeaux-dark);
  transform: translateY(-2px);
}
.pdp__view-3d svg { width: 16px; height: 16px; }

/* Lightbox 3D — fond bordeaux + model-viewer plein écran */
.lightbox--3d {
  background: radial-gradient(ellipse at center, var(--c-bordeaux-dark) 0%, #1a0710 70%, #0a0405 100%);
}
.lightbox__model {
  width: min(92vw, 1100px);
  height: min(82vh, 800px);
  background: transparent;
  --poster-color: transparent;
}
.lightbox__3d-hint {
  position: fixed; bottom: var(--s-24); left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  opacity: .85;
  pointer-events: none;
}
.lightbox__3d-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  color: var(--c-gold-soft);
  font-family: var(--f-sans);
  font-size: var(--fs-14);
  letter-spacing: .04em;
  padding: var(--s-24);
  pointer-events: none;
  z-index: 1;
}
.lightbox__3d-loader small {
  display: block; margin-top: var(--s-12);
  color: rgba(247,247,245,.5); font-size: var(--fs-12);
  max-width: 50ch;
}

/* ---------- Cartes cadeaux ----------------------------------------------- */
.gift-card { list-style: none; }
.gift-card__media {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(195,160,90,.18), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(195,160,90,.10), transparent 60%),
    linear-gradient(155deg, var(--c-bordeaux-dark) 0%, var(--c-bordeaux) 60%, var(--c-bordeaux-dark) 100%);
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(195,160,90,.3);
}
.gift-card__media::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(195,160,90,.25);
}
.gift-card__media::after {
  content: "ANCLAIR";
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-display);
  color: var(--c-gold-soft);
  font-size: 10px;
  letter-spacing: .5em;
}
.gift-card__amount {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--c-gold-soft);
  letter-spacing: .04em;
}
.gift-card__amount--small { font-size: clamp(1.2rem, 2.6vw, 1.6rem); letter-spacing: .12em; text-transform: uppercase; }
.gift-card__body {
  display: flex; flex-direction: column; gap: var(--s-8);
  align-items: flex-start;
}
.gift-card__btn { margin-top: var(--s-12); width: 100%; max-width: 220px; }

.gift-card__input-row {
  display: flex; align-items: center; gap: var(--s-8);
  margin-top: var(--s-8);
}
.gift-card__input-row input {
  width: 100%; max-width: 140px;
  padding: .7rem .9rem;
  font-family: var(--f-sans);
  font-size: var(--fs-14);
  border: 1px solid var(--c-line);
  background: var(--c-paper-pure);
  color: var(--c-ink);
}
.gift-card__input-row input:focus { outline: 2px solid var(--c-bordeaux); outline-offset: 1px; }
.gift-card__currency {
  font-family: var(--f-display);
  font-size: var(--fs-18);
  color: var(--c-bordeaux-dark);
}

:root[data-theme="dark"] .gift-card__input-row input {
  background: var(--c-paper-pure); border-color: var(--c-line); color: var(--c-ink);
}
:root[data-theme="dark"] .gift-card__currency { color: var(--c-gold-light); }

.overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
  z-index: 60;
}
.overlay.is-active { opacity: 1; pointer-events: auto; }

/* ---------- Reveal animations -------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ==========================================================================
   PAGES INTÉRIEURES — collections, fiche produit, formulaires, légales
   ========================================================================== */

/* ---------- Page hero (sous-page) ---------------------------------------- */
.page-hero {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(195,160,90,.20), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(195,160,90,.10), transparent 60%),
    linear-gradient(160deg,
      var(--c-bordeaux-dark) 0%,
      #5a1020 35%,
      var(--c-bordeaux) 65%,
      var(--c-bordeaux-dark) 100%);
  color: var(--c-paper-pure);
  padding-block: clamp(4rem, 8vw, 7rem);
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* fondu progressif vers le contenu en dessous */
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(180deg, transparent 0%, var(--c-paper) 100%);
  pointer-events: none; z-index: 0;
  opacity: .5;
}
.page-hero .eyebrow { color: var(--c-gold-soft); justify-content: center; }
.page-hero .eyebrow::before { background: var(--c-gold); }
.page-hero h1 {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, var(--fs-64));
  line-height: 1.05;
  margin-bottom: var(--s-16);
}
.page-hero p {
  max-width: 60ch; margin-inline: auto;
  color: rgba(247,247,245,.82);
  font-size: var(--fs-18);
}
.page-hero .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-paper-pure);
  --btn-border: var(--c-gold);
}
.page-hero .btn--ghost:hover {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-bordeaux-dark);
  --btn-border: var(--c-gold);
}
.page-hero .btn--primary {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-bordeaux-dark);
  --btn-border: var(--c-gold);
}
.page-hero .btn--primary:hover {
  --btn-bg: var(--c-gold-light);
  --btn-border: var(--c-gold-light);
}

/* ---------- Breadcrumb --------------------------------------------------- */
.breadcrumb {
  padding: var(--s-16) 0;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--c-mute);
  border-bottom: 1px solid var(--c-line);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.breadcrumb a { color: var(--c-mute); transition: color var(--d-fast) var(--ease-out); }
.breadcrumb a:hover { color: var(--c-bordeaux); }
.breadcrumb [aria-current] { color: var(--c-ink); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-8); color: var(--c-gold); }

/* ---------- Filtres collection ------------------------------------------- */
.collection-toolbar {
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: var(--s-16);
  padding-block: var(--s-32);
  border-bottom: 1px solid var(--c-line);
}
.collection-filters {
  display: flex; gap: var(--s-8); flex-wrap: wrap;
}
.filter-pill {
  font-family: var(--f-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: .55rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: all var(--d-base) var(--ease-out);
}
.filter-pill:hover { border-color: var(--c-ink); }
.filter-pill.is-active {
  background: var(--c-bordeaux);
  border-color: var(--c-bordeaux);
  color: var(--c-paper-pure);
}
.collection-sort select {
  font-family: var(--f-sans);
  font-size: var(--fs-13);
  padding: .55rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
}

/* ---------- Page produit (PDP) ------------------------------------------- */
.pdp { padding-block: var(--s-48) var(--s-96); }
.pdp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-48);
}
@media (min-width: 880px) {
  .pdp__grid { grid-template-columns: 1.2fr 1fr; gap: var(--s-96); }
}
.pdp__gallery { display: grid; gap: var(--s-16); }
.pdp__hero {
  aspect-ratio: 4 / 5;
  background: var(--c-mist);
  overflow: hidden;
}
.pdp__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Configurateur en couches (Unica Nova) — images carrées 1957×1920 */
.pdp__hero.is-layered {
  background: var(--c-paper-pure);
  aspect-ratio: 1957 / 1920;
}
:root[data-theme="dark"] .pdp__hero.is-layered {
  background: var(--c-paper);
}
.pdp__layered {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pdp__layered-img {
  position: absolute !important;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  cursor: default !important;
  background: transparent;
  transition: opacity .35s ease;
}
/* Z-index pour l'empilement boîtier → cadran → aiguilles */
.pdp__layered-img[data-pdp-layer="boitier"]  { z-index: 1; }
.pdp__layered-img[data-pdp-layer="cadran"]   { z-index: 2; }
.pdp__layered-img[data-pdp-layer="aiguille"] { z-index: 3; }

.pdp__cyclops {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
  animation: cyclopsAppear .4s ease;
}
@keyframes cyclopsAppear {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.pdp__thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-12);
}
.pdp__thumbs img {
  aspect-ratio: 1; object-fit: cover; cursor: pointer;
  border: 1px solid transparent; transition: border-color var(--d-fast);
}
.pdp__thumbs img:hover { border-color: var(--c-bordeaux); }

.pdp__info { display: flex; flex-direction: column; gap: var(--s-24); position: sticky; top: calc(var(--header-h) + var(--s-32)); align-self: start; }
.pdp__info h1 {
  font-family: var(--f-display);
  font-size: clamp(2rem, 3.5vw, var(--fs-48));
  line-height: 1.05; color: var(--c-bordeaux-dark);
}
.pdp__ref { font-size: var(--fs-12); letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: var(--c-mute); }
.pdp__price { font-family: var(--f-display); font-size: var(--fs-28); color: var(--c-ink); }
.pdp__desc { color: var(--c-ink-soft); max-width: 60ch; line-height: 1.7; white-space: pre-line; }

.pdp__options { display: flex; flex-direction: column; gap: var(--s-16); }
.pdp__option label {
  display: block; font-size: var(--fs-12); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--c-mute); margin-bottom: var(--s-8);
}
.pdp__option-row { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.pdp__swatch {
  padding: .65rem 1.1rem; border: 1px solid var(--c-line); border-radius: 999px;
  font-size: var(--fs-13); cursor: pointer; background: transparent;
  transition: all var(--d-base) var(--ease-out);
}
.pdp__swatch.is-active, .pdp__swatch:hover { border-color: var(--c-bordeaux); color: var(--c-bordeaux); }
.pdp__options-note {
  font-size: var(--fs-13);
  color: var(--c-gold);
  font-style: italic;
  margin: -8px 0 4px;
}
/* Option incompatible (ex. arabic dial × boîtier date) */
.pdp__swatch.is-unavailable {
  opacity: .35;
  cursor: not-allowed;
  text-decoration: line-through;
  pointer-events: none;
  border-color: var(--c-line);
  color: var(--c-mute);
}

.pdp__cta { display: flex; gap: var(--s-12); flex-wrap: wrap; margin-top: var(--s-16); }
.pdp__meta {
  border-top: 1px solid var(--c-line);
  padding-top: var(--s-24);
  font-size: var(--fs-13); color: var(--c-mute);
  display: flex; flex-direction: column; gap: var(--s-8);
}
.pdp__meta span::before { content: "✓ "; color: var(--c-gold); margin-right: 4px; }

/* Note "Combinaison non disponible" */
.pdp-unavail {
  display: flex; align-items: flex-start; gap: var(--s-12);
  padding: var(--s-16);
  background: rgba(192, 40, 42, .08);
  border-left: 3px solid #c0282a;
  margin-top: var(--s-16);
  font-size: var(--fs-13);
  line-height: 1.5;
}
.pdp-unavail svg {
  width: 22px; height: 22px;
  color: #c0282a;
  flex-shrink: 0;
  margin-top: 2px;
}
.pdp-unavail strong {
  display: block;
  font-family: var(--f-sans);
  font-size: var(--fs-13);
  font-weight: 600;
  color: #c0282a;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pdp-unavail p {
  color: var(--c-ink-soft);
  font-size: var(--fs-13);
}

/* Bouton "Ajouter au panier" désactivé */
.btn.is-disabled,
.btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

:root[data-theme="dark"] .pdp-unavail {
  background: rgba(192, 40, 42, .15);
  border-left-color: #e04a4c;
}
:root[data-theme="dark"] .pdp-unavail strong { color: #ff6e70; }
:root[data-theme="dark"] .pdp-unavail svg    { color: #ff6e70; }

/* ---------- Configurateur sur-mesure ------------------------------------- */
.configurator { padding-block: var(--s-96); }
.configurator__steps {
  display: grid; grid-template-columns: 1fr; gap: var(--s-48);
}
@media (min-width: 880px) { .configurator__steps { grid-template-columns: 1fr 1fr; gap: var(--s-96); } }
.config-step {
  border: 1px solid var(--c-line); padding: var(--s-32);
  background: var(--c-paper-pure);
}
.config-step__num {
  display: inline-block;
  font-family: var(--f-display);
  font-size: var(--fs-22);
  color: var(--c-bordeaux); margin-bottom: var(--s-12);
}
.config-step h3 { color: var(--c-bordeaux-dark); margin-bottom: var(--s-12); }
.config-step p { color: var(--c-ink-soft); }

/* ---------- Page éditoriale (La Maison, Savoir-faire) -------------------- */
.editorial-block { padding-block: var(--s-96); }
.editorial-block__grid {
  display: grid; gap: var(--s-48); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .editorial-block__grid { grid-template-columns: 1fr 1fr; gap: var(--s-96); } }
.editorial-block--reverse .editorial-block__grid { direction: rtl; }
.editorial-block--reverse .editorial-block__grid > * { direction: ltr; }
.editorial-block__media { aspect-ratio: 4/5; overflow: hidden; background: var(--c-mist); }
.editorial-block__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.editorial-block__media:hover img { transform: scale(1.03); }
.editorial-block h2 { color: var(--c-bordeaux-dark); margin-bottom: var(--s-16); }
.editorial-block p { color: var(--c-ink-soft); max-width: 56ch; line-height: 1.7; margin-bottom: var(--s-16); }

/* ---------- Formulaires (contact, compte, SAV) --------------------------- */
.form-page { padding-block: var(--s-64) var(--s-96); }
.form-page__intro { text-align: center; max-width: 60ch; margin: 0 auto var(--s-48); }
.form-page__intro h1 { font-family: var(--f-display); font-size: clamp(2rem, 4vw, var(--fs-48)); color: var(--c-bordeaux-dark); margin-bottom: var(--s-16); }
.form-page__intro p { color: var(--c-mute); }

.form {
  max-width: 600px; margin: 0 auto;
  display: grid; gap: var(--s-24);
}
.form-row { display: grid; gap: var(--s-24); }
@media (min-width: 600px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }

.form-hint {
  font-size: var(--fs-13);
  color: var(--c-mute);
  margin: 2px 0 8px;
  line-height: 1.5;
}

.form-field { display: flex; flex-direction: column; gap: var(--s-8); }
.form-field label {
  font-size: var(--fs-12); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--c-mute);
}
.form-field input,
.form-field textarea,
.form-field select {
  font-family: var(--f-sans); font-size: var(--fs-16);
  padding: .85rem 1rem;
  border: 1px solid var(--c-line);
  background: var(--c-paper-pure); color: var(--c-ink);
  transition: border-color var(--d-fast) var(--ease-out);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--c-bordeaux); outline: none;
}
.form-field textarea { min-height: 140px; resize: vertical; }

.form-actions { display: flex; gap: var(--s-12); justify-content: center; margin-top: var(--s-16); flex-wrap: wrap; }

.form__status {
  font-size: var(--fs-13);
  text-align: center;
  min-height: 1.2em;
  margin-top: var(--s-8);
  color: var(--c-mute);
}
.form__status[data-kind="ok"]    { color: var(--c-bordeaux); font-weight: 500; }
.form__status[data-kind="error"] { color: #c0282a; }

/* ---------- Pop-up de succès — PLEIN ÉCRAN ------------------------------- */
.success-popup {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(195,160,90,.18), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(195,160,90,.10), transparent 60%),
    linear-gradient(160deg,
      var(--c-bordeaux-dark) 0%,
      #5a1020 35%,
      var(--c-bordeaux) 65%,
      var(--c-bordeaux-dark) 100%);
  color: var(--c-paper-pure);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease-out);
  overflow: hidden;
  padding: var(--s-32);
  text-align: center;
}
.success-popup.is-open { opacity: 1; pointer-events: auto; }

.success-popup__backdrop {
  /* plus utilisé en plein écran — gardé caché pour rétro-compat */
  display: none;
}

.success-popup__panel {
  position: relative;
  max-width: 720px;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translateY(28px) scale(.98);
  transition: transform 700ms var(--ease-out);
}
.success-popup.is-open .success-popup__panel {
  transform: translateY(0) scale(1);
}

.success-popup__close {
  position: fixed; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--c-paper-pure);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease-out), transform var(--d-fast);
}
.success-popup__close:hover { background: rgba(255, 255, 255, .18); transform: rotate(90deg); }
.success-popup__close svg { width: 22px; height: 22px; }

.success-popup__icon {
  width: clamp(96px, 14vw, 128px);
  height: clamp(96px, 14vw, 128px);
  margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c-gold);
  border-radius: 50%;
  color: var(--c-gold);
  position: relative;
}
.success-popup__icon::before {
  content: ""; position: absolute; inset: 8px;
  border-radius: 50%; border: 1px solid rgba(195, 160, 90, .35);
}
.success-popup__icon::after {
  content: ""; position: absolute; inset: -8px;
  border-radius: 50%; border: 1px solid rgba(195, 160, 90, .25);
  animation: anclair-pulse 2.4s ease-in-out infinite;
}
@keyframes anclair-pulse {
  0%, 100% { transform: scale(1);   opacity: .6; }
  50%      { transform: scale(1.08); opacity: 0; }
}
.success-popup__icon svg { width: 48%; height: 48%; stroke-dasharray: 30; stroke-dashoffset: 30; }
.success-popup.is-open .success-popup__icon svg {
  animation: anclair-check 700ms 250ms var(--ease-out) forwards;
}
@keyframes anclair-check { to { stroke-dashoffset: 0; } }

.success-popup .eyebrow {
  color: var(--c-gold-soft);
  justify-content: center;
  margin-bottom: var(--s-16);
}
.success-popup .eyebrow::before { background: var(--c-gold); }

.success-popup__title {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--c-paper-pure);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}
.success-popup__msg {
  color: rgba(247, 247, 245, .88);
  font-size: clamp(1rem, 1.6vw, var(--fs-18));
  line-height: 1.65;
  max-width: 48ch;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.success-popup__btn {
  --btn-bg: transparent;
  --btn-fg: var(--c-paper-pure);
  --btn-border: var(--c-gold);
  min-width: 180px;
}
.success-popup__btn:hover {
  --btn-bg: var(--c-gold);
  --btn-fg: var(--c-bordeaux-dark);
  --btn-border: var(--c-gold);
}

.success-popup__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-light) 100%);
  transition: width 5400ms linear;
}
.success-popup.is-open .success-popup__progress { width: 100%; }

/* Le mode sombre garde le même fond bordeaux — c'est volontaire */

/* ---------- Pages légales / texte long ----------------------------------- */
.legal-page { padding-block: var(--s-64); }
.legal-page__container { max-width: 760px; margin: 0 auto; }
.legal-page h1 { font-family: var(--f-display); font-size: clamp(2rem, 4vw, var(--fs-48)); color: var(--c-bordeaux-dark); margin-bottom: var(--s-12); }
.legal-page h2 { font-family: var(--f-display); font-size: var(--fs-28); color: var(--c-ink); margin-top: var(--s-48); margin-bottom: var(--s-12); }
.legal-page h3 { font-family: var(--f-sans); font-size: var(--fs-16); font-weight: 500; color: var(--c-bordeaux); margin-top: var(--s-24); margin-bottom: var(--s-8); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.legal-page p, .legal-page li { color: var(--c-ink-soft); line-height: 1.75; margin-bottom: var(--s-16); }
.legal-page ul { padding-left: var(--s-24); list-style: disc; }
.legal-page__meta { color: var(--c-mute); font-size: var(--fs-13); margin-bottom: var(--s-48); }

/* ---------- Compte ------------------------------------------------------- */
.account-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-48);
  max-width: 1000px; margin: 0 auto;
}
@media (min-width: 880px) { .account-grid { grid-template-columns: 1fr 1fr; gap: var(--s-96); } }
.account-card {
  border: 1px solid var(--c-line);
  padding: var(--s-48);
  background: var(--c-paper-pure);
}
.account-card h2 { color: var(--c-bordeaux-dark); margin-bottom: var(--s-12); }
.account-card p { color: var(--c-mute); margin-bottom: var(--s-24); }
.account-card .link-underline { margin-top: var(--s-16); }
.account-card--lg {
  max-width: 800px; margin: 0 auto;
  padding: var(--s-64) var(--s-48);
}
.account-card--lg .eyebrow { color: var(--c-gold); margin-bottom: var(--s-12); }
.account-card--lg h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--s-16);
}
.account-loggedin { max-width: 1000px; margin: 0 auto; }
.account-msg {
  margin-top: var(--s-12);
  font-size: var(--fs-13);
  color: var(--c-mute);
  min-height: 1.2em;
}
.account-msg[data-kind="error"] { color: #b3001b; }
.account-msg[data-kind="ok"]    { color: #1f7a3a; }
:root[data-theme="dark"] .account-msg[data-kind="error"] { color: #ff8d8d; }
:root[data-theme="dark"] .account-msg[data-kind="ok"]    { color: #7ad9a3; }

/* ---------- Theme toggle (soleil ↔ lune) --------------------------------- */
.theme-toggle {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  transition: background var(--d-fast) var(--ease-out),
              transform var(--d-fast) var(--ease-out);
}
.theme-toggle:hover {
  background: var(--c-mist);
  transform: rotate(-12deg);
}
.theme-toggle:active {
  transform: scale(.92);
}
.theme-toggle__icons {
  position: relative;
  display: inline-block;
  width: 22px; height: 22px;
}
.theme-toggle__icons svg {
  position: absolute; inset: 0;
  width: 22px; height: 22px;
  color: var(--c-ink);
  transition: transform 550ms cubic-bezier(.65,.05,.36,1),
              opacity 320ms ease;
}
/* État par défaut (mode clair) : soleil visible, lune cachée */
.theme-toggle__sun  { transform: rotate(0deg)    scale(1);   opacity: 1; }
.theme-toggle__moon { transform: rotate(-180deg) scale(.35); opacity: 0; }

/* Mode sombre : soleil caché, lune visible */
:root[data-theme="dark"] .theme-toggle__sun  { transform: rotate(180deg) scale(.35); opacity: 0; }
:root[data-theme="dark"] .theme-toggle__moon { transform: rotate(0deg)   scale(1);   opacity: 1; }

/* Halo doux au survol */
.theme-toggle::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 var(--c-gold);
  transition: box-shadow var(--d-base) var(--ease-out);
  pointer-events: none;
}
.theme-toggle:hover::after {
  box-shadow: 0 0 0 1px var(--c-gold);
  opacity: .5;
}

/* ==========================================================================
   AJUSTEMENTS DU MODE SOMBRE
   ========================================================================== */

:root[data-theme="dark"] body { background: var(--c-paper); color: var(--c-ink); }

/* Logo doré sur fond sombre */
:root[data-theme="dark"] .logo-mark { color: var(--c-gold); }
:root[data-theme="dark"] .site-header__logo::before { opacity: 1; }

/* Header : surface élevée + filet doré subtil */
:root[data-theme="dark"] .site-header {
  background: var(--c-paper-pure);
  border-bottom: 1px solid var(--c-line);
}
:root[data-theme="dark"] .site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--c-line), 0 8px 24px -16px rgba(0,0,0,.6);
}

/* Le titre H2 etc. sur fond clair (devient sombre) doit garder sa couleur lisible */
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3,
:root[data-theme="dark"] h4 { color: var(--c-ink); }

/* Eyebrows : un poil plus dorés en sombre */
:root[data-theme="dark"] .eyebrow { color: var(--c-gold-light); }
:root[data-theme="dark"] .eyebrow::before { background: var(--c-gold); }

/* Collection cards : titres en lumière dorée */
:root[data-theme="dark"] .collection-card__body h3 { color: var(--c-gold-light); }
:root[data-theme="dark"] .collection-card__body p { color: var(--c-ink-soft); }
:root[data-theme="dark"] .collection-card__media { background: var(--c-mist); }

/* Product cards */
:root[data-theme="dark"] .product-card__body h3 { color: var(--c-ink); }
:root[data-theme="dark"] .product-card__body p  { color: var(--c-mute); }
:root[data-theme="dark"] .product-card__media   { background: var(--c-mist); }
:root[data-theme="dark"] .product-grid-section  { background: var(--c-paper); }

/* PDP */
:root[data-theme="dark"] .pdp__info h1 { color: var(--c-gold-light); }
:root[data-theme="dark"] .pdp__price   { color: var(--c-ink); }
:root[data-theme="dark"] .pdp__desc    { color: var(--c-ink-soft); }
:root[data-theme="dark"] .pdp__hero    { background: var(--c-mist); }
:root[data-theme="dark"] .pdp__thumbs img { background: var(--c-mist); }

/* Liens et filtres */
:root[data-theme="dark"] .filter-pill { color: var(--c-ink); border-color: var(--c-line); }
:root[data-theme="dark"] .filter-pill:hover { border-color: var(--c-gold); }
:root[data-theme="dark"] .filter-pill.is-active { background: var(--c-bordeaux); border-color: var(--c-bordeaux); }
:root[data-theme="dark"] .collection-sort select { color: var(--c-ink); border-color: var(--c-line); background: transparent; }

/* Link underline : couleur dorée plus marquée en sombre */
:root[data-theme="dark"] .link-underline { color: var(--c-gold-light); }
:root[data-theme="dark"] .link-underline:hover { color: var(--c-gold); border-color: var(--c-gold); }

/* Formulaires */
:root[data-theme="dark"] .form-field input,
:root[data-theme="dark"] .form-field textarea,
:root[data-theme="dark"] .form-field select {
  background: var(--c-paper-pure);
  border-color: var(--c-line);
  color: var(--c-ink);
}
:root[data-theme="dark"] .form-field input::placeholder,
:root[data-theme="dark"] .form-field textarea::placeholder { color: var(--c-silver); }

/* Configurator step blocks */
:root[data-theme="dark"] .config-step { background: var(--c-paper-pure); border-color: var(--c-line); }
:root[data-theme="dark"] .config-step h3 { color: var(--c-gold-light); }
:root[data-theme="dark"] .config-step p  { color: var(--c-ink-soft); }

/* Account cards */
:root[data-theme="dark"] .account-card { background: var(--c-paper-pure); border-color: var(--c-line); }
:root[data-theme="dark"] .account-card h2 { color: var(--c-gold-light); }

/* Editorial block (pages éditoriales) */
:root[data-theme="dark"] .editorial-block h2 { color: var(--c-gold-light); }
:root[data-theme="dark"] .editorial-block p  { color: var(--c-ink-soft); }
:root[data-theme="dark"] .editorial-block__media { background: var(--c-mist); }

/* Breadcrumb */
:root[data-theme="dark"] .breadcrumb { border-color: var(--c-line); color: var(--c-mute); }
:root[data-theme="dark"] .breadcrumb [aria-current] { color: var(--c-ink); }

/* Services */
:root[data-theme="dark"] .services { border-color: var(--c-line); }
:root[data-theme="dark"] .service h4 { color: var(--c-ink); }
:root[data-theme="dark"] .service p  { color: var(--c-mute); }
:root[data-theme="dark"] .service svg { color: var(--c-gold); }

/* Section-head */
:root[data-theme="dark"] .section-head h2 { color: var(--c-ink); }

/* Cart drawer */
:root[data-theme="dark"] .cart-drawer { background: var(--c-paper-pure); }
:root[data-theme="dark"] .cart-drawer__head { border-color: var(--c-line); }
:root[data-theme="dark"] .cart-empty { color: var(--c-mute); }

/* Modal */
:root[data-theme="dark"] .modal__panel { background: var(--c-paper-pure); border-top-color: var(--c-bordeaux); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); }
:root[data-theme="dark"] .modal__head h2 { color: var(--c-gold-light); }
:root[data-theme="dark"] .modal__close:hover { background: var(--c-mist); }

/* Pages légales */
:root[data-theme="dark"] .legal-page h1 { color: var(--c-gold-light); }
:root[data-theme="dark"] .legal-page h2 { color: var(--c-ink); }
:root[data-theme="dark"] .legal-page h3 { color: var(--c-gold); }
:root[data-theme="dark"] .legal-page p,
:root[data-theme="dark"] .legal-page li { color: var(--c-ink-soft); }
:root[data-theme="dark"] .legal-page__meta { color: var(--c-mute); }

/* Hero : voile légèrement plus dense en sombre */
:root[data-theme="dark"] .hero__veil {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,.1) 25%,
      rgba(72,12,23,.6) 70%,
      rgba(10,10,12,.85) 100%),
    linear-gradient(110deg,
      rgba(72,12,23,.55) 0%,
      rgba(72,12,23,.15) 35%,
      rgba(0,0,0,.0) 65%);
}

/* Page-hero : fondu vers le fond sombre au lieu du paper clair */
:root[data-theme="dark"] .page-hero::after {
  background: linear-gradient(180deg, transparent 0%, var(--c-paper) 100%);
}

/* Editorial section : fondus haut/bas adaptés au fond sombre */
:root[data-theme="dark"] .editorial::before { background: linear-gradient(180deg, var(--c-paper) 0%, transparent 100%); }
:root[data-theme="dark"] .editorial::after  { background: linear-gradient(0deg,   var(--c-paper) 0%, transparent 100%); }

/* Footer : reste sombre en dark mode (le token --c-ink passe en clair) */
:root[data-theme="dark"] .site-footer {
  background: #06070b;       /* noir bleuté plus sombre que le body */
  color: var(--c-paper);
  border-top-color: var(--c-gold);
}
:root[data-theme="dark"] .site-footer__brand p,
:root[data-theme="dark"] .site-footer__newsletter p {
  color: rgba(236, 236, 234, .7);
}
:root[data-theme="dark"] .site-footer__col a {
  color: rgba(236, 236, 234, .85);
}
:root[data-theme="dark"] .site-footer__col a:hover { color: var(--c-gold-light); }
:root[data-theme="dark"] .site-footer__bottom {
  border-top-color: rgba(236, 236, 234, .12);
  color: rgba(236, 236, 234, .6);
}
:root[data-theme="dark"] .site-footer__legal a:hover { color: var(--c-gold-light); }
:root[data-theme="dark"] .site-footer__social a { color: rgba(236, 236, 234, .7); }
:root[data-theme="dark"] .site-footer__social a:hover { color: var(--c-gold); }
:root[data-theme="dark"] .site-footer .logo-mark--lg { color: var(--c-gold); }
:root[data-theme="dark"] .newsletter { border-bottom-color: var(--c-gold); }
:root[data-theme="dark"] .newsletter input { color: var(--c-paper); }
:root[data-theme="dark"] .newsletter input::placeholder { color: rgba(236, 236, 234, .45); }

/* ---------- Modal (callback, etc.) --------------------------------------- */
.modal {
  position: fixed; inset: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-16);
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}
.modal__panel {
  position: relative;
  background: var(--c-paper-pure);
  max-width: 560px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-top: 3px solid var(--c-bordeaux);
  box-shadow: 0 30px 60px -20px rgba(10,10,10,.4);
  transform: translateY(20px) scale(.98);
  transition: transform var(--d-base) var(--ease-out);
}
.modal__panel--lg { max-width: 720px; }
.modal.is-open .modal__panel { transform: translateY(0) scale(1); }
.modal__close {
  position: absolute; top: var(--s-12); right: var(--s-12);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink); cursor: pointer;
  border-radius: 999px;
  transition: background var(--d-fast) var(--ease-out);
}
.modal__close:hover { background: var(--c-mist); }
.modal__close svg { width: 22px; height: 22px; }
.modal__head { margin-bottom: var(--s-32); padding-right: 2rem; }
.modal__head h2 { font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2rem); color: var(--c-bordeaux-dark); margin: var(--s-12) 0; }
.modal__head p { color: var(--c-mute); font-size: var(--fs-14); }
.modal__head .eyebrow { margin-bottom: 0; }
.modal .form { max-width: none; gap: var(--s-16); }
.modal .form-actions { justify-content: flex-end; margin-top: var(--s-8); }
.modal__msg {
  font-size: var(--fs-13);
  margin-top: var(--s-8);
  min-height: 1em;
  text-align: center;
}
.modal__msg[data-kind="ok"]    { color: var(--c-bordeaux); }
.modal__msg[data-kind="error"] { color: #c0282a; }

/* ============================================================
   ANCLAIR PICKER — Calendrier sombre style Apple + roue d'heure
   Fond foncé : dates dispo en blanc, dates passées en gris
   ============================================================ */
.anclair-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
  background: #1a1a1f;
  color: #fff;
  padding: var(--s-24);
  border-radius: 14px;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.35);
}
@media (min-width: 720px) {
  .anclair-picker { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

/* ----- Calendrier ----- */
.anclair-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-16);
}
.anclair-cal__title {
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  letter-spacing: .02em;
}
.anclair-cal__nav {
  background: transparent;
  border: 1px solid transparent;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.anclair-cal__nav:hover {
  background: rgba(255,255,255,.08);
  color: var(--c-gold-light);
  transform: scale(1.05);
}
.anclair-cal__nav svg { width: 18px; height: 18px; }

.anclair-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  margin-bottom: 6px;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.anclair-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.anclair-cal__day {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  font-family: var(--f-sans);
  font-size: var(--fs-14);
  color: #fff;                     /* ✦ Dates disponibles en BLANC */
  font-weight: 500;
  height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.anclair-cal__day:hover:not(:disabled):not(.is-selected) {
  background: rgba(255,255,255,.08);
}
.anclair-cal__day.is-other  { color: rgba(255,255,255,.2); }
.anclair-cal__day.is-past   {
  color: #000;                     /* ✦ Dates passées en NOIR */
  background: rgba(0,0,0,.25);
  cursor: not-allowed;
}
.anclair-cal__day.is-today  {
  border-color: var(--c-gold);
  color: var(--c-gold-light);
}
.anclair-cal__day.is-selected {
  background: var(--c-bordeaux);
  color: #fff;
  border-color: var(--c-bordeaux);
}
.anclair-cal__day.is-selected:hover { background: var(--c-bordeaux-dark); }

/* ----- Roue (time picker) avec flèches + saisie ----- */
.anclair-wheel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.anclair-wheel__manual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--f-serif);
  margin-bottom: 4px;
}
.anclair-wheel__manual input {
  width: 50px;
  padding: 6px 4px;
  text-align: center;
  font-family: var(--f-serif);
  font-size: 1.1rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  color: #fff;
  outline: none;
  transition: border-color .2s, background .2s;
}
.anclair-wheel__manual input:focus {
  border-color: var(--c-gold);
  background: rgba(255,255,255,.10);
}
.anclair-wheel__manual input.is-error {
  color: #ff5b5b;
  border-color: #ff5b5b;
  background: rgba(255, 91, 91, .12);
  animation: wheelShake .35s ease-in-out;
}
@keyframes wheelShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.anclair-wheel__manual span {
  font-size: 1.2rem;
  color: var(--c-gold-light);
  font-weight: 500;
}

.anclair-wheel__columns {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 200px;
  user-select: none;
  -webkit-user-select: none;
}
.anclair-wheel__column-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.anclair-wheel__arrow {
  position: absolute;
  background: transparent;
  border: none;
  width: 30px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold-light);
  cursor: pointer;
  padding: 0;
  z-index: 4;
  opacity: .7;
  transition: opacity .2s, transform .2s;
}
.anclair-wheel__arrow:hover { opacity: 1; }
.anclair-wheel__arrow svg { width: 18px; height: 18px; }
.anclair-wheel__arrow--up   { top: -22px;    animation: arrowFloatUp   2s ease-in-out infinite; }
.anclair-wheel__arrow--down { bottom: -22px; animation: arrowFloatDown 2s ease-in-out infinite; }
@keyframes arrowFloatUp {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes arrowFloatDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.anclair-wheel__col {
  width: 80px;
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  text-align: center;
  position: relative;
  z-index: 2;
  -ms-overflow-style: none;
}
.anclair-wheel__col::-webkit-scrollbar { display: none; }
.anclair-wheel__pad { height: 80px; }
.anclair-wheel__item {
  height: 40px;
  line-height: 40px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  will-change: transform, opacity;
}
.anclair-wheel__item.is-current { color: var(--c-gold-light); }
.anclair-wheel__sep {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  color: var(--c-gold-light);
  font-weight: 500;
  z-index: 2;
}
.anclair-wheel__highlight {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 40px;
  transform: translateY(-50%);
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  pointer-events: none;
  z-index: 1;
}
.anclair-wheel__fade {
  position: absolute;
  left: 0; right: 0;
  height: 60px;
  pointer-events: none;
  z-index: 3;
}
.anclair-wheel__fade--top    { top: 0;    background: linear-gradient(to bottom, #1a1a1f 0%, transparent 100%); }
.anclair-wheel__fade--bottom { bottom: 0; background: linear-gradient(to top,    #1a1a1f 0%, transparent 100%); }

/* ============================================================
   ÉCRAN D'INTRO PLEIN ÉCRAN
   ============================================================ */
html.intro-active,
body.intro-active {
  overflow: hidden !important;
  height: 100vh;
  touch-action: none;
}

.anclair-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(163,126,44,.18), transparent 55%),
    linear-gradient(180deg, #1a0510 0%, #2a0b14 45%, #6e1423 100%);
  color: #f4ede4;
  text-align: center;
  padding: 5vh 6vw;
  animation: introFadeIn 1.1s var(--ease-out) both;
  overflow: hidden;
}

.anclair-intro::before,
.anclair-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.anclair-intro::before {
  background:
    radial-gradient(circle at 80% 90%, rgba(255,215,150,.12), transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(255,180,120,.08), transparent 45%);
}
.anclair-intro::after {
  /* fine vignette */
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
}

.anclair-intro__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 1.5vh, 1rem);
  animation: introRise 1.2s var(--ease-out) .15s both;
}

.anclair-intro__logo {
  width: clamp(110px, 18vw, 200px);
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.4)) brightness(1.05);
  margin-bottom: clamp(1rem, 3vh, 2rem);
}

.anclair-intro__eyebrow {
  font-family: var(--f-sans);
  font-size: clamp(.7rem, 1vw, .85rem);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: rgba(244,237,228,.7);
  margin: 0;
  padding-left: .5em; /* compense le letter-spacing à droite */
}

.anclair-intro__title {
  font-family: var(--f-serif);
  font-weight: 300;
  font-size: clamp(3rem, 9vw, 6.5rem);
  letter-spacing: clamp(.15em, .4vw, .3em);
  line-height: 1;
  color: #f4ede4;
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  padding-left: clamp(.1em, .3vw, .25em);
}

.anclair-intro__tagline {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  max-width: 36ch;
  line-height: 1.6;
  color: rgba(244,237,228,.85);
  margin: 0;
}

/* Bouton Suite en bas à droite */
.anclair-intro__next {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  right: clamp(1.5rem, 4vw, 3rem);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  background: transparent;
  border: none;
  color: #f4ede4;
  font-family: var(--f-sans);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  padding: 1rem;
  transition: color .25s ease;
  animation: introRise 1.2s var(--ease-out) .8s both;
}
.anclair-intro__next:hover { color: #f7d28b; }
.anclair-intro__next span {
  font-weight: 500;
}
.anclair-intro__arrow {
  width: 28px;
  height: 28px;
  animation: introArrowBounce 1.6s ease-in-out infinite;
}

/* Sortie : la couche d'intro glisse vers le haut + s'efface */
.anclair-intro.is-leaving {
  animation: introLeave .85s var(--ease-out) forwards;
  pointer-events: none;
}

@keyframes introFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes introRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes introArrowBounce {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50%      { transform: translateY(8px); opacity: 1; }
}
@keyframes introLeave {
  to { transform: translateY(-100%); opacity: 0; }
}

/* Sur petits écrans : le bouton Suite revient en bas centré */
@media (max-width: 640px) {
  .anclair-intro__next {
    right: 50%;
    transform: translateX(50%);
    bottom: 1.5rem;
  }
  .anclair-intro__title { letter-spacing: .18em; }
}

/* Respecte prefers-reduced-motion : on garde l'intro mais sans animations intenses */
@media (prefers-reduced-motion: reduce) {
  .anclair-intro,
  .anclair-intro__inner,
  .anclair-intro__next,
  .anclair-intro__arrow,
  .anclair-intro.is-leaving { animation: none !important; }
  .anclair-intro.is-leaving { display: none; }
}

/* ============================================================
   COMPARATEUR DE PIÈCES — toggle sur cartes + barre flottante
   ============================================================ */
.product-card { position: relative; }
.compare-toggle {
  position: absolute;
  top: 12px; left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--c-line);
  color: var(--c-mute);
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, color .25s ease, border-color .25s ease, background .25s ease;
}
.compare-toggle svg { width: 14px; height: 14px; }
.compare-toggle__check {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset .25s ease;
}
.product-card:hover .compare-toggle,
.compare-toggle.is-active {
  opacity: 1;
  transform: translateY(0);
}
.compare-toggle.is-active {
  background: var(--c-bordeaux);
  color: #fff;
  border-color: var(--c-bordeaux);
}
.compare-toggle.is-active .compare-toggle__check {
  stroke-dashoffset: 0;
}

.compare-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 120%);
  z-index: 200;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.compare-bar.is-visible {
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.compare-bar__inner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #1a1a1f;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.5);
}
.compare-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--c-gold);
  color: #1a1a1f;
  font-weight: 600;
  border-radius: 50%;
  font-family: var(--f-sans);
}
.compare-bar__text {
  font-family: var(--f-sans);
  font-size: var(--fs-13);
  color: rgba(255,255,255,.85);
}
.compare-bar [data-compare-clear] {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.compare-bar [data-compare-clear]:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
}

/* ============================================================
   PAGE COMPARATEUR — tableau côte à côte
   ============================================================ */
.comparator {
  padding: var(--s-48) 0 var(--s-96);
}
.comparator__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-24);
}
@media (min-width: 700px)  { .comparator__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .comparator__grid.has-3 { grid-template-columns: repeat(3, 1fr); } }

.comparator__card {
  background: var(--c-paper-pure);
  border: 1px solid var(--c-line);
  padding: var(--s-32);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  position: relative;
}
.comparator__card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--c-paper);
  border-radius: 4px;
}
.comparator__card h3 {
  margin: 0; font-family: var(--f-serif); font-size: 1.4rem;
  color: var(--c-bordeaux-dark);
}
.comparator__card-price {
  font-size: 1.3rem;
  color: var(--c-gold);
  font-weight: 500;
}
.comparator__card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  row-gap: 6px;
  margin: 8px 0 0;
  font-size: var(--fs-13);
}
.comparator__card dt {
  color: var(--c-mute);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: 10px;
}
.comparator__card dd {
  margin: 0;
  color: var(--c-ink);
}
.comparator__card .btn {
  margin-top: auto;
}
.comparator__remove {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  background: var(--c-paper-pure);
  color: var(--c-mute);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: color .2s, border-color .2s;
}
.comparator__remove:hover { color: var(--c-bordeaux); border-color: var(--c-bordeaux); }
.comparator__empty {
  text-align: center;
  padding: var(--s-96) var(--s-24);
  color: var(--c-mute);
}

/* ============================================================
   MODE SON ATELIER — bouton tic-tac discret
   ============================================================ */
.atelier-sound {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--c-line);
  color: var(--c-mute);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--f-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.atelier-sound svg { width: 16px; height: 16px; }
.atelier-sound__on  { display: none; }
.atelier-sound__off { display: block; }
.atelier-sound.is-on .atelier-sound__on  { display: block; }
.atelier-sound.is-on .atelier-sound__off { display: none; }
.atelier-sound.is-on {
  color: var(--c-gold);
  border-color: var(--c-gold);
  background: rgba(163,126,44,.07);
}
.atelier-sound:hover { color: var(--c-bordeaux); border-color: var(--c-bordeaux); }
.atelier-sound.is-on:hover { color: var(--c-gold-light); border-color: var(--c-gold-light); }

/* ============================================================
   MONTRE EN DIRECT — l'heure réelle sur l'accueil
   ============================================================ */
.live-watch {
  padding: var(--s-64) 0 var(--s-32);
  text-align: center;
}
.live-watch__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
}
.live-watch__face {
  width: clamp(130px, 15vw, 175px);
  filter: drop-shadow(0 12px 28px -14px rgba(110,20,35,.35));
}
.live-watch__svg { width: 100%; height: auto; display: block; }
:root[data-theme="dark"] .live-watch__face {
  filter: drop-shadow(0 12px 28px -14px rgba(0,0,0,.6));
}

/* Mini-horloge dans l'en-tête.
   Le CONTENEUR gère le clip (max-width + overflow hidden) → pas de glitch.
   Le SVG garde une taille FIXE 34×34 en permanence. */
.live-watch-mini-wrap {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  transform: translateY(-12px);
  overflow: hidden;
  pointer-events: none;
  transition: max-width .4s var(--ease-out), opacity .4s var(--ease-out),
              transform .4s var(--ease-out), margin .4s var(--ease-out);
}
.live-watch-mini-wrap.is-visible {
  max-width: 36px;
  opacity: 1;
  transform: translateY(0);
  margin-right: 8px;
  pointer-events: auto;
  cursor: pointer;
}
.live-watch-mini-wrap.is-visible:hover {
  transform: translateY(0) scale(1.08);
}
.live-watch-mini {
  width: 34px;
  height: 34px;
  display: block;
  flex: 0 0 auto;
  transition: transform .25s var(--ease-out);
}

/* ============================================================
   ANCLAIR — MICRO-ANIMATIONS DISCRÈTES (donne vie au site)
   Toutes désactivées sous prefers-reduced-motion (voir tout en bas).
   ============================================================ */

/* Smooth scroll global pour les ancres */
html { scroll-behavior: smooth; }

/* --- Logo : léger gonflement & glow doré au survol --- */
.site-header__logo {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.site-header__logo:hover {
  transform: translateY(-1px) scale(1.02);
  filter: drop-shadow(0 4px 10px rgba(163,126,44,.25));
}

/* --- Boutons primaires : trace de lumière dorée qui balaye au survol --- */
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,232,180,.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 0;
  transition: left .7s cubic-bezier(.4,.0,.2,1);
}
.btn--primary:hover::after { left: 130%; }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px rgba(110,20,35,.45); }
.btn--primary:active { transform: translateY(0); }

/* --- Boutons ghost : remplissage subtil au survol --- */
.btn--ghost {
  position: relative;
  transition: transform .25s ease, color .25s ease, border-color .25s ease;
}
.btn--ghost:hover {
  transform: translateY(-1px);
}

/* --- Icon buttons (header) : scale + couleur --- */
.icon-btn {
  transition: transform .2s ease, color .2s ease;
}
.icon-btn:hover {
  transform: scale(1.08);
  color: var(--c-bordeaux);
}
:root[data-theme="dark"] .icon-btn:hover { color: var(--c-gold-light); }

/* --- Cartes produit : lift + zoom image discret --- */
.product-card { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.product-card:hover { transform: translateY(-4px); }
.product-card__media img {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.product-card:hover .product-card__media img {
  transform: scale(1.04);
}

/* --- Cartes collection (Montres/Bijoux/Maroquinerie sur l'accueil) --- */
.collection-card {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.collection-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -18px rgba(0,0,0,.35);
}

/* --- Liens du footer : trait qui se révèle de la gauche --- */
.site-footer a {
  position: relative;
  transition: color .2s ease;
}
.site-footer a:not(.btn)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.site-footer a:hover:not(.btn)::after { transform: scaleX(1); }

/* --- Filter pills : transition fluide + subtile élévation à l'actif --- */
.filter-pill {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
.filter-pill:hover:not(.is-active) { transform: translateY(-1px); }
.filter-pill.is-active { transform: translateY(-1px); }

/* --- Champs de formulaire : focus avec halo doré subtil --- */
.form-field input,
.form-field textarea,
.form-field select {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(163,126,44,.18);
}

/* --- Eyebrow : petit trait latéral qui pulse doucement --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  animation: eyebrowGlow 3.6s ease-in-out infinite;
}
@keyframes eyebrowGlow {
  0%, 100% { opacity: .55; transform: scaleX(1); }
  50%      { opacity: 1;   transform: scaleX(1.18); }
}

/* --- Compteur du panier : rebondit lorsqu'on ajoute un article --- */
.cart-count { transition: transform .2s ease; }
.cart-count.is-bumping {
  animation: cartBump .55s cubic-bezier(.4,1.8,.5,1) both;
}
@keyframes cartBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* --- Cartes "Calibre 3D" et "carte SD" : flotte subtilement au survol --- */
.calibre-3d, .sd-card-section {
  transition: transform .5s ease;
}
.calibre-3d:hover, .sd-card-section:hover {
  transform: translateY(-2px);
}

/* --- Liens secondaires (link-underline) : trait qui se prolonge --- */
.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(.6);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* --- Apparition des sections au scroll (existant data-reveal + glissement) --- */
[data-reveal] { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }

/* --- Vignette héros : très léger zoom pendant 12s pour donner vie --- */
.hero__image,
.hero-image {
  animation: heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.04) translate(-1%, -1%); }
}

/* --- Badge "limited" : pulse doré toutes les 4s --- */
.badge--limited,
.pdp-limited {
  animation: limitedPulse 4s ease-in-out infinite;
}
@keyframes limitedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163,126,44,0); }
  50%      { box-shadow: 0 0 0 6px rgba(163,126,44,.15); }
}

/* --- Theme toggle : déjà animé, on l'enrichit d'un léger glow --- */
.theme-toggle { transition: transform .25s ease, background .25s ease; }
.theme-toggle:hover { transform: rotate(15deg) scale(1.06); }

/* --- Respecte prefers-reduced-motion : tout désactivé --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn--primary::after,
  .eyebrow::before,
  .hero__image, .hero-image,
  .badge--limited, .pdp-limited,
  .cart-count.is-bumping {
    animation: none !important;
  }
  .site-header__logo,
  .btn--primary, .btn--ghost,
  .icon-btn,
  .product-card, .collection-card,
  .product-card__media img,
  .filter-pill, .theme-toggle {
    transition: none !important;
  }
}


/* ============================================================
   PAGE COMMANDE / PAIEMENT (checkout)
   ============================================================ */
.checkout { padding: var(--s-48) 0 var(--s-96); }
.checkout__head { text-align: center; margin-bottom: var(--s-48); }
.checkout__empty { text-align: center; padding: var(--s-96) var(--s-24); color: var(--c-mute); }
.checkout__empty .btn { margin-top: var(--s-24); }

.checkout__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-48);
  align-items: start;
}
@media (min-width: 920px) {
  .checkout__grid { grid-template-columns: 1.5fr 1fr; }
}

/* Blocs formulaire */
.checkout__block {
  border: none;
  border-top: 1px solid var(--c-line);
  padding: var(--s-24) 0;
  margin: 0;
}
.checkout__block:first-child { border-top: none; padding-top: 0; }
.checkout__block legend {
  font-family: var(--f-serif);
  font-size: 1.3rem;
  color: var(--c-bordeaux-dark);
  margin-bottom: var(--s-16);
  padding: 0;
}
.checkout__form .form-field { margin-bottom: var(--s-16); }

/* Options livraison */
.checkout__option {
  display: flex; align-items: center; gap: var(--s-16);
  border: 1px solid var(--c-line); border-radius: 8px;
  padding: var(--s-16); margin-bottom: var(--s-12); cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.checkout__option:hover { border-color: var(--c-bordeaux); }
.checkout__option:has(input:checked) { border-color: var(--c-bordeaux); background: rgba(110,20,35,.04); }
.checkout__option input { accent-color: var(--c-bordeaux); width: 18px; height: 18px; flex: 0 0 auto; }
.checkout__option-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.checkout__option-title { font-weight: 500; }
.checkout__option-desc { font-size: var(--fs-13); color: var(--c-mute); }
.checkout__option-price { font-family: var(--f-serif); font-size: 1.1rem; color: var(--c-bordeaux); white-space: nowrap; }

/* Papier cadeau */
.checkout__giftwrap {
  display: flex; align-items: center; gap: var(--s-16);
  border: 1px dashed var(--c-gold); border-radius: 8px;
  padding: var(--s-16); cursor: pointer; background: rgba(163,126,44,.04);
  transition: background .2s ease;
}
.checkout__giftwrap:has(input:checked) { background: rgba(163,126,44,.10); }
.checkout__giftwrap input { accent-color: var(--c-gold); width: 18px; height: 18px; flex: 0 0 auto; }
.checkout__giftwrap-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.checkout__giftwrap-title { font-weight: 500; }
.checkout__giftwrap-desc { font-size: var(--fs-13); color: var(--c-mute); }

/* Récapitulatif */
.checkout__summary {
  background: var(--c-paper-pure);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  padding: var(--s-32);
  position: sticky; top: calc(var(--header-h) + var(--s-24));
}
.checkout__summary h2 { font-size: 1.4rem; margin-bottom: var(--s-24); color: var(--c-bordeaux-dark); }
.checkout__items { list-style: none; margin: 0 0 var(--s-24); padding: 0; display: flex; flex-direction: column; gap: var(--s-16); }
.checkout__item { display: flex; gap: var(--s-12); align-items: flex-start; }
.checkout__item img, .checkout__item-noimg {
  width: 54px; height: 54px; object-fit: cover; border-radius: 6px;
  background: var(--c-paper); flex: 0 0 auto;
}
.checkout__item-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.checkout__item-name { font-weight: 500; font-size: var(--fs-14); }
.checkout__item-meta { font-size: var(--fs-12); color: var(--c-mute); }
.checkout__item-qty  { font-size: var(--fs-12); color: var(--c-mute); }
.checkout__item-price { font-family: var(--f-serif); white-space: nowrap; }

/* Code promo */
.checkout__promo { border-top: 1px solid var(--c-line); padding-top: var(--s-24); margin-bottom: var(--s-16); }
.checkout__promo label { font-size: var(--fs-12); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--c-mute); display: block; margin-bottom: 8px; }
.checkout__promo-row { display: flex; gap: 8px; }
.checkout__promo-row input { flex: 1; padding: .6rem .9rem; border: 1px solid var(--c-line); border-radius: 6px; font-size: var(--fs-14); }
.checkout__promo-msg { font-size: var(--fs-13); margin-top: 8px; min-height: 1.1em; }
.checkout__promo-msg[data-kind="error"] { color: #b3001b; }
.checkout__promo-msg[data-kind="ok"] { color: #1f7a3a; }
.checkout__promo-msg[data-kind="win"] { color: var(--c-bordeaux); font-weight: 500; }
:root[data-theme="dark"] .checkout__promo-msg[data-kind="win"] { color: var(--c-gold-light); }

/* Totaux */
.checkout__totals { border-top: 1px solid var(--c-line); padding-top: var(--s-16); margin: 0 0 var(--s-24); }
.checkout__total-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: var(--fs-14); }
.checkout__total-row dt { color: var(--c-mute); }
.checkout__total-row dd { margin: 0; font-family: var(--f-serif); }
.checkout__total-row--grand { border-top: 1px solid var(--c-line); margin-top: 8px; padding-top: 14px; font-size: 1.25rem; }
.checkout__total-row--grand dt { color: var(--c-ink); font-weight: 500; }
.checkout__total-row--grand dd { color: var(--c-bordeaux); font-weight: 500; }

.checkout__pay { width: 100%; justify-content: center; font-size: var(--fs-15); padding: 1rem; }
.checkout__secure { font-size: var(--fs-12); color: var(--c-mute); text-align: center; margin-top: var(--s-12); line-height: 1.5; }
.checkout__msg { font-size: var(--fs-13); text-align: center; margin-top: var(--s-12); min-height: 1.1em; }
.checkout__msg[data-kind="error"] { color: #b3001b; }
.checkout__msg[data-kind="ok"] { color: #1f7a3a; }

/* Page de confirmation (merci.html) */
.checkout__confirm { max-width: 620px; margin: 0 auto; text-align: center; padding: var(--s-32) 0; }
.checkout__confirm-mark { width: 84px; height: 84px; margin: 0 auto var(--s-24); color: var(--c-bordeaux); }
.checkout__confirm-mark svg { width: 100%; height: 100%; display: block; }
.checkout__confirm-mark circle { stroke-dasharray: 189; stroke-dashoffset: 189; animation: confirmRing .9s ease forwards .1s; }
.checkout__confirm-mark path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: confirmCheck .5s ease forwards .7s; }
@keyframes confirmRing { to { stroke-dashoffset: 0; } }
@keyframes confirmCheck { to { stroke-dashoffset: 0; } }
.checkout__confirm h1 { margin: var(--s-8) 0 var(--s-16); }
.checkout__confirm-text { color: var(--c-mute); line-height: 1.7; margin: 0 auto var(--s-12); max-width: 52ch; }
.checkout__confirm-ref { font-size: var(--fs-13); letter-spacing: .06em; color: var(--c-ink); opacity: .8; margin-bottom: var(--s-24); }
.checkout__confirm-actions { display: flex; gap: var(--s-12); justify-content: center; flex-wrap: wrap; margin-top: var(--s-24); }
@media (prefers-reduced-motion: reduce) {
  .checkout__confirm-mark circle, .checkout__confirm-mark path { animation: none; stroke-dashoffset: 0; }
}

/* Dark mode */
:root[data-theme="dark"] .checkout__summary { background: var(--c-paper); }
:root[data-theme="dark"] .checkout__giftwrap { background: rgba(163,126,44,.08); }
:root[data-theme="dark"] .checkout__promo-msg[data-kind="error"],
:root[data-theme="dark"] .checkout__msg[data-kind="error"] { color: #ff8d8d; }
:root[data-theme="dark"] .checkout__promo-msg[data-kind="ok"],
:root[data-theme="dark"] .checkout__msg[data-kind="ok"] { color: #7ad9a3; }

/* ======================================================================
   OPTIMISATION MOBILE — corrections d'affichage sur téléphone
   (débordements, en-tête compact, boutons). Ajouté en fin de feuille
   pour primer sur les règles précédentes, sans toucher au bureau.
   ====================================================================== */

/* 1) Plus aucun défilement horizontal / élément hors écran.
   « clip » évite le scroll latéral SANS casser l'en-tête collant. */
html, body { overflow-x: clip; }
img, svg, picture, video, iframe { max-width: 100%; height: auto; }
/* Exceptions : médias qui doivent remplir leur cadre (ne pas forcer height:auto) */
.hero__media img, .pdp__layered-img, .collection-card img,
.product-card__media img, .editorial-block__media img { height: 100%; }

/* 2) Boutons : jamais plus larges que l'écran */
@media (max-width: 768px) {
  .btn { max-width: 100%; }
  /* CTA du hero : empilés et pleine largeur (cibles nettes au doigt) */
  .hero__cta { width: 100%; gap: 12px; }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* 3) En-tête compact sur petits écrans pour que tout tienne */
@media (max-width: 560px) {
  .site-header__inner { gap: 8px; }
  .site-header__actions { gap: 2px; }
  .icon-btn { width: 38px; height: 38px; }
  .icon-btn svg { width: 20px; height: 20px; }
  /* Wordmark un peu plus compact pour ne pas chevaucher les icônes */
  .logo-mark { font-size: 18px; letter-spacing: .28em; text-indent: .28em; }
  .logo-tagline { font-size: 9px; }
  /* Mini-horloge masquée sur petit écran (gain de place dans la barre) */
  .live-watch-mini-wrap, .live-watch-mini-wrap.is-visible { display: none !important; }
}