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

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

	/*
	ALT :
	Centered. */
	.iHead--centered {text-align: center; }
	.iHead--centered p:not([class]) {font-size: 1.2em;line-height: 1.5;max-width: 55em;margin: calc(0.25 * var(--base-spacing-top)) auto 0 auto;text-wrap: balance;}



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

	/* 2 cols layout for the footer */
	.iFoot__layout2C {display: flex; gap: 6%; }
	.iFoot__ctn {flex:1 1 auto;align-self: center;}
	.iFoot__ctn p:not([class]) {font-size: 1.2em; line-height: 1.5; font-weight: bold; text-wrap: balance;}
	.iFoot__btn {flex:0 0 auto; }

	/* Stacked */
	@media (max-width: 62rem) {
		.iFoot__layout2C {flex-direction: column; gap: calc(0.5 * var(--base-spacing-top)); text-align: center; }
	}



/*
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 { }

	/* Hover, remettre l'opacity car on anime seulement le transform. */
	.navArrows__item--left .svgIcon,
	.navArrows__item--right .svgIcon {transition: transform 0.3s; will-change: transform;}
	
	.navArrows__item--left:hover .svgIcon {transform: translate(-60%, -50%); }
	.navArrows__item--right:hover .svgIcon {transform: translate(-40%, -50%); }

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



/*
ITEM / Service
Icone, titre simple (paragraph gras) et description pour un service.
Utilisé dans le carousel de services. */
.iService { }
.iService__layout {display: flex; flex-direction: column; gap: 1em; }
.iService__icon {height: 4.5em; width: auto; }
.iService__icon * {height: 100%; width: auto; }
.iService__ctn { }

.iService__ctn p {text-wrap: balance; }



/*
ITEM / Secteur
Image, titre simple (paragraph gras) et description pour un secteur.
Utilisé dans le carousel de secteurs. */
.iSecteur { }
.iSecteur__layout {display: flex; flex-direction: column; gap: var(--imageSpacing, 1.5em); }
.iSecteur__image {width: 100%;height: var(--imageHeight); }
.iSecteur__image * {width: 100%;height: 100%;object-fit: cover; }
.iSecteur__ctn { }

.iSecteur__ctn p {text-wrap: balance; }



/*
ITEM / Timeline item
Year in big, red circle in pseudo element, text content */
.iTimelineCard { }
.iTimelineCard__layout {display: flex; flex-direction: column; gap: var(--ctnSpacing, 1.5em); }
.iTimelineCard__year {height: var(--yearHeight); position: relative; }
.iTimelineCard__year::after {font-size: 1.8em; position:absolute; z-index:4; display:block; content:''; bottom:0; height: 1em; left:0; width: 1em; border-radius: 50%; background: var(--color-red); transform: translate(0%, 50%); }
.iTimelineCard__ctn { }

	/* Dot size */
	@media (max-width:46rem) {
		.iTimelineCard__year::after {font-size: 1.2em; }
	}



/*
ITEM / Title
Description. */