/*
 * Section Produits phares — Figma node 2644:67854.
 *
 * Cadrage de la maquette : en-tête bridé à 884 et centré, bande de fiches de 278,67 espacées
 * de 40 qui déborde volontairement de l'écran des deux côtés, pastilles. Écart de 48 entre
 * chaque bloc, 96 de padding vertical.
 */

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

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

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

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

/* ---- Bande de fiches ---- */

.section-products__scroller {
    width: 100%;
    overflow-x: auto;
    /*
     * Ni scroll-snap ni scroll-behavior, pour les mêmes raisons que le carrousel de marques :
     * les pastilles paginent par largeur d'écran, et une animation posée en CSS s'applique
     * aussi à toute lecture/écriture programmée du défilement. L'animation est demandée au
     * clic, dans le partial scroll-dots.
     */
    scrollbar-width: none;
}

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

.section-products__list {
    display: flex;
    /* stretch : toutes les fiches d'une bande prennent la hauteur de la plus haute, sinon un
       nom sur deux lignes désaligne le bas des cadres voisins. */
    align-items: stretch;
    gap: var(--space-section);
    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 ; sinon le défilement maximum reste à 0. Marges auto plutôt que
       justify-content, qui rendrait le début de la bande inatteignable. */
    width: max-content;
    margin-inline: auto;
}

.section-products__item {
    display: flex;
    flex-direction: column;
    /* 278,67 dans la maquette, jamais compressée par le flex. */
    flex: none;
    width: 278.667px;
    border: 1px solid var(--color-secondary);
}

.section-products__media {
    /* 92 dans la maquette : un bandeau très large et très bas. */
    height: 92px;
    overflow: hidden;
    /*
     * Le fond des visuels produits fournis (détourés sur #f1f1ee, mesuré sur tous les
     * fichiers) : le produit, affiché entier, se fond dans le bandeau sans cadre visible.
     */
    background-color: #f1f1ee;
}

.section-products__image {
    width: 100%;
    height: 100%;
    /* contain et non cover : un produit se montre entier, il ne se recadre pas. */
    object-fit: contain;
    display: block;
}

.section-products__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
    padding: var(--space-bloc) var(--space-list);
}

.section-products__name {
    font-weight: 700;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-secondary-900);
}

.section-products__text {
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-700);
    /* Deux lignes dans la maquette. Au-delà, la fiche s'allongerait et entraînerait toute la
       bande avec elle : l'accroche est un résumé, pas la fiche produit. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

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

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

    .section-products__list {
        gap: var(--space-list);
    }
}

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

    .section-products__item {
        /* La fiche de la maquette dépasserait la largeur d'écran avec ses gouttières : elle
           s'y adapte, tout en laissant voir qu'une autre suit. */
        width: min(278.667px, 80vw);
    }
}