/* ELEMENTS GENERAUX */
	
	
                    /* CODE CSS CORPS DE PAGE */
        
body  
{
	background-color: rgba(25,50,75,0.9);  				/* couleur de fond */
	/*background-attachment: fixed;	*/					/* image de fond fixe qui ne défile pas avec la page */
    background-size: cover;								/* redimensionnement de l'image de fond pour couvrir l'emsemble du conteneur */
}

html {font-size: 62.5%;}								/* l'unité rem est devenue la dizaine de pixels */
*{box-sizing: border-box;}								/* garantie que Pading et border soient inclus dans les dimentions de chaque élément */


.header
{
    border:solid 0px silver;
    height:25vh;
    margin: 1vw;
    padding-top: 5vh;
    text-align: center;
}

.row::after 	
{
	content: "";
	clear: both;
	display: table;
    margin-bottom: 10px;
}


                    /* CREATION ESPACES HORIZONTAUX */


.espace-col12-10{margin-bottom: 1vh; }
.espace-col12-25{margin-bottom: 2.5vh; }
.espace-col12-50{margin-bottom: 5vh; }
.espace-col12-50{margin-bottom: 5vh; }
.espace-col12-75{margin-bottom: 7.5vh; }
.espace-col12-100{margin-bottom: 10vh; }
.basdepage {margin-bottom: 5vh; } 




            		/* ENTETE DE PAGE  */  

.nom-site-web-01
{

	text-align: center; 
	margin: 0vh 0vw;
    padding: 0vh;
	font-size: 3.25rem;
	font-style: normal; 
	font-weight: 600; 
	color: #FFFEEE;	
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    text-transform: uppercase;                          /* mettre le texte en majuscule */
    visibility: visible;
	/*text-shadow: 2px 2px 2px black;*/	                /* ombrage de texte : x,y,flou,couleur */
} 

.nom-site-web-02
{
	text-align: center; 
	margin: 0vh 0vw;
    padding-top: 5vh;
	font-size:2rem;
	font-style: normal; 
	font-weight: ; 
	color:  #CCFFCC;	
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    text-transform: uppercase;  
    /*font-variant: small-caps; */
    /*text-transform: uppercase;   */                   /* mettre le texte en majuscule */
    visibility: visible;
	/*text-shadow: 2px 2px 2px black;*/	                /* ombrage de texte : x,y,flou,couleur */
} 





            		/* CODE CSS MENU  */                                    

.navbar 
{
	/*  position: absolute;*/
	/*  display: flex;*/
	margin: 0px 0px;  
	padding:0px 0px; 
	border:solid 2px silver;							/* cadre du bloc */
	background-color:#A0A0A0;   						/* couleur de fond de la barre de menu*/                
	/*  overflow: hidden;  */                           /* masque ce qui dépasse la zone*/
	/*  justify-content: space-between;*/
	/*align-items: center;*/
}

.navbar a
{
    float: left;
    display: block;
    color:#FFFEFA;
    /*   text-align: center;   */
    padding:5px 10px;
    text-decoration: none;
    /*   font-size: 1.5rem;*/
}
   
.navbar a:hover 										/* modification de la couleur des liens au passage de la souris */
{
    background-color: #505050;
   	color: #FFF;
}

.nav-links{margin-left: 0; }     						/* le volet menu apparait lorque la classe mobile-menu est activée */ 

.navbar .nav-links ul  {display: flex;}      			/* aligne les textes des liens à l'horizontal */   

.navbar .nav-links ul li
{
	margin: 0px 5px;      								/* Crée des espaces horizontaux entre les liens */
    list-style: none;
    font-family: arial;
    font-size: 1.25rem;
    font-weight: bold;
}

.navbar .nav-links ul li.active a           			/* Mise en forme du lien actif du menu */ 
{
    background-color: #04AA6D;
    color: #FFFFFF;
}

.navbar .menu-hamburger
{
    display:none;      								/* menu burger non afficher sur grand écran */
    position: absolute; 								/* dimensions et position du burger*/
    max-width: 45px;
    max-height: auto;
    right: 7vw;
    top: 6vh; 
}



					/* CODE CSS BLOC DE TEXTE PRINCIPAL */	

.bloc-principal
{
	margin: 0vh 5vw;  
	padding: 0vh 0vw;  									/* marges interne du bloc HB GD*/
	border:solid 2px silver;							/* cadre du bloc */
	background-color: #FFFEEE;							/* couleur de fond du block */
	/*	box-sizing: border-box;	 */						/* inclut la bordure et la marge interne dans les dimensions width et height totales */	
}

.titre-bloc
{
	margin: 0vh 0vw;
	padding: 0vh 0vw; 
	text-align: center;
	font-family: Arial; 
	font-size:3rem; 
	font-style: normal; 
	font-variant: small-caps; 
	font-weight:normal;  
	color: #006666;															
} 
	
.titre-bloc-2 
{
	margin:1vh 3vw;
	padding:2vh 0vw; 
	text-align: center;
	font-family:arial; 
	font-size:2rem; 
	font-style: normal; 
	font-variant: small-caps; 
	font-weight: bold; 
	color: #006666;
} 
	
.titre 
{
	margin:3vh 3vw 2vh 3vw;
	padding:0px 15px;
	border: 1px #000000 solid;
	background-color: #F0F0F0;
	text-align: left;
	font-family: Arial; 
	font-size:1.9rem; 
	font-style: normal; 
	font-variant: small-caps; 
	font-weight:normal; 
	color:#006666;
} 
	
.soustitre 
{
    margin:2vh 3vw 1vh 3vw;
	padding:10px 0px;
	text-align:left;
	font-family: Arial; 
	font-size:1.6rem; 
	font-style: normal; 
	font-weight:; 
	color:#006666;
} 
	
.soustitre-2 
{
	margin:1vh 3vw;
	padding:0px 0px;
	text-align: left;
	font-family: Arial; 
	font-size:1.6rem; 
	font-style: normal; 
	font-weight:; 
	color:#006666;
} 
	
.texte-article-0
{
	margin:2vh 3vw;
	padding:0px 0px;
	font-family: arial; 
	font-size:1.45rem; 
	font-style: normal; 
	font-variant:; 
	font-weight:; 
	color:#000000;
	text-align: justify;
} 

.texte-article
{
	margin:2vh 3vw;
	padding:0px 0px;
	font-family: arial; 
	font-size:1.45rem; 
	font-style: normal; 
	font-variant:; 
	font-weight:; 
	color:#000000;
	text-align: justify;
} 

.texte-fantaisie-01
{
	padding:0% 10%;
	font-family: arial;
	font-size:2rem; 
    text-align: center;
    font-style: normal; 
	font-variant: small-caps;
    font-weight:;
    text-shadow:#bbe5ff 0 -1px 0,
    /* #0098f8 1px 1px 0,
    #018de6 2px 2px 0,
    #006fb5 3px 3px 0,
    #005386 4px 4px 0,
    #004874 5px 5px 0,*/
    #333 5px 5px 10px;
	color:green;
} 

.texte-fantaisie-02
{
    padding:0% 10%;
	font-family: arial;
	font-size:2rem; 
    text-align: left;
    font-style: normal; 
	font-variant: small-caps;
    font-weight:;
    text-shadow:#bbe5ff 0 -1px 0,
    /*#0098f8 1px 1px 0,
    #018de6 2px 2px 0,
    #006fb5 3px 3px 0,
    #005386 4px 4px 0,
    #004874 5px 5px 0,*/
   	#333 5px 5px 10px;
	color:darkred;		
} 
	
.texte-fantaisie-03
{
	padding:padding:0% 10%;
	font-family: arial;
	font-size:2rem; 
    text-align: center;
    font-style: normal; 
	font-variant: small-caps;
    font-weight:;
    text-shadow:#bbe5ff 0 -1px 0,
    /*#0098f8 1px 1px 0,
    #018de6 2px 2px 0,
    #006fb5 3px 3px 0,
    #005386 4px 4px 0,
    #004874 5px 5px 0,*/
    #333 5px 5px 10px;
	color:deepskyblue;		
}  

.texte-fantaisie-04
{
	padding:0% 10%;
	font-family: arial;
	font-size:2rem; 
    text-align: right;
    font-style: normal; 
	font-variant: small-caps;
    font-weight:;
    text-shadow:#bbe5ff 0 -1px 0,
    /*#0098f8 1px 1px 0,
    #018de6 2px 2px 0,
    #006fb5 3px 3px 0,
    #005386 4px 4px 0,
    #004874 5px 5px 0,*/
    #333 5px 5px 10px;
	color:red;		
} 


.item-circulaire
{
    margin:auto;
    padding: 8%;
    width: 35vw;
    height: 35vw;
	border-radius:50%;
	border:2px solid silver;
    animation-name: astuces;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}	



.liste
{
    margin:1vh 4vw 5vh 4vw;
	padding:0px 0px;
   	background-color:#FFFEFA; 				   								
}

.liste li	
{
    /*list-style-type: none; */      					/* Suppression des puces */
    font-family: "Arial"; 
    font-size:1.4rem; font-style: normal;
}







					/* CODE CSS GALERIE PHOTOS */

.bloc-galerie
{
    margin: 3vh 5vw;  
    padding: 0vh 0vw;  									/* marges interne du bloc HB GD*/
	border:solid 2px silver;							/* cadre du bloc */
	background-color: #FFFEFA;							/* couleur de fond du block */
	/*	box-sizing: border-box;	 */						/* inclut la bordure et la marge interne dans les dimensions width et height totales */	
}
		
.titre-bloc-galerie
{   
	margin:5px auto;
	text-align: center;
	font-family: "Allerta Stencil"; 
	font-size:3.5rem; 
	font-style: normal; 
	font-variant: small-caps; 
	font-weight: normal; 
	color: green;															
}
	
.titre-galerie
{
	margin:3vh 3vw 2vh 3vw;
	padding:0px 15px;
	border: 1px #000000 solid;
	background-color: #F0F0F0;
	text-align: left;
	font-family: Arial; 
	font-size:1.6rem; 
	font-style: normal; 
	font-variant: small-caps; 
	font-weight:normal; 
	color:#006666;
} 
		
.sous-titre-galerie
{
	margin:0px auto;
	text-align: center;
	font-family: "Allerta Stencil"; 
	font-size:1.5rem; 
	font-style: italic; 
	font-variant:; 
	font-weight:; 
	color:green;															
}






					/* CODE CSS LIENS DE CONTACTS */
	
.texte-lien														
{
    margin: 6vh 0vh;
    color: blue;
	font-size:1.5rem;
	font-style: ;
}
	
.texte-lien:hover										/* changement de la couleur du texte au passage de la souris */
{
    margin: 6vh 0vh;
	color: blue;
	font-size:1.5rem;
	font-style: ;
}








					/* CODE CSS PIED DE PAGE */


.texte-copyright
{
	color:silver;
	text-align: center;
	font-family:"Arial", Monospace;
	font-size: 1.35rem;
	font-style: normal;
	padding: 0px;
	margin: 0px auto;
}