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

/*
ITEM / Header
Default title (header) for a block. */
.iHead { }
.iHead + * {margin-top: 1.5em;}

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

	/* 
	ALT:
	More spacing. */
	.iHead--more { }
	.iHead--more + * {margin-top: 4.5em;}



/*
ITEM / Content
Default content for generic a block. */
.iContent { }



/*
ITEM / Footer
Des fois, il y a des boutons en bas d'un block. */
.iFoot { }

	/*
	ALT:
	Centered. */
	.iFoot--center {text-align: center;margin-top: 4em;}



/*
ITEM / Nav arrows
Navigation pour un carousel. */
.navArrows {--espacementV: 1.5em;--espacementH: 1em;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 {display: inline-block;margin: 0 1.002em;}

	/*
	ALT :
	Vertical alignment. */
	.navArrows--vertical {flex-direction: column;}
	.navArrows--vertical > *:first-child {order:2; }

	/*
	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 / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {list-style: none;font-size: 2.85em;line-height: 1;}
.rs li {display: inline-block;}
.rs li a {color: var(--color-green);margin: -0.1em;text-decoration: none;display: block;height: 1em;box-sizing: content-box;transition: color 0.2s;}

	/* On dark */
	.onDark .rs li a {color: #fff;}

	/* 
	ALT:
	On dark section. */
	.onDarkSection { }
	.onDarkSection .rs li a {color: #fff; }

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

	/*
	ALT :
	Vertical alignment */
	.rs--vertical {text-align: center;}
	.rs--vertical li {display: block;}
	.rs--vertical li a {display: inline-block;}

	/*
	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.18em;}



/*
ITEM / Box link
Marker with date or icon (optional)
Image at top (optional)
Content in a white background:
   - tags
   - title
   - location with icon (or no icon text)
   - paragraph of details (optional)
   - link icon "x"
 */
.iBox {--spacing-content: 7%;line-height: 1;display: block;}
.iBox__in {position: relative;background-color: #fff;height: 100%;display: flex;flex-direction: column;}
.iBox__cMarker {position: absolute;z-index: 1;top: 0;left: var(--spacing-content);margin-top: -1.2em;}
.iBox__cImg {flex: 0 0 auto;}
.iBox__cCtn {flex: 1 1 auto;padding: var(--spacing-content);}

/* Si pas d'image, laisser de la place pour le marker dans la zone de contenu. */
.iBox__cMarker + .iBox__cCtn {padding-top: calc(5.5em + var(--spacing-content));}

.iBox__img { }
.iBox__head { }
.iBox__ctn {font-size: 0.88em;margin-top: 1em;}
.iBox__iconLink {margin-top: 1.3em;}

	/*
	ALT:
	Lien icone en bas a droite. */
	.iBox--linkAtRight { }
	.iBox--linkAtRight .iBox__ctn {padding-right: 5em;}
	.iBox--linkAtRight .iBox__iconLink {position: absolute;right: 0;bottom: 0;margin: 0 var(--spacing-content) var(--spacing-content) 0;}

	/* S'il n'y a pas de contenu, on applique un espace au head. */
	.iBox--linkAtRight .iBox__head:nth-last-child(2) {padding-right: 4em;}

	/*
	ALT:
	No content padding.
	Useful when there is no shadow under the content.
	Useful for the slide panel in the header. */
	.iBox--noCtnPadding { }
	.iBox--noCtnPadding .iBox__in {background-color: transparent; }
	.iBox--noCtnPadding .iBox__cCtn {padding-left: 0; padding-right: 0; padding-bottom: 0; }

	/*
	ALT:
	Marker a gauche au lieu d'en haut. */
	.iBox--markerAtLeft { }
	.iBox--markerAtLeft .iBox__cMarker {margin-top: var(--spacing-content);left: -2.7em;}
	.iBox--markerAtLeft .iBox__cMarker + .iBox__cCtn {padding-top: var(--spacing-content);padding-left: calc(1.7em + var(--spacing-content));}

		/*
		ALT:
		Centrer verticalement le marker. */
		.iBox--markerAtLeft--centered { }
		.iBox--markerAtLeft--centered .iBox__cMarker {margin-top: 0;top: 50%;transform: translateY(-50%);}

	/*
	MARKER:
	The marker is always at the top. */
	@media (max-width:62rem) {
		.iBox__cMarker,
		.iBox--markerAtLeft .iBox__cMarker {top: 0;left: var(--spacing-content);transform: none; margin-top: -1.2em;}

		.iBox__cMarker + .iBox__cCtn,
		.iBox--markerAtLeft .iBox__cMarker + .iBox__cCtn {padding-top: calc(4em + var(--spacing-content));padding-left: var(--spacing-content);}
	}

	/*
	MOBILE:
	Spacing and sizes adjustments. */
	@media (max-width:47rem) {
		.iBox__in {height: auto; }
	}



/*
ITEM / Box date
Date qu'on affiche dans iBox. */
.iBoxDate {background: var(--color-orange);color: #fff;min-width: 5.4em;height: 6.5em;display: inline-flex;align-items: center;justify-content: center;}
.iBoxDate__in {display: block; text-align: center;padding: 0 0.5em;}
.iBoxDate__day {display: block;font-size: 2.11em;text-transform: uppercase;padding: 0.5em 0 0.3em 0;}
.iBoxDate__month {display: block;font-size: 0.83em;text-transform: uppercase;position: relative;padding: 1em 0 0.5em 0;}
.iBoxDate__month::before {position:absolute; z-index:0; display:block; content:''; top:0; height:1px; left:0; right:0; background-color: #fff;}
.iBoxDate__iconPDF {font-size: 4.76em; }

	/* Size */
	@media (max-width:47rem) {
		.iBoxDate {font-size: 0.75em; }
	}



/*
ITEM / Box subtitle
Icon at left, label at right. */
.iBoxUT {color: var(--color-orange);font-weight: 900; display: flex; align-items: center; }
.iBoxUT__icon {display: block;flex:0 0 auto;font-size: 2.86em;margin: -0.4em 0 -0.4em -0.35em;}
.iBoxUT__label {display: block; flex:1 1 auto; font-size: 0.88em;}
* + .iBoxUT {margin-top: 0.6em; }

	/* 
	ALT:
	Bigger.
	Pour la page details d'un evenement. */
	.iBoxUT--bigger {;color: #fff;}

	/* Bigger */
	@media (min-width:47.01rem) {
		.iBoxUT--bigger {font-size: 1.35em;}
	}



/*
ITEM / Box team member
Image at top.
Name and description at bottom. */
.iBoxMember { }
.iBoxMember__img { }
.iBoxMember__ctn {padding-top: 1.5em;}



/*
ITEM / Text icon col
Texte avec icone : icone a gauche, texte a droite. */
.tIC {display: flex;align-items: center;}
.tIC__icon {display: block; flex: 0 0 auto; margin-right: 1.5em; }
.tIC__text {display: block; flex: 1 1 auto; }

	/* Break cols */
	@media (max-width:47rem) {
		.tIC {display: block; }
		.tIC__icon {margin-right: 0; }
		.tIC__text {margin-top: 1em; }
	}



/*
QUICKNAV
Quick nav sticky in some pages. */
.quickNav {--quicknav-height:var(--height, 4em);--items-spacing: 2.2em;position: relative;padding-top: var(--topbar-height-scrolled);height: var(--quicknav-height);box-sizing: content-box;/* margin-top: calc(-1 * var(--topbar-height-scrolled)); */transition: opacity 0.5s;}
.quickNav::before {position:absolute;z-index:0;display:block;content:'';top: var(--topbar-height-scrolled);bottom:0;left:0;right:0;background-color: #fff;}
.quickNav__in {background: #fff;position: absolute;z-index: 5;bottom: 0;height: var(--quicknav-height);left: 0;right: 0;transition: transform 0.5s, height 0.5s 0.2s, background 0.5s;}
.quickNav__items {display: flex;height: 100%;margin-right: var(--rs-width);}
.quickNav__item {font-size: 0.95em;flex: 0 1 auto;display: flex;align-items: center;color: var(--color-orange);text-decoration: none;text-align: left;padding: 0.2em var(--items-spacing) 0 var(--items-spacing);position: relative;transition: color 0.2s;}
.quickNav__text {display: block;flex: 0 1 auto;}

.quickNav__trigger {appearance: none;position: relative;cursor: pointer;background: none;outline: none;border: none;border-radius: 0;padding: 0;margin: 0;display: flex;align-items: center;text-align: left;width: 100%;max-width: 100%;height: 100%;color: var(--color-orange);font-size: 1em;line-height: 1.2;text-decoration: none;transition: background-color 0.3s;display: none;}
.quickNav__triggerLabel {font-size: 0.95em;display:block;flex: 1 1 auto;padding: 0 var(--items-spacing);padding-right: 5em;}
.quickNav__triggerIcon {display: block;position: absolute;font-size: 3em;right: 0.4em;top: 50%;transform: translateY(-50%);color: var(--color-orange);}
.quickNav__triggerOpen {display: block; color: var(--color-orange); transition: color 0.3s, transform 0.3s; will-change: transform; }
.quickNav__triggerClose {display: none;}

	@media (max-width: 400px){
		.quickNav__triggerLabel{
			padding-right: 3em;
		}
		.quickNav__triggerIcon{
			font-size: 2.5em;
		}
	}

	/* Init:
	Inutile car on fait deja le appear avec .animate */
	/* .quickNav.isInit {opacity: 1; } */

	/* Hover */
	.quickNav__item:hover {color: var(--color-green);}

	/* 
	STATE / Sticky */
	.quickNav.isSticky .quickNav__in {--quicknav-height: var(--topbar-height-scrolled);position: fixed;top: var(--topbar-height-scrolled);bottom: auto;left: var(--width-std-left);right: calc(-1 * var(--width-std-right));transform: translate(calc(-1 * var(--width-std-left)), 0);height: var(--topbar-height-scrolled);background-color: #f5f5f5;}

		/* Active (juste quand c'est sticky) */
		.quickNav.isSticky .quickNav__item.active {color: var(--color-green);}

	/* Hide */
	.quickNav.quickNav--hide .quickNav__in {transform: translate(calc(-1 * var(--width-std-left)), -130%);}

	/* 
	ALT:
	Carriere.
	La quicknav ne contient pas de liens internes, mais plutot des liens
	vers d'autres pages. Par contre, le look, le sticky et le mobile est 
	quasi identique a la quickNav, donc on utilise le HTML de la quickNav. */
	.quickNav--carriere { }

	/* Arrow for active link */
    .quickNav--carriere .quickNav__item::after {font-size: 0.8em;position:absolute;z-index: 5;display:block;content:'';top:calc(100% - 1px);left: 50%;border: 0 solid transparent;border-top-color: var(--color-orange);opacity: 0;transform: translate(-50%, 0%);transition: border 0.3s, opacity 0.3s;}

		/* Active */
		.quickNav--carriere .quickNav__item.active,
		.quickNav--carriere.isSticky .quickNav__item.active {color: #fff; background: var(--color-orange); }
    	.quickNav--carriere .quickNav__item.active::after {opacity: 1;border-width: 1em;}

		/* Hover */
		.quickNav--carriere .quickNav__item:hover,
		.quickNav--carriere.isSticky .quickNav__item:hover {color: var(--color-green); }

	/*
	ALT: 
	Box buttons with icons
	Les liens sont des "boxes" uniformes avec un bouton + */
	.quickNav--boxBtnWIcon{
		height: var(--base-spacing-bottom);
		padding-top: 0;
		margin-top: 0;
		transform: translateY(50%);
		margin-top: calc(-1 * var(--base-spacing-bottom));
	}
	.quickNav--boxBtnWIcon .quickNav__in{
		height: var(--base-spacing-bottom);
		background: var(--color-orange);
	}
		@media (max-width: 62rem){
			.quickNav--boxBtnWIcon .quickNav__in{
				height: calc(1.2 * var(--base-spacing-bottom));
			}
		}
		.quickNav--boxBtnWIcon .quickNav.isSticky .quickNav__in{
			position: relative;
			top: 0;
		}
	.quickNav--boxBtnWIcon .quickNav__items{
		margin-right: 0;
	}
		@media (max-width: 62rem){
			.quickNav--boxBtnWIcon .quickNav__items{
				padding-bottom: 0;
			}
		}
	.quickNav--boxBtnWIcon .quickNav__item{
		flex: 0 0 25%;
		background: var(--color-orange);
		color: #fff;
		justify-content: space-between;
	}
		@media (max-width: 62rem){
			.quickNav--boxBtnWIcon .quickNav__item{
				padding: calc(0.75 * var(--items-spacing)) calc(1.25 * var(--items-spacing));
			}
		}
		.quickNav--boxBtnWIcon .quickNav__item:nth-child(even){
			background: var(--color-orange-alt);
		}
	.quickNav--boxBtnWIcon .quickNav__item .btnIcon{
		margin-left: 1em;
	}
	.quickNav--boxBtnWIcon .quickNav__text{
		font-size: calc(.2em + .9vw);
	}
		@media (max-width: 62rem){
			.quickNav--boxBtnWIcon .quickNav__text{
				font-size: 1.5em;
			}
		}
	.quickNav--boxBtnWIcon .quickNav__triggerLabel{
		font-size: 1.5em;
	}
	.quickNav--boxBtnWIcon .quickNav__trigger{
		color: #fff;
	}
	.quickNav--boxBtnWIcon .quickNav__triggerOpen{
		color: #fff;
	}



/* Quicknav becomes a dropdown */
@media (max-width:62rem) {
	.quickNav {--items-spacing: 2em; }
	.quickNav__items {display: block;height: auto;background: var(--color-orange);padding: calc(0.5 * var(--items-spacing)) 0;opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;}
	.quickNav__item {padding: calc(0.5 * var(--items-spacing)) var(--items-spacing);color: #fff;}
	.quickNav__trigger {display: flex;color: var(--color-green);}

	/* Carriere */
	.quickNav--carriere::before {background-color: var(--color-orange); }
	.quickNav--carriere .quickNav__in,
	.quickNav--carriere.isSticky .quickNav__in {background-color: var(--color-orange); }
	.quickNav--carriere .quickNav__trigger {color: #fff;}
	.quickNav--carriere .quickNav__trigger::after {font-size: 0.8em;position:absolute;z-index: 5;display:block;content:'';top: calc(100% - 1px);left: 50%;border: 0 solid transparent;border-top-color: var(--color-orange);opacity: 0;transform: translate(-50%, 0%);transition: border 0.3s, opacity 0.3s;opacity: 1;border-width: 1em; }
	.quickNav--carriere .quickNav__triggerOpen {color: #fff;}

		/* Active */
		.quickNav--carriere .quickNav__item.active,
		.quickNav--carriere.isSticky .quickNav__item.active {color: var(--color-green); background: transparent; }
    	.quickNav--carriere .quickNav__item.active::after {display: none; }

	/* 
	STATE / Open */
	.quickNav.open .quickNav__items {opacity: 1;visibility: visible;}
	.quickNav.open .quickNav__trigger {background: var(--color-orange);}
	.quickNav.open .quickNav__triggerOpen {color: #fff; transform: rotate(180deg); }
}

/* Spacing */
@media (max-width:62rem) {
	.quickNav {--items-spacing: 1.5em;z-index: 90;}
}



/*
ITEM / Floating box
Box qui deviendra sticky eventuellement. */
.iFloatBox {--float-box-topbar-spacer: calc(2.5em + var(--topbar-height));position: absolute;z-index: 8;top: 0;left: 0;right: 0;}
.iFloatBox__willPin {padding-top: var(--float-box-topbar-spacer);margin-top: calc(-1 * var(--float-box-topbar-spacer)); }
.iFloatBox__scrolledPosition {--move:calc(var(--topbar-height-scrolled) - var(--topbar-height) - calc(var(--topbar-nav-height) / 2)); transition: transform 0.4s; }

	/* Quand la topbar est plus petite...
	Inutile car on doit laisser de la place sour la barre de sous menu sticky.
	Donc, les reseaux sociaux sont toujours sticky au meme endroit. */
	/* .topBar.isSmaller:not(.isNotSmaller) + main .iFloatBox__scrolledPosition {transform: translateY(var(--move)); } */

	/* No share on mobile */
	@media (max-width:47rem) {
		.iFloatBox {display: none; }
	}



/*
ITEM / Stat
Utile dans le carousel de stats. */
.iStat { }
.iStat__in { }
.iStat__cHead { }
.iStat__cHead + * {margin-top: 2em; }
.iStat__big {font-size: 5.5em; text-transform: uppercase; }
.iStat__subStat {margin-top: 0;}
.iStat__cCtn { }

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



/*
ITEM / Badge
Dans la liste des specialisations. */
.iBadge { }
.iBadge__in {text-align: center; max-width: 14em; margin-left: auto; margin-right: auto; }
.iBadge__icon { }
.iBadge__icon + *, .iBadge__icon + h3 {margin-top: 0.55em;}
.iBadge__title {text-transform: none;font-size: 1.35em; }



/*
ITEM / BG lined
Les vars permettent d'afficher le nombre voulu. */
:root {--qty-bg-lined-width:10;--qty-bg-lined-height:5; }
.bgLined {display: block;font-size: 5em;position: relative;width: 100%; opacity: 0.5; }
.bgLined__in {display: block; padding-top: calc(100% * 1.572 / var(--qty-bg-lined-width) * var(--qty-bg-lined-height)); background-image: url(../../img/svg/bg-lined-orange.svg);background-position: 0 0;background-size: calc(100% / var(--qty-bg-lined-width)); background-repeat: repeat; }

	/*
	ALT:
	Green. */
	.bgLined--green .bgLined__in,
	.bCIP--green .bgLined__in {background-image: url(../../img/svg/bg-lined-green.svg); }



/*
ITEM / Title
Description. */