/* --------------------------------------------------------------------------------------------------------------- GENERAL */
a, button, p, h1, h2, h3 {
	margin: 0;
	padding: 0;}

.blocFooter {
	margin-top: var(--marginMed) !important;}

.customCursor {
	z-index: 97;
	position: fixed;
	display: none;
	width: 120px;
	height: 120px;
	background-color: #ee751c; 
	border-radius: 50%;
	pointer-events: none;
	mix-blend-mode: multiply;
	transform: translate(-20px, -20px);
	transition: transform 0s ease;}

.customCursorActive {
	display: block;}


/* --------------------------------------------------------------------------------------------------------------- CONTENT */
.content {
	margin: 0;}

.blocImages {
	position: relative;
	width: auto;
	height: var(--blImH);
	max-height: var(--blImH);
	overflow: hidden;
	align-items: stretch;}

.drawingUI .blocImages {
	height: var(--blImHDraw);
	max-height: var(--blImHDraw);}

.blocTranslate {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--marginLight);
	width: auto;
	height: 100%;}

.selected { 
	z-index: 3;
	transform: translateX(0%);}

.preSelected {
    z-index: 0;
	position: absolute;
	transform: translateX(calc(-100% - var(--marginLight)));}

.blocImages.left, .blocImages.right {
    cursor: none;}

.lightboxPlus, .numero {
	z-index: 10;
    cursor: auto;}

.lightboxPlus, .closeLightbox {
	cursor: pointer;}

.image, .video {
	display: flex;
	height: 100%;
	max-height: 100%;
	width: auto;}

.portrait {
	aspect-ratio: 21 / 29.7;}

.landscape {
	aspect-ratio: 29.7 / 21;}

.image img {
	width: auto;
	height: 100%;
	max-height: 100%;
	object-fit: contain;}

.video video {
	width: 100%;
	height: 100%;
	object-fit: cover;}

video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    user-select: none;}

.blocLink {
	position: relative;
	width: 100%;}

.linkImage a {
	position: absolute;
	top: 50%;
	left: 50%;
	height: calc(3 * var(--blH));
    width: calc(3 * var(--blH));
	transform: translate(-50%, -50%);
	transform-origin: center;
	border-radius: 2px;
	background-color: var(--colorBG);}

.linkImage a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-top: var(--marginMed) solid transparent;
    border-bottom: var(--marginMed) solid transparent;
    border-left: var(--marginBold) solid var(--colorTXT);
    transform: translate(calc(-50% + 2px), -50%);}

.buttonPlay::before {
    content: 'voir la video';
    position: absolute;
    top: calc(50% + (2 * var(--blH)) + var(--marginLight));
	left: 50%;
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
	transform: translate(-50%, -50%);}

.buttonPlay:hover::before {
	opacity: 1;
	visibility: visible;}

.blocNum {
	position: absolute;
	display: flex;
	align-items: flex-start;
	top: 0;
	left: 0;}

.imageSized .blocNum {
	top: unset;
	bottom: 0;
	align-items: flex-end;}

.numero {
	display: flex;
	background-color: var(--colorBG);
	padding: 0 calc(var(--marginLight) / 2);}

.numero p {
	text-align: center;
	min-width: var(--marginMed);}

.lightboxPlus {
	position: relative;
	display: flex;
	justify-content: center; 
    align-items: center;
	height: calc(2 * var(--blH));
	width: calc(2 * var(--blH));
	background-color: var(--colorTXT);}

.lightboxPlus:hover .fleche5 {
	transform: translate(calc(var(--marginLight) * 1), calc(var(--marginLight) * -0.75));}

.lightboxPlus:hover .fleche6 {
	transform: translate(calc(var(--marginLight) * -1), calc(var(--marginLight) * 0.75)) rotate(180deg);}

.blocTextes {
	width: 100%;
	margin-top: var(--marginBold);}

.blocTitre {
	display: flex;
	gap: var(--marginMed);
	width: 100%;}

.blocLeft {
	display: flex;
	flex-wrap: wrap;

	width: 66.6667%;}

.blocRight {
	display: flex;
	width: 33.3333%;}

.btnInfo, .btnNext {
	display: flex;
	align-items: center;
	margin-right: var(--marginMed);}

.btnNext {
	margin-right: 0;}

.btnNext a {
	transform: translateX(calc(2 * var(--marginLight) + 2px));}

.btnNext:hover a {
	transform: translateX(0);}

.btnNext:hover .fleche4 {
	transition-delay: .25s;
	opacity: 1;}

.btnInfo:hover .fleche3 {
	transform: translateY(calc(-1 * var(--marginLight))) rotate(-45deg);}

.infoActive:hover .fleche3 {
	transform: translateY(var(--marginLight)) rotate(135deg);}

.infoActive .fleche3 {
	transform: rotate(135deg);}

.commanditaire {
	margin-left: calc(2.5 * var(--marginBold));}

.btnNext {
	margin-left: auto;}

.blocInformations {
	display: flex;
	gap: var(--marginMed);
	width: 100%;
	height: 0px;
	overflow: hidden;
	margin-top: var(--marginBold);}

.textes {
	margin-right: calc(2 * var(--marginBold));}

.informations div {
	display: flex;}

.infoDivActive {
	transform: translateY(var(--marginMed));}

.noAnimation .infoDivActive {
	transform: translateY(0);}

h3 {
	margin-right: var(--marginMed);}

.lightbox, .videoLightbox {
	z-index: 101;
	display: none;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--colorBG);
	box-sizing: border-box;
	padding: var(--marginLight);}

.multiColored .lightbox img, .multiColored .lightbox video {
	filter: grayscale(0%) !important;
	mix-blend-mode: normal !important;}

.lightboxBlocControls {
	z-index: 10;
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-bottom: var(--marginLight);}

.control1, .control2 {
	display: flex;
	align-items: center;}

.lightboxBlocImage, .lightboxBlocVideo {
	cursor: pointer;
	display: flex;
	align-items: center;
	vertical-align: middle;
	width: 100%;
	height: calc(100dvh - var(--navHeight));
	max-height: calc(100dvh - var(--navHeight) - var(--marginBold));
	padding: var(--marginBold);
	box-sizing: border-box;}

.lightbox img, .lightbox video, .videoLightboxContent {
	cursor: default;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	margin: auto;}

.videoLightboxContent {
	position: relative;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 29.7 / 21;}

.videoLightboxContent iframe {
	width: 100%;
	height: 100%;}

.titreProjet, .lightbox .numero, .lightbox .blocFleche {
	margin-right: calc(2 * var(--marginBold));}

.lightbox .blocFleche {
	display: flex;
	align-items: center;
	vertical-align: middle;
	margin-left: auto;}

.touch .lightbox .blocFleche {
	margin-right: var(--marginBold);}

.flecheLeft, .flecheRight {
	cursor: pointer;
	height: 100%;
	padding: calc(0.5 * var(--marginLight));}

.touch .lightbox .flecheLeft, .touch .lightbox .flecheRight {
	border: solid var(--colorTXT) 2px;
	padding: calc(1.5 * var(--marginLight));}

.flecheLeft {
	margin-right: calc(var(--marginLight));}

.touch .lightbox .flecheLeft {
	border-right: 0;
	margin-right: 0;}

.closeLightbox {
	padding: calc(0.5 * var(--marginLight));}

.touch .lightbox .closeLightbox {
	border: solid var(--colorTXT) 2px;
	background-color: var(--colorTXT);
	border-radius: 100%;
	padding: calc(1.5 * var(--marginLight));}

.touch .lightbox .closeLightbox .cross1:before, .touch .lightbox .closeLightbox .cross1:after {
	border-color: var(--colorBG);}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE */
@media screen and (min-width: 2000px) {
	.linkImage a {
		height: calc(4 * var(--blH));
		width: calc(4 * var(--blH));}
}

@media screen and (max-width: 950px) {
	.blocImages, .blocTranslate, .drawingUI .blocImages {
		width: 100%;
		height: auto;
		max-height: unset;
		aspect-ratio: 29.7 / 21;}
	.image, .video {
		position: absolute;
		width: 100%;
		height: auto;
		max-height: unset;}
	.image:not(.preSelected, .selected, .nextSelected, .nextSelected2), .video:not(.preSelected, .selected, .nextSelected, .nextSelected2) {
		display: none;}
	.landscape {
		width: 100%;}
	.portrait {
		width: 50%;}
	.selected {
		z-index: 3;}
	.nextSelected {
		z-index: 2;}
	.nextSelected2 {
		z-index: 1;}
	.image img {
		width: 100%;
		height: auto;
		max-height: unset;}
	.blocNum {
		align-items: flex-end;
		top: unset;
		bottom: 0;}
	.btnInfo {
		display: none;}
	.blocInformations {
		height: auto;}
	.blocLeft {
		width: 60%;}
	.blocRight {
		width: 40%;}
	.informations {
		margin-left: auto;}
	.infoDivActive {
		transform: translateY(0);}
	h1 {
		margin-right: var(--marginLight);}
	.commanditaire {
		margin-left: auto;}
	.textes {
		margin-right: 0;}
}

@media screen and (max-width: 800px) {
	.blocTitre, .blocInformations {
		flex-direction: column;
		gap: 0;}
	.blocTitre .blocLeft, .blocInformations .blocLeft {
		width: 100%;}
	.blocInformations .blocRight {
		width: 100%;
		margin-top: var(--marginBold);}
	.informations {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 calc(1 * var(--marginBold));
		margin-left: 0;}
	.btnNext {
		margin-left: 0;}
	.btnNext a {
		transform: translateX(0);}
	.titreProjet {
		margin-right: var(--marginMed);}
	.lightbox .numero {
		margin-right: var(--marginLight);}
}

@media screen and (max-width: 600px) {
	.informations {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
		margin-left: 0;}
	.lightboxBlocImage, .lightboxBlocVideo {
		padding: var(--marginBold) 0;
		padding-bottom: 0;}
	.lightbox .lightboxBlocControls {
		flex-direction: column;}
	.lightbox .numero {
		margin-right: 0;
		margin-left: auto;
		padding-right: 0;}
	.lightbox .numero p:last-of-type {
		text-align: right;
		padding: 0;}
	.lightbox .control2 {
		margin-top: var(--marginMed);}
	.lightbox .control2 .blocFleche {
		margin-right: var(--marginMed);}
	.videoLightbox .control2 {
		margin-left: auto;}
}

@media screen and (max-width: 500px) {
	.blocTextes .blocLeft {
		flex-direction: column;}
	.commanditaire {
		margin-left: 0;}
	.lightboxBlocImage, .lightboxBlocVideo {
		padding: var(--marginBold) 0;}
	.lightboxBlocControls {
		flex-direction: column;}
	.lightboxBlocImage, .lightboxBlocVideo {
		order: 1;}	
	.lightboxBlocControls {
		order: 2;
		padding-bottom: 0;
		padding-top: var(--marginLight);}
	.lightbox .control2 {
		order: 1;
		margin-top: 0;
		margin-bottom: var(--marginMed);}	
	.control1 {
		order: 2;}
	.linkImage a {
		height: calc(2 * var(--blH));
		width: calc(2 * var(--blH));}
	.linkImage a::after {
		border-top: var(--marginLight) solid transparent;
		border-bottom: var(--marginLight) solid transparent;
		border-left: var(--marginMed) solid var(--colorTXT);}
	.buttonPlay::before {
		top: calc(50% + var(--blH) + 2 * var(--marginLight));}
}

@media screen and (max-width: 400px) {
	.control1 .numero {
		display: none;}
}

@media screen and (max-height: 700px) {
 	{
		height: calc(100dvh - 2 * var(--marginLight));
		max-height: calc(100dvh - 2 * var(--marginLight));}
}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE MOBILE */
@media (hover: none) {
	.btnNext .fleche4 {
		opacity: 1;}	
	.lightboxPlus .fleche5 {
		animation: animationFl5 10s 1s infinite cubic-bezier(.55,0,.29,.99);}
	.lightboxPlus .fleche6 {
		animation: animationFl6 10s 1s infinite cubic-bezier(.55,0,.29,.99);}

	@keyframes animationFl5 {
		0% {
			transform: translateX(calc(var(--marginLight) * 0.5 - 1px));
		}
		5% {
			transform: translate(calc(var(--marginLight) * 1), calc(var(--marginLight) * -0.75));
		}
		10% {
			transform: translateX(calc(var(--marginLight) * 0.5 - 1px));
		}
	}
	@keyframes animationFl6 {
		0% {
			transform: translateX(calc(var(--marginLight) * -0.5 + 1px)) rotate(180deg);
		}
		5% {
			transform: translate(calc(var(--marginLight) * -1), calc(var(--marginLight) * 0.75)) rotate(180deg);
		}
		10% {
			transform: translateX(calc(var(--marginLight) * -0.5 + 1px)) rotate(180deg);
		}
	}
	.noAnimation .lightboxPlus .fleche5 {
		animation: noAnimationFl5 10s 1s infinite cubic-bezier(.55,0,.29,.99);}
	.noAnimation .lightboxPlus .fleche6 {
		animation: noAnimationFl6 10s 1s infinite cubic-bezier(.55,0,.29,.99);}

	@keyframes noAnimationFl5 {
		0% {
			transform: translateX(calc(var(--marginLight) * 0.5 - 1px));
		}
		0.01% {
			transform: translate(calc(var(--marginLight) * 1), calc(var(--marginLight) * -0.75));
		}
		5% {
			transform: translate(calc(var(--marginLight) * 1), calc(var(--marginLight) * -0.75));
		}
		5.01% {
			transform: translateX(calc(var(--marginLight) * 0.5 - 1px));
		}
	}
	@keyframes noAnimationFl6 {
		0% {
			transform: translateX(calc(var(--marginLight) * -0.5 + 1px)) rotate(180deg);
		}
		0.01% {
			transform: translate(calc(var(--marginLight) * -1), calc(var(--marginLight) * 0.75)) rotate(180deg);
		}
		5% {
			transform: translate(calc(var(--marginLight) * -1), calc(var(--marginLight) * 0.75)) rotate(180deg);
		}
		5.01% {
			transform: translateX(calc(var(--marginLight) * -0.5 + 1px)) rotate(180deg);
		}
	}	
	.lightboxPlus:hover .fleche5 {
		transform: translateX(calc(var(--marginLight) * 0.5 - 1px));}	
	.lightboxPlus:hover .fleche6 {
		transform: translateX(calc(var(--marginLight) * -0.5 + 1px)) rotate(180deg);}
	
	.btnInfo:hover .fleche3 {
		transform: rotate(-45deg);}
	.infoActive:hover .fleche3 {
		transform: rotate(135deg);}
	.btnNext a {
		transform: translateX(0);}
	.buttonPlay::before {
		display: none !important;}
	
	.customCursor {
		background-color: transparent !important;
		display: none !important;}
}