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



@media only screen and (max-width: 700px) 				/* Adaptation écran */
{                           
    .col-1 {width: 33.33%;}   
	.col-2 {width: 33.33%;}     
	.col-3 {width: 33.33%;}        
	.col-4 {width: 33.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}

    .nom-site-web-01 { font-size:2.25rem; } 
    .nom-site-web-02 { font-size:1.75rem; } 
    
    
    
    .navbar .menu-hamburger
    {
    max-width: 30px;
    max-height: auto;
    right: 7vw;
    top: 6vh; 
    }


}    






@media screen and (max-width: 1024px) 
{
	.bloc-principal	{margin: 0vh 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; }
    
}

 

        			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*/
    } 
    
    
    .logo
    {
    position: absolute; 							/* dimensions et position du logo*/
    left: 2.5vw;
    top: 2.5vh; 
    max-width: 140px;
    max-height: auto;
    }
 
    .nom-site-web-01 { font-size:2.40rem; } 
    .nom-site-web-02 { font-size:1.60rem; } 

    .header
    {    
    height:20vh;
    padding-top: 4vh;    
    }
}
    
}
	

@media screen and (max-width: 850px) 
{
    
   .logo
    {
    position: absolute; 							/* dimensions et position du logo*/
    left: 2.5vw;
    top: 2.5vh; 
    max-width: 125px;
    max-height: auto;
    }
 
    .nom-site-web-01 { font-size:2.25rem; } 
    .nom-site-web-02 { font-size:1.50rem; } 

    .header
    {    
    height:20vh;
    padding-top: 4vh;    
    }
}






                    




@media screen and (max-width: 650px) 
{
   
    .nom-site-web-01 { font-size:2.00rem; } 
    .nom-site-web-02 { font-size:1.40rem; } 
    
    .logo
    {
    left: 2.5vw;                          /* dimensions et position du logo*/
    top: 2.5vh; 
    max-width: 115px;
    max-height: auto;
    }
}
    

@media screen and (max-width: 600px) 
{
   
    .nom-site-web-01 { font-size:1.90rem; } 
    .nom-site-web-02 { font-size:1.35rem; } 
    
    .logo
    {
    left: 2.5vw;                          /* dimensions et position du logo*/
    top: 2.5vh; 
    max-width: 105px;
    max-height: auto;
    }
}
 



@media screen and (max-width: 500px) 
{
    .nom-site-web-01 { font-size:1.80rem; } 
    .nom-site-web-02 { font-size:1.20rem; } 
    
    .logo
    {
    left: 2.5vw;                          /* dimensions et position du logo*/
    top: 2.5vh; 
    max-width: 95px;
    max-height: auto;
    }
    
    .header
    {    
    height:15vh;
    padding-top: 3vh;    
    }

    .titre-bloc	{ font-size:2rem;}
    .titre-bloc-2	{ font-size:1.50rem;}
   /* .format-image { max-width:95%;}	 
    #texte-image {max-width:95%;} */
}





@media screen and (max-width: 450px) 
{
    .nom-site-web-01 { font-size:1.75rem; } 
    .nom-site-web-02 { font-size:1.15rem; } 
    
    .logo
    {
    left: 2.5vw;                          /* dimensions et position du logo*/
    top: 2.5vh; 
    max-width: 90px;
    max-height: auto;
    }

    .navbar .menu-hamburger
    {
    max-width: 25px;
    max-height: auto;
    right: 7vw;
    top: 6vh; 
    }

    
    .petit-picto
    {
    max-width: 75px;
    display: flex;
    margin: auto;    
    }
    
    
    .titre-bloc	{ font-size:2rem;}
    .titre-bloc-2	{ font-size:1.50rem;}
   /* .format-image { max-width:95%;}	 
    #texte-image {max-width:95%;} */
}



@media screen and (max-width: 400px) 
{
    .nom-site-web-01 { font-size:1.60rem; } 
    .nom-site-web-02 { font-size:1.15rem; } 
    
    .logo
    {
    left: 2vw;                          /* dimensions et position du logo*/
    top: 2.5vh; 
    max-width: 80px;
    max-height: auto;
    }


}





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

.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;
}