/* ============================================================
   OENOTOURISME — Caractère Libre
   Page liste oenotourisme · Figma node 2303-2335
   ============================================================ */

/* ══════════════════════════════════════════════════
   PAGE BACKGROUND
   Bleu lavande du header jusqu'aux filtres (inclus)
   Gris clair sur la grille cards
══════════════════════════════════════════════════ */

.page-oenotourisme {
  background: #e5eafa;
}

.page-oenotourisme .site-header {
  background: transparent;
}

@media (max-width: 1180px) {
  .page-oenotourisme .site-header {
    padding: 24px 16px 0;
  }
}

@media (max-width: 767px) {
  .page-oenotourisme .site-header {
    position: relative;
    padding: 12px 16px;
  }
}

.bloc-oeno-grille {
  background: #F7F7F7;
  padding-top: 40px;
  padding-bottom: 60px;
}

/* ══════════════════════════════════════════════════
   INTRO OENOTOURISME
══════════════════════════════════════════════════ */

.oeno-intro {
  padding: 32px 0 0;
}

.oeno-intro__grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 50px;
}

/* Colonne gauche */
.oeno-intro__card {

  flex: 0 0 628px;
  width: 628px;
  height: 400px;
  background: #ced9fc;
  border-radius: 24px;
  padding: 74px 74px 44px;
  display: flex;
  flex-direction: column;
  justify-content: top;
  gap: 16px;
  box-sizing: border-box;

}

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

.oeno-intro__titre {
  font-family: var(--font-display);
  font-size: 62px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: #36344c;
  line-height: 1;
  margin: -10px 0 0 0;
}

.oeno-intro__desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* Colonne droite — décalée de 34px vers le bas */
.oeno-intro__media {
  flex: 0 0 494px;
  width: 494px;
  height: 400px;
  margin-top: 34px;
  position: relative;
  border-radius: 12px;
  /* overflow visible : le halo blanc du hover déborde de la zone (534×440) —
     le radius de la photo est porté par l'image elle-même */
  isolation: isolate;
}

/* Halo blanc au survol — Figma 534×440, radius 24 (média 494×400 + 20px de débord) */
.oeno-intro__media::before {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 24px;
  background: #fff;
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
  z-index: -1;
}

.oeno-intro__media:hover::before { opacity: 1; }

/* Lien pleine zone → single-oeno-event.php de l'événement mis en avant */
.oeno-intro__media-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 12px;
}

.oeno-intro__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 12px;
}

/* Bouton play centré (V1) */
/* Positionnement uniquement — taille/cercle/triangle → .play-btn (components.css) */
.oeno-intro__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;   /* au-dessus du lien pleine zone */
}

.oeno-intro__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Caption fond #36344C, ancrée en bas à droite — sans espace */
.oeno-intro__caption {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #36344c;
  border-radius: 10px 10px 10px 0; /* bas-gauche à angle droit */
  padding: 14px 18px;
  min-width: 208px;
  box-sizing: border-box;
}

.oeno-intro__caption-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.oeno-intro__caption-date {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  color: #fff;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  
}

.oeno-intro__caption-artiste {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-black);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.1;
}

.oeno-intro__caption-domaine {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}

/* Intro : variante unique (V2 supprimée le 2026-07-18 — CSS/markup verbatim retirés) */

/* ══════════════════════════════════════════════════
   FILTRES — dans la zone bleue, alignés à gauche
══════════════════════════════════════════════════ */

.oeno__filtres {
  padding-top: 32px;
  /* Respiration sur le fond bleu avant la bascule vers le gris de la grille. */
  padding-bottom: 58px;
}

.oeno__filtres.is-stuck {
  background: #E5EAFA;
  /*padding-top: 12px;
  padding-bottom: 12px;*/
}

.page-oenotourisme .filtres__bar {
  justify-content: flex-start;
}

/* ══════════════════════════════════════════════════
   NAV MOIS — reprend le système de evenements.css
══════════════════════════════════════════════════ */

.page-oenotourisme .evenements__nav-mois {
  border-bottom: 0;
  margin-bottom: 0;
}

.page-oenotourisme .nav-mois__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

/* Strip scrollable — s'adapte à N mois sans jamais couper. Look d'origine
   conservé (onglets texte soulignés, grande typo), seul le mécanisme change :
   défilement horizontal + fade de bord (mask). Le JS retire le fade côté
   début/fin (.at-start / .at-end) et tout le fade quand tout tient (.no-scroll). */
.page-oenotourisme .nav-mois__tabs {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex: 1;
  min-width: 0;                  /* autorise le rétrécissement → scroll réel */
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-padding-inline: 24px;   /* le mois recentré ne colle pas au bord */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-inline: 24px;          /* respire aux extrémités sous le fade */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.page-oenotourisme .nav-mois__tabs::-webkit-scrollbar { display: none; }

.page-oenotourisme .nav-mois__tabs.at-start {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.page-oenotourisme .nav-mois__tabs.at-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
}
.page-oenotourisme .nav-mois__tabs.no-scroll {
  -webkit-mask-image: none;
          mask-image: none;
  justify-content: flex-start;
}

/* Onglet = texte souligné (look d'origine, taille display) */
.page-oenotourisme .nav-mois__tab {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color: var(--color-text);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  padding: 20px 0 6px;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.page-oenotourisme .nav-mois__tab:hover:not(.is-active) {
  color: #36344c;
}

.page-oenotourisme .nav-mois__tab.is-active {
  color: #36344c;
  border-bottom-color: #36344c;
}

.page-oenotourisme .nav-mois__arrows {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  padding-top: 20px;   /* aligne les flèches sur les onglets (padding haut 20px) */
}

/* Tout tient sans scroll → flèches inutiles, on les masque */
.page-oenotourisme .nav-mois__inner:has(.nav-mois__tabs.no-scroll) .nav-mois__arrows {
  display: none;
}

.page-oenotourisme .nav-mois__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid #E5E5E7;
  background: none;
  color: #36344c;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.page-oenotourisme .nav-mois__arrow:hover {
  background: #36344c;
  color: #fff;
}

.page-oenotourisme .nav-mois__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   GRILLE CARDS ÉVÉNEMENTS
══════════════════════════════════════════════════ */

.oeno-cards-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}

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

/* Neutralise le row-gap 120px de evenements.css */
.bloc-oeno-grille .cards-grid {
  row-gap: 80px;
}

/* Une card wide occupe 2 colonnes : sans « dense », si elle ne tient pas dans
   les colonnes restantes d'une rangée, la place est réservée (trou) et une card
   passe à la rangée/page suivante. « dense » autorise les cards 1 colonne à
   combler ce trou → la rangée sous une double card accueille bien 3 cards. */
.page-oenotourisme .cards-grid--3col {
  grid-auto-flow: row dense;
}

/* Card wide (span 2 colonnes) : photo à la même hauteur que les cards
   1 colonne de la rangée. Largeur wide = 2 colonnes + 1 gap (24px),
   hauteur visée = 1 colonne → ratio ≈ (2×356 + 24) / 356 ≈ 2.07 */
.page-oenotourisme .cards-grid__item--wide .event-card__img {
  aspect-ratio: 2.07 / 1;
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablette : la wide repasse en 1 colonne → carré comme les autres */
  .page-oenotourisme .cards-grid__item--wide .event-card__img {
    aspect-ratio: 1 / 1;
  }
}

.oeno__vide {
  color: var(--color-blue);
  text-align: center;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-medium);
  padding: 80px 0;
  width: 100%;
}

/* Animation entrée — JS ajoute/retire .is-visible sur l'article.card-event */
.bloc-oeno-grille .card-event {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}

.bloc-oeno-grille .card-event.is-visible {
  opacity: 1;
  transform: none;
}

/* Photo : carré 400×400 hérité de shared.css (.event-card__img) —
   plus de hauteur fixe, le visuel n'est jamais tronqué */

/* ══════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════ */

.oeno-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.oeno-pagination__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #36344c;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  letter-spacing: 0.03em;
}

.oeno-pagination__btn:hover {
  background: rgba(54,52,76,0.08);
}

.oeno-pagination__btn--active {
  background: #36344c;
  color: #fff;
}

.oeno-pagination__btn--active:hover {
  background: #2a2840;
}

.oeno-pagination__btn--next {
  color: #36344c;
}


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

@media (max-width: 1180px) {
  .oeno-intro__titre { font-size: 48px; }
  .oeno-intro__card  { padding: 32px; }
  .oeno-intro__grid  { gap: 32px; }
  .oeno-intro__card  { flex: 1; width: auto; }
  .oeno-intro__media { flex: 1; width: auto; }

  .page-oenotourisme .nav-mois__tab { font-size: 22px; }
  .page-oenotourisme .nav-mois__tabs { gap: var(--space-5); }

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

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

@media (max-width: 767px) {
  .oeno-intro {
    padding: 20px 0 0;
  }

  /* Intro à 12px de chaque côté, comme la grille de cards (cohérence mobile) */
  .oeno-intro > .container {
    width: calc(100% - 24px);
  }

  .oeno-intro__grid {
    flex-direction: column;
    gap: 16px;
  }

  .oeno-intro__card {
    width: 100%;
    flex: none;
    height: auto;
    padding: 24px 20px;
    gap: 12px;
  }

  .oeno-intro__media {
    width: 100%;
    flex: none;
    height: 280px;
    margin-top: 0;
  }

  .oeno-intro__tagline { font-size: 16px; }
  .oeno-intro__titre   { font-size: 36px; }
  .oeno-intro__desc    { font-size: 12px; }

  .oeno__filtres {
    padding-top: 24px;
    padding-bottom: 28px;
  }

  /* Nav mois : scroll horizontal sur mobile */
  .page-oenotourisme .nav-mois__inner {
    flex-wrap: nowrap;      /* le strip scrolle, pas de retour à la ligne */
    gap: 0;
    padding-bottom: 12px;
  }

  .page-oenotourisme .nav-mois__tabs {
    gap: var(--space-4);
  }

  .page-oenotourisme .nav-mois__tab {
    font-size: 18px;
    padding: 0 0 6px;
  }

  /* Sur mobile : pas de flèches, on scrolle au swipe (fade + onglets visibles) */
  .page-oenotourisme .nav-mois__arrows { display: none; }

  .bloc-oeno-grille {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  /* Réduit les marges latérales */
  .page-oenotourisme .bloc-oeno-grille .container {
    width: calc(100% - 24px);
  }

  /* Annule le slider horizontal de components.css → grille 2 colonnes */
  .page-oenotourisme .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    margin-left: 0;
    margin-right: 0;
    gap: 12px;
    padding-bottom: 0;
  }

  .page-oenotourisme .cards-grid > * {
    scroll-snap-align: none;
    flex: none;
    width: 100%;
  }

  .page-oenotourisme .cards-grid > *:first-child {
    margin-left: 0;
  }

  /* Card wide → pleine largeur des 2 colonnes sur mobile */
  .page-oenotourisme .cards-grid__item--wide {
    grid-column: span 2;
  }

  /* On lève le max-width:260px du lien .event-card (calé pour les cards 1
     colonne) : le visuel occupe alors toute la largeur (2 col), et son
     aspect-ratio 2.07/1 donne ~170px de haut = même hauteur que la ligne de
     2 cards carrées. */
  .page-oenotourisme .cards-grid__item--wide .event-card {
    max-width: none;
  }

  /* Photo mobile : carré conservé (aspect-ratio 1/1 de shared.css) */

  /* Typo réduite sur mobile */
  .bloc-oeno-grille .event-card__date {
    font-size: 18px;
    line-height: 1.1;
  }

  .bloc-oeno-grille .event-card__title {
    font-size: 16px;
    line-height: 1.1;
  }

  .bloc-oeno-grille .event-card__tag,
  .bloc-oeno-grille .event-card__subtitle {
    font-size: 10px;
    margin-top: 4px;
  }

  .bloc-oeno-grille .event-card__domaine,
  .bloc-oeno-grille .event-card__region {
    font-size: 10px;
    line-height: 1.3;
  }

  .bloc-oeno-grille .event-card__body {
    padding: 10px 8px 12px;
    gap: 4px;
  }

  .bloc-oeno-grille .event-card__lieu {
    gap: 4px;
    margin-top: 4px;
  }

  .bloc-oeno-grille .event-card__lieu-icon svg {
    width: 14px;
    height: 16px;
  }
}

/* ══════════════════════════════════════════════════
   PAGINATION — styles pag__* utilisés par le JS
   (migré depuis evenements.css)
══════════════════════════════════════════════════ */

.pag__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid #d6d6dc;
  background: transparent;
  color: #737787;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.pag__arrow:hover:not(:disabled) {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.pag__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.pag__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pag__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: #737787;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
}

.pag__page:hover:not(.is-active) {
  background: rgba(30, 75, 156, 0.06);
  color: var(--color-blue);
}

.pag__page.is-active {
  background: var(--color-blue);
  color: var(--color-white);
  font-weight: var(--weight-bold);
}



@media (max-width: 767px) {
  .pag__arrow { width: 42px; height: 42px; }
  .pag__page  { width: 38px; height: 38px; font-size: var(--text-sm); }
  .oeno__vide {    font-size: 13px;}

  /* Glow de survol inutile sur mobile (tactile) : inset 0 pour ne pas
     déborder de 20px à droite et créer un scroll horizontal de page. */
  .oeno-intro__media::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: transparent;
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
    z-index: -1;
  }

  /* Neutralise le row-gap 120px de evenements.css */
.bloc-oeno-grille .cards-grid {
  row-gap: 20px;
}


}