/**
 * ========================================================================
 * PROJET      : LOOM-CMS
 * VERSION     : 1.0.12
 * CLIENT      : CRPMEM de La Réunion
 * MODULE      : CSS — Section Présence Digitale (Social Strip)
 * SOCIÉTÉ     : LOOM DIGITAL
 * EMPLACEMENT : /assets/css/social-strip.css
 * ========================================================================
 *
 * Barre horizontale fine (~50px) entre hero et section Édito.
 * Discrète et élégante : une seule ligne d'icônes + noms de réseaux.
 * Fond bg-crpmem-bleu-fonce.
 *
 * ADD v1.0.12 (2026-03-10) — SECTION PRÉSENCE DIGITALE
 * REV v1.0.12 (2026-03-10) — Remplacement cartes → barre fine ~50px
 *
 * @author  Riley / LOOM DIGITAL
 * @version 1.0.12
 * @date    2026-03-10
 * ========================================================================
 */

/* ========================================================================
   SECTION WRAPPER
   Fond défini ici directement — indépendant de perso-crpmem.css.
   !important nécessaire pour surcharger le background: #fff du .wrapper
   du thème Sandbox.
   ======================================================================== */

.section-social-strip {
    /* FIX v1.0.12 (2026-03-10) — couleur charte officielle CRPMEM
     * #012a4a (navy) hors charte → #015f68 (teal maritime CRPMEM)
     * Cohérence avec footer[role="contentinfo"].bg-dark
     * !important nécessaire pour surcharger .wrapper { background: #fff } de Sandbox */
    background-color: #015f68 !important; /* --crpmem-bleu-fonce */
}

/* ========================================================================
   BARRE SOCIALE
   ======================================================================== */

.social-strip-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    min-height: 50px;
    padding: 0.5rem 0;
}

/* Label "Suivez-nous" à gauche */
.social-strip-bar__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* FIX v1.0.12 (2026-03-10) — RGAA AAA
     * rgba(255,255,255,0.75) → contraste effectif ~4.79:1 → PASS AA mais ECHEC AAA
     * #ffffff → 7.45:1 sur #015f68 → PASS AAA ✅ */
    color: #ffffff;
    padding-right: 1.25rem;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 1.25rem;
    white-space: nowrap;
}

/* Séparateur vertical entre réseaux */
.social-strip-bar__sep {
    width: 1px;
    height: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 0.75rem;
    flex-shrink: 0;
}

/* Lien réseau : icône + nom sur une ligne */
.social-strip-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    /* FIX v1.0.12 (2026-03-10) — RGAA AAA
     * rgba(255,255,255,0.75) → contraste effectif ~4.9:1 → PASS AA mais ECHEC AAA
     * #ffffff → 7.45:1 sur #015f68 → PASS AAA ✅ */
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    transition: color 0.18s ease, background-color 0.18s ease;
    white-space: nowrap;
}

.social-strip-bar__link:hover,
.social-strip-bar__link:focus {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.social-strip-bar__link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.social-strip-bar__link i {
    font-size: 1rem;
    line-height: 1;
}

/* ========================================================================
   RESPONSIVE — Mobile : label masqué, noms masqués, icônes seules
   ======================================================================== */

@media (max-width: 575.98px) {
    .social-strip-bar__label {
        display: none;
    }

    .social-strip-bar__link span {
        display: none;
    }

    .social-strip-bar__sep {
        margin: 0 0.5rem;
    }
}