{"id":125,"date":"2025-10-07T18:28:04","date_gmt":"2025-10-07T18:28:04","guid":{"rendered":"https:\/\/ovaris.fr\/?page_id=125"},"modified":"2025-10-08T11:05:55","modified_gmt":"2025-10-08T11:05:55","slug":"creation-sites-web","status":"publish","type":"page","link":"https:\/\/ovaris.fr\/index.php\/creation-sites-web\/","title":{"rendered":"Cr\u00e9ation Sites Web"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"125\" class=\"elementor elementor-125\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f18c3b5 e-flex e-con-boxed e-con e-parent\" data-id=\"f18c3b5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c77152f elementor-widget elementor-widget-html\" data-id=\"c77152f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"hero-web\" class=\"hero-websites\">\r\n  <style>\r\n    .hero-websites, .hero-websites *{box-sizing:border-box}\r\n\r\n    .hero-websites{\r\n      width:100vw; max-width:100vw; margin:0!important;\r\n      padding: clamp(64px,6.5vw,110px) 0 72px;\r\n      position:relative; left:50%; transform:translateX(-50%);\r\n      color:#e9f2ff; overflow:hidden;\r\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, \"Noto Sans\";\r\n      background:\r\n        radial-gradient(1200px 600px at 15% 20%, rgba(48,213,255,0.08), transparent 60%),\r\n        radial-gradient(900px 500px at 85% 35%, rgba(122,124,255,0.10), transparent 60%),\r\n        linear-gradient(180deg,#0b1220 0%, #070d18 100%);\r\n    }\r\n    .hero-websites .wrap{max-width:1300px;margin:0 auto;padding:0 clamp(18px,3.2vw,36px)}\r\n    .hero-websites .grid{\r\n      display:grid; gap: clamp(20px,2.6vw,34px);\r\n      grid-template-columns: minmax(300px,1.1fr) minmax(320px,.9fr);\r\n      align-items:center;\r\n    }\r\n    @media (max-width:980px){ .hero-websites .grid{ grid-template-columns:1fr; } }\r\n\r\n    \/* Badge *\/\r\n    .hero-websites .badge{\r\n      display:inline-flex; align-items:center; gap:10px;\r\n      font-weight:800; letter-spacing:.35px; color:#7ce7ff;\r\n      text-transform:uppercase; margin-bottom:14px; opacity:.95;\r\n      font-size:12.5px;\r\n    }\r\n    .hero-websites .badge .i{\r\n      width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;\r\n      background:linear-gradient(135deg,#b9f1ff,#8fe5ff); color:#0aa9d5; font-size:14px;\r\n      box-shadow:inset 0 0 0 1px rgba(12,163,217,.18);\r\n    }\r\n\r\n    \/* Titre *\/\r\n    .hero-websites h1{\r\n      font-size:clamp(32px,5.2vw,64px);\r\n      font-weight:900; line-height:1.06; margin:0 0 12px; letter-spacing:.2px;\r\n      color:#c9f3ff;\r\n    }\r\n    .hero-websites h1 .soft{ color:#b8f1ff; display:block; }\r\n    .hero-websites h1 .grad{\r\n      background: linear-gradient(90deg,#30d5ff 0%, #7a7cff 100%);\r\n      -webkit-background-clip:text; background-clip:text; color:transparent; display:block;\r\n    }\r\n\r\n    .hero-websites .lead{\r\n      max-width:760px; color:#cfe1ff; opacity:.95;\r\n      font-size:clamp(15px,1.5vw,18px); line-height:1.58; margin:14px 0 24px;\r\n    }\r\n\r\n    \/* CTA *\/\r\n    .hero-websites .ctas{ display:flex; flex-wrap:wrap; gap:12px; }\r\n    .hero-websites .btn{\r\n      display:inline-flex; align-items:center; gap:10px;\r\n      border-radius:999px; padding:14px 22px;\r\n      font-weight:800; font-size:15px; text-decoration:none;\r\n      transition: transform .18s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;\r\n    }\r\n    .hero-websites .btn.primary{\r\n      background:linear-gradient(135deg,#19d3ea,#4b6bff);\r\n      color:#fff; box-shadow:0 12px 32px rgba(35,136,255,.32), inset 0 0 0 1px rgba(255,255,255,.14);\r\n    }\r\n    .hero-websites .btn.primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(35,136,255,.42), inset 0 0 0 1px rgba(255,255,255,.20); }\r\n\r\n    \/* Carte Stats droite *\/\r\n    .hero-websites .stats{\r\n      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n      border:1px solid rgba(255,255,255,.10); border-radius:22px;\r\n      padding: clamp(18px,3.2vw,30px); box-shadow:0 20px 60px rgba(0,0,0,.35);\r\n    }\r\n    .hero-websites .statsgrid{\r\n      display:grid; grid-template-columns:repeat(2, minmax(160px,1fr)); gap: clamp(16px,2.2vw,24px);\r\n    }\r\n    .hero-websites .stat{ text-align:center; }\r\n    .hero-websites .ico{\r\n      width:56px;height:56px;border-radius:14px;margin:0 auto 10px;\r\n      display:flex; align-items:center; justify-content:center; font-size:26px; color:#0ce8c0;\r\n      background: linear-gradient(135deg,#d7fff3,#c3ffe9); box-shadow:inset 0 0 0 1px rgba(12,232,192,.18);\r\n    }\r\n    .hero-websites .ico.yellow{ background:linear-gradient(135deg,#ffe9ae,#ffd36c); color:#ffb200; box-shadow:inset 0 0 0 1px rgba(255,185,0,.22); }\r\n    .hero-websites .ico.blue{ background:linear-gradient(135deg,#cfe7ff,#bcd8ff); color:#2b7bff; box-shadow:inset 0 0 0 1px rgba(43,123,255,.18); }\r\n    .hero-websites .ico.purple{ background:linear-gradient(135deg,#e4d7ff,#cdbdff); color:#8b5cf6; box-shadow:inset 0 0 0 1px rgba(139,92,246,.20); }\r\n\r\n    .hero-websites .kpi{ font-size:16px; font-weight:800; margin-bottom:2px; color:#dff3ff; }\r\n    .hero-websites .txt{ color:#bcd0ea; font-size:13px; }\r\n\r\n    \/* Reveal simple *\/\r\n    .hero-websites [data-reveal]{ opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .55s ease; }\r\n    .hero-websites [data-reveal].in{ opacity:1; transform:none; }\r\n  <\/style>\r\n\r\n  <div class=\"wrap\">\r\n    <div class=\"badge\" data-reveal>\r\n      <span class=\"i\">\u2329\u232a<\/span> CR\u00c9ATION SITES WEB\r\n    <\/div>\r\n\r\n    <div class=\"grid\">\r\n      <!-- Colonne gauche -->\r\n      <div class=\"left\" data-reveal style=\"transition-delay:80ms\">\r\n        <h1>\r\n          <span class=\"soft\">Sites web haute<\/span>\r\n          <span class=\"soft\">performance<\/span>\r\n          <span class=\"grad\">qui convertissent<\/span>\r\n        <\/h1>\r\n        <p class=\"lead\">\r\n          Cr\u00e9ation de sites web modernes, rapides et optimis\u00e9s pour transformer vos visiteurs en clients\r\n          et booster votre pr\u00e9sence digitale.\r\n        <\/p>\r\n\r\n        <div class=\"ctas\">\r\n          <a href=\"#contact\" class=\"btn primary\">Cr\u00e9er mon site web \u2192<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Colonne droite \/ Stats -->\r\n      <aside class=\"right\" data-reveal style=\"transition-delay:160ms\">\r\n        <div class=\"stats\">\r\n          <div class=\"statsgrid\">\r\n            <div class=\"stat\">\r\n              <div class=\"ico blue\">\ud83d\udc65<\/div>\r\n              <div class=\"kpi\">200+ sites cr\u00e9\u00e9s<\/div>\r\n              <div class=\"txt\">toutes industries<\/div>\r\n            <\/div>\r\n            <div class=\"stat\">\r\n              <div class=\"ico yellow\">\u23f1\ufe0f<\/div>\r\n              <div class=\"kpi\">\u2264 3s chargement<\/div>\r\n              <div class=\"txt\">Core Web Vitals<\/div>\r\n            <\/div>\r\n            <div class=\"stat\">\r\n              <div class=\"ico\">\ud83c\udfc5<\/div>\r\n              <div class=\"kpi\">98% satisfaction<\/div>\r\n              <div class=\"txt\">notes clients<\/div>\r\n            <\/div>\r\n            <div class=\"stat\">\r\n              <div class=\"ico purple\">\ud83d\udd0e<\/div>\r\n              <div class=\"kpi\">SEO optimis\u00e9<\/div>\r\n              <div class=\"txt\">technique & contenu<\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/aside>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Apparition au scroll -->\r\n  <script>\r\n    (function(){\r\n      var els = document.querySelectorAll('.hero-websites [data-reveal]');\r\n      if(!('IntersectionObserver' in window)){ els.forEach(e=>e.classList.add('in')); return; }\r\n      var io = new IntersectionObserver(entries=>{\r\n        entries.forEach(en=>{\r\n          if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); }\r\n        });\r\n      },{threshold:.25});\r\n      els.forEach(e=>io.observe(e));\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-01aa059 e-flex e-con-boxed e-con e-parent\" data-id=\"01aa059\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-367125f elementor-widget elementor-widget-html\" data-id=\"367125f\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"web-benefits\" class=\"web-benefits\">\r\n  <style>\r\n    .web-benefits, .web-benefits *{ box-sizing:border-box; }\r\n\r\n    .web-benefits{\r\n      width:100vw; max-width:100vw; margin:0!important;\r\n      padding: clamp(64px,6vw,100px) 0;\r\n      position:relative; left:50%; transform:translateX(-50%);\r\n      color:#e9f2ff; overflow:hidden;\r\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, \"Noto Sans\";\r\n      background:\r\n        radial-gradient(1200px 600px at 15% 20%, rgba(48,213,255,.08), transparent 60%),\r\n        radial-gradient(900px 500px at 85% 35%, rgba(122,124,255,.10), transparent 60%),\r\n        linear-gradient(180deg,#0b1220 0%, #070d18 100%);\r\n    }\r\n\r\n    .web-benefits .wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,36px); }\r\n\r\n    \/* Head *\/\r\n    .web-benefits .head{ text-align:center; margin-bottom: clamp(24px,3.2vw,36px); }\r\n    .web-benefits h2{\r\n      margin:0 0 8px;\r\n      font-weight:900; line-height:1.2;\r\n      font-size:clamp(26px,4.2vw,44px);\r\n      color:#cfeaff;\r\n    }\r\n    .web-benefits h2 .grad{\r\n      background: linear-gradient(90deg,#30d5ff,#7a7cff);\r\n      -webkit-background-clip:text; background-clip:text; color:transparent;\r\n    }\r\n    .web-benefits .lead{\r\n      margin:0 auto; max-width:860px;\r\n      color:#b9c9e5; font-size:clamp(15px,1.5vw,18px); line-height:1.6;\r\n    }\r\n\r\n    \/* Grid *\/\r\n    .web-benefits .grid{\r\n      display:grid; gap: clamp(16px,2vw,22px);\r\n      grid-template-columns: repeat(4, minmax(240px,1fr));\r\n      margin-top: clamp(22px,2.6vw,28px);\r\n      justify-items:center;\r\n    }\r\n    @media (max-width:1100px){ .web-benefits .grid{ grid-template-columns: repeat(2,1fr); } }\r\n    @media (max-width:640px){  .web-benefits .grid{ grid-template-columns: 1fr; } }\r\n\r\n    \/* Card *\/\r\n    .web-benefits .card{\r\n      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n      border:1px solid rgba(255,255,255,.10);\r\n      border-radius:18px; padding:18px 18px 22px;\r\n      box-shadow:0 16px 40px rgba(0,0,0,.30);\r\n      text-align:left; width:100%; max-width:420px;\r\n      opacity:0; transform: translateY(12px);\r\n      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;\r\n    }\r\n    .web-benefits .card.reveal{ opacity:1; transform:none; transition: all .55s cubic-bezier(.2,.8,.2,1); }\r\n    .web-benefits .card:hover{ transform: translateY(-6px); box-shadow:0 22px 52px rgba(0,0,0,.36); border-color:rgba(255,255,255,.18); }\r\n\r\n    \/* Icon band *\/\r\n    .web-benefits .band{\r\n      height:56px; border-radius:12px; margin-bottom:14px;\r\n      display:flex; align-items:center; gap:12px; padding:0 16px;\r\n      background: linear-gradient(135deg,#153051,#0f2745);\r\n      border:1px solid rgba(255,255,255,.08);\r\n    }\r\n    .web-benefits .icon{\r\n      width:28px;height:28px;border-radius:8px;\r\n      display:flex;align-items:center;justify-content:center; font-size:17px;\r\n      color:#0aa9d5; background:linear-gradient(135deg,#b9f1ff,#8fe5ff);\r\n      box-shadow: inset 0 0 0 1px rgba(12,163,217,.18);\r\n    }\r\n\r\n    .web-benefits h3{ margin:0 0 8px; font-size:18px; font-weight:800; color:#eaf3ff; }\r\n    .web-benefits p{ margin:0; color:#c7d6ef; font-size:15px; line-height:1.6; }\r\n  <\/style>\r\n\r\n  <div class=\"wrap\">\r\n    <div class=\"head\">\r\n      <h2>\r\n        Pourquoi choisir <span class=\"grad\">nos sites web&nbsp;?<\/span>\r\n      <\/h2>\r\n      <p class=\"lead\">Des sites web con\u00e7us pour performer et vous d\u00e9marquer de la concurrence.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"grid\">\r\n      <!-- 1 -->\r\n      <article class=\"card\" data-rv style=\"transition-delay:60ms\">\r\n        <div class=\"band\"><span class=\"icon\">\u26a1<\/span><strong>Performance Optimale<\/strong><\/div>\r\n        <h3>Vitesse et fluidit\u00e9<\/h3>\r\n        <p>Sites ultra-rapides avec des temps de chargement &lt; 3&nbsp;secondes pour am\u00e9liorer conversion et SEO.<\/p>\r\n      <\/article>\r\n\r\n      <!-- 2 -->\r\n      <article class=\"card\" data-rv style=\"transition-delay:120ms\">\r\n        <div class=\"band\"><span class=\"icon\">\ud83d\udcf1<\/span><strong>Design Responsive<\/strong><\/div>\r\n        <h3>Parfait sur tous les \u00e9crans<\/h3>\r\n        <p>Exp\u00e9rience utilisateur soign\u00e9e sur mobile, tablette et desktop, sans compromis sur la lisibilit\u00e9.<\/p>\r\n      <\/article>\r\n\r\n      <!-- 3 -->\r\n      <article class=\"card\" data-rv style=\"transition-delay:180ms\">\r\n        <div class=\"band\"><span class=\"icon\">\ud83d\udd0e<\/span><strong>SEO Optimis\u00e9<\/strong><\/div>\r\n        <h3>Visibilit\u00e9 maximale<\/h3>\r\n        <p>Structure technique, balisage et contenus optimis\u00e9s pour un r\u00e9f\u00e9rencement naturel durable sur Google.<\/p>\r\n      <\/article>\r\n\r\n      <!-- 4 -->\r\n      <article class=\"card\" data-rv style=\"transition-delay:240ms\">\r\n        <div class=\"band\"><span class=\"icon\">\ud83d\udee1\ufe0f<\/span><strong>S\u00e9curit\u00e9 Renforc\u00e9e<\/strong><\/div>\r\n        <h3>Prot\u00e9g\u00e9 en continu<\/h3>\r\n        <p>Mises \u00e0 jour, sauvegardes et protections avanc\u00e9es contre les menaces pour une pr\u00e9sence fiable.<\/p>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      const cards = document.querySelectorAll('.web-benefits [data-rv]');\r\n      if(!('IntersectionObserver' in window)){ cards.forEach(c=>c.classList.add('reveal')); return; }\r\n      const io = new IntersectionObserver((entries)=>{\r\n        entries.forEach(e=>{\r\n          if(e.isIntersecting){ e.target.classList.add('reveal'); io.unobserve(e.target); }\r\n        });\r\n      }, {threshold:.25});\r\n      cards.forEach(c=>io.observe(c));\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e74c1af e-flex e-con-boxed e-con e-parent\" data-id=\"e74c1af\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58f0c99 elementor-widget elementor-widget-html\" data-id=\"58f0c99\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"web-benefits\" class=\"web-benefits\">\r\n  <style>\r\n    .web-benefits, .web-benefits *{ box-sizing:border-box; }\r\n\r\n    .web-benefits{\r\n      width:100vw; max-width:100vw; margin:0!important;\r\n      padding: clamp(64px,6vw,100px) 0;\r\n      position:relative; left:50%; transform:translateX(-50%);\r\n      color:#e9f2ff; overflow:hidden;\r\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, \"Noto Sans\";\r\n      background:\r\n        radial-gradient(1200px 600px at 15% 20%, rgba(48,213,255,.08), transparent 60%),\r\n        radial-gradient(900px 500px at 85% 35%, rgba(122,124,255,.10), transparent 60%),\r\n        linear-gradient(180deg,#0b1220 0%, #070d18 100%);\r\n    }\r\n    .web-benefits .wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,36px); }\r\n\r\n    \/* Head *\/\r\n    .web-benefits .head{ text-align:center; margin-bottom: clamp(24px,3.2vw,36px); }\r\n    .web-benefits h2{\r\n      margin:0 0 8px; font-weight:900; line-height:1.2;\r\n      font-size:clamp(26px,4.2vw,44px); color:#cfeaff;\r\n    }\r\n    .web-benefits h2 .grad{\r\n      background: linear-gradient(90deg,#30d5ff,#7a7cff);\r\n      -webkit-background-clip:text; background-clip:text; color:transparent;\r\n    }\r\n    .web-benefits .lead{\r\n      margin:0 auto; max-width:860px;\r\n      color:#b9c9e5; font-size:clamp(15px,1.5vw,18px); line-height:1.6;\r\n      text-align:center;\r\n    }\r\n\r\n    \/* Grid *\/\r\n    .web-benefits .grid{\r\n      display:grid; gap: clamp(16px,2vw,22px);\r\n      grid-template-columns: repeat(4, minmax(240px,1fr));\r\n      margin-top: clamp(22px,2.6vw,28px);\r\n      justify-items:center;         \/* centre les cartes *\/\r\n    }\r\n    @media (max-width:1100px){ .web-benefits .grid{ grid-template-columns: repeat(2,1fr); } }\r\n    @media (max-width:640px){  .web-benefits .grid{ grid-template-columns: 1fr; } }\r\n\r\n    \/* Card (centr\u00e9e) *\/\r\n    .web-benefits .card{\r\n      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n      border:1px solid rgba(255,255,255,.10);\r\n      border-radius:18px; padding:18px 18px 22px;\r\n      box-shadow:0 16px 40px rgba(0,0,0,.30);\r\n      width:100%; max-width:420px;\r\n      text-align:center;             \/* \u2705 centre h3 + p *\/\r\n      opacity:0; transform: translateY(12px);\r\n      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;\r\n    }\r\n    .web-benefits .card.reveal{ opacity:1; transform:none; transition: all .55s cubic-bezier(.2,.8,.2,1); }\r\n    .web-benefits .card:hover{ transform: translateY(-6px); box-shadow:0 22px 52px rgba(0,0,0,.36); border-color:rgba(255,255,255,.18); }\r\n\r\n    \/* Icon band (centr\u00e9e) *\/\r\n    .web-benefits .band{\r\n      height:56px; border-radius:12px; margin:0 auto 14px;   \/* \u2705 centr\u00e9 *\/\r\n      display:flex; align-items:center; justify-content:center; gap:12px; padding:0 16px; \/* \u2705 *\/\r\n      background: linear-gradient(135deg,#153051,#0f2745);\r\n      border:1px solid rgba(255,255,255,.08);\r\n      max-width:100%;\r\n    }\r\n    .web-benefits .icon{\r\n      width:28px;height:28px;border-radius:8px;\r\n      display:flex;align-items:center;justify-content:center; font-size:17px;\r\n      color:#0aa9d5; background:linear-gradient(135deg,#b9f1ff,#8fe5ff);\r\n      box-shadow: inset 0 0 0 1px rgba(12,163,217,.18);\r\n    }\r\n\r\n    .web-benefits h3{ margin:0 0 8px; font-size:18px; font-weight:800; color:#eaf3ff; }\r\n    .web-benefits p{ margin:0 auto; color:#c7d6ef; font-size:15px; line-height:1.6; max-width:340px; } \/* \u2705 limite la largeur pour un meilleur centrage *\/\r\n  <\/style>\r\n\r\n  <div class=\"wrap\">\r\n    <div class=\"head\">\r\n      <h2>\r\n        Pourquoi choisir <span class=\"grad\">nos sites web&nbsp;?<\/span>\r\n      <\/h2>\r\n      <p class=\"lead\">Des sites web con\u00e7us pour performer et vous d\u00e9marquer de la concurrence.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"grid\">\r\n      <article class=\"card\" data-rv style=\"transition-delay:60ms\">\r\n        <div class=\"band\"><span class=\"icon\">\u26a1<\/span><strong>Performance Optimale<\/strong><\/div>\r\n        <h3>Vitesse et fluidit\u00e9<\/h3>\r\n        <p>Sites ultra-rapides avec des temps de chargement &lt; 3&nbsp;secondes pour am\u00e9liorer conversion et SEO.<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"card\" data-rv style=\"transition-delay:120ms\">\r\n        <div class=\"band\"><span class=\"icon\">\ud83d\udcf1<\/span><strong>Design Responsive<\/strong><\/div>\r\n        <h3>Parfait sur tous les \u00e9crans<\/h3>\r\n        <p>Exp\u00e9rience utilisateur soign\u00e9e sur mobile, tablette et desktop, sans compromis sur la lisibilit\u00e9.<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"card\" data-rv style=\"transition-delay:180ms\">\r\n        <div class=\"band\"><span class=\"icon\">\ud83d\udd0e<\/span><strong>SEO Optimis\u00e9<\/strong><\/div>\r\n        <h3>Visibilit\u00e9 maximale<\/h3>\r\n        <p>Structure technique, balisage et contenus optimis\u00e9s pour un r\u00e9f\u00e9rencement naturel durable sur Google.<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"card\" data-rv style=\"transition-delay:240ms\">\r\n        <div class=\"band\"><span class=\"icon\">\ud83d\udee1\ufe0f<\/span><strong>S\u00e9curit\u00e9 Renforc\u00e9e<\/strong><\/div>\r\n        <h3>Prot\u00e9g\u00e9 en continu<\/h3>\r\n        <p>Mises \u00e0 jour, sauvegardes et protections avanc\u00e9es contre les menaces pour une pr\u00e9sence fiable.<\/p>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      const cards = document.querySelectorAll('.web-benefits [data-rv]');\r\n      if(!('IntersectionObserver' in window)){ cards.forEach(c=>c.classList.add('reveal')); return; }\r\n      const io = new IntersectionObserver((entries)=>{\r\n        entries.forEach(e=>{\r\n          if(e.isIntersecting){ e.target.classList.add('reveal'); io.unobserve(e.target); }\r\n        });\r\n      }, {threshold:.25});\r\n      cards.forEach(c=>io.observe(c));\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ed3b6c e-flex e-con-boxed e-con e-parent\" data-id=\"9ed3b6c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8743561 elementor-widget elementor-widget-html\" data-id=\"8743561\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"web-services\" class=\"web-services\">\r\n  <style>\r\n    .web-services, .web-services *{ box-sizing:border-box; }\r\n\r\n    .web-services{\r\n      width:100vw; max-width:100vw; margin:0!important;\r\n      padding: clamp(64px,6vw,100px) 0;\r\n      position:relative; left:50%; transform:translateX(-50%);\r\n      color:#e9f2ff; overflow:hidden;\r\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, \"Noto Sans\";\r\n      background:\r\n        radial-gradient(1200px 600px at 15% 20%, rgba(48,213,255,.08), transparent 60%),\r\n        radial-gradient(900px 500px at 85% 35%, rgba(122,124,255,.10), transparent 60%),\r\n        linear-gradient(180deg,#0b1220 0%, #070d18 100%);\r\n    }\r\n    .web-services .wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,36px); }\r\n\r\n    \/* Head *\/\r\n    .web-services .head{ text-align:center; margin-bottom: clamp(24px,3vw,36px); }\r\n    .web-services h2{\r\n      margin:0 0 6px; font-weight:900; line-height:1.15;\r\n      font-size:clamp(26px,4.4vw,44px); color:#cfeaff;\r\n    }\r\n    .web-services h2 .grad{\r\n      background: linear-gradient(90deg,#30d5ff,#7a7cff);\r\n      -webkit-background-clip:text; background-clip:text; color:transparent;\r\n    }\r\n    .web-services .lead{\r\n      margin:0 auto; max-width:840px;\r\n      color:#b9c9e5; font-size:clamp(15px,1.6vw,18px); line-height:1.6;\r\n    }\r\n\r\n    \/* List \/ Cards *\/\r\n    .svc-list{ display:flex; flex-direction:column; gap:16px; margin-top: clamp(22px,2.6vw,30px); }\r\n    .svc-card{\r\n      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n      border:1px solid rgba(255,255,255,.10);\r\n      border-radius:16px; overflow:hidden;\r\n      box-shadow:0 16px 40px rgba(0,0,0,.30);\r\n      opacity:0; transform: translateY(12px);\r\n      transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;\r\n    }\r\n    .svc-card.reveal{ opacity:1; transform:none; transition: all .55s cubic-bezier(.2,.8,.2,1); }\r\n    .svc-card:hover{ border-color: rgba(255,255,255,.18); box-shadow:0 22px 52px rgba(0,0,0,.36); }\r\n\r\n    .svc-head{\r\n      display:grid; grid-template-columns: 1fr auto; gap:14px;\r\n      align-items:center; padding:18px; cursor:pointer;\r\n    }\r\n    .svc-title{ font-weight:800; font-size:18px; color:#eaf3ff; margin:0 0 6px; }\r\n    .svc-desc{ color:#c7d6ef; font-size:14px; margin:0 0 10px; }\r\n\r\n    .chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }\r\n    .chips .label{ color:#8ddfff; font-weight:800; font-size:12px; margin-right:6px; }\r\n    .chip{\r\n      display:inline-flex; align-items:center; gap:8px;\r\n      padding:7px 10px; border-radius:999px; font-size:12px; color:#d0eaff;\r\n      background: linear-gradient(135deg,#153051,#0f2745); border:1px solid rgba(255,255,255,.08);\r\n    }\r\n    .chip:before{\r\n      content:\"\"; width:8px; height:8px; border-radius:50%;\r\n      background: linear-gradient(135deg,#30d5ff,#7a7cff);\r\n      box-shadow:0 0 8px rgba(48,213,255,.6);\r\n    }\r\n\r\n    .svc-toggle{\r\n      width:34px; height:34px; border-radius:10px;\r\n      display:flex; align-items:center; justify-content:center;\r\n      background: rgba(255,255,255,.06);\r\n      border:1px solid rgba(255,255,255,.12); color:#6ee7f9;\r\n      transition: transform .22s ease, background .22s ease;\r\n    }\r\n    .svc-card.open .svc-toggle{ transform: rotate(180deg); background: rgba(255,255,255,.10); }\r\n\r\n    .svc-body{\r\n      overflow:hidden; max-height:0; opacity:0;\r\n      transition:max-height .35s ease, opacity .35s ease;\r\n      border-top:1px solid rgba(255,255,255,.06);\r\n    }\r\n    .svc-card.open .svc-body{ max-height:800px; opacity:1; }\r\n    .svc-inner{ padding:16px 18px 18px 18px; }\r\n\r\n    .svc-two{ display:grid; gap:16px; grid-template-columns: 1fr 1fr; }\r\n    @media (max-width:820px){ .svc-two{ grid-template-columns:1fr; } }\r\n\r\n    .svc-box{\r\n      background: rgba(255,255,255,.04);\r\n      border:1px solid rgba(255,255,255,.08);\r\n      border-radius:12px; padding:14px 16px;\r\n    }\r\n    .svc-box h4{\r\n      margin:0 0 10px; font-size:14px; color:#9bdcff;\r\n      text-transform:uppercase; letter-spacing:.4px;\r\n    }\r\n    .svc-box ul{ margin:0; padding-left:18px; display:grid; gap:8px; }\r\n    .svc-box li{ font-size:14px; color:#d5e6ff; line-height:1.5; }\r\n    .svc-box li::marker{ color:#24d1ff; }\r\n    .svc-meta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }\r\n    .meta{\r\n      font-size:12px; color:#b9c9e5; padding:6px 10px; border-radius:999px;\r\n      border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);\r\n    }\r\n  <\/style>\r\n\r\n  <div class=\"wrap\">\r\n    <div class=\"head\">\r\n      <h2>Nos services <span class=\"grad\">de cr\u00e9ation web<\/span><\/h2>\r\n      <p class=\"lead\">Des solutions adapt\u00e9es \u00e0 tous vos besoins digitaux \u2014 du site vitrine \u00e9l\u00e9gant \u00e0 la plateforme e-commerce performante, en passant par les applications m\u00e9tier et la modernisation.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"svc-list\">\r\n\r\n      <!-- 1. Sites Vitrine Premium -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">Sites Vitrine Premium<\/div>\r\n            <p class=\"svc-desc\">Sites web \u00e9l\u00e9gants et professionnels pour pr\u00e9senter votre entreprise avec impact.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Pr\u00e9sence web professionnelle<\/span>\r\n              <span class=\"chip\">Cr\u00e9dibilit\u00e9 digitale<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Design sur-mesure conforme \u00e0 votre branding<\/li>\r\n                  <li>Pages cl\u00e9s (Accueil, \u00c0 propos, Services, Contact\u2026)<\/li>\r\n                  <li>Optimisation SEO on-page (balisage, vitesse, s\u00e9mantique)<\/li>\r\n                  <li>Formulaires & int\u00e9grations (CRM \/ Emailing)<\/li>\r\n                  <li>Configuration RGPD & Analytics<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Dur\u00e9e : 2\u20134 sem.<\/span>\r\n                  <span class=\"meta\">Livrables : maquettes + site en ligne<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Pr\u00e9sence web professionnelle<\/li>\r\n                  <li>Cr\u00e9dibilit\u00e9 & image de marque<\/li>\r\n                  <li>G\u00e9n\u00e9ration de leads qualifi\u00e9s<\/li>\r\n                  <li>Visibilit\u00e9 en ligne<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 2. E-commerce Performant -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">E-commerce Performant<\/div>\r\n            <p class=\"svc-desc\">Boutiques en ligne compl\u00e8tes avec gestion des produits, commandes et paiements s\u00e9curis\u00e9s.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Vente en ligne<\/span>\r\n              <span class=\"chip\">Expansion commerciale<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Catalogue produits, variations, stocks & taxes<\/li>\r\n                  <li>Paiements s\u00e9curis\u00e9s (Stripe\/PayPal), CGV & facturation<\/li>\r\n                  <li>Funnel de conversion optimis\u00e9 (UX, upsell, relance panier)<\/li>\r\n                  <li>Exp\u00e9dition, points relais, int\u00e9grations ERP\/CRM<\/li>\r\n                  <li>SEO e-commerce & Core Web Vitals<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Dur\u00e9e : 4\u20138 sem.<\/span>\r\n                  <span class=\"meta\">Stack : WooCommerce \/ Shopify \/ Headless<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Canal de vente en ligne<\/li>\r\n                  <li>Optimisation du taux de conversion<\/li>\r\n                  <li>Automatisation commandes & logistique<\/li>\r\n                  <li>Scalabilit\u00e9 et performance<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 3. Applications Web M\u00e9tier -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">Applications Web M\u00e9tier<\/div>\r\n            <p class=\"svc-desc\">Solutions web sur-mesure pour digitaliser vos processus et booster la productivit\u00e9.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Digitalisation des processus<\/span>\r\n              <span class=\"chip\">Gestion des donn\u00e9es<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Ateliers UX & sp\u00e9cifications fonctionnelles<\/li>\r\n                  <li>D\u00e9veloppement (React\/Next, Node, APIs REST\/GraphQL)<\/li>\r\n                  <li>Auth, r\u00f4les, journalisation & conformit\u00e9<\/li>\r\n                  <li>Int\u00e9grations (ERP\/CRM, iPaaS, RPA)<\/li>\r\n                  <li>Tableaux de bord & exports<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Dur\u00e9e : 6\u201312 sem.+<\/span>\r\n                  <span class=\"meta\">Livrables : MVP + docs techniques<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Suppression des t\u00e2ches manuelles<\/li>\r\n                  <li>Tra\u00e7abilit\u00e9 & qualit\u00e9 des donn\u00e9es<\/li>\r\n                  <li>Gains de productivit\u00e9<\/li>\r\n                  <li>Interop\u00e9rabilit\u00e9 du SI<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 4. Refonte & Modernisation -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">Refonte & Modernisation<\/div>\r\n            <p class=\"svc-desc\">Transformation de votre site existant avec les derni\u00e8res technologies et un design actuel.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Site obsol\u00e8te<\/span>\r\n              <span class=\"chip\">Performance d\u00e9grad\u00e9e<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Affectation d\u2019un nouveau design (UI\/UX)<\/li>\r\n                  <li>Migrations (contenus, URLs, SEO & redirections)<\/li>\r\n                  <li>Optimisation Core Web Vitals & accessibilit\u00e9<\/li>\r\n                  <li>Mise \u00e0 jour th\u00e8me\/plugins & s\u00e9curit\u00e9<\/li>\r\n                  <li>Recette & mise en prod sans perte de SEO<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Dur\u00e9e : 3\u20136 sem.<\/span>\r\n                  <span class=\"meta\">Livrables : audit + refonte en ligne<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Modernisation visuelle<\/li>\r\n                  <li>Am\u00e9lioration de la vitesse<\/li>\r\n                  <li>Compatibilit\u00e9 mobile<\/li>\r\n                  <li>Rattrapage SEO<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 5. Landing Pages & Funnels -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">Landing Pages & Funnels<\/div>\r\n            <p class=\"svc-desc\">Pages d\u2019acquisition rapides et persuasives, pr\u00eates pour vos campagnes marketing.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">G\u00e9n\u00e9ration de leads<\/span>\r\n              <span class=\"chip\">Campagnes Ads<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Copywriting & sections test\u00e9es (AIDA)<\/li>\r\n                  <li>Int\u00e9grations CRM\/Emailing & tracking<\/li>\r\n                  <li>AB-testing & heatmaps (en option)<\/li>\r\n                  <li>Temps de chargement &lt; 2\u20133s<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Dur\u00e9e : 1\u20133 sem.<\/span>\r\n                  <span class=\"meta\">Livrables : LP + tracking<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Acquisition rapide<\/li>\r\n                  <li>Optimisation du CPA<\/li>\r\n                  <li>Alignement message-march\u00e9<\/li>\r\n                  <li>Mesure & conversion<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 6. Maintenance & Support -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">Maintenance & Support<\/div>\r\n            <p class=\"svc-desc\">Mises \u00e0 jour, sauvegardes, s\u00e9curit\u00e9 et petites \u00e9volutions \u2014 en continu.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Fiabilit\u00e9<\/span>\r\n              <span class=\"chip\">\u00c9volutivit\u00e9<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Mises \u00e0 jour CMS \/ plugins<\/li>\r\n                  <li>Sauvegardes & restauration<\/li>\r\n                  <li>Supervision, uptime & correctifs<\/li>\r\n                  <li>Tickets d\u2019\u00e9volutions mineures<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Forfait mensuel<\/span>\r\n                  <span class=\"meta\">SLA selon plan<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Continuit\u00e9 de service<\/li>\r\n                  <li>R\u00e9duction du risque<\/li>\r\n                  <li>\u00c9volutions contr\u00f4l\u00e9es<\/li>\r\n                  <li>Co\u00fbts pr\u00e9visibles<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 7. SEO Technique & Performance -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">SEO Technique & Performance<\/div>\r\n            <p class=\"svc-desc\">Audit SEO complet + optimisation Core Web Vitals pour un meilleur ranking.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Visibilit\u00e9 Google<\/span>\r\n              <span class=\"chip\">Vitesse & CWV<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Audit technique (logs, crawl, maillage, CWV)<\/li>\r\n                  <li>Optimisation images, code, cache, CDN<\/li>\r\n                  <li>Correctifs erreurs & redirections<\/li>\r\n                  <li>Roadmap prioris\u00e9e SEO<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">Dur\u00e9e : 2\u20135 sem.<\/span>\r\n                  <span class=\"meta\">Livrables : audit + impl\u00e9mentations<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Am\u00e9lioration des positions<\/li>\r\n                  <li>Vitesse & UX<\/li>\r\n                  <li>R\u00e9duction du taux de rebond<\/li>\r\n                  <li>Gain organique durable<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n      <!-- 8. H\u00e9bergement & S\u00e9curit\u00e9 -->\r\n      <article class=\"svc-card\" data-rv>\r\n        <div class=\"svc-head\" role=\"button\" aria-expanded=\"false\" tabindex=\"0\">\r\n          <div>\r\n            <div class=\"svc-title\">H\u00e9bergement & S\u00e9curit\u00e9<\/div>\r\n            <p class=\"svc-desc\">Infra manag\u00e9e, CDN, pare-feu applicatif, SSL et sauvegardes \u2014 cl\u00e9 en main.<\/p>\r\n            <div class=\"chips\">\r\n              <span class=\"label\">Besoins adress\u00e9s :<\/span>\r\n              <span class=\"chip\">Performance<\/span>\r\n              <span class=\"chip\">Protection<\/span>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"svc-toggle\">\u2304<\/div>\r\n        <\/div>\r\n        <div class=\"svc-body\" aria-hidden=\"true\">\r\n          <div class=\"svc-inner\">\r\n            <div class=\"svc-two\">\r\n              <div class=\"svc-box\">\r\n                <h4>Inclus dans ce service<\/h4>\r\n                <ul>\r\n                  <li>Serveurs optimis\u00e9s + CDN<\/li>\r\n                  <li>SSL, WAF, monitoring & alertes<\/li>\r\n                  <li>Sauvegardes & restauration<\/li>\r\n                  <li>Durcissement s\u00e9curit\u00e9 & patching<\/li>\r\n                <\/ul>\r\n                <div class=\"svc-meta\">\r\n                  <span class=\"meta\">SaaS \/ Cloud manag\u00e9<\/span>\r\n                  <span class=\"meta\">SLA selon plan<\/span>\r\n                <\/div>\r\n              <\/div>\r\n              <div class=\"svc-box\">\r\n                <h4>Besoins adress\u00e9s<\/h4>\r\n                <ul>\r\n                  <li>Temps de chargement stables<\/li>\r\n                  <li>Disponibilit\u00e9 & fiabilit\u00e9<\/li>\r\n                  <li>Protection contre les menaces<\/li>\r\n                  <li>Confiance des utilisateurs<\/li>\r\n                <\/ul>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/article>\r\n\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      const cards = document.querySelectorAll('.web-services .svc-card');\r\n\r\n      \/\/ Reveal on scroll\r\n      if('IntersectionObserver' in window){\r\n        const io = new IntersectionObserver((entries)=>{\r\n          entries.forEach(e=>{\r\n            if(e.isIntersecting){ e.target.classList.add('reveal'); io.unobserve(e.target); }\r\n          });\r\n        },{threshold:.2});\r\n        cards.forEach((c,i)=>{ c.style.transitionDelay = (i*80)+'ms'; io.observe(c); });\r\n      } else { cards.forEach(c=>c.classList.add('reveal')); }\r\n\r\n      \/\/ Accordion one-at-a-time\r\n      function toggle(card){\r\n        const isOpen = card.classList.contains('open');\r\n        cards.forEach(c=>{\r\n          c.classList.remove('open');\r\n          const h = c.querySelector('.svc-head');\r\n          const b = c.querySelector('.svc-body');\r\n          if(h){ h.setAttribute('aria-expanded','false'); }\r\n          if(b){ b.setAttribute('aria-hidden','true'); }\r\n        });\r\n        if(!isOpen){\r\n          card.classList.add('open');\r\n          const h = card.querySelector('.svc-head');\r\n          const b = card.querySelector('.svc-body');\r\n          if(h){ h.setAttribute('aria-expanded','true'); }\r\n          if(b){ b.setAttribute('aria-hidden','false'); }\r\n        }\r\n      }\r\n      cards.forEach(card=>{\r\n        const head = card.querySelector('.svc-head');\r\n        head.addEventListener('click', ()=> toggle(card));\r\n        head.addEventListener('keypress', e=>{\r\n          if(e.key==='Enter' || e.key===' '){ e.preventDefault(); toggle(card); }\r\n        });\r\n      });\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-adab939 e-flex e-con-boxed e-con e-parent\" data-id=\"adab939\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9027609 elementor-widget elementor-widget-html\" data-id=\"9027609\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"stack\" class=\"techs-section\">\r\n  <style>\r\n    .techs-section, .techs-section *{ box-sizing:border-box; }\r\n\r\n    .techs-section{\r\n      width:100vw; max-width:100vw; margin:0!important;\r\n      padding: clamp(64px,6vw,100px) 0;\r\n      position:relative; left:50%; transform:translateX(-50%);\r\n      color:#e9f2ff; overflow:hidden;\r\n      font-family: ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, \"Noto Sans\";\r\n      background:\r\n        radial-gradient(1200px 600px at 15% 20%, rgba(48,213,255,.08), transparent 60%),\r\n        radial-gradient(900px 500px at 85% 35%, rgba(122,124,255,.10), transparent 60%),\r\n        linear-gradient(180deg,#0b1220 0%, #070d18 100%);\r\n    }\r\n    .techs-wrap{ max-width:1200px; margin:0 auto; padding:0 clamp(18px,4vw,36px); }\r\n\r\n    \/* Head *\/\r\n    .techs-head{ text-align:center; margin-bottom: clamp(28px,3.2vw,40px); }\r\n    .techs-head h2{\r\n      margin:0 0 10px; line-height:1.15; font-weight:900;\r\n      font-size:clamp(28px,4.4vw,48px); color:#cfeaff;\r\n    }\r\n    .techs-head h2 .grad{\r\n      background: linear-gradient(90deg,#30d5ff,#7a7cff);\r\n      -webkit-background-clip:text; background-clip:text; color:transparent;\r\n    }\r\n    .techs-head .sub{\r\n      margin:0; color:#b9c9e5; font-size:clamp(15px,1.6vw,18px);\r\n    }\r\n\r\n    \/* Grid *\/\r\n    .techs-grid{\r\n      display:grid; gap: clamp(14px,2vw,18px);\r\n      grid-template-columns: repeat(6, minmax(180px,1fr));\r\n      justify-items:stretch; align-items:stretch;\r\n    }\r\n    @media (max-width:1200px){ .techs-grid{ grid-template-columns: repeat(3, 1fr); } }\r\n    @media (max-width:640px){  .techs-grid{ grid-template-columns: repeat(2, 1fr); } }\r\n\r\n    \/* Card *\/\r\n    .tech{\r\n      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));\r\n      border:1px solid rgba(255,255,255,.10);\r\n      border-radius:16px; padding:22px 18px; text-align:center;\r\n      box-shadow:0 16px 40px rgba(0,0,0,.30);\r\n      opacity:0; transform: translateY(12px);\r\n      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;\r\n    }\r\n    .tech.reveal{ opacity:1; transform:none; transition: all .55s cubic-bezier(.2,.8,.2,1); }\r\n    .tech:hover{ transform: translateY(-6px); box-shadow:0 22px 52px rgba(0,0,0,.36); border-color:rgba(255,255,255,.18); }\r\n\r\n    .tech .icon{\r\n      width:56px; height:56px; border-radius:14px; margin:0 auto 12px;\r\n      display:flex; align-items:center; justify-content:center;\r\n      font-size:26px; color:#0aa9d5;\r\n      background:linear-gradient(135deg,#b9f1ff,#8fe5ff);\r\n      box-shadow: inset 0 0 0 1px rgba(12,163,217,.18);\r\n    }\r\n    .tech h3{ margin:0 0 6px; font-size:18px; font-weight:800; color:#eaf3ff; }\r\n    .tech p{ margin:0; color:#c7d6ef; font-size:14px; line-height:1.55; }\r\n  <\/style>\r\n\r\n  <div class=\"techs-wrap\">\r\n    <div class=\"techs-head\">\r\n      <h2><span class=\"grad\">Technologies<\/span><br>que nous ma\u00eetrisons<\/h2>\r\n      <p class=\"sub\">Un stack moderne, performant et durable pour vos projets digitaux.<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"techs-grid\">\r\n      <article class=\"tech\" data-rv style=\"transition-delay:60ms\">\r\n        <div class=\"icon\">\ud83c\udf10<\/div>\r\n        <h3>WordPress<\/h3>\r\n        <p>CMS flexible et puissant<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"tech\" data-rv style=\"transition-delay:120ms\">\r\n        <div class=\"icon\">\u2329\u232a<\/div>\r\n        <h3>React<\/h3>\r\n        <p>Interface utilisateur moderne<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"tech\" data-rv style=\"transition-delay:180ms\">\r\n        <div class=\"icon\">\u26a1<\/div>\r\n        <h3>Next.js<\/h3>\r\n        <p>Framework haute performance<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"tech\" data-rv style=\"transition-delay:240ms\">\r\n        <div class=\"icon\">\ud83d\uded2<\/div>\r\n        <h3>WooCommerce<\/h3>\r\n        <p>E-commerce WordPress<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"tech\" data-rv style=\"transition-delay:300ms\">\r\n        <div class=\"icon\">\ud83c\udfa8<\/div>\r\n        <h3>Tailwind CSS<\/h3>\r\n        <p>Design system moderne<\/p>\r\n      <\/article>\r\n\r\n      <article class=\"tech\" data-rv style=\"transition-delay:360ms\">\r\n        <div class=\"icon\">\u2699\ufe0f<\/div>\r\n        <h3>Node.js<\/h3>\r\n        <p>Backend performant<\/p>\r\n      <\/article>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    (function(){\r\n      const items = document.querySelectorAll('.techs-section [data-rv]');\r\n      if(!('IntersectionObserver' in window)){ items.forEach(i=>i.classList.add('reveal')); return; }\r\n      const io = new IntersectionObserver((entries)=>{\r\n        entries.forEach(e=>{\r\n          if(e.isIntersecting){ e.target.classList.add('reveal'); io.unobserve(e.target); }\r\n        });\r\n      }, {threshold:.2});\r\n      items.forEach(i=>io.observe(i));\r\n    })();\r\n  <\/script>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2329\u232a CR\u00c9ATION SITES WEB Sites web haute performance qui convertissent Cr\u00e9ation de sites web modernes, rapides et optimis\u00e9s pour transformer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-125","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/pages\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":5,"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/pages\/125\/revisions"}],"predecessor-version":[{"id":158,"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/pages\/125\/revisions\/158"}],"wp:attachment":[{"href":"https:\/\/ovaris.fr\/index.php\/wp-json\/wp\/v2\/media?parent=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}