:root{
	
	--principale:oklch(0.3516 0.097 269.42);
	
	--fondClair:oklch(0.8432 0.0199 273.2);
	
	--texte: #222;
	--grisTexte: #444;
	--grisBorder: #CCC;
	--grisAlpha: #F1F1F1;
	
	--paddingPetit: .5rem;
	--paddingMoyen: 1rem;
	--paddingHB: 2.5vw;
	--paddingGD: 15vw;
	
	--gapMain: 4rem;
	--gapSection: 2.5rem;
	--gapBloc: 1rem;
	
	--rapportLineHeight: 1.2;
	
}

*{margin:0;padding:0;}html{width:100%;box-sizing: border-box;font-size:100%;overflow-x:hidden;scroll-behavior: smooth;}img{border:none;}*, *:after, *:before{box-sizing: border-box;} 
body{background:#FFF;font-family:"Roboto", Arial, sans-serif;font-weight:400;font-size:1.4rem;line-height:calc(1.4 * 1.4rem);color:#222;text-align:center;} 

body.body_fr {
	button.selectLang.en {
		opacity: .5;
		filter: grayscale(1);
		&:hover{
			opacity: 1;
			filter: none;
		}
	}
	
	.lang_en{
		display: none;
	}
}
body.body_en {
	button.selectLang.fr {
		opacity: .5;
		filter: grayscale(1);
		&:hover{
			opacity: 1;
			filter: none;
		}
	}
	
	.lang_fr{
		display: none;
	}
}

body.presite{
	main{
		width: 100vw;
		height: 100vh;
		padding: var(--paddingGD);
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		justify-content: center;
		
		img{
			width: 20vw;
			border-radius: 20px;
		}
		
		span{
			font-family: "hagrid-text", sans-serif;
			font-weight: 400;
			font-size: 2.5rem;
			line-height: calc(var(--rapportLineHeight) * 2.5rem);
			color: var(--principale);
		}
	}
}

.mobileOnly{
	display: none;
}

a{
	color: var(--principale);
	
	&:hover{
		text-decoration-color: var(--texte);
	}
}
h1{
	font-family: "hagrid-text", sans-serif;
	font-weight: 400;
	font-size: 2.5rem;
	line-height: calc(var(--rapportLineHeight) * 2.5rem);
	color: var(--principale);
	&:last-child{
		margin-bottom: 0;
	}
}
h2{
	font-family: "hagrid-text", sans-serif;
	font-weight: 700;
	font-size: 2rem;
	line-height: calc(var(--rapportLineHeight) * 2rem);
	color: var(--principale);
	padding-bottom: var(--paddingPetit);
	border-bottom: 1px solid var(--fondClair);
	&:last-child{
		margin-bottom: 0;
	}
}
h3{
	font-family: "hagrid-text", sans-serif;
	font-weight: 700;
	font-size: 1.7rem;
	line-height: calc(var(--rapportLineHeight) * 1.7rem);
	color: var(--principale);
	&:last-child{
		margin-bottom: 0;
	}
}

p, ul, ol{
	margin-bottom: 1.4rem;
	
	&:last-child{
		margin-bottom: 0;
	}
}
li {
	margin-left: 1.4rem;
	margin-bottom: .5rem;

	&:last-child{
		margin-bottom: 0;
	}
}

.sousTitre{
	color: var(--grisTexte);
	font-family: "hagrid-text", sans-serif;
	font-weight: 300;	
	font-size: 1.6rem;
	line-height: calc(var(--rapportLineHeight) * 1.6rem);	
}

main{
	display: flex;
	flex-direction: column;
	gap: var(--gapMain);
	text-align: left;
	min-height: 100dvh;
}

header{
	background-color: var(--principale);
	color: white;
	padding: var(--paddingMoyen) var(--paddingGD);
	display: flex;
	flex-direction: row;
	font-size: 1rem;
	line-height: calc(var(--rapportLineHeight) * 1rem);
	justify-content: space-between;
	align-items: center;
	gap:  var(--paddingMoyen);
	position: sticky;
	top: 0;
	
	a{
		color: white;
		text-decoration: none;
	}
	
	h1{
		font-size:1rem;
		line-height: calc(var(--rapportLineHeight) * 1rem);
	}
	
	.navEtLangue{
		display: flex;
		gap: var(--paddingMoyen);
	}
	
	nav{
		display: flex;
		align-items: center;
		gap: var(--paddingPetit);
		
		a{
			padding: var(--paddingPetit);
			border-radius: 5px;
			&:hover, &.on{
				background-color: var(--fondClair);
				color: var(--principale);
			}
		}
	}
	.selectLangues{
		display: flex;
		gap: var(--paddingPetit);
		align-items: center;
		background-color: white;
		padding: var(--paddingPetit);
		border-radius: 5px;
	}
	button{
		background: transparent;
		border: none;
		cursor: pointer;
		display: flex;
	}
	img{
		height: 1.4rem;
		aspect-ratio: 4 / 3;
		border-radius: 3px;
		object-fit: contain;
	}
}

section.newsUne{
	padding: 0 var(--paddingGD);
	display: flex;
	flex-direction: column;
	gap: var(--gapSection);
	
	article{
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--gapSection);
		
		
		.illus{
			
			a{
				display: flex;
			}
			
			img{
				max-height: 30vw;
				max-width: 100%;
				aspect-ratio: 1 / 1;
				object-fit: cover;
			}
		}
		.texte{
			display: flex;
			flex-direction: column;
			gap: var(--gapBloc);
			justify-content: center;
			align-items: center;
			
			.contenu{
				display: flex;
				flex-direction: column;
				gap: var(--gapBloc);
				justify-content: center;
				align-items: flex-start;
				font-size: 2rem;
				line-height: calc(var(--rapportLineHeight) * 2rem);
			}
			
			h3{
				font-size: 2.5rem;
				line-height: calc(var(--rapportLineHeight) * 2.5rem);
			}
			
			a{
				text-decoration: none;
			}
			
			.bouton{
				background-color: var(--principale);
				color: white;
				padding: var(--paddingPetit) var(--paddingMoyen);
				border-radius: 10px;
				font-family: "hagrid-text", sans-serif;
				font-weight: 700;
				
				a{
					color: white;
				}
			}
		}
	}
}

section.blocJFDIFJIL{
	padding: 0 var(--paddingGD);
	display: flex;
	flex-direction: column;
	gap: var(--gapSection);
}

.blocsUne{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 0 var(--paddingGD);
	gap: var(--gapSection);

	&:has(article:nth-child(8)){
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	article{
		display: grid;
		grid-template-rows: 1fr auto;
		gap: 0;
	}
	.illus{
		a{
			display: flex;

			img{
				width: 100%;
				aspect-ratio: 3 / 2;
				object-fit: cover;
			}
		}
	}	
	.texte{
		padding: var(--paddingMoyen);
		background-color: var(--principale);
		color: white;
		a{
			text-decoration: none;
			color: white;
		}
	}
}

.debutArticle{
	display: flex;
	flex-direction: column;
	gap: var(--gapSection);
	
	.titreEtc{

		display: grid;	
		grid-template-columns: calc(var(--paddingGD) - var(--gapSection)) 1fr auto calc(var(--paddingGD) - var(--gapSection));
		gap: var(--gapBloc) var(--gapSection);
		grid-template-rows: auto auto auto 1fr;

		.illus {
			grid-area:1 / 3 / 5 / 4;
			background-color: var(--fondClair);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: var(--paddingMoyen);

			a{
				display: flex;
			}
			img{
				max-width: 20vw;
				max-height: 20vh;
				height: 100%;
				object-fit: contain;
			}
		}

		.titre{
			grid-area: 1 / 2 / 2 / 3;
		}
		.sousTitre{
			grid-area: 2 / 2 / 3 / 3;
		}
		.chapo{
			grid-area: 3 / 2 / 4 / 3;
		}
		
		&:has(.illus){
			&::before{
				content:" ";
				display: flex;
				grid-area: 1 / 3 / 5 / 5;
				background-color: var(--fondClair);
			}
		}

		&::after{
			content:" ";
			display: flex;
			grid-area: 1 / 1 / 5 / 2;
			border-right: 10px solid var(--fondClair);
		}

	}
	.contenu{
		padding: 0 var(--paddingGD);
	}
}



.finArticle{
	
	display: flex;
	flex-direction: column;
	gap: var(--gapBloc);
	
	&:empty{
		display: none;
	}
	
	.notesBasPage{
		font-size: 1.2rem;
		line-height: calc(var(--rapportLineHeight) * 1.2rem);
		color: var(--grisTexte);
		padding: var(--paddingHB) var(--paddingGD);
		border-top: 1px solid var(--fondClair);
		border-bottom: 1px solid var(--fondClair);
		
		h1, h2, h3, h4{
			border: none;
			padding: 0;
		}
	}
	
	.blocInfos{
		background-color: var(--principale);
		color: white;
		padding: var(--paddingHB) var(--paddingGD);

		a, h1, h2, h3, h4{
			color: white;
		}

		h1, h2, h3, h4{
			border: none;
			padding: 0;
		}
	}
}

.blocTexte{
	
	display: flex;
	flex-direction: column;
	gap: var(--gapSection);

	
	.embed{
		background-color: var(--texte);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 var(--paddingGD);
		color: white;
		
		iframe{
			aspect-ratio: 16 / 9;
			max-width: 100%;
			max-height: 30vh;
		}
	}
	
	.illus.imageAvantApres {
		background-color: var(--fondClair);
		display: flex;
		align-items: center;
		justify-content: center;
		
		a{
			display: flex;
		}
		img{
			max-height: 40vh;
			width: 100%;
			object-fit: contain;
		}
	}
	
	.texteEtImages{
		display: grid;
		grid-template-columns: calc(var(--paddingGD) - var(--gapSection)) var(--paddingGD) 1fr var(--paddingGD) calc(var(--paddingGD) - var(--gapSection));
		gap: var(--gapSection);
		
		.imageGauche, .imageDroite{
			background-color: var(--fondClair);
			padding: var(--paddingHB);
			height: fit-content;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;
			
			img{
				width: 100%;
				height: auto;
			}
		}
		
		.imageGauche{
			grid-column-start: 1;
			grid-column-end: 3;
		}

		.imageDroite{
			grid-column-start: 4;
			grid-column-end: 6;
		}

		.texteComplet{
			grid-row-start: 1;
			grid-row-end: 2;
			grid-column-start: 2;
			grid-column-end: 5;
			display: flex;
			flex-direction: column;
			gap: var(--gapBloc);

			.texteDebutArticle{
				display: flex;
				flex-direction: column;
				gap: var(--gapBloc);
				
				.chapo:empty, .contenu:empty{
					display: none;
				}

				&:has(.chapo:empty){
					display: none;

					&:has(.contenu){
						display: flex;
					}
				}
			}
		}
		&:has(.imageGauche){ 
			.texteComplet{
				grid-column-start: 3;
			}
		}
		&:has(.imageDroite){ 
			.texteComplet{
				grid-column-end: 4;
			}
		}
	}
}


footer{
	background-color: var(--fondClair);
	color: var(--principale);
	padding: var(--paddingMoyen) var(--paddingGD);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap:  var(--paddingMoyen);
	flex-grow: 2;
	
	p{
		margin: 0;
	}
	
	a{
		color: var(--principale);
	}
	
}

section.erreur404{
	padding: 0 var(--paddingGD);
	display: flex;
	flex-direction: column;
	gap: var(--gapSection);
}

@media screen and (max-width : 1450px){
	header h1{
		.desktopOnly{
			display: none;
		}
		.mobileOnly{
			display: unset;
		}
	}
}
@media screen and (max-width : 1080px){
	:root{
		--paddingHB: 5vw;
		--paddingGD: 5vw;
	}
	
	body{
		font-size:1.6rem;
		line-height: calc(var(--rapportLineHeight) * 1.6rem);
	} 
	
	body.presite{
		main{
			img{
				width: 100%;
			}
		}
	}
	
	.desktopOnly{
		display: none;
	}
	.mobileOnly{
		display: unset;
	}

	header{

		h1, nav{
			font-size:1.6rem;
			line-height: calc(var(--rapportLineHeight) * 1.6rem);
		}
		
		.selectLangues{
			gap: var(--paddingMoyen);
			padding: var(--paddingMoyen);
			img{
				height:48px;
			}
		}
	}
	
	section.newsUne{
		article{
			grid-template-columns: 1fr;
			
			.illus{
				display: flex;
				justify-content: center;
				
				img{
					width: 100%;
					max-height: unset;
				}
			}
			.texte{
				align-items: flex-start;

				.contenu{

				}
			}
		}
	}
	.blocsUne{
		grid-template-columns: 1fr;
	}
	
	.debutArticle{
		
		.titreEtc{	
			grid-template-columns: calc(var(--paddingGD) - var(--gapSection)) 1fr calc(var(--paddingGD) - var(--gapSection));
			gap: var(--gapSection);
			grid-template-rows: unset;
			grid-auto-rows: auto;

			.illus {
				
				a{

					img{
						max-height: 40dvh;
						max-width: 100%;
					}
				}
			}

			.illus, .titre, sousTitre, .chapo{				
				grid-area: unset;
				grid-column-start: 2;
			}

			&:has(.illus){
				&::before{
					content:unset;
				}
			}

			&::after{
				content:unset;
			}

		}
	}
	
	footer{
		font-size:1.4rem;
		line-height: calc(var(--rapportLineHeight) * 1.4rem);
	}
}