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

/*
ITEM / Header
Default head for a block.

TODOCHECK : Ne pas mettre de tag header pour seulement un h*. Plutôt,
mettre le h* suivi immédiatement du contenu. Si c'est logique, on peut
wrapper tout ça dans un <header> */
.iHead { }
.iHead + * {margin-top: 1.5em;}



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



/*
TODOMOD
ITEM / Footer
Default footer for a block. */
.iFoot { }
.iFoot .btn { }



/*
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__pages {flex: 0 0 auto;margin: 0 0.5em;}

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



/*
ITEM / Progress bar
Progress bar pour un carousel.
Progress entre 0 et 1. TODO reset to 0. */
.iProgressBar {--espacementH: 1rem;margin: 0 calc(-1 * var(--espacementH));display: flex;align-items: center;}
.iProgressBar__number {flex: 0 0 auto; padding: 0 var(--espacementH); font-size: 0.8em;font-weight: 700; }
.iProgressBar__bar {flex:1 1 auto;width: 100%;padding: 0 var(--espacementH);position: relative;height: 1.5em;}
.iProgressBar__bar::before {position:absolute; z-index:1; display:block; content:''; top:0; bottom:0; left:0.3em; right:0.3em; background-color: var(--color-white);border-radius: 1em; }
.iProgressBar__bar::after {position:absolute;z-index:2;display:block;content:'';top:0;bottom:0;left:0.45em;background-color: var(--color-orange);border-radius: 1em;width: calc(6% + 90% * var(--progress, 0));}
.iProgressBar__barStroke {position:absolute; z-index:3; display:block; content:''; top:0; bottom:0; left:0; right:0; border: 1px solid var(--color-green-dark);border-radius: 1em; }



/*
TODOMOD
ITEM / Nav tabulaire
Styles qui sont useful pour faire les liens des tabs.
Can be used for nav styling, without necessarily having a tabs plugin. */
.tabsNav {font-size: 1.15002em;list-style: none;margin: 0 0 2.002em 0;padding: 0;line-height: 1;}
.tabsNav li {margin: 0;padding: 0;display: inline-block;}
.tabsNav a {color: var(--color-accent);display: block;position: relative;padding: 0.5002em 0.6002em 0.4002em 0.6002em; transition:color 0.4s ease, background 0.4s ease;}
.tabsNav a::before {position:absolute;display:block;content:"";width: 0%;bottom: 0;left: 0.6002em;height: 0.1002em;background: var(--color-base);transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);}

	/* Hover */
	.tabsNav a:hover { }
	.tabsNav a:hover:before {width:calc(100% - 1.2002em); }
	
	/* Active */
	.tabsNav .ui-tabs-active a {font-weight: bold;color: #fff;background: var(--color-base);}



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {--spacing: 0.25em;list-style: none;font-size: 2.2em;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 TODO */
	.rs li a:hover {color: var(--color-accent); }

	/* On dark */
	.onDark .rs li a {color: var(--color-white); }
	.onDark .rs li a:hover {color: var(--color-base-on-dark); }

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



/*
ITEM / Box link
Box link with image, icon, content in top (or bottom). */
.iBox {line-height: 1;display: block;}
.iBox__in {position: relative;background-color: #e6e6e6;height: 100%;}

/* Icone avec fleche. */
.iBox__iconArrow {position: absolute;z-index: 2;bottom: 0;right: 0;display: block;}

/* Image de fond de la section du haut. */
.iBox__img {overflow: hidden; }
.iBox__img img {/* backface-visibility:hidden; replace with will-change? */ position: relative; z-index: 1; }

/* Section du bas. */
.iBox__bottom {padding: 12% 14%;}
.iBox__head + * {margin-top: 1.002em; }

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

	.iBox a:hover .iBox__img img {transform: scale(1.05); }
	.iBox a:hover .iBox__in {background-color: #303030;color: #fff;}

	/*
	ALT :
	Dark BG box. */
	.iBox--dark { }
	.iBox--dark .iBox__in {background-color: #303030;color: #999;}

		/* Hover, uniquement si c'est un lien. */
		.iBox--dark a:hover .iBox__in {background-color: #fff;color: #2a2a2a;}



/*
ITEM / Box infos
Box with title, content and buttons. */
.iBoxInfos {line-height: 1; display: block; }
.iBoxInfos__layout {background-color: var(--color-white);height: 100%;padding: 9%;display: grid;gap:2em 0;align-content: start; transition: background-color 0.5s;}
.iBoxInfos__cTitle { }
.iBoxInfos__cCtn {max-width: 28em; }
.iBoxInfos__cCta {display: flex; flex-wrap: wrap; gap: 0.5em; }
.iBoxInfos__cta {margin: 0; }

	/* Hover change le background, même si la box n'est pas un lien. */
	@media (hover: hover) {
		.iBoxInfos__layout:hover {background-color: var(--color-green); }
	}



/*
ITEM / Box emploi
Box with title, address, type, and btn. */
.iBoxEmploi {line-height: 1; display: block; }
.iBoxEmploi__layout {position: relative; background-color: var(--color-white);height: 100%;padding: 7%;display: flex;flex-direction: column;gap: 1em; transition: background-color 0.5s;}
.iBoxEmploi__cType {text-align: right; }
.iBoxEmploi__cTitle { }
.iBoxEmploi__cLogo img{
	width: auto;
	max-width: 10em;
}
.iBoxEmploi__cTitle * + h4{
	margin-top: 1em;
}
.iSessionCompleteTag{
	background: var(--color-base);
	border-radius: var(--border-radius);
	color: var(--color-base-on-dark);
	display: inline-flex;
	padding: 0.15em 0.5em;
	font-size: 0.75em;
	font-weight: bold;
	margin-left: 0.5em;
	position: relative;
	top: -0.25em;
}
.iBoxEmploi__cCtn {/* max-width: 28em; */ }
.iBoxEmploi__meta * + p{
	margin-top: .5em;
}
	.iSessionName{
		white-space: nowrap;
	}
.iBoxEmploi__cCta {flex:1 1 auto; margin-top: 1em; text-align: right;display: flex;align-items: flex-end;justify-content: flex-end; }

.iBoxEmploi__type {font-size: 0.9em;display: inline-flex;align-items: center;margin-top: -0.4em; }
.iBoxEmploi__type::before {display:inline-block; content:''; width: 2em; height: 2em; background: #E0E5DF;border-radius: 50%;margin-right: 0.5em; }
.iBoxEmploi__cohorte {font-size: 0.9em;display: flex;align-items: center;justify-content: flex-end;margin-top: 0.75em;}
.iBoxEmploi__cta {margin: 0; }

	/* Hover change le background, même si la box n'est pas un lien. */
	@media (hover: hover) {
		.iBoxEmploi__layout:hover {background-color: var(--color-green); }
	}

	@media (max-width:75rem) {
		.iSessionName {white-space: wrap;}
	}



/*
ITEM / Testimonial
Nom, poste, image et contenu. */
.iTestimonial {text-align: center;}
.iTestimonial__layout { }
.iTestimonial__ctn { }
.iTestimonial__infos {margin-top: 1.5em;display: flex;align-items: center;justify-content: center;gap: 1.5em;}
.iTestimonial__infos > * {margin-top: 0; }
.iTestimonial__image {width: 3em; }
.iTestimonial__nom { }

	/* Image par-dessus le nom */
	@media (max-width:46rem) {
		.iTestimonial__infos {margin-top: calc(0.5 * var(--base-spacing));flex-wrap: wrap;gap: 0.5em;}
		.iTestimonial__image {text-align: center;}
		.iTestimonial__nom {flex: 1 0 auto;width: 100%;}
	}



/*
ITEM / Accordion
Utile pour la section des FAQ. */
.iAccordion {--espacementV: 1.2em;--espacementH: 1.6em;background-color: var(--color-white);}
* + .iAccordion {margin-top: 0.75em;}
.iAccordion__title {line-height: 1;display: block; padding: var(--espacementV) calc(4em + var(--espacementH)) var(--espacementV) var(--espacementH); position: relative;}
.iAccordion__icon {position: absolute; right: var(--espacementH); top: 50%; width: 2.3em; height: 2.3em; transform:translateY(-50%); background: var(--color-beige); border-radius: 50%; border: 1px solid var(--color-green-dark); transition: background-color 0.4s;}
.iAccordion__icon::before,
.iAccordion__icon::after {position:absolute;display:block;content:" ";top: calc(50% - 0.5px); height: 1px; left: 0;right: 0;transform-origin: 50% 50%;background: var(--color-green-dark);transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s;will-change: transform;}
.iAccordion__icon::after {transform: rotate(90deg);}
.iAccordion__ctn {display: none;padding: calc(0.5 * var(--espacementV)) var(--espacementH) calc(1.5 * var(--espacementV)) var(--espacementH);}

	/* Accordion "on" */
	.iAccordion.on .iAccordion__ctn {display: block;}
	.iAccordion.on .iAccordion__icon {background-color: var(--color-green-dark); }
	.iAccordion.on .iAccordion__icon::after {transform: rotate(180deg); background-color: var(--color-beige);}

	/* 
	ALT:
	Large accordion. */
	.iAccordion--large {--espacementV: 2.4em;--espacementH: 2.4em;}
	.iAccordion--large .iAccordion__icon {background-color: transparent;width: 3em;height: 3em; }

		/* Accordion "on" */
		.iAccordion--large.on .iAccordion__icon {background-color: transparent; }
		.iAccordion--large.on .iAccordion__icon::after {background-color: var(--color-green-dark); }

	/* Sizes and spacing */
	@media (max-width:62rem) {
		.iAccordion--large {--espacementV: 2em;--espacementH: 2em;}
		.iAccordion--large .iAccordion__icon {background-color: transparent;width: 2.5em;height: 2.5em; }
		.iAccordion--large .iAccordion__title h2 {font-size: 2.4em; }
	}

	/* Spacing */
	@media (max-width:46rem) {
		.iAccordion__title {padding-right: calc(3em + var(--espacementH));}

		.iAccordion--large {--espacementV: 1.5em;--espacementH: 1.5em;}
		.iAccordion--large .iAccordion__icon {width: 2.2em;height: 2.2em; }
		.iAccordion--large .iAccordion__title h2 {font-size: 1.6em; }
	}



/*
ITEM / News on front-page
MAIN = big one
SECOND = small one. */
.iNewsFPMain { }
.iNewsFPMain__img {overflow: hidden; }
.iNewsFPMain__date {margin-top: 1em; text-align: right; }
.iNewsFPMain__title {margin-top: 2em; }

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

	.iNewsFPMain__link:hover {color: var(--color-green-vivid); }
	.iNewsFPMain__link:hover .iNewsFPMain__img img {transform: scale(1.05); }

	/* Image full width */
	@media (max-width:62rem) {
		.iNewsFPMain__img {margin-left: calc(-1 * var(--width-std-left)); margin-right: calc(-1 * var(--width-std-right)); }
	}

/* Second news */
.iNewsFPSecond { }
.iNewsFPSecond__img {position: relative; z-index: 2; overflow: hidden; }
.iNewsFPSecond__bg {margin-right: 50%; margin-top:-20%; }
.iNewsFPSecond__title {margin-top: 1.5em;max-width: 20em;}

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

	.iNewsFPSecond__link:hover {color: var(--color-green-vivid); }
	.iNewsFPSecond__link:hover .iNewsFPSecond__img img {transform: scale(1.05); }



/*
ITEM / Step
Dans un bloc de 3 étapes. */
.iStep {--numberSize:3em; }
.iStep__number {position: relative;z-index: 1; }
.iStep__number::before,
.iStep__number::after {position: absolute;z-index: -1;display: block;content: '';top: 50%;height: 1px;left: 0;right: 50%;background-color: var(--color-base); }
.iStep__number::after {left: 50%;right: 0; }
.iStep__numberIn {display: inline-flex;align-items: center;justify-content: center; position: relative;background: var(--color-bg-base);border-radius: 50%;font-weight: 700;width: var(--numberSize);height: var(--numberSize); }
.iStep__numberIn::before {position:absolute; z-index:0; display:block; content:''; top:0; bottom:0; left:0; right:0; border-radius: 50%; border: 1px solid currentColor; border-top-color:transparent; transform: rotate(-45deg); }
.iStep__image {margin: 3em 10% 1em 10%;}
.iStep__icon {font-size: 4em;}
.iStep__icon > .svgIcon {margin:0 auto;}
.iStep__ctn {margin: 1em 10% 1em 10%;}

/* Lignes */
.iStep:first-child .iStep__number::before {display: none;}
.iStep:last-child .iStep__number::after {display: none;}

	/* Spacing */
	@media (max-width:46rem) {
		.iStep__image {margin-top: 1.5em;}
		.iStep__ctn {margin: 1em 8% 1em 8%;}
	}



/*
ITEM / Infos box
Dans les pages de parcours, dans le bas du bloc steps. */
.iInfosBox {border: 1px solid var(--color-green); padding: 7%; text-align: left; }
.iInfosBox__header {text-align: center; }
.iInfosBox__ctn {margin-top: calc(0.5 * var(--base-spacing-top)); }



/*
ITEM / Filtre
Un filtre dans la liste des filtres dans la liste d'emplois. */
.iFiltre { }
* + .iFiltre {margin-top: 2em; }
.iFiltre__title { }
.iFiltre__filtre {margin-top: 0.75em;}

	/* 
	ALT:
	Filtre champ texte. */
	.iFiltre--text { }
	* + .iFiltre--text {margin-top: 3em; }

	/* 
	ALT:
	Filtre de boutons. */
	.iFiltre__filtre--buttons {display: flex;flex-wrap: wrap;gap: 0.75em; }

	/* 
	ALT:
	Filtre de dropdowns pour mobile. */
	.iFiltre__filtre--dropdown {display: none; }

	/* 
	ALT:
	Filtre champ texte (recherche par mots-clés). */
	.iFiltre__filtre--text { }

	/* Remplacer boutons par dropdown */
	@media (max-width:62rem) {
		.iFiltre__filtre--buttons {display: none; }
		.iFiltre__filtre--dropdown {display: block; }
	}

	/* Spacing et layout */
	@media (max-width:46rem) {
		* + .iFiltre,
		* + .iFiltre--text {margin-top: 1.5em; }
	}



/*
ITEM / Contact info
Icon at left, title and content at right. */
.iContactInfo {display: grid;grid-template-columns: auto 1fr;grid-template-rows: auto 1fr;gap: 0 0.5em;}
.iContactInfo__icon {grid-column: 1 / 2;grid-row: 1 / 3;font-size: 2.5em;position: relative;top: -0.15em;}
.iContactInfo__title {grid-column: 2 / 3;grid-row: 1 / 2;font-size: 1.1em;font-weight: 700; }
.iContactInfo__ctn {grid-column: 2 / 3;grid-row: 2 / 3;color: var(--color-white); }

* + .iContactInfo {margin-top: 2em;}
.iContactInfo p {margin-top: 0;}



/*
ITEM / Title
Description. */