*{
    outline: none;
    box-sizing: border-box;
}

.wp-site-blocks{
	position: relative;
	z-index: 1;
}
.entry-content > *{
	position: relative;
	z-index: 1;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

a{
	color: var(--wp--preset--color--theme-rouge);
	text-decoration: none;
}
h1, .h1{
	color: var(--wp--preset--color--theme-bleu);
	letter-spacing: 2px;
	font-family: var(--wp--preset--font-family--barlow-semi-condensed);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--48);
	text-transform: uppercase;
	text-align: center;
}
h2, .h2{
	color: var(--wp--preset--color--theme-bleu);
	font-family: var(--wp--preset--font-family--barlow-semi-condensed);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--36);
	text-transform: uppercase;
}
h3, .h3{
	color: var(--wp--preset--color--theme-bleu);
	font-family: var(--wp--preset--font-family--barlow-semi-condensed);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--30);
	text-transform: uppercase;
}
h4, .h4{
	font-size: var(--wp--preset--font-size--24);
}
h5, .h5{
	font-size: var(--wp--preset--font-size--18);
}
h6, .h6{
	font-size: var(--wp--preset--font-size--12);
}
/*
button{
	color: var(--wp--preset--color--theme-bleu);
	padding: 10px;
	border: 1px solid var(--wp--preset--color--theme-bleu);
	letter-spacing: 2px;
	font-size: var(--wp--preset--font-size--18);
	font-weight: 500;
	text-transform: uppercase;
	text-decoration: none;
}
*/

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* On fixe la hauteur de ligne des textes et la merge entre certains blocks textuels */

body{
	--text-line-height: 1.5em;
}
p, ul, ol{
	line-height: var(--text-line-height);
}
:where(p, h2, h3, h4, h5, h6, ul, ol) + :where(p, h2, h3, h4, h5, h6, ul, ol) {
	margin-block-start: var(--text-line-height) !important;
}
.wp-block-group-is-layout-flex :where(p, h2, h3, h4, h5, h6, ul, ol){
	margin-block-start: 0 !important;
}
#wp-admin-bar-top-secondary{
	margin-block-start: 0 !important;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* On déclare une classe à ajouter aux éléments qui affichent des données provenant d'un RTE (Rich Text Editor) */
/* Typiquement, on supprime les marges de certains paragraphes et titres */

.rte > p:first-child{
	margin-block-start: 0;
}
.rte > p:last-child{
	margin-block-end: 0;
}
.rte > :is(h1, h2, h3, h4, h5){
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* On définie un espacement des blocs différent sur la page d'accueil */

.content-home .entry-content > *:not(:first-child) {
    margin-block-start: 100px;
}

/* On surcharge les presets déclarés dans theme.json sur les tablettes et mobiles */

@media (max-width: 1024px) {

	body{
	    --wp--preset--font-size--24: 22px;
	    --wp--preset--font-size--30: 26px;
	    --wp--preset--font-size--36: 32px;
	    --wp--preset--font-size--48: 42px;
		--wp--style--root--padding-left: 30px;
		--wp--style--root--padding-right: 30px;
	}

	:where(body .is-layout-constrained) > * {
		margin-block-start: 40px;
	}
	.content-home .entry-content > *:not(:first-child) {
		margin-block-start: 100px;
	}
	.content-home .entry-content > *:not(:first-child) {
		margin-block-start: 80px;
	}

}

@media (max-width: 768px) {

	body{
	    --wp--preset--font-size--20: 18px;
	    --wp--preset--font-size--24: 20px;
	    --wp--preset--font-size--30: 24px;
	    --wp--preset--font-size--36: 28px;
	    --wp--preset--font-size--48: 36px;
	}

	.content-home .entry-content > *:not(:first-child) {
		margin-block-start: 60px;
	}

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* On définie plusieurs variables permettant de gérer le décallage de certains éléments (header, contenu, ...) */

body{

	/* --admin-bar-height est défini dans le plugin juliana-cleaner */
	--header-bar-height: 120px; /* Hauteur du header */
	--menu-height: calc(100% - var(--admin-bar-height)); /* Hauteur du menu */

	--header-offset-top : var(--admin-bar-height); /* Décallage de l'élément de modèle <header> */
	--content-offset-top: var(--header-bar-height); /* Décallage du contenu */
	--menu-offset-top: var(--admin-bar-height); /* Décallage du menu */
	--menu-padding-top: var(--header-bar-height); /* Padding top du menu */
}

@media (max-width: 1024px) {

	body{
		--header-bar-height: 80px;
	}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/*

	HEADER FLOTTANT

	WordPress encapsule les éléments de modèle dans un conteneur (.wp-site-blocks), ce qui ne facilite pas la mise en place des élement flottants.
	Plusieurs choix s'offrent à nous :

	- Faire flotter le block "header" se trouvant dans l'élément de modèle
		-> inconvéniant : il faut toujours gérer la superposition des éléments de modèles + l'affichage du block
		   dans l'éditeur n'est pas super (du fait qu'il soit flottant)

	- Ajouter une classe CSS additionnelle à l'élément de modèle qui contient le header dans tous les modèles qui
	  l'incluent et se baser sur cette classe pour faire flotter l'élément de modèle
		-> inconvéniant : maintenabilité moyenne + il faut passer sur tous les modèles un à un pour ajouter la
		   classe

	- Faire flotter le premier élément de modèle de premier niveau s'il est de type "header"
		-> inconvéniant : il faut toujours que l'élément de modèle contenant le header soit le premier élement de
		   modèle et qu'il soit de type "header"

	Ici, on a choisi la dernière solution.

*/


/* On défini la position et le z-index des blocks de premier niveau */
.wp-site-blocks > *{
	width: 100%;
	position: relative;
	z-index: 5;
}
/* Si le premier block de premier niveau est un élément de template de type header, on fait flotter l'élément de modèle */
.wp-site-blocks > header.wp-block-template-part:first-child{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
/* On Ajuste la position du header lorsque la barre d'admin est présente */
body.admin-bar .wp-site-blocks > header.wp-block-template-part:first-child{
    top: var(--header-offset-top);
}
/*
	On ajoute une marge au dessus du contenu de la page pour qu'il ne soit pas caché sous le header flottant...
	... sauf sur la page d'accueil où le contenu DOIT passer sous le header.

	On pourrait se baser sur la classe "home" du body pour obtenir un comportement différent mais cette
	classe particulière n'est pas ajoutée dans l'éditeur de site (un commentaire dans le code indique que ce sera
	certainement le cas ultérieurement [/wp-includes/js/dist/block-editor.js:20654]).
	Pour l'instant, on peut s'en sortir en ajoutant une classe CSS additionnelle "content-home" sur l'élément de
	modèle "content-home" du modèle "front-page" depuis l'éditeur de modèle.
*/
.wp-site-blocks > header.wp-block-template-part:first-child + *:not(.content-home){
	margin-block-start: var(--content-offset-top) !important;
}

@media (max-width: 1024px) {

	.yoast-breadcrumbs{
		display: none;
	}
	.wp-site-blocks > header.wp-block-template-part:first-child + *:not(.content-home){
		/* on ajoute 50px au dessus du contenu pour compenser le masquage du fil d'ariane, qui lui était collé au header. */
		margin-block-start: calc(var(--content-offset-top) + 50px) !important;
	}

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* Bouton */

.wp-element-button, .wp-block-button__link{
	background-color: transparent;
    border: 1px solid var(--wp--preset--color--theme-bleu);
    color: var(--wp--preset--color--theme-bleu);
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;

	line-height: 20px;
    padding: 4px 10px;
    letter-spacing: 2px;
	font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
	text-align: center;
	transition: all .2s ease-in-out;
}
.wp-element-button:hover,
.wp-block-button__link:hover{
	background: var(--wp--preset--color--theme-bleu);
	color: var(--wp--preset--color--theme-blanc);
}
:where(.wp-block-button__link){
	border-radius: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* Citation */

.wp-block-quote{
	padding: 10px 0 10px 20px;
}
.wp-block-quote cite{
	font-style: normal;
	font-size: 14px;
}
.wp-block-quote p:first-child{
	margin-top: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* Fichier */

.wp-block-file, .wp-block-file__content-wrapper{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.wp-block-file a{
	color: var(--wp--preset--color--theme-noir);
}
.wp-block-file a:first-child{
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.wp-block-file a:first-child::after{
	content: "";
	flex-grow: 1;
	height: 1px;
	background: rgba(0, 0, 0, 0.2);
	margin-left: 10px;
}
.wp-block-file__button{
	font-size: 14px;
	letter-spacing: 1px;

}
:where(.wp-block-file__button){
	border-radius: 0;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* Media/texte */

.wp-block-media-text:not(.has-background) {
	gap: 40px;
}
.wp-block-media-text .wp-block-media-text__content{
	padding: 0 !important;
}
.wp-block-media-text.has-background .wp-block-media-text__content{
	padding: 40px !important;
}
.wp-block-media-text__content > :first-child{
	margin-block-start: 0;
}
.wp-block-media-text__content > :last-child{
	margin-block-end: 0;
}
.wp-block-media-text__content > * {
	margin-block-start: 40px;
	margin-block-end: 0;
}

@media (max-width: 1024px) {

	.wp-block-media-text.has-background .wp-block-media-text__content{
		padding: 30px !important;
	}

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.wp-block-separator{
	border-width: 3px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* FIL D'ARIANE */

.yoast-breadcrumbs{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px 20px 20px 20px;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
    .yoast-breadcrumbs > span{
        display: block;
        width: 100%;
        font-size: 14px;
		font-weight: 500;
		text-transform: uppercase;
    }
        .yoast-breadcrumbs > span > span{
            line-height: 20px;
            padding-left: 16px;
            margin-left: 5px;
            position: relative;
        }
        .yoast-breadcrumbs > span > span:first-child{
            padding-left: 0;
            margin-left: 0;
        }
            .yoast-breadcrumbs > span > span::before{
                content: "\e005";
                color: var(--wp--preset--color--theme-noir);
                font-family: "icons";
                font-size: 8px;
                position: absolute;
				top: 0;
                left: 0;
            }
            .yoast-breadcrumbs > span > span:first-child::before{
                display: none;
            }
            .yoast-breadcrumbs > span a{
                color: var(--wp--preset--color--theme-noir)
            }
            .yoast-breadcrumbs > span .breadcrumb_last{
                color: var(--wp--preset--color--theme-rouge);
            }

@media (max-width: 1024px) {

    .yoast-breadcrumbs{
        display: none;
    }

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

/* Ninja Forms */

/*
	Ninja Forms créé une iframe de la front pour faire la preview dans Gutenberg.
	Hypothèse : l'URL de la préview n'étant pas connue de WP, elle est détecté comme étant la home.
*/
body:not(.home) .nf-form-cont{
	/*max-width:  1024px !important;*/
}
.nf-iframe-overlay{
	height: 500px;
	position: relative;
}
.nf-iframe-overlay iframe{
	display: none;
}
.nf-iframe-overlay::before{
	content: "Le formulaire s'affiche ici.";
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 60px;
	text-align: center;
	font-style: italic;
	background: #ffffff;
	color: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.nf-form-fields-required{
	display: none;
}
.nf-form-content{
	max-width:  none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.nf-field-container{
	margin-bottom: 20px !important;
}
.nf-field-label{
	margin-bottom: 5px !important;
}
.nf-field-label label{
	font-weight: normal;
	font-size: 16px;
}
.field-wrap:not(.checkbox-wrap) .nf-field-label label{
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
}
.ninja-forms-req-symbol{
	color: var(--wp--preset--color--theme-rouge) !important;
	font-size: 16px;
}
.nf-form-content .list-select-wrap .nf-field-element > div,
.nf-form-content input:not([type=button], [type=submit]),
.nf-form-content textarea {
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.2) !important;
	background: #ffffff !important;
	color: var(--wp--preset--color--theme-noir) !important;
}
.nf-form-content button,
.nf-form-content input[type=button],
.nf-form-content input[type=submit] {
    height: 40px !important;
    padding: 5px 15px !important;
    border: 0;
    border-radius: 5px;
	background: var(--wp--preset--color--theme-bleu) !important;
	color: var(--wp--preset--color--theme-blanc) !important;
    font-family: var(--wp--preset--font-family--barlow-semi-condensed);
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}
.nf-form-content button:hover,
.nf-form-content input[type=button]:hover,
.nf-form-content input[type=submit]:hover{
	background: var(--wp--preset--color--theme-rouge) !important;
}
.nf-error .nf-error-msg {
	font-size: 14px;
}
.recaptcha-container {
	margin-top: 30px;
}
.recaptcha-container .nf-field-label{
	display: none;
}

.nf-field-container .submit-wrap .nf-field-element{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}
.nf-field-container .recaptcha-wrap .nf-field-element{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

hr.ninja-forms-field{
	margin: 20px 0 !important;
    border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.files_uploaded{
	margin-bottom: 20px;
}
.nf-fu-progress{
	display: none;
}
.files_uploaded p{
	margin: 1px 0 0 0;
	padding: 10px;
	background: rgba(0, 0, 0, 0.05);
}
.files_uploaded .delete{
	color: var(--wp--preset--color--theme-rouge);
	margin-left: 10px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
}

.nf-form-content select.ninja-forms-field{
	color: var(--wp--preset--color--theme-noir);
}

textarea.ninja-forms-field{
	font-family: inherit;
}

noscript:first-child + .nf-form-cont{
	margin-top: 0;
}
.nf-response-msg{
	padding: 10px;
	border-radius: 10px;
	background: #207020;
	color: #ffffff;
	text-align: center;
}
	.nf-response-msg p{
		margin: 0;
	}

@media (max-width:  360px) {

	.recaptcha-container .nf-field-element{
		transform: scale(0.9);
		transform-origin: top left;
	}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------------------------------------------- */

.postThumbnail{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	height: 100%;
	position: relative;
}
    .postThumbnail-image{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
		.postThumbnail-image img{
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			left: 0;
			top: 0;
		}
    .postThumbnail-caption{
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20px;
		position: relative;
		z-index: 2;
	}
		.postThumbnail-caption::before{
			content: "";
			width: 100%;
			height: 100%;
			background: var(--wp--preset--color--theme-blanc);
			opacity: 0.7;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 1;
			transition: background .2s ease-in-out;
		}
		.postThumbnail:hover .postThumbnail-caption::before{
			background: var(--wp--preset--color--theme-bleu);
		}
		.postThumbnail-caption > *{
			position: relative;
			z-index: 2;
		}
        .postThumbnail-title{
			color: var(--wp--preset--color--theme-bleu);
			transition: color .2s ease-in-out;
		}
		.postThumbnail:hover .postThumbnail-title{
			color: var(--wp--preset--color--theme-blanc);
		}
        .postThumbnail-teaser{
			color: var(--wp--preset--color--theme-noir);
			transition: color .2s ease-in-out;
		}
		.postThumbnail:hover .postThumbnail-teaser{
			color: var(--wp--preset--color--theme-blanc);
		}