Body{
font-family: 'poppins',montserat,sans-serif
line-height:1.6;
background-color:#f5f7fa;
}
/* ici je personnalise mon entete */
#entete{
display: flex;
 top: 0;
justify-content: space-between;
align-items: center;
background: #0a0a0a;
position: sticky;
padding-bottom: 15px;
box-shadow: 0 2px 10px rgba(0,0,0,0.5);
z-index: 1000;
}
#entete .logo{
font-size:1.6em;
color: #19a7d8;
}
#entete .navigation ul{
display: flex;
list-style: none;
}
#entete .navigation ul li{
margin-left: 30px;
}
#entete .navigation ul li a{
text-decoration: none;
color: #ffffff;
font-weight:bold;
font-size: 1.6em;
}
#entete .ul li a:hover{
color: #ffa64d;
}
/* ici je personnalise ma banniere */
.banniere{
background-image: url(lolo.jpg);
height: 80vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-size: cover;
padding: 0 20px;
flex-direction: column;
}
.banniere h1{
font-size: 2.5em;
margin-bottom: 10px;
color: #ffffff;
}
.banniere p{
font-size: 1.2em;
color: 0a0a0a;
margin-bottom: 15px;
}
.bouton{
background: #f4a742;
color: #ffffff;
text-decoration: none;
border-radius: 10px;
padding: 5px;
}
.bouton:hover{
color: #cccccc;
background:#19a7d8;
border: 3px solid #41b349;
}
/* ici je personnalise ma grille de projet */
section{
padding: 80px 10%;}
/* ici je personnalise ma grille la largeur de la section des grilles---*/
h2{
text-align: center;
margin-bottom: 25px;
font-size: 2em:}
.grille {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
.grille1{
background: #f9f9f9;
border-radius: 15px;
border: 1px solid #19a7d8;
}

.grille:hover{
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.image1{
background-image: url(cd97ab35b8bf0be3cae71688992428a0.jpg);
height: 74vh;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: #b2bec3;
}
.grille2{
background: #f9f9f9;
border-radius: 15px;
border: 1px solid #19a7d8;
}
.grille:hover{
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.image2{
background-image: url(Sans%20titre-3.jpg);
height: 74vh;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: #b2bec3;
}
.grille3{
background:white;
border-radius: 15px;
border: 1px solid #19a7d8;
}
.grille:hover{
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.image3{
background-image: url(Sans%20titre-2.jpg);
height: 74vh;
background-size: contain;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: #b2bec3;
}

.galerie{
display: flex;
flex-wrap: wrap;
justify-content: center;

}
.galerie a{
margin: 10px;
}
.galerie img{
width: 250px;
height: 200px;
object-fit: cover;
border-radius: 10px;
transition: transform 0.2s;
}
.galerie img:hover{
transform: scale(1.1);
}