/* ============================================ IRSANETECH — AI Agency Charte graphique & composants — theme sombre (memes classes que la version claire : voir style.light.css pour l'original) ============================================ */ /* --- CSS Variables --- */ :root { /* Couleurs de marque — inchangees */ --navy: #0f172a; --navy-light: #1e293b; --blue: #0ea5e9; --blue-dark: #0284c7; --violet: #7c3aed; --violet-dark: #6d28d9; --green: #059669; --green-dark: #047857; --amber: #f59e0b; --amber-dark: #d97706; /* Variantes eclaircies : les teintes de marque servent d'accent sur fond sombre, ou leur version saturee tombe sous 4.5:1 de contraste */ --violet-on-dark: #a78bfa; --blue-on-dark: #38bdf8; --green-on-dark: #34d399; --amber-on-dark: #fbbf24; /* Fonds sombres — famille navy poussee vers le noir */ --ink: #05070e; --ink-2: #0a0f1c; --panel: rgba(10, 15, 28, 0.72); --panel-solid: #0a0f1c; --hairline: rgba(255, 255, 255, 0.07); --hairline-strong: rgba(255, 255, 255, 0.14); --white: #f8fafc; --white-pure: #ffffff; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; /* Eclairci depuis #64748b : les pages utilisent --slate-500 en style inline pour du texte secondaire, qui tombait a 4.1:1 sur fond sombre */ --slate-500: #7d8ba1; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --red: #ef4444; --font-heading: 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --max-width: 1200px; --header-height: 72px; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(0,0,0,0.5); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --shadow-lg: 0 18px 40px rgba(0,0,0,0.55); --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Filet degrade au survol — signature du template */ --edge: linear-gradient(110deg, transparent, rgba(255,255,255,0.22), transparent); color-scheme: dark; } /* --- Reset --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--ink); /* le fond vit sur : reste transparent pour laisser voir le canvas */ } body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--slate-400); background: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue-on-dark); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--white); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } ::selection { background: rgba(124, 58, 237, 0.4); color: var(--white); } :focus-visible { outline: 2px solid var(--blue-on-dark); outline-offset: 2px; } /* ============================================ FOND ANIME — Gateway Flow ============================================ */ .flow-bg { position: fixed; inset: 0; z-index: -1; /* sous le contenu, au-dessus du fond de */ overflow: hidden; pointer-events: none; } .flow-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Halo central + voile de lisibilite */ .flow-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.13) 0%, transparent 45%), radial-gradient(circle at 84% 78%, rgba(14, 165, 233, 0.11) 0%, transparent 45%); } /* Tramage (dither) global, au-dessus de tout mais non cliquable */ .flow-dither { position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: 0.13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2 2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E"); background-size: 2px 2px; } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--white); line-height: 1.15; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 200; letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 200; letter-spacing: 0.01em; text-transform: uppercase; } h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); font-weight: 500; letter-spacing: 0.01em; } h4 { font-size: 1.05rem; font-weight: 500; } p { margin-bottom: 1rem; } .text-violet { color: var(--violet-on-dark); } .text-blue { color: var(--blue-on-dark); } .text-green { color: var(--green-on-dark); } .text-amber { color: var(--amber-on-dark); } .text-slate { color: var(--slate-400); } .text-white { color: var(--white); } .text-center { text-align: center; } /* --- Layout --- */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; } .section { padding: 5rem 0; position: relative; } .section-sm { padding: 3rem 0; position: relative; } /* Les bandes claire/sombre de la version d'origine deviennent des voiles translucides : le rythme des sections reste, le flux reste visible */ .section-dark { background: rgba(5, 7, 14, 0.62); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); color: var(--slate-400); } .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); } .section-light { background: rgba(255, 255, 255, 0.022); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .section-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; } .section-header p { color: var(--slate-400); font-size: 1.05rem; margin-top: 0.75rem; } .section-badge { display: inline-block; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2.5px; padding: 0.4rem 1rem; border-radius: 50px; margin-bottom: 1rem; border: 1px solid var(--hairline); background: rgba(255, 255, 255, 0.02); } .badge-violet { color: var(--violet-on-dark); border-color: rgba(124, 58, 237, 0.35); } .badge-blue { color: var(--blue-on-dark); border-color: rgba(14, 165, 233, 0.35); } .badge-green { color: var(--green-on-dark); border-color: rgba(5, 150, 105, 0.4); } /* --- Grid --- */ .grid { display: grid; gap: 2rem; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* --- Header --- */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); background: rgba(5, 7, 14, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1000; border-bottom: 1px solid var(--hairline); transition: background var(--transition); } .header.scrolled { background: rgba(5, 7, 14, 0.94); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* --- Logo (inchange, simplement mis en valeur) --- */ .logo { display: flex; align-items: center; gap: 0.75rem; } .logo svg { height: 40px; width: auto; filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.35)); transition: filter var(--transition); } .logo:hover svg { filter: drop-shadow(0 0 14px rgba(14, 165, 233, 0.5)); } .logo-text { font-family: var(--font-heading); font-size: 1.2rem; color: var(--white); font-weight: 500; letter-spacing: 3px; } .logo-text span { font-weight: 200; color: var(--slate-400); } .logo-sub { display: block; font-size: 0.6rem; font-weight: 400; letter-spacing: 3px; color: var(--violet-on-dark); text-transform: uppercase; margin-top: -2px; } /* --- Navigation --- */ .nav { display: flex; align-items: center; gap: 0.25rem; } .nav a { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 1.5px; color: var(--slate-400); padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); transition: all var(--transition); } .nav a:hover, .nav a.active { color: var(--white); background: rgba(255, 255, 255, 0.05); } .nav a.active { color: var(--blue-on-dark); } .nav-cta { margin-left: 0.5rem; } .nav-cta a { background: var(--amber) !important; color: #1a1204 !important; font-weight: 600 !important; padding: 0.5rem 1.25rem !important; border-radius: 50px !important; letter-spacing: 1px !important; } .nav-cta a:hover { background: var(--amber-on-dark) !important; box-shadow: 0 0 18px rgba(245, 158, 11, 0.3); } /* Mobile menu button */ .menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; cursor: pointer; z-index: 1001; } .menu-toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: all var(--transition); } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Seuil remonte de 900 a 1024px : les libelles en majuscules espacees sont plus larges que les originaux et debordaient avec le CTA autour de 1000px */ @media (max-width: 1024px) { .menu-toggle { display: flex; } .nav { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: rgba(5, 7, 14, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); flex-direction: column; align-items: stretch; padding: 5rem 1.5rem 2rem; transition: right var(--transition); border-left: 1px solid var(--hairline); } .nav.open { right: 0; } .nav a { padding: 0.75rem 1rem; font-size: 0.85rem; } .nav-cta { margin-left: 0; margin-top: 1rem; } .nav-cta a { text-align: center; display: block; } } /* --- Hero --- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: transparent; /* laisse passer le Gateway Flow */ overflow: hidden; padding-top: var(--header-height); } .hero::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(124, 58, 237, 0.14) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -30%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 750px; } .hero h1 { color: var(--white); margin-bottom: 1.5rem; } .hero h1 .highlight { background: linear-gradient(135deg, var(--violet-on-dark), var(--blue-on-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 300; } .hero p { color: var(--slate-400); font-size: 1.15rem; font-weight: 300; margin-bottom: 2rem; max-width: 550px; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; } /* Reveal masque du titre — remplace l'ancien fade sur le hero */ .hero h1, .hero p, .hero .section-badge, .hero-buttons { animation: rise-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero .section-badge { animation-delay: 0.05s; } .hero h1 { animation-delay: 0.15s; } .hero p { animation-delay: 0.3s; } .hero-buttons { animation-delay: 0.45s; } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* --- Buttons --- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; padding: 0.75rem 1.75rem; border-radius: 50px; transition: all var(--transition); border: 1px solid transparent; } /* Filet degrade au survol */ .btn::after, .card::after, .plan-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--edge); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity var(--transition); pointer-events: none; } .btn:hover::after, .card:hover::after, .plan-card:hover::after { opacity: 1; } .btn-primary { background: var(--amber); color: #1a1204; } .btn-primary:hover { background: var(--amber-on-dark); color: #1a1204; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(245, 158, 11, 0.28); } .btn-outline { border-color: var(--hairline-strong); color: var(--white); background: rgba(255, 255, 255, 0.02); } .btn-outline:hover { border-color: transparent; color: var(--white); background: rgba(255, 255, 255, 0.06); } .btn-violet { background: var(--violet); color: var(--white); } .btn-violet:hover { background: var(--violet-dark); color: var(--white); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(124, 58, 237, 0.35); } .btn-blue { background: var(--blue); color: #04121c; } .btn-blue:hover { background: var(--blue-on-dark); color: #04121c; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(14, 165, 233, 0.3); } .btn-green { background: var(--green); color: var(--white); } .btn-green:hover { background: var(--green-on-dark); color: #052e21; transform: translateY(-1px); box-shadow: 0 6px 22px rgba(5, 150, 105, 0.3); } .btn-sm { font-size: 0.75rem; padding: 0.5rem 1.25rem; } .btn-lg { font-size: 0.9rem; padding: 0.9rem 2.25rem; } /* --- Cards --- */ .card { position: relative; background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 2rem; transition: all var(--transition); } .card:hover { border-color: transparent; box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-icon { width: 52px; height: 52px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .card-icon svg { width: 26px; height: 26px; } .card-icon-violet { background: rgba(124, 58, 237, 0.12); color: var(--violet-on-dark); border-color: rgba(124, 58, 237, 0.28); } .card-icon-blue { background: rgba(14, 165, 233, 0.12); color: var(--blue-on-dark); border-color: rgba(14, 165, 233, 0.28); } .card-icon-green { background: rgba(5, 150, 105, 0.14); color: var(--green-on-dark); border-color: rgba(5, 150, 105, 0.3); } .card h3 { margin-bottom: 0.75rem; } .card p { color: var(--slate-400); font-size: 0.95rem; font-weight: 300; margin-bottom: 1.25rem; } .card-link { position: relative; z-index: 1; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; display: inline-flex; align-items: center; gap: 0.375rem; } .card-link svg { width: 16px; height: 16px; transition: transform var(--transition); } .card-link:hover svg { transform: translateX(3px); } /* Dark card variant — conserve pour compatibilite */ .card-dark { background: rgba(30, 41, 59, 0.5); border-color: var(--hairline); } .card-dark:hover { border-color: transparent; } .card-dark h3 { color: var(--white); } .card-dark p { color: var(--slate-400); } /* --- Stats Bar --- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; } .stat-number { font-family: var(--font-heading); font-size: 2.6rem; font-weight: 200; background: linear-gradient(135deg, var(--violet-on-dark), var(--blue-on-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 0.5rem; } .stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: var(--slate-400); } @media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } } /* --- Clients --- */ .clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2rem; align-items: center; } /* Le jeu de logos melange des PNG transparents a marque sombre et des PNG a fond blanc opaque : aucun filtre ne convient aux deux. On les pose donc sur une pastille claire, ce qui rend les premiers lisibles et fait disparaitre le fond des seconds. Le grisage au repos / couleur au survol d'origine est conserve, applique a l'image seule pour que les pastilles restent stables. */ .client-logo { display: flex; align-items: center; justify-content: center; padding: 0.9rem 1.1rem; min-height: 78px; border-radius: var(--radius-sm); background: rgba(241, 245, 249, 0.88); border: 1px solid var(--hairline); transition: all var(--transition); } .client-logo:hover { background: var(--white-pure); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } .client-logo img { max-height: 46px; width: auto; opacity: 0.72; filter: grayscale(100%); transition: all var(--transition); } .client-logo:hover img { opacity: 1; filter: grayscale(0); } /* --- Pricing / Plans Table --- */ .plan-card { position: relative; background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 2.5rem 2rem; text-align: center; transition: all var(--transition); } .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; } .plan-card.featured { border-color: rgba(14, 165, 233, 0.45); box-shadow: 0 0 40px rgba(14, 165, 233, 0.08); } .plan-card.featured::before { content: 'Populaire'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #04121c; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; padding: 0.3rem 1rem; border-radius: 50px; z-index: 2; } .plan-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--white); margin-bottom: 0.5rem; } .plan-desc { font-size: 0.9rem; color: var(--slate-400); margin-bottom: 1.5rem; } .plan-features { text-align: left; margin-bottom: 2rem; position: relative; z-index: 1; } .plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.9rem; font-weight: 300; color: var(--slate-400); border-bottom: 1px solid var(--hairline); } .plan-features li:last-child { border-bottom: none; } .plan-features li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; } .plan-features .check { color: var(--green-on-dark); } .plan-features .cross { color: var(--slate-600); } /* --- Process / Steps --- */ .process { display: flex; align-items: flex-start; gap: 1rem; position: relative; } .process-step { flex: 1; text-align: center; position: relative; } .process-step::after { content: ''; position: absolute; top: 28px; right: -50%; width: 100%; height: 1px; background: linear-gradient(90deg, var(--hairline), transparent); } .process-step:last-child::after { display: none; } .process-number { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 300; margin: 0 auto 1rem; position: relative; z-index: 1; border: 1px solid var(--hairline); background: var(--panel-solid); } .process-step h4 { margin-bottom: 0.5rem; } .process-step p { font-size: 0.875rem; font-weight: 300; color: var(--slate-400); } @media (max-width: 768px) { .process { flex-direction: column; } .process-step::after { display: none; } } /* --- Timeline --- */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--violet), var(--blue), transparent); opacity: 0.5; } .timeline-item { position: relative; padding-bottom: 2.5rem; padding-left: 1.5rem; } .timeline-item::before { content: ''; position: absolute; left: -2rem; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue-on-dark); background: var(--ink); box-shadow: 0 0 12px rgba(14, 165, 233, 0.4); transform: translateX(-5px); } .timeline-item .year { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; color: var(--blue-on-dark); margin-bottom: 0.25rem; } .timeline-item h4 { margin-bottom: 0.5rem; } .timeline-item p { font-weight: 300; color: var(--slate-400); } /* --- Values --- */ .values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } .value-item { text-align: center; padding: 1.5rem 1rem; } .value-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(14, 165, 233, 0.1); border: 1px solid var(--hairline); /* neutre : les pages surchargent le fond */ display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .value-icon svg { width: 28px; height: 28px; color: var(--blue-on-dark); } .value-item h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 0.35rem; } .value-item p { font-size: 0.85rem; font-weight: 300; color: var(--slate-400); } @media (max-width: 768px) { .values-grid { grid-template-columns: repeat(2, 1fr); } } /* --- Contact Form --- */ .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--slate-300); margin-bottom: 0.5rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.95rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); background: rgba(5, 7, 14, 0.7); color: var(--white); transition: border-color var(--transition), box-shadow var(--transition); } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--slate-500); } .form-group select option { background: var(--panel-solid); color: var(--white); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: rgba(14, 165, 233, 0.6); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); } .form-group textarea { min-height: 120px; resize: vertical; } /* --- Footer --- */ .footer { background: rgba(5, 7, 14, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--hairline); color: var(--slate-400); padding: 4rem 0 0; position: relative; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } .footer h4 { color: var(--white); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1.25rem; } .footer-about { max-width: 300px; } .footer-about p { font-size: 0.875rem; font-weight: 300; line-height: 1.75; margin-top: 1rem; } .footer-links li { margin-bottom: 0.5rem; } .footer-links a { font-size: 0.875rem; font-weight: 300; color: var(--slate-400); } .footer-links a:hover { color: var(--white); } .footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.875rem; font-weight: 300; } .footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--blue-on-dark); } .footer-bottom { border-top: 1px solid var(--hairline); padding: 1.5rem 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--slate-500); } .footer-social { display: flex; gap: 1rem; } .footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; color: var(--slate-400); transition: all var(--transition); } .footer-social a:hover { background: var(--blue); border-color: var(--blue); color: #04121c; } .footer-social svg { width: 18px; height: 18px; } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-about { max-width: 100%; } .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; } } /* --- CTA Section --- */ .cta-section { position: relative; background: linear-gradient(135deg, #4c1d95 0%, #075985 100%); padding: 5rem 0; text-align: center; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1) 0%, transparent 60%); pointer-events: none; } .cta-section h2 { color: var(--white); margin-bottom: 1rem; } .cta-section p { color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; font-weight: 300; max-width: 600px; margin: 0 auto 2rem; } /* --- Map --- */ .map-container { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); } .map-container iframe { width: 100%; height: 400px; border: none; /* la carte Google est claire : on l'assombrit pour l'accorder au theme */ filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95); } /* --- Scroll Animations --- */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* --- Page Header (pages internes) --- */ .page-header { position: relative; background: transparent; padding: 9rem 0 4rem; text-align: center; border-bottom: 1px solid var(--hairline); overflow: hidden; } .page-header::before { content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%); width: 900px; height: 900px; /* Teinte propre a la page — surchargee en ligne via --page-tint */ background: radial-gradient(circle, var(--page-tint, rgba(124, 58, 237, 0.13)) 0%, transparent 62%); pointer-events: none; } .page-header h1 { color: var(--white); margin-bottom: 1rem; } .page-header p { color: var(--slate-400); font-size: 1.05rem; font-weight: 300; max-width: 600px; margin: 0 auto; } /* --- Feature List --- */ .feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .feature-item { display: flex; gap: 1rem; } .feature-icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--hairline); } .feature-icon svg { width: 24px; height: 24px; } .feature-item h4 { margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.9rem; } .feature-item p { font-size: 0.9rem; font-weight: 300; color: var(--slate-400); margin-bottom: 0; } @media (max-width: 768px) { .feature-list { grid-template-columns: 1fr; } } /* --- Comparison Table --- */ .comparison-table { width: 100%; border-collapse: collapse; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); background: var(--panel); } .comparison-table thead { background: rgba(255, 255, 255, 0.04); } .comparison-table th { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--white); padding: 1rem; text-align: center; } .comparison-table th:first-child { text-align: left; } .comparison-table td { padding: 0.875rem 1rem; font-size: 0.9rem; font-weight: 300; color: var(--slate-400); text-align: center; border-bottom: 1px solid var(--hairline); } .comparison-table td:first-child { text-align: left; font-weight: 400; color: var(--slate-300); } .comparison-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } .comparison-table .check-icon { color: var(--green-on-dark); } .comparison-table .cross-icon { color: var(--slate-600); } /* --- Responsive Utilities --- */ @media (max-width: 768px) { .hide-mobile { display: none !important; } .section { padding: 3.5rem 0; } .hero { min-height: auto; padding: 8rem 0 4rem; } .hero h1 { font-size: 2rem; } .hero-buttons { flex-direction: column; } .hero-buttons .btn { text-align: center; justify-content: center; } .stat-number { font-size: 2rem; } .page-header { padding: 7rem 0 3rem; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } } /* Overflow table wrapper for mobile */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* --- Animations reduites --- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fade-up { opacity: 1; transform: none; transition: none; } .hero h1, .hero p, .hero .section-badge, .hero-buttons { animation: none; } .flow-dither { display: none; } } /* ============================================ Widget chatbot — accord au theme sombre. Ses styles sont injectes par chatbot.js APRES cette feuille : on remonte la specificite avec body pour reprendre la main. ============================================ */ body .chatbot-window { background: rgba(10, 15, 28, 0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--hairline); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); } body .chatbot-messages { background: transparent; } body .chatbot-messages::-webkit-scrollbar-thumb { background: var(--slate-700); } body .chatbot-msg-bot { background: rgba(255, 255, 255, 0.05); color: var(--slate-300); border: 1px solid var(--hairline); } body .chatbot-msg-bot strong { color: var(--white); } body .chatbot-msg-bot a { color: var(--violet-on-dark); } body .chatbot-input { background: rgba(5, 7, 14, 0.9); border-top: 1px solid var(--hairline); } body .chatbot-input input { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); color: var(--white); } body .chatbot-input input::placeholder { color: var(--slate-600); } body .chatbot-input input:focus { border-color: rgba(124, 58, 237, 0.6); } body .chatbot-quick-actions { background: rgba(5, 7, 14, 0.9); border-top: 1px solid var(--hairline); } body .chatbot-quick-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--hairline); color: var(--slate-300); } body .chatbot-quick-btn:hover { border-color: rgba(124, 58, 237, 0.6); color: var(--violet-on-dark); } body .chatbot-typing span { background: var(--slate-500); }