/* Réseaux sociaux */
.reseaux-sociaux {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 20px; /* Réduction de l'espacement entre les icônes */
}

.reseaux-sociaux a:not(.button) {
    width: 50px; /* Réduction de la largeur des icônes */
    height: 50px; /* Réduction de la hauteur des icônes */
    margin: 5px;
}
/* Pour afficher les réseaux en colonne sur la page index */
#index .reseaux-sociaux {
    flex-direction: column-reverse; /* Inverse l'ordre vertical */
}
/* Footer */
footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    justify-content: space-around;
    background-color: rgb(118, 0, 0);
}
/* Version desktop */
@media screen and (min-width:600px) {
    footer {
        flex-direction: row;
    }
}
.round {
    border-radius: 50%;
    background-color: white;
    overflow: hidden;
    padding: 2px;
    display: flex;
}
.round .coeur {
    transform: translate(0px, 2px);
    height: 46px;
    margin: 2px;
}
/* Button */
.button {
    display: flex; /* Utilisation de flexbox pour centrer le contenu */
    position: relative; /* Position relative pour gérer les éléments absolument positionnés */
    padding: 8px 15px;
    width: 200px; /* Largeur du bouton */
    min-height: 50px; /* Hauteur minimale du bouton */
    border: 5px solid rgb(118, 0, 0); /* Bordure en rouge */
    text-decoration: none; /* Retire la décoration de texte (soulignement) */
    font-size: 1.2rem; /* Taille de la police */
    /* font-weight: 700; Mettre en gras */
    justify-content: center; /* Centre le texte horizontalement */
    text-align: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
    overflow: hidden; /* Empêche le débordement du contenu */
    z-index: 0; /* Assure que le bouton soit en dessous des éléments positionnés avec un index plus élevé */
    color: black; /* Change la couleur du texte en noir */
    background: white ; /* Fond blanc pour le bouton */
}

.button::before {
    content: ''; /* Aucun contenu textuel, mais un pseudo-élément de fond */
    position: absolute; /* Position absolue par rapport au parent (le bouton) */
    bottom: 75px; /* Position initiale en bas du bouton */
    left: 0; /* Aligne à gauche */
    width: 100%; /* Largeur complète du bouton */
    height: 100%; /* Hauteur complète du bouton */
    background: #333; /* Fond noir pour l'effet avant */
    border-radius: 0% 0% 50% 50%; /* Arrondir le bas du pseudo-élément */
    z-index: -1; /* Place le pseudo-élément derrière le contenu du bouton */
    transition: all 2s; /* Animation de transition pour un effet fluide */
}

.button:hover::before {
    bottom: 0px; /* Déplace le pseudo-élément vers le bas du bouton lors du survol */
    border-radius: 0px; /* Enlève l'arrondi du bas lors du survol */
}

/* Bouton "red-rounded" */
.button.round {
    width: 75px;
    height: 70px;
    padding: 0;
}
.red-rounded {
    border-radius: 20px; /* Bordure arrondie pour le bouton */
}
/* Utlisé sur la page principale */
.reseaux-sociaux .button {
    padding: 0 15px;
    width: unset; /* Largeur du bouton */
}

/* Effet avant du bouton "red-rounded" */
.red-rounded::before {
    background: rgba(118, 0, 0, 0.698); /* Fond blanc pour l'effet avant */
    border-radius: 50% 50% 0% 0%; /* Arrondi en haut du pseudo-élément */
    top: 75px; /* Positionné en haut du bouton, à l'extérieur */
    bottom: unset; /* Enlève la position par défaut du bas */
}

.red-rounded:hover::before {
    bottom: unset; /* Enlève la position du bas */
    top: 0px; /* Remet le pseudo-élément au niveau du haut du bouton lors du survol */
}