/*
 | Le bandeau des partenaires — affichage public.
 |
 | Aucun JavaScript : le défilement est une animation CSS. Rien à charger, rien
 | qui puisse échouer, et la boucle ne dérive pas avec le temps comme le ferait
 | une minuterie.
 |
 | La boucle : la liste est écrite deux fois dans un conteneur commun, et
 | l'animation décale ce conteneur de la moitié de sa largeur — soit exactement
 | une liste. Au moment où elle se répète, l'image est identique.
 |
 | ⚠️ L'écart entre les logos est une **marge**, jamais un `gap`. Une marge fait
 | de la suite un motif rigoureusement périodique (largeur + marge, à l'identique
 | pour chaque case), et la moitié tombe alors pile sur une répétition. Avec un
 | `gap`, celui qui sépare les deux listes fausserait le compte et la boucle
 | sauterait d'un demi-écart à chaque tour.
 |
 | Feuille scopée sous `.cw-par` : aucune règle ne doit fuir dans le thème.
 */

/*
 | Valeurs relevees dans le Figma (`section-partners`, 1440 et 375) :
 |
 |   section  padding 56 0, gap 56 (32 en mobile), fond #2d3e46, centre
 |   titre    STIX Two Text 56 px / 61,6 / -3 %  (36 px en mobile)
 |   logos    ecart 24 px (12 en mobile), cases 190 x 82, rayon 16 (10,54)
 |
 | La marge de section est en variable : la meme section n'a pas la meme place
 | d'une page a l'autre, et c'est au theme de le dire. Le defaut est la valeur
 | de la maquette — posee seule, la section est deja juste.
 */
.cw-par {
    --cw-par-marge: 56px 0;
    --cw-par-fond: #2d3e46;
    --cw-par-titre: #fff;
    --cw-par-case: #fff;
    --cw-par-largeur: 190px;
    --cw-par-hauteur: 82px;
    --cw-par-rayon: 16px;
    --cw-par-ecart: 24px;
    --cw-par-duree: 40s;
    --cw-par-serif: "STIX Two Text", Georgia, "Times New Roman", serif;

    box-sizing: border-box;
    padding: var(--cw-par-marge);
    background: var(--cw-par-fond);
    color: var(--cw-par-titre);
}

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

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

/*
 | Le titre est un h1 de l'echelle : 56 px, interligne 110 %, interlettrage -3 %.
 | L'ecart au bandeau est le `gap` de 56 px de la maquette, pose ici en marge
 | basse — la section n'etant pas une grille, une marge dit la meme chose.
 */
.cw-par-titre {
    margin: 0 0 56px;
    padding: 0 1rem;
    color: var(--cw-par-titre);
    font-family: var(--cw-par-serif);
    font-size: 56px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: center;
}

/* ── Le bandeau ──────────────────────────────────────────────────────────── */

.cw-par-bandeau {
    overflow: hidden;
}

.cw-par-defilement {
    display: flex;
    /* `max-content` : la piste prend la largeur de son contenu, sans se replier —
       sans quoi les logos s'empileraient au lieu de défiler. */
    width: max-content;
    animation: cw-par-defile var(--cw-par-duree) linear infinite;
}

/* Le survol suspend : on laisse le temps de lire un logo, ou de le viser. */
.cw-par-bandeau:hover .cw-par-defilement,
.cw-par-defilement:focus-within {
    animation-play-state: paused;
}

@keyframes cw-par-defile {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.cw-par-piste {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-par-case {
    /* Une marge, pas un `gap` : voir l'en-tête de cette feuille. */
    margin-right: var(--cw-par-ecart);
}

/*
 | Le recadrage automatique. Toutes les cases ont la même taille ; l'image s'y
 | inscrit **entière et sans déformation** (`contain`), quelle que soit sa forme.
 | Un logo carré, large ou haut s'aligne donc avec les autres, et il n'y a rien à
 | préparer avant de téléverser.
 */
.cw-par-case,
.cw-par-lien {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--cw-par-largeur);
    height: var(--cw-par-hauteur);
    border-radius: var(--cw-par-rayon);
    background: var(--cw-par-case);
}

.cw-par-lien {
    margin: 0;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.cw-par-lien:hover,
.cw-par-lien:focus-visible {
    transform: scale(1.04);
}

.cw-par-case > .cw-par-image,
.cw-par-case > .cw-par-nom {
    padding: 0.5rem 0.75rem;
}

.cw-par-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Un partenaire sans logo garde sa place : son nom tient lieu d'image. */
.cw-par-nom {
    color: #2d3e46;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* ── Mouvement réduit ────────────────────────────────────────────────────── */

/*
 | Un défilement perpétuel gêne certaines personnes, et le système le dit. On
 | arrête alors l'animation et l'on rend le bandeau défilable à la main : le
 | contenu reste entièrement atteignable, il ne bouge simplement plus tout seul.
 */
@media (prefers-reduced-motion: reduce) {
    .cw-par-defilement {
        animation: none;
    }

    .cw-par-bandeau {
        overflow-x: auto;
    }
}

/*
 | Mobile : le Figma ne reduit pas d'un facteur, il donne ses propres valeurs —
 | titre 36 px, ecart 12 px, cases au rayon 10,54. On les reprend telles quelles.
 */
@media (max-width: 782px) {
    .cw-par {
        --cw-par-marge: 56px 0;
        --cw-par-ecart: 12px;
        --cw-par-largeur: 105px;
        --cw-par-hauteur: 45px;
        --cw-par-rayon: 10.5px;
    }

    .cw-par-titre {
        margin-bottom: 32px;
        font-size: 36px;
    }
}

@media (max-width: 700px) {
    .cw-par {
        --cw-par-largeur: 126px;
        --cw-par-hauteur: 54px;
        --cw-par-ecart: 0.9rem;
    }

    .cw-par-titre {
        /* 36 px et non 1,7 em : la maquette 375 pose un chiffre, et 1,7 em en
           donnait 27,2. */
        font-size: 36px;
        line-height: 1.1;
    }
}