/*
 * Section Grille de marques — Figma node 2644:71280.
 *
 * Cadrage de la maquette : en-tête bridé à 884 et centré, puis une grille de tuiles de 245
 * séparées de 64. Cinq colonnes tiennent dans la largeur de contenu : 5 x 245 + 4 x 64 =
 * 1481, pour 1490 disponibles.
 */

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

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

.section-brands-grid__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 884px dans la maquette. */
    width: min(884px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-brands-grid__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-grid__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-950);
}

/* ---- Résultats : bloc remplacé sans rechargement ---- */

/* Le fondu du remplacement et la région d'annonce sont dans le partial « filtered-grid » :
   ils font partie du comportement, pas du dessin. */
.section-brands-grid__results {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
}

/* ---- Grille ---- */

.section-brands-grid__grid {
    display: grid;
    /* Colonnes de 245 fixes, et autant qu'il en tient : la tuile ne s'étire pas, sinon les
       logos se retrouveraient à des échelles différentes d'une largeur d'écran à l'autre.
       Le reste de la place va aux marges, ce qui centre la grille comme dans la maquette. */
    grid-template-columns: repeat(auto-fit, 245px);
    justify-content: center;
    gap: var(--space-hero);
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-brands-grid__item {
    /* 245 x 245 dans la maquette. */
    width: 245px;
    height: 245px;
}

.section-brands-grid__link,
.section-brands-grid__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.section-brands-grid__logo {
    max-width: 100%;
    max-height: 100%;
    /* contain, jamais cover : on ne rogne pas un logo de marque. */
    object-fit: contain;
}

/* Faute de logo, le nom tient la tuile. */
.section-brands-grid__fallback {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
    text-align: center;
}

/*
 * Survol et focus UNIQUEMENT sur les tuiles cliquables — c'est-à-dire sur les <a>. Une marque
 * dont la fiche est vide sort en <div> : rien ne réagit au passage de la souris, parce qu'il
 * n'y a rien à ouvrir.
 */
.section-brands-grid__link .section-brands-grid__logo,
.section-brands-grid__link .section-brands-grid__fallback {
    transition: opacity 200ms ease, transform 200ms ease;
}

.section-brands-grid__link:hover .section-brands-grid__logo,
.section-brands-grid__link:focus-visible .section-brands-grid__logo,
.section-brands-grid__link:hover .section-brands-grid__fallback,
.section-brands-grid__link:focus-visible .section-brands-grid__fallback {
    opacity: 0.7;
    /* Un léger rapprochement en plus de l'opacité : sur un logo très clair, une variation
       d'opacité seule se remarque à peine. */
    transform: scale(1.04);
}

/* ---- Pagination ---- */

.section-brands-grid__pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-brands-grid__pagination-list a,
.section-brands-grid__pagination-list span {
    /* Trait toujours présent, transparent au repos : une couleur s'anime, un text-decoration non. */
    text-decoration: underline;
    text-decoration-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px de cible tactile alors que la maquette ne montre qu'un chiffre : le carré est
       transparent, seul le chiffre se voit. */
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
}

.section-brands-grid__pagination-list a:hover,
.section-brands-grid__pagination-list a:focus-visible {
    color: var(--color-primary);
    text-decoration-color: currentColor;
}

.section-brands-grid__pagination-list .current {
    color: var(--color-primary);
}

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

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

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

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

    .section-brands-grid__grid {
        /* Deux tuiles par rang, à la largeur disponible. auto-fit calculait le nombre de
           colonnes sur les 245 de la maquette : une seule tenait sur un téléphone, et une page de
           20 logos faisait 6 000px de haut. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-list);
    }

    .section-brands-grid__item {
        width: auto;
        /* Le carré est conservé, à la largeur que la colonne veut bien donner. */
        height: auto;
        aspect-ratio: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-brands-grid__link .section-brands-grid__logo,
    .section-brands-grid__link .section-brands-grid__fallback {
        transition: none;
    }

    .section-brands-grid__link:hover .section-brands-grid__logo,
    .section-brands-grid__link:focus-visible .section-brands-grid__logo,
    .section-brands-grid__link:hover .section-brands-grid__fallback,
    .section-brands-grid__link:focus-visible .section-brands-grid__fallback {
        /* L'opacité suffit à signaler le survol : on retire le mouvement, pas l'indice. */
        transform: none;
    }
}

/* ---- Filtres, recherche et tri (option « filters » de la row) ---- */

.section-brands-grid__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m) var(--space-bloc);
    align-items: center;
    justify-content: space-between;
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    /* La grille suit à 24 dans la maquette, pas aux 64 entre blocs de la section. */
    margin-bottom: calc(var(--space-list) - var(--space-xl));
}

.section-brands-grid__filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Composant Filter du design system (2288:27217), même habillage que les pastilles de l'équipe. */
.section-brands-grid__filter {
    display: flex;
    gap: var(--space-compact);
    align-items: center;
    padding: var(--space-micro) var(--space-m);
    position: relative;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-alpha-10);
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-600);
    text-decoration: none;
    transition: background-color 140ms ease-out, color 140ms ease-out;
}

/* 34 de haut dessinés : zone de clic rattrapée à 44, invisible. */
.section-brands-grid__filter::after {
    content: "";
    position: absolute;
    inset-block: -5px;
    inset-inline: 0;
}

.section-brands-grid__filter:hover,
.section-brands-grid__filter:focus-visible,
.section-brands-grid__filter--active {
    background-color: var(--color-primary);
    color: var(--color-primary-50);
}

.section-brands-grid__filter--active {
    padding-left: var(--space-compact);
}

.section-brands-grid__filter--active:hover,
.section-brands-grid__filter--active:focus-visible {
    background-color: var(--color-primary-900);
}

.section-brands-grid__filter-cross {
    display: none;
    position: relative;
    width: 5px;
    height: 5px;
    flex-shrink: 0;
}

.section-brands-grid__filter--active .section-brands-grid__filter-cross {
    display: block;
}

.section-brands-grid__filter-cross::before,
.section-brands-grid__filter-cross::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: 50%;
    width: 1px;
    background-color: currentColor;
}

.section-brands-grid__filter-cross::before {
    transform: rotate(45deg);
}

.section-brands-grid__filter-cross::after {
    transform: rotate(-45deg);
}

.section-brands-grid__tools {
    display: flex;
    gap: var(--space-bloc);
    align-items: center;
    margin-left: auto;
}

.section-brands-grid__search {
    display: flex;
    gap: var(--space-compact);
    align-items: center;
    width: 224px;
    max-width: 100%;
    padding: var(--space-compact) var(--space-m);
    border: 1px solid var(--color-neutral-600);
    border-radius: var(--radius-full);
    color: var(--color-neutral-600);
}

.section-brands-grid__search:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.section-brands-grid__search-label {
    display: flex;
}

.section-brands-grid__search-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--font-size-p);
    line-height: 1;
    color: var(--color-neutral-700);
}

.section-brands-grid__search-input::placeholder {
    color: var(--color-neutral-600);
}

.section-brands-grid__search-input:focus {
    outline: none;
}

.section-brands-grid__sort {
    display: flex;
    gap: var(--space-micro);
    align-items: center;
    min-height: 44px;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 140ms ease-out;
}

.section-brands-grid__sort:hover,
.section-brands-grid__sort:focus-visible {
    text-decoration-color: currentColor;
}

.section-brands-grid__sort-icon.is-desc {
    transform: rotate(180deg);
}

.section-brands-grid__empty {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-700);
    text-align: center;
}

@media (max-width: 767px) {
    .section-brands-grid__tools {
        width: 100%;
        justify-content: space-between;
    }

    .section-brands-grid__search {
        flex: 1;
    }
}

/*
 * « 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-grid__link {
    position: relative;
}

.section-brands-grid__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-grid__link:hover .section-brands-grid__cta,
a.section-brands-grid__link:focus-visible .section-brands-grid__cta {
    opacity: 1;
    transform: translate(-50%, 0);
}

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

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