:root {
    --padding-left: 5px;
    --taille-body: 680px;
    --taille-body-header: 50px;
    --hauteur-champ-formulaire: 25px;
	--couleur-header: white;
    --degrade-blanc : rgb(255, 255, 255) 1px 0px 0px, rgb(255, 255, 255) 0.540302px 0.841471px 0px, rgb(255, 255, 255) -0.416147px 0.909297px 0px, rgb(255, 255, 255) -0.989993px 0.14112px 0px, rgb(255, 255, 255) -0.653644px -0.756803px 0px, rgb(255, 255, 255) 0.283662px -0.958924px 0px, rgb(255, 255, 255) 0.96017px -0.279416px 0px;
    --degrade-noir: rgb(0, 0, 0) -1px 0px 0px, rgb(0, 0, 0) -0.540302px -0.841471px 0px, rgb(0, 0, 0) 0.416147px -0.909297px 0px, rgb(0, 0, 0) 0.989993px -0.14112px 0px, rgb(0, 0, 0) 0.653644px 0.756803px 0px, rgb(0, 0, 0) -0.283662px 0.958924px 0px, rgb(0, 0, 0) -0.96017px 0.279416px 0px;
	--couleur-parchemin: #fef3e0;
}


* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.cacher {
	display: none !important;
}
.invisible {
	visibility: hidden;
}
.alert, .danger {
    color: red !important;
}
.couleur-banniere {
    color: var(--couleur-banniere);
}
.ok {
	color: darkgreen !important;
}
.info {
	color: orange !important;
}
.border_alert {
	border: 2px solid red !important;
}



.selectionnable:hover, .selectionnable div:hover 
{
	color: var(--couleur-banniere) !important;
	cursor: pointer;
}
header .selectionnable:hover, header a:hover
{
	color: black !important;
}



ul, li {
    list-style: none;
}
li:hover, a:hover {
	color: var(--couleur-banniere);
	cursor: pointer;
}
a {
	text-decoration: none;
	color: black;
}


html {
	height: 100%;
}
body {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: white;
	color: black;
	visibility: hidden;
}


header {
	border: 2px solid var(--couleur-header);
	background: var(--couleur-header);
	flex: 0 0 50px;
}

/* conteneur principal de la page */
#main_page {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
}
#main_page aside#banniere_gauche {
/*	position: relative;
	flex: 0 1 10px;
*/

	position: fixed;
	margin-top: 200px;
	min-width: 250px;
}
#main_page aside#banniere_gauche.cacher {
	display: none;
}
/* conteneur secondaire de la page */
#main_page #main_body {
	position: relative;
	flex: auto;
}
#main_page aside#banniere_droite {
	position: relative;
	flex: 0 1 10px;
	display: flex;
	flex-direction: column;
	max-width: 400px;
}


/* ******************************************************** */

/* ****************** BANNIERE DU HEADER ****************** */

/* ******************************************************** */


/* conteneur principal du header */
header nav {
	display: flex;
	font-family: georgia, times, arial;
}



/* conteneur 1 : logo boilerbox ****************** */
header nav #logo_ibc {
	display: flex;
	font-size: 8px;
	letter-spacing: 4px;
    line-height: 10px;
	margin: auto;
	padding-left: var(--padding-left);
}
header nav #logo_ibc img {
	height: 40px;
	padding-right: 5px;
}
header nav #logo_ibc ul li:first-letter {
	color: white;
	font-size: 12px;
    text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989993px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756803px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279416px 0px;

}
header nav #logo_ibc ul li {
	cursor: default;
}


/* conteneur 2 : menu déroulant ****************** */
header nav ul#menu_header {
	display: flex;
	flex: auto;
	height: 60px;
	z-index: 1;
}

/* premier niveau du menu */
header nav ul#menu_header > li {
    flex: auto;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
	padding-top: 20px;
}
/* Css spécifique pour le menu Configuration rapide */
header nav ul#menu_header > li:nth-child(3) {
	padding-top: 15px;
}


/* second niveau du menu */
header nav ul#menu_header > li ul.sous_menu_principal {
    visibility: hidden;
	opacity: 0;
    background: var(--couleur-header);
	border-radius: 0 0 10px 10px;
	padding-top: 5px;
	padding-left: 10px;

    transition-property: opacity;
    transition-duration: .3s;
    transition-timing-function: linear;
}
header nav ul#menu_header > li:hover > ul.sous_menu_principal {
    visibility: visible;
	opacity: 1;
}
header nav ul#menu_header > li li {
	text-align: left;
	font-weight: normal;
    font-size: 18px;
	height: 30px;
}
header nav ul#menu_header > li li:hover {
	color: var(--couleur-banniere);
	font-weight: bold;
	font-size: 15.6px;
}





/*conteneur 3 : partie recherche ****************** */
header nav #recherche {
	margin: auto;
}
header nav #recherche img {
	height: 20px;
}


/* ******************************************************** */

/* ******************   BANNIERE HAUTE   ****************** */

/* ******************************************************** */

div#banniere_haute {
	padding-left: var(--padding-left);
	color: var(--couleur-banniere);
    text-shadow: var(--degrade-blanc);
    border: 2px solid var(--couleur-banniere);
    background: var(--couleur-banniere);
    flex: 0 0 80px;
	display: flex;
	justify-content: center;
}

div#banniere_haute h1 {
    font-weight: 900;
    font-size: 48px;
    font-stretch: expanded;
    letter-spacing: 4px;
}


/* ******************************************************** */

/* ******************   BANNIERE DROITE  ****************** */

/* ******************************************************** */
#banniere_droite div#entete_banniere_droite {
	flex: 0 0 var(--taille-body-header);
	color: white;
    text-shadow: var(--degrade-noir);
    font-size: 20px;
	letter-spacing: 1px;
	display: flex;
}
/* Utilisé lorsqu'il y a deux menus dans l'entete */
#banniere_droite div#entete_banniere_droite div {
	color: white;
	flex: auto;
	margin: auto;
	text-align: center;
	border-right: 2px solid black;
	padding: 5px;
}
#banniere_droite div#entete_banniere_droite > div:last-child {
	border: none;
}

#banniere_droite div#corps_banniere_droite {
	padding: 10px;
	flex: 0 1 var(--taille-body);
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
}
#banniere_droite div#corps_banniere_droite.cacher {
	display: none;
}
#banniere_droite div#corps_banniere_droite > div {
	margin-bottom: 3px;
}
#banniere_droite div#corps_banniere_droite div {
	flex: 0 0 30px;
	display: flex;
	align-items: center;
}
#banniere_droite div#corps_banniere_droite div.content_sous_entity {
	display: flex;
}
#banniere_droite div#corps_banniere_droite div.content_sous_entity div:first-child {
    flex: 0 0 150px;
}
#banniere_droite div#corps_banniere_droite div.content_sous_entity div {
	padding: 2px;
}





/* ******************************************************** */

/* ******************    PAGE  CENTRAL   ****************** */
/*				        ( block body )						*/
/* ******************************************************** */

#main_page #main_body section.configuration {
	height: var(--taille-body);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow-y: scroll;
	margin-top: var(--taille-body-header) ;
}

/* Formulaires ****************** */
#main_page #main_body section.configuration article.configuration {
	flex: 0 1 600px;
	display: flex;
	position: relative;
}
#main_page #main_body section.configuration article.configuration > form {
	flex: auto;
}
#main_page #main_body section.configuration article.configuration > form > div {
    display: flex;
	flex-direction: column;
}
#main_page #main_body section.configuration article.configuration > form > div > div {
    display: flex;
	flex: auto;
}
#main_page #main_body section.configuration article.configuration > form > div > div > div:not(:has(button)) {
    display: flex;
	flex: auto;
}


#main_page #main_body section.configuration article.configuration > form > div > div label {
	flex: 0 0 200px;
	margin: 2px;
}
#main_page #main_body section.configuration article.configuration > form > div > div label:hover {
    color: var(--couleur-banniere);
}

#main_page #main_body section.configuration article.configuration > form > div > div input {
    flex: 3 0 250px;
    margin: 2px;
	height: var(--hauteur-champ-formulaire);
}
#main_page #main_body section.configuration article.configuration > form > div > div input.petit_input {
    flex: 0 0 100px;
	max-width: 100px;
    margin: 2px;
    height: var(--hauteur-champ-formulaire);
}
#main_page #main_body section.configuration article.configuration > form > div > div input:hover {
    border: 2px solid var(--couleur-banniere);
}
#main_page #main_body section.configuration article.configuration > form > div > div select {
    flex: 3 0 250px;
    margin: 2px;
    height: var(--hauteur-champ-formulaire);
}
#main_page #main_body section.configuration article.configuration > form > div > div select:hover {
	border: 2px solid var(--couleur-banniere);
}
#main_page #main_body section.configuration article.configuration > form > div div.petit_select select {
	flex: 3 0 50px;
	max-width: 100px;
}
#main_page #main_body section.configuration article.configuration > form > div > div textarea {
    flex: 3 0 250px;
    margin: 2px;
	height: calc(var(--hauteur-champ-formulaire) + 20px);
}
#main_page #main_body section.configuration article.configuration > form > div > div textarea:hover {
    border: 2px solid var(--couleur-banniere);
}
#main_page #main_body section.configuration article.configuration > form > div > div:has(button) {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}
#main_page #main_body section.configuration article.configuration > form > div > div button {
    height: 30px;
    width: 100px;
    margin: 10px;
	margin-top: 30px;
	border-radius: 5px;
}
#main_page #main_body section.configuration article.configuration > form > div > div button:hover {
	color: white;
	background: var(--couleur-banniere);
}

p.menu_accueil_parc_site {
	display: flex;
	justify-content: center;
	align-items: center;
	border:2px solid black;
	height: 40px;
	font-size: 1.3em;
	background-color: lightgray;
	font-weight: bold;
}