/* ================================================================ HFR DESIGNER — style.css Auteur : Fabrice René Houeto Version : 2.0 Description : Feuille de style principale. Thèmes, layout, composants, animations, responsive complet. ================================================================ */ /* ================================================================ 1. THÈMES VISUELS (5 modes) Utilisation : ================================================================ */ /* --- Thème 1 : Blue Tech (défaut, couleur d'origine) --- */ [data-theme="blue"] { --primary : #3B82F6; --primary-dark : #1d4ed8; --primary-glow : rgba(59, 130, 246, 0.18); --accent : #06b6d4; --bg : #ffffff; --bg-2 : #f0f7ff; --bg-3 : #e0f0ff; --surface : #f8fafc; --text : #0f172a; --text-2 : #334155; --text-3 : #64748b; --border : #dbeafe; --hero-grad : linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1e40af 100%); --cta-grad : linear-gradient(135deg, #3B82F6, #06b6d4); --card-shadow : 0 4px 24px rgba(59, 130, 246, 0.08); --header-bg : rgba(255, 255, 255, 0.92); } /* --- Thème 2 : Dark Premium --- */ [data-theme="dark"] { --primary : #a78bfa; --primary-dark : #7c3aed; --primary-glow : rgba(167, 139, 250, 0.18); --accent : #f472b6; --bg : #080b14; --bg-2 : #0d1117; --bg-3 : #111827; --surface : #161b27; --text : #f1f5f9; --text-2 : #cbd5e1; --text-3 : #94a3b8; --border : #1e2d45; --hero-grad : linear-gradient(135deg, #020408 0%, #0d0f1a 50%, #150d2e 100%); --cta-grad : linear-gradient(135deg, #7c3aed, #a78bfa); --card-shadow : 0 4px 24px rgba(0, 0, 0, 0.4); --header-bg : rgba(8, 11, 20, 0.95); } /* --- Thème 3 : Forest Nature --- */ [data-theme="forest"] { --primary : #16a34a; --primary-dark : #15803d; --primary-glow : rgba(22, 163, 74, 0.14); --accent : #84cc16; --bg : #f8fdf9; --bg-2 : #f0fdf4; --bg-3 : #dcfce7; --surface : #f0fdf4; --text : #052e16; --text-2 : #14532d; --text-3 : #4b7c5e; --border : #bbf7d0; --hero-grad : linear-gradient(135deg, #052e16 0%, #064e3b 50%, #065f46 100%); --cta-grad : linear-gradient(135deg, #16a34a, #84cc16); --card-shadow : 0 4px 24px rgba(22, 163, 74, 0.08); --header-bg : rgba(248, 253, 249, 0.95); } /* --- Thème 4 : Sunset Warm --- */ [data-theme="sunset"] { --primary : #f97316; --primary-dark : #ea580c; --primary-glow : rgba(249, 115, 22, 0.14); --accent : #f59e0b; --bg : #fffbf5; --bg-2 : #fff7ed; --bg-3 : #ffedd5; --surface : #fff7ed; --text : #1c0a00; --text-2 : #431407; --text-3 : #78350f; --border : #fed7aa; --hero-grad : linear-gradient(135deg, #1c0a00 0%, #431407 40%, #7c2d12 100%); --cta-grad : linear-gradient(135deg, #f97316, #f59e0b); --card-shadow : 0 4px 24px rgba(249, 115, 22, 0.08); --header-bg : rgba(255, 251, 245, 0.95); } /* --- Thème 5 : Minimal Noir & Blanc --- */ [data-theme="minimal"] { --primary : #111111; --primary-dark : #000000; --primary-glow : rgba(0, 0, 0, 0.08); --accent : #555555; --bg : #ffffff; --bg-2 : #f9f9f9; --bg-3 : #f0f0f0; --surface : #f5f5f5; --text : #111111; --text-2 : #333333; --text-3 : #666666; --border : #e0e0e0; --hero-grad : linear-gradient(135deg, #000 0%, #1a1a1a 100%); --cta-grad : linear-gradient(135deg, #111, #444); --card-shadow : 0 4px 24px rgba(0, 0, 0, 0.07); --header-bg : rgba(255, 255, 255, 0.96); } /* Polices globales (déclarées ici, chargées dans le HTML) */ :root { --font-display : 'Syne', sans-serif; --font-body : 'DM Sans', sans-serif; } /* ================================================================ 0. PRELOADER — thème-aware, 5 secondes, logo réel ================================================================ */ /* Couleurs du preloader par thème */ [data-theme="blue"] { --pl-bg:#0a0f1e; --pl-c1:#3B82F6; --pl-c2:#06b6d4; } [data-theme="dark"] { --pl-bg:#04060d; --pl-c1:#a78bfa; --pl-c2:#f472b6; } [data-theme="forest"] { --pl-bg:#021a0a; --pl-c1:#16a34a; --pl-c2:#84cc16; } [data-theme="sunset"] { --pl-bg:#180800; --pl-c1:#f97316; --pl-c2:#f59e0b; } [data-theme="minimal"] { --pl-bg:#0a0a0a; --pl-c1:#ffffff; --pl-c2:#888888; } #hfr-preloader { position : fixed; inset : 0; z-index : 99999; background : var(--pl-bg, #0a0f1e); display : flex; flex-direction : column; align-items : center; justify-content : center; gap : 32px; overflow : hidden; transition : opacity 0.8s ease, visibility 0.8s ease; } #hfr-preloader.hidden { opacity : 0; visibility : hidden; pointer-events : none; } /* Orbes ambiantes */ .preloader-orb { position : absolute; border-radius : 50%; pointer-events: none; filter : blur(90px); } .preloader-orb-1 { width : clamp(280px,50vw,500px); height : clamp(280px,50vw,500px); background: var(--pl-c1,#3B82F6); opacity : 0.14; top:-20%; right:-10%; animation : orbFloat 9s ease-in-out infinite; } .preloader-orb-2 { width : clamp(200px,35vw,380px); height : clamp(200px,35vw,380px); background: var(--pl-c2,#06b6d4); opacity : 0.11; bottom:-15%; left:-8%; animation : orbFloat 11s ease-in-out infinite reverse; } .preloader-orb-3 { width : clamp(100px,18vw,200px); height : clamp(100px,18vw,200px); background: var(--pl-c1,#3B82F6); opacity : 0.07; top:55%; left:60%; animation : orbFloat 7s ease-in-out infinite; animation-delay:-3s; } /* Logo wrapper */ .preloader-logo { position : relative; display : flex; align-items : center; justify-content: center; animation : preloaderLogoIn 0.9s cubic-bezier(0.22,1,0.36,1) both; } /* Halo derrière le logo */ .preloader-logo::before { content : ''; position : absolute; inset : -30px; border-radius : 50%; background : var(--pl-c1,#3B82F6); opacity : 0.1; filter : blur(28px); animation : preloaderPulse 2.4s ease-in-out infinite; } .preloader-logo img { height : clamp(52px,10vw,76px); width : auto; display : block; position : relative; filter : brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.25)); animation: preloaderLogoBreathe 2.8s ease-in-out infinite; } /* Anneaux tournants */ .preloader-ring { position : absolute; border-radius : 50%; border : 1.5px solid transparent; border-top-color : var(--pl-c1,#3B82F6); border-right-color: var(--pl-c2,#06b6d4); opacity : 0.55; animation : preloaderSpin 2s linear infinite; width : clamp(88px,15vw,126px); height : clamp(88px,15vw,126px); } .preloader-ring-2 { width : clamp(106px,18vw,150px); height : clamp(106px,18vw,150px); border-top-color : var(--pl-c2,#06b6d4); border-right-color: transparent; border-left-color : var(--pl-c1,#3B82F6); opacity : 0.28; animation : preloaderSpin 3.5s linear infinite reverse; } /* Nom de marque */ .preloader-brand { font-family : 'Syne', sans-serif; font-size : clamp(0.85rem,2vw,1rem); font-weight : 700; color : rgba(255,255,255,.45); letter-spacing: 0.28em; text-transform: uppercase; animation : preloaderFadeUp 0.9s ease 0.3s both; } .preloader-brand span { color: var(--pl-c1,#3B82F6); } /* Barre de progression */ .preloader-progress-wrap { display : flex; flex-direction : column; align-items : center; gap : 10px; width : clamp(200px,42vw,340px); animation : preloaderFadeUp 0.9s ease 0.5s both; } .preloader-bar-bg { width : 100%; height : 2px; background : rgba(255,255,255,.07); border-radius : 99px; overflow : hidden; position : relative; } .preloader-bar-bg::before { content : ''; position : absolute; inset : 0; background : linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation : barShimmer 2s ease infinite; } .preloader-bar-fill { height : 2px; width : 0%; background : linear-gradient(90deg,var(--pl-c1,#3B82F6),var(--pl-c2,#06b6d4)); border-radius : 99px; transition : width .08s linear; box-shadow : 0 0 8px var(--pl-c1,#3B82F6); position : relative; } .preloader-bar-fill::after { content : ''; position : absolute; right : 0; top: 50%; transform : translateY(-50%); width:5px; height:5px; border-radius : 50%; background : var(--pl-c2,#06b6d4); box-shadow : 0 0 8px var(--pl-c2,#06b6d4), 0 0 14px var(--pl-c2,#06b6d4); } .preloader-percent { font-family : 'Syne', sans-serif; font-size : .72rem; font-weight : 700; color : rgba(255,255,255,.3); letter-spacing: .14em; } .preloader-tagline { font-family : 'DM Sans', sans-serif; font-size : clamp(.68rem,1.5vw,.78rem); color : rgba(255,255,255,.2); letter-spacing: .2em; text-transform: uppercase; animation : preloaderFadeUp 1s ease .7s both; } /* Keyframes preloader */ @keyframes preloaderLogoIn { from { opacity:0; transform:scale(.75) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } } @keyframes preloaderLogoBreathe { 0%,100% { transform:scale(1); filter:brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.2)); } 50% { transform:scale(1.04); filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,.5)); } } @keyframes preloaderPulse { 0%,100% { transform:scale(1); opacity:.1; } 50% { transform:scale(1.5); opacity:.2; } } @keyframes preloaderSpin { to { transform:rotate(360deg); } } @keyframes preloaderFadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes barShimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } } /* ── Bouton "Télécharger CV" dans le header ───────────────────── */ .btn-cv-download { display : inline-flex; align-items : center; gap : 7px; padding : 9px clamp(12px,2vw,18px); background : var(--cta-grad); color : white !important; border-radius : 50px; font-family : var(--font-body); font-size : clamp(.75rem,1.1vw,.85rem); font-weight : 600; white-space : nowrap; border : none; text-decoration: none; cursor : pointer; transition : opacity .2s, transform .2s, box-shadow .2s; box-shadow : 0 4px 14px var(--primary-glow); flex-shrink : 0; } .btn-cv-download:hover { opacity : .92; transform : translateY(-2px); box-shadow: 0 8px 22px var(--primary-glow); } .btn-cv-download i { font-size:.9em; } /* Icône seule sur petits écrans */ @media (max-width:600px) { .btn-cv-download span { display:none; } .btn-cv-download { padding : 0; width : 38px; height : 38px; border-radius : 50%; justify-content: center; } } /* ── Bouton retour en haut ────────────────────────────────────── */ .back-top-btn { position : fixed; bottom : 96px; right : 28px; width : 42px; height : 42px; background : var(--surface); border : 1px solid var(--border); border-radius : 50%; display : none; align-items : center; justify-content : center; color : var(--text-3); font-size : .88rem; z-index : 900; cursor : pointer; transition : all .2s; box-shadow : 0 4px 12px rgba(0,0,0,.08); } .back-top-btn:hover { background:var(--primary); color:white; border-color:var(--primary); } /* ================================================================ 2. RESET & BASE ================================================================ */ *, *::before, *::after { margin : 0; padding : 0; box-sizing : border-box; } html { scroll-behavior : smooth; /* évite le zoom involontaire sur certains appareils */ text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font-family : var(--font-body); background-color : var(--bg); color : var(--text); line-height : 1.6; overflow-x : hidden; /* transition douce quand on change de thème */ transition : background-color 0.4s ease, color 0.4s ease; } /* Typographie de base */ h1, h2, h3, h4, h5 { font-family : var(--font-display); line-height : 1.15; } ul { list-style : none; } a { text-decoration: none; color: inherit; } img { max-width: 100%; display: block; } /* Boutons : curseur pointer par défaut */ button { cursor: pointer; font-family: var(--font-body); } /* Conteneur centré réutilisable */ .container { max-width : 1200px; margin : 0 auto; padding : 0 24px; } /* Espacement standard entre sections */ section { padding: 100px 0; } /* ================================================================ 3. HEADER & NAVIGATION → Conçu pour être parfait de 320px (small phone) à 2560px (4K) → Breakpoints : 1280px | 900px | 768px | 480px | 360px ================================================================ */ header { position : fixed; top : 0; left : 0; width : 100%; z-index : 1000; background : var(--header-bg); backdrop-filter : blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom : 1px solid var(--border); transition : box-shadow 0.3s ease, background 0.4s ease; } /* Rangée interne du header */ .header-inner { display : flex; align-items : center; justify-content : space-between; /* padding horizontal adaptatif — jamais trop serré */ padding : 0 clamp(16px, 4%, 60px); height : 70px; gap : 12px; /* espace minimum entre les blocs */ } /* --- Logo --- */ .logo { display : flex; align-items : center; text-decoration: none; flex-shrink: 0; } .logo-dot { width : 10px; height : 10px; background : var(--primary); border-radius : 50%; flex-shrink : 0; } .logo-img { height: 3.8rem; width: auto; display: block; object-fit: contain; } /* --- Navigation desktop --- */ .desktop-nav { display : flex; align-items : center; /* gap adaptatif : jamais trop serré sur tablette */ gap : clamp(14px, 2.5vw, 36px); /* flex-shrink permet à la nav de se compresser avant de disparaître */ flex-shrink : 1; min-width : 0; } .desktop-nav a { font-size : clamp(0.78rem, 1.1vw, 0.875rem); font-weight : 500; color : var(--text-3); white-space : nowrap; /* empêche "À Propos" de se couper en deux lignes */ position : relative; transition : color 0.2s; } /* Soulignement animé au hover */ .desktop-nav a::after { content : ''; position : absolute; bottom : -4px; left : 0; width : 0; height : 2px; background : var(--primary); transition : width 0.3s ease; } .desktop-nav a:hover { color: var(--primary); } .desktop-nav a:hover::after { width: 100%; } /* --- Contrôles côté droit (thème + CTA + hamburger) --- */ .nav-right { display : flex; align-items : center; gap : clamp(8px, 1.5vw, 14px); flex-shrink : 0; /* ne rétrécit jamais */ } /* Sélecteur de thème */ .theme-picker { position: relative; } .theme-trigger { display : flex; align-items : center; gap : 6px; padding : 8px clamp(10px, 1.5vw, 14px); background : var(--surface); border : 1px solid var(--border); border-radius : 50px; color : var(--text-3); font-size : clamp(0.72rem, 1vw, 0.8rem); font-weight : 500; white-space : nowrap; transition : border-color 0.2s, color 0.2s; } .theme-trigger:hover { border-color : var(--primary); color : var(--primary); } /* Cache le libellé "Thème" sur les petits écrans pour gagner de la place */ .theme-trigger .theme-label { display: inline; } /* Dropdown du sélecteur de thème */ .theme-dropdown { position : absolute; top : calc(100% + 10px); right : 0; background : var(--bg); border : 1px solid var(--border); border-radius : 14px; box-shadow : 0 20px 50px rgba(0, 0, 0, 0.15); min-width : 200px; /* caché par défaut — JS ajoute .open */ display : none; flex-direction: column; overflow : hidden; z-index : 2000; animation : dropIn 0.2s ease; } .theme-dropdown.open { display: flex; } @keyframes dropIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .theme-option { display : flex; align-items : center; gap : 12px; padding : 12px 16px; font-size : 0.85rem; color : var(--text-2); cursor : pointer; transition : background 0.15s; } .theme-option:hover { background: var(--surface); } .theme-option.active { color: var(--primary); font-weight: 600; background: var(--surface); } /* Pastille de couleur dans le dropdown */ .theme-swatch { width : 18px; height : 18px; border-radius : 50%; border : 2px solid var(--border); flex-shrink : 0; } .swatch-blue { background: linear-gradient(135deg, #3B82F6, #06b6d4); } .swatch-dark { background: linear-gradient(135deg, #0f0f14, #a78bfa); } .swatch-forest { background: linear-gradient(135deg, #16a34a, #84cc16); } .swatch-sunset { background: linear-gradient(135deg, #f97316, #f59e0b); } .swatch-minimal { background: linear-gradient(135deg, #111, #555); } /* Bouton CTA dans le header */ .btn-cta-nav { display : inline-flex; align-items : center; gap : 7px; padding : 10px clamp(14px, 2vw, 20px); background : var(--cta-grad); color : white; border-radius : 50px; font-size : clamp(0.78rem, 1.1vw, 0.875rem); font-weight : 600; white-space : nowrap; border : none; transition : opacity 0.2s, transform 0.2s; } .btn-cta-nav:hover { opacity: 0.9; transform: translateY(-1px); } /* Bouton hamburger (mobile) */ .hamburger { display : none; /* caché sur desktop */ flex-direction : column; gap : 5px; background : none; border : none; padding : 6px; flex-shrink : 0; } .hamburger span { display : block; width : 22px; height : 2px; background : var(--text); border-radius : 2px; transition : all 0.3s ease; } /* Animation hamburger → croix */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Menu mobile (volet latéral) --- */ .mobile-nav { position : fixed; top : 0; right : -100%; width : min(320px, 85vw); height : 100vh; background : var(--bg); z-index : 1500; padding : 90px 36px 40px; display : flex; flex-direction : column; gap : 4px; transition : right 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-left: 1px solid var(--border); box-shadow : -10px 0 40px rgba(0, 0, 0, 0.1); overflow-y : auto; } .mobile-nav.open { right: 0; } .mobile-nav a { font-family : var(--font-display); font-size : 1.25rem; font-weight : 700; color : var(--text); padding : 13px 0; border-bottom: 1px solid var(--border); transition : color 0.2s, padding-left 0.2s; } .mobile-nav a:hover { color: var(--primary); padding-left: 6px; } /* Overlay sombre derrière le menu mobile */ .mobile-nav-overlay { position : fixed; inset : 0; background : rgba(0, 0, 0, 0.5); z-index : 1400; display : none; backdrop-filter: blur(4px); } .mobile-nav-overlay.open { display: block; } /* ================================================================ 4. SECTION HERO → Grille 2 colonnes sur desktop → 1 colonne sur tablette/mobile → Orbes animées + partie droite spectaculaire ================================================================ */ .hero { min-height : 100vh; background : var(--hero-grad); display : flex; align-items : center; position : relative; overflow : hidden; padding-top : 70px; /* compense le header fixe */ } /* Grain texture subtil sur le fond hero */ .hero::before { content : ''; position : absolute; inset : 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); opacity : 0.5; pointer-events: none; } /* Orbes lumineuses animées */ .hero-orb { position : absolute; border-radius : 50%; filter : blur(80px); pointer-events: none; animation : orbFloat 9s ease-in-out infinite; } /* Orbe principale (gauche, grande) */ .hero-orb-1 { width : clamp(300px, 45vw, 600px); height : clamp(300px, 45vw, 600px); background : var(--primary); opacity : 0.22; top : -20%; right : -5%; animation-delay : 0s; } /* Orbe secondaire (bas gauche) */ .hero-orb-2 { width : clamp(180px, 28vw, 380px); height : clamp(180px, 28vw, 380px); background : var(--accent); opacity : 0.18; bottom : -10%; left : -5%; animation-delay : -3s; } /* Orbe tertiaire (milieu) */ .hero-orb-3 { width : clamp(120px, 18vw, 250px); height : clamp(120px, 18vw, 250px); background : var(--primary); opacity : 0.12; top : 35%; left : 28%; animation-delay : -6s; } /* ====== NOUVELLES ORBES POUR REMPLIR LA PARTIE DROITE ====== */ /* Orbe droite haute — effet halo */ .hero-orb-4 { width : clamp(150px, 22vw, 320px); height : clamp(150px, 22vw, 320px); background : var(--accent); opacity : 0.2; top : 10%; right : 30%; animation-delay : -2s; animation-duration: 11s; } /* Orbe droite basse */ .hero-orb-5 { width : clamp(100px, 14vw, 200px); height : clamp(100px, 14vw, 200px); background : white; opacity : 0.06; bottom : 20%; right : 15%; animation-delay : -4.5s; animation-duration: 7s; } /* Orbe accent petite — coin bas droit */ .hero-orb-6 { width : clamp(80px, 10vw, 140px); height : clamp(80px, 10vw, 140px); background : var(--primary); opacity : 0.25; bottom : 5%; right : 5%; animation-delay : -1s; animation-duration: 6s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(25px, -18px) scale(1.04); } 66% { transform: translate(-18px, 14px) scale(0.97); } } /* Conteneur interne hero (grille 2 colonnes) */ .hero-inner { position : relative; z-index : 2; display : grid; grid-template-columns : 1fr 1fr; align-items : center; gap : 50px; width : 100%; max-width : 1200px; margin : 0 auto; padding : 60px clamp(16px, 5%, 60px); } /* --- Côté gauche : texte --- */ .hero-label { display : inline-flex; align-items : center; gap : 8px; background : rgba(255, 255, 255, 0.1); border : 1px solid rgba(255, 255, 255, 0.2); padding : 6px 16px; border-radius : 50px; font-size : 0.78rem; color : rgba(255, 255, 255, 0.85); margin-bottom : 24px; backdrop-filter: blur(8px); } /* Point vert "disponible" qui pulse */ .hero-label-dot { width : 7px; height : 7px; background : #22c55e; border-radius : 50%; animation : pulseDot 2s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } .hero-title { font-family : var(--font-display); font-size : clamp(2rem, 4.5vw, 4rem); font-weight : 800; color : white; line-height : 1.1; letter-spacing : -1.5px; margin-bottom : 22px; } /* Mot mis en valeur avec dégradé */ .hero-title .highlight { background : var(--cta-grad); -webkit-background-clip : text; -webkit-text-fill-color : transparent; background-clip : text; } .hero-sub { font-size : clamp(0.9rem, 1.5vw, 1.08rem); color : rgba(255, 255, 255, 0.72); max-width : 520px; line-height : 1.85; margin-bottom : 36px; } /* Boutons d'action hero */ .hero-actions { display : flex; gap : 14px; flex-wrap : wrap; } .btn-hero-primary { display : inline-flex; align-items : center; gap : 9px; padding : 15px 30px; background : white; color : #111; border-radius : 50px; font-weight : 700; font-size : 0.92rem; transition : all 0.3s ease; box-shadow : 0 8px 30px rgba(0, 0, 0, 0.2); white-space : nowrap; } .btn-hero-primary:hover { transform : translateY(-3px); box-shadow : 0 16px 40px rgba(0, 0, 0, 0.3); } .btn-hero-wa { display : inline-flex; align-items : center; gap : 9px; padding : 15px 26px; background : #25D366; color : white; border-radius : 50px; font-weight : 700; font-size : 0.92rem; transition : all 0.3s ease; box-shadow : 0 8px 28px rgba(37, 211, 102, 0.35); white-space : nowrap; } .btn-hero-wa:hover { transform : translateY(-3px); box-shadow : 0 16px 40px rgba(37, 211, 102, 0.45); } /* --- Côté droit : visuel spectaculaire --- */ .hero-visual { position : relative; display : flex; justify-content : center; align-items : center; /* hauteur minimale pour que la zone ne soit jamais vide */ min-height : 460px; } /* Halo de lumière derrière le visuel */ .hero-visual-halo { position : absolute; width : 360px; height : 360px; border-radius : 50%; background : var(--primary); opacity : 0.12; filter : blur(60px); animation : haloBreath 5s ease-in-out infinite; } @keyframes haloBreath { 0%, 100% { transform: scale(1); opacity: 0.12; } 50% { transform: scale(1.15); opacity: 0.2; } } /* Grille des cartes flottantes */ .hero-cards-grid { position : relative; width : 100%; max-width : 420px; height : 460px; } /* Carte de base */ .h-card { position : absolute; background : rgba(255, 255, 255, 0.07); border : 1px solid rgba(255, 255, 255, 0.14); backdrop-filter : blur(18px); border-radius : 20px; color : white; transition : transform 0.3s ease; } .h-card:hover { transform: translateY(-6px) scale(1.02); } /* Carte principale (grande, centrée) */ .h-card-main { width : 260px; top : 50%; left : 50%; transform : translate(-50%, -50%); padding : 26px; z-index : 4; box-shadow : 0 24px 60px rgba(0, 0, 0, 0.35); animation : cardFloat 6s ease-in-out infinite; } @keyframes cardFloat { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-12px); } } /* Cartes secondaires en arrière */ .h-card-b1 { width : 220px; top : 22%; left : 2%; padding : 18px 22px; z-index : 3; opacity : 0.75; transform : rotate(-6deg); animation : cardFloat2 7s ease-in-out infinite; } .h-card-b2 { width : 200px; bottom : 15%; right : 0%; padding : 16px 20px; z-index : 3; opacity : 0.65; transform : rotate(5deg); animation : cardFloat3 8s ease-in-out infinite; } /* Petite carte stat flottante (haut droite) */ .h-card-stat { width : 150px; top : 5%; right : 0%; padding : 14px 18px; z-index : 5; opacity : 0.9; animation : cardFloat4 5s ease-in-out infinite; } /* Petite carte notification (bas gauche) */ .h-card-notif { width : 180px; bottom : 3%; left : 0%; padding : 12px 16px; z-index : 5; opacity : 0.88; animation : cardFloat5 6.5s ease-in-out infinite; } @keyframes cardFloat2 { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-8px); } } @keyframes cardFloat3 { 0%, 100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-10px); } } @keyframes cardFloat4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes cardFloat5 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* Icône dans les cartes */ .h-card-icon { width : 44px; height : 44px; border-radius : 12px; background : var(--cta-grad); display : flex; align-items : center; justify-content: center; font-size : 1.2rem; margin-bottom : 14px; } .h-card-icon.sm { width : 32px; height : 32px; font-size: 0.85rem; border-radius: 8px; } .h-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; color: white; } .h-card p { font-size: 0.75rem; color: rgba(255,255,255,0.65); line-height: 1.5; } /* Tags dans la carte principale */ .h-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; } .h-card-tag { padding : 4px 10px; background : rgba(255, 255, 255, 0.15); border-radius : 20px; font-size : 0.68rem; color : rgba(255, 255, 255, 0.9); } /* Carte stat : affichage chiffre + libellé */ .h-stat-num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: white; display: block; } .h-stat-lbl { font-size: 0.7rem; color: rgba(255,255,255,0.65); } /* Carte notif : ligne icône + texte */ .h-notif-row { display: flex; align-items: center; gap: 10px; } .h-notif-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; flex-shrink: 0; animation: pulseDot 2s infinite; } .h-notif-txt { font-size: 0.75rem; color: rgba(255,255,255,0.85); font-weight: 600; } .h-notif-sub { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 3px; } /* Grille de points décoratifs (dots pattern) */ .hero-dots { position : absolute; width : 180px; height : 180px; background-image : radial-gradient(circle, rgba(255,255,255,0.2) 1.5px, transparent 1.5px); background-size : 18px 18px; bottom : 30px; right : -10px; opacity : 0.4; pointer-events : none; } /* Cercle décoratif en arrière-plan */ .hero-ring { position : absolute; width : 340px; height : 340px; border : 1px solid rgba(255, 255, 255, 0.1); border-radius : 50%; top : 50%; left : 50%; transform : translate(-50%, -50%); animation : ringRotate 20s linear infinite; pointer-events: none; } .hero-ring-2 { width : 480px; height : 480px; border-color: rgba(255,255,255,0.05); animation-duration: 35s; animation-direction: reverse; } @keyframes ringRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } /* Flèche de scroll en bas du hero */ .hero-scroll-hint { position : absolute; bottom : 36px; left : 50%; transform : translateX(-50%); display : flex; flex-direction: column; align-items: center; gap : 6px; color : rgba(255,255,255,0.45); font-size : 0.7rem; animation : scrollBounce 2s ease-in-out infinite; z-index : 3; } @keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(9px); } } /* ================================================================ 5. BANDE DE STATISTIQUES ================================================================ */ .stats-band { background : var(--cta-grad); padding : 60px 5%; } .stats-inner { max-width : 1000px; margin : 0 auto; display : grid; grid-template-columns : repeat(3, 1fr); gap : 40px; text-align : center; } .stat-item { color: white; } .stat-number { font-family : var(--font-display); font-size : clamp(2.2rem, 5vw, 3.5rem); font-weight : 800; line-height : 1; display : block; margin-bottom : 8px; } .stat-plus { color: rgba(255,255,255,0.65); } .stat-label { font-size: 0.88rem; color: rgba(255,255,255,0.8); font-weight: 500; } /* ================================================================ 6. EN-TÊTES DE SECTION (réutilisables) ================================================================ */ .section-eyebrow { display : inline-flex; align-items : center; gap : 8px; color : var(--primary); font-weight : 600; font-size : 0.78rem; text-transform : uppercase; letter-spacing : 2px; margin-bottom : 14px; } .section-eyebrow::before { content : ''; display : block; width : 20px; height : 2px; background : var(--primary); } .section-title { font-family : var(--font-display); font-size : clamp(1.7rem, 3.5vw, 2.8rem); font-weight : 800; color : var(--text); letter-spacing : -0.8px; margin-bottom : 14px; line-height : 1.15; } .section-sub { font-size : clamp(0.9rem, 1.3vw, 1.05rem); color : var(--text-3); max-width : 560px; line-height : 1.85; } .section-header { margin-bottom: 56px; } .section-header.centered { text-align: center; } .section-header.centered .section-eyebrow { justify-content: center; } .section-header.centered .section-sub { margin: 0 auto; } /* ================================================================ 7. SECTION PROBLÈME → SOLUTION ================================================================ */ .pain-section { background: var(--bg-2); } .pain-grid { display : grid; grid-template-columns : 1fr 1fr; gap : 60px; align-items : center; } .pain-list { display: flex; flex-direction: column; gap: 16px; } .pain-item { display : flex; align-items : flex-start; gap : 14px; padding : 18px; background : var(--bg); border-radius : 14px; border : 1px solid var(--border); box-shadow : var(--card-shadow); transition : transform 0.2s; } .pain-item:hover { transform: translateX(5px); } .pain-icon { width : 38px; height : 38px; flex-shrink : 0; border-radius : 10px; display : flex; align-items : center; justify-content: center; font-size : 0.9rem; } .pain-icon.red { background: #fee2e2; color: #ef4444; } .pain-icon.orange { background: #ffedd5; color: #f97316; } .pain-icon.yellow { background: #fef9c3; color: #eab308; } .pain-icon.blue { background: #dbeafe; color: #3b82f6; } .pain-item h4 { font-size: 0.9rem; margin-bottom: 3px; color: var(--text); } .pain-item p { font-size: 0.82rem; color: var(--text-3); margin: 0; line-height: 1.5; } .solution-box { background : var(--cta-grad); border-radius: 24px; padding : 44px; color : white; position : relative; overflow : hidden; } /* Décoration géométrique en fond de la solution box */ .solution-box::before { content : ''; position : absolute; top : -60px; right : -60px; width : 220px; height : 220px; background : rgba(255,255,255,0.08); border-radius : 50%; } .solution-box::after { content : ''; position : absolute; bottom : -40px; left : -40px; width : 150px; height : 150px; background : rgba(255,255,255,0.05); border-radius : 50%; } .solution-box h3 { font-size: 1.7rem; font-weight: 800; margin-bottom: 18px; position: relative; z-index: 1; } .solution-box > p { font-size: 0.95rem; line-height: 1.8; opacity: 0.9; margin-bottom: 24px; position: relative; z-index: 1; } .solution-checks { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; } .solution-check { display: flex; align-items: center; gap: 11px; font-size: 0.88rem; font-weight: 500; } .solution-check i { color: rgba(255,255,255,0.85); flex-shrink: 0; } .solution-box .btn-solution { display : inline-flex; align-items : center; gap : 9px; margin-top : 26px; padding : 13px 24px; background : white; color : #111; border-radius : 50px; font-weight : 800; font-size : 0.88rem; text-decoration: none; box-shadow : 0 6px 20px rgba(0,0,0,0.18); transition : all 0.3s; position : relative; z-index : 1; } .solution-box .btn-solution:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.25); } /* ================================================================ 8. SERVICES ================================================================ */ .services-section { background: var(--bg); } .services-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 22px; } .service-card { background : var(--surface); border : 1px solid var(--border); border-radius : 20px; padding : 32px 28px; position : relative; overflow : hidden; transition : all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .service-card:hover { transform : translateY(-8px); border-color : var(--primary); box-shadow : 0 20px 50px var(--primary-glow); } /* Numéro de service en fond */ .service-card-number { font-family : var(--font-display); font-size : 3.5rem; font-weight : 800; color : var(--border); line-height : 1; margin-bottom: 16px; transition : color 0.3s; } .service-card:hover .service-card-number { color: var(--primary); opacity: 0.3; } /* Icône du service */ .service-icon-wrap { width : 52px; height : 52px; background : var(--primary-glow); border : 1px solid var(--border); border-radius : 14px; display : flex; align-items : center; justify-content: center; font-size : 1.3rem; color : var(--primary); margin-bottom : 18px; transition : all 0.3s; } .service-card:hover .service-icon-wrap { background: var(--primary); color: white; border-color: var(--primary); } .service-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: var(--text); } .service-card p { font-size: 0.87rem; color: var(--text-3); line-height: 1.7; margin-bottom: 18px; } .service-card-tags { display: flex; flex-wrap: wrap; gap: 6px; } .service-tag { padding : 4px 10px; background : var(--bg-3); border-radius : 20px; font-size : 0.7rem; color : var(--text-3); border : 1px solid var(--border); font-weight : 500; } /* ================================================================ 9. PORTFOLIO ================================================================ */ .portfolio-section { background: var(--bg-2); } .portfolio-filters { display : flex; gap : 10px; flex-wrap : wrap; margin-bottom: 44px; } .filter-btn { padding : 9px 22px; border-radius : 50px; border : 1px solid var(--border); background : var(--bg); color : var(--text-3); font-size : 0.85rem; font-weight : 500; white-space : nowrap; font-family : var(--font-body); transition : all 0.2s; } .filter-btn:hover, .filter-btn.active { background : var(--primary); color : white; border-color : var(--primary); box-shadow : 0 4px 15px var(--primary-glow); } .portfolio-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 22px; } .project-card { background : var(--bg); border : 1px solid var(--border); border-radius : 20px; overflow : hidden; transition : all 0.35s cubic-bezier(0.4, 0, 0.2, 1); display : flex; flex-direction: column; } .project-card:hover { transform : translateY(-8px); box-shadow : 0 24px 60px var(--primary-glow); border-color : var(--primary); } .project-card.hidden { display: none; } .project-img { position : relative; height : 220px; overflow : hidden; background : var(--surface); } .project-img img { width : 100%; height : 100%; object-fit : cover; transition : transform 0.5s ease; } .project-card:hover .project-img img { transform: scale(1.06); } .project-badge { position : absolute; top : 12px; right : 12px; padding : 5px 12px; border-radius : 50px; font-size : 0.68rem; font-weight : 700; text-transform: uppercase; z-index : 2; backdrop-filter: blur(8px); } .badge-live { background: rgba(34,197,94,0.88); color: white; } .badge-design { background: rgba(245,158,11,0.88); color: white; } .project-body { padding : 22px; flex : 1; display : flex; flex-direction: column; } .project-cat { font-size: 0.73rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 8px; } .project-body h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 7px; color: var(--text); } .project-body p { font-size: 0.83rem; color: var(--text-3); line-height: 1.6; flex: 1; margin-bottom: 14px; } .project-pills { display: flex; flex-wrap: wrap; gap: 5px; } .project-pill { padding : 3px 9px; background : var(--surface); border : 1px solid var(--border); border-radius : 20px; font-size : 0.7rem; color : var(--text-3); font-family : monospace; } .portfolio-cta { text-align: center; margin-top: 48px; } .btn-outline-primary { display : inline-flex; align-items : center; gap : 9px; padding : 14px 32px; border : 2px solid var(--primary); color : var(--primary); border-radius : 50px; font-weight : 700; font-size : 0.93rem; transition : all 0.3s; } .btn-outline-primary:hover { background : var(--primary); color : white; transform : translateY(-3px); box-shadow : 0 12px 30px var(--primary-glow); } /* ================================================================ 10. À PROPOS ================================================================ */ .about-section { background: var(--bg); } .about-grid { display : grid; grid-template-columns : 1fr 1.2fr; gap : 80px; align-items : center; } .about-image-wrap { position: relative; } .about-img-frame { border-radius : 24px; overflow : hidden; border : 1px solid var(--border); box-shadow : var(--card-shadow); } .about-img-frame img { width : 100%; aspect-ratio: 4 / 5; object-fit : cover; display : block; } /* Bande de couleur derrière la photo */ .about-image-wrap::before { content : ''; position : absolute; top : 20px; left : -20px; right : 20px; bottom : -20px; border : 2px solid var(--primary); border-radius : 24px; opacity : 0.3; z-index : -1; } /* Badge flottant sur la photo */ .about-badge { position : absolute; bottom : -20px; right : -16px; background : var(--cta-grad); color : white; padding : 14px 20px; border-radius : 14px; font-weight : 700; font-size : 0.82rem; box-shadow : 0 10px 30px rgba(0,0,0,0.2); text-align : center; min-width : 120px; } .about-badge span { display: block; font-size: 1.5rem; font-weight: 800; font-family: var(--font-display); } .about-content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 18px; color: var(--text); } .about-text { font-size: 0.97rem; color: var(--text-3); line-height: 1.9; margin-bottom: 18px; } .about-skills { display: flex; flex-wrap: wrap; gap: 9px; margin: 24px 0; } .skill-badge { display : flex; align-items : center; gap : 6px; padding : 7px 15px; background : var(--surface); border : 1px solid var(--border); border-radius : 50px; font-size : 0.8rem; font-weight : 600; color : var(--text-2); transition : all 0.2s; } .skill-badge:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-glow); } .skill-badge i { font-size: 0.78rem; color: var(--primary); } .about-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .btn-about-wa { display : inline-flex; align-items : center; gap : 9px; padding : 13px 26px; background : #25D366; color : white; border-radius : 50px; font-weight : 700; font-size : 0.88rem; transition : all 0.3s; box-shadow : 0 6px 20px rgba(37,211,102,0.25); } .btn-about-wa:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37,211,102,0.35); } .btn-about-email { display : inline-flex; align-items : center; gap : 9px; padding : 13px 26px; background : var(--surface); border : 1px solid var(--border); color : var(--text-2); border-radius : 50px; font-weight : 700; font-size : 0.88rem; transition : all 0.3s; } .btn-about-email:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); } /* ================================================================ 11. PROCESSUS (4 étapes) ================================================================ */ .process-section { background: var(--bg-2); } .process-steps { display : grid; grid-template-columns : repeat(4, 1fr); gap : 28px; position : relative; } /* Ligne de connexion entre les étapes */ .process-steps::before { content : ''; position : absolute; top : 39px; left : calc(12.5% + 20px); right : calc(12.5% + 20px); height : 2px; background : var(--border); z-index : 0; } .process-step { text-align: center; position: relative; z-index: 1; } .step-circle { width : 78px; height : 78px; border-radius : 50%; background : var(--bg); border : 2px solid var(--border); display : flex; align-items : center; justify-content: center; margin : 0 auto 18px; font-size : 1.3rem; color : var(--text-3); position : relative; transition : all 0.3s; } .process-step:hover .step-circle { background: var(--primary); border-color: var(--primary); color: white; transform: scale(1.08); } .step-num { position : absolute; top : -4px; right : calc(50% - 44px); width : 20px; height : 20px; background : var(--primary); color : white; border-radius : 50%; font-size : 0.65rem; font-weight : 800; display : flex; align-items : center; justify-content: center; } .process-step h4 { font-size: 0.97rem; font-weight: 700; margin-bottom: 8px; color: var(--text); } .process-step p { font-size: 0.82rem; color: var(--text-3); line-height: 1.6; } /* ================================================================ 12. TARIFS ================================================================ */ .pricing-section { background: var(--bg); } .pricing-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 22px; align-items : start; } .pricing-card { background : var(--surface); border : 1px solid var(--border); border-radius : 22px; padding : 36px 30px; position : relative; transition : all 0.3s; display : flex; flex-direction: column; } .pricing-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px var(--primary-glow); } /* Carte mise en avant */ .pricing-card.featured { background : var(--cta-grad); border : none; color : white; transform : scale(1.03); } .pricing-card.featured:hover { transform: scale(1.03) translateY(-5px); } .pricing-popular { position : absolute; top : -13px; left : 50%; transform : translateX(-50%); background : white; color : var(--primary); padding : 4px 16px; border-radius : 50px; font-size : 0.72rem; font-weight : 800; text-transform: uppercase; letter-spacing: 0.5px; white-space : nowrap; box-shadow : 0 4px 12px rgba(0,0,0,0.12); } .pricing-icon { width : 52px; height : 52px; border-radius : 14px; display : flex; align-items : center; justify-content: center; font-size : 1.3rem; margin-bottom : 18px; background : var(--primary-glow); color : var(--primary); } .pricing-card.featured .pricing-icon { background: rgba(255,255,255,0.2); color: white; } .pricing-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 5px; color: var(--text); } .pricing-card.featured h3 { color: white; } .pricing-card p.pricing-desc { font-size: 0.83rem; color: var(--text-3); margin-bottom: 20px; line-height: 1.6; } .pricing-card.featured p.pricing-desc{ color: rgba(255,255,255,0.8); } .price-tag { font-size : 0.88rem; font-weight : 600; color : var(--primary); background : var(--primary-glow); border : 1px solid var(--border); padding : 9px 14px; border-radius : 9px; margin-bottom : 20px; display : flex; align-items : center; gap : 7px; } .pricing-card.featured .price-tag { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); color: white; } .pricing-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; flex: 1; } .pricing-feature { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--text-2); } .pricing-card.featured .pricing-feature { color: rgba(255,255,255,0.9); } .pricing-feature i { color: #22c55e; font-size: 0.82rem; flex-shrink: 0; } .pricing-card.featured .pricing-feature i { color: rgba(255,255,255,0.7); } .btn-pricing { display : block; text-align : center; padding : 13px; border-radius: 11px; font-weight : 700; font-size : 0.88rem; transition : all 0.3s; text-decoration: none; } .btn-pricing-outline { border: 2px solid var(--primary); color: var(--primary); } .btn-pricing-outline:hover { background: var(--primary); color: white; } .btn-pricing-white { background: white; color: var(--primary-dark); } .btn-pricing-white:hover { opacity: 0.9; transform: translateY(-2px); } /* ================================================================ 13. TÉMOIGNAGES ================================================================ */ .testimonials-section { background: var(--bg-2); } .testi-grid { display : grid; grid-template-columns : repeat(3, 1fr); gap : 22px; } .testi-card { background : var(--bg); border : 1px solid var(--border); border-radius : 20px; padding : 28px; transition : all 0.3s; } .testi-card:hover { transform: translateY(-5px); box-shadow: var(--card-shadow); border-color: var(--primary); } .testi-stars { color: #f59e0b; font-size: 0.82rem; margin-bottom: 14px; letter-spacing: 2px; } .testi-text { font-size : 0.9rem; color : var(--text-2); line-height : 1.8; margin-bottom : 18px; font-style : italic; } .testi-text::before { content: '"'; font-size: 1.4rem; color: var(--primary); } .testi-text::after { content: '"'; font-size: 1.4rem; color: var(--primary); } .testi-author { display: flex; align-items: center; gap: 11px; } .testi-avatar { width : 42px; height : 42px; border-radius : 50%; background : var(--cta-grad); display : flex; align-items : center; justify-content: center; color : white; font-weight : 800; font-size : 0.95rem; flex-shrink : 0; } .testi-author-name { font-weight: 700; font-size: 0.88rem; color: var(--text); } .testi-author-role { font-size: 0.75rem; color: var(--text-3); } /* ================================================================ 14. FAQ ================================================================ */ .faq-section { background: var(--bg); } .faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .faq-item { background : var(--surface); border : 1px solid var(--border); border-radius : 13px; overflow : hidden; transition : border-color 0.3s; } .faq-item.open { border-color: var(--primary); } .faq-q { display : flex; justify-content : space-between; align-items : center; gap : 14px; padding : 18px 22px; cursor : pointer; font-weight : 600; font-size : 0.93rem; color : var(--text); transition : color 0.2s; } .faq-q:hover { color: var(--primary); } .faq-q i { flex-shrink: 0; color: var(--primary); transition: transform 0.3s; } .faq-item.open .faq-q i { transform: rotate(45deg); } .faq-a { max-height : 0; overflow : hidden; transition : max-height 0.35s ease, padding 0.35s; padding : 0 22px; font-size : 0.88rem; color : var(--text-3); line-height: 1.8; } .faq-item.open .faq-a { max-height: 220px; padding: 0 22px 18px; } /* ================================================================ 15. CONTACT ================================================================ */ .contact-section { background: var(--bg-2); } .contact-grid { display : grid; grid-template-columns : 1fr 1.2fr; gap : 60px; align-items : start; } .contact-info h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 14px; color: var(--text); } .contact-info > p { color: var(--text-3); line-height: 1.8; margin-bottom: 32px; font-size: 0.93rem; } .contact-methods { display: flex; flex-direction: column; gap: 12px; } .contact-method { display : flex; align-items : center; gap : 14px; padding : 14px 18px; background : var(--bg); border : 1px solid var(--border); border-radius : 13px; transition : all 0.2s; text-decoration: none; } .contact-method:hover { border-color: var(--primary); transform: translateX(4px); } .contact-method-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; } .cm-wa { background: rgba(37,211,102,0.1); color: #25D366; } .cm-mail { background: var(--primary-glow); color: var(--primary); } .cm-loc { background: rgba(239,68,68,0.1); color: #ef4444; } .contact-method-text strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text); margin-bottom: 1px; } .contact-method-text span { font-size: 0.78rem; color: var(--text-3); } /* Formulaire de contact */ .contact-form-box { background: var(--bg); border: 1px solid var(--border); border-radius : 22px; padding: 36px; } .contact-form-box h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 22px; color: var(--text); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .form-group input, .form-group textarea, .form-group select { width : 100%; padding : 12px 15px; border : 1px solid var(--border); border-radius : 9px; background : var(--surface); color : var(--text); font-family : var(--font-body); font-size : 0.88rem; outline : none; transition : border-color 0.2s, box-shadow 0.2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .form-group textarea { resize: vertical; min-height: 110px; } .btn-submit { width : 100%; padding : 15px; background : var(--cta-grad); color : white; border : none; border-radius : 11px; font-weight : 700; font-size : 0.97rem; font-family : var(--font-body); display : flex; align-items : center; justify-content: center; gap : 9px; transition : all 0.3s; } .btn-submit:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 10px 30px var(--primary-glow); } .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } /* ================================================================ 16. CTA BANDE FINALE ================================================================ */ .cta-band { background : var(--hero-grad); padding : 100px 5%; text-align : center; position : relative; overflow : hidden; } /* Pattern de points en fond */ .cta-band::before { content : ''; position : absolute; inset : 0; background : url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .cta-band-inner { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: white; margin-bottom: 14px; letter-spacing: -0.8px; } .cta-band p { font-size: 1.05rem; color: rgba(255,255,255,0.72); margin-bottom: 38px; max-width: 520px; margin-left: auto; margin-right: auto; line-height: 1.7; } .cta-band-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ================================================================ 17. FOOTER ================================================================ */ footer { background: #060a0f; color: #94a3b8; padding: 70px 5% 28px; } .footer-grid { display : grid; grid-template-columns : 2fr 1fr 1fr 1fr; gap : 48px; padding-bottom : 48px; border-bottom : 1px solid #1e2d45; margin-bottom : 28px; } .footer-brand .logo { margin-bottom: 14px; color: white; } .footer-brand p { font-size: 0.86rem; line-height: 1.8; max-width: 280px; color: #64748b; margin-bottom: 18px; } .footer-socials { display: flex; gap: 10px; } .footer-social { width : 36px; height : 36px; border-radius : 9px; background : #1e2d45; display : flex; align-items : center; justify-content: center; color : #94a3b8; font-size : 0.9rem; transition : all 0.2s; text-decoration: none; } .footer-social:hover { background: var(--primary); color: white; transform: translateY(-2px); } .footer-col h4 { color: white; font-weight: 700; font-size: 0.88rem; margin-bottom: 18px; font-family: var(--font-display); } .footer-col ul { display: flex; flex-direction: column; gap: 9px; } .footer-col ul li a { font-size: 0.83rem; color: #64748b; transition: color 0.2s; } .footer-col ul li a:hover { color: white; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 0.8rem; color: #475569; } .footer-bottom a { color: #64748b; transition: color 0.2s; } .footer-bottom a:hover { color: white; } /* ================================================================ 18. ÉLÉMENTS GLOBAUX FIXES ================================================================ */ /* WhatsApp flottant avec animation pulse */ .wa-float { position : fixed; bottom : 28px; right : 28px; width : 56px; height : 56px; background : #25D366; border-radius : 50%; display : flex; align-items : center; justify-content: center; color : white; font-size : 1.4rem; z-index : 999; box-shadow : 0 6px 24px rgba(37,211,102,0.4); text-decoration: none; transition : all 0.3s; animation : waPulse 3s ease-in-out infinite; } .wa-float:hover { transform: scale(1.1); } @keyframes waPulse { 0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); } 50% { box-shadow: 0 6px 40px rgba(37,211,102,0.6), 0 0 0 10px rgba(37,211,102,0.08); } } /* Tooltip du bouton WA */ .wa-tooltip { position : absolute; right : 66px; background : #111; color : white; padding : 7px 13px; border-radius : 7px; font-size : 0.75rem; white-space : nowrap; opacity : 0; pointer-events : none; transition : opacity 0.2s; } .wa-float:hover .wa-tooltip { opacity: 1; } /* Bouton retour en haut */ #back-top { position : fixed; bottom : 96px; right : 28px; width : 42px; height : 42px; background : var(--surface); border : 1px solid var(--border); border-radius : 50%; display : none; align-items : center; justify-content: center; color : var(--text-3); font-size : 0.88rem; z-index : 900; transition : all 0.2s; box-shadow : 0 4px 12px rgba(0,0,0,0.08); } #back-top:hover { background: var(--primary); color: white; border-color: var(--primary); } /* Toast de notification */ .toast { position : fixed; top : 86px; right : 22px; background : #111; color : white; padding : 13px 20px; border-radius : 11px; font-size : 0.86rem; font-weight : 500; display : flex; align-items : center; gap : 9px; z-index : 9999; box-shadow : 0 10px 40px rgba(0,0,0,0.3); transform : translateX(120%); transition : transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .toast.show { transform: translateX(0); } .toast.success { background: #16a34a; } .toast.error { background: #dc2626; } /* ================================================================ 19. ANIMATIONS DE SCROLL (Reveal) Chaque section entre par les côtés comme des portes qui s'ouvrent ================================================================ */ /* -- État initial : invisible et décalé -- */ .reveal { opacity: 0; transition: opacity 0.75s ease, transform 0.75s ease; } /* Slides du centre vers le bas (défaut) */ .reveal { transform: translateY(36px); } /* Slides depuis la gauche */ .reveal-left { transform: translateX(-60px) translateY(0); opacity: 0; transition: opacity 0.75s ease, transform 0.75s ease; } /* Slides depuis la droite */ .reveal-right { transform: translateX(60px) translateY(0); opacity: 0; transition: opacity 0.75s ease, transform 0.75s ease; } /* Fade simple sans déplacement */ .reveal-fade { transform: none; opacity: 0; transition: opacity 0.75s ease; } /* Zoom léger */ .reveal-zoom { transform: scale(0.93); opacity: 0; transition: opacity 0.75s ease, transform 0.75s ease; } /* -- État final : visible et en place -- */ .reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-fade.visible, .reveal-zoom.visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Délais échelonnés pour les grilles */ .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; } /* ---- EFFET "PORTES QUI S'OUVRENT" sur les sections ---- */ /* Chaque section a une animation d'entrée au scroll */ .section-animate { overflow : hidden; /* clip le contenu pendant l'animation */ position : relative; } /* Masque gauche : se rétracte vers la gauche au scroll */ .section-animate::before { content : ''; position : absolute; inset : 0; background : var(--bg); z-index : 10; transform : scaleX(1); transform-origin: left center; transition : transform 0.8s cubic-bezier(0.77, 0, 0.175, 1); pointer-events: none; } /* Masque droit : se rétracte vers la droite au scroll */ .section-animate::after { content : ''; position : absolute; inset : 0; background : var(--primary); opacity : 0.06; z-index : 9; transform : scaleX(1); transform-origin: right center; transition : transform 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.08s; pointer-events: none; } /* Quand la section entre dans le viewport : les masques disparaissent */ .section-animate.revealed::before { transform: scaleX(0); } .section-animate.revealed::after { transform: scaleX(0); } /* ================================================================ 20. RESPONSIVE — Breakpoints précis 1280px → tablette paysage 900px → tablette portrait 768px → mobile large 480px → mobile moyen 360px → petit mobile ================================================================ */ /* ---- 1280px : tablette paysage ---- */ @media (max-width: 1280px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .portfolio-grid { grid-template-columns: repeat(2, 1fr); } .testi-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } } /* ---- 900px : tablette portrait ---- */ @media (max-width: 900px) { /* Header : on cache le nav desktop dès 900px */ .desktop-nav { display: none; } .btn-cta-nav { display: none; } .hamburger { display: flex; } .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } /* Cache le visuel hero (les cartes flottantes) pour gagner de l'espace */ .hero-visual { display: none; } .pain-grid { grid-template-columns: 1fr; gap: 40px; } .about-grid { grid-template-columns: 1fr; gap: 48px; } .about-image-wrap { max-width: 360px; margin: 0 auto; } .about-image-wrap::before { display: none; } .about-badge { right: 0; bottom: 0; } .process-steps { grid-template-columns: repeat(2, 1fr); } .process-steps::before { display: none; } .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } .pricing-card.featured { transform: none; } .pricing-card.featured:hover { transform: translateY(-5px); } .contact-grid { grid-template-columns: 1fr; } .stats-inner { grid-template-columns: repeat(3, 1fr); } } /* ---- 768px : mobile large ---- */ @media (max-width: 768px) { section { padding: 70px 0; } /* Thème : on cache le label texte pour gagner de la place */ .theme-trigger .theme-label { display: none; } .services-grid { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } .testi-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 28px; } .form-row { grid-template-columns: 1fr; } .contact-form-box { padding: 24px; } } /* ---- 480px : mobile moyen ---- */ @media (max-width: 480px) { .header-inner { padding: 0 16px; } .hero-title { font-size: 1.9rem; letter-spacing: -0.8px; } .hero-actions { flex-direction: column; align-items: center; } .btn-hero-primary, .btn-hero-wa { width: 100%; justify-content: center; } .stats-inner { grid-template-columns: 1fr; gap: 24px; } .about-cta-row { flex-direction: column; } .btn-about-wa, .btn-about-email { width: 100%; justify-content: center; } } /* ---- 360px : petit mobile ---- */ @media (max-width: 360px) { .logo { font-size: 1.2rem; } .hero-title { font-size: 1.7rem; } .section-title { font-size: 1.5rem; } } /* ---- Mode paysage sur mobile (hauteur réduite) ---- */ @media (max-height: 500px) and (orientation: landscape) { .hero { min-height: auto; padding: 90px 5% 60px; } .hero-scroll-hint { display: none; } }