/*
 * Section Carrousel des univers — Figma node 2644:67504.
 *
 * Cadrage de la maquette (page 1920) : panneau beige sur toute la largeur du conteneur
 * (1792), texte bridé à 737 aligné sur la colonne de contenu (1490 centrée, donc 151 de
 * retrait), photo débordant volontairement du panneau en haut et en bas, flèches à 64 des
 * bords, puis la liste des univers et l'encadré final sur la colonne de contenu.
 */

.section-univers {
    /* 32 de plus en haut : la photo déborde du panneau par le haut. */
    padding-block: calc(var(--section-space) + var(--space-bloc)) var(--section-space);
}

.section-univers__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-bloc);
    /* min() plutôt que max-width + padding : la largeur vaut exactement celle de la
       maquette quand la place existe, et se réduit avec les gouttières sinon. Un
       max-width combiné à un padding aurait rogné 128px sur la largeur cible. */
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
}

/* ---- Panneau ---- */

.section-univers__stage {
    position: relative;
    display: flex;
    align-items: center;
    /*
     * Les flèches sont des éléments de flux, pas des éléments en absolu : elles réservent
     * ainsi leur propre place et ne peuvent pas recouvrir le texte. Le retrait vaut
     * 64px (position du chevron dans la maquette) moins 18px, pour que la cible de 44px
     * reste centrée sur le chevron de 8px.
     *
     * L'addition retombe exactement sur la maquette : 46 + 44 (flèche) = 90, et la colonne
     * de contenu de 1490 centrée dans les 1612 restants ajoute 61, soit 151 du bord du
     * panneau — la valeur de la maquette.
     */
    padding-inline: calc(var(--space-hero) - 18px);
    /* La photo dépasse du panneau : surtout pas de overflow: hidden ici. */
    border-radius: var(--radius-xxs);
    background-color: var(--color-secondary-300);
}

.section-univers__panels {
    flex: 1 1 auto;
    min-width: 0;
    /*
     * Respiration entre la flèche et le texte. Invisible à la largeur de la maquette : la
     * colonne de contenu (1490) y est plus étroite que la place disponible, donc son
     * centrage absorbe ce padding et le retrait reste à 151px. En dessous, la colonne
     * occupe toute la place et ce padding évite que le titre ne touche la flèche.
     */
    padding-inline: var(--space-s);
}

/*
 * Indispensable : `display: flex` ci-dessous l'emporterait sur la règle `[hidden] {
 * display: none }` du navigateur, et les panneaux masqués resteraient visibles.
 */
.section-univers__panel[hidden] {
    display: none;
}

.section-univers__panel {
    display: flex;
    align-items: center;
    /* Colonne de contenu de la maquette, centrée dans l'espace laissé par les flèches. */
    width: min(var(--container-content-width), 100%);
    margin-inline: auto;
    padding-block: var(--space-big-hero);
    /*
     * Hauteur du panneau dans la maquette (~523 avec sa description de sept lignes). La
     * hauteur de la photo ne dépend que de sa largeur, pas du panneau : sans ce plancher,
     * une description courte raccourcit le panneau et la photo déborde d'autant plus vers
     * le bas, jusqu'à passer derrière l'encadré. Le plancher garde le débordement à la
     * valeur voulue quelle que soit la longueur du texte.
     */
    min-height: 523px;
}

.section-univers__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-list);
    /* 737 sur 1490 : la photo occupe le reste. */
    max-width: 737px;
    /* Le texte passe toujours devant la photo, y compris si les deux se chevauchent
       quand la largeur se réduit. */
    position: relative;
    z-index: 1;
}

.section-univers__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-secondary-950);
}

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

/*
 * Photo hors flux : c'est la seule façon de la laisser dépasser du panneau en haut et en
 * bas sans que sa hauteur impose celle du panneau. Positionnée par rapport au panneau
 * entier (1792), pas à la colonne de contenu : 756 de large et 41 du bord droit dans la
 * maquette, exprimés en pourcentages pour rester proportionnels.
 */
.section-univers__media {
    position: absolute;
    top: 50%;
    right: 2.29%;
    width: 42.2%;
    /* z-index 0 explicite : la photo débordant sous le panneau, elle passerait par-dessus
       la liste des univers et l'encadré, qui se repositionnent au-dessus (voir plus bas). */
    z-index: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.section-univers__photo {
    width: 100%;
    height: auto;
    /* Photo détourée : jamais recadrée ni déformée. */
    object-fit: contain;
}

/* ---- Flèches ---- */

.section-univers__arrow {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cible de 44px conforme, alors que le chevron visible ne fait que 8 x 16. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-secondary-800);
    /* Au-dessus de la photo, qui s'étend sur toute la largeur du panneau. */
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.section-univers__arrow--next .section-univers__chevron {
    transform: rotate(180deg);
}

/* Dimensions explicites : le tracé exporté fait 10 x 18 pour un chevron visible de 8 x 16. */
.section-univers__chevron {
    display: block;
    width: 10px;
    height: 18px;
}

/* ---- Liste des univers ---- */

.section-univers__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-list);
    /*
     * Largeur de la maquette : 1189 au total dont 151 de retrait, soit 1038 de contenu.
     * Ce n'est pas cosmétique — c'est ELLE qui commande les retours à la ligne. Étalée sur
     * toute la colonne de contenu (1490), cinq entrées tenaient sur la première ligne et
     * trois passaient par-dessus la photo, qui commence à 995. Avec 1038, la première
     * ligne s'arrête à 1011 et la liste se répartit en deux lignes de trois, exactement
     * comme la maquette — le chevauchement résiduel de 17px tombant dans la marge
     * transparente de la photo (vérifié : alpha nul sur toute la zone).
     *
     * Exprimé en POURCENTAGES et non en pixels, comme la photo : un menu de largeur fixe
     * occuperait proportionnellement plus de place à mesure que le panneau se réduit, et
     * finirait par mordre sur la partie visible de la photo. En proportions, le rapport
     * entre les deux reste celui de la maquette à toutes les largeurs.
     */
    width: 57.92%; /* 1038 / 1792 */
    margin-inline-start: 8.43%; /* 151 / 1792 */
    padding: 0;
    list-style: none;
    /* Filet de sécurité : la photo débordant sous le panneau, le texte doit de toute façon
       être peint par-dessus si un libellé long venait à s'en approcher. */
    position: relative;
    z-index: 1;
}

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

/* Séparateur de la maquette : un point de 5px en secondary-300. Reproduit en CSS plutôt
   qu'en image — c'est une forme, et elle doit rester invisible des lecteurs d'écran. */
.section-univers__nav-item:not(:last-child)::after {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background-color: var(--color-secondary-300);
}

.section-univers__nav-link {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 400;
    line-height: var(--line-height-heading);
    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;
    cursor: pointer;
}

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

/* L'univers affiché : gras et souligné, comme dans la maquette. */
.section-univers__nav-link.is-active {
    font-weight: 700;
    text-decoration: underline;
}

/* ---- Encadré final ---- */

.section-univers__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-list);
    width: min(var(--container-content-width), 100%);
    margin-inline: auto;
    padding: var(--space-list);
    border: 1px solid var(--color-secondary-400);
    border-radius: var(--radius-xxs);
    /* Même raison que la liste : rester devant la photo qui déborde. Sans fond opaque —
       la maquette ne donne à cet encadré qu'une bordure, et un fond viendrait trancher net
       le bas de la photo qui passe derrière. */
    position: relative;
    z-index: 1;
}

.section-univers__intro {
    max-width: 888px;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    line-height: var(--line-height-heading);
    color: var(--color-primary-950);
}

/* ---- Animation d'entrée ----
 *
 * Le changement de panneau se fait par `hidden`, donc par display:none : une transition
 * ne peut rien interpoler. On joue donc une animation sur le panneau qui apparaît, via une
 * classe posée puis retirée par le script.
 *
 * ATTENTION : ne jamais animer `transform` sur le panneau lui-même. Un élément transformé
 * devient le bloc conteneur de ses descendants en position absolue — la photo, ancrée au
 * panneau coloré, se retrouverait ancrée au panneau de contenu et sauterait. D'où une
 * animation d'opacité seule sur le panneau, les déplacements étant portés par le contenu
 * et la photo séparément.
 */

@keyframes bel-univers-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bel-univers-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.section-univers__panel.is-entering {
    animation: bel-univers-fade 300ms ease both;
}

.section-univers__panel.is-entering .section-univers__content {
    animation: bel-univers-rise 450ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 1201px) {
    /* La photo est centrée par translateY(-50%) : ses keyframes doivent le conserver,
       sinon elle se recale d'un demi-hauteur pendant l'animation. Cette règle est donc
       bornée à la largeur où ce centrage s'applique. */
    @keyframes bel-univers-photo {
        from { opacity: 0; transform: translateY(-50%) translateX(32px); }
        to { opacity: 1; transform: translateY(-50%); }
    }

    .section-univers__panel.is-entering .section-univers__media {
        animation: bel-univers-photo 550ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-univers__panel.is-entering,
    .section-univers__panel.is-entering .section-univers__content,
    .section-univers__panel.is-entering .section-univers__media {
        animation: none;
    }
}

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

/*
 * Sous 1200px la photo ne peut plus cohabiter avec le texte : elle repasse dans le flux,
 * sous le texte, et cesse donc de déborder.
 */
@media (max-width: 1200px) {
    .section-univers {
        --container-gutter: var(--space-bloc);
        padding-block: calc(var(--section-space) + var(--space-bloc)) var(--section-space);
    }

    .section-univers__panel {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xl);
        padding-block: var(--space-large);
    }

    .section-univers__content {
        max-width: none;
    }

    .section-univers__media {
        position: static;
        width: 100%;
        max-width: 560px;
        margin-inline: auto;
        transform: none;
    }

    /* La photo est repassée dans le flux : plus rien ne surplombe le menu, il peut donc
       reprendre toute la largeur disponible. */
    .section-univers__nav {
        width: 100%;
        margin-inline-start: 0;
    }

    .section-univers__footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

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

    /* Les flèches restent sur les côtés — elles sont dans le flux, donc elles ne peuvent
       pas recouvrir le texte — mais on récupère leur marge de confort pour le contenu. */
    .section-univers__stage {
        padding-inline: 0;
    }

    .section-univers__nav,
    .section-univers__nav-item {
        gap: var(--space-s);
    }
}