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

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

/* Fix ligne blanche visible des fois entre 2 sections bleus. */
.bMain + .bMain {margin-top: -1px;} 

	/*
	ALT :
	No double padding.
	Si 2 blocks avec cette classe se chevauchent, ne pas mettre
	d'espacement entre ces 2 blocs. */
	.bMain--noDP + .bMain--noDP {padding-top: 0; }

	/*
	ALT :
	Forcer zero padding top ou bottom. */
	.bMain--noTP {padding-top: 0; }
	.bMain--noBP {padding-bottom: 0; }

	/*
	ALT :
	Colors. */
	.bMain--lightGrey {background-color: var(--color-light-grey);}
	.bMain--black {background-color: var(--color-black);}



/*
BLOCK / Avec spotlights
Les spotllights vont en-dessous du contenu. */
.bSpotlight {position: relative;background-color: var(--color-black);overflow: hidden;}
.bSpotlight__section {position: relative;z-index: 2;}
.bSpotlight__spotlight {position: absolute;z-index: 0;left: 0;right: 0;background: var(--color-black);}

	/*
	ALT :
	Centré dans la section.
	Utile si 1 seule section. */
	.bSpotlight__spotlight--centered {top: 50%; }

	/*
	ALT :
	Fine-tune pour banner. */
	.bSpotlight__spotlight--banner {top: -20%;}

	/*
	ALT :
	Fine-tune pour banner text. */
	.bSpotlight__spotlight--bannerText {margin-top: 55vw;}

	/*
	ALT :
	Equipe.
	Fine-tune le positionnememnt pour la section equipe. */
	.bSpotlight__spotlight--equipe .iSpotlight:first-child {margin-top: 55vw;}
	.bSpotlight__spotlight--equipe .iSpotlight {margin-bottom: -60vw;}

		/* Ajuster position */
		@media (max-width:46rem) {
			.bSpotlight__spotlight--equipe .iSpotlight:first-child {margin-top: 120vw;}
			.bSpotlight__spotlight--equipe .iSpotlight {margin-bottom: -40vw;}
		}



/*
BLOCK / Poursuivez votre croissance
Contenu à gauche, image à droite. */
.bCroissance { }
.bCroissance__layout {display: flex;align-items: flex-start;}
.bCroissance__cCtn {flex:0 0 auto;width: 37%;align-self: center;}
.bCroissance__cBG {flex:1 1 auto;margin-left: 5%;margin-right: var(--overflow-std-right);}

.bCroissance__ctn { }

	/* 
	ANIMATE */
	.js .bCroissance.jsAnimateClass .bCroissance__cBG {opacity: 0; transition: opacity 1s; transition-delay: 0s; }
	.js .bCroissance.jsAnimateClass.animate .bCroissance__cBG {opacity: 1; }

	.js .bCroissance.jsAnimateClass .bCroissance__ctn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0.3s; }
	.js .bCroissance.jsAnimateClass.animate .bCroissance__ctn {opacity: 1; transform: none; }

	/* Stacked */
	@media (max-width:62rem) {
		.bCroissance__layout {display: block; }
		.bCroissance__cCtn {width: 100%; }
		.bCroissance__cBG {margin-top: calc(0.5 * var(--base-spacing)); margin-left: 0; }

		.js .bCroissance.jsAnimateClass .bCroissance__cBG {transition-delay: 0.3s; }
		.js .bCroissance.jsAnimateClass .bCroissance__ctn {transition-delay: 0s; }
	}



/*
BLOCK / Avantages
Tabs a gauche se transforment en accordions sur mobile. */
.bAvantages { }
.bAvantages__header { }
.bAvantages__layout {display: flex; }
.bAvantages__cNav {flex:0 0 auto;width: 19%;min-width: 15em;margin-top: 2em;}
.bAvantages__cSlides {flex:1 1 auto;margin-left: 6%;}

.bAvantages__nav { }
.bAvantages__slides {display: grid; }
.bAvantages__slides > * {grid-row: 1 / -1; grid-column: 1 / -1; }

	/* 
	ANIMATE */
	.js .bAvantages.jsAnimateClass .bAvantages__header {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .bAvantages.jsAnimateClass.animate .bAvantages__header {opacity: 1; transform: none; }
	
	.js .bAvantages.jsAnimateClass .bAvantages__cSlides {opacity: 0; transition: opacity 1s; transition-delay: 0.3s; }
	.js .bAvantages.jsAnimateClass.animate .bAvantages__cSlides {opacity: 1; }
	
	.js .bAvantages.jsAnimateClass .bAvantages__cNav {opacity: 0; transition: opacity 1s; transition-delay: 0.6s; }
	.js .bAvantages.jsAnimateClass.animate .bAvantages__cNav {opacity: 1; }

	/* 
	STATE / On
	Tab ouverte sur desktop, une seule peut être ouverte à la fois. */
	@media (min-width:62.01rem) {
		.bAvantages__slides > * {pointer-events: none; }
		.bAvantages__slides > *.on {pointer-events: auto; }
		
		.bAvantages__slides .iSlideAvantage__ctn > figure {opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
		.bAvantages__slides > *.on .iSlideAvantage__ctn > figure {opacity: 1; visibility: visible; transition-delay: 0s; }
		
		.bAvantages__slides .iSlideAvantage__ctn > * {opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
		.bAvantages__slides > *.on .iSlideAvantage__ctn > * {opacity: 1; visibility: visible; transition-delay: 0.15s; }
	}

	/* Remove left nav */
	@media (max-width:62rem) {
		.bAvantages__layout {display: block; }
		.bAvantages__cNav {display: none; }
		.bAvantages__cSlides {margin-left: 0; }

		.bAvantages__slides {display: block; }
	}



/*
BLOCK / ADN
Bloc simple avec texte et video. */
.bADN { }
.bADN__header { }
.bADN__video { }

	/* 
	ANIMATE */
	.js .bADN.jsAnimateClass .bADN__header {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .bADN.jsAnimateClass.animate .bADN__header {opacity: 1; transform: none; }



/*
BLOCK / EDI
Bloc avec video et contenu partiellement visible en dessous. */
.bEDI { }
.bEDI__header { }
.bEDI__video { }
/* .bEDI__teaser {--maskVisiblePourcent: 25;--teaserHeight:14em; margin-top: 2em;} */
/* .bEDI__grid {display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.3s; } */
.bEDI__cell {overflow: hidden;min-height: var(--teaserHeight);-webkit-mask-image: linear-gradient(black 0%, black calc(1% * var(--maskVisiblePourcent)), transparent 100%);mask-image: linear-gradient(black 0%, black calc(1% * var(--maskVisiblePourcent)), transparent 100%);-webkit-mask-size: 100% 100%;mask-size: 100% 100%;-webkit-mask-repeat: no-repeat;mask-repeat: no-repeat;-webkit-mask-position: 0% 0%;mask-position: 0% 0%;transition: -webkit-mask-size 0.5s, mask-size 0.5s;}
.bEDI__ctn { }
.bEDI__more {margin-top: 2em;transition: opacity 0.5s, visibility 0.5s;}

	/* 
	ANIMATE */
	.js .bEDI.jsAnimateClass .bEDI__header {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .bEDI.jsAnimateClass.animate .bEDI__header {opacity: 1; transform: none; }
	
	.js .bEDI.jsAnimateClass .bEDI__teaser {opacity: 0; transition: opacity 1s; transition-delay: 0.9s; }
	.js .bEDI.jsAnimateClass.animate .bEDI__teaser {opacity: 1; }

	/* Spacings */
	@media (max-width:46rem) {
		.bEDI__teaser {--maskVisiblePourcent: 50;--teaserHeight:22em; }
		.bEDI__more {margin-top: 1.5em; }
	}

	/* 
	STATE / On */
	.bEDI__teaser.on { }
	.bEDI__teaser.on .bEDI__grid {grid-template-rows: 1fr; }
	.bEDI__teaser.on .bEDI__cell {-webkit-mask-size: 100% calc(100 / var(--maskVisiblePourcent) * 100%);mask-size: 100% calc(100 / var(--maskVisiblePourcent) * 100%); }
	.bEDI__teaser.on .bEDI__more {opacity: 0;visibility: hidden; }



/*
BLOCK / Developpement durable
Bloc avec video et contenu visible en dessous.
Tres semblable à EDI. */
.bDD { }
.bDD__header { }
.bDD__video { }
.bDD__ctn {margin-top: 2em; }

	/* 
	ANIMATE */
	.js .bDD.jsAnimateClass .bDD__header {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .bDD.jsAnimateClass.animate .bDD__header {opacity: 1; transform: none; }
	
	.js .bDD.jsAnimateClass .bDD__ctn {opacity: 0; transition: opacity 1s; transition-delay: 0.9s; }
	.js .bDD.jsAnimateClass.animate .bDD__ctn {opacity: 1; }



/*
BLOCK / Mission
Bloc avec titre et contenu, mais surtout BG animated (8 lignes). */
.bMission {--line-gap: 2%;}
.bMission__layout {display: grid;grid-template-columns: 1fr;grid-template-rows: auto;align-items: center;justify-content: center;}
.bMission__layout > * {grid-column: 1 / -1;grid-row: 1 / -1; }
.bMission__ctn {text-align: center;position: relative;z-index: 1;margin-top: 4%;}
.bMission__bg {position: relative;z-index: 0;width: 35%;margin: 0 auto;}
.bMission__graph {width: 100%;padding-top: 100%;position: relative; }
.bMission__line {position: absolute; bottom: 0; height: var(--height); left: calc(var(--position) * ((100% - calc(var(--line-gap) * 7)) / 8 + var(--line-gap))); width: calc((100% - calc(var(--line-gap) * 7)) / 8); background: var(--color-blue);}

	/* 
	ANIMATE */
	.js .bMission.jsAnimateClass .bMission__ctn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .bMission.jsAnimateClass.animate .bMission__ctn {opacity: 1; transform: none; }
	
	.js .bMission.jsAnimateClass .bMission__graph .bMission__line {transform: scaleY(0%); transform-origin: 50% 100%; transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: calc(0.3s + 0.075s * var(--position)); }
	.js .bMission.jsAnimateClass.animate .bMission__graph .bMission__line {transform: none; }

	/* Stacked */
	@media (max-width:62rem) {
		.bMission__layout {align-items: start;}
		.bMission__ctn {margin-top: 23vw;}
		.bMission__bg {width: 100%;max-width: 30em;}
	}



/*
BLOCK / Equipe
Titre et liste d'images flottantes + 3 petits textes.
Le positionnement des images "flottantes" est set manuellement. Ce n'est pas 
idéal, mais ça permet un contrôle très précis. De plus, pas besoin de JS! 🥳 */
.bEquipe { }
.bEquipe__layout { }
.bEquipe__cCtn {position: relative; }
.bEquipe__cImages {position: relative;z-index: 1;padding-top: var(--base-spacing-top); }

.bEquipe__ctn {text-align: center; }
.bEquipe__share {position: absolute;z-index: 2;top: 3em;right: 12px;}

.bEquipe__images {display: grid;grid-template-columns: 50% 50%;grid-auto-rows: 7vw;}
.bEquipe__cCell {position: relative; }
.bEquipe__img {/* height: 100%; */box-shadow: 0 1em 4em rgb(0 0 0 / 50%);}
.bEquipe__text { }

	/* Positionnement "grossier" sur la grid */
	.bEquipe__cCell--textTop {z-index: 5;grid-column: 1 / 2;grid-row-start: 2;}
	.bEquipe__cCell--angela {z-index: 1;grid-column: 2 / 3;grid-row-start: 1;}
	.bEquipe__cCell--audrey {z-index: 1;grid-column: 1 / 2;grid-row-start: 4;}
	.bEquipe__cCell--kevin {z-index: 1;grid-column: 2 / 3;grid-row-start: 8;}
	.bEquipe__cCell--corina {z-index: 1;grid-column: 1 / 2;grid-row-start: 12;}
	.bEquipe__cCell--textMid {z-index: 5;grid-column: 2 / 3;grid-row-start: 13;}
	.bEquipe__cCell--marc {z-index: 1;grid-column: 2 / 3;grid-row-start: 14;}
	.bEquipe__cCell--sylvain {z-index: 1;grid-column: 1 / 2;grid-row-start: 17;}
	.bEquipe__cCell--emilie {z-index: 1;grid-column: 2 / 3;grid-row-start: 20;}
	.bEquipe__cCell--textEnd {z-index: 5;grid-column: 2 / 3;grid-row-start: 24;}
	.bEquipe__cCell--frederique {z-index: 2; grid-column: 1 / 2; grid-row-start: 24; }
	.bEquipe__cCell--josue {z-index: 2;grid-column: 2 / 3;grid-row-start: 25;}
	.bEquipe__cCell--benoit {z-index: 1;grid-column: 1 / 2;grid-row-start: 29;}
	.bEquipe__cCell--claudia {z-index: 1;grid-column: 2 / 3;grid-row-start: 30;grid-row-end: 37;}

	/* Ajustement "fine-tune" de chaque image */
	.bEquipe__cCell--textTop > * {max-width: 26em;margin-left: auto;margin-right: -8%;}
	.bEquipe__cCell--angela > * {margin-left: 20%;margin-right: 5%;}
	.bEquipe__cCell--audrey > * {margin-left: 20%;margin-right: 5%;}
	.bEquipe__cCell--kevin > * {margin-left: 8%;margin-right: 17%;}
	.bEquipe__cCell--corina > * {margin-left: 15%;margin-right: 10%;}
	.bEquipe__cCell--textMid > * {margin-left: 15%;}
	.bEquipe__cCell--marc > * {margin-left: 15%;margin-right: calc(-1 * var(--width-std-right));}
	.bEquipe__cCell--sylvain > * {margin-left: 0%;margin-right: 22%;}
	.bEquipe__cCell--emilie > * {margin-left: 15%;margin-right: 3%;}
	.bEquipe__cCell--textEnd > * {max-width: 26em;margin-left: -16%;}
	.bEquipe__cCell--frederique > * {margin-left: 20%;margin-right: -5%;}
	.bEquipe__cCell--josue > * {margin-left: 20%;margin-right: 5%;}
	.bEquipe__cCell--benoit > * {margin-left: 20%;margin-right: 5%;}
	.bEquipe__cCell--claudia > * {margin-left: 10%;margin-right: 15%;}

	/* 
	ANIMATE */
	.js .jsAnimateClass .bEquipe__ctn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .jsAnimateClass.animate .bEquipe__ctn {opacity: 1; transform: none; }

	.js .jsAnimateClass .bEquipe__share {opacity: 0; transition: opacity 1s; transition-delay: 0.25s; }
	.js .jsAnimateClass.animate .bEquipe__share {opacity: 1; }

	.js .jsAnimateClass .bEquipe__cImages {opacity: 0; transition: opacity 1s; transition-delay: 0.5s; }
	.js .jsAnimateClass.animate .bEquipe__cImages {opacity: 1; }

	.js .jsAnimateClass.bEquipe__cCell {opacity: 0.1; transition: opacity 1s; }
	.js .jsAnimateClass.animate.bEquipe__cCell {opacity: 1; }

	.js .jsAnimateClass.bEquipe__cCell--textTop,
	.js .jsAnimateClass.bEquipe__cCell--textMid,
	.js .jsAnimateClass.bEquipe__cCell--textEnd {opacity: 1; transition: none; }

	/* Images pleine largeur */
	@media (min-width:125rem) {
		.bEquipe {--width-std-left:var(--width-std);--width-std-right:var(--width-std); }
	}

	/* Position share */
	@media (max-width:62rem) {
		.bEquipe__share {top: 0;right: 12px;margin-top: 0.5em;}
	}

	/* Spacings */
	@media (max-width:46rem) {
		.bEquipe__cImages {padding-top: calc(2.5 * var(--base-spacing-top));}
		.bEquipe__ctn {margin-left: auto;margin-right: auto;max-width: 20em;}
		.bEquipe__images {grid-auto-rows:8vw; }

		.bEquipe__cCell--textTop {grid-row-start: 1;}
		.bEquipe__cCell--textEnd > * {max-width: 8em;}
	}



/*
BLOCK / Banner text
Texte dans un background foncé. */
.bBannerText {padding-top: calc(1.5 * var(--base-spacing-top));padding-bottom: calc(1.5 * var(--base-spacing-bottom));}
.bBannerText__layout {position: relative; }
.bBannerText__ctn {text-align: center;margin: 0 auto;max-width: 77em;padding: 0 5em;}
.bBannerText__share {position: absolute;z-index: 2;top: 3em;right: 12px;}

	/* 
	ANIMATE */
	.js .bBannerText.jsAnimateClass .bBannerText__ctn {opacity: 0; transform: translateY(1em); transition: opacity 1s, transform 1s; transition-delay: 0s; }
	.js .bBannerText.jsAnimateClass.animate .bBannerText__ctn {opacity: 1; transform: none; }

	.js .bBannerText .bBannerText__share {opacity: 0; transition: opacity 1s; transition-delay: 0.25s; }
	.js .bBannerText.animate .bBannerText__share {opacity: 1; }

	/* Spacing */
	@media (max-width:62rem) {
		.bBannerText {padding-top: calc(1 * var(--base-spacing-top));padding-bottom: calc(1 * var(--base-spacing-bottom) + 3em);}
		.bBannerText__ctn {padding: 0;}
		.bBannerText__share {top: 1em;right: 12px;}
	}



/*
BLOCK / Liste de capsules
Vidéos en haut, carousel de thumbnails en bas. */
.bCapsulesList {background: var(--color-light-grey);padding-bottom: 0;}
.bCapsulesList__slides {display: grid; }
.bCapsulesList__slides > * {grid-row: 1 / -1; grid-column: 1 / -1; }
.bCapsulesList__nav {position: relative; padding-bottom: var(--base-spacing-bottom);text-align: center;overflow: hidden;}
.bCapsulesList__nav::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0;background: var(--color-bg-base); }

	/* 
	ANIMATE */
	.js .bCapsulesList.jsAnimateClass .iCapsule__titre { overflow-wrap: normal !important;opacity: 0; transform: translateY(1rem); transition: opacity 1s, transform 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.5s; }
	.js .bCapsulesList.jsAnimateClass.animate .iCapsule__titre {opacity: 1; transform: none;}

	.js .bCapsulesList.jsAnimateClass .iCapsule__infos {opacity: 0; transition: opacity 1.5s; transition-delay: 0.85s; }
	.js .bCapsulesList.jsAnimateClass.animate .iCapsule__infos {opacity: 1; }

	.js .bCapsulesList.jsAnimateClass .iCapsule__teaser {opacity: 0; transition: opacity 1.5s; transition-delay: 1s; }
	.js .bCapsulesList.jsAnimateClass.animate .iCapsule__teaser {opacity: 1; }

	.js .bCapsulesList.jsAnimateClass .iCapsule__side {opacity: 0; transition: opacity 1.5s; transition-delay: 1.15s; }
	.js .bCapsulesList.jsAnimateClass.animate .iCapsule__side {opacity: 1; }

	.js .bCapsulesList.jsAnimateClass .bCapsulesList__nav::before {transform: scaleY(0); transform-origin: 50% 100%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.5s; }
	.js .bCapsulesList.jsAnimateClass.animate .bCapsulesList__nav::before {transform: none; }

	.js .bCapsulesList.jsAnimateClass .bCapsulesList__nav > * {opacity: 0; visibility: hidden; transition: opacity 1.5s, visibility 1.5s; transition-delay: 1.3s; }
	.js .bCapsulesList.jsAnimateClass.animate .bCapsulesList__nav > * {opacity: 1;visibility: visible; }

	/* 
	STATE / On */
	.bCapsulesList__slides > * {pointer-events: none; }
	.bCapsulesList__slides > *.on {pointer-events: auto; }

	.bCapsulesList__slides .iCapsule__cVideo {opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
	.bCapsulesList__slides > *.on .iCapsule__cVideo {opacity: 1; visibility: visible; transition-duration: 1s; transition-delay: 0s; }

	.bCapsulesList__slides .iCapsule__cTitre {opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity 0.5s, visibility 0.5s, transform 0s 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
	.bCapsulesList__slides > *.on .iCapsule__cTitre {opacity: 1; visibility: visible; transform: none; transition-duration: 1s; transition-delay: 0.15s; }

	.bCapsulesList__slides .iCapsule__cInfos {opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
	.bCapsulesList__slides > *.on .iCapsule__cInfos {opacity: 1; visibility: visible; transition-duration: 1.5s; transition-delay: 0.5s; }

	.bCapsulesList__slides .iCapsule__cDescription {opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
	.bCapsulesList__slides > *.on .iCapsule__cDescription {opacity: 1; visibility: visible; transition-duration: 1.5s; transition-delay: 0.65s; }

	.bCapsulesList__slides .iCapsule__cSide {opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; }
	.bCapsulesList__slides > *.on .iCapsule__cSide {opacity: 1; visibility: visible; transition-duration: 1.5s; transition-delay: 0.8s; }

	/* Touch sides */
	@media (max-width:46rem) {
		.bCapsulesList__nav {padding-left: 0;padding-right: 0;}
	}



/*
BLOCK / Title
Description. */