/*
 * Section Carrousel de marques — Figma node 2644:67533.
 *
 * Cadrage de la maquette : en-tête centré bridé à 884, bande de tuiles de 150 espacées de
 * 64 qui déborde volontairement de l'écran des deux côtés, pastilles, bouton. Écart de 48
 * entre chaque bloc.
 */

.section-brands {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    padding-block: var(--section-space);
}

/* ---- En-tête ---- */

.section-brands__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 884 dans la maquette : l'intro reste sur une mesure lisible. */
    width: min(884px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-brands__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary);
}

.section-brands__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

/* ---- Bande de logos ---- */

.section-brands__scroller {
    width: 100%;
    overflow-x: auto;
    /*
     * PAS de scroll-snap ici. Les pastilles paginent par largeur d'écran alors que
     * l'accrochage aligne sur les logos : les deux ne tombent pas aux mêmes positions, et
     * la pastille active se serait désynchronisée de ce qu'on voit. Le défilement reste
     * donc libre, ce qui garantit aussi que chaque cible de pastille est atteignable.
     *
     * PAS de scroll-behavior: smooth non plus. En CSS, il s'applique à TOUTE modification
     * programmée du défilement, y compris une simple affectation de scrollLeft, ce qui rend
     * la position instantanée impossible à obtenir et masque les bugs (constaté : toute
     * mesure du défilement renvoyait 0). L'animation est demandée explicitement au clic sur
     * une pastille, dans le script, qui sait aussi la couper en cas de préférence pour
     * moins de mouvement.
     */
    /* Masque la barre de défilement sans empêcher de défiler : la pagination et le
       débordement visible des logos indiquent déjà qu'il y a plus à voir. */
    scrollbar-width: none;
}

.section-brands__scroller::-webkit-scrollbar {
    display: none;
}

.section-brands__list {
    display: flex;
    align-items: center;
    gap: var(--space-hero);
    margin: 0;
    padding-inline: var(--container-gutter);
    list-style: none;
    /*
     * La bande prend la largeur de son contenu, et c'est ELLE qui déborde du conteneur
     * défilant. Sans ça, la liste restait à 100% de la largeur visible et ce sont les
     * tuiles qui débordaient d'elle : le navigateur annonçait bien un scrollWidth plus
     * grand, mais le défilement maximum restait à 0 — la bande était figée. Vérifié.
     *
     * margin auto plutôt que justify-content pour le centrage : avec une largeur
     * max-content, les marges automatiques centrent la bande quand elle tient et retombent
     * à zéro quand elle déborde. Un `center` aurait rendu le début de la bande
     * inatteignable au défilement.
     */
    width: max-content;
    margin-inline: auto;
}

.section-brands__item {
    /* Tuile de la maquette : 150 x 150, jamais compressée par le flex. */
    flex: none;
    width: 150px;
    height: 150px;
}

.section-brands__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.section-brands__logo {
    max-width: 100%;
    /*
     * Hauteur plafonnée sous celle de la tuile : sans ça, un logo vertical (Mühle) occupait
     * les 150 px de haut et écrasait les logos en longueur (Le Creuset, Merkur), réduits à
     * un filet de 40 px. 96 px est la hauteur du logo le plus haut de la maquette (Buck) :
     * les logos verticaux redescendent, les logos larges gardent toute leur largeur.
     */
    max-height: 96px;
    /* contain, jamais cover : on ne rogne pas un logo de marque. */
    object-fit: contain;
    transition: opacity 200ms ease;
}

/* Survol réservé aux logos réellement cliquables : le sélecteur cible le <a>, jamais la
   tuile inerte des marques sans page (voir le gabarit). Rien ne doit suggérer un clic qui
   n'existe pas. */
a.section-brands__link:hover .section-brands__logo,
a.section-brands__link:focus-visible .section-brands__logo {
    opacity: 0.7;
}

/* Marque sans logo : son nom, dans la typographie des titres, centré dans la tuile. */
.section-brands__fallback {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-heading);
    color: var(--color-primary);
    text-align: center;
}

/* Les pastilles vivent dans le partial « scroll-dots ». */

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-brands {
        --container-gutter: var(--space-bloc);
        gap: var(--space-bloc);
        padding-block: var(--section-space);
    }

    .section-brands__list {
        gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    .section-brands {
        --container-gutter: var(--space-m);
    }

    .section-brands__list {
        gap: var(--space-bloc);
    }

    .section-brands__item {
        width: 120px;
        height: 120px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Le défilement animé est piloté par le script, pas par le CSS : il s'en charge. */
    .section-brands__logo {
        transition: none;
    }
}

/*
 * « Découvrir » des logos qui ont une page : en bas de la tuile, révélé au survol et au focus.
 * opacity et non display/visibility : masqué à l'œil, le texte reste dans le nom accessible du
 * lien (« Découvrir Victorinox »). Sur écran tactile, sans survol possible, il reste visible.
 */
.section-brands__link {
    position: relative;
}

.section-brands__cta {
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
    white-space: nowrap;
}

a.section-brands__link:hover .section-brands__cta,
a.section-brands__link:focus-visible .section-brands__cta {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (hover: none) {
    .section-brands__cta {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-brands__cta {
        transition: none;
    }
}