/*
 | Réseaux sociaux et galerie — affichage public.
 |
 | Aucun JavaScript. La galerie est une bande que le navigateur fait défiler :
 | le balayage au doigt marche donc tout seul, et le clavier aussi.
 |
 | Feuille scopée sous `.cw-res` : elle est chargée dans un thème qui a la
 | sienne, aucune règle ne doit fuir.
 */

.cw-res {
    /*
     | Valeurs relevees dans le Figma (`section-partners` de 619 px, 1440 et 375) :
     |
     |   section   padding 80 0 96 0 (64 0 en mobile), gap 72, centre
     |   surtitre  Familjen Grotesk SemiBold 14 / 17,36 / -2 %, #2d3e46, capitales
     |   header    gap 18 px entre le surtitre et la rangee d'icones
     |   icones    ecart 10 px, pastilles de 56 px (44 en mobile)
     |   galerie   ecart 12 px, vignettes 280 x 280, rayon 16 px
     |
     | La vignette faisait 300 px : c'est 280. L'ecart etait de 0,9 rem : c'est
     | 12 px. Le rayon etait de 10 : c'est 16.
     */
    --cw-res-marge: 80px 0 96px;
    --cw-res-encre: #2d3e46;
    --cw-res-pastille: 56px;
    --cw-res-filet: #d6d3d1;
    /* La vignette : carrée, 300 px sur grand écran, réduite ensuite. Une seule
       variable la commande — hauteur comprise, puisqu'elle est carrée. */
    --cw-res-vignette: 280px;
    --cw-res-rayon: 16px;
    --cw-res-ecart: 12px;

    box-sizing: border-box;
    padding: var(--cw-res-marge);
}

.cw-res *,
.cw-res *::before,
.cw-res *::after {
    box-sizing: inherit;
}

.cw-res-vide {
    padding: 1rem;
    border: 1px dashed #c9a227;
    background: #fffbe6;
    color: #6b5900;
    font-size: 0.9em;
}

/* ── Titre et réseaux ────────────────────────────────────────────────────── */

.cw-res-entete {
    /* Le `gap` de 72 px entre l'en-tete et la galerie, pose en marge. */
    margin-bottom: 72px;
    padding: 0 1rem;
    text-align: center;
}

.cw-res-titre {
    /* 18 px sous le surtitre, avant la rangee d'icones. */
    margin: 0 0 18px;
    color: var(--cw-res-encre);
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cw-res-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-res-lien {
    display: block;
    line-height: 0;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.cw-res-lien:hover,
.cw-res-lien:focus-visible {
    transform: translateY(-2px);
}

/*
 | La pastille : un cercle VIDE, cerné d'un filet clair, glyphe sombre au centre.
 | Relevé dans le Figma : 56 px, filet de 1 px en #d6d3d1, glyphe de 28 px en
 | #2d3e46.
 |
 | Pas de fond aux couleurs des marques : la rangée tient ensemble au lieu de
 | faire un arc-en-ciel, et l'encre reste celle du site.
 |
 | Une icône téléversée occupe la même place, aux mêmes dimensions — les deux
 | sortes s'alignent donc sans réglage.
 */
.cw-res-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cw-res-pastille);
    height: var(--cw-res-pastille);
    padding: 4px;
    overflow: hidden;
    border: 1px solid var(--cw-res-filet);
    border-radius: 50%;
    color: var(--cw-res-encre);
}

.cw-res-icone svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/*
 | Une icône téléversée est le LOGO OFFICIEL du réseau : 28 px au centre du
 | cercle de 56, comme dans la maquette — et non un fond qui remplirait le cercle
 | et recouvrirait son filet.
 |
 | Par défaut le logo n'est PAS rogné : il se montre entier, sur ses propres
 | coins transparents. C'est ce que fait la maquette de Facebook, de TikTok et de
 | YouTube, dont les images portent déjà leur forme.
 */
.cw-res-icone--image {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/*
 | ⚠️ Le rognage en cercle ne vaut QUE pour les logos qui le demandent.
 |
 | Instagram est la seule des quatre images à être un carré plein jusque dans ses
 | coins ; la maquette lui met un `cornerRadius` de 300 pour en faire un disque.
 | Les deux autres n'en ont aucun — les arrondir leur couperait les angles.
 */
.cw-res-icone--rond {
    border-radius: 50%;
    object-fit: cover;
}

.cw-res-icone--lettre {
    color: var(--cw-res-encre);
    font-size: calc(var(--cw-res-pastille) * 0.42);
    font-weight: 700;
    line-height: 1;
}

/* ── La galerie ──────────────────────────────────────────────────────────── */

/*
 | Une bande qui déborde de part et d'autre, et qu'on fait défiler. Les vignettes
 | ne se replient pas : `flex: none` les garde sur une ligne, sans quoi la bande
 | deviendrait une grille et perdrait l'effet voulu.
 */
.cw-res-galerie {
    display: flex;
    gap: var(--cw-res-ecart);
    margin: 0;
    padding: 0 var(--cw-res-ecart);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* La barre de défilement couperait le bas des images ; le débordement
       visible des vignettes suffit à dire qu'il y en a d'autres. */
    scrollbar-width: none;
}

.cw-res-galerie::-webkit-scrollbar {
    display: none;
}

.cw-res-vignette {
    flex: none;
    width: var(--cw-res-vignette);
    scroll-snap-align: center;
}

/*
 | Le recadrage : toutes les images deviennent des **carrés**, quelle que soit
 | leur forme d'origine. `aspect-ratio` fixe le carré, `object-fit: cover`
 | remplit sans déformer — l'image est rognée sur son plus grand côté, jamais
 | étirée. Rien à préparer avant de téléverser.
 */
.cw-res-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--cw-res-rayon);
    object-fit: cover;
}

/* ── Ecrans plus petits ──────────────────────────────────────────────────── */

/*
 | La vignette retrecit par paliers en gardant son carre : une seule variable
 | change, tout le reste suit. Les paliers intermediaires sont a nous — le Figma
 | ne dessine que 1440 et 375, et sauter de 280 a 156 d'un coup laisserait la
 | galerie bancale sur une tablette.
 |
 | Le palier de 782 px, lui, porte les valeurs de la maquette mobile : marge
 | 64 0 et vignette 108 x 108 au rayon 11, pastilles de 44 — releves dans
 | `Homepage - 375`.
 */
@media (max-width: 1200px) {
    .cw-res {
        --cw-res-vignette: 240px;
    }
}

@media (max-width: 900px) {
    .cw-res {
        --cw-res-vignette: 200px;
    }
}

@media (max-width: 782px) {
    .cw-res {
        --cw-res-marge: 64px 0;
        --cw-res-vignette: 108px;
        --cw-res-rayon: 11px;
        /* 44 px contre 56 en grand ecran. */
        --cw-res-pastille: 44px;
    }

    .cw-res-entete {
        margin-bottom: 40px;
    }
}

@media (max-width: 420px) {
    .cw-res {
        --cw-res-vignette: 132px;
    }
}