body {
    font-family: 'Poppins', sans-serif; /* Police moderne et claire */
    margin: 0;
    padding: 0;
    background-color: #F4F1E1; /* Crème clair, doux et naturel */
    color: #333333; /* Texte sombre mais doux pour une bonne lisibilité */
}

/* En-tête */
header {
    background-color: #D4E157; /* Vert tendre et apaisant rappelant les paysages colombiens */
    padding: 40px 20px;
    text-align: center; /* Centrer le texte de l'en-tête */
    color: white;
    font-size: 2.6em;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Ombre subtile pour l'élégance */
}

/* Menu de navigation */
nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: #7E8A58; /* Vert doux évoquant les montagnes colombiennes */
    margin-top: 10px;
}

nav ul li {
    margin-right: 20px;
}

nav ul li a {
    text-decoration: none;
    font-weight: 500;
    color: white;
    padding: 12px 25px;
    background-color: transparent;
    border: 2px solid #D4E157; /* Bordure vert tendre */
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

nav ul li a:hover {
    background-color: #D4E157; /* Vert tendre au survol */
    color: #333333; /* Texte sombre */
    border-color: #333333; /* Bordure sombre au survol */
}

/* Section principale */
main {
    padding: 40px;
    background-color: #FFF; 
    color: #333333;
    max-width: 1200px;
    margin: 40px auto;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    background-image: url('images/arepas-pattern.png'); /* Motif discret de mosaïque inspiré des motifs colombiens (à créer) */
    background-size: 150px 150px; /* Taille des mosaïques réduite pour ne pas être trop envahissante */
    background-position: center;
}

/* Centrer les titres */
h1, h2, h3 {
    color: #333333;
    font-weight: 600;
    text-align: center; /* Centrer les titres */
}

/* Centrer le paragraphe */
p {
    line-height: 1.8;
    font-size: 1.1em;
    color: #555;
    text-align: center; /* Centrer le texte du paragraphe */
}

/* Section des mosaïques */
.mosaic {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Répartir les images de manière égale */
    gap: 15px;
    margin-top: 30px;
    justify-content: center; /* Centrer les éléments à l'intérieur */
}

.mosaic img {
    width: calc(33.33% - 10px); /* Trois images par ligne */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    display: block;
    margin: 0 auto; /* Centrer les images */
}

/* Pied de page */
footer {
    background-color: #7E8A58; /* Vert doux */
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: white;
    font-size: 1.1em;
    letter-spacing: 1px;
}

/* Section d'images (Arepas, produits typiques) */
img.arepa {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto; /* Centrer l'image */
}

/* Boutons stylisés */
button {
    background-color: #D4E157;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-block; /* Assurer l'alignement des boutons */
    margin: 20px auto; /* Centrer le bouton */
}

button:hover {
    background-color: #7E8A58; /* Effet survol sur bouton avec une teinte plus sombre */
    color: #FFF;
}

/* Formulaire de contact ou d'inscription */
form {
    background-color: #F0F4C3; /* Beige clair pour un aspect raffiné */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

form input, form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 15px;
    border: 1px solid #D4E157; /* Bordure vert tendre pour une continuité visuelle */
    border-radius: 5px;
}

form button {
    background-color: #7E8A58;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    margin: 20px auto; /* Centrer le bouton dans le formulaire */
}

form button:hover {
    background-color: #D4E157; /* Effet survol vert tendre sur le bouton */
}