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

/*
ITEM / Header
Default head for a block. */
.iHead { }
.iHead + * {margin-top: 2em;}

	/* Smaller */
	@media (max-width:46rem) {
		.iHead + * {margin-top: 1.5em;}
	}



/*
ITEM / Header
Default head for a block. */
.iHeadTC {display: flex; align-items: flex-end; }
.iHeadTC__cTitle {flex:1 1 auto;margin-bottom: -0.3em;padding-right: 5%;}
.iHeadTC__cCTA {flex: 0 1 auto;}
.iHeadTC__cCTA--fixVAlign {margin-bottom: -1em;}

	/* Remove the valign fix parce que le texte du bouton va etre sous l'icone */
	@media (max-width:46rem) {
		.iHeadTC__cTitle {padding-right: 2%;}
		.iHeadTC__cCTA--fixVAlign {margin-bottom: 0; }
	}



/*
ITEM / Footer
Default footer for a block. */
.iFoot {text-align: center; }
* + .iFoot {margin-top: 2em;}



/*
ITEM / Nav arrows
Navigation pour un carousel. */
.navArrows {--espacementV: 0.8em;--espacementH: 0.8em;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__pages {flex: 0 0 auto;margin: 0 0.7em;}

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



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {--spacing: 0.3em;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;}

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

	/*
	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 * var(--spacing));}



/*
ITEM / Event
Box d'evenement dans la programmation. */
.iBoxEvent { }
.iBoxEvent__layout {position: relative; height: 100%; display: flex; flex-direction: column; background-color: #fff; }
.iBoxEvent__img {flex:0 0 auto; overflow: hidden;position: relative; z-index: 1; }
.iBoxEvent__imgAnimate { }
.iBoxEvent__ctn {flex:1 1 auto; padding: 8%; }
.iBoxEvent__infos { }
.iBoxEvent__date { }
.iBoxEvent__cat {font-weight: normal;margin-top: 0.3em;}
.iBoxEvent__title {margin-top: 10%;margin-bottom: 10%;}
.iBoxEvent__link {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }

	/* Lien sur l'image */
	.iBoxEvent__img a {display: block; text-decoration: none;height: 100%; }
	.iBoxEvent__img a img {will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

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

	/* 
	ANIMATE */
	.js .jsAnimateClass .iBoxEvent__imgAnimate {transform: scale(1.2); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; transition-delay: var(--appear-delay, 0s); }
	.js .jsAnimateClass.animate .iBoxEvent__imgAnimate {transform: none; opacity: 1; }



/*
ITEM / Box text
Box de texte dans la liste de rubriques. */
.iBoxText { }
.iBoxText__layout {position: relative;height: 100%;width: 100%;background-color: #fff;}
.iBoxText__ctn {padding: 15%;}
.iBoxText__link {position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }

	/* La box est en 1 col, donc standardiser le padding avec les autres box du site. */
	@media (max-width:46rem) {
		.iBoxText__ctn {padding: 12%;}
	}



/*
ITEM / Nouvelle
Box de nouvelle dans la page d'accueil. */
.iBoxNouvelle { }
.iBoxNouvelle__layout {height: 100%;display: flex;}
.iBoxNouvelle__img {order: 2;flex:0 0 auto; width: 40%; overflow: hidden;position: relative;z-index: 1;}
.iBoxNouvelle__imgAnimate { }
.iBoxNouvelle__ctn {flex:1 1 auto; width: 100%; padding-right: 8%; }
.iBoxNouvelle__date { }
.iBoxNouvelle__link {margin-top: 2em; }

	/* Lien sur l'image */
	.iBoxNouvelle__img a {display: block; text-decoration: none;height: 100%; }
	.iBoxNouvelle__img a img {will-change: transform; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

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

	/* 
	ANIMATE */
	.js .jsAnimateClass .iBoxNouvelle__imgAnimate {transform: scale(1.2); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; transition-delay: var(--appear-delay, 0s); }
	.js .jsAnimateClass.animate .iBoxNouvelle__imgAnimate {transform: none; opacity: 1; }

	/* Image over content */
	@media (max-width:46rem) {
		.iBoxNouvelle__layout {display: block; height: auto; }
		.iBoxNouvelle__layout > * {width: 100%; }
		.iBoxNouvelle__img { }
		.iBoxNouvelle__ctn {padding: 1.5em 0 0.5em 0;}
		.iBoxNouvelle__date { }
		.iBoxNouvelle__link {text-align: center; margin-top: 1em; }
	}



/*
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); }
	}

	/* 
	ANIMATE */
	.js .jsAnimateClass .iBoxImg__img {transform: scale(1.2); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; }
	.js .jsAnimateClass.animate .iBoxImg__img {transform: none; opacity: 1; }
	
	.js .jsAnimateClass .iBoxImg__cCtn {opacity: 0; transition: opacity 1s; transition-delay: 0.3s;}
	.js .jsAnimateClass.animate .iBoxImg__cCtn {opacity: 1; }




/*
ITEM / Image
Image dans une galerie d'image en carousel. */
.iGalleryImage { }
.iGalleryImage__in {overflow: hidden; }
.iGalleryImage__animate { }

	/* 
	ANIMATE */
	.js .jsAnimateClass .iGalleryImage__animate {transform: scale(1.2); opacity: 0; transform-origin: 50% 50%; transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s; transition-delay: var(--appear-delay, 0s); }
	.js .jsAnimateClass.animate .iGalleryImage__animate {transform: none; opacity: 1; }



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

	/* On light gray */
	.onLightGray .progressBar {background-color: var(--color-gray); }



/*
ITEM / Separator
Utile dans le page head, en-dessous du titre.
Optionnel : Mettre un texte a droite de la ligne separatrice. */
.iSeparator {--line-position: 0.45em;position: relative;padding-left: 4em;margin: 1.5em 0;font-size: 0.95em;min-height: calc(var(--line-position) + 1px);}
.iSeparator::before {position:absolute;z-index:0;display:block;background-color: var(--color-brown);content:'';top: var(--line-position);height: 1px;left:0;width: 3em;}
.iSeparator a {font-weight: 900; color: var(--color-green); transition: color 0.2s; }
.iSeparator a:hover {color: var(--color-blue); }

/* Fix pour un alignement vertical parfait. */
.pHPage__titre + .iSeparator:last-child {margin-bottom: 0;}



/*
ITEM / Macaron date
Utile dans le page head, pour indiquer la date par-dessus l'image de l'event. */
.iMacaronDate {--size: 7em;position: absolute;line-height: 1;text-align: center;}
.iMacaronDate__in {display: flex;align-items: center;justify-items: center;height: 100%;background-color: #fff;width: var(--size);height: var(--size);border-radius: 50%;box-shadow: 0 0 1em 0 rgb(0 0 0 / 14%);}
.iMacaronDate__ctn {font-size: 0.85em;flex:1 1 auto;padding: 0 1em;margin-top: -0.3em;}
.iMacaronDate strong {font-size: 3.3em;font-weight: bold;display: block;}

	/* 
	ANIMATE */
	.js .jsAnimateClass .iMacaronDate__in {opacity: 0; transition: opacity 1s; transition-delay: var(--appear-delay, 0.1s); }
	.js .jsAnimateClass.animate .iMacaronDate__in {opacity: 1; }

	/* Size */
	@media (max-width:46rem) {
		.iMacaronDate {font-size: 0.8em; }
	}



/*
ITEM / Side box
Box qui contient icone dans un background gris.
Utile pour le sharing zone. */
.iSideBox {font-size: 1em;position: relative;background: var(--color-light-gray);border-radius: 2em;transition: background-color 0.3s;}
.iSideBox__text {position: absolute;top:100%;padding-top: 0.5em;width: 100%;text-align: center;}
.iSideBox__trigger { }
.iSideBox .iSideBox__trigger .btnIcon::before {background-color: var(--color-light-gray); }
.iSideBox__ctn {max-height: 0;overflow: hidden;pointer-events: none;transition: max-height 0.3s;}
.iSideBox__ctn .rs {padding-bottom: 0.8em; opacity: 0; transition: opacity 0.3s;}
.iSideBox__ctn .rs li a:hover {color: var(--color-base); }

	/* 
	STATE / On */
	.iSideBox.on {background-color: var(--color-green); }
	.iSideBox.on .iSideBox__trigger .btnIcon {color: #fff; }
	.iSideBox.on .iSideBox__trigger .btnIcon::before {background-color: var(--color-green); transform: scale(1); }
	.iSideBox.on .iSideBox__ctn {max-height: 15em;pointer-events: auto;}	
	.iSideBox.on .iSideBox__ctn .rs {opacity: 1; }



/*
ITEM / Gros titre
Gros titre qui est defilant. */
.iGrosTitre {font-size: calc(3em + 3vw);font-weight: 900; white-space: nowrap; }

	/* 
	ALT :
	White. */
	.iGrosTitre--white {color: #fff; }



/*
ITEM / Title
Description. */