/* 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 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 */
    
    .logo
    {
    max-width: 190px;
    max-height: auto;
    }
 
    .nom-site-web-02 { font-size:2.25rem; } 

    .header
    {    
    height:30vh;
    padding-top: 0vh;    
    }
    
	.navbar a {padding:5px 5px;}
    .navbar .nav-links ul li {font-size: 1.10rem; }
    .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:30vh;
        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 screen and (max-width: 850px) 
{
     .nom-site-web-02 { font-size:2.10rem; } 
}




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

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


@media screen and (max-width: 600px) 
{
    .nom-site-web-02 { font-size:2.00rem; } 
    .titre-bloc	{ font-size:2.50rem;}
    .titre-bloc-2 { font-size:2.00rem;} 
}




@media screen and (max-width: 500px) 
{
    
    .logo
    {
    max-width: 175px;
    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;    
    }

    .nom-site-web-02 { font-size:1.75rem; } 
 
}





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