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

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

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



/*
ITEM / Nav arrows
Navigation pour un carousel. */
.navArrows {--espacementV: 0.5em;--espacementH: 0.5em;margin: calc(-1 * var(--espacementV)) calc(-1 * var(--espacementH));display: inline-flex;align-items: center;}
.navArrows__item {flex: 0 0 auto; padding: var(--espacementV) var(--espacementH); }
.navArrows__left { }
.navArrows__right { }
.navArrows__slideNumbers {margin: 0 1.002em;}

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

	/*
	ALT :
	Vertical alignment on desktop only. */
	.navArrows--verticalDT { }

		@media (min-width:62.01em) {
			.navArrows--verticalDT {flex-direction: column;}
			.navArrows--verticalDT > *:first-child {order:2; }
		}



/*
ITEM / Nav pagination
Navigation de pages. */
.navPagination {--gap: 0.4em;display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--gap));align-items: center;justify-content: center;}
.navPagination__item {flex:0 0 auto; padding: 0 var(--gap); }



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rsCols {display: flex;align-items: center;flex-wrap: wrap;gap: 0.5em 2em;}
.rsCols__title {display: block; flex:0 0 auto; }
.rsCols__rs {flex:1 1 auto; }
.rsCols__rs .rs {margin-left: -0.3em; }
hr + .rsCols {margin-top: 2em; }

.rs {--spacing: 0.05em;list-style: none;font-size: 3em;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;}

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

	/*
	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 / Box
Box with image, medaillon, icon, content. */
.iBox {line-height: 1;display: block;}
.iBox__in {position: relative; height: 100%; display: flex; flex-direction: column;}

/* Image de fond de la section du haut */
.iBox__img {overflow: hidden; }
.iBox__img img {position: relative; z-index: 1; }

/* Medaillon */
.iBox .iMedaillon {position: absolute;z-index: 2;top: -0.5em;left: 0.5em;}

/* Contenu */
.iBox__ctn {flex:1 1 auto; padding: 1.8em 0 1.3em 0;}
.iBox__category {color: var(--color-blue); }

	/* On blue */
	.onBlue .iBox__category {color: var(--color-base-on-dark);}

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

	.iBox .iBox__img a:hover img {transform: scale(1.05); }



/*
ITEM / Box d'image
Image en background qui peut etre un lien.
Contenu centered par-dessus (optionnel). */
.iBoxImg {line-height: 1;display: block;}
.iBoxImg__in {width: 100%; position: relative;}
.iBoxImg__cImg {overflow: hidden; }
.iBoxImg__cCtn {position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.iBoxImg__img { }
.iBoxImg__img img {backface-visibility:hidden; position: relative; z-index: 1; }

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

	@media (hover:hover) {
		.iBoxImg > a:hover .iBoxImg__img img {transform: scale(1.05); }
	}



/*
ITEM / Hexagone
CSS de reference pour faire un hexagone. */
.iHexagon {
	--fillColor: red;
	--size:5em;
	--strokeColor: blue;
	--strokeWidth:0.5em;
	position: relative; width: var(--size); height: calc(0.5774 * var(--size)); background-color: var(--fillColor); margin: calc(0.2887 * var(--size)) 0; border-left: solid var(--strokeWidth) var(--strokeColor); border-right: solid var(--strokeWidth) var(--strokeColor); }
.iHexagon::before,
.iHexagon::after {content: ""; position: absolute; z-index: 1; width: calc(0.7071 * var(--size)); height: calc(0.7071 * var(--size)); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: calc(0.1464466 * var(--size) - var(--strokeWidth)); }
.iHexagon::before {top: calc(-1 * 0.353553 * var(--size)); border-top: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); border-right: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); }
.iHexagon::after {bottom: calc(-1 * 0.353553 * var(--size)); border-bottom: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); border-left: solid calc(1.41421 * var(--strokeWidth)) var(--strokeColor); }



/*
ITEM / Image
Image bien simple dans un carousel. */
.iCarouselImage {width: 100%;}



/*
ITEM / Membre
Inline, image a gauche, titre, details et icones. */
.iMember {--espacementV: 6%;--espacementH: 3%;border-top: 1px solid #ececec;border-bottom: 1px solid #ececec;}
.iMember + .iMember {border-top: 0; }
.iMember__layout {display: flex; margin: 0 calc(-1 * var(--espacementH)); }
.iMember__layout > * {flex:0 0 auto; padding: var(--espacementV) var(--espacementH); }
.iMember__cImg {margin: calc(-0.5 * var(--espacementV)) 0;width: 20%; }
.iMember__cTitle {width: 20%; }
.iMember__cDetails {width: 100%; flex:1 1 auto; }
.iMember__cRS {margin: -0.8em;}
.iMember__cImg .clipHex {margin-left: -6.7%; }

.iMember__cTitle h3 {font-size: 1em; }
.iMember__cTitle h3 + * {margin-top: 0.5em; }

	/* Image over content */
	@media (max-width:62rem) {
		.iMember {--espacementV: 0.75em;--espacementH: 0px; }
		.iMember__layout {flex-direction: column;padding: var(--espacementV) 0;}
		.iMember__layout > * {width: 100%; }
		.iMember__cImg {margin: 0;width: 60%;max-width: 12em; }
	}



/*
ITEM / Membre box
Stacked, image, titre, details et icones. */
.iMemberBox { }
.iMemberBox__layout {display: flex; flex-direction: column; }
.iMemberBox__layout > * {width: 100%; flex:0 0 auto; }
.iMemberBox__cImg {width: 60%;margin-bottom: 1.5em;}
.iMemberBox__cTitle {position: relative; padding-bottom: 1.3em; margin-bottom: 1.2em; }
.iMemberBox__cTitle::after {position:absolute; z-index:1; display:block; content:''; bottom:0; height: 0.1em; left:0; width: 2em; background-color: #fff; }
.iMemberBox__cDetails {flex:1 1 auto; }
.iMemberBox__cRS {margin: -0.8em; margin-top: 0.5em;}
.iMemberBox__cImg .clipHex {margin-left: -6.7%; }

.iMemberBox__cTitle h3 {font-size: 1em; }
.iMemberBox__cTitle h3 + * {margin-top: 0.5em; }

	/* Image width */
	@media (max-width:46rem) {
		.iMemberBox__cImg {width: 60%;max-width: 12em;}
	}



/*
ITEM / Article
Inline, data macaron, titre, auteur, liens read more. */
.iArticle {--espacementV: 3.5%;--espacementH: 3%;border-top: 1px solid #fff;border-bottom: 1px solid #fff;}
.iArticle + .iArticle {border-top: 0; }
.iArticle__layout {display: grid;gap: var(--espacementV);padding: var(--espacementH) 0;grid-template-columns: auto 1fr auto;}
.iArticle__cMedaillon {grid-row: 1 / 2; grid-column: 1 / 2; }
.iArticle__cTitle {grid-row: 1 / 2;grid-column: 2 / 3;max-width: 50em;}
.iArticle__cLink {grid-row: 1 / 2; grid-column: 3 / 4; align-self: center;text-align: right;}

.iArticle .iMedaillon {margin-bottom: 0.7em;}

.iArticle__author {position: relative; padding-left: 3em; }
.iArticle__author::before {position:absolute; z-index:0; display:block; content:''; top: 0.45em; height: 1px; left: 0; width: 1.8em; background-color: currentColor; }

	/* Link without label */
	@media (max-width:62rem) {
		.iArticle {--espacementV: 5%;--espacementH: 4%;}
		.iArticle__cLink .btn__label {display: none; }
		.iArticle__cLink .btn__label + .btn__icon {margin-left: 0; }
	}

	/* Spacing */
	@media (max-width:46rem) {
		.iArticle {--espacementV: 6%;--espacementH: 5%;}
	}



/*
ITEM / Document
Dans une grille, titre, details, nom de l'auteur, boutons pour lire plus ou telecharger. */
.iDocument {outline: 1px solid #ececec;}
.iDocument__layout {padding: 7% 8%; display: flex; flex-direction: column; height: 100%; }
.iDocument__cHead { }
.iDocument__cCtn {flex:1 1 auto; margin-top: 1em; }
.iDocument__cLinks {display: flex;flex-wrap: wrap;gap: 0.5em 2em;justify-content: space-between;margin-top: 2em;}
.iDocument__cLinks > * { }

.iDocument__author {position: relative; color: var(--color-blue); padding-left: 3em; }
.iDocument__author::before {position:absolute; z-index:0; display:block; content:''; top: 0.45em; height: 1px; left: 0; width: 1.8em; background-color: var(--color-blue); }
.iDocument__link {margin: 0;}



/*
ITEM / Medaillon
Dans le iBox mais aussi dans un page head. */
.iMedaillon {--size: 4.5em;margin: 0;position: relative; z-index: 2; background-color: var(--color-blue);color:#fff;text-align: center;line-height: 1.1;width: var(--size);padding-top: 0.85em;padding-bottom: 0.4em;}
.iMedaillon::after {content: ""; position: absolute; z-index: -1; width: calc(0.7071 * var(--size)); height: calc(0.7071 * var(--size)); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: calc(0.1464466 * var(--size)); bottom: calc(-1 * 0.353553 * var(--size)); }
.iMedaillon__big {display: block;font-size: 1.75em;font-weight: 900;line-height: 1;}

	/* 
	ALT :
	White. */
	.iMedaillon--white {background-color: var(--color-white); color: var(--color-blue); }



/*
ITEM / Gros titre
Gros titre qui est defilant. */
.iGrosTitre {font-size: calc(7em + 7vw);line-height: 1.2;font-weight: 500;text-transform: uppercase;white-space: nowrap;opacity: 0.25;}

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



/*
ITEM / Offset text
Texte plus gros et la 2e ligne du texte est plus a droite. */
.iOffsetText {font-size: 1.6em;font-weight: 400;line-height: 1.18;}
.iOffsetText__line {display: block; }
.iOffsetText__lineOffset {display: block; padding-left: 8%; }

	/* Size */
	@media (max-width:62rem) {
		.iOffsetText {font-size: 3.8vw;}
	}

	/* Size, inline and no offset */
	@media (max-width:46rem) {
		.iOffsetText {font-size: 1.6em;}
		.iOffsetText__line {display: inline; }
		.iOffsetText__lineOffset {display: inline; padding-left: 0; }
	}



/*
ITEM / Benefit
Chiffre en gros, titre et lien. */
.iBenefit { }
.iBenefit__layout {display: flex;flex-direction: column; /* Compatibility issues mobile -> gap: 1.3em 0; */ height: 100%;}
.iBenefit__layout > * {flex:0 0 auto; }
.iBenefit__cNumber { }

/* Compatibility issues mobile whit above gap. Padding added. */
/* .iBenefit__cName {flex:1 1 auto;} */
.iBenefit__cName {flex:1 1 auto; padding-top:1.3em; padding-bottom: 1.3em;}
.iBenefit__cLink { }

.iBenefit__number {font-size: 6em;font-weight: 900;line-height: 0.8;}
.iBenefit h3 {font-size: 1.4em; font-weight: 400; line-height: 1.2; }

	/* Make it fit in a smaller viewport */
	@media (max-width:62rem) {
		.iBenefit__number {font-size: 4.2em; }
		.iBenefit h3 {font-size: 1.15em; }
	}

	/* Size */
	@media (max-width:46rem) {
		.iBenefit__number {font-size: 4em; }
		.iBenefit h3 {font-size: 1.3em; }
	}



/*
ITEM / Title
Description. */