/*
 * Section Liste des univers — Figma node 2527:71428.
 *
 * Cadrage de la maquette : menu centré, puis un panneau par univers, 1792 de large, rayon 4,
 * fond secondary-300, padding vertical 96. Colonne de texte de 737 en retrait de 151 du bord,
 * visuel de 756 x 744 posé en face — plus haut que le panneau, donc débordant en haut et en
 * bas. Une rubrique sur deux inverse les deux côtés.
 */

.section-univers-list {
    /*
     * Hauteur réservée au menu quand il colle en haut. Sert de décalage d'ancre pour que le
     * titre d'une rubrique ne se retrouve pas caché dessous. Deux lignes de menu plus son
     * padding : c'est le cas de la maquette à pleine largeur, et la marge est confortable sur
     * une seule ligne.
     */
    --univers-nav-height: calc(2 * 26px + 2 * var(--space-list));

    display: flex;
    flex-direction: column;
    padding-block-start: var(--section-space);
}

/* ---- Menu d'ancres, collant ---- */

.section-univers-list__nav {
    /*
     * Sticky, et non fixed : le menu accompagne la liste puis se libère à la fin de la section,
     * sans avoir à surveiller le défilement en JavaScript.
     *
     * --bel-sticky-top vaudra la hauteur de l'en-tête du site le jour où il existera ; d'ici là
     * le menu colle au bord haut de la fenêtre.
     */
    position: sticky;
    top: var(--bel-sticky-top, 0px);
    z-index: 2;
    /* Le menu passe devant les visuels : sans fond opaque, ils défileraient derrière le texte.
       Même couleur que le fond de page, pour qu'il reste invisible tant qu'il ne colle pas. */
    background-color: var(--color-surface);
    padding-block: var(--space-list);
    /* Le padding vertical de la maquette (168) n'est pas repris : il vaut pour un bloc figé au
       milieu de la page. Collé en haut, il occuperait un quart de l'écran. L'écart au haut de
       page est repris par le padding de la section. */
}

.section-univers-list__nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-list);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.section-univers-list__nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-list);
}

/* Puce de 5px de la maquette, entre deux entrées. */
.section-univers-list__nav-dot {
    width: 5px;
    height: 5px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary);
}

.section-univers-list__nav-link {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    /* Regular, comme la maquette : ce n'est pas un titre. */
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-secondary-900);
    /* Trait toujours présent, transparent au repos : une couleur s'anime, un text-decoration non. */
    text-decoration: underline;
    text-decoration-color: transparent;
}

.section-univers-list__nav-link:hover,
.section-univers-list__nav-link:focus-visible {
    text-decoration-color: currentColor;
}

/* ---- Une rubrique ---- */

.section-univers-list__item {
    padding-block: var(--section-space);
    /* L'ancre s'arrête sous le menu collant, et non dessous. */
    scroll-margin-top: var(--univers-nav-height);
}

.section-univers-list__panel {
    position: relative;
    /* Le visuel dépasse en haut et en bas du panneau : rien ne doit le rogner. */
    display: flex;
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-block: var(--space-big-hero);
    border-radius: var(--radius-xxs);
    background-color: var(--color-secondary-300);
}

.section-univers-list__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-list);
    /* 737 sur 1792, soit 41,13 %, en retrait de 151 — 8,43 %. En pourcentage, la colonne et le
       visuel se réduisent ensemble au lieu de se disputer la place. */
    width: 41.127%;
    margin-inline-start: 8.426%;
}

.section-univers-list__title {
    font-family: var(--font-family-heading);
    /*
     * 49px de la maquette conservés dès qu'il y a la place, réduits en dessous.
     *
     * Un titre figé à 49px débordait la page sur écran étroit : « Agroalimentaire » est un seul
     * mot, il ne se coupe pas, et il mesure à lui seul plus que la largeur d'un téléphone. Le
     * clamp évite un point de rupture, et overflow-wrap reste le filet pour un mot encore plus
     * long qu'on n'a pas prévu.
     */
    font-size: clamp(1.75rem, 5.5vw, var(--font-size-h2));
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-secondary-950);
    overflow-wrap: break-word;
}

.section-univers-list__text {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-secondary-900);
}

.section-univers-list__text p {
    margin: 0;
}

.section-univers-list__text p + p {
    margin-block-start: var(--space-compact);
}

/*
 * Le visuel : 756 de large (42,19 % de 1792), posé à 995 du bord gauche (55,52 %), centré
 * verticalement sur le panneau et plus haut que lui. C'est ce débordement qui fait l'image de
 * la maquette, le produit sortant de la bande beige.
 */
.section-univers-list__media {
    position: absolute;
    top: 50%;
    inset-inline-start: 55.525%;
    width: 42.187%;
    aspect-ratio: 756 / 744;
    transform: translateY(-50%);
    /* Sous le menu collant, qui doit passer devant. */
    z-index: 0;
    pointer-events: none;
}

.section-univers-list__image {
    width: 100%;
    height: 100%;
    /* contain et non cover : ce sont des photos détourées, les rogner couperait le produit. */
    object-fit: contain;
}

/* Une rubrique sur deux inverse les côtés : texte à droite, visuel à gauche. */
.section-univers-list__item:nth-of-type(even) .section-univers-list__content {
    margin-inline-start: 50.446%;
}

.section-univers-list__item:nth-of-type(even) .section-univers-list__media {
    inset-inline-start: 8.008%;
}

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

@media (max-width: 1200px) {
    .section-univers-list {
        --container-gutter: var(--space-bloc);
        --univers-nav-height: calc(3 * 26px + 2 * var(--space-list));

        padding-block-start: var(--section-space);
    }

    .section-univers-list__item {
        padding-block: var(--section-space);
    }

    .section-univers-list__panel {
        padding-block: var(--space-large);
    }

    .section-univers-list__content,
    .section-univers-list__item:nth-of-type(even) .section-univers-list__content {
        width: 46%;
        margin-inline-start: var(--space-large);
    }

    .section-univers-list__item:nth-of-type(even) .section-univers-list__content {
        margin-inline-start: 48%;
    }
}

@media (max-width: 900px) {
    /*
     * Le visuel ne tient plus à côté du texte : la rubrique passe en pile. Le visuel reprend sa
     * place dans le flux, il ne déborde plus — un produit à moitié hors écran sur mobile
     * n'apporte rien.
     */
    .section-univers-list__panel {
        flex-direction: column;
        gap: var(--space-bloc);
        padding-inline: var(--space-bloc);
    }

    .section-univers-list__content,
    .section-univers-list__item:nth-of-type(even) .section-univers-list__content {
        width: 100%;
        margin-inline-start: 0;
    }

    .section-univers-list__media,
    .section-univers-list__item:nth-of-type(even) .section-univers-list__media {
        position: static;
        inset-inline-start: auto;
        width: 100%;
        max-width: 420px;
        margin-inline: auto;
        transform: none;
    }

    /* Le visuel avant le texte quand tout est empilé : c'est l'ordre de lecture de la maquette
       sur les rubriques à visuel à gauche, et il évite un bloc de texte suivi d'une image
       orpheline. */
    .section-univers-list__item:nth-of-type(even) .section-univers-list__media {
        order: -1;
    }
}

@media (max-width: 768px) {
    .section-univers-list {
        --container-gutter: var(--space-m);
        /* Le menu défile horizontalement sur une seule ligne : son décalage d'ancre redescend
           donc à une ligne plus son padding. */
        --univers-nav-height: calc(26px + 2 * var(--space-list));
    }

    .section-univers-list__nav-list {
        /* Sur écran étroit, un menu de six entrées en pleine largeur occuperait la moitié de
           l'écran une fois collé. Il défile horizontalement, sur une seule ligne. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .section-univers-list__nav-list::-webkit-scrollbar {
        display: none;
    }

    .section-univers-list__nav-link {
        white-space: nowrap;
    }

    .section-univers-list__panel {
        padding: var(--space-bloc) var(--space-l);
    }
}