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

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

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

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



/*
ITEM / Nav square
Navigation avec un carré orange à côté de l'item sélectionné. */
.navSquare {list-style: none;display: flex;flex-direction: column;gap: 0.7em;}
.navSquare li {flex:0 1 auto; display: block; }
.navSquare a {position: relative;display: block;font-size: 1.6em;font-weight: 500;line-height: 1.1;text-transform: uppercase;padding: 0.3em 0.3em 0.3em var(--offsetTabs, 2.5rem);transition: color 0.2s;}
.navSquare a::before {position:absolute;z-index: 0;display:block;content:'';top: 0.2em;height: 1em;left:0;width: 1em;background-color: var(--color-orange); transform: scale(0);transform-origin: bottom left; transition: transform 0.2s var(--ease-cubic);}

	/* Hover */
	.navSquare a:hover {color: var(--color-orange); }
	
	/* Active */
	.navSquare a.active {color: var(--color-orange); }
	.navSquare a.active::before {transform: none; }

	/* Sizes */
	@media (max-width:46rem) {
		.navSquare {gap: 0.3em; }
		.navSquare a {font-size: 1.3em; }
		.navSquare a::before {font-size: 1.3em; }
	}



/*
ITEM / Nav square "look alike".
Très semblable à .navSquare, sauf que c'est une liste avec bullet, sans aucun lien. */
.navSquareLAL {list-style: none;display: flex;flex-direction: column;gap: 2em;}
.navSquareLAL li {position: relative;flex:0 1 auto;display: block;font-size: 1.9em;font-weight: 700;line-height: 1.1;text-transform: uppercase;padding: 0 0 0 1.9em;}
.navSquareLAL li::before {font-size: 0.85em;position:absolute;z-index: 0;display:block;content:'';top: 0;height: 1em;left:0;width: 1em;background-color: var(--color-orange);transform-origin: bottom left;}

	/* On orange */
	.onOrange .navSquareLAL li::before {background-color: var(--color-white); }

	/* Sizes */
	@media (max-width:46rem) {
		.navSquareLAL {gap: 1.2em; }
		.navSquareLAL li {font-size: 1.6em; }
	}



/*
ITEM / Nav underlined
Navigation avec une ligne sous l'item sélectionné. */
.navUnderlined {list-style: none;display: flex;gap: 1.7em;}
.navUnderlined li {flex:0 1 auto; display: block; }
.navUnderlined a {position: relative;display: block;font-size: 1.3em;font-weight: 700;line-height: 1.1;text-transform: uppercase;padding: 0.3em 0;transition: color 0.2s;}
.navUnderlined a::after {position:absolute;z-index: 0;display:block;content:'';bottom: 0;left:0;right: 0;height: 0.15em;background-color: var(--color-orange);transform: scaleX(0);transform-origin: bottom left;will-change: transform;transition: transform 0.3s var(--ease-cubic);}

	/* Hover */
	.navUnderlined a:hover {color: var(--color-orange); }
	
	/* Active */
	.navUnderlined a.active {color: var(--color-orange); }
	.navUnderlined a.active::after {transform: none; }

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

	/* Size */
	@media (max-width:46rem) {
		.navUnderlined {gap: 1.4em; }
		.navUnderlined a {font-size: 1.1em; }
	}



/*
NAV / Pinned Scroll
La navigation qu'on retrouve dans le bloc Pinned Scroll. */
.navPS {container-type: inline-size;list-style: none;width: 100%;display: flex;gap: 1vw;justify-content: space-evenly;}
.navPS li { }
.navPS a {display: block;font-size: 0.85em;font-size: min(1.1em, 1.9cqw); font-weight: 500;text-transform: uppercase;line-height: 1;color: var(--color-white);opacity: 0.4;will-change: opacity;transition: opacity 0.2s;}

	/* Hover + active */
	.navPS a:hover, 
	.navPS a.active {opacity: 1; }



/*
NAV / Icons topbar
Icon et label inline avec stroke entre chaque item. */
.navIconTB {list-style: none; width: 100%; }
.navIconTB li {display: block; }
.navIconTB li + li {border-top: 1px solid currentColor; }
.navIconTB a {display: flex;align-items: center;gap: 1em;padding: 0.7em 0;transition: opacity 0.2s; }
.navIconTB a .svgIcon {font-size: 3.3em; }

	/* Hover */
	.navIconTB a:hover {opacity: 0.7; }



/*
NAV / Nav panel topbar
Stacked avec un petit titre. */
.navPanelTB {list-style: none; width: 100%; }
.navPanelTB li {display: block; }
.navPanelTB a {display: inline-block;text-wrap: balance;padding: 0.4em 0;transition: color 0.2s;}

	/* Hover */
	.navPanelTB a:hover,
	.navPanelTB a.active {color: var(--color-orange); }

	/*
	ALT :
	Larger. */
	.navPanelTB--lg {font-size: 1.5em; }
	.navPanelTB--lg a {padding: 0.3em 0; }



/*
NAV / Filter panel search topbar
Pour filtrer la liste de résultats de la recherche. */
.navFiltersTB {font-size: 1.5em;min-width: 11em;list-style: none;width: 100%;}
.navFiltersTB li {display: block;}
.navFiltersTB a {display: flex;justify-content: space-between;gap: 1em;padding: 0.3em 0;transition: color 0.2s;}
.navFiltersTB__qty {display: block;font-size: 0.75em;font-weight: 700;padding-top: 0.15em;}

	/* Hover */
	.navFiltersTB a:hover,
	.navFiltersTB a.active {color: var(--color-gray); }



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

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

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



/*
ITEM / Card link
Card with image, button over the image and content under.
Utile dans un carousel de gamme de produits. */
.iCard { }
.iCard__layout {display: grid;grid-template-columns: 1fr;grid-template-rows: auto auto 1fr;gap: 1.5em;}
.iCard__img {grid-column: 1 / 2; grid-row: 1 / 3; overflow: hidden; }
.iCard__btn {grid-column: 1 / 2; grid-row: 2 / 3; justify-self: end; }
.iCard__ctn {grid-column: 1 / 2; grid-row: 3 / 4; }

	/* Hover, uniquement si c'est un lien. */
	.iCard a {display: block; height: 100%; transition: transform 0.3s var(--ease-cubic); }
	.iCard a:hover {transform: scale(0.97); }

	/*
	ALT :
	Fixed size. */
	.iCard__img--fixedSize {aspect-ratio:var(--width, 438) / var(--height, 285); overflow: hidden; }
	.iCard__img--fixedSize > * {width: 100%; height: 100%; object-fit: cover; }



/*
ITEM / Card video
Card with image, play button over the image and content under.
Utile dans un carousel de videos. */
.iCardVideo { }
.iCardVideo__layout {display: grid;grid-template-columns: 1fr;grid-template-rows: auto auto 1fr;gap: 1.5em;}
.iCardVideo__img {grid-column: 1 / 2;grid-row: 1 / 2;position: relative;overflow: hidden;}
.iCardVideo__img > * {opacity:0.5;}
.iCardVideo__img::before {position:absolute;z-index: -1;display:block;content:'';inset:0;background:var(--color-black);}
.iCardVideo__play {grid-column: 1 / 2; grid-row: 1 / 2; align-self: center; justify-self: center; }
.iCardVideo__ctn {grid-column: 1 / 2; grid-row: 2 / 3; }

	/* Hover, uniquement si c'est un lien. */
	.iCardVideo a {display: block; height: 100%; will-change: transform; transition: transform 0.3s var(--ease-cubic); }
	.iCardVideo a:hover {transform: scale(0.97); }



/*
ITEM / Card project
Card with content at left and a carousel of images at right.
Utile pour le carousel de projets. */
.iCardProject {--captionSpacing:2em; --espacement: 4.5vw; }
.iCardProject__layout {background: var(--color-white);padding: var(--espacement);display: flex;align-items: center;gap: calc(0.8 * var(--espacement)) var(--espacement);width: 100%;}
.iCardProject__cCtn {flex:1 1 auto; width: 100%; }
.iCardProject__cCarousel {flex:0 0 auto; width: 56%; }

.iCardProject__header {margin-bottom: 1.5em; }
.iCardProject__ctn { }
.iCardProject__carousel {position: relative; }
.iCardProject__nav {position: absolute; z-index: 2; bottom: var(--captionSpacing); left: 0; }
.iCardProject__images { }
.iCardProject__image {overflow: hidden;width: 100%;position: relative;padding-bottom: var(--captionSpacing);}
.iCardProject__image figcaption {margin: 0;position: absolute;bottom: 0;height: var(--captionSpacing);color: var(--color-orange);display: flex;align-items: center;}

	/* 
	CAROUSEL */
	.iCardProject__images.jsCarouselStd {flex-wrap: nowrap; }

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

	/* Big screens */
	@media (min-width:125rem) {
		.iCardProject {--espacement: 5.625em; }
	}

	/* Stacked */
	@media (max-width:62rem) {
		.iCardProject {--espacement: var(--width-std); }
		.iCardProject__layout {flex-direction: column; }
		.iCardProject__cCarousel {order:-1; width: 100%; }
	}



/*
ITEM / Card logo
Card with logo in a white background with a caption under.
Utile pour le carousel de logos. */
.iCardLogo { }
.iCardLogo__layout { }
.iCardLogo__logo {background: var(--color-white);padding: 9%;aspect-ratio: 1.3;display: flex;align-items: center;}
.iCardLogo__caption {margin-top: 1em; }



/*
ITEM / Card product
Images dans un background gris pâle, et nom du produit. */
.iCardProduct { }
.iCardProduct__layout { }
.iCardProduct__cImg {background: var(--color-gray-medium);padding: 7% 10%;display: flex;align-items: center;}
.iCardProduct__cName {margin-top: 1em; }
.iCardProduct__img {background: var(--color-white);height: 100%;width: auto;min-width: 100%;padding: 6%;aspect-ratio: 0.8;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.iCardProduct__img > * {width: 100%; height: 100%; object-fit: contain; }
.iCardProduct__name { }

	/* Hover, uniquement si c'est un lien. */
	.iCardProduct a {display: block; height: 100%; will-change: transform; transition: transform 0.3s var(--ease-cubic); }
	.iCardProduct a:hover {transform: scale(0.97); }

	/* Spacing */
	@media (max-width:46rem) {
		.iCardProduct__cName {margin-top: 0.5em; }
	}



/*
ITEM / Card product inline
Affichage alternatif de la carte de produit affichée sur une seule ligne au lieu d'une box.
On affiche aussi la catégorie et une description plus complète. C'est utile dans la liste des résultats de recherche. */
.iCardProductInline {width: 100%; border-top: 1px solid currentColor; padding: 1.5em 0; }
.iCardProductInline:last-child {border-bottom: 1px solid currentColor; }
.iCardProductInline__layout {display: flex;gap: 4%;}
.iCardProductInline__cImg {flex:0 0 auto;width: max(7em, 20%);}
.iCardProductInline__cCtn {flex:1 1 auto; align-self: center; }

	/* Hover, uniquement si c'est un lien. */
	.iCardProductInline a {display: block; height: 100%; will-change: transform; transition: transform 0.3s var(--ease-cubic); }
	.iCardProductInline a:hover {transform: scale(0.97); }

.iCardProductInline__img {background: var(--color-white);padding: 6%;aspect-ratio: 0.8;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.iCardProductInline__img > * {width: 100%; height: 100%; object-fit: contain; }
.iCardProductInline__category { }
.iCardProductInline__name {margin-top: 1em; }
.iCardProductInline__desc { }

	/* Spacing */
	@media (max-width:46rem) {
		.iCardProductInline__name {margin-top: 0.7em; }
	}



/*
ITEM / Card document
Document téléchargeable dans la section des ressources avec titre, icône, type, date, etc. */
.iCardDocu {--lineThickness:0.6em; aspect-ratio: 2; background: var(--color-white); }
.iCardDocu__layout {position: relative;min-height: 100%;display: grid;grid-template-columns: 9% auto 1fr auto 7%;grid-template-rows: 13% 1fr auto 9%;}
.iCardDocu__layout::before {position:absolute;z-index:1;display:block;content:'';bottom:0;height: 2.5em;left:0;width: var(--lineThickness);background: var(--color-orange);transition: height 0.2s var(--ease-cubic);}
.iCardDocu__name {grid-column: 2 / 4;grid-row: 2 / 3;margin: 0.2em 2em 1em 0;}
.iCardDocu__icon {grid-column: 4 / 5; grid-row: 2 / 3; }
.iCardDocu__icon > * {font-size: 3.5em; color: var(--color-orange); margin: -0.2em -0.25em; }
.iCardDocu__type {grid-column: 2 / 3;grid-row: 3 / 4;align-self: end;text-transform: uppercase;}
.iCardDocu__date {grid-column: 3 / 4;grid-row: 3 / 4;align-self: end;font-size: 0.9em;text-align: right;margin: 0 2em 0 1em;}
.iCardDocu__download {grid-column: 4 / 5; grid-row: 3 / 4; align-self: end; }
.iCardDocu__download > * {font-size: 2.7em;margin: -0.25em -0.15em;}

	/*
	ALT :
	Image. */
	.iCardDocu--img { }
	.iCardDocu--img .iCardDocu__layout {grid-template-rows:1em auto 1fr 1em; }
	.iCardDocu--img .iCardDocu__name {grid-column: 2 / 5; }
	.iCardDocu--img .iCardDocu__img {position: absolute;left: 0;right: 0;grid-column: 1 / 6;grid-row: 3 / 5;height: 100%;overflow: hidden;}
	.iCardDocu--img .iCardDocu__img * {width: 100%; height: 100%; object-fit: cover; }

	/* Si toute la card est un lien */
	.iCardDocu > a {display: block; height: 100%; }
	.iCardDocu > a .iCardDocu__download {transition: color 0.2s; }
	.iCardDocu > a:hover .iCardDocu__download {color: var(--color-orange); }
	.iCardDocu > a:hover .iCardDocu__layout::before {height: 100%; }



/*
ITEM / Card représentant
Représentant dans la liste des représentants avec les informations sur celui-ci.
Ça ressemble quand même beaucoup à .iCardDocu. */
.iCardRepresentant {--lineThickness:0.6em; container-type: inline-size; }
.iCardRepresentant__layout {position: relative;min-height: 100%;display: grid;grid-template-columns: 9cqw 1fr auto 7cqw;grid-template-rows: 1em 6cqw auto 1fr auto 2cqw;gap: 4cqw 0;}
.iCardRepresentant__layout::before {position:absolute;z-index:1;display:block;content:'';bottom:0;height: 2.5em;left:0;width: var(--lineThickness);background: var(--color-orange);transition: height 0.2s var(--ease-cubic);}
.iCardRepresentant__layout::after {grid-column: 1 / -1; grid-row: 2 / 7; display: block; content: ''; z-index: -1; background: var(--color-white); }
.iCardRepresentant__province {grid-column: 1 / -1; }
.iCardRepresentant__name {grid-column: 2 / 4;grid-row: 3 / 4; }
.iCardRepresentant__infos {grid-column: 2 / 4;grid-row: 4 / 5; }
.iCardRepresentant__agence {color: var(--color-orange);text-transform: uppercase;font-size: 0.85em;font-weight: 700;margin-bottom: 1em; }
.iCardRepresentant__phone { }
.iCardRepresentant__email { }
.iCardRepresentant__ville {grid-column: 2 / 3;grid-row: 5 / 6;font-size: 0.85em;text-transform: uppercase;align-self: end;}
.iCardRepresentant__location {grid-column: 3 / 4;grid-row: 5 / 6;font-size: 2.5em;margin-right: -0.4em;margin-bottom: -0.4em;color: var(--color-orange);}

	/* Si l'icone de location est un lien */
	a.iCardRepresentant__location {display: block; transition: color 0.2s; }
	a.iCardRepresentant__location:hover {color: var(--color-base); }



/*
ITEM / Card avantage
Avantage avec image, titre et description.
Utile pour la liste d'avantage dans la page carrière. */
.iCardAvantage {container-type: inline-size; }
.iCardAvantage__layout {display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 0.75em; border:0.15em solid var(--color-white);background: var(--color-orange);padding:8% 10%;text-align: center;height: 100%; }
.iCardAvantage__img {height: 47cqw;width: auto;aspect-ratio: 1;margin: 0 auto;display: flex;align-items: center;justify-content: center;}
.iCardAvantage__img > * {width: 100%; height: 100%; object-fit: contain; }
.iCardAvantage__title {margin-top: 0.5em;}
.iCardAvantage__ctn { }



/*
ITEM / Card poste
C'est une card, mais ça ressemble plus à un gros lien.
Petite ligne orange en bas à gauche, titre et icône de flèche vers la droite. */
.iCardPoste {--lineThickness:0.6em; background: var(--color-white); }
.iCardPoste__layout {position: relative;min-height: 100%;padding: 4% 5%;display: flex;align-items: center;gap: 3%;}
.iCardPoste__layout::before {position:absolute; z-index:1; display:block; content:''; bottom:0; height:2em; left:0; width: var(--lineThickness); background: var(--color-orange); transition: height 0.2s var(--ease-cubic); }
.iCardPoste__title {flex:1 1 auto; }
.iCardPoste__title > * {min-height: 2.2em; display: flex; align-items: center; }
.iCardPoste__icon {flex:0 0 auto; font-size: 4em; color: var(--color-orange); margin-right: -0.28em; }

	/* Si toute la card est un lien */
	.iCardPoste > a {display: block; height: 100%; }
	.iCardPoste > a .iCardPoste__icon {transition: transform 0.2s var(--ease-cubic); }
	.iCardPoste > a:hover .iCardPoste__icon {transform: translateX(15%); }
	.iCardPoste > a:hover .iCardPoste__layout::before {height: 100%; }

	/* Sizes */
	@media (max-width:46rem) {
		.iCardPoste__layout {padding: 6% 6% 6% 8%; }
		.iCardPoste__title > * {font-size: 1.3em; }
		.iCardPoste__icon {font-size: 3em; }
	}



/*
ITEM / Accordion */
.iAccordion {--espacementV: 1.5em; --espacementH: 2.5em; --spacingPlusMinus: 2em; --lineThickness:0.6em; line-height: 1; background: var(--color-white); }
.iAccordion__top {position: relative; }
.iAccordion__top::before {position:absolute; z-index:0; display:block; content:''; bottom:0; height: 2em; left:0; width: var(--lineThickness); background: var(--color-orange); transition: height 0.2s var(--ease-cubic); }
.iAccordion__trigger {display: block;position: relative;padding: var(--espacementV) calc(var(--spacingPlusMinus) + var(--espacementH)) var(--espacementV) var(--espacementH);transition: color 0.2s;}
.iAccordion__title {color: var(--color-orange); }
.iAccordion__details {display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-cubic); position: relative;}
.iAccordion__details::before {position:absolute; z-index:0; display:block; content:''; top: 0; bottom:0; left:0; width: var(--lineThickness); background: var(--color-orange); }
.iAccordion__cell {overflow: hidden; min-height: 0; }
.iAccordion__ctn {padding: 0 calc(var(--spacingPlusMinus) + var(--espacementH)) var(--espacementV) var(--espacementH); }

/* + and - icon */
.iAccordion__trigger::before,
.iAccordion__trigger::after {position:absolute;display:block;content:" ";right: calc(0.75 * var(--espacementH)); top:50%;transform-origin: 50% 50%;transform: translate(0, -50%);background: var(--color-orange);width: 1.5em;height: 3px;transition: transform 0.4s var(--ease-cubic);will-change: transform;}
.iAccordion__trigger::after {transform: translate(0, -50%) rotate(90deg);}

/* Separator */
.iAccordion + .iAccordion {margin-top: 1em; }

	/* 
	STATE / Hover. */
	.iAccordion__trigger:hover { }
	.iAccordion__top:has(.iAccordion__trigger:hover)::before {height: 100%; }

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

	/*
	ALT :
	Transparent.
	Utile pour les régions dans la liste des représentants. */
	.iAccordion--trs {--espacementV: 2.5em; --espacementH: 3.5em; --spacingPlusMinus: 2.5em; background: transparent;border-top: 0.2em solid var(--color-orange);border-bottom: 0.2em solid var(--color-orange); }
	.iAccordion--trs .iAccordion__top::before {display: none; }
	.iAccordion--trs .iAccordion__trigger {padding-left: 0; }
	.iAccordion--trs .iAccordion__details::before {display: none; }
	.iAccordion--trs .iAccordion__ctn {padding: 0 0 calc(2 * var(--espacementV)) 0; }
	.iAccordion--trs + .iAccordion--trs {margin-top: 2em; }

		/* Spacing */
		@media (max-width:46rem) {
			.iAccordion--trs {--espacementV: 1.5em; --espacementH: 2em; --spacingPlusMinus: 2em; }
		}



/*
ITEM / Text with icon
Icon at the side of a text, also useful for links. */
.iTextIcon {display: inline;position: relative;font-size: 0.85em;font-weight: 700;}
.iTextIcon__icon {position: absolute;display: block;top: -0.35em;right: -1.1em;font-size: 2.8em;color: var(--color-orange);}
.iTextIcon__text {padding: 0.5em 0;}



/*
ITEM / Named icon
Grosse icône avec le titre en dessous.. */
.iNamedIcon {text-align: center; }
.iNamedIcon__icon {width: min(100%, 17em);margin: auto;}
.iNamedIcon__label {display: block; margin-top: 0.9em; }
.iNamedIcon__icon * {aspect-ratio: 1; }



/*
ITEM / Round icon
Icône et titre dans un gros bouton rond pour la recherche dans les ressources. */
.iRoundIcon {text-align: center; border: 0.1em solid currentColor; border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 5%; container-type:inline-size; }
.iRoundIcon__icon {flex:0 0 auto; display: block; height: 57%; margin:0 auto; width: 40%; color: var(--color-orange); display: flex; align-items: flex-end; }
.iRoundIcon__label {flex:0 0 auto; display: block; font-size: 8.1cqw; font-weight: 700; margin: 0; padding: 0 10%; }

	/* If it's a link... */
	a.iRoundIcon {transition: background-color 0.2s, color 0.2s;}
	a.iRoundIcon .iRoundIcon__label {transition: color 0.2s; }
	a.iRoundIcon:hover {background-color: var(--color-gray); color: var(--color-white); }



/*
ITEM / Timeline years
Liste d'années inline pour un carousel.
::before = ligne verticale sous l'année.
::after = ligne séparatrice entre les éléments. */
.iTimelineYear {--underSpacing:1.8rem; --yearHeight:1.6rem; width: calc(5.5em + 9vw); position: relative; pointer-events: none; }
.iTimelineYear::after {position: absolute; z-index: 0; display: block; content:''; bottom: calc(0.5 * var(--underSpacing)); left: 3.1em; right: 0; height: 1px; background: var(--color-gray-medium-dark);  }
.iTimelineYear:last-child::after {display: none; }
.iTimelineYear__year {line-height: 1; height: var(--yearHeight); box-sizing: content-box; pointer-events: auto; cursor: pointer; position: relative; display: inline-block; font-size: 1.25em; font-weight: 700; padding-bottom: var(--underSpacing); color: var(--color-gray-medium-dark); transition: color 0.3s; }
.iTimelineYear__year::before {position:absolute; z-index:0; display:block; content:''; bottom: 0; top: var(--yearHeight); left: 50%; width: 0.3em; transform: translateX(-50%)  scale(0.4); background:var(--color-gray-medium-dark); will-change: transform; transition: transform 0.3s var(--ease-cubic), color 0.3s; }

	/* Hover */
	.iTimelineYear__year:hover {color: var(--color-orange); }
	.iTimelineYear__year:hover::before {transform: translateX(-50%) scale(0.7); }

	/* Is selected */
	.iTimelineYear.is-selected { }
	.iTimelineYear.is-selected .iTimelineYear__year {color: var(--color-orange); }
	.iTimelineYear.is-selected .iTimelineYear__year::before {background-color: var(--color-orange); transform: translateX(-50%) scale(1); }



/*
ITEM / Title
Description. */