{"product_id":"formation-creation-de-site","title":"FORMATION CRÉATION SITE","description":"\u003c!-- ==============================\nGRS — FORMATION CRÉATION DE SITE\nFormulaire WhatsApp • Durée à définir\n============================== --\u003e\n\u003csection class=\"grs-forma-desc\"\u003e\n\n  \u003cdiv class=\"grs-forma-top\"\u003e\n    \u003ch3 class=\"grs-forma-title\"\u003eFormation : création de site \u003cspan\u003eVitrine ou E-commerce\u003c\/span\u003e\n\u003c\/h3\u003e\n\n    \u003cdiv class=\"grs-forma-badges\" aria-label=\"Infos formation\"\u003e\n      \u003cspan class=\"grs-badge\"\u003e\u003cstrong\u003eOffre 7 JOURS\u003c\/strong\u003e\u003c\/span\u003e\n      \u003cspan class=\"grs-badge grs-badge--soft\"\u003e\u003cstrong\u003eNiveau débutant\u003c\/strong\u003e\u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cp class=\"grs-forma-intro\"\u003e\n    Vous partez de zéro ? Cette formation vous guide pas à pas pour apprendre à \u003cstrong\u003ecréer un site propre\u003c\/strong\u003e, le structurer et le mettre en ligne avec une méthode simple.\n    \u003cbr\u003e\u003cstrong\u003eDemande gratuite\u003c\/strong\u003e • Réponse en \u003cstrong\u003emoins de 24h\u003c\/strong\u003e • Sans engagement\n  \u003c\/p\u003e\n\n  \u003cdiv class=\"grs-forma-choice\" aria-label=\"Choix de la plateforme\"\u003e\n    \u003cdiv class=\"grs-choice\"\u003e\n      \u003cspan class=\"grs-choice__dot\" aria-hidden=\"true\"\u003e\u003c\/span\u003e\n      \u003cspan class=\"grs-choice__text\"\u003e\u003cstrong\u003eVous choisissez :\u003c\/strong\u003e \u003cstrong\u003eWix\u003c\/strong\u003e\u003cspan class=\"grs-choice__sep\"\u003eou\u003c\/span\u003e\u003cstrong\u003eShopify\u003c\/strong\u003e\u003c\/span\u003e\n    \u003c\/div\u003e\n    \u003cdiv class=\"grs-choice grs-choice--mini\"\u003e\n      \u003cspan class=\"grs-choice__dot\" aria-hidden=\"true\"\u003e\u003c\/span\u003e\n      \u003cspan class=\"grs-choice__text\"\u003eLe plan est adapté selon votre objectif : site vitrine ou e-commerce.\u003c\/span\u003e\n    \u003c\/div\u003e\n  \u003c\/div\u003e\n\n  \u003cul class=\"grs-forma-list\" aria-label=\"Ce que vous apprenez\"\u003e\n    \u003cli\u003e\n\u003cspan class=\"grs-arrow\"\u003e\u003c\/span\u003eStructurer un site clair avec des sections qui rassurent\u003c\/li\u003e\n    \u003cli\u003e\n\u003cspan class=\"grs-arrow\"\u003e\u003c\/span\u003eCréer un design propre, même sans être designer\u003c\/li\u003e\n    \u003cli\u003e\n\u003cspan class=\"grs-arrow\"\u003e\u003c\/span\u003eAjouter les pages essentielles : accueil, offres, contact\u003c\/li\u003e\n    \u003cli\u003e\n\u003cspan class=\"grs-arrow\"\u003e\u003c\/span\u003eMettre en ligne et rendre le site mobile-friendly\u003c\/li\u003e\n    \u003cli\u003e\n\u003cspan class=\"grs-arrow\"\u003e\u003c\/span\u003eÉviter les erreurs qui donnent un rendu amateur\u003c\/li\u003e\n    \u003cli\u003e\n\u003cspan class=\"grs-arrow\"\u003e\u003c\/span\u003eMettre en place les bases SEO pour être plus visible\u003c\/li\u003e\n  \u003c\/ul\u003e\n\n  \u003cp class=\"grs-forma-note\"\u003e\n    Idéal si vous voulez \u003cstrong\u003ecomprendre\u003c\/strong\u003e, \u003cstrong\u003efaire vous-même\u003c\/strong\u003e et avancer avec une méthode claire.\n  \u003c\/p\u003e\n\n  \u003cdiv aria-label=\"Sessions à venir\" class=\"grs-forma-sessions\"\u003e\n    \u003cp class=\"grs-forma-sessions__title\"\u003eSessions à venir\u003c\/p\u003e\n    \u003cp class=\"grs-forma-sessions__text\"\u003e\n      Après votre demande, nous vous recontactons pour fixer votre session et organiser le planning selon vos disponibilités.\n    \u003c\/p\u003e\n    \u003cp class=\"grs-forma-sessions__meta\"\u003e\n      \u003cstrong\u003eDurée :\u003c\/strong\u003e à définir\n      \u003cspan class=\"grs-forma-sessions__sep\"\u003e•\u003c\/span\u003e\n      \u003cstrong\u003eFormat :\u003c\/strong\u003e en ligne\n    \u003c\/p\u003e\n  \u003c\/div\u003e\n\n  \u003cform class=\"grs-forma-form\" id=\"grsFormSiteFormation\"\u003e\n    \u003cinput type=\"text\" name=\"nom\" placeholder=\"Votre prénom \/ nom\" required\u003e\n    \u003cinput type=\"tel\" name=\"telephone\" placeholder=\"Votre numéro WhatsApp\" required\u003e\n    \u003cinput type=\"text\" name=\"activite\" placeholder=\"Votre activité ou projet\" required\u003e\n\n    \u003cselect name=\"objectif\" required\u003e\n      \u003coption value=\"\"\u003eQuel type de site voulez-vous apprendre à créer ?\u003c\/option\u003e\n      \u003coption\u003eSite vitrine\u003c\/option\u003e\n      \u003coption\u003eSite e-commerce\u003c\/option\u003e\n      \u003coption\u003eJe ne sais pas encore\u003c\/option\u003e\n    \u003c\/select\u003e\n\n    \u003cselect name=\"plateforme\" required\u003e\n      \u003coption value=\"\"\u003ePlateforme souhaitée\u003c\/option\u003e\n      \u003coption\u003eWix\u003c\/option\u003e\n      \u003coption\u003eShopify\u003c\/option\u003e\n      \u003coption\u003eJe veux être conseillé\u003c\/option\u003e\n    \u003c\/select\u003e\n\n    \u003cselect name=\"niveau\" required\u003e\n      \u003coption value=\"\"\u003eVotre niveau actuel\u003c\/option\u003e\n      \u003coption\u003eJe pars de zéro\u003c\/option\u003e\n      \u003coption\u003eJ’ai déjà essayé mais je suis bloqué\u003c\/option\u003e\n      \u003coption\u003eJ’ai déjà un site mais je veux apprendre à mieux faire\u003c\/option\u003e\n    \u003c\/select\u003e\n\n    \u003cselect name=\"disponibilite\" required\u003e\n      \u003coption value=\"\"\u003eVos disponibilités pour une session\u003c\/option\u003e\n      \u003coption\u003ePlutôt en journée\u003c\/option\u003e\n      \u003coption\u003ePlutôt le soir\u003c\/option\u003e\n      \u003coption\u003ePlutôt le week-end\u003c\/option\u003e\n      \u003coption\u003eJe suis flexible\u003c\/option\u003e\n    \u003c\/select\u003e\n\n    \u003ctextarea name=\"message\" placeholder=\"Expliquez rapidement votre projet, votre objectif ou ce que vous voulez apprendre...\" required\u003e\u003c\/textarea\u003e\n\n    \u003cbutton type=\"submit\" class=\"grs-forma-cta\"\u003e\n      Demander les infos gratuitement\n    \u003c\/button\u003e\n\n    \u003cp class=\"grs-form-note\"\u003e\n      ✔ Réponse rapide • ✔ Sans engagement • ✔ Retour sous 24h\n    \u003c\/p\u003e\n  \u003c\/form\u003e\n\n\u003c\/section\u003e\n\n\u003cstyle\u003e\n:root{\n  --g1:#fff7d6;\n  --g2:#f5d98a;\n  --g3:#d4af37;\n  --g4:#ffefb0;\n  --g5:#b8922e;\n  --txt:#f7f4ee;\n  --muted:rgba(247,244,238,.78);\n  --muted2:rgba(247,244,238,.62);\n  --line:rgba(212,175,55,.18);\n}\n\n.grs-forma-desc,\n.grs-forma-desc *{ box-sizing:border-box; }\n\n.grs-forma-desc{ background:transparent; padding:0; }\n.grs-forma-top{ margin:0 0 12px; }\n\n.grs-forma-title{\n  margin:0 0 10px;\n  font-family:ui-serif, Georgia, \"Times New Roman\", serif;\n  font-size:26px;\n  letter-spacing:.04em;\n  text-transform:uppercase;\n  color:var(--txt);\n}\n\n.grs-forma-title span{\n  background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5));\n  background-size:220% 100%;\n  -webkit-background-clip:text;\n  background-clip:text;\n  color:transparent;\n  animation:goldFlow 4.2s linear infinite;\n}\n\n.grs-forma-badges{\n  display:flex;\n  flex-wrap:wrap;\n  gap:8px;\n  margin:0 0 6px;\n}\n\n.grs-badge{\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  padding:7px 10px;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:11px;\n  letter-spacing:.14em;\n  text-transform:uppercase;\n  color:rgba(10,10,12,.92);\n  border:1px solid rgba(212,175,55,.38);\n  background:\n    linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),\n    linear-gradient(90deg, var(--g5), var(--g3), var(--g2), var(--g4), var(--g3), var(--g5));\n  background-size:220% 100%;\n  animation:goldFlow 6.2s linear infinite;\n  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);\n}\n\n.grs-badge--soft{\n  color:rgba(247,244,238,.86);\n  background:rgba(0,0,0,.18);\n  border-color:rgba(212,175,55,.22);\n  animation:none;\n  clip-path:polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);\n}\n\n.grs-forma-intro{\n  margin:0 0 16px;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:15.6px;\n  line-height:1.85;\n  color:var(--txt);\n}\n\n.grs-forma-choice,\n.grs-forma-sessions{\n  margin:0 0 14px;\n  padding:12px;\n  border:1px solid rgba(255,255,255,.08);\n  background:rgba(0,0,0,.14);\n  clip-path:polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);\n}\n\n.grs-choice{\n  display:flex;\n  gap:10px;\n  align-items:flex-start;\n  margin:0 0 8px;\n}\n\n.grs-choice--mini{ margin:0; }\n\n.grs-choice__dot{\n  width:10px;\n  height:10px;\n  margin-top:6px;\n  border-radius:999px;\n  background:linear-gradient(120deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5));\n  background-size:220% 100%;\n  animation:goldFlow 5.2s linear infinite;\n  box-shadow:0 0 22px rgba(212,175,55,.22);\n  flex-shrink:0;\n}\n\n.grs-choice__text{\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:14px;\n  line-height:1.65;\n  color:rgba(247,244,238,.82);\n}\n\n.grs-choice__sep{ opacity:.8; padding:0 6px; }\n\n.grs-forma-list{\n  list-style:none;\n  padding:0;\n  margin:0 0 16px;\n}\n\n.grs-forma-list li{\n  display:flex;\n  gap:12px;\n  align-items:flex-start;\n  margin:12px 0;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:14.8px;\n  line-height:1.6;\n  color:var(--muted);\n}\n\n.grs-arrow{\n  flex-shrink:0;\n  margin-top:6px;\n  width:14px;\n  height:14px;\n  background:linear-gradient(135deg,var(--g1),var(--g2),var(--g3),var(--g4),var(--g5));\n  background-size:200% 200%;\n  clip-path:polygon(0 0, 100% 50%, 0 100%, 30% 50%);\n  box-shadow:0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(0,0,0,.6);\n  animation:arrowFlow 2.8s ease-in-out infinite;\n}\n\n.grs-forma-note{\n  margin:0 0 14px;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:14px;\n  line-height:1.75;\n  color:var(--muted2);\n}\n\n.grs-forma-sessions{ margin:0 0 16px; }\n\n.grs-forma-sessions__title{\n  margin:0 0 6px;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:12px;\n  font-weight:900;\n  letter-spacing:.18em;\n  text-transform:uppercase;\n  color:rgba(247,244,238,.92);\n}\n\n.grs-forma-sessions__text{\n  margin:0 0 8px;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:13.6px;\n  line-height:1.7;\n  color:rgba(247,244,238,.78);\n}\n\n.grs-forma-sessions__meta{\n  margin:0;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:12.6px;\n  letter-spacing:.06em;\n  color:rgba(247,244,238,.68);\n}\n\n.grs-forma-sessions__sep{ padding:0 8px; opacity:.7; }\n\n.grs-forma-form{\n  display:flex;\n  flex-direction:column;\n  gap:12px;\n  max-width:620px;\n}\n\n.grs-forma-form input,\n.grs-forma-form select,\n.grs-forma-form textarea{\n  width:100%;\n  padding:14px 15px;\n  border:1px solid rgba(212,175,55,.45);\n  background:rgba(255,255,255,.06);\n  color:var(--txt);\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:14px;\n  outline:none;\n}\n\n.grs-forma-form input::placeholder,\n.grs-forma-form textarea::placeholder{ color:rgba(247,244,238,.55); }\n\n.grs-forma-form select option{ color:#000; }\n\n.grs-forma-form textarea{\n  min-height:120px;\n  resize:vertical;\n}\n\n.grs-forma-cta{\n  cursor:pointer;\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  padding:13px 16px;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:12px;\n  font-weight:900;\n  letter-spacing:.12em;\n  text-transform:uppercase;\n  color:#0a0a0c;\n  text-decoration:none;\n  border:1px solid rgba(212,175,55,.42);\n  background:\n    linear-gradient(120deg, rgba(255,255,255,.35), rgba(255,255,255,0) 40%),\n    linear-gradient(90deg, var(--g5), var(--g3), var(--g2), var(--g4), var(--g3), var(--g5));\n  background-size:220% 100%;\n  animation:goldFlow 6.2s linear infinite;\n  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);\n  box-shadow:0 14px 36px rgba(212,175,55,.14);\n}\n\n.grs-form-note{\n  margin-top:0;\n  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\n  font-size:12px;\n  color:rgba(247,244,238,.6);\n}\n\n@keyframes goldFlow{\n  0%{background-position:0% 50%}\n  100%{background-position:100% 50%}\n}\n\n@keyframes arrowFlow{\n  0%{ background-position:0% 50%; transform:translateX(0); opacity:.85; }\n  50%{ background-position:100% 50%; transform:translateX(3px); opacity:1; }\n  100%{ background-position:0% 50%; transform:translateX(0); opacity:.85; }\n}\n\n@media(max-width:768px){\n  .grs-forma-title{ font-size:22px; }\n  .grs-forma-intro{ font-size:14.6px; line-height:1.7; }\n  .grs-forma-list li{ font-size:14px; margin:10px 0; }\n  .grs-forma-sessions__text{ font-size:13.2px; }\n  .grs-forma-cta{ width:100%; }\n}\n\n@media(prefers-reduced-motion:reduce){\n  .grs-forma-title span,\n  .grs-arrow,\n  .grs-forma-cta,\n  .grs-choice__dot,\n  .grs-badge{\n    animation:none !important;\n  }\n}\n\u003c\/style\u003e\n\n\u003cscript\u003e\ndocument.getElementById(\"grsFormSiteFormation\").addEventListener(\"submit\", function(e){\n  e.preventDefault();\n\n  const form = e.target;\n\n  const nom = form.nom.value;\n  const telephone = form.telephone.value;\n  const activite = form.activite.value;\n  const objectif = form.objectif.value;\n  const plateforme = form.plateforme.value;\n  const niveau = form.niveau.value;\n  const disponibilite = form.disponibilite.value;\n  const messageClient = form.message.value;\n\n  const message =\n`Bonjour, je souhaite recevoir des informations pour la formation Création de site.\n\nPrénom \/ Nom : ${nom}\nWhatsApp : ${telephone}\nActivité \/ Projet : ${activite}\n\nType de site : ${objectif}\nPlateforme souhaitée : ${plateforme}\nNiveau actuel : ${niveau}\nDisponibilités : ${disponibilite}\n\nDurée : à définir\n\nMessage :\n${messageClient}\n\nMerci, j’attends votre retour 🙂`;\n\n  const whatsappURL = \"https:\/\/wa.me\/33780155918?text=\" + encodeURIComponent(message);\n  window.open(whatsappURL, \"_blank\");\n});\n\u003c\/script\u003e","brand":"Ma boutique","offers":[{"title":"Site Vitrine (Wix) \/ Matin","offer_id":57133936509315,"sku":null,"price":1500.0,"currency_code":"EUR","in_stock":true},{"title":"Site Vitrine (Wix) \/ Après-Midi","offer_id":57142722822531,"sku":null,"price":1500.0,"currency_code":"EUR","in_stock":true},{"title":"Site Vitrine (Wix) \/ Soir","offer_id":57142722855299,"sku":null,"price":1500.0,"currency_code":"EUR","in_stock":true},{"title":"Site E-Commerce (Shopify) \/ Matin","offer_id":57133936542083,"sku":null,"price":1500.0,"currency_code":"EUR","in_stock":true},{"title":"Site E-Commerce (Shopify) \/ Après-Midi","offer_id":57142722888067,"sku":null,"price":1500.0,"currency_code":"EUR","in_stock":true},{"title":"Site E-Commerce (Shopify) \/ Soir","offer_id":57142722920835,"sku":null,"price":1500.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0980\/1000\/5891\/files\/78e1262f-59e5-4a2f-bfa0-4ab02670aad3.png?v=1767559228","url":"https:\/\/grs-web-design.com\/products\/formation-creation-de-site","provider":"GRS WEB DESIGN","version":"1.0","type":"link"}