{"id":5054,"date":"2026-04-07T16:55:01","date_gmt":"2026-04-07T16:55:01","guid":{"rendered":"https:\/\/sofa-academy.com\/?page_id=5054"},"modified":"2026-04-07T16:58:42","modified_gmt":"2026-04-07T16:58:42","slug":"survey","status":"publish","type":"page","link":"https:\/\/sofa-academy.com\/index.php\/survey\/","title":{"rendered":"Survey"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5054\" class=\"elementor elementor-5054\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7c7e3ee e-flex e-con-boxed e-con e-parent\" data-id=\"7c7e3ee\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\" data-core-v316-plus=\"true\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2e98aff elementor-widget elementor-widget-image\" data-id=\"2e98aff\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.17.0 - 08-11-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"800\" height=\"566\" src=\"https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-1024x724.png\" class=\"attachment-large size-large wp-image-5056\" alt=\"\" srcset=\"https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-1024x724.png 1024w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-300x212.png 300w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-768x543.png 768w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-128x91.png 128w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-32x23.png 32w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-360x255.png 360w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55-640x453.png 640w, https:\/\/sofa-academy.com\/wp-content\/uploads\/2026\/04\/Capture-decran-2026-04-07-a-16.52.55.png 1260w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78ce26a elementor-widget elementor-widget-html\" data-id=\"78ce26a\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>Spa \u2014 Questionnaire de Satisfaction<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n  <style>\n    :root {\n      --sage: #8a9e8a;\n      --sage-light: #b5c8b5;\n      --sage-dark: #5e7a5e;\n      --cream: #faf7f2;\n      --cream-dark: #f0ebe0;\n      --sand: #d4c9b0;\n      --charcoal: #2a2a2a;\n      --muted: #7a7570;\n      --border: rgba(138,158,138,0.25);\n      --gold: #c9a96e;\n      --white: #ffffff;\n      --shadow: 0 8px 40px rgba(42,42,42,0.08);\n    }\n\n    * { box-sizing: border-box; margin: 0; padding: 0; }\n\n    body {\n      font-family: 'DM Sans', sans-serif;\n      background: var(--cream);\n      color: var(--charcoal);\n      min-height: 100vh;\n      padding: 40px 20px 80px;\n      position: relative;\n      overflow-x: hidden;\n    }\n\n    \/* Decorative background *\/\n    body::before {\n      content: '';\n      position: fixed;\n      top: -200px; right: -200px;\n      width: 600px; height: 600px;\n      background: radial-gradient(circle, rgba(138,158,138,0.12) 0%, transparent 70%);\n      pointer-events: none;\n    }\n    body::after {\n      content: '';\n      position: fixed;\n      bottom: -150px; left: -150px;\n      width: 500px; height: 500px;\n      background: radial-gradient(circle, rgba(201,169,110,0.08) 0%, transparent 70%);\n      pointer-events: none;\n    }\n\n    \/* TOP BAR *\/\n    .topbar {\n      max-width: 720px;\n      margin: 0 auto 36px;\n      display: flex;\n      justify-content: flex-end;\n      align-items: center;\n    }\n\n    .lang-switcher {\n      display: flex;\n      background: var(--white);\n      border: 1px solid var(--border);\n      border-radius: 100px;\n      padding: 3px;\n      gap: 2px;\n      box-shadow: 0 2px 12px rgba(0,0,0,0.06);\n    }\n\n    .lang-btn {\n      border: none;\n      background: transparent;\n      padding: 7px 16px;\n      border-radius: 100px;\n      font-family: 'DM Sans', sans-serif;\n      font-size: 12px;\n      font-weight: 500;\n      letter-spacing: 0.08em;\n      cursor: pointer;\n      color: var(--muted);\n      transition: all 0.25s ease;\n    }\n    .lang-btn.active {\n      background: var(--sage);\n      color: var(--white);\n      box-shadow: 0 2px 8px rgba(94,122,94,0.3);\n    }\n\n    \/* CARD *\/\n    .card {\n      max-width: 720px;\n      margin: 0 auto;\n      background: var(--white);\n      border-radius: 24px;\n      box-shadow: var(--shadow);\n      overflow: hidden;\n      animation: fadeUp 0.6s ease forwards;\n      opacity: 0;\n    }\n\n    @keyframes fadeUp {\n      from { opacity: 0; transform: translateY(20px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    \/* HERO HEADER *\/\n    .card-header {\n      background: linear-gradient(135deg, var(--sage-dark) 0%, var(--sage) 60%, var(--sage-light) 100%);\n      padding: 52px 48px 44px;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .card-header::before {\n      content: '';\n      position: absolute;\n      top: -60px; right: -60px;\n      width: 240px; height: 240px;\n      border: 1px solid rgba(255,255,255,0.1);\n      border-radius: 50%;\n    }\n    .card-header::after {\n      content: '';\n      position: absolute;\n      bottom: -40px; left: 30px;\n      width: 140px; height: 140px;\n      border: 1px solid rgba(255,255,255,0.08);\n      border-radius: 50%;\n    }\n\n    .header-label {\n      font-family: 'DM Sans', sans-serif;\n      font-size: 10px;\n      font-weight: 500;\n      letter-spacing: 0.2em;\n      text-transform: uppercase;\n      color: rgba(255,255,255,0.65);\n      margin-bottom: 12px;\n      position: relative;\n      z-index: 1;\n    }\n\n    .card-header h1 {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: clamp(28px, 5vw, 42px);\n      font-weight: 300;\n      color: var(--white);\n      line-height: 1.15;\n      letter-spacing: 0.01em;\n      position: relative;\n      z-index: 1;\n    }\n\n    .card-header h1 em {\n      font-style: italic;\n      font-weight: 400;\n    }\n\n    .gold-line {\n      width: 48px;\n      height: 1px;\n      background: var(--gold);\n      margin: 18px 0 0;\n      position: relative;\n      z-index: 1;\n    }\n\n    \/* BODY *\/\n    .card-body {\n      padding: 40px 48px 52px;\n    }\n\n    \/* META ROW *\/\n    .meta-row {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 20px;\n      margin-bottom: 40px;\n      padding-bottom: 36px;\n      border-bottom: 1px solid var(--border);\n    }\n    @media (min-width: 600px) {\n      .meta-row { grid-template-columns: 1fr 1fr; }\n    }\n\n    .field-group { display: flex; flex-direction: column; gap: 6px; }\n\n    .field-label {\n      font-size: 10px;\n      font-weight: 500;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n      color: var(--muted);\n    }\n\n    .date-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .field-input {\n      font-family: 'DM Sans', sans-serif;\n      font-size: 14px;\n      color: var(--charcoal);\n      background: var(--cream);\n      border: 1px solid var(--border);\n      border-radius: 10px;\n      padding: 10px 14px;\n      width: 100%;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      outline: none;\n    }\n    .field-input:focus {\n      border-color: var(--sage);\n      box-shadow: 0 0 0 3px rgba(138,158,138,0.15);\n    }\n\n    input[type=\"date\"].field-input {\n      min-width: 0;\n      flex: 1;\n    }\n\n    .date-pick-btn {\n      background: var(--cream-dark);\n      border: 1px solid var(--border);\n      border-radius: 10px;\n      padding: 10px 12px;\n      cursor: pointer;\n      font-size: 14px;\n      line-height: 1;\n      transition: background 0.2s;\n      flex-shrink: 0;\n    }\n    .date-pick-btn:hover { background: var(--sand); }\n\n    \/* SERVICES *\/\n    .services-group {\n      margin-bottom: 40px;\n      padding-bottom: 36px;\n      border-bottom: 1px solid var(--border);\n    }\n\n    .services-label {\n      font-size: 10px;\n      font-weight: 500;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n      color: var(--muted);\n      margin-bottom: 14px;\n    }\n\n    .services-grid {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 10px;\n    }\n\n    .service-chip {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: var(--cream);\n      border: 1.5px solid var(--border);\n      border-radius: 100px;\n      padding: 8px 16px;\n      cursor: pointer;\n      font-size: 13px;\n      font-weight: 400;\n      color: var(--muted);\n      transition: all 0.2s ease;\n      user-select: none;\n    }\n    .service-chip:hover { border-color: var(--sage-light); color: var(--charcoal); }\n    .service-chip.selected {\n      background: var(--sage);\n      border-color: var(--sage);\n      color: var(--white);\n    }\n    .service-chip.selected .chip-dot { background: rgba(255,255,255,0.8); }\n\n    .chip-dot {\n      width: 6px; height: 6px;\n      border-radius: 50%;\n      background: var(--sage-light);\n      flex-shrink: 0;\n      transition: background 0.2s;\n    }\n\n    \/* QUESTIONS *\/\n    .question-block {\n      margin-bottom: 34px;\n    }\n\n    .question-block:last-of-type { margin-bottom: 0; }\n\n    .q-header {\n      display: flex;\n      align-items: baseline;\n      gap: 12px;\n      margin-bottom: 14px;\n    }\n\n    .q-num {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 13px;\n      font-weight: 400;\n      color: var(--sage);\n      letter-spacing: 0.05em;\n      flex-shrink: 0;\n      padding-top: 1px;\n    }\n\n    .q-text {\n      font-size: 15px;\n      font-weight: 400;\n      color: var(--charcoal);\n      line-height: 1.5;\n    }\n\n    \/* RADIO OPTIONS *\/\n    .options-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 8px;\n      padding-left: 28px;\n    }\n\n    .opt-label {\n      display: flex;\n      align-items: center;\n      gap: 7px;\n      background: var(--cream);\n      border: 1.5px solid var(--border);\n      border-radius: 100px;\n      padding: 8px 16px;\n      font-size: 13px;\n      color: var(--muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n      user-select: none;\n    }\n    .opt-label:hover { border-color: var(--sage-light); color: var(--charcoal); }\n    .opt-label input[type=\"radio\"] { display: none; }\n    .opt-label.checked {\n      background: var(--sage);\n      border-color: var(--sage);\n      color: var(--white);\n    }\n\n    \/* TEXTAREA *\/\n    .q-textarea {\n      font-family: 'DM Sans', sans-serif;\n      font-size: 14px;\n      color: var(--charcoal);\n      background: var(--cream);\n      border: 1.5px solid var(--border);\n      border-radius: 14px;\n      padding: 14px 16px;\n      width: calc(100% - 28px);\n      margin-left: 28px;\n      min-height: 90px;\n      resize: vertical;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      outline: none;\n      line-height: 1.6;\n    }\n    .q-textarea:focus {\n      border-color: var(--sage);\n      box-shadow: 0 0 0 3px rgba(138,158,138,0.15);\n    }\n\n    \/* DIVIDER *\/\n    .q-divider {\n      height: 1px;\n      background: var(--border);\n      margin: 32px 0;\n    }\n\n    \/* SUBMIT *\/\n    .submit-area {\n      margin-top: 44px;\n      padding-top: 36px;\n      border-top: 1px solid var(--border);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .submit-btn {\n      font-family: 'DM Sans', sans-serif;\n      font-size: 13px;\n      font-weight: 500;\n      letter-spacing: 0.12em;\n      text-transform: uppercase;\n      color: var(--white);\n      background: var(--sage-dark);\n      border: none;\n      border-radius: 100px;\n      padding: 16px 52px;\n      cursor: pointer;\n      transition: all 0.25s ease;\n      box-shadow: 0 4px 20px rgba(94,122,94,0.35);\n    }\n    .submit-btn:hover {\n      background: var(--charcoal);\n      transform: translateY(-2px);\n      box-shadow: 0 8px 28px rgba(42,42,42,0.2);\n    }\n    .submit-btn:active { transform: translateY(0); }\n\n    .thank-you {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 13px;\n      font-style: italic;\n      color: var(--muted);\n      letter-spacing: 0.04em;\n    }\n\n    \/* SUCCESS STATE *\/\n    .success-screen {\n      display: none;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 80px 48px;\n      text-align: center;\n      gap: 16px;\n    }\n\n    .success-icon {\n      width: 72px; height: 72px;\n      background: var(--sage);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 8px;\n      animation: pop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;\n    }\n\n    @keyframes pop {\n      from { transform: scale(0); opacity: 0; }\n      to   { transform: scale(1); opacity: 1; }\n    }\n\n    .success-icon svg { width: 32px; height: 32px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }\n\n    .success-title {\n      font-family: 'Cormorant Garamond', serif;\n      font-size: 32px;\n      font-weight: 300;\n      color: var(--charcoal);\n    }\n\n    .success-sub {\n      font-size: 14px;\n      color: var(--muted);\n      max-width: 340px;\n      line-height: 1.7;\n    }\n\n    .reset-btn {\n      font-family: 'DM Sans', sans-serif;\n      font-size: 12px;\n      letter-spacing: 0.1em;\n      text-transform: uppercase;\n      background: transparent;\n      border: 1.5px solid var(--border);\n      border-radius: 100px;\n      padding: 10px 28px;\n      cursor: pointer;\n      color: var(--muted);\n      margin-top: 8px;\n      transition: all 0.2s;\n    }\n    .reset-btn:hover { border-color: var(--sage); color: var(--sage-dark); }\n\n    @media (max-width: 600px) {\n      .card-body { padding: 28px 24px 40px; }\n      .card-header { padding: 40px 24px 36px; }\n      .meta-row { grid-template-columns: 1fr; }\n      .options-row { gap: 6px; }\n      .q-textarea { width: 100%; margin-left: 0; }\n    }\n  <\/style>\n<\/head>\n<body>\n\n<div class=\"topbar\">\n  <div class=\"lang-switcher\">\n    <button class=\"lang-btn active\" onclick=\"setLang('fr')\" id=\"btn-fr\">\ud83c\uddeb\ud83c\uddf7 Fran\u00e7ais<\/button>\n    <button class=\"lang-btn\" onclick=\"setLang('en')\" id=\"btn-en\">\ud83c\uddec\ud83c\udde7 English<\/button>\n  <\/div>\n<\/div>\n\n<div class=\"card\">\n  <!-- HEADER -->\n  <div class=\"card-header\">\n    <div class=\"header-label\" data-key=\"header_label\">Questionnaire de Satisfaction<\/div>\n    <h1><em data-key=\"header_title_em\">Votre exp\u00e9rience<\/em><br><span data-key=\"header_title_main\">nous importe<\/span><\/h1>\n    <div class=\"gold-line\"><\/div>\n  <\/div>\n\n  <!-- FORM -->\n  <form id=\"spa-form\">\n    <div class=\"card-body\" id=\"form-body\">\n\n      <!-- META -->\n      <div class=\"meta-row\">\n        <div class=\"field-group\">\n          <label class=\"field-label\" data-key=\"label_date\">Date<\/label>\n          <div class=\"date-wrapper\">\n            <input type=\"text\" id=\"date-display\" class=\"field-input\" readonly style=\"flex:1;cursor:default;\" \/>\n            <label class=\"date-pick-btn\" title=\"Choisir une date\" for=\"date-picker\">\ud83d\udcc5<\/label>\n            <input type=\"date\" id=\"date-picker\" class=\"field-input\" style=\"display:none;position:absolute;\" \/>\n          <\/div>\n        <\/div>\n        <div class=\"field-group\">\n          <label class=\"field-label\" data-key=\"label_therapist\">Esth\u00e9ticienne(s)<\/label>\n          <input type=\"text\" class=\"field-input\" data-key-placeholder=\"placeholder_therapist\" placeholder=\"Nom \/ Name\" \/>\n        <\/div>\n        <div class=\"field-group\">\n          <label class=\"field-label\" data-key=\"label_client_name\">Votre nom<\/label>\n          <input type=\"text\" class=\"field-input\" data-key-placeholder=\"placeholder_client_name\" placeholder=\"Votre nom\" \/>\n        <\/div>\n        <div class=\"field-group\">\n          <label class=\"field-label\" data-key=\"label_phone\">T\u00e9l\u00e9phone<\/label>\n          <input type=\"tel\" class=\"field-input\" data-key-placeholder=\"placeholder_phone\" placeholder=\"+221 XX XXX XX XX\" \/>\n        <\/div>\n      <\/div>\n\n      <!-- SERVICES -->\n      <div class=\"services-group\">\n        <div class=\"services-label\" data-key=\"label_services\">Services re\u00e7us<\/div>\n        <div class=\"services-grid\">\n          <div class=\"service-chip\" onclick=\"toggleChip(this)\" data-key=\"svc_massage\"><span class=\"chip-dot\"><\/span><span>Massage<\/span><\/div>\n          <div class=\"service-chip\" onclick=\"toggleChip(this)\" data-key=\"svc_manicure\"><span class=\"chip-dot\"><\/span><span>Manucure<\/span><\/div>\n          <div class=\"service-chip\" onclick=\"toggleChip(this)\" data-key=\"svc_pedicure\"><span class=\"chip-dot\"><\/span><span>P\u00e9dicure<\/span><\/div>\n          <div class=\"service-chip\" onclick=\"toggleChip(this)\" data-key=\"svc_hammam\"><span class=\"chip-dot\"><\/span><span>Hammam<\/span><\/div>\n          <div class=\"service-chip\" onclick=\"toggleChip(this)\" data-key=\"svc_sauna\"><span class=\"chip-dot\"><\/span><span>Sauna<\/span><\/div>\n          <div class=\"service-chip\" onclick=\"toggleChip(this)\" data-key=\"svc_jacuzzi\"><span class=\"chip-dot\"><\/span><span>Jacuzzi<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Q1 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">01<\/span>\n          <span class=\"q-text\" data-key=\"q1\">Comment \u00e9valuez-vous votre exp\u00e9rience globale au spa ?<\/span>\n        <\/div>\n        <div class=\"options-row\" id=\"opts-q1\">\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q1\" value=\"excellent\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_excellent\">Excellente<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q1\" value=\"verygood\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_verygood\">Tr\u00e8s bonne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q1\" value=\"good\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_good\">Bonne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q1\" value=\"average\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_average\">Moyenne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q1\" value=\"poor\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_poor\">Mauvaise<\/span><\/label>\n        <\/div>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q2 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">02<\/span>\n          <span class=\"q-text\" data-key=\"q2\">Comment \u00e9valuez-vous la qualit\u00e9 du soin re\u00e7u ?<\/span>\n        <\/div>\n        <div class=\"options-row\">\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q2\" value=\"excellent\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_excellent\">Excellente<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q2\" value=\"verygood\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_verygood\">Tr\u00e8s bonne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q2\" value=\"good\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_good\">Bonne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q2\" value=\"average\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_average\">Moyenne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q2\" value=\"poor\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_poor\">Mauvaise<\/span><\/label>\n        <\/div>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q3 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">03<\/span>\n          <span class=\"q-text\" data-key=\"q3\">Comment avez-vous trouv\u00e9 l'accueil et l'attitude du personnel ?<\/span>\n        <\/div>\n        <div class=\"options-row\">\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q3\" value=\"excellent\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_excellent\">Excellente<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q3\" value=\"verygood\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_verygood\">Tr\u00e8s bonne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q3\" value=\"good\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_good\">Bonne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q3\" value=\"average\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_average\">Moyenne<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q3\" value=\"poor\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_poor\">Mauvaise<\/span><\/label>\n        <\/div>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q4 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">04<\/span>\n          <span class=\"q-text\" data-key=\"q4\">Le spa \u00e9tait-il propre, agr\u00e9able et relaxant ?<\/span>\n        <\/div>\n        <div class=\"options-row\">\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q4\" value=\"perfectly\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_perfectly\">Oui, parfaitement<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q4\" value=\"yes\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_yes\">Oui<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q4\" value=\"fair\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_fair\">Moyennement<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q4\" value=\"no\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_no\">Non<\/span><\/label>\n        <\/div>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q5 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">05<\/span>\n          <span class=\"q-text\" data-key=\"q5\">Reviendrez-vous dans notre spa ?<\/span>\n        <\/div>\n        <div class=\"options-row\">\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q5\" value=\"definitely\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_definitely\">Oui, avec plaisir<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q5\" value=\"maybe\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_maybe\">Peut-\u00eatre<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q5\" value=\"no\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_no\">Non<\/span><\/label>\n        <\/div>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q6 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">06<\/span>\n          <span class=\"q-text\" data-key=\"q6\">Recommanderiez-vous notre spa ?<\/span>\n        <\/div>\n        <div class=\"options-row\">\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q6\" value=\"yes\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_yes\">Oui<\/span><\/label>\n          <label class=\"opt-label\"><input type=\"radio\" name=\"q6\" value=\"no\" onchange=\"markChecked(this)\"\/><span data-key=\"opt_no\">Non<\/span><\/label>\n        <\/div>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q7 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">07<\/span>\n          <span class=\"q-text\" data-key=\"q7\">Qu'est-ce qui aurait pu rendre votre exp\u00e9rience encore meilleure ?<\/span>\n        <\/div>\n        <textarea class=\"q-textarea\" name=\"q7\" data-key-placeholder=\"placeholder_q7\" placeholder=\"Vos suggestions...\"><\/textarea>\n      <\/div>\n      <div class=\"q-divider\"><\/div>\n\n      <!-- Q8 -->\n      <div class=\"question-block\">\n        <div class=\"q-header\">\n          <span class=\"q-num\">08<\/span>\n          <span class=\"q-text\" data-key=\"q8\">Souhaitez-vous laisser un commentaire ou un message pour l'\u00e9quipe ?<\/span>\n        <\/div>\n        <textarea class=\"q-textarea\" name=\"q8\" data-key-placeholder=\"placeholder_q8\" placeholder=\"Votre message...\"><\/textarea>\n      <\/div>\n\n      <!-- SUBMIT -->\n      <div class=\"submit-area\">\n        <button type=\"button\" class=\"submit-btn\" onclick=\"submitForm()\" data-key=\"btn_submit\">Envoyer<\/button>\n        <p class=\"thank-you\" data-key=\"thank_you\">Merci pour votre visite et votre confiance.<\/p>\n      <\/div>\n\n    <\/div>\n  <\/form>\n\n  <!-- SUCCESS -->\n  <div class=\"success-screen\" id=\"success-screen\">\n    <div class=\"success-icon\">\n      <svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n    <\/div>\n    <h2 class=\"success-title\" data-key=\"success_title\">Merci infiniment<\/h2>\n    <p class=\"success-sub\" data-key=\"success_sub\">Votre retour est pr\u00e9cieux pour notre \u00e9quipe. Nous esp\u00e9rons vous revoir tr\u00e8s bient\u00f4t.<\/p>\n    <button class=\"reset-btn\" onclick=\"resetForm()\" data-key=\"reset_btn\">Nouveau formulaire<\/button>\n  <\/div>\n<\/div>\n\n<script>\n  \/* \u2500\u2500 TRANSLATIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  const T = {\n    fr: {\n      header_label: \"Questionnaire de Satisfaction\",\n      header_title_em: \"Votre exp\u00e9rience\",\n      header_title_main: \"nous importe\",\n      label_date: \"Date\",\n      label_therapist: \"Esth\u00e9ticienne(s)\",\n      placeholder_therapist: \"Nom\",\n      label_client_name: \"Votre nom\",\n      placeholder_client_name: \"Votre nom\",\n      label_phone: \"T\u00e9l\u00e9phone\",\n      placeholder_phone: \"Votre num\u00e9ro\",\n      label_services: \"Services re\u00e7us\",\n      svc_massage: \"Massage\",\n      svc_manicure: \"Manucure\",\n      svc_pedicure: \"P\u00e9dicure\",\n      svc_hammam: \"Hammam\",\n      svc_sauna: \"Sauna\",\n      svc_jacuzzi: \"Jacuzzi\",\n      q1: \"Comment \u00e9valuez-vous votre exp\u00e9rience globale au spa ?\",\n      q2: \"Comment \u00e9valuez-vous la qualit\u00e9 du soin re\u00e7u ?\",\n      q3: \"Comment avez-vous trouv\u00e9 l'accueil et l'attitude du personnel ?\",\n      q4: \"Le spa \u00e9tait-il propre, agr\u00e9able et relaxant ?\",\n      q5: \"Reviendrez-vous dans notre spa ?\",\n      q6: \"Recommanderiez-vous notre spa ?\",\n      q7: \"Qu'est-ce qui aurait pu rendre votre exp\u00e9rience encore meilleure ?\",\n      q8: \"Souhaitez-vous laisser un commentaire ou un message pour l'\u00e9quipe ?\",\n      opt_excellent: \"Excellente\",\n      opt_verygood: \"Tr\u00e8s bonne\",\n      opt_good: \"Bonne\",\n      opt_average: \"Moyenne\",\n      opt_poor: \"Mauvaise\",\n      opt_perfectly: \"Oui, parfaitement\",\n      opt_yes: \"Oui\",\n      opt_fair: \"Moyennement\",\n      opt_no: \"Non\",\n      opt_definitely: \"Oui, avec plaisir\",\n      opt_maybe: \"Peut-\u00eatre\",\n      placeholder_q7: \"Vos suggestions...\",\n      placeholder_q8: \"Votre message...\",\n      btn_submit: \"Envoyer\",\n      thank_you: \"Merci pour votre visite et votre confiance.\",\n      success_title: \"Merci infiniment\",\n      success_sub: \"Votre retour est pr\u00e9cieux pour notre \u00e9quipe. Nous esp\u00e9rons vous revoir tr\u00e8s bient\u00f4t.\",\n      reset_btn: \"Nouveau formulaire\",\n    },\n    en: {\n      header_label: \"Customer Satisfaction Survey\",\n      header_title_em: \"Your experience\",\n      header_title_main: \"matters to us\",\n      label_date: \"Date\",\n      label_therapist: \"Therapist(s)\",\n      placeholder_therapist: \"Name\",\n      label_client_name: \"Your name\",\n      placeholder_client_name: \"Your name\",\n      label_phone: \"Phone number\",\n      placeholder_phone: \"Your number\",\n      label_services: \"Services received\",\n      svc_massage: \"Massage\",\n      svc_manicure: \"Manicure\",\n      svc_pedicure: \"Pedicure\",\n      svc_hammam: \"Hammam\",\n      svc_sauna: \"Sauna\",\n      svc_jacuzzi: \"Jacuzzi\",\n      q1: \"How would you rate your overall experience at our spa?\",\n      q2: \"How would you rate the quality of your treatment?\",\n      q3: \"How was the welcome and attitude of our staff?\",\n      q4: \"Was the spa clean, pleasant, and relaxing?\",\n      q5: \"Would you come back to our spa?\",\n      q6: \"Would you recommend our spa to others?\",\n      q7: \"What could we improve to make your experience even better?\",\n      q8: \"Any comments or messages for our team?\",\n      opt_excellent: \"Excellent\",\n      opt_verygood: \"Very good\",\n      opt_good: \"Good\",\n      opt_average: \"Average\",\n      opt_poor: \"Poor\",\n      opt_perfectly: \"Yes, perfectly\",\n      opt_yes: \"Yes\",\n      opt_fair: \"Fair\",\n      opt_no: \"No\",\n      opt_definitely: \"Yes, definitely\",\n      opt_maybe: \"Maybe\",\n      placeholder_q7: \"Your suggestions...\",\n      placeholder_q8: \"Your message...\",\n      btn_submit: \"Submit\",\n      thank_you: \"Thank you for visiting our spa.\",\n      success_title: \"Thank you so much\",\n      success_sub: \"Your feedback means the world to our team. We hope to welcome you back very soon.\",\n      reset_btn: \"New form\",\n    }\n  };\n\n  let currentLang = 'fr';\n\n  function setLang(lang) {\n    currentLang = lang;\n    document.documentElement.lang = lang;\n    document.getElementById('btn-fr').classList.toggle('active', lang === 'fr');\n    document.getElementById('btn-en').classList.toggle('active', lang === 'en');\n\n    const t = T[lang];\n    \/\/ text nodes\n    document.querySelectorAll('[data-key]').forEach(el => {\n      const key = el.dataset.key;\n      if (t[key] !== undefined) el.textContent = t[key];\n    });\n    \/\/ placeholders\n    document.querySelectorAll('[data-key-placeholder]').forEach(el => {\n      const key = el.dataset.keyPlaceholder;\n      if (t[key] !== undefined) el.placeholder = t[key];\n    });\n\n    updateDateDisplay();\n  }\n\n  \/* \u2500\u2500 DATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  const dateDisplay = document.getElementById('date-display');\n  const datePicker  = document.getElementById('date-picker');\n\n  function todayISO() {\n    const d = new Date();\n    return d.toISOString().split('T')[0];\n  }\n\n  function formatDate(isoStr, lang) {\n    const [y, m, d] = isoStr.split('-');\n    if (lang === 'fr') return `${d}\/${m}\/${y}`;\n    return `${m}\/${d}\/${y}`;\n  }\n\n  function updateDateDisplay() {\n    dateDisplay.value = formatDate(datePicker.value || todayISO(), currentLang);\n  }\n\n  datePicker.value = todayISO();\n  updateDateDisplay();\n\n  document.querySelector('.date-pick-btn').addEventListener('click', () => {\n    datePicker.style.display = 'block';\n    datePicker.style.position = 'absolute';\n    datePicker.style.opacity = '0';\n    datePicker.style.pointerEvents = 'auto';\n    datePicker.focus();\n    datePicker.click();\n  });\n\n  datePicker.addEventListener('change', () => {\n    updateDateDisplay();\n    datePicker.style.display = 'none';\n  });\n\n  \/* \u2500\u2500 CHIPS & RADIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n  function toggleChip(el) {\n    el.classList.toggle('selected');\n  }\n\n  function markChecked(radio) {\n    const group = radio.closest('.options-row');\n    group.querySelectorAll('.opt-label').forEach(l => l.classList.remove('checked'));\n    radio.closest('.opt-label').classList.add('checked');\n  }\n\n  \/* \u2500\u2500 SUBMIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n  \/\/ \ud83d\udd27 REMPLACE cette URL par celle g\u00e9n\u00e9r\u00e9e lors du d\u00e9ploiement Apps Script\n  const SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbxU_KN6CXxKf2iyGqns3QRH30gL9oQp_qq6JO6DxdK4WP6yrz0kH8HzbBwNQ7cqd8DWjQ\/exec\";\n\n  async function submitForm() {\n    const btn = document.querySelector('.submit-btn');\n    const t = T[currentLang];\n\n    \/\/ Collecter les services s\u00e9lectionn\u00e9s\n    const services = [...document.querySelectorAll('.service-chip.selected')]\n      .map(c => c.querySelector('span:last-child').textContent);\n\n    \/\/ Collecter les radios\n    const getRadio = name => {\n      const el = document.querySelector(`input[name=\"${name}\"]:checked`);\n      return el ? el.closest('.opt-label').querySelector('span').textContent : '';\n    };\n\n    \/\/ Collecter les champs texte (meta-row)\n    const inputs = document.querySelectorAll('.field-input:not(#date-display):not(#date-picker)');\n    const therapist  = inputs[0]?.value || '';\n    const clientName = inputs[1]?.value || '';\n    const phone      = inputs[2]?.value || '';\n\n    const payload = {\n      lang:        currentLang,\n      date:        dateDisplay.value,\n      clientName,\n      phone,\n      therapist,\n      services,\n      q1: getRadio('q1'),\n      q2: getRadio('q2'),\n      q3: getRadio('q3'),\n      q4: getRadio('q4'),\n      q5: getRadio('q5'),\n      q6: getRadio('q6'),\n      q7: document.querySelector('textarea[name=\"q7\"]').value,\n      q8: document.querySelector('textarea[name=\"q8\"]').value,\n    };\n\n    \/\/ UI : \u00e9tat chargement\n    btn.textContent = currentLang === 'fr' ? 'Envoi en cours\u2026' : 'Sending\u2026';\n    btn.disabled = true;\n    btn.style.opacity = '0.7';\n\n    try {\n      await fetch(SCRIPT_URL, {\n        method: 'POST',\n        mode: 'no-cors',\n        headers: { 'Content-Type': 'application\/json' },\n        body: JSON.stringify(payload)\n      });\n      \/\/ no-cors = pas de r\u00e9ponse lisible, on consid\u00e8re succ\u00e8s si pas d'erreur r\u00e9seau\n      showSuccess();\n    } catch (err) {\n      alert(currentLang === 'fr'\n        ? \"Erreur d'envoi. V\u00e9rifiez votre connexion et r\u00e9essayez.\"\n        : \"Send error. Please check your connection and try again.\");\n      btn.textContent = t.btn_submit;\n      btn.disabled = false;\n      btn.style.opacity = '1';\n    }\n  }\n\n  function showSuccess() {\n    document.getElementById('form-body').style.display = 'none';\n    const ss = document.getElementById('success-screen');\n    ss.style.display = 'flex';\n    ss.style.animation = 'fadeUp 0.5s ease forwards';\n  }\n\n  function resetForm() {\n    document.getElementById('spa-form').reset();\n    document.querySelectorAll('.opt-label').forEach(l => l.classList.remove('checked'));\n    document.querySelectorAll('.service-chip').forEach(c => c.classList.remove('selected'));\n    datePicker.value = todayISO();\n    updateDateDisplay();\n    const btn = document.querySelector('.submit-btn');\n    btn.textContent = T[currentLang].btn_submit;\n    btn.disabled = false;\n    btn.style.opacity = '1';\n    document.getElementById('success-screen').style.display = 'none';\n    document.getElementById('form-body').style.display = 'block';\n  }\n<\/script>\n<\/body>\n<\/html>\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\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Spa \u2014 Questionnaire de Satisfaction \ud83c\uddeb\ud83c\uddf7 Fran\u00e7ais \ud83c\uddec\ud83c\udde7 English Questionnaire de Satisfaction Votre exp\u00e9riencenous importe Date \ud83d\udcc5 Esth\u00e9ticienne(s) Votre nom T\u00e9l\u00e9phone Services re\u00e7us Massage Manucure P\u00e9dicure Hammam Sauna Jacuzzi 01 Comment \u00e9valuez-vous votre exp\u00e9rience globale au spa ? Excellente Tr\u00e8s bonne Bonne Moyenne Mauvaise 02 Comment \u00e9valuez-vous la qualit\u00e9 du soin re\u00e7u ? Excellente Tr\u00e8s [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/pages\/5054"}],"collection":[{"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/comments?post=5054"}],"version-history":[{"count":8,"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/pages\/5054\/revisions"}],"predecessor-version":[{"id":5064,"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/pages\/5054\/revisions\/5064"}],"wp:attachment":[{"href":"https:\/\/sofa-academy.com\/index.php\/wp-json\/wp\/v2\/media?parent=5054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}