/* ==========================================================================
   SCT PROD — SCROLL STORY / HORS CADRE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

.story-section {
    --story-accent: #203D85;
    --story-panel-bg: #FFFFFF;

    --story-viewport-height: 100vh;

    /*
     * Si le header devient sticky :
     * remplacer 0px par sa hauteur réelle.
     */
    --story-top-offset: 0px;

    /*
     * Hauteur réellement disponible pour la scène.
     */
    --story-shell-height:
        calc(
            var(--story-viewport-height) -
            var(--story-top-offset)
        );

    /*
     * Cadence de progression entre les différentes étapes.
     */
    --story-step-height: 66vh;

    /*
     * Hauteur visuelle du panneau desktop.
     */
    --story-panel-height:
        clamp(22rem, 44vh, 28rem);

    /*
     * Amplitude volontairement très faible
     * des transitions verticales.
     */
    --story-motion-distance: 8px;

    /*
     * Courbes d'animation.
     */
    --story-ease-out:
        cubic-bezier(0.16, 1, 0.3, 1);

    --story-ease-exit:
        cubic-bezier(0.4, 0, 1, 1);

    /*
     * Séparateurs de l'accordéon mobile.
     */
    --story-divider:
        rgba(32, 61, 133, 0.16);
}


/*
 * Utilisation de svh lorsque supporté.
 */
@supports (height: 100svh) {

    .story-section {
        --story-viewport-height: 100svh;
        --story-step-height: 66svh;
    }

}


/* ==========================================================================
   STRUCTURE GÉNÉRALE
   ========================================================================== */

.story-section,
.story-layout,
.story-aside-column,
.story-content-column,
.story-track {
    overflow: visible;
}


.story-layout {
    align-items: stretch;
}


.story-aside-column,
.story-content-column {
    min-width: 0;
}


/* ==========================================================================
   COLONNE ÉDITORIALE GAUCHE
   ========================================================================== */

/*
 * La colonne gauche constitue une véritable scène
 * verticale centrée dans le viewport.
 */
.story-aside {
    position: sticky;

    top: var(--story-top-offset);

    align-self: flex-start;

    min-height: var(--story-shell-height);

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.story-nav {
    width: 100%;
}


.story-nav-item {
    position: relative;

    transition:
        opacity 350ms ease,
        transform 520ms var(--story-ease-out);
}


/*
 * Marqueur horizontal de l'étape active.
 *
 * On anime transform plutôt que width afin d'éviter
 * un recalcul de layout pendant l'animation.
 */
.story-nav-item::before {
    content: "";

    position: absolute;

    left: -28px;
    top: 50%;

    width: 18px;
    height: 2px;

    background: var(--story-accent);

    opacity: 0;

    transform:
        translateY(-50%)
        scaleX(0);

    transform-origin: right center;

    transition:
        transform 520ms var(--story-ease-out),
        opacity 260ms ease;
}


.story-nav-item:focus-visible {
    outline: 2px solid var(--story-accent);
    outline-offset: 6px;
}


/* ==========================================================================
   TRACK
   ========================================================================== */

.story-track {
    position: relative;

    width: 100%;
}


/* ==========================================================================
   FALLBACK SANS JAVASCRIPT
   ========================================================================== */

/*
 * Le contenu reste accessible si JavaScript
 * est désactivé ou ne s'exécute pas.
 */
.story-stage {
    position: relative;
}


.story-panel {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    padding:
        clamp(2.5rem, 4vw, 4.5rem);

    margin: 0 0 1.5rem;

    background: var(--story-panel-bg);

    border-left: 2px solid var(--story-accent);
}


.story-triggers {
    display: none;
}


.story-mobile-accordion {
    display: none;
}


/* ==========================================================================
   DESKTOP — SCROLL STORY
   ========================================================================== */

@media (min-width: 981px) {

    /* ----------------------------------------------------------------------
       Track
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-track {
        display: grid;

        align-items: start;
    }


    /*
     * Le stage visible et la timeline invisible occupent
     * exactement la même cellule CSS Grid.
     */
    .story-section.is-enhanced .story-stage,
    .story-section.is-enhanced .story-triggers {
        grid-area: 1 / 1;
    }


    /* ----------------------------------------------------------------------
       Stage sticky
       ---------------------------------------------------------------------- */

    /*
     * Le stage occupe virtuellement la totalité
     * de la hauteur visible.
     *
     * Le panneau est ensuite centré dans cette scène.
     */
    .story-section.is-enhanced .story-stage {
        position: sticky;

        top: var(--story-top-offset);

        align-self: start;

        width: 100%;
        height: var(--story-shell-height);

        display: grid;
        align-items: center;

        isolation: isolate;

        z-index: 2;
    }


    /* ----------------------------------------------------------------------
       Panels superposés
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-panel {
        position: relative;

        grid-area: 1 / 1;

        width: 100%;
        height: var(--story-panel-height);

        box-sizing: border-box;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            clamp(2.5rem, 4vw, 4.5rem)
            clamp(2.5rem, 4vw, 4.5rem);

        margin: 0;

        background: var(--story-panel-bg);

        border-left: 0;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform:
            translate3d(
                0,
                var(--story-motion-distance),
                0
            );

        will-change:
            transform,
            opacity;

        transition:
            opacity 240ms var(--story-ease-exit),
            transform 360ms var(--story-ease-out),
            visibility 0s linear 420ms;

        z-index: 1;
    }


    /* ----------------------------------------------------------------------
       Trait vertical animé
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-panel::before {
        content: "";

        position: absolute;

        left: 0;
        top: 0;
        bottom: 0;

        width: 2px;

        background: var(--story-accent);

        opacity: 0;

        transform: scaleY(0.15);
        transform-origin: center center;

        transition:
            transform 650ms var(--story-ease-out),
            opacity 260ms ease;

        pointer-events: none;
    }


    /* ----------------------------------------------------------------------
       Direction de sortie / entrée
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-panel.is-before {
        transform:
            translate3d(
                0,
                calc(
                    var(--story-motion-distance) * -1
                ),
                0
            );
    }


    .story-section.is-enhanced .story-panel.is-after {
        transform:
            translate3d(
                0,
                var(--story-motion-distance),
                0
            );
    }


    /* ----------------------------------------------------------------------
       Panel actif
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-panel.is-active {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;

        transform:
            translate3d(0, 0, 0);

        transition:
            opacity 460ms var(--story-ease-out),
            transform 620ms var(--story-ease-out),
            visibility 0s linear 0s;

        z-index: 3;
    }


    .story-section.is-enhanced
    .story-panel.is-active::before {
        opacity: 1;

        transform: scaleY(1);
    }


    /* ----------------------------------------------------------------------
       Stagger du contenu
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-panel__title,
    .story-section.is-enhanced .story-panel__body,
    .story-section.is-enhanced .story-panel__action {
        opacity: 0;

        transform:
            translate3d(0, 6px, 0);

        transition:
            opacity 220ms ease,
            transform 320ms var(--story-ease-out);
    }


    .story-section.is-enhanced
    .story-panel.is-active
    .story-panel__title {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        transition:
            opacity 420ms var(--story-ease-out) 50ms,
            transform 560ms var(--story-ease-out) 50ms;
    }


    .story-section.is-enhanced
    .story-panel.is-active
    .story-panel__body {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        transition:
            opacity 440ms var(--story-ease-out) 110ms,
            transform 580ms var(--story-ease-out) 110ms;
    }


    .story-section.is-enhanced
    .story-panel.is-active
    .story-panel__action {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);

        transition:
            opacity 440ms var(--story-ease-out) 170ms,
            transform 580ms var(--story-ease-out) 170ms;
    }


    /* ----------------------------------------------------------------------
       Timeline invisible
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-triggers {
        display: grid;

        grid-auto-rows:
            var(--story-step-height);

        /*
         * Permet au premier et au dernier trigger
         * d'atteindre eux aussi le centre du viewport.
         */
        padding-block:
            calc(
                (
                    var(--story-shell-height) -
                    var(--story-step-height)
                ) / 2
            );

        width: 100%;

        box-sizing: border-box;

        pointer-events: none;

        z-index: 1;
    }


    .story-section.is-enhanced .story-trigger {
        width: 100%;
        min-height: 0;

        opacity: 0;

        pointer-events: none;
    }


    /* ----------------------------------------------------------------------
       Navigation inactive
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-nav-item {
        cursor: pointer;

        opacity: 0.54;
    }


    .story-section.is-enhanced
    .story-nav-item:not(.is-active):hover {
        opacity: 0.82;

        transform: translateX(3px);
    }


    /* ----------------------------------------------------------------------
       Navigation active
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced .story-nav-item.is-active {
        opacity: 1;

        transform: translateX(0);
    }


    .story-section.is-enhanced
    .story-nav-item.is-active::before {
        opacity: 1;

        transform:
            translateY(-50%)
            scaleX(1);
    }


    /*
     * Divi peut appliquer sa couleur directement
     * sur les modules enfants.
     */
    .story-section.is-enhanced
    .story-nav-item.is-active,
    .story-section.is-enhanced
    .story-nav-item.is-active * {
        color: var(--story-accent) !important;
    }

}


/* ==========================================================================
   TABLETTE / MOBILE — ACCORDÉON ÉDITORIAL
   ========================================================================== */

@media (max-width: 980px) {

    /* ----------------------------------------------------------------------
       Désactivation du layout desktop
       ---------------------------------------------------------------------- */

    .story-aside {
        position: static;

        min-height: 0;

        display: block;
    }


    /*
     * Masqués uniquement lorsque JavaScript
     * a réellement construit l'accordéon.
     *
     * Sans JS, les contenus restent accessibles.
     */
    .story-section.is-mobile-accordion .story-nav {
        display: none;
    }


    .story-section.is-mobile-accordion
    .story-content-column {
        display: none;
    }


    /* ----------------------------------------------------------------------
       Conteneur accordéon
       ---------------------------------------------------------------------- */

    .story-section.is-mobile-accordion
    .story-mobile-accordion {
        display: block;

        width: 100%;

        margin-top:
            clamp(2.5rem, 10vw, 3.5rem);
    }


    /* ----------------------------------------------------------------------
       Item
       ---------------------------------------------------------------------- */

    .story-accordion__item {
        border-top:
            1px solid
            var(--story-divider);
    }


    .story-accordion__item:last-child {
        border-bottom:
            1px solid
            var(--story-divider);
    }


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

    .story-mobile-accordion
    .story-nav-item {
        position: relative;

        width: 100%;
        min-height: 3.5rem;

        box-sizing: border-box;

        padding:
            1.25rem
            2.75rem
            1.25rem
            0;

        cursor: pointer;

        opacity: 1;

        transform: none;

        transition:
            color 420ms var(--story-ease-out),
            opacity 300ms ease;
    }


    /* ----------------------------------------------------------------------
       Icône +
       ---------------------------------------------------------------------- */

    /*
     * Barre horizontale.
     */
    .story-mobile-accordion
    .story-nav-item::before {
        display: block;

        left: auto;
        right: 0;
        top: 50%;

        width: 18px;
        height: 2px;

        background: currentColor;

        opacity: 0.55;

        transform:
            translateY(-50%)
            scaleX(1);

        transform-origin: center;

        transition:
            opacity 300ms ease,
            transform 520ms var(--story-ease-out);
    }


    /*
     * Barre verticale.
     *
     * Sa disparition transforme le + en −.
     */
    .story-mobile-accordion
    .story-nav-item::after {
        content: "";

        position: absolute;

        right: 8px;
        top: 50%;

        width: 2px;
        height: 18px;

        background: currentColor;

        opacity: 0.55;

        transform:
            translateY(-50%)
            scaleY(1);

        transform-origin: center;

        transition:
            opacity 280ms ease,
            transform 520ms var(--story-ease-out);
    }


    /* ----------------------------------------------------------------------
       Item ouvert
       ---------------------------------------------------------------------- */

    .story-accordion__item.is-open
    .story-nav-item {
        color:
            var(--story-accent) !important;
    }


    .story-accordion__item.is-open
    .story-nav-item * {
        color:
            var(--story-accent) !important;
    }


    .story-accordion__item.is-open
    .story-nav-item::before {
        opacity: 1;
    }


    .story-accordion__item.is-open
    .story-nav-item::after {
        opacity: 0;

        transform:
            translateY(-50%)
            scaleY(0);
    }


    .story-mobile-accordion
    .story-nav-item:focus-visible {
        outline:
            2px solid
            var(--story-accent);

        outline-offset: -2px;
    }


    /* ----------------------------------------------------------------------
       Corps de l'accordéon
       ---------------------------------------------------------------------- */

    .story-accordion__body {
        display: grid;

        grid-template-rows: 0fr;

        opacity: 0;

        transition:
            grid-template-rows
                620ms
                var(--story-ease-out),
            opacity
                320ms
                ease;
    }


    .story-accordion__inner {
        min-height: 0;

        overflow: hidden;
    }


    .story-accordion__item.is-open
    .story-accordion__body {
        grid-template-rows: 1fr;

        opacity: 1;
    }


    /* ----------------------------------------------------------------------
       Panel intégré dans l'accordéon
       ---------------------------------------------------------------------- */

    .story-mobile-accordion
    .story-panel {
        position: relative;

        width: 100%;
        height: auto;
        min-height: 0;

        display: block;

        box-sizing: border-box;

        /*
         * Le contenu est légèrement indenté
         * sous l'intitulé.
         */
        padding:
            0
            0
            clamp(1.75rem, 6vw, 2.25rem)
            clamp(3rem, 11vw, 4rem);

        margin: 0;

        background: transparent;

        border: 0;

        opacity: 1;
        visibility: visible;

        transform: none;

        pointer-events: auto;
    }


    /* ----------------------------------------------------------------------
       Animation interne du contenu
       ---------------------------------------------------------------------- */

    .story-mobile-accordion
    .story-panel__title,
    .story-mobile-accordion
    .story-panel__body,
    .story-mobile-accordion
    .story-panel__action {
        opacity: 0;

        transform:
            translate3d(0, 6px, 0);

        transition:
            opacity 300ms ease,
            transform 480ms var(--story-ease-out);
    }


    .story-accordion__item.is-open
    .story-panel__title,
    .story-accordion__item.is-open
    .story-panel__body,
    .story-accordion__item.is-open
    .story-panel__action {
        opacity: 1;

        transform:
            translate3d(0, 0, 0);
    }


    .story-accordion__item.is-open
    .story-panel__title {
        transition-delay: 90ms;
    }


    .story-accordion__item.is-open
    .story-panel__body {
        transition-delay: 140ms;
    }


    .story-accordion__item.is-open
    .story-panel__action {
        transition-delay: 190ms;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .story-nav-item,
    .story-nav-item::before,
    .story-nav-item::after,

    .story-panel,
    .story-panel::before,
    .story-panel__title,
    .story-panel__body,
    .story-panel__action,

    .story-accordion__body {
        transition: none !important;
    }

}