/* .............................................................................
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 :
	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-black);}
	.bMain.bMain--dark + .bMain {padding-top: var(--base-spacing-top); margin-top: -1px; }
	.bMain.bMain--dark + .bMain--dark {padding-top: 0; }

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

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

	/*
	ALT :
	Curves.
	Mask decoratif de coin, TL = top left, BR = bottom right.
	Confiturable :
	--mask-color : couleur de la section précédente/suivante
	--mask-size : taille du masque
	--mask-position : position du masque (on a du jeu, c'est pour ça que le défaut est -5) */
	.bMain--curveTL,
	.bMain--curveBR {--mask-color:var(--color-white); --mask-position:-5vw; --mask-size:20vw; }
	.bMain--curveTL::after,
	.bMain--curveBR::after { position:absolute; z-index: -1; display:block; content:''; top: -1px; height: var(--mask-size); left: var(--mask-position); width: var(--mask-size); background-color: var(--mask-color);
		mask-image: url("../../img/curve.svg");
		mask-repeat: no-repeat;
		mask-size: var(--mask-size) var(--mask-size);
		mask-mode: alpha;
	}
	.bMain--curveBR::after {top: auto;bottom: -1px;left: auto;right: var(--mask-position);transform: rotate(180deg);}



/*
BLOCK / Services list
Liste de services dans un carousel simple. */
.bServicesList {--espacementV: 0px; --espacementH: 2em; --nbItems: 4; }
.bServicesList__head { }
.bServicesList__list {position: relative; }
.bServicesList__items {display: flex;flex-wrap: nowrap;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bServicesList__items .iService {flex: 0 0 auto;width: calc(100% / var(--nbItems));padding: var(--espacementV) var(--espacementH);}

	/* 
	ANIMATE
	Show icons one at a time */
	.bServicesList.jsAnimateClass .iService__icon {opacity: 0; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0s + var(--delay, 0s)); }
	.bServicesList.jsAnimateClass.animate .iService__icon {opacity: 1; }

/* Carousel */
.bServicesList .jsCarouselStd { }

	/* Arrows position: vertically-centered on the service slide */
	.bServicesList__nav {height: 0;}
	.bServicesList__nav .navArrows__item--left .btnIcon,
	.bServicesList__nav .navArrows__item--right .btnIcon {display: block;position: absolute;z-index: 3;top: 50%;left: calc(-0.5 * var(--width-std));transform: translate(-50%, -50%);}
	.bServicesList__nav .navArrows__item--right .btnIcon {left: auto;right: calc(-0.5 * var(--width-std));transform: translate(50%, -50%);}

	/* Before init */
	.bServicesList .jsCarouselStd.flickity-enabled {display: block;}
	.bServicesList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+5) {display: none;}

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

	/* 2 items */
	@media (max-width:62rem) {
		.bServicesList {--espacementH: calc(0.5 * var(--width-std)); --nbItems: 2;}
		.bServicesList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+3) {display: none;}
	}

	/* 1 item - Colle les bords */
	@media (max-width:46rem) {
		.bServicesList {--espacementH: var(--width-std); --nbItems: 1; }
		.bServicesList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none;}

		.bServicesList__nav {height: auto;position: absolute;top: 5.5em;right: 0;}
		.bServicesList__nav .navArrows {flex-direction: column;}
		.bServicesList__nav .navArrows__item--right {order:-1; }
		.bServicesList__nav .navArrows__item--left .btnIcon,
		.bServicesList__nav .navArrows__item--right .btnIcon {transform: none;position: relative;top: auto;left: auto;right: auto;}

		/* Spacing in the content to make place for the arrows */
		.bServicesList .iService__layout {padding-right: 5em;}
	}



/*
BLOCK / Secteurs list
Liste de secteurs dans un carousel simple.
The height of the slide image is hardcoded to position the arrows exactly centered on it. */
.bSecteursList {--espacementV: 0px; --espacementH: 1em; --nbItems: 4; --imageHeight: 14vw; --imageSpacing:1.5em; }
.bSecteursList__head { }
.bSecteursList__list {position: relative; }
.bSecteursList__items {display: flex;flex-wrap: nowrap;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));}
.bSecteursList__items .iSecteur {flex: 0 0 auto;width: calc(100% / var(--nbItems));padding: var(--espacementV) var(--espacementH);}

	/* 
	ANIMATE
	Show images one at a time */
	.bSecteursList.jsAnimateClass .iSecteur__image {clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-cubic); transition-delay: calc(0s + var(--delay, 0s)); }
	.bSecteursList.jsAnimateClass.animate .iSecteur__image {clip-path: inset(0 0 0 0); }

/* Carousel */
.bSecteursList .jsCarouselStd { }

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

	/* Before init */
	.bSecteursList .jsCarouselStd.flickity-enabled {display: block;}
	.bSecteursList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+5) {display: none;}

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

	/* 2 items */
	@media (max-width:62rem) {
		.bSecteursList {--nbItems: 2;--imageHeight: 26vw;}
		.bSecteursList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+3) {display: none;}
	}

	/* 1 item - Colle les bords
	Arrows under the image, at right */
	@media (max-width:46rem) {
		.bSecteursList {--espacementH: var(--width-std);--nbItems: 1;--imageHeight: 59vw;}
		.bSecteursList .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none;}

		/* Arrows under the image, stacked */
		.bSecteursList__nav {height: auto;position: absolute;top: calc(var(--imageHeight) + var(--imageSpacing));right: 0;}
		.bSecteursList__nav .navArrows {flex-direction: column;}
		.bSecteursList__nav .navArrows__item--right {order:-1; }
		.bSecteursList__nav .navArrows__item--left .btnIcon,
		.bSecteursList__nav .navArrows__item--right .btnIcon {transform: none;position: relative;top: auto;left: auto;right: auto;}

		/* Spacing in the content to make place for the arrows */
		.bSecteursList .iSecteur__ctn {padding-right: 5em;}
	}

	/* 4k */
	@media (min-width:125rem) {
		.bSecteursList {--imageHeight: calc(5vw + 11rem); }
	}



/*
BLOCK / A propos
Image at left, content at right.
Timeline (carousel) at the bottom.
Particularité : curve du haut est dans __topCurve. */
.bAPropos {--mask-position: 0px;--espacementV: 0px;--espacementH: 1em;--nbItems: 3;--yearHeight: 6.5em;--ctnSpacing: 2.3em;}
.bAPropos__topCurve {height: 10vw; --mask-position: -3vw; }
.bAPropos__layout {display: grid;grid-template-columns: 50% 1fr;grid-template-rows: auto auto;gap: calc(0.7 * var(--base-spacing)) var(--width-std);}
.bAPropos__cCtn {grid-column: 2 / 3; grid-row: 1 / 2; }
.bAPropos__cMedia {grid-column: 1 / 2; grid-row: 1 / 2; }
.bAPropos__cTimeline {grid-column: 1 / 3; grid-row: 2 / 3; }

.bAPropos__ctn { }
.bAPropos__image { }

	/* 
	ANIMATE
	Image clip from bottom to top. */
	.bAPropos__cMedia.jsAnimateClass .bAPropos__image {clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-cubic); }
	.bAPropos__cMedia.jsAnimateClass.animate .bAPropos__image {clip-path: inset(0 0 0 0); }

.bAPropos__list {position: relative; margin-left: var(--width-std); margin-right: var(--width-std); }
.bAPropos__items {display: flex;flex-wrap: nowrap;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));padding-right: 10em;}
.bAPropos__items .iTimelineCard {flex: 0 0 auto;width: calc(100% / var(--nbItems));padding: var(--espacementV) var(--espacementH);}

/* Les ronds dans les slides sont par-dessus la line blanche de la navigation.
Permettre de cliquer sur les flèches vu que la flickity track est par-dessus.  */
.bAPropos__items {position: relative; z-index: 5; pointer-events: none; }
.bAPropos__items .flickity-viewport {pointer-events: auto;}

/* Carousel */
.bAPropos .jsCarouselStd { }

	/* Arrows position: vertically-centered on the line */
	.bAPropos__nav {height: 0;position: relative;z-index: auto;}
	.bAPropos__nav::before {position:absolute;z-index:0;display:block;content:'';top:var(--yearHeight);height: 1px;left:0;right:calc(-1 * var(--width-std) + -1 * var(--width-std-right));background: var(--color-white); }
	.bAPropos__nav .navArrows {position: absolute;z-index: 6;top: var(--yearHeight);left: auto;right: 0;transform: translate(0, -50%);}

	/* Before init */
	.bAPropos .jsCarouselStd.flickity-enabled {display: block;}
	.bAPropos .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+4) {display: none;}

	/* .is-selected = slide de gauche */
	.bAPropos .iTimelineCard {--scaleDot:0.7; --opacityDot:0; --opacityCtn: 0; pointer-events: none; }
	.bAPropos .iTimelineCard__year::after {opacity: var(--opacityDot); transform: scale(var(--scaleDot)) translate(0%, 50%); transition: transform 0.4s var(--ease-cubic), opacity 0.4s; transition-delay: 0.1s; }
	.bAPropos .iTimelineCard__ctn {opacity: var(--opacityCtn); transition: opacity 0.4s; }

		/* Afficher la slide active + les 2 suivantes
		+ Fix sinon des fois ca sélectionne l'avant-dernière ou la dernière slide et les précédentes disparaissent.
		On wrap dans un min-width sinon c'est trop complexe à overrider en responsive. */
		@media (min-width:62.01rem) {
			.bAPropos .iTimelineCard.is-selected,
			.bAPropos .iTimelineCard.is-selected + .iTimelineCard,
			.bAPropos .iTimelineCard.is-selected + .iTimelineCard + .iTimelineCard,
			.bAPropos .iTimelineCard:has(+ .iTimelineCard.is-selected:last-child),
			.bAPropos .iTimelineCard:has(+ .iTimelineCard + .iTimelineCard.is-selected:last-child),
			.bAPropos .iTimelineCard:has(+ .iTimelineCard.is-selected:nth-last-child(2)) {--scaleDot:1; --opacityDot:1; --opacityCtn:1; pointer-events: auto;}
		}

	/* Reduce side margins */
	@media (max-width:75rem) {
		.bAPropos__list {margin-left: 0; margin-right: 0; }
		.bAPropos__nav::before {right: calc(-1 * var(--width-std-right)); }
	}
	
	/* Stacked + 2 items shown */
	@media (max-width:62rem) {
		.bAPropos {--mask-size: 30vw; --nbItems: 2;--yearHeight: 6em;--ctnSpacing: 2.3em; }
		.bAPropos .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+3) {display: none;}
		
		.bAPropos__topCurve {display: none; }
		.bAPropos__layout {grid-template-columns: 1fr;grid-template-rows: auto auto auto;gap: calc(0.75 * var(--base-spacing-top));}
		.bAPropos__layout > * {grid-column: 1 / 2; grid-row: auto; }
	}

		/* Afficher la slide active + la suivante
		+ Fix sinon des fois ca sélectionne la dernière slide et la précédente disparait.
		On wrap dans un min-width sinon c'est trop complexe à overrider en responsive. */
		@media (min-width:46.01rem) {
			.bAPropos .iTimelineCard.is-selected,
			.bAPropos .iTimelineCard.is-selected + .iTimelineCard,
			.bAPropos .iTimelineCard:has(+ .iTimelineCard.is-selected:last-child) {--scaleDot:1; --opacityDot:1; --opacityCtn:1; pointer-events: auto;}
		}

	/* 1 item shown */
	@media (max-width:46rem) {
		.bAPropos {overflow: hidden;--nbItems: 1;--espacementH:var(--width-std);--yearHeight: 4.5em;--ctnSpacing: 1.5em;}
		.bAPropos .jsCarouselStd:not(.flickity-enabled) > *:nth-child(1n+2) {display: none;}
		.bAPropos .iTimelineCard.is-selected {--scaleDot:1; --opacityDot:1; --opacityCtn:1; pointer-events: auto;}

		.bAPropos__items {padding-right: 0;margin-right: 20vw;}
		.bAPropos .flickity-viewport {overflow: visible;}

		/* Arrows under the white line, stacked */
		.bAPropos__nav { }
		.bAPropos__nav .navArrows {flex-direction: column;top: calc(var(--yearHeight) + var(--ctnSpacing));transform: none;}
		.bAPropos__nav .navArrows__item--right {order:-1; }
		.bAPropos__nav .navArrows__item--left .btnIcon,
		.bAPropos__nav .navArrows__item--right .btnIcon {transform: none;position: relative;top: auto;left: auto;}

		/* Les flèches doivent toujours être dans le BG bleu */
		.bAPropos .iTimelineCard__ctn {min-height: 8em;}
	}



/*
BLOCK / CLIR
Content at left, image at right (touching the right side).
A bird mark is placed over the image. */ 
.bCLIR { }
.bCLIR__layout {display: flex;align-items: center;gap: 0;}
.bCLIR__cCtn {z-index: 3;flex: 0 0 auto;width: 44%;margin-right: -5%;padding-bottom: 8%;}
.bCLIR__cMedia {flex: 1 1 auto;width: 100%;margin-right: calc(-1 * var(--overflow-right));position: relative;}
.bCLIR__ctn { }
.bCLIR__mark {position: absolute;z-index: 2;top: 0;right: 22.5%;width: 54%;}
.bCLIR__image {padding-top: 13%;}

	/* 
	ANIMATE
	Image clip from bottom to top. */
	.bCLIR__cMedia.jsAnimateClass .bCLIR__image {clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-cubic); }
	.bCLIR__cMedia.jsAnimateClass.animate .bCLIR__image {clip-path: inset(0 0 0 0); }

	/* Stacked */
	@media (max-width:62rem) {
		.bCLIR__layout {display: flex;flex-direction: column;gap: calc(0.5 * var(--base-spacing-top));align-items: stretch;}
		.bCLIR__cCtn {width: 100%;margin-right: 0;padding-bottom: 0; }
		.bCLIR__cMedia {width: auto;margin-left: calc(-1 * var(--width-std-left));margin-right: calc(-1 * var(--width-std-right));}
	}

	/* Image change, so adjust mark position and size */
	@media (max-width:46rem) {
		.bCLIR__mark {width: 62%;right: 23%;}
		.bCLIR__image {padding-top: 18%;}
	}



/*
BLOCK / Title
Description. */