/* Personnalisation locale de la landing VLADIMIR */

:root {
  --police-titre: 'Anton', sans-serif, Impact;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: 'Roboto Mono', monospace;
}

h3 {
  text-transform: uppercase;
}

/* Alignement vertical du header */
.entete .barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Correction H1 pour éviter le chevauchement et l'écrasement */
h1, .heros h1 {
  letter-spacing: normal !important;
}

@media (max-width: 768px) {
  h1, .heros h1 {
    font-size: clamp(var(--t-3), 8vw, var(--t-4)) !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  
  /* Correction du texte du héros sur mobile (aspect compact) */
  .heros .sous-titre {
    font-size: var(--petit, 0.875rem) !important;
    line-height: 1.4 !important;
  }
  
  /* Bouton du header (CTA) sur mobile pour ne pas déséquilibrer */
  .entete .bouton, .entete .bouton-mobile-full {
    padding: 8px 16px !important;
    font-size: var(--petit, 0.875rem) !important;
  }
}

/* Correction du cadre de l'image (fond rouge / espace vide) */
.media {
  background: none !important;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Correction "La vérité de la matière" (Image coupée et mal alignée) */
@media (min-width: 760px) {
  #produit .bloc-alterne {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--esp-6, 64px) !important;
    align-items: center;
  }
  #produit .media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Correction Notes de dégustation (Pastilles trop collées aux titres) */
.etapes > div::before {
  margin-bottom: var(--esp-3, 16px) !important;
  display: block;
}

/* Correction Espace Prescripteurs (Paragraphe trop large) */
#professionnels .sous-titre {
  max-width: 65ch;
  margin-inline: auto;
}

/* Correction H2 Manifeste (interlignage) */
#manifeste h2 {
  line-height: 1.25 !important;
}

/* Masquer les blocs vides ou placeholders indésirables avec bordure rouge */
.empty-placeholder,
.bloc-vide,
.placeholder-rouge,
.placeholder {
  display: none !important;
}

/* Si un élément est explicitement vide (pas d'image, pas de texte, juste une div parasite) */
div:empty:not(.media):not(.apparition):not([class*="pastille"]):not([class*="espace"]) {
  display: none !important;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  text-decoration: none;
}

.logo-nom {
  font-family: var(--police-titre);
  font-size: var(--t-1);
  color: var(--texte);
  text-transform: uppercase;
  margin-top: 4px;
}

.actions--centre {
  justify-content: center;
}

/* Correction du bloc alterne pour ne pas coller l'image */
.bloc-alterne {
  gap: var(--esp-6);
}

/* Navigation Mobile - details/summary */
.nav-mobile-details summary {
  display: none;
  cursor: pointer;
  font-weight: bold;
  list-style: none;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-bouton);
}
.nav-mobile-details summary::-webkit-details-marker {
  display: none;
}
@media (max-width: 768px) {
  /* Masquer le menu mobile immense et laid qui repousse le contenu */
  .nav-mobile-details {
    display: none !important;
  }
  
  .barre {
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .barre .logo {
    flex: 0 1 auto;
  }
  .barre .bouton-mobile-full {
    flex: 0 1 auto;
  }
  
  footer .barre {
    flex-direction: column;
    gap: var(--esp-3);
  }
}

/* La mention sanitaire au-dessus du footer, ou en bas du footer */
.mention-sanitaire {
  margin-top: var(--esp-6);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--trait);
  text-align: center;
  font-weight: 700;
  font-size: var(--t-0);
  color: var(--texte);
  text-transform: uppercase;
}

/* AGE GATE (Loi Évin) */
.age-gate:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--texte) 95%, transparent);
  padding: var(--esp-4);
}
.age-gate[hidden] {
  display: none !important;
}

.age-gate-carte {
  background: var(--fond);
  border: 1px solid var(--accent);
  padding: var(--esp-6);
  max-width: 600px;
  width: 100%;
  text-align: center;
  box-shadow: var(--ombre);
}

.age-gate-carte .h2 {
  font-family: var(--police-titre);
  font-size: var(--t-3);
  margin-bottom: var(--esp-4);
}

.erreur-age {
  color: var(--alerte);
  font-weight: bold;
}