/* fallback: old inline sources => keep neutral spacing */
.presta-modal-source{
  display:none;
}

/* If you ever want cards to be clickable without <a> */
.presta-card-link{
  display:block;
  color: inherit;
  text-decoration:none;
}

/* --- PRESTA THUMBS (cards) : pro, stable, “sexy” --- */
/* Objectif : une card image stable (ratio), overlay lisible, aucun layout qui bouge */

/* On annule le padding de .card pour les cards presta, sans toucher au reste du site */
.card .presta-thumb{
  margin: -18px;
  border-radius: 16px;
  overflow: hidden;
}

.presta-thumb{
  position: relative;
  background: #000;
  aspect-ratio: 16 / 10;
}

.presta-thumb__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.01); /* évite micro-liserés */
}

/* Overlay EXISTANT (on ne change pas le style de base) */
.presta-thumb__overlay{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 16px 14px;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.78) 100%);
  z-index: 2; /* garantit au-dessus de l'image */
}

/* Renfort d'ombre (reste neutre hors hover) */
.presta-thumb__overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  /* renfort sombre identique à l'esprit actuel (bas plus dense) */
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 38%,
    rgba(0,0,0,0.52) 100%);
  opacity: 0; /* OFF par défaut */
  transition: opacity 900ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

/* Le texte reste au-dessus du renfort */
.presta-thumb__title,
.presta-thumb__text{
  position: relative;
  z-index: 3;
  white-space: pre-line;
}

.presta-thumb__title{
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: .2px;
}

.presta-thumb__text{
  margin: 6px 0 0;
  opacity: .92;
  line-height: 1.35;
  max-width: 46ch;
}

/* micro-dots décoratifs */
.presta-thumb__dots{
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 6px;
  opacity: .85;
}
.presta-thumb__dots::before,
.presta-thumb__dots::after{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
}
.presta-thumb__dots{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
}

/* =========================================================
   HOVER DESKTOP
   - mouvement zoom “cinéma”
   - renfort d'ombre au hover (sans changer le style)
   ========================================================= */

@media (hover: hover) and (pointer: fine){

  /* pas de lift : la grille reste parfaitement stable */
  [data-presta-slot] .card{
    transition: box-shadow 700ms cubic-bezier(.16, 1, .3, 1);
  }

  /* ombre très douce, plutôt “profondeur” que “effet” */
  [data-presta-slot] .card:hover{
    box-shadow: 0 18px 52px rgba(0,0,0,.28);
  }

  /* Zoom cinéma */
  [data-presta-slot] .presta-thumb__img{
    transform: scale(1.02) translate3d(0,0,0);
    transition: transform 450ms cubic-bezier(.55, 0, .12, 1);
    will-change: transform;
  }

  [data-presta-slot] .card:hover .presta-thumb__img{
    transform: scale(1.065) translate3d(0,0,0);
  }

  /* IMPORTANT : on NE change PAS le gradient de base.
     On active juste un renfort sombre au hover. */
  [data-presta-slot] .card:hover .presta-thumb__overlay::before{
    opacity: 1;
  }
}

/* Reduced motion :
   On évite les transitions “cosmétiques” (ombre/renfort),
   mais on NE coupe PAS le zoom (sinon ça devient sec instantané). */
@media (prefers-reduced-motion: reduce){
  [data-presta-slot] .card{
    transition: none !important;
  }
  .presta-thumb__overlay::before{
    transition: none !important;
  }
  /* volontairement : PAS de transition:none sur .presta-thumb__img */
}

@media (max-width: 700px){
  .presta-thumb{ aspect-ratio: 16 / 11; }
  .presta-thumb__overlay{ padding: 14px 14px 12px; }
  .presta-thumb__text{ max-width: 52ch; }
}

/*
  IMPORTANT (rail mobile / triptyques)
  Les thumbs presta utilisent un margin négatif (-18px) pour "manger" le padding de .card.
  En mode mobile (rail horizontal), ce margin négatif peut pousser la 1ère card hors écran
  selon l'ordre de chargement des CSS. On force donc l'annulation du margin dans le slot.
*/
@media (max-width: 720px),
       (max-width: 980px) and (orientation: landscape) and (pointer: coarse){
  [data-presta-slot] .card .presta-thumb{ margin: 0; }
  [data-presta-slot] .card{ padding: 0; }
}

/* Modal slider dots (Swiper bullets) */
.modal .swiper-pagination{
  position:absolute;
  left: 18px;
  bottom: 18px;
  width: auto;
  z-index: 9;
}
.modal .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(255,255,255,0);
  opacity: .9;
  margin: 0 5px !important;
}
.modal .swiper-pagination-bullet-active{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,0);
}

/* Make modal look more “photo-first” by hiding side panel if needed */
.modal.is-photo-only .modal__details{
  display:none;
}
.modal.is-photo-only .modal__content{
  grid-template-columns: 1fr;
}