/* prestas-swiper.css
   CSS "core" minimal + bullets, pour éviter tout empilement vertical des slides
   et garantir un rendu stable dans la modal.
*/

/* conteneur swiper */
.swiper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* wrapper = rail horizontal */
.swiper-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  transition-property: transform;
}

/* une slide = une "page" */
.swiper-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Mode "card swipe" (utilisé par la modale presta) : largeur auto par slide */
.modal--slidecards .swiper-slide{
  flex: 0 0 auto;
  width: auto;
}

/* images plein cadre */
.swiper-slide img,
.swiper-slide picture,
.swiper-slide video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* pagination bullets (petits ronds) */
.swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.75);
  background: transparent;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.95);
}

/* optionnel : si tu veux que les bullets soient un peu "soft" sur fond clair */
@media (prefers-reduced-motion: no-preference) {
  .swiper-pagination-bullet {
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1.15);
  }
}

/* ===========================
   SWIPER VERTICAL (smartphone portrait)
   =========================== */

/* Si Swiper est en vertical, le wrapper doit être en colonne,
   sinon les slides restent côte à côte (rail horizontal). */
.swiper.swiper-vertical > .swiper-wrapper,
.swiper.swiper-container-vertical > .swiper-wrapper,
.swiper-container-vertical > .swiper-wrapper{
  flex-direction: column;
}

/* En mode slidecards + vertical, une slide doit prendre toute la largeur
   (et pas "width:auto" comme en horizontal). */
.modal--slidecards .swiper.swiper-vertical .swiper-slide,
.modal--slidecards .swiper.swiper-container-vertical .swiper-slide,
.modal--slidecards .swiper-container-vertical .swiper-slide{
  width: 100%;
  flex: 0 0 100%;
  height: 100%;
}

/* =========================================
   Modal slidecards : assombrir les slides non actives
   (horizontal + vertical)
   ========================================= */

.modal--slidecards .swiper-slide{
  position: relative;
}

.modal--slidecards .swiper-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;          /* doit matcher le look arrondi de tes cards */
  background: rgba(0,0,0,0);    /* par défaut : aucune ombre sur la slide active */
  transition: background .18s ease;
  pointer-events: none;         /* ne bloque pas le swipe / click */
}

/* non-focus = plus sombre */
.modal--slidecards .swiper-slide:not(.swiper-slide-active)::after{
  background: rgba(0,0,0,.55);  /* augmente/diminue ici si besoin */
}

/* ===========================
   Swiper navigation (prev/next) — light + propre
   (On n’a pas le CSS officiel Swiper, donc on pose le minimum)
   =========================== */

.swiper-button-prev,
.swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);

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

  padding: 0;
  line-height: 1;
  font-size: 0; /* neutralise tout texte du bouton */

  cursor: pointer;

  /* évite sélection/drag chelou */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;

  /* blindage anti “texte qui réapparaît” */
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;

  opacity: .18;
  transition: opacity .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.swiper-button-prev{ left: 14px; }
.swiper-button-next{ right: 14px; }

/* Chevrons dessinés en CSS (centrage optique + sens garanti) */
.swiper-button-prev::before,
.swiper-button-next::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 10px;
  height: 10px;

  border-top: 2px solid rgba(255,255,255,.85);
  border-right: 2px solid rgba(255,255,255,.85);

  transform-origin: 50% 50%;
}

/* ✅ sens + centrage */
.swiper-button-prev::before{ transform: translate(-50%,-50%) rotate(-135deg); } /* gauche */
.swiper-button-next::before{ transform: translate(-50%,-50%) rotate(45deg); }   /* droite */

/* Swiper peut injecter une icône via ::after → on la neutralise */
.swiper-button-prev::after,
.swiper-button-next::after{
  content: "" !important;
  display: none !important;
}

/* plus visible au survol/focus */
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next,
.swiper:focus-within .swiper-button-prev,
.swiper:focus-within .swiper-button-next{
  opacity: .75;
  background: rgba(0,0,0,.26);
  border-color: rgba(255,255,255,.28);
}

/* petit lift */
.swiper-button-prev:hover,
.swiper-button-next:hover{
  transform: translateY(-50%) scale(1.03);
}

/* ✅ n’apparaît que si il y a lieu : Swiper ajoute cette classe */
.swiper-button-disabled{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Mobile portrait (swiper vertical) : on masque */
@media (max-width: 720px) and (orientation: portrait){
  .swiper-button-prev,
  .swiper-button-next{
    display: none !important;
  }
}