/* ============================================================
   Tunnel de commande — parcours mobile en étapes
   Chargé uniquement par mon-timbre.html.

   80 % des soumissions de formulaire viennent du mobile (standard UX Horizon) :
   sur petit écran, le tunnel n'est pas une longue page à faire défiler mais une
   étape à la fois, avec une barre fixe qui porte le total et l'action.

   Tout est sous media query : au-delà de 991.98 px, ce fichier n'a aucun effet
   et la mise en page bureau (défilement continu + récap collant) est intacte.
   ============================================================ */

@media (max-width: 991.98px) {

    /* ---------- Une étape à la fois ---------- */

    /* `data-stepper` n'est posé que si le JS a pris la main : sans lui, toutes
       les étapes restent visibles et le formulaire fonctionne comme avant. */
    [data-stepper] .ft-section-card {
        display: none;
    }

    [data-stepper] .ft-section-card.is-current-step {
        display: block;
        animation: ft-step-in .22s ease-out both;
    }

    @keyframes ft-step-in {
        from { opacity: 0; transform: translateY(8px); }
        to   { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        [data-stepper] .ft-section-card.is-current-step {
            animation: none;
        }
    }

    /* Le récapitulatif complet n'apparaît qu'à la dernière étape : ailleurs, le
       total de la barre fixe suffit et la colonne ne ferait qu'allonger la page. */
    [data-stepper] .ft-recap-col {
        display: none;
    }

    [data-stepper][data-last-step="true"] .ft-recap-col {
        display: block;
    }

    /* Le bouton de repli sous le champ email doublonnerait avec la barre. */
    [data-stepper] [data-fallback-submit] {
        display: none;
    }

    /* Place pour la barre fixe, encoche iOS comprise.
       La hauteur minimale garde le pied de page hors écran pendant le parcours :
       sans elle, les étapes courtes (destination, poids) laissent remonter le
       footer au milieu de la page, sous la barre fixe. `dvh` suit la barre
       d'adresse mobile ; `vh` sert de repli. */
    [data-stepper] .ft-order-long-page {
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
    }

    /* ---------- Barre d'étapes fixe ---------- */

    .ft-stepbar {
        background: #fff;
        border-top: 1px solid var(--ft-border);
        bottom: 0;
        box-shadow: 0 -4px 20px rgba(0, 69, 124, .10);
        left: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        position: fixed;
        right: 0;
        z-index: 1030;
    }

    .ft-stepbar__progress {
        background: var(--ft-blue-light);
        height: 4px;
        overflow: hidden;
        width: 100%;
    }

    .ft-stepbar__progress span {
        background: var(--ft-cta);
        display: block;
        height: 100%;
        transition: width .25s ease-out;
    }

    .ft-stepbar__row {
        align-items: center;
        display: flex;
        gap: .75rem;
        padding: .7rem .9rem .8rem;
    }

    .ft-stepbar__back {
        background: none;
        border: 0;
        color: var(--ft-muted);
        flex: none;
        font-size: .85rem;
        font-weight: 600;
        padding: .5rem .25rem;
    }

    .ft-stepbar__back[hidden] {
        display: none;
    }

    .ft-stepbar__meta {
        flex: 1 1 auto;
        line-height: 1.15;
        min-width: 0;
    }

    .ft-stepbar__count {
        color: var(--ft-muted);
        display: block;
        font-size: .7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ft-stepbar__total {
        color: var(--ft-blue);
        display: block;
        font-size: 1.05rem;
        font-weight: 800;
    }

    .ft-stepbar__next {
        flex: none;
        min-width: 8.5rem;
        padding-left: 1rem;
        padding-right: 1rem;
        white-space: nowrap;
    }

    /* Un bouton désactivé ne dit pas *pourquoi* il l'est. On le laisse donc
       cliquable et c'est le clic qui signale l'étape incomplète, en la
       surlignant — l'utilisateur comprend ce qui manque. */
    .ft-stepbar__next[data-blocked="true"] {
        opacity: .55;
    }

    /* Sur les toutes petites hauteurs (clavier ouvert en paysage), on resserre. */
    @media (max-height: 460px) {
        .ft-stepbar__row {
            padding: .45rem .75rem .5rem;
        }
        .ft-stepbar__total {
            font-size: .95rem;
        }
    }
}