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

.menuBtn:nth-child(1) .fleche1 {
	opacity: 1;
	transform: rotate(45deg);}


/* --------------------------------------------------------------------------------------------------------------- CONTENT */
.content {
	width: 100%;
	box-sizing: border-box;}

.blocTitreProjets {
	margin-bottom: var(--marginBold);}

.blocMosaique {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--marginLight);
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;}

.projet {
	cursor: pointer;
	position: relative;
	display: block;
	grid-column: span 1;
	aspect-ratio: 21 / 29.7;}

.projet a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;}

.projetActive {
	opacity: 0;}

.imageProjetActive {
	transform: translateY(var(--marginBold)) !important;}

.blocImage {
	width: 100%;
	height: 100%;
	background-color: var(--colorTXT);}

.blocImage img, .blocImage video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;}

.blocImage video {
	background-color: var(--colorBG);}

.blocTexte {
	position: absolute;
	top: 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;}

.blocTitre, .blocTexte p {
    z-index: 1;
    position: relative;
    display: inline-block;
	transform: translateY(0);
	padding-right: calc(0.5 * var(--marginLight));}

.blocTitre h2::before {
    transition-delay: .1s !important;}

.noAnimation .blocTitre h2::before {
    transition-delay: 0s !important;}

.blocTitre h2::before, .blocTexte p::before {
    z-index: -1;
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0%;
    background-color: var(--colorBG);}

.moveRight h2::before, .moveRight p::before {
    right: 0;}

.projet:hover .moveRight h2::before, .projet:hover .moveRight p::before {
	left: 0;
    width: 100%;
	transition-delay: 0s !important;}

.moveLeft h2::before, .moveLeft p::before {
    left: 0;}

.projet:hover .moveLeft h2::before, .projet:hover .moveLeft p::before {
    left: auto;
    right: 0;
    width: 100%;
	transition-delay: 0s !important;}

.projet:hover .moveLeft p::before, .projet:hover .moveRight p::before {
	transition-delay: .1s !important;}

.noAnimation .projet:hover .moveLeft p::before, .noAnimation .projet:hover .moveRight p::before {
	transition-delay: 0s !important;}

.blocFleche {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center; 
    align-items: center;
    width: calc(2.5 * var(--marginLight));
    height: calc(2.5 * var(--marginLight));
	overflow: hidden;
	opacity: 0;
    background-color: var(--colorBG);}

.projet:hover .blocFleche {
	transition-delay: .75s;
    opacity: 1;}

.blocFleche .fleche2 {
    opacity: 1 !important;
    margin-right: 0 !important;
    transform: translate(calc(-1 * var(--marginMed)), var(--marginMed));}

.projet:hover .fleche2 {
    animation: animHover 0.25s 0.85s forwards cubic-bezier(.55,0,.29,.99);}

.projet:not(:hover) .fleche2 {
    animation: animUnhover 0.25s forwards cubic-bezier(.55,0,.29,.99);}

.noAnimation .projet:hover .fleche2 {
    animation: animHover 0s forwards cubic-bezier(.55,0,.29,.99);}

.noAnimation .projet:not(:hover) .fleche2 {
    animation: animUnhover 0s forwards cubic-bezier(.55,0,.29,.99);}

@keyframes animHover {
    from {
        transform: translate(calc(-1 * var(--marginMed)), var(--marginMed));
    }
    to {
        transform: translate(0, 0);
    }
}

@keyframes animUnhover {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(var(--marginMed), calc(-1 * var(--marginMed)));;
    }
}

.btnBack {
	display: flex;
	align-items: center;
	margin-top: var(--marginBold);}

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

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

.btnBack {
	margin-left: auto;}

.lines .blocMosaique {
	display: block;}

.lines .projet {
	aspect-ratio: unset;}

.lines .projet a {
	position: relative;}

.lines .blocImage {
    display: none;}

.lines .blocTexte {
	position: relative;
	top: unset;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--marginLight);
	border-bottom: solid var(--colorTXT) 2px;
	padding: var(--marginLight) 0;}

.lines .blocTexte p {
	margin-right: calc(3 * var(--marginLight));}

.lines .blocFleche {
	top: 0px;
	height: 100%;
	background-color: transparent;
	padding: 0;}

.lines .blocFleche .fleche2 {
	width: calc(1.5 * var(--marginLight));
	height: calc(1.5 * var(--marginLight));}

.lines .blocMosaique .projet:last-of-type .blocTexte {
	border-bottom: none;}

.lines .blocMosaique .projet:first-of-type .blocTexte {
	padding-top: 0;}

.lines .blocMosaique .projet:first-of-type .blocFleche {
	transform: translateY(calc(-0.5 * var(--marginLight)));}

.lines .blocMosaique h2, .lines .blocMosaique .blocTexte p {
	font-size: 1.75rem;
	line-height: unset;}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE */
@media screen and (min-width: 2000px) {
	.blocMosaique {
		grid-template-columns: repeat(5, 1fr);}
	.lines .blocMosaique h2, .lines .blocMosaique .blocTexte p {
		font-size: 2rem !important;}
}

@media screen and (max-width: 1200px) {
	.blocMosaique {
		grid-template-columns: repeat(3, 1fr);}
	.lines .blocMosaique h2, .lines .blocMosaique .blocTexte p {
		font-size: 1.5rem;}
}

@media screen and (max-width: 950px) {
	.lines .blocMosaique h2, .lines .blocMosaique .blocTexte p {
		font-size: 1.1rem;}
	.lines .blocFleche .fleche2 {
		width: calc(0.5 * var(--marginLight));
		height: calc(0.5 * var(--marginLight));}
}

@media screen and (max-width: 600px) {
	.lines .blocTexte {
		grid-template-columns: repeat(1, 1fr);}
	.lines .blocTexte p {
		display: none;}
	.lines .blocTitre {
		margin-right: calc(3 * var(--marginLight));}
}

@media screen and (max-width: 750px) {
	.blocMosaique {
		grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 450px) {
	.blocMosaique {
		grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 300px) {
	.lines .blocMosaique h2, .lines .blocMosaique .blocTexte p {
		font-size: 1rem;}
}


/* --------------------------------------------------------------------------------------------------------------- REPONSIVE MOBILE */
@media (hover: none) {
	.blocTitre h2::before, .blocTexte p::before {
		width: 100%;}
	.menuBtn:nth-child(1):hover .fleche1 {
		opacity: 1 !important;}
	.btnBack .fleche4 {
		opacity: 1;}
	.font .blocTitre h2:before, .font .blocTexte p:before {
		padding-left: calc(0.5 * var(--marginLight));}
	.font .blocTitre h2:before, .font .blocTexte p:before {
		left: calc(-0.5 * var(--marginLight));}
	.font .blocTitre h2, .font .blocTexte p {
		transform: translateX(calc(0.5 * var(--marginLight)));}
}