/* Page d'accueil */

.page_accueil
{
  height:100vh;
  
  display:flex;
  flex-direction:column;
  
}

.item
{
  /*font-size:2em;*/
  margin:0px;
  padding:0px;
  /*border:solid 2px black;*/
  text-align:center;
}

.header_acc
{
  background-color: #ada087;
  height:70px;
}

header_acc h1
{
	font-family:"Arial";
	font-size:25px;
	color:white;
	font-weight:bold;
	margin-left:10px;
	
}
header_acc p
{
	font-family:"Arial";
	font-size:15px;
	color:white;
	font-weight:bold;
	margin-left:10px;
}


.zones_titre_acc
{
	flex: 1;
	display: flex;
	flex-direction:row;
}

.zone_titre_1_acc
{
	width:10%;
	
}

.zone_titre_2_acc
{
	width:90%;
	
	text-align:left;
	
}

/* Zone de connection ---------------------------- */ 
#zone_cnx
{
	position: absolute; 
	top: 30%; left: 50%;
	transform: translate(-50%, -50%);
}

#zone_img
{
	width:100%;
	height:100%;
	position:relative;
    
	
}

/* ---AUTRES PAGES DU SITE --------------------------------------------------------- */
/* le container du site */

.container
{
  height:100vh;
 
  display:flex;
  flex-direction:column;
}

.item
{
  /*font-size:2em;*/
  margin:0px;
  padding:0px;
  /*border:solid 2px black;*/
  text-align:center;
}

.flexbody /* le corps principal du site */
{
  flex:1; /*cet élément va occuper toute la place disponible sur l'axe vertical*/
  display:flex; /*les éléments contenus dans celui-ci s'afficheront en ligne*/
  flex-direction:row; /*valeur par défaut*/
  
}


/* -------------------------------------------------- */
.header
{
  background-color: #ada087;
  height:70px;
}

header h1
{
	font-family:"Arial";
	font-size:25px;
	color:white;
	font-weight:bold;
	margin-left:10px;
	
}
/* Header ------------------------------------- */
header p
{
	font-family:"Arial";
	font-size:15px;
	color:white;
	font-weight:bold;
	margin-left:10px;
}


.zones_titre
{
	flex: 1;
	display: flex;
	flex-direction:row;
}

.zone_titre_1
{
	width:10%;
	
}

.zone_titre_2
{
	width:50%;
	
	text-align:left;
	
}

.zone_titre_3
{
	width:30%;
	
	text-align: left;
	
	
}

.zone_titre_4
{
	width:10%;
	
	
}

header h1
{
	font-family:"Arial";
	font-size:25px;
	color:white;
	font-weight:bold;
	margin-left:10px;
	
}

/* -Autres pages-------------------------------------- */


.sections
{
	flex:1; /*cet élément va occuper toute la place disponible sur l'axe vertical*/
  	display:flex; /*les éléments contenus dans celui-ci s'afficheront en ligne*/
  	flex-direction:column; /*valeur par défaut*/
	
	  
}

.content
{
	margin-top: 30px;
	margin-left: 30px;
	width: 75%;
}

/* ---------------------------------------------------------- -*

/* Bares verticales */
#aside
{
	vertical-align:top;
	text-align:justify;
	
	
}
#aside h1
{
	font-family:"Arial";
	font-size:20px;
	color:black;
	font-weight:bold;
	margin-left:10px;
}



.asideD
{
  background-color: #ada087;
  width:15%;
  padding-right: 0;
}

#aside p,a
{
	margin-left: 15px;
	font-family:"Arial";
	font-size: 12px;
	color:black;
}

.aside_image
{
	flex: 1;
	display: flex;
	flex-direction:row;
	max-width: 100%; 
}

.aside_image img
{
	max-width: 100%;
}


/* Pied de page ---------------------- */

.footer
{
 background-color:#ada087;
 height:80px;
}

footer h1
{
	font-size:16px;
	color:white;
}

footer p, a
{
	font-size:12px;
	color:white;
}

.zones_footer
{
	flex: 1;
	display: flex;
	flex-direction:row;
}



.zone_footer_1
{
	width:33%;
	border:solid 2px white;
	text-align:left;
}

.zone_footer_2
{
	width:33%;
	border:solid 2px white;
	text-align:left;
}

.zone_footer_3
{
	width:33%;
	border:solid 2px white;
	text-align:left;
}

/*margin codepen*/
body{
  margin:0;
}

/* --------------------------------  MENU -------------------------------------------- */
.barre_menu
{
   	height:50px;
    background-color: #000000;
    background-image:-webkit-linear-gradient(top, #bbb7b7 0%, #292727 100%);
    background-image:linear-gradient(to bottom, #bbb7b7 0%, #292727 100%);
   
}

nav
{
    width: 100%;
    margin: 0 auto;
    
}

nav ul
{
    list-style-type: none;
}

nav ul li
{
    float:left;
    width: 25%;
    text-align:left;
}

nav ul::after
{
    content:"";
    display: table;
    clear: both;
}

nav a
{
    display:block;
    text-decoration: none;
	font-family:arial;
	font-weight: bold;
	font-size: 15px;
    color: white;
    border-bottom: 2px solid transparent;
    padding: 10px 0px;
}

nav a:hover
{
    color:#108bdd;
    border-bottom: 2px solid #108bdd;
}

.sousmenu
{
    display:none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: rgb(170, 162, 162);
}

nav > ul li:hover .sousmenu{
    display:block;
}

.sousmenu li
{
    float:none;
    width: 100%;
    text-align: left;
	background-color: #CCC;
}

.sousmenu a
{
    padding:10px;
    border-bottom: none;
}

.sousmenu a:hover
{
    border-bottom: none;
    background-color: #108bdd;
	color: black;
}
/*
.deroulant>a::after
{
    content:"";
    font-size: 12px;
}
*/
.sousmenu
{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: #108bdd;
    position:absolute;
    width: 100%;
    z-index: 1000;
}

nav ul li
{
    float:left;
    width:20%;
    text-align: center;
    position:relative;
}