.cmd-brands{--gap:16px;--w:200px;--h:112px;position:relative;width:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#212121;box-sizing:border-box}
.cmd-brands *,.cmd-brands *::before,.cmd-brands *::after{box-sizing:border-box}

/* En-tête (mêmes proportions que « Trouvez votre vélo ») */
.cmd-brands__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin:0 0 clamp(16px,2.2vw,24px)}
.cmd-brands__title{margin:0!important;padding:0;font:600 25.6px/1.1 Inter,system-ui,sans-serif!important;letter-spacing:-.01em;color:#000!important;text-transform:none}
/* Bouton pilule en verre */
.cmd-brands__all{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 12px 9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#212121!important;text-decoration:none!important;
background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(244,247,245,.85));
box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(33,33,33,.07),0 8px 20px -12px rgba(20,50,35,.35);transition:transform .45s cubic-bezier(.2,.9,.25,1.3),box-shadow .3s}
.cmd-brands__all svg{width:22px;height:22px;padding:4px;border-radius:50%;background:#507E64;color:#fff;transition:transform .45s cubic-bezier(.2,.9,.25,1.4)}
.cmd-brands__all:hover{transform:translateY(-2px);box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(80,126,100,.25),0 14px 26px -14px rgba(20,50,35,.45)}
.cmd-brands__all:hover svg{transform:translateX(3px)}

/* Zone visible : fondu sur les bords quand ça défile */
.cmd-brands__viewport{position:relative;padding:10px 0 26px}
/* défilement auto piloté en JS + glissable à la souris (cliquer-glisser) et au doigt */
.cmd-brands--ruban .cmd-brands__viewport{overflow-x:auto;overflow-y:hidden;margin:0 -10px;padding:10px 10px 26px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.cmd-brands--ruban .cmd-brands__viewport::-webkit-scrollbar{display:none}
.cmd-brands--ruban .cmd-brands__viewport.is-drag{cursor:grabbing}
.cmd-brands--ruban .cmd-brands__viewport.is-drag .cmd-brands__tile{pointer-events:none}
.cmd-brands__track{gap:var(--gap)}
.cmd-brands--ruban .cmd-brands__track{display:flex;width:max-content}
.cmd-brands__tile img{-webkit-user-drag:none;user-select:none}

/* Tuile en verre */
.cmd-brands__tile{--mx:50%;--my:0%;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:var(--h);padding:18px 26px;border-radius:26px;text-decoration:none!important;overflow:hidden;
background:linear-gradient(160deg,#fff,#f4f7f5);
box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(33,33,33,.06),0 1px 2px rgba(20,40,30,.05),0 14px 30px -18px rgba(20,50,35,.3);
transition:transform .55s cubic-bezier(.2,.9,.25,1.25),box-shadow .4s ease;-webkit-tap-highlight-color:transparent}
.cmd-brands--ruban .cmd-brands__tile{flex:0 0 var(--w)}
/* liseré spéculaire */
.cmd-brands__tile::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
background:linear-gradient(155deg,rgba(80,126,100,.38) 0%,rgba(80,126,100,0) 32%,rgba(80,126,100,0) 68%,rgba(80,126,100,.16) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* reflet qui suit la souris */
.cmd-brands__tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s ease;
background:radial-gradient(150px circle at var(--mx) var(--my),rgba(80,126,100,.12),rgba(80,126,100,0) 70%)}
.cmd-brands__tile img{position:relative;z-index:0;display:block;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important;object-fit:contain;margin:0!important;
mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05);opacity:.55;transition:filter .45s ease,opacity .45s ease,transform .55s cubic-bezier(.2,.9,.25,1.3)}
.cmd-brands__tile:hover,.cmd-brands__tile:focus-visible{transform:translateY(-5px);box-shadow:inset 0 1px 1px #fff,inset 0 0 0 1px rgba(80,126,100,.18),0 24px 40px -20px rgba(20,50,35,.42)}
.cmd-brands__tile:hover::before,.cmd-brands__tile:focus-visible::before{opacity:1}
.cmd-brands__tile:hover img,.cmd-brands__tile:focus-visible img{filter:none;opacity:1;transform:scale(1.05)}
.cmd-brands__tile:focus-visible{outline:2px solid #507E64;outline-offset:3px}

@media (max-width:640px){
.cmd-brands{--gap:10px;--w:150px;--h:88px}
.cmd-brands__title{font-size:22px!important}
.cmd-brands__all{font-size:13px;padding:7px 10px 7px 13px}
.cmd-brands__tile{padding:14px 18px;border-radius:22px}
/* sur mobile tactile : logos en couleur (pas de survol) */
.cmd-brands__tile img{filter:none;opacity:.9}
}
@media (prefers-reduced-motion:reduce){
.cmd-brands--ruban .cmd-brands__viewport{-webkit-mask-image:none;mask-image:none}
.cmd-brands--ruban .cmd-brands__tile[aria-hidden="true"]{display:none}
.cmd-brands__tile,.cmd-brands__tile img{transition:none}
}