/* ============================================================
   DOMAINE-ARTICLE — Caractère Libre
   Page fiche évènement d'un domaine viticole
   Charger après domaine.css
   ============================================================ */




/* ══════════════════════════════════════════════════
   ARTICLE ÉVÈNEMENT — bloc blanc principal
   Contient : photo + infos · citation · corps
══════════════════════════════════════════════════ */

.article-event {
  position:      relative;
  background:    var(--color-white);
  border-radius: 24px;
  padding:       140px 80px 140px 80px; /* visuel à 140px du haut de la card */
  margin-top:    var(--space-8);
}


/* ── Bouton fermer (croix) — coin supérieur droit ── */

.article-event__close {
  position:      absolute;
  top:           40px;
  right:         40px;
  width:         80px;
  height:        80px;
  border-radius: 50%;
  background:    rgba(54, 52, 76, 0.05);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--color-text);
  text-decoration: none;
  transition:    background var(--transition-fast);
  flex-shrink:   0;
}

.article-event__close:hover {
  background: rgba(54, 52, 76, 0.12);
}


/* ══════════════════════════════════════════════════
   GRILLE — photo (gauche) + infos (droite)
══════════════════════════════════════════════════ */

.article-event__grid {
  display:               grid;
  grid-template-columns: 542px 1fr;
  gap:                   56px;
  align-items:           start;
}


/* ── Colonne photo ── */

.article-event__photo-wrap {
  border-radius: 12px;
  overflow:      hidden;
  line-height:   0; /* supprime l'espace inline sous l'image */
}

.article-event__photo {
  width:        100%;
  height:       auto;
  display:      block;
  object-fit:   cover;
  aspect-ratio: 1 / 1;
}

/* Slider photos (image à la une + galerie) — viewport = .photo-wrap. */
.article-event__track {
  display:    flex;
  transition: transform 0.35s ease;
}
.article-event__slide {
  flex:      0 0 100%;
  min-width: 0;
}
/* Dots identiques au slider « En une » (festival-article) : superposés en
   bas-centre de l'image, blanc translucide, actif = pilule blanche. */
.article-event__slider { position: relative; }
.article-event__dots {
  position:  absolute;
  bottom:    14px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       8px;
  z-index:   2;
}
.article-event__dots--hidden { display: none; }
.article-event__dot {
  width:         10px;
  height:        10px;
  padding:       0;
  border:        none;
  border-radius: 50%;
  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). */
.article-event__dot.is-active {
  width:         38px;
  height:        10px;
  border-radius: 999px;
  background:    var(--color-white);
}

.article-event__credit {
  font-family: var(--font-body);
  font-size:   12px;
  color:       var(--color-text-secondary);
  margin-top:  var(--space-3);
  line-height: var(--leading-normal);
}


/* ── Colonne infos ── */

.article-event__info {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  padding-top:    40px; /* meta 40px plus bas que le haut du visuel */
}

/* Date + heure */
.article-event__datetime {
  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 10px;   /* espace entre la date/heure et le nom */
}

/* Nom de l'intervenant */
.article-event__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;
}

/* Catégorie + titre de l'événement */
.article-event__categorie {
  font-family:    var(--font-display);
  font-size:      40px;
  font-weight:    var(--weight-bold);
  color:          var(--color-blue);
  line-height:    var(--leading-tight);
  margin:         0;
}

/* Sous-titre / conversation */
.article-event__subtitle {
  font-family: var(--font-body);
  font-size:   16px;
  font-weight: var(--weight-regular);
  color:       var(--color-text);
  line-height: var(--leading-relaxed);
  margin:      0;
}

/* Ligne CTA : bouton Réserver + dropdown */
.article-event__cta {
  display:       inline-flex;
  align-self:    flex-start;   /* pas pleine largeur */
  align-items:   center;
  margin-top:    var(--space-5);
}

/* Bouton Réserver : lien unique `.bt-bleu__cta` (components.css) dans
   `.article-event__cta`. Le dropdown multi-liens a été supprimé (2026-07-12). */

/* Prix — coin supérieur droit de la card */
.article-event__prix {
  position:       absolute;
  top:            56px;
  right:          80px;
  font-family:    var(--font-display);
  font-size:      34px;
  font-weight:    var(--weight-black);
  color:          var(--color-blue);
  line-height:    var(--leading-tight);
  margin:         0;
  letter-spacing: var(--tracking-wide);
}

/* Bouton Réserver — étend btn-lire--filled */
.article-event__btn-reserver {
  gap: var(--space-3);
  text-decoration: none;
}

.article-event__btn-reserver img {
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════
   CITATION — blockquote centré Big Shoulders 49px
══════════════════════════════════════════════════ */

.article-event__citation {
  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); /* ≈ 779px */
  margin:      var(--space-16) auto 0;
  padding:     0;
  padding-bottom: 50px;
}


/* ══════════════════════════════════════════════════
   CORPS DE L'ARTICLE — texte éditorial
══════════════════════════════════════════════════ */

.article-event__corps {
  max-width:    var(--col-8); /* ≈ 779px — col-lecture */
  margin:       var(--space-10) auto 0;
}

.article-event__corps p,
.article-event__corps li {
  font-family: var(--font-body);
  font-size:   20px;
  line-height: 36px;
  color:       var(--color-text);
}
.article-event__corps p { margin: 0; }

.article-event__corps p + p {
  margin-top: var(--space-6);
}

/* Lien dans le corps (classe dédiée + tout <a> du texte libre) */
.article-event__lien,
.article-event__corps a {
  color:           var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:      opacity var(--transition-fast);
}

.article-event__lien:hover,
.article-event__corps a:hover { opacity: 0.7; }


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

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

  .article-event {
    padding: 140px 48px 64px; /* visuel à 140px du haut, prix au-dessus */
  }

  /* Grille : colonne photo en largeur auto, non-fixée */
  .article-event__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .article-event__datetime,
  .article-event__nom    { font-size: 38px; }
  .article-event__categorie { font-size: 30px; }

  .article-event__citation { font-size: 34px; }

  .article-event__corps p,
  .article-event__corps li  { font-size: 18px; line-height: 30px; }
}


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

@media (max-width: 767px) {

  .article-event {
    /* Carte flottante à 12px de chaque côté (comme listing + histoire) ;
       16px de padding latéral → contenu à 12 + 16 = 28px */
    width: calc(100% - 24px);
    padding: var(--space-12) var(--space-4) var(--space-10);

  }

  /* Grille : colonne unique */
  .article-event__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .article-event__info {
    padding-top: 0;
    gap: var(--space-4);
  }

  .article-event__datetime,
  .article-event__nom    { font-size: 30px; }
  .article-event__categorie { font-size: 22px; }
  .article-event__subtitle  { font-size: 14px; }
  .article-event__prix      { font-size: 20px; top: var(--space-5); right: var(--space-5); }

  .article-event__credit {font-size: 10px}

  .article-event__citation {
    font-size:  28px;
    margin-top: var(--space-10);
  
  }

  .article-event__corps {
    margin-top: var(--space-8);
  }

  .article-event__cta {
     margin-top: var(--space-0);
     margin-bottom: var(--space-8);
}

  .article-event__corps p,
  .article-event__corps li { font-size: 14px; line-height: 21px; }
}