#e-toolbar {
	background:      #FF9900;
	height:          7vh;
	color:           white;
	width:           100%;
	padding:         0;
	border:          0;
	display:         flex;
	flex-wrap:       wrap;
	justify-content: space-between;
	
	position:        fixed;
	z-index:         999999;
	
	}

#e-toolbar > div {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

/* STRUCTURE */
#e-toolbar .e-info, #e-toolbar .e-tools {
	flex: 1 0 20%;
	
	}

#e-toolbar .e-title {
	flex:            1 0 50%;
	height:          7vh;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	}

/* LOGO */
#e-toolbar .e-info {
	display:         flex;
	justify-content: flex-start;
	flex-direction:  row;
	}

#e-toolbar .e-info h1 {
	width: 8vw;
	}

#e-toolbar .e-info h1 a, #e-toolbar .e-info h1 a:hover {
	color:           white;
	text-decoration: none;
	}

/* TITRE */
#e-toolbar .e-title h1 {
	text-align:  center;
	font-family: ExtraBold;
	font-size:   4vh;
	}

#e-toolbar .e-title h2 {
	text-align:  center;
	font-family: Regular;
	font-size:   2.5vh;
	}

#e-toolbar .e-title h3 {
	text-align:  center;
	font-family: ExtraBold;
	font-size:   1.5vh;
	padding:     0;
	margin:      1vh 0 0 0;
	}

/* OUTILS */
#e-toolbar .e-tools > div {
	display:         flex;
	flex-direction:  row;
	justify-content: flex-end;
	
	}

#e-toolbar .e-tools > div > div {
	flex:            0 1 25%;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-content:   center;
	height:          6vh;
	}

#e-toolbar.retractable {
	top:        calc(-7vh + 10px);
	transition: .2s top cubic-bezier(0, .58, .23, 1.21);
	}

#e-toolbar.greyed {
	background: silver;
	}

#e-toolbar #toggler {
	height:     10px;
	background: rgba(0, 0, 0, .2);
	/*flex:       1 0 100%;*/
	text-align: center;
	opacity:    0;
	
	}

#e-toolbar.retractable #toggler {
	opacity:    1;
	transition: 1s opacity cubic-bezier(0, .58, .23, 1.21);
	}

#e-toolbar.retractable:hover {
	top: 0;
	}

#e-toolbar.retractable:hover #toggler {
	opacity: 0;
	}

/* BOUTONS
********************************************/
.btn {
	width:            100%;
	height:           6vh;
	margin-top:       .5vh;
	transform:        scale(0.9);
	transform-origin: 50% 50%;
	transition:       .5s transform cubic-bezier(0, .58, .23, 1.91);
	}

.btn._disabled {
    cursor: default;
    }

.btn:not(._disabled):hover {
	transform: scale(1);
	}

/*#btn-home {*/
/*background:          url(../img/btn-home.png) no-repeat;*/
/*background-size:     contain;*/
/*background-position: center center;*/
/*width:               6vw;*/
/*}*/

#btn-home {
	background: #FF9900;
	}

#btn-home.ultracourt {
	background: #5e181b
	}

#btn-portal, #btn-home {
	width:           6vw;
	font-size:       4vw;
	padding:         0;
	margin:          0;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	height:          7vh;
	line-height:     1em;
	}

#btn-home {
	font-family: ExtraBold;
	}

#btn-font {
	background:          url(../img/btn-font.png) no-repeat;
	background-size:     contain;
	background-position: center center;
	}

#btn-search {
	background:          url(../img/btn-search.png) no-repeat;
	background-size:     contain;
	background-position: center center;
	}

#search-form {
	overflow: hidden;
	}

#search-field {
	width:      0;
	transition: .5s width ease;
	overflow:   hidden;
	}

#search-field div {
	width: 20vw;
	}

#search-form.hover #search-field {
	width:         12vw;
	height:        4vh;
	margin-top:    .8vh;
	display:       block;
	border-radius: 100px;
	}


#search-form.hover #btn-search {
	display: none;
	}


#input-search {
	width:      9vw;
	height:     4vh;
	border:     0;
	text-align: center;
	padding:    0;
	background: rgba(0, 0, 0, .2);
	margin:     0;
	color:      white;
	}

#validate-search {
	background: rgba(0, 0, 0, .5);
	color:      white;
	border:     0;
	width:      3vw;
	height:     4vh;
	margin:     0;
	padding:    0 .5em;
	text-align: center;
	}

#btn-help {
	background:          url(../img/btn-help.png) no-repeat;
	background-size:     contain;
	background-position: center center;
	}

#btn-help._disabled {
	opacity: .2
	}

#btn-login {
	background:          url(../img/btn-login.png) no-repeat;
	background-size:     contain;
	background-position: center center;
	}

#btn-portail {
	background:          url(../img/btn-portail.png) no-repeat;
	background-size:     contain;
	background-position: center center;
	}

#btn-corrige {
	background:          url(../img/btn-corrige.png) no-repeat;
	background-size:     contain;
	background-position: center center;
	}


/* AIDE */
#e-toolbar div div .help {
	position:    absolute;
	top:         6vh;
	padding-top: 20vh;
	margin-left: 3vw;
	width:       6vw;
	}


#e-toolbar .help.first {
	padding-top: 40vh;
	}

#e-toolbar .help.last {
	padding-top: 40vh;
	
	}


#e-toolbar .e-tools div div:nth-of-type(odd) .help {
	padding-top: 10vh;
	}

#e-toolbar .help span {
	margin:        20px 0 0 -4.5vw;
	background:    white;
	border-radius: 4px;
	padding:       .3em;
	color:         black;
	display:       block;
	text-align:    center;
	font-size:     1vw;
	font-family:   Bold;
	width:         auto;
	box-shadow:    0 4px 8px rgba(0, 0, 0, .5);
	}

#e-toolbar .help.first span {
	margin: 20px 0 0 -2vw;
	width:  5vw;
	}


#e-toolbar .help.last span {
	margin: 20px 0 0 -3vw;
	width:  6vw;
	}


#help {
	background: #FF9900;;
	position:   fixed;
	top:        6vh;
	width:      100vw;
	height:     96vh;
	opacity:    0;
	z-index:    -900;
	transition: 1s opacity ease;
	}

#help .bloc {
	position:       fixed;
	top:            15vh;
	left:           15vw;
	width:          70vw;
	height:         70vh;
	background:     #f0f0f0;
	border-radius:  8px;
	z-index:        10000;
	box-shadow:     0 4px 20px gray;
	padding:        1vw;
	display:        flex;
	flex-basis:     1;
	flex-direction: row;
	align-content:  space-around;
	}

#help .bloc .content {
	font-size:       1.5vw;
	height:          100%;
	width:           100%;
	flex:            0 0 95%;
	overflow-x: auto;
	/*overflow-y: hidden;*/
	display:         flex;
	flex-direction:  column;
	justify-content: space-between;
	
	}

#help .bloc .content > div {
	
	}


#help .bloc .content .text {
	overflow-y: auto;
	height:     100%;
	flex:       1 1 80%;
	
	}

#help .bloc .content .audio {
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	align-content:   center;
	text-align:      center;
	
	flex:            1 1 20%;
	}

#help .bloc .content .audio .audioplayer {
	margin: 0 auto;
	}

.help {
	display:     none;
	border-left: 1px solid white
	}

.help.center {
	display:     none;
	margin: auto;
	top:40vh;
	left:45vw;
	text-align: center;
	position: absolute;
	border-left: 0;
	width: 20vw;
}

#accueil.help-on .help, .portail.help-on .help, #connexion.help-on .help {
	display: block;
	}

.help-on #help {
	display: block;
	opacity: .9;
	z-index: 100;
	}

#wrapper {
	transition: 1s filter cubic-bezier(0, .58, .23, 1.91);
	}

.help-on #wrapper {
	filter: blur(5px)
	}