{"id":1094,"date":"2025-01-11T11:25:28","date_gmt":"2025-01-11T10:25:28","guid":{"rendered":"https:\/\/alaska-france.fr\/boutique\/?page_id=1094"},"modified":"2025-12-18T17:28:02","modified_gmt":"2025-12-18T16:28:02","slug":"demande-devis","status":"publish","type":"page","link":"https:\/\/alaska-france.fr\/boutique\/demande-devis\/","title":{"rendered":"demande-devis"},"content":{"rendered":"    <style>\r\n        :root {\r\n            --wcdevis-primary-color: #0d74ba;\r\n            --wcdevis-primary-dark-color: #0A58CA;\r\n            --wcdevis-success-color: #198754;\r\n            --wcdevis-danger-color: #dc3545;\r\n            --wcdevis-warning-color: #fff3cd;\r\n            --wcdevis-light-bg-color: #f8f9fa;\r\n            --wcdevis-soft-bg-color: #f4f7fb;\r\n            --wcdevis-border-color: #dee2e6;\r\n            --wcdevis-border-strong: rgba(26, 42, 58, 0.14);\r\n            --wcdevis-text-color: #212529;\r\n            --wcdevis-text-light-color: #6c757d;\r\n            --wcdevis-font-family: &#039;Roboto&#039;, sans-serif;\r\n            --wcdevis-border-radius: 12px;\r\n            --wcdevis-border-radius-lg: 18px;\r\n            --wcdevis-shadow: 0 18px 45px rgba(14, 24, 39, 0.08);\r\n            --wcdevis-shadow-soft: 0 10px 26px rgba(14, 24, 39, 0.06);\r\n        }\r\n        \r\n        \/* Base Container *\/\r\n        .wcdevis-main-container {\r\n            font-family: var(--wcdevis-font-family);\r\n            font-size: 1em;\r\n            max-width: 980px;\r\n            width: 100%;\r\n            margin: 34px auto;\r\n            background:\r\n                radial-gradient(circle at top right, rgba(13,110,253,.06), transparent 260px),\r\n                linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);\r\n            border: 1px solid rgba(26,42,58,.08);\r\n            border-radius: 28px;\r\n            box-shadow: var(--wcdevis-shadow);\r\n            padding: 2.2em;\r\n            box-sizing: border-box;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        .wcdevis-main-container * {\r\n            box-sizing: border-box;\r\n        }\r\n        .wcdevis-main-container::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0 auto auto 0;\r\n            width: 100%;\r\n            height: 6px;\r\n            background: linear-gradient(90deg, var(--wcdevis-primary-color), #65a8ff);\r\n        }\r\n\r\n        \/* Hero Section *\/\r\n        .wcdevis-form-hero {\r\n            display: grid;\r\n            grid-template-columns: minmax(0, 1.45fr) minmax(260px, .95fr);\r\n            gap: 18px;\r\n            align-items: stretch;\r\n            margin: 0 0 24px;\r\n        }\r\n        .wcdevis-hero-card,\r\n        .wcdevis-hero-side {\r\n            background: #fff;\r\n            border: 1px solid var(--wcdevis-border-color);\r\n            border-radius: 22px;\r\n            box-shadow: var(--wcdevis-shadow-soft);\r\n        }\r\n        .wcdevis-hero-card {\r\n            padding: 22px 22px 18px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        .wcdevis-hero-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -40px;\r\n            right: -40px;\r\n            width: 160px;\r\n            height: 160px;\r\n            border-radius: 50%;\r\n            background: radial-gradient(circle, rgba(13,110,253,.12) 0%, rgba(13,110,253,0) 70%);\r\n            pointer-events: none;\r\n        }\r\n        .wcdevis-eyebrow {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 7px 12px;\r\n            border-radius: 999px;\r\n            background: rgba(13,110,253,.08);\r\n            color: var(--wcdevis-primary-color);\r\n            font-size: .88em;\r\n            font-weight: 700;\r\n            margin-bottom: 12px;\r\n        }\r\n        .wcdevis-hero-card h1 {\r\n            margin: 0 0 12px;\r\n            font-size: 1.45em;\r\n            font-weight: 700;\r\n            line-height: 1.25;\r\n            color: var(--wcdevis-text-color);\r\n        }\r\n        .wcdevis-hero-card p {\r\n            margin: 0 0 10px;\r\n            color: var(--wcdevis-text-color);\r\n            line-height: 1.6;\r\n            font-size: 1em;\r\n        }\r\n        .wcdevis-hero-card p:last-child {\r\n            margin-bottom: 0;\r\n        }\r\n        .wcdevis-hero-side {\r\n            padding: 18px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 14px;\r\n            justify-content: center;\r\n        }\r\n        .wcdevis-side-title {\r\n            font-size: .9em;\r\n            font-weight: 700;\r\n            letter-spacing: .02em;\r\n            text-transform: uppercase;\r\n            color: var(--wcdevis-text-light-color);\r\n        }\r\n        .wcdevis-progress-bar {\r\n            width: 100%;\r\n            height: 10px;\r\n            border-radius: 999px;\r\n            background: #edf2f7;\r\n            overflow: hidden;\r\n        }\r\n        .wcdevis-progress-bar span {\r\n            display: block;\r\n            width: 0;\r\n            height: 100%;\r\n            border-radius: inherit;\r\n            background: linear-gradient(90deg, var(--wcdevis-primary-color), #76b4ff);\r\n            transition: width .25s ease;\r\n        }\r\n        .wcdevis-progress-label {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            gap: 10px;\r\n            font-size: .95em;\r\n            color: var(--wcdevis-text-light-color);\r\n        }\r\n        .wcdevis-progress-label strong {\r\n            color: var(--wcdevis-text-color);\r\n        }\r\n\r\n        \/* Step Chips *\/\r\n        .wcdevis-step-chips {\r\n            display: grid;\r\n            grid-template-columns: repeat(4, minmax(0, 1fr));\r\n            gap: 10px;\r\n            margin: 0 0 24px;\r\n        }\r\n        .wcdevis-step-chip {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            padding: 12px 14px;\r\n            border: 1px solid var(--wcdevis-border-color);\r\n            border-radius: 16px;\r\n            background: #fff;\r\n            color: var(--wcdevis-text-light-color);\r\n            font-size: .92em;\r\n            transition: .2s ease;\r\n            box-shadow: 0 6px 18px rgba(18, 35, 52, 0.04);\r\n        }\r\n        .wcdevis-step-chip strong {\r\n            color: var(--wcdevis-text-color);\r\n            display: block;\r\n            font-size: .98em;\r\n        }\r\n        .wcdevis-step-chip i {\r\n            width: 36px;\r\n            height: 36px;\r\n            border-radius: 50%;\r\n            display: inline-flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            background: var(--wcdevis-soft-bg-color);\r\n            color: var(--wcdevis-primary-color);\r\n            flex: 0 0 auto;\r\n        }\r\n        .wcdevis-step-chip.is-active {\r\n            border-color: rgba(13,110,253,.4);\r\n            background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.02));\r\n            transform: translateY(-1px);\r\n        }\r\n        .wcdevis-step-chip.is-complete {\r\n            border-color: rgba(25,135,84,.22);\r\n            background: rgba(25,135,84,.06);\r\n        }\r\n        .wcdevis-step-chip.is-complete i {\r\n            background: rgba(25,135,84,.12);\r\n            color: var(--wcdevis-success-color);\r\n        }\r\n\r\n        \/* General UI Elements *\/\r\n        .wcdevis-items-preview,\r\n        .wcdevis-request-type-selector label,\r\n        .wcdevis-modern-form section {\r\n            background: rgba(255,255,255,.94);\r\n            border: 1px solid var(--wcdevis-border-color);\r\n            box-shadow: 0 10px 28px rgba(16, 31, 46, .04);\r\n            border-radius: 22px;\r\n        }\r\n        .wcdevis-items-preview {\r\n            margin-bottom: 1.6em;\r\n            padding: 1.2em;\r\n            border-radius: 18px;\r\n        }\r\n        .wcdevis-items-preview h3 {\r\n            margin: 0 0 .65em;\r\n            font-size: 1.04em;\r\n        }\r\n        .devis-table { width:100%; border-collapse:collapse; }\r\n        .devis-table th, .devis-table td { text-align:left; padding:.8em .7em; border-bottom:1px solid var(--wcdevis-border-color); }\r\n        .devis-table button.remove-from-devis { background:0 0; border:none; color:var(--wcdevis-danger-color); cursor:pointer; font-size:1.2em; }\r\n        \r\n        .wcdevis-request-type-selector {\r\n            display:flex;\r\n            gap:1em;\r\n            margin-bottom:1.35em;\r\n        }\r\n        .wcdevis-request-type-selector label {\r\n            flex:1;\r\n            padding:1.15em;\r\n            border-radius:18px;\r\n            cursor:pointer;\r\n            text-align:center;\r\n            transition: all .22s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        .wcdevis-request-type-selector label::before {\r\n            content: '';\r\n            position: absolute;\r\n            inset: 0 0 auto 0;\r\n            height: 4px;\r\n            background: transparent;\r\n            transition: background .2s ease;\r\n        }\r\n        .wcdevis-request-type-selector label:hover { transform:translateY(-2px); }\r\n        .wcdevis-request-type-selector label.active {\r\n            border-color:var(--wcdevis-primary-color);\r\n            background-color:#fff;\r\n            box-shadow: inset 0 0 0 1px rgba(13, 110, 253, .15), 0 16px 32px rgba(13,110,253,.08);\r\n        }\r\n        .wcdevis-request-type-selector label.active::before {\r\n            background: linear-gradient(90deg, var(--wcdevis-primary-color), #7ab6ff);\r\n        }\r\n        .wcdevis-request-type-selector input[type=radio] { display:none; }\r\n\r\n        .wcdevis-inline-note {\r\n            display: flex;\r\n            align-items: flex-start;\r\n            gap: 10px;\r\n            margin: 0 0 16px;\r\n            padding: 12px 14px;\r\n            border-radius: 14px;\r\n            border: 1px solid rgba(13,110,253,.14);\r\n            background: linear-gradient(180deg, rgba(13,110,253,.08), rgba(13,110,253,.03));\r\n            color: var(--wcdevis-text-color);\r\n            font-size: .95em;\r\n            line-height: 1.45;\r\n        }\r\n        .wcdevis-inline-note i { margin-top: 2px; color: var(--wcdevis-primary-color); }\r\n        .wcdevis-inline-note strong { color: var(--wcdevis-primary-color); }\r\n        .wcdevis-inline-note.is-warning {\r\n            border-color: rgba(255,193,7,.35);\r\n            background: linear-gradient(180deg, rgba(255,243,205,.85), rgba(255,248,231,.9));\r\n        }\r\n        .wcdevis-inline-note.is-warning i,\r\n        .wcdevis-inline-note.is-warning strong { color: #8a6d1d; }\r\n\r\n        \/* Form Sections *\/\r\n        .wcdevis-modern-form section {\r\n            margin-bottom: 1.15em;\r\n            padding: 1.2em 1.2em 1.1em;\r\n        }\r\n        .wcdevis-modern-form section:last-of-type { border-bottom:none; }\r\n        .wcdevis-modern-form h2 {\r\n            font-size: 1.25em;\r\n            margin-bottom: .95em;\r\n            display:flex;\r\n            align-items:center;\r\n            color:var(--wcdevis-text-color);\r\n            gap: .15em;\r\n        }\r\n        .wcdevis-modern-form h2 i { margin-right:.55em; color:var(--wcdevis-primary-color); width:22px; text-align:center; }\r\n        \r\n        .wcdevis-accordion-header {\r\n            cursor:pointer;\r\n            padding: .35em 40px .35em .15em;\r\n            position:relative;\r\n        }\r\n        .wcdevis-accordion-header::after { content:'\\f107'; font-family:'Font Awesome 5 Free'; font-weight:900; position:absolute; right:10px; top:50%; transform:translateY(-50%); }\r\n        .wcdevis-accordion-header.active::after { content:'\\f106'; }\r\n        .wcdevis-accordion-header.section-complete,\r\n        h2.section-complete { color: var(--wcdevis-text-color); }\r\n        \r\n        .wcdevis-accordion-content { display:none; padding-top:1em; margin-top:-0.25em; padding-bottom:.2em; }\r\n        .wcdevis-section-status { display:none; margin-left:10px; color:var(--wcdevis-success-color); }\r\n        h2.section-complete .wcdevis-section-status { display:inline-block; }\r\n\r\n        .wcdevis-modern-form .wcdevis-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:1em; }\r\n        .wcdevis-modern-form .form-group-full-width { grid-column:1 \/ -1; }\r\n        \r\n        .wcdevis-modern-form label:not(.checkbox-label) {\r\n            display: inline-block;\r\n            margin: 0 0 8px;\r\n            font-size: .94em;\r\n            font-weight: 600;\r\n            color: #364152;\r\n        }\r\n        \r\n        .wcdevis-modern-form input,\r\n        .wcdevis-modern-form select,\r\n        .wcdevis-modern-form textarea {\r\n            width:100%;\r\n            padding:.95em 1em;\r\n            border:1px solid var(--wcdevis-border-color);\r\n            border-radius:14px;\r\n            background-color:#fff;\r\n            font-size:1em;\r\n            font-family:inherit;\r\n            box-sizing:border-box;\r\n            transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;\r\n        }\r\n        .wcdevis-modern-form input:hover,\r\n        .wcdevis-modern-form select:hover,\r\n        .wcdevis-modern-form textarea:hover { border-color: rgba(13,110,253,.28); }\r\n        .wcdevis-modern-form input:focus,\r\n        .wcdevis-modern-form select:focus,\r\n        .wcdevis-modern-form textarea:focus {\r\n            border-color:var(--wcdevis-primary-color);\r\n            outline:0;\r\n            background: #fff;\r\n            box-shadow: 0 0 0 4px rgba(13, 110, 253, .10);\r\n        }\r\n        .wcdevis-modern-form select:disabled { background: #f2f4f7; color: #8a94a6; cursor: not-allowed; }\r\n        \r\n        \/* Validation *\/\r\n        .is-invalid {\r\n            border-color:var(--wcdevis-danger-color)!important;\r\n            box-shadow: 0 0 0 4px rgba(220,53,69,.12);\r\n            background: rgba(220,53,69,.03);\r\n            animation: wcdevisInvalidPulse .9s ease-in-out 2;\r\n        }\r\n        .wcdevis-highlight-missing { animation: wcdevisInvalidPulse .9s ease-in-out 2; }\r\n        @keyframes wcdevisInvalidPulse {\r\n            0% { box-shadow: 0 0 0 0 rgba(220,53,69,.00); transform: translateX(0); }\r\n            20% { box-shadow: 0 0 0 5px rgba(220,53,69,.18); transform: translateX(-2px); }\r\n            40% { box-shadow: 0 0 0 8px rgba(220,53,69,.10); transform: translateX(2px); }\r\n            60% { box-shadow: 0 0 0 5px rgba(220,53,69,.16); transform: translateX(-2px); }\r\n            100% { box-shadow: 0 0 0 0 rgba(220,53,69,.00); transform: translateX(0); }\r\n        }\r\n\r\n        \/* Checkboxes & Radios *\/\r\n        .wcdevis-checkbox-group { display:grid; grid-template-columns:1fr 1fr; gap:.85em; }\r\n        .wcdevis-checkbox-group .checkbox-label {\r\n            display:flex;\r\n            align-items:center;\r\n            padding:.95em 1em;\r\n            border:1px solid var(--wcdevis-border-color);\r\n            border-radius:14px;\r\n            cursor:pointer;\r\n            background: #fff;\r\n            transition: .18s ease;\r\n            min-height: 58px;\r\n        }\r\n        .wcdevis-checkbox-group .checkbox-label:hover { border-color: rgba(13,110,253,.25); transform: translateY(-1px); }\r\n        .wcdevis-checkbox-group .checkbox-label input { width:auto; margin-right:10px; flex-shrink: 0; }\r\n        \r\n        .wcdevis-existing-customer {\r\n            display:flex;\r\n            align-items:center;\r\n            gap:1em;\r\n            margin-top:1.2em;\r\n            padding:1em 1.05em;\r\n            background:linear-gradient(180deg, #fbfcfe, #f7f9fc);\r\n            border: 1px solid rgba(26,42,58,.08);\r\n            border-radius:16px;\r\n            flex-wrap:wrap;\r\n        }\r\n        .wcdevis-existing-customer span { font-weight:600; margin-right:auto; }\r\n        .wcdevis-existing-customer label {\r\n            display:flex;\r\n            align-items:center;\r\n            gap:0.5em;\r\n            cursor:pointer;\r\n            padding: 8px 12px;\r\n            border-radius: 999px;\r\n            background: #fff;\r\n            border: 1px solid rgba(26,42,58,.08);\r\n        }\r\n\r\n        \/* Specific Components *\/\r\n        .wcdevis-vehicule-item {\r\n            padding: 12px;\r\n            border: 1px solid rgba(26,42,58,.08);\r\n            border-radius: 18px;\r\n            background: linear-gradient(180deg, #fff, #fafcff);\r\n            margin-bottom: 12px;\r\n        }\r\n        \r\n        .wcdevis-submit-button {\r\n            width:100%;\r\n            margin-top:1.15em;\r\n            padding:1.1em 1.2em;\r\n            font-size:1.08em;\r\n            font-weight:700;\r\n            background: linear-gradient(90deg, var(--wcdevis-primary-color), #0d6efd);\r\n            color:#fff;\r\n            border:none;\r\n            border-radius:18px;\r\n            cursor:pointer;\r\n            display:flex;\r\n            justify-content:center;\r\n            align-items:center;\r\n            box-shadow: 0 18px 34px rgba(13,110,253,.22);\r\n            transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;\r\n        }\r\n        .wcdevis-submit-button:hover { transform: translateY(-1px); box-shadow: 0 20px 36px rgba(13,110,253,.26); }\r\n        .wcdevis-submit-button:disabled { opacity: .8; cursor: wait; }\r\n        .wcdevis-submit-button i { margin-right: 8px; }\r\n        \r\n        #wcdevis-ajouter-vehicule {\r\n            background: linear-gradient(180deg, #ffffff, #f7faff);\r\n            border:1px dashed rgba(13,110,253,.35);\r\n            color:var(--wcdevis-primary-color);\r\n            padding:.95em 1em;\r\n            width:100%;\r\n            border-radius:16px;\r\n            cursor:pointer;\r\n            margin-top:1em;\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .wcdevis-retirer-vehicule {\r\n            border:none;\r\n            background:none;\r\n            color: var(--wcdevis-danger-color);\r\n            cursor: pointer;\r\n            width: 42px;\r\n            height: 42px;\r\n            border-radius: 50%;\r\n        }\r\n        .wcdevis-retirer-vehicule:hover { background: rgba(220,53,69,.08); }\r\n        \r\n        .wcdevis-expand-prompt {\r\n            border: 1px dashed rgba(13,110,253,.35);\r\n            border-radius: 16px;\r\n            padding: 14px 16px;\r\n            background: linear-gradient(180deg, rgba(13,110,253,.06), rgba(13,110,253,.02));\r\n            cursor: pointer;\r\n            margin-bottom: 18px;\r\n        }\r\n        .wcdevis-expand-prompt p { margin: 0; }\r\n        .wcdevis-expand-prompt span { font-weight: 700; color: var(--wcdevis-primary-color); }\r\n        \r\n        .section-subtitle { margin: 0 0 12px; color: var(--wcdevis-text-light-color); line-height: 1.5; }\r\n        \r\n        #devis-messages { padding:1em 1.15em; margin:1.5em 0 0; border-radius:16px; display:none; text-align:center; font-weight: 600; }\r\n        #devis-messages.success { background-color:#d1e7dd; color:#0f5132; }\r\n        #devis-messages.error { background-color:#f8d7da; color:#842029; }\r\n        \r\n        .required { color:var(--wcdevis-danger-color); margin-left: 2px; }\r\n        .wcdevis-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }\r\n\r\n        \/* =====================================================================\r\n           RESPONSIVE CLEANUP (Mobiles & Tablettes)\r\n           ===================================================================== *\/\r\n        \r\n        \/* Tablettes (<= 980px) *\/\r\n        @media (max-width: 980px) {\r\n            .wcdevis-form-hero { grid-template-columns: 1fr; }\r\n            .wcdevis-step-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n            .wcdevis-hero-side { width: 100%; }\r\n        }\r\n\r\n        \/* Mobiles (<= 768px) *\/\r\n        @media (max-width: 768px) {\r\n            .wcdevis-main-container {\r\n                padding: 18px !important;\r\n                margin: 15px auto !important;\r\n                border-radius: 16px !important;\r\n            }\r\n            .wcdevis-hero-card,\r\n            .wcdevis-modern-form section,\r\n            .wcdevis-request-type-selector label,\r\n            .wcdevis-items-preview {\r\n                border-radius: 14px;\r\n            }\r\n            .wcdevis-hero-side { display: none !important; }\r\n            .wcdevis-step-chips { display: none !important; }\r\n            \r\n            .wcdevis-request-type-selector {\r\n                flex-direction: column;\r\n                gap: 12px;\r\n            }\r\n            \r\n            \/* Grids -> 1 Colonne *\/\r\n            .wcdevis-modern-form .wcdevis-form-grid,\r\n            .wcdevis-checkbox-group {\r\n                grid-template-columns: 1fr !important;\r\n            }\r\n            .wcdevis-modern-form .form-group-full-width {\r\n                grid-column: auto !important;\r\n            }\r\n\r\n            \/* Responsive tables *\/\r\n            .devis-table,\r\n            .devis-table tbody,\r\n            .devis-table tr,\r\n            .devis-table td {\r\n                display: block;\r\n                width: 100%;\r\n            }\r\n            .devis-table tr {\r\n                padding-bottom: 10px;\r\n                margin-bottom: 10px;\r\n                border-bottom: 1px solid var(--wcdevis-border-color);\r\n            }\r\n            .devis-table td {\r\n                padding: 6px 0;\r\n                border: 0;\r\n                text-align: left !important;\r\n            }\r\n\r\n            \/* Ajustement des inputs pour \u00e9viter le zoom iOS et d\u00e9border *\/\r\n            .wcdevis-modern-form input,\r\n            .wcdevis-modern-form select,\r\n            .wcdevis-modern-form textarea {\r\n                font-size: 16px !important; \/* Emp\u00eache le zoom auto sur iPhone *\/\r\n                padding: 12px 14px;\r\n            }\r\n\r\n            .wcdevis-existing-customer {\r\n                flex-direction: column;\r\n                align-items: stretch;\r\n                gap: 10px;\r\n            }\r\n            .wcdevis-existing-customer span {\r\n                width: 100%;\r\n                display: block;\r\n                margin-bottom: 4px;\r\n            }\r\n            .wcdevis-existing-customer label {\r\n                justify-content: flex-start;\r\n                padding: 12px;\r\n            }\r\n            \r\n            .wcdevis-vehicule-item {\r\n                padding: 0;\r\n                border: none;\r\n                background: transparent;\r\n            }\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"wcdevis-main-container\">\r\n        <div id=\"devis-items-container\"><\/div>    \r\n    <form method=\"post\" id=\"formulaire-client-inner\" class=\"wcdevis-modern-form\" novalidate>\r\n        <div class=\"wcdevis-form-hero\">\r\n            <div class=\"wcdevis-hero-card\">\r\n                <span class=\"wcdevis-eyebrow\"><i class=\"fas fa-hammer\"><\/i>Nous pr\u00e9parons votre v\u00e9hicule<\/span>\r\n                <h1>Votre devis am\u00e9nagement<\/h1>\r\n                <p>Gagnez du temps : dites-nous ce qu'il vous faut pour votre utilitaire. On vous pr\u00e9pare un chiffrage pr\u00e9cis, taill\u00e9 pour votre m\u00e9tier.<\/p>\r\n                <p>Allez directement \u00e0 l'essentiel, sans blabla.<\/p>\r\n            <\/div>\r\n            <div class=\"wcdevis-hero-side\">\r\n                <div class=\"wcdevis-side-title\">Avancement<\/div>\r\n                <div class=\"wcdevis-progress-bar\"><span id=\"wcdevis-progress-fill\"><\/span><\/div>\r\n                <div class=\"wcdevis-progress-label\">\r\n                    <span>\u00c9tapes compl\u00e9t\u00e9es<\/span>\r\n                    <strong id=\"wcdevis-progress-count\">0 \/ 4<\/strong>\r\n                <\/div>\r\n                <div class=\"wcdevis-inline-note\" style=\"margin:0;\">\r\n                    <i class=\"fas fa-info-circle\"><\/i>\r\n                    <div><strong>Astuce :<\/strong> s'il manque une info obligatoire, on vous la mettra en rouge direct.<\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"wcdevis-step-chips\" aria-hidden=\"true\">\r\n            <div class=\"wcdevis-step-chip\" data-step-target=\"section-vehicule\"><i class=\"fas fa-truck\"><\/i><div><strong>\u00c9tape 1<\/strong><span>Fourgon<\/span><\/div><\/div>\r\n            <div class=\"wcdevis-step-chip\" data-step-target=\"section-projet\"><i class=\"fas fa-tools\"><\/i><div><strong>\u00c9tape 2<\/strong><span>Besoins<\/span><\/div><\/div>\r\n            <div class=\"wcdevis-step-chip\" data-step-target=\"section-coordonnees\"><i class=\"fas fa-user-alt\"><\/i><div><strong>\u00c9tape 3<\/strong><span>Contact<\/span><\/div><\/div>\r\n            <div class=\"wcdevis-step-chip\" data-step-target=\"section-finalisation\"><i class=\"fas fa-comment-dots\"><\/i><div><strong>\u00c9tape 4<\/strong><span>D\u00e9tails<\/span><\/div><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"wcdevis-request-type-selector\">\r\n            <label style=\"text-align: center;\">\r\n                <input type=\"radio\" name=\"request_type\" value=\"full_quote\" checked> \r\n                <span style=\"font-size: 1.15em; font-weight: 700; color: var(--wcdevis-primary-color); display: block; margin-bottom: 6px;\">\r\n                    <i class=\"fas fa-file-signature\"><\/i> Demander mon devis gratuit\r\n                <\/span>\r\n                <small style=\"display: block; color: #198754; font-weight: bold; margin-bottom: 4px; font-size: 0.95em; background: #d1e7dd; padding: 2px 8px; border-radius: 12px; width: fit-content; margin-left: auto; margin-right: auto;\">\r\n                    <i class=\"fas fa-stopwatch\"><\/i> R\u00e9ponse rapidement\r\n                <\/small>\r\n                <small style=\"color: #6c757d;\">Le chiffrage complet par mail.<\/small>\r\n            <\/label>\r\n            \r\n            <label style=\"text-align: center;\">\r\n                <input type=\"radio\" name=\"request_type\" value=\"callback\"> \r\n                <span style=\"font-size: 1.15em; font-weight: 700; color: var(--wcdevis-primary-color); display: block; margin-bottom: 6px;\">\r\n                    <i class=\"fas fa-headset\"><\/i> \u00catre rappel\u00e9\r\n                <\/span>\r\n                <small style=\"display: block; margin-top: 8px; color: #6c757d;\">On en discute de vive voix.<\/small>\r\n            <\/label>\r\n        <\/div>\r\n\r\n        <input type=\"hidden\" name=\"action\" value=\"wcdevis_envoyer_devis\">\r\n        <input type=\"hidden\" name=\"nonce\" value=\"ab6be78db5\">\r\n        <input type=\"hidden\" name=\"client_viewport_width\" id=\"client_viewport_width\" value=\"\">\r\n        <input type=\"hidden\" name=\"visitor_status\" id=\"visitor_status\" value=\"\">\r\n        <input type=\"text\" name=\"honeypot_field\" style=\"display:none !important;\" tabindex=\"-1\" autocomplete=\"off\">\r\n        \r\n                <section id=\"section-vehicule\" class=\"wcdevis-accordion-section\">\r\n            <h2 class=\"wcdevis-accordion-header active\"><i class=\"fas fa-truck\"><\/i> 1. Votre (ou vos) v\u00e9hicule(s)<span class=\"wcdevis-section-status\"><i class=\"fas fa-check-circle\"><\/i><\/span><\/h2>\r\n            <div class=\"wcdevis-accordion-content\" style=\"display: block;\">\r\n                <div class=\"wcdevis-inline-note\"><i class=\"fas fa-highlighter\"><\/i><div><strong>Astuce :<\/strong> choisissez d'abord la marque pour d\u00e9bloquer les mod\u00e8les correspondants.<\/div><\/div>\r\n                <div id=\"wcdevis-vehicules-container\">\r\n                    <div class=\"wcdevis-vehicule-item\">\r\n                        <div class=\"wcdevis-form-grid\">\r\n                            <div class=\"form-group\">\r\n                                <label for=\"vehicules_0_marque\">Marque <span class=\"required\">*<\/span><\/label>\r\n                                <select name=\"vehicules[0][marque]\" id=\"vehicules_0_marque\" class=\"wcdevis-marque-select\" required>\r\n                                    <option value=\"\" disabled selected>-- S\u00e9lectionnez une marque --<\/option>\r\n                                    <option value=\"CITROEN\" >CITROEN<\/option><option value=\"DACIA\" >DACIA<\/option><option value=\"FIAT\" >FIAT<\/option><option value=\"FORD\" >FORD<\/option><option value=\"HYUNDAI\" >HYUNDAI<\/option><option value=\"IVECO\" >IVECO<\/option><option value=\"MAN\" >MAN<\/option><option value=\"MAXUS\" >MAXUS<\/option><option value=\"MERCEDES\" >MERCEDES<\/option><option value=\"NISSAN\" >NISSAN<\/option><option value=\"OPEL\" >OPEL<\/option><option value=\"PEUGEOT\" >PEUGEOT<\/option><option value=\"RENAULT\" >RENAULT<\/option><option value=\"TOYOTA\" >TOYOTA<\/option><option value=\"VOLKSWAGEN\" >VOLKSWAGEN<\/option>                                <\/select>\r\n                            <\/div>\r\n                            <div class=\"form-group\">\r\n                                <label for=\"vehicules_0_modele\">Mod\u00e8le <span class=\"required\">*<\/span><\/label>\r\n                                <select name=\"vehicules[0][modele]\" id=\"vehicules_0_modele\" class=\"wcdevis-modele-select\" required disabled>\r\n                                    <option value=\"\" disabled selected>-- S\u00e9lectionnez un mod\u00e8le --<\/option>\r\n                                                                    <\/select>\r\n                            <\/div>\r\n                            <div class=\"form-group\">\r\n                                <label for=\"vehicules_0_dimension\">Dimension <span class=\"required\">*<\/span><\/label>\r\n                                <select name=\"vehicules[0][dimension]\" id=\"vehicules_0_dimension\" class=\"wcdevis-dimension-select\" required disabled>\r\n                                    <option value=\"\" disabled selected>-- S\u00e9lectionnez une dimension --<\/option>\r\n                                                                    <\/select>\r\n                            <\/div>\r\n                            <div style=\"align-self: end;\"><button type=\"button\" class=\"wcdevis-retirer-vehicule\" title=\"Retirer ce v\u00e9hicule\" style=\"display: none;\"><i class=\"fas fa-trash-alt\"><\/i><\/button><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <button type=\"button\" id=\"wcdevis-ajouter-vehicule\"><i class=\"fas fa-plus\"><\/i> Ajouter un autre v\u00e9hicule<\/button>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n                \r\n               <section id=\"section-coordonnees\" class=\"wcdevis-accordion-section\">\r\n            <h2 class=\"wcdevis-accordion-header active\"><i class=\"fas fa-user-alt\"><\/i> 3. Vos Coordonn\u00e9es<span class=\"wcdevis-section-status\"><i class=\"fas fa-check-circle\"><\/i><\/span><\/h2>\r\n            <div class=\"wcdevis-accordion-content\" style=\"display: block;\">\r\n                <div class=\"wcdevis-inline-note\"><i class=\"fas fa-id-card\"><\/i><div><strong>Presque fini !<\/strong> Laissez-nous de quoi vous recontacter facilement.<\/div><\/div>\r\n                <div class=\"wcdevis-form-part\" data-request-type=\"full_quote\">\r\n                    <div class=\"form-group form-group-full-width\" style=\"margin-bottom: 1.5em;\">\r\n                        <label for=\"metier\" class=\"wcdevis-sr-only\">Votre m\u00e9tier<\/label>\r\n                        <select name=\"metier\" id=\"metier\" data-required-for-quote=\"true\">\r\n                            <option value=\"\" disabled selected>Votre m\u00e9tier *<\/option>\r\n                            <option value=\"Artisan\">Artisan<\/option><option value=\"Livreur\">Livreur<\/option><option value=\"Plombier\">Plombier<\/option><option value=\"\u00c9lectricien\">\u00c9lectricien<\/option><option value=\"Menuisier\">Menuisier<\/option><option value=\"Chauffagiste\">Chauffagiste<\/option><option value=\"Carreleur\">Carreleur<\/option><option value=\"Serrurier\">Serrurier<\/option><option value=\"Peintre\">Peintre<\/option><option value=\"Poseur fen\u00eatres\">Poseur fen\u00eatres<\/option><option value=\"Autres\">Autres<\/option>                        <\/select>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"wcdevis-form-grid\">\r\n                    <div class=\"form-group \"><input placeholder=\"Nom *\" type=\"text\" id=\"nom\" name=\"nom\" value=\"\" required><\/div><div class=\"form-group \"><input placeholder=\"Pr\u00e9nom *\" type=\"text\" id=\"prenom\" name=\"prenom\" value=\"\" required><\/div><div class=\"form-group \"><input placeholder=\"Email *\" type=\"email\" id=\"email\" name=\"email\" value=\"\" required><\/div><div class=\"form-group \"><input placeholder=\"T\u00e9l\u00e9phone *\" type=\"tel\" id=\"telephone\" name=\"telephone\" value=\"\" required><\/div><div class=\"form-group \"><input placeholder=\"Soci\u00e9t\u00e9 - Entreprise  *\" type=\"text\" id=\"entreprise\" name=\"entreprise\" value=\"\" required><\/div>                <\/div>\r\n                <div class=\"wcdevis-form-part\" data-request-type=\"full_quote\">\r\n                    <p class=\"section-subtitle\" style=\"margin-top: 1.5em; margin-bottom: 0.5em;\">Adresse de facturation \/ pose<\/p>\r\n                    <div class=\"wcdevis-form-grid\">\r\n                        <div class=\"form-group form-group-full-width\">\r\n                            <label for=\"adresse\" class=\"wcdevis-sr-only\">Adresse<\/label>\r\n                            <input placeholder=\"Adresse *\" type=\"text\" id=\"adresse\" name=\"adresse\" value=\"\" data-required-for-quote=\"true\">\r\n                        <\/div>\r\n                        <div class=\"form-group\">\r\n                             <label for=\"code_postal\" class=\"wcdevis-sr-only\">Code postal<\/label>\r\n                            <input placeholder=\"Code postal *\" type=\"text\" id=\"code_postal\" name=\"code_postal\" value=\"\" pattern=\"\\d{5}\" data-required-for-quote=\"true\">\r\n                        <\/div>\r\n                        <div class=\"form-group\">\r\n                             <label for=\"ville\" class=\"wcdevis-sr-only\">Ville<\/label>\r\n                            <input placeholder=\"Ville *\" type=\"text\" id=\"ville\" name=\"ville\" value=\"\" data-required-for-quote=\"true\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"wcdevis-existing-customer\">\r\n                    <span>D\u00e9j\u00e0 client chez nous ?<span class=\"required\">*<\/span><\/span>\r\n                    <label><input type=\"radio\" name=\"existing_customer\" value=\"yes\" required> Oui<\/label>\r\n                    <label><input type=\"radio\" name=\"existing_customer\" value=\"no\" required> Non<\/label>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n            <section id=\"section-finalisation\" class=\"wcdevis-accordion-section\">\r\n        <h2 class=\"wcdevis-accordion-header active\"><i class=\"fas fa-comment-dots\"><\/i> 4. D\u00e9tails<span class=\"wcdevis-section-status\"><i class=\"fas fa-check-circle\"><\/i><\/span><\/h2>\r\n        <div class=\"wcdevis-accordion-content\" style=\"display: block;\">\r\n                <div class=\"wcdevis-inline-note is-warning\"><i class=\"fas fa-bullseye\"><\/i><div><strong>Derni\u00e8re ligne droite :<\/strong> donnez-nous un max de d\u00e9tails pour \u00e9viter qu'on vous rappelle pour rien.<\/div><\/div>\r\n                <div class=\"wcdevis-expand-prompt wcdevis-form-part\" data-request-type=\"full_quote\" data-target-wrapper=\"projet-wrapper-in-finalisation\"><p>Vous avez un besoin pr\u00e9cis ? <span>Cliquez ici pour nous en dire plus.<\/span><\/p><\/div><div id=\"projet-wrapper-in-finalisation\" style=\"display:none; margin-bottom: 1.5em; border-bottom: 1px solid var(--wcdevis-border-color); padding-bottom: 1.5em;\">    <p class=\"section-subtitle\">D\u00e9crivez-nous vos besoins.<\/p>\r\n    <label>Types de solutions recherch\u00e9es<\/label>\r\n    <div class=\"wcdevis-checkbox-group\" style=\"margin-top: 0.5em;\">\r\n        <label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"amenagements_bois\"> Am\u00e9nagements int\u00e9rieurs en bois<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"amenagements_metalliques\"> Am\u00e9nagements int\u00e9rieurs m\u00e9talliques<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"portage_exterieur\"> Portage ext\u00e9rieur (galeries, etc.)<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"attelages_protections\"> Attelages et protections<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"portage_specifique\"> Solutions de portage sp\u00e9cifiques<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"securisation\"> S\u00e9curisation (serrures, alarmes)<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"signalisation_balisage\"> Signalisation et balisage<\/label><label class=\"checkbox-label\"><input type=\"checkbox\" name=\"catalogue_options[]\" value=\"autres_equipements\"> Autres \u00e9quipements (\u00e9lectricit\u00e9, etc.)<\/label>    <\/div>\r\n    <\/div>                <div class=\"wcdevis-form-part\" data-request-type=\"full_quote\">\r\n                    \r\n                    <div class=\"wcdevis-existing-customer\" style=\"padding: 1em; margin-bottom: 1em; margin-top: 0;\">\r\n                        <span>Le plancher est-il d\u00e9j\u00e0 pos\u00e9 ?<span class=\"required\">*<\/span><\/span>\r\n                        <label><input type=\"radio\" name=\"equipe_plancher\" value=\"oui\" required> Oui<\/label>\r\n                        <label><input type=\"radio\" name=\"equipe_plancher\" value=\"non\" required> Non<\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"wcdevis-existing-customer\" style=\"padding: 1em; margin-bottom: 1em; margin-top: 0;\">\r\n                        <span>Les parois\/portes sont-elles d\u00e9j\u00e0 prot\u00e9g\u00e9es ?<span class=\"required\">*<\/span><\/span>\r\n                        <label><input type=\"radio\" name=\"equipe_protections\" value=\"oui\" required> Oui<\/label>\r\n                        <label><input type=\"radio\" name=\"equipe_protections\" value=\"non\" required> Non<\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"wcdevis-existing-customer\" style=\"padding: 1em; margin-bottom: 1em; margin-top: 0;\">\r\n                        <span>Avez-vous d\u00e9j\u00e0 le fourgon entre les mains ?<span class=\"required\">*<\/span><\/span>\r\n                        <label><input type=\"radio\" name=\"vehicule_possede\" value=\"oui\" required> Oui<\/label>\r\n                        <label><input type=\"radio\" name=\"vehicule_possede\" value=\"non\" required> Non<\/label>\r\n                    <\/div>\r\n\r\n                    <div id=\"en_commande_wrapper\" style=\"display: none;\">\r\n                        <div class=\"wcdevis-existing-customer\" style=\"padding: 1em; margin-bottom: 1em; margin-top: 0;\">\r\n                            <span>Est-il en cours de commande \/ livraison ?<span class=\"required\">*<\/span><\/span>\r\n                            <label><input type=\"radio\" name=\"vehicule_en_commande\" value=\"oui\" required> Oui<\/label>\r\n                            <label><input type=\"radio\" name=\"vehicule_en_commande\" value=\"non\" required> Non<\/label>\r\n                        <\/div>\r\n                        <div id=\"delai_commande_wrapper\" style=\"display: none; margin-bottom: 1.5em;\">\r\n                            <label for=\"delai_commande\" class=\"wcdevis-sr-only\">D\u00e9lai estim\u00e9<\/label>\r\n                            <input type=\"text\" id=\"delai_commande\" name=\"delai_commande\" placeholder=\"Si oui, dans combien de temps ? (ex: 2 mois)\">\r\n                        <\/div>\r\n                    <\/div>\r\n                    <label for=\"commentaires\" style=\"margin-top: 1.5em; display: block;\">Pr\u00e9cisez ce que vous transportez et comment vous bossez <span class=\"required\">*<\/span><\/label>\r\n                    <textarea name=\"commentaires\" id=\"commentaires\" rows=\"4\" placeholder=\"Ex: Je transporte des tuyaux de 3m, j'ai besoin de grands tiroirs pour ma quincaillerie, etc.\" data-required-for-quote=\"true\"><\/textarea>\r\n                <\/div>\r\n                <div class=\"wcdevis-form-part\" data-request-type=\"callback\" style=\"display:none;\">\r\n                    <label>Quand on vous rappelle ?<span class=\"required\">*<\/span><\/label>\r\n                    <div class=\"wcdevis-form-grid\">\r\n                        <div class=\"form-group\"><input type=\"date\" id=\"callback_date\" name=\"callback_date\" data-required-for-callback=\"true\"><\/div>\r\n                        <div class=\"form-group\">\r\n                            <select id=\"callback_period\" name=\"callback_period\" data-required-for-callback=\"true\">\r\n                                <option value=\"\" disabled selected>Cr\u00e9neau horaire *<\/option>\r\n                                <option value=\"Matin\">Matin (8h-12h)<\/option>\r\n                                <option value=\"Apr\u00e8s-midi\">Apr\u00e8s-midi (13h-18h)<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n        \r\n        <button type=\"submit\" id=\"envoyer-devis-ajax\" class=\"wcdevis-submit-button\">\r\n            <i class=\"fas fa-paper-plane\"><\/i> <span>Recevoir mon devis gratuit<\/span>\r\n        <\/button>\r\n    <\/form>\r\n            <div id=\"devis-messages\" style=\"display:none;\"><\/div>\r\n    <\/div>\r\n    \r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const formContainer = document.querySelector('.wcdevis-main-container');\r\n        if (!formContainer) return;\r\n\r\n        const form = formContainer.querySelector('#formulaire-client-inner');\r\n        if (!form) return;\r\n        \r\n        const sections = form.querySelectorAll('.wcdevis-accordion-section');\r\n        const submitButton = form.querySelector('#envoyer-devis-ajax');\r\n        const messagesDiv = formContainer.querySelector('#devis-messages');\r\n        const vehiculesContainer = form.querySelector('#wcdevis-vehicules-container');\r\n        const addVehiculeBtn = form.querySelector('#wcdevis-ajouter-vehicule');\r\n        const solutionsGroup = form.querySelector('.wcdevis-checkbox-group');\r\n        const progressFill = form.querySelector('#wcdevis-progress-fill');\r\n        const progressCount = form.querySelector('#wcdevis-progress-count');\r\n        const stepChips = form.querySelectorAll('.wcdevis-step-chip');\r\n\r\n        const WCDEVIS_AJAX = {\r\n            ajax_url: \"https:\/\/alaska-france.fr\/boutique\/wp-admin\/admin-ajax.php\",\r\n            nonce: \"ab6be78db5\"\r\n        };\r\n\r\n        \/\/ ---- CHARGEMENT DYNAMIQUE DES PRODUITS (ANTI-CACHE) ----\r\n        const devisItemsContainer = document.getElementById('devis-items-container');\r\n        if (devisItemsContainer) {\r\n            fetch(WCDEVIS_AJAX.ajax_url + '?action=wcdevis_get_devis_items')\r\n                .then(res => res.json())\r\n                .then(data => {\r\n                    if (data.success && data.data.items.length > 0) {\r\n                        let html = '<div class=\"wcdevis-items-preview\"><h3>Votre S\u00e9lection<\/h3><table class=\"devis-table\">';\r\n                        data.data.items.forEach(item => {\r\n                            html += `<tr><td>${item.name} (x${item.qty})<\/td><td style=\"text-align:right;\"><button type=\"button\" class=\"remove-from-devis\" title=\"Retirer\" data-product-id=\"${item.id}\">&times;<\/button><\/td><\/tr>`;\r\n                            \/\/ On cr\u00e9e les inputs cach\u00e9s directement dans le DOM pour l'envoi\r\n                            const hiddenInput = document.createElement('input');\r\n                            hiddenInput.type = 'hidden';\r\n                            hiddenInput.name = `devis_products[${item.id}]`;\r\n                            hiddenInput.value = item.qty;\r\n                            form.appendChild(hiddenInput);\r\n                        });\r\n                        html += '<\/table><\/div>';\r\n                        devisItemsContainer.innerHTML = html;\r\n                    }\r\n                });\r\n\r\n            \/\/ G\u00e9rer le retrait d'un produit\r\n            devisItemsContainer.addEventListener('click', async e => {\r\n                const removeBtn = e.target.closest('.remove-from-devis');\r\n                if (removeBtn) {\r\n                    e.preventDefault();\r\n                    const productId = removeBtn.dataset.productId;\r\n                    const formData = new FormData();\r\n                    formData.append('action', 'wcdevis_retirer_du_devis');\r\n                    formData.append('nonce', WCDEVIS_AJAX.nonce);\r\n                    formData.append('product_id', productId);\r\n                    const response = await fetch(WCDEVIS_AJAX.ajax_url, { method: 'POST', body: formData });\r\n                    const data = await response.json();\r\n                    if(data.success) {\r\n                        removeBtn.closest('tr').remove();\r\n                        \/\/ Retire aussi le champ cach\u00e9 du formulaire\r\n                        const hiddenInput = form.querySelector(`input[name=\"devis_products[${productId}]\"]`);\r\n                        if (hiddenInput) hiddenInput.remove();\r\n                        \r\n                        if(devisItemsContainer.querySelectorAll('tr').length === 0) {\r\n                           devisItemsContainer.innerHTML = '';\r\n                        }\r\n                    }\r\n                }\r\n            });\r\n        }\r\n        \/\/ ---------------------------------------------------------\r\n\r\n        const visitorStatusInput = form.querySelector('#visitor_status');\r\n        if (visitorStatusInput) {\r\n            try {\r\n                let status = localStorage.getItem('alaska_visitor_status');\r\n                if (status === 'returning') {\r\n                    visitorStatusInput.value = 'Visiteur connu';\r\n                } else {\r\n                    visitorStatusInput.value = 'Premi\u00e8re visite';\r\n                    localStorage.setItem('alaska_visitor_status', 'returning');\r\n                }\r\n            } catch (e) {\r\n                visitorStatusInput.value = 'Ind\u00e9termin\u00e9';\r\n            }\r\n        }\r\n        \r\n        const waitForSelectOptions = (selectElement) => {\r\n            return new Promise((resolve, reject) => {\r\n                const timeout = setTimeout(() => {\r\n                    observer.disconnect();\r\n                    reject(new Error(`Timeout`));\r\n                }, 5000);\r\n\r\n                if (selectElement.options.length > 1 && !selectElement.disabled) {\r\n                    clearTimeout(timeout);\r\n                    resolve();\r\n                    return;\r\n                }\r\n                \r\n                const observer = new MutationObserver(() => {\r\n                    if (selectElement.options.length > 1 && !selectElement.disabled) {\r\n                        clearTimeout(timeout);\r\n                        observer.disconnect();\r\n                        resolve();\r\n                    }\r\n                });\r\n                observer.observe(selectElement, { childList: true, attributes: true, attributeFilter: ['disabled'] });\r\n            });\r\n        };\r\n        \r\n        const updateVehicleSelection = async (vehicle) => {\r\n            if (!vehicle || !vehicle.marque) return;\r\n\r\n            const marqueSelect = form.querySelector('#vehicules_0_marque');\r\n            const modeleSelect = form.querySelector('#vehicules_0_modele');\r\n            const dimensionSelect = form.querySelector('#vehicules_0_dimension');\r\n            \r\n            if (!marqueSelect || !modeleSelect || !dimensionSelect) return;\r\n\r\n            try {\r\n                marqueSelect.value = vehicle.marque;\r\n                marqueSelect.dispatchEvent(new Event('change', { bubbles: true }));\r\n\r\n                if (vehicle.modele) {\r\n                    await waitForSelectOptions(modeleSelect);\r\n                    modeleSelect.value = vehicle.modele;\r\n                    modeleSelect.dispatchEvent(new Event('change', { bubbles: true }));\r\n                }\r\n\r\n                if (vehicle.dimension) {\r\n                    await waitForSelectOptions(dimensionSelect);\r\n                    dimensionSelect.value = vehicle.dimension;\r\n                    dimensionSelect.dispatchEvent(new Event('change', { bubbles: true }));\r\n                }\r\n\r\n                const vehicleSection = document.getElementById('section-vehicule');\r\n                if (vehicleSection) {\r\n                    const header = vehicleSection.querySelector('.wcdevis-accordion-header');\r\n                    if (header && !header.classList.contains('active')) header.click();\r\n                }\r\n            } catch (error) { console.error(error); }\r\n        };\r\n        \r\n        document.addEventListener('dws-vehicle-updated', e => { updateVehicleSelection(e.detail); });\r\n        \r\n        const loadDataFromMemory = () => {\r\n            const urlParams = new URLSearchParams(window.location.search);\r\n            if (urlParams.has('marque')) return; \r\n            \r\n            try {\r\n                const savedVehicle = {\r\n                    marque: localStorage.getItem('wcdevis_marque'),\r\n                    modele: localStorage.getItem('wcdevis_modele'),\r\n                    dimension: localStorage.getItem('wcdevis_dimension')\r\n                };\r\n                if (savedVehicle.marque) updateVehicleSelection(savedVehicle);\r\n            } catch(e) {}\r\n        };\r\n        \r\n        const saveDataToMemory = () => {\r\n            try {\r\n                const marque = form.querySelector('#vehicules_0_marque').value;\r\n                const modele = form.querySelector('#vehicules_0_modele').value;\r\n                const dimension = form.querySelector('#vehicules_0_dimension').value;\r\n                if (marque) localStorage.setItem('wcdevis_marque', marque);\r\n                if (modele) localStorage.setItem('wcdevis_modele', modele);\r\n                if (dimension) localStorage.setItem('wcdevis_dimension', dimension);\r\n            } catch (e) {}\r\n        };\r\n\r\n        form.querySelector('#vehicules_0_marque')?.addEventListener('change', saveDataToMemory);\r\n        form.querySelector('#vehicules_0_modele')?.addEventListener('change', saveDataToMemory);\r\n        form.querySelector('#vehicules_0_dimension')?.addEventListener('change', saveDataToMemory);\r\n\r\n        loadDataFromMemory();\r\n\r\n        form.addEventListener('click', function(e) {\r\n            const prompt = e.target.closest('.wcdevis-expand-prompt');\r\n            if (prompt) {\r\n                e.preventDefault();\r\n                const targetWrapperId = prompt.dataset.targetWrapper;\r\n                const wrapper = document.getElementById(targetWrapperId);\r\n                if(wrapper) {\r\n                    prompt.style.display = 'none';\r\n                    wrapper.style.display = 'block';\r\n                }\r\n            }\r\n            \r\n            const header = e.target.closest('.wcdevis-accordion-header');\r\n            if (header) {\r\n                e.preventDefault();\r\n                const content = header.parentElement.querySelector('.wcdevis-accordion-content');\r\n                const wasActive = header.classList.contains('active');\r\n                \r\n                form.querySelectorAll('.wcdevis-accordion-header.active').forEach(h => h.classList.remove('active'));\r\n                form.querySelectorAll('.wcdevis-accordion-content').forEach(c => { if(c !== content) c.style.display = 'none'; });\r\n                \r\n                if (!wasActive) {\r\n                    header.classList.add('active');\r\n                    content.style.display = 'block';\r\n                } else {\r\n                    content.style.display = 'none';\r\n                }\r\n                updateProgressUI();\r\n            }\r\n        });\r\n        \r\n        const validateSection = (section) => {\r\n            const header = section.querySelector('.wcdevis-accordion-header');\r\n            if (!header) return;\r\n            const requiredFields = section.querySelectorAll('[required]');\r\n            let isComplete = true;\r\n            \r\n            if (requiredFields.length === 0) {\r\n                header.classList.remove('section-complete');\r\n                return;\r\n            }\r\n            \r\n            requiredFields.forEach(field => {\r\n                const conditionalParent = field.closest('.wcdevis-form-part, #en_commande_wrapper');\r\n                if (conditionalParent && conditionalParent.style.display === 'none') return;\r\n                \r\n                if ((field.type === 'radio' || field.type === 'checkbox') && !form.querySelector(`input[name=\"${field.name}\"]:checked`)) {\r\n                    isComplete = false;\r\n                } else if (field.value.trim() === '') {\r\n                    isComplete = false;\r\n                }\r\n            });\r\n            header.classList.toggle('section-complete', isComplete);\r\n            updateProgressUI();\r\n        };\r\n\r\n        const updateProgressUI = () => {\r\n            const visibleSections = Array.from(sections).filter(section => {\r\n                const wrapper = section.closest('.wcdevis-form-part[data-request-type]');\r\n                return !wrapper || wrapper.style.display !== 'none';\r\n            });\r\n\r\n            const completed = visibleSections.filter(section => {\r\n                const header = section.querySelector('.wcdevis-accordion-header');\r\n                return header && header.classList.contains('section-complete');\r\n            }).length;\r\n\r\n            const total = visibleSections.length || 1;\r\n            const percent = Math.round((completed \/ total) * 100);\r\n\r\n            if (progressFill) progressFill.style.width = percent + '%';\r\n            if (progressCount) progressCount.textContent = completed + ' \/ ' + total;\r\n\r\n            stepChips.forEach(chip => {\r\n                const target = chip.dataset.stepTarget;\r\n                const section = target ? form.querySelector('#' + target) : null;\r\n                const header = section ? section.querySelector('.wcdevis-accordion-header') : null;\r\n                const wrapper = section ? section.closest('.wcdevis-form-part[data-request-type]') : null;\r\n                const isVisible = !wrapper || wrapper.style.display !== 'none';\r\n                chip.style.display = isVisible ? '' : 'none';\r\n                chip.classList.toggle('is-active', !!(header && header.classList.contains('active') && isVisible));\r\n                chip.classList.toggle('is-complete', !!(header && header.classList.contains('section-complete') && isVisible));\r\n            });\r\n        };\r\n\r\n        form.addEventListener('input', e => {\r\n            const section = e.target.closest('.wcdevis-accordion-section');\r\n            if (section) validateSection(section);\r\n            if(e.target.classList.contains('is-invalid')) e.target.classList.remove('is-invalid');\r\n        });\r\n        form.addEventListener('change', e => {\r\n            const section = e.target.closest('.wcdevis-accordion-section');\r\n            if (section) validateSection(section);\r\n        });\r\n\r\n        if (solutionsGroup) {\r\n            solutionsGroup.addEventListener('change', () => { solutionsGroup.classList.remove('is-invalid'); });\r\n        }\r\n        \r\n        const requestTypeRadios = form.querySelectorAll('input[name=\"request_type\"]');\r\n        const requestTypeLabels = form.querySelectorAll('.wcdevis-request-type-selector label');\r\n        \r\n        function toggleFormParts() {\r\n            const selectedType = form.querySelector('input[name=\"request_type\"]:checked').value;\r\n            \r\n            form.querySelectorAll('[data-request-type]').forEach(part => {\r\n                part.style.display = part.dataset.requestType === selectedType ? '' : 'none';\r\n            });\r\n            \r\n            form.querySelectorAll('[data-required-for-quote], [data-required-for-callback]').forEach(field => {\r\n                field.required = false;\r\n            });\r\n            \r\n            if (selectedType === 'full_quote') {\r\n                form.querySelectorAll('[data-required-for-quote]').forEach(field => { field.required = true; });\r\n                submitButton.innerHTML = '<i class=\"fas fa-paper-plane\"><\/i> Recevoir mon devis gratuit';\r\n            } else {\r\n                form.querySelectorAll('[data-required-for-callback]').forEach(field => { field.required = true; });\r\n                submitButton.innerHTML = '<i class=\"fas fa-phone-alt\"><\/i> Demander \u00e0 \u00eatre rappel\u00e9';\r\n            }\r\n            \r\n            requestTypeLabels.forEach(label => {\r\n                label.classList.toggle('active', label.contains(form.querySelector(`input[value=\"${selectedType}\"]`)));\r\n            });\r\n            \r\n            setTimeout(() => { sections.forEach(validateSection); updateProgressUI(); }, 100);\r\n        }\r\n\r\n        requestTypeRadios.forEach(radio => radio.addEventListener('change', toggleFormParts));\r\n        toggleFormParts(); \r\n        \r\n        function updateSelectOptions(selectElement, options, placeholder) {\r\n            selectElement.innerHTML = `<option value=\"\" disabled selected>${placeholder}<\/option>`;\r\n            options.forEach(opt => selectElement.insertAdjacentHTML('beforeend', `<option value=\"${opt}\">${opt}<\/option>`));\r\n            selectElement.disabled = false;\r\n        }\r\n        \r\n        if (vehiculesContainer) {\r\n            vehiculesContainer.addEventListener('change', function(e) {\r\n                const target = e.target;\r\n\r\n                if (target.classList.contains('wcdevis-marque-select')) {\r\n                    const vehicleItem = target.closest('.wcdevis-vehicule-item');\r\n                    const modeleSelect = vehicleItem.querySelector('.wcdevis-modele-select');\r\n                    const dimensionSelect = vehicleItem.querySelector('.wcdevis-dimension-select');\r\n                    const marque = target.value;\r\n\r\n                    modeleSelect.innerHTML = '<option value=\"\">Chargement...<\/option>';\r\n                    modeleSelect.value = \"\";\r\n                    modeleSelect.disabled = true;\r\n\r\n                    dimensionSelect.innerHTML = '<option value=\"\" disabled selected>-- S\u00e9lectionnez une dimension --<\/option>';\r\n                    dimensionSelect.value = \"\";\r\n                    dimensionSelect.disabled = true;\r\n\r\n                    if (!marque) return;\r\n\r\n                    const formData = new FormData();\r\n                    formData.append('action', 'wcdevis_get_modeles');\r\n                    formData.append('nonce', WCDEVIS_AJAX.nonce);\r\n                    formData.append('marque', marque);\r\n\r\n                    fetch(WCDEVIS_AJAX.ajax_url, { method: 'POST', body: formData })\r\n                        .then(response => response.json())\r\n                        .then(data => {\r\n                            if (data.success) {\r\n                                updateSelectOptions(modeleSelect, data.data.modeles, '-- S\u00e9lectionnez un mod\u00e8le --');\r\n                            } else {\r\n                                updateSelectOptions(modeleSelect, [], '-- Erreur, r\u00e9essayez --');\r\n                            }\r\n                            modeleSelect.disabled = false; \r\n                        })\r\n                        .catch(err => {\r\n                            updateSelectOptions(modeleSelect, [], '-- Erreur de connexion --');\r\n                            modeleSelect.disabled = false;\r\n                        });\r\n                } \r\n                else if (target.classList.contains('wcdevis-modele-select')) {\r\n                    const vehicleItem = target.closest('.wcdevis-vehicule-item');\r\n                    const marqueSelect = vehicleItem.querySelector('.wcdevis-marque-select');\r\n                    const dimensionSelect = vehicleItem.querySelector('.wcdevis-dimension-select');\r\n                    \r\n                    const marque = marqueSelect.value;\r\n                    const modele = target.value;\r\n\r\n                    dimensionSelect.innerHTML = '<option value=\"\">Chargement...<\/option>';\r\n                    dimensionSelect.value = \"\";\r\n                    dimensionSelect.disabled = true;\r\n\r\n                    if (!marque || !modele) return;\r\n\r\n                    const formData = new FormData();\r\n                    formData.append('action', 'wcdevis_get_dimensions');\r\n                    formData.append('nonce', WCDEVIS_AJAX.nonce);\r\n                    formData.append('marque', marque);\r\n                    formData.append('modele', modele);\r\n\r\n                    fetch(WCDEVIS_AJAX.ajax_url, { method: 'POST', body: formData })\r\n                        .then(response => response.json())\r\n                        .then(data => {\r\n                            if (data.success) {\r\n                                updateSelectOptions(dimensionSelect, data.data.dimensions, '-- S\u00e9lectionnez une dimension --');\r\n                            } else {\r\n                                updateSelectOptions(dimensionSelect, [], '-- Erreur, r\u00e9essayez --');\r\n                            }\r\n                            dimensionSelect.disabled = false; \r\n                        })\r\n                        .catch(err => {\r\n                            updateSelectOptions(dimensionSelect, [], '-- Erreur de connexion --');\r\n                            dimensionSelect.disabled = false;\r\n                        });\r\n                }\r\n            });\r\n        }\r\n       \r\n        let vehiculeIndex = 1;\r\n        if (addVehiculeBtn) {\r\n            addVehiculeBtn.addEventListener('click', () => {\r\n                const firstVehicule = vehiculesContainer.querySelector('.wcdevis-vehicule-item');\r\n                const newVehicule = firstVehicule.cloneNode(true);\r\n                \r\n                newVehicule.querySelectorAll('select, input').forEach(field => {\r\n                    const name = field.getAttribute('name').replace(\/\\[\\d+\\]\/, `[${vehiculeIndex}]`);\r\n                    field.setAttribute('name', name);\r\n                    const id = field.getAttribute('id').replace(\/_\\d+\/, `_${vehiculeIndex}`);\r\n                    field.setAttribute('id', id);\r\n                    field.value = '';\r\n                    if (field.closest('.form-group').querySelector('label')) {\r\n                       field.closest('.form-group').querySelector('label').setAttribute('for', id);\r\n                    }\r\n                });\r\n                newVehicule.querySelector('.wcdevis-retirer-vehicule').style.display = 'block';\r\n                vehiculesContainer.appendChild(newVehicule);\r\n                vehiculeIndex++;\r\n            });\r\n        }\r\n\r\n        if (vehiculesContainer) {\r\n            vehiculesContainer.addEventListener('click', e => {\r\n                const removeBtn = e.target.closest('.wcdevis-retirer-vehicule');\r\n                if(removeBtn && vehiculesContainer.querySelectorAll('.wcdevis-vehicule-item').length > 1) {\r\n                    removeBtn.closest('.wcdevis-vehicule-item').remove();\r\n                }\r\n            });\r\n        }\r\n        \r\n        const enCommandeRadios = form.querySelectorAll('input[name=\"vehicule_en_commande\"]');\r\n        const delaiWrapper = form.querySelector('#delai_commande_wrapper');\r\n        const vehiculePossedeRadios = form.querySelectorAll('input[name=\"vehicule_possede\"]');\r\n        const enCommandeWrapper = form.querySelector('#en_commande_wrapper');\r\n\r\n        if (enCommandeRadios.length > 0 && delaiWrapper) {\r\n            enCommandeRadios.forEach(radio => {\r\n                radio.addEventListener('change', function() {\r\n                    delaiWrapper.style.display = (this.value === 'oui') ? 'block' : 'none';\r\n                });\r\n            });\r\n        }\r\n        \r\n        if(vehiculePossedeRadios.length > 0 && enCommandeWrapper) {\r\n             vehiculePossedeRadios.forEach(radio => {\r\n                radio.addEventListener('change', function() {\r\n                    enCommandeWrapper.style.display = (this.value === 'non') ? 'block' : 'none';\r\n                });\r\n            });\r\n        }\r\n        \r\n        form.addEventListener('submit', async e => {\r\n            e.preventDefault();\r\n            \r\n            const viewportField = form.querySelector('#client_viewport_width');\r\n            if(viewportField) viewportField.value = window.innerWidth;\r\n\r\n            submitButton.disabled = true;\r\n            submitButton.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Validation...';\r\n            \r\n            form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));\r\n            messagesDiv.style.display = 'none';\r\n\r\n            let isFormValid = true;\r\n            let firstInvalidField = null;\r\n\r\n            form.querySelectorAll('[required]').forEach(field => {\r\n                const fieldWrapper = field.closest('.wcdevis-form-part, .wcdevis-accordion-section, #en_commande_wrapper');\r\n                if ((fieldWrapper && fieldWrapper.style.display === 'none') || field.disabled) return;\r\n                \r\n                let isFieldValid = true;\r\n                if (field.type === 'radio' || field.type === 'checkbox') {\r\n                    if (!form.querySelector(`input[name=\"${field.name}\"]:checked`)) isFieldValid = false;\r\n                } else if (field.value.trim() === '') {\r\n                    isFieldValid = false;\r\n                }\r\n                \r\n                if (!isFieldValid) {\r\n                    isFormValid = false;\r\n                    field.classList.add('is-invalid');\r\n                    if (!firstInvalidField) firstInvalidField = field;\r\n                }\r\n            });\r\n\r\n            if (!isFormValid) {\r\n                messagesDiv.textContent = 'Veuillez compl\u00e9ter les champs obligatoires mis en surbrillance.';\r\n                messagesDiv.className = 'error';\r\n                messagesDiv.style.display = 'block';\r\n                \r\n                if (firstInvalidField) {\r\n                    const invalidSection = firstInvalidField.closest('.wcdevis-accordion-section');\r\n                    if (invalidSection) {\r\n                        const header = invalidSection.querySelector('.wcdevis-accordion-header');\r\n                        invalidSection.classList.add('wcdevis-highlight-missing');\r\n                        if (header) header.classList.add('wcdevis-highlight-missing');\r\n                        if (header && !header.classList.contains('active')) header.click();\r\n                        setTimeout(() => {\r\n                            invalidSection.classList.remove('wcdevis-highlight-missing');\r\n                            if (header) header.classList.remove('wcdevis-highlight-missing');\r\n                        }, 2200);\r\n                    }\r\n                    firstInvalidField.classList.add('wcdevis-highlight-missing');\r\n                    setTimeout(() => {\r\n                        firstInvalidField.classList.remove('wcdevis-highlight-missing');\r\n                    }, 2200);\r\n                    firstInvalidField.focus();\r\n                }\r\n                toggleFormParts();\r\n                submitButton.disabled = false;\r\n                return;\r\n            }\r\n\r\n            submitButton.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Envoi en cours...';\r\n            const selectedType = form.querySelector('input[name=\"request_type\"]:checked').value;\r\n            const formData = new FormData(form);\r\n            \r\n            try {\r\n                const chatSessionId = localStorage.getItem('alaska_chat_session_id');\r\n                if (chatSessionId) {\r\n                    formData.append('alaska_chat_session_id', chatSessionId);\r\n                }\r\n            } catch (err) {}\r\n            \r\n            const action = (selectedType === 'full_quote') ? 'wcdevis_envoyer_devis' : 'wcdevis_envoyer_demande_rappel';\r\n            formData.set('action', action);\r\n            \r\n            try {\r\n                const response = await fetch(WCDEVIS_AJAX.ajax_url, { method: 'POST', body: formData });\r\n                const data = await response.json();\r\n                \r\n                if (data.success) {\r\n                    try {\r\n                        localStorage.removeItem('wcdevis_marque');\r\n                        localStorage.removeItem('wcdevis_modele');\r\n                        localStorage.removeItem('wcdevis_dimension');\r\n                    } catch(e) {}\r\n                    messagesDiv.textContent = data.data.message;\r\n                    messagesDiv.className = 'success';\r\n                    messagesDiv.style.display = 'block';\r\n                    window.location.href = data.data.redirect;\r\n                } else {\r\n                    throw new Error(data.data.message || 'Une erreur est survenue.');\r\n                }\r\n            } catch (error) {\r\n                messagesDiv.textContent = error.message;\r\n                messagesDiv.className = 'error';\r\n                toggleFormParts(); \r\n                submitButton.disabled = false;\r\n            }\r\n        });\r\n        \r\n        setTimeout(() => { sections.forEach(validateSection); updateProgressUI(); }, 100);\r\n    });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"<p>\u00a0<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/template-page-builders.php","meta":{"footnotes":""},"class_list":["post-1094","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages\/1094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/comments?post=1094"}],"version-history":[{"count":79,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages\/1094\/revisions"}],"predecessor-version":[{"id":13152,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages\/1094\/revisions\/13152"}],"wp:attachment":[{"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/media?parent=1094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}