/* ============================================================
   annonce.css — fenêtre d'annonce événementielle (accueil)
   Prend en charge une seule annonce ou un carrousel de plusieurs
   ============================================================ */

.vi-annonce {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vi-annonce[hidden] { display: none; }

html.vi-annonce-ouverte { overflow: hidden; }

/* Voile sombre */
.vi-annonce__voile {
  position: absolute;
  inset: 0;
  background: rgba(38, 30, 20, 0.72);
  opacity: 0;
  transition: opacity 0.4s ease;
  cursor: pointer;
}
.vi-annonce.est-visible .vi-annonce__voile { opacity: 1; }

/* Fenêtre : conteneur général (les colonnes image/texte sont maintenant
   portées par chaque .vi-annonce__slide, pas par la fenêtre elle-même,
   pour permettre plusieurs annonces dans la même boîte) */
.vi-annonce__fenetre {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #f7f5f0;
  color: #5a4a36;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vi-annonce.est-visible .vi-annonce__fenetre {
  opacity: 1;
  transform: none;
}
.vi-annonce.se-ferme .vi-annonce__fenetre {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
}

/* Diapositives : une seule visible à la fois */
.vi-annonce__slides {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.vi-annonce__slide {
  display: none;
  grid-template-columns: 5fr 6fr;
  height: 100%;
}
.vi-annonce__slide.est-active { display: grid; }
.vi-annonce__slide:not(:has(.vi-annonce__visuel)) {
  grid-template-columns: 1fr;
}

/* Filigrane olivier dans le coin de la partie texte */
.vi-annonce__contenu::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 260px;
  height: 260px;
  background: url("images/olivier2.png") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}

/* Bouton fermer : volontairement grand et bien visible, pour rester
   facile à repérer et à cliquer même pour un visiteur peu à l'aise
   avec internet. */
.vi-annonce__fermer {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 56px;
  height: 56px;
  border: 2px solid rgba(90, 74, 54, 0.15);
  border-radius: 50%;
  background: rgba(247, 245, 240, 0.95);
  color: #5a4a36;
  font: 300 40px/1 "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, color 0.2s;
}
.vi-annonce__fermer:hover,
.vi-annonce__fermer:focus-visible {
  background: #b68b52;
  color: #f7f5f0;
  outline: none;
}
.vi-annonce__fermer:focus-visible { box-shadow: 0 0 0 3px rgba(182, 139, 82, 0.45); }
.vi-annonce__fermer-croix {
  display: block;
  transform: translateY(-3px);
}

/* Barre de navigation entre les annonces : "Précédente" et "Suivante"
   en toutes lettres de part et d'autre des points, pour que ce soit
   immédiatement compréhensible, y compris pour un visiteur peu
   habitué à internet. Affichée uniquement s'il y a plusieurs annonces. */
.vi-annonce__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 16px;
  background: #f7f5f0;
  border-top: 1px solid rgba(90, 74, 54, 0.1);
}
.vi-annonce__nav-texte {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border: 1px solid #b68b52;
  border-radius: 20px;
  background: transparent;
  color: #5a4a36;
  font: 500 14px/1 "Poppins", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.vi-annonce__nav-texte span { font-size: 18px; line-height: 1; }
.vi-annonce__nav-texte:hover,
.vi-annonce__nav-texte:focus-visible {
  background: #b68b52;
  color: #f7f5f0;
  outline: none;
}

/* Points de navigation */
.vi-annonce__points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.vi-annonce__point {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(90, 74, 54, 0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.vi-annonce__point:hover,
.vi-annonce__point:focus-visible {
  background: rgba(90, 74, 54, 0.5);
  outline: none;
}
.vi-annonce__point.est-actif {
  background: #b68b52;
  transform: scale(1.2);
}

/* Visuel */
.vi-annonce__visuel {
  margin: 0;
  min-height: 320px;
  background: #e9e3d6;
}
.vi-annonce__visuel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Variante PDF : le document s'affiche dans le même emplacement que
   l'image, avec un lien de secours toujours visible (l'aperçu intégré
   n'est pas garanti sur tous les mobiles). */
.vi-annonce__visuel--pdf {
  position: relative;
  background: #d8d2c2;
}
.vi-annonce__visuel--pdf iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: 0;
  background: #fff;
}
.vi-annonce__visuel-ouvrir {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 16px;
  background: rgba(90, 74, 54, 0.88);
  color: #f7f5f0;
  text-decoration: none;
  font: 500 13px/1 "Poppins", sans-serif;
  letter-spacing: 0.02em;
  transition: background 0.2s;
}
.vi-annonce__visuel-ouvrir:hover,
.vi-annonce__visuel-ouvrir:focus-visible {
  background: #b68b52;
  outline: none;
}

/* Contenu */
.vi-annonce__contenu {
  position: relative;
  padding: 52px 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}

.vi-annonce__sous-titre {
  margin: 0;
  font: 400 15px/1.4 "Poppins", sans-serif;
  letter-spacing: 0.04em;
  color: #b68b52;
}

.vi-annonce__titre {
  margin: 0 0 6px;
  font: 500 clamp(28px, 3.4vw, 40px)/1.12 "Cormorant Garamond", Georgia, serif;
  color: #5a4a36;
}

/* La date : écrite à la main, c'est l'élément qui accroche */
.vi-annonce__date {
  margin: 4px 0 0;
  font: 400 clamp(22px, 2.4vw, 27px)/1.2 "Caveat", cursive;
  color: #b68b52;
}

.vi-annonce__lieu {
  margin: 0;
  font: italic 400 19px/1.5 "Cormorant Garamond", Georgia, serif;
  color: #7a6a52;
}

.vi-annonce__texte {
  margin: 14px 0 0;
  font: 400 19px/1.65 "Cormorant Garamond", Georgia, serif;
  color: #5a4a36;
  max-width: 44ch;
}
.vi-annonce__texte strong { color: #b68b52; font-weight: 600; }

.vi-annonce__lien {
  align-self: flex-start;
  margin-top: 24px;
  padding: 11px 22px;
  border: 1px solid #b68b52;
  color: #5a4a36;
  background: transparent;
  text-decoration: none;
  font: 500 14px/1 "Poppins", sans-serif;
  letter-spacing: 0.03em;
  transition: background 0.2s, color 0.2s;
}
.vi-annonce__lien:hover,
.vi-annonce__lien:focus-visible {
  background: #b68b52;
  color: #f7f5f0;
  outline: none;
}

/* Minuteur : fine ligne bronze qui se retire en 60 s (porte sur la
   fenêtre entière, pas sur chaque annonce du carrousel) */
.vi-annonce__minuteur {
  flex: 0 0 auto;
  height: 3px;
  background: rgba(182, 139, 82, 0.18);
}
.vi-annonce__minuteur-barre {
  display: block;
  height: 100%;
  background: #b68b52;
  transform-origin: left center;
  transform: scaleX(1);
  transition-property: transform;
  transition-timing-function: linear;
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .vi-annonce { padding: 14px; }
  .vi-annonce__fenetre {
    max-height: calc(100vh - 28px);
  }
  .vi-annonce__slides { overflow-y: auto; }
  .vi-annonce__slide { grid-template-columns: 1fr; }
  .vi-annonce__visuel { min-height: 0; aspect-ratio: 16 / 9; }
  .vi-annonce__visuel--pdf iframe { min-height: 0; }
  .vi-annonce__contenu { padding: 26px 24px 28px; }
  .vi-annonce__contenu::before { width: 180px; height: 180px; }
  .vi-annonce__navigation { gap: 10px; padding: 8px 10px; }
  .vi-annonce__nav-texte { padding: 6px 10px; font-size: 13px; }
  .vi-annonce__minuteur { position: sticky; bottom: 0; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .vi-annonce__voile,
  .vi-annonce__fenetre { transition: none; transform: none; }
}