/* ========================================================= Agence Plevoo — Feuille de style personnalisée (vient compléter Tailwind CDN chargé dans ) ========================================================= */ html.lenis { height: auto; } html.lenis body { height: auto; } html.lenis.lenis-smooth { scroll-behavior: auto !important; } ::selection { background: #6BCB77; color: #0A192F; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #F8F8F8; } ::-webkit-scrollbar-thumb { background: #0A192F; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #6BCB77; } body { overflow-x: hidden; } /* --------------------------------------------------------- Préchargeur --------------------------------------------------------- */ #preloader { transition: opacity 0.6s ease, visibility 0.6s ease; } #preloader.is-hidden { opacity: 0; visibility: hidden; } .preloader-logo { animation: plevoo-pulse 1.4s ease-in-out infinite; } @keyframes plevoo-pulse { 0%, 100% { opacity: 0.4; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1); } } /* --------------------------------------------------------- Navigation --------------------------------------------------------- */ #site-header { background: transparent; } body:not(.has-dark-hero) #site-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(10, 25, 47, 0.06); } #site-header.scrolled { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(10, 25, 47, 0.06); } .nav-logo-light { display: none; } body.has-dark-hero #site-header:not(.scrolled) .nav-logo-dark { display: none; } body.has-dark-hero #site-header:not(.scrolled) .nav-logo-light { display: block; } .nav-link { position: relative; font-size: 0.95rem; font-weight: 500; color: #4A4A4A; transition: color 0.25s ease; } .nav-link::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: #6BCB77; transition: width 0.25s ease; } .nav-link:hover::after, .nav-link-active::after { width: 100%; } .nav-link-active { color: #0A192F; } body.has-dark-hero #site-header:not(.scrolled) .nav-link { color: rgba(255, 255, 255, 0.85); } body.has-dark-hero #site-header:not(.scrolled) .nav-link-active { color: #ffffff; } .btn-nav-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: #0A192F; color: #fff; font-size: 0.9rem; font-weight: 500; padding: 0.65rem 1.25rem; border-radius: 999px; transition: all 0.3s ease; } .btn-nav-cta:hover { background: #6BCB77; color: #0A192F; transform: translateY(-2px); } body.has-dark-hero #site-header:not(.scrolled) .btn-nav-cta { background: #6BCB77; color: #0A192F; } .burger-line { width: 24px; height: 2px; background: #0A192F; border-radius: 2px; transition: all 0.3s ease; } body.has-dark-hero #site-header:not(.scrolled) .burger-line { background: #fff; } #burger-btn.is-open .burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } #burger-btn.is-open .burger-line:nth-child(2) { opacity: 0; } #burger-btn.is-open .burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #burger-btn.is-open .burger-line { background: #fff; } #mobile-menu { opacity: 0; visibility: hidden; transform: translateY(-16px); transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1); } #mobile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-nav-link { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 600; color: #fff; } /* --------------------------------------------------------- Utilitaires génériques --------------------------------------------------------- */ .gradient-text { background: linear-gradient(135deg, #6BCB77 0%, #3fae6a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #6BCB77; } .section-label::before { content: ''; width: 24px; height: 2px; background: #6BCB77; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: #0A192F; color: #fff; font-weight: 500; padding: 1rem 2rem; border-radius: 999px; transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1); } .btn-primary:hover { background: #6BCB77; color: #0A192F; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 25, 47, 0.12); } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: transparent; border: 1.5px solid rgba(10, 25, 47, 0.15); color: #0A192F; font-weight: 500; padding: 1rem 2rem; border-radius: 999px; transition: all 0.35s ease; } .btn-outline:hover { border-color: #0A192F; background: #0A192F; color: #fff; } body.has-dark-hero .hero-btn-outline { border-color: rgba(255, 255, 255, 0.3); color: #fff; } body.has-dark-hero .hero-btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); } .card-hover { transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), box-shadow 0.4s ease; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 24px 48px rgba(10, 25, 47, 0.12); } /* Reveal au scroll (piloté en JS) — fondu, léger flou et glissement, façon motion design */ .reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); will-change: opacity, transform, filter; transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-scale { opacity: 0; transform: scale(0.94); filter: blur(6px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 1.1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-scale.is-visible { opacity: 1; transform: scale(1); filter: blur(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } /* --------------------------------------------------------- Hero --------------------------------------------------------- */ .hero-section { position: relative; min-height: 100svh; display: flex; align-items: center; background: #0A192F; overflow: hidden; } .hero-blob { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; } .hero-blob-1 { width: 520px; height: 520px; background: rgba(107, 203, 119, 0.28); top: -120px; right: -120px; } .hero-blob-2 { width: 420px; height: 420px; background: rgba(255, 107, 107, 0.18); bottom: -140px; left: -100px; } .hero-grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%); } .hero-scroll-cue { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; } .hero-scroll-cue .scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent); animation: scroll-cue-move 2s ease-in-out infinite; } @keyframes scroll-cue-move { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } .float-card { animation: float-y 5s ease-in-out infinite; } .float-card-delay { animation-delay: 1.2s; } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* --------------------------------------------------------- Marquee défilant --------------------------------------------------------- */ .marquee { display: flex; overflow: hidden; user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; flex-shrink: 0; animation: marquee-scroll 28s linear infinite; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* --------------------------------------------------------- Compteurs statistiques --------------------------------------------------------- */ .counter-value { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------- Timeline "Notre Approche" --------------------------------------------------------- */ .approach-line { position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, rgba(10,25,47,0.12), rgba(10,25,47,0.02)); } @media (min-width: 1024px) { .approach-line { left: 50%; transform: translateX(-50%); } } /* --------------------------------------------------------- Cartes cas clients --------------------------------------------------------- */ .case-card { position: relative; border-radius: 1.5rem; overflow: hidden; background: #0A192F; } .case-card-image { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .case-card:hover .case-card-image { transform: scale(1.06); } .case-card-overlay { background: linear-gradient(to top, rgba(10,25,47,0.92) 0%, rgba(10,25,47,0.5) 45%, rgba(10,25,47,0.05) 100%); } /* --------------------------------------------------------- Divers --------------------------------------------------------- */ .pattern-dots { background-image: radial-gradient(rgba(10, 25, 47, 0.14) 1.5px, transparent 1.5px); background-size: 20px 20px; } #back-to-top.is-visible { opacity: 1; pointer-events: auto; } #back-to-top:hover { background: #6BCB77; color: #0A192F; } .swiper-pagination-bullet { background: #0A192F !important; opacity: 0.25 !important; } .swiper-pagination-bullet-active { background: #6BCB77 !important; opacity: 1 !important; } .form-input { width: 100%; background: #F8F8F8; border: 1.5px solid transparent; border-radius: 0.9rem; padding: 0.9rem 1.1rem; color: #0A192F; transition: all 0.25s ease; } .form-input:focus { outline: none; border-color: #6BCB77; background: #fff; box-shadow: 0 0 0 4px rgba(107, 203, 119, 0.15); } .form-label { display: block; font-size: 0.85rem; font-weight: 500; color: #4A4A4A; margin-bottom: 0.4rem; } /* --------------------------------------------------------- Curseur personnalisé (desktop uniquement) --------------------------------------------------------- */ html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor input, html.has-custom-cursor textarea, html.has-custom-cursor select { cursor: none !important; } #cursor-dot, #cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998; border-radius: 50%; transform: translate(-100px, -100px); opacity: 0; transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } #cursor-dot { width: 7px; height: 7px; background: #6BCB77; margin: -3.5px 0 0 -3.5px; } #cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(10, 25, 47, 0.25); } body.has-dark-hero #cursor-ring { border-color: rgba(255, 255, 255, 0.35); } #cursor-dot.is-active, #cursor-ring.is-active { opacity: 1; } #cursor-ring.is-hover { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(107, 203, 119, 0.1); border-color: #6BCB77; } @media (pointer: coarse) { #cursor-dot, #cursor-ring { display: none; } } /* --------------------------------------------------------- Barre de progression de scroll --------------------------------------------------------- */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, #6BCB77, #3fae6a); z-index: 60; pointer-events: none; } /* --------------------------------------------------------- Titre cinétique (mots révélés au chargement) --------------------------------------------------------- */ .kinetic-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } .kinetic-inner { display: inline-block; transform: translateY(115%); will-change: transform; } /* --------------------------------------------------------- Carrousel "glisser" — cas clients --------------------------------------------------------- */ .drag-scroll { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .drag-scroll::-webkit-scrollbar { display: none; } .drag-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; } .drag-scroll > * { scroll-snap-align: start; flex: 0 0 auto; } .drag-hint { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: rgba(10, 25, 47, 0.4); } .drag-hint i { display: inline-block; animation: drag-hint-move 1.8s ease-in-out infinite; } @keyframes drag-hint-move { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } /* --------------------------------------------------------- Boutons magnétiques --------------------------------------------------------- */ .btn-primary, .btn-nav-cta { transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; } /* --------------------------------------------------------- Page d'accueil — slides plein écran avec transition verticale "parallax" au scroll (empilement + pin GSAP) --------------------------------------------------------- */ .slides-wrapper { position: relative; } .slide-section { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; } .slides-wrapper .slide-section:nth-of-type(1) { z-index: 1; } .slides-wrapper .slide-section:nth-of-type(2) { z-index: 2; } .slides-wrapper .slide-section:nth-of-type(3) { z-index: 3; } .slides-wrapper .slide-section:nth-of-type(4) { z-index: 4; } .slides-wrapper .slide-section:nth-of-type(5) { z-index: 5; } .slides-wrapper .slide-section:nth-of-type(6) { z-index: 6; } .slide-inner { width: 100%; will-change: transform, opacity; } /* Rendu naturel tant que le JS (GSAP) n'a pas initialisé le pin */ @media (max-width: 1023px) { .slide-section { min-height: auto; padding-top: 4.5rem; padding-bottom: 4.5rem; } } /* --------------------------------------------------------- Scène héro WebGL (Three.js) — triangle de Penrose --------------------------------------------------------- */ .hero-webgl-stage { position: relative; width: 100%; height: 100%; } .hero-webgl-stage canvas { display: block; width: 100% !important; height: 100% !important; touch-action: pan-y; } .hero-webgl-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .hero-webgl-fallback.is-visible { opacity: 1; } .hero-webgl-fallback svg { width: 80%; max-width: 340px; height: auto; animation: hero-penrose-breathe 6s ease-in-out infinite; } @keyframes hero-penrose-breathe { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.03) rotate(1.5deg); } } @media (prefers-reduced-motion: reduce) { .hero-webgl-fallback svg { animation: none; } } /* --------------------------------------------------------- Cartes à bascule 3D (services, etc.) --------------------------------------------------------- */ .tilt-card { transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0); transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, background-color 0.45s ease; will-change: transform; } .tilt-card:hover { transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-6px); box-shadow: 0 30px 60px rgba(10, 25, 47, 0.18); } .tilt-card-alt:hover { transform: perspective(900px) rotateX(4deg) rotateY(6deg) translateY(-6px); }