/* Liens vers les réseaux sociaux (Facebook, Instagram) : logos en couleur.
   Fichier partagé par toutes les pages ; utilise la variable --brand-orange (définie dans style.css / style_index.css).
   Réglage de la taille des logos : --social-size (40px par défaut). */

.social-links { display: flex; align-items: center; justify-content: center; gap: 14px; }

.social-link {
    display: inline-flex;
    width: var(--social-size, 40px);
    height: var(--social-size, 40px);
    border-radius: 22%;
    transition: transform 0.2s ease;
}
.social-link img { width: 100%; height: 100%; display: block; }
.social-link:hover { transform: translateY(-3px) scale(1.07); }
.social-link:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* Sous le bandeau d'horaires (accueil) */
.hero-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 24px; }
.hero-social-label { font-size: 1rem; font-weight: 500; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65); }
.hero-social .social-link { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)); }

/* Pied de page */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-social-title { font-size: 0.95rem; color: #DDDDDD; }
.footer-social .social-link { --social-size: 36px; }

@media (prefers-reduced-motion: reduce) {
    .social-link { transition: none; }
    .social-link:hover { transform: none; }
}