/* ================================================================
   ENZINO — Design System v2
   Inspirations : Tappan Collective, Paper Collective, JUNIQE
   Direction : galerie d'art nocturne, cinématique, premium
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:root {
  --bg-deep: #07090f;
  --bg-night: #0d1018;
  --bg-card: #12151f;
  --bg-elevated: #1a1e2c;

  --fg-white: #f5f3ed;
  --fg-cream: #d9d5cb;
  --fg-muted: #8b8778;
  --fg-dim: #5a574d;

  --accent: #d4a857;
  --accent-warm: #e6bf72;
  --accent-deep: #8e6f33;
  --accent-glow: rgba(212, 168, 87, 0.12);

  --border-subtle: rgba(212, 168, 87, 0.06);
  --border-soft: rgba(245, 243, 237, 0.06);
  --border-emphasis: rgba(245, 243, 237, 0.14);

  --font-serif: 'Fraunces', Georgia, serif;
  --font-display: 'DM Serif Display', 'Fraunces', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 1040px;
  --container-narrow: 1200px;
  --gutter: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--fg-cream);
  min-height: 100vh;
  font-weight: 400;
  letter-spacing: 0.005em;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--fg-white);
}

h1 { font-size: clamp(2.25rem, 7vw, 5.5rem); line-height: 1.02; letter-spacing: -0.03em; }

/* h2 = titres de section éditoriaux. DM Serif Display italic pour
   l'impact, taille réduite ~20% vs valeur de base (DM Serif est plus
   dense que Fraunces). Fraunces reste fallback. */
h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 { font-size: 1.15rem; line-height: 1.3; font-weight: 400; }

p { line-height: 1.7; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }

/* -- HEADER -------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.5rem 0;
  transition: background 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}

/* Sur mobile, sur les pages qui ne sont PAS la home, on passe le header en
   sticky pour qu'il occupe sa place dans le flux et que le contenu se positionne
   naturellement en dessous, sans jamais chevaucher. La home garde fixed pour
   continuer à flotter par-dessus l'image hero. */
@media (max-width: 700px) {
  .site-header.is-not-home {
    position: sticky;
  }
  /* Du coup les pages non-home n'ont plus besoin de padding-top spécial */
}

.site-header.is-scrolled,
.site-header.is-not-home {
  background: rgba(7, 9, 15, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-soft);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: 2rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  line-height: 0; /* évite tout espace fantôme autour de l'image */
}
.logo img {
  display: block;
  height: 38px;
  width: auto;
  max-width: 100%;
  /* Anti-aliasing crisp sur écran retina */
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 700px) {
  .logo img { height: 32px; }
}

.nav-main { display: flex; align-items: center; gap: 2.5rem; justify-self: center; }

.nav-main a {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-white);
  transition: color 0.2s var(--ease);
  position: relative;
  padding: 0.25rem 0;
}

.nav-main a:hover, .nav-main a.active { color: var(--accent); }

.nav-main a.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 3px; height: 3px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: end;
}

.lang-switch {
  display: flex;
  gap: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin-right: 0.5rem;
}

.lang-switch a.active { color: var(--fg-white); }
.lang-switch a:hover { color: var(--accent); }

/* Currency switcher (€ / $) — même style minimaliste que lang-switch */
.currency-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
}

.currency-switch button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fg-dim);
  font-size: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  transition: color 0.2s var(--ease);
}

.currency-switch button.active { color: var(--fg-white); }
.currency-switch button:hover  { color: var(--accent); }

/* Le form du drawer mobile pour devise réutilise .mobile-drawer-lang */
.mobile-drawer-lang button {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.mobile-drawer-lang button.active {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 700px) {
  /* Le switcher devise est masqué en mobile (accessible via drawer) */
  .currency-switch { display: none; }
}

/* -- Header icon buttons (compte / favoris / panier) --------- */
.header-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--fg-white);
  transition: color 0.2s ease, background 0.2s ease;
}

.header-icon:hover {
  color: var(--fg-white);
  background: rgba(255, 255, 255, 0.06);
}

.header-icon svg { display: block; }

.header-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.header-icon-badge[hidden] { display: none; }

/* Petit point doré pour signaler "connecté" sur l'icône utilisateur */
.header-icon-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-deep);
}

/* ============================================================
   ESPACE CLIENT v2 — sidebar avec avatar + iconnes,
   hero card, stats tiles, orders list moderne, auth premium.
   ============================================================ */

/* Spécificité bumpée (.section.account-section) pour surclasser
   la règle générique .section { padding: 7rem 0 } qui vient plus tard
   dans le fichier et écrase tout le padding. */
.section.account-section,
.account-section {
  padding-top: 9rem;
  padding-bottom: 6rem;
  min-height: 70vh;
}

@media (max-width: 700px) {
  .section.account-section,
  .account-section {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

/* ---- Layout sidebar + main -------------------------------- */
.account-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .account-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---- Sidebar ---------------------------------------------- */
.account-sidebar {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(20, 20, 24, 0.9) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem 1.25rem;
  position: sticky;
  top: 110px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.account-sidebar-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.account-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #b58e3e 100%);
  color: #0d0d0d;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  box-shadow:
    0 6px 18px rgba(212, 168, 87, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  position: relative;
}

.account-avatar::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 87, 0.25);
  pointer-events: none;
}

.account-sidebar-identity strong {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg-white);
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
}

.account-sidebar-identity small {
  font-size: 0.76rem;
  color: var(--fg-muted);
  word-break: break-all;
}

.account-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-nav-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--fg-cream);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.account-nav-item svg {
  color: var(--fg-dim);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.account-nav-item:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-white);
}
.account-nav-item:hover svg { color: var(--fg-muted); }

.account-nav-item.is-active {
  background: rgba(212, 168, 87, 0.08);
  color: var(--accent);
}
.account-nav-item.is-active svg { color: var(--accent); }

.account-logout-form {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.account-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.account-logout-btn:hover {
  color: var(--fg-white);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---- Mobile : sidebar compactée (placé après les règles de base
   pour pouvoir surclasser position: sticky qui sinon écrase) -- */
@media (max-width: 960px) {
  .account-sidebar {
    position: relative;
    top: auto;
    padding: 1.25rem 1rem;
    min-width: 0;
    overflow: hidden;   /* contient la nav scrollable, évite le débordement horizontal page */
  }

  .account-sidebar-user {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 0.85rem;
  }

  .account-avatar {
    width: 48px;
    height: 48px;
    font-size: 1rem;
    margin-bottom: 0;
  }

  .account-sidebar-identity { min-width: 0; flex: 1; }

  .account-sidebar-identity small {
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-nav {
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.25rem;
    padding: 0 0.25rem 0.25rem;
    scrollbar-width: none;
  }
  .account-nav::-webkit-scrollbar { display: none; }

  .account-nav-item {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }

  .account-logout-form {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
  }
}

/* ---- Main col --------------------------------------------- */
.account-main { min-width: 0; }

/* Page head générique (orders, profile, favorites) */
.account-page-head {
  margin-bottom: 2rem;
}
.account-page-head-center { text-align: center; margin-bottom: 3rem; }

.account-page-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.65rem;
  font-weight: 500;
}

.account-page-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2rem;
  font-weight: 500;
  color: var(--fg-white);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.account-page-sub {
  font-size: 0.95rem;
  color: var(--fg-muted);
  max-width: 580px;
  line-height: 1.55;
}

.account-page-head-center .account-page-sub {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Dashboard hero card ---------------------------------- */
.account-hero {
  position: relative;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(212, 168, 87, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-card) 0%, rgba(18, 19, 24, 0.95) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 2.25rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.account-hero-text { position: relative; z-index: 1; }

.account-hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
  font-weight: 500;
}

.account-hero-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--fg-white);
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.account-hero-title span {
  background: linear-gradient(135deg, var(--accent) 0%, #e6c47e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

.account-hero-sub {
  font-size: 0.95rem;
  color: var(--fg-muted);
  max-width: 540px;
  line-height: 1.55;
  margin: 0;
}

.account-hero-glow {
  position: absolute;
  top: -100px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(212, 168, 87, 0.18) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 600px) {
  .account-hero { padding: 1.5rem 1.25rem 1.75rem; }
  .account-hero-title { font-size: 1.75rem; }
}

/* ---- Stats grid ------------------------------------------- */
.account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
  .account-stats { grid-template-columns: 1fr; }
}

.account-stat {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
}

.account-stat:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.account-stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.account-stat-icon-orders {
  background: rgba(96, 165, 250, 0.10);
  color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.15);
}

.account-stat-icon-favorites {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.15);
}

.account-stat-icon-spent {
  background: rgba(212, 168, 87, 0.10);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 87, 0.15);
}

.account-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-stat-num {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--fg-white);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.account-stat-label {
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ---- Generic card ----------------------------------------- */
.account-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}

.account-card-flush { padding: 0.5rem; }

.account-card-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-white);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  letter-spacing: -0.005em;
}

.account-card-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(212, 168, 87, 0.10);
  color: var(--accent);
}

.account-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.account-card-head h3 {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-white);
  margin: 0;
  letter-spacing: -0.005em;
}

.account-card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  transition: color 0.15s, gap 0.15s;
}

.account-card-action:hover {
  color: #e6c47e;
  gap: 0.5rem;
}

/* ---- Orders list ------------------------------------------ */
.account-orders-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.account-card-flush .account-orders-list > li + li,
.account-card .account-orders-list > li + li {
  border-top: 1px solid var(--border-soft);
}

.account-order-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto auto 32px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
}

/* Bouton "Reprendre le paiement" — petit, mais visible */
.account-order-resume {
  font-size: 0.78rem;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .account-order-resume {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 0.5rem;
  }
}

.account-order-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.account-order-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-order-id strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-white);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  letter-spacing: -0.01em;
}

.account-order-id small {
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.account-order-total {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: right;
}

.account-order-link {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  border: 1px solid var(--border-soft);
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}

.account-order-link:hover {
  color: var(--accent);
  border-color: rgba(212, 168, 87, 0.3);
  background: rgba(212, 168, 87, 0.05);
  transform: translateX(2px);
}

@media (max-width: 700px) {
  .account-order-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id total"
      "status arrow";
    gap: 0.5rem 0.75rem;
    padding: 0.85rem 1rem;
  }
  .account-order-row .account-order-id { grid-area: id; }
  .account-order-row .account-order-total { grid-area: total; }
  .account-order-row .account-status { grid-area: status; justify-self: start; }
  .account-order-row .account-order-link { grid-area: arrow; justify-self: end; }
}

/* ---- Status pills ----------------------------------------- */
.account-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px 4px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: 0;
  white-space: nowrap;
  width: fit-content;
}

.account-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
}

.account-status-pending {
  background: rgba(251, 191, 36, 0.10);
  color: #fbbf24;
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.18);
}

.account-status-paid {
  background: rgba(52, 211, 153, 0.10);
  color: #34d399;
  box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.18);
}

.account-status-failed {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.18);
}

.account-status-refunded {
  background: rgba(96, 165, 250, 0.10);
  color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.18);
}

/* ---- Empty state ------------------------------------------ */
.account-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.account-empty-page {
  padding: 4rem 1.5rem;
  max-width: 480px;
  margin: 0 auto;
}

.account-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  color: var(--fg-dim);
}

.account-empty p {
  color: var(--fg-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* ---- Forms (login / register / profile) ------------------- */
/* Spacing global des formulaires via gap. S'applique à .account-form
   (register/login/profile) ET à .checkout-form (parcours d'achat).
   Cohérent quel que soit le type d'enfant (.account-field standalone,
   .account-field-row, .checkout-section, etc.). */
.account-form,
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
/* Reset des margin-bottom obsolètes : maintenant c'est le gap parent qui gère */
.account-form .account-field,
.account-form .account-field-row,
.checkout-form .account-field,
.checkout-form .account-field-row {
  margin-bottom: 0;
}

.account-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--fg-cream);
  margin-bottom: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.account-field input,
.account-field select,
.account-field textarea {
  width: 100%;
  padding: 0.75rem 0.95rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-white);
  font-size: 0.92rem;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.account-field input::placeholder {
  color: var(--fg-dim);
}

.account-field input:hover,
.account-field select:hover,
.account-field textarea:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.account-field input:focus,
.account-field select:focus,
.account-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px rgba(212, 168, 87, 0.12);
}

.account-field-hint {
  display: block;
  color: var(--fg-dim);
  font-size: 0.72rem;
  margin-top: 0.35rem;
}

.account-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1.25rem; /* row-gap, column-gap : plus d'air vertical entre les paires */
  margin-bottom: 1.9rem; /* même espacement qu'un .account-field standalone */
}

/* Les .account-field à l'intérieur d'un .account-field-row n'ont pas besoin
   de margin-bottom (la grille gère les espacements via gap). */
.account-field-row .account-field {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .account-field-row { grid-template-columns: 1fr; }
}

.account-form-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

/* ---- Alerts ----------------------------------------------- */
.account-alert {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.account-alert-error {
  background: rgba(215, 110, 110, 0.08);
  border-color: rgba(215, 110, 110, 0.25);
  color: #e89191;
}

.account-alert-success {
  background: rgba(110, 199, 138, 0.08);
  border-color: rgba(110, 199, 138, 0.25);
  color: #8fd4a3;
}

/* ---- Auth pages (login / register) ------------------------ */
.account-auth-section {
  padding-top: 8rem;
  padding-bottom: 6rem;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Sur mobile : align-items: flex-start + padding-top suffisant pour ne pas
   chevaucher le header fixed quand le formulaire est haut (avec erreurs, etc.) */
@media (max-width: 700px) {
  .account-auth-section {
    align-items: flex-start;
    min-height: 0;
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}

.account-auth-section::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(212, 168, 87, 0.06) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.account-auth-shell {
  width: 100%;
  max-width: 460px;
  padding: 0 1.25rem;
  position: relative;
  z-index: 1;
}

.account-auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    0 20px 40px rgba(0,0,0,0.3);
}

.account-auth-head {
  text-align: center;
  margin-bottom: 2rem;
}

.account-auth-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
  font-weight: 500;
}

.account-auth-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.85rem;
  font-weight: 500;
  color: var(--fg-white);
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.account-auth-sub {
  font-size: 0.9rem;
  color: var(--fg-muted);
  line-height: 1.5;
  margin: 0;
}

.account-alt {
  text-align: center;
  margin-top: 1.75rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

.account-alt a {
  color: var(--accent);
  font-weight: 500;
  margin-left: 0.25rem;
}
.account-alt a:hover { color: #e6c47e; }

@media (max-width: 480px) {
  .account-auth-card { padding: 2rem 1.5rem; }
  .account-auth-title { font-size: 1.5rem; }
}

/* -- CHECKOUT ----------------------------------------------- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; gap: 2rem; }
}

.checkout-login-hint {
  background: rgba(212, 168, 87, 0.06);
  border: 1px solid rgba(212, 168, 87, 0.18);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--fg-cream);
}
.checkout-login-hint a {
  color: var(--accent);
  font-weight: 500;
  margin-left: 0.4rem;
}

.checkout-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  /* Flex column avec gap → espacement uniforme entre h3, fields, field-rows */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.checkout-card h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg-white);
  margin: 0; /* le gap parent gère l'espacement */
}

.checkout-req {
  color: var(--accent);
  margin-left: 0.15rem;
}

.checkout-submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.checkout-submit-row .btn-primary { padding: 1rem 2rem; }

.checkout-secure {
  text-align: center;
  font-size: 0.78rem;
  color: var(--fg-dim);
  margin-top: 1rem;
}

.checkout-alert {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.checkout-alert-error   { background: rgba(215, 110, 110, 0.08); border-color: rgba(215, 110, 110, 0.3); color: #e89191; }
.checkout-alert-success { background: rgba(110, 199, 138, 0.08); border-color: rgba(110, 199, 138, 0.3); color: #8fd4a3; }
.checkout-alert-info    { background: rgba(122, 168, 209, 0.08); border-color: rgba(122, 168, 209, 0.3); color: #a3c5dd; }

/* Summary (colonne droite) */
.checkout-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  position: sticky;
  top: 100px;
}

.checkout-summary h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg-white);
  margin-bottom: 1.25rem;
}

.checkout-lines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.checkout-lines li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}
.checkout-lines li:last-child { border-bottom: none; padding-bottom: 0; }

.checkout-lines img {
  width: 48px; height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.checkout-lines div { flex: 1; min-width: 0; }

.checkout-lines strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--fg-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkout-lines small {
  display: block;
  font-size: 0.72rem;
  color: var(--fg-muted);
  margin-top: 2px;
}

.checkout-lines li > span {
  font-size: 0.85rem;
  color: var(--fg-cream);
  white-space: nowrap;
}

.checkout-totals {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
}

.checkout-totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: var(--fg-muted);
}
.checkout-totals > div small { font-size: 0.72rem; color: var(--fg-dim); }

.checkout-total {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
  font-size: 1rem !important;
  color: var(--fg-white) !important;
}
.checkout-total strong { font-size: 1.15rem; }

/* -- ORDER PAGE --------------------------------------------- */
.order-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.order-card-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--fg-white);
  margin-bottom: 1.25rem;
}

.order-items {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}
.order-item:last-child { border-bottom: none; padding-bottom: 0; }

.order-item-thumb {
  width: 56px; height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.order-item-body { flex: 1; min-width: 0; }
.order-item-body strong {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-white);
}
.order-item-body small {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-muted);
  margin-top: 2px;
}

.order-totals {
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.order-totals > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}
.order-total {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
  color: var(--fg-white) !important;
}
.order-total strong { font-size: 1.1rem; }

/* Bouton "Télécharger la facture" sous les totaux */
.order-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.7rem 1rem;
  background: transparent;
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-cream);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.order-invoice-link svg { color: var(--accent); flex-shrink: 0; }
.order-invoice-link:hover {
  border-color: var(--accent);
  background: rgba(212, 168, 87, 0.05);
  color: var(--fg-white);
}

.order-address {
  font-style: normal;
  line-height: 1.7;
  color: var(--fg-cream);
}

/* Le bouton burger : caché par défaut, visible sur mobile */
.burger-btn {
  display: none;
  width: 38px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.burger-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--fg-white);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 700px) {
  /* Sur mobile, le header passe en 2 colonnes : logo | actions à droite */
  .header-inner { grid-template-columns: auto 1fr; gap: 1rem; }
  .nav-right    { gap: 0.4rem; }
  .lang-switch  { display: none; }
  .nav-main     { display: none; }
  .header-icon  { width: 36px; height: 36px; }
  .burger-btn   { display: flex; }
}

/* -- MOBILE DRAWER ------------------------------------------- */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 15, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 95;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.mobile-drawer-overlay.is-open { opacity: 1; }
.mobile-drawer-overlay[hidden] { display: none; }

.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(85vw, 360px);
  background: var(--bg-night);
  border-left: 1px solid var(--border-emphasis);
  z-index: 100;
  padding: 4.5rem 1.75rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer[hidden] { display: none; }

.mobile-drawer-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--fg-white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.mobile-drawer-close:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--fg-white);
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.mobile-drawer-nav a {
  padding: 1rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--fg-white);
  border-bottom: 1px solid var(--border-soft);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-drawer-nav a:hover { color: var(--accent); padding-left: 4px; }

.mobile-drawer-section {
  margin-bottom: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
}
.mobile-drawer-section:first-of-type { border-top: none; padding-top: 0; }

.mobile-drawer-eyebrow {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.mobile-drawer-section a {
  display: block;
  padding: 0.6rem 0;
  font-size: 0.95rem;
  color: var(--fg-cream);
  transition: color 0.2s ease;
}
.mobile-drawer-section a:hover { color: var(--fg-white); }

.mobile-drawer-lang {
  display: flex;
  gap: 0.75rem;
}
.mobile-drawer-lang a {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mobile-drawer-lang a.active {
  border-color: var(--accent);
  color: var(--accent);
}

.mobile-drawer-logout {
  display: block;
  width: 100%;
  padding: 0.7rem 0;
  margin-top: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-muted);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mobile-drawer-logout:hover { color: var(--fg-white); border-color: var(--fg-white); }

/* -- Mini-cart popup au hover (desktop) ---------------------- */
.header-cart-wrap {
  position: relative;
}

.header-cart-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 340px;
  max-width: 380px;
  background: rgba(13, 16, 24, 0.97);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1rem;
  z-index: 50;
  /* Caché par défaut, apparaît au hover du wrapper */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}

/* Bridge invisible pour empêcher le popup de disparaître quand la souris
   passe entre l'icône et le popup (le gap de 8px) */
.header-cart-popup::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

@media (hover: hover) {
  .header-cart-wrap:hover .header-cart-popup,
  .header-cart-wrap:focus-within .header-cart-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* Sur les écrans tactiles ou très petits : on n'affiche pas le popup,
   tap sur l'icône = navigation directe vers /cart. */
@media (max-width: 700px), (hover: none) {
  .header-cart-popup { display: none; }
}

.header-cart-popup-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.header-cart-popup-head strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg-white);
  font-weight: 500;
}

.header-cart-popup-count {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.header-cart-popup-empty {
  text-align: center;
  padding: 1rem 0.5rem 0.5rem;
}

.header-cart-popup-empty p {
  color: var(--fg-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.header-cart-popup-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 280px;
  overflow-y: auto;
}

.header-cart-popup-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.header-cart-thumb {
  width: 42px;
  height: 50px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  flex-shrink: 0;
}

.header-cart-popup-line-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.header-cart-popup-line-body strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--fg-white);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-cart-popup-line-body small {
  font-size: 0.72rem;
  color: var(--fg-muted);
}

.header-cart-popup-line-total {
  font-size: 0.85rem;
  color: var(--fg-cream);
  white-space: nowrap;
}

.header-cart-popup-more {
  text-align: center;
  font-size: 0.72rem;
  color: var(--fg-dim);
  letter-spacing: 0.05em;
  padding: 0.5rem 0 0;
  font-style: italic;
}

.header-cart-popup-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
}

.header-cart-popup-total span {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.header-cart-popup-total strong {
  font-size: 1.05rem;
  color: var(--fg-white);
  font-weight: 600;
}

.header-cart-popup-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.header-cart-popup-actions .btn {
  flex: 1;
}

/* Tailles compactes des btn dans le popup */
.btn.btn-sm {
  padding: 0.7rem 1.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

/* ================================================================
   ADD-TO-CART : popup "pinné" après un ajout AJAX,
   animation badge, flash de confirmation, fly-to-cart, loading btn.
   ================================================================ */

/* État épinglé : popup forcé visible (déclenché en JS après l'ajout) */
.header-cart-wrap.is-pinned .header-cart-popup {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  animation: cartPopupDrop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 700px), (hover: none) {
  /* Sur tactile/petit écran, on affiche tout de même le popup épinglé */
  .header-cart-wrap.is-pinned .header-cart-popup {
    display: block;
    position: fixed;
    top: 70px;
    right: 12px;
    left: 12px;
    min-width: 0;
    max-width: none;
  }
}

@keyframes cartPopupDrop {
  0%   { opacity: 0; transform: translateY(-14px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(2px)   scale(1.01); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}

/* Badge bump quand le compteur s'incrémente */
.header-icon-badge {
  transition: background 0.2s;
}
.header-icon-badge.is-bumping {
  animation: badgeBump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: var(--accent-warm, var(--accent));
}

@keyframes badgeBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.55); box-shadow: 0 0 0 6px rgba(212, 168, 87, 0.18); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0  rgba(212, 168, 87, 0); }
}

/* Flash "Ajouté au panier" en haut du popup */
.header-cart-popup-flash {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  margin: -0.25rem -0.25rem 0.75rem;
  background: rgba(52, 211, 153, 0.10);
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: var(--radius-sm);
  color: #6ee7b7;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-width: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease,
    margin 0.3s ease,
    opacity 0.3s ease,
    border-width 0.3s ease;
}
.header-cart-popup-flash svg { flex-shrink: 0; }

.header-cart-popup-flash.is-active {
  max-height: 40px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
  border-width: 1px;
  opacity: 1;
}

/* Image clone qui s'envole vers l'icône cart */
.cart-fly {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(212, 168, 87, 0.25);
  transition:
    transform 0.7s cubic-bezier(0.55, 0, 0.4, 1),
    opacity 0.7s ease,
    border-radius 0.7s ease;
  will-change: transform, opacity;
}

/* État chargement bouton add-to-cart */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) #fff;
  border-radius: 50%;
  animation: btnSpin 0.7s linear infinite;
  color: #fff;
}

@keyframes btnSpin {
  to { transform: rotate(360deg); }
}

/* -- HERO SPLIT (~65vh, laisse percevoir la section suivante) - */
.hero {
  position: relative;
  /* fallback : navigateurs sans dvh */
  min-height: clamp(440px, 65vh, 680px);
  display: flex;
  align-items: center;
  /* PAS d'overflow: hidden ici : le dropdown de recherche doit
     pouvoir déborder vers la section suivante.
     L'overflow est porté par .hero-bg seul (qui contient l'image). */
}

/* Évite le saut de hauteur sur iOS Safari / Chrome mobile
   quand la barre URL se cache. dvh = "dynamic viewport height". */
@supports (height: 100dvh) {
  .hero {
    min-height: clamp(440px, 65dvh, 680px);
  }
}

.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* ================================================================
   DROP COUNTDOWN — bandeau prochain drop
   ================================================================ */
.drop-countdown {
  background: linear-gradient(90deg,
    rgba(212, 168, 87, 0.08) 0%,
    rgba(212, 168, 87, 0.14) 50%,
    rgba(212, 168, 87, 0.08) 100%);
  border-bottom: 1px solid rgba(212, 168, 87, 0.18);
  padding: 0.6rem 1rem;
  position: relative;
  z-index: 5;
  animation: dropFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dropFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.drop-countdown-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.drop-countdown-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.drop-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.7);
  animation: dropPulse 2s ease-out infinite;
}

@keyframes dropPulse {
  0%   { box-shadow: 0 0 0 0   rgba(212, 168, 87, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(212, 168, 87, 0); }
  100% { box-shadow: 0 0 0 0   rgba(212, 168, 87, 0); }
}

.drop-countdown-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--fg-white);
}

.drop-time-block {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.drop-time-block strong {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 18px;
  text-align: right;
}

.drop-time-block small {
  font-size: 0.7rem;
  color: var(--fg-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.drop-time-sep {
  color: var(--fg-dim);
  font-weight: 400;
  font-size: 0.85rem;
  margin: 0 2px;
}

@media (max-width: 560px) {
  .drop-countdown { padding: 0.5rem 0.75rem; }
  .drop-countdown-inner { gap: 0.75rem; }
  .drop-countdown-label { font-size: 0.7rem; letter-spacing: 0.12em; }
  .drop-time-block strong { font-size: 0.85rem; }
}

/* Gold dust : canvas au-dessus du bg image, sous le contenu */
.hero-gold-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-gold-dust.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero-gold-dust { display: none; }
}

.hero-bg img {
  position: absolute;
  top: -80px;             /* déborde de 80px en haut pour le parallax */
  left: 0;
  width: 100%;
  height: calc(100% + 80px);
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Dégradé radial : spotlight inversé centré sur le bloc texte (gauche-milieu).
     Assombrit fortement la zone du H1/p/search, laisse la moitié droite respirer.
     Plus un léger vignetting global pour éviter que les bords soient trop nus. */
  background:
    radial-gradient(
      ellipse 55% 75% at 22% 50%,
      rgba(7, 9, 15, 0.88) 0%,
      rgba(7, 9, 15, 0.65) 35%,
      rgba(7, 9, 15, 0.25) 65%,
      rgba(7, 9, 15, 0)    85%
    ),
    linear-gradient(
      to bottom,
      rgba(7, 9, 15, 0.15) 0%,
      rgba(7, 9, 15, 0)    30%,
      rgba(7, 9, 15, 0)    70%,
      rgba(7, 9, 15, 0.35) 100%
    );
}

/* Sur mobile, le texte prend toute la largeur — on revient à un dégradé
   plus global pour ne pas avoir un spotlight bizarrement centré. */
@media (max-width: 700px) {
  .hero-bg::after {
    background:
      linear-gradient(
        to bottom,
        rgba(7, 9, 15, 0.75) 0%,
        rgba(7, 9, 15, 0.5)  50%,
        rgba(7, 9, 15, 0.7)  100%
      );
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

.hero-text { max-width: 600px; flex: 1 1 auto; min-width: 0; }

.hero h1 {
  font-family: 'DM Serif Display', 'Fraunces', Georgia, serif;
  font-weight: 400; /* DM Serif Display n'a qu'un seul weight (400) */
  font-style: italic;
  /* DM Serif Display est visuellement plus dense que Fraunces : on réduit la
     taille d'environ 20% pour conserver l'équilibre visuel du hero. */
  font-size: clamp(1.85rem, 5.5vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
  color: var(--fg-white);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero p {
  font-size: 1.1rem;
  color: var(--fg-white);
  margin-bottom: 2rem;
  max-width: 480px;
  line-height: 1.6;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.5);
}

/* -- HERO SEARCH ---------------------------------------------- */
.hero-search-wrap {
  position: relative;
  max-width: 520px;
}

.hero-search {
  display: flex;
  align-items: stretch;
  background: rgba(7, 9, 15, 0.55);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.hero-search:focus-within {
  border-color: var(--accent);
  background: rgba(7, 9, 15, 0.7);
}

.hero-search input[type="search"] {
  flex: 1;
  padding: 0.95rem 1.25rem;
  background: transparent;
  border: none;
  color: var(--fg-white);
  font-size: 0.95rem;
  font-family: inherit;
  /* enlève la croix native de Safari */
  -webkit-appearance: none;
  appearance: none;
}

.hero-search input[type="search"]:focus { outline: none; }

.hero-search input::placeholder {
  color: var(--fg-dim);
}

.hero-search-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.4rem;
  background: var(--fg-white);
  color: var(--bg-deep);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease;
}

.hero-search-btn:hover { background: var(--accent); }

.hero-search-btn svg { flex-shrink: 0; }

@media (max-width: 600px) {
  .hero-search-btn span { display: none; } /* sur mobile, juste l'icône */
  .hero-search-btn { padding: 0 1rem; }
}

.hero-browse-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-white);
  transition: color 0.25s ease, gap 0.25s ease;
}

.hero-browse-link:hover { color: var(--accent); gap: 0.9rem; }

.hero-browse-link .arrow {
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
}

.hero-browse-link .arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* -- HERO SEARCH : dropdown de suggestions ------------------- */
.hero-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: rgba(13, 16, 24, 0.96);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  z-index: 10;
  max-height: 60vh;
  overflow-y: auto;
}

.hero-search-results[hidden] { display: none; }

.hero-search-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.hero-search-item:last-of-type { border-bottom: none; }

.hero-search-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.hero-search-item img {
  width: 48px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  flex-shrink: 0;
}

.hero-search-item-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hero-search-item-body small {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.hero-search-item-body strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--fg-white);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-search-item-price {
  font-size: 0.75rem;
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-search-empty {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.hero-search-empty strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--fg-cream);
}

.hero-search-more {
  display: block;
  padding: 0.85rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--border-soft);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-cream);
  transition: background 0.15s ease, color 0.15s ease;
}

.hero-search-more:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--fg-white);
}

/* -- SHOP : meta de recherche -------------------------------- */
.shop-results-meta {
  margin-top: 1rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
}

.shop-clear-link {
  color: var(--fg-dim);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.shop-clear-link:hover { color: var(--fg-cream); }

/* ================================================================
   SHOP v2 — Header, sidebar filtres, toolbar, tags actifs, grid.
   ================================================================ */

.shop-section { padding-top: 11rem; padding-bottom: 6rem; }

@media (max-width: 700px) {
  .shop-section { padding-top: 2rem; padding-bottom: 4rem; }
}

.shop-head {
  margin-bottom: 2.5rem;
  text-align: center;
}

.shop-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 400;
  color: var(--fg-white);
  margin: 0.5rem 0 0.6rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.shop-subtitle {
  color: var(--fg-muted);
  font-size: 0.95rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ---- Layout ---------------------------------------------------- */
.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .shop-layout { grid-template-columns: 1fr; gap: 1rem; }
}

/* ---- Sidebar --------------------------------------------------- */
.shop-sidebar {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(20, 20, 24, 0.92) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem 1.25rem;
  position: sticky;
  top: 110px;
}

.shop-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.shop-sidebar-title {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fg-white);
  margin: 0;
  letter-spacing: -0.005em;
}

.shop-sidebar .shop-clear-link {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--accent);
}
.shop-sidebar .shop-clear-link:hover { color: var(--accent-warm, var(--accent)); }

.shop-sidebar-close {
  display: none; /* visible uniquement en mode drawer mobile */
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--fg-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.shop-sidebar-close:hover { background: rgba(255,255,255,0.05); color: var(--fg-white); }

.shop-filter-group {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.shop-filter-group legend {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 0.75rem;
  padding: 0;
}

/* ---- Checkboxes (collection / prix) --------------------------- */
.shop-checkbox-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shop-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.875rem;
  color: var(--fg-cream);
}

.shop-checkbox:hover {
  background: rgba(255,255,255,0.03);
  color: var(--fg-white);
}

.shop-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.shop-checkbox-mark {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-emphasis);
  background: var(--bg-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--bg-deep);
  transition: background 0.15s, border-color 0.15s;
}
.shop-checkbox-mark svg { opacity: 0; transition: opacity 0.15s; }

.shop-checkbox.is-checked .shop-checkbox-mark {
  background: var(--accent);
  border-color: var(--accent);
}
.shop-checkbox.is-checked .shop-checkbox-mark svg { opacity: 1; }

.shop-checkbox.is-checked { color: var(--fg-white); }

.shop-checkbox-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-checkbox-count {
  font-size: 0.72rem;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  padding-left: 0.4rem;
}

/* ---- Chips (format) ------------------------------------------- */
.shop-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.shop-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-emphasis);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--fg-cream);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.shop-chip:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--fg-white);
}

.shop-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.shop-chip.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-deep);
  font-weight: 500;
}

/* ---- Main col (toolbar + grid) -------------------------------- */
.shop-main { min-width: 0; }

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}

.shop-toolbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.shop-filters-btn {
  display: none; /* visible uniquement en mobile */
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-white);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.shop-filters-btn:hover { border-color: var(--accent); }

.shop-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--bg-deep);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 999px;
}

.shop-results-count {
  color: var(--fg-muted);
  font-size: 0.875rem;
}
.shop-results-count strong {
  color: var(--fg-white);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.shop-toolbar-right { display: flex; align-items: center; gap: 0.75rem; }

.shop-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  color: var(--fg-muted);
  letter-spacing: 0;
}

.shop-sort-select {
  background: var(--bg-deep);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-white);
  padding: 0.45rem 2rem 0.45rem 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  transition: border-color 0.15s;
}
.shop-sort-select:hover { border-color: rgba(255, 255, 255, 0.2); }
.shop-sort-select:focus { outline: none; border-color: var(--accent); }

/* ---- Tags filtres actifs -------------------------------------- */
.shop-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.shop-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  background: rgba(212, 168, 87, 0.10);
  border: 1px solid rgba(212, 168, 87, 0.25);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--accent);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.shop-tag:hover {
  background: rgba(212, 168, 87, 0.18);
  color: var(--fg-white);
  border-color: var(--accent);
}

.shop-tag span { font-size: 0.95rem; line-height: 1; opacity: 0.7; }

/* ---- Empty state ---------------------------------------------- */
.shop-empty {
  text-align: center;
  padding: 4rem 1.5rem;
}

.shop-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  color: var(--fg-dim);
}

.shop-empty p {
  color: var(--fg-muted);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Sur /shop la sidebar prend 240px : 3 colonnes au lieu de 4 pour des cards
   plus grandes et plus lisibles. On chaîne les 2 classes pour surclasser
   en spécificité la règle globale .products-grid définie plus bas. */
.products-grid.shop-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0.25rem;
}

@media (max-width: 1100px) {
  .products-grid.shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .products-grid.shop-grid { grid-template-columns: 1fr; }
}

/* ---- Mobile drawer -------------------------------------------- */
@media (max-width: 960px) {
  .shop-filters-btn { display: inline-flex; }

  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 88%);
    z-index: 95;
    border-radius: 0;
    border-right: 1px solid var(--border-soft);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .shop-sidebar.is-open { transform: translateX(0); }

  .shop-sidebar-close { display: grid; place-items: center; }

  /* Désactive le sticky en drawer mode */
  .shop-sidebar { top: 0; }
}

.shop-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.shop-sidebar-overlay.is-visible { opacity: 1; }

.hero-meta {
  position: absolute;
  bottom: 1.5rem;
  left: var(--gutter);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-white);
}

.hero-meta::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--fg-white);
}

/* -- HERO FEATURED DROP — card flottante à droite ------------ */
.hero-featured {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: rgba(13, 16, 24, 0.65);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s var(--ease-out),
              border-color 0.4s ease,
              box-shadow 0.5s ease;
}

.hero-featured:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 28px 70px -20px rgba(212, 168, 87, 0.18),
              0 18px 40px -15px rgba(0, 0, 0, 0.6);
}

.hero-featured-thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-card);
}

.hero-featured-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}

.hero-featured:hover .hero-featured-thumb img { transform: scale(1.04); }

.hero-featured-meta {
  padding: 0.85rem 1rem 1rem;
}

.hero-featured-eyebrow {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.hero-featured-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg-white);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0.55rem;
}

.hero-featured-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.hero-featured-price {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.hero-featured-price strong {
  color: var(--fg-white);
  font-weight: 500;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}

.hero-featured-arrow {
  font-size: 1.05rem;
  color: var(--fg-cream);
  transition: transform 0.3s ease, color 0.3s ease;
}

.hero-featured:hover .hero-featured-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

/* Sur tablette / mobile : la card reste visible mais passe en layout
   horizontal compact (vignette + meta sur une ligne) sous le hero text. */
@media (max-width: 900px) {
  .hero-content {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
  }

  .hero-featured {
    flex: 0 0 auto;
    flex-direction: row;
    align-self: stretch;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .hero-featured-thumb {
    flex: 0 0 96px;
    aspect-ratio: 4 / 5;
  }

  .hero-featured-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.85rem 1rem;
    min-width: 0;
  }

  .hero-featured-title {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    /* Tronquage propre si titre long */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .hero-featured-foot { margin-top: auto; }
}

/* -- BUTTONS ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  justify-content: center;
}

.btn-primary { background: var(--fg-white); color: var(--bg-deep); }
.btn-primary:hover { background: var(--accent); color: var(--bg-deep); }

.btn-outline { background: transparent; color: var(--fg-white); border-color: var(--fg-white); }
.btn-outline:hover { background: var(--fg-white); color: var(--bg-deep); }

.btn-accent { background: var(--accent); color: var(--bg-deep); }
.btn-accent:hover { background: var(--accent-warm); }

.btn-full { width: 100%; }

.btn-arrow {
  background: transparent;
  border: none;
  color: var(--fg-cream);
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: color 0.2s var(--ease);
}

.btn-arrow:hover { color: var(--accent); }

.btn-arrow .arrow {
  width: 24px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.25s var(--ease);
}

.btn-arrow .arrow::after {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn-arrow:hover .arrow { width: 36px; }

/* -- SECTIONS ------------------------------------------------ */
.section { padding: 7rem 0; }
.section-tight { padding: 5rem 0; }


.section-header { margin-bottom: 4rem; }

.section-header-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
  margin-bottom: 4rem;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 1.25rem;
}

.section-title h2 { font-style: italic; max-width: 600px; }

/* -- COLLECTIONS GRID ---------------------------------------- */
.collections-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 4fr;
  gap: 3.5rem;
  align-items: start;
}

.collections-text {
  padding-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.collections-text .eyebrow { margin: 0; }

.collections-text h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  line-height: 1.05;
  color: var(--fg-white);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.collections-text .btn-arrow {
  margin-top: 0.5rem;
  align-self: flex-start;
}

.collections-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

@media (max-width: 1000px) {
  .collections-layout { grid-template-columns: 1fr; gap: 2rem; }
  .collections-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
@media (max-width: 700px)  {
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  /* Si nombre impair de collections, le dernier item orphelin prend
     toute la largeur pour éviter l'effet 2+2+1 déséquilibré. */
  .collections-grid > .collection-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.collection-card {
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--bg-card);
  margin-bottom: 1rem;
}

.collection-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.collection-card:hover .collection-cover img { transform: scale(1.06); }

.collection-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

.collection-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--fg-white);
  margin-bottom: 0.25rem;
}

.collection-count {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* -- PRODUCTS GRID ------------------------------------------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2rem;
}

@media (max-width: 1000px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .products-grid { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  position: relative;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le lien interne (wrap toute la card sauf le bouton favori) */
.product-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* -- Bouton favori sur les cards ----------------------------- */
.fav-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 9, 15, 0.55);
  border: 1px solid var(--border-emphasis);
  border-radius: 50%;
  color: var(--fg-white);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.2s ease;
}

.fav-toggle:hover {
  background: rgba(7, 9, 15, 0.75);
  border-color: var(--fg-white);
  transform: scale(1.05);
}

/* -- Bouton favori "large" sur la fiche produit (à côté add-to-cart) -- */
.product-actions {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.product-actions .btn-full {
  flex: 1;
  width: auto;
}

.fav-toggle.fav-toggle-lg {
  position: static;
  width: 56px;
  height: auto;        /* match la hauteur du add-to-cart */
  align-self: stretch;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-emphasis);
  color: var(--fg-cream);
  backdrop-filter: none;
  flex-shrink: 0;
}

.fav-toggle.fav-toggle-lg:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--fg-white);
  color: var(--fg-white);
  transform: none; /* pas de scale sur le large */
}

.fav-toggle.fav-toggle-lg.is-active {
  color: var(--accent);
  border-color: var(--accent);
}

/* -- PRODUCT RELATED (Explore more posters) ---------------- */
.product-related {
  padding-top: 3rem;       /* moins d'air que le default .section (7rem) */
  padding-bottom: 5rem;
  border-top: 1px solid var(--border-soft);
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .product-related { padding-top: 2rem; padding-bottom: 3rem; }
}

/* -- PRODUCT SPECIFICATIONS (papier, finition, encres, bord) -- */
.product-specs {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-soft);
}

.product-specs-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 1.25rem;
}

.product-specs-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.product-spec-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}
.product-spec-row:last-child { border-bottom: none; padding-bottom: 0; }

.product-spec-row dt {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-dim);
  font-weight: 500;
}

.product-spec-row dd {
  font-size: 0.88rem;
  color: var(--fg-cream);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 500px) {
  .product-spec-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* État actif : cœur rempli + couleur doré accent */
.fav-toggle.is-active {
  color: var(--accent);
  border-color: var(--accent);
}

.fav-toggle.is-active svg {
  fill: var(--accent);
}

.fav-toggle svg {
  fill: none;
  transition: fill 0.2s ease;
}

/* Animation "pop" au moment du toggle */
.fav-toggle.is-popping {
  animation: fav-pop 0.4s cubic-bezier(.2,.7,.2,1);
}

@keyframes fav-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1.05); }
}

/* -- Toast (notifications transitoires) ---------------------- */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 280px;
  max-width: 380px;
  padding: 0.85rem 1.1rem;
  background: rgba(13, 16, 24, 0.96);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast.is-leaving {
  opacity: 0;
  transform: translateX(40px);
}

.toast-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(212, 168, 87, 0.15);
  color: var(--accent);
}

.toast-icon svg { display: block; }

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--fg-white);
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.toast-message {
  display: block;
  font-size: 0.78rem;
  color: var(--fg-muted);
}

.toast-action {
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s ease;
}

.toast-action:hover { color: var(--fg-white); }

@media (max-width: 600px) {
  .toast-container { right: 0.75rem; left: 0.75rem; bottom: 0.75rem; }
  .toast { min-width: 0; max-width: none; }
}

.product-card-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-deep);
  margin-bottom: 1.25rem;
  border-radius: 3px;
  transition: box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--radius-sm);
}

.product-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.product-card:hover .product-card-image img { transform: scale(1.04); }

.product-card-series {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 0.5rem;
}

.product-card-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 300;
  color: var(--fg-white);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.product-card-price {
  font-size: 0.82rem;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.product-card-price strong {
  color: var(--fg-cream);
  font-weight: 500;
  margin-left: 0.25rem;
}

/* -- IN-SPACE SECTION ---------------------------------------- */
.in-space {
  position: relative;
  padding: 7rem 0;
  background: var(--bg-night);
}

.in-space-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 900px) {
  .in-space-inner { grid-template-columns: 1fr; gap: 3rem; }
}

.in-space-text h2 { font-family: var(--font-display); font-weight: 400; font-style: italic; margin-bottom: 2rem; letter-spacing: -0.01em; }

.in-space-text p {
  color: var(--fg-muted);
  margin-bottom: 2.5rem;
  max-width: 420px;
}

.in-space-visual {
  aspect-ratio: 16 / 11;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.in-space-visual img { width: 100%; height: 100%; object-fit: cover; }

/* -- SCENES — 3 blocs façon Displate (titre + bouton sur image) - */
.scenes {
  background: var(--bg-night);
}

.scenes-header {
  text-align: center;
  margin-bottom: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.scenes-header h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  line-height: 1.05;
  color: var(--fg-white);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.scenes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .scenes-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.scene-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;             /* à ajuster si tes mockups ont un autre ratio */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  transition: transform .5s var(--ease-out);
}

.scene-card:hover { transform: translateY(-4px); }

.scene-image {
  position: absolute;
  inset: 0;
}

.scene-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}

.scene-card:hover .scene-image img { transform: scale(1.04); }

/* Léger dégradé sombre pour assurer la lisibilité du titre et du CTA */
.scene-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0)    35%,
    rgba(0, 0, 0, 0)    60%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.scene-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
  line-height: 1.1;
  color: var(--fg-white);
  font-weight: 500;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.scene-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.75rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-white);
  border: 1px solid rgba(245, 243, 237, 0.55);
  border-radius: 2px;
  transition: background .3s ease, border-color .3s ease;
}

.scene-card:hover .scene-cta {
  background: rgba(245, 243, 237, 0.08);
  border-color: var(--fg-white);
}

/* -- PRODUCT DETAIL ------------------------------------------ */
.product-page { padding: 8rem 0 5rem; }

/* Layout 2 colonnes : à gauche un wrapper flex (image + thumbs empilés),
   à droite les détails du produit. Plus de grid avec span, fini les soucis
   de rows qui s'étirent. */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.product-image-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Sur mobile le DOM est : wrap (thumbs, image) puis details.
   On veut image AVANT thumbs visuellement, donc on utilise order. */
.product-image-wrap .product-image  { order: 1; }
.product-image-wrap .product-thumbs { order: 2; }

@media (max-width: 1000px) {
  .product-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Thumbs en row horizontale sous l'image principale.
   Largeur fixe par thumb (pas 1fr) pour éviter qu'une thumb seule
   prenne 100% de la largeur de l'image. */
.product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-thumbs .product-thumb {
  flex: 0 0 88px;   /* taille fixe par thumb, ratio 3/4 → ~117px de haut */
  width: 88px;
}

/* S'il n'y a qu'une seule thumb dans la galerie, on masque tout simplement
   la rangée — pas la peine de montrer une vignette unique sous l'image
   principale (elle ferait doublon visuel). */
.product-thumbs:has(.product-thumb:only-child) {
  display: none;
}

@media (max-width: 700px) {
  .product-thumbs { gap: 0.4rem; }
  .product-thumbs .product-thumb { flex: 0 0 72px; width: 72px; }
}

.product-thumb {
  aspect-ratio: 3 / 4;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--border-soft);
  transition: border-color 0.2s var(--ease), opacity 0.2s ease;
  padding: 0;
  opacity: 0.7;
}

.product-thumb.is-active, .product-thumb.active { border-color: var(--accent); opacity: 1; }
.product-thumb:hover { border-color: var(--accent); opacity: 1; }
/* Enfant direct uniquement (sinon écrase les imgs du frame mockup en thumb) */
.product-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }

.product-image {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  cursor: zoom-in;
}

/* Le sélecteur > (enfant direct) évite d'affecter les imgs du frame mockup
   imbriquées dans .product-frame-mockup. */
.product-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}

.product-image:hover > img { transform: scale(1.02); }

/* Bouton loupe en haut-droite de l'image */
.product-image-zoom-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 16, 24, 0.7);
  border: 1px solid var(--border-emphasis);
  border-radius: 50%;
  color: var(--fg-white);
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s ease, border-color 0.2s ease;
  opacity: 0;
}

.product-image:hover .product-image-zoom-btn { opacity: 1; }
.product-image-zoom-btn:hover { background: rgba(13, 16, 24, 0.9); border-color: var(--accent); color: var(--accent); }

/* -- FRAME MOCKUP OVERLAY (style Displate) ------------------- */
/* Thumb : composition bg + overlay art en mini.
   Le wrapper prend le ratio NATUREL du bg (pas 3:4 forcé) pour que les
   coords en % matchent celles de la main view. Le parent .product-thumb
   doit donc aussi être passé en aspect-ratio:auto via .has-frame-mockup. */
.product-thumb.has-frame-mockup {
  aspect-ratio: auto;
  background: transparent;
}
.thumb-frame-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}
.thumb-frame-bg {
  width: 100%;
  height: auto;
  display: block;
}
.thumb-frame-art {
  position: absolute;
  object-fit: cover;
  display: block;
  z-index: 2;
}

/* Main view : composition pleine taille.
   En mode frame, le wrapper .product-image abandonne son aspect-ratio 3:4
   et laisse le bg dicter ses dimensions naturelles. */
.product-image.is-frame-mode {
  aspect-ratio: auto;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.product-frame-mockup {
  position: relative;
  width: 100%;
  /* on retire height:100% pour que le bg dicte la hauteur naturelle */
  line-height: 0; /* élimine les espaces blancs autour des imgs inline */
}
.product-frame-bg {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* -- FRAME COLOR PRESETS (filtre appliqué au .product-frame-bg) -- */
.product-frame-bg.frame-color-black {
  filter: brightness(0.45) saturate(0.35) contrast(1.05);
}
.product-frame-bg.frame-color-walnut {
  filter: brightness(0.85) saturate(1.15) sepia(0.15) hue-rotate(-8deg);
}
.product-frame-bg.frame-color-oak {
  filter: brightness(1.35) saturate(0.75) sepia(0.35) hue-rotate(-5deg);
}
.product-frame-bg.frame-color-white {
  filter: brightness(2.1) saturate(0.15) contrast(0.75);
}

/* -- FRAME SWATCHES (visible uniquement en mode frame_mockup) --- */
.frame-swatches {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.product-image.is-frame-mode + .frame-swatches,
.product-image:has(.product-frame-mockup:not([hidden])) + .frame-swatches {
  display: flex;
}

.frame-swatches-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

.frame-swatches-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.frame-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--border-emphasis);
  padding: 3px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  display: grid;
  place-items: center;
}

.frame-swatch:hover { border-color: rgba(212, 168, 87, 0.5); transform: translateY(-1px); }

.frame-swatch.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.frame-swatch-chip {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.frame-chip-original {
  background: linear-gradient(135deg, #4a3320 0%, #2a1d12 100%);
  position: relative;
}
.frame-chip-original::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(212, 168, 87, 0.15) 0%, transparent 60%);
}

.frame-chip-black  { background: linear-gradient(135deg, #1a1a1a 0%, #050505 100%); }
.frame-chip-walnut { background: linear-gradient(135deg, #5e3a1f 0%, #3a2310 100%); }
.frame-chip-oak    { background: linear-gradient(135deg, #b89060 0%, #8a6840 100%); }
.frame-chip-white  { background: linear-gradient(135deg, #f0ebe0 0%, #d9d2c4 100%); }

.frame-swatches-hint {
  font-size: 0.72rem;
  color: var(--fg-dim);
  font-style: italic;
}
.product-frame-art {
  position: absolute;
  /* top/left/width/height/transform arrivent en inline depuis JS */
  object-fit: cover;
  display: block;
  z-index: 2;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* Lightbox : composition zoomée plein écran */
.lightbox-frame {
  position: relative;
  max-width: 100%;
  max-height: 90vh;
  /* On garde le ratio naturel du mockup */
  display: inline-block;
}
.lightbox-frame-bg {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.lightbox-frame-art {
  position: absolute;
  object-fit: cover;
  display: block;
  box-shadow: inset 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Caption sous l'image principale (genre "Mise en situation") */
.product-image-caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.4rem 0.85rem;
  background: rgba(13, 16, 24, 0.75);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-cream);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  pointer-events: none;
}

/* -- LIGHTBOX (zoom plein écran) ----------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 15, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 4rem;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox[hidden]  { display: none; }

.lightbox-img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--fg-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--fg-white); }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--fg-white);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--fg-white); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-caption {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: rgba(13, 16, 24, 0.7);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-cream);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .lightbox { padding: 1rem; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.4rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
  .lightbox-close { top: 0.5rem; right: 0.5rem; }
}

.product-details { position: sticky; top: 120px; }

.product-details .series {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.25rem;
  display: block;
}

.product-details h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-bottom: 1rem;
  font-style: italic;
  letter-spacing: -0.01em;
}

.product-price-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-soft);
}

.product-price {
  font-size: 1.4rem;
  color: var(--fg-white);
  font-family: var(--font-serif);
  font-style: italic;
}

.product-description {
  color: var(--fg-cream);
  margin-bottom: 2.5rem;
  line-height: 1.75;
}

.variant-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 1rem;
}

.variants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.variant { position: relative; cursor: pointer; }

.variant input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}

.variant-card {
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  text-align: center;
  transition: all 0.2s var(--ease);
  background: transparent;
}

.variant input:checked + .variant-card {
  border-color: var(--fg-white);
  background: rgba(245, 243, 237, 0.04);
}

.variant:hover .variant-card { border-color: var(--border-emphasis); }

.variant-format {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg-white);
  margin-bottom: 0.4rem;
}

.variant-price {
  font-size: 0.78rem;
  color: var(--fg-muted);
}

/* Badges sur les variants : "Recommandé" sur 50x70, "Galerie XL" sur 70x100.
   Position absolue en haut-centre de la card, légèrement décalé vers l'extérieur. */
.variant-badge {
  position: absolute;
  top: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent, #d4a857);
  color: #08090d;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.variant-badge-collector {
  background: linear-gradient(135deg, #d4a857 0%, #e8c987 100%);
}

/* Le variant recommandé a une bordure légèrement plus visible au repos
   pour attirer l'œil avant même le hover/check. */
.variant.is-recommended .variant-card {
  border-color: rgba(212, 168, 87, 0.35);
}
.variant.is-collector .variant-card {
  border-color: rgba(212, 168, 87, 0.25);
}

/* -- TRUST BADGES -------------------------------------------- */
.trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border-soft);
}

.trust-badge { display: flex; align-items: flex-start; gap: 0.85rem; }

.trust-badge-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}

.trust-badge-icon svg { width: 100%; height: 100%; stroke-width: 1.25; }

.trust-badge-text strong {
  display: block;
  color: var(--fg-white);
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.trust-badge-text span {
  font-size: 0.75rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* -- REASSURANCE STRIP --------------------------------------- */
.reassurance {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 3.5rem 0;
  background: var(--bg-night);
}

.reassurance-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 800px) {
  .reassurance-inner { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; column-gap: 1rem; }
}
@media (max-width: 500px) {
  .reassurance-inner { grid-template-columns: 1fr; gap: 1.5rem; }
}

.reassurance-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: relative;
  text-align: left;
}

/* Séparateurs verticaux entre les items */
.reassurance-item + .reassurance-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 38px;
  background: var(--border-soft);
}

/* Sur tablette + mobile : la grille passe en 2x2 ou 1 col, donc les
   séparateurs verticaux n'ont plus de sens (ils créent des lignes
   orphelines). On les cache. */
@media (max-width: 800px) {
  .reassurance-item + .reassurance-item::before { display: none; }
}

/* En col simple, on aligne le contenu à gauche pour une lecture propre */
@media (max-width: 500px) {
  .reassurance-item {
    justify-content: flex-start;
    padding: 0;
  }
}

.reassurance-icon {
  width: 42px; height: 42px;
  color: var(--accent);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(212, 168, 87, 0.08);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 87, 0.18);
}

.reassurance-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.reassurance-text strong {
  display: block;
  color: var(--fg-white);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.reassurance-text span {
  font-size: 0.72rem;
  color: var(--fg-muted);
}

/* -- CART ---------------------------------------------------- */
.cart-page { padding: 8rem 0 5rem; }
.cart-page h1 { margin-bottom: 3rem; font-style: italic; }

.cart-empty { text-align: center; padding: 5rem 2rem; color: var(--fg-muted); }
.cart-empty p { margin-bottom: 2rem; }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

@media (max-width: 800px) {
  .cart-layout { grid-template-columns: 1fr; gap: 2rem; }
}

.cart-line {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}

.cart-line-image {
  width: 100px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-card);
}

.cart-line-info h3 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: 0.35rem;
}

.cart-line-format {
  color: var(--fg-muted);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.cart-line-actions { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }

.cart-line-price {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--fg-white);
  text-align: right;
}

.cart-line-remove {
  color: var(--fg-dim);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.cart-line-remove:hover { color: var(--fg-cream); }

.cart-summary {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: sticky;
  top: 120px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  font-size: 0.88rem;
  color: var(--fg-cream);
}

.summary-row.total {
  border-top: 1px solid var(--border-soft);
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--fg-white);
}

/* -- FOOTER ÉDITORIAL ---------------------------------------- */
.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border-soft);
  padding: 0;
}

/* Grand statement en haut */
.footer-statement {
  padding: 3.5rem 0 3rem;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}

.footer-statement-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--fg-white);
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
}

/* Petits traits dorés de part et d'autre */
.footer-statement-text::before,
.footer-statement-text::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--accent) 50%,
    transparent 100%);
}

/* Grille principale brand + 3 cols */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 4rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 4rem var(--gutter);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem 2.5rem;
  }
  .footer-brand-col { grid-column: 1 / -1; }
}

.footer-brand-col .logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
}
.footer-brand-col .logo img {
  height: 38px; /* légèrement plus grand que le header pour l'effet "signature" */
}

.footer-tagline {
  color: var(--fg-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 360px;
}

/* Lien vers le portfolio enzinoai.com — éditorial, discret mais affirmé */
.footer-portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0.7rem 0.95rem;
  background: rgba(212, 168, 87, 0.05);
  border: 1px solid rgba(212, 168, 87, 0.18);
  border-radius: var(--radius-sm);
  color: var(--fg-cream);
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.25s var(--ease, ease);
}
.footer-portfolio-link:hover {
  background: rgba(212, 168, 87, 0.1);
  border-color: rgba(212, 168, 87, 0.45);
  transform: translateY(-1px);
}
.footer-portfolio-url {
  color: var(--accent, #d4a857);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.footer-portfolio-link svg {
  color: var(--accent, #d4a857);
  opacity: 0.7;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.footer-col a {
  font-size: 0.9rem;
  color: var(--fg-cream);
  line-height: 2.1;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}

.footer-col a:hover {
  color: var(--fg-white);
  padding-left: 4px;
}

/* Bottom strip : signature + legal */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 1.75rem var(--gutter);
  border-top: 1px solid var(--border-soft);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}

.footer-signature {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.footer-signature-care {
  color: var(--fg-muted);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  margin-left: 0.25rem;
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

.footer-legal a {
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  transition: color 0.2s ease;
}

.footer-legal a:hover { color: var(--fg-cream); }

@media (max-width: 700px) {
  .footer-statement { padding: 4rem 0 3rem; }
  .footer-grid { padding: 3rem var(--gutter); }
  .footer-bottom {
    justify-content: center;
    text-align: center;
    flex-direction: column;
  }
  .footer-signature-care { display: block; margin: 0.5rem 0 0; }
}

/* -- UTILITY ------------------------------------------------- */
.text-center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ================================================================
   ANIMATIONS SUBTILES
   "Le site doit vivre doucement" — pas d'effets agressifs.
   Toutes les animations respectent prefers-reduced-motion.
   ================================================================ */

/* Reveal au scroll : les sections fade-in doucement quand elles entrent en viewport.
   IMPORTANT : on masque uniquement quand html.js est présent (progressive
   enhancement). Sans JS / bfcache / erreur, tout reste visible par défaut.
   La classe .is-visible est ajoutée par JS via IntersectionObserver. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1),
              transform 1s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered : si plusieurs .reveal côte à côte (genre cards d'une grille),
   on peut les décaler en ajoutant data-reveal-delay="100" en HTML.
   Le JS lit l'attribut et applique transition-delay. */

/* -- Hover éditorial premium sur les product cards ----------- */
/* Le card lève doucement, l'image gagne une ombre stacked (effet
   photo qui se soulève), le titre passe en doré accompagné d'un
   trait court qui glisse depuis la gauche. */

.collection-card,
.scene-card {
  transition: transform .6s cubic-bezier(.2,.7,.2,1),
              box-shadow .6s ease;
}

.product-card-title {
  position: relative;
  display: inline-block;
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 28px;
  background: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card-series,
.product-card-price strong {
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card:hover {
  transform: translateY(-6px);
}

.product-card:hover .product-card-image {
  box-shadow:
    0 32px 64px -24px rgba(0, 0, 0, 0.65),
    0 18px 36px -16px rgba(0, 0, 0, 0.45);
}

.product-card:hover .product-card-title {
  color: var(--accent);
}

.product-card:hover .product-card-title::after {
  opacity: 1;
  transform: translateX(0);
}

.product-card:hover .product-card-series {
  color: var(--fg-cream);
}

.product-card:hover .product-card-price strong {
  color: var(--fg-white);
}

/* -- Hover éditorial premium sur les collection cards -------- */
.collection-name {
  position: relative;
  display: inline-block;
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 28px;
  background: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-count {
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.collection-card:hover {
  transform: translateY(-6px);
}

.collection-card:hover .collection-cover {
  box-shadow:
    0 32px 64px -24px rgba(0, 0, 0, 0.65),
    0 18px 36px -16px rgba(0, 0, 0, 0.45);
}

.collection-card:hover .collection-name {
  color: var(--accent);
}

.collection-card:hover .collection-name::after {
  opacity: 1;
  transform: translateX(0);
}

.collection-card:hover .collection-count {
  color: var(--fg-cream);
}

.scene-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 70px -20px rgba(212, 168, 87, 0.18),
              0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

/* Override : sur fond bg-night (.scenes), on remplace le glow doré par
   un shadow neutre plus discret, sinon ça fait "halo flashy" sur le bleu. */
.scenes .scene-card:hover {
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65),
              0 6px 16px -8px rgba(0, 0, 0, 0.5);
}

/* Zoom image plus lent et plus doux (1.03 au lieu de 1.04+, sur 1.6s) */
.product-card-image img,
.collection-cover img,
.scene-image img {
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1) !important;
}

.product-card:hover .product-card-image img,
.collection-card:hover .collection-cover img,
.scene-card:hover .scene-image img {
  transform: scale(1.03) !important;
}

/* -- Accessibility : respect du système ---------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Désactive toutes les animations longues pour les users qui le demandent */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Les reveal restent visibles directement */
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* -- USP STRIP — réassurance e-commerce, ton éditorial ------ */
.usp-strip {
  padding: 2.5rem 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.usp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.usp-item {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.25rem 1.5rem;
  border-left: 1px solid var(--border-soft);
}

.usp-item:first-child { border-left: none; padding-left: 0; }

.usp-num {
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.12em;
}

.usp-text {
  font-size: 0.85rem;
  color: var(--fg-cream);
  letter-spacing: 0.01em;
}

@media (max-width: 800px) {
  .usp-list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 0; }
  .usp-item { border-left: none; padding-left: 0; }
}

/* ================================================================
   PROCESS — How it works (4 steps numérotés reliés par une ligne)
   ================================================================ */
.process-section {
  padding: 7rem 0;
  border-top: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}

/* Halo doré radial subtil en arrière-plan, plus chaud que le fond noir */
.process-section::before {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center,
              rgba(212, 168, 87, 0.07) 0%,
              rgba(212, 168, 87, 0.02) 45%,
              transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.process-section > * { position: relative; z-index: 1; }

.process-head {
  text-align: center;
  margin-bottom: 4rem;
}

.process-head .eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
}

.process-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 400;
  color: var(--fg-white);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.process-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
}

.process-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem 1.75rem;
  background: linear-gradient(180deg,
    rgba(20, 22, 30, 0.6) 0%,
    rgba(13, 15, 22, 0.4) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color 0.35s, transform 0.35s, box-shadow 0.35s, background 0.35s;
}

.process-step:hover {
  border-color: rgba(212, 168, 87, 0.35);
  transform: translateY(-4px);
  background: linear-gradient(180deg,
    rgba(28, 24, 18, 0.7) 0%,
    rgba(15, 14, 13, 0.45) 100%);
  box-shadow:
    0 18px 40px -18px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(212, 168, 87, 0.12);
}

/* Badge avec icône + numéro flottant */
.process-step-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #b58e3e 100%);
  color: var(--bg-deep);
  box-shadow:
    0 8px 20px -8px rgba(212, 168, 87, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}

/* Halo doré animé autour du badge */
.process-step-badge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(212, 168, 87, 0.25);
  opacity: 0.6;
  transition: inset 0.4s ease, opacity 0.4s ease, border-color 0.4s ease;
}

.process-step:hover .process-step-badge {
  transform: scale(1.08) rotate(-3deg);
  box-shadow:
    0 12px 30px -10px rgba(212, 168, 87, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.process-step:hover .process-step-badge::before {
  inset: -10px;
  opacity: 1;
  border-color: rgba(212, 168, 87, 0.55);
}

.process-step-icon {
  display: grid;
  place-items: center;
}
.process-step-icon svg {
  display: block;
}

/* Numéro 01/02/03/04 en petit badge en haut à droite du cercle icône */
.process-step-num {
  position: absolute;
  top: -6px;
  right: -10px;
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 0 7px;
  background: var(--bg-deep);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

.process-step-title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg-white);
  margin: 0 0 0.55rem;
  letter-spacing: -0.005em;
  transition: color 0.3s;
}
.process-step:hover .process-step-title { color: var(--accent-warm, var(--accent)); }

.process-step-body {
  font-size: 0.88rem;
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .process-steps::before { display: none; }
}
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; gap: 1rem; }
  .process-step {
    text-align: left;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0.75rem 1.25rem;
    align-items: start;
    padding: 1.25rem 1.25rem 1.4rem;
  }
  .process-step-badge { margin: 0; grid-row: 1 / span 2; align-self: start; }
  .process-step-title { grid-column: 2; margin-top: 0.25rem; }
  .process-step-body { grid-column: 2; margin: 0; max-width: none; }
}

/* ================================================================
   UGC — "Vu chez nos clients"
   ================================================================ */
.ugc-section {
  padding: 7rem 0;
  border-top: 1px solid var(--border-soft);
}

.ugc-cta {
  font-size: 0.85rem;
  color: var(--fg-muted);
  font-style: italic;
  margin: 0;
}

.ugc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (max-width: 800px) {
  .ugc-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
}
@media (max-width: 480px) {
  .ugc-grid { grid-template-columns: 1fr; }
}

.ugc-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  cursor: default;
}

a.ugc-tile { cursor: pointer; }

.ugc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ugc-tile:hover img {
  transform: scale(1.06);
}

.ugc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(to top,
    rgba(0,0,0,0.65) 0%,
    rgba(0,0,0,0.2) 50%,
    rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.ugc-tile:hover .ugc-overlay,
.ugc-tile:focus-visible .ugc-overlay { opacity: 1; }

.ugc-caption {
  color: var(--fg-white);
  font-size: 0.82rem;
  font-weight: 500;
  flex: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.ugc-overlay svg {
  color: var(--fg-white);
  flex-shrink: 0;
  opacity: 0.85;
}

/* ================================================================
   INSPIRATION — "Imagine it on your wall" : 3 mockups en colonnes
   Bg par défaut (bg-deep) comme UGC qui précède → border-top pour
   marquer la séparation. Reviews qui suit est en bg-night → alternance
   naturelle, pas besoin de border en bas.
   ================================================================ */
.inspiration-section {
  padding: 7rem 0;
  border-top: 1px solid var(--border-soft);
}

.inspiration-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.inspiration-head .eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
}

.inspiration-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  margin: 0;
  letter-spacing: -0.01em;
}

.inspiration-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

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

.inspiration-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  aspect-ratio: 1 / 1;
}

.inspiration-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.inspiration-tile:hover img {
  transform: scale(1.04);
}

.inspiration-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

@media (max-width: 700px) {
  .inspiration-section { padding: 4rem 0; }
  .inspiration-head { margin-bottom: 2.5rem; }
  .inspiration-cta { margin-top: 2rem; }
}

/* ================================================================
   REVIEWS — Avis clients
   ================================================================ */
.reviews-section {
  background: var(--bg-night, #0a0c12);
  padding: 7rem 0;
}

.reviews-head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.reviews-head .eyebrow {
  display: inline-block;
  margin-bottom: 0.85rem;
}

.reviews-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  font-weight: 400;
  color: var(--fg-white);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

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

.review-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.75rem;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}

.review-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-emphasis);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.6);
}

.review-quote-mark {
  position: absolute;
  top: 8px;
  right: 1.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.16;
  pointer-events: none;
}

.review-rating {
  display: inline-flex;
  gap: 2px;
  color: var(--accent);
  margin-bottom: 1rem;
}

.review-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg-cream);
  margin: 0 0 1.5rem;
  font-style: italic;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.review-avatar-initials {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep, #b58e3e) 100%);
  color: var(--bg-deep);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 12px rgba(212, 168, 87, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.2);
}

.review-author-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.review-author-meta strong {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-white);
  letter-spacing: -0.005em;
}

.review-author-meta small {
  font-size: 0.75rem;
  color: var(--fg-muted);
}

/* -- ARTIST — Behind the artwork ---------------------------- */
.artist {
  padding: 7rem 0;
}

.artist-inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 5rem;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 900px) {
  .artist-inner { grid-template-columns: 1fr; gap: 3rem; }
}

.artist-text h2 {
  font-style: italic;
  margin-bottom: 2rem;
}

.artist-text p {
  color: var(--fg-muted);
  margin-bottom: 2.5rem;
  max-width: 440px;
}

.artist-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.artist-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* État "image absente" — placeholder élégant en attendant le portrait */
.artist-portrait-empty {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
}

.artist-portrait-empty::after {
  content: 'Portrait';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-dim);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* -- NEWSLETTER --------------------------------------------- */
.newsletter {
  position: relative;
  background: var(--bg-deep);
  padding: 5rem 0 4.5rem;
  text-align: center;
  border-top: 1px solid var(--border-soft);
  overflow: hidden;
}

/* Halo doré subtil derrière le texte pour donner de la présence */
.newsletter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: 380px;
  background: radial-gradient(ellipse at center,
              rgba(212, 168, 87, 0.07) 0%,
              rgba(212, 168, 87, 0.02) 40%,
              transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.newsletter-inner {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.newsletter .eyebrow {
  margin-bottom: 1.2rem;
}

.newsletter h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  line-height: 1.05;
  color: var(--fg-white);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.newsletter p {
  color: var(--fg-muted);
  margin-bottom: 2.5rem;
  font-size: 1rem;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 0.95rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-emphasis);
  border-radius: var(--radius-sm);
  color: var(--fg-white);
  font-size: 0.92rem;
  font-family: inherit;
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-elevated);
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--fg-dim);
}

.newsletter-form .btn-primary {
  padding: 0.95rem 1.75rem;
  white-space: nowrap;
}

.newsletter-disclaimer {
  display: block;
  font-size: 0.72rem;
  color: var(--fg-dim);
  line-height: 1.55;
  max-width: 460px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn-primary { width: 100%; }
}

/* ================================================================
   MOBILE FIXES — pass globale pour <700px
   Polit toutes les sections : tailles, paddings, touch targets,
   anti-zoom iOS sur les inputs.
   ================================================================ */

@media (max-width: 700px) {
  /* Anti-zoom iOS : tous les inputs en font-size ≥ 16px */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  select, textarea {
    font-size: 16px !important;
  }

  /* Padding général des sections moins agressif */
  .section { padding: 4rem 0; }

  /* Hero : sur mobile, le header est fixed et le contenu hero peut dépasser
     la hauteur. On force le contenu à commencer SOUS le header. */
  .hero {
    min-height: 0;
    align-items: flex-start;
    padding-top: 5.5rem;
    padding-bottom: 3rem;
  }
  .hero-text { max-width: none; }
  .hero h1 { margin-bottom: 1rem; }
  .hero p { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-search { max-width: 100%; }
  .hero-search input[type="search"] { padding: 0.85rem 1rem; }
  .hero-search-btn { padding: 0 0.9rem; }
  .hero-meta { font-size: 0.62rem; bottom: 1rem; }
  .hero-meta::before { width: 20px; }
  .hero-content { gap: 1.5rem; padding: 0 1.25rem; }

  /* USP strip : padding réduit */
  .usp-strip { padding: 1.75rem 0; }
  .usp-text  { font-size: 0.78rem; }

  /* Sections texte/image : padding mobile */
  .in-space   { padding: 4rem 0; }
  .in-space-inner,
  .artist-inner { padding: 0 1.25rem; gap: 2.5rem; }
  .artist     { padding: 4rem 0; }
  .newsletter { padding: 4rem 0; }

  /* Headers d'eyebrow/h2 : tighter spacing */
  .section-header-split,
  .collections-layout,
  .scenes-header { margin-bottom: 2.5rem; }
  .scenes-header { gap: 1rem; }

  /* Products grid : 2 cols sur petits écrans, gap réduit */
  .products-grid { gap: 1.5rem 1rem; }
  .product-card-title { font-size: 1rem; }
  .product-card-price { font-size: 0.85rem; }

  /* Collections : moins de gap entre la text-col et la grid quand stack */
  .collections-layout { gap: 1.5rem; }
  .collections-grid   { gap: 1rem; }

  /* Scenes : grid déjà géré mais on resserre les paddings du contenu */
  .scene-overlay { padding: 1.5rem 1rem; }

  /* Pages avec contenu (header sticky occupe sa place — pas besoin de
     gros padding-top en compensation) */
  .product-page  { padding: 2rem 0 3rem; }
  .cart-page     { padding: 2rem 0 3rem; }

  /* Container global : padding latéral confortable */
  .container { padding: 0 1.25rem; }
  :root { --gutter: 1.25rem; }

  /* Touch targets : tous les boutons et links cliquables au moins 44px */
  .btn { min-height: 44px; padding: 0.85rem 1.5rem; }
  .btn-arrow { min-height: 44px; align-items: center; }
  .fav-toggle { width: 40px; height: 40px; }

  /* Footer : statement + spacing mobile */
  .footer-statement      { padding: 3.5rem 0 2.5rem; }
  .footer-statement-text { font-size: clamp(1.75rem, 7vw, 2.5rem); }
  .footer-grid           { padding: 2.5rem 1.25rem; gap: 2rem; }
  .footer-grid           { grid-template-columns: 1fr 1fr; }
  .footer-brand-col      { grid-column: 1 / -1; }
  .footer-col-eyebrow    { margin-bottom: 1rem; }

  /* Header sticky : padding réduit pour gagner de la place */
  .header-inner { padding: 0 1.25rem; }
}

/* Tweaks très petits écrans (<480px) */
@media (max-width: 480px) {
  .section { padding: 3rem 0; }

  .products-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-grid   { grid-template-columns: 1fr; }
  .footer-bottom { padding: 1rem 1.25rem; }

  /* Logo identique au reste du mobile, pas de réduction supplémentaire */
  .logo img { height: 32px; }

  /* Hero h1 contenu */
  .hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.5rem); }
}

/* ================================================================
   AR "VOIR SUR MON MUR" — modal full-screen mobile
   ================================================================ */

/* Le bouton sur la fiche produit. Caché par défaut, le JS le révèle
   uniquement si l'appareil a une caméra arrière utilisable. */
.ar-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ar-trigger svg { color: var(--accent); }

/* Bouton ghost réutilisable (sobre, bordure subtile) */
.btn.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-emphasis);
  color: var(--fg-cream);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.btn.btn-ghost:hover {
  border-color: var(--accent);
  background: rgba(212, 168, 87, 0.06);
  color: var(--fg-white);
}

/* Modal full-screen */
.ar-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000;
  display: flex;
  overflow: hidden;
  touch-action: none;
}

.ar-modal[hidden] { display: none; }

.ar-stream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.ar-overlay {
  position: absolute;
  z-index: 2;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  will-change: transform;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.55),
    0 4px 8px rgba(0, 0, 0, 0.4);
  /* Centre par défaut, contrôlé via JS */
  top: 50%;
  left: 50%;
  width: 200px;
  transform: translate(-50%, -50%);
}

/* HUD haut : close + hint */
.ar-hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
  pointer-events: none;
}

.ar-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.ar-close:hover { background: rgba(0,0,0,0.7); }

.ar-hint {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
}

/* HUD bas : 2 scale buttons + bouton capture central */
.ar-hud-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  padding: 1.5rem 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
}

.ar-scale-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.1s;
  display: grid;
  place-items: center;
}
.ar-scale-btn:active { transform: scale(0.92); }

.ar-capture {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ar-capture-ring {
  position: absolute;
  inset: 0;
  border: 3px solid #fff;
  border-radius: 50%;
}

.ar-capture-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s, background 0.15s;
}

.ar-capture:active .ar-capture-dot {
  transform: scale(0.85);
  background: var(--accent);
}

/* Canvas caché pour la capture */
.ar-capture-canvas { position: absolute; left: -99999px; }

/* Preview après capture */
.ar-preview {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  gap: 1.5rem;
}
.ar-preview[hidden] { display: none; }

.ar-preview img {
  max-width: 100%;
  max-height: 65vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.ar-preview-actions {
  display: flex;
  gap: 0.75rem;
}

/* État erreur (caméra refusée / pas dispo) */
.ar-error {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 1.5rem;
  color: #fff;
}
.ar-error[hidden] { display: none; }

.ar-error p {
  max-width: 320px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

/* ================================================================
   LEGAL PAGES — CGV, mentions, confidentialité (lisibilité maximale)
   ================================================================ */
.legal-section {
  padding-top: 10rem;
  padding-bottom: 6rem;
  min-height: 70vh;
}

@media (max-width: 700px) {
  .legal-section { padding-top: 2rem; padding-bottom: 4rem; }
}

.legal-container {
  max-width: 760px;
}

.legal-head {
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-soft);
}

.legal-head .eyebrow { margin-bottom: 0.85rem; }

.legal-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--fg-white);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.legal-content {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--fg-cream);
}

.legal-content h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--fg-white);
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-soft);
  letter-spacing: -0.005em;
}
.legal-content h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.legal-content h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg-white);
  margin: 1.75rem 0 0.75rem;
}

.legal-content p {
  margin-bottom: 1rem;
  color: var(--fg-cream);
}

.legal-content ul,
.legal-content ol {
  margin: 1rem 0 1.5rem 1.25rem;
  padding: 0;
}

.legal-content li {
  margin-bottom: 0.5rem;
  color: var(--fg-cream);
}

.legal-content strong {
  color: var(--fg-white);
  font-weight: 600;
}

.legal-content em { color: var(--fg-muted); font-style: italic; }

.legal-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s;
}
.legal-content a:hover { color: var(--accent-warm, var(--accent)); }

.legal-content code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  padding: 0.1em 0.35em;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  color: var(--accent);
}

.legal-foot {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-soft);
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* ================================================================
   ABOUT — page éditoriale sur l'artiste et le process
   ================================================================ */

.about-hero {
  padding: 10rem 0 5rem;
  position: relative;
  overflow: hidden;
}

.about-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-hero-text { min-width: 0; }
.about-hero-text .eyebrow { display: inline-block; margin-bottom: 1rem; }

.about-hero-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--fg-white);
  line-height: 1.05;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}

.about-hero-lead {
  font-size: 1.1rem;
  color: var(--fg-cream);
  line-height: 1.7;
  max-width: 540px;
}

.about-hero-portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.about-hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-portrait-empty {
  background: linear-gradient(135deg,
    rgba(212, 168, 87, 0.08) 0%,
    rgba(20, 20, 24, 0.6) 100%);
  border: 1px solid var(--border-soft);
}

@media (max-width: 900px) {
  .about-hero { padding: 7rem 0 3rem; }
  .about-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-hero-portrait { max-width: 320px; margin: 0 auto; }
}

/* ---- Sections génériques about ------------------------------ */
.about-section { padding: 6rem 0; }

@media (max-width: 700px) { .about-section { padding: 4rem 0; } }

.about-narrow {
  max-width: 720px;
  margin: 0 auto;
}

.about-block-head { margin-bottom: 3rem; }
.about-block-head-center { text-align: center; }
.about-block-head .eyebrow { display: inline-block; margin-bottom: 0.85rem; }

.about-block-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  color: var(--fg-white);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.about-block-sub {
  font-size: 1rem;
  color: var(--fg-muted);
  max-width: 540px;
  margin: 1rem auto 0;
  line-height: 1.6;
}

.about-block-body {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--fg-cream);
  white-space: pre-line;
}

/* ---- Vision (block centré bg deep) -------------------------- */
.about-vision { background: var(--bg-night); }

/* ---- Process (4 étapes numérotées) -------------------------- */
.about-process { background: var(--bg-deep); }

.about-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  counter-reset: about-step;
}

@media (max-width: 900px) {
  .about-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .about-steps { grid-template-columns: 1fr; }
}

.about-step {
  padding: 1.75rem 1.5rem 2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  transition: border-color 0.25s, transform 0.25s;
}
.about-step:hover {
  border-color: rgba(212, 168, 87, 0.25);
  transform: translateY(-2px);
}

.about-step-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 1rem;
  font-variant-numeric: tabular-nums;
}

.about-step h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--fg-white);
  margin: 0 0 0.6rem;
  letter-spacing: -0.005em;
}

.about-step p {
  font-size: 0.92rem;
  color: var(--fg-muted);
  line-height: 1.6;
  margin: 0;
}

/* ---- Studio (image + texte) --------------------------------- */
.about-studio { background: var(--bg-night); }

.about-studio-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
}

.about-studio-visual {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.about-studio-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.about-empty-visual {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.05) 0%, rgba(20, 20, 24, 0.5) 100%);
  border: 1px solid var(--border-soft);
}

@media (max-width: 900px) {
  .about-studio-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-studio-visual { max-width: 320px; margin: 0 auto; order: 2; }
}

/* ---- Values grid (4 cards) ---------------------------------- */
.about-values { background: var(--bg-deep); }

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  max-width: 880px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .about-values-grid { grid-template-columns: 1fr; }
}

.about-value {
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
}

.about-value h3 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 0.6rem;
  letter-spacing: -0.005em;
}

.about-value p {
  font-size: 0.92rem;
  color: var(--fg-cream);
  line-height: 1.65;
  margin: 0;
}

/* ---- CTA final ---------------------------------------------- */
.about-cta {
  padding: 6rem 0 8rem;
  text-align: center;
}

.about-cta-inner {
  max-width: 580px;
  margin: 0 auto;
}

.about-cta-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 2.85rem);
  color: var(--fg-white);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.about-cta-sub {
  font-size: 1rem;
  color: var(--fg-muted);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}