/* Styles du pied de page */
#footer {
    background-color: var(--footer-bg-color);
    /* Couleur de fond du pied de page */
    color: var(--light-text-color);
    /* Couleur du texte */
    padding: 2rem 0;
    /* Espacement intérieur */
    margin-top: auto;
    /* Marge supérieure automatique */
}

/* Styles pour la ligne horizontale dans le pied de page */
#footer hr {
    width: 100%;
    /* Largeur de la ligne horizontale */
    margin: 1rem auto;
    /* Marge autour de la ligne */
    border: 1.5px solid var(--light-text-color);
    /* Bordure de la ligne */
    opacity: 0.5;
    /* Opacité de la ligne */
}

/* Styles pour les liens dans les listes non ordonnées et les sections centrées */
#footer .list-unstyled a,
#footer .text-center.p-3 a {
    color: var(--light-text-color);
    /* Couleur des liens */
    text-decoration: none;
    /* Pas de soulignement */
    transition: all 0.3s ease;
    /* Transition pour les effets */
    display: block;
    /* Affichage en bloc */
}

/* Styles spécifiques pour les liens dans les listes non ordonnées */
#footer .list-unstyled a {
    padding: 0.5rem 0;
    /* Espacement intérieur des liens */
    position: relative;
    /* Position relative pour les éléments enfants */
}

/* Styles pour les liens au survol ou actifs */
#footer .list-unstyled a:hover,
#footer .list-unstyled a.active {
    color: var(--primary-color);
    /* Couleur des liens au survol ou actifs */
}

/* Styles pour les éléments actifs */
#footer .active {
    color: var(--primary-color-light) !important;
    /* Couleur des éléments actifs */
}

/* Styles pour l'élément après les liens dans les listes non ordonnées */
#footer .list-unstyled a::after {
    content: "";
    /* Contenu vide pour l'élément après */
    position: absolute;
    /* Position absolue pour l'élément après */
    left: 50%;
    /* Positionnement à 50% à gauche */
    bottom: -1px;
    /* Positionnement en bas */
    width: 0;
    /* Largeur initiale */
    height: 2px;
    /* Hauteur de l'élément après */
    background: #da0a0a;
    /* Couleur de fond de l'élément après */
    transition: width 0.3s ease, left 0.3s ease, background 0.3s ease;
    /* Transition pour les effets */
}

/* Styles pour l'élément après au survol des liens */
#footer .list-unstyled a:hover::after {
    width: 20%;
    /* Largeur de l'élément après au survol */
    left: 0%;
    /* Positionnement à gauche */
    background: #339af0;
    /* Couleur de fond de l'élément après au survol */
}

/* Styles pour l'élément après des liens actifs */
#footer .list-unstyled a.active::after {
    width: 50%;
    /* Largeur de l'élément après pour les éléments actifs */
    left: 0%;
    /* Positionnement à gauche */
    background: #f3f1f1;
    /* Couleur de fond de l'élément après pour les éléments actifs */
}

/* Styles pour les réseaux sociaux */
#footer .reseaux,
#footer .reseaux a {
    display: flex;
    /* Affichage en flex pour les réseaux sociaux */
    justify-content: center;
    /* Centrage du contenu */
    gap: 1.5rem;
    /* Espacement entre les icônes des réseaux sociaux */
}

/* Styles pour les liens des réseaux sociaux */
.reseaux a {
    align-items: center;
    /* Alignement des éléments au centre */
    width: 80px;
    /* Largeur des icônes agrandie pour mobile */
    height: 80px;
    /* Hauteur des icônes agrandie pour mobile */
    border-radius: 50%;
    /* Coins arrondis */
    background-color: #f0f0f0;
    /* Couleur de fond des icônes */
    border: 2px solid transparent;
    /* Bordure transparente */
    color: black;
    /* Couleur du texte des icônes */
    font-size: 1.5rem;
    /* Taille de la police des icônes */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    /* Transition pour les effets */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Ombre des icônes */
    margin: 0 10px;
    /* Marge autour des icônes */
    position: relative;
    /* Position relative pour l'animation de la bulle */
}

/* Styles pour les liens des réseaux sociaux au survol */
.reseaux a:hover {
    background-color: #007bff;
    /* Couleur de fond au survol */
    color: white;
    /* Couleur du texte au survol */
    transform: translateY(-15px);
    /* Déplacement vers le haut au survol */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    /* Ombre au survol */
}

/* Ajout d'une bulle sous l'icône au survol */
.reseaux a::after {
    content: "";
    /* Contenu vide pour la bulle */
    position: absolute;
    /* Position absolue pour la bulle */
    left: 50%;
    /* Centrer horizontalement */
    bottom: -15px;
    /* Positionnement en bas avec un espace */
    width: 80px;
    /* Largeur de la bulle agrandie */
    height: 10px;
    /* Hauteur de la bulle agrandie */
    background: #007bff;
    /* Couleur de fond de la bulle au survol */
    border-radius: 5px;
    /* Coins arrondis pour la bulle */
    transform: translateX(-50%) scale(0);
    /* Centrer et réduire à zéro */
    transition: transform 0.3s ease, background 0.3s ease;
    /* Transition pour l'animation */
}

/* Styles pour la bulle au survol */
.reseaux a:hover::after {
    transform: translateX(-50%) scale(1);
    /* Agrandir la bulle au survol */
    background: #0056b3;
    /* Couleur de fond de la bulle au survol */
}

/* Styles pour les liens des réseaux sociaux au clic */
.reseaux a:active {
    transform: translateY(0);
    /* Réinitialisation du déplacement au clic */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Ombre au clic */
}

/* Styles pour les icônes des réseaux sociaux */
#footer .reseaux i {
    font-size: 2.5rem;
    /* Taille de la police des icônes */
    transition: color 0.3s ease;
    /* Transition pour la couleur des icônes */
}

/* Styles pour les icônes au survol */
.reseaux a:hover i {
    color: white;
    /* Couleur des icônes au survol */
}

/* Section des droits d'auteur */
#footer .text-center.p-3 {
    background-color: rgba(0, 0, 0, 0.2);
    /* Couleur de fond de la section des droits d'auteur */
    padding: 1rem !important;
    /* Espacement intérieur */
}

/* Styles pour le texte dans la section des droits d'auteur */
#footer .text-center.p-3 span {
    color: #FFA500;
    /* Couleur du texte dans la section des droits d'auteur */
}

/* Styles pour les informations du pied de page */
.footer-info {
    background-color: rgba(0, 0, 0, 0.2);
    /* Couleur de fond des informations du pied de page */
    color: #dcdcdc;
    /* Couleur de texte par défaut */
    padding: 1rem;
    /* Espacement intérieur */
    font-size: 0.85rem;
    /* Taille de police pour le texte de copyright */
    margin-bottom: 1rem;
    /* Augmenter l'espacement entre les éléments */
    text-align: center;
    /* Assure l'alignement du texte */
    line-height: 1.6;
    /* Améliore la lisibilité pour le texte multi-lignes */
}

/* Styles pour le pied de page */
.footer {
    background-color: rgba(0, 0, 0, 0.2);
    /* Couleur de fond du pied de page */
    color: #dcdcdc;
    /* Couleur de texte par défaut */
    padding: 1rem 0;
    /* Espacement intérieur */
    font-size: 0.85rem;
    /* Taille de police pour le texte de copyright */
}

/* Styles pour les informations du pied de page (répétées) */
.footer-info {
    background-color: rgba(0, 0, 0, 0.2);
    /* Couleur de fond des informations du pied de page */
    color: #dcdcdc;
    /* Couleur de texte par défaut */
    padding: 1rem;
    /* Espacement intérieur */
    font-size: 0.85rem;
    /* Taille de police pour le texte de copyright */
    margin-bottom: 1rem;
    /* Augmenter l'espacement entre les éléments */
    text-align: center;
    /* Assure l'alignement du texte */
    line-height: 1.6;
    /* Améliore la lisibilité pour le texte multi-lignes */
}

/* Styles pour les liens dans le pied de page */
.footer-link {
    color: #FFA500;
    /* Couleur des liens */
    text-decoration: none;
    /* Pas de soulignement */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    /* Transition pour les effets */
    font-weight: 500;
    /* Légèrement en gras pour une meilleure visibilité */
}

/* Styles pour les liens au survol dans le pied de page */
.footer-link:hover {
    color: #ff8c00;
    /* Couleur des liens au survol */
    text-shadow: 0 0 5px rgba(255, 136, 0, 0.5);
    /* Ajoute un léger effet de lueur au survol */
}

/* Améliorations pour une meilleure expérience mobile */
@media (max-width: 768px) {
    .footer {
        padding: 0.75rem 0;
        /* Espacement intérieur plus petit pour les écrans plus petits */
    }

    .footer-info {
        font-size: 0.8rem;
        /* Texte plus petit pour mobile */
    }

    /* Agrandir les icônes des réseaux sociaux pour mobile */
    #footer .reseaux a {
        width: 80px;
        /* Largeur des icônes des réseaux sociaux agrandie */
        height: 80px;
        /* Hauteur des icônes des réseaux sociaux agrandie */
    }

    /* Agrandir la bulle pour mobile */
    .reseaux a::after {
        width: 100px;
        /* Largeur de la bulle agrandie */
        height: 12px;
        /* Hauteur de la bulle agrandie */
    }

    #footer .list-unstyled a:hover::after,
    .navbar-nav .nav-link:hover::after {
        width: 0;
        /* Enlève le soulignement au survol */
    }

    /* Ajout de cette ligne pour enlever le trait pour les icônes des réseaux sociaux*/
    #footer .reseaux a::after {
        width: 0;
        /* Enlève le trait pour les icônes des réseaux sociaux */
    }
}

/* Requêtes média pour le pied de page */
@media (max-width: 992px) {
    #footer {
        text-align: center;
        /* Alignement centré du pied de page */
    }

    #footer hr {
        width: 75%;
        /* Largeur de la ligne horizontale */
    }

    #footer .list-unstyled a::after,
    .navbar-nav .nav-link::after {
        width: 0;
        /* Enlève le soulignement */
    }

    #footer .reseaux {
        margin-top: 1rem;
        /* Marge supérieure pour les réseaux sociaux */
    }

    /* Ajout de cette ligne pour enlever le trait pour les icônes des réseaux sociaux*/
    #footer .reseaux a::after {
        width: 0;
        /* Enlève le trait pour les icônes des réseaux sociaux */
    }
}

/* Requêtes média pour les écrans plus petits */
@media (max-width: 768px) {

    #footer h5,
    #footer p,
    #footer .list-unstyled a {
        font-size: 0.9rem;
        /* Taille de police pour les titres et paragraphes */
    }

    #footer h5 {
        font-size: 1.1rem;
        /* Taille de police pour les titres */
    }

    #footer .reseaux a {
        width: 60px;
        /* Largeur des icônes des réseaux sociaux */
        height: 60px;
        /* Hauteur des icônes des réseaux sociaux */
    }

    #footer .reseaux i {
        font-size: 1.5rem;
        /* Taille de police des icônes agrandie */
    }

    #footer .list-unstyled a:hover::after,
    .navbar-nav .nav-link:hover::after {
        width: 0;
        /* Enlève le soulignement au survol */
    }

    #footer .list-unstyled a.active::after,
    .navbar-nav .nav-link.active::after {
        width: 20%;
        /* Largeur du soulignement */
        left: 50%;
        /* Positionnement à 50% du conteneur */
        transform: translateX(-50%);
        /* Centrer l'élément */
        bottom: -1px;
        /* Ajuster la position verticale si nécessaire */
    }

    /* Ajout de cette ligne pour enlever le trait pour les icônes des réseaux sociaux*/
    #footer .reseaux a::after {
        width: 0; /* Enlève le trait pour les icônes des réseaux sociaux */
    }
}

/* Animations pour le pied de page */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* Opacité initiale */
        transform: translateY(20px);
        /* Déplacement vers le bas */
    }

    to {
        opacity: 1;
        /* Opacité finale */
        transform: translateY(0);
        /* Réinitialisation du déplacement */
    }
}

/* Animation d'apparition pour le conteneur du pied de page */
#footer .container {
    animation: fadeIn 0.5s ease-out;
    /* Animation d'apparition */
}

/* Accessibilité pour le pied de page */
#footer a:focus {
    outline: 2px solid var(--primary-color);
    /* Contour pour l'accessibilité */
    outline-offset: 2px;
    /* Décalage du contour */
}