body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .form-input,
        .form-select,
        .form-textarea {
            border-radius: 0.5rem;
            border: 1px solid #d1d5db;
            padding: 0.65rem 0.9rem;
            transition: all 0.2s ease-in-out;
            width: 100%;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: #6772e5;
            box-shadow: 0 0 0 3px rgba(103, 114, 229, 0.3);
        }

        .btn {
            border-radius: 0.5rem;
            padding: 0.85rem 1.75rem;
            font-weight: 600;
            font-size: 0.95rem;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid transparent;
        }

        .btn-primary {
            background: #6772e5;
            color: #fff;
            box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1);
        }

        .btn-primary:hover {
            background: #5469d4;
            transform: translateY(-1px);
            box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.12);
        }

        .btn-primary:disabled {
            background: #a5b4fc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* Bouton « Payer » désactivé (verrou « demande déjà payée », ou envoi en cours).
           DOIT battre css/style.css qui impose `.btn-primary { background:#007AB3
           !important }` et `.btn-primary:hover { background:#018dce !important }` :
           la règle `.btn-primary:disabled` ci-dessus, sans !important, perd contre
           elles. Sans ce bloc, le bouton verrouillé reste bleu vif et SE RALLUME AU
           SURVOL — rien n'indiquerait au client que le paiement est bloqué.
           Sélecteur d'ID + !important → gagne quel que soit l'ordre des feuilles.
           L'opacité et le curseur restent gérés par les utilitaires Tailwind du
           bouton (`disabled:opacity-50 disabled:cursor-not-allowed`), non contestés. */
        #submit-payment:disabled,
        #submit-payment:disabled:hover {
            background: #a5b4fc !important;
            border-color: #a5b4fc !important;
            transform: none !important;
            box-shadow: none !important;
        }

        .stepper-line {
            transition: all 0.4s ease-in-out;
        }

        /* --- Blue Theme Overrides --- */
        a.text-purple-700 {
            color: #6772e5 !important;
        }

        a.text-purple-700:hover {
            color: #5469d4 !important;
        }

        .text-purple-600,
        .form-radio:checked {
            color: #6772e5 !important;
        }

        .bg-purple-600 {
            background-color: #6772e5 !important;
        }

        .border-purple-600 {
            border-color: #6772e5 !important;
        }

        .has-\[:checked\]\:bg-purple-50:has(:checked) {
            background-color: #f0f2ff !important;
        }

        .form-radio {
            color: #6772e5;
        }

        .form-radio:checked {
            border-color: #6772e5;
            background-color: #6772e5;
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
        }

        /* --- End Blue Theme Overrides --- */

        /* Accordion styles */
        details.accordion {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            margin-bottom: 1rem;
        }

        details.accordion>summary {
            list-style: none;
            cursor: pointer;
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: 500;
            color: #111827;
            background: #f9fafb;
            border-radius: 0.75rem;
        }

        details.accordion>summary::-webkit-details-marker {
            display: none;
        }

        details.accordion .accordion-body {
            padding: 1rem 1.25rem 1.25rem 1.25rem;
            border-top: 1px solid #e5e7eb;
        }

        details.accordion .chevron {
            transition: transform 0.2s ease;
            font-weight: 700;
            color: #6b7280;
        }

        details.accordion[open] .chevron {
            transform: rotate(180deg);
        }

        /* Locked (disabled) sections */
        details.accordion.locked>summary {
            opacity: 0.6;
            cursor: not-allowed;
            background: #f3f4f6;
        }

        details.accordion.locked>summary * {
            pointer-events: none;
        }

        details.accordion.locked .chevron {
            color: #cbd5e1;
        }

        /* Inline field error */
        .field-error {
            color: #b91c1c;
            font-size: 0.85rem;
            margin-top: 0.25rem;
        }

        .section-error {
            background: #fef2f2;
            border-left: 4px solid #f87171;
            color: #991b1b;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
        }

        /* Custom Tooltip Styles */
        label[data-tooltip] {
            cursor: default;
        }

        /* ⛔ AUCUN HABILLAGE ICI. Fond, liseré, texte, ombre, rayon et
           typographie viennent de `.iq-bulle` (css/style.css) — l'infobulle
           unique du site depuis le 2026-09-09. Ce bloc ne garde que ce qui est
           PROPRE au formulaire : le positionnement au pixel calculé par
           js/tooltips.js, la largeur maximale, et l'animation d'apparition. */
        .custom-tooltip {
            position: absolute;
            display: none;
            z-index: 1000;
            width: max-content;
            max-width: 400px;
            opacity: 0;
            transform: translateY(8px) scale(0.97);
            transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .custom-tooltip ul {
            list-style: disc;
            padding-left: 1.25rem;
            margin: 0;
        }

        .custom-tooltip li {
            margin: 6px 0;
        }

        .custom-tooltip.visible {
            display: block;
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* La flèche : le MÊME carré tourné à 45° que sur la vitrine, et non
           plus un triangle plein sans liseré — deux flèches différentes pour une
           seule bulle, c'est ce qu'on vient de défaire. Couleur et style de
           trait : `.iq-bulle::after`. Ici, seulement le côté d'où elle sort et
           les deux faces qui portent le liseré. */
        .custom-tooltip::after {
            content: "";
            position: absolute;
            left: 50%;
            width: 11px;
            height: 11px;
            /* défaut : bulle AU-DESSUS de la cible, pointe vers le bas */
            top: 100%;
            margin-top: -6px;
            border-width: 0 1px 1px 0;
            transform: translateX(-50%) rotate(45deg);
        }

        .custom-tooltip.below::after {
            /* bulle EN DESSOUS de la cible, pointe vers le haut */
            top: auto;
            margin-top: 0;
            bottom: 100%;
            margin-bottom: -6px;
            border-width: 1px 0 0 1px;
        }

        /* La pastille « i » du formulaire : `.iq-i` porte le cercle bleu, la
           lettre serif et le survol. Il ne reste ici que l'écart au libellé et
           la taille — la seule variation prévue par le composant. */
        .info-icon {
            --iq-i-taille: 1.25rem;
            margin-left: 6px;
            user-select: none;
        }

        /* Déclencheur texte (« En savoir plus », sous-titres d'étape) :
           le texte lui-même ouvre le tooltip — aucune pastille injectée. */
        .tooltip-text-trigger {
            cursor: help;
            text-decoration: underline dotted;
            text-underline-offset: 3px;
        }

        /* Custom Flatpickr Styles */
        .flatpickr-calendar {
            font-size: 72%;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .flatpickr-current-month {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 0.5rem;
            height: 38px;
            /* Give it a fixed height */
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months,
        .flatpickr-year-select {
            font-weight: 600;
            color: #4b5563;
            background-color: transparent;
            border: 1px solid transparent;
            border-radius: 0.5rem;
            padding: 0.35rem 2.25rem 0.35rem 0.5rem;
            /* T, R, B, L */
            transition: all 0.2s ease;
            margin: 0 0.15rem;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.5rem center;
            background-repeat: no-repeat;
            background-size: 1.25em 1.25em;
        }

        .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
        .flatpickr-year-select:hover {
            background-color: #f0f2ff;
            border-color: #6772e5;
        }

        .flatpickr-monthDropdown-month {
            background: #fff;
            color: #374151;
        }

        .flatpickr-monthDropdown-month:hover {
            background: #f0f2ff;
            color: #5469d4;
        }

        .flatpickr-day {
            border-radius: 9999px;
            transition: all 0.1s ease;
        }

        .flatpickr-day.selected,
        .flatpickr-day.startRange,
        .flatpickr-day.endRange {
            background: #6772e5;
            border-color: #6772e5;
        }

        .flatpickr-day:hover {
            background: #f0f2ff;
        }

        .flatpickr-day.today {
            border-color: #a5b4fc;
        }

        .flatpickr-day.today:hover {
            background: #a5b4fc;
            color: #fff;
        }

/* --- Completion View Animations --- */
                    /* Completion View Animations */
                    @keyframes popIn {
                        0% {
                            transform: scale(0.5);
                            opacity: 0;
                        }

                        70% {
                            transform: scale(1.1);
                        }

                        100% {
                            transform: scale(1);
                            opacity: 1;
                        }
                    }

                    .completion-icon {
                        opacity: 0;
                        animation: popIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s forwards;
                    }

                    @keyframes fadeUp {
                        from {
                            opacity: 0;
                            transform: translateY(20px);
                        }

                        to {
                            opacity: 1;
                            transform: translateY(0);
                        }
                    }

                    .fade-in-up {
                        animation: fadeUp 0.8s ease-out forwards;
                    }

                    @keyframes confettiFall {
                        0% {
                            transform: translateY(-50px) rotate(0deg);
                            opacity: 1;
                        }

                        100% {
                            transform: translateY(300px) rotate(360deg);
                            opacity: 0;
                        }
                    }

                    .confetti-piece {
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background-color: #3b82f6;
                        opacity: 0;
                    }

                    .confetti-container.active .confetti-piece:nth-child(1) {
                        left: 10%;
                        animation: confettiFall 2.5s ease-out 0s infinite;
                    }

                    .confetti-container.active .confetti-piece:nth-child(2) {
                        left: 25%;
                        animation: confettiFall 2.2s ease-out 0.4s infinite;
                        background-color: #60a5fa;
                    }

                    .confetti-container.active .confetti-piece:nth-child(3) {
                        left: 40%;
                        animation: confettiFall 2.8s ease-out 0.2s infinite;
                        background-color: #2563eb;
                    }

                    .confetti-container.active .confetti-piece:nth-child(4) {
                        left: 60%;
                        animation: confettiFall 2.4s ease-out 0.6s infinite;
                        background-color: #93c5fd;
                    }

                    .confetti-container.active .confetti-piece:nth-child(5) {
                        left: 75%;
                        animation: confettiFall 2.6s ease-out 0.1s infinite;
                        background-color: #1d4ed8;
                    }

                    .confetti-container.active .confetti-piece:nth-child(6) {
                        left: 90%;
                        animation: confettiFall 2.3s ease-out 0.5s infinite;
                    }

                    .confetti-container.active .confetti-piece:nth-child(7) {
                        left: 50%;
                        animation: confettiFall 3s ease-out 0.3s infinite;
                        background-color: #dbeafe;
                    }

        /* ───────────────────────────────────────────────────────────────────
         * Étape 2 — Dénomination : libellés des radios "Société à numéro" /
         * "Société avec un nom". On réduit légèrement la police pour aérer
         * et on ajoute de l'espace entre l'icône d'info (i) injectée par JS
         * et le texte d'exemple « (Exemple : 1234-5678 Québec inc.) ».
         * ─────────────────────────────────────────────────────────────────── */
        #constitution-type-choice .label-text {
            font-size: 0.82rem;
            line-height: 1.35;
        }

        #constitution-type-choice .info-icon {
            margin-left: 8px;
            margin-right: 10px;
            width: 18px;
            height: 18px;
            font-size: 10px;
        }

        /* Texte d'exemple à droite de l'icône info */
        #constitution-type-choice label > span:last-child {
            font-size: 0.78rem;
            line-height: 1.35;
        }

        /* ───────────────────────────────────────────────────────────────────
         * Mobile responsive overrides
         * Réduit les paddings/font-sizes pour gagner en largeur utile et
         * éviter que les libellés (stepper, sections, panier) se chevauchent
         * sur les petits écrans. Aucun changement de comportement — seulement
         * la mise en page.
         * ─────────────────────────────────────────────────────────────────── */
        @media (max-width: 640px) {

            /* — Stepper : libellés qui s'entremêlent sur 320–414 px —
             * On autorise le retour à la ligne et on réduit la taille de la
             * police pour les 5 étapes. La marge sous le stepper est
             * augmentée pour absorber les libellés sur 2 lignes. */
            #stepper,
            [data-form-stepper] {
                margin-top: 1rem;
                margin-bottom: 3.5rem;
            }

            #stepper .stepper-step > p,
            [data-form-stepper] .stepper-step > p {
                white-space: normal !important;
                font-size: 10px !important;
                line-height: 1.15 !important;
                max-width: 4.5rem;
                text-align: center;
                letter-spacing: -0.01em;
                bottom: auto;
                top: calc(100% + 4px);
            }

            /* — Titres d'étape et sous-titres plus compacts — */
            #step-title,
            [data-form-etape-titre] {
                font-size: 1.125rem !important; /* text-lg */
                line-height: 1.35 !important;
            }

            #step-subtitle {
                font-size: 0.78rem !important;
                line-height: 1.4 !important;
            }

            /* — Le formulaire colle au stepper : le mt-16 desktop créait un
             * vide de 64px entre le stepper et la carte. — */
            #incorporation-form,
            [data-form] {
                margin-top: 1.25rem !important;
            }

            /* — Formulaire interne : on resserre le padding pour gagner
             * ~24px de largeur utile sur chaque côté. Le min-h-[400px]
             * desktop laissait un grand vide sous les étapes courtes. — */
            #incorporation-form > .bg-white,
            [data-form] .bg-white.shadow-lg {
                padding: 1rem !important;
                min-height: 0 !important;
            }

            /* — Inputs / selects / textareas : padding plus serré pour ne pas
             * « engloutir » la largeur. Police à 16px MINIMUM : en dessous,
             * iOS Safari zoome automatiquement dans le champ au focus. — */
            .form-input,
            .form-select,
            .form-textarea {
                padding: 0.6rem 0.75rem;
                font-size: 1rem;
            }

            /* — Labels de champ légèrement plus petits — */
            .wizard-step label.block,
            .wizard-step label[class*="text-sm"],
            .form-step label.block,
            .form-step span.block {
                font-size: 0.82rem;
            }

            /* — Grilles internes : on réduit l'espacement vertical — */
            .wizard-step .grid.gap-6,
            .form-step .grid.gap-6 {
                gap: 0.9rem;
            }

            .wizard-step .grid.gap-5 {
                gap: 0.75rem;
            }

            /* — Boutons Précédent / Suivant : compacts mais confortables au
             * pouce (44px de haut = cible tactile recommandée). — */
            .wizard-step .btn,
            #payment-container .btn,
            .form-step .btn {
                padding: 0.6rem 1.15rem !important;
                font-size: 0.9rem !important;
                min-height: 2.75rem;
            }

            /* — Carte d'administrateur / actionnaire corporate : moins de
             * padding pour laisser plus d'espace au contenu. — */
            .director-form,
            .corp-sh-form {
                padding: 1rem !important;
            }

            .director-summary > .p-6,
            .corp-sh-summary > .p-6 {
                padding: 1rem !important;
            }

            /* — Sous-titres de section dans le formulaire administrateur — */
            .director-form h3,
            .corp-sh-form h3 {
                font-size: 0.95rem !important;
            }

            .director-form h4,
            .corp-sh-form h4 {
                font-size: 0.7rem !important;
            }

            /* — Entête du formulaire administrateur : on empile titre +
             * boutons (Fermer / Supprimer) sur mobile pour qu'ils ne se
             * fassent pas couper hors viewport. — */
            .director-form > .flex.justify-between.items-center,
            .corp-sh-form > .flex.justify-between.items-start {
                flex-direction: column;
                align-items: stretch;
                gap: 0.75rem;
            }

            .director-form > .flex.justify-between.items-center > h3,
            .corp-sh-form > .flex.justify-between.items-start > h3 {
                font-size: 0.9rem !important;
                min-width: 0;
            }

            .director-form > .flex.justify-between.items-center > div.flex.items-center.gap-2,
            .corp-sh-form > .flex.justify-between.items-start > div.flex.items-center {
                justify-content: flex-end;
                gap: 0.5rem;
            }

            /* Réduit l'icône ronde devant le titre sur mobile pour gagner
             * de l'espace horizontal. */
            .director-form h3 > .h-10.w-10,
            .corp-sh-form h3 > .h-10.w-10,
            .director-summary .h-10.w-10,
            .corp-sh-summary .h-10.w-10 {
                height: 2rem;
                width: 2rem;
            }

            /* — Toggle « Est-ce que cet individu est actionnaire ? » :
             * on autorise le wrap pour ne pas couper l'input pourcentage. — */
            .director-form .shareholder-details {
                border-left: none;
                padding-left: 0;
                margin-top: 0.5rem;
                width: 100%;
                flex-basis: 100%;
            }

            .director-form .bg-gray-50 > .flex.items-center.gap-6 {
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            /* — Étape 2 — Dénomination : sur mobile, police encore plus
             * compacte et exemple bien séparé du i (icône d'info). — */
            #constitution-type-choice .label-text {
                font-size: 0.78rem;
                line-height: 1.3;
            }

            #constitution-type-choice .info-icon {
                margin-left: 6px;
                margin-right: 8px;
                width: 16px;
                height: 16px;
                font-size: 9px;
            }

            #constitution-type-choice label > span:last-child {
                font-size: 0.72rem;
                line-height: 1.3;
            }

            #constitution-type-choice label {
                padding: 0.6rem 0.5rem !important;
            }

            /* — Carrousel Organisation : titre + radios plus serrés — */
            #org-carousel h3 {
                font-size: 0.95rem !important;
                margin-top: 0.5rem !important;
                margin-bottom: 0.75rem !important;
            }

            #org-carousel label .text-base {
                font-size: 0.875rem !important;
            }

            #org-carousel .bg-white.p-6 {
                padding: 1rem !important;
            }

            /* — Panier / Récapitulatif paiement : on resserre le padding
             * de la carte de droite et on réduit la taille de la police. — */
            #payment-container {
                padding: 1rem !important;
                margin-top: 1.5rem !important;
            }

            #payment-container .grid.grid-cols-1 {
                gap: 1.5rem !important;
            }

            #payment-container h2 {
                font-size: 1rem !important;
                margin-bottom: 1rem !important;
                padding-bottom: 0.75rem !important;
            }

            #payment-container h3 {
                font-size: 0.95rem !important;
            }

            #payment-container .lg\:col-span-5 .bg-slate-50 {
                padding: 1rem !important;
                border-radius: 0.875rem !important;
            }

            #payment-product-details {
                margin-bottom: 1.25rem !important;
            }

            #payment-product-details .text-xs,
            #payment-product-details .text-sm {
                font-size: 0.78rem !important;
            }

            /* — Tooltips : on plafonne la largeur pour qu'ils tiennent
             * dans le viewport mobile et on réduit la marge interne. — */
            .custom-tooltip {
                max-width: calc(100vw - 24px);
                padding: 12px 14px;
                font-size: 0.85rem;
            }

            /* — Anchor du récap commande quand injecté sous le formulaire — */
            #order-summary-anchor .bg-slate-50,
            #order-summary-anchor .bg-white {
                padding: 1rem !important;
            }

            /* — Marges/sections globales pour aérer sans étouffer — */
            main {
                padding-top: 0.75rem !important;
                padding-bottom: 1.5rem !important;
            }

            /* — Modale d'entrée (accès direct au formulaire) : le bloc
             * disclaimer + « Continuer » était aligné à droite avec un grand
             * vide à gauche. Sur mobile : empilé, bouton pleine largeur. — */
            #entity-modal #modal-desc {
                margin-bottom: 1.5rem !important;
            }

            #entity-modal .flex.flex-col.items-end {
                align-items: stretch;
            }

            #entity-modal #btn-continue-entity {
                width: 100% !important;
                padding-top: 0.8rem;
                padding-bottom: 0.8rem;
            }

            #entity-modal #modal-disclaimer-checkbox {
                height: 1rem;
                width: 1rem;
            }

            #entity-modal #modal-disclaimer-checkbox + span {
                font-size: 12px;
                line-height: 1.45;
            }
        }

        /* Très petits écrans (≤ 380 px) : derniers ajustements pour ne
         * jamais avoir de texte rogné. */
        @media (max-width: 380px) {
            #stepper .stepper-step > p,
            [data-form-stepper] .stepper-step > p {
                font-size: 9px !important;
                max-width: 3.8rem;
            }

            /* ⚠️ LE MOTEUR GÉNÉRIQUE PEUT AVOIR PLUS D'ÉTAPES QUE LE TUNNEL.
               Le tunnel en a cinq, figées dans son gabarit ; ici le nombre vient
               du descripteur — « inscription_taxes » en compte SEPT depuis qu'on
               suit Revenu Québec section par section. Sur 375 px, sept pastilles
               laissent ~50 px par créneau : une légende de 3,8 rem (60 px) mord
               alors sur sa voisine (mesuré le 2026-09-03, « Coordonnées » collé
               à « Entreprise »). On la borne au créneau, elle passe à la ligne.
               Le tunnel garde ses 3,8 rem : cette règle ne le touche pas. */
            [data-form-stepper] .stepper-step > p {
                max-width: 3rem;
            }

            #step-title,
            [data-form-etape-titre] {
                font-size: 1rem !important;
            }

            /* Padding minimal mais police maintenue à 16px (zoom iOS). */
            .form-input,
            .form-select,
            .form-textarea {
                padding: 0.5rem 0.6rem;
                font-size: 1rem;
            }
        }

/* ═══ Garde de cascade : .btn + .hidden ═══════════════════════════════════════
   style.css et ce fichier (chargés APRÈS tailwind.css) redéclarent
   .btn { display:inline-flex } à la même spécificité (0,1,0) que .hidden →
   le display:none de la classe utilitaire perdait TOUJOURS. Symptôme : les
   boutons « Suivant » ET « Valider/Submit » du carrousel Organisation visibles
   en même temps sur toutes les diapos (FR et EN), et « Submit » cliquable dès
   la diapo 1 → bannière d'erreur sur un champ d'une diapo jamais atteinte. */
.btn.hidden { display: none !important; }

/* ═══ Rail de progression vertical — OVERLAY (PUR AJOUT) ══════════════════════
   Contrat : n'affecte NI la largeur du formulaire NI le stepper horizontal.
   → position:absolute ANCRÉ à .flex-1.relative (= la carte du formulaire), hors
   flux, display:none par défaut. STATIQUE : défile avec la page (pas de fixed).
   • right:100% → bord droit collé au bord gauche de la carte (~32px de la carte
     blanche, dans la gouttière VIDE) — écart constant quelle que soit la largeur.
   • top:50% + translateY(-50%) → centré verticalement sur le MILIEU du formulaire.
   Taille réduite. Affiché seulement ≥1440px (gouttière assez large pour un écran
   ~1450px) ; en dessous : caché, le stepper horizontal reste la seule progression.
   left:-102px = ancré 102px à gauche du bord de .flex-1 → écart constant ~14px de
   la carte blanche quelle que soit la largeur (les deux se décalent ensemble). */
#progress-rail { display: none; }
/* Contrepartie du stepper : masqué tant que le stepper occupe l'espace (<1440px). */
#form-intro { display: none; }

@media (min-width: 1440px) {
    /* De combien la carte — et le rail avec elle — remontent. */
    :root {
        --remontee-formulaire: 96px;
    }

    /* EXCLUSIVITÉ MUTUELLE (demande Ilyes) : dès que le rail latéral s'affiche,
       le stepper horizontal au-dessus du formulaire disparaît — et inversement
       en dessous du seuil. Volontairement dans LE MÊME @media que #progress-rail
       ci-dessous : les deux seuils ne peuvent pas diverger, donc jamais les deux
       barres en même temps, et jamais aucune.
       display:none (et pas visibility) → l'espace est récupéré. Le stepper reste
       dans le DOM : nav.js continue de le peindre sans erreur, et paid-banner.js
       s'insère toujours avant lui. */
    #stepper {
        display: none;
    }

    /* ÉCHANGE 1:1 avec #stepper (demande Ilyes) : le texte d'intro n'apparaît que
       dans l'espace que le stepper vient de libérer. Même @media → il est
       impossible d'avoir le stepper ET le texte, ou l'espace vide et rien. */
    #form-intro {
        display: block;
        /* Équilibre les 2 lignes. Sans ça, le remplissage maximal produit une
           1re ligne pleine (729px) et une 2e courte (524px), avec la coupure
           entre le verbe et son objet (« …nous préparons / votre demande. »).
           `balance` choisit le point de coupure : ~614/639px, rupture à la
           virgule. La boîte fait 768px fixes à ce seuil, donc le résultat est
           déterministe ; les navigateurs sans support gardent le rendu actuel.
           Bénéfice supplémentaire : s'adapte si la police web ne charge pas
           (repli système plus large → coupure encore plus disgracieuse). */
        text-wrap: balance;
    }

    #progress-rail {
        display: block;
        position: absolute;
        left: -102px;
        /* ⚠️ LE RAIL SUIT LA CARTE, ET C'EST LE SEUL MOYEN QU'IL RESTE CENTRÉ
           DESSUS. Il est posé au milieu de .flex-1, mais la carte est remontée
           de `--remontee-formulaire` : sans la même soustraction ici, le rail
           pendait plus bas que la carte de toute la valeur du décalage — visible
           à l'œil nu, et c'est ce qu'Ilyes a relevé. Les deux valeurs viennent
           donc de la MÊME variable : elles ne peuvent plus diverger. */
        top: calc(50% - var(--remontee-formulaire));
        transform: translateY(-50%);
        width: 120px;
        z-index: 20;
    }

    /* ═══ Remontée du bloc formulaire — desktop ≥1440px UNIQUEMENT (demande Ilyes) ══
       Le texte d'intro, la carte du formulaire ET le rail latéral remontent
       ensemble. Volontairement un décalage `position:relative; top:` et NON une
       marge/padding : le décalage est purement visuel, il ne change ni la hauteur
       ni la position dans le flux de .flex-1 →
         • le bloc paiement, qui suit dans le flux, reste EXACTEMENT où il est ;
         • aucune marge ne peut « fusionner » (margin-collapsing) et dériver.
       `relative` sans z-index ne crée pas de contexte d'empilement, et pas de
       `transform` non plus → aucun effet sur les overlays (flatpickr, Stripe).
       Sous 1440px : aucune règle, mobile/tablette/laptop strictement inchangés.

       ⚠️ UNE SEULE VALEUR POUR LES DEUX. Le rail est un overlay centré sur
       .flex-1, pas un enfant de la carte : il ne suit pas tout seul. Deux
       nombres écrits séparément auraient dérivé au premier ajustement. */
    #form-shell {
        position: relative;
        top: calc(-1 * var(--remontee-formulaire));
    }
}

.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-item { position: relative; padding: 0 0 1.05rem 0; }
.rail-item:last-child { padding-bottom: 0; }
/* Segment de liaison : pointillé gris → bleu plein quand l'item précédent est fait */
.rail-item + .rail-item::before {
    content: ''; position: absolute; left: 9px; top: -1.05rem; height: 1.05rem;
    border-left: 2px dashed #d1d5db;
}
.rail-item.rail-prev-done::before { border-left: 2px solid #2563eb; }
.rail-btn {
    display: flex; align-items: center; gap: 0.6rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; text-align: left; width: 100%;
}
.rail-circle {
    box-sizing: border-box; flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: 9999px;
    border: 2px dashed #d1d5db; background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .2s, background-color .2s;
}
.rail-circle svg { width: 12px; height: 12px; }
.rail-label { font-size: 0.74rem; font-weight: 500; color: #6b7280; transition: color .2s; white-space: nowrap; }
.rail-item:hover .rail-label { color: #374151; }
.rail-current .rail-circle { border: 2.5px solid #2563eb; }
.rail-current .rail-label { color: #2563eb; font-weight: 700; }
.rail-done .rail-circle { border: 2px solid #2563eb; background: #2563eb; }
.rail-done .rail-label { color: #1f2937; font-weight: 600; }
.rail-item[data-rail-step="pay"]:not(.rail-reachable) .rail-btn { cursor: default; }

/* Sous-étapes (diapos « Organisation ») */
.rail-children { list-style: none; margin: 0.5rem 0 0 0; padding: 0 0 0 2px; }
.rail-sub {
    position: relative; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.22rem 0 0.22rem 1.6rem; cursor: default;
}
.rail-sub::before {
    content: ''; position: absolute; left: 7px; top: 0; bottom: 0;
    border-left: 2px dashed #e5e7eb;
}
.rail-sub-circle {
    box-sizing: border-box; flex: 0 0 auto;
    width: 10px; height: 10px; border-radius: 9999px;
    border: 2px dashed #d1d5db; background: #fff;
}
.rail-sub-label { font-size: 0.72rem; color: #6b7280; }
.rail-sub-current .rail-sub-circle { border: 2px solid #2563eb; }
.rail-sub-current .rail-sub-label { color: #2563eb; font-weight: 600; }
.rail-sub-done .rail-sub-circle { border: 2px solid #2563eb; background: #2563eb; }
.rail-sub-done .rail-sub-label { color: #374151; }