/* =========================================================
   PAGE GALERIE — Pleine largeur, médias réduits, modal plein écran
   ========================================================= */

.fiadanana-gallery-page {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 30px 60px 80px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   FILTRE — Tous / Images / Vidéos (centré, au-dessus du retour)
   ========================================================= */

.fiadanana-gallery-filter {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;

  margin: 0 0 26px 0 !important;
}

/* Boutons non actifs : fond et bord vert foncé */
.fiadanana-gallery-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 26px !important;
  min-height: 42px !important;

  border: 1.5px solid var(--fiadanana-vert-fonce) !important;
  border-radius: 5px !important;
  background: var(--fiadanana-vert-fonce) !important;
  color: #ffffff !important;
  box-shadow: none !important;

  font-family: var(--font-main) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease !important;
}

.fiadanana-gallery-filter-btn:hover,
.fiadanana-gallery-filter-btn:focus-visible {
  background: var(--fiadanana-vert) !important;
  border-color: var(--fiadanana-vert) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Bouton actif */
.fiadanana-gallery-filter-btn.is-active,
.fiadanana-gallery-filter-btn.is-active:hover,
.fiadanana-gallery-filter-btn.is-active:focus-visible {
  background: var(--fiadanana-vert-clair) !important;
  border-color: var(--fiadanana-vert-clair) !important;
  color: #ffffff !important;
}

/* =========================================================
   BOUTON RETOUR
   Texte non gras, noir ; vert clair au survol
   L'icône (flèche retournée) glisse vers la gauche au survol
   Aligné sur le bord gauche de la grille (centrée)
   ========================================================= */

.fiadanana-gallery-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 0 30px calc(var(--fiadanana-gallery-shrink) * var(--fiadanana-gallery-cols) / 2) !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  color: #000000 !important;

  font-family: var(--font-main) !important;
  font-size: 1rem !important;
  /* font-weight: 0 n'est pas une valeur CSS valide (minimum 1) :
     on utilise la graisse normale. Mettre 300 ou 100 si la police le permet. */
  font-weight: var(--fw-regular) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: none !important;

  transition: color 0.25s ease !important;
}

.fiadanana-gallery-back:hover,
.fiadanana-gallery-back:focus-visible {
  color: var(--fiadanana-vert-clair) !important;
  outline: none !important;
}

.fiadanana-gallery-back-label {
  font-weight: inherit !important;
  color: inherit !important;
}

.fiadanana-gallery-back-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: inherit !important;
  transform: scaleX(-1) !important;
  transition: transform 0.3s ease !important;
}

.fiadanana-gallery-back-icon svg,
.fiadanana-gallery-back-icon .fiadanana-icon-svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  color: inherit !important;
  stroke: none !important;
}

/* translateX AVANT scaleX(-1) : le glissement se fait vers la GAUCHE */
.fiadanana-gallery-back:hover .fiadanana-gallery-back-icon,
.fiadanana-gallery-back:focus-visible .fiadanana-gallery-back-icon {
  transform: translateX(-6px) scaleX(-1) !important;
}

/* =========================================================
   GRILLE — colonnes de (largeur naturelle − 50px), gap 15px,
   grille centrée : le vide est sur les bords, pas entre les médias
   ========================================================= */

.fiadanana-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(
    var(--fiadanana-gallery-cols),
    calc(
      (100% - (var(--fiadanana-gallery-cols) - 1) * var(--fiadanana-gallery-gap)) /
        var(--fiadanana-gallery-cols) - var(--fiadanana-gallery-shrink)
    )
  ) !important;
  justify-content: center !important;
  gap: var(--fiadanana-gallery-gap) !important;
  width: 100% !important;
}

.fiadanana-gallery-item {
  margin: 0 !important;
}

.fiadanana-gallery-item.is-hidden {
  display: none !important;
}

/* Vignette carrée : largeur de la colonne, hauteur identique */
.fiadanana-gallery-item-image {
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;

  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 6px !important;
  background: #eee !important;
  cursor: pointer !important;
}

.fiadanana-gallery-item-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.fiadanana-gallery-item:hover .fiadanana-gallery-item-image img {
  transform: scale(1.06) !important;
}

.fiadanana-gallery-empty {
  display: block !important;
  margin: 40px 0 0 !important;
  text-align: center !important;
  font-family: var(--font-main) !important;
  font-size: 1rem !important;
  color: #666666 !important;
}

.fiadanana-gallery-empty[hidden] {
  display: none !important;
}

/* =========================================================
   IMAGES — Overlay au survol (titre + bouton en "zoom-in")
   ========================================================= */

.fiadanana-gallery-item-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;

  padding: 16px !important;
  box-sizing: border-box !important;
  text-align: center !important;

  background: rgba(0, 0, 0, 0.55) !important;

  opacity: 0 !important;
  visibility: hidden !important;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease !important;

  z-index: 2 !important;
}

.fiadanana-gallery-item:hover .fiadanana-gallery-item-overlay,
.fiadanana-gallery-item-overlay:focus-within {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Bouton "Voir l'image" — radius 5px, scale réduit puis 1 au survol */
.fiadanana-gallery-item-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 10px 20px !important;
  min-height: 40px !important;

  border: none !important;
  border-radius: 5px !important;
  background: var(--fiadanana-vert-clair) !important;
  color: #ffffff !important;
  box-shadow: none !important;

  font-family: var(--font-main) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;

  transform: scale(0.5) !important;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.fiadanana-gallery-item:hover .fiadanana-gallery-item-btn,
.fiadanana-gallery-item-overlay:focus-within .fiadanana-gallery-item-btn {
  transform: scale(1) !important;
}

.fiadanana-gallery-item-btn:hover,
.fiadanana-gallery-item-btn:focus-visible {
  background: var(--fiadanana-vert-clair) !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Titre de l'activité — scale réduit puis 1 au survol, 3 lignes maximum */
.fiadanana-gallery-item-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-width: 100% !important;
  margin: 0 !important;
  word-break: break-word !important;

  font-family: var(--font-title) !important;
  font-size: 1.15rem !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
  text-align: center !important;

  transform: scale(0.5) !important;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s !important;
}

.fiadanana-gallery-item:hover .fiadanana-gallery-item-title,
.fiadanana-gallery-item-overlay:focus-within .fiadanana-gallery-item-title {
  transform: scale(1) !important;
}

.fiadanana-gallery-item-title-first {
  color: var(--fiadanana-vert-clair) !important;
}

/* =========================================================
   VIDÉOS — bouton play rond central + pulsation blanche
   ========================================================= */

.fiadanana-gallery-video-btn {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  box-shadow: none !important;
  cursor: pointer !important;

  transition: background-color 0.3s ease !important;
}

.fiadanana-gallery-video-btn:hover,
.fiadanana-gallery-video-btn:focus-visible {
  background: rgba(0, 0, 0, 0.38) !important;
  outline: none !important;
  box-shadow: none !important;
}

.fiadanana-gallery-play {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 64px !important;
  height: 64px !important;

  border-radius: 50% !important;
  background: var(--fiadanana-vert-clair) !important;
  color: #ffffff !important;
}

.fiadanana-gallery-play svg {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin-left: 3px !important;
  fill: currentColor !important;
}

/* Deux anneaux blancs qui pulsent en boucle (décalés) */
.fiadanana-gallery-play::before,
.fiadanana-gallery-play::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  opacity: 0;
  pointer-events: none !important;
  animation: fiadanana-gallery-pulse 2s ease-out infinite !important;
}

.fiadanana-gallery-play::after {
  animation-delay: 1s !important;
}

@keyframes fiadanana-gallery-pulse {
  0% {
    transform: scale(1);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fiadanana-gallery-play::before,
  .fiadanana-gallery-play::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* Fond dégradé : taille FIXE, simple fondu */
.fiadanana-gallery-item--video .fiadanana-gallery-item-image::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 50% !important;
  z-index: 2 !important;

  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
}

.fiadanana-gallery-item--video:hover .fiadanana-gallery-item-image::after {
  opacity: 1 !important;
}

.fiadanana-gallery-item--video .fiadanana-gallery-item-image:has(.fiadanana-gallery-video-btn:focus-visible)::after {
  opacity: 1 !important;
}

/* Titre de la vidéo — sans fond, seul le texte s'agrandit */
.fiadanana-gallery-video-title {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 14px !important;
  z-index: 3 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  margin: 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
  background: transparent !important;

  font-family: var(--font-title) !important;
  font-size: 1.05rem !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
  color: #ffffff !important;
  text-align: center !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;

  opacity: 0 !important;
  transform: scale(0.5) !important;
  transform-origin: bottom center !important;
  pointer-events: none !important;

  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.fiadanana-gallery-item--video:hover .fiadanana-gallery-video-title,
.fiadanana-gallery-video-btn:focus-visible ~ .fiadanana-gallery-video-title {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* =========================================================
   MODAL — Image ou vidéo en grand
  • Déplacé dans <body> par page-gallery.js → au-dessus du header.
   • ⭐ PLEINE HAUTEUR : le panneau occupe toute la hauteur de la
     fenêtre (largeur inchangée).
   • ⭐ Le conteneur image/vidéo prend tout l'espace restant au-dessus
     du titre ; l'image a une hauteur de 100 % de ce conteneur et une
     largeur automatique.
   ========================================================= */

body.fiadanana-gallery-modal-open {
  overflow: hidden !important;
}

.fiadanana-gallery-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  z-index: 2147483647 !important;

  display: none !important;
  align-items: stretch !important;
  justify-content: center !important;

  padding: 0 !important;
  box-sizing: border-box !important;

  pointer-events: none !important;
}

.fiadanana-gallery-modal.is-open {
  display: flex !important;
}

.fiadanana-gallery-modal-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.9) !important;
  pointer-events: auto !important;
}

/* Panneau — pleine hauteur, même largeur qu'avant */
.fiadanana-gallery-modal-panel {
  position: relative !important;
  z-index: 1 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;

  width: min(95vw, 1200px) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  overflow: hidden !important;

  padding: 18px !important;

  background: #ffffff !important;
  border-radius: 0 !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5) !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* ⭐ Bouton fermer — AUCUNE ombre, quel que soit l'état
   (Kadence ajoute une box-shadow au survol des <button>) */
.fiadanana-gallery-modal-close,
.fiadanana-gallery-modal-close:hover,
.fiadanana-gallery-modal-close:focus,
.fiadanana-gallery-modal-close:focus-visible,
.fiadanana-gallery-modal-close:active {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

.fiadanana-gallery-modal-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 5 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;

  border: none !important;
  border-radius: 50% !important;
  /* petit rond blanc : le "×" reste lisible sur l'image (mettre transparent pour l'enlever) */
  background: rgba(255, 255, 255, 0.9) !important;
  color: #000000 !important;
  font-size: 1.8rem !important;
  line-height: 1 !important;
  cursor: pointer !important;

  transition: color 0.25s ease !important;
}

.fiadanana-gallery-modal-close:hover,
.fiadanana-gallery-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--fiadanana-vert-clair) !important;
  outline: none !important;
}

/* ⭐ Conteneur image : prend tout l'espace vertical disponible */
.fiadanana-gallery-modal-image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;

  overflow: hidden !important;
  border-radius: 8px !important;
  background: #f7f7f7 !important;
}

/* ⭐ Image : hauteur = celle du conteneur, largeur auto */
.fiadanana-gallery-modal-image img {
  display: block !important;
  height: 100% !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ⭐ Conteneur vidéo : même principe, masqué par défaut */
.fiadanana-gallery-modal-video {
  display: none !important;

  flex: 1 1 0 !important;
  min-height: 0 !important;
  width: 100% !important;

  overflow: hidden !important;
  border-radius: 8px !important;
  background: #000000 !important;
}

.fiadanana-gallery-modal-video iframe,
.fiadanana-gallery-modal-video video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: #000000 !important;
}

.fiadanana-gallery-modal.is-video .fiadanana-gallery-modal-video {
  display: block !important;
}

.fiadanana-gallery-modal.is-video .fiadanana-gallery-modal-image {
  display: none !important;
}

/* Titre — hauteur naturelle, sous le conteneur */
.fiadanana-gallery-modal-title {
  flex: 0 0 auto !important;

  font-family: var(--font-title) !important;
  font-size: 1.2rem !important;
  font-weight: var(--fw-bold) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.3px !important;
  color: #000000 !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* =========================================================
   RESPONSIVE — le gap reste à 15px, seul le nombre de colonnes change
   ========================================================= */

@media (max-width: 900px) {
  .fiadanana-gallery-page {
    padding: 24px 20px 60px !important;
  }

  .fiadanana-gallery-modal-panel {
    padding: 14px !important;
    gap: 12px !important;
  }

  .fiadanana-gallery-modal-title {
    font-size: 1.05rem !important;
  }
}

@media (max-width: 600px) {
  .fiadanana-gallery-page {
    padding: 20px 20px 60px !important;
  }

  .fiadanana-gallery-modal-panel {
    width: 100vw !important;
    padding: 12px !important;
  }

  .fiadanana-gallery-filter {
    margin-bottom: 20px !important;
  }

  .fiadanana-gallery-filter-btn {
    padding: 8px 20px !important;
    min-height: 38px !important;
    font-size: 0.9rem !important;
  }

  .fiadanana-gallery-item-title,
  .fiadanana-gallery-video-title {
    font-size: 1rem !important;
  }

  .fiadanana-gallery-item-btn {
    padding: 8px 16px !important;
    min-height: 36px !important;
    font-size: 0.82rem !important;
  }

  .fiadanana-gallery-back {
    font-size: 0.95rem !important;
  }

  .fiadanana-gallery-back-icon {
    width: 18px !important;
    height: 18px !important;
  }
}