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

/*
ITEM / Header with icon
Icone wood a gauche, titre à droite. */
.iHeadIcon {display: flex; }
.iHeadIcon + * {margin-top: calc(0.5 * var(--base-spacing)); }
.iHeadIcon__icon {flex: 0 0 auto;font-size: 4.5em;margin: -0.2em 0.07em -0.2em -0.07em;}
.iHeadIcon__title { }

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

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



/*
ITEM / Header centered
Titre, sous-titre.
Voir le bloc de listing de produits en carousel. */
.iHeadCentered {text-align: center; }
.iHeadCentered + * {margin-top: calc(0.5 * var(--base-spacing)); }
.iHeadCentered__title { }
.iHeadCentered__ctn {margin-top: 1em; }



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

	/* Left and right */
	.navArrows__item--left { }
	.navArrows__item--right { }



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {--spacing: 0.1em;list-style: none;font-size: 2.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: opacity 0.2s;}

	/* Hover */
	.rs li a:hover {opacity: 0.5; }

	/*
	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: -0.3em;}



/*
ITEM / Slide produit
Image, bouton, nom du produit.
Utile dans le carousel de produits. */
.iSlideProduit { }
.iSlideProduit__animScale { }
.iSlideProduit__layout {display: flex;flex-direction: column;align-items: center;}
.iSlideProduit__img {background-color: var(--color-white);overflow: hidden;align-self: normal;}
.iSlideProduit__btn { }
.iSlideProduit__btn .btnIcon {margin-top: -0.5em; }
.iSlideProduit__name {margin-top: 1em;text-align: center;}

	/* Hover, uniquement si c'est un lien. */
	.iSlideProduit a {display: block;text-decoration: none;height: 100%;}
	.iSlideProduit a .iSlideProduit__img img {transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
	.iSlideProduit a .iSlideProduit__btn {opacity: 0; transition: opacity 0.3s; }
	.iSlideProduit a .iSlideProduit__name {transform: translateY(-1.5em); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

	.iSlideProduit a:hover .iSlideProduit__img img {transform: scale(1.05); }
	.iSlideProduit a:hover .iSlideProduit__btn {opacity: 1; }
	.iSlideProduit a:hover .iSlideProduit__name {transform: none; }

	/* Name position */
	@media (max-width:62rem) {
		.iSlideProduit__btn {display: none; }
		.iSlideProduit__name {margin-top: 1em;}

		.iSlideProduit a .iSlideProduit__name {transform: none; transition: none; }
	}



/*
ITEM / Slide experience
Image, nom et description.
Utile dans le carousel d'expérience. */
.iSlideExp { }
.iSlideExp__layout {display: flex;flex-direction: column;gap: 1.5em;}
.iSlideExp__img {height: var(--imageHeight);}
.iSlideExp__name {padding: 0 calc(0.7 * var(--radius));}
.iSlideExp__desc {padding: 0 calc(0.7 * var(--radius));max-width: 25em;}

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

	.iSlideExp a:hover .iSlideExp__img img {transform: scale(1.05); }



/*
ITEM / Progress bar
Fausse scroll bar pour montrer la progression dans les carousels. */
.progressBar {position: relative;width: 100%;border-bottom: 1px solid var(--color-base);height: 0.5em;overflow: hidden;}
.progressBar__progression {position: absolute;top: 0;bottom: 0;left: 0;width: 0%;background-color: var(--color-base);}



/*
ITEM / Card
Big image at top, content at bottom with category, date, title and btnIcon. */
.iCard {width: var(--imageWidth, 100%); }
.iCard__animate { }
.iCard__layout { }
.iCard__img {height: var(--imageHeight);margin-bottom: 1.5vw;}
.iCard__img * {height: 100%; }
.iCard__ctn {display: grid;grid-template-columns: auto auto auto 1fr;grid-template-rows: auto auto;gap: 1vw 2vw;}
.iCard__category {grid-column: 1 / 2; grid-row: 1 / 2; }
.iCard__date {grid-column: 1 / 2; grid-row: 2 / 3; }
.iCard__separator {grid-column: 2 / 3;grid-row: 1 / 3;width: 1px;height: 100%;margin: 0;border:none;background-color: var(--color-gray);}
.iCard__name {grid-column: 3 / 4;grid-row: 2 / 3;align-self: center;}
.iCard__btn {grid-column: 4 / 5;grid-row: 2 / 3;align-self: center;}

	/* Hover image */
	.iCard__img a {display: block;text-decoration: none;height: 100%;}
	.iCard__img a img {transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
	.iCard__img a:hover img {transform: scale(1.05); }

	/* Sizes and stacked */
	@media (max-width:62rem) {
		.iCard__img {margin-bottom: 5vw;}
		.iCard__ctn {display: grid; grid-template-columns: auto; grid-template-rows: auto auto; gap:3vw; padding: 0 1.5em; }
		.iCard__category {grid-column: 1 / -1; grid-row: 1 / 2; }
		.iCard__date {grid-column: 1 / -1; grid-row: 2 / 3; }
		.iCard__separator {display: none; }
		.iCard__name {grid-column: 1 / 2; grid-row: 3 / 4; }
		.iCard__btn {grid-column: 2 / 3; grid-row: 3 / 4; }
	}

	/* 4k */
	@media (min-width:125rem) {
		.iCard__img {margin-bottom: 2.5em; }
		.iCard__ctn {gap: 1.25em 2.5em; }
	}



/*
ITEM / Accordion
Voir main.js pour les projets qui utilisent ceci. */
.iAccordion {--espacementV: 3em;--espacementH: 0px;--spacingPlusMinus: 6em; --widthFatLine:3em; position: relative;line-height: 1; border-top: 1px solid var(--color-gray); border-bottom: 1px solid var(--color-gray);}
.iAccordion + .iAccordion {border-top:none;}
.iAccordion__top {padding-right: 2em;}
.iAccordion__trigger {display: block;position: relative;padding: var(--espacementV) calc(var(--spacingPlusMinus) + var(--espacementH) + calc(1.6 * var(--widthFatLine))) var(--espacementV) var(--espacementH); }
.iAccordion__movingTitle {transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.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 calc(var(--spacingPlusMinus) + var(--espacementH)) var(--espacementV) calc(1.6 * var(--widthFatLine));}

/* Background, + and - icon: same size as btnIcon */
.iAccordion__trigger::before,
.iAccordion__trigger::after {--bg-color: currentColor;--width:35%;--thickness: 0.17em;position:absolute;z-index: 0;display:block;content:" ";right: var(--espacementH);top:50%;transform-origin: 50% 50%;transform: translate(0, -50%);background: linear-gradient(to right, transparent calc(50% - (0.5 * var(--width))), var(--color-white) calc(50% - (0.5 * var(--width))), var(--color-white) calc(50% + (0.5 * var(--width))), transparent calc(50% + (0.5 * var(--width)))) center center / 100% var(--thickness) no-repeat, var(--bg-color);width: 3.7em;height: 3.7em;border-radius: 50%;}
.iAccordion__trigger::after {--bg-color:transparent; transform: translate(0, -50%) rotate(90deg); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);will-change: transform;}

/* Fat line at left when hovered + opened */
.iAccordion::before {position: absolute;z-index: 0;display: block;content: '';top: 0;bottom: 0;left: 0;width: var(--widthFatLine);background: var(--color-black); border-radius: 0.5em; clip-path: inset(0% 100% 0% 0%); transition: clip-path 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

	/* 
	STATE / Hover. */
	.iAccordion:has(.iAccordion__trigger:hover)::before,
	.iAccordion.open::before {clip-path: inset(0% 0% 0% 0%); }
	.iAccordion__trigger:hover .iAccordion__movingTitle,
	.iAccordion.open .iAccordion__movingTitle {transform: translateX(calc(1.6 * var(--widthFatLine))); }

	/* 
	STATE / On. */
	.iAccordion.open .iAccordion__details {grid-template-rows: 1fr; }
	.iAccordion.open .iAccordion__trigger::after {transform: translate(0, -50%) rotate(180deg);}

	/*
	On dark. */
	.onDark .iAccordion {border-color: var(--color-gray-on-dark); }
	.onDark .iAccordion::before {--color-black: var(--color-white); }
	.onDark .iAccordion__trigger::before,
	.onDark .iAccordion__trigger::after {--color-white: var(--color-black); }

	/*
	ALT :
	L'accordion est un lien uniquement.
	Différence entre accordeon et lien est l'icone à droite qui n'est pas affiché au début. */
	.iAccordion--link { }
	.iAccordion--link .iAccordion__trigger::before,
	.iAccordion--link .iAccordion__trigger::after {opacity: 0; transition: opacity 0.2s;}
	.iAccordion--link .iAccordion__trigger:hover::before,
	.iAccordion--link .iAccordion__trigger:hover::after {opacity: 1;}

	/* Sizes */
	@media (max-width:62rem) {
		.iAccordion {--espacementV: 2em;--spacingPlusMinus: 4em; --widthFatLine:2em; }
		.iAccordion__top {padding-right: 0;}

		/* Background, + and - icon */
		.iAccordion__trigger::before,
		.iAccordion__trigger::after {--thickness:0.12em; width: 3em; height: 3em; }
	}

	/* Sizes */
	@media (max-width:46rem) {
		.iAccordion {--espacementV: 1.5em;--spacingPlusMinus: 4em; --widthFatLine:1.5em; }
		.iAccordion__ctn {padding: 0 calc(var(--espacementH)) var(--espacementV) calc(1.6 * var(--widthFatLine)); }
	}



/*
LINKS LIST / Links with icon + label
Affiche l'icone a gauche, le texte a côté. */
.iLinksIWL {display: flex;flex-direction: column;align-items: flex-start;gap: 0.2em 5em;}
.iLinksIWL__item {display: inline-flex;align-items: center;font-weight: 500;font-size: 1.4em;line-height: 1.1;color: var(--color-base);text-decoration: none;transition: opacity 0.2s;}
.iLinksIWL__icon {font-size: 2em;z-index: 1;display: block;flex: 0 0 auto;margin-left: -0.1em;}
.iLinksIWL__label {z-index: 1;display: block;flex: 1 1 auto;padding-left: 0.3em;text-decoration: underline;}

	/* Hover */
	.iLinksIWL__item:hover {opacity:0.5; }

	/* On dark */
	.onDark .iLinksIWL__item {color: var(--color-white); }



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



/*
ITEM / Round number
Number dans un rond. */
.iRoundNumber {font-size: 0.75em;font-weight: 700;width: 1.75em;height: 1.75em;text-indent: -0.1em;display: inline-flex;align-items: center;justify-content: center;vertical-align: bottom;margin-bottom: 0.2em;border-radius: 50%;color: var(--color-black);background: var(--color-beige);}



/*
ITEM / Mentions
Box avec icone, titre, number et btn. */
.iBoxMentions {border-radius: var(--radius);overflow: hidden;background-color: var(--color-white);height: 100%;padding: 8% 9%;display: grid;grid-template-columns: 1fr auto;grid-template-rows: 1fr auto;gap: 1.5em;}
.iBoxMentions__header {grid-row: 1 / 2; grid-column: 1 / -1; }
.iBoxMentions__number {font-size: 5em;line-height: 0.8;font-weight: 700;align-self: center;letter-spacing: -0.05em;}
.iBoxMentions__value {grid-row: 2 / 3; grid-column: 1 / 2; align-self:end; }
.iBoxMentions__btn {grid-row: 2 / 3; grid-column: 2 / 3; align-self:end; }

	/*
	ALT :
	Black BG. */
	.iBoxMentions--dark {background-color: var(--color-black); }

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

	/* Min height pour la box */
	@media (max-width: 46rem) {
		.iBoxMentions {aspect-ratio: 1 / 0.63; }
	}



/*
ITEM / Icon with text
Icone un peu plus grosse a gauche, texte dans le style d'un petit titre. */
.iIconText {display: flex; gap: 0.5em; }
.iIconText__icon {flex:0 0 auto; font-size: 5em; margin-top: -0.1em; margin-left: -0.2em; }
.iIconText__title {flex:1 1 auto;margin-top: 0.4em;}
.iIconText__title > * {font-size: 1.4em;font-weight: 400;}

	/* Size */
	@media (max-width: 62rem) {
		.iIconText__icon {font-size: 4em; }
		.iIconText__title > * {font-size: 1.15em; }
	}



/*
ITEM / Gros titre
Gros titre qui est defilant. */
.iGrosTitre {display: block;font-size: calc(4.2em + 4.2vw);line-height: 1.2;font-weight: 400;white-space: nowrap;position: relative;}

	/* Size */
	@media (max-width:62rem) {
		.iGrosTitre {font-size: calc(1.5em + 6vw); }
	}



/*
ITEM / Title
Description. */