/**
 * SOCIAL ICONS - Pictos officiels des reseaux sociaux
 *
 * Utilise une technique de mask CSS pour heriter de la couleur du parent
 * (currentColor). Un seul fichier SVG par marque, colorise dynamiquement
 * selon le contexte (gris fonce sur fond clair, blanc sur fond colore CM).
 *
 * Usage HTML :
 *   <span class="social-icon" style="--social-icon: url('images/social/facebook.svg');"></span>
 *
 * Version: 1.0.0
 */

.social-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: var(--social-icon);
            mask-image: var(--social-icon);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Variantes de taille */
.social-icon--sm  { width: 14px; height: 14px; }
.social-icon--md  { width: 18px; height: 18px; }
.social-icon--lg  { width: 24px; height: 24px; }
.social-icon--xl  { width: 32px; height: 32px; }

/* Fallback graceful : si le mask CSS n'est pas supporte (vieux navigateurs),
   le SVG s'affiche comme image normale via le ::before. */
@supports not ((-webkit-mask-image: var(--social-icon)) or (mask-image: var(--social-icon))) {
    .social-icon {
        background-color: transparent;
        background-image: var(--social-icon);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}