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

/*
ITEM / Header
Default head for a block. */
.iHead { }
.iHead + * {margin-top: 2.5em;}
.iHead hr {border-color: var(--color-red); border-width: 2px; width: 5em; text-align: center; margin-left: auto; margin-right: auto; }

/* Line at left */
.iHead__line {position: relative; }
.iHead__line::before {position:absolute;z-index:1;display:block;content:'';top: 0.6em;height: 2px;left:calc(-1 * var(--overflow-std-left));width: calc(var(--overflow-std-left) / 1.75);background-color: var(--color-red);}

	/* Spacing */
	@media (max-width:47rem) {
		.iHead + * {margin-top: 2em;}
	}

	/* On red */
	.onRed .iHead__line::before {background: #fff;}

		/* Hidden */
		@media (max-width:47rem) {
			.iHead__line::before {display: none; }
		}

	/* 
	ALT:
	Center. */
	.iHead--center {text-align: center; max-width: 45em; margin-left: auto; margin-right: auto; }

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

		/* Spacing */
		@media (max-width:47rem) {
			.iHead--moreSpacing + * {margin-top: 3em; }
		}



/*
ITEM / Header WB Line
Header avec bouton et ligne a gauche.
Utile pour la liste des catégories d'emplois. */
.iHeadWBLine {display: flex;align-items: flex-end;}
.iHeadWBLine + * {margin-top: 3.5em;}
.iHeadWBLine__cTitle {flex: 1 1 auto;}
.iHeadWBLine__cBtn {flex: 0 0 auto; margin-left: 2em; margin-bottom: -0.3em; }

	/* 
	ALT:
	Afficher le bouton a gauche. Utile pour la liste de categorie d'emploi, 
	pour laisser de la place a la fleche de navigation. */
	.iHeadWBLine--btnAtLeft { }
	.iHeadWBLine--btnAtLeft .iHeadWBLine__cTitle {flex: 0 1 auto;}
	.iHeadWBLine--btnAtLeft .iHeadWBLine__cBtn {margin-left: 3em; }

	/* Button under title */
	@media (max-width:62rem) {
		.iHeadWBLine {display: block; }
		.iHeadWBLine__cBtn,
		.iHeadWBLine--btnAtLeft .iHeadWBLine__cBtn {margin-left: 0; margin-top: 1.5em; }
	}

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



/*
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 {text-align: center; }
.navArrows__btn {text-align: center; }
.navArrows__btn .btn {padding-left: 1em; padding-right: 1em; width: 100%; }

	/* 
	ALT:
	Flex item. */
	.navArrows__item--flex {flex:1 1 auto; }

	/* Hover, on anime le transform. */
	.navArrows__left .svgIcon,
	.navArrows__right .svgIcon {transition: transform 0.3s;}

	.navArrows__left:hover .svgIcon {transform: translate(-60%, -50%); }
	.navArrows__right:hover .svgIcon {transform: translate(-40%, -50%); }

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



/*
ITEM / Social networks in btns
On utilise btnIcon pour avoir le meme look que les icones dans un rond. */
.rsBtns {list-style: none; line-height: 1;}
.rsBtns li {display: inline-block;margin: 0 0.3em; }
.rsBtns li a { }



/*
ITEM / Social networks
Liens vers reseaux sociaux, cote a cote. */
.rs {list-style: none;font-size: 1.7em;line-height: 1;}
.rs li {display: inline-block;}
.rs li a {color: var(--color-red);padding: 0.1em;text-decoration: none;display: block;height: 1em;box-sizing: content-box; transition: color 0.2s;}

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

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

	/* On red */
	.onRed .rs { }
	.onRed .rs li a {color: #fff; }
	.onRed .rs li a:hover {color: var(--color-red);}

	/*
	ALT :
	Vertical alignment */
	.rs--vertical {text-align: center;}
	.rs--vertical li {display: block;margin-bottom: 0.3em;}
	.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.35002em;}



/*
ITEM / Box link
Box link with image, content and button at the bottom. */
.iBox {--paddingV:10%; --paddingH:10%; line-height: 1;display: block; }
.iBox__in {position: relative;background-color: var(--color-bg-base);height: 100%;display: flex;flex-direction: column;border-radius: var(--round-borders);overflow: hidden;}

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

/* Section du bas. */
.iBox__ctn {flex: 1 1 auto;padding: var(--paddingV) var(--paddingH);}
.iBox__btn {flex: 0 0 auto;padding: var(--paddingV) var(--paddingH); padding-top: 0;}

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



/*
ITEM / Box equipe
Box d'un membre de l'equipe avec image, titre et nom. */
.iBoxEquipe {--paddingV: 9%;--paddingH:10%;line-height: 1;display: block;text-align: center;}
.iBoxEquipe__in {position: relative;background-color: var(--color-red);height: 100%;width: 100%;display: flex;flex-direction: column;border-radius: var(--round-borders);overflow: hidden;margin: 2px 0;transition: background-color 0.5s, box-shadow 0.5s;}

/* Image de fond de la section du haut. */
.iBoxEquipe__img {flex: 0 0 auto;overflow: hidden; transition: transform 0.5s;}
.iBoxEquipe__img img {backface-visibility:hidden; position: relative; z-index: 1; }

/* Section du bas. */
.iBoxEquipe__title {flex: 1 1 auto;padding: var(--paddingV) var(--paddingH);margin-top: -0.6em;color: #ff7383; transition: transform 0.5s;}
.iBoxEquipe__name {flex: 0 0 auto;padding: var(--paddingV) var(--paddingH);/* padding-top: 0; */color: #fff;transition: color 0.5s, transform 0.5s;}

	/*
	STATE / Inactive. */
	.iBoxEquipe:not(.is-selected) { }
	.iBoxEquipe:not(.is-selected) .iBoxEquipe__in {background-color: transparent; box-shadow: 0 0 0 1px var(--color-base);}
	.iBoxEquipe:not(.is-selected) .iBoxEquipe__img {transform: translateY(-101%); }
	.iBoxEquipe:not(.is-selected) .iBoxEquipe__title {transform: translateY(-60%);}
	.iBoxEquipe:not(.is-selected) .iBoxEquipe__name {color: var(--color-base);transform: translateY(-150%);}



/*
ITEM / Box categorie
Box de categorie d'emploi avec image, titre et lien. */
.iBoxCat {--paddingV: 8%;--paddingH:2%;line-height: 1;display: block; }
.iBoxCat__in {position: relative;height: 100%;width: 100%;display: flex;flex-direction: column; }

/* Image de fond de la section du haut. */
.iBoxCat__img {flex: 0 0 auto;border-radius: var(--round-borders);overflow: hidden; transition: transform 0.5s;}
.iBoxCat__img img {backface-visibility:hidden; position: relative; z-index: 1; }

/* Section du bas. */
.iBoxCat__ctn {flex: 1 1 auto;padding: var(--paddingV) var(--paddingH); padding-bottom: 0;}
.iBoxCat__link {flex: 0 0 auto;padding: var(--paddingV) var(--paddingH);padding-top: 0.4em;padding-bottom: 0;color: #fff;transition: color 0.5s, transform 0.5s;}

	/* Smaller padding top dans le carousel sur mobile */
	@media (max-width:47rem) {
		.iBoxCat__link {padding-top: 0; }
	}



/*
ITEM / Avantage
Icone dans un rond croche et texte. */
.iAvantage { }
.iAvantage__layout {display: flex; align-items: flex-start; }
.iAvantage__cIcon {flex:0 0 auto;font-size: 3.5em;padding: 0.3em 0.5em;background: var(--color-red);color: #fff;border-radius: 50% 90% 50% 90%;}
.iAvantage__cLabel {flex:1 1 auto;margin-left: 1em;}
.iAvantage__cLabel strong {font-weight: bold; }

	/* Break cols */
	@media (max-width:30rem) {
		.iAvantage + * {margin-top: 1.5em; }
		.iAvantage__layout {display: block;text-align: center;}
		.iAvantage__cIcon {display: inline-block;}
		.iAvantage__cLabel {margin: 0.2em 0 0 0; }
	}



/*
ITEM / Video
Video avec bouton play et label par-dessus. */
.iVideo {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--color-red); }
.iVideo__in {flex:0 1 auto; width: 80%; max-width: 12em; text-align: center; }
.iVideo__icon {font-size: 4.5em; }
.iVideo__label {line-height: 1.4; margin-top: 0; }



/*
ITEM / Slide connaitre
Dans le slider de la section Connaitre sur l'accueil. */
.iConnaitreSlide { }
.iConnaitreSlide__in { }



/*
ITEM / Emplacement
Logo avec description et lien vers les postes. */
.iEmplacement {text-align: center;}
.iEmplacement__img {width: 65%; max-width: 13em; margin-left: auto; margin-right: auto; }
.iEmplacement__ctn {margin-top: 1em;}
.iEmplacement__btn {margin-top: 2em;}

	/* Spacings */
	@media (max-width:47rem) {
		.iEmplacement__ctn {margin-top: 0.2em;}
		.iEmplacement__btn {margin-top: 1em;}
	}



/*
ITEM / Offre d'emploi
Bulle d'offre d'emploi dans le page head de l'accueil. */
.iPHOffre { }
.iPHOffre__in {background: var(--color-red);border-radius: calc(2 * var(--round-borders));padding: 12%;text-align: center;}
.iPHOffre__sup {font-size: 0.7em;text-transform: uppercase;margin-top: -0.3em;}
.iPHOffre__title {font-size: 1.25em;line-height: 1.2;margin-top: -0.3em;min-height: 2em;display: flex;justify-content: center;align-items: center;}
	.iPHOffre__sup + .iPHOffre__title{margin-top: .5em;}

	/* Les couleurs de BG alterne */
	.iPHOffre:nth-child(even) { }
	.iPHOffre:nth-child(even) .iPHOffre__in {background-color: var(--color-bg-dark); }

	/* If it's a link */
	.iPHOffre a {display: block;transform: scale(0.95);will-change: transform;transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;}
	.iPHOffre a:hover {transform: scale(1);opacity: 0.9;}

	/* Size */
	@media (max-width:47rem) {
		.iPHOffre__in {padding: 10%; }
		.iPHOffre__sup {font-size: 0.5em; }
		.iPHOffre__title {font-size: 0.9em; margin-top: 0.3em; }
	}



/*
ITEM / Offre d'emploi
Offre d'emploi dans la liste d'offre d'emplois. */
.iEmploi {border-bottom: 1px solid var(--color-base); width: 100%; line-height: 1.2; }
.iEmploi__in {display: grid;grid-template-columns:1fr auto;grid-template-rows: auto;gap: 0.8em 5%;align-items:center;padding: 4% 2.5%;}
.iEmploi__in > * {padding: 0; margin: 0; }
.iEmploi__cat {grid-column:1 / 2; grid-row: 1 / 2; font-size: 0.85em; }
.iEmploi__title {grid-column: 1 / 2;grid-row: 2 / 3; font-weight: bold; font-size: 1.1em; }
.iEmploi__lieu {grid-column:1 / 2; grid-row: 3 / 4; }
.iEmploi__link {grid-column:2 / 3; grid-row: 1 / 4; }

	/* Link */
	.iEmploi a {transition: background-color 0.2s; }
	.iEmploi a:hover {background-color: var(--color-bg-grey); }

	/* Break cols */
	@media (max-width:47rem) {
		.iEmploi__in {padding: 7% 0; gap: 0.5em 1%; }
		.iEmploi__link .btnSubtle__label {display: none; }
	}



/*
ITEM / Emplacement avec logo
Nom de l'emplacement a gauche, logo à droite. */
.iEmplacementWL {display: flex; align-items: center; }
.iEmplacementWL__logo {flex:0 0 auto;width: 4em;}
.iEmplacementWL__nom {flex: 0 1 5.5em;}
	.iEmplacementWL__logo + .iEmplacementWL__nom{margin-left: 1em;}



/*
ITEM / Emploi lien
Logo avec fond blanc a gauche, nom du lieu a droite. */
.iEmpLieu {display: flex; align-items: center; line-height: 1.3; }
.iEmpLieu__logo {flex:0 0 auto;width: 5.5em;height: 5.5em;background: #fff;border-radius: 50%;padding: 0.9em;display: flex;align-items: center;justify-content: center;}
.iEmpLieu__ctn {flex:1 1 auto;padding-left: 1em; color: var(--color-base );}

	/* Smaller */
	@media (max-width:47rem) {
		.iEmpLieu {font-size: 0.85em; }
	}



/*
ITEM / Emploi header actions
Bouton pour postuler a gauche, share zone a droite. */
.iEmpHeaderActions {position: relative;}
.iEmpHeaderActions__postuler { }
.iEmpHeaderActions__share {position: absolute;top: -0.4em;right: 0;}



/*
ITEM / Side box
Box qui contient icone sans background.
Utile pour le sharing zone. */
.iSideBox {font-size: 1em;position: relative;background: transparent;border-radius: 2em;transition: background-color 0.3s;}
.iSideBox__text {font-size: 0.8em;position: absolute;top: 2.1em;right: 100%;font-weight: bold;text-transform: uppercase;padding-right: 0.7em;color: #fff;}
.iSideBox__trigger { }
.iSideBox .iSideBox__trigger button.btnIcon,
.iSideBox .iSideBox__trigger a.btnIcon {font-size: 4em; background: transparent;color: #fff; border: none;}
.iSideBox .iSideBox__trigger .btnIcon .svgIcon {transform: translate(-50%, -50%); }
.iSideBox__ctn {max-height: 0;overflow: hidden;pointer-events: none;transition: max-height 0.3s;}
.iSideBox__ctn .rs {padding-bottom: 0.5em; opacity: 0; transition: opacity 0.3s;}

	/* 
	STATE / On */
	.iSideBox.on {background-color: var(--color-bg-dark); }
	.iSideBox.on .iSideBox__ctn {max-height: 15em;pointer-events: auto;}
	.iSideBox.on .iSideBox__ctn .rs {opacity: 1; }

	/* Remove text */
	@media (max-width:47rem) {
		.iSideBox__text {display: none; }
	}



/*
ITEM / Title
Description. */