{"id":1507,"date":"2026-05-23T17:40:54","date_gmt":"2026-05-23T17:40:54","guid":{"rendered":"https:\/\/agencewebrusek.com\/?page_id=1507"},"modified":"2026-09-29T18:24:27","modified_gmt":"2026-09-29T18:24:27","slug":"creation-site-internet","status":"publish","type":"page","link":"https:\/\/agencewebrusek.com\/en\/creation-site-internet\/","title":{"rendered":"Creation of website"},"content":{"rendered":"\n<!-- =========================================================\nAWR \u2014 PAGE OFFRE \u00ab CR\u00c9ATION DE SITE INTERNET \u00bb \u2014 V2 (fichier complet)\nURL : \/creation-site-internet\/\nHTML + CSS + JS + JSON-LD dans un seul bloc HTML personnalis\u00e9\nForminator ID : 1637\n========================================================= -->\n\n<style>\n\n\/* ==========================================================\n   VARIABLES \/ BASE\n========================================================== *\/\n\n.awr-m-page {\n  --awr-bg:#06163a;\n  --awr-bg-dark:#020a20;\n  --awr-bg-alt:#071940;\n  --awr-bg-light:#081c4b;\n  --awr-blue:#3b82f6;\n  --awr-blue-hover:#4b8df8;\n  --awr-accent:#60a5fa;\n  --awr-pale:#a9c8ff;\n  --awr-text:#ffffff;\n  --awr-muted:rgba(255,255,255,.74);\n  --awr-discreet:rgba(255,255,255,.60);\n  --awr-line:rgba(255,255,255,.10);\n  --awr-border:rgba(96,165,250,.25);\n  --awr-radius:28px;\n\n  position:relative;\n  left:50%;\n  width:100vw !important;\n  max-width:none !important;\n  margin-left:-50vw !important;\n  margin-right:-50vw !important;\n  padding:0 !important;\n  overflow:hidden;\n  background:var(--awr-bg);\n  color:var(--awr-text);\n  font-family:inherit;\n}\n\n.awr-m-page *,\n.awr-m-page *::before,\n.awr-m-page *::after {\n  box-sizing:border-box;\n}\n\n.awr-m-page h1,\n.awr-m-page h2,\n.awr-m-page h3,\n.awr-m-page p,\n.awr-m-page blockquote {\n  margin-top:0;\n}\n\n.awr-m-page a { color:inherit; }\n\n.awr-m-page #devis,\n.awr-m-page #exemples {\n  scroll-margin-top:120px;\n}\n\n\n\/* ==========================================================\n   LAYOUT\n========================================================== *\/\n\n.awr-m-section {\n  position:relative;\n  width:100%;\n  padding:100px 32px;\n  background:var(--awr-bg);\n}\n\n.awr-m-section--alt {\n  background:var(--awr-bg-alt);\n}\n\n.awr-m-grid-bg {\n  background:\n    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),\n    var(--awr-bg-alt);\n  background-size:90px 90px,90px 90px,auto;\n}\n\n.awr-m-inner {\n  position:relative;\n  z-index:2;\n  width:100%;\n  max-width:1320px;\n  margin:0 auto;\n}\n\n\n\/* ==========================================================\n   TYPOGRAPHIE\n========================================================== *\/\n\n.awr-m-h1 {\n  max-width:760px;\n  margin:0 0 28px;\n  color:#fff;\n  font-size:clamp(44px,4.5vw,68px);\n  line-height:1;\n  letter-spacing:-.05em;\n  font-weight:900;\n}\n\n.awr-m-h1 span,\n.awr-m-h1 strong {\n  display:block;\n}\n\n.awr-m-h1 strong {\n  color:var(--awr-accent);\n}\n\n.awr-m-h2 {\n  margin:0 0 24px;\n  color:#fff;\n  font-size:clamp(38px,4vw,60px);\n  line-height:1;\n  letter-spacing:-.045em;\n  font-weight:900;\n}\n\n.awr-m-h2 span,\n.awr-m-h2 strong {\n  display:block;\n}\n\n.awr-m-h2 strong {\n  color:var(--awr-accent);\n}\n\n.awr-m-intro {\n  max-width:760px;\n  margin:0;\n  color:var(--awr-muted);\n  font-size:18px;\n  line-height:1.7;\n}\n\n.awr-m-section-head {\n  margin-bottom:58px;\n}\n\n.awr-m-section-head--wide {\n  max-width:930px;\n}\n\n.awr-m-section-head--center {\n  max-width:900px;\n  margin-left:auto;\n  margin-right:auto;\n  text-align:center;\n}\n\n.awr-m-section-head--center .awr-m-intro {\n  margin-left:auto;\n  margin-right:auto;\n}\n\n\n\/* ==========================================================\n   FADE IN\n========================================================== *\/\n\n.awr-m-reveal {\n  opacity:0;\n  transform:translateY(26px);\n  transition:\n    opacity .7s cubic-bezier(.2,.65,.3,1),\n    transform .7s cubic-bezier(.2,.65,.3,1);\n}\n\n.awr-m-reveal.is-visible {\n  opacity:1;\n  transform:translateY(0);\n}\n\n.awr-m-reveal-delay-1 { transition-delay:.08s; }\n.awr-m-reveal-delay-2 { transition-delay:.16s; }\n.awr-m-reveal-delay-3 { transition-delay:.24s; }\n\n\n\/* ==========================================================\n   ANIMATIONS\n========================================================== *\/\n\n@keyframes awrHeroGlow {\n  0%,100% {\n    opacity:.42;\n    transform:scale(1);\n  }\n  50% {\n    opacity:.72;\n    transform:scale(1.08);\n  }\n}\n\n@keyframes awrPulse {\n  0%,100% {\n    box-shadow:\n      0 0 0 0 rgba(59,130,246,.25),\n      0 12px 30px rgba(59,130,246,.22);\n  }\n  50% {\n    box-shadow:\n      0 0 0 9px rgba(59,130,246,0),\n      0 16px 38px rgba(59,130,246,.30);\n  }\n}\n\n\n\/* ==========================================================\n   BOUTONS\n========================================================== *\/\n\n.awr-m-btn {\n  position:relative;\n  display:inline-flex;\n  min-height:58px;\n  gap:12px;\n  padding:0 30px;\n  align-items:center;\n  justify-content:center;\n  overflow:hidden;\n  border:1px solid rgba(255,255,255,.12);\n  border-radius:999px;\n  background:linear-gradient(135deg,#3b82f6,#2563eb);\n  color:#fff !important;\n  font-size:16px;\n  font-weight:850;\n  text-decoration:none !important;\n  box-shadow:0 12px 30px rgba(59,130,246,.22);\n  transition:\n    transform .2s ease,\n    box-shadow .2s ease,\n    background .2s ease;\n}\n\n.awr-m-btn::before {\n  content:\"\";\n  position:absolute;\n  top:-50%;\n  left:-80%;\n  width:55%;\n  height:200%;\n  background:linear-gradient(\n    90deg,\n    transparent,\n    rgba(255,255,255,.20),\n    transparent\n  );\n  transform:rotate(20deg);\n  transition:left .55s ease;\n}\n\n.awr-m-btn::after {\n  content:\"\u2192\";\n  position:relative;\n  font-size:19px;\n  transition:transform .2s ease;\n}\n\n.awr-m-btn:hover {\n  transform:translateY(-3px);\n  box-shadow:0 18px 42px rgba(59,130,246,.34);\n}\n\n.awr-m-btn:hover::before { left:135%; }\n.awr-m-btn:hover::after { transform:translateX(4px); }\n\n.awr-m-btn--pulse {\n  animation:awrPulse 3s ease-in-out infinite;\n}\n\n.awr-m-center {\n  margin-top:42px;\n  text-align:center;\n}\n\n\n\/* ==========================================================\n   ACCESSIBILIT\u00c9\n========================================================== *\/\n\n.awr-m-page a:focus-visible,\n.awr-m-page summary:focus-visible {\n  outline:3px solid var(--awr-accent);\n  outline-offset:5px;\n  border-radius:8px;\n}\n\n\n\/* ==========================================================\n   01 HERO\n========================================================== *\/\n\n.awr-m-hero {\n  min-height:650px;\n  padding-top:90px;\n  padding-bottom:90px;\n  background:\n    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),\n    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),\n    linear-gradient(135deg,var(--awr-bg-dark),var(--awr-bg-light));\n  background-size:90px 90px,90px 90px,auto;\n}\n\n.awr-m-hero::after {\n  content:\"\";\n  position:absolute;\n  top:4%;\n  right:-8%;\n  width:480px;\n  height:480px;\n  pointer-events:none;\n  border-radius:50%;\n  background:radial-gradient(\n    circle,\n    rgba(59,130,246,.17),\n    transparent 67%\n  );\n  animation:awrHeroGlow 7s ease-in-out infinite;\n}\n\n.awr-m-hero__grid {\n  position:relative;\n  z-index:2;\n  display:grid;\n  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);\n  gap:clamp(50px,6vw,90px);\n  align-items:stretch;\n}\n\n.awr-m-hero__content {\n  min-width:0;\n  padding-top:0;\n  display:flex;\n  flex-direction:column;\n}\n\n.awr-m-badge {\n  display:inline-flex;\n  align-self:flex-start;\n  width:max-content;\n  max-width:100%;\n  margin-bottom:28px;\n  padding:9px 17px;\n  align-items:center;\n  border:1px solid rgba(96,165,250,.25);\n  border-radius:999px;\n  background:rgba(59,130,246,.08);\n  color:var(--awr-pale);\n  font-size:13px;\n  font-weight:800;\n}\n\n.awr-m-hero__lead {\n  max-width:680px;\n  margin-bottom:24px;\n  color:var(--awr-muted);\n  font-size:clamp(17px,1.5vw,20px);\n  line-height:1.65;\n}\n\n.awr-m-phone-link {\n  display:inline-flex;\n  gap:8px;\n  margin-bottom:24px;\n  align-items:center;\n  color:var(--awr-pale) !important;\n  font-size:15px;\n  text-decoration:none !important;\n  transition:color .2s ease,transform .2s ease;\n}\n\n.awr-m-phone-link:hover {\n  color:#fff !important;\n  transform:translateX(3px);\n}\n\n.awr-m-reassurance {\n  max-width:650px;\n  margin:0;\n  padding-top:22px;\n  border-top:1px solid var(--awr-line);\n  color:var(--awr-discreet);\n  font-size:13px;\n  line-height:1.6;\n}\n\n.awr-m-hero__mockup {\n  width:112%;\n  max-width:840px;\n  margin:auto 0 -4px -6%;\n}\n\n.awr-m-hero__mockup img {\n  display:block;\n  width:100%;\n  height:auto;\n  object-fit:contain;\n  filter:drop-shadow(0 28px 45px rgba(0,0,0,.28));\n  transform:translateZ(0);\n}\n\n.awr-m-depart-intro {\n  max-width:820px;\n  margin:-4px 0 42px;\n  color:var(--awr-muted);\n  font-size:clamp(17px,1.5vw,20px);\n  line-height:1.65;\n  text-align:left;\n}\n\n\n\/* ==========================================================\n   FORM\n========================================================== *\/\n\n.awr-m-form-card {\n  width:100%;\n  padding:clamp(28px,3vw,42px);\n  border:1px solid var(--awr-border);\n  border-radius:var(--awr-radius);\n  background:rgba(2,10,32,.76);\n  box-shadow:0 30px 80px rgba(0,0,0,.25);\n  backdrop-filter:blur(12px);\n  transition:\n    transform .25s ease,\n    border-color .25s ease,\n    box-shadow .25s ease;\n}\n\n.awr-m-form-card:hover {\n  transform:translateY(-3px);\n  border-color:rgba(96,165,250,.45);\n  box-shadow:0 34px 90px rgba(0,0,0,.32);\n}\n\n.awr-m-form-card__head {\n  margin-bottom:28px;\n}\n\n.awr-m-eyebrow {\n  display:block;\n  margin-bottom:10px;\n  color:var(--awr-accent);\n  font-size:12px;\n  font-weight:850;\n  letter-spacing:.12em;\n  text-transform:uppercase;\n}\n\n.awr-m-form-card h2 {\n  margin:0 0 12px;\n  color:#fff;\n  font-size:clamp(28px,2.5vw,38px);\n  line-height:1.05;\n  letter-spacing:-.035em;\n  font-weight:900;\n}\n\n.awr-m-form-card__head p {\n  margin:0;\n  color:var(--awr-muted);\n  font-size:15px;\n  line-height:1.65;\n}\n\n\n\/* ==========================================================\n   02 DEUX SITUATIONS\n========================================================== *\/\n\n.awr-m-depart__grid {\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:26px;\n}\n\n.awr-m-card {\n  position:relative;\n  display:flex;\n  min-height:440px;\n  padding:42px;\n  flex-direction:column;\n  overflow:hidden;\n  border:1px solid var(--awr-border);\n  border-radius:var(--awr-radius);\n  background:rgba(2,10,32,.72);\n  box-shadow:0 22px 55px rgba(0,0,0,.10);\n  transition:\n    transform .25s ease,\n    border-color .25s ease,\n    box-shadow .25s ease;\n}\n\n.awr-m-card:hover {\n  transform:translateY(-6px);\n  border-color:rgba(96,165,250,.48);\n  box-shadow:0 24px 60px rgba(0,0,0,.18);\n}\n\n.awr-m-card--featured {\n  border-color:rgba(96,165,250,.46);\n  background:linear-gradient(\n    145deg,\n    rgba(59,130,246,.18),\n    rgba(2,10,32,.82)\n  );\n}\n\n.awr-m-card__number {\n  margin-bottom:44px;\n  color:var(--awr-accent);\n  font-size:14px;\n  font-weight:900;\n}\n\n.awr-m-card h3 {\n  margin:0 0 20px;\n  color:#fff;\n  font-size:clamp(25px,2.4vw,34px);\n  line-height:1.08;\n  letter-spacing:-.03em;\n  font-weight:900;\n}\n\n.awr-m-card p {\n  color:var(--awr-muted);\n  font-size:16px;\n  line-height:1.7;\n}\n\n.awr-m-card__note {\n  margin:10px 0 28px;\n  padding:18px 20px;\n  border-left:2px solid var(--awr-accent);\n  background:rgba(96,165,250,.07);\n  color:var(--awr-muted);\n  font-size:14px;\n  line-height:1.65;\n}\n\n.awr-m-arrow-link {\n  display:inline-flex;\n  gap:9px;\n  margin-top:auto;\n  align-items:center;\n  color:var(--awr-accent) !important;\n  font-weight:850;\n  text-decoration:none !important;\n}\n\n.awr-m-arrow-link span {\n  transition:transform .18s ease;\n}\n\n.awr-m-arrow-link:hover span {\n  transform:translateX(6px);\n}\n\n\n\/* ==========================================================\n   03 CONSTATS\n========================================================== *\/\n\n.awr-m-findings {\n  display:grid;\n  grid-template-columns:repeat(2,minmax(0,1fr));\n  gap:20px;\n  margin-bottom:58px;\n}\n\n.awr-m-finding {\n  display:grid;\n  grid-template-columns:52px 1fr;\n  gap:20px;\n  min-height:200px;\n  padding:30px;\n  border:1px solid rgba(96,165,250,.18);\n  border-radius:22px;\n  background:linear-gradient(\n    145deg,\n    rgba(255,255,255,.045),\n    rgba(255,255,255,.015)\n  );\n  transition:\n    transform .22s ease,\n    border-color .22s ease,\n    background .22s ease,\n    box-shadow .22s ease;\n}\n\n.awr-m-finding:last-child {\n  grid-column:1 \/ -1;\n  max-width:calc(50% - 10px);\n}\n\n.awr-m-finding:hover {\n  transform:translateY(-5px);\n  border-color:rgba(96,165,250,.40);\n  background:linear-gradient(\n    145deg,\n    rgba(59,130,246,.09),\n    rgba(255,255,255,.02)\n  );\n  box-shadow:0 20px 50px rgba(0,0,0,.12);\n}\n\n.awr-m-finding__emoji {\n  display:flex;\n  width:48px;\n  height:48px;\n  align-items:center;\n  justify-content:center;\n  border:1px solid rgba(96,165,250,.18);\n  border-radius:14px;\n  background:rgba(59,130,246,.08);\n  font-size:23px;\n  transition:transform .2s ease,background .2s ease;\n}\n\n.awr-m-finding:hover .awr-m-finding__emoji {\n  transform:translateY(-3px) rotate(-3deg);\n  background:rgba(59,130,246,.15);\n}\n\n.awr-m-finding h3 {\n  margin:3px 0 10px;\n  color:#fff;\n  font-size:21px;\n  line-height:1.2;\n  font-weight:850;\n}\n\n.awr-m-finding p {\n  margin:0;\n  color:var(--awr-muted);\n  font-size:15px;\n  line-height:1.65;\n}\n\n.awr-m-keyquote {\n  max-width:1050px;\n  margin:0;\n  padding:10px 0 10px 30px;\n  border-left:3px solid var(--awr-accent);\n  color:#fff;\n  font-size:clamp(20px,2.1vw,29px);\n  line-height:1.5;\n  font-weight:700;\n}\n\n.awr-m-source {\n  margin:26px 0 0;\n  color:var(--awr-discreet);\n  font-size:12px;\n}\n\n\n\/* ==========================================================\n   04 SITE ID\u00c9AL\n========================================================== *\/\n\n.awr-m-ideal-head {\n  display:grid;\n  grid-template-columns:minmax(0,.9fr) minmax(300px,.65fr);\n  gap:70px;\n  margin-bottom:50px;\n  align-items:end;\n}\n\n.awr-m-ideal-head .awr-m-h2,\n.awr-m-ideal-head .awr-m-intro {\n  margin-bottom:0;\n}\n\n.awr-m-ideal-grid {\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:18px;\n}\n\n.awr-m-ideal-card {\n  position:relative;\n  min-height:285px;\n  padding:28px;\n  overflow:hidden;\n  border:1px solid var(--awr-line);\n  border-radius:22px;\n  background:linear-gradient(\n    145deg,\n    rgba(255,255,255,.045),\n    rgba(255,255,255,.015)\n  );\n  transition:\n    transform .25s ease,\n    border-color .25s ease,\n    background .25s ease;\n}\n\n.awr-m-ideal-card::after {\n  content:\"\";\n  position:absolute;\n  right:-50px;\n  bottom:-60px;\n  width:150px;\n  height:150px;\n  border-radius:50%;\n  background:radial-gradient(\n    circle,\n    rgba(59,130,246,.15),\n    transparent 70%\n  );\n  transition:transform .3s ease;\n}\n\n.awr-m-ideal-card:hover {\n  transform:translateY(-6px);\n  border-color:rgba(96,165,250,.40);\n  background:linear-gradient(\n    145deg,\n    rgba(59,130,246,.10),\n    rgba(255,255,255,.02)\n  );\n}\n\n.awr-m-ideal-card:hover::after {\n  transform:scale(1.35);\n}\n\n.awr-m-ideal-top {\n  display:flex;\n  margin-bottom:30px;\n  align-items:center;\n  justify-content:space-between;\n}\n\n.awr-m-ideal-icon {\n  display:flex;\n  width:50px;\n  height:50px;\n  align-items:center;\n  justify-content:center;\n  border:1px solid rgba(96,165,250,.20);\n  border-radius:15px;\n  background:rgba(59,130,246,.10);\n  font-size:23px;\n}\n\n.awr-m-ideal-number {\n  color:rgba(255,255,255,.18);\n  font-size:30px;\n  line-height:1;\n  font-weight:900;\n}\n\n.awr-m-ideal-card h3 {\n  position:relative;\n  z-index:2;\n  margin:0 0 12px;\n  color:#fff;\n  font-size:21px;\n  line-height:1.18;\n  font-weight:850;\n}\n\n.awr-m-ideal-card p {\n  position:relative;\n  z-index:2;\n  margin:0;\n  color:var(--awr-muted);\n  font-size:14px;\n  line-height:1.62;\n}\n\n\n\/* ==========================================================\n   05 AVANT \/ APR\u00c8S MOBILE\n   Les deux images contiennent d\u00e9j\u00e0 le cadre de l'iPhone.\n   L'image \"apr\u00e8s\" est dans le flux et donne la hauteur ;\n   l'image \"avant\" est pos\u00e9e par-dessus et d\u00e9coup\u00e9e\n   selon la position du curseur.\n   Les deux PNG doivent avoir exactement les m\u00eames dimensions.\n========================================================== *\/\n\n.awr-m-compare-wrap {\n  width:min(100%,340px);\n  margin:0 auto;\n}\n\n.awr-m-phone-mockup {\n  position:relative;\n  width:100%;\n  margin:0 auto;\n  filter:drop-shadow(0 28px 60px rgba(0,0,0,.32));\n}\n\n.awr-m-compare {\n  --pos:50%;\n  position:relative;\n  width:100%;\n  user-select:none;\n  touch-action:pan-y;\n}\n\n.awr-m-compare__after {\n  position:relative;\n  z-index:1;\n  display:block;\n  width:100% !important;\n  max-width:none !important;\n  height:auto !important;\n  margin:0 !important;\n  padding:0 !important;\n  border:0 !important;\n  border-radius:0 !important;\n  outline:0 !important;\n  box-shadow:none !important;\n}\n\n.awr-m-compare__before {\n  position:absolute;\n  z-index:2;\n  inset:0;\n  display:block;\n  width:100% !important;\n  max-width:none !important;\n  height:100% !important;\n  margin:0 !important;\n  padding:0 !important;\n  border:0 !important;\n  border-radius:0 !important;\n  outline:0 !important;\n  box-shadow:none !important;\n  object-fit:contain;\n  clip-path:inset(0 calc(100% - var(--pos)) 0 0);\n}\n\n.awr-m-compare__divider {\n  position:absolute;\n  z-index:5;\n  top:0;\n  bottom:0;\n  left:var(--pos);\n  width:2px;\n  background:#fff;\n  box-shadow:0 0 16px rgba(255,255,255,.35);\n  transform:translateX(-50%);\n  pointer-events:none;\n}\n\n.awr-m-compare__handle {\n  position:absolute;\n  top:50%;\n  left:50%;\n  display:flex;\n  width:42px;\n  height:42px;\n  align-items:center;\n  justify-content:center;\n  border:3px solid #fff;\n  border-radius:50%;\n  background:var(--awr-blue);\n  color:#fff;\n  font-size:17px;\n  font-weight:900;\n  box-shadow:0 10px 24px rgba(0,0,0,.3);\n  transform:translate(-50%,-50%);\n}\n\n.awr-m-compare-stage {\n  display:grid;\n  grid-template-columns:\n    minmax(120px,1fr)\n    minmax(280px,340px)\n    minmax(120px,1fr);\n  align-items:center;\n  gap:28px;\n  width:min(100%,900px);\n  margin:0 auto;\n}\n\n.awr-m-compare-side {\n  display:flex;\n  align-items:center;\n  gap:12px;\n  color:#fff;\n  font-size:18px;\n  font-weight:850;\n  white-space:nowrap;\n}\n\n.awr-m-compare-side--before {\n  justify-content:flex-end;\n}\n\n.awr-m-compare-side--after {\n  justify-content:flex-start;\n}\n\n.awr-m-compare-side__arrow {\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  width:42px;\n  height:42px;\n  border:1px solid rgba(96,165,250,.35);\n  border-radius:50%;\n  background:rgba(59,130,246,.12);\n  color:var(--awr-accent);\n  font-size:22px;\n  line-height:1;\n}\n\n.awr-m-compare__range {\n  position:absolute;\n  z-index:20;\n  inset:0;\n  width:100%;\n  height:100%;\n  margin:0;\n  opacity:0;\n  cursor:ew-resize;\n}\n\n.awr-m-compare__range:focus-visible\n+ .awr-m-compare__divider\n.awr-m-compare__handle {\n  outline:3px solid var(--awr-accent);\n  outline-offset:5px;\n}\n\n.awr-m-compare-help {\n  margin:12px 0 0;\n  color:var(--awr-muted);\n  font-size:13px;\n  line-height:1.5;\n  text-align:center;\n}\n\n\n\/* ==========================================================\n   06 PROCESS\n========================================================== *\/\n\n.awr-m-process {\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:22px;\n}\n\n.awr-m-process-card {\n  position:relative;\n  min-height:355px;\n  padding:30px;\n  overflow:hidden;\n  border:1px solid var(--awr-line);\n  border-radius:24px;\n  background:linear-gradient(\n    145deg,\n    rgba(255,255,255,.05),\n    rgba(2,10,32,.20)\n  );\n  transition:\n    transform .25s ease,\n    border-color .25s ease,\n    box-shadow .25s ease;\n}\n\n.awr-m-process-card:hover {\n  transform:translateY(-7px);\n  border-color:rgba(96,165,250,.40);\n  box-shadow:0 25px 60px rgba(0,0,0,.18);\n}\n\n.awr-m-process-top {\n  display:flex;\n  margin-bottom:48px;\n  align-items:center;\n  justify-content:space-between;\n}\n\n.awr-m-process-icon {\n  display:flex;\n  width:58px;\n  height:58px;\n  align-items:center;\n  justify-content:center;\n  border:1px solid rgba(96,165,250,.25);\n  border-radius:18px;\n  background:linear-gradient(\n    145deg,\n    rgba(59,130,246,.22),\n    rgba(59,130,246,.07)\n  );\n  font-size:25px;\n}\n\n.awr-m-process-number {\n  color:rgba(96,165,250,.23);\n  font-size:58px;\n  line-height:.8;\n  font-weight:950;\n  letter-spacing:-.06em;\n}\n\n.awr-m-process-card h3 {\n  margin:0 0 16px;\n  color:#fff;\n  font-size:26px;\n  line-height:1.12;\n  letter-spacing:-.025em;\n  font-weight:900;\n}\n\n.awr-m-process-card p {\n  margin:0;\n  color:var(--awr-muted);\n  font-size:15px;\n  line-height:1.7;\n}\n\n.awr-m-process-tag {\n  display:inline-flex;\n  margin-top:25px;\n  padding:7px 11px;\n  border:1px solid rgba(96,165,250,.17);\n  border-radius:999px;\n  background:rgba(59,130,246,.07);\n  color:var(--awr-pale);\n  font-size:11px;\n  font-weight:750;\n}\n\n\n\/* ==========================================================\n   07 FAQ\n========================================================== *\/\n\n.awr-m-faq__inner {\n  max-width:1050px;\n}\n\n.awr-m-faq__list {\n  border-top:1px solid var(--awr-line);\n}\n\n.awr-m-faq-item {\n  border-bottom:1px solid var(--awr-line);\n}\n\n.awr-m-faq-item summary {\n  position:relative;\n  padding:27px 54px 27px 0;\n  color:#fff;\n  font-size:clamp(17px,1.8vw,21px);\n  line-height:1.35;\n  font-weight:800;\n  cursor:pointer;\n  list-style:none;\n  transition:color .2s ease,padding-left .2s ease;\n}\n\n.awr-m-faq-item summary:hover {\n  padding-left:8px;\n  color:var(--awr-accent);\n}\n\n.awr-m-faq-item summary::-webkit-details-marker {\n  display:none;\n}\n\n.awr-m-faq-item summary::after {\n  content:\"+\";\n  position:absolute;\n  top:50%;\n  right:4px;\n  color:var(--awr-accent);\n  font-size:27px;\n  transform:translateY(-50%);\n  transition:transform .18s ease;\n}\n\n.awr-m-faq-item[open] summary::after {\n  transform:translateY(-50%) rotate(45deg);\n}\n\n.awr-m-faq-item > div {\n  padding:0 60px 27px 0;\n}\n\n.awr-m-faq-item p {\n  max-width:850px;\n  margin:0;\n  color:var(--awr-muted);\n  font-size:15px;\n  line-height:1.75;\n}\n\n\n\/* ==========================================================\n   08 CTA FINAL\n========================================================== *\/\n\n.awr-m-section--final {\n  padding-top:70px;\n  padding-bottom:110px;\n}\n\n.awr-m-final {\n  position:relative;\n  display:grid;\n  grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);\n  gap:70px;\n  padding:clamp(35px,5vw,64px);\n  align-items:center;\n  overflow:hidden;\n  border:1px solid var(--awr-border);\n  border-radius:var(--awr-radius);\n  background:\n    radial-gradient(\n      circle at 90% 20%,\n      rgba(59,130,246,.20),\n      transparent 32%\n    ),\n    rgba(2,10,32,.46);\n}\n\n.awr-m-final::before {\n  content:\"\";\n  position:absolute;\n  top:-150px;\n  right:-100px;\n  width:350px;\n  height:350px;\n  border-radius:50%;\n  background:radial-gradient(\n    circle,\n    rgba(59,130,246,.13),\n    transparent 65%\n  );\n  animation:awrHeroGlow 6s ease-in-out infinite;\n}\n\n.awr-m-h2--final {\n  position:relative;\n  z-index:2;\n  margin:0;\n  font-size:clamp(35px,4vw,58px);\n}\n\n.awr-m-final__actions {\n  position:relative;\n  z-index:2;\n  display:flex;\n  flex-direction:column;\n  align-items:flex-start;\n  gap:14px;\n}\n\n.awr-m-final__link {\n  color:var(--awr-pale) !important;\n  font-size:13px;\n  text-decoration:none !important;\n  transition:transform .2s ease,color .2s ease;\n}\n\n.awr-m-final__link:hover {\n  color:#fff !important;\n  transform:translateX(4px);\n}\n\n\n\/* ==========================================================\n   RESPONSIVE\n========================================================== *\/\n\n@media(max-width:1000px) {\n\n  .awr-m-section {\n    padding-top:85px;\n    padding-bottom:85px;\n  }\n\n  .awr-m-hero {\n    min-height:0;\n    padding-top:70px;\n    padding-bottom:80px;\n  }\n\n  .awr-m-hero__grid {\n    grid-template-columns:1fr;\n    gap:52px;\n  }\n\n  .awr-m-form-card {\n    max-width:720px;\n  }\n\n  .awr-m-ideal-head {\n    grid-template-columns:1fr;\n    gap:20px;\n  }\n\n  .awr-m-ideal-grid {\n    grid-template-columns:repeat(2,minmax(0,1fr));\n  }\n\n  .awr-m-hero__content {\n    display:block;\n  }\n\n  .awr-m-hero__mockup {\n    width:min(100%,760px);\n    margin:28px auto 0;\n  }\n\n}\n\n@media(max-width:760px) {\n\n  .awr-m-section {\n    padding-left:22px;\n    padding-right:22px;\n  }\n\n  .awr-m-depart__grid,\n  .awr-m-findings,\n  .awr-m-process {\n    grid-template-columns:1fr;\n  }\n\n  .awr-m-finding:last-child {\n    grid-column:auto;\n    max-width:none;\n  }\n\n  .awr-m-card {\n    min-height:auto;\n  }\n\n  .awr-m-card__number {\n    margin-bottom:34px;\n  }\n\n  .awr-m-arrow-link {\n    margin-top:25px;\n  }\n\n  .awr-m-ideal-grid {\n    grid-template-columns:1fr;\n  }\n\n  .awr-m-ideal-card,\n  .awr-m-process-card {\n    min-height:auto;\n  }\n\n  .awr-m-process {\n    gap:16px;\n  }\n\n  .awr-m-process-top {\n    margin-bottom:30px;\n  }\n\n  .awr-m-final {\n    grid-template-columns:1fr;\n    gap:35px;\n  }\n\n}\n\n@media(max-width:600px) {\n\n  .awr-m-section {\n    padding:70px 18px;\n  }\n\n  .awr-m-grid-bg {\n    background-size:60px 60px,60px 60px,auto;\n  }\n\n  .awr-m-hero {\n    padding-top:55px;\n    background-size:60px 60px,60px 60px,auto;\n  }\n\n  .awr-m-h1 {\n    font-size:clamp(38px,10.5vw,52px);\n  }\n\n  .awr-m-h2 {\n    font-size:clamp(34px,9.5vw,46px);\n  }\n\n  .awr-m-section-head {\n    margin-bottom:44px;\n  }\n\n  .awr-m-form-card,\n  .awr-m-card {\n    padding:26px 22px;\n    border-radius:22px;\n  }\n\n  .awr-m-btn {\n    width:100%;\n  }\n\n  .awr-m-finding {\n    grid-template-columns:46px 1fr;\n    gap:13px;\n    min-height:0;\n    padding:23px;\n  }\n\n  .awr-m-finding__emoji {\n    width:42px;\n    height:42px;\n    font-size:20px;\n  }\n\n  .awr-m-ideal-card,\n  .awr-m-process-card {\n    padding:23px;\n  }\n\n  .awr-m-process-number {\n    font-size:47px;\n  }\n\n  .awr-m-hero__mockup {\n    width:115%;\n    margin:28px 0 0 -7.5%;\n  }\n\n  .awr-m-compare-wrap {\n    width:min(100%,300px);\n  }\n\n  .awr-m-compare-stage {\n    grid-template-columns:1fr;\n    gap:16px;\n  }\n\n  .awr-m-compare-stage .awr-m-compare-wrap {\n    grid-row:1;\n  }\n\n  .awr-m-compare-side {\n    display:none;\n  }\n\n  .awr-m-compare__handle {\n    width:44px;\n    height:44px;\n    font-size:17px;\n  }\n\n  .awr-m-faq-item summary {\n    padding-top:23px;\n    padding-bottom:23px;\n  }\n\n  .awr-m-faq-item > div {\n    padding-right:15px;\n  }\n\n  .awr-m-final {\n    padding:28px 22px;\n    border-radius:22px;\n  }\n\n  .awr-m-final__actions,\n  .awr-m-final__link {\n    width:100%;\n  }\n\n  .awr-m-depart-intro {\n    margin:-4px 0 30px;\n    text-align:left;\n  }\n\n}\n\n\n\/* ==========================================================\n   REDUCED MOTION\n========================================================== *\/\n\n@media(prefers-reduced-motion:reduce) {\n\n  .awr-m-page *,\n  .awr-m-page *::before,\n  .awr-m-page *::after {\n    animation:none !important;\n    transition:none !important;\n  }\n\n  .awr-m-reveal {\n    opacity:1 !important;\n    transform:none !important;\n  }\n\n}\n\n\n\/* ==========================================================\n   EFFETS PARTAG\u00c9S (repris de la page Visibilit\u00e9)\n========================================================== *\/\n\n@property --awr-v-angle {\n  syntax: \"<angle>\";\n  initial-value: 0deg;\n  inherits: false;\n}\n\n\n\/* ---------- HERO : image qui flotte ---------- *\/\n\n.awr-v-float img {\n  animation: awrVFloat 6s ease-in-out infinite;\n}\n\n@keyframes awrVFloat {\n  0%, 100% { transform: translateY(0); }\n  50%      { transform: translateY(-12px); }\n}\n\n\n\/* ---------- SERVICES : halo qui suit la souris ---------- *\/\n\n.awr-v-spot::before {\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n  pointer-events: none;\n  border-radius: inherit;\n  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(96,165,250,.20), transparent 60%);\n  opacity: 0;\n  transition: opacity .3s ease;\n}\n\n.awr-v-spot:hover::before {\n  opacity: 1;\n}\n\n.awr-v-spot .awr-m-ideal-icon {\n  transition: transform .35s cubic-bezier(.2,.65,.3,1), background .3s ease;\n}\n\n.awr-v-spot:hover .awr-m-ideal-icon {\n  transform: translateY(-4px) rotate(-6deg) scale(1.06);\n  background: rgba(59,130,246,.2);\n}\n\n\n\/* ---------- CTA FINAL : bordure lumineuse qui tourne ---------- *\/\n\n.awr-v-border {\n  position: relative;\n  padding: 1px;\n  border-radius: 28px;\n  background: conic-gradient(from var(--awr-v-angle), rgba(96,165,250,.15) 0deg, #60a5fa 60deg, rgba(96,165,250,.15) 120deg, rgba(96,165,250,.15) 360deg);\n  animation: awrVSpin 6s linear infinite;\n}\n\n.awr-v-border .awr-m-final {\n  border: 0;\n  background:\n    radial-gradient(circle at 90% 20%, rgba(59,130,246,.20), transparent 32%),\n    #051236;\n}\n\n@keyframes awrVSpin {\n  to { --awr-v-angle: 360deg; }\n}\n\n\n\n\n\/* ==========================================================\n   PAGE CR\u00c9ATION DE SITE \u2014 COMPOSANTS SP\u00c9CIFIQUES (.awr-c-)\n========================================================== *\/\n\n\n\/* ---------- BENTO \u00ab TOUT COMPRIS \u00bb ---------- *\/\n\n.awr-c-bento {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  grid-auto-rows: minmax(200px, auto);\n  gap: 18px;\n}\n\n.awr-c-tile {\n  position: relative;\n  overflow: hidden;\n  padding: 28px;\n  border: 1px solid rgba(96,165,250,.18);\n  border-radius: 24px;\n  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));\n  transition: border-color .25s ease, transform .25s ease;\n}\n\n.awr-c-tile:hover {\n  border-color: rgba(96,165,250,.42);\n  transform: translateY(-4px);\n}\n\n.awr-c-tile > * {\n  position: relative;\n  z-index: 2;\n}\n\n.awr-c-tile--hero {\n  grid-column: span 2;\n  grid-row: span 2;\n  display: flex;\n  flex-direction: column;\n  background: linear-gradient(150deg, rgba(59,130,246,.20), rgba(2,10,32,.55));\n  border-color: rgba(96,165,250,.35);\n}\n\n.awr-c-bento > .awr-c-tile:nth-child(2) { grid-column: span 2; }\n.awr-c-bento > .awr-c-tile:nth-child(5),\n.awr-c-bento > .awr-c-tile:nth-child(6) { grid-column: span 2; }\n\n.awr-c-tile h3 {\n  margin: 18px 0 10px;\n  color: #fff;\n  font-size: 21px;\n  line-height: 1.2;\n  font-weight: 850;\n  letter-spacing: -.02em;\n}\n\n.awr-c-tile--hero h3 {\n  font-size: clamp(24px, 2.4vw, 32px);\n}\n\n.awr-c-tile p {\n  margin: 0;\n  color: var(--awr-muted);\n  font-size: 15px;\n  line-height: 1.65;\n}\n\n\/* coche qui se dessine *\/\n.awr-c-check {\n  display: flex;\n  width: 40px;\n  height: 40px;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(96,165,250,.35);\n  border-radius: 50%;\n  background: rgba(59,130,246,.14);\n}\n\n.awr-c-check svg {\n  width: 20px;\n  height: 20px;\n  fill: none;\n  stroke: #60a5fa;\n  stroke-width: 2.4;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  stroke-dasharray: 24;\n  stroke-dashoffset: 24;\n  transition: stroke-dashoffset .7s cubic-bezier(.65,0,.35,1);\n}\n\n.awr-c-bento.is-visible .awr-c-check svg { stroke-dashoffset: 0; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(1) .awr-c-check svg { transition-delay: .3s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(2) .awr-c-check svg { transition-delay: .45s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(4) .awr-c-check svg { transition-delay: .6s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(5) .awr-c-check svg { transition-delay: .75s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(6) .awr-c-check svg { transition-delay: .9s; }\n\n\/* chiffre cl\u00e9 *\/\n.awr-c-big {\n  display: flex;\n  align-items: baseline;\n  gap: 10px;\n  color: #fff;\n  font-size: clamp(56px, 5vw, 76px);\n  line-height: .9;\n  font-weight: 950;\n  letter-spacing: -.05em;\n  background: linear-gradient(135deg, #fff 30%, #60a5fa);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n.awr-c-big small {\n  font-size: 20px;\n  letter-spacing: -.01em;\n  font-weight: 850;\n}\n\n.awr-c-tile--stat h3 {\n  margin-top: 14px;\n}\n\n\/* maquette filaire qui se construit *\/\n.awr-c-wire {\n  display: grid;\n  gap: 10px;\n  margin-top: auto;\n  padding: 16px;\n  border: 1px solid rgba(255,255,255,.1);\n  border-radius: 16px;\n  background: rgba(2,10,32,.55);\n}\n\n.awr-c-wire span,\n.awr-c-wire i {\n  display: block;\n  border-radius: 8px;\n  background: rgba(96,165,250,.16);\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform .8s cubic-bezier(.2,.65,.3,1);\n}\n\n.awr-c-wire__nav { height: 12px; width: 60%; transition-delay: .4s !important; }\n.awr-c-wire__hero {\n  height: 80px;\n  background: linear-gradient(120deg, rgba(59,130,246,.45), rgba(96,165,250,.15)) !important;\n  transition-delay: .6s !important;\n}\n.awr-c-wire__row {\n  display: grid !important;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  background: none !important;\n  transform: none !important;\n}\n.awr-c-wire__row i { height: 44px; }\n.awr-c-wire__row i:nth-child(1) { transition-delay: .8s; }\n.awr-c-wire__row i:nth-child(2) { transition-delay: .9s; }\n.awr-c-wire__row i:nth-child(3) { transition-delay: 1s; }\n\n.awr-c-bento.is-visible .awr-c-wire span,\n.awr-c-bento.is-visible .awr-c-wire i {\n  transform: scaleX(1);\n}\n\n\/* pr\u00e9cisions : h\u00e9bergement, formation *\/\n.awr-c-extras {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 18px;\n  margin-top: 18px;\n}\n\n.awr-c-extra {\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n  padding: 20px 24px;\n  border: 1px dashed rgba(96,165,250,.28);\n  border-radius: 18px;\n}\n\n.awr-c-extra__tag {\n  flex: 0 0 auto;\n  padding: 5px 10px;\n  border-radius: 999px;\n  background: rgba(59,130,246,.12);\n  color: #a9c8ff;\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: .06em;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n.awr-c-extra p {\n  margin: 0;\n  color: var(--awr-muted);\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n.awr-c-extra strong {\n  color: #fff;\n}\n\n\n\/* ---------- ONGLETS \u00ab TYPES DE PROJETS \u00bb ---------- *\/\n\n.awr-c-tabs {\n  max-width: 980px;\n  margin: 0 auto;\n}\n\n.awr-c-tabs__list {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  max-width: 560px;\n  margin: 0 auto 34px;\n  padding: 6px;\n  border: 1px solid rgba(96,165,250,.28);\n  border-radius: 999px;\n  background: rgba(2,10,32,.6);\n}\n\n.awr-c-tabs__list button {\n  position: relative;\n  z-index: 2;\n  min-height: 46px;\n  margin: 0;\n  padding: 0 12px;\n  border: 0;\n  border-radius: 999px;\n  background: none;\n  color: rgba(255,255,255,.62);\n  font-family: inherit;\n  font-size: 15px;\n  font-weight: 800;\n  cursor: pointer;\n  transition: color .25s ease;\n}\n\n.awr-c-tabs__list button[aria-selected=\"true\"] {\n  color: #fff;\n}\n\n.awr-c-tabs__list button:focus-visible {\n  outline: 3px solid #60a5fa;\n  outline-offset: 2px;\n}\n\n.awr-c-tabs__pill {\n  position: absolute;\n  z-index: 1;\n  top: 6px;\n  bottom: 6px;\n  left: 6px;\n  width: calc((100% - 12px) \/ 3);\n  border-radius: 999px;\n  background: linear-gradient(135deg, #3b82f6, #2563eb);\n  box-shadow: 0 8px 22px rgba(37,99,235,.4);\n  transform: translateX(calc(100% * var(--tab, 0)));\n  transition: transform .4s cubic-bezier(.65,0,.35,1);\n}\n\n.awr-c-tabs__panel {\n  display: grid;\n  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);\n  gap: 40px;\n  align-items: center;\n  padding: clamp(28px, 4vw, 48px);\n  border: 1px solid rgba(96,165,250,.22);\n  border-radius: 28px;\n  background: linear-gradient(150deg, rgba(59,130,246,.12), rgba(2,10,32,.6));\n  animation: awrCTab .45s cubic-bezier(.2,.65,.3,1);\n}\n\n.awr-c-tabs__panel[hidden] {\n  display: none;\n}\n\n@keyframes awrCTab {\n  from { opacity: 0; transform: translateY(12px); }\n  to   { opacity: 1; transform: none; }\n}\n\n.awr-c-tabs__panel h3 {\n  margin: 0 0 14px;\n  color: #fff;\n  font-size: clamp(24px, 2.4vw, 32px);\n  line-height: 1.12;\n  font-weight: 900;\n  letter-spacing: -.03em;\n}\n\n.awr-c-tabs__panel p {\n  margin: 0;\n  color: var(--awr-muted);\n  font-size: 16px;\n  line-height: 1.7;\n}\n\n.awr-c-tabs__panel ul {\n  display: grid;\n  gap: 12px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.awr-c-tabs__panel li {\n  position: relative;\n  padding: 14px 16px 14px 46px;\n  border: 1px solid rgba(255,255,255,.08);\n  border-radius: 14px;\n  background: rgba(2,10,32,.45);\n  color: #fff;\n  font-size: 15px;\n  font-weight: 700;\n  line-height: 1.4;\n}\n\n.awr-c-tabs__panel li::before {\n  content: \"\";\n  position: absolute;\n  left: 16px;\n  top: 50%;\n  width: 18px;\n  height: 18px;\n  margin-top: -9px;\n  border-radius: 50%;\n  background: #3b82f6 url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'\/%3E%3C\/svg%3E\") no-repeat center \/ 12px;\n}\n\n\n\/* ---------- R\u00c9ALISATIONS ---------- *\/\n\n.awr-c-works {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 24px;\n  perspective: 1200px;\n}\n\n.awr-c-work {\n  margin: 0;\n}\n\n.awr-c-work__frame {\n  overflow: hidden;\n  border: 1px solid rgba(255,255,255,.14);\n  border-radius: 20px;\n  background: #07132f;\n  box-shadow: 0 24px 60px rgba(0,0,0,.3);\n  transition: transform .5s cubic-bezier(.2,.65,.3,1), box-shadow .5s ease, border-color .3s ease;\n}\n\n.awr-c-work:hover .awr-c-work__frame {\n  transform: translateY(-8px) rotateX(4deg);\n  border-color: rgba(96,165,250,.45);\n  box-shadow: 0 34px 80px rgba(37,99,235,.25);\n}\n\n.awr-c-work__bar {\n  display: flex;\n  gap: 6px;\n  padding: 12px 16px;\n  background: rgba(255,255,255,.05);\n}\n\n.awr-c-work__bar i {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: rgba(255,255,255,.3);\n}\n\n.awr-c-work__img {\n  aspect-ratio: 16 \/ 10;\n  overflow: hidden;\n  background: #020817;\n}\n\n.awr-c-work__img img {\n  display: block;\n  width: 100% !important;\n  height: 100% !important;\n  max-width: none !important;\n  object-fit: cover;\n  object-position: top center;\n  transition: transform .8s cubic-bezier(.2,.65,.3,1);\n}\n\n.awr-c-work:hover .awr-c-work__img img {\n  transform: scale(1.06);\n}\n\n.awr-c-work figcaption {\n  margin-top: 16px;\n}\n\n.awr-c-work figcaption span {\n  display: block;\n  margin-bottom: 4px;\n  color: #60a5fa;\n  font-size: 12px;\n  font-weight: 800;\n  letter-spacing: .06em;\n  text-transform: uppercase;\n}\n\n.awr-c-work figcaption strong {\n  color: #fff;\n  font-size: 20px;\n  font-weight: 850;\n}\n\n\n\/* ---------- UNE SEMAINE TYPE ---------- *\/\n\n.awr-c-week {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  gap: 18px;\n  margin: 0;\n  padding: 44px 0 0;\n  list-style: none;\n}\n\n.awr-c-week::before,\n.awr-c-week::after {\n  content: \"\";\n  position: absolute;\n  top: 9px;\n  left: 9px;\n  right: 9px;\n  height: 3px;\n  border-radius: 999px;\n}\n\n.awr-c-week::before {\n  background: rgba(255,255,255,.08);\n}\n\n.awr-c-week::after {\n  background: linear-gradient(90deg, #60a5fa, #2563eb);\n  box-shadow: 0 0 14px rgba(59,130,246,.55);\n  transform: scaleX(0);\n  transform-origin: left center;\n  transition: transform 2.2s cubic-bezier(.65,0,.35,1) .3s;\n}\n\n.awr-c-week.is-visible::after {\n  transform: scaleX(1);\n}\n\n.awr-c-week li {\n  position: relative;\n  opacity: 0;\n  transform: translateY(16px);\n  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.3,1);\n  transition-delay: calc(.4s + var(--i) * .4s);\n}\n\n.awr-c-week.is-visible li {\n  opacity: 1;\n  transform: none;\n}\n\n\/* point sur la ligne *\/\n.awr-c-week li::before {\n  content: \"\";\n  position: absolute;\n  top: -44px;\n  left: 0;\n  width: 21px;\n  height: 21px;\n  border: 3px solid #07183f;\n  border-radius: 50%;\n  background: #3b82f6;\n  box-shadow: 0 0 0 4px rgba(59,130,246,.2), 0 0 16px rgba(59,130,246,.6);\n  transform: scale(0);\n  transition: transform .4s cubic-bezier(.34,1.56,.64,1);\n  transition-delay: calc(.4s + var(--i) * .4s);\n}\n\n.awr-c-week.is-visible li::before {\n  transform: scale(1);\n}\n\n.awr-c-week li:last-child::before {\n  background: #22c55e;\n  box-shadow: 0 0 0 4px rgba(34,197,94,.2), 0 0 16px rgba(34,197,94,.6);\n}\n\n.awr-c-week__day {\n  display: inline-block;\n  margin-bottom: 12px;\n  padding: 5px 11px;\n  border-radius: 999px;\n  background: rgba(59,130,246,.14);\n  color: #a9c8ff;\n  font-size: 12px;\n  font-weight: 800;\n}\n\n.awr-c-week h3 {\n  margin: 0 0 8px;\n  color: #fff;\n  font-size: 19px;\n  line-height: 1.2;\n  font-weight: 850;\n}\n\n.awr-c-week p {\n  margin: 0;\n  color: var(--awr-muted);\n  font-size: 14px;\n  line-height: 1.6;\n}\n\n\n\/* ---------- POUR QUI ---------- *\/\n\n.awr-c-trades {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 16px;\n}\n\n.awr-c-trade {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  min-height: 170px;\n  padding: 24px;\n  overflow: hidden;\n  border: 1px solid rgba(96,165,250,.2);\n  border-radius: 22px;\n  background: linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));\n  color: #fff !important;\n  text-decoration: none !important;\n  transition: transform .3s cubic-bezier(.2,.65,.3,1), border-color .3s ease, background .3s ease;\n}\n\n.awr-c-trade > * {\n  position: relative;\n  z-index: 2;\n}\n\n.awr-c-trade:hover {\n  transform: translateY(-6px);\n  border-color: rgba(96,165,250,.5);\n}\n\n.awr-c-trade__group {\n  margin-bottom: 6px;\n  color: rgba(169,200,255,.7);\n  font-size: 11px;\n  font-weight: 800;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n}\n\n.awr-c-trade strong {\n  font-size: 22px;\n  line-height: 1.15;\n  font-weight: 900;\n  letter-spacing: -.02em;\n}\n\n.awr-c-trade__arrow {\n  position: absolute !important;\n  top: 22px;\n  right: 22px;\n  display: flex;\n  width: 38px;\n  height: 38px;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(96,165,250,.3);\n  border-radius: 50%;\n  color: #60a5fa;\n  font-size: 17px;\n  transition: transform .3s ease, background .3s ease, color .3s ease;\n}\n\n.awr-c-trade:hover .awr-c-trade__arrow {\n  transform: translateX(4px) rotate(-45deg);\n  background: #3b82f6;\n  color: #fff;\n}\n\n.awr-c-trade--other {\n  grid-column: 1 \/ -1;\n  min-height: 0;\n  padding-right: 80px;\n  border-style: dashed;\n  background: rgba(59,130,246,.06);\n}\n\n.awr-c-trade--other strong {\n  font-size: 19px;\n}\n\n.awr-c-trade--other > span:not(.awr-c-trade__arrow) {\n  margin-top: 6px;\n  color: var(--awr-muted);\n  font-size: 15px;\n}\n\n.awr-c-trade--other .awr-c-trade__arrow {\n  top: 50%;\n  margin-top: -19px;\n}\n\n\n\/* ---------- RESPONSIVE ---------- *\/\n\n@media (max-width: 1000px) {\n\n  .awr-c-bento {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n  .awr-c-tile--hero {\n    grid-row: span 1;\n  }\n\n  .awr-c-bento > .awr-c-tile:nth-child(2),\n  .awr-c-bento > .awr-c-tile:nth-child(5),\n  .awr-c-bento > .awr-c-tile:nth-child(6) {\n    grid-column: span 1;\n  }\n\n  .awr-c-works {\n    grid-template-columns: 1fr;\n    max-width: 640px;\n  }\n\n  .awr-c-week {\n    grid-template-columns: 1fr;\n    gap: 26px;\n    padding: 0 0 0 44px;\n  }\n\n  .awr-c-week::before,\n  .awr-c-week::after {\n    top: 9px;\n    bottom: 9px;\n    left: 9px;\n    right: auto;\n    width: 3px;\n    height: auto;\n  }\n\n  .awr-c-week::after {\n    transform: scaleY(0);\n    transform-origin: center top;\n  }\n\n  .awr-c-week.is-visible::after {\n    transform: scaleY(1);\n  }\n\n  .awr-c-week li::before {\n    top: 0;\n    left: -44px;\n  }\n\n  .awr-c-trades {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n\n}\n\n@media (max-width: 760px) {\n\n  .awr-c-extras {\n    grid-template-columns: 1fr;\n  }\n\n  .awr-c-tabs__panel {\n    grid-template-columns: 1fr;\n    gap: 24px;\n  }\n\n}\n\n@media (max-width: 600px) {\n\n  .awr-c-bento {\n    grid-template-columns: 1fr;\n  }\n\n  .awr-c-tile--hero {\n    grid-column: auto;\n  }\n\n  .awr-c-tile {\n    padding: 22px;\n  }\n\n  .awr-c-extra {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .awr-c-tabs__list button {\n    font-size: 13px;\n    padding: 0 6px;\n  }\n\n  .awr-c-trades {\n    grid-template-columns: 1fr;\n  }\n\n  .awr-c-trade {\n    min-height: 120px;\n  }\n\n}\n\n\n\/* ---------- MOUVEMENT R\u00c9DUIT ---------- *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .awr-c-check svg { stroke-dashoffset: 0 !important; transition: none !important; }\n  .awr-c-wire span, .awr-c-wire i { transform: none !important; transition: none !important; }\n  .awr-c-tabs__panel { animation: none !important; }\n  .awr-c-tabs__pill { transition: none !important; }\n  .awr-c-week::after { transform: none !important; }\n  .awr-c-week li, .awr-c-week li::before { opacity: 1 !important; transform: none !important; }\n\n}\n\n\n\/* ==========================================================\n   V2 : EMOJIS, FRISE ET ONGLETS SANS ROSE\n========================================================== *\/\n\n\/* emojis des cartes \u00ab tout compris \u00bb *\/\n.awr-c-emoji {\n  display: flex;\n  width: 54px;\n  height: 54px;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(96,165,250,.3);\n  border-radius: 16px;\n  background: linear-gradient(145deg, rgba(59,130,246,.24), rgba(59,130,246,.06));\n  font-size: 26px;\n  line-height: 1;\n  transform: scale(.4) rotate(-12deg);\n  opacity: 0;\n  transition: transform .6s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;\n}\n\n.awr-c-tile--hero .awr-c-emoji {\n  width: 64px;\n  height: 64px;\n  font-size: 32px;\n}\n\n.awr-c-bento.is-visible .awr-c-emoji {\n  transform: none;\n  opacity: 1;\n}\n\n.awr-c-bento.is-visible .awr-c-tile:nth-child(1) .awr-c-emoji { transition-delay: .25s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(2) .awr-c-emoji { transition-delay: .4s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(3) .awr-c-emoji { transition-delay: .55s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(4) .awr-c-emoji { transition-delay: .7s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(5) .awr-c-emoji { transition-delay: .85s; }\n.awr-c-bento.is-visible .awr-c-tile:nth-child(6) .awr-c-emoji { transition-delay: 1s; }\n\n.awr-c-tile:hover .awr-c-emoji {\n  transform: translateY(-4px) rotate(-6deg) scale(1.06);\n  transition-delay: 0s;\n}\n\n\/* frise : points plus grands avec un emoji *\/\n.awr-c-week {\n  padding-top: 64px;\n}\n\n.awr-c-week::before,\n.awr-c-week::after {\n  top: 21px;\n  left: 22px;\n  right: 22px;\n}\n\n.awr-c-week::before,\n.awr-c-week::after {\n  z-index: 0;\n}\n\n.awr-c-week li::before {\n  content: attr(data-emoji);\n  z-index: 2;\n  top: -64px;\n  display: flex;\n  width: 44px;\n  height: 44px;\n  align-items: center;\n  justify-content: center;\n  border: 2px solid rgba(96,165,250,.55);\n  background: #0a1f52;\n  box-shadow: 0 0 0 5px rgba(59,130,246,.12), 0 0 18px rgba(59,130,246,.45);\n  font-size: 20px;\n  line-height: 1;\n}\n\n.awr-c-week li:last-child::before {\n  border-color: rgba(34,197,94,.7);\n  background: #0b3a2a;\n  box-shadow: 0 0 0 5px rgba(34,197,94,.14), 0 0 18px rgba(34,197,94,.5);\n}\n\n\/* onglets : on neutralise le rose du th\u00e8me (survol, focus, clic) *\/\n.awr-c-tabs__list button,\n.awr-c-tabs__list button:hover,\n.awr-c-tabs__list button:focus,\n.awr-c-tabs__list button:active {\n  background: none !important;\n  background-color: transparent !important;\n  border: 0 !important;\n  box-shadow: none !important;\n  text-decoration: none !important;\n}\n\n.awr-c-tabs__list button {\n  color: rgba(255,255,255,.62) !important;\n}\n\n.awr-c-tabs__list button:hover {\n  color: #fff !important;\n}\n\n.awr-c-tabs__list button[aria-selected=\"true\"] {\n  color: #fff !important;\n}\n\n.awr-c-tabs__list button:focus {\n  outline: none !important;\n}\n\n.awr-c-tabs__list button:focus-visible {\n  outline: 3px solid #60a5fa !important;\n  outline-offset: 2px !important;\n}\n\n\/* s\u00e9curit\u00e9 : aucun rose du th\u00e8me sur les autres boutons de la page *\/\n.awr-m-page button:hover,\n.awr-m-page button:focus {\n  background-color: transparent;\n}\n\n@media (max-width: 1000px) {\n\n  .awr-c-week {\n    padding: 0 0 0 64px;\n  }\n\n  .awr-c-week::before,\n  .awr-c-week::after {\n    top: 22px;\n    bottom: 22px;\n    left: 21px;\n    right: auto;\n  }\n\n  .awr-c-week li::before {\n    top: -4px;\n    left: -64px;\n  }\n\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .awr-c-emoji { transform: none !important; opacity: 1 !important; transition: none !important; }\n}\n\n<\/style>\n\n<main class=\"awr-m-page awr-m-page--creation\">\n\n\n<!-- =========================================================\n01 HERO\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-hero\">\n\n  <div class=\"awr-m-inner awr-m-hero__grid\">\n\n    <div class=\"awr-m-hero__content\">\n\n      <div class=\"awr-m-badge awr-m-reveal\">\n        Site vitrine \u00b7 Refonte \u00b7 Boutique en ligne\n      <\/div>\n\n      <h1 class=\"awr-m-h1 awr-m-reveal awr-m-reveal-delay-1\">\n        <span>Cr\u00e9ation de site internet<\/span>\n        <span>\u00e0 Paris :<\/span>\n        <strong>un site pro, en ligne en une semaine.<\/strong>\n      <\/h1>\n\n      <div class=\"awr-m-hero__mockup awr-v-float awr-m-reveal awr-m-reveal-delay-3\">\n        <img src=\"https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site.png\" alt=\"Site vitrine professionnel affich\u00e9 sur ordinateur portable, tablette et smartphone\" decoding=\"async\" fetchpriority=\"high\" title=\"Cr\u00e9ation de site internet\">\n      <\/div>\n\n    <\/div>\n\n\n    <div id=\"devis\" class=\"awr-m-form-card awr-contact-right awr-m-reveal awr-m-reveal-delay-1\">\n\n      <div class=\"awr-m-form-card__head\">\n\n        <span class=\"awr-m-eyebrow\">\n          Votre projet\n        <\/span>\n\n        <h2>\n          Parlons de votre site\n        <\/h2>\n\n        <p>\n          Laissez vos coordonn\u00e9es,\n          je vous rappelle pour faire le point.\n          Pas besoin de savoir exactement ce que vous voulez.\n        <\/p>\n\n      <\/div>\n\n      <div class=\"forminator-ui forminator-custom-form forminator-custom-form-1637 forminator-design--default  forminator_ajax\" data-forminator-render=\"0\" data-form=\"forminator-module-1637\" data-uid=\"6ac0df5940b1f\"><br\/><\/div><form\n\t\t\t\tid=\"forminator-module-1637\"\n\t\t\t\tclass=\"forminator-ui forminator-custom-form forminator-custom-form-1637 forminator-design--default  forminator_ajax\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tdata-forminator-render=\"0\"\n\t\t\t\tdata-form-id=\"1637\"\n\t\t\t\t data-color-option=\"theme\" data-design=\"default\" data-grid=\"open\" style=\"display: none;\"\n\t\t\t\tdata-uid=\"6ac0df5940b1f\"\n\t\t\t><div role=\"alert\" aria-live=\"polite\" class=\"forminator-response-message forminator-error\" aria-hidden=\"true\"><\/div><div class=\"forminator-row\"><div id=\"name-2\" class=\"forminator-field-name forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-name-2_6ac0df5940b1f\" id=\"forminator-field-name-2_6ac0df5940b1f-label\" class=\"forminator-label\">Nom <span class=\"forminator-required\">*<\/span><\/label><input type=\"text\" name=\"name-2\" value=\"\" placeholder=\"\" id=\"forminator-field-name-2_6ac0df5940b1f\" class=\"forminator-input forminator-name--field\" aria-required=\"true\" autocomplete=\"name\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"name-1\" class=\"forminator-field-name forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-name-1_6ac0df5940b1f\" id=\"forminator-field-name-1_6ac0df5940b1f-label\" class=\"forminator-label\">Pr\u00e9nom <span class=\"forminator-required\">*<\/span><\/label><input type=\"text\" name=\"name-1\" value=\"\" placeholder=\"\" id=\"forminator-field-name-1_6ac0df5940b1f\" class=\"forminator-input forminator-name--field\" aria-required=\"true\" autocomplete=\"name\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"email-1\" class=\"forminator-field-email forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-email-1_6ac0df5940b1f\" id=\"forminator-field-email-1_6ac0df5940b1f-label\" class=\"forminator-label\">E-mail <span class=\"forminator-required\">*<\/span><\/label><input type=\"email\" name=\"email-1\" value=\"\" placeholder=\"\" id=\"forminator-field-email-1_6ac0df5940b1f\" class=\"forminator-input forminator-email--field\" data-required=\"true\" aria-required=\"true\" autocomplete=\"email\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"phone-1\" class=\"forminator-field-phone forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-phone-1_6ac0df5940b1f\" id=\"forminator-field-phone-1_6ac0df5940b1f-label\" class=\"forminator-label\">T\u00e9l\u00e9phone<\/label><input type=\"text\" name=\"phone-1\" value=\"\" placeholder=\"\" id=\"forminator-field-phone-1_6ac0df5940b1f\" class=\"forminator-input forminator-field--phone\" data-required=\"\" aria-required=\"false\" autocomplete=\"off\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"textarea-1\" class=\"forminator-field-textarea forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-textarea-1_6ac0df5940b1f\" id=\"forminator-field-textarea-1_6ac0df5940b1f-label\" class=\"forminator-label\">Message<\/label><span id=\"forminator-field-textarea-1_6ac0df5940b1f-description\" class=\"forminator-description\"><span data-limit=\"180\" data-type=\"characters\" data-editor=\"\">0 \/ 180<\/span><\/span><textarea name=\"textarea-1\" placeholder=\"\" id=\"forminator-field-textarea-1_6ac0df5940b1f\" class=\"forminator-textarea\" style=\"--forminator-textarea-min-height:140px;\" maxlength=\"180\" ><\/textarea><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"consent-1\" class=\"forminator-field-consent forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-consent-1_6ac0df5940b1f\" id=\"forminator-field-consent-1_6ac0df5940b1f-label\" class=\"forminator-label\">Consent <span class=\"forminator-required\">*<\/span><\/label><div class=\"forminator-checkbox__wrapper\"><label id=\"forminator-field-consent-1_6ac0df5940b1f__label\" class=\"forminator-checkbox forminator-consent\"><input type=\"checkbox\" name=\"consent-1\" id=\"forminator-field-consent-1_6ac0df5940b1f\" value=\"checked\" aria-labelledby=\"forminator-field-consent-1_6ac0df5940b1f-label\" aria-describedby=\"forminator-field-consent-1_6ac0df5940b1f__description\" data-required=\"true\" aria-required=\"true\" \/><span class=\"forminator-checkbox-box\" aria-hidden=\"true\"><\/span><\/label><div id=\"forminator-field-consent-1_6ac0df5940b1f__description\" class=\"forminator-checkbox__label forminator-consent__label\"><p>J&rsquo;accepte que mes informations soient utilis\u00e9es afin d&rsquo;\u00eatre recontact\u00e9 dans le cadre de ma demande.<\/p><\/div><\/div><\/div><\/div><\/div><div class=\"forminator-row forminator-hidden\"><div id=\"hidden-1\" class=\"forminator-field-hidden  forminator-col-12 \"><input type=\"hidden\" id=\"hidden-1_6ac0df5940b1f\" name=\"hidden-1\" value=\"https:\/\/agencewebrusek.com\/en\/creation-site-internet\/\" \/><\/div><\/div><input type=\"hidden\" name=\"referer_url\" value=\"\" \/><div class=\"forminator-row forminator-row-last\"><div class=\"forminator-col\"><div class=\"forminator-field\"><button class=\"forminator-button forminator-button-submit\">Envoyer<\/button><\/div><\/div><\/div><input type=\"hidden\" id=\"forminator_nonce\" name=\"forminator_nonce\" value=\"427f0dac69\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/1507\" \/><input type=\"hidden\" name=\"form_id\" value=\"1637\"><input type=\"hidden\" name=\"page_id\" value=\"1507\"><input type=\"hidden\" name=\"form_type\" value=\"default\"><input type=\"hidden\" name=\"current_url\" value=\"https:\/\/agencewebrusek.com\/en\/creation-site-internet\/\"><input type=\"hidden\" name=\"render_id\" value=\"0\"><input type=\"hidden\" name=\"action\" value=\"forminator_submit_form_custom-forms\"><\/form>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n02 TOUT COMPRIS (BENTO)\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-grid-bg\">\n\n  <div class=\"awr-m-inner\">\n\n    <header class=\"awr-m-section-head awr-m-section-head--wide\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Tout ce qu&rsquo;il faut,<\/span>\n        <strong>rien de superflu.<\/strong>\n      <\/h2>\n\n      <p class=\"awr-m-intro\">\n        Un site qui pr\u00e9sente clairement votre activit\u00e9,\n        rassure vos visiteurs et les fait passer \u00e0 l&rsquo;action.\n        Voici ce que comprend chaque cr\u00e9ation.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"awr-c-bento awr-m-reveal\">\n\n\n      <article class=\"awr-c-tile awr-c-tile--hero awr-v-spot\">\n        <span class=\"awr-c-emoji\" aria-hidden=\"true\">\ud83c\udfa8<\/span>\n        <h3>Un design sur mesure<\/h3>\n        <p>\n          Un site \u00e0 votre image, pas un mod\u00e8le g\u00e9n\u00e9rique.\n          Couleurs, typographies, photos :\n          tout est pens\u00e9 pour votre activit\u00e9 et vos clients.\n        <\/p>\n        <div class=\"awr-c-wire\" aria-hidden=\"true\">\n          <span class=\"awr-c-wire__nav\"><\/span>\n          <span class=\"awr-c-wire__hero\"><\/span>\n          <span class=\"awr-c-wire__row\"><i><\/i><i><\/i><i><\/i><\/span>\n        <\/div>\n      <\/article>\n\n\n      <article class=\"awr-c-tile awr-v-spot\">\n        <span class=\"awr-c-emoji\" aria-hidden=\"true\">\u270d\ufe0f<\/span>\n        <h3>Les textes, r\u00e9dig\u00e9s pour vous<\/h3>\n        <p>\n          Vous n&rsquo;avez rien \u00e0 \u00e9crire.\n          Je r\u00e9dige des textes clairs,\n          qui parlent \u00e0 vos clients et \u00e0 Google.\n        <\/p>\n      <\/article>\n\n\n      <article class=\"awr-c-tile awr-c-tile--stat awr-v-spot\">\n        <span class=\"awr-c-emoji\" aria-hidden=\"true\">\u26a1<\/span>\n        <h3>En ligne en une semaine<\/h3>\n        <p>En moyenne, entre notre premier \u00e9change et la mise en ligne.<\/p>\n      <\/article>\n\n\n      <article class=\"awr-c-tile awr-v-spot\">\n        <span class=\"awr-c-emoji\" aria-hidden=\"true\">\ud83d\udcf1<\/span>\n        <h3>Pens\u00e9 mobile d&rsquo;abord<\/h3>\n        <p>La plupart de vos visiteurs arrivent sur t\u00e9l\u00e9phone : le site y est impeccable.<\/p>\n      <\/article>\n\n\n      <article class=\"awr-c-tile awr-v-spot\">\n        <span class=\"awr-c-emoji\" aria-hidden=\"true\">\ud83d\udd0e<\/span>\n        <h3>Les bases du r\u00e9f\u00e9rencement<\/h3>\n        <p>\n          Titres, descriptions, vitesse, donn\u00e9es structur\u00e9es :\n          votre site part sur de bonnes bases pour \u00eatre trouv\u00e9 sur Google.\n        <\/p>\n      <\/article>\n\n\n      <article class=\"awr-c-tile awr-v-spot\">\n        <span class=\"awr-c-emoji\" aria-hidden=\"true\">\ud83d\udcde<\/span>\n        <h3>Contact et fiche Google<\/h3>\n        <p>\n          Formulaire de contact, bouton d&rsquo;appel,\n          et lien avec votre fiche Google :\n          vos visiteurs vous joignent sans chercher.\n        <\/p>\n      <\/article>\n\n    <\/div>\n\n\n    <div class=\"awr-c-extras awr-m-reveal\">\n\n      <div class=\"awr-c-extra\">\n        <span class=\"awr-c-extra__tag\">\u00c0 votre nom<\/span>\n        <p>\n          <strong>Nom de domaine et h\u00e9bergement :<\/strong>\n          je m&rsquo;occupe de toute la mise en place.\n          Ils sont \u00e0 votre nom, avec un co\u00fbt annuel s\u00e9par\u00e9,\n          pay\u00e9 directement au fournisseur. Votre site vous appartient.\n        <\/p>\n      <\/div>\n\n      <div class=\"awr-c-extra\">\n        <span class=\"awr-c-extra__tag\">En option<\/span>\n        <p>\n          <strong>Formation :<\/strong>\n          si vous souhaitez modifier votre site vous-m\u00eame,\n          je vous montre comment faire, en option.\n        <\/p>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n03 TROIS TYPES DE PROJETS (ONGLETS)\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-section--alt\">\n\n  <div class=\"awr-m-inner\">\n\n    <header class=\"awr-m-section-head awr-m-section-head--center\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Trois types de projets,<\/span>\n        <strong>la m\u00eame exigence.<\/strong>\n      <\/h2>\n\n    <\/header>\n\n\n    <div class=\"awr-c-tabs awr-m-reveal\" data-awr-tabs>\n\n      <div class=\"awr-c-tabs__list\" role=\"tablist\" aria-label=\"Types de projets\">\n        <button type=\"button\" role=\"tab\" id=\"awr-tab-vitrine\" aria-controls=\"awr-panel-vitrine\" aria-selected=\"true\">Site vitrine<\/button>\n        <button type=\"button\" role=\"tab\" id=\"awr-tab-refonte\" aria-controls=\"awr-panel-refonte\" aria-selected=\"false\" tabindex=\"-1\">Refonte<\/button>\n        <button type=\"button\" role=\"tab\" id=\"awr-tab-boutique\" aria-controls=\"awr-panel-boutique\" aria-selected=\"false\" tabindex=\"-1\">Boutique en ligne<\/button>\n        <span class=\"awr-c-tabs__pill\" aria-hidden=\"true\"><\/span>\n      <\/div>\n\n\n      <div class=\"awr-c-tabs__panel\" role=\"tabpanel\" id=\"awr-panel-vitrine\" aria-labelledby=\"awr-tab-vitrine\">\n        <div>\n          <h3>Pr\u00e9senter votre activit\u00e9 et faire prendre contact<\/h3>\n          <p>\n            Le site qui convient \u00e0 la plupart des ind\u00e9pendants,\n            artisans et petites entreprises :\n            vos services, votre zone, vos r\u00e9alisations,\n            et un moyen simple de vous contacter.\n          <\/p>\n        <\/div>\n        <ul>\n          <li>Une page par service important<\/li>\n          <li>Vos r\u00e9alisations et vos avis mis en valeur<\/li>\n          <li>Formulaire, bouton d&rsquo;appel et fiche Google reli\u00e9s<\/li>\n        <\/ul>\n      <\/div>\n\n\n      <div class=\"awr-c-tabs__panel\" role=\"tabpanel\" id=\"awr-panel-refonte\" aria-labelledby=\"awr-tab-refonte\" hidden>\n        <div>\n          <h3>Votre site existe, mais il ne rapporte rien<\/h3>\n          <p>\n            Je commence par analyser gratuitement votre site actuel\n            et je vous dis ce qui bloque.\n            Puis je le reconstruis, sans perdre ce qui fonctionne d\u00e9j\u00e0.\n          <\/p>\n        <\/div>\n        <ul>\n          <li>Analyse gratuite de votre site actuel<\/li>\n          <li>Conservation de vos adresses et de votre r\u00e9f\u00e9rencement<\/li>\n          <li>Un nouveau design, clair et rapide<\/li>\n        <\/ul>\n      <\/div>\n\n\n      <div class=\"awr-c-tabs__panel\" role=\"tabpanel\" id=\"awr-panel-boutique\" aria-labelledby=\"awr-tab-boutique\" hidden>\n        <div>\n          <h3>Vendre vos produits en ligne<\/h3>\n          <p>\n            Une boutique simple \u00e0 g\u00e9rer au quotidien,\n            qui pr\u00e9sente vos produits avec soin\n            et donne envie de passer commande.\n          <\/p>\n        <\/div>\n        <ul>\n          <li>Catalogue de produits et fiches d\u00e9taill\u00e9es<\/li>\n          <li>Paiement en ligne et gestion des commandes<\/li>\n          <li>Une boutique aussi soign\u00e9e que votre marque<\/li>\n        <\/ul>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n04 R\u00c9ALISATIONS\n========================================================= -->\n\n<section class=\"awr-m-section\" id=\"realisations\">\n\n  <div class=\"awr-m-inner\">\n\n    <header class=\"awr-m-section-head awr-m-section-head--wide\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Quelques sites<\/span>\n        <strong>d\u00e9j\u00e0 en ligne.<\/strong>\n      <\/h2>\n\n      <p class=\"awr-m-intro\">\n        Des projets diff\u00e9rents, une m\u00eame m\u00e9thode :\n        comprendre l&rsquo;activit\u00e9, puis construire un site\n        qui la pr\u00e9sente clairement.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"awr-c-works\">\n\n\n      <figure class=\"awr-c-work awr-m-reveal\">\n        <div class=\"awr-c-work__frame\">\n          <span class=\"awr-c-work__bar\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span>\n          <div class=\"awr-c-work__img\">\n            <img src=\"https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/08\/awr-laconsciente.webp\" alt=\"Site vitrine r\u00e9alis\u00e9 pour La Consciente\" loading=\"lazy\" decoding=\"async\" title=\"Cr\u00e9ation de site internet\">\n          <\/div>\n        <\/div>\n        <figcaption>\n          <span>Site vitrine<\/span>\n          <strong>La Consciente<\/strong>\n        <\/figcaption>\n      <\/figure>\n\n\n      <figure class=\"awr-c-work awr-m-reveal awr-m-reveal-delay-1\">\n        <div class=\"awr-c-work__frame\">\n          <span class=\"awr-c-work__bar\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span>\n          <div class=\"awr-c-work__img\">\n            <img src=\"https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/08\/awr-delville.webp\" alt=\"Site r\u00e9alis\u00e9 pour Delville Management\" loading=\"lazy\" decoding=\"async\" title=\"Cr\u00e9ation de site internet\">\n          <\/div>\n        <\/div>\n        <figcaption>\n          <span>Web et acquisition<\/span>\n          <strong>Delville Management<\/strong>\n        <\/figcaption>\n      <\/figure>\n\n\n      <figure class=\"awr-c-work awr-m-reveal awr-m-reveal-delay-2\">\n        <div class=\"awr-c-work__frame\">\n          <span class=\"awr-c-work__bar\" aria-hidden=\"true\"><i><\/i><i><\/i><i><\/i><\/span>\n          <div class=\"awr-c-work__img\">\n            <img src=\"https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/08\/awr-mikael-de-poissy.webp\" alt=\"Boutique en ligne r\u00e9alis\u00e9e pour Mika\u00ebl de Poissy\" loading=\"lazy\" decoding=\"async\" title=\"Cr\u00e9ation de site internet\">\n          <\/div>\n        <\/div>\n        <figcaption>\n          <span>Boutique en ligne<\/span>\n          <strong>Mika\u00ebl de Poissy<\/strong>\n        <\/figcaption>\n      <\/figure>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n05 UNE SEMAINE TYPE\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-section--alt\">\n\n  <div class=\"awr-m-inner\">\n\n    <header class=\"awr-m-section-head\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Une semaine,<\/span>\n        <strong>du premier appel \u00e0 la mise en ligne.<\/strong>\n      <\/h2>\n\n      <p class=\"awr-m-intro\">\n        Voici comment se d\u00e9roule une cr\u00e9ation type.\n        Tout se fait par t\u00e9l\u00e9phone ou WhatsApp,\n        et le rythme d\u00e9pend surtout de vos validations.\n      <\/p>\n\n    <\/header>\n\n\n    <ol class=\"awr-c-week awr-m-reveal\">\n\n      <li style=\"--i:0\" data-emoji=\"\ud83d\udcde\">\n        <span class=\"awr-c-week__day\">Jour 1<\/span>\n        <h3>Premier \u00e9change<\/h3>\n        <p>On parle de votre activit\u00e9, de vos clients et de vos objectifs. Vous recevez un devis clair.<\/p>\n      <\/li>\n\n      <li style=\"--i:1\" data-emoji=\"\u270d\ufe0f\">\n        <span class=\"awr-c-week__day\">Jour 2<\/span>\n        <h3>Structure et textes<\/h3>\n        <p>Je d\u00e9finis les pages et je r\u00e9dige les textes \u00e0 partir de notre \u00e9change.<\/p>\n      <\/li>\n\n      <li style=\"--i:2\" data-emoji=\"\ud83d\udee0\ufe0f\">\n        <span class=\"awr-c-week__day\">Jours 3 \u00e0 5<\/span>\n        <h3>Design et construction<\/h3>\n        <p>Je construis le site. Vous suivez l&rsquo;avancement depuis votre t\u00e9l\u00e9phone.<\/p>\n      <\/li>\n\n      <li style=\"--i:3\" data-emoji=\"\ud83d\udc40\">\n        <span class=\"awr-c-week__day\">Jour 6<\/span>\n        <h3>Vos retours<\/h3>\n        <p>Vous relisez, je fais les derniers ajustements.<\/p>\n      <\/li>\n\n      <li style=\"--i:4\" data-emoji=\"\ud83d\ude80\">\n        <span class=\"awr-c-week__day\">Jour 7<\/span>\n        <h3>Mise en ligne<\/h3>\n        <p>Le site est publi\u00e9 et reli\u00e9 \u00e0 votre fiche Google. Le solde se r\u00e8gle \u00e0 la livraison.<\/p>\n      <\/li>\n\n    <\/ol>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n06 POUR QUI\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-grid-bg\">\n\n  <div class=\"awr-m-inner\">\n\n    <header class=\"awr-m-section-head awr-m-section-head--wide\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Un site pens\u00e9<\/span>\n        <strong>pour votre m\u00e9tier.<\/strong>\n      <\/h2>\n\n      <p class=\"awr-m-intro\">\n        Un plombier et un architecte n&rsquo;ont pas les m\u00eames clients,\n        ni les m\u00eames besoins. D\u00e9couvrez ce que je propose pour votre m\u00e9tier.\n      <\/p>\n\n    <\/header>\n\n\n    <div class=\"awr-c-trades awr-m-reveal\">\n\n      <a class=\"awr-c-trade awr-v-spot\" href=\"\/creation-site-internet-plombier\/\">\n        <span class=\"awr-c-trade__group\">B\u00e2timent<\/span>\n        <strong>Plombier<\/strong>\n        <span class=\"awr-c-trade__arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n      <a class=\"awr-c-trade awr-v-spot\" href=\"\/creation-site-internet-electricien\/\">\n        <span class=\"awr-c-trade__group\">B\u00e2timent<\/span>\n        <strong>\u00c9lectricien<\/strong>\n        <span class=\"awr-c-trade__arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n      <a class=\"awr-c-trade awr-v-spot\" href=\"\/creation-site-internet-architecte\/\">\n        <span class=\"awr-c-trade__group\">Design<\/span>\n        <strong>Architecte<\/strong>\n        <span class=\"awr-c-trade__arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n      <a class=\"awr-c-trade awr-v-spot\" href=\"\/creation-site-internet-decorateur-interieur\/\">\n        <span class=\"awr-c-trade__group\">Design<\/span>\n        <strong>D\u00e9corateur d&rsquo;int\u00e9rieur<\/strong>\n        <span class=\"awr-c-trade__arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n      <a class=\"awr-c-trade awr-c-trade--other\" href=\"#devis\">\n        <strong>Votre m\u00e9tier n&rsquo;est pas dans la liste ?<\/strong>\n        <span>Chaque site est construit sur mesure. Parlons de votre activit\u00e9.<\/span>\n        <span class=\"awr-c-trade__arrow\" aria-hidden=\"true\">\u2192<\/span>\n      <\/a>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n07 ET APR\u00c8S\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-section--alt\">\n\n  <div class=\"awr-m-inner\">\n\n    <header class=\"awr-m-section-head\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Et apr\u00e8s<\/span>\n        <strong>la mise en ligne ?<\/strong>\n      <\/h2>\n\n    <\/header>\n\n\n    <div class=\"awr-m-depart__grid\">\n\n\n      <article class=\"awr-m-card awr-m-card--featured\">\n\n        <div class=\"awr-m-card__number\">\n          FAIRE VENIR DES CLIENTS\n        <\/div>\n\n        <h3>\n          Un site vu, c&rsquo;est un site qui rapporte\n        <\/h3>\n\n        <p>\n          Fiche Google, avis, r\u00e9f\u00e9rencement local,\n          r\u00e9seaux sociaux et vid\u00e9o :\n          je peux vous accompagner chaque mois\n          pour que votre site attire des clients.\n        <\/p>\n\n        <a href=\"\/visibilite-en-ligne\/\" class=\"awr-m-arrow-link\">\n          D\u00e9couvrir la visibilit\u00e9 en ligne\n          <span>\u2192<\/span>\n        <\/a>\n\n      <\/article>\n\n\n      <article class=\"awr-m-card\">\n\n        <div class=\"awr-m-card__number\">\n          FAIRE \u00c9VOLUER VOTRE SITE\n        <\/div>\n\n        <h3>\n          Une modification, une nouvelle page ?\n        <\/h3>\n\n        <p>\n          Votre activit\u00e9 \u00e9volue, votre site aussi.\n          Envoyez-moi votre demande :\n          je vous r\u00e9ponds avec un devis rapide.\n        <\/p>\n\n        <p>\n          Et si vous pr\u00e9f\u00e9rez faire les petites mises \u00e0 jour vous-m\u00eame,\n          la formation est propos\u00e9e en option.\n        <\/p>\n\n        <a href=\"#devis\" class=\"awr-m-arrow-link\">\n          Me contacter\n          <span>\u2192<\/span>\n        <\/a>\n\n      <\/article>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n08 FAQ\n========================================================= -->\n\n<section class=\"awr-m-section\">\n\n  <div class=\"awr-m-inner awr-m-faq__inner\">\n\n\n    <header class=\"awr-m-section-head\">\n\n      <h2 class=\"awr-m-h2 awr-m-reveal\">\n        <span>Les questions<\/span>\n        <strong>que vous vous posez.<\/strong>\n      <\/h2>\n\n    <\/header>\n\n\n    <div class=\"awr-m-faq__list\">\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Combien co\u00fbte un site ?<\/summary>\n        <div>\n          <p>\n            Comptez autour de 1 000 \u20ac TTC pour un site.\n            Chaque projet est diff\u00e9rent : le prix exact d\u00e9pend du nombre de pages,\n            des fonctionnalit\u00e9s, une boutique en ligne par exemple,\n            et de ce que vous avez d\u00e9j\u00e0.\n            Apr\u00e8s notre premier \u00e9change, vous recevez un devis d\u00e9taill\u00e9, sans engagement.\n            Le nom de domaine et l&rsquo;h\u00e9bergement s&rsquo;ajoutent,\n            avec un co\u00fbt annuel s\u00e9par\u00e9, \u00e0 votre nom.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Combien de temps faut-il pour avoir mon site ?<\/summary>\n        <div>\n          <p>\n            Comptez une semaine en moyenne\n            entre notre premier \u00e9change et la mise en ligne.\n            Le d\u00e9lai d\u00e9pend surtout des validations :\n            je vous envoie l&rsquo;avancement au fil de l&rsquo;eau\n            et vous r\u00e9pondez quand vous avez quelques minutes.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Je n&rsquo;y connais rien et je n&rsquo;ai pas le temps. C&rsquo;est un probl\u00e8me ?<\/summary>\n        <div>\n          <p>\n            Non.\n            Je r\u00e9dige les textes,\n            choisis la structure\n            et m&rsquo;occupe de la mise en ligne.\n            De votre c\u00f4t\u00e9,\n            quelques \u00e9changes et validations suffisent.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Je n&rsquo;ai ni logo ni photos. C&rsquo;est un probl\u00e8me ?<\/summary>\n        <div>\n          <p>\n            Non.\n            Je peux vous accompagner pour le logo,\n            et quelques photos r\u00e9elles de votre travail\n            prises au t\u00e9l\u00e9phone suffisent souvent pour commencer.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>J&rsquo;ai d\u00e9j\u00e0 un site. Faut-il tout refaire ?<\/summary>\n        <div>\n          <p>\n            Pas forc\u00e9ment.\n            Je commence par regarder votre site actuel\n            et je vous indique ce qui bloque en priorit\u00e9.\n            Si quelques corrections suffisent,\n            inutile de tout reconstruire.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Pouvez-vous cr\u00e9er une boutique en ligne ?<\/summary>\n        <div>\n          <p>\n            Oui.\n            Catalogue de produits, paiement en ligne et gestion des commandes :\n            je cr\u00e9e des boutiques simples \u00e0 g\u00e9rer au quotidien.\n            Le devis d\u00e9pend surtout du nombre de produits\n            et des fonctionnalit\u00e9s souhait\u00e9es.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Le site m&rsquo;appartient-il ?<\/summary>\n        <div>\n          <p>\n            Oui.\n            Le nom de domaine et l&rsquo;h\u00e9bergement sont \u00e0 votre nom.\n            Je m&rsquo;occupe de toute la mise en place,\n            mais vous restez propri\u00e9taire de votre site.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n      <details class=\"awr-m-faq-item\">\n        <summary>Pourrai-je modifier mon site moi-m\u00eame ?<\/summary>\n        <div>\n          <p>\n            Oui, si vous le souhaitez.\n            Une formation est propos\u00e9e en option\n            pour que vous puissiez faire vos mises \u00e0 jour.\n            Sinon, envoyez-moi vos demandes de modification :\n            je vous r\u00e9ponds avec un devis.\n          <\/p>\n        <\/div>\n      <\/details>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n09 CTA FINAL\n========================================================= -->\n\n<section class=\"awr-m-section awr-m-section--final\">\n\n  <div class=\"awr-m-inner\">\n\n    <div class=\"awr-v-border\">\n    <div class=\"awr-m-final\">\n\n\n      <div>\n        <h2 class=\"awr-m-h2 awr-m-h2--final awr-m-reveal\">\n          <span>Votre site pro,<\/span>\n          <strong>en ligne la semaine prochaine.<\/strong>\n        <\/h2>\n      <\/div>\n\n\n      <div class=\"awr-m-final__actions\">\n\n        <a href=\"#devis\" class=\"awr-m-btn awr-m-btn--pulse\">\n          Demander un devis\n        <\/a>\n\n        <a href=\"tel:+33637201491\" class=\"awr-m-final__link\">\n          \ud83d\udcde 06 37 20 14 91\n        <\/a>\n\n        <a href=\"https:\/\/wa.me\/33637201491\" class=\"awr-m-final__link\" target=\"_blank\" rel=\"noopener noreferrer\">\n          \ud83d\udcac Me contacter sur WhatsApp \u2192\n        <\/a>\n\n      <\/div>\n\n\n    <\/div>\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<\/main>\n\n\n<!-- =========================================================\nJS \u2014 FADE + COMPARATEUR\n========================================================= -->\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const revealElements =\n    document.querySelectorAll(\".awr-m-reveal\");\n\n\n  if (!(\"IntersectionObserver\" in window)) {\n\n    revealElements.forEach(function (element) {\n      element.classList.add(\"is-visible\");\n    });\n\n  } else {\n\n    const observer =\n      new IntersectionObserver(\n        function (entries, observerInstance) {\n\n          entries.forEach(function (entry) {\n\n            if (entry.isIntersecting) {\n\n              entry.target.classList.add(\"is-visible\");\n\n              observerInstance.unobserve(\n                entry.target\n              );\n\n            }\n\n          });\n\n        },\n        {\n          threshold:0.12,\n          rootMargin:\"0px 0px -40px 0px\"\n        }\n      );\n\n\n    revealElements.forEach(function (element) {\n      observer.observe(element);\n    });\n\n  }\n\n\n  \/*\n  ==========================================\n  COMPARATEUR AVANT \/ APR\u00c8S\n  ==========================================\n  *\/\n\n  document\n    .querySelectorAll(\"[data-awr-compare]\")\n    .forEach(function (compare) {\n\n      const range =\n        compare.querySelector(\n          \".awr-m-compare__range\"\n        );\n\n      if (!range) return;\n\n\n      const updateCompare = function () {\n\n        compare.style.setProperty(\n          \"--pos\",\n          range.value + \"%\"\n        );\n\n      };\n\n\n      range.addEventListener(\n        \"input\",\n        updateCompare\n      );\n\n      range.addEventListener(\n        \"change\",\n        updateCompare\n      );\n\n\n      updateCompare();\n\n    });\n\n});\n\n<\/script>\n\n\n<!-- =========================================================\nJS \u2014 ONGLETS + HALO QUI SUIT LA SOURIS\n========================================================= -->\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  \/* halo sur les cartes *\/\n  if (!window.matchMedia(\"(hover: none)\").matches) {\n    document.querySelectorAll(\".awr-v-spot\").forEach(function (card) {\n      card.addEventListener(\"pointermove\", function (e) {\n        var r = card.getBoundingClientRect();\n        card.style.setProperty(\"--mx\", (e.clientX - r.left) + \"px\");\n        card.style.setProperty(\"--my\", (e.clientY - r.top) + \"px\");\n      });\n    });\n  }\n\n  \/* onglets accessibles (clic + fl\u00e8ches du clavier) *\/\n  document.querySelectorAll(\"[data-awr-tabs]\").forEach(function (box) {\n\n    var tabs = Array.prototype.slice.call(box.querySelectorAll('[role=\"tab\"]'));\n    var list = box.querySelector('[role=\"tablist\"]');\n\n    function select(index, focus) {\n      tabs.forEach(function (tab, i) {\n        var on = i === index;\n        var panel = document.getElementById(tab.getAttribute(\"aria-controls\"));\n        tab.setAttribute(\"aria-selected\", on ? \"true\" : \"false\");\n        tab.tabIndex = on ? 0 : -1;\n        if (panel) panel.hidden = !on;\n      });\n      list.style.setProperty(\"--tab\", index);\n      if (focus) tabs[index].focus();\n    }\n\n    tabs.forEach(function (tab, i) {\n      tab.addEventListener(\"click\", function () { select(i, false); });\n      tab.addEventListener(\"keydown\", function (e) {\n        if (e.key === \"ArrowRight\") { e.preventDefault(); select((i + 1) % tabs.length, true); }\n        if (e.key === \"ArrowLeft\")  { e.preventDefault(); select((i - 1 + tabs.length) % tabs.length, true); }\n      });\n    });\n\n  });\n\n});\n<\/script>\n\n\n<!-- =========================================================\nJSON-LD\n========================================================= -->\n\n<script type=\"application\/ld+json\">\n{\n  \"@context\": \"https:\/\/schema.org\",\n  \"@graph\": [\n    {\n      \"@type\": \"ProfessionalService\",\n      \"@id\": \"https:\/\/agencewebrusek.com\/#business\",\n      \"name\": \"Agence Web Rusek\",\n      \"alternateName\": \"AWR\",\n      \"url\": \"https:\/\/agencewebrusek.com\/\",\n      \"telephone\": \"+33637201491\",\n      \"founder\": {\n        \"@type\": \"Person\",\n        \"name\": \"Thomas Rusek\"\n      },\n      \"areaServed\": [\n        {\n          \"@type\": \"City\",\n          \"name\": \"Paris\"\n        },\n        {\n          \"@type\": \"AdministrativeArea\",\n          \"name\": \"\u00cele-de-France\"\n        }\n      ]\n    },\n    {\n      \"@type\": \"Service\",\n      \"@id\": \"https:\/\/agencewebrusek.com\/creation-site-internet\/#service\",\n      \"name\": \"Cr\u00e9ation de site internet \u00e0 Paris\",\n      \"serviceType\": \"Cr\u00e9ation de site internet : site vitrine, refonte et boutique en ligne\",\n      \"url\": \"https:\/\/agencewebrusek.com\/creation-site-internet\/\",\n      \"provider\": {\n        \"@id\": \"https:\/\/agencewebrusek.com\/#business\"\n      },\n      \"areaServed\": [\n        {\n          \"@type\": \"City\",\n          \"name\": \"Paris\"\n        },\n        {\n          \"@type\": \"AdministrativeArea\",\n          \"name\": \"\u00cele-de-France\"\n        }\n      ],\n      \"audience\": {\n        \"@type\": \"Audience\",\n        \"audienceType\": \"Ind\u00e9pendants, artisans et petites entreprises\"\n      }\n    },\n    {\n      \"@type\": \"BreadcrumbList\",\n      \"@id\": \"https:\/\/agencewebrusek.com\/creation-site-internet\/#breadcrumb\",\n      \"itemListElement\": [\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 1,\n          \"name\": \"Accueil\",\n          \"item\": \"https:\/\/agencewebrusek.com\/\"\n        },\n        {\n          \"@type\": \"ListItem\",\n          \"position\": 2,\n          \"name\": \"Cr\u00e9ation de site internet\",\n          \"item\": \"https:\/\/agencewebrusek.com\/creation-site-internet\/\"\n        }\n      ]\n    },\n    {\n      \"@type\": \"FAQPage\",\n      \"@id\": \"https:\/\/agencewebrusek.com\/creation-site-internet\/#faq\",\n      \"mainEntity\": [\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Combien co\u00fbte un site ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Comptez autour de 1 000 \u20ac TTC pour un site. Chaque projet est diff\u00e9rent : le prix exact d\u00e9pend du nombre de pages, des fonctionnalit\u00e9s, une boutique en ligne par exemple, et de ce que vous avez d\u00e9j\u00e0. Apr\u00e8s notre premier \u00e9change, vous recevez un devis d\u00e9taill\u00e9, sans engagement. Le nom de domaine et l'h\u00e9bergement s'ajoutent, avec un co\u00fbt annuel s\u00e9par\u00e9, \u00e0 votre nom.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Combien de temps faut-il pour avoir mon site ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Comptez une semaine en moyenne entre notre premier \u00e9change et la mise en ligne. Le d\u00e9lai d\u00e9pend surtout des validations : je vous envoie l'avancement au fil de l'eau et vous r\u00e9pondez quand vous avez quelques minutes.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Je n'y connais rien et je n'ai pas le temps. C'est un probl\u00e8me ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Non. Je r\u00e9dige les textes, choisis la structure et m'occupe de la mise en ligne. De votre c\u00f4t\u00e9, quelques \u00e9changes et validations suffisent.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Je n'ai ni logo ni photos. C'est un probl\u00e8me ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Non. Je peux vous accompagner pour le logo, et quelques photos r\u00e9elles de votre travail prises au t\u00e9l\u00e9phone suffisent souvent pour commencer.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"J'ai d\u00e9j\u00e0 un site. Faut-il tout refaire ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Pas forc\u00e9ment. Je commence par regarder votre site actuel et je vous indique ce qui bloque en priorit\u00e9. Si quelques corrections suffisent, inutile de tout reconstruire.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Pouvez-vous cr\u00e9er une boutique en ligne ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Oui. Catalogue de produits, paiement en ligne et gestion des commandes : je cr\u00e9e des boutiques simples \u00e0 g\u00e9rer au quotidien. Le devis d\u00e9pend surtout du nombre de produits et des fonctionnalit\u00e9s souhait\u00e9es.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Le site m'appartient-il ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Oui. Le nom de domaine et l'h\u00e9bergement sont \u00e0 votre nom. Je m'occupe de toute la mise en place, mais vous restez propri\u00e9taire de votre site.\"\n          }\n        },\n        {\n          \"@type\": \"Question\",\n          \"name\": \"Pourrai-je modifier mon site moi-m\u00eame ?\",\n          \"acceptedAnswer\": {\n            \"@type\": \"Answer\",\n            \"text\": \"Oui, si vous le souhaitez. Une formation est propos\u00e9e en option pour que vous puissiez faire vos mises \u00e0 jour. Sinon, envoyez-moi vos demandes de modification : je vous r\u00e9ponds avec un devis.\"\n          }\n        }\n      ]\n    }\n  ]\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Site vitrine \u00b7 Refonte \u00b7 Boutique en ligne Cr\u00e9ation de site internet \u00e0 Paris : un site pro, en ligne en une semaine. Votre projet Parlons de votre site Laissez vos coordonn\u00e9es, je vous rappelle pour faire le point. Pas besoin de savoir exactement ce que vous voulez. Tout ce qu&rsquo;il faut, rien de superflu. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2326,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1507","page","type-page","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1.png",1536,1024,false],"thumbnail":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1-150x150.png",150,150,true],"medium":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1-300x200.png",300,200,true],"medium_large":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1-768x512.png",768,512,true],"large":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1-1024x683.png",800,534,true],"1536x1536":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1.png",1536,1024,false],"2048x2048":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1.png",1536,1024,false],"trp-custom-language-flag":["https:\/\/agencewebrusek.com\/wp-content\/uploads\/2026\/09\/Mock-up-creation-de-site-1-18x12.png",18,12,true]},"uagb_author_info":{"display_name":"thomas.rusek.chamant@gmail.com","author_link":"https:\/\/agencewebrusek.com\/en\/author\/thomas-rusek-chamantgmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Site vitrine \u00b7 Refonte \u00b7 Boutique en ligne Cr\u00e9ation de site internet \u00e0 Paris : un site pro, en ligne en une semaine. Votre projet Parlons de votre site Laissez vos coordonn\u00e9es, je vous rappelle pour faire le point. Pas besoin de savoir exactement ce que vous voulez. Tout ce qu&rsquo;il faut, rien de superflu.&hellip;","_links":{"self":[{"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/pages\/1507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/comments?post=1507"}],"version-history":[{"count":111,"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/pages\/1507\/revisions"}],"predecessor-version":[{"id":2328,"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/pages\/1507\/revisions\/2328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/media\/2326"}],"wp:attachment":[{"href":"https:\/\/agencewebrusek.com\/en\/wp-json\/wp\/v2\/media?parent=1507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}