.vws {
    /* inline-flex, et non flex : la rangée doit pouvoir suivre du texte sur la même
       ligne (téléphone, e-mail, horaires) sans provoquer de retour à la ligne. */
    display: inline-flex;
    vertical-align: middle;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--vws-gap, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Demander un alignement suppose une ligne à soi : la rangée redevient un bloc. */
.vws.is-center, .vws.is-right { display: flex; width: 100%; }
.vws.is-center { justify-content: center; }
.vws.is-right { justify-content: flex-end; }

.vws-item { margin: 0; padding: 0; list-style: none; }
.vws-item::before, .vws-item::marker { content: none; }

.vws-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--vws-size, 32px);
    height: var(--vws-size, 32px);
    border-radius: 22%;
    background: #10264a;
    color: #fff;
    text-decoration: none;
    box-shadow: none;
    transition: transform .15s ease, filter .15s ease;
}

/* size="auto" : les tuiles suivent la taille du texte qui les entoure. */
.vws.is-auto .vws-link { width: 2em; height: 2em; }

.vws-link:hover, .vws-link:focus-visible { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.vws-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vws-link svg { display: block; width: 56%; height: 56%; }

/* Couleurs officielles de chaque marque. */
.vws-facebook .vws-link { background: #1877f2; }
.vws-twitter .vws-link { background: #000; }
.vws-linkedin .vws-link { background: #0a66c2; }
.vws-youtube .vws-link { background: #f00; }

.vws-instagram .vws-link {
    background: #d62976;
    background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
}

/* Les règles de marque Google interdisent de recolorer le G : fond blanc, logo quadrichrome. */
.vws-gmb .vws-link {
    background: #fff;
    border: 1px solid #e2e5ea;
}

.vws-gmb .vws-link:hover, .vws-gmb .vws-link:focus-visible { border-color: #c8cdd6; }

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