header{
	background-color:white;
	font-family: var(--font-main);
}
#header-content{
	max-width: var(--header-max-width);
	margin: 0 auto;
	position: relative;
}
nav{
	width: 100%;
	padding:0 var(--header-padding-side);
	font-size: clamp(12px, 1vw, 16px);
}

#ulMenu,
#ulMenuMobile{
	height: var(--header-height);
	transition: height .3s ease-in-out;
	width: 100%;
	position: relative;
	display:flex;
	flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
	padding-left: calc( var(--logo-size) );
}
#logoHome,
#logoHomeMobile{
	width:100%;
	height: 100%;
	background-image:url("../img/logo-cfa.svg");
	background-position: 50% 50%;
	background-size:86%;
	background-repeat:no-repeat;
	z-index: 15;
}

@media (min-width: 1080px) {
	.page #ulMenu{
		padding-left: calc( var(--logo-size) * 0.8 );
	}
	#ulMenu li{
		list-style-type:none;
	}
	.liMenuText{
		padding:.2em 1em;
	}

	/* LOGO HOME */
	#liMenuHome{
		width: var(--logo-size);
		height: var(--logo-size);
		position: absolute;
		top: 0;
		left: 0;	
		display: flex;
		justify-content: flex-start;
		background-color: white;
		border-radius: 0 0 100% 100%;
		box-shadow: var(--box-shadow);
		transition: var(--transition-all);
		z-index: 10;
	}
	.page #liMenuHome{
		width: calc( var(--logo-size) * 0.8);
		height: calc( var(--logo-size) * 0.8);
		top: -10%;
	}
	#liMenuHome:hover{
		box-shadow: var(--box-shadow-hover);
	}
	#liMenuHome a{
		width: 100%;
		height: 100%;
	}
	#liMenuHome span{
		display:none;
	}


	/* BOUTONS SURVOL */

	#liMenuDivers{
		width: var(--menu-divers-size);
		padding:0 var(--boutons-margin);
		text-align: center;
		box-sizing: content-box;
	}
	#divers-link{
		font-size: 28px;
	}
	#divers-link:hover,
	#divers-link:focus-within{
		color: var(--bg-f-cfa);
	}

	.liMenuSurvol{
		background-color: #5e5e5e;
		border-radius: var(--boutons-radius);
		border-radius: var(--boutons-radius-pill);
		margin:0 var(--boutons-margin);
		width : calc( ( ( 100% - var(--boutons-margin) * 2 ) - var(--reseaux-size) - var(--menu-divers-size) ) / 3 );
		text-align: center;
		position: relative;
		height: 55%;
		transition: var(--transition-all);
		cursor: pointer;
	}
	#liMenuDivers{
		position: relative;
		transition: var(--transition-all);
		cursor: pointer;
	}
	#liMenu-alternants{
		margin-left:0;
	}
	#liMenu-tuteurs{
		margin-right:0;
	}
	.content .liMenuSurvol>a{
		display: block;
		color: white;
		font-size: 105%;
		font-weight: 500;
		letter-spacing: 1px;
		text-transform: uppercase;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: center;
		align-items: center;
		overflow: clip;
		position: relative;
		padding-left:56px;
		border-radius: var(--boutons-radius-pill);
		transition: var(--transition-all);
	}
	.liMenuSurvol>a:before{
		font-family: var(--font-awesome);
		font-weight: 600;
		position: absolute;
		font-size: 140%;
		left: 0;
		top: 0;
		height: 56px;
		/*border-top-left-radius: var(--boutons-radius);
		border-bottom-left-radius: var(--boutons-radius);
		border-top-left-radius: var(--boutons-radius-pill);
		border-bottom-left-radius: var(--boutons-radius-pill);
		border-top-right-radius: 22% 100%;
		border-bottom-right-radius: 15% 100%;
		border-bottom-right-radius: 0;*/
		border-radius: 100%;
		width: 66px;
		text-align: center;
		transition: var(--transition-all);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
		top: -9px;
		left: 0;
	}
	.liMenuSurvol:hover,
	.liMenuSurvol:hover>a,
	.liMenuSurvol:hover>a:before,
	.liMenuSurvol:focus-within>a:before
	{
		/*border-top-right-radius: 0;*/
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	#liMenu-alternants{background-color: var(--bg-alternants);}
	#liMenu-entreprises{background-color: var(--bg-entreprises);}
	#liMenu-tuteurs{background-color: var(--bg-tuteurs);}

	#liMenu-alternants>a:before{
		content: "\f19d";
		background-color: var(--bg-f-alternants);
		color:var(--col-alternants);
	}
	#liMenu-entreprises>a:before{
		content: "\f0f2";
		background-color: var(--bg-f-entreprises);
		color:var(--col-entreprises);
	}
	#liMenu-tuteurs>a:before{
		content: "\f508";
		background-color: var(--bg-f-tuteurs);
		color:var(--col-tuteurs);
	}

	#liMenuReseaux #menu-contact-a{
		font-size: 80%;
	}
	#liMenuReseaux #menu-contact-a:hover{
		color:white;
	}

	/* SOUS MENU */
	#liMenu-alternants:hover #sous-menu-alternants,
	#liMenu-alternants:focus-within #sous-menu-alternants,

	#liMenu-entreprises:hover #sous-menu-entreprises,
	#liMenu-entreprises:focus-within #sous-menu-entreprises,

	#liMenu-tuteurs:hover #sous-menu-tuteurs,
	#liMenu-tuteurs:focus-within #sous-menu-tuteurs,

	#liMenuDivers:hover #sous-menu-divers,
	#liMenuDivers:focus-within #sous-menu-divers

	{
		max-height:450px;
		padding: 1.5em 1.3em;
	}
	#liMenuDivers:hover #divers-link,
	#liMenuDivers:focus-within #divers-link
	{
		color: var(--bg-f-cfa);
	}

	.sous-menu{
		min-width : 110%;
		padding: 0;
		border-radius: var(--boutons-radius);
		border-top-left-radius: 0;
		border-top-right-radius: var(--boutons-radius-pill);
		position: absolute;
		top:calc( 100% + 1px );
		max-height: 0;
		left:0;
		text-align: left;
		box-shadow: var(--box-shadow);
		transition: var(--transition-all);
		overflow: hidden;
		z-index: 20;
	}
	#sous-menu-alternants{background-color: var(--bg-alternants);}
	#sous-menu-entreprises{background-color: var(--bg-entreprises);}
	#sous-menu-tuteurs{background-color: var(--bg-tuteurs);}
	#sous-menu-divers{background-color: white;}

	.sous-menu:after{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 66px;
		border-top-left-radius: var(--boutons-radius);
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 100%;
		width: 66px;
		text-align: center;
		z-index: 0;
	}
	#sous-menu-alternants:after{background-color: var(--bg-f-alternants);}
	#sous-menu-entreprises:after{background-color: var(--bg-f-entreprises);}
	#sous-menu-tuteurs:after{background-color: var(--bg-f-tuteurs);}

	.content .sous-menu>a{
		color: white;
		font-size: 90%;
		display: block;
		white-space: nowrap;
		position: relative;
		z-index: 2;
	}
	.content #sous-menu-divers.sous-menu>a{
		color: var(--main-grey);
	}
	.content .sous-menu>a:hover{
		color: var(--sous-menu-hover);
	}
	.content #sous-menu-divers.sous-menu>a:hover{
		color: var(--bg-f-cfa);
	}
	.sous-menu>a i{
		opacity: .7;
		font-weight: 800;
		transform: scale(.6);
		padding-right: .2em;
	}

	.content .sous-menu>a.sous-menu-mainlink{
		font-weight: 600;
		font-size: 105%;
		padding-bottom: .5em;
		margin-bottom: 0;
		/*border-bottom: 2px dotted var(--sous-menu-hover-o);*/
	}
	.content .sous-menu>a.sous-menu-underline
	{
		padding-bottom: 1em;
		margin-bottom: .7em;
		border-bottom: 2px dotted var(--sous-menu-hover-o);
	}
	.content .sous-menu>a.sous-menu-mainlink i{
		opacity: 1;
		transform: scale(1);
		padding-right: .3em;
	}

	.content .sous-menu>a.sous-menu-espace{
		font-weight: 600;
		margin-bottom: .2em;
	}
	.content .sous-menu>a.sous-menu-espace i{
		opacity: 1;
		transform: scale(.8);
		padding-right: .2em;
	}
}

.sous-menu a:before{
	content: "\f04b";
	font-family: var(--font-awesome);
	opacity: .7;
	font-weight: 800;
	transform: scale(.6);
	padding-right: 0.5em;
	display: inline-block;
}
.sous-menu a.sous-menu-mainlink:before{
	content: "\f573";
	opacity: 1;
	transform: scale(1);
}
.sous-menu a.sous-menu-etablir:before{
	content: "\f03a";
}
.sous-menu a.sous-menu-deposer:before{
	content: "\e054";
}
.sous-menu a.sous-menu-consulter:before{
	content: "\f03a";
}
.sous-menu a.sous-menu-cv:before{
	content: "\e1d2";
}
.sous-menu a.sous-menu-espace:before{
	content: "\f2f6";
	opacity: 1;
	transform: scale(.8);
}
.sous-menu a.sous-menu-rechercher:before{
	content: "\e661";
}

/* RECHERCHE */

#liMenuReseaux>div{
	display: flex;
	flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
	position: relative;
	height: 100%;
}
#menu-search .fa-stack{
	cursor: pointer;
}

#header-search{
	background-color: white;
	padding:0;
	transition: var(--transition-all);
	position: absolute;
	top: calc( 100% );
	left:0;
	z-index: 20;
	max-height: 0;
	overflow: hidden;
	box-shadow: var(--box-shadow);
}
#search-input{
	background-color: white;
	border: 0;
	border-radius: 0;
	padding:1em 1em;
	height: 3em;
}
#header-search form{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
}
#header-search button{
	font-size: 100%;
    background-color: var(--main-grey);
    padding: 1em;
    border-radius: 0;
    line-height: 1;
    letter-spacing: 0;
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
	height: 3em;
}
#header-search button i{
	padding: 0;
}
#header-search:hover,
#header-search:focus
{
	box-shadow: var(--box-shadow-hover);
}

#menu-search:hover #header-search,
#menu-search:focus-within #header-search{
	max-height: 50px;
}
#menu-search:hover .fa-stack .fa-stack-2x,
#menu-search:focus-within .fa-stack .fa-stack-2x
{
	font-weight: 900 !important;
}
#menu-search:hover .fa-stack .fa-stack-1x,
#menu-search:focus-within .fa-stack .fa-stack-1x
{
	color: white !important;
}


/* RESEAUX */
#liMenuReseaux{
	width: var(--reseaux-size);
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
	padding-left: var(--boutons-margin);
	height: 100%;
}
#liMenuReseaux a{
	color: var(--couleur-reseaux);
	font-size: 100%;
	display: block;
}
a#menu-search{
	/*font-size: 190%;*/
}
.a-round{
    border: 1px solid;
    border-radius: 22px;
    padding: 0 .8em;
	font-weight: 500;
}
#liMenuReseaux .fa-stack{
	font-size: 90%;
}
#liMenuReseaux .fa-instagram{
	font-weight: 900;
}
#liMenuReseaux .fa-stack-2x:before{
	/*color: white;
	border: 1px gray;*/
	color: #e8e8e8;
}
#liMenuReseaux .fa-stack:hover .fa-stack-2x{
	font-weight: 900;
}
#liMenuReseaux .fa-stack:hover .fa-stack-2x:before{
	color: var(--couleur-reseaux);
}
#liMenuReseaux .fa-stack:hover .fa-stack-1x{
	color: white;
	/*font-weight: 400;*/
}
.a-round:hover{
    background-color: var(--couleur-reseaux);
	border-color: var(--couleur-reseaux);
	color: white;
}
a#menu-contact:hover{
	color: white;
}
#menu-sociaux{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* PAGE TITRE */

.page-titre{
    height: var(--page-titre-height);
    width: 100%;
    
    position: relative;
    z-index: 1;
    background-position-x: 43vw;
    background-repeat: no-repeat;
    background-size: auto 100%;

    overflow: hidden;
}
.page-titre.menu-3{
    /*background-position-x: 48vw;*/
	background-position-x: 50vw;

	height: var(--page-titre-actu-height);
	background-image : none !important;
}
.page-titre.menu-3 .page-titre-text-container{
    display: none;
}
.page-titre.page-adm{
    height: calc( var(--page-titre-height) / 1.5 );
    background-position-y: center;
    background-size: auto 140%;
}

.page-titre.alternants { background-image: url(../img/page-titre-alternants-1.jpg); }
.page-titre.entreprises { background-image: url(../img/page-titre-entreprises-1.jpg); }
.page-titre.tuteurs { background-image: url(../img/page-titre-tuteurs-1.jpg); }

.page-titre.page-adm { background-image: url(../img/page-titre-adm-1.jpg); }

.page-titre.page-adm.page-titre-resp { background-image: url(../img/page-titre-tuteurs-1.jpg); }

.page-titre.cfa { background-image: url(../img/page-titre-cfa-1.jpg); }

.page-titre-container{
    height: 100%;
    max-width: var(--header-max-width);
    margin: 0 auto;
    position: relative;
}

.page-titre-text-container{
    color: white;
    font-family: var(--font-title);
    font-size: 250%;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    border-radius: 50%;
    height: 300%;
    transform: translateY(-33.33%);
}
.alternants .page-titre-text-container,
.page-titre.alternants
{
    background-color: var(--bg-f-alternants);
}
.entreprises .page-titre-text-container,
.page-titre.entreprises
{
    background-color: var(--bg-f-entreprises);
}
.tuteurs .page-titre-text-container,
.page-titre.tuteurs
{
    background-color: var(--bg-f-tuteurs);
}
.page-titre.page-adm .page-titre-text-container,
.page-titre.page-adm
{
    background-color: var(--bg-f-adm);
}
.page-titre.page-adm.page-titre-resp .page-titre-text-container,
.page-titre.page-adm.page-titre-resp
{
    background-color: var(--bg-f-tuteurs);
}
.page-titre.cfa .page-titre-text-container,
.page-titre.cfa
{
    background-color: var(--bg-f-cfa);
}
.page-titre-text{
	width: 100%;
    padding-left: var(--logo-size);
    padding-right: 50px;
    text-align: left;
	line-height: 1.7;
}
.page-adm .page-titre-text{
	line-height: 1.2;
}
.page-titre-text.titre-long{
	line-height: 1.5;
	font-size: 90%;
}

.menu-3 .page-titre-text-container{
   border-radius:0;
}

/* ARIANE */

#ariane{
    position: absolute;
    top: 24px;
    left: calc( var(--logo-size) * 1.25 );
    z-index: 10;
    color: white;  
    font-size: 95%;  
	font-family: var(--font-condensed);
	width: 50%;
}
.page-titre.page-adm #ariane{
    top: 16px;
}
#ariane .ariane-separator{
    transform: scale(.5);
    opacity: .7;
}
#ariane .ariane-home{
    font-weight: 400;
}
#ariane a{
	position: relative;
}
#ariane a:hover{
	color: white;
}
#ariane a:after{
	content: '';
    display: block;
    width: 0;
    height: 1px;
    transition: width .3s;
	background: white;
	position: absolute;
	left: 0;
}
#ariane a:hover:after{
    width: 100%;
}
#ariane-content{
	width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 2.5em;
    white-space: nowrap;
}



/* HEADER SMALL */
@media (min-width: 1080px) {
	.header-small header{
		position:fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		box-shadow: var(--box-shadow);
	}
	.header-small #ulMenu{
		height: var(--header-small-height);
	}
	.header-small.noHeaderSmall header{
		position:unset !important;
	}
	.header-small #ulMenu{
		padding-left: calc( var(--logo-size) * 0.8 );
	}
	.header-small.page #ulMenu{
		padding-left: calc( var(--logo-size) * 0.7 );
	}

	.header-small #liMenuHome{
		transform: scale(.6) translateY(-40%);
	}
	.header-small.page #liMenuHome{
		transform: scale(.7) translateY(-20%);
	}
	.header-small #logoHome{
		background-size:96%;
	}

	.header-small .liMenuSurvol{
		height: 100%;
		border-radius: 0;
	}
	.header-small .liMenuSurvol>a:before,
	.header-small .liMenuSurvol>a {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	.header-small .liMenuSurvol:hover>a,
	.header-small .liMenuSurvol:hover>a:before,
	.header-small .liMenuSurvol:focus-within>a,
	.header-small .liMenuSurvol:focus-within>a:before {
		border-top-right-radius: 0;
	}
	.header-small #liMenuReseaux div:not(#menu-contact){
		font-size: 90%;
	}

	.header-small .sous-menu,
	.header-small .sous-menu:after
	{
		border-top-left-radius: 0;
	}
	.header-small .sous-menu {
		top: 100%;
	}
}

#menuToggle {
    display: none;
}

@media print {
	header{
		display: none;
	}
}