@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Outfit:wght@300;400;500;700&family=Italianno&display=swap');

/* --- DESIGN SYSTEM --- */
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Outfit', 'Inter', sans-serif;
  --font-script: 'Italianno', 'Brush Script MT', cursive;

  /* Luxurious Palette: Dark Rose, Velvet Burgundy, Champagne Gold */
  --bg-color: #080304;
  --text-light: #fefefe;
  --text-muted: #b5a4a6;
  --primary-accent: #e63956; /* Vibrant Strawberry Red */
  --primary-glow: rgba(230, 57, 86, 0.4);
  --gold-accent: #dfa89b; /* Elegant Sanded Rose Gold */
  --gold-glow: rgba(223, 168, 155, 0.3);

  /* Glassmorphism values */
  --glass-bg: rgba(15, 8, 10, 0.65);
  --glass-border: rgba(223, 168, 155, 0.15);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);

  --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.3s ease;
}

/* --- RESET & GLOBAL STYLES --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--bg-color);
  color: var(--text-light);
  font-family: var(--font-sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
  background: rgba(223, 168, 155, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-accent);
}

/* --- THE VIDEO BACKGROUND --- */
.video-background {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Increased brightness for WOW effect */
  filter: brightness(0.9) contrast(1.2) saturate(1.1);
  transition: filter 1s ease;
}

/* Active touch class to overlay a premium dark vignetting */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Reduced opacity of vignette so the video pops */
  background: radial-gradient(circle, transparent 10%, rgba(8, 3, 4, 0.4) 100%);
  pointer-events: none;
  z-index: 1;
}

/* --- STRUCTURE CONTENEUR --- */
#container {
  position: relative;
  width: 100%;
  height: 600vh;
  z-index: 2;
}

/* Dark overlay gradient behind hero text only */
.hero-content {
  position: relative;
}

.hero-content::before {
  content: '';
  position: absolute;
  inset: -60px -100vw;
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(5, 2, 3, 0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

/* --- EN-TÊTE / NAVBAR --- */
header.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 4%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(8, 3, 4, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: var(--transition-smooth);
}

header.main-header.scrolled {
  padding: 1rem 4%;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  line-height: 1;
}

.logo-img {
  height: 48px;
  width: auto;
  transition: var(--transition-fast);
}

.logo-container:hover .logo-img {
  transform: rotate(-10deg) scale(1.1);
  filter: drop-shadow(0 0 8px var(--primary-accent));
}

.logo-text {
  font-family: var(--font-script);
  font-size: 2.8rem;
  font-weight: 400;
  color: var(--text-light);
  letter-spacing: 0;
  line-height: 1;
  /* Italianno a un x-height bas dans son em box : on déplace le texte
     vers le bas pour que le centre visuel des glyphes coïncide avec le
     centre du logo (image). */
  margin-top: 0.22em;
  margin-bottom: -0.05em;
  background: linear-gradient(135deg, #fefefe 20%, var(--gold-accent) 70%, #b9776c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

nav.nav-menu {
  display: flex;
  gap: 2.5rem;
}

nav.nav-menu a {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: var(--transition-fast);
  position: relative;
  padding: 0.5rem 0;
}

nav.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold-accent);
  transition: var(--transition-fast);
}

nav.nav-menu a:hover {
  color: var(--text-light);
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

nav.nav-menu a:hover::after {
  width: 100%;
}

/* --- HEADER ACTIONS (lang switcher + CTA) --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.lang-switcher {
  position: relative;
}

.lang-current {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  padding: 0.5rem 0.85rem;
  border-radius: 30px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  transition: var(--transition-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.lang-current:hover {
  border-color: var(--gold-accent);
  background: rgba(223, 168, 155, 0.08);
}
.lang-flag {
  font-size: 1rem;
  line-height: 1;
}
.lang-code {
  letter-spacing: 1.5px;
}
.lang-caret {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}
.lang-switcher.open .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: rgba(15, 8, 10, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}
.lang-switcher.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu li { margin: 0; }
.lang-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: var(--transition-fast);
}
.lang-menu button:hover {
  background: rgba(230, 57, 86, 0.12);
  color: var(--gold-accent);
}
.lang-menu button.active {
  background: rgba(230, 57, 86, 0.18);
  color: var(--primary-accent);
}

.cta-header {
  background: linear-gradient(135deg, var(--primary-accent) 0%, #b21e35 100%);
  color: var(--text-light);
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(230, 57, 86, 0.3);
  transition: var(--transition-fast);
}

.cta-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(230, 57, 86, 0.5);
  background: linear-gradient(135deg, #f24e6b 0%, var(--primary-accent) 100%);
}

/* --- SECTIONS SUR DEFILEMENT (SCENE COVERS) --- */
.scroll-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 10%;
  text-align: center;
  z-index: 10;
  pointer-events: none; /* Let clicks pass through when hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s ease;
}

/* Elements inside active section should be clickable */
.scroll-section.active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Special styles for unique sections */

/* --- HERO SECTION --- */
.hero-content h1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7.5vw, 6.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 8px 32px rgba(0,0,0,0.7);
}

.hero-content h1 span.accent {
  background: linear-gradient(135deg, var(--primary-accent) 0%, var(--gold-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  font-style: italic;
  font-weight: 400;
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.6));
}

.hero-content p {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: #ffffff;
  max-width: 700px;
  margin-bottom: 2.5rem;
  font-weight: 500;
  line-height: 1.6;
  text-shadow: 0 2px 6px rgba(0,0,0,0.95), 0 4px 16px rgba(0,0,0,0.8);
}

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--gold-accent);
  margin-top: 2rem;
  animation: pulse 2s infinite;
}

.scroll-mouse {
  width: 22px;
  height: 36px;
  border: 2px solid var(--gold-accent);
  border-radius: 12px;
  position: relative;
}

.scroll-wheel {
  width: 4px;
  height: 8px;
  background-color: var(--primary-accent);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollAnim 1.5s infinite;
}

/* --- GLASS PANEL CONTAINER --- */
.glass-panel {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 24px;
  padding: 3.5rem;
  max-width: 850px;
  width: 90%;
  text-align: left;
}

.section-label {
  font-size: 0.8rem;
  color: var(--primary-accent);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

.glass-panel h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 1.5rem;
  color: var(--text-light);
  line-height: 1.2;
}

.glass-panel p.intro {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.glass-panel p.body-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 300;
}

/* --- TASTING CARDS GRID --- */
.tasting-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.tasting-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 1.5rem;
  transition: var(--transition-smooth);
}

.tasting-card:hover {
  background: rgba(230, 57, 86, 0.05);
  border-color: rgba(230, 57, 86, 0.2);
  transform: translateY(-5px);
}

.tasting-card .icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: inline-block;
  filter: drop-shadow(0 0 6px var(--primary-accent));
}

.tasting-card h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--gold-accent);
}

.tasting-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 300;
}

/* --- EXPERIENCES SECTION --- */
.experience-split {
  display: flex;
  gap: 3rem;
  flex-direction: row;
}

@media (max-width: 768px) {
  .experience-split {
    flex-direction: column;
    gap: 1.5rem;
  }
}

.experience-info {
  flex: 1.2;
}

.experience-stat {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
  border-left: 2px solid var(--glass-border);
  padding-left: 2rem;
}

@media (max-width: 768px) {
  .experience-stat {
    border-left: none;
    border-top: 2px solid var(--glass-border);
    padding-left: 0;
    padding-top: 1.5rem;
    flex-direction: row;
  }
}

.stat-item {
  text-align: left;
}

.stat-num {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--font-serif);
  color: var(--primary-accent);
  font-weight: 700;
  display: block;
  line-height: 1;
}

.stat-desc {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-accent);
}

/* --- CTA SECTION --- */
.cta-panel {
  text-align: center;
  max-width: 650px;
}

.cta-panel h2 span {
  color: var(--primary-accent);
  display: block;
}

/* --- PARTICIPER SECTION (mini-stats teaser) --- */
.participer-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.2rem;
  margin: 1.8rem 0 0.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.participer-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-align: center;
}

.participer-num {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--primary-accent);
  line-height: 1;
}

.participer-desc {
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-accent);
}

.btn-premium {
  display: inline-block;
  position: relative;
  background: linear-gradient(135deg, var(--primary-accent) 0%, #ab1c32 100%);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 1.2rem 2.8rem;
  border-radius: 40px;
  text-decoration: none;
  margin-top: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 30px rgba(230, 57, 86, 0.4);
  overflow: hidden;
  transition: var(--transition-smooth);
  z-index: 1;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.6s;
  z-index: -1;
}

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 15px 40px rgba(230, 57, 86, 0.6);
  border-color: rgba(255, 255, 255, 0.4);
}

/* --- PRECISE AUDIO/MUTED FLOATING TRIGGER --- */
.audio-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 100;
  transition: var(--transition-fast);
  color: var(--text-light);
}

.audio-toggle:hover {
  transform: scale(1.1);
  border-color: var(--primary-accent);
  box-shadow: 0 0 15px rgba(230, 57, 86, 0.4);
}

/* --- FOOTER INFO --- */
.footer-info {
  margin-top: 2.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 1px;
}

.abuse-warning {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1rem;
  margin-top: 1.5rem;
  color: rgba(223, 168, 155, 0.6);
  font-weight: 500;
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes pulse {
  0% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
}

@keyframes scrollAnim {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 14px);
    opacity: 0;
  }
}

/* --- RESPONSIVE ADJUSTMENTS --- */
@media (max-width: 992px) {
  header.main-header {
    padding: 1rem 2rem;
  }
  .logo-text {
    font-size: 2.6rem;
  }
  nav.nav-menu {
    gap: 1.2rem;
  }
  .glass-panel {
    padding: 2.5rem;
  }
}

/* --- MOBILE: PORTRAIT-FIRST EXPERIENCE ---
   Goal: the cork popping + flying strawberries remain front-and-center.
   Strategy: panels drop to the bottom half of the viewport, the top half
   stays clear for the scroll-scrubbed video action. */
@media (max-width: 768px) {
  /* CRITIQUE PERF ANDROID — backdrop-filter sur des panneaux fixes
     par-dessus une vidéo qui scrub = scroll qui freeze. On le tue sur
     mobile, le fond dégradé opaque suffit visuellement. */
  .glass-panel,
  header.main-header,
  header.main-header.scrolled {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Empêche le rubber-band Android d'interférer avec le scroll */
  html, body {
    overscroll-behavior-y: none;
  }
  body { touch-action: manipulation; }

  /* Use the dynamic viewport height to avoid the iOS URL-bar jump that
     would otherwise crop the video at the worst possible moment. */
  .scroll-section {
    height: 100vh;
    height: 100dvh;
    padding: 0;
    justify-content: flex-end;     /* anchor panels to the bottom */
    align-items: stretch;
  }

  /* Hero stays centered on mobile — the bottle and burst sit behind the
     text, and a bottom gradient keeps the title legible without a panel. */
  #section-hero.hero-content {
    justify-content: flex-end;
    padding: 0 1.25rem calc(env(safe-area-inset-bottom, 0px) + 2rem);
  }
  /* Sur le hero on n'a pas de panneau qui dock — on laisse la vidéo
     plein cadre et on garde simplement le texte en bas. */
  /* Voile localisé derrière le texte du hero pour booster le contraste,
     mais en restant invisible : démarre depuis le bas, transparent en
     haut, et utilise la teinte bordeaux du dégradé global pour qu'il
     n'y ait aucune discontinuité de ton. */
  .hero-content::before {
    inset: auto -100vw 0 -100vw;
    height: 22vh;
    background: linear-gradient(
      to top,
      rgba(15, 6, 10, 0.55) 0%,
      transparent 100%
    );
  }
  .hero-content h1 {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
    margin-bottom: 1rem;
  }
  .hero-content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .scroll-cue { margin-top: 1rem; font-size: 0.7rem; letter-spacing: 2px; }

  /* Keep the header on a single row — stacking it eats precious vertical
     space and obscures the top of the video. */
  header.main-header {
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    padding-top: calc(env(safe-area-inset-top, 0px) + 0.6rem);
  }
  nav.nav-menu { display: none; }
  .logo-img { height: 36px; }
  .logo-text { font-size: 2.3rem; letter-spacing: 0; }
  .cta-header {
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    letter-spacing: 0.5px;
  }
  .header-actions { gap: 0.4rem; }
  /* Sur mobile on garde juste le drapeau pour gagner de la place */
  .lang-current { padding: 0.5rem 0.65rem; gap: 0.3rem; }
  .lang-code, .lang-caret { display: none; }
  .lang-menu { right: 0; min-width: 180px; }

  /* Glass panels: docked to the bottom, lighter blur so the video tints
     through, capped height so they never swallow the action above. */
  .glass-panel {
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    padding: 1.6rem 1.4rem calc(env(safe-area-inset-bottom, 0px) + 1.6rem);
    max-height: 55vh;
    max-height: 55dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(
      to bottom,
      rgba(8, 3, 4, 0.55) 0%,
      rgba(8, 3, 4, 0.85) 35%,
      rgba(8, 3, 4, 0.92) 100%
    );
    border: none;
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  }

  .glass-panel h2 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); margin-bottom: 0.85rem; }
  .glass-panel p.intro { font-size: 1rem; line-height: 1.55; margin-bottom: 0.85rem; }
  .glass-panel p.body-text { font-size: 0.88rem; line-height: 1.55; }
  .section-label { font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 0.6rem; }

  /* Tasting cards become a horizontal swipeable row to stay compact and
     keep the panel short — preserves video visibility behind. */
  .tasting-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    margin: 1rem -1.4rem 0;
    padding: 0 1.4rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tasting-grid::-webkit-scrollbar { display: none; }
  .tasting-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
    padding: 1.1rem;
  }
  .tasting-card .icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
  .tasting-card h3 { font-size: 1.05rem; }

  /* Stats stay in a row but compress, so the experience panel doesn't
     get tall. */
  .experience-stat {
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.2rem;
  }
  .stat-num { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .stat-desc { font-size: 0.65rem; letter-spacing: 1px; }

  /* CTA panel sits center-bottom; button is full-width-ish for easy thumb
     reach. */
  .cta-panel {
    text-align: center;
    max-height: 70vh;
    max-height: 70dvh;
  }
  .btn-premium {
    display: block;
    width: 100%;
    padding: 1.1rem 1.5rem;
    font-size: 0.95rem;
    margin-top: 1.5rem;
  }
  .footer-info { margin-top: 1.5rem; font-size: 0.7rem; }

  /* Stats du teaser "Participer" — compactes sur mobile */
  .participer-stats {
    gap: 0.5rem;
    padding: 1rem 0;
    margin: 1.2rem 0 0.3rem;
  }
  .participer-num { font-size: 1.15rem; }
  .participer-desc { font-size: 0.6rem; letter-spacing: 1px; }

  /* Float the audio button above the dock without blocking the CTA. */
  .audio-toggle {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
    right: 1rem;
    width: 44px;
    height: 44px;
  }

  /* Dézoom partiel : on garde `cover` (vidéo plein cadre, aucune bande
     noire) mais on contraint la HAUTEUR de la vidéo à ~65vh ancrée en
     haut. Cover calcule alors son échelle sur cette boîte plus courte,
     donc rogne nettement moins les côtés — les fraises qui volent
     latéralement reviennent dans le cadre.

     CLÉ : un mask-image fait fondre le BAS de la vidéo vers la
     transparence. La vidéo elle-même n'a donc plus de bord net — elle
     se dissout dans la couleur de fond du body (sombre), créant une
     transition parfaite, invisible. */
  .video-background {
    object-fit: cover;
    object-position: center center;
    top: 0;
    left: 0;
    width: 100%;
    height: 65vh;
    height: 65dvh;
    min-width: 0;
    min-height: 0;
    transform: none;
    /* Filter (saturate/contrast) coûte en GPU sur Android — on l'allège */
    filter: contrast(1.1) saturate(1.1);
    will-change: auto;
    -webkit-mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 55%,
      rgba(0, 0, 0, 0.85) 75%,
      rgba(0, 0, 0, 0.4) 90%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      black 0%,
      black 55%,
      rgba(0, 0, 0, 0.85) 75%,
      rgba(0, 0, 0, 0.4) 90%,
      transparent 100%
    );
  }

  /* La vidéo se masque elle-même vers la transparence, le body bg
     (déjà sombre) prend le relais. Pas besoin de gradient additionnel
     qui créerait un doublon visible. On garde juste un soupçon de
     chaleur bordeaux en bas. */
  body::before {
    background: linear-gradient(
      to bottom,
      transparent 0%,
      transparent 70%,
      rgba(50, 20, 28, 0.25) 100%
    );
  }

  /* Renforce le halo derrière "de la Fraisette" pour qu'il reste
     lisible sur n'importe quel fond (vidéo claire ou fond sombre). */
  .hero-content h1 span.accent {
    filter:
      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95))
      drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85))
      drop-shadow(0 0 18px rgba(20, 6, 10, 0.7));
  }
}

/* Very small phones — squeeze one more notch. */
@media (max-width: 380px) {
  .glass-panel { padding: 1.3rem 1.1rem; }
  .hero-content h1 { font-size: 2.1rem; }
  .logo-text { font-size: 2rem; }
  .cta-header { padding: 0.45rem 0.8rem; }
}

/* Mobile landscape: panels become a side card so the video still breathes. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .scroll-section {
    height: 100vh;
    height: 100dvh;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
  }
  .glass-panel {
    width: 52%;
    max-width: 52%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0 24px 24px 0;
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
    background: linear-gradient(
      to right,
      rgba(8, 3, 4, 0.9) 0%,
      rgba(8, 3, 4, 0.7) 100%
    );
  }
  #section-hero.hero-content {
    justify-content: center;
    align-items: flex-start;
    padding: 1rem 2rem;
    text-align: left;
  }
  .video-background { object-position: 75% center; }
}