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

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

/* Ce tag est pour ajouter une tomate qui overflow la section suivante. */
.bMain__tomate {position: absolute;z-index: -1;bottom: 0;right: 0;width: min(35%, 45em);transform: translateY(41%);overflow: hidden;}
.bMain__tomate > * {transform: translateX(50%);}

.bMain__vraieTomate {position: absolute;z-index: 1;bottom: 0;right: 15%;width: min(16%, 20em);transform: translateY(60%); }

	/* Position */
	@media (max-width:62rem) {
		.bMain__tomate {z-index: 1;width: min(46%, 18em);transform: translateY(20%);}
	}

	/* Position et marges plus grandes */
	@media (max-width:46rem) {
		.bMain__vraieTomate {left: 20%; right: auto; width: calc(6em + 15vw);}
		.bMain:has(.bMain__vraieTomate) {--base-spacing-bottom: calc(1.7 * var(--base-spacing)); }
		.bMain:has(.bMain__vraieTomate) + .bMain {--base-spacing-top: calc(1.7 * var(--base-spacing)); }
	}

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

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

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



/*
BLOCK / News feature single
A single featured news, with a large image on the left + content on the right. */
.bNewsFeatureSingle {margin-top: calc(0.25 * var(--base-spacing-top));display: flex;gap: calc(0.65 * var(--width-std));}
.bNewsFeatureSingle__cMainImage {flex:0 0 auto;width: 54%;}
.bNewsFeatureSingle__cCtn {flex:1 1 auto;width: 100%;display: flex;flex-direction: column;justify-content: center;gap: 1.7em;}
.bNewsFeatureSingle__image {height: 100%;}
.bNewsFeatureSingle__category { }
.bNewsFeatureSingle__ctn { }
.bNewsFeatureSingle__btn { }

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



/*
BLOCK / News feature list
A list of featured news, with a large news on the left + a list of small news on the right. */
.bNewsFeatureList {display: flex; gap: calc(0.65 * var(--width-std)); }
.bNewsFeatureList__cMain {flex:0 0 auto;width: 54%;}
.bNewsFeatureList__cSide {flex:1 1 auto;width: 100%;display: flex;flex-direction: column;justify-content: space-between;gap: 1.2em;}

/* Make the height of the main image the same as the side (if the side is higher) */
.bNewsFeatureList .iNewsFeatureListMain,
.bNewsFeatureList .iNewsFeatureListMain__image {height: 100%; }

	/* Stacked */
	@media (max-width:62rem) {
		.bNewsFeatureList {flex-direction: column; gap: calc(0.5 * var(--width-std)); }
		.bNewsFeatureList__cMain {width: 100%; }
		.bNewsFeatureList__cSide {gap: calc(0.5 * var(--width-std)); }
	}
	
	/* Spacings */
	@media (max-width:46rem) {
		.bNewsFeatureList {gap: calc(1 * var(--width-std)); }
		.bNewsFeatureList__cSide {gap: calc(1 * var(--width-std)); }
	}



/*
BLOCK / Banner
Image in BG, content over the image. */
.bBanner {--bg-top:var(--color-red); --bg-bottom:var(--color-green); position: relative; z-index: 2; margin: -1px 0; }
.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 { }

.bBanner__ctn {padding: 8%; text-align: center; }
.bBanner__ctn p {max-width: 50ch; margin-left: auto; margin-right: auto; }
.bBanner__media {position: relative;height: 100%;}
.bBanner__mediaMove {height: 120%; }
.bBanner__media::before {position:absolute;z-index: 1;display:block;content:'';top:0;bottom:0;left:0;right:0;background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 25%, rgba(0, 0, 0, 0.18) 100%);}

/* BG colors */
.bBanner::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:50%; left:0; right:0; background-color: var(--bg-top);}
.bBanner::after {position:absolute; z-index:-1; display:block; content:''; top:calc(50% - 1px); bottom:0; left:0; right:0; background-color: var(--bg-bottom);}

	/* Si suivi immédiatement du footer, ajouter un espacement */
	.bBanner:last-child {padding-bottom: var(--base-spacing-bottom); }
	.bBanner:last-child::before {bottom: calc(50% + (0.5 * var(--base-spacing-bottom))); }
	.bBanner:last-child::after {top: calc(50% - (0.5 * var(--base-spacing-bottom)) - 1px); }

	/* Auto set colors */
	.bMain + .bBanner {--bg-top:var(--color-beige); }
	.bMain--green + .bBanner {--bg-top:var(--color-green); }
	.bMain--greenAlt + .bBanner {--bg-top:var(--color-green-alt); }
	.bMain--red + .bBanner {--bg-top:var(--color-red); }

	/* Spacings */
	@media (max-width: 46rem) {
		.bBanner__ctn {padding: 16% 8%; }
	}



/*
BLOCK / Banner simple
Content over a background color.. */
.bBannerSimple { }
.bBannerSimple__ctn {text-align: center; padding: 0 8%; }
.bBannerSimple__ctn p {max-width: 50ch; margin-left: auto; margin-right: auto; }

	/* Spacing */
	@media (max-width:46rem) {
		.bBannerSimple__ctn {padding: 0; }
	}



/*
BLOCK / Parallax floating images
4 floating images (fraises et tomates) over a title. */
.bCIFloating {font-size: 1.2vw;overflow-x: clip;}
.bCIFloating__layout {display: grid;grid-template-columns: 1fr;grid-template-rows: auto;min-height: 40vw;}
.bCIFloating__layout > * {grid-column: 1 / -1; grid-row: 1 / -1; }
.bCIFloating__cCtn {align-self: center;}
.bCIFloating__cVisuals {position: relative; }

.bCIFloating__title {text-align: center;}
.bCIFloating__image {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10em; }

.bCIFloating__image--tomateTL {width: 11em;top: 23%;left: 21%;}
.bCIFloating__image--tomateBR {width: 11em;top: 82%;left: 71%;}
.bCIFloating__image--fraiseTR {width: 8.6em;top: 33%;left: 79%;}
.bCIFloating__image--fraiseBL {width: 10em;top: 78%;left: 38%;}

	/*
	ANIMATE */
	.jsAnimateClass .bCIFloating__title {opacity: 0.1; transition: opacity 1s; }
	.jsAnimateClass.animate .bCIFloating__title {opacity: 1; }

	/* Max size */
	@media (min-width:125rem) {
		.bCIFloating {font-size: 1.363em; }
	}

	/* Sizing et position des tomates */
	@media (max-width:62rem) {
		.bCIFloating {font-size: 2vw; }
		.bCIFloating__layout {min-height: 70vw;}
		.bCIFloating__image--tomateTL {left: 10%;}
		.bCIFloating__image--tomateBR {left: 81%;}
		.bCIFloating__image--fraiseTR {left: 91%;}
		.bCIFloating__image--fraiseBL {left: 31%;}
	}

	@media (max-width:46rem) {
		.bCIFloating {font-size: 4.2vw;}
		.bCIFloating__layout {min-height: 100vw;}
		.bCIFloating__image {font-size: 0.65em; }
		.bCIFloating__image--tomateTL {top: 13%; left: 7%;}
		.bCIFloating__image--tomateBR {top: 85%;left: 85%;}
		.bCIFloating__image--fraiseTR {left: 103%;}
		.bCIFloating__image--fraiseBL {top: 63%;left: 31%;}
	}



/*
BLOCK / ILCR
Image a gauche, texte a droite. */
.bILCR {position: relative;z-index: 1;display: flex;align-items: center;gap: calc(0.6 * var(--base-spacing)) var(--width-std);}
.bILCR__cCtn {order: 2;flex:1 1 auto;}
.bILCR__cImg {flex:0 0 auto;width: 50%; }
.bILCR__img { }
.bILCR__ctn { }

	/*
	ALT :
	Overflow at the top. */
	.bMain.bILCR.bILCR--overflowTop {padding-top: 0;}
	.bMain:has(+ .bILCR--overflowTop) {padding-bottom: calc(1.5 * var(--base-spacing));}
	.bILCR--overflowTop .bILCR__cCtn {padding: calc(0.7 * var(--width-std)) 0;}
	.bILCR--overflowTop .bILCR__cImg {align-self: start;margin-top: calc(-0.6 * var(--base-spacing));}

		/* Spacing */
		@media (max-width:62rem) {
			.bILCR--overflowTop .bILCR__cImg {margin-top: calc(-1 * var(--base-spacing));}
		}

	/*
	ALT :
	Overflow at the bottom. */
	.bMain.bILCR.bILCR--overflowBottom {padding-bottom: 0;}
	.bILCR--overflowBottom + .bMain {padding-top: calc(1.9 * var(--base-spacing));}
	.bILCR--overflowBottom .bILCR__cCtn {padding: calc(0.7 * var(--width-std)) 0;}
	.bILCR--overflowBottom .bILCR__cImg {align-self: end;margin-bottom: calc(-1 * var(--base-spacing));}

	/*
	ALT :
	Kill overflow on mobile. */
	.bILCR--mobileKillOverflow { }

	/*	Avec tomate qui overflow, réduire la largeur.
	Alt détecté automatiquement, pas besoin d'appliquer une classe. */
	.bILCR:has(.bMain__tomate) .bILCR__ctn {max-width: 70%;}
		
		/* S'il y a des tabs, réduire seulement la largeur des tabs */
		.bILCR:has(.bMain__tomate) .bILCR__ctn:has(.bCTabs) {max-width: none;}
		.bILCR:has(.bMain__tomate) .bILCR__ctn .bCTabs {max-width: 70%;}

	/* 
	ANIMATE (IMG) */
	.bILCR__img.jsAnimateClass {clip-path: inset(0 0 100% 0); will-change: clip-path; transition: clip-path 1s var(--ease-cubic);}
	.bILCR__img.jsAnimateClass.animate {clip-path: inset(0 0 0 0); }

	/* Stacked */
	@media (max-width:62rem) {
		.bILCR {flex-direction: column; }
		.bILCR__cCtn {order:0;flex: 0 0 auto;width: 100%;}
		.bILCR__cImg {width: 100%; }

		.bILCR--overflowTop .bILCR__cCtn {order:2; padding: 0; }
		.bILCR.bILCR--overflowTop:has(.bMain__tomate) .bILCR__ctn {max-width: 85%;}
		.bMain.bILCR.bILCR--overflowTop.bILCR--mobileKillOverflow {padding-top: var(--base-spacing-top); }
		.bMain:has(+ .bILCR--overflowTop.bILCR--mobileKillOverflow) {padding-bottom: var(--base-spacing-top);}
		.bILCR--overflowTop.bILCR--mobileKillOverflow .bILCR__cImg {margin-top: 0; }

		.bILCR--overflowBottom .bILCR__cCtn {padding: 0;}
		.bMain.bILCR.bILCR--overflowBottom.bILCR--mobileKillOverflow {padding-bottom: var(--base-spacing-bottom); }
		.bILCR--overflowBottom.bILCR--mobileKillOverflow + .bMain {padding-top: var(--base-spacing-top);}
		.bILCR--overflowBottom.bILCR--mobileKillOverflow .bILCR__cImg {margin-bottom: 0; }

		.bILCR:has(.bMain__tomate) .bILCR__ctn,
		.bILCR:has(.bMain__tomate) .bILCR__ctn .bCTabs {max-width: none;}

		/* Si le bloc précédent est le page head avec une image overflow */
		.phPage:has(.phPage__cVisuals) + .bILCR {padding-top: calc(1.5 * var(--base-spacing-top));}
	}

	/* Tomate will not overflow the text om mobile */
	@media (max-width:46rem) {
		.bILCR.bILCR--overflowTop:has(.bMain__tomate) .bILCR__ctn {max-width: none;}
	}



/*
BLOCK / bILCRArticle
Image a gauche, texte a droite.
Les largeurs sont légèrement différente que le block .bILCR. */
.bILCRArticle {position: relative;z-index: 1;display: flex;align-items: center;gap: calc(0.6 * var(--base-spacing)) var(--width-std);}
.bILCRArticle__cCtn {order:2; width: 50%; }
.bILCRArticle__cImg {width: 50%; }
.bILCRArticle__img { }
.bILCRArticle__ctn { }

	/*
	ALT :
	Invert.
	Image a droite au lieu d'a gauche. */
	.bILCRArticle--invert { }
	.bILCRArticle--invert .bILCRArticle__cCtn {order:0; }

	/* Sur desktop, ajuster l'espacement si suivi du même bloc. */
	@media (min-width:62.01rem) {
		.bILCRArticle:has(+ .bILCRArticle) {--base-spacing-bottom: calc(0.25 * var(--base-spacing)); }
	}

	/* Stacked */
	@media (max-width:62rem) {
		.bILCRArticle {flex-direction: column; }
		.bILCRArticle__cCtn {order:0; width: 100%;}
		.bILCRArticle__cImg {width: 100%; }
	}



/*
BLOCK / Boxes list
Boxes 3 cols per row qui deviennent une par-dessus l'autre sur mobile. */
.bBoxesList {--espacementV: 2.2vw; --espacementH: var(--espacementV); --nbItems:3; }
.bBoxesList__list { }
.bBoxesList__items {display: flex; flex-wrap: wrap; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bBoxesList__items .iProductListItem {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bBoxesList__items .iLocationListItem {--paddingV: 1.7vw; flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }

	/* 4k */
	@media (min-width:125rem) {
		.bBoxesList {--espacementV: 2.5em; }
		.bBoxesList__items .iLocationListItem {--paddingV: 1.9em; }
	}

	/* 2 cols */
	@media (max-width:62rem) {
		.bBoxesList {--espacementV: calc(0.5 * var(--width-std)); --nbItems:2; }
		.bBoxesList__items .iLocationListItem {--paddingV: 2.5vw; }

		/* Si le bloc précédent est le page head avec une image overflow */
		.phPage:has(.phPage__cVisuals) + .bBoxesList {padding-top: calc(1.5 * var(--base-spacing-top));}
	}

	/* 1 col */
	@media (max-width:46rem) {
		.bBoxesList {--nbItems:1; }
		.bBoxesList__items .iLocationListItem {--paddingV: 5vw; }
	}



/*
BLOCK / Stats numbers
Simple 3-column stats layout for key figures. */
.bStatsNumbers { }
.bStatsNumbers__head { }
.bStatsNumbers__list {display: flex;gap: calc(0.6 * var(--base-spacing)) 5%;}
.bStatsNumbers__list > * {flex:1 1 auto; }

.iStatsNumber {color: var(--color-red);}
.iStatsNumber__value {color: currentColor; }
.iStatsNumber__label {max-width: 12em;margin-top: 0.8em;color: currentColor;}

	/* 
	ANIMATE */
	.jsAnimateClass .iStatsNumber__value {opacity: 0.1; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: var(--delay, 0s); }
	.jsAnimateClass.animate .iStatsNumber__value {opacity: 1; }

	.jsAnimateClass .iStatsNumber__label {opacity: 0; transform: translateY(0.5em); will-change: opacity, transform; transition: opacity 1s var(--ease-cubic), transform 1s var(--ease-cubic); transition-delay: calc(0.3s + var(--delay, 0s)); }
	.jsAnimateClass.animate .iStatsNumber__label {opacity: 1; transform: none; }

	/* Full width */
	@media (max-width:62rem) {
		.bStatsNumbers__list {justify-content: space-between; }
		.bStatsNumbers__list > * {flex:0 1 auto; }
	}

	/* Stacked */
	@media (max-width:46rem) {
		.bStatsNumbers__list {flex-direction: column; }
		.iStatsNumber__label {margin-top: 0.5em; }
	}



/*
BLOCK / Produits slider
Bloc assez complexe avec un slider de produits.
Chaque slide contient un carousel indépendant de plusieurs slides.

bProductsSliders = contient tous les sliders, c'est le wrapper global
bProductsSlider = contient les éléments d'une catégorie de produit (ex : tomates)
iProduitSlide = slide individuelle d'un produit. */
.bProductsSliders {--dots-nav-spacing: 4rem;overflow: hidden;}
.bProductsSliders__head {display: grid;grid-template-columns: 1fr auto 1fr;grid-template-rows: auto;gap: 5%;position: relative;z-index: 1;}
.bProductsSliders__title {grid-column: 1 / 2;grid-row: 1 / -1;}
.bProductsSliders__title > * {max-width: 4.5em;}
.bProductsSliders__nav {grid-column: 2 / 3;grid-row: 1 / -1;margin-top: 0.5em;}
.bProductsSliders__tabs {position: relative;display: grid;grid-template-columns: 1fr;grid-template-rows: auto;margin-top: -2.5vw;margin-bottom: var(--dots-nav-spacing);}
.bProductsSliders__tabs > * {grid-column: 1 / -1; grid-row: 1 / -1; }

	/* Rond stroked dans le background */
	.bProductsSliders__tabs::before {position:absolute;z-index: -1;display:block;content:'';top: 2.5vw;left: 50%;width: 45%;transform: translateX(-50%);aspect-ratio: 1;background: radial-gradient(transparent 40%, var(--color-green-alt) 40%);border-radius: 50%;}

		/* Spacing et rond BG */
		@media (max-width:62rem) {
			.bProductsSliders {--dots-nav-spacing: 2rem;}
			.bProductsSliders__head {display: flex;flex-direction: column;gap: calc(0.5 * var(--base-spacing));}
			.bProductsSliders__title > * {max-width: none; }
			.bProductsSliders__nav {margin-top: 0; align-self: center; }
			.bProductsSliders__tabs {margin-top: 0;padding-bottom: var(--dots-nav-spacing);}
			.bProductsSliders__tabs::before {top: 10vw;width: min(75%, 25em);}
		}
		
		/* Spacing */
		@media (max-width:46rem) {
			.bProductsSliders {--dots-nav-spacing: 1.5rem;}
			.bProductsSliders__head {gap: calc(0.25 * var(--base-spacing));}
			.bProductsSliders__nav {align-self: start;}
		}


/* Slider de produits */
.bProductsSlider {opacity: 1; pointer-events: auto; transition: opacity 0.5s; }
.bProductsSlider[hidden] {display: block; opacity: 0; pointer-events: none; }
.bProductsSlider__list {position: relative;}
.bProductsSlider__items { }
.bProductsSlider__nav {position: absolute;z-index: 3;bottom: 2.5vw;left: 28%;}
.bProductsSlider__side {position: absolute;z-index: -1;top: 0;bottom: 0;right: calc(-1 * var(--width-std-right));}
.bProductsSlider__side * {height: 100%; width: auto; }

/* Carousel */
.bProductsSlider .jsCarouselStd { }

	/* Dots nav */
	.bProductsSlider .flickity-page-dots {position: absolute;top: 100%;bottom: auto;margin-top: var(--dots-nav-spacing);width: 100%;font-size: 2.7em;display: flex;justify-content: center;}
	.bProductsSlider .flickity-page-dots .dot {position: relative;width: 1em;height: 1em;margin:0;box-sizing: content-box;background: none; transition: opacity 0.3s; }
	.bProductsSlider .flickity-page-dots .dot::before {position: absolute;display: block;content: " ";background-color: var(--color-beige);top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 0.27em;width: 1em;height: 1em;border-radius: 50%;}
	.bProductsSlider .flickity-page-dots .dot::after {position: absolute;display: block;content: " ";top: 0; bottom: 0; left: 0; right: 0;border-radius: 50%; border:1px solid var(--color-beige); opacity: 0; transform: scale(0.5); transition: opacity 0.3s, transform 0.3s var(--ease-cubic); }

		/* Hover */
		.bProductsSlider .flickity-page-dots .dot:hover {opacity: 1; }
		.bProductsSlider .flickity-page-dots .dot:hover::before { }

		/* Selected */
		.bProductsSlider .flickity-page-dots .dot.is-selected {opacity: 1; }
		.bProductsSlider .flickity-page-dots .dot.is-selected::before { }
		.bProductsSlider .flickity-page-dots .dot.is-selected::after {opacity: 1; transform: scale(0.65); }

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

	/* 100% height slides */
	.flickity-resize.bProductsSlider__items .iProduitSlide {min-height: 100%;display: flex;}
	.flickity-resize.bProductsSlider__items .iProduitSlide__layout {height: auto;flex: 1 1 auto;}

	/*
	FADE EFFECT
	Dans ce plugin, cet effet est gerer en CSS, pas en JS. */
	.bProductsSlider .jsCarouselStd.flickity-enabled .flickity-slider {transform: none !important;}
	.bProductsSlider .jsCarouselStd.flickity-enabled .iProduitSlide {transform: none !important;}

	/* Set animations transitions */
	.bProductsSlider .jsCarouselStd .iProduitSlide {transition: opacity 0.5s, visibility 0.5s;}

	/* .is-selected = slide affichée */
	.bProductsSlider .jsCarouselStd .iProduitSlide:not(.is-selected) {opacity: 0;visibility: hidden; pointer-events: none;}

	/* 
	ANIMATE */
	.bProductsSliders.jsAnimateClass { }
	.bProductsSliders.jsAnimateClass.animate { }

	/* Slide the side image */
	.bProductsSliders.jsAnimateClass .bProductsSlider__side {transform: translateX(100%); transition: transform 1s var(--ease-cubic); transition-delay: 0s; }
	.bProductsSliders.jsAnimateClass.animate .bProductsSlider__side {transform: none; }

	/* Fade in order in the slide : image, title, text, button. */
	.bProductsSliders.jsAnimateClass .iProduitSlide .iProduitSlide__cVisuals {opacity: 0; transition: opacity 1s; transition-delay: 0.3s; }
	.bProductsSliders.jsAnimateClass.animate .iProduitSlide .iProduitSlide__cVisuals {opacity: 1; }
	.bProductsSliders.jsAnimateClass .iProduitSlide .iProduitSlide__title {opacity: 0;}
	.bProductsSliders.jsAnimateClass.animate .iProduitSlide .iProduitSlide__title {opacity: 1; transition: opacity 1s; transition-delay: 0.6s; }
	.bProductsSliders.jsAnimateClass .iProduitSlide .iProduitSlide__ctn {opacity: 0;}
	.bProductsSliders.jsAnimateClass.animate .iProduitSlide .iProduitSlide__ctn {opacity: 1; transition: opacity 1s; transition-delay: 0.75s; }
	.bProductsSliders.jsAnimateClass .iProduitSlide .iProduitSlide__btn {opacity: 0;}
	.bProductsSliders.jsAnimateClass.animate .iProduitSlide .iProduitSlide__btn {opacity: 1; transition: opacity 1s; transition-delay: 0.9s; }

	/* Fadein the arrows nav */
	.bProductsSliders.jsAnimateClass .bProductsSlider__nav {opacity: 0; transition: opacity 1s; transition-delay: 1.2s; }
	.bProductsSliders.jsAnimateClass.animate .bProductsSlider__nav {opacity: 1; }

	/* Fadein the dots nav */
	.bProductsSliders.jsAnimateClass .flickity-page-dots {opacity: 0; transition: opacity 1s; transition-delay: 1.2s; }
	.bProductsSliders.jsAnimateClass.animate .flickity-page-dots {opacity: 1; }

	/* Hide side + nav position */
	@media (max-width:62rem) {
		.bProductsSlider__nav {left: auto;right: 0;bottom: 0;}
		.bProductsSlider__side {display: none; }
	}

	/* Nav size */
	@media (max-width:46rem) {
		.bProductsSlider .flickity-page-dots {font-size: 2.3em; }
	}


/* Slide d'un produit */
.iProduitSlide {width: 100%; }
.iProduitSlide__layout {display: grid;grid-template-columns: 1fr;grid-template-rows: auto;}
.iProduitSlide__layout > * {grid-column: 1 / -1; grid-row: 1 / -1; }
.iProduitSlide__cCtn {align-self: end;z-index: 3;display: flex;flex-direction: column;gap: 2.2em;padding-top: 5%;padding-bottom: 2.5vw;}
.iProduitSlide__cVisuals {width: 58%;position: relative;margin-left: auto;margin-right: auto;padding: 2.5vw 0;}
.iProduitSlide__title { }
.iProduitSlide__ctn {max-width: 18em;}
.iProduitSlide__btn { }
.iProduitSlide__image { }
.iProduitSlide__tag {position: absolute;z-index: 2;top: 15%;left: 75%;width: 20%;transform: translate(-50%, -50%);}

	/* Image over content */
	@media (max-width:62rem) {
		.iProduitSlide__layout {padding-top: 10vw;display: flex;flex-direction: column;}
		.iProduitSlide__cCtn {order:2;flex-grow: 1;width: 100%;padding-top: 0;padding-bottom: 0;margin-top: -15vw;gap: calc(0.3 * var(--base-spacing));}
		.iProduitSlide__cVisuals {width: min(100%, 32em); padding: 0;}
		.iProduitSlide__ctn {flex-grow: 1;}
		.iProduitSlide__tag {width: 30%;top: 11%;left: 83%;}
	}



/*
BLOCK / Recettes featured
Carousel avec quelques recettes, avec header, footer, fausse scrollbar. */
.bRecettesFeatured {--espacementV: 0px;--espacementH: 0.9vw;--nbItems: 2;overflow: hidden;}
.bRecettesFeatured__head { }
.bRecettesFeatured__list {position: relative;margin-right: calc(1.6 * var(--width-std));}
.bRecettesFeatured__items {display: flex;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bRecettesFeatured__items .iRecetteCard,
.bRecettesFeatured__items .iAvantageCard {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bRecettesFeatured__foot {display: grid;grid-template-columns: 1fr auto 1fr;grid-template-rows: auto;align-items: center;gap: 2em;}
.bRecettesFeatured__scrollbar {grid-column: 2 / 3; grid-row: 1 / 2; }
.bRecettesFeatured__btn {grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end; }

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

	/* Arrows position: vertically-centered on the image */
	.bRecettesFeatured__nav {height: 0;}
	.bRecettesFeatured__nav .navArrows__item--left .btnIcon,
	.bRecettesFeatured__nav .navArrows__item--right .btnIcon {display: block;position: absolute;z-index: 3;top: 50%;left: calc(-1 * var(--espacementH));transform: translate(-50%, -50%);}
	.bRecettesFeatured__nav .navArrows__item--right .btnIcon {left: auto;right: calc(-1 * var(--espacementH));transform: translate(50%, -50%);}
	
		/* Dragging the scrollbar = don't show the arrows */
		.bRecettesFeatured.dragging .bRecettesFeatured__nav .navArrows__item--left .btnIcon,
		.bRecettesFeatured.dragging .bRecettesFeatured__nav .navArrows__item--right .btnIcon {opacity: 0; }

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

	/* 100% height slides pour les avantages */
	.flickity-resize.bRecettesFeatured__items .iAvantageCard {min-height: 100%;display: flex;}
	.flickity-resize.bRecettesFeatured__items .iAvantageCard__layout {height: auto;flex: 1 1 auto;}

	/* 
	ANIMATE */
	.bRecettesFeatured.jsAnimateClass { }
	.bRecettesFeatured.jsAnimateClass.animate { }

	/* Deactivate Flickity interaction sur les items */
	.bRecettesFeatured.jsAnimateClass .bRecettesFeatured__list {pointer-events: none; }
	.bRecettesFeatured.jsAnimateClass.animate .bRecettesFeatured__list {pointer-events: auto; }

	/* Cards faded */
	.bRecettesFeatured.jsAnimateClass .iRecetteCard__layout,
	.bRecettesFeatured.jsAnimateClass .iAvantageCard__layout {opacity: 0.1; transition: opacity 1s var(--ease-cubic); }
	.bRecettesFeatured.jsAnimateClass.animate .iRecetteCard__layout,
	.bRecettesFeatured.jsAnimateClass.animate .iAvantageCard__layout {opacity: 1; }

	/* Flèches faded */
	.bRecettesFeatured.jsAnimateClass .bRecettesFeatured__nav .navArrows__item {opacity: 0; transition: opacity 1s var(--ease-cubic); transition-delay: 0.5s; }
	.bRecettesFeatured.jsAnimateClass.animate .bRecettesFeatured__nav .navArrows__item {opacity: 1; }

	/* Progress bar faded + outline scaling */
	.bRecettesFeatured.jsAnimateClass .bRecettesFeatured__scrollbar .progressBar__progression {pointer-events: none; opacity: 0; transition: opacity 1s var(--ease-cubic); transition-delay: 0.65s; }
	.bRecettesFeatured.jsAnimateClass.animate .bRecettesFeatured__scrollbar .progressBar__progression {pointer-events: auto; opacity: 1; }
	.bRecettesFeatured.jsAnimateClass .bRecettesFeatured__scrollbar .progressBar__progression::after {opacity: 0; transform: scale(2); transition: opacity 1s var(--ease-cubic), transform 1s var(--ease-cubic); transition-delay: 0.65s; }
	.bRecettesFeatured.jsAnimateClass.animate .bRecettesFeatured__scrollbar .progressBar__progression::after {opacity: 1; transform: none; }

	/* Bouton faded */
	.bRecettesFeatured.jsAnimateClass .bRecettesFeatured__btn {pointer-events: none; opacity: 0; transition: opacity 1s var(--ease-cubic); transition-delay: 0.8s; }
	.bRecettesFeatured.jsAnimateClass.animate .bRecettesFeatured__btn {pointer-events: auto; opacity: 1; }

	/* 4k */
	@media (min-width:125rem) {
		.bRecettesFeatured {--espacementH: 1.125rem; }
	}

	/* 1 item shown */
	@media (max-width:62rem) {
		.bRecettesFeatured {--espacementH: 1.4vw;--nbItems: 1; }
		.bRecettesFeatured__list {margin-right: calc(4 * var(--width-std));}
		.bRecettesFeatured__foot {display: flex; flex-direction: column; gap: calc(0.5 * var(--base-spacing-top)) 0; }
	}
	
	/* Spacing and arrow buttons */
	@media (max-width:46rem) {
		.bRecettesFeatured {--espacementH: var(--width-std); }
		.bRecettesFeatured__list {margin-right: 0;}

		.bRecettesFeatured__nav .navArrows__item--left .btnIcon,
		.bRecettesFeatured__nav .navArrows__item--right .btnIcon {left: calc(-1 * var(--width-std-left)); transform: translateY(-50%); }
		.bRecettesFeatured__nav .navArrows__item--right .btnIcon {left: auto; right: calc(-1 * var(--width-std-right));transform: translateY(-50%); }
	}



/*
BLOCK / Produits featured
Carousel sur mobile, seulement affiché side-by-side sur desktop. */
.bProduitsFeatured {--espacementV: 0px;--espacementH: 1.8vw;--nbItems: 4;overflow: hidden;}
.bProduitsFeatured__head { }
.bProduitsFeatured__list {position: relative; }
.bProduitsFeatured__items {display: flex;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); }
.bProduitsFeatured__items .iProduitAdvCard {flex: 0 0 auto; width: calc(100% / var(--nbItems)); padding: var(--espacementV) var(--espacementH); }
.bProduitsFeatured__nav {display: none; }

	/* 
	ANIMATE */
	.bProduitsFeatured.jsAnimateClass .iProduitAdvCard__icon {opacity: 0.5; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0s + var(--delay, 0s)); }
	.bProduitsFeatured.jsAnimateClass.animate .iProduitAdvCard__icon {opacity: 1; }
	.bProduitsFeatured.jsAnimateClass .iProduitAdvCard__icon > svg {opacity: 0; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0s + var(--delay, 0s)); }
	.bProduitsFeatured.jsAnimateClass.animate .iProduitAdvCard__icon > svg {opacity: 1; }
	.bProduitsFeatured.jsAnimateClass .iProduitAdvCard__cTitle {opacity: 0; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0.1s + var(--delay, 0s)); }
	.bProduitsFeatured.jsAnimateClass.animate .iProduitAdvCard__cTitle {opacity: 1; }
	.bProduitsFeatured.jsAnimateClass .iProduitAdvCard__cCtn {opacity: 0; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0.2s + var(--delay, 0s)); }
	.bProduitsFeatured.jsAnimateClass.animate .iProduitAdvCard__cCtn {opacity: 1; }
	
/* Carousel, disabled on desktop */
.bProduitsFeatured .jsCarouselStd { }
.bProduitsFeatured .jsCarouselStd::after {content: ' '; }

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

	/* 4k */
	@media (min-width:125rem) {
		.bProduitsFeatured {--espacementH: 2.25rem; }
	}

	/* Activate carousel */
	@media (max-width:62rem) {
		.bProduitsFeatured .jsCarouselStd::after {content: 'flickity'; display: none; }
		.bProduitsFeatured {--espacementH: calc(0.5 * var(--width-std)); --nbItems:2; }
		.bProduitsFeatured .jsCarouselStd .flickity-viewport {overflow: visible; }
		.bProduitsFeatured__nav {display: block; margin-top: calc(0.4 * var(--base-spacing)); }
	}

	/* 1 item shown */
	@media (max-width:46rem) {
		.bProduitsFeatured {--espacementH: var(--width-std); --nbItems:1; }
	}



/*
BLOCK / Suggested
2 cols avec image de fond ronde + titre et bouton pour chaque.
Les images de background overflow. */
.bSuggestedPages {background-color: var(--color-green); }
.bSuggestedPages__layout {display: grid;grid-template-columns: 50% 1fr;grid-template-rows: auto 1fr;align-items: stretch;}
.bSuggestedPages__cHead {grid-row: 1 / 2;grid-column: 1 / -1;z-index: 1;padding: 11% var(--width-std-right) 0 var(--width-std-left);}
.bSuggestedPages__cLeft {grid-row: 1 / 3; grid-column: 1 / 2; background: var(--color-green-alt); }
.bSuggestedPages__cRight {grid-row: 1 / 3; grid-column: 2 / 3; }
.bSuggestedPages__head {text-align: center; }

	/* Stacked */
	@media (max-width:46rem) {
		.bSuggestedPages__layout {display: block; }
		.bSuggestedPages__cHead {padding: var(--base-spacing-top) var(--width-std-right) 0 var(--width-std-left); }
		.bSuggestedPages__cLeft {background-color: var(--color-green); }
		.bSuggestedPages__cRight {background: var(--color-green-alt); }
	}

.iSuggestedPage {height: 100%; overflow:hidden; }
.iSuggestedPage__layout {height: 100%;display: grid;grid-template-columns: 1fr;grid-template-rows: auto;align-items: center;}
.iSuggestedPage__cCtn {grid-column: 1 / -1;grid-row: 1 / 2;z-index: 1;text-align: right;padding: 8% 10%;}
.iSuggestedPage__cVisuals {grid-column: 1 / -1; grid-row: 1 / 2; align-self:end; }
.iSuggestedPage__title {max-width: 25em;display: inline-block;}
.iSuggestedPage__btn {margin-top: 1.5em;}
.iSuggestedPage__image {aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; max-width: none; width: auto; margin: 14% 35% -14% -45%; background: var(--color-green); }
.iSuggestedPage__image * {width: 100%; height: 100%; object-fit: cover; }

	/* 
	ANIMATE */
	.bSuggestedPages.jsAnimateClass .iSuggestedPage__cVisuals {transform: translateX(-70%); will-change: transform; transition: transform 1.5s var(--ease-cubic); }
	.bSuggestedPages.jsAnimateClass .bSuggestedPages__cRight .iSuggestedPage__cVisuals {transform: translateX(70%); transition-delay: 0.15s; }
	.bSuggestedPages.jsAnimateClass.animate .iSuggestedPage__layout .iSuggestedPage__cVisuals {transform: none; }

	/* 2e = left aligned. */
	.bSuggestedPages__cRight .iSuggestedPage { }
	.bSuggestedPages__cRight .iSuggestedPage__cCtn {text-align: left; }
	.bSuggestedPages__cRight .iSuggestedPage__image {margin-left: 35%; margin-right: -45%; background-color: var(--color-green-alt); }

	/* Avec un titre = decaller l'espacement du contenu texte. */
	.bSuggestedPages:has(.bSuggestedPages__cHead) .iSuggestedPage__layout {align-items: start;}
	.bSuggestedPages:has(.bSuggestedPages__cHead) .iSuggestedPage__cCtn {margin-top: 50%;}

	/*
	ALT :
	Add a tint over the image.
	That way, it's easier to read the text. */
	.iSuggestedPage__image--addTint {position: relative; }
	.iSuggestedPage__image--addTint::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background: linear-gradient(to left, rgba(0 0 0 / 60%) 0%, transparent 70%); }

		/* Reverse for the immage at right */
		.bSuggestedPages__cRight .iSuggestedPage__image--addTint::before {transform: rotate(180deg); }

	/* Everything is aligned right */
	@media (max-width:46rem) {
		.iSuggestedPage__layout,
		.bSuggestedPages:has(.bSuggestedPages__cHead) .iSuggestedPage__layout {align-items: center;}
		.iSuggestedPage__cCtn,
		.bSuggestedPages:has(.bSuggestedPages__cHead) .iSuggestedPage__cCtn {margin-top: 0; text-align: left; padding: 10% var(--width-std); }
		.iSuggestedPage__cVisuals {align-self: center; }
		.iSuggestedPage__title {max-width: 70%; }
		.iSuggestedPage__image,
		.bSuggestedPages__cRight .iSuggestedPage__image {width: 65%; margin: 8% -15% 8% auto; background-color: var(--color-green-alt); }
		.bSuggestedPages__cRight .iSuggestedPage__image {background-color: var(--color-green); }

		.iSuggestedPage__image--addTint::before,
		.bSuggestedPages__cRight .iSuggestedPage__image--addTint::before {transform: rotate(180deg); }

		.bSuggestedPages.jsAnimateClass .iSuggestedPage__cVisuals,
		.bSuggestedPages.jsAnimateClass .bSuggestedPages__cRight .iSuggestedPage__cVisuals {transform: translateX(55%); }
	}



/*
BLOCK / Offer form
Block pour pouvoir définir les spacings avec les blocks environnants. */
.bOfferForm { }



/*
BLOCK / Contenu
Pour l'affichage de texte, dans sa forme la plus simple. */
.bCtn { }
.bCtn__ctn { }

	/* Spacing */
	@media (max-width:62rem) {
		/* Si le bloc précédent est le page head avec une image overflow */
		.phPage:has(.phPage__cVisuals) + .bCtn {padding-top: calc(1.5 * var(--base-spacing-top));}
	}



/*
BLOCK / Contenu 2 cols
Pour l'affichage de texte, en 2 colonnes.
Si on ajoute un titre, il sera un 1 colonne et prendra toute la largeur. */
.bC2Cols {display: grid; grid-template-columns: 1fr 1fr; gap: 2em var(--width-std); }
.bC2Cols__head {grid-column: 1 / -1; }
.bC2Cols__col { }

	/* Sur desktop, ajuster l'espacement si suivi du bloc de contenu d'article. */
	@media (min-width:62.01rem) {
		.bC2Cols:has(+ .bILCRArticle) {--base-spacing-bottom: calc(0.5 * var(--base-spacing)); }
	}

	/* Stacked */
	@media (max-width:62rem) {
		.bC2Cols {grid-template-columns: 1fr; }
		.bC2Cols__col + .bC2Cols__col h2 {margin-top: 1em; }
	}



/*
BLOCK / Tabs for content
Tabs pour afficher du contenu simple.
Redéfinir le hidden pour 1- animation fade et 2- same height tabs. */
.bCTabs { }
.bCTabs__head { }
.bCTabs__tabs {margin-top: 0.5em; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; }
.bCTabs__tab {grid-column: 1 / -1; grid-row: 1 / 2; opacity: 1; pointer-events: auto; transition: opacity 0.3s; }
.bCTabs__tab[hidden] {display: block; opacity: 0; pointer-events: none; }

	/* Si la navigation des tabs est grosse, ajuster l'espacement */
	.bCTabs:has(.navTabsTitles .h2--inCtn) .bCTabs__tabs {margin-top: 1.5em; }

	/* Si dans un bloc de contenu, espacer avec l'élément précédent. */
	.typo * + .bCTabs {margin-top: 2em; }



/*
BLOCK / Listing de recettes
Avec un filtres, une liste 2 cols avec 2e colonne offset. */
.bListRecettes {--espacementV: calc(0.4 * var(--width-std)); --espacementH: calc(0.5 * var(--width-std)); --nbItems: 2; --offsetCol: calc(3 * var(--espacementV)); }
.bListRecettes__filter {margin-top: calc(-0.75 * var(--base-spacing-top));margin-bottom: calc(0.5 * var(--base-spacing-bottom));}
.bListRecettes__list {padding-top: var(--offsetCol); }
.bListRecettes__items {display: flex; flex-wrap: wrap; margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH)); transition: height 1s;}
.bListRecettes__items .iRecetteCard {flex: 0 0 auto; width: calc(100% / var(--nbItems) - 1px); padding: var(--espacementV) var(--espacementH);}
.bListRecettes__footer {margin-top: calc(0.5 * var(--base-spacing-top)); }

/* Le offset item sert a faire un décallage dans les colonnes.
Il s'affiche toujours car on lui applique toutes les classes CSS de filtrage.
Il tire la colonne 1 vers le haut, donc elle est décallée. */
.bListRecettes__itemSpacer {height: 0;padding: 0 !important;margin-top: calc(-1 * var(--offsetCol));visibility: hidden;}

	/* Stacked */
	@media (max-width:62rem) {
		.bListRecettes {--nbItems:1; --espacementV: calc(0.5 * var(--width-std)); --espacementH:0px; --offsetCol:0px; }
		.bListRecettes__filter {margin-top: calc(-0.5 * var(--base-spacing-top)); }
		.bListRecettes__itemSpacer {display: none; }
	}

	@media (max-width:46rem) {
		.bListRecettes__filter {margin: calc(0.25 * var(--base-spacing-top)) 0; }
	}



/*
BLOCK / Listing de FAQ
Avec un filtre. */
.bFAQ { }
.bFAQ__filter {margin-top: calc(-0.65 * var(--base-spacing-top));margin-bottom: calc(0.35 * var(--base-spacing-bottom));}
.bFAQ__list { }
.bFAQ__items {position: relative; }
.bFAQ__items .iAccordion {width: 100%; }

	/* Animation manuelle, pas Isotope. */
	.bFAQ__items .iAccordion {transition: opacity 0.5s, visibility 0.5s; }
	.bFAQ__items .iAccordion__top {max-height: 12em; transition: max-height 0.5s;}
	.bFAQ__items .iAccordion[hidden] {display: block; opacity: 0; visibility: hidden; }
	.bFAQ__items .iAccordion[hidden] .iAccordion__top {max-height: 0; }
	.bFAQ__items .iAccordion[hidden] .iAccordion__details {grid-template-rows: 0fr; }

	/* Max-height plus grand vu que le top augmente en hauteur ici */
	@media (max-width:62rem) {
		.bFAQ__items .iAccordion__top {max-height: 14em; }
	}
	
	@media (max-width:46rem) {
		.bFAQ__items .iAccordion__top {max-height: 18em; }
	}



/*
BLOCK / Recette details
Offsetted layout: intro a gauche, ingredients en-dessous, mais preparation 
offset a droite pour laisser la place a l'image du page head.
Tabs sur mobile. */
.bRecetteDetails { }
.bRecetteDetails__layout {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 10% auto 1fr;gap: calc(0.5 * var(--base-spacing)) var(--width-std);}
.bRecetteDetails__cIntro {grid-column: 1 / 2; grid-row: 1 / 3; }
.bRecetteDetails__cTabs {display: none; }
.bRecetteDetails__cIngredients {grid-column: 1 / 2; grid-row: 3 / 4; }
.bRecetteDetails__cPreparation {grid-column: 2 / 3; grid-row: 2 / 4; }
.bRecetteDetails__intro { }
.bRecetteDetails__box {position: relative; padding: 7.5% 10%; }
.bRecetteDetails__box::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:0; left:0; right:0; border: 1px solid var(--color-red); border-radius: var(--radius); }
.bRecetteDetails__title {margin-bottom: 2em;}
.bRecetteDetails__ctn { }

	/* 
	ANIMATE */
	.bRecetteDetails.jsAnimateClass .bRecetteDetails__box::before {opacity: 0; transform: scale(1.1); transition: transform 2s var(--ease-cubic), opacity 2s var(--ease-cubic); }
	.bRecetteDetails.jsAnimateClass .bRecetteDetails__cIngredients .bRecetteDetails__box::before {transition-delay: 0.2s;;}
	.bRecetteDetails.jsAnimateClass.animate .bRecetteDetails__box::before {opacity: 1; transform: none; }

	/* Kill les tabs sur desktop */
	@media (min-width:62.01rem) {
		.bRecetteDetails__cIngredients {display: block !important; }
		.bRecetteDetails__cPreparation {display: block !important; }
	}

	/* Activate tabs, and stack content */
	@media (max-width:62rem) {
		.bRecetteDetails {padding-top: calc(1.5 * var(--base-spacing-top));}
		.bRecetteDetails__layout {display: block; }
		.bRecetteDetails__cIntro {margin-bottom: calc(0.5 * var(--base-spacing)); }
		.bRecetteDetails__cTabs {display: block; margin-bottom: 1em; }
		.bRecetteDetails__box {padding: 0; }
		.bRecetteDetails__box::before {display: none; }
		.bRecetteDetails__title {display: none; }
	}



/*
BLOCK / Intro d'article
Temps de lecture et paragraphe d'introduction.
offset a droite pour laisser la place a l'image du page head. */
.bArticleIntro { }
.bArticleIntro__layout {width: 50%; }
.bArticleIntro__cTemps {margin-top: calc(-0.75 * var(--base-spacing-top)); margin-bottom: calc(0.5 * var(--base-spacing)); }
.bArticleIntro__cIntro { }
.bArticleIntro__temps {font-size: 0.85em; }
.bArticleIntro__intro { }

	/* Sur desktop, ajuster l'espacement si suivi d'un bloc quelconque. */
	@media (min-width:62.01rem) {
		.bArticleIntro:has(+ *) {--base-spacing-bottom: calc(0.5 * var(--base-spacing));}
	}

	/* Spacing */
	@media (max-width:62rem) {
		.bArticleIntro__layout {width: auto; }
		.bArticleIntro__cTemps {margin-top: calc(-0.25 * var(--base-spacing-top)); }
	}

	@media (max-width:46rem) {
		.bArticleIntro__cTemps {margin-top: calc(0.25 * var(--base-spacing-top)); }
	}



/*
BLOCK / Liste de postes
Grid Isotope avec un filtre. */
.bListPostes { }
.bListPostes__head { }
.bListPostes__filters {margin: calc(0.25 * var(--base-spacing)) 0 calc(0.5 * var(--base-spacing)) 0; display: flex; flex-wrap: wrap; gap: 0.5em 2%; }
.bListPostes__filters > * {flex:1 1 auto; width: 100%; max-width: 15em; }
.bListPostes__list { }
.bListPostes__items {position: relative; transition: height 0.5s; }
.bListPostes__items::before {position:absolute; z-index:0; display:block; content:''; top:0; height:1px; left:0; right:0; background:var(--color-green);}
.bListPostes__items .iPoste {position: relative; }
.bListPostes__items .iPoste::after {position:absolute; z-index:0; display:block; content:''; bottom:0; height:1px; left:0; right:0; background:var(--color-green); }

	/* Spacings */
	@media (max-width:46rem) {
		.bListPostes__filters > * {max-width: none; }
	}



/*
BLOCK / Title
Description. */