/* ============================================================
   FESTIVAL DETAIL — Caractère Libre
   Page single-festival.php
   Figma node : 1269-178
   Blocs : Hero · Services · À l'honneur (4 variantes)
           Et aussi (1 et 2 items) · Retour sur · Localisation
           Bandeau réservation
   ============================================================ */

/* ── Page background ── */
body { background: var(--color-page); }

/* ══════════════════════════════════════════════════
   NAV — fond bleu = stop 0% du dégradé (#1E4B9C).
   Raccord invisible avec le dégradé de .fdetail-hero
   juste en dessous → continuité parfaite.
══════════════════════════════════════════════════ */

.site-header {
  background: #1E4B9C;
}

/* ── Espacement commun entre familles de blocs ── */
.fdetail-section {
  margin-bottom: 180px;
}

/* ══════════════════════════════════════════════════
   HERO — fond bleu, carrousel, citation
══════════════════════════════════════════════════ */

.fdetail-hero {
  background: #1E4B9C;
  border-radius: 0 0 0px 0px;
  overflow: hidden;
  padding-bottom: var(--space-20);
  margin-bottom: 180px;
}

/* Retour blanc sur fond bleu */
.fdetail-hero .retour { color: var(--color-white); }
.fdetail-hero .retour:hover { opacity: 0.65; }

/* ── Intro texte ── */
.fdetail-hero__header {
  padding-top: var(--space-10);
  text-align: center;
}

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

/* Base → .bloc-entete__titre (shared.css) ; overrides ci-dessous */
.fdetail-hero__titre {
  color: var(--color-white);
  margin-bottom: 0;
}

.bloc-entete__titre
{
  color: var(--color-white);
  font-size: 62px;
 
}

.fdetail-hero__ville {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-10);
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════
   CARROUSEL HERO
══════════════════════════════════════════════════ */

.fdetail-carousel {
  --carousel-peek: 200px;

  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 0 var(--space-10);
  cursor: grab;
}

.fdetail-carousel__track {
  display: flex;
  height: 580px;
  gap: 24px;
  will-change: transform;
  transition: transform var(--transition-carousel);
  user-select: none;
}

.fdetail-carousel__slide {
  flex: 0 0 calc(100% - (var(--carousel-peek) * 2));
  height: 100%;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.fdetail-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Crédit photo en surimpression, bas-gauche, blanc 12px, léger retrait. */
.fdetail-carousel__credit {
  position: absolute;
  left: 16px;
  bottom: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.3;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 2;
}

/* Les boutons dans le carousel gardent leur curseur */
.fdetail-carousel__dot,
.fdetail-play-btn {
  cursor: pointer;
}

/* Bouton play sur slide vidéo — positionnement uniquement,
   taille/cercle/triangle → .play-btn (components.css) */
.fdetail-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.fdetail-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

/* Dots de navigation — sous le carrousel, pas en overlay sur les photos */
.fdetail-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.fdetail-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 255);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast), width var(--transition-fast);
}


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

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

/* ── Citation ── */
.fdetail-hero__citation {
  max-width: 851px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;

}

.fdetail-hero__citation p {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-regular);
  color: var(--color-white);
  line-height: 60px;
  margin: 0;
}

.fdetail-hero__citation cite {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
  display: block;
  margin-top: var(--space-4);
}

/* ══════════════════════════════════════════════════
   OVERLAY VIDÉO YouTube
══════════════════════════════════════════════════ */

.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-overlay[hidden] { display: none; }

.video-overlay__frame {
  width: 90vw;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--radius-md);
}

.video-overlay__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}

.video-overlay__close:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Message affiché à la place de la vidéo si cookies marketing non acceptés */
.video-overlay__frame[hidden] { display: none; }

.video-overlay__consent {
  max-width: 480px;
  margin: 0 var(--space-6);
  padding: var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius-md);
  text-align: center;
}

.video-overlay__consent[hidden] { display: none; }

.video-overlay__consent-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}

.video-overlay__consent-btn {
  font-family:  var(--font-body);
  font-size:    15px;
  font-weight:  var(--weight-bold);
  color:        var(--color-white);
  background:   var(--color-blue);
  border:       none;
  border-radius: 999px;
  padding:      12px 28px;
  cursor:       pointer;
  transition:   opacity var(--transition-fast);
}

.video-overlay__consent-btn:hover { opacity: 0.85; }

/* ══════════════════════════════════════════════════
   TITRES DE SECTION
══════════════════════════════════════════════════ */

/* .fdetail-section__titre → components.css (partagé avec domaine) */

/* ══════════════════════════════════════════════════
   CARDS ÉVÉNEMENTS (SOIF / SERVICES BAR)
   Même cards que card-event — grilles spécifiques
══════════════════════════════════════════════════ */

.fdetail-cards {
  display: grid;
  gap: var(--space-8);
  row-gap: var(--space-16);
  /* Grille fixe 3 colonnes : une card-event "simple" a toujours
     la même largeur (1/3), qu'elle soit seule, à 2 ou à 3. */
  grid-template-columns: repeat(3, 1fr);
}

/* Card large → span 2 colonnes dans la grille 3col */
.fdetail-cards .card-event--wide {
  grid-column: span 2;
}

/* Reset image zoom pour photos normales */
.fdetail-cards .card-event__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 0;
  top: 0;
}


/* ══════════════════════════════════════════════════
   CARD VIN (C05)
   Utilisée dans les blocs À l'honneur
══════════════════════════════════════════════════ */

/* ── Card vin (C05) — alignée sur etl__vin de la HP ────────
   Même structure, mêmes variantes couleur, même rollover.
   ──────────────────────────────────────────────────────── */
  
.cave-card {
  background: #f7f7f7;;
}

/* 304px = plafond (pas une largeur figée) : dans les blocs À l'honneur,
   les colonnes descendent sous 304px vers 1024 — l'image suit la card. */
.cave-card__img {
  width: 100%;
  max-width: 304px;
  height: auto;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}

/* Image en absolu dans le carré : la bouteille est « contain » (jamais rognée)
   et ne peut plus imposer sa hauteur intrinsèque au conteneur. Sans ça, une
   image portrait (preprod = bouteilles brutes ex. 673×1003) fait grandir la
   card ; en local les visuels carrés (451×451) masquaient le problème. */
.cave-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cave-grille .cave-card {
  width: 334px;
}


/* ── Variantes spéciales ──────────────────────────────── */

/* Média : couverture photo/vidéo */
.card-vin--media {
  padding: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: transparent;
}

.card-vin--media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* AOC (fond rouge, texte blanc) */
.card-vin--aoc {
  background: #db3832;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.card-vin__aoc-text {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.2;
}

.card-vin__aoc-sub {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════
   À L'HONNEUR — BLOC COMMUN
══════════════════════════════════════════════════ */

.fdetail-honneur {
  margin-bottom: 180px;
}

/* Boîte blanche à coins arrondis */
.fdetail-honneur__bloc {
  background: var(--color-white);
  border-radius: 20px;
  padding: var(--space-8);
  padding-bottom: 50px;
  
}

/* card-vin dans un bloc à l'honneur → fond #f7f7f7 */
.fdetail-honneur__bloc .card-vin          { background: #f7f7f7; }

/* Variantes spéciales : restaurer leur propre fond (même spécificité, après) */
.fdetail-honneur__bloc .card-vin--media   { background: transparent; }
.fdetail-honneur__bloc .card-vin--aoc     { background: #db3832; }

/* NB : les cards vin de ce bloc utilisent le composant partagé .cave-card--{couleur}
   (shared.css), qui porte déjà couleur + rollover tokenisés. Les anciennes règles
   .card-vin--{couleur}:hover locales étaient du code mort (classes jamais émises)
   et avaient dérivé des valeurs officielles — supprimées le 2026-07-14.
   .card-vin ne sert plus qu'aux variantes --logo et --media ci-dessus. */

/* Zone des visuels / cards */
.fdetail-honneur__cards {

  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

/* Colonne empilée (logo + media) */
.fdetail-honneur__col-stacked {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}

.fdetail-honneur__col-stacked .card-vin {
  flex: 1;
  min-height: 0;
}

/* Photo / média en pleine hauteur */
.fdetail-honneur__media-tall,
.fdetail-honneur__media-wide,
.fdetail-honneur__media {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.fdetail-honneur__media-tall img,
.fdetail-honneur__media-wide img,
.fdetail-honneur__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Texte bas du bloc (Partenaire + Description) */
.fdetail-honneur__bottom {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--col-gap); /* 24px */
  padding-top: var(--space-6);
  border-top: 0px solid var(--color-border);
}

/* Colonne gauche (nom + sous-titre + RS) : colonnes 3 → 5 */
.fdetail-honneur__bottom > :first-child {
  grid-column: 3 / 6;
}

/* Texte : colonnes 6 → 9 (4 colonnes, gouttière 24px naturelle après la col 5) */
.fdetail-honneur__texte {
  grid-column: 6 / 10;
}

.fdetail-honneur__nom {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: 40px;
  margin-bottom: 0;
}

.fdetail-honneur__sous-titre {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: 40px;
  margin: 0 0 var(--space-3) 0;
}

/* Layout uniquement — recolorage des pictos : voir .rs-links (components.css) */
.fdetail-honneur__rs {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.fdetail-honneur__texte {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-blue);
  line-height: 24px;
}

/* ── VARIANTE 1 : Colonnes libres (1 à 3) ──
   Chaque colonne fait 334px, séparées de 30px, coins arrondis 12px.
   - « Deux petits visuels » = col-stacked : 2 cards au ratio 334:270 (donc
     334×270 chacune) empilées avec 30px → colonne de 570.
   - « Grande image / vidéo » = media-tall 334×570.
   - « Card vin » = cave-card 334×570.
   Flex (et non grid) pour s'adapter au nombre variable de colonnes. */
.fdetail-honneur__cards--v1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.fdetail-honneur__cards--v1 > * {
  flex: 0 0 334px;
  max-width: 334px;
}

.fdetail-honneur__cards--v1 .fdetail-honneur__col-stacked {
  gap: 30px;
}

/* Petits visuels empilés : même ratio → même hauteur, à toutes tailles. */
.fdetail-honneur__cards--v1 .fdetail-honneur__col-stacked .card-vin {
  flex: none;
  aspect-ratio: 334 / 270;
  width: 100%;
  height: auto;
  min-height: 0;
}

.fdetail-honneur__cards--v1 .card-vin--media {
  border-radius: 12px;
  overflow: hidden;
}

@media (min-width: 768px) {
  /* Grande image / vidéo + card vin : 570 pour s'aligner sur les 2 petits
     (dès la tablette, où les colonnes gardent leur largeur de 334px). */
  .fdetail-honneur__cards--v1 .fdetail-honneur__media-tall,
  .fdetail-honneur__cards--v1 > .cave-card {
    height: 570px;
  }
}

/* ── VARIANTE 2 : Grande image + Card vin ── */
.fdetail-honneur__cards--v2 {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* ── VARIANTE 3 : colonne gauche = 2 petits visuels empilés ;
   colonne droite = grand visuel sur 2 colonnes (large), même hauteur. ── */
.fdetail-honneur__cards--v3 {
  display: grid;
  grid-template-columns: 334px minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

.fdetail-honneur__cards--v3 .fdetail-honneur__col-stacked { gap: 30px; }

/* Petits visuels empilés : même ratio que la variante 1. */
.fdetail-honneur__cards--v3 .fdetail-honneur__col-stacked .card-vin {
  flex: none;
  aspect-ratio: 334 / 270;
  width: 100%;
  height: auto;
  min-height: 0;
}

/* Petits visuels : coins arrondis + rognage (le visuel remplit son conteneur
   en `cover` — base `.card-vin--media img`). Fournir des visuels cadrés en 5:4
   (≈ 334×270) pour qu'ils remplissent sans couper. */
.fdetail-honneur__cards--v3 .card-vin--media {
  border-radius: 12px;
  overflow: hidden;
}

/* Grand visuel de droite : remplit ses 2 colonnes (cover), même hauteur que la
   pile des 2 petits visuels de gauche (570px dès la tablette). */
@media (min-width: 768px) {
  .fdetail-honneur__cards--v3 .fdetail-honneur__media-wide {
    height: 570px;
  }
}

/* ══════════════════════════════════════════════════
   ET AUSSI — 1 item ou 2 items
══════════════════════════════════════════════════ */

.fdetail-et-aussi {
  margin-bottom: 180px;
  padding-left:  calc(var(--col) + var(--col-gap));
  padding-right: calc(var(--col) + var(--col-gap));
}

/* Header avec titre + séparateur */
.fdetail-et-aussi__header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
  border-top: 1.5px solid var(--color-border);
  padding-top: var(--space-12);

}

.fdetail-et-aussi__titre {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color: var(--color-blue);
  line-height: var(--leading-normal);
  white-space: nowrap;
}

/* Items (1 ou 2) */
.fdetail-et-aussi__items {
  display: grid;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1.5px solid var(--color-border);
}

.fdetail-et-aussi__items--1 { grid-template-columns: 1fr; }
.fdetail-et-aussi__items--2 { grid-template-columns: 1fr 1fr; }

/* Domaine (item) */
.fdetail-domaine {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.fdetail-domaine__photo {
  width: 144px;
  height: 144px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Item domaine — Figma 2303-10427 / 2303-9581 :
   photo ronde 144 + titre + région (bleu) + ville + pictos RS. Sans picto grappe. */
.fdetail-domaine__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.fdetail-domaine__nom {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: 1.15;
  margin: 0;
}

.fdetail-domaine__lieu {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 20px;
  text-transform: uppercase;
  margin-top: -5px;
}

.fdetail-domaine__region { color: var(--color-blue); }

/* Layout uniquement — recolorage des pictos : voir .rs-links (components.css) */
.fdetail-domaine__rs {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* ══════════════════════════════════════════════════
   RETOUR SUR ÉDITION PRÉCÉDENTE
══════════════════════════════════════════════════ */

.fdetail-retour {
  margin-bottom: 180px;
}

/* ── Nav prev/dots/next ── */
.retour-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.retour-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid #ccc;
  background: #fff;
  color: var(--color-text);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.retour-nav__btn:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.retour-nav__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.retour__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  /* Changement de couleur instantané : les dots ne changent pas de taille et
     une transition de background peut rester « figée » selon le moteur de rendu
     (dot actif bloqué sur l'ancienne couleur). */
}

/* Dot actif = rond plein bleu (même forme que les autres, juste coloré). */
.retour__dot.is-active {
  background: var(--color-blue);
}

/* Bloc gris arrondi — miroir exact de .vins__bloc (HP) */
.fdetail-retour__bloc {
  background: #f7f7f7;
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  padding: 0px;
}



/* Viewport — overflow:hidden (clip + JS slider desktop) */
.fdetail-retour__viewport {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* Track — flex, translateX piloté par JS */
.fdetail-retour__track {
  display: flex;
  gap: var(--space-5);
  transition: transform 360ms cubic-bezier(.2,.9,.2,1);
  cursor: grab;
}

/* Slider inactif (≤ 3 visuels → rien à faire défiler) : classe posée par
   festival-detail.js (disable). Pas de curseur « main ». */
.fdetail-retour__track--static {
  cursor: default;
}

.fdetail-retour__track img {
  -webkit-user-drag: none;
}

/* Photo — 1 photo = 1 slide. Desktop : 3 visibles (2 gaps) dans le viewport.
   Conteneur à ratio fixe, image absolue → toute taille d'upload fonctionne.
   Les clones injectés par le JS (.is-clone) héritent de ces mêmes styles. */
.fdetail-retour__photo {
  flex: 0 0 calc((100% - 2 * var(--space-5)) / 3);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface); /* placeholder pendant le chargement */
  position: relative;
  aspect-ratio: 292 / 490;          /* portrait, identique à card-team */
}

.fdetail-retour__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}


/* ══════════════════════════════════════════════════
   LOCALISATION (C17)
══════════════════════════════════════════════════ */

/* .fdetail-localisation et ses enfants → components.css (partagé avec domaine) */

/* ══════════════════════════════════════════════════
   BANDEAU RÉSERVATION (C18)
══════════════════════════════════════════════════ */

.fdetail-bandeau {
  background: var(--color-blue);
  padding: var(--space-8) 0;
  margin-top: var(--space-20);
}

.fdetail-bandeau__inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.fdetail-bandeau__affiche {
  height: 217px;
  max-width: 326px;
  width: auto;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.fdetail-bandeau__info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fdetail-bandeau__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:var(--color-white);
  margin: 0 0 var(--space-3);
}

.fdetail-bandeau__dates {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-normal);
  text-transform: uppercase;
  color:var(--color-white);
  margin: 0 0 2px;
}

.fdetail-bandeau__nom {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-white);
  line-height: 1.15;
  margin: 0 0 2px;
}

.fdetail-bandeau__ville {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}

/* .fdetail-bandeau__cta → components.css (.bt-blanc__cta) */
.fdetail-bandeau .bt-blanc__cta {
  align-self: flex-start;
  margin-top: var(--space-5);
}

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

@media (min-width: 768px) and (max-width: 1023px) {
  /* .bloc-entete__titre { font-size: 60px } → shared.css */
  .fdetail-hero__ville    { font-size: 28px; }
  .fdetail-hero__citation p { font-size: 34px; line-height: 44px; }

  .fdetail-carousel__track { height: 420px; }

  /* Variante 1 = flex (wrap auto). */
  .fdetail-honneur__cards--v2 { grid-template-columns: 1fr 1fr; }

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

  .fdetail-et-aussi__items--2 { grid-template-columns: 1fr; }
  .fdetail-et-aussi { padding-left: 0; padding-right: 0; }

  /* Retour — tablette : 2 photos visibles (1 gap) */
  .fdetail-retour__photo { flex-basis: calc((100% - var(--space-5)) / 2); }
  .fdetail-retour__bloc  { padding: 40px; }
}

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

@media (max-width: 767px) {

  /* Titre de section resserré sur la fiche festival (uniquement mobile). */
  .single-festival .fdetail-section__titre {
    margin-bottom: var(--space-4);
  }

  /* Contenu à 12px de chaque côté, comme le reste du site (cohérence mobile).
     Intro hero, citation, sections (services, à l'honneur, et aussi, retour,
     localisation). Les blocs blancs internes suivent le bord de leur section. */
  .fdetail-hero__header,
  .fdetail-hero__citation,
  .fdetail-section,
  .fdetail-et-aussi {
    width: calc(100% - 24px);
  }

  .fdetail-hero__dates {
    font-size: 16px;
    }
    .bloc-entete__titre {
      font-size: 40px;
  }

  .fdetail-carousel {
    --carousel-peek: 48px;
  }

  .fdetail-carousel__track {
    height: 360px;
    gap: 12px;
  }

  /* Sections */
  .fdetail-section    { margin-bottom: 80px; }
  .fdetail-hero       { border-radius: 0 0 0px 0px; padding-bottom: var(--space-12); margin-bottom: 80px; }
  .fdetail-honneur    { margin-bottom: 80px; }
  .fdetail-et-aussi   { margin-bottom: 80px; padding-left: 0; padding-right: 0; }
  .fdetail-retour     { margin-bottom: 80px; }

  /* Hero */
  /* .bloc-entete__titre { font-size: 48px } → shared.css */
  .fdetail-hero__ville    { font-size: 16px; }
  .fdetail-hero__citation p { font-size: 28px; line-height: var(--leading-normal);; }

  .fdetail-carousel { border-radius: var(--radius-md); }
  .fdetail-carousel__track { height: 240px; }

  /* Cards grilles — 2 colonnes égales, même règle que evenements.html mobile */
  .fdetail-cards,
  .fdetail-cards--2col,
  .fdetail-cards--3col { grid-template-columns: repeat(2, 1fr); }

  /* Wide card : span 1 → même largeur que les cards normales */
  .fdetail-cards .card-event--wide { grid-column: span 1; }

  /* Photo-wrap wide : même ratio carré que les cards normales */
  .fdetail-cards .card-event--wide .card-event__photo-wrap { aspect-ratio: 1; }

  /* À l'honneur : slider horizontal au swipe sur mobile — même mécanisme CSS
     scroll-snap que le bloc Citation (Rencontres) et les cave-cards partout
     ailleurs (aucun JS). Les slides reprennent la taille standard cave-card
     (78vw plafonnée à 240px). */
  .fdetail-honneur__cards,
  .fdetail-honneur__cards--v1,
  .fdetail-honneur__cards--v2,
  .fdetail-honneur__cards--v3 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    gap: 16px;
    padding-bottom: 16px;
    justify-content: flex-start;
    grid-template-columns: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .fdetail-honneur__cards::-webkit-scrollbar,
  .fdetail-honneur__cards--v1::-webkit-scrollbar,
  .fdetail-honneur__cards--v2::-webkit-scrollbar,
  .fdetail-honneur__cards--v3::-webkit-scrollbar { display: none; }

  .fdetail-honneur__cards > *,
  .fdetail-honneur__cards--v1 > *,
  .fdetail-honneur__cards--v2 > *,
  .fdetail-honneur__cards--v3 > * {
    flex: 0 0 78vw;
    max-width: 240px;
    scroll-snap-align: start;
  }
  /* `.cave-card { max-width:100% }` (plus bas dans ce @media) a la même
     spécificité que `… > *` (l'universel ne compte pas) et gagnerait par ordre
     de source → la card vin resterait à 78vw. On la re-plafonne à 240px avec
     une spécificité suffisante pour matcher les cave-cards partout ailleurs. */
  .fdetail-honneur__cards .cave-card {
    max-width: 240px;
  }

  /* Les images de slide (media-tall / media-wide / media) gardent la règle de
     base height:100% + object-fit:cover : le slider stretch chaque slide à une
     hauteur ferme (= celle de la card vin), l'image la remplit sans vide ni
     troncature. (L'ancien height:auto, hérité de la mise en page colonne où le
     conteneur était en hauteur auto, laissait un vide sous l'image.) */

  .fdetail-hero__citation {
    padding-top: 20px;
    padding-bottom: 30px;
}

  .fdetail-honneur__col-stacked { height: auto; }
  /* Col-stacked (2 visuels) = même hauteur qu'un visuel unique, avec l'espace
     entre les 2 visuels égal au gap entre colonnes (16px). Les cards flexent
     pour remplir la hauteur stretchée du slide ; l'aspect-ratio 334/270 (règle
     de base) sert de base de repli si une colonne ne contient que des
     col-stacked (pas d'ancre de hauteur → pas d'effondrement). */
  .fdetail-honneur__cards--v1 .fdetail-honneur__col-stacked,
  .fdetail-honneur__cards--v3 .fdetail-honneur__col-stacked { gap: 16px; }
  .fdetail-honneur__cards--v1 .fdetail-honneur__col-stacked .card-vin,
  .fdetail-honneur__cards--v3 .fdetail-honneur__col-stacked .card-vin {
    flex: 1 1 auto;
    min-height: 0;
  }
  /* Conteneurs en hauteur auto : le slider les stretch tous à la même hauteur
     ferme (align-items:stretch) → l'image en height:100% s'y ajuste. */
  .fdetail-honneur__media-tall,
  .fdetail-honneur__media-wide,
  .fdetail-honneur__media { height: auto; }

  /* Variante 3 — mobile : on garde le slider horizontal (comme V1/V2), mais la
     slide de la grande image occupe toute la largeur du device (au lieu de 78vw).
     La slide est stretchée à la hauteur du slider → l'image la remplit (cover). */
  .fdetail-honneur__cards--v3 .fdetail-honneur__media-wide {
    flex: 0 0 100%;
    max-width: none;
    scroll-snap-align: center;
  }


  .card-vin { min-height: 280px; }
  .card-vin__bottle-wrap { margin: var(--space-4) auto; }

  /* Bloc blanc : padding interne réduit sur mobile (base 32px trop serré →
     contenu à 56px du bord). 16px = convention des blocs blancs (cave-grille). */
  .fdetail-honneur__bloc {
    padding: var(--space-4);
    padding-bottom: var(--space-8);
  }

  .fdetail-honneur__bottom { grid-template-columns: 1fr; gap: var(--space-6); }
  .fdetail-honneur__bottom > :first-child { grid-column: auto; }
  .fdetail-honneur__texte { grid-column: auto; }

  /* Et aussi */
  .fdetail-et-aussi__items--2 { grid-template-columns: 1fr; }
  .fdetail-domaine__photo { width: 100px; height: 100px; }
  .fdetail-domaine__nom { font-size: 24px;}

  /* Retour sur — mobile : CSS scroll-snap, photos individuelles */
  .fdetail-retour__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fdetail-retour__viewport::-webkit-scrollbar { display: none; }

  .fdetail-retour__track {
    transition: none; /* pas de translateX sur mobile */
    gap: var(--space-4);
  }

  /* Mobile : photos = items directs du flex track → 1 photo par swipe
     (scroll-snap natif, JS slider désactivé sous 768px). */
  .fdetail-retour__photo {
    flex: 0 0 72%;      /* largeur : ~72% du viewport, peek de la photo suivante */
    scroll-snap-align: start;
    /* aspect-ratio: hérité de la règle de base (292/490) */
  }

  .retour-nav { display: none; }

  .fdetail-retour__bloc { padding: var(--space-2); }

  /* Localisation → .fdetail-localisation__carte height en mobile dans components.css */

  /* Bandeau */
  .fdetail-bandeau__inner {
    flex-wrap: wrap;
    gap: var(--space-5);
  }
  .fdetail-bandeau__affiche { height: 100px; max-width: 45% }
  .fdetail-bandeau__dates { font-size: 14px; }
  .fdetail-bandeau__nom { font-size: 20px; }
  .fdetail-bandeau__ville { font-size: 16px; }
  .fdetail-bandeau .bt-blanc__cta { align-self: stretch; justify-content: center; }

  /* taille mobile désormais gérée par le clamp de .play-btn (components.css) */

  .fdetail-et-aussi__titre {
    font-size: 28px;

}
.fdetail-bandeau .bt-blanc__cta {
  margin-top: var(--space-2);
}

.fdetail-carousel__dot {
  width: 8px;
  height: 8px;
}


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


.cave-card {
  max-width: 100%;
}

.cave-card__img {
  width: 100%;
}

} /* ← fin de @media (max-width: 767px) ouvert l.855 (accolade manquante) */


/* ══════════════════════════════════════════════════
   ACCESSIBILITÉ
══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .fdetail-carousel__track { transition: none; }
  .fdetail-retour__photo img { transition: none; }

}