{"id":2,"date":"2026-03-11T11:00:42","date_gmt":"2026-03-11T10:00:42","guid":{"rendered":"https:\/\/agence-webcreation.fr\/2026\/?page_id=2"},"modified":"2026-03-18T16:24:50","modified_gmt":"2026-03-18T15:24:50","slug":"accueil","status":"publish","type":"page","link":"https:\/\/agence-webcreation.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-05930fe e-con-full e-flex e-con e-parent\" data-id=\"05930fe\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-37d5d99 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"37d5d99\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<header class=\"hero\" id=\"top\">\r\n  <div class=\"hero-in\" style=\"position:relative;z-index:2\">\r\n    <div>\r\n      <div class=\"hero-eyebrow\">\r\n        <div class=\"gdot\"><\/div>\r\n        <span class=\"eyebrow-txt\"><strong>Perpignan<\/strong> \u00b7 Pyr\u00e9n\u00e9es-Orientales \u00b7 <strong>France enti\u00e8re<\/strong><\/span>\r\n      <\/div>\r\n\r\n      <h1>\r\n        Votre site, enfin<br>\r\n        <span class=\"grad\">\u00e0 la hauteur<\/span><br>de votre expertise.\r\n        <span class=\"h1-sub\">Webmaster freelance depuis 16 ans \u2014 je cr\u00e9e des sites professionnels qui inspirent confiance et valorisent r\u00e9ellement votre activit\u00e9.<\/span>\r\n      <\/h1>\r\n\r\n      <p class=\"hero-p\">\r\n        Pas une agence, pas un junior \u2014 la m\u00eame personne qui r\u00e9pond, con\u00e7oit, d\u00e9veloppe et assure le suivi.\r\n        Avec un <strong>accompagnement humain de A \u00e0 Z<\/strong>, du premier \u00e9change \u00e0 la mise en ligne.\r\n      <\/p>\r\n\r\n      <div class=\"hero-btns\">\r\n        <a href=\"#contact\" class=\"btn-fill\">Demander mon devis gratuit \u2192<\/a>\r\n        <a href=\"https:\/\/calendly.com\/webcreation66\/30min\" class=\"btn-out\" target=\"_blank\" rel=\"noopener\">R\u00e9server un appel (30 min)<\/a>\r\n      <\/div>\r\n\r\n      <p class=\"hero-note\">\r\n        <strong>3 cr\u00e9neaux disponibles actuellement<\/strong>\r\n      <\/p>\r\n\r\n      <div class=\"hero-proof\">\r\n        <div class=\"avs\">\r\n          <div class=\"av av1\">MD<\/div>\r\n          <div class=\"av av2\">SL<\/div>\r\n          <div class=\"av av3\">PM<\/div>\r\n          <div class=\"av av4\">CR<\/div>\r\n          <div class=\"av av5\">+<\/div>\r\n        <\/div>\r\n        <div class=\"proof-t\">\r\n          <strong>150+ projets livr\u00e9s<\/strong> depuis 2008<br>\r\n          <span class=\"stars\">\u2605\u2605\u2605\u2605\u2605<\/span> <strong>5\/5<\/strong> sur Google \u00b7 R\u00e9ponse sous 24h\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-vis\">\r\n      <div class=\"photo-wrap\">\r\n        <div class=\"photo-glow\"><\/div>\r\n\r\n        <div class=\"photo-card\">\r\n          <img decoding=\"async\" \r\n            src=\"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp\" \r\n            alt=\"\u00c9lodie Gaborit webmaster freelance \u00e0 Perpignan\"\r\n            class=\"hero-photo\"\r\n          \/>\r\n          <div class=\"photo-ov\"><\/div>\r\n          <div class=\"photo-accent\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fc fc1\">\r\n          <div class=\"fc1-top\">\r\n            <div class=\"fc1-ico\">\ud83d\udc65<\/div>\r\n            <div class=\"fc1-l\">Projets livr\u00e9s<\/div>\r\n          <\/div>\r\n          <div class=\"fc1-n\" id=\"c1\">150<span>+<\/span><\/div>\r\n          <div class=\"fc1-bar\"><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"fc fc2\">\r\n          <div class=\"fc2-ico\">\u2b50<\/div>\r\n          <div>\r\n            <strong class=\"fc2-n\">5\/5 Google<\/strong>\r\n            <div class=\"fc2-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n            <div class=\"fc2-s\">Avis v\u00e9rifi\u00e9s<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/header>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-df4960f e-con-full e-flex e-con e-parent\" data-id=\"df4960f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79bd73a elementor-widget elementor-widget-html\" data-id=\"79bd73a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 3 \u2014 TICKER (bandeau d\u00e9filant technologies)\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n<style>\r\n@media(max-width:768px){\r\n  .ticker-s{padding:16px 0}\r\n  .ticker-lbl{font-size:9px;letter-spacing:2px;margin-bottom:9px}\r\n  .ti{font-size:12px;padding:4px 16px}\r\n  .ti-i{font-size:14px}\r\n}\r\n@media(max-width:480px){\r\n  .ti{font-size:11px;padding:3px 12px}\r\n}\r\n\r\n.ticker-s{\r\n  padding:22px 0;\r\n  background:linear-gradient(90deg,var(--iv2),var(--iv),var(--iv2));\r\n  border-top:1px solid var(--iv3);border-bottom:1px solid var(--iv3);\r\n  overflow:hidden;position:relative;z-index:3;\r\n}\r\n.ticker-lbl{\r\n  text-align:center;font-size:10px;font-weight:600;\r\n  color:var(--or);letter-spacing:2.5px;text-transform:uppercase;\r\n  margin-bottom:12px;font-family:'Outfit',sans-serif;\r\n}\r\n.ticker-w{overflow:hidden;position:relative}\r\n.ticker-w::before,.ticker-w::after{\r\n  content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;\r\n}\r\n.ticker-w::before{left:0;background:linear-gradient(90deg,var(--iv2),transparent)}\r\n.ticker-w::after{right:0;background:linear-gradient(-90deg,var(--iv2),transparent)}\r\n.ticker{display:flex;animation:tick 34s linear infinite;white-space:nowrap}\r\n.ticker:hover{animation-play-state:paused}\r\n.ti{\r\n  display:inline-flex;align-items:center;gap:7px;\r\n  padding:5px 26px;font-size:13px;font-weight:500;\r\n  color:var(--p2);opacity:.55;transition:.2s;cursor:default;\r\n}\r\n.ti:hover{opacity:1;color:var(--p1)}\r\n.ti-i{font-size:16px}\r\n.ti-sep{color:var(--or);opacity:.3;padding:0 2px;font-size:10px}\r\n@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}\r\n<\/style>\r\n\r\n<div class=\"ticker-s\" aria-hidden=\"true\">\r\n  <div class=\"ticker-lbl\">Technologies &amp; expertises<\/div>\r\n  <div class=\"ticker-w\">\r\n    <div class=\"ticker\">\r\n      <span class=\"ti\"><span class=\"ti-i\">\u26a1<\/span>WordPress<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\uded2<\/span>PrestaShop<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udfe2<\/span>Shopify<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udd0d<\/span>SEO Local<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udccd<\/span>Google Business<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udcf8<\/span>Photographie<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\ude81<\/span>Drone<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83c\udfa8<\/span>Design<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83c\udf93<\/span>Formation<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udee1\ufe0f<\/span>Maintenance<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\u270d\ufe0f<\/span>Blog SEO<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udcca<\/span>Audit<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <!-- Doublon obligatoire pour le d\u00e9filement infini -->\r\n      <span class=\"ti\"><span class=\"ti-i\">\u26a1<\/span>WordPress<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\uded2<\/span>PrestaShop<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udfe2<\/span>Shopify<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udd0d<\/span>SEO Local<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udccd<\/span>Google Business<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udcf8<\/span>Photographie<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\ude81<\/span>Drone<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83c\udfa8<\/span>Design<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83c\udf93<\/span>Formation<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udee1\ufe0f<\/span>Maintenance<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\u270d\ufe0f<\/span>Blog SEO<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n      <span class=\"ti\"><span class=\"ti-i\">\ud83d\udcca<\/span>Audit<\/span><span class=\"ti-sep\">\u25c6<\/span>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-22eb2e4 e-con-full e-flex e-con e-parent\" data-id=\"22eb2e4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6844f36 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6844f36\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 4 \u2014 R\u00c9ASSURANCE (chiffres cl\u00e9s anim\u00e9s)\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n@media(max-width:900px){\r\n  .reass{padding:52px 32px}\r\n  .reass-grid{grid-template-columns:repeat(2,1fr);gap:36px 0}\r\n  .rpil:not(:last-child)::after{display:none}\r\n  .rpil:nth-child(1)::after,\r\n  .rpil:nth-child(3)::after{\r\n    content:'';position:absolute;right:0;top:15%;bottom:15%;width:1px;\r\n    background:linear-gradient(to bottom,transparent,rgba(201,169,110,.3),transparent);\r\n    display:block;\r\n  }\r\n  .rpil{padding:0 16px 28px}\r\n}\r\n@media(max-width:600px){\r\n  .reass{padding:44px 20px}\r\n  .reass-grid{grid-template-columns:repeat(2,1fr);gap:28px 0}\r\n  .rpil-num{font-size:42px}\r\n  .rpil-lbl{font-size:12px}\r\n  .rpil{padding:0 12px 24px}\r\n}\r\n@media(max-width:400px){\r\n  .reass-grid{grid-template-columns:1fr}\r\n  .rpil:nth-child(1)::after,\r\n  .rpil:nth-child(3)::after{display:none}\r\n  .rpil{padding:0 0 24px}\r\n  .rpil-num{font-size:48px}\r\n}\r\n.reass{\r\n  padding:68px 56px;position:relative;z-index:2;overflow:hidden;\r\n  background:linear-gradient(135deg,var(--p1) 0%,var(--p2) 50%,var(--dark2) 100%);\r\n}\r\n.reass::before{\r\n  content:'';position:absolute;inset:0;\r\n  background:\r\n    radial-gradient(ellipse 60% 80% at 15% 50%,rgba(255,255,255,.06) 0%,transparent 55%),\r\n    radial-gradient(ellipse 40% 60% at 85% 30%,rgba(201,169,110,.08) 0%,transparent 50%);\r\n}\r\n.reass::after{\r\n  content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:1px;\r\n  background:linear-gradient(90deg,transparent,rgba(201,169,110,.4),transparent);\r\n}\r\n.reass-grid{\r\n  max-width:1100px;margin:0 auto;\r\n  display:grid;grid-template-columns:repeat(4,1fr);\r\n  position:relative;\r\n}\r\n.rpil{text-align:center;padding:0 28px;position:relative;color:#fff}\r\n.rpil:not(:last-child)::after{\r\n  content:'';position:absolute;right:0;top:15%;bottom:15%;width:1px;\r\n  background:linear-gradient(to bottom,transparent,rgba(201,169,110,.3),transparent);\r\n}\r\n.rpil-num{\r\n  font-family:'Cormorant Garamond',serif;font-size:56px;font-weight:700;\r\n  line-height:1;margin-bottom:7px;\r\n  background:linear-gradient(135deg,#fff 30%,var(--or2) 100%);\r\n  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\r\n}\r\n.rpil-lbl{font-size:13px;opacity:.72;font-weight:400;line-height:1.5;font-family:'Outfit',sans-serif}\r\n<\/style>\r\n\r\n<section class=\"reass\">\r\n  <div class=\"reass-grid\">\r\n    <div class=\"rpil rev\">\r\n      <div class=\"rpil-num\" data-t=\"150\" data-s=\"+\">0+<\/div>\r\n      <div class=\"rpil-lbl\">Projets r\u00e9alis\u00e9s<br>depuis 2008<\/div>\r\n    <\/div>\r\n    <div class=\"rpil rev d1\">\r\n      <div class=\"rpil-num\" data-t=\"16\" data-s=\" ans\">0 ans<\/div>\r\n      <div class=\"rpil-lbl\">D'exp\u00e9rience<br>en webmastering<\/div>\r\n    <\/div>\r\n    <div class=\"rpil rev d2\">\r\n      <div class=\"rpil-num\" data-t=\"5\" data-s=\"\/5\">0\/5<\/div>\r\n      <div class=\"rpil-lbl\">Sur Google<br>47 avis v\u00e9rifi\u00e9s<\/div>\r\n    <\/div>\r\n    <div class=\"rpil rev d3\">\r\n      <div class=\"rpil-num\" data-t=\"100\" data-s=\"%\">0%<\/div>\r\n      <div class=\"rpil-lbl\">Clients suivis<br>de A \u00e0 Z<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  function countUp(el,t,s,dur=55){\r\n    let n=0;const step=t\/dur;\r\n    const tm=setInterval(()=>{\r\n      n=Math.min(n+step,t);\r\n      el.textContent=Math.floor(n)+s;\r\n      if(n>=t)clearInterval(tm);\r\n    },22);\r\n  }\r\n\r\n  \/\/ Reveal on scroll\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('.reass .rev').forEach(el=>window._revObs.observe(el));\r\n\r\n  \/\/ Compteurs au scroll\r\n  const so=new IntersectionObserver(es=>{\r\n    es.forEach(e=>{\r\n      if(e.isIntersecting&&!e.target.dataset.done){\r\n        e.target.dataset.done='1';\r\n        document.querySelectorAll('.rpil-num').forEach(el=>{\r\n          const t=+el.dataset.t, s=el.dataset.s||'';\r\n          if(t>1) countUp(el,t,s);\r\n        });\r\n      }\r\n    });\r\n  },{threshold:.5});\r\n\r\n  const reass=document.querySelector('.reass');\r\n  if(reass) so.observe(reass);\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3314a79 e-con-full e-flex e-con e-parent\" data-id=\"3314a79\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-218b866 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"218b866\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 5 \u2014 AUDIT BAR (audit SEO gratuit)\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n<style>\r\n@media(max-width:768px){\r\n  .audit-s{padding:44px 20px}\r\n  .audit-box{max-width:100%}\r\n  .audit-bar{flex-direction:column;border-radius:var(--r16)}\r\n  .audit-bar input{\r\n    padding:14px 18px;border-bottom:1px solid var(--br2);\r\n    border-radius:var(--r16) var(--r16) 0 0;\r\n  }\r\n  .audit-btn{\r\n    border-radius:0 0 var(--r16) var(--r16);\r\n    padding:13px 20px;text-align:center;\r\n  }\r\n  .sticky-a{width:calc(100vw - 32px)}\r\n  .sticky-a-in{border-radius:var(--r16)}\r\n  .sticky-a-in input{padding:10px 14px;font-size:12px}\r\n  .sticky-a-in button{\r\n    padding:8px 16px;font-size:11.5px;\r\n    border-radius:0 var(--r16) var(--r16) 0;\r\n  }\r\n}\r\n@media(max-width:480px){\r\n  .audit-s{padding:36px 16px}\r\n  .audit-s h2{font-size:clamp(22px,7vw,32px)}\r\n  .s-sub{font-size:13px}\r\n}\r\n\r\n.audit-s{background:var(--iv2);padding:60px 56px}\r\n.audit-box{max-width:660px;margin:0 auto;text-align:center}\r\n\r\n.eyebrow-s{\r\n  display:inline-flex;align-items:center;gap:7px;\r\n  padding:4px 14px;border-radius:var(--r50);\r\n  background:linear-gradient(135deg,rgba(91,26,139,.07),rgba(201,169,110,.06));\r\n  border:1px solid var(--bro);\r\n  font-size:10.5px;font-weight:600;color:var(--or);\r\n  letter-spacing:2px;text-transform:uppercase;margin-bottom:13px;\r\n  font-family:'Outfit',sans-serif;\r\n}\r\n.audit-s h2{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:clamp(28px,3.5vw,46px);font-weight:700;\r\n  color:var(--dark);line-height:1.14;\r\n}\r\n.audit-s h2 .grad{\r\n  background:linear-gradient(125deg,var(--p1),var(--p3) 60%,var(--or) 100%);\r\n  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\r\n}\r\n.s-sub{margin-top:11px;font-size:15px;color:var(--muted);max-width:560px;line-height:1.75}\r\n\r\n.audit-bar{\r\n  display:flex;border-radius:var(--r50);overflow:hidden;\r\n  border:1.5px solid var(--br2);background:var(--glass3);\r\n  box-shadow:var(--sh2),var(--glow-md);margin:24px 0 10px;\r\n}\r\n.audit-bar input{\r\n  flex:1;padding:14px 22px;background:transparent;\r\n  border:none;outline:none;font-size:14px;\r\n  font-family:'Outfit',sans-serif;color:var(--dark);min-width:0;\r\n}\r\n.audit-bar input::placeholder{color:var(--light)}\r\n.audit-btn{\r\n  padding:12px 28px;flex-shrink:0;\r\n  background:linear-gradient(135deg,var(--p1),var(--p2));\r\n  color:var(--or2);font-size:13.5px;font-weight:600;\r\n  border:none;cursor:pointer;font-family:'Outfit',sans-serif;\r\n  transition:.3s;white-space:nowrap;\r\n  border-radius:0 var(--r50) var(--r50) 0;letter-spacing:.3px;\r\n}\r\n.audit-btn:hover{background:linear-gradient(135deg,var(--p2),var(--p3))}\r\n.audit-note{font-size:11.5px;color:var(--light)}\r\n\r\n\/* Sticky audit \u2014 appara\u00eet apr\u00e8s scroll *\/\r\n.sticky-a{\r\n  position:fixed;top:86px;left:50%;\r\n  transform:translateX(-50%) translateY(-120px);\r\n  z-index:300;width:520px;max-width:calc(100vw - 40px);\r\n  transition:.38s cubic-bezier(.4,0,.2,1);\r\n}\r\n.sticky-a.show{transform:translateX(-50%) translateY(0)}\r\n.sticky-a-in{\r\n  display:flex;border-radius:var(--r50);overflow:hidden;\r\n  border:1.5px solid var(--br2);background:rgba(253,250,246,.97);\r\n  backdrop-filter:blur(22px);box-shadow:var(--sh2),var(--glow-sm);\r\n}\r\n.sticky-a-in input{\r\n  flex:1;padding:10px 18px;background:transparent;\r\n  border:none;outline:none;font-size:13px;\r\n  font-family:'Outfit',sans-serif;color:var(--dark);\r\n}\r\n.sticky-a-in button{\r\n  padding:8px 22px;\r\n  background:linear-gradient(135deg,var(--p1),var(--p2));\r\n  color:var(--or2);font-size:12.5px;font-weight:600;\r\n  border:none;cursor:pointer;\r\n  border-radius:0 var(--r50) var(--r50) 0;\r\n  font-family:'Outfit',sans-serif;transition:.3s;white-space:nowrap;\r\n}\r\n<\/style>\r\n\r\n<!-- Barre sticky (fixed, appara\u00eet au scroll) -->\r\n<div class=\"sticky-a\" id=\"stickyA\">\r\n  <div class=\"sticky-a-in\">\r\n    <input type=\"url\" placeholder=\"\ud83d\udd0d  www.votre-site.fr \u2014 audit gratuit...\">\r\n    <button onclick=\"doAudit(this)\">Analyser \u2192<\/button>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- Section audit principale -->\r\n<section class=\"audit-s\">\r\n  <div class=\"audit-box rev\">\r\n    <div class=\"eyebrow-s\">\u2726 Offre gratuite<\/div>\r\n    <h2>Votre site est-il <span class=\"grad\">vraiment visible<\/span> sur Google ?<\/h2>\r\n    <p class=\"s-sub\">Entrez votre URL et recevez un audit SEO personnalis\u00e9 sous 48h \u2014 gratuit, sans engagement.<\/p>\r\n    <div class=\"audit-bar\">\r\n      <input type=\"url\" id=\"auditIn\" placeholder=\"www.votre-site.fr\">\r\n      <button class=\"audit-btn\" onclick=\"doAudit(this)\">Recevoir mon audit gratuit \u2192<\/button>\r\n    <\/div>\r\n    <div class=\"audit-note\">\u2713 Gratuit \u00b7 \u2713 Sans inscription \u00b7 \u2713 R\u00e9ponse sous 48h<\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  \/\/ Sticky audit appara\u00eet apr\u00e8s 480px de scroll\r\n  const sa = document.getElementById('stickyA');\r\n  if(sa){\r\n    window.addEventListener('scroll', function(){\r\n      sa.classList.toggle('show', window.scrollY > 480);\r\n    }, {passive: true});\r\n  }\r\n\r\n  \/\/ Reveal on scroll\r\n  if(!window._revObs){\r\n    window._revObs = new IntersectionObserver(es => es.forEach(e => {\r\n      if(e.isIntersecting) e.target.classList.add('vis');\r\n    }), {threshold: .1});\r\n  }\r\n  document.querySelectorAll('.audit-s .rev').forEach(el => window._revObs.observe(el));\r\n\r\n  \/\/ Fonction audit (feedback visuel)\r\n  window.doAudit = function(el){\r\n    const inp = document.getElementById('auditIn') || el.previousElementSibling;\r\n    const val = inp ? inp.value.trim() : '';\r\n    if(!val || !val.includes('.')){\r\n      if(inp){\r\n        inp.focus();\r\n        inp.style.outline = '2px solid #EF4444';\r\n        setTimeout(() => inp.style.outline = '', 2000);\r\n      }\r\n      return;\r\n    }\r\n    const orig = el.textContent;\r\n    el.textContent = '\u23f3 Analyse...';\r\n    el.style.opacity = '.75';\r\n    setTimeout(() => {\r\n      el.textContent = '\u2705 Demande envoy\u00e9e !';\r\n      el.style.background = 'linear-gradient(135deg,#065F46,#059669)';\r\n      el.style.opacity = '1';\r\n      setTimeout(() => {\r\n        el.textContent = orig;\r\n        el.style.background = '';\r\n        if(inp) inp.value = '';\r\n      }, 3500);\r\n    }, 1600);\r\n  };\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e29472f e-con-full e-flex e-con e-parent\" data-id=\"e29472f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38ad41a elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"38ad41a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 6 \u2014 PROBL\u00c8MES CLIENTS\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.section{padding:92px 56px;position:relative;z-index:2}\r\n.max{max-width:1200px;margin:0 auto}\r\n\r\n.s-head{text-align:center;margin-bottom:54px}\r\n.s-head .s-sub{margin:11px auto 0}\r\n.s-sub{margin-top:11px;font-size:15px;color:var(--muted);max-width:560px;line-height:1.75}\r\n\r\nh2{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:clamp(28px,3.5vw,46px);font-weight:700;\r\n  color:var(--dark);line-height:1.14;\r\n}\r\nh2 .grad{\r\n  background:linear-gradient(125deg,var(--p1),var(--p3) 60%,var(--or) 100%);\r\n  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\r\n}\r\n\r\n.eyebrow-s{\r\n  display:inline-flex;align-items:center;gap:7px;\r\n  padding:4px 14px;border-radius:var(--r50);\r\n  background:linear-gradient(135deg,rgba(91,26,139,.07),rgba(201,169,110,.06));\r\n  border:1px solid var(--bro);\r\n  font-size:10.5px;font-weight:600;color:var(--or);\r\n  letter-spacing:2px;text-transform:uppercase;margin-bottom:13px;\r\n  font-family:'Outfit',sans-serif;\r\n}\r\n\r\n\/* Grid 2 colonnes *\/\r\n.prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}\r\n\r\n\/* Liste probl\u00e8mes *\/\r\n.prob-list{list-style:none;display:flex;flex-direction:column;gap:12px}\r\n.prob-item{\r\n  display:flex;align-items:flex-start;gap:14px;\r\n  padding:16px 18px;border-radius:var(--r16);\r\n  background:var(--glass2);border:1.5px solid var(--br);\r\n  transition:.3s;\r\n}\r\n.prob-item:hover{\r\n  border-color:var(--br2);\r\n  box-shadow:var(--sh),var(--glow-sm);\r\n  transform:translateX(4px);\r\n}\r\n.prob-ico{font-size:19px;flex-shrink:0;margin-top:1px}\r\n.prob-txt strong{\r\n  display:block;font-size:15.5px;font-weight:600;\r\n  color:var(--dark);margin-bottom:3px;\r\n  font-family:'Cormorant Garamond',serif;\r\n}\r\n.prob-txt span{font-size:13px;color:var(--muted);line-height:1.55}\r\n\r\n\/* Encart solution \u2014 sticky *\/\r\n.prob-right{\r\n  padding:36px;border-radius:var(--r24);\r\n  background:linear-gradient(145deg,var(--p6),rgba(201,169,110,.06));\r\n  border:1.5px solid var(--bro);\r\n  box-shadow:var(--sh2),var(--glow-md);\r\n  position:sticky;top:90px;\r\n}\r\n.pr-title{\r\n  font-family:'Cormorant Garamond',serif;font-size:26px;\r\n  font-weight:700;color:var(--dark);margin-bottom:14px;line-height:1.25;\r\n}\r\n.pr-title .grad{\r\n  background:linear-gradient(125deg,var(--p1),var(--or));\r\n  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;\r\n}\r\n.pr-txt{font-size:14.5px;line-height:1.78;color:var(--muted);margin-bottom:20px}\r\n.pr-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px}\r\n.pr-list li{\r\n  display:flex;align-items:center;gap:10px;\r\n  font-size:13.5px;color:var(--dark2);font-weight:500;\r\n}\r\n.pr-check{\r\n  width:20px;height:20px;border-radius:50%;flex-shrink:0;\r\n  background:linear-gradient(135deg,var(--p1),var(--p2));\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:9px;font-weight:700;color:var(--or2);\r\n  box-shadow:var(--glow-sm);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:900px){\r\n  .prob-grid{grid-template-columns:1fr;gap:36px}\r\n  .prob-right{position:static}\r\n}\r\n@media(max-width:768px){\r\n  .section{padding:56px 20px}\r\n  .prob-right{padding:24px}\r\n  .pr-title{font-size:22px}\r\n}\r\n@media(max-width:480px){\r\n  .section{padding:44px 16px}\r\n  .prob-item{padding:13px 14px}\r\n  .prob-ico{font-size:16px}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" id=\"problemes\">\r\n  <div class=\"max\">\r\n    <div class=\"s-head rev\">\r\n      <div class=\"eyebrow-s\">\u2726 Vous vous reconnaissez ?<\/div>\r\n      <h2>Les probl\u00e8mes que <span class=\"grad\">je r\u00e9sous chaque jour<\/span><\/h2>\r\n      <p class=\"s-sub\">Mes clients arrivent souvent avec les m\u00eames frustrations. Je les connais par c\u0153ur \u2014 et j'ai les solutions.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"prob-grid\">\r\n      <!-- Liste des probl\u00e8mes -->\r\n      <ul class=\"prob-list\">\r\n        <li class=\"prob-item rev\">\r\n          <div class=\"prob-ico\">\ud83d\ude24<\/div>\r\n          <div class=\"prob-txt\">\r\n            <strong>Mon site ne me ressemble pas<\/strong>\r\n            <span>Cr\u00e9\u00e9 \u00e0 la va-vite, il ne refl\u00e8te ni votre s\u00e9rieux ni votre expertise. Les clients doutent avant m\u00eame de vous appeler.<\/span>\r\n          <\/div>\r\n        <\/li>\r\n        <li class=\"prob-item rev d1\">\r\n          <div class=\"prob-ico\">\ud83d\udcc9<\/div>\r\n          <div class=\"prob-txt\">\r\n            <strong>Je suis invisible sur Google<\/strong>\r\n            <span>Vous n'apparaissez pas dans les premi\u00e8res recherches locales. Vos concurrents captent vos clients \u00e0 votre place.<\/span>\r\n          <\/div>\r\n        <\/li>\r\n        <li class=\"prob-item rev d2\">\r\n          <div class=\"prob-ico\">\ud83d\udc0c<\/div>\r\n          <div class=\"prob-txt\">\r\n            <strong>Mon site est lent et vieillissant<\/strong>\r\n            <span>Temps de chargement trop long, design dat\u00e9, pas adapt\u00e9 au mobile. Vous perdez des visiteurs avant m\u00eame qu'ils lisent une ligne.<\/span>\r\n          <\/div>\r\n        <\/li>\r\n        <li class=\"prob-item rev d3\">\r\n          <div class=\"prob-ico\">\ud83d\ude30<\/div>\r\n          <div class=\"prob-txt\">\r\n            <strong>Je suis bloqu\u00e9 d\u00e8s que je veux modifier<\/strong>\r\n            <span>Vous d\u00e9pendez enti\u00e8rement d'un prestataire pour changer un texte ou une photo. D\u00e9lais, co\u00fbts, frustration.<\/span>\r\n          <\/div>\r\n        <\/li>\r\n        <li class=\"prob-item rev\">\r\n          <div class=\"prob-ico\">\ud83d\udcb8<\/div>\r\n          <div class=\"prob-txt\">\r\n            <strong>J'ai pay\u00e9 cher pour peu de r\u00e9sultats<\/strong>\r\n            <span>Devis opaque, livraison b\u00e2cl\u00e9e, aucun suivi apr\u00e8s. Vous repartez avec un site qui ne convertit pas.<\/span>\r\n          <\/div>\r\n        <\/li>\r\n        <li class=\"prob-item rev d1\">\r\n          <div class=\"prob-ico\">\ud83e\udd37<\/div>\r\n          <div class=\"prob-txt\">\r\n            <strong>Je ne sais pas par o\u00f9 commencer<\/strong>\r\n            <span>WordPress, Shopify, PrestaShop ? SEO, Google Ads, r\u00e9seaux ? Trop d'options, pas de cap clair. Vous \u00eates perdu.<\/span>\r\n          <\/div>\r\n        <\/li>\r\n      <\/ul>\r\n\r\n      <!-- Encart solution -->\r\n      <div class=\"prob-right rev d2\">\r\n        <div class=\"pr-title\">La solution <span class=\"grad\">\u00c9lodie Gaborit<\/span><\/div>\r\n        <p class=\"pr-txt\">Depuis 16 ans, j'accompagne des ind\u00e9pendants et PME qui veulent un site qui travaille vraiment pour eux \u2014 sans jargon, sans mauvaise surprise, avec un vrai suivi humain.<\/p>\r\n        <ul class=\"pr-list\">\r\n          <li><div class=\"pr-check\">\u2713<\/div>Un site \u00e0 votre image, con\u00e7u sur mesure<\/li>\r\n          <li><div class=\"pr-check\">\u2713<\/div>R\u00e9f\u00e9rencement local optimis\u00e9 d\u00e8s la livraison<\/li>\r\n          <li><div class=\"pr-check\">\u2713<\/div>Formation incluse pour votre autonomie<\/li>\r\n          <li><div class=\"pr-check\">\u2713<\/div>Un seul interlocuteur de A \u00e0 Z<\/li>\r\n          <li><div class=\"pr-check\">\u2713<\/div>Tarifs clairs, devis sous 48h<\/li>\r\n          <li><div class=\"pr-check\">\u2713<\/div>Maintenance disponible d\u00e8s 29\u20ac\/mois<\/li>\r\n        <\/ul>\r\n        <a href=\"#contact\" class=\"btn-fill\" style=\"display:inline-flex;width:100%;justify-content:center\">Parlons de votre projet \u2192<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#problemes .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5861236 e-con-full e-flex e-con e-parent\" data-id=\"5861236\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d122b33 elementor-widget elementor-widget-html\" data-id=\"d122b33\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 7 \u2014 SERVICES\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.srv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}\r\n\r\n.scard{\r\n  border-radius:var(--r20);border:1.5px solid var(--br);\r\n  background:var(--glass2);\r\n  transition:.38s cubic-bezier(.4,0,.2,1);\r\n  position:relative;overflow:hidden;\r\n}\r\n.scard::before{\r\n  content:'';position:absolute;top:0;left:0;right:0;height:2px;\r\n  background:linear-gradient(90deg,transparent,var(--or),transparent);\r\n  opacity:0;transition:.3s;\r\n}\r\n.scard:hover{transform:translateY(-7px);box-shadow:var(--sh2),var(--glow-md);border-color:var(--bro)}\r\n.scard:hover::before{opacity:1}\r\n\r\n.scard-top{padding:26px 24px 16px}\r\n.scard-ico{\r\n  width:48px;height:48px;border-radius:var(--r12);margin-bottom:15px;\r\n  background:linear-gradient(135deg,rgba(91,26,139,.08),rgba(91,26,139,.14));\r\n  border:1px solid var(--br);\r\n  display:flex;align-items:center;justify-content:center;font-size:22px;\r\n  transition:.3s;box-shadow:var(--glow-sm);\r\n}\r\n.scard:hover .scard-ico{\r\n  background:linear-gradient(135deg,var(--p1),var(--p2));\r\n  border-color:transparent;box-shadow:var(--glow-md);\r\n}\r\n.scard-name{\r\n  font-family:'Cormorant Garamond',serif;font-size:20px;\r\n  font-weight:700;color:var(--dark);margin-bottom:5px;\r\n}\r\n.scard-prob{\r\n  font-size:12px;color:var(--or);font-weight:500;\r\n  margin-bottom:9px;font-style:italic;letter-spacing:.2px;\r\n}\r\n.scard-desc{font-size:13px;color:var(--muted);line-height:1.68;margin-bottom:14px}\r\n\r\n.scard-tags{display:flex;flex-wrap:wrap;gap:5px;padding:0 24px 12px}\r\n.stag{\r\n  padding:3px 11px;border-radius:var(--r50);\r\n  background:var(--p6);border:1px solid var(--br);\r\n  font-size:11px;font-weight:500;color:var(--p2);\r\n}\r\n.scard-link{\r\n  display:flex;align-items:center;gap:5px;\r\n  padding:12px 24px 20px;\r\n  font-size:12.5px;font-weight:600;color:var(--p2);\r\n  text-decoration:none;transition:.2s;\r\n  font-family:'Outfit',sans-serif;letter-spacing:.3px;\r\n}\r\n.scard-link:hover{gap:10px;color:var(--p1)}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:1024px){\r\n  .srv-grid{grid-template-columns:repeat(2,1fr)}\r\n}\r\n@media(max-width:600px){\r\n  .srv-grid{grid-template-columns:1fr}\r\n}\r\n@media(max-width:768px){\r\n  .scard-top{padding:20px 18px 12px}\r\n  .scard-tags{padding:0 18px 10px}\r\n  .scard-link{padding:10px 18px 16px}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" id=\"services\" style=\"background:var(--iv)\">\r\n  <div class=\"max\">\r\n    <div class=\"s-head rev\">\r\n      <div class=\"eyebrow-s\">\u2726 Mes services<\/div>\r\n      <h2>Tout ce dont votre <span class=\"grad\">pr\u00e9sence en ligne a besoin<\/span><\/h2>\r\n      <p class=\"s-sub\">De la cr\u00e9ation \u00e0 la maintenance, du SEO \u00e0 la formation \u2014 un seul interlocuteur pour tout g\u00e9rer.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"srv-grid\">\r\n\r\n      <!-- Carte 1 \u2014 WordPress -->\r\n      <div class=\"scard rev\">\r\n        <div class=\"scard-top\">\r\n          <div class=\"scard-ico\">\u26a1<\/div>\r\n          <div class=\"scard-name\">Site WordPress<\/div>\r\n          <div class=\"scard-prob\">\u00ab Mon site ne me ressemble pas \u00bb<\/div>\r\n          <div class=\"scard-desc\">Un site vitrine sur-mesure, rapide, s\u00e9curis\u00e9 et facile \u00e0 g\u00e9rer vous-m\u00eame. Design premium, responsive, optimis\u00e9 SEO d\u00e8s la livraison.<\/div>\r\n        <\/div>\r\n        <div class=\"scard-tags\">\r\n          <span class=\"stag\">Vitrine<\/span>\r\n          <span class=\"stag\">Blog<\/span>\r\n          <span class=\"stag\">Portfolio<\/span>\r\n          <span class=\"stag\">D\u00e8s 660\u20ac<\/span>\r\n        <\/div>\r\n        <a href=\"\/creation-site-internet\/wordpress\/\" class=\"scard-link\">D\u00e9couvrir \u2192<\/a>\r\n      <\/div>\r\n\r\n      <!-- Carte 2 \u2014 E-commerce PrestaShop -->\r\n      <div class=\"scard rev d1\">\r\n        <div class=\"scard-top\">\r\n          <div class=\"scard-ico\">\ud83d\uded2<\/div>\r\n          <div class=\"scard-name\">E-commerce PrestaShop<\/div>\r\n          <div class=\"scard-prob\">\u00ab Je veux vendre en ligne s\u00e9rieusement \u00bb<\/div>\r\n          <div class=\"scard-desc\">Boutique en ligne compl\u00e8te, paiement s\u00e9curis\u00e9, gestion des stocks, modules sur-mesure. La solution robuste pour les PME ambitieuses.<\/div>\r\n        <\/div>\r\n        <div class=\"scard-tags\">\r\n          <span class=\"stag\">Boutique<\/span>\r\n          <span class=\"stag\">Paiement<\/span>\r\n          <span class=\"stag\">Stocks<\/span>\r\n          <span class=\"stag\">D\u00e8s 1 590\u20ac<\/span>\r\n        <\/div>\r\n        <a href=\"\/creation-site-internet\/prestashop\/\" class=\"scard-link\">D\u00e9couvrir \u2192<\/a>\r\n      <\/div>\r\n\r\n      <!-- Carte 3 \u2014 Shopify -->\r\n      <div class=\"scard rev d2\">\r\n        <div class=\"scard-top\">\r\n          <div class=\"scard-ico\">\ud83d\udfe2<\/div>\r\n          <div class=\"scard-name\">Boutique Shopify<\/div>\r\n          <div class=\"scard-prob\">\u00ab Je veux lancer vite et bien \u00bb<\/div>\r\n          <div class=\"scard-desc\">La solution cl\u00e9 en main pour vendre en ligne rapidement. Simple \u00e0 g\u00e9rer, \u00e9volutive, id\u00e9ale pour les cr\u00e9ateurs et commer\u00e7ants.<\/div>\r\n        <\/div>\r\n        <div class=\"scard-tags\">\r\n          <span class=\"stag\">Cl\u00e9 en main<\/span>\r\n          <span class=\"stag\">Rapide<\/span>\r\n          <span class=\"stag\">\u00c9volutif<\/span>\r\n        <\/div>\r\n        <a href=\"\/creation-site-internet\/shopify\/\" class=\"scard-link\">D\u00e9couvrir \u2192<\/a>\r\n      <\/div>\r\n\r\n      <!-- Carte 4 \u2014 SEO Local -->\r\n      <div class=\"scard rev\">\r\n        <div class=\"scard-top\">\r\n          <div class=\"scard-ico\">\ud83d\udd0d<\/div>\r\n          <div class=\"scard-name\">SEO Local & Google<\/div>\r\n          <div class=\"scard-prob\">\u00ab Je suis invisible sur Google \u00bb<\/div>\r\n          <div class=\"scard-desc\">R\u00e9f\u00e9rencement naturel local, optimisation Google Business Profile, audit SEO gratuit. Apparaissez en premier l\u00e0 o\u00f9 vos clients vous cherchent.<\/div>\r\n        <\/div>\r\n        <div class=\"scard-tags\">\r\n          <span class=\"stag\">SEO<\/span>\r\n          <span class=\"stag\">Google Maps<\/span>\r\n          <span class=\"stag\">GMB<\/span>\r\n          <span class=\"stag\">Audit offert<\/span>\r\n        <\/div>\r\n        <a href=\"\/referencement-seo\/seo-local\/\" class=\"scard-link\">D\u00e9couvrir \u2192<\/a>\r\n      <\/div>\r\n\r\n      <!-- Carte 5 \u2014 Maintenance -->\r\n      <div class=\"scard rev d1\">\r\n        <div class=\"scard-top\">\r\n          <div class=\"scard-ico\">\ud83d\udee1\ufe0f<\/div>\r\n          <div class=\"scard-name\">Maintenance & S\u00e9curit\u00e9<\/div>\r\n          <div class=\"scard-prob\">\u00ab J'ai peur que mon site plante \u00bb<\/div>\r\n          <div class=\"scard-desc\">Mises \u00e0 jour, sauvegardes quotidiennes, surveillance 24h\/24, corrections rapides. Votre site reste en ligne et s\u00e9curis\u00e9, quoi qu'il arrive.<\/div>\r\n        <\/div>\r\n        <div class=\"scard-tags\">\r\n          <span class=\"stag\">Sauvegardes<\/span>\r\n          <span class=\"stag\">S\u00e9curit\u00e9<\/span>\r\n          <span class=\"stag\">D\u00e8s 29\u20ac\/mois<\/span>\r\n        <\/div>\r\n        <a href=\"\/maintenance-site-internet\/\" class=\"scard-link\">D\u00e9couvrir \u2192<\/a>\r\n      <\/div>\r\n\r\n      <!-- Carte 6 \u2014 Formation -->\r\n      <div class=\"scard rev d2\">\r\n        <div class=\"scard-top\">\r\n          <div class=\"scard-ico\">\ud83c\udf93<\/div>\r\n          <div class=\"scard-name\">Formation WordPress<\/div>\r\n          <div class=\"scard-prob\">\u00ab Je veux \u00eatre autonome \u00bb<\/div>\r\n          <div class=\"scard-desc\">Formation en pr\u00e9sentiel \u00e0 Perpignan, 6 participants maximum pour un suivi personnalis\u00e9. G\u00e9rez votre site vous-m\u00eame en toute confiance.<\/div>\r\n        <\/div>\r\n        <div class=\"scard-tags\">\r\n          <span class=\"stag\">Pr\u00e9sentiel<\/span>\r\n          <span class=\"stag\">6 max<\/span>\r\n          <span class=\"stag\">Perpignan<\/span>\r\n          <span class=\"stag\">CPF<\/span>\r\n        <\/div>\r\n        <a href=\"\/formation-wordpress-prestashop\/\" class=\"scard-link\">D\u00e9couvrir \u2192<\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#services .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a7f06c4 e-con-full e-flex e-con e-parent\" data-id=\"a7f06c4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-54bde1a elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"54bde1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 8 \u2014 PROCESSUS (\u00e9tapes de travail)\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.proc-wrap{position:relative;padding-top:24px}\r\n\r\n\/* Ligne dor\u00e9e reliant les \u00e9tapes *\/\r\n.proc-line{\r\n  position:absolute;top:60px;left:10%;right:10%;height:1px;\r\n  background:linear-gradient(90deg,transparent,var(--or) 15%,var(--or) 85%,transparent);\r\n  opacity:.25;z-index:0;\r\n}\r\n\r\n.proc-grid{\r\n  display:grid;grid-template-columns:repeat(5,1fr);\r\n  gap:20px;position:relative;z-index:1;\r\n}\r\n\r\n.pstep{\r\n  display:flex;flex-direction:column;align-items:center;\r\n  text-align:center;padding:0 8px;\r\n}\r\n\r\n\/* Num\u00e9ro circulaire *\/\r\n.pstep-num{\r\n  width:52px;height:52px;border-radius:50%;\r\n  background:linear-gradient(135deg,var(--iv),var(--iv2));\r\n  border:1.5px solid var(--bro);\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:20px;font-weight:700;color:var(--p2);\r\n  margin-bottom:18px;position:relative;\r\n  box-shadow:var(--sh),var(--glow-sm);\r\n  transition:.3s;\r\n}\r\n.pstep:hover .pstep-num{\r\n  background:linear-gradient(135deg,var(--p1),var(--p2));\r\n  color:var(--or2);border-color:transparent;\r\n  box-shadow:var(--sh2),var(--glow-md);\r\n  transform:scale(1.08);\r\n}\r\n\r\n\/* Ic\u00f4ne au-dessus du num\u00e9ro *\/\r\n.pstep-ico{\r\n  position:absolute;top:-14px;right:-10px;\r\n  font-size:18px;\r\n  background:var(--iv);border-radius:50%;\r\n  padding:2px;line-height:1;\r\n}\r\n\r\n.pstep-name{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:17px;font-weight:700;\r\n  color:var(--dark);margin-bottom:8px;line-height:1.2;\r\n}\r\n.pstep-desc{\r\n  font-size:12.5px;color:var(--muted);\r\n  line-height:1.62;\r\n}\r\n\r\n\/* Tag dur\u00e9e *\/\r\n.pstep-tag{\r\n  display:inline-block;margin-top:10px;\r\n  padding:3px 10px;border-radius:var(--r50);\r\n  background:rgba(91,26,139,.06);border:1px solid var(--br2);\r\n  font-size:11px;font-weight:500;color:var(--p2);\r\n}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:1024px){\r\n  .proc-grid{grid-template-columns:repeat(3,1fr);gap:28px}\r\n  .proc-line{display:none}\r\n}\r\n@media(max-width:600px){\r\n  .proc-grid{grid-template-columns:repeat(2,1fr);gap:24px}\r\n}\r\n@media(max-width:400px){\r\n  .proc-grid{grid-template-columns:1fr;gap:20px}\r\n  .pstep{flex-direction:row;text-align:left;gap:16px;align-items:flex-start}\r\n  .pstep-num{flex-shrink:0;margin-bottom:0}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" id=\"processus\" style=\"background:var(--iv2)\">\r\n  <div class=\"max\">\r\n    <div class=\"s-head rev\">\r\n      <div class=\"eyebrow-s\">\u2726 Ma m\u00e9thode<\/div>\r\n      <h2>Un accompagnement <span class=\"grad\">clair, \u00e9tape par \u00e9tape<\/span><\/h2>\r\n      <p class=\"s-sub\">Pas de surprise, pas de jargon. Voici exactement comment on travaille ensemble, du premier contact \u00e0 la mise en ligne.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"proc-wrap rev\">\r\n      <div class=\"proc-line\"><\/div>\r\n      <div class=\"proc-grid\">\r\n\r\n        <!-- \u00c9tape 1 -->\r\n        <div class=\"pstep rev\">\r\n          <div class=\"pstep-num\">\r\n            1\r\n            <span class=\"pstep-ico\">\ud83d\udcde<\/span>\r\n          <\/div>\r\n          <div class=\"pstep-name\">\u00c9change d\u00e9couverte<\/div>\r\n          <div class=\"pstep-desc\">On parle de votre activit\u00e9, vos objectifs, votre budget. Sans engagement, sans jargon.<\/div>\r\n          <span class=\"pstep-tag\">48h chrono<\/span>\r\n        <\/div>\r\n\r\n        <!-- \u00c9tape 2 -->\r\n        <div class=\"pstep rev d1\">\r\n          <div class=\"pstep-num\">\r\n            2\r\n            <span class=\"pstep-ico\">\ud83d\udccb<\/span>\r\n          <\/div>\r\n          <div class=\"pstep-name\">Devis & strat\u00e9gie<\/div>\r\n          <div class=\"pstep-desc\">Je vous propose un devis d\u00e9taill\u00e9 et une strat\u00e9gie adapt\u00e9e \u00e0 votre march\u00e9 et vos concurrents.<\/div>\r\n          <span class=\"pstep-tag\">2\u20133 jours<\/span>\r\n        <\/div>\r\n\r\n        <!-- \u00c9tape 3 -->\r\n        <div class=\"pstep rev d2\">\r\n          <div class=\"pstep-num\">\r\n            3\r\n            <span class=\"pstep-ico\">\ud83c\udfa8<\/span>\r\n          <\/div>\r\n          <div class=\"pstep-name\">Design & maquette<\/div>\r\n          <div class=\"pstep-desc\">Maquette visuelle soumise pour validation avant tout d\u00e9veloppement. Vous avez le dernier mot.<\/div>\r\n          <span class=\"pstep-tag\">1 semaine<\/span>\r\n        <\/div>\r\n\r\n        <!-- \u00c9tape 4 -->\r\n        <div class=\"pstep rev d3\">\r\n          <div class=\"pstep-num\">\r\n            4\r\n            <span class=\"pstep-ico\">\u2699\ufe0f<\/span>\r\n          <\/div>\r\n          <div class=\"pstep-name\">D\u00e9veloppement<\/div>\r\n          <div class=\"pstep-desc\">Int\u00e9gration, SEO technique, optimisation mobile et vitesse. Vous suivez l'avancement en temps r\u00e9el.<\/div>\r\n          <span class=\"pstep-tag\">2\u20134 semaines<\/span>\r\n        <\/div>\r\n\r\n        <!-- \u00c9tape 5 -->\r\n        <div class=\"pstep rev d4\">\r\n          <div class=\"pstep-num\">\r\n            5\r\n            <span class=\"pstep-ico\">\ud83d\ude80<\/span>\r\n          <\/div>\r\n          <div class=\"pstep-name\">Mise en ligne & suivi<\/div>\r\n          <div class=\"pstep-desc\">Lancement, formation \u00e0 la prise en main, et suivi post-livraison. Vous n'\u00eates jamais seul.<\/div>\r\n          <span class=\"pstep-tag\">J+1 suivi<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- CTA bas de section -->\r\n    <div style=\"text-align:center;margin-top:52px\" class=\"rev\">\r\n      <a href=\"#contact\" class=\"btn-fill\">D\u00e9marrer mon projet \u2192<\/a>\r\n      <p style=\"margin-top:14px;font-size:13px;color:var(--muted)\">R\u00e9ponse sous 48h \u00b7 Devis gratuit \u00b7 Sans engagement<\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#processus .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a6469c9 e-con-full e-flex e-con e-parent\" data-id=\"a6469c9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6a12c78 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"6a12c78\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 9 \u2014 R\u00c9ALISATIONS (portfolio)\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\r\n\r\n.rcard{\r\n  border-radius:var(--r20);overflow:hidden;\r\n  border:1.5px solid var(--br);background:var(--glass2);\r\n  transition:.35s;position:relative;\r\n}\r\n.rcard:hover{\r\n  transform:translateY(-5px);\r\n  box-shadow:var(--sh2),var(--glow-md);\r\n  border-color:var(--bro);\r\n}\r\n\r\n\/* Zone image *\/\r\n.rcard-img{\r\n  width:100%;aspect-ratio:1.6;\r\n  background:linear-gradient(135deg,var(--p6),var(--p5) 50%,#C4B5FD);\r\n  display:flex;align-items:center;justify-content:center;\r\n  position:relative;overflow:hidden;\r\n}\r\n.rcard-img img{width:100%;height:100%;object-fit:cover;display:block}\r\n\r\n\/* Overlay hover *\/\r\n.rcard-img::after{\r\n  content:'Voir le projet \u2192';\r\n  position:absolute;inset:0;\r\n  background:rgba(61,7,100,.72);\r\n  display:flex;align-items:center;justify-content:center;\r\n  color:var(--or2);font-size:13.5px;font-weight:600;\r\n  font-family:'Outfit',sans-serif;letter-spacing:.5px;\r\n  opacity:0;transition:.3s;\r\n}\r\n.rcard:hover .rcard-img::after{opacity:1}\r\n\r\n\/* Placeholder (tant qu'il n'y a pas de vraie image) *\/\r\n.rcard-img-ph{opacity:.35;text-align:center;z-index:1}\r\n.rcard-img-ph .i{font-size:34px;display:block}\r\n.rcard-img-ph .l{\r\n  font-size:11px;color:var(--dark2);\r\n  margin-top:4px;font-weight:500;\r\n  font-family:'Outfit',sans-serif;\r\n}\r\n\r\n\/* Badge cat\u00e9gorie *\/\r\n.rcard-cat{\r\n  position:absolute;top:11px;left:11px;z-index:2;\r\n  padding:4px 11px;border-radius:var(--r50);\r\n  background:rgba(253,250,246,.95);\r\n  font-size:10.5px;font-weight:600;color:var(--p1);\r\n  border:1px solid var(--bro);\r\n}\r\n\r\n\/* Corps de carte *\/\r\n.rcard-body{padding:16px 18px}\r\n.rcard-name{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:16px;font-weight:700;\r\n  color:var(--dark);margin-bottom:4px;\r\n}\r\n.rcard-tech{font-size:12px;color:var(--light)}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:900px){\r\n  .real-grid{grid-template-columns:repeat(2,1fr)}\r\n}\r\n@media(max-width:560px){\r\n  .real-grid{grid-template-columns:1fr}\r\n}\r\n@media(max-width:768px){\r\n  .rcard-body{padding:13px 14px}\r\n  .rcard-name{font-size:15px}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" style=\"background:var(--iv2)\" id=\"realisations\">\r\n  <div class=\"max\">\r\n    <div class=\"s-head rev\">\r\n      <div class=\"eyebrow-s\">\ud83d\udcbc R\u00e9alisations<\/div>\r\n      <h2>Quelques projets<br><span class=\"grad\">r\u00e9alis\u00e9s pour mes clients<\/span><\/h2>\r\n      <p class=\"s-sub\">150+ projets livr\u00e9s depuis 16 ans \u00b7 Artisans, commer\u00e7ants, PME, e-commerces<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"real-grid\">\r\n\r\n      <!-- Carte 1 \u2014 Remplacer rcard-img-ph par une vraie image -->\r\n      <div class=\"rcard rev\">\r\n        <div class=\"rcard-img\">\r\n          <div class=\"rcard-img-ph\">\r\n            <span class=\"i\">\ud83c\udfe0<\/span>\r\n            <div class=\"l\">Site vitrine<\/div>\r\n          <\/div>\r\n          <div class=\"rcard-cat\">WordPress<\/div>\r\n        <\/div>\r\n        <div class=\"rcard-body\">\r\n          <div class=\"rcard-name\">Artisan plombier \u00b7 Perpignan<\/div>\r\n          <div class=\"rcard-tech\">WordPress \u00b7 SEO local \u00b7 Photos pro<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Carte 2 -->\r\n      <div class=\"rcard rev d1\">\r\n        <div class=\"rcard-img\" style=\"background:linear-gradient(135deg,var(--p6),var(--p5) 50%,#C4B5FD)\">\r\n          <div class=\"rcard-img-ph\">\r\n            <span class=\"i\">\ud83d\uded2<\/span>\r\n            <div class=\"l\">E-commerce<\/div>\r\n          <\/div>\r\n          <div class=\"rcard-cat\">PrestaShop<\/div>\r\n        <\/div>\r\n        <div class=\"rcard-body\">\r\n          <div class=\"rcard-name\">Boutique mode \u00b7 France<\/div>\r\n          <div class=\"rcard-tech\">PrestaShop \u00b7 Paiement CB \u00b7 Formation<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Carte 3 -->\r\n      <div class=\"rcard rev d2\">\r\n        <div class=\"rcard-img\" style=\"background:linear-gradient(135deg,#FEF3C7,#FDE68A 60%,#F59E0B)\">\r\n          <div class=\"rcard-img-ph\">\r\n            <span class=\"i\">\ud83c\udf7d\ufe0f<\/span>\r\n            <div class=\"l\">Site vitrine<\/div>\r\n          <\/div>\r\n          <div class=\"rcard-cat\">WordPress<\/div>\r\n        <\/div>\r\n        <div class=\"rcard-body\">\r\n          <div class=\"rcard-name\">Restaurant \u00b7 Perpignan<\/div>\r\n          <div class=\"rcard-tech\">WordPress \u00b7 GMB \u00b7 Photos drone<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Carte 4 \u2014 Optionnelle, \u00e0 supprimer si 3 suffisent -->\r\n      <div class=\"rcard rev\">\r\n        <div class=\"rcard-img\" style=\"background:linear-gradient(135deg,#ECFDF5,#A7F3D0 50%,#059669)\">\r\n          <div class=\"rcard-img-ph\">\r\n            <span class=\"i\">\ud83d\udc86<\/span>\r\n            <div class=\"l\">Site vitrine<\/div>\r\n          <\/div>\r\n          <div class=\"rcard-cat\">WordPress<\/div>\r\n        <\/div>\r\n        <div class=\"rcard-body\">\r\n          <div class=\"rcard-name\">Institut beaut\u00e9 \u00b7 Toulouse<\/div>\r\n          <div class=\"rcard-tech\">WordPress \u00b7 SEO local \u00b7 R\u00e9servation<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Carte 5 -->\r\n      <div class=\"rcard rev d1\">\r\n        <div class=\"rcard-img\" style=\"background:linear-gradient(135deg,#FFF7ED,#FED7AA 50%,#EA580C)\">\r\n          <div class=\"rcard-img-ph\">\r\n            <span class=\"i\">\ud83d\udd27<\/span>\r\n            <div class=\"l\">Site sur mesure<\/div>\r\n          <\/div>\r\n          <div class=\"rcard-cat\">Sur mesure<\/div>\r\n        <\/div>\r\n        <div class=\"rcard-body\">\r\n          <div class=\"rcard-name\">Entreprise BTP \u00b7 Bordeaux<\/div>\r\n          <div class=\"rcard-tech\">WordPress \u00b7 Devis en ligne \u00b7 SEO<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Carte 6 -->\r\n      <div class=\"rcard rev d2\">\r\n        <div class=\"rcard-img\" style=\"background:linear-gradient(135deg,#EFF6FF,#BFDBFE 50%,#2563EB)\">\r\n          <div class=\"rcard-img-ph\">\r\n            <span class=\"i\">\ud83d\udecd\ufe0f<\/span>\r\n            <div class=\"l\">E-commerce<\/div>\r\n          <\/div>\r\n          <div class=\"rcard-cat\">Shopify<\/div>\r\n        <\/div>\r\n        <div class=\"rcard-body\">\r\n          <div class=\"rcard-name\">Cr\u00e9atrice bijoux \u00b7 Lyon<\/div>\r\n          <div class=\"rcard-tech\">Shopify \u00b7 Paiement \u00b7 Photos produits<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div style=\"text-align:center;margin-top:40px\" class=\"rev\">\r\n      <a href=\"\/realisations\/\" class=\"btn-out\">Voir toutes les r\u00e9alisations \u2192<\/a>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#realisations .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-87274e8 e-con-full e-flex e-con e-parent\" data-id=\"87274e8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-00020bf elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"00020bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 10 \u2014 T\u00c9MOIGNAGES\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\r\n\r\n.testi{\r\n  background:var(--glass2);border:1.5px solid var(--br);\r\n  border-radius:var(--r20);padding:26px;\r\n  transition:.32s;position:relative;overflow:hidden;\r\n}\r\n\/* Guillemet d\u00e9coratif *\/\r\n.testi::after{\r\n  content:'\u275d';position:absolute;top:8px;right:16px;\r\n  font-size:52px;color:var(--p5);opacity:.8;\r\n  font-family:'Cormorant Garamond',serif;line-height:1;\r\n}\r\n.testi:hover{\r\n  transform:translateY(-4px);\r\n  box-shadow:var(--sh2),var(--glow-md);\r\n  border-color:var(--bro);\r\n}\r\n\r\n.t-stars{color:var(--or);font-size:15px;letter-spacing:2px;margin-bottom:12px}\r\n\r\n.t-txt{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:16px;line-height:1.72;\r\n  color:var(--dark2);margin-bottom:17px;\r\n  font-style:italic;\r\n}\r\n\r\n\/* S\u00e9parateur + auteur *\/\r\n.t-auth{\r\n  display:flex;align-items:center;gap:10px;\r\n  padding-top:14px;border-top:1px solid var(--iv3);\r\n}\r\n.t-av{\r\n  width:40px;height:40px;border-radius:50%;\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-weight:700;font-size:13px;color:var(--or2);\r\n  border:2px solid rgba(255,255,255,.8);\r\n  flex-shrink:0;font-family:'Cormorant Garamond',serif;\r\n}\r\n.t-name{\r\n  font-size:13.5px;font-weight:600;\r\n  color:var(--dark);font-family:'Cormorant Garamond',serif;\r\n}\r\n.t-role{font-size:11.5px;color:var(--light);margin-top:2px}\r\n.t-badge{\r\n  display:inline-block;padding:2px 9px;border-radius:var(--r50);\r\n  background:rgba(91,26,139,.07);font-size:10px;\r\n  font-weight:500;color:var(--p2);margin-top:3px;\r\n  border:1px solid var(--br);\r\n}\r\n\r\n\/* Badge Google en haut \u00e0 gauche *\/\r\n.t-source{\r\n  display:inline-flex;align-items:center;gap:5px;\r\n  margin-bottom:10px;font-size:10.5px;font-weight:600;\r\n  color:var(--light);font-family:'Outfit',sans-serif;\r\n}\r\n.t-source-dot{\r\n  width:14px;height:14px;border-radius:50%;\r\n  background:linear-gradient(135deg,#4285F4,#34A853 50%,#EA4335);\r\n  flex-shrink:0;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:900px){\r\n  .testi-grid{grid-template-columns:repeat(2,1fr)}\r\n}\r\n@media(max-width:560px){\r\n  .testi-grid{grid-template-columns:1fr}\r\n}\r\n@media(max-width:768px){\r\n  .testi{padding:20px}\r\n  .t-txt{font-size:15px}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" id=\"temoignages\" style=\"background:var(--iv)\">\r\n  <div class=\"max\">\r\n    <div class=\"s-head rev\">\r\n      <div class=\"eyebrow-s\">\u2b50 Avis clients<\/div>\r\n      <h2>Ils m'ont fait confiance,<br><span class=\"grad\">voici ce qu'ils en disent<\/span><\/h2>\r\n      <p class=\"s-sub\">47 avis Google v\u00e9rifi\u00e9s \u00b7 Note moyenne 5\/5 \u00b7 Clients de toute la France<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"testi-grid\">\r\n\r\n      <!-- Avis 1 \u2014 Remplacer par vrai avis Google -->\r\n      <div class=\"testi rev\">\r\n        <div class=\"t-source\"><div class=\"t-source-dot\"><\/div>Avis Google v\u00e9rifi\u00e9<\/div>\r\n        <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n        <div class=\"t-txt\">\u00ab \u00c9lodie a transform\u00e9 mon site vitrine en v\u00e9ritable outil commercial. Professionnelle, r\u00e9active, elle explique tout clairement. Mon r\u00e9f\u00e9rencement local a d\u00e9coll\u00e9 en 3 mois. \u00bb<\/div>\r\n        <div class=\"t-auth\">\r\n          <div class=\"t-av\" style=\"background:linear-gradient(135deg,var(--p1),var(--p3))\">MD<\/div>\r\n          <div>\r\n            <div class=\"t-name\">Marc D.<\/div>\r\n            <div class=\"t-role\">Artisan plombier \u00b7 Perpignan<\/div>\r\n            <div class=\"t-badge\">WordPress \u00b7 SEO local<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Avis 2 -->\r\n      <div class=\"testi rev d1\">\r\n        <div class=\"t-source\"><div class=\"t-source-dot\"><\/div>Avis Google v\u00e9rifi\u00e9<\/div>\r\n        <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n        <div class=\"t-txt\">\u00ab Ma boutique PrestaShop tourne parfaitement. \u00c9lodie a tout g\u00e9r\u00e9 : design, paiement, formation. Je g\u00e8re mes produits seule maintenant, exactement ce que je voulais. \u00bb<\/div>\r\n        <div class=\"t-auth\">\r\n          <div class=\"t-av\" style=\"background:linear-gradient(135deg,#9D174D,#EC4899)\">SL<\/div>\r\n          <div>\r\n            <div class=\"t-name\">Sophie L.<\/div>\r\n            <div class=\"t-role\">Cr\u00e9atrice mode \u00b7 France<\/div>\r\n            <div class=\"t-badge\">PrestaShop \u00b7 Formation<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Avis 3 -->\r\n      <div class=\"testi rev d2\">\r\n        <div class=\"t-source\"><div class=\"t-source-dot\"><\/div>Avis Google v\u00e9rifi\u00e9<\/div>\r\n        <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n        <div class=\"t-txt\">\u00ab Devis rapide, d\u00e9lais respect\u00e9s, r\u00e9sultat au-del\u00e0 de mes attentes. Mon restaurant appara\u00eet maintenant en premier sur Google Maps. Le drone pour les photos, c'\u00e9tait une excellente id\u00e9e. \u00bb<\/div>\r\n        <div class=\"t-auth\">\r\n          <div class=\"t-av\" style=\"background:linear-gradient(135deg,#0369A1,#38BDF8)\">PM<\/div>\r\n          <div>\r\n            <div class=\"t-name\">Pierre M.<\/div>\r\n            <div class=\"t-role\">Restaurateur \u00b7 Perpignan<\/div>\r\n            <div class=\"t-badge\">WordPress \u00b7 GMB \u00b7 Drone<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Avis 4 -->\r\n      <div class=\"testi rev\">\r\n        <div class=\"t-source\"><div class=\"t-source-dot\"><\/div>Avis Google v\u00e9rifi\u00e9<\/div>\r\n        <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n        <div class=\"t-txt\">\u00ab J'avais peur de ne pas comprendre comment g\u00e9rer mon site. La formation d'\u00c9lodie m'a rendu totalement autonome. Elle est p\u00e9dagogue, patiente et disponible apr\u00e8s la livraison. \u00bb<\/div>\r\n        <div class=\"t-auth\">\r\n          <div class=\"t-av\" style=\"background:linear-gradient(135deg,#065F46,#34D399)\">CR<\/div>\r\n          <div>\r\n            <div class=\"t-name\">Claire R.<\/div>\r\n            <div class=\"t-role\">Kin\u00e9sith\u00e9rapeute \u00b7 Toulouse<\/div>\r\n            <div class=\"t-badge\">WordPress \u00b7 Formation<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Avis 5 -->\r\n      <div class=\"testi rev d1\">\r\n        <div class=\"t-source\"><div class=\"t-source-dot\"><\/div>Avis Google v\u00e9rifi\u00e9<\/div>\r\n        <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n        <div class=\"t-txt\">\u00ab Un vrai accompagnement de A \u00e0 Z. \u00c9lodie comprend les enjeux d'une TPE, elle ne survend pas, elle conseille juste. Le r\u00e9sultat est sobre, \u00e9l\u00e9gant et efficace. Je recommande sans h\u00e9siter. \u00bb<\/div>\r\n        <div class=\"t-auth\">\r\n          <div class=\"t-av\" style=\"background:linear-gradient(135deg,var(--or),var(--or2));color:var(--dark)\">JB<\/div>\r\n          <div>\r\n            <div class=\"t-name\">Jean-Baptiste F.<\/div>\r\n            <div class=\"t-role\">Consultant RH \u00b7 Bordeaux<\/div>\r\n            <div class=\"t-badge\">WordPress \u00b7 SEO<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Avis 6 -->\r\n      <div class=\"testi rev d2\">\r\n        <div class=\"t-source\"><div class=\"t-source-dot\"><\/div>Avis Google v\u00e9rifi\u00e9<\/div>\r\n        <div class=\"t-stars\">\u2605\u2605\u2605\u2605\u2605<\/div>\r\n        <div class=\"t-txt\">\u00ab Notre boutique Shopify a \u00e9t\u00e9 livr\u00e9e en 3 semaines, cl\u00e9 en main. \u00c9lodie a m\u00eame g\u00e9r\u00e9 l'int\u00e9gration de notre syst\u00e8me de stocks. Un investissement rentabilis\u00e9 d\u00e8s le premier mois. \u00bb<\/div>\r\n        <div class=\"t-auth\">\r\n          <div class=\"t-av\" style=\"background:linear-gradient(135deg,#7C3AED,#A78BFA)\">NV<\/div>\r\n          <div>\r\n            <div class=\"t-name\">Nathalie V.<\/div>\r\n            <div class=\"t-role\">Cr\u00e9atrice bijoux \u00b7 Lyon<\/div>\r\n            <div class=\"t-badge\">Shopify \u00b7 Stocks<\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- Note globale Google -->\r\n    <div style=\"text-align:center;margin-top:44px\" class=\"rev\">\r\n      <div style=\"display:inline-flex;align-items:center;gap:14px;padding:16px 28px;border-radius:var(--r50);background:var(--glass2);border:1.5px solid var(--bro);box-shadow:var(--sh),var(--glow-sm)\">\r\n        <div style=\"font-size:28px\">\u2b50<\/div>\r\n        <div style=\"text-align:left\">\r\n          <div style=\"font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:700;color:var(--dark)\">5\/5 sur Google<\/div>\r\n          <div style=\"font-size:12px;color:var(--muted)\">47 avis v\u00e9rifi\u00e9s \u00b7 agence-webcreation.fr<\/div>\r\n        <\/div>\r\n        <a href=\"https:\/\/g.page\/r\/VOTRE-LIEN-GOOGLE\/review\" target=\"_blank\" rel=\"noopener\" class=\"btn-fill\" style=\"font-size:12.5px;padding:10px 20px\">\r\n          Laisser un avis \u2192\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#temoignages .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-474b75d e-con-full e-flex e-con e-parent\" data-id=\"474b75d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-82c2803 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"82c2803\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 11 \u2014 FAQ\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.faq-wrap{\r\n  max-width:720px;margin:44px auto 0;\r\n  display:flex;flex-direction:column;gap:9px;\r\n}\r\n\r\n.fi{\r\n  background:var(--glass2);border:1.5px solid var(--br);\r\n  border-radius:var(--r16);overflow:hidden;transition:.22s;\r\n}\r\n.fi.open{\r\n  border-color:var(--bro);\r\n  box-shadow:var(--sh),var(--glow-sm);\r\n}\r\n\r\n.fq{\r\n  width:100%;display:flex;align-items:center;\r\n  justify-content:space-between;\r\n  padding:16px 22px;background:transparent;\r\n  border:none;cursor:pointer;text-align:left;\r\n  font-family:'Outfit',sans-serif;font-size:14.5px;\r\n  font-weight:600;color:var(--dark);\r\n  transition:.22s;gap:12px;\r\n}\r\n.fq:hover{color:var(--p1)}\r\n\r\n\/* Ic\u00f4ne +\/\u00d7 *\/\r\n.fi-ico{\r\n  width:24px;height:24px;border-radius:50%;flex-shrink:0;\r\n  background:rgba(91,26,139,.07);\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:14px;font-weight:600;color:var(--p2);\r\n  transition:.35s;border:1px solid var(--br);\r\n}\r\n.fi.open .fi-ico{\r\n  transform:rotate(45deg);\r\n  background:linear-gradient(135deg,var(--p1),var(--p2));\r\n  color:var(--or2);border-color:transparent;\r\n  box-shadow:var(--glow-sm);\r\n}\r\n\r\n\/* R\u00e9ponse accord\u00e9on *\/\r\n.fa{max-height:0;overflow:hidden;transition:max-height .38s ease}\r\n.fi.open .fa{max-height:240px}\r\n.fa-in{\r\n  padding:0 22px 18px;\r\n  font-size:14px;line-height:1.72;color:var(--muted);\r\n}\r\n.fa-in strong{color:var(--dark2);font-weight:600}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:768px){\r\n  .faq-wrap{margin:32px auto 0}\r\n  .fq{padding:14px 16px;font-size:13.5px}\r\n  .fa-in{padding:0 16px 15px;font-size:13px}\r\n}\r\n@media(max-width:480px){\r\n  .fq{font-size:13px;padding:13px 14px}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" id=\"faq\" style=\"background:var(--iv)\">\r\n  <div class=\"max\">\r\n    <div class=\"s-head rev\">\r\n      <div class=\"eyebrow-s\">\u2753 FAQ<\/div>\r\n      <h2>Les questions les plus<br><span class=\"grad\">fr\u00e9quentes<\/span><\/h2>\r\n      <p class=\"s-sub\">Vous ne trouvez pas votre r\u00e9ponse ? \u00c9crivez-moi directement.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"faq-wrap\">\r\n\r\n      <div class=\"fi rev\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Quel budget pr\u00e9voir pour un site professionnel ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Un site vitrine WordPress d\u00e9marre \u00e0 partir de <strong>660\u20ac<\/strong> selon le projet. Un e-commerce PrestaShop ou Shopify commence \u00e0 <strong>1 590\u20ac<\/strong>. Chaque projet est unique \u2014 je fournis toujours un devis personnalis\u00e9 gratuit sous 48h, apr\u00e8s un premier \u00e9change.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev d1\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Combien de temps pour cr\u00e9er mon site ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          En g\u00e9n\u00e9ral entre <strong>3 et 6 semaines<\/strong> selon la complexit\u00e9. Je travaille par \u00e9tapes avec des validations claires : structure, design, contenu, mise en ligne. Vous \u00eates impliqu\u00e9 sans \u00eatre submerg\u00e9.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev d2\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Vous travaillez uniquement \u00e0 Perpignan ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Non. Je suis bas\u00e9e \u00e0 Perpignan mais je travaille avec des clients dans <strong>toute la France<\/strong> \u2014 Toulouse, Bordeaux, Lyon, Paris et au-del\u00e0. Tout se passe en visio, avec le m\u00eame suivi qu'en pr\u00e9sentiel. Sans suppl\u00e9ment.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Que se passe-t-il si je veux modifier mon site apr\u00e8s ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Vous recevez une <strong>formation compl\u00e8te<\/strong> \u00e0 la prise en main. Pour les modifications plus importantes, je reste disponible \u2014 dans le cadre d'un pack maintenance ou en intervention ponctuelle. Vous n'\u00eates jamais bloqu\u00e9.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev d1\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Proposez-vous de la maintenance apr\u00e8s la livraison ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Oui. Je propose des packs maintenance mensuels <strong>d\u00e8s 29\u20ac\/mois<\/strong> incluant mises \u00e0 jour, sauvegardes, surveillance s\u00e9curit\u00e9 et corrections mineures. Votre site reste performant et s\u00e9curis\u00e9 dans la dur\u00e9e.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev d2\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Je ne connais rien au web \u2014 est-ce un probl\u00e8me ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Non, c'est la situation de <strong>la plupart de mes clients<\/strong>. Je traduis vos besoins m\u00e9tier en solutions web claires, sans jargon. Je vous explique chaque d\u00e9cision et vous forme \u00e0 la fin pour que vous soyez autonome.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Mon site actuel est mauvais \u2014 peut-on le refondre ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Absolument. La refonte est m\u00eame l'un de mes projets les plus fr\u00e9quents. J'analyse votre site existant, ce qui fonctionne, ce qui freine vos visiteurs, et je propose une nouvelle version qui corrige tout \u00e7a \u2014 en conservant votre r\u00e9f\u00e9rencement acquis.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"fi rev d1\">\r\n        <button class=\"fq\" onclick=\"faq(this)\">\r\n          Le SEO est-il inclus dans la cr\u00e9ation du site ?\r\n          <div class=\"fi-ico\">+<\/div>\r\n        <\/button>\r\n        <div class=\"fa\"><div class=\"fa-in\">\r\n          Oui. Le <strong>SEO technique de base<\/strong> est inclus dans chaque projet : balises, vitesse, mobile, structure des URLs, sitemap. Pour un r\u00e9f\u00e9rencement local approfondi ou une strat\u00e9gie de contenu, je propose un accompagnement SEO d\u00e9di\u00e9 en compl\u00e9ment.\r\n        <\/div><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- CTA bas -->\r\n    <div style=\"text-align:center;margin-top:44px\" class=\"rev\">\r\n      <p style=\"font-size:14px;color:var(--muted);margin-bottom:16px\">Vous avez une autre question ?<\/p>\r\n      <a href=\"#contact\" class=\"btn-fill\">Posez-moi votre question \u2192<\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\n\/\/ Accord\u00e9on FAQ \u2014 une seule ouverte \u00e0 la fois\r\nfunction faq(btn){\r\n  const fi = btn.closest('.fi');\r\n  const isOpen = fi.classList.contains('open');\r\n  document.querySelectorAll('#faq .fi.open').forEach(el => el.classList.remove('open'));\r\n  if(!isOpen) fi.classList.add('open');\r\n}\r\n\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#faq .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a54afd e-con-full e-flex e-con e-parent\" data-id=\"6a54afd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eecf42e elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"eecf42e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\r\n  SECTION 12 \u2014 CTA FINAL + FORMULAIRE\r\n  agence-webcreation.fr\r\n============================================================ -->\r\n\r\n<style>\r\n.cta-box{\r\n  border-radius:var(--r24);overflow:hidden;position:relative;\r\n  background:linear-gradient(135deg,var(--p1) 0%,var(--dark2) 50%,var(--p1) 100%);\r\n  box-shadow:var(--sh3),var(--glow-xl);\r\n}\r\n\/* Halos d\u00e9coratifs *\/\r\n.cta-box::before{\r\n  content:'';position:absolute;inset:0;\r\n  background:\r\n    radial-gradient(ellipse 60% 80% at 20% 50%,rgba(201,169,110,.08) 0%,transparent 55%),\r\n    radial-gradient(ellipse 40% 60% at 85% 30%,rgba(255,255,255,.05) 0%,transparent 50%);\r\n}\r\n\/* Ligne or signature *\/\r\n.cta-box::after{\r\n  content:'';position:absolute;top:0;left:10%;right:10%;height:1px;\r\n  background:linear-gradient(90deg,transparent,rgba(201,169,110,.5),transparent);\r\n}\r\n\r\n.cta-inner{\r\n  display:grid;grid-template-columns:1fr 1fr;\r\n  gap:0;position:relative;\r\n}\r\n\r\n\/* Colonne gauche *\/\r\n.cta-left{padding:60px 52px;color:#fff}\r\n.cta-title{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:clamp(26px,3vw,40px);font-weight:700;\r\n  line-height:1.18;margin-bottom:14px;color:#fff;\r\n}\r\n.cta-title em{font-style:italic;color:var(--or2)}\r\n.cta-sub{\r\n  font-size:15.5px;opacity:.78;line-height:1.72;\r\n  margin-bottom:28px;font-family:'Outfit',sans-serif;\r\n}\r\n.cta-reass{display:flex;flex-direction:column;gap:8px}\r\n.cr{\r\n  display:flex;align-items:center;gap:8px;\r\n  font-size:13px;opacity:.75;font-family:'Outfit',sans-serif;\r\n}\r\n.cr-check{\r\n  width:18px;height:18px;border-radius:50%;flex-shrink:0;\r\n  background:rgba(201,169,110,.2);border:1px solid rgba(201,169,110,.4);\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:9px;color:var(--or2);\r\n}\r\n\r\n\/* Colonne droite \u2014 formulaire *\/\r\n.cta-right{\r\n  padding:48px 52px;\r\n  background:rgba(255,255,255,.06);\r\n  backdrop-filter:blur(16px);\r\n  border-left:1px solid rgba(201,169,110,.15);\r\n}\r\n.form-title{\r\n  font-family:'Cormorant Garamond',serif;\r\n  font-size:22px;font-weight:700;color:#fff;margin-bottom:20px;\r\n}\r\n.fg{margin-bottom:13px}\r\n.fg label{\r\n  display:block;font-size:11.5px;font-weight:600;\r\n  color:rgba(255,255,255,.6);margin-bottom:5px;\r\n  letter-spacing:.8px;text-transform:uppercase;\r\n  font-family:'Outfit',sans-serif;\r\n}\r\n.fg input,.fg select,.fg textarea{\r\n  width:100%;padding:11px 16px;border-radius:var(--r12);\r\n  background:rgba(255,255,255,.1);\r\n  border:1.5px solid rgba(255,255,255,.2);\r\n  color:#fff;font-size:13.5px;\r\n  font-family:'Outfit',sans-serif;outline:none;transition:.25s;\r\n  box-sizing:border-box;\r\n}\r\n.fg input::placeholder,.fg textarea::placeholder{color:rgba(255,255,255,.4)}\r\n.fg input:focus,.fg select:focus,.fg textarea:focus{\r\n  border-color:rgba(201,169,110,.5);\r\n  background:rgba(255,255,255,.15);\r\n}\r\n.fg select option{color:var(--dark);background:#fff}\r\n.fg textarea{resize:none;min-height:78px}\r\n\r\n.form-sub{\r\n  width:100%;padding:13px;border-radius:var(--r50);margin-top:4px;\r\n  background:linear-gradient(135deg,var(--or),var(--or2));\r\n  color:var(--p1);font-size:14px;font-weight:700;\r\n  border:none;cursor:pointer;font-family:'Outfit',sans-serif;\r\n  transition:.3s;box-shadow:0 4px 16px rgba(201,169,110,.4);\r\n  letter-spacing:.3px;\r\n}\r\n.form-sub:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(201,169,110,.55)}\r\n.form-note{\r\n  font-size:11px;color:rgba(255,255,255,.45);\r\n  text-align:center;margin-top:9px;\r\n  font-family:'Outfit',sans-serif;\r\n}\r\n\r\n\/* Responsive *\/\r\n@media(max-width:900px){\r\n  .cta-inner{grid-template-columns:1fr}\r\n  .cta-left{padding:44px 32px 32px}\r\n  .cta-right{padding:32px;border-left:none;border-top:1px solid rgba(201,169,110,.15)}\r\n}\r\n@media(max-width:480px){\r\n  .cta-left{padding:32px 20px 24px}\r\n  .cta-right{padding:24px 20px}\r\n  .cta-title{font-size:clamp(22px,7vw,32px)}\r\n}\r\n<\/style>\r\n\r\n<section class=\"section\" id=\"contact\" style=\"background:var(--iv2)\">\r\n  <div class=\"max\">\r\n    <div class=\"cta-box rev\">\r\n      <div class=\"cta-inner\">\r\n\r\n        <!-- Gauche \u2014 pitch -->\r\n        <div class=\"cta-left\">\r\n          <h2 class=\"cta-title\">Votre site m\u00e9rite de vous <em>repr\u00e9senter vraiment.<\/em><\/h2>\r\n          <p class=\"cta-sub\">Un premier \u00e9change gratuit pour comprendre votre projet et voir comment je peux vous accompagner. Sans engagement, sans jargon.<\/p>\r\n          <div class=\"cta-reass\">\r\n            <div class=\"cr\"><div class=\"cr-check\">\u2713<\/div>Premier \u00e9change gratuit \u00b7 30 minutes<\/div>\r\n            <div class=\"cr\"><div class=\"cr-check\">\u2713<\/div>Devis personnalis\u00e9 sous 48h<\/div>\r\n            <div class=\"cr\"><div class=\"cr-check\">\u2713<\/div>R\u00e9ponse assur\u00e9e sous 24h<\/div>\r\n            <div class=\"cr\"><div class=\"cr-check\">\u2713<\/div>Un seul interlocuteur de A \u00e0 Z<\/div>\r\n            <div class=\"cr\"><div class=\"cr-check\">\u2713<\/div>Perpignan & France enti\u00e8re \u00b7 Visio sans suppl\u00e9ment<\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Droite \u2014 formulaire -->\r\n        <div class=\"cta-right\">\r\n          <div class=\"form-title\">Envoyez-moi votre demande<\/div>\r\n\r\n          <div class=\"fg\">\r\n            <label>Votre nom<\/label>\r\n            <input type=\"text\" id=\"f-nom\" placeholder=\"Pr\u00e9nom Nom\">\r\n          <\/div>\r\n          <div class=\"fg\">\r\n            <label>Votre email<\/label>\r\n            <input type=\"email\" id=\"f-email\" placeholder=\"email@exemple.fr\">\r\n          <\/div>\r\n          <div class=\"fg\">\r\n            <label>Votre besoin<\/label>\r\n            <select id=\"f-besoin\">\r\n              <option value=\"\">S\u00e9lectionnez...<\/option>\r\n              <option>Cr\u00e9er un site WordPress<\/option>\r\n              <option>Cr\u00e9er un e-commerce PrestaShop<\/option>\r\n              <option>Cr\u00e9er une boutique Shopify<\/option>\r\n              <option>Refonte de site existant<\/option>\r\n              <option>Maintenance & assistance<\/option>\r\n              <option>SEO local & Google Business<\/option>\r\n              <option>Design & communication<\/option>\r\n              <option>Photographie<\/option>\r\n              <option>Formation WordPress \/ PrestaShop<\/option>\r\n              <option>Autre \/ Je ne sais pas encore<\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"fg\">\r\n            <label>Votre message (optionnel)<\/label>\r\n            <textarea id=\"f-msg\" placeholder=\"D\u00e9crivez bri\u00e8vement votre activit\u00e9 et votre projet...\"><\/textarea>\r\n          <\/div>\r\n\r\n          <button class=\"form-sub\" onclick=\"submitForm(this)\">Envoyer ma demande \u2192<\/button>\r\n          <div class=\"form-note\">R\u00e9ponse sous 24h \u00b7 Aucune relance commerciale<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nfunction submitForm(btn){\r\n  const nom   = document.getElementById('f-nom');\r\n  const email = document.getElementById('f-email');\r\n  const besoin= document.getElementById('f-besoin');\r\n\r\n  \/\/ Validation minimale\r\n  if(!nom||!nom.value.trim()){\r\n    nom.style.borderColor='#EF4444';nom.focus();\r\n    setTimeout(()=>nom.style.borderColor='',2500);return;\r\n  }\r\n  if(!email||!\/\\S+@\\S+\\.\\S+\/.test(email.value)){\r\n    email.style.borderColor='#EF4444';email.focus();\r\n    setTimeout(()=>email.style.borderColor='',2500);return;\r\n  }\r\n\r\n  \/\/ Feedback visuel\r\n  const orig = btn.textContent;\r\n  btn.textContent='\u23f3 Envoi en cours...';\r\n  btn.style.opacity='.75';btn.disabled=true;\r\n\r\n  \/\/ \u26a0\ufe0f Remplacer ce setTimeout par votre vrai appel AJAX \/ WPForms \/ CF7\r\n  setTimeout(()=>{\r\n    btn.textContent='\u2705 Message envoy\u00e9 !';\r\n    btn.style.background='linear-gradient(135deg,#065F46,#059669)';\r\n    btn.style.opacity='1';\r\n    setTimeout(()=>{\r\n      btn.textContent=orig;\r\n      btn.style.background='';\r\n      btn.disabled=false;\r\n      if(nom) nom.value='';\r\n      if(email) email.value='';\r\n      if(besoin) besoin.value='';\r\n      const msg=document.getElementById('f-msg');\r\n      if(msg) msg.value='';\r\n    },4000);\r\n  },1800);\r\n}\r\n\r\n(function(){\r\n  if(!window._revObs){\r\n    window._revObs=new IntersectionObserver(es=>es.forEach(e=>{\r\n      if(e.isIntersecting)e.target.classList.add('vis');\r\n    }),{threshold:.1});\r\n  }\r\n  document.querySelectorAll('#contact .rev').forEach(el=>window._revObs.observe(el));\r\n})();\r\n<\/script>\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>Perpignan \u00b7 Pyr\u00e9n\u00e9es-Orientales \u00b7 France enti\u00e8re Votre site, enfin \u00e0 la hauteurde votre expertise. Webmaster freelance depuis 16 ans \u2014 je cr\u00e9e des sites professionnels qui inspirent confiance et valorisent r\u00e9ellement votre activit\u00e9. Pas une agence, pas un junior \u2014 la m\u00eame personne qui r\u00e9pond, con\u00e7oit, d\u00e9veloppe et assure le suivi. Avec un accompagnement humain [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Accueil - Agence Web Creation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/agence-webcreation.fr\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accueil\" \/>\n<meta property=\"og:description\" content=\"Perpignan \u00b7 Pyr\u00e9n\u00e9es-Orientales \u00b7 France enti\u00e8re Votre site, enfin \u00e0 la hauteurde votre expertise. Webmaster freelance depuis 16 ans \u2014 je cr\u00e9e des sites professionnels qui inspirent confiance et valorisent r\u00e9ellement votre activit\u00e9. Pas une agence, pas un junior \u2014 la m\u00eame personne qui r\u00e9pond, con\u00e7oit, d\u00e9veloppe et assure le suivi. Avec un accompagnement humain [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/agence-webcreation.fr\/\" \/>\n<meta property=\"og:site_name\" content=\"Agence Web Creation\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-18T15:24:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/agence-webcreation.fr\/\",\"url\":\"https:\/\/agence-webcreation.fr\/\",\"name\":\"Accueil - Agence Web Creation\",\"isPartOf\":{\"@id\":\"https:\/\/agence-webcreation.fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/agence-webcreation.fr\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/agence-webcreation.fr\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp\",\"datePublished\":\"2026-03-11T10:00:42+00:00\",\"dateModified\":\"2026-03-18T15:24:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/agence-webcreation.fr\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/agence-webcreation.fr\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/agence-webcreation.fr\/#primaryimage\",\"url\":\"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp\",\"contentUrl\":\"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/agence-webcreation.fr\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/agence-webcreation.fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Accueil\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/agence-webcreation.fr\/#website\",\"url\":\"https:\/\/agence-webcreation.fr\/\",\"name\":\"Agence Web Creation\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/agence-webcreation.fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Accueil - Agence Web Creation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/agence-webcreation.fr\/","og_locale":"fr_FR","og_type":"article","og_title":"Accueil","og_description":"Perpignan \u00b7 Pyr\u00e9n\u00e9es-Orientales \u00b7 France enti\u00e8re Votre site, enfin \u00e0 la hauteurde votre expertise. Webmaster freelance depuis 16 ans \u2014 je cr\u00e9e des sites professionnels qui inspirent confiance et valorisent r\u00e9ellement votre activit\u00e9. Pas une agence, pas un junior \u2014 la m\u00eame personne qui r\u00e9pond, con\u00e7oit, d\u00e9veloppe et assure le suivi. Avec un accompagnement humain [&hellip;]","og_url":"https:\/\/agence-webcreation.fr\/","og_site_name":"Agence Web Creation","article_modified_time":"2026-03-18T15:24:50+00:00","og_image":[{"url":"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/agence-webcreation.fr\/","url":"https:\/\/agence-webcreation.fr\/","name":"Accueil - Agence Web Creation","isPartOf":{"@id":"https:\/\/agence-webcreation.fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/agence-webcreation.fr\/#primaryimage"},"image":{"@id":"https:\/\/agence-webcreation.fr\/#primaryimage"},"thumbnailUrl":"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp","datePublished":"2026-03-11T10:00:42+00:00","dateModified":"2026-03-18T15:24:50+00:00","breadcrumb":{"@id":"https:\/\/agence-webcreation.fr\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/agence-webcreation.fr\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/agence-webcreation.fr\/#primaryimage","url":"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp","contentUrl":"https:\/\/agence-webcreation.fr\/wp-content\/uploads\/2026\/03\/elodie-gaborit-webmaster-freelance-perpignan.webp","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/agence-webcreation.fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/agence-webcreation.fr\/"},{"@type":"ListItem","position":2,"name":"Accueil"}]},{"@type":"WebSite","@id":"https:\/\/agence-webcreation.fr\/#website","url":"https:\/\/agence-webcreation.fr\/","name":"Agence Web Creation","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/agence-webcreation.fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"}]}},"_links":{"self":[{"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":187,"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":313,"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/313"}],"wp:attachment":[{"href":"https:\/\/agence-webcreation.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}