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

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

	/*
	ALT :
	No double padding.
	Si 2 blocks avec cette classe se chevauchent, ne pas mettre
	d'espacement entre ces 2 blocs. */

	/* Same color or nothing */
	.bMain--noDP + .bMain--noDP {padding-top: 0; }

	/* Color + no color */
	.bMain--noDP.onBlack + .bMain--noDP:not(.onBlue):not(.onBlack),
	.bMain--noDP.onBlue + .bMain--noDP:not(.onBlue):not(.onBlack),

	/* No color + color */
	.bMain--noDP:not(.onBlue):not(.onBlack) + .bMain--noDP.onBlack,
	.bMain--noDP:not(.onBlue):not(.onBlack) + .bMain--noDP.onBlue,

	/* Color + color when they are not the same */
	.bMain--noDP.onBlue + .bMain--noDP.onBlack,
	.bMain--noDP.onBlack + .bMain--noDP.onBlue

	 {padding-top: var(--base-spacing-top) !important;}

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

	/* 
	ALT :
	Moins d'espacement. */
	.bMain--lessTP {padding-top: calc(0.5 * var(--base-spacing-top)); }
	.bMain--lessBP {padding-bottom: calc(0.5 * var(--base-spacing-bottom)); }

	/* 
	ANIMATE */
	@media (min-width:62.01rem) {
		.js .jsAnimateClass.animateGeneric > * {opacity: 0; transform: translateY(1rem); transition: opacity 0.5s, transform 0.5s; }
		.js .jsAnimateClass.animateGeneric.animate > * {opacity: 1; transform: none; }
	}



/*
BLOCK / Gap a gauche dans certaines pages.
On doit appliquer la classe a chaque section.
::before = BG bleu
::after = ligne blanche. */
@media (min-width:62.01rem) {
	.bLeftGap {--leftGap: var(--width-wide); margin-left: var(--leftGap); position: relative;}
	.bLeftGap::before {position:absolute;z-index:1;display:block;content:'';top:-1px;bottom:0;left: calc(-1 * var(--leftGap));width: var(--leftGap);background-color: var(--color-blue);}
	.bLeftGap::after {position:absolute;z-index:2;display:block;content:'';top:-1px;bottom:0;left: -1px;width: 1px;background-color: var(--color-white);}

	
	.bLeftGapNoColor::before { background-color: unset !important;}
	.bLeftGapBlack::before { background-color: black !important;}

	.pHPage--overflow + .bLeftGap { }
	.pHPage--overflow + .bLeftGap::before {top: var(--leftGap); }
}



/*
BLOCK / Block accentuer
BG bleu avec espace blanc a gauche. */
.bAccent { }
.bAccent__in {position: relative; }
.bAccent__in::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-blue-light); }


.bAccent__in_black::before {background-color: black !important; }

.bAccent__ctn { }
.bAccent .bGrosTitre {margin-top: -1em; }

	/* Full width */
	@media (max-width:62rem) {
		.bAccent {padding-left: 0; }
		.bAccent .bAccent__ctn {padding-left: var(--width-std-left); padding-right: var(--width-std-right); }
	}

	/* 
	ANIMATE */
	@media (min-width:62.01rem) {
		.js .jsAnimateClass .bAccent__in::before {transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
		.js .jsAnimateClass.animate .bAccent__in::before {transform: none; }

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



/*
BLOCK / Layout cols
Differentes options de layout pour le texte. */
.c2 {--espacement: 1.5002em; display: flex; margin: calc(-1 * var(--espacement)); }
.c2__col {display: block;flex: 0 0 auto; width: 50%; padding: var(--espacement); }

.c3 {--espacement: 1.5002em; display: flex; margin: calc(-1 * var(--espacement)); }
.c3__col {display: block;flex: 0 0 auto;width: 33.33%; padding: var(--espacement);}

	/* Break cols */
	@media (max-width:46rem) {
		.c2 {flex-wrap: wrap; }
		.c2__col {width: 100%; }

		.c3 {flex-wrap: wrap; }
		.c3__col {width: 100%; }
	}



/*
BLOCK / Boxes list
Boxes 3 cols per row qui deviennent une par-dessus l'autre sur mobile.
Optionnel : Contenu en haut de la liste. */
.bBoxesList {--espacementV: 2.5vw; --espacementH: 2vw; --largeurBox: 33.33%; }
.bBoxesList__top { }
.bBoxesList__top + * {margin-top: calc(0.5 * var(--base-spacing)); }
.bBoxesList__head { }
.bBoxesList__filter {margin: calc(0.5 * var(--base-spacing)) 0; }
.bBoxesList__ctn { }
.bBoxesList__list {position: relative; }
.bBoxesList__items {display: flex;flex-wrap: wrap;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bBoxesList__items .iBox {flex: 0 0 auto;width: var(--largeurBox); padding: var(--espacementV) var(--espacementH); }
.bBoxesList__nav {margin-top: var(--base-spacing); }

	/* Huge screens */
	@media (min-width:93.01rem) {
		.bBoxesList {--espacementV:2.5em; --espacementH: 2em; }
	}
	
	/* 2 cols */
	@media (max-width:62rem) {
		.bBoxesList {--largeurBox: 50%; }
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bBoxesList {--espacementV: 5.002vw; --espacementH: var(--width-std-left); --largeurBox: 100%;}
		.bBoxesList__items {display: block; }
	}



/*
BLOCK / Simple content with image
Content at right.
Image at left. */
.bSimpleContentImage { }
.bSimpleContentImage__layout {display: flex; align-items: flex-start; }
.bSimpleContentImage__cImg {flex:0 0 auto;width: 46%;margin-right: 8%;}
.bSimpleContentImage__cCtn {width: 100%;flex:1 1 auto;align-self: center;}
.bSimpleContentImage__img { }
.bSimpleContentImage__imgClip { }

	/*
	ALT:
	Inverse.
	Images at right, content at left */
	.bSimpleContentImage--inverse { }
	.bSimpleContentImage--inverse .bSimpleContentImage__cImg {margin-left: 8%; margin-right: 0; }
	.bSimpleContentImage--inverse .bSimpleContentImage__cCtn {order:-1; }

	/* 
	ANIMATE */
	@media (min-width:62.01rem) {
		.js .jsAnimateClass .bSimpleContentImage__imgClip {clip-path: inset(0% 100% 0% 0%); transition: clip-path 0.5s; }
		.js .jsAnimateClass.animate .bSimpleContentImage__imgClip {clip-path: inset(0% 0% 0% 0%); }

			/* Invert */
			.js .jsAnimateClass.bSimpleContentImage--inverse .bSimpleContentImage__imgClip {clip-path: inset(0% 0% 0% 100%); }
			.js .jsAnimateClass.bSimpleContentImage--inverse.animate .bSimpleContentImage__imgClip {clip-path: inset(0% 0% 0% 0%); }

		.js .jsAnimateClass .bSimpleContentImage__cCtn {opacity: 0; transform: translateY(1rem); transition: opacity 0.5s, transform 0.5s; transition-delay: 0.2s; }
		.js .jsAnimateClass.animate .bSimpleContentImage__cCtn {opacity: 1; transform: none; }
	}

	/* Break cols */
	@media (max-width:62rem) {
		.bSimpleContentImage__layout {flex-direction: column;}
		.bSimpleContentImage__cImg,
		.bSimpleContentImage--inverse .bSimpleContentImage__cImg {width: auto;margin-left: 0;margin-right: 0;}
		.bSimpleContentImage__cCtn {margin-top: calc(0.5 * var(--base-spacing));}

		.bSimpleContentImage--inverse .bSimpleContentImage__cCtn {margin-top: 0; margin-bottom: calc(0.5 * var(--base-spacing));}
	}



/*
BLOCK / Carousel images
Images in a slider. */
.bSliderImages {--espacementV: 1.5em;--espacementH: 1.5em;--largeurBox: 50%;}
.bSliderImages__list {position: relative;margin-left: calc(-1 * var(--width-std-left));}
.bSliderImages__items {display: flex;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));padding-right: 8%;}
.bSliderImages__items .iCarouselImage {flex: 0 0 auto;width: var(--largeurBox);padding: var(--espacementV) var(--espacementH);}

/* Carousel. */
.bSliderImages .jsCarouselStd { }

	/* Arrows */
	.bSliderImages__nav {position: absolute;z-index: 2;top: 50%;right: 0;transform: translateY(-50%);margin-top: 0;}

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

	/* 4k */
	@media (min-width:93.01rem) {
		.bSliderImages__items {padding-right: 7em; }
	}

	/* Images over arrows */
	@media (max-width:62rem) {
		.bSliderImages {--espacementV: 2.5vw; --espacementH: 2.5vw; --largeurBox: 70%;}
		.bSliderImages__list {margin-right: calc(-1 * var(--width-std-right)); overflow: hidden; }
		.bSliderImages__items {padding: 0; }
		.bSliderImages__nav {position: static;top: auto;transform: none;margin: calc(0.25 * var(--base-spacing)) 0 0 0;display: flex;justify-content: center;}
	}



/*
BLOCK / Project collaborators
Collaborators in a slider 4 cols. */
.bProjectCollaborators {--espacementV: 1.5vw;--espacementH: 1.5vw;--nbItems: 4;background-color: var(--color-blue); }
.bProjectCollaborators__list {position: relative;}
.bProjectCollaborators__items {display: flex;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));padding-right: 8%;}
.bProjectCollaborators__items .iMemberBox {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }

/* Carousel. */
.bProjectCollaborators .jsCarouselStd { }

	/* Arrows */
	.bProjectCollaborators__nav {position: absolute;z-index: 2;top: 50%;right: 0;transform: translateY(-50%);margin-top: 0;}

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

	/* 100% height slides */
	.flickity-resize.bProjectCollaborators__items .iMemberBox {min-height: 100%;display: flex;}
	.flickity-resize.bProjectCollaborators__items .iMemberBox__layout {height: auto;}

	/* 4k */
	@media (min-width:93.01rem) {
		.bProjectCollaborators {--espacementV: 1.48em;--espacementH: 1.48em; }
		.bProjectCollaborators__items {padding-right: 6em; }
	}

	/* 3 cols */
	@media (max-width:75rem) {
		.bProjectCollaborators {--nbItems: 3; }
		.bProjectCollaborators .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+4) {display: none; }
	}

	/* 2 cols + images over arrows */
	@media (max-width:62rem) {
		.bProjectCollaborators {--espacementV: 4vw; --espacementH: 4vw; --nbItems:2; }
		.bProjectCollaborators .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+3) {display: none; }
		.bProjectCollaborators__items {padding: 0; }
		.bProjectCollaborators__nav {position: static;top: auto;transform: none;margin: calc(0.5 * var(--base-spacing)) 0 0 0;display: flex;justify-content: center;}
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bProjectCollaborators {--espacementV: var(--width-std); --espacementH: var(--width-std); --nbItems:1; }
		.bProjectCollaborators .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none; }
		.bProjectCollaborators__nav {margin: calc(0.25 * var(--base-spacing)) 0 0 0;}
	}



/*
BLOCK / Liste de membres
Liste une par-dessus l'autre avec pagination dans le bas. */
.bMembersList { }
.bMembersList__list { }
.bMembersList__items { }
.bMembersList__nav {margin-top: calc(0.5 * var(--base-spacing)); }



/*
BLOCK / Liste d'articles
Liste une par-dessus l'autre avec pagination dans le bas. */
.bArticlesList {background-color: var(--color-blue); }
.bArticlesList__list { }
.bArticlesList__items { }



/*
BLOCK / Liste de documents
Documents 2 par ligne dans une grille, pagination dans le bas. */
.bDocuments {--gap:1px; --nbItems: 2;}
.bDocuments__list { }
.bDocuments__items {display: flex; flex-wrap: wrap; gap:var(--gap); }
.bDocuments__items > * {flex:0 0 auto; width: calc(100% / var(--nbItems) - calc(var(--gap) * calc(var(--nbItems) - 1))); }
.bDocuments__nav {margin-top: calc(0.5 * var(--base-spacing)); }

	/* 1 col */
	@media (max-width:62rem) {
		.bDocuments {--nbItems: 1; }
	}



/*
BLOCK / Table
Mettre la table dans ce block permettra de gerer l'overflow sur mobile. */
.bTable { }
.bTable__in { }
.bTable__overflow { }

	/* Overflowing table */
	@media (max-width:62rem) {
		.bTable { }
		.bTable__in {overflow: auto; margin-left: calc(-1 * var(--width-std-left)); margin-right: calc(-1 * var(--width-std-right)); padding-left: var(--width-std-left); padding-right: var(--width-std-right); margin-bottom: calc(-0.5 * var(--base-spacing-bottom)); padding-bottom: calc(0.5 * var(--base-spacing-bottom)); }
		.bTable__overflow {min-width: 60em; }
	}



/*
BLOCK / Gros titre
Gros titre avec JS pour qu'il soit defilant. */
.bGrosTitre { }
.bGrosTitre__list {overflow: hidden;display: flex;}
.bGrosTitre__items {display: flex; }
.bGrosTitre__items > * {flex:0 0 auto;padding-right: 0.5em;}

	/* Spacing */
	@media (max-width:46rem) {
		.bGrosTitre + * {margin-top: calc(0.25 * var(--base-spacing-bottom));}
	}



/*
BLOCK / Benefits
Benefits 3 per cols. */
.bBenefits {--espacementV: 4vw;--espacementH: 4vw;--nbItems: 3; }
.bBenefits__list {position: relative;}
.bBenefits__items {display: flex; flex-wrap: wrap; /* Causing horizontal scroll margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); */}
.bBenefits__items .iBenefit {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bAccent__ctn + .bBenefits {padding-top: calc(0.75 * var(--base-spacing-top)); }

	/* 4k */
	@media (min-width:93.01rem) {
		.bBenefits {--espacementV: 4em;--espacementH: 4em; }
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bBenefits {--espacementV: 7vw;--espacementH: 0px;--nbItems:1;}
	}



/*
BLOCK / Banner image
Banner with background image and content over the image. */
.bBannerImg {background: var(--color-bg-dark); }
.bBannerImg__in {display: grid; align-items: center; justify-items: center; }
.bBannerImg__in > * {grid-column: 1 / -1; grid-row: 1 / -1; }
.bBannerImg__ctn {position: relative;z-index: 2;text-align: center;max-width: 50em;box-sizing: content-box;padding: 7% 9%;}
.bBannerImg__bg {overflow: hidden;width: 100%;height: 100%;}
.bBannerImg__bg * {height: 100%; object-fit: cover;}
.bBannerImg__bgParallax {margin-top: -6%;margin-bottom: -6%;height: 125%;}

	/* Spacing */
	@media (max-width:46rem) {
		.bBannerImg__ctn {padding: 15% 10%; }
	}

	/* 
	ANIMATE */
	@media (min-width:62.01rem) {
		.js .jsAnimateClass .bBannerImg__bg {opacity: 0; transition: opacity 1s; }
		.js .jsAnimateClass.animate .bBannerImg__bg {opacity: 1; }

		.js .jsAnimateClass .bBannerImg__ctn > * {opacity: 0; transform: translateY(1rem); transition: opacity 0.5s, transform 0.5s; transition-delay: 0.2s; }
		.js .jsAnimateClass.animate .bBannerImg__ctn > * {opacity: 1; transform: none; }
	}



/*
BLOCK / Testimonial
Grosse banner avec BG bleu et testimonial, nom et fonction. */
.bTestimonial {background: var(--color-blue-light); }
.bTestimonial__ctn {text-align: center; }
.bTestimonial__text {font-size: 1.9em; line-height: 1.25; }
.bTestimonial__person {font-weight: 500; line-height: 1.4; }
.bTestimonial__name {display: block; text-transform: uppercase; }

	/* Smaller */
	@media (max-width:62rem) {
		.bTestimonial__text {font-size: 1.6em; }
	}

	/* Smaller */
	@media (max-width:46rem) {
		.bTestimonial__text {font-size: 1.3em; }
	}



/*
BLOCK / Title
Description. */