/* ============================================================ INFO-DEVIS.FR — Icônes réseaux sociaux : effets hover/click À ajouter dans après layout.css ============================================================ */ /* --- État par défaut --- */ .footer-social-btn { width: 36px; height: 36px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs, 0.75rem); font-weight: 700; color: rgba(255, 255, 255, 0.6); /* Transition fluide sur toutes les propriétés */ transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; user-select: none; -webkit-user-select: none; } /* --- Facebook hover (#1877F2) --- */ .footer-social-btn[data-social="facebook"]:hover { background: #1877F2; color: #ffffff; transform: scale(1.1); box-shadow: 0 4px 14px rgba(24, 119, 242, 0.5); } .footer-social-btn[data-social="facebook"]:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(24, 119, 242, 0.4); } /* --- LinkedIn hover (#0A66C2) --- */ .footer-social-btn[data-social="linkedin"]:hover { background: #0A66C2; color: #ffffff; transform: scale(1.1); box-shadow: 0 4px 14px rgba(10, 102, 194, 0.5); } .footer-social-btn[data-social="linkedin"]:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(10, 102, 194, 0.4); } /* --- X / Twitter hover (#000000) --- */ .footer-social-btn[data-social="twitter"]:hover { background: #000000; color: #ffffff; transform: scale(1.1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .footer-social-btn[data-social="twitter"]:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* --- Instagram hover (dégradé officiel) --- */ .footer-social-btn[data-social="instagram"]:hover { background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ); color: #ffffff; transform: scale(1.1); box-shadow: 0 4px 14px rgba(220, 39, 67, 0.5); } .footer-social-btn[data-social="instagram"]:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(220, 39, 67, 0.4); } /* --- Réduction de mouvement (accessibilité) --- */ @media (prefers-reduced-motion: reduce) { .footer-social-btn { transition: background 0.15s ease, color 0.15s ease; } .footer-social-btn:hover, .footer-social-btn:active { transform: none !important; } }