/* ***************************************  GENERAL  ******************************************************* */	

			
			body{
					margin:0; /* DEBUT reset de toutes les marges ... verifier si ca conserve la semantique*/
					padding:0; /* FIN reset de toutes les marges ... verifier si ca conserve la semantique */
					
					font-family: Verdana, "Trebuchet MS", Arial, sans-serif;
					word-wrap: break-all; /*evite que les longs mots ne sortent des div*/
					color: #696969;
					background-color: #FFF;
				}
			.font_general{
					font-size: 20px;	
					font-size: 1.8rem;
					font-size: 1.4vw;
					font-size: min(max(15px, 3vw), 18px);
				}
				
			.font_enorme {
					font-size: 28px;	
					font-size: 2.8rem;
					font-size: 2.8vw;
					font-size: max(2.8vw, 20px);
				}
				
			.font_h1 {
					font-size: 22px;	
					font-size: 2.2rem;
					font-size: 2.3vw;
					font-size: max(2.5vw, 20px);
				}

			.font_h2{
					font-size: 20px;	
					font-size: 2rem;
					font-size: 2.2vw;
					font-size: max(2.2vw, 20px);
				}
			.font_h3{
					font-size: 18px;	
					font-size: 1.8rem;
					font-size: 2vw;
					font-size: max(2vw, 18px);
				}
			.font_h4{
					font-size: 17px;	
					font-size: 1.7rem;
					font-size: 1.7vw;
					font-size: max(1.7vw, 15px);
				}
			.font_h5{
					font-size: 16px;	
					font-size: 1.6rem;
					font-size: 1.3vw;
					font-size: max(1.1vw, 14px);
				}
			.font_h6{
					font-size: 15px;	
					font-size: 1.5rem;
					font-size: 0.9vw;
					font-size: max(0.9vw, 13px);
				}
			.color_rdv{
					color: #696969;
			}
			
			.couleur_titre{
					color:#228B22;
			}
	a {
		  text-decoration: none;
		  display: block;
		  padding: 1em;
		  background-color:#FFF;
		  z-index:2;
		  border-radius: 0.5rem;
		  color: #696969;
		}	
				
	a:link{
					background-color:#FFF;
					color: #696969;
					text-decoration:none; 
				}

	a:visited{
					border-radius: 1rem;
				}


	a:focus{
					/*border-bottom: 1px solid;*/
					background: #BAE498;
					color: #696969;
					border-radius: 1rem;
				}
				
	a:hover {
		  background: #78B495;
		  color:#FFF;
		  border-radius: 1rem;
		}

	a:active{
					background: #78B495;
					color: #CDFEAA;
					border-radius: 0.5rem;
				}			
				/* ******************************************* DEBUT NAVIGATION  *************************************************** */
	.navigation_global{
			display:grid;
			grid-area:navigation_global;
			border:none;
			margin:0 1vw;
			padding:0;
			z-index:2;
			background-color:#FFF;
			grid-template-columns: repeat(2, 1fr);
			grid-template-areas:
				"nav_haut nav_haut"
				"nav_bas nav_bas"
				;
		}
		
	.nav_haut{
				grid-area:nav_haut;
		}

	.nav_bas{
				grid-area:nav_bas;
		}
		
	.navigation {
		  display: flex;
		  flex-flow: row wrap;
		  /*justify-content: flex-end;  alignement à droite*/
		  justify-content: flex-start; /*alignement a gauche */
		  list-style: none;
		  margin: 0; 
		 /* background: #95DCB7;*/
		 background: #fff;
		 
		}

	.navigation a {
		  text-decoration: none;
		  display: block;
		  padding: 1em;
		  background-color:#FFF;
		  z-index:2;
		  border-radius: 0.5rem;
		 color: #696969;
		}	
				
	.navigation	a:link{
					background-color:#FFF;
					color: #696969;
					text-decoration:none; 
				}

	.navigation a:visited{
					border-radius: 1rem;
				}


	.navigation a:focus{
					/*border-bottom: 1px solid;*/
					background: #BAE498;
					color: #696969;
					border-radius: 1rem;
				}
				
	.navigation a:hover {
		  background: #78B495;
		  color:#FFF;
		  border-radius: 1rem;
		}

	.navigation a:active{
					background: #78B495;
					color: #CDFEAA;
					border-radius: 0.5rem;
				}
		
	/* ******************************************* FIN NAVIGATION  *************************************************** */
				

			.align_droite{
					text-align: right;
				}
			.align_centre{
					text-align: center;
				}
			.align_gauche{
					text-align: left;
				}
				
			.bord{
					border: 1px solid;
				}
				
			.arrondi{
					border-radius: 1rem;
				}
			.ombrage3{
					border-bottom: 10px solid;
					box-shadow: 0.rem 0.69rem 0.1rem #999;
				}
			.ombrage2{
					-moz-box-shadow: 0.2rem 0.2rem 0.3rem #aaa; 
					-webkit-box-shadow: 0.2rem 0.2rem 0.3rem #aaa; 
					box-shadow: 0.1rem 0.1rem 0.2rem #999;
				}
			.ombrage{
					-moz-box-shadow: 0.2rem 0.2rem 0.3rem #fff;
					-webkit-box-shadow: 0.2rem 0.2rem 0.3rem #fff;
					box-shadow: 0.1rem 0.1rem 0.1rem  #007073;
				}
			.marge_externe{
					margin:1vw;
				}
				
			.marge_interne{
					padding:1vw;
				}
			
			.marge_g{
					padding-left:2vw;
				}
			.marge_d{
					padding-right:2vw;
				}
			.marge_h{
					padding-top:1vw;
				}
			.marge_b{
					padding-bottom:1vw;
				}
			.sans_marge{
					margin:0;
					padding:0;
				}
			.inter_ligne{
					line-height: 150%;
				}
				
			.taille_img{
					width:auto;
					height:auto;
			}
				
			.responsive {
				    max-width: 100%;  /* si on veux que l'image d'origine ne soit pas agrandie */
					height: auto;
					max-height: 250px;
				}
			.responsive2 {
				    max-width: 100%;  /* si on veux que l'image d'origine ne soit pas agrandie */
					height: auto;
					max-height: 1024px;
				}
			.responsive3 {
				    max-width: 100%;  /* si on veux que l'image d'origine ne soit pas agrandie */
					height: auto;
					max-height: 175px;
				}
			.flottant_gauche{
				  float: left;
				  width: 200px;
				  max-width: 30%;
				  max-height: 250px;
				}
			.suite_flottant{ /* Permet de revenir dans le flux suite à un float*/
				  clear: both;
			}
			/*.responsive_aside {
				    max-width: 100%;
					height: auto;
				}*/
			.sticky_menu{
					position: -webkit-sticky;
					position: sticky;
					top:-60px;
					}
			.sticky_aside{
					position: -webkit-sticky;
					position: sticky;
					top:7vw;
					}
			.sticky_aside_admin{
					position: -webkit-sticky;
					position: sticky;
					top:5px;
					}
					
					

				
/* **************************************************** Debut affichage progressif  ************************************************** */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1s;
  animation-name: fade;
  animation-duration: 1s;
}

@-webkit-keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .2}
  to {opacity: 1}
}
/* **************************************************** FIN affichage progressif  ************************************************ */


				
		/* ******************************************** DEBUT + PLUS de 800 px  *************************************************************** */
.body_global{
		display:grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"header_global header_global header_global"
			"navigation_global navigation_global navigation_global"
			"main_global main_global main_global"
			"footer_global footer_global footer_global"
			;
}		
	/* ******************************************* DEBUT HEADER  *************************************************** */

	
.header_global{
		grid-area:header_global;
		display:grid;
		gap:1rem;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			/*"header_complet header_complet header_complet"*/
			/*"header_gauche header_centre header_droite"*/
			"header_gauche header_gauche header_gauche"
			;
	}
	
.header_gauche{
		grid-area:header_gauche;	
		}
		
.header_centre{
		grid-area:header_centre;
		opacity: 1;
		display:none;
		}
		
.header_droite{
		grid-area:header_droite;
		opacity: 1;
		display:none;
		/*display:none;*/
			
		}		
.header_complet{
		grid-area:header_complet;
		display:none;
		}
		
.header_puce{
		list-style-type: none;
		}
		
.sans_puce{
		list-style-type: none;
	}
	
.sans_bord{
		border: none;
	}
		
	/* ******************************************* FIN HEADER  *************************************************** */
	

	/* ***********************************************  Debut formulaire ******************************** */
	
form {
  /* Uniquement centrer le formulaire sur la page */
  margin: 0 auto;
  width: auto;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  border-radius: 1em;
}

form div + div {
  margin-top: 1em;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont même taille et sont correctement alignées */
  display: inline-block;
  width: 100%;
  text-align: center;
}

input, textarea {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la même dimension */
  width: 100%;
  box-sizing: border-box;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 1px solid grey;
  border-radius: 1em;
}

input:focus, textarea:focus {
  /* Pour souligner légèrement les éléments actifs */
  border: 1px solid grey;
  border-radius: 1em;
}

textarea {
  /* Pour aligner les champs texte multiligne avec leur étiquette */
  vertical-align: top;

  /* Pour donner assez de place pour écrire du texte */
  height: 5em;
}

.button {
  /* Pour placer le bouton à la même position que les champs texte */
  padding-left: 90px; /* même taille que les étiquettes */
}

button {
  /* Cette marge supplémentaire représente grosso modo le même espace que celui
     entre les étiquettes et les champs texte */
  margin-left: .5em;
}
	
	/* ************************************************ FIN formulaire *********************************** */
	/* ******************************************* DEBUT MAIN  *************************************************** */
	.main_global{
		grid-area:main_global;
		display:grid;
		grid-gap:0.5rem;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"section_global section_global aside_global"
			;
	}
	/* ******************************************* FIN MAIN  *************************************************** */
	
	/* ******************************************* DEBUT ASIDE  *************************************************** */
	.aside_global{
		grid-area: aside_global;
	}	
	/* ******************************************* FIN ASIDE  *************************************************** */
	
	/* ******************************************* DEBUT SECTION GLOBAL  *************************************************** */
	.section_global{
		grid-area:section_global;
		word-wrap: break-all; /*evite que les longs mots ne sortent des div*/
	}
	/* ******************************************* FIN SECTION GLOBAL  *************************************************** */
	
	/* ******************************************* DEBUT FOOTER  *************************************************** */
	.footer_global{
		grid-area:footer_global;
		display:grid;
		grid-gap:0.5rem;
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas:
			"footer_gauche footer_centre footer_droite"
			;
		text-align: left;
	}
	
	.footer_gauche{
		grid-area: footer_gauche;
	}
	
	.footer_centre{
		grid-area: footer_centre;
	}
	
	.footer_droite{
		grid-area: footer_droite;
	}	
	/* ******************************************* FIN FOOTER  *************************************************** */
	
	
	/* ******************************************** FIN + PLUS de 800 px  *************************************************************** */

/* ****************************************** DEBUT - MOINS de 800 px  ****************************************************************** */	

@media only screen and (max-width: 799px){ 

 /* ******************************************* DEBUT HEADER -DE 800PX *************************************************** */

	.header_global{
		display:grid;
		grid-gap:0.5rem;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			/*"header_complet header_complet"*/
			"header_centre header_centre"
			;
		text-align:left;

	}
	.header_gauche{
		grid-area:header_gauche;
		display:none;
		}
		
	.header_centre{
		grid-area:header_centre;
		display:block;
		}
		
	.header_droite{
		grid-area:header_droite;	
		display:none;
		
		}
		
	
		
	.header_complet{
			grid-area:header_complet;
			display:none;
		}
		
	/* ******************************************* FIN HEADER -800PX  *************************************************** */
	
	/* ******************************************* DEBUT NAVIGATION -800PX	*************************************************** */
	.navigation_global{
			grid-template-columns: repeat(1, 1fr);
			grid-template-areas:
				"nav_haut"
				"nav_bas"
				;
		}
	.sticky_menu{
			position: -webkit-sticky;
			position: sticky;
			top:-50px;
		}
		
	.navigation {
		flex-flow: column wrap;
		padding: 0;
		}
		
	.navigation a { 
		text-align: center; 
		padding: 10px;
		border-top: 1px solid rgba(255, 255, 255,0.3); 
		border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
		}
		
	.navigation li:last-of-type a {
		border-bottom: none;
		}	
		
	/* ******************************************* FIN NAVIGATION -800PX *************************************************** */	
	
	
	.main_global{
		grid-area:main_global;
		display:grid;
		grid-gap:0.5rem;
		grid-template-columns: repeat(1, 1fr);
		grid-template-areas:
			"section_global"
			"aside_global"
			;
	}
	
	.footer_global{
		grid-area:footer_global;
		display:grid;
		grid-gap:0.2rem;
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"footer_droite footer_droite"
			"footer_gauche footer_centre"
			
			;
	}

}
	/* ******************************************** FIN - MOINS de 800 px  *************************************************************** */