/*
 * Processus : chaque étape colle sous la précédente (sticky), décalée de la hauteur
 * d'un en-tête d'étape. Le padding de .steps laisse le temps de voir la pile complète.
 */
.process {
    position: relative;
    padding-top: clamp(90px, 16vh, 200px);
    padding-bottom: clamp(60px, 12vh, 160px);
}

.process__head {
    row-gap: 18px;
    padding-bottom: clamp(40px, 8vh, 100px);
}

.process__title {
    grid-column: 2 / span 3;
}

.steps {
    padding-bottom: 35svh;
}

.step {
    position: sticky;
    top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + var(--i) * var(--step-head));
    min-height: 62svh;
    background: var(--bg);
    border-top: 1px solid var(--line);
}

.step__head {
    height: var(--step-head);
    align-items: center;
}

.step__num {
    grid-column: 1;
}

.step__title {
    grid-column: 2 / span 2;
    font-size: clamp(22px, 2.3vw, 40px);
    line-height: 1;
    letter-spacing: -.03em;
    font-weight: 600;
}

.step__time {
    grid-column: 4;
    text-align: right;
}

.step__body {
    padding-block: clamp(12px, 3vh, 36px) clamp(36px, 7vh, 80px);
    transform-origin: 50% 0;
}

.step__text {
    grid-column: 2 / span 2;
    max-width: 44ch;
    font-size: var(--t-lead);
    line-height: 1.3;
    letter-spacing: -.015em;
}

.step__scope {
    grid-column: 4;
}

.step__scope ul {
    margin-top: 10px;
}

.step__scope li {
    padding-block: 7px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

/* Accordéon (mobile) : bouton + et panneau qui se déroule. Sur bureau, le bouton est caché et tout est ouvert. */
.step__plus {
    display: none;
}

@media (max-width: 899px) {
    .step__head {
        position: relative;
        padding-right: calc(var(--gutter) + var(--cell) + 52px);
        cursor: pointer;
    }

    .step__plus {
        display: block;
        position: absolute;
        right: calc(var(--gutter) + var(--cell));
        top: 50%;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        border: 1px solid currentColor;
        background: none;
        color: inherit;
        cursor: pointer;
    }

    /* le + : deux traits ; la barre verticale s'efface quand l'étape est ouverte (−) */
    .step__plus::before,
    .step__plus::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 1.5px;
        margin: -.75px 0 0 -7px;
        background: currentColor;
        transition: transform .5s var(--ease);
    }

    .step__plus::after {
        transform: rotate(90deg);
    }

    .step.is-open .step__plus::after {
        transform: rotate(90deg) scaleX(0);
    }

    .step__panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .6s var(--ease);
    }

    .step.is-open .step__panel {
        grid-template-rows: 1fr;
    }

    .step__clip {
        min-height: 0;
        overflow: hidden;
    }

    .process__title {
        grid-column: 1 / -1;
    }

    .steps {
        padding-bottom: 0;
    }

    .step {
        position: relative;
        top: auto;
        min-height: 0;
    }

    .step__head {
        height: auto;
        padding-block: 18px;
        row-gap: 10px;
    }

    .step__num {
        grid-row: 1;
    }

    .step__time {
        grid-column: 2;
        grid-row: 1;
    }

    .step__title,
    .step__text,
    .step__scope {
        grid-column: 1 / -1;
    }

    .step__body {
        row-gap: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .step__panel,
    .step__plus::after {
        transition: none;
    }
}