{"id":16693,"date":"2026-03-13T12:52:28","date_gmt":"2026-03-13T11:52:28","guid":{"rendered":"https:\/\/alaska-france.fr\/boutique\/?page_id=16693"},"modified":"2026-03-13T14:48:43","modified_gmt":"2026-03-13T13:48:43","slug":"configurateur-pack","status":"publish","type":"page","link":"https:\/\/alaska-france.fr\/boutique\/configurateur-pack\/","title":{"rendered":"Configurateur pack"},"content":{"rendered":"            <style>\r\n                :root { \r\n                    --conf-primary: #122B4F; \r\n                    --conf-primary-light: #F4F7FA;\r\n                    --conf-accent: #E31E24; \r\n                    --conf-bg: #FFFFFF; \r\n                    --conf-border: #E2E8F0;\r\n                    --conf-text: #475569;\r\n                }\r\n                \r\n                \/* Container Global *\/\r\n                .dws-configurator-container { max-width: 1000px; margin: 40px auto; background: var(--conf-bg); border-radius: 20px; box-shadow: 0 20px 40px -10px rgba(18, 43, 79, 0.1); overflow: hidden; font-family: 'Inter', system-ui, sans-serif; border: 1px solid rgba(0,0,0,0.05); }\r\n                \r\n                \/* Banni\u00e8re Intro *\/\r\n                .dws-config-intro { background: linear-gradient(135deg, var(--conf-primary), #1a3c6d); color: white; padding: 40px 30px; text-align: center; position: relative; overflow: hidden; }\r\n                .dws-config-intro::after { content: ''; position: absolute; right: -10%; top: -50%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%); border-radius: 50%; }\r\n                .dws-intro-content h3 { font-size: 1.8em; margin: 0 0 10px 0; font-weight: 800; color: #fff; }\r\n                .dws-intro-content p { color: #cbd5e1; font-size: 1.05em; margin: 0; max-width: 600px; margin: 0 auto; line-height: 1.5; }\r\n                \r\n                \/* Stepper Moderne (Barre de progression) *\/\r\n                .dws-config-header { padding: 30px 20px; border-bottom: 1px solid var(--conf-border); background: #f8fafc; }\r\n                .dws-progress-bar { display: flex; justify-content: space-between; list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }\r\n                .dws-progress-bar::before { content: \"\"; position: absolute; top: 16px; left: 10%; right: 10%; height: 3px; background: var(--conf-border); z-index: -1; border-radius: 3px; }\r\n                .dws-progress-bar li { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #94a3b8; font-weight: 600; font-size: 0.85em; flex: 1; text-align: center; position: relative; transition: all 0.3s; }\r\n                .dws-progress-bar li::before { content: attr(data-step); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #fff; color: #64748b; border-radius: 50%; border: 3px solid var(--conf-border); font-weight: 800; transition: all 0.3s; box-shadow: 0 0 0 4px #f8fafc; z-index: 2; font-size: 14px; }\r\n                .dws-progress-bar li.active { color: var(--conf-primary); }\r\n                .dws-progress-bar li.active::before { border-color: var(--conf-primary); background: var(--conf-primary); color: #fff; }\r\n                \r\n                \/* Container des \u00e9tapes *\/\r\n                .dws-steps-container { padding: 40px 50px; }\r\n                .dws-step { display: none; animation: confFadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1); }\r\n                .dws-step.active { display: block; }\r\n                \r\n                \/* En-t\u00eates des \u00e9tapes *\/\r\n                .dws-step-header { text-align: center; margin-bottom: 35px; }\r\n                .dws-step-header h2 { color: var(--conf-primary); margin: 0 0 10px 0; font-weight: 800; font-size: 1.8em; letter-spacing: -0.5px; }\r\n                .dws-step-header p { color: var(--conf-text); margin: 0; font-size: 1.1em; }\r\n                \r\n                \/* Formulaire V\u00e9hicule (S\u00e9lecteurs) *\/\r\n                .dws-form-group { margin-bottom: 25px; max-width: 500px; margin-left: auto; margin-right: auto; }\r\n                .dws-form-group label { display: block; font-weight: 700; margin-bottom: 10px; color: var(--conf-primary); font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.5px; }\r\n                .dws-conf-select { width: 100%; padding: 16px 20px !important; border: 2px solid var(--conf-border) !important; border-radius: 12px !important; font-size: 1.05em !important; background-color: #fff !important; color: var(--conf-primary) !important; font-weight: 600 !important; appearance: none; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23122B4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C\/polyline%3E%3C\/svg%3E\") !important; background-repeat: no-repeat !important; background-position: right 15px center !important; background-size: 18px !important; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }\r\n                .dws-conf-select:focus { border-color: var(--conf-primary) !important; outline: none; box-shadow: 0 0 0 4px rgba(18, 43, 79, 0.1) !important; }\r\n                .dws-conf-select:disabled { background-color: #f1f5f9 !important; color: #94a3b8 !important; border-color: #e2e8f0 !important; cursor: not-allowed; background-image: none !important; }\r\n                \r\n                \/* Grille Produits *\/\r\n                .dws-step-top-actions { display: flex; justify-content: flex-end; margin-bottom: 20px; }\r\n                .dws-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 25px; margin-bottom: 40px; }\r\n                \r\n                \/* Cartes Produits Modernes *\/\r\n                .dws-conf-card { background: #fff; border: 2px solid var(--conf-border); border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; position: relative; overflow: hidden; }\r\n                .dws-conf-card:hover { border-color: #cbd5e1; box-shadow: 0 12px 25px -8px rgba(18, 43, 79, 0.15); transform: translateY(-4px); }\r\n                .dws-conf-card-img { height: 160px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }\r\n                .dws-conf-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }\r\n                .dws-conf-card-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }\r\n                .dws-conf-card h4 { font-size: 0.95em; margin: 0 0 15px 0; color: var(--conf-primary); font-weight: 600; line-height: 1.4; }\r\n                .dws-conf-card .price { display: block; font-weight: 800; color: var(--conf-accent); font-size: 1.25em; margin-bottom: 20px; }\r\n                \r\n                \/* Etat S\u00e9lectionn\u00e9 *\/\r\n                .dws-conf-card.selected { border-color: var(--conf-primary); background-color: var(--conf-primary-light); box-shadow: 0 0 0 1px var(--conf-primary), 0 10px 20px -5px rgba(18, 43, 79, 0.15); transform: translateY(-4px); }\r\n                .dws-conf-card.selected::after { content: '\\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 15px; right: 15px; background: var(--conf-primary); color: #fff; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }\r\n                \r\n                \/* Boutons *\/\r\n                .dws-step-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 30px; border-top: 1px solid var(--conf-border); }\r\n                button { cursor: pointer; border: none; font-family: inherit; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }\r\n                \r\n                .dws-btn-primary { background: var(--conf-accent); color: white; padding: 14px 32px; border-radius: 50px; font-size: 1.05em; box-shadow: 0 4px 12px rgba(227,30,36,0.25); }\r\n                .dws-btn-primary:not(:disabled):hover { background: #cc1a20; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(227,30,36,0.35); }\r\n                .dws-btn-primary:disabled { background: #cbd5e1; color: #94a3b8; box-shadow: none; cursor: not-allowed; }\r\n                \r\n                .dws-btn-secondary { background: #f1f5f9; color: var(--conf-primary); padding: 14px 28px; border-radius: 50px; font-size: 1em; }\r\n                .dws-btn-secondary:hover { background: #e2e8f0; color: #0f172a; }\r\n                \r\n                .dws-btn-outline { background: transparent; border: 2px solid #cbd5e1; color: #64748b; border-radius: 50px; }\r\n                .dws-btn-outline:hover { border-color: var(--conf-primary); color: var(--conf-primary); background: #f8fafc; }\r\n                \r\n                .dws-btn-sm { padding: 8px 18px !important; font-size: 0.9em !important; }\r\n                .dws-btn-large { padding: 18px 40px !important; font-size: 1.15em !important; }\r\n                .dws-btn-huge { width: 100%; max-width: 450px; padding: 20px !important; font-size: 1.2em !important; border-radius: 16px !important; }\r\n                \r\n                .dws-btn-select-product { width: 100%; background: #fff; color: var(--conf-primary); border: 2px solid var(--conf-border); padding: 12px; border-radius: 10px; font-size: 0.95em; }\r\n                .dws-conf-card:hover .dws-btn-select-product { border-color: var(--conf-primary); }\r\n                .dws-conf-card.selected .dws-btn-select-product { background: var(--conf-primary); color: white; border-color: var(--conf-primary); }\r\n\r\n                \/* R\u00e9sum\u00e9 \/ Devis Style *\/\r\n                .dws-summary-wrapper { max-width: 600px; margin: 0 auto 40px; }\r\n                .dws-summary-vehicle { background: var(--conf-primary); color: white; padding: 15px 25px; border-radius: 16px 16px 0 0; font-weight: 700; font-size: 1.1em; text-align: center; display: flex; justify-content: center; align-items: center; gap: 10px; }\r\n                .dws-summary-box { background: #fff; padding: 30px; border-radius: 0 0 16px 16px; border: 2px solid var(--conf-border); border-top: none; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); }\r\n                #dws-summary-list { list-style: none; padding: 0; margin: 0 0 25px 0; }\r\n                #dws-summary-list li { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px dashed #cbd5e1; color: var(--conf-primary); align-items: center; }\r\n                #dws-summary-list li:last-child { border-bottom: none; }\r\n                .dws-sum-name { font-weight: 600; display: flex; align-items: center; gap: 12px; line-height: 1.3; }\r\n                .dws-sum-price { font-weight: 800; font-size: 1.1em; white-space: nowrap; margin-left: 15px; }\r\n                .dws-summary-total { display: flex; justify-content: space-between; align-items: center; font-size: 1.4em; font-weight: 900; color: var(--conf-accent); background: var(--conf-primary-light); padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; }\r\n\r\n                \/* Empty state \/ Loading *\/\r\n                .dws-empty-state { grid-column: 1 \/ -1; text-align: center; padding: 50px 20px; background: #f8fafc; border-radius: 16px; border: 2px dashed #cbd5e1; color: #64748b; font-size: 1.1em; }\r\n                .dws-empty-state i { font-size: 2.5em; color: #94a3b8; margin-bottom: 15px; display: block; }\r\n                \r\n                .dws-loader-box { grid-column: 1 \/ -1; text-align: center; padding: 60px 20px; color: var(--conf-primary); }\r\n                .dws-loader-box i { font-size: 2.5em; color: var(--conf-accent); margin-bottom: 20px; }\r\n\r\n                \/* Animations *\/\r\n                @keyframes confFadeInUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }\r\n                @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.2); } 100% { transform: scale(1); opacity: 1; } }\r\n\r\n                \/* Responsive Mobile *\/\r\n                @media (max-width: 768px) { \r\n                    .dws-steps-container { padding: 30px 20px; } \r\n                    .dws-config-intro { padding: 30px 20px; }\r\n                    \r\n                    \/* Stepper Mobile *\/\r\n                    .dws-config-header { padding: 20px 15px; overflow-x: auto; -webkit-overflow-scrolling: touch; }\r\n                    .dws-progress-bar { justify-content: space-between; min-width: 100%; gap: 10px; }\r\n                    .dws-progress-bar li span { display: none; }\r\n                    .dws-progress-bar::before { left: 0; right: 0; }\r\n                    \r\n                    .dws-step-header h2 { font-size: 1.4em; }\r\n                    .dws-step-actions { flex-direction: column-reverse; gap: 15px; padding-top: 20px; } \r\n                    .dws-btn-primary, .dws-btn-secondary, .dws-btn-outline { width: 100%; justify-content: center; }\r\n                    .dws-step-top-actions { justify-content: center; }\r\n                    \r\n                    .dws-summary-box { padding: 20px 15px; }\r\n                    .dws-summary-total { flex-direction: column; text-align: center; gap: 10px; font-size: 1.25em; }\r\n                }\r\n            <\/style>\r\n                        <div id=\"dws-config-wrapper\" class=\"dws-configurator-container\">\r\n                \r\n                <div id=\"dws-config-intro\" class=\"dws-config-intro\">\r\n                    <div class=\"dws-intro-content\">\r\n                        <h3>Cr\u00e9ez l'am\u00e9nagement utilitaire parfait.<\/h3>\r\n                        <p>S\u00e9lectionnez votre v\u00e9hicule, choisissez vos \u00e9quipements \u00e9tape par \u00e9tape, et ajoutez votre pack complet \u00e0 votre devis en 1 clic.<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"dws-config-header\">\r\n                    <ul class=\"dws-progress-bar\">\r\n                        <li class=\"active\" data-step=\"1\"><span>V\u00e9hicule<\/span><\/li>\r\n                        <li data-step=\"2\"><span>Plancher<\/span><\/li>\r\n                        <li data-step=\"3\"><span>Rangement<\/span><\/li>\r\n                        <li data-step=\"4\"><span>Portage<\/span><\/li>\r\n                        <li data-step=\"5\"><span>S\u00e9curit\u00e9<\/span><\/li>\r\n                        <li data-step=\"6\"><span>R\u00e9sum\u00e9<\/span><\/li>\r\n                    <\/ul>\r\n                <\/div>\r\n\r\n                <div class=\"dws-steps-container\">\r\n                    \r\n                    <div class=\"dws-step active\" id=\"dws-step-1\">\r\n                        <div class=\"dws-step-header\">\r\n                            <h2>Veuillez identifier votre utilitaire<\/h2>\r\n                            <p>Afin de vous garantir une compatibilit\u00e9 \u00e0 100%, s\u00e9lectionnez votre v\u00e9hicule.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"config-wrapper ak-avu\" data-instance=\"conf_pack_dws\" data-p-marque=\"marque\" data-p-modele=\"modele\" data-p-dimension=\"dimension\" style=\"padding: 0; background: transparent; box-shadow: none;\">\r\n                            \r\n                            <div class=\"dws-form-group\">\r\n                                <label>Marque de l'utilitaire<\/label>\r\n                                <select id=\"conf_pack_dws_marque\" class=\"dws-conf-select config-select\" data-role=\"marque\" autocomplete=\"off\">\r\n                                    <option value=\"\">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=\"dws-form-group\">\r\n                                <label>Mod\u00e8le exact<\/label>\r\n                                <select id=\"conf_pack_dws_modele\" class=\"dws-conf-select config-select\" data-role=\"modele\" disabled autocomplete=\"off\">\r\n                                    <option value=\"\">S\u00e9lectionnez d'abord la marque<\/option>\r\n                                <\/select>\r\n                            <\/div>\r\n                            <div class=\"dws-form-group\">\r\n                                <label>Taille \/ Dimension<\/label>\r\n                                <select id=\"conf_pack_dws_dimension\" class=\"dws-conf-select config-select\" data-role=\"dimension\" disabled autocomplete=\"off\">\r\n                                    <option value=\"\">S\u00e9lectionnez d'abord le mod\u00e8le<\/option>\r\n                                <\/select>\r\n                            <\/div>\r\n\r\n                            <div class=\"dws-step-actions\" style=\"justify-content: center;\">\r\n                                <button class=\"dws-btn-next-step1 dws-btn-primary dws-btn-large\" disabled>D\u00e9marrer la configuration <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"dws-step\" id=\"dws-step-2\">\r\n                        <div class=\"dws-step-header\">\r\n                            <h2>Prot\u00e9gez votre espace de charge<\/h2>\r\n                            <p>S\u00e9lectionnez un ou plusieurs planchers adapt\u00e9s.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"dws-step-top-actions\">\r\n                            <button class=\"dws-btn-next dws-btn-outline\" data-next=\"3\">Ignorer \/ Suivant <i class=\"fas fa-angle-right\"><\/i><\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"dws-products-grid\" id=\"dws-grid-step-2\">En attente...<\/div>\r\n                        \r\n                        <div class=\"dws-step-actions\">\r\n                            <button class=\"dws-btn-prev dws-btn-secondary\" data-prev=\"1\"><i class=\"fas fa-arrow-left\"><\/i> Pr\u00e9c\u00e9dent<\/button>\r\n                            <button class=\"dws-btn-next dws-btn-primary\" data-next=\"3\">Suivant <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"dws-step\" id=\"dws-step-3\">\r\n                        <div class=\"dws-step-header\">\r\n                            <h2>Optimisez votre rangement<\/h2>\r\n                            <p>Ajoutez des meubles en bois ou m\u00e9tal.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"dws-step-top-actions\">\r\n                            <button class=\"dws-btn-next dws-btn-outline\" data-next=\"4\">Ignorer \/ Suivant <i class=\"fas fa-angle-right\"><\/i><\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"dws-products-grid\" id=\"dws-grid-step-3\">En attente...<\/div>\r\n                        \r\n                        <div class=\"dws-step-actions\">\r\n                            <button class=\"dws-btn-prev dws-btn-secondary\" data-prev=\"2\"><i class=\"fas fa-arrow-left\"><\/i> Pr\u00e9c\u00e9dent<\/button>\r\n                            <button class=\"dws-btn-next dws-btn-primary\" data-next=\"4\">Suivant <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"dws-step\" id=\"dws-step-4\">\r\n                        <div class=\"dws-step-header\">\r\n                            <h2>Transportez plus de mat\u00e9riel<\/h2>\r\n                            <p>Galeries de toit et \u00e9chelles compatibles.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"dws-step-top-actions\">\r\n                            <button class=\"dws-btn-next dws-btn-outline\" data-next=\"5\">Ignorer \/ Suivant <i class=\"fas fa-angle-right\"><\/i><\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"dws-products-grid\" id=\"dws-grid-step-4\">En attente...<\/div>\r\n                        \r\n                        <div class=\"dws-step-actions\">\r\n                            <button class=\"dws-btn-prev dws-btn-secondary\" data-prev=\"3\"><i class=\"fas fa-arrow-left\"><\/i> Pr\u00e9c\u00e9dent<\/button>\r\n                            <button class=\"dws-btn-next dws-btn-primary\" data-next=\"5\">Suivant <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"dws-step\" id=\"dws-step-5\">\r\n                        <div class=\"dws-step-header\">\r\n                            <h2>S\u00e9curisez votre outillage<\/h2>\r\n                            <p>Serrures antivol haute s\u00e9curit\u00e9.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"dws-step-top-actions\">\r\n                            <button class=\"dws-btn-next dws-btn-outline\" data-next=\"6\">Ignorer \/ Suivant <i class=\"fas fa-angle-right\"><\/i><\/button>\r\n                        <\/div>\r\n\r\n                        <div class=\"dws-products-grid\" id=\"dws-grid-step-5\">En attente...<\/div>\r\n                        \r\n                        <div class=\"dws-step-actions\">\r\n                            <button class=\"dws-btn-prev dws-btn-secondary\" data-prev=\"4\"><i class=\"fas fa-arrow-left\"><\/i> Pr\u00e9c\u00e9dent<\/button>\r\n                            <button class=\"dws-btn-next dws-btn-primary\" data-next=\"6\">Voir mon Pack <i class=\"fas fa-check-circle\"><\/i><\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"dws-step\" id=\"dws-step-6\">\r\n                        <div class=\"dws-step-header\">\r\n                            <h2>Votre Pack Sur-Mesure<\/h2>\r\n                            <p>V\u00e9rifiez votre s\u00e9lection avant de l'ajouter au devis.<\/p>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"dws-summary-wrapper\">\r\n                            <div class=\"dws-summary-vehicle\" id=\"dws-summary-vehicle-name\">\r\n                                <\/div>\r\n                            <div class=\"dws-summary-box\">\r\n                                <ul id=\"dws-summary-list\"><\/ul>\r\n                                <div class=\"dws-summary-total\">\r\n                                    <span>Total du Pack<\/span>\r\n                                    <strong id=\"dws-total-price\">0,00 \u20ac<\/strong>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"dws-step-actions\" style=\"justify-content: center; gap: 20px; flex-wrap: wrap;\">\r\n                            <button class=\"dws-btn-prev dws-btn-secondary\" data-prev=\"5\"><i class=\"fas fa-pen\"><\/i> Modifier le pack<\/button>\r\n                            <button class=\"dws-btn-primary dws-btn-huge\" id=\"dws-add-pack-quote\"><i class=\"fas fa-file-invoice-dollar\"><\/i> Finaliser votre devis<\/button>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n                        <script>\r\n            jQuery(document).ready(function($) {\r\n                var selections = {}; \r\n                var ajaxurl = \"https:\/\/alaska-france.fr\/boutique\/wp-admin\/admin-ajax.php\";\r\n                var inst = 'conf_pack_dws';\r\n\r\n                \/\/ --- 1. GESTION DES SELECTS VEHICULE ---\r\n                $('#' + inst + '_marque').on('change', function() { \r\n                    var val = $(this).val();\r\n                    var $modele = $('#' + inst + '_modele');\r\n                    var $dimension = $('#' + inst + '_dimension');\r\n                    var $btnNext = $('.dws-btn-next-step1');\r\n\r\n                    $modele.prop('disabled', true).html('<option value=\"\">' + (val ? 'Chargement...' : 'S\u00e9lectionnez un mod\u00e8le...') + '<\/option>');\r\n                    $dimension.prop('disabled', true).html('<option value=\"\">S\u00e9lectionnez une dimension...<\/option>');\r\n                    $btnNext.prop('disabled', true);\r\n                });\r\n\r\n                $('#' + inst + '_modele').on('change', function() {\r\n                    var val = $(this).val();\r\n                    var $dimension = $('#' + inst + '_dimension');\r\n                    var $btnNext = $('.dws-btn-next-step1');\r\n\r\n                    $dimension.prop('disabled', true).html('<option value=\"\">' + (val ? 'Chargement...' : 'S\u00e9lectionnez une dimension...') + '<\/option>');\r\n                    $btnNext.prop('disabled', true);\r\n                });\r\n\r\n                $('#' + inst + '_dimension').on('change', function() {\r\n                    var val = $(this).val();\r\n                    var $btnNext = $('.dws-btn-next-step1');\r\n                    if (val) {\r\n                        $btnNext.prop('disabled', false);\r\n                    } else {\r\n                        $btnNext.prop('disabled', true);\r\n                    }\r\n                });\r\n\r\n                \/\/ --- 2. LOGIQUE DE NAVIGATION AVEC SCROLL ---\r\n                $('.dws-btn-next-step1, .dws-btn-next, .dws-btn-prev').on('click', function(e) {\r\n                    e.preventDefault();\r\n                    \r\n                    var targetStep = $(this).data('next') || $(this).data('prev');\r\n                    if ($(this).hasClass('dws-btn-next-step1')) {\r\n                        targetStep = 2;\r\n                    }\r\n                    \r\n                    \/\/ Cacher l'intro d\u00e8s l'\u00e9tape 2\r\n                    if (targetStep > 1) {\r\n                        $('#dws-config-intro').slideUp(400);\r\n                    } else {\r\n                        $('#dws-config-intro').slideDown(400);\r\n                    }\r\n                    \r\n                    if ($(this).hasClass('dws-btn-next-step1') || $(this).hasClass('dws-btn-next')) {\r\n                        if (targetStep > 1 && targetStep < 6) {\r\n                            loadStepProducts(targetStep);\r\n                        }\r\n                    }\r\n\r\n                    if (targetStep === 6) { updateSummary(); }\r\n\r\n                    \/\/ Changement d'\u00e9tape UI\r\n                    $('.dws-step').removeClass('active');\r\n                    setTimeout(function() {\r\n                        $('#dws-step-' + targetStep).addClass('active');\r\n                    }, 50); \r\n                    \r\n                    \/\/ Mise \u00e0 jour de la barre de progression\r\n                    $('.dws-progress-bar li').removeClass('active');\r\n                    $('.dws-progress-bar li').each(function() {\r\n                        if ($(this).data('step') <= targetStep) { $(this).addClass('active'); }\r\n                    });\r\n\r\n                    \/\/ Scroll fluide vers le haut\r\n                    var offsetTop = $('#dws-config-wrapper').offset().top - 40;\r\n                    $('html, body').animate({ scrollTop: offsetTop }, 500, 'swing'); \r\n                });\r\n\r\n                \/\/ --- 3. SELECTION DES PRODUITS (S\u00c9LECTION MULTIPLE AJOUT\u00c9E) ---\r\n                $(document).on('click', '.dws-conf-card', function() {\r\n                    var grid = $(this).closest('.dws-products-grid');\r\n                    var stepId = grid.attr('id').replace('dws-grid-step-', '');\r\n                    var $btn = $(this).find('.dws-btn-select-product');\r\n                    var productId = $(this).data('id');\r\n                    \r\n                    \/\/ Initialisation de l'objet pour l'\u00e9tape si vide\r\n                    if (!selections[stepId]) selections[stepId] = {};\r\n                    \r\n                    if($(this).hasClass('selected')) {\r\n                        $(this).removeClass('selected');\r\n                        $btn.text('S\u00e9lectionner');\r\n                        delete selections[stepId][productId];\r\n                    } else {\r\n                        \/\/ ON NE SUPPRIME PLUS LA SELECTION DES AUTRES CARTES\r\n                        $(this).addClass('selected');\r\n                        $btn.html('S\u00e9lectionn\u00e9');\r\n                        \r\n                        selections[stepId][productId] = {\r\n                            id: productId,\r\n                            name: $(this).find('h4').text(),\r\n                            price: parseFloat($(this).data('price'))\r\n                        };\r\n                    }\r\n                });\r\n\r\n                \/\/ --- 4. CHARGEMENT DES PRODUITS (AJAX & AUTO-SKIP) ---\r\n                function loadStepProducts(stepNum) {\r\n                    var grid = $('#dws-grid-step-' + stepNum);\r\n                    var marque = $('#' + inst + '_marque').val() || '';\r\n                    var modele = $('#' + inst + '_modele').val() || '';\r\n                    var dimension = $('#' + inst + '_dimension').val() || '';\r\n                    \r\n                    if (grid.find('.dws-conf-card').length === 0 && grid.find('.dws-empty-state').length === 0) {\r\n                        grid.html('<div class=\"dws-loader-box\"><i class=\"fas fa-circle-notch fa-spin\"><\/i><br><strong>Recherche des \u00e9quipements compatibles avec votre ' + modele.toUpperCase() + '...<\/strong><\/div>');\r\n                        \r\n                        $.post(ajaxurl, {\r\n                            action: 'dws_get_step_products',\r\n                            step: stepNum,\r\n                            marque: marque,\r\n                            modele: modele,\r\n                            dimension: dimension\r\n                        }, function(response) {\r\n                            if (response.success) {\r\n                                grid.html(response.data.html);\r\n                                \r\n                                \/\/ AUTO-SKIP : Si la cat\u00e9gorie est vide, on passe \u00e0 la suivante\r\n                                if (response.data.html.indexOf('dws-empty-state') !== -1) {\r\n                                    setTimeout(function() {\r\n                                        $('#dws-step-' + stepNum + ' .dws-btn-next').trigger('click');\r\n                                    }, 1500); \/\/ D\u00e9lai de 1,5s pour laisser le temps de lire le message\r\n                                }\r\n\r\n                                \/\/ Restauration des s\u00e9lections (pour multiples produits)\r\n                                if (selections[stepNum]) {\r\n                                    $.each(selections[stepNum], function(pid, item) {\r\n                                        var $selectedCard = grid.find('.dws-conf-card[data-id=\"'+pid+'\"]');\r\n                                        $selectedCard.addClass('selected').find('.dws-btn-select-product').html('S\u00e9lectionn\u00e9');\r\n                                    });\r\n                                }\r\n                            }\r\n                        });\r\n                    }\r\n                }\r\n\r\n                \/\/ --- 5. RESUME DU PACK (MISE \u00c0 JOUR MULTI-S\u00c9LECTION) ---\r\n                function updateSummary() {\r\n                    var list = $('#dws-summary-list');\r\n                    var vehicleBox = $('#dws-summary-vehicle-name');\r\n                    var total = 0;\r\n                    var hasItems = false;\r\n                    list.empty();\r\n                    \r\n                    \/\/ Nom du v\u00e9hicule\r\n                    var vehName = ($('#' + inst + '_marque').val() + ' ' + $('#' + inst + '_modele').val() + ' - ' + $('#' + inst + '_dimension').val()).toUpperCase();\r\n                    vehicleBox.html('<i class=\"fas fa-truck\"><\/i> ' + vehName);\r\n\r\n                    if(Object.keys(selections).length === 0) {\r\n                        list.append('<li><span class=\"dws-sum-name\" style=\"color:#64748b;\"><i class=\"fas fa-info-circle\"><\/i> Vous n\\'avez s\u00e9lectionn\u00e9 aucun \u00e9quipement.<\/span><\/li>');\r\n                    } else {\r\n                        $.each(selections, function(step, stepItems) {\r\n                            $.each(stepItems, function(pid, item) {\r\n                                hasItems = true;\r\n                                var priceDisplay = item.price > 0 ? item.price.toFixed(2) + ' \u20ac' : '<span style=\"font-size:0.85em; font-weight:600; color:#64748b; background:#f1f5f9; padding:4px 8px; border-radius:6px;\">Sur devis<\/span>';\r\n                                list.append('<li><span class=\"dws-sum-name\"><i class=\"fas fa-check\" style=\"color:var(--conf-accent); background:#FEF2F2; padding:5px; border-radius:50%; font-size:0.8em;\"><\/i>' + item.name + '<\/span> <span class=\"dws-sum-price\">' + priceDisplay + '<\/span><\/li>');\r\n                                total += item.price;\r\n                            });\r\n                        });\r\n                        \r\n                        if (!hasItems) {\r\n                            list.append('<li><span class=\"dws-sum-name\" style=\"color:#64748b;\"><i class=\"fas fa-info-circle\"><\/i> Vous n\\'avez s\u00e9lectionn\u00e9 aucun \u00e9quipement.<\/span><\/li>');\r\n                        }\r\n                    }\r\n                    $('#dws-total-price').text(total > 0 ? total.toFixed(2) + ' \u20ac' : 'Sur devis complet');\r\n                }\r\n\r\n                \/\/ --- 6. CONNEXION AU PLUGIN DE DEVIS (MISE \u00c0 JOUR MULTI-S\u00c9LECTION) ---\r\n                $('#dws-add-pack-quote').on('click', function(e) {\r\n                    e.preventDefault();\r\n                    \r\n                    var pids = [];\r\n                    $.each(selections, function(step, stepItems) {\r\n                        $.each(stepItems, function(pid, item) {\r\n                            pids.push(item.id);\r\n                        });\r\n                    });\r\n\r\n                    if (pids.length === 0) {\r\n                        alert(\"Votre pack est vide. Veuillez s\u00e9lectionner au moins un \u00e9quipement avant de finaliser votre devis.\");\r\n                        return;\r\n                    }\r\n\r\n                    var marque = $('#' + inst + '_marque').val();\r\n                    var modele = $('#' + inst + '_modele').val();\r\n                    var dimension = $('#' + inst + '_dimension').val();\r\n\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\r\n                    var $btn = $(this);\r\n                    var originalText = $btn.html();\r\n                    $btn.html('<i class=\"fas fa-circle-notch fa-spin\"><\/i> Cr\u00e9ation du devis...').prop('disabled', true);\r\n\r\n                    $.post(ajaxurl, {\r\n                        action: 'dws_add_pack_to_quote',\r\n                        product_ids: pids\r\n                    }, function(response) {\r\n                        if (response.success) {\r\n                            window.location.href = '\/boutique\/demande-devis\/'; \r\n                        } else {\r\n                            alert(response.data.message || \"Une erreur est survenue.\");\r\n                            $btn.html(originalText).prop('disabled', false);\r\n                        }\r\n                    }).fail(function() {\r\n                        alert(\"Erreur de connexion avec le serveur.\");\r\n                        $btn.html(originalText).prop('disabled', false);\r\n                    });\r\n                });\r\n            });\r\n            <\/script>\r\n            \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":16382,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-parts\/template-page-builders.php","meta":{"footnotes":""},"class_list":["post-16693","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages\/16693","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=16693"}],"version-history":[{"count":4,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages\/16693\/revisions"}],"predecessor-version":[{"id":16699,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/pages\/16693\/revisions\/16699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/media\/16382"}],"wp:attachment":[{"href":"https:\/\/alaska-france.fr\/boutique\/wp-json\/wp\/v2\/media?parent=16693"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}