{"id":2993,"date":"2022-06-22T08:36:02","date_gmt":"2022-06-22T08:36:02","guid":{"rendered":"https:\/\/velonweb.com\/services\/"},"modified":"2026-01-31T15:11:52","modified_gmt":"2026-01-31T15:11:52","slug":"services","status":"publish","type":"page","link":"https:\/\/velonweb.com\/fr\/services\/","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2993\" class=\"elementor elementor-2993 elementor-1354\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d4bec9 e-con-full e-flex e-con e-parent\" data-id=\"8d4bec9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c38c013 elementor-widget elementor-widget-html\" data-id=\"c38c013\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"terminal-loader\">\n  <div class=\"terminal-header\">\n    <div class=\"terminal-title\">VelonWeb<\/div>\n    <div class=\"terminal-controls\">\n      <div class=\"control close\"><\/div>\n      <div class=\"control minimize\"><\/div>\n      <div class=\"control maximize\"><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"text-container\">\n    <div class=\"text-line\" id=\"line1\"><\/div>\n    <div class=\"text-line\" id=\"line2\"><\/div>\n    <div class=\"cursor\"><\/div>\n  <\/div>\n<\/div>\n\n<style>\n@keyframes blinkCursor {\n  50% {\n    opacity: 0;\n  }\n}\n\n.terminal-loader {\n  border: 0.1em solid #333;\n  background-color: #1a1a1a;\n  color: #748D92;\n  font-family: \"Courier New\", Courier, monospace;\n  font-weight: bold;\n  font-size: 1em;\n  padding: 1.5em 1em;\n  width: 48em;\n  max-width: 95vw;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n  border-radius: 4px;\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n  direction: ltr; \/* \u2705 \u0645\u0646 \u0627\u0644\u064a\u0633\u0627\u0631 \u0644\u0644\u064a\u0645\u064a\u0646 *\/\n  text-align: left;\n  margin: auto;\n}\n\n.terminal-header {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 1.5em;\n  background-color: #333;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  padding: 0 0.4em;\n  box-sizing: border-box;\n}\n\n.terminal-controls {\n  float: right;\n}\n\n.control {\n  display: inline-block;\n  width: 0.6em;\n  height: 0.6em;\n  margin-left: 0.4em;\n  border-radius: 50%;\n  background-color: #777;\n}\n\n.control.close {\n  background-color: #e33;\n}\n\n.control.minimize {\n  background-color: #ee0;\n}\n\n.control.maximize {\n  background-color: #0b0;\n}\n\n.terminal-title {\n  float: left;\n  line-height: 1.5em;\n  color: #eee;\n}\n\n.text-container {\n  margin-top: 2em;\n  font-size: 1.1em;\n  position: relative;\n  min-height: 4em;\n}\n\n.text-line {\n  display: block;\n  white-space: normal;\n  word-break: break-word;\n  overflow-wrap: break-word;\n  font-weight: bold;\n  overflow: hidden;\n}\n\n.cursor {\n  position: absolute;\n  bottom: 0;\n  right: auto;\n  left: 0; \/* \u2705 \u0627\u0644\u0645\u0624\u0634\u0631 \u064a\u0628\u062f\u0623 \u0645\u0646 \u0627\u0644\u064a\u0633\u0627\u0631 *\/\n  width: 0.5em;\n  height: 1.2em;\n  background-color: #748D92;\n  animation: blinkCursor 0.7s infinite;\n  opacity: 0;\n}\n\n\/* Animation *\/\n@keyframes writeLine1 {\n  0% { width: 0; }\n  100% { width: 100%; }\n}\n\n@keyframes writeLine2 {\n  0% { width: 0; }\n  100% { width: 100%; }\n}\n\n@keyframes moveCursor {\n  0% { bottom: 0; left: 0; }\n  50% { bottom: 0; left: 0; }\n  51% { bottom: -1.3em; left: 0; opacity: 1; }\n  100% { bottom: -1.3em; left: 0; opacity: 1; }\n}\n\n#line1 {\n  animation: writeLine1 4s forwards;\n}\n\n#line2 {\n  width: 0;\n  animation: writeLine2 4s forwards;\n  animation-delay: 4s;\n}\n\n.cursor {\n  animation: \n    blinkCursor 0.7s infinite,\n    moveCursor 8s forwards;\n}\n\n\/* Responsive *\/\n@media (max-width: 600px) {\n  .terminal-loader {\n    font-size: 0.95em;\n    padding: 1.2em 1em;\n  }\n\n  .text-container {\n    font-size: 1em;\n    min-height: 5em;\n  }\n\n  .cursor {\n    display: none;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  const line1 = document.getElementById('line1');\n  const line2 = document.getElementById('line2');\n  const cursor = document.querySelector('.cursor');\n\n  const fullText1 = \"Chez VelonWeb, nous offrons des solutions professionnelles de cr\u00e9ation de sites web \u00e0 des prix comp\u00e9titifs\";\n  const fullText2 = \"et de haute qualit\u00e9, pour vous aider \u00e0 b\u00e2tir une pr\u00e9sence en ligne solide refl\u00e9tant le professionnalisme de votre projet.\";\n\n  cursor.style.opacity = '1';\n\n  let i = 0;\n  const typeLine1 = setInterval(() => {\n    line1.textContent = fullText1.substring(0, i);\n    i++;\n    if (i > fullText1.length) {\n      clearInterval(typeLine1);\n      let j = 0;\n      const typeLine2 = setInterval(() => {\n        line2.textContent = fullText2.substring(0, j);\n        j++;\n        if (j > fullText2.length) {\n          clearInterval(typeLine2);\n          cursor.style.opacity = '0';\n        }\n      }, 70);\n    }\n  }, 70);\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-756cee74 e-flex e-con-boxed e-con e-parent\" data-id=\"756cee74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-34cb18a6 e-con-full e-flex e-con e-child\" data-id=\"34cb18a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69c35478 ct-advanced-heading elementor-widget elementor-widget-heading\" data-id=\"69c35478\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Forfaits<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-174a1953 e-con-full e-flex e-con e-child\" data-id=\"174a1953\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cae6a45 elementor-align-left elementor-mobile-align-center elementor-widget elementor-widget-button\" data-id=\"cae6a45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-md\" href=\"https:\/\/velonweb.com\/fr\/contact\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Composez votre propre forfait<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d00c75 e-grid e-con-boxed e-con e-parent\" data-id=\"4d00c75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29f81481 elementor-widget elementor-widget-html\" data-id=\"29f81481\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Forfait Lancement\n          <\/h3>\n         <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            Un forfait id\u00e9al pour ceux qui ont besoin d\u2019une page professionnelle pr\u00e9sentant l\u2019entreprise et ses services de fa\u00e7on claire et concise.\n          <\/p>\n          \n\n          <!-- Services inclus -->\n          <div class=\"services-grid mt-6\">\n            <!-- Colonne 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception d\u2019un site une page<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Site en une seule langue<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Nom de domaine s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">H\u00e9bergement s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception avec mod\u00e8le pr\u00eat \u00e0 l\u2019emploi<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Design interactif (transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible avec tous les appareils<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Colonne 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulaire de contact simple<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Int\u00e9gration Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Liens vers les r\u00e9seaux sociaux<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Configuration SEO de base<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Maintenance et ajustements de base pendant l\u2019abonnement<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Assistance technique continue durant l\u2019abonnement<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Services non inclus -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">E-mails professionnels<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Int\u00e9gration d\u2019un bouton WhatsApp direct<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Ajout du contenu de pr\u00e9sentation<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Page d\u2019avis sur l\u2019entreprise\/le service<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Conception d\u2019un profil de pr\u00e9sentation \u00e9lectronique<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Affichage des avis clients<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Contr\u00f4le complet du site avec formation de base<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Bouton d\u2019abonnement -->\n          <div class=\"mt-1 text-center\">\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05a90a4 elementor-widget elementor-widget-html\" data-id=\"05a90a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Forfait Essentiel\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            Un forfait id\u00e9al pour les petites entreprises ou les particuliers souhaitant une pr\u00e9sence num\u00e9rique simple et professionnelle.\n          <\/p>\n         \n          <!-- Services inclus -->\n          <div class=\"services-grid mt-6\">\n            <!-- Colonne 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception d\u2019un site de 4 pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Site en une seule langue<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Nom de domaine s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">H\u00e9bergement s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception avec mod\u00e8le pr\u00eat \u00e0 l\u2019emploi<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Design interactif (transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible avec tous les appareils<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Colonne 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulaire de contact<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Int\u00e9gration Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Liens vers les r\u00e9seaux sociaux<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Configuration SEO de base<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Maintenance et ajustements de base pendant l\u2019abonnement<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Assistance technique continue durant l\u2019abonnement<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Services non inclus -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">E-mails professionnels<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Int\u00e9gration d\u2019un bouton WhatsApp direct<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Ajout du contenu de pr\u00e9sentation<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Page d\u2019avis sur l\u2019entreprise\/le service<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Conception d\u2019un profil de pr\u00e9sentation \u00e9lectronique<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Affichage des avis clients<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Contr\u00f4le complet du site avec formation de base<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Bouton d\u2019abonnement -->\n          <div class=\"mt-1 text-center\">\n\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5558bc52 e-flex e-con-boxed e-con e-parent\" data-id=\"5558bc52\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-41c5c2e7 e-con-full e-flex e-con e-child\" data-id=\"41c5c2e7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6ae7d2a1 elementor-widget elementor-widget-html\" data-id=\"6ae7d2a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Forfait Avanc\u00e9\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            Un forfait complet pour les organisations ayant besoin d\u2019un site bilingue, d\u2019un aspect professionnel et de fonctionnalit\u00e9s suppl\u00e9mentaires.\n          <\/p>\n         \n\n          <!-- Services inclus -->\n          <div class=\"services-grid mt-6\">\n            <!-- Colonne 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception d\u2019un site jusqu\u2019\u00e0 6 pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Site bilingue<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Nom de domaine s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">H\u00e9bergement s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception personnalis\u00e9e des pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Design interactif (transitions)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible avec tous les appareils<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulaire de contact<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Affichage des avis clients<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Colonne 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Int\u00e9gration Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Liens vers les r\u00e9seaux sociaux<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">SEO de base et optimis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Deux e-mails professionnels<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Int\u00e9gration d\u2019un bouton WhatsApp direct<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Ajout du contenu de pr\u00e9sentation<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Page d\u2019avis sur l\u2019entreprise\/le service<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Maintenance et ajustements de base pendant l\u2019abonnement<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Assistance technique continue durant l\u2019abonnement<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Services non inclus -->\n          <div class=\"mt-6\">\n            <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2\">\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Conception d\u2019un profil de pr\u00e9sentation \u00e9lectronique<\/p>\n              <\/div>\n              <div class=\"service-item excluded\">\n                <div class=\"service-icon excluded\">\n                  <svg stroke=\"red\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                    <path d=\"M6 18L18 6M6 6l12 12\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                  <\/svg>\n                <\/div>\n                <p class=\"text-sm line-through\">Contr\u00f4le complet du site avec formation de base<\/p>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-652fca27 e-con-full e-flex e-con e-child\" data-id=\"652fca27\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-297f12c7 elementor-widget elementor-widget-html\" data-id=\"297f12c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\">\n  <style>\n    body {\n      font-family: 'Almarai', sans-serif;\n      text-align: left;\n    }\n    .card-bg-advanced {\n      background: linear-gradient(to bottom, #393E46, #A5BFCC) padding-box,\n                  linear-gradient(to right, #748D92, transparent) border-box;\n      border: 2px solid transparent;\n    }\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    .animated-border-advanced {\n      position: absolute;\n      top: -150%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      animation: border-flow 6s linear infinite;\n      background: linear-gradient(90deg, transparent, #212A31, transparent);\n      opacity: 0.7;\n    }\n    .card-container-advanced {\n      width: 100%;\n      max-width: 800px;\n      position: relative;\n    }\n    .floating-particles-advanced {\n      position: absolute;\n      left: -16px;\n      top: -16px;\n      height: 32px;\n      width: 32px;\n      border-radius: 50%;\n      background: linear-gradient(to bottom right, #748D92, transparent);\n      filter: blur(2px);\n      animation: pulse 2s infinite;\n    }\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n    .services-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n    }\n    @media (max-width: 768px) {\n      .services-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n    .service-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n    .service-item.included {\n      color: #e5e7eb;\n    }\n    .service-item.excluded {\n      color: #9ca3af;\n    }\n    .service-icon {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 24px;\n      width: 24px;\n      border-radius: 50%;\n    }\n    .service-icon.included {\n      background: rgba(116, 141, 146, 0.3);\n    }\n    .service-icon.excluded {\n      background: rgba(239, 68, 68, 0.2);\n    }\n  <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-slate-950 p-6\">\n  <div class=\"group relative card-container-advanced hover:scale-105 transition-transform duration-300\">\n    <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg-advanced\">\n      <div class=\"animated-border-advanced\"><\/div>\n      <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n        <div class=\"floating-particles-advanced\"><\/div>\n        <div class=\"relative z-10 text-left\">\n          <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n            Forfait Professionnel\n          <\/h3>\n          <p class=\"text-sm text-gray-300 mb-4 text-center\">\n            La solution id\u00e9ale pour les grandes entreprises souhaitant un site complet au design unique et aux performances professionnelles.\n          <\/p>\n          \n          <!-- Services inclus -->\n          <div class=\"services-grid mt-6\">\n            <!-- Colonne 1 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception d\u2019un site jusqu\u2019\u00e0 8 pages<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Site prenant en charge jusqu\u2019\u00e0 3 langues<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Nom de domaine s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">H\u00e9bergement s\u00e9curis\u00e9<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception professionnelle enti\u00e8rement sur mesure<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Design interactif avanc\u00e9 (animations)<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Compatible avec tous les appareils<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Formulaires de contact et de r\u00e9servation<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Int\u00e9gration Google Maps<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Assistance technique continue durant l\u2019abonnement<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- Colonne 2 -->\n            <div>\n              <div class=\"space-y-2\">\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Liens vers les r\u00e9seaux sociaux<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">SEO complet et professionnel<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Cinq e-mails professionnels<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Int\u00e9gration d\u2019un bouton WhatsApp direct<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Ajout du contenu de pr\u00e9sentation<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Page d\u2019avis sur l\u2019entreprise\/le service<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Conception d\u2019un profil de pr\u00e9sentation \u00e9lectronique<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Affichage des avis clients<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Contr\u00f4le complet du site avec formation de base<\/p>\n                <\/div>\n                <div class=\"service-item included\">\n                  <div class=\"service-icon included\">\n                    <svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-3 w-3\">\n                      <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                    <\/svg>\n                  <\/div>\n                  <p class=\"text-sm\">Maintenance et ajustements de base pendant l\u2019abonnement<\/p>\n                <\/div>\n              <\/div>\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a1d7e64 e-flex e-con-boxed e-con e-parent\" data-id=\"a1d7e64\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cb77f97 elementor-widget elementor-widget-html\" data-id=\"cb77f97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0641\u0627\u0635\u0644 \u0645\u062a\u062f\u0631\u062c \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643 --><div class=\"fade-divider with-glow\"><\/div><style>.fade-divider {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  background: linear-gradient(to right, transparent, #748D92, transparent);\n  margin: 60px 0;\n  overflow: hidden;\n}\n\n.with-glow::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 50%;\n  height: 100%;\n  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n  animation: glowMove 2s linear infinite;\n}\n\n@keyframes glowMove {\n  from {\n    left: -50%;\n  }\n  to {\n    left: 90%;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f3114ac e-flex e-con-boxed e-con e-parent\" data-id=\"f3114ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e144b2 elementor-widget elementor-widget-html\" data-id=\"6e144b2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n<html dir=\"rtl\" lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\" \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n    <title>Parcours de conception de site web \u2014 Chronologie RTL (Centr\u00e9, sans bo\u00eete)<\/title>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n    <style>\n        :root{\n            --ink:#212A31;      \/* Fond sombre *\/\n            --slate:#393E46;    \/* De votre palette *\/\n            --steel:#748D92;    \/* De votre palette *\/\n            --mist:#A5BFCC;     \/* De votre palette *\/\n            --text:#ecf3f8;     \/* Texte principal *\/\n            --text2:#cfdbe4;    \/* Texte secondaire *\/\n        }\n        *{box-sizing:border-box}\n        body{ margin:0;  font-family:'Tajawal',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;  color:var(--text); overflow-x:hidden; overscroll-behavior:auto; -webkit-overflow-scrolling:touch }\n\n        .container{ width:min(1100px,94vw); margin:0 auto }\n        header{ text-align:center; margin:0 0 36px }\n        h1{ margin:.2rem 0 .2rem; font-size:clamp(1.6rem,3.4vw,2.6rem) }\n        .subtitle{ color:var(--text2) }\n\n        \/* ===== Chronologie ===== *\/\n        .timeline{ position:relative; margin:40px auto 10px }\n        .axis{ position:absolute; right:50%; transform:translateX(50%); top:0; bottom:0; width:3px; background:linear-gradient(180deg,#56636d,#243039); border-radius:6px; pointer-events:none; z-index:0 }\n        .axis:after{ content:\"\"; position:absolute; right:50%; transform:translateX(50%); width:9px; height:9px; border-radius:50%; background:radial-gradient(circle, var(--mist), #6f8a93 60%, transparent 62%); filter:drop-shadow(0 0 9px rgba(165,191,204,.85)); animation:drop 6s linear infinite; top:-80px }\n        @keyframes drop{ 0%{top:-80px; opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{top:100%; opacity:0} }\n\n        \/* ===== \u00c9tape + Titre centr\u00e9 ===== *\/\n        .segment{ position:relative }\n        .step{ position:relative; margin:80px 0 0; display:flex; justify-content:center; align-items:center; gap:60px }\n        .dot{ position:absolute; right:50%; transform:translateX(50%); width:16px; height:16px; border-radius:50%; background:var(--mist); box-shadow:0 0 0 6px rgba(165,191,204,.16), 0 8px 22px rgba(0,0,0,.5); pointer-events:none; z-index:1 }\n\n        \/* Forme \u00e0 gauche, titre \u00e0 droite *\/\n        .shape{ position:relative; transform:translateZ(0); filter:drop-shadow(0 10px 22px rgba(0,0,0,.45)); pointer-events:none; animation:float 6s ease-in-out infinite; z-index:1; order: 1; }\n        @keyframes float{ 0%,100%{ transform:translateZ(0) } 50%{ transform:translateY(-8px) } }\n\n        \/* Titre et texte \u2014 \u00e0 droite *\/\n        .title{ text-align:right; max-width:min(420px,40vw); position:relative; z-index:2; order: 2; }\n        .title .eyebrow{ color:var(--text2); font-size:.9rem; margin-bottom:.2rem }\n        .title h2{ margin:0; font-size:1.28rem; font-weight:700 }\n        .title strong{ color:var(--mist) }\n\n        \/* Description entre les \u00e9tapes au milieu de la ligne *\/\n        .mid{ position:relative; height:140px; margin: 30px 0 }\n        .mid p{ position:absolute; right:50%; transform:translate(50%,-50%); top:50%; margin:0; text-align:center; color:var(--text2); max-width:min(720px,90vw); line-height:1.9; pointer-events:none }\n\n        \/* ===== Formes ===== *\/\n        .contract{ width:120px; height:120px; position:relative; top:-10px }\n        .contract svg{ display:block }\n        .write line{ stroke-dasharray:110; stroke-dashoffset:110; animation:write 2.1s ease-out forwards var(--d,.2s) }\n        @keyframes write{ to{ stroke-dashoffset:0 } }\n        .pen-move{ transform-origin:66px 58px; animation:pen 2.6s ease-in-out infinite .1s }\n        @keyframes pen{ 0%,100%{ transform:translate(-2px,0) rotate(2deg) } 50%{ transform:translate(2px,-1px) rotate(-3deg) } }\n\n        .screen{ width:110px; height:76px; border-radius:10px; background:#0e151a; border:1px solid #2b333a; position:relative; overflow:hidden; top:-10px }\n        .screen .bar{ height:10px; background:linear-gradient(90deg,#393E46,#2a3640); border-bottom:1px solid #2d3842 }\n        .skeleton .block{ position:absolute; background:linear-gradient(90deg,#3a4650 0%, #586775 50%, #3a4650 100%); background-size:200% 100%; animation:shimmer 2.2s infinite; border-radius:7px; opacity:.85 }\n        @keyframes shimmer{ 0%{background-position:0 0} 100%{background-position:200% 0} }\n\n        .cards .c{ position:absolute; border-radius:7px; opacity:0; transform:translateY(8px) scale(.96); animation:pop .8s var(--t,.2s) forwards }\n        @keyframes pop{ to{ opacity:1; transform:translateY(0) scale(1) } }\n\n        \/* Notes *\/\n        .notes{ margin:46px auto 8px }\n        .notes h3{ margin:0 0 10px; font-size:1.15rem; text-align:center }\n        .notes ul{ margin:0; padding:0 1rem; list-style:none }\n        .notes li{ margin:.55rem 0; color:var(--text2); position:relative; padding-inline-start:1.1rem }\n        .notes li::before{ content:\"\u2022\"; position:absolute; right:0; color:var(--mist) }\n\n        \/* Augmenter l'espacement entre la 3e et la 4e \u00e9tape *\/\n        .segment:nth-child(4) .step { margin-top: 100px; }\n\n        @media (max-width:720px){  \n            .screen{ width:98px; height:66px }  \n            .step{ flex-direction: column; gap: 20px; }\n            .title{ text-align: center; max-width: 90vw; }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <h1>Parcours de conception de site web<\/h1>\n            <p class=\"subtitle\"><\/p>\n        <\/header>\n\n        <section class=\"timeline\">\n            <span class=\"axis\" aria-hidden=\"true\"><\/span>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape contract\">\n                        <svg width=\"120\" height=\"120\" viewBox=\"0 0 76 76\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-label=\"Contrat\">\n                            <rect x=\"14\" y=\"10\" width=\"48\" height=\"56\" rx=\"6\" fill=\"#0f151a\" stroke=\"#6f8792\"\/>\n                            <g class=\"write\" stroke=\"#A5BFCC\" stroke-width=\"2\" stroke-linecap=\"round\">\n                                <line x1=\"22\" y1=\"24\" x2=\"56\" y2=\"24\" style=\"--d:.2s\"\/>\n                                <line x1=\"22\" y1=\"32\" x2=\"50\" y2=\"32\" style=\"--d:.45s\"\/>\n                                <line x1=\"22\" y1=\"40\" x2=\"54\" y2=\"40\" style=\"--d:.7s\"\/>\n                                <line x1=\"22\" y1=\"48\" x2=\"44\" y2=\"48\" style=\"--d:.95s\"\/>\n                            <\/g>\n                            <g class=\"pen-move\" transform=\"translate(8,6)\">\n                                <path d=\"M56 52 l8 8\" stroke=\"#A5BFCC\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <path d=\"M50 58 l12 2\" stroke=\"#748D92\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n                                <polygon points=\"60,54 66,60 64,62 58,56\" fill=\"#93afbd\"\/>\n                            <\/g>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 1<\/div>\n                        <h2><strong>Le D\u00e9but<\/strong> \u2014 Signature du contrat<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>Le contenu est re\u00e7u du client (textes, images, logo et donn\u00e9es de base) pour nous permettre de construire le site web.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen skeleton\">\n                            <div class=\"bar\"><\/div>\n                            <div class=\"block\" style=\"top:14px; right:8px; width:78px; height:10px\"><\/div>\n                            <div class=\"block\" style=\"top:30px; right:8px; width:42px; height:8px\"><\/div>\n                            <div class=\"block\" style=\"top:44px; right:8px; width:60px; height:8px\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 2<\/div>\n                        <h2><strong>Premi\u00e8re \u00e9bauche<\/strong> \u2014 Conception initiale<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>Le client est pr\u00e9sent\u00e9 \u00e0 la conception initiale. Le client doit envoyer toutes les modifications requises en une seule fois et en d\u00e9tail pour obtenir le meilleur r\u00e9sultat.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen cards\" style=\"border-color:#2c3942\">\n                            <div class=\"bar\" style=\"background:#2a3640\"><\/div>\n                            <div class=\"c\" style=\"--t:.2s; right:8px; top:14px; width:78px; height:12px; background:#748D92\"><\/div>\n                            <div class=\"c\" style=\"--t:.45s; right:8px; top:30px; width:60px; height:10px; background:#A5BFCC\"><\/div>\n                            <div class=\"c\" style=\"--t:.7s; right:8px; top:44px; width:46px; height:8px; background:#93a4ae\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 3<\/div>\n                        <h2><strong>Deuxi\u00e8me \u00e9bauche<\/strong> \u2014 Apr\u00e8s modifications<\/h2>\n                    <\/div>\n                <\/div>\n                <div class=\"mid\"><p>La version modifi\u00e9e est pr\u00e9sent\u00e9e. Le client doit envoyer ses commentaires finaux en une seule fois et en d\u00e9tail pour s'assurer qu'ils sont mis en \u0153uvre de la meilleure fa\u00e7on.<\/p><\/div>\n            <\/div>\n\n            <div class=\"segment\">\n                <div class=\"step\">\n                    <span class=\"dot\"><\/span>\n                    <div class=\"shape\">\n                        <div class=\"screen cards\" style=\"border-color:#3b4a53\">\n                            <div class=\"bar\" style=\"background: linear-gradient(90deg,#393E46,#748D92,#A5BFCC)\"><\/div>\n                            <div class=\"c\" style=\"--t:.2s; right:8px; top:14px; width:82px; height:12px; background:#A5BFCC\"><\/div>\n                            <div class=\"c\" style=\"--t:.45s; right:8px; top:30px; width:62px; height:10px; background:#ffffff\"><\/div>\n                            <div class=\"c\" style=\"--t:.7s; right:8px; top:44px; width:46px; height:8px; background:#748D92\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"title\">\n                        <div class=\"eyebrow\">Phase 4<\/div>\n                        <h2><strong>Version finale<\/strong> \u2014 Livraison finale<\/h2>\n                        <br>\n                        <p style=\"margin:.35rem 0 0; color:var(--text2)\">Ceci est la version finale du site web, compl\u00e8te et pr\u00eate pour le lancement. \u00c0 partir de la date de livraison, la p\u00e9riode de support technique et de modifications commence selon le forfait choisi, et apr\u00e8s son expiration, un abonnement mensuel peut \u00eatre initi\u00e9.<\/p>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/section>\n    <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-87a8083 e-flex e-con-boxed e-con e-parent\" data-id=\"87a8083\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2b212b0 elementor-widget elementor-widget-html\" data-id=\"2b212b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- \u0641\u0627\u0635\u0644 \u0645\u062a\u062f\u0631\u062c \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u0645\u062a\u062d\u0631\u0643 --><div class=\"fade-divider with-glow\"><\/div><style>.fade-divider {\n  position: relative;\n  width: 100%;\n  height: 5px;\n  background: linear-gradient(to right, transparent, #748D92, transparent);\n  margin: 60px 0;\n  overflow: hidden;\n}\n\n.with-glow::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: -50%;\n  width: 50%;\n  height: 100%;\n  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);\n  animation: glowMove 2s linear infinite;\n}\n\n@keyframes glowMove {\n  from {\n    left: -50%;\n  }\n  to {\n    left: 90%;\n  }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VelonWeb Forfaits Composez votre propre forfait Forfait Lancement Un forfait id\u00e9al pour ceux qui ont besoin d\u2019une page professionnelle pr\u00e9sentant l\u2019entreprise et ses services de fa\u00e7on claire et concise. Conception d\u2019un site une page Site en une seule langue Nom de domaine s\u00e9curis\u00e9 H\u00e9bergement s\u00e9curis\u00e9 Conception avec mod\u00e8le pr\u00eat \u00e0 l\u2019emploi Design interactif (transitions) Compatible [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2993","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"[data-prefix=\"single_page\"] .entry-header .page-title {--theme-font-size:30px;} [data-prefix=\"single_page\"] .entry-header .entry-meta {--theme-font-weight:600;--theme-text-transform:uppercase;--theme-font-size:12px;--theme-line-height:1.3;}","tablet":"","mobile":""},"google_fonts":[],"version":6},"has_hero_section":"enabled","hero_elements":[{"id":"custom_title","enabled":false,"heading_tag":"h1","title":"Home","__id":"WYDb6j3KF2Ab6mmYXMzX0"},{"id":"custom_description","enabled":false,"description_visibility":{"desktop":true,"tablet":true,"mobile":false},"__id":"1Zomxiu-qCaw1BXWfpC46"},{"id":"custom_meta","enabled":false,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":false,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true},"__id":"6QwI40DpZXM_09g1PuuL9"},{"id":"breadcrumbs","enabled":false,"__id":"tTMyIh3N1CrJ_yZ8vmxVU"}]},"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages\/2993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/comments?post=2993"}],"version-history":[{"count":20,"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages\/2993\/revisions"}],"predecessor-version":[{"id":4749,"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages\/2993\/revisions\/4749"}],"wp:attachment":[{"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/media?parent=2993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}