.elementor-3617 .elementor-element.elementor-element-f0f9198{--display:flex;}.elementor-3617 .elementor-element.elementor-element-a040374{width:var( --container-widget-width, 1000px );max-width:1000px;--container-widget-width:1000px;--container-widget-flex-grow:0;}.elementor-3617 .elementor-element.elementor-element-a040374.elementor-element{--align-self:center;}/* Start custom CSS for html, class: .elementor-element-a040374 *//* =========================================================
           RESET GLOBAL
           Le reset garantit une base cohérente sur tous les navigateurs.
           ========================================================= */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* ===== COULEURS PRINCIPALES ===== */
            --couleur-principale: #35a004;          /* Vert principal - couleur de marque de Floryon */
            --couleur-principale-hover: #2d8903;    /* Vert foncé pour l'effet survol des boutons */
            --couleur-principale-foncee: #1f5f3f;   /* Vert très foncé pour l'effet clic */
            --couleur-principale-clair: #f0f7f3;    /* Vert très clair pour les fonds */
            --couleur-principale-tres-clair: #f2fbeb; /* Vert ultra-clair pour les zones sélectionnées */
            --couleur-principale-rgb: 53, 160, 4;   /* RGB de la couleur principale (pour les ombres transparentes) */

            /* ===== COULEURS DES FONDS ===== */
            --couleur-fond-page: #f5f5f5;           /* Gris clair - fond général de la page */
            --couleur-fond-page-2: #e8e8e8;         /* Gris légèrement plus foncé */
            --couleur-fond-carte: #fff;             /* Blanc - fond de la boîte principale */
            --couleur-fond-secondaire: #f9f9f9;     /* Gris très clair - fond des cartes */

            /* ===== COULEURS DES BORDURES ===== */
            --couleur-bordure: #ddd;                /* Bordure par défaut (grise moyennement claire) */
            --couleur-bordure-forte: #e0e0e0;       /* Bordure plus visible */
            --couleur-bordure-moyenne: #d0d0d0;     /* Bordure moyenne */
            --couleur-progress: #c6c6c6;            /* Couleur des barres de progression inactives */

            /* ===== COULEURS DU TEXTE ===== */
            --couleur-texte: #111;                  /* Noir presque pur - texte principal */
            --couleur-texte-secondaire: #333;       /* Gris très foncé - texte secondaire */
            --couleur-texte-muted: #666;            /* Gris moyen - texte atténué (sous-titres) */
            --couleur-texte-adouci: #7c7c7c;        /* Gris - titres de section */

            /* ===== OMBRES ===== */
            /* Les ombres utilisent RGBA pour avoir un effet de transparence */
            /* La valeur 0.22 = 22% d'opacité, ce qui crée une ombre subtile */
            --ombre-principale: 0 5px 12px rgba(var(--couleur-principale-rgb), 0.22);
            --ombre-principale-forte: 0 6px 14px rgba(var(--couleur-principale-rgb), 0.28);
            --ombre-principale-soft: 0 4px 12px rgba(var(--couleur-principale-rgb), 0.1);
        }

        /* =========================================================
           STRUCTURE GENERALE DE LA PAGE
           Cette base reprend l'esthétique principale des maquettes.
           ========================================================= */
        body {
            /* ===== TYPOGRAPHIE ===== */
            font-family: 'Roboto', sans-serif;       /* Police sans-serif moderne et lisible */

            /* ===== FOND ET MISE EN PAGE ===== */
            background: linear-gradient(135deg, var(--couleur-fond-page) 0%, var(--couleur-fond-page-2) 100%);
            /* gradient (135°) = dégradé diagonal. 0% = couleur 1 au haut-gauche, 100% = couleur 2 au bas-droit */

            min-height: auto;                        /* Ajuste la hauteur automatiquement selon le contenu */

            /* Centrer le contenu à l'écran */
            display: block;                          /* Mode block pour Elementor */
            text-align: center;                      /* Centre le texte horizontalement */
            padding: 20px;                           /* Espacement extérieur (marge vers les bords) */
        }

        .container {
            background: var(--couleur-fond-carte);   /* Fond blanc */
            border-radius: 8px;                      /* Coins arrondis (8px de rayon) */
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); /* Ombre pour donner du relief à la boîte */
            max-width: 1000px;                       /* Largeur maximale - empêche que la boîte soit trop large */
            width: 100%;                             /* Sur petit écran, occupe 100% de la largeur disponible */
            padding: 15px 40px 50px;                 /* Espacement intérieur (haut-bas: 15px/50px, gauche-droite: 40px) */
            margin: 0 auto;                          /* Centre horizontalement */
            height: auto;                            /* Hauteur automatique */
            text-align: left;                        /* Réinitialise text-align du body pour le texte interne */
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        .logo {
            margin-bottom: 4px;
        }

        .logo img {
            max-width: 200px;
            height: auto;
        }

        .subtitle {
            color: var(--couleur-texte-muted);
            font-size: 14px;
            font-weight: 600;
        }

        /* Gestion d'affichage des étapes */
        .step {
            display: none;                           /* Par défaut, les étapes sont cachées */
        }

        .step.active {
            display: block;                          /* Seule l'étape avec .active est visible */
        }

        /* =========================================================
           ELEMENTS COMMUNS UTILISES PAR PLUSIEURS ETAPES
           ========================================================= */
        .progress-container {
            display: flex;                           /* Mode flexbox = arrange les éléments en ligne */
            align-items: center;                     /* Centre verticalement les barres de progression */
            justify-content: center;                 /* Centre horizontalement */
            gap: 8px;                                /* Espacement entre les barres (8px) */
            margin-bottom: 8px;                      /* Espace sous ce conteneur avant le titre */
        }

        .progress-bar {
            width: 40px;
            height: 4px;
            background: #ddd;
            border-radius: 2px;
        }

        .progress-bar.active {
            background: #2d8659;
        }

        .progress-text {
            color: #666;
            font-size: 14px;
            font-weight: 600;
            min-width: 30px;
            text-align: center;
        }

        .section-title {
            text-align: center;
            color: #7c7c7c;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        .section-title h2 {
            margin: 0;
            font-size: inherit;
        }

        .section-subtitle {
            font-size: 20px;
            font-weight: 800;
            color: var(--couleur-texte);
            margin-bottom: 30px;
        }

        .button-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
            padding-top: 8px;
        }

        .btn-prev {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: none;
            background: transparent;
            color: var(--couleur-texte-muted);
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            padding: 8px 0;
            user-select: none;
            -webkit-user-select: none;
            caret-color: transparent;
            outline: none;
            box-shadow: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            transition: color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
        }

        .btn-prev:hover,
        .btn-prev:active,
        .btn-prev:focus,
        .btn-prev:focus-visible {
            background: transparent !important;
            outline: none;
            box-shadow: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border: none;
        }

        .btn-prev .arrow {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-left: 3px solid var(--couleur-texte);
            border-bottom: 3px solid var(--couleur-texte);
            transform: rotate(45deg) translateY(-1px);
            transform-origin: center;
            flex: 0 0 14px;
            margin-right: 2px;
            font-size: 0;
            line-height: 0;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }

        .btn-prev:hover {
            color: var(--couleur-texte);
            transform: scale(1.02);
        }

        .btn-prev:hover .arrow {
            border-left-color: var(--couleur-principale);
            border-bottom-color: var(--couleur-principale);
            transform: rotate(45deg) translateY(-1px) translateX(-1px);
        }

        .btn-next,
        .btn-suivant {
            background: var(--couleur-principale);
            color: var(--couleur-fond-carte);
            border: none;
            border-radius: 18px;
            padding: 14px 42px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            box-shadow: var(--ombre-principale);
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
            user-select: none;
            -webkit-user-select: none;
            caret-color: transparent;
        }

        .btn-suivant:disabled,
        .btn-next:disabled {
            background: #ccc;
            color: #999;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.6;
        }

        .btn-suivant:disabled:hover,
        .btn-next:disabled:hover {
            background: #ccc;
            transform: none;
            box-shadow: none;
        }

        .btn-next:hover,
        .btn-suivant:hover {
            background: var(--couleur-principale-hover);
            transform: translateY(-1px);
            box-shadow: var(--ombre-principale-forte);
        }

        .btn-next:active,
        .btn-suivant:active {
            transform: translateY(0);
            box-shadow: var(--ombre-principale);
        }

        /* =========================================================
           ETAPE 1 - CHOIX DE LA GAMME
           ========================================================= */
        #step-1 .products-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        #step-1 .product-card {
            border: 2px solid var(--couleur-bordure-forte);
            border-radius: 12px;
            padding: 24px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            background: var(--couleur-fond-secondaire);
            user-select: none;
            -webkit-user-select: none;
            caret-color: transparent;
            -webkit-tap-highlight-color: transparent;
        }

        #step-1 .product-card:hover {
            border-color: var(--couleur-principale);
            box-shadow: var(--ombre-principale-soft);
            transform: translateY(-2px);
        }

        #step-1 .product-card.selected {
            border-color: var(--couleur-principale);
            background: var(--couleur-principale-clair);
        }

        #step-1 .product-image {
            width: 140px;
            height: 140px;
            border-radius: 8px;
            margin: 0 auto 16px;
            overflow: hidden;
        }

        #step-1 .product-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
        }

        #step-1 .product-name {
            font-size: 18px;
            font-weight: 700;
            color: var(--couleur-texte-secondaire);
            margin-bottom: 8px;
        }

        #step-1 .product-price {
            color: var(--couleur-principale);
            font-size: 14px;
            font-weight: 700;
        }

        #step-1 .button-container {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        #step-1 .btn-suivant {
            border-radius: 28px;
            padding: 14px 48px;
        }

        /* =========================================================
           ETAPE 2 - CHOIX DU SOL
           ========================================================= */
        #step-2 .step-card {
            min-height: 610px;
            display: flex;
            flex-direction: column;
            padding: 0 4px 4px;
        }

        #step-2 .progress-container {
            gap: 8px;
            margin-bottom: 8px;
        }

        #step-2 .progress-bar {
            width: 40px;
            border-radius: 2px;
            background: #ddd;
        }

        #step-2 .progress-bar.active {
            background: #2d8659;
        }

        #step-2 .progress-text {
            color: #666;
            font-size: 14px;
            font-weight: 700;
            min-width: 34px;
            text-align: right;
        }

        #step-2 .section-title {
            text-align: center;
            color: #7c7c7c;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        #step-2 .section-subtitle {
            text-align: left;
            font-size: 20px;
            font-weight: 800;
            color: var(--couleur-texte);
            margin-bottom: 104px;
        }

        #step-2 .options-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 54px;
            margin-top: auto;
            margin-bottom: 70px;
        }

        #step-2 .option-card {
            min-height: 180px;
            border: 1.5px solid var(--couleur-bordure-moyenne);
            border-radius: 18px;
            background: var(--couleur-fond-secondaire);
            padding: 26px 18px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }

        #step-2 .option-card:hover {
            transform: translateY(-2px);
            border-color: var(--couleur-principale);
            box-shadow: var(--ombre-principale-soft);
        }

        #step-2 .option-card.selected {
            border-color: var(--couleur-principale);
            background: var(--couleur-principale-tres-clair);
        }

        #step-2 .option-title {
            font-size: 22px;
            font-weight: 800;
            color: var(--couleur-texte);
            margin-bottom: 34px;
            user-select: none;
        }

        #step-2 .option-description {
            font-size: 12px;
            line-height: 1.35;
            font-weight: 700;
            color: var(--couleur-texte-secondaire);
            user-select: none;
        }

        #step-2 .btn-next {
            background: var(--couleur-principale);
            box-shadow: var(--ombre-principale);
        }

        #step-2 .btn-next:disabled {
            background: #ccc;
            color: #999;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.6;
        }

        #step-2 .btn-next:hover {
            background: var(--couleur-principale-hover);
        }

        #step-2 .btn-next:disabled:hover {
            background: #ccc;
            box-shadow: none;
        }

        /* =========================================================
           ETAPE 3 - DIMENSIONS
           ========================================================= */
        #step-3 .section-title {
            text-align: center;
            color: #7c7c7c;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        #step-3 .section-title h2 {
            margin: 0;
        }

        #step-3 .section-subtitle {
            font-size: 20px;
            font-weight: 800;
            color: var(--couleur-texte);
            margin-bottom: 30px;
        }

        #step-3 .rouleau-container {
            /* Conteneur pour chaque bloc "rouleau" avec bordure visible */
            border: 2px solid var(--couleur-bordure-forte);  /* Bordure grise visible */
            border-radius: 12px;                     /* Coins arrondis */
            padding: 24px;                           /* Espacement intérieur */
            margin-bottom: 24px;                     /* Espace sous ce conteneur avant le suivant */
            background: var(--couleur-fond-secondaire); /* Fond gris clair */
        }

        #step-3 .rouleau-title-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            position: relative;
        }

        #step-3 .rouleau-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--couleur-texte-secondaire);
        }

        #step-3 .delete-rouleau-btn {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            font-size: 18px;
            padding: 4px 8px;
            transition: color 0.2s ease;
            position: absolute;
            right: 0;
        }

        #step-3 .delete-rouleau-btn:hover {
            color: #d9534f;
        }

        #step-3 .form-group {
            margin-bottom: 20px;
        }

        #step-3 .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--couleur-texte-secondaire);
            font-size: 14px;
        }

        #step-3 .form-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        #step-3 select {
            padding: 10px 12px;                      /* Espacement intérieur du dropdown */
            border: 1px solid var(--couleur-bordure); /* Bordure grise fine */
            border-radius: 6px;                      /* Coins légèrement arrondis */
            font-size: 14px;
            cursor: pointer;                         /* Curseur souris change en pointeur */
            background: var(--couleur-fond-carte);   /* Fond blanc */
            flex: 1;                                 /* Remplit l'espace disponible en flexbox */
            min-width: 150px;                        /* Largeur minimale */
        }

        #step-3 select:focus {
            /* Style quand le dropdown est sélectionné (utilisateur clique dedans) */
            outline: none;                           /* Enlève le contour par défaut du navigateur */
            border-color: var(--couleur-principale); /* Bordure devient verte */
            box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1); /* Ombre verte subtile */
        }

        #step-3 .slider-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        #step-3 .slider-input-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            width: 100%;
            position: relative;
        }

        #step-3 .slider-input-wrapper input[type="range"] {
            flex: 1;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: var(--couleur-principale);
            outline: none;
            -webkit-appearance: none;
        }

        #step-3 .slider-input-wrapper input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--couleur-principale);
            cursor: pointer;
            transition: background 0.3s ease;
        }

        #step-3 .slider-input-wrapper input[type="range"]::-webkit-slider-thumb:hover {
            background: var(--couleur-principale-hover);
        }

        #step-3 .slider-input-wrapper input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: var(--couleur-principale);
            cursor: pointer;
            border: none;
            transition: background 0.3s ease;
        }

        #step-3 .slider-input-wrapper input[type="range"]::-moz-range-thumb:hover {
            background: var(--couleur-principale-hover);
        }

        #step-3 .slider-value {
            font-weight: 600;
            color: var(--couleur-principale);
            font-size: 14px;
            min-width: 56px;
        }

        #step-3 .manual-input-container {
            display: none;
            position: absolute;
            background: var(--couleur-fond-carte);
            border: 2px solid var(--couleur-bordure);
            border-radius: 6px;
            padding: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            top: 100%;
            right: 0;
            margin-top: 8px;
        }

        #step-3 .manual-input-container.active {
            display: block;
        }

        #step-3 .manual-input-container input[type="number"] {
            width: 80px;
            padding: 6px 8px;
            border: 1px solid var(--couleur-bordure);
            border-radius: 4px;
            font-size: 14px;
        }

        #step-3 .manual-input-btn {
            background: var(--couleur-principale);
            color: var(--couleur-fond-carte);
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 8px;
        }

        #step-3 .toggle-manual-btn {
            background: none;
            border: 1px solid var(--couleur-bordure);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: var(--couleur-texte-muted);
            cursor: pointer;
            margin-left: 8px;
            transition: all 0.2s ease;
        }

        #step-3 .toggle-manual-btn.active {
            background: var(--couleur-principale-clair);
            border-color: var(--couleur-principale);
            color: var(--couleur-principale);
        }

        #step-3 .surface-display {
            background: var(--couleur-principale-clair);
            border: 1px solid var(--couleur-principale);
            border-radius: 6px;
            padding: 12px;
            margin-top: 12px;
            text-align: center;
            font-size: 14px;
            color: var(--couleur-texte-secondaire);
        }

        #step-3 .surface-display .value {
            font-weight: 600;
            color: var(--couleur-principale);
            font-size: 16px;
        }

        #step-3 .add-rouleau-btn {
            background: var(--couleur-principale);
            color: var(--couleur-fond-carte);
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 24px;
        }

        #step-3 .add-rouleau-btn:hover {
            background: var(--couleur-principale-foncee);
            transform: translateY(-2px);
            box-shadow: var(--ombre-principale-forte);
        }

        #step-3 .total-surface {
            background: var(--couleur-principale-clair);
            border: 2px solid var(--couleur-principale);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            margin-bottom: 24px;
        }

        #step-3 .total-surface-label {
            font-size: 14px;
            color: var(--couleur-texte-muted);
            font-weight: 500;
            margin-bottom: 8px;
        }

        #step-3 .total-surface-value {
            font-size: 28px;
            font-weight: 600;
            color: var(--couleur-principale);
        }

        #step-3 .btn-suivant {
            background: var(--couleur-principale);
            border-radius: 28px;
            padding: 14px 48px;
        }

        #step-3 .btn-suivant:disabled {
            background: #ccc;
            color: #999;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.6;
        }

        #step-3 .btn-suivant:hover {
            background: var(--couleur-principale-foncee);
            box-shadow: var(--ombre-principale-forte);
        }

        #step-3 .btn-suivant:disabled:hover {
            background: #ccc;
            box-shadow: none;
        }

        /* =========================================================
           ETAPE 4 - ACCESSOIRES
           ========================================================= */
        #step-4 .section-title {
            text-align: center;
            color: #7c7c7c;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        #step-4 .section-title h2 {
            margin: 0;
        }

        #step-4 .section-description {
            font-size: 14px;
            color: #666;
            margin-bottom: 30px;
            text-align: center;
        }

        #step-4 .accessories-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 40px;
        }

        #step-4 .accessories-table thead {
            border-bottom: 2px solid #333;
        }

        #step-4 .accessories-table th {
            padding: 16px 12px;
            text-align: left;
            font-weight: 600;
            color: #333;
            font-size: 14px;
            background: transparent;
        }

        #step-4 .accessories-table th:nth-child(2),
        #step-4 .accessories-table th:nth-child(3),
        #step-4 .accessories-table th:nth-child(4),
        #step-4 .accessories-table td:nth-child(2),
        #step-4 .accessories-table td:nth-child(3),
        #step-4 .accessories-table td:nth-child(4) {
            text-align: center;
        }

        #step-4 .accessories-table tbody tr {
            border-bottom: 1px solid #e0e0e0;
        }

        #step-4 .accessories-table tbody tr:last-child {
            border-bottom: 2px solid #333;
        }

        #step-4 .accessories-table tfoot tr {
            border-top: 2px solid #333;
        }

        #step-4 .accessories-table td,
        #step-4 .accessories-table tfoot td {
            padding: 16px 12px;
            font-size: 14px;
            color: #333;
        }

        #step-4 .product-name {
            font-weight: 500;
        }

        #step-4 .product-description {
            font-size: 12px;
            color: #999;
            font-weight: 400;
        }

        #step-4 .price {
            font-weight: 600;
            color: #333;
        }

        #step-4 .checkbox-cell {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #step-4 .checkbox-cell input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        #step-4 .quantity-input {
            width: 50px;
            padding: 6px;
            border: 1px solid var(--couleur-bordure);
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
        }

        #step-4 .quantity-input:focus {
            outline: none;
            border-color: var(--couleur-principale);
            box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1);
        }

        #step-4 .btn-suivant {
            background: var(--couleur-principale);
            border-radius: 28px;
            padding: 14px 48px;
        }

        #step-4 .btn-suivant:hover {
            background: var(--couleur-principale-foncee);
            box-shadow: var(--ombre-principale-forte);
        }

        /* =========================================================
           ETAPE 5 - INFORMATIONS DE CONTACT
           ========================================================= */
        #step-5 .section-title {
            text-align: center;
            color: #7c7c7c;
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 14px;
        }

        #step-5 .section-title h2 {
            margin: 0;
        }

        #step-5 .section-subtitle {
            font-size: 20px;
            font-weight: 800;
            color: var(--couleur-texte);
            margin-bottom: 30px;
            text-align: left;
        }

        #step-5 .contact-form {
            max-width: 600px;
            margin: 0 auto 40px;
        }

        #step-5 .form-group {
            display: flex;
            align-items: flex-start;
            margin-bottom: 24px;
            gap: 24px;
        }

        #step-5 .form-group label {
            flex: 0 0 auto;
            width: 120px;
            font-weight: 600;
            color: var(--couleur-texte-secondaire);
            font-size: 14px;
            padding-top: 8px;
            text-align: right;
        }

        #step-5 .form-group-input {
            flex: 1;
            position: relative;
        }

        #step-5 .form-group input[type="text"],
        #step-5 .form-group input[type="email"],
        #step-5 .form-group input[type="tel"] {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--couleur-bordure);
            border-radius: 4px;
            font-size: 14px;
            font-family: inherit;
            background: var(--couleur-fond-carte);
        }

        #step-5 .form-group input[type="text"]:focus,
        #step-5 .form-group input[type="email"]:focus,
        #step-5 .form-group input[type="tel"]:focus {
            outline: none;
            border-color: var(--couleur-principale);
            box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb), 0.1);
        }

        #step-5 .consent-group {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        #step-5 .consent-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            margin-top: 2px;
            flex: 0 0 auto;
            accent-color: var(--couleur-principale);
        }

        #step-5 .consent-group label {
            font-size: 13px;
            color: var(--couleur-texte-secondaire);
            cursor: pointer;
            flex: 1;
            line-height: 1.5;
            text-align: left;
            width: auto;
            padding-top: 0;
        }

        #step-5 .consent-group label a {
            color: var(--couleur-principale);
            text-decoration: none;
            font-weight: 700;
        }

        #step-5 .consent-group label a:hover {
            text-decoration: underline;
        }

        #step-5 .button-row {
            gap: 12px;
        }

        #step-5 .btn-suivant {
            background: var(--couleur-principale);
            border-radius: 28px;
            padding: 14px 48px;
        }

        #step-5 .btn-suivant:disabled {
            background: #ccc;
            color: #999;
            cursor: not-allowed;
            box-shadow: none;
            opacity: 0.6;
        }

        #step-5 .btn-suivant:hover {
            background: var(--couleur-principale-foncee);
            box-shadow: var(--ombre-principale-forte);
        }

        #step-5 .btn-suivant:disabled:hover {
            background: #ccc;
            box-shadow: none;
        }

        /* =========================================================
        /* =========================================================
           RESPONSIVE GLOBAL - TABLETTE
           Ajustements pour tablette (max-width: 768px).
           ========================================================= */
        @media (max-width: 768px) {
            .logo img {
                max-width: 140px;
            }

            .container {
                max-width: 95%;
                padding: 40px 24px;
            }

            .section-title h2 {
                font-size: 24px;
            }

            #step-1 .products-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 16px;
            }

            #step-2 .step-card {
                min-height: 560px;
            }

            #step-2 .progress-bar {
                width: 58px;
            }

            #step-2 .section-subtitle {
                font-size: 18px;
                margin-bottom: 80px;
            }

            #step-2 .options-grid {
                gap: 16px;
                margin-bottom: 60px;
            }

            #step-2 .option-card {
                min-height: 180px;
                padding: 22px 14px;
            }

            #step-2 .option-title {
                font-size: 18px;
                margin-bottom: 28px;
            }

            #step-3 .button-row,
            #step-4 .button-row {
                flex-direction: column;
            }

            #step-4 .accessories-table th,
            #step-4 .accessories-table td {
                padding: 12px 8px;
                font-size: 12px;
            }

            #step-5 .form-group {
                flex-direction: column;
                gap: 8px;
            }

            #step-5 .form-group label {
                width: auto;
                text-align: left;
                padding-top: 0;
            }

            #step-5 .button-row {
                flex-direction: column;
            }

            #step-5 .btn-prev,
            #step-5 .btn-suivant {
                width: 100%;
            }
        }

        /* =========================================================
           ETAPE 6 - DEVIS FINAL
           ========================================================= */
        #step-6 .devis-main-title {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            color: #111;
            margin-bottom: 40px;
            margin-top: 20px;
        }

        #step-6 .devis-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        #step-6 .devis-logo {
            flex: 0 0 auto;
        }

        #step-6 .devis-logo img {
            max-width: 300px;
            height: auto;
        }

        #step-6 .devis-info {
            flex: 1;
            text-align: right;
        }

        #step-6 .devis-info p {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.6;
        }

        #step-6 .devis-date {
            font-weight: 600;
            color: #111;
        }

        #step-6 .devis-table {
            width: 100%;
            margin-bottom: 0;
            border-collapse: collapse;
        }

        #step-6 .devis-table thead {
            border-bottom: 2px solid #333;
            background: transparent;
        }

        #step-6 .devis-table th {
            padding: 16px 0;
            text-align: left;
            font-weight: 600;
            color: #111;
            font-size: 14px;
        }

        #step-6 .devis-table th:nth-child(2),
        #step-6 .devis-table th:nth-child(3),
        #step-6 .devis-table th:nth-child(4) {
            text-align: center;
        }

        #step-6 .devis-table tbody tr {
            border-bottom: 1px solid #e0e0e0;
        }

        #step-6 .devis-table tbody tr:last-child {
            border-bottom: 2px solid #333;
        }

        #step-6 .devis-table td {
            padding: 14px 0;
            font-size: 14px;
            color: #333;
        }

        #step-6 .devis-table td:nth-child(2),
        #step-6 .devis-table td:nth-child(3),
        #step-6 .devis-table td:nth-child(4) {
            text-align: center;
        }

        #step-6 .product-name {
            font-weight: 500;
            color: #111;
        }

        #step-6 .product-description {
            font-size: 13px;
            color: #999;
            margin-top: 4px;
        }

        #step-6 .devis-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            font-size: 16px;
            font-weight: 700;
            background: linear-gradient(135deg, #c8f7c5 0%, #a8f0a0 100%);
            border-radius: 6px;
            color: #2d8659;
            margin-bottom: 30px;
        }

        #step-6 .devis-total-label {
            text-align: right;
        }

        #step-6 .devis-total-value {
            color: #2d8659;
            min-width: 120px;
            text-align: center;
        }

        #step-6 .devis-note {
            padding: 16px;
            border-radius: 6px;
            font-size: 13px;
            color: #666;
            text-align: center;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        @media (max-width: 768px) {
            #step-6 .devis-logo img {
                max-width: 140px;
            }

            #step-6 .devis-header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            #step-6 .devis-info {
                width: 100%;
                text-align: center;
                margin-top: 20px;
            }

            #step-6 .devis-table th,
            #step-6 .devis-table td {
                padding: 10px 6px;
                font-size: 12px;
            }

            #step-6 .devis-total {
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }

            #step-6 .devis-total-label {
                text-align: center;
            }
        }

        /* =========================================================
           RESPONSIVE MOBILE
           Ajustements pour mobile (max-width: 480px).
           ========================================================= */
        @media (max-width: 480px) {
            body {
                padding: 12px;
            }

            .logo img {
                max-width: 110px;
            }

            .container {
                max-width: 100%;
                padding: 16px 12px 30px;
            }

            .section-title h2 {
                font-size: 20px;
            }

            .section-subtitle {
                font-size: 14px;
            }

            #step-1 .products-grid,
            #step-2 .options-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            #step-1 .product-image {
                width: 120px;
                height: 120px;
            }

            #step-1 .product-card {
                padding: 16px 12px;
            }

            #step-2 .step-card {
                min-height: auto;
            }

            #step-2 .option-card {
                min-height: 140px;
                padding: 18px 10px;
            }

            #step-2 .option-title {
                font-size: 16px;
                margin-bottom: 12px;
            }

            #step-2 .option-description {
                font-size: 12px;
            }

            .button-row {
                gap: 8px;
                flex-direction: column;
            }

            .btn-prev,
            .btn-next,
            .btn-suivant {
                width: 100%;
                padding: 12px 16px;
                font-size: 14px;
            }

            #step-3 .rouleau-container {
                padding: 12px 0;
            }

            #step-4 .accessories-table {
                font-size: 11px;
            }

            #step-4 .accessories-table th,
            #step-4 .accessories-table td {
                padding: 8px 4px;
            }

            #step-5 .form-group {
                margin-bottom: 12px;
            }

            #step-5 .form-group input {
                padding: 8px 12px;
                font-size: 14px;
            }

            #step-6 .devis-logo img {
                max-width: 110px;
            }

            #step-6 .devis-table {
                font-size: 11px;
            }

            #step-6 .devis-table th,
            #step-6 .devis-table td {
                padding: 8px 4px;
            }

            #step-6 .devis-total {
                padding: 12px 16px;
                font-size: 14px;
            }

            .progress-text {
                font-size: 12px;
            }
        }/* End custom CSS */