.vit-step {
            display: none;
        }

        .vit-step.vit-active {
            display: block;
        }


        /* ===============================
               STEPPER – FINAL
            ================================ */

        /* état inactif (futur) */
        .vit1-step .vit1-step-dot {
            background: #f1f3f5;
            color: #9aa4af;
        }

        .vit1-step .vit1-step-text {
            color: #9aa4af;
        }

        /* état actif (passé + courant) */
        .vit1-step.vit1-active .vit1-step-dot {
            background: #d02e28;
            color: #fff;
        }

        .vit1-step.vit1-active .vit1-step-text {
            color: #d02e28;
        }

        .vit1-step.vit1-active .vit1-step-pill {
            border-color: #e5e7eb;
        }


        /* ===============================
               WRAPPER
            ================================ */
        .vit1-wrap {
            max-width: 1200px;
            margin: 30px auto 50px;
            padding: 0 20px;
            background: #fff;
            box-sizing: border-box;
        }

        /* ===============================
               STEPPER
            ================================ */
        .vit1-stepper {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-bottom: 40px;
            padding-top: 30px;
            margin-top: 35px;
            width: 70%;
            left: 14%;
        }

        /* ----- BARRE ----- */
        .vit1-stepper-line {
            position: absolute;
            top: 0px;
            left: 50px;
            right: 50px;
            height: 4px;
            background: #d1d5db;
            /* gris */
            border-radius: 999px;
            z-index: 0;
            width: 70%;
            margin: 0 auto;
            overflow: hidden;
        }

        .vit1-stepper-line-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 12.5%;

            background: #d02e28;

            border-radius: 999px;

        }

        /* ===============================
               STEP (pill)
            ================================ */
        .vit1-step {
            display: flex;
            justify-content: center;
            position: relative;
            z-index: 1;
        }

        .vit1-step-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            min-height: 44px;
            cursor: pointer;
        }

        /* cercle */
        .vit1-step-dot {
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #F7F8F9;
            color: #ABB7C2;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* texte */
        .vit1-step-text {
            font-size: 14px;
            font-weight: 600;
            color: #ABB7C2;
        }

        /* ----- ACTIVE ----- */
        .vit1-step.vit1-active .vit1-step-pill {
            /* border-color: #d02e28; */
            border-color: #CFD6DC;
        }

        .vit1-step.vit1-active .vit1-step-dot {
            background: #d02e28;
            color: #fff;
        }

        .vit1-step.vit1-active .vit1-step-text {
            color: #d02e28;
        }

        /* ===============================
               CONTENT GRID
            ================================ */
        .vit1-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            justify-items: center;
            align-items: center;
        }

        .vit1-grid--bottom {
            margin-top: 50px;
            gap: 0px;
        }

        /* ===============================
               BLOCKS
            ================================ */
        .vit1-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }

        .vit1-block--small {
            gap: 12px;
        }

        /* ===============================
               IMAGES
            ================================ */
        .vit1-car {
            width: 420px;
            max-width: 100%;
            user-select: none;
        }

        .vit1-damage,
        .vit1-block svg {
            width: 150px;
            max-width: 100%;
            height: auto;
        }

        /* ===============================
               BUTTONS
            ================================ */
        .vit1-choice {
            padding: 12px 28px;
            font-size: 13px;
            font-weight: 700;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .vit1-choice--solid {
            background: #d02e28;
            color: #fff;
            border: 1px solid #d02e28;
        }

        .vit1-choice--outline {
            background: #fff;
            color: #d02e28;
            border: 1px solid #d02e28;
        }

        .vit1-choice:hover {
            transform: translateY(-1px);
        }

        /* ===============================
               RESPONSIVE
            ================================ */
        @media (max-width: 1024px) {
            .vit1-grid {
                gap: 40px;
            }

            .vit1-grid--bottom {
                gap: 80px;
            }

            .vit1-stepper-line {
                left: 20px;
                right: 20px;
            }
        }

        @media (max-width: 768px) {
            .vit1-stepper {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 12px;
            }

            .vit1-stepper-line {
                display: none;
            }

            .vit1-grid,
            .vit1-grid--bottom {
                grid-template-columns: 1fr;
                gap: 30px;
            }
        }



        /* ===============================
               SELECTED STATE (IMPORTANT)
            ================================ */

        /* bouton sélectionné */
        .vit1-choice.vit1-selected {
            background: #d02e28;
            color: #ffffff;
            border-color: #d02e28;
        }

        /* bouton non sélectionné (outline) */
        .vit1-choice--outline:not(.vit1-selected) {
            background: #ffffff;
            color: #d02e28;
        }

        /* bouton non sélectionné (solid) */
        /* .vit1-choice--solid:not(.vit1-selected) {
                        opacity: 0.6;
                    } */

        /* petit effet focus */
        /* .vit1-choice.vit1-selected {
                        box-shadow: 0 6px 16px rgba(208, 46, 40, 0.25);
                        transform: translateY(-1px);
                    } */


        /* ===============================
               SELECTED STATE – STEP 1
            ================================ */

        /* bouton sélectionné → plein rouge */
        .vit1-choice.vit1-selected {
            background: #d02e28;
            color: #ffffff;
            border: 1px solid #d02e28;
            /* box-shadow: 0 6px 16px rgba(208, 46, 40, 0.25); */
        }

        /* bouton NON sélectionné → outline */
        .vit1-choice:not(.vit1-selected) {
            background: #ffffff;
            color: #d02e28;
            border: 1px solid #d02e28;
        }

        /* hover léger */
        .vit1-choice:hover {
            transform: translateY(-1px);
        }





        /* ===============================
               MOBILE FIX (<= 768px)
            ================================ */
        @media (max-width: 768px) {

            /* ===== STEPPER VERTICAL ===== */
            .vit1-stepper {
                grid-template-columns: 1fr;
                gap: 18px;
                padding-left: 28px;
                padding-top: 0;
                margin-bottom: 30px;
            }

            /* cacher la barre horizontale */
            .vit1-stepper-line {
                display: none;
            }

            /* barre verticale */
            .vit1-stepper::before {
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                bottom: 0;
                width: 4px;
                background: #e5e7eb;
                border-radius: 999px;
            }

            /* progression (step 1 actif) */
            .vit1-stepper::after {
                content: "";
                position: absolute;
                left: 8px;
                top: 0;
                height: 25%;
                width: 4px;
                background: #d02e28;
                border-radius: 999px;
            }

            .vit1-step {
                justify-content: flex-start;
            }

            .vit1-step-pill {
                padding: 10px 14px;
            }

            /* ===== CONTENT ===== */
            .vit1-grid,
            .vit1-grid--bottom {
                grid-template-columns: 1fr;
                gap: 24px;
                margin-top: 20px;
            }

            .vit1-car {
                width: 280px;
            }

            .vit1-block svg {
                width: 90px;
            }

            /* ===== BUTTONS ===== */
            .vit1-choice {
                width: 100%;
                max-width: 220px;
                text-align: center;
            }

            .vit1-block {
                gap: 10px;
            }

            .vit1-block--small {
                gap: 8px;
            }
        }
    </style>

    <style>
        /* ===============================
               STEP 2 - LOCALISATION
            ================================ */
        .vit2-wrap {
            max-width: 1200px;
            margin: 60px auto;
            padding: 0 20px;
            text-align: center;
        }

        .vit2-header h2 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        .vit2-header span {
            color: #d02e28;
        }

        /* SEARCH */
        .vit2-search {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .vit2-input {
            position: relative;
        }

        .vit2-input i {
            position: absolute;
            top: 50%;
            left: 12px;
            transform: translateY(-50%);
            color: #d02e28;
        }

        .vit2-input input {
            padding: 12px 14px 12px 36px;
            border-radius: 6px;
            border: 1px solid #d02e28;
            width: 260px;
        }

        .vit2-btn-search {
            background: #d02e28;
            color: #fff;
            border: none;
            padding: 12px 20px;
            border-radius: 6px;
            font-weight: 700;
            cursor: pointer;
        }

        /* CENTERS GRID */
        .vit2-centers {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        /* CARD */
        .vit2-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            transition: transform .2s ease;
            height: 300px;
            width: 335px;
        }

        .vit2-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .vit2-card:hover {
            transform: translateY(-6px);
        }

        /* OVERLAY */
        /* .vit2-card-overlay {
                        position: absolute;
                        inset: 0;

                        background: linear-gradient(to top, rgba(208, 46, 40, 0.98), rgba(208, 46, 40, 0));

                        color: #fff;
                        display: flex;
                        flex-direction: column;
                        justify-content: flex-end;
                        padding: 20px;
                    }

                    .vit2-card-overlay h3 {
                        font-size: 16px;
                        font-weight: 800;
                        margin-bottom: 6px;
                    }

                    .vit2-card-overlay p {
                        font-size: 13px;
                        display: flex;
                        align-items: center;
                        gap: 6px;
                    } */

        .vit2-card-overlay {
            position: absolute;
            inset: 0;
            /* background: linear-gradient(to top, rgba(208, 46, 40, .98), rgba(208, 46, 40, 0)); */
            /* background: linear-gradient(to top,
                                rgba(208, 46, 40, 0.98) 0%,
                                rgba(208, 46, 40, 0.85) 35%,
                                rgba(208, 46, 40, 0.45) 65%,
                                rgba(208, 46, 40, 0) 100%); */

            background: linear-gradient(to top,
                    rgba(208, 46, 40, 0.98) 0%,
                    rgba(208, 46, 40, 0.9) 20%,
                    rgba(208, 46, 40, 0.4) 40%,
                    rgba(208, 46, 40, 0) 55%);
            color: #fff;

            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            /* en bas */
            align-items: flex-start;
            /* à gauche */
            text-align: left;
            /* texte à gauche */

            padding: 20px;
        }

        .vit2-card-overlay h3 {
            margin: 0 0 7px -12px;
            font-size: 32px;
        }

        .vit2-card-overlay p {
            margin: -13px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
        }


        /* BADGE */
        .vit2-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background: #FF383C;
            color: #fff;
            font-size: 12px;
            padding: 4px 10px;
            border-radius: 999px;
            z-index: 2;
        }

        /* DISABLED */
        .vit2-disabled {
            opacity: .85;
            pointer-events: none;
        }

        /* SELECTED */
        .vit2-selected {
            outline: 4px solid #d02e28;
            opacity: 1 !important;
            pointer-events: auto;
        }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            .vit2-centers {
                grid-template-columns: 1fr;
            }
        }


        /* ===============================
               STEP 2 – SEARCH MOBILE FIX
            ================================ */
        @media (max-width: 768px) {

            .vit2-search {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-bottom: 30px;
            }

            .vit2-input {
                flex: 1;
                max-width: 240px;
            }

            .vit2-input input {
                width: 100%;
                height: 44px;
                padding: 0 14px 0 36px;
                font-size: 13px;
                border-radius: 8px;
            }

            .vit2-btn-search {
                width: 44px;
                height: 44px;
                padding: 0;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 0;
                /* cacher le texte */
            }

            .vit2-btn-search i {
                font-size: 18px;
            }
        }
    </style>

    <style>
        /* ===============================
               STEP 3 – DISPONIBILITÉS
            ================================ */

        .vit3-wrap {
            max-width: 1100px;
            margin: 60px auto;
            text-align: center;
        }

        .vit3-title {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 30px;
        }

        /* DAYS GRID */
        .vit3-days {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            justify-content: center;
            margin-bottom: 26px;
        }

        /* DAY */
        .vit3-day {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* DATE */
        .vit3-date {
            border: 1px solid #e3e7ec;
            background: #fff;
            border-radius: 10px;
            padding: 16px 10px;
            font-weight: 700;
            cursor: pointer;
        }

        .vit3-date span {
            display: block;
            font-weight: 600;
            opacity: .7;
        }

        /* SLOT */
        .vit3-slot {
            border: 1px solid #e3e7ec;
            background: #fff;
            border-radius: 8px;
            padding: 8px 16px;
            cursor: pointer;
            font-weight: 600;
            flex: 1;
        }

        /* ACTIVE */
        .vit3-date.active,
        .vit3-slot.active {
            background: #d02e28;
            color: #fff;
            border-color: #d02e28;
        }

        /* NAV */
        .vit3-nav {
            display: flex;
            justify-content: center;
            gap: 14px;
        }

        .vit3-arrow {
            border-radius: 999px;
            width: 44px;
            height: 32px;
            border: 1px solid #d02e28;
            background: #fff;
            color: #d02e28;
            font-size: 18px;
            cursor: pointer;
        }

        .vit3-arrow--solid {
            background: #d02e28;
            color: #fff;
        }

        /* ===============================
               MOBILE EXACT (<=768px)
            ================================ */
        @media (max-width: 768px) {

            .vit3-days {
                grid-template-columns: repeat(3, 1fr);
                max-width: 260px;
                margin: 0 auto 20px;
            }

            .vit3-day {
                width: 100%;
            }

            .vit3-date {
                padding: 14px 8px;
                font-size: 14px;
            }

            .vit3-slot {
                width: 100%;
            }

            .vit3-arrow {
                width: 46px;
                height: 34px;
            }
        }
    </style>

    <style>
        /* ===============================
               STEP 4 – COORDONNÉES
            ================================ */

        /* WRAPPER (centrage page) */
        .vit-step.vit-active .vit4-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #vit-step-4.vit-active {
            display: flex;
            /* override le block */
            align-items: center;
            justify-content: center;
            min-height: calc(100vh - 220px);
            padding: 40px 16px;
        }

        /* card */
        .vit4-card {
            width: 100%;
            max-width: 640px;
            background: #d02e28;
            border-radius: 28px;
            padding: 36px 40px 28px;
            color: #fff;
        }

        .vit4-wrap {
            min-height: calc(100vh - 220px);
            padding: 40px 16px;
            justify-content: center;
            
        }


        /* LOGO */
        .vit4-logo {
            display: none;
            justify-content: center;
            margin-bottom: 12px;
        }

        .vit4-logo img {
            max-width: 140px;
        }

        /* TITLE */
        .vit4-title {
            font-size: 26px;
            font-weight: 800;
            text-align: center;
            margin-bottom: 26px;
            line-height: 1.25;
        }

        /* FORM GRID */
        .vit4-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 16px;
        }

        /* INPUTS */
        .vit4-input {
            width: 100%;
            height: 44px;
            border-radius: 6px;
            border: none;
            padding: 0 14px;
            font-size: 13px;
            outline: none;
        }

        .vit4-input::placeholder {
            color: #999;
        }

        /* FULL WIDTH */
        .vit4-full {
            grid-column: span 2;
        }

        /* TEXTAREA */
        .vit4-textarea {
            height: 80px;
            resize: none;
            padding: 10px 14px;
        }

        /* LOAN QUESTION */
        .vit4-question {
            text-align: center;
            font-weight: 700;
            margin: 22px 0 12px;
            font-size: 16px;
        }

        /* YES / NO */
        .vit4-choices {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .vit4-choice {
            min-width: 70px;
            height: 34px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, .6);
            background: transparent;
            color: #fff;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
        }

        .vit4-choice.active {
            background: #fff;
            color: #d02e28;
            border-color: #fff;
        }

        /* SUBMIT */
        .vit4-submit {
            display: block;
            margin: 0 auto 16px;
            background: #fff;
            color: #d02e28;
            border: none;
            border-radius: 8px;
            padding: 10px 22px;
            font-weight: 800;
            font-size: 13px;
            cursor: pointer;
        }

        /* CHECKBOX */
        .vit4-consent {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 11px;
            line-height: 1.4;
            opacity: .9;
        }

        .vit4-consent input {
            margin-top: 2px;
        }

        /* ===============================
               MOBILE (≤ 768px)
            ================================ */
        @media (max-width: 768px) {

            .vit4-logo {
                display: flex;
                justify-content: center;
                margin-bottom: 12px;
            }

            .vit4-wrap {
                align-items: flex-start;
                padding-top: 30px;
            }

            .vit4-card {
                padding: 26px 22px 22px;
                border-radius: 26px;
            }

            .vit4-title {
                font-size: 22px;
                margin-bottom: 22px;
            }

            .vit4-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .vit4-full {
                grid-column: span 1;
            }

            .vit4-input {
                height: 42px;
                font-size: 13px;
            }

            .vit4-textarea {
                height: 90px;
            }

            .vit4-question {
                font-size: 15px;
            }

            .vit4-submit {
                width: 100%;
                max-width: 240px;
            }
        }
    </style>

    <style>
        /* ===============================
               NAVIGATION STEP (PREV / NEXT)
            ================================ */

        .vit-nav {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin: 50px 0 80px;
        }

        .vit-nav-btn {
            min-width: 140px;
            height: 44px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
            transition: all .2s ease;
        }

        /* PREV */
        .vit-prev {
            background: #fff;
            color: #d02e28;
            border: 1px solid #d02e28;
        }

        .vit-prev:disabled {
            opacity: .4;
            cursor: not-allowed;
        }

        /* NEXT */
        .vit-next {
            background: #d02e28;
            color: #fff;
            border: 1px solid #d02e28;
        }

        .vit-next:hover {
            transform: translateY(-1px);
        }

        /* MOBILE */
        @media(max-width:768px) {
            .vit-nav {
                flex-direction: column;
                gap: 12px;
            }

            .vit-nav-btn {
                width: 100%;
                max-width: 260px;
            }
        }

        /* ===============================
               BOUTON SUIVANT – DISABLED
            ================================ */

        .vit-nav-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            pointer-events: none;
        }


        .vit-next:disabled {
            background: #d02e28;
            color: #fff;
            box-shadow: none;
        }





          /* ===== Modal léger (Autres vitrages) ===== */
.vit-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.vit-modal.is-open { display: block; }

.vit-modal__backdrop{
    position:absolute; inset:0;
    background: rgba(0,0,0,0.55);
}

.vit-modal__panel{
    position: relative;
    width: min(520px, calc(100% - 24px));
    margin: 8vh auto 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

.vit-modal__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.vit-modal__head h3{
    margin:0;
    font-size: 16px;
    font-weight: 700;
}

.vit-modal__close{
    border:0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.vit-modal__body{ padding: 14px 16px; }
.vit-modal__desc{ margin: 0 0 12px; color:#666; font-size:14px; }

.vit-modal__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vit-modal__opt{
    border: 1px solid #e7e7e7;
    background: #f7f7f7;
    padding: 12px 10px;
    border-radius: 10px;
    cursor:pointer;
    font-weight: 600;
    font-size: 14px;
}

.vit-modal__opt.is-active{
    border-color: #D02E28;
    background: rgba(208,46,40,0.08);
}

.vit-modal__foot{
    display:flex;
    justify-content:flex-end;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
}

.vit-modal__btn{
    border: 1px solid #ddd;
    background: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    cursor:pointer;
    font-weight: 700;
    font-size: 14px;
}

.vit-modal__btn--solid{
    border-color: #D02E28;
    background: #D02E28;
    color:#fff;
}

.vit-modal__btn:disabled{
    opacity: .5;
    cursor: not-allowed;
}
@media (max-width: 480px){
    .vit-modal__grid{ grid-template-columns: 1fr; }
}




.vit3-slots-wrap {
  column-count: 2;
  column-gap: 12px;
}

.vit3-slots-wrap .vit3-slot {
  display: block;
  width: 100%;
  margin: 0 0 10px;     /* spacing between buttons */
  break-inside: avoid;  /* don’t split items between columns */
}

@media (max-width: 768px) {
  .vit3-slots-wrap {
    column-count: 1;
  }
}