[et_pb_section fb_built=”1″ _builder_version=”4.27.7″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.27.7″ _module_preset=”default”][et_pb_column _builder_version=”4.27.7″ _module_preset=”default” type=”4_4″][et_pb_code _builder_version=”4.27.7″ _module_preset=”default” custom_css_free_form=”/* ============================================================|| 1. VARIABLES (DESIGN TOKENS)|| ============================================================ */||:root {|| /* Couleurs marque */|| –color-red: #D61F26;|| –color-red-light: #FF3D44;|| –color-blue: #2104D5;|| –color-blue-light: #4B35F5;|| –color-white: #FFFFFF;|||| /* Couleurs neutres / texte */|| –color-bg: #F0F4FF;|| –color-text: #12142A;|| –color-muted: #5A5F7A;|| –color-dark: #0D0D1A;|||| /* Surfaces & bordures */|| –surface-card: rgba(255, 255, 255, 0.72);|| –border-soft: rgba(33, 4, 213, 0.12);|||| /* Typo */|| –font-body: ‘Plus Jakarta Sans’, sans-serif;|| –font-display: ‘Syne’, sans-serif;|| –font-headline: ‘Unbounded’, sans-serif;|||| /* Rayons & ombres réutilisables */|| –radius-sm: 6px;|| –radius-md: 10px;|| –radius-lg: 14px;|| –shadow-red: 0 6px 24px rgba(214, 31, 38, 0.3);|| –shadow-blue: 0 6px 24px rgba(33, 4, 213, 0.25);|||| /* Rythme */|| –container-max: 1240px;|| –gutter: 52px;||}||||/* ============================================================|| 2. RESET & BASE|| ============================================================ */||*, *::before, *::after {|| box-sizing: border-box;|| margin: 0;|| padding: 0;||}||html { scroll-behavior: smooth; }||body {|| font-family: var(–font-body);|| background: var(–color-bg);|| color: var(–color-text);|| overflow-x: hidden;||}||a { color: inherit; }||img { display: block; max-width: 100%; }||||@keyframes spin { to { transform: rotate(360deg); } }||@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(1.6); } }||@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }||@keyframes tickroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }||||/* ============================================================|| 3. LAYOUT — NAVBAR|| ============================================================ */||.navbar {|| position: fixed;|| top: 0; left: 0; right: 0;|| z-index: 200;|| height: 68px;|| display: flex;|| align-items: center;|| justify-content: space-between;|| padding: 0 var(–gutter);|| background: rgba(255, 255, 255, 0.82);|| backdrop-filter: blur(18px);|| border-bottom: 1px solid var(–border-soft);|| box-shadow: 0 2px 20px rgba(13, 13, 26, 0.06);||}||||.navbar__brand {|| display: flex;|| align-items: center;|| gap: 12px;||}||.navbar__logo {|| height: 40px;|| width: 40px;|| border-radius: 50%;|| object-fit: contain;|| background: var(–color-white);|| box-shadow: 0 2px 10px rgba(214, 31, 38, 0.15);||}||.navbar__name {|| font-family: var(–font-headline);|| font-size: 0.92rem;|| font-weight: 800;|| letter-spacing: -0.01em;||}||.navbar__name em {|| font-style: normal;|| color: var(–color-red);||}||||.navbar__links {|| display: flex;|| gap: 36px;|| list-style: none;||}||.navbar__links a {|| font-size: 0.84rem;|| font-weight: 500;|| color: var(–color-muted);|| text-decoration: none;|| transition: color 0.2s ease;||}||.navbar__links a:hover { color: var(–color-blue); }||||.navbar__cta {|| font-size: 0.82rem;|| font-weight: 700;|| color: var(–color-white);|| background: linear-gradient(135deg, var(–color-red) 0%, var(–color-red-light) 100%);|| padding: 10px 24px;|| border-radius: var(–radius-md);|| text-decoration: none;|| box-shadow: var(–shadow-red);|| transition: transform 0.2s ease, box-shadow 0.2s ease;||}||.navbar__cta:hover {|| transform: translateY(-2px);|| box-shadow: 0 8px 24px rgba(214, 31, 38, 0.4);||}||||/* ============================================================|| 4. HERO — SECTION & FOND VIDÉO|| ============================================================ */||.hero {|| position: relative;|| min-height: 100vh;|| display: flex;|| flex-direction: column;|| justify-content: center;|| overflow: hidden;||}||||.hero__video-wrap {|| position: absolute;|| inset: 0;|| z-index: 0;|| overflow: hidden;||}||.hero__video-wrap video {|| width: 100%;|| height: 100%;|| object-fit: cover;|| object-position: center;|| filter: brightness(0.92) saturate(1.05);||}||.hero__overlay {|| position: absolute;|| inset: 0;|| z-index: 1;|| background: linear-gradient(|| 110deg,|| rgba(240, 244, 255, 0.82) 0%,|| rgba(240, 244, 255, 0.55) 50%,|| rgba(33, 4, 213, 0.08) 100%|| );||}||||/* Décors géométriques flottants */||.hero__geo {|| position: absolute;|| z-index: 2;|| pointer-events: none;|| border-radius: 50%;||}||.hero__geo–red {|| width: 420px; height: 420px;|| top: -80px; right: 280px;|| border: 2px solid rgba(214, 31, 38, 0.1);|| animation: spin 30s linear infinite;||}||.hero__geo–blue {|| width: 280px; height: 280px;|| bottom: 60px; left: 60px;|| border: 1.5px solid rgba(33, 4, 213, 0.1);|| animation: spin 20s linear infinite reverse;||}||||/* ============================================================|| 5. HERO — GRILLE PRINCIPALE (2 colonnes)|| ============================================================ */||.hero__inner {|| position: relative;|| z-index: 3;|| width: 100%;|| max-width: var(–container-max);|| margin: 0 auto;|| padding: 100px var(–gutter) 40px;|| display: grid;|| grid-template-columns: 1fr 480px;|| gap: 60px;|| align-items: center;||}||||/* — 5.1 Colonne gauche : copy — */||.hero__left {|| display: flex;|| flex-direction: column;||}||||.badge {|| display: inline-flex;|| align-items: center;|| gap: 8px;|| width: fit-content;|| font-size: 0.7rem;|| font-weight: 700;|| letter-spacing: 0.2em;|| text-transform: uppercase;|| color: var(–color-red);|| background: rgba(214, 31, 38, 0.08);|| border: 1px solid rgba(214, 31, 38, 0.2);|| border-radius: 100px;|| padding: 6px 14px;|| margin-bottom: 28px;||}||.badge__dot {|| width: 6px; height: 6px;|| border-radius: 50%;|| background: var(–color-red);|| animation: pulse 1.6s ease-in-out infinite;||}||||.hero__title {|| font-family: var(–font-headline);|| font-size: clamp(2rem, 4.2vw, 3.4rem);|| font-weight: 800;|| line-height: 1.18;|| letter-spacing: -0.01em;|| margin-bottom: 22px;||}||.hero__title .is-red { color: var(–color-red); }||.hero__title .is-blue { color: var(–color-blue); }||||.hero__subtitle {|| font-size: 1.02rem;|| font-weight: 400;|| line-height: 1.75;|| color: var(–color-muted);|| max-width: 500px;|| margin-bottom: 40px;||}||||/* Pills de services */||.service-list {|| display: flex;|| flex-wrap: wrap;|| gap: 8px;|| margin-bottom: 40px;||}||.service-pill {|| display: flex;|| align-items: center;|| gap: 6px;|| font-size: 0.76rem;|| font-weight: 600;|| background: var(–surface-card);|| border: 1px solid var(–border-soft);|| backdrop-filter: blur(8px);|| border-radius: var(–radius-sm);|| padding: 6px 12px;|| transition: border-color 0.2s ease, color 0.2s ease;||}||.service-pill:hover { border-color: var(–color-blue); color: var(–color-blue); }||||/* Boutons d’action */||.btn-group {|| display: flex;|| flex-wrap: wrap;|| gap: 12px;|| margin-bottom: 40px;||}||.btn {|| display: inline-flex;|| align-items: center;|| gap: 8px;|| font-size: 0.86rem;|| font-weight: 700;|| text-decoration: none;|| border: none;|| border-radius: var(–radius-md);|| padding: 14px 26px;|| cursor: pointer;|| transition: transform 0.2s ease, box-shadow 0.2s ease;||}||.btn:hover { transform: translateY(-3px); }||||.btn–red {|| background: linear-gradient(135deg, var(–color-red), var(–color-red-light));|| color: var(–color-white);|| box-shadow: var(–shadow-red);||}||.btn–red:hover { box-shadow: 0 10px 36px rgba(214, 31, 38, 0.45); }||||.btn–blue {|| background: linear-gradient(135deg, var(–color-blue), var(–color-blue-light));|| color: var(–color-white);|| box-shadow: var(–shadow-blue);||}||.btn–blue:hover { box-shadow: 0 10px 36px rgba(33, 4, 213, 0.4); }||||.btn–outline {|| background: var(–surface-card);|| color: var(–color-text);|| border: 1.5px solid var(–border-soft);|| backdrop-filter: blur(10px);||}||.btn–outline:hover { border-color: var(–color-blue); color: var(–color-blue); }||||.btn–whatsapp {|| background: #25D366;|| color: var(–color-white);|| box-shadow: 0 6px 20px rgba(37, 211, 102, 0.28);||}||.btn–whatsapp:hover { box-shadow: 0 10px 30px rgba(37, 211, 102, 0.42); }||||/* Preuve sociale */||.social-proof {|| display: flex;|| align-items: center;|| gap: 16px;||}||.social-proof__avatars { display: flex; }||.avatar {|| width: 36px; height: 36px;|| border-radius: 50%;|| border: 2.5px solid var(–color-white);|| margin-left: -10px;|| font-size: 0.7rem;|| font-weight: 700;|| color: var(–color-white);|| display: flex;|| align-items: center;|| justify-content: center;||}||.avatar:first-child { margin-left: 0; }||.avatar–1 { background: linear-gradient(135deg, var(–color-red), #FF6B6B); }||.avatar–2 { background: linear-gradient(135deg, var(–color-blue), var(–color-blue-light)); }||.avatar–3 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }||.avatar–4 { background: linear-gradient(135deg, #059669, #34D399); }||||.social-proof__text {|| font-size: 0.8rem;|| color: var(–color-muted);|| line-height: 1.45;||}||.social-proof__text strong {|| color: var(–color-text);|| font-weight: 600;||}||||/* — 5.2 Colonne droite : logo + cartes — */||.hero__right {|| display: flex;|| flex-direction: column;|| align-items: center;|| gap: 20px;||}||||.logo-display {|| position: relative;|| width: 200px;|| height: 200px;||}||.logo-display__ring {|| position: absolute;|| border-radius: 50%;|| border: 2px solid transparent;||}||.logo-display__ring–outer {|| inset: -14px;|| border-top-color: var(–color-red);|| border-right-color: var(–color-red);|| animation: spin 8s linear infinite;||}||.logo-display__ring–inner {|| inset: -6px;|| border-bottom-color: var(–color-blue);|| border-left-color: var(–color-blue);|| animation: spin 5s linear infinite reverse;||}||.logo-display__core {|| width: 100%; height: 100%;|| border-radius: 50%;|| object-fit: contain;|| background: var(–color-white);|| padding: 12px;|| box-shadow:|| 0 8px 40px rgba(214, 31, 38, 0.15),|| 0 8px 40px rgba(33, 4, 213, 0.12);|| animation: floatLogo 5s ease-in-out infinite;||}||||/* Grille de cartes de services */||.feature-grid {|| display: grid;|| grid-template-columns: 1fr 1fr;|| gap: 12px;|| width: 100%;||}||.feature-card {|| display: flex;|| flex-direction: column;|| gap: 8px;|| background: var(–surface-card);|| border: 1px solid var(–border-soft);|| border-radius: var(–radius-lg);|| padding: 18px 16px;|| backdrop-filter: blur(16px);|| box-shadow: 0 2px 16px rgba(33, 4, 213, 0.06);|| transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;||}||.feature-card:hover {|| transform: translateY(-5px);|| box-shadow: 0 12px 32px rgba(33, 4, 213, 0.12);|| border-color: rgba(33, 4, 213, 0.25);||}||.feature-card–wide {|| grid-column: 1 / -1;|| flex-direction: row;|| align-items: center;|| gap: 16px;||}||||.feature-card__icon {|| width: 42px; height: 42px;|| border-radius: var(–radius-md);|| display: flex;|| align-items: center;|| justify-content: center;|| font-size: 1.3rem;|| flex-shrink: 0;||}||.feature-card__icon–red { background: rgba(214, 31, 38, 0.1); }||.feature-card__icon–blue { background: rgba(33, 4, 213, 0.1); }||.feature-card__icon–violet { background: rgba(124, 58, 237, 0.1); }||.feature-card__icon–teal { background: rgba(5, 150, 105, 0.1); }||||.feature-card__title {|| font-size: 0.85rem;|| font-weight: 700;||}||.feature-card__desc {|| font-size: 0.74rem;|| font-weight: 400;|| color: var(–color-muted);|| line-height: 1.5;||}||||.status-tag {|| display: inline-flex;|| align-items: center;|| gap: 5px;|| width: fit-content;|| font-size: 0.62rem;|| font-weight: 700;|| letter-spacing: 0.1em;|| text-transform: uppercase;|| color: #059669;|| background: rgba(5, 150, 105, 0.1);|| border-radius: 4px;|| padding: 2px 7px;|| margin-top: 3px;||}||.status-tag__dot {|| width: 5px; height: 5px;|| border-radius: 50%;|| background: #10B981;|| animation: pulse 1.2s ease-in-out infinite;||}||||/* ============================================================|| 6. STAT STRIP|| ============================================================ */||.stats {|| position: relative;|| z-index: 3;|| max-width: var(–container-max);|| margin: 0 auto;|| padding: 0 var(–gutter) 56px;|| display: grid;|| grid-template-columns: repeat(4, 1fr);||}||.stats__item {|| padding: 0 28px;|| border-right: 1px solid var(–border-soft);|| display: flex;|| flex-direction: column;|| gap: 4px;||}||.stats__item:first-child { padding-left: 0; }||.stats__item:last-child { border-right: none; }||||.stats__num {|| font-family: var(–font-headline);|| font-size: 2.2rem;|| font-weight: 800;|| line-height: 1;||}||.stats__num sup { font-size: 1.2rem; color: var(–color-red); }||||.stats__label {|| font-size: 0.7rem;|| font-weight: 500;|| letter-spacing: 0.08em;|| text-transform: uppercase;|| color: var(–color-muted);||}||||/* ============================================================|| 7. TICKER (bandeau défilant)|| ============================================================ */||.ticker {|| width: 100%;|| overflow: hidden;|| background: linear-gradient(90deg, var(–color-red) 0%, var(–color-blue) 100%);|| padding: 12px 0;||}||.ticker__track {|| display: flex;|| gap: 52px;|| width: max-content;|| animation: tickroll 26s linear infinite;||}||.ticker__item {|| display: flex;|| align-items: center;|| gap: 8px;|| font-size: 0.68rem;|| font-weight: 700;|| letter-spacing: 0.18em;|| text-transform: uppercase;|| color: rgba(255, 255, 255, 0.9);|| white-space: nowrap;||}||.ticker__item::before {|| content: ‘✦’;|| font-size: 0.5rem;|| opacity: 0.7;||}||||/* ============================================================|| 8. RESPONSIVE|| ============================================================ */||@media (max-width: 960px) {|| .navbar { padding: 0 24px; }|| .navbar__links { display: none; }|||| .hero__inner {|| grid-template-columns: 1fr;|| padding: 90px 24px 32px;|| gap: 44px;|| }|| .hero__right { order: -1; }|||| .logo-display { width: 150px; height: 150px; }|||| .stats { padding: 0 24px 44px; }|| .stats__item { padding: 0 16px; }|| .stats__num { font-size: 1.8rem; }||}||||@media (max-width: 560px) {|| .stats {|| grid-template-columns: 1fr 1fr;|| gap: 20px;|| }|| .stats__item {|| border-right: none;|| border-bottom: 1px solid var(–border-soft);|| padding-bottom: 16px;|| }|| .stats__item:nth-child(2n) { padding-left: 20px; }|||| .feature-grid { grid-template-columns: 1fr; }|| .feature-card–wide { flex-direction: column; align-items: flex-start; }|||| .btn-group { flex-direction: column; }|| .btn { justify-content: center; }||}||||@media (prefers-reduced-motion: reduce) {|| .badge__dot,|| .status-tag__dot,|| .ticker__track,|| .logo-display__ring–outer,|| .logo-display__ring–inner,|| .logo-display__core,|| .hero__geo–red,|| .hero__geo–blue {|| animation: none;|| }||}” hover_enabled=”0″ sticky_enabled=”0″]
Agence digitale · Innovation & Excellence
Votre partenaire en
Innovation & Formation
Transformation Numérique.
Développement web, intelligence artificielle, design et formations certifiantes — nous donnons aux entreprises et porteurs de projets les outils pour réussir dans le monde numérique d’aujourd’hui.

Service actif
[/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section]