/* Style de base pour le corps de la page */
body {
    background-color: #2c2f33; /* Couleur de fond sombre et neutre */
    color: #dcdcdc; /* Couleur de texte claire pour le contraste */
    margin: 0; /* Pas de marge */
    padding: 0; /* Pas de remplissage */
    display: flex; /* Affichage en flexbox */
    flex-direction: column; /* Direction de la flexbox en colonne */
    min-height: 100vh; /* Hauteur minimale de 100% de la vue */
}

/* Conteneur principal pour la section de contact */
.contact-main {
    flex: 1; /* Prend tout l'espace disponible */
    display: flex; /* Affichage en flexbox */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    padding: 2rem; /* Remplissage de 2rem */
    background-color: #23272a; /* Couleur de fond sombre pour la section principale */
}

/* Carte d'information de contact */
.contact-info {
    background-color: #3a3f44; /* Fond gris foncé pour la carte d'information */
    padding: 2rem; /* Remplissage de 2rem */
    border-radius: 12px; /* Coins légèrement arrondis pour un look moderne */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Ombre plus douce et plus large */
    max-width: 600px; /* Largeur maximale de 600px */
    width: 100%; /* Prend 100% de la largeur disponible */
    text-align: center; /* Alignement du texte au centre */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition pour l'effet de survol */
}

/* Effet de survol pour la carte d'information */
.contact-info:hover {
    transform: translateY(-5px); /* Légère élévation au survol */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée au survol */
}

/* Style pour le titre principal dans la carte d'information */
.contact-info h2 {
    margin-bottom: 1rem; /* Marge inférieure de 1rem */
    color: #7289da; /* Couleur bleue douce pour le titre */
    font-size: 1.8rem; /* Taille de police de 1.8rem */
}

/* Style pour les sous-titres dans la carte d'information */
.contact-info h3 {
    margin-top: 1.5rem; /* Marge supérieure de 1.5rem */
    margin-bottom: 1rem; /* Marge inférieure de 1rem */
    color: #99aab5; /* Gris clair pour les sous-titres */
    font-size: 1.5rem; /* Taille de police de 1.5rem */
}

/* Style pour les détails de contact et les horaires d'ouverture */
.contact-details p,
.opening-hours {
    margin-bottom: 1rem; /* Marge inférieure de 1rem */
    line-height: 1.6; /* Hauteur de ligne de 1.6 */
    color: #b9bbbe; /* Gris moyen pour le texte */
}

/* Style pour la liste des horaires d'ouverture */
.opening-hours {
    list-style: none; /* Retire les puces des horaires */
    padding: 0; /* Pas de remplissage */
}

/* Style pour les éléments de la liste des horaires d'ouverture */
.opening-hours li {
    margin-bottom: 0.5rem; /* Marge inférieure de 0.5rem pour les éléments de la liste */
}

/* Style pour les liens dans la carte d'information */
.contact-info a {
    color: #7289da; /* Bleu pour les liens */
    text-decoration: none; /* Pas de soulignement */
    font-weight: bold; /* Texte en gras */
    transition: color 0.3s ease; /* Transition pour l'effet de survol */
}

/* Effet de survol pour les liens dans la carte d'information */
.contact-info a:hover {
    color: #5b6eae; /* Couleur légèrement plus foncée au survol */
    text-decoration: underline; /* Soulignement au survol */
}

/* Style pour les informations de mise à jour */
.update-info {
    font-size: 0.9rem; /* Taille de police de 0.9rem */
    color: #99aab5; /* Gris clair pour les informations secondaires */
}

/* Style pour le lien de suggestion */
.suggest-link {
    display: inline-block; /* Affichage en bloc en ligne */
    margin-top: 1rem; /* Marge supérieure de 1rem */
    color: #7289da; /* Bleu pour le lien de suggestion */
    font-weight: bold; /* Texte en gras */
    transition: color 0.3s ease; /* Transition pour l'effet de survol */
}

/* Effet de survol pour le lien de suggestion */
.suggest-link:hover {
    color: #5b6eae; /* Couleur légèrement plus foncée au survol */
    text-decoration: underline; /* Soulignement au survol */
}