{"id":3020,"date":"2022-06-10T08:40:32","date_gmt":"2022-06-10T08:40:32","guid":{"rendered":"https:\/\/velonweb.com\/accueil\/"},"modified":"2025-09-09T07:30:29","modified_gmt":"2025-09-09T07:30:29","slug":"accueil","status":"publish","type":"page","link":"https:\/\/velonweb.com\/fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3020\" class=\"elementor elementor-3020 elementor-991\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e2839f e-flex e-con-boxed e-con e-parent\" data-id=\"9e2839f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_start&quot;:0,&quot;background_play_on_mobile&quot;:&quot;yes&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/velonweb.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/3129957-uhd_3840_2160_25fps-1-1-1-1.mp4&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted\" role=\"presentation\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-4f1cdcf e-con-full e-flex e-con e-child\" data-id=\"4f1cdcf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4519bb0 elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-html\" data-id=\"4519bb0\" 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<style>\n.card {\n    padding: 0.6rem 1rem;\n    border-radius: 1rem;\n    width: fit-content;\n}\n\n.loader {\n    color: rgb(124, 124, 124);\n    font-family: \"Almarai\", sans-serif;\n    font-weight: 700;\n    font-size: 28px; \/* \u062a\u0635\u063a\u064a\u0631 \u0627\u0644\u062e\u0637 *\/\n    height: 34px;\n    padding: 6px 8px;\n    display: flex;\n    border-radius: 8px;\n    direction: ltr;\n    align-items: center;\n}\n\n.loader p {\n    margin: 0 0 0 8px;\n    line-height: 10px;\n    transform: translateY(-6px);\n}\n\n.words {\n    overflow: hidden;\n    position: relative;\n    height: 34px;\n    line-height: 28px;\n}\n\n.word {\n    display: block;\n    height: 34px;\n    padding-left: 4px;\n    color: #748D92;\n    animation: spin_4991 6.5s infinite;\n}\n\n@keyframes spin_4991 {\n    0%    { transform: translateY(0); }\n    20%   { transform: translateY(0); }\n    25%   { transform: translateY(-100%); }\n    45%   { transform: translateY(-100%); }\n    50%   { transform: translateY(-200%); }\n    70%   { transform: translateY(-200%); }\n    75%   { transform: translateY(-300%); }\n    100%  { transform: translateY(-300%); }\n}\n<\/style>\n\n<div class=\"card\">\n  <div class=\"loader\">\n    <p>Excellence<\/p>\n    <div class=\"words\">\n      <span class=\"word\">Digitale<\/span>\n      <span class=\"word\">Unique<\/span>\n      <span class=\"word\">\u00c9lite<\/span>\n      <span class=\"word\">Digitale<\/span>\n    <\/div>\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1a20b7 elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"c1a20b7\" 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<style>\n.custom-card {\n    padding: 1.5rem 3rem;\n    border-radius: 1.5rem;\n    width: fit-content;\n    background: none;\n    direction: ltr; \/* \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0627\u062a\u062c\u0627\u0647 \u0644\u0644\u064a\u0633\u0627\u0631 \u0625\u0644\u0649 \u0627\u0644\u064a\u0645\u064a\u0646 *\/\n}\n\n.custom-loader {\n    color: rgb(124, 124, 124);\n    font-family: \"Almarai\", sans-serif;\n    font-weight: 600;\n    font-size: 75px;\n    height: 80px;\n    padding: 12px 20px;\n    display: flex;\n    border-radius: 12px;\n    align-items: center;\n}\n\n.custom-loader p {\n    margin: 0 0 0 16px; \/* \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0639\u0644\u0649 \u0627\u0644\u064a\u0633\u0627\u0631 \u0628\u062f\u0644 \u0627\u0644\u064a\u0645\u064a\u0646 *\/\n    line-height: 1;\n    \/* \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u0643\u0644\u0645\u0629 \u0627\u0644\u062b\u0627\u0628\u062a\u0629 *\/\n}\n\n.custom-words {\n    overflow: hidden;\n    position: relative;\n    height: 58px;\n    line-height: 56px;\n    text-align: left; \/* \u0644\u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0627\u0644\u0645\u062a\u063a\u064a\u0631\u0629 *\/\n}\n\n.custom-word {\n    display: block;\n    height: 90px;\n    padding-left: 10px; \/* \u0628\u062f\u0644 padding-right *\/\n    color: #748D92;\n    animation: custom-spin 6.5s infinite;\n    font-weight: 600;\n}\n\n@keyframes custom-spin {\n    0%    { transform: translateY(0); }\n    20%   { transform: translateY(0); }\n    25%   { transform: translateY(-100%); }\n    45%   { transform: translateY(-100%); }\n    50%   { transform: translateY(-200%); }\n    70%   { transform: translateY(-200%); }\n    75%   { transform: translateY(-300%); }\n    100%  { transform: translateY(-300%); }\n}\n<\/style>\n\n<div class=\"custom-card\">\n  <div class=\"custom-loader\">\n    <p>Excellence<\/p>\n    <div class=\"custom-words\">\n      <span class=\"custom-word\">num\u00e9rique<\/span>\n      <span class=\"custom-word\">pr\u00e9sente<\/span>\n      <span class=\"custom-word\">professionnelle<\/span>\n      <span class=\"custom-word\">num\u00e9rique<\/span>\n    <\/div>\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92671d6 elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"92671d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ensemble, nous affinons les id\u00e9es et les transformons en un site impressionnant qui d\u00e9veloppe votre entreprise<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2834b1f elementor-widget elementor-widget-html\" data-id=\"2834b1f\" 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><html lang=\"ar\" ><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>\u0632\u0631 \u062a\u0648\u0627\u0635\u0644 \u0623\u0646\u064a\u0642<\/title><style>* {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n    \n    body {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n      \n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    }\n    \n    \/* \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0632\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0628\u062f\u0648\u0646 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0645\u0627\u0648\u0633 *\/\n    .elegant-button {\n      --main-color: #748D92;\n      --main-bg-color: rgba(116, 141, 146, 0.25);\n      --pattern-color: rgba(116, 141, 146, 0.08);\n      \n      position: relative;\n      cursor: pointer;\n      text-transform: uppercase;\n      letter-spacing: 0.3rem;\n      background: \n        radial-gradient(circle, var(--main-bg-color) 0%, rgba(0, 0, 0, 0) 95%),\n        linear-gradient(var(--pattern-color) 1px, transparent 1px),\n        linear-gradient(to right, var(--pattern-color) 1px, transparent 1px);\n      background-size: cover, 15px 15px, 15px 15px;\n      background-position: center center, center center, center center;\n      border: 2px solid;\n      border-image: radial-gradient(circle, var(--main-color) 0%, rgba(0, 0, 0, 0) 100%) 1;\n      color: var(--main-color);\n      padding: 1.2rem 3rem;\n      font-weight: 700;\n      font-size: 1.3rem;\n      border-radius: 2px;\n      transition: none;\n      outline: none;\n      text-decoration: none;\n      display: inline-block;\n      animation: subtlePulse 4s infinite ease-in-out;\n    }\n    \n    \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0646\u0642\u0631 \u0641\u0642\u0637 *\/\n    .elegant-button:active {\n      transform: scale(0.98);\n      background: \n        radial-gradient(circle, rgba(116, 141, 146, 0.15) 0%, rgba(0, 0, 0, 0) 95%),\n        linear-gradient(var(--pattern-color) 1px, transparent 1px),\n        linear-gradient(to right, var(--pattern-color) 1px, transparent 1px);\n    }\n    \n    \/* \u0646\u0628\u0636 \u062e\u0641\u064a\u0641 \u0644\u062c\u0630\u0628 \u0627\u0644\u0627\u0646\u062a\u0628\u0627\u0647 *\/\n    @keyframes subtlePulse {\n      0%, 100% {\n        box-shadow: 0 0 15px rgba(116, 141, 146, 0.2);\n      }\n      50% {\n        box-shadow: 0 0 25px rgba(116, 141, 146, 0.4);\n      }\n    }\n    \n    @media (max-width: 600px) {\n      .elegant-button {\n        padding: 1rem 2rem;\n        font-size: 1.1rem;\n        letter-spacing: 0.2rem;\n      }\n    }\n  <\/style><\/head><body><a href=\"https:\/\/velonweb.com\/fr\/contact\/\" class=\"elegant-button\">Pr\u00eat \u00e0 d\u00e9couvrir votre site ?\n  <\/a><\/body><\/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-da1055c e-flex e-con-boxed e-con e-parent\" data-id=\"da1055c\" 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-1332204 elementor-widget elementor-widget-html\" data-id=\"1332204\" 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><html lang=\"ar\" ><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>VelonWeb - \u062a\u0635\u0645\u064a\u0645 \u0628\u062f\u064a\u0644 \u0645\u0645\u064a\u0632<\/title><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700;800&display=swap\" rel=\"stylesheet\"><script src=\"https:\/\/unpkg.com\/@dotlottie\/player-component@2.7.12\/dist\/dotlottie-player.mjs\" type=\"module\"><\/script><style>* {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n    \n    body {\n    \n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n      font-family: 'Almarai', sans-serif;\n      padding: 20px;\n    }\n    \n    .velon-container {\n      width: 90%;\n      max-width: 800px;\n      margin: 0 auto;\n      perspective: 1200px;\n    }\n    \n    .velon-card {\n      position: relative;\n      width: 100%;\n      min-height: 400px;\n      background: none;\n      border-radius: 25px;\n      transform-style: preserve-3d;\n      transition: all 0.5s ease;\n      display: flex;\n      overflow: hidden;\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\n    }\n    \n    .velon-card:hover {\n      transform: rotateY(5deg) rotateX(5deg);\n    }\n    \n    .card-glow {\n      position: absolute;\n      top: -50%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      background: radial-gradient(circle, rgba(116, 141, 146, 0.4) 0%, rgba(0,0,0,0) 70%);\n      z-index: 0;\n      animation: glowRotate 20s linear infinite;\n      filter: blur(40px);\n      opacity: 0.7;\n    }\n    \n    @keyframes glowRotate {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n    \n    .card-side {\n      flex: 1;\n      padding: 40px;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      position: relative;\n      z-index: 1;\n      overflow: hidden;\n    }\n    \n    .lottie-side {\n      background: linear-gradient(135deg, #2a2e36, #393E46);\n      border-right: 2px solid rgba(116, 141, 146, 0.3);\n      align-items: center;\n    }\n    \n    .content-side {\n      background: linear-gradient(135deg, #393E46, #5a6d72);\n      align-items: flex-start;\n    }\n    \n    .lottie-container {\n      width: 100%;\n      max-width: 300px;\n      margin: 0 auto;\n      position: relative;\n      animation: floatLogo 5s ease-in-out infinite;\n    }\n    \n    @keyframes floatLogo {\n      0%, 100% { transform: translateY(0) rotate(0deg); }\n      25% { transform: translateY(-15px) rotate(2deg); }\n      50% { transform: translateY(0) rotate(0deg); }\n      75% { transform: translateY(-10px) rotate(-2deg); }\n    }\n    \n    dotlottie-player {\n      width: 100%;\n      height: auto;\n      border-radius: 20px;\n      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);\n      overflow: hidden;\n    }\n    \n    .card-title {\n      font-size: 36px;\n      font-weight: 900;\n      margin: 0 0 25px 0;\n      color: white;\n      text-align: center;\n      position: relative;\n      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n      width: 100%;\n    }\n    \n    .card-title::after {\n      content: \"\";\n      position: absolute;\n      bottom: -12px;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 200px;\n      height: 4px;\n      background: linear-gradient(to left, #748D92, #9ab0b5);\n      border-radius: 2px;\n      transition: all 0.5s ease;\n    }\n    \n    .velon-card:hover .card-title::after {\n      width: 250px;\n      background: linear-gradient(to left, #9ab0b5, #748D92);\n    }\n    \n    .card-content {\n      font-size: 20px;\n      font-weight: 500;\n      line-height: 1.9;\n      color: #f0f8ff;\n      text-align: center; \/* \u0645\u062d\u0627\u0630\u0627\u0629 \u0627\u0644\u0646\u0635 \u0645\u062a\u0633\u0627\u0648\u064a\u0629 \u0645\u0646 \u0627\u0644\u062c\u0647\u062a\u064a\u0646 *\/\n      text-justify: inter-word; \/* \u062a\u062d\u0633\u064a\u0646 \u062a\u0648\u0632\u064a\u0639 \u0627\u0644\u0643\u0644\u0645\u0627\u062a *\/\n      margin-bottom: 35px;\n      max-width: 100%;\n      hyphens: auto; \/* \u062a\u0642\u0633\u064a\u0645 \u0627\u0644\u0643\u0644\u0645\u0627\u062a \u0639\u0646\u062f \u0627\u0644\u0636\u0631\u0648\u0631\u0629 *\/\n      padding: 0 15px; \/* \u0645\u0633\u0627\u0641\u0629 \u062c\u0627\u0646\u0628\u064a\u0629 \u0644\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0645\u0638\u0647\u0631 *\/\n    }\n    \n    .features-grid {\n      display: grid;\n      grid-template-columns: repeat(2, 1fr);\n      gap: 15px;\n      width: 100%;\n      margin-top: 20px;\n    }\n    \n    .feature {\n      background: rgba(116, 141, 146, 0.15);\n      border-radius: 12px;\n      padding: 15px;\n      text-align: center;\n      transition: all 0.3s ease;\n      backdrop-filter: blur(5px);\n      border: 1px solid rgba(255, 255, 255, 0.1);\n    }\n    \n    .feature:hover {\n      transform: translateY(-5px);\n      background: rgba(116, 141, 146, 0.25);\n      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n    }\n    \n    .feature i {\n      font-size: 24px;\n      color: #9ab0b5;\n      margin-bottom: 10px;\n    }\n    \n    .feature-text {\n      font-size: 14px;\n      color: #e0e0e0;\n    }\n    \n    .btn-container {\n      display: flex;\n      justify-content: center;\n      margin-top: 30px;\n      width: 100%;\n    }\n    \n    .velon-btn {\n      background: linear-gradient(135deg, #748D92, #5a6d72);\n      color: white;\n      padding: 14px 45px;\n      font-size: 18px;\n      border: none;\n      border-radius: 30px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 700;\n      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    \n    .velon-btn:hover {\n      background: linear-gradient(135deg, #8aa1a6, #748D92);\n      transform: translateY(-3px);\n      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);\n    }\n    \n    .velon-btn i {\n      font-size: 20px;\n    }\n    \n    .watermark {\n      position: absolute;\n      bottom: 20px;\n      left: 20px;\n      color: rgba(255, 255, 255, 0.15);\n      font-size: 24px;\n      font-weight: 800;\n      letter-spacing: 2px;\n      transform: rotate(-15deg);\n      user-select: none;\n    }\n    \n    \/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a *\/\n    .particles {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 0;\n      pointer-events: none;\n    }\n    \n    .particle {\n      position: absolute;\n      background: rgba(255, 255, 255, 0.3);\n      border-radius: 50%;\n      animation: floatParticle 15s infinite linear;\n    }\n    \n    @keyframes floatParticle {\n      0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }\n      10% { opacity: 1; }\n      90% { opacity: 0.7; }\n      100% { transform: translateY(-100px) translateX(50px) scale(1); opacity: 0; }\n    }\n    \n    \/* \u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0627\u0648\u0628 *\/\n    @media (max-width: 768px) {\n      .velon-card {\n        flex-direction: column;\n      }\n      \n      .lottie-side {\n        border-right: none;\n        border-bottom: 2px solid rgba(116, 141, 146, 0.3);\n      }\n      \n      .lottie-container {\n        max-width: 250px;\n      }\n      \n      .card-title {\n        font-size: 32px;\n      }\n      \n      .velon-card:hover .card-title::after {\n        width: 180px;\n      }\n      \n      .card-content {\n        font-size: 18px;\n        padding: 0 10px;\n      }\n    }\n    \n    @media (max-width: 480px) {\n      .features-grid {\n        grid-template-columns: 1fr;\n      }\n      \n      .card-title {\n        font-size: 28px;\n      }\n      \n      .card-content {\n        font-size: 16px;\n      }\n    }\n  <\/style><link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\"><\/head><body><div class=\"velon-container\"><div class=\"velon-card\"><div class=\"card-glow\"><\/div><!-- \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 --><div class=\"particles\" id=\"particles\"><\/div><!-- \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u0645\u0627\u0626\u064a\u0629 --><div class=\"watermark\">VELONWEB<\/div><!-- \u062c\u0627\u0646\u0628 \u0627\u0644\u0634\u0639\u0627\u0631 --><div class=\"card-side lottie-side\"><div class=\"lottie-container\"><dotlottie-player \n            src=\"https:\/\/lottie.host\/4f8eee1d-d863-47e3-8c27-7a053280dc93\/OOWkRRnhU4.lottie\"\n            background=\"transparent\" \n            speed=\"1.5\" \n            loop \n            autoplay><\/dotlottie-player><\/div><\/div><!-- \u062c\u0627\u0646\u0628 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 --><div class=\"card-side content-side\"><h2 class=\"card-title\">Velonweb<\/h2><p class=\"card-content\">La source des solutions technologiques innovantes en conception et d\u00e9veloppement de sites web. L\u2019objectif est d\u2019aider les particuliers et les entreprises \u00e0 renforcer leur pr\u00e9sence digitale et \u00e0 atteindre leurs objectifs gr\u00e2ce \u00e0 des solutions personnalis\u00e9es et une exp\u00e9rience utilisateur unique et exceptionnelle.\n        <\/p><div class <\/div><\/body><\/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-bd318ed e-flex e-con-boxed e-con e-parent\" data-id=\"bd318ed\" 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-f615f4c elementor-widget elementor-widget-html\" data-id=\"f615f4c\" 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-3d6f63a e-flex e-con-boxed e-con e-parent\" data-id=\"3d6f63a\" 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-2d0cecd e-con-full e-flex e-con e-child\" data-id=\"2d0cecd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0f67bf elementor-widget elementor-widget-spacer\" data-id=\"c0f67bf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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-b7bc521 e-con-full e-flex e-con e-child\" data-id=\"b7bc521\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef13273 ct-advanced-heading elementor-widget elementor-widget-heading\" data-id=\"ef13273\" 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\">Travaux Pr\u00e9c\u00e9dents\n<\/h2>\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-f8f8c0f e-flex e-con-boxed e-con e-parent\" data-id=\"f8f8c0f\" 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-971b608 e-con-full e-transform e-flex e-con e-child\" data-id=\"971b608\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.100000000000000088817841970012523233890533447265625,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19f25d5 elementor-align-left elementor-widget elementor-widget-button\" data-id=\"19f25d5\" 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\/nos-projets\/\">\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\">En savoir plus<\/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<div class=\"elementor-element elementor-element-50aea17 e-con-full e-transform e-flex e-con e-child\" data-id=\"50aea17\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.100000000000000088817841970012523233890533447265625,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c84494 elementor-widget elementor-widget-html\" data-id=\"3c84494\" 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><html  ><head><meta charset=\"UTF-8\" \/><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\"><style>body {\n      \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px!important; \/* \u0632\u062f\u062a \u0627\u0644\u0639\u0631\u0636 *\/\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 25px rgba(255, 255, 255, 0.05);\n      animation: glowPulse 4s ease-in-out infinite; \/* \u0627\u0636\u0627\u0641\u0629 \u0627\u0644\u0627\u0646\u064a\u0645\u064a\u0634\u0646 *\/\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0644\u0643\u0627\u0631\u062f *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 25px 6px rgba(116, 141, 146, 0.6);\n        background: linear-gradient(135deg, #8aa1a6, #222222);\n      }\n      50% {\n        box-shadow: 0 0 45px 15px rgba(116, 141, 146, 0.9);\n        background: linear-gradient(135deg, #a3b2b7, #000000);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #5a6d72, #4b5a5f, #748D92);\n      background-size: 400% 400%;\n      animation: gradientFlow 6s ease infinite;\n      z-index: 0;\n      opacity: 0.25;\n    }\n\n    @keyframes gradientFlow {\n      0% {\n        background-position: 0% 50%;\n      }\n      50% {\n        background-position: 100% 50%;\n      }\n      100% {\n        background-position: 0% 50%;\n      }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      animation: float 3s ease-in-out infinite;\n      border-radius: 50%;\n      box-shadow: 0 0 20px rgba(116, 141, 146, 0.45);\n    }\n\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0px);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 24px; \/* \u0643\u0628\u0631\u062a\u0647 \u0634\u0648\u064a *\/\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n      white-space: nowrap; \/* \u0644\u062c\u0639\u0644 \u0627\u0644\u0646\u0635 \u0641\u064a \u0633\u0637\u0631 \u0648\u0627\u062d\u062f *\/\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 100%;\n    }\n\n    .company-name-en {\n      font-size: 18px; \/* \u0643\u0628\u0631\u062a\u0647 \u0634\u0648\u064a *\/\n      color: #dddddd;\n      margin-bottom: 25px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 100%;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 10px rgba(116, 141, 146, 0.6);\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 20px rgba(116, 141, 146, 0.9);\n    }\n  <\/style><\/head><body><div class=\"card\"><!-- \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 --><div class=\"animated-bg\"><\/div><div class=\"card-content\"><img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/09\/IMG_6790-removebg-preview-e1757399941171.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/><div class=\"company-name-ar\">\u0623\u0648\u0631\u0646\u0627\u0641\u0627 \u0644\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0644\u0648\u062c\u0633\u062a\u064a\u0629\n<\/div><div class=\"company-name-en\">\nOrnava Logistics<\/div><a class=\"cta-button\" href=\"https:\/\/ornavalogistics.com\" target=\"_blank\">Visitez le site<\/a><\/div><\/div><\/body><\/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-29d7f25 e-con-full e-transform e-flex e-con e-child\" data-id=\"29d7f25\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.100000000000000088817841970012523233890533447265625,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-953bde4 elementor-widget elementor-widget-html\" data-id=\"953bde4\" 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><html  ><head><meta charset=\"UTF-8\" \/><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@300;400;700&display=swap\" rel=\"stylesheet\"><style>body {\n     \n      margin: 0;\n      padding: 0;\n      font-family: 'Almarai', sans-serif;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      min-height: 100vh;\n    }\n\n    .card {\n      width: 330px!important; \/* \u0632\u062f\u062a \u0627\u0644\u0639\u0631\u0636 *\/\n      height: 400px;\n      background: linear-gradient(135deg, #748D92, #111111);\n      border-radius: 25px;\n      position: relative;\n      overflow: hidden;\n      text-align: center;\n      padding: 30px 20px;\n      box-shadow: 0 0 25px rgba(255, 255, 255, 0.05);\n      animation: glowPulse 4s ease-in-out infinite; \/* \u0627\u0636\u0627\u0641\u0629 \u0627\u0644\u0627\u0646\u064a\u0645\u064a\u0634\u0646 *\/\n    }\n\n    \/* \u062a\u0623\u062b\u064a\u0631 \u0625\u0636\u0627\u0621\u0629 \u062a\u0641\u0627\u0639\u0644\u064a \u0644\u0644\u0643\u0627\u0631\u062f *\/\n    @keyframes glowPulse {\n      0%, 100% {\n        box-shadow: 0 0 25px 6px rgba(116, 141, 146, 0.6);\n        background: linear-gradient(135deg, #8aa1a6, #222222);\n      }\n      50% {\n        box-shadow: 0 0 45px 15px rgba(116, 141, 146, 0.9);\n        background: linear-gradient(135deg, #a3b2b7, #000000);\n      }\n    }\n\n    \/* \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\n    .animated-bg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(-45deg, #748D92, #5a6d72, #4b5a5f, #748D92);\n      background-size: 400% 400%;\n      animation: gradientFlow 6s ease infinite;\n      z-index: 0;\n      opacity: 0.25;\n    }\n\n    @keyframes gradientFlow {\n      0% {\n        background-position: 0% 50%;\n      }\n      50% {\n        background-position: 100% 50%;\n      }\n      100% {\n        background-position: 0% 50%;\n      }\n    }\n\n    .card-content {\n      position: relative;\n      z-index: 2;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .logo {\n      width: 150px;\n      height: 150px;\n      margin-bottom: 20px;\n      animation: float 3s ease-in-out infinite;\n      border-radius: 50%;\n      box-shadow: 0 0 20px rgba(116, 141, 146, 0.45);\n    }\n\n    @keyframes float {\n      0%, 100% {\n        transform: translateY(0px);\n      }\n      50% {\n        transform: translateY(-10px);\n      }\n    }\n\n    .company-name-ar {\n      font-size: 21px; \/* \u0643\u0628\u0631\u062a\u0647 \u0634\u0648\u064a *\/\n      font-weight: 700;\n      color: white;\n      margin: 12px 0 5px;\n      white-space: nowrap; \/* \u0644\u062c\u0639\u0644 \u0627\u0644\u0646\u0635 \u0641\u064a \u0633\u0637\u0631 \u0648\u0627\u062d\u062f *\/\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 100%;\n    }\n\n    .company-name-en {\n      font-size: 18px; \/* \u0643\u0628\u0631\u062a\u0647 \u0634\u0648\u064a *\/\n      color: #dddddd;\n      margin-bottom: 25px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      max-width: 100%;\n    }\n\n    .cta-button {\n      background-color: #748D92;\n      color: white;\n      padding: 12px 30px;\n      font-size: 16px;\n      border: none;\n      border-radius: 25px;\n      text-decoration: none;\n      transition: all 0.3s ease;\n      cursor: pointer;\n      font-weight: 600;\n      box-shadow: 0 0 10px rgba(116, 141, 146, 0.6);\n    }\n\n    .cta-button:hover {\n      background-color: #5a6d72;\n      transform: translateY(-2px);\n      box-shadow: 0 0 20px rgba(116, 141, 146, 0.9);\n    }\n  <\/style><\/head><body><div class=\"card\"><!-- \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 --><div class=\"animated-bg\"><\/div><div class=\"card-content\"><img decoding=\"async\" class=\"logo\" src=\"https:\/\/velonweb.com\/wp-content\/uploads\/2025\/04\/new.png\" alt=\"\u0634\u0639\u0627\u0631 \u0627\u0644\u0634\u0631\u0643\u0629\" \/><div class=\"company-name-ar\">\u0634\u0645\u0648\u0633 \u0643\u064a\u0631 \u0644\u0644\u0639\u0644\u0627\u062c \u0627\u0644\u0637\u0628\u064a\u0639\u064a<\/div><div class=\"company-name-en\">Shumos Care Physiotherapy<\/div><a class=\"cta-button\" href=\"https:\/\/shumca.com\" target=\"_blank\">Visitez le site<\/a><\/div><\/div><\/body><\/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-667c227 e-flex e-con-boxed e-con e-parent\" data-id=\"667c227\" 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-a3a245e elementor-widget elementor-widget-html\" data-id=\"a3a245e\" 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-4b98732 e-flex e-con-boxed e-con e-parent\" data-id=\"4b98732\" 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-9f7d261 e-con-full e-flex e-con e-child\" data-id=\"9f7d261\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e7ce5a ct-advanced-heading elementor-widget elementor-widget-heading\" data-id=\"0e7ce5a\" 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\">Services\n<\/h2>\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-4c631c1f e-flex e-con-boxed e-con e-parent\" data-id=\"4c631c1f\" 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-576590d e-con-full e-flex e-con e-child\" data-id=\"576590d\" 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-79482543 elementor-widget elementor-widget-html\" data-id=\"79482543\" 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><html lang=\"ar\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>\u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/title><script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai:wght@400;700&display=swap\" rel=\"stylesheet\"><style>body {\n      font-family: 'Almarai', sans-serif;\n      text-align: right;\n    }\n\n    .card-bg {\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\n    @keyframes border-flow {\n      0% { transform: rotate(0deg); }\n      100% { transform: rotate(360deg); }\n    }\n\n    .animated-border {\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\n    @keyframes bounce-right {\n      0%, 100% { transform: translateX(0); }\n      50% { transform: translateX(5px); }\n    }\n\n    .animate-bounce-right {\n      animation: bounce-right 1s infinite;\n    }\n\n    .card-container {\n      width: 100%;\n      max-width: 500px;\n      position: relative;\n    }\n\n    .floating-particles {\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\n    @keyframes pulse {\n      0% { opacity: 0.5; }\n      50% { opacity: 1; }\n      100% { opacity: 0.5; }\n    }\n  <\/style><\/head><body class=\"flex items-center justify-center min-h-screen bg-slate-950 gap-8 flex-wrap p-4\"><!-- \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 --><div class=\"group relative card-container hover:scale-105 transition-transform duration-300\"><div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg\"><div class=\"animated-border\"><\/div><div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\"><div class=\"floating-particles\"><\/div><div class=\"relative z-10 text-right\"><h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">Forfait de base\n          <\/h3><p class=\"text-sm text-gray-300 mb-6 text-center\">Un forfait id\u00e9al pour les petites entreprises recherchant une pr\u00e9sence num\u00e9rique \u00e9l\u00e9gante et simple.\n          <\/p><div class=\"mt-4 space-y-4 text-white text-sm\"><div class=\"flex items-center gap-3 justify-end\"><p>Conception de site avec seulement 4 pages<\/p><div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\"><svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\"><path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div><\/div><div class=\"flex items-center gap-3 justify-end\"><p>Conception avec un mod\u00e8le pr\u00eat \u00e0 l\u2019emploi <\/p><div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\"><svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\"><path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div><\/div><div class=\"flex items-center gap-3 justify-end\"><p>Site en une seule langue <\/p><div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\"><svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\"><path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div><\/div><div class=\"flex items-center gap-3 justify-end\"><p>Support technique pendant 30 jours apr\u00e8s la livraison<\/p><div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\"><svg stroke=\"#748D92\" viewBox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\"><path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/div><\/div><\/div><!-- \u0632\u0631 --><a href=\"https:\/\/velonweb.com\/fr\/services\/\" class=\"mt-8 relative inline-block w-full text-center py-3 bg-gradient-to-r from-[#748D92] to-[#2E3944] rounded-xl overflow-hidden hover:shadow-[0_0_15px_3px_rgba(116,141,146,0.5)] transition-all duration-300 text-white font-bold\"><span class=\"relative z-10 flex items-center justify-center gap-2\">D\u00e9couvrez le forfait complet\n              <svg class=\"h-4 w-4 animate-bounce-right\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg><\/span><\/a><\/div><\/div><\/div><\/div><\/body><\/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-2ba38b8f e-con-full e-flex e-con e-child\" data-id=\"2ba38b8f\" 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-44ae8659 elementor-widget elementor-widget-html\" data-id=\"44ae8659\" 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<!-- \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 -->\n<div class=\"group relative card-container hover:scale-105 transition-transform duration-300\">\n  <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg\">\n    <!-- Animated Border -->\n    <div class=\"animated-border absolute -top-[150%] -left-[50%] w-[200%] h-[200%]\"><\/div>\n\n    <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n      <div class=\"absolute -left-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br from-[#748D92]\/20 to-transparent blur-2xl animate-pulse\"><\/div>\n\n      <div class=\"relative z-10 text-right\">\n        <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n Pack avanc\u00e9\n        <\/h3>\n        <p class=\"text-sm text-gray-300 mb-6 text-center\">\n Un pack complet pour les entreprises n\u00e9cessitant un site bilingue avec un aspect professionnel et des fonctionnalit\u00e9s suppl\u00e9mentaires.\n        <\/p>\n\n        <div class=\"mt-4 space-y-4 text-white text-sm\">\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Conception de site jusqu\u2019\u00e0 6 pages<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Conception d'un site enti\u00e8rement personnalis\u00e9<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Site en deux langues<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Support technique pendant 60 jours apr\u00e8s la livraison<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <a href=\"https:\/\/velonweb.com\/fr\/services\/\" class=\"mt-8 relative inline-block w-full text-center py-3 bg-gradient-to-r from-[#748D92] to-[#2E3944] rounded-xl overflow-hidden hover:shadow-[0_0_15px_3px_rgba(116,141,146,0.5)] transition-all duration-300 text-white font-bold\">\n          <span class=\"relative z-10 flex items-center justify-center gap-2\">\nD\u00e9couvrez le forfait complet            <svg class=\"h-4 w-4 animate-bounce-right\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/>\n            <\/svg>\n          <\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\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-305b9c86 e-con-full e-flex e-con e-child\" data-id=\"305b9c86\" 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-16d018da elementor-widget elementor-widget-html\" data-id=\"16d018da\" 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<!-- \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 -->\n<div class=\"group relative card-container hover:scale-105 transition-transform duration-300\">\n  <div class=\"relative overflow-hidden rounded-2xl p-[2px] shadow-2xl card-bg\">\n    <!-- Animated Border -->\n    <div class=\"animated-border absolute -top-[150%] -left-[50%] w-[200%] h-[200%]\"><\/div>\n\n    <div class=\"relative rounded-2xl p-6 bg-gradient-to-b from-[#748D92]\/10 to-[#111111]\/90 backdrop-blur-sm\">\n      <div class=\"absolute -left-16 -top-16 h-32 w-32 rounded-full bg-gradient-to-br from-[#748D92]\/20 to-transparent blur-2xl animate-pulse\"><\/div>\n\n      <div class=\"relative z-10 text-right\">\n        <h3 class=\"text-2xl font-bold uppercase tracking-wider font-sans text-center mb-2\" style=\"color: #748D92;\">\n Pack professionnel\n        <\/h3>\n        <p class=\"text-sm text-gray-300 mb-6 text-center\">\n La solution id\u00e9ale pour les grandes entreprises souhaitant un site complet et distinctif avec un design unique et des performances professionnelles.\n        <\/p>\n\n        <div class=\"mt-4 space-y-4 text-white text-sm\">\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p> Conception de site jusqu\u2019\u00e0 8 pages<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Conception et programmation enti\u00e8rement personnalis\u00e9es<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Site supportant jusqu\u2019\u00e0 3 langues<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n\n          <div class=\"flex items-center gap-3 justify-end\">\n            <p>Support technique pendant 100 jours apr\u00e8s la livraison<\/p>\n            <div class=\"flex h-6 w-6 items-center justify-center rounded-full bg-[#748D92]\/20\">\n              <svg stroke=\"#748D92\" viewbox=\"0 0 24 24\" fill=\"none\" class=\"h-4 w-4\">\n                <path d=\"M5 13l4 4L19 7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n              <\/svg>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <a href=\"https:\/\/velonweb.com\/fr\/services\/\" class=\"mt-8 relative inline-block w-full text-center py-3 bg-gradient-to-r from-[#748D92] to-[#2E3944] rounded-xl overflow-hidden hover:shadow-[0_0_15px_3px_rgba(116,141,146,0.5)] transition-all duration-300 text-white font-bold\">\n          <span class=\"relative z-10 flex items-center justify-center gap-2\">\nD\u00e9couvrez le forfait complet            <svg class=\"h-4 w-4 animate-bounce-right\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/>\n            <\/svg>\n          <\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\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-f8aa43d e-flex e-con-boxed e-con e-parent\" data-id=\"f8aa43d\" 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-fa54470 elementor-widget elementor-widget-html\" data-id=\"fa54470\" 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-5149d48 e-flex e-con-boxed e-con e-parent\" data-id=\"5149d48\" 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-f2aeacd e-con-full e-flex e-con e-child\" data-id=\"f2aeacd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ee4036 ct-advanced-heading elementor-widget elementor-widget-heading\" data-id=\"1ee4036\" 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\">Ce Qui Rend Mes Services Uniques\n<\/h2>\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-4f83f53 e-grid e-con-boxed e-con e-parent\" data-id=\"4f83f53\" 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\t\t<div class=\"elementor-element elementor-element-cabb419 elementor-widget elementor-widget-html\" data-id=\"cabb419\" 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<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai&display=swap\" rel=\"stylesheet\"><div class=\"parent\"><div class=\"card\"><div class=\"background-glow\"><\/div> <!-- \u062e\u0644\u0641\u064a\u0629 \u0645\u0636\u064a\u0626\u0629 \u0642\u0648\u064a\u0629 --><div class=\"content-box\"><h2 class=\"card-title\">Design moderne adapt\u00e9 \u00e0 vos go\u00fbts<\/h2><p class=\"card-content\">Je con\u00e7ois des sites modernes et tendance qui correspondent aux go\u00fbts du march\u00e9 saoudien et international.<\/p><\/div><\/div><\/div><style>.parent {\n    width: 400px;\n    padding: 20px;\n    perspective: 1200px;\n  }\n\n  .card {\n    position: relative;\n    width: 100%;\n    padding-top: 30px;\n    border: none;\n    background: none;\n    border-radius: 20px;\n    transform-style: preserve-3d;\n    animation: floatCard 4s ease-in-out infinite;\n    transition: all 0.3s ease;\n  }\n\n  .card:hover {\n    animation: slightTilt 1s ease-in-out infinite alternate, floatCard 4s ease-in-out infinite;\n  }\n\n  @keyframes floatCard {\n    0% {\n      transform: translateY(0px);\n    }\n    50% {\n      transform: translateY(-10px);\n    }\n    100% {\n      transform: translateY(0px);\n    }\n  }\n\n  @keyframes slightTilt {\n    0% {\n      transform: rotateX(20deg) rotateY(20deg) scale(1.03);\n    }\n    50% {\n      transform: rotateX(22deg) rotateY(18deg) scale(1.04);\n    }\n    100% {\n      transform: rotateX(20deg) rotateY(20deg) scale(1.03);\n    }\n  }\n\n  .background-glow {\n    position: absolute;\n    top: -20px;\n    left: -20px;\n    width: calc(100% + 40px);\n    height: calc(100% + 40px);\n    border-radius: 30px;\n    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0) 80%);\n    z-index: 0;\n    animation: glowPulse 3s ease-in-out infinite;\n    filter: blur(15px);\n    opacity: 0.8;\n  }\n\n  @keyframes glowPulse {\n    0% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0.6;\n    }\n  }\n\n  .content-box {\n    position: relative;\n    background: linear-gradient(135deg, #393E46, #748D92);\n    padding: 40px 30px;\n    font-family: 'Almarai', sans-serif;\n    text-align: right;\n    border-radius: 15px;\n    color: white;\n    z-index: 1;\n    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1) inset;\n    overflow: hidden;\n    transition: all 0.5s ease-in-out;\n  }\n\n  \/* \u062a\u0623\u062b\u064a\u0631 \u0627\u0644\u0634\u064a\u0645\u0631 \u0628\u0639\u062f \u0627\u0644\u062a\u0639\u062f\u064a\u0644 *\/\n  .content-box::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 30%; \/* \u0635\u063a\u0631\u062a \u0627\u0644\u0634\u064a\u0645\u0631 *\/\n    height: 100%;\n    background: linear-gradient(\n      150deg,\n      rgba(76, 88, 91, 0) 0%,\n      rgba(76, 88, 91, 0.5) 50%,\n      rgba(76, 88, 91, 0) 100%\n    );\n    transform: skewX(-25deg);\n    animation: shimmer 2s infinite;\n    border-radius: 15px;\n    z-index: 2;\n  }\n\n  @keyframes shimmer {\n    0% {\n      left: -100%;\n    }\n    100% {\n      left: 130%;\n    }\n  }\n\n  .content-box .card-title {\n    font-size: 21px;\n    font-weight: 900;\n    margin: 0 0 20px 0;\n    font-family: 'Almarai', sans-serif;\n  }\n\n  .content-box .card-content {\n    font-size: 14px;\n    font-weight: 500;\n    margin: 0 8px 0px 8px;\n    line-height: 1.8;\n    font-family: 'Almarai', sans-serif;\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f556273 elementor-widget elementor-widget-html\" data-id=\"f556273\" 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<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai&display=swap\" rel=\"stylesheet\"><div class=\"parent\"><div class=\"card\"><div class=\"background-glow\"><\/div><div class=\"content-box\"><h2 class=\"card-title\">Ex\u00e9cution rapide des projets<\/h2><p class=\"card-content\">Je propose des d\u00e9lais de livraison courts sans retard, et je livre le site pr\u00eat dans les plus brefs d\u00e9lais.<\/p><\/div><\/div><\/div><style>.parent {\n    width: 400px;\n    padding: 20px;\n    perspective: 1200px;\n  }\n\n  .card {\n    position: relative;\n    width: 100%;\n    padding-top: 30px;\n    border: none;\n    background: none;\n    border-radius: 20px;\n    transform-style: preserve-3d;\n    animation: floatCard 4s ease-in-out infinite;\n    transition: all 0.3s ease;\n  }\n\n  .card:hover {\n    animation: slightTilt 1s ease-in-out infinite alternate, floatCard 4s ease-in-out infinite;\n  }\n\n  @keyframes floatCard {\n    0% { transform: translateY(0px); }\n    50% { transform: translateY(-10px); }\n    100% { transform: translateY(0px); }\n  }\n\n  @keyframes slightTilt {\n    0% { transform: rotateX(20deg) rotateY(20deg) scale(1.03); }\n    50% { transform: rotateX(22deg) rotateY(18deg) scale(1.04); }\n    100% { transform: rotateX(20deg) rotateY(20deg) scale(1.03); }\n  }\n\n  .background-glow {\n    position: absolute;\n    top: -20px;\n    left: -20px;\n    width: calc(100% + 40px);\n    height: calc(100% + 40px);\n    border-radius: 30px;\n    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(0,0,0,0) 80%);\n    z-index: 0;\n    animation: glowPulse 3s ease-in-out infinite;\n    filter: blur(15px);\n    opacity: 0.8;\n  }\n\n  @keyframes glowPulse {\n    0% { opacity: 0.6; }\n    50% { opacity: 1; }\n    100% { opacity: 0.6; }\n  }\n\n  .content-box {\n    position: relative;\n    background: linear-gradient(135deg, #393E46, #748D92);\n    padding: 40px 30px;\n    font-family: 'Almarai', sans-serif;\n    text-align: right;\n    border-radius: 15px;\n    color: white;\n    z-index: 1;\n    box-shadow: 0 0 30px rgba(255, 255, 255, 0.1) inset;\n    overflow: hidden;\n    transition: all 0.5s ease-in-out;\n  }\n\n  .content-box::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 30%;\n    height: 100%;\n    background: linear-gradient(\n      150deg,\n      rgba(76, 88, 91, 0) 0%,\n      rgba(76, 88, 91, 0.5) 50%,\n      rgba(76, 88, 91, 0) 100%\n    );\n    transform: skewX(-25deg);\n    animation: shimmer 2s infinite;\n    border-radius: 15px;\n    z-index: 2;\n  }\n\n  @keyframes shimmer {\n    0% { left: -100%; }\n    100% { left: 130%; }\n  }\n\n  .content-box .card-title {\n    font-size: 21px;\n    font-weight: 900;\n    margin: 0 0 20px 0;\n    font-family: 'Almarai', sans-serif;\n  }\n\n  .content-box .card-content {\n    font-size: 14px;\n    font-weight: 500;\n    margin: 0 8px 0px 8px;\n    line-height: 1.8;\n    font-family: 'Almarai', sans-serif;\n  }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-774ca07 elementor-widget elementor-widget-html\" data-id=\"774ca07\" 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<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Almarai&amp;display=swap\" rel=\"stylesheet\">\n\n<div class=\"parent\">\n  <div class=\"card\">\n    <div class=\"background-glow\"><\/div>\n    <div class=\"content-box\">\n      <h2 class=\"card-title\">Haute qualit\u00e9 \u00e0 un co\u00fbt abordable<\/h2>\n      <p class=\"card-content\">Je vous offre un service professionnel d'excellente qualit\u00e9 \u00e0 un prix raisonnable par rapport aux grandes entreprises.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- \u062a\u0642\u062f\u0631 \u062a\u0639\u064a\u062f \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0646\u0641\u0633 \u0627\u0644\u0640 CSS \u0627\u0644\u0644\u064a \u0641\u0648\u0642 \u0628\u062f\u0648\u0646 \u062a\u0643\u0631\u0627\u0631 -->\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>Excellence Digitale Unique \u00c9lite Digitale Excellence num\u00e9rique pr\u00e9sente professionnelle num\u00e9rique Ensemble, nous affinons les id\u00e9es et les transformons en un site impressionnant qui d\u00e9veloppe votre entreprise \u0632\u0631 \u062a\u0648\u0627\u0635\u0644 \u0623\u0646\u064a\u0642 Pr\u00eat \u00e0 d\u00e9couvrir votre site ? VelonWeb &#8211; \u062a\u0635\u0645\u064a\u0645 \u0628\u062f\u064a\u0644 \u0645\u0645\u064a\u0632 VELONWEB Velonweb La source des solutions technologiques innovantes en conception et d\u00e9veloppement de sites web. [&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-3020","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6},"page_title_panel":"","has_hero_section":"disabled","1f7524ba27561c265e6fd8b7c913ef1d":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"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":"breadcrumbs","enabled":false}],"a99e0e6d2427999ed1fbee2cfb893458":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","2fc489c98e1363321479953fa4b8cd68":"","hero_structure":"narrow","938576fa561f9aeaa8b7f4787fffda34":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"page_title_image_size":"full","parallax":{"desktop":false,"tablet":false,"mobile":false},"130da00d72d5a31684bc5e3e171fdcec":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":"30px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_font_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_background_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-6)"}}},"pageTitlePadding":{"top":"50px","bottom":"50px","left":"auto","right":"auto","linked":true},"8bc89b95f936a8ddaf48463530594767":"","page_structure_type":"default","9087b0fa00a0936481b758d6f5d71cbf":"","content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"custom","content_area_spacing":"none","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--theme-palette-color-8)"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"content_boxed_border":{"width":1,"style":"none","color":{"color":"rgba(44,62,80,0.2)"}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"83abb897cbf71723441bd51cfa807ea1":"","disable_featured_image":"no","disable_share_box":"no","disable_header":"no","disable_footer":"no"},"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages\/3020","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=3020"}],"version-history":[{"count":20,"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages\/3020\/revisions"}],"predecessor-version":[{"id":4206,"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/pages\/3020\/revisions\/4206"}],"wp:attachment":[{"href":"https:\/\/velonweb.com\/fr\/wp-json\/wp\/v2\/media?parent=3020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}