/*////////////////////////
Général
////////////////////////*/

*
{
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}
:root
{
	--font-family:'Inter', sans-serif;
	/* Espace entre lettres pour un corps 16px/1rem. Pas d'unité car on va s'en servir comme ratio. */
	--letter-spacing-rem: -0.05; 
	
	--corps-mobile-titre1: 2.8125rem;
	--corps-mobile-titre2: 1.625rem;
	--corps-mobile-titre3: 1.125rem;
	--corps-mobile-titre4: 1rem;
	--corps-mobile-defaut: .875rem;
	--corps-mobile-petit: .6875rem;
	
	--corps-tablette-titre1: 3.4375rem;
	--corps-tablette-titre2: 2rem;
	--corps-tablette-titre3: 1.25rem;
	--corps-tablette-titre4: 1.125rem;
	--corps-tablette-defaut: 1rem;
	--corps-tablette-petit: .8125rem;
	
	--corps-desktop-titre1: 4.375rem;
	--corps-desktop-titre2: 2.5rem;
	--corps-desktop-titre3: 1.625rem;
	--corps-desktop-titre4: 1.5rem;
	--corps-desktop-defaut: 1.25rem;
	--corps-desktop-petit: 1rem;
	
	--couleur-primaire: #333333;
	--couleur-secondaire: #999999;
	--couleur-habillage: #d2d2d2;
	--couleur-fond: #f2f2f2;
	
	--couleur-primaire-transparente: rgba(51, 51, 51, .7);
	--couleur-habillage-transparente: rgb(210, 210, 210, .0);
	
	--border-radius: .8rem;
	
	--bordure-epaisseur: 1px;
	--bordure-pleine-primaire: var(--bordure-epaisseur) solid var(--couleur-primaire);
	--bordure-pleine-habillage: var(--bordure-epaisseur) solid var(--couleur-habillage);
	--bordure-pointillee-habillage: var(--bordure-epaisseur) dashed var(--couleur-habillage);
	
	/* --rayures: repeating-linear-gradient(-45deg, 
		var(--couleur-habillage),
		var(--couleur-habillage) 3px,
		var(--couleur-fond) 3px,
		var(--couleur-fond) 6px); */
}
body
{
	background-color: var(--couleur-fond);
	color:var(--couleur-primaire);
	font-family: var(--font-family);
	font-weight: 500;
		
	--font-size: var(--corps-mobile-defaut);
	font-size: var(--font-size);
	letter-spacing: calc(var(--font-size) * var(--letter-spacing-rem));
	line-height: 1.25rem;
	
	opacity: 1;
	transition: opacity .3s ease;
}
body.charge
{
	visibility: hidden;
}
body.transitionMasquer
{
	opacity: 0;
}
body.bloquer
{
	overflow: hidden; 
	height: 100dvh;
}
.conteneurPrincipal
{
	margin: 0 auto;
	position: relative;
	/* hauteur ajustée au parent ET autoriser la disparition de la nav mobile */
	min-height: 100vh;
	/* Rien ne dépasse */
	overflow: hidden;
}
@media (min-width: 600px) and (max-width: 1365px)
{
	.conteneurPrincipal
	{
		max-width: 1024px;
	}
	body
	{
		--font-size: var(--corps-tablette-defaut);
		line-height: 1.42rem;
	}
}
@media (min-width: 1366px)
{
	.conteneurPrincipal
	{
		max-width: 1366px;
	}
	body
	{
		--font-size: var(--corps-desktop-defaut);
		line-height: 1.8rem;
	}
}

/*////////////////////////
Texte
////////////////////////*/

i,
em,
.italique
{
	font-style: italic;
}
/* b,
strong,
.gras
{
	font-weight: 800;
} */
b,
strong,
.extraGras
{
	font-weight: 800;
}
h1, h2, h3, h4
{
	font-size: var(--font-size);
	letter-spacing: calc(var(--font-size)*var(--letter-spacing-rem));
	line-height: var(--font-size);	
}
h1
{
	font-weight: 800;
	
	--font-size:var(--corps-mobile-titre1);
	margin-bottom: 1.5rem;
}
h2
{
	font-weight: 800;
	
	--font-size:var(--corps-mobile-titre2);
	margin-bottom: 1.6rem;
}
h3
{
	font-weight: 800;
	
	--font-size:var(--corps-mobile-titre3);
	margin-bottom: 1rem;
}
h4
{
	font-weight: 800;
	
	--font-size:var(--corps-mobile-titre4);
	margin-bottom: 1rem;
}
p
{
	text-align: justify;
}
.petit,
figcaption
{
	--font-size: var(--corps-mobile-petit);
	font-size: var(--font-size);
	letter-spacing: calc(var(--font-size)*var(--letter-spacing-rem));
	line-height: 1.2rem;
}
figcaption
{
	text-align: right;
	color: var(--couleur-secondaire);
	margin: .6rem 0;
}
ul,
ol
{
	text-align: justify;
}
sup
{
	position: relative;
	vertical-align: baseline;
	top: -.3rem;
}
@media (min-width: 600px) and (max-width: 1365px)
{
	h1 
	{ 
		--font-size:var(--corps-tablette-titre1); 
		margin-bottom: 1.83rem;
	}
	h2 
	{ 
		--font-size:var(--corps-tablette-titre2); 
	}
	h3 
	{ 
		--font-size:var(--corps-tablette-titre3);
		margin-bottom: 1.1rem;
	}
	h4 
	{ 
		--font-size:var(--corps-tablette-titre4); 
		margin-bottom: 1.1rem;
	}
	.petit,
	figcaption
	{
		--font-size: var(--corps-tablette-petit);
		line-height: 1.4rem;
	}
}
@media (min-width: 1366px)
{
	h1 
	{ 
		--font-size:var(--corps-desktop-titre1); 
		margin-bottom: 2.3rem;
	}
	h2 
	{ 
		--font-size:var(--corps-desktop-titre2); 
		margin-bottom: 2.2rem;
	}
	h3 
	{ 
		--font-size:var(--corps-desktop-titre3); 
		margin-bottom: 1.4rem;
	}
	h4 
	{ 
		--font-size:var(--corps-desktop-titre4); 
		margin-bottom: 1.1rem;
	}
	.petit,
	figcaption
	{
		--font-size: var(--corps-desktop-petit);
		line-height: 1.6rem;
	}
}
/* Dans un bloc de contenu, tout enfant direct sauf le dernier a une marge basse. */
.blocContenu > *:not(:last-child) { margin-bottom: 1.5rem; }
@media (min-width: 600px) and (max-width: 1365px)
{
	.blocContenu > *:not(:last-child) { margin-bottom: 1.7rem; }
}
@media (min-width: 1366px)
{
	.blocContenu > *:not(:last-child) { margin-bottom: 2.1rem; }
}

/*////////////////////////
Focusables
////////////////////////*/

a
{
	text-decoration: none;
	color: var(--couleur-primaire);
}
a.appelAction
{
	border-radius: 3rem;
	display: inline-block;
}
a.appelAction span
{
	padding: .7rem 1.3rem; 
	border: var(--bordure-pleine-primaire);
	border-radius: 3rem;
	display: inline-block;
	transform: scale(1);
	transition: transform .3s ease-out, background-color .1s ease, color .1s ease;
}
a.mineur span
{
	border: var(--bordure-pleine-habillage);
}
@media (hover: hover)
{
	a.appelAction:hover span
	{
		border: var(--bordure-pleine-primaire);
		color: var(--couleur-fond);
		background-color: var(--couleur-primaire);
	}
}
@media (min-width: 600px) and (max-width: 1365px)
{
	a.appelAction span { padding: .8rem 1.5rem; }
}
@media (min-width: 1366px)
{
	a.appelAction span { padding: 1.2rem 1.8rem; }
}
a.appelAction:active span
{
	transform: scale(.85);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
p a 
{
	display: inline-block;
}
p a span
{
	color: var(--couleur-secondaire);
	border-bottom-width: 1px;
	border-bottom-color: var(--couleur-fond);
	border-bottom-style: solid;
	transform: scale(1);
	transition: transform .3s ease-out, border-bottom .1s ease;
	display: inline-flex; 
	flex-wrap: wrap;
	align-items: center;
}
p a span::after
{
	display: inline-block;
	margin: .15rem .2rem 0 .2rem;
	content: "";
	height: 10px;
	width: 10px;
	/* background-size: 13px 13px; */
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
p a:not(a[target=_blank]) span::after
{
	background-image: url(/img/ui/fleche.svg);
}
p a[target=_blank] span::after
{
	background-image: url(/img/ui/flecheCrochet.svg);
}
@media (hover: hover)
{
	p a:hover span
	{
		border-bottom-color: var(--couleur-habillage);
	}
}
p a:active span
{
	transform: scale(.85);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
@media (min-width: 600px) and (max-width:1365px)
{
	p a span::after
	{
		height: 12px;
		width: 12px;
		/* background-size: 16px 16px; */
		margin: .1rem .3rem 0 .3rem;
	}
}
@media (min-width: 1366px)
{
	p a span::after
	{
		height: 14px;
		width: 14px;
		/* background-size: 18px 18px; */
		margin: .0rem .4rem 0 .4rem;
	}
}
figcaption a span
{
	text-decoration: underline;
	color:var(--couleur-secondaire);
	transform: scale(1);
	transition: transform .3s ease-out, color .1s ease;
	display: inline-block;
}
@media (hover: hover)
{
	figcaption a:hover span
	{
		color: var(--couleur-primaire);
	}
}
figcaption a:active span
{
	transform: scale(.85);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
button
{
	background-color: transparent;
	cursor: pointer;
}

/*////////////////////////
Grille
////////////////////////*/

.grille
{
	display: grid;
	grid-template-columns: repeat(2, 1fr); 
	gap: 1.25rem; 
}
.colonne
{
	grid-column: span 1;
}
.colonne1,
.colonne1span2,
.colonne1span3,
.colonne1span4,
.colonne2span3,
.colonne2span2,
.colonne3span2,
.colonne4
{
	grid-column: span 2;
}
@media (min-width: 600px)
{
	.grille 
	{
		grid-template-columns: repeat(4, 1fr); 
	}	
	.colonne1
	{
		grid-column: 1;
	}
	.colonne1span2
	{
		grid-column: 1 / span 2;
	}
	.colonne1span3
	{
		grid-column: 1 / span 3;
	}
	.colonne1span4
	{
		grid-column: 1 / span 4;
	}
	.colonne2span3
	{
		grid-column: 2 / span 3;
	}
	.colonne2span2
	{
		grid-column: 2 / span 2;
	}
	.colonne3span2
	{
		grid-column: 3 / span 2;
	}
	.colonne4
	{
		grid-column: 4;
	}
}
@media (min-width: 600px) and (max-width: 1365px)
{
	.grille 
	{
		gap: 1.5rem;
	}	
}
@media (min-width: 1366px)
{
	.grille 
	{
		gap: 2rem;
	}	
}

/*////////////////////////
Header
////////////////////////*/

header
{
	display: flex;
	flex-direction: column;
	transition: max-height .4s ease-in-out, opacity .4s ease;
	height: 100dvh;
	max-height: 3.5rem;
	opacity: 0;	
}
header.pret
{
	opacity: 1;
}
header > div
{
	display: flex;
	justify-content: space-between;
}
header > div > a,
header > div > button
{
	padding: 1rem 1.5rem 1.1rem 1.5rem; 
	transform: scale(1);
}
header > div > a
{
	font-weight: 800;
	display: inline-block;	
	transition: transform .3s ease-out, color .1s ease;
}
header > div > button
{
	font-family: var(--font-family);
	--font-size: var(--corps-mobile-defaut);
	font-size: var(--font-size);
	letter-spacing: calc(var(--font-size) * var(--letter-spacing-rem));
	color:var(--couleur-primaire);
	transition: transform .3s ease-out, color .1s ease, opacity .3s ease;
}
header > div > a:active,
header > div > button:active
{
	transform: scale(.85);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
header > div > button.disparaitre
{
	opacity: 0;
}
header > div > button:disabled,
header > div > button[disabled]
{
	display: none;
}
@media (hover: hover)
{
	header > div > a:hover,
	header > div > button:hover
	{
		color: var(--couleur-secondaire);
	}
}
@media (min-width: 600px) and (max-width: 1365px)
{
	header { max-height: 5rem; }
	header > div > a,
	header > div > button
	{
		padding: 1.6rem 1.9rem 1.7rem 1.9rem; 
	}
	header > div > button { --font-size: var(--corps-tablette-defaut); }
}
@media (min-width: 1366px)
{
	header { max-height: 6.5rem; }
	header > div > a,
	header > div > button
	{
		padding: 2.2rem 1.9rem 2.3rem 1.9rem; 
	}
	header > div > button { --font-size: var(--corps-desktop-defaut); }
}
header > nav
{
	display: none;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	margin: 0 1.25rem;
	padding-bottom: 1.25rem;
	flex-basis: 100%;
	gap: .4rem 1.5rem;
}
@media (min-width: 600px) and (max-width: 1365px)
{
	header > nav
	{
		margin: 0 1.875rem;
	}
}
@media (min-width: 1366px)
{
	header > nav
	{
		margin: 0 1.9rem;
	}
}
header.ouvert
{
	max-height: 100dvh;
}
header.afficherNav > nav
{
	display: flex;
}
header > nav div
{
	opacity: 0;
	transform: translateY(-.5rem);
	transition: opacity .3s ease-out, transform .3s ease-out;
}
header > nav a 
{
	display: flex;
	justify-content: stretch;
	align-items: stretch;
}
header > nav a span
{
	font-weight: 800;
	color:var(--couleur-secondaire);
	
	--font-size: var(--corps-mobile-titre1);
	font-size: var(--font-size);
	letter-spacing: calc(var(--font-size) * var(--letter-spacing-rem));
	line-height: var(--font-size);
	
	transition: color .2s ease-in-out;
} 
@media (min-width: 600px) and (max-width: 1365px)
{
	header > nav a span { --font-size: var(--corps-tablette-titre1); }
}
@media (min-width: 1366px)
{
	header > nav a span { --font-size: var(--corps-desktop-titre1); }
}
@media 
	(max-height: 370px) and (max-width: 599px),
	(max-height: 455px) and (min-width: 600px) and (max-width: 1023px),
	(max-height: 455px) and (min-width: 1024px) and (max-width: 1365px),
	(max-height: 570px) and (min-width: 1366px) 
{
	header > nav
	{
		flex-direction: row;
		flex-wrap: wrap;
		align-content: center;
		justify-content: flex-start;
	}
}
@media (max-height: 365px) 
{
	header > nav { gap: .4rem .8rem; }
	header > nav a span { --font-size: 1.5rem; }
}
header > nav a span
{
	display: inline-block;
	transform: scale(1);
	transition: transform .3s ease-out, color .2s ease-in-out;
}
header.ouvert > nav a:active span
{
	transform: scale(.85);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
header > nav a.choisi span
{
	color: var(--couleur-primaire);
}
header.ouvert > nav div
{
	opacity: 1;
	transform: translateY(0);
}
header.ouvert > nav div:nth-child(1) { transition-delay: .3s; }
header.ouvert > nav div:nth-child(2) { transition-delay: .35s; }
header.ouvert > nav div:nth-child(3) { transition-delay: .4s; }
header.ouvert > nav div:nth-child(4) { transition-delay: .45s; }
header.ouvert > nav div:nth-child(5) { transition-delay: .5s; }
header.ouvert > nav div:nth-child(6) { transition-delay: .55s; }
@media (hover: hover)
{
	header > nav:has(a:hover) a:not(:hover) span
	{
		color: var(--couleur-habillage);
	}
	header > nav a:hover span
	{
		color: var(--couleur-primaire);
	}
}

/*////////////////////////
Main
////////////////////////*/

main
{
	padding: 1.5rem 1.5rem 1.5rem 1.5rem;
	transition: max-height .4s ease-in-out;
	
	display: flex;
	flex-direction: column;
	justify-content: stretch;
	align-items: stretch;
	min-height: calc(100dvh - 8rem);
}
main.masquer
{
	overflow: hidden;
	pointer-events: none;
	user-select: none;
	max-height: 0;
	visibility: hidden;
}
@media (min-width: 600px) 
{
	main { padding: 2rem 1.9rem 1.9rem 1.9rem; }
}
@media (min-width: 600px) and (max-width: 1365px)
{
	main { min-height: calc(100dvh - 9rem); }
}
@media (min-width: 1366px)
{
	main { min-height: calc(100dvh - 10rem); }
}

/*////////////////////////
Liste texte
////////////////////////*/

.listeTexte
{
	list-style: none;
	position: relative;
	margin-left: 1rem;
}
.listeTexte li
{
	margin-bottom: .6rem;
}
.listeTexte li::before
{
	position:absolute;
	color: var(--couleur-secondaire);
	margin-left: -1rem;
}
ul.listeTexte li::before
{
	content: "•";
}
ol
{
	counter-reset: compteurListe;
}
ol li
{
	counter-increment: compteurListe;
}
ol.listeTexte li::before
{
	content: counter(compteurListe)".";
}
@media (min-width: 600px) and (max-width:1365px)
{
	.listeTexte { margin-left: 1.5rem; }
	.listeTexte li::before { margin-left: -1.5rem; }
}
@media (min-width: 1366px)
{
	.listeTexte { margin-left: 2rem; }
	.listeTexte li::before { margin-left: -2rem; }
}

/*////////////////////////
Liste de liens
////////////////////////*/

.listeLiens
{
	list-style: none;
}
.listeLiens li
{
	padding: .2rem 0;
} 
.listeLiens a
{
	border-radius: var(--border-radius);
}
.listeLiens a span
{
	text-align: left;
	color: var(--couleur-primaire);
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: var(--border-radius);
	border: var(--bordure-pleine-habillage);
	/* Padding avec ajustement en bas */
	padding: .7rem 1rem .8rem 1rem;
	
	transform: scale(1);
	transition: transform .3s ease-out, background-color .1s ease, color .1s ease, border-color .1s ease;
}
@media (hover: hover)
{
	.listeLiens a:hover span
	{
		background-color: var(--couleur-primaire);
		color: var(--couleur-fond);
		border-color: var(--couleur-primaire);
	}
}
.listeLiens a:active span
{
	transform: scale(.9);
	/* pas d'anim à l'entrée de l'état : */
	transition: none;
}
.listeLiens a span::after
{
	display: block;
	margin-left: .68rem;
	/* Ajuster la hauteur */
	margin-top: .2rem; 
	content: "";
	height: 13px;
	width: 13px;
	/* background-size: 13px 13px; */
	flex: 0 0 auto; 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.listeLiens a:not(a[target=_blank]) span::after
{
	background-image: url(/img/ui/fleche.svg);
}
.listeLiens a[target=_blank] span::after
{
	background-image: url(/img/ui/flecheCrochet.svg);
}
@media (min-width: 600px) and (max-width:1365px)
{
	.listeLiens
	{
		margin-top: .2rem;
	}
	.listeLiens a span
	{
		padding: .8rem 1.1rem .9rem 1.1rem;
	}
	.listeLiens a span::after
	{
		height: 16px;
		width: 16px;
		/* background-size: 16px 16px; */
	}
}
@media (min-width: 1366px)
{
	.listeLiens li
	{
		padding: .3rem 0;
	} 
	.listeLiens a span
	{
		padding: 1rem 1.3rem 1.1rem 1.3rem;
	}
	.listeLiens a span::after
	{
		height: 18px;
		width: 18px;
		/* background-size: 18px 18px; */
	}
}

/*////////////////////////
Images
////////////////////////*/

.bordsArrondis 
{
	border-radius: var(--border-radius);
}
.pleinePage
{
	width: 100%;
	height: auto;
}
figure img
{
	border-radius: var(--border-radius);
	width: 100%;
	height: auto;
}

/*////////////////////////
Ajustements
////////////////////////*/

.margeBasse 
{
	margin-bottom: 1.5rem;
}
.margeHaute 
{ 
	margin-top: 1rem;  
}
.margeHauteGrande 
{ 
	margin-top: 1.9rem;  
}
@media (min-width: 600px) and (max-width: 1365px)
{
	.margeBasse { margin-bottom: 1.7rem; }
	.margeHaute { margin-top: 1.5rem; }
	.margeHauteGrande { margin-top: 2rem; }
}
@media (min-width: 1366px)
{
	.margeBasse { margin-bottom: 2.1rem; }
	.margeHaute { margin-top: 2rem; }
	.margeHauteGrande { margin-top: 2.6rem; }
}

/*////////////////////////
Animation des lettres de titre
////////////////////////*/

h1.pasPret
{
	opacity: 0;
	/* 
		Masquer au début. Une fois que le JS a interverti les éléments, cette classe est remove().
	*/
}
.mot 
{
	display: inline-block; 
	white-space: nowrap;  
}
.lettre
{
	display: inline-block;
}

/*////////////////////////
Accroche défaut
////////////////////////*/

.accroche 
{
	color: var(--couleur-secondaire);
	margin-bottom: 3.5rem;
}
@media (min-width: 600px)
{
	.accroche { margin-bottom: 5rem; }
}

/*////////////////////////
Sections défaut
////////////////////////*/

section
{
	padding-bottom: 4rem;
}
@media (min-width: 600px) and (max-width: 1365px)
{
	section
	{
		padding-bottom: 5.5rem;
	}
}
@media (min-width: 1366px)
{
	section
	{
		padding-bottom: 6.6rem;
	}
}
section:last-child
{
	padding-bottom: 0;
}
/* section:last-child::after
{
	content: "";
	background-image: var(--rayures);
	display: block;
	height: 1rem;
	margin-top: 5rem;
} */