/* =======================================================
   Diaporama d'accueil - modes « image à gauche / à droite »
   -------------------------------------------------------
   Écrit à la main, chargé après /dist/compiled/main.min.css
   (même approche que /dist/banner.css).
   Les sources SASS de dist/sass/ sont périmées par rapport au
   CSS compilé : ne pas déplacer ces règles dans _slideshow.scss.

   OBJECTIF : le rendu doit rester identique au mode pleine
   largeur. La seule différence est que l'image est une vraie
   balise <img> dans un <a> (donc une zone cliquable) occupant
   une moitié, l'autre moitié étant la couleur de fond de la
   diapositive au lieu d'être peinte dans l'image téléversée.

   Le conteneur de l'image garde la classe .imgContainer : il
   hérite ainsi des hauteurs par palier (200px / 220px /
   21.875vw), de overflow:hidden et du positionnement déjà
   définis dans main.min.css. Le panneau de texte .content
   n'est PAS redéfini : il reste absolu, à 7vw, sur 30% de
   large, avec son fond blanc translucide.
   ======================================================= */

/* .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;
    }
}