/* ============================================================
   SHARED — Caractère Libre
   Classes communes à plusieurs pages.
   Charger après components.css, avant le CSS de page.
   ============================================================ */



/* ══════════════════════════════════════════════════
   ENTÊTE DE PAGE
   Wrapper + titre 80px + accroche 49px
   Utilisé sur : Rencontres · Évènements · Cave à Vins
                 Festival · Festival Détail · Festival Article
══════════════════════════════════════════════════ */

/* ── Wrapper ── */
.bloc-entete {
  padding-top:    var(--space-12);
  padding-bottom: var(--space-12);
  text-align:     center;
  background-color: #1E4B9C;
}

.bloc-intro__tagline {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-regular);
  color: var(--color-white);
  margin: 0px 0 0px 0px;
}


/* ── Titre 80px ── */
.bloc-entete__titre {
  font-family:    var(--font-display);
  font-size:      80px;
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color:          var(--color-text);
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-6);
}

/* ── Titre 62px ── */
.bloc-entete__titre__page {
  font-family:    var(--font-display);
  font-size:      10px;
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color:          var(--color-txt);
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-6);
}

/* ── Accroche 49px ── */
.bloc-entete__accroche {
  font-family: var(--font-display);
  font-size:   49px;
  font-weight: var(--weight-regular);
  color:       var(--color-text);
  line-height: var(--leading-normal);
  max-width:   850px;
  margin: 0px 0 0px 0px;
}

.bloc-entete__desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--color-white);
  line-height: 1.6;
  margin: 12px 0 40px 0px;
}

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

@media (min-width: 768px) and (max-width: 1023px) {
  .bloc-entete__titre    { font-size: 60px; }
  .bloc-entete__accroche { font-size: 34px; }
}

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

@media (max-width: 767px) {
  .bloc-entete {
    padding-top:    var(--space-8);
    padding-bottom: var(--space-8);
  }
  .bloc-entete__tagline    { font-size: 16px; }
  .bloc-entete__titre    { font-size: 48px; line-height: 1.0; }
  .bloc-entete__accroche { font-size: 20px; line-height: var(--leading-relaxed); }
}


/* ══════════════════════════════════════════════════
   COLONNE LECTURE — col 3-10 ≈ 779px
   Colonne de texte centrée dans un .container (1180px).
   Utilisée sur les pages articles/histoire.

   Desktop  ≥ 1024px : max-width var(--col-8) ≈ 779px
   Tablette / Mobile : suit le container (pas d'override)
══════════════════════════════════════════════════ */

.col-lecture {
  max-width: var(--col-8); /* ≈ 779px */
  margin-left:  auto;
  margin-right: auto;
}


/* ══════════════════════════════════════════════════
   SECTION GAP — espacement inter-sections majeur
   À appliquer en margin-top sur toute section placée
   immédiatement sous une carte blanche (histoire-card,
   bloc-blanc, etc.) sur fond gris.

   Desktop  ≥ 1024px : 180px
   Tablette 768–1023px : 100px
   Mobile   < 768px  :  64px

   Usage HTML : <section class="section-gap"> ou
                style="margin-top: var(--space-section-gap)"
══════════════════════════════════════════════════ */

.section-gap {
  margin-top: var(--space-22); /* 110px */
}

@media (min-width: 768px) and (max-width: 1023px) {
  .section-gap { margin-top: 100px; }
}

@media (max-width: 767px) {
  .section-gap { margin-top: 64px; }
}


/* ══════════════════════════════════════════════════
   EVENT-BLOC__CARDS + EVENT-CARD
   Grille partagée : HP oenotourisme · festival-detail
══════════════════════════════════════════════════ */

.event-bloc__header {
 display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
  justify-items: center;
}
.event-bloc__label {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  margin: 0;
  padding-left: 0px;
}

@media (max-width: 767px) {
  .event-bloc__label {
      font-size: 28px;
      line-height: 1.10;
      padding-left: 0px;
      max-width: 240px;
  }

  .event-bloc__header {
    padding-right: 0px;
    padding-top: 30px;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
}
.event-bloc__cta {
  display: inline-flex;
  align-items: center;
  height: 51px;
  padding: 0 24px;
  border: 2px solid var(--color-blue);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
  margin-top: auto;
}
.event-bloc__cta--outline {
  background: transparent;
  border: 2px solid var(--color-blue);
  transition: background var(--transition-fast), color var(--transition-fast);
}
@media (max-width: 767px) {
  .event-bloc__cta {
      height: 35px;
      font-size: 14px;
      padding: 0 14px;
  }
}

@media (max-width: 767px) {
  .event-bloc--cave .event-bloc__header {
      padding: 0 0px 0 0px;
  }
}

.event-bloc__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 66px;
}

.event-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  transition: background var(--transition-fast);
}

.event-card:hover {
  background: rgba(255, 255, 255, 0.3);
}


@media (max-width: 1180px) {
    .event-bloc {
        padding: 40px 24px 48px;
        margin-left: 16px;
        margin-right: 16px;
        border-radius: 16px;
    }
}
.event-bloc {
  max-width: 1280px;
  margin: 0 auto 32px;
  border-radius: 24px;
  padding: 48px 85px 64px;
}
/* Bloc « Ils font l'évènement » : largeur alignée sur .passez-message__inner
   (1063px centré). Le fond gris pleine largeur reste porté par .cave-a-vins.
   Placé APRÈS .event-bloc pour gagner par ordre source ; la règle mobile
   (.event-bloc--cave) plus bas dans le fichier reprend la main sous 767px. */
.event-bloc--cave {
  background: #f7f7f7;
  max-width: 1063px;
  margin: 0 auto 32px;
  padding: 48px 0 64px;
  border-radius: 0;
}



@media (hover: hover) and (pointer: fine) {
  .event-card:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.event-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;      /* visuel carré 400×400 — jamais tronqué, même en responsive */
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.event-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.event-card__body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-card__date {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--weight-black);
  color: var(--color-blue);
  line-height: 1;
}

.event-card__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-black);
  color: var(--color-text);
  text-transform: uppercase;
  line-height: 1.10;
  margin: 0;
  /* Réserve 2 lignes (max autorisé) : tags et lieux alignés d'une card à l'autre,
     que le titre fasse 1 ou 2 lignes 
  min-height: 2lh;*/
}

.event-card__tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
  margin: 10px 0 0;
}

.event-card__subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  text-transform: uppercase;
}

.event-card__lieu {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

.event-card__lieu-icon {
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  color: var(--color-blue);
}

.event-card__lieu-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.event-card__region {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  line-height: 20px;
  text-transform: uppercase;
}

.event-card__domaine {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 20px;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .event-bloc__cards { gap: 20px; }
  .event-card__title  { font-size: 22px; }
  .event-card__date   { font-size: 26px; }
}

@media (max-width: 767px) {
  .event-bloc__cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    scrollbar-width: none;
    grid-template-columns: none;
   
  }
  .event-bloc__cards::-webkit-scrollbar { display: none; }
  .event-card {
    flex: 0 0 78vw;
    max-width: 260px;
    scroll-snap-align: start;
  }
  .event-card__date  { font-size: 26px; }
  .event-card__title { font-size: 26px; }
}


/* ══════════════════════════════════════════════════
   CAVE-CARD — card vin mutualisée
   Utilisée sur : HP (cave-a-vins section + passez-message)
                  Cave à vins (toutes les rubriques thématiques)
   ============================================================ */

.cave-cards {
  display: grid;
  grid-template-columns: repeat(4, 247px);
  gap: 25px;
  justify-content: center;
}

.cave-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  background: #fff;
  padding: 12px 12px 24px;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.cave-card--rouge        { color: var(--color-wine-rouge-strong); }
.cave-card--rose         { color: var(--color-wine-rose-strong); }
.cave-card--blanc        { color: var(--color-wine-blanc-strong); }
.cave-card--orange       { color: var(--color-wine-orange-strong); }
.cave-card--effervescent { color: var(--color-wine-effervescent-strong); }
/* Card « région » : renvoie vers la cave filtrée par région (pas une couleur de vin) */
.cave-card--region       { color: var(--color-wine-region-strong); }


/* Rollover survol : uniquement sur périphériques pointeur (desktop) — désactivé sur mobile/tactile */
@media (hover: hover) {
  .cave-card--rouge:hover        { background: var(--color-wine-rouge-pale); }
  .cave-card--rose:hover         { background: var(--color-wine-rose-pale); }
  .cave-card--blanc:hover        { background: var(--color-wine-blanc-pale); }
  .cave-card--orange:hover       { background: var(--color-wine-orange-pale); }
  .cave-card--effervescent:hover { background: var(--color-wine-effervescent-pale); }
  .cave-card--region:hover       { background: var(--color-wine-region-pale); }
}


.cave-card__top {
  display: flex;
  gap: 10px;
  align-self: flex-start;
  width: 100%;
  padding-top: 10px;
}

.cave-card__grape {
  display: block;
  width: 37px;
  height: 48px;
  margin-left: 10px;
  flex-shrink: 0;
}

.cave-card__region {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cave-card__region-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-blue);
  text-transform: uppercase;
}

.cave-card__appellation {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  text-transform: uppercase;
}

.cave-card__img {
  width: 223px;
  height: 223px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 35px 0;
  flex-shrink: 0;
}

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

.cave-card__body {
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cave-card__domaine {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  text-transform: uppercase;
  margin: 0 0 8px;
  line-height: 1.4;
}

.cave-card__name {
  font-family: var(--font-body);
  font-size:16px;
  font-weight: var(--weight-bold);
  color: var(--color-blue);
  text-transform: uppercase;
  margin: 0 0 16px;
  line-height: 1.25;
}

.cave-card__event {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-regular);
  color: var(--color-blue);
  text-transform: uppercase;
  line-height: normal;
  text-align: center;
  margin: 0;
}



/* ══════════════════════════════════════════════════
   À VOIR AUSSI — autres évènements du même domaine
══════════════════════════════════════════════════ */

.article-voir-aussi {
  margin-top: var(--space-22);
}

/* Respiration avant le footer : quel que soit le dernier bloc de la fiche
   (« autres événements du domaine », « … dans la région », localisation, ou la
   card principale), on garantit une marge basse — sinon il colle au bas de page. */
.oeno-article > :last-child {
  margin-bottom: 180px;
}

/* Titre dans le header (titre + bouton « Tout voir ») : on neutralise sa marge
   basse propre — le .event-bloc__header gère l'espacement — sinon elle gonfle
   la boîte du titre et désaligne verticalement le bouton. */
.article-voir-aussi .event-bloc__header .fdetail-section__titre {
  margin-bottom: 0;
}


/* ══════════════════════════════════════════════════
   DOMAINE — 
══════════════════════════════════════════════════ */
.domaine-about__grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-12);
  align-items: start;
  max-width: 860px;
}

.domaine-about__aside {
  display: flex;
  flex-direction: column;
}

.domaine-about__portrait-main {
  width: 141px;
  height: 141px;
  border-radius: 286px;
  overflow: hidden;
  background: var(--color-surface);
}

.domaine-about__site {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-blue);
  text-decoration: underline;
  display: block;
  line-height: var(--leading-relaxed);
  transition: opacity var(--transition-fast);
}

@media (max-width: 767px) {
  .domaine-about__desc, .domaine-about__proprietaire, .domaine-about__site {
    font-size: 14px;
    line-height: 21px;
}

  .domaine-about__grid {
      grid-template-columns: 1fr;
      padding-left: 0;
      max-width: 100%;
      gap: var(--space-6);
  }
}



/* ── @media (max-width: 1180px) {
  .cave-cards {
      grid-template-columns: repeat(2, 247px);
      gap: 22px;
  } 
}── */
@media (max-width: 1180px) {
  .cave-cards {
grid-template-columns: repeat(4, 230px);
gap: 12px;
}
}

/* ── Responsive tablette (768-1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .cave-cards {
    grid-template-columns: repeat(2, 247px);
    gap: 32px;
  }
}

/* ── Responsive mobile (≤ 767px) ── */
@media (max-width: 767px) {
  .cave-cards {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    scrollbar-width: none;
    gap: 16px;
    padding-bottom: 16px;
    justify-content: flex-start;
    grid-template-columns: none;
  }


.cave-card__event {
  margin-bottom: 20px;
}

  .cave-card__grape {
    display: block;
    width: 18px;
    height: 24px;
    margin-left: 0px;
    flex-shrink: 0;

}
  .cave-cards::-webkit-scrollbar { display: none; }

  .cave-card {
    flex: 0 0 78vw;
    max-width: 240px;
    scroll-snap-align: start;
  }

  .event-card__domaine {
    font-size: 12px;}

    .event-card__lieu {
      padding-top: 10px;
    }

.cave-card__region-label {
  font-size: 12px;}

  .bloc-entete__desc {
        margin: 12px 20px 40px 20px;
}

}