{"id":1757,"date":"2025-11-30T17:48:33","date_gmt":"2025-11-30T16:48:33","guid":{"rendered":"https:\/\/latelierdestab.com\/?page_id=1757"},"modified":"2026-11-06T21:48:43","modified_gmt":"2026-11-06T20:48:43","slug":"carte-noel","status":"publish","type":"page","link":"https:\/\/latelierdestab.com\/index.php\/carte-noel\/","title":{"rendered":"Page carte cadeau Saint-Valentin"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1757\" class=\"elementor elementor-1757\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8dbae90 e-flex e-con-boxed e-con e-parent\" data-id=\"8dbae90\" 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-8c6d4dd elementor-widget elementor-widget-html\" data-id=\"8c6d4dd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <meta name=\"robots\" content=\"noindex\">\r\n    <meta name=\"description\" content=\"Carte cadeau de No\u00ebl L'Atelier des Tab : 2h de d\u00e9tente au jacuzzi \u00e0 deux, coupe de champagne et bouch\u00e9es gourmandes, \u00e0 100 \u20ac.\">\r\n    <title>Carte Cadeau de No\u00ebl \u2014 L'Atelier des Tab<\/title>\r\n\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Great+Vibes&family=Playfair+Display:wght@600;700&family=Montserrat:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n    <style>\r\n        \/* ==============================================================\r\n           DESIGN SYSTEM \u2014 DA L'Atelier des Tab, d\u00e9clinaison No\u00ebl\r\n           ============================================================== *\/\r\n        :root {\r\n            --rouge:       #b30000;\r\n            --rouge-fonce: #7d0000;\r\n            --rouge-clair: #d42424;\r\n            --or:          #d4af37;\r\n            --or-clair:    #f7c948;\r\n            --or-fonce:    #a8801a;\r\n            --nuit:        #0b0b2c;\r\n            --creme:       #fffaf2;\r\n\r\n            --encre:       #1c1c2e;\r\n            --texte:       #55556a;\r\n            --discret:     #8c8ca3;\r\n            --trait:       #e9e4da;\r\n            --surface:     #ffffff;\r\n            --succes:      #0f7a3d;\r\n            --erreur:      #b30000;\r\n\r\n            --r-lg: 20px;\r\n            --r-md: 12px;\r\n            --r-pill: 999px;\r\n            --ease: cubic-bezier(.22, 1, .36, 1);\r\n        }\r\n\r\n        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n        html { -webkit-text-size-adjust: 100%; }\r\n\r\n        body {\r\n            font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n            color: var(--encre);\r\n            line-height: 1.6;\r\n            min-height: 100vh;\r\n            padding: clamp(14px, 4vw, 40px) clamp(12px, 4vw, 24px);\r\n            background-color: #1a0a0a;\r\n            background-image:\r\n                radial-gradient(90% 60% at 50% 0%, rgba(179, 0, 0, .5) 0%, transparent 70%),\r\n                radial-gradient(70% 50% at 50% 100%, rgba(11, 11, 44, .6) 0%, transparent 70%),\r\n                linear-gradient(170deg, #2a0d0d 0%, #1a0a0a 45%, #0b0b2c 100%);\r\n            background-attachment: fixed;\r\n        }\r\n\r\n        \/* Neige en fond, dessin\u00e9e par le JS *\/\r\n        #neige {\r\n            position: fixed;\r\n            inset: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .sr {\r\n            position: absolute !important;\r\n            width: 1px; height: 1px; padding: 0; overflow: hidden;\r\n            clip: rect(0 0 0 0); white-space: nowrap; border: 0;\r\n        }\r\n\r\n        :focus-visible {\r\n            outline: 3px solid var(--or-clair);\r\n            outline-offset: 3px;\r\n            border-radius: 6px;\r\n        }\r\n\r\n        \/* ==============================================================\r\n           CARTE PRINCIPALE\r\n           ============================================================== *\/\r\n        .carte {\r\n            position: relative;\r\n            z-index: 1;\r\n            width: 100%;\r\n            max-width: 680px;\r\n            margin: 0 auto;\r\n            padding: clamp(22px, 5vw, 44px);\r\n            background: var(--surface);\r\n            border: 2px solid var(--or);\r\n            border-radius: var(--r-lg);\r\n            box-shadow: 0 26px 70px rgba(0, 0, 0, .45);\r\n        }\r\n\r\n        .carte::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0; right: 0;\r\n            height: 6px;\r\n            border-radius: var(--r-lg) var(--r-lg) 0 0;\r\n            background: linear-gradient(90deg, var(--rouge-fonce), var(--or), var(--rouge), var(--or), var(--rouge-fonce));\r\n        }\r\n\r\n        \/* ---------- En-t\u00eate ---------- *\/\r\n        .chapeau {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: clamp(8px, 2vw, 14px);\r\n            font-size: clamp(9px, 2.3vw, 10.5px);\r\n            font-weight: 800;\r\n            letter-spacing: clamp(2px, .8vw, 4px);\r\n            text-transform: uppercase;\r\n            color: var(--or-fonce);\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .chapeau::before, .chapeau::after {\r\n            content: '';\r\n            width: clamp(14px, 5vw, 34px);\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--or));\r\n        }\r\n        .chapeau::after { transform: scaleX(-1); }\r\n\r\n        header.entete { text-align: center; margin-bottom: clamp(22px, 5vw, 34px); }\r\n\r\n        h1 {\r\n            font-family: 'Great Vibes', 'Playfair Display', cursive;\r\n            font-weight: 400;\r\n            font-size: clamp(2.4rem, 9vw, 3.8rem);\r\n            line-height: 1.1;\r\n            color: var(--rouge);\r\n            letter-spacing: 1px;\r\n            text-shadow: 0 1px 0 #fff, 0 3px 14px rgba(212, 175, 55, .4);\r\n        }\r\n\r\n        .sous-titre {\r\n            margin-top: 6px;\r\n            font-size: clamp(12px, 3vw, 14px);\r\n            font-weight: 500;\r\n            color: var(--texte);\r\n        }\r\n\r\n        \/* ---------- Compte \u00e0 rebours ---------- *\/\r\n        .rebours {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            margin-top: 14px;\r\n            padding: 8px 17px;\r\n            border-radius: var(--r-pill);\r\n            background: linear-gradient(135deg, var(--rouge), var(--rouge-clair));\r\n            color: #fff;\r\n            font-size: clamp(10.5px, 2.6vw, 12px);\r\n            font-weight: 700;\r\n            letter-spacing: .6px;\r\n            box-shadow: 0 8px 20px rgba(179, 0, 0, .26);\r\n        }\r\n        .rebours b { font-size: clamp(13px, 3.2vw, 15px); font-weight: 800; }\r\n        .rebours svg { width: 15px; height: 15px; flex: none; stroke: var(--or-clair); fill: none; stroke-width: 2; stroke-linecap: round; }\r\n\r\n        \/* ==============================================================\r\n           L'OFFRE\r\n           ============================================================== *\/\r\n        .offre {\r\n            margin-bottom: clamp(24px, 5vw, 36px);\r\n            padding: clamp(20px, 4.5vw, 30px);\r\n            background: linear-gradient(160deg, var(--creme), #fff7ec);\r\n            border: 2px dashed var(--or);\r\n            border-radius: var(--r-md);\r\n        }\r\n\r\n        .offre h2 {\r\n            font-family: 'Playfair Display', Georgia, serif;\r\n            font-size: clamp(1.15rem, 4.2vw, 1.5rem);\r\n            font-weight: 700;\r\n            line-height: 1.25;\r\n            color: var(--rouge);\r\n            text-align: center;\r\n            margin-bottom: 18px;\r\n        }\r\n\r\n        .inclus { list-style: none; display: grid; gap: 10px; }\r\n\r\n        .inclus li {\r\n            display: flex;\r\n            align-items: flex-start;\r\n            gap: 11px;\r\n            font-size: clamp(13px, 3.2vw, 14.5px);\r\n            line-height: 1.5;\r\n            color: var(--texte);\r\n        }\r\n\r\n        .inclus li strong { color: var(--encre); font-weight: 700; }\r\n\r\n        .inclus svg {\r\n            width: 19px; height: 19px;\r\n            flex: none;\r\n            margin-top: 2px;\r\n            stroke: var(--or-fonce);\r\n            fill: none; stroke-width: 1.9;\r\n            stroke-linecap: round; stroke-linejoin: round;\r\n        }\r\n\r\n        .creneaux {\r\n            margin-top: 18px;\r\n            padding-top: 16px;\r\n            border-top: 1px solid var(--trait);\r\n            text-align: center;\r\n            font-size: clamp(12px, 3vw, 13.5px);\r\n            color: var(--texte);\r\n        }\r\n\r\n        .creneaux b { display: block; margin-bottom: 7px; color: var(--encre); }\r\n\r\n        .creneaux .heures {\r\n            display: inline-flex;\r\n            flex-wrap: wrap;\r\n            justify-content: center;\r\n            gap: 7px;\r\n        }\r\n\r\n        .creneaux .heures span {\r\n            padding: 5px 13px;\r\n            border: 1px solid var(--or);\r\n            border-radius: var(--r-pill);\r\n            font-weight: 600;\r\n            font-size: clamp(11px, 2.8vw, 12.5px);\r\n            color: var(--or-fonce);\r\n            background: #fff;\r\n        }\r\n\r\n        .prix {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            gap: 4px;\r\n            margin-top: 20px;\r\n        }\r\n\r\n        .prix .montant {\r\n            display: inline-flex;\r\n            align-items: baseline;\r\n            gap: 4px;\r\n            padding: 11px 26px;\r\n            border-radius: var(--r-pill);\r\n            background: linear-gradient(135deg, var(--rouge), var(--rouge-clair));\r\n            color: #fff;\r\n            font-size: clamp(1.4rem, 5.5vw, 1.9rem);\r\n            font-weight: 800;\r\n            letter-spacing: -.5px;\r\n            box-shadow: 0 10px 26px rgba(179, 0, 0, .3);\r\n        }\r\n\r\n        .prix .pour { font-size: clamp(11px, 2.8vw, 12.5px); font-weight: 600; color: var(--texte); }\r\n\r\n        .validite {\r\n            margin-top: 16px;\r\n            text-align: center;\r\n            font-size: clamp(11px, 2.8vw, 12.5px);\r\n            font-weight: 600;\r\n            color: var(--or-fonce);\r\n        }\r\n\r\n        \/* ==============================================================\r\n           FORMULAIRE\r\n           ============================================================== *\/\r\n        fieldset { border: 0; }\r\n\r\n        legend {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            width: 100%;\r\n            font-size: clamp(10px, 2.5vw, 11px);\r\n            font-weight: 800;\r\n            letter-spacing: 2.2px;\r\n            text-transform: uppercase;\r\n            color: var(--discret);\r\n            margin-bottom: 16px;\r\n        }\r\n\r\n        legend::after {\r\n            content: '';\r\n            flex: 1;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, var(--trait), transparent);\r\n        }\r\n\r\n        .champ { margin-bottom: 16px; }\r\n\r\n        .duo { display: grid; gap: 16px; }\r\n        @media (min-width: 560px) { .duo { grid-template-columns: 1fr 1fr; } }\r\n\r\n        .champ label {\r\n            display: block;\r\n            margin-bottom: 7px;\r\n            font-size: clamp(12px, 3vw, 13px);\r\n            font-weight: 600;\r\n            color: var(--encre);\r\n        }\r\n\r\n        .champ label .opt { font-weight: 500; color: var(--discret); }\r\n\r\n        .champ input {\r\n            width: 100%;\r\n            padding: 13px 15px;\r\n            font-family: inherit;\r\n            font-size: 16px;            \/* 16px : emp\u00eache iOS de zoomer au focus *\/\r\n            color: var(--encre);\r\n            background: #fdfdfd;\r\n            border: 1.5px solid #ded8ce;\r\n            border-radius: var(--r-md);\r\n            transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);\r\n        }\r\n\r\n        .champ input::placeholder { color: #b8b8c6; }\r\n\r\n        .champ input:hover { border-color: #c9c2b5; }\r\n\r\n        .champ input:focus {\r\n            outline: none;\r\n            background: #fff;\r\n            border-color: var(--rouge);\r\n            box-shadow: 0 0 0 4px rgba(179, 0, 0, .1);\r\n        }\r\n\r\n        \/* Le th\u00e8me (Blocksy) passe le texte des champs en BLANC pendant la saisie\r\n           (r\u00e8gle input:focus, couleur de texte du site = blanc). On force donc\r\n           le texte en encre sombre dans tous les \u00e9tats, focus compris. *\/\r\n        .champ input,\r\n        .champ input:focus,\r\n        .champ input:active,\r\n        .champ input:focus-visible {\r\n            color: var(--encre) !important;\r\n            caret-color: var(--rouge);\r\n        }\r\n\r\n        .champ input[aria-invalid=\"true\"] {\r\n            border-color: var(--erreur);\r\n            background: #fffafa;\r\n        }\r\n\r\n        .champ input[aria-invalid=\"true\"]:focus {\r\n            box-shadow: 0 0 0 4px rgba(179, 0, 0, .14);\r\n        }\r\n\r\n        \/* L'autocompl\u00e9tion de Chrome for\u00e7ait parfois un texte illisible *\/\r\n        input:-webkit-autofill,\r\n        input:-webkit-autofill:hover,\r\n        input:-webkit-autofill:focus {\r\n            -webkit-text-fill-color: var(--encre) !important;\r\n            -webkit-box-shadow: 0 0 0 40px #fdfdfd inset !important;\r\n            transition: background-color 9999s ease-in-out 0s;\r\n        }\r\n\r\n        .aide { display: block; margin-top: 6px; font-size: 13px; color: var(--discret); }\r\n        .aide a { color: var(--rouge); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }\r\n\r\n        \/* Confirmation affich\u00e9e apr\u00e8s une commande \"\u00e0 r\u00e9gler sur place\" *\/\r\n        .confirmation[hidden] { display: none; }\r\n        .confirmation { margin-top: clamp(20px, 4vw, 28px); outline: none; }\r\n        .confirmation .retour { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--discret); }\r\n        .confirmation .retour b { color: var(--encre); font-variant-numeric: tabular-nums; }\r\n\r\n        .erreur-champ {\r\n            display: none;\r\n            margin-top: 6px;\r\n            font-size: 11.5px;\r\n            font-weight: 600;\r\n            color: var(--erreur);\r\n        }\r\n        .erreur-champ.visible { display: block; }\r\n\r\n        \/* Pi\u00e8ge \u00e0 robots : invisible pour un humain, sans display:none\r\n           que certains robots savent d\u00e9tecter. *\/\r\n        .piege {\r\n            position: absolute !important;\r\n            left: -9999px;\r\n            width: 1px; height: 1px;\r\n            overflow: hidden;\r\n        }\r\n\r\n        \/* ==============================================================\r\n           PAIEMENT\r\n           ============================================================== *\/\r\n        .paiement { margin-top: clamp(24px, 5vw, 34px); padding-top: clamp(22px, 4vw, 30px); border-top: 1px solid var(--trait); }\r\n\r\n        .choix { display: grid; gap: 12px; margin-bottom: 20px; }\r\n        @media (min-width: 620px) { .choix { grid-template-columns: 1fr 1fr; } }\r\n\r\n        \/* Vrai groupe de boutons radio : accessible au clavier et aux\r\n           lecteurs d'\u00e9cran, contrairement aux <button> de l'ancienne page. *\/\r\n        .choix input[type=\"radio\"] {\r\n            position: absolute;\r\n            opacity: 0;\r\n            width: 1px; height: 1px;\r\n        }\r\n\r\n        .choix label {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 4px;\r\n            height: 100%;\r\n            padding: 16px 18px;\r\n            background: #fff;\r\n            border: 2px solid var(--trait);\r\n            border-radius: var(--r-md);\r\n            cursor: pointer;\r\n            transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);\r\n        }\r\n\r\n        .choix label:hover { border-color: var(--or); }\r\n\r\n        .choix label .titre {\r\n            font-size: clamp(13px, 3.2vw, 14px);\r\n            font-weight: 700;\r\n            color: var(--encre);\r\n        }\r\n\r\n        .choix label .detail {\r\n            font-size: clamp(11px, 2.7vw, 12px);\r\n            font-weight: 500;\r\n            line-height: 1.45;\r\n            color: var(--texte);\r\n        }\r\n\r\n        .choix input:checked + label {\r\n            border-color: var(--rouge);\r\n            background: linear-gradient(160deg, #fffafa, #fff3f3);\r\n            box-shadow: 0 6px 18px rgba(179, 0, 0, .14);\r\n        }\r\n        .choix input:checked + label .titre { color: var(--rouge); }\r\n\r\n        .choix input:focus-visible + label {\r\n            outline: 3px solid var(--or-clair);\r\n            outline-offset: 3px;\r\n        }\r\n\r\n        .volet { display: none; }\r\n        .volet.actif { display: block; animation: apparait .4s var(--ease) both; }\r\n\r\n        @keyframes apparait {\r\n            from { opacity: 0; transform: translateY(8px); }\r\n            to   { opacity: 1; transform: none; }\r\n        }\r\n\r\n        .encadre {\r\n            padding: 18px 20px;\r\n            background: var(--creme);\r\n            border: 1px solid var(--trait);\r\n            border-left: 4px solid var(--or);\r\n            border-radius: var(--r-md);\r\n            font-size: clamp(12.5px, 3vw, 13.5px);\r\n            line-height: 1.65;\r\n            color: var(--texte);\r\n        }\r\n\r\n        .encadre p + p { margin-top: 8px; }\r\n        .encadre strong { color: var(--encre); }\r\n        .encadre a { color: var(--rouge); font-weight: 700; }\r\n\r\n        \/* ---------- Bouton principal ---------- *\/\r\n        .bouton {\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 10px;\r\n            width: 100%;\r\n            margin-top: 18px;\r\n            padding: 17px 24px;\r\n            font-family: inherit;\r\n            font-size: clamp(13px, 3.4vw, 15px);\r\n            font-weight: 800;\r\n            letter-spacing: 1.2px;\r\n            text-transform: uppercase;\r\n            text-decoration: none;\r\n            color: #fff;\r\n            background: linear-gradient(135deg, var(--rouge), var(--rouge-clair));\r\n            border: 2px solid transparent;\r\n            border-radius: var(--r-md);\r\n            cursor: pointer;\r\n            box-shadow: 0 10px 26px rgba(179, 0, 0, .28);\r\n            transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);\r\n        }\r\n\r\n        .bouton svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }\r\n\r\n        .bouton:hover:not(:disabled) {\r\n            background: linear-gradient(135deg, var(--or-fonce), var(--or));\r\n            color: var(--nuit);\r\n            border-color: #fff;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 16px 34px rgba(212, 175, 55, .34);\r\n        }\r\n        .bouton:hover:not(:disabled) svg { transform: translateX(4px); }\r\n        .bouton:active:not(:disabled) { transform: translateY(0); }\r\n\r\n        .bouton:disabled { opacity: .62; cursor: progress; transform: none; }\r\n\r\n        \/* Roue d'attente pendant l'envoi *\/\r\n        .roue {\r\n            display: none;\r\n            width: 16px; height: 16px;\r\n            border: 2.5px solid rgba(255, 255, 255, .35);\r\n            border-top-color: #fff;\r\n            border-radius: 50%;\r\n            animation: tourne .7s linear infinite;\r\n        }\r\n        .bouton.envoi .roue { display: block; }\r\n        .bouton.envoi svg   { display: none; }\r\n\r\n        @keyframes tourne { to { transform: rotate(360deg); } }\r\n\r\n        \/* ---------- Messages ---------- *\/\r\n        .statut {\r\n            display: none;\r\n            margin-top: 18px;\r\n            padding: 15px 18px;\r\n            border-radius: var(--r-md);\r\n            font-size: clamp(12.5px, 3vw, 13.5px);\r\n            line-height: 1.6;\r\n            font-weight: 600;\r\n        }\r\n        .statut.visible { display: block; }\r\n        .statut.ok  { background: #effaf3; border: 1px solid #bfe6cd; color: var(--succes); }\r\n        .statut.ko  { background: #fff3f3; border: 1px solid #f3c9c9; color: var(--erreur); }\r\n\r\n        .mention { margin-top: 18px; text-align: center; font-size: 11.5px; line-height: 1.6; color: var(--discret); }\r\n        .mention a { color: var(--rouge); }\r\n\r\n        \/* ==============================================================\r\n           ACCESSIBILIT\u00c9 & IMPRESSION\r\n           ============================================================== *\/\r\n        @media (prefers-reduced-motion: reduce) {\r\n            *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }\r\n            #neige { display: none; }\r\n        }\r\n\r\n        @media (prefers-contrast: more) {\r\n            .champ input { border-color: #000; }\r\n            .choix label { border-color: #000; }\r\n        }\r\n\r\n        @media print {\r\n            body { background: #fff; padding: 0; }\r\n            #neige, .paiement, .rebours { display: none !important; }\r\n            .carte { box-shadow: none; border-color: #999; max-width: none; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n\r\n<body data-rsssl=1>\r\n    <canvas id=\"neige\" aria-hidden=\"true\"><\/canvas>\r\n\r\n    <main class=\"carte\">\r\n        <header class=\"entete\">\r\n            <p class=\"chapeau\">L'Atelier des Tab<\/p>\r\n            <h1>Carte Cadeau de No\u00ebl<\/h1>\r\n            <p class=\"sous-titre\">Offrez un moment de bien-\u00eatre \u00e0 deux<\/p>\r\n            <!-- Compte \u00e0 rebours ins\u00e9r\u00e9 ici par le JS -->\r\n        <\/header>\r\n\r\n        <section class=\"offre\" aria-labelledby=\"titre-offre\">\r\n            <h2 id=\"titre-offre\">Offre D\u00e9couverte \u2014 2h de d\u00e9tente au jacuzzi<\/h2>\r\n\r\n            <ul class=\"inclus\">\r\n                <li>\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 12h16v4a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z\"\/><path d=\"M9 8c0-1.5-1.5-1.5-1.5-3S9 2 9 2M15 8c0-1.5-1.5-1.5-1.5-3S15 2 15 2\"\/><\/svg>\r\n                    <span><strong>2h de d\u00e9tente \u00e0 deux<\/strong> dans notre jacuzzi th\u00e9rapeutique, en espace privatis\u00e9.<\/span>\r\n                <\/li>\r\n                <li>\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M8 2h8l-1 7a3 3 0 0 1-6 0z\"\/><path d=\"M12 9v11M8 21h8\"\/><\/svg>\r\n                    <span>Une <strong>coupe de champagne<\/strong> ou un cocktail, chacun.<\/span>\r\n                <\/li>\r\n                <li>\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 11h18M5 11V8a7 7 0 0 1 14 0v3M4 15h16M6 19h12\"\/><\/svg>\r\n                    <span><strong>2 bouch\u00e9es gourmandes<\/strong>, sal\u00e9es ou sucr\u00e9es.<\/span>\r\n                <\/li>\r\n                <li>\r\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n                    <span>Serviette avec Peignoir et claquettes inclus.<\/span>\r\n                <\/li>\r\n            <\/ul>\r\n\r\n            <div class=\"creneaux\">\r\n                <b>Cr\u00e9neaux au choix<\/b>\r\n                <span class=\"heures\">\r\n                    <span>10h \u2013 12h<\/span>\r\n                    <span>14h \u2013 16h<\/span>\r\n                    <span>19h \u2013 21h<\/span>\r\n                <\/span>\r\n            <\/div>\r\n\r\n            <p class=\"prix\">\r\n                <span class=\"montant\">100&nbsp;<span aria-hidden=\"true\">\u20ac<\/span><span class=\"sr\">euros<\/span><\/span>\r\n                <span class=\"pour\">pour 2 personnes<\/span>\r\n            <\/p>\r\n\r\n            <p class=\"validite\">Carte valable jusqu'au 31 d\u00e9cembre 2027<\/p>\r\n        <\/section>\r\n\r\n        <form id=\"commande\" novalidate>\r\n            <fieldset>\r\n                <legend>Vos coordonn\u00e9es<\/legend>\r\n\r\n                <div class=\"duo\">\r\n                    <div class=\"champ\">\r\n                        <label for=\"prenom\">Pr\u00e9nom *<\/label>\r\n                        <input type=\"text\" id=\"prenom\" name=\"prenom\" autocomplete=\"given-name\"\r\n                               maxlength=\"80\" required placeholder=\"Marie\">\r\n                        <span class=\"erreur-champ\" id=\"err-prenom\"><\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"champ\">\r\n                        <label for=\"nom\">Nom *<\/label>\r\n                        <input type=\"text\" id=\"nom\" name=\"nom\" autocomplete=\"family-name\"\r\n                               maxlength=\"80\" required placeholder=\"Dupont\">\r\n                        <span class=\"erreur-champ\" id=\"err-nom\"><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"champ\">\r\n                    <label for=\"email\">Adresse e-mail *<\/label>\r\n                    <input type=\"email\" id=\"email\" name=\"email\" autocomplete=\"email\"\r\n                           inputmode=\"email\" maxlength=\"150\" required placeholder=\"marie.dupont@exemple.fr\"\r\n                           aria-describedby=\"aide-email\">\r\n                    <span class=\"aide\" id=\"aide-email\">C'est l\u00e0 que nous enverrons votre carte si vous payez en ligne.<\/span>\r\n                    <span class=\"erreur-champ\" id=\"err-email\"><\/span>\r\n                <\/div>\r\n\r\n                <div class=\"champ\">\r\n                    <label for=\"telephone\">T\u00e9l\u00e9phone *<\/label>\r\n                    <input type=\"tel\" id=\"telephone\" name=\"telephone\" autocomplete=\"tel\"\r\n                           inputmode=\"tel\" maxlength=\"30\" required placeholder=\"06 12 34 56 78\">\r\n                    <span class=\"erreur-champ\" id=\"err-telephone\"><\/span>\r\n                <\/div>\r\n            <\/fieldset>\r\n\r\n            <fieldset style=\"margin-top: clamp(20px, 4vw, 28px);\">\r\n                <legend>Personnaliser la carte<\/legend>\r\n\r\n                <div class=\"duo\">\r\n                    <div class=\"champ\">\r\n                        <label for=\"de_la_part_de\">De la part de *<\/label>\r\n                        <input type=\"text\" id=\"de_la_part_de\" name=\"de_la_part_de\"\r\n                               maxlength=\"80\" required placeholder=\"Nom \u00e0 afficher\">\r\n                        <span class=\"erreur-champ\" id=\"err-de_la_part_de\"><\/span>\r\n                    <\/div>\r\n\r\n                    <div class=\"champ\">\r\n                        <label for=\"pour\">Pour *<\/label>\r\n                        <input type=\"text\" id=\"pour\" name=\"pour\"\r\n                               maxlength=\"80\" required placeholder=\"Nom du b\u00e9n\u00e9ficiaire\">\r\n                        <span class=\"erreur-champ\" id=\"err-pour\"><\/span>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"champ\">\r\n                    <label for=\"date_resa\">Date souhait\u00e9e <span class=\"opt\">(facultatif)<\/span><\/label>\r\n                    <input type=\"text\" id=\"date_resa\" name=\"date_resa\" maxlength=\"80\"\r\n                           placeholder=\"Ex. 26 d\u00e9cembre \u00e0 19h\" aria-describedby=\"aide-date\">\r\n                    <span class=\"aide\" id=\"aide-date\"> Pour convenir d\u2019une date, n\u2019h\u00e9sitez pas \u00e0 nous appeler au pr\u00e9alable. <strong><br> Au : 06 20 72 32 38<br><\/strong><\/span>\r\n                <\/div>\r\n\r\n                <!-- Pi\u00e8ge \u00e0 robots. Ne pas retirer : il bloque les envois automatis\u00e9s. -->\r\n                <div class=\"piege\" aria-hidden=\"true\">\r\n                    <label for=\"site_web\">Ne remplissez pas ce champ<\/label>\r\n                    <input type=\"text\" id=\"site_web\" name=\"site_web\" tabindex=\"-1\" autocomplete=\"off\">\r\n                <\/div>\r\n            <\/fieldset>\r\n\r\n            <section class=\"paiement\">\r\n                <fieldset>\r\n                    <legend>Mode de r\u00e8glement<\/legend>\r\n\r\n                    <div class=\"choix\" role=\"radiogroup\" aria-label=\"Mode de r\u00e8glement\">\r\n                        <input type=\"radio\" name=\"mode\" id=\"mode-place\" value=\"place\">\r\n                        <label for=\"mode-place\">\r\n                            <span class=\"titre\">R\u00e9gler sur place<\/span>\r\n                            <span class=\"detail\">Esp\u00e8ces ou carte bancaire (+2 \u20ac en CB). Carte remise dans une jolie enveloppe.<\/span>\r\n                        <\/label>\r\n\r\n                        <input type=\"radio\" name=\"mode\" id=\"mode-ligne\" value=\"ligne\">\r\n                        <label for=\"mode-ligne\">\r\n                            <span class=\"titre\">Payer en ligne<\/span>\r\n                            <span class=\"detail\">Paiement s\u00e9curis\u00e9 SumUp. Carte envoy\u00e9e par e-mail.<\/span>\r\n                        <\/label>\r\n                    <\/div>\r\n\r\n                    <div class=\"volet\" id=\"volet-place\">\r\n                        <div class=\"encadre\">\r\n                            <p><strong>O\u00f9 r\u00e9cup\u00e9rer votre carte<\/strong><\/p>\r\n                            <p>L'Atelier des Tab<br>4 rue Saint Martin la Corneille<br>27370 Saint-Pierre-des-Fleurs<\/p>\r\n                            <p><a href=\"tel:+33620723238\">06 20 72 32 38<\/a><\/p>\r\n                        <\/div>\r\n                        <button type=\"submit\" class=\"bouton\" id=\"btn-place\">\r\n                            <span class=\"roue\" aria-hidden=\"true\"><\/span>\r\n                            <span class=\"libelle\">Valider ma commande<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg>\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                    <div class=\"volet\" id=\"volet-ligne\">\r\n                        <div class=\"encadre\">\r\n                            <p><strong>Paiement s\u00e9curis\u00e9 par SumUp<\/strong><\/p>\r\n                            <p>Vous allez \u00eatre redirig\u00e9 vers SumUp pour r\u00e9gler 100 \u20ac. Votre code de carte cadeau vous sera envoy\u00e9 par e-mail apr\u00e8s validation du paiement.<\/p>\r\n                        <\/div>\r\n                        <button type=\"submit\" class=\"bouton\" id=\"btn-ligne\">\r\n                            <span class=\"roue\" aria-hidden=\"true\"><\/span>\r\n                            <span class=\"libelle\">Payer 100 \u20ac sur SumUp<\/span>\r\n                            <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg>\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                    <p class=\"statut\" id=\"statut\" role=\"status\" aria-live=\"polite\"><\/p>\r\n                <\/fieldset>\r\n            <\/section>\r\n        <\/form>\r\n\r\n        <!-- Confirmation \"r\u00e9gler sur place\" : HORS du formulaire, car le formulaire\r\n             est masqu\u00e9 apr\u00e8s l'envoi (l'ancien message \u00e9tait masqu\u00e9 avec lui). -->\r\n        <section class=\"confirmation\" id=\"confirmation\" tabindex=\"-1\" hidden aria-live=\"polite\">\r\n            <div class=\"encadre\">\r\n                <p><strong>Merci, votre commande est enregistr\u00e9e.<\/strong><\/p>\r\n                <p>Nous vous attendons sur place pour le r\u00e8glement et la remise de votre carte cadeau, dans sa jolie enveloppe. \u00c0 tr\u00e8s vite&nbsp;!<\/p>\r\n                <p class=\"retour\">Retour \u00e0 l'accueil dans <b id=\"compte\">8<\/b>&nbsp;s\u2026<\/p>\r\n            <\/div>\r\n            <a class=\"bouton\" href=\"https:\/\/latelierdestab.com\/\" id=\"retour-accueil\">\r\n                <span class=\"libelle\">Retour \u00e0 l'accueil<\/span>\r\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg>\r\n            <\/a>\r\n        <\/section>\r\n\r\n        <noscript>\r\n            <p class=\"encadre\" style=\"margin-top:20px\">\r\n                Ce formulaire a besoin de JavaScript. Vous pouvez commander par t\u00e9l\u00e9phone au\r\n                <a href=\"tel:+33620723238\">06 20 72 32 38<\/a>.\r\n            <\/p>\r\n        <\/noscript>\r\n\r\n        <p class=\"mention\">\r\n            Vos coordonn\u00e9es servent uniquement \u00e0 pr\u00e9parer votre carte cadeau et ne sont transmises \u00e0 personne.\r\n            <br>Une question&nbsp;? <a href=\"tel:+33620723238\">06 20 72 32 38<\/a>\r\n        <\/p>\r\n    <\/main>\r\n\r\n    <script>\r\n        (function () {\r\n            'use strict';\r\n\r\n            var ENDPOINT = '\/send_notification.php';\r\n            var SUMUP    = 'https:\/\/pay.sumup.com\/b2c\/QQ1U25M4';\r\n            var OFFRE    = 'Carte Cadeau No\u00ebl \u2014 Offre D\u00e9couverte';\r\n            var MONTANT  = '100 \u20ac';\r\n\r\n            var moinsDAnim = window.matchMedia &&\r\n                             window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n            \/* ==========================================================\r\n               1. NEIGE\r\n               ========================================================== *\/\r\n            (function neige() {\r\n                if (moinsDAnim) return;\r\n\r\n                var canvas = document.getElementById('neige');\r\n                var ctx = canvas && canvas.getContext ? canvas.getContext('2d') : null;\r\n                if (!ctx) return;\r\n\r\n                var flocons = [], w = 0, h = 0, raf = null, actif = false, dernier = 0;\r\n\r\n                function dimensionner() {\r\n                    var dpr = Math.min(window.devicePixelRatio || 1, 2);\r\n                    w = window.innerWidth;\r\n                    h = window.innerHeight;\r\n                    canvas.width  = Math.round(w * dpr);\r\n                    canvas.height = Math.round(h * dpr);\r\n                    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\r\n\r\n                    var cible = Math.min(90, Math.max(24, Math.round(w * h \/ 22000)));\r\n                    flocons = [];\r\n                    for (var i = 0; i < cible; i++) flocons.push(nouveau(true));\r\n                }\r\n\r\n                function nouveau(reparti) {\r\n                    var r = 0.8 + Math.random() * 2.2;\r\n                    return {\r\n                        x: Math.random() * w,\r\n                        y: reparti ? Math.random() * h : -8,\r\n                        r: r,\r\n                        vy: 11 + r * 12,\r\n                        amp: 6 + Math.random() * 20,\r\n                        phase: Math.random() * Math.PI * 2,\r\n                        vitPhase: 0.3 + Math.random() * 0.6,\r\n                        opacite: 0.25 + Math.random() * 0.5\r\n                    };\r\n                }\r\n\r\n                function boucle(t) {\r\n                    if (!actif) return;\r\n                    var dt = dernier ? Math.min((t - dernier) \/ 1000, 0.05) : 0.016;\r\n                    dernier = t;\r\n\r\n                    ctx.clearRect(0, 0, w, h);\r\n                    for (var i = 0; i < flocons.length; i++) {\r\n                        var f = flocons[i];\r\n                        f.y += f.vy * dt;\r\n                        f.phase += f.vitPhase * dt;\r\n                        ctx.beginPath();\r\n                        ctx.arc(f.x + Math.sin(f.phase) * f.amp, f.y, f.r, 0, Math.PI * 2);\r\n                        ctx.fillStyle = 'rgba(255,255,255,' + f.opacite + ')';\r\n                        ctx.fill();\r\n                        if (f.y - f.r > h) flocons[i] = nouveau(false);\r\n                    }\r\n                    raf = requestAnimationFrame(boucle);\r\n                }\r\n\r\n                function demarrer() { if (actif) return; actif = true; dernier = 0; raf = requestAnimationFrame(boucle); }\r\n                function arreter()  { actif = false; if (raf) cancelAnimationFrame(raf); raf = null; }\r\n\r\n                dimensionner();\r\n                demarrer();\r\n\r\n                \/\/ On arr\u00eate l'animation quand l'onglet passe en arri\u00e8re-plan :\r\n                \/\/ inutile de faire tourner une boucle que personne ne regarde.\r\n                document.addEventListener('visibilitychange', function () {\r\n                    document.hidden ? arreter() : demarrer();\r\n                });\r\n\r\n                var tempo = null;\r\n                window.addEventListener('resize', function () {\r\n                    clearTimeout(tempo);\r\n                    tempo = setTimeout(dimensionner, 180);\r\n                });\r\n            })();\r\n\r\n            \/* ==========================================================\r\n               2. COMPTE \u00c0 REBOURS\r\n               ========================================================== *\/\r\n            (function rebours() {\r\n                var maintenant = new Date();\r\n                var jour = new Date(maintenant.getFullYear(), maintenant.getMonth(), maintenant.getDate());\r\n                var noel = new Date(maintenant.getFullYear(), 11, 25);\r\n                if (jour > noel) return;          \/\/ apr\u00e8s le 25, on n'affiche rien\r\n\r\n                var jours = Math.round((noel - jour) \/ 86400000);\r\n                var texte = jours === 0 ? \"C'est No\u00ebl aujourd'hui\"\r\n                          : jours === 1 ? '<b>1<\/b> jour avant No\u00ebl'\r\n                          : '<b>' + jours + '<\/b> jours avant No\u00ebl';\r\n\r\n                var p = document.createElement('p');\r\n                p.className = 'rebours';\r\n                p.innerHTML = '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/>' +\r\n                              '<path d=\"M12 7v5l3 2\"\/><\/svg>' + texte;\r\n                document.querySelector('.entete').appendChild(p);\r\n            })();\r\n\r\n            \/* ==========================================================\r\n               3. FORMULAIRE\r\n               ========================================================== *\/\r\n            var form    = document.getElementById('commande');\r\n            var statut  = document.getElementById('statut');\r\n            var radios  = [].slice.call(form.querySelectorAll('input[name=\"mode\"]'));\r\n            var envoiEnCours = false;\r\n            var ACCUEIL = 'https:\/\/latelierdestab.com\/';\r\n            var boutons = [document.getElementById('btn-place'), document.getElementById('btn-ligne')];\r\n            boutons.forEach(function (b) { b.setAttribute('data-libelle', b.querySelector('.libelle').textContent); });\r\n\r\n            \/* Remet le formulaire \u00e0 z\u00e9ro (retour depuis SumUp, changement de mode...) *\/\r\n            function reinitialiser() {\r\n                envoiEnCours = false;\r\n                boutons.forEach(function (b) {\r\n                    b.disabled = false;\r\n                    b.classList.remove('envoi');\r\n                    b.querySelector('.libelle').textContent = b.getAttribute('data-libelle');\r\n                });\r\n                statut.className = 'statut';\r\n                statut.textContent = '';\r\n            }\r\n\r\n            \/* Retour arri\u00e8re depuis la page de paiement : le navigateur restaure la page\r\n               fig\u00e9e, bouton encore bloqu\u00e9 sur \"Envoi en cours\". On la remet d'\u00e9querre. *\/\r\n            window.addEventListener('pageshow', function (e) {\r\n                if (e.persisted) reinitialiser();\r\n            });\r\n\r\n            \/* ---- Bascule des volets ---- *\/\r\n            function majVolets() {\r\n                var choisi = form.querySelector('input[name=\"mode\"]:checked');\r\n                document.getElementById('volet-place').classList.toggle('actif', !!choisi && choisi.value === 'place');\r\n                document.getElementById('volet-ligne').classList.toggle('actif', !!choisi && choisi.value === 'ligne');\r\n                \/\/ Un ancien message (\"Redirection vers le paiement...\") ne doit pas rester\r\n                \/\/ affich\u00e9 sous l'autre mode de r\u00e8glement.\r\n                if (!envoiEnCours) { statut.className = 'statut'; statut.textContent = ''; }\r\n            }\r\n            radios.forEach(function (r) { r.addEventListener('change', majVolets); });\r\n            majVolets();\r\n\r\n            \/* ---- Confirmation \"r\u00e9gler sur place\" puis retour \u00e0 l'accueil ---- *\/\r\n            function afficherConfirmation() {\r\n                var conf = document.getElementById('confirmation');\r\n                var compte = document.getElementById('compte');\r\n                form.style.display = 'none';\r\n                conf.hidden = false;\r\n                if (conf.scrollIntoView) conf.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n                try { conf.focus({ preventScroll: true }); } catch (err) {}\r\n\r\n                var reste = 8;\r\n                var minuteur = window.setInterval(function () {\r\n                    reste -= 1;\r\n                    compte.textContent = reste;\r\n                    if (reste <= 0) {\r\n                        window.clearInterval(minuteur);\r\n                        window.location.href = ACCUEIL;\r\n                    }\r\n                }, 1000);\r\n            }\r\n\r\n            \/* ---- Validation ---- *\/\r\n            var REGLES = {\r\n                prenom:    { test: function (v) { return v.length >= 2; },\r\n                             msg: 'Merci d\\'indiquer votre pr\u00e9nom.' },\r\n                nom:       { test: function (v) { return v.length >= 2; },\r\n                             msg: 'Merci d\\'indiquer votre nom.' },\r\n                email:     { test: function (v) { return \/^[^\\s@]+@[^\\s@]+\\.[a-z]{2,}$\/i.test(v); },\r\n                             msg: 'Cette adresse e-mail ne semble pas valide.' },\r\n                telephone: { test: function (v) { return \/^[0-9+().\\s-]{6,30}$\/.test(v) && (v.replace(\/\\D\/g, '').length >= 6); },\r\n                             msg: 'Ce num\u00e9ro ne semble pas valide.' },\r\n                de_la_part_de: { test: function (v) { return v.length >= 2; },\r\n                             msg: 'Indiquez le nom \u00e0 inscrire sur la carte.' },\r\n                pour:      { test: function (v) { return v.length >= 2; },\r\n                             msg: 'Indiquez le nom du b\u00e9n\u00e9ficiaire.' }\r\n            };\r\n\r\n            function valide(champ) {\r\n                var regle = REGLES[champ.name];\r\n                if (!regle) return true;\r\n\r\n                var ok = regle.test(champ.value.trim());\r\n                var boite = document.getElementById('err-' + champ.name);\r\n\r\n                champ.setAttribute('aria-invalid', ok ? 'false' : 'true');\r\n                if (boite) {\r\n                    boite.textContent = ok ? '' : regle.msg;\r\n                    boite.classList.toggle('visible', !ok);\r\n                    champ.setAttribute('aria-describedby',\r\n                        (champ.id === 'email' ? 'aide-email ' : '') + (ok ? '' : 'err-' + champ.name));\r\n                }\r\n                return ok;\r\n            }\r\n\r\n            Object.keys(REGLES).forEach(function (nom) {\r\n                var champ = form.elements[nom];\r\n                if (!champ) return;\r\n                \/\/ On ne signale l'erreur qu'apr\u00e8s que le champ a \u00e9t\u00e9 quitt\u00e9,\r\n                \/\/ pour ne pas harceler pendant la saisie.\r\n                champ.addEventListener('blur', function () { valide(champ); });\r\n                champ.addEventListener('input', function () {\r\n                    if (champ.getAttribute('aria-invalid') === 'true') valide(champ);\r\n                });\r\n            });\r\n\r\n            function message(type, texte) {\r\n                statut.className = 'statut visible ' + type;\r\n                statut.textContent = texte;\r\n            }\r\n\r\n            \/* ---- Envoi ---- *\/\r\n            form.addEventListener('submit', function (e) {\r\n                e.preventDefault();\r\n\r\n                \/\/ Emp\u00eache la double commande si on clique deux fois.\r\n                if (envoiEnCours) return;\r\n\r\n                var choisi = form.querySelector('input[name=\"mode\"]:checked');\r\n                if (!choisi) {\r\n                    message('ko', 'Merci de choisir un mode de r\u00e8glement.');\r\n                    radios[0].focus();\r\n                    return;\r\n                }\r\n\r\n                var premierInvalide = null;\r\n                Object.keys(REGLES).forEach(function (nom) {\r\n                    var champ = form.elements[nom];\r\n                    if (champ && !valide(champ) && !premierInvalide) premierInvalide = champ;\r\n                });\r\n\r\n                if (premierInvalide) {\r\n                    message('ko', 'Merci de corriger les champs signal\u00e9s.');\r\n                    premierInvalide.focus();\r\n                    return;\r\n                }\r\n\r\n                var enLigne = choisi.value === 'ligne';\r\n                var bouton  = document.getElementById(enLigne ? 'btn-ligne' : 'btn-place');\r\n                var libelle = bouton.querySelector('.libelle');\r\n                var texteInitial = libelle.textContent;\r\n\r\n                envoiEnCours = true;\r\n                bouton.disabled = true;\r\n                bouton.classList.add('envoi');\r\n                libelle.textContent = 'Envoi en cours\u2026';\r\n                message('ok', 'Enregistrement de votre commande\u2026');\r\n\r\n                var donnees = {\r\n                    nom:              form.elements.nom.value.trim(),\r\n                    prenom:           form.elements.prenom.value.trim(),\r\n                    email:            form.elements.email.value.trim(),\r\n                    telephone:        form.elements.telephone.value.trim(),\r\n                    de_la_part_de:    form.elements.de_la_part_de.value.trim(),\r\n                    pour:             form.elements.pour.value.trim(),\r\n                    date_reservation: form.elements.date_resa.value.trim(),\r\n                    site_web:         form.elements.site_web.value,   \/\/ pi\u00e8ge \u00e0 robots\r\n                    offre:            OFFRE,\r\n                    montant:          MONTANT,\r\n                    \/\/ Les deux noms sont imprim\u00e9s sur la carte : le serveur\r\n                    \/\/ les refuse vides, m\u00eame si quelqu'un contourne le\r\n                    \/\/ \"required\" du navigateur.\r\n                    champs_obligatoires: 'de_la_part_de,pour',\r\n                    payment_method:   (enLigne ? 'En ligne' : 'Sur place') + ' (' + OFFRE + ' \u2014 ' + MONTANT + ')'\r\n                };\r\n\r\n                function restaurer() {\r\n                    envoiEnCours = false;\r\n                    bouton.disabled = false;\r\n                    bouton.classList.remove('envoi');\r\n                    libelle.textContent = texteInitial;\r\n                }\r\n\r\n                fetch(ENDPOINT, {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application\/json' },\r\n                    body: JSON.stringify(donnees),\r\n                    keepalive: true\r\n                })\r\n                .then(function (reponse) {\r\n                    return reponse.json()\r\n                        .catch(function () { return {}; })\r\n                        .then(function (corps) {\r\n                            if (!reponse.ok) {\r\n                                throw new Error(corps.message || 'Erreur ' + reponse.status);\r\n                            }\r\n                            return corps;\r\n                        });\r\n                })\r\n                .then(function () {\r\n                    if (enLigne) {\r\n                        message('ok', 'Commande enregistr\u00e9e. Redirection vers le paiement s\u00e9curis\u00e9\u2026');\r\n                        \/\/ Redirection dans le m\u00eame onglet : un window.open() apr\u00e8s\r\n                        \/\/ une requ\u00eate asynchrone est bloqu\u00e9 par les navigateurs,\r\n                        \/\/ c'est ce qui cassait l'ancienne page.\r\n                        window.setTimeout(function () { window.location.href = SUMUP; }, 900);\r\n                    } else {\r\n                        \/\/ Commande \u00e0 r\u00e9gler sur place : on affiche la confirmation (hors\r\n                        \/\/ formulaire) puis retour automatique \u00e0 l'accueil. On laisse\r\n                        \/\/ envoiEnCours \u00e0 true pour emp\u00eacher une 2e commande.\r\n                        afficherConfirmation();\r\n                    }\r\n                })\r\n                .catch(function (err) {\r\n                    message('ko', (err && err.message ? err.message : 'Erreur technique.') +\r\n                                  ' Vous pouvez aussi commander au 06 20 72 32 38.');\r\n                    restaurer();\r\n                });\r\n            });\r\n        })();\r\n    <\/script>\r\n<\/body>\r\n\r\n<\/html>\r\n\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<div class=\"elementor-element elementor-element-71b63e0 e-flex e-con-boxed e-con e-parent\" data-id=\"71b63e0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\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":"<p>Carte Cadeau de No\u00ebl \u2014 L&rsquo;Atelier des Tab L&rsquo;Atelier des Tab Carte Cadeau de No\u00ebl Offrez un moment de bien-\u00eatre \u00e0 deux Offre D\u00e9couverte \u2014 2h de d\u00e9tente au jacuzzi 2h de d\u00e9tente \u00e0 deux dans notre jacuzzi th\u00e9rapeutique, en espace privatis\u00e9. Une coupe de champagne ou un cocktail, chacun. 2 bouch\u00e9es gourmandes, sal\u00e9es ou [&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":{"footnotes":""},"class_list":["post-1757","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/pages\/1757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/comments?post=1757"}],"version-history":[{"count":96,"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/pages\/1757\/revisions"}],"predecessor-version":[{"id":2282,"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/pages\/1757\/revisions\/2282"}],"wp:attachment":[{"href":"https:\/\/latelierdestab.com\/index.php\/wp-json\/wp\/v2\/media?parent=1757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}