/** 
 * fichier diaporama.css
 * pour le sommaire uniquement
 * inclusion via head_js/sommaire.html
 * 
**/

#diaporama .logo {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 540px;
		position: relative;
}
#diaporama .logo picture{
		width: 100%;
		position: relative;
		top: 0;
		z-index: -1;
}

.page_sommaire #diaporama article div.motif {
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
	height: 65%;
}

@media screen and (max-width: 480px) {
	#diaporama .logo {
		height: 330px;
		align-items: self-end;
	}
	#diaporama .logo picture{
		position: relative;
	}
}
/* en dessous de 600px*/
@media screen and (max-width: 600px) {
	.page_sommaire p.slogan_site{
		margin-bottom: 0;
	}
	.page_sommaire #diaporama{
		height: 540px;
	}
	.page_sommaire #diaporama article div.motif{
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 100%);
		height: 30%;
	}
	.page_sommaire #entete {
    	position: relative;
	}
	.page_sommaire #diaporama article div.alaune {
		/* calc avec largeur qui fait augmenter la hauteur du botttom */
		min-height: 560px;
			height: auto;
			position: relative;
			top: -2px;
			background: #e5ebeb;
	}
	.page_sommaire #diaporama .logo{
		align-items: self-start;
		height: 230px;
	}
	#diaporama .logo picture{
		position: absolute;
		width: 100%;
	}
	#diaporama .logo picture img{
        height: 237px;
        width: 130% !important;
        object-fit: cover;
	}
	.page_sommaire #diaporama .slick-dots {
        bottom: 12px;
    }
	.page_sommaire #diaporama .slick-dots li:last-of-type{
		display: inline-block;
	}
}
/* à partir de 600px et au-dessus */
@media screen and (min-width: 600px) {
	#diaporama .logo {
		height: 540px;
		align-items: self-start;
	}
	#diaporama .logo picture{
		position: absolute;
		width: 100%;
	}
	#diaporama .logo picture img{
		height: 340px;
		width: 100% !important;
		object-fit: cover;
	}
}

@media screen and (min-width: 940px) {
	.page_sommaire #diaporama article div.motif {
		background: linear-gradient(180deg, rgb(255, 255, 255) 2%, rgba(255, 255, 255, 0.1) 100%);
        height: 100%;
	}
	#diaporama .logo picture{
		z-index: -1;
		top: 0;
		margin-top: 0;
		padding-top: 0;
		min-height: 540px;
		width:100%;
	}
	#diaporama .logo picture img{
		position: absolute;
		height: 540px;
		width: 200% !important;
		object-fit: cover;
	}
}