/* Réinitialisation de base pour une meilleure cohérence */
body {
    font-family: Arial, sans-serif; /* Choisissez une police de caractères */
    margin: 0; /* Supprime les marges par défaut du navigateur */
    padding: 0;
    background-color: #f4f4f9; /* Couleur de fond très claire */
    color: #333; /* Couleur de texte principale */
    line-height: 1.6;
}

/* Style de l'en-tête */
header {
    background-color: #007bff; /* Un bleu vif pour l'en-tête */
    color: white;
    padding: 40px 20px;
    text-align: center;
}

header h1 {
    margin-bottom: 5px;
}

header .slogan {
    font-style: italic;
    opacity: 0.8;
}

/* Style du contenu principal */
main {
    max-width: 800px; /* Limite la largeur du contenu */
    margin: 30px auto; /* Centre le contenu horizontalement */
    padding: 0 20px;
}

section {
    margin-bottom: 40px;
    padding: 20px;
    background-color: white;
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Petite ombre portée */
}

/* Style du bouton (Appel à l'Action) */
.bouton {
    display: inline-block;
    background-color: #28a745; /* Un vert pour l'action ! */
    color: white;
    padding: 10px 20px;
    text-decoration: none; /* Enlève le soulignement du lien */
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s; /* Transition douce au survol */
}

.bouton:hover {
    background-color: #218838; /* Couleur plus foncée au survol */
}

/* Style du pied de page */
footer {
    text-align: center;
    padding: 20px;
    background-color: #333; /* Un gris foncé pour le pied de page */
    color: white;
    margin-top: 40px;
    font-size: 0.9em;
}

footer a {
    color: #99ccff; /* Une couleur claire pour les liens */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}