/* Importation de la police */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Styles généraux */
body {
    font-family: 'Roboto', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f9f9f9;
}

/* En-tête */
header {
    background: linear-gradient(90deg, #007BFF, #77C043);
    padding: 20px;
    display: flex;
    align-items: center;
    color: white;
}

header img {
    max-width: 100px;
    margin-right: 20px;
}

header h1 {
    font-size: 2em;
    margin: 0;
}

header p {
    font-size: 1.2em;
    margin: 5px 0 0;
}

/* Navigation */
nav {
    background: #007BFF;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

nav a {
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: background 0.3s;
}

nav a:hover {
    background: #0056b3;
    border-radius: 5px;
}

/* Conteneur principal */
.container {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section Accueil avec image de fond */
#accueil {
    background-image: url('IMG_4100.jpeg'); /* Remplacez 'votre-image.jpg' par le nom de votre image */
    background-size: cover; /* Pour couvrir toute la section */
    background-position: center; /* Pour centrer l'image */
    background-attachment: fixed; /* L'image reste fixe lors du défilement */
    color: #007BFF; /* Couleur du texte pour le rendre lisible */
    padding: 40px 20px; /* Gardez le même padding que dans le conteneur */
    text-align: center; /* Centrer le texte */
    position: relative; /* Pour le positionnement des éléments internes */
}

/* Exemple de media query pour ajuster l'image sur les petits écrans */
@media (max-width: 768px) {
    #accueil {
        background-size: contain; /* Ajuste l'image pour qu'elle soit entièrement visible */
        background-position: top; /* Aligne l'image en haut */
    }
}

#presentation {
    column-count:1; /* Nombre de colonnes */
    column-gap: 20px; /* Espace entre les colonnes */
}

#presentation li {
    break-inside: avoid; /* Évite que les éléments de liste soient coupés entre les colonnes */
}

/* Formules */
.formules {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.formule {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    flex: 1;
    min-width: 280px;
    text-align: center;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.formule:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.formule h3 {
    color: #007BFF;
}

/* Boutons pour les formules */
.formule button {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s;
}

.formule button:hover {
    background-color: #e0e0e0;
}

/* Formulaire */
form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}

form input, form textarea, form button {
    margin-bottom: 15px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}

form button {
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

form button:hover {
    background-color: #0056b3;
}
footer {
    background: #007BFF; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 20px; /* Espacement interne */
    text-align: center; /* Centre le texte */
}