/* Modèle graphique du menu de niveau ROOT */
/* --------------------------------------- */
#menu_deroulant,
#menu_deroulant * {
    z-index: 10;
}
#menu_deroulant {
    background: #c0bda4;
}

#menu_deroulant ul {
	top:0px; 		
	left:0px;		/* parametre : abscisse gauche du menu */
	margin-top: 0;  /* parametre : ordonnée haute du menu */
	margin-bottom: 0; /* determine une hauteur minimum sous le menu */
    margin-left: 80px;
	border:0px solid red;
    float: left;
}

#menu_deroulant ul li {
	margin-bottom:0px; /* parametre : espacement vertical entre les boutons */
	border:0px solid green;
}

#menu_deroulant ul a {
	height:40px;		/* parametre : hauteur des boutons du menu (à la racine)*/
	/*width:180px;	*/	/* parametre : largeur des boutons du menu (à la racine) */
	padding: 0 15px;
	text-align:left;
	color:#fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 40px;
	text-decoration:none;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    text-transform: uppercase;
}
#menu_deroulant ul a:hover,
#menu_deroulant ul li:hover {
	color:#fff;
	background-color:#a6a38d;
}
#menu_deroulant li.sous_menu > a {
	background-image:url(ico_submenu.png);
	background-position:right 15px;
	background-repeat:no-repeat;
    padding: 0 25px 0 15px;
}
/* Modèle graphique du menu de niveau 1 */
/* ------------------------------------ */
#menu_deroulant ul ul {
	top: 40px;		/* parametre : ordonnée haute du sous-menu par rapport à son bouton d'origine */
	left:0;		/* parametre : abscisse gauche du sous-menu par rapport à son bouton d'origine */
	border:0;
    box-shadow: 0 5px 5px rgba(0,0,0,0.4);
}

#menu_deroulant ul ul a {
	width:350px; /* parametre : largeur des boutons du sous-menu */
	background-color:#a6a38d; 
	text-align:left;
	padding: 0 10px;	
	color: #fff;
    margin:0;
    overflow: hidden;
    text-decoration:none;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}
#menu_deroulant ul ul a:hover {
	color: #fff;
	background-color:#8c8a77;
}
    .back-to-home {
        height: 40px;
        width: 40px;
        position: absolute;
        left: 20px;
        top: 20px;
        color: #fff;
        display: block;
        line-height: 40px;
        text-align: center;
        z-index: 20;
    }
/* Spé - back to home
--------------------------------------------------------------------------------- */    
    .back-to-home:hover {
        color: #fff;
    }
        .back-to-home:before {
            content: "";
            width: 40px;
            height:40px;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            background: #0092b6;
            display: block;
            margin: auto;
       -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
         -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 400ms ease-in-out;
       -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;
         -o-transition: all 400ms ease-in-out;
            transition: all 400ms ease-in-out;
            z-index: -1;
        }
        .back-to-home:hover::before {
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
            box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
            -moz-transform: scale(1.2) rotate(135deg);
            -webkit-transform: scale(1.2) rotate(135deg);
            -o-transform: scale(1.2) rotate(135deg);
            -ms-transform: scale(1.2) rotate(135deg);
            transform: scale(1.2) rotate(135deg);
        }
        
/* Modèle graphique du menu de niveau 2 et plus */
/* ------------------------------------ */
#menu_deroulant ul ul ul {
	top:10px;		/* parametre : ordonnée haute du sous-menu par rapport à son menu parent */
	left:170px;		/* parametre : abscisse gauche du sous-menu par rapport à son menu parent */
	border:0;
}

/* VARIANTES DE COULEURS SUR LES LIENS DE LA RUBRIQUE COURANTE / */
/* ------------------------------------------------------------------- */

    #menu_deroulant .courant:first-child {
    }
    #menu_deroulant ul ul .courant:first-child {
    }

        
        
/* ------------------------------------------------------------------------------------------
    == RESPONSIVE
------------------------------------------------------------------------------------------ */
@media (max-width:768px) {

	#menu_deroulant	{
		display:none;
	}

    #menu_deroulant .courant {
        border-bottom: 3px solid transparent;
    }
	#menu_deroulant ul li {
		float:none; /* on passe en menu vertical */
	}
	
	#menu_deroulant ul  {
		width:100%;
        float: none;
        border-top: 1px solid #a6a38d;
        margin: 0;
	}
	
	#menu_deroulant ul a 
	{
		 text-align: left;
	}
	
	#menu_deroulant ul ul a 
	{
		width:100%;
		border-left:1px solid #FFFFFF;
		
	}
	
	#menu_deroulant ul ul li
	{
		padding-left:5%;
	} 

	
	#menu_deroulant ul ul, #menu_deroulant ul ul ul 
	{
		position:relative;
		top: 0px;		/* parametre : ordonnée haute du sous-menu par rapport à son bouton d'origine */
		left:0px;		/* parametre : abscisse gauche du sous-menu par rapport à son bouton d'origine */
		box-shadow: none;

	}

	/* Icone "hamburger' :*/
	.menu_deroulant_button {
        background: #c0bda4;
        color:#fff;
        cursor:pointer;
        display:block; 
        padding: 10px;
        text-align: right;
	} 
	.menu_deroulant_button span {
        display: inline-block;
        /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
        font-family: Arial, sans-serif;
        font-weight: bold;
        padding: 0 5px;
        text-transform: uppercase;
	} 


    .back-to-home {
        top: 0px;
    }
    
}