body{
    margin: 0;
    padding: 0;
    width: 100%; 
    background-color: #504f5397;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

h1{
    color: white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

*{
    margin: 0;
    padding: 0;
}




                            /* Barre de navigation LOGO - MENU  */
.logo{
    color: white;
    justify-items:center;
    font-size: 20px;
    text-decoration: none;

}
.logo img{
    width: 100px;
    height: 100px;


}

                         /* Menu humburger */
 
header {
    /* width: 100%; */
    background-color:black;
    padding: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
} 

.logo img {
    width: 100%;
}


.art{
    display: flex;
    padding-right: 10px;
    align-items: center;
    flex-direction: row;
}


.menu-burger {
    cursor: pointer;
    display: none; /* Masqué par défaut sur les grands écrans */
}

.menu-burger span {
    display: flex;
    height: 3px;
    width: 25px;
    background-color: white;
    margin: 5px 0;
}

.menu {
    list-style-type: none; /*liste-style:none;*/
    list-style: none;
    display: flex;
    align-items: center;
    overflow: auto;
}

/* .menu li{ */

    /* margin-right: 20px; */
/* } */

.menu a {
    /* text-decoration: none; */
    color: white;
    margin-right: 30px;
}

.menu a link:last-of-type{

    margin-right: 10px;
}
.icones a {
    margin-right: 10px;
}


a{
    text-decoration: none;   /*aucune décoration souligne le menu*/
}



.active{
    padding:2px;
    border-radius: 2px;
    background: gray;
}


.menu a:hover:not(.active){              /*Menu active leurs de la navigation*/
    background-color:slategrey;
    color: cyan;
}





                            /*Position d'icones réseau */

.icones {
    display: flex;
    justify-content: flex-start;
    align-items: center;    
}

.icones img{
    width: 30px;
    height: 30px;
    margin-right: 10px;

}


nav{
    display: flex;
    /* padding: 20px; */

}

footer{
    border: 2px solid black;
    background-color: black;
    /* display:block;  */
    width: 100%; 
    height: 20vh;
    display: flex;
    justify-content: space-around;
    color: white;
    margin: 0;
    padding: 0;
    align-items: center;
}

footer ul{
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 30px;
}


footer a{
    color: white;
    display: flex;
    justify-content: flex-start;
    margin-right: 15px;
}


.copyright{
    width: 100%;
    line-height: 12px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}


footer .iconesresau{
    display: flex;
    justify-content: space-around;
    align-items: center;

}



                        /* Page Accueil */

                       
/* .peintures { */
    /* margin-top: 30px; */
/* } */
      
.peintures {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 30px;

}

.peintures img {
    max-width: 100%;
    /* height: auto; */
    width: 350px;
    max-height: 400px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px; 
    padding: 15px;
}


/* .peintures img { */
    /* max-width: 100%; */
    /* height: auto; */
    /* width: 100%; Utilisation de la largeur à 100% pour s'assurer que l'image ne dépasse pas la largeur du conteneur parent */
    /* max-height: 400px; Ajout d'une hauteur maximale pour éviter que les images ne deviennent trop grandes */
    /* margin-bottom: 10px; Ajout d'une marge en bas pour séparer les images */
/* } */
                        
.text h2 .text{
    text-align: center;
    flex-direction: column;
    justify-content: center;
     }                  

.text h2{
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    color: white;
    margin-top: 50px;
}
.pentures h3 .text{
    align-items: center;
    text-align: center;
}
                        
section .artistes{ 
    text-align: center;

}

.accueil{
    text-align: center;
    margin-left: 50px;
    margin-right: 49px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: justify;
    align-items: center;
}




                          /*Tableaux de la page d'accueil centré*/


/* styles spécifiques pour les tailles d'écran plus petites (tablettes et smartphones) */

 @media only screen and (max-width: 768px) {
.container {
    padding: 10px;
}

.peintures {
    margin-top: 20px;
    }
}

.text {
    text-align: center;
}



.accueil {
    color: #000000; /* Noir pour les paragraphes */
}

.artistes {
    margin-top: 30px;
}

.artistes h3 {
    color: #ffffff; /* Blanc pour le h3 */
}






                    

                        /* Page Evenement */

.cours h2{
    color: white;
}

   
                        
.cours p{
    text-align: center;
    margin-left: 280px;
    max-width: 700px;
    margin-top: 30px;
    margin-bottom:30px;
    text-align: justify;
}

.portrait img{
    width: 300px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}






                                    /* Page Biographie */


.center {
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
  

.justifie{
text-align: justify;

}

.text-container {
    max-width: 50%;

    margin-right: 2%;
    margin-left: 4%;
}
         
.iBiographie{
    margin-right: 4%;
    margin-left: 2%;
    width: 50%;
    height: 50%;

}


.centered-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: white;
   
}
                        
.float-right {
    /* float: right; */
    border: 1px solid #ddd;
    /* margin-left: 20px; Ajoute de l'espace entre le paragraphe et l'image */
    margin-top: 15px;
    width: 50%;
    border-radius: 5px;
    padding: 15px;
}



                     /* Page Galerie */

#galeries {
    text-align: center;
    /* padding: 20px; */
}

.filter-buttons {
    margin-bottom: 20px;
}

.filter-buttons button {
    padding: 10px;
    margin: 5px;
}

.product-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.card {
    width: 300px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card img {
    /* max-width: 50%; */
    /* height: auto; */
    width: 50%;
    height: 50%;
}



                                          /* Page Contact */

h3{
    text-align: center;
	font-size: 24px;
    line-height: 20px;
	color:white;
	font-weight:500;
    margin-bottom: 2%;
}


                    /*Remplisage de Formumlaire nom, prenom, email, téléphone*/	

input[type=text],  
input[type=email],  
input[type=tel],   	
textarea{            
	width:100%;
    margin:2px;
 }

section {
    text-align: center; /* Centre le contenu de la section */
    width: 100%;
}




                                    /* Centrer le Formulaire */
.contact {
    justify-content: center;
    display: inline-block; /* Permet au formulaire de rester centré */
    text-align: left; /* Aligne le texte à gauche à l'intérieur du formulaire */
    width: 60%; /* Ajuste la largeur du formulaire selon vos préférences */
    margin: 0 auto; /* Centre le formulaire horizontalement */
}


.form{

    max-width:800px;
    margin:auto;

    
}
button{
    color: gray;
}

button:hover {
    background-color:#ae9eb498;
} 


.domicile{
    text-align: center;
}


.adresse p{
    color: white;
    
    margin: top 50px;; /*Ajoute de l'espace entre le button validation du formulaire et l'adresse*/
    font-size: 20px;
}



#map{

    margin-top:40px;
}





                        /* Media Query pour le menu burger */


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

.menu-burger {
    display: block; /* Affiché lorsque la largeur de l'écran est inférieure à 768 pixels */
}

.menu {
    display: none; /* Masqué par défaut sur les petits écrans */
    flex-direction: column;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    background-color: #333;
}

.menu.show {
    display: flex;
}

.menu a {
    margin: 0;
    text-align: center;
    }

.iBiographie{
     width: 50%;
    height: 50%;

}

footer{display:block;}
}