/*
 * Section Hero — Figma node 2644:67456.
 *
 * Cadrage de la maquette (1920) : bloc de 1792 de large, hauteur 793, en retrait de
 * 64 de chaque côté. Le liseré secondaire de 3px est en retrait de 18 / 15 par-dessus
 * les slides, et le coin haut-droit n'est volontairement PAS arrondi (maquette).
 */

.section-hero {
    --hero-height: 793px;
    --hero-inset-inline: 18px;
    --hero-inset-block: 15px;
    --hero-padding-inline: 152px;
    --hero-padding-block: 116px;

    /* min() plutôt que max-width + padding-inline : combinés, ils rognaient les gouttières
       SUR la largeur cible et le hero ne faisait que 1664 au lieu de 1792. */
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
}

.section-hero__viewport {
    position: relative;
    height: var(--hero-height);
    overflow: hidden;
    border-radius: var(--radius-xxs) 0 var(--radius-xxs) var(--radius-xxs);
    background-color: var(--color-primary);
    isolation: isolate;
}

/* ---- Slides ---- */

.section-hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-page);
    padding: var(--hero-padding-block) var(--hero-padding-inline);
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms ease, visibility 700ms ease;
}

.section-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.section-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* Le recadrage exact dépend de l'image téléversée : cover plutôt que les décalages
   figés de la maquette, qui ne valaient que pour l'image de placeholder. */
.section-hero__image,
.section-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Double dégradé de la maquette : le premier est peint au-dessus du second. */
.section-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(191.84deg, var(--color-primary) 3.176%, var(--color-primary-alpha-5) 36.846%),
        linear-gradient(125.4deg, var(--color-primary) 29.782%, var(--color-primary-alpha-20) 98.599%);
}

.section-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-page);
    width: 100%;
}

.section-hero__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-bloc);
    width: 100%;
    color: var(--color-text-invert);
}

.section-hero__title {
    max-width: 1032px;
    font-family: var(--font-family-heading);
    /* 76px dans la maquette, interlignage 73px (ratio 0.96). */
    font-size: clamp(2.5rem, 4vw, var(--font-size-xl));
    font-weight: 400;
    line-height: 0.96;
}

.section-hero__subtitle {
    max-width: 727px;
    font-family: var(--font-family-heading);
    font-size: clamp(1rem, 1.2vw, var(--font-size-h6));
    line-height: var(--line-height-heading);
}

.section-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-m);
}

/* ---- Liseré décoratif ---- */

.section-hero__frame {
    position: absolute;
    inset: var(--hero-inset-block) var(--hero-inset-inline);
    z-index: 3;
    border: 3px solid var(--color-secondary);
    pointer-events: none;
}

/* ---- Pastilles de pagination ---- */

.section-hero__dots {
    position: absolute;
    bottom: 55px;
    left: 50%;
    z-index: 4;
    display: flex;
    /* Voir la zone cliquable ci-dessous : c'est elle qui espace les pastilles. */
    gap: 0;
    transform: translateX(-50%);
}

/*
 * LA CASE CLIQUABLE EST LE BOUTON, LA PASTILLE N'EST QUE SON DESSIN.
 *
 * Version précédente : un bouton de 8px et une zone de 44px en position absolue par-dessus. Une
 * zone en position absolue n'espace rien, elle RECOUVRE : les zones se chevauchaient sur 33px et
 * la dernière, dessinée au-dessus, avalait les clics de toutes les autres. C'est exactement le
 * défaut constaté — « je clique et ça part sur la dernière ».
 *
 * Le bouton fait donc lui-même 24 x 44 (24 est le minimum de WCAG 2.5.8) et les boutons se
 * touchent sans se superposer : un clic va toujours à la pastille la plus proche. La pastille
 * visible reste un rond de 8px, dessiné en pseudo-élément au centre de la case.
 *
 * Contrepartie assumée : l'écart visuel entre pastilles passe de 3 à 16px. C'est le prix d'une
 * cible atteignable ; la maquette dessinait une grappe injouable à la souris comme au doigt.
 */
.section-hero__dot {
    position: relative;
    /* La case, pas le dessin. */
    width: 24px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.section-hero__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    /* Le rond de 8px de la maquette. */
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary-300);
    transform: translate(-50%, -50%);
    transition: background-color var(--hover-dur) var(--hover-ease);
}

.section-hero__dot.is-active::before {
    background-color: var(--color-primary-5);
}

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

@media (max-width: 1200px) {
    .section-hero {
        --hero-height: 640px;
        --hero-padding-inline: var(--space-large);
        --hero-padding-block: var(--section-space);
        --container-gutter: var(--space-bloc);
    }
}

@media (max-width: 768px) {
    .section-hero {
        --hero-height: 560px;
        --hero-padding-inline: var(--space-list);
        --hero-padding-block: var(--section-space);
        --hero-inset-inline: 10px;
        --hero-inset-block: 10px;
        --container-gutter: var(--space-m);
    }

    .section-hero__slide,
    .section-hero__content {
        gap: var(--space-bloc);
    }

    /*
     * Titre et texte passent sur bien plus de lignes : centré dans 560px, le bouton finissait
     * SOUS les pastilles. Un peu plus de hauteur, des pastilles plus basses, et leur place
     * (44px) réservée sous le contenu.
     */
    .section-hero {
        --hero-height: 640px;
    }

    .section-hero__slide {
        padding-block-end: calc(var(--hero-padding-block) + 44px);
    }

    .section-hero__dots {
        bottom: var(--space-m);
    }
}

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

/* Pendant un balayage à la souris, le navigateur sélectionnerait le texte de la slide : c'est ce
   qui donnait l'impression d'un carrousel cassé. */
.section-hero.is-swiping {
    user-select: none;
    cursor: grabbing;
}