@charset "UTF-8";
/*=========================================================================*/
/* style pour le nouveau menu css/html pur responsive - site de beaufresne */
/*=========================================================================*/

	/*Reset CSS*/
	*{
		margin: 0px;
		padding: 0px;
		font-family: Avenir, sans-serif;		
	}
	
	/* parametres pour tout le menu: pleine largeur,pas de marge, sticky, en haut de l'écran*/
	nav{
		width: 100%;
		margin: 0 auto;
		/*background-color: white;*/
		/*position: -webkit-sticky;
		position: -moz-sticky;
		position: sticky;/*relative*/
		position:relative;
		/*top: 0;/* hauteur à partir de laquelle la page rentre dans le menu */
		z-index:1001;/*supérieur à celui de slideShowbutton du fichier index (1000) dans beaufresne-responsive)*/
		color:#FFF;	
	}
	/*suppression du soulignement pour tous les href */
	a:hover{text-decoration: none}
	/* le conteneur regroupant tout le menu est en absolu, pleine largeur */
	.conteneur-nav{
		position: absolute;/*absolute*/
		width: 100%;
		/*margin-left:-2%;*/
		/*margin-right:auto;*/	
	}
	/* pour checker afficher/cacher le menu */
	nav input[type=checkbox]{
		display: none;
	}
	/* c'est le label qui s'affiche et pas la checkbox ci dessus
bouton horizontal, mais le menu est trop long (plus long que la hauteur d'ecran dispo) pour que position "sticky" fonctionne correctement*/
	/*nav label{
		display: inline-block;
		width: 100%;
		padding: 10px 0px;
		text-align: center;
		background-color: gold;
		color:#030;/* vert "beaufresne" 
	}*/

	/*bouton afficher/cacher le menu vertical à gauche de la page en position fixed pour etre toujours à dispo */
	nav label
	{	
		transform-origin: 0 0;
		transform: rotate(-90deg);
		z-index:9999;
		position:fixed;
		top:17.8rem;
		left:0.1em;
    	font-size:0.9rem;
		font-weight: bold;
		padding:0.3em;
    	cursor:pointer;
	 	color: #030;
    	/*text-shadow: 1px 1px 1px #000;*/
    	border-radius: 5px;
		background-color:gold;
	}
	/* on passe le bouton afficher/cacher le menu vertical à droite de la page pour les petits ecrans "landscape" (peu de hauteur dispo). il reste en position fixed pour etre toujours à dispo */
	@media screen and (max-width:736px) and (orientation:landscape) {
		nav label{	
			transform-origin: 0 0;
			transform: rotate(-90deg);
			z-index:9999;
			position:fixed;
			top:20rem;
			left:96%;
    		font-size:0.9rem;
			font-weight: bold;
			padding:0.3em;
    		cursor:pointer;
	 		color: #030;
    		/*text-shadow: 1px 1px 1px #000;*/
    		border-radius: 5px;
			background-color:gold;
			width:11rem;
		}
		body{overflow-y: hidden;}
	}

	/* le menu premier niveau est masqué par défaut . son fond est gris foncé*/
	nav ul{
		display: none;
		list-style-type: none;
		/*background-color: #555;*/
		background: url(../Images/trame-1gc45.png) left top repeat, linear-gradient(hsl(95, 64%, 20%),hsl(100, 64%, 45%));
		border-radius:5px;
		color:white;
		
	}
	/* quand label checké, affichage menu en flex vertical avec possibilité de wrap */
	nav input[type=checkbox]:checked + ul{
		display: flex;
		flex-flow : column wrap;
		
	}

	/* quand label checké, on met le label en position sticky 
	nav input[type=checkbox]:checked  #mobile{
		position: -webkit-sticky;
		position: -moz-sticky;
		position: sticky;/*relative
		top: 0%;/* hauteur à partir de laquelle la page rentre dans le menu 
	}*/


	/* le container flex 1er niveau s'ajuste en fonction de la taille de l'ecran: 1=grow 1=shrink auto=base
	libellé centré*/
	nav  ul li{
		flex: 1 1 auto;
		text-align: center;
		
	}
	/* texte en blanc pour menu premier niveau 
	nav > div > ul > li > a{
		color: white;
	}*/
	/*par défaut, les libellés sont noirs, et affichés en bloc. padding haut pour eloigner le texte du bord*/
	nav a{
		display: block;
		text-decoration: none;
		padding: 10px 0px;
	}
	/* en permanence affiché, sous menu en flex vertical et au premier plan avec wrap possible */
	.sous{
		display: flex;
		flex-flow: column wrap;
		/*z-index: 1000;*/
	}

	/* texte en blanc pour premier niveau (ne pas oublier le .conteneur-nav qui sert pour afficher/cacher)*/
		nav > .conteneur-nav > ul > li > a{
			color: white;
		}
	/* au survol des boutons premier niveau: eclaircissement du fond et texte rouge foncé*/
	nav > .conteneur-nav > ul > li > a:hover{
		color:darkred;
		-webkit-filter:brightness(200%);
		filter:brightness(200%);
	}
	
	/* sous menu affiché en permanence en flex vertical et au premier plan avec wrap possible */
	.deroulant .sous{
		display: flex;
		flex-flow: column wrap;
	}
	/* le container flex sous-menu  s'ajuste en fonction de la taille de l'ecran: 1=grow 1=shrink auto=base
	libellé aligné à gauche*/
	.sous li{
		flex: 1 1 auto;
		text-align: left;
	}
	/* style du sous-menu. fond gris clair*/
	.sous a{
		padding: 10px;
		background-color: RGBa(200,200,200,0.8);
		font-size: 1.2rem;
	}
	/*au survol du sous-menu: augmentation de la luminosité du fond et libellé rouge foncé*/	
	.sous a:hover{
		-webkit-filter:brightness(200%);
		filter:brightness(200%);
		color:darkred;
	}
		
	/* une petite fleche a coté du libellé 1er niveau en survol quand il y a un sous menu*/
	nav > .conteneur-nav > ul > li > a:hover::after {
			content:" ▼";
			font-size: 12px;
		}
	/* petite fleche horizontale avant le libelle du sous menu quand survol*/
	.sous a:hover::before{
		content:"► ";
		font-size: 12px;
	
	}

	/* on met en rouge le parent du sous menu survolé - ne fonctionne pas*/
	/*.deroulant  li! .sous li a:hover {color:darkred}*/
	/*ul! li:hover{color:darkred}
    /* C'est la balise ul qui est sélectionnée 
}*/
/*======================================================
    styles pour ecrans non tactiles (plus de 980px)
========================================================*/	
	
	@media screen and (min-width: 980px){
		.conteneur-nav{
			position: static;
			width:100%;
			margin-left:0;
		}
		
		/* on n'affiche pas le bouton afficher/cacher pour le menu */
		nav label, nav input{
			display: none;
		}
		/* on affiche les bouton en horizontal avec possibilité de retour à la ligne */
		nav input[type=checkbox]:checked + ul, nav ul{
			display: flex;
			flex-flow: row wrap;
		}
		
		/* position relative pour les boutons premier niveau */
		nav ul li{
			position: relative;
		}
		/* ombrage identique à l'entete et au pied de page sur le seul menu premier niveau*/
		nav >.conteneur-nav > ul {
			/* pour IE, une ombre drte et gche degradé 5 et une ombre haut blanche dégradé 3  */
			filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=90, Strength=5),
					progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=270, Strength=5),
					progid:DXImageTransform.Microsoft.Shadow(color='#ffffff', Direction=360, Strength=3),
					progid:DXImageTransform.Microsoft.Glow(Color=black,Strength=3);
			-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
				1px 0px 3px rgba(0, 0, 0, .5),
                3px 0px 5px rgba(0, 0, 0, .4),
                5px 0px 10px rgba(0, 0, 0, .3),
                10px 0px 15px rgba(0, 0, 0, .15),
				-1px 0px 3px rgba(0, 0, 0, .5),
                -3px 0px 5px rgba(0, 0, 0, .4),
                -5px 0px 10px rgba(0, 0, 0, .3),
                -10px 0px 15px rgba(0, 0, 0, .15);
			-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
				1px 0px 3px rgba(0, 0, 0, .5),
                3px 0px 5px rgba(0, 0, 0, .4),
                5px 0px 10px rgba(0, 0, 0, .3),
                10px 0px 15px rgba(0, 0, 0, .15),
				-1px 0px 3px rgba(0, 0, 0, .5),
                -3px 0px 5px rgba(0, 0, 0, .4),
                -5px 0px 10px rgba(0, 0, 0, .3),
                -10px 0px 15px rgba(0, 0, 0, .15);
			box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
				1px 0px 3px rgba(0, 0, 0, .5),
                3px 0px 5px rgba(0, 0, 0, .4),
                5px 0px 10px rgba(0, 0, 0, .3),
                10px 0px 15px rgba(0, 0, 0, .15),
				-1px 0px 3px rgba(0, 0, 0, .5),
                -3px 0px 5px rgba(0, 0, 0, .4),
                -5px 0px 10px rgba(0, 0, 0, .3),
                -10px 0px 15px rgba(0, 0, 0, .15);
		}
		/* texte en gold pour premier niveau (ne pas oublier le <div> qui sert pour afficher/cacher)*/
		/*nav > .conteneur-nav > ul > li > a{
			color: white;
		}*/
		/* bordure basse transparente pour eviter le gigotage quand survol 
		nav a{
			border-bottom: 2px solid transparent;
		}*/
		/* survol premier niveau: texte orange trait bas gold 
		nav a:hover{
			color: orange;
			border-bottom: 2px solid gold;
		}*/
		
		/* sous menu caché par defaut et positionné en absolu. meme largeur que son parent */
		.deroulant .sous{
			display: none;
			/*box-shadow: 0px 1px 2px #CCC;
			background-color:hsla(109,22%,42%,0.55);*/
			/*background: none;*/
			position: absolute;
			/*max-width: 90%;*/
			max-width:90%;
			margin-left:5%;/*la moitié du complément à 100% (largeur du bouton parent)*/
			margin-right:auto;
			background: url(../Images/trame-1gc45.png) left top repeat, linear-gradient(hsl(101, 84%, 15%),hsl(101, 84%, 65%));
			padding-bottom:0.5rem;
			padding-top:0.5rem;
			line-height:0.5rem; 
		}
		
		/* quand survol du parent, sous menu vertical */
		/*nav > div > ul li:hover .sous*/
		.deroulant:hover .sous
		{
			display: flex;
			flex-flow: column wrap;
		}
		/* pas de bordure basse pour le sous menu, et fond comme le premier niveau mais plus lumineux
		texte  blanc et lègere marge haut pour decoler les boutons et légère marge gauche*/
		.sous a{
			background: none;
			border-bottom: none;
			/*background-color: white;*/
			/*background: url(../Images/trame-1gc45.png) left top repeat, linear-gradient(hsl(101, 84%, 15%),hsl(101, 84%, 65%));*/
			-webkit-filter:brightness(140%);
			filter:brightness(140%);
			border-radius:4px;
			/*margin-top:0.1rem;*/
			color:white;
			margin:0.1rem 0.6rem 0 0.6rem;
			font-weight: lighter;
		}
		/* survol du bouton sous-menu : pas de bordure basse et luminosité du fond legerement accentuée; texte gold en leger relief */
		.sous a:hover{
			border-bottom: none;
			-webkit-filter:brightness(160%);
			filter:brightness(160%);
			text-shadow: 0 1px 0 rgba(0, 0, 0, .8);
			color:darkred;
			background-color: RGBa(200,200,200,0.8);
		}
		/* petite fleche a côté du libellé sur les parents de sous-menu*/
		.deroulant > a:hover::after{
			content:" ▼";
			font-size: 12px;
		}
		
		/*========================================
		    GESTION DE LA TAILLE DES POLICES
		==========================================*/
		
		@media screen and (min-width: 1024px){
			.conteneur-nav{
			font-size:1rem;
			}
			.sous a{
			font-size:1rem; /*taille police des sous menus*/	
			}
		}/* finde mq min-width 1024*/
		
		@media screen and (min-width: 1365px){
			.conteneur-nav{
			font-size:1.1rem;
			}
		}
		
		@media screen and (min-width: 2000px){
			.conteneur-nav{
			font-size:1.2rem;
			}
		}
		
		/*@media screen and (min-width: 2100px){
			.conteneur-nav{
			font-size:1.5rem;
			}
		}*/
		
		
	}/* fin de media screen and (min-width: 980px)*/