.ibl-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
}

.ibl-slider-track {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 8;
    overflow: hidden;
}

/* Le carrousel est conçu à une taille de référence fixe (desktop,
   voir ibl_slider_design_width/height côté PHP) : plutôt que de
   réempiler le contenu sur petit écran (ce qui change complètement la
   mise en page), on réduit TOUT le calque - image, textes, positions -
   à l'échelle, en conservant exactement les mêmes proportions qu'sur
   desktop. L'échelle réelle est calculée en JavaScript (largeur du
   conteneur ÷ largeur de référence) et appliquée ici via transform. */
.ibl-slider-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
}

.ibl-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    overflow: hidden;
}

.ibl-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Image positionnée à gauche ou à droite, verticalement centrée,
   avec une taille (largeur en %) réglée depuis le back-office. */
.ibl-slide-image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ibl-slide-image--left {
    left: clamp(16px, 4%, 60px);
}

.ibl-slide-image--right {
    right: clamp(16px, 4%, 60px);
}

.ibl-slide-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Zone de sécurité globale : retirée de chaque côté (largeur des
   flèches précédent/suivant) - aucun calque ne pourra jamais
   toucher un bouton, quelle que soit sa position en pixels. */
.ibl-slide-layers {
    position: absolute;
    top: 0;
    bottom: 0;
    left: clamp(60px, 8vw, 90px);
    right: clamp(60px, 8vw, 90px);
}

/* Deux panneaux distincts, chacun la moitié exacte de la zone utile :
   les calques du panneau gauche se positionnent depuis SON bord
   gauche, ceux du panneau droit depuis SON bord droit. */
.ibl-slide-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

.ibl-slide-panel--left {
    left: 0;
}

.ibl-slide-panel--right {
    right: 0;
}

.ibl-slide-layer {
    position: absolute;
    white-space: normal;
    max-width: 90%;
    line-height: 1.15;
    text-decoration: none;
    display: inline-block;
}

.ibl-slide-layer--image {
    max-width: none;
    padding: 0;
    line-height: 0;
}

.ibl-slide-layer--image img {
    display: block;
    max-width: 60vw;
    height: auto;
    object-fit: contain;
}

a.ibl-slide-layer:hover {
    opacity: 0.8;
}

/* Apparition (arrivée) du texte et des images à l'activation du slide,
   décalée légèrement par calque pour un effet naturel. Le nom de l'effet
   vient du réglage back-office (classe ibl-transition-* sur le
   conteneur racine) : chaque effet a sa propre animation @keyframes. */
.ibl-slide.is-active .ibl-slide-layer,
.ibl-slide.is-active .ibl-slide-image {
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
    animation-name: iblFadeUp; /* valeur de secours si la classe de transition est absente */
}

/* Départ (sortie) des calques juste avant de passer au slide suivant :
   même principe, décalé calque par calque, mais en sens inverse et plus
   rapide - c'est ce qui crée l'effet "les textes arrivent l'un après
   l'autre puis repartent avant le slide suivant". */
.ibl-slide.is-leaving .ibl-slide-layer,
.ibl-slide.is-leaving .ibl-slide-image {
    animation-duration: 0.4s;
    animation-timing-function: ease-in;
    animation-fill-mode: both;
    animation-name: iblFadeUpOut;
}

.ibl-slide.is-active .ibl-slide-layer:nth-child(2) { animation-delay: 0.35s; }
.ibl-slide.is-active .ibl-slide-layer:nth-child(3) { animation-delay: 0.7s; }
.ibl-slide.is-active .ibl-slide-layer:nth-child(4) { animation-delay: 1.05s; }
.ibl-slide.is-active .ibl-slide-layer:nth-child(5) { animation-delay: 1.4s; }
.ibl-slide.is-active .ibl-slide-layer:nth-child(6) { animation-delay: 1.75s; }

/* Au départ, on inverse l'ordre : le dernier calque arrivé part en
   premier, comme un "dernier arrivé, premier reparti" plus naturel. */
.ibl-slide.is-leaving .ibl-slide-layer:nth-child(1) { animation-delay: 0.7s; }
.ibl-slide.is-leaving .ibl-slide-layer:nth-child(2) { animation-delay: 0.35s; }
.ibl-slide.is-leaving .ibl-slide-layer:nth-child(3) { animation-delay: 0s; }
.ibl-slide.is-leaving .ibl-slide-layer:nth-child(4) { animation-delay: 0s; }

/* Fondu + légère montée (effet par défaut) */
.ibl-transition-fade-up .ibl-slide.is-active .ibl-slide-layer,
.ibl-transition-fade-up .ibl-slide.is-active .ibl-slide-image {
    animation-name: iblFadeUp;
}
.ibl-transition-fade-up .ibl-slide.is-leaving .ibl-slide-layer,
.ibl-transition-fade-up .ibl-slide.is-leaving .ibl-slide-image {
    animation-name: iblFadeUpOut;
}
@keyframes iblFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes iblFadeUpOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-14px); }
}

/* Fondu simple, sans déplacement */
.ibl-transition-fade .ibl-slide.is-active .ibl-slide-layer,
.ibl-transition-fade .ibl-slide.is-active .ibl-slide-image {
    animation-name: iblFade;
}
.ibl-transition-fade .ibl-slide.is-leaving .ibl-slide-layer,
.ibl-transition-fade .ibl-slide.is-leaving .ibl-slide-image {
    animation-name: iblFadeOut;
}
@keyframes iblFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes iblFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Zoom avant : le calque grossit légèrement en apparaissant, rétrécit
   légèrement en repartant */
.ibl-transition-zoom .ibl-slide.is-active .ibl-slide-layer,
.ibl-transition-zoom .ibl-slide.is-active .ibl-slide-image {
    animation-name: iblZoom;
}
.ibl-transition-zoom .ibl-slide.is-leaving .ibl-slide-layer,
.ibl-transition-zoom .ibl-slide.is-leaving .ibl-slide-image {
    animation-name: iblZoomOut;
}
@keyframes iblZoom {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes iblZoomOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.1); }
}

/* Fondu directionnel : le texte ET l'image arrivent depuis le même
   côté (gauche ou droite selon le réglage), quel que soit le panneau
   dans lequel ils se trouvent - contrairement aux calques qui, pour
   les autres effets, restent liés à leur propre panneau. Au départ,
   ils continuent leur course dans le même sens avant de disparaître. */
.ibl-transition-fade-ltr .ibl-slide.is-active .ibl-slide-layer,
.ibl-transition-fade-ltr .ibl-slide.is-active .ibl-slide-image {
    animation-name: iblFadeLTR;
}
.ibl-transition-fade-ltr .ibl-slide.is-leaving .ibl-slide-layer,
.ibl-transition-fade-ltr .ibl-slide.is-leaving .ibl-slide-image {
    animation-name: iblFadeLTROut;
}
@keyframes iblFadeLTR {
    from { opacity: 0; transform: translateX(-60px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes iblFadeLTROut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(60px); }
}

.ibl-transition-fade-rtl .ibl-slide.is-active .ibl-slide-layer,
.ibl-transition-fade-rtl .ibl-slide.is-active .ibl-slide-image {
    animation-name: iblFadeRTL;
}
.ibl-transition-fade-rtl .ibl-slide.is-leaving .ibl-slide-layer,
.ibl-transition-fade-rtl .ibl-slide.is-leaving .ibl-slide-image {
    animation-name: iblFadeRTLOut;
}
@keyframes iblFadeRTL {
    from { opacity: 0; transform: translateX(60px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes iblFadeRTLOut {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-60px); }
}

.ibl-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.ibl-slider-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

.ibl-slider-arrow--prev { left: 16px; }
.ibl-slider-arrow--next { right: 16px; }

.ibl-slider-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
}

.ibl-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ibl-slider-dot.is-active {
    background: rgba(0, 0, 0, 0.6);
    transform: scale(1.2);
}

/* Sur mobile, l'échelle proportionnelle (voir .ibl-slider-canvas)
   réduit les images autant que le texte - ce qui rend le texte
   parfaitement lisible mais les images un peu petites au goût. On les
   agrandit donc un peu plus que le reste, sans toucher au texte ni
   déplacer quoi que ce soit (transform ne modifie pas la mise en page
   des éléments voisins, juste l'apparence visuelle de l'image). */
@media (max-width: 767px) {
    .ibl-slide-image img,
    .ibl-slide-layer--image img {
        transform: scale(1.4);
    }
}