/* .imgContainer a toujours été un <div>. En mode côte-à-côte c'est un <a> :
   inline par défaut, il ignorerait width/height. */
.block.slideshow > .slides .slide.slide--split > .container > .slideVisual {
    display: block;
}

/* L'image remplace un background-image : on reproduit
   background-size:cover + background-position:center.
   Neutralise `.imgContainer > img { position:absolute; height:auto }`
   de main.min.css. */
.block.slideshow > .slides .slide.slide--split > .container > .imgContainer > img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* -------------------------------------------------------
   Bureau (menu complet) : l'image sur une moitié seulement.
   Sous 1081px on ne change rien - l'image reprend toute la
   largeur comme le faisait le background-image, et le panneau
   de texte se superpose exactement comme en pleine largeur.
   ------------------------------------------------------- */
@media screen and (min-width: 1081px) {
    .block.slideshow > .slides .slide.slide--split > .container > .imgContainer {
        width: 50%;
    }

    .block.slideshow > .slides .slide.slide--visual-right > .container > .imgContainer {
        margin-left: 50%;
    }

    /* Mode « image à gauche » : le panneau de texte passe du côté opposé,
       en miroir du `left: 7vw` du mode pleine largeur. */
    .block.slideshow > .slides .slide.slide--visual-left > .container > .content {
        left: auto;
        right: 7vw;
    }
}

/* -------------------------------------------------------
   Très grands écrans (> 1600px)
   -------------------------------------------------------
   main.min.css cale déjà le bord du panneau sur un conteneur
   centré de 1600px : `left: calc(7vw + (100vw - 1600px) / 2)`.
   Sa largeur, elle, reste à 30% du viewport, donc elle grandit
   plus vite que le décalage : au-delà d'environ 2160px le
   panneau déborde sur la moitié occupée par l'image
   (0.07vw + (vw-1600)/2 + 0.30vw > vw/2  =>  vw > 2162px).
   On fige donc la largeur à 480px, soit les mêmes 30% du
   conteneur de 1600px que vise déjà le calc(). Sans effet
   entre 1081 et 1600px, où 30% valent justement 480px au max.
   ------------------------------------------------------- */
@media screen and (min-width: 1601px) {
    .block.slideshow > .slides .slide.slide--split > .container > .content {
        width: 480px;
    }

    .block.slideshow > .slides .slide.slide--visual-left > .container > .content {
        left: auto;
        right: calc(7vw + (100vw - 1600px) * 0.5);
    }
}

/* -------------------------------------------------------
   Mobile / tablette (< 1081px) : image au-dessus, texte dessous
   -------------------------------------------------------
   En pleine largeur le panneau de texte peut se superposer à
   l'image parce que celle-ci contient sa propre bande de
   couleur unie. Ici l'image téléversée est justement SANS
   bande : le panneau masquerait le visuel. On empile donc, sur
   la couleur de fond de la diapositive, et on laisse l'image à
   sa hauteur naturelle pour ne rien rogner.
   ------------------------------------------------------- */
@media screen and (max-width: 1080px) {
    .block.slideshow > .slides .slide.slide--split > .container > .imgContainer {
        height: auto;
    }

    .block.slideshow > .slides .slide.slide--split > .container > .imgContainer > img {
        height: auto;
    }

    .block.slideshow > .slides .slide.slide--split > .container > .content {
        position: static;
        width: auto;
        height: auto;
        margin-left: 0;
        background-color: transparent;
    }
}