.video-principale{
	.video{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		iframe{
			width: 100%;
			aspect-ratio: 16/9;
			max-height: 500px;
		}
		a{
			display: block;
		}
	}
}

.filtre-projets{
	display: flex;
	flex-direction: row;
	column-gap: 20px;
	row-gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	button{
		margin: 0;
	}
}

.contProjets{
	margin-top: 30px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	a::after{
		content: none;
	}
	a{
		text-decoration: none !important;
		position: relative;
		overflow: hidden;
		aspect-ratio: 1;
		margin: 0;
		position: relative;
		&:hover .projet-content{
			top: 0%;
		}
		&:hover .projet-preview{
			top: -100%;
		}
		article{
			min-width: 200px;
			aspect-ratio: 1;
			padding: clamp(10px, 7%, 30px);
	
			overflow: hidden;
	
			background-size: cover;
			background-position: center center;
	
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20px;

			transition: all 0.5s ease-in-out;
			
			&.projet-content{
				background-color: var(--bleu);
				position: absolute;
				top: 100%;
				left: 0px;
				right: 0px;
				aspect-ratio: 1;
			}
			&.projet-preview{
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				aspect-ratio: 1;
			}
			h3{
				text-align: center;
				text-decoration: none !important;
				font-size: 1.7em;

				color: white;
				text-shadow:
					-1px -1px 0 var(--bleu),
					1px -1px 0 var(--bleu),
					-1px  1px 0 var(--bleu),
					1px  1px 0 var(--bleu)
				;
	
				margin: 0;
			}
			p{
				text-align: center;
				font-size: 1em;
				font-weight: 300;
				color: white;
			}
			&::hover{
				background-color: var(--bleu) !important;
			}
		}
	}
}

#actualites{
    .actus{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: 30px;
    }
    article{
        /* height: 100%; */
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: end;
        overflow: hidden;
        margin: 0;
        .content{
            height: 200px;
            overflow: hidden;
            -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
			*{
				margin-bottom: 10px !important;
			}
        }
		.actu-date{
			font-style: italic;
			margin: 0px;
		}
        h3{
			margin: 0;
			font-size: 1.7em;
			text-decoration: none;
        }
		.content{
			*{
				font-size: 0.9rem;
				font-weight: 200 !important;
				margin: 0;
			}
		}
        .button{
            margin: 0;
        }
    }
}

@media screen and (max-width: 1350px){
	.contProjets, #actualites .actus{
		margin-left: calc(var(--marges) / -2);
		margin-right: calc(var(--marges) / -2);
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 1000px){
	.contProjets, #actualites .actus{
		margin-left: unset;
		margin-right: unset;
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 750px){
	.contProjets, #actualites .actus{
		margin-left: calc(var(--marges) / -2);
		margin-right: calc(var(--marges) / -2);
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 550px){
	.contProjets, #actualites .actus{
		margin-left: unset;
		margin-right: unset;
		grid-template-columns: repeat(1, 1fr);
	}
}