/* ============================================================
   FICHE VIN — Caractère Libre
   Page single-vin (single-vin.php)
   ============================================================ */


/* ══════════════════════════════════════════════════
   VARIANTES COULEUR — bg page + accent + card
══════════════════════════════════════════════════ */

/* Bg page dès sous la nav */
body:has(.fvin[data-couleur="rouge"])        { background: var(--color-wine-rouge-pale); }
body:has(.fvin[data-couleur="blanc"])        { background: var(--color-wine-blanc-pale); }
body:has(.fvin[data-couleur="rose"])         { background: var(--color-wine-rose-pale); }
body:has(.fvin[data-couleur="orange"])       { background: var(--color-wine-orange-pale); }
body:has(.fvin[data-couleur="effervescent"]) { background: var(--color-wine-effervescent-pale); }

/* Défaut = rouge (surchargé par [data-couleur] ci-dessous) */
.fvin {
  --fvin-accent:   var(--color-wine-rouge-accent);
  --fvin-bg:       var(--color-wine-rouge-pale);
  --fvin-card-bg:  var(--color-wine-rouge-strong);
  background: var(--fvin-bg);
}

.fvin[data-couleur="rouge"]        { --fvin-accent: var(--color-wine-rouge-accent);        --fvin-bg: var(--color-wine-rouge-pale);        --fvin-card-bg: var(--color-wine-rouge-strong); }
.fvin[data-couleur="blanc"]        { --fvin-accent: var(--color-wine-blanc-accent);        --fvin-bg: var(--color-wine-blanc-pale);        --fvin-card-bg: var(--color-wine-blanc-strong); }
.fvin[data-couleur="rose"]         { --fvin-accent: var(--color-wine-rose-accent);         --fvin-bg: var(--color-wine-rose-pale);         --fvin-card-bg: var(--color-wine-rose-strong); }
.fvin[data-couleur="orange"]       { --fvin-accent: var(--color-wine-orange-accent);       --fvin-bg: var(--color-wine-orange-pale);       --fvin-card-bg: var(--color-wine-orange-strong); }
.fvin[data-couleur="effervescent"] { --fvin-accent: var(--color-wine-effervescent-accent); --fvin-bg: var(--color-wine-effervescent-pale); --fvin-card-bg: var(--color-wine-effervescent-strong); }


/* ══════════════════════════════════════════════════
   EN-TÊTE : nom du domaine + région/ville
══════════════════════════════════════════════════ */

.fvin-entete {
  text-align: center;
  padding-top: var(--space-12);
  padding-bottom: var(--space-10);
}

.fvin-entete__nom {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: var(--weight-black);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
}

.fvin-entete__lieu {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-text);
  line-height: var(--leading-tight);
}


/* ══════════════════════════════════════════════════
   HERO : bouteille centrée sur fond coloré
══════════════════════════════════════════════════ */

/* Wrapper : centre la card + les dots */
.fvin-hero-wrap {
  display: flex;
  justify-content: center;
  padding: 0 var(--space-6);
}

/* Slider root : contient la card + les dots */
.fvin-hero-wrap .fvin-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 530px;
}

/* Card colorée */
.fvin-hero {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--fvin-card-bg);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-8) var(--space-10);
  min-height: 500px;
}

/* Pastille — bas droite de la card */
.fvin-hero__pastille {
  position: absolute;
  bottom: var(--space-5);
  right: var(--space-5);
  width: 90px;
  height: 90px;
  object-fit: contain;
  z-index: 3;
}

/* Viewport du slider : pleine largeur dans la card */
.fvin-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1;
  z-index: 2;
  cursor: grab;
  user-select: none;
}

.fvin-slider__viewport img {
  -webkit-user-drag: none;
}

.fvin-slider__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s cubic-bezier(.2,.9,.2,1);
}

.fvin-slider__slide {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.fvin-slider__slide img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Dots — hors de la card, centrés sous elle */
.fvin-slider__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.fvin-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}

/* Dot actif = pilule (principe carrousels, tout le site) */
.fvin-slider__dot.is-active {
  width: 38px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-blue);
}


/* ══════════════════════════════════════════════════
   CUVÉE + APPELLATION + COMMANDER + PARTAGE
══════════════════════════════════════════════════ */

.fvin-cuvee-bloc {
  text-align: center;
  padding-top: var(--space-10);
  padding-bottom: var(--space-22);
  border-bottom: 1px solid var(--color-border);
}

.fvin-cuvee-bloc__cuvee {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 50px);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: 1.0;
  margin: 0 0 var(--space-3);
}

.fvin-cuvee-bloc__appellation {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 40px);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
}

.fvin-cuvee-bloc__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0);
  margin: var(--space-5) 0 var(--space-6);
}

.fvin-cuvee-bloc__meta-item {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
}


/* ── Boutons partage (côté droit de la ligne) ── */
.vin-share {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         var(--space-3);
  flex-shrink: 0;
}

.vin-share__label {
  font-family:    var(--font-body);
  font-size:      11px;
  font-weight:    var(--weight-semibold);
  color:          var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  white-space:    nowrap;
}

.vin-share__buttons {
  display: flex;
  gap:     var(--space-2);
}

.share-btn {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius:   50px;
  border: 1px solid var(--color-blue);
  background:      var(--color-transparent);
  color:           var(--color-blue);
  text-decoration: none;
  font-family:     var(--font-body);
  font-size:       13px;
  font-weight:     var(--weight-semibold);
  transition:      background var(--transition-fast), color var(--transition-fast);
}

.share-btn:hover,
.share-btn:focus-visible {
  background: var(--color-blue);
  color:  #FFFFFF;
  outline:    none;
}


@media (max-width: 767px) {
  .event-bloc--cave {
      padding: 0 0 56px;
  }
}
@media (max-width: 767px) {
  .event-bloc {
      border-radius: 16px;
      padding: 45px 20px 40px;
  }
}
@media (max-width: 1180px) {
  .event-bloc {
      padding: 40px 24px 48px;

      border-radius: 16px;
  }
}


@media (max-width: 767px) {
  .dmd-section {
      width: calc(100% - 24px);
      padding-bottom: var(--space-10);
  }
}

.dmd-section .cave-grille {
  background: var(--color-white);
  border-radius: 24px;
  padding: 32px;
}

.dmd-section {
  padding-top: var(--space-24);
  padding-bottom: var(--space-20);
}

/* ── Bouton COMMANDER + dropdown ── */

.fvin-cuvee-bloc .fvin-commander {
  display: flex;
  justify-content: center;
}

.fvin-commander {
  position: relative;
}

.fvin-commander__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 46px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: 100px;
  background: var(--color-blue);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.fvin-commander__btn:hover { opacity: 0.85; }

.fvin-commander__chevron {
  transition: transform var(--transition-fast);
}

.fvin-commander__btn[aria-expanded="true"] .fvin-commander__chevron {
  transform: rotate(180deg);
}

.fvin-commander__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-3);
  z-index: 10;
}

.fvin-commander__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.fvin-commander__ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.fvin-commander__item:hover { background: var(--color-page); }




/* ══════════════════════════════════════════════════
   TITRES DE SECTION + EN-TÊTES AVEC FLÈCHES
══════════════════════════════════════════════════ */

.fvin-section__titre {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text);
  line-height: var(--leading-tight);
  margin: 0;
}

.fvin-section-head {
  display: flex;

  justify-content: space-between;

}
/* Flèches de slider */
.fvin .nav-mois__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.fvin .nav-mois__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-blue);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.fvin .nav-mois__arrow:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}


/* ══════════════════════════════════════════════════
   ESPACEMENT INTER-SECTIONS (colored bg zone)
══════════════════════════════════════════════════ */

.fvin-profil,
.fvin-creation,
.fvin-illustration,
.fvin-citation,
.fvin-accords,
.fvin-evenements,
.fvin-moments,
.fvin-carte {
  margin-top: 58px;
  /* Largeur alignée sur la navigation (1280px) et non sur le container (1180px)
  width: min(1280px, calc(100% - var(--container-gutter) * 2)); */
}


/* ══════════════════════════════════════════════════
   PROFIL — titre centré + pills
══════════════════════════════════════════════════ */

.fvin-profil {
  text-align: center;
}

.fvin-profil__titre {
  margin-bottom: 30px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  color: #36344C;
  text-transform: none;
  letter-spacing: normal;
}

.fvin-profil__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 22px;
}

.fvin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 var(--space-8);
  border-radius: 12px;
  background: var(--color-text);
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════
   CRÉATION — carte + repeater lignes Photo+Texte
══════════════════════════════════════════════════ */

.fvin-creation__titre {
  
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-bold);
  letter-spacing: normal;
  text-transform: uppercase;
  color: #000;
  line-height: normal;
  padding-top: 28px;
}

.fvin-creation__carte {
  max-width: 676px;
  margin: 0 auto;
  border-radius: 24px;
  background: #FFFCFC;
  padding: var(--space-8) 130px var(--space-8) 80px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.fvin-creation__row {
  display: grid;
  grid-template-columns: 136px 1fr;
  gap: var(--space-6);
  align-items: start;
}

.fvin-creation__media {
  width: 136px;
  height: 136px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.fvin-creation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fvin-creation__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fvin-creation__nom {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #36344C;
  line-height: 20px;
}

.fvin-creation__role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #36344C;
  line-height: 20px;
  margin-bottom: var(--space-2);
}

.fvin-creation__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #36344C;
  line-height: 20px;
}


/* ══════════════════════════════════════════════════
   ILLUSTRATION — dans la carte création
══════════════════════════════════════════════════ */

.fvin-illustration {
  padding-top: var(--space-2);
}

/* Illustration seule (aucun bloc Création renseigné) : on neutralise le
   margin-top de section (58px) + le padding-top, pour que le titre
   « ILLUSTRATION » remonte en haut de la carte, comme le titre « CRÉATION ». */
.fvin-illustration--seule {
  margin-top: 0;
  padding-top: 0;
}

.fvin-illustration__image {
  border-radius: 12px;
  overflow: hidden;
  width: 270px;
  margin-bottom: var(--space-5);
  margin-top: var(--space-6);
}

.fvin-illustration__image img {
  width: 100%;
  height: auto;
  display: block;
}

.fvin-illustration__credit-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.fvin-illustration__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-surface);
}

.fvin-illustration__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fvin-illustration__credit-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}

.fvin-illustration__credit-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #36344C;
  line-height: 20px;
}

.fvin-illustration__lien {
  font-weight: 700;
  color: #36344C;
  text-decoration: none;
}

.fvin-illustration__credit-role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #36344C;
  line-height: 20px;

}

.fvin-illustration__socials {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.fvin-illustration__socials a {
  display: inline-flex;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.fvin-illustration__socials a:hover { opacity: 1; }

.fvin-illustration__bio {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #36344C;
  line-height: 20px;
  max-width: 400px;
  padding-top: 10px;
  padding-bottom: 50px;
  
}


/* ══════════════════════════════════════════════════
   CITATION — blockquote centré
══════════════════════════════════════════════════ */

.fvin-citation {
  text-align: center;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.fvin-citation__quote {
  font-family: var(--font-display);
  font-size: 49px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: var(--leading-normal);
  text-align: center;
  max-width: var(--col-8);
  margin: var(--space-16) auto 0;
  padding: 120px 0 120px 0px;

}

.fvin-citation__source {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}


/* ══════════════════════════════════════════════════
   ACCORDS — pills prédéfinis
══════════════════════════════════════════════════ */

.fvin-accords {
  text-align: center;
  border-top: 1px solid var(--color-border);
  padding-top: 80px;
}

/* Accords = dernier bloc de contenu (pas de description ni de bloc suivant) :
   respiration en bas pour ne pas coller au bas de page. */
.fvin-accords--dernier {
  padding-bottom: 80px;
}



.fvin-accords__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 22px;
}


/* ══════════════════════════════════════════════════
   ÉVÉNEMENTS
══════════════════════════════════════════════════ */

.fvin-evenements {
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-top: 60px;
  padding-bottom: 120px;
}

.fvin-evenements__titre {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: var(--weight-black);
  color: var(--color-text);
  margin: 0 0 var(--space-10);
  line-height: 1.05;
}

.fvin-evenements__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 600px;
  margin-top: 80px;
}

.fvin-evenements__item {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.fvin-evenements__date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 64px;
  padding: 0 var(--space-6);
  border-radius: 14px;
  background: #36344C;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  white-space: nowrap;
  flex-shrink: 0;
}

.fvin-evenements__info {
  text-align: left;
}

.fvin-evenements__type {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.4;
}

.fvin-evenements__nom {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 1.4;
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.fdetail-section__titre {
margin-bottom: var(--space-6);

}

/* ══════════════════════════════════════════════════
   MOMENTS PARTAGÉS — slider + description
══════════════════════════════════════════════════ */

.fvin-moments #momentsTitre {
  margin-bottom: 38px;
}

.fvin-moments__wrap {
  width: 100%;
  max-width: calc(334px * 3 + 54px * 2); /* 3 colonnes de 334px + 2 gaps */
}

/* Fenêtre qui masque les débords : le track translate à l'intérieur — même
   principe fluide que « Retour sur… » du festival (clones + transition). */
.fvin-moments__viewport {
  overflow: hidden;
}

.fvin-moments__track {
  display: flex;
  gap: 54px;
  transition: transform 400ms cubic-bezier(.2, .9, .2, 1);
  will-change: transform;
  cursor: grab;
}

/* Slider inactif (≤ nombre de cards visibles) : rien à faire défiler,
   donc pas de curseur « main ». Classe posée par vin.js (updateState). */
.fvin-moments__track--static {
  cursor: default;
}

.fvin-moments__track img {
  -webkit-user-drag: none;
}

.fvin-moments__item {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* 3 visibles dans la fenêtre ; le ratio fige la hauteur proportionnelle. */
  flex: 0 0 calc((100% - 54px * 2) / 3);
  aspect-ratio: 334 / 574;
  background: var(--color-surface);
}

.fvin-moments__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fvin-moments__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.fvin-moments__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fvin-moments__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--color-border);
  transition: background var(--transition-fast), width var(--transition-fast);
}

/* Dot actif = rond plein bleu (pas de pilule/filet — demande client 2026-07-24) */
.fvin-moments__dot--active {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-blue);
}

.fvin-moments__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fvin-moments__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-blue);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.fvin-moments__arrow:hover:not(.is-disabled) {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.fvin-moments__arrow.is-disabled,
.fvin-moments__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.fvin-description {
  margin-top: 150px;
  margin-bottom: 50px;
  width: 566px;
  max-width: 100%;
}

/* Récompenses sans slider « Moments partagés » : on remonte le texte
   (sinon le margin-top: 150px hérité crée un grand vide en haut de section). */
.fvin-description--sans-moments {
  margin-top: 0;
}

.fvin-description p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #36344C;
}

/* Listes à puces/numérotées : même typo que les paragraphes (sinon 16px par défaut). */
.fvin-description ul,
.fvin-description ol {
  margin: 0;
  padding-left: 1.25em;
}

.fvin-description li {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  color: #36344C;
}

.fvin-description__suite { display: none; }
.fvin-description__suite.is-visible { display: inline; }

.fvin-description__toggle {
  margin-top: var(--space-3);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition-fast);
}

.fvin-description__toggle:hover { opacity: 0.65; }


/* ══════════════════════════════════════════════════
   VU À LA CARTE — slider fiches Restaurant
══════════════════════════════════════════════════ */

.fvin-carte__titre {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  letter-spacing: normal;
  margin: 0 0 var(--space-6);
  margin-top: 120px;
  margin-left: 49px;
}

/* Le track prend toute la largeur du conteneur (= largeur de la navigation).
   Les flèches sont en overlay absolu, elles ne rétrécissent plus les cards. */
.fvin-carte__slider-wrap {
  position: relative;
  margin-top: -20px;
}

.fvin-carte__arrow {
  position: absolute;
  z-index: 2;
  /* top posé par le JS = centre vertical du visuel (photo), pas de la card */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

/* L'offset doit correspondre exactement à la gouttière du container (24px) :
   au-delà, la flèche sort du viewport et provoque un scroll horizontal de la
   page à toutes les largeurs sous ~1228px (était -26px). */
.fvin-carte__arrow--prev { left: -24px; }
.fvin-carte__arrow--next { right: -24px; }

.fvin-carte__arrow:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
}

.fvin-carte__track {
  display: flex;
  gap: 56px;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  margin: 49px;
}
.fvin-carte__track::-webkit-scrollbar { display: none; }

.fvin-carte-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* 2 cartes visibles ; les suivantes défilent (flèches ou scroll). */
  flex: 0 0 calc((100% - 56px) / 2);
  scroll-snap-align: start;
}

.fvin-carte-card__photo {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-0);
}

.fvin-carte-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cave-cards {
  padding: 30px 0 0 0px;
}

.cave-card__img img {
  width: 304px;
  height: 304px;
  object-fit: contain;
  display: block;
}

.fvin-carte-card__date {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 20px;
}

.fvin-carte-card__nom {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 20px;
  margin-top: -10px;
}

.fvin-carte-card__rs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 10px;
}

.fvin-carte-card__rs a {
  display: inline-flex;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.fvin-carte-card__rs a:hover { opacity: 1; }

.fvin-carte-card__rs img {
  filter: brightness(0);
}

.fvin-carte-card__geo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.fvin-carte-card__grappe {
  color: var(--color-blue);
  flex-shrink: 0;
  width: 17px;
  height: 21.835px;
}

.fvin-carte-card__region {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  line-height: 1.2;
}

.fvin-carte-card__ville {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: #000;
  line-height: 1.2;
}


/* ══════════════════════════════════════════════════
   FOND BLANC — DU MÊME DOMAINE + LE DOMAINE + LOCALISATION
══════════════════════════════════════════════════ */

.fvin-bas-page {
  background: var(--color-page);
  /* margin-top retiré : la section « Du même domaine » porte déjà son
     padding-top ; évite un double espace quand « Moments partagés » est absent. */
  /* Respiration avant le footer, cohérente avec les fiches événement (180px) —
     sinon le dernier bloc (localisation) colle au bas de page. */
  padding-bottom: 180px;
}

.fvin-meme-domaine {
  padding-top: 140px;
  padding-bottom: 0px;
  background: var(--color-page);
}

/* « Du même domaine » : bloc + grille identiques à .gdm-section .cave-grille
   (page « Les nommés »). Cards plafonnées à 334px (au lieu de s'étirer en
   1fr sous un gros padding → cards rétrécies). */
.fvin-meme-domaine__bloc {
  background: #FFF;
  border-radius: 24px;
  padding: 32px;
  margin-top: var(--space-2);
}

.fvin-meme-domaine__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 334px));
  gap: 32px;
  justify-content: center;
}

/* Cards dimensionnées comme dans .cave-grille (visuel plafonné à 304px, carré) */
.fvin-meme-domaine__grid .cave-card { width: 100%; }
.fvin-meme-domaine__grid .cave-card__img {
  width: 100%;
  max-width: 304px;
  height: auto;
  aspect-ratio: 1;
}

/* La bouteille remplit le conteneur 304px (sinon reste à 223px = shared). */
.fvin-meme-domaine__grid .cave-card__img img {
  width: 100%;
  height: 100%;
}

/* Le Domaine 
.fvin-bas-page .domaine-about {
  padding-top: 80px;
  padding-bottom: 80px;
}*/

/* Localisation 
.fvin-bas-page .domaine-localisation {
  padding-top: 80px;
  padding-bottom: 80px;
}*/


/* ══════════════════════════════════════════════════
   RESPONSIVE — TABLET (768–1023px)
══════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {

  .fvin-profil { grid-template-columns: auto 1fr; gap: var(--space-6); }

  .fvin-profil,
  .fvin-creation,
  .fvin-illustration,
  .fvin-citation,
  .fvin-accords,
  .fvin-evenements,
  .fvin-moments,
  .fvin-carte { margin-top: 72px; }
  .fvin-bas-page { margin-top: 0; }

  /* Création : réduire les marges de la carte */
  .fvin-creation__carte { padding: var(--space-8) 48px var(--space-8) 40px; }
  .fvin-creation__row { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .fvin-creation__row + .fvin-creation__row { margin-top: 56px; }

  .fvin-illustration__bloc { grid-template-columns: 1fr 1fr; gap: var(--space-8); }

  .fvin-moments__wrap { max-width: calc(334px * 2 + 54px); } /* 2 colonnes */
  .fvin-moments__item { flex: 0 0 calc((100% - 54px) / 2); }

  .fvin-carte__track { grid-template-columns: repeat(2, 1fr); }

  .fvin-meme-domaine__bloc { padding: 32px; }
  .fvin-meme-domaine__grid { grid-template-columns: repeat(2, minmax(0, 334px)); gap: 32px; }

  /* Bas de page : supprimer espace entre domaine et localisation */
  .fvin-bas-page .domaine-about { padding-bottom: 0; }

}


/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 767px)
══════════════════════════════════════════════════ */

@media (max-width: 767px) {

  .fvin-hero-wrap { padding: 0 var(--space-4); }
  .fvin-hero { min-height: 360px; padding: var(--space-6) var(--space-5) var(--space-6); }
  .fvin-hero__pastille { width: 64px; height: 64px; right: var(--space-4); }
  .fvin-slider { max-width: 220px; }
  .fvin-entete__nom { font-size: 40px;}
  .fvin-entete__lieu{ font-size: 16px;}
  .fvin-cuvee-bloc { padding-top: var(--space-8); }
  .fvin-cuvee-bloc__cuvee { font-size: 36px; }
  .fvin-cuvee-bloc__appellation { font-size: var(--text-base); }
  .fvin-cuvee-bloc__actions { flex-direction: column; gap: var(--space-4); }

  .fvin-profil {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .fvin-profil__tab { height: 52px; font-size: var(--text-xl); }

  .fvin-profil,
  .fvin-creation,
  .fvin-illustration,
  .fvin-citation,
  .fvin-accords,
  .fvin-evenements,
  .fvin-moments,
  .fvin-carte { margin-top: 56px; }
  .fvin-bas-page { margin-top: 0; }

  .fvin-section__titre { font-size: 26px; }
 

  .fvin-carte__slider-wrap {
    position: relative;
    margin-top: 20px;  }

    .fvin-carte__track {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 56px;
      min-width: 0;
      overflow: hidden;
     margin: 0px; 
}


.fvin-carte__titre {
  padding-left: calc(52px + var(--space-0));
margin-left: 0px;
}

.fvin-carte-card__date {
  font-size: 10px;
}


  /* Création : une colonne */
  .fvin-creation__row,
  .fvin-creation__row--photo-left,
  .fvin-creation__row--photo-right {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .fvin-creation__row--photo-right .fvin-creation__media { order: 1; }
  .fvin-creation__row--photo-right .fvin-creation__texte  { order: 2; }
  .fvin-creation__row + .fvin-creation__row { margin-top: 28px; }

  /* Illustration : une colonne */
  .fvin-illustration__bloc { grid-template-columns: 1fr; gap: var(--space-6); }

  /* Citation */
  .fvin-citation__quote { font-size: var(--text-xl);    padding: 0px 0 0px 0px;}

  /* Événements : tags au-dessus */
  .fvin-evenements__list {
      margin-top: 40px;
}

.fvin-evenements {
   padding-bottom: 60px;
}
  .fvin-evenements__item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-4);
  }
  .fvin-evenements__tags  { grid-column: 1; grid-row: 1; }
  .fvin-evenements__nom   { grid-column: 1; grid-row: 2; font-size: var(--text-base); }
  .fvin-evenements__lieu  { grid-column: 1; grid-row: 3; }

  /* Moments : scroll horizontal natif (JS désactivé sous 768px) */
  .fvin-moments__wrap { max-width: none; }
  .fvin-moments__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fvin-moments__viewport::-webkit-scrollbar { display: none; }
  .fvin-moments__track {
    gap: var(--space-4);
    transition: none; /* pas d'anim JS en scroll natif */
  }
  .fvin-moments__item {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .fvin-arrows { display: none; }

  /* Carte restaurants : scroll horizontal */
  .fvin-carte__arrow { display: none; }
  .fvin-carte__slider-wrap { display: block; }
  .fvin-carte__track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fvin-carte__track::-webkit-scrollbar { display: none; }
  .fvin-carte-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
  .fvin-carte-card__photo { aspect-ratio: unset; }

  /* Pills + dates évènements : taille réduite */


.fvin-meme-domaine {
  padding-top: 80px;

}

  .fvin-pill,
  .fvin-evenements__date {
    height: 48px;
    font-size: var(--text-base);
    padding: 0 var(--space-5);
    
  }

  /* Création : marges réduites */
  .fvin-creation__carte { padding: var(--space-6) var(--space-5);     gap: var(--space-4); }

  /* Moments : cacher nav (dots + flèches) */
  .fvin-moments__nav { display: none; }

  /* Bas de page : espace réduit entre domaine et localisation */
  .fvin-bas-page .domaine-about { padding-top: 0px; padding-bottom: 0; }


  /* Du même domaine : slider horizontal, sans bg blanc sur mobile */
  .fvin-meme-domaine__bloc { padding: var(--space-0) 0; background: none; }
  .fvin-meme-domaine__grid {
    display: flex;
    /* Annule le justify-content:center de la base : sur un flex qui déborde,
       « center » pousse la 1re card hors de l'écran à gauche. */
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 16px;
    padding: 0 var(--space-5) var(--space-4);
  }
  .fvin-meme-domaine__grid::-webkit-scrollbar { display: none; }
  .fvin-meme-domaine__grid .cave-card {
    flex: 0 0 78vw;
    max-width: 280px;
    scroll-snap-align: start;
  }

  .fvin-cuvee-bloc {
    padding-bottom: var(--space-18);
}

.fvin-creation__titre {
  padding-top: 20px;
}

.fvin-accords {

  padding-top: 60px;
}
.fvin-carte__titre {
  margin-top: 60px;
}
.fvin-evenements__date {
 width: 80px;
 min-width: 130px;
 }
 .fvin-moments__item { 
  height: 80%
 
}

.fvin-carte-card__region {
  font-size: var(--text-sm);
}

.fvin-carte-card__ville {
  font-size: var(--text-sm);
}

.fdetail-section__titre {
  margin-bottom: var(--space-6);
}
.fvin-meme-domaine__bloc {
margin-top: var(--space-0)
}
.fvin-slider__dot {
  width: 8px;
  height: 8px;
}


.cave-cards {
  padding: 0 20px 16px;
}
.event-bloc__header {
padding-right: 10px;
padding-left: 14px;
padding-bottom: 20px;
padding-top: 60px;
}



/* Dot actif = pilule (principe carrousels, tout le site) */
.fvin-slider__dot.is-active {
  width: 30px;
  height: 8px;

}

}


/* ══════════════════════════════════════════════════
   AJUSTEMENTS THÈME WORDPRESS (sections conditionnelles)
   Les blocs se masquent quand ils sont vides : ces règles
   garantissent les respirations quel que soit l'enchaînement.
══════════════════════════════════════════════════ */

/* Sans bloc « Évènements », un filet gris sépare
   « Vu à la carte » de « Moments partagés ». */
.fvin-carte + .fvin-moments {
  margin-top: 90px;
  padding-top: 90px;
  border-top: 1px solid var(--color-border);
}

/* Le premier bloc de la zone blanche porte toujours le même retrait haut,
   que « Du même domaine » soit affiché ou non (évite la fusion de marges
   qui collait « Le Domaine » à la fin du bloc coloré). */
.fvin-bas-page > :first-child {
  margin-top: 0;
  padding-top: 140px;
}

@media (max-width: 767px) {
  .fvin-carte + .fvin-moments {
    margin-top: 56px;
    padding-top: 56px;
  }
  .fvin-bas-page > :first-child {
    padding-top: 72px;
  }
}


/* Mobile : la gouttière du container tombe à 12px (main.css) — l'offset des
   flèches doit suivre, sinon elles ressortent du viewport. */
@media (max-width: 767px) {
  .fvin-carte__arrow--prev { left: -12px; }
  .fvin-carte__arrow--next { right: -12px; }
}

/* Ligne d'événement cliquable (le lien reprend la disposition de la ligne). */
.fvin-evenements__lien {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* Pas de rollover sur la pill : seul le nom change de couleur au survol. */
.fvin-evenements__lien:hover .fvin-evenements__nom,
.fvin-evenements__lien:focus-visible .fvin-evenements__nom {
  color: var(--color-blue);
}