
/* VARIABLES */
:root{
	/* COULEURS : */
		--couleur-blanc:#fff;
		--couleur-pale:#eee;
		--couleur-gris:#8b8b8b;
		--couleur-texte:#000;
		--couleur-charte1 :#91b509;	/* Couleur vert tendre */
		--couleur-charte2 :#00a984;	/* Couleur turquoise */
		--couleur-charte3 :#245858;	/* Couleur turquoise foncé */
		--couleur-produit-1a:#de4e75;	/* Couleur produit CQPAQ */
		--couleur-produit-1b:#3bb7a4;	/* Couleur produit CQPAQ alt */
		--couleur-produit-2a:#ffa046;	/* Couleur produit Stocks */
		--couleur-produit-2b:#ff6743;	/* Couleur produit Stocks alt */
		--couleur-produit-3a:#144665;	/* Couleur produit Wifoncier */
		--couleur-produit-3b:#66c4c6;	/* Couleur produit Wifoncier alt */
	/* STRUCTURE : */
		--margesDefaut:3rem; /*....................................... Espacement par défaut */
		--largeur:1200px; /*.......................................... Largeur de contenu maximale, adaptable sur différents supports */
		--largScrollBar:0px; /* ...................................... Valeur par défaut, modifiée dans scripts.js */
		--haut-footer:0px; /* ........................................ Valeur par défaut, modifiée dans scripts.js */
		--home-nav-item-gap:65px; /* ................................. Home : espace entre les pastilles de navigation */
		--home-nav-item-dim:clamp(110px, 24vh, 220px); /*min(220px, calc((100vw - 2*var(--home-nav-item-gap)) / 3) - 20px, calc(30vh)); /* ................................ Home : largeur des pastilles de navigation */
		--logo-dim:min(80vh, 30vw, calc(100vh - var(--home-nav-item-dim) - 10px)); /*................................ Dimensions (externes) du logo */
	/* FORMULAIRES : champs */
		--form-input-bordColor:var(--couleur-gris); /*........................... Couleur des contours de champs */
		--form-input-bordWidth:2px; /*................................ Épaisseur des contours de champs */
		--form-input-fondColor:white; /*............................ Couleur de fond des champs */
		--form-input-height:5rem; /*.................................. Hauteur des champs */
	/* FORMULAIRES : boutons */
		--form-bouton-bordColor:var(--couleur-charte2); /*. Couleur des contours de boutons */
		--form-bouton-bordWidth:2px; /*............................... Épaisseur des contours de boutons */
		--form-bouton-fondColor:var(--couleur-charte2); /*. Couleur des boutons et autres éléments interactifs */
		--form-bouton-textColor:white; /*........................... Couleur du texte des boutons */
	/* FORMULAIRES : checkboxes/radio */
		--form-check-taille:3rem; /*.................................. Taille des pastilles de checkboxes (entre autres) */
	/* FORMULAIRES : autres */
		--outline:var(--couleur-texte) auto 2px;
		--outline-offset:2px;
		accent-color:var(--form-bouton-fondColor); /*................. Couleur par défaut : checkbox, radio, range, progress */
}
@media(max-width:1260px){
	:root{--largeur:960px;}
}
@media(max-width:980px){
	:root{--largeur:540px;}
}
@media(max-width:600px){
	:root{--largeur:calc(100vw - var(--largScrollBar, 0px) - 60px);}
}

/* Global */
*,*::before,*::after{
	box-sizing:inherit;
	min-width:0;
	min-height:0;
}
html{
	box-sizing:border-box;
	font-size:clamp(50%, 0.7vw, 62.5%);
	overflow-wrap:break-word;
	-webkit-text-size-adjust:100%;
		-moz-text-size-adjust:100%;
		-ms-text-size-adjust:100%;
			text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent;
	scroll-behavior:smooth;
}
body{
	margin:0;
	color:var(--couleur-texte);
	font-family:Montserrat, Arial, system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
	font-size:1.8rem;
	line-height:1.2;
	min-height:100vh;
	background-color:var(--couleur-blanc);
}
body:not(.ready) *{ transition:none; }

/* Blocs et structure */
p, address, ol, ul, dl, dt, dd{
	margin-top:0;
	margin-bottom:1em;
	text-wrap:pretty;
}
figure{ margin:0; }
nav ul, nav ol{
	padding:0;
	margin:0;
	list-style:none;
}
:where(.site-content) :is(ul,ol){
	--list-liLarg:0.4em; /* épaisseur des puces */
	--list-marg:0.4em; /* marge entre la puce et le texte */
	--list-shift:1em; /* décalage à gauche de la puce par rapport à l'alignement du texte */
	--list-olRatio:0.8; /* changement de taille de la numérotation */
	counter-reset:ol-count;
	list-style:none;
	padding:0;
}
:where(.site-content) :where(ul,ol) :is(ul, ol){ margin-bottom:0; }
:where(.site-content) ul{ padding-left:calc(var(--list-liLarg) + var(--list-marg) + var(--list-shift)); }
:where(.site-content) ol{ padding-left:calc((3ch * var(--list-olRatio)) + var(--list-marg)); }
:where(.site-content ul)>li{ text-indent:calc((var(--list-liLarg) + var(--list-marg)) * -1); }
:where(.site-content ol)>li{
	text-indent:calc(((3ch * var(--list-olRatio)) + var(--list-marg)) * -1);
	counter-increment:ol-count;
}
:where(.site-content) :where(ul,ol)>li::before{
	display:inline-block;
	margin:0 var(--list-marg) 0 0;
}
:where(.site-content ul)>li::before{
	content:"";
	background-color:var(--couleur-charte2);
	width:var(--list-liLarg);
	height:var(--list-liLarg);
}
:where(.site-content ol)>li::marker{ content:none; }
:where(.site-content ol)>li::before{
	content:counter(ol-count) ".";
	color:var(--couleur-charte2);
	font-weight:bolder;
	width:3ch;
	text-align:right;
	font-size:0.8em;
}
:where(.site-content) :where(ul,ol)>:where(li) *{ text-indent:0; }
blockquote{
	max-width:100%;
	margin-top:0;
	margin-bottom:1em;
}
details{ display:block; }
summary{ display:list-item; }
template, [hidden]{ display:none; }
hr{
	box-sizing:content-box;
	height:0;
	margin:1.5em 0;
	overflow:visible;
	clear:both;
	color:inherit;
	border:0;
	border-top:1px solid currentColor;
}

/* Titres */
/* ⚠ Si le margin-top ou les font-size sont modifiés, penser à les changer également dans le contexte titres × colonnes ci-après */
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
	line-height:1.1;
	margin:2em auto 1em 0;
	text-wrap:balance;
}
h1:not(:where(.h2,.h3,.h4,.h5,.h6)),.h1{
	font-size:clamp(4rem, 4vw, 5rem);
	font-weight:700;
	color:var(--couleur-charte2);
}
.entry-header h1{ text-align:center; }
h2:not(:where(.h1,.h3,.h4,.h5,.h6)),.h2{
	font-size:clamp(1.6em, 2.6vw, 3.4rem);
	font-weight:700;
	color:var(--couleur-charte2);
}
h3:not(:where(.h1,.h2,.h4,.h5,.h6)),.h3{
	font-size:1.5em;
	color:var(--couleur-charte1);
}
h4:not(:where(.h1,.h2,.h3,.h5,.h6)),.h4{ font-size:1.5em;}

/* Inline */
b, strong{ font-weight:bolder; }
abbr[title]{
	text-decoration:underline dotted;
	border-bottom:none;
	cursor:help;
}
sub, sup{
	position:relative;
	font-size:0.75em;
	line-height:0;
	vertical-align:baseline;
}
sub{ bottom:-0.25em; }
sup{ top:-0.5em; }
small,
.details{
	font-size:80%;
	opacity:0.8;
}

/* Liens et ancres */
a{
	color:var(--couleur-charte2);
	background-color:transparent;
}
[id]:not(.home-section){ scroll-margin-top:1em; }

/* Medias */
img, svg{
	height:auto;
	max-width:100%;
	vertical-align:middle;
	object-fit:cover;
	object-position:center center;
	border-style:none;
}
svg:not([fill]){ fill:currentColor; }
svg:not(:root){ overflow:hidden; }
video,
iframe{
	height:auto;
	max-width:100%;
	vertical-align:middle;
	border-style:none;
}
embed[width][height],
iframe[width][height]{ aspect-ratio:attr(width) / attr(height); }
audio,
canvas{ vertical-align:middle; }

/* Tableaux */
table{
	margin-bottom:1.5em;
	vertical-align:top;
	border-collapse:collapse;
}
td{ max-width:100%; }

/* Classes utilitaires */
@media not print{
	.print-only, .printOnly, .printonly{ display:none !important; }
}
.clearfix{ display:flow-root; }
:is(.no-marges, .noMarges, .nomarges) > :first-child{ margin-top:0; }
:is(.no-marges, .noMarges, .nomarges) > :last-child{ margin-bottom:0; }

/*===============*\
#    Structure    #==================================================================================================================================
\*===============*/
.site-header,
.site-content,
.site-footer{ display:flow-root; }
.scrolledHeader .site-header{
	/*position:sticky;*/
	top:0;
	left:0;
	right:0;
	/*transform:translateY(-100%);
	transition:none;*/
}
/*.scrolledHeaderToTop .site-header{
	transform:translateY(0%);
	transition:transform 0.3s ease-out;
}*/
.site-header{ z-index:2; }
.site-content,
.site-footer{ z-index:1; }
:where(body:not(.home)) .site-content,
.home-content{
	position:relative;
	overflow-y:clip;
}
.container,
.alignfull > .wp-block-group__inner-container{
	width:var(--largeur);
	max-width:100%;
	margin-inline:auto;
}
.alignfull{
	width: calc(100vw - var(--largScrollBar,0px));
	margin-left:calc(-50vw + 50% + (var(--largScrollBar,0px) * 0.5));
	margin-right:calc(-50vw + 50% + (var(--largScrollBar,0px) * 0.5));
}

/* Colonnes */
.grid-section,
.grid-section12,
.grid-auto,
.grid-auto-fill{
	--cols-gap:var(--margesDefaut);
	display:grid;
	gap:var(--cols-gap);
	justify-content:center;
	position:relative;
	grid-auto-flow:dense;
}
.grid-section{
	--cols-prop:1fr 1fr;
	grid-template-columns:var(--cols-prop);
}
.grid-section12{ grid-template-columns:repeat(12, 1fr); }
.grid-section12 > *{
	--col-prop12:6;
	grid-column:span var(--col-prop12);
}
.grid-auto,
.grid-auto-fill{
	--cols-larg:300px;
	grid-template-columns:repeat(auto-fill, var(--cols-larg));
}
.grid-auto-fill{ grid-template-columns:repeat(auto-fill, minmax(var(--cols-larg),1fr)); }
@media(max-width:1260px){
	:is(.grid-section,.grid-section12):where(.grid-large){ grid-template-columns:1fr; }
	:is(.grid-section,.grid-section12):where(.grid-large) > *{ grid-column:1; }
}
@media(max-width:980px){
	:is(.grid-section,.grid-section12):not(:where(.grid-small,.grid-large)){ grid-template-columns:1fr; }
	:is(.grid-section,.grid-section12):not(:where(.grid-small,.grid-large)) > *{ grid-column:1; }
}
@media(max-width:600px){
	:is(.grid-section,.grid-section12):where(.grid-small){ grid-template-columns:1fr; }
	:is(.grid-section,.grid-section12):where(.grid-small) > *{ grid-column:1; }
}
.v-align-top{ align-items:flex-start; }
.v-align-center{ align-items:center; }
.h-align-left{ justify-content:flex-start; }
.h-align-center{ justify-content:center; }
.h-align-right{ justify-content:flex-end; }

.bg-pattern{
	--dim:min(910px, 67vw);
	position:absolute;
	inset:calc(var(--dim) * 0.2) 0 auto auto;
	width:var(--dim);
	aspect-ratio:909/1395;
	object-fit:contain;
	object-position: right center;
	opacity:0.1;
	pointer-events:none;
	z-index:-1;
}

/*===================*\
#    Accessibilité    #==============================================================================================================================
\*===================*/
@media (prefers-reduced-motion:reduce){
	*, *::before, *::after{
		animation:none !important;
		transition:none !important;
	}
}
.no-texte, .noTexte, .notexte, .visually-hidden,
.screen-reader-response, .sr-only, .screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
	white-space:nowrap;
	border:0;
}
[aria-busy="true"]{ cursor:progress; }
[aria-controls]{ cursor:pointer; }
[aria-disabled="true"], [disabled]{ cursor:not-allowed; }
[aria-hidden="false"][hidden]{ display:initial; }
[aria-hidden="false"][hidden]:not(:focus){
	position:absolute;
	clip:rect(0, 0, 0, 0);
}

/* Affichage du focus */
*:is(:focus,:focus-visible){
	outline:var(--outline);
	outline-offset:var(--outline-offset);
}
*:focus:where(:not(:focus-visible)){ outline:none; }

/* Liens d'évitement */
.skip-links{
	margin:0 auto;
	padding:0rem;
	width:100%;
	height:0;
	transition:all 0.3s ease-out;
	transition-property:opacity, padding;
	background:var(--couleur-blanc);
	opacity:0;
	text-align:center;
	list-style:none;
	overflow:hidden;
	position: relative;
	z-index: 9;
}
.skip-links.active{
	height:auto;
	padding:1rem;
	opacity:1;
}
.skip-links-li{
	display:inline-block;
	vertical-align:middle;
	margin:0;
	padding:0;
}
.skip-links-a{
	display:block;
	text-decoration:none;
	color:var(--couleur-texte);
	padding:0.3rem 0.5rem;
}
	
/*=================*\
#    Formulaires    #
\*=================*/
/*==== Champs ===================================================================================*/
button,
input:where(:not([type="checkbox"]):not([type="radio"])),
::file-selector-button,
.wp-block-button__link, .bouton, .form--file-bouton,
textarea,
select,
optgroup{
	max-width:100%;
	height:auto;
	margin:0;
	overflow:visible;
	color:inherit;
	font:inherit;
	letter-spacing:inherit;
	text-transform:none;
	vertical-align:middle;
	background:none;
	appearance:none;
}

a,
area,
button,[role="button"],
input:where(:not([type="range"])),
label,
select,
summary,
textarea,
[tabindex]{ touch-action:manipulation; }

/* Placeholder */
::placeholder,
:where(.form-labelInside) label{
	color:inherit;
	font-style:italic;
	opacity:0.8;
}

/*==== BOUTONS ====*/
button:where(:not(.slider-nav)),
[type="button"]:where(:not(.slider-nav)),
[type="reset"],
[type="submit"],
::file-selector-button,
.wp-block-button__link, .bouton, .form--file-bouton{
	display:inline-block;
	line-height:1.2;
	padding:0.5em calc(0.5em + 0.5lh);
	background:var(--form-bouton-fondColor);
	color:var(--form-bouton-textColor);
	border:var(--form-bouton-bordWidth) solid var(--form-bouton-bordColor);
	overflow:visible;
	user-select:none;
	text-decoration:none;
	transition:0.3s ease-out;
	transition-property:color, background-color, border-color;
	font-weight:700;
	text-transform:uppercase;
	border-radius:2em;
}
/* Outline sur le faux bouton de .form-fileInput */
:where(.form-fileInput [type="file"]:focus-visible) + .form--file-bouton{
	outline:var(--outline);
	outline-offset:var(--outline-offset);
}
/* Survol et focus */
:is(
	button,
	[type="button"],
	[type="reset"],
	[type="submit"],
	.wp-block-button__link, .bouton, .form--file-bouton
):not(:disabled):is(:hover,:focus-visible),
:where([type="file"]:not(:disabled):is(:hover,:focus-visible))::file-selector-button,
:where(.form-fileInput [type="file"]:not(:disabled):is(:hover,:focus-visible)) + .form--file-bouton{
	--form-bouton-bordColor:var(--couleur-texte);
	--form-bouton-fondColor:var(--couleur-texte);
	--form-bouton-textColor:var(--couleur-blanc);
}

/*==== CHAMPS DE TYPE TEXTE ====*/
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
textarea,
select,
:where(.form-labelInside) label{
	vertical-align:middle;
	padding-block:calc((var(--form-input-height) - 2*var(--form-input-bordWidth) - 1lh)*0.5); /* hauteur - 2*bordure - line-height */
	padding-inline:calc(0.25em + 0.5lh);
	width:100%;
	height:var(--form-input-height);
	min-height:var(--form-input-height);
	border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
	background-color:var(--form-input-fondColor);
	border-radius:0.5rem;
}

/* TEXTAREA */
textarea{
	--textarea-lines:2;
	overflow:auto;
	resize:vertical;
	vertical-align:top;
	white-space:pre-wrap;
	height:calc(var(--form-input-height) + var(--textarea-lines) * 1lh); /* hauteur + (lignes-1)*line-height */
}
textarea[rows]{ --textarea-lines:attr(rows); }

/* NUMBER */
[type="number"]{ appearance:textfield; } /* Firefox : conversion en apparence textfield pour retirer les flèches mal gérées */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
	-moz-appearance:textfield;
	appearance:none;
	height:auto;
}

/* RECHERCHE */
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-results-button,
[type="search"]::-webkit-search-results-decoration {
	appearance:none; /* macOS Chrome et Safari : retire le padding */
	display:none; /* Supprime le 'x' à droite du champ quand du texte est entré */
}

/* COULEUR */
[type="color"]{
	background:none;
	width:var(--form-check-taille);
	height:var(--form-check-taille);
	border:none;
	padding:0;
}
[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
/* NB : dupliquer le code pour -webkit et -moz- ci-après */
[type="color"]::-webkit-color-swatch{
	border:none;
	border-radius:50%;
}[type="color"]::-moz-color-swatch{
	border:none;
	border-radius:50%;
}

/* RANGE */
[type="range"]{
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	outline:none;
}
[type="range"]::-webkit-slider-thumb{ /* (curseur pour WebKit/Blink) */
	-webkit-appearance:none;
	appearance:none;
	margin-top:calc(var(--form-check-taille)/-3 - var(--form-input-bordWidth));
	height:var(--form-check-taille);
	width:var(--form-check-taille);
	border:none;
	border-radius:50%;
	background-color:var(--form-bouton-fondColor);
	cursor:ew-resize;
}
[type="range"]:focus::-webkit-slider-thumb{ outline:auto 5px -webkit-focus-ring-color; }
[type="range"]::-moz-range-thumb{ /* (curseur pour Firefox) */
	-webkit-appearance:none;
	appearance:none;
	margin-top:calc(var(--form-check-taille)/-3 - var(--form-input-bordWidth));
	height:var(--form-check-taille);
	width:var(--form-check-taille);
	border:none;
	border-radius:50%;
	background-color:var(--form-bouton-fondColor);
	cursor:ew-resize;
}
[type="range"]:focus::-moz-range-thumb{ outline:auto; }
[type="range"]::-webkit-slider-runnable-track {
	width:100%;
	height:calc(var(--form-check-taille)/3);
	background-color:var(--form-input-fondColor);
	border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
	border-radius:var(--form-check-taille);
}
[type="range"]::-moz-range-track {
	width:100%;
	height:calc(var(--form-check-taille)/3);
	background-color:var(--form-input-fondColor);
	border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
	border-radius:var(--form-check-taille);
}

/* DATES */
[type="date"]::-webkit-inner-spin-button,
[type="time"]::-webkit-inner-spin-button{ appearance:none; }

/* SELECT */
select:not([multiple]){
	padding-right:calc(var(--form-input-height) + 1em);
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M11 10L7.859 6.58a.695.695 0 0 1 0-.978a.68.68 0 0 1 .969 0l3.83 3.908a.697.697 0 0 1 0 .979l-3.83 3.908a.68.68 0 0 1-.969 0a.695.695 0 0 1 0-.978z'/%3E%3C/svg%3E") no-repeat right calc(var(--form-input-height)*0.25) center / calc(var(--form-input-height)*0.5),
	linear-gradient(var(--form-input-fondColor), var(--form-input-fondColor)) no-repeat right top / var(--form-input-height) var(--form-input-height),
	var(--form-input-fondColor);
	height:var(--form-input-height);
}
select:where([multiple]){
	height:auto;
	max-height:none;
	overflow-y:scroll;
	padding:0;
	border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
	background-color:var(--form-input-fondColor);
}
select:where([multiple]) option{
	padding:0.5em 1em;
	margin:var(--form-bouton-bordWidth);
}
:where(select[multiple]) option:checked{
	color:var(--form-bouton-textColor);
	background-color:var(--form-bouton-fondColor);
}

/* CHECKBOX / RADIO */
[type="checkbox"],
[type="radio"]{
	margin:0 0.3em 0 0;
	padding:0;
	appearance:none;
	vertical-align:middle;
	cursor:pointer;
	display:inline-block;
}
:is([type="checkbox"],[type="radio"]){
	width:var(--form-check-taille);
	height:var(--form-check-taille);
	border:var(--form-input-bordWidth) solid var(--form-input-bordColor);
}
[type="radio"],
[type="radio"]::before{ border-radius:50%; }
:is([type="checkbox"],[type="radio"])::before{
	--form-check-marge:4px;
	content:"";
	background-color:var(--form-bouton-fondColor);
	display:block;
	width:calc(100% - var(--form-check-marge) * 2);
	height:calc(100% - var(--form-check-marge) * 2);
	margin:var(--form-check-marge);
	transform:scale(0);
	transition:transform .1s ease-out;
}
[type="checkbox"]:checked::before,
[type="radio"]:checked::before{ transform:scale(1); }

/* FICHIERS */
::file-selector-button{
	margin-right:0.25em;
}
/* Pour utiliser cet aspect, le champ doit être dans un élément contenant la classe .form-fileInput */
.form-fileInput{
	display:inline-block;
	position:relative;
}
.form-fileInput [type="file"]{
	position:absolute;
	inset:0;
	opacity:0;
	z-index:1;
	overflow:hidden;
}

/* AUTRES CHAMPS */
progress{
	display:inline-block;
	width:100%;
	vertical-align:baseline;
}
output{ display:inline-block; }


.captcha-image svg{
	width:3em;
	height:3em;
}

/*==== Structure ================================================================================*/
fieldset{
	padding:0;
	border:none;
	/*border:1px solid var(--form-input-bordColor);*/
}
legend{
	display:table;
	max-width:100%;
	padding:0 0.5em;
	color:inherit;
	white-space:normal;
	border:0;
}
label{
	display:inline-block;
	cursor:pointer;
}
.form-ligne{
	margin-block:var(--margesDefaut);
	display:flex;
	align-items:flex-start;
	justify-content:flex-start;
	gap:var(--margesDefaut);
}
.form-ligne > *{ flex:1 1 50%; }
.form-optionnel{
	font-size:0.8em;
	color:#006600;
	font-weight:400;
}
.form-label{
	display:block;
	margin:0 auto 0.5em 0;
	inline-size:fit-content;
	font-weight:500;
}
@media(max-width:600px){
	.form-ligne{ flex-direction:column; }
	.form-ligne > *{
		flex:0 0 auto;
		width:100%;
	}
}

/* Éléments inactifs */
:disabled{
	opacity:0.7;
	cursor:not-allowed;
}

/* .form-labelInside : le label contenu dans le bloc se comporte comme un placeholder et se déplace lorsque le champ est focus ou renseigné */
.form-labelInside{
	position:relative;
	padding-top:calc(var(--form-input-height) / 2);
}
.form-labelInside label{
	position:absolute;
	top:calc(var(--form-input-height) / 2);
	border-color:transparent;
	background:none;
	margin:0;
	transition:0.3s ease-out;
	transition-property:padding, opacity, font-size, font-style, top;
	pointer-events:none;
}
.form-labelInside label::after{
	content:" :";
	opacity:0;
	transition:opacity 0.3s ease-out;
}
.form-labelInside:is(:not(:has(input:placeholder-shown)),:has(input:focus)) label{
	padding:0;
	font-size:0.8em;
	opacity:1;
	font-style:normal;
	top:0;
}
.form-labelInside:is(:not(:has(input:placeholder-shown)),:has(input:focus)) label::after{opacity:1;}


/*============*\
#    HEADER    #
\*============*/
.header-logo{
	background:var(--couleur-blanc);
	border:0.2em solid rgba(255,255,255,1);
	width:calc(var(--logo-dim) - 0.4em);
	height:calc(var(--logo-dim) - 0.4em);
	position:absolute;
	left:calc(50% - var(--logo-dim) / 2 - 0.2em);
	top:calc(var(--logo-dim) / -2 - 0.2em);
	z-index:3;
	border-radius:50%;
	padding-top:calc(var(--logo-dim) / 2 - 0.2em);
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
}
.header-logo-inner{
	padding:calc(var(--logo-dim) * 0.07) calc(var(--logo-dim) * 0.1) calc(var(--logo-dim) * 0.13);
	width:calc(var(--logo-dim) * 0.8);
	flex:1 0 auto;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-size:inherit;
	margin:0;
}
.site-header{
	position:relative;
	background-color:var(--couleur-charte2);
	color:var(--couleur-blanc);
	font-size:1.6rem;
	display:grid;
	grid-template-columns:1fr var(--logo-dim) 1fr;
	grid-template-areas:"g . d";
	padding:1.5em;
	gap:1em;
}
.header-gauche,
.header-droite{
	display:flex;
	align-items:baseline;
	gap:2em;
}
.header-gauche{ grid-area:g; }
.header-droite{
	grid-area:d;
	justify-content:flex-end;
}
.header-icon{
	font-size:1.4em;
	line-height:1;
	text-decoration:none;
}
@media(max-width:980px){
	:root{
		--logo-dim:200px;
	}
	.header-outer{
		display:flex;
		flex-direction:column-reverse;
		align-items:center;
		justify-content:flex-end;
		margin-bottom:calc(var(--logo-dim) * -1);
		position:relative;
		z-index:1;

		.page-home &{
			margin-bottom:0;
		}
	}
	.header-logo{
		position:relative;
		z-index:0;
		left:auto;
	}
	.site-header{
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		width:100%;
	}
	.header-gauche,
	.header-droite{
		flex:1 0 auto;
	}
}

/* Menu de navigation */
.header-menu-outer{ position:relative; }
.header-menu{
	position:absolute;
	left:0;
	top:100%;
	border-top:0.5em solid var(--couleur-charte2);
	background-color:var(--couleur-blanc);
	text-transform:uppercase;
	min-width:260px;
	font-weight:700;
	line-height:1.2;
	padding-block:1em;
	display:none;
}
.header-menu-outer:is(:hover,:focus,:focus-within) .header-menu,
.header-menu.active{ display:block; }
.header-menu .header-menu--level-1-ul a{
	color:#707070;
	text-decoration:none;
	display:block;
	padding:0.5em 1em;
	transition:0.3s ease-out;
}
.header-menu .header-menu--level-1-ul a:is(:hover,:focus){
	color:var(--couleur-blanc);
	background-color:var(--couleur-charte1);
}

/* Image */
.header-image{
	position:relative;
	min-height:max(calc(var(--logo-dim) * 0.5), 240px);
	display:flow-root;
	align-content:end;
	z-index:0;
	margin-bottom:5em;
}
.header-image > img{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	inset:0;
}
.header-image:has( h1)::before{
	content:"";
	display:block;
	position:absolute;
	width:100%;
	height:100%;
	inset:0;
	background:linear-gradient(
		0deg,
		rgb(from var(--couleur-charte3) calc(r*0.33) calc(g*0.33) calc(b*0.33) / 0.95) 0%,
		rgb(from var(--couleur-charte3) calc(r*0.33) calc(g*0.33) calc(b*0.33) / 0.80) 50%,
		rgb(from var(--couleur-charte3) calc(r*0.33) calc(g*0.33) calc(b*0.33) / 0.33) 100%);
	z-index:1;
}
.header-image h1{
	margin-top:max(calc(var(--logo-dim) * 0.6), 1em);
	position:relative;
	z-index:2;
	color:var(--couleur-blanc);
}
@media(max-width:980px){
	.header-image h1{
		margin-top:max(calc(var(--logo-dim) * 1.6), calc(var(--logo-dim) + 1em));
	}
}


/*============*\
#    FOOTER    #
\*============*/
.site-footer{
	color:var(--couleur-blanc);
	overflow:hidden;
	padding-top:calc(1.8rem * 5 * 0.5);
	margin-top:calc((var(--haut-footer) + 1.8rem * 5 * 0.2) * -1);
	pointer-events:none;
	position:relative;
}
.site-footer>*{ pointer-events:all; }
:is(.site-header,.site-footer) a{ color:inherit; }
:is(.site-header,.site-footer) a:not(:hover,:focus){ text-decoration:none; }

/* bande claire */
.footer-contact{
	padding-block:1.5em;
	font-size:1.8rem;
	background:var(--couleur-charte2);
	transform:translateY(calc(100% - 1.5em));
	transition:transform 0.3s ease-out;
	z-index:0;
	position:relative;
}
.site-footer:has(>*:is(:hover,:focus,:focus-within)) .footer-contact{
	transform:translateY(calc(0% - 0em));
}
.footer-contact-inner{
	display:grid;
	grid-template-columns:1fr min(var(--largeur), calc(100% - 20rem)) 1fr;
	gap:2em;
}
.footer-socials{
	font-size:2.4rem;
	line-height:1;
	text-align:right;
}
.footer-socials a{ text-decoration:none; }
.footer-container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:2em;
}
.footer-container > *{ flex:1 0 auto; }
.footer-container p{ margin:0; }
.footer-contact::before,
.footer-contact::after{
	content:"";
	border-radius:50%;
	position:absolute;
	width:1em;
	height:1em;
	left:calc(50% - 0.5em);
	z-index:-1;
}
.footer-contact::before{
	background-color:var(--couleur-charte2);
	font-size:5em;
	top:-0.5em;
}
.footer-contact::after{
	background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58"><g fill="%2395c11f"><rect x="17.1" y="3.71" width="6.7" height="6.7" rx="1.3" transform="matrix(.078459 -.996917 .996917 .078459 11.81 26.9)"/><rect x="6.81" y="19.48" width="5.5" height="5.5" rx="1.6" transform="matrix(.078459 -.996917 .996917 .078459 -13.35 30.01)"/></g><g fill="%23fff"><rect x="8.94" y="7.91" width="6.4" height="6.4" rx=".9" transform="matrix(.078459 -.996917 .996917 .078459 .11 22.34)"/><rect x="2.28" y="20.13" width="3.5" height="3.5" rx=".9" transform="matrix(.078459 -.996917 .996917 .078459 -18.1 24.18)"/></g><rect x="2.42" y="14.74" width="4.3" height="4.3" rx="1.5" transform="matrix(.078459 -.996917 .996917 .078459 -12.62 20.12)" fill="%2395c11f"/><path d="M7.76,18.11l.2-2.6c0-.3.3-.5.6-.5l2.6.2c.3,0,.5.3.5.6l-.2,2.6c0,.3-.3.5-.6.5l-2.6-.2c-.3,0-.5-.3-.5-.6Z" fill="%23fff"/><rect x="5.74" y="7.93" width="2.4" height="2.4" rx=".9" transform="matrix(.078459 -.996917 .996917 .078459 -2.71 15.33)" fill="%2395c11f"/><g fill="%23fff"><path d="M31.26.51h-3.4c-1.5-.2-2.9,1-3,2.5v.8c-.2,1.5,1,2.9,2.5,3h1.8v6.4c9.2,0,16.5,7.9,15.8,17.1-2,19.6-30.2,19.2-31.6-.5h-1.5l.2-2c0-.3-.2-.5-.5-.6l-2.6-.2c-.3,0-.5.2-.6.5l-.2,2.3H.66c.4,15.7,13.5,28.1,29.2,27.7,35.8-1.8,37.1-53.2,1.5-56.9l-.1-.1Z"/><rect x="16.34" y="15.78" width="2.2" height="2.2" rx=".8" transform="matrix(.078459 -.996917 .996917 .078459 -.76 32.94)"/></g><rect x="12.42" y="3.46" width="3.5" height="3.5" rx="1.2" transform="matrix(.078459 -.996917 .996917 .078459 7.87 18.93)" fill="%2395c11f"/><g fill="%23fff"><path d="M13.06,22.71l.2-2.1c0-.2.2-.4.5-.4h0l2.1.2c.2,0,.4.2.4.5h0l-.2,2.1c0,.2-.2.4-.5.4h0l-2.1-.2c-.2,0-.4-.2-.4-.5h0Z"/><rect x="24.38" y="11.03" width="2.2" height="2.2" rx=".8" transform="matrix(.078459 -.996917 .996917 .078459 11.39 36.58)"/><rect x="22.13" y=".5" width="2.2" height="2.2" rx=".8" transform="matrix(.078459 -.996917 .996917 .078459 19.82 24.64)"/></g><rect x="12.48" y="15.28" width="3.3" height="3.3" rx="1.2" transform="matrix(.078459 -.996917 .996917 .078459 -3.85 29.69)" fill="%2395c11f"/><g fill="%23fff"><rect x="16.18" y="11.37" width="3.3" height="3.3" rx="1.2" transform="matrix(.078459 -.996917 .996917 .078459 3.45 29.78)"/><path d="M5.06,13.81l.2-2c0-.2.2-.4.4-.4l2,.2c.2,0,.4.2.4.4l-.2,2c0,.2-.2.4-.4.4l-2-.2c-.2,0-.4-.2-.4-.4Z"/></g><rect x=".76" y="24.93" width="6.7" height="6.7" rx="1.3" transform="matrix(.078459 -.996917 .996917 .078459 -24.41 30.16)" fill="%2395c11f"/></svg>') no-repeat center center / contain;
	font-size:5rem;
	top:-0.6em;
}

/* bande foncée */
.footer-nav{
	background:var(--couleur-charte3);
	font-size:1.6rem;
	position: relative;
	z-index:1;
}
.footer-nav-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:2em;
	padding:1em 0;
}
@media(max-width:980px){
	.footer-container{ gap:0; }
	.footer-nav-inner{
		row-gap:0.5em;
		justify-content:center;
	}
}
@media(pointer:coarse){
	.footer-contact{ transform:translateY(calc(0% - 0em)); }
}



/*=================*\
#    PAGE MODULE    #==============================================================================
\*=================*/

/* Bloc intro */
.module-intro{
	padding:5vw;
}
.module-intro-texte{ container-type:inline-size; }
.module-intro-titre img{ margin-top:1em; }
@container(min-width:980px){
	.module-intro-titre{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:2em;
	}
	.module-intro-titre h1{ flex:1 1 67%; }
	.module-intro-titre img{
		flex:1 1 33%;
		margin-top:0;
	}
}
.module-intro-titre img{ max-width:240px; }
.module-intro-titre h1{
	margin:0;
	color:var(--couleur-charte1);
	font-size:5rem;
}
@media(min-width:981px){
	.module-intro{
		display:flex;
		align-items:flex-start;
		justify-content:space-evenly;
		gap:5vw;
	}
	.module-intro > *{ flex:1 1 50%; }
	.module-intro-titre{ margin-bottom:2.5rem; }
}
@media(max-width:980px){
	.module-intro-titre h1{ margin-block:1em 0.5em; }
}

/* Bloc chiffres */
.wp-block-group.alignfull:has( .is-style-chiffre-cle, .is-style-avantages){ --largeur:100%; }
.wp-block-group.is-style-chiffre-cle{
	--marges : max(4vw,2em);
	font-weight:700;
	text-align:center;
	display:flex;
	align-items:stretch;
	justify-content:center;
	flex-wrap:wrap;
	gap:var(--marges) 0;
	padding-block:var(--marges);
}
.wp-block-group.is-style-chiffre-cle p{
	width:33.33%;
	min-width:12em;
	padding-inline:var(--marges);
	position: relative;
	font-size:1.25em;
}
.wp-block-group.is-style-chiffre-cle p:not(:last-child)::after{
	content:"";
	font-size:6px;
	position:absolute;
	inset:0 -0.5em 0 auto;
	border-right:1em dotted currentColor;
}
.wp-block-group.is-style-chiffre-cle p :is(b,strong){
	font-size:2em;
	line-height:1;
}
.wp-block-group.is-style-chiffre-cle strong{
	font-size:4em;
}
@media(max-width:980px){
	.wp-block-group.is-style-chiffre-cle p{
		width:auto;
		padding:0 var(--marges) var(--marges);
	}
	.wp-block-group.is-style-chiffre-cle p:not(:last-child)::after{
		inset:auto 0 -0.5em 0;
		border-bottom:1em dotted currentColor;
	}
}

/* Bloc avantages (icônes) */
.module-avantages{
	--marges : max(4vw,2em);
	background:var(--couleur-charte1);
	color:var(--couleur-blanc);
	padding:var(--marges);
}
.wp-block-group.is-style-avantages{
	--marges : max(4vw,2em);
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	justify-content:center;
	gap:var(--marges);
}
.wp-block-group.is-style-avantages > .wp-block-group{
	width:calc((100% - 2 * var(--marges)) / 3);
	min-width:12em;
	max-width:100%;
	/*display:grid;
	grid-template-columns:110px 1fr;
	align-items:start;*/
}
.wp-block-group.is-style-avantages > .wp-block-group h2{
	color:inherit;
	margin-top:0;
	max-width:360px;
}
.wp-block-group.is-style-avantages > .wp-block-group img{
	display:block;
	max-width:70px;
	margin:0 auto 0 0;
}
.module-avantages-bouton{
	text-align:center;
	margin-top:var(--marges);
	--form-bouton-bordColor:currentColor;
	--form-bouton-fondColor:none;
}
@media(max-width:980px){
	.wp-block-group.is-style-avantages > .wp-block-group{ width:auto; }
	.wp-block-group.is-style-avantages > .wp-block-group h2{ max-width:none; }
}

/* Bloc vignettes */
.module-vignettes-slider{
	--marges : max(4vw,2em);
	margin:var(--marges) auto;
	width:1200px;
	max-width:calc(100% - var(--marges) * 4);
}
.module-vignette-item{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	color:var(--couleur-blanc);
	text-decoration:none;
	font-size:1.8rem;
	text-align:center;
	overflow:hidden;
	border-radius:1.8em;
}
.module-vignette-item:nth-child( 4n ){ background-color:#005958; }
.module-vignette-item:nth-child(4n+1){ background-color:#03a984; }
.module-vignette-item:nth-child(4n+2){ background-color:#95c11f; }
.module-vignette-item:nth-child(4n+3){ background-color:#6abd40; }
.module-vignette-item h2{
	color:inherit;
	font-size:2rem;
	font-weight:700;
}
.module-vignette-item--texte{
	overflow:auto;
	min-height:6lh;
	flex:1 0 auto;
	align-content:center;
	padding:1em 2em;
}
.module-vignette-item--image{
	flex:0 0 auto;

	& img{
		aspect-ratio:768/491;
		height:100%;
	}
}

.fakeslider{
	display:grid;
	grid:auto/auto-flow max-content;
	grid-auto-rows:100%;
	grid-auto-columns:calc((100% - 0em - calc(1em * (3 - 1))) / 3);
	grid-auto-flow:column;
	grid-gap:1em;
	align-items:center;
	margin:0 3.5em;
}
@media(max-width:600px){
	:is(.module-vignettes-slider, .bloc-slider){
		max-width:calc(100% - 4em);
	}
	:is(.module-vignettes-slider, .bloc-slider) .slider-container{ margin-inline:0; }
	:is(.module-vignettes-slider, .bloc-slider) .slider-nav{ left:-2em;padding:0; }
	:is(.module-vignettes-slider, .bloc-slider) .slider-nav.slider-nav-next{ left:unset; right:-2em; }
	.bloc-slider{ margin-inline:auto; }
}


/*=====================*\
#    PAGE FORMULAIRE    #==========================================================================
\*=====================*/
.contact-container{
	max-width:680px;
	margin-bottom:6em;
}
.contact-container h1{
	color:var(--couleur-charte2);
	font-size:5rem;
}
.form-ligne-col:has( [name="motif"]){ flex-basis:25%; }
.contact-container select{
	--form-input-fondColor:var(--couleur-charte2);
	--form-input-bordColor:var(--couleur-charte2);
	color:var(--couleur-blanc);
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M11 10L7.859 6.58a.695.695 0 0 1 0-.978a.68.68 0 0 1 .969 0l3.83 3.908a.697.697 0 0 1 0 .979l-3.83 3.908a.68.68 0 0 1-.969 0a.695.695 0 0 1 0-.978z'/%3E%3C/svg%3E") no-repeat right calc(var(--form-input-height)*0) center / calc(var(--form-input-height)*1),
	linear-gradient(var(--form-input-fondColor), var(--form-input-fondColor)) no-repeat right top / var(--form-input-height) var(--form-input-height),
	var(--form-input-fondColor);
}
.contact-container option{
	background:#eee;
	color:var(--couleur-texte);
}
.form-ligne-submit{ text-align:center; }
@media(max-width:980px){
	.contact-container{max-width:100%;}
}

/* Popup */
.contact-popup{
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,0.3);
	position:fixed;
	inset:0;
	text-wrap:balance;
	opacity:0;
	z-index:-1;
	pointer-events:none;
	transition:opacity 0.3s ease-out;
}
.contact-popup.active{
	z-index:9;
	pointer-events:all;
	opacity:1;
	backdrop-filter:blur(5px);
}
.contact-popup-inner{
	background:var(--couleur-blanc);
	color:var(--couleur-gris);
	font-weight:500;
	font-size:2.2rem;
	overflow:auto;
	padding:max(5vw,2em) max(10vw,2em);
	width:800px;
	max-width:calc(100% - 2em);
	max-height:calc(100% - 2em);
	border-radius:clamp(20px, 7.5vw, 90px);
}
.contact-popup-titre{
	font-size:2em;
	color:var(--couleur-charte2);
	text-align:center;
	font-weight:700;
	line-height:1.1;
}
.contact-popup-bouton{ text-align:center; }
.contact-popup-inner > *{ margin-block:3rem; }


/*============================*\
#    PAGE QUI SOMMES-NOUS ?    #===================================================================
\*============================*/
.qsn-header-image{
	height:auto;
	padding-top:calc(var(--logo-dim) * 0.5);
	position:relative;
	z-index:0;
}
.qsn-header-image::before{
	content:"";
	z-index:1;
	position:absolute;
	inset:0;
	background:linear-gradient(0deg, rgba(0,0,0,0.6) 20%, rgba(0,0,0,0) 100%);
}
.qsn-header-image img{
	position:absolute;
	inset:0;
	z-index:0;
}
.qsn-header-image h1{
	position:relative;
	z-index:2;
	margin-block:0;
	padding-block:1em;
	color:var(--couleur-blanc);
}
.qsn-header-image .container,
.qsn-container{ max-width:900px; }
.qsn-container{ padding-block:4em; }
.qsn-container h2{
	text-transform:none;
	color:var(--couleur-charte2);
	font-size:1em;
	margin-bottom:0;
}
.qsn-intro{
	font-weight:700;
	margin-bottom:4em;
}


/*==============*\
#    PAGE CGU    #=================================================================================
\*==============*/
.cgu-h1{
	text-align:center;
	color:var(--couleur-charte2);
}
.cgu-sommaire h2{ border-bottom:2px solid currentColor;}
.cgu-sommaire a,
.cgu-content h2{
	text-decoration:none;
	font-weight:700;
	font-size:2.4rem;
	color:var(--couleur-charte2);
}
.cgu-sommaire li::before{ font-size:2.4rem; }
.cgu-sommaire-infos{ margin-left:2.4rem; }
.cgu-content-outer{
	position:relative;
	background:#eee;
	margin-top:4em;
	margin-bottom:-8em;
	padding-bottom:8em;
	display:flow-root;
}
.cgu-content{
	max-width:calc(100% - 12rem);
	margin-block:3em 6em;
}
.cgu-content .totop{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position: sticky;
	top:0.5em;
	left:0;
	font-size:6rem;
	width:1em;
	height:1em;
	margin:0.5em 0 -1.5em -1em;
}


/*====================*\
#    PAGE D'ACCUEIL    #===========================================================================
\*====================*/
.home-sections{
	--home-sections-H:100vh;
	min-height:var(--home-sections-H);
	overflow:hidden;
	scroll-snap-type: y mandatory;
	scroll-behavior:smooth;
	background:#eee;
	position: relative;
}
.home-sections-inner{
	position:absolute;
	inset:0;
	z-index:0;
	width:100%;
	height:100%;
}
.home-sections-inner::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
	pointer-events: none;
	background:rgba(0,0,0,0.6);
}
.home-section{
	scroll-snap-align: center;
	position:absolute;
	inset:0;
	transition:opacity 0.5s ease-out;
	opacity:0;
	width:100%;
	height:100%;
}
.home-section.active{
	opacity:1;
}
.home-section > img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	z-index:-1;
}
.home-section-inner{
	position:relative;
	color:#444;
	background:rgba(255,255,255,0.9);
	border-radius:1em;
	font-weight:400;
	margin:0 auto;
	width:650px;
	max-width:calc(100% - 40px);
	padding:1em calc(1em + 1ex);
	font-size:clamp(1.4rem,0.9em,2vh);
	text-align:center;
}
@media(max-width:980px){
	.header-logo{
		position:absolute;
		top:100%;
		transform:translateY(-50%);
	}
	.home-sections{
		height:auto;
		overflow:visible;
	}
	.home-sections-nav-fleches,
	.home-nav-item-bloc,
	.home-sections-inner{ display:none; }
	.home-section{ padding-top:calc(var(--logo-dim)/2 + 1em); }
	.home-section-inner{ text-align:center; }
	.home-section-titre{ margin-block:0 0.5em; }
	.home-section-next{
		display:block;
		width:1.5em;
		height:1.5em;
		margin:1em auto;
		transform-origin:center center;
		transform:rotate(45deg);
		border-right:3px solid var(--couleur-blanc);
		border-bottom:3px solid var(--couleur-blanc);
	}
	.home-nav-item{
		display:flow-root;
		background:var(--image) no-repeat center center / cover;
		position:relative;
		min-height:100vh;
		align-content:center;

		&::before{
			content:"";
			position:absolute;
			inset:0;
			z-index:0;
			pointer-events:none;
			background:rgba(0,0,0,0.6);
		}
	}
	.home-nav-item[data-rel$="_loop"]{ display:none; }
	.home-nav-texte{
		position:relative;
		margin:3em auto;
		background:#fff;
		padding:1em 1lh;
		border-radius:1em;
		width:300px;
		max-width:calc(100% - 20px);
	}
	.home-nav-texte-titre{ margin-top:0; }
}

/* Navigation */
@media(min-width:981px){
	.mobile{display:none !important;}
	.home-sections-nav{
		width:calc(var(--home-nav-item-dim)*3 + var(--home-nav-item-gap)*2);
		position:relative;
		margin:calc(var(--logo-dim) / 2 - 0.6em - 7.4rem + 5vh) auto calc(2em + 2vh);
		z-index:1;
	}
	.home-sections-nav-inner{
		display:flex;
		align-items:flex-start;
		justify-content:flex-start;
		gap:var(--home-nav-item-gap);
		color:var(--couleur-blanc);
		transition:transform 0.3s ease-out;
	}
	.home-nav-item{
		width:var(--home-nav-item-dim);
		flex:0 0 auto;
		transition:opacity 0.3s ease-out;
		opacity:1;
	}
	.home-nav-item.overflow{
		opacity:0;
		pointer-events:none;
	}
	.home-nav-item-bloc{
		width:var(--home-nav-item-dim);
		height:var(--home-nav-item-dim);
		border:2px solid var(--couleur-blanc);
		backdrop-filter:blur(8px);
		border-radius:50%;
		position:relative;
		transition:0.3s ease-out;
		transition-property:background-color, transform, color;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		text-transform:uppercase;
		text-align:center;
		padding:0.5em;
		font-weight:700;
		background-color:rgba(255,255,255,0);
		line-height:1.1;
		font-size:max(1.6rem, var(--home-nav-item-dim)*0.1);
	}
	.home-nav-item.active .home-nav-item-bloc{
		color:var(--couleur-texte);
		background-color:rgba(255,255,255,1);
	}
	.home-nav-item:not(.active) .home-nav-item--ancre{
		position:absolute;
		inset:0;
	}
	.home-nav-item .home-nav-item--bouton{
		font-size:0.6em;
		margin-top:1em;
	}
	.home-nav-item:not(.active) .home-nav-item--bouton{ display:none; }
	.home-section-intro{ margin-bottom:0; }

	.home-nav-texte{
		opacity:0;
		margin:2em -145px 0;
		background-color:var(--couleur);
		color:#fff;
		transition:opacity 0.3s ease-out;
		font-size:max(1.6rem, var(--home-nav-item-dim)*0.1);
		line-height:1.2;
		padding:1em 1lh;
		border-radius:1em;
		position:relative;
		text-align:center;
		font-weight:500;

		&::before{
			content:"";
			background-color:var(--couleur);
			font-size:1em;
			width:2em;
			height:1em;
			clip-path:polygon(50% 0, 100% 100%, 0 100%);
			position:absolute;
			left:calc(50% - 1em);
			bottom:calc(100% - 0.5px);
		}

		& p{ margin-bottom:0; }
	}
	.home-nav-item.active .home-nav-texte{
		opacity:1;
	}
	.home-sections-nav-fleches{
		position:absolute;
		inset-inline:calc(min(100px, 50vw - var(--home-nav-item-dim)*1.5 - var(--home-nav-item-gap) - var(--largScrollBar) * 0.5 - 10px) * -1);
		top:calc(var(--home-nav-item-dim) / 2);
		transform:translateY(-50%);
		display:flex;
		align-items:center;
		justify-content:space-between;
		pointer-events:none;
	}
	.home-sections-nav-fleches button{
		all:unset;
		display:flex;
		align-items:center;
		justify-content:center;
		transform:translateX(0%);
		transition:transform 0.3s ease-out;
		pointer-events:all;

		&.prev:is(:hover,:focus-visible){
			transform:translateX(-10%);
		}
		&.next:is(:hover,:focus-visible){
			transform:translateX( 10%);
		}
	}
	.home-sections-nav-fleches button svg{
		color:#fff;
		width:50px;
		height:50px;
	}
	.home-section-inner::before{
		content:"";
		background:rgba(255,255,255,0.9);
		height:1em;
		aspect-ratio:4;
		clip-path:polygon(50% 0, 100% 100%, 0 100%);
		position:absolute;
		left:50%;
		bottom:calc(100% - 0.5px);
		transform:translateX(-50%);
	}
}


/* ANIMATION */
:is(.page-home.animation) .site-header{ transition:transform 0.3s ease-out; }
:is(.page-home.animation:not(.step5)) .site-header{ transform:translateY(calc(-100% - 1px)); }
:is(.page-home.animation) .site-footer{
	transition:transform 0.3s ease-out;
	z-index:3;
}
:is(.page-home.animation:not(.step5)) .site-footer{ transform:translateY(calc(100% + 1px)); }
:is(.page-home.animation) .header-outer{
	z-index:3;
}
:is(.page-home.animation) .home-animation{
	position:fixed;
	inset:0;
	background:url('../design/home-animation.jpg') no-repeat center center / cover var(--couleur-charte2);
	z-index:2;
	transition:opacity 1s ease-out;
}
:is(.page-home.animation.step6) .home-animation{ opacity:0; }
:is(.page-home.animation) .home-animation::before{
	content:"";
	position:absolute;
	inset:0;
	background:url('../design/home-degrade.webp') no-repeat center center / 100% 100% transparent;
	opacity:1;
	transition:opacity 2s ease-out;
}
:is(.page-home.animation.step3) .home-animation::before{ opacity:0; }
:is(.page-home.animation) .header-logo-inner{ transition:padding-block 0.3s ease-out; }
:is(.page-home.animation:not(.step4)) .header-logo-inner{ padding-block:0; }
:is(.page-home.animation) .header-logo{
	transition:
		top					1s	ease-out,
		padding-top			1s	ease-out,
		filter				1s		linear,
		background-color	1s		linear,
		border-color		1s		linear;
}
:is(.page-home.animation:not(.step1)) .header-logo{ border-color:rgba(255,255,255,0); }
:is(.page-home.animation:not(.step2)) .header-logo{
	background-color:rgba(255,255,255,0);
	filter:grayscale(1) brightness(2);
}
:is(.page-home.animation:not(.step4)) .header-logo{
	top:calc(50vh - var(--logo-dim) / 2);
	padding-top:0;
}


/* Bouton avec contours */
:where(.wp-block-button.is-style-contours) .wp-block-button__link{
	--form-bouton-bordColor:currentColor;
	--form-bouton-fondColor:transparent;
}

.wpcf7-not-valid-tip{
	color:red;
	font-size:0.8em;
}
.wpcf7-response-output:not(:empty){
	padding:0.5em 1em;
	background:#eee;
	border-left:4px solid #888;
}



.wp-block-media-text__media > img{ border-radius:0 clamp(20px, 7.5vw, 90px); }

.is-style-fond-colore-large{
	--shift:min(135px, calc((100vw - var(--largScrollBar,0px) - var(--largeur) - 1em) / 2));
	margin:0.5em calc(var(--shift) * -1);
	padding:3em var(--shift);
	border-radius:0 clamp(20px, 7.5vw, 90px);
}
.is-style-fond-colore-large + .is-style-fond-colore-large{ border-top-right-radius:0; }
.is-style-fond-colore-large:has( + .is-style-fond-colore-large){ border-bottom-left-radius:0; }



.bloc-grillelogos{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:1em;
	& > *{ flex:0 0 auto; }
}


/*==================================================*\
#    PAGES SOLUTIONS (ou MODULES, ou PRODUITS...)    #
\*==================================================*/
.page-template-template-solution{
	--shift-solution-content:320px;
}
.solution-header{
	position:relative;
	z-index:1;
}
.solution-header,
.solution-content{
	padding-left:var(--shift-solution-content);
	display:flow-root;
}
.solution-header-logo{
	font-size:calc(var(--shift-solution-content) * 0.8125);
	position:absolute;
	left:0;
	bottom:-0.5em;
	width:1em;
	height:1em;
	background:#fff;
	border-radius:50%;
	padding:calc(var(--shift-solution-content) * 0.125);
	display:flex;
	align-items:center;
	justify-content:center;
}
@media(max-width:980px){
	.page-template-template-solution{
		--shift-solution-content:240px;
	}
}
@media(max-width:600px){
	.page-template-template-solution{
		--shift-solution-content:160px;
	}
	.solution-header{
		display:flex;
		flex-direction:column;
		padding-left:0;
	}
	.solution-header-logo{
		position:static;
		flex:0 0 auto;
		margin:max(calc(var(--logo-dim) * 1.6), calc(var(--logo-dim) + 1em)) auto 0;
	}
	.header-image h1{
		margin:1em auto;
		text-align:center;
	}
	.solution-content{ padding-left:0; }
}


.solution-chiffres{
	--marges : 8.5rem;
	color:var(--couleur-blanc);
	display:flow-root;
	font-size:3.5rem;
	font-weight:700;
	line-height:1.14;
	margin-block:var(--marges) calc(var(--marges) * -1);
	padding-block:var(--marges) calc(var(--marges) * 2);

	& p{
		margin:0;
		text-wrap:balance;
	}

	& strong{
		font-weight:700;
		font-size:1.429em;
	}
}
.animchiffre{
	display:inline-block;
	font-variant-numeric: tabular-nums;
}
.solution-chiffres-container{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:5rem;
}
.solution-chiffres-item{
	flex:1 1 33.33%;
}
.solution-chiffres-sep{
	flex:0 0 auto;
	align-self:stretch;
	border-right:9px dotted currentColor;
	border-bottom:9px dotted currentColor;
}
@media(max-width:980px){
	.solution-chiffres-container{ flex-direction:column; }
}

.solution-arguments{
	background:#03a984;
	color:var(--couleur-blanc);
	padding:8rem;
	gap:8rem;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	border-bottom-left-radius:8rem;
}
.solution-arguments-item{
	flex:1 1 33.33%;
}
.solution-arguments-icone{
	width:6.4rem;
}
.solution-arguments-titre{
	color:inherit;
	margin-block:0.5em 1em;
}
.solution-arguments-desc{
	margin-bottom:0;
	font-size:1.7rem;
}
@media(max-width:980px){
	.solution-arguments{
		flex-direction:column;
		padding-inline:4rem;
	}
}


.solution-slider-outer h2{
	text-align:center;
	margin-block:16rem 8rem;
}
.solution-slider{
	margin-bottom:10em;
}
.solution-slider-item{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
}
.solution-slider-vignette{
	flex:0 0 200px;
	margin-bottom:-2em;
	z-index:1;

	& img{
		width:80%;
		height:100%;
		object-fit:contain;
		object-position:center bottom;
		margin:auto auto 0;
		display:block;
	}
}
.solution-slider-content{
	flex:1 1 auto;
	background-color:var(--couleur);
	color:var(--couleur-blanc);
	padding:4.5em 2.5em 2.5em;
	border-bottom-left-radius:2.8em;
}
.solution-slider-nom{
	font-size:1.5em;
	font-weight:bold;
	margin-bottom:0.5em;
}
.solution-slider .slider-nav{
	width:3em;
	justify-content:center;
	padding-top:calc(200px - 2em);
}
.solution-slider .slider-nav::before{
	border-radius:50%;
	border:2px solid var(--swiffy-slider-nav-dark);
}
.solution-slider .slider-nav::after{
	width:2em;
	height:2em;
}
.solution-slider .slider-indicators{
	bottom:auto;
	top:calc(100% + 1em);

	&>*{
		width:calc(var(--swiffy-slider-indicators-dim)*3);
		height:var(--swiffy-slider-indicators-dim);
		border-radius:2em;
		border:2px solid var(--swiffy-slider-nav-dark);
		background:none;
		margin:calc(var(--swiffy-slider-indicators-dim) * 0.5);

		&.active{
			background:var(--swiffy-slider-nav-dark);
		}
	}
	& li::before{ display:none; }
}
.solution-slider-zoom{
	position:absolute;
	inset:0;
	z-index:2;
	transition:opacity 0.3s ease-out;
	color:#fff;
	align-content:center;
	text-align:center;
	opacity:0;
	background:rgba(255,255,255,0.2);

	& svg{
		width:50%;
		filter:drop-shadow(0px 2px 8px rgba(0,0,0,0.33));
	}

	&:is(:hover,:focus-visible){
		opacity:1;
	}
}


/*======================*\
#    Spécifs page QSN    #
\*======================*/
.qsn-specif-titreh1{
	margin-top:0;
	color:var(--couleur-charte1);
	& strong{
		display:block;
		text-transform:uppercase;
		font-size:1.333em;
		color:var(--couleur-charte3);
	}
}

.page-id-931{ overflow-x:clip; }
.page-id-931 .bg-pattern{ display:none; }


.qsn-specif-fondvert{
	position:relative;
	color:var(--couleur-blanc);
	padding-bottom:3.5em;

	&::before{
		content:"";
		z-index:-1;
		background:var(--couleur-charte3);
		display:block;
		position:absolute;
		inset:calc(var(--largeur)/4) -50% 0;
	}

	& h2{
		margin-top:0;
		color:var(--couleur-charte1);
	}
	& h3{
		color:inherit;
		font-size:clamp(1.6em, 2.6vw, 3.4rem);
		margin-bottom:0.5em;
	}

	& .wp-block-columns{
		margin-block:7em;
		gap:5em;

		&:last-child{ margin-bottom:0; }
	}
}
.qsn-specif-icone{
	width:127px;
}
@media(min-width:782px){
	.qsn-specif-filets{
		position:relative;

		&::before{
			content:"";
			position:absolute;
			left:calc(-2.5em - 4.5px);
			inset-block:0;
			border-left:9px dotted currentColor;
			width:0;
		}
	}
}
.qsn-specif-imageBasFondVert{ margin-bottom:-10em; }

.qsn-slide{
	background:var(--couleur);
	color:var(--couleur-blanc);
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:flex-start;
	text-decoration:none;
	position:relative;
	transform:scale(0.95);
	transform-origin:center center;
	transition:transform 0.3s ease-out;
	padding:30px;
	border-bottom-left-radius:2.8em;

	&:is(:hover,:focus-visible){
		transform:scale(1);
	}
	&::before{
		content:"";
		background:var(--couleur-blanc);
		position:absolute;
		inset:-1px -1px auto -1px;
		height:115px;
		z-index:0;
	}
}
.qsn-slide-logo{
	border-radius:50%;
	background:linear-gradient(135deg,rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
	box-shadow:0 3px 6px rgba(0,0,0,0.15);
	aspect-ratio:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:170px;
	margin-block:0 1em;
	z-index:1;
	position:relative;

	& img{
		mix-blend-mode:multiply;
		width:70%;
		height:70%;
		object-fit:contain;
	}
}
.qsn-slide-nom{
	font-size:1.5em;
	font-weight:bold;
	margin-bottom:0.5em;
}
.qsn-slide-bouton{
	margin-top:auto;
	align-self:flex-end;

	& .bouton{
		margin-top:1em;
		font-size:1.6rem;
		text-transform:none;
	}
}


/*==========================*\
#    Spécifs page contact    #
\*==========================*/

.page-id-1000{ background:#ebebeb; }
@media(min-width:981px){
	.page-id-1000 .header-image::after{
		content:"";
		background:url('/wp-content/uploads/contact01.webp') no-repeat center center / contain #ebebeb;
		border:35px solid #ebebeb;
		display:block;
		width:260px;
		height:260px;
		position:absolute;
		left:calc((100vw - var(--largeur) - var(--largScrollBar,0px)) / 2);
		bottom:-130px;
		border-radius:50%;
	}
}
.page-id-1000 .bg-pattern{ display:none; }
.page-id-1000 h1{
	text-transform:uppercase;
	margin-top:0.5em;
}
.page-id-1000 .wpcf7-form{
	max-width:700px;
	margin-inline:auto;
}