/* .............................................................................
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: 0; }

	/*
	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 :
	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:-1; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-black);}
	.bMain.bMain--dark + .bMain {padding-top: var(--base-spacing-top); margin-top: -1px; }
	.bMain.bMain--dark + .bMain--dark {padding-top: 0; }

	/* Bordures rondes */
	.bMain.bMain--dark:not(.bMain--dark + .bMain--dark)::before {border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
	.bMain.bMain--dark:not(:has(+ .bMain--dark))::before {border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); }



/*
BLOCK / Produits list
Boxes 3 cols per row en carousel. */
.bProduitsList {--espacementV: 0px;--espacementH: 1vw;--nbItems: 3;overflow: hidden; padding-left: var(--overflow-left);padding-right: var(--overflow-right);}
.bProduitsList__header { }
.bProduitsList__list {position: relative; margin-left: calc(0.8 * var(--width-std)); margin-right: calc(0.8 * var(--width-std)); }
.bProduitsList__items {display: flex;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bProduitsList__footer {text-align: center; margin-top: calc(0.5 * var(--base-spacing)); }
.bProduitsList__items .iSlideProduit {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }

/* Carousel */
.bProduitsList .jsCarouselStd { }
.bProduitsList .jsCarouselStd .flickity-viewport {overflow: visible; }

	/* Arrows position */
	.bProduitsList__nav {height: 0;}
	.bProduitsList__nav .navArrows__item--left,
	.bProduitsList__nav .navArrows__item--right {display: block;position: absolute;z-index: 3;top: 45%;left: calc(var(--espacementH) + 0.1 * var(--width-std));transform: translate(-50%, -50%);}
	.bProduitsList__nav .navArrows__item--right {left: auto;right: calc(var(--espacementH) + 0.1 * var(--width-std));transform: translate(50%, -50%);}

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

	/* Slide plus petite pour les slides non selected. */
	.bProduitsList .iSlideProduit .iSlideProduit__animScale {transform: scale(0.88); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
	.bProduitsList .iSlideProduit.is-selected .iSlideProduit__animScale {transform: none; }

	/* Les visibles sont uniquement celles affichées + layers (z-index) */
	.bProduitsList .iSlideProduit {opacity: 0; transition: opacity 0.4s;}
	.bProduitsList .iSlideProduit.is-previous {z-index: 1; opacity: 1; }
	.bProduitsList .iSlideProduit.is-selected {z-index: 3; opacity: 1; }
	.bProduitsList .iSlideProduit.is-next {z-index: 2; opacity: 1; }

	/* Pointer events only on the visible slides pour éviter qu'on clique sur une invisible aux extrémités
	Les éléments cliquables sont actifs uniquement après que le module est initialisé (.animate). */
	.bProduitsList .iSlideProduit {pointer-events: none; }
	.bProduitsList.jsAnimateClass.animate .iSlideProduit.is-previous,
	.bProduitsList.jsAnimateClass.animate .iSlideProduit.is-selected,
	.bProduitsList.jsAnimateClass.animate .iSlideProduit.is-next {pointer-events: auto; }

	/* 
	ANIMATE / Appear */
	.bProduitsList.jsAnimateClass { }
	.bProduitsList.jsAnimateClass.animate { }
		
	/* Deactivate Flickity interaction sur les items */
	.bProduitsList.jsAnimateClass .bProduitsList__list {pointer-events: none; }
	.bProduitsList.jsAnimateClass.animate .bProduitsList__list {pointer-events: auto; }

	/* Animate "stacked cards" style */
	.bProduitsList.jsAnimateClass .iSlideProduit .iSlideProduit__layout {filter: brightness(0.15); transform: scale(0.8); transition: filter 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
	.bProduitsList.jsAnimateClass .iSlideProduit.is-previous .iSlideProduit__layout {transform: translateX(70%) scale(0.8); }
	.bProduitsList.jsAnimateClass .iSlideProduit.is-next .iSlideProduit__layout {transform: translateX(-70%) scale(0.8); }
	.bProduitsList.jsAnimateClass.animate .iSlideProduit .iSlideProduit__layout {filter: none; transform: none; }

		/* Only the selected slide is visible, don't transform the previous and next slide others */
		@media (max-width:62rem) {
			.bProduitsList.jsAnimateClass .iSlideProduit .iSlideProduit__layout,
			.bProduitsList.jsAnimateClass .iSlideProduit.is-previous .iSlideProduit__layout,
			.bProduitsList.jsAnimateClass .iSlideProduit.is-next .iSlideProduit__layout {filter: brightness(0.15); transform: scale(0.8); }
			.bProduitsList.jsAnimateClass.animate .iSlideProduit .iSlideProduit__layout {filter: none; transform: none; }
		}

	/* Flèches apparaissent à la fin */
	.bProduitsList.jsAnimateClass .bProduitsList__nav .navArrows__item {opacity: 0; transition: opacity 1s 0.5s; }
	.bProduitsList.jsAnimateClass.animate .bProduitsList__nav .navArrows__item {opacity: 1; }


	/* 1 item */
	@media (max-width:62rem) {
		.bProduitsList {--espacementH: calc(2 * var(--width-std));--nbItems: 1;}
		.bProduitsList__list {margin-left: 0;margin-right: 0;}
		.bProduitsList__items {margin: 0; }
		.bProduitsList__footer {margin-top: calc(0.75 * var(--base-spacing)); }
		
		.bProduitsList__nav .navArrows__item--left,
		.bProduitsList__nav .navArrows__item--right {left: calc(2 * var(--width-std));}
		.bProduitsList__nav .navArrows__item--right {left: auto;right: calc(2 * var(--width-std));}
	}



/*
BLOCK / CL3BR
Content à gauche, 3 boites à droite avec images ou contenu. */
.bCL3BR {padding-right:var(--overflow-right); }
.bCL3BR__layout {display: flex;gap: 4vw;align-items: flex-start;}
.bCL3BR__cCtn {flex: 0 0 auto;width: 33.5%;}
.bCL3BR__cImages {flex: 1 1 auto;width: 100%;display: grid;grid-template-columns: 1fr 41%;grid-template-rows: 1fr auto;gap: 2vw;}
.bCL3BR__cImageMain {grid-row: 1 / -1;grid-column: 1 / 2;}
.bCL3BR__cMentions {grid-row: 1 / 2;grid-column: 2 / 3;}
.bCL3BR__cImageSide {grid-row: 2 / 3;grid-column: 2 / 3;}

.bCL3BR__cImageMain * {height: 100%; }
.bCL3BR__header {margin-top: 2.5vw;}
.bCL3BR__ctn {padding-left: 4.5em;}

/* Carousel d'images */
.bCL3BR__imagesList {height: 100%; }
.bCL3BR__imagesItems {height: 100%; }
.bCL3BR__imagesItems .iRoundedImage {width: 100%; }

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

	/*
	FADE EFFECT
	Dans ce plugin, cet effet est géré en CSS, pas en JS. */
	.bCL3BR__imagesList .jsCarouselStd.flickity-enabled .flickity-slider {transform: none !important;}
	.bCL3BR__imagesList .jsCarouselStd.flickity-enabled .iRoundedImage {transform: none !important;}

	/* Set animations transitions */
	.bCL3BR__imagesList .jsCarouselStd .iRoundedImage {transition: opacity 1.5s, visibility 1.5s;}

	/* .is-selected = slide du centre
	.is-previous = slide de gauche
	.is-next = slide de droite */
	.bCL3BR__imagesList .jsCarouselStd .iRoundedImage:not(.is-selected) {opacity: 0;visibility: hidden; pointer-events: none;}

	/*
	ALT :
	Restrict width of content. */
	.bCL3BR__ctn--restrictWidth {max-width: 28em; }

	/* 
	ANIMATE / Appear */
	.bCL3BR.jsAnimateClass { }
	.bCL3BR.jsAnimateClass.animate { }
	
	/* Opacity change */
	.bCL3BR.jsAnimateClass .bCL3BR__cImageMain {opacity: 0; transform: translateY(2em); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
	.bCL3BR.jsAnimateClass.animate .bCL3BR__cImageMain {opacity: 1; transform: none; }
	.bCL3BR.jsAnimateClass .bCL3BR__cMentions {opacity: 0; transform: translateY(2em); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.15s; }
	.bCL3BR.jsAnimateClass.animate .bCL3BR__cMentions {opacity: 1; transform: none; }
	.bCL3BR.jsAnimateClass .bCL3BR__cImageSide {opacity: 0; transform: translateY(2em); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.3s; }
	.bCL3BR.jsAnimateClass.animate .bCL3BR__cImageSide {opacity: 1; transform: none; }

	/* Stacked text over images */
	@media (max-width: 62rem) {
		.bCL3BR__layout {flex-direction: column; gap: calc(0.75 * var(--base-spacing)); }
		.bCL3BR__cCtn {width: 100%; }
		.bCL3BR__cImages {gap: 3vw; }
		.bCL3BR__header {margin-top: 0; }
		.bCL3BR__ctn {padding-left: 3.6em;}
	}

	/* No left spacing + stacked images */
	@media (max-width: 46rem) {
		.bCL3BR__cImages {display: flex;flex-direction: column;gap: 2vw;}
		.bCL3BR__cImageMain * {height: auto; }
		.bCL3BR__cImageSide {display: none; }
		.bCL3BR__ctn {padding-left: 0; }

		.bCL3BR__imagesList {height: auto; }
		.bCL3BR__imagesItems {height: auto; }
		.bCL3BR__imagesItems .iRoundedImage {width: auto; }
	}

	/* 4k */
	@media (min-width:125rem) {
		.bCL3BR__layout {gap: 5em;}
		.bCL3BR__cCtn {width: 36.5em;}
		.bCL3BR__cImages {gap: 2.5em; }
	}



/*
GROUP / Title content inline
Titre a gauche, contenu accentué à droite. */
.gTCInline {display: flex;gap: 2.5vw;}
.gTCInline + * {margin-top: calc(0.5 * var(--base-spacing)); }
.gTCInline__cTitle {flex:0 0 auto;width: 32.5%;}
.gTCInline__cCtn {flex:1 1 auto; }

.gTCInline__ctn { }

	/* Stacked */
	@media (max-width:62rem) {
		.gTCInline {flex-direction: column; gap: calc(0.5 * var(--base-spacing)); }
		.gTCInline__cTitle {width: 100%; }
	}

	/* 4k */
	@media (min-width:125rem) {
		.gTCInline {gap: 3.125em;}
	}



/*
BLOCK / Slider cards
Big cards overlapping one another in a slider. */
.bMain.bSliderCards {--imageHeight: min(36vw, 70vh); --imageWidth:60%; --overlap:calc(var(--width-std-left) + 34vw); padding-bottom: 0;}
.bMain.bSliderCards::before {bottom: auto;height: calc(0.5 * var(--imageHeight) + calc(0.5 * var(--base-spacing-top)) + 5.3em);}
.bSliderCards__cHead { }
.bSliderCards__cSlider {margin-top: calc(0.5 * var(--base-spacing-top)); }

.bSliderCards__header { }
.bSliderCards__list {position: relative;margin-left: calc(-1 * var(--width-std-left));margin-right: calc(-1 * var(--width-std-right));overflow: hidden;}
.bSliderCards__nav {position: absolute;right: var(--width-std-right);top: var(--imageHeight);transform: translateY(-50%);}
.bSliderCards__items {margin-right: calc(-1 * var(--width-std-right));}

	/* Size */
	@media (max-width:62rem) {
		.bMain.bSliderCards {--imageHeight: clamp(50vw, 60vh, 100vw); --imageWidth:72%; --overlap:calc(var(--width-std-left) + 45vw); }
	}

	/* Nav un peu plus basse, sous image */
	@media (max-width:46rem) {
		.bSliderCards__nav {transform: translateY(1.5vw)}
	}

	/* 4k */
	@media (min-width:125rem) {
		.bMain.bSliderCards {--imageWidth:58%; --overlap:calc(var(--width-std-left) + 25vw); }
	}

	/* Pointer events only on the selected slide pour éviter l'effet hover sur slide en-dessous */
	.bSliderCards .iCard {pointer-events: none; }
	.bSliderCards.jsAnimateClass.animate .iCard.is-selected {pointer-events: auto; }

	/* Texte visible uniquement pour la active slide */
	.bSliderCards .iCard .iCard__ctn {opacity: 0; transition: opacity 0.5s; }
	.bSliderCards .iCard.is-selected .iCard__ctn {opacity: 1; }

	/* Spacings: left pour les squeezer ensemble + espacement a gauche pour la 1ère slide */
	.bSliderCards .iCard {margin-right: calc(-1 * var(--overlap)); }
	.bSliderCards .iCard .iCard__layout {margin-left: var(--width-std-left); }

	/* layers */
	.bSliderCards .iCard {position: relative; z-index: 0; }
	.bSliderCards .iCard.is-previous {z-index: 5; }
	.bSliderCards .iCard.is-selected {z-index: 4; }
	.bSliderCards .iCard.is-next {z-index: 3; }
	.bSliderCards .iCard.is-next2 {z-index: 2; }
	.bSliderCards .iCard.is-next3 {z-index: 1; }

	/* Eloigner vers la gauche pour ne pas les voir */
	.bSliderCards .iCard .iCard__layout {transition: all 0.5s; }
	.bSliderCards .iCard.is-previous2 .iCard__layout {transform: translateX(calc(-1.1 * var(--overlap))); }
	.bSliderCards .iCard.is-previous .iCard__layout {transform: translateX(calc(-1.1 * var(--overlap))); }

	/* IMAGE :
	De plus en plus petite quand on va vers la droite.
	Invisibles si pas dans celles affichées = corrige certains bugs. */
	.bSliderCards .iCard .iCard__img {transform: scale(0.4); opacity: 0; transition: transform 0.5s, opacity 0.5s; }
	.bSliderCards .iCard.is-previous .iCard__img {opacity: 1; transform: none; }
	.bSliderCards .iCard.is-selected .iCard__img {opacity: 1; transform: none; }
	.bSliderCards .iCard.is-next .iCard__img {opacity: 1; transform: scale(0.85); }
	.bSliderCards .iCard.is-next2 .iCard__img {opacity: 1; transform: scale(0.7); }
	.bSliderCards .iCard.is-next3 .iCard__img {opacity: 1; transform: scale(0.55); }

	/* 
	ANIMATE / Appear */
	.bSliderCards.jsAnimateClass { }
	.bSliderCards.jsAnimateClass.animate { }
		
	/* Deactivate Flickity interaction sur les items */
	.bSliderCards.jsAnimateClass .bSliderCards__list {pointer-events: none; }
	.bSliderCards.jsAnimateClass.animate .bSliderCards__list {pointer-events: auto; }

	/* Animate "stacked cards" style */
	.bSliderCards.jsAnimateClass .iCard .iCard__animate {filter: brightness(0.35); transform-origin: 0% 50%; transition: filter 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
	.bSliderCards.jsAnimateClass .iCard.is-selected .iCard__animate {transform: scale(0.9); }
	.bSliderCards.jsAnimateClass .iCard.is-next .iCard__animate {transform: translateX(-25%) scale(0.9); }
	.bSliderCards.jsAnimateClass .iCard.is-next2 .iCard__animate {transform: translateX(-50%) scale(0.9); }
	.bSliderCards.jsAnimateClass .iCard.is-next3 .iCard__animate {transform: translateX(-75%) scale(0.9); }
	.bSliderCards.jsAnimateClass.animate .iCard .iCard__animate {filter: none; transform: none; }

	/* Text plus pale */
	.bSliderCards.jsAnimateClass .iCard .iCard__ctn > * {opacity: 0; transition: opacity 1s 0.3s; }
	.bSliderCards.jsAnimateClass.animate .iCard .iCard__ctn > * {opacity: 1; }

	/* Flèches apparaissent à la fin */
	.bSliderCards.jsAnimateClass .bSliderCards__nav .navArrows__item {opacity: 0; transition: opacity 1s 0.5s; }
	.bSliderCards.jsAnimateClass.animate .bSliderCards__nav .navArrows__item {opacity: 1; }



/*
BLOCK / Experiences list
Boxes 3 cols et overflow à droite. */
.bExperiences {--espacementV: 0px;--espacementH: 1.25vw;--nbItems: 3;--imageHeight: 28vw;overflow: hidden;padding-right: calc(1.5 * var(--width-std-right));}
.bExperiences__header { }
.bExperiences__list {position: relative;}
.bExperiences__items {display: flex;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bExperiences__items .iSlideExp {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bExperiences__scrollbar {margin-top: 1.5em;margin-right: calc(-1.5 * var(--width-std-right));}

/* Carousel */
.bExperiences .jsCarouselStd { }
.bExperiences .jsCarouselStd .flickity-viewport {overflow: visible; }

	/* Arrows position: vertically-centered on the image */
	.bExperiences__nav {height: 0;position: relative;z-index: 2;}
	.bExperiences__nav .navArrows__item--left .btnIcon,
	.bExperiences__nav .navArrows__item--right .btnIcon {display: block;position: absolute;z-index: 3;top: calc(0.5 * var(--imageHeight));left: 0;transform: translate(-50%, -50%);}
	.bExperiences__nav .navArrows__item--right .btnIcon {left: auto;right: 0;transform: translate(50%, -50%);}

	/* After init, changer pour block sinon le layout bug vu que c'était flex. */
	.bExperiences .jsCarouselStd.flickity-enabled {display: block; }

	/* 
	ANIMATE / Appear */
	.bExperiences.jsAnimateClass { }
	.bExperiences.jsAnimateClass.animate { }
		
	/* Deactivate Flickity interaction sur les items */
	.bExperiences.jsAnimateClass .bExperiences__list {pointer-events: none; }
	.bExperiences.jsAnimateClass.animate .bExperiences__list {pointer-events: auto; }

	/* Les items sont décallé à gauche */
	.bExperiences.jsAnimateClass .bExperiences__items {transform: translateX(-15%); transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); }
	.bExperiences.jsAnimateClass.animate .bExperiences__items {transform: none; }

		/* PAS sur mobile */
		@media (max-width:62rem) {
			.bExperiences.jsAnimateClass .bExperiences__items {transform: none; }
		}

	/* Image faded */
	.bExperiences.jsAnimateClass .iSlideExp__img {opacity: 0.1; transform: scale(0.9); transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);}
	.bExperiences.jsAnimateClass.animate .iSlideExp__img {opacity: 1; transform: none; }

	/* Text faded */
	.bExperiences.jsAnimateClass .iSlideExp__name {opacity: 0; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);}
	.bExperiences.jsAnimateClass.animate .iSlideExp__name {opacity: 1; }
	.bExperiences.jsAnimateClass .iSlideExp__desc {opacity: 0; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);}
	.bExperiences.jsAnimateClass.animate .iSlideExp__desc {opacity: 1; }

	/* Progress bar from left to right */
	.bExperiences.jsAnimateClass .bExperiences__scrollbar .progressBar {transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0s; }
	.bExperiences.jsAnimateClass.animate .bExperiences__scrollbar .progressBar {transform: scaleX(1); }

	/* Flèches apparaissent à la fin */
	.bExperiences.jsAnimateClass .bExperiences__nav .navArrows__item {opacity: 0; transition: opacity 1s; transition-delay: 0.5s; }
	.bExperiences.jsAnimateClass.animate .bExperiences__nav .navArrows__item {opacity: 1; }


	/* 2 items */
	@media (max-width:62rem) {
		.bExperiences {--espacementH: 2vw;--nbItems: 2;--imageHeight: 40vw;padding-right: var(--width-std-right);}
		.bExperiences__list {margin-right: var(--width-std-right);}
		.bExperiences__scrollbar {margin-right: calc(-2 * var(--width-std-right));}
	}

	/* 1 item */
	@media (max-width:46rem) {
		.bExperiences {--espacementH: 3.5vw;--nbItems: 1;--imageHeight: 80vw; }
	}

	/* 4k */
	@media (min-width:125rem) {
		.bExperiences {--espacementH: 1.5625em;--imageHeight: 35rem; padding-right: var(--width-std-right);}
		.bExperiences__scrollbar {margin-right: calc(-1 * var(--width-std-right));}
	}



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



/*
BLOCK / Title
Description. */