/**
 * Les boutons de réseaux sociaux — composant partagé.
 *
 * POURQUOI UNE FEUILLE À PART
 *
 * Ces trois règles servent l'accueil ET la page Association, qui rendent le même
 * fragment (`Views/partials/liens_reseaux`). Elles vivaient dans `accueil.css` ;
 * les recopier dans `association.css` aurait mis les couleurs de LinkedIn et de
 * Facebook à deux endroits, avec la certitude qu'un jour l'une des deux
 * changerait seule.
 *
 * C'est la seule exception à la règle du lot 1.4 — « les composants de page
 * restent dans leur page » — et elle tient parce que les deux usages ne
 * divergent sur AUCUNE propriété : c'est le même bouton, au caractère près.
 * Ce qui diffère — carte verticale sur l'accueil, bande horizontale sur
 * l'Association — reste dans la feuille de chaque page.
 *
 * Les couleurs sont celles des marques, pas du design system : un bouton
 * LinkedIn qui ne serait pas au bleu de LinkedIn cesserait d'être reconnu.
 */

.btn-social-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    /* 44px de haut : cible tactile minimale du Chapitre 6. */
    min-height: 44px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    color: white;
    transition: transform 0.2s, opacity 0.2s;
}

.btn-social-action:hover {
    transform: translateY(-1.5px);
    opacity: 0.95;
}

.btn-linkedin {
    background-color: #0077b5;
}

.btn-facebook {
    background-color: #1877f2;
}