/* ============================================================
   CAVE À VINS — Caractère Libre
   Nodes Figma : 2303-5880

   Dépendances : tokens.css · main.css · components.css
                 shared.css · hp.css
   .cave-card* → shared.css
   .vins__bloc / .vins__viewport / .vins__slide → hp.css
   .filtre__btn / .bt-bleu__cta → components.css
   ============================================================ */


/* ══════════════════════════════════════════════════
   ENTÊTE — Bloc jaune avec filtres intégrés
══════════════════════════════════════════════════ */

.cave-entete {
  padding: 0;
}

.cave-entete > .container {
  background:    #F8EF62;
  border-radius: 24px;
  padding:       60px 24px 56px;
  text-align:    center;
  margin-top:20px
}

.cave-entete__tagline {
  font-family: var(--font-display);
  font-size:   28px;
  font-weight: var(--weight-regular);
  color:       var(--color-texte);
  margin:      0 0 8px;
}

.cave-entete__titre {
  font-family:    var(--font-display);
  font-size:      80px;
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color:          var(--color-texte);
  line-height:    var(--leading-tight);
  margin:         0 0 20px;
  text-transform: uppercase;
}

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

.cave-entete__filtres {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
}

/* Dropdown centré sous son bouton — desktop uniquement */
@media (min-width: 768px) {
  .cave-entete__dropdown {
    left:      50%;
    transform: translateX(-50%);
    min-width: 290px;
    top:       calc(100% + 8px);
  }

  /* Grid : titre gauche · CTA droite · cards pleine largeur */
  .cave-ilsfont__inner {
    display:               grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:   "header cta" "cards cards";
    align-items:           center;
    column-gap:            var(--space-4);
    row-gap:               var(--space-8);
    max-width:             1063px;
    margin:                0 auto;
  }
  .cave-ilsfont__header                   { grid-area: header; }
  .cave-ilsfont__inner > .bt-bleu__cta   { grid-area: cta; }
  .cave-ilsfont__inner > .cave-cards     { grid-area: cards; }

  .cave-thema__rubrique {
    display:               grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:   "header cta" "cards cards";
    align-items:           center;
    column-gap:            var(--space-4);
    row-gap:               var(--space-8);
    max-width:             1063px;
    margin:                0 auto;
    
  }
  .cave-thema__rubrique-header              { grid-area: header; }
  .cave-thema__rubrique > .bt-bleu__cta    { grid-area: cta; }
  .cave-thema__rubrique > .cave-cards      { grid-area: cards; }
}


/* ══════════════════════════════════════════════════
   ILS FONT L'ÉVÉNEMENT
   Fond jaune s'arrête à mi-hauteur des cards (gradient).
   Section header 46px après cave-entete.
══════════════════════════════════════════════════ */

/* Page « Cave à vins » uniquement : remonter les cave-cards en supprimant le
   margin-bottom: 30px du .event-bloc__header partagé (shared.css:147). Scopé
   via .page-template-page-cave (spécificité 0,2,0 > 0,1,0) pour ne PAS affecter
   les autres pages qui réutilisent .event-bloc__header. */
.page-template-page-cave .event-bloc__header {
  margin-bottom: 0;
}

/* Mobile, page cave uniquement : un peu de marge droite pour décoller le
   bouton « TOUT VOIR » du bord (le shared met padding-right:0). */
@media (max-width: 767px) {
  .page-template-page-cave .event-bloc__header {
    padding-right: 10px;
  }
}

.cave-ilsfont {
  margin-top: 46px;
}

.cave-ilsfont > .container {
  /* Jaune jusqu'à 378px depuis le haut, puis fond page */
  background:     linear-gradient(to bottom, #f8ef62 378px, var(--color-page) 378px);
  border-radius:  24px;
  padding-top:    56px;
  padding-bottom: 80px;
  overflow:       hidden;
}

.cave-ilsfont__header {
  margin: 0;
}

.cave-ilsfont__titre {
  font-family:    var(--font-display);
  font-size:      var(--text-40);
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-blue);
  line-height:    1;
  margin:         0;
}


/* ══════════════════════════════════════════════════
   RUBRIQUES THÉMATIQUES — affiche / histoires / mots
══════════════════════════════════════════════════ */

.cave-thema {
  padding-top:    100px;
  padding-bottom: 100px;
}

/* Alternance de fond : les rubriques paires ont un fond légèrement différent */
.cave-thema:nth-of-type(odd) {
  background: var(--color-page);
}

.cave-thema:nth-of-type(even) {
  background: var(--color-page);
}

/* Intro centré : grand titre + description */
.cave-thema__intro {
  text-align:    center;
  margin-bottom: 94px;
}

.cave-thema__titre {
  font-family:    var(--font-display);
  font-size:      62px;
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wider);

  color:          var(--color-texte);
  line-height:    1;
  margin:         0 0 20px;
}

.cave-thema__desc {
  font-family: var(--font-body);
  font-size:   14px;
  font-weight: var(--weight-regular);
  color:       var(--color-text);
  line-height: 1.65;
  margin:      0;
}

/* Plusieurs rubriques empilées (ex. « Le goût des mots ») : respiration de
   80px entre elles. */
.cave-thema__rubrique + .cave-thema__rubrique {
  margin-top: 80px;
}

/* Header de sous-rubrique : nom à gauche + CTA à droite */


.cave-thema__rubrique-header {
  margin: 0;
}

.cave-thema__rubrique-titre {
  font-family:    var(--font-display);
  font-size:      var(--text-40);
  font-weight:    var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-blue);
  line-height:    1;
  margin:         0;
}

/* Citation — après les cards "Histoires de rencontres" */
.cave-thema__citation {
  margin:      64px auto 0;
  max-width:   720px;
  text-align:  center;
  border:      none;
  padding:     0;
}

.cave-thema__citation-texte {
  font-family: var(--font-display);
  font-size:   28px;
  font-weight: var(--weight-regular);
  color:       var(--color-texte);
  line-height: 1.4;
  margin:      140px 0 0 16px;

}

.cave-thema__citation-auteur {
  font-family: var(--font-display);
  font-size:   28px;
  font-weight: var(--weight-semibold);
  color:       var(--color-texte);
  text-transform: uppercase;
  
}

.cave-thema__citation-auteur cite {
  font-style: normal;
}


/* ══════════════════════════════════════════════════
   VUE 2 — ZONE FILTRE : bouton Régions + pill bar
══════════════════════════════════════════════════ */

/* Barre sticky PLEINE LARGEUR : sans la classe .container, pour que le fond
   de l'état collé couvre toute la page (sinon le contenu défile dans les
   marges latérales). Le contenu, lui, reste centré via .cave-filter-zone__inner. */
.cave-filter-zone {
  position:       sticky;
  top:            0;
  z-index:        50;
  margin-top:     var(--space-10);
  margin-bottom:  var(--space-0);
  padding-top:    var(--space-4);
  padding-bottom: var(--space-0);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

/* Contenu centré (porte .container) — `relative` obligatoire : le dropdown
   région est en `absolute` et doit se caler sur cette largeur, pas sur la
   pleine largeur de la barre. */
.cave-filter-zone__inner {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.cave-filter-zone.is-stuck {
  background: var(--color-page);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.06);
}

.cave-filter-bar {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  background:    var(--color-white);
  border-radius: 999px;
  min-height:    67px;
  padding:       var(--space-2) var(--space-3);
  box-shadow:    var(--shadow-sm);
  /* le fond suit la largeur réelle des items — pas de largeur imposée —
     et la barre est centrée dans la page */
  width:         fit-content;
  max-width:     100%;
  margin-inline: auto;
}

.cave-scroll-arrow {
  display:         none;
  position:        absolute;
  z-index:         12;
  top:             50%;
  transform:       translateY(-50%);
  width:           28px;
  height:          28px;
  border:          0;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.95);
  color:           var(--color-blue);
  box-shadow:      0 4px 12px rgba(25, 37, 70, 0.16);
  cursor:          pointer;
  align-items:     center;
  justify-content: center;
  padding:         0;
  transition:      opacity 180ms ease, transform 180ms ease;
}

.cave-scroll-arrow--left  { left:  6px; }
.cave-scroll-arrow--right { right: 6px; }

.cave-scroll-arrow.is-disabled {
  opacity:        0.2;
  pointer-events: none;
}

.cave-scroll-arrow:not(.is-disabled):hover {
  transform: translateY(-50%) scale(1.08);
}

.cave-filter-region {
  display:     flex;
  align-items: stretch;
  flex-shrink: 0;
}

.cave-filter-region .filtre__btn {
  /* même hauteur que les boutons couleur : 51px, filet compris (base components.css) */
  height:        51px;
  align-self:    center;
  font-size:     var(--text-base);
  /* Marges G/D constantes (32px) quel que soit le nom de région (Corse,
     Languedoc…) : padding fixe + pas de min-width qui gonflerait les courts. */
  padding:       0 32px;
  white-space:   nowrap;
  border-radius: 999px;
}

.cave-filter-region .filtre__btn.is-active {
  background: var(--color-blue);
  color:      var(--color-white);
  border-color: var(--color-blue);
}

.cave-filter-region__dropdown {
  top:       calc(60px + 26px);
  left:      0;
  min-width: 320px;
}

.cave-filter-track {
  position:    relative;
  display:     flex;
  min-width:   0;
  align-items: center;
  gap:         2px;   /* 2px entre chaque bouton, état off compris */
}

.cave-filter-indicator {
  position: absolute;
  z-index:  1;
  /* top + height calés sur le bouton actif par le JS (positionIndicator) —
     alignement garanti à tous les breakpoints */
  left:     0;
  width:    0;
  border-radius: 999px;
  background:    var(--color-blue);
  pointer-events: none;
  transition:
    transform        250ms cubic-bezier(.2,.9,.2,1),
    width            250ms cubic-bezier(.2,.9,.2,1),
    background-color 200ms ease;
}

.cave-wine-filter {
  flex:            none;   /* pas de largeur fixe : la largeur suit le texte */
  display:         flex;
  align-items:     center;
  justify-content: center;
  height:          51px;
  padding:         0 32px;   /* 32px de marge gauche/droite par item */
  border:          none;
  border-radius:   999px;
  background:      transparent;
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-extrabold);
  letter-spacing: var(--tracking-wide);
  text-align:     center;
  color:          var(--color-blue);
  cursor:         pointer;
  white-space:    nowrap;
  position: relative;
  z-index:  2;
  transition: color var(--transition-fast), background var(--transition-fast);
}

/* Rollover état off : chaque bouton prend SA couleur de vin (celle de
   l'indicateur actif), texte blanc — pas de bleu clair générique */
.cave-wine-filter:not(.active):hover { color: var(--color-white); }
.cave-wine-filter[data-color="tous"]:not(.active):hover          { background: #1e4b9c; }
.cave-wine-filter[data-color="rouge"]:not(.active):hover        { background: #8e1d2d; }
.cave-wine-filter[data-color="blanc"]:not(.active):hover        { background: #d8b318; }
.cave-wine-filter[data-color="rose"]:not(.active):hover         { background: #e95b8d; }
.cave-wine-filter[data-color="orange"]:not(.active):hover       { background: #e97926; }
.cave-wine-filter[data-color="effervescent"]:not(.active):hover { background: #bfa46a; }

.cave-wine-filter.active {
  color: var(--color-white);
}


/* ══════════════════════════════════════════════════
   VUE 2 — SECTION TITRE + TRI
══════════════════════════════════════════════════ */

.cave-section {
  padding-top:    var(--space-4);
  padding-bottom: var(--space-20);
}

.cave-section__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-8);
}

.cave-grid-intro {
  text-align: center;
  padding-top: 56px;
  padding-bottom: 20px;
}

.cave-section__titre {
  font-family:    var(--font-display);
  font-size:      80px;
  font-weight:    var(--weight-black);
  color:          var(--color-texte);
  margin:         0;
}


/* ══════════════════════════════════════════════════
   TRI DROPDOWN
══════════════════════════════════════════════════ */

.cave-tri {
  position:        relative;
  display:         flex;
  justify-content: flex-end;
}

.cave-tri__btn {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  padding:     0 var(--space-4);
  height:      44px;
  border:      0px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family:   var(--font-display);
  font-size:     var(--text-base);
  font-weight:   var(--weight-regular);
  color:         var(--color-text);
  cursor:        pointer;
  white-space:   nowrap;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
    margin-top: 0px;
}

.cave-tri__btn:hover { border-color: var(--color-blue); }

.cave-tri__btn[aria-expanded="true"] {
  border-color: var(--color-blue);
  box-shadow:   0 0 0 3px rgba(30, 75, 156, 0.08);
}

.cave-tri__count  { font-weight: 500; color: #36344c; }
.cave-tri__sep    { color: var(--color-border); margin: 0 2px; }
.cave-tri__valeur { font-weight: var(--weight-semibold); color: var(--color-blue); }

.cave-tri__chevron {
  flex-shrink: 0;
  color:       var(--color-text-secondary);
  margin-left: 2px;
  transition:  transform var(--transition-fast);
}

.cave-tri__btn[aria-expanded="true"] .cave-tri__chevron { transform: rotate(180deg); }

.cave-tri__dropdown {
  position:  absolute;
  top:       calc(100% + 8px);
  right:     0;
  width:     230px;
  background:    var(--color-white);
  border:        1px solid #e5e5e7;
  border-radius: 16px;
  box-shadow:    0px 15px 20px -8px rgba(0, 0, 0, 0.04);
  padding:       var(--space-2);
  z-index:       var(--z-nav);
}

.cave-tri__dropdown[hidden] { display: none; }

.cave-tri__option {
  display:     flex;
  align-items: center;
  width:       100%;
  height:      51px;
  padding:     0 var(--space-4);
  border:      none;
  border-radius: 8px;
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  font-weight:    500;
  letter-spacing: 0.48px;
  color:       #36344c;
  background:  transparent;
  cursor:      pointer;
  text-align:  left;
  transition:
    background var(--transition-fast),
    color      var(--transition-fast);
}

.cave-tri__option:hover {
  background: rgba(30, 75, 156, 0.05);
  color:      var(--color-blue);
}

.cave-tri__option.is-selected {
  background:  rgba(30, 75, 156, 0.05);
  color:       var(--color-blue);
  font-weight: var(--weight-semibold);
}


/* ══════════════════════════════════════════════════
   GRILLE DES VINS (vue 2)
══════════════════════════════════════════════════ */

.cave-grille {
  display: grid;
  /* 3 colonnes toujours. 334px = design desktop, mais en PLAFOND (minmax) et non
     en largeur figée : sous ~1180px les cards rétrécissent au lieu de déborder. */
  grid-template-columns: repeat(3, minmax(0, 334px));
  gap:             32px;
  justify-content: center;
  padding:         40px 0;
}

/* Vue grille de la cave : conteneur blanc arrondi, comme
   "Le goût des mots" et "Les nommés" (.gdm-section .cave-grille) */
.cave-section .cave-grille {
  background:    var(--color-white);
  border-radius: 24px;
  padding:       32px;
}

/* La card remplit sa colonne (plafonnée à 334px par la grille) */
.cave-grille .cave-card {
  width: 100%;
}

/* Le visuel suit la card : 304px = plafond, carré préservé par aspect-ratio */
.cave-grille .cave-card__img {
  width: 100%;
  max-width: 304px;
  height: auto;
  aspect-ratio: 1;
}

.cave-grille .cave-card__img img {
  width: 100%;
  height: 100%;
}


.cave-grid__vide {
  grid-column: 1 / -1;
  padding:     var(--space-10) 0;
  text-align:  center;
  font-family: var(--font-body);
  font-size:   var(--text-base);
  color:       var(--color-blue);
}

.cave-grid__vide[hidden] { display: none; }


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

.cave-pagination {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  margin-top:      var(--space-10);
}

.cave-pagination .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);
}

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

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

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

.cave-pagination .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-semibold);
  color:       #737787;
  cursor:      pointer;
  transition:
    background var(--transition-fast),
    color      var(--transition-fast);
}

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

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

.cave-pagination .pag__ellipsis {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  font-family:     var(--font-body);
  font-size:       var(--text-base);
  color:           #737787;
  user-select:     none;
}


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

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

  .cave-entete__titre  { font-size: 60px; }
  .cave-thema__titre   { font-size: 44px; }

  .cave-thema { padding-top: 72px; padding-bottom: 72px; }

  .cave-ilsfont__slide { flex-wrap: wrap; }
  .cave-ilsfont__slide .cave-card { flex: 0 0 calc(50% - 13px); }

  .cave-grille {
    grid-template-columns: repeat(2, 1fr);
    gap:     32px;
    padding: 40px;
  }

  .cave-wine-filter { padding: 0 12px; }

}


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

@media (max-width: 767px) {

  /* Marges latérales des grilles de cards à 12px, comme rencontres /
     oenotourisme (le .container standard laisse 24px ; ici 12px de chaque côté).
     Vues concernées : sections par défaut (Ils font l'événement, thématiques)
     + vue grille (?vue=grille). */
  .cave-ilsfont > .container,
  .cave-thema   > .container,
  .cave-section {
    width: calc(100% - 24px);
    padding-top: var(--space-0);
  }


  .cave-entete > .container {
    margin-top:-20px;
    width: calc(100% - 24px);
  }

  .cave-thema__desc br,
  .cave-entete__desc br { display: none; }

  .cave-entete {
    padding:       40px 0 44px;
    border-radius: 0 0 20px 20px;
  }

  .cave-entete__tagline { font-size: 16px; }
  .cave-entete__titre   { font-size: 40px; }

  .cave-grid-intro { padding-top: 32px; padding-bottom: 8px; }
  .cave-section__titre { font-size: 48px; }

  .cave-entete__filtres {
    flex-direction: none;
    gap:            var(--space-3);
    padding:        0 var(--space-5);
  }


  .cave-entete__filtres .filtre__btn { width: 100%; justify-content: space-between; }

  .cave-entete__dropdown {
    left:      0;
    transform: none;
    min-width: 0;
    width:    98%;
  }

 
  .cave-ilsfont {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .cave-ilsfont__titre { font-size: 28px; }

  /* Aligne le titre sur la 1re card (offset scroll-padding-left) */
  .cave-ilsfont__header { padding-left: 20px; }

  /* Titre → cards : espacement */
  .cave-ilsfont__header,
  .cave-thema__rubrique-header {
    margin-bottom: var(--space-6);
  }

  /* CTA centré sous les cards */
  .cave-ilsfont__inner > .bt-bleu__cta,
  .cave-thema__rubrique > .bt-bleu__cta {
    display:     flex;
    margin-top:  var(--space-6);
    margin-left: auto;
    margin-right: auto;
    width:       fit-content;
  }

  .cave-thema { padding-top: 56px; padding-bottom: 56px; }

  .cave-thema__intro { margin-bottom: 15px; }
  .cave-thema__titre { font-size: 40px; }
  .cave-entete__desc {font-size: 12px;}
  .cave-thema__rubrique-titre { font-size: 28px; padding-left: 20px; }

  .cave-thema__citation { margin-top: 96px; margin-bottom: 16px; }
  .cave-thema__citation-texte { font-size: 20px; }

  /* Zone filtre mobile */
  .cave-filter-zone {
    padding-left:  0;
    padding-right: 0;
    margin-top:    var(--space-2);
    gap:           var(--space-2);
    width: 95%;

  }

  .cave-tri {
    display:         flex;
    justify-content: flex-end;
  }

  .cave-scroll-arrow { display: flex; }

  .cave-filter-bar {
    /* La barre NE défile plus : la région reste fixe à gauche (marge
       constante quelle que soit la région) et seuls les chips couleur
       défilent, dans leur propre conteneur (.cave-filter-track). */
    padding:       0 12px;
    max-width:     100%;
    box-sizing:    border-box;
    min-height: 44px;
  }

  .cave-filter-region {
    flex-shrink:  0;
    padding-left: 0;
  }

  .cave-filter-region .filtre__btn {
    /* Marges G/D constantes (15px sur mobile), pas de min-width (qui gonflait
       les noms courts type « Corse » et cassait la constance). */
    padding:     0 15px;
    font-size:   14px;
    font-weight: var(--weight-extrabold);
    height:      35px;
    align-self:  center;
  }

.cave-wine-filter {
    height: 35px;
 
}

  .cave-filter-track {
    /* Seuls les chips couleur défilent ici (la région reste fixe). */
    flex:        1 1 auto;
    min-width:   0;
    align-items: stretch;
    overflow-x:  auto;
    overflow-y:  hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
  }
  .cave-filter-track::-webkit-scrollbar { display: none; }

  .cave-wine-filter {
    flex:            0 0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       64px;
    padding:         0 8px;
    font-size:       14px;
    scroll-snap-align: center;

  }

  /* Le filtre région réutilise la bottom-sheet mobile de base
     (.filtre__dropdown : position fixed, drag handle). L'ancien override
     position:static le piégeait dans le scroll horizontal de .cave-filter-bar
     (overflow) → dropdown hors écran. On reset juste le `top` desktop
     (calc 86px, ligne 346 hors media query) pour que le bottom:0 de la
     bottom-sheet reprenne la main. */
  .cave-filter-region__dropdown {
    top: auto;
  }




  .cave-section__header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-4);
  }

  .cave-grille {
    grid-template-columns: repeat(2, 1fr);
    gap:           12px;
    padding:       16px 0;
    width:         100%;
    min-width:     0;
  }

  

  .cave-section .cave-grille { padding: 10px; background-color: #FFFFFF; }
  
  
  .cave-pagination .pag__arrow {
    width:  42px;
    height: 42px;
  }

  .cave-pagination .pag__page {
    width:     36px;
    height:    36px;
    font-size: var(--text-sm);
  }
  .cave-thema__citation-auteur {
    font-size: 20px;
  }
 
  .cave-grille {
 gap: 10px;
  
  }

  .cave-grid__vide {
  font-size: 12px;
}

.cave-tri__btn {
  margin-top: 0px;
}

.cave-entete > .container {
  background: #F8EF62;
  border-radius: 24px;
  padding: 40px 24px 40px;
  text-align: center;
  /* margin-top: 20px; */
}
.cave-entete__desc {
  margin: 0 0 20px;
}
.cave-ilsfont {
  margin-top: -20px;
}

  .event-bloc__label {
      font-size: 28px;
      line-height: 1.10;
      padding-left: 20px;
      max-width: 260px;
  }



.cave-thema__citation-texte {
  margin: 50px 0 0 16px;
}

.cave-cards {
  padding: 0 20px 16px;
 }

 .cave-thema__desc {

  padding-left: 30px;
  padding-right: 30px;
  font-size: 12px;
  line-height: 1.60;
}

.cave-grille .cave-card {
    width: 100%;
    min-width: 0;
    height: 100%;
}
.cave-grille .cave-card__img, .cave-grille .cave-card__img img {
  width: 100%;
  height: 170px;
 margin: 20px 0;
}



}


/* Citation cliquable : tout le bloc mène à l'Histoire. Le lien ne doit rien
   changer à l'aspect de la citation, sauf un léger fondu au survol. */
.cave-thema__citation-lien {
  display: block;
  color: inherit;
  text-decoration: none;
}

.cave-thema__citation-texte,
.cave-thema__citation-auteur { transition: color var(--transition-fast); }

/* Rollover : la citation passe en bleu au survol (au lieu du fondu d'opacité). */
.cave-thema__citation-lien:hover .cave-thema__citation-texte,
.cave-thema__citation-lien:hover .cave-thema__citation-auteur,
.cave-thema__citation-lien:focus-visible .cave-thema__citation-texte,
.cave-thema__citation-lien:focus-visible .cave-thema__citation-auteur {
  color: var(--color-blue);
}


/* Sélection sans résultat : message centré, en bleu, avec de l'air autour. */
.cave-grille__vide {
  text-align:     center;
  color:          var(--color-blue);
  font-family:    var(--font-body);
  font-size:      var(--text-base);
  padding:        var(--space-16) var(--space-4);
}