/* ============================================================
   CAVE SAINT PIERRE — Design System
   Dark cellar palette · candlelight gold · Bordeaux accent
   ============================================================ */

:root {
  /* Core palette — HSL */
  --background:        hsl(24 18% 9%);
  --foreground:        hsl(36 30% 92%);
  --card:              hsl(24 16% 13%);
  --card-foreground:   hsl(36 30% 92%);
  --secondary:         hsl(24 14% 18%);   /* aged oak */
  --muted:             hsl(24 12% 22%);
  --muted-foreground:  hsl(36 12% 62%);
  --accent:            hsl(0 55% 32%);     /* deep Bordeaux */
  --accent-bright:     hsl(2 58% 42%);
  --accent-foreground: hsl(36 30% 92%);
  --gold:              hsl(38 55% 58%);    /* candlelight / brass */
  --gold-soft:         hsl(38 45% 70%);
  --wine-deep:         hsl(350 60% 18%);
  --border:            hsl(28 14% 24%);
  --ring:              hsl(38 55% 58%);

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  --ease-pour: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 350;
  min-height: 100vh;
  cursor: none;
  overflow-x: clip; /* filet de sécurité global — clip ne crée pas de scroll container donc ne casse pas position:fixed */
}

/* hide default cursor only on fine pointers */
@media (pointer: coarse) { body { cursor: auto; } }

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

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: none; border: none; background: none; color: inherit; }
@media (pointer: coarse) { button { cursor: pointer; } }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.display .it {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}
.serif-italic { font-family: var(--font-display); font-style: italic; }

.label-mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}
.mono { font-family: var(--font-mono); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: 0.8;
}

.gold-hairline {
  height: 1px;
  width: 100%;
  background: var(--gold);
  opacity: 0.28;
  border: none;
}

/* ============================================================
   TEXTURE & LIGHT
   ============================================================ */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* fixed full-page grain layer */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.candle-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      hsl(38 60% 55% / 0.30) 0%,
      hsl(28 55% 40% / 0.16) 32%,
      hsl(24 40% 20% / 0.05) 58%,
      transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  animation: candle 7s ease-in-out infinite;
}
@keyframes candle {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(120% 90% at 50% 40%, transparent 40%, hsl(24 22% 5% / 0.55) 100%);
}

/* ============================================================
   IMAGE PLACEHOLDERS (candle-lit panels)
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, hsl(24 16% 16%) 0%, hsl(24 18% 10%) 60%, hsl(350 30% 9%) 100%);
  display: flex;
  align-items: flex-end;
}
.ph::before { /* vertical glass slats */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
     90deg,
     hsl(36 20% 60% / 0) 0px,
     hsl(36 20% 60% / 0) 22px,
     hsl(36 25% 65% / 0.05) 23px,
     hsl(36 25% 65% / 0) 24px);
  z-index: 1;
}
.ph::after { /* glass glint */
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 140%;
  background: linear-gradient(105deg, transparent, hsl(38 50% 70% / 0.10) 45%, hsl(40 60% 80% / 0.18) 50%, transparent 60%);
  transform: rotate(8deg);
  z-index: 2;
  pointer-events: none;
}
.ph .ph-cap {
  position: relative;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(36 20% 70% / 0.65);
  padding: 0.9rem 1rem;
}
.ph .ph-cap::before {
  content: "◇ ";
  color: var(--gold);
  letter-spacing: 0;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-dot {
  width: 7px; height: 7px;
  background: var(--gold);
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid hsl(38 55% 58% / 0.6);
  transition: width .35s var(--ease-pour), height .35s var(--ease-pour),
              background .35s var(--ease-pour), border-color .35s;
  display: flex; align-items: center; justify-content: center;
}
.cursor-ring .c-label {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--background);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
body.cursor-grow .cursor-ring {
  width: 84px; height: 84px;
  background: var(--gold);
  border-color: var(--gold);
}
body.cursor-grow .cursor-ring .c-label { opacity: 1; transform: scale(1); }
body.cursor-grow .cursor-dot { opacity: 0; }
@media (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  z-index: 200;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { width: min(1280px, 90vw); margin-inline: auto; }
section { position: relative; overflow-x: clip; }
.pad { padding-block: clamp(5rem, 11vh, 9rem); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 1.7rem;
  position: relative;
  transition: transform .4s var(--ease-pour), background .4s, color .4s, border-color .4s;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid {
  background: var(--accent);
  color: var(--foreground);
}
.btn-solid:hover { background: var(--accent-bright); }
.btn-ghost {
  border: 1px solid hsl(38 55% 58% / 0.5);
  color: var(--gold);
}
.btn-ghost:hover { background: hsl(38 55% 58% / 0.08); border-color: var(--gold); }
.btn .arr { transition: transform .4s var(--ease-pour); }
.btn:hover .arr { transform: translateX(4px); }

/* gold pill (nav) */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border-radius: 100px;
  transition: background .4s, color .4s;
}
.pill:hover { background: var(--gold); color: var(--background); }

/* ============================================================
   NAVBAR
   ============================================================ */
/* Entrée du header après l'age gate */
@keyframes navReveal {
  from { opacity: 0; transform: translateY(-110%); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.2rem, 4vw, 3.5rem);
  opacity: 0;
  transform: translateY(-110%);
  transition:
    opacity .7s var(--ease-pour),
    transform .7s var(--ease-pour),
    background .5s var(--ease-pour),
    backdrop-filter .5s,
    padding .4s var(--ease-pour),
    box-shadow .5s;
}

/* Ligne dorée en bas — apparaît au scroll */
.nav::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity .6s var(--ease-pour), transform .8s var(--ease-pour);
  pointer-events: none;
}

.nav.revealed {
  opacity: 1;
  transform: translateY(0);
}

.nav.scrolled {
  background: hsl(24 18% 7% / 0.88);
  backdrop-filter: blur(22px) saturate(1.5);
  padding-block: 0.9rem;
  box-shadow: 0 0 0 1px var(--border), 0 8px 40px hsl(24 22% 4% / 0.5);
}
.nav.scrolled::after {
  opacity: 0.6;
  transform: scaleX(1);
}

.nav-brand {
  display: flex; flex-direction: column; line-height: 1;
  flex-shrink: 1; /* se contracte si besoin pour éviter l'overflow */
  min-width: 0;
}
.nav-brand .wm {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2.8vw, 1.45rem); /* s'adapte au viewport */
  letter-spacing: 0.05em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: letter-spacing .5s var(--ease-pour), color .3s;
}
.nav-brand:hover .wm { letter-spacing: 0.1em; color: var(--gold-soft); }
.nav-brand .tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: var(--muted-foreground);
  margin-top: 0.3rem;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 2rem; }
.nav-links a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--foreground);
  position: relative;
  padding-bottom: 3px;
  opacity: 0.75;
  transition: opacity .3s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width .4s var(--ease-pour);
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 1.2rem; flex-shrink: 0; }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; color: var(--foreground); opacity: 0.8; transition: opacity .3s, color .3s; }
.icon-btn:hover { opacity: 1; color: var(--gold); }
.cart-wrap { position: relative; }
.cart-count {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--accent);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  min-width: 16px; height: 16px;
  display: grid; place-items: center;
  border-radius: 100px;
  padding: 0 4px;
}
.nav-burger { display: none; }

/* ============================================================
   MOBILE NAV DRAWER
   ============================================================ */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: hsl(24 22% 5% / 0.72);
  backdrop-filter: blur(6px);
  z-index: 115;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s var(--ease-pour), visibility .5s;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.nav-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  height: 100dvh;
  background: hsl(24 18% 10%);
  border-left: 1px solid var(--border);
  z-index: 125;
  padding: 5.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transform: translateX(100%);
  transition: transform .5s var(--ease-pour);
  overflow-y: auto;
}
.nav-menu.open { transform: translateX(0); }

.nav-menu-close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--foreground);
  opacity: 0.8;
  transition: opacity .3s, color .3s;
}
.nav-menu-close:hover { opacity: 1; color: var(--gold); }

.nav-menu a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  padding: 1rem 0;
  border-bottom: 1px solid hsl(28 14% 24% / 0.5);
  color: var(--foreground);
  opacity: 0.85;
  display: block;
  transition: color .3s, opacity .3s, padding-left .3s var(--ease-pour);
}
.nav-menu a:hover { color: var(--gold); opacity: 1; padding-left: 0.5rem; }

.nav-menu-footer {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -8% 0 0 0;
  height: 116%;
  z-index: 0;
  background:
    linear-gradient(180deg, hsl(24 20% 7%) 0%, transparent 30%, transparent 60%, hsl(24 22% 6%) 100%),
    linear-gradient(105deg, hsl(350 40% 12%) 0%, hsl(24 18% 11%) 55%, hsl(24 18% 8%) 100%);
}
.hero-bg .racks { /* faint bottle-rack rhythm */
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 78px, hsl(36 20% 50% / 0.04) 78px 80px),
    repeating-linear-gradient(0deg, transparent 0 150px, hsl(36 20% 50% / 0.035) 150px 152px);
  mask-image: radial-gradient(120% 100% at 70% 50%, black, transparent 75%);
}
.hero .candle-glow { width: 720px; height: 720px; right: -6%; top: 18%; }
.hero-inner { position: relative; z-index: 4; }
.hero h1 {
  font-size: clamp(3.4rem, 11vw, 9.5rem);
  margin: 1.6rem 0 1.8rem;
  max-width: 14ch;
}
.hero .subline {
  max-width: 34rem;
  color: var(--muted-foreground);
  font-size: 1.05rem;
}
.hero-cta { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; }
.scroll-cue {
  position: absolute;
  bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
}
.scroll-cue .line {
  width: 1px; height: 56px;
  background: linear-gradient(var(--gold), transparent);
  position: relative; overflow: hidden;
}
.scroll-cue .line::after {
  content: "";
  position: absolute; top: -60%; left: 0;
  width: 100%; height: 60%;
  background: var(--gold);
  animation: cueDrop 2.4s var(--ease-pour) infinite;
}
@keyframes cueDrop { 0% { top: -60%; } 100% { top: 100%; } }
.scroll-cue span { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--muted-foreground); }

/* split-reveal word mechanics */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; }
.word-mask > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1.1s var(--ease-pour), opacity 1.1s var(--ease-pour);
  transition-delay: calc(var(--i, 0) * 0.045s);
}
[data-split].is-in .word-mask > span { transform: translateY(0); opacity: 1; }

/* ============================================================
   INTRO / MAISON pinned reveal
   ============================================================ */
.intro { min-height: 100vh; display: flex; align-items: center; }
.intro .statement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.6vw, 4rem);
  line-height: 1.18;
  max-width: 24ch;
}
.intro .statement .w { color: hsl(36 30% 92% / 0.14); transition: color .1s; }
.intro .statement .hl.lit { color: var(--gold) !important; }

/* ============================================================
   NOS UNIVERS — bento
   ============================================================ */
.univ-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 14px;
}
.tile {
  position: relative;
  overflow: hidden;
  background: var(--card);
  display: flex; align-items: flex-end;
}
.tile .ph { position: absolute; inset: 0; }
.tile .tile-body {
  position: relative; z-index: 5;
  padding: 1.4rem;
  width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between;
  background: linear-gradient(0deg, hsl(24 22% 6% / 0.85), transparent 70%);
}
.tile h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.tile .ph::after { transition: transform 1.2s var(--ease-pour); }
.tile:hover .ph { transform: none; }
.tile .ph-img { position: absolute; inset: 0; transition: transform 1.1s var(--ease-pour); }
.tile:hover .ph-img { transform: scale(1.06); }
.tile .go { color: var(--gold); opacity: 0; transform: translateX(-6px); transition: .4s var(--ease-pour); }
.tile:hover .go { opacity: 1; transform: none; }
.tile-lg { grid-column: span 2; grid-row: span 2; }
.tile-tall { grid-row: span 2; }
.tile-wide { grid-column: span 2; }

/* ============================================================
   SÉLECTION — horizontal pinned
   ============================================================ */
.sel { overflow: hidden; }
.sel-head { margin-bottom: 3rem; }
.sel-track-outer { position: relative; }
.sel-track { display: flex; gap: 28px; padding-inline: clamp(1.5rem,5vw,3.5rem); will-change: transform; }
.pcard {
  flex: 0 0 clamp(280px, 26vw, 360px);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  display: flex; flex-direction: column;
}
.pcard .pcard-img { position: relative; aspect-ratio: 3/4; margin-bottom: 1.3rem; }
.pcard .badge {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 6;
  background: hsl(24 22% 6% / 0.7);
  border: 1px solid hsl(38 55% 58% / 0.4);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  backdrop-filter: blur(4px);
}
.pcard .region { color: var(--muted-foreground); }
.pcard h3 { font-family: var(--font-display); font-size: 1.85rem; font-weight: 500; line-height: 1.05; margin: 0.5rem 0 0.2rem; }
.pcard .appel { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 1.2rem; }
.pcard .pcard-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.pcard .price { font-family: var(--font-display); font-size: 1.6rem; }
.pcard .add {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: 0.5rem;
  transition: color .3s;
}
.pcard .add:hover { color: var(--gold-soft); }
.pcard .add.added { color: var(--muted-foreground); }
.sel-hint { display: flex; align-items: center; gap: 0.8rem; margin-top: 2rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; }
.sel-hint .bar { width: 80px; height: 1px; background: var(--border); position: relative; }
.sel-hint .bar i { position: absolute; left: 0; top: 0; height: 1px; width: 30%; background: var(--gold); }

/* ============================================================
   RÉGIONS strip
   ============================================================ */
.regions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.region-list { border-top: 1px solid var(--border); }
.region-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: padding-left .5s var(--ease-pour), color .4s;
}
.region-row .rname { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500; transition: color .4s; }
.region-row .rcount { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted-foreground); }
.region-row::before {
  content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 2px; height: 60%; background: var(--gold); transition: transform .4s var(--ease-pour);
}
.region-row.active { padding-left: 1.5rem; }
.region-row.active::before { transform: translateY(-50%) scaleY(1); }
.region-row.active .rname { color: var(--gold); }
.region-visual { position: relative; aspect-ratio: 4/5; }
.region-panel { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-pour); display: flex; flex-direction: column; }
.region-panel.active { opacity: 1; }
.region-panel .ph { flex: 1; }
.region-panel .note { padding-top: 1.2rem; }
.region-panel .note p { color: var(--muted-foreground); margin-top: 0.5rem; max-width: 30ch; }

/* ============================================================
   CONSEIL DU CAVISTE
   ============================================================ */
.conseil { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.conseil .portrait { aspect-ratio: 4/5; }
.conseil h2 { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; line-height: 1.04; margin: 1.4rem 0; }
.conseil p.lead { color: var(--muted-foreground); max-width: 42ch; }
.stats { display: flex; gap: clamp(1.5rem,4vw,3.5rem); margin-top: 2.6rem; flex-wrap: wrap; }
.stat .num { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--gold); line-height: 1; }
.stat .lbl { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); margin-top: 0.5rem; max-width: 16ch; }

/* ============================================================
   COFFRETS
   ============================================================ */
.coffrets { background: linear-gradient(180deg, hsl(350 45% 12%), hsl(0 50% 14%)); }
.coffrets .grain::after { opacity: 0.07; }
.gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 3rem; }
.gift {
  border: 1px solid hsl(38 55% 58% / 0.28);
  background: hsl(24 22% 8% / 0.4);
  padding: 1.8rem;
  display: flex; flex-direction: column;
  min-height: 320px;
  transition: background .5s, transform .5s var(--ease-pour);
}
.gift:hover { background: hsl(24 22% 8% / 0.7); transform: translateY(-4px); }
.gift .gift-img { aspect-ratio: 16/10; margin-bottom: 1.4rem; }
.gift h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; }
.gift p { color: var(--muted-foreground); font-size: 0.95rem; margin: 0.4rem 0 1.2rem; }
.gift .chips { display: flex; gap: 0.5rem; margin-top: auto; flex-wrap: wrap; }
.gift .chip { font-family: var(--font-mono); font-size: 0.65rem; border: 1px solid var(--border); padding: 0.4rem 0.7rem; color: var(--gold); }

/* ============================================================
   VISITEZ
   ============================================================ */
.visite { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4rem); align-items: stretch; }
.visite-map { position: relative; min-height: 420px; background: hsl(24 16% 11%); overflow: hidden; }
.visite-map .map-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(hsl(38 30% 50% / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(38 30% 50% / 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  filter: grayscale(1);
}
.visite-map .map-road { position: absolute; background: hsl(36 20% 55% / 0.12); }
.visite-map .pin {
  position: absolute; top: 46%; left: 52%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; z-index: 4;
}
.visite-map .pin .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px hsl(38 55% 58% / 0.18), 0 0 0 14px hsl(38 55% 58% / 0.08); }
.visite-map .pin .ping { position: absolute; top: 0; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--gold); animation: ping 2.4s var(--ease-pour) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(4); opacity: 0; } }
.visite-map .pin .ploc { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--gold); background: hsl(24 22% 6% / 0.8); padding: 0.4rem 0.7rem; }
.visite-info h2 { font-family: var(--font-display); font-size: clamp(2.2rem,4.6vw,3.4rem); font-weight: 500; line-height: 1.05; margin-bottom: 1.5rem; }
.addr { font-family: var(--font-mono); font-size: 0.82rem; line-height: 2.1; letter-spacing: 0.04em; color: var(--foreground); }
.addr .k { color: var(--muted-foreground); }
.visite-info .btn { margin-top: 1.8rem; }

/* ============================================================
   SERVICES band
   ============================================================ */
.services { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.svc {
  padding: 2.6rem 1.8rem;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.svc:last-child { border-right: none; }
.svc .ico { color: var(--gold); }
.svc h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.svc p { color: var(--muted-foreground); font-size: 0.88rem; }

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.news { text-align: center; }
.news h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 500; }
.news p { color: var(--muted-foreground); margin: 1rem auto 2.4rem; max-width: 40ch; }
.news-form { display: flex; gap: 0; max-width: 520px; margin-inline: auto; position: relative; }
.field { position: relative; flex: 1; }
.field input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border);
  color: var(--foreground); font-family: var(--font-body); font-size: 1rem; padding: 0.9rem 0.3rem;
  outline: none;
}
.field label {
  position: absolute; left: 0.3rem; top: 0.9rem; color: var(--muted-foreground); pointer-events: none;
  transition: .35s var(--ease-pour); font-size: 1rem;
}
.field input:focus + label, .field input.filled + label { top: -0.7rem; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.field .underline { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--gold); transition: width .5s var(--ease-pour); }
.field input:focus ~ .underline { width: 100%; }
.news-form .submit { background: var(--gold); color: var(--background); padding: 0 1.4rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; transition: background .3s; }
.news-form .submit:hover { background: var(--gold-soft); }

footer { background: hsl(24 20% 7%); padding-top: clamp(4rem, 8vh, 7rem); overflow-x: clip; }
.foot-wm {
  font-family: var(--font-display);
  font-size: clamp(3rem, 16vw, 15rem);
  font-weight: 600;
  line-height: 0.8;
  text-align: center;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 1px hsl(38 55% 58% / 0.4);
  color: transparent;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 100%) no-repeat;
  background-size: 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 1.4s var(--ease-pour);
  margin-bottom: 3rem;
}
.foot-wm.fill { background-size: 100% 100%; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 3rem; border-top: 1px solid var(--border); }
.foot-col h5 { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.3rem; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.foot-col a { color: var(--muted-foreground); font-size: 0.9rem; transition: color .3s; }
.foot-col a:hover { color: var(--foreground); }
.foot-col .intro-c { color: var(--muted-foreground); max-width: 30ch; font-size: 0.92rem; line-height: 1.7; }
.socials { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.socials a { width: 38px; height: 38px; border: 1px solid hsl(38 55% 58% / 0.4); display: grid; place-items: center; color: var(--gold); transition: background .3s, color .3s; }
.socials a:hover { background: var(--gold); color: var(--background); }
.legal-notice {
  border-top: 1px solid var(--border);
  padding-block: 1.6rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}
.copy { padding-bottom: 2.4rem; text-align: center; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; }

/* ============================================================
   AGE GATE
   ============================================================ */
.agegate {
  position: fixed;
  inset: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: hsl(24 20% 5% / 0.6);
  backdrop-filter: blur(18px) saturate(1.1);
  transition: opacity .8s var(--ease-pour), visibility .8s;
}
.agegate.hidden { opacity: 0; visibility: hidden; }
.agegate .ag-card {
  width: min(520px, 100%);
  max-width: 100%;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem);
  background: hsl(24 18% 10% / 0.85);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.agegate .ag-card .candle-glow { width: 380px; height: 380px; top: -30%; left: 50%; transform: translateX(-50%); }
.agegate .ag-inner { position: relative; z-index: 3; }
.agegate .ag-wm { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.05em; }
.agegate .ag-tag { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.25em; color: var(--muted-foreground); margin-top: 0.4rem; }
.agegate h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 500; margin: 2rem 0 0.8rem; }
.agegate p { color: var(--muted-foreground); font-size: 0.92rem; margin-bottom: 2rem; }
.agegate .ag-btns { display: flex; gap: 1rem; justify-content: center; }
.agegate .ag-no { color: var(--muted-foreground); border: 1px solid var(--border); padding: 1rem 1.7rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; transition: color .3s, border-color .3s; }
.agegate .ag-no:hover { color: var(--foreground); border-color: var(--muted-foreground); }
.agegate .ag-deny { margin-top: 2rem; color: var(--muted-foreground); font-size: 0.85rem; display: none; }
.agegate.denied .ag-main { display: none; }
.agegate.denied .ag-deny { display: block; }

/* ============================================================
   REVEAL HELPERS (CSS-transition based · toggled by .is-in)
   ============================================================ */
[data-fade] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease-pour), transform 1s var(--ease-pour);
  transition-delay: var(--d, 0s);
}
[data-fade].is-in { opacity: 1; transform: none; }

[data-pour] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.4s var(--ease-pour);
}
[data-pour].is-in { clip-path: inset(0 0 0 0); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; place-items: center; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .tile-lg { grid-column: span 2; grid-row: span 1; }
  .conseil, .visite, .regions { grid-template-columns: 1fr; }
  .region-visual { aspect-ratio: 16/10; }
  .gift-grid { grid-template-columns: 1fr 1fr; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc:nth-child(2) { border-right: none; }
  .svc { border-bottom: 1px solid var(--border); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Sur mobile : abandon du carousel GSAP → grille classique 2 colonnes.
     overflow: hidden reste sur .sel (pas besoin de le retirer) car le
     grid ne déborde pas horizontalement. */
  .sel-track-outer { overflow: visible; }
  .sel-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    will-change: auto;
    padding-inline: clamp(1.2rem, 5vw, 2rem);
  }
  .pcard { flex: none; }
  .sel-hint { display: none; }
}

@media (max-width: 420px) {
  /* Très petits écrans : 1 colonne */
  .sel-track { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Navbar */
  .nav { padding: 0.9rem 1.1rem; }
  .nav-right { gap: 0.7rem; }
  .nav-right .pill { display: none; }
  .nav-right .search-btn { display: none; }

  /* Hero */
  .hero h1 { font-size: clamp(2.8rem, 14vw, 5rem); }
  .hero .subline { font-size: 0.95rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; text-align: center; }

  /* Bento */
  .bento { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .tile-lg, .tile-wide, .tile-tall { grid-column: span 1; grid-row: span 1; }

  /* Grids */
  .gift-grid, .svc-grid, .foot-cols { grid-template-columns: 1fr; }

  /* Services */
  .svc { border-right: none; }
  .svc:last-child { border-bottom: none; }

  /* Newsletter */
  .news-form { flex-direction: column; gap: 1rem; }
  .news-form .submit { padding: 1rem; }

  /* Footer */
  .foot-cols { gap: 1.6rem; }

  /* Stats */
  .stats { gap: 1.5rem; }
}

@media (max-width: 480px) {
  /* Navbar brand on very small screens */
  .nav-brand .tag { display: none; }

  /* Age gate buttons */
  .ag-btns { flex-direction: column; align-items: stretch; }
  .ag-btns .btn,
  .ag-btns .ag-no { width: 100%; justify-content: center; text-align: center; }

  /* Age gate candle glow */
  .agegate .ag-card .candle-glow { width: min(280px, 100%); height: min(280px, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .candle-glow, .scroll-cue .line::after, .visite-map .pin .ping { animation: none; }
  * { scroll-behavior: auto; }
  [data-fade], [data-pour], [data-split] .word-mask > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .intro .statement .w, .intro .statement .hl { color: hsl(36 30% 92%) !important; }
  .intro .statement .hl { color: var(--gold) !important; }
}