/* * VARIABLES RACINE : * Ces variables définissent les couleurs principales, les arrière-plans, les ombres et les espacements. * Elles sont utilisées partout dans le CSS pour garder le design cohérent et facile à modifier. * Pour un débutant : Changez une variable ici, et tout le site se met à jour automatiquement ! */ :root { --primary: #ff6200; /* Couleur principale (orange vif) */ --primary-dark: #e55a00; /* Variante plus foncée pour les hovers */ --primary-light: #ff8c42; /* Variante plus claire */ --secondary: #ff4500; /* Couleur secondaire (orange rougeâtre) */ --accent: #ffa500; /* Accent pour les éléments importants */ --success: #10b981; /* Vert pour les succès */ --warning: #f59e0b; /* Jaune pour les avertissements */ --danger: #ef4444; /* Rouge pour les erreurs */ --bg-main: #ffffff; /* Arrière-plan principal (blanc en mode clair) */ --bg-alt: #fff8f5; /* Arrière-plan alternatif (léger orange pâle) */ --bg-subtle: #fff0e6; /* Arrière-plan subtil */ --text-primary: #0f172a; /* Texte principal (noir foncé) */ --text-secondary: #475569; /* Texte secondaire (gris) */ --text-tertiary: #94a3b8; /* Texte tertiaire (gris clair) */ --border: #ffe4d1; /* Bordures (orange clair) */ --shadow-sm: 0 1px 2px 0 rgba(255, 98, 0, 0.05); /* Ombre légère */ --shadow-md: 0 4px 6px -1px rgba(255, 98, 0, 0.1); /* Ombre moyenne */ --shadow-lg: 0 10px 15px -3px rgba(255, 98, 0, 0.1); /* Ombre large */ --shadow-xl: 0 20px 25px -5px rgba(255, 98, 0, 0.1); /* Ombre extra large */ --shadow-2xl: 0 25px 50px -12px rgba(255, 98, 0, 0.25); /* Ombre très large */ --radius-sm: 8px; /* Rayon de bordure petit */ --radius-md: 12px; /* Rayon moyen */ --radius-lg: 16px; /* Rayon large */ --radius-xl: 24px; /* Rayon extra large */ --spacing-xs: 8px; /* Espacement extra petit */ --spacing-sm: 16px; /* Petit */ --spacing-md: 24px; /* Moyen */ --spacing-lg: 32px; /* Large */ --spacing-xl: 48px; /* Extra large */ --spacing-2xl: 64px; /* Très large */ --spacing-3xl: 96px; /* Encore plus large */ } /* * MODE SOMBRE : * Redéfinit les variables pour le thème sombre. * Appliqué quand l'attribut data-theme="dark" est sur l'élément . * Pour un débutant : Cela permet de switcher entre clair et sombre sans changer tout le code. */ [data-theme="dark"] { --bg-main: #0f172a; /* Arrière-plan principal sombre */ --bg-alt: #1e293b; /* Alternatif sombre */ --bg-subtle: #334155; /* Subtil sombre */ --text-primary: #f1f5f9; /* Texte clair */ --text-secondary: #cbd5e1; /* Texte secondaire clair */ --text-tertiary: #64748b; /* Texte tertiaire clair */ --border: #334155; /* Bordures sombres */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5); /* Ombres adaptées au sombre */ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5); } /* * RÉINITIALISATION GLOBALE : * Enlève les marges et paddings par défaut de tous les éléments. * Utilise border-box pour que les largeurs incluent les bordures et paddings. * Pour un débutant : Cela évite les surprises avec les tailles des éléments. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* * HTML ET BODY : * Active le défilement doux pour les ancres. * Définit la police, l'arrière-plan et la couleur du texte avec des variables. * Ajoute une transition pour changer de thème sans à-coups. */ html { scroll-behavior: smooth; font-size: 16px; /* Taille de base pour les rem/em */ } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg-main); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; /* Empêche le défilement horizontal */ transition: background 0.3s ease, color 0.3s ease; -webkit-font-smoothing: antialiased; /* Améliore le rendu des polices sur WebKit */ -moz-osx-font-smoothing: grayscale; /* Améliore sur Firefox macOS */ } /* * CONTAINER : * Limite la largeur max du contenu et ajoute un padding responsive. * Pour un débutant : Cela centre le contenu et l'adapte aux écrans. */ .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); /* Padding adaptatif */ } /* * SECTIONS : * Styles de base pour les sections avec animation d'apparition au scroll. * La classe .visible active l'animation quand la section entre en vue. */ section { padding: var(--spacing-3xl) 0; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } section.visible { opacity: 1; transform: translateY(0); } /* * TITRES ET PARAGRAPHES : * Styles pour les headings (h1-h6) et paragraphes. * Utilise clamp() pour des tailles responsives (adaptées à l'écran). */ h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: clamp(2.5rem, 6vw, 4rem); } h2 { font-size: clamp(2rem, 5vw, 3rem); } h3 { font-size: clamp(1.5rem, 4vw, 2rem); } p { line-height: 1.75; color: var(--text-secondary); } a { text-decoration: none; color: inherit; } /* * HEADER : * Barre de navigation fixe en haut de la page avec effet de flou (backdrop-filter). * Ajoute une bordure et une ombre quand on scroll (classe .scrolled). * z-index élevé pour être toujours au-dessus du contenu. * Amélioration : Rendu plus moderne avec saturation pour un effet verre dépoli. */ header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--border); z-index: 1001; transition: all 0.3s ease; } [data-theme="dark"] header { background: rgba(15, 23, 42, 0.95); } header.scrolled { box-shadow: var(--shadow-md); } /* * HEADER-CONTAINER : * Conteneur flex pour aligner logo, nav et actions. * Padding ajusté pour un bon espacement. */ .header-container { display: flex; align-items: center; justify-content: space-between; padding: 16px 40px; max-width: 1440px; margin: 0 auto; position: relative; } /* * LOGO-WRAPPER : * Conteneur pour le logo SVG et le texte. * Ajoute un hover avec animation pour plus d'interactivité. */ .logo-wrapper { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform 0.3s ease; position: relative; } .logo-wrapper:hover { transform: translateY(-2px); } .logo-svg { width: 40px; height: 40px; transition: all 0.3s ease; } .logo-svg circle { fill: var(--primary); transition: fill 0.3s ease; } .logo-svg text { fill: white; font-weight: 900; font-size: 32px; } .logo-svg:hover circle { fill: var(--primary-dark); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .logo-text { font-size: 24px; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* * HEADER-ACTIONS : * Groupe les boutons (thème, langue, menu hamburger). * Amélioration : Espacement constant, et les boutons restent visibles sur mobile pour "rester constante". */ .header-actions { display: flex; gap: 12px; align-items: center; position: relative; } .icon-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--bg-alt); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 18px; position: relative; } .icon-btn:hover { transform: scale(1.1); border-color: var(--primary); background: var(--primary); } /* * MENU-TOGGLE (HAMBURGER) : * Bouton hamburger pour ouvrir le menu off-canvas sur mobile/tablette. * Amélioration : Style plus moderne avec bordure arrondie, animation fluide des barres. * Ajout d'une ombre légère pour le faire ressortir. */ .menu-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 1002; background: var(--primary); border-radius: 8px; border: 2px solid var(--primary-dark); position: relative; box-shadow: var(--shadow-sm); /* Amélioration : Ombre pour profondeur */ } .menu-toggle span { width: 25px; height: 3px; background: white; border-radius: 3px; transition: all 0.3s ease; display: block; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .menu-toggle:hover { background: var(--primary-dark); /* Amélioration : Hover pour feedback */ transform: scale(1.05); } /* ==================== OFF-CANVAS MENU ==================== */ /* * OFF-CANVAS MENU : * Menu latéral fixe qui slide depuis la gauche. * #page-container se déplace pour révéler le menu. * Pour un débutant : C'est comme un tiroir qui s'ouvre. */ #page-container { position: relative; z-index: 1; background: var(--bg-main); transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } nav { position: fixed; top: 0; left: 0; width: 280px; height: 100%; background: var(--bg-alt); z-index: 0; display: flex; flex-direction: column; padding: 60px 30px; gap: 15px; overflow-y: auto; } body.menu-open #page-container { transform: translateX(280px); box-shadow: 0 0 20px rgba(0,0,0,0.2); } body.menu-open { overflow: hidden; } /* Styles des liens dans le menu */ nav a { display: block; padding: 18px 24px; text-align: center; font-size: 18px; font-weight: 600; border-radius: 12px; background: var(--bg-main); border: 2px solid var(--border); margin: 0; color: var(--text-primary); transition: all 0.3s ease; } nav a:hover { background: var(--primary); color: white; border-color: var(--primary); } .nav-cta { background: var(--primary) !important; color: white !important; border: none !important; margin-top: 8px; } /* * MEDIA QUERIES POUR RESPONSIVE : * Adaptations pour différents tailles d'écrans. * Amélioration : Sur mobile, les boutons thème et langue restent visibles (plus de display:none). * Hamburger s'affiche sur mobile et tablette. * Ajustements pour espacement réduit sur petits écrans. */ @media (max-width: 768px) { .menu-toggle { display: flex !important; } /* Amélioration : Les boutons icon-btn (thème et langue) restent visibles sur mobile pour "rester constante" */ .header-actions .icon-btn { display: flex !important; } .header-actions { gap: 8px; /* Réduction d'espacement pour fit sur mobile */ } .icon-btn { width: 36px; /* Plus petit sur mobile */ height: 36px; font-size: 16px; } .header-container { padding: 14px 20px; } .logo-svg { width: 36px; height: 36px; } .logo-text { font-size: 20px; } nav { padding: 80px 24px 32px; gap: 16px; } } @media (max-width: 1024px) and (min-width: 769px) { .menu-toggle { display: flex !important; } } .mobile-detected .menu-toggle { display: flex !important; } /* Note : Si mobile détecté via JS, on force l'affichage du hamburger */ /* * HERO SECTION : * Section d'accueil avec grille responsive et animations. * Fond avec gradient radial animé pour dynamisme. */ .hero { min-height: 100vh; display: flex; align-items: center; padding: 120px 0 80px; background: var(--bg-main); position: relative; overflow: hidden; opacity: 1 !important; transform: translateY(0) !important; } .hero::before { content: ''; position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, rgba(255, 98, 0, 0.1), transparent); top: -200px; right: -100px; border-radius: 50%; animation: float 20s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -50px) rotate(120deg); } 66% { transform: translate(-20px, 20px) rotate(240deg); } } .hero-container { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .hero-content { animation: fadeInUp 0.8s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: linear-gradient(135deg, rgba(255, 98, 0, 0.1), rgba(255, 69, 0, 0.1)); border: 1px solid rgba(255, 98, 0, 0.2); border-radius: 100px; font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 24px; animation: fadeInUp 0.8s ease-out 0.2s both; } .hero h1 { margin-bottom: 24px; animation: fadeInUp 0.8s ease-out 0.3s both; } .hero-desc { font-size: 20px; line-height: 1.8; color: var(--text-secondary); margin-bottom: 32px; max-width: 540px; animation: fadeInUp 0.8s ease-out 0.4s both; } .hero-cta { display: flex; gap: 16px; flex-wrap: wrap; animation: fadeInUp 0.8s ease-out 0.5s both; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 32px; font-size: 16px; font-weight: 600; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; border: none; position: relative; overflow: hidden; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; box-shadow: var(--shadow-lg); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); } .btn-secondary { background: var(--bg-alt); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--bg-subtle); transform: translateY(-2px); } .hero-image { position: relative; animation: fadeInRight 0.8s ease-out 0.6s both; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .hero-phone { width: 100%; max-width: 400px; margin: 0 auto; position: relative; animation: floatPhone 6s ease-in-out infinite; } @keyframes floatPhone { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-20px) rotate(5deg); } } .phone-mockup { position: relative; width: 100%; aspect-ratio: 9 / 19; background: linear-gradient(145deg, #1e293b, #0f172a); border-radius: 40px; padding: 12px; box-shadow: var(--shadow-2xl); border: 3px solid rgba(255, 98, 0, 0.3); transition: all 0.5s ease; /* Amélioration : Transition fluide pour le mockup */ } .phone-screen { width: 100%; height: 100%; background: white; border-radius: 32px; overflow: hidden; position: relative; transition: opacity 0.3s ease; /* Amélioration : Pour fluidité lors des changements */ } .phone-notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 28px; background: #0f172a; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; z-index: 10; } .status-bar { display: flex; justify-content: space-between; padding: 12px 20px; font-size: 12px; font-weight: 600; color: #0f172a; transition: all 0.3s ease; /* Amélioration : Fluidité */ } .phone-content { padding: 20px; height: calc(100% - 50px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--primary) #f1f5f9; transition: opacity 0.5s ease-in-out; /* Amélioration : Transition fluide pour le contenu */ } .phone-content.fade { opacity: 0; /* Classe pour fade out/in */ } .phone-content::-webkit-scrollbar { width: 4px; } .phone-content::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } .content-card-phone { background: linear-gradient(135deg, rgba(255, 98, 0, 0.05), rgba(255, 69, 0, 0.05)); padding: 20px; border-radius: 16px; margin-bottom: 16px; border: 1px solid rgba(255, 98, 0, 0.1); animation: slideInUp 0.5s ease-out; transition: transform 0.3s ease; /* Amélioration : Hover fluide */ } .content-card-phone:hover { transform: scale(1.02); /* Amélioration : Interaction */ } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card-title { font-size: 14px; font-weight: 700; color: var(--primary); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .card-value { font-size: 28px; font-weight: 900; color: #0f172a; margin-bottom: 4px; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .card-subtitle { font-size: 12px; color: var(--success); font-weight: 600; display: flex; align-items: center; gap: 4px; } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; } .stat-item { background: white; padding: 16px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid rgba(255, 98, 0, 0.1); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-label { font-size: 11px; color: var(--text-tertiary); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .stat-value { font-size: 20px; font-weight: 800; color: var(--primary); } .phone-nav { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 24px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(10px); padding: 8px 20px; border-radius: 24px; z-index: 5; box-shadow: var(--shadow-lg); transition: all 0.3s ease; /* Amélioration : Fluidité */ } .nav-dot { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; cursor: pointer; position: relative; } .nav-dot.active { background: var(--primary); } .nav-dot svg { width: 18px; height: 18px; fill: #64748b; transition: fill 0.3s ease; } .nav-dot.active svg { fill: white; } .nav-dot:hover:not(.active) { background: rgba(255, 98, 0, 0.1); } .product-item { display: flex; align-items: center; gap: 12px; background: white; padding: 12px; border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255, 98, 0, 0.1); box-shadow: var(--shadow-sm); transition: transform 0.3s ease; /* Amélioration : Hover fluide */ } .product-item:hover { transform: scale(1.02); } .product-icon { width: 40px; height: 40px; background: linear-gradient(135deg, rgba(255, 98, 0, 0.1), rgba(255, 69, 0, 0.1)); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .product-info { flex: 1; } .product-name { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; } .product-stock { font-size: 11px; color: var(--text-tertiary); } .stock-badge { padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; } .stock-ok { background: rgba(16, 185, 129, 0.1); color: var(--success); } .stock-low { background: rgba(245, 158, 11, 0.1); color: var(--warning); } .stock-out { background: rgba(239, 68, 68, 0.1); color: var(--danger); } .chart-container { background: white; padding: 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid rgba(255, 98, 0, 0.1); } .chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; margin-top: 12px; } .chart-bar { flex: 1; background: linear-gradient(to top, var(--primary), var(--primary-light)); border-radius: 6px 6px 0 0; position: relative; transition: all 0.3s ease; animation: barGrow 0.8s ease-out backwards; } @keyframes barGrow { from { height: 0; opacity: 0; } to { height: 100%; opacity: 1; } } .chart-bar:hover { opacity: 0.8; transform: translateY(-4px); } .chart-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: var(--text-tertiary); font-weight: 600; } .alert-badge { background: rgba(239, 68, 68, 0.1); border-left: 4px solid var(--danger); padding: 12px; border-radius: 8px; margin-bottom: 16px; transition: all 0.3s ease; /* Amélioration : Fluidité */ } .alert-text { font-size: 12px; color: var(--danger); font-weight: 600; } .success-badge { background: rgba(16, 185, 129, 0.1); border-left: 4px solid var(--success); padding: 12px; border-radius: 8px; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; transition: all 0.3s ease; /* Amélioration : Fluidité */ } .success-text { font-size: 12px; color: var(--success); font-weight: 600; } /* * AUTRES SECTIONS : * Styles pour les sections alternatives, headers de section, promesses, features, etc. * Utilise des grids pour des layouts responsives. */ .section-alt { background: var(--bg-alt); } .section-header { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-2xl); } .section-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: linear-gradient(135deg, rgba(255, 98, 0, 0.1), rgba(255, 69, 0, 0.1)); border: 1px solid rgba(255, 98, 0, 0.2); border-radius: 100px; font-size: 13px; font-weight: 600; color: var(--primary); margin-bottom: 16px; } .section-title { margin-bottom: 20px; } .section-desc { font-size: 18px; color: var(--text-secondary); line-height: 1.8; } .promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; margin-top: var(--spacing-2xl); } .promise-card { background: var(--bg-main); padding: 40px; border-radius: var(--radius-xl); border: 1px solid var(--border); transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .promise-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); transform: scaleX(0); transition: transform 0.3s ease; } .promise-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: var(--primary); } .promise-card:hover::before { transform: scaleX(1); } .promise-icon { width: 64px; height: 64px; background: linear-gradient(135deg, rgba(255, 98, 0, 0.1), rgba(255, 69, 0, 0.1)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; margin-bottom: 24px; } .promise-card h3 { font-size: 24px; margin-bottom: 12px; } .promise-card p { font-size: 16px; line-height: 1.75; color: var(--text-secondary); } .promise-placeholder { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); } .placeholder-line { height: 10px; background: linear-gradient(90deg, var(--bg-subtle) 0%, var(--bg-alt) 50%, var(--bg-subtle) 100%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; margin-bottom: 8px; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .placeholder-line:last-child { width: 60%; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: var(--spacing-2xl); } .feature-card { background: var(--bg-main); padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); transition: all 0.3s ease; text-align: center; } .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .feature-icon { font-size: 48px; margin-bottom: 20px; display: block; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .feature-card h4 { font-size: 20px; margin-bottom: 12px; color: var(--primary); } .feature-card p { font-size: 15px; line-height: 1.7; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; margin-top: var(--spacing-2xl); } .testimonial-card { background: var(--bg-main); padding: 32px; border-radius: var(--radius-xl); border: 1px solid var(--border); position: relative; transition: all 0.3s ease; } .testimonial-card::before { content: '"'; position: absolute; top: 20px; left: 20px; font-size: 80px; font-family: Georgia, serif; color: var(--primary); opacity: 0.1; line-height: 1; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .testimonial-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; position: relative; z-index: 1; } .testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; font-size: 24px; } .testimonial-info h4 { font-size: 18px; margin-bottom: 4px; } .testimonial-info p { font-size: 14px; color: var(--text-tertiary); } .testimonial-text { font-size: 15px; line-height: 1.75; font-style: italic; color: var(--text-secondary); position: relative; z-index: 1; margin-bottom: 16px; } .testimonial-rating { color: #f59e0b; font-size: 18px; } .beta-section { background: var(--bg-main); } .beta-container { max-width: 720px; margin: 0 auto; background: var(--bg-alt); padding: var(--spacing-2xl); border-radius: var(--radius-xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .form-group { margin-bottom: 24px; } .form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px 16px; font-size: 15px; font-family: 'Inter', sans-serif; background: var(--bg-main); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); transition: all 0.3s ease; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255, 98, 0, 0.1); } .form-group textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-submit { margin-top: 32px; } .form-success { display: none; padding: 20px; background: rgba(16, 185, 129, 0.1); border: 1px solid var(--success); border-radius: var(--radius-md); color: var(--success); font-weight: 600; text-align: center; } .form-success.show { display: block; } footer { background: var(--bg-alt); padding: var(--spacing-2xl) 0; border-top: 1px solid var(--border); text-align: center; } .footer-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; } .social-icons { display: flex; justify-content: center; gap: 16px; margin-top: 24px; } .social-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-main); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .social-icon:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-4px); } .social-icon svg { width: 20px; height: 20px; fill: var(--text-secondary); transition: fill 0.3s ease; } .social-icon:hover svg { fill: white; } .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; background: linear-gradient(135deg, #25D366, #128C7E); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xl); cursor: pointer; z-index: 999; transition: all 0.3s ease; animation: floatWA 3s ease-in-out infinite; } @keyframes floatWA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 20px 40px rgba(37, 211, 102, 0.4); } .whatsapp-float svg { width: 32px; height: 32px; fill: white; } /* * MEDIA QUERIES RESPONSIVE SUPPLÉMENTAIRES : * Ajustements pour tablettes et mobiles. * Réduit les tailles et paddings pour un meilleur fit. */ @media (max-width: 1024px) { .hero-container { grid-template-columns: 1fr; gap: 48px; text-align: center; } .hero-desc { margin: 0 auto 32px; } .hero-cta { justify-content: center; } .promise-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } .features-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { html { font-size: 16px; } .container { padding: 0 20px; } section { padding: 60px 0; } .hero { min-height: auto; padding: 100px 20px 60px; } .hero-container { gap: 40px; } h1 { font-size: 2.2rem !important; line-height: 1.1; } .hero-desc { font-size: 17px; margin-bottom: 28px; } .hero-cta { flex-direction: column; gap: 12px; } .btn { width: 100%; padding: 16px 24px; font-size: 16px; } .hero-phone { max-width: 280px; } .section-header { margin-bottom: 40px; } .section-title { font-size: 1.8rem !important; } .section-desc { font-size: 16px; } .promise-grid { grid-template-columns: 1fr !important; gap: 20px; } .features-grid { grid-template-columns: 1fr !important; gap: 16px; } .testimonials-grid { grid-template-columns: 1fr !important; gap: 20px; } .promise-card { padding: 28px; } .feature-card { padding: 28px; } .testimonial-card { padding: 24px; } .beta-container { padding: 28px 20px; } .form-row { grid-template-columns: 1fr !important; gap: 0; } .form-group input, .form-group textarea, .form-group select { padding: 14px 16px; font-size: 16px; } .whatsapp-float { width: 56px; height: 56px; bottom: 20px; right: 20px; } .whatsapp-float svg { width: 28px; height: 28px; } } @media (max-width: 480px) { html { font-size: 15px; } h1 { font-size: 1.9rem !important; } .section-title { font-size: 1.6rem !important; } .hero { padding: 80px 16px 50px; } .hero-phone { max-width: 240px; } .phone-mockup { padding: 8px; border-radius: 30px; } .phone-screen { border-radius: 24px; } .phone-content { padding: 14px; } .content-card-phone { padding: 16px; margin-bottom: 12px; } .card-title { font-size: 13px; } .card-value { font-size: 24px; } .stats-grid { gap: 10px; } .stat-item { padding: 12px; } .stat-label { font-size: 10px; } .stat-value { font-size: 18px; } .product-item { padding: 10px; margin-bottom: 10px; } .product-icon { width: 36px; height: 36px; font-size: 18px; } .product-name { font-size: 12px; } .product-stock { font-size: 10px; } .container { padding: 0 16px; } .promise-card, .feature-card, .testimonial-card { padding: 24px 20px; } .beta-container { padding: 24px 16px; } } [lang="en"] .lang-fr { display: none; } [lang="fr"] .lang-en { display: none; }