/* ============================================================
   style.css — Styles de la homepage Cave Bonhomme
   Tokens définis dans design-system.css
   ============================================================ */

/* --- Section scaffold --- */
section {
  position: relative;
  z-index: var(--z-content);
  padding: var(--sec-py) 0;
}

/* --- Section headers — grille 5/7, hiérarchie claire --- */
.sec-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap-lg);
  align-items: end;
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--ink-10);
}
.sec-head h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--ts-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.sec-head h2 em { font-style: italic; color: var(--primary-deep); }

/* --- Gradient border shell --- */
.shell {
  padding: 1px;
  border-radius: 24px;
  background: linear-gradient(to right bottom, rgba(35,34,30,0.3), rgba(35,34,30,0.05), rgba(35,34,30,0.1));
}

/* --- Loading placeholder --- */
#root { min-height: 100dvh; }
.boot {
  padding: var(--space-28) var(--space-8);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--ts-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-60);
}

/* --- Wine cards grid --- */
.wines-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.wines-grid.stagger.in > * { opacity: 1; transform: none; }
.wines-swipe-hint { display: none; }

/* --- Nav link hover — underline animée --- */
.nav-link-hover {
  position: relative;
}
.nav-link-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary-deep);
  transition: width var(--dur-slow) var(--ease-out);
}
.nav-link-hover:hover::after { width: 100%; }

/* --- Mobile nav --- */
.mobile-menu-btn { display: none; }
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: var(--bg);
  padding: 88px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 350ms var(--ease-out);
}
.mobile-nav-overlay.open { transform: translateX(0); }
.mobile-nav-overlay a {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-10);
  transition: opacity var(--dur-base) var(--ease-out);
}
.mobile-nav-overlay a:hover { opacity: 0.6; }
.mobile-nav-overlay .close-x {
  position: absolute;
  top: 48px;
  right: 20px;
  background: transparent;
  border: 1px solid var(--ink-20);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out);
}
.mobile-nav-overlay .close-x:hover { border-color: var(--ink); }

/* --- Announcement marquee --- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.announcement-track:hover { animation-play-state: paused; }

/* --- Section dividers (entre les grandes sections) --- */
.section-divider {
  height: 1px;
  background: var(--ink-10);
  margin: 0;
  border: none;
}

/* --- Scroll indicator pour ancrage actif --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--primary);
  z-index: 100;
  transform-origin: left;
  transition: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet ≤ 1024px */
@media (max-width: 1024px) {
  :root {
    --sec-py: 96px;
    --gap-lg: 40px;
    --gap-md: 24px;
  }
  /* .container padding : piloté par --container-pad (design-system.css) */
  .sec-head {
    grid-template-columns: minmax(0, 1fr) !important;   /* track rétrécissable → titre ne déborde pas < 350px */
    gap: 20px !important;
    align-items: start !important;
    margin-bottom: 40px !important;
    padding-bottom: 24px !important;
  }
  /* CTA long du sec-head (ex. "Nous contacter pour une invitation") : autorisé à
     wrapper quand la largeur ne suffit pas (ne wrappe pas là où il tient). */
  .sec-head .btn { white-space: normal; text-align: center; }
  .sec-head h2 { font-size: clamp(40px, 6vw, 64px) !important; }
  #hero > .container,
  #hero [style*="grid-template-columns: 5fr 7fr"],
  #hero [style*="grid-template-columns: 5fr 3fr 4fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  #hero .shell { height: 420px !important; }
  /* Carrousel vins : règles PARTAGÉES dans design-system.css (home + cross-sell) */
  #selection .wines-swipe-hint { display: flex !important; }
  #selection [style*="grid-template-columns: 1.1fr 1.6fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 28px !important;
  }
  #vignerons [style*="grid-template-columns: 5fr 7fr"] {
    grid-template-columns: 1fr !important;
  }
  #vignerons .shell > div { min-height: 380px !important; }
  #degustations [style*="grid-template-columns: repeat(2, 1fr)"] {
    gap: 16px !important;
  }
  /* footer : repli déplacé dans design-system.css (partagé avec les fiches produit) */
}

/* Mobile ≤ 860px: burger nav */
@media (max-width: 860px) {
  header > .container {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  header nav.desktop-nav { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; }
  header .btn {
    padding: 10px 14px !important;
    font-size: var(--ts-mono-xs) !important;
  }
}

/* Mobile ≤ 720px */
@media (max-width: 720px) {
  :root {
    --sec-py: 64px;
    --gap-lg: 24px;
    --gap-md: 16px;
    --container: 100%;
  }
  /* .container padding (20px) et #announcement-banner height (30px)
     désormais pilotés par --container-pad / --banner-h (design-system.css) */
  .nav-cart-label { display: none !important; }
  #announcement-banner .announcement-track { font-size: var(--ts-mono-xs) !important; }
  #hero { padding-top: 140px !important; padding-bottom: 56px !important; min-height: auto !important; }
  #hero h1 { font-size: clamp(44px, 11vw, 72px) !important; line-height: 0.95 !important; }
  #hero p { font-size: var(--ts-body) !important; }
  #hero .shell { height: 320px !important; }
  #hero [style*="display: flex"][style*="gap: 12"] { flex-direction: column !important; align-items: stretch !important; }
  #hero [style*="display: flex"][style*="gap: 12"] .btn { justify-content: center; width: 100%; }
  #hero [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 24px !important;
    margin-top: 40px !important;
  }
  /* Carrousel vins : règles PARTAGÉES dans design-system.css */
  #selection .wines-swipe-hint { display: flex !important; }

  /* Hauteur bouteille réduite + masquer le texte description sur mobile */
  #selection article a[style*="height: 320px"] { height: 200px !important; }
  #selection article p[style*="WebkitLineClamp"] { display: none !important; }
  #selection article div[style*="minHeight: 24"] { display: none !important; }

  /* stats Panaché : tracks rétrécissables ≤720 (évite le débordement ; empilées ≤480) */
  .panache-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  /* Panaché */
  #selection [style*="grid-template-columns: 1.1fr 1.6fr"] {
    padding: 20px !important;
  }

  /* --- Sections --- */
  .sec-head {
    gap: 16px !important;
    margin-bottom: 28px !important;
    padding-bottom: 16px !important;
  }

  /* --- Vignerons --- */
  #vignerons [style*="cormorant"][style*="fontSize: 56"] { font-size: 40px !important; }
  #vignerons .shell > div { min-height: 260px !important; }
  #vignerons [style*="grid-template-columns: 5fr 7fr"] { gap: 24px !important; }
  #vignerons [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  /* --- Degustations --- */
  #degustations [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- Footer responsive : déplacé dans design-system.css (partagé fiches produit) --- */

  /* --- Panier : collapse de la grille récap 7fr 5fr en 1 colonne (#4) --- */
  [style*="grid-template-columns: 7fr 5fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--space-8) !important;
  }
  /* lignes d'articles : colonne nom rétrécissable (minmax 0) → fin du débordement 5px */
  [style*="grid-template-columns: 52px 1fr auto"] {
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
  }

  /* --- Cart drawer mobile --- */
  aside[style*="width: min(480px"] { width: 100vw !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Pages légales (.legal-content)
   Habille le HTML nu injecté depuis Shopify Pages.
   ============================================================ */
.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad) var(--space-24);
}
.legal-content h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--ts-h2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-10);
  color: var(--ink);
}
.legal-content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--ts-h3);
  letter-spacing: var(--ls-h4);
  line-height: var(--lh-heading);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--ink);
}
.legal-content h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--ts-h4);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--ink);
}
.legal-content p {
  font-family: var(--font-sans);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
  margin-bottom: var(--space-4);
}
.legal-content ul {
  margin: 0 0 var(--space-4) var(--space-5);
  color: var(--ink-body);
}
.legal-content li {
  font-family: var(--font-sans);
  font-size: var(--ts-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-2);
}
.legal-content a {
  color: var(--primary-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-content a:hover {
  color: var(--ink);
}
.legal-content strong {
  font-weight: var(--fw-medium);
  color: var(--ink);
}

/* ============================================================
   Panaché (#selection) — empilement mobile ≤480px.
   Les 3 stats passent en 1 colonne ; séparateurs verticaux (borderRight inline)
   → séparateurs horizontaux ; pictogramme des barres et son libellé chacun sur
   sa ligne, sans coupe. Desktop et 481px+ inchangés.
   ============================================================ */
@media (max-width: 480px) {
  .panache-stats { grid-template-columns: 1fr !important; }
  .panache-stats > div {
    border-right: none !important;      /* supprime les barres verticales inline */
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }
  .panache-stats > div + div {
    border-top: 1px solid var(--ink-10); /* séparateur horizontal entre stats empilées */
  }
  .panache-stats .mono { white-space: nowrap; }  /* intitulé et précision chacun sur 1 ligne */

  /* Pictogramme 6 bouteilles + "= 1 carton · 6 bouteilles" : le label passe
     ENTIER sous les barres (jamais coupé). */
  .panache-bars { flex-wrap: wrap; }
  .panache-bars__label {
    margin-left: 0 !important;
    width: 100%;
    margin-top: var(--space-3);
    white-space: nowrap;
  }
}