/* ============================================================
   design-system.css — Source unique de tokens pour Cave Bonhomme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

:root {
  /* --- Couleurs --- */
  --bg:              #FAF8EE;
  --cream:           #FAF8EE;
  --cream-dim:       #F0ECD8;

  --ink:             #23221E;
  --ink-80:          rgba(35, 34, 30, 0.80);
  --ink-60:          rgba(35, 34, 30, 0.60);
  --ink-40:          rgba(35, 34, 30, 0.40);
  --ink-20:          rgba(35, 34, 30, 0.20);
  --ink-15:          rgba(35, 34, 30, 0.15);
  --ink-10:          rgba(35, 34, 30, 0.10);
  --ink-05:          rgba(35, 34, 30, 0.05);

  --cream-80:        rgba(250, 248, 238, 0.80);
  --cream-60:        rgba(250, 248, 238, 0.60);
  --cream-40:        rgba(250, 248, 238, 0.40);
  --cream-20:        rgba(250, 248, 238, 0.20);
  --cream-15:        rgba(250, 248, 238, 0.15);
  --cream-10:        rgba(250, 248, 238, 0.10);

  --ink-deep:        #2A2925;

  --primary:         #E8D547;
  --primary-deep:    #A8B545;
  --primary-soft:    #F2EAA0;
  --primary-ink:     #5A5F1A;

  --success:         #3F8A4B;
  --success-soft:    rgba(63, 138, 75, 0.12);

  --error:           #C4453C;

  --ink-body:        rgba(35, 34, 30, 0.75);

  /* --- Typographie --- */
  --font-display:    "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans:       "Archivo", -apple-system, system-ui, sans-serif;
  --font-body:       var(--font-sans);

  --ts-hero:         clamp(80px, 10vw, 180px);
  --ts-display:      clamp(56px, 6vw, 88px);
  --ts-h2:           clamp(36px, 4.5vw, 56px);
  --ts-h3:           28px;
  --ts-h4:           20px;
  --ts-body-lg:      17px;
  --ts-body:         16px;
  --ts-mono:         11px;
  --ts-mono-xs:      10px;

  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-bold:         700;

  --lh-display:      0.95;
  --lh-heading:      1.05;
  --lh-tight:        1.4;
  --lh-body:         1.7;

  --ls-display:     -0.04em;
  --ls-heading:     -0.03em;
  --ls-h4:          -0.02em;
  --ls-body:         0;
  --ls-mono:         0.14em;
  --ls-mono-wide:    0.18em;

  /* --- Spacing --- */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-16:        64px;
  --space-20:        80px;
  --space-24:        96px;
  --space-28:        112px;
  --space-32:        140px;

  --gap-xs:          var(--space-2);
  --gap-sm:          var(--space-4);
  --gap-md:          var(--space-8);
  --gap-lg:          var(--space-16);
  --gap-xl:          var(--space-24);

  --sec-py:          var(--space-32);
  --container:       1300px;
  --container-pad:   var(--space-8);
  --banner-h:        36px;

  /* --- Radius --- */
  --r-sm:            8px;
  --r-md:            16px;
  --r-lg:            20px;
  --r-xl:            28px;
  --r-pill:          9999px;

  /* --- Shadows --- */
  --shadow-sm:       0 4px 8px rgba(35, 34, 30, 0.04);
  --shadow-md:       0 20px 25px -5px rgba(35, 34, 30, 0.05),
                     0 8px 10px -6px rgba(35, 34, 30, 0.05);
  --shadow-lg:       0 25px 50px -12px rgba(35, 34, 30, 0.12);
  --shadow-glow:     0 0 40px rgba(35, 34, 30, 0.35),
                     inset 0 0 15px rgba(250, 248, 238, 0.15);
  --shadow-bottle:   0 30px 40px rgba(35, 34, 30, 0.18);

  /* --- Motion (Emil Kowalski-style strong curves) --- */
  --dur-fast:        150ms;
  --dur-base:        200ms;
  --dur-slow:        300ms;
  --dur-slower:      500ms;
  --dur-reveal:      600ms;

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0.23, 1, 0.32, 1);       /* strong ease-out */
  --ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);      /* strong ease-in-out */
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-linear:     linear;

  /* --- Z-index --- */
  --z-content:       2;
  --z-header:        50;
  --z-mobile-nav:    60;
  --z-cart:          70;
}

/* ============================================================
   Reset + Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

html, body {
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}

.banner-hidden { display: none !important; }

h1, h2, h3, h4, h5, h6,
.cormorant {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--ts-display); line-height: var(--lh-display); }
h2 { font-size: var(--ts-h2);      line-height: var(--lh-display); }
h3 { font-size: var(--ts-h4);      line-height: var(--lh-tight); letter-spacing: var(--ls-h4); }

.archivo { font-family: var(--font-sans); }

em, i, .italic { font-style: italic; }

p {
  font-family: var(--font-body);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  color: var(--ink-80);
  text-wrap: pretty;
}

.mono, .label, .kicker {
  font-family: var(--font-sans);
  font-size: var(--ts-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}
.mono--sm { font-size: var(--ts-mono-xs); }
.lede {
  font-family: var(--font-body);
  font-size: var(--ts-body-lg);
  line-height: 1.6;
  color: var(--ink-80);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover { color: var(--primary-deep); }

img { display: block; max-width: 100%; }

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

/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--ink); color: var(--cream);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--ts-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform  var(--dur-fast) var(--ease-out),
    background var(--dur-base) var(--ease-standard),
    color      var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }
.btn:hover {
  background: var(--primary-deep); color: var(--cream);
  border-color: var(--primary-deep);
}
.btn--primary {
  background: var(--primary); color: var(--primary-ink);
  border-color: var(--primary);
}
.btn--primary:hover {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}
.btn--ghost {
  background: transparent; color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink); color: var(--cream); border-color: var(--ink);
}

/* --- Formulaires --- */
.input {
  width: 100%;
  min-width: 0;   /* peut rétrécir dans une grille → pas de débordement < 350px */
  padding: var(--space-4) var(--space-5);
  background: var(--bg);
  border: 1px solid var(--ink-20);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--ts-body);
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: border-color var(--dur-base) var(--ease-out);
}
.input:focus { border-color: var(--ink); outline: none; }
.input::placeholder { color: var(--ink-40); }
.input--error { border-color: #C44; }

.input-label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--ts-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: var(--space-2);
}

.input-error {
  font-family: var(--font-sans);
  font-size: var(--ts-mono-xs);
  color: #C44;
  margin-top: var(--space-1);
}

.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.field {
  margin-bottom: var(--space-5);
  min-width: 0;   /* enfant de grille rétrécissable → formulaire ne déborde pas < 350px */
}

/* Radio / Checkbox */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.radio-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--ink-15);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.radio-item:hover { border-color: var(--ink-40); }
.radio-item.selected { border-color: var(--ink); background: var(--ink-05); }

.radio-dot {
  width: 18px; height: 18px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-40);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.radio-item.selected .radio-dot { border-color: var(--ink); }
.radio-item.selected .radio-dot::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: var(--r-pill);
  background: var(--ink);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.checkbox-box {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid var(--ink-40);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.checkbox-item.checked .checkbox-box {
  background: var(--ink); border-color: var(--ink);
}

/* Section de formulaire */
.form-section {
  padding: var(--space-8) 0;
  border-bottom: 1px solid var(--ink-10);
}
.form-section:last-of-type { border-bottom: none; }
.form-section__title {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--ts-h4);
  letter-spacing: var(--ls-h4);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.form-section__num {
  font-family: var(--font-sans);
  font-size: var(--ts-mono);
  letter-spacing: var(--ls-mono);
  color: var(--ink-40);
}

/* --- Focus --- */
:focus-visible {
  outline: 2px solid var(--primary-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Selection --- */
::selection { background: var(--primary); color: var(--primary-ink); }

/* --- Reveal animation --- */
/* Défaut = VISIBLE. L'état caché n'est appliqué que sous .reveal-ready (posé par
   reveal.js). Pas de JS → tout reste visible (dégradation gracieuse). */
.reveal {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.reveal-ready .reveal:not(.in) {
  opacity: 0;
  transform: translateY(12px) scale(0.99);
}

/* --- Stagger children (wine cards, event cards) --- */
.stagger > * {
  opacity: 1;
  transform: none;
  transition:
    opacity   var(--dur-slower) var(--ease-out),
    transform var(--dur-slower) var(--ease-out);
}
.reveal-ready .stagger:not(.in) > * {
  opacity: 0;
  transform: translateY(10px);
}
.stagger.in > *:nth-child(1) { transition-delay: 0ms; }
.stagger.in > *:nth-child(2) { transition-delay: 60ms; }
.stagger.in > *:nth-child(3) { transition-delay: 120ms; }
.stagger.in > *:nth-child(4) { transition-delay: 180ms; }
.stagger.in > *:nth-child(5) { transition-delay: 240ms; }
.stagger.in > *:nth-child(6) { transition-delay: 300ms; }

/* --- Hero stagger entrance (class-driven, not inline animation) --- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-stagger-item {
  opacity: 0;
  transform: translateY(16px);
}
.hero-stagger-item.hero-in {
  animation: heroFadeUp 700ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* --- Hover: only on pointer devices (Emil) --- */
@media (hover: hover) and (pointer: fine) {
  a:hover, button:hover { cursor: pointer; }
}

/* ============================================================
   Responsive PARTAGÉ — chargé par TOUTES les pages (dont les fiches
   produit, qui ne chargent pas style.css). Composants communs :
   bandeau, conteneur, footer. Le responsive spécifique home vit dans
   style.css, le spécifique produit dans product.css.
   ============================================================ */

/* Bandeau : hauteur pilotée par --banner-h (cohérence bandeau ↔ header,
   cf. Nav top et body.product-page.has-banner padding-top). */
#announcement-banner { height: var(--banner-h) !important; }

/* Card vin (partagée home + cross-sell) : en carrousel ≤720 les cards sont
   étroites. Deux réglages typographiques (moindre destruction, pas de font-size) :
   - le CTA reste sur 1 ligne (letter-spacing réduit) → hauteurs de cards égales ;
   - la mention "75 CL · TTC" resserrée pour coexister avec le prix (sinon elle
     passe ENTIÈRE à la ligne via flex-wrap — jamais de coupe au milieu). */
.wine-card .cta-compact { display: none; }        /* libellé court masqué par défaut */
@media (max-width: 720px) {
  .wine-card button { letter-spacing: 0.5px; white-space: nowrap; }
  .wine-card__unit { letter-spacing: 0.3px; }
  /* En mobile (≤720, breakpoint système), "+ Ajouter au carton" est trop serré
     dans la card → libellé court "+ Ajouter". La règle des multiples de 6 reste
     portée par le sélecteur de quantité et par le panier. */
  .wine-card .cta-full { display: none; }
  .wine-card .cta-compact { display: inline; }
}

/* ============================================================
   Carrousel vins PARTAGÉ — home (#selection) ET cross-sell (.pp-other).
   UNE seule définition (mêmes breakpoints, largeurs de card, gouttières,
   full-bleed) → WineCard se rend À L'IDENTIQUE sur les deux à largeur égale.
   Remplace les ex-définitions dupliquées de style.css et product.css.
   ============================================================ */
@media (max-width: 1024px) {
  #selection .wines-grid,
  .pp-other .wines-grid {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    /* full-bleed : marge négative = --container-pad, re-padding = --container-pad
       → 1re card alignée au contenu, scroll bord à bord */
    padding: 0 var(--container-pad) 16px !important;
    margin: 0 calc(-1 * var(--container-pad)) !important;
    scrollbar-width: none;
    scroll-padding-left: var(--container-pad);
  }
  #selection .wines-grid::-webkit-scrollbar,
  .pp-other .wines-grid::-webkit-scrollbar { display: none; }
  #selection .wines-grid > article,
  .pp-other .wines-grid > article {
    flex: 0 0 42% !important;
    min-width: 42% !important;
    scroll-snap-align: start !important;
  }
}
@media (max-width: 720px) {
  #selection .wines-grid > article,
  .pp-other .wines-grid > article {
    flex: 0 0 55% !important;
    min-width: 55% !important;
  }
}

@media (max-width: 720px) {
  :root {
    --container-pad: var(--space-5);   /* 20px — .container suit le token partout */
    --banner-h: 30px;                  /* header (Nav top) suit via var(--banner-h) */
  }
}

/* Footer — repli responsive PARTAGÉ (déplacé depuis style.css pour couvrir
   aussi les fiches produit, qui sinon gardaient la grille desktop → débordement). */
@media (max-width: 1024px) {
  footer [style*="grid-template-columns: 5fr 7fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-bottom: 48px !important;
  }
  footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 48px 0 !important;
  }
}
@media (max-width: 720px) {
  footer [style*="grid-template-columns: 5fr 7fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 40px !important;
  }
  footer [style*="grid-template-columns: 2fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 0 !important;
  }
  footer [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  footer h2 { font-size: clamp(32px, 8vw, 48px) !important; }
  footer form { flex-direction: column !important; gap: 10px !important; }
  footer form input { width: 100% !important; }
  footer form button { width: 100% !important; justify-content: center; }
  footer [style*="justify-content: space-between"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  footer [style*="justify-content: space-between"][style*="flex-wrap: wrap"] > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
}