{"id":2039,"date":"2025-10-03T07:49:34","date_gmt":"2025-10-03T07:49:34","guid":{"rendered":"https:\/\/cstpro-b2b.com\/?page_id=2039"},"modified":"2026-02-26T15:24:03","modified_gmt":"2026-02-26T14:24:03","slug":"desabonnement-mail","status":"publish","type":"page","link":"https:\/\/cstpro-b2b.com\/en\/desabonnement-mail\/","title":{"rendered":"D\u00e9sabonnement Mail"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2039\" class=\"elementor elementor-2039\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9c45269 e-flex e-con-boxed e-con e-parent\" data-id=\"9c45269\" 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-efabc9d elementor-widget elementor-widget-html\" data-id=\"efabc9d\" 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<div class=\"prefs-wrap\">\r\n  <div class=\"prefs-card\">\r\n    <header class=\"prefs-header\">\r\n      <h1>Pr\u00e9f\u00e9rences de r\u00e9ception<\/h1>\r\n      <p>Choisissez les contenus que vous ne souhaitez plus recevoir. Vous pouvez changer d\u2019avis \u00e0 tout moment.<\/p>\r\n    <\/header>\r\n\r\n    <!-- Message si adresse de r\u00f4le -->\r\n    <div class=\"prefs-role-alert\" id=\"roleAlert\" style=\"display:none;\">\r\n      \u26a0\ufe0f Cette adresse est g\u00e9n\u00e9rique (info@, contact@, \u2026).<br>\r\n      Pour vous d\u00e9sinscrire, merci de nous \u00e9crire directement \u00e0\r\n      <a href=\"mailto:frederic.massard@cstpro-agv.com\">frederic.massard@cstpro-agv.com<\/a>.\r\n    <\/div>\r\n\r\n    <div class=\"prefs-alert\" id=\"prefsAlert\" aria-live=\"polite\" style=\"display:none;\"><\/div>\r\n\r\n    <!-- Formulaire normal -->\r\n    <div id=\"prefsFormWrapper\">\r\n      <form id=\"prefsForm\" novalidate>\r\n        <!-- Email -->\r\n        <div class=\"prefs-field\" id=\"emailField\">\r\n          <label for=\"email\">Votre email<\/label>\r\n          <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"votre@email.com\" required>\r\n          <small>Nous utilisons votre email pour mettre \u00e0 jour vos pr\u00e9f\u00e9rences.<\/small>\r\n        <\/div>\r\n\r\n        <fieldset class=\"prefs-group\">\r\n          <legend>Ne plus recevoir certaines campagnes<\/legend>\r\n\r\n          <!-- S\u00e9lecteur partenaires -->\r\n          <div class=\"prefs-partners\">\r\n            <label for=\"partnerSelect\" class=\"prefs-subtitle\">\r\n              Choisir les partenaires dont vous ne voulez plus recevoir de messages\r\n            <\/label>\r\n            <div class=\"partner-select-wrap\">\r\n              <select id=\"partnerSelect\">\r\n                <option value=\"\">-- Chargement... --<\/option>\r\n              <\/select>\r\n              <button type=\"button\" id=\"addPartner\" class=\"prefs-btn-small\">Exclure de mes pr\u00e9f\u00e9rences<\/button>\r\n            <\/div>\r\n            <ul id=\"partnerList\" class=\"partner-list\"><\/ul>\r\n          <\/div>\r\n\r\n          <div class=\"prefs-divider\" role=\"separator\"><\/div>\r\n\r\n          <!-- D\u00e9sinscription totale en bas -->\r\n          <label class=\"prefs-check total-unsub\">\r\n            <input type=\"checkbox\" name=\"tags[]\" value=\"optout_all\" data-role=\"global-optout\">\r\n            <span class=\"check-ui\"><\/span>\r\n            <span class=\"check-label\">Je ne souhaite plus recevoir aucune communication<\/span>\r\n          <\/label>\r\n        <\/fieldset>\r\n\r\n        <div class=\"prefs-actions\">\r\n          <button type=\"submit\" class=\"prefs-btn\">Enregistrer mes pr\u00e9f\u00e9rences<\/button>\r\n          <button type=\"button\" class=\"prefs-link\" id=\"selectNone\">Tout d\u00e9cocher<\/button>\r\n        <\/div>\r\n\r\n        <p class=\"prefs-legal\">\r\n          En cliquant sur \u00ab Enregistrer \u00bb, vous confirmez votre choix. Vos pr\u00e9f\u00e9rences sont appliqu\u00e9es instantan\u00e9ment.\r\n        <\/p>\r\n      <\/form>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- Conteneur global --- *\/\r\n.prefs-wrap {\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  padding:4rem 1.25rem;\r\n  background:#f9f9fb;\r\n}\r\n\r\n\/* --- Carte --- *\/\r\n.prefs-card {\r\n  width:100%;\r\n  max-width:760px;\r\n  background:#ffffff;\r\n  border:1px solid #e0e3eb;\r\n  border-radius:18px;\r\n  padding:2rem 1.5rem;\r\n  color:#222;\r\n  box-shadow:0 8px 25px rgba(0,0,0,0.08);\r\n}\r\n\r\n\/* --- En-t\u00eate --- *\/\r\n.prefs-header h1 {\r\n  margin:0 0 .25rem;\r\n  font-size:clamp(1.6rem,2.6vw,2.2rem);\r\n  font-weight:600;\r\n  line-height:1.2;\r\n  color:#111;\r\n}\r\n.prefs-header p {\r\n  margin:.25rem 0 1.25rem;\r\n  color:#555;\r\n}\r\n\r\n\/* --- Alertes --- *\/\r\n.prefs-alert {\r\n  margin:0 0 1rem;\r\n  padding:.85rem 1rem;\r\n  border-radius:12px;\r\n  font-size:.95rem;\r\n  border:1px solid transparent;\r\n}\r\n.prefs-alert.success {background:#e9f8ee;border-color:#2b7a43;color:#226633}\r\n.prefs-alert.error {background:#fdecec;border-color:#c92b2b;color:#7a1d1d}\r\n\r\n\/* --- Message role --- *\/\r\n.prefs-role-alert {\r\n  background:#fff8e5;\r\n  border:1px solid #f0c36d;\r\n  padding:1rem;\r\n  border-radius:10px;\r\n  color:#7a4a00;\r\n  margin:1.5rem 0;\r\n  font-size:.95rem;\r\n}\r\n.prefs-role-alert a {color:#56607A;font-weight:600}\r\n\r\n\/* --- Champ email --- *\/\r\n.prefs-field {margin:0 0 1rem}\r\n.prefs-field label {display:block;margin:0 0 .4rem;font-weight:600}\r\n.prefs-field input[type=\"email\"] {\r\n  width:100%;\r\n  padding:.9rem 1rem;\r\n  border-radius:12px;\r\n  border:1px solid #ccc;\r\n  background:#fff;\r\n  color:#111;\r\n}\r\n.prefs-field input[type=\"email\"]:focus {\r\n  border-color:#7287B0;\r\n  box-shadow:0 0 0 3px rgba(114,135,176,.2);\r\n}\r\n.prefs-field small {display:block;margin-top:.35rem;color:#777}\r\n\r\n\/* --- Groupes --- *\/\r\n.prefs-group {border:none;margin:1.25rem 0 0;padding:0}\r\n.prefs-group legend {font-weight:600;margin-bottom:.75rem;font-size:1.05rem;color:#222}\r\n\r\n\/* --- Cases \u00e0 cocher --- *\/\r\n.prefs-check {\r\n  display:flex;\r\n  align-items:flex-start;\r\n  gap:.75rem;\r\n  padding:.75rem 0;\r\n  border-bottom:1px dashed #e5e5e5;\r\n  cursor:pointer;\r\n}\r\n.check-ui {\r\n  width:22px;\r\n  height:22px;\r\n  border-radius:6px;\r\n  border:1px solid #aaa;\r\n  background:#fff;\r\n}\r\n.prefs-check input {display:none}\r\n.prefs-check input:checked + .check-ui {\r\n  border-color:#7287B0;\r\n  box-shadow:inset 0 0 0 6px #7287B0;\r\n}\r\n.check-label {font-weight:500;color:#111}\r\n.total-unsub {margin-top:1rem;opacity:.8}\r\n.total-unsub .check-label {font-weight:400;color:#555}\r\n\r\n\/* --- S\u00e9lecteur partenaires --- *\/\r\n.prefs-subtitle {margin:.8rem 0 .3rem;color:#444;font-size:.95rem;font-weight:600}\r\n.partner-select-wrap {display:flex;gap:.5rem;margin:.5rem 0}\r\n#partnerSelect {\r\n  flex:1;padding:.6rem .8rem;border-radius:8px;border:1px solid #ccc;font-size:.95rem;\r\n}\r\n.prefs-btn-small {\r\n  padding:.6rem 1rem;border:none;border-radius:8px;background:#7287B0;color:#fff;cursor:pointer;font-weight:600;\r\n}\r\n.partner-list {list-style:none;margin:.5rem 0 0;padding:0}\r\n.partner-list li {\r\n  background:#f1f3f7;padding:.5rem .8rem;border-radius:8px;margin-bottom:.4rem;\r\n  display:flex;justify-content:space-between;align-items:center;font-size:.9rem;\r\n}\r\n.partner-list li button {background:none;border:none;color:#c00;cursor:pointer;font-size:.9rem}\r\n\r\n\/* --- Actions --- *\/\r\n.prefs-actions {display:flex;flex-wrap:wrap;gap:.75rem;margin:1.25rem 0 .5rem}\r\n.prefs-btn {\r\n  border:none;border-radius:14px;padding:.85rem 1.15rem;font-weight:600;\r\n  background:linear-gradient(135deg,#7287B0,#56607A);color:#fff;cursor:pointer;\r\n  box-shadow:0 5px 15px rgba(86,96,122,.25);\r\n}\r\n.prefs-link {background:transparent;border:none;padding:.85rem 1rem;color:#555;cursor:pointer;text-decoration:underline}\r\n.prefs-legal {margin:.25rem 0 0;color:#666;font-size:.9rem}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const qs = (s,p=document)=>p.querySelector(s);\r\n  const qsa = (s,p=document)=>Array.from(p.querySelectorAll(s));\r\n\r\n  const params = new URLSearchParams(window.location.search);\r\n  const emailFromUrl = params.get('email') || params.get('e');\r\n  const partnerFromUrl = params.get('partner');\r\n\r\n  const rolePrefixes = ['info','contact','sales','support','admin','office','team','marketing','newsletter','noreply'];\r\n\r\n  if(emailFromUrl){\r\n    const localPart = emailFromUrl.split('@')[0].toLowerCase();\r\n    const isRole = rolePrefixes.includes(localPart);\r\n\r\n    if(isRole){\r\n      qs('#prefsFormWrapper').style.display = \"none\";\r\n      qs('#roleAlert').style.display = \"block\";\r\n    } else {\r\n      qs('#email').value = emailFromUrl.trim();\r\n      qs('#email').setAttribute('readonly','readonly');\r\n      loadTags(emailFromUrl.trim(), partnerFromUrl);\r\n    }\r\n  }\r\n\r\n  async function loadTags(email, partnerFromUrl){\r\n\r\n    const body = new FormData();\r\n    body.append('action','cstpro_get_tags');\r\n    body.append('email',email);\r\n\r\n    try{\r\n      const res = await fetch(`${window.location.origin}\/wp-admin\/admin-ajax.php`,{\r\n        method:'POST',\r\n        body\r\n      });\r\n\r\n      const json = await res.json();\r\n\r\n      if(!json.success || !json.data) return;\r\n\r\n      const allTags = json.data.allTags || [];\r\n      const contactTags = json.data.contactTags || [];\r\n\r\n      const select = qs('#partnerSelect');\r\n      const list = qs('#partnerList');\r\n\r\n      select.innerHTML = '<option value=\"\">-- Choisir un partenaire --<\/option>';\r\n      list.innerHTML = '';\r\n\r\n      \/\/ \ud83d\udd39 Remplissage dropdown\r\n      allTags\r\n        .filter(tag => tag.slug && tag.slug.startsWith('optout_') && tag.slug !== 'optout_all')\r\n        .forEach(tag=>{\r\n          const opt = document.createElement('option');\r\n          opt.value = tag.slug;\r\n          opt.textContent = tag.title;\r\n          select.appendChild(opt);\r\n        });\r\n\r\n      \/\/ \ud83d\udd39 Pr\u00e9-s\u00e9lection via URL\r\n      if(partnerFromUrl){\r\n        const option = [...select.options].find(opt=>opt.value === partnerFromUrl);\r\n        if(option) select.value = partnerFromUrl;\r\n      }\r\n\r\n      \/\/ \ud83d\udd39 Tags d\u00e9j\u00e0 exclus\r\n      contactTags\r\n        .filter(tag => tag.startsWith('optout_'))\r\n        .forEach(tag=>{\r\n          const li = document.createElement('li');\r\n          li.innerHTML = `\r\n            ${tag.replace('optout_','').toUpperCase()}\r\n            <input type=\"hidden\" name=\"tags[]\" value=\"${tag}\">\r\n            <button type=\"button\">&times;<\/button>\r\n          `;\r\n          li.querySelector('button').addEventListener('click',()=>li.remove());\r\n          list.appendChild(li);\r\n        });\r\n\r\n    } catch(e){\r\n      console.error('Erreur chargement tags:', e);\r\n    }\r\n  }\r\n\r\n  \/\/ Gestion optout global\r\n  const globalOpt = qs('input[data-role=\"global-optout\"]');\r\n  if(globalOpt){\r\n    globalOpt.addEventListener('change',()=>{\r\n      if(globalOpt.checked){\r\n        qs('#partnerList').innerHTML = '';\r\n      }\r\n    });\r\n  }\r\n\r\n  \/\/ Bouton tout d\u00e9cocher\r\n  qs('#selectNone').addEventListener('click',()=>{\r\n    qs('#partnerList').innerHTML = '';\r\n    if(globalOpt) globalOpt.checked = false;\r\n  });\r\n\r\n  \/\/ Ajout partenaire\r\n  const select = qs('#partnerSelect');\r\n  const addBtn = qs('#addPartner');\r\n  const list = qs('#partnerList');\r\n\r\n  addBtn.addEventListener('click',()=>{\r\n    const val = select.value;\r\n    const label = select.options[select.selectedIndex]?.text;\r\n    if(!val) return;\r\n\r\n    if(document.querySelector(`#partnerList input[value=\"${val}\"]`)) return;\r\n\r\n    const li = document.createElement('li');\r\n    li.innerHTML = `\r\n      ${label}\r\n      <input type=\"hidden\" name=\"tags[]\" value=\"${val}\">\r\n      <button type=\"button\">&times;<\/button>\r\n    `;\r\n    li.querySelector('button').addEventListener('click',()=>li.remove());\r\n    list.appendChild(li);\r\n    select.value = \"\";\r\n  });\r\n\r\n  \/\/ Submit formulaire\r\n  qs('#prefsForm').addEventListener('submit', async e=>{\r\n    e.preventDefault();\r\n\r\n    const alertBox = qs('#prefsAlert');\r\n    const email = qs('#email').value.trim();\r\n    const selected = [\r\n  ...qsa('#partnerList input').map(cb => cb.value),\r\n  ...(qs('input[data-role=\"global-optout\"]')?.checked ? ['optout_all'] : [])\r\n];\r\n    const body = new FormData();\r\n    body.append('action','cstpro_update_prefs');\r\n    body.append('email',email);\r\n    body.append('selected_tags',JSON.stringify(selected));\r\n\r\n    try{\r\n      const res = await fetch(`${window.location.origin}\/wp-admin\/admin-ajax.php`,{\r\n        method:'POST',\r\n        body\r\n      });\r\n\r\n      const json = await res.json();\r\n\r\n      if(json.success){\r\n        showAlert('Vos pr\u00e9f\u00e9rences ont \u00e9t\u00e9 enregistr\u00e9es. Merci !','success');\r\n      } else {\r\n        throw new Error(json.data?.message || 'Erreur');\r\n      }\r\n\r\n    } catch(err){\r\n      showAlert('Impossible d\u2019enregistrer vos pr\u00e9f\u00e9rences. Merci de r\u00e9essayer.','error');\r\n    }\r\n\r\n    function showAlert(msg,type){\r\n      alertBox.textContent = msg;\r\n      alertBox.className = 'prefs-alert '+(type==='success'?'success':'error');\r\n      alertBox.style.display='block';\r\n      alertBox.scrollIntoView({behavior:'smooth'});\r\n    }\r\n  });\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Pr\u00e9f\u00e9rences de r\u00e9ception Choisissez les contenus que vous ne souhaitez plus recevoir. Vous pouvez changer d\u2019avis \u00e0 tout moment. \u26a0\ufe0f Cette adresse est g\u00e9n\u00e9rique (info@, contact@, \u2026). Pour vous d\u00e9sinscrire, merci de nous \u00e9crire directement \u00e0 frederic.massard@cstpro-agv.com. Votre email Nous utilisons votre email pour mettre \u00e0 jour vos pr\u00e9f\u00e9rences. Ne plus recevoir certaines campagnes Choisir [&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":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2039","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/pages\/2039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/comments?post=2039"}],"version-history":[{"count":55,"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/pages\/2039\/revisions"}],"predecessor-version":[{"id":3930,"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/pages\/2039\/revisions\/3930"}],"wp:attachment":[{"href":"https:\/\/cstpro-b2b.com\/en\/wp-json\/wp\/v2\/media?parent=2039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}