/* 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
{
    /*   height: 25vh; */
    /*   margin: 0vh 0vw;   */
    /*   padding: 0vh 0vw; */
    border:solid 0px silver;
    height:25vh;
    margin: 1vw;
    padding: 1vh 0vw;
    text-align: center;
}

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


                    /* CREATION ESPACES HORIZONTAUX */

.basdepage {margin-bottom: 5vh; }                       
.espace-col12-25{margin-bottom: 2vh; }
.espace-col12-50{margin-bottom: 5vh; }
.espace-col12-100{margin-bottom: 10vh; }





            		/* ENTETE DE PAGE  */  

.nom-site-web-01
{
	/* display: flex;    */
	/* justify-content: center;    */
    /*border:solid 4px #FFFFFF;	    */
	text-align: center; 
	margin: 0vh 0vw;
    padding: 0vh;
	/*	font-family: "Arial";  /*"Allerta Stencil"; */
	font-size: 3.50rem;
	font-style: normal; 
	/*	font-variant: small-caps; */
	font-weight: 600; 
	color: #FFFFFF;	
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    /*  letter-spacing: 0.075rem    */
    /*  line-height: 1;   */
    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
{
	/* display: flex;    */
	/* justify-content: center;    */
    /*border:solid 4px #FFFFFF;	    */
	text-align: center; 
	margin: 0vh 0vw;
    padding: 0vh;
	/*	font-family: "Arial";  /*"Allerta Stencil"; */
	font-size:2rem;
	font-style: normal; 
	/*	font-variant: small-caps; */
	font-weight: ; 
	color:  #CCFFCC;	
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    /*  letter-spacing: 0.075rem    */
    /*  line-height: 1;   */
    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 */
} 


.logo
{
    max-width: 150px;
    max-height: auto;
     margin-top: 2vh;
    /*  display: flex;    */
}

.texte-logo
{
	text-align: center;
	margin-top: 2vh;
    padding: 0%;
	font-family: Brush Script MT, Brush Script Std, cursive;  	
    font-size: 2.5rem;
	font-weight: lighter; 
	color: #FFFFF0;										/* couleur du texte */
	/*text-shadow: 1px -1px 1px black; */           	/* ombrage de texte : x,y,flou,couleur */
}
	
.colibri
{
	max-width: 55px;
	max-height: auto;
	margin: 0% auto;
	/*   display: flex;    */
}

.texte-colibri
{
	text-align: center;
	margin: 0%;
    padding: 0%;
    font-family: Brush Script MT, Brush Script Std, cursive;  /* Police de caractere, police de remplacement,... */ 
	font-size: 2.5rem;
	font-weight: lighter; 
	color: #FFFFF0;										/* couleur du texte */
	/*text-shadow: 1px -1px 1px 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: white;
    /*   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: 60px;
    max-height: auto;
    right: 8vw;
    top: 4vh; 
}



        			/* CODE CSS MENU ADAPTE AUX PETITS ECRAN  */ 


[class*="col-"]	{float: left; padding: 2%;} 			/* Adaptation pour téléphone mobile */

[class*="col-12"] { padding: 0%;}						/* Adaptation pour téléphone mobile */

@media only screen and (min-width: 700px) 				/* Adaptation pour écran supérieur à 700px*/
{
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}          
    .image-entete-bloc {display:none;}
}



					/* 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: #FFFFFF;							/* 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;		
} 

.image-entete-bloc
{
	max-width:94%;
    height: auto;
	Margin:2% 3%;
	border:solid 1px green;
	padding: 2px
}

.image-horizontale-bloc
{
	max-width:94%;
    height: auto;
	Margin:2% 3%;
	border:solid 1px green;
	padding: 2px
}
		
.image-horizontale-bloc-red
{
	max-width:94%;
    height: auto;
	Margin:2% 3%;	
	border: solid 1px red;
	padding: 2px;							
}
		
.texte-image-horizontale-bloc
{
	max-width:94%;
    height: auto;
	Margin:auto;
	border:2px solid silver;
	background-color: #F0F0F0;
	padding:5px 10px 5px 10px;
	font-family: Arial; 
	font-size:1.3rem; 
	font-style: italic; 
	font-variant:; 
	font-weight:; 
	color:#000000;
	text-align: justify;
} 
	
.image-verticale-bloc
{
	max-width:80%;
	Margin:2% 10%;
	border:solid 1px green;
	padding: 2px
}
		
.image-verticale-bloc-red
{
	max-width:80%;
	Margin:2% 10%;	
	border: solid 1px red;
	padding: 2px;							
}
	
.texte-image-verticale-bloc
{
	max-width:80%;
	Margin:auto;
	border:2px solid silver;
	background-color: #F0F0F0;
	padding:5px 10px 5px 10px;
	font-family: Arial; 
	font-size:1.3rem; 
	font-style: italic; 
	font-variant:; 
	font-weight:; 
	color:#000000;
	text-align: justify;
} 
	
.img-float-gauche
{	
	float: left;
	margin-right:10px;
	border: solid 1px green;
	padding: 2px;	
}
		
.img-float-gauche-red
{	
	float: left;
	margin-right:10px;
	border: solid 2px red;
	padding: 2px;	
}


.img-center
{	
	float: left;
    margin: 0% 40%;
}


.img-float-droite
{		
	float: right;
	margin-left:10px;
	border: solid 2px green;
	padding: 2px;
}
	
.img-float-droite-red
{		
	float: right;
	margin-left:10px;
	border: solid 2px red;
	padding: 2px;
}

.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;
}	
 
.titre-item-circulaire 
{
	text-align: Center;
	font-family:Arial;
    font-style: normal;
	font-size: 1.35rem;
	color:#333333;
} 		
	
.texte-item-ciculaire
{
	margin: 6%;
	font-family: Arial;    											
	font-style: normal;
	font-size:1.2rem;
	text-align:justify;
	color:#333333;																			
}	

.img-float-dr-item
{
    float: right;
	margin-left:5%;
    max-width:45%;
    height: auto;
    border: solid 1px green;
	padding: 0.5%;
}

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

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





                    /* CODE CSS POUR RENDRE UNE VIDEO RESPONSIVLE - UTILISATION DES PROPRIETES PADDING */


.container-video {width: 90%; margin: auto;}

.video-responsive{
    
    height:0;
    padding-bottom:56.25%;                          /* rapport de proportion vidéo 16/9 */
    overflow:hidden;
    position:relative;
  
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}




					/* CODE CSS BLOC GALERIE DE PHOTOS */	

.bloc-galerie
{
    margin: 3vh 5vw;  
    padding: 0vh 0vw;  									/* marges interne du bloc HB GD*/
	border:solid 2px silver;							/* cadre du bloc */
	background-color: #FFFFFF;							/* 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;															
}
	
.photo-galerie
{
	max-width: 90%;
	height: auto;
	border: solid 1px green;
    display: flex;
	padding:1%;
   	margin: auto;
}

.photo-galerie:hover 
{
	opacity: 0.5;
}

.photo-galerie-verticale
{
	max-width: 60%;
	height: auto;
	border: solid 1px green;
    display: flex;
	padding:1%;
   	margin: auto;
}

.photo-galerie-verticale:hover 
{
	opacity: 0.5;
}



figcaption 												/* Paramétrage balise figcaption */
{
	max-width: 90%;
	/*border: solid 1px green; */
	padding: 2px;
	Margin: auto;
	background-color: #F0F0F0;
    font-family: arial;  
	color: black;		  										
	font-size: 1.0rem;
    font-weight: bold;
	font-style: normal;
    text-align: center;
}
	
.galerie-texte-photo-horizontale														
{
	max-width: 150px;
	/*border: solid 1px green; */
	padding: 2px;
	Margin:6px 0px;
	background-color: #F0F0F0;
	color: black;
	font-family: Arial;     										
	font-size: 1.15rem;
	font-style: normal;
	text-align: justify;
}

.galerie-texte-photo-verticale
{           
	max-width: 67px;
	/*border: solid 1px green; */
	padding: 2px;
	Margin:6px 0px;
	background-color: #F0F0F0;
	color: black;
	font-family: Arial;     										
	font-size: 1.15rem;
	font-style: normal;
	text-align: justify;
}
  


					/* TYPE D'ANIMATION */

@keyframes astuces 														
{
    33% {background:#FFFFF0;} 
    66% {background: #CCFFCC;}
	100% {background: #FFCCCC;}
    0% {background:#FFFFF0;} 
}



					/* 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: ;
}

.param-logo
{
    margin:10px 0px 10px 55px;
	max-width: 40px;
}

.param-logo:hover
{
    margin:10px 0px 10px 55px;
	max-width: 40px;
	opacity:0.3;
}	


@media screen and (max-width: 1100px) 
{
	.bloc-principal	{margin: 3vh 0vw;}  				/* Supression de la marge latérale prévue pour grands écran */
	.bloc-galerie	{margin: 3vh 0vw;}  				/* Supression de la marge latérale prévue pour grands écran */
	/*  .nom-site-web {font-size: 3rem;}*/
    .navbar a {padding:5px 5px;}
    .navbar .nav-links ul li {font-size: 1.10rem; }
    /* .texte-logo	{font-size:2rem;} */
    /* .texte-colibri {font-size:2rem;}*/
}

@media screen and (max-width: 950px) 
{
    .logo	{display:none;} 
    .colibri {display:none;}
    .texte-logo { display: none; }
    .texte-colibri{ display: none; }
    .header { padding-top: 5vh  }
}

 

        			/* CODE CSS MENU ADAPTE AUX PETITS ECRAN  */ 

@media screen and (max-width: 850px) 
{
    .navbar a  {color:#000;} 
    .navbar a:hover { background-color: silver; color:#222;}
    .navbar .menu-hamburger { display: block; }         /* affiche le menu burger */
    .navbar { padding: 0;  }                            /* plein écran */
    .nav-links 
	{                                        			/* position et mise forme du volet entier menu petits écrans */
		top:18vh;
        left:0;
        position: absolute;
        border:solid 1px gray;
        background-color: rgba(227, 243, 240, 1);       /* blanc transparent */
        /*back-filter: blur(7px);*/
        width: 50vw;
        height:82vh;
        display: flex;
        justify-content: ;
        align-items: ;
        margin-left: -100%;                             /* volet menu caché quand classe mobile-menu n'est pas activée par un clic sur le burger */
        transition: all 0.5s ease; 
    }
	.nav-links ul
	{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .navbar .nav-links ul li
	{
        margin: 15px 0;             					/* Crée des espaces verticaux entre les liens  */
        font-size: 1.5rem;
        font-weight: bold;
    }
    .nav-links.mobile-menu
	{      
        margin-left: 0;     							/* le volet menu apparait lorque la classe mobile-menu est activée par un clic sur le menu burger*/
    } 
}
	


@media only screen and (max-width: 700px) 				/* Adaptation écran */
{                           
    .col-1 {width: 16.66%;}   
	.col-2 {width: 32.33%;}     
	.col-3 {width: 50%;}        
	.col-4 {width: 66.66;}      
	.col-5 {width: 83.33%;}     
	.col-6 {width: 100%; } 
    .col-12 {width: 100%; }
    .item-circulaire { width: 80vw; height: 80vw;}
    .titre-item-ciculaire { font-size: 1.25rem}
    .texte-item-ciculaire { font-size: 1.1rem}
}                        

@media screen and (max-width: 600px) 
{
    /*  .nom-site-web {font-size:2.25rem; margin: 0vh 15vw;} */
    /*  .nav-links { top: 12vh height:82vh; }       */   
}

@media screen and (max-width: 500px) 
{
    .nom-site-web-01 { font-size:2.75rem; } 
    .titre-bloc	{ font-size:2rem;}
    .titre-bloc-2	{ font-size:1.50rem;}
   /* .format-image { max-width:95%;}	 
    #texte-image {max-width:95%;} */
}



					/* 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;
}