{"id":6599,"date":"2026-04-02T15:37:10","date_gmt":"2026-04-02T15:37:10","guid":{"rendered":"https:\/\/apf-pooldesign.com\/?page_id=6599"},"modified":"2026-04-23T14:35:18","modified_gmt":"2026-04-23T14:35:18","slug":"guide-de-choix","status":"publish","type":"page","link":"https:\/\/apf-pooldesign.com\/en\/guide-de-choix\/","title":{"rendered":"Selection guide"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6599\" class=\"elementor elementor-6599\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-4e4be0b e-flex e-con-boxed e-con e-parent\" data-id=\"4e4be0b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-60f8dc5 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"60f8dc5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\t<div id=\"apf-configurateur\" x-data=\"configurateur()\" x-cloak>\n\n\t\t<!-- ===================================================\n\t\t     \u00c9CRAN 0 \u2014 Accueil \/ s\u00e9lection du flow\n\t\t     =================================================== -->\n\t\t<div class=\"cfg-screen cfg-screen--home\" x-show=\"screen === 'home'\" x-transition.opacity>\n\n\t\t\t<div class=\"cfg-home-header\">\n\t\t\t\t<h2 class=\"cfg-home-title\">Bienvenue dans notre guide de choix<\/h2>\n\t\t\t\t<p class=\"cfg-home-subtitle\">S\u00e9lectionnez le type de produit attendu.<\/p>\n\t\t\t<\/div>\n\n\t\t\t<div class=\"cfg-cards\">\n\n\t\t\t\t<!-- Card Rev\u00eatement -->\n\t\t\t\t<div class=\"cfg-card\"\n\t\t\t\t     :class=\"{ 'cfg-card--selected': selectedFlow === 'revetement' }\"\n\t\t\t\t     @click=\"selectFlow('revetement')\"\n\t\t\t\t     role=\"button\"\n\t\t\t\t     tabindex=\"0\"\n\t\t\t\t     @keydown.enter.prevent=\"selectFlow('revetement')\"\n\t\t\t\t     @keydown.space.prevent=\"selectFlow('revetement')\">\n\t\t\t\t\t<div class=\"cfg-card-image cfg-card-image--revetement\"\n\t\t\t\t     \t\t\t\t     style=\"background-image: url('https:\/\/apf-pooldesign.com\/wp-content\/uploads\/2026\/04\/revetement.webp')\"\n\t\t\t\t     ><\/div>\n\t\t\t\t\t<div class=\"cfg-card-footer\">\n\t\t\t\t\t\t<span class=\"cfg-card-check\" :class=\"{ 'cfg-card-check--active': selectedFlow === 'revetement' }\"><\/span>\n\t\t\t\t\t\t<span class=\"cfg-card-label\">Rev\u00eatement<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<!-- Card Couverture -->\n\t\t\t<div class=\"cfg-card\"\n\t\t\t     :class=\"{ 'cfg-card--selected': selectedFlow === 'couverture' }\"\n\t\t\t     @click=\"selectFlow('couverture')\"\n\t\t\t     role=\"button\"\n\t\t\t     tabindex=\"0\"\n\t\t\t     @keydown.enter.prevent=\"selectFlow('couverture')\"\n\t\t\t     @keydown.space.prevent=\"selectFlow('couverture')\">\n\t\t\t\t<div class=\"cfg-card-image cfg-card-image--couverture\"\n\t\t\t     \t\t\t     style=\"background-image: url('https:\/\/apf-pooldesign.com\/wp-content\/uploads\/2026\/04\/couverture.webp')\"\n\t\t\t     ><\/div>\n\t\t\t\t<div class=\"cfg-card-footer\">\n\t\t\t\t\t<span class=\"cfg-card-check\" :class=\"{ 'cfg-card-check--active': selectedFlow === 'couverture' }\"><\/span>\n\t\t\t\t\t<span class=\"cfg-card-label\">Couverture<\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t\t\t\t<div class=\"cfg-home-actions\">\n\t\t\t<button class=\"cfg-btn cfg-btn--primary\"\n\t\t\t        :disabled=\"!canContinue\"\n\t\t\t        @click=\"continueFromHome()\">\n\t\t\t\tContinuer\n\t\t\t<\/button>\n\t\t\t<\/div>\n\n\t\t<\/div><!-- \/.cfg-screen--home -->\n\n\n\t\t<!-- ===================================================\n\t\t     \u00c9CRAN WIZARD \u2014 \u00e9tapes 1 \u00e0 5\n\t\t     =================================================== -->\n\t\t<div class=\"cfg-screen cfg-screen--wizard\" x-show=\"screen === 'wizard'\" x-transition.opacity>\n\n\t\t\t<!-- Breadcrumb -->\n\t\t\t<div class=\"cfg-wizard-breadcrumb\">\n\t\t\t\t<span>Guide de choix<\/span>\n\t\t\t\t<span class=\"cfg-breadcrumb-sep\">\u203a<\/span>\n\t\t\t\t<span x-text=\"flowConfig ? flowConfig.label : ''\"><\/span>\n\t\t\t<\/div>\n\n\t\t\t<!-- Layout 2 colonnes -->\n\t\t\t<div class=\"cfg-wizard-layout\">\n\n\t\t\t\t<!-- \u2500\u2500 Colonne gauche : r\u00e9capitulatif \u2500\u2500 -->\n\t\t\t\t<aside class=\"cfg-recap\" x-ref=\"recap\">\n\t\t\t\t\t<!-- Fond blanc glissant sur l'\u00e9tape active -->\n\t\t\t\t\t<div class=\"cfg-recap-highlight\"\n\t\t\t\t\t     :style=\"{ transform: 'translateY(' + highlightY + 'px)', height: highlightH + 'px' }\">\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"cfg-recap-title\">R\u00e9capitulatif<\/p>\n\t\t\t\t\t<template x-for=\"(step, index) in steps\" :key=\"'recap-' + step.id\">\n\t\t\t\t\t\t<div class=\"cfg-recap-row\"\n\t\t\t\t\t\t     :class=\"{\n\t\t\t\t\t\t         'cfg-recap-row--active':    index === currentStep,\n\t\t\t\t\t\t         'cfg-recap-row--completed': index < currentStep,\n\t\t\t\t\t\t     }\">\n\t\t\t\t\t\t\t<div class=\"cfg-recap-content\">\n\t\t\t\t\t\t\t\t<span class=\"cfg-recap-label\" x-text=\"step.label\"><\/span>\n\t\t\t\t\t\t\t\t<span class=\"cfg-recap-value\"\n\t\t\t\t\t\t\t\t      :class=\"{ 'cfg-recap-value--empty': answers[step.id] == null }\"\n\t\t\t\t\t\t\t\t      x-text=\"getAnswerLabel(step.id)\">\n\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<button class=\"cfg-recap-edit\"\n\t\t\t\t\t\t\t        x-show=\"index < currentStep\"\n\t\t\t\t\t\t\t        @click=\"goToStep(index)\"\n\t\t\t\t\t\t\t        title=\"Modifier ce choix\"\n\t\t\t\t\t\t\t        type=\"button\">\n\t\t\t\t\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t<path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/>\n\t\t\t\t\t\t\t\t\t<path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/>\n\t\t\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/template>\n\t\t\t\t<\/aside>\n\n\t\t\t\t<!-- \u2500\u2500 Colonne droite : stepper + question + choix \u2500\u2500 -->\n\t\t\t\t<div class=\"cfg-wizard-main\">\n\n\t\t\t\t\t<!-- Stepper -->\n\t\t\t\t\t<div class=\"cfg-stepper\" role=\"list\">\n\t\t\t\t\t\t<template x-for=\"(step, index) in steps\" :key=\"'step-' + step.id\">\n\t\t\t\t\t\t\t<div class=\"cfg-stepper-item\" role=\"listitem\">\n\t\t\t\t\t\t\t\t<div class=\"cfg-step-circle\"\n\t\t\t\t\t\t\t\t     :class=\"{\n\t\t\t\t\t\t\t\t         'cfg-step-circle--done':   index < currentStep,\n\t\t\t\t\t\t\t\t         'cfg-step-circle--active': index === currentStep,\n\t\t\t\t\t\t\t\t     }\"\n\t\t\t\t\t\t\t\t     :aria-current=\"index === currentStep ? 'step' : false\">\n\t\t\t\t\t\t\t\t\t<span x-show=\"index < currentStep\" aria-hidden=\"true\">\u2713<\/span>\n\t\t\t\t\t\t\t\t\t<span x-show=\"index >= currentStep\" x-text=\"index + 1\"><\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"cfg-step-line\"\n\t\t\t\t\t\t\t\t     x-show=\"index < steps.length - 1\"\n\t\t\t\t\t\t\t\t     :class=\"{ 'cfg-step-line--done': index < currentStep }\">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/template>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<!-- Contenu de l'\u00e9tape courante -->\n\t\t\t\t\t<template x-if=\"currentStepData\">\n\t\t\t\t\t\t<div class=\"cfg-wizard-step\">\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<p class=\"cfg-step-label\" x-text='currentStepData.label'><\/p>\t\n\t\t\t\t\t\t\t<p class=\"cfg-step-question\" x-text=\"currentStepData.question\"><\/p>\n\n\t\t\t\t<!-- Pills (\u00e9tapes normales) -->\n\t\t\t\t<div class=\"cfg-pills\" x-show=\"currentStepData.type !== 'cards' && currentStepData.type !== 'checkbox'\">\n\t\t\t\t\t\t<template x-for=\"[value, label] in Object.entries(currentStepData.choices || {})\" :key=\"value\">\n\t\t\t\t\t\t\t<button class=\"cfg-pill\"\n\t\t\t\t\t\t\t        :class=\"{\n\t\t\t\t\t\t\t            'cfg-pill--active':   answers[currentStepData.id] === value,\n\t\t\t\t\t\t\t            'cfg-pill--disabled': isChoiceDisabled(currentStepData, value),\n\t\t\t\t\t\t\t        }\"\n\t\t\t\t\t\t\t        :disabled=\"isChoiceDisabled(currentStepData, value)\"\n\t\t\t\t\t\t\t        @click=\"selectAnswer(value)\"\n\t\t\t\t\t\t\t        type=\"button\">\n\t\t\t\t\t\t\t\t<span x-text=\"label\"><\/span>\n\t\t\t\t\t\t\t\t<span class=\"cfg-pill-check\" :class=\"{ 'cfg-pill-check--active': answers[currentStepData.id] === value }\"><\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<\/template>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t\t<!-- \u00c9tape cards (rendu en eau) -->\n\t\t\t\t\t<div class=\"cfg-rendu-cards\" x-show=\"currentStepData.type === 'cards'\">\n\t\t\t\t\t\t<template x-for=\"[value, label] in Object.entries(currentStepData.choices || {})\" :key=\"'rendu-' + value\">\n\t\t\t\t\t\t\t<div class=\"cfg-rendu-card\"\n\t\t\t\t\t\t\t     :class=\"{ 'cfg-rendu-card--selected': answers[currentStepData.id] === value }\"\n\t\t\t\t\t\t\t     @click=\"selectAnswer(value)\"\n\t\t\t\t\t\t\t     role=\"button\"\n\t\t\t\t\t\t\t     tabindex=\"0\"\n\t\t\t\t\t\t\t     @keydown.enter.prevent=\"selectAnswer(value)\"\n\t\t\t\t\t\t\t     @keydown.space.prevent=\"selectAnswer(value)\">\n\t\t\t\t\t\t\t\t<div class=\"cfg-rendu-card-image\"\n\t\t\t\t\t\t\t\t     :style=\"(currentStepData.images && currentStepData.images[value]) ? { backgroundImage: 'url(' + currentStepData.images[value] + ')' } : {}\">\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"cfg-card-footer\">\n\t\t\t\t\t\t\t\t\t<span class=\"cfg-card-check\"\n\t\t\t\t\t\t\t\t\t      :class=\"{ 'cfg-card-check--active': answers[currentStepData.id] === value }\">\n\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"cfg-card-label\" x-text=\"label\"><\/span>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/template>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t<!-- \u00c9tape checkbox (multi-s\u00e9lection) -->\n\t\t\t\t<div class=\"cfg-pills\" x-show=\"currentStepData.type === 'checkbox'\">\n\t\t\t\t\t<template x-for=\"[value, label] in Object.entries(currentStepData.choices || {})\" :key=\"'chk-' + value\">\n\t\t\t\t\t\t<button class=\"cfg-pill\"\n\t\t\t\t\t\t        :class=\"{\n\t\t\t\t\t\t            'cfg-pill--active':   (answers[currentStepData.id] || []).includes(value),\n\t\t\t\t\t\t            'cfg-pill--disabled': isChoiceDisabled(currentStepData, value),\n\t\t\t\t\t\t        }\"\n\t\t\t\t\t\t        :disabled=\"isChoiceDisabled(currentStepData, value)\"\n\t\t\t\t\t\t        @click=\"toggleCheckbox(value)\"\n\t\t\t\t\t\t        type=\"button\">\n\t\t\t\t\t\t\t<span x-text=\"label\"><\/span>\n\t\t\t\t\t\t\t<span class=\"cfg-pill-check\" :class=\"{ 'cfg-pill-check--active': (answers[currentStepData.id] || []).includes(value) }\"><\/span>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/template>\n\t\t\t\t<\/div>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/template>\n\n\t\t\t\t\t<!-- Navigation -->\n\t\t\t\t\t<div class=\"cfg-wizard-nav\">\n\t\t\t\t\t\t<button class=\"cfg-btn cfg-btn--secondary\" @click=\"goPrev()\" type=\"button\">\n\t\t\t\t\t\t\tPr\u00e9c\u00e9dent\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<button class=\"cfg-btn cfg-btn--primary\"\n\t\t\t\t\t\t        :disabled=\"!canGoNext\"\n\t\t\t\t\t\t        @click=\"goNext()\"\n\t\t\t\t\t\t        type=\"button\">\n\t\t\t\t\t\t\t<span x-show=\"!isLastStep\">Suivant<\/span>\n\t\t\t\t\t\t\t<span x-show=\"isLastStep\">Voir les r\u00e9sultats<\/span>\n\t\t\t\t\t\t<\/button>\n\t\t\t\t\t<\/div>\n\n\t\t\t\t<\/div><!-- \/.cfg-wizard-main -->\n\n\t\t\t<\/div><!-- \/.cfg-wizard-layout -->\n\n\t\t<\/div><!-- \/.cfg-screen--wizard -->\n\n\n\t\t<!-- ===================================================\n\t\t     \u00c9CRAN R\u00c9SULTATS \u2014 \u00e9tape 6\n\t\t     =================================================== -->\n\t\t<div class=\"cfg-screen cfg-screen--results\" x-show=\"screen === 'results'\" x-transition.opacity>\n\n\t\t\t<!-- Stepper full coch\u00e9 -->\n\t\t\t<div class=\"cfg-stepper cfg-stepper--done\" role=\"list\">\n\t\t\t\t<template x-for=\"(step, index) in steps\" :key=\"'res-step-' + step.id\">\n\t\t\t\t\t<div class=\"cfg-stepper-item\" role=\"listitem\">\n\t\t\t\t\t\t<div class=\"cfg-step-circle cfg-step-circle--done\">\n\t\t\t\t\t\t\t<span aria-hidden=\"true\">\u2713<\/span>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<div class=\"cfg-step-line cfg-step-line--done\"\n\t\t\t\t\t\t     x-show=\"index < steps.length - 1\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/template>\n\t\t\t<\/div>\n\n\t\t\t<!-- En-t\u00eate -->\n\t\t\t<div class=\"cfg-results-header\">\n\t\t\t\t<h3 class=\"cfg-results-title\">Vous pouvez b\u00e9n\u00e9ficier de tous ces mod\u00e8les&nbsp;!<\/h3>\n\t\t\t\t<p class=\"cfg-results-subtitle\">Cliquez pour visualiser une finition et vous rendre sur la page pour plus de d\u00e9tails.<\/p>\n\t\t\t<\/div>\n\n\t\t\t<!-- Chargement -->\n\t\t\t<div class=\"cfg-results-loading\" x-show=\"resultsLoading\">\n\t\t\t\t<div class=\"cfg-spinner\"><\/div>\n\t\t\t\t<p>Recherche en cours\u2026<\/p>\n\t\t\t<\/div>\n\n\t\t\t<!-- Erreur -->\n\t\t\t<p class=\"cfg-notice cfg-notice--error\"\n\t\t\t   x-show=\"resultsError\"\n\t\t\t   x-text=\"resultsError\">\n\t\t\t<\/p>\n\n\t\t\t<!-- Grille de cards coloris -->\n\t\t\t<div class=\"cfg-results-grid\"\n\t\t\t     x-show=\"! resultsLoading && results.length > 0\">\n\t\t\t\t<template x-for=\"(card, i) in results\" :key=\"i\">\n\t\t\t\t\t<a class=\"cfg-result-card\" :href=\"card.produit_url\">\n\t\t\t\t\t\t<div class=\"cfg-result-card-image\"\n\t\t\t\t\t\t     :style=\"card.coloris_image ? { backgroundImage: 'url(' + card.coloris_image + ')' } : {}\">\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"cfg-result-card-body\">\n\t\t\t\t\t\t<span class=\"cfg-result-card-produit\" x-text=\"card.produit_titre\"><\/span>\n\t\t\t\t\t\t<span class=\"cfg-result-card-categorie\" x-show=\"card.categorie\" x-text=\"card.categorie\"><\/span>\n\t\t\t\t\t\t<span class=\"cfg-result-card-coloris\" x-show=\"card.coloris_nom\" x-text=\"card.coloris_nom\"><\/span>\n\t\t\t\t\t\t<span class=\"cfg-result-card-link\">Voir la page \u2192<\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/template>\n\t\t\t<\/div>\n\n\t\t\t<!-- Aucun r\u00e9sultat -->\n\t\t\t<p class=\"cfg-notice cfg-notice--info\"\n\t\t\t   x-show=\"! resultsLoading && ! resultsError && results.length === 0\">\n\t\t\t\tAucun produit ne correspond \u00e0 votre s\u00e9lection.\n\t\t\t<\/p>\n\n\t\t\t<!-- Actions r\u00e9sultats -->\n\t\t\t<div class=\"cfg-results-actions\">\n\t\t\t\t<button class=\"cfg-btn cfg-btn--secondary\" @click=\"goBackToLastStep()\" type=\"button\">\n\t\t\t\t\tModifier mes r\u00e9ponses\n\t\t\t\t<\/button>\n\t\t\t\t<button class=\"cfg-btn cfg-btn--secondary\" @click=\"resetAll()\" type=\"button\">\n\t\t\t\t\tRecommencer depuis le d\u00e9but\n\t\t\t\t<\/button>\n\t\t\t<\/div>\n\n\t\t<\/div><!-- \/.cfg-screen--results -->\n\n\t<\/div><!-- \/#apf-configurateur -->\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6599","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/pages\/6599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/comments?post=6599"}],"version-history":[{"count":5,"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/pages\/6599\/revisions"}],"predecessor-version":[{"id":8216,"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/pages\/6599\/revisions\/8216"}],"wp:attachment":[{"href":"https:\/\/apf-pooldesign.com\/en\/wp-json\/wp\/v2\/media?parent=6599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}