/**
 * Social Media Icons - Breizh'IT
 * Styles harmonisés pour tous les réseaux sociaux
 * Compatible light/dark mode, responsive, accessibilité
 */

/* =================================================
   VARIABLES COULEURS RÉSEAUX SOCIAUX
   ================================================= */
:root {
    --color-facebook: #1877F2;
    --color-instagram-from: #833AB4;
    --color-instagram-via: #E4405F;
    --color-instagram-to: #FCAF45;
    --color-linkedin: #0A66C2;
    --color-youtube: #FF0000;
    --color-tiktok: #000000;
    --color-tiktok-light: #00F2EA;
    --color-twitter: #1DA1F2;
}

/* =================================================
   BASE SOCIAL ICONS
   ================================================= */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none !important; /* Supprimer le soulignement */
}

.social-icon:hover,
.social-icon:focus {
    text-decoration: none !important; /* Pas de soulignement au hover/focus */
}

/* Couleurs icônes : VIOLET en light mode, BLANC en dark mode */
.social-icon i {
    color: #7C3AED !important; /* Violet (purple-700) en light mode */
    transition: color 0.3s ease;
}

.dark .social-icon i {
    color: #FFFFFF !important; /* Blanc en dark mode */
}

/* =================================================
   HOVER STATES - COULEURS NATIVES
   ================================================= */

/* Facebook */
.social-icon:hover .fa-facebook-f {
    color: var(--color-facebook) !important;
}

/* Instagram (dégradé simulé via couleur rose) */
.social-icon:hover .fa-instagram {
    color: var(--color-instagram-via) !important;
}

/* LinkedIn */
.social-icon:hover .fa-linkedin-in {
    color: var(--color-linkedin) !important;
}

/* YouTube */
.social-icon:hover .fa-youtube {
    color: var(--color-youtube) !important;
}

/* TikTok */
.social-icon:hover .fa-tiktok {
    color: var(--color-tiktok) !important;
}

.dark .social-icon:hover .fa-tiktok {
    color: var(--color-tiktok-light) !important;
}

/* Twitter (si utilisé) */
.social-icon:hover .fa-twitter {
    color: var(--color-twitter) !important;
}

/* =================================================
   FOOTER SOCIAL ICONS (layout horizontal)
   ================================================= */
.social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.social-icons .social-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background-color: rgba(124, 58, 237, 0.1); /* Fond violet très léger en light mode */
    text-decoration: none !important;
    border: none !important;
    box-shadow: none;
}

.dark .social-icons .social-icon {
    background-color: #8B5CF6; /* Fond violet (purple-600) en dark mode */
}

.social-icons .social-icon:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
    text-decoration: none !important;
    border: none !important;
}

/* =================================================
   CONTACT PAGE SOCIAL BUTTONS
   ================================================= */
.social-contact-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-contact-btn {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: #F3F4F6; /* gray-100 */
    color: #4B5563; /* gray-600 */
    transition: all 0.3s ease;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none;
}

.social-contact-btn:hover,
.social-contact-btn:focus {
    text-decoration: none !important;
    border: none !important;
}

.dark .social-contact-btn {
    background-color: #1F2937; /* gray-800 */
    color: #9CA3AF; /* gray-400 */
}

/* Hover avec couleurs natives + background */
.social-contact-btn.facebook:hover {
    background-color: var(--color-facebook);
    color: white;
    transform: scale(1.1);
}

.social-contact-btn.instagram:hover {
    background: linear-gradient(135deg, 
        var(--color-instagram-from) 0%, 
        var(--color-instagram-via) 50%, 
        var(--color-instagram-to) 100%);
    color: white;
    transform: scale(1.1);
}

.social-contact-btn.linkedin:hover {
    background-color: var(--color-linkedin);
    color: white;
    transform: scale(1.1);
}

.social-contact-btn.youtube:hover {
    background-color: var(--color-youtube);
    color: white;
    transform: scale(1.1);
}

/* =================================================
   RESPONSIVE
   ================================================= */
@media (max-width: 640px) {
    .social-icons {
        justify-content: center;
    }
    
    .social-contact-grid {
        justify-content: center;
    }
}

/* =================================================
   ACCESSIBILITÉ
   ================================================= */
.social-icon:focus,
.social-contact-btn:focus {
    outline: 2px solid #6366F1; /* indigo-500 */
    outline-offset: 2px;
}

/* Respect du mode reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .social-icon,
    .social-contact-btn,
    .social-icon i {
        transition: none;
    }
}

/* =================================================
   UTILITIES
   ================================================= */

/* Badge réseau social (ex: "Nouveau sur YouTube") */
.social-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

.social-badge.youtube {
    background-color: rgba(255, 0, 0, 0.1);
    color: var(--color-youtube);
}

.social-badge.facebook {
    background-color: rgba(24, 119, 242, 0.1);
    color: var(--color-facebook);
}

.social-badge.instagram {
    background: linear-gradient(135deg, 
        rgba(131, 58, 180, 0.1) 0%, 
        rgba(228, 64, 95, 0.1) 50%, 
        rgba(252, 175, 69, 0.1) 100%);
    color: var(--color-instagram-via);
}

.social-badge.linkedin {
    background-color: rgba(10, 102, 194, 0.1);
    color: var(--color-linkedin);
}

/* =================================================
   RÈGLES GLOBALES ANTI-SOULIGNEMENT
   ================================================= */

/* Supprimer tout soulignement/bordure sur tous les liens d'icônes sociales */
a[href*="facebook.com"],
a[href*="instagram.com"],
a[href*="linkedin.com"],
a[href*="youtube.com"],
a[aria-label*="Facebook"],
a[aria-label*="Instagram"],
a[aria-label*="LinkedIn"],
a[aria-label*="YouTube"] {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

a[href*="facebook.com"]:hover,
a[href*="instagram.com"]:hover,
a[href*="linkedin.com"]:hover,
a[href*="youtube.com"]:hover,
a[href*="facebook.com"]:focus,
a[href*="instagram.com"]:focus,
a[href*="linkedin.com"]:focus,
a[href*="youtube.com"]:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Ciblage spécifique des icônes FontAwesome dans les liens sociaux */
a[href*="facebook.com"] i,
a[href*="instagram.com"] i,
a[href*="linkedin.com"] i,
a[href*="youtube.com"] i {
    text-decoration: none !important;
}