:root{
    --brand-gap: 3rem;         /* espace entre logos */
    /*--brand-height: 38px;      !* hauteur des logos *!*/
    --brand-height: 48px;      /* hauteur des logos */
    --brand-speed: 36s;        /* vitesse (plus petit = plus rapide) */
    --edge-fade: 64px;         /* fondu des bords */
    --brand-tint: .9;          /* opacité logos au repos */
    --brand-box-w: 160px;      /* largeur réservée par logo -> anti “collé au début” */
}

/* conteneur + bords fondus */
.brand-marquee{
    position: relative;
    overflow: hidden;
    padding-block: .75rem;
    display: flex;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)), transparent 100%);
}

/* pistes x2, côte à côte (pas de delay négatif) */
.brand-row{
    display: flex;
    align-items: center;
    gap: var(--brand-gap, 2rem);
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: 0 var(--brand-gap);
    animation: marquee var(--brand-speed) linear infinite;
    will-change: transform;
}

/* chaque logo occupe une boîte fixe => pas de collage avant que l’image arrive */
.brand{
    flex: 0 0 auto;
    width: var(--brand-box-w);
    display: grid;
    place-items: center;
}

.brand img{
    height: var(--brand-height);
    max-width: 100%;
    display: block;
    filter: grayscale(1) contrast(1.05) opacity(var(--brand-tint));
    transition: filter .25s ease, transform .25s ease;
}
.brand:hover img{ filter: none; transform: translateY(-1px); }

.brand-marquee:hover .brand-row{ animation-play-state: paused; }

/* anim continue : la 1ère piste sort à gauche, la 2e prend le relais, puis ça boucle */
@keyframes marquee{
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
    .brand-row{ animation: none !important; }
    .brand-marquee{ overflow-x: auto; scroll-snap-type: x mandatory; }
    .brand{ scroll-snap-align: start; }
}

/* responsive: ajuster l’espace et la boîte si besoin */
@media (max-width: 576px){
    :root{
        --brand-gap: 1.5rem;
        --brand-height: 32px;
        --brand-box-w: 120px;
        --edge-fade: 28px;
    }
}