→ Agence web Lyon & Paris • NOVIUS • Sites internet sur mesure

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="MrQcRf0VcEhulHRb4iAgXpkQLjzGVZYzZ1kTKwzp"> <link rel="shortcut icon" href="https://www.novius.com/build/assets/favicon-DWrYNGcS.ico"> <link rel="canonical" href="https://www.novius.com"> <meta name="google-site-verification" content="4da_w5a1BKxzTh_Kw4hps6k0fIMVsN0fNLYRJX2b4uM">  <meta name="p:domain_verify" content="46b542d7fc501b448c4909e7bf7a8c1b" /> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Organization","name":"Novius","url":"https:\/\/www.novius.com","logo":{"@type":"ImageObject","url":"https:\/\/www.novius.com\/img\/logo-novius-cox.svg"},"address":[{"@type":"PostalAddress","addressLocality":"Paris, France","postalCode":"F-75002","streetAddress":"16 rue Saint Nicolas"},{"@type":"PostalAddress","addressLocality":"Lyon, France","postalCode":"F-69100","streetAddress":"55 avenue Galline"}]}</script> <title>→ Agence web Lyon & Paris • NOVIUS • Sites internet sur mesure</title> <meta name="description" content="Agence web Lyon spécialiste de la création de site web, réalisation de projets sur mesure et conception UX design à Lyon et Paris ☎ 04 27 46 20 00">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@NoviusInfo"> <meta name="twitter:creator" content="@NoviusInfo"> <meta property="og:locale" content="fr"> <meta property="og:type" content="website"> <meta property="og:title" content="→ Agence web Lyon &amp; Paris • NOVIUS • Sites internet sur mesure"> <meta name="twitter:title" content="→ Agence web Lyon &amp; Paris • NOVIUS • Sites internet sur mesure"> <meta property="og:description" content="Agence web Lyon spécialiste de la création de site web, réalisation de projets sur mesure et conception UX design à Lyon et Paris ☎ 04 27 46 20 00"> <meta name="twitter:description" content="Agence web Lyon spécialiste de la création de site web, réalisation de projets sur mesure et conception UX design à Lyon et Paris ☎ 04 27 46 20 00"> <meta property="og:url" content="https://www.novius.com"> <meta property="og:site_name" content="Novius Site 2023"> <meta property="og:image" content="https://www.novius.com/storage/https://www.novius.com/storage/file_manager_files/pages/banner/791996c2e4e852f1d647b984d5d5e367.png"> <meta name="twitter:image" content="https://www.novius.com/storage/https://www.novius.com/storage/file_manager_files/pages/banner/791996c2e4e852f1d647b984d5d5e367.png">  <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"WebSite","url":"https:\/\/www.novius.com","image":{"@type":"ImageObject","url":"https:\/\/www.novius.com\/img\/logo-novius-cox.svg"}}</script> <link rel="preload" as="style" href="https://www.novius.com/build/assets/app-Ck4CoZEg.css" /><link rel="preload" as="style" href="https://www.novius.com/build/assets/app-BXcpSXUv.css" /><link rel="modulepreload" href="https://www.novius.com/build/assets/app-3fcnewvy.js" /><link rel="stylesheet" href="https://www.novius.com/build/assets/app-Ck4CoZEg.css" data-navigate-track="reload" /><link rel="stylesheet" href="https://www.novius.com/build/assets/app-BXcpSXUv.css" data-navigate-track="reload" /><script type="module" src="https://www.novius.com/build/assets/app-3fcnewvy.js" data-navigate-track="reload"></script> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PSLR74B'); </script>  <script> var _paq = window._paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//novius.matomo.cloud/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '1']); // Add this code below within the Matomo JavaScript tracker code // Important: the tracker url includes the /matomo.php var secondaryTrackerUrl = 'https://t.novius.net/matomo.php'; var secondaryWebsiteId = 1; // Also send all of the tracking data to this other Matomo server, in website ID 77 _paq.push(['addTracker', secondaryTrackerUrl, secondaryWebsiteId]); // That's it! var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.setAttribute('rel', 'dns-prefetch'); g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  </head> <body class="relative antialiased text-primary font-base bg-white homepage_grille"> <nav role="navigation" aria-label="Accès rapide" class="-translate-y-full focus-within:translate-y-2 px-4 md:px-0 py-2 fixed left-0 md:left-4 top-0 z-[105] bg-primary w-[95%]" > <div class="container"> <ul class="flex items-center gap-4 text-white text-sm"> <li> <a class="js-no-smooth-scroll underline underline-offset-2 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-primary rounded-sm" href="#main-content" > Contenu </a> </li> <li> <a class="js-no-smooth-scroll underline underline-offset-2 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-primary rounded-sm" href="#main-menu" > Menu </a> </li> <li> <a class="js-no-smooth-scroll underline underline-offset-2 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-primary rounded-sm" href="#main-footer" > Pied de page </a> </li> </ul> </div> </nav> <div id="top-bar" class="hidden py-2 bg-primary lg:block sticky w-full top-0 left-0 right-0 h-[50px] z-100 transition-[top] duration-300"> <div class="container"> <div class="flex items-center justify-between"> <div class="flex items-center gap-4 "> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 fb" href="https://www.facebook.com/noviusfr/" rel="nofollow" target="_blank"> <svg width="20" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path> </svg> <span class="sr-only">Facebook de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 twitter" href="https://twitter.com/NoviusInfo" rel="nofollow" target="_blank"> <svg width="20" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path> </svg> <span class="sr-only">Twitter de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 linkedin" href="https://www.linkedin.com/company/novius_3/" rel="nofollow" target="_blank"> <svg width="20" class="svg-icon" aria-hidden="true" viewBox="0 0 32 32"> <path fill="currentColor" d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path fill="currentColor" d="M2 12h6v18h-6v-18z"></path> <path fill="currentColor" d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </svg> <span class="sr-only">LinkedIn de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 instagram" href="https://www.instagram.com/agencenovius/" rel="nofollow" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="svg-icon" aria-hidden="true" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 46.1c68.4 0 76.5 0.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-0.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-0.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s0.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2 0.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9-16.9 6.6-31.2 15.3-45.4 29.6-14.3 14.2-23 28.5-29.6 45.3-6.3 16.3-10.7 34.9-11.9 62.1-1.2 27.4-1.5 36.1-1.5 105.6s0.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.6 16.9 15.3 31.2 29.6 45.4 14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-0.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-0.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9-27.4-1.3-36.1-1.6-105.6-1.6v0z"></path> <path fill="currentColor" d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5c0-72.6-58.9-131.5-131.5-131.5zM256 341.3c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3z"></path> <path fill="currentColor" d="M423.4 119.3c0 16.955-13.745 30.7-30.7 30.7s-30.7-13.745-30.7-30.7c0-16.955 13.745-30.7 30.7-30.7s30.7 13.745 30.7 30.7z"></path> </svg> <span class="sr-only">Instagram de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 youtube" href="https://www.youtube.com/user/noviusTV" rel="nofollow" target="_blank"> <svg width="20" height="20" viewBox="0 0 26 18" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M12.5258 17.7575H12.5008C12.4233 17.7575 4.66957 17.7425 2.71332 17.2112C1.63759 16.9214 0.797502 16.0809 0.508316 15.005C0.156539 13.0204 -0.0133328 11.0079 0.000816017 8.99249C-0.00827256 6.97376 0.166196 4.95838 0.522066 2.97124C0.8192 1.89438 1.6556 1.04993 2.72957 0.742493C4.63207 0.242493 12.1721 0.242493 12.4921 0.242493H12.5183C12.5971 0.242493 20.3708 0.257493 22.3071 0.788743C23.3805 1.08 24.2189 1.91886 24.5096 2.99249C24.8725 4.98442 25.0429 7.00666 25.0183 9.03124C25.0271 11.0475 24.8522 13.0604 24.4958 15.045C24.2029 16.1195 23.3623 16.9583 22.2871 17.2487C20.3871 17.7525 12.8458 17.7575 12.5258 17.7575ZM10.0258 5.24874L10.0196 12.7487L16.5346 8.99874L10.0258 5.24874Z"/> </svg> <span class="sr-only">YouTube de Novius</span> </a> </div> <div class="flex items-center gap-6"> <div class="flex items-center gap-2 text-sm text-white"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span> <a aria-label="Visitez la page de l'agence de Lyon" class="hover:underline" href="/contact/novius-lyon">Lyon</a> - <a class="hover:underline" aria-label="Appeler l'agence de Lyon au 04 27 46 20 00" href="tel:0427462000">04 27 46 20 00</a> </span> </div> <div class="flex items-center gap-2 text-sm text-white"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span> <a aria-label="Visitez la page de l'agence de Paris" class="hover:underline" href="/contact/novius-paris">Paris</a> - <a class="hover:underline" aria-label="Appeler l'agence de Paris au 01 77 45 49 00" href="tel:0177454900">01 77 45 49 00</a> </span> </div> <a href="https://www.novius.com/contact" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[10px] px-5 text-xs leading-none"> Contact </a> </div> </div> </div> </div> <header role="banner" id="main-header" class="bg-white sticky top-0 lg:top-[50px] shadow-header z-100"> <div class=" container px-4 xl:px-16"> <div id="main-menu" class="flex items-center justify-between py-4"> <a class="block" href="https://www.novius.com"> <img width="193" height="50" loading="lazy" src="https://www.novius.com/build/assets/logo-novius-Bm8MbfS5.svg" alt="Agence Web Novius (retour à l'accueil)"> </a>  <div x-data="menu()" @keydown.window.escape="openMenu = false"> <div> <nav role="navigation" aria-label="Menu principal" class="hidden pointer-events-auto lg:block"> <ul id="menu-list" class="flex"> <li> <a href="https://www.novius.com/etude-de-cas" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Réalisations </a> </li> <li> <a href="https://www.novius.com/service" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Services </a> </li> <li> <a href="https://www.novius.com/actualites" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Blog </a> </li> <li> <a href="https://www.novius.com/atelier" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Ateliers </a> </li> <li> <a href="https://www.novius.com/novius-agence-digitale" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Agence </a> </li> <li> <a href="https://www.novius.com/recrutement" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Jobs </a> </li> <li> <a href="https://www.novius.com/contact/novius-paris" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Novius - Paris </a> </li> <li> <a href="https://www.novius.com/contact" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Contact </a> </li> </ul> </nav> <div class="relative z-10" x-show="openMenu"> <div class="fixed inset-0 overflow-hidden"> <div class="absolute inset-0 overflow-hidden"> <div x-show="openMenu" x-cloak class="bg-neutral-200/50 absolute inset-0"></div> <div class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none"> <div x-show="openMenu" x-cloak x-trap="openMenu" x-transition:enter="transform transition ease-in-out duration-500" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="pointer-events-auto w-screen max-w-full sm:max-w-md shadow-xl"> <div class="flex h-full flex-col overflow-y-scroll bg-white py-4 menu-wrapper" x-ref="menuList"> <div class="px-[0.938rem] sm:px-6 mb-4"> <div class="flex items-start justify-between"> <div class="block sm:hidden"> <svg aria-label="Agence Web Novius (retour à l'accueil)" width="48" height="48" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M151.66 130.31C152.45 130.02 153.23 129.76 153.99 129.52H154.08C156.211 128.868 158.396 128.413 160.61 128.16H160.69C162.623 127.948 164.572 127.922 166.51 128.08C167.807 128.188 169.094 128.392 170.36 128.69C170.36 128.69 171.22 32.86 64.0601 17C64.0601 17 53.4201 38.31 64.9901 70.08C103.5 68.71 132.82 100.64 151.66 130.31Z" fill="#4FA8AA" /> <path d="M47.6202 72.9C94.7402 59.37 130.14 96.32 151.67 130.31C156.069 128.609 160.768 127.823 165.48 128C150.4 92.42 109.87 28.92 13.8602 34.63C13.8602 34.63 5.86023 65.48 11.6302 93.43C13.8502 91.43 15.9902 89.66 16.9502 88.94C26.0603 81.6913 36.4697 76.2472 47.6202 72.9Z" fill="#143659" /> <path d="M141.28 135.58L141.41 135.49C143.424 134.192 145.518 133.023 147.68 131.99C123.26 93.72 96.2302 74.3 67.3202 74.3H67.2602C35.6102 74.3 11.9102 98 9.01021 102.11C5.69021 125.42 10.5602 143.98 23.5202 157.31C32.4002 166.44 50.1402 178 84.4102 181.44C96.4754 182.607 108.621 182.683 120.7 181.67C119.2 174.35 117.52 153.39 141.28 135.58Z" fill="#F05100" /> <path d="M176.27 135.58C167.13 130.17 155.89 131.4 143.77 139.09C120.36 156.62 123.71 176.6 125.04 181.72C153.7 185.72 176.56 183.39 186.34 175.45C187.774 174.386 188.962 173.026 189.824 171.463C190.687 169.9 191.204 168.17 191.34 166.39C192.04 155.88 187.06 141.92 176.27 135.58Z" fill="#143659" /> <path d="M175.42 106C171.585 96.0935 165.617 87.1522 157.94 79.8101C170.6 105.33 170.42 128.63 170.42 128.65C174.168 129.51 177.699 131.133 180.79 133.42C180.613 124.037 178.796 114.757 175.42 106Z" fill="#F05100" /> </svg> </div> <button class="flex items-center ml-auto text-primary" type="button" x-show="openMenu" x-on:click="openMenu = false"> <span class="mr-1 text-sm font-semibold">Fermer le menu</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <div class="menu flex flex-col px-0 sm:px-6"> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 75ms;"> <a href="https://www.novius.com/etude-de-cas" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Réalisations </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 150ms;"> <a href="https://www.novius.com/service" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Services </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 225ms;"> <a href="https://www.novius.com/actualites" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Blog </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 300ms;"> <a href="https://www.novius.com/atelier" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Ateliers </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 375ms;"> <a href="https://www.novius.com/novius-agence-digitale" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Agence </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 450ms;"> <a href="https://www.novius.com/recrutement" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Jobs </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 525ms;"> <a href="https://www.novius.com/contact/novius-paris" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Novius - Paris </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 600ms;"> <a href="https://www.novius.com/contact" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Contact </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="flex items-center gap-3 lg:hidden"> <div class="flex items-center gap-[10px]"> <a href="tel:0427462000" target="_blank"> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" /> </svg> <span class="sr-only">Appelez-nous au 04 27 46 20 00</span> </a> <a href="https://www.novius.com/contact"> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> </svg> <span class="sr-only">Contact</span> </a> </div> <button class="flex flex-col items-end" type="button" x-show="! openMenu" x-on:click="openMenu = true" :aria-label="openMenu ? 'Fermer le menu' : 'Ouvrir le menu'" aria-controls="menu-list" x-ref="burgerMenuButton" > <span class="w-[18px] bg-primary block h-[2px] mb-[6px] origin-[100%_0]" aria-hidden="true"></span> <span class="w-[18px] bg-primary block h-[2px] mb-[6px] scale-x-[0.8] origin-[100%_0]" aria-hidden="true"></span> <span class="w-[9px] bg-primary block h-[2px] scale-x-[0.6] origin-[100%_0]" aria-hidden="true"></span> </button> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('menu', () => ({ openMenu: false, init() { this.$watch('openMenu', () => { if (this.openMenu) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = null; setTimeout(() => { this.$refs.burgerMenuButton.focus(); }, 250); } }); } })); }); </script> </div> </div> </header> <main id="main-content" role="main"> <section class="container"> <div class="bg-grayBackground py-8"> <div class=" container px-4 xl:px-16"> <div class="flex md:items-center flex-col md:flex-row justify-between pt-0 md:pt-8 md:pb-8"> <div class="relative w-full flex flex-col-reverse md:grid grid-cols-12 gap-12"> <div class="col-span-1 md:col-span-7 lg:col-span-8 xl:col-span-8 flex flex-col gap-10"> <h1 class="text-4xl md:text-6xl xl:text-[65px] font-prompt text-primary font-bold"> Agence web <span class="block mt-[6px] text-2xl lg:text-4xl"> à Lyon, Paris, Annecy. </span> </h1> <div class="font-base text-primary text-2xl md:text-[27px] lg:text-[22px] lg:leading-9"> <p>Novius est une agence web indépendante basée à Lyon, Paris et Annecy. Nous accompagnons les entreprises dans leur transformation digitale et la réalisation de leurs objectifs sur le web.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> <a href="https://www.novius.com/developpement-de-sites-web" class="relative group flex flex-col items-center gap-y-6"> <img height="185" width="185" src="https://www.novius.com/build/assets/illus1-Bm6mSJRj.svg" alt=""> <p class="text-primary text-base font-semibold text-center group-hover:text-accent group-hover:underline transition-colors duration-200"> Développement de sites web </p> </a> <a href="https://www.novius.com/projets-web-sur-mesure" class="relative group flex flex-col items-center gap-y-6"> <img height="185" width="185" src="https://www.novius.com/build/assets/illus2-Die1JSGe.svg" alt=""> <p class="text-primary text-base font-semibold text-center group-hover:text-accent group-hover:underline transition-colors duration-200"> Projets web sur-mesure </p> </a> <a href="https://www.novius.com/conception-ux-ui" class="relative group flex flex-col items-center gap-y-6"> <img height="185" width="185" src="https://www.novius.com/build/assets/illus3-BKChakR9.svg" alt=""> <p class="text-primary text-base font-semibold text-center group-hover:text-accent group-hover:underline transition-colors duration-200"> Conception UX/UI </p> </a> </div> <div class="flex items-center justify-center"> <a href="https://calendly.com/thibaut-peysson/rdv-de-30-minutes" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Laissez-vous guider </a> </div> </div> <div class="col-span-1 md:col-span-5 lg:col-span-4 xl:col-span-4 hidden md:flex flex-col gap-10"> <div class="relative"> <video class="js-home-video rounded-[20px] shadow-homeVideo overflow-hidden lazy" loop muted preload="auto" playsinline disablepictureinpicture x-ref="ve" poster="https://www.novius.com/build/assets/video-cover-DxoKlAmO.png" > <source data-src="https://www.novius.com/build/assets/video-chiffres-ChAtYtp0.webm" type="video/webm"> <source data-src="https://www.novius.com/build/assets/video-chiffres-CcugmoSq.mp4" type="video/mp4"> </video> <div class="control-buttons"> <button type="button" class="js-play-btn home-video-action-btn" style="display:none"> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" /> </svg> <span class="sr-only">Lire la vidéo</span> </button> <button type="button" class="js-pause-btn home-video-action-btn"> <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5" /> </svg> <span class="sr-only">Mettre en pause la vidéo</span> </button> </div> <div class="absolute bottom-6 w-full flex items-center justify-center"> <a href="https://www.novius.com/actualites/video-des-chiffres-2024" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[0.938rem] px-5 text-xs"> Découvrir l'étude </a> </div> </div> </div> </div> </div> </div> </div> </section> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-white"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-primary"> L'agence </h2> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-wysiwyg-under-title" > <div class="container"> <div class="bg-white"> <div class="pt-4 pb-12 md:pb-20 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="flex flex-col items-center justify-center px-4 md:px-0"> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner prose-primary"> <p>Depuis plus de 25 ans, nous travaillons avec nos clients dans la définition et la réalisation de leurs stratégies digitales. Novius est une agence de communication digitale fondée sur une forte base technique. La bonne compréhension de l'environnement de nos clients et de leur stratégie globale est un préalable à toutes nos collaborations.</p><p> </p><p>Novius c'est <a href="https://www.novius.com/team-novius">35 collaborateurs</a>, à Lyon, Paris et Annecy qui sauront être vos partenaires du quotidien. Construisons ensemble le succès de votre dispositif digital. Avec Novius, faites de beaux web !</p><p> </p> </div> </div> </div> </div> </div> </div> <div class="vc-block block-cta" > <div class="container"> <div class="bg-white"> <div class=" w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class=" container px-4 xl:px-16"> <div class="flex items-center justify-center"> <a href="https://www.novius.com/novius-agence-digitale" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Découvrir l'agence </a> </div> </div> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-white py-[2.375rem] md:py-[3.25rem]"></div> </div> </div> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-grayBackground"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-primary"> Services </h2> <h3 class="my-4 text-2xl md:text-3xl font-prompt font-normal text-primary"> Ce qui vous rend unique ne se conçoit pas par magie </h3> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-wysiwyg-under-title" > <div class="container"> <div class="bg-grayBackground"> <div class="pt-4 pb-12 md:pb-20 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="flex flex-col items-center justify-center px-4 md:px-0"> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner prose-primary"> <p>Novius propose tous les services d'agence web nécessaires à la définition d'une stratégie digitale et à sa mise en place. La création d’un site internet nécessite un ensemble de compétences et de savoir-faire. Chez <a href="https://www.novius.com/novius-agence-digitale">Novius</a>, vous êtes accompagnés tout au long de votre projet par une équipe expérimentée et à votre écoute. De la conception à la mise en ligne en passant par le référencement, nous mettons tout en œuvre pour vous fournir un site internet de qualité qui vous ressemble. Nous proposons un panel de services complet.</p><p> </p> </div> </div> </div> </div> </div> </div> <div class="vc-block block-service-cards" > <div class="container"> <div class="bg-grayBackground"> <div class="pb-12 md:pb-20 md:pt-4 w-full"> <div class=" container px-4 xl:px-40 2xl:px-52"> <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/2e166b046e1ad114c6a41f9848c33f6d.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/2e166b046e1ad114c6a41f9848c33f6d.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Audits de sites web </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Pour savoir où aller, le mieux est de savoir d'où l'on part. Novius vous propose une série d'audits pour vous permettre de prendre les meilleures décisions possibles. </div> <a href="https://www.novius.com/service/audits-de-sites" class="focused-card-link"> <span class="sr-only"> Audits de sites web - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/a0e1beed393d69f6bbf34d515c56a9c3.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/a0e1beed393d69f6bbf34d515c56a9c3.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Stratégies digitales </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Nous avons mis en place une méthode de conception établie à partir fondements de l'expérience utilisateur (UX). Pour tous les projets, des plus petits aux plus ambitieux. </div> <a href="https://www.novius.com/service/strategies-digitales" class="focused-card-link"> <span class="sr-only"> Stratégies digitales - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/aeb4b2029a5b5c8f341b3383ae0a0366.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/b19238db390541cca8b0675a33ce26c1.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Création de sites internet </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Sites vitrines, sites sur-mesure, Applications métiers, Novius crée des projets web depuis plus de 25 ans. Notre positionnement : des relations durables, des projets robustes. </div> <a href="https://www.novius.com/service/sites-internet" class="focused-card-link"> <span class="sr-only"> Création de sites internet - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/29f3b85a20987b31c20f2558ce577e43.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/29f3b85a20987b31c20f2558ce577e43.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Création de sites e-commerce </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> La mise en place d'un projet e-commerce est un projet d'entreprise à part entière qui mobilisera tous ses services. Novius saura vous accompagner à chaque étape. </div> <a href="https://www.novius.com/service/sites-e-commerce" class="focused-card-link"> <span class="sr-only"> Création de sites e-commerce - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/4cf4ff2e22e595a2c5e465c198db4fa3.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/4cf4ff2e22e595a2c5e465c198db4fa3.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Contenu et référencement naturel (SEO) </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Sur le web, le contenu est roi ! La rédaction web est une activité essentielle dont on mésestime souvent le temps nécessaire à y consacrer. </div> <a href="https://www.novius.com/service/redaction-de-contenus-et-seo" class="focused-card-link"> <span class="sr-only"> Contenu et référencement naturel (SEO) - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/548c7fdac34dd9411e467c0561113b76.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/548c7fdac34dd9411e467c0561113b76.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Community management </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Communication, fidélisation, acquisition, il n'est pas question de savoir si on les utilise les réseaux sociaux, mais comment on les utilise. </div> <a href="https://www.novius.com/service/community-management" class="focused-card-link"> <span class="sr-only"> Community management - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/91bc6b66d717f65077e2f361b1981d1a.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/91bc6b66d717f65077e2f361b1981d1a.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Amélioration continue </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> L'amélioration continue est plus qu'une méthode de travail, c'est un état d'esprit... Et c'est le nôtre. </div> <a href="https://www.novius.com/service/amelioration-continue" class="focused-card-link"> <span class="sr-only"> Amélioration continue - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/services/logo_off/6d6f7bd7a877c319382ed5dc9fe7a57d.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/services/logo_on/6d6f7bd7a877c319382ed5dc9fe7a57d.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Hébergement </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Novius vous propose une solution complète et évolutive pour héberger chaque site web réalisé par ses soins. </div> <a href="https://www.novius.com/service/hebergement" class="focused-card-link"> <span class="sr-only"> Hébergement - En savoir plus </span> </a> </div> </li> <li class="service-card relative flex flex-col gap-4 group py-12 px-8 bg-white hover:bg-primary border border-transparent rounded-cards transition-colors duration-200"> <div class="text-accent flex flex-col justify-center items-center"> <img width="80" height="80" class="group-hover:hidden" src="https://www.novius.com/storage/file_manager_files/ico-accessibility-off.svg" alt=""> <img width="80" height="80" class="hidden group-hover:block" src="https://www.novius.com/storage/file_manager_files/ico-accessibility-on.svg" alt=""> <p class="mt-4 text-primary group-hover:text-white transition-colors duration-200 text-lg font-base font-semibold text-center"> Accessibilité numérique </p> </div> <div> <div class="font-base text-primary group-hover:text-white text-base transition-colors duration-200"> Chez Novius, notre volonté est d'intégrer l'accessibilité numérique à tous les étapes de votre projet, pour rendre le web accessible à tous. </div> <a href="https://www.novius.com/service/accessibilite-numerique" class="focused-card-link"> <span class="sr-only"> Accessibilité numérique - En savoir plus </span> </a> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="vc-block block-cta" > <div class="container"> <div class="bg-grayBackground"> <div class=" w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class=" container px-4 xl:px-16"> <div class="flex items-center justify-center"> <a href="#contact" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Nous contacter </a> </div> </div> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-grayBackground py-4 md:py-[1.563rem]"></div> </div> </div> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-white"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-primary"> Les chiffres du web </h2> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-wysiwyg-under-title" > <div class="container"> <div class="bg-white"> <div class="pt-4 pb-12 md:pb-20 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="flex flex-col items-center justify-center px-4 md:px-0"> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner prose-primary"> <p>Les données chiffrées sont essentielles pour concevoir un site web performant, référencé et surtout qui répond aux objectifs visés. Notre agence web exploite ces données pour optimiser l'expérience utilisateur, analyser les tendances du marché et améliorer le positionnement SEO. Nous exploitons ces données chiffrées pour assurer le succès de votre projet en ligne.</p><p> </p> </div> </div> </div> </div> </div> </div> <div class="vc-block block-numbers-selection" > <div class="container"> <div class="bg-white"> <div class="pb-12 md:pb-20 md:pt-4 w-full"> <div class=" container px-4 xl:px-40 2xl:px-52"> <ul class="flex flex-col flex-wrap md:flex-row items-center md:items-stretch justify-center md:-mx-6"> <li class="number-card w-full sm:w-1/2 lg:w-1/3 py-4 md:px-6 md:py-6"> <div class="relative js-dynamic-content-wrapper flex flex-col gap-8 p-8 group items-center bg-creamBackground rounded-[1.25rem] shadow-numberCards hover:shadow-numberCardsHover transition-shadow duration-300 h-full"> <h4 class="text-primary text-2xl font-semibold lg:min-h-[6rem] text-center"> Les internautes scrollent-ils ? </h4> <img width="223" height="154" class="object-contain" src="https://www.novius.com/storage/file_manager_convert/7/1/752/fly/6abcf3a7edccc393d193e6969b8ceaf4/0184687d53394bf605a67153ae9b4599.png" alt=""> <div class="text-accent flex flex-col font-semibold justify-center text-center"> <p class="block font-bold leading-none text-[clamp(3rem,4vw,5rem)]">57 %</p> <p class="mx-auto max-w-[80%] text-[#cf4920]">de taux de scroll moyen sur les pages d'un site web. </p> </div> <div class="mt-auto"> <a href="https://www.novius.com/chiffres/scroll-moyen" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[0.938rem] px-5 text-xs"> Comment y remédier ? </a> </div> </div> </li> <li class="number-card w-full sm:w-1/2 lg:w-1/3 py-4 md:px-6 md:py-6"> <div class="relative js-dynamic-content-wrapper flex flex-col gap-8 p-8 group items-center bg-creamBackground rounded-[1.25rem] shadow-numberCards hover:shadow-numberCardsHover transition-shadow duration-300 h-full"> <h4 class="text-primary text-2xl font-semibold lg:min-h-[6rem] text-center"> L'UX n'est-il qu'un phénomène de mode </h4> <img width="223" height="154" class="object-contain" src="https://www.novius.com/storage/file_manager_convert/7/7/758/fly/69bac9003d13dc27d2c55d008b5ce937/6e4de8106154941995139b98e42f4ea0.png" alt=""> <div class="text-accent flex flex-col font-semibold justify-center text-center"> <p class="block font-bold leading-none text-[clamp(3rem,4vw,5rem)]">88 %</p> <p class="mx-auto max-w-[80%] text-[#cf4920]">des visiteurs ne reviennent pas sur un site après une mauvaise expérience. </p> </div> <div class="mt-auto"> <a href="https://www.novius.com/chiffres/ux-phenomene-de-mode" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[0.938rem] px-5 text-xs"> Quelles sont les raisons ? </a> </div> </div> </li> <li class="number-card w-full sm:w-1/2 lg:w-1/3 py-4 md:px-6 md:py-6"> <div class="relative js-dynamic-content-wrapper flex flex-col gap-8 p-8 group items-center bg-creamBackground rounded-[1.25rem] shadow-numberCards hover:shadow-numberCardsHover transition-shadow duration-300 h-full"> <h4 class="text-primary text-2xl font-semibold lg:min-h-[6rem] text-center"> Le design est-il important ? </h4> <img width="223" height="154" class="object-contain" src="https://www.novius.com/storage/file_manager_convert/7/8/759/fly/73e9d3d30186b109322742d74ef73a22/c6d7647dd9ef52d03dd4a646439c7203.png" alt=""> <div class="text-accent flex flex-col font-semibold justify-center text-center"> <p class="block font-bold leading-none text-[clamp(3rem,4vw,5rem)]">50</p> <p class="text-2xl mx-auto max-w-[80%] text-[#cf4920]">millisecondes </p> <p class="mx-auto max-w-[80%] text-[#cf4920]">sont nécessaires aux visiteurs pour se forger une opinion d'un site. </p> </div> <div class="mt-auto"> <a href="https://www.novius.com/chiffres/design-site-web" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[0.938rem] px-5 text-xs"> Comment c'est possible ? </a> </div> </div> </li> </ul> </div> </div> </div> </div> </div> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-white"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-primary"> Nos clients </h2> <h3 class="my-4 text-2xl md:text-3xl font-prompt font-normal text-primary"> Nous sommes fiers de nos collaborations </h3> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div x-data="handleClients()" x-ref="clientsBlock" class="vc-block container-client" > <div class="container"> <div class="py-16 sm:py-0 bg-white text-primary"> <div class=" container px-4 xl:px-16">  <div class="hidden lg:flex font-base text-base font-medium justify-between px-1 pt-1 pb-16 text-primary relative overflow-hidden"> <button x-ref="allSectors" type="button" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" x-on:click="handleSector(null)" aria-label="Filtrer par tous les secteurs" > Tous </button> <button type="button" x-on:click="handleSector(1)" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" :class="{'underline text-accent': selectedSector === 1}" :aria-current="selectedSector === 1" aria-label="Filtrer les réalisations par Culture & Média" > Culture & Média </button> <button type="button" x-on:click="handleSector(2)" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" :class="{'underline text-accent': selectedSector === 2}" :aria-current="selectedSector === 2" aria-label="Filtrer les réalisations par Industrie" > Industrie </button> <button type="button" x-on:click="handleSector(3)" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" :class="{'underline text-accent': selectedSector === 3}" :aria-current="selectedSector === 3" aria-label="Filtrer les réalisations par Sports & loisirs" > Sports & loisirs </button> <button type="button" x-on:click="handleSector(4)" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" :class="{'underline text-accent': selectedSector === 4}" :aria-current="selectedSector === 4" aria-label="Filtrer les réalisations par Distribution" > Distribution </button> <button type="button" x-on:click="handleSector(5)" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" :class="{'underline text-accent': selectedSector === 5}" :aria-current="selectedSector === 5" aria-label="Filtrer les réalisations par Service & Associatif" > Service & Associatif </button> <button type="button" x-on:click="handleSector(8)" class="px-2 cursor-pointer text-base font-semibold hover:text-accent hover:underline transition-colors duration-200 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-white rounded-sm" :class="{'underline text-accent': selectedSector === 8}" :aria-current="selectedSector === 8" aria-label="Filtrer les réalisations par E-commerce" > E-commerce </button> <div class="flex items-center justify-center absolute left-1/2 -translate-x-1/2 bottom-4"> <button type="button" class="button inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[10px] px-5 text-xs leading-none translate-y-[100px] focus-within:translate-y-2" x-on:click="handleClientsJump('down')" > Passer la liste des clients ? </button> </div> </div>  <div x-ref="clientsList" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-x-8 gap-y-20 md:pb-16 relative p-1 overflow-hidden" > <a class="flex justify-center" href="/etude-de-cas/federation-internationale-de-ski" :class="{'opacity-[0.15]': selectedSector && ![3].includes(selectedSector)}" :aria-hidden="selectedSector && ![3].includes(selectedSector)" :tabindex="selectedSector && ![3].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Fédération Internationale de Ski" > <img x-show="!selectedSector || ![3].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/1517671633c390304ebd38e8d6ff5269.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [3].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/1517671633c390304ebd38e8d6ff5269.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/gerflor" :class="{'opacity-[0.15]': selectedSector && ![2].includes(selectedSector)}" :aria-hidden="selectedSector && ![2].includes(selectedSector)" :tabindex="selectedSector && ![2].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Gerflor" > <img x-show="!selectedSector || ![2].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/c231b23aa504a376f009c03ba82df958.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [2].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/c231b23aa504a376f009c03ba82df958.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/moulin-rouge" :class="{'opacity-[0.15]': selectedSector && ![1,8].includes(selectedSector)}" :aria-hidden="selectedSector && ![1,8].includes(selectedSector)" :tabindex="selectedSector && ![1,8].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Moulin Rouge" > <img x-show="!selectedSector || ![1,8].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/3764e57966a903d34a2de35928d33fbc.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1,8].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/65ed32fc19a3477297bfb5ab12c05536.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/cuisines-aviva" :class="{'opacity-[0.15]': selectedSector && ![4].includes(selectedSector)}" :aria-hidden="selectedSector && ![4].includes(selectedSector)" :tabindex="selectedSector && ![4].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Cuisines AvivA" > <img x-show="!selectedSector || ![4].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/68a4f36366c04c35b52e851b09bfb056.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [4].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/68a4f36366c04c35b52e851b09bfb056.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/be-naos" :class="{'opacity-[0.15]': selectedSector && ![4].includes(selectedSector)}" :aria-hidden="selectedSector && ![4].includes(selectedSector)" :tabindex="selectedSector && ![4].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Bioderma" > <img x-show="!selectedSector || ![4].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/7cafc08e7ecb7eacd74010a730f7e3b1.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [4].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/7cafc08e7ecb7eacd74010a730f7e3b1.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/care-france" :class="{'opacity-[0.15]': selectedSector && ![5].includes(selectedSector)}" :aria-hidden="selectedSector && ![5].includes(selectedSector)" :tabindex="selectedSector && ![5].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de CARE France" > <img x-show="!selectedSector || ![5].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/57681a8bc3385f3b3bc84709def025ab.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [5].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/0ae8b0032ce91fa70237a29c31fa186a.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/le-carreau-du-temple" :class="{'opacity-[0.15]': selectedSector && ![1,3].includes(selectedSector)}" :aria-hidden="selectedSector && ![1,3].includes(selectedSector)" :tabindex="selectedSector && ![1,3].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Carreau du Temple" > <img x-show="!selectedSector || ![1,3].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/5ec145115e24fc187a4860018bd838d4.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1,3].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/5ec145115e24fc187a4860018bd838d4.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/la-cinematheque-francaise" :class="{'opacity-[0.15]': selectedSector && ![1].includes(selectedSector)}" :aria-hidden="selectedSector && ![1].includes(selectedSector)" :tabindex="selectedSector && ![1].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Cinémathèque Française" > <img x-show="!selectedSector || ![1].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/a2d4ee5e9045d748ce9bd70b0d22af86.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/a2d4ee5e9045d748ce9bd70b0d22af86.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/portail-malin" :class="{'opacity-[0.15]': selectedSector && ![5].includes(selectedSector)}" :aria-hidden="selectedSector && ![5].includes(selectedSector)" :tabindex="selectedSector && ![5].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de La Poste" > <img x-show="!selectedSector || ![5].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/c4585aa0840e33934384c5e79841b9c3.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [5].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/c4585aa0840e33934384c5e79841b9c3.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/courchevel-meribel-2023" :class="{'opacity-[0.15]': selectedSector && ![3].includes(selectedSector)}" :aria-hidden="selectedSector && ![3].includes(selectedSector)" :tabindex="selectedSector && ![3].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Courchevel Méribel 2023" > <img x-show="!selectedSector || ![3].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/c105372126e7040f4ff50c8c0f913636.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [3].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/c105372126e7040f4ff50c8c0f913636.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="" :class="{'opacity-[0.15]': selectedSector && ![2].includes(selectedSector)}" :aria-hidden="selectedSector && ![2].includes(selectedSector)" :tabindex="selectedSector && ![2].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Edilians" > <img x-show="!selectedSector || ![2].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/88a54083fda2f2fd6a4a302881e64480.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [2].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/378b46b1a1e6d6279176ef12b9796a24.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/intex" :class="{'opacity-[0.15]': selectedSector && ![4,2].includes(selectedSector)}" :aria-hidden="selectedSector && ![4,2].includes(selectedSector)" :tabindex="selectedSector && ![4,2].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Intex" > <img x-show="!selectedSector || ![4,2].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/d673c29dc1134153c58e2f17890f148b.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [4,2].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/d673c29dc1134153c58e2f17890f148b.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="etude-de-cas/les-echos" :class="{'opacity-[0.15]': selectedSector && ![1,8].includes(selectedSector)}" :aria-hidden="selectedSector && ![1,8].includes(selectedSector)" :tabindex="selectedSector && ![1,8].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Les Echos" > <img x-show="!selectedSector || ![1,8].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/348035c7e78d5af7b1c8c9339e792df1.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1,8].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/348035c7e78d5af7b1c8c9339e792df1.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/le-parisien" :class="{'opacity-[0.15]': selectedSector && ![1,8].includes(selectedSector)}" :aria-hidden="selectedSector && ![1,8].includes(selectedSector)" :tabindex="selectedSector && ![1,8].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Le Parisien" > <img x-show="!selectedSector || ![1,8].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/41dec964c83170cd404dced231307fb6.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1,8].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/41dec964c83170cd404dced231307fb6.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="" :class="{'opacity-[0.15]': selectedSector && ![1].includes(selectedSector)}" :aria-hidden="selectedSector && ![1].includes(selectedSector)" :tabindex="selectedSector && ![1].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Institut Lumière" > <img x-show="!selectedSector || ![1].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/891517d6c7a48c1aa911e0cb19d5bc2f.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/e3750d6b25d894355b8b16a986d6b91a.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/mylan" :class="{'opacity-[0.15]': selectedSector && ![2].includes(selectedSector)}" :aria-hidden="selectedSector && ![2].includes(selectedSector)" :tabindex="selectedSector && ![2].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Mylan" > <img x-show="!selectedSector || ![2].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/0b2ab85ab6c6d931839470b07b441cd8.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [2].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/0b2ab85ab6c6d931839470b07b441cd8.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/conseil-superieur-du-notariat" :class="{'opacity-[0.15]': selectedSector && ![5].includes(selectedSector)}" :aria-hidden="selectedSector && ![5].includes(selectedSector)" :tabindex="selectedSector && ![5].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Conseil Supérieur du Notariat" > <img x-show="!selectedSector || ![5].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/c48d37a75ae025f646330da6851a608a.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [5].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/c48d37a75ae025f646330da6851a608a.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/office-franco-allemand-pour-la-jeunesse-ofaj" :class="{'opacity-[0.15]': selectedSector && ![5].includes(selectedSector)}" :aria-hidden="selectedSector && ![5].includes(selectedSector)" :tabindex="selectedSector && ![5].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Office Franco Allemand de la Jeunesse" > <img x-show="!selectedSector || ![5].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/f81894736a28a77104f0a6cb1ade9dce.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [5].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/f81894736a28a77104f0a6cb1ade9dce.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="" :class="{'opacity-[0.15]': selectedSector && ![1].includes(selectedSector)}" :aria-hidden="selectedSector && ![1].includes(selectedSector)" :tabindex="selectedSector && ![1].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de SACEM" > <img x-show="!selectedSector || ![1].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/4e039078c5e82019a6381969e14d2971.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/4e039078c5e82019a6381969e14d2971.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/solina" :class="{'opacity-[0.15]': selectedSector && ![2].includes(selectedSector)}" :aria-hidden="selectedSector && ![2].includes(selectedSector)" :tabindex="selectedSector && ![2].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Solina" > <img x-show="!selectedSector || ![2].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/6c78e66c9ed3208b76f7628bc4fa21d2.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [2].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/6c78e66c9ed3208b76f7628bc4fa21d2.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/ffc" :class="{'opacity-[0.15]': selectedSector && ![3].includes(selectedSector)}" :aria-hidden="selectedSector && ![3].includes(selectedSector)" :tabindex="selectedSector && ![3].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Fédération Française de Cyclisme" > <img x-show="!selectedSector || ![3].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/e6119760065914c30377f8fa6cf1caad.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [3].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/e6119760065914c30377f8fa6cf1caad.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/tigex" :class="{'opacity-[0.15]': selectedSector && ![4].includes(selectedSector)}" :aria-hidden="selectedSector && ![4].includes(selectedSector)" :tabindex="selectedSector && ![4].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Tigex" > <img x-show="!selectedSector || ![4].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/8fe97886abe71470d98f26f5e31fa3d8.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [4].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/e3e5a54cf7eb7571093bbd89141d26fe.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="" :class="{'opacity-[0.15]': selectedSector && ![1].includes(selectedSector)}" :aria-hidden="selectedSector && ![1].includes(selectedSector)" :tabindex="selectedSector && ![1].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Influencia" > <img x-show="!selectedSector || ![1].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/8cb399acda9f263179fcaabf0d0b2655.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/8cb399acda9f263179fcaabf0d0b2655.svg" width="140" height="140" alt=""> </a> <a class="flex justify-center" href="/etude-de-cas/cite-de-la-ceramique" :class="{'opacity-[0.15]': selectedSector && ![1,8].includes(selectedSector)}" :aria-hidden="selectedSector && ![1,8].includes(selectedSector)" :tabindex="selectedSector && ![1,8].includes(selectedSector) ? -1 : 0" aria-label="Voir la réalisation de Cité de la céramique de Sèvres" > <img x-show="!selectedSector || ![1,8].includes(selectedSector)" class="colored-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_color/fe3e68a96cd9e014530353deb0c26b1d.svg" width="140" height="140" alt=""> <img x-show="selectedSector && [1,8].includes(selectedSector)" class="no-color-picture lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/clients/logo_monochrome/fe3e68a96cd9e014530353deb0c26b1d.svg" width="140" height="140" alt=""> </a> <div class="flex items-center justify-center absolute left-1/2 -translate-x-1/2 bottom-4"> <button type="button" class="button inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[10px] px-5 text-xs leading-none translate-y-[65px] focus-within:translate-y-0" x-on:click="handleClientsJump('up')" > Revenir à la liste des clients ? </button> </div> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('handleClients', () => ({ selectedSector : null, handleSector(sectorId) { if (!sectorId) { this.selectedSector = null; return; } this.selectedSector = sectorId; // Focus on the 1st client logo setTimeout(() => { const firstClient = this.$refs.clientsList.querySelector('a:not([aria-hidden="true"])'); if (firstClient) { firstClient.focus(); } }, 100); }, /** * Focus on the next targetable element after the client's block * * @param {string} side - 'up' or 'down' */ handleClientsJump(side) { if (side === 'up') { // Focus "all sectors" button this.$refs.allSectors.focus(); return; } const clientsBlock = this.$refs.clientsBlock; const nextElement = clientsBlock.nextElementSibling; if (nextElement) { // Select all targetable elements const targetableElements = nextElement.querySelectorAll('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); // Focus on the 1st targetable element if (targetableElements.length) { targetableElements[0].focus(); } } } })); }); </script> </div> <div class="vc-block block-cta" > <div class="container"> <div class="bg-white"> <div class=" w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class=" container px-4 xl:px-16"> <div class="flex items-center justify-center"> <a href="#contact" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Nous contacter </a> </div> </div> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-white py-[2.375rem] md:py-[3.25rem]"></div> </div> </div> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-primary"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-white"> Ateliers </h2> <h3 class="my-4 text-2xl md:text-3xl font-prompt font-normal text-white"> Et si votre futur site web commençait par une pause ? </h3> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-wysiwyg-under-title" > <div class="container"> <div class="bg-primary"> <div class="pt-4 pb-12 md:pb-20 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="flex flex-col items-center justify-center px-4 md:px-0"> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner prose-white"> <p>Les Ateliers du Digital sont une série de conférences web qui visent à sensibiliser les professionnels aux sujets essentiels du numérique, d'une durée de deux heures environ. Il s'agit d'une présentation d'un sujet précis ponctuée d'exemples concrets.</p><p> </p><p>Pour aborder la refonte d'un site internet ou tout simplement, pour mettre en place une phase d'amélioration continue, les ateliers du digital sont la formule idéale pour faire le point sur les tendances actuelles. </p><p> </p> </div> </div> </div> </div> </div> </div> <div class="vc-block workshops-selection-block has-bg-color" > <div class="container"> <div class="bg-primary"> <div class=" w-full"> <div class=" container px-4 xl:px-16"> <div class="flex flex-wrap justify-center gap-y-5"> <div class="w-full md:w-1/2 lg:w-1/4 max-w-[365px] px-2.5"> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> <p class="text-sm text-black mb-3"> <time datetime="23/07/2024"> 23/07/2024 </time> </p> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">L'accessibilité numérique : êtes-vous concerné ?</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/09/40-66f2d551355b5.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/atelier/accessibilite-numerique" aria-label="L'accessibilité numérique : êtes-vous concerné ? - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> </div> <div class="w-full md:w-1/2 lg:w-1/4 max-w-[365px] px-2.5"> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">Les 5 étapes pour réussir son site web</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/09/31.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/atelier/etapes-refonte-de-site-web" aria-label="Les 5 étapes pour réussir son site web - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> </div> <div class="w-full md:w-1/2 lg:w-1/4 max-w-[365px] px-2.5"> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">Atelier formation : construire un cahier des charges efficace pour réaliser/refondre son site web</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/09/35.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/atelier/formation-cahier-des-charges" aria-label="Atelier formation : construire un cahier des charges efficace pour réaliser/refondre son site web - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> </div> <div class="w-full md:w-1/2 lg:w-1/4 max-w-[365px] px-2.5"> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">Webinar sur-mesure</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/09/32-66f2d1443644c.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/atelier/webinar-sur-mesure" aria-label="Webinar sur-mesure - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-primary py-4 md:py-[1.563rem]"></div> </div> </div> <div class="vc-block block-cta" > <div class="container"> <div class="bg-primary"> <div class=" w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class=" container px-4 xl:px-16"> <div class="flex items-center justify-center"> <a href="https://www.novius.com/atelier" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Voir tous nos ateliers </a> </div> </div> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-primary py-4 md:py-[1.563rem]"></div> </div> </div> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-primary"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-white"> Actus </h2> <h3 class="my-4 text-2xl md:text-3xl font-prompt font-normal text-white"> L'agence qui veille et qui web pour vous. </h3> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-news" > <div class="container"> <div class="bg-primary"> <div class="pb-12 md:pb-20 md:pt-4 w-full"> <div class=" container px-4 xl:px-16"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> <p class="text-sm text-black mb-3"> <time datetime="13 novembre 2024"> 13 novembre 2024 </time> </p> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">La playlist Novius de novembre</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/11/card-site-2.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/actualites/la-playlist-novius-de-novembre" aria-label="La playlist Novius de novembre - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> <p class="text-sm text-black mb-3"> <time datetime="05 novembre 2024"> 05 novembre 2024 </time> </p> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">#64 La veille web Novius de novembre</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/10/card-site-672347fc8dfa6.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/actualites/64-la-veille-web-novius-de-novembre" aria-label="#64 La veille web Novius de novembre - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> <p class="text-sm text-black mb-3"> <time datetime="18 octobre 2024"> 18 octobre 2024 </time> </p> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">Accessibilité numérique : que faire pour être conforme ?</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/10/conforme.jpg" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/actualites/accessibilite-numerique-que-faire-pour-etre-conforme" aria-label="Accessibilité numérique : que faire pour être conforme ? - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> <article class="card-small-image relative flex flex-col h-full group p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards" > <div class="card-container flex flex-col-reverse"> <header class="font-base js-dynamic-content-wrapper text-[#e2e2e2]"> <div class="flex items-center justify-between"> <p class="text-sm text-black mb-3"> <time datetime="12 octobre 2024"> 12 octobre 2024 </time> </p> </div> <h4 class="block font-prompt text-2xl font-bold text-primary mb-3 group-hover:text-accent [transition:all_.2s_ease]">Qui est soumis à l'obligation d'accessibilité numérique en 2024 ?</h4> </header> <div class="card-image relative mb-3 aspect-[394/359]"> <img src="https://www.novius.com/storage/file_manager_files/2024/10/200-0-e864a21fca84fc54f5d2ddd36d9970b8.png" alt="" class="rounded-[10px] aspect-[394/359] object-cover"> </div> </div> <a href="https://www.novius.com/actualites/qui-est-soumis-par-laccessibilite-numerique" aria-label="Qui est soumis à l'obligation d'accessibilité numérique en 2024 ? - Lire la suite" class="inline-block mt-auto underline underline-offset-4 hover:underline-offset-8 transition-all duration-200 text-accent" > <span class="absolute inset-0" aria-hidden="true"></span> Lire la suite </a> </article> </div> <div class="flex items-center justify-center mt-8 lg:mt-16"> <a href="https://www.novius.com/actualites" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Toutes les actualités </a> </div> </div> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-white py-[2.375rem] md:py-[3.25rem]"></div> </div> </div> <div class="vc-block block-title-subtitle-pin" > <div class="container"> <div class="bg-white"> <div class=" container px-4 xl:px-16"> <div class="pt-12 md:pt-20"> <div class="flex items-center flex-col justify-center text-center"> <h2 class="text-4xl md:text-[5rem] leading-none font-prompt font-bold text-primary"> Equipe </h2> <h3 class="my-4 text-2xl md:text-3xl font-prompt font-normal text-primary"> Sans eux, rien n'est possible </h3> <div aria-hidden="true"> <div class="rounded-[1.625rem] h-[3.375rem] w-[1.375rem] rotate-45 my-4 bg-palegreen"></div> </div> </div> </div> </div> </div> </div> </div> <div class="vc-block block-wysiwyg-under-title" > <div class="container"> <div class="bg-white"> <div class="pt-4 pb-12 md:pb-20 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="flex flex-col items-center justify-center px-4 md:px-0"> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner prose-primary"> <p>Notre agence web est composée de professionnels expérimentés. Qu'ils soient à Lyon, Paris ou Annecy, ils interviennent dans tous <a href="https://www.novius.com/service">les domaines du digital</a> (conseil, web design, gestion de projet, développement...) </p><p> </p> </div> </div> </div> </div> </div> </div> <div class="vc-block block-team" > <div class="wrapper custom-slider-container relative"> <div class="swiper-nav-arrows left-0"> <button type="button" class="swiper-btn-prev"> <svg class="w-6 h-6" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /> </svg> </button> <button type="button" class="swiper-btn-next"> <svg class="w-6 h-6" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /> </svg> </button> </div> <div class="container"> <div class=" container px-4 xl:px-16"> <div class="swiper js-team-slider !pb-10 lg:!pb-0 lg:!mb-10"> <div class="swiper-wrapper flex p-1"> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/dylan" aria-label="En savoir plus sur Dylan - Développeur back" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Dylan</p> <p class="block font-prompt text-base text-darkgray">Développeur back</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/dylan-coul-listing-670ce646207d0.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/dylan-coul-listing-670ce8ffd261f.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/johanna" aria-label="En savoir plus sur Johanna - Chargée de communication" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Johanna</p> <p class="block font-prompt text-base text-darkgray">Chargée de communication</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/johanna-nb-listing-670ce3a0207f1.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/johanna2-coul-listing.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/alva" aria-label="En savoir plus sur Alva - Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Alva</p> <p class="block font-prompt text-base text-darkgray">Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/1dee843b3f60e58d3fd14f3a15e95526.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/1dee843b3f60e58d3fd14f3a15e95526.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/alice" aria-label="En savoir plus sur Alice - Développeuse" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Alice</p> <p class="block font-prompt text-base text-darkgray">Développeuse</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/947872724a3898564cf8089d85906617.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/be2631cbbe62c128eaf57a9706f4d2ba.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/emmanuel-b" aria-label="En savoir plus sur Emmanuel - Administrateur Système et Réseaux" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Emmanuel</p> <p class="block font-prompt text-base text-darkgray">Administrateur Système et Réseaux</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/2b410659310a163c41ebd904a625b62c.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/8e9243f9c8643694622b381b728d295d.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/thibaut" aria-label="En savoir plus sur Thibaut - Directeur commercial" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Thibaut</p> <p class="block font-prompt text-base text-darkgray">Directeur commercial</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/fe127451338c58880eb77a010698cc36.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/fe127451338c58880eb77a010698cc36.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/Alexandre" aria-label="En savoir plus sur Alexandre - Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Alexandre</p> <p class="block font-prompt text-base text-darkgray">Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/alex-listing-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/alex-listing-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/jerome" aria-label="En savoir plus sur Jérôme - Directeur Général" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Jérôme</p> <p class="block font-prompt text-base text-darkgray">Directeur Général</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/98f46b9d424990969c02fd680a1f51b9.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/98f46b9d424990969c02fd680a1f51b9.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/nolwenn" aria-label="En savoir plus sur Nolwenn - Cheffe de projet" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Nolwenn</p> <p class="block font-prompt text-base text-darkgray">Cheffe de projet</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/nolwenn-listing-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/nolwenn-listing-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/tony" aria-label="En savoir plus sur Tony - Directeur technique" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Tony</p> <p class="block font-prompt text-base text-darkgray">Directeur technique</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/0ae2e7ecc720d12669dd30a9b48c24a2.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/0ae2e7ecc720d12669dd30a9b48c24a2.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/anthony" aria-label="En savoir plus sur Anthony - Président" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Anthony</p> <p class="block font-prompt text-base text-darkgray">Président</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/anthony-listing-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/anthony-listing-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/mathieu-x" aria-label="En savoir plus sur Mathieu - Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Mathieu</p> <p class="block font-prompt text-base text-darkgray">Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/543c1be6858f9c87609494ebfd0f4e1c.jpeg" alt="Photo professionnelle en noir et blanc de Mathieu Xavier, développeur en alternance chez Novius (format portrait)" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/4e7f87a964efe6702e2caee31718eacf.jpeg" alt="Photo professionnelle en noir et blanc de Mathieu Xavier, développeur en alternance chez Novius (format portrait)" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/paul" aria-label="En savoir plus sur Paul - Consultant digital" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Paul</p> <p class="block font-prompt text-base text-darkgray">Consultant digital</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/e5d730b3ad68cd60391f75f77ef8b047.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/e5d730b3ad68cd60391f75f77ef8b047.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/emmanuelle" aria-label="En savoir plus sur Emma - Cheffe de projet" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Emma</p> <p class="block font-prompt text-base text-darkgray">Cheffe de projet</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/165f4ab6fb88efdc95d5ec599642488e.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/d2a3a8e08ef17680d32c1436e853e083.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/antoinep" aria-label="En savoir plus sur Antoine - Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Antoine</p> <p class="block font-prompt text-base text-darkgray">Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/36a735e788c02fcea5d802e99bcdbc92.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/36a735e788c02fcea5d802e99bcdbc92.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/isabellep" aria-label="En savoir plus sur Isabelle - Cheffe de projet" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Isabelle</p> <p class="block font-prompt text-base text-darkgray">Cheffe de projet</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/isabelle-listing-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/isabelle-listing-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/benoit" aria-label="En savoir plus sur Benoît - Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Benoît</p> <p class="block font-prompt text-base text-darkgray">Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/63eefbbbbbcc8043ea4f93f31cd167af.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/22672ddadbf8051d2e29fef0ce58f22f.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/camille-t" aria-label="En savoir plus sur Camille - Cheffe de projet" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Camille</p> <p class="block font-prompt text-base text-darkgray">Cheffe de projet</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/a4d553f166457c0b84724b69f6ec82dd.jpeg" alt="Portrait professionnel de Camille Touzot, cheffe de projet chez Novius (format portrait)" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/a4d553f166457c0b84724b69f6ec82dd.jpeg" alt="Portrait professionnel de Camille Touzot, cheffe de projet chez Novius (format portrait)" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/thomas" aria-label="En savoir plus sur Thomas - Directeur Conseil" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Thomas</p> <p class="block font-prompt text-base text-darkgray">Directeur Conseil</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/thomas-nb-listing.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/thomas-coul-listing.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/veronique" aria-label="En savoir plus sur Véronique - Chargée de gestion" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Véronique</p> <p class="block font-prompt text-base text-darkgray">Chargée de gestion</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/vero-listing-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/vero-listing-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/william" aria-label="En savoir plus sur William - Développeur Front End" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">William</p> <p class="block font-prompt text-base text-darkgray">Développeur Front End</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/william-listing-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/william-listing-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/imane" aria-label="En savoir plus sur Imane - Développeuse" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Imane</p> <p class="block font-prompt text-base text-darkgray">Développeuse</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/sans-titre-1.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/imane-coul-listing-670cdf4abca0e.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/pauld" aria-label="En savoir plus sur Paul - Responsable communication & contenu" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Paul</p> <p class="block font-prompt text-base text-darkgray">Responsable communication & contenu</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/paulnord-nb-listing.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/paulnord-coul-listing.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/robin" aria-label="En savoir plus sur Robin - Lead Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Robin</p> <p class="block font-prompt text-base text-darkgray">Lead Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/f54115a2f8566bc7f47d4a9633724c05.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/f54115a2f8566bc7f47d4a9633724c05.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/frederic-1" aria-label="En savoir plus sur Frédéric - Directeur Artistique" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Frédéric</p> <p class="block font-prompt text-base text-darkgray">Directeur Artistique</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/5543d2e2098c1b260f34b109d6ff47e3.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/f3dae1ee764ab184c1ee8073871d6531.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/elise" aria-label="En savoir plus sur Elise - Cheffe de projet" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Elise</p> <p class="block font-prompt text-base text-darkgray">Cheffe de projet</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/4bf059c2e2acef27376acdf721dc86a8.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/4bf059c2e2acef27376acdf721dc86a8.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/gilles" aria-label="En savoir plus sur Gilles - Lead Développeur" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Gilles</p> <p class="block font-prompt text-base text-darkgray">Lead Développeur</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/0d45f4f98734c7b9cc5e227aa3e7aabf.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/7523771c70a1b9d49156aee3de1e3c87.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/fanni" aria-label="En savoir plus sur Fanni - Développeuse" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Fanni</p> <p class="block font-prompt text-base text-darkgray">Développeuse</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/fb61c2db3007d4c5e2580b7d71479c54.png" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/fb61c2db3007d4c5e2580b7d71479c54.png" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/annabelle" aria-label="En savoir plus sur Annabelle - Directrice de production" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Annabelle</p> <p class="block font-prompt text-base text-darkgray">Directrice de production</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/0b752348566bb1de6d08619f0460cdec.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/0b752348566bb1de6d08619f0460cdec.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/kevin" aria-label="En savoir plus sur Kévin - Lead développeur Front-End" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Kévin</p> <p class="block font-prompt text-base text-darkgray">Lead développeur Front-End</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/5ca47c33852789d3c8d0e73dfd54c2f3.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/5ca47c33852789d3c8d0e73dfd54c2f3.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/antonin" aria-label="En savoir plus sur Antonin - Directeur agence Paris" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Antonin</p> <p class="block font-prompt text-base text-darkgray">Directeur agence Paris</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/368ca0ac0f745628a4bd317a5f993a09.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/bf537930274eff117f71b82a87e5aee1.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/frederic" aria-label="En savoir plus sur Frédéric - Directeur Artistique" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Frédéric</p> <p class="block font-prompt text-base text-darkgray">Directeur Artistique</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/d3defe5d563c6ab0600135e3825128c4.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/d3defe5d563c6ab0600135e3825128c4.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/claire-marie" aria-label="En savoir plus sur Claire-Marie - Assistante de direction" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Claire-Marie</p> <p class="block font-prompt text-base text-darkgray">Assistante de direction</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/3222596156f5d211f908b09017bad761.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/0fa9a2fef67be672490ae84c58a98048.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/jean-francois" aria-label="En savoir plus sur Jean-François - Directeur Administratif et Financier" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Jean-François</p> <p class="block font-prompt text-base text-darkgray">Directeur Administratif et Financier</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture/7b96fe25d025549a2f2e1901f79c6f0f.jpeg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/employees/listing_picture_hover/e2fda5a2bf63d70f8e479c1b2cb3eae0.jpeg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/na%C3%AFm" aria-label="En savoir plus sur Naïm - Développeur Front" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Naïm</p> <p class="block font-prompt text-base text-darkgray">Développeur Front</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/naim-nb-listing-670ce721d74e5.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/naim-coul-listing-670ce72ec3130.jpg" alt="" loading="lazy"> </div> </a> </div> </div> <div class="swiper-slide"> <div class="w-[280px] md:w-[350px] 2xl:w-[442px]"> <a href="https://www.novius.com/team-novius/herve" aria-label="En savoir plus sur Hervé - Directeur Novius Cloud" class="card-simple relative flex flex-col-reverse justify-end block p-6 bg-white rounded-cards border-[1px] border-[solid] border-[grayBorder] overflow-hidden group outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-accent focus-visible:ring-offset-white [transition:all_.2s_ease] hover:shadow-cards " > <div class="card-simple-caption w-full mt-3"> <p class="block font-prompt text-3xl font-bold text-primary mb-1 group-hover:text-accent [transition:all_.2s_ease]">Hervé</p> <p class="block font-prompt text-base text-darkgray">Directeur Novius Cloud</p> </div> <div class="card-simple-image relative"> <img class="opacity-100 group-hover:opacity-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/herve-linsting-nb.jpg" alt="" loading="lazy"> <img class="opacity-0 group-hover:opacity-100 absolute top-0 left-0 rounded-cards inset-0 object-cover w-full transition-opacity duration-500" src="https://www.novius.com/storage/file_manager_files/2024/10/herve-linsting-coul.jpg" alt="" loading="lazy"> </div> </a> </div> </div> </div> </div> </div> </div> </div> <div class="flex items-center justify-center mb-20"> <a href="https://www.novius.com/team-novius" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Rencontrer l'équipe </a> </div> </div> <div class="vc-block block-bg-color mb-14" > <div class="!w-full max-w-[750px] lg:max-w-[914px] px-4 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="py-8 px-4 md:py-20 md:px-24 rounded-cards lg:max-w-[800px] mx-auto" style="background-color:#F9F9F9; " > <p class="text-center mb-2 text-primary" style=""> Pour résumer </p> <h2 class="text-center font-prompt text-2xl md:text-4xl font-extrabold mb-8 text-primary" style=""> La création de sites internet sur mesure comme ligne directrice </h2> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner mb-8" style="background-color:#F9F9F9; text-align: left" > <p>Fondée sur une forte base technique, Novius développe depuis plus de 20 des sites internet et des dispositifs innovants pour ses clients. Nous nous épanouissons lors de collaborations à long terme et sur des problématiques complexes à l'image de nos projets réalisés pour la Fédération Internationale de Ski ou France Télévision. Nous apprécions aussi fortement les sites qui font la part belle au contenu – sites vitrine, sites à vocation culturelle...</p><p> </p> </div> <div class="flex flex-col items-center justify-center"> <a href="https://calendly.com/thibaut-peysson/rdv-de-30-minutes" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Prendre rendez-vous </a> </div> </div> </div> </div> <div class="vc-block block-text-emphasis" > <div class=" w-full max-w-[750px] lg:max-w-[914px] px-4 mx-auto"> <h2 class="md:px-32 mb-9 md:mb-12 text-center text-primary font-semibold text-2xl md:text-[2rem] leading-tight"> <span class="block">FAQ</span> </h2> </div> </div> <div class="vc-block block-faq" > <div class="!w-full max-w-[750px] lg:max-w-[914px] px-4 pt-4 pb-12 md:pb-20 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="lg:max-w-[800px] mx-auto"> <dl class="questions-wrapper divide-y divide-grayBorder"> <div class="question py-4 md:py-5" x-data="{ expanded: false }" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" > <dt> <h3 class="text-lg md:text-xl font-semibold text-primary" itemprop="name" data-content-include > <button type="button" class="flex items-start justify-between w-full text-left hover:text-accent transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-white rounded-sm underline-offset-2" :class="{ 'text-accent underline': expanded, 'text-primary': ! expanded }" aria-expanded="false" :aria-expanded="expanded.toString()" aria-controls="accordion-panel-19" x-on:click="expanded = !expanded" > <span class="question-button-label" data-content-include>Quel est notre rôle en tant qu'agence web ?</span> <span class="question-button-icon"> <svg x-show="! expanded" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> <svg x-show="expanded" class="w-6 h-6" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> </svg> </span> </button> </h3> </dt> <dd id="accordion-panel-19" x-show="expanded" x-cloak x-collapse.duration.300ms itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="question-answer" data-content-exclude > <div itemprop="text" class="prose prose-primary md:prose-lg mt-4 js-wysiwyg-cleaner"> <p>Notre rôle en tant qu'agence web chez Novius est de fournir des services spécialisés liés à la création, au développement et à la gestion de sites web et d'applications en ligne. En tant qu'agence web, nous proposons des solutions complètes qui englobent la création de projets web sur-mesure, la conception graphique, le développement technique, l'optimisation pour les moteurs de recherche (SEO), la gestion de contenu, l'hébergement web, la maintenance et la sécurité.</p> <p>Notre objectif est de collaborer étroitement avec nos clients pour nous assurer que leurs besoins en ligne sont parfaitement pris en compte et que leurs objectifs commerciaux sont atteints. Nous disposons d'une équipe de professionnels spécialisés dans divers domaines, tels que le design, la programmation, le marketing en ligne et la gestion de projet, afin de fournir des solutions web sur mesure et adaptées aux besoins spécifiques de chaque client.</p> </div> </dd> </div> <div class="question py-4 md:py-5" x-data="{ expanded: false }" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" > <dt> <h3 class="text-lg md:text-xl font-semibold text-primary" itemprop="name" data-content-include > <button type="button" class="flex items-start justify-between w-full text-left hover:text-accent transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-white rounded-sm underline-offset-2" :class="{ 'text-accent underline': expanded, 'text-primary': ! expanded }" aria-expanded="false" :aria-expanded="expanded.toString()" aria-controls="accordion-panel-20" x-on:click="expanded = !expanded" > <span class="question-button-label" data-content-include>Quels services propose notre agence web ?</span> <span class="question-button-icon"> <svg x-show="! expanded" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> <svg x-show="expanded" class="w-6 h-6" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> </svg> </span> </button> </h3> </dt> <dd id="accordion-panel-20" x-show="expanded" x-cloak x-collapse.duration.300ms itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="question-answer" data-content-exclude > <div itemprop="text" class="prose prose-primary md:prose-lg mt-4 js-wysiwyg-cleaner"> <p>Nos services chez Novius couvrent un large éventail de solutions pour répondre aux besoins de nos clients en ligne. Cela va de la création du cahier des charges à l'hébergement, en passant par la mise en ligne de leur site web. Parmi nos offres, nous proposons des audits de sites web, la création de sites internet, la création de sites e-commerce, le développement de stratégies digitales, la mise en place de stratégies de communication, la gestion du contenu et l'optimisation pour les moteurs de recherche (SEO), le community management, l'amélioration continue, ainsi que l'hébergement web.</p> <p>Nous travaillons avec l'agence La Société Secrète pour compléter nos services : identité visuelle, charte graphique, image de marque, storytelling, shooting photos, vidéo...</p> <p>Notre équipe d'experts polyvalents nous permettent de concevoir des projets sur-mesure, parfaitement adaptés aux besoins individuels de chaque client et de ses produits / services ou de son secteur d'activité. </p> </div> </dd> </div> <div class="question py-4 md:py-5" x-data="{ expanded: false }" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" > <dt> <h3 class="text-lg md:text-xl font-semibold text-primary" itemprop="name" data-content-include > <button type="button" class="flex items-start justify-between w-full text-left hover:text-accent transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-white rounded-sm underline-offset-2" :class="{ 'text-accent underline': expanded, 'text-primary': ! expanded }" aria-expanded="false" :aria-expanded="expanded.toString()" aria-controls="accordion-panel-21" x-on:click="expanded = !expanded" > <span class="question-button-label" data-content-include>En quoi Novius peut être considéré comme une agence numérique ?</span> <span class="question-button-icon"> <svg x-show="! expanded" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> <svg x-show="expanded" class="w-6 h-6" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> </svg> </span> </button> </h3> </dt> <dd id="accordion-panel-21" x-show="expanded" x-cloak x-collapse.duration.300ms itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="question-answer" data-content-exclude > <div itemprop="text" class="prose prose-primary md:prose-lg mt-4 js-wysiwyg-cleaner"> <p>Novius peut être qualifiée à la fois d'agence web et d'agence numérique en raison de sa gamme de services diversifiée. En plus de la création de sites web et de sites e-commerce, Novius propose des services liés à l'audit de sites web, aux stratégies digitales, à la stratégie de communication, au contenu et au référencement naturel (SEO), au community management, à l'amélioration continue et à l'hébergement.</p> <p>Ces services englobent la conception, la promotion et la gestion de la présence en ligne, ce qui correspond aux attributs d'une agence numérique, tout en incluant les aspects traditionnels de la conception et du développement web, ce qui la qualifie également d'agence web.</p> </div> </dd> </div> <div class="question py-4 md:py-5" x-data="{ expanded: false }" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" > <dt> <h3 class="text-lg md:text-xl font-semibold text-primary" itemprop="name" data-content-include > <button type="button" class="flex items-start justify-between w-full text-left hover:text-accent transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-white rounded-sm underline-offset-2" :class="{ 'text-accent underline': expanded, 'text-primary': ! expanded }" aria-expanded="false" :aria-expanded="expanded.toString()" aria-controls="accordion-panel-23" x-on:click="expanded = !expanded" > <span class="question-button-label" data-content-include>Comment fonctionne notre agence web ?</span> <span class="question-button-icon"> <svg x-show="! expanded" class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> <svg x-show="expanded" class="w-6 h-6" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> </svg> </span> </button> </h3> </dt> <dd id="accordion-panel-23" x-show="expanded" x-cloak x-collapse.duration.300ms itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" class="question-answer" data-content-exclude > <div itemprop="text" class="prose prose-primary md:prose-lg mt-4 js-wysiwyg-cleaner"> <p>Notre agence web fonctionne en proposant un processus complet :</p> <p>1. Une compréhension approfondie des besoins et des objectifs de chaque client.</p> <p>2. Une planification détaillée et la conception sur mesure de la structure du site web ou de l'application. Nous nous concentrons sur l'expérience utilisateur, le design et les fonctionnalités, adaptant chaque élément aux exigences spécifiques de chaque projet.</p> <p>3. Une fois la proposition approuvée par le client, nous procédons au développement, à la programmation et à la création de contenu, en veillant à ce que chaque élément réponde parfaitement aux besoins particuliers du projet.</p> <p>4. Après la réalisation du projet, nous effectuons des tests rigoureux pour garantir la qualité et la fonctionnalité sur mesure.</p> <p>En outre, nous offrons également des services indépendants tels que la création de contenus, l'optimisation SEO ou l'hébergement, adaptés aux besoins particuliers de nos clients, même en dehors d'un projet complet. Notre agence web est dédiée à la personnalisation complète, que ce soit pour un projet complet ou des services individuels.</p> </div> </dd> </div> </dl> </div> </div> </div> </main> <div class="fixed bg-accent rounded-md right-5 w-[42px] h-[42px] border border-transparent hover:bg-white hover:border-accent text-white hover:text-accent transition-all duration-300 ease-in-out" :class="{ 'bottom-5': show, 'bottom-[-100px]': !show }" x-ref="backToTop" x-data="handleBackButton()" > <button type="button" class="flex items-center justify-center w-[42px] h-[42px] cursor-pointer" aria-label="Retour en haut de la page" x-on:click.prevent="scrollToTop()" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /> </svg> </button> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('handleBackButton', () => ({ show: false, isScrolling: false, init() { window.addEventListener('scroll', () => { if (!this.isScrolling) { window.requestAnimationFrame(() => { this.show = window.scrollY > 400; this.isScrolling = false; }); this.isScrolling = true; } }); }, scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); } })); }) </script> <footer id="main-footer" role="contentinfo"> <div class="container px-0"> <img src="https://www.novius.com/build/assets/footer-city-Be-HLhA-.svg" alt="" class="w-full"> </div> <div class="bg-primary py-8 lg:py-12"> <div class="container px-4 md:px-0"> <div class="footer-contact-informations lg:flex pb-12 border-b border-b-secondary">  <div class="w-full md:w-[30%] lg:w-[35%] mb-[30px] md:mb-0"> <p class="flex items-baseline justify-center md:justify-start text-3xl lg:text-5xl font-semibold text-white font-prompt before:content-[''] before:bottom-0 before:max-w-[50px] before:w-[10%] before:h-[2px] before:bg-white before:block before:mr-[10px]"> Contacts </p> <div class="mt-4"> <div class="flex items-center gap-4 hidden lg:flex"> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 fb" href="https://www.facebook.com/noviusfr/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path> </svg> <span class="sr-only">Facebook de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 twitter" href="https://twitter.com/NoviusInfo" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path> </svg> <span class="sr-only">Twitter de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 linkedin" href="https://www.linkedin.com/company/novius_3/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 32 32"> <path fill="currentColor" d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path fill="currentColor" d="M2 12h6v18h-6v-18z"></path> <path fill="currentColor" d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </svg> <span class="sr-only">LinkedIn de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 instagram" href="https://www.instagram.com/agencenovius/" rel="nofollow" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="svg-icon" aria-hidden="true" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 46.1c68.4 0 76.5 0.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-0.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-0.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s0.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2 0.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9-16.9 6.6-31.2 15.3-45.4 29.6-14.3 14.2-23 28.5-29.6 45.3-6.3 16.3-10.7 34.9-11.9 62.1-1.2 27.4-1.5 36.1-1.5 105.6s0.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.6 16.9 15.3 31.2 29.6 45.4 14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-0.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-0.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9-27.4-1.3-36.1-1.6-105.6-1.6v0z"></path> <path fill="currentColor" d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5c0-72.6-58.9-131.5-131.5-131.5zM256 341.3c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3z"></path> <path fill="currentColor" d="M423.4 119.3c0 16.955-13.745 30.7-30.7 30.7s-30.7-13.745-30.7-30.7c0-16.955 13.745-30.7 30.7-30.7s30.7 13.745 30.7 30.7z"></path> </svg> <span class="sr-only">Instagram de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 youtube" href="https://www.youtube.com/user/noviusTV" rel="nofollow" target="_blank"> <svg width="24" height="24" viewBox="0 0 26 18" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M12.5258 17.7575H12.5008C12.4233 17.7575 4.66957 17.7425 2.71332 17.2112C1.63759 16.9214 0.797502 16.0809 0.508316 15.005C0.156539 13.0204 -0.0133328 11.0079 0.000816017 8.99249C-0.00827256 6.97376 0.166196 4.95838 0.522066 2.97124C0.8192 1.89438 1.6556 1.04993 2.72957 0.742493C4.63207 0.242493 12.1721 0.242493 12.4921 0.242493H12.5183C12.5971 0.242493 20.3708 0.257493 22.3071 0.788743C23.3805 1.08 24.2189 1.91886 24.5096 2.99249C24.8725 4.98442 25.0429 7.00666 25.0183 9.03124C25.0271 11.0475 24.8522 13.0604 24.4958 15.045C24.2029 16.1195 23.3623 16.9583 22.2871 17.2487C20.3871 17.7525 12.8458 17.7575 12.5258 17.7575ZM10.0258 5.24874L10.0196 12.7487L16.5346 8.99874L10.0258 5.24874Z"/> </svg> <span class="sr-only">YouTube de Novius</span> </a> </div> </div> </div>  <div class="w-full lg:w-[70%] xl:w-[65%] block md:flex text-center md:text-left justify-between lg:justify-around text-[15px]"> <div class="footer-contact-infos text-white text-center lg:text-left"> <div class="mb-8"> <a class="hover:text-yellow hover:underline transition-colors duration-200 block mb-[2px] font-semibold" href="/contact/novius-paris">Agence web Paris</a> <p class="font-normal">2 rue de la Roquette<br /> 75011 Paris</p> </div> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="tel:0177454900" rel="nofollow"> 01 77 45 49 00 </a> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="mailto:paris@novius.com" rel="nofollow"> paris@novius.com </a> </div> <div class="footer-contact-infos text-white text-center lg:text-left"> <div class="mb-8"> <a class="hover:text-yellow hover:underline transition-colors duration-200 block mb-[2px] font-semibold" href="/contact/novius-lyon">Agence web Lyon</a> <p class="font-normal">55 avenue Galline<br /> 69100 Villeurbanne</p> </div> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="tel:0427462000" rel="nofollow"> 04 27 46 20 00 </a> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="mailto:lyon@novius.com" rel="nofollow"> lyon@novius.com </a> </div> <div class="footer-contact-infos text-white text-center lg:text-left"> <div class="mb-8"> <a class="hover:text-yellow hover:underline transition-colors duration-200 block mb-[2px] font-semibold" href="/contact-la-societe-secrete">Agence de communication Annecy</a> <p class="font-normal">5 avenue du Pré Félin<br /> 74940 Annecy</p> </div> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="tel:0983741160" rel="nofollow"> +33 (0)9 83 74 11 60 </a> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="mailto:annecy@novius.com" rel="nofollow"> annecy@novius.com </a> </div> </div> <div class="mt-8 flex justify-center lg:hidden"> <div class="flex items-center gap-4 items-center justify-center md:justify-start"> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 fb" href="https://www.facebook.com/noviusfr/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path> </svg> <span class="sr-only">Facebook de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 twitter" href="https://twitter.com/NoviusInfo" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path> </svg> <span class="sr-only">Twitter de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 linkedin" href="https://www.linkedin.com/company/novius_3/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 32 32"> <path fill="currentColor" d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path fill="currentColor" d="M2 12h6v18h-6v-18z"></path> <path fill="currentColor" d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </svg> <span class="sr-only">LinkedIn de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 instagram" href="https://www.instagram.com/agencenovius/" rel="nofollow" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="svg-icon" aria-hidden="true" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 46.1c68.4 0 76.5 0.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-0.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-0.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s0.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2 0.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9-16.9 6.6-31.2 15.3-45.4 29.6-14.3 14.2-23 28.5-29.6 45.3-6.3 16.3-10.7 34.9-11.9 62.1-1.2 27.4-1.5 36.1-1.5 105.6s0.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.6 16.9 15.3 31.2 29.6 45.4 14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-0.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-0.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9-27.4-1.3-36.1-1.6-105.6-1.6v0z"></path> <path fill="currentColor" d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5c0-72.6-58.9-131.5-131.5-131.5zM256 341.3c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3z"></path> <path fill="currentColor" d="M423.4 119.3c0 16.955-13.745 30.7-30.7 30.7s-30.7-13.745-30.7-30.7c0-16.955 13.745-30.7 30.7-30.7s30.7 13.745 30.7 30.7z"></path> </svg> <span class="sr-only">Instagram de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 youtube" href="https://www.youtube.com/user/noviusTV" rel="nofollow" target="_blank"> <svg width="24" height="24" viewBox="0 0 26 18" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M12.5258 17.7575H12.5008C12.4233 17.7575 4.66957 17.7425 2.71332 17.2112C1.63759 16.9214 0.797502 16.0809 0.508316 15.005C0.156539 13.0204 -0.0133328 11.0079 0.000816017 8.99249C-0.00827256 6.97376 0.166196 4.95838 0.522066 2.97124C0.8192 1.89438 1.6556 1.04993 2.72957 0.742493C4.63207 0.242493 12.1721 0.242493 12.4921 0.242493H12.5183C12.5971 0.242493 20.3708 0.257493 22.3071 0.788743C23.3805 1.08 24.2189 1.91886 24.5096 2.99249C24.8725 4.98442 25.0429 7.00666 25.0183 9.03124C25.0271 11.0475 24.8522 13.0604 24.4958 15.045C24.2029 16.1195 23.3623 16.9583 22.2871 17.2487C20.3871 17.7525 12.8458 17.7575 12.5258 17.7575ZM10.0258 5.24874L10.0196 12.7487L16.5346 8.99874L10.0258 5.24874Z"/> </svg> <span class="sr-only">YouTube de Novius</span> </a> </div> </div> </div> <div class="footer-contact-form block lg:flex gap-14 lg:justify-between"> <div id="contact" aria-hidden="true"></div> <div class="w-full md:mx-auto lg:mx-0 md:w-[70%] lg:w-[45%]"> <div class="bg-primary flex flex-col justify-start sm:justify-center w-full rounded-cards max-w-[800px] py-12 lg:pb-0 justify-center max-w-none" > <form method="POST" x-data="handleForm" data-action="https://www.novius.com/contact-form" x-ref="mainForm" @submit.prevent="submitForm" class="w-full, relative" > <input type="hidden" name="_token" value="MrQcRf0VcEhulHRb4iAgXpkQLjzGVZYzZ1kTKwzp" autocomplete="off"> <div id="my_name_t1Yln6iJ95H8QVd0_wrap" style="display: none" aria-hidden="true"> <input id="my_name_t1Yln6iJ95H8QVd0" name="my_name_t1Yln6iJ95H8QVd0" type="text" value="" autocomplete="nope" tabindex="-1"> <input name="valid_from" type="text" value="eyJpdiI6IlJUTDdDSVllV3hqRVR3QkM2NW5UY1E9PSIsInZhbHVlIjoiV1VHN2x5SkpCZitraWxzSkc1dWxtQT09IiwibWFjIjoiYjY5NjExY2M2NDZlNjVmYjFkODY2NjI0ZTI1ODhkODc4ZTRjZTFlNTgyNzlhNjFiODY4MDVjMmYzNTgxNjc2NSIsInRhZyI6IiJ9" autocomplete="off" tabindex="-1"> </div>  <div x-show="isLoading" class="absolute backdrop-blur-sm inset-0 flex items-center justify-center w-full h-full bg-white/60 z-40 sm:rounded-lg" x-cloak> <div role="status" x-show="isLoading"> <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin fill-accent z-50" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/> <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/> </svg> <span class="sr-only">Chargement...</span> </div> </div> <div class="my-4 text-white text-sm text"> <p>* ces champs sont obligatoires.</p> </div>  <fieldset class="mb-8"> <legend class="text-white text-sm mb-4 font-semibold">Je vous contacte pour :</legend> <div class="flex flex-wrap gap-x-7 gap-y-1"> <div class="flex items-center gap-x-3"> <input id="footer-form-674b8534b76161" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="1" x-ref="subject"> <label for="footer-form-674b8534b76161" class="block text-sm font-medium leading-6 text-white"> Un projet </label> </div> <div class="flex items-center gap-x-3"> <input id="footer-form-674b8534b76162" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="2" x-ref="subject"> <label for="footer-form-674b8534b76162" class="block text-sm font-medium leading-6 text-white"> Une candidature </label> </div> <div class="flex items-center gap-x-3"> <input id="footer-form-674b8534b76163" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="3" x-ref="subject"> <label for="footer-form-674b8534b76163" class="block text-sm font-medium leading-6 text-white"> Un partenariat </label> </div> <div class="flex items-center gap-x-3"> <input id="footer-form-674b8534b76164" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="4" x-ref="subject"> <label for="footer-form-674b8534b76164" class="block text-sm font-medium leading-6 text-white"> Vous dire bonjour </label> </div> </div> <p x-text="formErrors.subject ? formErrors.subject[0] : ''" class="mt-2 text-yellow text-sm"></p> </fieldset>  <div class="grid gap-x-6 gap-y-3 md:grid-cols-6"> <div class="md:col-span-3"> <label for="footer-form-674b8534b7616contact-lastname-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Nom * </label> <div class="mt-2"> <input type="text" name="lastname" required id="footer-form-674b8534b7616contact-lastname-input" autocomplete="family-name" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="30" :aria-describedby="formErrors && formErrors.lastname ? 'footer-form-674b8534b7616contact-lastname-input-error' : ''" x-ref="lastname" > </div> <p x-show="formErrors.lastname" id="footer-form-674b8534b7616contact-lastname-input-error" x-text="formErrors.lastname ? formErrors.lastname[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-3"> <label for="footer-form-674b8534b7616contact-firstname-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Prénom * </label> <div class="mt-2"> <input type="text" name="firstname" required id="footer-form-674b8534b7616contact-firstname-input" autocomplete="given-name" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="30" :aria-describedby="formErrors && formErrors.firstname ? 'footer-form-674b8534b7616contact-firstname-input-error' : ''" x-ref="firstname" > </div> <p x-show="formErrors.firstname" id="footer-form-674b8534b7616contact-firstname-input-error" x-text="formErrors.firstname ? formErrors.firstname[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-6"> <label for="footer-form-674b8534b7616contact-form-company-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Société </label> <div class="mt-2"> <input type="text" name="company" id="footer-form-674b8534b7616contact-form-company-input" autocomplete="organization" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="50" :aria-describedby="formErrors && formErrors.company ? 'footer-form-674b8534b7616contact-company-input-error' : ''" x-ref="company" > </div> <p x-show="formErrors.company" id="footer-form-674b8534b7616contact-company-input-error" x-text="formErrors.company ? formErrors.company[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-3"> <label for="footer-form-674b8534b7616contact-form-phone-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Téléphone </label> <div class="mt-2"> <input type="tel" name="phone" id="footer-form-674b8534b7616contact-form-phone-input" autocomplete="tel" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="20" :aria-describedby="formErrors && formErrors.phone ? 'footer-form-674b8534b7616contact-form-phone-input-error' : ''" x-ref="phone" > </div> <p x-show="formErrors.phone" id="footer-form-674b8534b7616contact-form-phone-input-error" x-text="formErrors.phone ? formErrors.phone[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-3"> <label for="footer-form-674b8534b7616contact-form-email-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > E-mail * </label> <div class="mt-2"> <input type="email" name="email" required id="footer-form-674b8534b7616contact-form-email-input" autocomplete="email" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="50" :aria-describedby="formErrors && formErrors.email ? 'footer-form-674b8534b7616contact-form-email-input-error' : ''" x-ref="email" > </div> <template x-if="formErrors.email"> <template x-for="error in formErrors.email"> <p id="footer-form-674b8534b7616contact-form-email-input-error" x-show="error" x-cloak x-text="error" class="mt-2 text-yellow text-sm"></p> </template> </template> </div> <div class="md:col-span-6"> <label for="footer-form-674b8534b7616contact-form-message-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Mon message * <br aria-hidden="true"> <span class="font-normal text-sm text-white"> (minimum 10 caractères, maximum 1000 caractères) </span> </label> <div class="mt-2"> <textarea id="footer-form-674b8534b7616contact-form-message-input" name="message" rows="3" required class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" minlength="10" maxlength="1000" :aria-describedby="formErrors && formErrors.message ? 'footer-form-674b8534b7616contact-form-message-input-error' : ''" x-ref="message" ></textarea> </div> <template x-if="formErrors.message"> <template x-for="error in formErrors.message"> <p id="footer-form-674b8534b7616contact-form-message-input-error" x-show="error" x-cloak x-text="error" class="mt-2 text-yellow text-sm"></p> </template> </template> </div> <div class="md:col-span-6"> <p class="block text-sm font-semibold leading-6 text-white hover:cursor-pointer"> Fichier joint <br><span class="text-sm text-white font-normal">(pdf, png, jpg, gif - maximum 6mo)</span> </p> <div class="mt-2"> <div class="relative w-full bg-white rounded-md"> <input type="file" name="attachment" id="footer-form-674b8534b7616file" tabindex="-1" class="sr-only" :aria-describedby="formErrors && formErrors.attachment ? 'footer-form-674b8534b7616file-error' : ''"> <label tabindex="0" class="js-form-file-focus block text-sm rounded-md hover:cursor-pointer py-[14px] px-3 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow" for="footer-form-674b8534b7616file" x-ref="attachment" onkeypress="if (event.keyCode === 13 || event.keyCode === 32) document.querySelector('.js-form-file-focus').click();" > Uploader un fichier <span class="absolute block top-[11px] right-3 border-b border-b-accent" aria-hidden="true"> <span class="flex items-center text-accent text-sm"> <svg aria-hidden="true" focusable="false" class="mr-1" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"> <path fill="currentColor" d="M234.667 209.707l-76.587 76.374-30.080-30.080 128-128 128 128-30.080 30.080-76.587-76.374v259.627h-42.666v-259.627zM405.334 85.334v-42.666h-298.666v42.666h298.666z"></path> </svg> </span> </span> </label> </div> </div> <template x-if="formErrors.attachment"> <template x-for="error in formErrors.attachment"> <p id="footer-form-674b8534b7616file-error" x-show="error" x-cloak x-text="error" class="mt-2 text-yellow text-sm"></p> </template> </template> </div> <div class="md:col-span-6"> <div class="flex gap-x-3"> <div class="flex h-6 items-center"> <input id="footer-form-674b8534b7616newsletter-checkbox" name="newsletter" type="checkbox" value="1" x-ref="newsletter" class="h-4 w-4 rounded ring-offset-2 border-gray-300 text-yellow focus:ring-yellow focus:ring-offset-primary" > </div> <div class="text-sm leading-6"> <label for="footer-form-674b8534b7616newsletter-checkbox" class="font-medium hover:cursor-pointer text-white" > J'accepte de recevoir la newsletter de Novius chaque mois </label> </div> </div> </div> <div class="md:col-span-6"> <div class="flex gap-x-3"> <div class="flex h-6 items-center"> <input id="footer-form-674b8534b7616consent-checkbox" name="consent" type="checkbox" value="1" x-ref="consent" required class="h-4 w-4 rounded ring-offset-2 border-gray-300 text-yellow focus:ring-yellow focus:ring-offset-primary" :aria-describedby="formErrors && formErrors.consent ? 'footer-form-674b8534b7616consent-checkbox-error' : ''"> </div> <div class="text-sm leading-6"> <label for="footer-form-674b8534b7616consent-checkbox" class="font-medium hover:cursor-pointer text-white" > En soumettant ce formulaire, j'accepte que les informations saisies soient exploitées dans le cadre de ma demande initiale * </label> </div> </div> <p x-show="formErrors.consent" id="footer-form-674b8534b7616consent-checkbox-error" x-text="formErrors.consent ? formErrors.consent[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> </div> <div class="mt-4"> <button type="submit" class="button inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6 " x-ref="submitBtn" > Envoyer </button> </div> </form> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('handleForm', () => ({ hasErrors: false, formErrors: [], isLoading: false, submitForm() { const formUrl = this.$refs.mainForm.dataset.action; const formData = new FormData(this.$refs.mainForm); this.isLoading = true; fetch(formUrl, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), }, body: formData, }) .then((response) => response.json()) .then((data) => { if (!data.success && data.errors) { this.formErrors = data.errors; this.isLoading = false; // Uncheck the rgpd consent checkbox if (this.$refs.consent) { this.$refs.consent.checked = false; } throw new Error('Oups, quelque chose s\'est mal passé !'); } if (data.responseSaved && data.htmlSuccess) { this.isLoading = false; this.$refs.mainForm.innerHTML = data.htmlSuccess; } }) .catch((error) => { this.hasErrors = true; this.isLoading = false; // Focus the first input with error const firstErrorKey = Object.keys(this.formErrors)[0]; if (this.$refs[firstErrorKey]) { this.$refs[firstErrorKey].focus(); } }); } })); }) </script> </div> <div class="w-full md:mx-auto lg:mx-0 md:w-[70%] lg:w-[55%]"> <div class="lg:py-[60px] lg:pb-0 flex flex-col gap-3 md:gap-4"> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Création de site web / Refonte de site</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/service/sites-internet"> Création de site web / Refonte de site </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/service/sites-internet#surmesure" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Dispositifs web sur-mesure </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/sites-internet#surmesure" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développement E-Commerce </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://wordpress.novius.com" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développement Site Vitrine </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/agence-wordpress" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Agence WordPress </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/sites-internet#webdesign" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Webdesign </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/sites-internet#cahierdescharges" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Cahier des charges </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/hebergement" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Hébergement </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Conseil & Accompagnement</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> Conseil & Accompagnement </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/service/audits-de-sites" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Audits de sites </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/strategies-digitales" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Stratégies digitales </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/strategies-de-communication" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Stratégies de communication </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/community-management" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Réseaux Sociaux </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/redaction-de-contenus-et-seo" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Rédactions de contenus / SEO </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/audits-de-sites#ergo" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > UX Design </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Amélioration continue</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> Amélioration continue </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/service/amelioration-continue" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > TMA </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/amelioration-continue#kpi" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Suivi et analyse des résultats </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/audits-de-sites#stats" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Analyse des statistiques </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/redaction-de-contenus-et-seo" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Optimisation SEO </a> </li> </ul> </div> </div> <hr class="my-10 border-secondary hidden md:block"> <div class="flex flex-col md:flex-row gap-3 md:gap-4 footer-nav-columns"> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Novius</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/novius-agence-digitale"> Novius </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/histoire" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Notre Histoire </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/team-novius" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > L'équipe </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/chiffres" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Le web par les chiffres </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/actualites" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Nos actualités </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/recrutement" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Novius recrute </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/contact-la-societe-secrete" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > La Société Secrète </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/mentions-legales" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Mentions légales </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/politique-de-confidentialite" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Confidentialité </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/declaration-accessibilite-site-novius" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Accessibilité : partiellement conforme </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/plan-du-site" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Plan du site </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Nos métiers</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/metiers"> Nos métiers </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/metiers/developpeur-web#devfs" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développeur Full Stack </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/developpeur-web#devfront" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développeur Front End </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/developpeur-web#devback" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développeur Back End </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/developpeur-web#integrateur" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Intégrateur </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#CP" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Chef de projet </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#DA" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Directeur Artistique </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#SEO" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Consultant SEO </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#stats" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Consultant Analytics </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#UX" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Consultant UX </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Nos technologies</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/techno"> Nos technologies </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/techno/laravel" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Laravel </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/techno/wordpress" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > WordPress </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/techno/prestashop" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Prestashop </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/techno/sylius" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Sylius </a> </li> </ul> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('collapse', () => ({ expanded: false, mediaQuery: window.matchMedia('(min-width: 768px)'), init() { this.expanded = this.mediaQuery.matches this.mediaQuery.addEventListener('change', this.onMediaQueryChange.bind(this)) }, onMediaQueryChange() { this.expanded = this.mediaQuery.matches }, })); }); </script> </div> </div> </div> </div> </footer> <script> function cdnNoviusPunctuationBeautifierLoaded() { PunctuationBeautifier.beautify('.js-dynamic-content-wrapper'); } </script> <script async src="https://cdn.novius.net/novius-punctuation-beautifier/punctuation-beautifier-1.0.x.js"></script> </body> </html>

CINXE.COM

→ Agence web Lyon & Paris • NOVIUS • Sites internet sur mesure