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


#menu_haut { justify-content:center;display: flex; justify-content:center ;}
.menu_index {max-height:15px;}

#menu_haut a{text-decoration: none; color:white; font-size:120%; margin-top:0px; /* au lieu de 130% */
font-family: "Josefin Sans", sans-serif;
text-transform: uppercase;
letter-spacing: .13em;
}
#menu_haut a:hover { color:#848484;}
/*.menus1 {display: flex; justify-content:center; list-style: none none; padding:20px;}
*/
.menus1, .menus1histoire{ list-style: none none; margin: 0; padding: 0; line-height: 1; padding-top:10px; padding-bottom:10px;}
.menus1histoire{ max-width: 200px; }
.menus1 a, .menus1histoire a {display: block; padding:.5em; text-decoration: none;  }
.menus1 a:focus,.menus1 a:hover , .menus1histoire  a:focus, .menus1histoire a:hover{ text-decoration: underline; background:#f5f4f5;  }

.menu1 {
    float: left; /* Pour que les liens s'affichent horizontalement */
    position: relative; /* Crée un contexte de positionnement pour les sous-listes */
	font-family:"Agency FB" , "Franklin Gothic" ;
}
.menu1 img {  height: 30px; margin-top:-6px;}

.menus2 {
    position: absolute; /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
    white-space: nowrap; /* Pour que le texte ne revienne pas à la ligne */
    left: 0; /* FIX IE7 : pour que le sous-menu s'aligne avec son conteneur */
    top: 2em; /* FIX IE7 : pour que le sous-menu s'aligne avec son conteneur */
    background: #848484; /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
    margin-top: -2px; /*-2px; /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l'un à l'autre */

}
/* Réduit cette boîte à un carré d'1px de côté, dont le texte est déporté loin à gauche */
.menu2 a {
   position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    float: left; /* Fix WebKit : force la largeur des sous-navigations à s'adapter automatiquement, pour pouvoir l'atteindre à la souris */
}
.menu2 a:focus,
.menu1 a:focus +.menus2 a,
.menu1:hover .menu2 a {
    position: static;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
	margin-left:-40px;
	font-size:90%;
	Line-Height:1.3;
}
@media screen and (max-width: 1200px) { /*480*/
.menus1histoire {display: none;}
.menu1 {
        float: none; /* Remet les éléments les uns au-dessus des autres*/
    }
.menus2 {
		display:none;
        position: static; /* Replace la sous-liste dans le flux du document */
        white-space: normal /* Permet au texte de revenir à la ligne normalement */
    }
.menu2 a {
        display: block; /* Pour que la ligne entière soit cliquable */
        width: auto; /* Annule width: 1px */
        height: auto; /* Annule height: 1px */
        position: static; /* Annule position: absolute */
        padding-left: 1em; /* Annule le padding vertical et en rajoute à gauche pour indiquer le sous-niveau */
        overflow: visible; /* Annule overflow: hidden */
        float: none;
    }
}
/* MENUS2 SOUS ENTETE */
.menus2haut {display:flex;justify-content: space-around; margin-top:5px; min-width: 90%; } /*list-style: none none; margin: 0; padding: 0; line-height: 1; padding-top:10px; padding-bottom:10px;}*/
.menus2haut ul {list-style: none none; font-family: "Josefin Sans", sans-serif; text-transform: uppercase; letter-spacing: .13em;}
.Xmenus2haut a:focus,.menus2haut a:hover {   text-decoration: underline; background:#f5f4f5; }

/* Responsive Navigation styles begin here */
@media screen and (min-width: 1200px) { /*480*/
	.menus2haut {display:none;)
}

nav > input,
.nav-button {
  display: none; /* hidden on large screens */
}

/* small screens styles */
@media screen and (max-width: 10) {  /*767*/
  #menu_haut { justify-content:flex-start  }

	.menus1 {
/*   position: absolute;
/*   width: 70vw;   */
   display: block;
   transform: translateX(-500%) translateZ(0);
   transition: transform .2s;
   will-change: transform;
   height:0;
   padding-left:15px;
   
  }
  
  /* here's goes the slide effect */
  input:checked ~ .menus1 {
    transform: translateX(0);
	height:100%;

  }
  .menu1 {float:none; }
  .menu1 a {display:flex;}
  .menus2 {margin-left:50px;}
  /* Button deco */
  .nav-button {
    display: block;
    position: absolute;
    top: 1rem; right: 1rem;
    z-index: 1;
    height: 3.5rem; width: 3.5rem;
    background-color: white;
    background-image: linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    background-size: 3.5rem .9rem;
    padding: 0;
    outline: 0;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
}