body{
margin:0;
font-family:Arial;
background:#f2f2f2;
}

header{
background:#0d3b66;
color:white;
text-align:center;
padding:30px;
}

/* MENU */

nav{
background:#1d5fa7;
}

.menu{
list-style:none;
margin:0;
padding:0;
display:flex;
justify-content:center;
}

.menu li{
position:relative;
}

.menu a{
display:block;
padding:14px 20px;
color:white;
text-decoration:none;
}

.menu a:hover{
background:#0d3b66;
}

/* sous menu */

.menu ul{
display:none;
position:absolute;
background:#1d5fa7;
list-style:none;
padding:0;
}

.menu li:hover ul{
display:block;
}

/* hero */

.hero{
background:url("village.jpg") center/cover;
height:340px;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:38px;
text-shadow:2px 2px 6px black;
}

/* contenu */

.container{
width:90%;
max-width:1100px;
margin:auto;
padding:40px 0;
}

.alert{
background:#ffd166;
padding:15px;
border-radius:5px;
margin-bottom:20px;
}

/* cards */

.cards{
display:flex;
flex-wrap:wrap;
gap:20px;
}

.card{
background:white;
padding:20px;
flex:1;
min-width:260px;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
border-radius:6px;
}

/* agenda */

.agenda{
background:white;
padding:20px;
border-radius:6px;
}

/* galerie */

.gallery{
display:flex;
flex-wrap:wrap;
gap:15px;
}

.gallery img{
width:100%;
max-width:320px;
border-radius:6px;
transition:transform 0.3s;
}

.gallery img:hover{
transform:scale(1.05);
}

/* footer */

footer{
background:#222;
color:white;
text-align:center;
padding:20px;
}