Vin Myst\u00e8re \u2014 Eau de Vigne<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Spectral:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --lie:#2b0a16; --lie2:#420f22; --parch:#f3ead6; --parch2:#ece0c4;\n --ink:#1a1411; --ochre:#c4943f; --ochre-d:#9c6f23; --green:#5a6b3b;\n --line:rgba(43,10,22,.16);\n }\n *{box-sizing:border-box;margin:0;padding:0}\n html,body{background:var(--parch);color:var(--ink);font-family:\"Spectral\",serif}\n body{\n min-height:100vh;padding:22px 18px 60px;\n background-image:\n radial-gradient(circle at 18% 8%, rgba(196,148,63,.10), transparent 42%),\n radial-gradient(circle at 88% 96%, rgba(43,10,22,.08), transparent 46%);\n }\n .grain{position:fixed;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'\/%3E%3C\/svg%3E\");}\n .wrap{max-width:520px;margin:0 auto;position:relative}\n header{text-align:center;margin-bottom:26px}\n .kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ochre-d);margin-bottom:10px}\n h1{font-family:\"Fraunces\",serif;font-weight:600;font-size:2.7rem;line-height:.96;color:var(--lie);font-variation-settings:\"opsz\" 100}\n h1 em{font-style:italic;color:var(--ochre)}\n .sub{font-style:italic;color:#6b5444;margin-top:10px;font-size:1.02rem}\n .rule{height:1px;background:var(--line);margin:22px 0}\n label{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lie2);margin:0 0 7px 2px;font-weight:600}\n input,select{width:100%;padding:13px 14px;font-family:\"Spectral\",serif;font-size:1.05rem;\n background:#fbf6ea;border:1.5px solid var(--line);border-radius:11px;color:var(--ink);\n -webkit-appearance:none;appearance:none}\n select{background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' fill='%239c6f23'%3E%3Cpath d='M7 10L2 4h10z'\/%3E%3C\/svg%3E\");\n background-repeat:no-repeat;background-position:right 14px center}\n input:focus,select:focus{outline:none;border-color:var(--ochre);box-shadow:0 0 0 3px rgba(196,148,63,.18)}\n .field{margin-bottom:18px}\n .row{display:flex;gap:12px}.row .field{flex:1}\n .prix-wrap{position:relative}\n .prix-wrap input{padding-left:30px}\n .prix-wrap::before{content:\"\u20ac\";position:absolute;left:13px;top:13px;color:var(--ochre-d);font-size:1.05rem}\n .aromes{display:grid;grid-template-columns:1fr 1fr;gap:9px}\n .chip input{position:absolute;opacity:0;pointer-events:none}\n .chip label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:normal;\n font-size:.94rem;font-weight:400;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;\n background:#fbf6ea;cursor:pointer;margin:0;transition:.15s;color:var(--ink)}\n .chip .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ochre-d);flex:none;transition:.15s}\n .chip input:checked + label{background:var(--lie);color:var(--parch);border-color:var(--lie)}\n .chip input:checked + label .dot{background:var(--ochre);border-color:var(--ochre)}\n button{width:100%;margin-top:26px;padding:17px;font-family:\"Fraunces\",serif;font-size:1.18rem;font-weight:600;\n background:var(--lie);color:var(--parch);border:none;border-radius:13px;cursor:pointer;\n letter-spacing:.02em;transition:.18s;box-shadow:0 8px 22px rgba(43,10,22,.28)}\n button:hover{background:var(--lie2);transform:translateY(-1px)}\n button:disabled{opacity:.55;cursor:not-allowed;transform:none}\n \/* \u00e9cran r\u00e9sultat *\/\n #result{display:none;text-align:center;padding:14px 4px}\n #result .score{font-family:\"Fraunces\",serif;font-size:5rem;line-height:1;color:var(--lie);font-weight:600}\n #result .score small{font-size:1.4rem;color:var(--ochre-d)}\n #result .msg{font-style:italic;font-size:1.25rem;margin:14px 0 22px;color:var(--lie2)}\n #result .detail{text-align:left;max-width:330px;margin:0 auto;font-size:.98rem}\n #result .detail div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}\n #result .detail b{color:var(--ochre-d);font-weight:600}\n .err{color:#9a1c2e;font-style:italic;text-align:center;margin-top:14px;display:none}\n .consent{display:flex;align-items:flex-start;gap:11px;margin-top:24px;padding:14px 15px;\n border:1.5px dashed var(--line);border-radius:11px;background:rgba(124,138,82,.06)}\n .consent input{position:absolute;opacity:0;pointer-events:none}\n .consent label{display:flex;align-items:flex-start;gap:11px;text-transform:none;letter-spacing:normal;\n font-size:.92rem;font-weight:400;color:#5a4636;cursor:pointer;margin:0;line-height:1.4}\n .consent .box{width:20px;height:20px;flex:none;border:1.5px solid var(--ochre-d);border-radius:6px;\n background:#fbf6ea;margin-top:1px;transition:.15s;position:relative}\n .consent input:checked + label .box{background:var(--green);border-color:var(--green)}\n .consent input:checked + label .box::after{content:\"\";position:absolute;left:6px;top:2px;width:5px;height:10px;\n border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}\n<\/style>\n<\/head>\n<body>\n<div class=\"grain\"><\/div>\n<div class=\"wrap\">\n\n <div id=\"form\">\n <header>\n <div class=\"kicker\">Eau de Vigne \u00b7 Atelier<\/div>\n <h1>Le Vin <em>Myst\u00e8re<\/em><\/h1>\n <p class=\"sub\">Devine ce qu’il y a dans le verre. Le plus juste repart avec le cadeau.<\/p>\n <\/header>\n <div class=\"rule\"><\/div>\n\n <div class=\"field\">\n <label>Ton pseudo<\/label>\n <input id=\"pseudo\" type=\"text\" maxlength=\"24\" placeholder=\"ex. La Truffe\">\n <\/div>\n\n <div class=\"field\">\n <label>E-mail (facultatif)<\/label>\n <input id=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"pour recevoir ton score\">\n <\/div>\n\n <div class=\"field\">\n <label>C\u00e9page dominant<\/label>\n <select id=\"cepage\"><\/select>\n <\/div>\n\n <div class=\"row\">\n <div class=\"field\"><label>Pays<\/label><select id=\"pays\"><\/select><\/div>\n <div class=\"field\"><label>R\u00e9gion \/ appellation<\/label><select id=\"region\"><\/select><\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Prix estim\u00e9 (la bouteille)<\/label>\n <div class=\"prix-wrap\"><input id=\"prix\" type=\"number\" min=\"0\" step=\"0.5\" inputmode=\"decimal\" placeholder=\"0\"><\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Ar\u00f4mes per\u00e7us<\/label>\n <div class=\"aromes\" id=\"aromes\"><\/div>\n <\/div>\n\n <div class=\"consent\">\n <input type=\"checkbox\" id=\"newsletter\">\n <label for=\"newsletter\"><span class=\"box\"><\/span>Je veux recevoir la lettre d’Eau de Vigne \u2014 vin, terroir, dates d’ateliers. D\u00e9sinscription en un clic.<\/label>\n <\/div>\n\n <button id=\"send\">Valider ma r\u00e9ponse<\/button>\n <p class=\"err\" id=\"err\">Oups \u2014 envoi impossible. R\u00e9essaie.<\/p>\n <\/div>\n\n <div id=\"result\">\n <div class=\"kicker\">Ta d\u00e9gustation<\/div>\n <div class=\"score\"><span id=\"pts\">0<\/span><small>\/45 pts<\/small><\/div>\n <p class=\"msg\" id=\"rmsg\"><\/p>\n <div class=\"detail\" id=\"rdetail\"><\/div>\n <\/div>\n\n<\/div>\n\n<script>\n\/* ============================================================\n CONFIG \u2014 \u00e0 r\u00e9gler une fois\n ============================================================ *\/\nconst N8N_BASE = \"https:\/\/n8n.eaudevigne.com\/webhook\"; \/\/ \u2190 ton URL n8n\nconst ENDPOINT_SUBMIT = N8N_BASE + \"\/vm-submit\";\n\n\/* Listes (le c\u00e9page\/pays\/r\u00e9gion de la BONNE R\u00c9PONSE dans NocoDB\n doivent reprendre EXACTEMENT un de ces libell\u00e9s) *\/\nconst CEPAGES = [\"Cabernet Sauvignon\",\"Merlot\",\"Cabernet Franc\",\"Pinot Noir\",\"Syrah\",\"Grenache\",\n \"Gamay\",\"Mourv\u00e8dre\",\"Carignan\",\"Malbec\",\"Chardonnay\",\"Sauvignon Blanc\",\"Chenin Blanc\",\"Riesling\",\n \"Viognier\",\"Gewurztraminer\",\"Marsanne\",\"Muscat\"];\nconst PAYS = [\"France\",\"Italie\",\"Espagne\",\"Portugal\",\"Allemagne\",\"Autriche\",\"\u00c9tats-Unis\",\"Argentine\",\n \"Chili\",\"Afrique du Sud\",\"Australie\",\"Nouvelle-Z\u00e9lande\",\"G\u00e9orgie\",\"Liban\"];\nconst REGIONS = [\"Bordeaux\",\"Bourgogne\",\"Beaujolais\",\"Rh\u00f4ne Nord\",\"Rh\u00f4ne Sud\",\"Loire\",\"Alsace\",\n \"Champagne\",\"Languedoc\",\"Adela\u00efde Hills\",\"Mendoza\",\"Colchagua\",\"Jura\",\"Stellenbosch\",\"Toscane\",\"Pi\u00e9mont\",\n \"Rioja\",\"Douro\",\"Mosel\",\"Marlbourough\"];\nconst AROMES = [\"Fruits rouges\",\"Fruits noirs\",\"Fruits \u00e0 noyau\",\"Agrumes\",\"Fruits blancs\",\"Fruits exotiques\",\n \"Fleurs\",\"\u00c9pices\",\"Poivre\",\"R\u00e9glisse\",\"Vanille \/ bois\u00e9\",\"Fum\u00e9 \/ torr\u00e9fi\u00e9\",\"V\u00e9g\u00e9tal\",\"Min\u00e9ral \/ pierre\",\n \"Cuir \/ animal\",\"Beurre \/ brioche\",\"Miel\",\"Champignon \/ sous-bois\"];\n\n\/* ----- rendu des listes ----- *\/\nfunction fill(id, arr, ph){\n const s = document.getElementById(id);\n s.innerHTML = '<option value=\"\" disabled selected>'+ph+'<\/option>' +\n arr.map(v=>`<option>${v}<\/option>`).join('');\n}\nfill(\"cepage\",CEPAGES,\"Choisis\u2026\"); fill(\"pays\",PAYS,\"Choisis\u2026\"); fill(\"region\",REGIONS,\"Choisis\u2026\");\ndocument.getElementById(\"aromes\").innerHTML = AROMES.map((a,i)=>\n `<div class=\"chip\"><input type=\"checkbox\" id=\"a${i}\" value=\"${a}\"><label for=\"a${i}\"><span class=\"dot\"><\/span>${a}<\/label><\/div>`\n).join('');\n\n\/* ----- envoi ----- *\/\nconst btn = document.getElementById(\"send\");\nbtn.addEventListener(\"click\", async ()=>{\n const pseudo = document.getElementById(\"pseudo\").value.trim();\n const email = document.getElementById(\"email\").value.trim();\n const newsletter = document.getElementById(\"newsletter\").checked;\n const cepage = document.getElementById(\"cepage\").value;\n const pays = document.getElementById(\"pays\").value;\n const region = document.getElementById(\"region\").value;\n const prix = parseFloat(document.getElementById(\"prix\").value);\n const aromes = [...document.querySelectorAll('#aromes input:checked')].map(c=>c.value);\n\n if(!pseudo || !cepage || !pays || !region || isNaN(prix)){\n document.getElementById(\"err\").textContent = \"Remplis au moins pseudo, c\u00e9page, pays, r\u00e9gion et prix.\";\n document.getElementById(\"err\").style.display=\"block\"; return;\n }\n if(newsletter && !email){\n document.getElementById(\"err\").textContent = \"Pour la newsletter, indique ton e-mail (ou d\u00e9coche la case).\";\n document.getElementById(\"err\").style.display=\"block\"; return;\n }\n btn.disabled = true; btn.textContent = \"Envoi\u2026\";\n document.getElementById(\"err\").style.display=\"none\";\n\n try{\n const r = await fetch(ENDPOINT_SUBMIT,{\n method:\"POST\", headers:{\"Content-Type\":\"application\/json\"},\n body:JSON.stringify({pseudo,email,newsletter,cepage,pays,region,prix,aromes})\n });\n if(!r.ok) throw new Error(r.status);\n const data = await r.json();\n showResult(data);\n }catch(e){\n btn.disabled=false; btn.textContent=\"Valider ma r\u00e9ponse\";\n document.getElementById(\"err\").textContent=\"Oups \u2014 envoi impossible. R\u00e9essaie.\";\n document.getElementById(\"err\").style.display=\"block\";\n }\n});\n\nfunction showResult(d){\n const det = d.detail || {};\n document.getElementById(\"form\").style.display=\"none\";\n document.getElementById(\"result\").style.display=\"block\";\n const score = d.score ?? 0;\n document.getElementById(\"pts\").textContent = score;\n document.getElementById(\"rmsg\").textContent =\n score>=35 ? \"Palais de ma\u00eetre. Le cadeau te tend les bras.\" :\n score>=22 ? \"Belle d\u00e9gustation, \u00e7a sent l'amateur \u00e9clair\u00e9.\" :\n score>=10 ? \"Pas mal \u2014 le terroir te parle un peu.\" :\n \"Le verre garde ses secrets. C'est \u00e7a, le myst\u00e8re.\";\n const labels={cepage:\"C\u00e9page\",pays:\"Pays\",region:\"R\u00e9gion\",prix:\"Prix\",aromes:\"Ar\u00f4mes\"};\n document.getElementById(\"rdetail\").innerHTML = Object.keys(labels)\n .map(k=>`<div><span>${labels[k]}<\/span><b>+${det[k]??0}<\/b><\/div>`).join('');\n}\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Vin Myst\u00e8re \u2014 Eau de Vigne Eau de Vigne \u00b7 Atelier Le Vin Myst\u00e8re Devine ce qu’il y a dans le verre. Le plus juste repart avec le cadeau. Ton pseudo E-mail (facultatif) C\u00e9page dominant Pays R\u00e9gion \/ appellation Prix estim\u00e9 (la bouteille) Ar\u00f4mes per\u00e7us Je veux recevoir la lettre d’Eau de Vigne \u2014 vin, … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/eaudevigne.com\/wordpress\/3563-2\/\" class=\"more-link\">Continuer la lecture<span class=\"screen-reader-text\"> de « VIN MYSTERE »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3563","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages\/3563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3563"}],"version-history":[{"count":2,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages\/3563\/revisions"}],"predecessor-version":[{"id":3567,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages\/3563\/revisions\/3567"}],"wp:attachment":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3563,"date":"2026-06-02T14:59:21","date_gmt":"2026-06-02T12:59:21","guid":{"rendered":"https:\/\/eaudevigne.com\/wordpress\/?page_id=3563"},"modified":"2026-06-02T15:01:37","modified_gmt":"2026-06-02T13:01:37","slug":"3563-2","status":"publish","type":"page","link":"https:\/\/eaudevigne.com\/wordpress\/3563-2\/","title":{"rendered":"VIN MYSTERE"},"content":{"rendered":"\n\n\n\n\n\nVin Myst\u00e8re \u2014 Eau de Vigne<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Spectral:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n :root{\n --lie:#2b0a16; --lie2:#420f22; --parch:#f3ead6; --parch2:#ece0c4;\n --ink:#1a1411; --ochre:#c4943f; --ochre-d:#9c6f23; --green:#5a6b3b;\n --line:rgba(43,10,22,.16);\n }\n *{box-sizing:border-box;margin:0;padding:0}\n html,body{background:var(--parch);color:var(--ink);font-family:\"Spectral\",serif}\n body{\n min-height:100vh;padding:22px 18px 60px;\n background-image:\n radial-gradient(circle at 18% 8%, rgba(196,148,63,.10), transparent 42%),\n radial-gradient(circle at 88% 96%, rgba(43,10,22,.08), transparent 46%);\n }\n .grain{position:fixed;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;\n background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'\/%3E%3C\/svg%3E\");}\n .wrap{max-width:520px;margin:0 auto;position:relative}\n header{text-align:center;margin-bottom:26px}\n .kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--ochre-d);margin-bottom:10px}\n h1{font-family:\"Fraunces\",serif;font-weight:600;font-size:2.7rem;line-height:.96;color:var(--lie);font-variation-settings:\"opsz\" 100}\n h1 em{font-style:italic;color:var(--ochre)}\n .sub{font-style:italic;color:#6b5444;margin-top:10px;font-size:1.02rem}\n .rule{height:1px;background:var(--line);margin:22px 0}\n label{display:block;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lie2);margin:0 0 7px 2px;font-weight:600}\n input,select{width:100%;padding:13px 14px;font-family:\"Spectral\",serif;font-size:1.05rem;\n background:#fbf6ea;border:1.5px solid var(--line);border-radius:11px;color:var(--ink);\n -webkit-appearance:none;appearance:none}\n select{background-image:url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' fill='%239c6f23'%3E%3Cpath d='M7 10L2 4h10z'\/%3E%3C\/svg%3E\");\n background-repeat:no-repeat;background-position:right 14px center}\n input:focus,select:focus{outline:none;border-color:var(--ochre);box-shadow:0 0 0 3px rgba(196,148,63,.18)}\n .field{margin-bottom:18px}\n .row{display:flex;gap:12px}.row .field{flex:1}\n .prix-wrap{position:relative}\n .prix-wrap input{padding-left:30px}\n .prix-wrap::before{content:\"\u20ac\";position:absolute;left:13px;top:13px;color:var(--ochre-d);font-size:1.05rem}\n .aromes{display:grid;grid-template-columns:1fr 1fr;gap:9px}\n .chip input{position:absolute;opacity:0;pointer-events:none}\n .chip label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:normal;\n font-size:.94rem;font-weight:400;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;\n background:#fbf6ea;cursor:pointer;margin:0;transition:.15s;color:var(--ink)}\n .chip .dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ochre-d);flex:none;transition:.15s}\n .chip input:checked + label{background:var(--lie);color:var(--parch);border-color:var(--lie)}\n .chip input:checked + label .dot{background:var(--ochre);border-color:var(--ochre)}\n button{width:100%;margin-top:26px;padding:17px;font-family:\"Fraunces\",serif;font-size:1.18rem;font-weight:600;\n background:var(--lie);color:var(--parch);border:none;border-radius:13px;cursor:pointer;\n letter-spacing:.02em;transition:.18s;box-shadow:0 8px 22px rgba(43,10,22,.28)}\n button:hover{background:var(--lie2);transform:translateY(-1px)}\n button:disabled{opacity:.55;cursor:not-allowed;transform:none}\n \/* \u00e9cran r\u00e9sultat *\/\n #result{display:none;text-align:center;padding:14px 4px}\n #result .score{font-family:\"Fraunces\",serif;font-size:5rem;line-height:1;color:var(--lie);font-weight:600}\n #result .score small{font-size:1.4rem;color:var(--ochre-d)}\n #result .msg{font-style:italic;font-size:1.25rem;margin:14px 0 22px;color:var(--lie2)}\n #result .detail{text-align:left;max-width:330px;margin:0 auto;font-size:.98rem}\n #result .detail div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}\n #result .detail b{color:var(--ochre-d);font-weight:600}\n .err{color:#9a1c2e;font-style:italic;text-align:center;margin-top:14px;display:none}\n .consent{display:flex;align-items:flex-start;gap:11px;margin-top:24px;padding:14px 15px;\n border:1.5px dashed var(--line);border-radius:11px;background:rgba(124,138,82,.06)}\n .consent input{position:absolute;opacity:0;pointer-events:none}\n .consent label{display:flex;align-items:flex-start;gap:11px;text-transform:none;letter-spacing:normal;\n font-size:.92rem;font-weight:400;color:#5a4636;cursor:pointer;margin:0;line-height:1.4}\n .consent .box{width:20px;height:20px;flex:none;border:1.5px solid var(--ochre-d);border-radius:6px;\n background:#fbf6ea;margin-top:1px;transition:.15s;position:relative}\n .consent input:checked + label .box{background:var(--green);border-color:var(--green)}\n .consent input:checked + label .box::after{content:\"\";position:absolute;left:6px;top:2px;width:5px;height:10px;\n border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}\n<\/style>\n<\/head>\n<body>\n<div class=\"grain\"><\/div>\n<div class=\"wrap\">\n\n <div id=\"form\">\n <header>\n <div class=\"kicker\">Eau de Vigne \u00b7 Atelier<\/div>\n <h1>Le Vin <em>Myst\u00e8re<\/em><\/h1>\n <p class=\"sub\">Devine ce qu’il y a dans le verre. Le plus juste repart avec le cadeau.<\/p>\n <\/header>\n <div class=\"rule\"><\/div>\n\n <div class=\"field\">\n <label>Ton pseudo<\/label>\n <input id=\"pseudo\" type=\"text\" maxlength=\"24\" placeholder=\"ex. La Truffe\">\n <\/div>\n\n <div class=\"field\">\n <label>E-mail (facultatif)<\/label>\n <input id=\"email\" type=\"email\" autocomplete=\"email\" placeholder=\"pour recevoir ton score\">\n <\/div>\n\n <div class=\"field\">\n <label>C\u00e9page dominant<\/label>\n <select id=\"cepage\"><\/select>\n <\/div>\n\n <div class=\"row\">\n <div class=\"field\"><label>Pays<\/label><select id=\"pays\"><\/select><\/div>\n <div class=\"field\"><label>R\u00e9gion \/ appellation<\/label><select id=\"region\"><\/select><\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Prix estim\u00e9 (la bouteille)<\/label>\n <div class=\"prix-wrap\"><input id=\"prix\" type=\"number\" min=\"0\" step=\"0.5\" inputmode=\"decimal\" placeholder=\"0\"><\/div>\n <\/div>\n\n <div class=\"field\">\n <label>Ar\u00f4mes per\u00e7us<\/label>\n <div class=\"aromes\" id=\"aromes\"><\/div>\n <\/div>\n\n <div class=\"consent\">\n <input type=\"checkbox\" id=\"newsletter\">\n <label for=\"newsletter\"><span class=\"box\"><\/span>Je veux recevoir la lettre d’Eau de Vigne \u2014 vin, terroir, dates d’ateliers. D\u00e9sinscription en un clic.<\/label>\n <\/div>\n\n <button id=\"send\">Valider ma r\u00e9ponse<\/button>\n <p class=\"err\" id=\"err\">Oups \u2014 envoi impossible. R\u00e9essaie.<\/p>\n <\/div>\n\n <div id=\"result\">\n <div class=\"kicker\">Ta d\u00e9gustation<\/div>\n <div class=\"score\"><span id=\"pts\">0<\/span><small>\/45 pts<\/small><\/div>\n <p class=\"msg\" id=\"rmsg\"><\/p>\n <div class=\"detail\" id=\"rdetail\"><\/div>\n <\/div>\n\n<\/div>\n\n<script>\n\/* ============================================================\n CONFIG \u2014 \u00e0 r\u00e9gler une fois\n ============================================================ *\/\nconst N8N_BASE = \"https:\/\/n8n.eaudevigne.com\/webhook\"; \/\/ \u2190 ton URL n8n\nconst ENDPOINT_SUBMIT = N8N_BASE + \"\/vm-submit\";\n\n\/* Listes (le c\u00e9page\/pays\/r\u00e9gion de la BONNE R\u00c9PONSE dans NocoDB\n doivent reprendre EXACTEMENT un de ces libell\u00e9s) *\/\nconst CEPAGES = [\"Cabernet Sauvignon\",\"Merlot\",\"Cabernet Franc\",\"Pinot Noir\",\"Syrah\",\"Grenache\",\n \"Gamay\",\"Mourv\u00e8dre\",\"Carignan\",\"Malbec\",\"Chardonnay\",\"Sauvignon Blanc\",\"Chenin Blanc\",\"Riesling\",\n \"Viognier\",\"Gewurztraminer\",\"Marsanne\",\"Muscat\"];\nconst PAYS = [\"France\",\"Italie\",\"Espagne\",\"Portugal\",\"Allemagne\",\"Autriche\",\"\u00c9tats-Unis\",\"Argentine\",\n \"Chili\",\"Afrique du Sud\",\"Australie\",\"Nouvelle-Z\u00e9lande\",\"G\u00e9orgie\",\"Liban\"];\nconst REGIONS = [\"Bordeaux\",\"Bourgogne\",\"Beaujolais\",\"Rh\u00f4ne Nord\",\"Rh\u00f4ne Sud\",\"Loire\",\"Alsace\",\n \"Champagne\",\"Languedoc\",\"Adela\u00efde Hills\",\"Mendoza\",\"Colchagua\",\"Jura\",\"Stellenbosch\",\"Toscane\",\"Pi\u00e9mont\",\n \"Rioja\",\"Douro\",\"Mosel\",\"Marlbourough\"];\nconst AROMES = [\"Fruits rouges\",\"Fruits noirs\",\"Fruits \u00e0 noyau\",\"Agrumes\",\"Fruits blancs\",\"Fruits exotiques\",\n \"Fleurs\",\"\u00c9pices\",\"Poivre\",\"R\u00e9glisse\",\"Vanille \/ bois\u00e9\",\"Fum\u00e9 \/ torr\u00e9fi\u00e9\",\"V\u00e9g\u00e9tal\",\"Min\u00e9ral \/ pierre\",\n \"Cuir \/ animal\",\"Beurre \/ brioche\",\"Miel\",\"Champignon \/ sous-bois\"];\n\n\/* ----- rendu des listes ----- *\/\nfunction fill(id, arr, ph){\n const s = document.getElementById(id);\n s.innerHTML = '<option value=\"\" disabled selected>'+ph+'<\/option>' +\n arr.map(v=>`<option>${v}<\/option>`).join('');\n}\nfill(\"cepage\",CEPAGES,\"Choisis\u2026\"); fill(\"pays\",PAYS,\"Choisis\u2026\"); fill(\"region\",REGIONS,\"Choisis\u2026\");\ndocument.getElementById(\"aromes\").innerHTML = AROMES.map((a,i)=>\n `<div class=\"chip\"><input type=\"checkbox\" id=\"a${i}\" value=\"${a}\"><label for=\"a${i}\"><span class=\"dot\"><\/span>${a}<\/label><\/div>`\n).join('');\n\n\/* ----- envoi ----- *\/\nconst btn = document.getElementById(\"send\");\nbtn.addEventListener(\"click\", async ()=>{\n const pseudo = document.getElementById(\"pseudo\").value.trim();\n const email = document.getElementById(\"email\").value.trim();\n const newsletter = document.getElementById(\"newsletter\").checked;\n const cepage = document.getElementById(\"cepage\").value;\n const pays = document.getElementById(\"pays\").value;\n const region = document.getElementById(\"region\").value;\n const prix = parseFloat(document.getElementById(\"prix\").value);\n const aromes = [...document.querySelectorAll('#aromes input:checked')].map(c=>c.value);\n\n if(!pseudo || !cepage || !pays || !region || isNaN(prix)){\n document.getElementById(\"err\").textContent = \"Remplis au moins pseudo, c\u00e9page, pays, r\u00e9gion et prix.\";\n document.getElementById(\"err\").style.display=\"block\"; return;\n }\n if(newsletter && !email){\n document.getElementById(\"err\").textContent = \"Pour la newsletter, indique ton e-mail (ou d\u00e9coche la case).\";\n document.getElementById(\"err\").style.display=\"block\"; return;\n }\n btn.disabled = true; btn.textContent = \"Envoi\u2026\";\n document.getElementById(\"err\").style.display=\"none\";\n\n try{\n const r = await fetch(ENDPOINT_SUBMIT,{\n method:\"POST\", headers:{\"Content-Type\":\"application\/json\"},\n body:JSON.stringify({pseudo,email,newsletter,cepage,pays,region,prix,aromes})\n });\n if(!r.ok) throw new Error(r.status);\n const data = await r.json();\n showResult(data);\n }catch(e){\n btn.disabled=false; btn.textContent=\"Valider ma r\u00e9ponse\";\n document.getElementById(\"err\").textContent=\"Oups \u2014 envoi impossible. R\u00e9essaie.\";\n document.getElementById(\"err\").style.display=\"block\";\n }\n});\n\nfunction showResult(d){\n const det = d.detail || {};\n document.getElementById(\"form\").style.display=\"none\";\n document.getElementById(\"result\").style.display=\"block\";\n const score = d.score ?? 0;\n document.getElementById(\"pts\").textContent = score;\n document.getElementById(\"rmsg\").textContent =\n score>=35 ? \"Palais de ma\u00eetre. Le cadeau te tend les bras.\" :\n score>=22 ? \"Belle d\u00e9gustation, \u00e7a sent l'amateur \u00e9clair\u00e9.\" :\n score>=10 ? \"Pas mal \u2014 le terroir te parle un peu.\" :\n \"Le verre garde ses secrets. C'est \u00e7a, le myst\u00e8re.\";\n const labels={cepage:\"C\u00e9page\",pays:\"Pays\",region:\"R\u00e9gion\",prix:\"Prix\",aromes:\"Ar\u00f4mes\"};\n document.getElementById(\"rdetail\").innerHTML = Object.keys(labels)\n .map(k=>`<div><span>${labels[k]}<\/span><b>+${det[k]??0}<\/b><\/div>`).join('');\n}\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Vin Myst\u00e8re \u2014 Eau de Vigne Eau de Vigne \u00b7 Atelier Le Vin Myst\u00e8re Devine ce qu’il y a dans le verre. Le plus juste repart avec le cadeau. Ton pseudo E-mail (facultatif) C\u00e9page dominant Pays R\u00e9gion \/ appellation Prix estim\u00e9 (la bouteille) Ar\u00f4mes per\u00e7us Je veux recevoir la lettre d’Eau de Vigne \u2014 vin, … <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/eaudevigne.com\/wordpress\/3563-2\/\" class=\"more-link\">Continuer la lecture<span class=\"screen-reader-text\"> de « VIN MYSTERE »<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3563","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages\/3563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3563"}],"version-history":[{"count":2,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages\/3563\/revisions"}],"predecessor-version":[{"id":3567,"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/pages\/3563\/revisions\/3567"}],"wp:attachment":[{"href":"https:\/\/eaudevigne.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}