/* ========================================================================== 
   SCT PROD — HORS CADRE
   Desktop : wheel-driven story compact
   Mobile  : accordéon éditorial
   ========================================================================== */


/* ==========================================================================
   TOKENS
   ========================================================================== */

.story-section {
    --story-accent: #203D85;
    --story-panel-bg: #FFFFFF;
    --story-divider: rgba(32, 61, 133, 0.16);

    --story-container-width: 80%;
    --story-container-max: 1280px;

    --story-section-height: clamp(500px, 62vh, 620px);
    --story-panel-height: clamp(300px, 38vh, 360px);

    --story-mobile-gutter: 20px;
    --story-mobile-padding-y: 64px;

    --story-motion-distance: 8px;

    --story-ease-out:
        cubic-bezier(0.16, 1, 0.3, 1);

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


@supports (height: 100svh) {

    .story-section {
        --story-section-height:
            clamp(500px, 62svh, 620px);

        --story-panel-height:
            clamp(300px, 38svh, 360px);
    }

}


/* ==========================================================================
   BASE / STRUCTURE
   ========================================================================== */

.story-section,
.story-layout,
.story-aside-column,
.story-content-column,
.story-track,
.story-panel {
    box-sizing: border-box;
}


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


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


.story-track,
.story-stage {
    position: relative;
}


.story-track,
.story-nav,
.story-panel {
    width: 100%;
}


/* ==========================================================================
   NAVIGATION — BASE
   ========================================================================== */

.story-nav-item {
    position: relative;

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


.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 480ms var(--story-ease-out),
        opacity 220ms ease;
}


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

    outline-offset:
        6px;
}


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

.story-panel {
    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,
.story-mobile-accordion {
    display: none;
}


/* ==========================================================================
   DESKTOP — WHEEL STORY
   ========================================================================== */

@media (min-width: 981px) {

    /* ----------------------------------------------------------------------
       SECTION COMPACTE + CENTRAGE GLOBAL
       ---------------------------------------------------------------------- */

    .et_pb_section.story-section,
    .story-section {
        position: relative;

        height:
            var(--story-section-height)
            !important;

        min-height:
            var(--story-section-height)
            !important;

        max-height:
            var(--story-section-height)
            !important;

        padding-top:
            0
            !important;

        padding-bottom:
            0
            !important;

        overflow:
            visible
            !important;

        display:
            flex
            !important;

        flex-direction:
            column;

        justify-content:
            center;

        align-items:
            center
            !important;
    }


    /* ----------------------------------------------------------------------
       LIGNE DIVI
       ---------------------------------------------------------------------- */

    .story-section
    .story-layout {
        width:
            var(--story-container-width)
            !important;

        max-width:
            var(--story-container-max)
            !important;

        height:
            auto
            !important;

        min-height:
            0
            !important;

        max-height:
            none
            !important;

        padding-top:
            0
            !important;

        padding-bottom:
            0
            !important;

        margin-top:
            0
            !important;

        margin-right:
            auto
            !important;

        margin-bottom:
            0
            !important;

        margin-left:
            auto
            !important;

        align-items:
            center
            !important;

        align-self:
            center
            !important;
    }


    /* ----------------------------------------------------------------------
       COLONNES
       ---------------------------------------------------------------------- */

    .story-section
    .story-aside-column,

    .story-section
    .story-content-column {
        height:
            auto
            !important;

        min-height:
            0
            !important;

        max-height:
            none
            !important;

        align-self:
            center;

        display:
            flex;

        align-items:
            center;
    }


    /* ----------------------------------------------------------------------
       COLONNE GAUCHE
       ---------------------------------------------------------------------- */

    .story-section
    .story-aside {
        position:
            static;

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;
    }


    /*
     * Neutralisation des marges Divi
     * responsables du sur-espacement.
     */
    .story-section
    .story-aside > :nth-child(1),

    .story-section
    .story-aside > :nth-child(2) {
        margin-bottom:
            0
            !important;
    }


    .story-section
    .story-nav {
        margin-top:
            0
            !important;
    }


    /* ----------------------------------------------------------------------
       COLONNE DROITE / TRACK
       ---------------------------------------------------------------------- */

    .story-section
    .story-track {
        width:
            100%;

        height:
            auto;

        min-height:
            0;

        display:
            flex;

        align-items:
            center;
    }


    /* ----------------------------------------------------------------------
       STAGE
       ---------------------------------------------------------------------- */

    .story-section.is-enhanced
    .story-stage {
        width:
            100%;

        height:
            var(--story-panel-height);

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

        max-height:
            var(--story-panel-height);

        display:
            grid;

        align-items:
            stretch;

        isolation:
            isolate;

        overflow:
            visible;
    }


    /* ----------------------------------------------------------------------
       ANCIENS TRIGGERS
       ---------------------------------------------------------------------- */

    /*
     * Les triggers restent présents dans Divi
     * mais ne participent plus au comportement desktop.
     */
    .story-section.is-enhanced
    .story-triggers {
        display:
            none
            !important;
    }


    /* ----------------------------------------------------------------------
       PANELS SUPERPOSÉS
       ---------------------------------------------------------------------- */

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

        grid-area:
            1 / 1;

        width:
            100%;

        height:
            100%;

        min-height:
            0;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

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

        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
            );

        transition:
            opacity
                220ms
                var(--story-ease-exit),

            transform
                340ms
                var(--story-ease-out),

            visibility
                0s
                linear
                380ms;

        z-index:
            1;
    }


    /* ----------------------------------------------------------------------
       TRAIT VERTICAL
       ---------------------------------------------------------------------- */

    .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
                560ms
                var(--story-ease-out),

            opacity
                220ms
                ease;

        pointer-events:
            none;
    }


    /* ----------------------------------------------------------------------
       DIRECTION DES TRANSITIONS
       ---------------------------------------------------------------------- */

    .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
                400ms
                var(--story-ease-out),

            transform
                520ms
                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);
    }


    /* ----------------------------------------------------------------------
       ANIMATION INTERNE DES PANELS
       ---------------------------------------------------------------------- */

    .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
                200ms
                ease,

            transform
                300ms
                var(--story-ease-out);
    }


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

        transform:
            translate3d(
                0,
                0,
                0
            );

        transition:
            opacity
                360ms
                var(--story-ease-out)
                40ms,

            transform
                460ms
                var(--story-ease-out)
                40ms;
    }


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

        transform:
            translate3d(
                0,
                0,
                0
            );

        transition:
            opacity
                380ms
                var(--story-ease-out)
                90ms,

            transform
                480ms
                var(--story-ease-out)
                90ms;
    }


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

        transform:
            translate3d(
                0,
                0,
                0
            );

        transition:
            opacity
                380ms
                var(--story-ease-out)
                140ms,

            transform
                480ms
                var(--story-ease-out)
                140ms;
    }


    /* ----------------------------------------------------------------------
       NAVIGATION DESKTOP
       ---------------------------------------------------------------------- */

    .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);
    }


    .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);
    }


    .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
   ========================================================================== */

@media (max-width: 980px) {

    /* ----------------------------------------------------------------------
       SECTION + CONTAINER MOBILE
       ---------------------------------------------------------------------- */

    .et_pb_section.story-section,
    .story-section {
        height:
            auto
            !important;

        min-height:
            0
            !important;

        max-height:
            none
            !important;

        overflow:
            visible
            !important;

        display:
            block
            !important;

        padding-top:
            var(--story-mobile-padding-y)
            !important;

        padding-bottom:
            var(--story-mobile-padding-y)
            !important;
    }


    .story-section
    .story-layout {
        width:
            calc(
                100% -
                (
                    2 *
                    var(--story-mobile-gutter)
                )
            )
            !important;

        max-width:
            720px
            !important;

        margin-left:
            auto
            !important;

        margin-right:
            auto
            !important;
    }


    .story-aside {
        position:
            static;

        min-height:
            0;

        display:
            block;
    }


    /* ----------------------------------------------------------------------
       ACCORDÉON
       ---------------------------------------------------------------------- */

    .story-section.is-mobile-accordion
    .story-nav,

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


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

        width:
            100%;

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


    .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 ACCORDÉON
       ---------------------------------------------------------------------- */

    .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;
    }


    /* Barre horizontale du + / − */
    .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 du + */
    .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);
    }


    .story-accordion__item.is-open
    .story-nav-item,

    .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 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 MOBILE
       ---------------------------------------------------------------------- */

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

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        display:
            block;

        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 MOBILE
       ---------------------------------------------------------------------- */

    .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;
    }

}