/* ============================================================
   FESTIVAL ARTICLE — Caractère Libre
   Page single-evenement (cas Avignon — accordion programme)
   Figma node : 1267-5620
   ============================================================ */

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

/* ══════════════════════════════════════════════════
   NAV — fond bleu (page festival article)
══════════════════════════════════════════════════ */

.site-header {
  background: var(--color-blue);
}

/* ══════════════════════════════════════════════════
   ESPACEMENT COMMUN ENTRE BLOCS
══════════════════════════════════════════════════ */

.farticle-section {
  margin-bottom: 120px;
}

/* Respiration avant le footer quand il n'y a PAS de bandeau billetterie :
   le dernier bloc (souvent la localisation, forcée à margin-bottom: 0) collerait
   sinon au bas de page. Même valeur que les fiches événement (.oeno-article). */
.festival-article--sans-bandeau > :last-child {
  margin-bottom: 180px;
}

/* ══════════════════════════════════════════════════
   FOND BLEU — HEADER FESTIVAL
══════════════════════════════════════════════════ */

.farticle-fond {
  background: var(--color-blue);
  border-radius: 0 0 0px 0px;
  /* Hauteur fixe : 1156px total - 170px (site-header) = 986px */
  height: 986px;
  margin-bottom: 0;
}

/* Lien retour — blanc sur fond bleu */
.farticle-retour {
  color: var(--color-white);
  
}

/* Intro festival */
.farticle-intro {
  text-align: center;
  padding-top: var(--space-8);
}

.farticle-intro__dates {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #deffda;
  margin: 0 0 var(--space-2);
}

/* Base → .bloc-entete__titre (shared.css) ; overrides ci-dessous */
.farticle-intro__titre {
  color:  var(--color-white);
  margin: 0 0 var(--space-3);
}

.farticle-intro__ville {
  font-family: var(--font-display);
  font-size: 49px;
  font-weight: var(--weight-bold);
  color: var(--color-white);
  opacity: 0.9;
  margin: 0;
  text-transform: capitalize;
}

/* ══════════════════════════════════════════════════
   TITRE DE SECTION
══════════════════════════════════════════════════ */

.farticle-section__titre {
  font-family: var(--font-display);
  font-size: var(--text-3xl);   /* 40px */
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 var(--space-8);
}

/* ══════════════════════════════════════════════════
   ÉVÉNEMENT EN UNE — Bloc 1
══════════════════════════════════════════════════ */

.farticle-en-une {
  width:        100%;
  padding-left:  0;
  padding-right: 0;
  max-width: none;
  margin-left:  0;
  margin-right: 0;
  /* Remonte la carte sur le fond bleu :
     fond bottom = 986px, card top Figma = 501px depuis page top
     => margin-top = 501 - (170+986) = -655px */
  margin-top: -655px;
  position: relative; /* stacking order : carte au-dessus du fond */
  margin-bottom: 120px;
}

/* Carte blanche : photo gauche + info droite + contenu pleine largeur */
/* Cadre calé exactement sur .article-event de domaine-article :
   largeur .container (1180), grille photo fixe + info flexible, align start. */
.farticle-en-une__carte {
  display: grid;
  grid-template-columns: 542px 1fr;
  column-gap: 56px;
  row-gap: var(--space-8);
  align-items: start;
  background: var(--color-white);
  border-radius: 24px;
  padding: 140px 80px;
  width: min(1180px, calc(100% - var(--container-gutter) * 2));
  max-width: none;
  margin-inline: auto;
  position: relative;
}

/* Prix — absolu sur la carte, haut droite, détaché du bloc info */
.farticle-en-une__prix {
  position: absolute;
  top: 56px;
  right: 80px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color: var(--color-blue);
  margin: 0;
  z-index: 1;
}

/* Colonne gauche : empile photo + crédit (offset haut porté par la carte, comme domaine) */
.farticle-en-une__media-col {
  display: flex;
  flex-direction: column;
}

/* Photo gauche — slider (1 à N images) */
.farticle-en-une__media {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
  cursor: grab;
}

.farticle-en-une__slider-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 400ms cubic-bezier(.2,.9,.2,1);
}

.farticle-en-une__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.farticle-en-une__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}

/* Dots — sur la photo, en bas centré (masqués si 1 seule image) */
.farticle-en-une__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}

.farticle-en-une__dots--hidden { display: none; }

.farticle-en-une__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background var(--transition-fast), width var(--transition-fast);
}

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

/* Crédit — sous la photo, sans fond sombre */
.farticle-en-une__credit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}

/* Info droite — meta 40px sous le haut du visuel (comme domaine) */
.farticle-en-une__info {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.farticle-en-une__dates {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.farticle-en-une__nom {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-blue);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

.farticle-en-une__sous-titre {
  /* Aligné sur .article-event__categorie (événement standard) : même police,
     taille et interlignage serré ; sans capitalize. */
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-bold);
  color: var(--color-blue);
  line-height: var(--leading-tight);
  margin: 0 0 20px 0;
}

/* Accroche et description s'étendent sur toute la largeur de la carte */
.farticle-en-une__accroche,
.farticle-en-une__desc {
  grid-column: 1 / -1;
}

/* Accroche grand texte */
.farticle-en-une__accroche {
  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: 0;
    padding-bottom: 50px;
}

/* Description — texte intégral (pas de "lire la suite") */
.farticle-en-une__desc {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 36px;
  max-width: 846px;
  margin: 0 auto var(--space-10);
}

.farticle-en-une__desc p { margin: 0 0 var(--space-4); }
.farticle-en-une__desc p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════
   ACCORDÉON PROGRAMME (C16) — Bloc 2
══════════════════════════════════════════════════ */

.farticle-accordion {
  padding-left:  calc(var(--col) + var(--col-gap));
  padding-right: calc(var(--col) + var(--col-gap));
}

/* Ligne d'accordéon */
.accordion-item {
  border-top: 1.5px solid var(--color-border);
}

.accordion-item:last-child {
  border-bottom: 1.5px solid var(--color-border);
}

/* Bouton titre */
.accordion-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-2xl);     /* 34px */
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  color: var(--color-blue);
  text-align: left;
  gap: var(--space-4);
  transition: opacity var(--transition-fast);
}

.accordion-item__trigger:hover { opacity: 1 }

/* Chevron rotatif */
.accordion-item__chevron {
  flex-shrink: 0;
  color: var(--color-blue);
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.accordion-item.is-open .accordion-item__chevron {
  transform: rotate(180deg);
}

/* Panneau — hauteur animée par JS */
.accordion-item__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.35s cubic-bezier(.2,.9,.2,1);
}

/* Grille domaines dans l'accordéon — 2 colonnes
   Réutilise .fdetail-domaine de festival-detail.css
   → import via components.css ou redéclaration minimale ici */
.farticle-accordion__domaines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-20) var(--space-6);
  padding: var(--space-8) 0;
}

/* Wysiwyg type B */
.farticle-accordion__wysiwyg {
  padding: var(--space-6) 0 var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text);
  line-height: 1.7;
  max-width: 700px;
}

.farticle-accordion__wysiwyg p { margin: 0; }

/* ── Styles .fdetail-domaine (repris depuis festival-detail.css) ── */

.fdetail-domaine {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

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

/* Item domaine (.fdetail-domaine__info, __nom, __lieu, __region, __rs) :
   styles portés par festival-detail.css (chargé après cette feuille) —
   Figma 2303-10427 : titre + région + ville + pictos RS, sans picto grappe */

/* ══════════════════════════════════════════════════
   LOCALISATION (C17) — Bloc 3
══════════════════════════════════════════════════ */

.farticle-localisation {
  margin-bottom: 0;
}

.farticle-localisation__carte {
  width: 100%;
  height: 440px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-6);
  border: 1.5px solid var(--color-border);
  position: relative;
  z-index: 0;
  background: var(--color-surface);
}

.farticle-localisation__carte iframe,
.farticle-localisation__carte .leaflet-container {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.farticle-localisation__adresse {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #36344C;
  margin: 0;
}

.farticle-localisation__adresse-picto {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

.farticle-localisation__adresse strong {
  font-weight: 400;
}

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

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

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

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

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

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

.farticle-bandeau__dates {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0 0 2px;
}

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

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

.farticle-bandeau__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-blue);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  align-self: flex-start;
  margin-top: var(--space-5);
  transition: opacity var(--transition-fast);
}

.farticle-bandeau__cta:hover { opacity: 0.85; }

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

@media (min-width: 768px) and (max-width: 1023px) {
  /* Fond : hauteur auto sur tablette */
  .farticle-fond { height: auto; padding-bottom: 400px; margin-bottom: 0; }
  .farticle-en-une { margin-top: -350px; }

  /* .bloc-entete__titre { font-size: 60px } → shared.css */
  .farticle-intro__ville  { font-size: 36px; }

  .farticle-en-une__carte { grid-template-columns: 1fr; padding: 40px; }
  .farticle-en-une__media-col { padding-top: 0; }
  .farticle-en-une__info { padding-top: 0; }
  .farticle-en-une__nom   { font-size: 38px; }
  .farticle-en-une__sous-titre { font-size: 30px; }
  .farticle-en-une__accroche { font-size: 26px; }

  .accordion-item__trigger { font-size: 22px; }
  .farticle-accordion__domaines { grid-template-columns: repeat(2, 1fr); }

  .fdetail-domaine__nom { font-size: 24px; }
}

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

@media (max-width: 767px) {
  .farticle-section { margin-bottom: 80px; }

  /* Fond : hauteur auto sur mobile, remplace la hauteur fixe desktop.
     Le bleu descend jusqu'aux ~3/4 du visuel : padding-bottom augmenté de
     ~200px ET la carte remontée d'autant (elle ne bouge donc pas, seul le
     bleu descend derrière le visuel). */
  .farticle-fond {
    height: auto;
    border-radius: 0 0 0px 0px;
    padding-bottom: 300px;
    margin-bottom: 0;
  }
  /* Carte : remonte pour chevaucher le fond bleu (compense le padding). */
  .farticle-en-une { margin-top: -320px; }

  .farticle-intro__titre  { font-size: 44px; }
  .farticle-intro__ville  { font-size: 26px; }

  /* En une */
  .farticle-en-une { padding-left: 10px; padding-right: 10px; }
  .farticle-en-une__carte {
    grid-template-columns: 1fr;
    padding: var(--space-4);
    row-gap: var(--space-2);
    column-gap: 0;
    margin-top: 20px;
    width: 100%;   /* annule le min() desktop : la carte remplit la section (padding 10px) */
  }
  .bt-bleu__cta { padding: 0 20px; }

  .farticle-en-une__prix       { position: static; margin: 0; font-size: 20px; text-align: right; }
  .farticle-en-une__media-col  { padding-top: 0; }
  .farticle-en-une__info       { padding-top: var(--space-2); }
  .farticle-en-une__nom     { font-size: 30px; }
  .farticle-en-une__sous-titre { font-size: 22px; }
  .farticle-en-une__accroche   {         font-size: 28px;
    margin-top: var(--space-10); }
  .farticle-en-une__desc       { font-size: 14px; line-height: 21px; }

.farticle-en-une__credit {font-size: 10px;}

  /* Accordéon */
  .farticle-accordion { padding-left: 0; padding-right: 0; }
  .accordion-item__trigger { font-size: 18px; padding: var(--space-4) 0; }
  .farticle-accordion__domaines {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .fdetail-domaine__photo { width: 80px; height: 80px; }
  .fdetail-domaine__nom   { font-size: 22px; }

  /* Localisation */
  .farticle-localisation__carte { height: 300px; }

  .farticle-localisation__adresse {
    font-size: 14px;
   }

  /* Bandeau */
  .farticle-bandeau__inner { flex-wrap: wrap; gap: var(--space-5); }
  .farticle-bandeau__affiche { height: 100px; max-width: 70px; }
  .farticle-bandeau__nom  { font-size: 24px; }
  .farticle-bandeau__ville { font-size: 20px; }
  .farticle-bandeau__cta  { align-self: stretch; justify-content: center; }

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

/* ══════════════════════════════════════════════════
   ACCESSIBILITÉ — Réduction du mouvement
══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .accordion-item__panel   { transition: none; }
  .accordion-item__chevron { transition: none; }
}


/* ══════════════════════════════════════════════════
   AJUSTEMENT THÈME WORDPRESS
══════════════════════════════════════════════════ */

/* Sous-titre de l'événement : même traitement que la fiche œnotourisme
   (.article-event__subtitle) — texte courant, pas le gros display bleu
   réservé à la catégorie. */
.farticle-en-une__soustitre-texte {
  font-family: var(--font-body);
  font-size:   16px;
  font-weight: var(--weight-regular);
  color:       var(--color-text);
  line-height: var(--leading-relaxed);
  margin-top:  var(--space-2);
  margin-bottom: var(--space-6); /* espace entre le sous-titre et le bouton */
}

@media (max-width: 767px) {
  .farticle-en-une__soustitre-texte { font-size: 14px; }
}