/* --------------------------------------------------------------------------------------------------------------- GENERAL */
body {
	background-color: var(--colorB) !important;}

.container .headerLogo, .container .footerBl {
	display: none;}

.container {
	overflow: hidden;}

p {
	display: block;
	margin: 0;}


/* --------------------------------------------------------------------------------------------------------------- CONTENT */
.content {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--colorB);
	padding: 0 var(--marginBold);}

.homeBl {
	position: relative;
	display: grid;
	grid-template-columns: repeat(16, 1fr);
	gap: var(--marginBold);
	width: 100%;
	height: calc(100vh - 2 * var(--menuHeight));
	overflow: hidden;}

.hiddenBl {
	height: 0px;}

.galleryAccueil {
	position: absolute;
	overflow: hidden;}

.galleryAccueil.portrait {
    aspect-ratio: 4 / 5; 
    overflow: hidden;}

.galleryAccueil.paysage {
    aspect-ratio: 1.75 / 1; 
    overflow: hidden;}

.galleryAccueil.square {
    aspect-ratio: 1 / 1; 
    overflow: hidden;}

.galleryAccueil a {
	position: absolute;
	width: 100%;
	height: 100%;}

.galleryAccueil img {
	width: 100%;
	height: 100%;
	opacity: 0;
	object-fit: cover;
	object-position: center;
	vertical-align: middle;}

.galleryAccueil img.visible {
    opacity: 1;}

.logotypeBl {
	z-index: 5;
	position: absolute;
	width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));}

.galleryAccueilMobile {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
 	justify-content: center;
    align-items: center;
	overflow: hidden;}

.galleryAccueilMobile img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: cover;}


/* --------------------------------------------------------------------------------------------------------------- MEP */
.logotypeBl.mep1 {
	left: calc(11 * var(--columnWidth16) + 11 * var(--marginBold));}

.mep1im1 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: calc(1 * var(--columnWidth16) + var(--marginBold));}

.mep1im2 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: calc(1 * var(--columnWidth16) + var(--marginBold));}

.mep1im3 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	top: 0px;
	left: calc(5 * var(--columnWidth16) + 5 * var(--marginBold));}

.mep1im4 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(14 * var(--columnWidth16) + 14 * var(--marginBold));}

.mep1im5 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: 0px;}

.mep1im6 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep1im7 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}

/* ---------------------------------------- */

.mep2im1 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
    top: var(--columnWidth16);
	left: 0px;}

.mep2im2 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}

.mep2im3 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}

.mep2im4 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: calc(13 * var(--columnWidth16) + 13 * var(--marginBold));}

.mep2im5 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	bottom: 0px;
	left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}

.mep2im6 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep2im7 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	left: calc(11 * var(--columnWidth16) + 11 * var(--marginBold));}

/* ---------------------------------------- */

.logotypeBl.mep3 {
	left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}

.mep3im1 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: 0px;}

.mep3im2 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}

.mep3im3 {
    width: calc(6 * var(--columnWidth16) + 5 * var(--marginBold));
	top: 0px;
	left: calc(8 * var(--columnWidth16) + 8 * var(--marginBold));}

.mep3im4 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	bottom: 0px;
	left: calc(3 * var(--columnWidth16) + 3 * var(--marginBold));}

.mep3im5 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep3im6 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(11 * var(--columnWidth16) + 11 * var(--marginBold));}

.mep3im7 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	bottom: 0px;
	left: calc(14 * var(--columnWidth16) + 14 * var(--marginBold));}

/* ---------------------------------------- */

.logotypeBl.mep4 {
	left: calc(13 * var(--columnWidth16) + 13 * var(--marginBold));}

.mep4im1 {
    width: calc(6 * var(--columnWidth16) + 5 * var(--marginBold));
	top: 0px;
	left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));}

.mep4im2 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	top: 0px;
	left: calc(10 * var(--columnWidth16) + 10 * var(--marginBold));}

.mep4im3 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: 0px;}

.mep4im4 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));}

.mep4im5 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep4im6 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(12 * var(--columnWidth16) + 12 * var(--marginBold));}

.mep4im7 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(14 * var(--columnWidth16) + 14 * var(--marginBold));}

/* ---------------------------------------- */

.logotypeBl.mep5 {
	left: calc(8 * var(--columnWidth16) + 8 * var(--marginBold));}

.mep5im1 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: 0px;}

.mep5im2 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	top: 0px;
	left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));}

.mep5im3 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	top: 0px;
	left: calc(6 * var(--columnWidth16) + 6 * var(--marginBold));}

.mep5im4 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(12 * var(--columnWidth16) + 12 * var(--marginBold));}

.mep5im5 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep5im6 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(10 * var(--columnWidth16) + 10 * var(--marginBold));}

.mep5im7 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	left: calc(12 * var(--columnWidth16) + 12 * var(--marginBold));}

/* ---------------------------------------- */

.logotypeBl.mep6 {
	left: calc(5 * var(--columnWidth16) + 5 * var(--marginBold));}

.mep6im1 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: 0px;}

.mep6im2 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep6im3 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(10 * var(--columnWidth16) + 10 * var(--marginBold));}

.mep6im4 {
    width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
	left: calc(13 * var(--columnWidth16) + 13 * var(--marginBold));}

.mep6im5 {
    width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
	left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}

.mep6im6 {
    width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
	left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}

.mep6im7 {
    width: calc(6 * var(--columnWidth16) + 5 * var(--marginBold));
	left: calc(10 * var(--columnWidth16) + 10 * var(--marginBold));}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE */
@media screen and (min-width: 1921px) {
	.homeBl {
		grid-template-columns: repeat(18, 1fr);}
	.logotypeBl.mep4 {
		left: calc(15 * var(--columnWidth16) + 15 * var(--marginBold)) !important;}
	.logotypeBl.mep5 {
		left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}
	.mep2im4 {
		left: calc(15 * var(--columnWidth16) + 15 * var(--marginBold));}
	.mep3im6, .mep4im6 {
		left: calc(13 * var(--columnWidth16) + 13 * var(--marginBold));}
	.mep3im7, .mep4im7 {
		left: calc(16 * var(--columnWidth16) + 16 * var(--marginBold));}
	.mep4im2 {
		width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));}
	.mep5im7 {
		width: calc(5 * var(--columnWidth16) + 4 * var(--marginBold));
		left: calc(13 * var(--columnWidth16) + 13 * var(--marginBold));}
	.mep5im5 {
		left: calc(6 * var(--columnWidth16) + 6 * var(--marginBold));}
	.mep5im6, .mep6im3, .mep6im7 {
		left: calc(11 * var(--columnWidth16) + 11 * var(--marginBold));}
}

@media screen and (max-width: 1400px) {
	.homeBl {
		grid-template-columns: repeat(15, 1fr);}
	.logotypeBl.mep4 {
		left: calc(10 * var(--columnWidth16) + 10 * var(--marginBold));}
	.mep1im4, .mep2im4, .mep4im7, .mep5im1, .mep6im4 {
		display: none !important;}
	.mep1im6 {
		left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}
	.mep1im7, .mep5im4, .mep5im7 {
		left: calc(11 * var(--columnWidth16) + 11 * var(--marginBold));}
	.mep3im6, .mep4im2 {
		left: calc(12 * var(--columnWidth16) + 12 * var(--marginBold));}
	.mep3im7, .mep6im7 {
		left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}
	.mep5im2 {
		left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep5im3, .mep5im5, .mep6im6 {
		left: calc(5 * var(--columnWidth16) + 5 * var(--marginBold));}
}

@media screen and (max-width: 1200px) {
	.homeBl {
		grid-template-columns: repeat(12, 1fr);}
	.logotypeBl.mep1 {
		left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}
	.logotypeBl.mep3 {
		left: 0px;}
	.logotypeBl.mep5 {
		left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}
	.logotypeBl.mep6 {
		left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}
	.mep1im7 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
		left: calc(9 * var(--columnWidth16) + 9 * var(--marginBold));}
	.mep2im5 {
		left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));}
	.mep2im7, .mep4im2 {
		display: none;}
	.mep3im3 {
		left: calc(6 * var(--columnWidth16) + 6 * var(--marginBold));}
	.mep4im6, .mep5im4 {
		top: 0px;
		bottom: unset;
		left: calc(10 * var(--columnWidth16) + 10 * var(--marginBold));}
	.mep5im2 {
		left: 0px;}
	.mep5im5 {
		left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}
	.mep5im6, .mep5im7 {
		left: calc(7 * var(--columnWidth16) + 7 * var(--marginBold));}
	.mep6im5 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));}
	.mep6im7 {
		width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
		left: calc(8 * var(--columnWidth16) + 8 * var(--marginBold));}
}

@media screen and (max-width: 950px) {
	.homeBl {
		grid-template-columns: repeat(8, 1fr);}
	.logotypeBl.mep1 {
		left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));}
	.logotypeBl.mep3 {
		left: calc(6 * var(--columnWidth16) + 6 * var(--marginBold));}
	.logotypeBl.mep4, .logotypeBl.mep5 {
		left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}
	.logotypeBl.mep6 {
		left: calc(6 * var(--columnWidth16) + 6 * var(--marginBold));}
	.mep1im6, .mep1im7, .mep3im2, .mep4im3, .mep4im6, .mep5im3, .mep5im4 {
		display: none !important;}
	.mep1im3 {
		left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}
	.mep1im5 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep2im2 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
		left: calc(3 * var(--columnWidth16) + 3 * var(--marginBold));}
	.mep2im6 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));
		left: calc(5 * var(--columnWidth16) + 5 * var(--marginBold));}
	.mep3im1 {
		left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep3im4, .mep4im4, .mep5im5 {
		left: 0px;}
	.mep3im5, .mep4im5, .mep5im6, .mep5im7 {
		left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}
	.mep3im3 {
		width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
		left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}
	.mep4im1 {
		width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));
		left: calc(3 * var(--columnWidth16) + 3 * var(--marginBold));}
	.mep5im2 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));}
	.mep6im2, .mep6im6 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
		left: calc(4 * var(--columnWidth16) + 4 * var(--marginBold));}	
	.mep6im7 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));
		left: calc(6 * var(--columnWidth16) + 6 * var(--marginBold));}
}

@media screen and (max-width: 750px) {
	.headerLogo {
		display: flex !important;}
	.logotypeBl {
		display: none;}
	.homeBl {
		grid-template-columns: repeat(6, 1fr);}
	.mep1im3 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep2im5, .mep5im5, .mep6im7 {
		display: none;}
	.mep2im6, .mep4im5 {
		left: calc(3 * var(--columnWidth16) + 3 * var(--marginBold));}
	.mep2im1, .mep3im3, .mep5im7 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));}
	.mep3im1 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep3im3, .mep5im7 {
		left: calc(3 * var(--columnWidth16) + 3 * var(--marginBold));}
	.mep4im1 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));}
	.mep5im6 {
		left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));}
}

@media screen and (max-width: 600px) {
	.mep1im3, .mep3im5, .mep6im2 {
		display: none !important;}
	.mep1im1, .mep1im2, .mep5im7, .mep6im5 {
		width: calc(4 * var(--columnWidth16) + 3 * var(--marginBold));}
	.mep2im2 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));}
	.mep3im1, .mep3im3, .mep6im1 {
		width: calc(5 * var(--columnWidth16) + 4 * var(--marginBold));}
	.mep3im1, .mep5im6, .mep6im5, .mep6im1 {
		left: 0px;}
	.mep3im3 {
		left: calc(1 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep4im1, .mep5im6 {
		width: calc(6 * var(--columnWidth16) + 5 * var(--marginBold));
		left: 0px;}
	.mep5im2 {
		width: calc(2 * var(--columnWidth16) + 1 * var(--marginBold));}
	.mep5im7 {
		left: calc(2 * var(--columnWidth16) + 2 * var(--marginBold));
		top: 0px !important;}
	.homeBl {
		height: calc(100vh - var(--menuHeight) - var(--marginBold));}
	.galleryAccueilMobile {
		display: block;}
	.galleryAccueil {
		display: none !important;}
}

@media screen and (max-width: 500px) {
	.mep1im1, .mep1im2 {
		width: calc(6 * var(--columnWidth16) + 5 * var(--marginBold));
		left: 0px;}
}

@media screen and (max-width: 450px) {
	.mep1im5 {
		width: calc(3 * var(--columnWidth16) + 2 * var(--marginBold));}
}

@media screen and (max-height: 350px), 
       screen and (max-height: 500px) and (min-width: 1921px) {
	.galleryAccueil, .logotypeBl {
		display: none !important;}	
	.homeBl::after {
		content: 'Veuillez agrandir votre navigateur pour une expérience optimale.';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
		margin: auto;
		text-align: center;
		padding: var(--marginBold);
		color: var(--colorBG);}	
}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE MOBILE */
@media (hover: none) {
	.container {
		min-height: 100dvh !important;	
		max-height: 100dvh !important;}	
	.homeBl {
		height: calc(100dvh - var(--menuHeight) - var(--marginBold)) !important;}
}