/* .............................................................................
SITE ITEMS
............................................................................. */

/*
ITEM / Header
Default head for a block.*/
.iHead { }
.iHead + * {margin-top: calc(0.4 * var(--base-spacing-top));}

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

	/*
	ALT :
	Centered. */
	.iHead--centered {text-align: center; }

	/*
	ALT :
	Overlapping. */
	.iHead--overlap {position: relative; z-index: 2; text-align: center; }
	.iHead--overlap + * {margin-top: 0; }
	.iHead--overlap > * {margin-bottom: -0.22em;}

		/* More overlap */
		@media (max-width:46rem) {
			.iHead--overlap > * {margin-bottom: -0.35em; }
		}



/*
ITEM / Content
Default content for a simple block.
Not especially useful at the moment, but could become handy later. */
.iContent { }



/*
ITEM / Footer
Default footer for a block. */
.iFoot {margin-top: calc(0.35 * var(--base-spacing-top));}

	/*
	ALT :
	Centered. */
	.iFoot--centered {text-align: center; }

	/* Spacing */
	@media (max-width:62rem) {
		.iFoot {margin-top: calc(0.5 * var(--base-spacing-top));}
	}



/*
ITEM / Rounded image
With border radius and full size image. */
.iRoundedImage {border-radius: var(--radius);overflow: hidden; }
.iRoundedImage * {height: 100%;width: 100%;object-fit: cover;}



/*
ITEM / Accordion
Accordion avec une icone "arrow-up" qui vire de bord au open. */
.iAccordion {--espacementV: clamp(1.5em, 2.5vw, 2.5em);--espacementH: 0px;position: relative;line-height: 1;}
.iAccordion__top { }
.iAccordion__trigger {display: flex;align-items: center;gap: 1em;padding: var(--espacementV) var(--espacementH); transition: padding 0.3s;}
.iAccordion__title {color: var(--color-red); display: block;flex: 1 1 auto;}
.iAccordion__category {display: block;font-weight: bold;margin-bottom: 0.7em;}
.iAccordion__h {margin-top: 0; color: currentColor; }
.iAccordion__icon {flex:0 0 auto; transition: transform 0.3s var(--ease-cubic);}
.iAccordion__icon::before {background-color: var(--color-red); }
.iAccordion__details {display: grid;grid-template-rows: 0fr;transition: grid-template-rows 0.3s;}
.iAccordion__cell {overflow: hidden; min-height: 0; }
.iAccordion__ctn {padding: 0 var(--espacementH) var(--espacementV) var(--espacementH); opacity: 0; transition: opacity 0.3s;}

/* Separator */
.iAccordion::before,
.iAccordion:nth-last-child(1 of :not([hidden]))::after {position:absolute;z-index:0;display:block;content:'';top:0;height: 1px;left: 0;right: 0;background: var(--color-green);opacity: 1;}
.iAccordion:nth-last-child(1 of :not([hidden]))::after {top: auto;bottom: 0; }

	/* 
	STATE / On. */
	.iAccordion.open .iAccordion__trigger {padding-bottom: calc(0.5 * var(--espacementV)); }
	.iAccordion.open .iAccordion__icon {transform: rotate(180deg); }
	.iAccordion.open .iAccordion__details {grid-template-rows: 1fr; }
	.iAccordion.open .iAccordion__ctn {opacity: 1; }



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {--spacing: 0.25em;list-style: none;font-size: 1.7em;line-height: 1;display: flex;align-items: center;}
.rs li {flex: 0 0 auto;display: block;}
.rs li a {display: block;color: currentColor;padding: var(--spacing);text-decoration: none;transition: color 0.2s;}
p + .rs {margin-top: 0.5em;}

	/* Hover */
	.rs li a:hover {color: var(--color-red); }

	/*
	ALT :
	Vertical alignment */
	.rs--vertical {flex-direction: column;}

	/*
	ALT :
	Left aligned.
	Si premier de ligne et left-align, l'alignement du premier n'est
	pas quite good. Donc, pull un peu le premier vers la gauche. */
	.rs--leftAlign { }
	.rs--leftAlign li:first-child {margin-left: calc(-1.5 * var(--spacing));}



/*
ITEM / Category
Badge "pill-style" label for categorizing content. */
.tCategory {display: inline-block;font-size: 0.75em;font-weight: 700;padding: 0.4em 1em;background-color: var(--color-green);color: var(--color-beige);border-radius: 2em;}

	/* On green */
	.onGreen .tCategory {background-color: var(--color-beige);color: var(--color-red);}

	/* On red */
	.onRed .tCategory {background-color: var(--color-beige);color: var(--color-red);}



/*
ITEM / Nav arrows
Navigation pour un carousel. */
.navArrows {display: inline-flex;align-items: center;gap: 0.8em;}
.navArrows__item {z-index: 3;flex: 0 0 auto;}

	/* Sharp on mobile, not rounded */
	@media (max-width:46rem) {
		.navArrows--mobileSharp { }
		.navArrows--mobileSharp .navArrows__item--left .btnIcon,
		.navArrows--mobileSharp .navArrows__item--left .btnIcon::before {border-top-left-radius: 0; border-bottom-left-radius: 0; }
		.navArrows--mobileSharp .navArrows__item--right .btnIcon,
		.navArrows--mobileSharp .navArrows__item--right .btnIcon::before {border-top-right-radius: 0; border-bottom-right-radius: 0; }
	}



/*
ITEM / Nav tabulaire
Styles qui sont useful pour faire les liens des tabs.
Can be used for nav styling, without necessarily having a tabs plugin.
::before = BG arrondi pour le active
::after = underline pour le hover */
.navTabs {--item-spacing-x:1.4em; --item-spacing-y:0.9em; list-style: none;display: flex;align-items: center;gap: 0.2em;}
.navTabs li {flex:0 1 auto; display: block; }
.navTabs a {position: relative;display: block;font-weight: bold;padding: var(--item-spacing-y) var(--item-spacing-x); color:var(--color-red); transition: color 0.2s;}
.navTabs a::before {position:absolute; z-index:-1; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-red); border-radius: 2em; opacity: 0; transform: scale(0.9); transition: opacity 0.2s, transform 0.2s var(--ease-cubic); }
.navTabs a::after {position:absolute;z-index:-1;display:block;content:'';bottom:calc(0.5 * var(--item-spacing-y));height: 0.15em;left: var(--item-spacing-x);right: var(--item-spacing-x);background-color: var(--color-red);will-change: transform;transform: scaleX(0);transform-origin: 50% 50%;transition: transform 0.3s var(--ease-cubic);}

	/* Hover */
	.navTabs a:hover { }
	.navTabs a:hover::after {transform: none; }
	
	/* Active */
	.navTabs a[aria-selected="true"] {color: var(--color-beige); }
	.navTabs a[aria-selected="true"]::before {opacity: 1; transform: none; }

	/* On green */
	.onGreen .navTabs { }
	.onGreen .navTabs a {color: var(--color-beige); }
	.onGreen .navTabs a::before {background-color: var(--color-beige); }
	.onGreen .navTabs a::after {background-color: var(--color-beige); }

		/* Active */
		.onGreen .navTabs a[aria-selected="true"] {color: var(--color-red); }

	/* Fit les 3 pour ne pas que ça break en 2 lignes */
	@media (max-width:46rem) {
		.navTabs {--item-spacing-x:1.2em; }
		.navTabs a {text-align: center;}
	}



/*
ITEM / Nav tabulaire style titres
Les items de nav ont une dimension spécifique, mais c'est possible de les redéfinir
(ex : voir ceux qui ont des h2--inCtn).
Overflow à droite du viewport si nécessaire (ex : mobile).
::after = underline pour le hover */
.navTabsTitles {--item-spacing-y:0.2em; list-style: none;display: flex;gap:3em; white-space: nowrap; padding: 1em 0;  }
.navTabsTitles li {flex:0 0 auto; display: block; }
.navTabsTitles a {position: relative;display: block;padding: var(--item-spacing-y) 0; color:var(--color-red); }
.navTabsTitles a:not([class]) {font-size: 1.2em;font-weight: 900;color: var(--color-red);text-decoration: none;}
.navTabsTitles a::after {position:absolute;z-index:-1;display:block;content:'';bottom:0;height: max(3px, 0.08em);left: 0;right: 0;background-color: var(--color-red);will-change: transform;transform: scaleX(0);transform-origin: 50% 50%;transition: transform 0.3s var(--ease-cubic);}

	/* Hover */
	.navTabsTitles a:hover { }
	.navTabsTitles a:hover::after {transform: none; }
	
	/* Active */
	.navTabsTitles a[aria-selected="true"] { }
	.navTabsTitles a[aria-selected="true"]::after {transform: none; }

	/* Overflow */
	@media (max-width:62rem) {
		.navTabsTitles {white-space: nowrap; overflow-x: auto; margin:0 calc(-1 * var(--width-std-right)) 0 calc(-1 * var(--width-std-left)); padding-left:var(--width-std-left); padding-right:var(--width-std-right); }
	}


	/* Size */
	@media (max-width:46rem) {
		.navTabsTitles {gap:2em; }
		.navTabsTitles a,
		.navTabsTitles a:not([class]) {font-size: 1.3em; }
	}



/*
ITEM / Featured news main
Big image with content over it. */
.iNewsFeatureListMain {--paddingH: 7%;--paddingV: 5%;}
.iNewsFeatureListMain__layout {height: 100%;display: grid;grid-template-columns:var(--paddingH) 1fr auto var(--paddingH);grid-template-rows: var(--paddingV) 1fr auto auto var(--paddingV);gap: calc(0.8 * var(--paddingV)) 0;}
.iNewsFeatureListMain__cImage {grid-column: 1 / -1;grid-row: 1 / -1;z-index: -1;}
.iNewsFeatureListMain__cCategory {grid-column: 2 / 3; grid-row: 3 / 4; }
.iNewsFeatureListMain__cTitle {grid-column: 2 / 3; grid-row: 4 / 5; }
.iNewsFeatureListMain__cBtn {grid-column: 3 / 4;grid-row: 3 / 5;align-self: end;margin-left: 2em;}

.iNewsFeatureListMain__image {position: relative; }
.iNewsFeatureListMain__image::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.6) 15%, transparent 65%);}

	/* Hover, uniquement si c'est un lien. */
	.iNewsFeatureListMain > a {display: block;text-decoration: none;height: 100%;}
	.iNewsFeatureListMain > a .iNewsFeatureListMain__image img {transition: transform 0.3s var(--ease-cubic); }
	.iNewsFeatureListMain > a .iNewsFeatureListMain__cTitle {transition: color 0.3s; }

	.iNewsFeatureListMain > a:hover .iNewsFeatureListMain__image img {transform: scale(1.05); }
	.iNewsFeatureListMain > a:hover .iNewsFeatureListMain__cTitle {color: var(--color-red); }

	/* Remove the btnIcon */
	@media (max-width:46rem) {
		.iNewsFeatureListMain {--paddingH: 7%;--paddingV: 3%; }
		.iNewsFeatureListMain__cBtn {display: none; }
	}



/*
ITEM / Featured news list
3 news on top of each other, with the image at the left of the content. */
.iNewsFeatureListSide { }
.iNewsFeatureListSide__layout {display: grid;grid-template-columns: 44% 1fr;grid-template-rows: auto 1fr;gap: 0.9em 6%;}
.iNewsFeatureListSide__cImage {grid-column: 1 / 2; grid-row: 1 / 3; }
.iNewsFeatureListSide__cCategory {grid-column: 2 / 3; grid-row: 1 / 2; }
.iNewsFeatureListSide__cTitle {grid-column: 2 / 3; grid-row: 2 / 3; }

.iNewsFeatureListSide__image {height: 100%;}
.iNewsFeatureListSide h3 {font-size: 1.1em;font-weight: 700;line-height: 1.25;}

	/* Hover, uniquement si c'est un lien. */
	.iNewsFeatureListSide a {display: block;text-decoration: none;height: 100%;}
	.iNewsFeatureListSide a .iNewsFeatureListSide__image img {transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
	.iNewsFeatureListSide a .iNewsFeatureListSide__cTitle > * {transition: color 0.3s; }

	.iNewsFeatureListSide a:hover .iNewsFeatureListSide__image img {transform: scale(1.05); }
	.iNewsFeatureListSide a:hover .iNewsFeatureListSide__cTitle > * {color: var(--color-green-light); }

	/* Center content and spacings */
	@media (max-width:62rem) {
		.iNewsFeatureListSide__layout {grid-template-rows:auto auto;gap: 1em calc(0.5 * var(--width-std));}
		.iNewsFeatureListSide__cCategory {align-self: end;}
	}
	
	@media (max-width:46rem) {
		.iNewsFeatureListSide__layout {gap: 1em calc(1 * var(--width-std));}
	}



/*
ITEM / Card recette
Image de la recette, categorie, titre, infos avec icones. */
.iRecetteCard {--paddingH: 7%;--paddingV: 4.5%;}
.iRecetteCard__layout {display: grid;grid-template-columns:var(--paddingH) 1fr var(--paddingH);grid-template-rows: var(--paddingV) 1fr auto auto auto var(--paddingV);gap: calc(0.8 * var(--paddingV)) 0;}
.iRecetteCard__cVisual {grid-column: 1 / -1;grid-row: 1 / -1;z-index: -1;}
.iRecetteCard__cCategory {grid-column: 2 / 3; grid-row: 3 / 4; }
.iRecetteCard__cTitle {grid-column: 2 / 3; grid-row: 4 / 5; }
.iRecetteCard__cInfos {grid-column: 2 / 3;grid-row: 5 / 6;max-width: 25em;}
.iRecetteCard__cDate {grid-column: 2 / 3; grid-row: 5 / 6; }

/* Gradient backgrounds */
.iRecetteCard__image {position: relative; }
.iRecetteCard__image::before {position:absolute; z-index:1; display:block; content:''; top:0; bottom:0; left:0; right:0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, transparent 20%); }
.iRecetteCard__image::after {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.6) 15%, transparent 65%); }

	/* Hover, uniquement si c'est un lien. */
	.iRecetteCard a {display: block;text-decoration: none;height: 100%;}
	.iRecetteCard a .iRecetteCard__image img {transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

	.iRecetteCard a:hover .iRecetteCard__image img {transform: scale(1.05); }

		/* Spacing */
		@media (max-width:46rem) {
			.iRecetteCard {--paddingH: 7%;--paddingV: 2%; }
			.iRecetteCard__layout {gap: calc(1.5 * var(--paddingV)) 0; }
		}



/*
ITEM / Card avantage
Icone, titre et contenu simple. */
.iAvantageCard {--paddingH: 7%;--paddingV: 6%;}
.iAvantageCard__layout {background: var(--color-beige);padding: var(--paddingV) var(--paddingH);border-radius: var(--radius);display: flex;flex-direction: column;justify-content: flex-end;gap: 1.1em;}
.iAvantageCard__cIcon { }
.iAvantageCard__cTitle { }
.iAvantageCard__cTitle > * {color:var(--color-red); }
.iAvantageCard__cCtn { }
.iAvantageCard__icon {font-size: 4em;padding: 0.1em;box-sizing: content-box;border-radius: 50%;color:var(--color-red);background: var(--color-white);}
.iAvantageCard__ctn {font-size: 0.85em; }



/*
ITEM / Card produit avantage
Icone, titre et contenu simple. */
.iProduitAdvCard { }
.iProduitAdvCard__layout {display: flex;flex-direction: column;gap: 1.1em;}
.iProduitAdvCard__cIcon { }
.iProduitAdvCard__cTitle { }
.iProduitAdvCard__cTitle > * {color:var(--color-red); }
.iProduitAdvCard__cCtn { }
.iProduitAdvCard__icon {font-size: 6em;padding: 0.1em;box-sizing: content-box;border-radius: 50%;color:var(--color-red);background: var(--color-white);}
.iProduitAdvCard__ctn {font-size: 0.85em; }



/*
ITEM / List item product
Big image with content over it. */
.iProductListItem {--paddingH: 10%;--paddingV: 8%;}
.iProductListItem__layout {height: 100%;display: grid;grid-template-columns:var(--paddingH) 1fr var(--paddingH);grid-template-rows: var(--paddingV) 1fr auto var(--paddingV); }
.iProductListItem__cImage {grid-column: 1 / -1;grid-row: 1 / -1;z-index: -1;}
.iProductListItem__cTitle {grid-column: 2 / 3; grid-row: 3 / 4; }

.iProductListItem__image {position: relative; }
.iProductListItem__image::before {position:absolute;z-index: 1;display:block;content:'';top: -1px;bottom: -1px;left: -1px;right: -1px;background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 15%, transparent 65%);}

	/* Hover, uniquement si c'est un lien. */
	.iProductListItem > a {display: block;text-decoration: none;height: 100%;}
	.iProductListItem > a .iProductListItem__image img {transform: scale(1.01); will-change: transform; transition: transform 0.3s var(--ease-cubic); }
	.iProductListItem > a:hover .iProductListItem__image img {transform: scale(1.05); }

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

	.jsAnimateClass .iProductListItem__image::before {transform: translateY(100%); will-change: transform; transition: transform 1s var(--ease-cubic); transition-delay: calc(0s + var(--delay)); }
	.jsAnimateClass.animate .iProductListItem__image::before {transform: none; }

	.jsAnimateClass .iProductListItem__cTitle {opacity: 0; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0.5s + var(--delay)); }
	.jsAnimateClass.animate .iProductListItem__cTitle {opacity: 1; }



/*
ITEM / List item location
Image card with overlaid title and text content underneath. */
.iLocationListItem {--paddingH: 8%;--paddingV: 5%;}
.iLocationListItem__layout {display: grid;grid-template-columns:var(--paddingH) 1fr var(--paddingH);grid-template-rows: var(--paddingV) 1fr auto var(--paddingV) auto; }
.iLocationListItem__cImage {grid-column: 1 / -1;grid-row: 1 / 5; z-index: -1; }
.iLocationListItem__cTitle {grid-column: 2 / 3; grid-row: 3 / 4; }
.iLocationListItem__cCtn {grid-column: 1 / -1; grid-row: 5 / 6; margin: 1em 0; }

.iLocationListItem__image {position: relative; }
.iLocationListItem__image::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.6) 15%, transparent 65%);}
.iLocationListItem__subtitle {margin-top: 0.4em; font-weight: bold; }

	/* Hover, uniquement si c'est un lien. */
	.iLocationListItem > a {display: block;text-decoration: none;height: 100%;}
	.iLocationListItem > a .iLocationListItem__image img {transform: scale(1.01); will-change: transform; transition: transform 0.3s var(--ease-cubic); }
	.iLocationListItem > a:hover .iLocationListItem__image img {transform: scale(1.05); }

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

	.jsAnimateClass .iLocationListItem__image::before {transform: translateY(100%); will-change: transform; transition: transform 1s var(--ease-cubic); transition-delay: calc(0s + var(--delay)); }
	.jsAnimateClass.animate .iLocationListItem__image::before {transform: none; }

	.jsAnimateClass .iLocationListItem__cTitle {opacity: 0; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0.5s + var(--delay)); }
	.jsAnimateClass.animate .iLocationListItem__cTitle {opacity: 1; }

	.jsAnimateClass .iLocationListItem__cCtn {opacity: 0; will-change: opacity; transition: opacity 1s var(--ease-cubic); transition-delay: calc(0.5s + var(--delay)); }
	.jsAnimateClass.animate .iLocationListItem__cCtn {opacity: 1; }



/*
ITEM / Progress bar
Fausse scroll bar pour montrer la progression dans les carousels. */
.progressBar {position: relative;width: min(60vw, 20em);height: 0.7em;}
.progressBar::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; background-color: var(--color-beige); border-radius: 1em; opacity: 0.25; }
.progressBar__progression {position: absolute;top: 0;bottom: 0;left: 0;width: 0%;cursor: pointer;}
.progressBar__progression::before {position: absolute;display: block;content: " ";background-color: var(--color-beige);top: 0;bottom: 0;left: 0;right: 0;border-radius: 1em;}
.progressBar__progression::after {position: absolute;display: block;content: " ";top: -0.6em;bottom: -0.6em;left: -0.6em;right: -0.6em;border-radius: 1em;border:1px solid var(--color-beige);}



/*
ITEM / Collaborateur
Image, nom et poste d'un collaborateur.
Affiché sur le détails d'une recette et d'article de blogue. */
.iCollab {width: 100%; font-size: 0.85em;display: flex;align-items: center;gap: 1.5em;}
.iCollab__image {flex:0 0 auto; width: 5.5em; }
.iCollab__ctn {flex:1 1 auto; }
.iCollab__image > * {width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; overflow: hidden; object-fit: cover; }



/*
ITEM / Side box
Box utile pour le sharing. */
.iSideBox {display: inline-block;font-weight: bold;line-height: 1.2;text-align: center;color: var(--color-beige);display: inline-grid;justify-items: center;}
.iSideBox > * {font-size: 0.85em; }
.iSideBox__trigger {grid-column: 1 / -1;grid-row: 1 / 2;background: var(--color-green);border-radius: 2em;cursor: pointer;padding-inline: 0.9em 1.9em;display: flex;align-items: center;}
.iSideBox__trigger > * {transition: opacity 0.3s, visibility 0.3s;}
.iSideBox__ctn {grid-column: 1 / -1;grid-row: 1 / 2;position: relative;pointer-events: none;display: flex;padding-inline: 1.2em;}
.iSideBox__ctn::before {position:absolute;z-index: -1;display:block;content:'';top:0;bottom:0;left:0;right:0;background-color: var(--color-green);border-radius: 2em;transform-origin: 50% 50%;transform: scaleX(0);transition: transform 0.5s;}
.iSideBox__ctn > * {opacity: 0;visibility: hidden;transition: opacity 0.5s, visibility 0.5s;}
.iSideBox__icon {flex:0 0 auto; }
.iSideBox__text {flex:0 0 auto;padding-block: 1.3em;}
.iSideBox .iSideBox__icon .btnIcon {color: currentColor; }
.iSideBox .iSideBox__icon .btnIcon .svgIcon {font-size: 0.8em; }

	/* 
	STATE / On */
	.iSideBox.on { }
	.iSideBox.on .iSideBox__trigger {pointer-events: none; }
	.iSideBox.on .iSideBox__trigger > * {opacity: 0;visibility: hidden; }
	.iSideBox.on .iSideBox__ctn {pointer-events: auto; }
	.iSideBox.on .iSideBox__ctn::before {transform: none; }
	.iSideBox.on .iSideBox__ctn > * {opacity: 1; visibility: visible; transition-delay: 0.1s; }

	/* On green and red */
	.onGreen .iSideBox,
	.onRed .iSideBox {color: var(--color-red); }
	.onGreen .iSideBox__trigger,
	.onRed .iSideBox__trigger {background-color: var(--color-beige); }
	.onGreen .iSideBox__ctn::before,
	.onRed .iSideBox__ctn::before {background-color: var(--color-beige); }
	.onGreen .iSideBox .rs li a:hover,
	.onRed .iSideBox .rs li a:hover {color: var(--color-green); }

	/* Keep only the icon for the trigger, content at align at the bottom */
	@media (max-width:62rem) {
		.iSideBox {justify-items: start; }
		.iSideBox > * {font-size: 1em;}
		.iSideBox__icon {font-size: 1.2em;}
		.iSideBox__trigger {padding-inline: 0;border-radius: 50%;}
		.iSideBox__text {display: none; }
		.iSideBox__ctn::before {transition: none;}
	}

	@media (max-width:46rem) {
		.iSideBox > * {font-size: 0.85em;}
	}



/*
ITEM / Filters
In the recettes and articles listing. */
.iFilters { }
.iFilters__trigger { }
.iFilters__trigger .svgIcon--close {display: none; }
.iFilters__box {position: absolute;z-index: 2;width: calc(100% - var(--width-std-left) - var(--width-std-right));max-width: 30em;background: var(--color-white);padding: 2em;border-radius: 2em;display: flex;flex-direction: column;gap: 1.8em; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.iFilters__filter {display: flex;flex-direction: column;gap: 0.8em;}
.iFilters__title {font-size: 0.85em;font-weight: 700;color: var(--color-red);}
.iFilters__actions {display: flex; flex-wrap: wrap; gap: 0.4em; justify-content: flex-end; }
.iFilters__action {font-size: 0.85em;font-weight: 700;color: var(--color-red); padding:0.2em 0.7em; transition: color 0.2s; }
.iFilters__action:hover {color: var(--color-green); }
.iFilters__action--reset {color: rgba(0, 0, 0, 0.4); font-weight: 400; }
.iFilters__action--apply { }

	/*
	STATE / Filters open */
	.filtersOpen .iFilters__box {opacity: 1; visibility: visible;}
	.filtersOpen .iFilters__trigger .svgIcon {display: none; }
	.filtersOpen .iFilters__trigger .svgIcon--close {display: block; }



/*
ITEM / Poste
Dans la grid Isotope.
Titre du poste, département, temps plein ou pas, boutomn. */
.iPoste {width: 100%; line-height: 1.2; }
.iPoste__layout {display: grid;grid-template-columns: 1fr 1fr 1fr auto;grid-template-rows: auto;gap: 1em 4%;padding:3.5% 0;align-items: center;}
.iPoste__titre {grid-column: 1 / 4;grid-row: 1 / 2; }
.iPoste__horaire {grid-column: 1 / 2;grid-row: 2 / 3; }
.iPoste__departement {grid-column: 2 / 3;grid-row: 2 / 3; }
.iPoste__emplacement {grid-column: 3 / 4;grid-row: 2 / 3; }
.iPoste__arrow {grid-column: 4 / 5;grid-row: 1 / 3;}

.iPoste p {font-size: 0.85em; }
.iPoste__titre > * {color: var(--color-red); }
.iPoste__titre a {display: inline-block; transition: color 0.2s; }
.iPoste__titre a:hover {color: var(--color-green); }

	/* Stacked */
	@media (max-width:62rem) {
		.iPoste__layout {grid-template-columns: 1fr auto;gap: 0.3em 5%;padding: max(1.3em, 4.5%) 0;}
		.iPoste__layout > * {grid-column: 1 / 2; grid-row: auto; }
		.iPoste__arrow {grid-column: 2 / 3;grid-row: 1 / 5; }

		.iPoste__titre > * {margin-bottom: 0.5em; }
		.iPoste p {font-size: 1em; }
	}



/*
ITEM / Title
Description. */