/* .............................................................................
SITE BLOCKS
............................................................................. */

/*
BLOCK / Standard styles
Styles standard des blocs principaux. */
.bMain {padding-top: var(--base-spacing-top);padding-bottom: var(--base-spacing-bottom);}
.bMain + .bMain {padding-top: calc(0.5 * var(--base-spacing-top)); }

	/*
	ALT :
	Dark background color.
	No double padding. */
	.bMain.bMain--dark {position: relative; padding-top: var(--base-spacing-top);padding-bottom: var(--base-spacing-bottom); }
	.bMain.bMain--dark::before {position:absolute; z-index:-2; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-gray);}
	.bMain.bMain--dark + .bMain {padding-top: var(--base-spacing-top); margin-top: -1px; }
	.bMain.bMain--dark + .bMain--dark {padding-top: calc(0.5 * var(--base-spacing-top)); }

	/*
	ALT :
	Orange background color.
	No double padding. */
	.bMain.bMain--orange {position: relative; padding-top: var(--base-spacing-top);padding-bottom: var(--base-spacing-bottom); }
	.bMain.bMain--orange::before {position:absolute; z-index:-2; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-orange);}
	.bMain.bMain--orange + .bMain {padding-top: var(--base-spacing-top); margin-top: -1px; }
	.bMain.bMain--orange + .bMain--orange:not(.bMain--textured) {padding-top: calc(0.5 * var(--base-spacing-top)); }

	/*
	ALT :
	Textured.
	Texture très subtile ajoutée par-dessus le bloc. */
	.bMain--textured {position: relative; }
	.bMain--textured::after {position:absolute;z-index:-1;display:block;content:'';inset:0;background-image: url('../../img/texture-bois-blanc.webp');background-size: 100%;background-position: center;background-repeat: repeat-y;opacity: 1;mix-blend-mode: multiply;}



/*
BLOCK / Cards list
Cards 3 cols per row qui deviennent une par-dessus l'autre sur mobile. */
.bCardsListing {--espacementV: 2vw; --espacementH: 0.5vw; --nbItems: 3; }
.bCardsListing__layout {display: flex; flex-direction: column; gap: 1.5em; }
.bCardsListing__cHeader { }
.bCardsListing__cCtn { }
.bCardsListing__cList {margin-top: 1em; }

.bCardsListing__header { }
.bCardsListing__ctn { }
.bCardsListing__items {display: flex; flex-wrap: wrap; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bCardsListing__items > * {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }

	/*
	ANIMATE
	Image fade in (blur)
	Btn fade in */
	.bCardsListing.jsAnimateClass .iCard__img > * {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
	.bCardsListing.jsAnimateClass.animate .iCard__img > * {opacity: 1; filter: none; transform: none; }

	.bCardsListing.jsAnimateClass .iCard__btn {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.5s); }
	.bCardsListing.jsAnimateClass.animate .iCard__btn {opacity: 1; }

	/*
	ALT :
	Avantages.
	Liste d'avantages dans la page Carrière.
	En display Grid pour que les rows et les items soient tous de la même hauteur. */
	.bCardsListing--avantages {--espacementV: 0.5vw; --espacementH: 0.5vw; }
	.bCardsListing--avantages .bCardsListing__header {max-width: 50em; }
	.bCardsListing--avantages .bCardsListing__ctn {max-width: 50em; }
	.bCardsListing--avantages .bCardsListing__cList {padding-left: calc(2 * (var(--width-narrow-left) - var(--width-std-left))); padding-right: calc(2 * (var(--width-narrow-right) - var(--width-std-right))); }
	.bCardsListing--avantages .bCardsListing__items {display: grid; grid-template-columns: repeat(var(--nbItems), 1fr); grid-auto-rows: 1fr; gap: calc(2 * var(--espacementV)) calc(2 * var(--espacementH)); margin: 0; }
	.bCardsListing--avantages .bCardsListing__items > * {width: 100%;padding: 0; }

		/*
		ANIMATE
		Image fade in (blur)
		Btn fade in */
		.bCardsListing.jsAnimateClass .iCardAvantage__img {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
		.bCardsListing.jsAnimateClass.animate .iCardAvantage__img {opacity: 1; filter: none; transform: none; }

		.bCardsListing.jsAnimateClass .iCardAvantage__title {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.1s); }
		.bCardsListing.jsAnimateClass.animate .iCardAvantage__title {opacity: 1; }

		.bCardsListing.jsAnimateClass .iCardAvantage__ctn {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.2s); }
		.bCardsListing.jsAnimateClass.animate .iCardAvantage__ctn {opacity: 1; }

	/* 2 items per row */
	@media (max-width:62rem) {
		.bCardsListing {--nbItems: 2; }

		.bCardsListing--avantages .bCardsListing__cList {padding: 0; }
	}

	/* 1 item per row */
	@media (max-width:46rem) {
		.bCardsListing {--espacementV: 1.5em; --espacementH: 1vw; --nbItems: 1; }
		.bCardsListing__cList {margin-top: 0; }

		.bCardsListing--avantages {--espacementV: 0.25em; }
	}



/*
BLOCK / Postes list
Liste de postes en 2 colonnes, avec header et footer. */
.bPostesListing {--espacementV: 0.5vw; --espacementH: 1vw; --nbItems: 2; }
.bPostesListing__layout {display: flex; flex-direction: column; gap: calc(0.5 * var(--base-spacing)); }
.bPostesListing__cHeader { }
.bPostesListing__cList { }
.bPostesListing__cFooter { }

.bPostesListing__header {text-align: center; max-width: 55em; margin: 0 auto; }
.bPostesListing__items {display: grid; grid-template-columns: repeat(var(--nbItems), 1fr); gap: calc(2 * var(--espacementV)) calc(2 * var(--espacementH)); }
.bPostesListing__footNote { }

	/*
	ANIMATE
	Ligne slide up
	Arrow appears */
	.bPostesListing.jsAnimateClass .iCardPoste__title {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.2s); }
	.bPostesListing.jsAnimateClass.animate .iCardPoste__title {opacity: 1; }

	.bPostesListing.jsAnimateClass .iCardPoste__icon > .svgIcon {opacity: 0; transform: translateX(-0.3em); transition: opacity 1s, transform 1s var(--ease-cubic); transition-delay: calc(var(--delay, 0s) + 0.4s); }
	.bPostesListing.jsAnimateClass.animate .iCardPoste__icon > .svgIcon {opacity: 1; transform: none; }

	/* 1 item per row */
	@media (max-width:62rem) {
		.bPostesListing {--espacementV: 0.25em; --nbItems: 1; }
	}



/*
BLOCK / CLIR
Contenu à gauche avec image à droite. On peut aussi mettre un carousel à droite. */
.bCLIR {--captionSpacing:2em; }
.bCLIR__layout {display: grid;grid-template-columns: 1fr 50%; gap: 0 8%; }
.bCLIR__cHeader {grid-column: 1 / 2; grid-row: 1 / 2;margin-bottom: -1.7em; }
.bCLIR__cCtn {grid-column: 1 / 2; grid-row: 2 / 3;margin: 2.5em 0;align-self: center; }
.bCLIR__cVisuals {grid-column: 2 / 3; grid-row: 2 / 3; }

.bCLIR__header { }
.bCLIR__ctn { }
.bCLIR__image {overflow: hidden;width: 100%;position: relative;padding-bottom: var(--captionSpacing);}
.bCLIR__image figcaption {margin: 0;position: absolute;bottom: 0;height: var(--captionSpacing);color: var(--color-orange);display: flex;align-items: center;}

	/*
	ALT :
	Fixed size. */
	.bCLIR__image--fixedSize {aspect-ratio:var(--width, 681) / var(--height, 471); overflow: hidden; }
	.bCLIR__image--fixedSize > * {width: 100%; height: 100%; object-fit: cover; }

/* Carousel */
.bCLIR__carousel {position: relative; }
.bCLIR__nav {position: absolute; z-index: 2; bottom: var(--captionSpacing); left: 0; }
.bCLIR__images { }

	/* 
	CAROUSEL */
	.bCLIR__images.jsCarouselStd {flex-wrap: nowrap; }

	/* Before init, on affiche les boites comme elles seront apres le init. */
	.bCLIR__images.jsCarouselStd.flickity-enabled {display: block; }
	.bCLIR__images.jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }

	/*
	ALT :
	Full layout.
	Titre en pleine largeur, et image de droite colle le côté droit. */
	.bCLIR--full { }
	.bCLIR--full .bCLIR__layout {grid-template-columns: 33% 1fr; gap: calc(0.5 * var(--base-spacing)) 5%; }
	.bCLIR--full .bCLIR__cHeader {grid-column: 1 / 3; margin-bottom: 0; }
	.bCLIR--full .bCLIR__cVisuals {margin-right: calc(-1 * var(--width-std-right)); }

	/*
	ALT :
	On orange. */
	.onOrange .bCLIR__image figcaption {color: var(--color-white); }

	/* 
	ANIMATE
	Fade in image blur
	Fade in nav */
	.bCLIR.jsAnimateClass .bCLIR__image > *:not(figcaption) {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: 0s; }
	.bCLIR.jsAnimateClass.animate .bCLIR__image > *:not(figcaption) {opacity: 1; filter: none; transform: none; }

	.bCLIR.jsAnimateClass .bCLIR__image figcaption {opacity: 0; transition: opacity 1s; transition-delay: 0.2s; }
	.bCLIR.jsAnimateClass.animate .bCLIR__image figcaption {opacity: 1; }

	.bCLIR.jsAnimateClass .bCLIR__nav {opacity: 0; transition: opacity 1s; transition-delay: 0.4s; }
	.bCLIR.jsAnimateClass.animate .bCLIR__nav {opacity: 1; }

	/* Stacked */
	@media (max-width:62rem) {
		.bCLIR__layout,
		.bCLIR--full .bCLIR__layout {grid-template-columns: 100%;gap: 1.5em; }
		.bCLIR__layout > * {grid-column: 1 / -1; margin: 0; }
		.bCLIR__cHeader,
		.bCLIR--full .bCLIR__cHeader {grid-column: 1 / 2;grid-row: 1 / 2;}
		.bCLIR__cCtn {grid-row: 3 / 4; }
		.bCLIR__cVisuals {grid-row: 2 / 3; }
	}



/*
BLOCK / CLIRIC
Bloc avec disposition complexe : titre, texte a gauche, image a droite avec 
icone over, CTA sous le texte avec background même hauteur que l'icone. */
.bCLIRIC {padding-bottom: 0;background: var(--color-white);--sizeIcon: clamp(6em, 15vw, 8.5em);}
.bCLIRIC + .bMain {padding-top: var(--base-spacing-top); }
.bCLIRIC__layout {display: grid;grid-template-columns: 38% 2.5% 1fr;grid-template-rows: auto 1fr auto;}
.bCLIRIC__cHeader {grid-column: 1 / -1;grid-row: 1 / 2;margin-bottom: calc(0.7 * var(--base-spacing));}
.bCLIRIC__cImage {grid-column: 2 / 4;grid-row: 2 / 4;margin-right: calc(-1 * var(--width-std-right)); overflow: hidden; }
.bCLIRIC__cIcon {grid-column: 3 / 4;grid-row: 3 / 4;z-index: 3;margin-left: 0.5em; }
.bCLIRIC__cCtn {grid-column: 1 / 2;grid-row: 2 / 3;align-self: center;margin: 2em 15% 2em 0;}
.bCLIRIC__cCTA {grid-column: 1 / 3; grid-row: 3 / 4;z-index: 2; margin-left:calc(-1 * var(--width-std-left));height: var(--sizeIcon);background: var(--color-gray);display: flex;align-items: center; }

.bCLIRIC__header { }
.bCLIRIC__image {height: 100%; }
.bCLIRIC__image * {height: 100%; width: 100%; object-fit: cover; }
.bCLIRIC__icon {font-size: var(--sizeIcon);height: 1em;width: 1em;background: var(--color-orange);color: var(--color-white); }
.bCLIRIC__ctn { }
.bCLIRIC__cta { }

	/*
	ALT :
	On dark. */
	.bCLIRIC.onDark {background: var(--color-gray); padding-bottom: 0; }
	.bCLIRIC.onDark .bCLIRIC__cCTA {background-color: var(--color-white); }

	/*
	ANIMATE
	Image fade in (blur)
	Gray block slides in */
	.bCLIRIC.jsAnimateClass .bCLIRIC__image {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: 0s; }
	.bCLIRIC.jsAnimateClass.animate .bCLIRIC__image {opacity: 1; filter: none; transform: none; }

	.bCLIRIC.jsAnimateClass .bCLIRIC__cCTA {transform: translateX(-101%); transition: transform 1s var(--ease-cubic); transition-delay: 0s; }
	.bCLIRIC.jsAnimateClass.animate .bCLIRIC__cCTA {transform: none; }

	.bCLIRIC.jsAnimateClass .bCLIRIC__cta {opacity: 0;transform: translateX(100%);transition: transform 1s var(--ease-cubic), opacity 0.5s;transition-delay: 0s;}
	.bCLIRIC.jsAnimateClass.animate .bCLIRIC__cta {opacity: 1;transform: none;}

	.bCLIRIC.jsAnimateClass .bCLIRIC__cIcon {opacity: 0; transition: opacity 1s; transition-delay: 0.7s; }
	.bCLIRIC.jsAnimateClass.animate .bCLIRIC__cIcon {opacity: 1; }


	/* Stacked */
	@media (max-width:62rem) {
		.bCLIRIC__layout {grid-template-columns: 100%; grid-template-rows: auto; }
		.bCLIRIC__layout > * {grid-column: 1 / 2; grid-row: auto; }
		.bCLIRIC__cHeader {grid-row: 1 / 2; }
		.bCLIRIC__cImage {grid-row: 2 / 3; margin-left: calc(-1 * var(--width-std-left)); }
		.bCLIRIC__cIcon {grid-row: 2 / 3; margin-left: 0; align-self: end; }
		.bCLIRIC__cCtn {margin: calc(1 * var(--base-spacing)) 0;}
		.bCLIRIC__cCTA {margin-right: calc(-1 * var(--width-std-right));}
	}



/*
BLOCK / RISearch
Recherche par icônes dans les ressources.
Liste d'icônes qui overflow en mobile. */
.bRISearch { }
.bRISearch__layout {display: flex; flex-direction: column; gap: 1.5em; width: min(100%, 100em); }
.bRISearch__cHeader { }
.bRISearch__cList { }

.bRISearch__header { }
.bRISearch__items {display: flex; gap: 2%; }
.bRISearch__items > * {flex:1 1 auto; width: 100%; }

	/* 
	ANIMATE
	Fade in image blur */
	.bRISearch.jsAnimateClass .iRoundIcon__icon {opacity: 0;filter: blur(0.5em);transform: scale(1.15);will-change: filter, transform, opacity;transition: opacity 1s, filter 1s, transform 1s;transition-delay: calc(var(--delay, 0s) + 0s);}
	.bRISearch.jsAnimateClass.animate .iRoundIcon__icon {opacity: 1; filter: none; transform: none; }

	.bRISearch.jsAnimateClass .iRoundIcon__label {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.1s); }
	.bRISearch.jsAnimateClass.animate .iRoundIcon__label {opacity: 1; }


	/* Overflow */
	@media (max-width:62rem) {
		.bRISearch { }
		.bRISearch__items {gap: 2vw; white-space: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--width-std-right)) 0 calc(-1 * var(--width-std-left)); padding: 0 var(--width-std-right) 1em var(--width-std-left); }
		.bRISearch__items > * {flex: 0 0 auto; width: calc(4em + 10vw);}
	}



/*
BLOCK / Ressources Search Results
Liste de documents classée par catégorie/groupe. */
.bRSResults {--espacementV: 2vw; --espacementH: 1vw; --width:calc(11em + 7vw); }
.bRISearch + .bRSResults {margin-top: calc(-0.75 * var(--base-spacing-top));}
.bRSResults__layout {display: flex;flex-direction: column;gap: calc(0.4 * var(--base-spacing));}
.bRSResults__cHeader { }
.bRSResults__cResults {display: flex;flex-direction: column;gap: calc(0.6 * var(--base-spacing));}

.bRSResults__header { }
.bRSResults__group {position: relative;display: flex;flex-direction: column;gap: calc(0.2 * var(--base-spacing));padding-bottom: var(--espacementV);}
.bRSResults__group::after {position:absolute; z-index:0; display:block; content:''; top:100%; height: 0.5em; left: 0; width: 4em; background:var(--color-gray); }
.bRSResults__name {width: min(100%, 22em); }
.bRSResults__items {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--width), 100%), 1fr)); gap: var(--espacementV) var(--espacementH);}

	/* Big screens */
	@media (min-width:125rem) {
		.bRSResults {--espacementV: 2.5em; --espacementH: 1.25em; }
	}

	/* 2 cols */
	@media (max-width:62rem) {
		.bRSResults {--width:18em; }
	}

	/* Spacings */
	@media (max-width:46rem) {
		.bRSResults { }
		.bRSResults__cResults {gap: calc(0.75 * var(--base-spacing)); }
		.bRSResults__group {padding-bottom: calc(2 * var(--espacementV)); }
	}



/*
BLOCK / Products Search Filters + Results
Bloc pour la page de recherche de produits avec une barre d'options, une 
colonne de filtres et l'affichage de la liste des résultats. */
.bProductsSFR {--espacementH: 1vw; --espacementV: 2vw; --width:calc(11em + 7vw); }
.bProductsSFR__layout {display: grid; grid-template-columns: max(18em, 23%) 1fr; gap: calc(0.75 * var(--base-spacing-top)) 2.5%; }
.bProductsSFR__cOptions {grid-column: 2 / 3; grid-row: 1 / 2; }
.bProductsSFR__cFilters {grid-column: 1 / 2; grid-row: 2 / 3; position: relative; }
.bProductsSFR__cListResults {grid-column: 2 / 3; grid-row: 2 / 3; }

.bProductsSFR__filtersNote {position: absolute;z-index: 1;bottom: 100%;font-size: 0.85em;font-weight: 700;margin-bottom: 0.6em;}
.bProductsSFR__filters {display: flex; flex-direction: column; gap: 0.4em; }
.bProductsSFR__items {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--width), 100%), 1fr)); gap: var(--espacementV) var(--espacementH);}

	/* 
	ANIMATE
	Fade in image blur */
	.bProductsSFR__cListResults.jsAnimateClass .iCardProduct__img {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
	.bProductsSFR__cListResults.jsAnimateClass.animate .iCardProduct__img {opacity: 1; filter: none; transform: none; }

	.bProductsSFR__cListResults.jsAnimateClass .iCardProduct__cName {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.1s); }
	.bProductsSFR__cListResults.jsAnimateClass.animate .iCardProduct__cName {opacity: 1; }

	/* Big screens */
	@media (min-width:125rem) {
		.bProductsSFR {--espacementH: 1.25em; --espacementV: 2.5em; }
	}

	/* Stacked */
	@media (max-width:62rem) {
		.bProductsSFR {--espacementV: 1.7em; overflow: hidden; }
		.bProductsSFR__layout {grid-template-columns: 100%; gap: calc(0.5 * var(--base-spacing-top)); }
		.bProductsSFR__layout > * {grid-column: 1 / 2; grid-row: auto; }

		.bProductsSFR__filtersNote {position: static; }
		.bProductsSFR__filters {display: flex; flex-direction: row; padding-left: var(--width-std-left); padding-right: var(--width-std-right); margin-left: calc(-1 * var(--width-std-left)); margin-right: calc(-1 * var(--width-std-right)); overflow: auto; }
		.bProductsSFR__filters > * {flex:0 0 auto; width: 45%; }
	}

	@media (max-width:46rem) {
		.bProductsSFR {--width:calc(6em + 16vw); }
		.bProductsSFR__filters > * {width: max(15em, 75%); }
	}


/* Barre d'options avec nombre de résultats ainsi que 2 icônes de disposition de mise en page. */
.iOptionsBar {display: flex;align-items: center;gap: 2%;background: var(--color-white);}
.iOptionsBar__nbResults {flex:1 1 auto; color: var(--color-orange); padding-left: 1.5em; }
.iOptionsBar__icons {flex:0 0 auto; display: flex; align-items: center; }
.iOptionsBar__icons > * + * {position: relative; }
.iOptionsBar__icons > * + *::before {position:absolute; z-index:0; display:block; content:''; left: 0; width: 1px; top: 25%; bottom: 25%; background:var(--color-gray); }

	/* Size */
	@media (max-width:46rem) {
		.iOptionsBar__nbResults > * {font-size: min(5.5vw, 1.8em);}
	}


/* Box d'un filtre avec le titre et la liste des filtres qui sont des checkbox. */
.iFilter {--paddingY:5%; --paddingX:9%; }
.iFilter__title {background: var(--color-gray-medium-dark);color: var(--color-white);padding: var(--paddingY) var(--paddingX); }
.iFilter__title > * {font-weight: 700; margin-bottom: -0.3em; }
.iFilter__options {background: var(--color-gray-medium);padding: var(--paddingY) var(--paddingX) calc(1.25 * var(--paddingY)) var(--paddingX); }



/*
BLOCK / FAQ
Titres, paragraphe de contenu et liste de FAQ.
Beaucoup d'espace de chaque côté de la liste. */
.bFAQ { }
.bFAQ__layout {display: flex; flex-direction: column; gap: 1.5em; }
.bFAQ__cHeader { }
.bFAQ__cCtn { }
.bFAQ__cFAQs {margin-top: 2em; }

.bFAQ__header { }
.bFAQ__ctn {width: min(100%, 40em); }
.bFAQ__faqs { }

	/* Spacing */
	@media (max-width:62rem) {
		.bFAQ__cFAQs {margin-top: 1em; }
	}

	/* Spacing */
	@media (max-width:46rem) {
		.bFAQ__cFAQs {margin-top: 0.5em; }
	}



/*
BLOCK / Cards carousels
Il peut y avoir plusieurs carousels affichables avec une navigation style tabs. */
.bCardsCarousels {--espacementH: 0.5vw; --nbItems: 2.4; overflow: hidden; }
.bCardsCarousels__layout { }
.bCardsCarousels__cHeader {margin-bottom: 1.2em; }
.bCardsCarousels__cTabs {margin-bottom: 3.5em; }
.bCardsCarousels__cCarousels { }

.bCardsCarousels__header { }
.bCardsCarousels__tabs { }
.bCardsCarousels__carousels {display: grid; }
.bCardsCarousels__carousel {grid-column: 1 / 2; grid-row: 1 / 2; position: relative; }
.bCardsCarousels__items {display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--espacementH)); }
.bCardsCarousels__items .iCard {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }
.bCardsCarousels__nav {position: absolute; z-index: 3; bottom: calc(2em + 100%); right: 0; }

	/* 
	TABS / Active */
	.bCardsCarousels__carousel {pointer-events: none; }
	.bCardsCarousels__carousel.active {pointer-events: auto; }

	.bCardsCarousels__carousel .bCardsCarousels__items {opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
	.bCardsCarousels__carousel.active .bCardsCarousels__items {opacity: 1; visibility: visible; transition: opacity 1s; }

	/* Instant change, comme ça on pense que c'est les mêmes flèches, même si elles ont changé 🤯. */
	.bCardsCarousels__carousel .bCardsCarousels__nav {opacity: 0; visibility: hidden; }
	.bCardsCarousels__carousel.active .bCardsCarousels__nav {opacity: 1; visibility: visible; }

	/* 
	CAROUSEL */
	.bCardsCarousels .jsCarouselStd {flex-wrap: nowrap; }

	/* Overflow visible */
	.bCardsCarousels .jsCarouselStd .flickity-viewport {overflow: visible; }

	/* Before init, on affiche les boites comme elles seront apres le init. */
	.bCardsCarousels .jsCarouselStd.flickity-enabled {display: block; }
	.bCardsCarousels .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+4) {display: none; }

	/*
	ALT :
	Carousel de 4 produits. */
	.bCardsCarousels__items:has(.iCardProduct) {--nbItems: 4; }
	.bCardsCarousels__items .iCardProduct {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }

	/*
	ANIMATE
	Image fade in (blur)
	Btn fade in */
	.bCardsCarousels.jsAnimateClass .iCard__img > * {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
	.bCardsCarousels.jsAnimateClass.animate .iCard__img > * {opacity: 1; filter: none; transform: none; }

	.bCardsCarousels.jsAnimateClass .iCard__btn {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.5s); }
	.bCardsCarousels.jsAnimateClass.animate .iCard__btn {opacity: 1; }

	/* Big screens */
	@media (min-width:125rem) {
		.bCardsCarousels {--espacementH: 0.625em; }
	}
	
	/* 2 cols */
	@media (max-width:62rem) {
		.bCardsCarousels {--nbItems: 1.4; }
		.bCardsCarousels__cHeader {margin-bottom: 0.5em; }
		.bCardsCarousels__cTabs {margin-bottom: 1em; }
		.bCardsCarousels__nav {display: none; }

		.bCardsCarousels__items:has(.iCardProduct) {--nbItems: 2.4; }
	}
	
	/* 1 col */
	@media (max-width:46rem) {
		.bCardsCarousels {--espacementH: 1vw; --nbItems: 1.05; }

		.bCardsCarousels__items:has(.iCardProduct) {--nbItems: 1.4; }
	}



/*
BLOCK / Multi-purpose carousel
Carousel polyvalent qui peut contenir des projets, des logos, etc.
ALT le carousel pour définir des options spécifiques. */
.bMPCarousel {--espacementH: 0.5vw; --nbItems: 1.05; overflow: hidden; }
.bMPCarousel__layout { }
.bMPCarousel__cHeader {margin-bottom: 2em; display: grid; grid-template-columns: 1fr auto; gap: 0 6%; }
.bMPCarousel__cCarousel { }

.bMPCarousel__header {grid-column: 1 / 3;grid-row: 1 / 2;width: min(100%, 60em);padding-top: 0.2em;margin-bottom: 1em;}
.bMPCarousel__ctn {grid-column: 1 / 2; grid-row: 2 / 3; width: min(100%, 50em); margin-top: 0.7em; }
.bMPCarousel__ctn p {text-wrap: balance; }
.bMPCarousel__nav {grid-column: 2 / 3; grid-row: 2 / 3; align-self: end; text-align: right; }
.bMPCarousel__headerBtn {grid-column: 2 / 3; grid-row: 2 / 3; align-self: end; text-align: right; }
.bMPCarousel__carousel { }
.bMPCarousel__items {display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--espacementH)); }
.bMPCarousel__items .iCardProject {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }

	/* 
	CAROUSEL */
	.bMPCarousel__items.jsCarouselStd {flex-wrap: nowrap; }

	/* Overflow visible */
	.bMPCarousel__items.jsCarouselStd > .flickity-viewport {overflow: visible; }

	/* Before init, on affiche les boites comme elles seront apres le init. */
	.bMPCarousel__items.jsCarouselStd.flickity-enabled {display: block; }
	.bMPCarousel__items.jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }

	/* 100% height slides */
	.flickity-resize.bMPCarousel__items .iCardProject {min-height: 100%;display: flex;}
	.flickity-resize.bMPCarousel__items .iCardProject__layout {height: auto;}

	/* 
	ANIMATE
	Fade in image blur
	Fade in content */
	.bMPCarousel.jsAnimateClass .iCardProject__cCtn {opacity: 0; transition: opacity 1s; transition-delay: 0s; }
	.bMPCarousel.jsAnimateClass.animate .iCardProject__cCtn {opacity: 1; }

	.bMPCarousel.jsAnimateClass .iCardProject__image > *:not(figcaption) {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: 0.2s; }
	.bMPCarousel.jsAnimateClass.animate .iCardProject__image > *:not(figcaption) {opacity: 1; filter: none; transform: none; }

	.bMPCarousel.jsAnimateClass .iCardProject__image figcaption {opacity: 0; transition: opacity 1s; transition-delay: 0.4s; }
	.bMPCarousel.jsAnimateClass.animate .iCardProject__image figcaption {opacity: 1; }

	.bMPCarousel.jsAnimateClass .iCardProject__nav {opacity: 0; transition: opacity 1s; transition-delay: 0.6s; }
	.bMPCarousel.jsAnimateClass.animate .iCardProject__nav {opacity: 1; }

	/*
	ALT :
	Carousel de logos. */
	.bMPCarousel--logos {--espacementH: 0.25vw; --nbItems: 5; }
	.bMPCarousel--logos .iCardLogo {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }

		/* 
		ANIMATE
		Fade in image blur */
		.bMPCarousel.jsAnimateClass .iCardLogo__logo > * {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
		.bMPCarousel.jsAnimateClass.animate .iCardLogo__logo > * {opacity: 1; filter: none; transform: none; }

		.bMPCarousel.jsAnimateClass .iCardLogo__caption {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.1s); }
		.bMPCarousel.jsAnimateClass.animate .iCardLogo__caption {opacity: 1; }

	/*
	ALT :
	Carousel de nouvelles. */
	.bMPCarousel--news {--nbItems: 2.4; }
	.bMPCarousel--news .iCard {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }
	
	/*
		ANIMATE
		Image fade in (blur)
		Btn fade in */
		.bMPCarousel.jsAnimateClass .iCard__img > * {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
		.bMPCarousel.jsAnimateClass.animate .iCard__img > * {opacity: 1; filter: none; transform: none; }

		.bMPCarousel.jsAnimateClass .iCard__btn {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.5s); }
		.bMPCarousel.jsAnimateClass.animate .iCard__btn {opacity: 1; }

	/*
	ALT :
	Carousel de vidéos. */
	.bMPCarousel--videos {--nbItems: 2.4; }
	.bMPCarousel--videos .iCardVideo {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }

		/* 
		ANIMATE
		Fade in image blur */
		.bMPCarousel.jsAnimateClass .iCardVideo__img > * {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
		.bMPCarousel.jsAnimateClass.animate .iCardVideo__img > * {opacity: 0.5; filter: none; transform: none; }

		.bMPCarousel.jsAnimateClass .iCardVideo__ctn {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.1s); }
		.bMPCarousel.jsAnimateClass.animate .iCardVideo__ctn {opacity: 1; }

		.bMPCarousel.jsAnimateClass .iCardVideo__play {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.4s); }
		.bMPCarousel.jsAnimateClass.animate .iCardVideo__play {opacity: 1; }

	/*
	ALT :
	Carousel pour la timeline. */
	.bMPCarousel--timeline {--nbItems: 2.4; }
	.bMPCarousel--timeline .iCard {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }
	.bMPCarousel__cYears {margin-top: calc(0.7 * var(--base-spacing-top));}
	.bMPCarousel__years {display: flex; }
	.bMPCarousel__years .iTimelineYear {flex: 0 0 auto; }

		/* 
		CAROUSEL */
		.bMPCarousel__items.jsCarouselTimeline {flex-wrap: nowrap; }
		.bMPCarousel__years.jsCarouselTimeline__years {flex-wrap: nowrap; }

		/* Overflow visible */
		.bMPCarousel__items.jsCarouselTimeline > .flickity-viewport {overflow: visible; }
		.bMPCarousel__years.jsCarouselTimeline__years > .flickity-viewport {overflow: visible; }

		/* Before init, on affiche les boites comme elles seront apres le init. */
		.bMPCarousel__items.jsCarouselTimeline.flickity-enabled {display: block; }
		.bMPCarousel__items.jsCarouselTimeline:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }
		.bMPCarousel__years.jsCarouselTimeline__years.flickity-enabled {display: block; }

	/*
	ALT :
	Carousel de 4 produits.
	Désactivation du carousel sur desktop. */
	.bMPCarousel--someProducts {--nbItems: 4; }
	.bMPCarousel--someProducts .iCardProduct {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: 0 var(--espacementH); }
	.bMPCarousel--someProducts .bMPCarousel__items.jsCarouselStd:not(.flickity-enabledd) > * {display: block;}

		/* Disable on desktop */
		.bMPCarousel--someProducts .jsCarouselStd::after {content: ''; }

		/* 
		ANIMATE
		Fade in image blur */
		.bMPCarousel.jsAnimateClass .iCardProduct__img {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
		.bMPCarousel.jsAnimateClass.animate .iCardProduct__img {opacity: 1; filter: none; transform: none; }

		.bMPCarousel.jsAnimateClass .iCardProduct__cName {opacity: 0; transition: opacity 1s; transition-delay: calc(var(--delay, 0s) + 0.1s); }
		.bMPCarousel.jsAnimateClass.animate .iCardProduct__cName {opacity: 1; }

	/* Big screens */
	@media (min-width:125rem) {
		.bMPCarousel {--espacementH: 0.625em; }
		.bMPCarousel--logos {--espacementH: 0.3125em; }
	}

	/* Spacings et nb items */
	@media (max-width:62rem) {
		.bMPCarousel--logos {--espacementH: 0.5vw; --nbItems: 2.2; }
		.bMPCarousel--news {--nbItems: 1.4; }
		.bMPCarousel--videos {--nbItems: 1.4; }
		.bMPCarousel--timeline {--nbItems: 1.4; }

		.bMPCarousel--someProducts {--nbItems: 2.4; }
		.bMPCarousel--someProducts .jsCarouselStd::after {content: 'flickity'; display: none; }
	}

	/* Stacked header */
	@media (max-width:46rem) {
		.bMPCarousel {--espacementH: 1vw; }
		.bMPCarousel__cHeader {grid-template-columns: 1fr; margin-bottom: 1.5em; }
		.bMPCarousel__cHeader > * {grid-column: 1 / 2; grid-row: auto; }
		.bMPCarousel__ctn {margin-top: 0; margin-bottom: 1.5em; }

		.bMPCarousel--logos {--espacementH: 1vw; --nbItems: 1.3; }
		.bMPCarousel--news {--nbItems: 1.05; }
		.bMPCarousel--videos {--nbItems: 1.05; }
		.bMPCarousel--timeline {--nbItems: 1.05; }
		.bMPCarousel--someProducts {--nbItems: 1.4; }
	}



/*
BLOCK / More infos
A big title at left, and an offset box with a CTA at right. */
.bMoreInfos.bMain.bMain--dark {padding-top: 0; padding-bottom: 0; }
.bMoreInfos__layout {display: flex; gap: 5%; }
.bMoreInfos__cCtn {flex:1 1 auto; padding-top: var(--base-spacing-top); padding-bottom: var(--base-spacing-bottom); }
.bMoreInfos__cCTA {flex:0 0 auto; padding: var(--base-spacing-top) var(--width-std) var(--base-spacing-bottom) var(--width-std);background: var(--color-orange);transform: translateY(calc(-0.9 * var(--base-spacing-top)));z-index: 3;display: grid;align-items: center;}
.bMoreInfos__ctn { }
.bMoreInfos__cta { }

	@media (max-width:46rem) {
		.bMoreInfos.bMain.bMain--dark {padding-top: var(--base-spacing-top); padding-bottom: var(--base-spacing-bottom); text-align: center; }
		.bMoreInfos__layout {flex-direction: column; gap: calc(0.5 * var(--base-spacing)); }
		.bMoreInfos__cCtn {padding: 0; }
		.bMoreInfos__cCTA {padding: 0; transform: none; background: none; }
	}



/*
BLOCK / Texture bois
Prend toute la largeur. */
.bTextureBoisWide { }
.bTextureBoisWide::after {position:absolute;z-index:1;display:block;content:'';inset:0;background-image: url('../../img/texture-bois-blanc-rotated.webp');background-size: cover;background-position: center;background-repeat: repeat-x;opacity: 1;mix-blend-mode: multiply;}



/*
BLOCK / Banner
Image in BG, content over the image. */
.bBanner { }
.bBanner__layout {display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }
.bBanner__layout > * {grid-column: 1 / -1; grid-row: 1 / -1; }
.bBanner__cCtn {z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.bBanner__cVisuals {overflow: hidden; }

.bBanner__ctn {padding: 8% var(--width-narrow);text-align: center;}
.bBanner__media {position: relative;height: 120%; top: -10%; }
.bBanner__media * {height: 100%; width: 100%; object-fit: cover; }
.bBanner__media::before {position:absolute;z-index: 1;display:block;content:'';top:0;bottom:0;left:0;right:0;background: var(--color-black); opacity: 0.3; }

	/*
	ALT :
	Darker image opacity. */
	.bBanner--darker { }
	.bBanner--darker .bBanner__media::before {opacity: 0.6; }

	/* 
	ANIMATE
	Title fade in */
	.bBanner.jsAnimateClass .bBanner__ctn > * {opacity: 0; transition: opacity 1s; }
	.bBanner.jsAnimateClass .bBanner__ctn .typo__cta {transition-delay: 0.2s; }
	.bBanner.jsAnimateClass.animate .bBanner__ctn > * {opacity: 1; }

	/* Spacings */
	@media (max-width: 62rem) {
		.bBanner__ctn {padding: 20% var(--width-std); }
	}



/*
BLOCK / Banner simple
Dans sa forme la plus simple : contenu centré avec background gris ou orange. */
.bBannerSimple { }
.bBannerSimple__layout { }
.bBannerSimple__cCtn { }
.bBannerSimple__ctn {width: 100%;text-align: center;}
.bBannerSimple__ctn figure {margin-left: auto;margin-right: auto; }
.bBannerSimple__ctn * + h2 {margin-top: 0.8em; }

	/* 
	ANIMATE
	Title fade in */
	.bBannerSimple.jsAnimateClass .bBannerSimple__ctn > * {opacity: 0.1; transition: opacity 1s; }
	.bBannerSimple.jsAnimateClass .bBannerSimple__ctn .typo__cta {opacity: 0; }
	.bBannerSimple.jsAnimateClass.animate .bBannerSimple__ctn > * {opacity: 1; }



/*
BLOCK / Banner stroked
Banner assez simple, mais la particularité est que c'est entouré d'un gros contour.. */
.bBannerStroked { }
.bPostesListing + .bBannerStroked {padding-top:0; }
.bBannerStroked__layout { }
.bBannerStroked__cCtn { }
.bBannerStroked__ctn {width: 100%;text-align: center; position: relative; padding: 6% 10%;}
.bBannerStroked__ctn::before {position:absolute; z-index:-1; display:block; content:''; inset:0; border: min(1vw, 0.6em) solid var(--color-orange); }

	/* On dark + orange */
	.onOrange .bBannerStroked__ctn::before {border-color: var(--color-white); }
	.onDark .bBannerStroked__ctn::before {border-color: var(--color-white); }

	/*
	ANIMATE
	Content fade in
	Stroke appear */
	.bBannerStroked.jsAnimateClass .bBannerStroked__ctn > * {opacity: 0; transition: opacity 1s; transition-delay:0s; }
	.bBannerStroked.jsAnimateClass .bBannerStroked__ctn .typo__cta {transition-delay: 0.1s; }
	.bBannerStroked.jsAnimateClass.animate .bBannerStroked__ctn > * {opacity: 1; }

	/* Spacing */
	@media (max-width:62rem) {
		.bBannerStroked__ctn {padding: 10%; }
	}

	@media (max-width:46rem) {
		.bBannerStroked__ctn {padding: 15% var(--width-std); }
	}



/*
BLOCK / Double CTA
Un appel d'action avec une texture bois blanc à gauche et un orange à droite. */
.bDoubleCTA { }
.bDoubleCTA__layout {display: flex; }
.bDoubleCTA__cCTA {flex:0 0 auto; width: 50%; }
a.bDoubleCTA__cta {position: relative; height: 100%; background: var(--color-orange); display: grid;grid-template-columns: 1fr;grid-template-rows: auto;transition: background-color 0.4s var(--ease-cubic); }
.bDoubleCTA__cta::before {position:absolute;z-index: 2;display:block;content:'';bottom:0;height: 8vw;left:0;width: 2.7vw;background: var(--color-gray);}
.bDoubleCTA__ctn {grid-column: 1 / -1; grid-row: 1 / 2; align-self: center; z-index: 1; padding: 10% 18%; text-align: center; }

/* Avec BG, on l'affiche en dessous. */
.bDoubleCTA__bg {grid-column: 1 / -1; grid-row: 1 / 2; position: relative; }
.bDoubleCTA__bg * {width: 100%; height: 100%; object-fit: cover; }
.bDoubleCTA__bg::before {position:absolute; z-index:1; display:block; content:''; top:0; bottom:0; left:0; right:0; background: var(--color-black); opacity: 0; transition: opacity 0.4s var(--ease-cubic); }

	/* Hover */
	a.bDoubleCTA__cta:hover {background-color: var(--color-gray); }
	a.bDoubleCTA__cta:hover .bDoubleCTA__bg::before {opacity: 0.2; }

	/* Si le bloc précédent est orange, changer le background du CTA de droite. */
	.bMain--orange + .bDoubleCTA { }
	.bMain--orange + .bDoubleCTA .bDoubleCTA__cCTA--right a.bDoubleCTA__cta {background-color: var(--color-gray); }
	.bMain--orange + .bDoubleCTA .bDoubleCTA__cCTA--right .bDoubleCTA__cta::before {background: var(--color-orange); }

		/* Hover */
		.bMain--orange + .bDoubleCTA .bDoubleCTA__cCTA--right a.bDoubleCTA__cta:hover {background-color: var(--color-orange); }

	/* Stacked */
	@media (max-width:46rem) {
		.bDoubleCTA__layout {flex-direction: column; }
		.bDoubleCTA__cCTA {width: 100%; }
		a.bDoubleCTA__cta {min-height: 16em; }
		.bDoubleCTA__cta::before {height: 16vw; width: 5.4vw; }
		.bDoubleCTA__ctn {padding: 10% 15%; }
		.bDoubleCTA__bg {position: absolute;inset: 0;}
	}



/*
BLOCK / Hotspots
Grosse image avec des points dont on peut afficher plus de détails. */
.bHotSpots {overflow-x: clip;}
.bHotSpots__layout {display: flex; flex-direction: column; gap: calc(0.7 * var(--base-spacing)); }
.bHotSpots__cHeader { }
.bHotSpots__cVisual { }

.bHotSpots__header { }
.bHotSpots__intro {margin-top: 1.5em; }
.bHotSpots__visual {position: relative; }
.bHotSpots__pins {position: absolute; z-index: 2; inset: 0; }
.bHotSpots__image { }

/* Item hotspot */
.iHotSpot {--x:50%; --y:50%; position: absolute; top: var(--y); left: var(--x); transform: translate(-50%, -50%); }
.iHotSpot__triggerPin { }
.iHotSpot__popup {position: absolute;z-index: 3;left: 100%;top: 50%;transform: translateY(-50%); }
.iHotSpot__box {position: relative;background: var(--color-white);width: min(60vw, 23em);padding: 1.8em;margin: 1em;}
.iHotSpot__closeBtn {position: absolute; top: 0; right: 0; }
.iHotSpot__ctn { }
.iHotSpot__ctn p:not([class]) {font-size: 0.85em; }
.iHotSpot__ctn p.typo__cta {margin-top: 1.5em;}
.iHotSpot__ctn > *:nth-child(-n+2) {width: calc(100% - 3rem);}

	/* Custom positions, classes set en JS */
	.iHotSpot--openBottom .iHotSpot__popup {left: 50%; top: 100%; transform: translateX(-50%); }
	.iHotSpot--openLeft .iHotSpot__popup {right: 100%; left: auto; top: 50%; transform: translateY(-50%); }
	.iHotSpot--openTop .iHotSpot__popup {left: 50%; top: auto; bottom: 100%; transform: translateX(-50%); }

	/* Active (open) */
	.iHotSpot {z-index: 3; transition: z-index 0s 0.3s; }
	.iHotSpot.active {z-index: 5; transition-delay: 0s; }
	.iHotSpot .iHotSpot__popup {opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;}
	.iHotSpot.active .iHotSpot__popup {opacity: 1; visibility: visible; }

	/*
	ANIMATE
	Hotspots appears */
	.bHotSpots__cVisual.jsAnimateClass .iHotSpot__triggerPin {opacity: 0; transform: scale(1.3); transition: opacity 1s, transform 1s var(--ease-cubic); transition-delay: calc(var(--delay, 0s) + 0s); }
	.bHotSpots__cVisual.jsAnimateClass.animate .iHotSpot__triggerPin {opacity: 1; transform: none; }

	/* Size */
	@media (max-width:62rem) {
		.iHotSpot__box {padding: 1.3em;margin: 0.5em;}
	}



/*
BLOCK / Products tabs
Tabulation custom puisque sur mobile l'image est séparée du contenu. */
.bProductsTabs {--offsetTabs:2.5rem; }
.bProductsTabs__layout {display: grid; grid-template-columns: 50% 1fr; grid-template-rows: auto auto 1fr; }
.bProductsTabs__cHeader {grid-column: 1 / -1; margin-bottom: calc(0.6 * var(--base-spacing)); }
.bProductsTabs__cTabs {grid-column: 1 / 2; grid-row: 2 / 4; margin-right: 4em; }
.bProductsTabs__cVisuals {grid-column: 2 / 3; grid-row: 2 / 3; margin-bottom: 2em; }
.bProductsTabs__cCtn {grid-column: 2 / 3; grid-row: 3 / 4; }

.bProductsTabs__header { }
.bProductsTabs__intro {margin-top: 1.5em; }
.bProductsTabs__smallTitle {margin-left: var(--offsetTabs); margin-bottom: 1.5em; }
.bProductsTabs__tabs { }
.bProductsTabs__images {display: grid; }
.bProductsTabs__image {grid-column: 1 / 2; grid-row: 1 / 2; overflow: hidden; max-height: max(50vh, 15vw);}
.bProductsTabs__image > * {height:100%;width: 100%;object-fit: contain;object-position: top left;}
.bProductsTabs__ctns {display: grid; }
.bProductsTabs__ctn {grid-column: 1 / 2; grid-row: 1 / 2; }

	/* Active */
	.bProductsTabs__image {opacity: 0; visibility: hidden; transform: scale(0.9); transition: opacity 0.2s, transform 0.5s var(--ease-cubic), visibility 0.2s; }
	.bProductsTabs__image.active {opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s, transform 0.5s var(--ease-cubic); }
	
	.bProductsTabs__ctn {opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; }
	.bProductsTabs__ctn.active {opacity: 1; visibility: visible; transition: opacity 1s, visibility 1s; }

	/*
	ANIMATE
	Image fade in (blur)
	Btn fade in */
	.bProductsTabs.jsAnimateClass .bProductsTabs__image > * {opacity: 0; filter: blur(0.5em); transform: scale(1.15); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
	.bProductsTabs.jsAnimateClass.animate .bProductsTabs__image > * {opacity: 1; filter: none; transform: none; }


	/* Stacked */
	@media (max-width:62rem) {
		.bProductsTabs__layout {grid-template-columns: 1fr; grid-template-rows: auto; }
		.bProductsTabs__layout > * {grid-column: 1 / 2; }
		.bProductsTabs__cHeader {grid-row: 1 / 2; }
		.bProductsTabs__cTabs {grid-row: 3 / 4; margin-right: 0; margin-bottom: 2em; }
		.bProductsTabs__cVisuals {grid-row: 2 / 3; }
		.bProductsTabs__cCtn {grid-row: 4 / 5; }
	}

	/* Margins */
	@media (max-width:46rem) {
		.bProductsTabs {--offsetTabs:2.8rem; }
		.bProductsTabs__cTabs {margin-left: calc(-1 * var(--width-std-left)); }
		.bProductsTabs__cVisuals {margin-bottom: 1.5em; }
		.bProductsTabs__smallTitle {margin-bottom: 1em; }
	}



/*
BLOCK / Affiliations logos polyvalent
Contenu à gauche avec logos à droite, le titre overlap un peu. */
.bAffiliationsLogos {--gapLogos: calc(16vw / calc(1 * var(--qtyItems)));}
.bAffiliationsLogos__layout {display: grid;grid-template-columns: 1fr 50%;grid-template-rows: auto;gap: 2em 8%;}
.bAffiliationsLogos__cHeader {grid-column: 1 / -1; width: min(60em, 100%); }
.bAffiliationsLogos__cCtn {grid-column: 1 / 2; }
.bAffiliationsLogos__cLogos {grid-column: 2 / 3;align-self: center;display: flex;justify-content: center;gap: var(--gapLogos);}

.bAffiliationsLogos__header { }
.bAffiliationsLogos__ctn { }
.bAffiliationsLogos__logo {flex: 0 1 auto;width: auto;max-width: 50%;position: relative;display: flex;flex-direction: column;justify-content: center;}
.bAffiliationsLogos__logo > * {flex: 0 1 auto;}
.bAffiliationsLogos__logo:not(:first-child)::before {position:absolute;z-index:0;display:block;content:'';top:0;bottom:0;left:calc(-0.5 * var(--gapLogos));width: 1px;background: currentColor;}

	/* 
	ANIMATE
	Logos fade in
	Ligne séparatrice expands */
	.bAffiliationsLogos.jsAnimateClass .bAffiliationsLogos__logo > * {opacity: 0; transition: opacity 1s; transition-delay: calc(0.2s * var(--item)); }
	.bAffiliationsLogos.jsAnimateClass.animate .bAffiliationsLogos__logo > * {opacity: 1; }

	.bAffiliationsLogos.jsAnimateClass .bAffiliationsLogos__logo::before {transform: scaleY(0); transition: transform 1.2s var(--ease-cubic); transition-delay: calc(0.2s * var(--item)); }
	.bAffiliationsLogos.jsAnimateClass.animate .bAffiliationsLogos__logo::before {transform: none; }

	/* Gap */
	@media (min-width:125rem) {
		.bAffiliationsLogos {--gapLogos: calc(25rem / calc(1 * var(--qtyItems)));}
	}

	/* Stacked */
	@media (max-width:62rem) {
		.bAffiliationsLogos {--gapLogos:calc(36vw / calc(1 * var(--qtyItems))); }
		.bAffiliationsLogos__layout {grid-template-columns: 1fr; gap: 0; }
		.bAffiliationsLogos__layout > * {grid-column: 1 / 2; }
		.bAffiliationsLogos__cHeader {margin-bottom: calc(0.5 * var(--base-spacing)); }
		.bAffiliationsLogos__cLogos {margin: calc(0.7 * var(--base-spacing)) var(--width-std-right) 0 var(--width-std-left);}
	}



/*
BLOCK / Performance
Section qui contient un titre, un paragraphe de contenu et une liste d'icônes. */
.bPerformance {--espacementV: 0px; --espacementH: 0.5em; --nbItems: 5; }
.bPerformance__layout {display: grid;grid-template-columns: 30% 1fr;gap: 3em;}
.bPerformance__cHeader {grid-column: 1 / -1; width: min(60em, 100%); }
.bPerformance__cCtn {grid-column: 2 / 3; }
.bPerformance__cVisuals {grid-column: 2 / 3; }

.bPerformance__header { }
.bPerformance__ctn { }
.bPerformance__list {display: flex; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bPerformance__list > * {flex: 1 1 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }

	/*
	ANIMATE
	Image fade in */
	.bPerformance.jsAnimateClass .iNamedIcon {opacity: 0; transition: opacity 1.5s; transition-delay: calc(var(--delay, 0s) + 0.2s); }
	.bPerformance.jsAnimateClass.animate .iNamedIcon {opacity: 1; }

	/* Font-size responsive */
	@media (max-width:75rem) and (min-width:62.01rem) {
		.bPerformance .iNamedIcon__label {font-size: 1.35vw; }
	}

	/* No margin, 3.5 items shown */
	@media (max-width:62rem) {
		.bPerformance {--espacementH: 1em; --nbItems: 3.7;}
		.bPerformance__layout {grid-template-columns: 100%;gap: 2em;}
		.bPerformance__layout > * {grid-column: 1 / -1; }
		.bPerformance__cVisuals {margin-top: -1em; }

		.bPerformance__list {white-space: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--width-std-right)) 0 calc(-1 * var(--width-std-left)); padding: 1em var(--width-std-right) 1em var(--width-std-left); }
		.bPerformance__list > * {flex: 0 0 auto; width: calc(100vw / var(--nbItems));}
	}

	/* 2.5 items */
	@media (max-width:46rem) {
		.bPerformance {--nbItems: 2.65;}
		.bPerformance .iNamedIcon__label {font-size: 4vw; }
	}



/*
BLOCK / Représentants
Liste de représentants divisé par régions, chaque région est un accordéon.. */
.bRepresentants {--gridSpacingY: 2.5vw;--gridSpacingX: 1vw;--width:calc(11em + 7vw);}
.bRepresentants__layout {display: grid;grid-template-columns: 24% 1fr;gap: 1.5em;}
.bRepresentants__cHeader {grid-column: 1 / -1; width: min(50em, 100%); }
.bRepresentants__cCtn {grid-column: 1 / -1; width: min(50em, 100%); }
.bRepresentants__cAccordions {grid-column: 2 / 3; margin-top: 3em; }

.bRepresentants__header { }
.bRepresentants__ctn { }
.bRepresentants__accordions { }
.bRepresentants__items {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--width), 100%), 1fr)); gap: var(--gridSpacingY) var(--gridSpacingX);}

	/* Big screens */
	@media (min-width:125rem) {
		.bRepresentants {--gridSpacingY: 3.125em; --gridSpacingX: 1.25em; }
	}

	/* 2 cols */
	@media (max-width:62rem) {
		.bRepresentants {--gridSpacingY: 4vw;--gridSpacingX: 1vw;--width:18em; }
		.bRepresentants__layout {grid-template-columns: 100%; }
		.bRepresentants__layout > * {grid-column: 1 / -2; }
		.bRepresentants__cAccordions {margin-top: 1em; }
	}

	/* 2 cols */
	@media (max-width:46rem) {
		.bRepresentants {--gridSpacingY: 2em; }
	}



/*
BLOCK / Data table
Bloc avec header, paragraphe et une table de données. */
.bDataTable { }
.bDataTable__layout {display: flex; flex-direction: column; gap: 1.5em; }
.bDataTable__cHeader { }
.bDataTable__cCtn { }
.bDataTable__cTable {margin-top: 2em; }

.bDataTable__header { }
.bDataTable__ctn { }
.bDataTable__table { }

.tableData {width: 100%;border-collapse: collapse;table-layout: fixed;}
.tableData thead {position: sticky; top:var(--topbar-height-scrolled); }
.tableData th {padding: 1em 0.8em;text-align: center;vertical-align: top;line-height: 1.1; background: var(--color-white);color: var(--color-orange);font-size: 1.2em;font-weight: 700;text-transform: uppercase; }
.tableData td {padding: 1em 0.8em;text-align: center;vertical-align: middle;line-height: 1.1; font-size: 1.1em;}

.tableData__row {border-bottom: 1px solid var(--color-gray);}
.tableData__row--accent {border-bottom:2px solid var(--color-orange);}

	/* Overflow table */
	@media (max-width:62rem) {
		.bDataTable__cTable {margin:1em calc(-1 * var(--width-std-right)) 0 calc(-1 * var(--width-std-left)); }
		.bDataTable .bDataTable__table {white-space: nowrap; overflow-x: auto; padding-left: var(--width-std-left); padding-right: var(--width-std-right); }
		.tableData {min-width: 70em;white-space:normal;}
	}

	/* Sizes */
	@media (max-width:46rem) {
		.bDataTable__cTable {margin-top: 0; }
		.tableData {min-width: 60em; }
		.tableData th {padding: 0.8em 0.5em; font-size: 1.1em;}
		.tableData td {padding: 0.8em 0.5em; font-size: 1em;}
	}



/*
BLOCK / Header Ctn Bullets
Titre, contenu et grosse liste à droite. Utile
 pour la section des valeurs dans la page d'entreprise. */
.bHCBullets { }
.bHCBullets.bMain.bMain--textured {padding-top: var(--base-spacing-top); }
.bHCBullets__layout {display: grid; grid-template-columns: 1fr 40%; gap: calc(0.25 * var(--base-spacing)) 10%; }
.bHCBullets__cHeader {grid-column: 1 / 3; }
.bHCBullets__cCtn {grid-column: 1 / 2; }
.bHCBullets__cBullets {grid-column: 2 / 3; margin-top: -0.5em; }

.bHCBullets__header { }
.bHCBullets__ctn { }
.bHCBullets__bullets { }

	/*
	ANIMATE
	Slide up the bullets */
	.bHCBullets.jsAnimateClass .navSquareLAL li {opacity: 0; filter: blur(0.5em); transform: translateY(1em); transition: opacity 1s, filter 1s, transform 1s; transition-delay: calc(var(--delay, 0s) + 0s); }
	.bHCBullets.jsAnimateClass.animate .navSquareLAL li {opacity: 1; filter: none; transform: none; }

	/* Stacked */
	@media (max-width:62rem) {
		.bHCBullets__layout {grid-template-columns: 100%; gap: calc(0.5 * var(--base-spacing)); }
		.bHCBullets__layout > * {grid-column: 1 / 2; }
		.bHCBullets__cBullets {margin-top: calc(0.25 * var(--base-spacing)); }
	}



/*
BLOCK / Pinned scroll
Bloc fullscreen pinned sur desktop.
Nav + liste de slides avec contenu et image.
Sur mobile : stacked, sans pin. */
.bPinnedScroll {overflow: hidden; }
.bPinnedScroll__layout {height: 100vh;display: grid;grid-template-columns: 50% 1fr;grid-template-rows: auto 1fr;}
.bPinnedScroll__cNav {grid-column: 1 / 2;grid-row: 1 / 2;z-index: 1;padding: 4em 2em 0 2em;}
.bPinnedScroll__cList {grid-column: 1 / 3; grid-row: 1 / 3; }

.bPinnedScroll__slides {height: 100%;display: grid;grid-template-columns: 100%;grid-template-rows: auto;}
.bPinnedScroll__slides > * {grid-column: 1 / 2; grid-row: 1 / 2; }

.iPinnedScrollSlide {overflow: hidden; }
.iPinnedScrollSlide__layout {display: flex;height: 100%; }
.iPinnedScrollSlide__cImg {flex:1 1 auto;width: 100%;order: 2; overflow: hidden; }
.iPinnedScrollSlide__cCtn {flex:0 0 auto;width: 50%;display: flex;flex-direction: column; justify-content: center;align-items: center; }
.iPinnedScrollSlide__img {height: 100%; }
.iPinnedScrollSlide__img * {width: 100%; height: 100%; object-fit: cover; }
.iPinnedScrollSlide__ctn {text-align: center;width: min(80%, 40em); }
.iPinnedScrollSlide__title {display: none; }

/* Override le padding de bMain. */
.iPinnedScrollSlide.bMain.bMain--dark {padding: 0; }

	/* 
	ACTIVE */
	.iPinnedScrollSlide {pointer-events: none; }
	.iPinnedScrollSlide.active {pointer-events: auto; }
	
	.iPinnedScrollSlide .iPinnedScrollSlide__img {opacity: 0; filter: blur(0.5em); transform: scale(1.05); transition: opacity 0.5s, filter 0.5s, transform 0.5s; }
	.iPinnedScrollSlide.active .iPinnedScrollSlide__img {opacity: 1; filter: none; transform: none; }

	.iPinnedScrollSlide .iPinnedScrollSlide__cCtn {opacity: 0; transition: opacity 0.5s; }
	.iPinnedScrollSlide.active .iPinnedScrollSlide__cCtn {opacity: 1; }

	/* Stacked */
	@media (max-width: 62rem) {
		.bPinnedScroll__layout {height: auto;display: block; }
		.bPinnedScroll__cNav {display: none; }

		.bPinnedScroll__slides {height: auto; display: block; }

		.iPinnedScrollSlide {pointer-events: auto; opacity: 1; }
		.iPinnedScrollSlide__layout {height: auto; display: flex;flex-direction: column; }
		.iPinnedScrollSlide__cImg {order: 0; }
		.iPinnedScrollSlide .iPinnedScrollSlide__img,
		.iPinnedScrollSlide.active .iPinnedScrollSlide__img {opacity: 1; filter: none; transform: none; }
		.iPinnedScrollSlide .iPinnedScrollSlide__cCtn,
		.iPinnedScrollSlide.active .iPinnedScrollSlide__cCtn {width: 100%; opacity: 1; }
		.iPinnedScrollSlide__ctn {padding: var(--base-spacing) var(--width-std);width: 100%; }
		.iPinnedScrollSlide__title {display: block; }
	}



/*
BLOCK / Title
Description. */