/**
 * Liens réseaux sociaux — composant unique
 *
 * Sert le partial sections/partials/social-links.html.twig, utilisé par les
 * en-têtes, les pieds de page et le widget « Réseaux sociaux ». Le balisage et
 * le style vivent ici, en un seul endroit.
 *
 * La couleur de marque de chaque réseau est injectée par le partial dans
 * --izi-social-brand ; c'est la variante `brand` qui décide de s'en servir.
 */

.izi-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--izi-social-gap, 0.625rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.izi-social--align-center { justify-content: center; }
.izi-social--align-end    { justify-content: flex-end; }
.izi-social--align-start  { justify-content: flex-start; }

.izi-social__item { display: flex; }

.izi-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: var(--izi-social-size);
    height: var(--izi-social-size);
    font-size: var(--izi-social-icon);
    line-height: 1;
    text-decoration: none;
    color: var(--izi-social-fg, currentColor);
    background-color: var(--izi-social-bg, transparent);
    border: 1px solid var(--izi-social-border, transparent);
    transition: transform var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.izi-social__link:hover,
.izi-social__link:focus-visible {
    transform: translateY(-2px);
}

.izi-social__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ─── Tailles ─── */
.izi-social--sm { --izi-social-size: 2rem;    --izi-social-icon: 0.8125rem; --izi-social-gap: 0.5rem; }
.izi-social--md { --izi-social-size: 2.5rem;  --izi-social-icon: 1rem; }
.izi-social--lg { --izi-social-size: 3rem;    --izi-social-icon: 1.25rem;   --izi-social-gap: 0.75rem; }

/* ─── Formes ─── */
.izi-social--circle  .izi-social__link { border-radius: var(--radius-full); }
.izi-social--rounded .izi-social__link { border-radius: var(--radius-md); }
.izi-social--square  .izi-social__link { border-radius: 0; }

.izi-social--bare .izi-social__link {
    width: auto;
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
}

/* ─── Variante « bouton » : icône + libellé ─── */
.izi-social--button .izi-social__link {
    width: auto;
    height: auto;
    padding: 0.625rem 1.125rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.izi-social--button.izi-social--lg .izi-social__link {
    padding: 0.8125rem 1.5rem;
    font-size: var(--text-base);
}

.izi-social__label { white-space: nowrap; }

/* ─── Colorimétrie ─── */

/* `inherit` : monochrome, hérite de la couleur du contexte (header, footer sombre…).
   Le fond n'apparaît qu'au survol, en teintant légèrement la couleur courante. */
.izi-social--inherit .izi-social__link {
    --izi-social-bg: color-mix(in srgb, currentColor 10%, transparent);
    --izi-social-fg: currentColor;
}

.izi-social--inherit .izi-social__link:hover,
.izi-social--inherit .izi-social__link:focus-visible {
    --izi-social-bg: color-mix(in srgb, currentColor 20%, transparent);
}

.izi-social--inherit.izi-social--bare .izi-social__link {
    --izi-social-bg: transparent;
}

.izi-social--inherit.izi-social--bare .izi-social__link:hover,
.izi-social--inherit.izi-social--bare .izi-social__link:focus-visible {
    --izi-social-bg: transparent;
    opacity: 0.7;
}

/* `brand` : fond neutre au repos, couleur de la marque au survol. */
.izi-social--brand .izi-social__link {
    --izi-social-bg: color-mix(in srgb, currentColor 8%, transparent);
    --izi-social-fg: var(--izi-social-brand);
}

.izi-social--brand .izi-social__link:hover,
.izi-social--brand .izi-social__link:focus-visible {
    --izi-social-bg: var(--izi-social-brand);
    --izi-social-fg: #ffffff;
}

.izi-social--brand.izi-social--button .izi-social__link,
.izi-social--brand.izi-social--bare .izi-social__link {
    --izi-social-bg: var(--izi-social-brand);
    --izi-social-fg: #ffffff;
}

.izi-social--brand.izi-social--button .izi-social__link:hover,
.izi-social--brand.izi-social--bare .izi-social__link:hover {
    filter: brightness(1.1);
}

/* `primary` : tout aux couleurs du site. */
.izi-social--primary .izi-social__link {
    --izi-social-bg: color-mix(in srgb, var(--color-primary) 12%, transparent);
    --izi-social-fg: var(--color-primary);
}

.izi-social--primary .izi-social__link:hover,
.izi-social--primary .izi-social__link:focus-visible {
    --izi-social-bg: var(--color-primary);
    --izi-social-fg: #ffffff;
}

/* ─── Intégration dans l'en-tête ─── */

/* Les variantes d'en-tête ont chacune leur conteneur (.header-column-nav,
   .h-flex, .he-wrap…) et toutes ne sont pas en flex. Plutôt que de les lister —
   elles appartiennent à site-chrome.css — on aligne uniquement celui qui reçoit
   effectivement les icônes, pour qu'elles se placent à côté du menu et non
   dessous. */
.site-chrome-header *:has(> .izi-social--header) {
    display: flex;
    align-items: center;
}

.site-chrome-header .izi-social--header {
    flex: 0 0 auto;
    margin-left: var(--spacing-sm);
}

/* Sous le point de rupture mobile, la barre se réduit au logo et au burger :
   les icônes sortent pour ne pas comprimer l'en-tête. Elles restent atteignables
   dans le pied de page, présent sur toutes les pages. */
@media (max-width: 991px) {
    .site-chrome-header .izi-social--header {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .izi-social__link,
    .izi-social__link:hover,
    .izi-social__link:focus-visible {
        transform: none;
        transition: none;
    }
}