/* Front styles */
.zsr{position:relative;}
.zsr .swiper{width:100%; position:relative; overflow:hidden; border-radius:8px;}
.zsr-slide-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.001);}
.zsr-overlay{position:absolute; inset:0;}
.zsr-cap-wrap{position:absolute; left:0; right:0;}
.zsr-cap{position:relative; background:transparent; color:#fff;}
.zsr-title{margin:0;}
.zsr-title a{color:inherit; text-decoration:none;}
.zsr-btn{transition:opacity .2s ease;}
.zsr-btn:hover{opacity:.92;}

/* RTL/LTR basés sur le conteneur du slider */
.zsr[dir="rtl"] .zsr-cap{ text-align:right; align-items:flex-end; }
.zsr[dir="rtl"] .zsr-cap .zsr-btn{ align-self:flex-end; text-align:right; }

/* Navigation contrastée */
.zsr .swiper-button-prev, .zsr .swiper-button-next{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* Position des flèches en RTL */
.zsr[dir="rtl"] .swiper-button-prev{ right:10px; left:auto; }
.zsr[dir="rtl"] .swiper-button-next{ left:10px; right:auto; }

/* Pagination */
.swiper-pagination-bullet{ background:rgba(255,255,255,.75); opacity:1; }
.swiper-pagination-bullet-active{ background:#fff; }

/* --- Responsive largeur pour ordinateur / tablette / mobile --- */
/* Desktop : le plugin conserve la hauteur définie dans le tableau de bord */

@media (max-width: 1024px){
  /* Tablette : pleine largeur, hauteur conservée (inline style) */
  .zsr{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
  .zsr .swiper{
    width:100% !important;
  }
}

@media (max-width: 480px){
  /* Mobile : pleine largeur, hauteur conservée (inline style) */
  .zsr{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
  .zsr .swiper{
    width:100% !important;
  }
  .zsr-cap{
    padding:14px;
  }
}