/* ====================================================================== */
/* ======== DIAPORAMA D'ACCUEIL ========================================= */
/* ====================================================================== */
/* Les classes slideTop / slideMiddle / slideBottom de styles_base.css     */
/* positionnent les images en absolu sans jamais leur donner de dimension. */
/* Combinees a la regle globale img{max-width:100%}, une image portrait se */
/* reduit a la largeur du slide et laisse le fond du site visible au-dessus */
/* et en dessous. Ces regles reprennent la main : les images remplissent   */
/* le slide et l'emplacement choisi au backoffice pilote le cadrage.       */

#slider-images .splide__track,
#slider-images .splide__list {
height:100%
}

#slider-images .splide__slide {
position:relative;
width:100%;
height:100%;
overflow:hidden
}

#slider-images .splide__slide > picture,
#slider-images .splide__slide > img.diapo {
position:absolute !important;
width:100% !important;
max-width:none !important;
height:100% !important;
top:0 !important;
right:auto !important;
bottom:auto !important;
left:0 !important;
transform:none !important;
margin:0;
padding:0
}

#slider-images .splide__slide > picture > img {
display:block;
width:100%;
max-width:none;
height:100%;
object-fit:cover;
margin:0;
padding:0
}

#slider-images .splide__slide img.diapo {
object-fit:cover
}

#slider-images .splide__slide img.slideTop,
#slider-images .splide__slide > picture > img.slideTop { object-position:center top }

#slider-images .splide__slide img.slideMiddle,
#slider-images .splide__slide > picture > img.slideMiddle { object-position:center center }

#slider-images .splide__slide img.slideBottom,
#slider-images .splide__slide > picture > img.slideBottom { object-position:center bottom }

/* L'image produit optionnelle garde son positionnement d'origine */

#slider-images .splide__slide img.imgProduitSlide {
position:absolute !important;
width:auto !important;
max-width:40% !important;
height:auto !important;
top:auto !important;
bottom:0 !important;
object-fit:contain
}

#slider-images .splide__slide img.imgProduitSlide.leftSlide {
left:4% !important;
right:auto !important;
transform:none !important
}

#slider-images .splide__slide img.imgProduitSlide.rightSlide {
right:4% !important;
left:auto !important;
transform:none !important
}

@media only screen and (max-width:780px) {
	#headerSlider {
	background-color:var(--black, #1f1717);
	overflow:hidden
	}

	#slider-images,
	#slider-textes {
	height:100%
	}

	#slider-images .splide__slide img.imgProduitSlide { max-width:55% !important }
}